:root {
  color-scheme: dark;
  font-family: "Courier New", monospace;
  background: #090b12;
  color: #f4e9c4;
}

* { box-sizing: border-box; }

.game-only { --touch-dock: 0px; background:#000; height:100%; overflow:hidden; width:100%; }
.game-only body { background:#000; display:block; height:100%; min-height:0; overflow:hidden; width:100%; }
.game-only .cabinet-shell { height:100dvh; padding:0; width:100vw; }
.game-only .marquee,.game-only .instructions { display:none; }
.game-only .screen-wrap { border:0; box-shadow:none; height:100dvh; padding-bottom:var(--touch-dock); width:100vw; }
.game-only canvas { height:calc(100dvh - var(--touch-dock)); object-fit:contain; width:100vw; }
.game-only-exit { display:none; }
.game-only .game-only-exit { align-items:center; background:rgba(8,12,20,.68); border:1px solid rgba(255,236,172,.55); border-radius:50%; color:#fff1bc; display:flex; font:700 25px/1 system-ui,sans-serif; height:42px; justify-content:center; left:max(10px,env(safe-area-inset-left)); position:absolute; text-decoration:none; top:max(10px,env(safe-area-inset-top)); width:42px; z-index:5; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, #293047 0, #10131f 46%, #050609 100%);
}

.cabinet-shell {
  width: min(100vw, 1180px);
  padding: 12px;
}

.marquee {
  padding: 10px 12px;
  border: 4px solid #dca62d;
  border-bottom: 0;
  background: #721d2b;
  color: #fff1bc;
  text-align: center;
  font-size: clamp(18px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow:
    0 2px 0 #fff8d8,
    0 5px 0 #d28b25,
    4px 7px 0 #16101a;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,220,92,.2), transparent 18%),
    radial-gradient(circle at 85% 50%, rgba(255,220,92,.2), transparent 18%),
    linear-gradient(#8d2937, #57131f);
}

.marquee span {
  color: #ffe55b;
  display: inline-block;
  margin: 0 .35em;
  text-shadow: 2px 3px 0 #17101a;
}

.screen-wrap {
  position: relative;
  overflow: hidden;
  border: 8px solid #181a1f;
  box-shadow: 0 18px 80px #000;
  background: #000;
  touch-action: none;
}

.touch-controls {
  display: none;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.touch-controls button {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  background: rgba(8, 12, 20, .72);
  border: 2px solid rgba(255, 236, 172, .64);
  border-radius: 50%;
  color: #fff1bc;
  display: flex;
  font: 900 clamp(13px, 2.8vw, 22px)/1 "Courier New", monospace;
  height: clamp(42px, 8vw, 70px);
  justify-content: center;
  pointer-events: auto;
  text-shadow: 2px 2px #15101a;
  touch-action: none;
  user-select: none;
  width: clamp(42px, 8vw, 70px);
}

.touch-controls button.is-held { background: rgba(220, 166, 45, .88); color: #15101a; transform: scale(.94); }
.touch-move, .touch-actions { bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); display: flex; gap: clamp(6px, 1.2vw, 12px); position: absolute; }
.touch-move { left: clamp(12px, 2.4vw, 24px); }
.touch-actions { right: clamp(12px, 2.4vw, 24px); }
.touch-jump { margin-top:-8px; }
.touch-start { border-radius: 999px!important; bottom:max(8px,env(safe-area-inset-bottom))!important; font-size: clamp(9px, 1.7vw, 13px)!important; height: clamp(28px, 4.5vw, 38px)!important; left: 50%; position: absolute; top:auto; transform: translateX(-50%); width: clamp(64px, 11vw, 90px)!important; }
.touch-start.is-held { transform: translateX(-50%) scale(.94)!important; }

canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    #000 4px,
    #000 5px
  );
}

.instructions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 18px;
  padding: 12px;
  border: 4px solid #dca62d;
  border-top: 0;
  background: #151821;
  color: #c8cfda;
  font-size: clamp(10px, 1.3vw, 14px);
}

@media (max-width: 640px) {
  .cabinet-shell { padding: 0; }
  .marquee, .instructions { border-left: 0; border-right: 0; }
  .screen-wrap { border-left: 0; border-right: 0; }
}

@media (pointer: coarse) {
  .touch-controls { display: block; }
  .instructions { font-size: 9px; gap: 5px 10px; padding: 8px; }
  .touch-controls button { height:clamp(38px,7vw,56px); width:clamp(38px,7vw,56px); }
  .game-only { --touch-dock:max(92px,calc(80px + env(safe-area-inset-bottom))); }
  .game-only .touch-controls { background:linear-gradient(#111622,#070a10); border-top:2px solid #dca62d; bottom:0; height:var(--touch-dock); inset:auto 0 0; }
}