.ws-controls { display: grid; gap: 4px; }
.ws-levels .pg-chip small { font-weight: 600; opacity: .85; }
.ws-custom { margin: 6px 0 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.ws-custom[hidden] { display: none; }
.ws-play { display: grid; gap: 16px; align-items: start; margin-top: 8px; }
.ws-board-wrap { width: 100%; max-width: 560px; }
.ws-board { --n: 8; display: grid; grid-template-rows: repeat(var(--n), 1fr); width: 100%; aspect-ratio: 1; border: 2px solid #2b2238; border-radius: 10px; background: #fffdf7; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; }
.ws-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.ws-cell { display: grid; place-items: center; min-width: 0; color: #2b2238; font-size: calc(min(100vw - 64px, 556px) / var(--n) * .56); font-weight: 800; line-height: 1; cursor: pointer; }
.ws-cell:focus-visible { outline: 3px solid #1f5fbf; outline-offset: -3px; border-radius: 4px; }
.ws-cell.ws-found { background: #cfe9df; color: #05463b; }
.ws-cell.ws-sel { background: #ffd9a8; }
.ws-cell.ws-anchor { background: #f59e42; color: #fff; }
.ws-side h3 { margin: 0 0 4px; font-size: 18px; }
.ws-progress { margin: 0 0 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.ws-bank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; min-height: 9.5rem; margin: 0; padding: 0; list-style: none; font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .03em; }
.ws-bank .ws-done { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.ws-timer { display: inline-block; min-width: 4.5ch; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ws-timer.ws-hidden { visibility: hidden; }
.ws-print-area { display: none; }
@media (min-width: 820px) {
  .ws-play { grid-template-columns: minmax(0, 560px) minmax(200px, 1fr); }
  .ws-cell { font-size: calc(556px / var(--n) * .56); }
  .ws-bank { grid-template-columns: 1fr 1fr; }
}

@page { margin: 0.5in; }
@media print {
  .ws-print-area { display: block !important; }
  .ws-sheet { color: #000; }
  .ws-sheet + .ws-sheet { break-before: page; }
  .ws-sheet h2 { margin: 0 0 4pt; font-size: 20pt; text-align: center; }
  .ws-sheet-meta { margin: 4pt 0 8pt; font-size: 11pt; text-align: center; }
  .ws-print-grid { --n: 8; width: 6.4in; margin: 0 auto 10pt; border-collapse: collapse; table-layout: fixed; border: 1.5pt solid #000; }
  .ws-print-grid td { width: calc(6.4in / var(--n)); height: calc(6.4in / var(--n)); padding: 0; text-align: center; vertical-align: middle; font-family: Arial, Helvetica, sans-serif; font-size: calc(6.4in / var(--n) * .5); font-weight: 700; }
  .ws-print-grid td.ws-key-cell { background: #d6d6d6; outline: 1.5pt solid #000; outline-offset: -2pt; border-radius: 50%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ws-print-bank { columns: 4; column-gap: 16pt; margin: 0 auto; padding: 0; width: 6.4in; list-style: none; font-size: 12pt; font-weight: 700; text-transform: uppercase; }
  .ws-print-bank li { break-inside: avoid; padding: 2pt 0; }
  .ws-print-bank li::before { content: "\2610  "; font-weight: 400; }
  .ws-sheet-foot { margin-top: 10pt; font-size: 9pt; text-align: center; color: #444; }
}
