/* Singing Battle Season 4: magazine-cover design, mobile first.
   Fonts: Bebas Neue (display) and Outfit (text), both OFL and served from this folder.
   Motion animates transform and opacity only, uses spring-shaped easing and respects reduced motion. */
@font-face{font-family:'Bebas Neue';src:url('bebas-neue.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url('outfit.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  --bg:#0a090c;--card:#141217;--card-2:#1b1820;
  --cream:#f4ecd8;--ink:#f6f1e7;--muted:#b9b1a6;--dim:#8f887d;
  --gold:#d9b25f;--gold-hi:#f1d48f;--line:#d9b25f45;--line-soft:#ffffff14;
  --crimson:#a3122c;--crimson-hi:#c8203f;
  --blue:#256af4;--red:#ff293e;
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif;--text:Outfit,'Segoe UI',system-ui,sans-serif;
  --gutter:clamp(16px,4.5vw,56px);--wrap:1180px;
  --safe-b:env(safe-area-inset-bottom,0px);--tabbar-h:calc(64px + var(--safe-b));
  --vh:1vh;
  --spring:linear(0,.0105 1%,.0435 2.1%,.1661 4.4%,.6167 11%,.8052 14.7%,.9254 18.5%,.9955 22.4%,1.0237 25.7%,1.0366 29.1%,1.0387 32.6%,1.0318 37%,1.0045 49.7%,.9987 58.2%,.9988 69.4%,1);
  --spring-pop:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@supports (height:1svh){:root{--vh:1svh}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:84px;scroll-padding-bottom:calc(var(--tabbar-h) + 16px)}
body{margin:0;color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:var(--tabbar-h)}
img{max-width:100%;display:block}
a{color:inherit;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.defs{position:absolute}
.icon{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:#140f06;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:6px}
h1[tabindex]:focus,h1[tabindex]:focus-visible{outline:none}

/* Shared type */
.kicker{display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.34em;text-transform:uppercase;color:var(--cream)}
.kicker span{margin-right:-.34em}
.kicker i{flex:1;max-width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.kicker i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.kicker.left{justify-content:flex-start;color:var(--gold)}
.kicker.left i{max-width:70px}
.head{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.head::before,.head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.head::after{background:linear-gradient(90deg,var(--gold),transparent)}
.head h2{font-weight:700;font-size:clamp(25px,7vw,38px);line-height:1.1;letter-spacing:.05em;text-transform:uppercase;color:var(--cream);text-align:center}
.lead{max-width:620px;margin:-6px auto 24px;text-align:center;color:var(--muted);font-size:15px}
.more{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}

/* Buttons */
.btn-crimson{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;padding:0 32px;border:1.5px solid var(--gold);border-radius:14px;background:linear-gradient(180deg,var(--crimson-hi),var(--crimson) 58%,#7d0d22);color:#fff4e3;font-family:var(--display);font-size:31px;line-height:1;letter-spacing:.06em;text-decoration:none;box-shadow:0 10px 30px #a3122c55,0 0 0 4px #d9b25f14,inset 0 1px 0 #ffffff33;overflow:hidden;cursor:pointer;transition:transform .5s var(--spring),box-shadow .3s}
.btn-crimson .icon{width:26px;height:26px;stroke-width:2.2}
.btn-crimson::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,#ffffff40 46%,transparent 60%);transform:translateX(-120%);animation:shimmer 5s var(--ease-out) 2.6s infinite;pointer-events:none}
.btn-crimson:active{transform:scale(.96)}
@media (hover:hover){.btn-crimson:hover{transform:translateY(-2px);box-shadow:0 16px 40px #a3122c77,0 0 0 4px #d9b25f22,inset 0 1px 0 #ffffff33}}
@keyframes shimmer{0%{transform:translateX(-120%)}32%,100%{transform:translateX(120%)}}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--line);border-radius:12px;background:#d9b25f0d;color:var(--gold-hi);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s,transform .5s var(--spring)}
.btn-ghost:hover{background:#d9b25f1c;border-color:#d9b25f90}
.btn-ghost:active{transform:scale(.97)}
.btn-ghost .icon{width:17px;height:17px}
.btn-ghost.small{min-height:38px;padding:0 14px;font-size:13.5px}

/* Top bar: tucked away over the cover on phones, shown everywhere else */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:22px;height:58px;padding:0 var(--gutter);background:#0a090cd6;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line-soft);transform:translate3d(0,-102%,0);transition:transform .55s var(--spring)}
.topbar.show{transform:none}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.brand b{font-weight:600;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream)}
.brand small{margin-top:5px;font-family:var(--display);font-size:14px;letter-spacing:.12em;color:var(--gold)}
.navlinks{display:none;gap:28px;margin-left:auto}
.navlinks a{position:relative;padding:8px 0;font-size:14.5px;letter-spacing:.04em;color:#d8d0c3;text-decoration:none;transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--gold-hi)}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--gold);transform:scaleX(0);transition:transform .5s var(--spring)}
.navlinks a[aria-current="page"]::after{transform:none}
.top-cta{margin-left:auto;min-height:38px;padding:0 18px;border-radius:10px;font-size:21px;box-shadow:0 6px 18px #a3122c44,inset 0 1px 0 #ffffff33}
@media (min-width:1024px){.topbar{transform:none;height:70px}.navlinks{display:flex}.top-cta{margin-left:12px}}
/* Phone header Members entry (the desktop nav has its own); the six-item bottom bar is unchanged. */
.top-member{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:44px;margin-left:auto;padding:0 4px;border-radius:10px;color:#d8d0c3;font-size:10.5px;line-height:1.1;letter-spacing:.02em;text-decoration:none;transition:color .2s}
.top-member .icon{width:20px;height:20px}
.top-member:hover,.top-member[aria-current="page"]{color:var(--gold-hi)}
.top-member+.top-cta{margin-left:0}
@media (max-width:1023px){.topbar{gap:12px}.brand{min-width:0}.brand b,.brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media (max-width:379px){.brand b{font-size:11.5px;letter-spacing:.24em}.brand small{font-size:12.5px;letter-spacing:.08em}.top-cta{padding:0 14px}}
@media (min-width:1024px){.top-member{display:none}.top-member+.top-cta{margin-left:12px}}

/* Bottom category bar (phones and tablets) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:var(--tabbar-h);padding:6px max(6px,env(safe-area-inset-right)) calc(6px + var(--safe-b)) max(6px,env(safe-area-inset-left));background:linear-gradient(180deg,#15121af2,#0b0a0ef8);border-top:1px solid #d9b25f38;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.tabbar a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:44px;border-radius:12px;color:#b3ab9f;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:0;text-decoration:none;transition:color .3s}
.tabbar a>span{display:block;max-width:100%;white-space:nowrap;text-align:center}
.tabbar a .icon{width:24px;height:24px;transition:transform .55s var(--spring-pop),fill-opacity .3s;fill:currentColor;fill-opacity:0}
.tabbar a[aria-current="page"]{color:var(--gold-hi)}
.tabbar a[aria-current="page"] .icon{transform:translate3d(0,-1px,0) scale(1.08);fill-opacity:.22}
.tabbar a:active .icon{transform:scale(.86)}
.tab-glow{position:absolute;top:6px;bottom:calc(6px + var(--safe-b));left:0;width:calc(100% / 6);border-radius:14px;background:radial-gradient(ellipse at 50% 0%,#d9b25f30,transparent 72%),#d9b25f10;border:1px solid #d9b25f38;transition:transform .62s var(--spring),opacity .3s;pointer-events:none}
.tab-glow::before{content:"";position:absolute;top:-7px;left:50%;width:28px;height:2px;margin-left:-14px;border-radius:2px;background:var(--gold-hi);box-shadow:0 0 12px #f1d48faa}
.tab-glow.off{opacity:0}
@media (min-width:1024px){.tabbar{display:none}body{padding-bottom:0}}
@media (max-width:380px){.tabbar a{font-size:11px;letter-spacing:0}.tabbar a .icon{width:22px;height:22px}}

/* Views */
.js .view{display:none}
.js[data-view="home"] #home,.js[data-view="champions"] #champions,.js[data-view="format"] #format,.js[data-view="power-ups"] #power-ups,.js[data-view="sponsors"] #sponsors,.js[data-view="members"] #members,.js[data-view="enter"] #enter{display:block}
/* Format & Rules (one view): section jump links; the rules sit below the format sections. */
.fr-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 30px}
.fr-jump a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#d9b25f0d;color:var(--gold-hi);font-size:14px;text-decoration:none;transition:background .25s,border-color .25s}
.fr-jump a:hover{background:#d9b25f1c;border-color:#d9b25f90}
.fr-jump .icon{width:16px;height:16px}
.fr-rules{margin-top:64px;padding-top:36px;border-top:1px solid var(--line-soft)}
.fr-rules>.kicker{margin-bottom:14px}
.fr-rules h2[tabindex]:focus{outline:none}
.page-head .member-jump{margin-top:18px}
/* Seven top links: tighter spacing until there is room for the original gap. */
@media (min-width:1024px) and (max-width:1239px){.navlinks{gap:16px}.navlinks a{font-size:14px;letter-spacing:.02em}}
.view.entering{animation:view-in .6s var(--ease-out) both}
@keyframes view-in{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.page{max-width:var(--wrap);margin:0 auto;padding:88px var(--gutter) 64px}
@media (min-width:1024px){.page{padding-top:124px}}
.page-head{margin-bottom:28px;text-align:center}
.page-head .kicker{margin-bottom:12px}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(62px,17vw,128px);line-height:.86;letter-spacing:.015em;color:var(--cream)}
.page-head p{max-width:600px;margin:14px auto 0;color:var(--muted);font-size:15.5px}
.page-head .track-jump{margin-top:20px;max-width:100%;white-space:normal;text-align:center}
.block{margin-top:50px}

/* ---------- Home: the magazine cover ----------
   Geometry follows the photo: the top of his hair (14.25% down the portrait) sits a third of the
   way into BATTLE, so the title runs behind his head. The cutout (same size and position as the
   photo) is drawn above the title. Units follow the cover's own height where supported. */
.cover{position:relative;overflow:hidden;isolation:isolate;height:calc(100 * var(--vh) - var(--tabbar-h));min-height:540px;max-height:1020px;
  background:radial-gradient(ellipse 70% 42% at 20% 10%,#6b4a1d3d,transparent 70%),radial-gradient(ellipse 85% 55% at 82% 36%,#3a1c5c55,transparent 72%),var(--bg);
  --u:var(--vh);
  --avail:calc(100vw - 2 * var(--gutter));
  --f1:min(calc(var(--avail) / 2.42),calc(20 * var(--u)));
  --f2:min(calc(var(--avail) / 2.2),calc(22 * var(--u)));
  --mt:clamp(34px,calc(5.6 * var(--u)),56px);
  --base2:calc(var(--mt) + .84 * var(--f1) + .72 * var(--f2));
  --hair:calc(var(--base2) - .33 * var(--f2));
  --W:min(104vw,calc(68 * var(--u)));
  --H:calc(var(--W) * 1.7684);
  --img-top:calc(var(--hair) - .1425 * var(--H));
}
@supports (height:1cqh){.cover{container-type:size;--u:1cqh}}
.stage,.layer{position:absolute;inset:0}
.layer{will-change:transform}
.cover-photo,.cover-cut{position:absolute;top:var(--img-top);left:max(0px,(100% - var(--W)) / 2);width:var(--W);max-width:none;height:auto;transform-origin:50% 28%}
.cover-photo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 74%,transparent 98%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 74%,transparent 98%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
.cover-cut{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 98%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 98%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
.masthead{position:absolute;left:0;right:0;top:var(--mt);display:flex;flex-direction:column;align-items:center;margin:0;font-family:var(--display);font-weight:400;line-height:.84;letter-spacing:.005em;color:var(--cream);text-shadow:0 4px 26px #0009;-webkit-user-select:none;user-select:none}
.masthead .m1{font-size:var(--f1)}
.masthead .m2{font-size:var(--f2)}
.masthead .ch{display:inline-block}
.cover-brand{position:absolute;top:clamp(10px,calc(1.7 * var(--u)),18px);left:var(--gutter);right:var(--gutter);z-index:3;text-shadow:0 1px 8px #000}
.cover-lines{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--img-top) + .452 * var(--H));z-index:3;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.cl{display:flex;flex-direction:column;margin:0;font-family:var(--display);line-height:.95;letter-spacing:.03em;text-shadow:0 2px 16px #000d}
.cl-left{color:var(--gold);font-size:clamp(30px,8.8vw,48px)}
.cl-left>i{display:block;width:74%;height:1.5px;margin-top:8px;background:var(--gold);transform-origin:0 50%}
.cl-right{align-items:flex-end;text-align:right;font-size:clamp(26px,7.4vw,40px)}
.cl-right b{font-weight:400;color:var(--cream)}
.cl-right b.gold{color:var(--gold)}
.credit{display:none;flex-direction:column;gap:1px;margin:14px 0 0;font-family:var(--text);font-size:9.5px;font-weight:600;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:#e9dfca;text-shadow:0 1px 8px #000}
.credit b{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.05;letter-spacing:.05em;color:var(--cream)}
@container (min-height:740px){.credit{display:flex}}
.cover-cta{position:absolute;left:0;right:0;bottom:clamp(22px,calc(6 * var(--u)),64px);z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px}
.cover-cta .btn-crimson{min-width:min(276px,78vw)}
.live{display:flex;align-items:center;gap:14px;margin:0;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--cream);text-shadow:0 2px 10px #000}
.live span{margin-right:-.34em}
.live i{width:56px;height:1px;background:var(--gold)}
.live i:first-child{transform-origin:100% 50%}
.live i:last-child{transform-origin:0 50%}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;z-index:2;background:linear-gradient(180deg,transparent,#0a090cc8 62%,var(--bg));pointer-events:none}
@media (min-width:1024px){
  .cover{height:100vh;min-height:640px;max-height:none;
    --f:min(calc((100vw - 2 * var(--gutter)) / 4.95),calc(25 * var(--u)));
    --mt:max(100px,calc(11.5 * var(--u)));
    --base2:calc(var(--mt) + .72 * var(--f));
    --hair:calc(var(--base2) - .36 * var(--f));
    --W:calc(74 * var(--u))}
  /* The desktop stage fills the viewport independently of the portrait.
     Keep the original photo geometry for the shared intro and mobile composition. */
  .cover .stage{background:linear-gradient(180deg,#0a090c59 0%,#0a090c29 40%,#0a090c7a 100%),url("cover-stage-desktop-v1.webp") center 35% / cover no-repeat;isolation:isolate}
  .cover-photo{visibility:hidden}
  .masthead{flex-direction:row;justify-content:center;gap:.2em;font-size:var(--f)}
  .masthead .m1,.masthead .m2{font-size:inherit}
  .cover-brand{top:calc(var(--mt) - 30px)}
  .cover-lines{top:calc(var(--base2) + .3 * var(--f));left:calc(50% - 2.39 * var(--f));right:calc(50% - 2.39 * var(--f))}
  .cl-left{font-size:calc(.3 * var(--f))}
  .cl-right{font-size:calc(.26 * var(--f))}
  .credit{display:flex}
  .cover-cta{bottom:calc(8 * var(--u))}
}
/* Cover intro: runs once, after both photos are decoded */
.pre .cover-photo,.pre .cover-cut,.pre .masthead .ch,.pre .cover-brand,.pre .cl,.pre .cover-cta>*{opacity:0}
.intro .cover-photo,.intro .cover-cut{animation:cover-in 1.7s var(--ease-out) both}
.intro .masthead .ch{animation:letter-in 1.05s var(--spring) both;animation-delay:calc(240ms + var(--i) * 36ms)}
.intro .cover-brand{animation:fade-in .9s var(--ease-out) .15s both}
.intro .cl-left{animation:slide-l 1s var(--spring) .8s both}
.intro .cl-left>i{animation:rule-in 1.1s var(--ease-out) 1s both}
.intro .cl-right{animation:slide-r 1s var(--spring) .9s both}
.intro .cover-cta .btn-crimson{animation:rise 1s var(--spring) 1.05s both}
.intro .cover-cta .live{animation:fade-in .9s var(--ease-out) 1.3s both}
.intro .cover-cta .live i{animation:rule-in 1.1s var(--ease-out) 1.35s both}
@keyframes cover-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes letter-in{from{opacity:0;transform:translate3d(0,40%,0)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slide-l{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
@keyframes slide-r{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translate3d(0,24px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:none}}

/* ---------- Home: below the cover ---------- */
.home-body{max-width:var(--wrap);margin:0 auto;padding:6px var(--gutter) 60px}
.home-body .block.first{margin-top:26px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* The power-up art is the on-stream set: each piece is already a gold-framed tile. */
.tile{display:grid;justify-items:center;gap:8px;text-decoration:none;transition:transform .6s var(--spring)}
.tile img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 12px 22px #000b) drop-shadow(0 0 16px #d9b25f26);transition:transform .7s var(--spring-pop),filter .4s}
.tile span{font-family:var(--display);font-size:clamp(15px,4.4vw,20px);line-height:1.1;letter-spacing:.08em;color:var(--cream);text-align:center}
.tile:active{transform:scale(.95)}
@media (hover:hover){.tile:hover img{transform:translate3d(0,-6px,0) scale(1.04);filter:drop-shadow(0 18px 28px #000c) drop-shadow(0 0 26px #d9b25f44)}}
@media (min-width:760px){.tiles{gap:22px;max-width:760px;margin:0 auto}}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.facts div{padding:18px 14px;text-align:center;border-top:1px solid var(--line-soft)}
.facts div:nth-child(-n+2){border-top:0}
.facts div:nth-child(2n){border-left:1px solid var(--line-soft)}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:4px 0 0;font-family:var(--display);font-size:36px;line-height:1;letter-spacing:.03em;color:var(--cream);font-variant-numeric:tabular-nums}
.facts dd.gold{color:var(--gold-hi)}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}.facts div{border-top:0!important}.facts div+div{border-left:1px solid var(--line-soft)}}
.prize-note{margin:12px 0 22px;text-align:center;font-size:13px;color:var(--dim)}
.prize-history{display:grid;gap:6px;margin:-10px 0 22px;padding:0;list-style:none}
.prize-history li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line-soft);border-radius:12px;background:var(--card);font-size:13.5px;color:var(--muted)}
.prize-history b{font-family:var(--display);font-weight:400;font-size:21px;color:var(--gold-hi)}
.opening{position:relative;display:grid;justify-items:center;gap:12px;padding:26px 18px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(ellipse at 50% 0%,#a3122c30,transparent 70%),var(--card);text-align:center;overflow:hidden}
.opening>*{max-width:100%}
.opening h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,9vw,46px);line-height:1.05;letter-spacing:.03em;color:var(--cream);text-wrap:balance}
.opening>p{color:var(--muted);font-size:14.5px}
.countdown{display:flex;justify-content:center;gap:6px;width:100%}
.countdown div{flex:1 1 0;min-width:0;max-width:78px;display:grid;justify-items:center;padding:10px 2px;border:1px solid var(--line-soft);border-radius:12px;background:#0a090c99}
.countdown strong{display:block;font-family:var(--display);font-weight:400;font-size:38px;line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.countdown span{margin-top:4px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.person{display:grid;justify-items:center;align-content:start;gap:8px;padding:16px 6px;border:1px solid var(--line-soft);border-radius:16px;background:var(--card);text-align:center;text-decoration:none;transition:transform .6s var(--spring),border-color .3s}
.person img{width:76px;height:76px;border-radius:50%;object-fit:cover;padding:3px;background:conic-gradient(from 200deg,#fff1ba,#d9b25f,#8f6a24,#fff1ba)}
.person b{font-family:var(--display);font-weight:400;font-size:clamp(18px,5.4vw,24px);line-height:1;letter-spacing:.03em;color:var(--cream);overflow-wrap:anywhere}
.person small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.person:active{transform:scale(.97)}
.rows{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line-soft);border-radius:16px;background:var(--card);text-decoration:none;transition:transform .6s var(--spring),border-color .3s,background .3s}
.row .num{font-family:var(--display);font-size:30px;line-height:1;color:var(--gold)}
.row b{display:block;font-family:var(--display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.04em;color:var(--cream)}
.row small{display:block;margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.row .go{margin-left:auto;width:20px;height:20px;color:var(--gold);transition:transform .5s var(--spring)}
.row:active{transform:scale(.98)}
@media (hover:hover){.row:hover{border-color:var(--line);background:var(--card-2)}.row:hover .go{transform:translate3d(4px,0,0)}.person:hover{border-color:var(--line)}}
@media (min-width:900px){.rows{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Reveal on scroll (added by the script, removed once played) */
.reveal{opacity:0}
.reveal.in{animation:reveal-in .9s var(--spring) var(--d,0ms) both}
@keyframes reveal-in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

/* ---------- Champions ---------- */
.feature{display:grid;overflow:hidden;margin-bottom:46px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,#1d1520,#0e0c11 70%)}
.feature-art{position:relative;height:clamp(300px,92vw,420px);overflow:hidden;background:#120d18}
.feature-art img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.feature-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(180deg,transparent,#0e0c11)}
.feature-copy{position:relative;z-index:1;margin-top:-54px;padding:0 20px 22px}
.feature-copy h2{margin-top:8px;font-family:var(--display);font-weight:400;font-size:clamp(58px,17vw,92px);line-height:.88;letter-spacing:.02em;color:var(--cream)}
.feature-copy .event{margin-top:8px;color:var(--muted);font-size:14.5px}
.handle{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--gold);font-size:14.5px;text-decoration:none}
.handle .icon{width:15px;height:15px}
.feature .meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.feature .meta b{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:.03em;color:var(--gold-hi)}
@media (min-width:860px){.feature{grid-template-columns:1.1fr 1fr;align-items:center}.feature-art{height:100%;min-height:460px}.feature-art::after{top:0;left:auto;width:42%;height:auto;background:linear-gradient(90deg,transparent,#0e0c11)}.feature-copy{margin:0;padding:36px 40px}}
.champs{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.champ{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;padding:14px;border:1px solid var(--line-soft);border-radius:20px;background:linear-gradient(135deg,#1a161d,#0f0d12)}
.champ>img,.champ .ph{width:104px;height:104px;border-radius:50%;object-fit:cover}
.champ>img{padding:3px;background:conic-gradient(from 200deg,#fff1ba,#d9b25f,#8f6a24,#fff1ba)}
.champ .season{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.champ h3{margin-top:4px;font-family:var(--display);font-weight:400;font-size:clamp(30px,8.5vw,38px);line-height:.95;letter-spacing:.03em;color:var(--cream);overflow-wrap:anywhere}
.champ .event{margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}
.champ .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:13px}
.champ .meta b{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.03em;color:var(--gold-hi)}
.champ .meta a{color:var(--gold);text-decoration:none;overflow-wrap:anywhere}
.champ.next{border-style:dashed;border-color:#d9b25f66;background:transparent}
.champ .ph{display:grid;place-items:center;border:1px dashed #d9b25f80;color:var(--gold)}
.champ .ph .icon{width:38px;height:38px}
@media (min-width:1000px){.champs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.standing{display:grid;justify-items:center;gap:10px;margin-top:40px;padding:26px 20px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-align:center}
.standing h3{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;letter-spacing:.03em;color:var(--cream)}
.standing p{color:var(--muted);font-size:14.5px}

/* ---------- Format ---------- */
.steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;padding:18px;border:1px solid var(--line-soft);border-radius:18px;background:var(--card);transition:border-color .4s,background .4s,transform .6s var(--spring)}
.steps .no{grid-row:span 3;font-family:var(--display);font-size:46px;line-height:.9;color:#d9b25f55;transition:color .4s}
.steps .dur{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.steps h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;letter-spacing:.03em;color:var(--cream)}
.steps p{font-size:14.5px;color:var(--muted)}
.steps li.active{border-color:#d9b25f99;background:linear-gradient(135deg,#221b12,var(--card) 60%);transform:translate3d(4px,0,0)}
.steps li.active .no{color:var(--gold)}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}.steps li{grid-template-columns:1fr}.steps .no{grid-row:auto}.steps li.active{transform:translate3d(0,-4px,0)}.enter-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards{display:grid;gap:12px}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{padding:20px;border:1px solid var(--line-soft);border-radius:18px;background:var(--card)}
.card .sym{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border:1px solid #d9b25f55;border-radius:12px;background:#d9b25f12;color:var(--gold-hi)}
.card .sym .icon{width:21px;height:21px}
.card h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1;letter-spacing:.03em;color:var(--cream)}
.card p{margin-top:8px;font-size:14.5px;color:var(--muted)}
.card p b{color:var(--ink);font-weight:500}

/* Battle replay (mirrors the Team Arena board) */
.board-wrap{padding:18px 12px 20px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(ellipse at 50% 0%,#2a163844,transparent 70%),#0e0c12}
.board-top{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;padding:0 4px}
.board-phase{font-family:var(--display);font-size:24px;letter-spacing:.08em;color:var(--gold)}
.board-caption{font-size:13.5px;color:var(--muted)}
.arena{position:relative;padding:4px 0 2px;font-family:'Segoe UI',Arial,sans-serif}
.board,.balance{transition:opacity .45s}
.board{position:relative;display:grid;grid-template-columns:40fr 20fr 40fr;align-items:center}
.team{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;min-height:176px;padding:14px 6px;border-radius:16px;border:2px solid;background:linear-gradient(180deg,#202129,#11121a 55%,#0b0c12);overflow:hidden;transition:box-shadow .4s}
.team.blue{border-color:color-mix(in srgb,var(--blue) 65%,#242631)}
.team.red{border-color:color-mix(in srgb,var(--red) 65%,#242631)}
.team .name{font-size:clamp(13px,3.6vw,22px);font-weight:900;color:#fff;text-shadow:0 2px 0 #000,0 0 8px #000}
.team .score{font-size:clamp(32px,9vw,76px);font-weight:950;line-height:1;font-variant-numeric:tabular-nums;transition:opacity .3s}
.team.blue .score{color:var(--blue);text-shadow:0 0 22px color-mix(in srgb,var(--blue) 55%,transparent)}
.team.red .score{color:var(--red);text-shadow:0 0 22px color-mix(in srgb,var(--red) 55%,transparent)}
.team .gifts{display:flex;gap:4px;margin-top:auto;padding-top:8px}
.team .gifts img{width:22px;height:22px;object-fit:contain}
.team.glowing{box-shadow:0 0 34px color-mix(in srgb,var(--blue) 45%,transparent),inset 0 0 30px color-mix(in srgb,var(--blue) 25%,transparent)}
.mist-slate{position:absolute;left:50%;top:44px;display:grid;justify-items:center;gap:2px;padding:8px 10px;border-radius:10px;background:#3a4256;color:#c7cedd;font-size:24px;font-weight:900;letter-spacing:.2em;line-height:1;translate:-50% 0;opacity:0;transition:opacity .3s}
.mist-slate em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.12em;color:#9aa6bd}
.team.misted .score{opacity:0}
.team.misted .mist-slate{opacity:1}
.mid{position:relative;display:grid;justify-items:center;align-content:center;gap:8px;min-height:176px}
.vs{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid #454553;background:linear-gradient(180deg,#2a2b36,#161720);color:#fff;font-size:15px;font-weight:900;box-shadow:-8px 0 18px color-mix(in srgb,var(--blue) 35%,transparent),8px 0 18px color-mix(in srgb,var(--red) 35%,transparent)}
.speed-card{display:none;justify-items:center;min-width:76px;padding:6px;border:2px solid #ffe8a3;border-radius:12px;background:linear-gradient(180deg,#ffd755,#ff7147);color:#2a1608;box-shadow:0 0 22px #ff9a4f66}
.speed-card small{font-size:8px;font-weight:900;letter-spacing:.08em}
.speed-card b{font-size:16px;font-weight:950;line-height:1.1}
.speed-card span{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums}
.mid.speed .vs{display:none}
.mid.speed .speed-card{display:grid}
.clock{padding:4px 8px;border-radius:10px;background:#090a10;color:#fff;font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;border:1px solid #ffffff14}
.alarm-box{display:none;justify-items:center;gap:5px}
.alarm-box .pill{padding:4px 6px;border:1.5px solid #ffcf57;border-radius:8px;background:#58310c;color:#ffe3a0;font-size:9px;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.alarm{position:relative;display:grid;place-items:center;width:56px;height:56px;margin-top:6px;border:2px solid #e7bd5e;border-radius:50%;background:#000;color:#fff;font-size:22px;font-weight:950}
.alarm .bell{position:absolute;top:-5px;width:15px;height:9px;border:2px solid #e7bd5e;border-bottom:0;border-radius:9px 9px 0 0;background:#000}
.alarm .bell.l{left:3px;rotate:-40deg}
.alarm .bell.r{right:3px;rotate:40deg}
.alarm-box small{font-size:10px;font-weight:900;letter-spacing:.06em;color:#ffcf57}
.alarm-box em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.08em;color:#fff}
.mid.snipe .vs,.mid.snipe .clock,.mid.snipe .speed-card{display:none}
.mid.snipe .alarm-box{display:grid}
.mid.snipe .alarm{animation:ring .22s linear infinite}
@keyframes ring{0%,100%{rotate:0deg}25%{rotate:-6deg}75%{rotate:6deg}}
.board.pulse .team{animation:gold-pulse 1.2s ease-in-out infinite}
@keyframes gold-pulse{0%,100%{box-shadow:0 0 0 #e7bd5e00}50%{box-shadow:0 0 26px #e7bd5e66}}
.holo{position:absolute;top:-8px;left:50%;translate:-50% 0;white-space:nowrap;font-size:12px;font-weight:950;letter-spacing:.06em;color:#ffe08a;text-shadow:0 0 14px #ffcf57cc;opacity:0;transition:opacity .3s,translate .6s}
.holo.on{opacity:1;translate:-50% -10px}
.glove-card{position:absolute;left:50%;top:50%;z-index:3;display:grid;justify-items:center;gap:2px;min-width:130px;padding:10px 14px 12px;border:2px solid #ffcf69;border-radius:14px;background:linear-gradient(180deg,#2a1d0f,#120c07);color:#ffe7ae;box-shadow:0 12px 40px #000a,0 0 24px #ffcf6955;translate:-50% -50%;scale:.85;opacity:0;transition:opacity .3s,scale .45s var(--spring-pop)}
.glove-card small{font-size:10px;font-weight:900;letter-spacing:.12em;color:#ffcf69}
.glove-card b{font-size:30px;font-weight:950;line-height:1;color:#ffe08a}
.glove-card em{font-style:normal;font-size:14px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.glove-card i{display:block;width:100%;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#ffcf69,#b88a2e)}
.glove-card.on{opacity:1;scale:1}
.balance{position:relative;height:12px;margin-top:14px;border-radius:12px;overflow:hidden;background:var(--red)}
.balance i{position:absolute;inset:0;background:var(--blue);transform-origin:0 50%;transform:scaleX(.5);transition:transform .48s ease}
.balance span{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:900;letter-spacing:.14em;color:#aab3c6;background:#283043;opacity:0;transition:opacity .3s}
.balance.hidden-share span{opacity:1}
.singing-timer{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:6px;border:1px solid #ffffff14;border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#8e50d840,transparent 65%),linear-gradient(180deg,#1a1024,#0c0812);opacity:0;pointer-events:none;transition:opacity .45s}
.singing-timer.on{opacity:1}
.st-title{font-family:var(--display);font-size:18px;letter-spacing:.3em;color:#e6d0ac}
.st-clock{font-size:clamp(52px,14vw,88px);font-weight:950;line-height:1;color:#fff1c6;font-variant-numeric:tabular-nums;text-shadow:0 0 30px #fff1c655}
.st-label{font-size:11px;font-weight:900;letter-spacing:.2em;color:#eeffb0}
.st-chip{margin-top:6px;padding:4px 12px;border:1px solid #ffcf6999;border-radius:999px;background:#ffcf6914;color:#ffe3a0;font-size:10px;font-weight:800;letter-spacing:.1em}
.st-warn{margin-top:4px;padding:5px 12px;border-radius:8px;background:#ff293e26;color:#ff8a98;font-size:10px;font-weight:900;letter-spacing:.1em}
.arena.singing-mode .board,.arena.singing-mode .balance,.arena.result-mode .board,.arena.result-mode .balance{opacity:0}
.winner-card{position:absolute;left:50%;top:50%;display:grid;justify-items:center;gap:8px;width:min(460px,92%);padding:22px 18px;border:1px solid #d6a858;border-radius:16px;outline:1px solid #d6a85866;outline-offset:-7px;background:linear-gradient(160deg,#211020,#100915 55%,#2a1224);text-align:center;translate:-50% -50%;scale:.94;opacity:0;pointer-events:none;transition:opacity .7s,scale .7s var(--spring)}
.winner-card .trophy{color:#f5d799}
.winner-card .trophy .icon{width:32px;height:32px}
.winner-card h4{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(28px,7vw,40px);letter-spacing:.06em;color:#f5d799}
.winner-card p{font-size:13px;color:#cdbfd3}
.arena.result-mode .winner-card{opacity:1;scale:1}
@media (min-width:760px){.board-wrap{padding:26px 28px 28px}.team{min-height:232px;padding:20px 12px 18px;border-radius:22px}.team .gifts img{width:34px;height:34px}.mid{min-height:232px;gap:12px}.vs{width:62px;height:62px;font-size:20px}.clock{font-size:26px;padding:6px 14px}.speed-card{min-width:106px;padding:8px 12px}.speed-card small{font-size:10px}.speed-card b,.speed-card span{font-size:22px}.alarm{width:78px;height:78px;font-size:30px}.alarm-box .pill{font-size:12px}.mist-slate{top:58px;padding:10px 16px;font-size:34px}.glove-card{min-width:170px}}

/* ---------- Power-ups ---------- */
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 auto 22px;padding:5px;max-width:560px;border:1px solid var(--line-soft);border-radius:14px;background:var(--card)}
.tabs button{min-width:0;min-height:44px;padding:0 4px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:clamp(12.5px,3.5vw,14px);font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1a1206;font-weight:600}
.power-panel{display:grid;gap:14px}
@media (min-width:640px){.power-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.power-panel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.power-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-soft);border-radius:20px;background:var(--card);animation:card-in .7s var(--spring) calc(var(--i,0) * 70ms) both}
@keyframes card-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.power-card .art{display:grid;place-items:center;height:210px;border-bottom:1px solid var(--line-soft);background:radial-gradient(circle at 50% 55%,#d9b25f24,transparent 62%),#0b0a0e}
.power-card .art img{width:176px;height:176px;object-fit:contain;filter:drop-shadow(0 14px 26px #000c);transition:transform .7s var(--spring-pop)}
@media (hover:hover){.power-card:hover .art img{transform:translate3d(0,-5px,0) scale(1.04)}}
.power-card .body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.power-card h3{font-family:var(--display);font-weight:400;font-size:32px;line-height:1;letter-spacing:.03em;color:var(--cream)}
.power-card .effect{font-size:10.5px;font-weight:600;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.power-card p{font-size:14.5px;color:var(--muted)}
.power-facts{display:grid;gap:0;margin:4px 0 0;border-top:1px solid var(--line-soft)}
.power-facts div{display:grid;grid-template-columns:5.6em 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.power-facts dt{font-size:10.5px;font-weight:600;line-height:1.9;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.power-facts dd{margin:0;font-size:13.5px;line-height:1.5;color:#d8d0c3}
.power-card code{align-self:flex-start;padding:4px 10px;border:1px solid var(--line-soft);border-radius:8px;background:#0a090c;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--gold-hi)}
.power-card .try{align-self:flex-start;margin-top:auto;padding:6px 0;border:0;background:none;color:var(--gold);font-size:14px;cursor:pointer}
.power-note{max-width:760px;margin:18px auto 0;text-align:center;font-size:13px;color:var(--dim)}
.mini-speed{display:grid;justify-items:center;min-width:150px;padding:14px 22px;border:2px solid #ffe8a3;border-radius:16px;background:linear-gradient(180deg,#ffd755,#ff7147);color:#2a1608;font-family:'Segoe UI',Arial,sans-serif;animation:speed-glow 2.4s ease-in-out infinite}
.mini-speed small{font-size:12px;font-weight:900;letter-spacing:.1em}
.mini-speed b{font-size:40px;font-weight:950;line-height:1.05}
.mini-speed span{font-size:32px;font-weight:900;font-variant-numeric:tabular-nums}
@keyframes speed-glow{0%,100%{box-shadow:0 0 22px #ff9a4f40}50%{box-shadow:0 0 44px #ff9a4f80}}
.mini-snipe{display:grid;justify-items:center;gap:6px;font-family:'Segoe UI',Arial,sans-serif}
.mini-snipe .pill{padding:5px 12px;border:1.5px solid #ffcf57;border-radius:8px;background:#58310c;color:#ffe3a0;font-size:13px;font-weight:900}
.mini-snipe .alarm{width:88px;height:88px;font-size:34px;animation:ring .22s linear infinite}
.mini-snipe small{font-size:13px;font-weight:900;letter-spacing:.06em;color:#ffcf57}
.mini-snipe em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;color:#fff}
.mini-mvp{display:grid;justify-items:center;gap:6px;width:min(250px,80%);padding:18px 16px 16px;border:1px solid #d6a858;border-radius:120px 120px 14px 14px;outline:1px solid #d6a85855;outline-offset:-6px;background:radial-gradient(circle at 50% 0,#e7bf7630,transparent 60%),linear-gradient(160deg,#2a1224,#100915);text-align:center}
.mini-mvp .crown{color:#f5d799}.mini-mvp .crown .icon{width:30px;height:30px}
.mini-mvp b{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.08em;color:#f5d799}
.mini-mvp small{font-size:11px;letter-spacing:.08em;color:#cdbfd3}
.chips-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.chips-mini span{padding:3px 9px;border:1px solid #e7bf7666;border-radius:999px;font-size:11px;color:#ffe5ad}
.boost{display:grid;gap:18px;padding:22px 18px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.boost h2{margin-top:10px;font-family:var(--display);font-weight:400;font-size:38px;line-height:1;letter-spacing:.03em;color:var(--cream)}
.boost p{margin-top:8px;color:var(--muted);font-size:14.5px}
.boost-toggles{display:grid;gap:8px}
.boost-toggles button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1px solid var(--line-soft);border-radius:12px;background:#0a090c;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .5s var(--spring)}
.boost-toggles button .icon{width:20px;height:20px;color:var(--gold)}
.boost-toggles button b{font-family:var(--display);font-weight:400;font-size:25px;color:var(--gold-hi)}
.boost-toggles button[aria-pressed="true"]{border-color:var(--gold);background:#d9b25f1a}
.boost-toggles button:active{transform:scale(.98)}
.boost-result{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;margin-top:10px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:12px;background:#0a090c}
.boost-gift{padding:6px 12px;border-radius:999px;background:#256af422;color:#bcd2ff;font-size:13px}
.boost-arrow{width:18px;height:18px;color:var(--dim)}
.boost-score{color:var(--muted);font-size:14px}
.boost-score strong{display:inline-block;font-family:var(--display);font-weight:400;font-size:42px;line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.boost-why{grid-column:1/-1;font-size:13px;color:var(--muted)}
@media (min-width:900px){.boost{grid-template-columns:1fr 1.2fr;align-items:center;padding:30px}.boost-toggles{grid-template-columns:repeat(3,minmax(0,1fr))}.boost-toggles button{grid-template-columns:1fr;justify-items:start;min-height:92px;padding:12px 14px}}
.practice-card{display:grid;gap:16px;padding:22px 18px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(ellipse at 100% 0%,#a3122c30,transparent 60%),var(--card)}
.practice-card h2{margin-top:10px;font-family:var(--display);font-weight:400;font-size:38px;line-height:1;letter-spacing:.03em;color:var(--cream)}
.practice-card p{margin-top:8px;color:var(--muted);font-size:14.5px}
.practice-card .btn-ghost{justify-self:start}
@media (min-width:900px){.practice-card{grid-template-columns:1fr auto;align-items:center;padding:28px 30px}}
.practice-wrap{margin-top:14px;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:#0b0615}
.practice-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.practice-bar span{margin-right:auto;font-size:13px;color:var(--muted)}
.practice-wrap iframe{display:block;width:100%;height:900px;border:0}

/* ---------- Rules (game mechanics) ---------- */
.rules-tools{display:grid;gap:12px;margin-bottom:18px}
.search{position:relative;display:block}
.search .icon{position:absolute;left:16px;top:50%;width:19px;height:19px;margin-top:-9.5px;color:var(--gold);pointer-events:none}
.search input{width:100%;min-height:52px;padding:0 16px 0 46px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;transition:border-color .25s,box-shadow .25s}
.search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px #d9b25f22}
.search input::placeholder{color:var(--dim)}
.chips{display:flex;gap:8px;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter);overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;min-height:40px;padding:0 16px;border:1px solid var(--line-soft);border-radius:999px;background:var(--card);color:var(--muted);font-size:14px;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .5s var(--spring)}
.chips button[aria-pressed="true"]{border-color:transparent;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1a1206;font-weight:600}
.chips button:active{transform:scale(.95)}
.rules-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--dim)}
.link-btn{padding:6px 0;border:0;background:none;color:var(--gold);font-size:13.5px;cursor:pointer}
.topics{display:grid;gap:10px}
@media (min-width:1024px){.rules-tools{grid-template-columns:minmax(0,1fr) auto;align-items:center}.chips{margin:0;padding:2px 0}.rules-meta{grid-column:1/-1}.topics{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.topic{border:1px solid var(--line-soft);border-radius:16px;background:var(--card);overflow:hidden;transition:border-color .3s,background .3s;animation:card-in .6s var(--spring) var(--d,0ms) both}
.topic[open]{border-color:var(--line);background:linear-gradient(180deg,#19151c,var(--card) 70%)}
.topic summary{display:flex;align-items:center;gap:14px;padding:15px 16px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.topic summary::-webkit-details-marker{display:none}
.topic summary .sym{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #d9b25f55;border-radius:11px;background:#d9b25f12;color:var(--gold-hi)}
.topic summary .sym .icon{width:20px;height:20px}
.topic summary b{display:block;font-family:var(--display);font-weight:400;font-size:25px;line-height:1.05;letter-spacing:.04em;color:var(--cream)}
.topic summary small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--dim)}
.topic summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:translate3d(0,-2px,0) rotate(45deg);transition:transform .45s var(--spring)}
.topic[open] summary::after{transform:translate3d(0,2px,0) rotate(-135deg)}
.topic-body{padding:2px 16px 18px}
.rules{display:grid;gap:11px;margin:0;padding:0;list-style:none;counter-reset:r}
.rules>li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.62;color:#d9d2c6;counter-increment:r}
.rules>li::before{content:counter(r);position:absolute;left:0;top:1px;display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#d9b25f1c;color:var(--gold);font-size:12px;font-weight:600}
.rules b{color:var(--ink);font-weight:600}
.rules code{padding:1px 6px;border:1px solid var(--line-soft);border-radius:6px;background:#0a090c;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--gold-hi)}
.extra{margin-top:16px}
.gift-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gift-list>div{min-width:0;padding:10px clamp(8px,2.6vw,12px);border-radius:12px}
.gift-list .b{border:1px solid #256af466;background:#256af414}
.gift-list .r{border:1px solid #ff293e66;background:#ff293e12}
.gift-list strong{display:block;margin-bottom:4px;font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.06em}
.gift-list .b strong{color:#8fb4ff}.gift-list .r strong{color:#ff8fa0}
.gift-list ul{margin:0;padding:0;list-style:none}
.gift-list li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px solid #ffffff10;font-size:12.5px;line-height:1.35;color:#ddd6ca}
.gift-list li span{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.extra .note{margin-top:10px;padding:10px 12px;border-left:2px solid var(--gold);background:#d9b25f0d;font-size:13px;color:var(--muted)}
.no-results{padding:22px;text-align:center;color:var(--muted)}
@supports (interpolate-size:allow-keywords){
  .topic{interpolate-size:allow-keywords}
  .topic::details-content{block-size:0;overflow-y:clip;transition:block-size .5s var(--ease-out),content-visibility .5s allow-discrete}
  .topic[open]::details-content{block-size:auto}
}

/* ---------- Enter ---------- */
.entry-card{display:grid;justify-items:center;padding:26px 20px 28px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at 50% 0%,#a3122c3a,transparent 65%),var(--card);text-align:center}
.entry-price{font-family:var(--display);font-size:clamp(104px,32vw,168px);line-height:.85;color:var(--gold-hi);text-shadow:0 10px 40px #d9b25f33}
.entry-unit{margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--cream)}
.entry-card .copy{max-width:520px;margin-top:16px;color:var(--muted);font-size:14.5px}
.entry-card .btn-crimson{margin-top:22px;font-size:26px;min-height:54px;padding:0 24px}
.entry-card .btn-crimson .icon{width:20px;height:20px}
.checklist{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.checklist li{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:14px;background:var(--card);font-size:14.5px;color:var(--muted)}
.checklist li b{color:var(--ink);font-weight:600}
.checklist .icon{margin-top:3px;width:18px;height:18px;color:var(--gold)}
@media (min-width:760px){.checklist{grid-template-columns:1fr 1fr}}

/* Footer */
.footer{max-width:var(--wrap);margin:0 auto;padding:30px var(--gutter) 40px;border-top:1px solid var(--line-soft);display:grid;gap:12px;justify-items:center;text-align:center;color:var(--dim);font-size:12.5px}
.footer p:not(.kicker){max-width:560px}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1}
  .layer{will-change:auto}
}

/* Grouped rulebook: short sections with clear headings. */
.rule-part + .rule-part{margin-top:24px;padding-top:18px;border-top:1px solid var(--line-soft)}
.rule-part h3{margin:8px 0 12px;font-size:16px;color:var(--gold-hi);line-height:1.4}

/* Curated singer powers on Home. */
.toxic-intro{text-align:center;color:var(--muted);margin:-6px 0 22px}
.toxic-picks .tile{border:1px solid #d5b16c38;border-radius:18px;padding:16px 10px 20px;background:radial-gradient(ellipse at top,#d5b16c16,transparent 70%),#111015;align-content:start}
.toxic-picks .tile small{color:var(--muted);font-size:clamp(11px,2.8vw,14px);line-height:1.5;text-align:center}
.toxic-picks .tile span{font-size:clamp(16px,4vw,24px)}
.power-card[id]{scroll-margin-top:90px}
.power-card[id]:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.tabs button{white-space:normal}
@media(max-width:440px){.toxic-picks{gap:8px}.toxic-picks .tile{padding:10px 5px 14px;border-radius:12px}}