.pf h2 { font-size: 1.3rem; margin: 1.2rem 0 .4rem; }
.pf-prompt, .pf-rules { color: var(--bh-muted); line-height: 1.55; margin: .45rem 0; }
.pf-rules { font-size: .9rem; }
.pf-endpoints { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.15rem 0 .4rem; }
.pf-endpoints strong { font-size: 1.7rem; line-height: 1.3; text-align: center; overflow-wrap: break-word; min-width: 0; }
.pf-endpoints i { color: var(--bh-accent); font-size: 1.3rem; flex-shrink: 0; }
.pf-route-note { font-size: .8rem; color: var(--bh-muted); text-align: center; margin: 0 0 .9rem; }
.pf-progress { display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; margin: .65rem 0 .8rem; font-size: .85rem; color: var(--bh-muted); font-variant-numeric: tabular-nums; }
.pf-progress strong { color: var(--bh-ink); }
.pf-paths { margin: 0 0 1.2rem; list-style: none; padding: 0; }
.pf-path { padding: .55rem 0; border-bottom: 1px solid var(--bh-line); }
.pf-path-line { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: .55rem; align-items: center; }
.pf-path-number { font-weight: 650; font-size: .85rem; }
.pf-path-number small { display: block; font-weight: 400; font-size: .75rem; color: var(--bh-muted); margin-top: .2rem; }
.pf-slots { display: grid; grid-template-columns: repeat(var(--pf-slot-count), minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.pf-slot { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; min-width: 0; border: 1px dashed var(--bh-line); border-radius: 6px; padding: .4rem; font-weight: 650; color: var(--bh-muted); background: #f7f9f8; overflow-wrap: break-word; }
.pf-slot:not(:last-child)::after { content: ""; position: absolute; width: .4rem; height: .4rem; right: -.7rem; top: calc(50% - .2rem); border-top: 1px solid var(--bh-muted); border-right: 1px solid var(--bh-muted); transform: rotate(45deg); }
.pf-slot.is-earned { color: #085c55; border-style: solid; border-color: var(--bh-accent); background: var(--bh-selected); }
.pf-slot.is-revealed { color: #674711; border-style: solid; border-color: #bba67f; background: #faf5e9; }
.pf-slot.is-new { animation: pf-found 440ms cubic-bezier(.16, 1, .3, 1); }
.pf-path.is-complete .pf-path-number { color: var(--bh-accent); }
.pf-path-hint { margin: .5rem 0 .1rem 75px; color: #145f54; font-size: .85rem; line-height: 1.5; }
.pf-path-explanation { margin: .45rem 0 .1rem 75px; color: var(--bh-muted); font-size: .85rem; line-height: 1.55; }
.pf-input-label { display: block; font-weight: 650; margin-bottom: .4rem; font-size: .95rem; }
.pf-input-row { display: flex; gap: .6rem; align-items: stretch; }
.pf-input { flex: 1; min-width: 0; width: 100%; min-height: 48px; padding: .7rem .8rem; color: var(--bh-ink); background: #fff; border: 1px solid var(--bh-line); border-radius: 8px; caret-color: var(--bh-accent); }
.pf-input::placeholder { color: #626e6a; }
.pf-input:focus-visible, .pf-word:focus-visible { outline: 3px solid var(--bh-accent); outline-offset: 3px; }
.pf-input:disabled { background: #f1f5f4; color: var(--bh-muted); }
.pf-words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; }
.pf-word { min-height: 46px; border: 1px solid var(--bh-line); border-radius: 7px; padding: .65rem .45rem; background: #fff; color: var(--bh-ink); font-weight: 650; overflow-wrap: break-word; }
.pf-word[aria-pressed="true"] { border-color: var(--bh-accent); color: #085c55; background: var(--bh-selected); }
.pf-word.is-hit:disabled { border-color: #85b6a6; color: #145f54; background: #edf6f3; }
.pf-word.is-miss:disabled { color: #66716c; background: #f1f5f4; text-decoration: line-through; }
.pf-word:disabled { cursor: default; }
.pf-feedback { min-height: 2.6em; margin-top: .7rem; }
.pf-feedback.is-combo { color: var(--bh-accent); font-weight: 650; }
.pf-extra-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .6rem; }
.pf-small-stats { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--bh-muted); font-size: .8rem; font-variant-numeric: tabular-nums; margin: .7rem 0; }
.pf-guesses { margin: .9rem 0 0; padding-left: 1.3rem; color: var(--bh-muted); font-size: .85rem; line-height: 1.7; }
.pf-guesses li { padding: .1rem 0; }
.pf-assistance, .pf-finish-note, .pf-share-note { color: var(--bh-muted); font-size: .9rem; line-height: 1.6; }
.pf-finish { font-weight: 650; margin: 1rem 0 .35rem; }
.pf-route-review article { border-top: 1px solid var(--bh-line); padding: .85rem 0; }
.pf-route-review h3 { font-size: 1rem; margin: 0 0 .35rem; }
.pf-route-review p { font-size: .9rem; color: var(--bh-muted); line-height: 1.6; margin: .3rem 0; }
.pf-route-review .pf-review-line { font-weight: 650; color: var(--bh-ink); }
@keyframes pf-found { from { background: #bce5d7; transform: translateY(3px); } to { background: var(--bh-selected); transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .pf-slot.is-new { animation: none; } }
@media (hover: hover) { .pf-word:not(:disabled):hover { border-color: var(--bh-accent); background: #f4f9f7; } }
@media (max-width: 540px) { .pf-endpoints strong { font-size: 1.35rem; } .pf-path-line { grid-template-columns: 48px minmax(0, 1fr); gap: .35rem; } .pf-path-number { font-size: .8rem; } .pf-path-number small { font-size: .7rem; } .pf-slots { gap: .65rem; } .pf-slot { font-size: .85rem; padding: .3rem .2rem; } .pf-slot:not(:last-child)::after { right: -.48rem; width: .3rem; height: .3rem; } .pf-path-hint, .pf-path-explanation { margin-left: 53px; } .pf-words { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .pf .bh-result-actions { flex-direction: column; } .pf-word { font-size: .85rem; } .pf-slot { font-size: .8rem; } .pf-input-row .bh-primary { padding-inline: .8rem; } .pf-progress { justify-content: start; } }