*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--page-bg);color:var(--page-text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}#app{justify-content:center;align-items:center;min-height:100%;padding:24px;display:flex}.board{--board-size:min(92vw, 78vh, 660px);grid-template-columns:repeat(var(--n), 1fr);grid-template-rows:repeat(var(--n), 1fr);gap:var(--board-grid-width);width:var(--board-size);height:var(--board-size);background:var(--board-grid);border:var(--board-border-width) solid var(--board-border);border-radius:var(--board-radius);-webkit-user-select:none;user-select:none;touch-action:manipulation;display:grid}.cell{background:var(--cell-bg,var(--region-0-fill));color:var(--cell-ink,var(--ink-dark));justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative}.cell__mark{pointer-events:none;justify-content:center;align-items:center;width:64%;height:64%;display:flex}.cell__mark svg{width:100%;height:100%;display:block}.cell[data-mark=auto-x] .cell__mark,.cell[data-mark=manual-x] .cell__mark{opacity:var(--x-opacity)}.cell--region-hover{box-shadow:inset 0 0 0 3px var(--accent);z-index:1}.cell--conflict{box-shadow:inset 0 0 0 3px var(--conflict);z-index:2}.cell--hint{box-shadow:inset 0 0 0 4px var(--accent);z-index:3}.cell:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:4}.shell{flex-direction:column;align-items:center;gap:clamp(16px,3.2vh,34px);width:100%;display:flex}.wordmark{letter-spacing:.22em;text-transform:uppercase;color:var(--page-text);margin:0;font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:800}.stage{justify-content:center;align-items:center;gap:clamp(12px,2.4vw,30px);display:flex}.board-wrap{display:flex;position:relative}.board-wrap:has(.win--show) .board{box-shadow:0 0 0 3px var(--accent), 0 0 24px var(--accent);transition:box-shadow .5s}.controls{gap:var(--control-gap);flex-direction:column;align-items:stretch;display:flex}.ctl{min-width:var(--control-size);border:2px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-bg);color:var(--control-text);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:7px 9px;transition:background .15s,box-shadow .4s,opacity .15s;display:flex}.ctl:hover:not(:disabled){background:var(--control-bg-hover)}.ctl:disabled{opacity:.35;cursor:default}.ctl__icon{place-items:center;width:22px;height:22px;display:grid}.ctl__icon svg{width:100%;height:100%}.ctl__label{letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-size:.6rem;font-weight:700;line-height:1}.ctl--glow{box-shadow:0 0 0 2px var(--accent), 0 0 14px var(--accent)}.ctl--armed{background:var(--control-active-bg);color:var(--control-active-text)}.switch{border:2px solid var(--control-border);border-radius:var(--control-radius);display:inline-flex;overflow:hidden}.switch__opt{min-width:var(--control-size);background:var(--control-bg);color:var(--control-text);cursor:pointer;border:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:7px 9px;transition:background .15s;display:flex}.switch__opt>.ctl__icon{width:22px;height:22px}.switch__opt>.ctl__label{letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-size:.6rem;font-weight:700;line-height:1}.switch__opt+.switch__opt{border-left:2px solid var(--control-border)}.switch__opt--active{background:var(--control-active-bg);color:var(--control-active-text)}.toggle{height:var(--control-size);border:2px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-bg);color:var(--control-text);cursor:pointer;align-items:center;gap:8px;padding:0 12px;display:inline-flex}.toggle__dot{border:2px solid var(--control-border);background:0 0;flex:none;width:14px;height:14px;transition:background .15s}.toggle--on .toggle__dot{background:var(--accent)}.toggle__label{letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-size:.7rem;font-weight:700}.newpuzzle{min-height:var(--control-size);justify-content:center;align-items:center;display:flex}.newpuzzle__btn{border-radius:var(--control-radius);background:var(--page-text);color:var(--page-bg);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:0;align-items:center;gap:12px;padding:14px 30px;font-size:1rem;font-weight:800;transition:background .15s,color .15s;display:inline-flex}.newpuzzle__btn:hover{background:var(--accent);color:var(--page-text)}.newpuzzle__crown{place-items:center;width:22px;height:22px;display:grid}.newpuzzle__confirm{border:2px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-bg);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:8px 12px;display:none}.newpuzzle--confirming .newpuzzle__btn{display:none}.newpuzzle--confirming .newpuzzle__confirm{display:flex}.newpuzzle__q{font-size:.8rem;font-weight:600}.newpuzzle__yes,.newpuzzle__no{border:2px solid var(--control-border);border-radius:var(--control-radius);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;padding:6px 12px;font-size:.72rem;font-weight:700}.newpuzzle__yes{background:var(--page-text);color:var(--page-bg);border-color:var(--page-text)}.newpuzzle__no{background:var(--control-bg);color:var(--control-text)}.win{opacity:0;pointer-events:none;z-index:5;transition:opacity .35s,transform .35s;position:absolute;top:-15px;left:50%;transform:translate(-50%)translateY(6px)}.win--show{opacity:1;transform:translate(-50%)translateY(0)}.win__badge{background:var(--accent);color:var(--page-text);letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;font-size:.8rem;font-weight:800;display:inline-block}.loading{letter-spacing:.04em;color:var(--page-muted);align-items:center;gap:10px;font-size:.8rem;font-weight:600;display:none}.loading--show{display:flex}.loading__dot{background:var(--accent);border-radius:50%;width:10px;height:10px}@media (max-width:960px){.stage{flex-direction:column}.controls{flex-flow:wrap;justify-content:center}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
