/* Rocket Life · sistema de diseño */
:root {
  --bg:#0a0e1a; --bg2:#0e1424; --card:#121a2e; --card2:#17213a; --ink:#e9edf7; --muted:#8f9bb8; --line:rgba(255,255,255,.08);
  --accent:#7c83ff; --accent2:#22d3ee; --win:#34d399; --loss:#fb7185; --warn:#fbbf24; --shadow:0 10px 30px rgba(0,0,0,.35);
  --grad:linear-gradient(135deg,#6366f1 0%,#22d3ee 100%);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#eef1f8; --bg2:#e7ebf5; --card:#ffffff; --card2:#f4f6fc; --ink:#141a2b; --muted:#5d6985; --line:rgba(20,26,43,.1);
          --accent:#5058e8; --accent2:#0891b2; --win:#059669; --loss:#e11d48; --warn:#b45309; --shadow:0 8px 24px rgba(30,41,80,.10); }
}
* { box-sizing:border-box }
[hidden] { display:none !important }
html { scroll-behavior:smooth }
body { margin:0; color:var(--ink); font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif; -webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 480px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
             radial-gradient(700px 400px at -5% 10%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 70%), var(--bg); background-attachment:fixed; min-height:100vh }
main { max-width:1180px; margin:0 auto; padding:0 18px 56px }
h1,h2,h3 { letter-spacing:-.01em }
a { color:var(--accent) }

/* ---- cabecera y pestañas ---- */
.top { position:sticky; top:0; z-index:20; margin:0 -18px 18px; padding:12px 18px 10px; backdrop-filter:blur(14px) saturate(1.3);
  background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line) }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.brand { display:flex; align-items:center; gap:11px } .brand .mark { width:34px; height:34px; border-radius:11px; background:var(--grad); display:grid; place-items:center; box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); color:#fff; font-weight:900; font-size:14px; letter-spacing:.5px }
.brand b { font-size:18px; letter-spacing:-.02em; display:block; line-height:1.1 } .brand small { color:var(--muted); font-size:11.5px }
.tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.tabs { display:flex; gap:6px; margin-top:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px } .tabs::-webkit-scrollbar { display:none }
.tab { display:flex; align-items:center; gap:8px; padding:8px 15px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--muted); font-weight:600; font-size:14px; white-space:nowrap; cursor:pointer }
.tab:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink) }
.tab.on { background:var(--grad); color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent) }
.tab .n { min-width:19px; height:19px; padding:0 6px; border-radius:99px; background:var(--loss); color:#fff; font-size:11px; display:grid; place-items:center; font-weight:800 }
.tab.on .n { background:#fff; color:var(--accent) }
.panel { display:grid; gap:16px; grid-template-columns:repeat(12,1fr); align-items:start }

/* ---- tarjetas ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; min-width:0; box-shadow:var(--shadow) }
.c12{grid-column:span 12} .c8{grid-column:span 8} .c7{grid-column:span 7} .c6{grid-column:span 6} .c5{grid-column:span 5} .c4{grid-column:span 4} .c3{grid-column:span 3}
@media (max-width:860px){ .c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12} main{padding:0 12px 48px} .top{margin:0 -12px 14px;padding:10px 12px} .card{padding:15px;border-radius:16px} }
h2 { display:flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:0 0 12px; font-weight:700 }
h2 .ico { color:var(--accent) } h2 .sub { text-transform:none; letter-spacing:0 }
.sub { color:var(--muted); font-size:13px } .src { color:var(--muted); font-size:11.5px }
.empty { color:var(--muted); padding:22px 8px; text-align:center; font-size:14px; line-height:1.55 }
.money { font-variant-numeric:tabular-nums; font-weight:800 } .pos { color:var(--win) } .neg { color:var(--loss) }
.scroll { overflow-x:auto }

/* ---- botones, chips ---- */
button { font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; border-radius:11px; border:1px solid var(--line); background:var(--card2); color:var(--ink); padding:7px 14px; transition:transform .06s, border-color .15s, background .15s }
button:hover:not(:disabled) { border-color:color-mix(in srgb, var(--accent) 60%, transparent) } button:active:not(:disabled) { transform:translateY(1px) }
button:disabled { opacity:.45; cursor:not-allowed }
button.primary { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent) }
button.ghost { background:transparent; color:var(--muted) }
select, select.s { font:inherit; font-weight:600; padding:7px 10px; border-radius:11px; border:1px solid var(--line); background:var(--card2); color:var(--ink) }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center }
.chip { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px; font-size:12.5px; border:1px solid var(--line); background:var(--card2); color:var(--muted); font-weight:600 }
.dot { width:8px; height:8px; border-radius:50%; background:var(--muted) } .dot.on { background:var(--win); box-shadow:0 0 0 4px color-mix(in srgb, var(--win) 25%, transparent) } .dot.match { background:var(--accent2); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent2) 30%, transparent) }
.pill { font-size:11.5px; padding:1px 9px; border-radius:99px; border:1px solid var(--line); color:var(--muted); margin-left:6px; white-space:nowrap; font-weight:600 }
.tag { display:inline-block; font-size:11.5px; padding:1px 8px; border-radius:99px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); margin:1px 3px 1px 0; white-space:nowrap; font-weight:600 }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 } .chip2 { font-size:12.5px; padding:3px 10px; border-radius:99px; background:color-mix(in srgb, var(--accent) 14%, transparent); font-weight:600 }
.e { font-size:11.5px; padding:2px 8px; border-radius:99px; background:color-mix(in srgb, var(--muted) 16%, transparent); font-weight:600 } .e.p { color:var(--win) } .e.n { color:var(--loss) } .e.g { color:var(--warn) }
.eff { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px }
.mini { font-size:11.5px; padding:0 8px; margin-left:8px; color:var(--muted); background:transparent }

/* ---- barras ---- */
.bar { height:9px; border-radius:99px; background:color-mix(in srgb, var(--ink) 10%, transparent); overflow:hidden; margin:8px 0 4px }
.bar > i { display:block; height:100%; background:var(--grad); border-radius:99px; transition:width .5s }
.bar > i.ok { background:var(--win) } .bar > i.no { background:var(--loss) } .bar > i.pend { background:var(--grad) }

/* ---- héroe del jugador ---- */
.hero2 { display:flex; gap:22px; align-items:center; flex-wrap:wrap; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--card)), color-mix(in srgb, var(--accent2) 8%, var(--card))); }
.herowho .sub { font-weight:600 } .tier { font-size:38px; font-weight:900; letter-spacing:-.03em; line-height:1.05; margin:2px 0 }
.herowho { flex:1; min-width:230px }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px; width:100% }
.kpi { background:color-mix(in srgb, var(--ink) 5%, transparent); border:1px solid var(--line); border-radius:14px; padding:11px 13px } .kpi b { display:block; font-size:25px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15 } .kpi span { color:var(--muted); font-size:12px; font-weight:600 }
.embw { display:inline-block; flex:none } .embw svg, .crestw svg, .logow svg, .avw svg { width:100%; height:100%; display:block }
.crestw { display:inline-block; flex:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)) } .logow { display:inline-block; flex:none; filter:drop-shadow(0 3px 8px rgba(0,0,0,.3)) } .avw { display:inline-block; flex:none; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px color-mix(in srgb, var(--ink) 14%, transparent) }

/* ---- tablas ---- */
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
th { text-align:left; font-weight:700; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap }
td { padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle } tr:last-child td { border-bottom:0 }
tr.me td { background:color-mix(in srgb, var(--accent) 13%, transparent); font-weight:700 } tr.me td:first-child { border-radius:10px 0 0 10px } tr.me td:last-child { border-radius:0 10px 10px 0 }
td.pos { width:34px } .zone { display:inline-block; width:4px; height:18px; border-radius:2px; vertical-align:middle; margin-right:7px } .zone.up { background:var(--win) } .zone.down { background:var(--loss) } .zone.none { background:transparent }
.cname { display:flex; align-items:center; gap:9px }
.wl { display:inline-block; min-width:28px; text-align:center; padding:2px 7px; border-radius:8px; font-weight:800; font-size:12px; color:#fff } .wl.w { background:var(--win) } .wl.l { background:var(--loss) }
.rate { font-weight:800 } .res { display:inline-block; min-width:44px; text-align:center; font-weight:800 }

/* ---- clubes, ofertas, contrato ---- */
.club { display:flex; align-items:center; gap:13px } .club .name, .name { font-weight:800; font-size:17px }
.offer { border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:12px; background:var(--card2) }
.offer p { margin:9px 0; color:var(--muted); font-size:13.5px }
.terms { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; margin:8px 0 } .terms b { font-variant-numeric:tabular-nums }
.obj { margin:11px 0 } .obj .l { display:flex; justify-content:space-between; gap:10px; font-size:13.5px }
.twocol { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.weeks { display:flex; gap:5px; margin:8px 0 } .wk { width:26px; height:7px; border-radius:4px; background:color-mix(in srgb, var(--ink) 12%, transparent) } .wk.ok { background:var(--win) } .wk.failed { background:var(--loss) } .wk.open { background:var(--accent2) }

/* ---- relaciones, decisiones ---- */
.meter { display:grid; grid-template-columns:42px 1fr; gap:4px 12px; align-items:center; margin:14px 0 } .meter .mi { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent) }
.meter .l { display:flex; justify-content:space-between; font-size:14px; font-weight:700 } .meter .bar { margin:5px 0 2px } .meter .eff2 { font-size:12px; color:var(--muted) }
.decision { border:1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); background:linear-gradient(135deg, color-mix(in srgb, var(--warn) 10%, var(--card)), var(--card)); margin-bottom:16px }
.dhead { display:flex; gap:14px; align-items:center } .decision h3 { margin:0 0 3px; font-size:19px }
.dopts { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:14px }
.dopt { text-align:left; padding:12px; border-radius:14px; border:1px solid var(--line); background:var(--card2); color:var(--ink); display:block; width:100% }
.dopt b { display:block; margin-bottom:3px; font-size:14.5px } .dopt .sub { font-weight:500 }
.outcome { border-left:4px solid var(--accent); margin-bottom:16px } .banner { margin-bottom:16px; border-left:4px solid var(--accent) } .banner.win { border-left-color:var(--win) } .banner.loss { border-left-color:var(--loss) }
.banner h3 { margin:0 0 4px; font-size:19px }
.why { display:grid; gap:5px; margin:8px 0 } .why .r { display:flex; align-items:center; gap:8px; font-size:13px } .why .r span:first-child { width:140px; color:var(--muted) }
.why .b { flex:1; height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 10%, transparent); position:relative } .why .b i { position:absolute; top:0; height:100%; border-radius:3px } .why em { width:46px; text-align:right; font-style:normal; font-variant-numeric:tabular-nums }
.lobby { margin-bottom:16px; border-left:4px solid var(--accent2) } .rev { color:var(--warn); font-weight:800 }
.person { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line) } .person:last-child { border-bottom:0 } .pl { display:flex; align-items:center; gap:10px; min-width:0 }

/* ---- historia y tutorial ---- */
.tutorial { margin-bottom:16px; border:1px solid color-mix(in srgb, var(--accent) 70%, transparent); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)) }
.tutorial h3 { margin:0 0 6px; font-size:23px } .tutorial p { font-size:16px; line-height:1.6; margin:8px 0; max-width:62ch }
.dots { display:flex; gap:6px; margin:12px 0 } .dot2 { width:28px; height:5px; border-radius:3px; background:color-mix(in srgb, var(--ink) 14%, transparent) } .dot2.on { background:var(--grad) }
.chapters { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px } .chap { font-size:11.5px; padding:3px 10px; border-radius:99px; border:1px solid var(--line); color:var(--muted); font-weight:600 }
.chap.on { background:var(--grad); border-color:transparent; color:#fff; font-weight:800 } .chap.past { color:var(--ink) }
.goal { margin:10px 0 } .goal .l { display:flex; justify-content:space-between; font-size:13.5px }
.storyrank { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px }

/* ---- feed ---- */
.post { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line) } .post:last-child { border-bottom:0 }
.bub { flex:1; min-width:0; background:var(--card2); border:1px solid var(--line); border-radius:4px 16px 16px 16px; padding:9px 13px; position:relative }
.post.s-pos .bub { border-left:3px solid var(--win) } .post.s-neg .bub { border-left:3px solid var(--loss) } .post.s-neu .bub { border-left:3px solid var(--line) }
.post .who { font-weight:800 } .post .t { margin:3px 0 5px } .post .meta { color:var(--muted); font-size:12px }

/* ---- noticias ---- */
.newsi { display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line) } .newsi:last-child { border-bottom:0 }
.newsi .ni { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent) }
.newsi b { font-size:14px } .newsi small { color:var(--muted); display:block; font-size:12.5px; line-height:1.4 }
.k-offer .ni, .k-sponsor .ni { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn) } .k-league .ni { background:color-mix(in srgb, var(--win) 17%, transparent); color:var(--win) }
.k-shop .ni { background:color-mix(in srgb, var(--loss) 15%, transparent); color:var(--loss) } .k-story .ni { background:color-mix(in srgb, var(--accent2) 18%, transparent); color:var(--accent2) }

/* ---- tienda ---- */
.shopgrid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); margin:8px 0 18px }
.item { border:1px solid var(--line); border-radius:16px; padding:13px; display:flex; flex-direction:column; gap:7px; background:var(--card2) }
.item .itop { display:flex; gap:11px; align-items:center } .item .itile { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--grad); color:#fff; box-shadow:0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent) }
.item b { font-size:14.5px; display:block } .price { font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; color:var(--warn); font-size:13px }
.item p { margin:0; font-size:13px; color:var(--muted); flex:1 }
.pips { display:flex; gap:4px } .pip { width:16px; height:6px; border-radius:3px; background:color-mix(in srgb, var(--ink) 14%, transparent) } .pip.on { background:var(--grad) }
.invbar { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 } .inv { font-size:12.5px; padding:3px 11px; border-radius:99px; border:1px solid var(--line); background:var(--card2); font-weight:600 }
.blowbox { font-size:13px; color:var(--muted); border-left:3px solid var(--loss); padding:8px 12px; margin:10px 0; background:color-mix(in srgb, var(--loss) 7%, transparent); border-radius:0 12px 12px 0 }
.shophead { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.balance { display:flex; align-items:center; gap:10px; padding:8px 16px; border-radius:14px; background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent) } .balance .money { font-size:22px; color:var(--warn) }

svg.art { display:block } .ico { vertical-align:middle; flex:none }
.wallet { display:flex; gap:12px; flex-wrap:wrap } .wallet .kpi { flex:1; min-width:130px }

/* ---- piezas sueltas ---- */
.row { display:flex; align-items:center; gap:10px; margin:9px 0 } .row label { width:112px; color:var(--muted); font-size:13px; font-weight:600 } .row .bar { flex:1; margin:0 } .row em { width:40px; text-align:right; font-style:normal; font-variant-numeric:tabular-nums; font-size:13px }
svg:not(.art):not(.ico) text { fill:var(--muted); font-size:11px }
.itop { display:flex; gap:11px; align-items:center }

/* ---- escenas de la historia ---- */
.scenew { border-radius:16px; overflow:hidden; line-height:0; box-shadow:0 8px 22px rgba(0,0,0,.35); border:1px solid var(--line) } .scenew svg { width:100%; height:auto; display:block }

.tutgrid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:22px; align-items:center }
@media (max-width:860px){ .tutgrid { grid-template-columns:1fr; gap:14px } }
.chapterbox { margin-bottom:16px; border:1px solid color-mix(in srgb, var(--warn) 70%, transparent); background:linear-gradient(135deg, color-mix(in srgb, var(--warn) 14%, var(--card)), var(--card)) }
.chapterbox h3 { margin:2px 0 6px; font-size:24px } .chapterbox p { font-size:15.5px; line-height:1.6; margin:6px 0; max-width:60ch }
.storyhead { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:20px; align-items:center; margin-bottom:12px }
@media (max-width:860px){ .storyhead { grid-template-columns:1fr; gap:12px } }
.storyhead h3 { margin:4px 0 4px; font-size:24px; letter-spacing:-.02em } .storyhead p { margin:0; color:var(--muted); font-size:14.5px; line-height:1.55 }
.chapbadge { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:99px; background:var(--grad); color:#fff }

/* ---- cuestionario de origen ---- */
.qblock { margin:18px 0 6px } .qt { font-weight:700; font-size:15.5px; display:flex; gap:10px; align-items:center; margin-bottom:9px }
.qn { width:24px; height:24px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:12.5px; font-weight:800; flex:none }
.opts { display:flex; flex-wrap:wrap; gap:8px } .opt { padding:8px 14px; border-radius:99px; background:var(--card2); font-weight:600; font-size:13.5px }
.opt.sel { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent) }
.bonus { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px } .bonus:last-child { border-bottom:0 } .bonus b { color:var(--win); text-align:right }
.tab.lock { opacity:.38; cursor:not-allowed }

/* ---- sesiones ---- */
details.sx-w, details.sx-d, details.sx-s, details.sx-ov { border:1px solid var(--line); border-radius:14px; background:var(--card2); margin:10px 0; overflow:hidden }
details.sx-d, details.sx-s { background:color-mix(in srgb, var(--ink) 3%, var(--card2)); margin:8px 0 } details.sx-ov { background:transparent; margin:10px 0 6px }
details > summary { list-style:none; cursor:pointer; padding:11px 14px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center }
details > summary::-webkit-details-marker { display:none }
details.sx-w > summary::before, details.sx-d > summary::before, details.sx-s > summary::before, details.sx-ov > summary::before, details.sx-m > summary::before { content:'▸'; color:var(--accent); transition:transform .15s; font-size:13px }
details[open] > summary::before { transform:rotate(90deg) } details.sx-ov > summary { font-weight:700; font-size:13.5px }
details.sx-d, details.sx-s, details.sx-ov, details.sx-w > .sx-stats, .sx-ml { margin-left:0 }
details.sx-w > *:not(summary), details.sx-d > *:not(summary), details.sx-s > *:not(summary), details.sx-ov > *:not(summary) { margin-left:14px; margin-right:14px }
details.sx-w > *:last-child, details.sx-d > *:last-child, details.sx-s > *:last-child { margin-bottom:12px }
.sxc { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto }
.sxk { font-size:12.5px; padding:2px 10px; border-radius:99px; background:color-mix(in srgb, var(--ink) 8%, transparent); font-weight:600; white-space:nowrap }
.sxk.up { color:var(--win) } .sxk.dn { color:var(--loss) } .sxk.fr { color:var(--warn) }
.sx-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:8px; margin:6px 14px 10px }
.sx-stats > div { background:color-mix(in srgb, var(--ink) 5%, transparent); border-radius:12px; padding:8px 11px } .sx-stats b { display:block; font-size:20px; font-variant-numeric:tabular-nums } .sx-stats span { color:var(--muted); font-size:11.5px; font-weight:600 }
.sx-ml { margin:4px 8px 8px }
details.sx-m { border-top:1px solid var(--line) } details.sx-m > summary { padding:8px 6px; gap:10px; flex-wrap:nowrap; font-size:13.5px }
details.sx-m .t { color:var(--muted); width:44px; font-variant-numeric:tabular-nums } details.sx-m .md { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
details.sx-m .sc { font-weight:700; width:44px; text-align:center } details.sx-m .st { color:var(--muted); width:120px; font-variant-numeric:tabular-nums; white-space:nowrap } details.sx-m .nt { width:38px; text-align:right } details.sx-m .mm { width:58px; text-align:right; font-weight:700 }
details.sx-m .mm.up { color:var(--win) } details.sx-m .mm.dn { color:var(--loss) } details.sx-m > .sx-lobby, details.sx-m > .sub { margin-left:50px; margin-right:6px }
@media (max-width:860px){ details.sx-m .st { display:none } details.sx-m > .sx-lobby, details.sx-m > .sub { margin-left:6px } .sxc { margin-left:0 } }
.sx-lobby { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px } @media (max-width:760px){ .sx-lobby { grid-template-columns:1fr } }
.sx-team { border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:var(--card) } .sx-th { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px }
.sx-team.mine .sx-th { color:var(--accent) } .sx-team td, .sx-team th { padding:5px 6px } .sx-team td:not(:first-child), .sx-team th:not(:first-child) { text-align:center; width:30px }
.mmrgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px } .mmrbox { border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--card2); display:flex; flex-direction:column; gap:3px }
.mmrbox b { font-size:30px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1 } .mmrin { display:flex; gap:6px; margin-top:8px } .mmrin input { flex:1; min-width:0; font:inherit; padding:6px 9px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink) }

/* =====================================================================================
   CAPA «VIDEOJUEGO»: tipografía de marcador, héroe con escena, tarjetas de fichaje,
   resultado de partida, pantallas de subida de nivel y movimiento
   ===================================================================================== */
:root { --fd:"Bahnschrift","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif; --glow:0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent), 0 14px 44px color-mix(in srgb,var(--accent) 20%,transparent); }
h1,h2,h3,.tier,.kpi b,.tab,.brand b,.name,.price,.mt b,.mres-word,.mres-score,.ov-title,.sx-stats b,.mmrbox b,.eyebrow,.chapline { font-family:var(--fd) }
.btnlink { font-weight:600; font-size:13px; padding:6px 12px; border-radius:11px; border:1px solid var(--line); color:var(--muted); text-decoration:none } .btnlink:hover { color:var(--ink); border-color:color-mix(in srgb,var(--accent) 60%,transparent) }
button.big { font-size:16px; padding:11px 26px; border-radius:13px; font-family:var(--fd); letter-spacing:.04em; text-transform:uppercase }

/* fondo: rejilla de pista + resplandor; si hay imagen de arena (ui/bg-arena) se mezcla debajo */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(transparent calc(100% - 1px), color-mix(in srgb,var(--ink) 5%,transparent) 0) 0 0/100% 48px, linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb,var(--ink) 4%,transparent) 0) 0 0/48px 100%;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0, #000 0, transparent 80%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0, #000 0, transparent 80%) }
body.hasbg::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background:var(--bgimg) center/cover no-repeat; opacity:.32 }

/* cabecera */
.brand .mark { overflow:hidden; letter-spacing:-.5px } .brand .mark img { width:100%; height:100%; object-fit:contain }
.brand b { text-transform:uppercase; letter-spacing:.08em; font-size:17px }
.tabs { gap:3px }
.tab { border-radius:0; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; padding:9px 20px; background:color-mix(in srgb,var(--ink) 5%,transparent); clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%) }
.tab:hover { background:color-mix(in srgb,var(--accent) 16%,transparent) } .tab.on { background:var(--grad); box-shadow:none }

/* tarjetas y títulos de sección */
.card { position:relative; border-radius:14px; background:linear-gradient(180deg,color-mix(in srgb,var(--card) 94%,#fff),var(--card)) }
.card::before { content:""; position:absolute; left:16px; right:16px; top:-1px; height:2px; border-radius:2px; background:var(--grad); opacity:.5 }
h2 { font-size:12.5px; letter-spacing:.13em } h2::before { content:""; width:4px; height:15px; border-radius:2px; background:var(--grad); flex:none }

/* movimiento */
@keyframes panelIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes cardIn { from { opacity:0; transform:translateY(14px) scale(.985) } to { opacity:1; transform:none } }
.panel:not([hidden]) > .card, .panel:not([hidden]) > .hero { animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both }
.panel > :nth-child(2) { animation-delay:.05s !important } .panel > :nth-child(3) { animation-delay:.1s !important } .panel > :nth-child(4) { animation-delay:.15s !important } .panel > :nth-child(5) { animation-delay:.2s !important } .panel > :nth-child(n+6) { animation-delay:.25s !important }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important } }
button, .dopt, .offer, .item, .slot { transition:transform .15s, border-color .15s, background .15s, box-shadow .15s }
.dopt:hover:not(:disabled), .offer:hover, .item:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.28) } .dopt:hover:not(:disabled) { border-color:var(--accent) }
.hasimg img { width:100%; height:100%; object-fit:contain; display:block } .avw.hasimg, .avw.hasimg img { border-radius:50% } .avw.hasimg img { object-fit:cover }
.scenew.hasimg img { width:100%; height:auto; display:block; object-fit:cover }

/* ---- héroe de Inicio ---- */
.hero { position:relative; overflow:hidden; border-radius:20px; min-height:360px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; color:#f4f7ff;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:var(--glow), var(--shadow) }
.hero-bg { position:absolute; inset:0; z-index:-2; background:#0a1024 } .hero-bg svg, .hero-bg img { width:100%; height:100%; object-fit:cover; display:block; transform-origin:70% 60%; animation:drift 40s ease-in-out infinite alternate }
@keyframes drift { from { transform:scale(1.04) } to { transform:scale(1.14) translate(-1.5%,-1%) } }
.hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,9,22,.94) 0,rgba(5,9,22,.72) 40%,rgba(5,9,22,.12) 78%), linear-gradient(0deg,rgba(5,9,22,.92) 0,rgba(5,9,22,0) 55%) }
.hero-main { display:flex; gap:28px; align-items:center; flex-wrap:wrap; padding:34px 32px 18px }
.hero-emblem { flex:none; filter:drop-shadow(0 0 24px color-mix(in srgb,var(--accent2) 55%,transparent)); animation:floaty 5s ease-in-out infinite } @keyframes floaty { 50% { transform:translateY(-6px) } }
.hero .herowho { flex:1; min-width:240px } .hero .eyebrow { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#9fb0d6; font-weight:700 }
.hero .tier { font-size:clamp(46px,7.4vw,84px); line-height:.95; letter-spacing:.01em; text-transform:uppercase; font-style:italic; font-weight:800; margin:2px 0 4px; text-shadow:0 4px 30px rgba(0,0,0,.55) }
.hero .chapline { font-size:15px; letter-spacing:.06em; color:#7dd3fc; text-transform:uppercase; font-weight:600; margin-bottom:8px }
.hero .sub { color:#b9c4e3 } .bar.tall { height:14px; background:rgba(255,255,255,.16); max-width:520px; margin:10px 0 6px; box-shadow:inset 0 1px 3px rgba(0,0,0,.4) }
.hero .bar.tall > i { background:linear-gradient(90deg,#6366f1,#22d3ee); box-shadow:0 0 16px rgba(34,211,238,.6); position:relative; overflow:hidden }
.hero .bar.tall > i::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-100%); animation:shine 3.2s ease-in-out infinite } @keyframes shine { to { transform:translateX(100%) } }
.herogear { display:flex; flex-direction:column; gap:8px; min-width:230px }
.gear { display:flex; align-items:center; gap:11px; padding:9px 14px; border-radius:12px; background:rgba(8,13,30,.62); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(8px) } .gear b { display:block; font-family:var(--fd); font-size:15px; line-height:1.2 } .gear span:not(.gi) { font-size:12px; color:#a9b6d8 }
.gear .gi { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(125,131,255,.22); color:#c7d2fe; flex:none }
.hero .kpis { padding:6px 32px 28px; width:auto; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)) }
.hero .kpi { background:rgba(8,13,30,.6); border-color:rgba(255,255,255,.13); backdrop-filter:blur(8px); border-radius:12px; border-bottom:3px solid var(--accent2) } .hero .kpi b { font-size:30px; font-weight:800 } .hero .kpi span { color:#a9b6d8 }
@media (max-width:760px){ .hero-main { padding:22px 18px 10px } .hero .kpis { padding:6px 18px 20px } .herogear { width:100% } }
.storyhead.one { grid-template-columns:1fr }

/* ---- tarjetas de oferta / contrato / patrocinio ---- */
.obanner { display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:12px; position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(115deg,color-mix(in srgb,var(--c) 78%,#000) 0,color-mix(in srgb,var(--c) 40%,#0b1226) 100%); border:1px solid color-mix(in srgb,var(--c) 55%,transparent) }
.obanner::after { content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px; border-radius:50%; background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent) }
.obanner .name { color:#fff; font-size:19px; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,.4) } .obanner .sub { color:rgba(255,255,255,.78) } .obanner .pill { color:#fff; border-color:rgba(255,255,255,.4); margin-left:0; margin-right:6px; background:rgba(0,0,0,.18) }
.otitle { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; position:relative; z-index:1 }
.ocoach { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.8); position:relative; z-index:1 }
.offer .obanner { margin:-14px -14px 10px; border-radius:15px 15px 0 0 }
.terms { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; margin:10px 0 }
.terms span { background:color-mix(in srgb,var(--ink) 6%,transparent); border:1px solid var(--line); border-radius:10px; padding:7px 11px; font-size:12px; color:var(--muted); font-weight:600 }
.terms b { display:block; font-family:var(--fd); font-size:20px; color:var(--ink); line-height:1.2 }
.offer { border-radius:15px; overflow:hidden }
.offer .actions .primary { font-family:var(--fd); letter-spacing:.05em; text-transform:uppercase }

/* ---- decisión: diálogo con retrato ---- */
.decision { border-left:5px solid var(--warn) }
.decision .dhead { align-items:flex-start } .decision h3 { font-size:23px; letter-spacing:.01em } .decision .dhead .avw { box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 70%,transparent) }
.dopt { padding:14px } .dopt b { font-family:var(--fd); font-size:16px; letter-spacing:.01em }

/* ---- resultado de partida ---- */
.mres { border-left:0; padding:0; overflow:hidden; border:1px solid var(--line); animation:resIn .6s cubic-bezier(.2,.9,.2,1) both; margin-bottom:18px }
@keyframes resIn { from { opacity:0; transform:translateY(-18px) scale(.97) } to { opacity:1; transform:none } }
.mres.win { background:linear-gradient(100deg,color-mix(in srgb,var(--win) 28%,var(--card)) 0,var(--card) 70%); border-color:color-mix(in srgb,var(--win) 55%,transparent) }
.mres.loss { background:linear-gradient(100deg,color-mix(in srgb,var(--loss) 26%,var(--card)) 0,var(--card) 70%); border-color:color-mix(in srgb,var(--loss) 50%,transparent) }
.mres::before { display:none }
.mres-top { display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding:20px 24px 10px }
.mres-word { font-size:clamp(38px,6vw,64px); font-style:italic; text-transform:uppercase; font-weight:900; line-height:.95; letter-spacing:.01em; margin:0 } .mres.win .mres-word { color:var(--win) } .mres.loss .mres-word { color:var(--loss) }
.mres-mode { margin-top:6px; font-weight:600; color:var(--muted) }
.mres-score { display:flex; align-items:baseline; gap:8px; font-size:54px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1 } .mres-score i { color:var(--muted); font-style:normal; font-size:36px }
.mres-rate { --p:50; --c:var(--warn); width:92px; height:92px; border-radius:50%; flex:none; display:grid; place-items:center; background:conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb,var(--ink) 12%,transparent) 0) }
.mres-rate > div { width:74px; height:74px; border-radius:50%; background:var(--card); display:grid; place-content:center; text-align:center } .mres-rate b { font-family:var(--fd); font-size:27px; line-height:1; color:var(--c) } .mres-rate span { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted) }
.mres-side { margin-left:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-end }
.mres-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px; padding:8px 24px 16px }
.mt { background:color-mix(in srgb,var(--ink) 6%,transparent); border:1px solid var(--line); border-radius:12px; padding:9px 13px } .mt b { display:block; font-size:28px; line-height:1.1; font-variant-numeric:tabular-nums } .mt span { font-size:11.5px; color:var(--muted); font-weight:600 }
.mt.rew { border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 9%,transparent) } .mt.rew b { color:var(--warn) }
.mres-more { margin:0 24px 18px; border-top:1px solid var(--line); padding-top:8px } .mres-more summary { cursor:pointer; color:var(--muted); font-weight:600; font-size:13px; padding:4px 0 }
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5 }
.confetti i { position:absolute; top:-12px; width:8px; height:13px; border-radius:2px; opacity:0; animation:fall 2.4s ease-in forwards }
@keyframes fall { 0% { opacity:1; transform:translate(0,0) rotate(0) } 100% { opacity:.9; transform:translate(var(--x),520px) rotate(var(--r)) } }

/* ---- pantalla a todo color: capítulo nuevo / subida de nivel ---- */
.overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:radial-gradient(ellipse at 50% 40%,rgba(30,40,90,.82),rgba(3,6,16,.94)); backdrop-filter:blur(8px); animation:fadeIn .35s ease both }
@keyframes fadeIn { from { opacity:0 } } @keyframes popIn { from { opacity:0; transform:translateY(28px) scale(.92) } to { opacity:1; transform:none } }
.ov-card { max-height:94vh; overflow-y:auto; width:min(760px,100%); border-radius:22px; overflow:hidden; background:var(--card); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 80px color-mix(in srgb,var(--accent) 28%,transparent); animation:popIn .55s cubic-bezier(.2,.9,.25,1.1) both; position:relative }
.ov-art { position:relative; height:250px; background:#0a1024; overflow:hidden } .ov-art svg, .ov-art img { width:100%; height:100%; object-fit:cover; display:block; animation:drift 30s ease-in-out infinite alternate }
.ov-fade { position:absolute; inset:0; background:linear-gradient(0deg,var(--card) 0,transparent 60%) }
.ov-badge { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); filter:drop-shadow(0 0 30px rgba(34,211,238,.7)); animation:badgePop .8s .25s cubic-bezier(.2,1.4,.3,1) both } @keyframes badgePop { from { opacity:0; transform:translateX(-50%) scale(.2) rotate(-40deg) } }
.ov-body { padding:6px 30px 28px; text-align:center } .ov-kicker { color:var(--accent2); text-transform:uppercase; letter-spacing:.2em; font-size:12.5px; font-weight:800; margin-top:10px }
.ov-title { margin:4px 0 8px; font-size:clamp(30px,5vw,46px); text-transform:uppercase; font-style:italic; letter-spacing:.01em; display:block } .ov-title::before { display:none }
.ov-body p { font-size:16.5px; line-height:1.6; max-width:52ch; margin:8px auto 14px } .ov-body .actions { justify-content:center; margin-top:16px }
.overlay .confetti { z-index:1 }

.ov-title { color:var(--ink) }

/* =====================================================================================
   PULIDO VISUAL 2: foco de luz, avisos, animaciones de datos, tienda, liga, sesiones, fichajes
   ===================================================================================== */
body.loading main { opacity:0; transform:translateY(8px) } main { transition:opacity .5s ease, transform .5s ease }
::-webkit-scrollbar { width:10px; height:10px } ::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--ink) 18%,transparent); border-radius:99px; border:2px solid transparent; background-clip:content-box } ::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb,var(--accent) 60%,transparent); background-clip:content-box; border:2px solid transparent }
::selection { background:color-mix(in srgb,var(--accent) 45%,transparent) }

.offer, .item { position:relative }

/* botones */
button.primary { position:relative; overflow:hidden }
button.primary::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%); transform:translateX(-120%); transition:transform .6s }
button.primary:hover:not(:disabled)::after { transform:translateX(120%) }
button.primary:hover:not(:disabled) { box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 50%,transparent); transform:translateY(-1px) }

/* estado en directo */
.dot.on { animation:pulse 2.4s ease-out infinite } .dot.match { animation:pulse 1s ease-out infinite }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,currentColor 0,transparent), 0 0 0 0 var(--win) } 70% { box-shadow:0 0 0 7px transparent, 0 0 0 0 transparent } 100% { box-shadow:0 0 0 0 transparent } }
.dot.match { --win:var(--accent2) }

/* avisos flotantes */
#toasts { position:fixed; right:18px; bottom:18px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none }
.toast2 { max-width:min(420px,90vw); padding:12px 18px; border-radius:13px; font-weight:600; font-size:14px; background:var(--card2); border:1px solid var(--line); border-left:4px solid var(--loss); box-shadow:var(--shadow); animation:toastIn .35s cubic-bezier(.2,1.2,.3,1) both }
.toast2.ok { border-left-color:var(--win) } .toast2.out { animation:toastOut .4s ease both }
@keyframes toastIn { from { opacity:0; transform:translateX(40px) } } @keyframes toastOut { to { opacity:0; transform:translateX(40px) } }

/* gráfica: el trazo se dibuja y el área aparece */
.cline { stroke-dasharray:1; stroke-dashoffset:1; animation:drawLine 1.4s .15s ease-out forwards } @keyframes drawLine { to { stroke-dashoffset:0 } }
.carea { opacity:0; animation:fadeIn .8s .9s ease forwards }
svg circle.pt { transition:r .15s } svg circle.pt:hover { r:6 }

/* listas con entrada escalonada (solo se repiten cuando el contenido cambia) */
@keyframes slideIn { from { opacity:0; transform:translateX(-14px) } to { opacity:1; transform:none } }
.post { animation:slideIn .4s both } .post:nth-child(2) { animation-delay:.05s } .post:nth-child(3) { animation-delay:.1s } .post:nth-child(4) { animation-delay:.15s } .post:nth-child(n+5) { animation-delay:.2s }
.newsi { animation:slideIn .4s both } .newsi:nth-child(2) { animation-delay:.05s } .newsi:nth-child(3) { animation-delay:.1s } .newsi:nth-child(n+4) { animation-delay:.15s }
.offer, .item { animation:cardIn .45s both } .item:nth-child(2) { animation-delay:.04s } .item:nth-child(3) { animation-delay:.08s } .item:nth-child(4) { animation-delay:.12s } .item:nth-child(n+5) { animation-delay:.16s }
.post:hover .bub { transform:translateX(3px) } .bub { transition:transform .2s }
.post.s-pos .bub { background:linear-gradient(90deg,color-mix(in srgb,var(--win) 10%,var(--card2)),var(--card2) 60%) } .post.s-neg .bub { background:linear-gradient(90deg,color-mix(in srgb,var(--loss) 10%,var(--card2)),var(--card2) 60%) }
.newsi { position:relative } .newsi .ni { box-shadow:0 0 0 4px var(--card) }

/* tablas: filas con vida */
tbody tr, table tr { transition:background .15s } table tr:hover td:not(th) { background:color-mix(in srgb,var(--accent) 7%,transparent) } tr.me:hover td { background:color-mix(in srgb,var(--accent) 20%,transparent) }
tr.me td { box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent) 30%,transparent) } td b { font-family:var(--fd); font-size:15px }
.zone { box-shadow:0 0 8px currentColor } .zone.up { color:var(--win) } .zone.down { color:var(--loss) }
.wl { font-family:var(--fd); letter-spacing:.04em; box-shadow:0 3px 10px color-mix(in srgb,currentColor 0,transparent) } .wl.w { box-shadow:0 3px 12px color-mix(in srgb,var(--win) 40%,transparent) } .wl.l { box-shadow:0 3px 12px color-mix(in srgb,var(--loss) 40%,transparent) }

/* barras con textura */
.bar > i { background-image:linear-gradient(90deg,transparent 0 calc(100% - 3px),rgba(255,255,255,.35) 0), var(--grad); background-size:100% 100%, 100% 100% } .bar > i.ok { background-image:linear-gradient(90deg,transparent 0 calc(100% - 3px),rgba(255,255,255,.35) 0), linear-gradient(90deg,#10b981,#34d399) }
.meter .mi { box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent) inset }

/* tienda */
.item { border-top:3px solid var(--c,var(--accent)); background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--accent)) 8%,var(--card2)),var(--card2) 45%) }
.item .itile { background:linear-gradient(135deg,var(--c,var(--accent)),color-mix(in srgb,var(--c,var(--accent)) 45%,#000)); box-shadow:0 6px 16px color-mix(in srgb,var(--c,var(--accent)) 40%,transparent) }
.item:hover .itile { transform:rotate(-6deg) scale(1.08) } .itile { transition:transform .2s }
.price { background:color-mix(in srgb,var(--warn) 14%,transparent); padding:2px 9px; border-radius:99px; border:1px solid color-mix(in srgb,var(--warn) 35%,transparent) }
.balance { box-shadow:0 0 24px color-mix(in srgb,var(--warn) 18%,transparent) } .balance .money { font-family:var(--fd); text-shadow:0 0 18px color-mix(in srgb,var(--warn) 50%,transparent) }
#shop h2 { margin-top:22px !important }

/* sesiones: franja de color y puntos de victoria/derrota */
details.sx-w, details.sx-d, details.sx-s { border-left:4px solid var(--line) } details.wr-hi { border-left-color:var(--win) } details.wr-mid { border-left-color:var(--warn) } details.wr-lo { border-left-color:var(--loss) }
.mdots { display:inline-flex; gap:3px; align-items:center } .mdots i { width:9px; height:9px; border-radius:3px; background:var(--muted); animation:cardIn .3s both } .mdots i.w { background:var(--win); box-shadow:0 0 6px color-mix(in srgb,var(--win) 60%,transparent) } .mdots i.l { background:var(--loss) }
details > summary:hover { background:color-mix(in srgb,var(--accent) 6%,transparent) }
.mmrbox { position:relative; overflow:hidden } .mmrbox b { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }

/* origen: opciones como botones grandes */
.opt { padding:10px 18px; border-radius:12px; border:1px solid var(--line); transition:transform .15s, background .15s, border-color .15s } .opt:hover { transform:translateY(-2px); border-color:var(--accent) }
.opt.sel::before { content:"✓ "; font-weight:900 } .opt.sel { animation:pop .25s ease } @keyframes pop { 50% { transform:scale(1.07) } }
.qblock { padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--ink) 3%,transparent); animation:cardIn .4s both }
.chap.on { animation:glowPulse 2.4s ease-in-out infinite } @keyframes glowPulse { 50% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent) } }
.dot2.on { box-shadow:0 0 8px color-mix(in srgb,var(--accent2) 60%,transparent) }

/* pantalla de fichaje */
.sign-art { position:relative; height:100%; display:grid; place-items:center; background:linear-gradient(120deg,color-mix(in srgb,var(--c) 80%,#000),color-mix(in srgb,var(--c) 35%,#08101f)) }
.sign-burst { position:absolute; inset:-50%; background:repeating-conic-gradient(rgba(255,255,255,.1) 0 7deg, transparent 7deg 18deg); animation:spin 40s linear infinite; mask-image:radial-gradient(circle,#000 0,transparent 55%); -webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%) } @keyframes spin { to { transform:rotate(360deg) } }
.sign-crest { position:relative; z-index:1; animation:badgePop2 .8s .2s cubic-bezier(.2,1.4,.3,1) both; filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)) } @keyframes badgePop2 { from { opacity:0; transform:scale(.3) rotate(-30deg) } }
.sign-coach { position:absolute; right:26px; bottom:18px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:#fff; animation:slideUp .6s .6s both } @keyframes slideUp { from { opacity:0; transform:translateY(20px) } }
.ov-body .terms { max-width:480px; margin:14px auto 4px }

/* adaptación a pantallas pequeñas */
@media (max-width:760px) { .mres-top { gap:14px } .mres-side { margin-left:0; align-items:flex-start } .ov-art { height:200px } .tab { padding:8px 14px } }

/* ---- correcciones: escenas con proporción fija, sin animaciones que se repitan al repintar ---- */
.scenew { aspect-ratio:2.36 / 1; background:#0a1024 } .scenew > img, .scenew > svg { width:100%; height:100%; object-fit:cover; display:block }
.tutgrid, .storyhead { align-items:start }
.post { animation:none } .post.in { animation:slideIn .4s both }
.newsi, .offer, .item, .qblock, .mdots i { animation:none !important }

.warnbox { border-left:4px solid var(--warn) !important; background:linear-gradient(100deg,color-mix(in srgb,var(--warn) 16%,var(--card)),var(--card) 70%) }
code { font-family:Consolas,monospace; font-size:.92em; background:color-mix(in srgb,var(--ink) 9%,transparent); padding:1px 6px; border-radius:6px }

.playbtn { background:linear-gradient(135deg,#16a34a,#22d3ee); border-color:transparent; color:#fff; font-family:var(--fd); letter-spacing:.05em; text-transform:uppercase; font-size:12.5px; box-shadow:0 6px 18px rgba(34,211,238,.28) }
.playbtn:hover:not(:disabled) { box-shadow:0 8px 24px rgba(34,211,238,.5); transform:translateY(-1px) }

/* ---- torneos ---- */
.tour { display:grid; grid-template-columns:96px 1fr auto; gap:12px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:var(--card2); margin-bottom:9px }
.tour.live { border-color:color-mix(in srgb,var(--win) 60%,transparent); background:linear-gradient(100deg,color-mix(in srgb,var(--win) 12%,var(--card2)),var(--card2) 60%) }
.tour .tw b { font-family:var(--fd); font-size:15px; display:block } .tour .tn b { font-family:var(--fd); font-size:15.5px }
.livechip { display:inline-block; margin-top:3px; font-size:10.5px; font-weight:800; letter-spacing:.08em; padding:1px 8px; border-radius:99px; background:var(--win); color:#052e1c }
.tmhead { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap }
.tsteps { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.tstep { display:flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:99px; border:1px solid var(--line); background:var(--card2); color:var(--muted); font-weight:700; font-size:13px }
.tstep i { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; background:color-mix(in srgb,var(--ink) 10%,transparent) }
.tstep.won { color:var(--win); border-color:color-mix(in srgb,var(--win) 50%,transparent) } .tstep.won i { background:var(--win); color:#052e1c }
.tstep.lost { color:var(--loss); border-color:color-mix(in srgb,var(--loss) 50%,transparent) } .tstep.lost i { background:var(--loss); color:#fff }
.tstep.next { color:var(--ink); border-color:var(--accent); animation:glowPulse 2.4s ease-in-out infinite } .tstep.next i { background:var(--grad); color:#fff }
.throw { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line) } .throw:last-child { border-bottom:0 }
.tinfo { margin:0; padding-left:18px; font-size:13.5px; line-height:1.55; color:var(--muted) } .tinfo li { margin:7px 0 } .tinfo b { color:var(--ink) }
@media (max-width:760px) { .tour { grid-template-columns:1fr; } }

#tcircuit .tour { grid-template-columns:1fr; gap:6px } #tcircuit .tour .ta { justify-self:start }

/* ---- modo carrera desactivado: solo sesiones y estadisticas ---- */
body.nocareer .tab[data-tab="origen"], body.nocareer .tab[data-tab="carrera"], body.nocareer .tab[data-tab="mercado"], body.nocareer .tab[data-tab="torneos"],
body.nocareer .tab[data-tab="social"], body.nocareer .tab[data-tab="tienda"] { display:none }
body.nocareer #storycard, body.nocareer #chalcard, body.nocareer #decisions, body.nocareer #outcome, body.nocareer #chapterbox, body.nocareer #tutorial, body.nocareer #newcareerbox,
body.nocareer .hero-emblem, body.nocareer .herogear, body.nocareer .chapline, body.nocareer .bar.tall, body.nocareer #repsub, body.nocareer .mt.rew { display:none !important }
body.nocareer .hero { min-height:230px } body.nocareer .hero .tier { font-size:clamp(36px,6vw,64px) }
.modehead { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap }
button.danger:hover:not(:disabled) { border-color:var(--loss); color:var(--loss) }
.extras { margin-top:10px } .extras .exg { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:6px }
.extras .exg div { background:color-mix(in srgb,var(--ink) 6%,transparent); border-radius:10px; padding:7px 10px } .extras .exg b { display:block; font-size:18px; font-variant-numeric:tabular-nums } .extras .exg span { font-size:12px; color:var(--muted) }
.timenote { margin:8px 0 2px; font-size:13px; color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent); border-left:3px solid var(--warn); padding:7px 12px; border-radius:0 10px 10px 0 }
details.sx-m > details.sx-why { margin:4px 6px 10px 50px; border-top:0; padding-top:0 } details.sx-why > summary { font-size:12.5px; padding:6px 0 }
@media (max-width:860px) { details.sx-m > details.sx-why { margin-left:6px } }

/* ---- avisos y copias ---- */
.toolgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px }
.toolbtns { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
@media (max-width:860px) { .toolgrid { grid-template-columns:1fr } }

/* ---- fin de temporada y vitrina ---- */
.rc-title { text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; font-weight:800; color:var(--accent2); margin:16px 0 8px }
.rc-aw { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; text-align:left }
.aw { display:flex; align-items:center; gap:10px; padding:8px 13px 8px 9px; border-radius:13px; border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 10%,transparent) }
.aw.honor { border-color:color-mix(in srgb,var(--win) 50%,transparent); background:color-mix(in srgb,var(--win) 10%,transparent) }
.aw i { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--warn); color:#3b2a00; flex:none } .aw.honor i { background:var(--win); color:#052e1c }
.aw b { display:block; font-family:var(--fd); font-size:14px } .aw span { font-size:12px; color:var(--muted) }
.vit { display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:9px }
.vit .tr { border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 9%,transparent); border-radius:13px; padding:10px; display:flex; flex-direction:column; gap:4px }
.vit .tr i { color:var(--warn) } .vit .tr b { font-family:var(--fd); font-size:13.5px; line-height:1.2 } .vit .tr span { font-size:11.5px; color:var(--muted); line-height:1.3 }
.vit .tr:not(.lock) span { color:var(--warn); font-weight:800; font-size:14px }
.vit .tr.lock { border-color:var(--line); background:var(--card2); opacity:.55; filter:grayscale(.8) } .vit .tr.lock i { color:var(--muted) }
.srow { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card2); margin-bottom:8px; cursor:pointer; transition:border-color .2s, transform .2s }
.srow:hover { border-color:var(--accent); transform:translateY(-1px) }
.srow > div:first-child { flex:1 1 auto; min-width:0; overflow-wrap:anywhere }
.srow > .eff { flex:0 1 auto; min-width:0; margin-top:0; justify-content:flex-end }      /* en móvil, las etiquetas bajan de línea en vez de salirse */

/* ---- retos semanales ---- */
.chgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px }
.ch { border:1px solid var(--line); border-radius:15px; padding:13px 14px; background:var(--card2); display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden; transition:transform .2s, border-color .2s }
.ch:hover { transform:translateY(-2px) }
.ch::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tc) }
.ch.easy { --tc:var(--win) } .ch.mid { --tc:var(--accent2) } .ch.hard { --tc:var(--warn) }
.chtop { display:flex; justify-content:space-between; align-items:center }
.chtier { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--tc) }
.chico { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--tc) 18%,transparent); color:var(--tc) }
.chlabel { font-family:var(--fd); font-size:16px; line-height:1.25; min-height:40px }
.ch .bar i { background:var(--tc) }
.chfoot { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums }
.ch.done { border-color:color-mix(in srgb,var(--win) 60%,transparent); background:linear-gradient(120deg,color-mix(in srgb,var(--win) 13%,var(--card2)),var(--card2) 70%) }
.ch.done .chlabel { opacity:.8 } .ch.done .chfoot > span:first-child { color:var(--win) }
.chbonus { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:12px; padding:11px 14px; border-radius:13px; border:1px dashed color-mix(in srgb,var(--warn) 55%,transparent); background:color-mix(in srgb,var(--warn) 8%,transparent); flex-wrap:wrap }
.chbonus.paid { border-style:solid; border-color:var(--win); background:color-mix(in srgb,var(--win) 12%,transparent) }
.chleft { text-align:right } .chleft b { font-family:var(--fd); font-size:24px; display:block; line-height:1 } .chleft span { font-size:12px; color:var(--muted) }
.chhist { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }

/* ---- retoque: filtros, tienda, social, carrera libre, cartera ---- */
.chips { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 }
.chip { padding:5px 13px; border-radius:99px; font-size:12.5px; font-weight:700; background:var(--card2); border:1px solid var(--line); color:var(--muted); box-shadow:none }
.chip i { font-style:normal; opacity:.7; margin-left:3px; font-variant-numeric:tabular-nums }
.chip:hover { color:var(--ink); border-color:var(--accent); transform:none }
.chip.on { background:var(--grad); color:#fff; border-color:transparent } .chip.on i { opacity:.9 }
.shopbar { margin:12px 0 0 }
.blowbox summary { cursor:pointer; font-weight:700; color:var(--ink); list-style:none } .blowbox summary::-webkit-details-marker { display:none }
.blowbox summary::before { content:"ⓘ "; color:var(--loss) } .blowbox[open] summary { margin-bottom:6px }
.item { overflow:hidden } .item > *:not(.iwm):not(.ribbon) { position:relative; z-index:1 }
.item .iwm { position:absolute; right:-14px; bottom:-18px; opacity:.07; transform:rotate(-12deg); color:var(--c,var(--accent)); pointer-events:none; transition:transform .3s, opacity .3s } .item:hover .iwm { opacity:.13; transform:rotate(-4deg) scale(1.06) }
.ribbon { position:absolute; top:10px; right:-30px; z-index:2; transform:rotate(35deg); padding:2px 34px; background:var(--c,var(--accent)); color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em }
.afford .bar { height:6px } .afford .bar i { background:var(--warn) } .afford span { display:block; margin-top:4px; font-size:12px; color:var(--warn); font-weight:600 }
.feedscroll { max-height:calc(100vh - 250px); min-height:320px; overflow-y:auto; padding-right:6px; margin-right:-6px; scrollbar-width:thin }
.stack { display:flex; flex-direction:column; gap:16px; align-self:start }
.stack > .card { margin:0 }
.freehead { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap }
.reqgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px }
.req { padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card2) } .req.ok { border-color:color-mix(in srgb,var(--win) 55%,transparent) }
.rq { display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:6px; color:var(--muted); font-weight:600 } .rq b { color:var(--ink); font-variant-numeric:tabular-nums } .req.ok .rq b { color:var(--win) }
.spark { width:100%; height:46px; margin-top:12px; display:block } .spark polygon { fill:color-mix(in srgb,var(--accent) 18%,transparent) } .spark polyline { fill:none; stroke:var(--accent2); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round }
.mixbar { display:flex; height:10px; border-radius:99px; overflow:hidden; gap:2px; margin-top:12px } .mixbar i { display:block; min-width:4px }
.mixleg { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:7px; font-size:12px; color:var(--muted) } .mixleg i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px } .mixleg b { color:var(--ink) }
.stack .card > div { overflow-x:auto } .stack table { font-size:13px } .stack th, .stack td { padding-left:6px; padding-right:6px }

/* ---- alfa cerrada ---- */
.alphatag { padding:4px 11px; border-radius:99px; background:color-mix(in srgb,var(--warn) 18%,transparent); border:1px solid color-mix(in srgb,var(--warn) 55%,transparent); color:var(--warn); font-size:12px; font-weight:700; white-space:nowrap } .alphatag b { letter-spacing:.12em; margin-right:3px }
.langsw { display:inline-flex; border:1px solid var(--line); border-radius:99px; overflow:hidden } .langsw button { border:0; border-radius:0; background:transparent; box-shadow:none; padding:5px 10px; font-size:12px; font-weight:800; color:var(--muted) } .langsw button.on { background:var(--grad); color:#fff }
.alphabanner { margin:0 0 14px; padding:12px 16px; border-radius:14px; border:1px solid color-mix(in srgb,var(--loss) 55%,transparent); background:color-mix(in srgb,var(--loss) 10%,var(--card)) }
.alphalist { text-align:left; max-width:560px; margin:6px auto 0; padding-left:20px; font-size:14.5px; line-height:1.55; color:var(--muted) } .alphalist li { margin:7px 0 }
.report { width:100%; height:200px; margin-top:12px; resize:vertical; border-radius:12px; border:1px solid var(--line); background:var(--card2); color:var(--ink); padding:10px; font:12.5px/1.45 ui-monospace,Consolas,monospace }
.expired { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px; background:rgba(5,8,18,.94) } .expired .ov-card { max-width:520px }

/* =====================================================================================
   CAPA «ROCKET LEAGUE.COM» (fase 1 del rediseño): azul marino plano, naranja de acento, botones de esquina
   casi recta, títulos en mayúsculas pesadas y tarjetas limpias. Para volver al aspecto anterior, borra todo
   lo que hay debajo de este comentario. Inspirado en el estilo de rocketleague.com; sin sus logotipos ni recursos.
   ===================================================================================== */
:root {
  --bg:#0d0d22; --bg2:#0a0a1a; --card:#15152d; --card2:#1d1d3a; --ink:#ffffff; --muted:rgba(255,255,255,.66); --line:rgba(255,255,255,.11);
  --accent:#e87722; --accent2:#3b82f6; --win:#75bf25; --loss:#ff4d5a; --warn:#ffb020;
  --shadow:none; --glow:none; --grad:linear-gradient(0deg,#e87722,#e87722);
  --btn:#333344; --btn-hover:#44445a; --on-accent:#0d0d22; --r:4px;
}
body { background:var(--bg); background-attachment:scroll; font-family:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif }
body::before { background:var(--hex) 0 0/56px 97px repeat; -webkit-mask-image:linear-gradient(#000,transparent 85%); mask-image:linear-gradient(#000,transparent 85%); opacity:.9;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17zM28 62v35M54 47l2 1M2 47l-2 1' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.2'/%3E%3C/svg%3E") }
body.hasbg::after { opacity:.12 }

/* cabecera: barra oscura plana y enlaces con subrayado naranja en el activo */
.top { backdrop-filter:none; background:rgba(13,13,34,.97); border-bottom:1px solid var(--line) }
.brand .mark { border-radius:var(--r); background:transparent; box-shadow:none; border:1px solid var(--line) }
.brand b { font-weight:800; letter-spacing:.1em }
.tabs { gap:2px; margin-top:8px }
.tab { clip-path:none; background:transparent; border-radius:0; border:0; border-bottom:3px solid transparent; padding:10px 16px 8px; color:var(--muted); font-weight:700; letter-spacing:.07em }
.tab:hover { background:rgba(255,255,255,.06); color:#fff }
.tab.on { background:transparent; color:#fff; border-bottom-color:var(--accent) } .tab.on .n { background:var(--accent); color:var(--on-accent) }

/* botones: gris azulado plano; el principal, naranja con texto oscuro */
button, select, select.s, .btnlink { border-radius:var(--r) }
button { background:var(--btn); border:0; color:#fff; font-weight:700; padding:8px 16px }
button:hover:not(:disabled) { background:var(--btn-hover); border-color:transparent }
button.primary, .opt.sel { background:var(--accent); color:var(--on-accent); box-shadow:0 0 16px rgba(0,0,0,.13); text-transform:uppercase; letter-spacing:.04em; border:0 }
button.primary:hover:not(:disabled) { background:#f58a35 }
button.ghost { background:transparent; border:1px solid var(--line); color:var(--muted) } button.ghost:hover:not(:disabled) { background:rgba(255,255,255,.07); color:#fff }
button.big { border-radius:var(--r); font-weight:800 }
select, select.s { background:var(--card2); border:1px solid var(--line) }
.btnlink { background:var(--btn); border:0; color:#fff; font-weight:700 } .btnlink:hover { background:var(--btn-hover); color:#fff }

/* tarjetas planas con esquina corta y títulos en mayúsculas pesadas */
.card { border-radius:6px; background:var(--card); border:1px solid var(--line); box-shadow:none }
.card::before { display:none }
h1, h2, h3 { font-family:var(--fd) }
h2 { color:#fff; font-size:14px; font-weight:800; letter-spacing:.1em } h2::before { width:4px; height:16px; border-radius:0; background:var(--accent) }
h2 .ico { color:var(--accent) }
.item .itile, .gear .gi { background:var(--accent); color:var(--on-accent); box-shadow:none; border-radius:var(--r) }
.meter .mi, .newsi .ni { border-radius:var(--r) }

/* etiquetas, chips y barras */
.chip, .pill, .tag, .chip2, .e, .eyebrow { border-radius:3px }
.tag, .chip2 { background:rgba(232,119,34,.16); color:#ffb070 }
.bar, .bar > i { border-radius:2px } .bar { height:8px }
.bar > i, .bar > i.pend { background:var(--accent) }
.weeks .wk { border-radius:1px }

/* héroe de Inicio y resultado de partida: sin resplandores */
.hero { border-radius:6px; box-shadow:none; border:1px solid var(--line) }
.hero-shade { background:linear-gradient(90deg,rgba(13,13,34,.96) 0,rgba(13,13,34,.74) 42%,rgba(13,13,34,.1) 80%), linear-gradient(0deg,rgba(13,13,34,.94) 0,rgba(13,13,34,0) 55%) }
.hero .tier { text-shadow:none } .hero .chapline { color:var(--accent) }
.hero .bar.tall { border-radius:2px; background:rgba(255,255,255,.14); box-shadow:none }
.hero .bar.tall > i { background:var(--accent); box-shadow:none } .hero .bar.tall > i::after { display:none }
.hero-emblem { filter:none }
.gear, .hero .kpi { border-radius:var(--r); backdrop-filter:none; background:rgba(13,13,34,.72) }
.hero .kpi { border-bottom:3px solid var(--accent) }
.kpi { border-radius:var(--r) }
.mres, .mres.win, .mres.loss { background:var(--card); border-radius:6px }
.mres.win { border-left:5px solid var(--win) } .mres.loss { border-left:5px solid var(--loss) }
.mt, .terms span { border-radius:var(--r) }
.mt.rew { border-color:rgba(255,176,32,.5) }
.dopt, .offer, .item, .slot, .decision { border-radius:6px } .offer .obanner { border-radius:5px 5px 0 0 }
.dopt:hover:not(:disabled), .offer:hover, .item:hover { transform:none; box-shadow:none; border-color:var(--accent) }
.obanner { border-radius:var(--r) } .obanner::after { display:none }
.decision { border-left-color:var(--accent) } .decision .dhead .avw { box-shadow:0 0 0 3px var(--accent) }
.tutorial { background:var(--card); border:1px solid var(--accent) }
.tutorial, .outcome, .banner, .lobby { border-radius:6px }
.panel:not([hidden]) > .card, .panel:not([hidden]) > .hero { animation:none }
details.sx-w > summary::before, details.sx-d > summary::before, details.sx-s > summary::before, details.sx-ov > summary::before, details.sx-m > summary::before { color:var(--accent) }
input, select, button, progress { accent-color:var(--accent) } input[type=range] { accent-color:var(--accent) }
.scenew, .scenew img, .scene { border-radius:6px }

/* ---- logotipo recortado (el PNG trae margen transparente: se enseña solo la parte con dibujo) ---- */
.rl-logo { --h:30px; position:relative; display:block; height:var(--h); width:calc(var(--h) * 3.635); overflow:hidden; flex:none }
.rl-logo img { position:absolute; height:calc(var(--h) * 2.455); width:auto; left:calc(var(--h) * -0.382); top:calc(var(--h) * -0.7296); max-width:none; user-select:none }
.brand { align-items:flex-end; gap:12px } .brand small { padding-bottom:2px } .brandtxt { font-family:var(--fd); text-transform:uppercase; letter-spacing:.1em }

/* ---- pantalla de inicio ---- */
body.introing { overflow:hidden }
.intro { position:fixed; inset:0; z-index:3000; display:grid; place-items:center; overflow:auto; padding:28px 18px; background:#0d0d22; transition:opacity .55s }
.intro.out { opacity:0; pointer-events:none }
.intro-video { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0; transition:opacity 1.2s }
.intro-video.on { opacity:1 }
.intro-shade { position:fixed; inset:0; z-index:-1; background:radial-gradient(ellipse 70% 60% at 50% 48%, rgba(13,13,34,.78), rgba(13,13,34,.4) 70%), linear-gradient(0deg, rgba(13,13,34,.92), transparent 45%) }
.intro-top { position:fixed; top:16px; right:18px; display:flex; gap:8px }
.intro-top button { background:rgba(13,13,34,.6); border:1px solid var(--line) }
.intro-main { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; width:min(900px,100%) }
.intro-main .rl-logo { filter:drop-shadow(0 6px 24px rgba(0,0,0,.6)); margin-bottom:6px }
.intro-tag { color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-size:13px; font-weight:700 }
.intro-h { margin-top:26px; font-family:var(--fd); font-weight:800; font-size:15px; letter-spacing:.14em; text-transform:uppercase }
.intro-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; width:100%; margin-top:6px }
.intro-card { display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left; padding:14px 16px; border-radius:6px; background:rgba(13,13,34,.8); border:1px solid var(--line); border-top:3px solid transparent; backdrop-filter:blur(6px) }
.intro-card b { font-family:var(--fd); font-size:17px; letter-spacing:.04em; text-transform:uppercase } .intro-card span { font-size:12.5px; color:var(--muted); font-weight:500 }
.intro-card em { margin-top:4px; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.intro-card:hover:not(:disabled), .intro-card:focus-visible { background:rgba(29,29,58,.92); border-top-color:var(--accent); outline:0 }
.intro-card.main { border-top-color:var(--accent) } .intro-card.new { border-style:dashed; background:rgba(13,13,34,.55) }
.intro-foot { position:fixed; bottom:12px; left:0; right:0; text-align:center; font-size:11.5px; color:var(--muted) }
@media (max-width:560px) { .intro-main .rl-logo { --h:70px !important } }
.playbtn { background:var(--accent); color:var(--on-accent); box-shadow:0 0 16px rgba(0,0,0,.13); border-radius:var(--r); letter-spacing:.06em } .playbtn:hover:not(:disabled) { background:#f58a35; box-shadow:0 0 16px rgba(0,0,0,.13); transform:none }

/* ---- cabecera en zonas: marca · estado y acciones · menú «⋯» ---- */
.topbar { align-items:center; gap:14px 18px }
.brand { align-items:center; gap:12px; min-width:0 } .brand small { padding:0; color:var(--muted); white-space:nowrap }
#tbAlpha .alphatag { padding:3px 9px; font-size:11px }
.tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end }
.tools .chip { padding:6px 12px }
.tools .playbtn { padding:8px 14px; font-size:12px }
#careerSel { min-width:210px; max-width:300px; padding:8px 10px; font-size:13.5px }
.moremenu { position:relative }
.moremenu > summary { list-style:none; cursor:pointer; width:38px; height:36px; display:grid; place-items:center; border-radius:var(--r); background:var(--btn); color:#fff; font-size:20px; font-weight:800; line-height:1; user-select:none }
.moremenu > summary::-webkit-details-marker { display:none } .moremenu > summary:hover, .moremenu[open] > summary { background:var(--btn-hover) }
.moremenu .menu { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:270px; padding:6px; border-radius:6px; background:var(--card2); border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:2px }
.menu .mi { display:block; width:100%; text-align:left; background:transparent; border:0; border-radius:4px; padding:9px 12px; color:#fff; font:inherit; font-weight:600; font-size:13.5px; text-decoration:none; cursor:pointer; box-sizing:border-box }
.menu .mi:hover { background:rgba(255,255,255,.09) } .menu .mi.danger:hover { background:rgba(255,77,90,.16); color:var(--loss) }
.menu .msep { height:1px; background:var(--line); margin:4px 2px } .menu #moreAlpha { display:contents }
@media (max-width:1060px) { .brand small { display:none } }
@media (max-width:700px) { .topbar { justify-content:center } .tools { justify-content:center } #careerSel { min-width:0; flex:1 1 180px } }

/* ---- Sesiones: avisos, copias y notas en directo, compactos ---- */
#toolscard .tl-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px }
#toolscard .tl-ov { border:1px solid var(--line); border-radius:6px; padding:14px 16px; background:rgba(255,255,255,.025); min-width:0 }
#toolscard .tl-head { display:flex; justify-content:space-between; align-items:center; gap:10px }
#toolscard h3 { margin:0; font-size:15px; letter-spacing:.03em; display:flex; align-items:center; gap:8px }
#toolscard .tl-ov p { margin:6px 0 12px; font-size:13px; line-height:1.5; color:var(--muted) } #toolscard .tl-ov p b { color:#fff }
#toolscard .state { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:3px }
#toolscard .state.on { color:var(--win); background:rgba(117,191,37,.14) } #toolscard .state.off { color:var(--loss); background:rgba(255,77,90,.14) }
#toolscard .who { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
#toolscard .ab { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:3px; background:var(--accent); color:var(--on-accent); font-style:normal; font-weight:900; font-size:13px } #toolscard .ab.b { background:var(--accent2); color:#fff }
#toolscard .tl-sec { margin-top:20px } #toolscard .tl-sec > h2 { margin-bottom:10px }
#toolscard .toolbtns { margin-top:0 }
#toolscard .tl-set { margin-top:12px; border-top:1px solid var(--line); padding-top:10px }
#toolscard .tl-set > summary { cursor:pointer; list-style:none; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) } #toolscard .tl-set > summary::-webkit-details-marker { display:none }
#toolscard .tl-set > summary::before { content:'▸ '; color:var(--accent) } #toolscard .tl-set[open] > summary::before { content:'▾ ' } #toolscard .tl-set > summary:hover { color:#fff }
#toolscard .tl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 18px; margin-top:12px; align-items:end }
#toolscard .tl-grid label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); min-width:0 } #toolscard .tl-grid label b { color:#fff; font-variant-numeric:tabular-nums }
#toolscard .tl-grid input[type=range] { width:100% } #toolscard .tl-grid select { width:100%; padding:6px 8px; font-size:13px }
#toolscard .tl-grid label.chk, #toolscard .chks label { flex-direction:row; align-items:center; gap:8px; color:#fff }
#toolscard .chks { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px 18px }
#toolscard .corners { grid-column:1 / -1; display:flex; align-items:center; gap:6px; flex-wrap:wrap } #toolscard .corners span { font-size:12.5px; color:var(--muted); margin-right:4px }
#toolscard .corners button { padding:6px 12px }
#toolscard .hint { margin:10px 0 0; font-size:12px; color:var(--muted) }
#toolscard .tl-grid label { display:block } #toolscard .tl-grid label > input[type=range] { display:block; margin-top:5px } #toolscard .tl-grid label > select { display:block; margin-top:5px }
#toolscard .tl-grid label.chk, #toolscard .chks label { display:flex }

/* =====================================================================================
   MENÚ LATERAL (rediseño): navegación vertical a la izquierda, contenido a todo lo ancho y naranja solo como acento
   (la llama del logo): marca de la pestaña activa, barritas de los títulos, iconos y la barra de reputación.
   ===================================================================================== */
.shell { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh }
.side { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; padding:18px 14px 16px; display:flex; flex-direction:column; gap:14px;
  background:rgba(7,7,20,.9); border-right:1px solid var(--line); scrollbar-width:thin }
.side-brand { display:flex; flex-direction:column; gap:9px; padding:2px 4px 4px }
.side-meta { display:flex; flex-direction:column; gap:7px; align-items:flex-start } .side-meta small { color:var(--muted); font-size:11.5px; line-height:1.3 }
#tbAlpha .alphatag { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:3px 9px; font-size:11px; line-height:1.25 } #tbAlpha .alphatag b { margin:0 }
.side-career { display:flex; flex-direction:column; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.side-career select { width:100%; max-width:none; min-width:0; padding:8px 10px; font-size:13px; letter-spacing:0; text-transform:none; font-weight:600 }
.side .tabs { display:flex; flex-direction:column; gap:1px; margin:0; padding:0; overflow:visible }
.side .tab { width:100%; justify-content:flex-start; border:0; border-left:3px solid transparent; border-radius:0 4px 4px 0; padding:11px 12px; font-size:12.5px }
.side .tab:hover { background:rgba(255,255,255,.05) }
.side .tab.on { background:rgba(255,255,255,.075); border-left-color:var(--accent); color:#fff }
.side .tab.on [data-ico], .side .tab.on svg { color:var(--accent) }
.side .tab .n { margin-left:auto; background:rgba(255,255,255,.16); color:#fff }
.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:7px; padding-top:10px; border-top:1px solid var(--line) }
.side-foot .chip { align-self:flex-start }
.side-foot .playbtn, .side-foot .sbtn { display:block; width:100%; text-align:left; box-sizing:border-box }
.side-foot #moreAlpha { display:contents }
.sbtn { padding:8px 12px; border-radius:var(--r); background:transparent; border:1px solid var(--line); color:var(--muted); font:inherit; font-weight:700; font-size:13px; text-decoration:none; cursor:pointer }
.sbtn:hover { background:rgba(255,255,255,.07); color:#fff }
.side-foot #tbLang { margin-top:2px }
main { max-width:none; margin:0; padding:22px 30px 56px }

/* naranja con mesura: botones neutros, tarjetas y barras sin color; el acento solo marca lo importante */
button.primary, .opt.sel { background:#e6e9f4; color:#0d0d22; box-shadow:none; letter-spacing:.03em } button.primary:hover:not(:disabled) { background:#fff }
.playbtn { background:var(--btn); color:#fff; border-left:3px solid var(--accent); box-shadow:none; letter-spacing:.05em } .playbtn:hover:not(:disabled) { background:var(--btn-hover); box-shadow:none }
.tag, .chip2 { background:rgba(255,255,255,.1); color:#d9deee }
.bar > i, .bar > i.pend { background:#aeb6d4 } .bar > i.ok { background:var(--win) } .bar > i.no { background:var(--loss) }
.hero .bar.tall > i { background:var(--accent) }
.hero .kpi { border-bottom:3px solid rgba(255,255,255,.22) } .hero .chapline { color:#c7cde2 }
.item .itile, .gear .gi { background:rgba(255,255,255,.09); color:var(--accent) }
.mmrbox b { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#fff }
.tab.on .n { background:rgba(255,255,255,.16); color:#fff }
.chip.on { background:#e6e9f4; color:#0d0d22 }
#toolscard .ab { background:#e6e9f4; color:#0d0d22 } #toolscard .ab.b { background:var(--accent2); color:#fff }
.intro-card.main { border-top-color:rgba(255,255,255,.55) } .intro-card:hover, .intro-card:focus-visible { border-top-color:rgba(255,255,255,.55) }

/* pantalla de inicio: las tarjetas ya no son botones, llevan sus acciones (renombrar / eliminar) */
.intro-card { position:relative; cursor:pointer }
.intro-card .ca { position:absolute; top:8px; right:8px; display:flex; gap:4px; opacity:0; transition:opacity .15s; flex-direction:row; align-items:center }
.intro-card:hover .ca, .intro-card:focus-within .ca { opacity:1 }
.intro-card .ca button { padding:3px 8px; font-size:13px; line-height:1.3; background:rgba(13,13,34,.7) }

@media (max-width:900px) {
  .shell { display:block }
  .side { position:static; height:auto; flex-direction:column; border-right:0; border-bottom:1px solid var(--line); padding:12px }
  .side-brand { flex-direction:row; align-items:center; gap:12px } .side-meta small { display:none }
  .side .tabs { flex-direction:row; overflow-x:auto } .side .tab { width:auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; border-radius:0 }
  .side .tab.on { border-left-color:transparent; border-bottom-color:var(--accent) }
  .side-foot { flex-direction:row; flex-wrap:wrap; margin-top:0; align-items:center }
  .side-foot .playbtn, .side-foot .sbtn { width:auto }
  main { padding:14px 12px 48px }
}
input, select, button, progress, input[type=range] { accent-color:#c9cfe6 }
.side-foot .chip { align-self:stretch }

/* ---- foto de perfil ---- */
#toasts { z-index:4000 }
.cav { --s:40px; width:var(--s); height:var(--s); border-radius:50%; overflow:hidden; display:inline-grid; place-items:center; flex:none; background:var(--card2); border:1px solid var(--line); font-weight:800; font-size:calc(var(--s) * .38); color:#fff; vertical-align:middle }
.cav img { width:100%; height:100%; object-fit:cover; display:block } .cav.ini { color:var(--muted) }
.side-row { display:flex; align-items:center; gap:9px } .side-row select { flex:1; min-width:0 } #sideAv { display:contents }
.intro-card { flex-direction:row; align-items:center; gap:13px } .intro-card .cbody { display:flex; flex-direction:column; gap:3px; min-width:0 } .intro-card.new .cbody { padding:6px 0 }
.hero-emblem { position:relative; cursor:pointer } .hero-emblem::after { content:"📷 Cambiar foto"; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); font-size:11px; font-weight:700; white-space:nowrap; padding:3px 9px; border-radius:99px; background:rgba(13,13,34,.9); border:1px solid var(--line); opacity:0; transition:opacity .15s; pointer-events:none }
.hero-emblem:hover::after { opacity:1 }
.hero-emblem .avx { position:absolute; top:4px; right:4px; width:24px; height:24px; padding:0; border-radius:50%; background:rgba(13,13,34,.9); border:1px solid var(--line); color:#fff; font-size:15px; line-height:1; opacity:0; transition:opacity .15s }
.hero-emblem:hover .avx { opacity:1 } .hero-emblem .avx:hover { background:var(--loss) }

/* ---- «Tu historia» condensada ---- */
.story2 { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:10px 36px; align-items:start }
.story2-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px } .story2-head h3 { margin:0; font-size:22px }
.chapsteps { display:inline-flex; gap:4px; flex:none } .chapsteps i { width:26px; height:5px; border-radius:2px; background:rgba(255,255,255,.16) } .chapsteps i.past { background:#aeb6d4 } .chapsteps i.on { background:var(--accent) }
.story2-main p { margin:0; color:var(--muted); line-height:1.55 }
.story2-next { font-size:12px; margin-bottom:2px } .story2-next span { color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:11px } .story2-next b { margin-left:6px }
.story2-side .goal { margin:8px 0 }
.story2-side .storyrank { margin-top:14px; padding-top:12px; border-top:1px solid var(--line) } .story2-side .storyrank select { flex:1; min-width:140px }
@media (max-width:1000px) { .story2 { grid-template-columns:1fr } }
html[lang=en] .hero-emblem::after { content:"📷 Change photo" }
.intro-card .ca { position:static; flex-direction:column; align-items:stretch; gap:3px; margin-left:auto } .intro-card .ca button { padding:2px 8px; font-size:12px }
.intro-list { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }

/* ---- Ajustes ---- */
.setrow { display:flex; gap:12px; align-items:flex-start; cursor:pointer; line-height:1.4 } .setrow input { margin-top:4px; width:16px; height:16px } .setrow b { display:block; margin-bottom:2px } .setrow .sub { display:block }
body.nocareer #socialset { display:none }
.side-career select { text-overflow:ellipsis }
.side-career .side-row select { width:0; flex:1 1 auto; min-width:0; max-width:none }
.side-career, .side-row { min-width:0; max-width:100% }
.side #careerSel { min-width:0; max-width:none; width:0; flex:1 1 auto }

/* ---- responder en el feed ---- */
.post .rp { margin-top:8px } .post .mini2 { padding:3px 11px; font-size:12px }
.post .rpopts { display:flex; flex-direction:column; gap:6px; margin-top:8px; max-width:560px }
.post .rpopts button { text-align:left; font-weight:600; font-size:13px; line-height:1.35; padding:8px 12px; background:rgba(255,255,255,.07) } .post .rpopts button:hover { background:rgba(255,255,255,.14) }
.post .rpdone { margin-top:6px; font-size:12.5px; color:var(--muted) } .post .rpdone b.pos { color:var(--win) } .post .rpdone b.neg { color:var(--loss) }
.post .rtag { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:4px }

/* ---- actitud: Honesto (copo, azul) <-> Chulo (llama, naranja) ---- */
.att-ic { display:inline-flex; vertical-align:middle } .att-ic.h { color:var(--accent2) } .att-ic.c { color:var(--accent) }
.att-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.att-end { display:inline-flex; align-items:center; gap:7px; font-family:var(--fd); font-weight:800; letter-spacing:.09em; text-transform:uppercase; font-size:13px }
.att-end.h { color:#7fb0ff } .att-end.c { color:#ff9b4d }
.att-tier { font-family:var(--fd); font-size:20px; letter-spacing:.05em; text-transform:uppercase } .att-tier.h { color:#7fb0ff } .att-tier.c { color:#ff9b4d } .att-tier.n { color:#fff }
.att-bar { position:relative; height:12px; border-radius:6px; background:linear-gradient(90deg,#3b82f6 0%,#2b3c6e 38%,#1d1d3a 50%,#5c3a22 62%,#e87722 100%); margin:6px 12px 22px }
.att-mark { position:absolute; top:50%; width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%); display:grid; place-items:center; background:#0d0d22; border:2px solid #fff; color:#fff; transition:left .5s }
.att-mark.h { border-color:var(--accent2); color:var(--accent2) } .att-mark.c { border-color:var(--accent); color:var(--accent) } .att-mark.n { width:16px; height:16px }
.att-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:10px }
.att-col { border:1px solid var(--line); border-radius:6px; padding:12px 14px; background:rgba(255,255,255,.02) }
.att-col.on.h { border-color:var(--accent2) } .att-col.on.c { border-color:var(--accent) }
.att-col h4 { margin:0 0 9px; display:flex; align-items:center; gap:7px; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase }
.att-col ul { list-style:none; margin:0; padding:0; display:grid; gap:7px }
.att-col li { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted) } .att-col li b { font-variant-numeric:tabular-nums; color:#fff }
.att-col li.up b { color:var(--win) } .att-col li.down b { color:var(--loss) }
.dopt .att-ic { margin-left:4px } .post .rpopts .att-ic { margin-right:6px }
@media (max-width:760px) { .att-cols { grid-template-columns:1fr } .att-top { flex-wrap:wrap } }

/* ---- eventos: galas ---- */
.ev-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; margin-top:14px }
.ev { border:1px solid var(--line); border-radius:6px; padding:16px 18px; background:rgba(255,255,255,.025); display:flex; flex-direction:column; gap:12px; min-width:0 }
.ev-head { display:flex; gap:13px; align-items:center } .ev-head h3 { margin:0 0 2px; font-size:18px; letter-spacing:.03em }
.ev-ico { width:44px; height:44px; border-radius:6px; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.07); color:var(--accent) }
.ev.locked { opacity:.7 } .ev.locked .ev-ico { color:var(--muted) }
.ev.ready { border-color:var(--accent); background:rgba(232,119,34,.07) }
.ev-go { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.ev-res { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.ev-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:3px; background:rgba(255,255,255,.1) }
.ev-badge.won { background:rgba(117,191,37,.18); color:var(--win) } .ev-badge.nom { background:rgba(255,176,32,.16); color:var(--warn) } .ev-badge.out { color:var(--muted) }
.ev.won { border-color:rgba(117,191,37,.5) }
.gala-t { width:100%; border-collapse:collapse; font-size:13px } .gala-t th { text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:4px 6px; font-weight:700 }
.gala-t td { padding:6px 6px; border-top:1px solid var(--line) } .gala-t .r { text-align:right } .gala-t tr.me td { background:rgba(255,255,255,.07); font-weight:700 }
.ev-speech .rpopts { display:flex; flex-direction:column; gap:6px; margin-top:8px } .ev-speech .rpopts button { text-align:left; font-weight:600; font-size:13px; line-height:1.35; padding:8px 12px; background:rgba(255,255,255,.07) } .ev-speech .rpopts button:hover { background:rgba(255,255,255,.14) }
.ev .rpdone { font-size:12.5px; line-height:1.5; color:var(--muted) }
.ov-body .gala-t td, .ov-body .gala-t th { text-align:left } .ov-body .gala-t .r { text-align:right }

/* =====================================================================================
   MOVIMIENTO Y MENÚ PLEGABLE: transiciones entre pantallas, marca deslizante en el menú, entrada escalonada de las tarjetas,
   micro-interacciones y pantalla de inicio animada. Todo se apaga con «reducir movimiento» del sistema (regla de más arriba).
   Para quitar el movimiento y dejar el menú fijo, borra todo lo que hay debajo de este comentario.
   ===================================================================================== */
:root { --ease:cubic-bezier(.22,.8,.2,1); --side-w:236px }
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent }
body { text-rendering:optimizeLegibility }
:focus-visible { outline:2px solid var(--accent2); outline-offset:2px }
.panel { gap:18px } .card { padding:20px }
main { max-width:1560px; margin:0 auto; width:100% }

/* menú lateral plegable */
.shell { grid-template-columns:var(--side-w) minmax(0,1fr); transition:grid-template-columns .4s var(--ease), filter .6s var(--ease), transform .6s var(--ease) }
body.side-collapsed { --side-w:72px }
.side { overflow-x:hidden; transition:padding .4s var(--ease), opacity .5s var(--ease), transform .5s var(--ease) }
.brand-row { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px }
.side-toggle { width:30px; height:30px; padding:0; flex:none; display:grid; place-items:center; border-radius:6px; background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--line) }
.side-toggle:hover:not(:disabled) { background:rgba(255,255,255,.12); color:#fff }
.side-toggle svg { transition:transform .45s var(--ease) } body.side-collapsed .side-toggle svg { transform:rotate(180deg) }
.brand-mini { display:none; width:38px; height:38px; border-radius:9px; place-items:center; background:linear-gradient(135deg,#f08a35,#b3500e); color:#0d0d22; font-family:var(--fd); font-weight:900; font-size:15px; letter-spacing:.02em; box-shadow:0 4px 14px rgba(232,119,34,.3) }
.side .tl { max-width:190px; overflow:hidden; white-space:nowrap; transition:opacity .25s var(--ease), max-width .4s var(--ease) }
.side .si { width:18px; text-align:center; flex:none }
.side .sbtn, .side .playbtn { display:flex; align-items:center; gap:10px }
body.side-collapsed .side { padding:18px 10px 16px }
body.side-collapsed .side .tl { opacity:0; max-width:0 }
body.side-collapsed .side .rl-logo, body.side-collapsed .side .side-meta { display:none }
body.side-collapsed .side .brand-mini { display:grid }
body.side-collapsed .brand-row { flex-direction:column; gap:10px }
body.side-collapsed .side-career > span:first-child, body.side-collapsed .side-career select { display:none }
body.side-collapsed .side-row { justify-content:center }
body.side-collapsed .side .tab { justify-content:center; gap:0; padding:11px 0; position:relative; border-radius:6px }
body.side-collapsed .side .tab .n { position:absolute; top:3px; right:8px; margin:0 }
body.side-collapsed .side-foot .chip { justify-content:center; padding:7px 0 } body.side-collapsed #livetxt, body.side-collapsed #tbLang { display:none }
body.side-collapsed .side .sbtn, body.side-collapsed .side .playbtn { justify-content:center; gap:0; padding:9px 0 }

/* marca naranja deslizante en el menú */
.side .tabs { position:relative }
.nav-ind { position:absolute; left:0; top:0; width:3px; height:var(--h, 0); border-radius:0 3px 3px 0; background:var(--accent); opacity:0; transform:translateY(var(--y, 0));
  box-shadow:0 0 14px rgba(232,119,34,.6); transition:transform .45s var(--ease), height .3s var(--ease), opacity .25s }
.nav-ind.on { opacity:1 }
.side .tab.on { border-left-color:transparent }
.side .tab { transition:background .2s, color .2s }
.side .tab svg { transition:transform .3s var(--ease), color .2s } .side .tab:hover svg { transform:translateX(2px) scale(1.1) }
.side .tab.on svg { transform:scale(1.1) }

/* entre pantallas: la pantalla entra desde el lado al que navegas y las tarjetas suben una tras otra */
@keyframes panelIn { from { opacity:0; transform:translateX(calc(var(--dir, 1) * 24px)) } to { opacity:1; transform:none } }
@keyframes cardRise { from { opacity:0; transform:translateY(18px) scale(.992) } to { opacity:1; transform:none } }
.panel:not([hidden]) { animation:panelIn .5s var(--ease) both }
.panel:not([hidden]) > *, .panel:not([hidden]) > .card, .panel:not([hidden]) > .hero { animation:cardRise .6s var(--ease) both }
.panel:not([hidden]) > :nth-child(1) { animation-delay:.02s !important } .panel:not([hidden]) > :nth-child(2) { animation-delay:.08s !important }
.panel:not([hidden]) > :nth-child(3) { animation-delay:.14s !important } .panel:not([hidden]) > :nth-child(4) { animation-delay:.2s !important }
.panel:not([hidden]) > :nth-child(5) { animation-delay:.26s !important } .panel:not([hidden]) > :nth-child(6) { animation-delay:.32s !important }
.panel:not([hidden]) > :nth-child(n+7) { animation-delay:.38s !important }
body.loading .side { opacity:0; transform:translateX(-16px) }

/* detalles */
button, .sbtn, .btnlink { transition:background .2s, color .2s, border-color .2s, transform .15s var(--ease), box-shadow .25s }
button:active:not(:disabled), .sbtn:active { transform:scale(.97) }
.card { transition:border-color .3s var(--ease) } .card:hover { border-color:rgba(255,255,255,.2) }
@keyframes flame { 0%, 100% { filter:drop-shadow(0 0 0 rgba(232,119,34,0)) } 50% { filter:drop-shadow(0 0 9px rgba(232,119,34,.5)) } }
.side .rl-logo img { animation:flame 5s ease-in-out infinite }

/* pantalla de inicio animada y paso suave a la app */
.intro-main > * { animation:cardRise .8s var(--ease) both }
.intro-main > :nth-child(1) { animation-delay:.1s } .intro-main > :nth-child(2) { animation-delay:.25s } .intro-main > :nth-child(3) { animation-delay:.4s } .intro-main > :nth-child(4) { animation-delay:.5s }
.intro-list > * { animation:cardRise .7s var(--ease) both }
.intro-list > :nth-child(1) { animation-delay:.6s } .intro-list > :nth-child(2) { animation-delay:.68s } .intro-list > :nth-child(3) { animation-delay:.76s }
.intro-list > :nth-child(4) { animation-delay:.84s } .intro-list > :nth-child(n+5) { animation-delay:.92s }
.intro { transition:opacity .6s var(--ease), transform .6s var(--ease) } .intro.out { transform:scale(1.04) }
body.introing .shell { filter:blur(10px) saturate(.8); transform:scale(.985) }

@media (max-width:900px) {
  :root { --side-w:100% }
  .side-toggle, .brand-mini { display:none !important }
  body.side-collapsed .side .tl { opacity:1; max-width:none }
  body.side-collapsed .side .rl-logo { display:block } body.side-collapsed .side .side-meta { display:flex }
  body.side-collapsed .side-career > span:first-child { display:block } body.side-collapsed .side-career select { display:block }
  body.side-collapsed #livetxt, body.side-collapsed #tbLang { display:inline } body.side-collapsed .side .tab { justify-content:flex-start; gap:8px; padding:11px 12px }
  .nav-ind { top:auto; bottom:0; left:0; width:var(--w, 0); height:3px; border-radius:3px 3px 0 0; transform:translateX(var(--x, 0)) }
  .side .tab.on { border-bottom-color:transparent }
}

/* ---- racha: contratos de partida y cofres ---- */
.rg-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px }
.rg-stat { border:1px solid var(--line); border-radius:6px; padding:14px 16px; background:rgba(255,255,255,.025); display:flex; flex-direction:column; gap:7px; min-width:0 }
.rg-stat > span:first-child { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.rg-stat > b { font-family:var(--fd); font-size:34px; line-height:1; font-variant-numeric:tabular-nums }
.rg-wins { position:relative; overflow:visible } .rg-mk { position:absolute; top:-3px; width:2px; height:14px; background:rgba(255,255,255,.35); transform:translateX(-1px) } .rg-mk.on { background:var(--accent) }
.rg-mk span { position:absolute; top:15px; left:50%; transform:translateX(-50%); font-style:normal; font-size:10.5px; color:var(--muted) }
.rg-wins { margin-bottom:12px }
.rg-chests { display:flex; flex-direction:column; gap:8px }
.rg-chest { display:flex; align-items:center; gap:10px; text-align:left; padding:9px 12px; background:rgba(255,255,255,.07) } .rg-chest em { margin-left:auto; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) }
.rg-chest.t1 svg { color:#d6935f } .rg-chest.t2 svg { color:#c9d0e0 } .rg-chest.t3 svg { color:#ffc94d }
.rg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:12px }
.rg-card { border:1px solid var(--line); border-top:3px solid var(--c); border-radius:6px; padding:14px 16px; background:rgba(255,255,255,.025); display:flex; flex-direction:column; gap:9px; min-width:0 }
.rg-card.active { border-color:var(--c); background:rgba(255,255,255,.05) }
.rg-top { display:flex; align-items:center; gap:8px } .rg-tier { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c) }
.rg-mates { margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:1px 6px }
.rg-label { font-family:var(--fd); font-size:18px; line-height:1.25; min-height:46px }
.rg-rew b { color:var(--win) } .rg-live { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c) }
.rg-h.ok { color:var(--win) } .rg-h.no { color:var(--loss) }

/* ---- título exclusivo de creador y marcos de perfil ---- */
.creatortag { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:3px; color:#ffd36b;
  background:linear-gradient(135deg,rgba(255,201,77,.2),rgba(232,119,34,.18)); border:1px solid rgba(255,201,77,.45) }
.creatortag.big { font-size:13px; padding:5px 14px; margin-top:2px }
#tbAlpha { display:flex; flex-wrap:wrap; gap:6px }
body[data-frame="m_suerte"] { --fr:#34e08a } body[data-frame="m_jackpot"] { --fr:#ff3df2 } body[data-frame="m_oro"] { --fr:#ffc94d } body[data-frame="m_neon"] { --fr:#4aa3ff } body[data-frame="m_llama"] { --fr:#ff7a1a } body[data-frame="m_hielo"] { --fr:#8fd3ff } body[data-frame="m_campeon"] { --fr:#75bf25 }
body[data-frame] .hero-emblem svg { filter:drop-shadow(0 0 3px var(--fr)) drop-shadow(0 0 14px var(--fr)) }
body[data-frame] #sideAv .cav { border-color:var(--fr); box-shadow:0 0 0 2px var(--fr), 0 0 12px var(--fr) }
.item.locked { opacity:.62 } .item.locked .itile { filter:grayscale(.7) }
body.nocareer .tab[data-tab="contratos"], body.nocareer .tab[data-tab="mesa"] { display:none }

/* «Abrir en Epic / Steam» justo debajo del selector de carrera (arriba, para abrir el juego rápido) */
.side-play { display:flex; flex-direction:column; gap:7px } .side-play[hidden], .side-play:not(:has(.playbtn:not([hidden]))) { display:none }
.side-play .playbtn { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; text-align:left }
body.side-collapsed .side-play .playbtn { justify-content:center; gap:0; padding:9px 0 }
@media (max-width:900px) { .side-play { flex-direction:row; flex-wrap:wrap } .side-play .playbtn { width:auto } }

/* OBS: conexión, clips y escenas */
#toolscard .tl-grid input[type=text], #toolscard .tl-grid input[type=number], #toolscard .tl-grid input[type=password] { display:block; width:100%; margin-top:5px; padding:6px 8px; font-size:13px }
#toolscard .obs-sub { padding-left:24px } #toolscard .obs-err { color:#ff7a7a }
#toolscard .obs-h { margin:14px 0 6px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
#toolscard .obs-clips { list-style:none; margin:0 0 10px; padding:0 } #toolscard .obs-clips li { display:flex; gap:6px; font-size:13px; padding:5px 0; border-bottom:1px solid var(--line) }
#toolscard .obs-clips li span { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums }

#toolscard .tl-three { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px }

/* rueda de prensa: pregunta del chat de Twitch */
.pr-chatq { border-color:rgba(145,70,255,.7) !important } .pr-tw { width:64px; height:64px; border-radius:50%; background:#9146ff; display:grid; place-items:center; flex:none } .pr-tw svg { width:34px; height:34px }

#toolscard .gd-rank { list-style:none; padding:0; margin:6px 0 10px; counter-reset:rk } #toolscard .gd-rank li { counter-increment:rk; display:flex; gap:10px; font-size:13.5px; padding:5px 0; border-bottom:1px solid var(--line) }
#toolscard .gd-rank li::before { content:counter(rk) '.'; width:20px; color:var(--muted); font-weight:800 } #toolscard .gd-rank li b { margin-left:auto; font-variant-numeric:tabular-nums }