:root{--room: #08070a;--marquee-h: 0px;--panel-h: 0px}html,body{margin:0;height:100%;background:var(--room);color:#d9d2c5;overflow:hidden}#room[hidden]{display:none}#room{position:fixed;inset:0;display:grid;place-items:center;background:var(--room)}#cabinet{display:grid;grid-template-rows:var(--marquee-h) auto var(--panel-h);justify-items:center}#bezel{position:relative;line-height:0}#screen{position:relative}#screen canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}#vignette{position:absolute;inset:0;pointer-events:none}#notice{position:fixed;left:0;right:0;bottom:0;padding:4px 8px;font:12px monospace;color:#d9d2c5;background:#1a1418;text-align:center}#gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--room);padding:16px;box-sizing:border-box}#gate[hidden]{display:none}.gate-card{width:min(90vw,420px);max-width:100%;box-sizing:border-box;padding:24px;border:2px solid #6b5a2e;background:#141117;color:#d9d2c5;font:16px/1.5 ui-monospace,Menlo,Consolas,monospace;text-align:center}.gate-card h1{font-size:20px;margin:16px 0 8px}.gate-card p{margin:8px 0}.gate-logo{max-width:100%;height:auto;image-rendering:pixelated}body.compact #marquee,body.compact #panel{visibility:hidden;height:0;overflow:hidden;border:0}#marquee{height:var(--marquee-h);display:grid;place-items:end center;position:relative}#marquee img{max-height:calc(var(--marquee-h) - 16px);width:auto;image-rendering:pixelated;position:relative;z-index:1}#marquee:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 50% 100%,rgba(255,170,60,.35),rgba(255,120,30,.08) 60%,transparent 80%)}#bezel{padding:24px;background:linear-gradient(180deg,#2b2320,#171214);border:2px solid #4a3a22;box-shadow:inset 0 0 0 2px #0a0709,0 0 40px #ff8c2826}#panel{height:var(--panel-h);width:100%;background:linear-gradient(180deg,#1e1815,#0f0b0c);border-top:2px solid #4a3a22}#vignette{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}#service{position:fixed;inset:0;background:#000;color:#d9d2c5;display:grid;place-items:center;z-index:60}#service[hidden]{display:none}.service-text{font:14px/1.6 ui-monospace,Menlo,Consolas,monospace;margin:0;white-space:pre}html.mobile .service-text{white-space:pre-wrap;font-size:12px;padding:0 16px;max-width:100vw;box-sizing:border-box}#touch,#rotate{display:none}html.mobile,html.mobile body{touch-action:none;overscroll-behavior:none;-webkit-touch-callout:none}body.mobile #marquee,body.mobile #panel,body.mobile #vignette,body.mobile #notice{display:none}body.mobile #bezel{padding:0;border:0;background:none;box-shadow:none}body.mobile #room{background:#000}body.mobile #screen canvas{position:fixed;inset:0;margin:auto;width:min(100vw,calc(100vh * 384 / 224));width:min(100dvw,calc(100dvh * 384 / 224));touch-action:none;image-rendering:auto;height:auto;aspect-ratio:384 / 224;z-index:0}body.mobile #touch{display:block;position:fixed;inset:0;z-index:10;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}body.mobile #touch [data-touch],body.mobile #coinrow button{pointer-events:auto;touch-action:none}body.mobile #touch button{position:fixed;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;font:700 13px/1 ui-monospace,Menlo,Consolas,monospace;color:#d8cbb0;letter-spacing:.5px;background:#0a1012bd;border:2px solid rgba(90,232,232,.85);border-radius:50%;display:grid;place-items:center;transition:background 60ms,color 60ms}body.mobile #touch button.pressed{background:#2fd4d466;color:#02090c}body.mobile #dpad{pointer-events:auto;touch-action:none;position:fixed;left:calc(6px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;background:radial-gradient(circle,#121a1c80,#121a1c47);border:2px solid rgba(47,212,212,.45)}body.mobile #dpad.pressed{border-color:#2fd4d4e6}.dp-hint{position:absolute;color:#e2d6bed1;font-size:15px;line-height:1}.dp-up{top:8px;left:50%;transform:translate(-50%)}.dp-down{bottom:8px;left:50%;transform:translate(-50%)}.dp-left{left:8px;top:50%;transform:translateY(-50%)}.dp-right{right:8px;top:50%;transform:translateY(-50%)}body.mobile #b-attack{right:calc(8px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));width:78px;height:78px;border-color:#ff503acc;font-size:14px}body.mobile #b-jump{right:calc(96px + env(safe-area-inset-right));bottom:calc(40px + env(safe-area-inset-bottom));width:64px;height:64px}body.mobile #b-special{right:calc(30px + env(safe-area-inset-right));bottom:calc(106px + env(safe-area-inset-bottom));width:56px;height:56px;border-color:#f0c040cc}body.mobile #coinrow{display:flex;gap:8px;position:fixed;top:calc(8px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));pointer-events:none}body.mobile #coinrow button{position:static;width:auto;min-height:44px;padding:10px 18px;border-radius:8px;font-size:13px}body.mobile[data-screen=PLAY] #coinrow,body.mobile[data-screen=HISCORE_ENTRY] #coinrow{display:none}body.mobile #touch #b-pause{display:none;pointer-events:auto;touch-action:none;left:calc(12px + env(safe-area-inset-left));top:calc(8px + env(safe-area-inset-top));width:44px;height:44px;border-radius:8px;font-size:14px}body.mobile[data-screen=PLAY] #touch #b-pause{display:grid}body.mobile #b-pause:before{content:"II"}body.mobile[data-paused=player] #b-pause:before{content:"▶"}@media(orientation:portrait){body.mobile.portrait-ok #rotate{display:none}body.mobile:not(.portrait-ok) #touch{display:none}body.mobile:not(.portrait-ok) #rotate{display:grid;place-items:center;position:fixed;inset:0;z-index:50;background:#08070a;color:#d8cbb0;text-align:center;padding:24px}}.rotate-logo{display:block;margin:0 auto 20px;image-rendering:pixelated}.rotate-card small{display:block;margin-top:14px;font-size:12px;font-weight:500;color:#b0a488}.rotate-card{font:700 18px/1.5 ui-monospace,Menlo,Consolas,monospace}.rotate-icon{display:block;font-size:44px;margin-bottom:12px;color:#2fd4d4;animation:rotate-nudge 2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.rotate-icon{animation:none}body.mobile #touch button{transition:none}}@keyframes rotate-nudge{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}
