* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #05060d; overflow: hidden; }
body {
  font-family: "Courier New", ui-monospace, monospace;
  color: #e8ecff;
  user-select: none;
  -webkit-user-select: none;
}
#viewport {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
#stage {
  position: relative;
  width: 640px; height: 360px;
  transform-origin: center center;
  background: #0a0c16;
  box-shadow: 0 0 0 2px #2a3350, 0 0 0 4px #10152a, 0 0 42px rgba(60, 90, 220, 0.25);
  overflow: hidden;
  cursor: crosshair;
}
#game { position: absolute; inset: 0; display: block; image-rendering: pixelated; }

/* ---------- HUD: studio rack chrome ---------- */
#hud { position: absolute; left: 0; top: 0; width: 640px; height: 40px; pointer-events: none; }
.hud-row {
  display: flex; height: 30px; align-items: center; gap: 8px; padding: 0 6px;
  background: #000000;
  border-bottom: 2px solid #444450;
  box-shadow: 0 2px 0 rgba(0,0,0,0.55), inset 0 1px 0 rgba(140,165,255,0.14);
}
.hud-cell {
  font-size: 12px; letter-spacing: 1px; white-space: nowrap; color: #ffffff;
  text-shadow: none;
  padding: 2px 6px;
  background: #000000;
  border: 1px solid #ffffff;
  box-shadow: none;
}
.hud-cell.portrait {
  width: 26px; height: 24px; padding: 0;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
  image-rendering: pixelated;
  border-color: #ffffff;
  box-shadow: none;
}
.hud-cell.portrait.host { box-shadow: inset 0 0 0 1px #05060d, 0 0 8px rgba(255,210,63,0.18); }
#hud-score {
  color: #ffffff; font-weight: bold; font-size: 15px; letter-spacing: 2px;
  border-color: #ffffff; background: #000000;
  text-shadow: 0 0 9px rgba(255,255,255,0.45), 0 1px 0 #05060d;
  box-shadow: none;
}
#p2-start {
  color: #ff4ddb; font-size: 8px; letter-spacing: 1px; font-weight: bold;
  border-color: #6e1f5e; background: rgba(30, 6, 26, 0.85); padding: 2px 5px;
  text-shadow: 0 0 8px rgba(255, 77, 219, 0.7);
  animation: blink 0.9s steps(2) infinite;
}
#hud-room.msg { visibility: hidden; }
#hud-p1, #hud-p2 { width: 26px; height: 26px; background-size: cover; background-position: center; }
#hud-p1 { margin-right: -8px; }
#hud-score { border-left: none; padding-left: 10px; }
#hud-lives { color: #ffffff; border-color: #ffffff; }
#hud-lives, #hud-room, #hud-weapon, #hud-keys, #hud-blades {
  text-shadow: 0 0 7px rgba(255,255,255,0.45), 0 1px 0 #05060d;
}
#hud-room { color: #ffffff; letter-spacing: 0.5px; font-size: 8px; }
.hud-center { flex: 1; text-align: center; color: #ffffff !important; }
#hud-weapon { color: #ffffff; border-color: #ffffff; }
#hud-keys { color: #ffffff; border-color: #ffffff; }
#hud-blades { position: absolute; right: 9px; top: 31px; font-size: 8px; letter-spacing: .3px; padding: 2px 5px; background: rgba(7,14,20,.9); border: 1px solid #6a6044; border-radius: 2px; }

/* quota + boss meters: segmented arcade tape */
#quota-bar {
  position: absolute; left: 6px; top: 32px; width: 190px; height: 5px;
  background: #10142a; border: 1px solid #232b4a;
  box-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
#quota-fill {
  height: 100%; width: 0%; transition: width 0.2s;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.45) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, #2a44ff 0%, #2a44ff 72%, #d02020 72%, #d02020 100%);
  box-shadow: 0 0 8px rgba(42,68,255,0.6);
}
#boss-bar { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); width: 340px; text-align: center; }
#boss-name {
  font-size: 11px; letter-spacing: 3px; color: #ff5470;
  text-shadow: 0 0 8px rgba(255,84,112,0.7), 0 1px 0 #05060d;
  padding: 1px 10px; background: rgba(8,10,22,0.8); border: 1px solid #4a1f2c;
}
.boss-track {
  height: 7px; background: #10142a; border: 1px solid #46578c; margin-top: 2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
#boss-fill {
  height: 100%; width: 100%; transition: width 0.15s;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.45) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #ff7d94, #ff5470 55%, #c93a55);
  box-shadow: 0 0 10px rgba(255,84,112,0.65);
}

/* ---------- banner: marquee with bulbs ---------- */
#banner {
  /* Arcade message callout: hangs across the top wall band (y31-52), never
     reaching the arena floor (y66) — reference's mid-top callout box. */
  position: absolute; left: 170px; top: 31px;
  padding: 4px 10px; font-size: 8px; font-weight: bold; letter-spacing: 0.5px;
  color: #ffe066;
  background: linear-gradient(180deg, rgba(18,14,6,0.96), rgba(10,8,4,0.93));
  border: 2px solid #ffd23f;
  text-shadow: 0 0 10px rgba(255,210,63,0.6), 0 1px 0 #05060d;
  white-space: normal; pointer-events: none;
  width: 300px; line-height: 1.1; overflow-wrap: break-word;
  box-shadow: 0 0 0 2px #1a1405, 0 0 12px rgba(255,210,63,0.35);
  animation: bannerIn 0.18s ease-out;
}
#banner::before, #banner::after {
  content: ""; position: absolute; left: 3px; right: 3px; height: 5px;
  background-image: radial-gradient(circle at 3px 3px, #ffe066 2px, transparent 2.5px);
  background-size: 9px 5px;
}
#banner::before { top: -5px; animation: bulbs 0.8s steps(2) infinite; }
#banner::after { bottom: -3px; animation: bulbs 0.8s steps(2) infinite reverse; }
#banner.sub {
  color: #9ff2ff; border-color: #59d9ff;
  text-shadow: 0 0 10px rgba(89,217,255,0.55), 0 1px 0 #05060d;
  box-shadow: 0 0 0 2px #08131c, 0 0 24px rgba(89,217,255,0.35);
  background: linear-gradient(180deg, rgba(6,14,20,0.94), rgba(4,8,12,0.9));
}
#banner.sub::before, #banner.sub::after { background-image: radial-gradient(circle at 3px 3px, #9ff2ff 2px, transparent 2.5px); }
@keyframes bulbs { 50% { opacity: 0.25; } }
@keyframes bannerIn { from { transform: scale(0.86); } to { transform: scale(1); } }

#hint {
  display: none; /* reference has no bottom hint bar — controls live in the title menu */
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 1px; color: #8fa1e8;
  background: rgba(10,12,24,0.78); padding: 4px 12px;
  border: 1px solid #2a3350; pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
#flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; }

/* ---------- overlay: prize wheel cabinet ---------- */
#overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(40,52,110,0.35), transparent 60%),
    rgba(5, 6, 13, 0.88);
  cursor: default;
}
#overlay.hidden { display: none; }
#overlay-card {
  position: relative;
  width: 470px; max-height: 340px; overflow-y: auto;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #10142a, #0a0c1c);
  border: 3px solid #ffd23f;
  padding: 22px 26px 18px;
  text-align: center;
  box-shadow: 0 0 0 3px #1a1405, 0 0 40px rgba(255,210,63,0.28), inset 0 0 30px rgba(0,0,0,0.5);
}
#overlay-card::before, #overlay-card::after {
  content: ""; position: absolute; left: 6px; right: 6px; height: 6px;
  background-image: radial-gradient(circle at 4px 3px, #ffe066 2.2px, transparent 2.8px);
  background-size: 11px 6px;
}
#overlay-card::before { top: 3px; animation: bulbs 0.9s steps(2) infinite; }
#overlay-card::after { bottom: 3px; animation: bulbs 0.9s steps(2) infinite reverse; }
#overlay-card h1 {
  font-size: 36px; letter-spacing: 7px; margin-bottom: 2px;
  background: linear-gradient(180deg, #fff2b0 20%, #ffd23f 45%, #b8860b 70%, #ffe066 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 #1a1405) drop-shadow(0 0 14px rgba(255,210,63,0.45));
}
#overlay-card h1 .riot {
  background: linear-gradient(180deg, #ffb0bc 20%, #ff5470 50%, #a82a44 75%, #ff8ad8 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #1a0a10) drop-shadow(0 0 14px rgba(255,84,112,0.5));
}
#overlay-card h2 {
  font-size: 20px; letter-spacing: 3px; color: #9ff2ff; margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(89,217,255,0.5), 0 1px 0 #05060d;
}
#overlay-card .tag {
  font-size: 11px; color: #8fa1e8; letter-spacing: 2px; margin-bottom: 14px;
  border-top: 1px dashed #2a3350; border-bottom: 1px dashed #2a3350;
  padding: 5px 0;
}
#overlay-card p { font-size: 12px; color: #cfd8ff; margin: 6px 0; line-height: 1.5; }
#overlay-card .stats { text-align: left; width: 300px; margin: 10px auto; font-size: 13px; }
#overlay-card .stats div {
  display: flex; justify-content: space-between; padding: 3px 6px;
  border-bottom: 1px dashed #2a3350; background: rgba(8,10,22,0.5);
}
#overlay-card .stats span:last-child { color: #ffe066; font-weight: bold; }
.btn {
  display: inline-block; margin: 10px 6px 0; padding: 9px 24px;
  font-family: inherit; font-size: 14px; font-weight: bold; letter-spacing: 2px;
  color: #1a1405; background: linear-gradient(180deg, #ffe066, #f0b420 60%, #c9951a);
  border: 2px solid #fff2b0; border-bottom-color: #8a6a10;
  cursor: pointer;
  box-shadow: 0 3px 0 #6b5210, 0 0 16px rgba(255,210,63,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.btn:hover { background: linear-gradient(180deg, #fff2b0, #ffd23f 60%, #e0a820); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6b5210; }
.btn.alt {
  background: linear-gradient(180deg, #a9ecff, #59d9ff 60%, #2f9fc4);
  border-color: #d7f6ff; border-bottom-color: #1a5e78;
  box-shadow: 0 3px 0 #1a5e78, 0 0 16px rgba(89,217,255,0.35);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.btn.alt:hover { background: linear-gradient(180deg, #d7f6ff, #7ac8ff 60%, #3fb0d4); }
.controls-list { text-align: left; width: 380px; margin: 10px auto 4px; font-size: 13px; }
.controls-list .row {
  display: flex; justify-content: space-between; padding: 4px 8px; margin: 2px 0;
  background: rgba(12,16,34,0.9); border: 1px solid #2a3350;
}
.controls-list .key {
  color: #ffe066; background: #1a2033; border: 1px solid #46578c;
  padding: 1px 10px; cursor: pointer; min-width: 74px; text-align: center;
  box-shadow: 0 2px 0 #10152a;
}
.controls-list .key:hover { background: #2a3350; }
.controls-list .key.waiting {
  color: #ff5470; border-color: #ff5470;
  animation: blink 0.7s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.4; } }
.note { font-size: 10px; color: #6b7699; margin-top: 8px; letter-spacing: 1px; }

#stage {flex-shrink:0;background:#101720;box-shadow:0 0 40px #000;}
#stage canvas, #game {image-rendering:auto;}
body {font-family:Arial,sans-serif;}
.hud-row {background:linear-gradient(#293846,#0b141d);border-bottom:1px solid #67808e;}
.hud-cell {font-family:Arial,sans-serif;border-color:#3e576a;background:transparent;font-size:10px;}
#hud-room {display:none;}
#hud-score {color:#b5efff!important;letter-spacing:1px;}
#hud-lives {color:#fff!important;min-width:20px;}
#p2-start {font-size:8px;}
#banner, #banner.sub {top:94px;left:50%;transform:translateX(-50%);width:570px;font-size:10px;padding:2px;background:#101720;border:0;box-shadow:none;}
#banner::before,#banner::after {display:none;}
#hint {font-size:7px;bottom:4px;padding:2px;background:#101720;}
#boss-bar {top:76px;}
#overlay-card {background:linear-gradient(145deg,rgba(26,43,55,.97),rgba(6,13,20,.97));border:1px solid #698394;box-shadow:0 16px 50px #000;}
#overlay-card h1 {font-family:Impact,Arial,sans-serif;letter-spacing:3px;color:#e4f8ff;text-shadow:0 0 15px #24a5ce;}
.btn {font-family:Arial,sans-serif;background:linear-gradient(#416b7c,#1e3c4a);border-color:#6899ac;color:#fff;}

#overlay-card::before,#overlay-card::after {display:none;}
#overlay-card h1,#overlay-card h1 .riot {background:none;color:#dff8ff;filter:none;}

.hidden {display:none!important;}
#banner,#banner.sub {left:50%!important;width:570px!important;height:auto!important;animation:none;text-align:center;}
#hint {left:50%!important;height:auto!important;text-align:center;}

/* Compact broadcast strip leaves the entire arena background visible. */
#hud {height:24px;}
.hud-row {height:24px;gap:4px;padding:0 6px;}
#hud-brand {font:italic 900 11px Arial,sans-serif;letter-spacing:.3px;color:#ddf7ff;white-space:nowrap;margin-right:auto;text-shadow:0 0 5px #339db8;}
.hud-cell {font-size:8px;letter-spacing:.25px;padding:2px 4px;}
#hud-score {font-size:10px;letter-spacing:.5px;padding-left:5px;}
#hud-p1,#hud-p2 {width:18px;height:20px;}
#hud-p1 {margin-right:-4px;}
#p2-start {font-size:6px;letter-spacing:.25px;padding:2px 3px;}
#quota-bar {left:6px;top:23px;width:190px;height:3px;}
#banner,#banner.sub {top:29px;width:auto!important;max-width:550px;font-size:8px;line-height:1.2;padding:3px 7px;background:rgba(9,17,24,.86);border-radius:3px;}
#boss-bar {top:47px;width:210px;}
#boss-name {font-size:8px;letter-spacing:1px;padding:1px 5px;}
.boss-track {height:4px;margin-top:1px;}
#overlay-card {padding:16px 22px 12px;}
#overlay-card h1 {font-size:28px;letter-spacing:2px;}
#overlay-card h2 {font-size:16px;letter-spacing:2px;}
#overlay-card p {font-size:11px;}