:root{
  --black:#050505;
  --white:#fff;
  --cyan:#4FC2CC;
  --pink:#ED5FA1;
  --yellow:#F5E50C;
  --line:#252525;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
button{font-family:"Press Start 2P",monospace}
button:focus-visible,.stage:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.hidden{display:none!important}
.app{min-height:100vh;background:#050505}
.intro{
  min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  align-items:center;gap:5vw;padding:clamp(24px,5vw,70px);position:relative;overflow:hidden
}
.intro-grid,.finale-grid{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(79,194,204,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,194,204,.08) 1px,transparent 1px);
  background-size:30px 30px
}
.intro-copy,.intro-art,.finale-content{position:relative;z-index:2}
.logo{width:min(520px,86vw);display:block;margin-bottom:28px}
.kicker{font:10px/1.65 "Press Start 2P",monospace;color:var(--cyan);margin:0 0 20px}
h1,h2,.meter-card,.hud,.brand span,.challenge-layer,.event-text,.drop-overlay,.operator,.unlock-card,.camera-status,.battle-bars,.final-score,.final-stats{
  font-family:"Press Start 2P",monospace
}
h1{font-size:clamp(52px,8.5vw,128px);line-height:.9;letter-spacing:-.055em;margin:0}
h1 span{color:var(--yellow)}
.lead{font-size:clamp(22px,2.2vw,34px);line-height:1.28;font-weight:800;margin:28px 0 10px;max-width:800px}
.sub{font-size:clamp(16px,1.4vw,21px);line-height:1.55;color:#b9b9b9;max-width:760px;margin:0 0 28px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  min-height:56px;padding:0 18px;border:3px solid #fff;background:#050505;color:#fff;
  cursor:pointer;font-size:10px;box-shadow:6px 6px 0 #fff
}
.btn-yellow{background:var(--yellow);color:#050505;border-color:var(--yellow);box-shadow:6px 6px 0 var(--pink)}
.btn-ghost{border-color:var(--cyan);box-shadow:6px 6px 0 var(--cyan)}
.privacy{font-size:12px;color:#777;margin-top:20px}
.intro-art{display:grid;place-items:center}
.meter-card{
  width:min(520px,82vw);aspect-ratio:4/5;border:12px solid var(--yellow);background:#050505;
  display:grid;place-items:center;align-content:center;gap:20px;text-align:center;position:relative;overflow:hidden
}
.meter-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(237,95,161,.23),transparent 45%,rgba(79,194,204,.22))}
.meter-card span{font-size:16px;color:var(--cyan);z-index:1}.meter-card strong{font-size:74px;color:var(--yellow);z-index:1}
.meter-card img{width:54%;z-index:1;filter:drop-shadow(12px 12px 0 var(--pink))}
.meter-card b{font-size:18px;color:#fff;z-index:1}

/* GAME */
.game{min-height:100vh;padding:12px;display:grid;grid-template-rows:auto 1fr auto auto;gap:9px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px}
.brand{display:flex;align-items:flex-end;gap:14px}.brand img{width:clamp(150px,18vw,280px)}.brand span{font-size:9px;color:var(--cyan)}
.controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.controls button{
  min-height:40px;padding:0 10px;background:#0d0d0d;color:#fff;border:1px solid #333;cursor:pointer;font-size:8px
}
.stage-shell{display:grid;place-items:center;min-height:0}
.stage{
  position:relative;width:min(100%,1550px);aspect-ratio:16/9;max-height:calc(100vh - 172px);
  overflow:hidden;background:#090909;border:2px solid #282828;isolation:isolate
}
#video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);
  filter:grayscale(1) contrast(1.5) brightness(.54);opacity:.87;background:#080808
}
#motionCanvas{position:absolute;width:128px;height:72px;opacity:0;pointer-events:none}
#fxCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}
.left-right-split{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:1fr 1fr;pointer-events:none}
.side{position:relative;border-right:1px solid rgba(255,255,255,.14)}
.side:last-child{border-right:0}
.side span{position:absolute;top:14px;font:8px/1 "Press Start 2P",monospace;color:rgba(255,255,255,.28)}
.side-left span{left:14px}.side-right span{right:14px}
.hype-backdrop{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(120deg,var(--cyan),transparent 35%,var(--pink) 67%,var(--yellow));mix-blend-mode:screen}
.pixel-grid{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.10;
  background:
    linear-gradient(rgba(79,194,204,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,194,204,.18) 1px,transparent 1px);
  background-size:5vw 5vw
}
.scanlines{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.62) 4px 5px)
}
.challenge-layer{
  position:absolute;z-index:12;left:50%;top:11%;transform:translateX(-50%);width:min(92%,1100px);text-align:center;
  opacity:0;pointer-events:none
}
.challenge-layer.live{opacity:1}
.challenge-tag{font-size:8px;color:var(--cyan);margin-bottom:12px}
.challenge-title{font-size:clamp(25px,5vw,74px);line-height:1;color:var(--yellow);text-shadow:8px 8px 0 #000}
.challenge-sub{font-size:clamp(8px,1vw,12px);line-height:1.7;color:#fff;margin-top:13px}
.challenge-timer{font-size:clamp(28px,4vw,60px);color:var(--pink);margin-top:12px}
.event-text{
  position:absolute;z-index:16;left:50%;top:50%;transform:translate(-50%,-50%);width:94%;
  text-align:center;font-size:clamp(26px,5.6vw,86px);line-height:1.08;color:var(--yellow);
  text-shadow:10px 10px 0 #000;opacity:0;pointer-events:none
}
.event-text.live{animation:eventPop 1.05s steps(5,end)}
@keyframes eventPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%,76%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
.gorilla-pop{
  position:absolute;z-index:15;width:clamp(130px,22vw,340px);opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.4);left:50%;top:56%;text-align:center
}
.gorilla-pop img{width:100%;filter:drop-shadow(12px 12px 0 var(--pink))}
.gorilla-pop span{display:block;color:var(--yellow);font:8px/1.5 "Press Start 2P",monospace;margin-top:8px}
.gorilla-pop.live{animation:gorilla 1s steps(5,end)}
@keyframes gorilla{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}18%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.86)}}
.unlock-card{
  position:absolute;z-index:18;right:18px;top:18px;background:var(--yellow);color:#050505;border:4px solid #050505;
  box-shadow:8px 8px 0 var(--pink);padding:14px 16px;opacity:0;transform:translateY(-20px);pointer-events:none
}
.unlock-card span{display:block;font-size:8px;line-height:1.5}.unlock-card strong{display:block;font-size:20px;margin-top:8px}
.unlock-card.live{animation:unlock .95s steps(5,end)}
@keyframes unlock{0%{opacity:0;transform:translateY(-22px)}15%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
.camera-status{
  position:absolute;z-index:11;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;gap:12px;
  font-size:7px;background:rgba(5,5,5,.7);border:1px solid #333;padding:9px 10px
}
.camera-status #hypeLabel{color:var(--yellow)}
.battle-bars{
  position:absolute;z-index:13;left:50%;bottom:13%;transform:translateX(-50%);width:min(90%,900px);
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end;background:rgba(5,5,5,.76);border:2px solid #333;padding:16px
}
.battle-col span{font-size:9px}.battle-col strong{display:block;font-size:21px;margin-top:8px;color:var(--cyan)}
.battle-col-right{text-align:right}.battle-col-right strong{color:var(--pink)}
.battle-track{height:20px;background:#161616;border:1px solid #333;margin-top:9px;overflow:hidden}
.battle-track i{display:block;height:100%;width:0;background:var(--cyan)}
.battle-col-right .battle-track i{background:var(--pink);margin-left:auto}
.battle-vs{font-size:22px;color:var(--yellow);align-self:center}
.drop-overlay{
  position:absolute;inset:0;z-index:20;background:#050505;display:grid;place-items:center;text-align:center;
  font-size:clamp(36px,7vw,110px);color:#fff;line-height:1.05
}
.drop-overlay.release{background:var(--yellow);color:#050505}
.hud{display:grid;grid-template-columns:auto auto auto auto minmax(220px,1fr);gap:18px;align-items:end;border-top:1px solid #262626;padding-top:9px}
.hud-block span,.hype-meter span{display:block;font-size:6px;color:#666;margin-bottom:5px}.hud-block strong{font-size:21px}
.meter-track{height:16px;background:#151515;border:1px solid #333;overflow:hidden}
.meter-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--pink));transition:width .1s linear}
.privacy-line{margin:0;text-align:center;color:#5f5f5f;font-size:10px}

/* FINALE */
.finale{min-height:100vh;position:relative;overflow:hidden;display:grid;place-items:center;padding:clamp(24px,5vw,70px)}
.finale-content{width:min(100%,1050px);text-align:center}
.final-logo{width:min(480px,76vw);margin:0 auto 26px}
.finale h2{font-size:clamp(34px,6vw,82px);line-height:1.08;margin:0}
.final-score{font-size:clamp(70px,12vw,170px);color:var(--yellow);margin:20px 0 30px}
.final-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:30px}
.final-stats div{border:1px solid #2c2c2c;padding:15px;background:#0b0b0b}
.final-stats span{display:block;font-size:7px;color:#777;margin-bottom:9px}.final-stats strong{font-size:18px}
#posterCanvas{display:block;width:min(100%,620px);height:auto;margin:0 auto 24px;border:10px solid #fff;background:#050505}

@media(max-width:860px){
  .intro{grid-template-columns:1fr}.intro-art{order:-1}.meter-card{width:min(320px,70vw)}
  .game{padding:8px}.topbar{display:grid;grid-template-columns:1fr}.brand span{display:none}.controls{justify-content:stretch}.controls button{flex:1}
  .stage{aspect-ratio:3/4;max-height:none}
  .hud{grid-template-columns:repeat(4,1fr);gap:8px}.hype-meter{grid-column:1/-1}
  .battle-bars{grid-template-columns:1fr;gap:10px}.battle-vs{text-align:center}.battle-col-right{text-align:left}
}
@media(max-width:520px){
  h1{font-size:47px}.brand img{width:145px}.controls button{font-size:7px;padding:0 7px}
  .hud-block strong{font-size:15px}.hud-block span{font-size:5px}.final-stats{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .scanlines{display:none}
}
html.low-power .scanlines{display:none}
html.low-power .pixel-grid{opacity:.06}

.mini-rules{
  position:absolute;
  z-index:11;
  right:12px;
  bottom:48px;
  width:158px;
  padding:9px 10px;
  background:rgba(5,5,5,.68);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  pointer-events:none;
  font-family:"Press Start 2P",monospace;
  opacity:.72;
}
.mini-rules>span{
  display:block;
  color:var(--yellow);
  font-size:6px;
  margin-bottom:7px;
}
.mini-rules ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:5px;
}
.mini-rules li{
  font-size:5px;
  line-height:1.45;
  color:#d0d0d0;
}
@media(max-width:620px){
  .mini-rules{
    width:128px;
    right:8px;
    bottom:46px;
    padding:7px 8px;
  }
  .mini-rules>span{font-size:5px}
  .mini-rules li{font-size:4.5px}
}

.perma-battle{
  position:absolute;
  z-index:10;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  width:min(94%,980px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:10px 12px;
  background:rgba(5,5,5,.76);
  border:1px solid rgba(255,255,255,.22);
  pointer-events:none;
  font-family:"Press Start 2P",monospace;
}
.team{min-width:0}
.team>span{display:block;font-size:7px;color:#8c8c8c;margin-bottom:6px}
.team>strong{display:block;font-size:clamp(15px,2.2vw,26px);color:var(--cyan);margin-bottom:7px}
.team-right{text-align:right}.team-right>strong{color:var(--pink)}
.team-meter{height:8px;background:#171717;border:1px solid #343434;overflow:hidden}
.team-meter i{display:block;height:100%;width:0;background:var(--cyan);transition:width .12s linear}
.team-right .team-meter i{background:var(--pink);margin-left:auto}
.battle-center{text-align:center;min-width:120px}
.battle-center span,.battle-center small{display:block;font-size:6px;line-height:1.5;color:#8a8a8a}
.battle-center b{display:block;font-size:18px;color:var(--yellow);margin:4px 0}
.battle-center small{color:#fff}
.challenge-layer{top:19%}
.stage.bonus-active .perma-battle{
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(245,229,12,.12);
}
.stage.left-leading .side-left{background:rgba(79,194,204,.08)}
.stage.right-leading .side-right{background:rgba(237,95,161,.08)}
@media(max-width:700px){
  .perma-battle{top:8px;gap:8px;padding:8px}
  .battle-center{min-width:82px}
  .battle-center b{font-size:13px}
  .team>strong{font-size:13px}
  .team>span,.battle-center span,.battle-center small{font-size:5px}
  .challenge-layer{top:18%}
}

.round-hud{
  position:absolute;
  z-index:14;
  left:50%;
  top:78px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 12px;
  background:rgba(5,5,5,.78);
  border:1px solid rgba(255,255,255,.24);
  font-family:"Press Start 2P",monospace;
  pointer-events:none;
}
.round-hud span{font-size:7px;color:var(--yellow)}
.round-hud strong{font-size:22px;color:#fff;min-width:38px;text-align:right}
.round-result-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  background:rgba(5,5,5,.96);
  display:grid;
  place-content:center;
  text-align:center;
  padding:30px;
  font-family:"Press Start 2P",monospace;
}
.round-result-overlay.cyan{background:#4FC2CC;color:#050505}
.round-result-overlay.pink{background:#ED5FA1;color:#050505}
.round-result-overlay.draw{background:#F5E50C;color:#050505}
.round-result-overlay span{font-size:10px;line-height:1.5}
.round-result-overlay strong{font-size:clamp(30px,6vw,84px);line-height:1.08;margin:20px 0}
.round-result-score{display:flex;justify-content:center;align-items:center;gap:18px;font-size:clamp(10px,1.5vw,16px);margin:10px 0 22px}
.round-result-score b{color:#050505}
.round-result-overlay small{font-size:9px;line-height:1.6}
.winner-overlay{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  font-family:"Press Start 2P",monospace;
  overflow:hidden;
}
.winner-overlay.left{background:#4FC2CC;color:#050505}
.winner-overlay.right{background:#ED5FA1;color:#050505}
.winner-overlay.draw{background:#F5E50C;color:#050505}
.winner-inner{position:relative;z-index:2;width:min(94%,1100px)}
.winner-kicker{display:block;font-size:9px;margin-bottom:18px}
.winner-overlay strong{display:block;font-size:clamp(34px,7vw,108px);line-height:1.02}
.winner-score{font-size:clamp(18px,3vw,42px);margin:24px 0 12px}
.winner-rounds{font-size:clamp(10px,1.7vw,18px);margin-bottom:22px}
.winner-overlay img{width:min(300px,34vw);filter:drop-shadow(14px 14px 0 rgba(5,5,5,.25))}
.winner-sub{display:block;font-size:11px;margin-top:14px}
@media(max-width:700px){
  .round-hud{top:66px}
  .round-hud strong{font-size:16px}
  .round-result-score{flex-direction:column;gap:8px}
}