:root{--case-a:#d1bf84;--case-b:#566b8b;--edge-a:#746640;--edge-b:#293d5c;--ink:#34432f;--lcd:#9faf80;--accent-a:#8a2b1e;--accent-b:#d7e8f2}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#242424;font-family:Arial,Helvetica,sans-serif}
body{display:grid;place-items:center;height:var(--visible-height,100%);touch-action:manipulation;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
button{font:inherit;cursor:pointer}
.handheld{width:min(94vw,430px);height:min(97vh,790px);height:min(97dvh,790px);min-height:610px;position:relative;padding:18px 18px 12px;border:5px solid var(--edge-a);border-radius:32px;background:linear-gradient(145deg,#eadbaa,var(--case-a) 62%,#a8955d);box-shadow:0 18px 40px #0009,inset 5px 5px 10px #fff5,inset -7px -8px 13px #0003;display:flex;flex-direction:column;transition:background .25s,border-color .25s;transform-origin:center;transform:scale(var(--fit-scale,1))}
.handheld.mode-b{border-color:var(--edge-b);background:linear-gradient(145deg,#8296b3,var(--case-b) 62%,#35465f)}
.device-header{text-align:center;flex:none;position:relative}.sound-toggle{position:absolute;right:0;top:-4px;border:0;background:transparent;color:#665b3b;font:800 7px monospace;letter-spacing:.5px;padding:5px}.sound-toggle.muted{opacity:.55}.mode-b .sound-toggle{color:#25364e}.maker{font-size:11px;letter-spacing:4px;font-weight:800;color:#554827}.mode-b .maker{color:#26364c}h1{font-size:clamp(22px,7vw,28px);line-height:1;margin:7px 0 4px;color:var(--accent-a);letter-spacing:2px;text-shadow:1px 1px #e6b66e}.mode-b h1{color:var(--accent-b);text-shadow:2px 2px #293d5c}.model{font:700 9px monospace;letter-spacing:2px;color:#665b3b;margin-bottom:9px}.mode-b .model{color:#25364e}
.screen-frame{padding:9px;border-radius:18px;background:#615c4a;box-shadow:inset 3px 3px 6px #0009,0 2px 1px #fff6;flex:1;min-height:305px}.screen{height:100%;min-height:285px;position:relative;overflow:hidden;border:2px solid #48513c;border-radius:10px;background:repeating-linear-gradient(0deg,#37402f08 0 1px,transparent 1px 4px),linear-gradient(#aab88c,#96a675);box-shadow:inset 0 0 22px #27322166}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#fff2,transparent 35% 70%,#fff1);z-index:20}
.hud{height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 12px;border-bottom:2px solid #2e3b2759;color:var(--ink);font-family:monospace;font-weight:bold;position:relative;z-index:3}.hud small{display:block;font-size:9px}.hud strong{display:block;font-size:clamp(19px,6vw,26px);letter-spacing:2px}.hud-center{text-align:center}.hud-center strong{font-size:21px}.misses{text-align:right}.misses strong{font-size:15px;letter-spacing:1px;white-space:nowrap}
.playfield{position:absolute;inset:54px 0 0}.scene{position:absolute;inset:0}.scene-space{display:none}.mode-b .scene-pipe{display:none}.mode-b .scene-space{display:block}.pipe{position:absolute;top:2px;width:16%;height:34px;left:calc(16.66% - 8%);background:var(--ink);opacity:.92;border-radius:4px}.pipe:after{content:"";position:absolute;left:50%;bottom:-9px;width:130%;height:10px;transform:translateX(-50%);background:var(--ink);border-radius:2px}.pipe-1{left:42%}.pipe-2{left:75.66%}.factory-line{position:absolute;left:7%;right:7%;top:48px;border-top:3px dotted #34432f66}.planet{position:absolute;width:54px;height:54px;border-radius:50%;right:6%;top:8px;background:var(--ink);opacity:.16;box-shadow:-10px 8px 0 -4px #9faf80}.star{position:absolute;color:var(--ink);opacity:.24}.s1{left:10%;top:24px}.s2{left:47%;top:8px;font-size:28px}.s3{left:68%;top:59px;font-size:11px}
.segment{opacity:.065;transition:none}.segment.active{opacity:.96}.falling{position:absolute;left:calc((var(--col) + .5) * 33.333%);top:calc(55px + var(--row) * ((100% - 130px) / 3));transform:translateX(-50%)}.drop{width:20px;height:27px;background:var(--ink);border-radius:48% 48% 52% 52%/38% 38% 64% 64%;clip-path:polygon(50% 0,68% 26%,88% 52%,100% 72%,94% 88%,76% 100%,24% 100%,6% 88%,0 72%,12% 52%,32% 26%);transform:translateX(-50%)}.asteroid{width:30px;height:27px;background:var(--ink);clip-path:polygon(18% 0,73% 5%,100% 35%,83% 87%,38% 100%,0 68%,5% 23%)}.asteroid:after{content:"";position:absolute;width:6px;height:5px;border-radius:50%;left:7px;top:8px;background:var(--lcd);opacity:.7}
.player{position:absolute;left:calc((var(--col) + .5) * 33.333%);bottom:17px;transform:translateX(-50%)}.bucket{width:55px;height:30px;border:7px solid var(--ink);border-top-width:4px;border-radius:3px 3px 13px 13px}.bucket:before{content:"";position:absolute;width:38px;height:24px;left:50%;top:-19px;transform:translateX(-50%);border:4px solid var(--ink);border-bottom:0;border-radius:20px 20px 0 0}.ship{width:54px;height:33px;background:var(--ink);clip-path:polygon(50% 0,65% 35%,100% 72%,68% 68%,58% 100%,42% 100%,32% 68%,0 72%,35% 35%)}
.effect{position:absolute;width:50px;height:32px;bottom:16px;left:calc((var(--col) + .5) * 33.333%);transform:translateX(-50%);background:var(--ink);clip-path:polygon(50% 0,61% 27%,85% 7%,78% 36%,100% 48%,72% 58%,88% 91%,59% 70%,50% 100%,41% 70%,12% 91%,28% 58%,0 48%,22% 36%,15% 7%,39% 27%)}
.message{display:none;position:absolute;inset:36% 5% auto;text-align:center;color:var(--ink);font:700 clamp(16px,5.5vw,24px) monospace;letter-spacing:2px;z-index:10}.message.show{display:block}.message span{display:block;font-size:10px;letter-spacing:1px;margin-top:9px}.speed{position:absolute;left:8px;bottom:4px;color:var(--ink);font:700 9px monospace}
.mode-controls{height:48px;display:flex;align-items:center;justify-content:center;gap:16px;flex:none}.mode-btn,.start-btn{border:2px solid #5d5030;background:#7e6b45;color:#f1e4b9;box-shadow:0 3px 0 #4b4028;border-radius:12px;font-size:9px;font-weight:900;padding:5px 12px}.mode-btn small{display:block;font-size:7px;margin-top:1px}.mode-btn.selected{background:#9a3325;border-color:#61251c}.mode-btn.locked,.start-btn.locked{cursor:default;filter:saturate(.45);opacity:.62}.start-btn{padding:8px 15px}.mode-b .mode-btn,.mode-b .start-btn{border-color:#26384f;background:#405777;box-shadow:0 3px 0 #233248}.mode-b .mode-btn.selected{background:#b34b3d;border-color:#673028}
.controls{height:126px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:8px;flex:none}.controls>div{text-align:center;color:#554827;font-size:9px;font-weight:900;letter-spacing:1px}.mode-b .controls>div{color:#24334a}.controls span{display:block;margin-top:9px}.round-btn{display:grid;place-items:center;margin:auto;width:68px;height:68px;border-radius:50%;border:5px solid #5c261c;color:#f4dfb5;font-size:24px;background:radial-gradient(circle at 35% 30%,#cf5a48,#953326 58%,#5f2119);box-shadow:0 7px 0 #491813,0 10px 13px #0005,inset 4px 4px 7px #fff3}.round-btn.action{width:73px;height:73px;background:radial-gradient(circle at 35% 30%,#746349,#4f432e 60%,#302819);border-color:#3e3424;font-size:19px}.round-btn.pressed,.round-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #491813,0 4px 6px #0005}footer{text-align:center;font-size:8px;letter-spacing:4px;color:#554827;flex:none}.mode-b footer{color:#24334a}
.rotate-hint{display:none;color:#a9b78b;font:800 26px monospace;text-align:center}.rotate-hint span{display:block;font-size:12px;letter-spacing:3px;margin-top:8px}
@media(max-width:340px){.handheld{width:98vw;padding-left:10px;padding-right:10px}.round-btn{width:62px;height:62px}}
@media(orientation:landscape) and (max-height:500px){.handheld{display:none}.rotate-hint{display:block}}