/* retro depths - shared cabinet styling */
:root{
  --bg0:#0b0e14; --bg1:#131c2b; --bg2:#1d2b40;
  --ink:#e9dcb4; --dim:#8aa0bb; --faint:#54657c;
  --amber:#f2a73b; --gold:#ffd166; --green:#7bc86c;
  --red:#d35b5b; --blue:#5b9bd3; --purple:#a07bd8; --teal:#54c6c0;
  --line:#2c3b52;
  --font: "DejaVu Sans Mono","Menlo","Consolas","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#05070b; color:var(--ink);
  font-family:var(--font); letter-spacing:.5px;
  -webkit-font-smoothing:none; font-smooth:never;
  overflow:hidden; user-select:none;
}
img,canvas{image-rendering:pixelated; image-rendering:crisp-edges;}

/* the cabinet shell centers the screen and fills the page */
.cabinet{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%, #0d1320 0%, #05070b 70%);
  padding:14px;
}
.screen{
  position:relative; background:var(--bg0);
  border:3px solid #20120a;
  box-shadow:0 0 0 4px #0b0e14, 0 0 40px rgba(242,167,59,.10), inset 0 0 60px rgba(0,0,0,.6);
  border-radius:10px; overflow:hidden;
}
.screen canvas{display:block; background:var(--bg0);}

/* crt scanlines + vignette overlay */
.crt::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:40;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(130% 130% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
.crt::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:41;
  background:linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,0));
  animation:flick 5.5s steps(60) infinite;
}
@keyframes flick{ 0%,97%{opacity:1} 98%{opacity:.93} 100%{opacity:1} }

/* shared dialogue box (DOM, overlaid on canvas) */
.rd-box{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:30;
  min-height:74px; padding:12px 14px 14px;
  background:linear-gradient(#0c1726, #0a1320);
  border:2px solid var(--amber);
  box-shadow:0 0 0 2px #07101c, 0 6px 0 rgba(0,0,0,.4);
  display:none;
}
.rd-box.show{display:block}
.rd-name{
  position:absolute; top:-13px; left:10px; padding:1px 8px;
  background:var(--amber); color:#1a1206; font-weight:bold; font-size:12px;
  letter-spacing:1px; text-transform:uppercase;
}
.rd-text{font-size:15px; line-height:1.5; white-space:pre-wrap; min-height:44px}
.rd-cursor{display:inline-block; margin-left:2px; color:var(--amber); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.rd-choices{margin-top:8px; display:none; flex-direction:column; gap:2px}
.rd-choices.show{display:flex}
.rd-choice{padding:2px 6px 2px 20px; position:relative; color:var(--dim); cursor:pointer; font-size:14px}
.rd-choice.sel{color:var(--gold)}
.rd-choice.sel::before{content:"\25B8"; position:absolute; left:6px; color:var(--amber)}
.rd-hint{position:absolute; right:12px; bottom:6px; font-size:11px; color:var(--faint)}

/* lightweight HUD + banners shared by games */
.rd-toast{
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:35;
  background:#0a1320; border:1px solid var(--line); color:var(--gold);
  padding:5px 12px; font-size:12px; letter-spacing:1px; opacity:0;
  transition:opacity .3s; pointer-events:none; text-transform:uppercase;
}
.rd-toast.show{opacity:1}

.rd-title{ text-align:center; }
.rd-title h1{ color:var(--gold); letter-spacing:3px; text-shadow:0 2px 0 #1a1206; }
.rd-press{ color:var(--dim); animation:blink 1.4s steps(2) infinite; }

.rd-help{
  position:absolute; left:0; right:0; bottom:-22px; text-align:center;
  color:var(--faint); font-size:11px; letter-spacing:1px;
}
a{color:var(--amber)}