:root{color-scheme:light;--paper:#faf8ef;--ink:#3e3934;--muted:#8b8177;--line:#d8d0c5;--panel:#f1eee7;--accent:#e07a5f;--shadow:#d9d1c5}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}body{display:flex;justify-content:center}.page{width:min(700px,100%);padding:22px 18px 18px}.topbar{height:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);margin-bottom:22px}.topbar h1{font-size:25px;letter-spacing:.18em;margin:0;font-weight:700}.back,.quiet{color:var(--muted);text-decoration:none;background:none;border:0;padding:7px 0;font:inherit;font-size:10px;letter-spacing:.1em;cursor:pointer}.quiet{text-align:right}.game-layout{display:flex;justify-content:center;gap:22px;align-items:flex-start}.board-wrap{position:relative;flex:0 0 300px;background:#bbb3a6;padding:5px;box-shadow:5px 5px 0 var(--shadow)}#board{display:block;width:300px;height:600px;background:#d8d1c5;image-rendering:pixelated}.message{position:absolute;inset:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(250,248,239,.9);gap:12px}.message.hidden{display:none}.message strong{font-size:30px;letter-spacing:.12em}.message span{font-size:10px;color:var(--muted);letter-spacing:.08em}.message button,.secondary{font:700 11px inherit;letter-spacing:.1em;border:0;background:var(--accent);color:#fff;padding:12px 18px;cursor:pointer;box-shadow:3px 3px 0 #b85f49}.message button:hover,.secondary:hover{background:#d66d53}.sidebar{width:150px;display:flex;flex-direction:column;gap:10px}.stat,.next-box{background:var(--panel);border:1px solid var(--line);padding:9px 10px}.stat{display:flex;flex-direction:column;gap:5px}.stat span,.next-box>span{color:var(--muted);font-size:9px;letter-spacing:.08em}.stat strong{font-size:15px;letter-spacing:.08em}.next-box{padding-bottom:6px}.next-box canvas{display:block;margin:7px auto 0;width:120px;height:90px}.secondary{width:100%;background:#71685f;box-shadow:3px 3px 0 #514b45}.keys{font-size:9px;line-height:1.9;color:var(--muted);margin:4px 0 0}.keys b{color:var(--ink);font-weight:700}.touch-controls{display:none}.touch-controls button{height:48px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:700 20px inherit;touch-action:none}.touch-controls button:active{background:#e5ded4;border-color:var(--accent)}.touch-controls button:nth-child(2){color:var(--accent)}.touch-controls button:last-child{color:var(--accent)}footer{border-top:1px solid var(--line);margin-top:30px;padding-top:14px;color:var(--muted);font-size:9px;letter-spacing:.06em;text-align:center}@media(max-width:560px){.page{padding:12px 12px 16px}.topbar{margin-bottom:16px}.topbar h1{font-size:20px}.game-layout{gap:14px}.board-wrap{flex-basis:min(62vw,300px);padding:4px;box-shadow:4px 4px 0 var(--shadow)}#board{width:min(62vw,300px);height:auto;aspect-ratio:1/2}.message{inset:4px}.message strong{font-size:clamp(20px,7vw,30px)}.message span{font-size:8px}.sidebar{width:calc(38vw - 26px);min-width:112px;gap:7px}.stat{padding:7px}.stat span,.next-box>span{font-size:8px}.stat strong{font-size:11px}.next-box{padding:7px 4px}.next-box canvas{width:100%;height:auto}.keys{font-size:7px;line-height:1.65}.touch-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:18px auto 0;max-width:460px}footer{font-size:8px;margin-top:18px}}@media(max-width:360px){.sidebar{min-width:100px}.keys{display:none}.topbar h1{font-size:17px}.back,.quiet{font-size:9px}}