:root{--paper:#f5f6f2;--ink:#233e44;--muted:#647674;--accent:#315d64;--line:#cbd6d2;--gold:#b37520;--floor:#edf2ed;--wall:#c2d1ce}
header{max-width:620px;padding:22px 24px 12px}h1{font-weight:650;letter-spacing:-.8px}main{max-width:560px;margin:auto;padding:0 24px 28px}.guidance{font-size:14px;line-height:1.6;color:var(--muted);margin:6px 0 30px;text-align:center}.play{max-width:440px;margin:auto}.level-heading{display:flex;align-items:baseline;gap:12px;margin:0 1px 14px;min-height:22px;font-size:12px}.level-heading h2{font-size:14px;font-weight:550;margin:0;flex:1}.level-heading>span{font-size:11px;letter-spacing:.03em;color:var(--muted);white-space:nowrap}.board{--size:6;position:relative;width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);overflow:hidden;background:var(--floor);border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 1px #b6c8c340}.cell{display:grid;place-items:center;position:relative;min-width:0}.wall{background:var(--wall);box-shadow:inset 0 0 0 1px #b5c7c420}.wall::after{content:"";height:4px;width:4px;border-radius:50%;background:#819c932b}.star{width:26%;height:26%;display:block;background:var(--gold);clip-path:polygon(50% 0,63% 35%,100% 50%,63% 65%,50% 100%,37% 65%,0 50%,37% 35%);transition:opacity .16s,transform .16s}.star.collected{opacity:.18;transform:scale(.5)}.goal{width:60%;height:60%;border:2px dashed #8b9c91;border-radius:50%;transition:border-color .2s,background .2s}.goal.open{border-style:solid;border-color:var(--gold);background:#e9dcb92e}.puck{position:absolute;width:calc(100% / var(--size));height:calc(100% / var(--size));left:0;top:0;display:grid;place-items:center;transform:translate(calc(var(--x) * 100%),calc(var(--y) * 100%));pointer-events:none;transition:transform .18s cubic-bezier(.21,.66,.28,1);z-index:2}.puck::before{content:"";width:55%;height:55%;border-radius:50%;background:var(--ink);box-shadow:0 2px 2px #25404720,inset 0 1px 1px #ffffff30}.puck.solved::before{background:var(--gold)}.puck.no-motion{transition:none}.readout{display:flex;justify-content:space-between;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);margin:14px 2px 0}.stars-readout{display:flex;gap:8px;align-items:center}.star.tiny{height:13px;width:13px}.status{min-height:23px;margin:16px 0 14px;text-align:center;font-size:14px;color:var(--ink);line-height:1.6}.status.success{color:#7c5318;font-weight:550}.lower-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:94px}.tools{display:flex;gap:5px;flex-wrap:wrap;max-width:235px}.tools button{font-size:12px;padding:8px 12px;min-width:50px}.dpad{display:grid;grid-template:repeat(2,44px)/repeat(3,44px);gap:4px}.dpad button{padding:0;min-width:44px;font-size:20px;line-height:1;background:#e8eeea;border-color:transparent}.dpad button:hover:not(:disabled){background:#d9e4dd}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .down{grid-area:2/2}.dpad .right{grid-area:2/3}.dpad .suggested{outline:2px solid var(--gold);outline-offset:1px;color:#8a5610}#next{font-size:13px;min-height:46px;white-space:nowrap;padding:10px 16px}#next span{padding-left:7px}.input-caption{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.02em;margin:15px 0 0}[hidden]{display:none!important}
@media(max-width:390px){header{padding:16px 18px 8px}main{padding:0 18px 20px}.guidance{margin:8px 0 22px;font-size:13px}.level-heading{gap:9px}.tools{gap:4px;max-width:150px}.tools button{padding:8px 9px;min-width:45px}.lower-controls{gap:8px}.input-caption{margin-top:12px}}
@media(min-width:700px) and (min-height:800px){header{padding-top:36px}.guidance{margin-top:16px;margin-bottom:40px}}
/* Keep the complete play surface within ordinary laptop-height viewports.
   The 355px reserve covers the heading, status and full-size recovery/D-pad controls.
   Narrow portrait and the existing short-landscape composition stay independent. */
@media(min-width:650px) and (min-height:641px) and (max-height:900px){header{padding-top:12px;padding-bottom:8px}main{padding-bottom:16px}.guidance{margin-top:0;margin-bottom:18px}.play{width:min(440px,calc(100dvh - 355px))}.level-heading{margin-bottom:10px}.readout{margin-top:10px}.status{margin-top:10px;margin-bottom:10px}.input-caption{margin-top:10px}}
@media(max-height:640px) and (min-width:650px){header{max-width:760px;padding:8px 24px}main{max-width:760px;padding-bottom:12px}.guidance{margin:0 0 10px}.play{max-width:700px;display:grid;grid-template-columns:minmax(200px,calc(100dvh - 155px)) 1fr;column-gap:32px;align-items:center}.level-heading{grid-area:1/1}.board{grid-area:2/1/7/2}.readout{grid-area:2/2;margin-top:0}.status{grid-area:3/2;margin:12px 0}.lower-controls{grid-area:4/2;flex-direction:column;gap:14px}.input-caption{grid-area:5/2;font-size:10px}.tools{max-width:none}.level-heading{margin-bottom:10px}}
@media(forced-colors:active){.wall{background:GrayText}.wall::after{display:none}.puck::before{background:CanvasText}.star{background:LinkText}.goal{border-color:LinkText}.dpad button{border:1px solid ButtonText}}

@media(max-height:640px) and (min-width:650px){.game-help{grid-column:2;grid-row:5;margin-top:0}}