/* ============================================================================
   PLANTILLAZO — Hoja de estilos
   Look "El dossier del día" (aprobado por Jorge).
   Tokens, fuentes y componentes REUTILIZADOS al milímetro de las maquetas
   aprobadas: docs/diseno-plantillazo/*.html + DIRECCION-ARTE.md
   ========================================================================== */

:root{
  /* === MODO CLARO — Papel de quiosco === */
  --paper:#F4EFE6; --paper-2:#FBF8F2; --ink:#16140F; --ink-soft:#5A5446;
  --line:#D8CFBE; --brand:#0B5D3B; --brand-ink:#073D27;
  --accent:#E84855; --gold:#C2872B; --ok:#1F7A4D; --ko:#B23A3A;
  --grain-opacity:.06;
  /* color del club del día (se inyecta por JS) */
  --club:#0B5D3B; --club-ink:#0B5D3B;

  --r-sm:4px; --r-md:8px;
  --f-display:'Archivo',system-ui,sans-serif;
  --f-edit:'Fraunces',Georgia,serif;
  --f-ui:'Inter Tight','Inter',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
  /* === MODO OSCURO — Pizarra de vestuario === */
  --paper:#0E1411; --paper-2:#16201B; --ink:#F0EAD9; --ink-soft:#A7B0A4;
  --line:#2A3830; --brand:#5BD39A; --brand-ink:#8FE9BD;
  --accent:#FF6B73; --gold:#E2B765; --ok:#5BD39A; --ko:#F2877F;
  --grain-opacity:.05;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-ui); background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
  transition:background .4s ease,color .4s ease;
}
/* Grano de papel / tiza — 1 capa, no interactiva */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
[data-theme="dark"] body::before{mix-blend-mode:screen}

#confetti{position:fixed; inset:0; z-index:2; pointer-events:none}

.wrap{position:relative; z-index:1; max-width:560px; margin:0 auto; padding:0 20px 64px}

a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-ink); text-decoration:underline}

/* clase utilitaria para ocultar accesiblemente */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- Cabecera ---------- */
header.top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 0 14px; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:baseline; gap:10px; cursor:pointer; background:none; border:0; padding:0}
.brand .mark{font-family:var(--f-display); font-weight:900; font-size:22px; letter-spacing:-.02em; color:var(--ink)}
.brand .mark b{color:var(--brand)}
.brand .edi{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); letter-spacing:.04em}
.controls{display:flex; gap:8px; align-items:center}
.ctrl{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:7px 10px; cursor:pointer; min-height:34px}
.ctrl:hover{border-color:var(--brand); color:var(--brand)}
.ctrl:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ---------- Navegación inferior de vistas ---------- */
.viewnav{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.viewnav button{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 11px; cursor:pointer; min-height:36px}
.viewnav button[aria-current="page"]{color:#fff; background:var(--brand); border-color:var(--brand)}
.viewnav button:hover{border-color:var(--brand); color:var(--brand)}
.viewnav button[aria-current="page"]:hover{color:#fff}
.viewnav button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ---------- Sello del reto (dossier) ---------- */
.dossier{position:relative; margin-top:30px}
.kicker{font-family:var(--f-edit); font-style:italic; font-size:14px; color:var(--ink-soft); letter-spacing:.01em}
.kicker .dot{color:var(--club-ink)}
.stamp{position:relative; margin-top:10px; padding:26px 22px 22px; background:var(--paper-2);
  border:1px solid var(--line); box-shadow:6px 6px 0 var(--line); border-radius:var(--r-md)}
.stamp::after{content:""; position:absolute; inset:6px; border:1px solid var(--line);
  border-radius:4px; pointer-events:none}
.band{display:inline-block; transform:rotate(-1.4deg); background:var(--club); color:#fff;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px; margin-bottom:14px}
.team{font-family:var(--f-display); font-weight:800; font-size:clamp(38px,11vw,62px);
  line-height:.92; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; margin:0}
.team .accentline{display:block; width:54px; height:5px; background:var(--club); margin-top:14px; border-radius:2px}
.season{font-family:var(--f-edit); font-style:italic; font-size:22px; color:var(--ink-soft); margin-top:14px}
.ask{font-size:14px; color:var(--ink-soft); margin-top:6px}
.edicode{position:absolute; top:-12px; right:8px; font-family:var(--f-mono); font-size:11px;
  color:var(--ink-soft); background:var(--paper); padding:2px 6px; border:1px solid var(--line);
  border-radius:2px; transform:rotate(2deg)}

/* ---------- Buscador ---------- */
.search{position:relative; margin-top:26px; z-index:30}
.search label{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px}
.ibox{display:flex; align-items:center; gap:10px; background:var(--paper-2);
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:0 14px;
  transition:box-shadow .25s ease,border-color .25s ease}
.ibox:focus-within{border-color:var(--club); box-shadow:0 0 0 4px color-mix(in srgb,var(--club) 22%,transparent)}
.ibox svg{flex:none; color:var(--ink-soft)}
.ibox input{flex:1; border:0; background:transparent; color:var(--ink); font-family:var(--f-ui);
  font-size:17px; padding:15px 0; outline:none}
.ibox input::placeholder{color:var(--ink-soft); opacity:.8}
.ibox input:disabled{opacity:.5; cursor:not-allowed}

.menu{position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:6px 8px 0 var(--line);
  overflow:hidden; z-index:40; display:none; max-height:320px; overflow-y:auto}
.menu.open{display:block}
.opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:12px 14px; cursor:pointer; color:var(--ink)}
.opt:last-child{border-bottom:0}
.opt:hover,.opt:focus-visible,.opt.active{background:color-mix(in srgb,var(--club) 10%,transparent); outline:none}
.opt .nm{font-family:var(--f-ui); font-weight:600; font-size:15px}
.opt .nm em{font-family:var(--f-edit); font-style:italic; font-weight:500; color:var(--ink-soft)}
.opt .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); margin-left:auto; white-space:nowrap}
/* desplegable con nombre completo + bandera (18-jul) */
.opt .nm .ali{font-weight:700}
.opt .nm .fn{color:var(--ink-soft); font-weight:500}
.opt .meta.nat{font-size:17px; line-height:1}
.opt .pos{font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; color:var(--club-ink);
  border:1px solid var(--line); border-radius:2px; padding:2px 5px}
.opt mark{background:color-mix(in srgb,var(--gold) 38%,transparent); color:inherit; border-radius:2px}
/* rareza-tentación en el desplegable: número prominente en oro, pegado a la derecha.
   Cuando hay rareza, ella toma el margin-left:auto y la meta va justo después. */
.opt .optrare{margin-left:auto; font-family:var(--f-mono); font-weight:700; font-size:13px;
  color:var(--gold); white-space:nowrap; padding:2px 7px; border-radius:99px;
  background:color-mix(in srgb,var(--gold) 14%,transparent)}
.opt .optrare ~ .meta{margin-left:10px}
.menu .empty{padding:14px; font-family:var(--f-ui); font-size:14px; color:var(--ink-soft)}

/* ---------- Intentos (5 tickets) ---------- */
.tries{margin-top:26px}
.tries .hd{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.tries .hd span{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.ticks{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.tick{position:relative; aspect-ratio:3/4; border:1px dashed var(--line); border-radius:var(--r-sm);
  background:var(--paper-2); display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:700; font-size:18px; color:var(--ink-soft)}
.tick::before,.tick::after{content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); left:50%; transform:translateX(-50%)}
.tick::before{top:-6px} .tick::after{bottom:-6px}
.tick.ko{border-style:solid; border-color:var(--ko); color:var(--ko); background:color-mix(in srgb,var(--ko) 8%,var(--paper-2))}
.tick.ok{border-style:solid; border-color:var(--ok); color:#fff; background:var(--ok)}
.tick.cur{border-color:var(--club); box-shadow:0 0 0 3px color-mix(in srgb,var(--club) 22%,transparent)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.tick.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}

/* lista de fallos previos (nombres tachados) */
.misslist{margin-top:14px; display:flex; flex-direction:column; gap:6px}
.miss{display:flex; align-items:center; gap:8px; font-family:var(--f-ui); font-size:14px; color:var(--ink-soft)}
.miss .x{color:var(--ko); font-family:var(--f-mono)}
.miss .nm{text-decoration:line-through}

/* ---------- Supervivencia: colección de aciertos del run ---------- */
.surv-collection{margin-top:18px}
.surv-collection:empty{display:none}
.surv-collection .sc-head{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px;
  display:flex; align-items:baseline; gap:8px}
.surv-collection .sc-head b{font-family:var(--f-display); font-weight:800; font-size:16px; color:var(--club-ink)}
.surv-collection .hits{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.surv-collection .hit{display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm)}
.surv-collection .hit .ok{color:var(--ok); font-family:var(--f-mono); font-weight:700; font-size:13px}
.surv-collection .hit .nm{font-family:var(--f-ui); font-weight:600; font-size:14px; color:var(--ink)}
.surv-collection .hit .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft);
  margin-left:auto; white-space:nowrap; text-align:right}
.surv-collection.final{margin-top:14px}

/* ---------- Rareza ---------- */
.rare{margin-top:26px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px}
.rare .row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.rare .lab{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.rare .val{font-family:var(--f-display); font-weight:800; font-size:34px; color:var(--gold);
  font-variant-numeric:tabular-nums; line-height:1}
.rare .val small{font-family:var(--f-mono); font-size:13px; font-weight:400; color:var(--ink-soft)}
.meter{height:9px; background:color-mix(in srgb,var(--ink) 8%,transparent); border-radius:99px;
  overflow:hidden; margin-top:12px; border:1px solid var(--line)}
.meter i{display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--gold)); transition:width .5s ease}
.rare .tag{font-family:var(--f-edit); font-style:italic; font-size:14px; color:var(--ink); margin-top:10px}

/* ---------- Estado de acierto ---------- */
@keyframes stampin{0%{opacity:0;transform:scale(1.6) rotate(-14deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-7deg)}}
.solved{position:relative; margin-top:30px; text-align:center}
.solved .seal{display:inline-block; transform:rotate(-7deg); border:3px solid var(--ok); color:var(--ok);
  font-family:var(--f-display); font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:15px;
  padding:6px 14px; border-radius:6px; animation:stampin .5s cubic-bezier(.2,.8,.2,1) both .1s}
.solved.fail .seal{border-color:var(--ko); color:var(--ko)}
.solved h1{font-family:var(--f-display); font-weight:800; font-size:clamp(34px,9vw,48px); line-height:.95;
  letter-spacing:-.02em; margin:16px 0 6px; text-wrap:balance}
.solved .who{font-family:var(--f-edit); font-style:italic; font-size:18px; color:var(--ink-soft)}
.solved .who b{font-style:normal; color:var(--club-ink); font-family:var(--f-ui); font-weight:600}
.solved .already{margin-top:12px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft)}

/* ---------- Cuenta atrás al próximo reto (medianoche UTC) ---------- */
.countdown{margin-top:26px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px}
.countdown .cd-lab{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.countdown .cd-clock{font-family:var(--f-display); font-weight:800; font-size:clamp(34px,10vw,46px);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--club-ink); line-height:1}
.countdown .cd-notify{margin-top:2px}
.countdown .cd-notify.on{color:var(--ok); border-color:var(--ok)}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:24px}
.stat{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 10px; text-align:center}
.stat .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.stat .v{font-family:var(--f-display); font-weight:800; font-size:26px; font-variant-numeric:tabular-nums; margin-top:4px; line-height:1}
.stat.rar .v{color:var(--gold)}
.stat.tim .v{color:var(--brand)}
.stat.try .v{color:var(--accent)}

/* ---------- Tarjeta de compartir (sin spoilers) ---------- */
.sharecard{position:relative; margin-top:24px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:6px 6px 0 var(--line); padding:22px 20px; overflow:hidden}
.sharecard::after{content:""; position:absolute; inset:6px; border:1px solid var(--line); border-radius:4px; pointer-events:none}
.sc-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sc-mark{font-family:var(--f-display); font-weight:900; font-size:18px; letter-spacing:-.02em}
.sc-mark b{color:var(--brand)}
.sc-edi{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft)}
.sc-grid{display:flex; gap:7px; margin:18px 0 14px; justify-content:center}
.sc-grid .cell{width:34px; height:34px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff}
.cell.g{background:var(--ok)} .cell.y{background:var(--gold)} .cell.x{background:color-mix(in srgb,var(--ink) 12%,transparent); color:var(--ink-soft)}
.sc-line{font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); text-align:center; letter-spacing:.02em}
.sc-line b{color:var(--ink)}
.sc-foot{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px; color:var(--ink-soft)}
.nospoiler{font-family:var(--f-edit); font-style:italic; font-size:12px; color:var(--ink-soft); text-align:center; margin-top:10px}

.actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
.btn{font-family:var(--f-ui); font-weight:600; font-size:15px; border-radius:var(--r-md); padding:14px 16px;
  cursor:pointer; border:1.5px solid var(--line); min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--ink); background:transparent}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-ink)}
.btn.ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn.full{grid-column:1 / -1}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled{opacity:.5; cursor:not-allowed}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--ink);
  color:var(--paper); font-family:var(--f-mono); font-size:12px; padding:10px 16px; border-radius:99px; opacity:0;
  transition:.3s; z-index:9; max-width:90vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- AdSense placeholder ---------- */
.ad{margin-top:26px; min-height:90px; border:1px dashed var(--line); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}

footer.bot{margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
footer.bot .x{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft)}
.next{font-family:var(--f-edit); font-style:italic; color:var(--ink-soft); font-size:13px}

/* ---------- Landing / menú ---------- */
.hero{margin-top:34px}
.hero .big{font-family:var(--f-display); font-weight:900; font-size:clamp(44px,14vw,84px); line-height:.9;
  letter-spacing:-.03em; margin:0; text-wrap:balance}
.hero .big b{color:var(--brand)}
.hero .lede{font-family:var(--f-edit); font-style:italic; font-size:clamp(18px,5vw,24px); color:var(--ink-soft); margin-top:16px}
.cta-row{display:flex; flex-direction:column; gap:10px; margin-top:26px}
.howto{margin-top:34px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:20px}
.howto h2{font-family:var(--f-display); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px}
.howto ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px}
.howto li{font-size:15px; line-height:1.5}
.howto li b{color:var(--gold)}
.crosspromo{margin-top:24px; font-size:13px; color:var(--ink-soft); text-align:center}

/* ---------- Racha local (pantalla de resultado) ---------- */
.streakbox{display:flex; align-items:center; gap:14px; margin-top:10px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px}
.streakbox .sk-fire{font-size:26px; line-height:1}
.streakbox .sk-main{font-family:var(--f-display); font-weight:800; font-size:17px}
.streakbox .sk-main b{font-size:22px; color:var(--gold); font-variant-numeric:tabular-nums}
.streakbox .sk-sub{margin-top:2px; font-size:13px; color:var(--ink-soft)}
.streakbox.broken .sk-main{font-size:15px; font-weight:700}

/* CTA de registro tras la partida (anónimos) */
.regcta{margin-top:16px; background:var(--paper-2); border:1px dashed var(--line);
  border-radius:var(--r-md); padding:14px 16px}
.regcta .rc-txt{margin:0 0 10px; font-size:13.5px; line-height:1.45; color:var(--ink-soft)}

/* Ranking del día en la pantalla de resultado (backlog #7) */
.rankbox{margin-top:16px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px 16px}
.rankbox .rb-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.rankbox .rb-tit{font-family:var(--f-display); font-weight:800; font-size:18px; letter-spacing:-.01em}
.rankbox .rb-n{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); white-space:nowrap}
.rankbox .ltable{margin-top:10px}
.rankbox .lrow{padding:9px 12px}
.rankbox .lrow .usr{font-size:14px}
.rankbox .rb-you .usr{font-size:12.5px; font-weight:700; line-height:1.3}
.rankbox .rb-you{border-top:2px dashed var(--line)}
.rankbox .rb-txt{margin:10px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink-soft);
  font-family:var(--f-edit); font-style:italic}
.rankbox .btn{margin-top:12px}

/* ---------- Formularios (login / registro / perfil / reportar) ---------- */
.card{margin-top:26px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:6px 6px 0 var(--line); padding:24px 22px; position:relative}
.card h2{font-family:var(--f-display); font-weight:800; font-size:clamp(24px,7vw,34px); letter-spacing:-.02em; margin:0 0 6px; line-height:1}
.card .sub{font-family:var(--f-edit); font-style:italic; color:var(--ink-soft); font-size:15px; margin:0 0 20px}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px}
.field .opt{font-family:var(--f-edit); font-style:italic; text-transform:none; letter-spacing:0; color:var(--ink-soft)}
.field input,.field select{width:100%; font-family:var(--f-ui); font-size:16px; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:13px 14px; min-height:48px}
.field input:focus,.field select:focus{outline:none; border-color:var(--club); box-shadow:0 0 0 4px color-mix(in srgb,var(--club) 22%,transparent)}
.formmsg{font-family:var(--f-ui); font-size:14px; margin:4px 0 14px; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--line)}
.formmsg.err{color:var(--ko); border-color:var(--ko); background:color-mix(in srgb,var(--ko) 8%,transparent)}
.formmsg.ok{color:var(--ok); border-color:var(--ok); background:color-mix(in srgb,var(--ok) 8%,transparent)}
.formlinks{margin-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:13px}
.formlinks button{background:none;border:0;color:var(--brand);cursor:pointer;font-family:var(--f-ui);font-size:13px;padding:0}
.formlinks button:hover{text-decoration:underline}

/* ---------- Perfil ---------- */
.profhead{display:flex; align-items:center; gap:16px; margin-top:30px}
.avatar{width:64px; height:64px; border-radius:50%; background:var(--club); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:var(--f-display); font-weight:900; font-size:28px; flex:none; border:1px solid var(--line)}
.profhead .who2 .u{font-family:var(--f-display); font-weight:800; font-size:26px; letter-spacing:-.02em; line-height:1}
.profhead .who2 .meta{font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); margin-top:4px}
.profgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:22px}
.profgrid .stat{text-align:left; padding:16px}
.profgrid .stat .v{font-size:30px}
.section-title{font-family:var(--f-display); font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line)}
/* vitrina de insignias */
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.badge{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 8px; text-align:center}
.badge.locked{opacity:.42; filter:grayscale(.6)}
.badge .ic{font-size:30px; line-height:1}
.badge.locked .ic{filter:grayscale(1)}
.badge .bn{font-family:var(--f-ui); font-weight:600; font-size:12px; margin-top:8px; line-height:1.2}
.badge .bd{font-family:var(--f-mono); font-size:9px; color:var(--ink-soft); margin-top:4px; line-height:1.3}

/* ---------- Ranking ---------- */
.tabs{display:flex; gap:6px; margin-top:24px}
.tabs button{flex:1; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; cursor:pointer; min-height:40px}
.tabs button[aria-selected="true"]{color:#fff; background:var(--brand); border-color:var(--brand)}
.tabs button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.ltable{margin-top:16px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.lrow{display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow.head{background:var(--paper-2); font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)}
.lrow.me{background:color-mix(in srgb,var(--club) 10%,transparent)}
.lrow .pos{font-family:var(--f-display); font-weight:800; font-size:18px; color:var(--ink-soft)}
.lrow .pos.top{color:var(--gold)}
.lrow .usr{font-family:var(--f-ui); font-weight:600; font-size:15px}
.lrow .pts{font-family:var(--f-mono); font-weight:700; font-size:14px; color:var(--gold); text-align:right}
.empty-state{text-align:center; padding:30px 16px; color:var(--ink-soft); font-family:var(--f-edit); font-style:italic; font-size:15px}

/* ---------- Modo supervivencia ---------- */
/* línea de estado: ronda · puntos · strikes (HUD del run) */
.surv-bar{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:24px}
.surv-bar .sb-cell{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 10px; text-align:center; display:flex; flex-direction:column; gap:4px}
.surv-bar .sb-cell .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.surv-bar .sb-cell .v{font-family:var(--f-display); font-weight:800; font-size:24px; font-variant-numeric:tabular-nums; line-height:1; color:var(--ink)}
.surv-bar .sb-cell .v.gold{color:var(--gold)}
.surv-bar .sb-cell.strikes .v{font-family:var(--f-mono); font-size:20px; letter-spacing:.12em}
.surv-bar .sb-cell.strikes .v .ko{color:var(--ko)}
.surv-bar .sb-cell.strikes .v .pend{color:var(--ink-soft); opacity:.5}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.surv-bar .sb-cell.strikes .v.bump{animation:bump .4s ease both}

/* intro */
.surv-lede{font-family:var(--f-edit); font-style:italic; font-size:17px; color:var(--ink-soft); margin:12px 0 0; line-height:1.5}
.surv-lede b, .surv-rules b{font-style:normal; color:var(--gold); font-family:var(--f-ui); font-weight:600}
.surv-rules{margin:16px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.surv-rules li{font-size:14px; line-height:1.5; color:var(--ink-soft)}
.surv-best{margin-top:22px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:6px 6px 0 var(--line); padding:18px 20px; text-align:center}
.surv-best .lab{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.surv-best .val{font-family:var(--f-display); font-weight:900; font-size:40px; line-height:1; margin-top:6px; color:var(--club-ink)}
.surv-best .val small{font-family:var(--f-edit); font-style:italic; font-weight:400; font-size:18px; color:var(--ink-soft)}
.surv-best .sub{font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); margin-top:8px}
.surv-best.none{text-align:center; font-family:var(--f-edit); font-style:italic; color:var(--ink-soft); font-size:15px; padding:20px}

/* landing */
.surv-tagline{margin-top:10px; font-family:var(--f-edit); font-style:italic; font-size:14px; color:var(--ink-soft); text-align:center}

/* fin de run: marca + share */
.surv-bestflag{margin-top:14px; font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--gold)}
.surv-prevbest{margin-top:12px; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft)}
.sc-grid .cell.more{background:color-mix(in srgb,var(--ink) 12%,transparent); color:var(--ink-soft); font-family:var(--f-mono); font-size:12px; font-weight:700}
/* la grid de supervivencia puede tener muchas celdas: que fluyan en varias filas */
.sharecard .sc-grid{flex-wrap:wrap}

/* ---------- Revelado escalonado ---------- */
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.reveal{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  #confetti{display:none}
}
@media (min-width:720px){ .wrap{padding-top:8px} .team{font-size:64px} .cta-row{flex-direction:row} }