*{box-sizing:border-box}html,body{margin:0;height:100%;background:#050608;color:white;font-family:Arial,Helvetica,sans-serif;overflow:hidden}header{height:64px;background:#050608;display:flex;align-items:center;padding:0 4vw;position:relative;z-index:5;border-bottom:1px solid #26272b}.brand{font-weight:1000;font-style:italic;font-size:22px;letter-spacing:-1px}.brand span{color:#ff2a2a;text-shadow:0 0 12px #f00}nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:34px;height:100%;align-items:center}nav a{font-size:11px;font-weight:900;letter-spacing:1.7px;color:#9b9ca2;text-decoration:none;cursor:pointer}nav a.active{color:#fff;border-bottom:2px solid #ef3131;height:100%;display:flex;align-items:center}.icons{margin-left:auto;color:#c9c9cd;font-size:20px}main{height:calc(100vh - 64px);min-height:560px;background-position:center;background-size:cover;position:relative;isolation:isolate;transition:background-image .25s ease}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.38) 44%,rgba(0,0,0,.38) 56%,rgba(0,0,0,.18)),linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.08) 50%,rgba(0,0,0,.68));z-index:-1}.content{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:3.2vh 5vw 2vh}.counter{font-size:10px;font-weight:900;letter-spacing:3px;color:#d0d1d4;text-shadow:0 2px 5px #000}.counter:after{content:'';display:block;width:32px;height:2px;background:#e83434;margin:9px auto 0}h1{font-size:clamp(32px,4.1vw,70px);line-height:.95;max-width:1150px;margin:2.3vh 0 0;text-transform:uppercase;font-weight:1000;font-style:italic;letter-spacing:-2.5px;text-shadow:0 3px 18px #000}.vs{font-size:clamp(46px,5.2vw,84px);line-height:1;margin:auto 0 0;font-weight:1000;font-style:italic;letter-spacing:-6px;text-shadow:-4px 0 18px #f22,4px 0 18px #168cff,0 3px 5px #000;transform:skew(-8deg)}.answers{width:min(900px,80vw);display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:16px;margin-top:auto}.answer{height:64px;border-radius:4px;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:16px;font-weight:1000;font-style:italic;letter-spacing:.5px;cursor:pointer;position:relative;overflow:hidden;text-shadow:0 1px 5px #000;box-shadow:inset 0 0 25px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.25)}.answer:nth-child(1){background:linear-gradient(90deg,#8c0f14,#ef2e32)}.answer:nth-child(2){background:linear-gradient(90deg,#0860ba,#0a86ee)}.answer:nth-child(3){background:linear-gradient(90deg,#6b3cc5,#3e7de8)}.answer.selected{outline:3px solid #fff;box-shadow:0 0 28px rgba(255,255,255,.55)}.answer .pct{font-size:24px;margin-right:10px}.answer .tag{position:absolute;top:4px;right:7px;font-size:8px;letter-spacing:1px}.voteinfo{font-size:10px;letter-spacing:2px;font-weight:900;margin-top:11px;color:#d5d5d7;min-height:13px}.next{margin-top:10px;background:rgba(6,7,9,.72);border:1px solid #777;color:#fff;border-radius:3px;padding:10px 24px;font-size:10px;font-weight:900;letter-spacing:1.5px;cursor:pointer}.dots{display:flex;gap:5px;margin-top:12px;max-width:80vw}.dot{width:4px;height:4px;border-radius:50%;background:#666}.dot.on{width:16px;border-radius:4px;background:#fff}@media(max-width:700px){header{height:56px;padding:0 18px}.brand{font-size:18px}nav{display:none}.icons{font-size:16px}main{height:calc(100vh - 56px);min-height:600px}.content{padding:3vh 18px 18px}h1{font-size:clamp(30px,9vw,48px);letter-spacing:-1.5px}.answers{width:100%;gap:9px}.answer{height:60px;font-size:13px}.vs{font-size:58px}.dots{display:none}}
/* Cinematic intro */
.intro{position:fixed;inset:0;z-index:100;background:#020305;overflow:hidden;opacity:1;visibility:visible;transition:opacity .65s ease,visibility .65s ease}
.intro-art{position:absolute;inset:0;background:url("assets/intro.png") center center/cover no-repeat}
.intro.exit{opacity:0;visibility:hidden;pointer-events:none}
.site{height:100%;opacity:1;transition:opacity .45s ease}
.site-hidden{opacity:0;pointer-events:none}
/* Real visible intro CTA — positioned over the button artwork */
.intro-cta{position:absolute;z-index:4;left:50%;bottom:12.35%;transform:translateX(-50%);width:min(540px,32.5vw);height:clamp(70px,9.7vh,94px);display:flex;align-items:center;justify-content:center;gap:28px;border:2px solid rgba(255,255,255,.78);border-radius:10px;color:#fff;background:linear-gradient(105deg,rgba(85,8,8,.98) 0%,rgba(22,24,35,.98) 49%,rgba(4,55,92,.98) 100%);box-shadow:-8px 0 22px rgba(255,35,25,.7),8px 0 22px rgba(0,167,255,.65),inset 0 0 20px rgba(255,255,255,.08);font:900 clamp(18px,1.45vw,28px)/1 Arial,sans-serif;letter-spacing:.13em;cursor:pointer;text-shadow:0 2px 5px #000;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.intro-cta b{font-size:1.55em;line-height:0;font-family:Arial,sans-serif}
.intro-cta:hover{transform:translateX(-50%) scale(1.035);filter:brightness(1.15);box-shadow:-10px 0 30px rgba(255,35,25,.9),10px 0 30px rgba(0,167,255,.85),inset 0 0 24px rgba(255,255,255,.12)}
.intro-cta:active{transform:translateX(-50%) scale(.99)}
.intro-cta:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(max-width:900px){.intro-cta{width:min(72vw,540px);bottom:12%;height:clamp(62px,10vw,84px);font-size:clamp(15px,3vw,22px)}}

/* Navigation cleanup */
.brand{appearance:none;border:0;background:none;color:#fff;padding:0;cursor:pointer;font-family:inherit}.brand:hover{filter:brightness(1.18)}

/* v3.5 — responsive mobile layout */
@media (max-width:700px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 .site{min-height:100dvh;height:auto}
 header{height:54px;min-height:54px;padding:0 14px;position:sticky;top:0;z-index:30}
 .brand{font-size:17px;white-space:nowrap}
 nav{display:flex;position:static;transform:none;margin-left:auto;gap:16px;height:100%}
 nav a{font-size:9px;letter-spacing:1.15px} nav a.active{height:100%}
 main{height:auto;min-height:calc(100dvh - 54px);background-size:cover;background-position:center top}
 .content{min-height:calc(100dvh - 54px);height:auto;padding:18px 14px max(22px,env(safe-area-inset-bottom));justify-content:flex-start}
 .counter{font-size:9px;letter-spacing:2px}
 h1{font-size:clamp(26px,8.2vw,40px);line-height:.98;margin:16px 0 0;letter-spacing:-1px;max-width:94vw}
 .vs{font-size:50px;letter-spacing:-4px;margin:clamp(76px,23vh,180px) 0 18px}
 .answers{width:100%;grid-template-columns:1fr!important;gap:8px;margin-top:0}
 .answer{height:54px;font-size:13px;flex-shrink:0}.answer .pct{font-size:21px}
 .voteinfo{font-size:9px;line-height:1.35;letter-spacing:1.3px;min-height:25px;margin-top:10px}
 .next{margin:7px 0 0;min-height:42px;padding:10px 22px;flex-shrink:0}
 .dots{display:none}
 .intro{height:100dvh;overflow:hidden}
 .intro-art{background-size:contain;background-position:center center;background-color:#020305}
 .intro-cta{width:min(78vw,420px);height:58px;bottom:max(5.5%,22px);font-size:13px;letter-spacing:.12em;gap:14px}
}
@media (max-width:420px) and (max-height:740px){h1{font-size:25px}.vs{margin-top:58px;font-size:44px}.answer{height:50px}.content{padding-top:13px}}


/* v3.6 — mobile: show the complete 16:9 question artwork */
.mobile-visual{display:contents}

@media (max-width:700px){
  main#arena{
    background-image:none!important;
    background-color:#050608;
    min-height:calc(100dvh - 54px);
  }
  main#arena>.shade{display:none}
  .content{
    display:flex;
    padding:0 0 max(22px,env(safe-area-inset-bottom));
    min-height:calc(100dvh - 54px);
  }
  .mobile-visual{
    display:flex;
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    flex:0 0 auto;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:18px 14px 16px;
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
    background-color:#050608;
    overflow:hidden;
    isolation:isolate;
  }
  .mobile-visual:after{
    content:"";
    position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.03) 44%,rgba(0,0,0,.35));
  }
  .mobile-visual .counter{font-size:9px;letter-spacing:2px;flex:0 0 auto}
  .mobile-visual h1{
    font-size:clamp(23px,7.3vw,34px);line-height:.96;
    margin:12px 0 0;max-width:94vw;
    text-shadow:0 3px 12px #000,0 1px 4px #000;
  }
  .mobile-visual .vs{
    margin:auto 0 0;font-size:46px;line-height:1;padding-bottom:2px
  }
  .answers{
    width:calc(100% - 28px);
    margin:12px 14px 0;
    grid-template-columns:1fr!important;
    gap:8px;
  }
  .answer{height:54px}
  .voteinfo{margin:10px 14px 0}
  .next{margin-top:8px}
}
@media (max-width:420px) and (max-height:740px){
  .mobile-visual{padding-top:12px}
  .mobile-visual h1{font-size:22px;margin-top:9px}
  .mobile-visual .vs{font-size:40px}
}