/* Felt tabletop: compact chrome, a height-aware lamp tray, and secondary tools.
   240px board floor preserves touch targets; short screens scroll, never clip. */
.lo-shell{--lo-paper:#fff6df;--lo-ink:#163f34;--lo-gold:#ffda87;--lo-tray:#0b2e24;--lo-board-max:440px;max-width:520px;margin:auto;padding:12px max(12px,env(safe-area-inset-right)) 24px max(12px,env(safe-area-inset-left));color:var(--lo-paper);text-align:center}
.lo-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 10px;max-width:var(--lo-board-max)}
.lo-shell a{color:var(--lo-paper);text-underline-offset:4px}
.lo-header a{display:inline-flex;align-items:center;min-height:44px;font-size:.85rem}
.lo-shell h1{font:700 1.65rem/1.15 Georgia,serif;letter-spacing:-.5px;margin:0}
.lo-shell h2{font:700 1.15rem/1.3 Georgia,serif;letter-spacing:0;margin:0}
.lo-shell p{line-height:1.5}
.lo-shell button,.lo-shell select{font:inherit;touch-action:manipulation}
.lo-shell button:not(.lo-cell){min-height:44px;border:2px solid #ead5a8;border-radius:9px;background:var(--lo-paper);color:var(--lo-ink);padding:8px 16px;cursor:pointer;font-weight:700}
.lo-shell button:disabled{cursor:default;opacity:.55}
.lo-shell button:focus-visible,.lo-shell select:focus-visible,.lo-shell a:focus-visible,.lo-shell summary:focus-visible,.lo-shell [tabindex="-1"]:focus-visible{outline:3px solid var(--lo-gold);outline-offset:3px}
.lo-stage{scroll-margin-top:12px}
.lo-hud{display:flex;align-items:baseline;justify-content:space-between;gap:12px;max-width:var(--lo-board-max);margin:auto;text-align:left}
.lo-moves{flex-shrink:0;font-size:.85rem;font-variant-numeric:tabular-nums}
.lo-objective{font-size:.8rem;margin:5px auto 10px;text-align:left;max-width:var(--lo-board-max);color:#ede2c7}
.lo-objective span{padding:0 5px}
.lo-board{display:grid;grid-template-columns:repeat(var(--lo-size),minmax(0,1fr));gap:10px;width:min(100%,var(--lo-board-max),max(240px,calc(100svh - 270px)));margin:0 auto;padding:12px;border:1px solid #d7c79d75;border-radius:15px;background:var(--lo-tray);box-shadow:0 5px 0 #09291e66}
.lo-shell .lo-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;min-width:44px;min-height:44px;border:2px solid #b8c8b9;border-radius:10px;padding:5px;cursor:pointer;color:var(--lo-paper);background:var(--lo-ink);box-shadow:inset 0 0 0 3px var(--lo-tray)}
.lo-shell .lo-cell.is-on{color:var(--lo-ink);background:var(--lo-gold);border-color:var(--lo-paper);box-shadow:inset 0 0 0 3px #e0b85e}
.lo-symbol{font:700 clamp(1.5rem,8vw,2.25rem)/1 Georgia,serif}
.lo-label{font:700 .65rem/1.3 system-ui,sans-serif;letter-spacing:.08em}
.lo-shell .lo-cell:disabled{opacity:1;cursor:default}
.lo-shell .lo-cell:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:inset 0 0 0 4px var(--lo-ink)}
.lo-shell .lo-cell:active:not(:disabled){transform:scale(.96)}
.lo-cell.is-flipped .lo-symbol{animation:lo-flip .16s ease-out}
@keyframes lo-flip{from{transform:scale(.82)}to{transform:scale(1)}}
.lo-stage.is-complete .lo-board{border-color:var(--lo-gold);box-shadow:0 0 0 2px #ffda8733,0 5px 0 #09291e66}
.lo-success{max-width:var(--lo-board-max);margin:12px auto 0;border-inline-start:3px solid var(--lo-gold);padding:4px 12px;text-align:left}
.lo-success h2{color:var(--lo-gold)}
.lo-success p{font-size:.85rem;margin:5px 0 8px}
.lo-confirm{background:var(--lo-tray);border:1px solid #d7c79d75;padding:12px;border-radius:10px;max-width:var(--lo-board-max);margin:12px auto;font-size:.9rem}
.lo-confirm p{margin:0 0 8px}.lo-confirm button{margin:4px}
.lo-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px 0}
.lo-actions button{min-width:92px}
.lo-tools{max-width:var(--lo-board-max);margin:0 auto;text-align:left;font-size:.85rem}
.lo-tools details{border-top:1px solid #ffffff30}
.lo-tools summary{min-height:44px;align-content:center;padding:11px 0;cursor:pointer;font-weight:700}
.lo-tools summary span{font-size:.75rem;font-weight:400;float:right;margin:2px 0 0 8px}
.lo-tools details[open]{padding-bottom:12px}
.lo-select label{display:block;margin:4px 0 7px}
.lo-select select{display:block;width:100%;min-height:44px;border:1px solid #c5b997;border-radius:8px;background:var(--lo-paper);color:var(--lo-ink);padding:10px 8px}
.lo-tip,.lo-help,.lo-history{font-size:.85rem;margin:0 0 10px}
.lo-message,.lo-notice{font-size:.85rem;max-width:var(--lo-board-max);margin:12px auto 0}
.lo-message:empty{display:none}
.lo-notice{background:var(--lo-tray);padding:12px;border:1px solid #e3c99380;border-radius:10px}
body[data-page-game=lights-out] #app{background:radial-gradient(ellipse at top,#245443,#143c30);color:#fff5dc}
@media(max-width:400px){.lo-board{gap:8px;padding:10px}.lo-shell button:not(.lo-cell){padding:8px 12px}.lo-shell h1{font-size:1.5rem}}
@media(max-height:620px){.lo-shell .lo-cell{gap:1px;padding:2px}.lo-symbol{font-size:1.25rem}.lo-label{font-size:.6rem;line-height:1.2}}
@media(prefers-reduced-motion:reduce){.lo-cell.is-flipped .lo-symbol{animation:none}.lo-shell .lo-cell:active:not(:disabled){transform:none}}
@media(forced-colors:active){.lo-shell .lo-cell{border:2px solid ButtonText}.lo-shell .lo-cell.is-on{border:4px double ButtonText}.lo-shell .lo-cell:focus-visible{outline:3px solid Highlight}.lo-stage.is-complete .lo-board{border-color:Highlight}}

/* A dashed inset shows exactly which lights the pending press would flip. */
.lo-rule{max-width:var(--lo-board-max);margin:0 auto 8px;font-size:.8rem;text-align:left;color:var(--lo-paper)}
.lo-shell .lo-cell{position:relative}
.lo-shell .lo-cell[data-preview="true"]::after{content:"";position:absolute;inset:5px;border:2px dashed currentColor;border-radius:5px;pointer-events:none}
@media(forced-colors:active){.lo-shell .lo-cell[data-preview="true"]::after{border-color:ButtonText}}