/* ===========================================================
   THE MOPHRA CLOSER CHALLENGE — vintage slot machine skin
   Palette: oxblood enamel · brass · cream · lamp-amber
   Fonts: Bungee Shade (arcade-marquee display) · Bungee (signage) · Space Mono (text)
   =========================================================== */

:root, body[data-theme="oxblood"]{
  /* cabinet enamel (oxblood, deepened) */
  --cab-1:#5a1812;
  --cab-2:#4a1311;
  --cab-3:#330d0a;
  --cab-4:#1f0605;
  /* brass (slightly deeper) */
  --brass:#b8932f;
  --brass-bright:#e3c172;
  --brass-hi:#f5dca0;
  --brass-deep:#7a5f1c;
  --brass-shadow:#3d2e0c;
  /* paper / screen */
  --cream:#ecdfba;
  --cream-dim:#c8b58a;
  --screen:#1a110a;
  --screen-2:#221608;
  --ink:#ecdcb0;
  --muted:#a3937a;
  --muted-dim:#766a52;
  /* lamps */
  --lamp:#e8a93c;
  --lamp-hot:#f6cf80;
  --lamp-deep:#7a4710;
  --lamp-low:#b07a18;
  --lamp-shadow:#5a3208;
  --lamp-glow:rgba(232,169,60,.55);
  --lamp-glow-soft:rgba(232,169,60,.28);
  --lamp-off-1:#6a4a22;
  --lamp-off-2:#3a2710;
  /* option cards */
  --opt-1:#3a1f0e;
  --opt-2:#26120a;
  --opt-h-1:#4a2812;
  --opt-h-2:#33180a;
  --opt-p-1:#4d2410;
  --opt-p-2:#321708;
  /* hall ambient hue */
  --hall-warm:rgba(232,169,60,.07);
  --hall-deep:rgba(120,30,20,.4);
  /* signals */
  --red:#e8492c;
  --red-hot:#ff7a4f;
  --good:#8fc46b;
  --bad:#e07a5f;
  --blue:#7fa8c9;
  --line:rgba(243,214,132,.16);
  --line-strong:rgba(243,214,132,.38);
}

body[data-theme="felt"]{
  --cab-1:#2a5a3c;
  --cab-2:#1d4429;
  --cab-3:#13321d;
  --cab-4:#072412;
  --brass:#b89a3c;
  --brass-bright:#e3c97a;
  --brass-hi:#f5e3a4;
  --brass-deep:#7a651c;
  --brass-shadow:#3d3210;
  --cream:#efe5b8;
  --ink:#ece2af;
  --muted:#9aa388;
  --muted-dim:#6e7660;
  --lamp:#e8d27a;
  --lamp-hot:#f7e5a8;
  --lamp-deep:#6a5a20;
  --lamp-low:#a89638;
  --lamp-shadow:#3a3010;
  --lamp-glow:rgba(232,210,122,.5);
  --lamp-glow-soft:rgba(232,210,122,.25);
  --lamp-off-1:#4a5a3a;
  --lamp-off-2:#2c3a26;
  --opt-1:#1d3a28;
  --opt-2:#10231a;
  --opt-h-1:#2a4a34;
  --opt-h-2:#1a3024;
  --opt-p-1:#2e4a36;
  --opt-p-2:#1a3024;
  --hall-warm:rgba(232,210,122,.06);
  --hall-deep:rgba(20,60,30,.4);
  --line:rgba(232,210,122,.16);
  --line-strong:rgba(232,210,122,.38);
}

body[data-theme="arcade"]{
  /* near-black navy cabinet with electric-cyan trim, yellow lamps, pink accents */
  --cab-1:#0a0c30;
  --cab-2:#06082a;
  --cab-3:#03041a;
  --cab-4:#01010a;
  --brass:#22ddff;
  --brass-bright:#66ffff;
  --brass-hi:#a8ffff;
  --brass-deep:#0a7088;
  --brass-shadow:#04323c;
  --cream:#fff4a0;
  --ink:#fffacc;
  --muted:#7da8c4;
  --muted-dim:#4a6a82;
  --screen:#02041a;
  --screen-2:#04062a;
  --lamp:#ffcc00;
  --lamp-hot:#ffee55;
  --lamp-deep:#8a6a00;
  --lamp-low:#cc9900;
  --lamp-shadow:#3a2a00;
  --lamp-glow:rgba(255,204,0,.55);
  --lamp-glow-soft:rgba(255,204,0,.28);
  --lamp-off-1:#4a3a14;
  --lamp-off-2:#2a2010;
  --opt-1:#0a0c30;
  --opt-2:#04062a;
  --opt-h-1:#101440;
  --opt-h-2:#0a0c30;
  --opt-p-1:#181c50;
  --opt-p-2:#0a0c30;
  --hall-warm:rgba(255,204,0,.05);
  --hall-deep:rgba(10,12,60,.5);
  --red:#ff3aa0;
  --red-hot:#ff77c0;
  --blue:#22ddff;
  --line:rgba(34,221,255,.18);
  --line-strong:rgba(34,221,255,.4);
}

/* ----- arcade theme: title + button + scanline + dot-trail only -----
   (palette stays via vars above; everything else uses the base styles
   so question/option/feedback/end-page text matches the other themes) */
body[data-theme="arcade"] .brand-mophra{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(26px,7vw,42px);letter-spacing:.04em;line-height:1.1;
  color:var(--lamp);
  text-shadow:0 0 8px var(--lamp-glow),0 0 22px var(--lamp-glow-soft);
}
body[data-theme="arcade"] .brand-sub{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(7px,1.7vw,9.5px);letter-spacing:.18em;color:var(--brass-bright);
  text-shadow:0 0 5px var(--line-strong);margin-top:10px;
}
body[data-theme="arcade"] h1{
  font-family:'VT323',monospace;font-weight:400;
  font-size:clamp(32px,8.5vw,52px);line-height:1.0;letter-spacing:0;
  color:var(--ink);
}
body[data-theme="arcade"] h1 em{color:var(--lamp-hot);text-shadow:0 0 14px var(--lamp-glow)}
body[data-theme="arcade"] .btn{font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:.06em;padding:18px 22px}

/* subtle dot trail under the marquee */
body[data-theme="arcade"] .marquee::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-3px;height:3px;
  background:radial-gradient(circle, var(--lamp) 0 1px, transparent 1.5px) 0 50%/8px 3px repeat-x;
  opacity:.7;animation:dotTrail 3.5s linear infinite;
}
@keyframes dotTrail{from{background-position:0 50%}to{background-position:-160px 50%}}
body[data-theme="arcade"] .marquee{position:relative;overflow:visible}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#160a09;
  color:var(--ink);
  font-family:'Space Mono',monospace;
  min-height:100%;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(10px,3vw,40px) clamp(8px,3vw,30px);
  -webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}

/* ambient hall behind the machine */
.hall{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--hall-warm), transparent 55%),
    radial-gradient(90% 70% at 50% 120%, var(--hall-deep), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 2px, transparent 2px 5px),
    radial-gradient(140% 100% at 50% 50%, #2a1110, #0d0605 80%);
}

/* =========================================================
   MACHINE
   ========================================================= */
.machine{
  position:relative;z-index:1;
  width:100%;max-width:600px;
  display:flex;flex-direction:column;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7));
}

/* ---------- MARQUEE ---------- */
.marquee{
  position:relative;
  background:
    linear-gradient(180deg,var(--cab-1),var(--cab-2) 55%,var(--cab-3));
  border:3px solid var(--brass);
  border-bottom:none;
  border-radius:26px 26px 6px 6px;
  padding:14px 16px 12px;
  box-shadow:inset 0 2px 0 var(--brass-bright), inset 0 -10px 24px rgba(0,0,0,.5);
}
.marquee-inner{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 4px}
.wordmark{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1}
.brand-mophra{
  font-family:'Bungee Shade',cursive;
  font-size:clamp(40px,11vw,68px);
  letter-spacing:.04em;
  color:var(--brass-bright);
  text-shadow:
    0 0 10px var(--lamp-glow),
    0 0 26px var(--lamp-glow-soft);
  animation:signFlicker 7s infinite;
}
.brand-sub{
  font-family:'Bungee',sans-serif;
  font-size:clamp(9px,2.4vw,13px);
  letter-spacing:.28em;
  color:var(--cream);
  margin-top:8px;
  text-shadow:0 0 6px var(--lamp-glow);
}
@keyframes signFlicker{
  0%,100%{opacity:1}
  42%{opacity:1}43%{opacity:.55}44%{opacity:1}
  77%{opacity:1}78%{opacity:.4}79%{opacity:1}80%{opacity:.7}81%{opacity:1}
}

/* light bulbs */
.bulbs{display:flex;gap:0;justify-content:space-between;align-items:center}
.bulbs-top,.bulbs-bot{padding:0 6px}
.bulbs-left,.bulbs-right{flex-direction:column;align-self:stretch;gap:0;padding:2px 0}
.bulb{
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--lamp-hot), var(--lamp) 55%, var(--lamp-deep));
  box-shadow:0 0 5px 1px var(--lamp-glow), inset 0 -1px 2px rgba(0,0,0,.4);
}
.bulb.off{
  background:radial-gradient(circle at 35% 30%, var(--lamp-off-1), var(--lamp-off-2) 60%, #1a0e04);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5);
}

/* ---------- CABINET ---------- */
.cabinet{
  position:relative;
  background:
    linear-gradient(180deg,var(--cab-2),var(--cab-3) 60%,var(--cab-4));
  border:3px solid var(--brass);
  padding:22px clamp(16px,4vw,30px);
  box-shadow:
    inset 0 1px 0 var(--brass-bright),
    inset 0 0 0 6px rgba(0,0,0,.22),
    inset 0 -20px 40px rgba(0,0,0,.45);
}
.cabinet-shoulders{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 0% 0%, rgba(255,200,120,.10), transparent 60%),
    radial-gradient(60% 40% at 100% 0%, rgba(255,200,120,.10), transparent 60%);
}

/* ---------- GLASS / SCREEN ---------- */
.glass{
  position:relative;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--screen-2), var(--screen) 70%);
  border:2px solid var(--brass-deep);
  border-radius:16px;
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.5),
    inset 0 8px 30px rgba(0,0,0,.7),
    0 4px 0 rgba(255,240,196,.06);
  overflow:hidden;
  min-height:420px;
  display:flex;
}
.reel-shadow{position:absolute;left:0;right:0;height:46px;z-index:3;pointer-events:none}
.reel-shadow.top{top:0;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}
.reel-shadow.bottom{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.glare{
  position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:14px;
  background:linear-gradient(125deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 18%, transparent 40%);
  mix-blend-mode:screen;
}
.screen{
  position:relative;z-index:2;flex:1;
  padding:clamp(20px,4.5vw,34px);
  display:flex;flex-direction:column;
}

/* scanline texture on the glass */
.glass::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.18;
}

/* ---------- LEVER ---------- */
.lever{
  position:absolute;top:-6px;right:-34px;width:54px;height:200px;
  z-index:6;cursor:pointer;user-select:none;
  display:flex;flex-direction:column;align-items:center;
}
.lever-mount{
  position:absolute;bottom:0;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--brass-bright), var(--brass-deep) 70%, #3a2a0c);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.6);
  border:2px solid var(--brass-shadow);
}
.lever-arm{
  position:absolute;bottom:8px;width:14px;height:170px;
  transform-origin:bottom center;
  transition:transform .12s ease;
}
.lever-arm.pull{animation:leverPull .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes leverPull{
  0%{transform:rotate(0)}
  28%{transform:rotate(0) translateY(56px)}
  60%{transform:rotate(0) translateY(56px)}
  100%{transform:rotate(0) translateY(0)}
}
.lever-rod{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:11px;height:100%;border-radius:8px;
  background:linear-gradient(90deg,#7a5e22,#e9cf86 45%,#fff3cf 50%,#caa14a 56%,#6b5018);
  box-shadow:0 0 6px rgba(0,0,0,.5);
}
.lever-knob{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, var(--red-hot), var(--red) 55%, #8a1c0c 100%);
  box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 -3px 6px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,200,180,.6);
  border:1px solid #5a1206;
}
.lever-hint{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-family:'Bungee',sans-serif;font-size:10px;letter-spacing:.12em;color:var(--brass-bright);
  text-shadow:0 0 6px var(--lamp-glow);white-space:nowrap;
  animation:hintPulse 1.3s infinite;
}
.lever-hint.hidden{display:none}
@keyframes hintPulse{0%,100%{opacity:.35;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(-3px)}}
.lever.disabled{cursor:default}
.lever.disabled .lever-knob{filter:saturate(.5) brightness(.8)}

/* ---------- CONSOLE ---------- */
.console{
  background:linear-gradient(180deg,var(--cab-3),var(--cab-4));
  border:3px solid var(--brass);
  border-top:none;border-radius:6px 6px 22px 22px;
  padding:14px clamp(16px,4vw,26px) 18px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.4), inset 0 1px 0 var(--brass-deep);
}
.console-plate{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,#2a1308,#1a0c05);
  border:2px solid var(--brass-deep);
  border-radius:12px;padding:12px 14px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.7);
}
.credits{display:flex;flex-direction:column;gap:5px}
.credits-label{font-family:'Bungee',sans-serif;font-size:9px;letter-spacing:.2em;color:var(--brass)}

/* odometer */
.odometer{display:flex;gap:3px;background:#0a0603;padding:5px 6px;border-radius:6px;border:1px solid #000;box-shadow:inset 0 2px 6px #000}
.digit{
  position:relative;width:20px;height:30px;overflow:hidden;border-radius:3px;
  background:linear-gradient(180deg,#221406,#120a03);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 6px 8px rgba(0,0,0,.6), inset 0 -6px 8px rgba(0,0,0,.6);
}
.digit .strip{
  display:flex;flex-direction:column;align-items:center;
  transition:transform .55s cubic-bezier(.3,1.3,.4,1);
}
.digit .strip span{
  height:30px;line-height:30px;font-family:'Bungee',sans-serif;font-size:19px;
  color:var(--lamp-hot);text-shadow:0 0 6px var(--lamp-glow);
}
.digit::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 30%,transparent 70%,rgba(0,0,0,.55));}

/* coin slot */
.coinslot{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:5px;opacity:.9}
.coinslot-mouth{width:42px;height:9px;border-radius:5px;background:#0a0603;
  box-shadow:inset 0 2px 4px #000, 0 1px 0 rgba(255,240,196,.12);border:1px solid var(--brass-shadow)}
.coinslot-label{font-family:'Bungee',sans-serif;font-size:7.5px;letter-spacing:.14em;color:var(--brass-deep)}

/* mute */
.mute{
  width:42px;height:42px;flex:none;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 38% 32%, var(--brass-bright), var(--brass-deep) 75%);
  border:2px solid var(--brass-shadow);
  box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.4);
  color:#2a1308;font-size:18px;display:grid;place-items:center;transition:transform .1s, filter .2s;
}
.mute:hover{transform:translateY(-1px)}
.mute:active{transform:translateY(1px)}
.mute .mute-off{display:none}
.mute.muted{filter:saturate(.4) brightness(.78)}
.mute.muted .mute-on{display:none}
.mute.muted .mute-off{display:block;font-size:15px}

/* payout tray */
.tray{position:relative;margin-top:14px;height:30px}
.tray-mouth{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:62%;height:18px;border-radius:0 0 12px 12px;
  background:#0a0603;box-shadow:inset 0 4px 10px #000;border:2px solid var(--brass-deep);border-top:none;
}
.tray-lip{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:64%;height:6px;border-radius:4px;
  background:linear-gradient(180deg,var(--brass-bright),var(--brass-deep));box-shadow:0 2px 4px rgba(0,0,0,.5)}
.tray-slot{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:58%;display:flex;justify-content:center;z-index:2}

.maker{
  text-align:center;font-size:9px;letter-spacing:.22em;color:rgba(243,214,132,.34);
  margin-top:12px;font-family:'Bungee',sans-serif;
}

/* =========================================================
   SCREEN CONTENT (rendered into #stage)
   ========================================================= */
.screen-in{animation:reelIn .5s cubic-bezier(.2,.85,.25,1) both}
@keyframes reelIn{
  0%{transform:translateY(34px);filter:blur(3px)}
  60%{filter:blur(0)}
  100%{transform:translateY(0)}
}

.eyebrow{
  font-family:'Bungee',sans-serif;font-size:11px;letter-spacing:.18em;
  color:var(--lamp);text-shadow:0 0 6px var(--lamp-glow);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--lamp);box-shadow:0 0 6px var(--lamp)}
.eyebrow.char{color:var(--blue);text-shadow:0 0 8px rgba(127,168,201,.5)}
.eyebrow.char::before{background:var(--blue);box-shadow:0 0 6px var(--blue)}

h1{
  font-family:'Bungee Shade',cursive;font-weight:400;
  font-size:clamp(26px,6.6vw,40px);line-height:1.12;letter-spacing:.02em;
  color:var(--cream);margin-bottom:16px;
  text-shadow:0 0 22px rgba(255,180,60,.18);
}
h1 em{font-style:normal;color:var(--brass-bright);text-shadow:0 0 22px rgba(255,180,60,.5)}

.lede{color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:8px}
.lede strong{color:var(--cream);font-weight:700}
.lede .gold{color:var(--brass-bright)}

/* "MUST READ" attention badge above the intro rules — static, lit-sign style */
.must-read{
  align-self:center;margin:4px 0 15px;
  font-family:'Bungee',sans-serif;font-size:11px;letter-spacing:.22em;
  color:var(--brass-bright);
  background:rgba(255,166,38,.07);
  border:2px solid var(--lamp);
  padding:7px 20px;border-radius:999px;
  box-shadow:0 0 16px var(--lamp-glow),inset 0 0 12px rgba(255,166,38,.1);
  text-shadow:0 0 10px var(--lamp-glow);
}

/* intro stat plates */
.meta-row{display:flex;gap:10px;margin:22px 0 24px}
.meta{
  flex:1;text-align:center;background:linear-gradient(180deg,#2a1308,#1a0c05);
  border:2px solid var(--brass-deep);border-radius:10px;padding:12px 8px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.meta b{display:block;font-family:'Bungee',sans-serif;font-size:clamp(16px,4.4vw,21px);color:var(--lamp-hot);
  text-shadow:0 0 8px var(--lamp-glow)}
.meta small{display:block;color:var(--muted-dim);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}

/* form fields = brass nameplate */
label.fld{display:block;font-size:12px;color:var(--muted);margin:0 0 8px;letter-spacing:.04em;text-transform:uppercase}
input,textarea{
  width:100%;background:#0c0703;border:2px solid var(--brass-deep);border-radius:10px;
  padding:14px 16px;color:var(--cream);font-family:'Space Mono',monospace;font-size:15px;
  transition:border-color .2s, box-shadow .2s;resize:vertical;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.7);
}
input::placeholder,textarea::placeholder{color:var(--muted-dim)}
input:focus,textarea:focus{outline:none;border-color:var(--brass-bright);box-shadow:inset 0 2px 8px rgba(0,0,0,.7),0 0 0 3px rgba(243,214,132,.18)}
textarea{min-height:104px;line-height:1.6}
textarea.ticket{
  background:#0c0703;
  color:var(--cream);border-color:var(--brass-deep);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.7);
}
textarea.ticket::placeholder{color:var(--muted-dim)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:linear-gradient(180deg,var(--lamp-hot),var(--lamp) 40%,var(--lamp-low));
  color:#3a1606;border:2px solid var(--lamp-shadow);border-radius:12px;
  padding:15px 22px;font-family:'Bungee',sans-serif;font-weight:400;font-size:15px;letter-spacing:.04em;
  cursor:pointer;transition:transform .1s, box-shadow .25s, filter .15s;
  box-shadow:0 6px 0 var(--lamp-shadow), 0 10px 18px -8px var(--lamp-glow), inset 0 1px 0 rgba(255,255,255,.35);
  margin-top:22px;text-transform:uppercase;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--lamp-shadow), 0 4px 8px -4px var(--lamp-glow), inset 0 1px 0 rgba(255,255,255,.35)}
.btn[disabled]{opacity:.4;cursor:not-allowed;filter:grayscale(.4);transform:none;box-shadow:none}
.btn.ghost{
  background:transparent;color:var(--brass-bright);border:2px solid var(--brass-deep);
  box-shadow:0 4px 0 var(--brass-shadow);text-shadow:0 0 6px var(--lamp-glow);
}
.btn.ghost:hover{background:rgba(243,214,132,.08)}
.btn.ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brass-shadow)}

/* ---------- QUESTION ---------- */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.prog{flex:1;height:12px;background:#0a0603;border-radius:99px;overflow:hidden;border:1px solid #000;box-shadow:inset 0 2px 4px #000;padding:2px}
.prog i{display:block;height:100%;width:0;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--lamp) 0 7px,var(--lamp-low) 7px 9px);
  box-shadow:0 0 6px var(--lamp-glow);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.round-tag{font-family:'Bungee',sans-serif;font-size:10px;color:var(--brass);white-space:nowrap;letter-spacing:.08em}

.qcount{font-family:'Bungee',sans-serif;font-size:10px;letter-spacing:.12em;color:var(--muted-dim);margin-bottom:12px}
.qcount .tag{color:var(--lamp)}
.qcount.char .tag{color:var(--blue)}
.setup{font-size:15px;line-height:1.62;margin-bottom:18px;font-weight:400;color:#e8ddc2}
.setup .hl{color:#8fd6e6;font-weight:700}

.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  text-align:left;background:linear-gradient(180deg,var(--opt-1),var(--opt-2));
  border:2px solid var(--brass-deep);border-radius:11px;padding:15px 16px 15px 46px;
  color:#e3d6af;font-family:'Space Mono',monospace;font-size:13.5px;line-height:1.6;cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s,box-shadow .15s,color .15s;position:relative;
  box-shadow:0 3px 0 rgba(0,0,0,.4);
}
.opt::before{
  content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5a3e1c,#241608);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);transition:all .18s;
}
@media (hover:hover){
  .opt:hover{border-color:var(--brass);background:linear-gradient(180deg,var(--opt-h-1),var(--opt-h-2));transform:translateY(-1px);color:#fff}
  .opt:hover::before{background:radial-gradient(circle at 35% 30%,var(--lamp-hot),var(--lamp-deep));box-shadow:0 0 8px var(--lamp-glow)}
}
.opt.picked{border-color:var(--lamp);background:linear-gradient(180deg,var(--opt-p-1),var(--opt-p-2));box-shadow:0 0 0 1px var(--lamp),0 3px 0 rgba(0,0,0,.4);color:#fff}
.opt.picked::before{background:radial-gradient(circle at 35% 30%,var(--lamp-hot),var(--lamp) 60%,var(--lamp-deep));box-shadow:0 0 9px 1px var(--lamp-glow)}
.opt.locked{cursor:default}
.opt.locked:not(.picked){opacity:.5}
.opt.dim{opacity:.5}

/* readout / feedback */
.fb{
  margin-top:16px;padding:14px 16px;border-radius:11px;
  background:linear-gradient(180deg,#241808,#160d04);
  border:2px solid var(--brass-deep);border-left:4px solid var(--lamp);
  font-size:13.5px;line-height:1.55;color:var(--cream-dim);display:none;
}
.fb.show{display:block;animation:reelIn .4s both}
.fb .pts{display:block;margin-top:10px;text-align:right;font-family:'Bungee',sans-serif;color:var(--lamp-hot);font-size:10px;letter-spacing:.06em;opacity:.6;text-shadow:0 0 6px var(--lamp-glow)}
.fb.char{border-left-color:var(--blue)}
.fb.char .pts{color:var(--blue);text-shadow:0 0 8px rgba(127,168,201,.6)}

.step-note{font-size:12px;color:var(--muted-dim);margin-top:10px;line-height:1.5}
.err{color:var(--bad);font-size:12px;margin-top:8px;display:none}
.err.show{display:block;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* =========================================================
   RESULTS
   ========================================================= */
.result-eyebrow{font-family:'Bungee',sans-serif;font-size:11px;letter-spacing:.16em;color:var(--brass);text-align:center;margin-bottom:6px}

/* spinning reel window */
.reels{
  display:flex;gap:8px;justify-content:center;margin:8px 0 18px;
  padding:10px;border-radius:14px;
  background:linear-gradient(180deg,#0c0703,#160d05);
  border:2px solid var(--brass-deep);box-shadow:inset 0 4px 14px rgba(0,0,0,.7);
}
.reel{
  width:clamp(64px,20vw,86px);height:clamp(72px,22vw,96px);overflow:hidden;border-radius:8px;
  background:linear-gradient(180deg,#f4e7c9,#e3d0a4);
  box-shadow:inset 0 0 0 2px var(--brass-deep), inset 0 6px 10px rgba(0,0,0,.3), inset 0 -6px 10px rgba(0,0,0,.3);
  position:relative;
}
.reel .strip{display:flex;flex-direction:column;will-change:transform}
.reel .sym{
  height:clamp(72px,22vw,96px);display:grid;place-items:center;
  font-family:'Bungee',sans-serif;font-size:clamp(34px,10vw,46px);color:var(--ox);
}
.reel .sym.gold{color:var(--brass-deep)}
.reel .sym.red{color:var(--red)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 28%,transparent 72%,rgba(0,0,0,.28))}

.payout-line{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 14px;
}
.payout-num{
  font-family:'Bungee Shade',cursive;font-size:clamp(50px,15vw,74px);line-height:1;
  color:var(--lamp-hot);text-shadow:0 0 20px var(--lamp-glow);
}
.payout-pct{font-family:'Bungee',sans-serif;font-size:24px;color:var(--brass);align-self:flex-start;margin-top:8px}
.payout-label{font-family:'Bungee',sans-serif;font-size:10px;letter-spacing:.2em;color:var(--muted-dim);text-align:center;margin-bottom:14px}

.verdict{text-align:center;font-family:'Bungee Shade',cursive;font-size:clamp(24px,6.4vw,34px);margin:10px 0 8px;line-height:1.15;letter-spacing:.01em}
.verdict.pass{color:var(--lamp-hot);text-shadow:0 0 22px var(--lamp-glow)}
.verdict.fail{color:var(--cream);text-shadow:0 2px 0 #2a0c0a}
.verdict-sub{text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:22px}

.sec-label{font-family:'Bungee',sans-serif;font-size:10px;letter-spacing:.16em;color:var(--muted-dim);
  margin:24px 0 14px;border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;gap:8px}

.bars{display:flex;flex-direction:column;gap:13px}
.bar label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}
.bar label b{color:var(--cream);font-family:'Bungee',sans-serif;font-size:11px}
.bar .track{height:12px;background:#0a0603;border-radius:99px;overflow:hidden;border:1px solid #000;box-shadow:inset 0 2px 4px #000;padding:2px}
.bar .track i{display:block;height:100%;width:0;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--lamp) 0 6px,var(--lamp-low) 6px 8px);
  box-shadow:0 0 6px var(--lamp-glow);transition:width 1s cubic-bezier(.2,.8,.2,1)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:rgba(127,168,201,.1);border:2px solid rgba(127,168,201,.4);color:var(--blue);
  border-radius:99px;padding:7px 14px;font-size:12px;font-weight:700;animation:reelIn .4s both;
}

/* "what you took away" — learning recap shown to everyone */
.learned{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.learned li{position:relative;padding-left:22px;font-size:13px;line-height:1.55;color:var(--cream-dim)}
.learned li::before{content:"→";position:absolute;left:0;top:0;color:var(--lamp-hot);font-weight:700}

.unlock{border-top:1px solid var(--line);margin-top:24px;padding-top:22px}
.unlock h3{font-family:'Bungee',sans-serif;font-size:17px;letter-spacing:.04em;margin-bottom:10px;color:var(--cream);text-transform:uppercase}
.unlock h3.lock,.unlock h3 .lock{color:var(--lamp-hot);text-shadow:0 0 12px var(--lamp-glow)}

/* printed ticket (reference number) */
.ticket-out{
  margin:18px 0;position:relative;
  background:repeating-linear-gradient(180deg,#f6ead0 0 26px,#eaddbf 26px 27px);
  color:#2a1810;border-radius:6px;padding:18px 16px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.08);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),96% 100%,92% calc(100% - 7px),88% 100%,84% calc(100% - 7px),80% 100%,76% calc(100% - 7px),72% 100%,68% calc(100% - 7px),64% 100%,60% calc(100% - 7px),56% 100%,52% calc(100% - 7px),48% 100%,44% calc(100% - 7px),40% 100%,36% calc(100% - 7px),32% 100%,28% calc(100% - 7px),24% 100%,20% calc(100% - 7px),16% 100%,12% calc(100% - 7px),8% 100%,4% calc(100% - 7px),0 100%);
}
.ticket-out .t-head{font-family:'Bungee',sans-serif;font-size:10px;letter-spacing:.16em;color:#8a3a14;text-align:center;margin-bottom:8px}
.ticket-out .t-ref{font-family:'Bungee',sans-serif;font-size:clamp(15px,4.6vw,22px);letter-spacing:.02em;color:#2a1006;text-align:center;word-break:break-all;line-height:1.25}
.ticket-out .t-foot{font-size:10px;color:#7a5a36;text-align:center;margin-top:8px;letter-spacing:.08em}
.ticket-print{animation:print 1.1s cubic-bezier(.2,.8,.2,1) both;transform-origin:top center}
@keyframes print{0%{transform:scaleY(0);opacity:.4}100%{transform:scaleY(1);opacity:1}}

.send-to{font-size:13.5px;color:var(--cream-dim);line-height:1.65;margin-top:8px}
.send-to b{color:var(--brass-bright)}
.tiny{font-size:11.5px;color:var(--muted-dim);text-align:center;margin-top:16px;line-height:1.5}

/* =========================================================
   THEME PICKER (small brass plate in the console)
   ========================================================= */
.themepick{
  display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:99px;
  background:#0a0603;border:1px solid var(--brass-shadow);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
}
.t-tile{
  width:18px;height:18px;border-radius:50%;cursor:pointer;padding:0;
  border:2px solid var(--brass-shadow);
  background:linear-gradient(135deg, var(--tc1), var(--tc2));
  box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.12);
  transition:transform .12s, box-shadow .2s, border-color .2s;
}
.t-tile[data-th="oxblood"]{--tc1:#5a1812;--tc2:#330d0a}
.t-tile[data-th="felt"]{--tc1:#2a5a3c;--tc2:#13321d}
.t-tile[data-th="arcade"]{--tc1:#0a0c30;--tc2:#02041a;position:relative}
.t-tile[data-th="arcade"]::after{
  content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;
  transform:translate(-50%,-50%);background:#ffcc00;box-shadow:0 0 4px rgba(255,204,0,.8);
}
.t-tile:hover{transform:translateY(-1px);border-color:var(--brass)}
.t-tile.active{border-color:var(--brass-bright);box-shadow:0 0 0 2px var(--brass-shadow),0 0 6px var(--lamp-glow)}
.t-tile:focus-visible{outline:none;border-color:var(--brass-bright)}

/* =========================================================
   FX LAYERS
   ========================================================= */
#coinLayer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.coin{
  position:absolute;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #f5dca0, #e3c172 55%, #9a7b22);
  box-shadow:inset 0 0 0 2px rgba(255,240,196,.5), 0 2px 4px rgba(0,0,0,.5);
  will-change:transform,opacity;
}
.coin::after{content:"$";position:absolute;inset:0;display:grid;place-items:center;font-family:'Bungee',sans-serif;font-size:11px;color:#7a5f1c}

.pop{
  position:fixed;font-family:'Bungee',sans-serif;color:var(--lamp-hot);font-size:24px;
  pointer-events:none;z-index:62;text-shadow:0 0 16px rgba(255,180,60,.8);
  animation:floatup 1s ease-out forwards;
}
@keyframes floatup{0%{opacity:0;transform:translateY(6px) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.15)}}

#flashLayer{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 40%,rgba(255,210,120,.5),transparent 60%)}
#flashLayer.flash{animation:flashfx .5s ease-out}
@keyframes flashfx{0%{opacity:0}15%{opacity:1}100%{opacity:0}}

.shake{animation:cabShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes cabShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:560px){
  .lever{right:-22px;width:40px;height:160px}
  .lever-arm{height:130px;width:12px}
  .lever-knob{width:28px;height:28px}
  .lever-mount{width:24px;height:24px}
  .bulbs-left,.bulbs-right{display:none}
  .glass{min-height:380px}
  .cabinet{padding:20px 16px}
}
@media (max-width:380px){
  .opt{padding-left:40px;font-size:13px}
  .lever{right:-14px}
  .coinslot{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important}
  .screen-in,.fb.show{animation:none}
}

/* toned-down (less bright) machine frame border */
.marquee,.cabinet,.console{border-color:#1e93ad}