/* Keywise practice games (pn-pr-*). Only theme tokens from style.css, so light and dark both work. */
.btn[hidden], .field[hidden], .check[hidden], .row[hidden], [class^="pn-pr-"][hidden], [class*=" pn-pr-"][hidden] { display: none !important; }

.pn-pr-stage { gap: 16px; }
.pn-pr-stage .prompt { overflow-wrap: anywhere; }
.pn-pr-keys { line-height: 2; }
.pn-pr-keys kbd { margin: 0 1px; }
.pn-pr-start { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0; }

/* answer buttons */
.pn-pr-answers .pn-pr-ans { position: relative; flex-direction: column; gap: 0; line-height: 1.2; padding: 8px 12px; text-align: center; }
.pn-pr-ans-label { font-weight: 600; }
.pn-pr-sub { font: 500 12px var(--font-mono); color: var(--muted); }
.pn-pr-ans.good .pn-pr-sub, .pn-pr-ans.bad .pn-pr-sub, .pn-pr-ans.on .pn-pr-sub { color: inherit; }
.pn-pr-key { position: absolute; top: 3px; right: 4px; font-size: 10px; padding: 0 3px; line-height: 1.3; opacity: 0.55; border-bottom-width: 1px; }
@media (hover: none) { .pn-pr-key { display: none; } }
.pn-pr-answers.pn-pr-notes12 { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.pn-pr-answers.pn-pr-keys15 { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.pn-pr-ans.pn-pr-missed { border-style: dashed; border-color: var(--good); color: var(--good); background: transparent; }

/* checkbox chips */
.pn-pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-pr-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); font: 500 13px var(--font-body); text-transform: none; letter-spacing: 0;
}
.pn-pr-chip input { width: 15px; height: 15px; margin: 0; }
.pn-pr-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.pn-pr-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.pn-pr-ref { align-items: end; }
.pn-pr-staff { display: flex; justify-content: center; min-width: 0; }
.pn-pr-staff .pn-staff-wrap { max-width: 100%; }
.pn-pr-diagram { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.pn-pr-diagram:empty { display: none; }
.pn-pr-diagram .pn-diag { max-width: 260px; }

/* echo slots */
.pn-pr-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; }
.pn-pr-slot {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 52px; padding: 0 8px;
  border: 2px dashed var(--line); border-radius: 10px; font: 800 22px var(--font-display); color: var(--muted);
}
.pn-pr-slot.good { border-style: solid; border-color: var(--good); background: var(--good-soft); color: var(--good); }

/* sight-reading */
.pn-pr-count { font: 800 20px var(--font-display); color: var(--accent); min-width: 8ch; }
.pn-pr-results:empty { display: none; }
.pn-pr-results { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.pn-pr-pct { font-size: clamp(44px, 10vw, 68px); color: var(--accent); }
.chip.pn-pr-bad { background: var(--bad-soft); color: var(--bad); }
.pn-num { width: 5.5em; }