* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#07030f; }
body { font-family:"Avenir Next",Futura,"Helvetica Neue",Arial,sans-serif; color:#e8e2ff; user-select:none; }
canvas#game { position:fixed; inset:0; display:block; }
.hidden { display:none !important; }

/* CRT scanlines over everything */
#scanlines { position:fixed; inset:0; pointer-events:none; z-index:100;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; }
#scanlines::after { content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(5,0,20,.55) 100%); }

/* ---------- Screens ---------- */
.screen { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; text-align:center;
  background:transparent; }
.logo { font-size:clamp(64px,13vw,150px); line-height:.88; font-weight:900; letter-spacing:.04em;
  font-style:italic; transform:skew(-6deg);
  background:linear-gradient(180deg,#fffbe6 0%,#ffd166 28%,#ff2ea6 55%,#7a1fa2 78%,#2de2ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,46,166,.55)) drop-shadow(0 4px 0 rgba(0,0,0,.6)); }
.tagline { color:#8ef5ff; letter-spacing:.32em; font-size:clamp(9px,1.4vw,14px);
  text-shadow:0 0 12px rgba(45,226,255,.8); }
.press { color:#ffd166; letter-spacing:.5em; font-weight:700; font-size:15px;
  text-shadow:0 0 14px rgba(255,209,102,.9); }
.blink { animation:blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.15; } }
.foot { position:absolute; bottom:26px; width:100%; color:#7f74b8; letter-spacing:.28em; font-size:10px; }
.neon-h { font-size:clamp(22px,4vw,40px); font-weight:900; letter-spacing:.22em; color:#fff;
  text-shadow:0 0 8px #ff2ea6, 0 0 26px #ff2ea6; }

/* ---------- Character select ---------- */
#roster { display:flex; gap:26px; flex-wrap:wrap; justify-content:center; padding:0 30px; }
.char-card { width:210px; border:1px solid #4a3f7a; border-radius:12px; overflow:hidden; cursor:pointer;
  background:linear-gradient(180deg,#151030 0%,#0b0720 100%);
  transition:transform .15s, box-shadow .15s; position:relative; }
.char-card:hover { transform:translateY(-6px) scale(1.02); }
.char-card.unlocked { border-color:#ff2ea6; box-shadow:0 0 22px rgba(255,46,166,.35); }
.char-card.unlocked:hover { box-shadow:0 0 34px rgba(255,46,166,.65); }
.char-card.locked { filter:saturate(.25) brightness(.7); cursor:not-allowed; }
.char-card img { width:100%; height:200px; object-fit:cover; object-position:center 12%; display:block; }
.char-card .ph { width:100%; height:200px; display:flex; align-items:center; justify-content:center;
  font-size:64px; color:#3b3160; background:
  repeating-linear-gradient(45deg,#0d0a1e 0 12px,#120e28 12px 24px); }
.char-card .cc-name { font-weight:900; letter-spacing:.14em; font-size:18px; padding:10px 12px 2px; color:#ffd166; }
.char-card .cc-sub { font-size:10px; letter-spacing:.2em; color:#8ef5ff; padding:0 12px; }
.char-card .cc-title { font-size:11px; color:#b8aee6; padding:6px 12px 4px; font-style:italic; }
.char-card .cc-bio { font-size:11px; line-height:1.45; color:#9a90c8; padding:4px 12px 12px; }
.char-card .cc-save { font-size:10px; letter-spacing:.14em; font-weight:900; color:#39ff88;
  padding:8px 12px 12px; border-top:1px solid #2a2450; }
.char-card .cc-save.fresh { color:#8ef5ff; }
.char-card .cc-restart { color:#ff5a5a; text-decoration:underline; cursor:pointer; margin-left:8px; }
.char-card .cc-restart:hover { text-shadow:0 0 8px rgba(255,90,90,.8); }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; z-index:40; pointer-events:none; }
#dust { position:absolute; top:18px; left:20px; font-weight:900; letter-spacing:.12em; font-size:18px;
  color:#ffd166; text-shadow:0 0 10px rgba(255,209,102,.8), 0 2px 0 #000;
  background:rgba(10,5,25,.55); border:1px solid rgba(255,209,102,.35); border-radius:8px; padding:8px 14px; }
#mission-box { position:absolute; top:18px; right:20px; max-width:340px; text-align:right;
  background:rgba(10,5,25,.55); border:1px solid rgba(255,46,166,.4); border-radius:8px; padding:10px 14px; }
#mission-title { color:#ff2ea6; font-weight:900; letter-spacing:.18em; font-size:13px;
  text-shadow:0 0 10px rgba(255,46,166,.7); }
#mission-obj { color:#cfe8ff; font-size:12px; margin-top:4px; line-height:1.4; }
#mission-timer { color:#ff5a5a; font-weight:900; font-size:20px; margin-top:4px;
  text-shadow:0 0 10px rgba(255,90,90,.8); }
#hint { position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  color:#8ef5ff; font-size:13px; letter-spacing:.18em; font-weight:700;
  background:rgba(10,5,25,.65); border:1px solid rgba(45,226,255,.4); border-radius:8px; padding:9px 18px;
  text-shadow:0 0 10px rgba(45,226,255,.8); white-space:nowrap; }

/* ---------- Dialogue ---------- */
#dialogue { position:fixed; left:50%; transform:translateX(-50%); bottom:26px; z-index:55;
  width:min(760px,92vw); display:flex; gap:14px; align-items:flex-end; }
#dlg-portrait { width:96px; height:96px; flex:0 0 96px; border-radius:10px; border:2px solid #ff2ea6;
  box-shadow:0 0 18px rgba(255,46,166,.5); background-size:cover; background-position:center 10%;
  background-color:#151030; display:flex; align-items:center; justify-content:center;
  font-size:44px; font-weight:900; }
#dlg-body { flex:1; background:rgba(8,4,22,.92); border:1px solid #4a3f7a; border-radius:12px;
  padding:14px 18px 26px; min-height:96px; position:relative; }
#dlg-name { color:#ffd166; font-weight:900; letter-spacing:.2em; font-size:12px; margin-bottom:6px;
  text-shadow:0 0 8px rgba(255,209,102,.7); }
#dlg-text { color:#e8e2ff; font-size:15px; line-height:1.5; min-height:44px; }
#dlg-next { position:absolute; right:14px; bottom:8px; color:#8ef5ff; font-size:11px; letter-spacing:.2em;
  animation:blink 1.2s steps(2) infinite; }

/* ---------- Panel (modals) ---------- */
#panel { position:fixed; inset:0; z-index:58; display:flex; align-items:center; justify-content:center;
  background:rgba(4,1,14,.72); }
.panel-box { width:min(680px,94vw); max-height:88vh; overflow:auto; background:linear-gradient(180deg,#141030,#0a0620);
  border:1px solid #ff2ea6; border-radius:14px; box-shadow:0 0 40px rgba(255,46,166,.35); padding:26px 30px; }
.panel-box h2 { color:#fff; letter-spacing:.24em; font-size:20px; font-weight:900; margin-bottom:4px;
  text-shadow:0 0 12px #ff2ea6; }
.panel-box .sub { color:#8ef5ff; font-size:11px; letter-spacing:.22em; margin-bottom:18px; }
.btn { display:inline-block; margin:6px 8px 6px 0; padding:10px 18px; border-radius:8px; cursor:pointer;
  border:1px solid #2de2ff; color:#8ef5ff; font-weight:900; letter-spacing:.14em; font-size:13px;
  background:rgba(45,226,255,.06); transition:all .12s; }
.btn:hover { background:rgba(45,226,255,.2); box-shadow:0 0 14px rgba(45,226,255,.5); }
.btn.gold { border-color:#ffd166; color:#ffd166; background:rgba(255,209,102,.06); }
.btn.gold:hover { background:rgba(255,209,102,.18); box-shadow:0 0 14px rgba(255,209,102,.5); }
.btn.pink { border-color:#ff2ea6; color:#ff8fd0; background:rgba(255,46,166,.06); }
.btn.pink:hover { background:rgba(255,46,166,.2); box-shadow:0 0 14px rgba(255,46,166,.5); }
.btn.disabled { opacity:.35; pointer-events:none; }

/* cards / casino */
.bj-row { display:flex; gap:8px; align-items:center; min-height:74px; flex-wrap:wrap; margin:8px 0 14px; }
.card { width:50px; height:70px; border-radius:6px; background:#f4f0ff; color:#1a1030;
  font-weight:900; font-size:18px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 3px 0 rgba(0,0,0,.5); }
.card.red { color:#d21f5b; }
.card.back { background:repeating-linear-gradient(45deg,#2a1f55 0 6px,#1c1440 6px 12px); color:transparent;
  border:1px solid #4a3f7a; }
.bj-label { color:#b8aee6; letter-spacing:.2em; font-size:11px; }
.bj-total { color:#ffd166; font-weight:900; margin-left:8px; }
.bj-msg { min-height:26px; color:#8ef5ff; font-weight:700; letter-spacing:.06em; margin:6px 0 10px; }

.slot-reels { display:flex; gap:14px; justify-content:center; margin:18px 0; }
.reel { width:86px; height:86px; border-radius:12px; background:#0a0620; border:2px solid #ffd166;
  box-shadow:inset 0 0 18px rgba(0,0,0,.8), 0 0 16px rgba(255,209,102,.25);
  display:flex; align-items:center; justify-content:center; font-size:46px; }

.shop-item { display:flex; justify-content:space-between; align-items:center; gap:14px;
  border:1px solid #2a2450; border-radius:10px; padding:12px 16px; margin-bottom:10px; }
.shop-item .si-name { color:#ffd166; font-weight:900; letter-spacing:.08em; }
.shop-item .si-desc { color:#9a90c8; font-size:12px; margin-top:2px; }

.codex-entry { border-left:3px solid #2de2ff; padding:8px 14px; margin-bottom:14px; }
.codex-entry h3 { color:#8ef5ff; letter-spacing:.18em; font-size:13px; margin-bottom:4px; }
.codex-entry p { color:#c9c0f0; font-size:13px; line-height:1.55; }
.codex-entry.locked { border-color:#3b3160; }
.codex-entry.locked h3 { color:#5a5090; }

.cut-text { color:#d9d2ff; font-size:17px; line-height:1.8; letter-spacing:.02em; min-height:120px; }
.cut-text em { color:#8ef5ff; font-style:normal; }
.cut-text strong { color:#ffd166; }

#toast { position:fixed; top:84px; left:50%; transform:translateX(-50%); z-index:70;
  background:rgba(8,4,22,.92); border:1px solid #ffd166; color:#ffd166; border-radius:10px;
  padding:12px 22px; font-weight:900; letter-spacing:.1em; font-size:14px;
  box-shadow:0 0 22px rgba(255,209,102,.4); text-align:center; max-width:80vw; }

kbd { background:#1c1440; border:1px solid #4a3f7a; border-radius:5px; padding:1px 7px;
  font-family:inherit; color:#8ef5ff; font-weight:900; }
.ctl-row { color:#b8aee6; font-size:13px; margin:7px 0; }