@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Mono:wght@400;700&display=swap');
:root{--wood:#b88646;--wood-light:#e1bb70;--case:#34302a;--case-light:#4c453c;--lcd:#c6d59d;--ink:#28351f;--mid:#718357;--grid:#a9bd83;--accent:#e77961}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#dce7ed;color:var(--ink);font-family:'Space Mono',monospace;display:grid;place-items:center;padding:1rem}.cabinet{width:min(100%,680px);background:linear-gradient(135deg,var(--wood-light),var(--wood) 45%,#8e602e);border:8px solid #594428;border-radius:28px;box-shadow:0 20px 50px #14253655,inset 0 0 0 2px #f1d28e;padding:1rem}.cabinet-header,.cabinet-footer{display:flex;justify-content:space-between;gap:1rem;color:#f5d993;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}.cabinet-header a{color:#fff1c4;text-decoration:none}.screen{background:var(--lcd);border:7px solid var(--case);border-radius:8px;box-shadow:inset 0 0 25px #33441e44;margin:1rem 0;padding:clamp(.8rem,3vw,1.4rem)}.screen-top{align-items:end;border-bottom:2px solid var(--mid);display:flex;justify-content:space-between;padding-bottom:.7rem}.screen-top p{color:var(--mid);font-size:.5rem;font-weight:700;letter-spacing:.1em;margin:0 0 .25rem}h1{font-size:clamp(2.2rem,7vw,3.7rem);letter-spacing:-.08em;line-height:.85;margin:0}.score{display:grid;font-size:.52rem;gap:.2rem;text-align:right}.score span,.side-panel span{color:var(--mid)}.score b{font-size:.9rem;margin-left:.35rem}.play-area{display:flex;gap:clamp(1rem,4vw,2rem);justify-content:center;margin:1.2rem auto}.board-wrap{background:#afc487;border:3px solid var(--mid);max-width:min(62vw,240px);position:relative;touch-action:none}.board-wrap canvas{display:block;height:auto;image-rendering:pixelated;width:100%}.message{background:#c6d59de6;inset:0;display:grid;font-size:.65rem;font-weight:700;letter-spacing:.08em;place-items:center;position:absolute;text-align:center}.message.hidden{display:none}.side-panel{display:flex;flex-direction:column;font-size:.58rem;gap:1.2rem;padding-top:.2rem}.side-panel strong{display:block;font-size:1.7rem;line-height:1.1;margin-top:.25rem}.side-panel canvas{background:#b3c68a;border:2px solid var(--mid);display:block;margin-top:.4rem;image-rendering:pixelated;width:72px}.actions{display:flex;gap:.6rem;justify-content:center}.actions button,.touch-controls button{background:var(--ink);border:0;border-bottom:3px solid #182519;color:var(--lcd);cursor:pointer;font:700 .62rem 'Space Mono',monospace;min-height:44px;padding:.7rem 1rem;text-transform:uppercase}.actions button:hover,.actions button:focus,.touch-controls button:focus{background:var(--mid);outline:2px solid var(--ink);outline-offset:2px}.touch-controls{display:grid;gap:.45rem;grid-template-columns:repeat(3,3rem);grid-template-rows:repeat(2,3rem);justify-content:center;margin:1rem auto .5rem}.touch-controls button{font-size:1.05rem;min-height:48px;min-width:48px;padding:0}.touch-controls button:first-child{grid-column:1;grid-row:1}.touch-controls button:nth-child(2){grid-column:2;grid-row:1}.touch-controls button:nth-child(3){grid-column:3;grid-row:1}.touch-controls button:nth-child(4){grid-column:2;grid-row:2}.touch-controls button:active{background:var(--accent)}.hint{color:var(--mid);font-size:.56rem;line-height:1.5;margin:.7rem auto 0;max-width:28rem;text-align:center}.cabinet-footer{padding:.2rem .2rem 0}@media(max-width:480px){body{padding:.35rem;place-items:start center}.cabinet{border-width:5px;border-radius:18px;padding:.65rem;width:100%}.cabinet-header,.cabinet-footer{font-size:.5rem}.screen{border-width:4px;margin:.7rem 0;padding:.65rem}.screen-top{align-items:center}.screen-top p{font-size:.43rem}.score{font-size:.45rem}.score b{font-size:.75rem}.play-area{gap:.7rem;margin:.9rem auto}.side-panel{gap:.9rem;font-size:.48rem}.side-panel canvas{width:62px}.actions button{min-height:48px;min-width:108px}.hint{font-size:.5rem}.screen{touch-action:manipulation}}