/* Layout: three buttons switch between Inicio, Tienda and Formación. Inicio = giant rotating headline, then X-style posts with a side panel for the next game and the last five; the archive opens from the end of the news. Formación copies the edits app's Lineup template. */
:root{
  --bg:#000000;
  --s1:#0B0B0B;
  --s2:#141414;
  --fg:#FFFFFF;
  --fg-2:#D6D6D6;
  --line:#1F1F1F;
  --line-2:#2C2C2C;
  --y:#FFD100;
  --y-ink:#141000;
  --red:#E8253A;
  --blue:#2457F5;
  --blue-txt:#5B84FF;
  --navy:#0A1E4A;
  --win:#1FBF5B;
  --draw:#8A8F98;
  --r:4px;
  --stripe:repeating-linear-gradient(90deg,#000 0 26px,#080808 26px 52px);
  --stripe-in:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 26px,rgba(255,255,255,0) 26px 52px);
  --box:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--stripe-in),#0A0A0A;
  --box-shadow:0 28px 50px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  --sans:"Satoshi","Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"Clash Display","Satoshi","Arial Black",Arial,sans-serif;
  --mono:"Satoshi","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ed:"Montserrat","Arial Black",Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--y);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@container (max-width:600px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}

.app{container-type:inline-size;background:var(--bg)}

/* header */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(0,0,0,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.head::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--y) 0 12%,var(--red) 12% 24%,var(--blue) 24% 76%,var(--red) 76% 88%,var(--y) 88% 100%)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.mark{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;line-height:1}
.mark span{color:var(--y)}
.btns{display:flex;gap:34px;align-self:stretch}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.07em;text-transform:uppercase;color:#fff;line-height:1}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:3px;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{transform:scaleX(.35)}
.btn[aria-pressed="true"]{color:var(--y)}
.btn[aria-pressed="true"]::after{transform:scaleX(1)}
.pronto{font-family:var(--sans);font-size:9.5px;font-weight:900;letter-spacing:.12em;background:var(--red);color:#fff;padding:4px 6px 3px;border-radius:2px;line-height:1}
@container (max-width:640px){
  .head-row{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-top:14px}
  .mark{text-align:center;font-size:19px}
  .btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;height:50px;margin-top:6px}
  .btn{font-size:14.5px;letter-spacing:.05em}
  .btn::after{left:22%;right:22%;bottom:8px}
  .pronto{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:8px;padding:3px 4px 2px}
}

/* ticker */
.tick{background:var(--y);color:#000}
.tick-row{display:flex;align-items:stretch;height:42px;font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.now{display:flex;align-items:center;gap:8px;flex:none;padding:0 16px;background:var(--red);color:#fff;font-weight:700}
.now i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}
.roll{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.roll-track{display:flex;width:max-content;animation:roll 50s linear infinite}
.roll-track span{display:inline-flex;align-items:center;gap:26px;padding-left:26px;white-space:nowrap}
.roll-track span::after{content:"/";color:var(--red);font-weight:700}
@keyframes roll{to{transform:translateX(-50%)}}
@container (max-width:600px){.tick .wrap{padding-left:0}.tick-row{height:38px;font-size:13px}.now{padding:0 12px}}

.view[hidden]{display:none}

/* hero */
.hero{padding-block:52px 60px;border-bottom:1px solid var(--line);background:var(--stripe);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.panels{position:absolute;top:0;bottom:0;right:0;width:30cqi;max-width:400px;pointer-events:none}
.panels i{position:absolute;top:0;bottom:0}
.panels .p-y{right:0;width:34%;background:var(--y);clip-path:polygon(45% 0,100% 0,100% 100%,0 100%)}
.panels .p-r{right:26%;width:30%;background:var(--red);clip-path:polygon(45% 0,100% 0,55% 100%,0 100%)}
.panels .p-b{right:48%;width:52%;background:var(--blue);clip-path:polygon(35% 0,100% 0,65% 100%,0 100%)}
@container (max-width:1000px){.panels{width:22cqi}}
@container (max-width:700px){.panels{bottom:auto;height:8px;width:100%;max-width:none}.panels i{clip-path:none}.panels .p-y{width:15%}.panels .p-r{right:15%;width:15%}.panels .p-b{right:30%;width:70%}}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:40px;max-width:900px}
.bars button{height:20px;display:flex;align-items:center}
.bars button span{display:block;width:100%;height:3px;background:var(--line-2);position:relative;overflow:hidden}
.bars button span i{position:absolute;inset:0;background:var(--y);transform-origin:left;transform:scaleX(0)}
.bars button.done span i{transform:scaleX(1);background:var(--fg)}
.bars button.on span i{animation:fill 6s linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.slide{display:none}
.slide.on{display:block;animation:rise .6s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kicker{font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.y{color:var(--y)} .b{color:var(--blue-txt)} .r{color:var(--red)} .d{color:var(--fg-2)}
.big{font-family:var(--disp);font-weight:600;font-size:clamp(42px,8.4cqi,112px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;margin:0;max-width:15ch;text-wrap:balance}
.big em{font-style:normal;color:var(--y)}
.under{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;margin-top:26px;font-size:15px;font-weight:500;color:var(--fg-2);text-transform:uppercase;letter-spacing:.06em}
.under strong{color:var(--fg);font-weight:800}
.meter{display:flex;flex-direction:column;gap:9px}
.meter .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.meter .seg i{height:3px;background:var(--line-2)}
.meter .seg i.on{background:var(--blue)}
.meter .lab{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--fg-2)}
.meter .lab .cur{color:var(--blue-txt)}
.slide .meter{margin-top:28px;max-width:520px}
@container (max-width:600px){.hero{padding-block:32px 40px}.bars{margin-bottom:26px}.under{font-size:13px;gap:8px 18px}}

/* home grid */
.main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;padding-block:28px 100px;align-items:start}
.side{position:sticky;top:150px;display:flex;flex-direction:column;gap:16px}
@container (max-width:1000px){.main{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:22px}.side{position:static;order:-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:700px){.side{grid-template-columns:minmax(0,1fr)}}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:6px}
.chip{height:36px;padding:0 15px;border-radius:var(--r);background:#111;border:1px solid var(--line-2);font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:#555}
.chip[aria-pressed="true"]{background:var(--y);border-color:var(--y);color:#000}

/* X-style posts */
.post{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding-block:22px;border-bottom:1px solid var(--line)}
.post[hidden]{display:none}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.av-club{background:var(--y);color:var(--y-ink)}
.av-ap{background:#fff;color:#000}
.av-j{background:var(--s2);color:#fff;border:1px solid var(--line-2)}
.p-body{display:flex;flex-direction:column;gap:9px;min-width:0}
.p-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;line-height:1.3}
.p-top strong{font-weight:800}
.p-top .t{color:var(--fg-2);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.trust{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-2)}
.trust i{width:7px;height:7px;border-radius:50%;flex:none}
.tg-y{background:var(--y)} .tg-r{background:var(--red)} .tg-w{background:var(--fg)}
.tags{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);display:flex;gap:12px;flex-wrap:wrap}
.p-text{margin:0;font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.005em}
.media{margin-top:4px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16/9;background:var(--s2)}
.media img{width:100%;height:100%;object-fit:cover}
.p-meter{max-width:440px;margin-top:2px}
.more{margin-top:24px;width:100%;height:54px;border-radius:var(--r);background:var(--box);border:1px solid var(--line-2);box-shadow:var(--box-shadow);font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;transition:border-color .15s}
.more:hover{border-color:var(--y)}
.more svg{width:18px;height:18px}
@container (max-width:600px){.post{grid-template-columns:38px minmax(0,1fr);gap:10px}.av{width:38px;height:38px;font-size:13px}.p-text{font-size:17.5px}}

/* boxes: dark with depth, the kit stripe inside, one lit edge in a kit colour */
.card{position:relative;background:var(--box);border:1px solid var(--line-2);border-top:3px solid var(--edge,var(--y));border-radius:var(--r);padding:20px;min-width:0;box-shadow:var(--box-shadow)}
#nextCard{--edge:var(--y)}
#nextCard.live{--edge:var(--red)}
#formCard{--edge:var(--blue)}
.label{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);margin:0 0 18px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.label span+span{color:var(--fg-2)}
.fx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;text-align:center}
.club{display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;min-width:0}
.crest{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:14px;letter-spacing:.5px;box-shadow:0 8px 20px rgba(0,0,0,.6)}
.crest img{width:44px;height:44px;object-fit:contain}
.fx-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.fx-mid b{font-family:var(--disp);font-weight:600;font-size:34px;letter-spacing:0;line-height:1;text-transform:uppercase}
.fx-mid span{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.fx-info{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:8px;font-size:14px}
.fx-info div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fx-info span:first-child{color:var(--fg-2);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;align-self:center}
.fx-info span:last-child{font-weight:700;text-align:right}
.cd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
.cd div{background:rgba(255,255,255,.035);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 4px 10px;text-align:center}
.cd b{display:block;font-family:var(--disp);font-weight:600;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.cd small{display:block;margin-top:6px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.form5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.f{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.sq{width:100%;max-width:52px;aspect-ratio:1;border-radius:var(--r);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:20px}
.sq.w{background:var(--win);color:#04210F}
.sq.d{background:var(--draw);color:#111}
.sq.l{background:var(--red);color:#fff}
.f .op{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.06em}
.f .rs{font-size:12px;font-weight:700;color:var(--fg-2);font-variant-numeric:tabular-nums}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px}
.note{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--fg-2);text-transform:uppercase}

/* archive */
.arc{padding-block:32px 100px}
.back{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--r);background:#111;border:1px solid var(--line-2);font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:24px}
.back svg{width:16px;height:16px}
.arc h1{font-family:var(--disp);font-weight:600;font-size:clamp(44px,7cqi,88px);text-transform:uppercase;line-height:.9;margin:0 0 10px}
.arc-count{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin:0 0 22px}
.search{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:var(--r);background:var(--box);border:1px solid var(--line-2);max-width:620px;margin-bottom:14px}
.search svg{width:18px;height:18px;flex:none;color:var(--fg-2)}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--fg);font:inherit;font-size:16px;outline:none}
.search input::placeholder{color:var(--fg-2)}
.month{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:34px 10px;border-bottom:2px solid var(--y)}
.month h2{font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:.03em;margin:0;text-transform:uppercase}
.month span{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--y)}
.ar{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;align-items:center;padding-block:16px;border-bottom:1px solid var(--line)}
.ar-date{font-size:12.5px;font-weight:700;color:var(--fg-2);line-height:1.4;text-transform:uppercase;letter-spacing:.06em}
.ar-date b{display:block;color:var(--fg);font-size:13.5px;font-weight:800}
.ar-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ar-text{font-weight:700;font-size:16.5px;line-height:1.3}
.ar-by{font-size:13px;color:var(--fg-2)}
.ar-th{width:120px;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);flex:none}
.ar-th img{width:100%;height:100%;object-fit:cover}
.arc-empty{padding-block:40px;color:var(--fg-2);font-size:16px}
@container (max-width:600px){.ar{grid-template-columns:minmax(0,1fr) auto;gap:12px}.ar-date{grid-column:1/-1;display:flex;gap:8px}.ar-date b{display:inline;font-size:12.5px}.ar-th{width:96px}}

/* formation: copy of the edits app's Lineup template */
.f-view{padding-block:36px 100px}
.f-head{margin-bottom:24px}
.f-head h1{font-family:var(--disp);font-weight:600;font-size:clamp(38px,6cqi,68px);text-transform:uppercase;line-height:.92;margin:0}
.f-head h1 em{font-style:normal;color:var(--y);white-space:nowrap}
.f-head p{margin:10px 0 0;color:var(--fg-2);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.f-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:48px;align-items:start}
@container (max-width:960px){.f-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

.lu{position:relative;width:100%;aspect-ratio:1080/1350;container-type:inline-size;border-radius:18px;overflow:hidden;background:#05070C;isolation:isolate}
.lu > *{position:absolute}
.lu-bg{inset:0;background:linear-gradient(100deg,#FFE680 0%,#FFD100 22%,#E8253A 50%,#2457F5 78%,#7E9BFF 100%)}
.lu-rays{inset:0;mix-blend-mode:screen;background:repeating-conic-gradient(from 90deg at 50% -5%,rgba(255,255,255,.1) 0deg 1.9deg,rgba(255,255,255,0) 1.9deg 3.75deg)}
.lu-shine{top:0;width:24.07%;height:38.5%;mix-blend-mode:screen}
.lu-shine.l{left:0;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
.lu-shine.r{right:0;clip-path:polygon(0 0,100% 0,100% 100%);background:linear-gradient(225deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
.lu-dim{inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35))}
.lu-crest{top:10%;width:37.9%;filter:drop-shadow(0 .8cqw 2cqw rgba(0,0,0,.5));opacity:.95}
.lu-crest.l{left:-15.25%}
.lu-crest.r{left:77.35%}
.lu-logo{left:4.02%;top:2.57%;width:5.06%;opacity:.95;filter:drop-shadow(0 0 1.5cqw rgba(0,0,0,.5));z-index:3002}
.lu-edge{left:1.667%;top:96.296%;width:96.667%;height:1.78%;clip-path:polygon(0 0,100% 0,99.6% 100%,.4% 100%);background:linear-gradient(180deg,#3a3c42,#1d1e22)}
.lu-pitch{left:1.667%;top:15.185%;width:96.667%;height:81.111%;clip-path:polygon(16.48% 0,83.52% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 40%,rgba(0,0,0,.25)),radial-gradient(ellipse 78% 78% at 50% 42%,#6c6e74 0%,#48494e 50%,#26272b 100%)}
.lu-light{left:1.667%;top:15.185%;width:96.667%;height:81.111%;clip-path:polygon(16.48% 0,83.52% 0,100% 100%,0 100%);mix-blend-mode:screen;background:radial-gradient(ellipse 42% 42% at 50% 42%,rgba(255,255,255,.22),rgba(255,255,255,.07) 60%,rgba(255,255,255,0))}
.lu-lines{inset:0;width:100%;height:100%}
.lu-beams,.lu-players{inset:0}
.beam{position:absolute;filter:blur(.93cqw);-webkit-mask-image:linear-gradient(to top,#000 40%,transparent 100%);mask-image:linear-gradient(to top,#000 40%,transparent 100%)}
.beam i{position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.45) 35%,rgba(255,255,255,.2) 58%,rgba(255,255,255,.06) 78%,rgba(255,255,255,0) 92%);clip-path:polygon(6.92% 0,93.08% 0,80% 89.66%,20% 89.66%)}
.lp{position:absolute;display:block;text-align:left}
.lp-head{position:absolute;filter:drop-shadow(0 .9cqw 2cqw rgba(0,0,0,.55))}
.lp-head img{width:100%;height:100%;object-fit:cover;object-position:top}
.lp-chip{position:absolute;left:0;border-radius:.74cqw;background:linear-gradient(180deg,#fff,#dfe4ee);box-shadow:0 .74cqw 2cqw rgba(0,0,0,.5);transition:background .2s}
.lp-name{position:absolute;font-family:var(--cond);font-weight:700;text-transform:uppercase;color:var(--navy);white-space:nowrap;text-align:center}
.lp-badge{position:absolute;border-radius:50%;background:linear-gradient(180deg,#fff,#dfe4ee);box-shadow:0 .74cqw 2cqw rgba(0,0,0,.5);display:grid;place-items:center}
.lp-badge img{width:71.7%;height:71.7%;object-fit:contain}
.lp[aria-pressed="true"] .lp-chip,.lp:hover .lp-chip{background:linear-gradient(180deg,#FFF3B0,#FFD100)}
.lu-title{left:12.96%;top:1.04%;width:74.07%;height:9.19%;border-radius:2.78cqw;border:.37cqw solid rgba(255,255,255,.85);background:linear-gradient(90deg,#FFD100,#E8253A 50%,#2457F5);box-shadow:0 .74cqw 2cqw rgba(0,0,0,.5);display:grid;place-items:center;overflow:hidden;z-index:3000}
.lu-title::after{content:"";position:absolute;inset:0 0 50% 0;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0))}
.lu-title span{font-family:var(--ed);font-weight:900;font-style:italic;font-size:8.89cqw;line-height:1;color:#fff;text-transform:uppercase;text-shadow:0 .55cqw 1.3cqw rgba(0,0,0,.55);white-space:nowrap}
.lu-sub{left:26.85%;top:9.48%;width:46.3%;height:3.56%;border-radius:1.3cqw;border:.19cqw solid rgba(255,255,255,.6);background:linear-gradient(90deg,#FFD100,#05070C 50%,#2457F5);box-shadow:0 .74cqw 2cqw rgba(0,0,0,.5);display:grid;place-items:center;z-index:3001}
.lu-sub span{font-family:var(--ed);font-weight:700;font-size:2.41cqw;line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.048cqw;white-space:nowrap}

.bench{margin-top:16px;border-radius:18px;border:1px solid var(--line-2);background:linear-gradient(180deg,#26272b,#141416);padding:22px 16px 18px;position:relative}
.bench-tab{display:inline-block;font-family:var(--ed);font-weight:900;font-style:italic;font-size:22px;line-height:1;color:#fff;text-transform:uppercase;padding:9px 24px;border-radius:999px;background:linear-gradient(180deg,#1d3a78,#0A1E4A);border:2px solid var(--y);margin-bottom:18px}
.bench-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px 0;justify-items:center}
.bslot{position:relative;width:140px;height:164px}.bslot .beam{position:absolute}
.bp{position:relative;width:112px;height:128px;display:block}
.bp-beam{position:absolute;left:6px;top:-6px;width:100px;height:104px;filter:blur(6px);background:linear-gradient(0deg,rgba(255,255,255,.6),rgba(255,255,255,.3) 40%,rgba(255,255,255,0));clip-path:polygon(7% 0,93% 0,80% 90%,20% 90%)}
.bp-head{position:absolute;left:14px;top:0;width:84px;height:89px;filter:drop-shadow(0 4px 9px rgba(0,0,0,.55))}
.bp-head img{width:100%;height:100%;object-fit:cover;object-position:top}
.bp-chip{position:absolute;left:0;top:85px;width:112px;height:30px;border-radius:6px;background:linear-gradient(180deg,#fff,#dfe4ee);box-shadow:0 5px 12px rgba(0,0,0,.45);transition:background .2s}
.bp-name{position:absolute;left:4px;width:81px;top:0;line-height:30px;font-family:var(--cond);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--navy);white-space:nowrap;text-align:center;letter-spacing:.16px}
.bp-badge{position:absolute;left:84px;top:78px;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#fff,#dfe4ee);box-shadow:0 4px 10px rgba(0,0,0,.45);display:grid;place-items:center}
.bp-badge img{width:23px;height:23px;object-fit:contain}
.bp[aria-pressed="true"] .bp-chip,.bp:hover .bp-chip{background:linear-gradient(180deg,#FFF3B0,#FFD100)}
@container (max-width:600px){.bench-tab{font-size:19px}}

.vote-card{--edge:var(--y);padding:0}
@container (max-width:960px){.vote-card{position:static}}
.vc-empty{color:var(--fg-2);font-size:15px;margin:0}
.vc-name{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.vc-face{width:64px;height:64px;border-radius:50%;background:linear-gradient(180deg,#6c6e74,#2a2b30);overflow:hidden;flex:none;border:2px solid #fff}
.vc-face img{width:100%;height:100%;object-fit:cover;object-position:top}
.vc-name b{font-family:var(--disp);font-weight:600;font-size:26px;text-transform:uppercase;line-height:1.02}
.vc-name span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin-top:6px}
.vc-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vbtn{height:50px;border-radius:var(--r);border:1px solid var(--line-2);background:#111;font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.07em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.vbtn svg{width:18px;height:18px}
.vbtn.up[aria-pressed="true"]{background:var(--win);border-color:var(--win);color:#04210F}
.vbtn.down[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.vc-bar{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.vc-bar .bar{height:8px;border-radius:2px;background:var(--red);overflow:hidden;display:flex}
.vc-bar .bar i{display:block;height:100%;background:var(--win);transition:width .4s}
.vc-bar .lg{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.vc-bar .lg span:first-child{color:var(--win)}
.vc-bar .lg span:last-child{color:var(--red)}
.top-out{margin-top:22px}
.to-row{display:flex;align-items:center;gap:12px;padding-block:11px;border-top:1px solid var(--line-2);font-size:14.5px}
.to-row b{font-family:var(--disp);font-weight:600;color:var(--y);width:18px}
.to-row span{flex:1;font-weight:700}
.to-row em{font-style:normal;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}

/* shop */
.shop{min-height:62vh;display:grid;place-items:center;padding-block:60px;background:var(--stripe);position:relative;overflow:hidden;text-align:center}
.shop .panels{width:100%;max-width:none;height:10px;bottom:auto}
.shop .panels i{clip-path:none}
.shop .panels .p-y{width:15%}.shop .panels .p-r{right:15%;width:15%}.shop .panels .p-b{right:30%;width:70%}
.shop-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.shop-ic{width:64px;height:64px;border-radius:var(--r);background:var(--y);display:grid;place-items:center}
.shop h1{font-family:var(--disp);font-weight:600;font-size:clamp(48px,9cqi,116px);text-transform:uppercase;line-height:.9;margin:6px 0 0}
.shop .soon{font-size:13px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:var(--y)}
.shop p{margin:0;color:var(--fg-2);font-size:16px;font-weight:500;max-width:34ch}
@media (prefers-reduced-motion:reduce){.now i{animation:none}.slide.on{animation:none}.bars button.on span i{animation:none;transform:scaleX(1)}}

/* fan votes panel: one section per vote, the me gusta ranking at the bottom */
.fv{padding:20px;border-bottom:1px solid var(--line-2)}
.fv:last-child{border-bottom:0}
.fv .label{margin-bottom:14px}
.fv-sub{margin:18px 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fv-note{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--y)}
.fv-face{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(180deg,#6c6e74,#2a2b30);border:1.5px solid #fff}
.fv-face img{width:100%;height:100%;object-fit:cover;object-position:top}
.fv-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.fv-row:first-of-type{border-top:0}
.fv-row b{font-family:var(--disp);font-weight:600;width:16px;color:var(--fg-2)}
.fv-row span:not(.fv-face){flex:1;font-weight:700;min-width:0}
.fv-row em{font-style:normal;font-family:var(--disp);font-weight:600;font-size:16px}
.fv-row em.hi{color:var(--win)}.fv-row em.lo{color:var(--red)}.fv-row em.none{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.fv-row.gold b{color:var(--y)}.fv-row.gold .fv-face{border-color:var(--y);box-shadow:0 0 0 2px rgba(255,209,0,.35)}
.rate{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.rate button{height:38px;border-radius:var(--r);background:#111;border:1px solid var(--line-2);font-family:var(--disp);font-weight:600;font-size:15px}
.rate button[aria-pressed="true"]{background:var(--y);border-color:var(--y);color:#000}
.mvp-btn{width:100%;margin-top:12px}
.mvp-btn[aria-pressed="true"]{background:var(--y);border-color:var(--y);color:#000}
.pr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;text-align:center}
.pr-side{display:flex;flex-direction:column;align-items:center;gap:6px}
.pr-side img{width:46px;height:46px;object-fit:contain}
.pr-side b{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.06em}
.pr-vs{font-family:var(--disp);font-weight:600;color:var(--fg-2)}
.pr-step{display:flex;align-items:center;gap:8px}
.pr-step button{width:34px;height:34px;border-radius:var(--r);background:#111;border:1px solid var(--line-2);font-size:20px;font-weight:700;line-height:1}
.pr-step span{min-width:30px;font-family:var(--disp);font-weight:600;font-size:32px;line-height:1}
.pr-save{width:100%;margin-top:14px}
.pr-top{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
.pr-top span{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:#111;border:1px solid var(--line-2);font-size:12.5px;font-weight:800}
.pr-top b{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--y)}
.lk-row{display:grid;grid-template-columns:22px 34px minmax(0,1fr) 30px 30px;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.lk-row:first-of-type{border-top:0}
.lk-row>b{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--fg-2)}
.lk-mid{display:flex;flex-direction:column;gap:5px;min-width:0}
.lk-mid span{font-weight:700;font-size:14px}
.lk-bar{display:block;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.lk-bar.has{background:var(--red)}
.lk-bar i{display:block;height:100%;background:var(--win);box-shadow:inset -1px 0 0 #000}
.lk-row em{font-style:normal;font-family:var(--disp);font-weight:600;font-size:14px;text-align:right}
.lk-row em.up{color:var(--win)}.lk-row em.dn{color:var(--red)}

/* vote tabs */
.fv-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:12px 12px 0}
.fv-tabs button{height:42px;border-radius:var(--r);background:#111;border:1px solid var(--line-2);font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.fv-tabs button[aria-selected="true"]{background:var(--y);border-color:var(--y);color:#000}
.fv-hint{margin:0 0 16px;font-size:15px;font-weight:600;line-height:1.4}
.fv-hint.warn{color:var(--red)}
.fv-row span small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--fg-2)}
.lp.off{opacity:.3;filter:grayscale(1)}
@container (max-width:400px){.fv-tabs button{font-size:11px;letter-spacing:0}}