/* ═══════════════════════════════════════════════════════
   GAMBETA — hub tipo tablero (layout del mockup)
   ═══════════════════════════════════════════════════════ */

:root{
  --panel:   #212124;
  --panel-2: #2b2b2f;
  --panel-3: #35353a;
}

#scr-hub{ padding:0; }
.hub--t1{ background:radial-gradient(1200px 700px at 50% -10%, rgba(23,201,100,.06), transparent 60%), var(--bg); }
.hub--t2{ background:radial-gradient(1200px 700px at 50% -10%, rgba(139,90,43,.05), transparent 60%), var(--bg); }
.hub--t3{ background:radial-gradient(1200px 700px at 50% -10%, rgba(232,177,58,.05), transparent 60%), var(--bg); }
.hub--t4{ background:radial-gradient(1200px 700px at 50% -10%, rgba(74,168,255,.05), transparent 60%), var(--bg); }
.hub--t5{ background:radial-gradient(1200px 700px at 50% -10%, rgba(160,107,255,.05), transparent 60%), var(--bg); }
.hub--t6{ background:radial-gradient(1200px 700px at 50% -10%, rgba(232,177,58,.08), transparent 60%), var(--bg); }
.board{
  width:min(1560px, 100vw - 28px);
  margin-inline:auto;
  padding:clamp(12px,2vh,22px) 0 40px;
  display:grid;
  grid-template-columns: minmax(340px, 26%) 1fr;
  gap:14px;
  align-items:start;
}
/* Cada columna apila lo suyo: ninguna estira a la otra */
.board__col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (max-width:1080px){
  .board{ grid-template-columns:1fr; }
  /* En pantalla angosta primero el club y la decisión, después tu ficha */
  .board__col--der{ order:-1; }
}

.pane{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

/* ══════════ CARNET DEL JUGADOR ══════════ */
.p-card{
  padding:22px;
  animation:evIn .7s var(--ease-back) both, cardBreathe 4s var(--ease-in-out) 1s infinite;
}
@keyframes cardBreathe{
  0%,100%{ box-shadow:0 0 0 rgba(232,177,58,0); }
  50%{ box-shadow:0 0 40px rgba(232,177,58,.08); }
}
.p-top{ display:flex; align-items:flex-start; gap:14px; justify-content:space-between; }
.p-name{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(28px,3.2vw,44px); line-height:.86; margin:0;
  letter-spacing:.002em; word-break:break-word;
}
.p-nick{
  font-family:var(--f-cond); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; font-size:11px; color:var(--gold); margin-top:6px;
}
.p-ovr{
  flex:none; width:104px; min-height:88px;
  background:#0d0d0f; border-radius:16px;
  display:grid; place-content:center; text-align:center;
  padding:10px 6px; position:relative;
}
.p-ovr .ovr-trend{
  position:absolute; top:6px; right:8px;
  font-style:normal; font-size:11px; font-weight:700;
}
.p-ovr .ovr-trend.up{ color:var(--pitch); }
.p-ovr .ovr-trend.down{ color:var(--blood); }
.p-ovr b{
  display:block; font-family:var(--f-display); font-size:52px; line-height:.82;
  color:var(--gold); letter-spacing:-.01em;
}
.p-ovr span{
  display:block; font-family:var(--f-cond); font-weight:700; font-size:11px;
  letter-spacing:.24em; color:#fff; margin-top:4px;
}
.p-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.p-pill{
  background:var(--panel-2); border:0; border-radius:100px;
  padding:7px 16px;
  font-family:var(--f-cond); font-weight:700; font-size:13px;
  letter-spacing:.13em; text-transform:uppercase; color:#c9c6c0;
}
.p-pill--gold{ background:rgba(232,177,58,.16); color:var(--gold-2); }

.p-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.p-tile{
  background:var(--panel-2); border-radius:16px; padding:19px 12px; text-align:center;
}
.p-tile b{ display:block; font-family:var(--f-display); font-size:clamp(36px,4.1vw,53px); line-height:.85; }
.p-tile span{
  display:block; font-family:var(--f-cond); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:6px;
}

/* Siete atributos: número primo. Con auto-fit quedaba 6+1 y un hueco feo.
   Van los siete en una fila y, cuando no entran, 4+3 centrado a propósito. */
.p-attrs{
  background:#0d0d0f; border-radius:14px; padding:10px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin-top:12px;
}
.p-attr{
  flex:0 0 calc((100% - 36px) / 7);
  text-align:center; padding:6px 2px; border-radius:9px; background:rgba(255,255,255,.03);
}
@media (max-width:1420px){
  .p-attr{ flex:0 0 calc((100% - 18px) / 4); }
}
@media (max-width:1080px){
  .p-attr{ flex:0 0 calc((100% - 36px) / 7); }
}
@media (max-width:560px){
  .p-attr{ flex:0 0 calc((100% - 18px) / 4); }
}
.p-attr b{
  font-family:var(--f-display); font-size:17px; line-height:1; display:block;
  font-variant-numeric:tabular-nums;
}
.p-attr i{
  font-style:normal; font-size:9px; margin-left:2px; vertical-align:2px;
}
.p-attr i.up{ color:#4ade80; } .p-attr i.down{ color:#f87171; }
.p-attr span{
  display:block; font-family:var(--f-cond); font-weight:600; font-size:8.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:3px;
}
.p-attr.hot b{ color:var(--gold-2); }
.p-attr.top b{ color:#6bf0a8; }

/* Vitrina de trofeos */
.p-shelf{
  background:#0d0d0f; border-radius:14px; padding:10px 12px;
  margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  min-height:52px;
}
.trophy{ position:relative; display:flex; align-items:center; gap:5px; }
/* La copa: imagen real del trofeo si existe, dibujo si no */
.trofeo{
  width:26px; height:33px; display:grid; place-items:center; flex:none;
  transition:transform .25s var(--ease-out);
}
.trofeo__img, .trofeo svg{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}
.trophy:hover .trofeo{ transform:translateY(-2px) scale(1.08); }
.p-shelf svg, .p-shelf img{ filter:drop-shadow(0 0 7px rgba(232,177,58,.42)); }
.trophy b{
  font-family:var(--f-display); font-size:14px; color:var(--gold-2); line-height:1;
}
.trophy--mas b{ color:var(--ink-3); }
.p-shelf .empty{
  font-family:var(--f-cond); font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}

.p-foot{
  margin-top:12px; font-size:12px; color:var(--ink-3);
  display:flex; gap:6px 16px; flex-wrap:wrap;
  font-family:var(--f-cond); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.p-foot b{ color:var(--ink); }

/* Cabecera clickeable del panel de mejoras: en una carrera larga son
   decenas de cartas y ocupan toda la pantalla, así que se pueden achicar. */
.p-mejoras-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:0; margin:0; background:none; border:none; cursor:pointer;
  font:inherit; text-align:left;
}
.p-mejoras-head .kicker{ margin:0; }
.p-mejoras-toggle{
  font-family:var(--f-cond); font-weight:700; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
  padding:3px 9px; border-radius:100px; border:1px solid var(--line);
  transition:color .15s, border-color .15s, background .15s;
}
.p-mejoras-head:hover .p-mejoras-toggle{
  color:var(--gold-2); border-color:rgba(232,177,58,.4); background:rgba(232,177,58,.08);
}

/* Medidores compactos */
.p-meters{ display:grid; gap:7px; margin-top:14px; }
.p-meter{ display:grid; grid-template-columns:70px 1fr 30px; gap:8px; align-items:center; }
.p-meter span{
  font-family:var(--f-cond); font-weight:600; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.p-meter div{ height:4px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.p-meter div i{ display:block; height:100%; border-radius:3px; width:0; transition:width .9s var(--ease-out); animation:attrFill .8s var(--ease-out) forwards; }
@keyframes attrFill{ from{ width:0 } }
.p-meter b{
  font-family:var(--f-cond); font-weight:700; font-size:11px; color:var(--ink-2); text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ══════════ HEADER DEL CLUB ══════════ */
.c-head{
  padding:22px 26px;
  display:flex; align-items:center; gap:20px; min-height:120px;
}
.c-head::after{
  content:attr(data-year); position:absolute; right:20px; top:50%;
  transform:translateY(-50%);
  font-family:var(--f-display); font-size:clamp(80px,12vw,180px); line-height:1;
  color:rgba(255,255,255,.03); pointer-events:none; user-select:none;
}
.c-crest{ width:clamp(58px,6vw,84px); height:clamp(58px,6vw,84px); flex:none; position:relative; }
.c-crest img, .c-crest .crest{ width:100%; height:100%; object-fit:contain; }
.c-txt{ position:relative; min-width:0; }
.c-name{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(30px,4.4vw,62px); line-height:.86; margin:0;
}
.c-sub{ color:var(--ink-3); font-size:13.5px; margin-top:7px; }
.c-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }

/* ══════════ RIEL DE CARTAS / DECISIONES ══════════ */
.rail{ display:grid; gap:12px; }
.rail-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:0 4px; flex-wrap:wrap;
}
.rail-k{
  font-family:var(--f-cond); font-weight:700; font-size:11.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.rail-t{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(22px,2.6vw,34px); line-height:.9; margin:0;
}
.rail-d{ font-size:12.5px; color:var(--ink-3); }
.rail-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  perspective:1400px;
}
@media (max-width:760px){ .rail-cards{ grid-template-columns:1fr; } }

/* Barra de bloques */
.rail-blocks{ display:flex; gap:5px; margin-top:2px; }
.rail-blocks i{
  flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.rail-blocks i.done::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--pitch-deep),var(--pitch)); }
.rail-blocks i.now::after{ content:''; position:absolute; inset:0; background:var(--gold); animation:pulseBar 2.2s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce){
  .rail-blocks i.now::after{ animation:none; opacity:1; }
}
/* Nada de separadores acá dentro: cada bloque mide 5px de alto y este
   ::before metía una regla punteada con 16px de margen adentro suyo. */

/* ══════════ SHOPPING ══════════ */
.shop{ display:grid; gap:10px; }
.shop-head{
  position:relative; overflow:hidden; border-radius:20px;
  min-height:104px; display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; cursor:pointer; border:1px solid rgba(255,255,255,.06);
  background:var(--panel);
  transition:transform .2s var(--ease-out), border-color .2s;
  animation:shopShine 8s linear infinite;
}
@keyframes shopShine{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}
.shop-head:hover{ transform:translateY(-3px); border-color:rgba(232,177,58,.5); }
.shop-head canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.42; }
.shop-head::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,10,12,.92) 30%, rgba(10,10,12,.35) 100%);
}
.shop-txt{ position:relative; z-index:2; }
.shop-t{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(26px,3vw,40px); line-height:.88; }
.shop-d{
  font-family:var(--f-cond); font-weight:600; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:5px;
}
.shop-money{
  position:relative; z-index:2; text-align:right; flex:none;
}
.shop-money b{ display:block; font-family:var(--f-display); font-size:26px; color:var(--gold-2); line-height:1; }
.shop-money span{
  font-family:var(--f-cond); font-weight:600; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}

/* ══════════ OBJETIVO ══════════ */
.goal{ padding:22px 26px; position:relative; overflow:hidden; }
/* La marca de agua ocupa todo el alto del panel, como el año en .season-head.
   El tamaño lo mide el JS y lo pasa en --ghost-h (el alto real del panel):
   Anton llena ~0.73 de su font-size, así que se compensa con ese factor.
   El clamp es solo el respaldo para el primer pintado. */
.goal::after{
  content:attr(data-ghost); position:absolute; right:16px; bottom:0; z-index:0;
  font-family:var(--f-display); line-height:.78; letter-spacing:-.03em;
  font-size:calc(var(--ghost-h, 96px) * 1.32);
  color:rgba(255,255,255,.04); pointer-events:none; white-space:nowrap;
}
.goal-t{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(22px,2.6vw,34px); line-height:.9; position:relative; z-index:1; }
.goal-d{ font-size:12.5px; color:var(--ink-3); margin-top:6px; position:relative; z-index:1; max-width:56ch; }
.goal-bar{
  margin-top:14px; height:22px; border-radius:100px; background:#0d0d0f;
  position:relative; z-index:1; overflow:hidden;
}
.goal-bar i{
  display:block; height:100%; border-radius:100px; width:0;
  background:linear-gradient(90deg,#c99418,var(--gold));
  transition:width 1.1s var(--ease-out);
}
.goal-n{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-size:16px; color:#fff; z-index:2;
}
.goal-cost{
  display:block; margin-top:5px; color:#ff9c9c; font-weight:600;
}
.goal-link{
  position:relative; z-index:1; display:inline-block; margin-top:14px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--f-cond); font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-2);
}
.goal-link:hover{ color:var(--gold); text-decoration:underline; }

/* ══════════ CARTA COMPACTA (decisión / mejora en el riel) ══════════ */
.ccard{
  --tilt-x:0deg; --tilt-y:0deg; --gx:50%; --gy:50%;
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:#0c0c0e; cursor:pointer; isolation:isolate;
  min-height:300px; display:flex; flex-direction:column;
  /* la caja crece con el contenido: nada de texto recortado */
  height:auto;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .28s var(--ease-out), box-shadow .28s, border-color .25s;
  animation:cardDeal .7s var(--ease-back) both;
  -webkit-tap-highlight-color:transparent;
  text-align:left;
}
.ccard:nth-child(1){ animation-delay:.04s; --rest-rot:0deg; }
.ccard:nth-child(2){ animation-delay:.12s; --rest-rot:0deg; }
.ccard:nth-child(3){ animation-delay:.2s;  --rest-rot:0deg; }
.ccard:hover, .ccard:focus-visible{
  transform:translate3d(0,-8px,40px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  box-shadow:0 26px 56px rgba(0,0,0,.68);
  border-color:rgba(255,255,255,.3); z-index:4;
}
/* Camino que no te alcanza la plata para tomar (ver `disabled` en buildCard).
   Antes el <button disabled> bloqueaba el clic pero se veía IGUAL que una
   carta normal — mucha gente clickeaba sin leer el texto y no entendía por
   qué "no pasaba nada". Ahora se ve, de un vistazo, que esa carta no se
   puede elegir. */
.ccard:disabled{
  cursor:not-allowed; pointer-events:none; filter:grayscale(.75) brightness(.62);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.ccard:disabled:hover, .ccard:disabled:focus-visible{
  transform:none; box-shadow:0 10px 24px rgba(0,0,0,.4); border-color:rgba(255,255,255,.1);
}
.ccard:disabled:hover .ccard__art{ transform:scale(1.05); }
.ccard:disabled:hover .ccard__gl{ opacity:0; }
.ccard:disabled .ccard__d{ color:var(--blood, #e0393b); }
.ccard__art{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  transform:scale(1.05); transition:transform .6s var(--ease-out);
  filter:saturate(.85) contrast(1.05);
}
.ccard:hover .ccard__art{ transform:scale(1.12); }
.ccard__sc{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,6,8,.9) 0%, rgba(6,6,8,.45) 30%, rgba(6,6,8,.25) 52%, rgba(6,6,8,.86) 100%);
}
.ccard__gl{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--gx) var(--gy), rgba(255,255,255,.15), transparent 60%);
  transition:opacity .3s;
}
.ccard:hover .ccard__gl{ opacity:1; }
.ccard__in{
  position:relative; z-index:2; padding:16px 15px 15px;
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
}
.ccard__k{
  font-family:var(--f-cond); font-weight:800; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; text-align:center;
  color:#fff; opacity:.9; text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.ccard__t{
  font-family:var(--f-display); text-transform:uppercase; text-align:center;
  color:#fff; margin:6px 0 0; line-height:.84; letter-spacing:.002em;
  font-size:clamp(26px,2.7vw,40px);
  text-shadow:0 4px 18px rgba(0,0,0,.85);
  transform:scaleY(1.05); transform-origin:top center;
}
.ccard__t[data-len="long"]{ font-size:clamp(20px,2vw,29px); }
.ccard__t[data-len="xlong"]{ font-size:clamp(16px,1.6vw,23px); line-height:.94; }
.ccard__sp{ flex:1; min-height:12px; }
.ccard__d{
  font-size:12px; line-height:1.42; color:rgba(255,255,255,.86); text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.95); margin:0 0 10px;
}
.ccard__fx{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }

/* ══════════ SELLO DE RANGO ══════════
   Se lee sin depender del color: uno, dos o tres puntos; una cruz si es maldita. */
.ccard__rk{
  position:absolute; top:12px; left:12px; z-index:4;
  display:flex; gap:4px; align-items:center;
}
.ccard__rk i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(0,0,0,.6);
}
.ccard__rk--x{ width:13px; height:13px; }
.ccard__rk--x::before, .ccard__rk--x::after{
  content:''; position:absolute; left:0; top:6px; width:13px; height:2px;
  background:#ff8f8f; box-shadow:0 0 6px rgba(224,59,59,.8);
}
.ccard__rk--x::before{ transform:rotate(45deg); }
.ccard__rk--x::after{ transform:rotate(-45deg); }

/* ══════════ NORMAL: acero mate ══════════
   Sin brillo y sin adornos: es sólida, no es un premio. */
.ccard--normal{
  border-color:rgba(190,200,210,.22);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.ccard--normal .ccard__art{ filter:saturate(.28) contrast(1.02) brightness(.82); }
.ccard--normal .ccard__k{ color:#c8d0d8; }
.ccard--normal .ccard__rk i{ background:#c8d0d8; }
/* Trama de acero: fina, mate, sin animación */
.ccard--normal::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:
    linear-gradient(180deg, rgba(190,205,220,.07), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(190,205,220,.045) 3px 4px);
}
.ccard--normal::after{
  content:''; position:absolute; inset:8px; z-index:3; pointer-events:none;
  border:1px solid rgba(190,205,220,.14); border-radius:9px;
}
.ccard--normal:hover{ border-color:rgba(200,215,230,.5); }

/* ══════════ PREMIUM: oro vivo ══════════ */
.ccard--premium{
  border-color:rgba(232,177,58,.6);
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 30px rgba(232,177,58,.18),
             0 0 0 1px rgba(232,177,58,.25) inset;
  animation:cardDeal .7s var(--ease-back) both, glowGold 3.4s var(--ease-in-out) infinite;
}
@keyframes glowGold{
  0%,100%{ box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 26px rgba(232,177,58,.16), 0 0 0 1px rgba(232,177,58,.22) inset; }
  50%    { box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 54px rgba(232,177,58,.4),  0 0 0 1px rgba(232,177,58,.5) inset; }
}
.ccard--premium .ccard__k{ color:var(--gold-2); text-shadow:0 0 14px rgba(232,177,58,.7); }
.ccard--premium .ccard__t{ text-shadow:0 4px 18px rgba(0,0,0,.85), 0 0 26px rgba(232,177,58,.35); }
.ccard--premium .ccard__art{ filter:saturate(.6) contrast(1.08) sepia(.4) hue-rotate(-8deg); }
/* barrido de luz */
.ccard--premium::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(112deg, transparent 34%, rgba(255,229,163,.28) 47%,
             rgba(255,255,255,.44) 50%, rgba(255,229,163,.28) 53%, transparent 66%);
  transform:translateX(-130%);
  animation:sweep 4.4s var(--ease-in-out) infinite 1s;
}
@keyframes sweep{ 0%{transform:translateX(-130%)} 26%,100%{transform:translateX(130%)} }

/* ══════════ LEGENDARIA: aura giratoria + polvo ══════════ */
.ccard--legendaria{
  border-color:rgba(160,107,255,.65);
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 40px rgba(160,107,255,.3);
  animation:cardDeal .7s var(--ease-back) both, glowViolet 2.8s var(--ease-in-out) infinite;
}
@keyframes glowViolet{
  0%,100%{ box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 34px rgba(160,107,255,.26); }
  50%    { box-shadow:0 18px 46px rgba(0,0,0,.6), 0 0 76px rgba(160,107,255,.62); }
}
.ccard--legendaria .ccard__k{ color:#e2d0ff; text-shadow:0 0 16px rgba(160,107,255,.9); }
.ccard--legendaria .ccard__t{
  text-shadow:0 4px 18px rgba(0,0,0,.85), 0 0 30px rgba(190,150,255,.6);
  animation:legendPulse 2.6s var(--ease-in-out) infinite;
}
@keyframes legendPulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.18) } }
.ccard--legendaria .ccard__art{ filter:saturate(.5) contrast(1.14) hue-rotate(190deg); }
/* borde de energía que gira */
.ccard--legendaria::after{
  content:''; position:absolute; inset:-2px; z-index:5; pointer-events:none; border-radius:18px;
  background:conic-gradient(from 0deg, transparent 0 58%, rgba(160,107,255,.9) 72%,
             rgba(255,255,255,.95) 80%, rgba(120,200,255,.9) 88%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:2px;
  animation:orbit 3.2s linear infinite;
}
@keyframes orbit{ to{ transform:rotate(360deg) } }
/* motas de luz subiendo */
.ccard--legendaria::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.75;
  background-image:
    radial-gradient(2px 2px at 18% 90%, rgba(220,200,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 42% 95%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 68% 88%, rgba(190,160,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 84% 96%, rgba(230,215,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 30% 84%, rgba(255,255,255,.8), transparent);
  animation:motas 4.6s linear infinite;
}
@keyframes motas{
  from{ transform:translateY(0); opacity:0 }
  15%{ opacity:.8 }
  85%{ opacity:.5 }
  to{ transform:translateY(-190px); opacity:0 }
}

/* ══════════ MALDITA: late, tiembla y mancha ══════════ */
.ccard--maldita{
  border-color:rgba(224,59,59,.6);
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 28px rgba(224,59,59,.24);
  animation:cardDeal .7s var(--ease-back) both, latido 1.9s var(--ease-in-out) infinite;
}
@keyframes latido{
  0%,100%{ box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 22px rgba(224,59,59,.2); }
  18%    { box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 60px rgba(224,59,59,.6); }
  32%    { box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 26px rgba(224,59,59,.24); }
  48%    { box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 48px rgba(224,59,59,.45); }
}
.ccard--maldita .ccard__k{ color:#ff9c9c; text-shadow:0 0 14px rgba(224,59,59,.8); }
.ccard--maldita .ccard__t{
  text-shadow:0 4px 18px rgba(0,0,0,.9), 2px 0 12px rgba(224,59,59,.55), -2px 0 12px rgba(60,10,10,.6);
  animation:tiembla 5.5s steps(1) infinite;
}
@keyframes tiembla{
  0%,92%,100%{ transform:scaleY(1.05) translate(0,0) }
  93%{ transform:scaleY(1.05) translate(-2px,1px) }
  94%{ transform:scaleY(1.05) translate(2px,-1px) }
  95%{ transform:scaleY(1.05) translate(-1px,0) }
  96%{ transform:scaleY(1.05) translate(1px,1px) }
}
.ccard--maldita .ccard__art{ filter:saturate(.4) contrast(1.2) sepia(.5) hue-rotate(-32deg); }
/* humo rojo desde abajo */
.ccard--maldita::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 60% at 50% 118%, rgba(224,59,59,.4), transparent 62%);
  animation:humo 3.6s var(--ease-in-out) infinite alternate;
}
@keyframes humo{ from{ opacity:.35 } to{ opacity:.85 } }
/* rayaduras */
.ccard--maldita::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(88deg, transparent 0 22px, rgba(224,59,59,.7) 22px 23px);
  mix-blend-mode:overlay;
}
.ccard--maldita:hover{ box-shadow:0 26px 56px rgba(0,0,0,.75), 0 0 70px rgba(224,59,59,.55); }

/* Sello de riesgo: nodo propio, así no le pisa el ::before a ninguna carta */
.ccard__rg{
  position:absolute; top:11px; right:11px; z-index:6; pointer-events:none;
  font-family:var(--f-cond); font-weight:800; font-size:9px; letter-spacing:.18em;
  color:#ff9c9c; background:rgba(58,10,10,.85); border:1px solid rgba(224,59,59,.5);
  padding:3px 7px; border-radius:3px;
}
/* En los caminos la flecha ya ocupa esa esquina */
.ccard--k-camino .ccard__rg{ top:auto; bottom:12px; left:14px; right:auto; }

@media (prefers-reduced-motion: reduce){
  .ccard--premium, .ccard--legendaria, .ccard--maldita{ animation:none; }
  .ccard--premium::after, .ccard--legendaria::after, .ccard--legendaria::before,
  .ccard--maldita::before, .ccard--maldita::after{ animation:none; }
}
.ccard--main{ border-color:rgba(232,177,58,.45); }

/* ══════════════════════════════════════════════════════
   TIPOS DE CARTA
   Mismo sistema, materiales distintos: un camino de un dilema no
   puede verse igual que una mejora ni que una acción.
   ══════════════════════════════════════════════════════ */

/* ── CAMINO (dilema): una ruta, no un premio ── */
.ccard--k-camino{
  min-height:236px;
  border-radius:6px;                      /* esquinas duras: es una decisión */
  border-color:rgba(255,255,255,.14);
  background:#0a0a0c;
}
.ccard--k-camino .ccard__art{ filter:saturate(.16) contrast(.95) brightness(.5); }
.ccard--k-camino .ccard__sc{
  background:linear-gradient(180deg, rgba(6,6,8,.94) 0%, rgba(6,6,8,.72) 45%, rgba(6,6,8,.95) 100%);
}
.ccard--k-camino .ccard__t{ font-size:clamp(22px,2.1vw,32px); }
.ccard--k-camino .ccard__t[data-len="long"]{ font-size:clamp(19px,1.7vw,26px); }
.ccard--k-camino .ccard__t[data-len="xlong"]{ font-size:clamp(15px,1.4vw,21px); }
/* Regla superior: marca el arranque de la ruta */
.ccard--k-camino .ccard__in{ padding-top:22px; }
.ccard--k-camino::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:4;
  background:linear-gradient(90deg, var(--gold-deep), rgba(232,177,58,.15));
  transform:scaleX(.32); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.ccard--k-camino:hover::before, .ccard--k-camino:focus-visible::before{ transform:scaleX(1); }
/* Número de camino, grande y al fondo */
.ccard__num{
  position:absolute; right:12px; bottom:6px; z-index:2; pointer-events:none;
  font-family:var(--f-display); font-size:74px; line-height:.8;
  color:rgba(255,255,255,.05);
}
.ccard--k-camino:hover .ccard__num{ color:rgba(232,177,58,.14); }
/* Flecha: esto te lleva a algún lado */
.ccard--k-camino::after{
  content:''; position:absolute; right:16px; top:16px; z-index:4;
  width:9px; height:9px; border-top:2px solid rgba(255,255,255,.32);
  border-right:2px solid rgba(255,255,255,.32); transform:rotate(45deg);
  transition:transform .3s var(--ease-out), border-color .3s;
}
.ccard--k-camino:hover::after{ border-color:var(--gold); transform:rotate(45deg) translate(3px,-3px); }
/* Un camino riesgoso se ve riesgoso desde el borde */
.ccard--k-camino.ccard--riesgo{ border-color:rgba(224,59,59,.42); }
.ccard--k-camino.ccard--riesgo::before{ background:linear-gradient(90deg, #a51f1f, rgba(224,59,59,.15)); }

/* ── ACCIÓN: no se elige entre varias, se avanza ── */
.ccard--k-accion{
  border-radius:14px;
  border-color:rgba(232,177,58,.4);
  background:linear-gradient(150deg, #14110a, #0a0a0c 62%);
}
.ccard--k-accion .ccard__art{ filter:saturate(.5) contrast(1.05) sepia(.25); opacity:.55; }
.ccard--k-accion .ccard__k{ color:var(--gold-2); }
.ccard--k-accion::after{
  content:''; position:absolute; left:50%; bottom:14px; z-index:4;
  width:26px; height:2px; background:var(--gold);
  transform:translateX(-50%); opacity:.55;
  transition:width .35s var(--ease-out), opacity .35s;
}
.ccard--k-accion:hover::after{ width:64px; opacity:1; }

/* ── SENDA: destino, no mejora ── */
.ccard--k-senda .ccard__k{ letter-spacing:.3em; }
.ccard--k-senda .ccard__in{ padding-top:26px; }

/* ══════════════════════════════════════════════════════
   TIENDA
   La plata que tenés es el dato que decide la compra: va
   grande y arriba. Lo que no podés pagar se ve apagado de
   verdad, no con un cartelito.
   ══════════════════════════════════════════════════════ */
.wallet{
  width:min(1180px, 100% - 32px); margin:20px auto 0;
  display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:6px 16px;
  padding:16px 22px; border-radius:14px;
  background:linear-gradient(120deg, rgba(232,177,58,.12), rgba(232,177,58,.03) 58%, transparent);
  border:1px solid rgba(232,177,58,.28);
}
.wallet__l{
  font-family:var(--f-cond); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; font-size:11px; color:var(--gold-2);
}
.wallet__n{
  font-family:var(--f-display); font-size:clamp(30px,4vw,46px); line-height:.9;
  color:var(--gold); text-shadow:0 0 22px rgba(232,177,58,.3);
}
.wallet__d{ font-size:13px; color:var(--ink-2); justify-self:end; text-align:right; }
.wallet--vacia{ border-color:rgba(224,59,59,.3); background:linear-gradient(120deg, rgba(224,59,59,.1), transparent 60%); }
.wallet--vacia .wallet__n{ color:#ff9c9c; text-shadow:none; }
.wallet--vacia .wallet__l{ color:#ff9c9c; }
@media (max-width:640px){
  .wallet{ grid-template-columns:1fr auto; padding:13px 16px; gap:2px 12px; }
  .wallet__l{ align-self:end; }
  .wallet__n{ grid-row:2; }
  .wallet__d{ grid-column:1 / -1; justify-self:start; text-align:left; margin-top:6px; }
}

.shop-rail{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  max-width:1180px; margin:18px auto 0;
}
/* Precio: la etiqueta que se lee primero */
.precio{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  padding:9px 12px;
  background:linear-gradient(180deg, rgba(6,6,8,.94), rgba(6,6,8,.55) 70%, transparent);
}
.precio__n{
  font-family:var(--f-display); font-size:22px; line-height:1; color:var(--gold);
}
.precio__f{
  font-family:var(--f-cond); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#ff9c9c;
}
.precio--no .precio__n{ color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:1px; }
.ccard--k-compra .ccard__in{ padding-top:44px; }

/* Lo que no podés pagar: apagado y sin brillo, se nota sin leer nada */
.ccard--k-compra:disabled{
  opacity:1;                       /* no lo desvanecemos: lo apagamos */
  filter:grayscale(.88) brightness(.52) contrast(.92);
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
  cursor:not-allowed;
}
.ccard--k-compra:disabled .precio{ filter:none; }
.ccard--k-compra:disabled::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.34) 0 7px, transparent 7px 14px);
}
@media (prefers-reduced-motion: no-preference){
  .ccard--k-compra:not(:disabled):hover{ transform:translateY(-6px); }
}

/* ══════════ UNA SOLA CARTA: banda ancha ══════════
   Antes quedaba una carta angosta y medio tablero en negro. */
.rail-cards--solo{ grid-template-columns:1fr; }
.rail-cards--solo .ccard{
  min-height:0;
  flex-direction:row; align-items:stretch;
  text-align:left;
}
.rail-cards--solo .ccard__in{
  padding:26px 30px;
  align-items:flex-start; justify-content:center;
  max-width:min(760px, 100%);
}
.rail-cards--solo .ccard__k,
.rail-cards--solo .ccard__t,
.rail-cards--solo .ccard__d{ text-align:left; }
.rail-cards--solo .ccard__t{ font-size:clamp(30px,3.4vw,52px); transform:none; margin-top:8px; }
.rail-cards--solo .ccard__d{ margin:12px 0 14px; max-width:64ch; }
.rail-cards--solo .ccard__fx{ justify-content:flex-start; }
.rail-cards--solo .ccard__sp{ display:none; }
.rail-cards--solo .ccard__sc{
  background:linear-gradient(90deg, rgba(6,6,8,.96) 0%, rgba(6,6,8,.82) 52%, rgba(6,6,8,.35) 100%);
}
.rail-cards--solo .ccard--k-accion::after{ left:30px; transform:none; }
.rail-cards--solo .ccard--k-accion:hover::after{ width:88px; }
@media (max-width:760px){
  .rail-cards--solo .ccard{ flex-direction:column; }
  .rail-cards--solo .ccard__in{ padding:20px; max-width:100%; }
  .rail-cards--solo .ccard__t{ font-size:clamp(26px,7vw,38px); }
  .rail-cards--solo .ccard__sc{
    background:linear-gradient(180deg, rgba(6,6,8,.9) 0%, rgba(6,6,8,.5) 34%, rgba(6,6,8,.92) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .ccard--k-camino::before, .ccard--k-camino::after, .ccard--k-accion::after{ transition:none; }
}
.ccard.is-fading{ animation:cardFade .45s var(--ease-in-out) forwards; }
.ccard.is-chosen{ animation:cardChosen .8s var(--ease-back) forwards; z-index:9; }
.ccard.is-locked{ pointer-events:none; }

/* Chips dentro de las cartas del riel */
.ccard .chip{ font-size:10.5px; padding:2px 7px; }

/* ══════════ ESTADO INACTIVO DE MEJORAS ══════════ */
.minicard.is-off{ filter:grayscale(1); opacity:.4; }
.minicard.is-off::after{
  content:''; position:absolute; inset:0; z-index:3;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.5) 0 5px, transparent 5px 10px);
}

/* ══════════ RESULTADOS DE BLOQUE ══════════ */
.res-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:10px; }
.res-cell{ background:var(--panel-2); border-radius:14px; padding:14px 8px; text-align:center; }
.res-cell b{ display:block; font-family:var(--f-display); font-size:28px; line-height:.9; }
.res-cell span{
  display:block; font-family:var(--f-cond); font-weight:600; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:5px;
}
.res-list{ display:grid; gap:0; }
.res-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px;
}
.res-row:last-child{ border-bottom:0; }
.res-row .crest, .res-row img{ width:26px; height:26px; object-fit:contain; }
.res-sc{
  font-family:var(--f-display); font-size:17px; font-variant-numeric:tabular-nums;
  padding:2px 9px; border-radius:6px; background:var(--panel-2); min-width:52px; text-align:center;
}
/* La tanda de penales, abajo del marcador de los noventa minutos */
.res-sc i{
  display:block; font-style:normal; font-family:var(--f-cond); font-weight:700;
  font-size:10px; letter-spacing:.04em; opacity:.72; margin-top:1px;
}
.res-sc.w{ color:#6bf0a8; } .res-sc.l{ color:#ff9c9c; }
.res-comp{
  font-family:var(--f-cond); font-weight:600; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.res-me{ font-size:11.5px; color:var(--gold-2); font-family:var(--f-cond); font-weight:700; letter-spacing:.06em; }

.riesgo-box{
  border-radius:16px; padding:16px 18px; margin-top:4px;
  border:1px solid rgba(255,255,255,.1); background:var(--panel-2);
  animation:fadeUp .5s var(--ease-out) both;
}
.riesgo-box.ok{ border-color:rgba(23,201,100,.4); background:rgba(6,50,28,.35); }
.riesgo-box.bad{ border-color:rgba(224,59,59,.4); background:rgba(58,10,10,.35); }
.riesgo-box h4{
  font-family:var(--f-cond); font-weight:700; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 7px;
}
.riesgo-box p{ margin:0; font-size:13.5px; line-height:1.5; }