/* ============================================================
   FULBO — Sistema de diseño "Matchday / Transmisión deportiva"
   Tema ÚNICO oscuro: la marca es blanca y roja sobre negro, y
   sobre fondo claro el logo y los acentos no funcionan.
   Tipografía condensada de scoreboard (Oswald), fondo de
   noche de estadio, acento césped y color de identidad por liga.
   ============================================================ */

/* Fuente de scoreboard EMBEBIDA. Antes el diseño dependía de Bahnschrift,
   que solo existe en Windows: en cualquier celular los títulos caían a la
   fuente genérica del sistema y se perdía toda la identidad. Oswald
   (licencia OFL, ~21 KB, incluye acentos y ñ) viaja con el juego, así que
   se ve igual de bien en la compu, en Android y en iPhone. Es una fuente
   variable: un solo archivo cubre de 400 a 700. */
@font-face{
  font-family:"Oswald";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../assets/oswald.woff2") format("woff2");
}

:root{
  /* neutrales del logo: negro puro, sin sesgo de color */
  --bg:#0b0b0d; --bg2:#101014; --panel:#16161b; --panel2:#1e1e25;
  --line:#2e2e37; --line-soft:#24242c;
  --text:#f2f2f5; --muted:#a2a2ae; --dim:#75757f;
  /* MARCA: el rojo del logo. Identidad y acción principal. */
  --brand:#e81820; --brand-2:#c0121a;
  /* acento de cancha (verde) + interactivo (reflector) + trofeo */
  --turf:#33c26e; --turf-2:#26a35c; --floodlight:#37b6e6; --gold:#f4c451;
  /* semánticos: SEPARADOS de la marca. El rojo de marca no significa derrota;
     la derrota es un rosa más claro que nunca se usa para acciones. */
  --win:#33c26e; --draw:#f4c451; --loss:#ff6f91;
  /* color de identidad de la liga activa (lo pisa cada pantalla) */
  --lac:#e81820;
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --shadow-sm:0 3px 12px rgba(0,0,0,.35);
  --radius:14px; --radius-sm:10px;
  --font-display:"Oswald","Bahnschrift","Arial Narrow",system-ui,sans-serif;
  --font-body:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0b0b0d; --bg2:#101014; --panel:#16161b; --panel2:#1e1e25;
  --line:#2e2e37; --line-soft:#24242c; --text:#f2f2f5; --muted:#a2a2ae; --dim:#75757f;
  --brand:#e81820; --brand-2:#c0121a;
  --turf:#33c26e; --turf-2:#26a35c; --floodlight:#37b6e6; --gold:#f4c451;
  --win:#33c26e; --draw:#f4c451; --loss:#ff6f91; --lac:#e81820;
  --shadow:0 10px 34px rgba(0,0,0,.55); --shadow-sm:0 3px 12px rgba(0,0,0,.4);
}


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--lac) 13%, var(--bg)) 0%, var(--bg) 58%),
    var(--bg);
  color:var(--text); font-family:var(--font-body); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
#app{max-width:1000px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.hidden{display:none !important}
h1,h2,h3,.disp{font-family:var(--font-display);letter-spacing:.4px;text-wrap:balance}
h2{font-size:22px;margin:0 0 10px;font-weight:600}
h3{font-size:13px;margin:0 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;font-weight:600}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:12px}
.up{color:var(--win)} .down{color:var(--loss)}
::selection{background:color-mix(in srgb, var(--lac) 40%, transparent)}

/* ---------- Topbar / scoreboard ---------- */
#topbar{
  display:flex;align-items:center;gap:12px;padding:9px 16px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--lac)), color-mix(in srgb, var(--bg) 88%, transparent));
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;letter-spacing:2px;
  font-size:19px;cursor:pointer;white-space:nowrap;color:var(--text)}
.brand img{width:26px;height:26px;border-radius:6px;flex:0 0 auto}
.brand span::first-letter{color:var(--brand)}
.hud{display:flex;gap:7px;flex-wrap:wrap;flex:1;font-size:12.5px;align-items:center}
.hud .chip{background:color-mix(in srgb, var(--panel2) 88%, var(--lac));border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.hud .chip b{color:var(--text);font-variant-numeric:tabular-nums}
.topbar-actions{display:flex;gap:6px}

/* ---------- Layout ---------- */
#screen{padding:20px 16px 70px;flex:1}
.center{max-width:660px;margin:0 auto}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 92%,var(--bg)));
  border:1px solid var(--line);border-radius:var(--radius);padding:17px;box-shadow:var(--shadow-sm);position:relative}
.card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:var(--lac);opacity:0;transition:opacity .2s}
.card.accent::before{opacity:.9}
.sep{height:1px;background:var(--line);margin:12px 0}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);font-size:11.5px;color:var(--muted)}

/* ---------- Botones ---------- */
.btn{font:inherit;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);padding:11px 16px;
  background:var(--panel2);color:var(--text);border:1px solid var(--line);
  transition:transform .05s,filter .15s,border-color .15s;line-height:1.1}
.btn:hover{filter:brightness(1.13);border-color:color-mix(in srgb,var(--lac) 50%,var(--line))}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--floodlight);outline-offset:2px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;
  box-shadow:0 2px 10px color-mix(in srgb,var(--brand) 30%,transparent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-accent{background:linear-gradient(180deg,var(--floodlight),color-mix(in srgb,var(--floodlight) 70%,#000));color:#03202b;border-color:transparent}
.btn-warn{background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 75%,#000));color:#241a00;border-color:transparent}
/* guardar: verde, siempre. Es la acción "segura" y no se confunde con la
   principal (roja de marca) ni con la destructiva (contorneada). */
.btn-save{background:linear-gradient(180deg,var(--turf),var(--turf-2));color:#04160c;border-color:transparent;font-weight:700}
.btn-save:hover{filter:brightness(1.1)}
/* destructivo: contorneado, para que nunca se lea como la acción principal */
.btn-bad{background:transparent;color:var(--loss);border-color:var(--loss)}
.btn-bad:hover{background:color-mix(in srgb,var(--loss) 14%,transparent);border-color:var(--loss)}
.btn-ghost{background:transparent}
.btn-block{display:block;width:100%}
.btn-lg{padding:14px 20px;font-size:16px;font-family:var(--font-display);letter-spacing:.5px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Inputs ---------- */
input,select{font:inherit;background:var(--bg2);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;width:100%}
input:focus,select:focus{outline:2px solid var(--floodlight);outline-offset:1px;border-color:var(--floodlight)}
label.fld{display:block;margin-bottom:12px}
label.fld .lbl{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.8px}
.optiongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.opt{padding:11px 10px;text-align:center;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel2);cursor:pointer;transition:.12s}
.opt:hover{border-color:color-mix(in srgb,var(--lac) 45%,var(--line))}
.opt.sel{border-color:var(--lac);box-shadow:0 0 0 2px color-mix(in srgb,var(--lac) 30%,transparent) inset;background:color-mix(in srgb,var(--lac) 12%,var(--panel2))}
.opt b{font-family:var(--font-display);letter-spacing:.4px}
.opt small{display:block;color:var(--muted);font-size:11px;margin-top:3px}

/* ---------- Título / menú ---------- */
/* El logo es blanco y rojo sobre negro: se le da su propia placa oscura para
   que se lea igual en tema claro y en oscuro. */
.hero{text-align:center;padding:34px 12px 26px;position:relative;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% -10%, #1a1a1f 0%, #0b0b0d 62%);
  border:1px solid #26262e}
.hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(232,24,32,.05) 46px 92px),
    radial-gradient(120% 90% at 50% -20%, rgba(232,24,32,.16), transparent 62%);}
.hero > *{position:relative;z-index:1}
.hero-logo{display:block;width:min(340px,74vw);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 26px rgba(232,24,32,.28))}
.flag-lg{font-size:30px;line-height:1;vertical-align:middle}
.natflag{font-size:13px;vertical-align:middle}
.hero .logo{font-family:var(--font-display);font-size:66px;font-weight:700;letter-spacing:5px;line-height:.9;color:#fff}
.hero .sub{color:#9a9aa6;margin-top:10px;letter-spacing:1.4px;font-size:12.5px;text-transform:uppercase}
.hero .sub b{color:var(--brand);font-weight:700}
.menu-btns{max-width:360px;margin:26px auto 0;display:flex;flex-direction:column;gap:12px}

/* ---------- Escudos ---------- */
.crest{display:inline-block;vertical-align:middle;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* ---------- Atributos ---------- */
.attr{display:flex;align-items:center;gap:10px;margin:7px 0}
.attr .name{width:118px;font-size:12.5px;color:var(--muted)}
.attr .bar{flex:1;height:9px;background:var(--bg2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.attr .fill{height:100%;border-radius:6px;transition:width .4s ease}
.attr .val{width:32px;text-align:right;font-weight:700;font-family:var(--font-display);font-variant-numeric:tabular-nums}
.ovr{font-family:var(--font-display);font-size:46px;font-weight:700;line-height:.9;font-variant-numeric:tabular-nums}
.ovr-wrap{text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}

/* ---------- Tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
th,td{padding:8px 8px;text-align:center;border-bottom:1px solid var(--line-soft)}
th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:.7px}
td.l,th.l{text-align:left}
tbody tr{transition:background .12s}
tbody tr:hover td{background:color-mix(in srgb,var(--lac) 6%,transparent)}
tr.me td{background:color-mix(in srgb,var(--lac) 16%,transparent);font-weight:700}
tr.hl td{background:color-mix(in srgb,var(--floodlight) 10%,transparent)}
td b{font-family:var(--font-display)}
.pos-badge{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}

/* ---------- Feed / noticias ---------- */
.feed{display:flex;flex-direction:column;gap:8px}
.news{padding:10px 12px;border-left:3px solid var(--line);background:var(--panel2);border-radius:0 8px 8px 0;font-size:13px;line-height:1.45}
.news.good{border-color:var(--win)} .news.bad{border-color:var(--loss)} .news.gold{border-color:var(--gold)}
.news .t{color:var(--dim);font-size:10.5px;margin-bottom:2px;letter-spacing:.5px;font-family:var(--font-display)}

/* ---------- Scoreboard de partido ---------- */
.scoreboard{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 14px;
  background:radial-gradient(120% 140% at 50% 0%, color-mix(in srgb,var(--lac) 16%,var(--panel2)), var(--panel2));
  border-radius:12px;border:1px solid var(--line)}
.scoreboard .team{flex:1;text-align:center;font-weight:700;font-family:var(--font-display);letter-spacing:.4px;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px}
.scoreboard .score{font-family:var(--font-display);font-size:38px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:96px;text-align:center;letter-spacing:1px}
.commentary{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-top:12px}
.cm{font-size:13px;padding:7px 11px;border-radius:8px;background:var(--bg2);border:1px solid var(--line-soft)}
.cm b{font-family:var(--font-display)}
.cm.goal{border-color:var(--win);background:color-mix(in srgb,var(--win) 12%,var(--bg2));font-weight:600}
.cm.mine{border-color:var(--floodlight)}
.cm.big{border-color:var(--gold)}

/* ---------- Decisiones ---------- */
.decision{border:1px solid var(--line);border-radius:12px;padding:17px;
  background:linear-gradient(180deg,var(--panel),var(--panel2))}
.decision .q{font-size:15px;margin-bottom:13px;line-height:1.55}
.decision .choices{display:flex;flex-direction:column;gap:9px}
.decision .choices .btn{text-align:left}

/* ---------- Modal / toast ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(3,8,7,.72);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;backdrop-filter:blur(3px)}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:470px;width:100%;box-shadow:var(--shadow);overflow:hidden;animation:pop .18s ease}
.modal-title{padding:15px 18px;font-family:var(--font-display);font-weight:600;font-size:17px;border-bottom:1px solid var(--line)}
.modal-body{padding:16px 18px;font-size:14px;max-height:60vh;overflow:auto;line-height:1.55}
.modal-actions{padding:12px 18px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line);flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--lac);
  padding:12px 18px;border-radius:10px;z-index:60;box-shadow:var(--shadow);font-size:14px;max-width:90%;animation:pop .18s ease}

/* ---------- KV / pills / stat tiles ---------- */
.kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line-soft);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv b{font-family:var(--font-display);font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.up{background:color-mix(in srgb,var(--win) 20%,transparent);color:var(--win)}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}
.stat-tile{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 8px;text-align:center}
.stat-tile .n{font-family:var(--font-display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.stat-tile .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:4px}

/* ---------- Selector de liga / club ---------- */
.league-card,.club-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--lac);
  border-radius:var(--radius-sm);padding:12px 14px;color:var(--text);font:inherit;transition:.14s}
.league-card:hover,.club-card:hover{transform:translateX(3px);border-color:var(--lac);box-shadow:var(--shadow-sm)}
.league-card:focus-visible,.club-card:focus-visible{outline:2px solid var(--floodlight);outline-offset:2px}
.lc-flag{font-size:30px;line-height:1}
.lc-info,.cc-info{flex:1;min-width:0}
.lc-info b,.cc-info b{font-family:var(--font-display);font-size:16px;letter-spacing:.3px;display:block}
.lc-info small,.cc-info small{color:var(--muted);font-size:11.5px}
.lc-crests{display:flex;gap:2px;align-items:center}
.cc-crest{display:flex} .cc-crest .crest{width:38px;height:44px}
.cc-rating{font-family:var(--font-display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.league-head{border-left:4px solid var(--lac)}
.lh-title{font-family:var(--font-display);font-size:20px;letter-spacing:.4px}

/* ---------- Penales (arco interactivo) ---------- */
.pk-goal{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);
  gap:6px;padding:12px;border-radius:10px;
  background:linear-gradient(180deg,#1c8a4e,#186f41);
  border:3px solid rgba(255,255,255,.75);box-shadow:inset 0 0 0 8px rgba(255,255,255,.06);
  min-height:150px;margin:10px 0;
}
.pk-zone{
  border:2px dashed rgba(255,255,255,.45);border-radius:8px;background:rgba(255,255,255,.06);
  color:#fff;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.5px;
  cursor:pointer;transition:.14s;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;
}
.pk-zone:hover{background:rgba(255,255,255,.22);border-color:#fff;transform:scale(1.03)}
.pk-zone:focus-visible{outline:2px solid var(--floodlight);outline-offset:2px}
/* ---------- Gráficos de carrera ---------- */
.chart{margin:0 0 14px;padding:0}
.chart figcaption{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.4px;
  color:var(--text);margin-bottom:6px}
.chart svg{width:100%;height:auto;max-height:210px;display:block;overflow:visible}
.chart circle,.chart rect{transition:opacity .15s ease}
.chart g:hover circle,.chart g:hover rect{opacity:.78;cursor:default}

/* ---------- Fixture de próximos partidos ---------- */
.fixture{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.fx-row{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);
  transition:border-color .18s ease,background .18s ease}
.fx-row:hover{border-color:color-mix(in srgb,var(--lac) 45%,var(--line))}
.fx-row.next{border-color:var(--lac);background:color-mix(in srgb,var(--lac) 10%,var(--panel2))}
.fx-when{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.5px;
  text-align:center;padding:3px 0;border-radius:5px;background:var(--line);color:var(--fg)}
.fx-row.next .fx-when{background:var(--lac);color:#fff}
.fx-comp{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fx-comp b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-comp small{font-size:11px;color:var(--muted)}
.fx-rival{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.fx-loc{font-size:11px;font-weight:400;color:var(--muted)}
@media (max-width:520px){
  .fx-row{grid-template-columns:40px 1fr;gap:8px}
  .fx-rival{grid-column:2;font-size:12px}
}
.pk-board{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.pk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pk-row .pk-label{min-width:110px;font-weight:700;display:flex;align-items:center;gap:6px}
.pk-dot{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;border:2px solid var(--line);background:var(--bg2)}
.pk-dot.goal{background:color-mix(in srgb,var(--win) 30%,transparent);border-color:var(--win)}
.pk-dot.miss{background:color-mix(in srgb,var(--loss) 30%,transparent);border-color:var(--loss)}
.pk-dot.pend{opacity:.4}

/* ---------- Clásico / rivalidad ---------- */
.clasico-banner{
  display:block;text-align:center;font-family:var(--font-display);font-weight:700;letter-spacing:1.5px;
  padding:8px 12px;border-radius:8px;margin-bottom:10px;color:#fff;text-transform:uppercase;font-size:14px;
  background:linear-gradient(100deg,#c0392b,#e67e22);
  box-shadow:0 3px 14px rgba(224,60,50,.4);animation:clasicoPulse 1.6s ease-in-out infinite}
@keyframes clasicoPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@media (prefers-reduced-motion: reduce){.clasico-banner{animation:none}}

/* ---------- Sala de trofeos ---------- */
.trophy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px}
.trophy{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center;position:relative;transition:.2s}
.trophy.won{border-color:var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 14%,var(--panel2)),var(--panel2));box-shadow:0 4px 16px color-mix(in srgb,var(--gold) 18%,transparent)}
.trophy .tr-icon{font-size:30px;line-height:1;filter:grayscale(.85);opacity:.42;
  display:flex;align-items:flex-end;justify-content:center;min-height:62px}
.trophy .tr-icon svg,.trophy .tr-icon img{max-height:60px;width:auto}
.trophy.won .tr-icon{filter:none;opacity:1;
  filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--gold) 35%,transparent))}
.trophy .tr-count{font-family:var(--font-display);font-size:26px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.trophy.won .tr-count{color:var(--gold)}
.trophy .tr-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
/* trofeo en la pantalla de campeón */
.champ-card{background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--gold) 14%,var(--panel)),var(--panel));
  border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.champ-trophy{display:flex;justify-content:center;padding:8px 0 4px}
.champ-trophy svg,.champ-trophy img{filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--gold) 45%,transparent));
  animation:trophyIn .6s cubic-bezier(.2,.9,.3,1.2)}
@keyframes trophyIn{0%{transform:scale(.4) translateY(20px);opacity:0}60%{transform:scale(1.08)}100%{transform:none;opacity:1}}

/* ---------- Cajón de navegación (drawer) ---------- */
.drawer-wrap{position:fixed;inset:0;z-index:70}
.drawer-backdrop{position:absolute;inset:0;background:rgba(3,6,10,.55);opacity:0;transition:opacity .2s;backdrop-filter:blur(2px)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);
  background:linear-gradient(180deg,var(--panel),var(--bg2));border-left:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .22s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;overflow:hidden}
.drawer-wrap.open .drawer-backdrop{opacity:1}
.drawer-wrap.open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:17px}
.drawer-x{background:var(--panel2);border:1px solid var(--line);color:var(--text);width:34px;height:34px;
  border-radius:9px;cursor:pointer;font-size:15px;line-height:1}
.drawer-x:hover{border-color:var(--lac)}
.drawer-body{flex:1;overflow-y:auto;padding:10px 12px 24px}
.drawer-sec{margin-top:14px}
.drawer-sec:first-child{margin-top:4px}
.drawer-title{font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);
  margin:0 6px 6px;font-weight:600}
.drawer-items{display:flex;flex-direction:column;gap:4px}
.drawer-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:10px;padding:11px 12px;
  color:var(--text);font:inherit;font-size:14.5px;transition:.12s}
.drawer-item:hover{background:var(--panel2);border-color:var(--line)}
.drawer-item .di-ic{font-size:18px;width:22px;text-align:center;flex:0 0 auto}
.drawer-item.danger{color:var(--loss)}
.drawer-item.primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;font-weight:600}

/* ---------- Filas del ranking global (avatar + bandera + nivel) ---------- */
.rk-user{display:flex;align-items:center;gap:8px;min-width:0}
.rk-user img{border-radius:7px;flex:0 0 auto}
.rk-uinfo{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rk-uinfo > span:first-child{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.rk-lvl{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold);
  font-family:var(--font-display);font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;letter-spacing:.3px}

/* ---------- Comparación cara a cara ---------- */
.cmp-heads{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:12px}
.cmp-side{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0;
  padding:12px 8px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.cmp-side.me{border-color:color-mix(in srgb,var(--lac) 55%,var(--line));
  background:color-mix(in srgb,var(--lac) 8%,var(--panel2))}
.cmp-side img{border-radius:12px}
.cmp-side b{display:inline-flex;align-items:center;gap:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-vs{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--dim);letter-spacing:1px}
.cmp-grid{display:flex;flex-direction:column;gap:2px}
.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  padding:7px 4px;border-bottom:1px dashed var(--line-soft);font-size:14px}
.cmp-row:last-child{border-bottom:none}
.cmp-l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:center}
.cmp-v{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.cmp-v.win{color:var(--win)}
.cmp-v:first-child{text-align:right}
.cmp-v:last-child{text-align:left}

/* ---------- Botón "volver" prominente ---------- */
.btn-back{background:var(--panel2);border-color:var(--line);font-weight:600;
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start}
.btn-back:hover{border-color:var(--lac);background:var(--panel)}
.topbar-menu-hint{display:none}

/* ---------- Carta estilo FIFA ---------- */
.fifacard{border-radius:16px;padding:14px 14px 12px;color:var(--fc-ink);
  background:linear-gradient(158deg,var(--fc-b),var(--fc-a) 78%);
  border:2px solid var(--fc-line);box-shadow:0 12px 34px rgba(0,0,0,.5);
  position:relative;overflow:hidden;font-family:var(--font-display);margin:0 auto}
.fifacard::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 78% 8%,rgba(255,255,255,.22),transparent 55%)}
.fifacard > *{position:relative;z-index:1}
.fc-top{display:flex;align-items:flex-start;gap:6px;min-height:96px}
.fc-badge{display:flex;flex-direction:column;align-items:center;line-height:1;padding-top:4px;min-width:52px}
.fc-ovr{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.fc-pos{font-size:14px;font-weight:700;letter-spacing:1px;margin-top:1px}
.fc-meta{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:7px}
.fc-meta svg{border-radius:2px}
.fc-avatar{flex:1;display:flex;justify-content:center;align-items:flex-end;align-self:stretch}
.fc-avatar img{filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));border-radius:8px}
.fc-name{text-align:center;font-size:19px;font-weight:700;letter-spacing:.5px;
  padding:5px 0 6px;margin-top:2px;border-top:2px solid color-mix(in srgb,var(--fc-ink) 35%,transparent);
  border-bottom:2px solid color-mix(in srgb,var(--fc-ink) 35%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-attrs{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:8px 0 6px}
.fc-attr{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.fc-attr b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.fc-attr span{font-size:9.5px;font-weight:600;letter-spacing:.5px;opacity:.85}
.fc-season{border-top:1px dashed color-mix(in srgb,var(--fc-ink) 30%,transparent);padding-top:7px}
.fc-season-t{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;opacity:.7;text-align:center;margin-bottom:4px}
.fc-season-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.fc-seas{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.fc-seas .fc-ic{font-size:13px;font-family:var(--font-body)}
.fc-seas b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.fc-seas .fc-l{font-size:8.5px;letter-spacing:.4px;opacity:.8;text-transform:uppercase}
.fifacard.tier-special{box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--fc-line) 60%,transparent) inset}

/* ---------- Personalización del avatar ---------- */
.avatar-preview{display:flex;justify-content:center;padding:6px 0}
.avatar-preview img{background:radial-gradient(120% 100% at 50% 0%,var(--panel2),var(--bg2));
  border:1px solid var(--line);border-radius:14px}
.cosmo-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.cosmo-row .lbl{min-width:64px;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.cosmo-cyc{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 6px}
.cosmo-cyc button{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);font-size:15px;cursor:pointer;line-height:1}
.cosmo-cyc button:hover{border-color:var(--lac)}
.cosmo-cyc .cyc-val{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cosmo-swatches{flex:1;display:flex;flex-wrap:wrap;gap:5px}
.cosmo-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.cosmo-swatch.sel{border-color:var(--text);box-shadow:0 0 0 2px color-mix(in srgb,var(--lac) 45%,transparent)}
@media (max-width:520px){.cosmo-row .lbl{min-width:52px}}

/* ---------- Cancha táctica ---------- */
.pitch{position:relative;
  background:repeating-linear-gradient(0deg,#1c8a4e 0 34px,#1a7f48 34px 68px);
  border:2px solid rgba(255,255,255,.22);border-radius:12px;padding:16px 8px;
  display:flex;flex-direction:column;gap:6px;min-height:352px;justify-content:space-between;
  box-shadow:inset 0 0 0 22px rgba(255,255,255,.045);overflow:hidden}
.pitch::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:rgba(255,255,255,.22)}
.pitch::after{content:"";position:absolute;left:50%;top:calc(50% - 34px);width:68px;height:68px;border:2px solid rgba(255,255,255,.22);border-radius:50%;transform:translateX(-50%)}
.pitch-line{display:flex;justify-content:space-around;align-items:center;position:relative;z-index:1;gap:6px}
.pitch-chip{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px}
.pc-ovr{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:14px;color:#04160c;
  box-shadow:0 3px 8px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.55)}
.pc-name{font-size:10px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-pos{font-size:9px;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.5px}

/* ---------- Animaciones ---------- */
.fadein{animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* actualizaciones suaves en vivo (sin re-render brusco) */
.commentary{scroll-behavior:smooth}
.cm{transition:background .3s ease}
.cm.cm-new{animation:cmIn .34s cubic-bezier(.2,.7,.3,1)}
@keyframes cmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bar-fill{transition:width .55s cubic-bezier(.4,0,.2,1)}
.score{transition:color .3s ease}
.score.bump{animation:scoreBump .45s ease}
@keyframes scoreBump{0%{transform:scale(1)}28%{transform:scale(1.28);color:var(--lac)}100%{transform:scale(1)}}
.live-min{transition:color .3s ease}
.dom-fill{transition:width .5s cubic-bezier(.4,0,.2,1)}
.fit-fill{transition:width .5s linear, background .4s ease}
.xi-row{transition:background .3s ease,opacity .3s ease}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}

/* ---------- Ficha del partido (estadísticas + mapa de calor) ---------- */
.statsplit{display:grid;grid-template-columns:1fr 160px;gap:16px;align-items:start;margin-top:8px}
.statsplit .heatwrap{display:flex;flex-direction:column;align-items:center}
.heat{width:100%;max-width:150px;height:auto;border-radius:8px;display:block}
@media (max-width:520px){
  .statsplit{grid-template-columns:1fr}
  .statsplit .heatwrap{margin-top:6px}
  .heat{max-width:190px}
}

/* ---------- Arquetipos de jugador ---------- */
.archgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.opt.arch{text-align:left;padding:12px}
.opt.arch b{display:block;font-size:14px;margin-bottom:2px}
.opt.arch small{margin-top:4px;line-height:1.35}
.opt.arch .arch-tag{display:inline-block;margin:0 0 4px;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--lac) 18%,var(--panel));border:1px solid var(--line);
  color:var(--text);font-size:10.5px;letter-spacing:.3px;text-transform:uppercase}

/* ---------- Ranuras de partidas guardadas ---------- */
.slots{display:flex;flex-direction:column;gap:10px}
.slot-card{display:grid;grid-template-columns:34px 42px 1fr auto;gap:12px;align-items:center;text-align:left;
  font:inherit;cursor:pointer;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--panel2);border:1px solid var(--line);color:var(--text);transition:.14s}
.slot-card:hover:not(:disabled){border-color:var(--lac);filter:brightness(1.08)}
.slot-card:disabled{opacity:.5;cursor:default}
.slot-card.vacia{grid-template-columns:34px 1fr}
.slot-num{font-family:var(--font-display);font-size:19px;font-weight:700;text-align:center;
  color:var(--muted);background:var(--panel);border-radius:8px;padding:5px 0}
.slot-card:not(.vacia) .slot-num{color:var(--lac)}
.slot-crest{display:flex;align-items:center;justify-content:center}
.slot-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.slot-info b{font-size:14px}
.slot-info small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-x{font-size:12px;color:var(--muted);padding:5px 9px;border-radius:7px;border:1px solid var(--line)}
.slot-x:hover{color:var(--loss);border-color:var(--loss)}
@media (max-width:520px){
  .slot-card{grid-template-columns:28px 34px 1fr auto;gap:8px;padding:10px}
  .slot-info small{font-size:11px}
}

/* las opciones también son foco de teclado */
.opt:focus-visible{outline:2px solid var(--floodlight);outline-offset:2px}
button.opt{font:inherit;color:inherit;width:100%;display:block}

/* ---------- Logros ---------- */
.ach-bar{height:8px;border-radius:5px;background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.ach-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--brand));transition:width .4s ease}
.ach-list{display:flex;flex-direction:column;gap:8px}
.ach{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:10px 12px;
  border-radius:var(--radius-sm);background:var(--panel2);border:1px solid var(--line);opacity:.55}
.ach.done{opacity:1;border-color:color-mix(in srgb,var(--gold) 45%,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,var(--panel2)),var(--panel2))}
.ach-icon{font-size:26px;text-align:center;line-height:1}
.ach-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.ach-info b{font-size:14px}
.ach-info small{font-size:11.5px;color:var(--muted)}
.ach-info .ach-when{color:var(--gold)}

/* ============================================================
   PANTALLAS CHICAS (celular y tablet)
   El juego tiene mucha densidad: 14 botones en el hub, 8 chips
   arriba y tablas de 9 columnas. Acá se reordena todo eso para
   que nada se apile ni se salga de la pantalla.
   ============================================================ */

/* --- tablet: dos columnas siguen entrando, pero más justas --- */
@media (max-width:900px){
  #screen{padding:16px 12px 64px}
  .card{padding:15px}
  .btnrow{gap:8px}
}

/* --- celular --- */
@media (max-width:620px){
  #screen{padding:13px 10px 60px}
  h2{font-size:19px}
  .card{padding:13px;border-radius:12px}

  /* barra superior: una sola línea que se desliza, en vez de tres apiladas */
  #topbar{gap:8px;padding:7px 10px}
  .brand{font-size:16px;letter-spacing:1px}
  .brand img{width:22px;height:22px}
  .hud{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .hud::-webkit-scrollbar{display:none}
  .hud .chip{flex:0 0 auto;font-size:11.5px;padding:3px 8px}
  .topbar-actions .btn{padding:8px 10px}

  /* botoneras: grilla pareja de 2, con la acción principal a todo el ancho */
  .btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .btnrow .btn{width:100%;padding:11px 8px;font-size:13.5px;line-height:1.15;
    display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px}
  .btnrow .btn-lg{grid-column:1 / -1;font-size:15px;padding:14px 10px}
  /* las botoneras de pocas opciones no se parten al medio */
  .decision .choices .btn,.choices .btn-block{grid-column:1 / -1}

  /* tablas: se deslizan de costado con una pista visual, y más compactas */
  .tablewrap,[style*="overflow-x:auto"]{position:relative}
  table{font-size:12.5px}
  th,td{padding:7px 6px}
  th:first-child,td:first-child{padding-left:8px}

  /* marcador: los nombres largos ya no empujan al resultado */
  .scoreboard{gap:8px;padding:14px 8px}
  .scoreboard .team{font-size:12px;gap:4px;min-width:0}
  .scoreboard .team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .scoreboard .score{font-size:30px;min-width:64px}

  /* fichas de liga y club */
  .league-card,.club-card{gap:10px;padding:11px 12px}
  .lc-flag{font-size:24px}
  .lc-info b,.cc-info b{font-size:14.5px}
  .lc-crests{display:none}            /* los escuditos de muestra no aportan acá */
  .cc-crest .crest{width:30px;height:34px}
  .cc-rating{font-size:21px}
  .lh-title{font-size:17px}

  /* grillas de opciones: dos por fila siempre entran */
  .optiongrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}
  .opt{padding:9px 8px;font-size:13px}
  .opt small{font-size:10.5px}
  .archgrid{grid-template-columns:1fr}

  .stat-tiles{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
  .trophy-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}

  /* relato y feed: más alto útil en pantalla chica */
  .commentary{max-height:210px}
  .cm{font-size:12.5px;padding:6px 9px}

  /* penales: el arco ocupa el ancho y los botones se pueden tocar */
  .pk-goal{min-height:132px;gap:5px;padding:9px}
  .pk-zone{font-size:11px}
  .pk-row .pk-label{min-width:0;flex:1 0 100%}

  /* modal pegado a los bordes pero sin tocarlos */
  .modal-backdrop{padding:12px;align-items:flex-end}
  .modal{max-height:86vh;overflow:auto}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%}

  /* hero del menú */
  .hero{padding:26px 10px 20px}
  .hero-logo{width:min(300px,80vw)}
  .menu-btns{max-width:100%}

  /* barras de atributos: la etiqueta no se come el ancho */
  .attr .name{width:84px;font-size:11.5px}
  .attr .val{font-size:12px}

  /* logros y partidas guardadas */
  .ach{grid-template-columns:38px 1fr;gap:9px;padding:9px 10px}
  .ach-icon{font-size:22px}
  .ach-info b{font-size:13px}
}

/* --- celulares angostos --- */
@media (max-width:380px){
  .btnrow{grid-template-columns:1fr}
  .optiongrid{grid-template-columns:1fr 1fr}
  .scoreboard .score{font-size:26px;min-width:54px}
  table{font-size:11.5px}
  th,td{padding:6px 4px}
}

/* pistas de que una tabla se puede deslizar de costado */
@media (max-width:620px){
  .scrollx{position:relative}
  .scrollx::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--panel))}
}

/* en pantallas táctiles los hover que desplazan molestan */
@media (hover:none){
  .league-card:hover,.club-card:hover{transform:none}
  .btn:hover{filter:none}
  .opt:hover{border-color:var(--line)}
}