:root{
  --bg:#f5f5f9; --panel:#ffffff; --panel2:#f2f2f7; --line:#e6e6ee;
  --text:#15151e; --muted:#70707c; --accent:#e10600; --accent2:#ff7a00; --gold:#c98f00;
  --shadow:0 10px 30px rgba(21,21,30,.08), 0 2px 8px rgba(21,21,30,.05);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{color:var(--text);min-height:100vh;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:
  radial-gradient(900px 500px at 85% -5%, rgba(225,6,0,.07), transparent 60%),
  radial-gradient(700px 500px at -10% 100%, rgba(255,122,0,.06), transparent 55%),
  linear-gradient(160deg,#fdfdfe,#eef0f6)}
button{cursor:pointer;font-family:inherit}
h1,h2,h3{font-style:italic;letter-spacing:-.5px}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes shine{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ---------- intro ---------- */
#intro{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px 24px 60px;position:relative;overflow:hidden}
#intro::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-160px;right:-120px;
  background:radial-gradient(circle at 35% 35%, rgba(225,6,0,.16), rgba(255,122,0,.05) 55%, transparent 70%);
  animation:drift 9s ease-in-out infinite}
#intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;opacity:.9;
  background:repeating-conic-gradient(#15151e 0% 25%, #fff 0% 50%) 0 0/32px 32px}
#intro .flag{font-size:46px;letter-spacing:6px;animation:fadeUp .6s both}
#intro h1{font-size:clamp(36px,6vw,68px);font-weight:900;text-align:center;line-height:1.02;animation:fadeUp .6s .08s both}
#intro h1 span{background:linear-gradient(92deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
#intro p{color:var(--muted);max-width:540px;text-align:center;font-size:17px;line-height:1.55;animation:fadeUp .6s .16s both}
.btn{border:none;border-radius:999px;padding:16px 40px;font-size:17px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#e10600,#ff4d1c);
  box-shadow:0 8px 22px rgba(225,6,0,.35), 0 2px 6px rgba(225,6,0,.25);
  transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 30px rgba(225,6,0,.42)}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--text);box-shadow:none}
.btn.ghost:hover{box-shadow:0 6px 16px rgba(21,21,30,.15)}
.btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
#intro .btn{animation:fadeUp .6s .24s both}
.mode-menu{display:flex;flex-direction:column;gap:11px;width:100%;max-width:430px;margin:4px auto 0;animation:fadeUp .6s .32s both}
.mode-card{position:relative;display:flex;align-items:center;gap:13px;padding:13px 18px;border:2px solid var(--line);border-radius:16px;background:var(--panel);text-align:left}
.mode-card.soon{opacity:.5}
.mode-ico{font-size:24px;flex-shrink:0;filter:grayscale(.4)}
.mode-txt{display:flex;flex-direction:column;min-width:0}
.mode-txt b{font-size:15px;font-weight:800;color:var(--text)}
.mode-txt small{font-size:12px;color:var(--muted);margin-top:1px}
.soon-badge{position:absolute;top:-9px;right:14px;background:linear-gradient(135deg,#ffb52e,#e10600);color:#fff;font-size:10px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;padding:3px 10px;border-radius:999px;box-shadow:0 3px 8px rgba(225,6,0,.28);transform:rotate(2.5deg)}
#previewBar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:#15151e;color:#fff;font-size:12px;font-weight:700;padding:7px 16px;border-radius:999px;z-index:999;box-shadow:0 4px 14px rgba(0,0,0,.35);opacity:.94;white-space:nowrap}
#previewBar a{color:#ffb52e;text-decoration:underline}
/* cartel «¡Nuevo!»: misma pastilla que PRÓXIMAMENTE pero en dorado y con destello que la recorre */
.new-badge{position:absolute;top:-9px;right:14px;z-index:2;overflow:hidden;
  background:linear-gradient(135deg,#ffd54a,#e2a400 55%,#c9820a);color:#4a2f00;
  font-size:10px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;padding:3px 11px;border-radius:999px;
  box-shadow:0 3px 10px rgba(226,164,0,.5),inset 0 1px 0 rgba(255,255,255,.65);transform:rotate(-2.5deg)}
.new-badge::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-18deg);
  animation:shine 2.6s ease-in-out infinite}
.mode-card.retro-on{opacity:1;cursor:pointer;transition:border-color .15s}
.mode-card.retro-on:hover{border-color:var(--accent)}
.mode-card.retro-on .mode-ico{filter:none}
.retro-caret{margin-left:auto;font-size:15px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.mode-card.open .retro-caret{transform:rotate(180deg)}
.decade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:430px;margin:-3px auto 0;
  padding:13px;border:2px solid var(--line);border-top:none;border-radius:0 0 16px 16px;background:var(--panel);animation:fadeUp .25s both}
.decade-grid .dec{font-family:inherit;font-weight:800;font-size:14px;padding:10px 0;border-radius:11px;
  border:2px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:transform .1s}
.decade-grid .dec:active{transform:scale(.94)}
/* el botón del RETO lleva el mismo degradado y brillo que «Iniciar carrera»: es la llamada principal */
#challengeGrid .dec{background:linear-gradient(135deg,#e10600,#ff4d1c);border-color:transparent;
  box-shadow:0 6px 18px rgba(225,6,0,.32), 0 2px 6px rgba(225,6,0,.22)}
#challengeGrid .dec:hover{filter:brightness(1.06)}
.decade-grid .dec.locked{background:var(--panel2);border-color:var(--line);color:var(--muted);opacity:.55;cursor:default}
/* la década con cuenta atrás va en ROJO como las jugables (está a punto de llegar, no «apagada» como
   las décadas lejanas), solo que con la cuenta debajo. Sin dorado: llamaba demasiado la atención. */
.decade-grid .dec .dec-sub{display:block;font-size:10px;font-weight:800;letter-spacing:.3px;opacity:.85;margin-top:1px;text-transform:uppercase;font-variant-numeric:tabular-nums}
.decade-grid .dec.dec-count{opacity:1;background:#ff8168;border-color:#ff8168;color:#fff}
/* 📚 archivo de retos: siguen jugables, pero en discreto para que destaque el actual */
.decade-grid .dec.dec-arch{background:var(--panel2);border-color:var(--line);color:var(--ink);opacity:.8}
.dec-note{grid-column:1/-1;text-align:center;font-size:11.5px;color:var(--muted);margin-top:3px}

/* ---------- identity ---------- */
#identity{display:none;max-width:1100px;margin:0 auto;padding:32px 20px}
#identity h2{font-size:32px;font-weight:900;margin-bottom:6px}
#identity .lead{color:var(--muted);margin-bottom:24px}
.id-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:22px}
/* en un RETO solo hay dos tarjetas: se centran y se estrechan para que no queden descolgadas */
.id-grid.duo{grid-template-columns:minmax(0,340px) minmax(0,420px);justify-content:center}
/* retos de REGLAS (La Bestia): son CUATRO tarjetas y con 3 columnas la última caía suelta y feo.
   En 2×2 quedan equilibradas y centradas. */
.id-grid.cuatro{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center;align-items:start}
#identity.challenge .actions{max-width:790px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.id-grid,.id-grid.duo,.id-grid.cuatro{grid-template-columns:1fr}}
/* etiquetas fijas del reto: 2×2 en vez de una fila que se desborda */
#chFixed{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#chFixed .mini-badge{text-align:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2) 55%,transparent)}
.card h3{font-size:14px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:14px;text-align:center;font-style:normal}
.numplate{width:92px;height:92px;margin:2px auto 18px;border-radius:20px;background:linear-gradient(135deg,#ffffff,#ececf4);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.07)}
.numplate span{font-family:"Arial Narrow","Impact","Haettenschweiler","Oswald",sans-serif;font-weight:800;font-style:italic;font-size:46px;line-height:1;color:#16161e;letter-spacing:1px}
.numplate span:empty::before{content:"N\00BA";opacity:.28;font-size:34px}
.field label{display:block;font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:12px 0 5px}
.field input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:12px 14px;font-size:16px;outline:none;transition:border-color .15s, box-shadow .15s}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,6,0,.12)}
.country-list{max-height:340px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;padding-right:4px}
.country-list::-webkit-scrollbar{width:6px}
.country-list::-webkit-scrollbar-thumb{background:#d4d4de;border-radius:3px}
.country-list button{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid transparent;border-radius:10px;color:#3a3a44;padding:9px 10px;font-size:14px;text-align:left;transition:all .12s}
.country-list button:hover{border-color:#c9c9d4;transform:translateX(2px)}
.country-list button.sel{background:linear-gradient(135deg,#15151e,#33333f);color:#fff;font-weight:700;box-shadow:0 4px 10px rgba(21,21,30,.25)}
.style-cards{display:flex;flex-direction:column;gap:10px}
.style-cards button{background:var(--panel2);border:1.5px solid var(--line);border-radius:14px;padding:14px;text-align:left;color:var(--text);transition:all .15s}
.style-cards button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(21,21,30,.10)}
.style-cards button.sel{border-color:#15151e;background:linear-gradient(135deg,#15151e,#33333f);color:#fff;box-shadow:0 8px 18px rgba(21,21,30,.3)}
.style-cards .t{font-weight:800;font-size:15px}
.style-cards .d{font-size:12.5px;opacity:.7;margin-top:3px;line-height:1.35}
#identity .actions{display:flex;justify-content:space-between;margin-top:26px}

/* ---------- career ---------- */
#career{display:none;max-width:1240px;margin:0 auto;padding:26px 20px 60px}
.career-grid{display:grid;grid-template-columns:430px 1fr;gap:22px;align-items:start}
@media(max-width:980px){
  /* apilar e intercalar: tarjeta → clasificación → ofertas → trayectoria,
     para decidir viendo lo que acabas de hacer */
  .career-grid{display:flex;flex-direction:column;gap:16px;align-items:stretch}
  .career-grid>div{display:contents}
  #driverCard{order:1}
  #decRecap{order:2}
  #f1state{order:3;margin-bottom:0}
  #decisionBox{order:4;margin-top:0}
  .timeline{order:5}
}

.driver-head{display:flex;gap:16px;align-items:center;position:relative}
.ovr-badge{width:78px;height:78px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;color:#fff;
  box-shadow:0 8px 18px rgba(21,21,30,.25), inset 0 1px 0 rgba(255,255,255,.35);position:relative;overflow:hidden}
.ovr-badge::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:200% 100%;animation:shine 3.5s linear infinite}
.ovr-badge .n{font-size:32px;line-height:1}
.ovr-badge .l{font-size:10px;letter-spacing:1.5px;opacity:.9}
.driver-meta{flex:1;min-width:0}
.driver-meta .tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.tag{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:700;white-space:nowrap}
/* comparación del reto (tú contra el palmarés real): duelo con barra de progreso */
.cmp-row{display:grid;grid-template-columns:1fr 52px 52px;gap:10px;align-items:center;padding:7px 12px;font-size:14px;font-weight:700}
.cmp-row .cmp-el,.cmp-row .cmp-yo{text-align:center;font-variant-numeric:tabular-nums}
.cmp-row .cmp-el{color:var(--muted)}
.cmp-head{font-size:10px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;font-weight:800;padding:0 12px 2px}
.cmp-bar{grid-column:1/-1;height:5px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:-2px}
.cmp-bar i{display:block;height:100%;border-radius:99px;transition:width .6s ease}
.cmp-item{border-radius:10px;padding:2px 0 6px}
.cmp-item+.cmp-item{margin-top:3px}
.cmp-item.win{background:linear-gradient(90deg,rgba(74,222,128,.13),transparent)}
.cmp-item.lose{background:linear-gradient(90deg,rgba(248,113,113,.11),transparent)}
.tag.red{background:linear-gradient(135deg,rgba(225,6,0,.12),rgba(255,122,0,.10));border-color:rgba(225,6,0,.3);color:#b30500}
#teamLine{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;min-width:0;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#teamLine .tname{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#teamLine .trole{flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.3px;padding:2px 9px;border-radius:999px;background:#eef2f8;color:#3a4658;border:1px solid #dbe3ee}
#teamLine .trole:empty{display:none}
.agev{text-align:right;flex-shrink:0}
.agev .a{font-size:27px;font-weight:900}
.agev .lbl{font-size:10px;letter-spacing:1px;color:var(--muted)}
.agev .v{font-size:19px;font-weight:800;background:linear-gradient(92deg,#15151e,#55555f);-webkit-background-clip:text;background-clip:text;color:transparent}
.team-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:inset 0 -2px 4px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.25);border:2px solid #fff}
img.tlogo{object-fit:cover;background:transparent;padding:0;text-shadow:none;border:none;box-shadow:none;vertical-align:middle}
img.tlogo.mb{width:20px;height:20px;border:none}
#teamDot.haslogo{background-size:cover;background-position:center;border:none !important;box-shadow:none}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.stat{background:var(--panel2);border-radius:12px;padding:8px 4px}
.stat .k{font-size:10px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;text-align:center}
.stat .v{font-size:21px;font-weight:900;text-align:center;margin-top:3px}
.stat .v.w{color:#c98f00}.stat .v.p{color:#16a34a}.stat .v.pp{color:#7c3aed}
.trophies{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;text-align:center;min-height:44px}
.trophies .empty{color:#c6c6cf;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding-top:8px}
.trophies .shelf{font-size:24px;letter-spacing:4px;line-height:1.5}
.trophies .cap{font-size:11px;color:var(--muted);margin-top:2px}

.decision{margin-top:22px}
.decision h3{font-size:22px;font-weight:900;margin-bottom:4px}
.decision h3.pulsing{animation:pulse 1.2s ease-in-out infinite}
.decision p{color:var(--muted);font-size:13.5px;margin-bottom:14px;line-height:1.45}
.decision p.outcome{color:#15151e;font-weight:600;background:linear-gradient(135deg,#fff6d8,#fffdf4);border:1px solid #f0dfa0;border-radius:12px;padding:12px 14px}
#decRecap{background:linear-gradient(135deg,#eef4ff,#fbfcff);border:1px solid #d8e4fb;border-radius:14px;padding:11px 14px;margin-bottom:12px}
#decRecap .recap-t{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:800;display:flex;align-items:center;gap:6px}
#decRecap .recap-b{font-size:14px;margin-top:5px;line-height:1.4}
#decRecap .rp{font-weight:800;padding:1px 8px;border-radius:7px;margin-right:2px}
.offers{display:flex;flex-direction:column;gap:10px}
.offer{background:linear-gradient(135deg,#eef3ff,#e6ecfb);border:1.5px solid #d4dff3;border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:14px;text-align:left;color:var(--text);transition:all .15s;width:100%;box-shadow:var(--shadow);animation:fadeUp .4s both;position:relative;overflow:hidden}
.offer:nth-child(2){animation-delay:.07s}.offer:nth-child(3){animation-delay:.14s}.offer:nth-child(4){animation-delay:.21s}
.offer:hover{border-color:#15151e;transform:translateY(-2px);box-shadow:0 14px 30px rgba(21,21,30,.14)}
.offer .dot{width:42px;height:42px;font-size:12px}
.offer .info{flex:1}
.offer .name{font-weight:800;font-size:16px}
.offer .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.offer .role{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.5px;border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:1px}
.offer .role.r1{background:linear-gradient(135deg,#ffe066,#f2ae00);color:#4a3000}
.offer .role.r2{background:#ececf1;color:#5a5a66}
.offer .role.rt{background:#e0ecff;color:#1d4ed8}
.offer .perfwrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.offer .perf{font-size:13px;letter-spacing:1px;background:linear-gradient(92deg,#e2a400,#ffce3a);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.trend{font-size:12px;font-weight:900;letter-spacing:-1px;padding:1px 6px;border-radius:6px;line-height:1.4}
.trend.up2{color:#0a7d32;background:#d7f5e0}
.trend.up{color:#12923f;background:#e5f7ec}
.trend.flat{color:#8a8a94;background:#eeeef2}
.trend.down{color:#c62a2a;background:#fbe6e6}
.trend.down2{color:#a80f0f;background:#f8d7d7}
.otrend{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:6px}
.otrend.up2{color:#0a7d32;background:#d7f5e0}
.otrend.up{color:#12923f;background:#e5f7ec}
.otrend.flat{color:#7a7a86;background:#eeeef2}
.otrend.down{color:#c62a2a;background:#fbe6e6}
.otrend.down2{color:#a80f0f;background:#f8d7d7}
.carline{display:block;margin-top:5px;font-size:11.5px;color:var(--muted)}
.jprofile{display:inline-block;margin-top:6px;font-size:11.5px;color:#3a4150;background:#eef4ff;border:1px solid #d8e4fb;padding:3px 9px;border-radius:7px;line-height:1.35}
.fit{font-weight:800;padding:1px 6px;border-radius:5px}
.fit.good{color:#0a7d32;background:#d7f5e0}
.fit.bad{color:#c62a2a;background:#fbe6e6}
.fit.neu{color:#8a8a94;background:#eeeef2}
.fs-trend{font-size:11px;font-weight:900;letter-spacing:-1px;padding:0 4px;border-radius:5px;margin-left:4px}
.fs-trend.up2,.fs-trend.up{color:#0a7d32}.fs-trend.down,.fs-trend.down2{color:#c62a2a}.fs-trend.flat{color:#a0a0aa}
.offer.retire{border-style:dashed;background:linear-gradient(135deg,#fff,#f7f7fa)}
.offer.retire:hover{border-color:var(--accent)}
.offer.dilemma{border-color:#d9c46a;background:linear-gradient(135deg,#fffdf4,#fff)}
.offer.dilemma:hover{border-color:#c9a227}

/* timeline */
.timeline{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.tl-head,.tl-row{display:grid;grid-template-columns:52px 1fr 52px 44px 44px 74px;gap:8px;align-items:center;padding:10px 16px}
.tl-head{font-size:10.5px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;background:var(--panel);position:sticky;top:0;z-index:2;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--accent),var(--accent2),transparent) 1}
.tl-body{max-height:640px;overflow-y:auto}
.tl-body::-webkit-scrollbar{width:6px}
.tl-body::-webkit-scrollbar-thumb{background:#d4d4de;border-radius:3px}
.tl-row{border-bottom:1px solid rgba(21,21,30,.05);font-size:14px;transition:background .15s}
.tl-row:hover{background:#fafafc}
.tl-row.new{animation:fadeUp .45s both}
.tl-row.champ{background:linear-gradient(90deg,#fff6d8,#fffdf4 60%,transparent)}
.tl-row.champ:hover{background:linear-gradient(90deg,#ffefc2,#fffdf4 60%,transparent)}
.tl-row .age{font-weight:800;background:var(--panel2);border-radius:9px;text-align:center;padding:6px 0}
.tl-row.champ .age{background:linear-gradient(135deg,#e10600,#ff4d1c);color:#fff;box-shadow:0 4px 10px rgba(225,6,0,.3)}
.tl-row .club{display:flex;align-items:center;gap:8px;min-width:0}
.tl-row .club .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-row .club .cat{font-size:11px;color:var(--muted)}
.tl-row .num{text-align:center;font-weight:700}
.tl-row .num.w{color:#c98f00}.tl-row .num.p{color:#16a34a}
.pos{display:block;text-align:center;font-weight:800;font-size:12.5px;padding:5px 0;border-radius:9px}
.pos.p1{background:linear-gradient(135deg,#ffe066,#f2ae00);color:#4a3000;box-shadow:0 3px 8px rgba(242,174,0,.4)}
.pos.p2{background:linear-gradient(135deg,#fafbfe,#c4cad6);color:#3a4150;box-shadow:inset 0 0 0 1.5px #aab2c0}
.pos.p3{background:linear-gradient(135deg,#f4c396,#d78d4b);color:#4a2800}
.pos.top{background:linear-gradient(135deg,#dcf5e3,#b1e8c0);color:#15803d}
.pos.rest{background:#d9e7fb;color:#2b6cb0}
.tl-row .ev{grid-column:2/-1;font-size:12px;color:#5a5a66;padding:2px 0 4px}
.tl-row .ev.top3{color:#3a3a48;background:var(--panel2);border-radius:8px;padding:5px 10px;margin:2px 0 4px;line-height:2}
.tl-row .ovrcell{text-align:center;font-weight:800;border-radius:8px;padding:5px 0;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(21,21,30,.15)}
.tl-empty{padding:60px 20px;text-align:center;color:#b9b9c2;font-size:14px}

/* ---- móvil: la tabla de trayectoria pasa a tarjetas apiladas ---- */
@media(max-width:640px){
  #career{padding:14px 8px 50px}
  .card{padding:16px}
  .tl-head{display:none}
  .tl-body{max-height:none}
  .tl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:13px 14px}
  .tl-row>.age{flex:0 0 auto;align-self:flex-start;margin-top:2px}
  .tl-row>.club{order:1;flex:1 1 60%;min-width:0}
  .tl-row .club .nm{white-space:normal;font-size:15px}
  .tl-row .club .cat{white-space:normal;line-height:1.35}
  .tl-row>.ovrcell{order:2;width:auto;min-width:40px;padding:5px 11px;margin-left:auto}
  .tl-row>.pos{order:3;flex:0 0 auto;width:auto;padding:5px 11px}
  .tl-row>.num{order:4;flex:0 0 auto;font-size:13px;color:var(--muted)}
  .tl-row>.num.w{color:#c98f00}.tl-row>.num.p{color:#16a34a}
  .tl-row>.vcol::before{content:"🏆 ";font-size:11px}
  .tl-row>.pcol::before{content:"🥉 ";font-size:11px}
  .tl-row>.ev{order:9;flex:1 1 100%;margin-top:2px}
  .f1state{padding:14px 16px;margin-bottom:0}
  .f1state .cols{gap:16px}
  #printHeader .ps{gap:8px 12px}
  /* evitar que la cabecera del piloto ensanche la tarjeta y lo corte todo */
  .driver-head{gap:12px}
  .ovr-badge{width:62px;height:62px;border-radius:15px}
  .ovr-badge .n{font-size:25px}
  .driver-meta{min-width:0}
  .driver-meta .team{font-size:16px}
  .agev{flex-shrink:0}
  .agev .a{font-size:21px}
  .agev .v{font-size:14px}
  .stats-row{gap:6px}
  .stat{padding:8px 2px}
  .stat .v{font-size:18px}
  /* ofertas: que el bloque de estrellas no se corte */
  .offer{gap:10px;padding:13px 12px}
  .offer .dot{width:38px;height:38px}
  .offer .info{min-width:0}
  .offer .name{font-size:15px}
  .offer .perf{font-size:12px;letter-spacing:0}
}

/* panel estado de la F1 */
.f1state{margin-bottom:14px;padding:16px 20px}
.f1state .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){
  .f1state .cols{gap:12px 14px}
}
.f1state h5{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-style:normal}
.f1state .srow{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:4px 6px;border-radius:7px;gap:6px;animation:fsRow .7s both}
.f1state .srow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f1state .srow .xt{color:var(--muted);font-size:11px;flex-shrink:0}
.f1state .srow.me{background:linear-gradient(90deg,rgba(225,6,0,.10),transparent);font-weight:800;color:#b30500}
.f1state .fl{font-size:13px}
.mini-badge{flex-shrink:0;display:inline-block;font-size:9px;font-weight:800;color:#fff;padding:2px 6px;border-radius:6px;letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.55);box-shadow:inset 0 -1px 3px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.55);vertical-align:middle}
@keyframes fsRow{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.f1state .srow .rt2{display:flex;align-items:center;gap:5px;flex-shrink:0}
.mv{font-size:10px;font-weight:900;padding:0 4px;border-radius:5px;letter-spacing:-.5px;flex-shrink:0}
.mv.up{color:#0a7d32;background:#d7f5e0}
.mv.down{color:#c62a2a;background:#fbe6e6}
.mv.eq{color:#b0b0ba}
@keyframes climbUp{0%{transform:translateY(10px);background:rgba(16,163,74,.2)}60%{background:rgba(16,163,74,.12)}100%{transform:none;background:transparent}}
@keyframes dropDown{0%{transform:translateY(-10px);background:rgba(225,6,0,.18)}60%{background:rgba(225,6,0,.1)}100%{transform:none;background:transparent}}
.f1state .srow.mv-up{animation:climbUp 1.2s ease-out both}
.f1state .srow.mv-down{animation:dropDown 1.2s ease-out both}
.hall .hrow .nm .fl{font-size:14px}

/* end modal */
#endModal{display:none;position:fixed;inset:0;top:0;right:0;bottom:0;left:0;background:rgba(21,21,30,.45);backdrop-filter:blur(6px);z-index:50;align-items:center;justify-content:center;padding:20px}
#rankModal{display:none;position:fixed;inset:0;top:0;right:0;bottom:0;left:0;background:rgba(21,21,30,.55);backdrop-filter:blur(6px);z-index:60;align-items:center;justify-content:center;padding:16px}
/* aviso legal: discreto, al pie de la portada */
/* sin animación a propósito: el aviso legal debe verse siempre, no depender de que la animación corra */
#intro p.legal{max-width:520px;margin:22px auto 0;font-size:10.5px;line-height:1.5;color:var(--muted);opacity:.62;animation:none}
#intro p.news{display:none}
.rank-card{background:var(--panel);border-radius:22px;max-width:520px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(21,21,30,.4);animation:fadeUp .4s both}
.rank-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:linear-gradient(135deg,#15151e,#2b0a08 130%);color:#fff}
.rank-head h2{font-size:18px;margin:0}
.rank-x{background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:15px;cursor:pointer}
.rank-tabs.sub{margin-top:-4px}
.rank-tabs.sub button{font-size:11px;padding:5px 11px}
.rank-tabs{display:flex;gap:8px;padding:12px 16px 4px}
.rank-tabs button{flex:1;padding:9px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:11px;font-weight:800;font-size:13px;cursor:pointer}
.rank-tabs button.on{background:var(--accent);color:#fff;border-color:transparent}
.rank-me{padding:6px 16px 0}
.rank-list{padding:8px 16px 18px;overflow-y:auto}
.rank-note{font-size:12px;color:var(--muted);text-align:center;padding:10px 4px 14px;line-height:1.45}
.career-toast{position:fixed;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));z-index:100;max-width:min(88vw,360px);padding:12px 18px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(21,21,30,.94);box-shadow:0 12px 32px rgba(21,21,30,.3);color:#fff;font-size:14px;font-weight:800;text-align:center;line-height:1.4;pointer-events:none;opacity:0;transform:translate(-50%,12px);transition:opacity .18s ease,transform .18s ease}
.career-toast.show{opacity:1;transform:translate(-50%,0)}
.career-toast[data-tone="error"]{background:rgba(176,16,12,.96)}
.rank-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14px}
.rank-row:nth-child(even){background:var(--panel2)}
.rank-row.me{background:rgba(225,6,0,.12);border:1px solid rgba(225,6,0,.38);font-weight:800}
.rank-row .rk{width:34px;color:var(--muted);font-weight:800;font-variant-numeric:tabular-nums}
.rank-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row .g{font-weight:900;font-variant-numeric:tabular-nums}
.end-card{background:var(--panel);border-radius:26px;max-width:620px;width:100%;padding:0 0 34px;text-align:center;max-height:92vh;overflow-y:auto;box-shadow:0 30px 80px rgba(21,21,30,.35);animation:fadeUp .5s both}
.end-hero{background:linear-gradient(135deg,#15151e 0%,#2b0a08 55%,#e10600 140%);border-radius:26px 26px 0 0;padding:30px 34px 22px;margin-bottom:22px;position:relative;overflow:hidden}
.end-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;opacity:.85;
  background:repeating-conic-gradient(#15151e 0% 25%, #fff 0% 50%) 0 0/20px 20px}
.end-hero .flag-line{font-size:24px;letter-spacing:4px}
.end-hero h2{font-size:30px;font-weight:900;color:#fff;margin:8px 0 2px}
.end-hero .legacy{font-size:17px;font-weight:800;letter-spacing:.5px;background:linear-gradient(92deg,#ffce3a,#ffb800,#ffe066);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.end-hero .years{color:rgba(255,255,255,.65);font-size:13px;padding-bottom:8px}
.end-body{padding:0 34px}
.end-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.advbox{margin:2px 0 14px;text-align:center}
.advbox .advtitle{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:6px}
.advbox .advline{font-size:13px;font-weight:700;color:#334}
.advbox .triplecrown{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.5px;color:#7a3b00;
  background:linear-gradient(135deg,#ffdd82,#ffb52e);border:1px solid #e4be3f;border-radius:999px;padding:5px 14px;margin-bottom:7px;
  box-shadow:0 4px 14px rgba(214,164,44,.45)}
.end-stats > div{background:var(--panel2);border-radius:12px;padding:9px 6px}
.end-stats .v{font-size:20px;font-weight:900;line-height:1.1}
.end-stats .k{font-size:9px;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;margin-top:1px}
/* celda dorada: si ganaste algún título; shiny: si ganaste muchos */
.end-stats div.gold{background:linear-gradient(160deg,#ffe6a0 0%,#f3c866 100%);border:1px solid #dfae3c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.end-stats div.gold .v{color:#6f4e00}
.end-stats div.gold .k{color:#7c5e0f}
.end-stats div.shiny{position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 20px rgba(214,164,44,.6)}
.end-stats div.shiny .v{background:linear-gradient(92deg,#6b4a00,#a9770a,#6b4a00);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:goldshift 3s linear infinite}
.end-stats div.shiny::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);
  animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%{left:-70%}60%{left:135%}100%{left:135%}}
@keyframes goldshift{0%{background-position:0% 0}100%{background-position:200% 0}}
/* casilla "Puntos de leyenda": color según la magnitud del legado */
.legend-score{margin-top:10px;margin-bottom:16px;border-radius:14px;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;overflow:hidden;border:1px solid var(--line)}
.legend-score .ls-k{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;opacity:.9}
.legend-score .ls-tier{font-size:15px;font-weight:900;margin-top:1px}
.legend-score .ls-v{font-size:36px;font-weight:900;line-height:1;letter-spacing:-1px}
.legend-score.shiny::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);animation:shine 2.8s ease-in-out infinite}
@media(max-width:520px){
  .end-stats{grid-template-columns:repeat(2,1fr);gap:6px}
  .end-stats > div{padding:7px 4px;border-radius:9px;min-width:0}
  .end-stats .v{font-size:18px}
  .end-stats .k{font-size:8.5px;letter-spacing:.2px}
}
.end-card .shelf{font-size:26px;letter-spacing:5px;margin-bottom:6px;line-height:1.5}
.end-card .verdict{color:#4a4a55;font-size:14.5px;line-height:1.55;margin:14px 0 20px}
.end-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.ea-row{display:flex;gap:10px;justify-content:center;width:100%;max-width:430px;margin:0 auto}
.ea-row .btn{flex:1}
.btn.sm{padding:13px 24px;font-size:15px}
.btn.line{background:transparent;color:var(--text);border:1.5px solid var(--text);box-shadow:none}

/* encabezado imprimible + botón flotante para reabrir el resumen */
.print-only{display:none}
#reopenBtn{position:fixed;right:16px;bottom:16px;z-index:40;display:none;
  border:none;border-radius:999px;padding:12px 20px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#15151e,#33333f);box-shadow:0 8px 20px rgba(21,21,30,.3)}
#printHeader{background:linear-gradient(135deg,#15151e,#2b0a08 60%,#e10600);border-radius:18px;padding:20px 24px;margin-bottom:16px;color:#fff}
#printHeader h2{font-size:24px;font-weight:900;margin-bottom:2px}
#printHeader .pl{font-weight:800;color:#ffce3a;font-style:normal}
#printHeader .ps{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:13px}
#printHeader .ps b{font-size:16px}
@media print{
  @page{margin:12mm}
  body{background:#fff !important}
  #intro,#identity,#endModal,.decision,#reopenBtn,.f1state{display:none !important}
  #career{display:block !important}
  .career-grid{display:block !important}
  #driverCard{margin-bottom:16px}
  .tl-body{max-height:none !important;overflow:visible !important}
  .timeline{box-shadow:none;border:1px solid #ccc}
  .tl-row,.tl-head{break-inside:avoid}
  .print-only{display:block !important}
}
.careermap{margin:4px 0 18px;text-align:left}
.careermap h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:10px;font-style:normal;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 7px}
.cmstint{display:flex;align-items:flex-start;gap:6px;padding:6px 2px;border-bottom:1px solid var(--line)}
.cmstint:last-child{border-bottom:none}
.cmmeta{display:flex;align-items:center;gap:6px;min-width:116px;min-height:24px;flex-shrink:0}
/* las casillas de posición viven en su propia columna: al partirse a la línea siguiente
   quedan alineadas justo bajo la primera casilla (no bajo el logo del equipo) */
.cmcells{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.cmname{font-weight:800;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:118px}
.cmyears{font-size:10.5px;color:var(--muted);font-weight:700;flex-shrink:0}
.cmtit{font-size:10.5px;font-weight:800;background:linear-gradient(135deg,#ffe066,#f2ae00);color:#4a3000;padding:1px 6px;border-radius:5px;flex-shrink:0}
.cmtit.b{background:#dcf5e3;color:#15803d}
.cmdot{width:22px;height:22px;font-size:8px;flex-shrink:0}
.cmcell{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;border-radius:7px;font-weight:800;font-size:12.5px;flex-shrink:0}
.cmcell.p1{background:linear-gradient(135deg,#ffe066,#f2ae00);color:#4a3000}
.cmcell.p2{background:linear-gradient(135deg,#fafbfe,#c4cad6);color:#3a4150;box-shadow:inset 0 0 0 1.5px #aab2c0}
.cmcell.p3{background:linear-gradient(135deg,#f4c396,#d78d4b);color:#4a2800}
.cmcell.top{background:#dcf5e3;color:#15803d}
.cmcell.rest{background:#d9e7fb;color:#2b6cb0}
.cmpeakbadge{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.3px;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6d28d9);padding:2px 9px;border-radius:6px;white-space:nowrap;flex-shrink:0}
/* modo denso para carreras muy largas: celdas y espacios mínimos */
.careermap.dense .cmstint{padding:4px 2px;gap:4px}
.careermap.dense .cmcell{min-width:24px;height:22px;padding:0 4px;font-size:11px}
.cmjun{font-size:11px;color:var(--muted);text-align:center;margin-top:8px}
.hall{margin:0 0 22px;text-align:left}
.hall h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:8px;font-style:normal}
.hall .hrow{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-radius:9px;font-size:13.5px}
.hall .hrow.me{background:linear-gradient(90deg,#fff6d8,#fffdf4);font-weight:800;border:1px solid #f0dfa0}
.hall .hrow .rk{color:var(--muted);width:26px;font-weight:700}
.hall .hrow .nm{flex:1}
.hall .hrow .tt{font-weight:800;color:var(--gold)}
#langToggle{position:fixed;top:12px;right:12px;z-index:60;background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-weight:800;font-size:13px;color:var(--ink);box-shadow:0 3px 10px rgba(20,25,40,.12);cursor:pointer}
#langToggle:hover{background:#fff}
#themeToggle{position:fixed;top:12px;right:70px;z-index:60;background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:999px;width:34px;height:34px;font-size:16px;line-height:1;box-shadow:0 3px 10px rgba(20,25,40,.12);cursor:pointer;display:flex;align-items:center;justify-content:center}
@media print{#langToggle,#themeToggle{display:none}}
/* en la maqueta apilada la tarjeta ocupa todo el ancho: al hacer scroll, los botones
   fijos (idioma/tema) pasarían por encima de la edad/fama. Reservamos esa esquina. */
@media(max-width:980px){ .agev{padding-right:84px} }
@media(max-width:360px){ .agev{padding-right:78px} }

/* ================= MODO OSCURO ================= */
:root[data-theme="dark"]{
  --bg:#14151b; --panel:#1d1f28; --panel2:#262a34; --line:#333743;
  --text:#eceef4; --muted:#9aa0ae; --gold:#e6b325;
  --shadow:0 14px 36px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
[data-theme="dark"] body{background:
  radial-gradient(900px 500px at 85% -5%, rgba(225,6,0,.16), transparent 60%),
  radial-gradient(700px 500px at -10% 100%, rgba(255,122,0,.11), transparent 55%),
  linear-gradient(160deg,#181a22,#0e0f14)}
[data-theme="dark"] #themeToggle,[data-theme="dark"] #langToggle{background:rgba(30,32,40,.94);color:var(--text)}
[data-theme="dark"] #langToggle:hover,[data-theme="dark"] #themeToggle:hover{background:#2a2e38}
[data-theme="dark"] .numplate{background:linear-gradient(135deg,#262a34,#1a1c24)}
/* ofertas y caja de decisión */
[data-theme="dark"] .offer{background:linear-gradient(135deg,#232732,#1c1e27);border-color:#3a4152}
[data-theme="dark"] .offer.retire{background:linear-gradient(135deg,#22242d,#1b1d25)}
[data-theme="dark"] .offer.dilemma{background:linear-gradient(135deg,#2b2720,#211f1a);border-color:#7a6a2e}
[data-theme="dark"] .decision p.outcome{background:linear-gradient(135deg,#2e2a1c,#26241a);border-color:#5a4e2a;color:#f0e6c8}
/* recap de temporada: fondo claro fijo → oscuro en modo noche (si no, texto claro sobre claro = ilegible) */
[data-theme="dark"] #decRecap{background:linear-gradient(135deg,#242834,#1b1e27);border-color:#3a4152}
/* pastillas (fondo claro → oscuro) */
[data-theme="dark"] #teamLine .trole{background:#2a2e38;color:#c4ccda;border-color:#3a4152}
[data-theme="dark"] .offer .role.r2{background:#2a2e38;color:#c4ccda}
[data-theme="dark"] .offer .role.rt{background:#1e2f4d;color:#8db4f5}
[data-theme="dark"] .trend.up,[data-theme="dark"] .otrend.up{background:rgba(18,146,63,.20);color:#4cd07f}
[data-theme="dark"] .trend.flat,[data-theme="dark"] .otrend.flat{background:#2a2e38;color:#9aa0ae}
[data-theme="dark"] .jprofile{background:#20293b;color:#b8c4dd;border-color:#33415e}
[data-theme="dark"] .fit.neu{background:#2a2e38;color:#9aa0ae}
[data-theme="dark"] .fit.good{background:rgba(10,125,50,.22);color:#5fd98a}
[data-theme="dark"] .fit.bad{background:rgba(198,42,42,.22);color:#f19a9a}
/* celdas de posición "resto" (azul claro → oscuro) */
[data-theme="dark"] .pos.rest,[data-theme="dark"] .cmcell.rest{background:#22344d;color:#8db4f5}
/* trayectoria + paneles */
[data-theme="dark"] .tl-row:hover{background:#22242d}
[data-theme="dark"] .tl-row .ev{color:#aab0be}
[data-theme="dark"] .tl-row .ev.top3{color:#d7dbe4;background:var(--panel2)}
[data-theme="dark"] .tl-row.champ{background:linear-gradient(90deg,rgba(230,179,37,.18),transparent 62%)}
[data-theme="dark"] .tl-row.champ:hover{background:linear-gradient(90deg,rgba(230,179,37,.26),transparent 62%)}
[data-theme="dark"] .tl-empty{color:#6b7280}
[data-theme="dark"] .cmstint{border-bottom-color:#2c313c}
[data-theme="dark"] .tl-body::-webkit-scrollbar-thumb,[data-theme="dark"] .country-list::-webkit-scrollbar-thumb{background:#3a3f4a}
[data-theme="dark"] .f1state .srow.me{background:linear-gradient(90deg,rgba(225,6,0,.24),transparent);color:#ff7a72}
/* fila "TÚ" del palmarés: fondo dorado pálido → texto oscuro para que se lea */
[data-theme="dark"] .hall .hrow.me{color:#2a2200;border-color:#c9a94a}
[data-theme="dark"] .hall .hrow.me .rk{color:#6a5410}
[data-theme="dark"] .hall .hrow.me .tt{color:#7a5600}
/* textos oscuros → claros */
[data-theme="dark"] .advbox .advline,[data-theme="dark"] .end-card .verdict{color:#c4ccda}
/* pantalla de identidad: lista de países, matrícula y tarjetas de estilo */
[data-theme="dark"] .numplate span{color:#eceef4}
[data-theme="dark"] .country-list button{color:#c8cdd8}
[data-theme="dark"] .country-list button:hover{border-color:#454b58}
[data-theme="dark"] .country-list button.sel{background:linear-gradient(135deg,#e10600,#ff6a1a);color:#fff}
[data-theme="dark"] .country-list::-webkit-scrollbar-thumb{background:#3a3f4a}
[data-theme="dark"] .style-cards button{background:var(--panel2)}
[data-theme="dark"] .style-cards button.sel{background:linear-gradient(135deg,#e10600,#ff6a1a);border-color:#e10600;color:#fff}
[data-theme="dark"] .style-cards button .d{color:var(--muted)}