/* =========================================================
   careersim.css | HOCKEY CAREER SIMULATOR
   Reescrito de cero: la versión anterior tenía el archivo
   parcialmente duplicado (cuatro copias de .rink-pos, dos de
   cada media query), y esas reglas contradictorias se pisaban
   entre sí. De ahí los textos superpuestos en móvil.
   ========================================================= */

.sim-page {
    --bg:      hsl(240 10% 4%);
    --card:    hsl(240 10% 7%);
    --surface: hsl(240 10% 10%);
    --line:    hsl(240 10% 14%);
    --fg:      hsl(0 0% 98%);
    --fg-dim:  hsl(240 5% 65%);
    --fg-mute: hsl(240 5% 45%);
    --good:    hsl(142 70% 45%);
    --bad:     hsl(0 72% 55%);
    --warn:    hsl(48 96% 53%);
    --accent:  #00f2ff;
    --r:       1rem;

    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 14px 34px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--fg);
    box-sizing: border-box;
}
.sim-page *, .sim-page *::before, .sim-page *::after { box-sizing: border-box; }
.sim-page * { min-width: 0; }          /* nada desborda su columna */

/* ---------- CONTENEDOR Y VISTAS ---------- */
.sim-shell {
    position: relative;
    height: min(88svh, 880px);
    min-height: 560px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.sim-view { position: absolute; inset: 0; display: none;
            flex-direction: column; padding: 12px; overflow: hidden; }
.sim-view.is-active { display: flex; }
.sim-view.enter { animation: viewIn .4s cubic-bezier(.22,1,.36,1) both; }
.sim-view.leave { animation: viewOut .26s ease both; }

@keyframes viewIn  { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes viewOut { from { opacity:1; } to { opacity:0; transform:translateY(-12px) scale(.99); } }
@keyframes riseIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes pop     { 0%{transform:scale(1)} 42%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes blink   { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes sweep   { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
@keyframes rowIn   { from{opacity:0; transform:translateX(-16px)} to{opacity:1; transform:none} }
@keyframes optIn   { from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }
@keyframes flashIn { 0%{opacity:0; transform:scale(.9)} 55%{transform:scale(1.04)} 100%{opacity:1; transform:none} }
@keyframes trophyIn{ 0%{opacity:0; transform:scale(.5) rotate(-12deg)} 60%{transform:scale(1.12) rotate(4deg)} 100%{opacity:1; transform:none} }
@keyframes deltaIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.stagger { animation: riseIn .5s cubic-bezier(.22,1,.36,1) both; }
.stagger:nth-child(1){animation-delay:.04s} .stagger:nth-child(2){animation-delay:.09s}
.stagger:nth-child(3){animation-delay:.14s} .stagger:nth-child(4){animation-delay:.19s}
.stagger:nth-child(5){animation-delay:.24s} .stagger:nth-child(6){animation-delay:.29s}

/* =========================================================
   PASO 1 · RITMO
   ========================================================= */
.setup-body {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    gap: 13px; padding: 10px 8px; text-align: center;
}
.setup-hero { gap: 14px; }
.setup-create { justify-content: flex-start; gap: 12px; padding-top: 4px; }

.setup-head-row { position: relative; width: 100%;
                  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setup-eyebrow { font-size:.66rem; font-weight:800; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--fg-mute); }
.setup-title { font-size:1.7rem; font-weight:900; letter-spacing:-.02em; margin:0; }
.setup-sub { color:var(--fg-dim); font-size:.88rem; margin:0; max-width:430px; }

.btn-ghost { background:none; border:none; cursor:pointer; color:var(--fg-mute);
             font-weight:700; font-size:.8rem; font-family:inherit; transition:color .2s; }
.btn-ghost:hover { color:var(--fg); }

.hero-block { display:flex; flex-direction:column; align-items:center; gap:7px; }
.hero-mark {
    position:relative; width:64px; height:64px; border-radius:20px;
    display:grid; place-items:center;
    background:linear-gradient(150deg, hsl(240 10% 13%), hsl(240 10% 8%));
    border:1px solid var(--line); box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.hero-emoji { font-size:1.9rem; position:relative; z-index:1;
              animation:heroFloat 3.4s ease-in-out infinite; }
@keyframes heroFloat { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-4px) rotate(4deg)} }
.hero-ring {
    position:absolute; inset:-1px; border-radius:20px; pointer-events:none; opacity:.85;
    background:conic-gradient(from 0deg, transparent 0 62%,
               color-mix(in srgb,var(--accent) 70%,transparent) 78%, transparent 92%);
    animation:heroSpin 4.5s linear infinite;
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
@keyframes heroSpin { to { transform:rotate(360deg); } }

.hero-label { font-size:.6rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
              color:var(--fg-mute); position:relative; padding:0 40px; }
.hero-label::before, .hero-label::after {
    content:""; position:absolute; top:50%; width:30px; height:1px;
    background:linear-gradient(90deg, transparent, var(--line));
}
.hero-label::before { left:0; }
.hero-label::after { right:0; transform:scaleX(-1); }
.hero-foot { font-size:.6rem; color:hsl(240 5% 38%); font-weight:600; }

.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
             width:100%; max-width:680px; }
.mode-card {
    position:relative; overflow:hidden; isolation:isolate;
    background:linear-gradient(165deg, hsl(240 10% 12%), hsl(240 10% 8.5%));
    border:1px solid var(--line); border-radius:18px;
    padding:16px 14px 14px; cursor:pointer; color:var(--fg); font-family:inherit;
    display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
    transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .3s;
}
.mode-glow {
    position:absolute; inset:-40% -20% auto -20%; height:120%; z-index:-1;
    background:radial-gradient(circle at 50% 0%, var(--mg, rgba(255,255,255,.14)), transparent 62%);
    opacity:.5; transition:opacity .35s, transform .45s;
}
.mode-card:hover { transform:translateY(-5px); border-color:hsl(240 5% 32%); box-shadow:0 18px 34px rgba(0,0,0,.5); }
.mode-card:hover .mode-glow { opacity:1; transform:translateY(6%); }
.mode-card.sel { border-color:var(--accent);
                 box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent), 0 18px 34px rgba(0,0,0,.5); }
.mode-card[data-mode="intenso"] { --mg:rgba(255,90,120,.30); }
.mode-card[data-mode="normal"]  { --mg:rgba(0,242,255,.26); }
.mode-card[data-mode="expres"]  { --mg:rgba(255,255,255,.16); }

.mode-badge {
    position:absolute; top:9px; right:-30px; z-index:2;
    background:var(--accent); color:#04222a;
    font-size:.5rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase;
    padding:3px 32px; transform:rotate(38deg); box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.is-reco { border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); }

.mode-top { display:flex; flex-direction:column; align-items:center; gap:7px; }
.mode-icon {
    width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
    font-size:1.5rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07);
    transition:transform .32s cubic-bezier(.22,1,.36,1), background .25s;
}
.mode-card:hover .mode-icon { transform:scale(1.1) rotate(-7deg); background:rgba(255,255,255,.1); }

.mode-name { font-size:1.12rem; font-weight:900; letter-spacing:-.02em; line-height:1; }
.mode-desc { font-size:.72rem; color:var(--fg-dim); line-height:1.3; }
.mode-desc b { color:var(--fg); font-weight:800; }
.mode-tag { font-size:.5rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
            padding:3px 9px; border-radius:999px; }
.tag-hot  { background:color-mix(in srgb,var(--bad) 18%,transparent);    color:#ff9caf; }
.tag-mid  { background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
.tag-cool { background:rgba(255,255,255,.08); color:var(--fg-dim); }

.cadence { display:flex; gap:5px; align-items:center; margin:1px 0 2px; }
.cadence i { width:7px; height:7px; border-radius:50%;
             background:rgba(255,255,255,.13); transition:background .3s, transform .3s; }
.cadence i.on { background:var(--fg-dim); }
.mode-card:hover .cadence i.on, .mode-card.sel .cadence i.on { background:var(--accent); }

.mode-meta { font-size:.64rem; color:var(--fg-mute); line-height:1.45;
             border-top:1px solid rgba(255,255,255,.07); padding-top:8px; width:100%; }
.mode-time { font-size:.56rem; font-weight:900; letter-spacing:.08em; color:var(--fg-dim);
             background:rgba(255,255,255,.05); padding:3px 10px; border-radius:999px; }
.mode-pill { font-size:.58rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
             padding:3px 10px; border-radius:999px; opacity:0;
             background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent);
             transition:opacity .3s; }
.mode-pill.on { opacity:1; }

/* =========================================================
   PASO 2 · CREAR JUGADOR
   ========================================================= */
.creator3 {
    display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.9fr) minmax(0,1.08fr);
    gap:14px; width:100%; flex:1; min-height:0; text-align:left;
}
.c-col { display:flex; flex-direction:column; gap:9px; min-height:0;
         background:var(--surface); border:1px solid var(--line);
         border-radius:var(--r); padding:11px; }
.c-label { font-size:.55rem; font-weight:900; letter-spacing:.13em;
           text-transform:uppercase; color:var(--fg-mute); }

/* --- Camiseta --- */
/* La camiseta se dimensiona por sí misma. Antes iba con height:100%
   dentro de una caja sin altura definida, así que medía cero y no se
   veía, justo en móvil, que es donde más se juega. */
.jersey-box { position:relative; flex:0 0 auto; min-height:0;
              display:flex; align-items:center; justify-content:center; padding:2px 0 6px; }
.jersey-svg {
    height:auto; width:100%; max-width:190px; max-height:none;
    --j-primary:#2a2a33; --j-secondary:#4a4a57;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));
    transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.jersey-svg.dressed { animation:jerseyPop .5s cubic-bezier(.22,1,.36,1); }
@keyframes jerseyPop { 0%{transform:scale(.96) rotate(-1.5deg)} 60%{transform:scale(1.03)} 100%{transform:none} }

.j-body  { fill:var(--j-primary); stroke:rgba(0,0,0,.35); stroke-width:2; transition:fill .45s ease; }
.j-trim  { fill:var(--j-secondary); transition:fill .45s ease; }
.j-shade { fill:url(#jShade); }
.j-lace  { stroke:rgba(255,255,255,.75); stroke-width:2.4; stroke-linecap:round; fill:none; }
.jersey-number { font-family:'Inter',sans-serif; font-weight:900; font-size:74px; fill:#fff;
                 paint-order:stroke; stroke:rgba(0,0,0,.3); stroke-width:3px; letter-spacing:-2px; }
.jersey-name { font-family:'Inter',sans-serif; font-weight:800; font-size:19px; letter-spacing:1.5px;
               fill:#fff; text-transform:uppercase; paint-order:stroke;
               stroke:rgba(0,0,0,.28); stroke-width:2px; }
.jersey-flag { position:absolute; top:4px; right:8px; line-height:0; }
.jf-img { width:38px; border-radius:4px; display:block; animation:fadeIn .4s both;
          box-shadow:0 3px 10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.18); }

/* --- Campos --- */
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label { font-size:.55rem; font-weight:900; letter-spacing:.13em;
               text-transform:uppercase; color:var(--fg-mute); }
.field-row { display:flex; gap:9px; }
.field-row .field:first-child { flex:0 0 34%; }
.field-row .field:last-child  { flex:1 1 auto; }

.inp-wrap { position:relative; display:flex; align-items:center; }
.inp-ico { position:absolute; left:11px; z-index:1; font-size:.72rem; font-weight:900;
           color:hsl(240 5% 40%); pointer-events:none; transition:color .22s;
           font-variant-numeric:tabular-nums; }
.inp-wrap:focus-within .inp-ico { color:var(--accent); }
.inp-hint { position:absolute; right:11px; z-index:1; font-size:.56rem; font-weight:800;
            color:hsl(240 5% 36%); pointer-events:none;
            font-variant-numeric:tabular-nums; transition:color .22s; }
.inp-hint.full { color:var(--accent); }

.inp {
    width:100%; padding:10px 13px 10px 28px;
    background:linear-gradient(180deg, hsl(240 10% 13%), hsl(240 10% 10%));
    border:1px solid var(--line); border-radius:11px;
    color:var(--fg); font-family:inherit; font-size:.88rem; font-weight:700;
    outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transition:border-color .22s, box-shadow .22s, background .22s;
}
.inp::placeholder { color:hsl(240 5% 36%); font-weight:600; }
.inp:hover { border-color:hsl(240 5% 26%); }
.inp:focus { border-color:var(--accent);
             background:linear-gradient(180deg, hsl(240 10% 15%), hsl(240 10% 11%));
             box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent),
                        inset 0 1px 0 rgba(255,255,255,.06); }
#lastNameInput { padding-right:46px; letter-spacing:.02em; }
#numberInput { text-align:center; font-weight:900; font-size:1rem;
               font-variant-numeric:tabular-nums; letter-spacing:.05em;
               padding-left:24px; padding-right:10px;
               -moz-appearance:textfield; }
#numberInput::-webkit-outer-spin-button,
#numberInput::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#nationSearch { padding-left:30px; }

.seg { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
       background:hsl(240 10% 10%); border:1px solid var(--line);
       border-radius:11px; padding:3px; overflow:hidden; }
.seg-slider { position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
              border-radius:8px; z-index:0; opacity:0;
              background:color-mix(in srgb,var(--accent) 22%,hsl(240 10% 17%));
              box-shadow:0 2px 8px rgba(0,0,0,.4);
              transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .25s; }
.seg-slider.on { opacity:1; }
.seg-slider.right { transform:translateX(100%); }
.seg-btn { position:relative; z-index:1; border:none; background:transparent; border-radius:8px;
           padding:7px 4px; cursor:pointer; color:var(--fg-mute); font-family:inherit;
           font-size:.74rem; font-weight:800; transition:color .22s, transform .18s; }
.seg-btn:hover { color:var(--fg); }
.seg-btn.sel { color:#fff; }

/* --- Lista de países --- */
.nation-list { flex:1; min-height:120px; overflow-y:auto;
               display:flex; flex-direction:column; gap:3px; padding-right:3px; }
.nation-list::-webkit-scrollbar { width:6px; }
.nation-list::-webkit-scrollbar-thumb { background:hsl(240 5% 26%); border-radius:6px; }
.nat { display:flex; align-items:center; gap:9px; width:100%;
       padding:6px 9px; border-radius:9px; cursor:pointer;
       background:transparent; border:1px solid transparent;
       color:var(--fg-dim); font-family:inherit; text-align:left; transition:all .18s; }
.nat:hover { background:rgba(255,255,255,.05); color:var(--fg); }
.nat.sel { background:color-mix(in srgb,var(--accent) 14%,transparent);
           border-color:var(--accent); color:var(--fg); }
.nat-flag { width:28px; height:20px; object-fit:cover; border-radius:3px; flex-shrink:0;
            box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.nat-name { font-size:.76rem; font-weight:700; overflow:hidden;
            text-overflow:ellipsis; white-space:nowrap; }
.nat-empty { text-align:center; color:var(--fg-mute); font-size:.78rem; padding:14px 0; }

/* --- Pista de hockey --- */
.rink { position:relative; flex:0 0 auto; width:100%; aspect-ratio:300/330;
        border-radius:14px; overflow:hidden;
        background:linear-gradient(180deg,#0f1a24,#0a1219);
        border:1px solid rgba(255,255,255,.06);
        box-shadow:inset 0 0 40px rgba(0,0,0,.45); }
.rink-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Al estirar la pista el escalado no es uniforme: esto evita que
   los trazos engorden en un eje y se vean deformados. */
.rink-svg * { vector-effect:non-scaling-stroke; }
.rink-svg .ice { fill:#0d1b26; stroke:rgba(255,255,255,.16); stroke-width:2.5; }
.rink-svg .line-blue { stroke:#1f6fd0; stroke-width:3; opacity:.75; }
.rink-svg .line-red  { stroke:#c0303c; stroke-width:3; opacity:.75; }
.rink-svg .line-goal { stroke:#c0303c; stroke-width:1.4; opacity:.5; }
.rink-svg .circ { fill:none; stroke:#c0303c; stroke-width:1.6; opacity:.4; }
.rink-svg .dot  { fill:#c0303c; opacity:.55; }
.rink-svg .crease { fill:rgba(31,111,208,.22); stroke:#1f6fd0; stroke-width:1.6; opacity:.7; }
.rink-svg .goal { fill:none; stroke:#c0303c; stroke-width:2; opacity:.8; }

.rink-pos {
    position:absolute; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:56px; height:44px; padding:0;
    border-radius:11px; cursor:pointer; font-family:inherit;
    background:rgba(10,16,22,.82); border:1.5px solid rgba(255,255,255,.18);
    color:var(--fg-dim); backdrop-filter:blur(3px);
    transition:border-color .25s, background .25s, box-shadow .25s, color .25s;
}
.rink-pos b { font-size:.86rem; font-weight:900; line-height:1.05; color:var(--fg); }
.rink-pos span { font-size:.5rem; font-weight:600; letter-spacing:.02em; }
/* OJO: todo transform debe conservar el translate(-50%,-50%) o el
   botón se descoloca media caja. Ese era el "se mueve por la cara". */
.rink-pos:hover { transform:translate(-50%,-50%) scale(1.09);
                  border-color:var(--accent); color:var(--fg);
                  box-shadow:0 6px 18px rgba(0,0,0,.5); }
.rink-pos:active { transform:translate(-50%,-50%) scale(.96); }
.rink-pos.sel {
    transform:translate(-50%,-50%);
    border-color:var(--accent); color:var(--fg);
    background:color-mix(in srgb,var(--accent) 26%,rgba(10,16,22,.9));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent), 0 8px 20px rgba(0,0,0,.55);
}
.rink-pos.sel b { color:#fff; }
.pos-hint { font-size:.6rem; color:var(--fg-mute); text-align:center; font-weight:600; }

.btn-primary {
    background:var(--fg); color:#0a0a0c; border:none; border-radius:999px;
    padding:12px 34px; font-family:inherit; font-size:.9rem; font-weight:800;
    cursor:pointer; transition:transform .22s, box-shadow .22s, background .2s;
}
.btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.4); }
.btn-primary:disabled { background:var(--surface); color:var(--fg-mute); cursor:not-allowed; }

/* =========================================================
   CARRERA
   ========================================================= */
.career-grid { flex:1; min-height:0; display:grid;
               grid-template-columns:minmax(0,330px) minmax(0,1fr); gap:11px; }
.col-left  { display:flex; flex-direction:column; gap:9px; min-height:0; }
.col-right { display:flex; flex-direction:column; min-height:0;
             background:hsl(240 10% 5.5%); border:1px solid var(--line);
             border-radius:var(--r); padding:9px 8px; }

/* --- Ficha del jugador --- */
.player-panel { position:relative; overflow:hidden; flex-shrink:0;
                background:var(--surface); border-radius:var(--r); padding:11px; }
.panel-crest { position:absolute; right:-22%; top:50%; transform:translateY(-50%);
               width:78%; aspect-ratio:1; background-size:contain; background-repeat:no-repeat;
               background-position:center; filter:blur(14px) saturate(1.3);
               opacity:0; transition:opacity .7s ease; pointer-events:none; }
.panel-crest.on { opacity:.32; }
.panel-veil { position:absolute; inset:0; pointer-events:none;
              background:linear-gradient(100deg, hsl(240 10% 10% / .96) 38%, hsl(240 10% 10% / .55) 100%); }
.panel-inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:9px; }

.panel-top { display:flex; gap:11px; align-items:center; }
.ovr-badge { width:64px; height:64px; flex-shrink:0; border-radius:14px;
             display:flex; flex-direction:column; align-items:center; justify-content:center;
             font-weight:900; line-height:1;
             transition:background .6s ease, color .6s ease, box-shadow .6s; }
.ovr-label { font-size:.5rem; letter-spacing:.1em; opacity:.55; margin-bottom:2px; }
.ovr-value { font-size:1.85rem; display:block; }
.ovr-value.pop { animation:pop .55s cubic-bezier(.22,1,.36,1); }

.tier-bronze { background:linear-gradient(145deg,#a2661f,#5c3a12); color:#ffe6c2; }
.tier-silver { background:linear-gradient(145deg,#c9ccd4,#7d8290); color:#16161a; }
.tier-gold   { background:linear-gradient(145deg,#ffd75e,#c98a12); color:#3b2a04;
               box-shadow:0 0 16px rgba(255,196,60,.3); }
.tier-emerald{ background:linear-gradient(145deg,#4ff0b0,#0e8a5f); color:#03251a;
               box-shadow:0 0 20px rgba(46,230,150,.42); }
.tier-ruby   { background:linear-gradient(145deg,#ff5c7a,#a1002a); color:#fff0f3;
               box-shadow:0 0 26px rgba(255,60,100,.55);
               animation:rubyGlow 2.4s ease-in-out infinite; }
@keyframes rubyGlow { 0%,100%{box-shadow:0 0 20px rgba(255,60,100,.45)} 50%{box-shadow:0 0 34px rgba(255,60,100,.75)} }

.panel-id { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.panel-chips { display:flex; gap:5px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.08);
        border-radius:999px; padding:2px 7px; font-size:.55rem; font-weight:800;
        letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.chip-pos { background:rgba(0,242,255,.16); color:var(--accent); }
.chip-role:empty { display:none; }
.chip-role.role-ok  { background:color-mix(in srgb,var(--good) 20%,transparent); color:var(--good); }
.chip-role.role-mid { background:rgba(255,255,255,.1); color:var(--fg-dim); }
.chip-role.role-bad { background:color-mix(in srgb,var(--bad) 20%,transparent); color:var(--bad); }
.chip-flag { width:15px; height:11px; object-fit:cover; border-radius:2px;
             box-shadow:0 0 0 1px rgba(255,255,255,.16); }

.panel-name { font-size:1.15rem; font-weight:900; letter-spacing:-.02em;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-age { font-size:.68rem; color:var(--fg-dim); font-weight:600; }

.club-block { display:flex; flex-direction:column; gap:2px;
              padding-top:7px; border-top:1px solid rgba(255,255,255,.07); }
.club-line { display:flex; align-items:center; gap:7px; min-width:0; }
.club-name { font-size:.95rem; font-weight:800; overflow:hidden;
             text-overflow:ellipsis; white-space:nowrap; }
.league-line { display:flex; align-items:center; gap:5px; font-size:.64rem;
               color:var(--fg-dim); font-weight:600; min-width:0; }
.league-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.league-country { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; white-space:nowrap; }
.league-country::before { content:"·"; opacity:.4; margin-right:2px; }
.lc-flag { width:17px; height:12px; object-fit:cover; border-radius:2px; }

.crest-slot { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.crest-slot.sm { width:28px; height:28px; }
.crest-slot.xs { width:18px; height:18px; }
.crest-slot.lg { width:54px; height:54px; }
.crest-slot img { width:100%; height:100%; object-fit:contain; animation:fadeIn .4s both; }
.crest-slot .ini { width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,.09);
                   display:flex; align-items:center; justify-content:center;
                   font-weight:900; color:var(--fg-dim); font-size:.42em; letter-spacing:-.02em; }

.value-row { display:flex; align-items:center; justify-content:space-between; gap:8px;
             padding-top:7px; border-top:1px solid rgba(255,255,255,.07); }
.value-key { font-size:.55rem; font-weight:800; letter-spacing:.1em;
             text-transform:uppercase; color:var(--fg-mute); }
.value-main { display:flex; align-items:baseline; gap:6px; }
#valueText { font-size:1.05rem; font-weight:900; font-variant-numeric:tabular-nums; }
.value-delta { font-size:.66rem; font-weight:800; }
.value-delta.up { color:var(--good); }
.value-delta.down { color:var(--bad); }
.value-delta.show { animation:deltaIn .6s cubic-bezier(.22,1,.36,1) both; }

.totals-bar { display:flex; align-items:center; justify-content:space-between;
              padding-top:8px; border-top:1px solid rgba(255,255,255,.07); }
.tot { display:flex; flex-direction:column; align-items:center; gap:1px; flex:1; min-width:0; }
.tot-k { font-size:.5rem; font-weight:800; letter-spacing:.09em;
         text-transform:uppercase; color:var(--fg-mute); }
.tot-v { font-size:.95rem; font-weight:800; font-variant-numeric:tabular-nums; }

/* --- Vitrina durante la carrera --- */
.shelf-box { background:var(--surface); border-radius:var(--r); padding:8px 10px; flex-shrink:0; }
.box-label { font-size:.5rem; font-weight:800; letter-spacing:.12em;
             text-transform:uppercase; color:var(--fg-mute); }
.trophy-shelf { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px;
                max-height:52px; overflow-y:auto; }
.trophy-shelf::-webkit-scrollbar { width:5px; }
.trophy-shelf::-webkit-scrollbar-thumb { background:hsl(240 5% 25%); border-radius:5px; }
.shelf-empty { font-size:.66rem; color:var(--fg-mute); font-weight:600; }
.trophy-pill { display:inline-flex; align-items:center; gap:4px;
               background:rgba(255,196,60,.12); border:1px solid rgba(255,196,60,.32);
               color:#ffd75e; border-radius:999px; padding:3px 8px;
               font-size:.6rem; font-weight:800;
               animation:trophyIn .6s cubic-bezier(.22,1,.36,1) both; }

/* --- Franja de selección --- */
.nt-strip { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px;
            align-items:center; background:var(--surface); border:1px solid var(--line);
            border-radius:var(--r); padding:9px 11px; flex-shrink:0;
            transition:background .5s, border-color .5s, opacity .5s; }
.nt-strip.off { opacity:.45; filter:grayscale(1); }
.nt-strip.on  { opacity:1; filter:none; }
.nt-strip.ignite { animation:flashIn .8s cubic-bezier(.22,1,.36,1); }
.nts-left { display:flex; align-items:center; gap:9px; min-width:0; }
.nts-flag-img { width:30px; height:22px; object-fit:cover; border-radius:4px; flex-shrink:0;
                box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.nts-id { display:flex; flex-direction:column; min-width:0; }
.nts-title { display:flex; align-items:center; gap:7px; min-width:0;
             font-size:.75rem; font-weight:900; letter-spacing:-.01em; }
.nts-country { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nts-inline-medals { display:flex; gap:3px; align-items:center; flex-shrink:0; }
.nts-inline-medals .medal { font-size:.85rem; }
.nts-stats { display:flex; gap:14px; justify-content:center; }
.nts-stats > div { display:flex; flex-direction:column; align-items:center; }
.nts-stats span { font-size:.46rem; font-weight:800; letter-spacing:.08em;
                  text-transform:uppercase; color:var(--fg-mute); }
.nts-stats b { font-size:.82rem; font-weight:900; font-variant-numeric:tabular-nums; }
.nts-medals { display:flex; gap:4px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.nts-title-pill { font-size:.5rem; font-weight:900; letter-spacing:.04em;
                  padding:2px 7px; border-radius:999px; white-space:nowrap;
                  background:rgba(255,196,60,.14); border:1px solid rgba(255,196,60,.32);
                  color:#ffd75e; animation:trophyIn .5s cubic-bezier(.22,1,.36,1) both; }
.medal { display:inline-flex; align-items:center; }
.medal i { font-size:.52rem; font-weight:900; font-style:normal; margin-left:1px; }
.medal.gold i { color:#ffd75e; }
.medal.silv i { color:#d6dbe4; }
.medal.brnz i { color:#d89a62; }

/* --- Historial --- */
.history-head, .history-row-inner {
    display:grid; grid-template-columns:30px minmax(0,1fr) 30px 34px 34px 34px;
    gap:5px; align-items:center;
}
.history-head { padding:0 7px 5px; flex-shrink:0; font-size:.52rem; font-weight:800;
                letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute);
                text-align:center; border-bottom:1px solid var(--line); margin-bottom:5px; }
.history-head .h-club { text-align:left; padding-left:3px; }
.history-rows { flex:1; min-height:0; display:flex; flex-direction:column; gap:2px;
                overflow-y:auto; }
.history-rows::-webkit-scrollbar { width:5px; }
.history-rows::-webkit-scrollbar-thumb { background:hsl(240 5% 25%); border-radius:5px; }

.h-row { position:relative; border-radius:8px; overflow:hidden;
         flex:1 0 26px; min-height:26px;
         background:hsl(240 10% 8%); transition:background .4s; }
.h-row.filled { background:var(--surface); animation:rowIn .5s cubic-bezier(.22,1,.36,1) both; }
.h-row.future .history-row-inner { opacity:.24; }
.h-row.pending { background:hsl(240 10% 13%); }
.h-row.pending::after { content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    animation:sweep 1.3s linear infinite; }
.h-tint { position:absolute; inset:0; pointer-events:none; }
.history-row-inner { position:relative; z-index:1; padding:0 7px; height:100%; }

.h-age { font-size:.66rem; font-weight:800; text-align:center; border-radius:6px;
         padding:2px 0; font-variant-numeric:tabular-nums; background:rgba(255,255,255,.07);
         transition:background .4s, color .4s; }
.h-club { display:flex; align-items:center; gap:5px; min-width:0; }
.h-club .crest-slot { width:21px; height:21px; }
.h-club > span { font-size:.72rem; font-weight:700; overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap; }
.mini-trophy { font-size:.62rem; flex-shrink:0; animation:trophyIn .5s both; }
.move-badge { flex-shrink:0; font-size:.6rem; font-weight:900; line-height:1;
              padding:1px 4px; border-radius:4px;
              animation:trophyIn .5s cubic-bezier(.22,1,.36,1) both; }
.move-badge.up   { color:var(--good); background:color-mix(in srgb,var(--good) 18%,transparent); }
.move-badge.down { color:var(--bad);  background:color-mix(in srgb,var(--bad) 18%,transparent); }
.h-ovr { font-size:.62rem; font-weight:900; text-align:center; border-radius:5px;
         padding:2px 0; font-variant-numeric:tabular-nums; }
.h-stat { font-size:.68rem; font-weight:700; text-align:center;
          font-variant-numeric:tabular-nums; color:var(--fg-dim); }
.h-pending-label { grid-column:2 / -1; font-size:.68rem; font-weight:700; color:var(--fg-dim);
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- Panel de decisiones --- */
.dock { flex:1; min-height:0; padding:10px; background:var(--surface);
        border-radius:var(--r); display:flex; flex-direction:column; gap:8px; }
.dock-head { display:flex; flex-direction:column; gap:2px; flex-shrink:0; animation:riseIn .4s both; }
.dock-title { font-size:.92rem; font-weight:900; letter-spacing:-.01em; }
.dock-sub { font-size:.7rem; color:var(--fg-dim); line-height:1.35; }
.dock-status { flex:1; display:flex; flex-direction:column; align-items:center;
               justify-content:center; gap:8px; color:var(--fg-dim);
               font-size:.78rem; font-weight:600; text-align:center; }
.dock-flash { font-size:.88rem; font-weight:800; color:var(--fg); text-align:center;
              animation:flashIn .45s cubic-bezier(.22,1,.36,1) both; }
.spinner { width:22px; height:22px; border-radius:50%;
           border:2px solid rgba(255,255,255,.12); border-top-color:var(--accent);
           animation:spin .8s linear infinite; }

.dock-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; flex:1; min-height:0; }
.dock-options.two { grid-template-columns:repeat(2,1fr); }

.opt { position:relative; overflow:hidden; background:var(--card);
       border:1px solid var(--line); border-radius:12px; padding:8px 6px;
       cursor:pointer; color:var(--fg); font-family:inherit;
       display:flex; flex-direction:column; align-items:center; justify-content:space-between;
       gap:5px; text-align:center; min-height:0;
       transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, box-shadow .22s;
       animation:optIn .45s cubic-bezier(.22,1,.36,1) both; }
.opt:nth-child(1){animation-delay:.03s} .opt:nth-child(2){animation-delay:.09s} .opt:nth-child(3){animation-delay:.15s}
.opt:hover { transform:translateY(-3px); border-color:hsl(240 5% 34%); box-shadow:0 10px 20px rgba(0,0,0,.4); }
.opt:active { transform:scale(.97); }
.opt.picked { animation:picked .5s ease both; }
@keyframes picked { 0%{transform:scale(1)} 40%{transform:scale(1.05)} 100%{transform:scale(1)} }
.opt-tint { position:absolute; inset:0; pointer-events:none; }
.opt > *:not(.opt-tint) { position:relative; z-index:1; }
.opt.stay { border-color:rgba(255,255,255,.18); }

.opt-kicker { font-size:.54rem; font-weight:700; color:var(--fg-mute);
              text-transform:uppercase; letter-spacing:.06em; }
.opt-name { font-size:.78rem; font-weight:800; line-height:1.15;
            overflow:hidden; text-overflow:ellipsis; }
.opt-league { display:flex; align-items:center; justify-content:center; gap:4px;
              font-size:.54rem; color:var(--fg-dim); font-weight:600; max-width:100%; }
.opt-league span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opt-lg { width:16px; height:16px; object-fit:contain; flex-shrink:0; }
.opt-flag { width:15px; height:11px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.opt-effect { width:100%; border-radius:999px; padding:4px 6px; font-size:.56rem;
              font-weight:700; line-height:1.25; display:flex; align-items:center;
              gap:4px; justify-content:center; }
.eff-up   { background:color-mix(in srgb,var(--good) 16%,transparent); color:var(--good); }
.eff-down { background:color-mix(in srgb,var(--bad) 16%,transparent);  color:var(--bad); }
.eff-risk { background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn); }
.eff-flat { background:rgba(255,255,255,.06); color:var(--fg-dim); }
.opt-odds { display:flex; align-items:center; gap:4px; width:100%;
            font-size:.56rem; font-weight:900; letter-spacing:-.01em; }
.opt-odds b.ok  { color:var(--good); }
.opt-odds b.bad { color:var(--bad); }
.opt-odds i { flex:1; height:4px; border-radius:999px; opacity:.7;
              background:linear-gradient(90deg,var(--good) 0 50%,var(--bad) 50% 100%); }
.opt-odds.safe { justify-content:center; color:var(--fg-mute); font-weight:700; }

/* --- Ruleta --- */
.wheel-wrap { flex:1; display:flex; flex-direction:column; align-items:center;
              justify-content:center; gap:8px; animation:riseIn .3s both; }
.wheel-legend { display:flex; gap:10px; }
.lg { font-size:.62rem; font-weight:900; padding:2px 9px; border-radius:999px; }
.lg-ok  { background:color-mix(in srgb,var(--good) 18%,transparent); color:var(--good); }
.lg-bad { background:color-mix(in srgb,var(--bad) 18%,transparent);  color:var(--bad); }
.wheel-stage { position:relative; width:96px; height:96px; flex-shrink:0; }
.wheel { width:100%; height:100%; border-radius:50%;
         border:3px solid hsl(240 10% 16%);
         box-shadow:inset 0 0 18px rgba(0,0,0,.55); transform:rotate(0deg); }
.wheel-pin { position:absolute; top:-7px; left:50%; transform:translateX(-50%);
             width:0; height:0; z-index:2;
             border-left:7px solid transparent; border-right:7px solid transparent;
             border-top:12px solid var(--fg);
             filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.wheel-stage.landed-ok  { animation:landPop .5s cubic-bezier(.22,1,.36,1); }
.wheel-stage.landed-bad { animation:landShake .45s ease; }
@keyframes landPop   { 0%{transform:scale(1)} 45%{transform:scale(1.11)} 100%{transform:scale(1)} }
@keyframes landShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
                       50%{transform:translateX(6px)} 80%{transform:translateX(-3px)} }
.wheel-msg { font-size:.8rem; font-weight:800; color:var(--fg-dim); }
.wheel-msg.ok  { color:var(--good); animation:flashIn .35s both; }
.wheel-msg.bad { color:var(--bad);  animation:flashIn .35s both; }

/* --- Penalti --- */
.shootout { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.net-stage { position:relative; flex:1; min-height:120px;
             display:flex; align-items:center; justify-content:center;
             background:radial-gradient(ellipse at 50% 60%, #12212e, #0a1219);
             border:1px solid rgba(255,255,255,.07); border-radius:12px; overflow:hidden; }
.net-svg { width:100%; height:100%; max-height:150px; }
.net-svg .target { fill:transparent; transition:fill .3s; }
.net-svg .target.aimed { fill:rgba(0,242,255,.14); }
.goalie { transition:transform .45s cubic-bezier(.3,1.4,.5,1); transform-origin:130px 90px; }
.goalie.dive-l { transform:translateX(-38px) rotate(-24deg); }
.goalie.dive-r { transform:translateX(38px) rotate(24deg); }
.g-body  { fill:#e8eaee; stroke:rgba(0,0,0,.3); stroke-width:1.5; }
.g-head  { fill:#e8eaee; stroke:rgba(0,0,0,.3); stroke-width:1.5; }
.g-cage  { fill:none; stroke:#8f96a3; stroke-width:2; }
.g-pad   { fill:#cfd4dc; stroke:rgba(0,0,0,.25); stroke-width:1.2; }
.g-glove { fill:#b9c0ca; stroke:rgba(0,0,0,.28); stroke-width:1.2; }
.g-block { fill:#b9c0ca; stroke:rgba(0,0,0,.28); stroke-width:1.2; }
.g-stick { fill:#8a6a44; stroke:rgba(0,0,0,.3); stroke-width:1.2; }
.puck { fill:#111; stroke:rgba(255,255,255,.35); stroke-width:1.2;
        transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.puck.shot-l { transform:translate(-62px,-72px) scale(.8); }
.puck.shot-r { transform:translate(62px,-72px) scale(.8); }
.net-stage.goal  { animation:netGoal .6s ease; box-shadow:inset 0 0 44px rgba(0,255,136,.3); }
.net-stage.saved { animation:netSaved .5s ease; box-shadow:inset 0 0 44px rgba(255,70,90,.25); }
@keyframes netGoal  { 0%{transform:scale(1)} 45%{transform:scale(1.03)} 100%{transform:scale(1)} }
@keyframes netSaved { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 65%{transform:translateX(7px)} }
.shot-result { position:absolute; inset:auto 0 8px 0; text-align:center;
               font-size:.9rem; font-weight:900; letter-spacing:.02em;
               animation:flashIn .4s both; }
.shot-result.ok { color:var(--good); text-shadow:0 0 18px rgba(0,255,136,.5); }
.shot-result.no { color:var(--bad); }
.shot-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; flex-shrink:0; }
.shot-btn { display:flex; align-items:center; justify-content:center; gap:7px;
            background:var(--card); border:1px solid var(--line); border-radius:12px;
            padding:11px 8px; cursor:pointer; color:var(--fg);
            font-family:inherit; font-size:.82rem; font-weight:800;
            transition:transform .2s, border-color .2s, background .2s; }
.shot-btn:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--accent);
                                 background:color-mix(in srgb,var(--accent) 10%,var(--card)); }
.shot-btn:disabled { opacity:.45; cursor:default; }
.shot-arrow { color:var(--accent); font-size:.9rem; }

/* =========================================================
   PANTALLA FINAL
   ========================================================= */
.summary-body { flex:1; min-height:0; overflow-y:auto; padding:2px; }
.summary-body::-webkit-scrollbar { width:6px; }
.summary-body::-webkit-scrollbar-thumb { background:hsl(240 5% 25%); border-radius:6px; }

.sum-shell { display:flex; flex-direction:column; gap:10px; min-height:100%; }
.sum-shell > * { animation:riseIn .5s cubic-bezier(.22,1,.36,1) both; }
.sum-shell > *:nth-child(2){animation-delay:.08s}
.sum-shell > *:nth-child(3){animation-delay:.16s}

.sum-eyebrow { font-size:.55rem; font-weight:900; letter-spacing:.16em;
               text-transform:uppercase; color:var(--fg-mute); }
.sum-eyebrow.gold { color:#ffd75e; }
.empty-note { font-size:.62rem; font-weight:700; text-transform:uppercase;
              letter-spacing:.08em; color:var(--fg-mute); opacity:.7; }
.sum-card { position:relative; overflow:hidden; background:var(--surface);
            border:1px solid var(--line); border-radius:var(--r); padding:11px; }

.sum-hero { display:flex; align-items:center; gap:14px; position:relative; overflow:hidden;
            background:linear-gradient(120deg, hsl(240 10% 12%), hsl(240 10% 8%));
            border:1px solid var(--line); border-radius:var(--r); padding:14px; }
.sum-hero::after { content:""; position:absolute; inset:auto -20% -60% auto;
                   width:60%; aspect-ratio:1; border-radius:50%; pointer-events:none;
                   background:radial-gradient(circle, rgba(255,196,60,.10), transparent 65%); }
.hero-badge { width:74px; height:74px; border-radius:16px; flex-shrink:0; }
.hero-badge .ovr-value { font-size:2.1rem; }
.hero-id { min-width:0; display:flex; flex-direction:column; gap:5px; }
.hero-flag { width:22px; height:16px; object-fit:cover; border-radius:3px;
             box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.sp-name { font-size:1.7rem; font-weight:900; letter-spacing:-.03em; line-height:1; margin:0;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-chips { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.sp-chip { font-size:.58rem; font-weight:800; padding:3px 8px; border-radius:999px;
           background:rgba(255,255,255,.07); white-space:nowrap; }
.sp-chip.sp-pos { background:rgba(0,242,255,.16); color:var(--accent); }

.stat-band { display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
             background:var(--surface); border:1px solid var(--line);
             border-radius:var(--r); overflow:hidden; }
.stat-band.sub { background:hsl(240 10% 8%); }
.stat-big, .stat-sub { display:flex; flex-direction:column; align-items:center;
                       justify-content:center; gap:2px; padding:14px 6px; text-align:center;
                       border-left:1px solid rgba(255,255,255,.06); min-width:0; }
.stat-big:first-child, .stat-sub:first-child { border-left:none; }
.stat-big b { font-size:1.9rem; font-weight:900; line-height:1;
              font-variant-numeric:tabular-nums; letter-spacing:-.02em;
              background:linear-gradient(180deg,#fff,#9aa3b2);
              -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-big span, .stat-sub span { font-size:.52rem; font-weight:800; letter-spacing:.14em;
                                 text-transform:uppercase; color:var(--fg-mute); }
.stat-sub { padding:9px 6px; }
.stat-sub b { font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }

/* --- Vitrina --- */
.cabinet { background:linear-gradient(165deg, rgba(255,196,60,.07), var(--surface) 60%);
           border:1px solid rgba(255,196,60,.16); }
.cabinet-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cabinet-total { font-size:.9rem; font-weight:900; color:#ffd75e;
                 background:rgba(255,196,60,.12); border:1px solid rgba(255,196,60,.3);
                 border-radius:999px; padding:2px 12px; font-variant-numeric:tabular-nums; }
.cabinet-body { display:flex; flex-direction:column; gap:14px; }
.cab-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); gap:9px; }
.trophy-tile { position:relative; overflow:hidden;
               background:hsl(240 10% 11%); border:1px solid var(--line);
               border-radius:13px; padding:11px 6px 9px; cursor:pointer;
               display:flex; flex-direction:column; align-items:center; gap:5px;
               font-family:inherit;
               transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s;
               animation:trophyIn .5s cubic-bezier(.22,1,.36,1) both; }
.trophy-tile img { width:38px; height:44px; object-fit:contain;
                   filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));
                   transition:transform .3s cubic-bezier(.22,1,.36,1); }
.trophy-tile:hover { transform:translateY(-4px); border-color:rgba(255,196,60,.45);
                     box-shadow:0 12px 24px rgba(0,0,0,.5); }
.trophy-tile:hover img { transform:scale(1.1) rotate(-4deg); }
.trophy-tile:active { transform:scale(.96); }
.tt-shine { position:absolute; inset:0; pointer-events:none;
            background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
            transform:translateX(-120%); transition:transform .6s ease; }
.trophy-tile:hover .tt-shine { transform:translateX(120%); }
.tt-count { position:absolute; top:5px; right:5px; font-size:.55rem; font-weight:900;
            color:#3b2a04; background:linear-gradient(145deg,#ffd75e,#c98a12);
            border-radius:999px; padding:1px 6px; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.tt-name { font-size:.5rem; font-weight:700; line-height:1.2; color:var(--fg-dim);
           text-align:center; width:100%;
           display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.trophy-tile.show-name { border-color:#ffd75e;
                         box-shadow:0 0 0 2px rgba(255,196,60,.3), 0 12px 24px rgba(0,0,0,.5); }
.trophy-tile.show-name .tt-name { -webkit-line-clamp:unset; color:#ffd75e; font-weight:800; }
.cab-hint { margin:11px 0 0; text-align:center; font-size:.58rem;
            color:var(--fg-mute); font-weight:600; }
.cab-empty { display:block; text-align:center; padding:22px 0; }

/* --- Selección en el resumen --- */
.sum-nt { display:flex; flex-direction:column; gap:8px; }
.sum-nt.wide { width:100%; }
.nt-head { display:flex; align-items:center; gap:9px; min-width:0; }
.nt-flag { width:42px; height:30px; object-fit:cover; border-radius:6px; flex-shrink:0;
           box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.nt-head h3 { font-size:.95rem; font-weight:900; letter-spacing:-.01em; margin:0;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-stats { display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
              background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.07);
              border-radius:9px; padding:4px 0; }
.mini-stats > div { display:flex; flex-direction:column; align-items:center;
                    border-left:1px solid rgba(255,255,255,.07); min-width:0; }
.mini-stats > div:first-child { border-left:none; }
.mini-stats span { font-size:.46rem; font-weight:800; letter-spacing:.08em;
                   text-transform:uppercase; color:var(--fg-mute); }
.mini-stats b { font-size:.82rem; font-weight:900; font-variant-numeric:tabular-nums; }
.sum-medals { justify-content:center; }

.tourney-list { display:flex; flex-direction:column; gap:6px; margin-top:9px;
                max-height:186px; overflow-y:auto; padding-right:3px; }
.tourney-list::-webkit-scrollbar { width:5px; }
.tourney-list::-webkit-scrollbar-thumb { background:hsl(240 5% 26%); border-radius:5px; }
.tourney-row { display:flex; align-items:center; gap:10px;
               background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06);
               border-radius:11px; padding:7px 10px;
               animation:riseIn .45s cubic-bezier(.22,1,.36,1) both; }
.tourney-row.has-gold { border-color:rgba(255,196,60,.3);
                        background:linear-gradient(100deg, rgba(255,196,60,.10), rgba(0,0,0,.22) 60%); }
.tourney-img { width:26px; height:30px; object-fit:contain; flex-shrink:0;
               filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.tourney-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tourney-name { font-size:.74rem; font-weight:800;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tourney-sub { font-size:.55rem; color:var(--fg-mute); font-weight:600; }
.tourney-medals { display:flex; gap:5px; align-items:center; flex-shrink:0; }
.tm { display:inline-flex; align-items:center; font-size:.95rem; }
.tm i { font-size:.52rem; font-weight:900; font-style:normal; margin-left:1px;
        align-self:flex-end; margin-bottom:2px; }
.tm.oro i { color:#ffd75e; }
.tm.plata i { color:#d6dbe4; }
.tm.bronce i { color:#d89a62; }
.tm.none { color:var(--fg-mute); font-size:.7rem; font-weight:800; }

/* --- Clubes --- */
.sum-clubs-grid { flex:1; display:grid; gap:9px;
                  grid-template-columns:repeat(auto-fill, minmax(122px,1fr)); align-content:start; }
.club-card { position:relative; overflow:hidden; border-radius:14px;
             background:var(--surface); border:1px solid var(--line);
             transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s; }
.club-card:hover { transform:translateY(-3px); border-color:hsl(240 5% 30%); }
.club-glow { position:absolute; inset:0; pointer-events:none;
             background:linear-gradient(150deg, color-mix(in srgb, var(--tc) 26%, transparent), transparent 62%); }
.club-card-in { position:relative; z-index:1; padding:10px 8px;
                display:flex; flex-direction:column; align-items:center; gap:6px; }
.club-card-in .crest-slot { width:58px; height:58px; }
.club-card h3 { font-size:.74rem; font-weight:900; text-align:center; line-height:1.1;
                width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; }
.club-card .mini-stats { width:100%; }
.club-trophies { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; min-height:14px; }
.club-trophy { display:inline-flex; align-items:center; gap:1px;
               animation:trophyIn .5s cubic-bezier(.22,1,.36,1) both; }
.club-trophy img { width:22px; height:24px; object-fit:contain;
                   filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.club-trophy i { font-size:.5rem; font-weight:900; font-style:normal; color:#ffd75e;
                 align-self:flex-end; margin-bottom:2px; }

/* --- Acciones --- */
.sum-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding-top:2px; }
.act-btn { display:inline-flex; align-items:center; gap:6px;
           background:var(--surface); border:1px solid var(--line);
           border-radius:999px; padding:9px 16px; cursor:pointer;
           color:var(--fg); font-family:inherit; font-size:.74rem; font-weight:800;
           transition:transform .2s, border-color .2s, background .2s; }
.act-btn:hover { transform:translateY(-2px); border-color:hsl(240 5% 34%); }
.act-btn:active { transform:scale(.96); }
.act-primary { background:var(--fg); color:#0a0a0c; border-color:transparent; }
.act-msg { text-align:center; font-size:.66rem; font-weight:700; color:var(--accent);
           opacity:0; transition:opacity .25s; min-height:14px; }
.act-msg.on { opacity:1; }

/* =========================================================
   TEXTO PARA BUSCADORES
   ========================================================= */
.seo-content { max-width:760px; margin:34px auto 0; padding:0 4px;
               color:var(--fg-dim); font-size:.88rem; line-height:1.65; }
.seo-content h2 { color:var(--fg); font-size:1.15rem; font-weight:900;
                  letter-spacing:-.02em; margin:26px 0 8px; }
.seo-content h2:first-child { margin-top:0; }
.seo-content h3 { color:var(--fg); font-size:.92rem; font-weight:800; margin:18px 0 5px; }
.seo-content p { margin:0 0 12px; }
.seo-content strong { color:var(--fg); font-weight:700; }
.seo-content a { color:var(--accent); text-decoration:none;
                 border-bottom:1px solid rgba(0,242,255,.3); }
.seo-content a:hover { border-bottom-color:var(--accent); }

.legal-note { margin-top:11px; text-align:center; font-size:.6rem;
              line-height:1.4; color:hsl(240 5% 36%); }

/* =========================================================
   RESPONSIVE · un solo bloque por tamaño
   ========================================================= */

/* ---------- TABLET ---------- */
@media (max-width: 980px) {
    .career-grid { grid-template-columns:minmax(0,290px) minmax(0,1fr); gap:9px; }
    .history-head, .history-row-inner {
        grid-template-columns:26px minmax(0,1fr) 27px 30px 30px 30px; gap:4px;
    }
    .creator3 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
    .creator3 .c-col:last-child { grid-column:1 / -1; }
    .rink { aspect-ratio:300/300; }
}

/* ---------- MÓVIL ---------- */
@media (max-width: 700px) {
    .sim-page { padding:8px 8px calc(20px + env(safe-area-inset-bottom)); }
    .sim-page { padding-left:max(8px, env(safe-area-inset-left));
                padding-right:max(8px, env(safe-area-inset-right)); }

    /* El contenedor deja de tener altura fija: crece con el contenido
       y se desplaza la página, que es lo natural al tocar. */
    .sim-shell { height:auto; min-height:0; max-height:none; }
    .sim-view { position:relative; inset:auto; padding:10px; }
    .sim-view:not(.is-active) { display:none; }
    .setup-body { overflow:visible; justify-content:flex-start; padding:4px 2px; }

    /* ---- Paso 1 ----
       La tarjeta tiene seis hermanos sueltos (icono, etiqueta, nombre,
       descripción, puntos y duración). En fila se apelotonaban unos
       sobre otros, así que en móvil pasa a rejilla con sitio propio
       para cada cosa: icono a la izquierda, texto en el centro y
       duración a la derecha. */
    .mode-grid { grid-template-columns:1fr; gap:9px; max-width:100%; }

    .mode-card {
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:
            "icon name time"
            "icon desc time"
            "icon cad  time";
        align-items:center;
        column-gap:13px; row-gap:2px;
        padding:12px 14px; min-height:72px; text-align:left;
    }
    .mode-top  { grid-area:icon; display:flex; flex-direction:column;
                 align-items:center; gap:5px; flex-shrink:0; }
    .mode-name { grid-area:name; font-size:1rem; line-height:1.1; }
    .mode-desc { grid-area:desc; font-size:.72rem; line-height:1.25;
                 overflow:hidden; text-overflow:ellipsis; }
    .cadence   { grid-area:cad; margin:2px 0 0; }
    .mode-time { grid-area:time; justify-self:end; white-space:nowrap;
                 font-size:.52rem; padding:4px 9px; }
    .mode-meta { display:none; }          /* el detalle largo sobra aquí */

    .mode-icon { width:38px; height:38px; font-size:1.2rem; }
    .mode-tag  { font-size:.44rem; padding:2px 7px; letter-spacing:.06em; }
    .mode-badge { top:6px; right:-36px; padding:2px 36px; font-size:.44rem; }

    /* La cinta de "Recommended" tapaba la duración */
    .is-reco .mode-time { margin-top:14px; }
    .setup-title { font-size:1.4rem; }
    .setup-sub { font-size:.8rem; }
    .hero-mark { width:52px; height:52px; }
    .hero-foot { display:none; }

    /* ---- Paso 2: una columna ---- */
    .creator3 { grid-template-columns:1fr; gap:9px; }
    .creator3 .c-col:last-child { grid-column:auto; }

    /* La camiseta tenía height:100% dentro de una caja sin altura,
       así que medía 0 y no se veía. Aquí va con altura propia. */
    .jersey-box { padding:6px 0 10px; }
    .jersey-svg { max-width:205px; }      /* protagonista en móvil */

    .nation-list { max-height:210px; min-height:0; }
    .rink { aspect-ratio:300/340; }

    /* iOS hace zoom al enfocar si la fuente baja de 16px */
    .inp { font-size:16px; padding:12px 13px 12px 30px; }
    #numberInput { font-size:16px; padding-left:24px; }
    #lastNameInput { padding-right:48px; }
    .seg-btn { padding:11px 4px; font-size:.85rem; }
    .nat { padding:9px 10px; }
    .nat-name { font-size:.82rem; }
    .rink-pos { width:62px; height:48px; }
    .rink-pos b { font-size:.9rem; }
    .rink-pos span { font-size:.48rem; }

    /* ---- Carrera: una columna ---- */
    .career-grid { grid-template-columns:1fr; grid-auto-rows:min-content; gap:9px; }
    .col-left, .col-right { min-height:0; }
    .col-right { padding:9px 7px; }

    .ovr-badge { width:58px; height:58px; }
    .ovr-value { font-size:1.6rem; }
    .panel-name { font-size:1.05rem; }
    .tot-v { font-size:.88rem; }
    .tot-k { font-size:.46rem; letter-spacing:.06em; }

    .history-rows { max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .h-row { flex:0 0 34px; min-height:34px; }
    .history-head, .history-row-inner {
        grid-template-columns:26px minmax(0,1fr) 28px 30px 30px 30px; gap:4px;
    }
    .h-club > span { font-size:.76rem; }

    /* Decisiones: filas en vez de columnas, más fáciles de leer y pulsar */
    .dock { min-height:0; padding:11px; }
    .dock-options, .dock-options.two { grid-template-columns:1fr; gap:7px; }
    .opt { flex-direction:row; align-items:center; justify-content:flex-start;
           text-align:left; gap:10px; padding:11px 12px; min-height:56px; }
    .opt .crest-slot.lg { width:46px; height:46px; flex-shrink:0; }
    .opt-kicker { display:none; }
    .opt-name { flex:1; font-size:.85rem; }
    .opt-league { justify-content:flex-start; font-size:.6rem; }
    .opt-effect, .opt-odds { width:auto; flex-shrink:0; margin-left:auto; max-width:44%; }

    .wheel-stage { width:86px; height:86px; }
    .net-svg { max-height:none; }
    .net-stage { min-height:132px; }
    .shot-btn { padding:14px 8px; font-size:.86rem; min-height:50px; }

    .nt-strip { grid-template-columns:auto minmax(0,1fr); gap:8px; }
    .nts-medals { grid-column:1 / -1; justify-content:center; }
    .nts-stats { gap:11px; }

    /* ---- Resumen ---- */
    .summary-body { overflow:visible; }
    .sum-hero { gap:11px; padding:12px; }
    .hero-badge { width:62px; height:62px; }
    .hero-badge .ovr-value { font-size:1.7rem; }
    .sp-name { font-size:1.35rem; }
    .stat-big b { font-size:1.5rem; }
    .stat-big { padding:11px 4px; }
    .cab-grid { grid-template-columns:repeat(auto-fill, minmax(70px,1fr)); gap:7px; }
    .trophy-tile img { width:32px; height:38px; }
    .tt-name { font-size:.46rem; }
    .tourney-list { max-height:none; }
    .tourney-name { font-size:.68rem; }
    .tourney-img { width:22px; height:26px; }
    .sum-clubs-grid { grid-template-columns:repeat(auto-fill, minmax(98px,1fr)); gap:7px; }
    .club-card-in { padding:9px 6px; gap:5px; }
    .club-card-in .crest-slot { width:46px; height:46px; }
    .club-card h3 { font-size:.66rem; }
    .sum-actions { gap:7px; }
    .act-btn { flex:1 1 46%; justify-content:center; padding:13px 10px;
               font-size:.76rem; min-height:48px; }
    .act-primary { flex-basis:100%; }

    .seo-content { margin-top:24px; font-size:.85rem; }
    .seo-content h2 { font-size:1.05rem; margin:20px 0 7px; }
}

/* ---------- MÓVIL PEQUEÑO ---------- */
@media (max-width: 380px) {
    .sim-view { padding:8px; }
    .history-head, .history-row-inner {
        grid-template-columns:23px minmax(0,1fr) 26px 27px 27px 27px; gap:3px;
    }
    .h-club > span { font-size:.7rem; }
    .h-stat { font-size:.63rem; }
    .panel-name { font-size:.95rem; }
    .chip { font-size:.5rem; padding:2px 6px; }
    .setup-title { font-size:1.25rem; }
    .jersey-svg { max-width:170px; }
    .rink-pos { width:56px; height:44px; }
    .opt-effect { display:none; }
    .sum-clubs-grid { grid-template-columns:repeat(2,1fr); }
    .cab-grid { grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); }
}

/* ---------- MÓVIL EN HORIZONTAL ---------- */
@media (max-width: 900px) and (orientation: landscape) {
    .career-grid { grid-template-columns:minmax(0,250px) minmax(0,1fr); }
    .history-rows { max-height:none; }
    .creator3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .jersey-svg { max-width:150px; }
    .rink { aspect-ratio:300/300; }
}

/* ---------- SIN RATÓN ---------- */
@media (hover: none) {
    /* Los efectos de hover se quedan "pegados" tras tocar en móvil */
    .mode-card:hover, .opt:hover, .act-btn:hover, .shot-btn:hover,
    .club-card:hover, .nat:hover, .seg-btn:hover, .trophy-tile:hover {
        transform:none; box-shadow:none;
    }
    /* La pista es aparte: su posicionado depende del translate, y
       quitárselo la descoloca media caja. */
    .rink-pos:hover { transform:translate(-50%,-50%); box-shadow:none; }
    .rink-pos.sel:hover { transform:translate(-50%,-50%); }

    .mode-card:active, .opt:active, .act-btn:active,
    .shot-btn:active, .nat:active { transform:scale(.97); }
    .rink-pos:active { transform:translate(-50%,-50%) scale(.96); }
    .sim-page button { -webkit-tap-highlight-color:transparent; }
}

/* ---------- MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce) {
    .sim-page *, .sim-page *::before, .sim-page *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* =========================================================
   VENTANA CON LA IMAGEN DE RESUMEN
   En móvil la descarga directa la bloquean bastantes
   navegadores. Mostrando la imagen, el usuario la ve y
   puede guardarla con un toque largo, que siempre funciona.
   ========================================================= */
.card-modal {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.card-modal.open { opacity: 1; visibility: visible; }

.cm-backdrop { position: absolute; inset: 0;
               background: rgba(0,0,0,.82);
               backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

.cm-box {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    max-height: 100%;
    display: flex; flex-direction: column; gap: 10px;
    background: hsl(240 10% 8%);
    border: 1px solid hsl(240 10% 16%);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.7);
    transform: translateY(14px) scale(.98);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    overflow-y: auto;
}
.card-modal.open .cm-box { transform: none; }

.cm-close {
    position: absolute; top: 8px; right: 10px; z-index: 2;
    width: 34px; height: 34px;
    background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%; color: #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s, transform .2s;
}
.cm-close:hover { background: rgba(255,255,255,.12); transform: rotate(90deg); }

.cm-img-wrap {
    min-height: 180px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.3); border-radius: 12px; overflow: hidden;
}
.cm-img-wrap img {
    width: 100%; height: auto; display: block; border-radius: 12px;
    animation: fadeIn .35s both;
    /* El toque largo debe ofrecer "Guardar imagen" */
    -webkit-touch-callout: default;
    user-select: auto; -webkit-user-select: auto;
}
.cm-error { color: var(--bad); font-size: .85rem; font-weight: 700; padding: 24px; text-align: center; }

.cm-hint { margin: 0; text-align: center; font-size: .66rem;
           font-weight: 600; color: hsl(240 5% 45%); }

.cm-actions { display: flex; gap: 8px; }
.cm-actions .act-btn { flex: 1; justify-content: center; min-height: 46px;
                       text-decoration: none; }

.act-see { background: color-mix(in srgb, var(--accent) 14%, var(--surface));
           border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

@media (max-width: 700px) {
    .cm-box { max-width: 100%; padding: 12px; }
    .cm-hint { font-size: .62rem; }
    .cm-actions .act-btn { min-height: 50px; font-size: .8rem; }
}

/* Mensaje si el juego no arranca: mejor decirlo que dejar
   la pantalla en blanco sin ninguna explicación. */
.boot-error {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px; padding: 30px 20px; text-align: center;
    color: var(--fg-dim); font-size: .9rem; line-height: 1.6;
}
.boot-error strong { color: var(--fg); font-size: 1rem; }