:root{--ink: #1c1a17;--paper: #f4f1ea;--muted: #6f675c;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--paper);color:var(--ink);font:16px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}#app{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.75rem,2vh,1.5rem);padding:clamp(.75rem,2vw,1.5rem);padding-bottom:max(clamp(.75rem,2vw,1.5rem),env(safe-area-inset-bottom))}.hud{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;max-width:min(70vh,100%)}.hud h1{margin:0;font-size:clamp(1.5rem,4vmin,2.2rem);font-weight:600;letter-spacing:.01em;line-height:1.1}.moves{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}.moves strong{color:var(--ink)}.board-wrap{position:relative;width:min(70vh,100%);aspect-ratio:1}canvas{display:block;width:100%;height:100%;border-radius:4px;touch-action:none}.colors{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.4rem,1.5vw,.75rem);width:min(70vh,100%)}.color{aspect-ratio:1;border:2px solid transparent;border-radius:8px;cursor:pointer;min-height:44px;display:grid;place-items:center;font:inherit;font-size:clamp(.95rem,4vmin,1.6rem);font-weight:700;line-height:1;transition:transform .08s ease}.color:hover:not(:disabled){transform:translateY(-2px)}.color:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.color:disabled{cursor:default;opacity:.35}.overlay{position:absolute;inset:0;display:grid;place-content:center;padding:1rem;border-radius:4px;background:#1c1a1759}.overlay[hidden]{display:none}.overlay-card{display:grid;gap:.75rem;padding:1.5rem 2rem;border-radius:10px;text-align:center;background:var(--paper);box-shadow:0 10px 34px #0003}.overlay h2{margin:0;font-size:1.5rem}.overlay p{margin:0;color:var(--muted)}#again{justify-self:center;padding:.6rem 1.4rem;min-height:44px;border:2px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--paper);font:inherit;font-weight:600;cursor:pointer}#again:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.more,.signature a{color:var(--muted);font-size:.8rem;text-decoration-color:#6f675c66;text-underline-offset:3px}.more:hover,.signature a:hover{color:var(--ink);text-decoration-color:currentColor}.signature{width:min(70vh,100%);text-align:center;color:var(--muted);font-size:.8rem}@media(orientation:landscape)and (max-height:34rem){#app{display:grid;grid-template-columns:auto auto;grid-template-areas:"hud    hud" "board  colors" "sig    sig";justify-content:center;align-content:center;column-gap:clamp(.75rem,2vw,1.5rem)}.hud{grid-area:hud;width:auto;max-width:none}.board-wrap{grid-area:board;width:min(70vh,55vw)}.colors{grid-area:colors;grid-template-columns:repeat(2,1fr);align-content:center;width:auto}.color{width:clamp(44px,8vh,64px)}.signature{grid-area:sig}}@media(prefers-reduced-motion:reduce){.color{transition:none}}