:root { --red:#ff2a2a; --gold:#f5c518; --navy:#0b1a33; --white:#f6f6f6; --green:#3ddc84; --accent:var(--red); }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#000; overflow:hidden; }
body { font-family:Impact,"Arial Black","Helvetica Neue",Arial,sans-serif; color:var(--white); letter-spacing:.02em; }
body.hero { --accent:var(--gold); }

/* 16:9 stage that scales to any window. Everything inside uses cqh/cqw. */
#stage { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(100vw,177.7778vh); aspect-ratio:16/9; container-type:size; overflow:hidden; background:#000; }
#stage.shake { animation:shake .35s; }
@keyframes shake { 20%{transform:translate(calc(-50% - 10px),-50%)} 40%{transform:translate(calc(-50% + 10px),calc(-50% + 4px))} 60%{transform:translate(calc(-50% - 6px),-50%)} 80%{transform:translate(calc(-50% + 4px),-50%)} }

.bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .8s; }
#bg-red { background-image:url(assets/bg-red.jpg); }
#bg-rink { background-image:url(assets/bg-rink.jpg); }
#bg-navy { background-image:url(assets/bg-navy.jpg); }
/* Title = the bro's red showroom, fight and results = the main stage (hockey rink). bg-navy is kept as a spare. */
#stage[data-screen="title"] #bg-red, #stage[data-screen="play"] #bg-rink, #stage[data-screen="result"] #bg-rink { opacity:1; }
.shade { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%, transparent 40%, rgba(0,0,0,.55)); transition:background .4s; }
#stage[data-screen="result"] .shade { background:rgba(0,0,0,.6); }
#stage[data-screen="title"] .shade { background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, transparent); }

.screen { position:absolute; inset:0; display:none; }
.screen.active { display:block; }

/* ---------- Villain ---------- */
#villain { position:absolute; bottom:0; width:75cqh; height:100cqh; transform:translateX(-50%); transform-origin:50% 100%; transition:left .5s, height .5s, bottom .5s, width .5s; pointer-events:none; }
#stage[data-screen="title"] #villain  { left:76%; height:94cqh; width:70.5cqh; }
#stage[data-screen="play"] #villain   { left:72%; height:82cqh; width:61.5cqh; bottom:-8cqh; }
#stage[data-screen="result"] #villain { left:80%; height:76cqh; width:57cqh; }
.v { position:absolute; left:0; bottom:0; width:100%; height:100%; object-fit:contain; object-position:50% 100%; opacity:0; filter:drop-shadow(0 1.5cqh 2cqh rgba(0,0,0,.6)); }
.v-ko { width:140%; left:-20%; height:75%; }
.pose-idle .v-idle, .pose-hit .v-hit, .pose-attack .v-attack, .pose-win .v-win, .pose-ko .v-ko { opacity:1; }
.pose-idle { animation:bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateX(-50%) translateY(-1cqh) scaleY(1.01); } }
.pose-hit { animation:recoil .5s; }
@keyframes recoil { 30% { transform:translateX(-46%) rotate(3deg); } }
.pose-attack { animation:lunge .6s; }
@keyframes lunge { 35% { transform:translateX(-72%) scale(1.12); } }
#villain.flash .v { filter:brightness(2) drop-shadow(0 0 2cqh #fff); }

/* ---------- Badge (player) ---------- */
#badge { position:absolute; width:20cqh; left:24%; top:36cqh; display:none; transform:translateX(-50%); animation:float 2s ease-in-out infinite; filter:drop-shadow(0 1cqh 2cqh rgba(0,0,0,.6)); }
#stage[data-screen="play"] #badge { display:block; }
@keyframes float { 50% { transform:translateX(-50%) translateY(-1.5cqh); } }
#badge.lunge { animation:badge-lunge .5s; }
@keyframes badge-lunge { 40% { transform:translateX(calc(-50% + 30cqw)) scale(1.25); } }
#badge.hurt { animation:badge-hurt .5s; filter:drop-shadow(0 0 3cqh var(--red)) brightness(.8); }
@keyframes badge-hurt { 30% { transform:translateX(-62%) rotate(-12deg); } 60% { transform:translateX(-45%) rotate(6deg); } }

/* ---------- Effects ---------- */
.fx { position:absolute; display:none; pointer-events:none; }
#fx-burst { width:26cqh; left:68%; top:30cqh; transform:translate(-50%,-50%); }
#fx-burst.go { display:block; animation:burst .5s forwards; }
@keyframes burst { 0%{transform:translate(-50%,-50%) scale(.2);opacity:1} 60%{transform:translate(-50%,-50%) scale(1.2);opacity:1} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }
#fx-shield { width:24cqh; left:68%; top:32cqh; transform:translate(-50%,-50%); }
#fx-shield.go { display:block; animation:pop 1s forwards; }
@keyframes pop { 0%{transform:translate(-50%,-50%) scale(0);opacity:0} 25%{transform:translate(-50%,-50%) scale(1.2);opacity:1} 70%{transform:translate(-50%,-50%) scale(1);opacity:1} 100%{transform:translate(-50%,-70%) scale(1);opacity:0} }
#fx-dust { width:24cqh; left:24%; top:46cqh; transform:translate(-50%,-50%); }
#fx-dust.go { display:block; animation:pop .7s forwards; }
#fx-poop { font-size:13cqh; line-height:1; left:68%; top:20cqh; transform:translate(-50%,-50%); filter:drop-shadow(0 1cqh 1cqh rgba(0,0,0,.5)); }
#fx-poop.go { display:block; animation:poop-fly 1s forwards; }
@keyframes poop-fly {
  0% { left:26%; top:44cqh; transform:translate(-50%,-50%) scale(.2) rotate(0); opacity:1; }
  35% { left:69%; top:30cqh; transform:translate(-50%,-50%) scale(1.1) rotate(385deg); opacity:1; }
  45% { transform:translate(-50%,-50%) scale(1.4) rotate(385deg); }
  75% { left:69%; top:34cqh; transform:translate(-50%,-50%) scale(1.3) rotate(385deg); opacity:1; }
  100% { left:69%; top:48cqh; transform:translate(-50%,-50%) scale(1.2) rotate(385deg); opacity:0; }
}
#stamp { position:absolute; left:50%; top:42cqh; transform:translate(-50%,-50%) rotate(-6deg); font-size:14cqh; text-transform:uppercase; white-space:nowrap; opacity:0; pointer-events:none; -webkit-text-stroke:.6cqh #000; paint-order:stroke fill; text-shadow:0 1cqh 0 #000; }
#stamp.go { animation:stamp 1.1s forwards; }
#stamp.bs { color:var(--red); } #stamp.legit { color:var(--green); } #stamp.miss { color:#fff; }
@keyframes stamp { 0%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(3)} 18%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)} 80%{opacity:1} 100%{opacity:0;transform:translate(-50%,-62%) rotate(-6deg) scale(1)} }
#combo { position:absolute; left:4%; top:22cqh; font-size:7cqh; color:var(--gold); opacity:0; -webkit-text-stroke:.4cqh #000; paint-order:stroke fill; }
#combo.go { animation:combo 1.2s forwards; }
@keyframes combo { 0%{opacity:0;transform:scale(2)} 20%{opacity:1;transform:scale(1)} 80%{opacity:1} 100%{opacity:0} }

/* ---------- Title ---------- */
.title-block { position:absolute; left:5%; top:50%; transform:translateY(-50%); width:55%; }
.kicker { text-transform:uppercase; color:var(--accent); font-size:2.6cqh; margin:0 0 1.5cqh; letter-spacing:.25em; }
h1 { margin:0; text-transform:uppercase; line-height:.95; display:flex; flex-direction:column; }
.t-bro { font-size:15cqh; color:var(--red); -webkit-text-stroke:.8cqh #000; paint-order:stroke fill; text-shadow:0 1.2cqh 0 #000, 0 0 5cqh rgba(255,42,42,.6); }
.t-vs { font-size:6cqh; color:#fff; margin:.5cqh 0; }
.t-bs { font-size:10cqh; color:var(--gold); -webkit-text-stroke:.6cqh #000; paint-order:stroke fill; text-shadow:0 1cqh 0 #000, 0 0 4cqh rgba(245,197,24,.5); }
.sub { font:700 3.2cqh Arial,sans-serif; margin:2cqh 0 0; opacity:.92; text-shadow:0 2px 6px #000; }
.howto { display:flex; gap:3cqw; font-size:5cqh; margin-top:3cqh; }
.key { background:#111; border:.4cqh solid var(--accent); padding:.2em .5em; border-radius:.3em; margin-right:.3em; }
.bs { color:var(--red); } .legit { color:var(--gold); }
.prompt { font-size:4cqh; margin:4cqh 0 0; color:var(--gold); text-transform:uppercase; text-shadow:0 2px 6px #000; }
.pulse { animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.export { position:absolute; bottom:1.5cqh; left:2cqw; font:14px Arial,sans-serif; opacity:.55; margin:0; }
.export a { color:inherit; }

/* ---------- HUD ---------- */
.hud { position:absolute; top:3cqh; left:3cqw; right:3cqw; display:flex; align-items:flex-start; justify-content:space-between; gap:2cqw; }
.side { flex:1; display:flex; flex-direction:column; gap:.8cqh; }
.side.right { align-items:flex-end; }
.name { font-size:4cqh; text-transform:uppercase; -webkit-text-stroke:.4cqh #000; paint-order:stroke fill; text-shadow:0 .6cqh 0 #000; }
.side.left .name { color:var(--gold); } .side.right .name { color:var(--red); }
.segbar { display:flex; gap:.6cqw; width:100%; max-width:36cqw; transform:skewX(-14deg); }
.side.right .segbar { flex-direction:row-reverse; transform:skewX(14deg); }
.seg { flex:1; height:4.6cqh; background:#222; border:.35cqh solid #000; box-shadow:0 0 0 .3cqh #fff; transition:background .3s, opacity .3s; }
.seg.on { background:linear-gradient(#ffe36b,var(--gold) 50%,#c79a00); }
.villain-bar .seg.on { background:linear-gradient(#ff7b7b,var(--red) 50%,#a30000); }
.seg.off { opacity:.25; background:#000; }
.timer { text-align:center; min-width:14cqh; background:rgba(5,8,20,.72); border:.4cqh solid var(--gold); border-radius:1.2cqh; padding:.6cqh 1.2cqh; }
.timer span { display:block; font:700 2cqh Arial,sans-serif; text-transform:uppercase; letter-spacing:.2em; text-shadow:0 2px 4px #000; }
.timer b { display:block; font-size:10cqh; line-height:1; -webkit-text-stroke:.5cqh #000; paint-order:stroke fill; text-shadow:0 .8cqh 0 #000; }
.timer b.low { color:var(--red); animation:pulse .5s infinite; }

/* ---------- Claim panel ---------- */
.panel { position:absolute; left:4cqw; right:4cqw; bottom:3cqh; height:30cqh; display:flex; align-items:stretch; background:rgba(8,8,12,.88); border:.6cqh solid var(--accent); border-radius:1.4cqh; box-shadow:0 0 5cqh rgba(0,0,0,.7); overflow:hidden; transition:border-color .3s; }
.panel.right { border-color:var(--green); } .panel.wrong { border-color:var(--red); }
.timebar { position:absolute; top:0; left:0; right:0; height:1.3cqh; background:#000; }
#timebar-fill { height:100%; width:100%; background:var(--gold); }
#timebar-fill.low { background:var(--red); }
.chip { width:15cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1cqh; font-size:7cqh; }
.chip .btn { font-size:3cqh; background:rgba(255,255,255,.15); padding:.2em .6em; border-radius:.4em; }
.bs-chip { background:var(--red); color:#fff; } .legit-chip { background:var(--gold); color:#000; }
.legit-chip .btn { background:rgba(0,0,0,.15); }
.panel-mid { flex:1; display:flex; flex-direction:column; justify-content:center; padding:2cqh 2.5cqw; text-align:center; gap:1cqh; }
.says { font:700 2cqh Arial,sans-serif; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); margin:0; }
.claim { font-size:5.4cqh; line-height:1.12; margin:0; }
.claim mark { background:none; color:var(--gold); border-bottom:.5cqh solid var(--red); }
.feedback { font:700 2.6cqh Arial,sans-serif; margin:0; min-height:3.4cqh; }
.tag { display:inline-block; padding:.1em .6em; border-radius:.3em; margin-right:.6em; color:#000; background:var(--green); }
.tag.no { background:var(--red); color:#fff; }

/* ---------- Splash (ROUND 1 / FIGHT! / K.O.) ---------- */
#splash { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30cqh; text-transform:uppercase; opacity:0; pointer-events:none; color:var(--gold); -webkit-text-stroke:1cqh #000; paint-order:stroke fill; text-shadow:0 2cqh 0 #000, 0 0 8cqh rgba(255,0,0,.8); text-align:center; line-height:1; }
#splash.go { animation:splash 1s forwards; }
#splash.long { animation-duration:2.2s; }
#splash.small { font-size:17cqh; }
@keyframes splash { 0%{opacity:0;transform:scale(3)} 15%{opacity:1;transform:scale(1)} 85%{opacity:1;transform:scale(1.05)} 100%{opacity:0;transform:scale(1.1)} }

/* ---------- Result ---------- */
.result-block { position:absolute; left:5cqw; top:50%; transform:translateY(-50%); width:56cqw; display:flex; flex-direction:column; gap:1.5cqh; }
h2 { font-size:8.5cqh; margin:0; color:var(--gold); text-transform:uppercase; line-height:1; -webkit-text-stroke:.6cqh #000; paint-order:stroke fill; text-shadow:0 1cqh 0 #000; }
.stats { display:flex; gap:3cqw; font:700 3cqh Arial,sans-serif; margin:0; }
.stats b { font-size:5cqh; font-family:Impact,sans-serif; color:var(--gold); }
.sauce { border-left:.8cqh solid var(--gold); padding:1.2cqh 1.6cqw; background:rgba(0,0,0,.6); }
.label { font:700 2cqh Arial,sans-serif; text-transform:uppercase; letter-spacing:.15em; opacity:.8; }
.sauce p { font:700 3cqh Arial,sans-serif; margin:.6cqh 0 0; }
.cta { display:flex; align-items:center; gap:2cqw; background:rgba(0,0,0,.6); padding:1.6cqh 1.6cqw; border-radius:1cqh; }
.qr { width:15cqh; height:15cqh; flex:none; background:#fff; color:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:4cqh; border-radius:1cqh; text-align:center; }
.qr small { font:700 1.5cqh Arial,sans-serif; }
#lead-form { flex:1; }
#lead-form label { display:block; font:700 2.6cqh Arial,sans-serif; margin-bottom:1cqh; }
.row { display:flex; gap:1cqw; }
input, button { font:700 3cqh Arial,sans-serif; padding:1.2cqh 1.2cqw; border-radius:.8cqh; border:.3cqh solid var(--gold); }
input { background:#fff; color:#000; flex:1; min-width:0; }
button { background:var(--gold); color:#000; cursor:pointer; }
.lead-msg { font:700 2.4cqh Arial,sans-serif; min-height:3cqh; margin:.8cqh 0 0; color:var(--green); }

#pad-status { position:fixed; top:4px; left:8px; font:12px Arial,sans-serif; color:#fff; opacity:.55; z-index:20; text-shadow:0 1px 2px #000; }
#calib { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vh; text-align:center; padding:4vw; }
#calib[hidden] { display:none; }
#calib p { font-size:7vh; margin:0; color:var(--gold); text-transform:uppercase; }
#calib small { font:18px Arial,sans-serif; opacity:.7; }

#audio-status { position:fixed; top:20px; left:8px; font:12px Arial,sans-serif; color:#fff; opacity:.55; z-index:20; text-shadow:0 1px 2px #000; }
#sound-hint { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); background:#000c; color:#fff; font:700 16px Arial,sans-serif; padding:8px 16px; border-radius:20px; z-index:25; border:2px solid #f5c518; }
#sound-hint[hidden] { display:none; }

#music-btn { position:fixed; top:3px; right:8px; z-index:22; font:700 12px Arial,sans-serif; padding:2px 10px; height:20px; line-height:16px; border-radius:11px; border:1px solid #f5c518; background:#000a; color:#f5c518; cursor:pointer; }
#music-btn.off { color:#aaa; border-color:#777; text-decoration:line-through; }
#music-btn:hover { background:#000; }

.endchoices { display:flex; gap:2cqw; margin-top:1cqh; }
.endbtn { flex:1; font:400 4.6cqh Impact,"Arial Black",sans-serif; text-transform:uppercase; padding:1.6cqh 1.6cqw; border-radius:1.2cqh; border:.5cqh solid #000; display:flex; align-items:center; justify-content:center; gap:1.2cqw; cursor:pointer; letter-spacing:.03em; }
.endbtn .btn { font:700 2.4cqh Arial,sans-serif; background:rgba(255,255,255,.22); padding:.3em .6em; border-radius:.4em; }
.menu-btn { background:#2a2f3d; color:#fff; border-color:#fff; }
.again-btn { background:var(--gold); color:#000; animation:pulse 1.4s infinite; }
.again-btn .btn { background:rgba(0,0,0,.15); }

/* QR code (real, scans to yourfreeplan.com with utm tags). Replace assets/qr-yourfreeplan.png to change the target. */
.qr { width:22cqh; height:auto; padding:.8cqh; flex-direction:column; gap:.4cqh; }
.qr img { width:100%; height:auto; display:block; }
.qr small { font:700 1.7cqh Arial,sans-serif; color:#000; }

/* ---------- Staff bobbleheads (crowd.js): only shown on a Fatality ---------- */
#crowd { position:absolute; inset:0; display:none; pointer-events:none; opacity:1; transition:opacity .8s; }
#crowd.leaving { opacity:0; }
#stage[data-screen="play"] #crowd.party { display:block; }
#crowd .bb { position:absolute; bottom:calc(38cqh + var(--y,0cqh)); width:calc(16cqh * var(--s,1)); transform-origin:50% 100%; }
#crowd .bb img { width:100%; display:block; filter:drop-shadow(0 .6cqh .8cqh rgba(0,0,0,.45)); }
@keyframes bb-pop { from { transform:translateY(8cqh) scale(.4); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes bb-jump { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4cqh); } }
#crowd.party .bb { animation:bb-pop .25s var(--d,0s) backwards, bb-jump .3s calc(.25s + var(--d,0s)) ease-in-out infinite; }