/* ---------- Tokens ---------- */
/* Un videojuego de móvil, no una web con tema de fútbol: display deportiva,
   cuerpo legible, mono para los números. Los colores del club se aplican
   desde el front (data-club) y tiñen escudo, chip y acentos secundarios. */
:root {
  color-scheme: dark;
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-0: .74rem;  --fs-1: .86rem;  --fs-2: 1rem;  --fs-3: 1.15rem;  --fs-4: 1.5rem;  --fs-5: 2.1rem;  --fs-6: 3rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px;
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 20px;
  --elev-1: 0 2px 6px rgba(0,0,0,.28); --elev-2: 0 10px 28px rgba(0,0,0,.35); --elev-3: 0 18px 60px rgba(0,0,0,.45);
  --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 120ms; --t-base: 220ms; --t-slow: 420ms;
  --z-bar: 40; --z-tabbar: 60; --z-sheet: 70; --z-notice: 80;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --club-primary: #335267; --club-secondary: #e8ecef; --club-accent: #95f33d;

  /* Paleta de la Biblia Visual v1. El mundo pasa de verde-negro a carbón y
     azul noche: el verde deja de ser el aire que se respira y pasa a ser lo
     que significa algo. Regla del kit: 80% oscuro, 15% neutros, 5% color. */
  --bg: #080c0f;            /* Carbon Black */
  --panel: #111a20;         /* Surface */
  --panel2: #172229;        /* Surface Elevated */
  --line: #23313a;
  --line-soft: #1a2630;
  --text: #eaeef0;          /* Off White */
  --muted: #929da3;

  /* Color semántico. Verde = progreso y acción. Rojo = rivalidad y conflicto.
     Dorado = recuerdo y legado. No se usan para decorar. */
  --accent: #95f33d;        /* 90 Green */
  --accent-soft: rgba(149,240,64,.14);
  --rival: #e43f3f;         /* Rival Red */
  --legacy: #d7a93d;        /* Legacy Gold */
  --injury: #ff5a54;        /* Injury Red */

  /* Alias heredados, para no reescribir mil declaraciones de golpe. */
  --accent2: #a6d07f;
  --warn: #d7a93d;
  --danger: #ff5a54;
  --blue: #7fa6bd;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background: radial-gradient(circle at 26% -12%, #16303d 0, transparent 38rem), radial-gradient(circle at 88% 8%, #12232c 0, transparent 30rem), var(--bg); color:var(--text); font-family: var(--font-body), Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { cursor:pointer; }
.shell { max-width: 1240px; margin: 0 auto; padding: 28px 22px 42px; }
.brand { display:flex; align-items:end; gap:14px; margin-bottom:20px; }
.brand h1 { margin:0; font-size:clamp(1.7rem, 4vw, 2.9rem); letter-spacing:-.055em; line-height:.9; }
.brand .tag { color:var(--accent); font-size:.82rem; text-transform:uppercase; letter-spacing:.16em; font-weight:800; }
.scorebar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border:1px solid var(--line); background:rgba(14,22,28,.94); box-shadow:var(--shadow); border-radius:18px; padding:16px 20px; margin-bottom:18px; }
.team { font-weight:800; font-size:1.05rem; }
.team.away { text-align:right; }
.score { text-align:center; padding:0 22px; }
.score strong { font-size:2rem; letter-spacing:.05em; }
.minute { display:block; color:var(--accent); font-size:.78rem; font-weight:900; letter-spacing:.1em; margin-top:3px; }
.layout { display:grid; grid-template-columns:minmax(0, 1fr) 310px; gap:18px; }
.card { border:1px solid var(--line); background:linear-gradient(180deg, rgba(19,30,38,.97), rgba(12,20,25,.97)); border-radius:18px; box-shadow:var(--shadow); }
.main { min-height:610px; overflow:hidden; }
.scene-head { padding:22px 24px 10px; }
.eyebrow { color:var(--accent); font-weight:900; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.scene-head h2 { margin:7px 0 8px; font-size:1.65rem; letter-spacing:-.035em; }
.scene-head p { color:#cad2d8; margin:0; line-height:1.55; }
.pitch { margin:14px 24px 22px; height:205px; border:2px solid rgba(242,247,237,.6); border-radius:12px; position:relative; overflow:hidden; background: repeating-linear-gradient(90deg, #3e631c 0, #3e631c 12.5%, #3e5f20 12.5%, #3e5f20 25%); }
.pitch::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.04),rgba(0,0,0,.05)); }
.midline { position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(255,255,255,.55); }
.circle { width:76px; height:76px; border:2px solid rgba(255,255,255,.5); border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.boxline { position:absolute; right:-2px; top:22%; width:18%; height:56%; border:2px solid rgba(255,255,255,.5); }
.dot { position:absolute; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:0.75rem; font-weight:900; border:2px solid rgba(255,255,255,.85); box-shadow:0 4px 13px rgba(0,0,0,.35); z-index:2; }
.dot.you { background:#171e22; color:var(--accent); left:61%; top:52%; }
.dot.rival { background:#7d2630; left:71%; top:48%; }
.dot.mateo { background:#e9eef2; color:#131b20; left:81%; top:29%; }
.dot.ball { width:14px; height:14px; background:white; color:black; border:none; left:64.5%; top:52%; }
.pitch[data-scene="off_ball"] .dot.you { left:57%; top:63%; }
.pitch[data-scene="off_ball"] .dot.rival { left:62%; top:50%; }
.pitch[data-scene="transition"] .dot.you { left:48%; top:58%; }
.pitch[data-scene="transition"] .dot.rival { left:70%; top:35%; }
.pitch[data-scene="transition"] .dot.mateo { left:72%; top:68%; }
.pitch[data-scene="finishing"] .dot.you { left:78%; top:55%; }
.pitch[data-scene="finishing"] .dot.rival { left:84%; top:46%; }
.pitch[data-scene="finishing"] .dot.mateo { left:75%; top:28%; }
.actions { padding:0 24px 24px; display:grid; gap:10px; }
.action { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:15px 16px; border-radius:13px; border:1px solid var(--line); background:#0e161c; color:var(--text); text-align:left; transition:.16s ease; }
.action:hover { border-color:var(--accent2); transform:translateY(-1px); background:#111c23; }
.action-title { display:flex; gap:9px; align-items:center; font-weight:850; }
.action-meta { color:var(--muted); font-size:.82rem; margin-top:4px; }
.risk { font-weight:900; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; }
.risk.good { color:var(--accent); }.risk.neutral { color:var(--warn); }.risk.bad { color:var(--danger); }
.skill-pill { display:inline-block; margin-left:7px; font-size:0.75rem; color:var(--blue); border:1px solid rgba(128,191,255,.35); border-radius:999px; padding:2px 7px; }
.sidebar { display:grid; gap:18px; align-content:start; }
.stats-card { padding:18px; }
.stats-card h3 { margin:0 0 14px; font-size:1rem; }
.playerline { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.playerline strong { font-size:1.18rem; }.level { color:var(--accent); font-weight:900; }
.metric { margin:12px 0; }.metric-row { display:flex; justify-content:space-between; color:#d0d7dc; font-size:.84rem; margin-bottom:6px; }
.bar { height:8px; border-radius:99px; background:#080d10; overflow:hidden; border:1px solid #202d36; }.fill { height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent)); border-radius:99px; }
.orbs { display:flex; gap:8px; }.orb { width:15px; height:15px; border-radius:50%; background:var(--blue); box-shadow:0 0 13px rgba(128,191,255,.55); }.orb.empty { background:#222c32; box-shadow:none; border:1px solid #444f56; }
.mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }.mini { background:#0b1115; border:1px solid #202e37; border-radius:10px; padding:10px; }.mini span { display:block; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }.mini strong { display:block; margin-top:3px; }
.log-card { padding:16px 18px; }.log-card h3 { margin:0 0 12px; font-size:.93rem; }.log { display:grid; gap:9px; max-height:300px; overflow:auto; }.log-entry { font-size:.78rem; color:#b7c1c8; border-left:2px solid #33434e; padding-left:9px; }.log-entry.goal_for { border-color:var(--accent); color:#e7fad6; }.log-entry.goal_against { border-color:var(--danger); color:#ffd0cd; }.log-entry b { color:#fff; margin-right:5px; }
.roll-panel, .resolution, .halftime, .final-panel, .intro { padding:30px; }
.roll-panel h2, .resolution h2, .halftime h2, .final-panel h2, .intro h2 { margin:0 0 8px; font-size:1.7rem; letter-spacing:-.04em; }.muted { color:var(--muted); }
.dice-row { display:flex; gap:13px; align-items:center; margin:26px 0; flex-wrap:wrap; }.die { display:grid; place-items:center; line-height:0; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }.math { font-size:1.1rem; color:#c2cacf; }.total { font-size:1.65rem; font-weight:950; color:var(--accent); }.grade { font-weight:950; font-size:1.1rem; margin:12px 0 0; }.grade.disaster,.grade.failure { color:var(--danger); }.grade.mixed { color:var(--warn); }.grade.success,.grade.spectacular { color:var(--accent); }
.buttons { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }.btn { border:1px solid var(--line); border-radius:11px; padding:11px 15px; font-weight:850; color:var(--text); background:#141f26; text-decoration:none; }.btn:hover { border-color:var(--accent2); }.btn.primary { background:var(--accent); color:#11191f; border-color:var(--accent); }.btn.blue { background:#15334b; border-color:#2c6792; }.btn.ghost { background:transparent; }.btn:disabled { opacity:.35; cursor:not-allowed; }
.xp-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }.xp-chip { background:#0c1419; color:#afc2ce; border:1px solid #2a3943; border-radius:999px; padding:5px 9px; font-size:.75rem; }
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }.choice { min-height:130px; border:1px solid var(--line); background:#0d1419; color:var(--text); border-radius:14px; padding:17px; text-align:left; }.choice:hover { border-color:var(--accent); }.choice strong { display:block; margin-bottom:7px; }.choice span { color:var(--muted); line-height:1.45; font-size:.83rem; }
.final-score { font-size:3rem; font-weight:950; letter-spacing:-.06em; margin:12px 0; }.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }.summary-box { border:1px solid var(--line); background:#0b1216; padding:13px; border-radius:12px; }.summary-box span { color:var(--muted); display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }.summary-box strong { font-size:1.25rem; margin-top:4px; display:block; }
.progress-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }.progress-panel { border-top:1px solid var(--line); padding-top:16px; }.progress-panel h3 { margin:0 0 12px; font-size:.95rem; }.progress-item { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(53,68,39,.45); color:#c9d1d7; font-size:.82rem; }.progress-item strong { color:var(--accent); }
.intro { max-width:720px; margin:70px auto 0; }.intro p { color:#c7d0d6; line-height:1.6; }.seedbox { display:flex; gap:9px; margin-top:24px; }.seedbox input { flex:1; background:#0a1014; color:var(--text); border:1px solid var(--line); border-radius:11px; padding:12px 14px; outline:none; }.seedbox input:focus { border-color:var(--accent); }.principle { border-left:3px solid var(--accent); padding:9px 0 9px 14px; margin:22px 0; color:#dde4e8; }
@media (max-width: 880px) { .layout { grid-template-columns:1fr; }.sidebar { grid-template-columns:1fr 1fr; }.main { min-height:auto; }.summary-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px) { .shell { padding:18px 12px 30px; }.scorebar { padding:13px 12px; }.team { font-size:.8rem; }.score strong { font-size:1.55rem; }.layout,.sidebar,.choice-grid,.progress-columns { grid-template-columns:1fr; }.scene-head,.actions,.roll-panel,.resolution,.halftime,.final-panel,.intro { padding-left:18px; padding-right:18px; }.pitch { margin-left:18px; margin-right:18px; height:175px; }.action { grid-template-columns:1fr; }.risk { justify-self:start; }.summary-grid { grid-template-columns:1fr 1fr; } }

/* v0.3: cadenas, táctica y relaciones */
.context-row { display:flex; gap:10px; flex-wrap:wrap; padding:0 24px 14px; color:#a0abb3; font-size:.77rem; }
.context-row span { border:1px solid #2b3a44; border-radius:999px; padding:5px 9px; background:#0b1217; }
.modifier { margin:0 24px 4px; padding:10px 13px; border-radius:11px; display:flex; gap:9px; align-items:center; font-size:.78rem; }
.modifier strong { letter-spacing:.05em; }
.modifier span { color:#c9d1d6; }
.modifier.adv { border:1px solid rgba(173,238,112,.35); background:rgba(90,125,57,.16); color:var(--accent); }
.modifier.dis { border:1px solid rgba(255,176,93,.35); background:rgba(147,88,32,.15); color:var(--warn); }
.tactical-pill { display:inline-block; margin-left:5px; padding:2px 7px; border-radius:999px; font-size:0.75rem; letter-spacing:.03em; }
.tactical-pill.obey { color:#d9f5bf; border:1px solid rgba(173,238,112,.28); }
.tactical-pill.disobey { color:#ffc579; border:1px solid rgba(255,176,93,.3); }
.action-note { margin-top:5px; color:#9ea8af; font-size:.75rem; }
.action-note.relation { color:#a9c6d8; }
.bonus-breakdown { display:flex; gap:7px; flex-wrap:wrap; margin:17px 0 -5px; }
.bonus-breakdown span { border:1px solid #2d3b45; border-radius:999px; padding:5px 9px; color:#bec7cd; font-size:.75rem; background:#0b1217; }
.bonus-breakdown .positive { color:#d9f5bf; border-color:rgba(173,238,112,.3); }
.bonus-breakdown .negative { color:#ffc579; border-color:rgba(255,176,93,.3); }
.feedback { margin-top:12px; border-radius:10px; padding:10px 12px; font-size:.82rem; line-height:1.45; }
.feedback.coach { border:1px solid #464e53; background:#12181c; color:#d5dadd; }
.feedback.mateo { border:1px solid #274b6c; background:#0d1d2a; color:#c8e5ff; }
.chain-callout { margin-top:18px; padding:13px 14px; border:1px solid rgba(173,238,112,.28); background:rgba(96,139,56,.12); border-radius:11px; display:flex; flex-direction:column; gap:3px; }
.chain-callout strong { color:var(--accent); }
.chain-callout span { color:#bac3c9; font-size:.82rem; }
.status-block { margin-top:10px; display:flex; justify-content:space-between; gap:10px; font-size:.76rem; color:#afb8be; border-top:1px solid rgba(56,70,43,.55); padding-top:9px; }
.status-block strong { color:#d9e0e4; }
.order-card { padding:15px 17px; }
.order-card p { margin:7px 0 11px; color:#c9d1d6; font-size:.82rem; line-height:1.45; }
.order-meter { display:flex; justify-content:space-between; font-size:0.75rem; border-top:1px solid #2b3a44; padding-top:9px; color:#a0aab1; }
.order-meter.good strong { color:var(--accent); }.order-meter.bad strong { color:var(--warn); }
.coach-speech { margin:16px 0; padding:15px; border-left:3px solid var(--warn); background:#131719; color:#e7ecef; line-height:1.55; }
.summary-box small { display:block; margin-top:4px; color:var(--muted); font-size:0.75rem; }
.consequences { margin:22px 0; border-top:1px solid var(--line); padding-top:18px; }
.consequences h3 { margin:0 0 12px; font-size:.96rem; }
.consequence { display:grid; grid-template-columns:90px 1fr; gap:12px; border:1px solid var(--line); border-radius:11px; padding:11px 12px; margin:8px 0; font-size:.8rem; }
.consequence strong { color:#fff; }.consequence span { color:#bec7cd; line-height:1.45; }
.consequence.good { border-color:rgba(173,238,112,.28); }.consequence.bad { border-color:rgba(255,107,99,.32); }.consequence.neutral { border-color:#3b4349; }
.log-entry.coach { border-color:var(--warn); color:#e5d4b1; }.log-entry.relationship { border-color:var(--blue); color:#cfe8ff; }
@media (max-width: 620px) { .consequence { grid-template-columns:1fr; gap:4px; }.context-row,.modifier { margin-left:18px; margin-right:18px; padding-left:0; padding-right:0; }.modifier { padding:10px 12px; } }

/* v0.4 · bucle de carrera */
.career-shell { max-width:1220px; }
.career-intro { max-width:790px; }
.career-topbar { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:0 0 18px; }
.career-topbar > div { background:#0b1217; border:1px solid var(--line); border-radius:11px; padding:10px 12px; }
.career-topbar span,.resource-pair span,.role-banner span,.points-banner span,.end-stats span { display:block; color:var(--muted); font-size:0.69rem; letter-spacing:.08em; text-transform:uppercase; }
.career-topbar strong { display:block; margin-top:3px; font-size:1rem; }
.notice { margin:-6px 0 16px; border:1px solid rgba(173,238,112,.28); background:rgba(98,140,59,.12); color:#e8f7d9; padding:10px 13px; border-radius:10px; font-size:.82rem; }
.career-main { min-height:650px; }
.story-screen,.training-screen,.loadout-screen,.development-screen,.career-end { padding:30px; }
.story-screen h2,.training-screen h2,.loadout-screen h2,.development-screen h2,.career-end h2 { margin:0 0 10px; font-size:1.85rem; letter-spacing:-.04em; }
.story-screen p,.training-screen p,.loadout-screen p,.development-screen p,.career-end p { color:#c7d0d6; line-height:1.58; }
.story-quote { margin:22px 0; padding:17px 18px; background:#12171a; border-left:3px solid var(--warn); color:#e9edef; font-style:italic; line-height:1.55; }
.story-choices { grid-template-columns:repeat(3,1fr); }
.ap-strip { margin:18px 0; display:flex; justify-content:space-between; padding:10px 13px; background:#0b1216; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:.72rem; letter-spacing:.08em; }
.ap-strip strong { color:var(--accent); letter-spacing:.2em; }
.training-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.training-card { border:1px solid var(--line); background:#0d1419; color:var(--text); border-radius:13px; padding:14px; text-align:left; display:grid; grid-template-columns:42px 1fr; gap:11px; }
.training-card:hover:not(:disabled) { border-color:var(--accent); transform:translateY(-1px); }
.training-card:disabled { opacity:.42; }
.training-icon { font-size:1.55rem; }
.training-card strong,.training-card span,.training-card small { display:block; }
/* La tarjeta es una rejilla de dos columnas con cuatro hijos: sin decir dónde
   va cada uno, la descripción caía en la columna del icono (42px) y se partía
   letra a letra. El icono ocupa su columna entera y el texto, la otra. */
.training-icon { grid-column:1; grid-row:1 / span 3; align-self:start; }
.training-card strong { grid-column:2; grid-row:1; }
.training-card small { grid-column:2; grid-row:2; margin:4px 0 6px; line-height:1.45; }
.training-card em { grid-column:2; grid-row:3; font-style:normal; color:#acc4d4; font-size:.78rem; }
.training-card span { color:var(--muted); font-size:.78rem; margin:5px 0 8px; line-height:1.4; }
.training-card small { color:#acc4d4; }
.next-block { margin-top:20px; padding:16px; border:1px solid rgba(173,238,112,.25); background:rgba(84,122,49,.10); border-radius:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.next-block strong { color:var(--accent); }.next-block span { color:var(--muted); flex:1; min-width:200px; }
.playerline small { display:block; color:var(--muted); font-size:0.75rem; margin-top:3px; }
.resource-pair { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:10px 0; }
.resource-pair > div { background:#0b1216; border:1px solid #202e37; border-radius:9px; padding:8px; }
.resource-pair strong { font-size:1.05rem; color:var(--accent); }
.bar.morale .fill { background:linear-gradient(90deg,#8d78ff,#d9a8ff); }
.relations-mini { display:grid; gap:7px; margin-top:12px; font-size:0.75rem; }
.relations-mini div { display:flex; justify-content:space-between; border-top:1px solid rgba(56,70,43,.45); padding-top:7px; color:#afb8be; }
.relations-mini b { color:#dce3e7; }
.attrs-card { padding:15px 17px; }.attrs-card h3 { margin:0 0 10px; font-size:.9rem; }
.attr-compact { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.attr-compact div { display:flex; justify-content:space-between; background:#0b1216; border-radius:7px; padding:6px 8px; font-size:0.75rem; }.attr-compact span { color:var(--muted); }.attr-compact b { color:#fff; }
.log-entry.training { border-color:#5f7888; }.log-entry.progress { border-color:var(--accent); }.log-entry.match { border-color:var(--blue); }.log-entry.story { border-color:var(--warn); }
.log-entry strong,.log-entry span { display:block; }.log-entry strong { color:#e9edf0; margin:1px 0 2px; }.log-entry span { color:#a0aab0; line-height:1.35; }
.role-banner { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:#0b1217; border:1px solid var(--line); border-radius:11px; margin:18px 0; }
.role-banner strong { color:var(--accent); }
.loadout-screen h3 { margin:20px 0 9px; }.loadout-screen h3 small { color:var(--muted); margin-left:6px; }
.skill-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.skill-grid.compact { grid-template-columns:1fr 1fr; }
.skill-card { border:1px solid var(--line); background:#0b1216; color:var(--text); border-radius:11px; padding:12px; text-align:left; display:flex; justify-content:space-between; gap:9px; }
.skill-card.selected { border-color:rgba(173,238,112,.6); background:rgba(84,122,48,.14); }.skill-card strong,.skill-card span { display:block; }.skill-card span { color:var(--muted); font-size:0.75rem; margin-top:4px; line-height:1.35; }.skill-card small { white-space:nowrap; color:#a9c6d8; }
.points-banner { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }.points-banner > div { background:#0b1216; border:1px solid var(--line); border-radius:11px; padding:13px; }.points-banner strong { font-size:1.45rem; color:var(--accent); display:block; }.points-banner small { color:var(--muted); display:block; margin-top:4px; }
.development-list { display:grid; gap:7px; }.dev-row { display:grid; grid-template-columns:150px 1fr 90px; gap:12px; align-items:center; border:1px solid rgba(56,70,43,.6); border-radius:10px; padding:9px 10px; }.dev-row > div:first-child { display:flex; justify-content:space-between; }.dev-row span { color:#dde2e5; }.dev-row small { color:var(--muted); display:block; margin-top:4px; font-size:0.75rem; }
.reaction-banner { margin:12px 0 18px; padding:12px 14px; border:1px solid #31547a; background:#0b1e2d; color:#cee7ff; border-radius:10px; line-height:1.45; }
.level-up { padding:13px 14px; margin:15px 0; border:1px solid rgba(173,238,112,.38); border-radius:10px; background:rgba(104,147,64,.14); color:#e8f9d9; }
.end-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:8px; margin:20px 0; }.end-stats > div { background:#0b1216; border:1px solid var(--line); border-radius:10px; padding:11px; }.end-stats strong { display:block; font-size:1.2rem; margin-top:3px; }
.style-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }.style-tags span { border:1px solid #334652; background:#0c1318; color:#c2d5e1; border-radius:999px; padding:6px 10px; font-size:.77rem; }
.timeline { display:grid; gap:9px; margin:14px 0 22px; }.timeline > div { display:grid; grid-template-columns:42px 1fr; gap:10px; }.timeline > div > b { color:var(--accent); }.timeline section { border-left:2px solid #33434e; padding-left:12px; }.timeline section strong { color:#e7ecf0; }.timeline section p { margin:3px 0 0; font-size:.78rem; color:var(--muted); }
@media (max-width:880px){ .career-topbar { grid-template-columns:repeat(3,1fr); }.training-grid,.skill-grid,.skill-grid.compact { grid-template-columns:1fr; }.end-stats { grid-template-columns:repeat(3,1fr); }.dev-row { grid-template-columns:120px 1fr 85px; } }
@media (max-width:620px){ .career-topbar { grid-template-columns:1fr 1fr; }.story-choices,.points-banner { grid-template-columns:1fr; }.story-screen,.training-screen,.loadout-screen,.development-screen,.career-end { padding:20px 17px; }.dev-row { grid-template-columns:1fr; }.end-stats { grid-template-columns:1fr 1fr; } }

/* v0.5 demo additions */
.career-topbar { grid-template-columns:repeat(6,1fr); }
.choice small { display:block; margin-top:8px; color:#818c93; font-size:0.75rem; line-height:1.4; }
.choice:disabled { opacity:.38; cursor:not-allowed; border-color:var(--line); }
.choice:disabled:hover { border-color:var(--line); }
.role-banner { gap:12px; flex-wrap:wrap; }
.role-banner small { color:var(--muted); font-size:.76rem; width:100%; }
@media (max-width:880px){ .career-topbar { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .career-topbar { grid-template-columns:1fr 1fr; } }


/* v0.6 · mercado, economía y equipamiento */
.career-topbar { grid-template-columns:repeat(7,1fr); }
.market-teaser,.equipment-banner { margin-top:16px; border:1px solid #33434e; background:#0b1216; border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.market-teaser strong,.market-teaser span,.equipment-banner span,.equipment-banner strong,.equipment-banner small { display:block; }
.market-teaser span,.equipment-banner small { color:var(--muted); font-size:.75rem; margin-top:3px; }
.equipment-banner > div > span { color:var(--muted); font-size:0.69rem; letter-spacing:.09em; }
.equipment-banner strong { color:var(--accent); margin-top:3px; }
.market-screen { padding:30px; }
.market-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.market-head h2 { margin:0 0 8px; font-size:1.85rem; letter-spacing:-.04em; }
.market-head p { color:#c7d0d6; line-height:1.55; margin:0; max-width:720px; }
.wallet { min-width:120px; border:1px solid rgba(173,238,112,.32); background:rgba(91,133,51,.13); border-radius:12px; padding:11px 14px; text-align:right; }
.wallet span { display:block; color:var(--muted); font-size:0.69rem; letter-spacing:.09em; }
.wallet strong { display:block; color:var(--accent); font-size:1.35rem; margin-top:3px; }
.market-screen h3 { margin:24px 0 10px; }
.market-screen h3 small { color:var(--muted); font-weight:400; margin-left:6px; }
.market-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.market-card { border:1px solid var(--line); background:#0c1317; border-radius:13px; padding:14px; display:flex; flex-direction:column; min-height:225px; }
.market-card.owned { border-color:rgba(173,238,112,.35); }
.market-card-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.market-card-top .tier { color:#a9c6d8; font-size:0.69rem; text-transform:uppercase; letter-spacing:.08em; }
.market-card-top strong { color:var(--accent); }
.market-card h4 { margin:12px 0 5px; font-size:1.02rem; }
.market-card p { color:var(--muted); font-size:.78rem; line-height:1.45; margin:0 0 10px; }
.item-effect { border-left:2px solid var(--accent2); padding-left:9px; color:#d9e2e8; font-size:.76rem; line-height:1.4; margin-bottom:10px; }
.item-req { color:var(--warn); font-size:0.75rem; margin:0 0 9px; }
.item-owned { color:#a9c6d8; font-size:0.75rem; margin:0 0 9px; }
.market-card .btn { margin-top:auto; width:100%; }
.inventory-block { margin-top:26px; border-top:1px solid var(--line); padding-top:17px; }
.inventory-block h3 { margin-top:0; }.inventory-block h4 { margin:16px 0 8px; font-size:.78rem; color:#b9c3c9; text-transform:uppercase; letter-spacing:.07em; }
.inventory-list { display:grid; gap:7px; }
.inventory-row { display:flex; justify-content:space-between; gap:12px; align-items:center; border:1px solid #2b3942; background:#0b1115; border-radius:10px; padding:10px 11px; }
.inventory-row.equipped { border-color:rgba(173,238,112,.5); background:rgba(82,119,47,.12); }
.inventory-row strong,.inventory-row span { display:block; }.inventory-row span { color:var(--muted); font-size:0.75rem; margin-top:3px; }
.equipment-roll { color:#cbf0a8!important; border-color:rgba(169,236,106,.35)!important; }
@media (max-width:880px){ .career-topbar { grid-template-columns:repeat(4,1fr); }.market-grid { grid-template-columns:1fr; } }
@media (max-width:620px){ .career-topbar { grid-template-columns:1fr 1fr; }.market-screen { padding:20px 17px; }.market-head,.market-teaser,.equipment-banner,.inventory-row { align-items:stretch; flex-direction:column; }.wallet { text-align:left; } }

/* v0.7 · build completa + especializaciones */
.equipment-build { align-items:stretch; }
.equipment-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; flex:1; }
.gear-slot { border:1px solid #293740; background:#090e12; border-radius:10px; padding:9px 10px; }
.gear-slot span { display:block; color:#e9eff3; font-size:.76rem; font-weight:700; }
.gear-slot small { display:block; color:var(--muted); font-size:0.75rem; line-height:1.35; margin-top:4px; }
.specialization-head { margin-top:28px; border-top:1px solid var(--line); padding-top:20px; }
.specialization-head h3 { margin:0 0 5px; }
.specialization-head p { margin:0; color:var(--muted); font-size:.8rem; }
.spec-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.spec-card { border:1px solid var(--line); background:#0a1014; border-radius:14px; padding:14px; min-width:0; }
.spec-card.unlocked { border-color:rgba(173,238,112,.42); box-shadow:inset 0 0 0 1px rgba(173,238,112,.06); }
.spec-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.spec-top h4 { margin:2px 0 0; font-size:1.08rem; }
.spec-top > strong { color:var(--accent); font-size:.75rem; white-space:nowrap; }
.spec-sub { color:#a9c6d8; font-size:0.69rem; text-transform:uppercase; letter-spacing:.08em; }
.spec-card > p { color:var(--muted); font-size:0.75rem; line-height:1.45; min-height:62px; }
.spec-bar { margin:10px 0 12px; height:7px; }
.spec-status { color:var(--accent); font-size:0.75rem; padding:8px 0; }
.spec-requirement { color:#c5cdd2; font-size:0.75rem; line-height:1.35; min-height:35px; margin-bottom:8px; }
.talent-track { display:grid; gap:7px; margin-top:14px; }
.talent-line { width:2px; height:8px; background:#2b3942; margin:0 auto; }
.talent-node { border:1px solid #2b3942; background:#090e11; border-radius:10px; padding:10px; }
.talent-node.owned { border-color:rgba(173,238,112,.45); background:rgba(94,134,56,.11); }
.talent-node strong,.talent-node span,.talent-node small { display:block; }
.talent-node strong { font-size:.78rem; color:#eef2f5; }
.talent-node span { color:var(--muted); font-size:0.75rem; line-height:1.4; margin-top:4px; }
.talent-node small { color:#939fa7; font-size:0.75rem; margin-top:6px; }
.mini-btn { width:100%; margin-top:8px; font-size:0.75rem; padding:7px 8px; white-space:normal; }
@media (max-width:1050px){ .spec-grid { grid-template-columns:1fr; } }
@media (max-width:620px){ .equipment-slots { grid-template-columns:1fr; } }
.build-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:620px){ .build-actions { width:100%; } .build-actions .btn { flex:1; } }

/* v0.8 · temporada sistémica */
.season-shell{max-width:1380px}.season-intro{max-width:980px}.season-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.season-feature-grid>div{border:1px solid var(--line);background:#0a1014;border-radius:13px;padding:14px}.season-feature-grid strong{display:block;color:var(--accent);font-size:1.7rem}.season-feature-grid span{color:var(--muted);font-size:0.75rem}.season-topbar{grid-template-columns:repeat(7,1fr)}
.season-nav{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 16px}.season-nav button{background:#090e11;border:1px solid var(--line);color:#a9b2b8;border-radius:9px;padding:8px 12px;cursor:pointer}.season-nav button.active{border-color:rgba(173,238,112,.5);color:var(--accent);background:rgba(100,137,65,.12)}
.next-match-card{display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid #33434e;background:#0b1115;border-radius:14px;padding:16px;margin:14px 0}.next-match-card span{font-size:0.69rem;color:var(--muted);letter-spacing:.09em}.next-match-card h3{margin:5px 0;font-size:1.35rem}.next-match-card h3 b{color:var(--muted);font-size:.8rem}.next-match-card small{color:#9fa9b0}.role-pill{border:1px solid rgba(173,238,112,.35);color:var(--accent);padding:9px 11px;border-radius:9px;font-size:0.75rem;font-weight:800;white-space:nowrap}.objective-card{border-left:3px solid #a9c6d8;background:#0a1720;border-radius:9px;padding:12px 14px;margin:12px 0 16px}.objective-card>span{display:block;color:#a9c6d8;font-size:0.69rem;letter-spacing:.09em}.objective-card>strong{display:block;margin-top:4px}.objective-card p{margin:5px 0;color:#c8cfd4;font-size:.78rem}.objective-card small{color:#838e96}.season-event{border:1px solid rgba(236,187,91,.35);background:rgba(98,69,17,.12);border-radius:14px;padding:16px;margin:15px 0}.season-event h3{margin:5px 0}.season-event p{color:#c8cfd4}.section-head{display:flex;justify-content:space-between;margin-top:20px}.section-head h3{margin:0}.section-head p{color:var(--muted);font-size:.78rem}.dashboard-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.mini-table{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}.mini-table-head{display:flex;justify-content:space-between}.mini-table-head button{background:none;border:0;color:#a9c6d8;cursor:pointer}.mini-row{display:grid;grid-template-columns:32px 1fr 42px;gap:8px;padding:8px;border-bottom:1px solid #162027}.mini-row.me{background:rgba(107,147,70,.12);color:var(--accent)}
.full-table{margin:18px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}.table-row{display:grid;grid-template-columns:35px minmax(140px,1fr) repeat(7,42px) 52px;gap:4px;align-items:center;padding:8px 10px;border-bottom:1px solid #162027;font-size:0.75rem}.table-row i{font-style:normal;text-align:center;color:#a9b3ba}.table-row strong{text-align:right}.table-row.me{background:rgba(107,147,70,.14);color:var(--accent)}.table-head{background:#0b1115;color:#818c93;font-size:0.69rem;text-transform:uppercase;letter-spacing:.06em}.fixture-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.fixture{display:grid;grid-template-columns:1fr 42px 1fr;gap:8px;align-items:center;border:1px solid #26323a;border-radius:8px;padding:8px;font-size:0.75rem}.fixture span:last-child{text-align:right}.fixture b{text-align:center;color:#eef2f5}.fixture.mine{border-color:rgba(173,238,112,.45);background:rgba(107,147,70,.09)}
.squad-table{border:1px solid var(--line);border-radius:12px;overflow:auto;margin-top:16px}.squad-row{display:grid;grid-template-columns:minmax(150px,1fr) 44px repeat(7,48px) 85px;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid #162027;min-width:780px;font-size:0.75rem}.squad-row i{font-style:normal;text-align:center;color:#a6b0b7}.squad-row strong{text-align:right;font-size:0.75rem}.squad-row.head{background:#0b1115;color:#818c93;text-transform:uppercase;font-size:0.69rem}.squad-row.key{background:rgba(87,128,181,.07)}.season-stat-grid{grid-template-columns:repeat(4,1fr)}.leader-list{display:grid;gap:6px;margin:10px 0}.leader-list>div{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:9px 10px;border:1px solid #25323b;border-radius:9px}.leader-list b{color:#818c93}.leader-list strong{color:var(--accent)}.mini-gear{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}.mini-gear span{font-size:0.75rem;color:#a7b1b7;background:#090e11;border-radius:6px;padding:5px}.loadout-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.loadout-skill{width:100%;margin-bottom:7px;cursor:pointer}.season-page{padding:26px}.season-page>h2{font-size:1.8rem;margin:.25rem 0}.develop-grid{display:grid;gap:7px;margin-top:16px}.develop-row{display:grid;grid-template-columns:165px 1fr 80px;gap:10px;align-items:center;border:1px solid #28353d;border-radius:9px;padding:9px}.develop-row span{display:block;color:var(--muted);font-size:0.75rem}.scorebar{display:grid;grid-template-columns:90px 1fr 90px;gap:8px;align-items:center;border:1px solid var(--line);background:#0a1014;border-radius:12px;padding:10px 14px;margin:12px 0 16px}.scorebar>div:first-child,.scorebar>div:last-child{text-align:center}.scorebar span{display:block}.scorebar small{color:var(--muted)}.scorebar .teams{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}.scorebar .teams span:last-child{text-align:right}.scorebar .teams strong{font-size:1.45rem;color:var(--accent)}
@media(max-width:900px){.season-feature-grid{grid-template-columns:1fr 1fr}.season-topbar{grid-template-columns:repeat(4,1fr)}.fixture-grid{grid-template-columns:1fr}.loadout-columns{grid-template-columns:1fr}.table-row{grid-template-columns:30px minmax(130px,1fr) repeat(3,38px) 45px}.table-row i:nth-of-type(n+4){display:none}.season-stat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.season-topbar{grid-template-columns:1fr 1fr}.next-match-card{align-items:flex-start;flex-direction:column}.season-page{padding:18px 14px}.develop-row{grid-template-columns:1fr}.season-feature-grid{grid-template-columns:1fr 1fr}.scorebar{grid-template-columns:60px 1fr 60px}.scorebar .teams{gap:5px;font-size:0.75rem}}

/* v0.9 · creador, guardado, contratos y mercado de fichajes */
.creator-card{max-width:980px;margin:24px auto;padding:28px}.creator-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.creator-steps span{font-size:.78rem;padding:7px 10px;border:1px solid var(--line,#2b3550);border-radius:999px;opacity:.55}.creator-steps span.active{opacity:1;border-color:#8ca8ff}.creator-steps span.done{opacity:.8}.creator-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.creator-fields label,.creator-slider label{display:flex;flex-direction:column;gap:7px;font-size:.85rem}.creator-fields input,.creator-review input{background:#10181f;border:1px solid #313d5b;color:inherit;border-radius:10px;padding:12px}.creator-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 22px}.creator-options.wide{grid-template-columns:repeat(2,minmax(0,1fr))}.creator-option{background:#121a2a;border:1px solid #24313c;color:inherit;border-radius:14px;padding:16px;text-align:left;min-height:94px;cursor:pointer}.creator-option strong{display:block;font-size:1rem;margin-bottom:6px}.creator-option span{font-size:.82rem;opacity:.72;line-height:1.35}.creator-option.selected{border-color:#88a5ff;box-shadow:0 0 0 2px rgba(136,165,255,.12) inset;background:#18233a}.creator-slider{margin:18px 0}.creator-slider input{width:100%}.creator-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.creator-review{display:flex;flex-direction:column;gap:8px;background:#101725;border:1px solid #24313c;border-radius:14px;padding:16px;margin-top:18px}.creator-review strong{font-size:1.25rem}.save-slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.save-slot,.save-slot-card{background:#111928;border:1px solid #24313c;border-radius:14px;padding:14px;text-align:left;color:inherit}.save-slot{cursor:pointer}.save-slot strong,.save-slot-card strong{display:block}.save-slot span,.save-slot-card span{display:block;font-size:.8rem;opacity:.7;margin-top:5px}.contract-hero{display:flex;justify-content:space-between;gap:18px;align-items:end;background:#111928;border:1px solid #24313c;border-radius:16px;padding:18px;margin:16px 0}.contract-hero span{font-size:0.75rem;opacity:.65;display:block}.contract-hero strong{font-size:1.3rem;display:block}.contract-hero small{opacity:.7}.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.offer-card{background:#111928;border:1px solid #24313c;border-radius:16px;padding:16px}.offer-card.renew{border-color:#6179b7}.offer-card h4{font-size:1.2rem;margin:10px 0 6px}.offer-card p{min-height:54px;opacity:.76}.offer-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0 16px}.offer-details span{font-size:.78rem;background:#0d1421;border-radius:8px;padding:8px}.offer-details b{display:block;margin-top:3px}@media(max-width:760px){.creator-fields,.creator-options,.creator-options.wide,.save-slot-grid,.offer-grid{grid-template-columns:1fr}.contract-hero{align-items:flex-start;flex-direction:column}.creator-card{padding:18px}}

/* v0.9.1: persistent round-complete escape hatch */
.round-complete-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:18px 0;padding:18px 20px;border:1px solid rgba(93,173,226,.35);border-radius:16px;background:rgba(93,173,226,.08)}
.round-complete-card>div{display:flex;flex-direction:column;gap:5px}.round-complete-card span{font-size:.72rem;letter-spacing:.12em;font-weight:800;opacity:.75}.round-complete-card strong{font-size:1.05rem}.round-complete-card small{opacity:.75;max-width:680px;line-height:1.4}
@media(max-width:760px){.round-complete-card{align-items:stretch;flex-direction:column}}

/* v0.10.0 — partido vivo, highlights y postpartido RPG */
.match-shell-v10 { max-width: 1380px; }
.live-scorebar { margin-bottom:10px; }
.live-match-center { border:1px solid var(--line); background:linear-gradient(180deg,rgba(11,17,21,.98),rgba(10,16,20,.98)); border-radius:16px; padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow); }
.match-clock { margin-bottom:12px; }
.clock-track { height:8px; background:#162026; border-radius:99px; position:relative; overflow:visible; }
.clock-track i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent2),var(--accent)); }
.clock-track b { position:absolute; top:-25px; transform:translateX(-50%); font-size:0.75rem; color:var(--accent); white-space:nowrap; }
.live-bars { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.live-bars > div { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:10px; font-size:.75rem; color:var(--muted); }
.live-bars strong { color:#d9e0e5; min-width:110px; text-align:right; font-size:0.75rem; }
.splitbar { height:9px; background:linear-gradient(90deg,#7c3030 0,#7c3030 100%); border-radius:99px; overflow:hidden; border:1px solid #343f47; }
.splitbar i { display:block; height:100%; background:linear-gradient(90deg,#6da737,var(--accent)); }
.splitbar.pressure { background:linear-gradient(90deg,#8d3840,#522a2e); }
.live-statline { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:13px; }
.live-statline div { background:#0b1115; border:1px solid #223039; border-radius:9px; padding:8px 10px; display:flex; justify-content:space-between; gap:10px; }
.live-statline span { color:var(--muted); font-size:.69rem; text-transform:uppercase; letter-spacing:.05em; }
.live-statline b { color:#f2f6f8; }
.live-log .log { max-height:430px; }
.log-entry.chance_for { border-color:#94d755; color:#dceecc; }
.log-entry.chance_against { border-color:#f0a458; color:#f7d5b4; }
.log-entry.card { border-color:#f5d34f; color:#f7e9a4; }
.log-entry.injury { border-color:#b68cff; color:#decfff; }
.match-highlight { min-height:500px; padding:42px 34px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; overflow:hidden; }
.match-highlight::after { content:""; position:absolute; width:350px; height:350px; right:-110px; top:-90px; border-radius:50%; background:rgba(167,239,99,.08); }
.match-highlight.against::after { background:rgba(255,124,116,.10); }
.match-highlight .highlight-icon { font-size:3.1rem; margin:10px 0; }
.match-highlight h2 { font-size:2.1rem; margin:4px 0 10px; letter-spacing:-.045em; }
.match-highlight p { max-width:650px; line-height:1.6; color:#d2dadf; font-size:1rem; }
.score-flash { border:1px solid var(--line); border-radius:12px; padding:12px 15px; margin-top:12px; display:flex; gap:14px; align-items:center; }
.score-flash strong { color:var(--accent); font-size:1.3rem; }
.match-highlight.against .score-flash strong { color:var(--danger); }
.halftime-stats,.final-live-summary { display:flex; flex-wrap:wrap; gap:8px; margin:13px 0; }
.halftime-stats span,.final-live-summary span { border:1px solid #2b3a44; border-radius:999px; padding:6px 10px; color:#afb8be; font-size:.75rem; }
.halftime-stats b,.final-live-summary b { color:#fff; }
.post-story { border:1px solid #384852; background:linear-gradient(135deg,rgba(39,55,24,.9),rgba(13,20,25,.9)); border-radius:15px; padding:20px; margin:24px 0; }
.post-story .speaker { display:inline-block; margin-top:8px; color:var(--warn); text-transform:uppercase; font-size:0.69rem; font-weight:900; letter-spacing:.1em; }
.post-story h3 { font-size:1.3rem; margin:6px 0 8px; }
.post-story p { color:#c9d1d7; line-height:1.55; }
.post-story.resolved { opacity:.72; }
.post-lock { align-self:center; color:var(--warn); font-size:.84rem; font-weight:800; }
.training-card.repeated { border-color:#344149; }
.training-card.repeated em { color:var(--warn); }
@media (max-width:900px){.live-bars{grid-template-columns:1fr}.live-statline{grid-template-columns:repeat(3,1fr)}.live-bars > div{grid-template-columns:80px 1fr}.live-bars strong{grid-column:1/-1;text-align:left;}}
@media (max-width:620px){.live-statline{grid-template-columns:1fr 1fr}.match-highlight{padding:28px 20px;min-height:390px}.match-highlight h2{font-size:1.65rem}.live-bars > div{grid-template-columns:1fr}.live-bars strong{min-width:0}.score-flash{font-size:.8rem;}}
.match-story-timeline { margin:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.match-story-timeline h3 { margin:0 0 10px; }
.story-moment { display:grid; grid-template-columns:46px 1fr; gap:10px; padding:8px 0; color:#c8d1d7; font-size:.82rem; }
.story-moment b { color:#fff; }
.story-moment.goal_for { color:#e7fad6; }.story-moment.goal_against { color:#ffd0cd; }.story-moment.chance_against { color:#f7d5b4; }
.match-story-timeline { margin:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.match-story-timeline h3 { margin:0 0 10px; }
.story-moment { display:grid; grid-template-columns:46px 1fr; gap:10px; padding:8px 0; color:#c8d1d7; font-size:.82rem; }
.story-moment b { color:#fff; }
.story-moment.goal_for { color:#e7fad6; }.story-moment.goal_against { color:#ffd0cd; }.story-moment.chance_against { color:#f7d5b4; }

/* v0.11 — Campaign / dungeon mode */
.adventure-shell{max-width:1320px}.adventure-layout{grid-template-columns:minmax(0,1fr) 350px}.adventure-main{min-height:620px}.adventure-side{align-self:start;position:sticky;top:16px;padding:0;overflow:hidden}.adventure-actions{margin-left:auto;display:flex;gap:7px;align-items:center}.btn.tiny{padding:7px 10px;font-size:0.75rem}.adventure-hero{padding:48px;min-height:520px;background:radial-gradient(circle at 88% 12%,rgba(171,67,255,.18),transparent 32%),linear-gradient(145deg,#121d24,#0a0e10 70%);display:flex;flex-direction:column;justify-content:center}.adventure-hero h2,.campaign-cover h2,.campaign-complete h2{font-size:clamp(2.3rem,6vw,5.2rem);margin:.12em 0;letter-spacing:-.06em}.adventure-hero p,.campaign-cover .lead{max-width:780px;font-size:1.1rem;line-height:1.65;color:#d0d9df}.adventure-warning{border:1px solid #4b565e;background:#11191e;border-radius:12px;padding:14px 16px;margin:18px 0;color:#bdc8cf}.adventure-manifesto{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;padding:20px;color:#838e96;font-size:.72rem;font-weight:900;letter-spacing:.08em}.adventure-manifesto b{color:#4a5861}.adventure-progress{display:flex;align-items:flex-start;margin:12px 0 18px;padding:0 6px}.adventure-node{min-width:68px;text-align:center;color:#646f76}.adventure-node span{display:grid;place-items:center;width:29px;height:29px;margin:auto;border:1px solid #313c44;border-radius:50%;font-weight:900;background:#0e1316}.adventure-node small{display:block;margin-top:5px;font-size:0.69rem;text-transform:uppercase;letter-spacing:.04em}.adventure-node.active{color:#eef6e6}.adventure-node.active span{background:var(--accent);color:#080c0f;border-color:var(--accent);box-shadow:0 0 0 4px rgba(167,239,99,.1)}.adventure-node.done{color:#869caa}.adventure-node.done span{background:#273945;border-color:#537388;color:#e4f9d0}.adventure-progress i{height:1px;flex:1;background:#283137;margin-top:14px;min-width:8px}.side-section{padding:18px;border-bottom:1px solid var(--line)}.side-section:last-child{border-bottom:0}.quest-list{display:flex;flex-direction:column;gap:9px}.quest{border:1px solid #27323a;background:#0c1114;border-radius:11px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:10px}.quest strong{font-size:.78rem;display:block}.quest span{font-size:0.75rem;color:#949fa6;display:block;margin-top:3px;line-height:1.35}.quest.complete{border-color:#4b687b;background:rgba(75,103,48,.12)}.quest.failed{opacity:.48;border-color:#4a3434}.quest-progress{text-align:right;min-width:58px}.quest-progress b{color:var(--accent)}.quest.failed .quest-progress b{color:var(--danger)}.quest-progress small{max-width:100px}.party-member{display:flex;gap:9px;align-items:center;padding:7px 0}.party-avatar{width:34px;height:34px;border-radius:9px;background:#2a3d4a;display:grid;place-items:center;font-weight:950}.party-avatar.npc{background:#24475b}.party-avatar.coach{background:#5b4824}.party-avatar.boss{background:#641f26}.party-member strong,.party-member span{display:block}.party-member span{font-size:0.75rem;color:#909aa1;margin-top:2px}.party-member.enemy{padding-top:12px;margin-top:5px;border-top:1px dashed #413034}.lore-mini details{border-bottom:1px solid #212a30;padding:7px 0}.lore-mini summary{cursor:pointer;font-size:0.75rem;font-weight:800;color:#d7dfe4}.lore-mini p{font-size:0.75rem;line-height:1.45;color:#a0aab1}.lore-mini small{font-size:0.75rem;color:#616c73}.text-btn{background:none;border:0;color:var(--accent);cursor:pointer;padding:8px 0;font-size:0.75rem;font-weight:900}.resource-grid{display:grid;grid-template-columns:1fr;gap:7px}.resource-grid span{display:flex;justify-content:space-between;border:1px solid #242f36;border-radius:8px;padding:7px 9px;font-size:0.75rem;color:#9ca7af}.resource-grid b{color:#fff}.campaign-cover{padding:40px 24px}.boss-mark{width:112px;height:112px;border-radius:26px;background:radial-gradient(circle at 35% 25%,#d45a68,#6c1723 70%);display:grid;place-items:center;font-size:4.5rem;font-weight:950;box-shadow:0 15px 55px rgba(160,34,48,.22);margin:18px 0}.boss-mark.small{width:56px;height:56px;border-radius:16px;font-size:2rem;margin:6px 0}.story-prose{max-width:800px}.story-prose p{font-size:1rem;line-height:1.75;color:#c8d0d5}.story-prose em{color:#fff}.quest-unlock{margin:25px 0;padding:15px;border-left:4px solid var(--accent);background:rgba(167,239,99,.055);display:flex;flex-direction:column;gap:4px}.quest-unlock strong{font-size:.7rem;color:var(--accent);letter-spacing:.09em}.quest-unlock span{font-size:1.05rem;font-weight:850}.lead{color:#cad3d9;line-height:1.6;font-size:1.02rem}.rpg-choices{display:grid;gap:10px;margin:20px 0}.rpg-choice{text-align:left;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel),var(--bg));border-radius:var(--r-2);padding:15px 16px;color:var(--text);cursor:pointer;transition:var(--t-fast)}.rpg-choice:hover{transform:translateY(-1px);border-color:var(--blue);background:var(--panel2)}.rpg-choice strong{display:block;font-size:.92rem}.rpg-choice span{display:block;color:var(--muted);font-size:.76rem;line-height:1.45;margin-top:4px}.rpg-choice>div{display:flex;justify-content:space-between;gap:10px;align-items:center}.risk{font-style:normal;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid var(--line)}.risk.good{color:var(--accent);border-color:rgba(149,243,61,.32);background:var(--accent-soft)}.risk.neutral{color:var(--legacy);border-color:rgba(215,169,61,.3);background:rgba(215,169,61,.08)}.risk.bad{color:var(--injury);border-color:rgba(255,90,84,.32);background:rgba(255,90,84,.08)}.story-result{border:1px solid #3d4f5b;background:#111b21;border-radius:12px;padding:14px 16px;margin:16px 0}.story-result strong{color:#e9f3df}.story-result p{color:#afb8be;line-height:1.55}.story-result div{display:flex;flex-wrap:wrap;gap:7px}.story-result span{border:1px solid #364651;border-radius:999px;padding:4px 8px;font-size:0.75rem;color:#bcc9d1}.prep-meter{margin-top:22px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:0.75rem;color:#88939a}.prep-meter>div{height:7px;border-radius:99px;background:#182026;overflow:hidden}.prep-meter i{display:block;height:100%;background:var(--accent)}.briefing-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.briefing-grid>section{border:1px solid #28333b;border-radius:14px;padding:15px}.enemy-card{display:flex;gap:12px;padding:12px;border:1px solid #2e363c;border-radius:11px;background:#0d1215;margin:8px 0}.enemy-card p,.enemy-card span{display:block;font-size:0.75rem;color:#949fa6;line-height:1.45}.boss-card{border-color:#67363a;background:rgba(102,29,37,.12)}.loadout-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.loadout-list span,.stat-pills span,.loot-items span,.memory-wall span{border:1px solid #2b363e;border-radius:9px;padding:8px;font-size:0.75rem;color:#b5c0c7;background:#0d1215}.stat-pills{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.intel-card{border-left:3px solid #7b67d8;padding:9px 10px;background:rgba(91,75,165,.08);margin:8px 0}.intel-card strong,.intel-card span{display:block}.intel-card span{font-size:0.75rem;color:#a9afc6;margin-top:3px;line-height:1.4}.mission-contract{border:1px solid #655d36;background:rgba(126,110,41,.08);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:5px;margin:18px 0}.mission-contract strong{color:#f0d66d;font-size:.7rem;letter-spacing:.08em}.mission-contract span{font-size:.76rem;color:#cfc69b}.btn.danger{background:#9d3342;border-color:#c15463;color:#fff}.dungeon-hud{display:grid;grid-template-columns:70px 1fr 230px;gap:12px;align-items:center;border:1px solid var(--line);background:linear-gradient(90deg,var(--bg),var(--panel),rgba(228,63,63,.07));border-radius:var(--r-3);padding:12px;margin-bottom:10px}.minute-orb{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg);font-family:var(--font-display);font-size:1.12rem;font-weight:700}.dungeon-score{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center}.dungeon-score span{font-size:var(--fs-1);color:var(--muted);font-weight:900;letter-spacing:.04em}.dungeon-score strong{font-size:1.55rem}.boss-hp span{font-size:0.75rem;color:#d58b93;font-weight:900}.boss-hp>div{height:6px;background:#35191d;border-radius:99px;overflow:hidden;margin:5px 0}.boss-hp i{display:block;height:100%;background:linear-gradient(90deg,#ba3444,#f46b78)}.boss-hp small{font-size:0.75rem;color:#8a6b6f}.live-panel{display:grid;grid-template-columns:1fr auto;gap:14px;border:1px solid #253037;background:#0b0f12;border-radius:12px;padding:10px 12px;margin-bottom:14px}.live-bar-row{display:grid;grid-template-columns:70px 1fr 35px 35px;gap:7px;align-items:center;font-size:0.75rem;color:#8e989f}.live-split{height:6px;background:#4c332f;border-radius:99px;overflow:hidden}.live-split i{display:block;height:100%;background:#5f87a1}.match-statline{display:flex;gap:8px;align-items:center}.match-statline span{border-left:1px solid #28333a;padding-left:8px;font-size:0.75rem;color:#8a959c}.match-statline b{color:#fff}.narrative-beat{padding:25px 12px}.sequence-rune{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:var(--fs-1);color:var(--muted)}.modifier-callout{display:inline-block;margin:7px 0;border:1px solid var(--line);background:var(--accent-soft);padding:6px 9px;border-radius:var(--r-1);color:var(--accent);font-size:var(--fs-1)}.dice-stage{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:25px 0}.dice-stage .die{display:grid;place-items:center;line-height:0;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}.dice-stage>b{font-size:1.2rem;color:var(--muted)}.dice-stage>strong{font-family:var(--font-display);font-size:2.4rem;color:var(--accent)}.dice-stage>small{font-size:var(--fs-1);color:var(--muted)}.roll-breakdown{display:flex;gap:7px;flex-wrap:wrap}.roll-breakdown span{border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:var(--fs-1);color:var(--muted)}.halftime-party{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.halftime-party>div{border:1px solid #2d3a42;border-radius:11px;padding:12px}.halftime-party strong{color:#fff}.halftime-party p{font-size:.76rem;color:#a0aab0;line-height:1.45}.campaign-boss-end{padding:15px}.history-beats{margin:18px 0;border-top:1px solid #2a343b;border-bottom:1px solid #2a343b}.history-beats div{display:grid;grid-template-columns:44px 1fr;gap:9px;padding:7px 0;font-size:0.75rem;color:#a8b2b9}.history-beats b{color:#fff}.loot-burst{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.loot-burst>div{border:1px solid #3c4a53;background:radial-gradient(circle at top,rgba(149,213,90,.12),transparent 65%);border-radius:13px;padding:18px;text-align:center}.loot-burst span,.loot-burst strong{display:block}.loot-burst span{font-size:0.75rem;color:#889aa6}.loot-burst strong{font-size:1.55rem;color:#cef4aa;margin-top:5px}.quest-resolution{display:grid;gap:8px}.quest-resolution>div{display:flex;gap:10px;border:1px solid #2e3940;border-radius:9px;padding:9px}.quest-resolution b{color:#a7d978}.quest-resolution .failed b{color:#dd7278}.quest-resolution span strong,.quest-resolution span small{display:block}.quest-resolution small{color:#859097}.loot-items,.memory-wall{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 20px}.world-news{display:grid;gap:10px;margin:18px 0}.world-news article{border:1px solid #2d383f;border-radius:12px;padding:13px;background:#0d1215}.world-news small{color:#d4b65e;font-weight:900;letter-spacing:.08em}.world-news p{color:#b6c0c6;line-height:1.5}.open-threads{display:grid;gap:8px;margin:14px 0}.open-threads>div{border-left:3px solid #745b9c;background:rgba(83,60,116,.09);padding:10px 12px}.open-threads strong,.open-threads span{display:block}.open-threads span{font-size:.75rem;color:#a7a4b5;margin-top:3px}.codex-group{margin:18px 0}.codex-group article{border:1px solid #29343b;border-radius:10px;padding:12px;margin:8px 0}.codex-group p{color:#a8b2b8;line-height:1.5;font-size:.8rem}.codex-group small{color:#707b83}.campaign-complete{padding:22px 10px}.adventure-shell .end-stats{grid-template-columns:repeat(6,1fr)}
@media(max-width:1020px){.adventure-layout{grid-template-columns:1fr}.adventure-side{position:static}.briefing-grid{grid-template-columns:1fr}.dungeon-hud{grid-template-columns:60px 1fr}.boss-hp{grid-column:1/-1}.live-panel{grid-template-columns:1fr}.match-statline{flex-wrap:wrap}.adventure-shell .end-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.adventure-progress{overflow-x:auto}.adventure-node{min-width:64px}.adventure-hero{padding:30px 20px}.adventure-actions{display:none}.dungeon-hud{grid-template-columns:1fr}.minute-orb{margin:auto}.dungeon-score{grid-template-columns:1fr}.loadout-list,.halftime-party,.loot-burst{grid-template-columns:1fr}.adventure-shell .end-stats{grid-template-columns:1fr 1fr}.live-bar-row{grid-template-columns:60px 1fr 30px}.live-bar-row small{display:none}}
.campaign-entry{display:flex;justify-content:flex-end;margin:-4px 0 10px}.campaign-entry a{font-size:0.75rem;font-weight:900;color:#f0bbc2;border:1px solid #60363d;background:rgba(111,37,48,.12);border-radius:999px;padding:6px 10px;text-decoration:none}.campaign-entry a:hover{border-color:#a64d59;color:#fff}
.campaign-equip-picks{display:grid;gap:8px;margin:8px 0 14px}.campaign-equip-picks>div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.campaign-equip-picks small{width:70px;color:#768189;font-size:0.75rem;font-weight:900}.equip-pick{border:1px solid #323d44;background:#0c1114;color:#9fa9b0;border-radius:999px;padding:6px 9px;font-size:0.75rem;cursor:pointer}.equip-pick.active{border-color:var(--accent);color:#effbe3;background:rgba(167,239,99,.08)}

/* v0.12 · campañas integradas en la carrera */
.campaign-entry.mission-live{justify-content:stretch}.campaign-entry.mission-live button{width:100%;min-height:44px;border:1px solid #8e434d;background:linear-gradient(90deg,rgba(130,38,51,.24),rgba(97,54,25,.15));color:#ffd7dc;border-radius:11px;padding:10px 14px;font-weight:950;letter-spacing:.04em;cursor:pointer}.mission-week-actions{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center;border:1px solid #79414a;background:linear-gradient(115deg,rgba(107,32,43,.18),rgba(70,48,16,.08));border-radius:14px;padding:15px;margin:16px 0}.mission-week-actions span,.mission-week-actions strong,.mission-week-actions small{display:block}.mission-week-actions span{font-size:0.69rem;color:#f2a7b0;font-weight:950;letter-spacing:.08em}.mission-week-actions strong{font-size:1.05rem;margin:3px 0}.mission-week-actions small{color:#afb7bc}.stories-page .lead{max-width:850px}.story-thread-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:20px 0 26px}.story-thread{display:grid;grid-template-columns:46px 1fr;gap:11px;border:1px solid #2c373f;border-radius:13px;padding:14px;background:linear-gradient(145deg,#0e1317,#0b0f11)}.thread-icon{width:42px;height:42px;border:1px solid #424d55;border-radius:11px;display:grid;place-items:center;font-size:1.25rem}.story-thread small{font-size:0.69rem;color:#d7b567;text-transform:uppercase;font-weight:900}.story-thread h3{margin:3px 0}.story-thread p{font-size:0.75rem;line-height:1.45;color:#9ea8af}.thread-bar{height:5px;background:#1b242a;border-radius:99px;overflow:hidden;margin-top:9px}.thread-bar i{display:block;height:100%;background:linear-gradient(90deg,#7098b3,#d8c667)}.mission-history{display:grid;gap:7px;margin:10px 0 22px}.mission-history>div{display:grid;grid-template-columns:42px 1fr;gap:8px;border-left:3px solid #9a4653;background:rgba(115,43,55,.08);padding:9px}.mission-history span strong,.mission-history span small{display:block}.mission-history small{color:#909aa0}.quest-history{display:grid;gap:5px}.quest-history>div{display:flex;gap:9px;padding:7px 9px;border:1px solid #2a353c;border-radius:8px;font-size:0.75rem}.quest-history .complete b{color:#a8db79}.quest-history .failed b{color:#db737a}
@media(max-width:800px){.mission-week-actions{grid-template-columns:1fr}.story-thread-grid{grid-template-columns:1fr}}

/* Bifurcación final del árbol de talentos (fase 3). Se separa visualmente de
   la rama lineal porque es una decisión que no se puede deshacer. */
.talent-fork { margin-top: 14px; border-top: 1px dashed rgba(255,255,255,.18); padding-top: 12px; }
.talent-fork-head {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  opacity: .75; margin-bottom: 10px;
}
.talent-fork-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.talent-node.fork { border-style: dashed; }
.talent-node.fork.owned { border-style: solid; }
.talent-node.fork.closed { opacity: .42; }
.talent-fork.resolved .talent-fork-head { opacity: .5; }
@media (max-width: 640px) { .talent-fork-options { grid-template-columns: 1fr; } }

/* Vínculos y consecuencias (fase 3). */
.bond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; }
.bond-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 14px; }
.bond-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bond-head small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.bond-head h4 { margin: 2px 0 0; font-size: 15px; }
.bond-head strong { font-size: 12px; opacity: .85; text-align: right; }
.bond-meta { font-size: 11px; opacity: .6; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bond-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bond-flags span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.08); }
.bond-memories { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.bond-memories li { font-size: 12.5px; line-height: 1.45; opacity: .82; }
.bond-memories b { opacity: .55; margin-right: 4px; font-variant-numeric: tabular-nums; }
.consequence-list { display: grid; gap: 8px; margin-bottom: 10px; }
.consequence { background: rgba(255,255,255,.04); border-left: 3px solid rgba(255,255,255,.25); border-radius: 6px; padding: 10px 12px; }
.consequence.live { border-left-color: #d98324; }
.consequence strong { display: block; font-size: 14px; }
.consequence span { display: block; font-size: 12.5px; opacity: .8; margin-top: 3px; }
.consequence small { display: block; font-size: 11px; opacity: .55; margin-top: 5px; }
.consequence-list.closed .consequence { opacity: .55; }

/* ---------- Portada ---------- */
.intro-shell { max-width: 1120px; }
.intro-shell .brand { margin-bottom: 26px; }

.intro-hero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 30px; padding: 30px 32px; align-items: start; margin-bottom: 16px;
}
.intro-hero-text h2 {
  margin: 8px 0 14px; font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  letter-spacing: -.035em; line-height: 1.12; text-wrap: balance;
}
.intro-hero-text p { margin: 0 0 20px; color: #cad2d8; line-height: 1.62; max-width: 52ch; }
.intro-hero-text .buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.big { padding: 13px 22px; font-size: 1rem; }

/* La escala de resolución: lo más concreto que se puede enseñar del juego
   antes de jugarlo, y sale directamente de las reglas. */
.intro-rule {
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8,13,16,.5); padding: 18px 18px 16px;
}
.dice-formula {
  margin: 9px 0 14px; font-size: .95rem; line-height: 1.5; color: #cad2d8;
}
.dice-formula b { color: var(--accent); font-size: 1.35rem; letter-spacing: -.02em; }
.dice-formula em { display: block; color: var(--muted); font-style: normal; font-size: .84rem; margin-top: 3px; }
.ladder { display: grid; gap: 4px; }
.rung {
  display: grid; grid-template-columns: 4.6rem 1fr; align-items: baseline; gap: 10px;
  padding: 6px 10px; border-radius: 7px; background: rgba(255,255,255,.03);
  border-left: 3px solid var(--muted);
}
.rung b { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--muted); }
.rung span { font-weight: 750; font-size: .9rem; }
.rung.bad { border-left-color: var(--danger); }
.rung.mid { border-left-color: var(--warn); }
.rung.good { border-left-color: var(--accent2); }
.rung.great { border-left-color: var(--accent); }
.rung.great span { color: var(--accent); }
.small { font-size: .8rem; line-height: 1.5; }
.intro-rule p.small { margin: 12px 0 0; }

/* Reanudar: la partida en curso manda sobre todo lo demás. */
.resume-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; padding: 20px 24px; margin-bottom: 16px;
  border-color: var(--accent2);
  /* Si hay una carrera abierta es lo primero que quieres, así que va antes que
     nada y se distingue del resto de tarjetas. */
  background: linear-gradient(180deg, rgba(45,60,30,.96), rgba(15,23,29,.96));
}
.resume-main h3 { margin: 5px 0 10px; font-size: 1.25rem; letter-spacing: -.02em; }
.resume-stats { display: flex; flex-wrap: wrap; gap: 18px; }
.resume-stats span { display: grid; font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.resume-stats b { font-size: 1.05rem; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.intro-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pillar { padding: 20px 22px; }
.pillar-k { font-size: 1.5rem; line-height: 1; margin-bottom: 10px; }
.pillar h3 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -.02em; }
.pillar p { margin: 0; color: #bac4ca; font-size: .9rem; line-height: 1.6; }

.intro-saves { padding: 20px 24px; }
.intro-saves-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.intro-saves-head p { margin: 6px 0 0; }
.save-slot.filled { border-color: var(--line); background: #111c23; }
.save-slot.filled:hover { border-color: var(--accent2); }
.save-slot.broken { border-style: dashed; opacity: .6; }
.save-slot .slot-name { display: block; font-weight: 750; margin-top: 4px; }
.save-slot .slot-meta { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }

.intro-foot { margin-top: 18px; text-align: center; }
.intro-foot a { color: var(--muted); font-size: .85rem; text-decoration: none; border-bottom: 1px solid rgba(156,168,145,.3); }
.intro-foot a:hover { color: var(--accent2); border-bottom-color: var(--accent2); }

@media (max-width: 860px) {
  .intro-hero { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
  .resume-card { flex-direction: column; align-items: stretch; }
  .resume-card .btn { width: 100%; }
}

/* ---------- Partido en móvil ----------
   El problema real: el marcador se iba fuera de pantalla y había que subir
   para enterarse de un gol en contra, y bajar para ver el detalle. */
.live-scorebar { display: block; }
.live-scorebar .sb-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.live-scorebar .sb-clock span { font-weight: 900; color: var(--accent); }
.live-scorebar .sb-clock small, .live-scorebar .sb-you small { display: block; color: var(--muted); font-size: 0.75rem; }
.live-scorebar .sb-you { text-align: right; }
.sb-last {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 8px; align-items: baseline; text-align: left;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: .84rem; line-height: 1.4; color: #c3ccd2;
}
.sb-last b { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
/* Dos líneas como mucho: esta barra informa, no narra. */
.sb-last span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-last.good b { color: var(--accent); }
.sb-last.bad b { color: var(--danger); }
.sb-last.bad span { color: #ffd9d6; }
.sb-last.warn b { color: var(--warn); }

@media (max-width: 880px) {
  /* El orden del DOM sirve para escritorio; aquí manda el uso: marcador
     siempre a la vista, decisión justo debajo, y el detalle después. */
  .match-shell-v10 { display: flex; flex-direction: column; padding-top: 0; }
  .match-shell-v10 .match-brand { order: 0; margin: 14px 0 10px; }
  .match-shell-v10 .live-scorebar {
    order: 1; position: sticky; top: 0; z-index: 30;
    margin: 0 0 12px; border-radius: 0 0 16px 16px;
    background: rgba(11,17,21,.97); backdrop-filter: blur(6px);
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
  }
  .match-shell-v10 .layout { order: 2; }
  .match-shell-v10 .live-match-center { order: 3; margin-top: 14px; }
  /* Con la barra pegada arriba, la marca deja de hacer falta al hacer scroll. */
  .match-shell-v10 .match-brand h1 { font-size: 1.5rem; }
  .match-shell-v10 .main { min-height: 0; }
}

@media (max-width: 620px) {
  .match-shell-v10 .match-brand { display: none; }
  .live-scorebar .sb-row { grid-template-columns: auto 1fr auto; gap: 8px; }
  /* Los nombres largos partían el marcador en dos líneas. */
  .live-scorebar .teams { font-size: .78rem; gap: 8px; }
  .live-scorebar .teams span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7.5rem; }
  .live-scorebar .teams strong { font-size: 1.3rem; white-space: nowrap; }
  .sb-last { font-size: .8rem; }
}

/* Maestría de habilidades: el rango y lo que falta para el siguiente. */
.loadout-skill .skill-main { display: grid; gap: 5px; }
.skill-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.skill-rank { font-size: 0.69rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); }
.skill-rank.r2 { color: var(--accent2); background: rgba(148,215,85,.12); }
.skill-rank.r3 { color: var(--accent); background: rgba(167,239,99,.14); }
.skill-bonus { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.skill-bar { height: 3px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.skill-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.skill-perk { color: var(--accent); font-size: .78rem; line-height: 1.45; }

/* El cuerpo: la decisión de la semana y el historial médico. */
.fitness-card {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  border: 1px solid var(--warn); border-left-width: 4px; border-radius: 14px;
  background: rgba(246,196,83,.07); padding: 16px 18px; margin-bottom: 14px;
}
.fitness-card.out { border-color: var(--danger); background: rgba(255,124,116,.08); }
.fitness-card span { font-size: .7rem; font-weight: 900; letter-spacing: .12em; color: var(--warn); }
.fitness-card.out span { color: var(--danger); }
.fitness-card strong { display: block; font-size: 1.1rem; margin: 4px 0 3px; }
.fitness-card small { color: var(--muted); line-height: 1.5; }
.fitness-risk { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 4px; font-size: .84rem; color: #cad2d8; }
.fitness-risk b { color: var(--warn); font-variant-numeric: tabular-nums; }
.fitness-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.medical-load { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; font-size: .84rem; color: var(--muted); }
.medical-load b { font-variant-numeric: tabular-nums; color: var(--text); }
.medical-list { display: grid; gap: 8px; }
.medical-row { border-left: 3px solid var(--line); padding: 8px 12px; background: rgba(255,255,255,.03); border-radius: 6px; }
.medical-row.live { border-left-color: var(--danger); }
.medical-row strong { display: block; font-size: .95rem; }
.medical-row span { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.medical-row small { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 4px; opacity: .8; }
@media (max-width: 620px) { .fitness-card { flex-direction: column; align-items: stretch; } .fitness-actions .btn { flex: 1; } }

/* La cesión: un examen con fecha, no un traspaso. */
.loan-card {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center;
  border: 1px solid var(--blue); border-left-width: 4px; border-radius: 14px;
  background: rgba(128,191,255,.07); padding: 16px 18px; margin-bottom: 14px;
}
.loan-card.ontrack { border-color: var(--accent2); background: rgba(148,215,85,.08); }
.loan-card span { font-size: 0.75rem; font-weight: 900; letter-spacing: .1em; color: var(--blue); }
.loan-card.ontrack span { color: var(--accent2); }
.loan-card strong { display: block; font-size: 1.05rem; margin: 4px 0 3px; }
.loan-card small { color: var(--muted); line-height: 1.5; }
.loan-targets { display: flex; gap: 16px; }
.loan-targets > div { min-width: 8rem; }
.loan-targets b { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.loan-targets span { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 700; margin-bottom: 5px; }
@media (max-width: 620px) { .loan-card { flex-direction: column; align-items: stretch; } .loan-targets { gap: 12px; } .loan-targets > div { flex: 1; min-width: 0; } }

/* ---------- El reloj del partido ---------- */
.clock-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(8,13,16,.5);
  font-size: .8rem;
}
.clock-running { color: var(--accent2); }
.clock-waiting { color: var(--warn); font-weight: 800; }
.speed-set { display: flex; gap: 4px; }
.speed {
  border: 1px solid var(--line); background: #0e161c; color: var(--muted);
  border-radius: 8px; padding: 5px 11px; font-size: .78rem; letter-spacing: .05em;
}
.speed.on { border-color: var(--accent); color: var(--accent); background: #141f26; }

/* Los dados: dan vueltas y caen. Antes ya aparecían tirados. */
.roll-panel.pre-roll .total { color: var(--warn); }
.die.rolling {
  animation: die-shake .5s ease-in-out infinite;
  color: var(--muted);
}
.die.landed { animation: die-drop .34s cubic-bezier(.2,1.5,.4,1) 1; }
@keyframes die-shake {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-4px) rotate(4deg); }
}
@keyframes die-drop {
  0%   { transform: translateY(-11px); opacity: .45; }
  55%  { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .die.rolling, .die.landed { animation: none; }
}
@media (max-width: 880px) {
  .match-shell-v10 .clock-controls { order: 1; margin-bottom: 10px; }
}

/* La cuenta de la tirada: los sumandos tienen que leerse separados. */
.roll-panel .calc {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin: 14px 0 10px; color: var(--muted); font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.roll-panel .calc .total {
  flex-basis: 100%; color: var(--accent); font-size: 1.5rem; font-weight: 900;
  letter-spacing: -.02em; margin-top: 2px;
}
.roll-panel .dice-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.roll-panel .dice-row .plus { color: var(--muted); font-size: 1.2rem; }

/* ---------- Navegación: app en el móvil, pestañas en el escritorio ---------- */
.tabbar { display: none; }
.nav-sheet, .nav-sheet-backdrop { display: none; }

@media (max-width: 880px) {
  /* Nueve pestañas en fila no es diseño de móvil: cinco destinos abajo,
     el resto en una hoja. */
  .season-nav { display: none; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(9,14,18,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 28px rgba(0,0,0,.45);
  }
  .tabbar .tab {
    display: grid; justify-items: center; gap: 3px;
    background: none; border: 0; color: var(--muted);
    padding: 7px 2px 5px; border-radius: 12px;
    min-height: 52px; line-height: 1;
  }
  .tabbar .tab .tab-icon { display: block; color: var(--muted); transition: color 160ms var(--ease); }
  .tabbar .tab small { font-size: 0.75rem; letter-spacing: .01em; }
  .tabbar .tab.active { color: var(--accent); background: rgba(167,239,99,.10); }
  .tabbar .tab.active .tab-icon { color: var(--accent); }
  .tabbar .tab:active { background: rgba(255,255,255,.06); }

  /* Que la barra no tape el final del contenido. */
  .season-shell, .career-shell { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  .nav-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(5,7,9,.6); backdrop-filter: blur(2px);
  }
  .nav-sheet {
    display: block; position: fixed; left: 0; right: 0; z-index: 71;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    margin: 0 10px; padding: 14px 14px 16px;
    background: linear-gradient(180deg, rgba(24,37,45,.99), rgba(14,22,27,.99));
    border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 -14px 40px rgba(0,0,0,.5);
    animation: sheet-up .18s ease-out;
  }
  @keyframes sheet-up { from { transform: translateY(14px); opacity: .4; } to { transform: none; opacity: 1; } }
  .nav-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .nav-sheet-head strong { font-size: .95rem; }
  .nav-sheet-head button { background: none; border: 0; color: var(--muted); font-size: 1.05rem; padding: 4px 8px; }
  .nav-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nav-sheet-grid button {
    display: flex; align-items: center; gap: 9px;
    background: #0e161c; border: 1px solid var(--line); color: var(--text);
    border-radius: 12px; padding: 13px 12px; text-align: left; font-size: .88rem;
    min-height: 48px;
  }
  .nav-sheet-grid button span { font-size: 1.05rem; }
  .nav-sheet-grid button.active { border-color: var(--accent); color: var(--accent); }

  /* La cabecera de estadísticas, más compacta para dejar sitio al juego. */
  .season-topbar { gap: 6px; }
  .season-topbar > div { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) { .nav-sheet { animation: none; } }

@media (max-width: 880px) {
  /* Siete cajas en rejilla se comían media pantalla. En el móvil pasan a ser
     una tira que se desliza: los datos están, pero no ocupan el juego. */
  .season-topbar {
    display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap;
    margin: 0 -12px 12px; padding: 0 12px 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .season-topbar::-webkit-scrollbar { display: none; }
  .season-topbar > div {
    flex: 0 0 auto; min-width: 5.3rem; padding: 8px 12px; scroll-snap-align: start;
    display: grid; gap: 1px;
  }
  .season-topbar > div span { font-size: 0.75rem; letter-spacing: .1em; }
  .season-topbar > div strong { font-size: 1rem; }

  /* La marca, en una línea. */
  .season-shell > .brand, .career-shell > .brand { margin-bottom: 12px; align-items: center; }
  .season-shell > .brand h1, .career-shell > .brand h1 { font-size: 1.45rem; }
  .season-shell > .brand .muted, .career-shell > .brand .muted { display: none; }
}

@media (max-width: 620px) {
  /* Dos tarjetas por fila dejan columnas de 150px: el texto no cabe. */
  .training-grid { grid-template-columns: 1fr; }
}

/* La pantalla de la semana nunca tuvo relleno propio: el contenido iba pegado
   al borde de la tarjeta y la primera letra se comía el redondeo. */
.season-dashboard { padding: 26px; }
@media (max-width: 620px) { .season-dashboard { padding: 18px 14px; } }

/* Los efectos de una elección, en etiquetas: el texto de arriba es la voz del
   personaje, no una lista de estadísticas. */
.choice-hints { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-style: normal; }
.choice-hints i {
  font-style: normal; font-size: 0.75rem; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--muted);
}
.choice-hints i:first-letter { text-transform: uppercase; }

/* ---------- Identidad visual generada ---------- */
.crest { flex: 0 0 auto; display: block; }
.club-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.club-cell .crest { margin-top: -1px; }

.fixture-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.fixture-side { display: flex; align-items: center; gap: 8px; font-weight: 850; font-size: 1.05rem; }
.fixture-line b { color: var(--muted); font-size: .85rem; }

.live-scorebar .teams { align-items: center; }
.team-side { display: flex; align-items: center; gap: 7px; min-width: 0; }
.team-side.away { flex-direction: row-reverse; }
.team-side i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand .crest { margin-bottom: 2px; }
.playerline.with-avatar { display: flex; align-items: center; gap: 12px; }
.playerline.with-avatar > div { flex: 1; min-width: 0; }
.avatar { flex: 0 0 auto; display: block; }

@media (max-width: 620px) {
  .fixture-side { font-size: .95rem; }
  .brand .crest { width: 26px; height: 27px; }
}

@media (max-width: 700px) {
  /* La tabla tiene once columnas y en el móvil no caben: el escudo empujaba
     los puntos fuera de la pantalla. Se queda lo que se consulta de verdad. */
  .table-row {
    grid-template-columns: 26px minmax(0, 1fr) 34px 42px;
    gap: 6px; padding: 9px 12px; font-size: .8rem;
  }
  .table-row i:nth-of-type(2),
  .table-row i:nth-of-type(3),
  .table-row i:nth-of-type(4),
  .table-row i:nth-of-type(5),
  .table-row i:nth-of-type(6),
  .table-row i:nth-of-type(7) { display: none; }
  .club-cell { overflow: hidden; }
  .club-cell,
  .table-head span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .table-row strong { font-variant-numeric: tabular-nums; }
}

/* ---------- La semana como agenda ---------- */
/* Siete celdas y una línea. No es un planificador: es saber en qué día estás,
   cuántas oportunidades te quedan sin usar y que el domingo está al final. */
.week-agenda { margin: 4px 0 8px; }
.ag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ag-head span { font-size: .69rem; font-weight: 900; letter-spacing: .11em; color: var(--muted); }
.ag-head b { font-size: .78rem; font-weight: 700; color: #b8c2c8; }
.ag-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ag-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--line); border-radius: 9px; padding: 4px 2px;
  background: rgba(255,255,255,.03); min-width: 0;
}
.ag-top { display: flex; align-items: center; gap: 3px; line-height: 1; }
.ag-top svg { display: block; }
.ag-day b { font-size: .66rem; font-weight: 900; letter-spacing: .06em; color: var(--muted); }
.ag-day i {
  font-style: normal; font-size: .66rem; letter-spacing: .02em; color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75;
}
.ag-dots { font-style: normal; font-size: .62rem; line-height: 1; letter-spacing: -.02em; color: var(--muted); }
/* En un móvil de 360 la celda mide cuarenta píxeles y «Táctica» no entra.
   Se aprieta el hueco antes que recortar la palabra: un día que se lee
   «Táctic…» ya no dice qué día es. */
@media (max-width: 380px) {
  .ag-strip { gap: 3px; }
  .ag-day { padding: 4px 1px; }
  .ag-day i { font-size: .62rem; letter-spacing: -.01em; }
}
.ag-open { border-color: rgba(128,191,255,.4); background: rgba(128,191,255,.08); }
.ag-open b, .ag-open .ag-dots { color: var(--blue); }
.ag-done .ag-dots { color: var(--accent2); }
.ag-empty { opacity: .55; }
.ag-match { border-color: rgba(167,239,99,.5); background: rgba(167,239,99,.1); }
.ag-match b, .ag-match i { color: var(--accent); opacity: 1; }

/* ---------- Lo que trae la temporada · la retirada ---------- */
.season-intro {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px;
  border: 1px solid rgba(128,191,255,.4); border-radius: 14px; padding: 13px 14px;
  background: linear-gradient(150deg, rgba(40,70,100,.35), rgba(12,19,24,.95));
}
.season-intro > span { font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: var(--blue); }
.season-intro strong { font-size: 1.02rem; }
.season-intro ul { margin: 2px 0 4px; padding-left: 18px; color: #c3ccd2; font-size: .84rem; line-height: 1.5; }
.season-intro .btn { align-self: flex-start; }
.retire-card {
  display: flex; flex-direction: column; gap: 6px; margin: 14px 0;
  border: 1px solid rgba(240,183,183,.45); border-radius: 14px; padding: 14px;
  background: linear-gradient(150deg, rgba(120,30,40,.25), rgba(12,19,24,.95));
}
.retire-card > span { font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: #f0b7b7; }
.retire-card small { color: #c3ccd2; font-size: .84rem; line-height: 1.45; }
.retire-card .btn { align-self: flex-start; }
.retired-memories { padding-left: 18px; color: #c3ccd2; line-height: 1.6; }
.season-stat-grid small { display: block; font-size: .72rem; color: var(--muted); }

/* ---------- La selección ---------- */
/* La tarjeta del parón: lo primero de la Semana, porque es lo primero que se
   mira esa semana. Cada estado con su color: pendiente, convocado, hecho, no. */
.national-card {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px;
  background: linear-gradient(150deg, rgba(150,30,40,.18), rgba(12,19,24,.95));
}
.national-card > span { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: #f0b7b7; }
.national-card strong { font-size: 1.02rem; }
.national-card small { font-size: .8rem; color: #c3ccd2; line-height: 1.45; }
.national-card .btn, .national-card .dashboard-actions { margin-top: 4px; }
.national-card.pending { border-color: rgba(240,183,183,.5); }
.national-card.called { border-color: rgba(167,239,99,.55); background: linear-gradient(150deg, rgba(60,84,26,.45), rgba(12,19,24,.95)); }
.national-card.called > span { color: var(--accent); }
.national-card.miss { opacity: .85; }

.national-page .final-score { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.15; margin: 14px 0; }

/* La lista, nombre a nombre. */
.nat-list { display: grid; gap: 12px; margin: 12px 0 14px; }
.nat-group h4 { margin: 0 0 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nat-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.03); margin-bottom: 4px;
  animation: nat-in .25s ease-out;
}
.nat-line b { font-weight: 700; }
.nat-line span { font-size: .78rem; color: var(--muted); text-align: right; }
.nat-line.you { background: rgba(167,239,99,.16); border: 1px solid rgba(167,239,99,.6); }
.nat-line.you b { color: var(--accent); }
@keyframes nat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nat-line { animation: none; } }
.nat-verdict { display: flex; flex-direction: column; gap: 6px; border-radius: 14px; padding: 14px; margin: 6px 0 12px; }
.nat-verdict > span { font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.nat-verdict strong { font-size: 1.1rem; }
.nat-verdict small { color: #c3ccd2; font-size: .82rem; line-height: 1.45; }
.nat-verdict.yes { border: 1px solid rgba(167,239,99,.6); background: rgba(167,239,99,.1); }
.nat-verdict.yes > span { color: var(--accent); }
.nat-verdict.no { border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.nat-verdict.no > span { color: var(--muted); }

/* ---------- El repertorio en la mano ---------- */
/* La primera ficha de la mano: no es una carta, es la puerta al repertorio. */
.prep-card.repertorio { border-color: rgba(167,239,99,.4); background: linear-gradient(170deg, rgba(40,62,24,.7), rgba(12,19,24,.95)); }
.prep-card.repertorio::before { background: linear-gradient(180deg, var(--accent), var(--accent2)); }
.prep-card.repertorio .card-when b { color: var(--accent); display: inline-flex; }
.prep-card.repertorio p { font-style: normal; color: #d3dcc8; }
.prep-card.repertorio .card-hints i { color: var(--accent); background: rgba(167,239,99,.1); }

/* ---------- El repertorio entero (Personaje › Repertorio) ---------- */
.rep-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin: 8px 0 0; }
.rep-next strong { color: #c3ccd2; }
.rep-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; }
.rep-count > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.03); }
.rep-count b { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--accent); }
.rep-count span { font-size: .78rem; color: var(--muted); }
.rep-group { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; background: rgba(255,255,255,.02); }
.rep-group > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none;
}
.rep-group > summary::-webkit-details-marker { display: none; }
.rep-group > summary::after { content: '▾'; color: var(--muted); }
.rep-group[open] > summary::after { content: '▴'; }
.rep-group[open] > summary { margin-bottom: 4px; }
.rep-gname { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.rep-gsum { flex: 1; min-width: 0; font-size: .76rem; color: var(--accent2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-group > summary b { font-size: .8rem; color: var(--muted); }
.rep-group[open] { padding-bottom: 6px; }
.rep-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; margin-bottom: 6px;
  background: rgba(255,255,255,.025);
}
.rep-main strong { display: block; font-size: .9rem; }
.rep-main small { display: block; font-size: .76rem; color: #aeb8be; line-height: 1.4; margin-top: 2px; }
.rep-tell { display: block; font-style: normal; font-size: .75rem; color: var(--accent2); margin-top: 3px; }
.rep-btn { grid-column: 1 / -1; justify-self: stretch; }
.rep-side { text-align: right; min-width: 0; max-width: 132px; }
.rep-side b { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.rep-side span { display: block; font-size: .75rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.rep-bar { display: block; height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); margin-top: 5px; overflow: hidden; }
.rep-bar i { display: block; height: 100%; background: var(--blue); }
.rep-row.ready { border-color: rgba(167,239,99,.45); background: rgba(167,239,99,.06); }
.rep-row.ready .rep-side b { color: var(--accent); }
.rep-row.learning .rep-side b { color: var(--blue); }
.rep-row.available .rep-side b { color: var(--accent2); }
.rep-row.learned .rep-side b { color: #c3ccd2; }
.rep-row.locked { opacity: .55; }
.rep-row.locked .rep-side b { color: var(--muted); }

/* Y en el partido: la opción que no estaba ahí la semana pasada. */
.choice.accion.especial { border-color: rgba(167,239,99,.55); background: linear-gradient(160deg, rgba(60,84,26,.5), rgba(12,19,24,.95)); }
.mini-jugada { float: right; width: 60px; height: 40px; margin: 0 0 6px 10px; border-radius: 6px; border: 1px solid var(--line-soft); }
.cartel-especial {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 9px 12px;
  border: 1px solid rgba(167,239,99,.55); border-radius: var(--r-2); color: var(--accent);
  background: linear-gradient(100deg, rgba(60,84,26,.6), rgba(12,19,24,.3));
}
.cartel-especial small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cartel-especial b { display: block; font-size: 1.32rem; line-height: 1.15; color: var(--text); }
.play-tag {
  display: flex; align-items: center; gap: 4px; font-style: normal;
  font-size: .7rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.play-elsewhere {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted); margin: 6px 0 8px;
}

/* ---------- Cartas de preparación ---------- */
.prep-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.prep-card {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px;
  background: linear-gradient(170deg, rgba(24,37,45,.85), rgba(12,19,24,.95));
  position: relative; overflow: hidden;
}
.prep-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--muted);
}
.prep-card.rare { border-color: rgba(128,191,255,.45); }
.prep-card.rare::before { background: var(--blue); }
.prep-card.epic { border-color: rgba(167,239,99,.5); }
.prep-card.epic::before { background: linear-gradient(180deg, var(--accent), var(--accent2)); }
.prep-card.unaffordable { opacity: .5; }
.prep-card.played { opacity: .45; }
/* Una línea y sólo una: en un móvil de 360 esto envolvía a dos y la mano
   entera crecía 55px, que es lo que separa la Semana de pasarse de largo. */
.card-when {
  display: flex; align-items: baseline; gap: 6px;
  font-size: .72rem; letter-spacing: .03em; color: var(--muted); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.card-when b, .card-when u { flex: 0 0 auto; text-decoration: none; }
.card-when i { font-style: normal; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card-when b { font-weight: 900; color: var(--blue); letter-spacing: .08em; }
.prep-card header { display: flex; align-items: center; gap: 8px; }
.prep-card h4 { margin: 0; font-size: .96rem; letter-spacing: -.015em; flex: 1; min-width: 0; }
.prep-card header b { font-size: 0.69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card-cost {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: .78rem; font-weight: 900;
  background: rgba(255,255,255,.09); color: var(--text);
}
.prep-card.epic .card-cost { background: rgba(167,239,99,.2); color: var(--accent); }
.prep-card p { margin: 0; font-size: .82rem; color: #b8c2c8; line-height: 1.45; font-style: italic; }
.card-hints { display: flex; flex-wrap: wrap; gap: 4px; }
.card-hints i {
  font-style: normal; font-size: 0.75rem; font-weight: 800; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted);
}
.card-match { font-size: 0.75rem; color: var(--accent2); line-height: 1.4; }
.card-played { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.prep-card .mini-btn { margin-top: auto; }

.prep-played, .prep-pending { font-size: .8rem; margin-bottom: 10px; }
.prep-played { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prep-played span, .prep-pending span { font-size: 0.69rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.prep-played i { font-style: normal; background: rgba(255,255,255,.06); border-radius: 999px; padding: 3px 9px; }
.prep-pending { border-left: 3px solid var(--accent2); background: rgba(148,215,85,.07); border-radius: 8px; padding: 9px 12px; }
.prep-pending ul { margin: 5px 0 0; padding-left: 16px; color: #c3ccd2; line-height: 1.5; }

/* La mano en una columna medía 757 px: se veían dos cartas y media y la
   decisión de la semana es comparar las cinco. En el móvil se arrastra. */
@media (max-width: 620px) {
  .prep-hand {
    display: grid; grid-auto-flow: column; grid-auto-columns: 64%;
    grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; margin-right: -14px;
    scrollbar-width: none;
  }
  .prep-hand::-webkit-scrollbar { display: none; }
  .prep-hand > .prep-card { scroll-snap-align: start; }
  /* Que se vea que hay más cartas a la derecha. */
  .prep-hand::after { content: ''; }
}

/* ---------- Álbum de cromos ---------- */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 11px; margin-bottom: 8px; }
.sticker {
  border: 1px solid var(--line); border-radius: 14px; padding: 13px;
  background: linear-gradient(160deg, rgba(37,48,26,.9), rgba(11,17,21,.96));
  position: relative; overflow: hidden;
}
.sticker::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
}
.sticker.rare { border-color: rgba(128,191,255,.4); }
.sticker.epic { border-color: rgba(167,239,99,.45); }
.sticker.unique { border-color: rgba(246,196,83,.6); }
.sticker.unique::after { background: linear-gradient(115deg, transparent 36%, rgba(246,196,83,.12) 50%, transparent 64%); }
.sticker-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sticker-top > div { flex: 1; min-width: 0; }
.sticker-top span { display: block; font-size: 0.69rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.sticker.unique .sticker-top span { color: var(--warn); }
.sticker.epic .sticker-top span { color: var(--accent); }
.sticker-top h4 { margin: 2px 0 0; font-size: .98rem; letter-spacing: -.02em; }
.sticker p { margin: 0 0 9px; font-size: .82rem; line-height: 1.45; color: #bdc7cd; }
.sticker-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.sticker-stats b { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }
.sticker-stats i { font-style: normal; font-size: 0.69rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sticker footer { font-size: 0.69rem; letter-spacing: .05em; color: var(--muted); border-top: 1px solid rgba(255,255,255,.07); padding-top: 7px; }
@media (max-width: 620px) { .sticker-grid { grid-template-columns: 1fr; } }

/* De dónde sales: el paso que hace que dos carreras no empiecen igual. */
.creator-options.origins { grid-template-columns: 1fr; gap: 9px; }
.creator-option .origin-hints { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-style: normal; }
.creator-option .origin-hints i {
  font-style: normal; font-size: 0.75rem; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted);
}
.creator-option.selected .origin-hints i { background: rgba(167,239,99,.15); color: var(--accent); }

/* El resumen del creador, con la cara que acabas de elegir. */
.creator-review { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.creator-review > div { flex: 1; min-width: 180px; }
.creator-review input { flex-basis: 100%; }
/* El nombre y la ficha iban pegados: "Carlos#10 · EI". */
.creator-review > div > strong { display: block; }

/* ---------- Representante ---------- */
.agent-card {
  display: flex; gap: 16px; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.03); padding: 15px 17px; margin-bottom: 16px;
}
.agent-card span { font-size: 0.69rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.agent-card strong { display: block; font-size: 1.1rem; margin: 3px 0 5px; }
.agent-card small { display: block; color: var(--muted); line-height: 1.5; max-width: 54ch; }
.agent-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 11px 0 0; padding: 0; font-size: .8rem; color: var(--muted); }
.agent-facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.agent-advice {
  margin: 8px 0; padding: 9px 12px; border-radius: 9px; font-size: .84rem; line-height: 1.45;
  border-left: 3px solid var(--warn); background: rgba(246,196,83,.08); color: #e6d9b8;
}
.agent-advice.honest { border-left-color: var(--accent2); background: rgba(148,215,85,.08); color: #cbdbe6; }

/* ---------- Prensa ---------- */
.press-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 20px; }
.press-meters > div { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; background: rgba(255,255,255,.03); }
.press-meters span { display: block; font-size: 0.69rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.press-meters b { display: block; font-size: 1.35rem; margin: 2px 0 7px; font-variant-numeric: tabular-nums; }
.press-feed { display: grid; gap: 11px; }
.clipping {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 12px;
  padding: 13px 15px; background: rgba(255,255,255,.025);
}
.clipping.praise { border-left-color: var(--accent); }
.clipping.neutral { border-left-color: var(--muted); }
.clipping.doubt { border-left-color: var(--warn); }
.clipping.attack { border-left-color: var(--danger); }
.clipping header { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.clipping header span { font-size: 0.69rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.clipping header i { font-style: normal; font-size: 0.69rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); }
.clipping.praise header i { color: var(--accent); background: rgba(167,239,99,.13); }
.clipping.doubt header i { color: var(--warn); background: rgba(246,196,83,.13); }
.clipping.attack header i { color: var(--danger); background: rgba(255,124,116,.13); }
.clipping header small { margin-left: auto; font-size: 0.75rem; color: var(--muted); }
.clipping h3 { margin: 0 0 5px; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.3; }
.clipping p { margin: 0; font-size: .86rem; line-height: 1.5; color: #b9c3c9; }
@media (max-width: 620px) { .agent-card { flex-direction: column; } .agent-card .btn { width: 100%; } }

/* ---------- La semana: qué bloquea y dónde está el botón de jugar ---------- */
/* Un botón que espera algo lo dice y te lleva allí (ver weekBtn en el front). */
.action-gate {
  flex-basis: 100%; margin: 0 0 2px; font-size: .76rem; font-weight: 700;
  color: #ecbb5b; letter-spacing: .01em;
}
.btn.is-blocked { opacity: .5; box-shadow: none; }
.btn.is-blocked:active { opacity: .7; }
.season-event.flash { animation: gate-flash .9s ease-out; }
@keyframes gate-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,187,91,0); }
  25% { box-shadow: 0 0 0 3px rgba(236,187,91,.55); }
  60% { box-shadow: 0 0 0 3px rgba(236,187,91,.25); }
}

/* El botón que continúa la semana. Estaba en medio del contenido, entre el
   foco de entrenamiento y la mano de cartas: había que buscarlo. Ahora es el
   último elemento de la pantalla y en móvil va pegado abajo, por encima de la
   barra de pestañas, donde está el pulgar. Lo secundario —simular, cerrar la
   semana— se queda en el flujo y no compite con él. */
.week-cta { display: grid; gap: 8px; margin: 18px 0 0; }
.week-cta .btn { width: 100%; justify-content: center; text-align: center; min-height: 52px; font-size: 1.04rem; }
.week-cta .action-gate { margin: 0; }

@media (max-width: 880px) {
  /* Pegado de verdad: `position: sticky` aquí no hace nada porque la tarjeta
     que lo contiene lleva `overflow: hidden` —y una capa de scroll que no
     scrollea no ancla nada—. Por eso la barra de acción llevaba meses
     quedándose en medio del contenido. Fijo, y el contenido reserva sitio. */
  .season-dashboard { padding-bottom: 72px; }
  .week-cta {
    position: fixed; z-index: 45;
    left: 12px; right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    margin: 0; padding: 10px;
    background: rgba(9,14,18,.96); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .dashboard-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .dashboard-actions .btn { flex: 1 1 46%; justify-content: center; text-align: center; }
}

/* ---------- El banquillo ---------- */
.bench-scene { border-left: 3px solid #a9c6d8; }
.bench-scene .eyebrow { color: #a9c6d8; }
.log-entry.bench b, .log-entry.bench span { color: #a9c6d8; }
.bench-scene.pitch-moment { border-left-color: var(--accent); }
.bench-scene.pitch-moment .eyebrow { color: var(--accent); }

/* ---------- La columna de consulta, plegada en el móvil ---------- */
.side-toggle { display: none; }

@media (max-width: 880px) {
  /* Dos pantallas de ficha, atributos y noticias al final de cada pestaña:
     en el móvil son consulta, no lectura. Se piden cuando se quieren. */
  .side-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin: 16px 0 0; padding: 13px 15px;
    background: rgba(255,255,255,.03); color: var(--text);
    border: 1px solid var(--line); border-radius: 13px;
    font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  }
  .side-toggle b { color: var(--accent); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
  .career-layout .sidebar { display: none; }
  .career-layout .sidebar.open { display: grid; gap: 11px; margin-top: 11px; }
}

/* ---------- Secciones plegables ---------- */
.fold { border: 1px solid var(--line); border-radius: 13px; margin: 12px 0; background: rgba(255,255,255,.015); }
.fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: .92rem; letter-spacing: -.01em;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary b { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; }
.fold > summary::after { content: '▾'; color: var(--accent); font-size: .8rem; }
.fold[open] > summary::after { content: '▴'; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > .market-grid, .fold > .talent-track { padding: 12px; }
.fold > .talent-fork { margin: 0 12px 12px; }

/* ---------- Lo que cuesta simular ---------- */
.sim-note { margin: -4px 0 14px; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.sim-cost {
  border-left: 3px solid #a9c6d8; background: rgba(19,45,66,.35);
  border-radius: 9px; padding: 12px 14px; margin: 14px 0;
}
.sim-cost > span { display: block; font-size: 0.69rem; font-weight: 900; letter-spacing: .09em; color: #a9c6d8; }
.sim-cost > strong { display: block; margin: 4px 0 3px; font-size: .95rem; }
.sim-cost > small { color: #9fa9b0; font-size: .76rem; line-height: 1.45; }

/* ---------- Diario de campaña ---------- */
.arc-journal { display: grid; gap: 12px; margin: 12px 0 22px; }
.arc-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  background: linear-gradient(150deg, rgba(24,37,45,.30), rgba(14,22,27,.18));
}
.arc-card.major { border-left: 3px solid var(--accent); }
.arc-card.campaign { border-left: 3px solid #a9c6d8; }
.arc-card.short { border-left: 3px solid #d7b567; }
.arc-card.closed { opacity: .78; border-left: 3px solid #58656e; }
.arc-card.closed.lost { border-left-color: #a4565f; }
.arc-card header { margin-bottom: 9px; }
.arc-stage {
  display: inline-block; font-size: 0.69rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 3px;
}
.arc-card.closed .arc-stage { color: var(--muted); }
.arc-card h3 { margin: 0 0 3px; font-size: 1.12rem; letter-spacing: -.02em; }
.arc-logline { margin: 0; font-size: .82rem; color: #9ea8af; line-height: 1.45; }
.arc-hook {
  border-left: 2px solid var(--accent); padding: 7px 11px; margin: 10px 0;
  background: rgba(167,239,99,.07); border-radius: 0 8px 8px 0;
}
.arc-hook span { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: .1em; color: var(--accent); }
.arc-hook strong { display: block; font-size: .9rem; margin-top: 2px; }
.jquests { display: grid; gap: 5px; margin: 10px 0; }
.jquest { display: grid; grid-template-columns: 2.6rem 1fr; gap: 8px; align-items: center; font-size: .8rem; }
.jquest b {
  text-align: center; font-size: 0.75rem; font-weight: 900; padding: 3px 0;
  border: 1px solid var(--line); border-radius: 6px; color: var(--muted);
}
.jquest.complete b { color: var(--accent); border-color: rgba(167,239,99,.4); }
.jquest.failed b { color: var(--danger); border-color: rgba(255,124,116,.35); }
.jquest.failed span { text-decoration: line-through; color: var(--muted); }
.jbeats { display: grid; gap: 9px; margin-top: 11px; border-top: 1px solid var(--line); padding-top: 11px; }
.jbeat { display: grid; grid-template-columns: 1.6rem 1fr; gap: 9px; }
.jbeat b { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.jbeat span { display: block; font-size: 0.69rem; font-weight: 800; letter-spacing: .07em; color: var(--muted); }
.jbeat p { margin: 2px 0 0; font-size: .86rem; line-height: 1.5; }
.jbeat em { display: block; margin-top: 3px; font-size: .78rem; color: #d7b567; }
.jmemories { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.jmemories span {
  font-size: 0.75rem; color: #e7d9a8; background: rgba(215,181,103,.10);
  border: 1px solid rgba(215,181,103,.28); border-radius: 99px; padding: 4px 10px;
}

/* ---------- La historia activa, arriba ---------- */
.arc-chip {
  display: grid; grid-template-columns: 1.3rem 1fr; gap: 3px 9px; width: 100%;
  text-align: left; margin: 0 0 9px; padding: 9px 12px; cursor: pointer;
  background: linear-gradient(100deg, rgba(167,239,99,.10), rgba(167,239,99,.03));
  border: 1px solid rgba(167,239,99,.28); border-radius: 12px; color: var(--text);
}
.arc-chip span { grid-row: span 2; align-self: center; font-size: 1rem; }
.arc-chip strong { font-size: .88rem; letter-spacing: -.01em; }
.arc-chip em { font-size: 0.75rem; color: var(--muted); font-style: normal; }
.arc-chip:active { background: rgba(167,239,99,.16); }
.rpg-hint {
  border-left: 3px solid var(--accent); background: rgba(167,239,99,.07);
  border-radius: 0 10px 10px 0; padding: 9px 12px; margin: 0 0 10px;
}
.rpg-hint span { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: .1em; color: var(--accent); }
.rpg-hint strong { display: block; font-size: .84rem; margin-top: 3px; line-height: 1.4; }
.jfold { margin: 10px 0 0; background: none; }
.jfold > summary { padding: 7px 0; font-size: .76rem; font-weight: 800; color: var(--muted); }
.jfold[open] > summary { border-bottom: 0; }
.jfold > .jbeats { padding: 0 0 4px; border-top: 0; }
.fold > .sticker-grid, .fold > .story-thread-grid { padding: 12px; }
.fold > .memory-wall, .fold > .mission-history, .fold > .quest-history, .fold > .principle, .fold > p { padding: 12px; margin: 0; }
.fold > .fold-body { padding: 4px 12px 12px; }
.fold > .fold-body > h3:first-child { margin-top: 6px; }

/* ---------- La previa del rival ---------- */
.briefing { border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; margin: 0 0 14px; background: rgba(255,255,255,.015); }
.briefing-head span { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: .1em; color: #a9c6d8; }
.briefing-head strong { display: block; font-size: 1.02rem; margin: 2px 0 6px; letter-spacing: -.02em; }
.briefing p { margin: 0 0 7px; font-size: .84rem; line-height: 1.5; color: #c8cfd4; }
.briefing .briefing-plan { color: #9ea8af; font-size: .8rem; }
.briefing-traits { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.briefing-traits i {
  font-style: normal; font-size: 0.75rem; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--line); color: #b9c3c9;
}
.briefing-weak { font-size: .8rem; color: #a7ec66; border-left: 2px solid var(--accent); padding: 4px 10px; }
.briefing-weak span { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: .1em; }
.briefing-locked { font-size: .75rem; color: var(--muted); margin-top: 6px; }

/* ---------- Postpartido en secuencia ---------- */
.post-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.post-dots i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); cursor: pointer; }
.post-dots i.done { background: rgba(167,239,99,.45); }
.post-dots i.on { background: var(--accent); }
.post-result { text-align: center; padding: 10px 0 6px; }
.post-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.post-teams > span { display: grid; justify-items: center; gap: 4px; font-size: .78rem; color: var(--muted); font-style: normal; }
.post-score { font-size: 3rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.post-result.won .post-score { color: var(--accent); }
.post-result.lost .post-score { color: var(--danger); }
.post-line { color: var(--muted); margin: 8px 0 0; }
.loot h4 { margin: 14px 0 6px; font-size: 0.69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.loot-xp { text-align: center; padding: 18px 12px; border: 1px solid rgba(167,239,99,.35); border-radius: 14px; background: radial-gradient(circle at 50% 0, rgba(167,239,99,.14), transparent 70%); }
.loot-xp span { display: block; font-size: 0.69rem; letter-spacing: .14em; color: var(--accent); font-weight: 900; }
.loot-xp strong { display: block; font-size: 2.6rem; letter-spacing: -.02em; line-height: 1.1; }
.loot-xp em { display: block; font-style: normal; color: var(--accent); margin-top: 4px; font-weight: 700; }
.loot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.loot-list li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.loot-list li b { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--accent); text-align: right; }
.loot-list li.rankup { border-color: rgba(246,196,83,.5); }
.loot-list li.rankup em { color: var(--warn); font-style: normal; font-weight: 800; }
.post-beat { margin: 6px 0; line-height: 1.5; }
.sticker-reveal { display: grid; gap: 10px; }
.lesson .choice.taken { border-color: var(--accent); }
.post-actions { margin-top: 16px; }
@media (max-width: 880px) {
  /* El mismo problema que ya se arregló en `.week-cta`, con el mismo
     arreglo: un paso largo del postpartido o del cierre de temporada —
     capítulos, el mundo, en qué te has convertido— dejaba el botón
     «Siguiente →» varias pantallas por debajo, en medio del contenido, en
     vez de al alcance del pulgar. `position: sticky` no sirve aquí por la
     misma razón de siempre —un ancestro con `overflow` que no es
     `visible` no ancla nada—, así que va fijo, como la acción de la semana. */
  .post-stepper { padding-bottom: 76px; }
  .post-stepper .post-actions {
    position: fixed; z-index: 45;
    left: 12px; right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    margin: 0; padding: 10px;
    display: flex; gap: 8px;
    background: rgba(9,14,18,.96); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .post-stepper .post-actions .btn { flex: 1; justify-content: center; text-align: center; }
}
.reveal { animation: reveal .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.loot-step .loot-xp { animation: pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .reveal, .loot-step .loot-xp { animation: none !important; } }


/* ---------- Tipografía por rol ---------- */
h1, h2, h3, .brand h1, .scene-head h2, .post-score, .loot-xp strong, .score strong, .final-score, .arc-card h3 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0; text-transform: none;
}
.brand h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.02em; }
.eyebrow, .tag, .arc-stage, .briefing-head span, .loot h4, .loot-xp span, .rpg-hint span, .action-gate, .arc-hook span, .jbeat span, .side-toggle b, .briefing-weak span {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .12em;
}
.score strong, .post-score, .loot-xp strong, .metric-row b, .career-topbar strong, .summary-box strong, .stat b, .die, .total, .jquest b, .loot-list li b, .sb-clock span, .fixture b, .mini-row strong, .table-row strong, .table-row i {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.die { font-family: var(--font-display); }

/* ---------- De dónde sale una tirada ---------- */
/* Los modificadores sólo se veían después de elegir, sumados en un «tu bonus
   +5» que no explicaba nada. Ahora se explican en la decisión: en narrativo,
   lo que juega en contra y cuántas veces sale bien; en detallado, cada
   sumando con su número y lo que hay que sacar en los dados. */
/* El selector vale para las dos pantallas: la carrera pinta `.choice` y la
   mazmorra `.rpg-choice`. Antes esto sólo existía en la carrera y elegir en la
   campaña era elegir a ciegas. */
.choice .mods, .rpg-choice .mods { display: flex; flex-wrap: wrap; gap: 4px 5px; margin: 7px 0 0; font-style: normal; }
.choice .mods i, .rpg-choice .mods i {
  font-style: normal; font-size: .76rem; padding: 3px 8px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.02);
}
.choice .mods i.bien, .rpg-choice .mods i.bien { color: #cfe8a8; border-color: rgba(149,243,61,.28); }
.choice .mods i.mal, .rpg-choice .mods i.mal { color: #f4c0bd; border-color: rgba(255,90,84,.3); }
.choice .mods i.dif, .rpg-choice .mods i.dif { color: var(--muted); }
.choice .mods i.od, .rpg-choice .mods i.od { color: var(--text); border-color: rgba(255,255,255,.14); }
.choice .riesgo { font-weight: 700; }
.choice .riesgo.good { color: var(--accent); }
.choice .riesgo.neutral { color: var(--legacy); }
.choice .riesgo.bad { color: var(--injury); }

/* El mismo desglose, ya elegida la acción y antes de tirar. */
.desglose { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.desglose li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: rgba(255,255,255,.02); font-size: .86rem; color: var(--muted);
}
.desglose li b { font-family: var(--font-display); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.desglose li b.bien { color: var(--accent); }
.desglose li b.mal { color: var(--injury); }
.desglose li.contra { border-left: 3px solid var(--rival); }
.desglose li.contra b { color: var(--rival); }

/* ---------- Los dados ---------- */
/* Eran dos cifras grandes en un cuadrado blanco: se leían, no se veían. Ahora
   son caras de dado con sus puntos, y el dado que acabas de repetir se pinta
   de verde para que el cambio no haya que buscarlo. */
.dado { display: block; }
.dado .dado-cara { fill: #e9edf0; stroke: #aab6be; stroke-width: 1.4; }
.dado .dado-luz { fill: rgba(255,255,255,.55); }
.dado .dado-pip { fill: #101820; }
.dado .dado-interrogante { fill: #7d8b95; font-family: var(--font-display); font-size: 34px; font-weight: 700; }
/* El dado bajo: el que repetiría la concentración. Se marca antes de gastar el
   punto, para que el botón no prometa a ciegas. */
.die.baja .dado-cara { stroke: var(--legacy); stroke-dasharray: 4 3; stroke-width: 2; }
.die.repetido .dado-cara { stroke: var(--accent); stroke-width: 2.4; }
.die.repetido .dado-pip { fill: #17330a; }
.die.repetido .dado-luz { fill: rgba(149,243,61,.28); }
.dice-row .plus { font-family: var(--font-display); font-size: 1.5rem; color: var(--muted); }

/* Lo que ha cambiado al gastar concentración. Sin esto, gastar un punto y que
   el grado no se mueva dejaba la pantalla idéntica. */
.cc-linea {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px;
  margin: 12px 0 0; padding: 9px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-2); background: rgba(149,243,61,.05); font-size: .9rem;
}
.cc-linea span { color: #cbd5da; display: inline-flex; align-items: center; gap: 7px; }
.cc-linea span b { color: var(--text); }
.cc-linea .cc-sube { color: var(--accent); font-family: var(--font-display); }
.cc-linea .cc-igual { color: var(--muted); }
.cc-falta { margin: 10px 0 0; color: var(--muted); font-size: .88rem; }
.cc-falta b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 880px) {
  /* Lo esencial y lo que se decide, a 15-16px; la metadata puede ser pequeña. */
  html { font-size: 16px; }
  .choice strong, .btn, .tab small + *, .post-line, .scene p, .scene-head p, .season-event p, .post-story p, .arc-logline, .jbeat p, .briefing p, .objective-card strong, .next-match-card small { font-size: max(.95rem, 15px); }
  .choice span, .choice small, .hint, .muted { font-size: max(.82rem, 13px); }
  .choice-hints i { font-size: 12px; }
  .btn, .choice, .tab, .training-card, [data-play-card], .fold > summary, .side-toggle, .arc-chip { min-height: 44px; }
  .btn.mini-btn { min-height: 44px; }
  .mini-table-head button { min-height: 44px; padding: 0 8px; font-size: max(.9rem, 15px); }
  /* Metadata que puede ser pequeña, pero no ilegible. */
  .sim-note, .action-gate, .hint, .post-line, .arc-logline { font-size: max(.8rem, 13px); }
}

/* ---------- Colores del club ---------- */
.arc-chip { border-color: color-mix(in srgb, var(--club-primary) 55%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--club-primary) 22%, transparent), transparent); }
.next-match-card { border-color: color-mix(in srgb, var(--club-primary) 60%, var(--line)); }
.career-topbar > div:first-child strong { color: var(--club-accent); }
.tabbar .tab.active { color: var(--club-accent); background: color-mix(in srgb, var(--club-accent) 12%, transparent); }

/* ---------- Hubs: Personaje y Club ---------- */
.hub-tabs { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); overflow-x: auto; scrollbar-width: none; }
.hub-tabs button { flex: 1 0 auto; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 700; font-size: .86rem; white-space: nowrap; }
.hub-tabs button.active { background: color-mix(in srgb, var(--club-accent) 16%, transparent); color: var(--club-accent); }
.bio-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 10px; }
.bio-head h2 { margin: 0 0 2px; }
.identity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.identity-grid div { display: flex; justify-content: space-between; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.identity-grid b { font-family: var(--font-mono); color: var(--accent); }
.news-list { display: grid; gap: 8px; }
.news { display: grid; grid-template-columns: 2.6rem 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.news b { font-family: var(--font-mono); color: var(--muted); font-size: .8rem; }
.news strong { display: block; font-size: .95rem; }
.news span { color: var(--muted); font-size: .84rem; }
.news.important { border-left: 3px solid var(--accent); }

/* ---------- HUD del partido ---------- */
.sb-stats { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

/* Los noventa minutos, de un vistazo: lo jugado, el descanso y una marca por
   cada cosa que ha pasado, en el minuto en que pasó. */
.sb-track { position: relative; height: 6px; margin: 8px 0 2px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: visible; }
.sb-track .sb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, rgba(149,243,61,.45), var(--accent)); }
.sb-track .sb-half { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.28); }
.sb-track .mk { position: absolute; top: -3px; width: 6px; height: 12px; margin-left: -3px; border-radius: 2px; background: var(--muted); }
.sb-track .mk.goal_for { background: var(--accent); box-shadow: 0 0 0 2px rgba(149,243,61,.2); }
.sb-track .mk.goal_against { background: var(--rival); box-shadow: 0 0 0 2px rgba(228,63,63,.2); }
.sb-track .mk.card { background: var(--legacy); }
.sb-track .mk.injury { background: var(--injury); }
.sb-track .sb-now {
  position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.sb-fm { flex: 1; text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; min-height: 36px; }
.sb-radio { width: 40px; min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04); font-size: 1rem; }
.sb-fm[aria-expanded="true"], .sb-radio[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.hud-sheet { max-height: 72vh; overflow: auto; }
.hud-sheet .sidebar { display: grid; gap: 10px; margin-top: 10px; }
.radio-log .log-entry { padding: 6px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 881px) { .sb-stats { display: none; } .hud-sheet, .nav-sheet-backdrop#hud-sheet-close { display: none; } }

@media (max-width: 880px) {
  /* En móvil el panel completo se pide desde el HUD; en línea no se repite. */
  .match-shell-v10 > .live-match-center, .match-shell-v10 > .layout > .sidebar { display: none; }
  .hud-sheet .live-match-center, .hud-sheet .sidebar { display: block; }
  .sb-fm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Las primeras veces ---------- */
/* Los hitos, juntos y con su fecha. Lo que falta se ve igual: un hueco con
   nombre es una razón para seguir jugando. */
.hitos { display: grid; gap: 7px; margin: 10px 0 18px; }
.hito {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel);
}
.hito.logrado { border-left: 3px solid var(--legacy); }
.hito.pendiente { opacity: .62; border-left: 3px solid var(--line); }
.hito b { display: flex; color: var(--legacy); }
.hito.pendiente b { color: var(--muted); }
.hito strong { display: block; font-size: .98rem; }
.hito span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.hito em { font-style: normal; font-family: var(--font-display); font-size: .82rem; color: var(--legacy); font-variant-numeric: tabular-nums; }
.hito em.muted { color: var(--muted); }

/* ---------- Lo que ha pasado en el partido ---------- */
/* La retransmisión completa vive detrás de un botón que casi nadie abre. Los
   últimos sucesos, en cambio, son el hilo del partido: van en pantalla. */
.match-feed { margin: 14px 0 0; padding: 11px 13px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: rgba(8,13,16,.6); }
.mf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mf-head span { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mf-todo { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent); font-size: .82rem; font-weight: 700; }
.match-feed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.match-feed li { display: grid; grid-template-columns: 30px 18px minmax(0, 1fr); align-items: start; gap: 8px; font-size: .86rem; color: var(--muted); line-height: 1.35; }
.match-feed li b { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); }
.match-feed li i { color: var(--muted); display: flex; }
.match-feed li.ahora { color: var(--text); }
.match-feed li.ahora b, .match-feed li.ahora i { color: var(--text); }
.match-feed li.good b, .match-feed li.good i { color: var(--accent); }
.match-feed li.bad b, .match-feed li.bad i { color: var(--injury); }
.match-feed li.warn b, .match-feed li.warn i { color: var(--legacy); }
@media (max-width: 880px) { .match-shell-v10 .match-feed { order: 3; } .match-shell-v10 .live-match-center { order: 4; } }

/* ---------- Semana: cómo estás, y el foco ---------- */
.status-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.status-strip span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: .84rem; font-weight: 700; background: rgba(255,255,255,.02); }
/* El icono hereda el color del chip y el chip dice el estado con el color:
   verde va bien, ámbar hay que mirarlo, rojo duele. Sin emojis, que cada
   sistema operativo dibuja a su manera. */
.status-strip .ic { opacity: .95; }
.status-strip .st-ok { color: var(--accent); border-color: rgba(149,243,61,.34); background: rgba(149,243,61,.08); }
.status-strip .st-medio { color: var(--legacy); border-color: rgba(215,169,61,.32); background: rgba(215,169,61,.07); }
.status-strip .st-mal { color: var(--injury); border-color: rgba(255,90,84,.32); background: rgba(255,90,84,.07); }

/* Los iconos, en general: mismo peso que el texto al que acompañan. */
.ic { flex: 0 0 auto; vertical-align: -.16em; }
.focus-pick { margin: 0 0 8px; }
.focus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; margin-top: 6px; }
.focus-opt { text-align: left; padding: 9px 12px; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); color: var(--text); }
.focus-opt strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.focus-opt small { color: var(--muted); font-size: .78rem; }
.focus-opt:active { border-color: var(--accent); }
/* Qué factor de alineación mueve cada foco: antes se elegía a ciegas y no se
   sabía que entrenar también cuenta para si juegas el domingo. */
.focus-pick .eyebrow .focus-hint { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); font-size: .78rem; }
/* «Recuperación» es la única de las siete que además cuenta para el estado
   físico, y merecía decirlo sin costarle una línea entera al alto de la
   pantalla —el hueco ya estaba muy ajustado—. Va en la esquina, fuera del
   flujo: no empuja nada. */
.focus-opt .focus-factor { display: block; margin-top: 3px; font-style: normal; font-size: .66rem; line-height: 1.15; color: var(--accent2); letter-spacing: .01em; }
.focus-chosen { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 9px 12px; margin: 0 0 12px; border-left: 3px solid var(--club-accent); background: rgba(255,255,255,.02); border-radius: 0 10px 10px 0; }
.focus-chosen span { font-family: var(--font-display); font-size: 0.69rem; letter-spacing: .12em; color: var(--club-accent); }
.focus-chosen strong { font-family: var(--font-display); font-size: 1.15rem; }
.focus-chosen small { grid-column: 1 / -1; color: var(--muted); }
.nav-sheet-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.nav-sheet-settings button { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--muted); font-size: .84rem; }
.nav-sheet-settings button.on { color: var(--accent); border-color: rgba(167,239,99,.4); }

/* ---------- Epílogo ---------- */
.epi-list { display: grid; gap: 8px; }
.epi-chapter, .epi-person { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.epi-chapter.won { border-left: 3px solid var(--accent); }
.epi-chapter.lost, .epi-chapter.failed { border-left: 3px solid var(--danger); }
.epi-chapter strong, .epi-person strong { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.epi-chapter p, .epi-person p { margin: 4px 0 0; color: #cad2d8; font-size: .88rem; }
.epi-person span { display: block; font-size: .8rem; }
.loot-h { margin: 14px 0 6px; font-size: 0.69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sb-last.resumed { color: var(--blue); }

/* ---------- Pitido inicial ---------- */
.kickoff { text-align: center; padding: 26px 20px 30px; }
.kickoff-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 14px 0 6px; }
.kickoff-teams > span { display: grid; justify-items: center; gap: 6px; font-style: normal; font-size: .9rem; font-weight: 700; }
.kickoff-teams b { color: var(--muted); font-family: var(--font-display); }
.kickoff-role { font-family: var(--font-display); font-size: 1.25rem; margin: 10px 0 2px; }
.kickoff-order { color: #cad2d8; margin: 0 0 18px; }
.kickoff .buttons { justify-content: center; }
.btn.big { font-size: 1.05rem; padding: 14px 22px; }

/* ---------- Mínimos que el QA de móvil hace cumplir ---------- */
/* Los encontró midiendo en cuatro tamaños: etiquetas de 9,28 px en la barra
   superior, botones del HUD de 36, controles de velocidad de 27 y pestañas de
   hub de 40. Nada por debajo de 12 px de texto ni de 44 px de objetivo. */
.career-topbar span, .season-topbar span,
.career-topbar > div span, .season-topbar > div span { font-size: 12px; letter-spacing: .08em; }
.sb-fm, .live-scorebar .sb-you small, .live-scorebar .sb-clock small, .sb-you span { font-size: 12px; }
@media (max-width: 880px) {
  .hub-tabs button { min-height: 44px; }
  .sb-fm, .sb-radio { min-height: 44px; }
  .speed-set .speed { min-height: 44px; min-width: 44px; }
  .nav-sheet-head button { min-height: 44px; min-width: 44px; font-size: 1.1rem; }
  /* Los doce atributos en una columna eran tres pantallas y media en un móvil
     grande: en dos columnas caben en la mitad. */
  .develop-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .develop-row { grid-template-columns: 1fr; gap: 4px; align-items: start; }
  .develop-row .btn { width: 100%; }
}
/* Los doce atributos siguen en dos columnas incluso a 360px: en una sola eran
   1.456 px de scroll, casi dos pantallas para una lista de números. */
@media (max-width: 380px) { .develop-row { padding: 7px; } .develop-row strong { font-size: .9rem; } }
.fold > .spec-grid { padding: 12px; }
.mini-table-fold > .mini-table { border: 0; margin: 0; padding: 0 12px 12px; }
.week-context > .fold-body > .briefing { margin-top: 0; }
/* Cuando los dos nombres no caben en una línea, el "vs" se quedaba colgando al
   final de la primera. O caben los tres o cada uno va en su renglón. */
@media (max-width: 420px) { .fixture-line { display: grid; justify-items: start; gap: 4px; } .fixture-line b { padding-left: 38px; } }

/* ---------- Primeras veces ---------- */
/* Una pista, en la pantalla donde hace falta y en el momento en que hace
   falta. No es un modal: no tapa el juego, no se pone delante de un botón y se
   cierra con un gesto. Aparece una vez y no vuelve. */
.first-time {
  display: grid; gap: 8px; justify-items: end;
  margin: 0 0 12px; padding: 11px 13px;
  border: 1px solid rgba(215,181,103,.38); border-left-width: 3px;
  border-radius: 12px; background: rgba(215,181,103,.08);
}
/* El texto usa el ancho entero y el botón va debajo, a la derecha. Con el
   botón al lado, la columna de texto quedaba en 150px y la tarjeta medía 400:
   media pantalla de scroll para tres frases. */
.first-time > div { justify-self: stretch; }
.first-time strong {
  display: block; font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: #e7d9a8;
}
.first-time p { margin: 4px 0 0; color: var(--muted); line-height: 1.4; font-size: .9rem; }
.first-time .btn { min-height: 44px; white-space: nowrap; }
/* El botón se queda a la derecha también en móvil: en su propia fila costaba
   media pantalla de scroll en la Semana, que es donde sale la primera. */
.first-time .btn { padding: 10px 16px; }

/* Siete focos en dos columnas estrechas: cada descripción se partía en tres
   líneas y el bloque medía media pantalla. En el móvil se recorta a una línea
   —el nombre ya dice casi todo, y el texto entero sale al elegirlo—. */
@media (max-width: 480px) {
  /* auto-fill con minmax(150px) se pasaba por dos píxeles del ancho y caía a
     una sola columna: siete filas en vez de cuatro. */
  /* minmax(0,…): con 1fr a secas el texto sin cortes fijaba el ancho mínimo
     de la columna y la rejilla se salía de la pantalla. */
  .focus-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .focus-opt { min-height: 44px; padding: 8px 10px; }
  .focus-opt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Kit visual v1: escenarios, retratos y cartas ---------- */
/* La regla del kit es 80% oscuro. Una foto a pelo detrás de un texto rompe
   esa proporción y deja de leerse, así que todo escenario va con su cortina.
   La imagen pone el sitio; el texto sigue mandando. */
.escena {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden;
  background-image: var(--escena); background-size: cover; background-position: center;
  opacity: .55;
}
.escena::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,15,.55) 0, rgba(8,12,15,.82) 62%, rgba(8,12,15,.96) 100%);
}
/* Cuando el texto va al lado y no encima, la cortina se va a un lado. */
.escena.lateral::after {
  background: linear-gradient(96deg, rgba(8,12,15,.95) 0, rgba(8,12,15,.78) 46%, rgba(8,12,15,.42) 100%);
}
.escena.suave { opacity: .38; }
.con-escena { position: relative; overflow: hidden; isolation: isolate; }
.con-escena > *:not(.escena) { position: relative; z-index: 1; }

/* Los retratos. Recortados en 4:5, con un filo de luz que los separa del
   fondo: sin él, una foto oscura sobre un panel oscuro es una mancha. */
.retrato {
  margin: 0; flex: 0 0 auto; width: 64px; aspect-ratio: 4 / 5;
  border-radius: 12px; overflow: hidden; position: relative;
  border: 1px solid var(--line); background: var(--panel2);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.retrato::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(8,12,15,.7) 100%);
}
.retrato figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: var(--text); z-index: 1;
}
.retrato.grande { width: 92px; border-radius: 14px; }
.retrato.rol-coach { border-color: rgba(215,169,61,.42); }
.retrato.rol-ally { border-color: rgba(149,243,61,.36); }
.retrato.rol-rival { border-color: rgba(228,63,63,.42); }

/* Quién habla: retrato a la izquierda, lo que dice a la derecha. */
.habla { display: flex; gap: 12px; align-items: flex-start; }
.habla > div { flex: 1; min-width: 0; }
.habla .quien {
  display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}

/* Las cartas de arte: 3:5, como las del kit, y el color dice de qué van. */
.arte-carta {
  position: relative; aspect-ratio: 308 / 512; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel2);
}
.arte-carta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arte-carta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,12,15,.9) 100%);
}
.arte-carta.tono-quest { border-color: rgba(149,243,61,.4); }
.arte-carta.tono-rival { border-color: rgba(228,63,63,.45); }
.arte-carta.tono-memoria { border-color: rgba(215,169,61,.45); }
.arte-carta.tono-lesion { border-color: rgba(255,90,84,.45); }

/* Una banda de escenario al principio de una pantalla: dice dónde estás antes
   de que leas nada. */
.banda-escena {
  position: relative; margin: 0 0 14px; border-radius: var(--r-3, 16px); overflow: hidden;
  border: 1px solid var(--line); min-height: 128px; display: flex; align-items: flex-end;
  padding: 14px; isolation: isolate;
}
/* `:not(.escena)`: sin esto, esta regla pisaba el `position:absolute` del
   escenario —es más específica— y lo dejaba en el flujo con altura cero, o
   sea invisible. */
.banda-escena > *:not(.escena) { position: relative; z-index: 1; }
.banda-escena .eyebrow { margin: 0; }
.banda-escena h2 { margin: 2px 0 0; }

/* La previa: el túnel detrás, los escudos delante y el entrenador diciéndote
   lo que espera de ti. Es la última pantalla antes de jugar, y tiene que
   parecerlo. */
.kickoff-escena { border: 1px solid var(--line); border-radius: var(--r-3); padding: 18px 16px 16px; margin-bottom: 14px; min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; }
.kickoff-escena .kickoff-teams { margin: 10px 0 6px; }
.kickoff-escena .kickoff-role { margin: 0; color: var(--text); font-weight: 700; }
.orden-entrenador {
  border: 1px solid var(--line); border-left: 3px solid var(--legacy);
  border-radius: var(--r-2); padding: 12px; margin-bottom: 14px; background: var(--panel);
}
.orden-entrenador .kickoff-order { margin: 0; font-size: 1.02rem; line-height: 1.45; }
/* La cita del entrenador se lee, no se contempla: alineada a la izquierda
   aunque la previa esté centrada. */
.orden-entrenador, .orden-entrenador .kickoff-order, .orden-entrenador .quien { text-align: left; }
/* El escenario del partido se queda quieto mientras el contenido se desplaza:
   es el sitio, no parte del texto. */
.escena.fija { position: fixed; inset: 0; border-radius: 0; }
.match-shell-v10.con-escena { isolation: auto; }
/* El estadio de fondo no puede costar el marcador. `.con-escena` hace dos
   cosas que matan cualquier `sticky` de dentro: pone `overflow: hidden` en sí
   mismo —una capa de scroll que no scrollea no ancla nada— y `position:
   relative` a todos sus hijos, que gana por orden a la regla del marcador.
   Aquí el fondo es `.escena.fija`, fijo al viewport, así que no necesita el
   recorte. Y el marcador vuelve a pegarse, que era la mitad de la queja:
   a mitad de partido no se veía ni el minuto ni el resultado. */
.match-shell-v10.con-escena { overflow: visible; }
@media (max-width: 880px) {
  .match-shell-v10.con-escena > .live-scorebar { position: sticky; top: 0; z-index: 30; }
  .match-shell-v10 > .sb-stats { order: 1; margin: 0 0 10px; }
}

/* Un fallo que venía de antes del rediseño: `.scene` —el bloque donde se
   decide dentro del partido— no tenía relleno propio. El texto salía pegado
   al borde de la tarjeta y la primera letra del minuto quedaba debajo del
   filo de color del banquillo. */
.scene { padding: 16px 15px 14px; }
.bench-scene { padding-left: 14px; }

/* El postpartido: la escena donde pasa y quién te habla. */
.post-story.con-escena { padding: 16px 15px 14px; border-radius: var(--r-3); }
.post-story .habla { margin-bottom: 8px; }
.post-story .habla h3 { margin: 2px 0 0; }
.post-story .ps-body { margin-top: 10px; }
.post-result.con-escena { padding: 18px 14px; border-radius: var(--r-3); }
.post-result.won .escena::after { background: linear-gradient(180deg, rgba(8,12,15,.42) 0, rgba(8,12,15,.84) 66%, rgba(8,12,15,.96) 100%); }
.post-result.lost .escena { opacity: .22; filter: saturate(.55); }

/* Una historia abierta tiene cara. El arte va arriba, recortado en banda, y el
   texto encima: la imagen sitúa, el título manda. */
.arc-card.con-arte { position: relative; overflow: hidden; isolation: isolate; }
.arc-arte { position: absolute; inset: 0 0 auto 0; height: 116px; z-index: 0; }
.arc-arte img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; opacity: .5; }
.arc-arte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,15,.42) 0, rgba(8,12,15,.9) 78%, var(--panel) 100%);
}
.arc-card.con-arte > *:not(.arc-arte) { position: relative; z-index: 1; }
.arc-card.con-arte > header { min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; }

/* La concentración, como puntos: cinco cargas que se gastan. Con emojis azules
   cada móvil pintaba un círculo distinto. */
.sb-you .conc { display: flex; gap: 3px; justify-content: flex-end; align-items: center; }
.sb-you .conc i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(149,243,61,.55); }
.sb-you .conc em { font-style: normal; font-size: 11px; color: var(--muted); }
.sb-you span { display: inline-flex; align-items: center; gap: 3px; }
.relations-mini span { display: inline-flex; align-items: center; gap: 5px; }
.arc-chip > span { display: inline-flex; align-items: center; color: var(--accent); }
/* Los iconos que antes eran emojis viven ahora en cajas: se centran y toman el
   color de su contexto. */
.thread-icon, .pillar-k, .highlight-icon { display: flex; align-items: center; justify-content: center; }
.pillar-k { color: var(--accent); }
.highlight-icon { color: currentColor; }
.training-grid .ic, .mini-gear .ic, .relations-mini .ic { color: var(--muted); }
.mini-gear span, .stats-card .playerline span { display: inline-flex; align-items: center; gap: 5px; }
.btn .ic, .choice strong .ic { vertical-align: -.18em; margin-right: 2px; }
.speed-set .speed { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Pretemporada ---------- */
.preseason .pre-dots { display: flex; gap: 6px; margin: 0 0 12px; }
.preseason .pre-dots i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.preseason .pre-dots i.on { background: var(--accent); }
.preseason .pre-dots i.done { background: rgba(149,243,61,.45); }
.preseason-card { position: relative; overflow: hidden; padding: 18px 16px; }
.preseason-card .pre-body { margin: 10px 0 16px; font-size: max(.98rem, 15px); line-height: 1.55; color: #cbd5da; }
.preseason .hint { margin-top: 12px; }

/* ---------- Tu sitio en la plantilla ---------- */
/* La pregunta que importa cada semana: ¿voy a jugar? El escalón, hacia dónde
   se mueve y quién tienes delante. Sin fórmulas: eso va en modo detallado. */
.rol-panel {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-2); padding: 10px 13px 9px; margin: 0 0 10px; background: var(--panel);
}
.rol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rol-head strong { font-family: var(--font-display); font-size: 1.32rem; letter-spacing: -.01em; }
.rol-flecha { font-style: normal; color: var(--accent); }
.rol-escalera { display: flex; gap: 3px; margin: 6px 0 6px; }
.rol-escalera i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.rol-escalera i.on { background: var(--accent); }
.rol-recado { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.35; }
.rol-delante { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; }
.rol-delante span { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rol-delante b { color: var(--rival); }
.rol-porque { margin: 7px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.rol-porque b { color: var(--text); font-weight: 600; }

/* El por qué en modo detallado: los seis factores con su flecha, y lo que
   falta para el siguiente escalón. Flechas, no decimales: el jugador no
   necesita la fórmula, necesita saber dónde apretar. */
.rol-factores { margin: 9px -13px -9px; padding: 9px 13px 10px; border-top: 1px solid var(--line); background: rgba(0,0,0,.18); }
.rf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.rf-head span, .rf-head b { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.rf-head span { color: var(--muted); }
.rf-head b { color: var(--accent); }
.rol-factores ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 14px; }
.rol-factores li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: .84rem; color: var(--muted); }
.rol-factores li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rol-factores li em { font-style: normal; font-weight: 700; color: var(--muted); }
.rol-factores li.sube em { color: var(--accent); }
.rol-factores li.baja em { color: var(--injury); }
.rf-score { margin: 8px 0 0; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rf-score b { color: var(--text); }
@media (max-width: 360px) { .rol-factores ul { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Crédito ---------- */
/* En modo detallado el número acompaña a la etiqueta; no la sustituye. */
.credito-head strong small, .credito-dims b small { font-size: .74em; font-weight: 600; opacity: .72; font-variant-numeric: tabular-nums; }
/* Por defecto se lee, no se calcula: una etiqueta y una flecha. Los números
   están debajo, para quien quiera mirarlos, y el «¿por qué?» guarda las
   últimas razones por las que algo se movió. */
.credito { border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px 13px; margin: 14px 0; background: var(--panel); }
.credito-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.credito-head strong { font-family: var(--font-display); font-size: 1.2rem; }
.credito-head em { font-style: normal; }
.credito-diverge { margin: 7px 0 0; color: var(--legacy); font-size: .93rem; }
.credito-dims { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.credito-dims li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; position: relative; padding-bottom: 6px; }
.credito-dims span { font-size: .9rem; color: var(--muted); }
.credito-dims b { font-family: var(--font-display); font-size: .95rem; letter-spacing: .02em; }
.credito-dims i { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: currentColor; opacity: .5; }
.cr-great { color: var(--accent); } .cr-good { color: var(--accent2); }
.cr-neutral { color: var(--muted); } .cr-warn { color: var(--legacy); }
.cr-bad { color: #ffa07c; } .cr-critical { color: var(--injury); }
.credito-why { margin: 10px 0 0; }
.cr-linea { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.cr-linea b { font-family: var(--font-mono); font-size: .85rem; }
.cr-linea b.sube { color: var(--accent); } .cr-linea b.baja { color: var(--injury); }
.cr-linea span { color: var(--muted); font-size: 12px; }
.cr-linea em { font-style: normal; }
.cr-linea i { font-style: normal; color: var(--muted); font-size: 12px; font-family: var(--font-mono); }

/* El mundo alrededor: quién sube y quién baja. No los veintitrés. */
.mundo-credito { border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px 13px; margin: 0 0 14px; background: var(--panel); }
.mundo-credito h3 { margin: 0 0 8px; font-size: 1.1rem; }
.mc-linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.mc-linea:last-child { border-bottom: 0; }
.mc-linea strong { display: block; font-size: .96rem; }
.mc-linea span { display: block; font-size: 12px; color: var(--muted); }
.mc-linea b { font-family: var(--font-display); font-size: .95rem; white-space: nowrap; }

/* ---------- Un gol se tiene que ver ---------- */
/* Antes un gol tenía el mismo tratamiento que una amarilla: mismo icono, mismo
   marco, mismo tamaño. Se pasaba de largo leyendo el minuto. Ahora para la
   pantalla, dice el marcador y se nota a un metro. */
.match-highlight.es-gol {
  border-width: 2px; padding-top: 6px;
  animation: golEntra 480ms var(--ease) both;
}
.match-highlight.es-gol .highlight-icon { transform: scale(1.35); }
.gol-cartel {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  margin: 2px 0 6px;
}
.gol-cartel b {
  font-family: var(--font-display); font-size: clamp(2.6rem, 11vw, 3.6rem);
  font-weight: 700; letter-spacing: .06em; line-height: 1;
}
.gol-cartel i {
  font-style: normal; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
  padding: 3px 11px; border-radius: 9px; border: 1px solid currentColor;
}
.match-highlight.gol-tuyo { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(149,243,61,.25), 0 18px 44px rgba(149,243,61,.12); }
.match-highlight.gol-tuyo .gol-cartel { color: var(--accent); }
.match-highlight.gol-tuyo .highlight-icon { color: var(--accent); }
.match-highlight.es-gol.against { border-color: var(--rival); }
.match-highlight.es-gol.against .gol-cartel { color: var(--rival); }
.match-highlight.es-gol.against .highlight-icon { color: var(--rival); }
/* Desplazamiento y no escala: escalar la tarjeta entera deformaba lo que mide
   cualquiera que la mida a mitad de vuelo —el QA la pilló en 42,2px— y además
   un salto de tamaño en una tarjeta grande marea más que empuja. */
@keyframes golEntra {
  from { transform: translateY(10px); opacity: .35; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .match-highlight.es-gol { animation: none; } }

/* ---------- Y el tuyo se tiene que ver más que ninguno ---------- */
/* Un gol del rival paraba la pantalla con un cartel; el tuyo era una frase
   pegada al final de un párrafo, en la misma tarjeta con la que se cuenta un
   pase al hueco. Lo más importante que puedes hacer en noventa minutos era lo
   menos visible del juego. */
.resolution.es-gol {
  position: relative; isolation: isolate;
  border: 2px solid var(--accent); border-radius: var(--r-3);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(149,243,61,.14), transparent 62%),
    linear-gradient(180deg, rgba(17,26,32,.96), rgba(8,12,15,.96));
  box-shadow: 0 0 0 1px rgba(149,243,61,.22), 0 22px 54px rgba(149,243,61,.14);
  animation: golEntra 480ms var(--ease) both;
}
.resolution.es-gol .gol-cartel { justify-content: flex-start; color: var(--accent); margin-bottom: 2px; }
.resolution.es-gol .gol-cartel b { font-size: clamp(3rem, 15vw, 4.6rem); }
.resolution.es-gol .eyebrow { color: var(--accent); }
.resolution.es-gol h2 { font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
/* Quién lo ha metido, con dorsal: es tu gol, no «un gol». */
.gol-firma { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; }
.gol-dorsal {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.gol-firma strong { display: block; font-size: 1.05rem; }
.gol-firma small { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
/* Y el marcador, que es lo que se mira, acusa el golpe. */
.resolution.es-gol ~ * .teams strong, .match-shell-v10.hay-gol .teams strong {
  animation: golMarcador 900ms var(--ease) 2 both;
}
@keyframes golMarcador {
  0%, 100% { color: var(--accent); text-shadow: none; }
  40% { color: var(--accent); text-shadow: 0 0 18px rgba(149,243,61,.55); }
}
/* La asistencia no es un gol, pero tampoco es un pase más. */
.resolution.es-asistencia { border-left: 2px solid var(--accent); padding-left: 28px; }
@media (prefers-reduced-motion: reduce) {
  .resolution.es-gol { animation: none; }
  .match-shell-v10.hay-gol .teams strong { animation: none; color: var(--accent); }
}
@media (max-width: 620px) { .resolution.es-gol { padding: 20px 18px 22px; } }
/* El tablero va dentro de la tarjeta, no atravesándola: a sangre se comía el
   marco verde por los lados. */
.resolution.es-gol .campo2d.en-escena {
  margin: 14px 0 6px; border-radius: var(--r-2);
  border: 1px solid rgba(149,243,61,.28);
}
/* Al pitido final, tus goles no son una casilla de un cuadro de cuatro. */
.gol-final {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px 0 4px; padding: 14px 16px;
  border: 1px solid var(--accent); border-radius: var(--r-2);
  background: linear-gradient(180deg, rgba(149,243,61,.10), rgba(149,243,61,.03));
}
.gol-final .gol-cartel { margin: 0; color: var(--accent); }
.gol-final .gol-cartel b { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.gol-final strong { display: block; font-size: 1.05rem; }
.gol-final small { display: block; color: var(--muted); margin-top: 2px; }
.summary-box.destacada { border-color: var(--accent); }
.summary-box.destacada strong { color: var(--accent); }
.clock-controls.por-gol { border-color: var(--accent); }
.clock-controls.por-gol .clock-waiting { color: var(--accent); }

/* ---------- Subir de nivel ---------- */
/* Ahora pasa dos o tres veces por temporada en vez de cada dos jornadas, así
   que se le puede dar su momento sin que canse. */
.levelup { text-align: center; padding: 6px 0 2px; }
.lv-salto { display: flex; align-items: baseline; justify-content: center; gap: 14px; font-family: var(--font-display); }
.lv-salto b { font-size: 2.4rem; color: var(--muted); font-weight: 700; }
.lv-salto i { font-style: normal; font-size: 1.6rem; color: var(--accent); }
.lv-salto strong {
  font-size: clamp(3.4rem, 15vw, 5rem); line-height: 1; color: var(--accent); font-weight: 700;
  text-shadow: 0 0 40px rgba(149,243,61,.35);
}
.lv-frase { margin: 6px 0 16px; color: #cbd5da; }
.lv-premios { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.lv-premios li {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  border: 1px solid rgba(149,243,61,.32); background: rgba(149,243,61,.07);
  border-radius: 10px; padding: 9px 12px;
}
.lv-premios b { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); }
.lv-premios span { color: var(--text); }
.lv-siguiente { margin: 0; color: var(--muted); font-size: .9rem; }

/* El nombre que te toca ahora, el hito si lo hay, y la decisión. Subir de
   nivel se para el juego: por eso la pregunta va aquí y no en otra pantalla. */
.lv-tier { margin: 0 0 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: rgba(215,169,61,.07); }
.lv-tier span { display: block; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lv-tier strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--legacy); letter-spacing: -.01em; }
.lv-tier em { display: block; margin-top: 3px; font-style: normal; font-size: .88rem; color: #cbd5da; line-height: 1.4; }
.lv-proximo { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.lv-proximo b { color: var(--text); }
.lv-hito {
  display: grid; gap: 3px; text-align: left; margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid rgba(215,169,61,.3); border-left: 3px solid var(--legacy);
  border-radius: var(--r-2); background: rgba(215,169,61,.06);
}
.lv-hito strong { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 1.02rem; color: var(--legacy); }
.lv-hito span { color: #cbd5da; font-size: .88rem; line-height: 1.45; }
.lv-paso { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.lv-paso h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.12rem; }
.lv-aviso { margin: 0 0 10px; color: var(--muted); font-size: .85rem; }
.lv-opciones { display: grid; gap: 8px; margin-bottom: 12px; }
.lv-op {
  display: grid; gap: 2px; text-align: left; width: 100%; min-height: 48px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-2);
  background: var(--panel2); color: var(--text); font: inherit;
}
.lv-op:hover, .lv-op:focus-visible { border-color: var(--accent); background: rgba(149,243,61,.07); }
.lv-op strong { font-family: var(--font-display); font-size: 1.06rem; color: var(--text); }
.lv-op span { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lv-lejos { margin-bottom: 12px; }
.lv-lejos p { margin: 0 0 8px; color: var(--muted); font-size: .88rem; }
.lv-lejos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lv-lejos li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .85rem; }
.lv-lejos li span { color: var(--text); }
.lv-lejos li em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.lv-gastado { margin: 0; color: var(--muted); font-size: .88rem; }
/* Ningún botón por debajo del mínimo táctil, tampoco por un píxel. */
.match-highlight .btn, #continue-highlight { min-height: 44px; }

/* ---------- El campo en 2D ---------- */
/* El plano de la jugada. Va antes del texto porque se entiende antes: la
   jerarquía del kit es qué pasa → quién → decisión.
   Las marcas del dibujo (flechas, zonas, fichas) llevan su presentación
   DENTRO del SVG, en web/campo-dibujo.js: el mismo dibujo lo carga el panel
   de diseño, que no tiene esta hoja de estilos. Aquí sólo el marco. */
.campo2d { margin: 12px 0 14px; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--r-2); overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.campo2d svg { display: block; width: 100%; height: auto; }
.campo2d figcaption { padding: 7px 11px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
.campo2d.en-escena { margin: 12px -15px 14px; border-radius: 0; border-left: 0; border-right: 0; }
.campo2d.de-noche { box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 26px rgba(149,243,61,.05); }
/* El tablero se queda delante durante la tirada y la consecuencia: la jugada
   no puede desaparecer justo en el momento de la verdad. Estos dos paneles
   respiran 30 px, no 15, así que el sangrado tiene que igualarlo. */
.roll-panel .campo2d.en-escena, .resolution .campo2d.en-escena { margin: 6px -30px 16px; }
/* En escritorio el tablero no puede comerse la pantalla: a 1440 px el campo
   salía a 1000 px de ancho y una ficha medía más que el marcador. Se limita a
   una anchura de lectura y se centra, con el marco puesto otra vez. */
@media (min-width: 881px) {
  .campo2d.en-escena { max-width: 620px; margin-inline: 0; border-radius: var(--r-2); border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
  .roll-panel .campo2d.en-escena, .resolution .campo2d.en-escena { margin-inline: 0; }
}

/* ---------- Dónde empieza tu historia ---------- */
/* La región es la primera decisión de una carrera: decide el club, la liga,
   los veinte equipos y cómo se llama la gente. */
.creator-options.regiones { gap: 10px; }
.creator-option.region { padding: 14px 15px; }
.creator-option.region strong { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .01em; }
.creator-option.region .reco { font-style: normal; font-size: .64rem; letter-spacing: .12em; color: var(--accent); border: 1px solid rgba(149,243,61,.35); border-radius: 99px; padding: 2px 7px; }
.creator-option.region .region-datos { display: block; margin-top: 6px; font-style: normal; font-size: .78rem; color: var(--muted); }
.creator-fields.dos { grid-template-columns: 90px 1fr; }
.creator-review span.muted { display: block; font-size: .8rem; }

/* La ficha: fecha de nacimiento, edad exacta, de dónde eres y dónde juegas. */
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 7px; margin: 8px 0 16px; }
.ficha-datos > div { border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 11px; background: var(--panel); }
.ficha-datos span { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.ficha-datos b { font-size: .94rem; }
.memory-wall.fechados span { display: grid; gap: 3px; }
.memory-wall.fechados i { font-style: normal; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- La alineación ---------- */
/* El once cantado nombre a nombre. La tensión está en el hueco vacío: hasta
   que no se lee el tuyo, no sabes si juegas. */
.alineacion { padding: 2px 0 0; }
.al-intro { color: var(--muted); margin: 10px 0 12px; }
.al-intro b { color: var(--text); font-family: var(--font-display); letter-spacing: .02em; }
.al-lista { display: grid; gap: 4px; }
.al-fila {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-2);
  background: rgba(255,255,255,.015); opacity: .5;
}
.al-fila b { font-family: var(--font-display); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.al-puesto { font-family: var(--font-display); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); grid-column: 2; }
.al-nombre { grid-column: 2; grid-row: 2; font-family: var(--font-display); font-size: 1.16rem; color: #8b98a0; letter-spacing: .01em; }
.al-fila.dicha { opacity: 1; border-color: var(--line); animation: al-entra .34s ease-out 1; }
.al-fila.dicha .al-nombre { color: var(--text); }
.al-fila.dicha.tu { border-color: var(--accent); border-left-width: 3px; background: rgba(149,243,61,.07); }
.al-fila.dicha.tu .al-nombre { color: var(--accent); }
.al-tu { grid-row: 1 / span 2; font-style: normal; font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; color: var(--accent); border: 1px solid rgba(149,243,61,.4); border-radius: 99px; padding: 2px 9px; align-self: center; }
.al-nota { grid-row: 1 / span 2; font-style: normal; font-size: .72rem; color: var(--legacy); align-self: center; }
@keyframes al-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .al-fila.dicha { animation: none; } }

.al-banquillo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); opacity: .45; }
.al-banquillo.dicho { opacity: 1; }
.al-suplentes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.al-suplentes span {
  font-size: .84rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px;
  color: #8b98a0; background: rgba(255,255,255,.02);
}
.al-suplentes span.dicho { color: var(--text); }
.al-suplentes span.tu.dicho { color: var(--accent); border-color: rgba(149,243,61,.4); background: rgba(149,243,61,.07); font-weight: 600; }

.al-veredicto {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r-2); animation: al-entra .4s ease-out 1;
}
.al-veredicto.si { border-left: 3px solid var(--accent); background: rgba(149,243,61,.07); }
.al-veredicto.no { border-left: 3px solid var(--blue); background: rgba(127,166,189,.07); }
.al-veredicto strong { display: block; font-family: var(--font-display); font-size: 1.22rem; }
.al-veredicto span { display: block; color: #cbd5da; font-size: .89rem; line-height: 1.4; }
.al-veredicto.si strong { color: var(--accent); }

/* La decisión de piernas, cuando el entrenador te deja fuera para cuidarte. */
.fitness-card.energia { border-left-color: var(--blue); }
.fitness-card.energia span { color: var(--blue); }

/* ---------- LA MAZMORRA EN EL MÓVIL ---------- */
/* La campaña se había quedado con la maquetación de escritorio: el panel
   lateral —party, quests, lore, recursos— se apilaba entero debajo del
   partido, así que cada pantalla medía más de tres alturas y media y la
   decisión quedaba enterrada al final del scroll. Ahora ese panel vive en una
   hoja que se abre desde abajo, como el HUD del partido de la carrera, y en la
   pantalla sólo queda lo que hay que decidir. */
.mz-barra, .mz-fondo, .mz-hoja-head { display: none; }

@media (max-width: 880px) {
  /* Objetivos táctiles: los desplegables del lore medían 14 px y los botones
     de texto, 30. En la tableta el panel lateral sí se ve, así que la regla
     tiene que llegar hasta ahí. */
  .lore-mini summary, .text-btn { min-height: 44px; display: flex; align-items: center; }
  .equip-pick { min-height: 44px; }
  /* El sangrado de la carrera no cuadra con el relleno de esta tarjeta: el
     campo se salía dos píxeles por cada lado. */
  .adventure-main .campo2d.en-escena {
    margin-inline: 0; border-radius: var(--r-2);
    border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  }
}

@media (max-width: 680px) {
  .adventure-shell { padding-bottom: 88px; }
  .adventure-main { min-height: 0; padding: 16px 15px 18px; }
  .adventure-side { display: none; }
  .adventure-shell.side-abierta .adventure-side {
    /* El `top: auto` no es decorativo: en escritorio el panel es `sticky` con
       `top: 16px`, y sin anularlo la hoja se quedaba clavada arriba en vez de
       subir desde abajo. */
    display: block; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 41;
    max-height: 76vh; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 18px 18px 0 0;
    background: var(--panel); box-shadow: 0 -18px 46px rgba(0,0,0,.6);
  }
  .mz-fondo { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(4,7,9,.66); }
  /* La hoja se cierra con el mismo botón con el que se abre, pero también
     tiene su cruz: tapando tres cuartos de pantalla, buscar el hueco del
     fondo no es una forma de cerrar nada. */
  .mz-hoja-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 2;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .mz-hoja-head strong { font-size: .95rem; }
  /* Las quests venían en dos columnas: el título se quedaba en una tira de
     una palabra por línea y el premio pegado al contador («0/1Recuerdo»). */
  .quest { grid-template-columns: 1fr; gap: 7px; }
  .quest-progress { display: flex; align-items: baseline; gap: 8px; text-align: left; min-width: 0; }
  .quest-progress small { max-width: none; }
  .mz-hoja-head button {
    min-width: 44px; min-height: 44px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 1rem;
  }
  .mz-barra {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(8,12,15,.96); border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
  }
  .mz-barra .btn { flex: 1; min-width: 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
  /* El interruptor de lectura va sin texto: con tres botones con etiqueta la
     barra se salía de un móvil de 360. Lleva `aria-label` y `title`. */
  .mz-barra .btn.solo-icono { flex: 0 0 auto; padding-inline: 14px; }
  /* El HUD de la mazmorra: minuto y marcador en una línea, el conflicto debajo. */
  .dungeon-hud { grid-template-columns: 52px 1fr; gap: 10px; padding: 10px; }
  .minute-orb { width: 46px; height: 46px; font-size: 1rem; }
  .dungeon-score strong { font-size: 1.3rem; }
  /* Los nombres de los equipos son etiquetas en versalita, y tienen que
     declararlo: a 11 px sin versalita ni interletraje se leen como texto
     normal, y como texto normal 11 px es ilegible. */
  .dungeon-score span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
  .boss-hp { grid-column: 1 / -1; }
  .live-panel { grid-template-columns: 1fr; gap: 8px; }
  .match-statline { flex-wrap: wrap; gap: 4px 10px; }
  .campaign-cover, .campaign-complete, .campaign-boss-end { padding: 22px 14px; }
  .narrative-beat { padding: 18px 2px; }
  .dice-stage { gap: 10px; margin: 16px 0; }
  .dice-stage > strong { font-size: 2rem; }
  .adventure-shell .end-stats { grid-template-columns: 1fr 1fr; }
  /* Las cinco etapas no caben con su nombre: se solapaban en
     «PREPARACIÓNBRIEFING». Se queda el nombre de la etapa en la que estás, que
     es la única que hace falta leer. */
  .adventure-node { min-width: 0; flex: 1; }
  .adventure-node small { display: none; }
  .adventure-node.active small { display: block; }
}

/* ---------- La ficha del club ---------- */
/* El vestuario decía el nombre del club y nada más. Si tu club tiene escudo y
   equipación propios, aquí es donde se ven. */
.ficha-club { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.ficha-club .fc-kit, .ficha-club .fc-escudo { flex: 0 0 auto; line-height: 0; }
.ficha-club .fc-datos { flex: 1 1 auto; min-width: 0; }
.ficha-club h3 { margin: 2px 0 4px; font-size: 1.25rem; }
.ficha-club p { margin: 0; }
@media (max-width: 620px) {
  .ficha-club { gap: 12px; padding: 14px 15px; }
  .ficha-club .fc-kit svg { width: 88px; height: auto; }
  .ficha-club .fc-escudo svg { width: 58px; height: auto; }
}
/* Por debajo de eso no caben las tres cosas: manda la equipación, que es lo
   que no se ve en ningún otro sitio —el escudo está en la barra de arriba—. */
@media (max-width: 380px) { .ficha-club .fc-escudo { display: none; } }

/* ---------- Apoyo voluntario: la horchata ---------- */
/* Discreto en dos sitios (barra lateral, menú «Más») y una tarjeta en firme en
   sólo dos (Guardar, cierre de temporada). El azul, no el verde: el verde es
   el acento de jugar —Jugar, Aceptar, Aceptar destino—, y esto no compite con
   eso ni se puede confundir con una acción del partido. */
.support-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 700;
}
.support-link:hover { color: var(--blue); }
.support-link .ic { flex: 0 0 auto; }

.legal-links { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.legal-links a { color: var(--muted); text-decoration: none; font-size: .72rem; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }

.sidebar-foot { padding-top: 4px; border-top: 1px solid var(--line); display: grid; gap: 8px; }

.nav-sheet-support { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.nav-sheet-support .support-link { font-size: .85rem; }

.support-card { padding: 18px 20px; margin-top: 18px; }
.support-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.support-card-head .ic { color: var(--blue); flex: 0 0 auto; }
.support-card-head h3 { margin: 0; font-size: 1.05rem; }
.support-card p { margin: 8px 0 0; line-height: 1.55; }
.support-card .support-joke { display: flex; align-items: center; gap: 6px; }
.support-card .buttons { margin-top: 14px; }
.support-card .support-fineprint { display: block; margin-top: 10px; line-height: 1.45; }

.epi-support {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.epi-support p { margin: 0; max-width: 46ch; color: var(--muted); }
@media (max-width: 620px) { .epi-support { flex-direction: column; align-items: flex-start; } }

/* ---------- Feedback: un formulario, no un buzón sin fondo ---------- */
.feedback-card { padding: 18px 20px; margin-top: 18px; }
.feedback-card-head { margin-bottom: 4px; }
.feedback-card-head h3 { margin: 0; font-size: 1.05rem; }
.feedback-card > p.muted { margin: 6px 0 14px; }
.feedback-categorias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.feedback-cat {
  border: 1px solid var(--line); background: #0d1419; color: var(--muted);
  border-radius: 999px; padding: 9px 14px; font-size: .84rem; font-weight: 700;
  min-height: 44px;
}
.feedback-cat:hover { border-color: var(--accent2); }
.feedback-cat.on { border-color: var(--accent); color: var(--accent); background: rgba(149,243,61,.08); }
.feedback-textarea {
  display: block; width: 100%; min-height: 110px; resize: vertical;
  background: #0a1014; color: var(--text); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 14px; font: inherit; line-height: 1.5; margin-bottom: 10px;
}
.feedback-textarea:focus { border-color: var(--accent); outline: none; }
.feedback-contacto {
  display: block; width: 100%; background: #0a1014; color: var(--text);
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; font: inherit;
}
.feedback-contacto:focus { border-color: var(--accent); outline: none; }
.feedback-error { color: var(--danger); font-size: .85rem; margin: 10px 0 0; }
.feedback-gracias { color: var(--accent); line-height: 1.55; margin: 4px 0 14px; }

/* ---------- EL DUELO: ejecución no es resultado ---------- */
/* Tirabas a puerta, salía «¡Espectacular!» y la jugada no acababa en gol sin
   decir por qué; el siguiente suceso podía ser un gol del rival. Aquí se ven
   las dos tiradas juntas, con nombre y con nota, para que «mi espectacular no
   ha servido» se convierta en «he hecho algo increíble y el portero ha
   respondido con algo increíble». */
.duelo {
  margin: 16px 0 4px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 2px solid var(--legacy);
  border-radius: var(--r-2); background: var(--panel2);
}
.duelo-cab {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  font-size: var(--fs-0); color: var(--legacy); margin-bottom: 10px;
}
.duelo-lados { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.duelo-lado { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duelo-lado:last-child { text-align: right; }
.duelo-quien { font-weight: 800; font-size: var(--fs-2); overflow-wrap: anywhere; }
/* Estas dos no son etiquetas en versalita: son texto que se lee, así que van
   al mínimo de texto corrido (13,8px) y no al de etiqueta. Lo cazó `qa-mobile`
   en cuanto la pantalla del duelo entró en el recorrido. */
.duelo-que { color: var(--muted); font-size: var(--fs-1); }
.duelo-dados { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--muted); margin-top: 4px; }
.duelo-nota { font-family: var(--font-display); font-size: var(--fs-3); letter-spacing: .04em; margin-top: 2px; }
.duelo-nota.disaster, .duelo-nota.failure { color: var(--danger); }
.duelo-nota.mixed { color: var(--warn); }
.duelo-nota.success, .duelo-nota.spectacular { color: var(--accent); }
.duelo-vs {
  align-self: center; font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--fs-1); color: var(--muted); letter-spacing: .1em;
}
/* Cómo sigue el partido. Sin esto la acción no está cerrada, que era medio
   problema: «87' tu acción espectacular / 89' gol del rival» sin nada en medio. */
.duelo-sigue {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: var(--fs-1);
}

/* ---------- LA PRUEBA: tirar dados fuera del campo ---------- */
/* Hasta ahora los dados sólo se tiraban en el partido, y una conversación
   difícil se resolvía eligiendo una opción. Se pinta con la misma caja que la
   tirada del campo —dados, cálculo y nota— para que se lea igual: 90' habla un
   solo idioma de tiradas. */
.prueba {
  margin: 4px 0 16px; padding: 16px;
  border: 1px solid var(--line); border-left: 2px solid var(--legacy);
  border-radius: var(--r-2); background: var(--panel2);
}
.prueba h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--fs-3); }
.prueba p { margin: 0 0 4px; color: var(--muted); }
.prueba .dice-row { margin: 14px 0 10px; }
.prueba .calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; color: var(--muted); font-size: var(--fs-1); }
.prueba .calc .total { font-family: var(--font-display); font-size: var(--fs-4); color: var(--text); }
.prueba .grade { margin-top: 8px; }
.prueba .mods { display: flex; flex-wrap: wrap; gap: 4px 5px; margin: 10px 0 0; font-style: normal; }
.prueba .mods i {
  font-style: normal; font-size: .76rem; padding: 3px 8px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.02);
}
.prueba .mods i.bien { color: #cfe8a8; border-color: rgba(149,243,61,.28); }
.prueba .mods i.mal { color: #f4c0bd; border-color: rgba(255,90,84,.3); }

/* ---------- TU GENTE ---------- */
/* Tres relaciones eran las que el motor sabía llevar. El capitán, el fisio, el
   veterano o tu familia van aquí: su propio recorrido, más compacto que el de
   los tres del vestuario, que son los que tienen escenas escritas. */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.person-card {
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 6px;
}
.person-card small { color: var(--muted); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .08em; }
.person-card h4 { margin: 2px 0 0; font-size: var(--fs-2); }
.person-card > strong { color: var(--accent); font-size: var(--fs-1); }
.person-last { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-1); line-height: 1.4; }

/* ---------- LA NOTA DEL PARTIDO ---------- */
/* Era un «6.42» en una caja de cuatro, al lado de los goles y del rol: el
   resumen de noventa minutos tenía el mismo tamaño que el dato de si saliste
   de inicio, y nadie podía saber por qué era un 6,42 y no un 7. */
.nota-partido { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin: 4px 0 16px; }
.nota-cifra {
  display: grid; place-items: center; gap: 2px; min-width: 96px;
  padding: 14px 12px; border-radius: var(--r-3); border: 1px solid var(--line); background: var(--panel2);
}
.nota-cifra strong { font-family: var(--font-display); font-size: clamp(2.2rem, 11vw, 3rem); line-height: 1; }
.nota-cifra span { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; }
.nota-poor, .nota-weak { border-color: rgba(255,90,84,.45); }
.nota-poor strong, .nota-weak strong, .nota-chip.nota-weak { color: var(--injury); }
.nota-average strong { color: var(--legacy); }
.nota-average { border-color: rgba(215,169,61,.4); }
.nota-good strong, .nota-great strong, .nota-stellar strong { color: var(--accent); }
.nota-good, .nota-great, .nota-stellar { border-color: rgba(149,243,61,.4); }
.nota-stellar { background: var(--accent-soft); }
.nota-desglose { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-1); }
.nota-desglose > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 4px 0; }
.nota-desglose > div:last-child { border-bottom: 0; }
.nota-desglose b { font-family: var(--font-mono); }
.nota-desglose .bien b { color: var(--accent); }
.nota-desglose .mal b { color: var(--injury); }
.nota-base, .nota-minutos, .nota-desglose .muted { color: var(--muted); }

/* Las notas de todos: en un vestuario se miran juntas. */
.notas-once { display: flex; flex-direction: column; gap: 10px; }
.motm { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(215,169,61,.4); border-radius: var(--r-2); background: rgba(215,169,61,.08); color: var(--legacy); }
.motm strong { display: block; color: var(--text); font-size: var(--fs-3); }
.motm span { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .08em; }
.notas-lista { display: flex; flex-direction: column; }
.nota-fila { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); }
.nota-fila.tu { background: var(--accent-soft); border-radius: var(--r-1); }
.nota-fila i { font-style: normal; color: var(--accent); font-size: var(--fs-0); }
.nota-pos { font-size: var(--fs-0); color: var(--muted); }
.nota-min { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); }
.nota-chip { font-family: var(--font-mono); font-size: var(--fs-2); min-width: 42px; text-align: right; }
.nota-chip.nota-average { color: var(--legacy); }
.nota-chip.nota-good, .nota-chip.nota-great { color: var(--accent); }

/* ---------- LA COTIZACIÓN ---------- */
/* Cuánto vales y cuántos hay por delante: las dos preguntas que el juego no
   contestaba. El ranking es el objetivo largo, así que siempre enseña lo que
   falta para el siguiente escalón en vez de un número enorme sin meta. */
.valor-cabecera { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin: 14px 0 10px; }
.valor-cifra span, .valor-pico span { display: block; font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.valor-cifra strong { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); color: var(--accent); }
.valor-cifra em { display: block; font-style: normal; font-size: var(--fs-1); }
.valor-cifra em.sube { color: var(--accent); }
.valor-cifra em.baja { color: var(--injury); }
.valor-pico b { font-family: var(--font-display); font-size: var(--fs-4); }
.valor-curva { display: flex; align-items: flex-end; gap: 4px; height: 92px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel); }
.valor-curva i { flex: 1; background: linear-gradient(180deg, var(--accent), rgba(149,243,61,.25)); border-radius: 3px 3px 0 0; min-height: 6px; }
.valor-pasos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.valor-pasos > div { border: 1px solid var(--line); border-radius: var(--r-1); padding: 9px 10px; }
.valor-pasos span { display: block; font-size: var(--fs-0); color: var(--muted); }
.valor-pasos b { display: block; font-size: var(--fs-2); }
.valor-pasos small { display: block; color: var(--muted); font-size: var(--fs-0); margin-top: 2px; }

.ranking-tu { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 10px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--panel2); }
.ranking-tu span { display: block; font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.ranking-tu strong { font-family: var(--font-display); font-size: var(--fs-4); }
.ranking-tu em { display: block; font-style: normal; font-size: var(--fs-0); color: var(--muted); }
.ranking-move { font-family: var(--font-mono); color: var(--muted); }
.ranking-move.sube { color: var(--accent); }
.ranking-move.baja { color: var(--injury); }
.ranking-meta { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-left: 2px solid var(--legacy); background: rgba(215,169,61,.07); border-radius: var(--r-1); margin-bottom: 12px; }
.ranking-lista { display: flex; flex-direction: column; }
.ranking-fila { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-1); }
.ranking-fila b { font-family: var(--font-display); font-size: var(--fs-2); color: var(--muted); }
.ranking-fila.tu { background: var(--accent-soft); border-radius: var(--r-1); }
.ranking-fila.tu b { color: var(--accent); }
.ranking-fila i { font-style: normal; color: var(--accent); font-size: var(--fs-0); }
.ranking-nombre { overflow-wrap: anywhere; }
.ranking-club, .ranking-pais { color: var(--muted); font-size: var(--fs-0); }
.ranking-corte { text-align: center; color: var(--muted); letter-spacing: .4em; padding: 6px 0; }

/* El retrato de tu futbolista (web/player-portrait.js). La foto es 4:5 de
   pecho para arriba; en un hueco cuadrado se recorta por arriba, que es donde
   está la cara, y se redondea como el avatar dibujado. */
.avatar-photo { object-fit: cover; object-position: 50% 18%; border-radius: 22%; background: #0d1612; }

/* De qué versión se está hablando: lo primero que se pregunta ante un fallo. */
.version-tag { margin-top: 10px; text-align: center; font-size: .75rem; color: var(--muted); }