/* ============ PokéSurvivor — interfaz estilo Mundo Misterioso ============
 * Cajas azules con doble borde blanco, como los menús de PMD, y fuente pixel
 * local (Pixelify Sans, OFL).
 */
/* Pixelify Sans con los números redibujados para que no se confundan (tools/make_font.py). */
@font-face {
  font-family: 'Pixelify';
  src: url('../assets/fonts/PixelifyPS-400.ttf') format('truetype');
  font-weight: 400 550;
  font-display: block;
}
@font-face {
  font-family: 'Pixelify';
  src: url('../assets/fonts/PixelifyPS-700.ttf') format('truetype');
  font-weight: 551 900;
  font-display: block;
}

:root {
  --ink: #ffffff;
  --muted: #b9cbf0;
  --box1: #2c519f;
  --box2: #1a3170;
  --edge: #f4f8ff;
  --edge-in: #5b83d6;
  --edge-out: #0b1838;
  --gold: #ffd23f;
  --gold2: #f0a31e;
  --red: #ff5f6d;
  --green: #5fe08a;
  --shadow: #0a1430;
  --r1: #9fb1c9; --r2: #5fe08a; --r3: #4fb4ff; --r4: #c47bff; --r5: #ffcb3d;
  --font: 'Pixelify', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: #050914;
  color: var(--ink);
  font: 16px/1.35 var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: none;
}
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
/* position: fixed + inset: 0 en vez de 100vw / 100vh: en iPhone (sobre todo
   abierto desde la pantalla de inicio) los vh no cuadraban con la ventana y el
   juego se veía estirado. */
#game { display: block; position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
button { font: inherit; color: inherit; }
input { font: inherit; }

/* ---------- capas de pantalla ---------- */
.scr {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade .2s ease-out;
}
.scr.hidden { display: none; }
/* Cartas de nivel, objeto y vínculo en el móvil: fuera del recuadro se coge el joystick
   (touch.js), sin gestos del navegador ahí. Dentro (.box) se desplaza como siempre. */
body.touch #scr-levelup, body.touch #scr-bond, body.touch #scr-item { touch-action: none; }
/* Pantallas que se abren con la barra superior a la vista: empiezan debajo de ella. */
@media (min-height: 521px) {
  #scr-goals, #scr-gacha, #scr-friends, #scr-rank, #scr-lobby, #scr-profile, #scr-news, #scr-movebook, #scr-train { padding-top: 66px; }
}
.scr.dim { background: radial-gradient(circle at 50% 40%, rgba(10,20,50,.55), rgba(3,6,16,.88)); }
/* ============ Training (ui/train-ui.js, 05-11-2026) ============
 * Your own Pokémon on the left, the training of the line you pick on the right. The bars, the
 * IV pips and the + buttons are the Pokédex's (.dx-seg, .dx-evbar, .dx-plus, .dx-pts): same
 * numbers, same controls, so they are reused rather than drawn twice.
 */
.tn { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; min-height: 0; }
.tn-find { width: 190px; }
.tn-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 4px; }
.tn-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  border: 0; text-align: left; padding: 4px 12px 4px 6px; background: #fff; color: var(--pd-text);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: transform .12s, background .12s;
}
.tn-row:hover, .tn-row:focus-visible { background: var(--pd-y); transform: translateX(4px); outline: none; }
.tn-row.on { background: var(--pd-y); box-shadow: inset 0 0 0 2px var(--pd-pink); }
.tn-pic { display: grid; place-items: center; width: 46px; height: 40px; }
.tn-pic canvas { image-rendering: pixelated; }
.tn-nm { min-width: 0; }
.tn-nm b { display: block; font: italic 800 15px/1.1 var(--pd-head); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-nm small { font: 12px var(--font); color: var(--pd-soft); }
.tn-pts { display: flex; gap: 4px; }
.tn-pts i { font: italic 800 12px/18px var(--pd-head); font-style: italic; min-width: 20px; text-align: center; padding: 0 5px; border-radius: 999px; color: #fff; }
.tn-pts i.iv { background: var(--pd-pink); }
.tn-pts i.ev { background: #3aa76d; }
.tn-card { min-height: 0; overflow: auto; background: #fff; color: var(--pd-text); padding: 14px 18px; border-radius: 6px 24px 6px 24px; }
.tn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tn-hero { display: grid; place-items: center; width: 96px; height: 84px; flex: none; overflow: hidden; background: #fff3b0; border-radius: 50%; box-shadow: inset 0 -8px 0 var(--pd-y2); }
.tn-hero canvas { image-rendering: pixelated; }
.tn-who b { display: block; font: italic 800 26px/1 var(--pd-head); text-transform: uppercase; }
.tn-who small { font: 12px/1.3 var(--font); color: var(--pd-soft); }
.tn-tab { width: 100%; border-collapse: collapse; }
@media (max-height: 520px) {
  .tn { grid-template-columns: 220px minmax(0, 1fr); gap: 8px; }
  .tn-find { width: 130px; }
  .tn-row { padding: 2px 9px 2px 4px; gap: 6px; grid-template-columns: 34px minmax(0, 1fr) auto; }
  .tn-pic { width: 34px; height: 30px; }
  .tn-nm b { font-size: 13px; }
  .tn-nm small { display: none; }
  .tn-card { padding: 8px 11px; }
  .tn-hero { width: 60px; height: 54px; }
  .tn-who b { font-size: 18px; }
}

/* The Trainer screen's two tabs and its Bag panel (ui/trainer-ui.js, 05-11-2026). */
.tx-tabs { display: flex; gap: 6px; margin-left: auto; }
.tx-bag { grid-column: 1 / -1; grid-row: 2 / -1; min-height: 0; overflow: auto; padding: 4px 4px 0 0; }
.tx-bag .sh-grid { grid-template-columns: 1fr 1fr; }

/* A screen that is really a pop-up (link your Gmail, an update notice): no top bar over it, it is
   one question with two buttons and the coins and the tools only got in the way. 05-11-2026. */
body:has(.scr.pop:not(.hidden)) .topbar, body:has(.scr.pop:not(.hidden)) #credits-line { display: none !important; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- caja PMD ---------- */
.box {
  position: relative;
  background: linear-gradient(180deg, var(--box1), var(--box2));
  border: 3px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--edge-out), inset 0 0 0 2px var(--edge-in), 0 18px 50px rgba(0,0,0,.55);
  padding: 22px 24px;
  text-shadow: 2px 2px 0 var(--shadow);
  animation: pop .22s ease-out;
  max-height: 100%;
  overflow: auto;
}
.box h1, .box h2, .box h3 { margin: 0 0 6px; font-weight: 700; letter-spacing: .5px; }
.box h2 { font-size: 26px; }
.box h3 { font-size: 18px; }
.sub { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.gold { color: var(--gold); }
.center { text-align: center; }

/* ---------- botones ---------- */
.btn {
  appearance: none; cursor: pointer;
  padding: 10px 20px;
  border: 3px solid var(--edge);
  border-radius: 9px;
  background: linear-gradient(180deg, #3d67c0, #26468f);
  box-shadow: 0 0 0 2px var(--edge-out), 0 4px 0 var(--edge-out);
  font-size: 17px; font-weight: 700;
  text-shadow: 2px 2px 0 var(--shadow);
  transition: transform .06s, filter .12s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--edge-out), 0 2px 0 var(--edge-out); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.gold {
  background: linear-gradient(180deg, #ffe37a, #f0a31e);
  color: #3a2300; text-shadow: 1px 1px 0 rgba(255,255,255,.4);
  border-color: #fff7d6;
}
.btn.ghost { background: transparent; box-shadow: none; border-color: rgba(244,248,255,.35); }
.btn.small { padding: 6px 12px; font-size: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }

/* ---------- Endless Mode infographic ---------- */
.ei-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center;
  padding: 3vh 12px; overflow-y: auto; background: rgba(6,8,18,.78); backdrop-filter: blur(3px);
}
.ei-box {
  position: relative; width: min(980px, 100%); padding: 22px 24px 18px; border-radius: 16px;
  background: linear-gradient(180deg, #1d2440, #121729); border: 2px solid rgba(255,215,90,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}
.ei-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--muted); font-size: 30px; cursor: pointer; }
.ei-x:hover { color: #fff; }
.ei-head { text-align: center; margin-bottom: 14px; }
.ei-head h2 { margin: 0; font-size: 38px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; text-shadow: 3px 3px 0 var(--shadow); }
.ei-head p { margin: 6px auto 0; max-width: 640px; color: #d5ddf2; font-size: 15px; }
.ei-pano { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255,255,255,.15); }
.ei-pano canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ei-faces { position: absolute; inset: 0; pointer-events: none; }
.ei-faces canvas { position: absolute; width: 7.4%; height: auto; transform: translate(-50%, -50%); image-rendering: pixelated; }
.ei-biomes { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 14px; align-items: center; }
.ei-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid; }
.ei-chip.early, .ei-legend i.early { border-color: #7cc45a; }
.ei-chip.late, .ei-legend i.late { border-color: #ff9a3c; }
.ei-chip.dist, .ei-legend i.dist { border-color: #b48aff; }
.ei-legend { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.ei-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid; margin-left: 6px; }
.ei-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.ei-steps div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 14px; }
.ei-steps b { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #3a2300; font-size: 16px; }
.ei-box h3 { margin: 0 0 10px; font-size: 20px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.ei-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.ei-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.ei-card b { display: block; font-size: 16px; margin-bottom: 2px; }
.ei-card span { font-size: 13px; color: #c8d2ea; line-height: 1.35; }
.ei-pics { display: flex; justify-content: center; height: 84px; border-radius: 8px; background: radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.1), transparent 70%); }
.ei-pics canvas { image-rendering: pixelated; }
.ei-card.alpha .ei-pics { background: radial-gradient(ellipse at 50% 80%, rgba(255,59,79,.35), transparent 70%); }
.ei-card.moon .ei-pics { background: radial-gradient(ellipse at 50% 30%, rgba(200,215,255,.3), rgba(16,22,70,.5) 75%); }
.ei-tip { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  .ei-head h2 { font-size: 28px; }
  .ei-steps { grid-template-columns: 1fr; }
  .ei-legend { margin-left: 0; }
}
.mi-ico { grid-row: span 2; display: flex; }

/* ---------- formularios ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab {
  flex: 1; padding: 8px; cursor: pointer; border-radius: 8px;
  background: rgba(0,0,0,.2); border: 2px solid transparent;
  text-align: center; font-weight: 700;
}
.tab.on { border-color: var(--edge); background: rgba(255,255,255,.1); }
label { display: block; font-size: 14px; color: var(--muted); margin: 8px 0 4px; }
.field {
  width: 100%; padding: 10px 12px;
  background: #0f1f4a; color: #fff;
  border: 2px solid var(--edge-in); border-radius: 8px;
  font-size: 17px; outline: none;
}
.field:focus { border-color: var(--edge); }
.err { color: #ffb0b8; min-height: 20px; font-size: 14px; margin: 8px 0 0; }
.note { color: var(--muted); font-size: 13px; margin-top: 14px; }

/* ---------- pantalla de inicio ---------- */
.logo { text-align: center; margin-bottom: 18px; }
.logo .t1 { font-size: 46px; font-weight: 700; line-height: 1; color: var(--gold);
  text-shadow: 3px 3px 0 #a55f00, 6px 6px 0 var(--shadow); letter-spacing: 1px; }
.logo .t2 { font-size: 18px; color: #fff; margin-top: 6px; letter-spacing: 3px; text-transform: uppercase; }

/* ---------- test de personalidad ---------- */
.test-box { width: min(620px, 100%); }
.progress { height: 8px; background: rgba(0,0,0,.35); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.progress i { display: block; height: 100%; background: var(--gold); transition: width .25s; }
.q { font-size: 22px; margin: 0 0 16px; min-height: 2.6em; }
.answers { display: flex; flex-direction: column; gap: 8px; }
.answer {
  appearance: none; text-align: left; cursor: pointer;
  padding: 12px 16px 12px 34px; position: relative;
  background: rgba(0,0,0,.18); border: 2px solid rgba(244,248,255,.25); border-radius: 9px;
  font-size: 17px; text-shadow: 2px 2px 0 var(--shadow);
}
.answer::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 12px; height: 18px; margin-top: -9px;
  background: var(--ico-cursor) no-repeat center / contain; image-rendering: pixelated; opacity: 0;
}
.answer:hover { background: rgba(255,255,255,.1); border-color: var(--edge); }
.answer:hover::before { opacity: 1; }

.result { width: min(560px, 100%); text-align: center; }
.result .trait { font-size: 30px; color: var(--gold); margin: 4px 0; }
.stage {
  display: block; margin: 8px auto 6px;
  /* Recuadro estilo PMD: fondo oscuro y borde del color del tipo (--stage-c). */
  background:
    radial-gradient(ellipse at 50% 88%, rgba(120,170,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(20,36,78,.88), rgba(8,14,34,.92));
  border: 3px solid var(--stage-c, #5b83d6);
  border-radius: 14px;
  box-shadow: 0 0 0 3px #0b1838, 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.06);
}
.stage.shiny { box-shadow: 0 0 0 3px #0b1838, 0 0 22px rgba(154,230,255,.55), inset 0 0 0 2px rgba(255,255,255,.08); }

/* ---------- rejilla de Pokémon ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; max-height: 56vh; overflow-y: auto; padding: 4px;
}
.cell {
  position: relative; cursor: pointer; text-align: center;
  background: rgba(0,0,0,.2); border: 2px solid rgba(244,248,255,.18); border-radius: 10px;
  padding: 4px 2px 6px; transition: transform .08s, border-color .12s, background .12s;
}
.cell:hover { transform: translateY(-2px); border-color: var(--edge); background: rgba(255,255,255,.08); }
.cell.on { border-color: var(--gold); background: rgba(255,210,63,.14); }
.cell.locked { cursor: default; opacity: .75; }
.cell.locked:hover { transform: none; border-color: rgba(244,248,255,.18); }
.cell canvas { display: block; margin: 0 auto; }
.cell b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .no { position: absolute; top: 3px; left: 6px; font-size: 11px; color: var(--muted); }
.cell .stars { font-size: 10px; letter-spacing: -1px; }
.cell .partner { position: absolute; top: 3px; right: 5px; font-size: 12px; }

.wide { width: min(980px, 100%); }
.split { display: grid; grid-template-columns: 1fr 300px; gap: 18px; }
.panel {
  background: rgba(0,0,0,.2); border: 2px solid rgba(244,248,255,.2); border-radius: 10px; padding: 14px;
}
.stat { display: grid; grid-template-columns: 90px 1fr 34px; gap: 8px; align-items: center; font-size: 14px; margin: 5px 0; }
.stat .bar { height: 8px; background: rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--gold); }
/* Naturaleza (20-10-2026): el stat que sube en verde y el que baja en rojo. */
.stat.nat-up > span:first-child, .stat.nat-up > span:last-child { color: #7fe8a0; }
.stat.nat-up .bar i { background: #5fe08a; }
.stat.nat-down > span:first-child, .stat.nat-down > span:last-child { color: #ff9aa5; }
.stat.nat-down .bar i { background: #ff7a86; }
/* Naturaleza, habilidad y MT en la ficha de la colección. */
.mon-extra { margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.18); font-size: 14px; }
.mon-extra .mx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0; }
.mon-extra .mx-row > span:first-child { color: var(--muted); min-width: 84px; }
.mon-extra .mx-row small { color: var(--muted); }
.mon-extra .mx-row .btn { margin-left: auto; }
.mon-extra .mx-row .btn + .btn { margin-left: 0; }
.mon-extra .mx-desc { margin: 0 0 6px; font-size: 13px; }
.mon-extra .ban-picker { margin-top: 6px; }
/* The search and the type filter over a grid of Pokémon, and the mark at the end of a grid that
 * draws the next batch when it scrolls near. The old menu collection had them; the Day Care's
 * chooser (ui/hub-ui.js) still does. */
.dex-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dex-tools input, .dex-tools select { background: rgba(0,0,0,.3); color: inherit; border: 2px solid rgba(244,248,255,.3); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 14px; }
.dex-tools input { flex: 1 1 180px; min-width: 0; }
.dex-tools select option { background: #14204a; }
.dex-more { grid-column: 1 / -1; height: 1px; }
.type {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
  color: #10131a; text-shadow: none; margin-right: 4px;
}
.fit-low { display: block; color: #ffb37a; font-size: 12px; margin-top: 2px; }
/* Pausa con el resumen de la partida (run-ui.js, pauseSummary). */
.pause-box { width: min(720px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; }
/* Your team in a run (run-ui.js showTeamView); 27-10-2026: everything bigger, it was hard to read. */
.teamview-box { width: min(1400px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; }
.teamview { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; overflow-y: auto; min-height: 0; padding: 2px; }
.tv-card { background: rgba(0,0,0,.22); border: 2px solid rgba(244,248,255,.2); border-radius: 12px; padding: 14px; text-align: left; }
.tv-card.partner { border-color: #ffd23f; }
/* Type and buff chips here are labels: not a hand cursor, so a pad doesn't stop on them (gamepad.js). */
.tv-card .tv-types .chip, .tv-card .chips .chip { cursor: default; }
.tv-evolve { display: inline-block; margin-top: 4px; padding: 4px 10px; font-size: 12px; }
/* the pause: who can evolve now, on top (ui/run-ui.js showPause) */
.pause-evo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px; }
.pause-evo .tv-evolve { margin-top: 0; }
.tv-head { display: flex; gap: 12px; align-items: center; }
.tv-head b { font-size: 22px; }
.tv-types { margin: 4px 0; }
.tv-types .chip { font-size: 14px; padding: 2px 9px; }
.tv-evo { color: var(--muted); font-size: 15px; }
.tv-abil { margin: 10px 0 8px; font-size: 16px; }
.tv-abil b { color: var(--gold); }
.tv-new { background: #7cc45a; color: #10240c; text-shadow: none; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 1px 6px; border-radius: 6px; }
.tv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.tv-stats div { background: rgba(255,255,255,.06); border-radius: 6px; padding: 4px 8px; display: flex; flex-direction: column; }
.tv-stats small { color: var(--muted); font-size: 13px; }
.tv-stats b { font-size: 17px; }
.tv-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 17px; }
.tv-moves img.pix { width: 24px; height: 24px; }
/* (A bonded group or a bench slot with its button takes the whole row.) */
.tv-moves .tv-move.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv-moves .tv-move.wide .btn { margin-left: auto; padding: 4px 12px; font-size: 15px; }
.tv-main { margin-top: 10px; width: 100%; font-size: 16px; }
/* A move: hover (or tap) for its Move Book page; × forgets it (twice: "Forget?"). */
.tv-mv { cursor: help; border-radius: 6px; padding: 1px 3px; }
.tv-mv:hover, .tv-mv:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.tv-forget { appearance: none; border: 1px solid rgba(255,95,109,.5); background: rgba(255,95,109,.12); color: #ff8a96;
  border-radius: 6px; font: inherit; font-size: 13px; line-height: 1; padding: 2px 6px; margin-left: 4px; cursor: pointer; }
.tv-forget:hover, .tv-forget.sure { background: rgba(255,95,109,.35); color: #fff; }
.tv-pop { position: fixed; z-index: 70; width: min(520px, 92vw); max-height: 86vh; overflow-y: auto; pointer-events: none;
  background: #151b30; border: 2px solid rgba(255,215,90,.35); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.tv-pop .mb-card { margin: 0; }
.tv-pop .mb-stage { width: 100%; height: auto; }
/* End of the run: the TM machine's moves on the left. */
.over-box.with-tm { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.over-tm { text-align: left; background: rgba(0,0,0,.22); border-radius: 10px; padding: 12px; }
.over-tm h3 { margin: 0 0 4px; color: var(--gold); }
.over-tm .sub { margin: 0 0 8px; font-size: 13px; }
.over-tm-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; margin-bottom: 10px; }
.over-tm-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.05); font-size: 15px; }
.over-tm-row small { margin-left: auto; color: var(--muted); font-size: 12px; }
.over-tm-row.owned { opacity: .55; }
.over-tm-row.owned small { color: #ffcb3d; }
.over-tm .btn { width: 100%; }
@media (max-width: 720px) { .over-box.with-tm { grid-template-columns: 1fr; } }
.tv-item { margin: 6px 0 8px; font-size: 15px; }
.tv-item .sub { margin: 0 0 4px; font-size: 15px; }
.tv-item .row { gap: 6px; }
.tv-item select { background: rgba(0,0,0,.3); color: inherit; border: 2px solid rgba(244,248,255,.3); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 15px; }
.tv-item select option { background: #14204a; }
.pause-sum { text-align: left; margin: 4px 0 10px; }
.pause-sum h3 { color: var(--gold); font-size: 16px; margin: 10px 0 6px; }
.sum-moves { width: 100%; border-collapse: collapse; font-size: 14px; }
.sum-moves td, .sum-moves th { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sum-moves th { font-size: 12px; color: var(--muted); font-weight: 400; }
.sum-moves .num { text-align: right; white-space: nowrap; }
.sum-moves img { vertical-align: -4px; }
.sum-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; font-size: 14px; }
.sum-stats div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.08); padding: 2px 0; }
.sum-stats span { color: var(--muted); }
.sum-stats small { color: var(--muted); font-weight: 400; }
.chip {
  appearance: none; cursor: pointer; padding: 4px 10px; border-radius: 20px;
  background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.25); font-size: 13px;
  text-shadow: 1px 1px 0 var(--shadow);
}
.chip.on { border-color: var(--gold); color: var(--gold); }

/* ---------- A move's dark card ----------
 * Not the Movebook screen any more (that one is in the Routes look, "The Movebook" below): this is the
 * move popup of the team window in a run (ui/run-ui.js, G.MoveBookUI.card) and the Routes tutorial's
 * demos (modes/routes-tut.js, G.MoveBookUI.demo). Leave it as it is: those two have no other look. */
.mb-card { background: rgba(0,0,0,.22); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.mb-card p { margin: 8px 0; }
.mb-head { display: flex; gap: 12px; align-items: center; }
.mb-head h3 { margin: 0 0 4px; }
.mb-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mb-cat { font-size: 12px; padding: 1px 8px; border: 1px solid rgba(244,248,255,.4); border-radius: 10px; }
.mb-scroll { overflow-x: auto; }
.mb-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.mb-table th, .mb-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.mb-table th { color: var(--muted); font-weight: 400; font-size: 12px; }
.mb-table .num { text-align: right; white-space: nowrap; }
.mb-table .chg { color: #7fe08a; }
.mb-table tr.evo td { color: var(--gold); }
.mb-table td.up { color: #ffd27a; min-width: 160px; }
.mb-stage { display: block; width: 100%; max-width: 440px; aspect-ratio: 440 / 170; margin: 6px 0 10px; border-radius: 8px;
  image-rendering: pixelated; background: linear-gradient(#202a3c, #131a26); }
.mb-match { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
/* Tutorial (ui/tutorial.js): the first question, the tips (they pause the run) and the menu tour. */
.tut-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3,6,15,.72); }
.tut-modal.routes-ui { background: repeating-linear-gradient(-60deg, rgba(28,18,54,.86) 0 40px, rgba(42,29,79,.86) 40px 80px); backdrop-filter: blur(3px); }
.tut-card { width: min(560px, 100%); max-height: 90vh; overflow: auto; border-color: var(--gold); }
.tut-modal.routes-ui .tut-card { border-color: transparent; }
.tut-card h3 { margin: 2px 0 8px; }
.tut-label { color: var(--gold); font-size: 13px; letter-spacing: .5px; }
.tut-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.tut-move { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.tut-move b { font-size: 18px; }
.tut-tour { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 65; width: min(560px, 92vw); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 12px 16px; border-radius: 12px;
  background: rgba(16,24,48,.95); border: 3px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.6); text-shadow: 2px 2px 0 var(--shadow); }
.tut-tour b { color: var(--gold); font-size: 13px; letter-spacing: .5px; }
.tut-tour span { font-size: 15px; line-height: 1.35; }
.tut-hl { outline: 3px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 22px rgba(255,210,63,.7); position: relative; z-index: 2; }
.mb-match .sub { margin: 0 4px 0 0; }

.topbar {
  position: fixed; top: 14px; right: 16px; z-index: 25;
  display: flex; gap: 10px; align-items: center;
}
.pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 30px;
  background: rgba(10,20,50,.85); border: 2px solid var(--edge);
  box-shadow: 0 0 0 2px var(--edge-out);
  font-weight: 700; text-shadow: 2px 2px 0 var(--shadow);
}
.coin {
  display: inline-block; width: 18px; height: 18px; vertical-align: -3px;
  background: var(--ico-coin) no-repeat center / contain; image-rendering: pixelated;
}
.credits-line {
  position: fixed; left: 14px; bottom: 10px; z-index: 25; font-size: 12px; color: rgba(185,203,240,.7);
  text-shadow: 1px 1px 0 #000;
}

/* ---------- gacha ---------- */
.banner {
  position: relative; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,210,63,.35), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(196,123,255,.35), transparent 50%),
    linear-gradient(135deg, #3a1d6e, #1b2f78 55%, #0f4d6e);
  border: 2px solid rgba(244,248,255,.4);
  padding: 18px;
}
.banner h3 { font-size: 28px; color: var(--gold); text-shadow: 3px 3px 0 #2a0f55; }
.banner .feat {
  /* Debajo del texto, nunca encima: los legendarios a ×2 son grandes. */
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  margin: 8px -10px -18px; height: 190px; overflow: hidden;
}
.banner .feat canvas { flex: 0 0 auto; }
.rates { font-size: 14px; }
.rates div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(244,248,255,.15); }

#pull-fx {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; gap: 18px; padding: 14px 10px;
  /* Si las 10 cartas no caben (móvil en horizontal) se puede desplazar, y
     "Continuar" se queda siempre a la vista abajo (antes quedaba fuera y no
     había forma de cerrar sin recargar la página). */
  overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(circle at 50% 45%, #1b2d63, #03060f 70%);
}
/* Centrado vertical que no corta por arriba cuando no cabe. */
#pull-fx::before, #pull-fx::after { content: ''; margin: auto; }
#pull-close, #pull-skip { position: sticky; bottom: 8px; z-index: 2; flex-shrink: 0; box-shadow: 0 4px 18px rgba(0,0,0,.6); }
/* La ×100: cartas más pequeñas y un resumen arriba. */
.pull-results.many { gap: 6px; max-width: 1100px; }
.pull-results.many .pcard { width: 104px; padding: 5px 3px; border-radius: 10px; border-width: 2px; box-shadow: 0 0 10px var(--rc, #fff); }
.pull-results.many .pcard canvas { width: 88px; height: auto; }
.pull-results.many .pcard b { font-size: 12px; }
.pull-results.many .pcard .tag { font-size: 10px; }
.pull-results.many .pcard .stars { font-size: 11px; }
.pull-sum { flex: 0 0 100%; text-align: center; font-size: 16px; color: var(--gold); }
@media (max-height: 520px) {
  #pull-fx { gap: 10px; }
  .pull-results { gap: 6px; }
  .pcard { width: 100px; padding: 5px 3px; border-radius: 10px; }
  .pcard canvas { width: 84px; height: auto; }
  .pcard b { font-size: 12px; }
  .pcard .tag { font-size: 10px; }
  .pcard .stars { font-size: 11px; }
}
#pull-fx.hidden { display: none; }
.ball {
  width: 120px; height: 120px; border-radius: 50%; position: relative;
  background: linear-gradient(180deg, #ff4d4d 0 47%, #1a1a1a 47% 53%, #f4f4f4 53% 100%);
  border: 5px solid #1a1a1a;
  box-shadow: 0 0 0 0 var(--glow, #fff);
}
.ball::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #f4f4f4; border: 5px solid #1a1a1a;
}
.ball.drop { animation: drop .55s cubic-bezier(.3,1.6,.6,1) both; }
.ball.shake { animation: shake .45s ease-in-out 3; }
.ball.burst { animation: burst .45s ease-out forwards; }
@keyframes drop { from { transform: translateY(-60vh) rotate(-200deg); } to { transform: none; } }
@keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
@keyframes burst {
  0% { box-shadow: 0 0 0 0 var(--glow); }
  60% { box-shadow: 0 0 80px 40px var(--glow); transform: scale(1.15); }
  100% { box-shadow: 0 0 200px 120px transparent; transform: scale(0); opacity: 0; }
}
/* Mensaje de apoyo al acabar una partida (run-ui.js). */
  background: rgba(255,210,63,.08); border: 2px solid rgba(255,210,63,.45); }
.pull-results { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; }
.iris-get { flex: 0 0 100%; box-sizing: border-box; display: flex; justify-content: center; gap: 12px; align-items: center; text-align: left; padding: 10px 14px;
  border: 2px solid var(--gold); border-radius: 12px; background: rgba(255,210,63,.12); animation: pop .5s ease-out; }
.iris-get b { color: var(--gold); font-size: 16px; }
.pcard {
  width: 150px; padding: 10px 6px; text-align: center; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.3));
  border: 3px solid var(--rc, #fff);
  box-shadow: 0 0 22px var(--rc, #fff);
  animation: pop .3s ease-out both;
  text-shadow: 2px 2px 0 var(--shadow);
}
.pcard .stars { color: var(--rc); font-size: 14px; }
.pcard b { display: block; font-size: 16px; }
.pcard .tag { font-size: 12px; margin-top: 2px; }
.pcard .new { color: var(--gold); font-weight: 700; }
.pcard .pmon { font-size: 11px; color: var(--muted); line-height: 1.2; }
.pcard.tmcard { width: 220px; }
.pcard .tm-move { margin: 8px 0 6px; }

/* ---------- Kecleon Shop: Kecleon's speech bubble and what you buy flying to the bag ----------
 * (20-10-2026; the pixel-art stall went with the Routes look, 04-11-2026: the screen
 * itself is at the end of this file, under "The menu screens".) */
.pcard.r5 { animation: pop .3s ease-out both, legend 1.4s ease-in-out infinite alternate; }
@keyframes legend { to { box-shadow: 0 0 40px var(--rc), 0 0 80px var(--rc); } }

/* ---------- trainer portraits and the NEW label (ui/trainer-ui.js; the chooser
     itself is in "The entry flow in the Routes look", at the end of this file) ---------- */
.tr-portrait { display: block; image-rendering: pixelated; background-repeat: no-repeat; }
.tr-new { background: #7cc45a; color: #10240c; text-shadow: none; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 1px 6px; border-radius: 6px; animation: tr-pulse 1.2s ease-in-out infinite; }
@keyframes tr-pulse { 50% { opacity: .55; } }

/* ---------- cartas de nivel ---------- */
.cards { display: flex; flex-direction: column; gap: 10px; width: min(560px, 100%); }
.card {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: rgba(0,0,0,.2); border: 2px solid rgba(244,248,255,.3); border-radius: 12px;
  padding: 12px 14px; transition: transform .08s, background .12s, border-color .12s;
}
.card:hover { background: rgba(255,255,255,.1); border-color: var(--edge); transform: translateX(4px); }
.card .ico { flex: 0 0 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; }
.card .txt { flex: 1; }
.card .nm { font-weight: 700; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card .ds { color: var(--muted); font-size: 14px; }
/* Whose level-up card it is (run-ui.js): your partner gold, a teammate green. */
.card .who { flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: 9px; padding: 3px 2px; background: rgba(0,0,0,.25); border: 2px solid var(--who); }
.card .who canvas { display: block; image-rendering: pixelated; }
.card .who span { font-size: 10px; font-weight: 700; color: var(--who); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name fits (a wider portrait column on phones); a very long one wraps onto a second line
   instead of "Butterf…" (playtest 2-11-2026). */
.card .who span { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card.for-me { --who: #ffd23f; }
.card.for-trainer { --who: #7fb6ff; }
.card .who .trainer-ico { width: 56px; height: 54px; display: grid; place-items: center; }
@media (max-height: 520px) { .card .who .trainer-ico { width: 32px; height: 31px; } .card .who .trainer-ico img { width: 20px; height: 20px; } }
.card.for-mate { --who: #7cc45a; box-shadow: inset 4px 0 0 #7cc45a; }
/* The box took the width of the longest description while the cards stopped at 560px (empty space on the right). */
#scr-levelup .box, #scr-team .box { width: min(640px, 100%); }
#scr-levelup .cards, #scr-team .cards { width: 100%; }
/* Wave runs: the shops and the move tutor in the hub (ui/hub-shop.js). */
.shop-box { width: min(620px, 100%); }
.shop-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 10px; }
.shop-wallet { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.shop-bag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.shop-k { color: #9fb1c9; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; }
.shop-ball { display: inline-flex; align-items: center; gap: 2px; }
.shop-slot { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: rgba(255, 255, 255, 0.07); border: 1px solid #2c3d5c; }
.shop-slot.empty { opacity: 0.45; }
.shop-h { margin: 10px 0 6px; font-size: 14px; color: #ffd23f; }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shop-it { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); }
.shop-txt { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.shop-txt small { color: #9fb1c9; }
.shop-buy, .tutor-buy { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.shop-none { color: #9fb1c9; font-size: 13px; padding: 4px 8px; }
.shop-ask { margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px dashed rgba(255, 210, 63, 0.7); background: rgba(255, 210, 63, 0.08); }
.shop-ask p { margin: 0 0 8px; }
.shop-who { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.shop-mon { display: grid; justify-items: center; gap: 2px; padding: 6px 8px; min-width: 90px; border-radius: 9px; border: 1px solid #2c3d5c; background: rgba(10, 18, 34, 0.75); color: inherit; cursor: pointer; font: inherit; }
.shop-mon:hover { border-color: #ffd23f; }
.shop-mon small { color: #9fb1c9; font-size: 11px; }

/* Wave runs: the Pokémon whose level-up it is, beside its cards (run-ui.js monPanel / monStats). */
#scr-levelup .box:has(.lvl-mon:not(.hidden)) { width: min(900px, 100%); }
.lvl-wrap { display: flex; gap: 14px; align-items: flex-start; width: 100%; }
.lvl-wrap .cards { flex: 1; min-width: 0; }
.lvl-mon { flex: 0 0 250px; text-align: left; background: rgba(10, 18, 34, 0.75); border: 2px solid #2c3d5c; border-radius: 12px; padding: 10px 12px; }
.lm-head { display: flex; align-items: center; gap: 8px; }
.lm-head b { display: block; font-size: 16px; }
.lm-head small { color: #9fb1c9; }
.lm-stats { margin: 8px 0; display: grid; gap: 3px; }
.lm-stats div { display: flex; justify-content: space-between; padding: 2px 6px; border-radius: 6px; }
.lm-stats dt { color: #9fb1c9; }
.lm-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.lvl-mon .lm-on { background: rgba(255, 210, 63, 0.16); outline: 1px solid rgba(255, 210, 63, 0.55); }
.lvl-mon em { font-style: normal; color: #ffd23f; font-weight: 700; }
.lvl-mon i { font-style: normal; color: #9fb1c9; }
.lm-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lm-slots li { display: grid; gap: 1px; padding: 4px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.lm-slots li.empty { opacity: 0.55; }
.lm-slots li.lm-new { background: rgba(255, 210, 63, 0.16); outline: 1px dashed rgba(255, 210, 63, 0.7); }
.lm-slots .slot-k { font-size: 11px; color: #9fb1c9; text-transform: uppercase; letter-spacing: 0.04em; }
.lm-mv { display: grid; gap: 2px; font-size: 13px; }
.lm-mv > span { display: flex; align-items: center; gap: 5px; border-radius: 5px; padding: 1px 3px; }
.lm-mv small { color: #9fb1c9; }
.lm-note { margin: 6px 0 0; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.lm-hint { margin: 6px 0 0; font-size: 12px; color: #9fb1c9; min-height: 1em; }
@media (max-width: 720px) {
  /* stacked over the cards: picture and stats on the left, the slots on the right */
  .lvl-wrap { flex-direction: column; align-items: stretch; gap: 8px; }
  .lvl-mon { flex: none; display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 12px; padding: 8px 10px; }
  .lvl-mon .lm-body { display: contents; }
  .lm-head, .lm-stats { grid-column: 1; }
  .lm-stats { margin: 4px 0 0; }
  .lm-slots { grid-column: 2; grid-row: 1 / span 2; gap: 2px; }
  .lm-slots li { padding: 2px 6px; }
  .lm-note, .lm-hint { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .lvl-mon { grid-template-columns: 1fr; }
  .lm-slots { grid-column: 1; grid-row: auto; margin-top: 4px; }
}
/* Phones in landscape: a small portrait, so the three cards still fit. */
@media (max-height: 520px) {
  .card { padding: 6px 10px; gap: 10px; }
  .card .who { flex-basis: 64px; padding: 1px; gap: 0; }
  .card .who canvas { width: 32px; height: 31px; }
  .card .who span { font-size: 9px; max-width: 62px; letter-spacing: -.3px; }
  .card .ico { flex-basis: 38px; height: 38px; }
}
.card .key { font-size: 13px; color: var(--muted); border: 2px solid rgba(244,248,255,.3); border-radius: 6px; padding: 2px 8px; }
.tag-chip { font-size: 11px; padding: 2px 7px; border-radius: 5px; color: #10131a; text-shadow: none; font-weight: 700; }
/* Físico / Especial en las cartas de nivel: aparte del tipo, oscura y con borde. */
.tag-chip.cat { background: rgba(10,20,48,.55); color: #f4f8ff; border: 1.5px solid rgba(170,195,255,.5); padding: 1px 7px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 18px; }
.stats > div { background: rgba(0,0,0,.22); border-radius: 9px; padding: 8px 10px; }
.stats > div > span:first-child { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.stats b { font-size: 22px; }

kbd {
  display: inline-block; padding: 0 6px; border: 2px solid rgba(244,248,255,.4); border-bottom-width: 3px;
  border-radius: 5px; font: inherit; font-size: 13px; text-shadow: none;
}

.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 60;
  padding: 10px 18px; border-radius: 10px;
  background: rgba(10,20,50,.95); border: 2px solid var(--edge);
  text-shadow: 2px 2px 0 var(--shadow); animation: pop .2s ease-out;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(244,248,255,.3); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 760px) and (min-height: 521px) {
  .split { grid-template-columns: 1fr; }
  .logo .t1 { font-size: 34px; }
}

/* ============ iconos pixel art ============ */
img.pix { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }
img.pix.smooth { image-rendering: auto; }     /* a move's icon drawn smaller than its 32 px (ui/icons.js) */
img.pix.off { filter: grayscale(1); opacity: .4; }
.stars-row { display: inline-flex; gap: 1px; vertical-align: middle; }
.cell .stars-row { display: flex; justify-content: center; margin-top: 2px; }
.badge-r { position: absolute; top: 3px; right: 4px; }
.card .ico img { display: block; }

/* ============ pestañas de generación ============ */
.gen-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 4px 2px 8px; margin-top: 6px; }
.gen-tab {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  padding: 6px 12px; border-radius: 9px;
  background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.22);
  text-shadow: 2px 2px 0 var(--shadow);
}
.gen-tab b { font-size: 15px; }
.gen-tab small { font-size: 11px; color: var(--muted); }
.gen-tab:hover { border-color: var(--edge); }
.gen-tab.on { border-color: var(--gold); background: rgba(255,210,63,.14); }
.gen-tab.on b { color: var(--gold); }

/* ============ normal / shiny ============ */
.seg { display: flex; justify-content: center; gap: 0; margin: 2px auto 8px; width: max-content;
  border: 2px solid rgba(244,248,255,.35); border-radius: 9px; overflow: hidden; }
.seg button { appearance: none; cursor: pointer; background: rgba(0,0,0,.25); border: 0;
  padding: 5px 14px; font-size: 14px; display: flex; gap: 5px; align-items: center;
  text-shadow: 2px 2px 0 var(--shadow); }
.seg button.on { background: rgba(154,230,255,.22); color: #c9f3ff; }
.pcard.shiny { animation: pop .3s ease-out both, legend 1.1s ease-in-out infinite alternate; }
.caught > span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.caught-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.caught-row > div { text-align: center; }
.caught-row small { display: block; font-size: 12px; color: #c9f3ff; }

/* ============ sonido ============ */
.sound-panel { position: fixed; top: 62px; right: 16px; z-index: 30; width: 270px; padding: 14px 16px; }
.sound-inline { margin: 6px auto 16px; max-width: 320px; }
.snd-row { display: grid; grid-template-columns: 20px 64px 1fr; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 14px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px;
  background: rgba(0,0,0,.4); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 4px;
  background: var(--gold); border: 2px solid #fff7d6; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 4px; background: var(--gold); border: 2px solid #fff7d6; }
#btn-sound { padding: 5px 9px; display: flex; }

/* ============ nube, aviso legal ============ */
.btn.google { background: linear-gradient(180deg, #ffffff, #dfe6f2); color: #1f2a44; text-shadow: none; }
.sync { display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 2px;
  box-shadow: 0 0 0 2px #0b1838; vertical-align: 1px; }
.sync.ok { background: #5fe08a; }
.sync.syncing, .sync.pending { background: #ffd23f; }
.sync.offline { background: #ff5f6d; }
.sync.local { background: #9fb1c9; }
.sync.guest { display: none; }
.legal-link { color: var(--muted); }
.legal-link:hover { color: #fff; }
.credits-line a { color: inherit; }
.legal h3 { margin: 14px 0 4px; color: var(--gold); font-size: 17px; }
.legal p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.legal a { color: #9fd4ff; }
#scr-legal { z-index: 65; }   /* por delante de Ajustes y Apoyar (60) */
.boot { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: #050914; color: var(--muted); font-size: 18px; }

/* ---------- amigos, sala, invitaciones y ranking ---------- */
/* (Friends, the party and your nickname are in the Routes look since 05-11-2026: their styles
    are at the end of this file, with the other menu screens. Only .dot is left here, and the
    place an invitation sits in.) */
.dot { width: 10px; height: 10px; border-radius: 2px; background: #6b7a94; flex: 0 0 10px; }
.dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.play { background: var(--gold); }
.dot.pend { background: var(--r4); }

.invite-pop {
  position: fixed; right: 18px; bottom: 54px; z-index: 70; width: min(340px, calc(100% - 32px));
  padding: 14px 16px; animation: pop .2s ease-out;
}
.invite-pop img { vertical-align: middle; }

.rk-tools { gap: 8px; margin-bottom: 8px; }
.rk-tools .field { width: 220px; padding: 6px 10px; font-size: 15px; }
.rk-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.rk-row {
  display: grid; grid-template-columns: 54px auto 1fr auto 26px; gap: 10px; align-items: center;
  padding: 4px 12px; border-radius: 8px; background: rgba(0,0,0,.2); border: 2px solid transparent;
}
.rk-row .pos { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rk-row.top1 .pos { color: var(--gold); }
.rk-row.top2 .pos { color: #dfe7f5; }
.rk-row.top3 .pos { color: #e0a36b; }
.rk-row .mons { display: flex; }
.rk-row .who { display: flex; flex-direction: column; min-width: 0; }
.rk-row .who b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .who small { color: var(--muted); font-size: 12px; }
.rk-row .time { font-size: 22px; font-weight: 700; color: #fff; }
.rk-row.mine { border-color: var(--gold); background: rgba(255,210,63,.1); }
.rk-rep { background: none; border: 0; padding: 4px; cursor: pointer; opacity: .35; line-height: 0; }
.rk-rep:hover { opacity: 1; }
.rk-rep.sent { opacity: .12; cursor: default; }
.rk-row.mod-row { grid-template-columns: 54px 1fr auto; }
.rk-row.mod-row.rep { grid-template-columns: 54px auto 1fr auto auto; }
.mod-warn { color: #ff8a96 !important; }
.mod-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Dos mitades (23-10-2026): daño a Arceus a la izquierda y tiempo a la derecha (en el móvil, una debajo de otra). */
#scr-rank .box.wide { width: min(1240px, 100%); }
.rk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rk-col { min-width: 0; display: flex; flex-direction: column; }
.rk-h { margin: 2px 0 6px; font-size: 17px; color: var(--gold); }
.rk-split .rk-row { grid-template-columns: 46px auto 1fr auto 26px; gap: 8px; padding: 4px 8px; }
.rk-split .rk-row .time { font-size: 19px; }
.rk-me { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.25); font-size: 15px; min-height: 20px; }

.cards.done .card { pointer-events: none; opacity: .45; }
/* Recién aparecidas: un momento sin poder elegirlas (ver guard() en run-ui.js). */
.cards.guard .card { opacity: .5; filter: saturate(.6); }
.cards .card { transition: transform .08s, background .12s, border-color .12s, opacity .2s, filter .2s; }
.cards.done .card.picked { opacity: 1; border-color: var(--gold); }
#lvl-wait { color: var(--gold); font-size: 15px; }

@media (max-width: 760px) {
  .lobby-members { grid-template-columns: repeat(2, 1fr); }
  .rk-row, .rk-split .rk-row { grid-template-columns: 40px auto 1fr auto 22px; gap: 6px; }
  .rk-split { grid-template-columns: 1fr; }
  .rk-split .rk-list { max-height: 38vh; }
}

/* ---------- tickets y mejoras por Pokémon ---------- */
.tickets-line img, #tickets-pill img, #cost-10 img, #cost-10b img, #cost-100 img, #cost-100b img { vertical-align: middle; }
select.field { font-family: var(--font); }

/* ---------- tragaperras del gacha ---------- */
#slot { width: min(528px, 92vw, 66vh); height: auto; image-rendering: pixelated; cursor: pointer;
  filter: drop-shadow(0 0 30px rgba(255,90,90,.35)); animation: pop .25s ease-out both; }

/* ---------- missions, achievements and the profile ----------
 * The screens themselves are at the end of this file, under "The menu screens"
 * (the Routes look, 04-11-2026); here only what the rest of the game shares. */
.m-rw, .a-rw { font-size: 13px; color: var(--ink); }
.m-rw img, .a-rw img, .tag-chip img { vertical-align: middle; }
.leg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.leg-cell { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.25); border: 2px solid transparent; }
.leg-cell.ok { border-color: rgba(255,210,63,.5); }
.leg-cell small { font-size: 10px; color: var(--muted); text-align: center; }
a.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(244,248,255,.4); }
a.plink:hover { color: var(--gold); }
#user-pill { cursor: pointer; }
/* An achievement: on the right edge, above the bottom bar, out of the way of the play area (02-11-2026: it was
   top centre, over the route's clock and goal) */
.ach-pop {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); top: 64px; z-index: 80;
  display: flex; gap: 10px; align-items: center; padding: 10px 16px; animation: ach-in .25s ease-out;
  border-color: var(--gold) !important;
  pointer-events: none;            /* (never in the way of a tap) */
}
@keyframes ach-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ach-pop { animation: none; } }
.ach-pop b { display: block; color: var(--gold); }
.ach-pop small { color: var(--muted); }
.card.evo { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,210,63,.18), rgba(255,210,63,.04)); }
.card.evo .nm { color: var(--gold); }
/* Routes: rare (purple) and golden cards (systems/levelup.js rarity) */
.card.r-rare { border-color: #9b7bff; background: linear-gradient(90deg, rgba(155,123,255,.2), rgba(155,123,255,.04)); }
.card.r-golden { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,210,63,.24), rgba(255,210,63,.05)); box-shadow: 0 0 0 2px rgba(255,210,63,.35); }
.card.r-golden .nm { color: var(--gold); }
.routes-ui .card.r-rare { background: linear-gradient(90deg, #e6dcff, #fff 70%); }
.routes-ui .card.r-golden { background: linear-gradient(90deg, #fff1a8, #fff 70%); }
.routes-ui .card.r-golden .nm { color: #9a6a00; }
/* Vínculo (premio de los legendarios): rosa */
.bond-title { color: #ff8ad8; }
.card.bond { border-color: #ff8ad8; background: linear-gradient(90deg, rgba(255,138,216,.18), rgba(255,138,216,.04)); }
.card.bond .nm { color: #ff8ad8; }
@media (max-height: 520px) {
  #scr-bond .bond-hint { display: none; }
  #scr-bond .box { width: min(820px, 100%); }
  #bond-cards { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}

/* ================= móvil y táctil ================= */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body { touch-action: manipulation; }
/* iPhone: sin esto, mantener el dedo en el joystick sacaba "Copiar / Seleccionar
   todo" (Safari sólo hace caso a la versión -webkit- y no lo hereda bien). */
body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Con táctil no tienen sentido las pistas de teclas. */
body.touch kbd, body.touch .card .key, body.touch .kbd-hint { display: none !important; }
/* Nor with a pad (core/input.js via; Settings keeps them: it explains the keys). Its buttons instead. */
body.via-pad .scr:not(#scr-settings) kbd, body.via-pad .card .key, body.via-pad .kbd-hint { display: none !important; }
.pad-hint { display: none; }
body.via-pad .pad-hint { display: inline; }
#rotate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 10, 30, .94);
}
#rotate.hidden { display: none; }
#rotate .box { max-width: 320px; }
#rotate-ico { animation: rot-hint 1.6s steps(4) infinite; display: inline-block; }
@keyframes rot-hint { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }

/* ---------- ajustes ---------- */
#scr-settings { z-index: 60; }
/* Colocar los botones (layout-ui.js): por delante de Ajustes */
#scr-layout { z-index: 66; display: block; touch-action: none;
  background: repeating-linear-gradient(-60deg, #2a1d4f 0 40px, #301f5c 40px 80px); }
#scr-layout.hidden { display: none; }
.lay-thing { position: absolute; z-index: 2; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.lay-thing.held { cursor: grabbing; filter: drop-shadow(0 0 8px rgba(255,210,63,.8)); }
.lay-thing.hidden { display: none; }
.lay-bar { display: flex; gap: 9px; }
.lay-slot { position: relative; width: 54px; height: 54px; flex: none; border-radius: 12px; background: rgba(10,16,28,.8); border: 1.2px solid rgba(140,170,210,.4); }
.lay-slot.on { border: 2.5px solid var(--gold); }
.lay-slot.item { margin-right: 9px; background: rgba(10,16,28,.55); }
.lay-slot i { position: absolute; left: 4px; top: 2px; font-style: normal; font-size: 10px; color: rgba(180,200,230,.7); }
.lay-tag { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: 11px; color: var(--gold); white-space: nowrap; pointer-events: none; }
.lay-pause { border-radius: 10px; background: rgba(10,16,28,.7); border: 2px solid rgba(244,248,255,.8); box-sizing: border-box; }
.lay-pause b { position: absolute; top: 9px; width: 5px; height: 18px; background: #f4f8ff; }
.lay-pause b:first-child { left: 11px; } .lay-pause b:last-child { left: 20px; }
.lay-stick { border-radius: 50%; background: rgba(10,20,48,.3); border: 3px solid rgba(244,248,255,.6); box-sizing: border-box; }
.lay-stick .knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,210,63,.85); border: 3px solid #a55f00; box-sizing: border-box; }
/* (centred with margins, not with a transform: .routes-ui .box animates its transform on open
   and that threw the panel off to one side, 05-11-2026) */
.lay-panel { position: absolute; left: 0; right: 0; top: 26%; margin: 0 auto; width: min(360px, calc(100% - 32px)); padding: 12px 16px 14px; text-align: center; opacity: .96; }
.lay-panel h3 { margin: 0 0 8px; }
#lay-mode { justify-content: center; margin: 0 auto 2px; width: max-content; }
.lay-help { display: block; color: var(--pd-lilac, #c9bdf0); font-size: 11px; margin-top: 6px; line-height: 1.3; }
.lay-turn { color: var(--pd-y, #f8d030); font-size: 13px; margin: 4px 0 8px; }
.lay-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
/* (Settings has the Routes look of its own; its rules are in the menu-screens section below.) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.set-chips { margin: 6px 0 10px; }
/* Lo seleccionado con el mando (gamepad.js). */
.pad-focus { outline: 3px solid #ffd23f !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255,210,63,.25) !important; }
.btn.danger { background: #8a1f2e; border-color: #ff8a96; }
.row.wrap { flex-wrap: wrap; }
.touch-hint { display: none; }
body.touch .touch-hint { display: block; }
#pause-sound + .row, #scr-pause .row { flex-wrap: wrap; }
a.btn { text-decoration: none; display: inline-block; color: var(--ink); }

/* ================= pantallas bajas (móvil en horizontal) =================
 * Todo más compacto: la barra superior deja sitio, el menú va en dos
 * columnas y la línea de créditos se esconde (está en Ajustes → Acerca de). */
@media (max-height: 520px) {
  .scr { padding: 50px 10px 6px; }
  /* Sin barra superior encima: no hace falta dejarle hueco. */
  #scr-login, #scr-test, #scr-result, #scr-starters, #scr-nick, #scr-levelup, #scr-pause,
  #scr-over, #scr-item, #scr-settings, #scr-legal, #scr-profile { padding: 6px 10px; }
  .split { grid-template-columns: 1fr; }
  .logo .t1 { font-size: 30px; }
  .box { padding: 10px 14px; border-radius: 10px; }
  .box h2 { font-size: 20px; }
  .box h3 { font-size: 16px; }
  .sub { font-size: 13px; margin-bottom: 8px; }
  .note { margin-top: 8px; font-size: 12px; }
  .btn { padding: 7px 14px; }
  .btn.small { padding: 4px 9px; font-size: 13px; }
  .topbar { top: 5px; right: 6px; gap: 5px; }
  .pill { padding: 2px 8px; font-size: 13px; gap: 5px; }
  #user-pill { max-width: 130px; overflow: hidden; white-space: nowrap; }
  .topbar .btn.small { padding: 2px 6px; }
  .credits-line { display: none !important; }
  .sound-panel { top: 40px; }

  /* At the top, small: at the bottom it covered Throw, the balls and the Active buttons for
     seconds (playtest 2-11-2026). */
  .ach-pop { top: 4px; padding: 4px 10px; gap: 6px; font-size: 12px; max-width: min(60vw, 420px); }
  .ach-pop small { font-size: 10px; }
}
/* ---------- pantalla de carga (lo primero que se ve y lo que lee Google) ---------- */
.boot-in { text-align: center; padding: 20px; max-width: 640px; }
.boot-in h1 { margin: 0 0 8px; font-size: clamp(38px, 8vw, 64px); color: var(--gold); text-shadow: 3px 3px 0 #a55f00, 6px 6px 0 var(--shadow); font-weight: 700; }
.boot-in p { margin: 6px 0; color: var(--muted); }
.boot-in a { color: #9fd4ff; }
.boot-ld { color: #fff; margin-top: 18px !important; }
.boot.noscript { z-index: 90; }
/* "Pulsa para empezar": encima de todo, se ve el mundo de fondo. */
.tapstart { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(5,9,20,.35), rgba(5,9,20,.8)); animation: fade .4s; }
.tapstart .boot-in p { color: #dfe7ff; text-shadow: 2px 2px 0 #000; }
.tap-blink { color: #fff !important; font-size: 20px; margin-top: 22px !important; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.login-tag { margin: -6px 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
.login-official { margin: -6px 0 12px; font-size: 12px; color: var(--muted); text-align: center; opacity: .85; }
/* A phone on its side: the login in two columns, so "Play as guest" fits on the screen without
   scrolling (playtest 2-11-2026: the panel was taller than the 390 px screen). */
@media (max-height: 520px) and (min-width: 640px) {
  #scr-login .login-box { width: min(780px, 100%) !important; display: flex; gap: 18px; align-items: center; }
  #scr-login .login-side { flex: 0 0 42%; }
  #scr-login .login-main { flex: 1; min-width: 0; }
  #scr-login .login-tag, #scr-login .login-official { margin: 8px 0; }
  #scr-login .tabs { margin-bottom: 6px; }
  #scr-login .field { padding-top: 6px; padding-bottom: 6px; }
  #scr-login .err:empty { display: none; }
  #scr-login .note { margin-top: 2px; font-size: 11px; }
  #scr-login .login-main > .row { margin-top: 6px !important; }
}

.login-links { margin-top: 10px; font-size: 13px; text-align: center; }
.login-links a { color: #9fd4ff; }

/* ---------- apoyar el proyecto ---------- */
#scr-support { z-index: 60; }
/* The Pokédex card's pickers (start move, nature, ability) */
.ban-picker { grid-column: 1 / -1; }
.ban-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.ban-moves .chip { display: inline-flex; align-items: center; gap: 5px; }
/* What's new: the top bar's button (its window is .nw-* in the menu screens below) */
.news-btn { position: relative; }
.news-btn .dot { display: none; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; background: #ff5f6d; box-shadow: 0 0 0 2px var(--shadow); }
.news-btn.new .dot { display: block; }
@media (max-width: 760px) { .news-btn span { display: none; } }
/* YouTube (en directo: rojo y con un punto que late). */
/* Botón Guardar (barra de arriba). */
#savenote-body p { line-height: 1.4; }
/* The Settings tabs on a landscape phone: one row that slides sideways. */
@media (max-height: 520px) {
  #set-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #set-tabs::-webkit-scrollbar { display: none; }
  #set-tabs .gen-tab { flex: 0 0 auto; }
}

/* Local CJK fonts: no font service or additional downloads. */
html:lang(zh-Hant) { --font: 'Pixelify', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', system-ui, sans-serif; }
html:lang(zh-Hans) { --font: 'Pixelify', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif; }
html:lang(zh) body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
html:lang(zh) .btn, html:lang(zh) .chip { letter-spacing: 0; }

/* ============ barra de arriba en el móvil en vertical (25-10-2026) ============
 * No cabía en una línea y se salía por la izquierda: justo las monedas, los
 * tickets y el nombre quedaban fuera de la pantalla. Ahora ocupa todo el ancho y
 * pasa a dos líneas (las monedas siempre a la vista), con botones más compactos;
 * lo que empieza debajo de ella baja lo que haga falta. */
@media (max-width: 600px) {
  .topbar { left: 6px; right: 6px; top: 6px; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar .pill { padding: 3px 8px; font-size: 13px; gap: 4px; }
  .topbar .btn.small { padding: 3px 5px; }
  #user-pill { max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sound-panel { top: 82px; }
  #scr-goals, #scr-gacha, #scr-friends, #scr-rank, #scr-lobby, #scr-profile, #scr-news, #scr-train { padding-top: 92px; }
}

/* iPhone camera island / notch (27 Oct): in landscape it sits on the left or the
   right. On touch screens the screens, the top bar and the pop-ups keep at least
   the safe area free on both sides (the game's canvas does it in touch.js safeArea). */
body.touch .scr {
  padding-left: max(10px, env(safe-area-inset-left)) !important;
  padding-right: max(10px, env(safe-area-inset-right)) !important;
}
.topbar { right: max(16px, env(safe-area-inset-right)); }
.sound-panel { right: max(16px, env(safe-area-inset-right)); }
.invite-pop { right: max(18px, env(safe-area-inset-right)); }
.credits-line { left: max(14px, env(safe-area-inset-left)); }

/* ---------- Wave runs: hub (Centro Pokémon), map and modes (modes/waves.js) ---------- */
/* PokéSurvivor Routes: its home screen (ui/routes-home.js, routes.html). */
.routes-box { width: min(560px, 100%); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.routes-box .logo { margin-bottom: 0; }
.routes-box .logo .t2 { color: #b6ff7a; }
.routes-box .sub { margin: 0; }
.routes-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.routes-row .btn { flex: 1 1 0; }
.routes-trainer { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.routes-trainer .tr-portrait { border-radius: 10px; background-color: rgba(0,0,0,.25); box-shadow: 0 0 0 2px var(--edge); }
.routes-gold { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.25);
  border: 2px solid rgba(255,210,63,.45); color: var(--gold); font-size: 16px; }
.routes-gold b { font-size: 20px; }
.routes-start { font-size: 22px; padding: 14px; }
.routes-endless { color: var(--muted); font-size: 14px; }
.routes-endless:hover { color: #fff; }
/* A route won (modes/waves.js showVictory): how it went, per Pokémon and per move. */
.vic-ov { align-items: center; background: radial-gradient(circle at 50% 40%, rgba(255,246,200,.18), rgba(6,8,18,.8)); }
.vic-box { width: min(760px, 100%); max-height: 92vh; overflow-y: auto; }
.vic-head { text-align: center; margin-bottom: 10px; }
.vic-head h2 { margin: 0; font-size: 30px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--shadow); }
.vic-head p { margin: 2px 0 0; color: #c9d6f2; }
.vic-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.vic-stats > div { background: rgba(0,0,0,.25); border-radius: 10px; padding: 8px; text-align: center; }
.vic-stats span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.vic-stats b { display: inline-flex; align-items: center; gap: 4px; font-size: 20px; }
.vic-party { display: grid; gap: 8px; }
.vic-mon { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: center; background: rgba(0,0,0,.18); border-radius: 10px; padding: 6px 10px; }
.vic-who { display: flex; align-items: center; gap: 8px; }
.vic-who b { display: block; font-size: 16px; }
.vic-who small { color: var(--muted); }
.vic-who em { color: #7cff8a; font-style: normal; }
.vic-mv { display: grid; grid-template-columns: 24px 130px 1fr 64px; gap: 6px; align-items: center; font-size: 13px; margin: 2px 0; }
.vic-mv i { height: 8px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; }
.vic-mv u { display: block; height: 100%; text-decoration: none; }
.vic-mv b { text-align: right; }
@media (max-width: 640px) { .vic-stats { grid-template-columns: repeat(2, 1fr); } .vic-mon { grid-template-columns: 1fr; } }
/* Between routes: every Pokémon's four move slots (ui/hub-ui.js renderSlots). */
.slots-box { width: min(820px, 100%); }
.slots-party { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
.slots-mon { background: rgba(0,0,0,.18); border-radius: 10px; padding: 8px 10px; }
.slots-who { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.slots-who b { display: block; font-size: 16px; }
.slots-who small { color: var(--muted); }
.slots-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.slot { display: grid; grid-template-columns: 86px 1fr auto auto; gap: 6px; align-items: center; padding: 3px 6px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 2px solid rgba(244,248,255,.12); }
.slot.s0 { border-color: rgba(124,196,90,.7); }
.slot.s1 { border-color: rgba(255,210,63,.55); }
.slot.s2 { border-color: rgba(255,154,61,.45); }
.slot.s3 { opacity: .7; }
.slot.empty { opacity: .45; }
.slot-k { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.slot.s0 .slot-k { color: #7cc45a; }
.slot-mv { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.slot-mv small { color: var(--muted); }
.slot .btn.small { padding: 2px 8px; }
.hub-ov {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-start; justify-content: center;
  padding: 3vh 12px; overflow-y: auto; background: rgba(6,8,18,.72); backdrop-filter: blur(3px);
  animation: fade .18s ease-out;
}
.hub-box {
  position: relative; width: min(860px, 100%); padding: 18px 20px 16px; border-radius: 16px;
  background: linear-gradient(180deg, var(--box1), var(--box2));
  border: 3px solid var(--edge); box-shadow: 0 0 0 3px var(--edge-out), inset 0 0 0 2px var(--edge-in), 0 18px 60px rgba(0,0,0,.6);
}
.hub-pick { z-index: 58; }
.hub-panel .hub-box { width: min(680px, 100%); margin-top: 4vh; }   /* the PC and the Move Tutor (modes/hub-scene.js) */
/* The Day Care window (ui/hub-ui.js openDaycare): the Pokédex grid and detail, to pick this run's partner. */
.dc-ov { align-items: center; }
.hub-ov > .box { max-height: none; overflow: visible; }     /* (a window over the hub is scaled to fit instead, ui/ui.js fitWindows) */
.dc-box { padding: 16px 18px; }
.dc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dc-head .tr-portrait { flex: 0 0 auto; border-radius: 10px; background-color: rgba(0,0,0,.25); box-shadow: 0 0 0 2px var(--edge); }
.dc-title { flex: 1 1 auto; min-width: 0; }
.dc-title h2 { margin: 0; color: var(--gold); text-transform: uppercase; }
.dc-title .sub { margin: 2px 0 0; }
.dc-grid { max-height: 58vh; }
.dc-detail { min-width: 0; }     /* (no scroll of its own: the window is scaled to fit, ui/ui.js fitWindows) */
.dc-detail .stat { grid-template-columns: 74px 1fr 40px; font-size: 13px; margin: 3px 0; }
.dc-here { color: #7cc45a; font-size: 13px; }
.dc-h { margin: 10px 0 6px; font-size: 14px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.dc-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dc-mv {
  position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px 4px 4px; cursor: pointer;
  background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.18); border-radius: 9px; color: inherit; font: inherit; font-size: 13px; text-align: left;
}
.dc-mv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-mv:hover { border-color: var(--edge-in); }
.dc-mv.on { border-color: var(--gold); background: rgba(255,210,63,.16); }
.dc-mv canvas { image-rendering: pixelated; flex: 0 0 auto; }
.dc-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; }
.dc-desc { margin: 8px 0 10px; font-size: 13px; min-height: 2.6em; }
@media (max-width: 760px), (max-height: 520px) {
  .dc-split { grid-template-columns: 1fr 250px; gap: 10px; }
  .dc-grid { max-height: 62vh; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .dc-detail .stage { width: 160px; height: 116px; }
}
.hub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hub-nurse { flex: 0 0 84px; display: grid; place-items: center; }
.hub-nurse canvas { image-rendering: pixelated; }
.hub-title { flex: 1 1 auto; min-width: 0; }
.hub-title h2 { margin: 0; font-size: 26px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; text-shadow: 3px 3px 0 var(--shadow); }
.hub-title p { margin: 2px 0 0; color: #c9d6f2; font-size: 14px; }
.hub-coins { font-size: 15px; color: var(--gold); white-space: nowrap; }
.hub-x { background: none; border: 0; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; }
.hub-x:hover { color: #fff; }
.hub-sec { margin-bottom: 14px; }
.hub-sec h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.hub-sec h3 small { color: var(--muted); letter-spacing: 0; text-transform: none; font-size: 13px; margin-left: 6px; }
.hub-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; min-width: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.hub-card.down { border-color: var(--red); background: rgba(255,95,109,.12); }
.hub-card.low { border-color: var(--gold2); }
.hub-lead { background: rgba(255,210,63,.1); border-color: rgba(255,210,63,.45); }
.hub-pic { flex: 0 0 auto; display: grid; place-items: center; }
.hub-pic canvas { image-rendering: pixelated; }
.hub-info { flex: 1 1 auto; min-width: 0; font-size: 15px; }
.hub-info b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-info small { color: var(--muted); font-size: 12px; }
.hub-card > .btn { flex: 0 0 auto; }
.hub-hp { height: 6px; margin: 4px 0 2px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.hub-hp i { display: block; height: 100%; background: var(--green); }
.hub-card.low .hub-hp i { background: var(--gold2); }
.hub-card.down .hub-hp i { background: var(--red); }
.hub-tag { font-size: 12px; color: var(--gold); border: 1px solid rgba(255,210,63,.5); border-radius: 999px; padding: 2px 9px; }
.hub-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; align-items: start; }
.hub-team .hub-add { justify-self: start; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hub-note { margin: 0; color: var(--muted); font-size: 13px; }
.hub-moves { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-mv {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 10px; cursor: pointer;
  background: rgba(0,0,0,.28); border: 2px solid rgba(140,170,210,.25); color: #eaf2ff; font-size: 14px;
}
.hub-mv:hover { border-color: var(--edge-in); }
.hub-mv.on { border-color: var(--gold); background: rgba(255,210,63,.16); }
.hub-mv canvas { image-rendering: pixelated; }
.hub-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.hub-search {
  width: 100%; padding: 9px 12px; margin-bottom: 10px; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 2px solid rgba(140,170,210,.3); color: #fff; outline: none;
}
.hub-search:focus { border-color: var(--gold); }
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
  max-height: min(52vh, 430px); overflow-y: auto;
}
.hub-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; cursor: pointer;
  border-radius: 10px; background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.08); color: #eaf2ff;
}
.hub-cell:hover { border-color: var(--gold); background: rgba(255,210,63,.12); }
.hub-cell b { font-size: 12px; font-weight: 700; text-align: center; }
.hub-cell canvas { image-rendering: pixelated; }

/* Mapa: 2 o 3 caminos */
.map-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.map-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0; cursor: pointer; text-align: left;
  border-radius: 14px; background: rgba(0,0,0,.3); border: 3px solid rgba(255,255,255,.16); color: #eaf2ff;
  transition: transform .12s, border-color .12s;
}
.map-card:hover, .map-card:focus-visible { transform: translateY(-2px); border-color: var(--gold); outline: none; }
.map-card.is-hunt { border-color: rgba(255,138,216,.5); }
.map-card.is-hunt:hover { border-color: #ff8ad8; }
.map-art { display: block; height: 74px; image-rendering: pixelated; position: relative; }
.map-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,0,0,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 16px 16px;
}
.map-body { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.map-name { font-size: 17px; font-weight: 800; }
.map-types { display: flex; gap: 4px; }
.map-type { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.map-goal { font-size: 14px; color: #cfe0ff; }
.map-goal b { color: var(--gold); }
.map-goal.hunt { color: #ffb3e6; }
.map-goal.hunt b { color: #ffb3e6; }
.map-pic { position: absolute; right: 6px; bottom: 4px; pointer-events: none; }
.map-pic canvas { image-rendering: pixelated; }

/* Elegir modo (botón Jugar) */
/* Which mode (ui/menu.js pickMode), in the menu's own look (04-11-2026): white and yellow
   slanted cards on the violet stripes, a magenta slab for the question. */
.mode-ov {
  position: fixed; inset: 0; z-index: 56; display: flex; align-items: center; justify-content: center;
  padding: 4vh 14px; animation: fade .18s ease-out;
  background: repeating-linear-gradient(-60deg, rgba(34,23,63,.9) 0 40px, rgba(40,28,74,.9) 40px 80px);
  backdrop-filter: blur(3px);
}
.mode-box {
  position: relative; width: min(900px, 100%); padding: 20px 26px 22px;
  background: linear-gradient(160deg, #2c1f57, #1c1236 70%); border: 0; border-radius: 6px 30px 6px 30px;
  box-shadow: 0 0 0 3px #fff, 9px 11px 0 3px #ff4f9a, 0 26px 60px rgba(0,0,0,.5);
  animation: pdPop .3s cubic-bezier(.2,.9,.3,1.1) both;
}
.mode-box h2 {
  display: inline-block; margin: 0 0 14px; padding: 3px 26px 1px; letter-spacing: .01em;
  font: italic 800 26px/1.15 'Kanit', var(--font); text-transform: uppercase;
  color: #fff; background: #ff4f9a; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); text-shadow: none;
}
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden;
  padding: 18px 24px 16px 28px; text-align: left; cursor: pointer; min-height: 150px;
  border: 0; border-radius: 0; background: #fff; color: #23163f; text-shadow: none;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  transition: transform .12s, background .12s;
  animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards;
}
.mode-card:nth-child(2) { animation-delay: .05s; } .mode-card:nth-child(3) { animation-delay: .1s; }
.mode-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--mc, #e0a800); }
.mode-card:hover, .mode-card:focus-visible { background: #f8d030; transform: translateY(-4px); outline: none; }
.mode-card b { font: italic 800 28px/1 'Kanit', var(--font); text-transform: uppercase; color: #23163f; }
.mode-card span { font-size: 13px; color: #5b4c80; line-height: 1.35; }
.mode-card.waves { --mc: #ff4f9a; }
.mode-card.story { --mc: #7a5ad8; }
/* (three modes, and a mode the party can't play: ui/menu.js pickMode) */
.mode-cards.three { grid-template-columns: repeat(3, 1fr); }
.mode-card:disabled { opacity: .45; cursor: default; transform: none; background: #ded6ef; }
.mode-card:disabled:hover { background: #ded6ef; transform: none; }
.mode-card em { font: italic 800 12px 'Kanit', var(--font); font-style: italic; letter-spacing: .06em; text-transform: uppercase; color: #d4246f; }
.mode-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: #c9bdf0; }
.mode-x {
  position: absolute; top: 10px; right: 18px; background: none; border: 0; color: #c9bdf0; font-size: 30px; line-height: 1;
  cursor: pointer; transition: color .12s, transform .12s;
}
.mode-x:hover { color: #f8d030; transform: rotate(90deg); }
@media (max-width: 620px) {
  .mode-cards, .mode-cards.three { grid-template-columns: 1fr; }
  .hub-title h2 { font-size: 21px; }
  .hub-nurse { flex-basis: 58px; }
}

/* ============ PokéSurvivor Routes theme: "Paldea sport" (ui/routes-theme.js) ============
 * Only under body.routes-ui (a wave run, its hub and the Routes home): deep violet
 * panels with a magenta offset shadow, white and yellow slanted cards, italic
 * Kanit headlines. The pixel font stays for text and numbers, so the sprites fit.
 */
/* (.scr.routes-ui: one screen in the Routes look, story's #scr-town; .routes-ui on a dialog that sits
    on the body over such a screen: the mode prompt, Settings' rebind box, the tutorial's question;
    #tap-start: the front door) */
body.routes-ui, .scr.routes-ui, .mode-ov.routes-ui, .tut-modal.routes-ui, #tap-start {
  --pd-ink: #1c1236; --pd-ink2: #2a1d4f; --pd-violet: #3a2870;
  --pd-text: #23163f; --pd-soft: #5b4c80; --pd-lilac: #c9bdf0; --pd-line: #eee6fb;
  --pd-y: #f8d030; --pd-y2: #f0b818; --pd-pink: #ff4f9a; --pd-pink2: #d4246f;
  --pd-head: 'Kanit', var(--font);
  --pd-slant: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  --ink: #ffffff; --muted: var(--pd-lilac);
  --box1: #2c1f57; --box2: #1f1540;
  --edge: #ffffff; --edge-in: var(--pd-pink); --edge-out: #140c2b;
  --gold: var(--pd-y); --gold2: var(--pd-y2); --shadow: #140c2b;
  font-variant-ligatures: none;           /* (Pixelify joins "fi" into one odd letter) */
}
@keyframes pdPop { 0% { transform: scale(.92) translateY(10px); opacity: 0; } 70% { transform: scale(1.015); opacity: 1; } 100% { transform: none; } }
@keyframes pdIn { from { transform: translateX(-34px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- backdrops ---- */
.routes-ui .scr.dim, .scr.dim.routes-ui, .routes-ui .hub-ov, .routes-ui .vic-ov {
  background: repeating-linear-gradient(-60deg, rgba(42,29,79,.84) 0 40px, rgba(50,33,96,.84) 40px 80px);
  backdrop-filter: blur(2px);
}
.routes-ui #scr-routes { background: repeating-linear-gradient(-60deg, #2a1d4f 0 40px, #301f5c 40px 80px); }

/* ---- panels ---- */
.routes-ui .box, .routes-ui .hub-box {
  background: linear-gradient(160deg, #2c1f57, #1c1236 70%);
  border: 0; border-radius: 6px 30px 6px 30px;
  box-shadow: 0 0 0 3px #fff, 9px 11px 0 3px var(--pd-pink), 0 26px 60px rgba(0,0,0,.5);
  text-shadow: none; animation: pdPop .3s cubic-bezier(.2,.9,.3,1.1) both;
}
.routes-ui .hub-box { padding: 20px 22px 18px; }
/* Headlines: white italic Kanit on a magenta slab. */
.routes-ui .box h2, .routes-ui .hub-title h2, .routes-ui .dc-title h2, .routes-ui .vic-head h2 {
  display: inline-block; margin: 0 0 8px; padding: 3px 26px 1px;
  font: italic 800 26px/1.15 var(--pd-head); text-transform: uppercase; letter-spacing: .01em;
  color: #fff; background: var(--pd-pink); clip-path: var(--pd-slant); text-shadow: none;
}
.routes-ui .box h3, .routes-ui .hub-sec h3, .routes-ui .dc-h, .routes-ui .shop-h, .routes-ui .pause-sum h3, .routes-ui .over-tm h3 {
  font: italic 800 17px var(--pd-head); text-transform: uppercase; letter-spacing: .02em; color: var(--pd-y);
}
.routes-ui .hub-sec h3 small { font: 13px var(--font); text-transform: none; color: var(--pd-lilac); }
.routes-ui .sub, .routes-ui .hub-title p, .routes-ui .vic-head p, .routes-ui .note, .routes-ui .hub-note { color: var(--pd-lilac); }
.routes-ui kbd { border-color: rgba(201,189,240,.55); color: #fff; }
.routes-ui .hub-x { color: var(--pd-lilac); transition: color .12s, transform .12s; }
.routes-ui .hub-x:hover { color: var(--pd-y); transform: rotate(90deg); }

/* ---- buttons: slanted, italic, uppercase ---- */
.routes-ui .btn {
  border: 0; border-radius: 0; clip-path: var(--pd-slant); box-shadow: none; text-shadow: none;
  padding: 9px 28px; background: #fff; color: var(--pd-text);
  font: italic 800 17px var(--pd-head); text-transform: uppercase; letter-spacing: .02em;
  transition: transform .1s, background .12s, color .12s;
}
.routes-ui .btn:hover { filter: none; background: var(--pd-y); transform: translateX(3px); }
.routes-ui .btn:active { box-shadow: none; transform: translateX(3px) translateY(1px); }
.routes-ui .btn.gold { background: var(--pd-y); color: var(--pd-text); }
.routes-ui .btn.gold:hover { background: var(--pd-pink); color: #fff; }
.routes-ui .btn.ghost { background: rgba(255,255,255,.12); color: #fff; }
.routes-ui .btn.ghost:hover { background: rgba(255,255,255,.24); }
.routes-ui .btn.small { padding: 5px 18px; font-size: 14px; }
.routes-ui .btn:disabled, .routes-ui .btn:disabled:hover { filter: none; transform: none; background: #4a3a78; color: rgba(255,255,255,.5); }

/* ---- the level-up, item, team and bond screens: cards straight on the backdrop ---- */
.routes-ui #scr-levelup .box, .routes-ui #scr-item .box, .routes-ui #scr-team .box, .routes-ui #scr-bond .box {
  background: none; box-shadow: none; padding: 10px 16px; overflow: visible;
}
.routes-ui #scr-levelup h2, .routes-ui #scr-item h2, .routes-ui #scr-team h2, .routes-ui #scr-bond h2 { font-size: 32px; padding: 4px 34px 2px; }
.routes-ui #scr-levelup .box, .routes-ui #scr-team .box { width: min(680px, 100%); }
.routes-ui #scr-levelup .box:has(.lvl-mon:not(.hidden)) { width: min(940px, 100%); }
.routes-ui .card {
  gap: 16px; padding: 12px 22px 12px 28px; background: #fff; color: var(--pd-text);
  border: 0; border-radius: 0; clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  text-shadow: none; transition: transform .12s, background .12s;
  animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards;
}
.routes-ui .card:nth-child(2) { animation-delay: .05s; }
.routes-ui .card:nth-child(3) { animation-delay: .1s; }
.routes-ui .card:nth-child(4) { animation-delay: .15s; }
.routes-ui .card:nth-child(5) { animation-delay: .2s; }
.routes-ui .card:hover, .routes-ui .card:focus-visible { background: var(--pd-y); border: 0; transform: translateX(8px); outline: none; }
.routes-ui .card .nm { font: italic 800 19px/1.15 var(--pd-head); text-transform: uppercase; color: var(--pd-text); }
.routes-ui .card .nm small { font: 13px var(--font); text-transform: none; color: var(--pd-soft); }
.routes-ui .card .ds { color: var(--pd-soft); }
.routes-ui .card .key { border: 0; padding: 0 4px; font: italic 800 26px var(--pd-head); color: var(--pd-pink); }
.routes-ui .card .who { background: #f1ebfc; }
.routes-ui .card .who span { color: var(--pd-text); }
.routes-ui .card.for-mate { box-shadow: inset 22px 0 0 #7cc45a; }
.routes-ui .card.evo { background: linear-gradient(90deg, #fff1a8, #fff 70%); }
.routes-ui .card.evo .nm { color: #9a6a00; }
.routes-ui .card.bond { background: linear-gradient(90deg, #ffd9ea, #fff 70%); }
.routes-ui .card.bond .nm { color: var(--pd-pink2); }
.routes-ui .card.evo:hover, .routes-ui .card.bond:hover { background: var(--pd-y); }
.routes-ui .card .tag-chip:not(.cat) { text-shadow: none; }

/* The Pokémon whose level-up it is: a yellow card, its sprite on a disc. */
.routes-ui .lvl-mon {
  background: var(--pd-y); color: var(--pd-text); border: 0; border-radius: 6px 30px 6px 30px;
  padding: 14px 14px 12px; box-shadow: 7px 8px 0 var(--pd-y2); text-shadow: none; animation: pdIn .3s ease-out backwards;
}
.routes-ui .lm-head { gap: 10px; }
.routes-ui .lm-pic { width: 82px; height: 82px; border-radius: 50%; background: #fff3b0; box-shadow: inset 0 -7px 0 var(--pd-y2); display: grid; place-items: center; flex: 0 0 auto; }
.routes-ui .lm-head b { font: italic 800 23px/1.05 var(--pd-head); text-transform: uppercase; }
.routes-ui .lm-head small { display: inline-block; margin-top: 3px; padding: 1px 10px; border-radius: 999px; background: var(--pd-text); color: var(--pd-y); font-size: 13px; }
.routes-ui .lm-stats div { padding: 2px 8px; }
.routes-ui .lm-stats div:nth-child(odd) { background: rgba(255,255,255,.28); }
.routes-ui .lm-stats dt, .routes-ui .lvl-mon i, .routes-ui .lm-mv small, .routes-ui .lm-slots .slot-k, .routes-ui .lm-hint { color: var(--pd-soft); }
.routes-ui .lm-stats dd { font-weight: 700; }
.routes-ui .lvl-mon em { color: var(--pd-pink2); }
.routes-ui .lvl-mon .lm-on { background: #fff; outline: 2px solid var(--pd-pink); }
.routes-ui .lm-slots li { background: rgba(255,255,255,.45); border-radius: 4px 12px 4px 12px; }
.routes-ui .lm-slots li.lm-new { background: #fff; outline: 2px dashed var(--pd-pink); }

/* ---- the hub's windows ---- */
.routes-ui .hub-card, .routes-ui .slots-mon, .routes-ui .vic-mon, .routes-ui .vic-stats > div, .routes-ui .over-tm {
  background: rgba(255,255,255,.07); border: 0; border-radius: 4px 18px 4px 18px;
}
.routes-ui .hub-card.down { background: rgba(255,79,94,.16); box-shadow: inset 4px 0 0 var(--red); }
.routes-ui .hub-card.low { box-shadow: inset 4px 0 0 var(--pd-y2); }
.routes-ui .hub-lead { background: rgba(248,208,48,.14); box-shadow: inset 4px 0 0 var(--pd-y); }
.routes-ui .hub-hp, .routes-ui .vic-mv i { height: 8px; border-radius: 999px; background: rgba(0,0,0,.4); }
.routes-ui .hub-hp i { border-radius: 999px; }
.routes-ui .hub-tag { border: 0; background: var(--pd-y); color: var(--pd-text); clip-path: var(--pd-slant); border-radius: 0; padding: 2px 14px; }
.routes-ui .hub-info b, .routes-ui .slots-who b, .routes-ui .vic-who b { font: italic 800 17px var(--pd-head); text-transform: uppercase; }
.routes-ui .hub-pic { border-radius: 50%; background: rgba(255,255,255,.08); }
.routes-ui .hub-mv, .routes-ui .hub-cell, .routes-ui .dc-mv { border-color: transparent; background: rgba(255,255,255,.07); border-radius: 4px 14px 4px 14px; }
.routes-ui .hub-mv:hover, .routes-ui .hub-cell:hover, .routes-ui .dc-mv:hover { border-color: var(--pd-y); background: rgba(248,208,48,.12); }
.routes-ui .hub-mv.on, .routes-ui .dc-mv.on { border-color: var(--pd-y); background: rgba(248,208,48,.2); }
.routes-ui .hub-search { border-radius: 4px 14px 4px 14px; border-color: rgba(201,189,240,.35); background: rgba(0,0,0,.3); }
.routes-ui .hub-search:focus { border-color: var(--pd-y); }
/* The Day Care's Pokédex grid and detail. */
/* The Day Care's second screen: the partner's Auto and Active move (ui/hub-ui.js dcMoves). */
.dc-moves-box { width: min(900px, 100%); }
.dc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.dc-cols .sub { margin: 0 0 8px; font-size: 13px; }
.dc-list { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.dc-pick { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; color: inherit; font: inherit; cursor: pointer;
  border: 2px solid transparent; background: rgba(255,255,255,.07); border-radius: 4px 16px 4px 16px; }
.dc-pick:hover { border-color: #fff; }
.dc-pick.on { border-color: var(--pd-y, #f8d030); background: rgba(248,208,48,.18); }
.dc-pick b { font: italic 800 16px 'Kanit', var(--font); text-transform: uppercase; margin-right: 6px; }
.dc-pick p { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.dc-ty { display: inline-block; font-size: 11px; color: #fff; padding: 0 8px; border-radius: 999px; vertical-align: middle; }
.dc-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
@media (max-width: 700px) { .dc-cols { grid-template-columns: 1fr; } }
.routes-ui .dc-box .cell { background: rgba(255,255,255,.06); border-color: transparent; border-radius: 4px 16px 4px 16px; }
.routes-ui .dc-box .cell:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.routes-ui .dc-box .cell.on { border-color: var(--pd-y); background: rgba(248,208,48,.16); }
.routes-ui .dc-box .cell b { font: italic 800 13px var(--pd-head); text-transform: uppercase; }
.routes-ui .dc-box .panel { background: rgba(0,0,0,.22); border: 0; border-radius: 4px 22px 4px 22px; }
.routes-ui .dc-box input, .routes-ui .dc-box select { border-radius: 4px 12px 4px 12px; }

/* Team and moves: each slot a row with its colour on the left edge. */
.routes-ui .slot { background: rgba(0,0,0,.25); border: 0; border-radius: 4px 12px 4px 12px; box-shadow: inset 4px 0 0 rgba(201,189,240,.35); }
.routes-ui .slot.s0 { box-shadow: inset 4px 0 0 #7cc45a; }
.routes-ui .slot.s1 { box-shadow: inset 4px 0 0 var(--pd-y); }
.routes-ui .slot.s2 { box-shadow: inset 4px 0 0 #ff9a3d; }
.routes-ui .slot-k { font: italic 800 13px var(--pd-head); }
.routes-ui .slot .btn.small { padding: 2px 12px; }
.routes-ui .slot.s1 .slot-k { color: var(--pd-pink); }
.routes-ui .slot.s2, .routes-ui .slot.s3 { opacity: .6; }
.slot-eff { font-style: normal; font-size: 12px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap; }
.slot-eff.good { background: #3fae5a; color: #fff; }
.slot-eff.bad { background: #d4246f; color: #fff; }
.dc-mast { margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
/* The team window (ui/hub-ui.js renderSlots): a white card per Pokémon, side by side, centred. */
.hub-panel .hub-box.team-box { width: min(1060px, 100%); }
.team-cols { display: flex; justify-content: center; gap: 14px; }
.tm-card { flex: 0 1 320px; min-width: 0; background: #fff; color: #23163f; border-radius: 4px 26px 4px 26px; overflow: hidden; text-shadow: none; }
.tm-frame { position: relative; height: 150px; display: grid; place-items: end center; padding-bottom: 12px; overflow: hidden; }
.tm-frame::before { content: ''; position: absolute; left: 50%; top: -40px; width: 200px; height: 230px; transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(255,255,255,.6), transparent 65%); pointer-events: none; }
.tm-podium { position: absolute; left: 50%; bottom: 10px; width: 130px; height: 24px; transform: translateX(-50%); border-radius: 50%; background: rgba(28,18,54,.3); box-shadow: 0 5px 0 rgba(28,18,54,.2); }
.tm-pic { position: relative; z-index: 1; display: block; }
.tm-pic canvas { display: block; image-rendering: pixelated; }
.tm-name { display: flex; align-items: center; gap: 8px; margin: -12px 12px 0; position: relative; z-index: 2; padding: 4px 22px 2px; background: #f8d030;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); font: italic 800 19px 'Kanit', var(--font); text-transform: uppercase; }
.tm-name small { margin-left: auto; font: 12px var(--font); background: #23163f; color: #f8d030; padding: 0 8px; border-radius: 999px; }
.tm-types { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 12px 0; }
.tm-types span { font-size: 11px; color: #fff; padding: 0 9px; border-radius: 999px; }
.tm-types em { margin-left: auto; font-style: normal; font-size: 11px; color: #5b4c80; }
.tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; padding: 8px 12px; }
.tm-stats div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 30px; gap: 6px; align-items: center; font-size: 12px; }
.tm-stats i { display: block; height: 6px; border-radius: 999px; background: #eee6fb; overflow: hidden; }
.tm-stats u { display: block; height: 100%; background: #23163f; border-radius: 999px; }
.tm-stats b { text-align: right; }
.tm-mvs { display: grid; gap: 6px; padding: 4px 10px 12px; }
.tm-mv { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 14px 6px 18px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: transform .1s, filter .1s; }
.tm-mv b { display: block; font: italic 800 14px/1.15 'Kanit', var(--font); text-transform: uppercase; }
.tm-mv b small { font: 11px var(--font); text-transform: none; color: inherit; opacity: .75; }
.tm-mv > div > small { display: block; font-size: 11px; color: #5b4c80; }
.tm-role { font: italic 800 11px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .04em; }
.tm-mv.k1 { background: #ff4f9a; color: #fff; } .tm-mv.k1 > div > small, .tm-mv.k1 .tm-role { color: #ffe0ee; }
.tm-mv.k0 { background: #f8d030; }
.tm-mv.k2, .tm-mv.k3 { background: #f1ebfc; } .tm-mv.k2 b, .tm-mv.k3 b { opacity: .7; }
.tm-mv.drag { cursor: grab; }
.tm-mv.drag:hover { transform: translateX(3px); }
.tm-mv.lift { opacity: .45; }
.tm-mv.over, .tm-mv.picked { filter: drop-shadow(0 0 0 #23163f); outline: 3px dashed #23163f; outline-offset: -3px; }
.tm-note { margin: -4px 12px 12px; font-size: 12px; color: #5b4c80; }
.tm-tip { position: fixed; z-index: 70; max-width: 260px; padding: 8px 12px; border-radius: 4px 14px 4px 14px; background: #1c1236; color: #fff;
  box-shadow: 0 0 0 2px #fff, 4px 5px 0 2px #ff4f9a; font-size: 13px; pointer-events: none; }
.tm-tip b { font: italic 800 15px 'Kanit', var(--font); text-transform: uppercase; }
.tm-tip small { color: #c9bdf0; }
.tm-tip p { margin: 2px 0 0; color: #ece6ff; }
@media (max-width: 760px) { .team-cols { flex-direction: column; align-items: center; } .tm-card { flex: none; width: 100%; max-width: 360px; } }
.slots-mast { display: block; font-size: 11px; color: var(--pd-lilac, #b9cbf0); }
.prep-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.08); }
.prep-secs { margin-left: auto; font: italic 800 15px var(--pd-head, var(--font)); color: var(--pd-y, #ffd23f); text-transform: uppercase; }
.shop-slot.locked { opacity: .5; font-size: 13px; }

/* The map: a white card per route. */
.routes-ui .map-card {
  background: #fff; color: var(--pd-text); border: 0; border-radius: 6px 28px 6px 28px;
  transition: transform .12s, box-shadow .12s; animation: pdIn .3s cubic-bezier(.2,.9,.3,1.15) backwards;
}
.routes-ui .map-card:nth-child(2) { animation-delay: .06s; }
.routes-ui .map-card:nth-child(3) { animation-delay: .12s; }
.routes-ui .map-card:hover, .routes-ui .map-card:focus-visible { transform: translateY(-4px); box-shadow: 7px 8px 0 var(--pd-y); }
.routes-ui .map-card.is-hunt:hover { box-shadow: 7px 8px 0 var(--pd-pink); }
.routes-ui .map-name { font: italic 800 21px var(--pd-head); text-transform: uppercase; }
.routes-ui .map-goal { color: var(--pd-soft); }
.routes-ui .map-goal b { color: var(--pd-pink2); }
.routes-ui .map-goal.hunt, .routes-ui .map-goal.hunt b { color: var(--pd-pink2); }
/* Its scene (ui/map-ui.js scene): the biome's ground and props, a few of its Pokémon. */
.map-art { overflow: hidden; }
.routes-ui .map-art { height: 104px; }
.routes-ui .map-art::after { display: none; }
.map-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.map-mons { position: absolute; inset: 0; pointer-events: none; }
.map-mons canvas { position: absolute; bottom: 0; transform: translateX(-50%); image-rendering: pixelated; }
/* The route's type mix: emblem and share. */
.routes-ui .map-types { flex-wrap: wrap; gap: 4px 8px; }
.map-ty { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.map-ty b { font-weight: 700; }

/* A route won. */
.routes-ui .vic-head h2 { font-size: 34px; }
.routes-ui .vic-stats span { color: var(--pd-lilac); }
.routes-ui .vic-stats b { font: italic 800 24px var(--pd-head); color: var(--pd-y); }
.routes-ui .vic-who em { color: var(--pd-y); }

/* The shops and the move tutor: white item rows, a yellow price to buy. */
.routes-ui .shop-wallet { padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.1); }
.routes-ui .shop-wallet b { font: italic 800 18px var(--pd-head); color: var(--pd-y); }
.routes-ui .shop-k { color: var(--pd-lilac); font: italic 800 12px var(--pd-head); }
.routes-ui .shop-slot { border: 0; border-radius: 4px 10px 4px 10px; background: rgba(255,255,255,.1); }
.routes-ui .shop-list { gap: 8px; }
.routes-ui .shop-it {
  padding: 7px 10px 7px 12px; background: #fff; color: var(--pd-text); border-radius: 4px 18px 4px 18px;
  animation: pdIn .26s cubic-bezier(.2,.9,.3,1.15) backwards; transition: transform .12s;
}
.routes-ui .shop-it:hover { transform: translateX(4px); }
.routes-ui .shop-it:nth-child(2) { animation-delay: .04s; } .routes-ui .shop-it:nth-child(3) { animation-delay: .08s; }
.routes-ui .shop-it:nth-child(4) { animation-delay: .12s; } .routes-ui .shop-it:nth-child(5) { animation-delay: .16s; }
.routes-ui .shop-txt b { font: italic 800 17px var(--pd-head); text-transform: uppercase; }
.routes-ui .shop-txt b small { font: 12px var(--font); text-transform: none; color: var(--pd-soft); }
.routes-ui .shop-txt small { color: var(--pd-soft); }
.routes-ui .shop-buy, .routes-ui .tutor-buy { padding: 5px 16px; }
.routes-ui .shop-buy:not(:disabled), .routes-ui .tutor-buy:not(:disabled) { background: var(--pd-text); color: var(--pd-y); }
.routes-ui .shop-buy:not(:disabled):hover, .routes-ui .tutor-buy:not(:disabled):hover { background: var(--pd-pink); color: #fff; }
.routes-ui .shop-buy:disabled, .routes-ui .tutor-buy:disabled { background: #e6def5; color: #9a8fb8; }
.routes-ui .shop-none { color: var(--pd-lilac); }
.routes-ui .shop-ask { border: 2px dashed var(--pd-y); border-radius: 4px 18px 4px 18px; background: rgba(248,208,48,.08); }
.routes-ui .shop-mon { border: 0; background: #fff; color: var(--pd-text); border-radius: 4px 16px 4px 16px; transition: transform .1s, background .1s; }
.routes-ui .shop-mon b { font: italic 800 15px var(--pd-head); text-transform: uppercase; }
.routes-ui .shop-mon small { color: var(--pd-soft); }
.routes-ui .shop-mon:hover { background: var(--pd-y); transform: translateY(-2px); }
/* The trader's Pokémon (ui/hub-shop.js drawTrade): big, on a yellow disc. */
.trade-offer { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; }
.trade-offer b { display: block; font: italic 800 24px var(--pd-head, var(--font)); text-transform: uppercase; margin-bottom: 4px; }
.trade-pic { width: 110px; height: 110px; border-radius: 50%; background: #fff3b0; box-shadow: inset 0 -8px 0 #f0b818; }

/* ---- the Routes home ---- */
.routes-ui .routes-box { gap: 16px; padding: 26px 28px 22px; }
.routes-ui .routes-box .logo .t1 { font: italic 800 50px/1 var(--pd-head); color: #fff; text-shadow: 4px 4px 0 var(--pd-pink); letter-spacing: 0; }
.routes-ui .routes-box .logo .t2 {
  display: inline-block; margin-top: 10px; padding: 2px 34px 0; background: var(--pd-y); color: var(--pd-text);
  font: italic 800 24px/1.3 var(--pd-head); letter-spacing: .08em; clip-path: var(--pd-slant);
}
.routes-ui .routes-gold { border: 0; background: rgba(255,255,255,.1); }
.routes-ui .routes-gold b { font: italic 800 22px var(--pd-head); }
.routes-ui .routes-trainer span { font: italic 800 18px var(--pd-head); text-transform: uppercase; }
.routes-ui .routes-trainer .tr-portrait { border-radius: 50%; background-color: rgba(255,255,255,.1); box-shadow: 0 0 0 3px #fff; }
.routes-ui .routes-start { font-size: 26px; padding: 14px; }
.routes-ui .routes-endless { color: var(--pd-lilac); }

/* ---- small things ---- */
.routes-ui .toast { background: var(--pd-ink); border: 0; border-radius: 4px 16px 4px 16px; box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px var(--pd-pink); text-shadow: none; }
.routes-ui .stat .bar, .routes-ui .stat .bar i { border-radius: 999px; }

/* Level-ups one after another without the screen jumping: it starts at the top (a taller or
   shorter set of cards doesn't move the rest), the cards and the panel keep their height on hover,
   and only the cards slide in again. */
.routes-ui #scr-levelup { align-items: flex-start; padding-top: max(16px, 6vh); }
.routes-ui #scr-levelup .box { animation: none; }
.routes-ui #scr-levelup .card { min-height: 96px; }
.routes-ui .lm-note, .routes-ui .lm-hint { min-height: 2.6em; margin: 6px 0 0; align-items: flex-start; }
.routes-ui .lm-stats dd, .routes-ui .lm-mv > span { white-space: nowrap; }
.routes-ui .lm-mv > span { overflow: hidden; text-overflow: ellipsis; }
.routes-ui .lm-mv { min-height: 24px; align-content: center; }
.routes-ui .lm-mv > span { height: 24px; }
@media (max-height: 520px) {
  .routes-ui #scr-levelup .card { min-height: 0; }
  .routes-ui .card { padding: 6px 16px 6px 22px; gap: 10px; }
  .routes-ui .card .nm { font-size: 16px; }
  .routes-ui .lm-pic { width: 60px; height: 60px; }
  .routes-ui #scr-levelup h2, .routes-ui #scr-item h2, .routes-ui #scr-team h2, .routes-ui #scr-bond h2 { font-size: 24px; }
}
@media (max-width: 620px) {
  .routes-ui .box h2, .routes-ui .hub-title h2 { font-size: 21px; padding: 2px 20px 0; }
  .routes-ui .routes-box .logo .t1 { font-size: 38px; }
}

/* Auto and Active moves (ui/routes-theme.js roleIcon / roleTag). */
.role-ic { display: inline-grid; place-items: center; flex: none; width: var(--s, 18px); height: var(--s, 18px); border-radius: 50%;
  box-shadow: 0 0 0 2px #23163f; vertical-align: -0.2em; margin-right: 5px; font-style: normal; }
.role-ic svg { width: 70%; height: 70%; display: block; }
.role-ic.r-auto { background: #f8d030; color: #23163f; }
.role-ic.r-active { background: #ff4f9a; color: #fff; }
.role-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px 1px 3px; border-radius: 999px; font: italic 800 11px 'Kanit', var(--font);
  text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; white-space: nowrap; }
.role-tag .role-ic { margin-right: 4px; box-shadow: none; }
.role-tag.r-auto { background: #fff3b8; color: #23163f; }
.role-tag.r-active { background: #ffe0ee; color: #b0125a; }
.tm-role { display: inline-flex; align-items: center; }
/* The team window: where the move you hold can go, and where it can't (ui/hub-ui.js hints). */
.tm-mv { position: relative; }
.tm-mv.can-go { outline: 3px dashed #23163f; outline-offset: -3px; }
.tm-mv.nope { filter: grayscale(.6) brightness(.8); }
.tm-mv.nope::after { content: attr(data-nope); position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding-right: 12px; border-radius: inherit; background: rgba(35,22,63,.55); color: #fff; font: italic 800 12px 'Kanit', var(--font); text-transform: uppercase; }
.tm-mv.nope::after { padding-right: 50px; }
.tm-mv.nope::before { content: ''; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle, transparent 54%, #ff3b4a 56%) , linear-gradient(45deg, transparent 44%, #ff3b4a 44% 56%, transparent 56%); }
.tm-mv.nope-hot { animation: nopeShake .3s; }
@keyframes nopeShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.dc-h .role-ic { vertical-align: -0.35em; }
/* The map: a route's goal (modes/waves.js goalText), the rift in purple. */
.routes-ui .map-goal.survive, .routes-ui .map-goal.defeat, .routes-ui .map-goal.alphas, .routes-ui .map-goal.rift { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 700; }
.routes-ui .map-goal.survive { background: #f8d030; color: #23163f; }
.routes-ui .map-goal.defeat { background: #ff4f9a; color: #fff; }
.routes-ui .map-goal.alphas { background: #23163f; color: #f8d030; }
.routes-ui .map-card.is-rift { background: linear-gradient(160deg, #3a1f6e, #120a28); color: #fff; box-shadow: 0 0 0 3px #b06cff, 6px 7px 0 #ff4f9a; }
.routes-ui .map-card.is-rift .map-name { color: #fff; }
.routes-ui .map-goal.rift { background: #b06cff; color: #fff; }
/* A count on a button: training points (the Pokédex's Training tab, the hub's Pokédex chip), skill points. */
/* (the team window and the Day Care: their stats are at this level, ui/hub-ui.js) */
.tm-card .tm-at { margin: 6px 12px 0; }
.tm-at { margin: 6px 0 2px; font: italic 700 11px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .06em; color: #c9bdf0; }
.mt-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  background: #ff4f9a; color: #fff; font: 800 12px var(--font); }
.ro-earned { display: inline-block; margin: 0 0 4px 4px; padding: 0 8px; border-radius: 999px; background: #e6f7e9; color: #1d7a3a; font-size: 11px; font-weight: 700; }
/* The end of a wave run (ui/run-ui.js showRouteOver). */
#scr-over .box.ro-box { width: min(1080px, 100%) !important; display: block; text-align: left; }
.ro-head { display: flex; align-items: flex-end; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ro-title { display: flex; flex-direction: column; align-items: center; }
.ro-title span { padding: 2px 18px; background: #ff4f9a; color: #fff; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font: italic 800 15px 'Kanit', var(--font); text-transform: uppercase; }
.ro-title b { font: italic 900 64px/1 'Kanit', var(--font); text-transform: uppercase; color: #fff; text-shadow: 4px 4px 0 #ff4f9a; }
.ro-best { margin-bottom: 10px; padding: 3px 14px; border-radius: 999px; background: #fff; color: #23163f; font: italic 800 13px 'Kanit', var(--font); text-transform: uppercase; }
.ro-best.new { background: #f8d030; animation: thexPulse 1.2s ease-in-out infinite; }
.ro-trail { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ro-trail li { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.08); font-size: 13px; }
.ro-trail li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f8d030; color: #23163f; font: italic 800 13px 'Kanit', var(--font); }
.ro-trail li i { color: #5fe08a; font-style: normal; font-weight: 800; }
.ro-trail li.ro-fell b { background: #ff4f9a; color: #fff; }
.ro-trail li em { width: 70px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.4); overflow: hidden; }
.ro-trail li em u { display: block; height: 100%; background: #ff4f9a; }
.ro-trail li small { color: #c9bdf0; }
.ro-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.ro-stats > div { text-align: center; padding: 8px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.07); }
.ro-stats b { display: block; font: italic 800 22px 'Kanit', var(--font); color: #fff; }
.ro-stats span { font-size: 12px; color: #c9bdf0; }
.ro-top { margin: 0 0 10px; text-align: center; color: #f8d030; font-size: 14px; }
.ro-body { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; align-items: start; }
.ro-body h3 { margin: 4px 0 8px; }
.ro-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ro-mon { position: relative; background: #fff; color: #23163f; border-radius: 4px 22px 4px 22px; padding: 6px 10px 10px; text-shadow: none; }
.ro-mon.mvp { box-shadow: 0 0 0 3px #f8d030, 6px 7px 0 #ff4f9a; }
.ro-mon.out .ro-pic { filter: grayscale(1) opacity(.6); }
.ro-mvp { position: absolute; top: -10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: 999px;
  background: #f8d030; font: italic 800 12px 'Kanit', var(--font); }
.ro-pic { display: grid; place-items: center; height: 92px; border-radius: 4px 16px 4px 16px; background: linear-gradient(160deg, #ffe0ee, #e6def5); }
.ro-name { margin: 6px 0 2px; font: italic 800 17px 'Kanit', var(--font); text-transform: uppercase; }
.ro-name small { font: 12px var(--font); color: #5b4c80; text-transform: none; }
.ro-out { display: inline-block; margin-bottom: 4px; padding: 0 8px; border-radius: 999px; background: #ffe0ee; color: #b0125a; font-size: 11px; font-weight: 700; }
.ro-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 8px; }
.ro-nums > div { position: relative; text-align: center; padding: 4px 2px; border-radius: 8px; background: #f1ebfc; }
.ro-nums b { display: block; font: italic 800 16px 'Kanit', var(--font); }
.ro-nums span { font-size: 10px; color: #5b4c80; }
.ro-nums i { position: absolute; top: -7px; right: -3px; padding: 0 5px; border-radius: 999px; background: #ff4f9a; color: #fff; font: 700 10px var(--font); font-style: normal; }
.ro-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.ro-moves li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 44px auto; align-items: center; gap: 4px; }
.ro-moves li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-moves li small { color: #5b4c80; }
.ro-moves li em { height: 5px; border-radius: 3px; background: #e6def5; overflow: hidden; }
.ro-moves li em u { display: block; height: 100%; background: #ff4f9a; }
.ro-moves li b { font-size: 11px; text-align: right; min-width: 38px; }
.ro-moves li.none { display: block; color: #5b4c80; }
.ro-moves .role-ic { margin-right: 0; }
.ro-tm { padding: 12px; border-radius: 4px 22px 4px 22px; background: rgba(255,255,255,.07); }
.ro-tm h3 { margin-top: 0; }
.ro-tm .sub { margin: 0 0 8px; font-size: 13px; }
.ro-tm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: start; }
.ro-tm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 340px; overflow-y: auto; font-size: 13px; }
.ro-tm-list li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.06); }
.ro-tm-list li small { margin-left: auto; color: #c9bdf0; font-size: 11px; }
.ro-tm-list li.owned { opacity: .55; }
.ro-tm-list li.won { background: rgba(248,208,48,.3); box-shadow: 0 0 0 2px #f8d030; opacity: 1; }
.ro-machine canvas { width: 140px; height: auto; image-rendering: pixelated; cursor: pointer; display: block; }
.ro-tm-out { margin-top: 6px; text-align: center; font-size: 13px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.ro-tm-out.shown { opacity: 1; transform: none; }
.ro-tm-out small { display: block; color: #c9bdf0; }
.ro-back { display: block; margin: 14px auto 0; min-width: 240px; }
@media (max-width: 860px) { .ro-body { grid-template-columns: 1fr; } .ro-stats { grid-template-columns: repeat(2, 1fr); } .ro-title b { font-size: 48px; } }
/* A window drawn again in place doesn't open again (ui/hub-ui.js). */
.routes-ui .hub-box.again, .routes-ui .box.again, .hub-box.again .shop-it, .hub-box.again .map-card { animation: none; }
/* The trainer skills (modes/routes-meta.js): a map, five roads from your home, a trainer ability at the end of each. */
@keyframes thexPulse { 50% { background: #ffe9f3; } }
.hub-panel .hub-box.skm-box { width: min(1240px, 100%); }
.skm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: stretch; }
.skm-map { display: flex; height: max(360px, min(calc(100vh - 200px), 620px)); overflow: auto; cursor: grab; scrollbar-width: thin; touch-action: pan-x pan-y; border-radius: 4px 22px 4px 22px;
  background: repeating-linear-gradient(-30deg, #3f86d6 0 14px, #4790e0 14px 28px); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); }
.skm-field { position: relative; margin: auto; flex: none; }
.skm-island { position: absolute; inset: 0; image-rendering: pixelated; }
.skm-map.drag { cursor: grabbing; user-select: none; }
.skm-land { position: absolute; inset: 0; }
.skm-walked { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 5; opacity: .95; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.skm-me { position: absolute; transform: translate(-50%, -78%); image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); pointer-events: none; }
.skm-sign { position: absolute; transform: translateX(-50%); padding: 2px 12px; border-radius: 4px; background: #5a3416; color: #fff; box-shadow: inset 0 -3px 0 var(--c), 0 3px 0 rgba(0,0,0,.25);
  font: italic 800 13px 'Kanit', var(--font); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.skm-node { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; box-shadow: 0 0 0 4px #5b4c80, 0 4px 0 rgba(0,0,0,.25); transition: transform .12s; }
.skm-node:hover { transform: scale(1.08); }
.skm-node.got { background: var(--c); box-shadow: 0 0 0 4px #fff, 0 4px 0 rgba(0,0,0,.25); }
.skm-node.can { box-shadow: 0 0 0 4px var(--c), 0 4px 0 rgba(0,0,0,.25); animation: thexPulse 1.2s ease-in-out infinite; }
.skm-node.open { background: #f1ecfa; box-shadow: 0 0 0 4px var(--c), 0 4px 0 rgba(0,0,0,.25); }
.skm-node.locked { background: #d8d2e6; }
.skm-node.locked img.pix { opacity: .45; filter: grayscale(1); }
.skm-node.sel { transform: scale(1.12); box-shadow: 0 0 0 4px var(--c), 0 0 0 8px #fff, 0 4px 0 rgba(0,0,0,.25); }
.skm-node em { position: absolute; right: -8px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #1c1236; color: #fff;
  font: italic 800 11px/20px 'Kanit', var(--font); font-style: normal; box-shadow: 0 0 0 2px #fff; }
.skm-node.ab { width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 18px; transform: rotate(45deg); }
.skm-node.ab > * { transform: rotate(-45deg); }
.skm-node.ab:hover { transform: rotate(45deg) scale(1.08); }
.skm-node.ab.sel { transform: rotate(45deg) scale(1.1); }
.skm-node.ab em { right: auto; bottom: auto; left: 50%; top: 50%; margin: 18px 0 0 18px; }
.skm-node.ab.on::after { content: '4'; position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; background: #f8d030; color: #23163f;
  font: italic 800 13px/22px 'Kanit', var(--font); text-align: center; transform: rotate(-45deg); box-shadow: 0 0 0 2px #fff; }
.skm-side { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
.skm-xp { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; border-radius: 4px 18px 4px 18px; background: #f8d030; color: #23163f; }
.skm-xp b { font: italic 900 34px/1 'Kanit', var(--font); }
.skm-xp span { font: italic 800 14px 'Kanit', var(--font); text-transform: uppercase; }
.skm-info { padding: 12px 14px; border-radius: 4px 18px 4px 18px; background: rgba(255,255,255,.07); }
.skm-info p { margin: 8px 0 10px; color: #c9bdf0; }
.skm-h { display: block; font: italic 800 17px 'Kanit', var(--font); text-transform: uppercase; }
.skm-ti { display: flex; align-items: center; gap: 10px; }
.skm-ti span { display: block; font: italic 800 12px 'Kanit', var(--font); text-transform: uppercase; }
.skm-ti b { display: block; font: italic 800 19px 'Kanit', var(--font); text-transform: uppercase; }
.skm-have { color: #f8d030 !important; font-weight: 700; }
.skm-need { font-size: 13px; }
.skm-ab { padding: 10px 14px; border-radius: 4px 18px 4px 18px; background: #1c1236; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.skm-ab > span { display: block; margin-bottom: 6px; font: italic 800 12px 'Kanit', var(--font); text-transform: uppercase; color: #c9bdf0; }
.skm-ab > div { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; }
.skm-ab > div img { grid-row: span 2; }
.skm-ab b { font: italic 800 16px 'Kanit', var(--font); text-transform: uppercase; color: var(--c); }
.skm-ab small { color: #c9bdf0; }
.skm-ab p { margin: 0; color: #c9bdf0; font-size: 13px; }
@media (max-width: 760px) { .skm-wrap { grid-template-columns: 1fr; } .skm-map { height: 56vh; } }
@media (prefers-reduced-motion: reduce) { .skm-node.can { animation: none; } }

/* Between the hub and a route (ui/routes-theme.js wipe): the screen covered, then uncovered. */
.wipe-dash, .wipe-shutter { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
/* Paldea dash: three slanted bands race across, a Poké Ball rolls in with the place's name, they race off */
.wipe-dash .band { position: absolute; top: -20%; height: 140%; width: 170%; left: -190%; transform: skewX(-18deg); transition: left .5s cubic-bezier(.75, 0, .25, 1); }
.wipe-dash .b1 { background: #f8d030; transition-delay: 0s; }
.wipe-dash .b2 { background: #ff4f9a; transition-delay: .06s; }
.wipe-dash .b3 { background: repeating-linear-gradient(-60deg, #2a1d4f 0 40px, #301f5c 40px 80px); transition-delay: .12s; }
.wipe-dash.in .band { left: -35%; }
.wipe-dash.out .band { left: 130%; }
.wipe-dash.out .b1 { transition-delay: .12s; } .wipe-dash.out .b2 { transition-delay: .06s; } .wipe-dash.out .b3 { transition-delay: 0s; }
.wipe-dash .lines { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.1) 22px 24px); }
.wipe-dash.in .lines { opacity: 1; transition-delay: .3s; }
.wipe-dash.out .lines { opacity: 0; transition-delay: 0s; }
.wipe-dash .ball { position: absolute; top: 46%; left: -20%; width: min(18vmin, 150px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-400deg); opacity: 0;
  border-radius: 50%; background: linear-gradient(180deg, #e8384a 0 46%, #1c1236 46% 54%, #f4f1fa 54%); box-shadow: 0 0 0 6px #1c1236;
  transition: left .62s cubic-bezier(.3, .9, .3, 1), transform .62s cubic-bezier(.3, .9, .3, 1), opacity .1s; }
.wipe-dash .ball::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px #1c1236; }
.wipe-dash.in .ball { left: 50%; transform: translate(-50%, -50%) rotate(0deg); opacity: 1; transition-delay: .25s; }
.wipe-dash.out .ball { left: 125%; transform: translate(-50%, -50%) rotate(400deg); transition-delay: 0s; }
.wipe-dash .title { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); opacity: 0; font: italic 800 clamp(22px, 4vw, 40px) 'Kanit', var(--font); text-transform: uppercase;
  color: #fff; white-space: nowrap; text-shadow: 4px 4px 0 #ff4f9a; transition: opacity .2s .35s; }
.wipe-dash.in .title { opacity: 1; }
.wipe-dash.out .title { opacity: 0; transition-delay: 0s; }
/* Poké Ball shutter: the red and white halves close, the button clicks and flashes, they open */
.wipe-shutter .sh-top, .wipe-shutter .sh-bot { position: absolute; left: -2%; width: 104%; height: 52%; transition: transform .42s cubic-bezier(.7, 0, .3, 1); }
.wipe-shutter .sh-top { top: 0; background: linear-gradient(180deg, #ff6b6b, #e8384a 60%, #c42438); transform: translateY(-101%); border-bottom: 12px solid #1c1236; }
.wipe-shutter .sh-bot { bottom: 0; background: linear-gradient(0deg, #d9d4e8, #f4f1fa 50%); transform: translateY(101%); border-top: 12px solid #1c1236; }
.wipe-shutter .sh-btn { position: absolute; left: 50%; top: 50%; width: min(16vmin, 140px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, #fff 0 38%, #e6e2f0 40% 52%, #1c1236 54%); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.wipe-shutter.in .sh-top, .wipe-shutter.in .sh-bot { transform: none; }
.wipe-shutter.in .sh-btn { transform: translate(-50%, -50%) scale(1); }
.wipe-shutter.click .sh-btn { box-shadow: 0 0 40px 18px rgba(255,255,255,.9); }
/* The Day Care during a run (ui/hub-ui.js renderBench): your team and who waits here, pick one of each to swap. */
.hub-panel .hub-box.bench-box { width: min(720px, 100%); }
.bench-h { margin: 10px 0 6px; font: italic 800 15px var(--pd-head, var(--font)); text-transform: uppercase; color: var(--pd-y, #ffd23f); }
.bench-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bench-cell { width: 116px; }
.bench-cell small { font-size: 11px; color: var(--pd-lilac, #c9bdf0); }
.bench-cell.sel { border-color: var(--pd-pink, #ff4f9a) !important; background: rgba(255,79,154,.18) !important; box-shadow: 0 0 0 2px var(--pd-pink, #ff4f9a); }
.bench-hint { margin-top: 10px; }

/* ---- The Routes tutorial (modes/routes-tut.js): Professor Maple's box, the generations, the TM ---- */
.prof-ov {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px 20px; background: linear-gradient(180deg, rgba(20,12,43,0) 30%, rgba(20,12,43,.55)); cursor: pointer;
  animation: fade .18s ease-out;
}
.prof-box {
  position: relative; width: min(780px, 100%); min-height: 128px; padding: 30px 28px 26px 168px;
  background: #fff; color: #23163f; border-radius: 6px 28px 6px 28px;
  box-shadow: 0 0 0 3px #23163f, 8px 9px 0 3px #ff4f9a, 0 22px 50px rgba(0,0,0,.45);
  animation: pdIn .22s cubic-bezier(.2,.9,.3,1.1) both;
}
.prof-face { position: absolute; left: 4px; bottom: 0; width: 150px; height: 170px; pointer-events: none; }
.prof-name {
  position: absolute; top: -17px; left: 150px; padding: 3px 24px 1px; color: #fff; background: #5a3fb0;
  font: italic 800 17px/1.3 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .02em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.prof-text { margin: 0; min-height: 3.6em; font: 700 17px/1.45 var(--font); white-space: pre-wrap; }
.prof-next { position: absolute; right: 18px; bottom: 10px; width: 18px; height: 12px; padding: 0; border: 0; background: #ff4f9a;
  clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: 0; cursor: pointer; }
.prof-next.ready { opacity: 1; animation: profBob .7s ease-in-out infinite alternate; }
@keyframes profBob { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
.prof-extra { margin: 0 0 12px; }
.prof-extra.hidden { display: none; }
.prof-demos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prof-demos figure { margin: 0; }
.prof-demos canvas { display: block; width: 100%; height: auto; border-radius: 4px 14px 4px 14px; background: linear-gradient(180deg, #2c1f57, #1c1236); }
.prof-demos figcaption { margin-top: 5px; display: flex; align-items: center; gap: 6px; font: italic 800 14px 'Kanit', var(--font); text-transform: uppercase; color: #5a3fb0; }
.prof-tm { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; background: #f8d030; border-radius: 4px 16px 4px 16px; }
.prof-tm b { display: block; font: italic 800 17px 'Kanit', var(--font); text-transform: uppercase; }
.prof-tm span { font-size: 13px; color: #5b4c80; }
@media (max-width: 640px), (max-height: 480px) {
  .prof-box { padding: 26px 16px 20px 104px; min-height: 104px; }
  .prof-face { width: 100px; height: 113px; }
  .prof-name { left: 92px; font-size: 14px; }
  .prof-text { font-size: 14px; }
  .prof-demos canvas { max-height: 22vh; object-fit: contain; }
}
.prof-gens {
  position: fixed; inset: 0; z-index: 88; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto;
  background: repeating-linear-gradient(-60deg, rgba(42,29,79,.9) 0 40px, rgba(50,33,96,.9) 40px 80px); animation: fade .2s ease-out;
}
.prof-gens-box { width: min(980px, 100%); margin: auto 0; text-align: center; color: #fff; }   /* (centred, but scrolls from the top when taller than the screen) */
.prof-gens-box h2 {
  display: inline-block; margin: 0 0 6px; padding: 3px 28px 1px; font: italic 800 28px/1.15 'Kanit', var(--font); text-transform: uppercase;
  color: #fff; background: #ff4f9a; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.prof-gens-box .sub { margin: 0 0 16px; color: #c9bdf0; }
.prof-gens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prof-gen {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; cursor: pointer;
  background: #fff; color: #23163f; border: 0; border-radius: 4px 20px 4px 20px; box-shadow: 6px 7px 0 #1c1236;
  font-family: var(--font); transition: transform .12s, background .12s, box-shadow .12s; animation: pdPop .3s cubic-bezier(.2,.9,.3,1.1) both;
}
.prof-gen:hover, .prof-gen:focus-visible { background: #f8d030; transform: translateY(-3px) rotate(-1deg); box-shadow: 6px 9px 0 #ff4f9a; outline: 0; }
.prof-gen b { font: italic 800 18px 'Kanit', var(--font); text-transform: uppercase; }
.prof-gen small { color: #5b4c80; font-size: 13px; }
.prof-gen-mons { display: flex; justify-content: center; margin: 2px 0; }
.prof-gen em { font-style: normal; font-size: 12px; color: #5b4c80; }
/* (skipping the tutorial: a starter to click, the one that gets the TM; modes/routes-tut.js pickGen) */
.prof-gen.pick { cursor: default; }
.prof-gen.pick:hover { background: #fff; transform: none; box-shadow: 6px 7px 0 #1c1236; }
.prof-gen.pick .prof-gen-pic { padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; transition: background .12s, transform .12s; }
.prof-gen.pick .prof-gen-pic:hover, .prof-gen.pick .prof-gen-pic:focus-visible { background: #f8d030; transform: translateY(-3px); outline: 0; }
@media (max-width: 760px) { .prof-gens-grid { grid-template-columns: repeat(2, 1fr); } }
.routes-box .routes-back { font-size: 15px; }

/* ---------- 31-10-2026: the pathway map (ui/map-ui.js) ---------- */
.hub-box.pm-box { width: min(1180px, 100%); }
.pm-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 16px; align-items: stretch; }
.pm-map {
  position: relative; min-height: 340px; height: min(62vh, 520px); border-radius: 6px 26px 6px 26px; overflow: hidden;
  background: radial-gradient(ellipse at 30% 20%, #8fd27a, #6cb85e 55%, #5aa452); box-shadow: inset 0 0 0 3px rgba(255,255,255,.8), inset 0 0 40px rgba(20,40,10,.35);
}
.pm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-wood { fill: #3f8a43; opacity: .55; }
.pm-sand { fill: #e6d39a; opacity: .5; }
.pm-pond { fill: #5aa8e0; opacity: .85; stroke: #cfeaff; stroke-width: 4; vector-effect: non-scaling-stroke; }
.pm-edge { fill: none; stroke: rgba(60,40,20,.35); stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pm-trail { fill: none; stroke: #f6ead0; stroke-width: 5; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .15s; }
.pm-trail.on { stroke: var(--pd-y, #f8d030); stroke-width: 7; stroke-dasharray: 1 11; animation: pmMarch 1s linear infinite; }
.pm-trail.rift { stroke: #d6b3ff; }
@keyframes pmMarch { to { stroke-dashoffset: -24; } }
.pm-center {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 8px 6px; border-radius: 50%; background: #fff; color: #d4246f; box-shadow: 0 0 0 3px #ff4f9a, 4px 5px 0 rgba(28,18,54,.5);
}
.pm-center span { position: absolute; top: 100%; margin-top: 6px; white-space: nowrap; font: italic 800 12px var(--pd-head, var(--font)); text-transform: uppercase;
  color: #fff; background: #1c1236; padding: 1px 8px; border-radius: 999px; }
.pm-back { opacity: .9; }
.pm-node {
  position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .15s; z-index: 1;
}
.pm-disc {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(160deg, var(--f0), var(--f1)); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ring, #f8d030), 4px 6px 0 6px rgba(28,18,54,.45);
}
.pm-disc > * { filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.pm-node.k-survive { --ring: #f8d030; }
.pm-node.k-defeat { --ring: #ff4f9a; }
.pm-node.k-alphas { --ring: #23163f; }
.pm-node.k-rift { --ring: #b06cff; }
.pm-n { position: absolute; top: -8px; left: -8px; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px; background: #1c1236; color: #fff;
  font: italic 800 14px/24px var(--pd-head, var(--font)); box-shadow: 0 0 0 2px #fff; }
.pm-lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 9px; white-space: nowrap; padding: 1px 9px; border-radius: 999px;
  background: rgba(28,18,54,.85); color: #fff; font: 700 12px var(--font); }
.pm-node:hover, .pm-node:focus-visible { outline: none; transform: translate(-50%, -50%) scale(1.08); }
.pm-node.on { transform: translate(-50%, -50%) scale(1.16); z-index: 2; }
.pm-node.on .pm-disc { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--pd-y, #f8d030), 0 0 24px 8px rgba(255,240,150,.7); }
.pm-node.on .pm-lbl { background: var(--pd-y, #f8d030); color: #23163f; }
.pm-leg canvas { image-rendering: pixelated; }
.pm-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: min(62vh, 520px); overflow-y: auto; }
.pm-head { display: flex; flex-direction: column; gap: 2px; }
.pm-head b { font: italic 800 20px var(--pd-head, var(--font)); text-transform: uppercase; color: var(--pd-y, #f8d030); }
.pm-head small { color: var(--pd-lilac, #c9bdf0); }
.pm-gold { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 12px; border-radius: 999px; background: #fff; color: #23163f; font-weight: 800; }
.pm-cards { display: flex; flex-direction: column; gap: 10px; }
.routes-ui .pm-card .map-art { height: 78px; }
.routes-ui .pm-card .map-name { font-size: 17px; }
.pm-rn { font-style: normal; color: var(--pd-pink2, #d4246f); margin-right: 4px; }
.pm-go { align-self: stretch; font-size: 19px; }
@media (max-width: 600px) {
  .pm-wrap { grid-template-columns: 1fr; }
  .pm-map { height: 46vh; min-height: 220px; }
  .pm-side { max-height: none; }
  .pm-node { width: 50px; height: 50px; }
  .pm-lbl { font-size: 10px; }
}
@media (max-height: 520px) {
  .pm-map { height: 70vh; min-height: 200px; }
  .pm-side { max-height: 70vh; }
  .pm-node { width: 48px; height: 48px; }
}
.vic-next { margin: 4px 0 10px; text-align: center; color: var(--pd-y, #f8d030); font-weight: 700; }
.prep-trip { flex-basis: 100%; color: var(--pd-y, #f8d030); font-size: 13px; font-weight: 700; }

/* ---------- the Routes home's Bag and Achievements, and their windows ---------- */
.routes-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.routes-row .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.routes-row .tr-portrait { border-radius: 6px; image-rendering: pixelated; flex: none; }
/* A party's Team window: whose team (ui/hub-ui.js teamTabs) */
.team-box .rbag-tabs { margin: 4px 0 10px; }
.tm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
/* The board by the hub's exit: this run's routes (modes/hub-scene.js routesBoard) */
.hub-panel .hub-box.board-box { width: min(520px, 100%); }
.hub-panel .hub-box.research-box { width: min(520px, 100%); }
.research-soon { display: grid; justify-items: center; gap: 6px; padding: 28px 16px 22px; text-align: center; border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.07); }
.research-soon b { font: italic 800 20px var(--pd-head, var(--font)); text-transform: uppercase; color: #f8d030; }
.research-soon small { color: var(--pd-lilac, #c9bdf0); max-width: 36ch; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 56vh; overflow-y: auto; }
.board-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.07); }
.board-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pd-y, #f8d030); color: #1d1240; font: italic 800 15px var(--pd-head, var(--font)); }
.board-list li b:not(.board-n) { display: block; font: italic 800 15px var(--pd-head, var(--font)); text-transform: uppercase; }
.board-list li small { color: var(--pd-lilac, #c9bdf0); }
.board-took { font: 800 14px var(--font); font-variant-numeric: tabular-nums; color: var(--pd-lilac, #c9bdf0); }
/* Leaving a run: save & quit, or end it (modes/waves.js leaveMenu); the home's Continue run */
.hub-panel .hub-box.leave-box { width: min(520px, 100%); }
.leave-opts { display: grid; gap: 10px; }
.leave-opts .btn { display: grid; justify-items: center; gap: 2px; padding: 12px 16px; }
.leave-opts .btn small, .routes-start .routes-cont { display: block; font: 600 12px var(--font); text-transform: none; opacity: .8; }
.routes-over { font-size: 14px; }
.routes-skip { font-size: 14px; }
/* The move tutor (ui/hub-shop.js drawTutor): a tab per Pokémon of your party */
.tutor-tabs { margin: 8px 0 10px; }
.tutor-tabs .rbag-tab { padding: 3px 14px 3px 4px; }
.tutor-pic { display: inline-flex; width: 34px; height: 32px; }
/* Your past runs (modes/routes-history.js) */
.hub-panel .hub-box.rh-box { width: min(980px, 100%); max-height: 88vh; overflow-y: auto; }
.rh-h { margin: 12px 0 8px; font: italic 800 16px var(--pd-head, var(--font)); text-transform: uppercase; }
.rh-best { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rh-top { position: relative; display: grid; justify-items: start; gap: 6px; padding: 12px 14px; border: 2px solid transparent; border-radius: 4px 18px 4px 18px; background: rgba(255,255,255,.08); color: inherit; text-align: left; cursor: pointer; font: inherit; }
.rh-top[aria-expanded="true"] { border-color: var(--pd-y, #f8d030); }
.rh-top:hover, .rh-line:hover { background: rgba(255,255,255,.14); }
.rh-rank { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: italic 800 16px var(--pd-head, var(--font)); color: #1d1240; background: #c9bdf0; }
.rh-rank.r1 { background: #f8d030; } .rh-rank.r2 { background: #dfe6f0; } .rh-rank.r3 { background: #e0a070; }
.rh-big { display: flex; align-items: baseline; gap: 6px; font: italic 800 34px/1 var(--pd-head, var(--font)); font-variant-numeric: tabular-nums; }
.rh-big small { font: 700 13px var(--font); color: var(--pd-lilac, #c9bdf0); }
.rh-meta, .rh-when, .rh-end { font-size: 12px; color: var(--pd-lilac, #c9bdf0); }
.rh-team { display: inline-flex; gap: 2px; }
.rh-line .rh-team { min-width: 150px; }
.rh-mon { display: inline-block; line-height: 0; }
.rh-mon canvas { image-rendering: pixelated; }
.rh-mon.out canvas { filter: grayscale(1) opacity(.55); }
.rh-list { display: grid; gap: 6px; }
.rh-row { border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.05); }
.rh-row.open { background: rgba(255,255,255,.09); }
.rh-line { width: 100%; display: grid; grid-template-columns: 130px auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.rh-top:focus-visible, .rh-line:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rh-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rh-stat { display: grid; }
.rh-stat b { font: italic 800 17px var(--pd-head, var(--font)); font-variant-numeric: tabular-nums; }
.rh-stat small { font-size: 11px; color: var(--pd-lilac, #c9bdf0); }
.rh-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; padding: 4px 12px 12px; }
.rh-best + .rh-detail { padding: 10px 0 0; }
.rh-card { padding: 10px; border-radius: 10px; background: rgba(0,0,0,.18); }
.rh-card.out { opacity: .75; }
.rh-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rh-card-head b { display: block; font: italic 800 15px var(--pd-head, var(--font)); text-transform: uppercase; }
.rh-card-head small { display: block; font-size: 12px; color: var(--pd-lilac, #c9bdf0); }
.rh-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rh-moves li { display: grid; grid-template-columns: 18px 1fr 54px auto; align-items: center; gap: 6px; font-size: 12px; }
.rh-moves li small { color: var(--pd-y, #f8d030); }
.rh-moves i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.rh-moves u { display: block; height: 100%; background: #5fe08a; }
.rh-moves b { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.rh-none { padding: 30px 0; text-align: center; color: var(--pd-lilac, #c9bdf0); }
@media (max-width: 760px) { .rh-line { grid-template-columns: 1fr; gap: 6px; } }
/* How your trainer looks in Routes (ui/trainer-look.js) */
.hub-panel .hub-box.tl-box { width: min(860px, 100%); }
.tl-body { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
.tl-stage { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 16px 10px; border-radius: 4px 18px 4px 18px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,.03) 70%); }
.tl-walk { width: 144px; height: 208px; image-rendering: pixelated; }
.tl-name { font: italic 800 20px var(--pd-head, var(--font)); text-transform: uppercase; text-align: center; }
.tl-pick { min-width: 0; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; padding: 2px 4px 2px 2px; }
.tl-card { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 2px solid transparent; border-radius: 10px; background: rgba(255,255,255,.07); color: inherit; cursor: pointer; font: 700 12px var(--font); }
.tl-card:hover { background: rgba(255,255,255,.14); }
.tl-card.on { border-color: var(--pd-y, #f8d030); background: rgba(248,208,48,.16); }
.tl-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tl-card .tr-portrait { border-radius: 8px; image-rendering: pixelated; }
@media (max-width: 640px) { .tl-body { grid-template-columns: 1fr; } .tl-walk { width: 96px; height: 139px; } }
.routes-row.hidden { display: none; }
.hub-panel .hub-box.rach-box, .hub-panel .hub-box.rbag-box { width: min(820px, 100%); }
.rach-gold { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: italic 800 18px var(--pd-head, var(--font)); color: var(--pd-y, #f8d030); }
.rach-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rach-tab { border: 0; cursor: pointer; padding: 5px 16px; clip-path: var(--pd-slant); background: rgba(255,255,255,.12); color: #fff; font: italic 800 14px var(--pd-head, var(--font)); text-transform: uppercase; }
.rach-tab.on { background: var(--pd-y, #f8d030); color: #23163f; }
.rach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.rach-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.08); }
.rach-card.done { background: rgba(248,208,48,.18); }
.rach-ico { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.rach-ico em { position: absolute; right: -6px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--pd-pink, #ff4f9a); color: #fff; font: italic 800 12px/20px var(--pd-head, var(--font)); text-align: center; }
.rach-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rach-txt b { font: italic 800 15px var(--pd-head, var(--font)); text-transform: uppercase; }
.rach-txt small { color: var(--pd-lilac, #c9bdf0); }
.rach-bar { display: block; height: 7px; margin-top: 3px; border-radius: 4px; background: rgba(10,6,24,.7); overflow: hidden; }
.rach-bar u { display: block; height: 100%; background: linear-gradient(90deg, var(--pd-y, #f8d030), var(--pd-pink, #ff4f9a)); }
.rach-num { font-size: 12px; color: #fff; }
.rach-rw { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--pd-y, #f8d030); }
.rbag-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.rbag-it { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.07); }
.rbag-it.have { background: rgba(95,224,138,.14); }
.rbag-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: #fff; }
.rbag-it:not(.have) .rbag-ico { opacity: .7; }
.rbag-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rbag-txt b { font: italic 800 15px var(--pd-head, var(--font)); text-transform: uppercase; }
.rbag-txt b small { font: 12px var(--font); color: var(--pd-y, #f8d030); text-transform: none; }
.rbag-txt small { color: var(--pd-lilac, #c9bdf0); }
.rbag-txt .rbag-next { color: #9fe8b4; }
.rbag-buy { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.rbag-done { flex: none; font-size: 12px; font-weight: 800; color: #9fe8b4; }
.rbag-h { margin: 14px 0 4px; }
.rbag-carry { display: flex; flex-wrap: wrap; gap: 8px; }
.rbag-wallet { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 2px 0 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rbag-wallet span { display: inline-flex; align-items: center; gap: 6px; }
.rbag-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rbag-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.08); color: inherit; font: italic 800 14px var(--pd-head, var(--font)); text-transform: uppercase; cursor: pointer; }
.rbag-tab:hover { background: rgba(255,255,255,.16); }
.rbag-tab.on { background: var(--pd-y, #f8d030); color: #1d1240; }
.rbag-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rbag-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.25); font: 800 12px var(--font); font-style: normal; text-align: center; }
.rbag-pocket { min-height: 220px; }
.rbag-pocket .hub-note { margin: 0 0 8px; }
.rbag-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.rbag-slot { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.07); }
.rbag-slot.have { background: rgba(95,224,138,.14); }
.rbag-slot.empty .rbag-ico { background: rgba(255,255,255,.12); border: 2px dashed rgba(255,255,255,.3); }
.rbag-slot.locked { opacity: .55; }
.rbag-slot.locked .rbag-ico { background: rgba(255,255,255,.12); }
.rbag-key { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.14); font-weight: 800; }
.rbag-count { flex: none; font: italic 800 20px var(--pd-head, var(--font)); font-variant-numeric: tabular-nums; }
.rbag-it:not(.have) .rbag-count { opacity: .5; }
.rbag-orb { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; border-radius: 999px; background: rgba(255,255,255,.1); }
@media (max-width: 760px) { .rach-list, .rbag-list, .rbag-slots { grid-template-columns: 1fr; } }

/* ---------- the pause of a wave run (ui/run-ui.js routesPause) ---------- */
.pause-box.rp-box { width: min(980px, 100%); }
.pause-sum.rp { display: flex; flex-direction: column; gap: 10px; }
.rp-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.08); }
.rp-wave { font: italic 800 18px var(--pd-head, var(--font)); text-transform: uppercase; color: var(--pd-y, #f8d030); }
.rp-wave small { font-size: 13px; color: #fff; }
.rp-prog { margin-left: auto; font: italic 800 17px var(--pd-head, var(--font)); }
.rp-money { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rp-money > span { display: inline-flex; align-items: center; gap: 6px; }
.rp-money b { font: italic 800 18px var(--pd-head, var(--font)); color: var(--pd-y, #f8d030); }
.rp-money small { color: var(--pd-lilac, #c9bdf0); }
.rp-trainer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 8px 12px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.06); }
.rp-who { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.rp-who b { font: italic 800 16px var(--pd-head, var(--font)); text-transform: uppercase; }
.rp-who small { color: var(--pd-lilac, #c9bdf0); font-size: 12px; }
.rp-bar { display: block; width: 160px; max-width: 100%; height: 8px; margin: 3px 0 1px; border-radius: 4px; background: rgba(10,6,24,.8); overflow: hidden; }
.rp-bar u { display: block; height: 100%; }
.rp-bar.xp { height: 4px; }
.rp-bar.xp u { background: #4fd1ff; }
.rp-items { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-items > small { width: 100%; color: var(--pd-lilac, #c9bdf0); }
.rp-item { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 4px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; }
.rp-item.empty { opacity: .45; padding-left: 8px; }
.rp-item kbd { font-size: 10px; }
.rp-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.rp-mon { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.08); }
.rp-mon.out { opacity: .55; }
.rp-head { display: flex; align-items: center; gap: 8px; }
.rp-head b { font: italic 800 15px var(--pd-head, var(--font)); text-transform: uppercase; }
.rp-head em { font-style: normal; color: var(--pd-y, #f8d030); font-size: 13px; }
.rp-head small { color: var(--pd-lilac, #c9bdf0); font-size: 12px; }
.rp-pic canvas { image-rendering: pixelated; }
.rp-mvs { display: flex; flex-direction: column; gap: 4px; }
.rp-mv { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(10,6,24,.5); cursor: help; font-size: 13px; }
.rp-mv span { display: flex; flex-direction: column; line-height: 1.15; }
.rp-mv small { color: var(--pd-lilac, #c9bdf0); font-size: 11px; }
.rp-mv.none { opacity: .5; cursor: default; }
.rp-mv:hover, .rp-mv:focus-visible { outline: none; background: rgba(248,208,48,.25); }
.rp-held { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rp-held .none { color: var(--pd-lilac, #c9bdf0); }
.rp-nums { display: flex; gap: 6px; }
.rp-nums span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 3px; border-radius: 6px; background: rgba(10,6,24,.4); font-size: 11px; color: var(--pd-lilac, #c9bdf0); }
.rp-nums b { font: italic 800 15px var(--pd-head, var(--font)); color: #fff; }
.vic-mv[data-mtip], .ro-moves li[data-mtip] { cursor: help; }
.tm-tip { z-index: 120; }
.pm-home span { left: -6px; }
.pm-back span { right: -6px; }
.rp-head > div { flex: 1; min-width: 0; }
.rp-mon .rp-bar { width: 100%; }
.rp-team { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.pm-go { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -10px 16px rgba(28,18,54,.85); }
@media (max-height: 520px) { .pm-wrap { grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 10px; } .routes-ui .pm-card .map-art { height: 56px; } }

/* ---------- 01-11-2026: PokéSurvivor Routes in a party (net/routes-coop.js) ---------- */
.routes-party { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.routes-party.hidden { display: none; }
.rc-bar {
  position: fixed; top: 128px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: calc(100vw - 24px); pointer-events: none;
}
.rc-bar > * { pointer-events: auto; }
.rc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rc-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 12px; border-radius: 999px; background: rgba(28,18,54,.88);
  box-shadow: inset 0 0 0 2px var(--pc, #fff); color: #fff; font-size: 13px;
}
.rc-chip b { font: italic 800 13px var(--pd-head, var(--font)); text-transform: uppercase; color: var(--pc, #fff); }
.rc-chip small { color: var(--pd-lilac, #c9bdf0); }
.rc-chip.ok small { color: #9fe8b4; font-weight: 800; }
.rc-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 6px 14px;
  border-radius: 4px 16px 4px 16px; background: rgba(28,18,54,.94); box-shadow: 0 0 0 2px #fff, 4px 5px 0 2px var(--pd-pink, #ff4f9a); color: #fff; font-size: 13px;
}
.rc-line em { font-style: normal; color: var(--pd-y, #f8d030); font-weight: 700; }
.rc-ask { align-items: center; z-index: 60; }
.hub-box.rc-box { width: min(460px, 100%); text-align: center; }
.rc-box ul { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-box li { padding: 6px 12px; border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.1); font-weight: 700; }
.rc-box .pm-gold { margin: 0 auto 6px; }
.rc-box .hub-foot { display: flex; justify-content: center; gap: 12px; }

/* ============ The Pokédex (ui/pokedex.js), "Twin Cards" (03-11-2026) ============
 * Two white cards on the violet stripes: the list on the left, the entry on the right (its hero in the
 * Pokémon's types' colors, four tabs, the move player docked above the moves table). */
.dx-ov { align-items: center; background: rgba(28,18,54,.82); }
.dx-wrap { position: relative; width: min(1240px, 100%); height: min(700px, 92vh); display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); gap: 12px 22px; padding: 4px 10px 10px 4px; color: #23163f; font-family: var(--font); }
.dx-wrap::before { content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(118deg, transparent 0 34%, #ff4f9a 34% 34.6%, transparent 34.6%), repeating-linear-gradient(-60deg, transparent 0 40px, rgba(255,255,255,.035) 40px 80px); }
.dx-top { grid-column: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.dx-top > b { font: italic 800 26px/1 'Kanit', var(--font); text-transform: uppercase; color: #23163f; background: #f8d030; padding: 4px 24px 2px; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.dx-top small { color: #c9bdf0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-top small b { color: #fff; }
.dx-top .hub-x { position: static; margin-left: auto; }
.dx-cardL, .dx-cardR { min-height: 0; background: #fff; border-radius: 6px 24px 6px 24px; }
.dx-cardL { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 14px 12px 12px 14px; box-shadow: 0 0 0 3px #fff, 8px 9px 0 3px #ff4f9a; }
.dx-cardR { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); overflow: hidden; box-shadow: 0 0 0 3px #fff, 8px 9px 0 3px #f0b818; }
.dx-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-sel { appearance: none; font: 600 12px var(--font); color: #fff; background-color: #23163f; border: 0; border-radius: 4px; padding: 5px 24px 5px 9px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #f8d030 50%), linear-gradient(135deg, #f8d030 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.dx-tog { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--font); border: 0; border-radius: 4px; padding: 5px 10px; background: #23163f; color: #fff; cursor: pointer; }
.dx-tog[aria-pressed="true"] { background: #ff4f9a; }
.dx-search { flex: 1 1 140px; min-width: 120px; padding: 5px 10px; border: 2px solid #23163f; border-radius: 4px; background: #fff; color: #23163f; font: 600 12px var(--font); }
.dx-search:focus { outline: none; border-color: #ff4f9a; }
.dx-regs { flex: 1 1 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin-bottom: 2px; }
.dx-reg { border: 0; padding: 2px; background: transparent; border-radius: 50%; cursor: pointer; opacity: .55; transition: opacity .15s, transform .2s cubic-bezier(.3,1.6,.5,1); }
.dx-reg svg { display: block; width: 100%; max-width: 42px; height: auto; margin: 0 auto; filter: drop-shadow(2px 2px 0 rgba(35,22,63,.25)); }
.dx-reg:hover { opacity: .9; transform: scale(1.08); }
.dx-reg[aria-pressed="true"] { opacity: 1; background: #f8d030; transform: scale(1.08); }
.dx-regs:not(:has([aria-pressed="true"])) .dx-reg { opacity: 1; }
.dx-reg:focus-visible { outline: 3px solid #ff4f9a; outline-offset: 1px; }
.dx-sel:focus-visible, .dx-tog:focus-visible, .dx-row:focus-visible, .dx-tabs button:focus-visible, .dx-mt th:focus-visible, .dx-mt tr:focus-visible, .dx-plus:focus-visible { outline: 3px solid #f8d030; outline-offset: 1px; }
.dx-roster { display: grid; align-content: start; gap: 3px; overflow-y: auto; min-height: 0; padding-right: 16px; }
.dx-row { display: grid; grid-template-columns: 44px 54px minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 4px; border: 0; border-radius: 4px;
  background: transparent; color: #23163f; text-align: left; cursor: pointer; font-family: var(--font); }
.dx-row:nth-child(odd) { background: #f4f1fb; }
.dx-row:hover { background: #fff6cc; }
.dx-row.on { background: #23163f; color: #fff; }
.dx-row.on b { color: #f8d030; opacity: 1; }
.dx-row b { font-size: 12px; font-weight: 500; opacity: .65; }
.dx-nm { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-row.un .dx-nm { color: #a59bc0; }
.dx-row.un canvas, .dx-big.un canvas, .dx-evo-f.un canvas, .dx-line .un canvas { filter: brightness(0); opacity: .45; }
.dx-row.on.un canvas { filter: brightness(0) invert(1); opacity: .35; }
.dx-pic { width: 44px; height: 42px; }
.dx-none { grid-column: 1 / -1; color: #5b4c80; text-align: center; padding: 24px 0; }
.dx-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #5b4c80; }
.dx-hero { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 20px 10px 14px; color: #fff;
  background: linear-gradient(118deg, var(--c1) 0 62%, var(--c2) 62% 100%); }
.dx-big { width: 132px; height: 120px; display: grid; place-items: center; }
.dx-id { min-width: 0; }
.dx-id h3 { margin: 0; font: italic 800 38px/1 'Kanit', var(--font); text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 rgba(28,18,54,.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-id p { margin: 4px 0 7px; font-size: 13px; color: #fff; text-shadow: 0 1px 0 rgba(28,18,54,.4); }
.dx-types { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-type { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; box-shadow: 0 0 0 2px #fff; }
.dx-line { display: flex; align-items: center; gap: 2px; max-width: 290px; overflow-x: auto; scrollbar-width: none; background: rgba(28,18,54,.35); border-radius: 8px; padding: 3px 6px; }
.dx-line:empty { display: none; }
.dx-line::-webkit-scrollbar { display: none; }
.dx-line button { flex: 0 0 auto; border: 0; background: transparent; padding: 1px; border-radius: 6px; cursor: pointer; }
.dx-line button.on { background: rgba(255,255,255,.32); }
.dx-line i { flex: 0 0 auto; font-style: normal; font-size: 9.5px; color: #f8d030; white-space: nowrap; }
.dx-lpic { display: block; width: 52px; height: 48px; }
.dx-tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 3px solid #23163f; }
.dx-tabs button { border: 0; background: #f4f1fb; color: #5b4c80; font: italic 800 16px 'Kanit', var(--font); text-transform: uppercase; padding: 6px 22px 4px; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.dx-tabs button[aria-selected="true"] { background: #23163f; color: #f8d030; }
.dx-tabs .mt-badge { margin-left: 4px; }
.dx-player { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; margin: 12px 20px 0; padding: 10px; border-radius: 4px 16px 4px 16px; background: #23163f; color: #fff; }
.dx-player.hidden { display: none; }
.dx-screen { position: relative; width: 300px; height: 186px; border-radius: 6px; overflow: hidden; background: #0d0f1a; }
.dx-screen .mp-pop.mp-dock { position: absolute; inset: 0; padding: 0; border-radius: 6px; box-shadow: none; background: #0d0f1a; }
.dx-screen .mp-dock .mp-screen, .dx-screen .mp-dock .mp-screen iframe { width: 300px; height: 186px; border-radius: 6px; }
.dx-pinfo h5 { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: italic 800 18px 'Kanit', var(--font); text-transform: uppercase; }
.dx-pinfo p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; }
.dx-pinfo dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 12px; }
.dx-pinfo dt { color: #c9bdf0; } .dx-pinfo dd { margin: 0; font-weight: 600; }
.dx-body { min-height: 0; overflow-y: auto; padding: 14px 34px 16px 20px; }
.dx-locked { margin: 30px auto; max-width: 40ch; text-align: center; color: #5b4c80; font-size: 14px; }
.dx-h { margin: 14px 0 6px; font: italic 800 14px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .06em; color: #d4246f; }
.dx-note { margin: 8px 0 0; font-size: 12px; color: #5b4c80; }
.dx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; }
.dx-facts dt { font: italic 700 11px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .06em; color: #5b4c80; }
.dx-facts dd { margin: 0; font-size: 13.5px; }
/* Your record with a line (ui/pokedex.js record, 04-11-2026): three counters, then the Alpha and legendary badges. */
/* the record as five stamps (ui/stamps.js record), each a little tilted like a stamp pressed on the page */
.dx-rec { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dx-rec-s { display: grid; justify-items: center; align-content: start; gap: 1px; padding: 6px 2px 8px; border-radius: 12px; background: #f4f1fb; text-align: center; }
.dx-rec-s svg { width: 86px; height: 86px; margin-bottom: 3px; filter: drop-shadow(0 3px 0 rgba(28, 18, 54, .22)); transform: rotate(-4deg); transition: transform .2s; }
.dx-rec-s:nth-child(even) svg { transform: rotate(3deg); }
.dx-rec-s:hover svg { transform: rotate(0) scale(1.06); }
.dx-rec b { font: italic 800 18px 'Kanit', var(--font); color: #23163f; line-height: 1.1; }
.dx-rec small { font-size: 10.5px; font-weight: 600; color: #5b4c80; line-height: 1.15; }
.dx-rec-s.none svg { filter: grayscale(1); opacity: .4; }
.dx-rec-s.none b { color: #8c80a8; }
@media (max-width: 640px) { .dx-rec { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dx-rec-s svg { width: 72px; height: 72px; } }
.dx-evo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dx-evo-n { display: flex; align-items: center; gap: 4px; }
.dx-evo-k { display: grid; gap: 4px; }
.dx-evo-step { display: flex; align-items: center; gap: 4px; }
.dx-evo-arr { font-size: 11px; font-weight: 600; text-align: center; color: #23163f; min-width: 40px; display: grid; justify-items: center; }
.dx-evo-arr::after { content: "▶"; color: #ff4f9a; font-size: 13px; }
.dx-evo-f { display: grid; justify-items: center; padding: 3px 6px; border: 0; border-radius: 8px; background: #f4f1fb; color: #23163f; cursor: pointer; font-family: var(--font); }
.dx-evo-f:hover { background: #fff6cc; }
.dx-evo-f.on { box-shadow: inset 0 0 0 2px #ff4f9a; background: #ffe6f1; }
.dx-evo-f small { font-size: 11px; font-weight: 600; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-evo-pic { width: 60px; height: 56px; }
.dx-stats { display: grid; gap: 7px; font-variant-numeric: tabular-nums; }
.dx-sr, .dx-sh { display: grid; grid-template-columns: 76px 40px minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 13.5px; }
.dx-sh { font-size: 11.5px; color: #5b4c80; }
.dx-sh span:nth-child(2), .dx-sh span:nth-child(4), .dx-sr b, .dx-at { text-align: right; }
.dx-sum { border-top: 1px dashed rgba(35,22,63,.25); padding-top: 5px; font-weight: 700; }
.dx-lb { font: italic 700 12.5px 'Kanit', var(--font); text-transform: uppercase; white-space: nowrap; }
.dx-bar { position: relative; height: 12px; border-radius: 6px; background: #ebe6f6; overflow: hidden; }
.dx-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.dx-bar i.g { background: repeating-linear-gradient(45deg, rgba(35,22,63,.30) 0 3px, rgba(35,22,63,.12) 3px 6px); }
.dx-train { display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.dx-pts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.dx-chip { font-weight: 700; font-size: 12.5px; padding: 2px 10px; border-radius: 3px; white-space: nowrap; }
.dx-chip.iv { background: #4fd98a; color: #0d3a22; } .dx-chip.ev { background: #6cc6ff; color: #0d2a44; }
.dx-evt { font-size: 12px; }
.dx-total { height: 6px; border-radius: 3px; background: #ebe6f6; overflow: hidden; } .dx-total i { display: block; height: 100%; background: #ff4f9a; }
.dx-train table { width: 100%; border-collapse: collapse; font-size: 13px; color: inherit; }
.dx-train th { font: italic 700 11px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 0 6px 4px; color: #5b4c80; white-space: nowrap; }
.dx-train td { padding: 5px 6px; }
.dx-train tbody tr:nth-child(odd) td { background: #f4f1fb; }
.dx-train .bw { width: auto; }
.dx-body:has(.dx-train) { padding-top: 8px; padding-bottom: 6px; }
.dx-train { gap: 5px; }
.dx-train .dx-pts { justify-content: flex-start; gap: 10px; flex-wrap: nowrap; } .dx-train .dx-pts .dx-h { margin: 0; }
.dx-rng { font-size: 11.5px; color: #5b4c80; white-space: nowrap; } .dx-train .dx-chip { margin-left: auto; font-size: 12px; padding: 1px 9px; }
.dx-lvh { width: 56px; text-align: right; font: italic 700 11px 'Kanit', var(--font); text-transform: uppercase; color: #5b4c80; white-space: nowrap; }
.dx-train td { padding: 2px 6px; } .dx-train .dx-plus { width: 20px; height: 20px; font-size: 14px; } .dx-train .dx-seg, .dx-train .dx-evbar { height: 10px; }
.dx-train .dx-lb { width: 84px; } .dx-train table + .dx-pts { margin-top: 6px; } .dx-train .dx-note { margin-top: 2px; } .dx-train .v { width: 40px; text-align: right; } .dx-train .p { width: 26px; } .dx-train .r { text-align: right; }
.dx-res { font-weight: 700; width: 56px; }
.dx-seg { display: grid; grid-template-columns: repeat(31, 1fr); gap: 1px; height: 11px; }
.dx-seg i { background: #ebe6f6; } .dx-seg i.on { background: #1f9c58; } .dx-seg.full i.on { background: #f0b818; }
.dx-evbar { display: block; height: 11px; border-radius: 6px; background: #ebe6f6; overflow: hidden; } .dx-evbar i { display: block; height: 100%; background: #2f8fd6; border-radius: 6px; }
.dx-plus { border: 0; width: 22px; height: 22px; border-radius: 4px; background: #f8d030; color: #23163f; font: 700 15px/1 var(--font); display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
.dx-plus:disabled { opacity: .28; cursor: default; }
.dx-mvbody { padding-top: 10px; }
.dx-mt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: inherit; font-variant-numeric: tabular-nums; }
.dx-mt th { position: sticky; top: -10px; z-index: 2; background: #fff; color: #5b4c80; border-bottom: 2px solid #23163f; font: italic 700 10.5px 'Kanit', var(--font); text-transform: uppercase;
  letter-spacing: .05em; text-align: left; padding: 6px; white-space: nowrap; cursor: pointer; user-select: none; }
.dx-mt th[aria-sort="ascending"]::after { content: " ▲"; } .dx-mt th[aria-sort="descending"]::after { content: " ▼"; }
.dx-mt .r { text-align: right; }
.dx-mt td { padding: 5px 6px; white-space: nowrap; border-bottom: 1px solid #e4ddf3; }
.dx-m { cursor: pointer; }
.dx-m:hover td { background: #fff6cc; }
.dx-m.on td { background: #f8d030; }
.dx-m.lock td:not(:last-child) { opacity: .62; }
.dx-mn { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.dx-role { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; background: #ebe6f6; }
.dx-role.active { background: #ff4f9a; color: #fff; }
.dx-eff { white-space: normal !important; font-size: 11.5px; max-width: 130px; line-height: 1.25; }
.dx-dim { opacity: .4; }
.dx-grp td { font: italic 800 11px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .07em; color: #d4246f; padding-top: 10px; border-bottom: 0; }
.dx-get { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; white-space: nowrap; }
.dx-get.g0 { background: #4fd98a; color: #0d3a22; } .dx-get.g1 { background: #f8d030; color: #23163f; } .dx-get.g2 { background: #ebe6f6; color: #5b4c80; }
/* ---- what the old menu collection brought in when the two screens became one (05-11-2026):
 * the filter rows, the rarity and shiny tags on the hero, the dark partner bar, "Your collection"
 * and the start move / nature / ability pickers on a white card.
 * The design: tools/menu-mockups/screen-pokedex.html. ---- */
.dx-filters { gap: 8px; }
.dx-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.dx-frow .lbl { font: italic 700 11px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .06em; color: #5b4c80; }
.dx-cardL, .dx-cardL > *, .dx-frow, .dx-cardR, .dx-cardR > * { min-width: 0; }
.dx-filters .dx-tog { height: 32px; padding: 0 13px; font-size: 13px; }
.dx-filters .dx-sel { height: 32px; }
.dx-filters .dx-search { flex: 1 1 160px; height: 34px; margin: 0; }
.dx-filters .dx-seg { display: inline-flex; align-items: stretch; height: 32px; border-radius: 4px; overflow: hidden; }
.dx-filters .dx-seg .dx-tog { border-radius: 0; padding: 0 14px; }
.dx-filters .dx-seg .dx-tog + .dx-tog { box-shadow: inset 1px 0 0 rgba(255,255,255,.15); }
.dx-filters .dx-tog.ico { width: 34px; padding: 0; justify-content: center; }
.dx-filters .dx-tog.rar { padding: 0 9px; gap: 3px; }
.dx-tog.rar i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.dx-tog .st { color: #f8d030; letter-spacing: -1px; }
.dx-sort { margin-left: auto; }
/* A row's marks: its types, the shiny you own, the favourite star, and the Poké Ball of one you
 * own (a crown when it is your partner). */
.dx-badges { display: flex; align-items: center; gap: 3px; }
.dx-badges .fav, .dx-badges .shn { flex: 0 0 auto; }
.dx-mark { display: block; }
/* The hero's two extra tags: how rare it is, and whether you own its shiny. */
.dx-rar { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 4px; background: rgba(28,18,54,.45); color: #fff;
  font: 600 12px var(--font); box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.dx-rar b { color: var(--rc, #9fb1c9); letter-spacing: -1px; }
.dx-shiny-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 4px; background: #9ae6ff; color: #0d2a44; font: 700 12px var(--font); }
/* The partner bar: normal or shiny, favourite, who your partner is now and the yellow button. */
.dx-partner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 20px 0; padding: 8px 10px 8px 12px;
  border-radius: 4px 16px 4px 16px; background: #23163f; color: #fff; }
.dx-partner.hidden { display: none; }
.dx-partner .now { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: #c9bdf0; }
.dx-partner .now .ava { width: 30px; height: 30px; }
.dx-partner .now b { color: #fff; }
.dx-partner .btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 22px; font-size: 15px; }
.dx-pseg { display: inline-flex; padding: 2px; border-radius: 6px; background: rgba(255,255,255,.1); }
.dx-pseg button { border: 0; padding: 4px 12px; border-radius: 4px; background: none; color: #c9bdf0; font: 600 12px var(--font);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.dx-pseg button[aria-pressed="true"] { background: #fff; color: #23163f; }
.dx-favbtn { border: 0; padding: 5px 12px; border-radius: 4px; background: rgba(255,255,255,.1); color: #fff; font: 600 12px var(--font);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dx-favbtn[aria-pressed="true"] { background: rgba(248,208,48,.18); box-shadow: inset 0 0 0 1.5px #f8d030; }
.dx-pseg button:focus-visible, .dx-favbtn:focus-visible { outline: 3px solid #f8d030; outline-offset: 1px; }
/* "Your collection": what you have of this one, in the About tab. */
.dx-collect { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.dx-collect div { padding: 6px 10px; border-radius: 4px 12px 4px 12px; background: #f4f1fb; }
.dx-collect b { display: block; font: italic 800 18px 'Kanit', var(--font); color: #23163f; line-height: 1.1; }
.dx-collect small { font-size: 11px; font-weight: 600; color: #5b4c80; }
/* The start move / nature / ability pickers (.mon-extra, far above) on the Pokédex's white card. */
.dx-body .mon-extra.dx-mx { margin: 0; padding: 8px 12px; border-radius: 4px 14px 4px 14px; background: #f4f1fb; color: #23163f; font-size: 13.5px; }
.dx-mx .mx-row > span:first-child { min-width: 96px; color: #5b4c80; font: italic 700 11px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .06em; }
.dx-mx .mx-row small, .dx-mx .mx-desc { color: #5b4c80; }
.dx-mx .mx-desc { margin: 0 0 4px; font-size: 12px; }
.dx-mx .gold { color: #d4246f; }
.dx-mx .mx-row .btn.small { margin-left: auto; padding: 3px 12px; font-size: 12.5px; }
.dx-mx .ban-picker { margin-top: 6px; }
.dx-mx .ban-moves .chip { background: #fff; border-color: rgba(35,22,63,.22); color: #23163f; text-shadow: none; }
.dx-mx .ban-moves .chip.on { background: #23163f; border-color: #23163f; color: #fff; }

@media (max-width: 860px) {
  .dx-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 34%) minmax(0, 1fr); height: 94vh; gap: 10px; }
  .dx-cardL { grid-row: 2; } .dx-cardR { grid-column: 1; grid-row: 3; }
  .dx-hero { grid-template-columns: 90px minmax(0, 1fr); } .dx-big { width: 90px; height: 82px; } .dx-big canvas { max-width: 100%; }
  .dx-line { grid-column: 1 / -1; max-width: none; }
  .dx-id h3 { font-size: 28px; }
  .dx-player { grid-template-columns: minmax(0, 1fr); margin: 8px 10px 0; }
  .dx-screen { justify-self: center; }
  .dx-facts { grid-template-columns: minmax(0, 1fr); }
  .dx-tabs { gap: 2px; padding: 8px 8px 0; }
  .dx-tabs button { flex: 1 1 auto; padding: 5px 8px 3px; font-size: 13px; }
  .dx-body { padding: 10px 26px 12px 12px; }
}

/* A landscape phone (844 × 390 and the like): the screen is wide, only short, so the two cards
   stay side by side with everything a size smaller, and the region stamps step aside.
   (The Movebook, which borrows this frame, has its own block under #movebook-body further down.) */
@media (max-height: 520px) {
  .dx-wrap { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    height: 100%; width: 100%; gap: 4px 12px; padding: 0 6px 6px 2px; }
  .dx-wrap::before { display: none; }
  .dx-cardL { grid-column: 1; grid-row: 2; gap: 5px; padding: 7px 6px 6px 8px; border-radius: 4px 16px 4px 16px;
    box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px #ff4f9a; }
  .dx-cardR { grid-column: 2; grid-row: 1 / 3; border-radius: 4px 16px 4px 16px; box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px #f0b818; }
  .dx-top > b { font-size: 17px; padding: 2px 16px 1px; }
  .dx-top small { font-size: 10.5px; }
  .dx-top .hub-x { font-size: 22px; }
  .dx-filters { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .dx-frow { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .dx-frow::-webkit-scrollbar { display: none; }
  .dx-frow > :not(.dx-search) { flex-shrink: 0; }
  .dx-frow .lbl { display: none; }
  .dx-regs { display: none; }
  .dx-filters .dx-tog { height: 24px; padding: 0 8px; font-size: 11px; }
  .dx-filters .dx-seg { height: 24px; }
  .dx-filters .dx-seg .dx-tog { padding: 0 9px; }
  .dx-filters .dx-tog.ico { width: 26px; }
  .dx-filters .dx-sel { height: 24px; font-size: 10.5px; padding-right: 20px; }
  .dx-filters .dx-search { flex: 1 1 auto; height: 26px; font-size: 11px; padding: 2px 8px; border-width: 1.5px; }
  .dx-sort { margin-left: 0; }
  .dx-roster { padding-right: 8px; }
  .dx-row { height: 32px; grid-template-columns: 32px 40px minmax(0, 1fr) auto 16px; gap: 5px; }
  .dx-pic { width: 32px; height: 30px; }
  .dx-pic canvas { max-width: 100%; max-height: 100%; }
  .dx-nm { font-size: 12.5px; }
  .dx-row b { font-size: 10.5px; }
  .dx-foot { font-size: 10px; }
  .dx-hero { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; padding: 4px 12px 4px 8px; }
  .dx-big { width: 70px; height: 60px; }
  .dx-big canvas { max-width: 100%; max-height: 100%; }
  .dx-id h3 { font-size: 22px; }
  .dx-id p { margin: 1px 0 3px; font-size: 10.5px; }
  .dx-line { grid-column: auto; max-width: 200px; padding: 2px 4px; }
  .dx-lpic { width: 36px; height: 34px; }
  .dx-lpic canvas { max-width: 100%; max-height: 100%; }
  .dx-line i { font-size: 8.5px; }
  .dx-type, .dx-rar, .dx-shiny-tag { font-size: 10.5px; padding: 1px 7px 1px 3px; }
  .dx-partner { margin: 5px 10px 0; padding: 4px 6px 4px 8px; gap: 6px; flex-wrap: nowrap; }
  .dx-partner .now { font-size: 10.5px; }
  .dx-partner .now > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dx-partner .now .ava { width: 22px; height: 22px; }
  .dx-pseg button, .dx-favbtn { padding: 3px 8px; font-size: 10.5px; }
  .dx-favbtn .t { display: none; }
  .dx-partner .btn { padding: 5px 14px; font-size: 12px; white-space: nowrap; }
  .dx-tabs { padding: 5px 10px 0; gap: 2px; }
  .dx-tabs button { flex: 0 1 auto; padding: 3px 12px 2px; font-size: 12px; }
  .dx-player { grid-template-columns: 200px minmax(0, 1fr); gap: 8px; margin: 6px 10px 0; padding: 6px; }
  .dx-screen { width: 200px; height: 124px; }
  .dx-screen .mp-dock .mp-screen, .dx-screen .mp-dock .mp-screen iframe { width: 200px; height: 124px; }
  .dx-body { padding: 6px 22px 8px 12px; }
  .dx-h { margin: 8px 0 4px; font-size: 11.5px; }
  .dx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
  .dx-facts dt { font-size: 9.5px; } .dx-facts dd { font-size: 11.5px; }
  .dx-rec { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .dx-rec-s { padding: 3px 2px 4px; border-radius: 8px; }
  .dx-rec-s svg { width: 48px; height: 48px; }
  .dx-rec b { font-size: 14px; } .dx-rec small { font-size: 9px; }
  .dx-collect { gap: 4px; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
  .dx-collect div { padding: 3px 8px; } .dx-collect b { font-size: 14px; } .dx-collect small { font-size: 9.5px; }
  .dx-body .mon-extra.dx-mx { padding: 5px 8px; font-size: 11.5px; }
  .dx-mx .mx-row { margin: 2px 0; }
  .dx-mx .mx-row > span:first-child { min-width: 72px; font-size: 9.5px; }
  .dx-mx .mx-desc { font-size: 10px; }
  .dx-mx .mx-row .btn.small { padding: 2px 9px; font-size: 11px; }
  .dx-evo-pic { width: 44px; height: 40px; }
}

/* ============ The Movebook (ui/movebook.js), "Twin Cards" (05-11-2026) ============
 * The Pokédex's frame (.dx-* above) with the Movebook's own pieces: the 18 types as round stamps, the
 * move rows, the hero's key numbers, the live preview's badges, the level path and who learns it.
 * Everything that bends the .dx-* frame is scoped to #movebook-body, so the Pokédex stays as it is.
 * (.mb-* is something else: the dark move card of a run, far above.) */
#movebook-body { color: #23163f; }
#movebook-body .dx-filters { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.mv-frow { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.mv-frow .dx-search { flex: 1 1 140px; min-width: 0; height: 32px; }
.mv-frow .dx-sel { height: 32px; }
.mv-seg { display: inline-flex; align-items: stretch; gap: 2px; height: 32px; }
.mv-seg .dx-tog { padding: 0 14px; }
/* The types: the game's own type emblem as a stamp, the picked one ringed in yellow. */
.mv-types { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; width: 100%; }
.mv-ty { border: 0; padding: 2px; background: none; border-radius: 50%; cursor: pointer; opacity: .55;
  transition: opacity .15s, transform .2s cubic-bezier(.3,1.6,.5,1); }
.mv-ty img { display: block; width: 100%; height: auto; max-width: 40px; margin: 0 auto;
  filter: drop-shadow(2px 2px 0 rgba(35,22,63,.25)); }
.mv-ty:hover { opacity: 1; transform: scale(1.08); }
.mv-ty[aria-pressed="true"] { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 3px var(--pd-y); }
.mv-ty:focus-visible, .mv-row:focus-visible, .mv-step .dot:focus-visible, .lvsel button:focus-visible { outline: 3px solid var(--pd-pink); outline-offset: 1px; }
.mv-grp { padding: 8px 4px 2px; font: italic 800 11px var(--pd-head); text-transform: uppercase; letter-spacing: .07em; color: var(--pd-pink2); }
.mv-grp:first-child { padding-top: 2px; }
.mv-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; height: 38px;
  padding: 0 8px 0 6px; border: 0; border-radius: 4px; background: transparent; color: #23163f; text-align: left; cursor: pointer; font-family: var(--font); }
.mv-row.alt { background: #f4f1fb; }
.mv-row:hover { background: #fff6cc; }
.mv-row.on, .mv-row.on.alt { background: #23163f; color: #fff; }
.mv-row img { width: 26px; height: 26px; }
.mv-row .nm { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-row .lv { font: italic 700 11px var(--pd-head); text-transform: uppercase; color: var(--pd-soft); }
.mv-row.on .lv { color: var(--pd-y); }
.mv-cat { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; background: #ebe6f6; color: var(--pd-soft); }
.mv-cat.special { background: #e3dcff; color: #4b38a8; }
.mv-cat.physical { background: #ffe1cc; color: #8a3a08; }
.mv-row.on .mv-cat { box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
/* The hero: the move's icon on a disc, its words and its key numbers. */
.mv-hero { grid-template-columns: 96px minmax(0, 1fr) auto; }
.mv-hero .dx-big { width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.22);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 0 0 3px #fff; }
.mv-hero .dx-big img { width: 64px; height: 64px; }
.mv-hero .dx-id h3 { font-size: 32px; }
.mv-hero .role-tag { margin-left: 0; }
.mv-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: rgba(28,18,54,.45);
  box-shadow: 0 0 0 2px rgba(255,255,255,.6); font: italic 800 11px var(--pd-head); text-transform: uppercase; color: #fff; }
.mv-mech { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 4px; background: rgba(28,18,54,.45);
  box-shadow: 0 0 0 2px rgba(255,255,255,.6); font: 600 12px var(--font); color: #fff; }
.mv-key { display: grid; grid-template-columns: repeat(2, auto); gap: 3px 14px; margin: 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(28,18,54,.35); font-size: 12px; }
.mv-key dt { color: rgba(255,255,255,.75); }
.mv-key dd { margin: 0; font-weight: 700; text-align: right; }
/* The live preview: the badges and the level picker lie over the frame of the game. */
/* (over the docked frame of the game, .mp-pop: it sits at z-index 69 and takes no clicks) */
.mv-screen .live, .mv-screen .by, .mv-screen .lvsel { position: absolute; z-index: 70; }
.mv-screen .live { left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 3px;
  background: rgba(13,15,26,.75); color: #fff; font: 700 10px var(--font); text-transform: uppercase; }
.mv-screen .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4f5e; animation: mvBlink 1.2s steps(2) infinite; }
@keyframes mvBlink { 50% { opacity: .2; } }
.mv-screen .by { right: 8px; top: 8px; padding: 1px 8px; border-radius: 3px; background: rgba(13,15,26,.75); color: var(--pd-lilac); font: 600 10px var(--font); }
.mv-screen .lvsel { left: 8px; bottom: 8px; display: flex; gap: 2px; }
.mv-screen .lvsel button { border: 0; width: 22px; height: 20px; padding: 0; border-radius: 3px; background: rgba(13,15,26,.75);
  color: var(--pd-lilac); font: 700 10px var(--font); cursor: pointer; }
.mv-screen .lvsel button[aria-pressed="true"] { background: var(--pd-y); color: #23163f; }
/* How it levels up: one step a level, the ones that add something besides power in the type's colour. */
.mv-path { display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); }
.mv-step { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 4px; text-align: center; }
.mv-step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 4px; background: #e4ddf3; z-index: 0; }
.mv-step:first-child::before { display: none; }
.mv-step .dot { position: relative; z-index: 1; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: #f4f1fb; color: #23163f; font: italic 800 14px var(--pd-head); box-shadow: inset 0 0 0 2px #23163f; cursor: pointer; }
.mv-step.big .dot { background: var(--pd-pink); color: #fff; }
.mv-step.max .dot { background: var(--pd-y); color: #23163f; }
.mv-step.cur .dot { box-shadow: inset 0 0 0 2px #23163f, 0 0 0 3px var(--pd-y2); }
.mv-step b { font: italic 800 12px var(--pd-head); text-transform: uppercase; }
.mv-step small { font-size: 10.5px; line-height: 1.25; color: var(--pd-soft); }
.mv-step small em { font-style: normal; color: #1f9c58; font-weight: 700; }
.mv-evo { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 4px 14px 4px 14px;
  border: 2px dashed var(--pd-lilac); color: var(--pd-soft); font-size: 12px; }
.mv-evo b { color: #23163f; font: italic 800 13px var(--pd-head); text-transform: uppercase; }
.mv-mechs { display: grid; gap: 6px; }
.mv-mechs div { padding: 6px 10px; border-radius: 4px 14px 4px 14px; background: #f4f1fb; }
.mv-mechs b { display: flex; align-items: center; gap: 6px; font: italic 800 13px var(--pd-head); text-transform: uppercase; color: #23163f; }
.mv-mechs p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--pd-soft); }
.mv-match { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 5px; font-size: 12px; }
.mv-match > span:first-child { width: 160px; color: var(--pd-soft); font-weight: 600; }
/* The level table: what goes up is green ▲, what goes down red ▼. */
.mv-lt td.chg { color: #1f9c58; font-weight: 700; }
.mv-lt td.chg::after { content: " ▲"; font-size: 8px; }
.mv-lt td.chg.dn { color: #c0392b; }
.mv-lt td.chg.dn::after { content: " ▼"; }
.mv-lt tr.max td { background: #fff6cc; }
.mv-lt td.up { white-space: normal; min-width: 140px; }
.mv-learn { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.mv-mon { display: grid; justify-items: center; gap: 1px; padding: 4px 4px 6px; border-radius: 8px; background: #f4f1fb;
  font-size: 11px; font-weight: 600; text-align: center; }
.mv-mon.sig { background: #ffe6f1; box-shadow: inset 0 0 0 2px var(--pd-pink); }
.mv-mon small { font-size: 10px; color: var(--pd-soft); font-weight: 500; }
.mv-spr { display: block; width: 56px; height: 50px; }
@media (max-width: 860px) {
  #movebook-body .mv-hero { grid-template-columns: 64px minmax(0, 1fr); }
  #movebook-body .mv-hero .dx-big { width: 64px; height: 64px; }
  #movebook-body .mv-hero .dx-big img { width: 44px; height: 44px; }
  #movebook-body .mv-key { grid-column: 1 / -1; grid-template-columns: repeat(4, auto auto); font-size: 11px; }
  .mv-match > span:first-child { width: 100%; }
}
/* A landscape phone (844 × 390 and the like): the screen is wide, only short, so the two cards stay
   side by side with everything a size smaller. */
@media (max-height: 520px) {
  #movebook-body { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    height: 100%; width: 100%; gap: 4px 12px; padding: 0 6px 6px 2px; }
  #movebook-body::before { display: none; }
  #movebook-body .dx-cardL { grid-column: 1; grid-row: 2; gap: 5px; padding: 7px 6px 6px 8px;
    border-radius: 4px 16px 4px 16px; box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px var(--pd-pink); }
  #movebook-body .dx-cardR { grid-column: 2; grid-row: 1 / 3; border-radius: 4px 16px 4px 16px;
    box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px var(--pd-y2); }
  #movebook-body .dx-top > b { font-size: 17px; padding: 2px 16px 1px; }
  #movebook-body .dx-top small { font-size: 10.5px; }
  #movebook-body .dx-top .hub-x { font-size: 22px; }
  #movebook-body .dx-filters { gap: 4px; }
  .mv-frow { gap: 4px; }
  .mv-frow .dx-search, .mv-frow .dx-sel, .mv-seg { height: 24px; }
  #movebook-body .dx-sel, #movebook-body .dx-tog { font-size: 10.5px; padding-top: 2px; padding-bottom: 2px; white-space: nowrap; }
  .mv-seg .dx-tog { padding: 0 9px; }
  #movebook-body .dx-search { font-size: 11px; padding: 2px 8px; border-width: 1.5px; }
  .mv-ty img { max-width: 24px; }
  .mv-ty[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pd-y); }
  #movebook-body .dx-roster { padding-right: 8px; }
  .mv-row { height: 28px; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 5px; }
  .mv-row img { width: 20px; height: 20px; }
  .mv-row .nm { font-size: 12px; }
  .mv-row .lv { font-size: 9.5px; }
  .mv-cat { font-size: 8.5px; padding: 0 4px; }
  .mv-grp { padding: 4px 4px 1px; font-size: 9.5px; }
  #movebook-body .dx-foot { font-size: 10px; }
  #movebook-body .mv-hero { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; padding: 4px 10px 4px 8px; }
  #movebook-body .mv-hero .dx-big { width: 50px; height: 50px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12), 0 0 0 2px #fff; }
  #movebook-body .mv-hero .dx-big img { width: 34px; height: 34px; }
  #movebook-body .mv-hero .dx-id h3 { font-size: 21px; }
  #movebook-body .mv-hero .dx-id p { margin: 1px 0 3px; font-size: 10.5px; }
  #movebook-body .dx-type, .mv-tag, .mv-mech { font-size: 10px; padding: 1px 7px; }
  #movebook-body .mv-key { grid-column: auto; grid-template-columns: repeat(2, auto); padding: 3px 8px; gap: 1px 10px; font-size: 10px; }
  #movebook-body .dx-tabs { padding: 5px 10px 0; gap: 2px; }
  #movebook-body .dx-tabs button { padding: 3px 12px 2px; font-size: 12px; }
  #movebook-body .dx-player { grid-template-columns: 200px minmax(0, 1fr); gap: 8px; margin: 6px 10px 0; padding: 6px; }
  #movebook-body .dx-screen { width: 200px; height: 124px; }
  #movebook-body .dx-screen .mp-dock .mp-screen, #movebook-body .dx-screen .mp-dock .mp-screen iframe { width: 200px; height: 124px; }
  .mv-screen .by { display: none; }
  #movebook-body .dx-pinfo h5 { font-size: 13px; }
  #movebook-body .dx-pinfo p { margin-bottom: 3px; font-size: 10.5px; }
  #movebook-body .dx-pinfo dl { font-size: 10px; }
  #movebook-body .dx-body { padding: 6px 22px 8px 12px; }
  #movebook-body .dx-h { margin: 8px 0 4px; font-size: 11.5px; }
  .mv-step .dot { width: 24px; height: 24px; font-size: 11px; }
  .mv-step::before { top: 10px; height: 3px; }
  .mv-step b { font-size: 9.5px; }
  .mv-step small { font-size: 8.5px; }
  .mv-evo { margin-top: 5px; padding: 4px 8px; font-size: 10px; }
  .mv-mechs p { font-size: 10.5px; }
  .mv-match { font-size: 10px; }
  .mv-match > span:first-child { width: 96px; }
  .mv-learn { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .mv-spr { width: 44px; height: 40px; }
}

/* ============ The Paldea scrollbar (ui/pscroll.js) ============ */
.ps-on { scrollbar-width: none; }
.ps-on::-webkit-scrollbar { display: none; }
.ps-rail { position: absolute; z-index: 3; width: 11px; border-radius: 2px; background: repeating-linear-gradient(-60deg, rgba(35,22,63,.10) 0 4px, rgba(35,22,63,.04) 4px 8px);
  box-shadow: inset 0 0 0 1px rgba(35,22,63,.12); cursor: pointer; touch-action: none; }
.ps-rail.off { display: none; }
.ps-thumb { position: absolute; left: 0; right: 0; top: 0; display: block; cursor: grab;
  background: repeating-linear-gradient(-60deg, #f8d030 0 6px, #f0b818 6px 12px); box-shadow: inset 2px 0 0 #ff4f9a, inset -1px 0 0 rgba(35,22,63,.25);
  clip-path: polygon(0 6px, 100% 0, 100% calc(100% - 6px), 0 100%); }
.ps-rail:hover .ps-thumb { background: repeating-linear-gradient(-60deg, #ffdf55 0 6px, #f8c52a 6px 12px); }
.ps-rail.drag .ps-thumb { cursor: grabbing; background: repeating-linear-gradient(-60deg, #ff4f9a 0 6px, #d4246f 6px 12px); box-shadow: inset 2px 0 0 #f8d030; }

/* ============ The Trainer screen (ui/trainer-card.js): your stats, your trainer wearing the belt, the backpack ============ */
/* (tc-win, not tc-box: story mode's team window has a .tc-box of its own, css/story.css, that squeezed this one to 290px) */
.tc-ov { align-items: flex-start; }
.tc-win { position: relative; margin: auto 0; display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(280px, 340px); grid-template-rows: auto minmax(0, 1fr);
  gap: 12px 18px; width: min(1240px, 100%); height: min(880px, 94vh); padding: 14px 18px 18px; border-radius: 6px 30px 6px 30px; color: #fff;
  background: repeating-linear-gradient(-60deg, #2a1d4f 0 40px, #301f5c 40px 80px);
  box-shadow: 0 0 0 3px #fff, 9px 11px 0 3px #ff4f9a, 0 26px 60px rgba(0,0,0,.5); animation: pdPop .3s cubic-bezier(.2,.9,.3,1.1) both; }
.tc-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-right: 36px; }
.tc-top .hub-x { position: absolute; right: 14px; top: 10px; }
.tc-tag { display: inline-block; padding: 2px 18px; background: #ff4f9a; transform: skewX(-12deg); font: italic 800 24px 'Kanit', var(--font); text-transform: uppercase; }
.tc-tag > span { display: inline-block; transform: skewX(12deg); }
.tc-sub { color: #c9bdf0; font-size: 13px; }
.tc-wallet { margin-left: auto; display: inline-flex; gap: 14px; padding: 4px 14px; border-radius: 4px 14px 4px 14px; background: rgba(28,18,54,.92); border: 1.5px solid rgba(255,255,255,.85);
  font: italic 800 15px 'Kanit', var(--font); font-variant-numeric: tabular-nums; }
.tc-wallet span { display: inline-flex; align-items: center; gap: 6px; }
/* left: your stats */
.tc-stats { display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 6px; min-height: 0; padding: 12px 14px; border-radius: 6px 24px 6px 24px; background: rgba(28,18,54,.9); }
.tc-lbl { font: italic 800 15px 'Kanit', var(--font); text-transform: uppercase; color: #f8d030; }
.tc-lines { display: grid; align-content: start; gap: 1px; overflow-y: auto; }
.tc-lines h4 { margin: 6px 0 2px; font: italic 800 13px 'Kanit', var(--font); text-transform: uppercase; color: #f8d030; }
.tc-st { display: grid; grid-template-columns: 86px minmax(0, 1fr) 62px; gap: 8px; align-items: center; padding: 3px 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: 13px var(--font); text-align: left; cursor: help; }
.tc-st:hover, .tc-st.on { background: rgba(255,255,255,.1); }
.tc-st b { text-align: right; font: italic 800 15px 'Kanit', var(--font); font-variant-numeric: tabular-nums; }
.tc-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.tc-bar i { display: block; height: 100%; border-radius: 4px; }
.tc-why { min-height: 34px; margin: 0; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; color: #c9bdf0; }
.tc-why b { color: #fff; }
.tc-skills { margin: 0; font: italic 800 13px 'Kanit', var(--font); text-transform: uppercase; color: #c9bdf0; }
.tc-btns { display: flex; gap: 6px; }
.tc-btns .btn { flex: 1; }
/* middle: your trainer wearing the belt */
.tc-stage { display: grid; justify-items: center; align-content: center; min-height: 0; padding: 8px 0; border-radius: 30px; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); }
.tc-walk { width: 90px; height: 130px; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); }
.tc-podium { width: 200px; height: 30px; margin-top: -12px; border-radius: 50%; background: rgba(0,0,0,.25); }
.tc-name { margin: 6px 0 18px; font: italic 800 20px 'Kanit', var(--font); text-transform: uppercase; }
.tc-belt-l { align-self: start; justify-self: center; margin-bottom: 4px; font: italic 800 12px 'Kanit', var(--font); text-transform: uppercase; color: #f8d030; }
.tc-belt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(#7a4a24, #5a3416); box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 6px 0 rgba(0,0,0,.25); }
.tc-pouch { position: relative; width: 74px; height: 80px; display: grid; justify-items: center; align-content: center; gap: 2px; border: 2px dashed rgba(255,255,255,.35); border-radius: 12px 12px 20px 20px;
  background: #3a2010; color: #f3e2c8; font-size: 10px; text-align: center; line-height: 1.1; }
.tc-pouch small { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-pouch.full { border-style: solid; border-color: #f8d030; background: #6a3a1a; cursor: pointer; }
.tc-pouch.full.on { box-shadow: 0 0 0 3px #fff; }
.tc-pouch.drop { border-color: #5fe08a; background: #2f4a20; }
.tc-pouch.locked { opacity: .5; }
.tc-k { position: absolute; top: 3px; right: 6px; font-weight: 800; color: #f8d030; }
.tc-x { position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1d1240; font: 800 15px/22px var(--font); cursor: pointer; }
.tc-clip { display: grid; justify-items: center; align-content: center; gap: 2px; width: 56px; border: 0; background: none; color: #f3e2c8; font: 800 12px var(--font); cursor: pointer; }
/* the ball clips along the belt (04-11-2026): every kind of Poké Ball you carry, with how many, under the pouches */
.tc-case { flex: 0 0 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.22); box-shadow: inset 0 2px 0 rgba(0,0,0,.2); }
.tc-ball { display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 2px; border: 0; border-radius: 8px; background: none; color: #f3e2c8; font: 800 11px var(--font); cursor: pointer; }
.tc-ball:hover { background: rgba(255,255,255,.14); }
.tc-ball.kit img { filter: drop-shadow(0 0 2px #ffcb3d) drop-shadow(0 0 3px rgba(255, 203, 61, .7)); }
.tc-ball.none { opacity: .45; cursor: default; }
.tc-charms { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 460px; margin-top: 16px; }
.tc-charms-l { width: 100%; text-align: center; font: italic 800 12px 'Kanit', var(--font); text-transform: uppercase; color: #ffe14d; }
.tc-charm { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border: 1px solid rgba(255,225,77,.5); border-radius: 999px; background: rgba(255,225,77,.16); color: #fff; font: 11px var(--font); cursor: pointer; }
.tc-charm small { color: #ffe14d; font-weight: 800; }
.tc-none { margin: 0; font-size: 12px; color: #c9bdf0; }
/* right: the backpack */
.tc-pack { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 0; margin-top: 14px; padding: 22px 12px 12px; border-radius: 60px 60px 22px 22px;
  background: linear-gradient(#e0743d, #b8541f); box-shadow: inset 0 0 0 4px #9a4418, 0 8px 0 rgba(0,0,0,.25); }
.tc-pack::before { content: ""; position: absolute; left: 50%; top: -14px; width: 90px; height: 26px; margin-left: -45px; border: 6px solid #9a4418; border-bottom: 0; border-radius: 30px 30px 0 0; }
.tc-pack h3 { margin: 0; text-align: center; font: italic 800 18px 'Kanit', var(--font); text-transform: uppercase; }
.tc-pockets { display: grid; gap: 8px; align-content: start; overflow-y: auto; padding-right: 2px; }
.tc-pocket { padding: 8px; border-radius: 14px; background: rgba(60,22,6,.35); }
.tc-pocket > span { display: block; margin-bottom: 4px; font: italic 800 12px 'Kanit', var(--font); text-transform: uppercase; color: #ffe0c8; }
.tc-things { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tc-things .tc-none { grid-column: 1 / -1; color: #ffe0c8; }
.tc-thing { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 4px; border: 0; border-radius: 10px; background: rgba(255,255,255,.18); color: #fff; font: 10px var(--font); line-height: 1.1; cursor: pointer; }
.tc-thing small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-thing:hover { background: rgba(255,255,255,.3); }
.tc-thing.on { box-shadow: inset 0 0 0 2px #fff; }
/* The Starter Kit (04-11-2026, modes/starter-kit.js): its copies have a golden outline; the backpack can show only them */
.tc-thing.kit, .tc-pouch.full.kit { box-shadow: 0 0 0 2px #ffcb3d, 0 0 10px rgba(255, 203, 61, .55); }
.tc-thing.kit.on, .tc-pouch.full.kit.on { box-shadow: 0 0 0 2px #ffcb3d, inset 0 0 0 2px #fff, 0 0 12px rgba(255, 203, 61, .7); }
.tc-pouch.full.kit { border-color: #ffcb3d; }
.tc-clip.kit img { filter: drop-shadow(0 0 2px #ffcb3d) drop-shadow(0 0 4px rgba(255, 203, 61, .7)); }
.tc-pouch.dim { opacity: .35; }
.tc-filter { display: flex; justify-content: center; gap: 4px; margin: 6px 0 2px; }
.tc-f { padding: 3px 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font: 700 11px var(--font); text-transform: none; font-style: normal; cursor: pointer; }
.tc-f.on { background: #fff; color: #3a1d10; }
.tc-f.kit.on { background: #ffcb3d; color: #3a2400; box-shadow: 0 0 8px rgba(255, 203, 61, .6); }
.kit-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; }
.kit-ic.kit { box-shadow: 0 0 0 2px #ffcb3d, 0 0 10px rgba(255, 203, 61, .55); }
.kit-n { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #ffcb3d; color: #3a2400; font: 700 11px var(--font); white-space: nowrap; }
.kit-clerk { display: block; margin-top: 2px; opacity: .7; }
.kit-when { font-size: 12px; opacity: .85; }
.kit-tabs .rbag-tab { padding: 5px 10px; font-size: 12px; }
.shop-next { margin: 8px 2px 0; font-size: 12px; opacity: .8; }
.kit-shelf { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 4px; background: #1d1240; color: #f8d030; font: 700 10px var(--font); font-style: normal; text-transform: uppercase; vertical-align: 2px; }
.tc-thing.out { opacity: .45; }
.tc-thing.held { background: rgba(95,224,138,.22); }
.tc-give { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tc-give .btn small { opacity: .8; }
.tc-thing[draggable="true"] { cursor: grab; }
.tc-n { position: absolute; top: 2px; right: 4px; font-weight: 800; color: #ffe14d; }
.tc-info { min-height: 52px; padding: 8px 10px; border-radius: 12px; background: rgba(60,22,6,.45); font-size: 12px; color: #ffe0c8; }
.tc-info b { color: #fff; font: italic 800 13px 'Kanit', var(--font); text-transform: uppercase; }
.tc-info b small { color: #ffe14d; text-transform: none; }
.tc-next { display: block; color: #c8f5d4; }
.tc-buy { margin-top: 6px; }
.tc-thing:focus-visible, .tc-st:focus-visible, .tc-charm:focus-visible, .tc-clip:focus-visible, .tc-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 960px) {
  .tc-win { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .tc-lines { overflow: visible; }
  .tc-pack { margin-top: 20px; }
  .tc-pockets { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .tc-win { animation: none; } }

/* ============ The TM Machine (ui/tm-machine.js) ============ */
.tmm-ov { align-items: center; }
.tmm { position: relative; display: grid; gap: 14px; width: min(560px, 100%); padding: 18px 22px 22px; border-radius: 34px 34px 18px 18px;
  background: linear-gradient(170deg, #ff6aa8, #ff4f9a 45%, #d4246f); box-shadow: 0 0 0 4px #fff, 10px 12px 0 4px #f0b818, 0 30px 60px rgba(0,0,0,.5);
  animation: pdPop .3s cubic-bezier(.2,.9,.3,1.1) both; }
.tmm-top { display: flex; align-items: center; gap: 12px; }
.tmm-top h2 { margin: 0; padding: 1px 22px; font: italic 800 24px 'Kanit', var(--font); text-transform: uppercase; color: #23163f; background: #f8d030;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.tmm-caps { display: flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; background: #1c1236; color: #fff; font: 700 13px var(--font); }
.tmm-pill { width: 22px; height: 13px; border-radius: 7px; background: linear-gradient(180deg, #ff4f9a 50%, #fff 50%); box-shadow: 0 0 0 2px #fff; }
.tmm-top .hub-x { margin-left: auto; color: #fff; }
.tmm-window { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; height: 192px; padding: 0 10px; border-radius: 16px;
  background: #18102f; box-shadow: inset 0 0 0 4px #1c1236, inset 0 10px 20px rgba(0,0,0,.6); overflow: hidden; }
.tmm-reel { position: relative; overflow: hidden; height: 192px; }
.tmm-reel::before, .tmm-reel::after { content: ""; position: absolute; left: 0; right: 0; height: 52px; z-index: 1; pointer-events: none; }
.tmm-reel::before { top: 0; background: linear-gradient(#18102f, rgba(24,16,47,0)); }
.tmm-reel::after { bottom: 0; background: linear-gradient(rgba(24,16,47,0), #18102f); }
.tmm-strip { will-change: transform; }
.tmm-cell { height: 64px; display: flex; align-items: center; gap: 10px; color: #fff; }
.tmm-l .tmm-cell { justify-content: center; }
.tmm-r .tmm-cell { padding: 0 12px; }
.tmm-r .tmm-cell b { font: italic 800 20px 'Kanit', var(--font); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmm-line { position: absolute; left: 6px; right: 6px; top: 64px; height: 64px; border-radius: 10px; box-shadow: inset 0 0 0 3px #f8d030; pointer-events: none; }
.tmm-window.won .tmm-line { box-shadow: inset 0 0 0 3px #f8d030, 0 0 24px 4px rgba(248,208,48,.65); animation: tmmWin .5s ease-out 2; }
@keyframes tmmWin { 50% { box-shadow: inset 0 0 0 5px #fff, 0 0 34px 8px rgba(255,255,255,.7); } }
.tmm-out { min-height: 46px; color: #fff; text-align: center; }
.tmm-out p { margin: 0; }
.tmm-won { font: 700 15px var(--font); }
.tmm-won b { color: #f8d030; cursor: help; }
.tmm-note { font-size: 12px; color: #ffe0ef; }
.tmm-go { justify-self: center; min-width: 220px; }
.tmm-go small { font-size: 12px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .tmm-window.won .tmm-line { animation: none; } }

/* ---- the Pokédex's move preview (ui/move-preview.js): a small screen with the game in it ---- */
.mp-pop { position: fixed; z-index: 69; padding: 6px; border-radius: 12px; background: #1c1236; box-shadow: 0 0 0 3px #fff, 6px 7px 0 3px #ff4f9a, 0 16px 34px rgba(0,0,0,.5); pointer-events: none; }
.mp-screen { position: relative; width: 340px; height: 210px; border-radius: 8px; overflow: hidden; background: #0d0f1a; }
.mp-screen iframe { display: block; width: 340px; height: 210px; border: 0; opacity: 0; transition: opacity .2s; }
.mp-pop.on .mp-screen iframe { opacity: 1; }
.mp-load { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #c9bdf0; font-size: 12px; }
.mp-pop.on .mp-load { display: none; }

/* ---------- 01-11-2026: the map as the Rotom Phone's map app (ui/map-ui.js), its cards to match ---------- */
.pm-phone { position: relative; padding: 12px 12px 12px 42px; border-radius: 34px; background: linear-gradient(160deg, #ff6aa8, #ff4f9a 40%, #d4246f);
  box-shadow: 0 0 0 3px #fff, 7px 9px 0 3px #f0b818; min-width: 0; }
.pm-eyes { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: grid; gap: 26px; }
.pm-eyes i { width: 18px; height: 24px; border-radius: 50%; background: #1c1236; box-shadow: inset 3px -4px 0 #3fd0ff; }
.pm-phone .pm-map {
  border-radius: 22px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), inset 0 10px 30px rgba(0,0,0,.45);
  background: var(--glows), linear-gradient(rgba(124,196,255,.08) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(124,196,255,.08) 1px, transparent 1px) 0 0 / 32px 32px, radial-gradient(ellipse at 50% 40%, #1d1340, #0e0820 80%);
}
.pm-phone .pm-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
/* the trails: the others dotted, pale blue; the chosen one lit yellow and glowing */
.pm-phone .pm-trail { stroke: rgba(124,196,255,.4); stroke-width: 4; stroke-dasharray: 7 9; animation: none; }
.pm-phone .pm-trail.rift { stroke: rgba(201,166,255,.5); }
.pm-phone .pm-trail.on { stroke: #f8d030; stroke-width: 6; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgba(248,208,48,.9)); }
.pm-phone .pm-trail.on.rift { stroke: #c9a6ff; filter: drop-shadow(0 0 6px rgba(176,108,255,.9)); }
/* the tabs along the top: one per path */
.pm-tabs { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.pm-tab { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.08); color: #c9bdf0; font: 600 12px var(--font); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .12s, color .12s; }
.pm-tab:hover, .pm-tab:focus-visible { background: rgba(255,255,255,.16); color: #fff; outline: none; }
.pm-tab.on { background: #f8d030; color: #23163f; box-shadow: none; font-weight: 700; }
/* the Pokémon Center at both ends */
.pm-phone .pm-center { padding: 9px; background: #fff; color: #ff4f9a; box-shadow: 0 0 0 4px #ff4f9a, 0 0 22px 4px rgba(255,79,154,.45); }
.pm-phone .pm-center span { background: rgba(28,18,54,.9); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.25); font-size: 11px; }
/* a route: a hexagon pin in its biome's colour */
.pm-phone .pm-node { width: 62px; height: 62px; }
.pm-hex { display: grid; place-items: center; width: 100%; height: 100%; background: color-mix(in srgb, var(--f1) 50%, #fff);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); transition: filter .15s; }
.pm-phone .pm-disc { width: 86%; height: 86%; border-radius: 0; box-shadow: none; clip-path: inherit; background: radial-gradient(circle at 50% 35%, #2e2160, #160d30); }
.pm-phone .pm-node.k-rift .pm-hex { background: #c9a6ff; }
.pm-phone .pm-n { top: -6px; left: -4px; background: #f8d030; color: #23163f; box-shadow: 0 0 0 2px #1c1236; }
.pm-phone .pm-lbl { display: grid; justify-items: center; gap: 0; padding: 2px 10px; border-radius: 8px; background: rgba(14,8,32,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); line-height: 1.2; }
.pm-phone .pm-lbl b { font: 700 12px var(--font); color: #fff; }
.pm-phone .pm-lbl small { font-size: 10px; color: #c9bdf0; }
.pm-phone .pm-node:hover .pm-hex { filter: brightness(1.15); }
.pm-phone .pm-node.on .pm-hex { background: #f8d030; filter: drop-shadow(0 0 10px rgba(248,208,48,.85)) drop-shadow(0 0 3px #fff); }
.pm-phone .pm-node.on .pm-disc { box-shadow: none; }
.pm-phone .pm-node.on .pm-lbl { background: #f8d030; box-shadow: none; }
.pm-phone .pm-node.on .pm-lbl b, .pm-phone .pm-node.on .pm-lbl small { color: #23163f; }
/* the key at the bottom */
.pm-key { position: absolute; left: 14px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: #c9bdf0; pointer-events: none; }
.pm-key span { display: inline-flex; align-items: center; gap: 6px; }
.pm-key i { width: 18px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(124,196,255,.7) 0 5px, transparent 5px 8px); }
.pm-key i.on { background: #f8d030; box-shadow: 0 0 6px rgba(248,208,48,.9); }
.pm-key b { width: 12px; height: 12px; background: linear-gradient(135deg, #7cc45a, #b49a7a 50%, #f08a4a); clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }

/* the cards: screens of the same phone, the route's biome colour along their edge */
.routes-ui .pm-card { --cc: color-mix(in srgb, var(--c1, #f8d030) 50%, #fff); position: relative; background: linear-gradient(170deg, #2a1d4f, #1c1236); color: #fff; border-radius: 6px 22px 6px 22px;
  box-shadow: inset 4px 0 0 var(--cc), 0 0 0 2px rgba(255,255,255,.14); }
.routes-ui .pm-card:hover, .routes-ui .pm-card:focus-visible { transform: translateY(-3px); box-shadow: inset 4px 0 0 var(--cc), 0 0 0 2px #f8d030, 0 0 18px rgba(248,208,48,.35); }
.routes-ui .pm-card .map-art { height: 72px; margin: 6px 6px 0 10px; border-radius: 4px 16px 4px 4px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.routes-ui .pm-card .map-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 55%, rgba(14,8,32,.45)); }
.pm-chex { position: absolute; z-index: 2; left: 6px; top: 6px; display: grid; place-items: center; width: 30px; height: 30px; background: var(--cc, #f8d030);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); font: italic 800 15px var(--pd-head, var(--font)); color: #1c1236; }
.routes-ui .pm-card .map-body { padding: 8px 12px 12px 16px; gap: 6px; }
.routes-ui .pm-card .map-name { color: #fff; font-size: 17px; }
.routes-ui .pm-card .pm-rn { color: #ff7ab4; }
.routes-ui .pm-card .map-goal.alphas { background: #fff; color: #23163f; }
.routes-ui .pm-card .map-ty b { color: #c9bdf0; font-size: 12px; }
.pm-mix { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.08); }
.pm-mix i { display: block; height: 100%; }
.routes-ui .pm-card .map-goal { align-self: flex-start; }
.routes-ui .pm-card.is-rift { box-shadow: inset 4px 0 0 #c9a6ff, 0 0 0 2px #b06cff, 0 0 20px rgba(176,108,255,.35); }
.routes-ui .pm-side .pm-head b { color: #f8d030; }
@media (max-width: 600px) {
  .pm-phone { padding: 34px 8px 8px; border-radius: 24px; }
  .pm-eyes { left: 50%; top: 8px; transform: translateX(-50%); display: flex; gap: 30px; }
  .pm-eyes i { width: 20px; height: 15px; }
  .pm-tabs { top: 6px; }
  .pm-key { display: none; }
}
/* the map's route types (ui/map-ui.js, 01-11-2026): a rift's violet-black pin, a cursed route's darker pin and its card */
.pm-phone .pm-node.k-rift .pm-hex { background: linear-gradient(160deg, #c9a6ff, #4a1f8a); }
.pm-phone .pm-node.k-rift .pm-disc { background: radial-gradient(circle at 50% 45%, #2a0f4f, #08030f); }
.pm-phone .pm-node.cursed .pm-hex { background: linear-gradient(160deg, #6a3aa8, #1a0b2e); filter: drop-shadow(0 0 8px rgba(176,108,255,.8)); }
.pm-phone .pm-node.cursed .pm-disc { background: radial-gradient(circle at 50% 35%, #3a1d5f, #0c0518); }
.pm-phone .pm-node.cursed.on .pm-hex { background: linear-gradient(160deg, #f8d030, #b06cff); }
.pm-curse { position: absolute; right: -8px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #7b3cff; color: #fff;
  font: 700 11px/22px var(--font); box-shadow: 0 0 0 2px #1c1236, 0 0 10px rgba(176,108,255,.9); }
.pm-what { font-size: 12px; color: #c9bdf0; }
.pm-swarm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: #c9bdf0; }
.pm-sw { width: 40px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.06); }
.pm-curses { display: grid; gap: 2px; padding: 6px 8px; border-radius: 4px 12px 4px 12px; background: rgba(123,60,255,.18); box-shadow: inset 0 0 0 1px rgba(176,108,255,.5); font-size: 12px; }
.pm-curses b { font: italic 800 13px var(--pd-head, var(--font)); text-transform: uppercase; color: #d6b3ff; }
.pm-curses span::before { content: "✦ "; color: #b06cff; }
.pm-curses em { font-style: normal; color: #f8d030; }
.routes-ui .pm-card.is-cursed { box-shadow: inset 4px 0 0 #b06cff, 0 0 0 2px rgba(176,108,255,.6), 0 0 16px rgba(123,60,255,.3); }
.routes-ui .pm-card .map-goal.zone { background: #5fe08a; color: #23163f; }
.routes-ui .pm-card .map-goal.swarm { background: #ff8a4d; color: #23163f; }
.routes-ui .map-goal.zone, .routes-ui .map-goal.swarm { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 700; }
.pm-rift { width: 36px; height: 36px; image-rendering: pixelated; }

/* ---------- the trainer skills (04-11-2026, modes/routes-meta.js): five lanes, home on the left, the badge at the end ---------- */
.hub-panel .hub-box.sk-box { width: min(1320px, 96vw); max-height: 94vh; margin-top: 2vh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.sk-box .hub-head { align-items: center; }
.sk-xp { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 44px; padding: 5px 14px 5px 8px; border-radius: 4px 16px 4px 16px; background: #1d1240; box-shadow: inset 0 0 0 2px #f8d030; font: 700 13px var(--font); white-space: nowrap; }
.sk-xp b { font: italic 800 22px 'Kanit', var(--font); color: #f8d030; }
.sk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; min-height: 0; }
.sk-lanes { display: grid; align-content: start; gap: 8px; min-height: 0; overflow-y: auto; padding: 4px; }
.sk-lane { display: grid; grid-template-columns: 116px minmax(0, 1fr) 96px; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px;
  background: linear-gradient(to right, color-mix(in srgb, var(--c) 18%, transparent), rgba(255,255,255,.03) 60%, color-mix(in srgb, var(--c) 14%, transparent)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sk-name b { display: block; font: italic 800 17px 'Kanit', var(--font); text-transform: uppercase; color: var(--c); }
.sk-name small { display: block; color: #c9bdf0; font-size: 11px; }
.sk-name em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: #f8d030; }
.sk-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.sk-track::before { content: ''; position: absolute; left: 6%; right: -8%; top: 26px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(to right, var(--c) 0 8px, transparent 8px 14px); opacity: .5; }
.sk-stop { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.sk-stop small { font-size: 11px; line-height: 1.15; text-align: center; max-width: 100px; }
.sk-pin { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #2d2357; box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 4px 0 rgba(0,0,0,.35); }
.sk-pin em, .sk-badge em { position: absolute; top: -7px; right: -9px; padding: 0 6px; border-radius: 99px; background: #1d1240; color: #f8d030; font: 700 11px var(--font); font-style: normal; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.sk-pin i { position: absolute; bottom: -5px; left: -5px; width: 18px; height: 18px; border-radius: 50%; background: #1d1240; color: var(--c); font: 700 11px/18px var(--font); font-style: normal; text-align: center; }
.sk-stop.open .sk-pin { box-shadow: 0 0 0 3px var(--c), 0 4px 0 rgba(0,0,0,.35); }
.sk-stop.open.poor .sk-pin { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent), 0 4px 0 rgba(0,0,0,.35); }
.sk-stop.got .sk-pin { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 0 0 3px #fff, 0 0 14px var(--c), 0 4px 0 rgba(0,0,0,.35); }
.sk-stop.locked { opacity: .4; }
.sk-stop.sel .sk-pin { outline: 3px solid #fff; outline-offset: 3px; }
.sk-badge { position: relative; width: 90px; height: 90px; justify-self: end; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s; }
.sk-badge:hover { transform: rotate(-3deg) scale(1.04); }
.sk-badge svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.sk-badge.none svg { filter: grayscale(1) brightness(.75) drop-shadow(0 4px 0 rgba(0,0,0,.35)); opacity: .8; }
.sk-badge.sel::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid #fff; }
.sk-badge > span { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 4px; background: #f8d030; color: #1d1240; font: 700 10px var(--font); white-space: nowrap; }
.sk-home { display: flex; align-items: center; gap: 6px; margin: 2px 4px; color: #c9bdf0; font-size: 12px; }
.sk-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; }
.sk-info { padding: 10px 12px; border-radius: 16px; background: rgba(0,0,0,.25); }
.sk-info p { margin: 3px 0 6px; color: #c9bdf0; font-size: 12.5px; }
.sk-h { font: italic 800 16px 'Kanit', var(--font); }
.sk-ti { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: start; }
.sk-ti b { display: block; font: italic 800 17px 'Kanit', var(--font); }
.sk-big { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c)); box-shadow: 0 0 0 3px #fff; }
.sk-big.b { background: none; box-shadow: none; }
.sk-big.b svg { width: 58px; height: 58px; }
.sk-tag { display: inline-block; margin-bottom: 2px; padding: 0 7px; border-radius: 4px; background: var(--c); color: #1d1240; font: 700 10px var(--font); text-transform: uppercase; }
.sk-have { color: #7cff8a !important; font-weight: 700; }
.sk-need { color: #ffb0b0 !important; }
.sk-stats { min-height: 0; overflow-y: auto; padding: 8px 10px; border-radius: 16px; background: rgba(28,18,54,.9); }
.sk-st-h { margin-bottom: 4px; font: italic 800 14px 'Kanit', var(--font); text-transform: uppercase; color: #f8d030; }
/* the stats panel, shared with the Trainer card: a group per road under its badge */
.sk-grp { margin-bottom: 4px; padding: 3px 6px 2px; border-radius: 12px; background: rgba(255,255,255,.035); }
.sk-grp h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font: italic 800 12px 'Kanit', var(--font); text-transform: uppercase; color: var(--c); }
.sk-grp h5 small { margin-left: auto; font: 11px var(--font); text-transform: none; color: #c9bdf0; }
.sk-mini { width: 20px; height: 20px; flex: none; }
.sk-mini svg { display: block; width: 100%; height: 100%; }
.sk-mini.none svg { filter: grayscale(1) brightness(.8); opacity: .7; }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 64px; align-items: center; gap: 8px; padding: 0 4px; border-radius: 6px; font-size: 11.5px; line-height: 15.5px; }
.sk-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.sk-bar i { display: block; height: 100%; border-radius: 99px; background: #6a5a9a; }
.sk-row b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-row.up { background: color-mix(in srgb, var(--c) 18%, transparent); }
.sk-row.up .sk-bar i { background: var(--c); }
.sk-row.up b { color: #7cff8a; }
/* on the Trainer card */
.tc-groups { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.tc-abb { display: inline-block; width: 26px; height: 26px; vertical-align: middle; }
.tc-abb svg { display: block; width: 100%; height: 100%; }
.tc-rbs { display: flex; justify-content: center; gap: 6px; width: 100%; }
.tc-rb { width: 34px; height: 34px; }
.tc-rb svg { display: block; width: 100%; height: 100%; }
.tc-rb.none svg { filter: grayscale(1) brightness(.85); opacity: .7; }
.pm-redraw { margin-left: auto; margin-right: 44px; }
@media (max-width: 1000px) { .sk-wrap { grid-template-columns: 1fr; } .sk-lane { grid-template-columns: 90px minmax(0, 1fr) 70px; } .sk-badge { width: 66px; height: 66px; } }

/* Settings › Controls: the dialog of a rebindable key, "Press the key for ..." (core/keys.js,
 * 04-11-2026). The list itself is .st-rebind, in the Settings block below. The dialog is put on
 * the body, outside Settings, so it carries .routes-ui itself and lies over Settings (z-index 60). */
.kb-ov { z-index: 70; }
/* (the caps are what you press: shown on a touch screen too, where body.touch hides every other kbd) */
body.touch .st-win kbd, body.touch .kb-now kbd { display: inline-grid !important; }
.kb-box { width: min(460px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kb-box h3 { margin: 0; }
.kb-now { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.kb-now kbd { min-width: 34px; padding: 4px 10px; font-size: 20px; text-align: center; }
.kb-ask { margin: 0; font-size: 17px; color: #fff; animation: kbBlink 1.2s ease-in-out infinite; }
.kb-touch { margin: 0; }
.kb-err { margin: 0; min-height: 18px; color: #ff8a7a; }
@keyframes kbBlink { 50% { opacity: .45; } }
.routes-ui .kb-now { color: var(--pd-lilac); }
.routes-ui .kb-ask { color: var(--pd-y); }
/* its cap in the Routes look: the plain white cap of the key list, not the outlined pixel one */
.routes-ui .kb-now kbd { display: inline-grid; place-items: center; height: 34px; min-width: 42px; padding: 0 10px;
  border: 0; border-radius: 6px; background: #fff; color: var(--pd-text); box-shadow: 0 3px 0 #b9acdf;
  font: 700 18px system-ui, 'Segoe UI', sans-serif; text-shadow: none; }

/* ============ The main menu (ui/menu.js, 04-11-2026; the design: tools/menu-mockups/option-6.html) ============
 * Three columns in the Routes look (#scr-menu carries .routes-ui, so it keeps it under a sub-screen;
 * while it is in front the body has it too, and .mm-front): friends (left), the partner with the party
 * and Play (middle), the menu (right). Everything slides in; the layout caps its width on big screens.
 * Under 520 px high (phones in landscape) it tightens, under 800 px wide the friends become a rail of
 * avatars, under 640 px the menu is icons only, and held upright it is one scrolling column.
 */
#scr-menu {
  display: block; padding: 0; overflow: hidden; user-select: none;
  background:
    radial-gradient(900px 520px at 50% 42%, rgba(255,79,154,.22), transparent 60%),
    radial-gradient(700px 400px at 8% 100%, rgba(248,208,48,.10), transparent 60%),
    radial-gradient(700px 400px at 100% 0%, rgba(122,90,216,.35), transparent 60%),
    repeating-linear-gradient(-60deg, #22173f 0 40px, #281c4a 40px 80px);
}
#scr-menu.hidden { display: none; }
/* In front: the top bar's coins, name and logout are the menu's own (its other buttons sit in .mm-tools). */
body.mm-front #topbar, body.mm-front #credits-line { display: none !important; }
body.mm-front .sound-panel { top: auto; bottom: 54px; }
/* Under a sub-screen the top bar is back in its corner: the menu's own pills give way to it. */
body:not(.mm-front) #scr-menu .mk-user { visibility: hidden; }
.mm { position: absolute; inset: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 28px; align-items: stretch;
  padding: 18px max(30px, calc((100vw - 1480px) / 2)) 22px; }
.mm * { box-sizing: border-box; }
.mm button { cursor: pointer; font-family: inherit; }
/* a dotted sheen over the stripes, and one broad pink speed band behind the stage */
.mm::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px); background-size: 22px 22px; }
.mm::after { content: ''; position: absolute; left: 18%; right: 18%; top: 44%; height: 150px; pointer-events: none;
  transform: skewY(-5deg); background: linear-gradient(90deg, transparent, rgba(255,79,154,.18) 20%, rgba(255,79,154,.18) 80%, transparent);
  box-shadow: 0 -8px 0 rgba(255,255,255,.05), 0 8px 0 rgba(255,255,255,.05); }
.mm > * { position: relative; z-index: 1; }
@keyframes mmRise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mmSpin { to { transform: rotate(360deg); } }
@keyframes mmShine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes mmPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--pd-ink), 0 0 0 4px rgba(124,196,90,.45); } 50% { box-shadow: 0 0 0 2px var(--pd-ink), 0 0 0 8px rgba(124,196,90,0); } }
/* solo or in a party (menu.js sets data-party) */
#scr-menu[data-party="on"] .solo-only, #scr-menu[data-party="off"] .party-only { display: none !important; }

/* ---- the shared pieces: logo, line icons, pills, chips, Play, small buttons ---- */
.mm .mk-logo { line-height: 1; }
.mm .mk-logo .t1 { font: italic 800 44px/1 var(--pd-head); color: #fff; text-shadow: 4px 4px 0 var(--pd-pink); white-space: nowrap; }
.mm .mk-logo .t2 { display: inline-block; margin-top: 8px; padding: 2px 26px 0; background: var(--pd-y); color: var(--pd-text);
  font: italic 800 17px/1.3 var(--pd-head); letter-spacing: .08em; text-transform: uppercase; clip-path: var(--pd-slant); }
.mm i[data-ic] { display: inline-grid; place-items: center; width: var(--is, 22px); height: var(--is, 22px); flex: none; font-style: normal; }
.mm i[data-ic] svg { width: 100%; height: 100%; display: block; }
.mm .mk-user { display: flex; align-items: center; gap: 8px; }
.mm .mk-pill { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px 0 6px; min-width: 0;
  background: var(--pd-ink); color: #fff; clip-path: var(--pd-slant); font: 700 15px var(--font); white-space: nowrap; }
.mm .mk-pill .uname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mm .mk-pill .av { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--pd-pink); display: grid; place-items: center; font: italic 800 13px var(--pd-head); margin-left: 8px; text-transform: uppercase; }
.mm .mk-pill .sync { margin-left: 0; flex: none; box-shadow: 0 0 0 2px var(--pd-ink); }
.mm .mk-pill.coins { background: var(--pd-y); color: var(--pd-text); padding-left: 14px; flex: none; }
.mm .mk-pill.coins .coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b0, #f0b818 60%, #b07a00); box-shadow: 0 0 0 2px var(--pd-text); }
.mm .mk-logout { height: 34px; width: 46px; flex: none; border: 0; background: rgba(255,255,255,.12); color: #fff; clip-path: var(--pd-slant); display: grid; place-items: center; transition: background .12s; }
.mm .mk-logout:hover, .mm .mk-logout:focus-visible { background: var(--pd-red, #ff4f5e); outline: none; }
.mm .disc { border-radius: 50%; background: #fff3b0; box-shadow: inset 0 -10px 0 var(--pd-y2), 0 0 0 4px #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.mm .ava { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.mm .ava canvas, .mm .mate canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.mm .chip-btn { display: flex; align-items: center; gap: 10px; border: 0; text-align: left; padding: 8px 22px 8px 24px; background: #fff; color: var(--pd-text);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: transform .12s, background .12s; min-width: 0; }
.mm .chip-btn:hover, .mm .chip-btn:focus-visible { background: var(--pd-y); transform: translateX(5px); outline: none; }
.mm .chip-btn b { display: block; font: italic 800 17px/1.1 var(--pd-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm .chip-btn small { display: block; font: 13px/1.2 var(--font); color: var(--pd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm .chip-btn small.gold { color: #b07a00; font-weight: 700; }
.mm .chip-btn .tx { min-width: 0; }
.mm .badge { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--pd-pink); color: #fff; font: 700 12px/18px var(--font); flex: none; }
.mm .play-btn { position: relative; border: 0; background: var(--pd-y); color: var(--pd-text);
  clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
  font: italic 800 56px/1 var(--pd-head); text-transform: uppercase; letter-spacing: .02em; transition: transform .12s, background .12s, color .12s; }
.mm .play-btn:hover, .mm .play-btn:focus-visible { background: var(--pd-pink); color: #fff; transform: translateX(4px); outline: none; }
.mm .play-btn small { display: block; font: italic 600 15px/1.2 var(--pd-head); letter-spacing: .06em; opacity: .8; }
.mm .play-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(255,255,255,.22) 22px 30px); mask-image: linear-gradient(90deg, transparent 45%, #000); }
.mm .mini-btn { border: 0; padding: 5px 16px; font: italic 800 13px var(--pd-head); text-transform: uppercase; white-space: nowrap;
  background: #fff; color: var(--pd-text); clip-path: var(--pd-slant); flex: none; transition: background .12s; }
.mm .mini-btn:hover, .mm .mini-btn:focus-visible { background: var(--pd-y); color: var(--pd-text); outline: none; }
.mm .mini-btn.pink { background: var(--pd-pink); color: #fff; }
.mm .mini-btn.pink:hover, .mm .mini-btn.pink:focus-visible { background: var(--pd-y); color: var(--pd-text); }
.mm .mini-btn.ghost { background: rgba(255,255,255,.12); color: #fff; }
.mm .mini-btn.ghost:hover, .mm .mini-btn.ghost:focus-visible { background: var(--pd-y); color: var(--pd-text); }
.mm .mini-btn:disabled { opacity: .5; cursor: default; }
/* the trainer portrait (ui/trainer-ui.js portrait, 64 px) */
.mm .pt { width: 64px; height: 64px; flex: none; }

/* ================= left: friends ================= */
.mm .mm-left { display: grid; align-content: center; min-width: 0; animation: pdIn .35s cubic-bezier(.2,.9,.3,1.15) backwards; }
.mm .mm-friends.box { width: auto; max-width: none; margin: 0; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; animation: pdPop .4s cubic-bezier(.2,.9,.3,1.1) .1s backwards; }
.mm .fh { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: #fff; padding: 0; width: 100%; text-align: left; }
.mm .fh .fi { display: none; }
.mm .fh b { padding: 2px 16px 0; font: italic 800 17px var(--pd-head); text-transform: uppercase; background: var(--pd-pink); clip-path: var(--pd-slant); }
.mm .fh .on { font: 13px var(--font); color: var(--pd-y); }
.mm .fh i[data-ic=chevron] { margin-left: auto; color: var(--pd-lilac); --is: 18px; transition: transform .12s, color .12s; }
.mm .fh:hover i[data-ic=chevron], .mm .fh:focus-visible i[data-ic=chevron] { color: var(--pd-y); transform: translateX(3px); }
.mm .fh:focus-visible { outline: none; }
.mm .flist { display: flex; flex-direction: column; gap: 4px; }
.mm .fr { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; min-width: 0; border-radius: 4px 14px 4px 14px; transition: background .12s; }
.mm .fr:hover { background: rgba(255,255,255,.07); }
.mm .fr .pic { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 0 2px #fff; display: grid; place-items: center;
  font: italic 800 20px var(--pd-head); color: var(--pd-text); text-transform: uppercase; }
.mm .fr .pic.v { background: #e6dcff; }
/* the trainer they play as, cropped to the disc (the dot sits outside it) */
.mm .fr .pic .clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.mm .fr .pic .clip .tr-portrait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -42%) scale(.78); }
.mm .fr .pic.req { background: var(--pd-pink); color: #fff; }
.mm .fr .dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #7cc45a; animation: mmPulse 2s ease-out infinite; }
.mm .fr .nm { min-width: 0; flex: 1; line-height: 1.15; }
.mm .fr b { display: block; font: italic 800 15px var(--pd-head); text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm .fr small { display: block; font-size: 12px; color: var(--pd-lilac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm .fr small em { font-style: normal; color: #b6ff7a; }
.mm .fr .mini-btn { padding: 3px 12px; font-size: 12px; }
.mm .fr .in { font: italic 800 12px var(--pd-head); text-transform: uppercase; color: var(--pd-y); white-space: nowrap; }
.mm .fr.more { padding-left: 8px; font-size: 12px; color: var(--pd-lilac); }
.mm .fempty { margin: 2px 4px; font-size: 13px; line-height: 1.35; color: var(--pd-lilac); }
.mm .fcode { margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pd-lilac); min-width: 0; }
.mm .fcode b { font: italic 800 15px var(--pd-head); color: #fff; letter-spacing: .06em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm .fcode .mini-btn { margin-left: auto; }

/* ================= middle: the partner, the party, Play ================= */
.mm .mm-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; animation: mmRise .45s cubic-bezier(.2,.9,.3,1.1) .05s backwards; }
.mm .mm-mid .mk-logo { text-align: center; margin-bottom: 14px; }
.mm .mm-mid .mk-logo .t1 { font-size: 40px; }
.mm .mm-mid .mk-logo .t2 { font-size: 14px; }
.mm .hero { position: relative; display: flex; flex-direction: column; align-items: center; }
.mm .ring { position: relative; width: 238px; height: 238px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 200deg, var(--pd-y), var(--pd-pink), #7a5ad8, var(--pd-y)); animation: mmSpin 14s linear infinite; }
.mm .ring.shiny { background: conic-gradient(from 200deg, #9ae6ff, var(--pd-pink), #7a5ad8, #9ae6ff); }
.mm .ring::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.18); }
.mm .hero .disc { width: 220px; height: 220px; box-shadow: inset 0 -12px 0 var(--pd-y2), 0 0 0 5px #fff, 0 22px 40px rgba(0,0,0,.45); animation: mmSpin 14s linear infinite reverse; }
.mm #menu-partner { width: 100%; height: 100%; image-rendering: pixelated; animation: mmBob 3.2s ease-in-out infinite; }
.mm .hero .nm { position: relative; z-index: 2; margin-top: -18px; padding: 4px 30px 2px; font: italic 800 30px/1.1 var(--pd-head); text-transform: uppercase; color: #fff;
  background: var(--pd-pink); clip-path: var(--pd-slant); box-shadow: 4px 5px 0 var(--pd-pink2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mm .hero .seg { margin: 8px auto 0; border-color: rgba(255,255,255,.3); }
.mm .hero .seg button { padding: 3px 12px; font-size: 12px; color: #fff; text-shadow: none; }

.mm .party { width: min(100%, 470px); display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.mm .party .ph { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mm .party .ph b { padding: 1px 14px 0; font: italic 800 14px var(--pd-head); letter-spacing: .06em; text-transform: uppercase; color: var(--pd-text); background: var(--pd-y); clip-path: var(--pd-slant); flex: none; }
.mm .party .ph small { font: 13px var(--font); color: var(--pd-lilac); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm .party .ph .mini-btn { margin-left: auto; }
.mm .slots { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mm .pslot { position: relative; display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 12px 0 8px; background: #fff; color: var(--pd-text);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); min-width: 0; overflow: hidden; animation: pdIn .3s cubic-bezier(.2,.9,.3,1.15) backwards; }
.mm .pslot:nth-child(2) { animation-delay: .06s; } .mm .pslot:nth-child(3) { animation-delay: .12s; } .mm .pslot:nth-child(4) { animation-delay: .18s; }
.mm .pslot.me { background: linear-gradient(90deg, #fff1a8, #fff 60%); }
.mm .pslot .who { position: relative; width: 56px; height: 58px; flex: none; }
.mm .pslot .who .pt { position: absolute; left: -2px; bottom: -8px; transform: scale(.82); transform-origin: 0 100%; }
.mm .pslot .who .ava { position: absolute; right: -2px; bottom: 5px; width: 28px; height: 28px; box-shadow: 0 0 0 2px #fff; }
.mm .pslot .who .mate { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 0 2px var(--pd-line); overflow: hidden; }
.mm .pslot .nm { min-width: 0; flex: 1; }
.mm .pslot b { display: block; font: italic 800 16px/1.1 var(--pd-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm .pslot small { display: block; font-size: 12px; color: var(--pd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm .pslot .st { font: italic 800 11px var(--pd-head); text-transform: uppercase; padding: 1px 9px; clip-path: var(--pd-slant); background: #7cc45a; color: #fff; flex: none; }
.mm .pslot .st.host { background: var(--pd-text); color: var(--pd-y); }
.mm .pslot .st.wait { background: #c9bdf0; color: var(--pd-text); }
.mm .pslot .st.bad { background: var(--pd-red, #ff4f5e); }
.mm .pslot.open { background: rgba(255,255,255,.06); color: var(--pd-lilac); border: 0; text-align: left; transition: background .12s, color .12s; box-shadow: inset 0 0 0 2px rgba(201,189,240,.25); }
.mm button.pslot.open:hover, .mm button.pslot.open:focus-visible { background: rgba(255,255,255,.14); color: #fff; outline: none; }
.mm .pslot.open .ico { width: 40px; height: 40px; margin: 0 4px 0 6px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); box-shadow: 0 0 0 2px rgba(201,189,240,.4); flex: none; }
.mm .pslot.open .ico i { --is: 22px; }
.mm .pslot.open b { color: inherit; }
.mm .pslot.open small { color: rgba(201,189,240,.7); }

.mm .mm-mid > .play-btn { width: min(100%, 470px); height: 100px; margin-top: 8px; font-size: 56px; display: flex; align-items: center; justify-content: center; gap: 18px;
  box-shadow: 6px 7px 0 var(--pd-y2); overflow: hidden; animation: mmRise .4s cubic-bezier(.2,.9,.3,1.1) .25s backwards; flex: none; }
.mm .play-btn .tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.mm .play-btn small { font-size: 13px; }
.mm .play-btn .tri { width: 54px; height: 54px; border-radius: 50%; background: var(--pd-text); color: var(--pd-y); display: grid; place-items: center; flex: none; transition: background .12s, color .12s; }
.mm .play-btn .tri i { --is: 30px; margin-left: 4px; }
.mm .play-btn:hover .tri, .mm .play-btn:focus-visible .tri { background: #fff; color: var(--pd-pink); }
.mm .play-btn .sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: mmShine 3.4s ease-in-out infinite; pointer-events: none; }
.mm .friends-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 20px; font-size: 14px; }
.mm .friends-cta i { --is: 18px; }

/* ================= right: the user and the menu ================= */
.mm .mm-side { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.mm .mm-side .mk-user { justify-content: flex-end; animation: pdIn .35s cubic-bezier(.2,.9,.3,1.15) backwards; }
.mm .menu { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-self: center; }
.mm .menu h3 { display: flex; align-items: center; gap: 8px; margin: 8px 0 1px; font: italic 800 13px var(--pd-head); letter-spacing: .1em; text-transform: uppercase; color: var(--pd-y); }
.mm .menu h3::before { content: ''; width: 14px; height: 3px; background: var(--pd-pink); transform: skewX(-20deg); }
.mm .menu h3::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.mm .menu .rows { display: flex; flex-direction: column; gap: 6px; }
.mm .menu .chip-btn { height: 46px; padding: 0 16px 0 0; gap: 12px; animation: pdIn .3s cubic-bezier(.2,.9,.3,1.15) backwards; }
.mm .menu .rows .chip-btn:nth-child(2) { animation-delay: .05s; } .mm .menu .rows .chip-btn:nth-child(3) { animation-delay: .1s; }
.mm .menu .chip-btn .ic { width: 50px; height: 100%; display: grid; place-items: center; flex: none; background: #efe8ff; color: var(--pd-pink); clip-path: polygon(12px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background .12s, color .12s; }
.mm .menu .chip-btn .ic i { --is: 22px; }
.mm .menu .chip-btn:hover .ic, .mm .menu .chip-btn:focus-visible .ic { background: var(--pd-text); color: var(--pd-y); }
.mm .menu .chip-btn .tx { display: flex; align-items: baseline; gap: 8px; }
.mm .menu .chip-btn b { font-size: 16px; }
.mm .menu .chip-btn.dark { background: var(--pd-ink); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); }
.mm .menu .chip-btn.dark .ic { background: rgba(255,255,255,.08); color: var(--pd-lilac); }
.mm .menu .chip-btn.dark:hover, .mm .menu .chip-btn.dark:focus-visible { background: var(--pd-y); color: var(--pd-text); }
.mm .menu .chip-btn.dark:hover .ic, .mm .menu .chip-btn.dark:focus-visible .ic { background: var(--pd-text); color: var(--pd-y); }
.mm .mm-guest { text-align: right; font-size: 12px; color: #ffb0b8; }
.mm .mm-foot { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.mm .ver { min-width: 0; text-align: right; font-size: 11px; color: rgba(201,189,240,.5); }
.mm .ver a { color: inherit; }
/* the top bar's small buttons (save, news, sound, full screen...), moved here while the menu is in front */
.mm .mm-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mm .mm-tools:empty { display: none; }
/* (icons only: each keeps its title as the tooltip) */
.mm .mm-tools .btn.small { position: relative; padding: 6px 13px; font-size: 0; line-height: 0; }
.mm .mm-tools .btn.small img { width: 22px; height: 22px; }

/* ---- phone, landscape ---- */
@media (max-height: 520px) {
  .mm { grid-template-columns: 180px minmax(0, 1fr) 286px; gap: 10px; padding: 8px 12px 8px; }
  .mm .mm-mid .mk-logo { display: none; }
  .mm::after { height: 80px; top: 40%; }
  .mm .mk-pill { height: 28px; font-size: 13px; }
  .mm .mk-logout { height: 28px; width: 38px; }
  .mm .mm-friends.box { padding: 7px 10px 7px; gap: 4px; box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px var(--pd-pink); }
  .mm .fh b { font-size: 13px; padding: 1px 10px 0; }
  .mm .fh .on { display: none; }
  .mm .flist { gap: 2px; }
  .mm .fr { padding: 1px 2px; gap: 6px; border-radius: 4px 10px 4px 10px; }
  .mm .fr .pic { width: 28px; height: 28px; font-size: 13px; }
  .mm .fr .dot { width: 8px; height: 8px; }
  .mm .fr b { font-size: 12px; }
  .mm .fr small, .mm .fr .in, .mm .fr.more, .mm .fcode, .mm .fempty { display: none; }
  .mm .fr .mini-btn { padding: 2px 8px; font-size: 10px; }
  .mm .mm-mid { gap: 4px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; }
  .mm .ring { width: 118px; height: 118px; }
  .mm .ring::after { inset: -8px; }
  .mm .hero .disc { width: 106px; height: 106px; box-shadow: inset 0 -7px 0 var(--pd-y2), 0 0 0 3px #fff, 0 10px 20px rgba(0,0,0,.4); }
  .mm .hero .nm { margin-top: -10px; font-size: 17px; padding: 2px 16px 1px; box-shadow: 3px 3px 0 var(--pd-pink2); }
  .mm .hero .seg { margin-top: 3px; }
  .mm .hero .seg button { padding: 1px 8px; font-size: 10px; }
  .mm .party { width: 262px; margin: 0 0 0 12px; gap: 4px; }
  .mm .party .ph b { font-size: 11px; }
  .mm .party .ph small { display: none; }
  .mm .party .ph .mini-btn { padding: 2px 10px; font-size: 11px; }
  .mm .slots { gap: 4px; }
  .mm .pslot { height: 32px; padding: 0 8px 0 4px; gap: 5px; }
  .mm .pslot .who { width: 32px; height: 32px; }
  .mm .pslot .who .pt { transform: scale(.46); bottom: -4px; }
  .mm .pslot .who .ava { width: 18px; height: 18px; bottom: 2px; right: -1px; }
  .mm .pslot .who .mate { width: 26px; height: 26px; left: 2px; }
  .mm .pslot b { font-size: 12px; }
  .mm .pslot small { display: none; }
  .mm .pslot .st { font-size: 9px; padding: 0 6px; }
  .mm .pslot.open .ico { width: 22px; height: 22px; margin: 0 2px 0 4px; }
  .mm .pslot.open .ico i { --is: 13px; }
  .mm .mm-mid > .play-btn { width: 290px; height: 60px; margin-top: 4px; font-size: 34px; gap: 10px; box-shadow: 4px 4px 0 var(--pd-y2); }
  .mm .play-btn small { font-size: 10px; }
  .mm .play-btn .tri { width: 32px; height: 32px; }
  .mm .play-btn .tri i { --is: 18px; margin-left: 2px; }
  .mm .friends-cta { margin-top: 3px; padding: 3px 12px; font-size: 11px; }
  .mm .friends-cta i { --is: 14px; }
  .mm .mm-side { gap: 6px; }
  .mm .menu { gap: 4px; }
  .mm .menu h3 { display: none; }
  .mm .menu .groups { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
  .mm .menu .groups .rows { display: contents; }
  .mm .menu .chip-btn { height: 32px; gap: 6px; padding-right: 8px; }
  .mm .menu .chip-btn .ic { width: 30px; }
  .mm .menu .chip-btn .ic i { --is: 15px; }
  .mm .menu .chip-btn b { font-size: 12px; }
  .mm .menu .chip-btn .tx small { display: none; }
  .mm .menu .badge { font-size: 10px; line-height: 15px; padding: 0 6px; }
  .mm .ver { display: none; }
  .mm .mm-tools .btn.small { padding: 2px 7px; }
  body.mm-front .sound-panel { bottom: 40px; }
}

/* ---- small phones, landscape (iPhone SE 667x375, Android 640x360): the friends panel is a rail of
   avatars, the menu a tight two-column grid, the stage stacks partner / party / Play ---- */
@media (max-height: 520px) and (max-width: 799px) {
  .mm { grid-template-columns: 52px minmax(0, 1fr) 228px; gap: 8px; padding: 6px 8px 6px; }
  .mm::after { display: none; }
  .mm .mm-friends.box { padding: 6px 4px; gap: 6px; align-items: center; border-radius: 4px 14px 4px 14px; box-shadow: 0 0 0 2px #fff, 3px 4px 0 2px var(--pd-pink); }
  .mm .fh { width: auto; }
  .mm .fh b, .mm .fh .on, .mm .fh i[data-ic=chevron] { display: none; }
  .mm .fh .fi { display: inline-grid; --is: 22px; color: var(--pd-y); margin: 0 auto; }
  .mm .fr { padding: 0; gap: 0; justify-content: center; border-radius: 0; }
  .mm .fr .nm, .mm .fr .mini-btn, .mm .fr .in { display: none; }
  .mm .fr .pic { width: 34px; height: 34px; font-size: 15px; }
  .mm .fr .dot { width: 9px; height: 9px; }
  .mm .mm-mid { flex-direction: column; flex-wrap: nowrap; gap: 5px; }
  .mm .ring { width: 92px; height: 92px; }
  .mm .ring::after { inset: -6px; }
  .mm .hero .disc { width: 82px; height: 82px; box-shadow: inset 0 -5px 0 var(--pd-y2), 0 0 0 3px #fff, 0 8px 16px rgba(0,0,0,.4); }
  .mm .hero .nm { margin-top: -8px; font-size: 14px; padding: 2px 12px 1px; }
  .mm .hero .seg { display: none; }
  .mm .party { width: 100%; max-width: 262px; margin: 0; gap: 3px; }
  .mm .pslot { height: 30px; }
  .mm .pslot .who { width: 30px; height: 30px; }
  .mm .pslot .who .pt { transform: scale(.42); bottom: -4px; }
  .mm .pslot .who .ava { width: 16px; height: 16px; }
  .mm .pslot .who .mate { width: 24px; height: 24px; }
  .mm .pslot b { font-size: 11px; }
  .mm .mm-mid > .play-btn { width: 100%; max-width: 262px; height: 50px; margin-top: 2px; font-size: 28px; gap: 8px; }
  .mm .play-btn small { font-size: 9px; }
  .mm .play-btn .tri { width: 28px; height: 28px; }
  .mm .play-btn .tri i { --is: 16px; }
  .mm .mm-side { gap: 5px; }
  .mm .mk-pill { height: 26px; font-size: 12px; padding: 0 10px 0 4px; gap: 5px; }
  .mm .mk-pill .av { width: 20px; height: 20px; font-size: 11px; margin-left: 4px; }
  .mm .mk-logout { height: 26px; width: 32px; }
  .mm .menu .groups { gap: 4px 5px; }
  .mm .menu .chip-btn { height: 30px; gap: 4px; padding-right: 6px; }
  .mm .menu .chip-btn .ic { width: 26px; }
  .mm .menu .chip-btn .ic i { --is: 14px; }
  .mm .menu .chip-btn b { font-size: 11px; }
  .mm .menu .badge { font-size: 9px; line-height: 14px; padding: 0 5px; }
}
/* ---- very small, landscape (iPhone 5 568x320): the menu as icons only ---- */
@media (max-height: 520px) and (max-width: 639px) {
  .mm { grid-template-columns: 48px minmax(0, 1fr) 118px; gap: 6px; padding: 5px 6px 5px; }
  .mm .fr .pic { width: 30px; height: 30px; }
  .mm .mm-side .mk-user { flex-wrap: wrap; gap: 4px; }
  .mm .mk-pill { height: 24px; font-size: 11px; padding: 0 8px 0 3px; }
  .mm #mm-pill { max-width: 100%; }
  .mm .mk-logout { height: 24px; width: 28px; }
  .mm .menu .groups { grid-template-columns: repeat(3, 36px); gap: 4px; justify-content: end; }
  .mm .menu .chip-btn { position: relative; height: 36px; padding: 0; gap: 0; justify-content: center; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
  .mm .menu .chip-btn .ic { width: 100%; clip-path: none; background: transparent; }
  .mm .menu .chip-btn .ic i { --is: 18px; }
  .mm .menu .chip-btn .tx { display: none; }
  .mm .menu .badge { position: absolute; top: 2px; right: 6px; margin: 0; font-size: 9px; line-height: 13px; padding: 0 4px; }
  .mm .ring { width: 78px; height: 78px; }
  .mm .hero .disc { width: 70px; height: 70px; }
  .mm .party { max-width: 250px; }
  .mm .party .ph b { font-size: 10px; }
  .mm .mm-mid > .play-btn { max-width: 250px; height: 46px; font-size: 26px; }
}
/* ---- portrait (a phone held upright): one column, scrolling ---- */
@media (orientation: portrait) and (max-width: 600px) {
  #scr-menu { overflow-y: auto; }
  .mm { position: relative; inset: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 14px 24px; }
  .mm::after { display: none; }
  .mm .mm-mid { order: 1; }
  .mm .mm-side { order: 2; grid-template-rows: auto; }
  .mm .mm-left { order: 3; }
  .mm .mm-side .mk-user { justify-content: center; }
  .mm .mm-mid .mk-logo .t1 { font-size: 32px; text-shadow: 3px 3px 0 var(--pd-pink); }
  .mm .mm-mid .mk-logo .t2 { font-size: 12px; }
  .mm .ring { width: 170px; height: 170px; }
  .mm .hero .disc { width: 156px; height: 156px; }
  .mm .hero .nm { font-size: 22px; margin-top: -12px; }
  .mm .party { width: 100%; max-width: none; }
  .mm .slots { grid-template-columns: 1fr 1fr; }
  .mm .pslot { height: 50px; }
  .mm .pslot small { display: none; }
  .mm .mm-mid > .play-btn { width: 100%; max-width: none; height: 78px; font-size: 42px; }
  .mm .menu { align-self: auto; }
  .mm .menu h3 { display: none; }
  .mm .menu .groups { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mm .menu .groups .rows { display: contents; }
  .mm .menu .chip-btn { height: 42px; gap: 8px; padding-right: 10px; }
  .mm .menu .chip-btn .ic { width: 40px; }
  .mm .menu .chip-btn b { font-size: 14px; }
  .mm .menu .chip-btn .tx small { display: none; }
  .mm .ver, .mm .mm-guest { text-align: center; }
  .mm .mm-tools { justify-content: center; }
  .mm .mm-friends.box { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mm .ring, .mm .hero .disc, .mm #menu-partner, .mm .play-btn .sheen, .mm .fr .dot { animation: none; }
}

/* ============ The entry flow in the Routes look ("Paldea sport") ============
 * Everything you see before the main menu, in the menu's own look (the .mm
 * block above): "Pulsa para empezar" (#tap-start), signing in (#scr-login),
 * the quiz that picks your partner (#scr-test, #scr-result, #scr-starters) and
 * who you play as (#scr-trainer; the design: tools/menu-mockups/screen-trainer.html).
 * Each of those screens carries `routes-ui` itself, so it gets the theme's
 * tokens, panels and buttons; what follows is only what they add on top.
 */

/* ---------------- "Pulsa para empezar": the front door ---------------- */
#tap-start { background: repeating-linear-gradient(-60deg, rgba(42,29,79,.86) 0 40px, rgba(50,33,96,.86) 40px 80px); backdrop-filter: blur(2px); }
#tap-start::before, #tap-start::after { content: ''; position: absolute; pointer-events: none; }
#tap-start::before { inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px); background-size: 22px 22px; }
#tap-start::after { left: 4%; right: 4%; top: 46%; height: 170px; transform: skewY(-5deg);
  background: linear-gradient(90deg, transparent, rgba(255,79,154,.22) 18%, rgba(255,79,154,.22) 82%, transparent);
  box-shadow: 0 -8px 0 rgba(255,255,255,.05), 0 8px 0 rgba(255,255,255,.05); }
.ts-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px;
  animation: mmRise .5s cubic-bezier(.2,.9,.3,1.1) both; }
.ts-logo .t1 { font: italic 800 clamp(40px, 9vw, 86px)/1 var(--pd-head); color: #fff; text-shadow: 5px 5px 0 var(--pd-pink); white-space: nowrap; }
.ts-logo .t2 { display: inline-block; margin-top: 10px; padding: 2px 30px 0; background: var(--pd-y); color: var(--pd-text);
  font: italic 800 clamp(12px, 2.2vw, 19px)/1.4 var(--pd-head); letter-spacing: .1em; text-transform: uppercase; clip-path: var(--pd-slant); }
/* a Poké Ball drawn in CSS, bobbing like the partner on the menu */
.ts-ball { position: relative; width: clamp(48px, 9vh, 84px); height: clamp(48px, 9vh, 84px); margin-top: clamp(8px, 3vh, 26px); border-radius: 50%;
  background: linear-gradient(#ff4f5e 0 47%, #1c1236 47% 53%, #fff 53%); box-shadow: 0 0 0 4px #1c1236, 0 16px 26px rgba(0,0,0,.45);
  animation: mmBob 3.2s ease-in-out infinite; }
.ts-ball::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #1c1236; }
.ts-tag { margin: clamp(8px, 3vh, 22px) 0 0; font-size: 14px; color: var(--pd-lilac); }
.ts-go { margin: 14px 0 0; padding: 5px 34px 3px; background: var(--pd-y); color: var(--pd-text); clip-path: var(--pd-slant);
  font: italic 800 clamp(17px, 2.6vw, 26px) var(--pd-head); text-transform: uppercase; letter-spacing: .02em; animation: tsGo 1.5s ease-in-out infinite; }
@keyframes tsGo { 50% { background: var(--pd-pink); color: #fff; } }

/* ---------------- signing in ---------------- */
#scr-login .login-box { width: min(820px, 100%); display: flex; gap: 22px; align-items: center; padding: 20px 24px; }
#scr-login .login-side { flex: 0 0 43%; text-align: center; }
#scr-login .login-main { flex: 1; min-width: 0; }
#scr-login .logo { margin-bottom: 4px; }
#scr-login .logo .t1 { font: italic 800 clamp(28px, 3.6vw, 44px)/1 var(--pd-head); color: #fff; text-shadow: 4px 4px 0 var(--pd-pink); letter-spacing: 0; }
#scr-login .logo .t2 { display: inline-block; margin-top: 10px; padding: 2px 22px 0; background: var(--pd-y); color: var(--pd-text);
  font: italic 800 15px/1.4 var(--pd-head); letter-spacing: .08em; text-transform: uppercase; clip-path: var(--pd-slant); }
#scr-login .login-tag { margin: 14px 0 8px; font-size: 13px; }
/* (the tabs themselves are the Routes ones, css/story.css: here they share the width) */
#scr-login .tabs { gap: 6px; margin-bottom: 12px; }
#scr-login .tab { flex: 1 1 auto; padding: 7px 10px 5px; text-align: center; }
#scr-login label { margin: 9px 0 3px; font: italic 800 12px var(--pd-head); text-transform: uppercase; letter-spacing: .06em; color: var(--pd-y); }
#scr-login .field { border: 0; border-radius: 4px 14px 4px 14px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(201,189,240,.35); color: #fff; }
#scr-login .field:focus { box-shadow: inset 0 0 0 2px var(--pd-y); }
#scr-login .note a { color: var(--pd-y); }
#scr-login .btn.google { background: #fff; color: var(--pd-text); }
#scr-login .btn.google:hover { background: var(--pd-y); }

/* ---------------- the quiz: question, result, the starters ---------------- */
#scr-test .test-box { width: min(680px, 100%); }
#scr-test .sub { margin: 0 0 8px; }
#scr-test .progress { height: 10px; border-radius: 999px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
#scr-test .progress i { background: linear-gradient(90deg, var(--pd-pink), var(--pd-y)); }
#scr-test .q { margin: 16px 0 14px; font-size: 21px; min-height: 2.4em; }
#scr-test .answer { padding: 11px 22px 11px 26px; border: 0; border-radius: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background: #fff; color: var(--pd-text); font-size: 16px; text-shadow: none;
  transition: transform .12s, background .12s; animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards; }
#scr-test .answer:nth-child(2) { animation-delay: .05s; }
#scr-test .answer:nth-child(3) { animation-delay: .1s; }
#scr-test .answer:nth-child(4) { animation-delay: .15s; }
#scr-test .answer:nth-child(5) { animation-delay: .2s; }
#scr-test .answer::before { display: none; }
#scr-test .answer:hover, #scr-test .answer:focus-visible { background: var(--pd-y); transform: translateX(8px); outline: none; }

#scr-result .result { width: min(600px, 100%); }
#scr-result .trait { margin: 2px 0 6px; font: italic 800 34px/1.1 var(--pd-head); text-transform: uppercase; color: var(--pd-y); }
#scr-result .stage { border: 0; border-radius: 6px 26px 6px 26px;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%), rgba(0,0,0,.25);
  box-shadow: 0 0 0 3px #fff, 6px 7px 0 3px var(--stage-c, var(--pd-pink)); }
#scr-result h3 { margin-top: 8px; font: italic 800 21px var(--pd-head); text-transform: uppercase; color: #fff; }
#scr-result h3 .gold { color: var(--pd-y); }

#scr-starters .wide { width: min(1000px, 100%); }
#scr-starters .grid { gap: 7px; }
#scr-starters .cell { border: 0; border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.08); text-shadow: none;
  transition: transform .12s, background .12s, box-shadow .12s; }
#scr-starters .cell:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
#scr-starters .cell.on { background: var(--pd-y); color: var(--pd-text); box-shadow: 0 0 0 3px #fff; }
#scr-starters .cell b { font: italic 800 14px/1.2 var(--pd-head); text-transform: uppercase; }
#scr-starters #starter-info { color: var(--pd-lilac); }

/* ---------------- who you play as (#scr-trainer, ui/trainer-ui.js) ---------------- */
/* (it opens over the menu, so it starts under the top bar: coins, name, the small buttons) */
#scr-trainer.scr { padding: 62px 20px 16px; }
.tx-win { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(0, 480px); height: min(880px, 100%); }
.tx-count { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 4px 14px 4px 14px;
  background: rgba(28,18,54,.92); border: 1.5px solid rgba(255,255,255,.85); font: italic 800 15px var(--pd-head); }
.tx-count small { font: 12px var(--font); color: var(--pd-lilac); text-transform: lowercase; }
/* left: the picked trainer */
/* (flex, not the Routes card's grid rows: only the stat list gives way when the panel is short) */
.tx-side { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.tx-side > * { flex: none; }
.tx-side .tc-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tx-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tx-who .tr-portrait { flex: none; border-radius: 50%; background-color: #fff3b0; box-shadow: 0 0 0 2px #fff; }
.tx-who b { display: block; font: italic 800 20px/1.05 var(--pd-head); text-transform: uppercase; }
.tx-who small { font-size: 12px; color: var(--pd-lilac); }
.tx-side .tc-st { cursor: default; }
.tx-side .tc-st.zero { opacity: .4; }
.tx-side .tc-st .tc-bar i { background: #b6ff7a; }
.tx-side .tc-st.good b { color: #b6ff7a; }
.tx-side .tc-st.bad b { color: #ff7a8a; }
.tx-side .tc-st.bad .tc-bar i { background: #ff7a8a; }
.tx-side .tc-why .ch { display: block; margin-top: 3px; color: #fff; }
.tx-side .btn.gold { width: 100%; padding: 11px 16px; font-size: 17px; }
/* middle: the trainer on the podium */
.tx-stage { position: relative; gap: 0; }
.tx-inuse { position: absolute; top: 10px; left: 10px; padding: 2px 12px; background: rgba(255,255,255,.12); color: var(--pd-lilac);
  font: italic 800 12px var(--pd-head); text-transform: uppercase; clip-path: var(--pd-slant); }
/* one frame of <pack>-walk.png (3 steps x 4 facings of 18 x 26, a 4 x 4 grid of characters), --s times as big
   (the sheet itself comes from the element's own style, so its path is the page's, not this file's) */
.tx-w { --s: 5; --c: 0; --r: 0; --d: 0; display: block; width: calc(18px * var(--s)); height: calc(26px * var(--s)); image-rendering: pixelated;
  background-repeat: no-repeat; background-size: calc(216px * var(--s)) calc(416px * var(--s));
  background-position: calc((var(--c) * 54px + 18px) * var(--s) * -1) calc((var(--r) * 104px + var(--d) * 26px) * var(--s) * -1); }
.tx-w.walk { animation: txWalk .7s infinite step-end; }
@keyframes txWalk {
  0% { background-position-x: calc(var(--c) * 54px * var(--s) * -1); }
  25% { background-position-x: calc((var(--c) * 54px + 18px) * var(--s) * -1); }
  50% { background-position-x: calc((var(--c) * 54px + 36px) * var(--s) * -1); }
  75% { background-position-x: calc((var(--c) * 54px + 18px) * var(--s) * -1); }
}
.tx-stage > .tx-w { filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)); }
.tx-name { margin: 4px 0 6px; }
.tx-name b { display: inline-block; padding: 3px 26px 1px; background: var(--pd-pink); color: #fff; clip-path: var(--pd-slant);
  box-shadow: 4px 5px 0 var(--pd-pink2); font: italic 800 28px/1.1 var(--pd-head); text-transform: uppercase; }
.tx-pack { margin-bottom: 10px; font-size: 12px; color: var(--pd-lilac); }
.tx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
.tx-chip { padding: 2px 12px; background: #b6ff7a; color: #13321a; clip-path: var(--pd-slant);
  font: italic 800 13px var(--pd-head); text-transform: uppercase; text-shadow: none; }
.tx-chip.bad { background: #ff7a8a; color: #3a0a12; }
.tx-chip.plain { background: rgba(255,255,255,.12); color: var(--pd-lilac); }
.tx-turn { display: flex; gap: 14px; margin-top: 16px; padding: 6px 16px; border-radius: 999px; background: rgba(0,0,0,.2); }
.tx-turn .tx-w { --s: 2; }
/* right: the packs and their portraits */
.tx-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; min-height: 0; padding: 12px 12px 10px;
  border-radius: 6px 24px 6px 24px; background: #fff; color: var(--pd-text); box-shadow: 0 0 0 3px #fff, 8px 9px 0 3px var(--pd-y2); }
.tx-packs { display: flex; flex-wrap: wrap; gap: 4px; }
.tx-packs button { flex: none; border: 0; padding: 5px 14px 4px; background: #f4f1fb; color: var(--pd-soft); cursor: pointer;
  font: italic 800 13px var(--pd-head); text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.tx-packs button small { margin-left: 3px; font: 600 10.5px var(--font); text-transform: none; opacity: .8; }
.tx-packs button:hover { background: #fff6cc; }
.tx-packs button.on { background: var(--pd-text); color: var(--pd-y); }
.tx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tx-seg { display: inline-flex; border-radius: 4px; overflow: hidden; }
.tx-seg button { border: 0; padding: 5px 12px; background: #f4f1fb; color: var(--pd-soft); font: 600 12px var(--font); cursor: pointer; }
.tx-seg button + button { box-shadow: inset 1px 0 0 rgba(35,22,63,.1); }
.tx-seg button:hover { background: #fff6cc; }
.tx-seg button.on { background: var(--pd-text); color: var(--pd-y); }
.tx-sel { border: 0; border-radius: 4px; padding: 5px 10px; background: #f4f1fb; color: var(--pd-text); font: 600 12px var(--font); cursor: pointer; }
.tx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-content: start; overflow-y: auto; padding-right: 2px; }
.tx-ph { grid-column: 1 / -1; margin: 6px 2px 0; font: italic 800 12px var(--pd-head); text-transform: uppercase; letter-spacing: .07em; color: var(--pd-pink2); }
.tx-ph:first-child { margin-top: 0; }
.tx-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; padding: 4px 4px 6px; border: 0;
  border-radius: 4px 14px 4px 14px; background: #f4f1fb; color: var(--pd-text); font-family: var(--font); text-shadow: none; cursor: pointer; }
.tx-tile:hover { background: #fff6cc; }
.tx-tile .tr-portrait { width: 64px; height: 64px; }
.tx-tile b { max-width: 100%; font: italic 800 12.5px/1.1 var(--pd-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-tile small { max-width: 100%; font-size: 10px; line-height: 1.2; color: var(--pd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-tile.on { background: var(--pd-text); color: #fff; box-shadow: 0 0 0 3px var(--pd-y); }
.tx-tile.on small { color: var(--pd-lilac); }
.tx-tile.lock .tr-portrait { filter: grayscale(1) brightness(.75); opacity: .55; }
.tx-tile.lock b { color: #8c80a8; }
.tx-tile.on.lock b { color: #fff; }
.tx-tile .lk { position: absolute; top: 4px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--pd-text); color: var(--pd-y);
  display: grid; place-items: center; }
.tx-tile .lk svg { width: 11px; height: 11px; }
.tx-tile .lk b { font: 800 10px var(--font); color: #fff; }
.tx-tile.x .lk { background: var(--pd-pink); color: #fff; }
.tx-tile .tr-new, .tx-use { position: absolute; top: 3px; left: 3px; }
.tx-use { padding: 0 6px; border-radius: 3px; background: var(--pd-pink); color: #fff; font: 700 9px/14px var(--font); text-transform: uppercase; }
.tx-prog { width: 100%; height: 5px; border-radius: 3px; background: #e4ddf3; overflow: hidden; }
.tx-prog i { display: block; height: 100%; border-radius: 3px; background: var(--pd-pink); }
.tc-why .tx-prog { margin-top: 5px; background: rgba(255,255,255,.15); }
.tx-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--pd-soft); }
.tx-foot .x { color: var(--pd-pink2); font-weight: 700; }
.tx-tiles .sub.tx-none { grid-column: 1 / -1; margin: 0; padding: 18px 0; text-align: center; color: var(--pd-soft); }

/* ---- narrow but tall (a small window, a phone upright): one column, scrolling ---- */
@media (max-width: 960px) and (min-height: 521px) {
  #scr-trainer.scr { align-items: flex-start; overflow-y: auto; padding: 62px 12px 12px; }
  .tx-win { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .tx-stage { padding: 12px 0; }
  .tx-tiles { overflow: visible; }
  .tx-count { margin: 0; }
}
@media (max-width: 760px) and (min-height: 521px) {
  #scr-login .login-box { flex-direction: column; gap: 10px; }
  #scr-login .login-side { flex: none; }
}

/* ---- a phone on its side ---- */
@media (max-height: 520px) {
  .ts-logo .t2 { margin-top: 6px; }
  .ts-tag { display: none; }
  /* the sign-in panel fits the screen without scrolling (two columns, from the rule above) */
  #scr-login .login-box { flex-direction: row; gap: 14px; padding: 10px 14px; }
  #scr-login .logo .t1 { font-size: 26px; }
  #scr-login .logo .t2 { margin-top: 5px; padding: 1px 16px 0; font-size: 12px; }
  #scr-login .login-tag { margin: 8px 0 4px; font-size: 11px; }
  #scr-login .login-official { font-size: 10px; }
  #scr-login .tab { padding: 4px 8px 3px; font-size: 13px; }
  #scr-login label { margin: 5px 0 2px; font-size: 10px; }
  #scr-login .field { padding: 5px 10px; font-size: 14px; }
  #scr-login .btn { padding: 6px 18px; font-size: 14px; }
  #scr-login .note { margin-top: 2px; font-size: 10px; }
  #scr-login .err:empty { display: none; }
  #scr-login.scr { padding: 6px 10px; }
  #scr-test .box, #scr-result .box, #scr-starters .box { padding: 10px 14px; }
  #scr-test .q { margin: 8px 0; font-size: 17px; min-height: 0; }
  #scr-test .answer { padding: 6px 18px 6px 22px; font-size: 14px; }
  #scr-result .trait { font-size: 24px; }
  #scr-result .stage { width: 150px; height: 112px; }
  #scr-result h3 { font-size: 16px; }
  #scr-starters .cell b { font-size: 11px; }

  #scr-trainer.scr { padding: 46px 8px 6px; }
  .tc-win.tx-win { grid-template-columns: 186px minmax(0, 1fr) minmax(0, 330px); grid-template-rows: auto minmax(0, 1fr);
    height: 100%; width: 100%; gap: 5px 10px; padding: 6px 10px 8px; border-radius: 4px 18px 4px 18px;
    box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px var(--pd-pink); }
  .tx-win .tc-top { padding-right: 34px; gap: 4px 10px; }
  .tx-win .tc-tag { padding: 1px 14px; font-size: 17px; }
  .tx-win .tc-sub { font-size: 10.5px; }
  .tx-win .hub-x { top: 4px; right: 10px; font-size: 24px; }
  .tx-count { padding: 2px 10px; font-size: 12px; }
  .tx-count small { font-size: 10px; }
  .tx-side { padding: 6px 8px; gap: 4px; border-radius: 4px 14px 4px 14px; }
  .tx-who { gap: 6px; }
  .tx-who .tr-portrait { transform: scale(.6); margin: -11px; }
  .tx-who b { font-size: 14px; }
  .tx-who small { font-size: 9.5px; }
  .tx-side .tc-lbl { font-size: 11px; }
  .tx-side .tc-st { grid-template-columns: 62px minmax(0, 1fr) 34px; gap: 5px; padding: 0 4px; font-size: 10px; }
  .tx-side .tc-st b { font-size: 11px; }
  .tx-side .tc-bar { height: 5px; }
  .tx-side .tc-why { min-height: 0; padding: 4px 6px; font-size: 10px; }
  .tx-side .tc-why .ch { display: none; }
  .tx-side .btn.gold { padding: 6px 10px; font-size: 13px; }
  .tx-stage { padding: 2px 0; border-radius: 16px; }
  .tx-stage > .tx-w { --s: 3; }
  .tx-stage .tc-podium { width: 120px; height: 18px; margin-top: -8px; }
  .tx-inuse { top: 4px; left: 4px; font-size: 9.5px; padding: 1px 8px; }
  .tx-name { margin: 2px 0 3px; }
  .tx-name b { padding: 2px 16px 1px; font-size: 18px; box-shadow: 3px 3px 0 var(--pd-pink2); }
  .tx-pack { margin-bottom: 5px; font-size: 10px; }
  .tx-chip { padding: 1px 9px; font-size: 10.5px; }
  .tx-turn { display: none; }
  .tx-card { gap: 4px; padding: 6px 6px 5px; grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: 4px 16px 4px 16px; box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px var(--pd-y2); }
  .tx-packs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tx-packs button { padding: 3px 9px 2px; font-size: 10.5px; }
  .tx-packs button small { font-size: 9px; }
  .tx-tools { display: none; }
  .tx-tiles { gap: 4px; }
  .tx-tile { gap: 1px; padding: 2px 2px 3px; border-radius: 3px 10px 3px 10px; }
  .tx-tile .tr-portrait { transform: scale(.62); margin: -12px; }
  .tx-tile b { font-size: 10px; }
  .tx-tile small { font-size: 8.5px; }
  .tx-tile .lk { width: 14px; height: 14px; top: 2px; right: 3px; }
  .tx-tile .lk svg { width: 8px; height: 8px; }
  .tx-use { font-size: 7.5px; line-height: 11px; padding: 0 4px; }
  .tx-ph { margin: 2px; font-size: 10px; }
  .tx-prog { height: 3px; }
  .tx-foot { font-size: 9.5px; }
  .tx-foot span:first-child { display: none; }
}
/* ---- a small phone on its side (667 x 375, 568 x 320) ---- */
@media (max-height: 520px) and (max-width: 799px) {
  .tc-win.tx-win { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 290px); gap: 4px 7px; padding: 5px 7px 6px; }
  .tx-win .tc-sub { display: none; }
  .tx-side .tc-why { display: none; }
  .tx-stage > .tx-w { --s: 2.5; }
  .tx-name b { font-size: 15px; padding: 1px 12px; }
  .tx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tx-tile .tr-portrait { transform: scale(.52); margin: -15px; }
  .tx-tile small { display: none; }
  .tx-tile.lock small { display: block; }
}
@media (max-height: 520px) and (max-width: 639px) {
  #scr-login .login-box { gap: 10px; padding: 6px 10px; }
  #scr-login .logo .t1 { font-size: 21px; }
  #scr-login .logo .t2 { font-size: 10px; padding: 1px 12px 0; }
  #scr-login .login-tag { margin: 6px 0 0; font-size: 10px; }
  #scr-login .login-official { display: none; }
  #scr-login label { font-size: 9px; }
  #scr-login .field { padding: 3px 8px; font-size: 13px; }
  #scr-login .btn { padding: 4px 14px; font-size: 13px; }
  #scr-login .login-main > .row { margin-top: 4px !important; }
  .tc-win.tx-win { grid-template-columns: 128px minmax(0, 1fr) minmax(0, 234px); }
  .tx-side .tc-lines, .tx-pack { display: none; }
  .tx-stage > .tx-w { --s: 2.2; }
  .tx-stage .tc-podium { width: 90px; height: 14px; margin-top: -6px; }
  .tx-name b { font-size: 13px; padding: 1px 10px; }
  .tx-chips { max-width: 200px; gap: 4px; }
  .tx-chip { padding: 0 7px; font-size: 9.5px; }
  .tx-foot { display: none; }
}
/* ---- a phone held upright ---- */
@media (orientation: portrait) and (max-width: 600px) {
  /* (held upright the top bar takes two rows and the credits line sits at the foot) */
  #scr-trainer.scr { padding: 96px 10px 40px; }
  .tx-chips { max-width: none; }
  .tx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-foot { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-ball, .ts-go, .tx-w.walk, #scr-test .answer { animation: none; }
}

/* ============ The menu screens: Kecleon Shop, Bag, Missions, Ranking ============
 * (04-11-2026; the design: tools/menu-mockups/screen-shop.html, screen-missions.html
 *  and screen-ranking.html.) One window per screen in the Routes look: the section
 *  itself carries .routes-ui, so the look holds while the menu sits behind it.
 *  Shared here: the window frame (.sx-*), the yellow button (.ybtn), slanted tabs,
 *  chips and a segmented pair. Then one block per screen.
 */

/* ---- the window ---- */
.routes-ui .box.sx-win {
  width: min(1140px, 100%); height: min(760px, 100%); max-height: 100%;
  display: flex; flex-direction: column; padding: 16px 22px 16px; overflow: hidden;
}
.sx-win * { box-sizing: border-box; }
.sx-win button { cursor: pointer; font-family: inherit; }
.sx-head { display: flex; align-items: center; gap: 6px 16px; min-width: 0; flex: none; min-height: 40px; }
.routes-ui .sx-head h2 { margin: 0; flex: none; }
.sx-sub { min-width: 0; font-size: 14px; color: var(--pd-lilac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.sx-coins { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 16px; flex: none;
  background: var(--pd-y); color: var(--pd-text); clip-path: var(--pd-slant); font: 700 15px var(--font);
  white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: none; }
.sx-coins .coin { width: 16px; height: 16px; vertical-align: -2px; }
.sx-x { width: 38px; height: 38px; border: 0; padding: 0; background: none; color: var(--pd-lilac);
  font: 30px/1 var(--font); text-shadow: none; transition: color .12s, transform .12s; }
.sx-x:hover, .sx-x:focus-visible { color: var(--pd-y); transform: rotate(90deg); outline: none; }
.sx-body { flex: 1; min-height: 0; margin-top: 12px; }
.sx-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(201,189,240,.4) transparent; }
.sx-empty { margin: 24px 0; text-align: center; color: var(--pd-lilac); font-size: 14px; }
.sx-lbl { font: italic 800 12px var(--pd-head); letter-spacing: .08em; text-transform: uppercase; color: var(--pd-lilac); }

/* a section heading inside a window */
.sx-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; min-width: 0; }
.routes-ui .sx-h h3 { margin: 0; font-size: 16px; flex: none; }
.sx-h small { min-width: 0; font-size: 12px; color: var(--pd-lilac); overflow: hidden; text-overflow: ellipsis; }
.sx-h .r { margin-left: auto; flex: none; }

/* a small label slab */
.sx-tag { display: inline-block; padding: 1px 12px 0; font: italic 800 12px/1.4 var(--pd-head); letter-spacing: .04em;
  text-transform: uppercase; background: var(--pd-y); color: var(--pd-text); clip-path: var(--pd-slant); white-space: nowrap; }
.sx-tag.pink { background: var(--pd-pink); color: #fff; }

/* the yellow button (buy, claim...) */
.ybtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; white-space: nowrap;
  padding: 5px 16px 4px; background: var(--pd-y); color: var(--pd-text); clip-path: var(--pd-slant); text-shadow: none;
  font: italic 800 14px var(--pd-head); text-transform: uppercase; font-variant-numeric: tabular-nums;
  transition: background .12s, color .12s, transform .1s; }
.ybtn:hover, .ybtn:focus-visible { background: var(--pd-pink); color: #fff; transform: translateX(2px); outline: none; }
.ybtn .coin { width: 14px; height: 14px; vertical-align: -2px; }
.ybtn.ghost { background: rgba(255,255,255,.14); color: #fff; }
.ybtn.ghost:hover, .ybtn.ghost:focus-visible { background: rgba(255,255,255,.28); }
.ybtn.ink { background: var(--pd-text); color: #fff; }
.ybtn.ink:hover, .ybtn.ink:focus-visible { background: var(--pd-pink); }
.ybtn.danger { background: #ff4f5e; color: #fff; }
.ybtn.danger:hover, .ybtn.danger:focus-visible { background: var(--pd-y); color: var(--pd-text); }
a.ybtn { text-decoration: none; }
.ybtn:disabled, .ybtn.off { background: rgba(255,255,255,.08); color: rgba(201,189,240,.55); cursor: default; transform: none; }
.ybtn:disabled .coin, .ybtn.off .coin { filter: grayscale(1); opacity: .5; }
.ybtn.done { background: none; color: #9fe8b4; }
.ybtn.claim { animation: claimGlow 1.6s ease-in-out infinite; }
@keyframes claimGlow { 50% { background: #fff27a; } }

/* slanted tabs, chips and a segmented pair */
.sx-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sx-tab { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 6px 18px 5px; clip-path: var(--pd-slant);
  background: rgba(255,255,255,.12); color: #fff; text-shadow: none;
  font: italic 800 15px var(--pd-head); text-transform: uppercase; white-space: nowrap; transition: background .12s, color .12s; }
.sx-tab:hover, .sx-tab:focus-visible { background: rgba(255,255,255,.24); outline: none; }
.sx-tab.on { background: var(--pd-y); color: var(--pd-text); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sx-chips > button { border: 0; padding: 4px 14px 3px; clip-path: var(--pd-slant); background: rgba(255,255,255,.1); color: #fff;
  text-shadow: none; font: italic 800 13px var(--pd-head); text-transform: uppercase; white-space: nowrap; transition: background .12s, color .12s; }
.sx-chips > button:hover, .sx-chips > button:focus-visible { background: rgba(255,255,255,.22); outline: none; }
.sx-chips > button.on { background: #fff; color: var(--pd-text); box-shadow: inset 0 -3px 0 var(--pd-pink); }
.sx-seg { display: inline-flex; padding: 3px; gap: 2px; background: rgba(0,0,0,.3); border-radius: 4px 12px 4px 12px; flex: none; }
.sx-seg > button { display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 4px 12px 3px; border-radius: 3px 10px 3px 10px;
  background: none; color: var(--pd-lilac); text-shadow: none; font: italic 800 13px var(--pd-head); text-transform: uppercase; white-space: nowrap; }
.sx-seg > button:hover, .sx-seg > button:focus-visible { color: #fff; outline: none; }
.sx-seg > button.on { background: var(--pd-pink); color: #fff; }
.sx-seg img, .sx-tab img, .sx-chips img { vertical-align: -2px; }

/* a text field */
.sx-field { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; height: 36px; border-radius: 4px 14px 4px 14px;
  background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 2px rgba(201,189,240,.3); color: var(--pd-lilac); }
.sx-field:focus-within { box-shadow: inset 0 0 0 2px var(--pd-y); }
.sx-field input, .sx-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff;
  font: 14px var(--font); user-select: text; -webkit-user-select: text; }
.sx-field input::placeholder, .sx-input::placeholder { color: rgba(201,189,240,.6); }
.sx-input { display: block; max-width: 320px; margin: 0 0 10px; padding: 7px 12px; height: 36px; border-radius: 4px 14px 4px 14px;
  background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 2px rgba(201,189,240,.3); }
.sx-clr { flex: none; border: 0; padding: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.14);
  color: #fff; font: 15px/1 var(--font); text-shadow: none; }
.sx-clr:hover { background: var(--pd-pink); }

/* an on/off switch: white off, yellow on (aria-pressed says which it is) */
.sx-sw { position: relative; width: 52px; height: 28px; flex: none; border: 0; padding: 0; border-radius: 999px;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); transition: background .15s, box-shadow .15s; }
.sx-sw::after { content: ''; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .15s, background .15s; }
.sx-sw:hover, .sx-sw:focus-visible { box-shadow: inset 0 0 0 2px #fff; outline: none; }
.sx-sw.on { background: var(--pd-y); box-shadow: inset 0 0 0 2px var(--pd-y2); }
.sx-sw.on::after { transform: translateX(24px); background: var(--pd-text); }
.sx-sw.on:hover, .sx-sw.on:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

/* a slider: the track fills pink to yellow up to --v, with the value beside it */
.sx-range { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-range input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 10px; margin: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--pd-pink), var(--pd-y)) 0 0 / var(--v, 50%) 100% no-repeat, rgba(0,0,0,.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.sx-range input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.sx-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--pd-text), 0 0 0 5px #fff; }
.sx-range input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--pd-text), 0 0 0 5px #fff; }
.sx-range output { width: 46px; flex: none; text-align: right; font: italic 800 17px var(--pd-head); color: var(--pd-y);
  font-variant-numeric: tabular-nums; }

/* ================= the Kecleon Shop (ui/shop-ui.js) ================= */

.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.it { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) 124px; gap: 12px; align-items: center;
  padding: 10px 22px; min-height: 104px; background: #fff; color: var(--pd-text); text-shadow: none;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards; transition: transform .12s; }
.it:hover { transform: translateX(5px); }
.sh-grid .it:nth-child(2) { animation-delay: .05s; } .sh-grid .it:nth-child(3) { animation-delay: .1s; }
.sh-grid .it:nth-child(4) { animation-delay: .15s; } .sh-grid .it:nth-child(5) { animation-delay: .2s; }
.it .pic { width: 66px; height: 66px; border-radius: 50%; background: #f1ebfc; display: grid; place-items: center; box-shadow: inset 0 -5px 0 #e0d6f5; }
.it .pic.bump { animation: bagBump .45s cubic-bezier(.3,.8,.4,1); }
@keyframes bagBump { 0%, 100% { transform: none; } 40% { transform: scale(1.22); } }
.it .tx { min-width: 0; display: grid; gap: 3px; }
.it .tx b { font: italic 800 18px/1.1 var(--pd-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it .tx .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.it .tx .meta .sx-tag { font-size: 11px; }
.it .tx .have { font-size: 12px; color: var(--pd-soft); }
.it .tx p { margin: 0; font-size: 12px; line-height: 1.3; color: var(--pd-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.it .buy { display: grid; gap: 5px; }
.it .buy .ybtn { width: 100%; justify-content: space-between; padding: 5px 14px 4px 12px; }
.it.off { opacity: .72; }
.it .bag-n { font: italic 800 20px var(--pd-head); color: var(--pd-pink2); text-align: right; white-space: nowrap; }
.it .bag-n.off { font-size: 15px; color: var(--pd-soft); }
.bag-it { min-height: 86px; grid-template-columns: 70px minmax(0, 1fr) auto; }
.bag-win .sh-grid { margin-bottom: 14px; }

/* your bag: a dark strip along the bottom of the shop */

/* ================= Missions, achievements, trainers, profile (ui/goals-ui.js) ================= */
.routes-ui .box.sx-win.mi-win { height: min(700px, 100%); }
/* (the shop and the bag hug their rows instead of leaving a gap over the bag strip) */
.routes-ui .box.sx-win.bag-win { height: auto; max-height: min(760px, 100%); }
.mi { display: flex; flex-direction: column; min-height: 0; }
.mi-panel { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(201,189,240,.4) transparent; }
.mi-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; flex: none; }
.mi-tabs .rach-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 22px 6px 20px; font-size: 16px; transition: background .12s, color .12s; }
.mi-tabs .rach-tab:not(.on):hover { background: rgba(255,255,255,.22); }
.mi-tabs .rach-tab .n { font: 12px var(--font); text-transform: none; opacity: .8; }
.mi-tabs .rach-tab .badge { margin: 0; padding: 0 8px; border-radius: 999px; background: var(--pd-pink); color: #fff; font: 700 12px/18px var(--font); }
.mi-tabs .rach-tab.on .badge { background: var(--pd-text); }
.sub-tabs { margin-bottom: 10px; }
.sub-tabs .rach-tab small { font: 12px var(--font); text-transform: none; opacity: .8; margin-left: 5px; }
.mi-sum { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; color: var(--pd-lilac); }
.mi-sum b { color: #fff; }
.mi-legh { margin: 14px 0 6px; }

.mi-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.mi-sec + .mi-sec { margin-top: 14px; }
.mi-list { display: grid; gap: 8px; }
.mi-list .rach-card { animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards; }
.mi-list .rach-card:nth-child(2) { animation-delay: .05s; } .mi-list .rach-card:nth-child(3) { animation-delay: .1s; }
.rach-card.ready { background: rgba(248,208,48,.18); box-shadow: inset 4px 0 0 var(--pd-y); }
.rach-card.ready .rach-ico { background: var(--pd-y); }
.rach-card.claimed { opacity: .55; }
.rach-card.weekly .rach-ico { background: #e9defd; }
.rach-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rach-meta .rach-rw { gap: 4px; font-size: 13px; }
.rach-rw .coin { width: 13px; height: 13px; vertical-align: -2px; }
.rach-card .act { flex: none; width: 116px; display: grid; }
.rach-card .act .ybtn { width: 100%; }
.rach-card .rach-ico img { image-rendering: pixelated; }

.ach-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.ach-cards .rach-card { animation: pdIn .26s cubic-bezier(.2,.9,.3,1.15) backwards; }
.rach-card.done { background: rgba(248,208,48,.14); }
.rach-card.done .rach-num { color: var(--pd-y); }
.ttl { display: inline-block; margin-left: 5px; padding: 0 8px; border-radius: 999px; background: rgba(255,79,154,.22);
  color: #ffb0d3; font: 11px var(--font); text-transform: none; vertical-align: 1px; }
.leg-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.routes-ui .leg-cell { background: rgba(255,255,255,.07); border: 0; border-radius: 4px 14px 4px 14px; }
.routes-ui .leg-cell.ok { background: rgba(248,208,48,.16); }
.routes-ui .leg-cell small { color: var(--pd-lilac); }

/* trainers: the portrait on a disc, the stats as chips */
.tr-ico { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none;
  background: #fff3b0; box-shadow: 0 0 0 3px #fff; }
.tr-ico .tr-portrait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.82); }
.rach-card.locked .tr-ico { background: #3c2d66; box-shadow: 0 0 0 3px rgba(201,189,240,.35); }
.rach-card.locked .tr-ico .tr-portrait { filter: brightness(0) opacity(.45); }
.rach-card.extreme { box-shadow: inset 4px 0 0 #ff4f5e; }
.stat-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.stat-chips span { padding: 0 7px; border-radius: 999px; font-size: 11px; background: rgba(95,224,138,.16); color: #9fe8b4; }
.stat-chips span.down { background: rgba(255,79,94,.16); color: #ff9aa4; }
.xtr { display: inline-block; padding: 0 8px; font: italic 800 11px var(--pd-head); background: #ff4f5e; color: #fff;
  clip-path: var(--pd-slant); margin-left: 6px; vertical-align: 1px; }

/* profile: a yellow trainer-card header, favourites, best-run tiles and medals */
.pf-head { position: relative; display: flex; align-items: center; gap: 18px; padding: 12px 18px; border-radius: 6px 30px 6px 30px;
  background: var(--pd-y); color: var(--pd-text); text-shadow: none; box-shadow: 7px 8px 0 var(--pd-y2); animation: pdIn .3s ease-out backwards; }
.pf-head.view { background: none; box-shadow: none; padding: 0; color: #fff; }
.pf-por { position: relative; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; flex: none;
  background: #fff3b0; box-shadow: inset 0 -8px 0 var(--pd-y2), 0 0 0 4px #fff; }
.pf-por .tr-portrait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(1.5); }
.pf-who { min-width: 0; flex: 1; display: grid; gap: 5px; }
.pf-who .name { font: italic 800 34px/1 var(--pd-head); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.pf-who .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--pd-soft); }
.pf-head.view .pf-who .line { color: var(--pd-lilac); }
.pf-who .line .dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9a4a; flex: none; }
.pf-none { font-size: 12px; color: var(--pd-soft); }
select.pf-title { border: 0; padding: 3px 14px 2px; background: var(--pd-text); color: var(--pd-y); clip-path: var(--pd-slant);
  font: italic 800 15px var(--pd-head); text-transform: uppercase; max-width: 100%; }
select.pf-title option { background: #23163f; color: #fff; }
.pf-tag { display: inline-block; padding: 2px 14px 1px; background: var(--pd-y); color: var(--pd-text);
  clip-path: var(--pd-slant); font: italic 800 15px var(--pd-head); text-transform: uppercase; }
.pf-head .pf-btns { display: grid; gap: 6px; flex: none; }
.pf-head .ybtn { background: var(--pd-text); color: #fff; padding: 7px 18px 6px; }
.pf-head .ybtn:hover { background: var(--pd-pink); }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin-top: 18px; }
.favs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.favs.view { margin: 10px 0 14px; max-width: 520px; }
.fav { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 4px 16px 4px 16px;
  background: rgba(255,255,255,.07); border: 0; color: #fff; text-shadow: none; transition: background .12s; }
button.fav:hover, button.fav:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.fav .disc { width: 72px; height: 72px; border-radius: 50%; background: #fff3b0; overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 -6px 0 var(--pd-y2), 0 0 0 3px #fff; }
.fav .disc canvas { display: block; image-rendering: pixelated; }
.fav b { font: italic 800 14px var(--pd-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fav.empty .disc { background: rgba(255,255,255,.06); box-shadow: 0 0 0 2px rgba(201,189,240,.4); color: var(--pd-lilac); font: italic 800 30px var(--pd-head); }
.fav.empty b { color: var(--pd-lilac); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { display: grid; gap: 2px; padding: 9px 12px 8px; border-radius: 4px 16px 4px 16px; background: rgba(28,18,54,.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); min-width: 0; }
.tile span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pd-lilac); white-space: nowrap; overflow: hidden; }
.tile b { font: italic 800 24px/1.1 var(--pd-head); font-variant-numeric: tabular-nums; }
.tile.hi b { color: var(--pd-y); }
.pf-medals { margin-top: 14px; }
.medals { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
.pm-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); }
.pm-ic img, .pm-ic canvas { image-rendering: pixelated; }
.medals .more { font-size: 13px; color: var(--pd-lilac); }
.routes-ui .box.sx-win.profile-box { width: min(760px, 100%); height: auto; }

/* ================= What's new (ui/news-ui.js) =================
 * One slanted white card per release (data/changelog.js): a yellow date slab, the
 * title in italic Kanit, and the lines of each kind behind their own tag. The tags
 * of one card share a column, so new / changes / fixes line up in every language.
 */
.routes-ui .box.sx-win.nw-win { width: min(900px, 100%); height: min(720px, 100%); }
.nw-body { padding-right: 16px; }
.nw-list { display: grid; gap: 12px; }
.nw-card { padding: 12px 24px 14px; background: #fff; color: var(--pd-text); text-shadow: none;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards; }
.nw-list .nw-card:nth-child(2) { animation-delay: .05s; }
.nw-list .nw-card:nth-child(3) { animation-delay: .1s; }
.nw-list .nw-card:nth-child(4) { animation-delay: .15s; }
/* the ones newer than your last visit */
.nw-card.fresh { background: linear-gradient(90deg, #fff6d0, #fff 56%); box-shadow: inset 7px 0 0 var(--pd-pink); }
.nw-top { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.routes-ui .nw-card h3 { flex: 1 1 14ch; min-width: 0; margin: 0;
  font: italic 800 19px/1.2 var(--pd-head); text-transform: uppercase; letter-spacing: .01em; color: var(--pd-text); }
.nw-date { flex: none; display: inline-block; padding: 1px 12px 0; background: var(--pd-y); color: var(--pd-text);
  clip-path: var(--pd-slant); font: italic 800 12px/1.5 var(--pd-head); text-transform: uppercase; white-space: nowrap; }
.nw-fresh { flex: none; display: inline-block; padding: 1px 12px 0; background: var(--pd-pink); color: #fff;
  clip-path: var(--pd-slant); font: italic 800 12px/1.5 var(--pd-head); text-transform: uppercase; white-space: nowrap; }
.nw-parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; align-items: start; margin-top: 10px; }
.nw-kind { display: inline-flex; align-items: center; gap: 5px; padding: 2px 12px 1px; clip-path: var(--pd-slant);
  color: var(--pd-text); font: italic 800 12px/1.5 var(--pd-head); text-transform: uppercase; white-space: nowrap; }
.nw-kind img { image-rendering: pixelated; }
.nw-kind.new { background: #5fe08a; } .nw-kind.chg { background: #7fc8ff; } .nw-kind.fix { background: #ffc266; }
.nw-parts ul { margin: 0; padding-left: 18px; }
.nw-parts li { margin: 0 0 4px; font-size: 14px; line-height: 1.4; color: var(--pd-soft); }
.nw-parts li:last-child { margin-bottom: 0; }

/* ================= the Ranking (ui/ranking-ui.js) ================= */
.routes-ui .box.sx-win.rk-win { width: min(1180px, 100%); }
.rk-win .sx-head .sx-tabs { margin-left: 2px; }
.rn-bar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; flex: none; margin-top: 12px; }
.rn-bar .rn-find { margin-left: auto; width: 290px; }
.rn-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.rn-col { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 4px 22px 4px 22px;
  background: rgba(0,0,0,.22); animation: pdIn .3s cubic-bezier(.2,.9,.3,1.15) backwards; }
.rn-col + .rn-col { animation-delay: .06s; }
.routes-ui .rn-h { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; padding: 0 4px; }
.rn-h small { margin-left: auto; font: 12px var(--font); text-transform: none; color: var(--pd-lilac); letter-spacing: 0; }
.rn-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--pd-pink) rgba(255,255,255,.06); }
.rn-row { position: relative; flex: none; display: grid; grid-template-columns: 54px auto minmax(0, 1fr) auto 28px;
  align-items: center; gap: 10px; height: 50px; padding-right: 8px; background: rgba(255,255,255,.07);
  border-radius: 4px 14px 4px 14px; animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards; }
.rn-row:hover { background: rgba(255,255,255,.13); }
.rn-pos { height: 100%; display: grid; place-items: center; font: italic 800 18px var(--pd-head); color: var(--pd-lilac); font-variant-numeric: tabular-nums; }
.rn-row .avs { display: flex; }
.rn-row .avs .ava + .ava { margin-left: -12px; }
.rn-row .ava { width: 38px; height: 38px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 0 2px #fff;
  display: grid; place-items: center; overflow: hidden; flex: none; }
.rn-row .ava canvas { display: block; image-rendering: pixelated; }
.rn-who { min-width: 0; line-height: 1.15; }
.rn-who b { display: block; font: italic 800 16px var(--pd-head); text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-who b a { color: inherit; text-decoration: none; }
.rn-who b a:hover { color: var(--pd-pink2); }
.rn-who small { display: block; font-size: 12px; color: var(--pd-lilac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-val { font: italic 800 20px var(--pd-head); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-rep { width: 26px; height: 26px; border: 0; padding: 0; display: grid; place-items: center; background: none;
  color: rgba(201,189,240,.4); border-radius: 50%; opacity: .5; transition: opacity .12s, background .12s; }
.rn-rep:hover { opacity: 1; background: rgba(255,79,154,.16); }
.rn-rep.sent { opacity: .15; cursor: default; }
/* gold, silver and bronze: a white card with the rank on a coloured slab */
.rn-row.g1, .rn-row.g2, .rn-row.g3 { background: #fff; height: 56px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); border-radius: 0; }
.rn-row.g1:hover, .rn-row.g2:hover, .rn-row.g3:hover { background: var(--pd-y); }
.rn-row.g1 .rn-pos, .rn-row.g2 .rn-pos, .rn-row.g3 .rn-pos { position: relative; color: var(--pd-text); font-size: 24px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.rn-row.g1 .rn-pos { background: linear-gradient(160deg, #ffe680, #f0b818); padding-top: 6px; }
.rn-row.g2 .rn-pos { background: linear-gradient(160deg, #ffffff, #b9c4d6); }
.rn-row.g3 .rn-pos { background: linear-gradient(160deg, #ffc58f, #c8783c); }
.rn-row.g1 .rn-pos::after { content: ''; position: absolute; top: 4px; left: 50%; width: 14px; height: 7px; margin-left: -7px;
  background: var(--pd-text); clip-path: polygon(0 100%, 0 0, 30% 60%, 50% 0, 70% 60%, 100% 0, 100% 100%); opacity: .8; }
.rn-row.g1 .rn-who b, .rn-row.g2 .rn-who b, .rn-row.g3 .rn-who b,
.rn-row.g1 .rn-val, .rn-row.g2 .rn-val, .rn-row.g3 .rn-val { color: var(--pd-text); }
.rn-row.g1 .rn-who small, .rn-row.g2 .rn-who small, .rn-row.g3 .rn-who small { color: var(--pd-soft); }
.rn-row.g1 .rn-val { font-size: 23px; }
.rn-row.g1 .rn-rep, .rn-row.g2 .rn-rep, .rn-row.g3 .rn-rep { color: rgba(35,22,63,.45); }
/* you: yellow, in the list and pinned under it */
.rn-row.me { background: linear-gradient(90deg, var(--pd-y), #fff1a8 55%, #fff); border-radius: 4px 14px 4px 14px; }
.rn-row.me .rn-pos, .rn-row.me .rn-who b, .rn-row.me .rn-val { color: var(--pd-text); }
.rn-row.me .rn-who small { color: var(--pd-soft); }
.rn-row.me .ava { box-shadow: 0 0 0 2px var(--pd-text); }
.rn-me { flex: none; }
.rn-me .rn-row { margin-top: 10px; overflow: visible; animation-delay: .2s; }
.rn-me .rn-row .rn-pos { font-size: 20px; }
.rn-me .rn-row::before { content: attr(data-you); position: absolute; left: 46px; top: -9px; z-index: 1; padding: 0 9px;
  font: italic 800 10px/15px var(--pd-head); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: var(--pd-pink); clip-path: var(--pd-slant); }
.rn-note { flex: none; margin: 8px 0 0; font-size: 12px; color: var(--pd-lilac); text-align: center; }
.rn-note em { font-style: normal; color: var(--pd-y); }
.rn-note img { vertical-align: -2px; }
.rn-empty { margin: 16px 8px; text-align: center; color: var(--pd-lilac); font-size: 13px; line-height: 1.4; }

/* ================= Settings (ui/settings-ui.js) =================
 * (05-11-2026; the design: tools/menu-mockups/screen-settings.html.) Six tabs in one window
 * that keeps a single height, so it never jumps when you change tab. Every setting is a row:
 * a pink icon, its name, one line on what it does, and its control on the right.
 */
.routes-ui .box.sx-win.st-win { width: min(1020px, 100%); height: min(620px, 100%); }
.st-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.st-body { min-height: 0; padding: 2px 18px 6px 2px; }   /* (room on the right for the Paldea scrollbar) */
.st-pane { display: grid; gap: 14px; align-content: start;
  animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards; }
.st-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
.st-cols > div { display: grid; gap: 14px; min-width: 0; align-content: start; }

/* a group of settings: a pink dash, its name, and a rule to the right edge */
.st-sec { display: grid; gap: 6px; min-width: 0; }
.routes-ui .st-sec > h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.st-sec > h3::before { content: ''; width: 14px; height: 3px; background: var(--pd-pink); transform: skewX(-20deg); flex: none; }
.st-sec > h3::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.routes-ui .st-sec > p { margin: 0 0 2px; font-size: 13px; color: var(--pd-lilac); }

/* one setting */
.st-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 12px 9px 10px;
  border-radius: 4px 16px 4px 16px; background: rgba(255,255,255,.07); }
.st-row.stack { flex-wrap: wrap; }
.st-row .ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.08); }
.st-row .tx { flex: 1; min-width: 0; line-height: 1.2; }
.st-row .tx b { display: block; font: italic 800 16px var(--pd-head); text-transform: uppercase; color: #fff; }
.st-row .tx small { display: block; margin-top: 1px; font-size: 12px; color: var(--pd-lilac); }
.st-row .val { flex: none; font: italic 800 15px var(--pd-head); color: var(--pd-y); white-space: nowrap; }
.st-row .val.plain { color: #fff; }
.st-row .val.ok { display: inline-flex; align-items: center; gap: 6px; color: #b6ff7a; }
.st-row .val.ok::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #7cc45a;
  box-shadow: 0 0 0 3px rgba(124,196,90,.3); }
.st-row .sx-chips { flex: none; }
.st-row.stack .sx-chips { flex-basis: 100%; padding-left: 46px; }
.st-row .ybtn { flex: none; }
.st-msg { margin: 6px 0 0; min-height: 16px; font-size: 12px; color: #ffb0b8; }

/* Sound: the two volumes as wide cards with a slider each */
.st-vol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-vol .st-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 16px; }
.st-vol .head { display: flex; align-items: center; gap: 12px; }
.st-vol .sx-range output { font-size: 22px; width: 58px; }

/* Graphics: every language in its own name, so it reads the same in any of them */
.st-langs .sx-chips > button { text-transform: none; font-size: 14px; padding: 5px 16px 4px; }

/* Controls: key caps in a plain font (in the pixel font B and 8, G and 6 look alike) */
.st-win kbd, .st-win .pk { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border: 0; border-radius: 5px; background: #fff; color: var(--pd-text); box-shadow: 0 3px 0 #b9acdf;
  font: 700 13px system-ui, 'Segoe UI', sans-serif; text-shadow: none; }
.st-win .pk { min-width: 30px; border-radius: 999px; background: var(--pd-text); color: var(--pd-y);
  box-shadow: 0 0 0 2px rgba(248,208,48,.5); }
.st-keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center;
  padding: 10px 12px; border-radius: 4px 16px 4px 16px; background: rgba(0,0,0,.22); font-size: 13px; }
.st-keys > div { display: flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--pd-lilac); font-size: 12px; }
.st-keys > span { color: #ece6ff; }
.st-rebind { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-kb { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 10px 5px 6px; border: 0; text-align: left;
  color: #fff; border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.07); text-shadow: none;
  font: 13px var(--font); transition: background .12s; }
.st-kb:hover, .st-kb:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.st-kb kbd { min-width: 38px; height: 32px; font-size: 15px; flex: none; transition: transform .1s, box-shadow .1s; }
.st-kb:hover kbd, .st-kb:focus-visible kbd { transform: translateY(-2px); box-shadow: 0 5px 0 #b9acdf; }
.st-kb span { min-width: 0; line-height: 1.15; }
.st-kb.changed kbd { box-shadow: 0 3px 0 var(--pd-pink2), 0 0 0 2px var(--pd-pink); }
.st-kmsg { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 12px; color: var(--pd-lilac); }
.st-kmsg span { flex: 1; min-width: 0; }
.st-kmsg span.good { color: #b6ff7a; }

/* Accessibility: what manual aim does, drawn */
.st-aim { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-aim > div { position: relative; height: 120px; border-radius: 4px 16px 4px 16px; background: rgba(0,0,0,.25); overflow: hidden; }
.st-aim b { position: absolute; z-index: 1; left: 10px; top: 8px; font: italic 800 12px var(--pd-head);
  text-transform: uppercase; letter-spacing: .06em; color: var(--pd-y); }
.st-aim svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Account: your card over the rows */
.st-me { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 4px 20px 4px 20px;
  background: linear-gradient(90deg, rgba(248,208,48,.18), rgba(255,255,255,.05) 60%); box-shadow: inset 4px 0 0 var(--pd-y); }
.st-me .pic { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 50%;
  background: #fff3b0; box-shadow: 0 0 0 3px #fff; overflow: hidden; }
.st-me .pic canvas { display: block; image-rendering: pixelated; }
.st-me .pic.empty, .st-about .lg .disc.empty { display: none; }
.st-me .who { min-width: 0; }
.st-me .who b { display: block; font: italic 800 26px/1 var(--pd-head); text-transform: uppercase; color: #fff;
  overflow: hidden; text-overflow: ellipsis; }
.st-me .who small { display: block; margin-top: 3px; font-size: 13px; color: var(--pd-lilac); }
.st-me .sx-coins { margin-left: auto; }
.st-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* About: the logo on a disc, then the credits */
.st-about { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.st-about .rt { display: grid; gap: 14px; align-content: start; min-width: 0; }
.st-about .lg { display: grid; justify-items: center; gap: 10px; padding: 18px 10px; text-align: center;
  border-radius: 4px 20px 4px 20px; background: rgba(0,0,0,.22); }
.st-about .lg .disc { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: #fff3b0; box-shadow: inset 0 -8px 0 var(--pd-y2), 0 0 0 4px #fff; overflow: hidden; }
.st-about .lg .disc canvas { display: block; image-rendering: pixelated; }
.st-about .lg p { margin: 0; font-size: 12px; color: var(--pd-lilac); }
.st-logo .t1 { font: italic 800 28px/1 var(--pd-head); color: #fff; text-shadow: 3px 3px 0 var(--pd-pink); }
.st-logo .t2 { display: inline-block; margin-top: 7px; padding: 1px 16px 0; background: var(--pd-y); color: var(--pd-text);
  font: italic 800 12px/1.5 var(--pd-head); letter-spacing: .08em; text-transform: uppercase; clip-path: var(--pd-slant); }
.st-ver { font: italic 800 14px var(--pd-head); color: var(--pd-y); }
.st-credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; color: #ece6ff; }
.st-credits li { padding: 6px 10px; border-radius: 4px 12px 4px 12px; background: rgba(255,255,255,.06); }
.st-credits b { font: italic 800 13px var(--pd-head); text-transform: uppercase; color: var(--pd-y); margin-right: 4px; }

/* ---- phone, landscape (844x390 and smaller) ---- */
@media (max-height: 520px) {
  .routes-ui .box.sx-win, .routes-ui .box.sx-win.mi-win { height: 100%; padding: 7px 12px 8px; border-radius: 4px 18px 4px 18px;
    box-shadow: 0 0 0 2px #fff, 5px 6px 0 2px var(--pd-pink), 0 14px 30px rgba(0,0,0,.5); }
  /* (the top bar stays in its corner here, so the window starts under it) */
  #scr-goals, #scr-rank, #scr-profile, #scr-settings, #scr-news { padding: 40px 14px 7px 8px; }
  .sx-head { min-height: 26px; gap: 4px 10px; }
  .routes-ui .sx-head h2 { font-size: 17px; padding: 2px 18px 0; }
  .sx-sub { font-size: 11px; }
  .sx-right { gap: 5px; }
  .sx-coins { height: 22px; font-size: 12px; padding: 0 10px; gap: 5px; }
  .sx-coins .coin { width: 12px; height: 12px; }
  .sx-x { width: 28px; height: 26px; font-size: 22px; }
  .sx-body { margin-top: 6px; }
  .sx-h { margin-bottom: 3px; gap: 6px; }
  .routes-ui .sx-h h3 { font-size: 12px; }
  .sx-h small { font-size: 10px; }
  .ybtn { padding: 3px 10px 2px; font-size: 11px; gap: 4px; }
  .ybtn .coin { width: 11px; height: 11px; }
  .sx-tab { padding: 4px 12px 3px; font-size: 12px; gap: 5px; }
  .sx-chips > button { padding: 3px 10px 2px; font-size: 11px; }
  .sx-seg { padding: 2px; }
  .sx-seg > button { padding: 3px 9px 2px; font-size: 11px; }
  .sx-field { height: 28px; padding: 0 9px; }
  .sx-field input, .sx-input { font-size: 12px; }
  .sx-tag { font-size: 10px; padding: 0 9px; }
  .sh-grid { gap: 5px; }
  .it { grid-template-columns: 40px minmax(0, 1fr) 88px; gap: 6px; min-height: 0; height: 60px; padding: 4px 13px;
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
  .bag-it { height: 54px; min-height: 0; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .it .pic { width: 38px; height: 38px; box-shadow: inset 0 -3px 0 #e0d6f5; }
  .it .pic img { width: 26px; height: auto; }
  .it .tx { gap: 1px; }
  .it .tx b { font-size: 13px; }
  .it .tx p { display: none; }
  .it .tx .meta .sx-tag { font-size: 9px; padding: 0 7px; }
  .it .tx .have { font-size: 10px; }
  .it .buy { gap: 3px; }
  .it .buy .ybtn { padding: 2px 9px 1px 7px; font-size: 10px; }
  .it .bag-n { font-size: 15px; }
  /* missions */
  .mi-tabs { gap: 4px; margin-bottom: 6px; flex-wrap: nowrap; }
  .mi-tabs .rach-tab { padding: 3px 12px 2px 11px; font-size: 11px; gap: 5px; }
  .mi-tabs .rach-tab img { width: 12px; height: 12px; }
  .mi-tabs .rach-tab .n { font-size: 9px; }
  .mi-tabs .rach-tab .badge { font-size: 9px; line-height: 13px; padding: 0 5px; }
  .sub-tabs { margin-bottom: 5px; gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sub-tabs .rach-tab { padding: 2px 10px; font-size: 10px; flex: none; }
  .sub-tabs .rach-tab small { font-size: 9px; }
  .mi-sum { font-size: 10px; margin-bottom: 4px; }
  .mi-cols { gap: 8px; }
  .mi-sec + .mi-sec { margin-top: 6px; }
  .mi-list, .ach-cards { gap: 4px; }
  .rach-card { gap: 7px; padding: 4px 8px 4px 6px; border-radius: 3px 12px 3px 12px; }
  .rach-ico, .tr-ico { width: 30px; height: 30px; }
  .rach-ico img { width: 18px; height: auto; }
  .rach-ico em { min-width: 15px; height: 15px; font-size: 9px; line-height: 15px; right: -5px; bottom: -3px; }
  .tr-ico .tr-portrait { transform: translate(-50%, -46%) scale(.5); }
  .rach-txt { gap: 1px; }
  .rach-txt b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rach-txt small { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rach-bar { height: 4px; margin-top: 1px; }
  .rach-num { font-size: 9px; }
  .rach-meta .rach-rw { font-size: 10px; }
  .rach-rw .coin { width: 9px; height: 9px; }
  .ttl { font-size: 9px; padding: 0 5px; }
  .rach-card .act { width: 86px; }
  .rach-card .act .ybtn { font-size: 10px; padding-left: 6px; padding-right: 8px; }
  .stat-chips { display: none; }
  .ach-cards .rach-txt small.desc { display: none; }
  .leg-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  /* profile */
  .pf-head { gap: 10px; padding: 5px 10px; border-radius: 4px 18px 4px 18px; box-shadow: 4px 5px 0 var(--pd-y2); }
  .pf-por { width: 54px; height: 54px; box-shadow: inset 0 -5px 0 var(--pd-y2), 0 0 0 3px #fff; }
  .pf-por .tr-portrait { transform: translate(-50%, -46%) scale(.78); }
  .pf-who { gap: 2px; }
  .pf-who .name { font-size: 20px; }
  .pf-who .line { font-size: 10px; gap: 5px; }
  select.pf-title, .pf-tag { font-size: 11px; padding: 1px 10px 0; }
  .pf-head .pf-btns { gap: 3px; }
  .pf-head .ybtn { padding: 3px 10px 2px; }
  .pf-grid { margin-top: 8px; gap: 8px; }
  .favs, .tiles { gap: 4px; }
  .fav { padding: 3px 2px; gap: 1px; }
  .fav .disc { width: 42px; height: 42px; box-shadow: inset 0 -3px 0 var(--pd-y2), 0 0 0 2px #fff; }
  .fav .disc canvas { width: 42px; height: 42px; }
  .fav.empty .disc { font-size: 18px; }
  .fav b { font-size: 10px; }
  .tile { padding: 3px 8px; }
  .tile span { font-size: 9px; gap: 4px; }
  .tile span img { width: 10px; height: auto; }
  .tile b { font-size: 15px; }
  .pf-medals { display: none; }
  /* ranking */
  .rn-bar { gap: 5px 8px; flex-wrap: nowrap; margin-top: 6px; }
  .rn-bar .sx-lbl { display: none; }
  .rn-bar .rn-find { width: auto; flex: 1; min-width: 110px; }
  .rn-cols { gap: 8px; margin-top: 6px; }
  .rn-col { padding: 5px; gap: 3px; border-radius: 4px 14px 4px 14px; }
  .routes-ui .rn-h { font-size: 12px; gap: 5px; margin: 0; }
  .rn-h small { font-size: 10px; }
  .rn-list { gap: 3px; padding-right: 2px; }
  .rn-row { grid-template-columns: 34px auto minmax(0, 1fr) auto 18px; gap: 6px; height: 30px; padding-right: 2px; border-radius: 3px 10px 3px 10px; }
  .rn-row.g1, .rn-row.g2, .rn-row.g3 { height: 32px; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
  .rn-pos, .rn-row.g1 .rn-pos, .rn-row.g2 .rn-pos, .rn-row.g3 .rn-pos { font-size: 14px; }
  .rn-row.g1 .rn-pos { padding-top: 3px; }
  .rn-row.g1 .rn-pos::after { top: 2px; width: 10px; height: 5px; margin-left: -5px; }
  .rn-row .ava { width: 24px; height: 24px; }
  .rn-row .ava canvas { width: 24px; height: 24px; }
  .rn-row .avs .ava + .ava { margin-left: -8px; }
  .rn-who b { font-size: 12px; }
  .rn-who small { display: none; }
  .rn-val, .rn-row.g1 .rn-val { font-size: 14px; }
  .rn-rep { width: 18px; height: 18px; }
  .rn-rep img { width: 12px; height: 12px; }
  .rn-me .rn-row { margin-top: 7px; }
  .rn-me .rn-row::before { left: 28px; top: -7px; font-size: 8px; line-height: 12px; padding: 0 6px; }
  .rn-me .rn-row .rn-pos { font-size: 13px; }
  .rn-note { display: none; }
  .rn-empty { margin: 8px 4px; font-size: 11px; }
  .sx-sw { width: 42px; height: 22px; }
  .sx-sw::after { left: 3px; top: 3px; width: 16px; height: 16px; }
  .sx-sw.on::after { transform: translateX(20px); }
  .sx-range input { height: 8px; }
  .sx-range input::-webkit-slider-thumb { width: 18px; height: 18px; }
  .sx-range input::-moz-range-thumb { width: 18px; height: 18px; }
  .sx-range output { font-size: 14px; width: 38px; }
  /* settings: the tabs become a rail on the left and the two columns one */
  .routes-ui .box.sx-win.st-win { height: 100%; }
  .st-main { grid-template-rows: none; grid-template-columns: 136px minmax(0, 1fr); gap: 10px; }
  .st-tabs { flex-direction: column; flex-wrap: nowrap; gap: 4px; align-content: start; }
  .st-tabs .sx-tab { justify-content: flex-start; padding: 5px 12px 4px 14px; font-size: 12px;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
  .st-body { padding: 0 16px 4px 2px; }
  .st-pane { gap: 8px; }
  .st-cols, .st-vol, .st-aim { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .st-cols > div, .st-about .rt { gap: 8px; }
  .st-sec { gap: 4px; }
  .routes-ui .st-sec > h3 { font-size: 13px; }
  .routes-ui .st-sec > p { font-size: 11px; }
  .st-row { gap: 8px; padding: 5px 8px 5px 6px; border-radius: 3px 12px 3px 12px; }
  .st-row .ic { width: 24px; height: 24px; }
  .st-row .ic img { width: 15px; height: 15px; }
  .st-row .tx b { font-size: 12px; }
  .st-row .tx small { font-size: 10px; }
  .st-row .val { font-size: 12px; }
  .st-row.stack .sx-chips { padding-left: 32px; }
  .st-vol .st-row { padding: 8px 10px 10px; gap: 6px; }
  .st-vol .sx-range output { font-size: 15px; width: 42px; }
  .st-langs .sx-chips > button { font-size: 11px; padding: 3px 10px 2px; }
  .st-win kbd, .st-win .pk { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; }
  .st-keys { gap: 4px 8px; padding: 6px 8px; font-size: 11px; }
  .st-keys > div { font-size: 10px; }
  .st-rebind { gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-kb { gap: 6px; padding: 3px 8px 3px 4px; font-size: 11px; }
  .st-kb kbd { min-width: 28px; height: 24px; font-size: 12px; }
  .st-kmsg { min-height: 22px; }
  .st-aim > div { height: 80px; }
  .st-me { padding: 6px 10px; gap: 10px; }
  .st-me .pic { width: 40px; height: 40px; }
  .st-me .who b { font-size: 18px; }
  .st-me .who small { font-size: 11px; }
  .st-about { grid-template-columns: 168px minmax(0, 1fr); gap: 10px; }
  .st-about .lg { padding: 10px 6px; gap: 6px; }
  .st-about .lg .disc { width: 62px; height: 62px; }
  .st-logo .t1 { font-size: 19px; text-shadow: 2px 2px 0 var(--pd-pink); }
  .st-logo .t2 { font-size: 9px; margin-top: 4px; }
  .st-credits { font-size: 10.5px; gap: 3px; }
  .st-credits li { padding: 4px 8px; }
  .st-credits b { font-size: 11px; }
  /* what's new */
  .nw-body { padding-right: 14px; }
  .nw-list { gap: 6px; }
  .nw-card { padding: 6px 14px 8px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  .nw-card.fresh { box-shadow: inset 5px 0 0 var(--pd-pink); }
  .nw-top { gap: 3px 8px; }
  .routes-ui .nw-card h3 { font-size: 13px; }
  .nw-date, .nw-fresh, .nw-kind { font-size: 9.5px; padding: 1px 8px 0; }
  .nw-parts { gap: 4px 8px; margin-top: 5px; }
  .nw-parts ul { padding-left: 14px; }
  .nw-parts li { margin-bottom: 2px; font-size: 11px; line-height: 1.35; }
  .nw-kind img { width: 11px; height: 11px; }
}
/* ---- small phones, landscape (667x375, 568x320) ---- */
@media (max-height: 520px) and (max-width: 799px) {
  .sh-grid, .mi-cols, .ach-cards { grid-template-columns: 1fr; }
  .it { grid-template-columns: 36px minmax(0, 1fr) 82px; }
  .pf-grid { grid-template-columns: 1fr; }
  .rn-bar .sx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rn-bar .rn-find { min-width: 86px; }
  .st-main { grid-template-columns: 112px minmax(0, 1fr); }
  .st-tabs .sx-tab { padding: 5px 8px 4px 11px; font-size: 11px; gap: 4px; }
  .st-rebind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-about { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 520px) and (max-width: 639px) {
  .sx-sub, .rn-bar .rn-find { display: none; }
  .rn-cols { grid-template-columns: 1fr; }
  .rn-col + .rn-col { display: none; }   /* (one board at a time: two don't fit) */
}
/* ---- portrait (a phone held upright): one column ---- */
@media (orientation: portrait) and (max-width: 600px) {
  .routes-ui .box.sx-win, .routes-ui .box.sx-win.bag-win { height: 100%; max-height: 100%; padding: 10px 12px 12px; }
  .sx-head { flex-wrap: wrap; gap: 4px 10px; min-height: 0; }
  .routes-ui .sx-head h2 { font-size: 20px; padding: 2px 18px 0; }
  .sx-sub { width: 100%; white-space: normal; font-size: 12px; }
  .sx-coins { height: 26px; font-size: 13px; }
  .sx-x { width: 30px; height: 30px; font-size: 24px; }
  /* the Bag and the missions: one column */
  .sh-grid, .mi-cols, .ach-cards, .pf-grid { grid-template-columns: 1fr; }
  .it { grid-template-columns: 50px minmax(0, 1fr) 102px; gap: 8px; min-height: 76px; padding: 8px 16px; }
  .bag-it { min-height: 68px; grid-template-columns: 50px minmax(0, 1fr) auto; }
  .it .pic { width: 48px; height: 48px; }
  .it .pic img { width: 32px; height: auto; }
  .it .tx b { font-size: 15px; }
  .it .tx p { display: none; }
  .it .buy .ybtn { padding: 4px 10px 3px; font-size: 12px; }
  /* missions: the tabs on one scrolling line */
  .mi-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mi-tabs .rach-tab { flex: none; padding: 5px 14px 4px 12px; font-size: 13px; }
  .rach-txt b { font-size: 13px; }
  .rach-card .act { width: 96px; }
  .pf-head { flex-wrap: wrap; }
  .pf-head .pf-btns { width: 100%; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  /* the ranking: the two boards one under the other */
  .rn-bar { gap: 6px 8px; }
  .rn-bar .rn-find { width: 100%; margin-left: 0; }
  .rn-cols { grid-template-columns: 1fr; gap: 10px; overflow-y: auto; }
  .rn-col { min-height: 210px; }
  .rn-row { grid-template-columns: 38px auto minmax(0, 1fr) auto 20px; gap: 6px; height: 40px; }
  .rn-row.g1, .rn-row.g2, .rn-row.g3 { height: 44px; }
  .rn-pos, .rn-row.g1 .rn-pos, .rn-row.g2 .rn-pos, .rn-row.g3 .rn-pos { font-size: 15px; }
  .rn-row .ava, .rn-row .ava canvas { width: 28px; height: 28px; }
  .rn-who b { font-size: 13px; }
  .rn-who small { display: none; }
  .rn-val, .rn-row.g1 .rn-val { font-size: 15px; }
  .rn-rep { width: 20px; height: 20px; }
  .rn-rep img { width: 13px; height: 13px; }
  .rn-me .rn-row::before { left: 32px; }
  .rn-note { display: none; }
  /* settings: one column, the tabs back on a line above the rows */
  .routes-ui .box.sx-win.st-win { height: 100%; max-height: 100%; }
  .st-main { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: none; gap: 10px; }
  .st-tabs { flex-direction: row; flex-wrap: wrap; }
  .st-tabs .sx-tab { padding: 4px 12px 3px; font-size: 12px; }
  .st-cols, .st-vol, .st-aim, .st-about { grid-template-columns: minmax(0, 1fr); }
  .st-rebind { grid-template-columns: minmax(0, 1fr); }
  .st-row.stack .sx-chips { padding-left: 0; }
  /* what's new: the tag over its lines instead of beside them */
  .nw-card { padding: 10px 16px 12px; }
  .routes-ui .nw-card h3 { flex-basis: 100%; font-size: 16px; }
  .nw-parts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nw-kind { justify-self: start; margin-top: 6px; }
  .nw-parts li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ybtn.claim, .it .pic.bump { animation: none; }
}

/* ============ The top bar in the new look (04-11-2026, redone 05-11-2026) ============
 * The main menu hides the bar (body.mm-front) and carries these same pills and buttons
 * in its own corner. Over any other screen the bar comes back, and it came back in the
 * old rounded pixel look, so the same buttons looked like two different sets (Niels,
 * 05-11-2026). It matches the menu's now: the same height, the same slant, and the tool
 * buttons as icons only, exactly like .mm-tools. Without a gate on which screen is in
 * front, so it cannot change shape halfway through.
 */
.topbar { gap: 8px; }
.topbar .pill {
  border: 0; border-radius: 0; clip-path: var(--pd-slant, polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%));
  background: var(--pd-ink, #1c1236); box-shadow: none; text-shadow: none; color: #fff;
  height: 34px; padding: 0 16px; gap: 8px; font: 700 15px var(--font);
}
/* The PokeGold pill, like the menu's .mk-pill.coins. */
.topbar .pill:first-child { background: var(--pd-y, #f8d030); color: var(--pd-text, #23163f); }
.gold-ic { flex: none; }
/* The tool buttons: bigger than the 16px they were, they were hard to hit (Niels, 05-11-2026). */
.topbar .btn.small img { width: 22px; height: 22px; }
/* The tools (news, sound, fullscreen, settings): icon only, like .mm-tools .btn.small. */
.topbar .btn.small {
  border: 0; border-radius: 0; clip-path: var(--pd-slant, polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%));
  box-shadow: none; text-shadow: none; height: 34px; padding: 0 12px;
  font: italic 800 14px 'Kanit', var(--font); text-transform: uppercase; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar .btn.small span { display: none; }
.topbar .btn.small.ghost { background: rgba(255,255,255,.12); color: #fff; }
.topbar .btn.small.ghost:hover { background: rgba(255,255,255,.24); }
.topbar .btn.small.gold { background: var(--pd-y, #f8d030); color: var(--pd-text, #23163f); }
.topbar .btn.small:hover { filter: none; transform: translateX(2px); }
/* Log out keeps its word, and turns red on hover like the menu's. */
.topbar #btn-logout { background: rgba(255,255,255,.12); color: #fff; }
.topbar #btn-logout:hover { background: var(--pd-red, #ff4f5e); }

/* The old footer line never over a screen in the new look: it was drawn across the bottom
   of those panels and sliced the sentence in half (04-11-2026). The menu has its own. */
body:has(.scr.routes-ui:not(.hidden)) #credits-line { display: none !important; }

/* ============ Friends, the party, your nickname and an invitation (05-11-2026) ============
 * ui/social-ui.js · the design: tools/menu-mockups/screen-friends.html.
 * The Friends screen is Twin Cards like the Pokédex: the left card is you and your friends, the
 * right one your party (with its code), "Join with a code" and "Add a friend". The party has its
 * own window too (#scr-lobby, .lb-win: it opens from inside Routes as well), your nickname a small
 * one (.nk-win), and an invitation is a card in the corner (.invite-pop).
 * Nothing here draws who is online, when they were last seen or what you played together: the
 * game knows none of that and will not pay Firestore to find out (see social-ui.js, 20-10-2026).
 */

/* ---- the two cards ---- */
.fs { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  gap: 12px 22px; width: min(1180px, 100%); height: min(680px, 100%); color: var(--pd-text); }
.fs * { box-sizing: border-box; }
.fs button { cursor: pointer; font-family: inherit; }
.fs-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.routes-ui .fs-head h2 { margin: 0; padding: 3px 28px 1px; font: italic 800 28px/1.15 var(--pd-head); text-transform: uppercase;
  color: var(--pd-text); background: var(--pd-y); clip-path: var(--pd-slant); box-shadow: none; }
.routes-ui .fs-head .sub { margin: 0; min-width: 0; font-size: 14px; color: var(--pd-lilac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-head .sub b { color: #fff; }
.fs-head .sx-x { margin-left: auto; flex: none; }
.fs-card { min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: 6px 30px 6px 30px; overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 9px 11px 0 3px var(--pd-pink), 0 26px 60px rgba(0,0,0,.5); animation: pdPop .3s cubic-bezier(.2,.9,.3,1.1) both; }
.fs-card.r { box-shadow: 0 0 0 3px #fff, 9px 11px 0 3px var(--pd-y2), 0 26px 60px rgba(0,0,0,.5); animation-delay: .06s; }

/* small buttons on white (the menu's .mini-btn, which is scoped to .mm) */
.fs .mini-btn, .lb .mini-btn { border: 0; padding: 4px 14px; font: italic 800 13px var(--pd-head); text-transform: uppercase;
  white-space: nowrap; background: var(--pd-text); color: #fff; clip-path: var(--pd-slant); flex: none; transition: background .12s, color .12s; }
.fs .mini-btn:hover, .fs .mini-btn:focus-visible, .lb .mini-btn:hover, .lb .mini-btn:focus-visible {
  background: var(--pd-pink); color: #fff; outline: none; }
.fs .mini-btn:disabled, .lb .mini-btn:disabled { background: #d8cef1; color: var(--pd-soft); cursor: default; }
.fs .ghost-btn, .lb .ghost-btn { border: 0; background: none; color: var(--pd-soft); font: italic 800 12px var(--pd-head);
  text-transform: uppercase; text-decoration: underline; flex: none; cursor: pointer; }
.fs .ghost-btn:hover, .lb .ghost-btn:hover { color: var(--pd-pink2); }

/* ---- left: you, the chips, the list ---- */
.fs-me { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; color: #fff;
  background: linear-gradient(100deg, var(--pd-ink), var(--pd-violet)); }
.fs-me .pic { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; background: #fff3b0;
  box-shadow: 0 0 0 3px #fff; overflow: hidden; display: grid; place-items: center;
  font: italic 800 22px var(--pd-head); color: var(--pd-text); text-transform: uppercase; }
.fs-me .pic .tr-portrait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -42%) scale(.85); }
.fs-me .nm { flex: 1; min-width: 0; line-height: 1.15; }
.fs-me b { display: block; font: italic 800 22px var(--pd-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-me small { display: block; font-size: 12px; color: var(--pd-lilac); }
.fs-me .mini-btn { background: #fff; color: var(--pd-text); }
.fs-filter { flex: none; padding: 10px 14px 6px; }
.fs-filter > button { background: #efe8ff; color: var(--pd-soft); }
.fs-filter > button:hover, .fs-filter > button:focus-visible { background: #e3d8ff; }
.fs-filter > button.on { background: var(--pd-text); color: var(--pd-y); box-shadow: none; }
.fs-filter .n { font: 700 11px/16px var(--font); padding: 0 6px; margin-left: 6px; border-radius: 999px; background: rgba(35,22,63,.12); }
.fs-filter > button.on .n { background: rgba(248,208,48,.2); }
.fs-filter .n.hot { background: var(--pd-pink); color: #fff; }
.fs-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.fs-list h4 { margin: 8px 0 2px; display: flex; align-items: center; gap: 8px; font: italic 800 12px var(--pd-head);
  letter-spacing: .08em; text-transform: uppercase; color: var(--pd-pink2); }
.fs-list h4::after { content: ''; flex: 1; height: 1px; background: #eee6fb; }
.fs-list h4:first-child { margin-top: 2px; }
.fs-none { margin: 10px 4px; font-size: 13px; line-height: 1.4; color: var(--pd-soft); }

/* a friend's row (the friends list and the party's invite list) */
.fs-fr { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 8px 5px 5px;
  border-radius: 4px 14px 4px 14px; background: #f5f1fd; color: var(--pd-text);
  animation: pdIn .28s cubic-bezier(.2,.9,.3,1.15) backwards; }
.fs-fr .pic { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #fff3b0; display: grid; place-items: center;
  overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2d8f7; font: italic 800 20px var(--pd-head); color: var(--pd-text); text-transform: uppercase; }
/* the trainer each one plays as (only your party knows; the rest is an initial) */
.fs-fr .pic .tr-portrait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -42%) scale(.78); }
.fs-fr .pic.v { background: #e6dcff; }
.fs-fr .pic.req { background: var(--pd-pink); color: #fff; }
.fs-fr .nm { flex: 1; min-width: 0; line-height: 1.15; }
.fs-fr b { display: block; font: italic 800 15px var(--pd-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-fr small { display: block; font-size: 12px; color: var(--pd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-fr small em { font-style: normal; color: #2f8a3a; }
.fs-fr .tag { font: italic 800 11px var(--pd-head); text-transform: uppercase; padding: 1px 10px; clip-path: var(--pd-slant);
  background: var(--pd-y); color: var(--pd-text); white-space: nowrap; flex: none; }
.fs-fr.req { background: linear-gradient(90deg, #ffe0ee, #f5f1fd 70%); box-shadow: inset 3px 0 0 var(--pd-pink); }

/* ---- right: the band with the code, then the body ---- */
.fs-band { position: relative; flex: none; display: flex; align-items: center; gap: 18px; padding: 16px 22px 16px 26px;
  color: #fff; overflow: hidden; background: linear-gradient(110deg, var(--pd-violet) 0 52%, var(--pd-pink) 52% 100%); }
/* without the code (no party yet) the line is longer: the pink wedge gets out of its way */
.fs-band.solo { background: linear-gradient(110deg, var(--pd-violet) 0 76%, var(--pd-pink) 76% 100%); }
.fs-band::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(255,255,255,.08) 22px 30px);
  mask-image: linear-gradient(90deg, transparent 50%, #000); }
.fs-band > * { position: relative; z-index: 1; }
.fs-band .ttl { flex: 1; min-width: 0; }
.fs-band .ttl b { display: block; font: italic 800 34px/1 var(--pd-head); text-transform: uppercase; text-shadow: 3px 3px 0 var(--pd-pink2); }
.fs-band .ttl small { display: block; margin-top: 6px; font-size: 13px; color: var(--pd-lilac); }
.fs-band .ttl small b { display: inline; font: inherit; color: #fff; text-shadow: none; text-transform: none; }
.fs-code { display: grid; justify-items: end; gap: 4px; flex: none; }
.fs-code > span { font: italic 800 12px var(--pd-head); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.fs-code .big { display: flex; align-items: center; gap: 8px; }
.fs-code .big b { padding: 2px 22px 0 24px; font: italic 800 40px/1.1 var(--pd-head); letter-spacing: .18em;
  color: var(--pd-text); background: var(--pd-y); clip-path: var(--pd-slant); }
.fs-code .mini-btn { background: var(--pd-text); color: #fff; }
.fs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.fs-h { display: flex; align-items: center; gap: 8px; margin: 0; font: italic 800 14px var(--pd-head);
  letter-spacing: .06em; text-transform: uppercase; color: var(--pd-pink2); }
.fs-h::after { content: ''; flex: 1; height: 1px; background: #eee6fb; }
.fs-note { margin: -6px 0 0; font-size: 12px; color: var(--pd-soft); }
.fs-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fs-acts .ybtn { padding: 7px 20px 6px; font-size: 15px; }
.fs-acts .ybtn.ghost { background: #efe8ff; color: var(--pd-soft); }
.fs-acts .ybtn.ghost:hover, .fs-acts .ybtn.ghost:focus-visible { background: #ffd9de; color: #c0263a; }
.fs-acts .lb-play { margin-left: auto; }

/* the party slots (the main menu's, on white) */
.fs-body .slots, .lb .slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fs-body .pslot, .lb .pslot { position: relative; display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 14px 0 8px;
  background: #f1ebfc; color: var(--pd-text); min-width: 0; overflow: hidden; border: 0; text-align: left;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); animation: pdIn .3s cubic-bezier(.2,.9,.3,1.15) backwards; }
.lb .pslot { background: #fff; }
.fs-body .pslot:nth-child(2), .lb .pslot:nth-child(2) { animation-delay: .06s; }
.fs-body .pslot:nth-child(3), .lb .pslot:nth-child(3) { animation-delay: .12s; }
.fs-body .pslot:nth-child(4), .lb .pslot:nth-child(4) { animation-delay: .18s; }
.fs-body .pslot.me, .lb .pslot.me { background: linear-gradient(90deg, var(--pd-y), #fff1a8 60%); }
.fs-body .pslot .who, .lb .pslot .who { position: relative; width: 58px; height: 62px; flex: none; }
.fs .pt, .lb .pt { width: 64px; height: 64px; flex: none; }
.fs-body .pslot .who .pt, .lb .pslot .who .pt { position: absolute; left: -2px; bottom: -8px; transform: scale(.86); transform-origin: 0 100%; }
.fs-body .pslot .who .ava, .lb .pslot .who .ava { position: absolute; right: -4px; bottom: 6px; width: 30px; height: 30px;
  border-radius: 50%; background: #fff3b0; overflow: hidden; box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; }
.fs-body .pslot .who .mate, .lb .pslot .who .mate { position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 0 2px var(--pd-line); overflow: hidden;
  display: grid; place-items: center; }
.fs-body .pslot canvas, .lb .pslot canvas { display: block; image-rendering: pixelated; }
.fs-body .pslot .nm, .lb .pslot .nm { min-width: 0; flex: 1; line-height: 1.15; }
.fs-body .pslot b, .lb .pslot b { display: block; font: italic 800 17px var(--pd-head); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-body .pslot small, .lb .pslot small { display: block; font-size: 12px; color: var(--pd-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-body .pslot .st, .lb .pslot .st { font: italic 800 11px var(--pd-head); text-transform: uppercase; padding: 1px 10px;
  clip-path: var(--pd-slant); background: #7cc45a; color: #fff; flex: none; }
.fs-body .pslot .st.host, .lb .pslot .st.host { background: var(--pd-text); color: var(--pd-y); }
.fs-body .pslot .st.wait, .lb .pslot .st.wait { background: #c9bdf0; color: var(--pd-text); }
.fs-body .pslot .st.bad, .lb .pslot .st.bad { background: var(--pd-red, #ff4f5e); }
.fs-body .pslot.open, .lb .pslot.open { background: #fff; color: var(--pd-soft); clip-path: none;
  border-radius: 4px 14px 4px 14px; border: 2px dashed #d6c9f3; transition: background .12s, color .12s; }
.fs-body button.pslot.open:hover, .fs-body button.pslot.open:focus-visible,
.lb button.pslot.open:hover, .lb button.pslot.open:focus-visible { background: #fff6c8; color: var(--pd-text); border-color: var(--pd-y2); outline: none; }
.fs-body .pslot.open .ico, .lb .pslot.open .ico { width: 42px; height: 42px; margin: 0 6px 0 4px; border-radius: 50%;
  display: grid; place-items: center; background: #f1ebfc; color: var(--pd-pink); flex: none; font: italic 800 22px var(--pd-head); }
.fs-body .pslot.open b, .lb .pslot.open b { color: inherit; }

/* the two forms: join with a code, add a friend */
.fs-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fs-form { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 4px 18px 4px 18px; background: #f5f1fd; }
.fs-form .fs-h { color: var(--pd-text); }
.fs-form .fs-h::after { background: #e2d8f7; }
.fs-form .row { display: flex; gap: 8px; align-items: center; }
.fs-form p { margin: 0; font-size: 12px; color: var(--pd-soft); }
.fs-form p.ok { color: #2f8a3a; }
.fs-form p.bad { color: #c0263a; }
.fs-form .sx-field { flex: 1; background: #fff; box-shadow: inset 0 0 0 2px #e2d8f7; color: var(--pd-soft); }
.fs-form .sx-field:focus-within { box-shadow: inset 0 0 0 2px var(--pd-pink); }
.fs-form .sx-field input { color: var(--pd-text); }
.fs-form .sx-field input::placeholder { color: #a99cc9; }
.fs-boxes { display: flex; gap: 6px; flex: none; }
.fs-boxes input { width: 40px; height: 44px; border: 0; border-radius: 4px 10px 4px 10px; text-align: center; background: #fff;
  box-shadow: inset 0 0 0 2px #e2d8f7; font: italic 800 24px var(--pd-head); color: var(--pd-text); text-transform: uppercase;
  outline: 0; user-select: text; -webkit-user-select: text; }
.fs-boxes input:focus { box-shadow: inset 0 0 0 2px var(--pd-pink); }
.fs-boxes input:not(:placeholder-shown) { background: #fff6c8; }

/* ---- your nickname (#scr-nick) ---- */
.routes-ui .box.sx-win.nk-win { width: min(520px, 100%); height: auto; }
.nk { display: grid; gap: 10px; }
.nk-p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pd-lilac); }
.nk-f { height: 42px; }
.nk-f input { font-size: 17px; }
.nk-err { margin: 0; min-height: 18px; font-size: 13px; color: #ff9aa4; }
.nk-acts { display: flex; gap: 8px; }
.nk-acts .ybtn { flex: 1; padding: 8px 18px 7px; font-size: 16px; }

/* ---- the party on its own (#scr-lobby) ---- */
.routes-ui .box.sx-win.lb-win { width: min(900px, 100%); height: auto; max-height: min(760px, 100%); }
/* (it scrolls as a whole: on a phone in landscape the slots, the code and the list don't fit) */
.lb { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding-right: 4px; }
.lb-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-radius: 4px 18px 4px 18px;
  background: rgba(0,0,0,.26); }
.lb-code b { padding: 2px 18px 0; font: italic 800 30px/1.15 var(--pd-head); letter-spacing: .18em; color: var(--pd-text);
  background: var(--pd-y); clip-path: var(--pd-slant); }
.lb-code small { min-width: 0; font-size: 12px; color: var(--pd-lilac); }
.lb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; min-height: 0; }
.lb-cols:has(.lb-col.hidden) { grid-template-columns: minmax(0, 1fr); }
.lb-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lb-col .row { display: flex; gap: 8px; align-items: center; }
.lb-p { margin: 0; font-size: 12px; color: var(--pd-lilac); }
.lb-list { display: flex; flex-direction: column; gap: 5px; max-height: 190px; overflow-y: auto; }
.lb-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-foot .note { flex: 1 1 100%; margin: 0; font-size: 12px; }
.lb .lb-play { padding: 9px 34px 8px; font-size: 19px; }
.lb #lobby-join-msg { margin: 0; font-size: 12px; color: #9fe8b4; }
.lb #lobby-join-msg.bad { color: #ff9aa4; }

/* ---- an invitation (#invite-pop): a card in the corner, over any menu ---- */
.invite-pop.routes-ui { background: linear-gradient(160deg, #2c1f57, #1c1236 70%); border: 0; border-radius: 6px 24px 6px 24px;
  box-shadow: 0 0 0 3px #fff, 7px 8px 0 3px var(--pd-pink), 0 18px 40px rgba(0,0,0,.5); text-shadow: none;
  padding: 14px 16px 13px; color: #fff; animation: pdPop .25s cubic-bezier(.2,.9,.3,1.1) both; }
.invite-pop #inv-text { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; }
.invite-pop #inv-text b { font: italic 800 17px var(--pd-head); text-transform: uppercase; color: var(--pd-y); }
.invite-pop img { vertical-align: middle; }
.inv-acts { display: flex; gap: 8px; margin-top: 12px; }
.inv-acts .ybtn { flex: 1; padding: 6px 14px 5px; }

/* ---- a narrow screen: one column ---- */
@media (max-width: 880px) {
  .fs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 40%) minmax(0, 1fr); height: 100%; }
  .fs-forms { grid-template-columns: minmax(0, 1fr); }
  .lb-cols { grid-template-columns: minmax(0, 1fr); }
  .fs-body .slots, .lb .slots { grid-template-columns: minmax(0, 1fr); }
}

/* ---- a phone, landscape ---- */
@media (max-height: 520px) {
  .fs { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px 14px; height: 100%; }
  .fs-head { gap: 10px; }
  .routes-ui .fs-head h2 { font-size: 19px; padding: 2px 18px 0; }
  .routes-ui .fs-head .sub { font-size: 11px; }
  .fs-card { border-radius: 4px 20px 4px 20px; box-shadow: 0 0 0 2px #fff, 6px 7px 0 2px var(--pd-pink), 0 16px 40px rgba(0,0,0,.5); }
  .fs-card.r { box-shadow: 0 0 0 2px #fff, 6px 7px 0 2px var(--pd-y2), 0 16px 40px rgba(0,0,0,.5); }
  .fs-me { padding: 6px 10px; gap: 8px; }
  .fs-me .pic { width: 32px; height: 32px; box-shadow: 0 0 0 2px #fff; font-size: 15px; }
  .fs-me .pic .tr-portrait { transform: translate(-50%, -44%) scale(.55); }
  .fs-me b { font-size: 15px; }
  .fs-me small { font-size: 10px; }
  .fs .mini-btn, .lb .mini-btn { padding: 3px 9px; font-size: 10px; }
  .fs-filter { padding: 5px 8px 3px; }
  .fs-filter > button { padding: 2px 9px 1px; font-size: 10px; }
  .fs-filter .n { font-size: 9px; line-height: 13px; padding: 0 4px; margin-left: 4px; }
  .fs-list { padding: 2px 6px 6px 8px; gap: 3px; }
  .fs-list h4 { margin: 4px 0 0; font-size: 10px; }
  .fs-none { font-size: 11px; margin: 6px 3px; }
  .fs-fr { gap: 7px; padding: 2px 6px 2px 3px; border-radius: 3px 10px 3px 10px; }
  .fs-fr .pic { width: 30px; height: 30px; font-size: 14px; }
  .fs-fr b { font-size: 12px; }
  .fs-fr small { font-size: 10px; }
  .fs-fr .tag { font-size: 9px; padding: 0 7px; }
  .fs-band { padding: 7px 12px 7px 16px; gap: 10px; }
  .fs-band .ttl b { font-size: 20px; text-shadow: 2px 2px 0 var(--pd-pink2); }
  .fs-band .ttl small { margin-top: 2px; font-size: 10px; }
  .fs-code { gap: 1px; }
  .fs-code > span { font-size: 9px; }
  .fs-code .big b { font-size: 22px; padding: 1px 14px 0 16px; }
  .fs-body { padding: 8px 12px 10px; gap: 7px; }
  .fs-h { font-size: 11px; }
  .fs-body .slots, .lb .slots { gap: 5px; grid-template-columns: 1fr 1fr; }
  .fs-body .pslot, .lb .pslot { height: 36px; padding: 0 8px 0 4px; gap: 6px; }
  .fs-body .pslot .who, .lb .pslot .who { width: 34px; height: 36px; }
  .fs-body .pslot .who .pt, .lb .pslot .who .pt { transform: scale(.5); bottom: -4px; }
  .fs-body .pslot .who .ava, .lb .pslot .who .ava { width: 20px; height: 20px; bottom: 3px; right: -2px; }
  .fs-body .pslot .who .mate, .lb .pslot .who .mate { width: 28px; height: 28px; left: 2px; }
  .fs-body .pslot b, .lb .pslot b { font-size: 12px; }
  .fs-body .pslot small, .lb .pslot small { font-size: 9px; }
  .fs-body .pslot .st, .lb .pslot .st { font-size: 9px; padding: 0 7px; }
  .fs-body .pslot.open .ico, .lb .pslot.open .ico { width: 24px; height: 24px; margin: 0 2px; font-size: 14px; }
  .fs-acts { gap: 6px; flex-wrap: nowrap; }
  .fs-acts .ybtn { padding: 4px 14px; font-size: 12px; }
  .fs-note { display: none; }
  .fs-forms { gap: 8px; grid-template-columns: 1fr 1fr; }
  .fs-form { padding: 6px 8px 7px; gap: 5px; border-radius: 3px 12px 3px 12px; }
  .fs-form p { font-size: 10px; }
  .fs-form .row { gap: 5px; }
  .fs-boxes { gap: 3px; }
  .fs-boxes input { width: 26px; height: 30px; font-size: 16px; }
  .nk-p { font-size: 12px; }
  .nk-acts .ybtn { font-size: 13px; padding: 6px 14px 5px; }
  .lb { gap: 8px; }
  .lb-code { padding: 5px 10px; gap: 7px; }
  .lb-code b { font-size: 20px; padding: 1px 12px 0; }
  .lb-code small { font-size: 10px; }
  .lb-cols { gap: 10px; }
  .lb-list { max-height: 120px; }
  .lb .lb-play { padding: 6px 22px 5px; font-size: 15px; }
  .invite-pop.routes-ui { padding: 9px 12px; }
  .invite-pop #inv-text { font-size: 12px; }
  .inv-acts { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-card, .fs-fr, .fs-body .pslot, .lb .pslot, .invite-pop.routes-ui { animation: none; }
}