:root{--ink:#e9eadf;--muted:#85897f;--paper:#121311;--panel:#1a1c19;--line:#373a34;--accent:#e34f32;--yellow:#dfc456;--canvas:#191b18}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:"Barlow Condensed",sans-serif;letter-spacing:0}
body{background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:28px 28px;overflow-x:hidden}
button{font:inherit;color:inherit}
.arcade-shell{width:min(1440px,100%);min-height:100dvh;margin:auto;padding:14px 24px 12px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}
.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
.brand-lockup{display:flex;align-items:center;gap:12px}.brand-mark{width:12px;height:36px;background:var(--accent);transform:skew(-12deg);box-shadow:8px 0 0 #782c21}.kicker,.panel-label{margin:0;color:var(--muted);font:600 10px "IBM Plex Mono",monospace}.brand-lockup h1{margin:0;font-size:31px;line-height:.86;font-weight:900}
.top-actions{display:flex;gap:7px}.icon-button{width:38px;height:38px;display:grid;place-items:center;background:#1b1d1a;border:1px solid var(--line);border-radius:4px;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}.icon-button:hover{background:#272a25}.icon-button:active{transform:translateY(1px)}.icon-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button svg path:first-child{fill:none}.icon-button.muted .sound-wave{display:none}.icon-button.muted svg:after{content:""}.debug-button.active{color:var(--yellow);background:#2b291d;border-color:#776b34;box-shadow:inset 0 0 0 1px rgba(223,196,86,.16)}
.rescue-button{display:none;color:var(--yellow);border-color:#756a39}.rescue-button.visible{display:grid;animation:rescue-in .28s cubic-bezier(.16,1,.3,1)}
.game-layout{min-height:0;display:grid;grid-template-columns:minmax(135px,170px) minmax(480px,680px) minmax(135px,170px);gap:clamp(16px,2.4vw,30px);align-items:center;justify-content:center}
.score-panel,.controls-panel{align-self:stretch;padding:8vh 0;display:flex;flex-direction:column}.score-block{padding-bottom:24px;border-bottom:1px solid var(--line)}.score-block p,.stat-row span{margin:0;color:var(--muted);font:600 10px "IBM Plex Mono",monospace}.score-block strong{display:block;margin-top:5px;color:var(--yellow);font:600 29px "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid #292b27}.stat-row strong{font:600 14px "IBM Plex Mono",monospace}.analytics-block{margin-top:22px}.analytics-title{margin:0 0 4px;color:var(--accent);font:600 9px "IBM Plex Mono",monospace}.analytics-block .stat-row{padding:8px 0}.analytics-block .stat-row strong{font-size:11px}.status-line{margin-top:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font:600 9px "IBM Plex Mono",monospace}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.4s ease-in-out infinite}
.cabinet{position:relative;width:auto;height:min(950px,calc(100dvh - 92px));max-width:680px;aspect-ratio:38/59;background:#242622;padding:14px;border:1px solid #4b4e46;box-shadow:0 24px 70px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.09)}
.cabinet:before{content:"";position:absolute;inset:7px;border:1px solid #10110f;pointer-events:none}.cabinet-bolts i{position:absolute;width:5px;height:5px;background:#777b70;border-radius:50%;z-index:2}.cabinet-bolts i:nth-child(1){top:5px;left:5px}.cabinet-bolts i:nth-child(2){top:5px;right:5px}.cabinet-bolts i:nth-child(3){bottom:5px;left:5px}.cabinet-bolts i:nth-child(4){bottom:5px;right:5px}
canvas{display:block;width:100%;height:100%;background:var(--canvas);touch-action:none}
.game-overlay{position:absolute;inset:14px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:12%;background:rgba(17,18,16,.82);backdrop-filter:blur(5px);transition:opacity .25s ease,visibility .25s ease}.game-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.overlay-kicker{margin:0 0 10px;color:var(--yellow);font:600 11px "IBM Plex Mono",monospace}.game-overlay h2{margin:0;font-size:clamp(54px,8vw,88px);line-height:.73;font-weight:900}.game-overlay>p:last-of-type{color:#b2b5ac;font:500 14px "IBM Plex Mono",monospace;margin:22px 0;max-width:270px}.start-button{height:44px;display:flex;gap:32px;align-items:center;padding:0 12px 0 17px;background:var(--accent);border:0;border-radius:3px;font-weight:800;cursor:pointer;transition:transform .18s ease,filter .18s ease}.start-button:hover{filter:brightness(1.08)}.start-button:active{transform:translateY(1px)}kbd{font:600 10px "IBM Plex Mono",monospace;background:#292b27;border:1px solid #454840;border-bottom-width:2px;border-radius:3px;padding:5px 7px;color:#d5d7cd;white-space:nowrap}.start-button kbd{background:#b73824;border:0;color:white}
.callout{position:absolute;top:18%;left:50%;transform:translate(-50%,-10px);opacity:0;color:var(--yellow);font:900 28px "Barlow Condensed",sans-serif;pointer-events:none;text-align:center}.callout.pop{animation:callout .75s cubic-bezier(.16,1,.3,1)}
.controls-panel{gap:4px}.panel-label{margin-bottom:15px}.key-guide{display:grid;grid-template-columns:58px 1fr;gap:8px;align-items:center;padding:6px 0}.key-guide kbd{justify-self:start}.key-guide span{font-size:12px;font-weight:700}.rule{height:1px;background:var(--line);margin:18px 0}.tiny-copy{margin:0;color:var(--muted);font:500 11px/1.6 "IBM Plex Mono",monospace}.label-legend{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:5px;color:var(--muted);font:500 8px/1.35 "IBM Plex Mono",monospace}.label-legend span{display:flex;gap:6px}.label-legend b{min-width:46px;color:var(--yellow);font-weight:600}.mobile-controls{display:none}footer{display:flex;justify-content:space-between;color:#5f635a;font:500 8px "IBM Plex Mono",monospace;border-top:1px solid var(--line);padding-top:10px}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}@keyframes callout{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-28px)}}@keyframes rescue-in{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@media(max-width:1100px){.game-layout{grid-template-columns:minmax(120px,150px) minmax(460px,620px);gap:18px}.controls-panel{display:none}}
@media(max-width:760px){.arcade-shell{padding:14px 14px 12px;gap:10px}.game-layout{grid-template-columns:1fr;display:block}.score-panel{height:74px;padding:0 2px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);grid-template-rows:40px 25px;gap:3px 10px;align-items:center}.score-block{padding:0;border:0}.score-block strong{font-size:21px;margin:1px 0}.stat-row{display:block;border:0;padding:0;text-align:right}.stat-row strong{display:block;font-size:12px;margin-top:2px}.analytics-block{grid-column:1/-1;margin:0;padding-top:4px;border-top:1px solid #292b27;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.analytics-title{display:none}.analytics-block .stat-row{padding:0;text-align:left}.analytics-block .stat-row strong{font-size:10px}.status-line,.controls-panel{display:none}.cabinet{margin:auto;width:min(100%,calc((100dvh - 239px)*.644));height:auto;max-height:calc(100dvh - 239px);padding:9px}.cabinet:before{inset:4px}.game-overlay{inset:9px}.mobile-controls{height:56px;display:grid;grid-template-columns:1fr 92px 1fr;gap:9px}.mobile-controls button{border:1px solid #484b44;background:#232521;border-radius:4px;font:800 17px "Barlow Condensed";touch-action:none}.mobile-controls button:active,.mobile-controls button.active{transform:translateY(1px);background:#353831}.mobile-controls .launch-touch{background:var(--accent);border-color:#bc3c28;font-size:12px}footer{display:none}}
@media(max-width:420px){.brand-lockup h1{font-size:26px}.kicker{font-size:8px}.top-actions{gap:4px}.icon-button{width:34px;height:34px}.score-panel{grid-template-columns:1.4fr repeat(3,1fr)}.cabinet{max-height:calc(100dvh - 200px);width:min(100%,calc((100dvh - 200px)*.644))}}
@media(max-height:500px) and (orientation:landscape){.arcade-shell{padding:8px 14px;grid-template-rows:48px 1fr;gap:6px}.topbar{padding-bottom:7px}.brand-lockup h1{font-size:25px}.brand-mark{height:30px}.top-actions .icon-button{width:34px;height:34px}.game-layout{display:grid;grid-template-columns:145px minmax(180px,220px);gap:16px;align-items:center}.score-panel{height:auto;padding:4px 0;display:flex}.score-block{padding-bottom:9px}.score-block strong{font-size:23px}.stat-row{display:flex;padding:7px 0;text-align:left}.status-line{display:flex;margin-top:10px}.controls-panel{display:none}.cabinet{width:auto;height:calc(100dvh - 70px);max-height:none;padding:7px}.cabinet:before{inset:3px}.game-overlay{inset:7px}.mobile-controls,footer{display:none}}
@media(prefers-reduced-motion:reduce){.status-dot{animation:none}.icon-button,.game-overlay{transition:none}}
