/* ═══════════════════════════════════════════════════════════════════════
   Cabezones — pantallas y ventanas de las funciones del género: bienvenida
   del tutorial, marcas guiadas, cuenta en otro dispositivo, camino de copas
   y temporadas, clasificación por temporada, ficha de jugador, historial,
   logros y revancha. Usa los tokens y componentes de main.css y ui.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bienvenida del tutorial ── */
.tut-intro {
  flex: 1; min-height: 0; display: grid; place-items: center; overflow-y: auto;
  padding: calc(var(--gutter) + .5rem) calc(var(--gutter) + var(--safe-r)) var(--gutter) calc(var(--gutter) + var(--safe-l));
}
.tut-card {
  width: min(100%, 980px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.2rem;
  align-items: center; padding: 1.4rem 1.6rem; animation: pop-in .5s cubic-bezier(.2, 1.35, .4, 1) both;
}
.tut-hero {
  position: relative; aspect-ratio: 1; border-radius: 24px; overflow: hidden; border: 4px solid var(--ink);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--kit) 70%, #fff) 0 18%, var(--kit) 55%, color-mix(in srgb, var(--kit) 55%, #000) 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 0 6px 0 rgba(10,8,7,.45);
}
.tut-canvas { width: 100%; height: 100%; }
.tut-body { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.tut-title { margin: 0; font-size: 2.5rem; line-height: 1.1; color: var(--title); --sc: var(--title-ink); --sw: .2em; --sd: .09em; }
.tut-lead { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text-dim); line-height: 1.45; }
.tut-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.tut-steps li {
  display: flex; align-items: center; gap: .45rem; padding: .35rem .6rem; border-radius: 12px;
  background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); font-weight: 800; font-size: .95rem; white-space: nowrap;
}
.tut-steps li.is-done { box-shadow: inset 0 0 0 2px rgba(195,251,14,.65); color: #d6ff7a; }
.tut-step-ico { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; }
.tut-step-ico .ico { width: 100%; height: 100%; }
.tut-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .3rem; }
.tut-actions .btn-xl { font-size: 2rem; }
.tut-have {
  align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; text-align: left;
  font-weight: 700; font-size: .98rem; color: var(--text-dim);
}
.tut-have b { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 500px) and (orientation: landscape) {
  .tut-card { padding: .9rem 1.1rem; gap: .9rem; }
  .tut-title { font-size: 1.6rem; }
  .tut-lead { font-size: .9rem; }
  .tut-steps li { font-size: .82rem; padding: .25rem .45rem; }
  .tut-actions .btn-xl { font-size: 1.5rem; }
}
@media (orientation: portrait) {
  .tut-card { grid-template-columns: 1fr; text-align: center; }
  .tut-hero { width: min(52vw, 260px); justify-self: center; }
  .tut-actions { justify-content: center; }
  .tut-have { align-self: center; text-align: center; }
  .tut-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tut-done .confirm-text { font-size: 1.12rem; }

/* ── Marcas guiadas de la primera sesión ── */
#coach-layer { position: fixed; inset: 0; z-index: 75; pointer-events: none; }
.cm-ring {
  position: fixed; border-radius: 22px; border: 4px solid #ffe24a;
  box-shadow: 0 0 0 4px rgba(18,10,5,.55), 0 0 24px 6px rgba(255,210,58,.8);
  animation: cm-ring 1s ease-in-out infinite alternate;
}
@keyframes cm-ring { to { box-shadow: 0 0 0 4px rgba(18,10,5,.55), 0 0 36px 12px rgba(255,210,58,.95); transform: scale(1.03); } }
.cm-bubble {
  --ax: 50%; position: fixed; display: flex; align-items: center; gap: .5rem; max-width: min(80vw, 340px);
  padding: .45rem .5rem .5rem .95rem; border-radius: 16px; border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, #fff6c4 0 50%, #ffe04a 50% 100%); color: var(--ink);
  font: 400 1.05rem/1.2 var(--font-title); letter-spacing: .01em;
  box-shadow: 0 5px 0 rgba(10,8,7,.55), 0 10px 20px rgba(0,0,0,.35);
  animation: cm-in .3s cubic-bezier(.2, 1.5, .4, 1);   /* quieto: la × se toca sin perseguirla (late el anillo) */
}
@keyframes cm-in { from { transform: scale(.7); opacity: 0; } }
.cm-bubble::after {
  content: ''; position: absolute; left: var(--ax); width: 0; height: 0; margin-left: -11px; border: 11px solid transparent;
}
.cm-bubble[data-side="above"]::after { top: 100%; border-top: 13px solid var(--ink); }
.cm-bubble[data-side="below"]::after { bottom: 100%; border-bottom: 13px solid var(--ink); }
.cm-x {
  pointer-events: auto; flex: none; width: 44px; height: 44px; margin: -8px -6px -8px 0; padding: 10px;
  background: none; border: 0; border-radius: 12px; opacity: .75;
}
.cm-x .ico { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .cm-ring, .cm-bubble { animation: none; } }

/* ── Cuenta en otro dispositivo ── */
.acc-code { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.acc-code-box {
  padding: .6rem 1.2rem; border-radius: 18px; background: var(--well); border: 3px dashed rgba(255,255,255,.35);
}
.acc-code-text { font-size: clamp(1.6rem, 4.2vw, 2.6rem); letter-spacing: .08em; color: var(--title); --sc: var(--title-ink); user-select: text; -webkit-user-select: text; }
.acc-code-box.is-expired .acc-code-text { color: var(--text-mute); text-decoration: line-through; }
.acc-code-time { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 700; }
.acc-code-time .ico { width: 1.2rem; height: 1.2rem; }
.acc-code-note { margin: 0; font-size: .88rem; max-width: 30rem; }
.acc-claim { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.acc-claim-input { width: min(100%, 22rem); text-align: center; font-family: var(--font-title); font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; }
.acc-claim-warn { display: flex; gap: .45rem; align-items: flex-start; margin: 0; max-width: 30rem; font-weight: 700; font-size: .92rem; color: #ffd0cc; text-align: left; }
.acc-claim-warn .ico { width: 1.3rem; height: 1.3rem; flex: none; }
.set-account { display: flex; flex-direction: column; gap: .7rem; }
.set-account-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.set-account-row p { flex: 1 1 16rem; margin: 0; font-weight: 700; color: var(--text-dim); font-size: .95rem; }
.set-account-row .btn { flex: none; }
.backup-nudge {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,90,74,.25), rgba(255,90,74,.12)); border: 2px solid rgba(255,140,120,.6);
  font-weight: 800; text-align: left; width: 100%; min-height: 44px;
}
.backup-nudge .ico { width: 1.5rem; height: 1.5rem; flex: none; }
.backup-nudge span { flex: 1; }

/* ── Camino de copas ── */
.rd-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rd-season {
  display: flex; align-items: center; justify-content: center; gap: .4rem 1.1rem; flex-wrap: wrap;
  margin: 0 var(--gutter); padding: .35rem .9rem; border-radius: 14px; background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); font-weight: 800;
}
.rd-season-name { font-size: 1.2rem; color: var(--title); --sc: var(--title-ink); }
.rd-season-left { display: inline-flex; align-items: center; gap: .3rem; color: var(--cyan); }
.rd-season-left .ico { width: 1.1rem; height: 1.1rem; }
.rd-season-best .amount { font-size: 1.05rem; }
.rd-season-tip { flex-basis: 100%; text-align: center; font-size: max(11px, .78rem); font-weight: 700; }
.rd-track {
  list-style: none; margin: 0; padding: 2rem calc(var(--gutter) + 1rem) 1rem; flex: 1; min-height: 0;
  display: flex; align-items: center; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
}
.rd-item { position: relative; flex: none; display: flex; align-items: center; padding: 0 1.1rem; scroll-snap-align: center; }
/* Línea del camino: se rellena hasta el récord de la temporada (--fill del tramo que sale de cada nodo). */
.rd-item::before, .rd-item::after {
  content: ''; position: absolute; left: 50%; right: -50%; top: 50%; height: .55rem; margin-top: -.275rem; z-index: -1; border-radius: 99px;
}
.rd-item::before { background: rgba(10,8,7,.75); box-shadow: inset 0 2px 3px rgba(0,0,0,.5); }
.rd-item::after { right: auto; width: calc(100% * var(--fill, 0)); background: linear-gradient(180deg, #ffe45a 0 50%, #ffab0a 50% 100%); box-shadow: 0 0 10px rgba(255,210,58,.7); }
.rd-item:last-child::before, .rd-item:last-child::after { display: none; }
.rd-league {
  position: relative; width: 12.5rem; display: flex; flex-direction: column; border-radius: 18px; border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 3px 0 var(--ink), 0 12px 20px rgba(0,0,0,.3);
}
.rd-league.is-locked { filter: saturate(.45) brightness(.8); }
.rd-league.is-here { border-color: var(--hk-select); box-shadow: 0 0 0 1.5px var(--ink), 0 0 .9rem rgba(45, 227, 245, .75), inset 0 0 0 2px rgba(45, 227, 245, .6), 0 3px 0 var(--ink); }
.rd-mile {
  width: 7.2rem; min-height: 9.2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .35rem;
  padding: .5rem .4rem .55rem; border-radius: 16px; border: 2.5px solid var(--ink); text-align: center;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), 0 3px 0 var(--ink);
}
.rd-mile.is-locked { filter: saturate(.5) brightness(.75); }
.rd-mile.is-claimed { opacity: .75; }
.rd-mile.is-claimable {
  background: linear-gradient(180deg, #4fa51a, #2c6a0e); box-shadow: inset 0 0 0 2px rgba(195,251,14,.6), 0 3px 0 var(--ink), 0 0 22px rgba(170,255,60,.6);
  animation: rd-glow 1.1s ease-in-out infinite alternate;   /* brilla sin moverse: el botón se toca fácil */
}
@keyframes rd-glow { to { box-shadow: inset 0 0 0 2px rgba(195,251,14,.9), 0 3px 0 var(--ink), 0 0 34px 6px rgba(170,255,60,.85); } }
.rd-cups { font-size: 1.05rem; color: #fff; }
.rd-cups .ico { width: 1.1em; height: 1.1em; }
.rd-reward { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; }
.rwd { display: inline-flex; align-items: center; gap: .2rem; }
.rwd-pack .pack-art { width: 2.6rem; height: auto; }
.rwd-card { position: relative; width: 3.3rem; height: 3.3rem; border-radius: 12px; overflow: hidden; background: rgba(172, 206, 220, .22); border: 2px solid var(--ink); }
.rwd-card canvas { width: 100%; height: 100%; }
.rwd-card b { position: absolute; right: 2px; bottom: 0; font-size: .95rem; }
.rwd-cur { font-size: 1.15rem; }
.rwd-cur .ico { width: 1.5em; height: 1.5em; }
.rd-claim { width: 100%; padding-inline: .3rem; font-size: .9rem; }
.rd-done, .rd-lock { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; }
.rd-done .ico, .rd-lock .ico { width: 100%; height: 100%; }
.rd-wait { font-size: max(11px, .74rem); font-weight: 800; line-height: 1.15; }
@media (max-height: 500px) and (orientation: landscape) {
  .rd-track { padding-top: 1.6rem; padding-bottom: .5rem; }
  .rd-league { width: 10.5rem; }
  .rd-league .lg-node-meta { display: none; }
  .rd-mile { width: 6.3rem; min-height: 7.6rem; }
  .rd-season-tip { display: none; }
}
@media (orientation: portrait) {
  .rd-track { flex-direction: column; align-items: center; overflow-x: hidden; overflow-y: auto; padding: 1.8rem var(--gutter) 1rem; scroll-snap-type: y proximity; }
  .rd-item { padding: .7rem 0; }
  .rd-item::before, .rd-item::after { left: 50%; right: auto; top: 50%; bottom: -50%; width: .55rem; height: auto; margin: 0 0 0 -.275rem; }
  .rd-item::after { height: calc(100% * var(--fill, 0)); bottom: auto; }
  .rd-mile { width: min(78vw, 17rem); min-height: 0; flex-direction: row; }
  .rd-league { width: min(86vw, 20rem); }
}

/* Insignia con los premios del camino por recoger (panel de liga del inicio y copas de la barra). */
.road-dot { position: absolute; top: -8px; right: -8px; z-index: 3; }
.res-cups .road-dot { top: -10px; right: -12px; }

/* ── Fin de temporada ── */
.season-end { gap: .8rem; }
.season-stadium { width: min(100%, 22rem); aspect-ratio: 16 / 9; border-radius: 16px; border: 3px solid var(--ink); }
.season-reward { display: flex; gap: .6rem; align-items: center; justify-content: center; padding: .5rem 1rem; border-radius: 16px; background: var(--well); }
.season-reward .rwd-pack .pack-art { width: 4.2rem; }
.season-reward .rwd-cur { font-size: 1.6rem; }
.season-note { margin: 0; font-size: .9rem; }

/* ── Clasificación: pestañas y filas que abren la ficha ── */
.lb-head { display: flex; align-items: center; justify-content: center; gap: .6rem 1.2rem; flex-wrap: wrap; }
.lb-tabs .seg-btn small { display: block; font: 700 max(11px, .72rem)/1 var(--font-body); opacity: .85; margin-top: 2px; }
.lb-row[data-ref] { cursor: pointer; }
.lb-row[data-ref]:hover { filter: brightness(1.12); }
.lb-row[data-ref]:active { transform: translateY(2px); }

/* ── Ficha de jugador ── */
.pc-loading { padding: 2rem; text-align: center; font-weight: 700; }
.pc { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1.1rem; align-items: start; }
.pc-left { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.pc-portrait {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; border: 2.5px solid var(--ink);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--kit) 70%, #fff) 0 18%, var(--kit) 55%, color-mix(in srgb, var(--kit) 55%, #000) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), 0 .3rem .6rem rgba(0,0,0,.35);
}
.pc-canvas { width: 100%; height: 100%; }
.pc-level { position: absolute; left: -.6rem; top: -.6rem; }
.pc-char { font-weight: 800; }
.pc-right { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.pc-id { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; }
.pc-nick { margin: 0; font-size: 2rem; line-height: 1.4; overflow-wrap: anywhere; color: var(--title); --sc: var(--title-ink); --sw: .2em; }
.pc-flag { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--text-dim); }
.pc-flag canvas { width: 2rem; height: 1.35rem; }
.pc-league { display: grid; grid-template-columns: 5.5rem 1fr auto; grid-template-rows: auto auto; align-items: center; gap: .1rem .7rem; padding: .45rem .6rem; border-radius: 16px; }
.pc-league > div { display: flex; flex-direction: column; min-width: 0; }
.pc-stadium { grid-row: span 2; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; border: 2px solid var(--ink); }
.pc-cups { font-size: 1.3rem; justify-self: end; }
.pc-best { grid-column: 3; justify-self: end; font-size: .85rem; font-weight: 700; }
.pc-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.pc-tile { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem .2rem; border-radius: 12px; background: var(--well); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); text-align: center; }
.pc-tile-ico { width: 1.5rem; height: 1.5rem; }
.pc-tile-ico .ico { width: 100%; height: 100%; }
.pc-tile b { font-size: 1.2rem; }
.pc-tile small { font-size: max(11px, .72rem); font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.pc-tops { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; }
.pc-top-list { display: flex; gap: .5rem; }
.pc-top {
  position: relative; width: 4.2rem; height: 4.2rem; border-radius: 14px; overflow: hidden; border: 2.5px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kit) 65%, #fff) 0 20%, var(--kit) 70%);
}
.pc-top canvas { width: 100%; height: 100%; }
.pc-top b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: .8rem; background: rgba(10,8,7,.7); }
@media (orientation: portrait), (max-width: 620px) {
  .pc { grid-template-columns: 1fr; }
  .pc-left { flex-direction: row; }
  .pc-portrait { width: 7rem; }
  .pc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .pc-portrait { width: min(100%, 12rem); }
  .pc-nick { font-size: 1.35rem; }
  .pc-tile b { font-size: 1rem; }
  .pc-top { width: 3.3rem; height: 3.3rem; }
}

/* ── Perfil con pestañas ── */
.prof-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.prof-tabs-row { display: flex; justify-content: center; padding: .55rem var(--gutter) 0; }
.prof-tabs .seg-btn { position: relative; min-width: 6.5rem; }
.prof-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.prof-pane > .prof { flex: 1; }

/* Historial */
.hist { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .5rem var(--gutter) .6rem; gap: .4rem; }
.hist-lead, .ach-lead { margin: 0; text-align: center; font-weight: 800; font-size: .92rem; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.55); }
.hist-lead b, .ach-lead b { color: var(--accent); }
.hist-empty { margin: 2rem var(--gutter); text-align: center; font-weight: 700; }
.hist-list { flex: 1; min-height: 0; margin: 0; padding: .2rem .1rem .5rem; list-style: none; display: flex; flex-direction: column; gap: .45rem; overflow-y: auto; }
.hist-row {
  display: grid; grid-template-columns: 2.6rem 4.4rem minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: .6rem;
  padding: .35rem .7rem .35rem .4rem; border-radius: 16px; border: 1.5px solid var(--ink); cursor: pointer;
  background: rgba(24, 20, 19, .82); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 .2rem .5rem rgba(0,0,0,.3);
}
.hist-row:hover { filter: brightness(1.1); }
.hist-row:active { transform: translateY(2px); }
.hist-res { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; border: 2.5px solid var(--ink); font-size: 1.35rem; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6); }
.hist-row.is-win .hist-res { background: linear-gradient(180deg, #c3fb0e 0 50%, #63dc05 50% 100%); }
.hist-row.is-loss .hist-res { background: linear-gradient(180deg, #ff7666 0 50%, #ef3b2f 50% 100%); }
.hist-row.is-draw .hist-res { background: linear-gradient(180deg, #52c4ff 0 50%, #1a8df2 50% 100%); }
.hist-score { font-size: 1.5rem; text-align: center; white-space: nowrap; }
.hist-score i { font-style: normal; margin: 0 .2rem; opacity: .7; }
.hist-mode { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hist-mode b { font-size: .95rem; }
.hist-mode small { font-size: max(11px, .76rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-rival { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.hist-rival .lb-avatar { flex: none; }
.hist-rival-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hist-rival-who small { font-size: max(11px, .74rem); font-weight: 700; }
.hist-rival .flag-canvas { width: 1.9rem; height: 1.3rem; flex: none; }
.hist-gain { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; font-size: 1rem; }
.hist-gain .neg { color: #ffb3aa; }
@media (orientation: portrait) {
  .hist-row { grid-template-columns: 2.4rem 3.8rem minmax(0, 1fr) auto; }
  .hist-mode { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hist-row { padding-block: .2rem; }
  .hist-score { font-size: 1.25rem; }
}

/* Logros */
.ach-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4rem; padding: .5rem var(--gutter) .6rem; }
.ach-grid { flex: 1; min-height: 0; margin: 0; padding: .3rem .1rem .6rem; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .55rem; overflow-y: auto; align-content: start; }
.ach-card { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 18px; }
.ach-card.is-claimable { box-shadow: inset 0 0 0 2px #c3fb0e, 0 .3rem .7rem rgba(0,0,0,.3), 0 0 22px rgba(170,255,60,.5); }
.ach-card.is-done { filter: saturate(.85); }
.ach-medal { position: relative; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--well); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.ach-medal .ico { width: 78%; height: 78%; }
.ach-medal.m-none .ico { filter: grayscale(1) brightness(.6); }
.ach-medal.m-bronce { background: radial-gradient(circle at 35% 30%, #f4b07a, #a45a22); }
.ach-medal.m-plata { background: radial-gradient(circle at 35% 30%, #ffffff, #9aa7bb); }
.ach-medal.m-oro { background: radial-gradient(circle at 35% 30%, #fff3a0, #e0a000); box-shadow: 0 0 14px rgba(255,210,58,.7); }
.ach-medal i { position: absolute; right: -.45rem; bottom: -.3rem; font-style: normal; font-size: .72rem; padding: 0 .3rem; border-radius: 8px; background: var(--ink); color: #fff; }
.ach-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ach-name { font-size: 1.15rem; line-height: 1.1; }
.ach-desc { font-size: max(11px, .8rem); font-weight: 700; }
.ach-body .bar { height: 1.05rem; }
.ach-side { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 5.6rem; text-align: center; }
.ach-reward { display: flex; gap: .3rem; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .9rem; }
.ach-reward .ico { width: 1.2em; height: 1.2em; }
.ach-emote { padding: 0 .35rem; border-radius: 8px; background: #fff; color: var(--ink); font-family: var(--font-title); font-size: .85rem; }
.ach-next { font-size: .8rem; font-weight: 800; }
.ach-complete { display: inline-flex; align-items: center; gap: .25rem; color: #c3fb0e; font-size: .95rem; }
.ach-complete .ico { width: 1.2rem; height: 1.2rem; }
@media (max-height: 500px) and (orientation: landscape) {
  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .ach-card { padding: .35rem .5rem; }
  .ach-medal { width: 2.8rem; height: 2.8rem; }
}

/* Ficha: récord con un personaje */
.cd-record { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .3rem; font-weight: 700; font-size: .92rem; color: var(--text-dim); }
.cd-record b { color: #fff; }
.cd-record .ico { width: 1.2rem; height: 1.2rem; flex: none; }

/* ── Revancha y ficha del rival en el resultado ── */
.res-rematch { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; animation: rise-in .4s both; }
.res-rematch-state { font-weight: 800; font-size: 1rem; }
.res-rematch-state b { color: var(--gold-2); }
.res-rematch .btn[disabled] { filter: saturate(.4); opacity: .8; }
/* Te la han pedido: el botón brilla (sin moverse, para tocarlo sin perseguirlo). */
.res-rematch .btn.is-invited { animation: rm-glow .8s ease-in-out infinite alternate; }
@keyframes rm-glow { to { box-shadow: inset 0 -5px 0 var(--lip, rgba(0,0,0,.3)), 0 5px 0 var(--co, #120a05), 0 0 26px 8px rgba(255,170,60,.85); } }
.res-rival[data-ref] { cursor: pointer; }
.res-ficha {
  position: absolute; right: -.2rem; bottom: -.2rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(ellipse 72% 58% at 50% 32%, #52b8ff 0%, #52b8ff 42%, #1f8ff5 100%); border: 2px solid #082a6b; box-shadow: inset 0 -3px 0 #0f5fcc, 0 2px 0 #082a6b; color: #072765;
}
.res-ficha .ico { width: 64%; height: 64%; }

/* ── Sala: copiar y compartir el enlace ── */
.room-code-acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }