:root { color-scheme: dark; --bg: oklch(.31 .009 270); --panel: oklch(.28 .009 270); --field: oklch(.23 .007 270); --border: oklch(.40 .012 270); --text: oklch(.93 .006 270); --muted: oklch(.76 .012 270); --primary: oklch(.55 .21 276); --focus: oklch(.8 .12 276); --paper: oklch(.985 .006 85); --ink: oklch(.25 .012 70); --grid-line: oklch(.77 .009 270); --trail: oklch(.88 .06 155); --current: oklch(.42 .10 155); --hint: oklch(.9 .09 85); --error: oklch(.84 .12 25); }
* { box-sizing: border-box; }
body { margin: 0; padding: 0 24px 48px; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, sans-serif; }
body > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
button, input, select { font: inherit; }
button, a, select, summary { touch-action: manipulation; }
button { min-height: 44px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); background: var(--field); cursor: pointer; font-weight: 600; }
button:hover:not(:disabled) { background: var(--border); }
button:disabled { opacity: .45; cursor: default; }
.primary { background: var(--primary); border-color: var(--primary); }.primary:hover:not(:disabled) { background: var(--primary); filter: brightness(1.1); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } a:hover { text-decoration: underline; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.topbar span { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
header { padding: 28px 0 16px; }h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 12px; }header p { color: var(--muted); margin: 0; }
h2 { margin: 0; font-size: 20px; }.muted { color: var(--muted); font-size: 13px; }
.settings { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }.field label { font-size: 13px; font-weight: 600; }.seed-field { flex: 1 1 180px; }
.field input, .field select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); background: var(--field); }
#settings-note { width: 100%; margin: 0; }
details { border-bottom: 1px solid var(--border); }summary { padding: 14px 0; min-height: 48px; font-weight: 600; cursor: pointer; }details p { max-width: 75ch; color: var(--muted); }
.board-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 24px 0 12px; }#board-meta { margin: 4px 0 0; overflow-wrap: anywhere; }
.play-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }.board-column { min-width: 0; }
#board-scroll { overflow: auto; padding: 4px; border-radius: 10px; background: var(--paper); max-height: 75vh; }
#grid-container { --cell: min(48px, calc((100vw - 64px) / var(--size))); display: grid; grid-template-columns: repeat(var(--size), var(--cell)); width: max-content; margin: 0 auto; gap: 1px; padding: 1px; background: var(--grid-line); color-scheme: light; }
#grid-container.zoomed { --cell: 48px; }
.cell { position: relative; display: flex; align-items: center; justify-content: center; width: var(--cell); height: var(--cell); min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: var(--paper); font-size: clamp(13px, calc(var(--cell) * .45), 22px); font-weight: 650; }
.cell:hover:not(:disabled) { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }.cell:focus-visible { outline-offset: -3px; z-index: 1; }
.cell.even { color: oklch(.51 .01 70); }.cell.trail { background: var(--trail); }.cell.solution { background: var(--hint); }.cell.hint { box-shadow: inset 0 0 0 3px var(--current); }.cell.current, .cell.current:hover:not(:disabled) { background: var(--current); color: var(--paper); }.cell.current::after { content: '●'; position: absolute; bottom: 0; right: 2px; font-size: 7px; }
.cell small { position: absolute; top: 0; left: 2px; font-size: clamp(7px, calc(var(--cell) * .22), 10px); font-weight: 800; }
.cell.start, .cell.end { box-shadow: inset 0 0 0 2px var(--ink); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; color: var(--muted); font-size: 12px; margin: 12px 0; }.legend b { color: var(--text); }
.stats { display: flex; gap: 20px; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 0 0 12px; border-bottom: 1px solid var(--border); }.stats strong { display: block; color: var(--text); font-size: 24px; font-variant-numeric: tabular-nums; }
#message { min-height: 66px; margin: 14px 0; font-size: 14px; }#message[data-kind=error] { color: var(--error); }#message[data-kind=won] { color: var(--trail); font-weight: 650; }
.dpad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 6px; justify-content: center; margin: 16px 0; }.dpad button { padding: 0; font-size: 22px; }.dpad span { display: grid; place-items: center; color: var(--muted); }.dpad [data-dir=up] { grid-column: 2; }.dpad [data-dir=left] { grid-column: 1; grid-row: 2; }.dpad span { grid-column: 2; grid-row: 2; }.dpad [data-dir=right] { grid-column: 3; grid-row: 2; }.dpad [data-dir=down] { grid-column: 2; grid-row: 3; }
.play-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.play-actions button { font-size: 13px; padding: 8px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; cursor: pointer; }.check input { width: 20px; height: 20px; accent-color: var(--primary); }#assistance { margin: 0; }
.print-settings { margin-top: 24px; }.print-options { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; padding-bottom: 20px; }.print-options p { width: 100%; margin: 0; }.print-options .field:first-of-type { flex: 1 1 250px; }
#print-root { display: none; }
@media (max-width: 800px) { .play-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }.play-tools { display: grid; grid-template-columns: minmax(0,1fr) 160px; gap: 8px 16px; }.stats, #message { grid-column: 1; }.dpad { grid-column: 2; grid-row: 1 / span 3; margin: 0; }.play-actions { grid-column: 1 / -1; grid-template-columns: repeat(4,1fr); }.check, #assistance { grid-column: 1 / -1; }#message { min-height: 44px; margin: 0; } }
@media (max-width: 500px) { body { padding: 0 12px 32px; }.topbar span { display: none; }h1 { font-size: 28px; }.settings { padding: 12px; }.settings > .field { flex: 1 1 100%; }.settings button { flex: 1; }.board-heading { align-items: flex-start; }#zoomBtn { max-width: 130px; font-size: 12px; padding: 8px; }.play-tools { column-gap: 8px; }.play-actions { grid-template-columns: 1fr 1fr; }.stats { gap: 8px; }.stats strong { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    :root { color-scheme: light; background: var(--paper); }body { padding: 0; background: var(--paper); }
    body > :not(#print-root) { display: none !important; }
    #print-root { display: block; color: var(--ink); font: 11pt/1.4 system-ui, sans-serif; }
    .worksheet-header { break-after: avoid; border-bottom: 1px solid var(--grid-line); padding-bottom: 3mm; }.worksheet-header h1 { font-size: 18pt; }.worksheet-header p { margin: 2mm 0; }
    .worksheet { break-inside: avoid; margin: 6mm 0 8mm; }.worksheet h2 { font-size: 12pt; margin: 0 0 2mm; }.worksheet p { font-size: 9pt; margin: 2mm 0; overflow-wrap: anywhere; }
    .paper-grid { display: grid; grid-template-columns: repeat(var(--size), var(--print-cell)); gap: 0; width: max-content; border: .3mm solid var(--ink); margin: 3mm auto; }
    .paper-cell { width: var(--print-cell); height: var(--print-cell); display: grid; place-items: center; border: .15mm solid var(--grid-line); font-size: 12pt; position: relative; }
    .paper-cell small { position: absolute; top: 0; left: 1px; font: 6pt system-ui; }
    .paper-cell.on-route { background: var(--trail); box-shadow: inset 0 0 0 .5mm var(--ink); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .answer-key { break-before: page; }.answer-key > h2 { break-after: avoid; }
}