/* The stage — mortuary vaudeville. Bone type on black velvet, blood red, embalming green. */
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  background:#07050a; color:#f3ecd9; overflow:hidden;
  font-family:"Public Sans",-apple-system,sans-serif;
}
.stage{
  position:relative; width:100vw; height:100vh; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 8%, #221a2e 0%, #120d1a 55%, #0a0710 100%);
}
.stage.mode-red{background:radial-gradient(120% 130% at 50% 10%, #3a1216 0%, #200a0d 55%, #120507 100%)}
.stage.mode-green{background:radial-gradient(120% 130% at 50% 8%, #16301f 0%, #0d1d12 55%, #070f09 100%)}

.wm{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Alfa Slab One",serif; color:rgba(243,236,217,.05); font-size:24vw; line-height:.9;
  transform:rotate(-4deg); user-select:none; pointer-events:none; text-align:center;
}
.roomchip{
  position:absolute; top:3.2vh; right:2.2vw; text-align:right; z-index:5;
  font-family:"IBM Plex Mono",monospace; font-size:1.5vw; line-height:1.5; color:#b9aecb;
}
.roomchip b{display:block; font-size:2.3vw; color:#f3ecd9; letter-spacing:.14em}

.scene{position:absolute; inset:0; z-index:2}
[hidden]{display:none !important}

/* ---------- lobby ---------- */
.logo{text-align:center; margin-top:5vh}
.logo .l1{font-family:"Alfa Slab One",serif; font-size:4.6vw; line-height:1.05; letter-spacing:.005em}
.logo .l2{font-family:"Alfa Slab One",serif; font-size:6.2vw; line-height:1.0; color:#e23b41;
  text-shadow:0 .4vw 0 rgba(0,0,0,.5)}
.ekg{width:32vw; margin:1.6vh auto 0; display:block}
.ekg path{stroke:#e23b41; stroke-width:2.5; fill:none; stroke-linecap:round}

.joinrow{display:flex; gap:4vw; align-items:flex-start; justify-content:center; margin-top:4.5vh; padding:0 6vw}
.qrcard{text-align:center; flex:0 0 auto}
.qrcard img{width:15vw; height:15vw; border-radius:1vw; background:#f3ecd9; padding:.55vw;
  box-shadow:0 0 3vw rgba(236,184,79,.15)}
.qrcard .u{font-family:"IBM Plex Mono",monospace; font-size:1.1vw; margin-top:1.2vh; letter-spacing:.04em; color:#f3ecd9;
  max-width:22vw; overflow-wrap:anywhere; line-height:1.35}
.qrcard .r{font-family:"Alfa Slab One",serif; font-size:3.6vw; color:#ecb84f; letter-spacing:.2em; line-height:1.15}

.graves{display:grid; grid-template-columns:repeat(4, 11.5vw); gap:1.4vw; align-content:start}
.grave{
  background:rgba(243,236,217,.07); border:.18vw solid rgba(243,236,217,.2);
  border-radius:2.2vw 2.2vw .5vw .5vw; text-align:center; padding:1.9vw .6vw 1.2vw; min-height:8.5vw;
}
.grave .who{font-weight:700; font-size:1.35vw; letter-spacing:.06em; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grave .st{font-family:"IBM Plex Mono",monospace; font-size:1vw; color:#49e08e; margin-top:.7vw}
.grave.empty{opacity:.35; border-style:dashed}
.grave.empty .st{color:#b9aecb}
.grave.away .st{color:#e23b41}
.grave .who::before{
  content:""; display:block; width:2.6vw; height:1.5vw; margin:0 auto .8vw;
  background:rgba(243,236,217,.25); border-radius:1.3vw 1.3vw 0 0;   /* tiny headstone */
}
.lobbyfoot{
  position:absolute; bottom:4vh; left:0; right:0; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:1.2vw; letter-spacing:.18em; color:#b9aecb;
}
.modechips{font-family:"IBM Plex Mono",monospace; font-size:1.05vw; letter-spacing:.2em; color:#ecb84f; margin-top:1.4vh}
.tvcontrols{
  position:absolute; left:3vw; bottom:9vh; display:flex; align-items:flex-end; gap:1.6vw; z-index:5;
}
.tcgroup{display:flex; flex-direction:column; gap:.6vh}
.tclabel{font-family:"IBM Plex Mono",monospace; font-size:.85vw; letter-spacing:.22em; color:#b9aecb}
.tcrow{display:flex; gap:.6vw}
.tcbtn{
  font:600 1vw "Public Sans",sans-serif; color:#f3ecd9; background:rgba(243,236,217,.07);
  border:.14vw solid rgba(243,236,217,.22); border-radius:.8vw; padding:.7vw 1.1vw; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:.2vw; text-align:left;
}
.tcbtn small{font:500 .7vw "IBM Plex Mono",monospace; color:#b9aecb; letter-spacing:.04em}
.tcbtn:hover{border-color:#ecb84f}
.tcbtn.on{background:#e23b41; border-color:#e23b41}
.tcbtn.on small{color:#ffd9d2}
.tcbtn.go{background:#1f8a55; border-color:#1f8a55; font-size:1.15vw; padding:1vw 1.6vw; letter-spacing:.06em}
.lobbyline{
  position:absolute; bottom:24vh; left:14vw; right:14vw; text-align:center; min-height:5vh;
  font-size:1.8vw; font-style:italic; color:#f3ecd9; text-wrap:balance;
}
.wagerstrip{position:absolute; bottom:8vh; left:0; right:0; text-align:center}
.wagerstrip .wtitle{font-family:"IBM Plex Mono",monospace; font-size:1.2vw; letter-spacing:.2em; color:#ecb84f; margin-bottom:1.4vh}
.wagerstrip .wchips{display:flex; justify-content:center; gap:1.2vw; flex-wrap:wrap}
.wchip{font-family:"IBM Plex Mono",monospace; font-size:1.1vw; padding:.6vh 1.2vw; border-radius:2vw;
  border:.15vw solid rgba(243,236,217,.25); color:#b9aecb}
.wchip b{color:#f3ecd9}
.wchip.on{border-color:#49e08e; color:#49e08e}
.podline{text-align:center; font-size:1.6vw; font-style:italic; color:#f3ecd9; margin-top:2vh; padding:0 14vw; min-height:4vh}

/* ---------- intro ---------- */
.introcard{text-align:center; margin-top:22vh; padding:0 10vw}
.introcard .ep{font-family:"IBM Plex Mono",monospace; letter-spacing:.34em; font-size:1.6vw; color:#b9aecb}
.introcard .topic{font-family:"Alfa Slab One",serif; font-size:5vw; line-height:1.08; color:#ffd9d2;
  margin-top:1.6vh; text-shadow:0 .5vw 0 rgba(0,0,0,.5); text-wrap:balance}
.introcard .mort{font-size:1.9vw; font-style:italic; color:#cfc6de; margin-top:3.5vh; text-wrap:balance}

/* ---------- question ---------- */
.qnum{position:absolute; top:3vh; left:2.6vw; font-family:"Alfa Slab One",serif; font-size:4.6vw; color:#5f5477}
.qtext{
  margin:7vh 11vw 0; text-align:center; font-weight:700; font-size:2.5vw; line-height:1.3;
  color:#ffd9d2; text-wrap:balance;
}
.answers{margin:3.5vh 16vw 0; display:flex; flex-direction:column; gap:1.6vh}
.ans{display:flex; align-items:center; gap:1.4vw; font-size:2.1vw; font-weight:600; transition:opacity .3s}
.ans .letter{font-family:"Alfa Slab One",serif; color:#e23b41; width:2.4vw; flex:none}
.ans .who{font-family:"IBM Plex Mono",monospace; font-size:1.15vw; color:#e88a8d; margin-left:1vw}
.ans.right{color:#49e08e} .ans.right .letter{color:#49e08e}
.ans.dim{opacity:.35}
.mortline{
  position:absolute; left:14vw; right:14vw; bottom:19vh; text-align:center;
  font-size:1.75vw; font-style:italic; color:#f3ecd9; background:rgba(0,0,0,.42);
  border:1px solid rgba(243,236,217,.18); border-radius:1vw; padding:1.2vw 2vw; text-wrap:balance;
}
.penaltycard{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; z-index:3;
  background:rgba(58,18,22,.92); border:.25vw solid #e23b41; border-radius:1.4vw; padding:2.2vw 3.5vw;
  box-shadow:0 0 4vw rgba(226,59,65,.35); min-width:36vw;
}
.penaltycard .ptitle{font-family:"IBM Plex Mono",monospace; font-size:1.5vw; letter-spacing:.3em; color:#ffd9d2}
.penaltycard .pnames{font-family:"Alfa Slab One",serif; font-size:4.4vw; line-height:1.15; color:#ecb84f; margin-top:1vw;
  text-shadow:0 .4vw 0 rgba(0,0,0,.5)}
@media (prefers-reduced-motion: no-preference){
  .penaltycard{animation:slam .35s cubic-bezier(.2,1.4,.4,1) both}
  @keyframes slam{from{transform:translate(-50%,-50%) scale(1.6); opacity:0} to{transform:translate(-50%,-50%) scale(1); opacity:1}}
}
.timerbar{position:absolute; left:0; right:0; bottom:14.5vh; height:.7vh; background:rgba(243,236,217,.12)}
.timerbar i{position:absolute; left:0; top:0; bottom:0; width:100%; background:#e23b41; display:block}

/* timer skin: burning fuse */
.timerbar.fuse{height:.9vh; background:rgba(243,236,217,.07)}
.timerbar.fuse i{background:linear-gradient(90deg,#3a1216,#e23b41 65%,#ecb84f)}
.timerbar.fuse i::after{content:""; position:absolute; right:-.5vw; top:50%; transform:translateY(-50%);
  width:1vw; height:1vw; border-radius:50%; background:#ffd98a;
  box-shadow:0 0 1.4vw .35vw rgba(236,184,79,.85)}

/* timer skin: countdown ring */
.timerring{position:absolute; right:3vw; bottom:17vh; width:8.5vw; height:8.5vw}
.ringbg{fill:none; stroke:rgba(243,236,217,.12); stroke-width:7}
.ringfg{fill:none; stroke:#e23b41; stroke-width:7; stroke-linecap:round;
  stroke-dasharray:276.46; stroke-dashoffset:0; transform:rotate(-90deg); transform-origin:50% 50%;
  filter:drop-shadow(0 0 .5vw rgba(226,59,65,.55))}
.timerring text{fill:#f3ecd9; font-family:"Alfa Slab One",serif; font-size:34px}

/* ---------- rail ---------- */
.rail{
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  display:flex; justify-content:center; gap:2vw; padding:0 3vw 2.6vh;
}
.seat{text-align:center; min-width:9vw}
.seat .n{font-family:"Alfa Slab One",serif; font-size:3.2vw; line-height:1; color:#8f7fae}
.seat .nm{font-size:1.15vw; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#cfc6de}
.seat .bpm{font-family:"IBM Plex Mono",monospace; font-size:1.35vw; color:#49e08e}
.seat .bpm.neg{color:#e23b41}
.seat .delta{font-family:"IBM Plex Mono",monospace; font-size:1.2vw; display:block; min-height:1.5vw}
.seat .delta.pos{color:#49e08e} .seat .delta.negd{color:#e23b41}
.seat.lead .n{color:#ecb84f}
.seat.away{opacity:.45}
.seat.answered .n{color:#49e08e}
.seat .tick{font-family:"IBM Plex Mono",monospace; font-size:1vw; color:#b9aecb; min-height:1.3vw; display:block}

/* ---------- podium ---------- */
.winline{
  text-align:center; margin-top:9vh; font-family:"Alfa Slab One",serif; font-size:6vw;
  color:#ecb84f; text-shadow:0 .5vw 0 rgba(0,0,0,.5);
}
.awards{text-align:center; font-size:1.6vw; color:#cfc6de; margin-top:2.2vh; padding:0 10vw}
.awards b{color:#f3ecd9}
.podium{
  position:absolute; bottom:16vh; left:0; right:0;
  display:flex; align-items:flex-end; justify-content:center; gap:2.2vw;
}
.pod{width:12vw; text-align:center}
.pod .who{font-weight:700; font-size:1.5vw; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.6vw}
.pod .bar{
  background:rgba(243,236,217,.12); border:.18vw solid rgba(243,236,217,.25);
  border-radius:.8vw .8vw 0 0; display:flex; align-items:flex-start; justify-content:center;
}
.pod .amt{font-family:"IBM Plex Mono",monospace; font-size:1.3vw; color:#49e08e; padding:.8vw 0}
.pod .amt.neg{color:#e23b41}
.pod.win .bar{border-color:#ecb84f; background:rgba(236,184,79,.16); box-shadow:0 0 3vw rgba(236,184,79,.25)}
.pod.win .who{color:#ecb84f}

@media (prefers-reduced-motion: no-preference){
  .scene{animation:fadein .35s ease-out}
  @keyframes fadein{from{opacity:0} to{opacity:1}}
}