/* Game Day Drop: stories-style weekly hype. Self-contained tokens so it stays light. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/dmmono.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--o:#F26B1D;--o2:#C94E0A;--k:#0F0D0B;--cream:#FFF1E0;--d:"Bricolage Grotesque",system-ui,sans-serif;--s:"Instrument Serif",Georgia,serif;--m:"DM Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#000;color:#fff;font-family:var(--d)}
body{display:grid;place-items:center;overflow:hidden}
.stage{position:relative;width:min(100vw,calc(100dvh*9/16));aspect-ratio:9/16;max-height:100dvh;background:var(--k);overflow:hidden;container-type:size;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.bar{position:absolute;inset:max(.8rem,env(safe-area-inset-top)) .8rem auto;display:flex;gap:.3rem;z-index:5}
.bar i{flex:1;height:.25rem;border-radius:9px;background:#ffffff40;overflow:hidden}
.bar i b{display:block;height:100%;width:0;background:#fff}
.bar i.done b{width:100%}
.bar i.cur b{animation:fill var(--dur) linear forwards}
.paused .bar i.cur b,.paused .sc.on *{animation-play-state:paused!important}
@keyframes fill{to{width:100%}}
.top{position:absolute;inset:2.2rem .9rem auto;display:flex;justify-content:space-between;align-items:center;z-index:5;font:500 clamp(.6rem,3.2cqw,.8rem) var(--m);letter-spacing:.06em;text-transform:uppercase}
.top a{color:#fff;text-decoration:none;display:flex;gap:.5rem;align-items:center}
.top .bm{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;background:var(--o);color:var(--k);font:800 1.2rem var(--d)}
.tap{position:absolute;top:4rem;bottom:0;width:38%;z-index:4;background:none;border:0}
.tap.l{left:0}.tap.r{right:0;width:62%}
.sc{position:absolute;isolation:isolate;inset:0;padding:5.5rem 7cqw 6rem;display:flex;flex-direction:column;justify-content:center;gap:2cqh;opacity:0;pointer-events:none;transition:opacity .25s}
.sc.on{opacity:1;pointer-events:auto}
.sc .bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 80% at 80% 10%,#6b300f,var(--k) 60%)}
.sc.alt .bg{background:radial-gradient(120% 80% at 10% 90%,#5a2a0d,var(--k) 60%)}
.sc.hot .bg{background:var(--o)}
.sc.hot{color:var(--k)}
.mq{position:absolute;white-space:nowrap;font:800 22cqw/1 var(--d);letter-spacing:-.05em;color:#ffffff0d;animation:mq 14s linear infinite}
.sc.hot .mq{color:#0000000d}
.mq:nth-child(1){top:16%}.mq:nth-child(2){top:34%;animation-direction:reverse}.mq:nth-child(3){top:62%}
@keyframes mq{to{transform:translateX(-50%)}}
.k{font:500 clamp(.7rem,3.6cqw,.95rem) var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--o)}
.sc.hot .k{color:var(--k)}
.w{display:block;overflow:hidden}
.w>span{display:block;transform:translateY(110%);font:800 var(--fs,22cqw)/.86 var(--d);letter-spacing:-.055em;text-transform:uppercase}
.on .w>span{animation:up .7s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i,0)*.13s + .1s)}
@keyframes up{to{transform:none}}
.ser{font:italic 400 var(--fs,16cqw)/.9 var(--s);color:var(--o);text-transform:none!important;letter-spacing:-.02em!important}
.sc.hot .ser{color:var(--cream)}
.fade{opacity:0;transform:translateY(1rem)}
.on .fade{animation:fin .6s ease forwards;animation-delay:calc(var(--i,3)*.13s + .2s)}
@keyframes fin{to{opacity:1;transform:none}}
.sub{font:600 clamp(1rem,5cqw,1.35rem)/1.3 var(--d);max-width:30ch;color:#f1e4d4}
.sc.hot .sub{color:var(--k)}
.vs{font:500 clamp(.8rem,4cqw,1rem) var(--m);letter-spacing:.1em;color:#ffffffa0}
.meter{position:relative;height:1.1rem;border-radius:9px;background:linear-gradient(90deg,#ffffff18,#ffffff30);margin:1.2rem 0 .4rem}
.meter .pin{position:absolute;top:50%;width:1.8rem;height:1.8rem;margin:-.9rem 0 0 -.9rem;border-radius:50%;display:grid;place-items:center;font:800 .7rem var(--d);color:var(--k);border:2px solid #fff;scale:0}
.on .meter .pin{animation:pop .5s .9s cubic-bezier(.3,1.6,.5,1) forwards}
.on .meter .pin.b{animation-delay:1.3s}
@keyframes pop{to{scale:1}}
.pin.a{background:var(--o)}.pin.b{background:var(--cream)}
.big{font:800 44cqw/.8 var(--d);letter-spacing:-.07em;color:var(--cream)}
.sc.hot .big{color:var(--k)}
.row{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.chip{display:inline-block;font:500 clamp(.7rem,3.4cqw,.9rem) var(--m);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:99px;padding:.45rem .9rem;color:inherit;text-decoration:none;background:none;cursor:pointer}
.chip.solid{background:var(--o);border-color:var(--o);color:var(--k)}
.sc.hot .chip.solid{background:var(--k);border-color:var(--k);color:var(--cream)}
.cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.hint{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font:500 .68rem var(--m);letter-spacing:.1em;text-transform:uppercase;color:#ffffff80;z-index:5}
.start{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:var(--k);border:0;color:#fff;cursor:pointer}
.start span{display:grid;gap:1rem;justify-items:center;text-align:center;padding:2rem}
.start b{font:800 26cqw/.82 var(--d);letter-spacing:-.06em;text-transform:uppercase}
.start em{font:italic 400 14cqw/.9 var(--s);color:var(--o);display:block}
.start i{font:500 .8rem var(--m);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid #fff;border-radius:99px;padding:.7rem 1.2rem;font-style:normal}
.start[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.w>span,.fade{transform:none;opacity:1;animation:none!important}.mq{animation:none}.meter .pin{scale:1;animation:none!important}}


.song{position:absolute;z-index:30;left:4%;right:4%;bottom:2.6rem}.songcap{font:500 .65rem var(--m,monospace);text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0 0 .3rem;text-shadow:0 1px 4px #000}.song iframe{border-radius:12px}