/* =====================================================================
   PANTALLAS DE MENÚ · interfaz v3: inicio, colección, ficha, modos, misiones, logros, perfil,
   amigos, clanes, ranking, ajustes, pausa, sala con amigos y pase de temporada
   ===================================================================== */

/* ------------------------------------------------------------------ cargando / buscando partida */
#loading { flex-direction: column; gap: 0.7rem; text-align: center; }
#loading h1 { font-size: 2.8rem; color: #fff; }
#loading h1::before { /* Pokéball que gira mientras carga */
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--pkb);
  box-shadow: 0 0 0 0.18rem #1b1f33, 0 0.3rem 1rem rgba(0, 0, 0, 0.4);
  animation: ballSpin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes ballSpin { 0% { transform: rotate(0); } 60%, 100% { transform: rotate(360deg); } }
#ld-sub { margin: 0; min-height: 1.3rem; font-size: 1rem; color: var(--tx-2); }
#ld-cancel { min-width: 10rem; }
.ld-tip { margin-top: 0.8rem; padding: 0 1rem; font-size: 0.9rem; color: #cbb9ff; opacity: 0.9; }

/* ------------------------------------------------------------------ inicio (entrar) */
#welcome { background: radial-gradient(90% 80% at 50% 30%, rgba(30, 50, 120, 0.45), rgba(5, 8, 22, 0.88)); }
.wl-box { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: min(26rem, 100%); max-height: 100%; }
.wl-title {
  margin: 0;
  font-size: clamp(3.6rem, 9vw, 6.2rem);
  line-height: 0.9;
  color: var(--yel);
  letter-spacing: 0.02em;
  text-shadow: 0 0.18rem 0 #2a5bb0, 0.18rem 0 0 #2a5bb0, -0.18rem 0 0 #2a5bb0, 0 -0.18rem 0 #2a5bb0, 0 0.5rem 0 #102a64, 0 0 2rem rgba(255, 203, 5, 0.3);
}
.wl-sub { margin: 0.4rem 0 0.7rem; font-size: 1.05rem; color: #e8f0ff; text-align: center; text-shadow: 0 0.1rem 0 #000; }
.wl-panel { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; padding: 1.1rem; animation: none; }
.wl-panel > .act { width: 100%; min-height: 2.8rem; font-size: 1.35rem; }
.wl-panel small { color: var(--tx-2); font-size: 0.78rem; text-align: center; line-height: 1.35; }
.wl-or { margin: 0; text-align: center; color: var(--tx-3); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
.wl-note { margin: 0 0 0.4rem; padding: 0.55rem 0.8rem; font-size: 0.92rem; text-align: center; color: #fff3c0; border: 1px solid rgba(255, 203, 5, 0.6); border-radius: var(--r-m); background: rgba(255, 203, 5, 0.12); }
.mail-form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.mail-form small { color: var(--tx-2); font-size: 0.78rem; }
.mail-form .row { margin-top: 0.2rem; }

/* elegir nombre */
.nm-panel { display: flex; flex-direction: column; gap: 0.6rem; width: min(28rem, 100%); }
.nm-panel .sub { margin: 0; }
#nm-input { font-size: 1.3rem; padding: 0.55rem 0.8rem; text-align: center; }
.nm-err { margin: 0; min-height: 1.1rem; color: #ff9a8a; text-align: center; font-size: 0.9rem; }
#nm-go { align-self: center; min-width: 14rem; }

/* ------------------------------------------------------------------ colección */
.col-note { margin: 0 0 0.7rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #e6dcff; border-radius: var(--r-m); background: rgba(154, 98, 255, 0.14); border: 1px solid rgba(154, 98, 255, 0.35); }
.col-filters { position: sticky; top: 4.15rem; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0 0 0.75rem; padding: 0.15rem 0 0.45rem; background: linear-gradient(180deg, #121a3c 80%, transparent); }
.col-filters input { flex: 1 1 10rem; min-width: 7rem; }
.col-filters select { flex: 0 1 auto; max-width: 10.5rem; }
.col-filters .px-seg { flex-wrap: nowrap; }
#col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: 0.6rem; }
#col-grid .card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.5rem 0.35rem 0.5rem;
  color: #fff;
  border: 1px solid var(--rar, var(--line-2));
  border-color: color-mix(in srgb, var(--rar, #8ccaff) 55%, transparent);
  border-radius: var(--r-m);
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.12), transparent 58%), linear-gradient(180deg, #1d2b5e, #121b3e);
  box-shadow: var(--sh-1), inset 0 -0.22rem 0 var(--rar, transparent);
  content-visibility: auto;
  contain-intrinsic-size: 7.4rem 9.6rem;
  transition: transform 0.12s, filter 0.15s;
}
#col-grid .card:hover { transform: translateY(-0.15rem); filter: brightness(1.12); }
#col-grid .card:active { transform: scale(0.97); }
#col-grid .card.sel { border-color: var(--yel); box-shadow: 0 0 0 0.14rem var(--yel), 0 0 1rem rgba(255, 203, 5, 0.35), inset 0 -0.22rem 0 var(--rar, transparent); }
#col-grid .card img.pt { width: 4.6rem; height: 4.6rem; image-rendering: pixelated; border-radius: 50%; background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.18)); }
#col-grid .card.locked { background: linear-gradient(180deg, #1a2140, #11162c); }
#col-grid .card.locked img.pt { filter: grayscale(1) brightness(0.5); }
#col-grid .nm { font-family: var(--f-disp); font-size: 1.15rem; line-height: 1.05; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#col-grid .lv { display: flex; align-items: center; gap: 0.15rem; font-family: var(--f-disp); font-size: 1rem; color: var(--yel); white-space: nowrap; }
#col-grid .lv img.cup { width: 0.9rem; height: 0.9rem; }
#col-grid .rar { font-size: 0.68rem; font-weight: 800; color: var(--rar); text-transform: uppercase; letter-spacing: 0.04em; }
#col-grid .lock { position: absolute; top: 1.9rem; left: 50%; transform: translateX(-50%); font-size: 1.6rem; filter: drop-shadow(0 0.1rem 0 #000); }
#col-grid .cost { font-family: var(--f-disp); font-size: 1.05rem; }
#col-grid .cost img { width: 1rem; height: 1rem; }
#col-grid .tdots { display: flex; gap: 0.2rem; justify-content: center; }
#col-grid .tdots i { width: 1rem; height: 0.3rem; display: block; border-radius: 999px; }
#col-grid .shiny-tag { position: absolute; top: 0.2rem; right: 0.4rem; color: #ffe066; font-size: 1.1rem; text-shadow: 0 0 0.3rem #ffb800; }
#col-grid .fav { position: absolute; top: 0.05rem; left: 0.15rem; padding: 0.2rem 0.35rem 0.4rem 0.25rem; font-size: 1.15rem; line-height: 1; color: rgba(255, 255, 255, 0.25); cursor: pointer; }
#col-grid .fav:hover { color: rgba(255, 224, 102, 0.75); }
#col-grid .fav.on { color: var(--yel); text-shadow: 0 0 0.4rem rgba(255, 210, 58, 0.6); }
#col-grid .card-mast { position: absolute; top: 0.9rem; right: 0.15rem; width: 1.9rem; height: 2.3rem; image-rendering: pixelated; filter: drop-shadow(0 0.1rem 0 rgba(0, 0, 0, 0.45)); pointer-events: none; }
#col-empty { margin: 1.2rem 0; text-align: center; }

/* ------------------------------------------------------------------ ficha de un Pokémon */
.rar-tag { position: relative; z-index: 1; flex: none; padding: 0.12rem 0.65rem; font-family: var(--f-disp); font-size: 1.05rem; color: #10183a; border-radius: 999px; }
.dt { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1rem; text-align: left; }
.dt-left { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; min-width: 0; }
#dt-hero { width: 100%; border-radius: var(--r-l); background: radial-gradient(circle at 50% 72%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.25) 70%); border: 1px solid var(--line); }
#dt-hero.locked canvas { filter: grayscale(1) brightness(0.5); }
#dt-cv { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.dt-left > small, #dt-role { font-size: 0.85rem; font-weight: 800; color: var(--yel); }
#dt-desc { margin: 0; font-size: 0.88rem; line-height: 1.4; color: var(--tx-2); }
#dt-evo { display: block; width: 100%; }
#dt-evo .evo-row { display: flex; align-items: center; gap: 0.15rem; width: 100%; }
#dt-evo .evo-st { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0.2rem 0.1rem; font: inherit; color: #fff; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-s); background: rgba(255, 255, 255, 0.05); }
#dt-evo .evo-st:hover { background: rgba(255, 255, 255, 0.1); }
#dt-evo .evo-st.sel { color: var(--yel-ink); border-color: transparent; background: linear-gradient(180deg, #ffdc4a, #f4ac00); }
#dt-evo .evo-st img { width: 2.1rem; height: 2.1rem; image-rendering: pixelated; }
#dt-evo .evo-st b { max-width: 100%; font-family: var(--f-disp); font-weight: 400; font-size: 0.95rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dt-evo .evo-st small { font-size: 0.62rem; line-height: 1.1; opacity: 0.85; white-space: nowrap; }
#dt-evo .evo-arrow { width: 0.75rem; height: 0.75rem; flex: none; background: var(--ico-arrow-r) center / contain no-repeat; image-rendering: pixelated; }
#dt-evo .evo-st.mega { border-color: rgba(255, 90, 216, 0.6); }
#dt-evo .evo-st.mega.sel { color: #fff; background: linear-gradient(180deg, #ff8ae6, #c03aa8); }
#dt-evo .evo-st.mega small { color: #ffd0f4; }
#dt-evo .evo-arrow.mega { filter: hue-rotate(260deg) saturate(1.6); }
#dt-evo .evo-note { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--tx-2); }
.evo-note.mega { color: #ffc8f2; }
.evo-branch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem; margin-bottom: 0.3rem; }
.evo-branch small { width: 100%; text-align: center; font-size: 0.72rem; color: #ffe066; }
.evo-br { padding: 0.1rem; cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: rgba(0, 0, 0, 0.25); }
.evo-br img { display: block; width: 1.65rem; height: 1.65rem; image-rendering: pixelated; }
.evo-br.sel { border-color: transparent; background: var(--yel); }
.dt-right { min-width: 0; display: flex; flex-direction: column; }
.dt-pane { min-height: 9rem; }
.dt-pane h4 { margin: 0.25rem 0 0.4rem; font-size: 1.3rem; color: #ffe066; }
#dt-level { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; font-family: var(--f-disp); font-size: 1.35rem; }
#dt-level b { font-weight: 400; white-space: nowrap; }
.lvbar { display: flex; gap: 0.18rem; flex: 1; }
.lvbar i { flex: 1; height: 0.6rem; border-radius: 999px; background: #26305a; }
.lvbar i.on { background: linear-gradient(180deg, #ffe066, #f5a815); }
#dt-stats { width: 100%; border-collapse: separate; border-spacing: 0 0.18rem; font-size: 0.92rem; margin-bottom: 0.5rem; }
#dt-stats td { padding: 0.32rem 0.6rem; vertical-align: middle; background: rgba(255, 255, 255, 0.045); }
#dt-stats td:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
#dt-stats td:last-child { text-align: right; font-family: var(--f-disp); font-size: 1.15rem; border-radius: 0 var(--r-s) var(--r-s) 0; }
#dt-stats em { font-style: normal; color: #6ff09a; font-size: 0.95rem; }
#dt-stats .sti { width: 1.15rem; height: 1.15rem; image-rendering: pixelated; vertical-align: -0.2rem; margin-right: 0.4rem; }
#dt-mastery { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; padding: 0.55rem 0.8rem; border-radius: var(--r-m); background: rgba(10, 15, 40, 0.6); border: 1px solid var(--mc); box-shadow: inset 0 0 1.1rem rgba(0, 0, 0, 0.35), 0 0 0.6rem color-mix(in srgb, var(--mc) 35%, transparent); }
#dt-mastery .mb-ic { width: 3.4rem; height: 4.1rem; image-rendering: pixelated; filter: drop-shadow(0 0 0.5rem var(--mc)); }
#dt-mastery .mb-none { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; border: 0.18rem dashed #5a6488; color: #5a6488; font-size: 1.8rem; }
#dt-mastery .mb-txt { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
#dt-mastery .mb-txt b { font-family: var(--f-disp); font-weight: 400; font-size: 1.55rem; color: var(--mc); }
#dt-mastery .mb-txt small { color: var(--tx-2); font-size: 0.78rem; }
#dt-mastery .mb-txt small img { width: 0.9rem; height: 0.9rem; vertical-align: -0.12rem; image-rendering: pixelated; }
#dt-mastery .mb-bar { height: 0.55rem; border-radius: 999px; background: #141a36; overflow: hidden; }
#dt-mastery .mb-bar i { display: block; height: 100%; border-radius: inherit; background: var(--mc); }
#dt-moves { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.move { display: flex; flex-direction: column; padding: 0.45rem 0.7rem; font-size: 0.85rem; color: var(--tx-2); border-radius: var(--r-m); background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); }
.move b { font-family: var(--f-disp); font-weight: 400; font-size: 1.2rem; color: #fff; }
.move.super b { color: var(--yel); }
.move.evo b { color: #ffe066; }
.kit-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.35rem; }
.kit-pick small { color: var(--tx-3); margin-right: 0.15rem; }
.kit-pick button { padding: 0.15rem 0.6rem; font-size: 0.85rem; color: var(--tx-2); border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.kit-pick button.sel { color: #fff; border-color: var(--yel); background: rgba(90, 160, 255, 0.3); }
.kit-pick button .tico { width: 1rem; height: 1rem; background-size: calc(18 * 1rem) 1rem; background-position: calc(var(--i) * -1rem) 0; vertical-align: -0.15rem; }
#dt-moves .kit-cost { font-style: normal; margin-left: 0.3rem; opacity: 0.9; }
#dt-moves .kit-cost .money img { width: 0.9rem; height: 0.9rem; vertical-align: -0.12rem; }
.mv-group { margin-bottom: 0.7rem; }
.mv-group.super h4 { color: var(--yel); }
.mv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.85rem;
  color: var(--tx-2);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}
button.mv-card { cursor: pointer; transition: background 0.15s; }
button.mv-card:hover { background: rgba(255, 255, 255, 0.09); }
.mv-card.sel { border-color: var(--yel); background: rgba(255, 203, 5, 0.08); }
.mv-card small { font-size: 0.66rem; font-weight: 800; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.06em; }
.mv-card b { display: flex; align-items: center; gap: 0.3rem; font-family: var(--f-disp); font-weight: 400; font-size: 1.25rem; color: #fff; }
.mv-card b .tico { width: 1.05rem; height: 1.05rem; background-size: calc(18 * 1.05rem) 1.05rem; background-position: calc(var(--i) * -1.05rem) 0; }
.mv-card span { line-height: 1.4; }
.mv-card i { font-style: normal; font-size: 0.78rem; font-weight: 800; margin-top: 0.15rem; }
.mv-on { color: #6ff09a; } .mv-use { color: #8fd0ff; } .mv-cost { color: var(--yel); }
.mv-cost .money img { width: 0.9rem; height: 0.9rem; vertical-align: -0.12rem; }
#dt-skins, #dt-hats { display: block; margin: 0 0 0.7rem; }
#dt-skins:empty, #dt-hats:empty { display: none; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.45rem; }
.lk-card { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.45rem 0.3rem; cursor: pointer; color: #fff; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); transition: background 0.15s; }
.lk-card:hover { background: rgba(255, 255, 255, 0.09); }
.lk-card.sel { border-color: #6ff09a; background: rgba(111, 240, 154, 0.08); }
.lk-card.view { border-color: var(--yel); background: rgba(255, 203, 5, 0.1); }
.lk-pic { position: relative; width: 3.3rem; height: 3.3rem; display: grid; place-items: center; font-size: 1.4rem; color: var(--tx-3); border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.2)); }
.lk-pic img { max-width: 3rem; max-height: 3rem; image-rendering: pixelated; }
.lk-card.locked .lk-pic img { filter: brightness(0.75); }
.lk-pic.shiny::after { content: '✦'; position: absolute; right: 0.1rem; top: 0; color: #ffe066; font-size: 0.9rem; text-shadow: 0 0 0.3rem #ffb800; }
.lk-card b { font-family: var(--f-disp); font-weight: 400; font-size: 1rem; line-height: 1.05; text-align: center; }
.lk-card i { font-style: normal; font-size: 0.72rem; font-weight: 800; }
.lk-on { color: #6ff09a; } .lk-use { color: #8fd0ff; } .lk-ev { color: #ff9fe0; text-align: center; } .lk-cost { color: var(--yel); }
.lk-cost .money img { width: 0.85rem; height: 0.85rem; vertical-align: -0.12rem; }
.lk-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; margin-bottom: 0.7rem; font-size: 0.88rem; border-radius: var(--r-m); background: rgba(255, 203, 5, 0.1); border: 1px solid rgba(255, 203, 5, 0.55); }
.lk-buy span { flex: 1; min-width: 10rem; }
.lk-buy b { color: #ffe066; }
.lk-buy small { color: #ffc8f2; }
#dt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: auto; padding-top: 0.6rem; }
#dt-skins .px-seg, #dt-hats .px-seg { justify-content: flex-start; }
#dt-hats button { display: inline-flex; align-items: center; gap: 0.25rem; }
#dt-hats button > img { height: 1.15rem; image-rendering: pixelated; }

/* ------------------------------------------------------------------ elegir iniciales */
#sp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.sp-col { padding: 0.6rem; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.sp-col h3 { margin: 0 0 0.45rem; font-size: 1.5rem; color: var(--tc); text-align: center; }
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; }
.sp-mon { display: flex; flex-direction: column; align-items: center; padding: 0.25rem 0.15rem; cursor: pointer; color: #fff; border-radius: var(--r-s); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); transition: transform 0.1s, background 0.15s; }
.sp-mon:hover { background: rgba(255, 255, 255, 0.08); }
.sp-mon:active { transform: scale(0.95); }
.sp-mon img { width: 3rem; height: 3rem; image-rendering: pixelated; }
.sp-mon small { font-size: 0.72rem; line-height: 1.1; text-align: center; }
.sp-mon.sel { border-color: #fff; background: var(--tc); color: #10183a; box-shadow: 0 0 0.8rem color-mix(in srgb, var(--tc) 60%, transparent); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-top: 0.8rem; flex-wrap: wrap; }
#sp-pick { font-size: 0.95rem; color: #ffe066; }

/* ------------------------------------------------------------------ modos de juego */
#mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.mode-card2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.75rem 0.6rem 0.7rem;
  text-align: center;
  color: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.1), transparent 55%), linear-gradient(180deg, #1f2d64, #141d44);
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.12s, filter 0.15s, border-color 0.15s;
}
.mode-card2:hover { transform: translateY(-0.15rem); filter: brightness(1.12); }
.mode-card2:active { transform: scale(0.98); }
.mode-card2 img { width: 3.4rem; height: 3.4rem; image-rendering: pixelated; border-radius: var(--r-m); background: rgba(0, 0, 0, 0.22); }
.mode-card2 b { font-family: var(--f-disp); font-weight: 400; font-size: 1.45rem; line-height: 1; }
.mode-card2 span { font-size: 0.78rem; line-height: 1.35; color: var(--tx-2); }
.mode-card2.sel { border-color: var(--yel); background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(180deg, rgba(255, 203, 5, 0.32), rgba(20, 29, 68, 0.95) 70%); box-shadow: 0 0 0 0.12rem var(--yel), 0 0 1.1rem rgba(255, 203, 5, 0.3); }
.mode-card2.sel::after { content: '✓'; position: absolute; top: 0.45rem; right: 0.55rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: 0.95rem; font-weight: 900; color: var(--yel-ink); border-radius: 50%; background: var(--yel); }
.mode-card2.rnd { background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.1), transparent 55%), linear-gradient(180deg, #33266a, #1f1846); }
.mode-card2 .mc-live { display: none; font-style: normal; font-size: 0.78rem; font-weight: 800; color: #6ff09a; }
.mode-card2 .mc-live.on { display: block; }
.mc-sd { display: flex; gap: 0.25rem; font-style: normal; margin-top: 0.1rem; }
.mc-sd i { font-style: normal; font-family: var(--f-disp); font-size: 1.05rem; padding: 0.1rem 0.65rem; border-radius: 999px; color: var(--tx-2); background: rgba(0, 0, 0, 0.35); border: 1px solid transparent; }
.mc-sd i.on { color: var(--yel-ink); background: var(--yel); }
.mc-lv { flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
.mc-lv i { min-width: 1.3rem; padding: 0.05rem 0.4rem; text-align: center; }
.mc-lv i.off { opacity: 0.45; }
#mp-grid .mode-card2.raid:not(.sel) { border-color: rgba(154, 98, 255, 0.7); box-shadow: 0 0 1rem rgba(255, 70, 160, 0.3), var(--sh-1); }
#mp-grid .mode-card2.raid.locked { filter: grayscale(0.85) brightness(0.7); }
.diffs, #mp-diff { display: none; }

/* ------------------------------------------------------------------ misiones y logros */
#ms-list, #ach-list { display: flex; flex-direction: column; gap: 0.45rem; }
.mission { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; text-align: left; }
.mission > img { width: 2.3rem; height: 2.3rem; image-rendering: pixelated; }
.ms-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.22rem; }
.ms-body b { font-weight: 800; font-size: 0.95rem; }
.ms-body small { font-size: 0.78rem; color: var(--tx-2); }
.ms-reward { display: flex; flex-direction: column; align-items: center; min-width: 3.6rem; font-family: var(--f-disp); font-size: 1rem; color: var(--yel); }
.ms-reward img { width: 1.8rem; height: 1.8rem; image-rendering: pixelated; }
.mission.done { border-color: rgba(255, 203, 5, 0.7); background: rgba(255, 203, 5, 0.1); }
.mission.done .ms-body b { color: #ffe066; }
.mission.claimed { opacity: 0.5; }
.ach .ach-medal { position: relative; width: 2.6rem; flex: none; text-align: center; font-size: 1.8rem; }
.ach .ach-medal small { position: absolute; bottom: -0.1rem; right: 0; font-family: var(--f-disp); font-size: 0.85rem; color: var(--yel); text-shadow: 0 1px 0 #000; }
.ach.t0 .ach-medal { filter: sepia(1) saturate(0.6) brightness(0.9); }
.ach.t1 .ach-medal { filter: grayscale(1) brightness(1.3); }
.ach-rw { display: flex; flex-direction: column; gap: 0.15rem; min-width: 5.4rem; }
.rw { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--f-disp); font-size: 1.05rem; color: var(--yel); }
.rw img { width: 1.35rem; height: 1.35rem; image-rendering: pixelated; }

/* ------------------------------------------------------------------ perfil */
.pf-card { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; padding: 0.8rem; text-align: left; border-radius: var(--r-l); background: linear-gradient(120deg, rgba(63, 123, 255, 0.18), rgba(255, 255, 255, 0.03)); border: 1px solid var(--line); }
.pf-card > div { flex: 1; min-width: 0; }
.pf-av-btn { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.pf-av-btn img#pf-big { display: block; width: 5rem; height: 5rem; image-rendering: pixelated; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)); box-shadow: 0 0 0 0.18rem var(--yel); }
.pf-av-btn span { position: absolute; right: -0.15rem; bottom: -0.15rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font-size: 0.85rem; color: var(--yel-ink); border-radius: 50%; background: var(--yel); box-shadow: 0 0 0 0.14rem #10183a; }
.pf-name-row { display: flex; gap: 0.4rem; }
.pf-name-txt { font-family: var(--f-disp); font-size: 1.9rem; font-weight: 400; line-height: 1.05; color: #fff; word-break: break-word; }
.pf-tag-row { display: flex; align-items: center; gap: 0.5rem; color: var(--yel); font-weight: 800; }
.pf-tag-row .mini { font-family: var(--f-body); font-size: 0.78rem; font-weight: 800; height: 1.8rem; }
.pf-card p { margin: 0.25rem 0 0; color: var(--tx-2); font-size: 0.88rem; }
.pf-flag-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pf-flag-row .mini { font-family: var(--f-body); font-size: 0.78rem; font-weight: 800; height: 1.8rem; }
.pf-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.45rem 0; }
.pf-title-row input { width: 8.5rem; min-height: 2.1rem; }
#pf-title-cols { display: inline-flex; gap: 0.25rem; }
.tcol { width: 1.3rem; height: 1.3rem; padding: 0; border-radius: 0.35rem; border: 2px solid rgba(0, 0, 0, 0.5); }
.tcol.sel { border-color: #fff; box-shadow: 0 0 0 2px #10142a; }
.pf-raid-titles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }
.pf-raid-titles:empty, .raid-badges:empty { display: none; }
.raid-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.rbadge { position: relative; width: 3rem; height: 3rem; display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(#5a1a8a, #2a0a4a); box-shadow: 0 0 0 0.18rem #ffb030, 0 0 0.6rem rgba(255, 140, 40, 0.7); }
.rbadge img { width: 2.5rem; height: 2.5rem; image-rendering: pixelated; border-radius: 50%; }
.rbadge b { position: absolute; right: -0.35rem; bottom: -0.25rem; padding: 0 0.25rem; font-family: var(--f-disp); font-weight: 400; font-size: 0.85rem; color: #3a1a00; border-radius: 0.5rem; background: #ffb030; }
.pf-flags, .pf-avatars { margin: 0.5rem 0; padding: 0.7rem; border-radius: var(--r-m); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.pf-flags b, .pf-avatars b { display: block; margin-bottom: 0.4rem; font-family: var(--f-disp); font-weight: 400; font-size: 1.2rem; color: var(--yel); }
.pf-flags input { width: 100%; margin-bottom: 0.5rem; }
#pf-flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.35rem; max-height: 16rem; overflow-y: auto; }
#pf-flag-grid button { padding: 0.35rem 0.55rem; font-size: 0.85rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--ink-1); }
#pf-flag-grid button.sel { border-color: var(--yel); background: rgba(255, 203, 5, 0.15); }
#pf-av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 0.35rem; max-height: 12rem; overflow-y: auto; margin-top: 0.35rem; }
#pf-av-grid button { padding: 0.15rem; border: 2px solid transparent; border-radius: var(--r-s); background: rgba(255, 255, 255, 0.06); cursor: pointer; }
#pf-av-grid button.sel { border-color: var(--yel); background: rgba(255, 203, 5, 0.18); }
#pf-av-grid img { display: block; width: 100%; image-rendering: pixelated; }
#pf-av-grid button { position: relative; }
#pf-av-grid .empty { grid-column: 1 / -1; margin: 0.4rem 0; opacity: 0.7; font-size: 0.85rem; }
.pf-av-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pf-av-bar input { flex: 1 1 10rem; min-width: 0; }
.pf-av-tabs { display: flex; gap: 0.3rem; }
.pf-av-tabs button { padding: 0.3rem 0.6rem; border: 2px solid var(--line); border-radius: var(--r-s); background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer; }
.pf-av-tabs button.sel { border-color: var(--yel); background: rgba(255, 203, 5, 0.18); color: var(--yel); }
#pf-av-grid button.sh::after { content: "✨"; position: absolute; right: 0.1rem; top: 0; font-size: 0.7rem; }
#pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.8rem; }
#pf-stats div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); }
#pf-stats small { font-size: 0.7rem; font-weight: 800; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.04em; }
#pf-stats b { font-family: var(--f-disp); font-weight: 400; font-size: 1.4rem; }
#pf-history { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.pf-h-title { margin: 0.2rem 0; font-family: var(--f-disp); font-size: 1.25rem; text-align: left; color: var(--yel); }
.pf-h-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.6rem; border-radius: var(--r-s); background: rgba(255, 255, 255, 0.045); border-left: 0.25rem solid #8a94b0; }
.pf-h-row.win { border-left-color: #5ad87a; }
.pf-h-row.lose { border-left-color: #ff6a6a; }
.pf-h-row img { width: 2rem; height: 2rem; image-rendering: pixelated; }
.pf-h-row > span:nth-of-type(1) { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.pf-h-row small { font-size: 0.72rem; color: var(--tx-2); }
.pf-h-kd { font-size: 0.78rem; color: #cfd8f0; white-space: nowrap; }
.pf-h-c { display: flex; align-items: center; gap: 0.15rem; min-width: 3rem; justify-content: flex-end; font-family: var(--f-disp); font-size: 1.15rem; }
.pf-h-c.up { color: #7dff8a; }
.pf-h-c.down { color: #ff8a7a; }
.pf-h-c .cup { width: 0.9rem; height: 0.9rem; }
.pf-h-row.has-pl { cursor: pointer; }
.pf-h-row.has-pl:hover { background: rgba(255, 255, 255, 0.09); }
.login-box { padding: 0.8rem; text-align: left; }
.login-box > b { font-family: var(--f-disp); font-weight: 400; font-size: 1.3rem; color: var(--yel); }
.login-box p { margin: 0.25rem 0 0.6rem; font-size: 0.85rem; color: var(--tx-2); }
.login-box .row { justify-content: flex-start; margin: 0; }

/* ------------------------------------------------------------------ conversación con un amigo */
#dm .panel { display: flex; flex-direction: column; height: min(40rem, 100%); }
.dm-log { margin: 0.5rem 0; }
.dm-log .gc-m.mine { align-self: flex-end; }
.dm-log .gc-m.mine .gc-b { background: rgba(90, 168, 255, 0.22); }
.dm-log .gc-b { max-width: 80%; padding: 0.3rem 0.7rem; border-radius: var(--r-m); background: rgba(0, 0, 0, 0.3); }

/* ------------------------------------------------------------------ clanes */
.clan-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.7rem; padding: 0.6rem; text-align: left; border-radius: var(--r-l); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.clan-head > div { flex: 1; min-width: 0; }
.clan-head p { margin: 0 0 0.2rem; font-size: 0.9rem; color: var(--tx); }
.clan-head small { font-size: 0.8rem; color: var(--tx-2); }
.clan-head .av { border-radius: var(--r-m); image-rendering: pixelated; background: rgba(255, 255, 255, 0.08); }
.clan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; min-height: 0; }
.clan-grid .plist { max-height: 52vh; overflow-y: auto; }
.chat { display: flex; flex-direction: column; min-height: 15rem; max-height: 52vh; border-radius: var(--r-m); background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); }
#chat-log { flex: 1; overflow-y: auto; padding: 0.55rem 0.7rem; text-align: left; font-size: 0.9rem; }
#chat-log p { margin: 0 0 0.4rem; color: var(--tx); word-wrap: break-word; }
#chat-log p b { color: #7ab4fa; }
#chat-log p.mine b { color: #7dff8f; }
#chat-log p small { color: var(--tx-3); font-size: 0.7rem; }
#chat-log p.sys { color: var(--yel); font-size: 0.78rem; text-align: center; }
.chat-in { display: flex; gap: 0.4rem; padding: 0.4rem; }
.chat-in input { flex: 1; min-width: 0; }
.form { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--tx-2); }
.icons { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.icons button { width: 3.3rem; height: 3.3rem; padding: 0.15rem; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--ink-2); }
.icons button.sel { outline: 0.18rem solid var(--yel); outline-offset: 1px; background: rgba(255, 203, 5, 0.2); }
.icons img { width: 100%; height: 100%; image-rendering: pixelated; border-radius: var(--r-s); }
#cl-reqs h3 { margin: 0.7rem 0 0.3rem; font-size: 1.25rem; color: var(--yel); }

/* ------------------------------------------------------------------ ranking */
.rk-pick { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; }
.rk-pick > img { width: 2.5rem; height: 2.5rem; image-rendering: pixelated; border-radius: var(--r-s); background: var(--ink-1); }
.rk-pick b { font-family: var(--f-disp); font-weight: 400; font-size: 1.4rem; color: #ffe066; white-space: nowrap; }
.rk-pick input { flex: 1; min-width: 0; }
.rk-sug { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.4rem; margin-bottom: 0.7rem; }
.rk-sug button { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; font-size: 0.9rem; text-align: left; color: #fff; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--ink-1); }
.rk-sug button:hover { border-color: var(--yel); }
.rk-sug img { width: 1.9rem; height: 1.9rem; image-rendering: pixelated; }
.rk-sug small { color: var(--tx-3); font-size: 0.72rem; }

/* ------------------------------------------------------------------ ajustes */
#st-body { display: flex; flex-direction: column; gap: 0.45rem; text-align: left; }
.st-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem; }
.st-row > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.st-row b { font-weight: 800; font-size: 1rem; }
.st-row small { font-size: 0.78rem; color: var(--tx-2); }
.st-row.danger { border-color: rgba(239, 65, 54, 0.45); background: rgba(239, 65, 54, 0.08); }
.st-row.danger small { color: #ffd2cc; }
.keys { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; padding: 0.65rem 0.8rem; font-size: 0.88rem; color: var(--tx-2); }
.keys b { width: 100%; font-family: var(--f-disp); font-weight: 400; font-size: 1.2rem; color: var(--yel); }

/* ------------------------------------------------------------------ pausa */
.pause-panel { width: min(22rem, 100%); padding: 1.3rem 1.3rem 1.1rem; text-align: center; }
.pause-panel h1 { font-size: 2.8rem; color: #fff; }
.pause-btns { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0 0.6rem; }
.pause-btns .big, .pause-btns .lb-btn { width: 100%; padding-left: 1.2rem; padding-right: 1.2rem; }
.pause-btns .big::before { display: none; }
.pause-panel .sub { text-align: center; margin: 0; font-size: 0.82rem; }

/* ------------------------------------------------------------------ jugar con amigos (sala) */
.pt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.7rem; text-align: left; }
.pt-box { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem; border-radius: var(--r-l); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.pt-box h3, .pt-title { margin: 0; font-size: 1.35rem; color: #ffe066; text-align: left; }
.pt-title { margin: 0.8rem 0 0.35rem; }
.pt-hint { margin: 0; font-size: 0.82rem; color: var(--tx-2); }
.pt-code { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pt-code small { color: var(--tx-2); }
.pt-code b { padding: 0.1rem 0.7rem; font-family: var(--f-disp); font-weight: 400; font-size: 2rem; letter-spacing: 0.2em; color: #fff; border-radius: var(--r-s); background: var(--ink-0); border: 1px solid rgba(255, 203, 5, 0.6); }
.pt-members { display: flex; flex-direction: column; gap: 0.3rem; }
.pt-mem, .pt-friend { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.pt-mem.me { border-color: rgba(52, 207, 108, 0.6); }
.pt-mem img, .pt-friend img { width: 2.2rem; height: 2.2rem; image-rendering: pixelated; }
.pt-mem span, .pt-friend span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pt-friend span b, .pt-friend span small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-friend > .act, .pt-friend > .pt-on, .pt-friend > .pt-off { flex: none; }
.pt-mem b, .pt-friend b { font-family: var(--f-disp); font-weight: 400; font-size: 1.2rem; }
.pt-mem b i { font-style: normal; color: var(--yel); font-size: 0.8rem; }
.pt-mem small, .pt-friend small { font-size: 0.75rem; color: var(--tx-2); }
.pt-mem.invited small { color: #ffe066; }
.pt-mem .tagok { margin-left: auto; color: #8ef59a; font-size: 0.8rem; }
.pt-join { display: flex; gap: 0.4rem; }
.pt-join input { flex: 1; min-width: 0; font-family: var(--f-disp); font-size: 1.5rem; letter-spacing: 0.15em; text-transform: uppercase; }
#pt-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.4rem; }
.pt-friend.off { opacity: 0.55; }
.pt-friend small { color: #7dff8f; }
.pt-friend.off small { color: var(--tx-2); }
/* sala privada: 6 huecos, 3 azules y 3 rojos */
.pt-grid.priv { grid-template-columns: minmax(0, 1fr); }
.pt-priv { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; color: #ffe066; }
.pt-priv b { font-family: var(--f-disp); font-weight: 400; font-size: 1.35rem; }
.pt-priv small { font-size: 0.78rem; color: var(--tx-2); }
.pt-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pt-btns .act { flex: 1; }
.pv-teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
.pv-col { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem 0.5rem 0.5rem; border-radius: var(--r-l); background: rgba(63, 123, 255, 0.12); border: 1px solid rgba(63, 123, 255, 0.55); }
.pv-col.red { background: rgba(239, 65, 54, 0.12); border-color: rgba(239, 65, 54, 0.55); }
.pv-col h4 { margin: 0; font-family: var(--f-disp); font-weight: 400; font-size: 1.2rem; color: var(--tx); }
.pv-slot { display: flex; align-items: center; gap: 0.45rem; min-height: 2.8rem; padding: 0.2rem 0.45rem; border-radius: var(--r-m); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.pv-slot.me { border-color: rgba(52, 207, 108, 0.7); }
.pv-slot img { width: 2.2rem; height: 2.2rem; image-rendering: pixelated; }
.pv-slot span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pv-slot b { font-family: var(--f-disp); font-weight: 400; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-slot b .crown { font-style: normal; color: var(--yel); margin-right: 0.2rem; }
.pv-slot small { font-size: 0.72rem; color: var(--tx-2); }
.pv-slot.ready small { color: #8ef59a; }
.pv-slot .mini { flex: none; }
.pv-slot.empty { flex-direction: column; justify-content: center; gap: 0; border-style: dashed; opacity: 0.6; }
.pv-slot.empty .pv-plus { flex: none; font-family: var(--f-disp); font-size: 1.4rem; line-height: 1; color: var(--tx); }
.pv-slot.join { cursor: pointer; opacity: 0.9; }
.pv-slot.join:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--line-3); }
.pslot .pmore { color: var(--yel); }
.pill.priv-end b { font-weight: 700; }
.pt-on { color: #7dff8f; font-size: 0.82rem; }
.pt-off { color: var(--tx-3); font-size: 0.82rem; }
.pt-cup { width: 0.8rem; height: 0.8rem; vertical-align: -0.05rem; margin-right: 0.12rem; image-rendering: pixelated; }

/* ------------------------------------------------------------------ pase de temporada */
#passscreen .panel { display: flex; flex-direction: column; }
.ps-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.9rem;
  overflow: hidden;
  border-radius: var(--r-l);
  background: linear-gradient(105deg, #5d2ab0 0%, #b8307a 55%, #f07a2a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), var(--sh-1);
}
.ps-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.12; background: repeating-linear-gradient(45deg, #fff 0 0.4rem, transparent 0.4rem 1.2rem); }
.ps-medal { position: relative; width: 4rem; height: 4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 0.9; color: var(--yel-ink); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #f8c830 45%, #b07810); box-shadow: 0 0 0 0.2rem #2a0a40, 0 0 0 0.4rem rgba(255, 244, 176, 0.7), var(--sh-1); }
.ps-medal small { font-size: 0.62rem; font-weight: 900; }
.ps-medal b { font-family: var(--f-disp); font-weight: 400; font-size: 2rem; }
.ps-mid { position: relative; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ps-name { display: flex; align-items: center; gap: 0.5rem; font-family: var(--f-disp); font-size: 1.7rem; line-height: 1; color: #fff; text-shadow: 0 0.12rem 0 #2a0a40; }
.ps-name em { padding: 0.05rem 0.45rem; font-style: normal; font-family: var(--f-body); font-weight: 900; font-size: 0.7rem; color: #10183a; border-radius: 999px; background: #7dff8f; text-shadow: none; }
.ps-xpbar { position: relative; height: 1.25rem; overflow: hidden; border-radius: 999px; background: rgba(20, 10, 40, 0.6); box-shadow: inset 0 0.1rem 0.25rem rgba(0, 0, 0, 0.4); }
.ps-xpbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(180deg, #bfffb0, #47d65a 50%, #2a9a3a); }
.ps-xpbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-disp); font-size: 1rem; color: #fff; text-shadow: 0 1px 0 #141824, 0 -1px 0 #141824; }
.ps-how { display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: 0.75rem; color: #ffe8f6; }
.ps-how b { color: #ffe066; }
.ps-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.ps-timer { padding: 0.1rem 0.6rem; font-size: 0.78rem; font-weight: 800; color: #fff; border-radius: 999px; background: rgba(20, 24, 36, 0.5); }
.ps-timer::before { content: '⏳ '; }
#ps-track { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; padding: 1rem 0.8rem 0.5rem; scroll-behavior: smooth; scrollbar-color: var(--yel) rgba(0, 0, 0, 0.3); }
#ps-track::-webkit-scrollbar { height: 0.55rem; }
#ps-track::-webkit-scrollbar-thumb { background: var(--yel); }
.ps-col { position: relative; flex: none; width: 6.6rem; display: flex; flex-direction: column; align-items: center; padding: 0 0.3rem; }
.ps-ribbon { position: absolute; top: -0.75rem; left: 0; right: 0; z-index: 2; width: max-content; margin: 0 auto; padding: 0 0.45rem; font-family: var(--f-disp); font-size: 0.95rem; line-height: 1.15rem; white-space: nowrap; color: var(--yel-ink); border-radius: 999px; background: var(--yel); }
.ps-ribbon.small { font-size: 0.85rem; background: #c8b0ff; color: #2a1060; }
.ps-card {
  position: relative;
  width: 100%;
  height: 7.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.25rem 1.1rem;
  font: inherit;
  color: #fff;
  cursor: default;
  border: 0;
  border-radius: var(--r-m);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -0.3rem 0 rgba(0, 0, 0, 0.25), var(--sh-1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.ps-card.t-coins { background: linear-gradient(180deg, #e8aa28, #a86a10); }
.ps-card.t-points { background: linear-gradient(180deg, #8f6af4, #5232b0); }
.ps-card.t-poke { background: linear-gradient(180deg, #ee5a44, #a02818); }
.ps-card.t-great { background: linear-gradient(180deg, #4f90ee, #23509e); }
.ps-card.t-ultra { background: linear-gradient(180deg, #3e3e4e, #18181f); box-shadow: inset 0 0 0 0.16rem #f8c830, var(--sh-1); }
.ps-card.t-master { background: linear-gradient(180deg, #5f2ea2, #2a1048); box-shadow: inset 0 0 0 0.16rem #ff5ad0, var(--sh-1); }
.ps-card.t-rainbow { background: linear-gradient(135deg, #ff4a4a, #ff9a2a, #ffe23a, #5ad85a, #4aa8ff, #9a6aff); }
.ps-item { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; line-height: 1; }
.ps-item img { width: 2.5rem; height: 2.5rem; image-rendering: pixelated; filter: drop-shadow(0.1rem 0.1rem 0 rgba(0, 0, 0, 0.45)); }
.ps-item b { font-family: var(--f-disp); font-weight: 400; font-size: 1.05rem; }
.ps-item.sub { flex-direction: row; gap: 0.2rem; }
.ps-item.sub img { width: 1.25rem; height: 1.25rem; }
.ps-item.sub b { font-size: 0.95rem; }
.ps-state { position: absolute; bottom: 0.2rem; left: 0; right: 0; font-family: var(--f-disp); font-size: 0.95rem; color: #ffe066; text-align: center; }
.ps-col.locked .ps-card { filter: saturate(0.45) brightness(0.6); }
.ps-col.claimed .ps-card { filter: saturate(0.3) brightness(0.55); }
.ps-col.claimed .ps-item { opacity: 0.6; }
.ps-col.claimed .ps-state { top: 50%; bottom: auto; transform: translateY(-50%); font-size: 2.2rem; color: #7dff8f; text-shadow: 0 0.12rem 0 #141824; }
.ps-col.ready .ps-card { cursor: pointer; animation: ps-bob 1.1s ease-in-out infinite; box-shadow: 0 0 0 0.18rem #ffe066, 0 0 1.1rem 0.3rem rgba(255, 224, 102, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.ps-col.ready .ps-state { left: 0.35rem; right: 0.35rem; color: #fff; border-radius: 999px; background: var(--grn-2); }
.ps-col.final { width: 7.8rem; }
.ps-col.final .ps-card { box-shadow: 0 0 0 0.18rem #f8c830, 0 0 0 0.36rem #141824, var(--sh-1); }
@keyframes ps-bob { 50% { transform: translateY(-0.25rem); } }
.ps-rail { position: relative; align-self: stretch; height: 0.7rem; margin: 0.75rem -0.3rem 0; background: #1a2242; }
.ps-col:first-child .ps-rail { margin-left: 50%; border-radius: 999px 0 0 999px; }
.ps-col:last-child .ps-rail { margin-right: 50%; border-radius: 0 999px 999px 0; }
.ps-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill) * 100%); background: linear-gradient(180deg, #bfffb0, #47d65a 50%, #2a9a3a); }
.ps-dot { position: relative; z-index: 1; width: 2.1rem; height: 2.1rem; margin-top: -1.4rem; display: grid; place-items: center; font-family: var(--f-disp); font-size: 1.15rem; color: var(--tx-2); border-radius: 50%; background: #2c3866; box-shadow: 0 0 0 0.18rem #10183a; }
.ps-col.ready .ps-dot, .ps-col.claimed .ps-dot { color: #10301a; background: radial-gradient(circle at 35% 30%, #c8ffb8, #47d65a 55%, #2a8a3a); }
.ps-col.milestone .ps-dot, .ps-col.final .ps-dot { width: 2.5rem; height: 2.5rem; margin-top: -1.6rem; font-size: 1.3rem; }
.ps-col.final .ps-dot { color: var(--yel-ink); background: radial-gradient(circle at 35% 30%, #fff6b0, #f8c830 45%, #b07810); }
.ps-dot.road-dot { width: auto; min-width: 2.1rem; padding: 0 0.35rem; display: inline-flex; align-items: center; gap: 0.12rem; font-size: 0.9rem; border-radius: 999px; }
.ps-dot.road-dot .cup { width: 0.7rem; height: 0.7rem; }
#passscreen.road .ps-medal small { font-size: 0; }
#passscreen.road .ps-medal small::after { content: 'COPAS'; font-size: 0.62rem; }
#passscreen.road .ps-name em, #passscreen.road .ps-timer { display: none; }

/* ------------------------------------------------------------------ tamaños */
@media (max-height: 520px) {
  .screen .panel { padding-left: 0.85rem; padding-right: 0.85rem; padding-bottom: 0.85rem; }
  .pn-head { margin: 0 -0.85rem 0.6rem; padding: 0.5rem 0.85rem; gap: 0.6rem; }
  .pn-head h2 { font-size: 1.55rem; }
  .back { width: 2.35rem; height: 2.35rem; }
  .col-filters { top: 3.35rem; gap: 0.3rem; flex-wrap: nowrap; overflow-x: auto; }
  .col-filters input { flex: 1 0 7rem; }
  .col-filters select { max-width: 8rem; font-size: 0.85rem; }
  #col-grid { grid-template-columns: repeat(auto-fill, minmax(6.3rem, 1fr)); gap: 0.45rem; }
  #col-grid .card img.pt { width: 3.6rem; height: 3.6rem; }
  #col-grid .lock { top: 1.4rem; }
  .col-note { display: none; }
  .dt { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 0.8rem; }
  #dt-desc { font-size: 0.8rem; }
  .wl-title { font-size: 3.6rem; }
  .wl-sub { margin: 0.1rem 0 0.3rem; font-size: 0.9rem; }
  .wl-panel { gap: 0.4rem; padding: 0.8rem; }
  .wl-panel small { display: none; }
  #mp-grid { gap: 0.45rem; }
  .mode-card2 { padding: 0.5rem 0.45rem; gap: 0.2rem; }
  .mode-card2 img { width: 2.5rem; height: 2.5rem; }
  .mode-card2 span { display: none; }
  .mode-card2 b { font-size: 1.3rem; }
  .ps-hero { padding: 0.35rem 0.7rem; gap: 0.6rem; margin-bottom: 0.4rem; }
  .ps-medal { width: 3.2rem; height: 3.2rem; }
  .ps-medal b { font-size: 1.6rem; }
  .ps-name { font-size: 1.4rem; }
  .ps-how { display: none; }
  .ps-card { height: 6.3rem; }
  .ps-col { width: 5.8rem; }
  .ps-item img { width: 2rem; height: 2rem; }
  #pf-stats div { padding: 0.35rem 0.5rem; }
  .pf-card { padding: 0.55rem; margin-bottom: 0.5rem; }
  .pf-av-btn img#pf-big { width: 3.8rem; height: 3.8rem; }
  .clan-grid .plist, .chat { max-height: calc(100vh - 13rem); }
  .chat { min-height: 0; height: calc(100vh - 13rem); }
  .clan-grid .plist { height: calc(100vh - 13rem); }
  .clan-head { padding: 0.4rem; margin-bottom: 0.4rem; }
  .clan-head .av.avbig { width: 2.8rem; height: 2.8rem; flex-basis: 2.8rem; }
  .sp-mon img { width: 2.3rem; height: 2.3rem; }
  .pause-btns { gap: 0.45rem; margin: 0.6rem 0 0.4rem; }
}
@media (max-width: 640px) {
  .dt { grid-template-columns: 1fr; }
  #sp-cols, .clan-grid, .pt-grid { grid-template-columns: 1fr; }
  #pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}