/* Fuentes propias (licencia OFL) empaquetadas en la app: la identidad tipográfica de Rocket Life.
   --f-cond: titulares y cifras monumentales · --f-serif: la palabra emotiva en cursiva · --f-mono: micro-etiquetas · --f-text: texto */
@font-face { font-family:"Anton"; font-weight:400; font-style:normal; font-display:swap; src:url(/ui/f-anton-400-normal.woff2) format("woff2") }
@font-face { font-family:"Oswald"; font-weight:400; font-style:normal; font-display:swap; src:url(/ui/f-oswald-400-normal.woff2) format("woff2") }
@font-face { font-family:"Oswald"; font-weight:500; font-style:normal; font-display:swap; src:url(/ui/f-oswald-500-normal.woff2) format("woff2") }
@font-face { font-family:"Oswald"; font-weight:700; font-style:normal; font-display:swap; src:url(/ui/f-oswald-700-normal.woff2) format("woff2") }
@font-face { font-family:"Instrument Serif"; font-weight:400; font-style:normal; font-display:swap; src:url(/ui/f-instrument-serif-400-normal.woff2) format("woff2") }
@font-face { font-family:"Instrument Serif"; font-weight:400; font-style:italic; font-display:swap; src:url(/ui/f-instrument-serif-400-italic.woff2) format("woff2") }
@font-face { font-family:"DM Mono"; font-weight:400; font-style:normal; font-display:swap; src:url(/ui/f-dm-mono-400-normal.woff2) format("woff2") }
@font-face { font-family:"DM Mono"; font-weight:500; font-style:normal; font-display:swap; src:url(/ui/f-dm-mono-500-normal.woff2) format("woff2") }
@font-face { font-family:"Instrument Sans"; font-weight:400; font-style:normal; font-display:swap; src:url(/ui/f-instrument-sans-400-normal.woff2) format("woff2") }
@font-face { font-family:"Instrument Sans"; font-weight:500; font-style:normal; font-display:swap; src:url(/ui/f-instrument-sans-500-normal.woff2) format("woff2") }
@font-face { font-family:"Instrument Sans"; font-weight:700; font-style:normal; font-display:swap; src:url(/ui/f-instrument-sans-700-normal.woff2) format("woff2") }
:root { --f-cond:"Anton","Oswald","Bahnschrift Condensed","Bahnschrift",sans-serif; --f-oswald:"Oswald","Bahnschrift Condensed",sans-serif; --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
        --f-mono:"DM Mono",Consolas,"Cascadia Mono",monospace; --f-text:"Instrument Sans","Segoe UI",system-ui,sans-serif }
/* ===== Rocket Life · dirección de arte «retransmisión» =====
   Se carga la última y sustituye el aspecto de «panel de control genérico» (tarjetas redondeadas, micro-etiquetas con barrita, degradado índigo)
   por una identidad propia: paneles biselados en diagonal, cifras enormes, tipografía condensada, cortes oblicuos, azul eléctrico + naranja de llama. */
:root {
  --bg:#05070f; --card:#0b1120; --card2:#121a2e; --line:rgba(255,255,255,.085); --ink:#eef2fb; --muted:#8793b1;
  --accent:#ff8a2b; --accent2:#2f7bff; --hot:#ff8a2b; --cyan:#3fd0ff;
  --grad:linear-gradient(100deg,#1c5cff 0%,#3b9bff 100%); --shadow:none;
  --cut:16px; --edge:rgba(255,255,255,.16); --fill:linear-gradient(180deg,#0e1527,#0a1020);
  --ease:cubic-bezier(.16,1,.3,1);
}
html { background:#05070f }
body { background:#05070f !important; background-attachment:scroll !important }
body::before { -webkit-mask-image:none !important; mask-image:none !important; z-index:-1; opacity:.5;
  background:linear-gradient(115deg,transparent 0 62%,rgba(47,123,255,.07) 62% 63%,transparent 63%) 0 0/100% 100%,
             linear-gradient(115deg,transparent 0 84%,rgba(255,138,43,.05) 84% 84.4%,transparent 84.4%) 0 0/100% 100% }
#fx { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.9 }
.grain { position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite }
@keyframes grain { 0% { transform:translate(0,0) } 20% { transform:translate(-3%,2%) } 40% { transform:translate(2%,-3%) } 60% { transform:translate(-2%,-1%) } 80% { transform:translate(3%,3%) } 100% { transform:translate(0,0) } }

/* ---- paneles: biselados en diagonal, sin borde redondeado ni resplandor ---- */
.card { --poly:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  --poly-in:polygon(calc(var(--cut) - 1px) 0,100% 0,100% calc(100% - var(--cut) + 1px),calc(100% - var(--cut) + 1px) 100%,0 100%,0 calc(var(--cut) - 1px));
  position:relative; isolation:isolate; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:24px 24px 22px }
.card::before { content:"" !important; display:block !important; position:absolute !important; inset:0 !important; left:0 !important; right:0 !important; top:0 !important; height:auto !important; z-index:-2; opacity:1 !important; border-radius:0 !important;
  background:linear-gradient(135deg,var(--edge),rgba(255,255,255,.04) 45%,var(--edge)) !important; clip-path:var(--poly) }
.card::after { content:"" !important; display:block !important; position:absolute; inset:1px; z-index:-1; background:var(--fill); clip-path:var(--poly-in) }
.card.decision, .card.outcome { --edge:rgba(255,138,43,.75); --fill:linear-gradient(180deg,#1b1410,#0f0e16) }
.card.warnbox { --edge:rgba(251,191,36,.6) } .card.banner { --edge:rgba(63,208,255,.4) }
.card.c12 > h2:first-child { margin-bottom:18px }
.hero { border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 42px) 0,100% 42px,100% 100%,42px 100%,0 calc(100% - 42px)); box-shadow:none !important; border:0 !important }

/* ---- títulos: grandes, condensados, con marcador oblicuo ---- */
h2 { font:700 22px/1 "Bahnschrift SemiCondensed","Bahnschrift","Segoe UI",sans-serif !important; font-stretch:100%; letter-spacing:.045em !important; text-transform:uppercase; color:#fff !important; gap:20px !important; align-items:center !important; margin-bottom:18px !important; padding:2px 0 }
h2::before { width:8px !important; height:24px !important; border-radius:0 !important; background:var(--hot) !important; transform:skewX(-20deg); box-shadow:none !important; margin-right:2px }
h2 .ico, h2 > svg { display:none }
h2 .sub { font:600 13px var(--fd); letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-left:4px }
.eyebrow { letter-spacing:.2em !important }

/* ---- botones: paralelogramos con barrido de luz ---- */
button { border-radius:3px; font-family:var(--fd); font-weight:700; font-size:13px; letter-spacing:.07em; text-transform:uppercase; background:#17213a; border:1px solid rgba(255,255,255,.1); transition:transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s }
button.primary, button.big, .actions > button:not(.ghost):not(.danger):first-child { border:0; border-radius:0; padding:11px 26px; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); background:linear-gradient(100deg,#1c5cff,#3b9bff); color:#fff; box-shadow:none; text-shadow:0 1px 0 rgba(0,0,0,.25) }
button.primary:hover:not(:disabled), button.big:hover:not(:disabled) { background:linear-gradient(100deg,#2a6bff,#55b0ff); box-shadow:none; transform:translateX(3px) }
button.primary:active:not(:disabled) { transform:translateX(3px) scale(.97) }
button.ghost { background:transparent; border-color:rgba(255,255,255,.14) }
button:hover:not(:disabled):not(.primary):not(.big) { border-color:var(--hot); color:#fff }
.chip { border-radius:0 !important; clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); border:0 !important; padding:6px 16px !important; background:rgba(255,255,255,.07) !important; font:700 12px var(--fd); letter-spacing:.07em; text-transform:uppercase }
.chip.on { background:linear-gradient(100deg,#1c5cff,#3b9bff) !important }
.chip:hover { background:rgba(255,138,43,.22) !important }

/* ---- barras: segmentos oblicuos, relleno de llama ---- */
.bar { height:12px !important; border-radius:0 !important; background:rgba(255,255,255,.08) !important; transform:skewX(-20deg); overflow:hidden }
.bar > i { border-radius:0 !important; background-image:linear-gradient(90deg,#ff6a13,#ffb02e 70%,#ffe27a) !important; box-shadow:none }
.bar > i.ok { background-image:linear-gradient(90deg,#1f9d6b,#34d399) !important } .bar > i.no { background-image:linear-gradient(90deg,#c43a52,#fb7185) !important }
.hero .bar.tall { height:16px !important; box-shadow:none !important; max-width:560px } .hero .bar.tall > i { box-shadow:0 0 22px rgba(255,138,43,.8) !important; background-image:linear-gradient(90deg,#ff6a13,#ffb02e 75%,#fff2b0) !important }

/* ---- cifras: lo importante se lee primero ---- */
.kpis { gap:6px !important }
.kpi, .hero .kpi { background:none !important; border:0 !important; border-top:2px solid rgba(255,255,255,.2) !important; border-bottom:0 !important; border-radius:0 !important; backdrop-filter:none !important; padding:13px 6px 4px !important; position:relative }
.kpi::before { content:""; position:absolute; left:0; top:-2px; width:30px; height:2px; background:var(--hot) }
.kpi b, .hero .kpi b { font:800 clamp(34px,3.6vw,50px)/1 var(--fd) !important; font-stretch:80%; letter-spacing:-.01em !important; font-variant-numeric:tabular-nums }
.kpi span, .hero .kpi span { text-transform:uppercase; letter-spacing:.12em; font-size:10.5px !important; color:var(--muted) !important; font-weight:700 }
.rg-stat > b, .money { font-stretch:80% }
.tier { font-stretch:78% }
.hero .tier { font-size:clamp(56px,9vw,112px) !important; line-height:.9 !important; transform:skewX(-9deg); transform-origin:left bottom; letter-spacing:-.005em !important; text-shadow:0 0 0 #fff, 0 6px 0 rgba(255,138,43,.0), 0 10px 40px rgba(0,0,0,.7) !important }
.hero .tier::after { content:""; display:block; width:min(280px,40%); height:5px; margin-top:10px; background:linear-gradient(90deg,var(--hot),transparent); transform-origin:left; animation:tierLine 1.1s var(--ease) both .3s }
@keyframes tierLine { from { transform:scaleX(0) } to { transform:scaleX(1) } }
.hero .chapline { color:var(--cyan) !important; letter-spacing:.16em !important; font:700 14px var(--fd) !important }
.hero-emblem { filter:drop-shadow(0 0 30px rgba(47,123,255,.6)) !important }
.hero .kpis { padding-top:14px !important }
.gear { border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100% ,0 calc(100% - 12px)); border:0 !important; background:rgba(8,13,30,.72) !important }

/* ---- menú lateral ---- */
.side { background:linear-gradient(180deg,#070b16,#05080f) !important; border-right:1px solid rgba(255,255,255,.07) }
.side .tab { border-radius:0 !important; font:700 13px var(--fd) !important; letter-spacing:.12em; position:relative }
.side .tab.on { background:linear-gradient(90deg,rgba(47,123,255,.34),rgba(47,123,255,.02)) !important; clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%) }
.nav-ind { background:var(--hot) !important; width:4px !important; box-shadow:0 0 14px rgba(255,138,43,.8) }

/* ---- entrada de pantallas: corte en diagonal en cascada ---- */
@keyframes slashIn { from { opacity:0; transform:translateX(calc(var(--dir,1) * 36px)) skewX(calc(var(--dir,1) * -5deg)); filter:blur(3px) } to { opacity:1; transform:none; filter:none } }
.panel:not([hidden]) > .card, .panel:not([hidden]) > .hero { animation:slashIn .6s var(--ease) both !important }
.panel > :nth-child(2) { animation-delay:.07s !important } .panel > :nth-child(3) { animation-delay:.14s !important } .panel > :nth-child(4) { animation-delay:.21s !important }
.panel > :nth-child(5) { animation-delay:.28s !important } .panel > :nth-child(6) { animation-delay:.35s !important } .panel > :nth-child(n+7) { animation-delay:.42s !important }

/* ---- inclinación 3D en tarjetas interactivas ---- */
.tilt { transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transition:transform .25s var(--ease); will-change:transform; position:relative }
.tilt::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 60%) }
.tilt.hot::after { opacity:1 } .tilt.hot { transition:transform .06s linear }

/* ---- contratos de racha y tienda con más presencia ---- */
.rg-card { border-radius:0 !important; border:0 !important; border-top:0 !important; clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) !important; box-shadow:inset 0 3px 0 var(--c) }
.rg-label { font:800 22px/1.15 var(--fd) !important; font-stretch:80%; text-transform:uppercase }
.rg-stat { border:0 !important; border-radius:0 !important; background:none !important; border-top:2px solid rgba(255,255,255,.16) !important; padding-left:2px !important }
.rg-stat > b { font-size:56px !important }
.item { border-radius:0 !important; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px) }

@media (prefers-reduced-motion:reduce) { .grain, .hero .tier::after { animation:none } #fx { display:none } .tilt { transform:none !important } }

/* tienda: el botón de compra no grita; el azul se reserva para la acción principal de cada pantalla */
.item button.primary, .item .buy { background:rgba(47,123,255,.14); color:#cfe0ff; border:1px solid rgba(47,123,255,.55); clip-path:none; border-radius:2px; padding:9px 16px; text-shadow:none }
.item button.primary:hover:not(:disabled) { background:linear-gradient(100deg,#1c5cff,#3b9bff); color:#fff; transform:none }
.item .itile { border-radius:0 !important; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) }

/* ---- momentos estelares (cofres, galas, fichajes, subidas de nivel): secuencia con luz, onda de choque y letras que entran de golpe ---- */
.overlay:not([hidden])::before { content:""; position:fixed; left:50%; top:50%; width:220vmax; height:220vmax; margin:-110vmax 0 0 -110vmax; pointer-events:none; z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,138,43,.13) 0 5deg,transparent 5deg 15deg); -webkit-mask-image:radial-gradient(circle,#000 0,transparent 22%); mask-image:radial-gradient(circle,#000 0,transparent 22%);
  animation:beams 28s linear infinite, beamsIn 1.2s var(--ease) both }
@keyframes beams { to { transform:rotate(360deg) } } @keyframes beamsIn { from { opacity:0; scale:.4 } to { opacity:1; scale:1 } }
.overlay .ov-card { position:relative; z-index:2; border-radius:0 !important; border:0 !important; clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  box-shadow:none !important; animation:ovIn .8s var(--ease) both }
@keyframes ovIn { 0% { opacity:0; transform:scale(.82) translateY(40px) skewY(3deg) } 55% { opacity:1; transform:scale(1.025) translateY(-4px) } 100% { opacity:1; transform:none } }
.ov-flash { position:fixed; inset:0; background:radial-gradient(circle at 50% 42%,#fff,rgba(255,200,120,.6) 40%,transparent 75%); opacity:0; pointer-events:none; z-index:3; animation:ovFlash .75s ease-out }
@keyframes ovFlash { 0% { opacity:.95 } 100% { opacity:0 } }
.ov-ring { position:fixed; left:50%; top:42%; width:90px; height:90px; margin:-45px 0 0 -45px; border:3px solid var(--hot); border-radius:50%; opacity:0; pointer-events:none; z-index:3; animation:ovRing 1.3s var(--ease) both }
.ov-ring.r2 { border-color:var(--cyan); animation-delay:.14s } .ov-ring.r3 { border-color:#fff; border-width:1px; animation-delay:.28s }
@keyframes ovRing { 0% { opacity:.95; transform:scale(.15) } 100% { opacity:0; transform:scale(16) } }
.ov-title .lt { display:inline-block; opacity:0; transform:translateY(46px) skewX(-14deg) scale(1.5); animation:ltIn .55s var(--ease) forwards; animation-delay:calc(.3s + var(--i) * 30ms) }
@keyframes ltIn { 60% { opacity:1 } to { opacity:1; transform:translateY(0) skewX(-6deg) scale(1) } }
.ov-title .sp { display:inline-block; width:.32em }
.ov-kicker { animation:kick .7s .15s var(--ease) both } @keyframes kick { from { opacity:0; letter-spacing:.7em } to { opacity:1; letter-spacing:.2em } }
.ov-body .terms > span, .ov-body .gala-t, .ov-body p { animation:riseIn .6s var(--ease) both } .ov-body p { animation-delay:.75s }
.ov-body .terms > span:nth-child(1) { animation-delay:.9s } .ov-body .terms > span:nth-child(2) { animation-delay:1.02s } .ov-body .terms > span:nth-child(3) { animation-delay:1.14s } .ov-body .terms > span:nth-child(n+4) { animation-delay:1.26s } .ov-body .gala-t { animation-delay:.9s }
@keyframes riseIn { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }
.ov-body .actions { animation:riseIn .6s 1.3s var(--ease) both }
.ov-badge { animation:badgeSlam .9s .35s var(--ease) both !important }
@keyframes badgeSlam { 0% { opacity:0; transform:translateX(-50%) translateY(-160px) scale(2.2) } 55% { opacity:1; transform:translateX(-50%) translateY(6px) scale(.94) } 75% { transform:translateX(-50%) translateY(-3px) scale(1.04) } 100% { opacity:1; transform:translateX(-50%) } }
body.shake .shell { animation:shake .5s cubic-bezier(.36,.07,.19,.97) .35s both }
@keyframes shake { 10%,90% { transform:translate3d(-2px,0,0) } 20%,80% { transform:translate3d(4px,2px,0) } 30%,50%,70% { transform:translate3d(-7px,-2px,0) } 40%,60% { transform:translate3d(7px,2px,0) } }
#burst { position:fixed; inset:0; width:100%; height:100%; z-index:120; pointer-events:none }
.overlay .confetti { display:none }
@media (prefers-reduced-motion:reduce) { .overlay:not([hidden])::before, .ov-flash, .ov-ring { display:none } .ov-title .lt { animation:none; opacity:1; transform:none } }
.ov-title { font-size:clamp(44px,8vw,84px) !important; line-height:.95 !important; font-stretch:78%; letter-spacing:0 !important; margin:6px 0 12px !important; text-transform:uppercase; transform:skewX(-6deg) }
.ov-title .lt { transform-origin:50% 100% }
.ov-kicker { color:var(--hot) !important }

/* ---- marcos de perfil: un aro de verdad alrededor del emblema, la foto del menú y la tarjeta de carrera ---- */
body[data-frame] { --fr2:var(--fr) }
body[data-frame="m_oro"] { --fr:#ffc94d; --fr2:#fff2b0 } body[data-frame="m_neon"] { --fr:#2f9bff; --fr2:#7df9ff } body[data-frame="m_llama"] { --fr:#ff7a1a; --fr2:#ffd23f }
body[data-frame="m_hielo"] { --fr:#8fd3ff; --fr2:#ffffff } body[data-frame="m_campeon"] { --fr:#75bf25; --fr2:#ffd34d }
body[data-frame] .hero-emblem svg { filter:none !important }
body[data-frame] .hero-emblem { position:relative }
body[data-frame] .hero-emblem::before { content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:3;
  inset:-2px; padding:5px; background:conic-gradient(from 0deg,var(--fr) 0,var(--fr2) 14%,var(--fr) 30%,transparent 46%,var(--fr) 62%,var(--fr2) 80%,var(--fr) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:frameSpin 6s linear infinite; filter:drop-shadow(0 0 12px var(--fr)) }
body[data-frame] .hero-emblem::after { content:""; position:absolute; inset:-20px; border-radius:50%; pointer-events:none; z-index:2; border:1px solid var(--fr); opacity:.45; animation:framePulse 2.4s ease-in-out infinite }
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0deg }
body[data-frame] #sideAv .cav { border:3px solid transparent !important; box-sizing:border-box;
  background:linear-gradient(#0b1120,#0b1120) padding-box, conic-gradient(from var(--ang),var(--fr) 0,var(--fr2) 18%,var(--fr) 36%,transparent 52%,var(--fr) 68%,var(--fr2) 84%,var(--fr) 100%) border-box;
  box-shadow:0 0 14px 1px var(--fr) !important; animation:angSpin 5s linear infinite }
@keyframes angSpin { to { --ang:360deg } }
body[data-frame="m_llama"] .hero-emblem::before { animation-duration:3s } body[data-frame="m_neon"] .hero-emblem::before { animation-duration:9s }
body[data-frame="m_hielo"] .hero-emblem::after, body[data-frame="m_oro"] .hero-emblem::after { animation-duration:3.6s }
@keyframes frameSpin { to { transform:rotate(360deg) } }
@keyframes framePulse { 0%,100% { transform:scale(.97); opacity:.2 } 50% { transform:scale(1.04); opacity:.6 } }
@media (prefers-reduced-motion:reduce) { body[data-frame] .hero-emblem::before, body[data-frame] .hero-emblem::after, body[data-frame] #sideAv .cav { animation:none } }

/* ===== cargador de curvas de nivel (papel) y entrada de la pantalla de inicio ===== */
@property --r { syntax:'<percentage>'; inherits:false; initial-value:0% }
#boot { position:fixed; inset:0; z-index:3500; background:#05070f; color:#eef3ff; font-family:var(--f-mono); overflow:hidden; cursor:progress }
#boot canvas { position:absolute; inset:0; width:100%; height:100% }
#boot .boot-top, #boot .boot-bot { position:absolute; left:clamp(18px,3vw,44px); right:clamp(18px,3vw,44px); display:flex; justify-content:space-between; gap:20px; font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(238,243,255,.62) }
#boot .boot-top { top:clamp(16px,2.6vw,34px) } #boot .boot-bot { bottom:clamp(20px,3.4vw,44px); justify-content:space-between; align-items:flex-end }
#boot .boot-top i { display:inline-block; width:34px; height:1px; background:rgba(238,243,255,.5); margin:0 12px; vertical-align:middle }
#boot #bootStatus::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff7a1a; margin-right:10px; animation:bootBlink 1s steps(2) infinite } @keyframes bootBlink { 50% { opacity:.15 } }
#boot .boot-num { position:absolute; left:clamp(14px,2.8vw,40px); bottom:clamp(44px,7vw,92px); display:flex; align-items:flex-end; gap:6px; line-height:.8; }
#boot .boot-num b { font:400 clamp(120px,24vw,360px)/.8 var(--f-cond); letter-spacing:-.01em; font-variant-numeric:tabular-nums; min-width:1.6ch; text-align:left }
#boot .boot-num em { font:italic 400 clamp(36px,6vw,92px)/1 var(--f-serif); color:#ff7a1a; margin-bottom:.12em }
#boot .boot-line { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(238,243,255,.1) } #boot .boot-line i { display:block; height:100%; background:#ff7a1a; transform-origin:left; transform:scaleX(0) }
#boot.go .boot-num b { animation:bootPop .5s var(--ease) } @keyframes bootPop { 40% { transform:scale(1.05) } }
#boot.open { -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + .6%)); mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + .6%)); animation:irisOpen 1.25s cubic-bezier(.75,0,.2,1) forwards; pointer-events:none }
@keyframes irisOpen { from { --r:0% } to { --r:100% } }
body.booting { overflow:hidden }
/* la pantalla de inicio espera bajo el cargador y entra por capas cuando se abre el iris */
.intro.pre .rl-logo, .intro.pre .intro-tag, .intro.pre .intro-h, .intro.pre .intro-list, .intro.pre .intro-top, .intro.pre .intro-foot { opacity:0 }
.intro.rev .rl-logo { animation:logoReveal 1.4s var(--ease) both }
@keyframes logoReveal { 0% { opacity:0; transform:scale(1.35); filter:blur(14px); letter-spacing:.3em } 60% { opacity:1; filter:blur(0) } 100% { opacity:1; transform:none; filter:none } }
.intro.rev .intro-tag { animation:tagReveal 1.2s .35s var(--ease) both } @keyframes tagReveal { from { opacity:0; letter-spacing:.9em } to { opacity:1 } }
.intro.rev .intro-h { animation:riseIn .8s .7s var(--ease) both }
.intro.rev .intro-list { animation:riseIn .9s .85s var(--ease) both }
.intro.rev .intro-top, .intro.rev .intro-foot { animation:riseIn .8s 1.2s var(--ease) both }

/* ===== sistema tipográfico: condensada monumental + serif cursiva para la palabra emotiva + mono para micro-etiquetas ===== */
body { font-family:var(--f-text); font-size:15px }
h2 { font:700 22px/1 var(--f-oswald) !important; letter-spacing:.05em !important; text-transform:uppercase }
h2 .sub { font:500 11px var(--f-mono) !important; letter-spacing:.12em !important }
.tier, .hero .tier { font-family:var(--f-cond) !important; font-weight:400 !important; font-stretch:100% !important; letter-spacing:.005em !important }
.kpi b, .hero .kpi b, .rg-stat > b, .money, .mres-score, .mt b { font-family:var(--f-cond) !important; font-weight:400 !important; font-stretch:100% !important; letter-spacing:.01em !important }
.kpi b, .hero .kpi b { font-size:clamp(40px,4.4vw,64px) !important }
.kpi b em { font-style:normal } .kpi b .kpi-pc { font-size:.55em; margin-left:.04em; vertical-align:.32em }
.hero .kpi { min-width:0 } .hero .kpi b { white-space:nowrap; font-size:clamp(36px,3.9vw,64px) !important }
.rg-stat > b { font-size:72px !important }
.ov-title { font-family:var(--f-cond) !important; font-weight:400 !important; letter-spacing:.01em !important; font-stretch:100% !important }
.rg-label, .gala-t th { font-family:var(--f-oswald) !important; font-weight:500 !important; font-stretch:100% !important; letter-spacing:.02em }
.hero .chapline { font:italic 400 25px/1.1 var(--f-serif) !important; letter-spacing:0 !important; text-transform:none !important; color:#ffb067 !important }
.att-tier, .att-tier.h, .att-tier.c { font:italic 400 30px/1 var(--f-serif) !important; text-transform:none !important; letter-spacing:0 !important }
.eyebrow, .hero .eyebrow, .kpi span, .hero .kpi span, .rg-stat > span:first-child, .ov-kicker, .att-end, .sub.mono, .mres-top .sub { font-family:var(--f-mono) !important; font-weight:500 !important }
.side .tab, button, .chip, .att-col h4, .tab { font-family:var(--f-oswald) !important; font-weight:500 !important; letter-spacing:.1em }
button { font-size:13px } .side .tab { font-size:14px !important; letter-spacing:.12em }
.news-t, .ts, time { font-family:var(--f-mono) }
body { word-spacing:.06em } .hero .chapline, .att-tier, .att-tier.h, .att-tier.c { word-spacing:.14em !important }

/* ===== el resumen de temporada como película de scroll (papel crema) ===== */
.film { position:fixed; inset:0; z-index:3200; background:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(30,52,110,.55),transparent 70%),radial-gradient(ellipse 70% 60% at 10% 100%,rgba(255,122,26,.12),transparent 70%),#05070f; color:#eef3ff; font-family:var(--f-text); animation:filmIn 1s cubic-bezier(.75,0,.2,1) both }
@keyframes filmIn { from { clip-path:circle(0% at 50% 50%) } to { clip-path:circle(150% at 50% 50%) } }
.film.out { opacity:0; transition:opacity .6s; pointer-events:none }
body.filming { overflow:hidden }
.film-bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none }
.film-scroll { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; z-index:2; scrollbar-width:none } .film-scroll::-webkit-scrollbar { display:none }
.film-ui { position:absolute; z-index:6; left:clamp(18px,3vw,44px); right:clamp(18px,3vw,44px); top:clamp(16px,2.4vw,32px); display:flex; justify-content:space-between; align-items:center; font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(238,243,255,.65); pointer-events:none }
.film-ui i { display:inline-block; width:34px; height:1px; background:rgba(238,243,255,.5); margin:0 12px; vertical-align:middle }
.film-x { pointer-events:auto; font:500 11px var(--f-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:#eef3ff; background:transparent !important; border:1px solid rgba(238,243,255,.45) !important; border-radius:0 !important; clip-path:none !important; padding:9px 16px !important; cursor:pointer }
.film-x:hover { background:#eef3ff !important; color:#05070f !important }
.film-count { position:absolute; z-index:6; left:clamp(18px,3vw,44px); bottom:clamp(18px,3vw,38px); display:flex; align-items:baseline; gap:8px; font:500 11px var(--f-mono); letter-spacing:.14em; color:rgba(238,243,255,.65); pointer-events:none }
.film-count b { font:400 38px/1 var(--f-cond); color:#eef3ff; letter-spacing:0 } .film-count i { width:22px; height:1px; background:rgba(238,243,255,.5); align-self:center }
.film-count em { font:italic 400 18px var(--f-serif); letter-spacing:0; color:#ff7a1a; margin-left:10px; text-transform:none }
.film-count .fc-line { position:absolute; left:0; bottom:calc(100% + 12px); width:2px; height:90px; background:rgba(238,243,255,.15) } .film-count .fc-line u { display:block; width:100%; height:100%; background:#ff7a1a; transform-origin:top; transform:scaleY(0) }
.fc { position:relative; min-height:100vh; padding:0 clamp(24px,7vw,120px); display:flex; flex-direction:column; justify-content:center }
.fc-eyebrow { font:500 12px/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(238,243,255,.62); margin-bottom:clamp(14px,2.4vh,30px) } .fc-eyebrow i { display:inline-block; width:40px; height:1px; background:rgba(238,243,255,.5); margin:0 12px; vertical-align:middle }
.fc-serif { font:italic 400 clamp(26px,3.6vw,56px)/1.1 var(--f-serif); color:#ff7a1a; word-spacing:.12em } .fc-serif.big { font-size:clamp(40px,6vw,96px) }
.fc-lab { font:500 clamp(18px,2.2vw,34px)/1.1 var(--f-oswald); letter-spacing:.14em; text-transform:uppercase }
.fc-num { display:block; font:400 clamp(150px,33vw,520px)/.8 var(--f-cond); letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:#eef3ff }
/* portada */
.ch0 .fc-big { position:absolute; right:-1vw; top:50%; transform:translateY(-50%); font:400 clamp(300px,64vw,1000px)/.74 var(--f-cond); color:transparent; -webkit-text-stroke:2px rgba(255,122,26,.7); pointer-events:none; user-select:none }
.ch0 .fc-club { font:italic 400 clamp(54px,10vw,170px)/.95 var(--f-serif); overflow:hidden; padding:.06em 0; position:relative; z-index:2; letter-spacing:-.01em; word-spacing:.1em } .ch0 .fc-club span { display:inline-block }
.ch0 .fc-sub { font:500 13px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(238,243,255,.62); margin-top:clamp(14px,3vh,34px); position:relative; z-index:2 }
.ch0 .fc-scroll { position:absolute; left:50%; bottom:clamp(20px,4vh,48px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font:500 11px var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(238,243,255,.6) }
.ch0 .fc-scroll i { width:1px; height:46px; background:linear-gradient(#eef3ff,transparent); animation:fcDrop 1.8s ease-in-out infinite; transform-origin:top } @keyframes fcDrop { 0% { transform:scaleY(0) } 50% { transform:scaleY(1) } 100% { transform:scaleY(1); opacity:0 } }
/* capítulos anclados */
.pin { padding:0; display:block } .pin .stage { position:sticky; top:0; height:100vh; padding:0 clamp(24px,7vw,120px); display:flex; flex-direction:column; justify-content:center; overflow:hidden }
.ch1 { height:calc(var(--n,4) * 90vh + 50vh) } .ch2 { height:300vh } .ch3 { height:calc(var(--n,6) * 50vh + 140vh) }
.ch1 .stage > .fc-eyebrow { position:absolute; top:clamp(70px,10vh,110px); left:clamp(24px,7vw,120px); margin:0 }
.fc-slide { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(24px,7vw,120px) } .fc-slide .fc-serif { margin-top:clamp(10px,2vh,24px) }
.fc-dots { position:absolute; right:clamp(18px,3vw,44px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px } .fc-dots u { display:block; width:6px; height:26px; background:rgba(238,243,255,.2); transform-origin:center }
.ch2 .fc-best { display:grid; grid-template-columns:auto 1fr; gap:clamp(30px,6vw,110px); align-items:center; position:relative; z-index:2 }
.ch2 .fc-score { font:400 clamp(60px,9vw,150px)/.9 var(--f-cond); margin:.1em 0 .15em } .ch2 .fc-bestinfo .fc-lab { color:rgba(238,243,255,.65) }
.fc-meta { display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:clamp(16px,3vh,34px); font:500 12px var(--f-mono); letter-spacing:.12em; text-transform:uppercase } .fc-meta span::before { content:"— "; color:#ff7a1a }
.fc-ring { position:absolute; left:clamp(0px,4vw,70px); top:50%; width:min(78vh,56vw); transform:translateY(-50%) rotate(-90deg); z-index:1; pointer-events:none } .fc-ring circle { fill:none; stroke:#ff7a1a; stroke-width:1.4; vector-effect:non-scaling-stroke }
.fc-h2 { font:400 clamp(54px,9vw,150px)/.95 var(--f-cond); text-transform:uppercase; letter-spacing:.005em; margin:0 0 clamp(18px,4vh,44px) } .fc-h2 em, .fc-verdict em { font:italic 400 1em/1 var(--f-serif); text-transform:none; color:#ff7a1a; letter-spacing:0; word-spacing:.08em; padding-right:.04em }
.fc-table { display:grid; gap:clamp(8px,1.6vh,18px); max-width:1100px } .fc-row { display:grid; grid-template-columns:54px minmax(120px,1.1fr) 2fr 56px; align-items:center; gap:18px }
.fc-row .p { font:500 13px var(--f-mono); color:rgba(238,243,255,.55) } .fc-row .n { font:500 clamp(18px,2vw,30px) var(--f-oswald); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fc-row .b { display:block; height:16px; background:rgba(238,243,255,.08) } .fc-row .b u { display:block; height:100%; width:var(--w); background:#eef3ff; transform-origin:left }
.fc-row .v { font:400 clamp(24px,2.6vw,40px) var(--f-cond); text-align:right } .fc-row.me .n, .fc-row.me .v, .fc-row.me .p { color:#ff7a1a } .fc-row.me .b u { background:#ff7a1a }
/* premios */
.ch4 { padding-top:16vh; padding-bottom:14vh; justify-content:flex-start }
.fc-aw { max-width:1200px; border-top:2px solid #eef3ff } .fc-awr { display:grid; grid-template-columns:56px minmax(180px,1.1fr) 1.4fr auto; align-items:baseline; gap:18px; padding:clamp(14px,2.4vh,26px) 0; border-bottom:1px solid rgba(238,243,255,.25) }
.fc-awr .i { font:500 13px var(--f-mono); color:#ff7a1a } .fc-awr b { font:700 clamp(22px,2.8vw,42px)/1.05 var(--f-oswald); text-transform:uppercase; letter-spacing:.02em }
.fc-awr em { font:italic 400 clamp(18px,1.8vw,28px) var(--f-serif); color:rgba(238,243,255,.7) } .fc-awr .v { font:500 12px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap }
.fc-p { font:400 clamp(18px,1.7vw,26px)/1.45 var(--f-text); max-width:54ch; color:rgba(238,243,255,.8) }
/* veredicto */
.ch5 { padding-bottom:12vh }
.fc-verdict { font:400 clamp(60px,12vw,210px)/.9 var(--f-cond); text-transform:uppercase; letter-spacing:0; margin:0 0 clamp(18px,3vh,36px); overflow:hidden; padding:.04em 0 } .fc-verdict .w { display:inline-block; overflow:hidden; vertical-align:top }
.fc-tot { display:flex; gap:clamp(30px,7vw,120px); margin:clamp(24px,5vh,56px) 0 clamp(28px,5vh,60px) } .fc-tot b { font:400 clamp(70px,10vw,170px)/.85 var(--f-cond); display:block } .fc-tot span { font:500 13px var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(238,243,255,.6) }
.film-go { font:500 20px var(--f-oswald) !important; letter-spacing:.14em !important; text-transform:uppercase; color:#05070f; background:#ff7a1a !important; border:0 !important; border-radius:0 !important; padding:22px 54px !important; clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%) !important; cursor:pointer; align-self:flex-start; transition:background .25s, transform .25s var(--ease) }
.film-go:hover { background:#fff !important; color:#05070f; transform:translateX(6px) }
.film.static .pin { height:auto } .film.static .pin .stage { position:static; height:auto; padding:12vh clamp(24px,7vw,120px) } .film.static .fc-slide { position:static; padding:6vh 0 } .film.static .ch0 .fc-club { overflow:visible }
@media (max-width:820px) { .ch2 .fc-best { grid-template-columns:1fr } .fc-awr { grid-template-columns:40px 1fr } .fc-awr em, .fc-awr .v { grid-column:2 } .fc-row { grid-template-columns:36px 1fr 52px } .fc-row .b { display:none } }
.fc-num { margin-bottom:.1em } .fc-slide .fc-lab { margin-top:.2em }
/* el veredicto y las cifras caben en una pantalla de cualquier altura */
.fc-verdict { font-size:clamp(46px,min(11vw,17vh),190px) !important } .fc-tot b { font-size:clamp(60px,min(9vw,15vh),170px) !important } .fc-tot { margin:clamp(14px,3vh,40px) 0 clamp(18px,3vh,40px) !important }
.fc-num { font-size:clamp(130px,min(33vw,62vh),520px) !important } .ch0 .fc-club { font-size:clamp(48px,min(10vw,17vh),170px) !important } .fc-h2 { font-size:clamp(46px,min(9vw,15vh),150px) !important }
.ch5 { padding-top:9vh !important; padding-bottom:6vh !important; justify-content:center !important }


/* deportivo: franjas de carrera en la portada, bandera de cuadros en el veredicto, cifras de marcador */
.ch0::before { content:""; position:absolute; right:-3vw; top:-10vh; bottom:-10vh; width:17vw; transform:skewX(-14deg); z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,122,26,.92) 0 24%,transparent 24% 38%,rgba(238,243,255,.9) 38% 46%,transparent 46% 58%,rgba(255,122,26,.5) 58% 62%,transparent 62%) }
.ch0 .fc-big { right:10vw !important; z-index:1 }
.fc-num, .fc-score, .fc-tot b { text-shadow:0 0 40px rgba(60,110,255,.25) }
.fc-row.me .n, .fc-row.me .v { text-shadow:0 0 18px rgba(255,122,26,.5) }
.film-x:hover, .boot-sfx:hover { color:#05070f !important }
/* ===== botones de sonido ===== */
.boot-sfx, .film-x[data-sfx-btn] { font:500 11px var(--f-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:#eef3ff; background:transparent !important; border:1px solid rgba(238,243,255,.45) !important; border-radius:0 !important; clip-path:none !important; padding:8px 14px !important; cursor:pointer; pointer-events:auto }
.boot-sfx:hover, .film-x[data-sfx-btn]:hover { background:#eef3ff !important; color:#05070f !important } .boot-sfx.on, .film-x[data-sfx-btn].on { border-color:#ff7a1a !important; color:#ff7a1a } .boot-sfx.on:hover, .film-x[data-sfx-btn].on:hover { color:#eef3ff !important; background:#ff7a1a !important }
.film-r { display:flex; gap:10px; pointer-events:none } #boot .boot-bot { align-items:center }
.ch5 { padding-bottom:13vh !important }

/* ===== resultado de partida: marcador de retransmisión ===== */
@property --p { syntax:'<number>'; inherits:true; initial-value:0 }
.card.mres { padding:0 !important; margin-bottom:22px; --edge:var(--rc,rgba(255,255,255,.2)) }
.mres.win { --rc:rgba(52,211,153,.9); --fill:linear-gradient(100deg,rgba(24,92,70,.6),#0a1020 62%) } .mres.loss { --rc:rgba(251,113,133,.9); --fill:linear-gradient(100deg,rgba(112,30,46,.6),#0a1020 62%) }
.mres.fr { --rc:rgba(143,151,177,.7); --fill:linear-gradient(100deg,rgba(60,70,100,.5),#0a1020 62%) }
.mres-top { position:relative; padding:28px 30px 12px !important; gap:34px !important }
.mres.win .mres-top::before, .mres.loss .mres-top::before { content:""; position:absolute; left:18px; right:18px; top:0; height:12px; opacity:.55; pointer-events:none }
.mres.win .mres-top::before { height:3px; opacity:1; background:linear-gradient(90deg,#3ee0a5,transparent 70%) }
.mres.loss .mres-top::before { height:3px; opacity:1; background:linear-gradient(90deg,#ff5a6e,transparent 70%) }
.mres-word { font:400 clamp(70px,9.5vw,132px)/.88 var(--f-cond) !important; font-style:normal !important; text-transform:uppercase; letter-spacing:.005em; transform:skewX(-8deg); text-shadow:0 0 50px currentColor }
.mres-mode { font:500 11px var(--f-mono) !important; letter-spacing:.14em; text-transform:uppercase; margin-top:12px !important }
.mres-flag { display:inline-block; margin-left:14px; vertical-align:top; font:500 13px var(--f-oswald); letter-spacing:.16em; text-transform:uppercase; color:#05070f; background:#ffb02e; padding:6px 16px; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%) }
.mres-score { font-family:var(--f-cond) !important; font-weight:400 !important; font-size:clamp(70px,9vw,128px) !important; gap:12px !important; line-height:.85 !important; letter-spacing:.01em } .mres-score b { display:inline-block; overflow:hidden; padding:.04em .02em; text-shadow:0 0 40px rgba(60,110,255,.3) } .mres-score i { color:rgba(238,243,255,.35) !important }
.mres-rate { width:150px !important; height:150px !important; box-shadow:0 0 50px color-mix(in srgb,var(--c) 28%,transparent); background:conic-gradient(var(--c) calc(var(--p) * 1%), rgba(238,243,255,.1) 0) !important }
.mres-rate > div { width:126px !important; height:126px !important; background:#08101f !important }
.mres-rate b { font:400 56px/1 var(--f-cond) !important; letter-spacing:.01em } .mres-rate span { font:500 10px var(--f-mono) !important; letter-spacing:.2em }
.mres-tiles .mt b { font:400 38px/1 var(--f-cond) !important; letter-spacing:.01em } .mres-tiles .mt span { font:500 10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase }
.card.mres.flash::before { background:linear-gradient(135deg,#fff,var(--rc)) !important }
.mres.flash .mres-top { animation:resFlash .6s ease-out } @keyframes resFlash { 0% { filter:brightness(2.2) } 100% { filter:none } }
.mres.win .mres-word { color:#3ee0a5 !important; text-shadow:0 0 36px rgba(62,224,165,.38) } .mres.loss .mres-word { color:#ff5a6e !important; text-shadow:0 0 36px rgba(255,90,110,.38) } .mres.fr .mres-word { color:#aab4d4 !important; text-shadow:none }
.mres.win { --c:#3ee0a5 } .mres.loss { --c:#ff5a6e }

/* ===== vitrina 3D ===== */
.vt3d { position:fixed; inset:0; z-index:3200; background:#05070f; color:#eef3ff; animation:filmIn 1s cubic-bezier(.75,0,.2,1) both; touch-action:none }
.vt3d.out { opacity:0; transition:opacity .5s; pointer-events:none }
.vt3d canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab } .vit canvas:active { cursor:grabbing }
.vit-top { position:absolute; z-index:3; left:clamp(18px,3vw,44px); right:clamp(18px,3vw,44px); top:clamp(16px,2.4vw,32px); display:flex; justify-content:space-between; align-items:center; gap:18px; font:500 11px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(238,243,255,.65); pointer-events:none }
.vit-top i { display:inline-block; width:34px; height:1px; background:rgba(238,243,255,.5); margin:0 12px; vertical-align:middle } .vit-top .film-x { pointer-events:auto }
.vit-tot { color:#ff7a1a; margin-left:auto }
.vit-info { position:absolute; z-index:3; left:clamp(18px,3vw,44px); bottom:clamp(20px,4vh,46px); max-width:min(560px,60vw); pointer-events:none; text-shadow:0 2px 24px #05070f }
.vit-info.swap > * { animation:riseIn .6s var(--ease) both } .vit-info.swap .vit-name { animation-delay:.05s } .vit-info.swap .vit-desc { animation-delay:.12s } .vit-info.swap .vit-st { animation-delay:.18s }
.vit-k { font:500 11px var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(238,243,255,.6); margin-bottom:10px }
.vit-name { font:400 clamp(46px,7vw,110px)/.92 var(--f-cond); text-transform:uppercase; letter-spacing:.005em }
.vit-desc { font:italic 400 clamp(20px,2vw,30px)/1.2 var(--f-serif); color:#ffb067; margin:10px 0 14px; word-spacing:.1em }
.vit-st { font:500 12px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(238,243,255,.55) } .vit-st b { font:400 30px var(--f-cond); letter-spacing:.02em; margin-right:8px; color:rgba(238,243,255,.55) } .vit-st.on b, .vit-st b.ok { color:#ff7a1a }
.vit-nav { position:absolute; z-index:3; right:clamp(18px,3vw,44px); bottom:clamp(20px,4vh,46px); display:flex; gap:10px }
.vit-nav button { width:54px; height:54px; font:400 34px/1 var(--f-cond) !important; letter-spacing:0 !important; border-radius:0 !important; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%) !important; background:rgba(238,243,255,.1) !important; border:0 !important; color:#eef3ff; cursor:pointer; padding:0 !important } .vit-nav button:hover { background:#ff7a1a !important; color:#05070f }
.vit-hint { position:absolute; z-index:3; left:50%; top:clamp(60px,9vh,96px); transform:translateX(-50%); font:500 11px var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(238,243,255,.4); pointer-events:none; animation:hintOut 6s forwards } @keyframes hintOut { 0%,70% { opacity:1 } 100% { opacity:0 } }
.vit-open { margin:2px 0 16px }
@media (max-width:760px) { .vit-info { max-width:calc(100vw - 40px); bottom:90px } }
/* la cabecera de club no se tiñe de gris: franja del color del club sobre el fondo de la app */
.obanner { background:linear-gradient(100deg,color-mix(in srgb,var(--c) 38%,#070b16),#0a1020 72%) !important; border:0 !important; border-left:5px solid var(--c) !important; border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)) }

/* ===== visualizaciones interactivas: gráfica de valoración, tarjetas de partida, semanas ===== */
.vz-head { display:flex; align-items:flex-end; gap:clamp(18px,3vw,44px); flex-wrap:wrap; margin:-4px 0 6px }
.vz-kpi b { display:block; font:400 clamp(34px,3.6vw,52px)/.95 var(--f-cond); letter-spacing:.01em; font-variant-numeric:tabular-nums } .vz-kpi b small { font-size:.5em; opacity:.6; margin-left:2px }
.vz-kpi span { font:500 10.5px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.vz-ctl { margin-left:auto; display:flex; gap:8px; align-items:center }
.vz-seg { display:flex } .vz-seg button, .vz-tg, .vz-filters button { font:500 12px var(--f-oswald) !important; letter-spacing:.12em !important; padding:7px 14px !important; border-radius:0 !important; clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%) !important; background:rgba(238,243,255,.07) !important; border:0 !important; color:var(--muted); cursor:pointer; transition:background .2s,color .2s }
.vz-seg button + button { margin-left:-5px } .vz-seg button:hover, .vz-tg:hover, .vz-filters button:hover { background:rgba(255,138,43,.2) !important; color:#fff }
.vz-seg button.on, .vz-tg.on, .vz-filters button.on { background:var(--accent) !important; color:#05070f !important }
.vz-wrap { position:relative } .vz-svg { width:100%; height:auto; display:block; overflow:visible }
.vz-g { stroke:rgba(238,243,255,.07); stroke-width:1 } .vz-g.mid { stroke:rgba(238,243,255,.16) } .vz-t { fill:var(--muted); font:500 11px var(--f-mono); letter-spacing:.08em } .vz-t.hot { fill:var(--accent) }
.vz-zone { fill:rgba(52,211,153,.05) } .vz-avg { stroke:var(--accent); stroke-width:1; stroke-dasharray:3 6; opacity:.7 }
.vz-line { fill:none; stroke:url(#vzL); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round } .vz-ma { fill:none; stroke:rgba(238,243,255,.55); stroke-width:1.6; stroke-dasharray:2 5; stroke-linecap:round }
.vz-p { stroke:#05070f; stroke-width:2.2; transition:r .15s } .vz-p.w { fill:var(--win) } .vz-p.l { fill:var(--loss) }
.vz-cl { stroke:rgba(238,243,255,.35); stroke-width:1; stroke-dasharray:3 4 } .vz-cd { fill:#05070f; stroke-width:3.5 } .vz-cd.w { stroke:var(--win) } .vz-cd.l { stroke:var(--loss) }
.vz-hit { cursor:crosshair }
.vz-svg.draw .vz-line { stroke-dasharray:1; stroke-dashoffset:1; animation:vzDraw 1.5s var(--ease) .1s forwards } @keyframes vzDraw { to { stroke-dashoffset:0 } }
.vz-svg.draw .vz-area { opacity:0; animation:vzIn .9s .7s forwards } .vz-svg.draw .vz-p { opacity:0; animation:vzIn .4s forwards; animation-delay:calc(.2s + var(--i, 0) * 1ms) } .vz-svg.draw .vz-ma { opacity:0; animation:vzIn .6s 1.2s forwards } @keyframes vzIn { to { opacity:1 } }
.vz-tip { position:absolute; transform:translate(-50%,-100%); pointer-events:none; min-width:150px; padding:12px 16px 10px; background:linear-gradient(180deg,#0e1730,#0a1020); border:0; z-index:5; display:grid; gap:3px; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); box-shadow:0 0 0 1px rgba(255,255,255,.14); text-align:left }
.vz-tip b { font:400 40px/.9 var(--f-cond); letter-spacing:.01em } .vz-tip .vt-r { font:500 12px var(--f-oswald); letter-spacing:.14em; text-transform:uppercase } .vz-tip.w .vt-r { color:var(--win) } .vz-tip.l .vt-r { color:var(--loss) }
.vz-tip .vt-m, .vz-tip .vt-d { font:500 10.5px var(--f-mono); letter-spacing:.1em; color:var(--muted) } .vz-foot { margin-top:6px }

.vz-filters { display:flex; gap:8px; flex-wrap:wrap; margin:-2px 0 14px } .vz-filters button i { font-style:normal; opacity:.7; margin-left:4px }
.mc-list { display:grid; gap:10px }
.mc { position:relative; cursor:pointer; background:linear-gradient(100deg,color-mix(in srgb,var(--rc) 14%,#0b1224),#0a1020 55%); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); box-shadow:inset 4px 0 0 var(--rc); animation:mcIn .6s var(--ease) both; animation-delay:calc(var(--i) * 45ms); transition:background .25s, transform .25s var(--ease) }
@keyframes mcIn { from { opacity:0; transform:translateX(-30px) skewX(-4deg) } to { opacity:1; transform:none } }
.mc:hover { background:linear-gradient(100deg,color-mix(in srgb,var(--rc) 24%,#0d172c),#0c1428 60%); transform:translateX(4px) }
.mc.fr { filter:saturate(.45); opacity:.9 }
.mc-main { display:grid; grid-template-columns:54px minmax(120px,auto) minmax(130px,1fr) auto 78px 70px 20px; align-items:center; gap:clamp(10px,1.6vw,26px); padding:12px 18px 12px 22px }
.mc-res { font:400 52px/.9 var(--f-cond); color:var(--rc); transform:skewX(-8deg); text-shadow:0 0 28px var(--rc) } .mc.w .mc-res { color:var(--win); text-shadow:0 0 26px rgba(52,211,153,.45) } .mc.l .mc-res { color:var(--loss); text-shadow:0 0 26px rgba(251,113,133,.4) }
.mc-score { display:flex; align-items:baseline; gap:8px; font:400 56px/.9 var(--f-cond); letter-spacing:.01em } .mc-score i { font-style:normal; color:rgba(238,243,255,.3); font-size:.7em }
.mc-mode { font:500 14px var(--f-oswald); letter-spacing:.08em; text-transform:uppercase } .mc-time { font:500 10.5px var(--f-mono); letter-spacing:.1em; color:var(--muted); margin-top:4px }
.mc-star { display:inline-block; margin-left:8px; font:500 10px var(--f-oswald); letter-spacing:.14em; background:#ffb02e; color:#05070f; padding:2px 8px; clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%) }
.mc-stats { display:flex; gap:14px } .mc-s { display:grid; grid-template-rows:34px auto auto; justify-items:center; gap:2px; width:26px } .mc-s span { align-self:end; width:6px; height:max(3px,calc(var(--h) * .34px)); background:var(--rc); opacity:.85; transform-origin:bottom; animation:mcBar .7s var(--ease) both } @keyframes mcBar { from { transform:scaleY(0) } }
.mc-s b { font:400 20px/1 var(--f-cond) } .mc-s em { font:500 9.5px var(--f-mono); font-style:normal; letter-spacing:.14em; color:var(--muted) }
.mc-rate { --c:var(--rc); width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(238,243,255,.1) 0); box-shadow:0 0 22px color-mix(in srgb,var(--rc) 25%,transparent) } .mc-rate > div { width:52px; height:52px; border-radius:50%; background:#08101f; display:grid; place-items:center } .mc-rate b { font:400 24px/1 var(--f-cond); color:var(--rc) }
.mc-rep { font:400 24px/1 var(--f-cond); color:var(--win); text-align:right } .mc-rep span { display:block; font:500 9.5px var(--f-mono); letter-spacing:.16em; color:var(--muted); text-transform:uppercase }
.mc-caret { font:400 30px/1 var(--f-cond); color:var(--muted); transition:transform .25s var(--ease) } .mc.open .mc-caret { transform:rotate(90deg); color:var(--accent) }
.mc-more { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease) } .mc.open .mc-more { grid-template-rows:1fr } .mc-more > div { overflow:hidden; padding:0 22px; min-height:0 } .mc.open .mc-more > div { padding:2px 22px 18px }
.mc-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px } .mc-big { display:flex; gap:clamp(18px,3vw,44px); flex-wrap:wrap; margin-bottom:14px } .mc-big b { display:block; font:400 40px/.95 var(--f-cond) } .mc-big span { font:500 10px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.mc.ping, details.ping { animation:ping 1.6s ease-out } @keyframes ping { 0% { box-shadow:0 0 0 0 rgba(255,138,43,.9), inset 4px 0 0 var(--rc,#ff8a2b) } 100% { box-shadow:0 0 0 22px rgba(255,138,43,0), inset 4px 0 0 var(--rc,#ff8a2b) } }
@media (max-width:900px) { .mc-main { grid-template-columns:44px 1fr auto 20px; row-gap:8px } .mc-info, .mc-stats, .mc-rep { grid-column:1 / -1 } .mc-score { font-size:44px } }

/* semanas */
details.sx-w > summary.wkv { display:block; list-style:none; padding:0 } details.sx-w > summary.wkv::-webkit-details-marker { display:none }
.wv { padding:18px 20px 14px; display:grid; gap:14px }
.wv-top { display:grid; grid-template-columns:minmax(190px,1fr) minmax(200px,1.5fr) auto; gap:clamp(14px,2.4vw,34px); align-items:end }
.wv-title span { display:block; font:500 10.5px var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent) } .wv-title b { display:block; font:400 clamp(28px,3vw,44px)/1 var(--f-cond); text-transform:uppercase; letter-spacing:.01em; margin:4px 0 2px } .wv-title em { font:italic 400 18px var(--f-serif); color:var(--muted) }
.wv-bars { position:relative; height:74px; display:flex; align-items:flex-end; gap:3px; border-bottom:1px solid rgba(238,243,255,.2) } .wv-bars i { flex:1; min-width:3px; height:var(--h); max-width:16px; background:var(--win); opacity:.9; transform-origin:bottom; animation:mcBar .7s var(--ease) both; transition:opacity .2s, transform .2s } .wv-bars i.l { background:var(--loss) } .wv-bars i:hover { opacity:1; transform:scaleY(1.06) }
.wv-bars u { position:absolute; left:0; right:0; bottom:var(--avg); border-top:1px dashed rgba(255,138,43,.8); pointer-events:none }
.wv-heat { display:flex; gap:5px } .wv-c { width:38px; height:50px; padding:0 !important; border-radius:0 !important; border:0 !important; background:rgba(238,243,255,.05) !important; display:grid; place-items:center; align-content:center; gap:1px; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%) !important; cursor:default; transition:transform .2s var(--ease), filter .2s }
.wv-c em { font:500 9.5px var(--f-mono); font-style:normal; letter-spacing:.1em; color:var(--muted) } .wv-c b { font:400 20px/1 var(--f-cond); color:#fff; min-height:20px }
.wv-c.on { cursor:pointer } .wv-c.on:hover { transform:translateY(-4px); filter:brightness(1.25) }
.wv-c.hi { background:color-mix(in srgb,var(--win) calc(var(--a) * 55%),#0a1020) !important } .wv-c.mid { background:color-mix(in srgb,var(--warn) calc(var(--a) * 50%),#0a1020) !important } .wv-c.lo { background:color-mix(in srgb,var(--loss) calc(var(--a) * 55%),#0a1020) !important } .wv-c.on:not(.hi):not(.mid):not(.lo) { background:rgba(143,151,177,.28) !important }
.wv-kpis { display:flex; gap:clamp(22px,4vw,64px); flex-wrap:wrap; padding-top:12px; border-top:1px solid rgba(238,243,255,.1) }
.wv-kpis b { display:block; font:400 clamp(34px,3.4vw,50px)/.95 var(--f-cond); letter-spacing:.01em; font-variant-numeric:tabular-nums } .wv-kpis b small { opacity:.4; margin:0 3px } .wv-kpis b.up { color:var(--win) } .wv-kpis b.dn { color:var(--loss) } .wv-kpis b.fr { color:var(--warn) }
.wv-kpis span { font:500 10.5px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
details.sx-w { background:linear-gradient(180deg,#0c1326,#0a1020) !important; border:0 !important; border-radius:0 !important; box-shadow:inset 4px 0 0 var(--accent), inset 0 0 0 1px rgba(255,255,255,.07); clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); margin-bottom:12px }
details.sx-w.wr-hi { box-shadow:inset 4px 0 0 var(--win), inset 0 0 0 1px rgba(255,255,255,.07) } details.sx-w.wr-lo { box-shadow:inset 4px 0 0 var(--loss), inset 0 0 0 1px rgba(255,255,255,.07) }
details.sx-w > :not(summary) { margin-left:20px; margin-right:20px } details.sx-w[open] { padding-bottom:16px }
@media (max-width:900px) { .wv-top { grid-template-columns:1fr } }
.wv-title b { font-size:clamp(24px,2.3vw,34px) !important }
details.sx-w > :not(summary) { margin-left:20px !important; margin-right:20px !important } details.sx-w > .sx-stats { margin-top:6px }

/* ===== emblemas de premios (únicos) y rejilla de la vitrina ===== */
.emb { display:block; overflow:visible } .emb .f { fill:var(--fill) } .emb .s { fill:none; stroke:var(--fill); stroke-width:3; stroke-linecap:round; stroke-linejoin:round } .emb .d { fill:#0a1224 } .emb .dl { fill:none; stroke:#0a1224; stroke-linecap:round } .emb .l { fill:none; stroke:rgba(255,255,255,.75); stroke-width:2; stroke-linecap:round }
.emb.on { filter:drop-shadow(0 3px 10px rgba(255,160,50,.28)) }
.emb.lock .f { fill:rgba(120,150,255,.05); stroke:rgba(140,170,255,.55); stroke-width:1.4; stroke-linejoin:round } .emb.lock .s { stroke:rgba(140,170,255,.5); stroke-width:1.6 } .emb .lf { fill:rgba(255,255,255,.42) } .emb.lock .d, .emb.lock .l, .emb.lock .dl, .emb.lock .lf { display:none }
.vit { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; gap:10px !important }
.vit .tr { position:relative; cursor:pointer; border:0 !important; border-radius:0 !important; padding:16px 14px 14px !important; gap:5px !important; align-items:flex-start; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); background:linear-gradient(160deg,rgba(255,176,46,.14),#0a1020 60%) !important; box-shadow:inset 0 0 0 1px rgba(255,176,46,.28); transition:transform .25s var(--ease), background .25s; opacity:1 !important; filter:none !important }
.vit .tr:hover { transform:translateY(-4px) } .vit .tr.lock { background:linear-gradient(160deg,rgba(120,150,255,.07),#0a1020 60%) !important; box-shadow:inset 0 0 0 1px rgba(140,170,255,.16) } .vit .tr.lock b { color:var(--muted) }
.vit .tr i { display:block; margin-bottom:6px } .vit .tr b { font:500 15px var(--f-oswald) !important; letter-spacing:.06em; text-transform:uppercase; color:#fff }
.vit .tr span { font:400 12.5px/1.3 var(--f-text) !important; color:var(--muted) !important; font-weight:400 !important } .vit .tr:not(.lock) span { color:var(--accent) !important; font:400 26px/1 var(--f-cond) !important }
.aw { background:linear-gradient(100deg,rgba(255,176,46,.12),#0a1020 70%) !important; border:0 !important; border-radius:0 !important; box-shadow:inset 3px 0 0 var(--accent) } .aw > i { display:grid; place-items:center }

/* ===== widgets visuales: radar, anillos, relojes, cartera, retos, podio, MMR, objetivos ===== */
.arch-name { font:italic 400 clamp(30px,3vw,44px)/1 var(--f-serif); color:var(--accent); word-spacing:.1em }
.radar { width:100%; max-width:380px; display:block; margin:0 auto; overflow:visible }
.rd-ring { fill:none; stroke:rgba(238,243,255,.1); stroke-width:1 } .rd-ax { stroke:rgba(238,243,255,.1); stroke-width:1 }
.rd-poly { fill:rgba(255,138,43,.22); stroke:#ff8a2b; stroke-width:2.2; stroke-linejoin:round; filter:drop-shadow(0 0 10px rgba(255,138,43,.5)); transform-origin:170px 150px; transition:fill .25s }
.rd-d { fill:#05070f; stroke:#ffb02e; stroke-width:2.4; transition:r .15s } .rd-d.top { fill:#ffb02e } .rd-d:hover { r:8 }
.rd-l { fill:var(--muted); font:500 10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase } .rd-l.top { fill:#fff }
.radar.anim .rd-poly { animation:rdIn 1s var(--ease) both } @keyframes rdIn { from { transform:scale(.05); opacity:0 } }
.radar:hover .rd-poly { fill:rgba(255,138,43,.34) }
.donuts { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center }
.dn { position:relative; display:grid; justify-items:center; width:104px; animation:riseIn .6s var(--ease) both; animation-delay:var(--d) } .dn svg { width:92px; height:92px; transform:rotate(-90deg) } .dn circle { fill:none; stroke-width:7 }
.dn-t { stroke:rgba(238,243,255,.1) } .dn-v { stroke:var(--c); stroke-linecap:butt; filter:drop-shadow(0 0 6px var(--c)); transition:stroke-dasharray .6s } .dn-v.anim { animation:dnIn 1.2s var(--ease) both } @keyframes dnIn { from { stroke-dasharray:0 100 } }
.dn b { position:absolute; top:28px; font:400 30px/1 var(--f-cond); letter-spacing:.01em } .dn b small { font-size:.55em; opacity:.6 } .dn span { font:500 13px var(--f-oswald); letter-spacing:.12em; margin-top:2px } .dn em { font:500 9.5px var(--f-mono); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.dials { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 14px }
.dial { position:relative; display:grid; justify-items:center; text-align:center; padding:6px 4px 10px } .dial svg { width:100%; max-width:150px } .dl-t, .dl-v { fill:none; stroke-width:9; stroke-linecap:butt } .dl-t { stroke:rgba(238,243,255,.1) } .dl-v { stroke:var(--c); filter:drop-shadow(0 0 7px var(--c)) } .dl-v.anim { animation:dnIn 1.3s var(--ease) both }
.dl-i { position:absolute; top:6px; color:var(--c); display:grid; place-items:center; height:62px; width:100%; pointer-events:none; opacity:.9 } .dial b { font:400 38px/1 var(--f-cond); margin-top:-26px; position:relative } .dial span { font:500 13px var(--f-oswald); letter-spacing:.1em; text-transform:uppercase; margin-top:2px } .dial em { font:400 11px/1.35 var(--f-text); font-style:normal; color:var(--muted); margin-top:4px; max-width:22ch }
.wsp { position:relative; margin:8px 0 6px; cursor:crosshair } .wsp svg { width:100%; height:90px; display:block; overflow:visible } .ws-l { fill:none; stroke:#ff8a2b; stroke-width:2.4; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(255,138,43,.6)) } .wsp svg.anim .ws-l { stroke-dasharray:1; stroke-dashoffset:1; animation:vzDraw 1.4s var(--ease) forwards }
.ws-c { stroke:rgba(238,243,255,.35); stroke-width:1; stroke-dasharray:3 4; opacity:0 } .ws-dot { position:absolute; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:#ffb02e; box-shadow:0 0 12px #ff8a2b; opacity:0; pointer-events:none; transition:left .08s,top .08s }
.ws-tip { position:absolute; transform:translateX(-50%); font:400 22px/1 var(--f-cond); background:#0e1730; padding:4px 10px 3px; pointer-events:none; box-shadow:0 0 0 1px rgba(255,255,255,.15); white-space:nowrap }
.mxrow { display:flex; gap:14px; align-items:center; margin:10px 0 4px } .mxd { width:98px; height:98px; flex:none; transform:rotate(-90deg) } .mxd text { transform:rotate(90deg); transform-origin:45px 45px } .mx-t, .mx-s { fill:none; stroke-width:10 } .mx-t { stroke:rgba(238,243,255,.08) } .mx-s { transition:stroke-width .2s } .mx-s:hover { stroke-width:13 } .mxd.anim .mx-s { animation:mxIn 1.1s var(--ease) both } @keyframes mxIn { from { stroke-dasharray:0 300 } }
.mx-n { fill:#fff; font:400 15px var(--f-cond) } .mx-u { fill:var(--muted); font:500 6.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase }
.mixleg { display:grid; gap:4px 12px; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); flex:1; font:500 11px var(--f-mono); letter-spacing:.06em; color:var(--muted) } .mixleg i { display:inline-block; width:9px; height:9px; margin-right:6px } .mixleg b { color:#fff }
.chgrid { gap:12px !important } .ch { display:grid !important; grid-template-columns:78px 1fr; gap:14px; align-items:center; border:0 !important; border-radius:0 !important; padding:16px 18px !important; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); background:linear-gradient(105deg,color-mix(in srgb,var(--tc) 16%,#0b1224),#0a1020 65%) !important; box-shadow:inset 4px 0 0 var(--tc); transition:transform .25s var(--ease) } .ch:hover { transform:translateY(-3px) } .ch::before { display:none !important }
.ch-ring { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--tc) calc(var(--p) * 1%), rgba(238,243,255,.1) 0); box-shadow:0 0 22px color-mix(in srgb,var(--tc) 28%,transparent) } .ch-ring > div { width:60px; height:60px; border-radius:50%; background:#08101f; display:grid; place-items:center } .ch-ring b { font:400 24px/1 var(--f-cond) } .ch-ring small { font-size:.55em; opacity:.6 }
.ch.done .ch-ring > div { background:color-mix(in srgb,var(--win) 25%,#08101f) } .ch.done .ch-ring b { color:var(--win); font-size:32px }
.chtop { margin-bottom:4px } .chtier { font:500 11px var(--f-mono) !important; letter-spacing:.16em !important; color:var(--tc) !important } .chlabel { font:500 17px/1.2 var(--f-oswald) !important; letter-spacing:.04em; text-transform:uppercase } .chfoot { margin-top:8px; font:500 11px var(--f-mono) !important; letter-spacing:.1em; color:var(--muted) !important }
.chbonus { border:0 !important; border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); background:linear-gradient(100deg,rgba(255,176,46,.16),#0a1020 70%) !important; box-shadow:inset 4px 0 0 #ffb02e } .chbonus.paid { background:linear-gradient(100deg,rgba(52,211,153,.2),#0a1020 70%) !important; box-shadow:inset 4px 0 0 var(--win) } .chleft b { font:400 40px/1 var(--f-cond) !important }
.podium { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:end; margin:10px 0 14px } .pd { display:grid; justify-items:center; text-align:center; gap:2px; padding:12px 8px 0; background:linear-gradient(180deg,rgba(238,243,255,.06),transparent) } .pd-n { font:500 15px var(--f-oswald); letter-spacing:.08em; text-transform:uppercase } .pd-c { font:500 10px var(--f-mono); letter-spacing:.1em; color:var(--muted); text-transform:uppercase } .pd-v { font:italic 400 17px var(--f-serif); color:var(--accent); margin-bottom:8px }
.pd-b { width:100%; display:grid; place-items:center; background:linear-gradient(180deg,#1a2548,#0c1428); clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px) } .pd-b b { font:400 44px/1 var(--f-cond); color:rgba(238,243,255,.5) } .pd.p1 .pd-b { height:88px; background:linear-gradient(180deg,#ffb02e,#b7740f) } .pd.p1 .pd-b b { color:#05070f } .pd.p2 .pd-b { height:64px } .pd.p3 .pd-b { height:46px }
.pd.me .pd-n { color:var(--accent) } .pd.me { background:linear-gradient(180deg,rgba(255,138,43,.18),transparent) } .pd.p1 { padding-top:0 }
.mmrgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px } .mmrbox { border:0 !important; border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); background:linear-gradient(160deg,rgba(47,123,255,.14),#0a1020 65%) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); padding:14px 16px !important }
.gg { display:grid; justify-items:center } .gg svg { width:100%; max-width:200px } .gg b { font:400 56px/1 var(--f-cond); margin-top:-34px; position:relative } .gg span { font:500 10.5px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.mmrbox .dl-v { stroke:#3b9bff; filter:drop-shadow(0 0 7px #2f7bff) }
.mmrin { display:flex; gap:8px; margin-top:10px } .mmrin input { flex:1; min-width:0; background:#070c19; border:1px solid rgba(238,243,255,.15); border-radius:0; color:#fff; padding:8px 10px; font:500 13px var(--f-mono) }
.ob { display:grid; grid-template-columns:34px 1fr auto; gap:14px; align-items:center; padding:12px 0; border-top:1px solid rgba(238,243,255,.08) } .ob:first-of-type { border-top:0 }
.ob-i { width:34px; height:34px; display:grid; place-items:center; font:400 20px var(--f-cond); background:rgba(238,243,255,.07); clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%) } .ob.ok .ob-i { background:var(--win); color:#05070f } .ob.no .ob-i { background:var(--loss); color:#05070f }
.ob-l { font:500 15px var(--f-oswald); letter-spacing:.05em; text-transform:uppercase; margin-bottom:7px } .ob-t { height:8px; background:rgba(238,243,255,.1); position:relative; transform:skewX(-20deg); overflow:hidden } .ob-t i { display:block; height:100%; background:var(--accent); box-shadow:0 0 12px var(--accent); transition:width .6s var(--ease) } .ob.ok .ob-t i { background:var(--win); box-shadow:0 0 12px var(--win) } .ob.no .ob-t i { background:var(--loss); box-shadow:0 0 12px var(--loss) }
.ob-v { text-align:right } .ob-v b { display:block; font:400 28px/1 var(--f-cond) } .ob-v span { font:500 10px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.bar:not(.tall) { -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px); mask-image:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px) }
.chapsteps { display:inline-flex; gap:5px; align-items:center } .chapsteps i { width:22px !important; height:8px !important; border-radius:0 !important; transform:skewX(-20deg); background:rgba(238,243,255,.14) !important } .chapsteps i.past { background:var(--accent) !important; opacity:.55 } .chapsteps i.on { background:var(--accent) !important; box-shadow:0 0 14px var(--accent); animation:pulse 1.8s ease-in-out infinite } @keyframes pulse { 50% { opacity:.5 } }
.story2-head h3 { font:400 clamp(30px,3.2vw,46px)/1 var(--f-cond) !important; text-transform:uppercase; letter-spacing:.01em }

/* ===== pulido general: lo que seguía con el aspecto antiguo ===== */
.empty { position:relative; margin:6px 0; padding:26px 20px !important; font:500 12px/1.7 var(--f-mono) !important; letter-spacing:.06em; color:var(--muted); background:repeating-linear-gradient(135deg,rgba(238,243,255,.03) 0 10px,transparent 10px 20px); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); box-shadow:inset 0 0 0 1px rgba(238,243,255,.1) }
.terms span { border:0 !important; border-radius:0 !important; background:linear-gradient(160deg,rgba(238,243,255,.07),rgba(238,243,255,.02)) !important; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); padding:9px 13px !important; font:500 10.5px var(--f-mono) !important; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) !important }
.terms b { font:400 30px/1 var(--f-cond) !important; letter-spacing:.01em; color:#fff !important; margin-bottom:3px }
.sx-stats > div { border-radius:0 !important; background:linear-gradient(160deg,rgba(238,243,255,.07),rgba(238,243,255,.02)) !important; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); padding:10px 13px !important } .sx-stats b { font:400 30px/1 var(--f-cond) !important; letter-spacing:.01em } .sx-stats span { font:500 10px var(--f-mono) !important; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.offer { border:0 !important; border-radius:0 !important; background:linear-gradient(180deg,#0d1529,#0a1020) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); transition:transform .25s var(--ease), box-shadow .25s } .offer:hover { transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(255,138,43,.45) !important } .offer p { font:italic 400 18px/1.3 var(--f-serif) !important; color:#cfd8ee !important }
.offer .obanner { border-radius:0 !important }
.pill { border-radius:0 !important; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); border:0 !important; background:rgba(238,243,255,.12) !important; font:500 11px var(--f-oswald); letter-spacing:.12em; text-transform:uppercase; padding:3px 12px !important }
/* decisiones de después de la partida */
.card.decision { --edge:rgba(255,138,43,.85) } .decision h3 { font:400 clamp(28px,2.6vw,38px)/1 var(--f-cond) !important; text-transform:uppercase; letter-spacing:.01em }
.dopt { border:0 !important; border-radius:0 !important; background:linear-gradient(160deg,rgba(238,243,255,.09),rgba(238,243,255,.03)) !important; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); box-shadow:inset 3px 0 0 rgba(238,243,255,.2); transition:transform .22s var(--ease), background .22s, box-shadow .22s } .dopt:hover:not(:disabled) { background:linear-gradient(160deg,rgba(255,138,43,.22),rgba(255,138,43,.05)) !important; box-shadow:inset 3px 0 0 var(--accent) !important; transform:translateX(5px) }
.dopt b { font:500 17px/1.15 var(--f-oswald) !important; letter-spacing:.04em; text-transform:uppercase }
.tutorial, .chapterbox { border:0 !important; border-radius:0 !important; box-shadow:inset 0 0 0 1px rgba(255,138,43,.5) } .tutorial h3, .chapterbox h3 { font:400 clamp(30px,3vw,44px)/1 var(--f-cond) !important; text-transform:uppercase }
/* feed social */
.post { border-bottom:0 !important; padding:6px 0 !important } .bub { border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); padding:12px 16px !important; background:linear-gradient(100deg,rgba(238,243,255,.07),rgba(238,243,255,.02)) !important; border-left-width:4px !important }
.post.s-pos .bub { background:linear-gradient(100deg,rgba(52,211,153,.14),rgba(238,243,255,.02) 70%) !important } .post.s-neg .bub { background:linear-gradient(100deg,rgba(251,113,133,.14),rgba(238,243,255,.02) 70%) !important }
.post .who { font:500 14px var(--f-oswald); letter-spacing:.08em; text-transform:uppercase } .post .t { font-size:15px; line-height:1.45 } .post .meta { font:500 10.5px var(--f-mono); letter-spacing:.08em }
.newsi { border-bottom:1px solid rgba(238,243,255,.07) !important } .newsi .ni { border-radius:0 !important; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%) } .newsi b { font:500 14px var(--f-oswald); letter-spacing:.05em; text-transform:uppercase } .newsi small { font:400 12px/1.45 var(--f-text) }
.rp button, .rpopts button { border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)) !important; background:rgba(238,243,255,.09) !important; border:0 !important; font:500 12px var(--f-oswald) !important; letter-spacing:.08em !important; text-transform:uppercase; transition:background .2s,transform .2s var(--ease) } .rp button:hover, .rpopts button:hover { background:rgba(255,138,43,.28) !important; transform:translateX(3px) }
/* tienda */
.item { border:0 !important; border-radius:0 !important; background:linear-gradient(170deg,#0e172d,#0a1020 70%) !important; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); padding:16px !important; gap:9px !important; transition:transform .22s var(--ease), box-shadow .22s } .item:hover { box-shadow:inset 0 0 0 1px rgba(255,138,43,.5); transform:translateY(-3px) }
.item .itile { border-radius:0 !important; width:52px !important; height:52px !important; clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%); background:linear-gradient(160deg,rgba(255,138,43,.28),rgba(47,123,255,.2)) !important; color:#fff } .item .itop b { font:500 17px/1.1 var(--f-oswald); letter-spacing:.05em; text-transform:uppercase }
.price { font:400 24px/1 var(--f-cond) !important; letter-spacing:.02em; color:var(--accent) !important; background:rgba(255,138,43,.12); padding:5px 10px 3px; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%) } .item p { font:400 13.5px/1.4 var(--f-text) }
.ribbon { border-radius:0 !important; font:500 11px var(--f-oswald) !important; letter-spacing:.12em }
/* chips de etiquetas y tags */
.tag { border-radius:0 !important; clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); padding:3px 11px !important; background:rgba(238,243,255,.12) !important; border:0 !important; font:500 11px var(--f-oswald) !important; letter-spacing:.08em; text-transform:uppercase }
.eff .e, .e { border-radius:0 !important; clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); border:0 !important; font:500 11px var(--f-mono) !important; letter-spacing:.06em }
/* tabla de liga y listas */
table th { font:500 10.5px var(--f-mono) !important; letter-spacing:.14em !important; text-transform:uppercase; color:var(--muted) !important } table td { font-variant-numeric:tabular-nums }
/* selects y campos */
select, input[type=text], input[type=number], input[type=password], textarea { border-radius:0 !important; background:#070c19 !important; border:1px solid rgba(238,243,255,.18) !important; color:#fff; font:500 13px var(--f-text) }
select:focus, input:focus, textarea:focus { outline:0; border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(255,138,43,.18) }
/* toasts */
#toasts > * { border-radius:0 !important; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); background:#0e1730 !important; border:0 !important; box-shadow:inset 4px 0 0 var(--accent); font:500 13px var(--f-oswald); letter-spacing:.05em }
.item .itop { display:grid !important; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center } .item .itop > div, .item .itop b { min-width:0; overflow-wrap:anywhere }
.item .price { font-size:20px !important; align-self:start }
.item .itop > div, .item .itop b { overflow-wrap:normal !important; word-break:normal !important; hyphens:none } .item .itop b { font-size:15px !important; letter-spacing:.03em !important }
.item .itop { grid-template-columns:48px minmax(0,1fr) auto !important; gap:10px !important }
#seasons .twocol { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) !important }

/* ===== cuestionario de inicio: una pregunta por pantalla ===== */
.iw { max-width:980px; margin:0 auto; padding:6px 0 4px; animation:iwIn .55s var(--ease) both } @keyframes iwIn { from { opacity:0; transform:translateX(calc(var(--d,1) * 60px)) skewX(-4deg) } to { opacity:1; transform:none } }
.iw[data-dir="-1"] { --d:-1 }
.iw-top { display:flex; justify-content:space-between; font:500 11px var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:12px } .iw-top em { font-style:normal; color:var(--muted) }
.iw-bar { display:flex; gap:6px; margin-bottom:clamp(22px,5vh,52px) } .iw-bar i { flex:1; height:6px; background:rgba(238,243,255,.12); transform:skewX(-20deg); cursor:pointer; transition:background .3s } .iw-bar i.ok { background:rgba(255,138,43,.55) } .iw-bar i.cur { background:var(--accent); box-shadow:0 0 14px var(--accent) } .iw-bar i.end { flex:.4; cursor:default }
.iw-q { display:flex; gap:clamp(14px,3vw,36px); align-items:flex-start; margin-bottom:clamp(20px,4vh,40px) } .iw-n { font:400 clamp(70px,11vw,150px)/.8 var(--f-cond); color:transparent; -webkit-text-stroke:2px var(--accent); letter-spacing:.01em; flex:none }
.iw-q h3 { font:400 clamp(30px,4.2vw,58px)/1 var(--f-cond) !important; text-transform:uppercase; letter-spacing:.01em; margin:0; padding-top:.1em }
.iw-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px }
.iw-o { display:flex !important; align-items:center; gap:14px; text-align:left; padding:18px 20px !important; border:0 !important; border-radius:0 !important; background:linear-gradient(160deg,rgba(238,243,255,.09),rgba(238,243,255,.03)) !important; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)) !important; box-shadow:inset 3px 0 0 rgba(238,243,255,.2); animation:riseIn .5s var(--ease) both; animation-delay:calc(var(--i) * 55ms); transition:background .2s, transform .22s var(--ease), box-shadow .2s !important }
.iw-o kbd { font:400 26px/1 var(--f-cond); color:var(--muted); width:30px; flex:none; transition:color .2s } .iw-o span { font:500 17px/1.2 var(--f-oswald); letter-spacing:.06em; text-transform:uppercase }
.iw-o:hover { background:linear-gradient(160deg,rgba(255,138,43,.22),rgba(255,138,43,.05)) !important; transform:translateX(6px); box-shadow:inset 3px 0 0 var(--accent) } .iw-o:hover kbd { color:var(--accent) }
.iw-o.sel { background:linear-gradient(160deg,var(--accent),#c4561a) !important; box-shadow:none; color:#05070f } .iw-o.sel kbd { color:#05070f }
.iw-foot { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:clamp(20px,4vh,40px) }
.iw-sum { display:grid; gap:8px } .iw-sum > div { display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:12px 16px; background:rgba(238,243,255,.05); cursor:pointer; animation:riseIn .5s var(--ease) both; animation-delay:calc(var(--i) * 60ms); transition:background .2s } .iw-sum > div:hover { background:rgba(255,138,43,.16) }
.iw-sum span { font:400 14px var(--f-text); color:var(--muted) } .iw-sum b { font:500 17px var(--f-oswald); letter-spacing:.06em; text-transform:uppercase; text-align:right }
/* resultado */
.ir-hero { position:relative; min-height:300px; display:flex; align-items:flex-end; overflow:hidden; clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px)); margin-bottom:12px }
.ir-bg { position:absolute; inset:0 } .ir-bg svg, .ir-bg img { width:100%; height:100%; object-fit:cover; animation:drift 30s ease-in-out infinite alternate } .ir-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,7,15,.92),rgba(5,7,15,.55) 55%,rgba(5,7,15,.1)),linear-gradient(0deg,rgba(5,7,15,.85),transparent 60%) }
.ir-t { position:relative; padding:clamp(22px,4vw,48px); max-width:760px } .ir-t span { font:500 11px var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); animation:kick .8s var(--ease) both } .ir-t h3 { font:400 clamp(56px,9vw,128px)/.88 var(--f-cond) !important; text-transform:uppercase; margin:8px 0 12px; letter-spacing:.005em; transform:skewX(-7deg); animation:irIn .9s .15s var(--ease) both } @keyframes irIn { from { opacity:0; transform:translateX(-60px) skewX(-18deg) } }
.ir-t p { font:italic 400 clamp(20px,2vw,28px)/1.25 var(--f-serif); color:#ffcf9f; max-width:46ch; margin:0; animation:riseIn .8s .5s var(--ease) both }
.ir-b { animation:riseIn .5s var(--ease) both; animation-delay:calc(.7s + var(--i) * 110ms) } .bonus { padding:13px 0 !important } .bonus span { font:500 15px var(--f-oswald); letter-spacing:.05em; text-transform:uppercase } .bonus b { font:400 26px/1 var(--f-cond) !important; color:var(--win) }

/* ===== pantalla de inicio (elegir carrera), bienvenida y avisos ===== */
.intro-h { font:400 clamp(34px,4.4vw,60px)/1 var(--f-cond) !important; letter-spacing:.01em !important; margin-top:30px !important } .intro-tag { font:500 11px var(--f-mono) !important; letter-spacing:.24em !important }
.intro-list { gap:12px !important; max-width:980px; margin:12px auto 0 !important }
.intro-card { border:0 !important; border-radius:0 !important; padding:18px 20px !important; background:linear-gradient(160deg,rgba(238,243,255,.1),rgba(13,19,38,.82)) !important; clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); box-shadow:inset 4px 0 0 rgba(238,243,255,.25); backdrop-filter:blur(8px); animation:riseIn .6s var(--ease) both; transition:transform .25s var(--ease), background .25s, box-shadow .25s !important }
.intro-card:nth-child(2) { animation-delay:.08s } .intro-card:nth-child(3) { animation-delay:.16s } .intro-card:nth-child(n+4) { animation-delay:.24s }
.intro-card:hover:not(:disabled), .intro-card:focus-visible { transform:translateX(6px) !important; background:linear-gradient(160deg,rgba(255,138,43,.25),rgba(13,19,38,.85)) !important; box-shadow:inset 4px 0 0 var(--accent) !important }
.intro-card.main { box-shadow:inset 4px 0 0 var(--accent) !important; background:linear-gradient(160deg,rgba(255,138,43,.18),rgba(13,19,38,.85)) !important } .intro-card.new { background:repeating-linear-gradient(135deg,rgba(238,243,255,.04) 0 10px,transparent 10px 20px),rgba(13,19,38,.6) !important; box-shadow:inset 0 0 0 1px rgba(238,243,255,.2) !important }
.intro-card b { font:400 28px/1 var(--f-cond) !important; letter-spacing:.02em !important } .intro-card span { font:500 10.5px var(--f-mono) !important; letter-spacing:.1em; text-transform:uppercase } .intro-card em { font:500 10px var(--f-mono) !important; letter-spacing:.16em !important }
.intro-top button { border-radius:0 !important; clip-path:none !important }
.alphalist { list-style:none; margin:16px auto 6px; padding:0; max-width:640px; display:grid; gap:8px; text-align:left } .alphalist li { position:relative; padding:12px 16px 12px 44px; background:linear-gradient(100deg,rgba(238,243,255,.08),rgba(238,243,255,.02)); font:400 14px/1.45 var(--f-text); color:#cfd8ee; animation:riseIn .5s var(--ease) both; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); box-shadow:inset 3px 0 0 var(--accent) } .alphalist li:nth-child(2) { animation-delay:1s } .alphalist li:nth-child(3) { animation-delay:1.1s } .alphalist li:nth-child(4) { animation-delay:1.2s } .alphalist li:nth-child(1) { animation-delay:.9s }
.alphalist li::before { content:counter(al,decimal-leading-zero); counter-increment:al; position:absolute; left:12px; top:10px; font:400 22px/1 var(--f-cond); color:var(--accent) } .alphalist { counter-reset:al }
.ov-card, .ov-body { font-family:var(--f-text) } .ov-body p { font:italic 400 clamp(18px,1.8vw,24px)/1.35 var(--f-serif) !important; max-width:44ch; color:#e8edfb }
.ov-kicker { font:500 11px var(--f-mono) !important }
/* aviso de partida en vivo y ficha de lobby */
.card.lobby { box-shadow:none !important } .sx-lobby { gap:12px }
/* pantalla de licencia caducada / fin de alfa */
.expired .ov-card { clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px) }
/* ajustes: tarjetas de herramientas */
.tl-set, #toolscard details { border-radius:0 !important } #toolscard details > summary { font:500 12px var(--f-oswald) !important; letter-spacing:.14em; text-transform:uppercase }
.modehead h3 { font:400 clamp(26px,2.4vw,34px)/1 var(--f-cond) !important; text-transform:uppercase }
.modehead h3 .pos { color:var(--win) } .modehead h3 .neg { color:var(--loss) }
input[type=range], input[type=checkbox], input[type=radio], progress { accent-color:var(--accent) }

/* ===== iconos a dos tonos y tarjetas del héroe sin cuadrado ===== */
.ico2 .a { fill:currentColor; opacity:.34 } .ico2 .f { fill:currentColor } .ico2 .s { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
.ico2 { overflow:visible }
.tab .ico2, .side .tab svg { filter:none } .side .tab.on .ico2 { filter:drop-shadow(0 0 6px rgba(255,138,43,.6)) } .side .tab:hover .ico2 { transform:scale(1.12); transition:transform .2s var(--ease) }
h2 .ico2 { display:none }
.herogear { gap:10px !important; min-width:250px }
.hg { position:relative; display:flex; align-items:center; gap:14px; padding:12px 18px 12px 16px; background:linear-gradient(100deg,rgba(8,13,30,.82),rgba(8,13,30,.5)); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); box-shadow:inset 3px 0 0 var(--accent); backdrop-filter:blur(6px) }
.hg b { display:block; font:500 17px/1.1 var(--f-oswald); letter-spacing:.05em; text-transform:uppercase } .hg span, .hg em { font:500 10.5px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#aebbd8; font-style:normal }
.hg-club { box-shadow:inset 3px 0 0 var(--c, var(--accent)) } .hg-club > div { min-width:0 } .hg-pos { display:block; margin-top:5px; color:#fff !important } .hg-pos u { text-decoration:none; font:400 22px/1 var(--f-cond); color:var(--accent); margin-right:2px }
.hg-n { font:400 46px/.9 var(--f-cond); letter-spacing:.01em; display:flex; align-items:baseline; gap:3px; min-width:68px; color:#fff } .hg-n small { font:400 18px var(--f-cond); color:var(--accent); letter-spacing:.06em }
.hg-md .hg-n { color:var(--accent) } .hg-md .hg-n small { color:#fff; opacity:.6 }
.hg-seg { display:flex; gap:3px; margin-top:7px } .hg-seg i { width:9px; height:6px; background:rgba(238,243,255,.18); transform:skewX(-20deg) } .hg-seg i.on { background:var(--accent) } .hg-seg i.now { background:#fff; animation:pulse 1.4s ease-in-out infinite }
.hg-sp { display:flex; gap:5px; margin-top:7px } .hg-sp i { width:10px; height:10px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 8px var(--accent) } .hg-sp em { font:500 11px var(--f-mono) }
.hg .hg-n span { font:400 46px/.9 var(--f-cond) !important; letter-spacing:.01em !important; text-transform:none !important; color:#fff !important }
.hg-cr .hg-n { min-width:0 } .hg-cr > div:last-child span { display:block }
.herogear { min-width:270px }

/* ===== el garaje del piloto como fondo del menú de inicio ===== */
.gar-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:-2; animation:garIn 2.2s var(--ease) .3s both } @keyframes garIn { from { opacity:0 } }
.intro.gar .intro-shade { background:linear-gradient(90deg,rgba(5,7,15,.88) 0,rgba(5,7,15,.55) 34%,rgba(5,7,15,0) 60%),linear-gradient(0deg,rgba(5,7,15,.7),transparent 35%) !important }
@media (min-width:1100px) { .intro.gar { place-items:center start !important; padding-left:clamp(32px,7vw,120px) !important } .intro.gar .intro-main { align-items:flex-start !important; text-align:left; max-width:560px } .intro.gar .intro-list { grid-template-columns:1fr !important; max-width:460px } .intro.gar .intro-tag, .intro.gar .intro-h { text-align:left } .intro.gar .rl-logo { align-self:flex-start } }
.intro-foot a, .gar-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px }
.intro-card .cdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; box-shadow:0 0 0 2px rgba(255,255,255,.2) }
.intro.gar::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 85% 85% at 62% 52%,transparent 45%,rgba(3,4,10,.75) 100%) }
/* tarjeta «Por modo» sin recuadro: los anillos flotan sobre el fondo */
.card.bare { padding:6px 0 0 !important } .card.bare::before, .card.bare::after { display:none !important; content:none !important } .card.bare > h2:first-child { margin-bottom:6px !important }
.card.bare .donuts { justify-content:flex-start; gap:10px 26px }
#gfxcard .setrow { justify-content:space-between; align-items:center; gap:18px } #gfxSel { min-width:210px; flex:none }
.intro-card .cbody u { text-decoration:none }

.cmode { display:inline-block; margin-left:10px; padding:2px 7px; font:500 9px/1.3 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; vertical-align:middle; color:#ffb070; border:1px solid rgba(255,138,43,.5); font-style:normal } .cmode.st { color:#8fb4ff; border-color:rgba(79,134,255,.6) }
.inw { position:absolute; inset:0; z-index:20; display:grid; place-items:center; background:rgba(4,7,16,.55); backdrop-filter:blur(3px); animation:garIn .3s both }
.inw-box { width:min(640px,92vw); padding:26px 28px; background:linear-gradient(160deg,rgba(238,243,255,.1),rgba(9,14,30,.94)); clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px)); box-shadow:inset 4px 0 0 var(--accent) }
.inw-box h3 { margin:0 0 14px; font:400 34px/1 var(--f-cond); letter-spacing:.02em; text-transform:uppercase }
.inw-l { display:block; font:500 10.5px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#aab4cf } .inw-l input { display:block; width:100%; margin-top:6px; padding:11px 12px; font:400 18px var(--f-body); color:#eef3ff; background:rgba(238,243,255,.07); border:1px solid rgba(238,243,255,.22); outline:none } .inw-l input:focus { border-color:var(--accent) }
.inw-modes { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 12px } @media (max-width:560px) { .inw-modes { grid-template-columns:1fr } }
.inw-m { all:unset; box-sizing:border-box; cursor:pointer; display:block; padding:14px 16px; background:rgba(238,243,255,.05); border:1px solid rgba(238,243,255,.18); transition:.2s } .inw-m b { display:block; font:400 24px/1.05 var(--f-cond); text-transform:uppercase; margin-bottom:6px } .inw-m span { display:block; font:400 13px/1.4 var(--f-body); color:#c4cce2 } .inw-m em { display:block; margin-top:9px; font:500 9.5px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; font-style:normal; color:#ff9a4a }
.inw-m[data-m=stats] em { color:#8fb4ff } .inw-m:hover, .inw-m:focus-visible { background:rgba(238,243,255,.1); transform:translateY(-2px) } .inw-m.on { border-color:var(--accent); background:rgba(255,138,43,.12) } .inw-m[data-m=stats].on { border-color:#4f86ff; background:rgba(79,134,255,.14) }
.inw-box small { display:block; color:#98a3c2; font:400 12px/1.4 var(--f-body) } .inw-act { display:flex; justify-content:flex-end; gap:10px; margin-top:16px }

.intro-list { max-height:calc(100vh - 470px); min-height:160px; overflow-y:auto; padding-right:8px; scrollbar-width:thin; scrollbar-color:rgba(255,138,43,.5) transparent } .intro-foot .gar-credit { font-size:10px; line-height:1.45; max-width:1100px; margin:0 auto 6px }

#veil { position:fixed; inset:0; z-index:4000; display:grid; place-items:center; background:#05070f; opacity:0; pointer-events:all; transition:opacity .35s var(--ease) } #veil.on { opacity:1 } #veil.out { opacity:0; pointer-events:none; transition-duration:.55s }
#veil canvas { position:absolute; inset:0; width:100%; height:100% }
#veil .vl-c { position:relative; display:flex; flex-direction:column; align-items:center; gap:22px } #veil .vl-c img { height:clamp(120px,21vh,190px); width:auto; filter:drop-shadow(0 10px 34px rgba(255,120,30,.35)); animation:vlIn .7s var(--ease) both }
#veil .vl-bar { position:relative; display:block; width:min(340px,64vw); height:3px; background:rgba(238,243,255,.14); overflow:hidden; animation:vlIn .7s var(--ease) .12s both } #veil .vl-bar u { position:absolute; inset:0; background:linear-gradient(90deg,#ff7a1a,#ffc47a); transform-origin:left; transform:scaleX(0); box-shadow:0 0 14px rgba(255,138,43,.7) }
#veil .vl-pct { margin-top:-10px; font:500 11px var(--f-mono); letter-spacing:.2em; color:#8c97b8; animation:vlIn .7s var(--ease) .2s both } #veil .vl-pct::after { content:' %' }
@keyframes vlIn { from { opacity:0; transform:translateY(10px) } }

.inw-sub { margin:-8px 0 14px; font:500 10.5px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:#aab4cf } #sideAv .cav:hover { outline:2px solid var(--accent); outline-offset:2px }

/* ===== título exclusivo «La Joya»: gema facetada, destello que cruza el texto, color que respira y chispas ===== */
.joya { position:relative; display:inline-flex; align-items:center; gap:7px; padding:3px 11px 3px 7px; margin-left:6px; vertical-align:middle; text-transform:none; letter-spacing:.04em; isolation:isolate;
  background:linear-gradient(135deg,rgba(157,252,255,.14),rgba(139,123,255,.16) 55%,rgba(255,122,217,.14)); border:1px solid rgba(180,170,255,.55); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); overflow:visible }
.joya b { font:400 15px/1 var(--f-cond); letter-spacing:.1em; text-transform:uppercase; background:linear-gradient(100deg,#9dfcff 0%,#c9b8ff 28%,#fff 44%,#ff9be6 62%,#9dfcff 100%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:jyText 5s linear infinite }
.joya .jy-gem { width:20px; height:20px; flex:none; filter:drop-shadow(0 0 6px rgba(150,140,255,.9)); animation:jyGem 3.2s ease-in-out infinite }
.joya::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); background-size:250% 100%; background-position:160% 0; animation:jySweep 3.4s ease-in-out infinite; mix-blend-mode:overlay }
.joya .jy-sp { position:absolute; width:9px; height:9px; pointer-events:none; background:#fff; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); opacity:0; filter:drop-shadow(0 0 4px #bda8ff); animation:jySp 2.8s ease-in-out infinite }
.joya .s1 { left:-4px; top:-5px; animation-delay:.1s } .joya .s2 { right:14%; top:-7px; width:7px; height:7px; animation-delay:1.1s } .joya .s3 { right:-5px; bottom:-4px; width:10px; height:10px; animation-delay:1.8s } .joya .s4 { left:34%; bottom:-6px; width:6px; height:6px; animation-delay:.7s }
@keyframes jyText { to { background-position:-260% 0 } } @keyframes jySweep { 0%,35% { background-position:160% 0 } 100% { background-position:-60% 0 } }
@keyframes jyGem { 50% { transform:rotate(-8deg) scale(1.12); filter:drop-shadow(0 0 10px rgba(255,150,230,1)) } } @keyframes jySp { 0%,70%,100% { opacity:0; transform:scale(.2) rotate(0) } 30% { opacity:1; transform:scale(1) rotate(60deg) } }
.creatorwrap { margin-top:6px } .creatorwrap .joya { margin-left:0 }
.joya-rev { position:fixed; inset:0; z-index:4200; display:grid; place-items:center; background:radial-gradient(70% 70% at 50% 45%,rgba(40,24,90,.92),rgba(5,6,18,.97)); animation:jrIn .5s ease both; cursor:pointer } .joya-rev.out { opacity:0; transition:opacity .7s }
.joya-rev .jr-rays { position:absolute; width:140vmax; height:140vmax; left:50%; top:50%; margin:-70vmax 0 0 -70vmax; background:repeating-conic-gradient(from 0deg,rgba(170,150,255,.16) 0 6deg,transparent 6deg 18deg); -webkit-mask:radial-gradient(closest-side,#000 5%,transparent 62%); mask:radial-gradient(closest-side,#000 5%,transparent 62%); animation:jrSpin 22s linear infinite }
.joya-rev .jr-c { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center }
.joya-rev .jr-gem { width:clamp(110px,18vmin,190px); height:auto; filter:drop-shadow(0 0 28px rgba(160,140,255,.95)); animation:jrGem 1.1s cubic-bezier(.2,1.4,.3,1) both, jyGem 3.2s ease-in-out 1.1s infinite }
.joya-rev em { font:500 12px var(--f-mono); letter-spacing:.3em; text-transform:uppercase; font-style:normal; color:#b9b0ff; animation:jrUp .7s .5s both }
.joya-rev strong { font:400 clamp(54px,11vmin,120px)/.95 var(--f-cond); letter-spacing:.06em; text-transform:uppercase; background:linear-gradient(100deg,#9dfcff,#c9b8ff 30%,#fff 46%,#ff9be6 64%,#9dfcff); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:jrUp .8s .65s both, jyText 4s linear 1.4s infinite }
.joya-rev span { font:400 14px var(--f-body); color:#9aa3c8; animation:jrUp .7s 1.1s both }
.joya-rev .jr-sp { position:absolute; left:50%; top:46%; width:12px; height:12px; background:#fff; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); filter:drop-shadow(0 0 6px #c9b8ff); opacity:0; animation:jrBurst 1.6s var(--d) cubic-bezier(.1,.7,.2,1) .4s both }
@keyframes jrIn { from { opacity:0 } } @keyframes jrSpin { to { transform:rotate(360deg) } } @keyframes jrGem { from { transform:scale(.1) rotate(-120deg); opacity:0 } } @keyframes jrUp { from { opacity:0; transform:translateY(18px) } }
@keyframes jrBurst { 0% { opacity:0; transform:rotate(var(--a)) translateX(0) scale(.3) } 20% { opacity:1 } 100% { opacity:0; transform:rotate(var(--a)) translateX(min(34vw,420px)) scale(1) } }
@media (prefers-reduced-motion:reduce) { .joya, .joya b, .joya .jy-gem, .joya::before, .joya .jy-sp, .joya-rev *, .joya-rev { animation:none !important } .joya .jy-sp { opacity:0 } }

/* las pantallas emergentes largas (bienvenida de la alfa…) se desplazan y el botón de acción queda siempre a la vista */
.overlay .ov-card { overflow-x:hidden !important; overflow-y:auto !important; scrollbar-width:thin; scrollbar-color:rgba(255,138,43,.5) transparent }
.overlay .ov-card .actions { position:sticky; bottom:0; z-index:4; margin:0 !important; padding:16px 0 12px; background:linear-gradient(to top,var(--card) 62%,transparent) }

/* ===== La Mesa: cara o cruz, ruleta y tragaperras ===== */
.ms-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; flex-wrap:wrap } .ms-head h2 { margin:0 0 4px }
.ms-bal { text-align:right; font:500 10px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:#8c97b8 } .ms-bal b { display:block; font:400 40px/1 var(--f-cond); color:#ffc94d; letter-spacing:.02em } .ms-bal em { font-style:normal }
.ms-closed { margin:12px 0; padding:12px 16px; background:rgba(255,61,90,.1); border:1px solid rgba(255,61,90,.4); color:#ffb4c0 }
.ms-tabs { display:flex; gap:8px; margin:16px 0 14px; flex-wrap:wrap } .ms-tab { padding:9px 18px; font:400 17px var(--f-cond); letter-spacing:.06em; text-transform:uppercase; background:rgba(238,243,255,.05); border:1px solid rgba(238,243,255,.16); color:#aab4cf; cursor:pointer; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%) } .ms-tab.on { background:linear-gradient(135deg,#ff8a2b,#ff5a14); color:#fff; border-color:transparent }
.ms-stage { padding:22px; background:radial-gradient(90% 120% at 50% 0,rgba(47,123,255,.14),rgba(5,7,15,.6)); border:1px solid rgba(238,243,255,.12) } .ms.busy .ms-stage { pointer-events:none }
.ms-row { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 }
.ms-play, .ms-go, .ms-cash { padding:12px 22px; font:400 18px var(--f-cond); letter-spacing:.06em; text-transform:uppercase; color:#fff; border:0; cursor:pointer; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%) } .ms-play { background:linear-gradient(135deg,#2f7bff,#1a4fd0) } .ms-go { background:rgba(238,243,255,.1); border:1px solid rgba(238,243,255,.2) } .ms-go.on { background:linear-gradient(135deg,#ff8a2b,#ff5a14) } .ms-cash { background:linear-gradient(135deg,#2fb86a,#17884a) }
.ms button:disabled { opacity:.4; cursor:not-allowed } .ms-play:hover:not(:disabled), .ms-go:hover:not(:disabled), .ms-cash:hover:not(:disabled) { filter:brightness(1.15) }
.ms-flip, .ms-wheel { display:flex; gap:34px; align-items:center; flex-wrap:wrap; justify-content:center }
.ms-coin-wrap { perspective:900px; width:150px; height:150px } .ms-coin { position:relative; width:150px; height:150px; transform-style:preserve-3d; transition:transform 1.5s } .ms-coin .f { position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; align-content:center; font-size:62px; backface-visibility:hidden; box-shadow:inset 0 0 0 6px rgba(255,255,255,.25),0 12px 34px rgba(0,0,0,.5); background:radial-gradient(circle at 32% 28%,#fff1b0,#ffc94d 45%,#c98a12) } .ms-coin .f small { font:400 15px var(--f-cond); letter-spacing:.14em; color:#5b3b05 } .ms-coin .cruz { transform:rotateY(180deg); background:radial-gradient(circle at 32% 28%,#e8f2ff,#9bb7ee 45%,#4d6fb8) } .ms-coin .cruz small { color:#17306b }
.ms-flip-ui { max-width:430px } .ms-flip-ui .sub { margin-top:10px } .ms-pot { font:500 11px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#aab4cf } .ms-pot b { font:400 34px var(--f-cond); color:#ffc94d; margin:0 6px }
.ms-wbox { position:relative; width:min(330px,80vw); aspect-ratio:1 } .ms-wrot { width:100%; height:100%; transition:transform 4.6s } .ms-wsvg { width:100%; height:100%; filter:drop-shadow(0 10px 28px rgba(0,0,0,.55)) } .ms-ptr { position:absolute; left:50%; top:-12px; width:0; height:0; margin-left:-12px; border:12px solid transparent; border-top:24px solid #ffc94d; z-index:3; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) }
.ms-slots { display:flex; flex-direction:column; align-items:center; gap:12px } .ms-reels { display:flex; gap:12px; padding:14px; background:#05070f; border:2px solid #ff8a2b; box-shadow:0 0 28px rgba(255,138,43,.35),inset 0 0 22px rgba(0,0,0,.8) } .ms-reel { width:96px; height:84px; overflow:hidden; background:linear-gradient(#1a2038,#0c1124 50%,#1a2038); border:1px solid rgba(238,243,255,.18) }
.ms-strip { will-change:transform } .ms-strip i { display:block; height:84px; line-height:84px; font-style:normal; font-size:46px; text-align:center }
.ms-res { min-height:44px; margin:14px 0 4px; font:400 22px/1.3 var(--f-cond); letter-spacing:.04em; text-transform:uppercase; color:#cdd6f0 } .ms-res b { color:#ffc94d } .ms-res.pos { color:#7dff9a } .ms-res.neg { color:#ff8a9a } .ms-res.gold { color:#ffd86b; text-shadow:0 0 22px rgba(255,200,60,.6) }
.ms-bet { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 10px } .ms-bet > span, .ms-ex > span, .ms-hist > span { font:500 10px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:#8c97b8; margin-right:8px } .ms-chip { padding:7px 14px; font:400 16px var(--f-cond); background:rgba(238,243,255,.06); border:1px solid rgba(238,243,255,.2); color:#dfe6fb; cursor:pointer } .ms-chip.on { background:#ffc94d; color:#1c1203; border-color:#ffc94d }
.ms-odds { margin:12px 0; padding:10px 14px; background:rgba(238,243,255,.04); border:1px solid rgba(238,243,255,.1) } .ms-odds summary { cursor:pointer; font:500 11px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#aab4cf } .ms-oddsg { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:12px } .ms-oddsg b { font:400 17px var(--f-cond); text-transform:uppercase; letter-spacing:.05em } .ms-oddsg p { margin:4px 0 0; color:#aab4cf; font-size:13px; line-height:1.5 }
.ms-ex { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 } .ms-exi { font-style:normal; padding:5px 11px; font:500 12px var(--f-mono); letter-spacing:.06em; color:#6d789a; border:1px dashed rgba(238,243,255,.22) } .ms-exi.own { color:#ffd86b; border:1px solid rgba(255,216,107,.6); background:rgba(255,200,60,.1) }
.ms-hist { display:grid; gap:4px; margin-top:8px; font-size:13px; color:#aab4cf } .ms-hist b.pos { color:#7dff9a } .ms-hist b.neg { color:#ff8a9a }
body[data-frame="m_suerte"] { --fr:#34e08a; --fr2:#ffe27a } body[data-frame="m_jackpot"] { --fr:#ff3df2; --fr2:#7df9ff }

.frozenbar { margin:0 0 14px; padding:10px 16px; font:500 12px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:#ffd48a; background:rgba(255,160,40,.1); border:1px solid rgba(255,160,40,.4) }
.frozenbar { grid-column:1 / -1 }

/* ===== La Mesa v2: apuesta libre, leyenda de la ruleta ===== */
.ms-betbox { display:grid; gap:10px; margin:14px 0 12px; padding:14px 16px; background:rgba(5,7,15,.55); border:1px solid rgba(238,243,255,.14); min-width:min(380px,100%) }
.ms-betbox label { font:500 10px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:#8c97b8 }
.ms-bn { display:flex; align-items:center; gap:10px } .ms-bn span { font:500 11px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#8c97b8 }
.ms-bn button { width:42px; height:42px; font:400 24px/1 var(--f-cond); color:#fff; background:rgba(238,243,255,.08); border:1px solid rgba(238,243,255,.22); cursor:pointer; padding:0 } .ms-bn button:hover:not(:disabled) { background:rgba(255,138,43,.25); border-color:#ff8a2b }
.ms-bn input { width:120px; height:42px; text-align:center; font:400 28px var(--f-cond); letter-spacing:.04em; color:#ffc94d; background:#05070f; border:1px solid rgba(255,201,77,.55); outline:0; -moz-appearance:textfield; appearance:textfield } .ms-bn input:focus { border-color:#ffc94d; box-shadow:0 0 0 3px rgba(255,201,77,.18) }
.ms-bn input::-webkit-outer-spin-button, .ms-bn input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
.ms-rg { width:100%; height:6px; -webkit-appearance:none; appearance:none; background:linear-gradient(90deg,#2f7bff,#ff8a2b); outline:0; cursor:pointer } .ms-rg::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:26px; background:#fff; border:2px solid #ff8a2b; clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%) } .ms-rg::-moz-range-thumb { width:18px; height:24px; background:#fff; border:2px solid #ff8a2b; border-radius:0 }
.ms-bq { display:flex; gap:8px } .ms-bq button { flex:1; padding:7px 10px; font:500 11px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:#cdd6f0; background:transparent; border:1px solid rgba(238,243,255,.2); cursor:pointer } .ms-bq button:hover { border-color:#ffc94d; color:#ffc94d }
.ms-low { font-size:14px; color:#ffb4a0 }
.ms-wheel { gap:30px; flex-wrap:nowrap } @media (max-width:1100px) { .ms-wheel { flex-wrap:wrap } }
.ms-legend { display:grid; gap:6px; width:min(300px,100%); align-self:center; flex:none }
.ms-lgt { font:500 10px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:#8c97b8; margin-bottom:2px }
.ms-lg { display:grid; grid-template-columns:18px 1fr auto; gap:10px; align-items:center; padding:6px 10px; background:rgba(238,243,255,.04); border-left:3px solid transparent }
.ms-lg i { width:18px; height:18px; display:block; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) } .ms-lg b { display:block; font:400 16px var(--f-cond); letter-spacing:.06em; text-transform:uppercase; color:#fff } .ms-lg span { display:block; font-size:12px; line-height:1.3; color:#9aa6c6 } .ms-lg em { font:500 11px var(--f-mono); font-style:normal; color:#ffc94d }
.ms-play { min-width:240px; font-size:22px; padding:15px 28px } .ms-flip-ui .ms-play { display:block; margin-top:6px }

/* ===== La Mesa: aviso legal, dados y plinko ===== */
.ms-legal { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:start; margin:14px 0 4px; padding:12px 16px; background:rgba(47,123,255,.08); border:1px solid rgba(47,123,255,.4); border-left:4px solid #2f7bff }
.ms-legal b { grid-row:1/3; font:400 20px/1.1 var(--f-cond); letter-spacing:.1em; color:#8fb4ff; align-self:center; max-width:120px } .ms-legal p { margin:0; font-size:13px; line-height:1.55; color:#c3cde8 } .ms-legal u { text-decoration:none; color:#fff; font-weight:600 }
@media (max-width:640px) { .ms-legal { grid-template-columns:1fr } .ms-legal b { grid-row:auto; max-width:none } }
.ms-dice, .ms-plinko { display:flex; gap:34px; align-items:center; flex-wrap:wrap; justify-content:center }
.ms-dicebox { display:flex; gap:18px; padding:22px 26px; background:radial-gradient(circle at 50% 30%,#1f6b45,#0d3a24); border:3px solid #6b3f17; box-shadow:inset 0 0 30px rgba(0,0,0,.6) } .ms-die { width:92px; height:92px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.5)) } .ms-dicebox.roll .ms-die { animation:msShake .17s infinite alternate } .ms-dicebox.roll .ms-die:nth-child(2) { animation-delay:.08s }
@keyframes msShake { from { transform:rotate(-14deg) translateY(-6px) } to { transform:rotate(12deg) translateY(4px) } }
.ms-dopts { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px } .ms-dopt { flex:1 1 110px; display:grid; gap:2px; padding:10px 12px; text-align:center; color:#dfe6fb; background:rgba(238,243,255,.06); border:1px solid rgba(238,243,255,.2); cursor:pointer }
.ms-dopt b { font:400 20px var(--f-cond); letter-spacing:.08em; text-transform:uppercase } .ms-dopt span { font:500 12px var(--f-mono); color:#8c97b8 } .ms-dopt em { font:500 11px var(--f-mono); font-style:normal; color:#ffc94d } .ms-dopt.on { background:linear-gradient(135deg,#ff8a2b,#ff5a14); border-color:transparent; color:#fff } .ms-dopt.on span, .ms-dopt.on em { color:#fff }
.ms-pbsvg { width:min(360px,86vw); height:auto; background:radial-gradient(90% 80% at 50% 0,rgba(47,123,255,.2),rgba(5,7,15,.7)); border:1px solid rgba(238,243,255,.14) } .ms-pslot rect { transition:filter .2s } .ms-pslot.hit rect { filter:brightness(1.7) drop-shadow(0 0 8px #fff) }

.ov-title .wd { display:inline-block; white-space:nowrap }

/* ===== La Mesa: arte 3D de Blender ===== */
.ms-banner { position:relative; margin:0 0 12px; border-radius:0; overflow:hidden; border:1px solid rgba(255,200,60,.25); box-shadow:0 20px 50px rgba(0,0,0,.45) } .ms-banner img { display:block; width:100%; height:auto }
.ms-banner .ms-bal { position:absolute; right:22px; top:50%; transform:translateY(-50%); padding:10px 18px; background:rgba(5,8,18,.72); border:1px solid rgba(255,200,60,.5); backdrop-filter:blur(4px) }
.ms-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.ms-head { margin-bottom:0 } .ms-head .sub { margin-top:0 }
.ms-prize { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:2px 0 12px } .ms-prt { font:500 10px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:#8c97b8; margin-right:4px }
.ms-prize i { font-style:normal; padding:6px 14px; background:linear-gradient(135deg,rgba(255,200,60,.2),rgba(255,120,20,.15)); border:1px solid rgba(255,200,60,.55); display:inline-flex; gap:8px; align-items:baseline } .ms-prize em { font:500 11px var(--f-mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:#d9c38a } .ms-prize b { font:400 24px var(--f-cond); color:#ffd86b; letter-spacing:.04em }
.ms-sym { width:110px; height:110px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)) } .ms-symS { width:28px; height:28px; vertical-align:middle; object-fit:contain } .ms-symB { width:34px; height:34px; vertical-align:middle; margin-left:6px; object-fit:contain }
.ms-coin3d { width:230px; height:230px; flex:none; will-change:transform } .ms-coin3d canvas { width:100%; height:100%; display:block; filter:drop-shadow(0 22px 24px rgba(0,0,0,.55)) }
.ms-wbox { position:relative; width:min(380px,80vw); aspect-ratio:1 } .ms-wrot { position:absolute; inset:0 } .ms-wdisc { display:block; width:100%; height:100%; filter:drop-shadow(0 12px 26px rgba(0,0,0,.55)) } .ms-wrim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2 }
.ms-wbox .ms-ptr { top:-8px; z-index:4 }
.ms-slots { align-items:center }
.ms-slotm { position:relative; width:640px; max-width:none; aspect-ratio:780 / 330; flex:none } .ms-sframe { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; filter:drop-shadow(0 22px 30px rgba(0,0,0,.55)) }
.ms-slotm .ms-reels { position:absolute; inset:0; display:block; padding:0; background:none; border:0; box-shadow:none; z-index:1 }
.ms-slotm .ms-reel { position:absolute; top:27.3%; width:19.2%; height:45.45%; overflow:hidden; background:linear-gradient(#10172e,#1a2342 50%,#10172e); border:0 } .ms-slotm .ms-reel:nth-child(1) { left:18.6% } .ms-slotm .ms-reel:nth-child(2) { left:40.4% } .ms-slotm .ms-reel:nth-child(3) { left:62.2% }
.ms-slotm .ms-strip i { display:grid; place-items:center; height:123px; width:100% }
.ms-dicebox .ms-die { width:132px; height:132px; filter:drop-shadow(0 12px 14px rgba(0,0,0,.55)) }
.ms-dicebox { gap:10px; padding:26px 34px }
.ms-pbwrap { position:relative; width:min(380px,86vw); flex:none } .ms-pbimg { display:block; width:100%; height:auto; box-shadow:0 26px 60px rgba(0,0,0,.5) }
.ms-pbwrap .ms-pbsvg { position:absolute; inset:0; width:100%; height:100%; background:none; border:0 } .ms-pslot rect { fill:transparent; transition:fill .2s } .ms-pslot.hit rect { fill:rgba(255,255,255,.5); filter:drop-shadow(0 0 8px #fff) }

/* La Mesa: lanzamiento de dados (los dados vuelan, rebotan y proyectan sombra) y onda de impacto del plinko */
.ms-dicebox { --ds:min(132px,24vw); position:relative; display:block; width:min(560px,92vw); height:300px; padding:0; overflow:hidden }
.ms-dicebox::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 70%,rgba(0,0,0,.3)) }
.ms-dicebox .ms-dw { position:absolute; bottom:46px; width:var(--ds); height:var(--ds); margin-left:calc(var(--ds) / -2); will-change:transform; transform-origin:50% 60% }
.ms-dicebox .ms-dw .ms-die { width:100%; height:100%; display:block; filter:drop-shadow(0 8px 8px rgba(0,0,0,.45)); animation:none !important; pointer-events:none }
.ms-dicebox .ms-dsh { position:absolute; bottom:32px; width:calc(var(--ds) * .9); height:calc(var(--ds) * .2); margin-left:calc(var(--ds) * -.45); border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0)); will-change:transform }
.ms-dicebox .d0 { left:32% } .ms-dicebox .d1 { left:68% }
.ms-ping { fill:none; stroke:#ffd25a; stroke-width:1.6; transform-box:fill-box; transform-origin:center; animation:msPing .45s ease-out forwards; pointer-events:none }
@keyframes msPing { from { transform:scale(1); opacity:.95 } to { transform:scale(3.4); opacity:0 } }

/* Cuestionario inicial: al marcar una opción se repinta la misma pregunta sin volver a animar su entrada (evita el "parpadeo" de la pregunta anterior) */
.iw.still, .iw.still .iw-o { animation:none }

/* Código de creador (REPPUT): ficha pequeña en el menú lateral, franja fina al final de Inicio y una línea en la pantalla de inicio. Discreto: no ocupa la página. */
.ccode { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; box-sizing:border-box; text-align:left; padding:8px 12px 9px; cursor:pointer; background:linear-gradient(160deg,rgba(255,176,60,.12),rgba(255,176,60,.03)); border:1px solid rgba(255,176,60,.28); border-radius:var(--r,10px); color:var(--text,#eef3ff); font:inherit; transition:border-color .2s, background .2s, transform .15s var(--ease) }
.ccode:hover { border-color:rgba(255,176,60,.65); background:linear-gradient(160deg,rgba(255,176,60,.2),rgba(255,176,60,.05)) }
.ccode .cc-k { font:500 10px var(--f-mono,monospace); letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.ccode b { font:400 22px/1.05 var(--f-cond,var(--f-oswald,sans-serif)); letter-spacing:.14em; color:#ffb03c }
.ccode .cc-h { font-size:11px; color:var(--muted) }
.ccode.copied { border-color:#6ee7a8 } .ccode.copied .cc-h, .ccode.copied b { color:#6ee7a8 }
body.side-collapsed .ccode { display:none }
.ccstrip { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:10px 16px; border:1px solid rgba(255,176,60,.2); border-radius:12px; background:linear-gradient(90deg,rgba(255,176,60,.08),rgba(255,176,60,.02)) }
.ccstrip .cc-txt { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 320px } .ccstrip .cc-star { color:#ffb03c; font-size:18px; flex:none }
.ccstrip p { margin:0; font-size:13px; line-height:1.4; color:var(--muted) } .ccstrip p b { color:var(--text,#eef3ff); font-weight:600 }
.cc-btn { display:inline-flex; align-items:center; gap:10px; padding:6px 8px 6px 14px; cursor:pointer; background:rgba(255,176,60,.14); border:1px solid rgba(255,176,60,.5); border-radius:8px; color:var(--text,#eef3ff); font:inherit; transition:background .2s, border-color .2s }
.cc-btn b { font:400 17px var(--f-cond,var(--f-oswald,sans-serif)); letter-spacing:.14em; color:#ffb03c } .cc-btn span { font:600 11px var(--f-mono,monospace); letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:5px; background:rgba(255,255,255,.1) }
.cc-btn:hover { background:rgba(255,176,60,.26) } .cc-btn.copied { border-color:#6ee7a8 } .cc-btn.copied b { color:#6ee7a8 }
.gar-credit.cc-intro { margin-top:4px } .gar-credit.cc-intro b { color:#ffb03c; letter-spacing:.1em }

/* Cabecera con imagen y título en cada apartado (imágenes /ui/sec_<apartado>.webp renderizadas en Blender) */
.sechead { grid-column:1 / -1; position:relative; height:clamp(150px,19vw,220px); overflow:hidden; border:1px solid rgba(238,243,255,.08); border-radius:14px; background:linear-gradient(120deg,#0a1020,#13203f 60%,#1a2c52); box-shadow:0 14px 40px rgba(0,0,0,.35) }
.sechead img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; pointer-events:none }
.sechead::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(5,7,15,.88) 0%,rgba(5,7,15,.55) 34%,rgba(5,7,15,0) 66%), linear-gradient(0deg,rgba(5,7,15,.55),transparent 38%) }
.sechead .sh-t { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 clamp(18px,3vw,38px); max-width:min(62%,560px) }
.sechead .sh-k { font:500 11px var(--f-mono); letter-spacing:.24em; text-transform:uppercase; color:var(--accent) }
.sechead h1 { margin:0; font:400 clamp(34px,5vw,60px)/.95 var(--f-cond) !important; text-transform:uppercase; letter-spacing:.01em; color:#fff; text-shadow:0 4px 24px rgba(0,0,0,.55) }
.sechead p { margin:4px 0 0; font-size:clamp(12.5px,1.2vw,14.5px); line-height:1.4; color:rgba(238,243,255,.78); max-width:46ch }
.panel:not([hidden]) > .sechead { animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both }
@media (max-width:720px) { .sechead .sh-t { max-width:86% } }

/* Panel estrecho (≤900 px): el código de creador pasa a una sola línea para no comerse la pantalla */
@media (max-width:900px) {
  .side-foot .ccode { flex-direction:row; align-items:baseline; gap:8px; width:auto; padding:6px 10px; order:9 }
  .side-foot .ccode .cc-k { font-size:9px; letter-spacing:.14em } .side-foot .ccode b { font-size:16px } .side-foot .ccode .cc-h { display:none }
  .side-play .playbtn { padding:7px 10px; font-size:11px }
}


/* Partidos clave, insignias, ventajas de estilo e historia de la semana (2026-10-27) */
.keym { margin:4px 0 12px; padding:12px 14px; border:1px solid rgba(255,176,60,.45); border-left:3px solid #ffb03c; border-radius:10px; background:linear-gradient(120deg,rgba(255,176,60,.14),rgba(255,176,60,.03)) }
.keym .km-k { display:flex; align-items:center; gap:6px; font:500 10.5px var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:#ffb03c }
.keym b { display:block; margin:4px 0 2px; font:400 22px/1.05 var(--f-cond); text-transform:uppercase; letter-spacing:.01em }
.keym p { margin:0 0 8px; font-size:13px; color:var(--muted) }
.keym.k-derbi { border-left-color:#ff5a3c } .keym.k-derbi .km-k { color:#ff7a5a } .keym.k-final { border-left-color:#ffd25a }
.kmhist { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.bdgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px }
.bd { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:10px; background:rgba(238,243,255,.04); border:1px solid rgba(238,243,255,.07) }
.bd .bd-ico { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:rgba(238,243,255,.06); color:var(--muted) }
.bd .bd-b { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px } .bd b { font:500 15px var(--f-oswald); letter-spacing:.04em; text-transform:uppercase }
.bd .bd-t { font:500 10px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) } .bd .sub { font-size:11.5px }
.bd.t0 { opacity:.6 } .bd.t0 .bd-ico { filter:grayscale(1) }
.bd.t1 .bd-ico { background:rgba(205,127,50,.18); color:#e0975a; box-shadow:0 0 0 2px rgba(205,127,50,.55) } .bd.t1 .bd-t { color:#e0975a }
.bd.t2 .bd-ico { background:rgba(200,210,225,.16); color:#dfe6f2; box-shadow:0 0 0 2px rgba(200,210,225,.6) } .bd.t2 .bd-t { color:#dfe6f2 }
.bd.t3 .bd-ico { background:rgba(255,200,70,.18); color:#ffd25a; box-shadow:0 0 0 2px rgba(255,200,70,.7), 0 0 14px rgba(255,200,70,.35) } .bd.t3 .bd-t { color:#ffd25a }
.bd.t4 .bd-ico { background:linear-gradient(135deg,rgba(150,90,255,.35),rgba(255,90,200,.3)); color:#fff; box-shadow:0 0 0 2px #c58bff, 0 0 18px rgba(197,139,255,.55) } .bd.t4 .bd-t { color:#d7b0ff }
.bd .bar { height:4px; margin:3px 0 1px }
.perks { margin-top:12px; padding-top:10px; border-top:1px solid rgba(238,243,255,.08) }
.perks .pk-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px } .perks .pk-h b { font:500 13px var(--f-oswald); letter-spacing:.08em; text-transform:uppercase }
.perks .pk { display:flex; gap:8px; align-items:baseline; padding:4px 0; font-size:12.5px; color:var(--muted) } .perks .pk i { font-style:normal; width:16px; flex:none }
.perks .pk.on { color:var(--text,#eef3ff) } .perks .pk.on i { color:#6ee7a8 } .perks .pk em { margin-left:auto; font-style:normal; font:500 10px var(--f-mono); color:var(--muted); white-space:nowrap }
.chstory { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:center; margin-bottom:12px; padding:14px 16px; border-radius:12px; border:1px solid rgba(120,170,255,.3); background:linear-gradient(120deg,rgba(60,110,255,.16),rgba(60,110,255,.03)) }
.chstory .cs-k { display:flex; align-items:center; gap:6px; font:500 10.5px var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:#8cb4ff }
.chstory b { display:block; margin:4px 0 2px; font:400 22px/1.05 var(--f-cond); text-transform:uppercase } .chstory p { margin:0; font-size:13px; color:var(--muted) }
.chstory.done { border-color:rgba(110,231,168,.45); background:linear-gradient(120deg,rgba(110,231,168,.14),rgba(110,231,168,.03)) }
@media (max-width:720px) { .chstory { grid-template-columns:1fr } }


/* Temporada (calendario RLCS, duelo, directiva, leyendas), informe del rival, canal y estado (2026-10-27) */
.scout { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:rgba(238,243,255,.04); border:1px solid rgba(238,243,255,.08) }
.scout summary { cursor:pointer; display:flex; align-items:center; gap:6px; font:500 11px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:6px }
.scout .sc-row { display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:12.5px } .scout .sc-row span { color:var(--muted) } .scout .sc-row b { text-align:right; font-weight:600 }
.scout .sform { display:flex; gap:3px } .scout .sf { font-style:normal; width:18px; height:18px; display:grid; place-items:center; font:600 10px var(--f-mono); border-radius:4px }
.scout .sf.w { background:rgba(110,231,168,.2); color:#6ee7a8 } .scout .sf.l { background:rgba(255,90,90,.18); color:#ff8a8a }
.scout .sc-tip { margin-top:6px; padding-top:6px; border-top:1px solid rgba(238,243,255,.08); font-size:12.5px; color:var(--text,#eef3ff) }
.circ { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:14px }
.circ .ph { padding:10px 12px; border-radius:8px; background:rgba(238,243,255,.04); border:1px solid rgba(238,243,255,.08); display:flex; flex-direction:column; gap:2px; position:relative }
.circ .ph b { font:400 18px/1 var(--f-cond); text-transform:uppercase } .circ .ph span { font:500 10px var(--f-mono); letter-spacing:.12em; color:var(--muted) } .circ .ph em { font-style:normal; font-size:12px; color:var(--muted) }
.circ .ph.live { border-color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent) } .circ .ph.won { border-color:rgba(255,200,70,.6); background:rgba(255,200,70,.08) } .circ .ph.won em { color:#ffd25a }
.circ .ph.out { opacity:.55 }
.pl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px }
.pl-box { padding:12px 14px; border-radius:10px; background:rgba(238,243,255,.04); border:1px solid rgba(238,243,255,.08) }
.pl-k { font:500 10.5px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:8px }
.duel { display:flex; align-items:center; justify-content:space-around; gap:10px; margin-bottom:6px } .duel div { display:flex; flex-direction:column; align-items:center } .duel span { font-size:12px; color:var(--muted) }
.duel b { font:400 32px/1 var(--f-cond) } .duel i { font-style:normal; color:var(--muted); font:500 11px var(--f-mono) }
.board { display:flex; align-items:baseline; gap:10px; margin-bottom:6px } .board b { font:400 34px/1 var(--f-cond) } .board .lbl { font:500 11px var(--f-mono); letter-spacing:.12em; text-transform:uppercase }
.board em { font-style:normal; font:600 12px var(--f-mono) } .board em.pos { color:#6ee7a8 } .board em.neg { color:#ff8a8a }
.board .l-Excelente, .board .l-Alta { color:#6ee7a8 } .board .l-Estable { color:#ffd25a } .board .l-Baja, .board .l-Crítica { color:#ff8a8a }
.bar.bd-lo i { background:#ff6b6b !important } .bar.bd-mid i { background:#ffc24a !important } .bar.bd-hi i { background:#4fd38a !important }
.leg { display:flex; flex-direction:column; padding:4px 0 } .leg b { font:500 14px var(--f-oswald); letter-spacing:.04em } .leg span { font-size:12px; color:var(--muted) }
.cr-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:14px; align-items:start }
.cr-main { display:flex; flex-direction:column; gap:3px } .cr-main b { font:400 46px/1 var(--f-cond) } .cr-main em { font-style:normal; color:#6ee7a8; font-size:13px } .cr-main .bar { margin:6px 0 2px }
.cr-clip { padding:12px 14px; border-radius:10px; background:linear-gradient(120deg,rgba(255,90,200,.12),rgba(90,120,255,.08)); border:1px solid rgba(255,140,220,.25); display:flex; flex-direction:column; gap:3px }
.cr-clip b { font:400 20px/1.1 var(--f-cond); text-transform:uppercase } .cr-clip span { font-size:12.5px; color:var(--muted) }
.cr-plays { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px }
@media (max-width:720px) { .cr-grid { grid-template-columns:1fr } .circ { grid-template-columns:repeat(2,1fr) } }
.well { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px; border-radius:10px; border:1px solid rgba(238,243,255,.1); background:rgba(238,243,255,.03) }
.well .wl-k { font:500 10.5px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) } .well b { font:400 22px/1 var(--f-cond); text-transform:uppercase }
.well .wl-t { font-size:13px; color:var(--muted); flex:1 1 260px } .well em { font-style:normal; font:500 11px var(--f-mono); color:var(--muted) }
.well.w-fresh { border-color:rgba(110,231,168,.4) } .well.w-fresh b { color:#6ee7a8 }
.well.w-tired { border-color:rgba(255,194,74,.45) } .well.w-tired b { color:#ffc24a }
.well.w-spent, .well.w-tilt { border-color:rgba(255,107,107,.5); background:rgba(255,107,107,.07) } .well.w-spent b, .well.w-tilt b { color:#ff8a8a }

/* primera vez: nombre de la carrera */
.iw-name { margin-top:clamp(18px,3.5vh,34px) }
.iw-name input { width:100%; max-width:620px; font:400 clamp(22px,2.6vw,34px)/1.1 var(--f-cond); text-transform:uppercase; letter-spacing:.02em; padding:14px 18px; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.18); border-radius:4px; color:#fff; outline:none }
.iw-name input:focus { border-color:var(--hot, #ff8a2b); background:rgba(255,255,255,.09) }
.iw-name input::placeholder { color:rgba(255,255,255,.35); text-transform:none; font-family:inherit; font-size:.7em }

/* ventanas de fichajes y LAN */
.mktwin { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:10px 14px; margin:0 0 12px; border-left:3px solid var(--line); background:rgba(255,255,255,.04) }
.mktwin b { font:400 20px/1 var(--f-cond); text-transform:uppercase; letter-spacing:.02em }
.mktwin .mw { font:700 11px/1 var(--f-mono, monospace); text-transform:uppercase; letter-spacing:.12em; padding:4px 7px; border-radius:2px }
.mktwin .mw.open { background:rgba(52,211,153,.16); color:#6ee7b7 } .mktwin:has(.open) { border-left-color:#34d399 }
.mktwin .mw.shut { background:rgba(248,113,113,.14); color:#fca5a5 }
.mkt-lock { margin:10px 0 0; padding:7px 10px; font-size:13px; background:rgba(248,113,113,.08); border-left:2px solid rgba(248,113,113,.6); color:#fecaca }
.ph .ph-lan { display:block; font-style:normal; font:700 10.5px/1.2 var(--f-mono, monospace); letter-spacing:.1em; text-transform:uppercase; color:#c4b5fd; margin:3px 0 }
.ph.lan { box-shadow:inset 0 -2px 0 rgba(167,139,250,.55) }
.lanm { margin:10px 0 0; padding:10px 14px; border-left:3px solid #a78bfa; background:linear-gradient(90deg,rgba(167,139,250,.16),rgba(167,139,250,0)) }
.lanm .km-k { font:700 11px/1 var(--f-mono, monospace); letter-spacing:.12em; text-transform:uppercase; color:#c4b5fd }
.lanm b { display:block; font:400 26px/1.05 var(--f-cond); text-transform:uppercase; margin:4px 0 2px }
.lanm p { margin:0; font-size:13.5px; color:#d8d4f5 }

/* beta pública: etiqueta */
.alphatag.beta b { background:#22c55e !important; color:#05220f !important }

/* regateo */
.neg { margin:10px 0 0; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); padding:0 12px }
.neg > summary { display:flex; align-items:center; gap:10px; padding:9px 0; cursor:pointer; list-style:none; font-weight:700 }
.neg > summary::-webkit-details-marker { display:none }
.neg > summary em { margin-left:auto; font-style:normal; color:#6ee7b7; font-size:12.5px }
.neg-dots { display:inline-flex; gap:4px } .neg-dots i { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15) } .neg-dots i.on { background:var(--hot, #ff8a2b) }
.neg-tgt, .neg-lv { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px }
.neg-tgt button.on { border-color:var(--hot, #ff8a2b); color:#fff; background:rgba(255,138,43,.15) }
.neg-lv button { flex:1 1 120px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left }
.neg-lv button span { font-size:12px; opacity:.75; font-weight:400 }
.neg-last { font-size:13px; margin:4px 0 6px } .neg-last.accept { color:#6ee7b7 } .neg-last.counter { color:#fcd34d } .neg-last.reject { color:#fca5a5 }
.neg.closed { padding:8px 12px }

/* La Mesa: carrera, cruce y keno */
.ms-race, .ms-cross, .ms-keno { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start }
@media (max-width:900px) { .ms-race, .ms-cross, .ms-keno { grid-template-columns:1fr } }
.ms-track { position:relative; grid-column:1 / -1; background:linear-gradient(180deg,#1d2a3f,#162133); border:1px solid rgba(255,255,255,.1); padding:6px 0; overflow:hidden }
.ms-rlane { position:relative; height:52px; border-bottom:1px dashed rgba(255,255,255,.12); display:flex; align-items:center }
.ms-rlane:last-of-type { border-bottom:0 }
.ms-rnum { width:26px; text-align:center; font:700 13px var(--f-mono, monospace); color:rgba(255,255,255,.45) }
.ms-rcar { height:46px; width:auto; will-change:transform; filter:drop-shadow(0 4px 4px rgba(0,0,0,.45)) }
.ms-finish { position:absolute; top:0; bottom:0; right:22px; width:10px; background:repeating-linear-gradient(0deg,#fff 0 8px,#111 8px 16px); opacity:.85 }
.ms-rlast { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 12px; font-size:13px; color:#cbd5e1 }
.ms-rlast span { border-left:3px solid var(--c); padding-left:6px }
.ms-ropts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0 }
.ms-ropt { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); border-top:3px solid var(--c) }
.ms-ropt img { height:34px; width:auto } .ms-ropt b { font-size:13px } .ms-ropt span { font-size:12px; opacity:.75 } .ms-ropt em { font-style:normal; font-size:11.5px; color:#fcd34d }
.ms-ropt.on { background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px var(--c) }
.ms-road { position:relative; background:#2a2f39; border:1px solid rgba(255,255,255,.1); overflow:hidden; --lh:48px }
.ms-cgoal, .ms-cside { height:34px; display:flex; align-items:center; justify-content:center; font:700 12px var(--f-mono, monospace); letter-spacing:.2em; color:#c7d2fe; background:#3b4a35 }
.ms-cside { background:#4b4f58 }
.ms-clane { position:relative; height:var(--lh); border-top:2px dashed rgba(255,255,255,.18); overflow:hidden }
.ms-clane.done { background:rgba(52,211,153,.08) } .ms-clane.next { background:rgba(255,138,43,.08) }
.ms-cm { position:absolute; right:8px; top:50%; transform:translateY(-50%); font:700 12px var(--f-mono, monospace); color:#fde68a; z-index:2; text-shadow:0 1px 2px #000 }
.ms-tcar { position:absolute; top:50%; height:36px; width:auto; left:0; animation:msDrive var(--dur,3s) linear forwards; z-index:1 }
.ms-tcar.l { animation-name:msDriveL }
.ms-tcar.hit { animation:msHit .34s cubic-bezier(.5,0,1,1) forwards; height:34px; z-index:3 }
@keyframes msDrive { from { transform:translate(-70px,-50%) } to { transform:translate(var(--w,560px),-50%) } }
@keyframes msDriveL { from { transform:translate(var(--w,560px),-50%) scaleX(-1) } to { transform:translate(-70px,-50%) scaleX(-1) } }
@keyframes msHit { from { transform:translate(-80px,-50%) } to { transform:translate(var(--to,200px),-50%) } }
.ms-dom { position:absolute; left:50%; bottom:-6px; height:48px; width:auto; z-index:4; transform:translate(-50%, calc(var(--lane,0) * -1 * (var(--lh) + 2px))); transition:transform .35s cubic-bezier(.3,1.4,.5,1); filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)) }
.ms-dom.crash { animation:msCrash .6s ease-out forwards }
@keyframes msCrash { 0% { filter:brightness(2) drop-shadow(0 0 12px #ff6a00) } 100% { opacity:.25; filter:grayscale(1) } }
.ms-kgrid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px }
.ms-kn { aspect-ratio:1; padding:0; font:700 15px var(--f-cond, sans-serif); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); transition:background .15s, transform .15s }
.ms-kn.pk { background:rgba(255,138,43,.25); border-color:#ff8a2b; color:#fff }
.ms-kn.dr { background:rgba(96,165,250,.28); border-color:#60a5fa; transform:scale(1.06) }
.ms-kn.hit { background:#22c55e; border-color:#86efac; color:#05220f; box-shadow:0 0 12px rgba(34,197,94,.7) }
.ms-kpay { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12.5px; margin:8px 0 } .ms-kpay em { font-style:normal; width:100% } .ms-kpay span b { color:#fcd34d }

.ms-race { grid-template-columns:1fr }
.ms-race .ms-ropts { grid-template-columns:repeat(6,minmax(0,1fr)) }
@media (max-width:700px) { .ms-race .ms-ropts { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.ms-rpos { position:absolute; left:34px; top:50%; transform:translateY(-50%); font:700 15px var(--f-cond, sans-serif); color:#fff; background:rgba(0,0,0,.55); padding:2px 7px; z-index:3 }
.ms-rpos.me { background:#ff8a2b; color:#140800 }

/* etiqueta BETA entera en verde */
.alphatag.beta { background:rgba(34,197,94,.16) !important; border-color:rgba(34,197,94,.6) !important; color:#4ade80 !important }
/* botón rojo para cerrar Rocket Life */
.sbtn.quit { background:rgba(239,68,68,.14) !important; border-color:rgba(239,68,68,.55) !important; color:#fca5a5 !important }
.sbtn.quit:hover { background:#dc2626 !important; border-color:#ef4444 !important; color:#fff !important }
.quitscreen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:#070b18; color:#e5e7eb; padding:24px; font-family:var(--f-body, sans-serif) }
.quitscreen img { width:min(320px,70vw) } .quitscreen h1 { font:400 34px/1.1 var(--f-cond, sans-serif); text-transform:uppercase; margin:10px 0 0 } .quitscreen p { color:#94a3b8 }

/* ===== rueda de prensa ===== */
.presscard { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px !important; border-left:3px solid #ffb02e !important }
.presscard .pc-img { width:150px; aspect-ratio:16/9; background:center/cover; flex:none }
.presscard .pc-body { flex:1 1 220px; display:flex; flex-direction:column; gap:3px }
.presscard .pc-k, .pr-inv-k { font:700 11px/1 var(--f-mono, monospace); letter-spacing:.16em; text-transform:uppercase; color:#ffb02e }
.presscard b { font:400 22px/1.1 var(--f-cond, sans-serif); text-transform:uppercase }
.presscard .pc-act { display:flex; gap:8px; flex-wrap:wrap }
#decisions.flashme { animation:prFlashMe 1.5s ease }
@keyframes prFlashMe { 0%,60% { box-shadow:0 0 0 3px #ffb02e } 100% { box-shadow:none } }
.pr-inv { position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:16px; background:rgba(3,5,12,.6); opacity:0; transition:opacity .3s }
.pr-inv.on { opacity:1 }
.pr-inv-bg { position:absolute; inset:0; background:center/cover; filter:blur(6px) brightness(.45); transform:scale(1.06) }
.pr-inv-card { position:relative; max-width:520px; width:100%; padding:26px 26px 20px; background:rgba(10,14,30,.92); border:1px solid rgba(255,176,46,.45); box-shadow:0 30px 80px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:10px; transform:translateY(16px) scale(.97); transition:transform .35s cubic-bezier(.2,1.2,.4,1) }
.pr-inv.on .pr-inv-card { transform:none }
.pr-inv-card .pr-h { margin:0; font:400 clamp(34px,6vw,54px)/1 var(--f-cond, sans-serif); text-transform:uppercase; letter-spacing:.01em }
.pr-inv-card p { margin:0; font-size:15px; color:#dbe2f3 }
.pr-inv-act { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 2px }
body.pr-open { overflow:hidden }
.pr { position:fixed; inset:0; z-index:9100; background:#03050c; opacity:0; transition:opacity .4s; overflow:hidden; font-family:var(--f-body, sans-serif) }
.pr.on { opacity:1 }
.pr-scene, .pr-img, .pr-vig, .pr-flash { position:absolute; inset:0 }
.pr-img { background:center 35%/cover; transform:scale(1.18); transition:transform 14s ease-out, filter 1.2s; filter:brightness(.55) saturate(1.05) }
.pr.on .pr-img { transform:scale(1.04) }
.pr.talk .pr-img { filter:brightness(.8) saturate(1.1) }
.pr-vig { background:linear-gradient(0deg, rgba(3,5,12,.97) 0, rgba(3,5,12,.65) 34%, rgba(3,5,12,0) 62%), radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%) }
.pr-flash { pointer-events:none; opacity:0; background:radial-gradient(circle at var(--fx,50%) var(--fy,70%), rgba(255,255,255,.95), rgba(255,255,255,.25) 12%, transparent 30%) }
.pr-flash.go { animation:prFlash .32s ease-out }
@keyframes prFlash { 0% { opacity:1 } 100% { opacity:0 } }
.pr-title { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%) scale(1.6); text-align:center; opacity:0; transition:transform .55s cubic-bezier(.2,1.4,.4,1), opacity .3s, top .7s ease .1s; pointer-events:none; text-shadow:0 6px 30px rgba(0,0,0,.7) }
.pr-title span { display:block; font:700 clamp(14px,2vw,22px)/1 var(--f-mono, monospace); letter-spacing:.5em; color:#ffb02e; text-transform:uppercase }
.pr-title b { display:block; font:400 clamp(64px,13vw,170px)/.9 var(--f-cond, sans-serif); text-transform:uppercase; color:#fff; letter-spacing:.01em }
.pr.on .pr-title { opacity:1; transform:translate(-50%,-50%) scale(1) }
.pr.talk .pr-title { top:9%; transform:translate(-50%,-50%) scale(.42) }
.pr-x { position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; padding:0; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:16px }
.pr-dock { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(980px, 100%); padding:0 16px 22px; z-index:2 }
.pr-q { background:rgba(8,11,24,.86); border:1px solid rgba(255,255,255,.12); border-top:3px solid #ffb02e; padding:16px 18px; backdrop-filter:blur(6px); animation:prIn .45s cubic-bezier(.2,1.1,.4,1) }
@keyframes prIn { from { transform:translateY(30px); opacity:0 } to { transform:none; opacity:1 } }
.pr-who { display:flex; align-items:center; gap:12px }
.pr-who b { display:block; font-size:16px } .pr-who span { font:700 11px var(--f-mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:#94a3b8 }
.pr-dots { margin-left:auto; display:flex; gap:6px } .pr-dots em { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18) } .pr-dots em.cur { background:#ffb02e } .pr-dots em.ok { background:#22c55e }
.pr-ask { margin:12px 0 12px; min-height:2.6em; font:400 clamp(22px,3vw,32px)/1.15 var(--f-cond, sans-serif); text-transform:none; color:#fff }
.pr-ans { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s }
.pr-ans.on { opacity:1; transform:none }
.pr-ans button { position:relative; text-align:left; display:flex; flex-direction:column; gap:4px; padding:11px 13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16) }
.pr-ans button:hover:not(:disabled) { background:rgba(255,176,46,.14); border-color:#ffb02e }
.pr-ans button b { font-size:14.5px } .pr-ans button span { font-size:12.5px; color:#a8b3cf; font-style:italic }
.pr-ans button em { align-self:flex-start; margin-top:2px; padding:2px 6px; background:rgba(239,68,68,.12); font:700 10px var(--f-mono, monospace); letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:#fca5a5 }
.pr-ans button:disabled:not(.picked) { opacity:.35 } .pr-ans button.picked { border-color:#ffb02e; background:rgba(255,176,46,.18) }
.pr-res { margin-top:12px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.18); animation:prIn .35s ease }
.pr-res p { margin:0 0 6px; font-size:14px } .pr-res.good p { color:#86efac } .pr-res.bad p { color:#fca5a5 }
.pr-chip { display:inline-block; margin:2px 6px 2px 0; padding:3px 8px; font:700 12px var(--f-mono, monospace); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14) }
.pr-chip.pos { color:#86efac; border-color:rgba(34,197,94,.45) } .pr-chip.neg { color:#fca5a5; border-color:rgba(239,68,68,.45) } .pr-chip.att { color:#c4b5fd; border-color:rgba(167,139,250,.45) }
.pr-end .pr-h3 { margin:6px 0 10px; font:400 clamp(28px,4vw,42px)/1 var(--f-cond, sans-serif); text-transform:uppercase }
@media (max-width:600px) { .pr-ask { font-size:21px } .pr-q { padding:12px } .presscard .pc-img { width:100% } }

.pr.talk .pr-title span { font-size:30px; letter-spacing:.35em }

/* ---- imágenes y fondos quietos ----
   Nada de zoom ni movimiento continuo en imágenes y fondos grandes: con Rocket League (y OBS) usando la tarjeta gráfica el navegador
   los dibujaba a saltos y vibraban. Tampoco se mueve nada con el ratón (con un mando conectado llegaban posiciones alternas).
   Se quedan las entradas cortas (una sola vez) y las animaciones de los minijuegos de La Mesa. */
.hero-bg svg, .hero-bg img, .ir-bg svg, .ir-bg img, .ov-art svg, .ov-art img { animation:none !important; transform:scale(1.08) translate(-.75%,-.5%) }
.pr-img, .pr.on .pr-img { transform:scale(1.04) !important; transition:filter 1.2s !important }
.hero-emblem, body[data-frame] .hero-emblem::before, body[data-frame] .hero-emblem::after, body[data-frame] #sideAv .cav,
.sign-burst, .joya-rev .jr-rays, .joya .jy-gem, .grain { animation:none !important }
.overlay:not([hidden])::before { animation:beamsIn 1.2s var(--ease) both !important }
body[data-frame] .hero-emblem::after { opacity:.35; transform:none }      /* sin la animación, heredaba el translateX(-50%) de la etiqueta «Cambiar foto» y se iba a la izquierda */
/* con el juego abierto (body.ingame, lo pone app.js con /api/rl) tampoco hay grano ni estelas: así no le quitan rendimiento */
body.ingame .grain, body.ingame #fx { display:none !important }

/* ---- guía de conexión con Rocket League ---- */
#statsapi .cg-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap }
#statsapi .cg { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px }
#statsapi .cg li { display:flex; gap:12px; align-items:flex-start; opacity:.55 }
#statsapi .cg li.ok, #statsapi .cg li.now { opacity:1 }
#statsapi .cg li i { font-style:normal; width:22px; flex:none; text-align:center; font-weight:800 }
#statsapi .cg-ok { color:#4ade80 } #statsapi .cg-now { color:#ff8a2b } #statsapi .cg-no { color:#7d87a8 }
#statsapi .cg .actions { margin:8px 0 2px }

/* ---- nota en directo: aviso de pantalla completa y «abrir sola» ---- */
.ov-warn { margin:10px 0; padding:10px 12px; border-left:4px solid #f59e0b; background:rgba(245,158,11,.1); font-size:13.5px }
.ov-auto { display:flex; gap:8px; align-items:center; margin:10px 0 4px }