@font-face{font-family:Pixel;src:url('../assets/fonts/PixelOperator8-Bold.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;background:#09030d;font-family:Pixel,monospace;touch-action:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#54101f 0 3%,#1b0715 28%,#060209 75%);color:#fff}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.2;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px)}
.cabinet{width:min(100vw,calc(100vh * 1.04));display:grid;gap:8px;place-items:center;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));filter:drop-shadow(0 18px 28px #000)}
.marquee{width:min(94vw,768px);display:flex;align-items:flex-end;justify-content:center;gap:13px;padding:4px 12px 6px;border:4px solid #f5c43b;background:#0a040c;box-shadow:inset 0 0 0 4px #c51d36,0 0 20px #c51d3688;transform:skew(-2deg);overflow:hidden}
.marquee span{font-size:clamp(18px,4.8vw,46px);line-height:.85;color:#d9233d;text-shadow:3px 3px #fff,-2px -2px #000;white-space:nowrap;min-width:0}
.marquee small{font-size:clamp(7px,1.4vw,12px);color:#f5c43b;white-space:nowrap}
.screen-wrap{position:relative;width:min(94vw,768px);aspect-ratio:16/15;border:8px solid #131018;outline:3px solid #5e2330;background:#000;overflow:hidden}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:none;touch-action:none}
button{position:absolute;top:8px;border:2px solid #f5c43b;background:#09030dcc;color:#fff;font:10px Pixel,monospace;padding:5px 7px;z-index:2;cursor:pointer}
.sound{right:8px}.fullscreen{left:8px}
.instructions{margin:2px 0 0;text-align:center;color:#b7ef67;font-size:clamp(8px,1.6vw,13px);letter-spacing:.04em}
.rotate-hint{display:none}
@media (orientation:portrait) and (max-width:600px){
  .cabinet{width:100vw;padding:6px}.marquee{width:96vw}.marquee small{display:none}.screen-wrap{width:96vw}
  .rotate-hint{position:fixed;inset:auto 0 18px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;color:#f5c43b;font-size:12px;text-shadow:2px 2px #000}.rotate-hint span{font-size:8px;color:#fff}
}
@media (orientation:landscape){
  body{display:block;background:#000}
  .cabinet{position:fixed;inset:0;width:100vw;height:100dvh;display:grid;place-items:center;padding:0;filter:none;background:#000}
  .marquee,.instructions,.rotate-hint{display:none}
  .screen-wrap{width:min(100vw,calc(100dvh * 1.066667));height:min(100dvh,calc(100vw * .9375));aspect-ratio:16/15;border:0;outline:0}
  canvas{width:100%;height:100%}
  button{top:max(8px,env(safe-area-inset-top));font-size:clamp(8px,2vh,12px);opacity:.78}
  .fullscreen{left:max(8px,env(safe-area-inset-left))}.sound{right:max(8px,env(safe-area-inset-right))}
}