/* PokéTide interface: blue panels, double white borders and the local Pixelify Sans font (OFL). */
/* Pixelify Sans with redesigned numerals; see 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;
}
/* 1.15b: Cyrillic letters come from Fusion Pixel 12px Proportional (SIL OFL 1.1, assets/fonts/OFL-Fusion-Pixel.txt; subset and
   hashes in assets/fonts/font-provenance.json). Same family name with a Cyrillic unicode-range, defined after the Pixelify faces
   so it wins for those characters only; Latin text, digits and the HUD numerals stay Pixelify. The seven Serbian and Macedonian
   letters the upstream lacks are left out of the range and keep Pixelify. size-adjust 92% puts the 6-pixel lowercase on the
   Pixelify x-height; the metric overrides (divided by size-adjust) keep the Pixelify line box and baseline.
   Tiny5-cyrillic.woff2 stays in the repository for old cached pages until a later cleanup. */
@font-face {
  font-family: 'Pixelify';
  src: url('../assets/fonts/FusionPixel-cyrillic.woff2') format('woff2');
  font-weight: 400 550;
  unicode-range: U+0400-0401, U+0403-0408, U+040C-0451, U+0453-0458, U+045B-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 92%;
  ascent-override: 100%;
  descent-override: 30.4348%;
  line-gap-override: 0%;
  font-display: block;
}
/* The same face again for the bold range: unicode-range faces only stand in for each other when weight ranges match.
   The upstream has no bold; FusionPixel-cyrillic-bold.woff2 doubles each pixel to the right (owner decision 23.10, option b),
   matching the Pixelify bold weight. */
@font-face {
  font-family: 'Pixelify';
  src: url('../assets/fonts/FusionPixel-cyrillic-bold.woff2') format('woff2');
  font-weight: 551 900;
  unicode-range: U+0400-0401, U+0403-0408, U+040C-0451, U+0453-0458, U+045B-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 92%;
  ascent-override: 100%;
  descent-override: 30.4348%;
  line-gap-override: 0%;
  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; }
/* 1.1a: the Cyrillic face has one weight; no smeared fake bold (Latin bold is a real face). */
html { font-synthesis-weight: none; }
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; }
#game { display: block; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; }
button { font: inherit; color: inherit; }
input { font: inherit; }

/* Screen layers. */
.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; }
/* Screens with the top bar begin below it. */
@media (min-height: 521px) {
  #scr-goals, #scr-dex, #scr-upgrades, #scr-gacha, #scr-friends, #scr-rank, #scr-lobby, #scr-profile { padding-top: 66px; }
}
.scr.dim { background: radial-gradient(circle at 50% 40%, rgba(10,20,50,.55), rgba(3,6,16,.88)); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* Framed panel. */
.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; }

/* Buttons. */
.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; }

/* Menu list with a pixel-arrow cursor. */
.menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.menu-item.play { grid-column: 1 / -1; }
.menu-item small, .menu-item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.menu-item {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 8px 10px 8px 30px; border-radius: 6px;
  font-size: 22px; font-weight: 700; letter-spacing: .5px;
  text-shadow: 2px 2px 0 var(--shadow);
  position: relative;
}
.menu-item small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.menu-item::before {
  content: ''; position: absolute; left: 6px; top: 14px; width: 16px; height: 24px;
  background: var(--ico-cursor) no-repeat center / contain; image-rendering: pixelated;
  opacity: 0; transition: opacity .1s, transform .1s; transform: translateX(-4px);
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.menu-item:hover::before, .menu-item:focus-visible::before { opacity: 1; transform: none; }
.menu-item.play { font-size: 30px; color: var(--gold); }
.menu-item { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: center; }
.menu-item small { grid-column: 2; }
.mi-ico { grid-row: span 2; display: flex; }

/* Forms. */
.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; }

/* Start screen. */
.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; }

/* Personality screen. */
.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;
  /* Dark panel with a type-colored border from --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); }

/* Species grid. */
.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); }
.type {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
  color: #10131a; text-shadow: none; margin-right: 4px;
}
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.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); }

/* Main menu. */
#scr-menu { justify-content: space-between; align-items: stretch; padding: 0; }
.menu-left {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 30px; min-width: 0;
}
.menu-left .logo .t1 { font-size: clamp(36px, 6vw, 64px); }
.partner-card { text-align: center; margin-top: 10px; }
.partner-card .nm { font-size: 24px; font-weight: 700; text-shadow: 3px 3px 0 var(--shadow); }
.partner-card .lv { color: var(--muted); font-size: 14px; text-shadow: 2px 2px 0 var(--shadow); }
.menu-right {
  width: min(680px, 60vw); display: flex; flex-direction: column;
  /* Reserve space for the top bar; the compact grid keeps every menu row inside the screen. */
  padding: 70px 16px 18px; gap: 10px; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(5,10,25,.65) 30%);
}
.menu-right > :first-child { margin-top: auto; }
.menu-right > :last-child { margin-bottom: auto; }
/* Compact laptop layout with an optional second column. */
@media (max-height: 780px) and (min-height: 521px) {
  .menu-right { padding-top: 62px; gap: 10px; }
  .menu-right .box { padding: 10px 14px; }
  .menu-item { font-size: 17px; padding: 5px 10px; }
  .menu-item.play { font-size: 24px; }
  .menu-item small { font-size: 11px; }
}
@media (max-height: 660px) and (min-height: 521px) {
  .menu-right { width: min(500px, 52vw); }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .menu-item.play { grid-column: span 2; }
  .menu-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-left .logo .t1 { font-size: clamp(32px, 5vw, 52px); }
  #menu-partner { height: min(30vh, 200px); width: auto; }
}
.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;
}

/* Upgrades. */
.upg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.upg-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.upg-item .ic { font-size: 26px; text-align: center; }
.pips { display: flex; gap: 3px; margin-top: 4px; }
.pips i { width: 12px; height: 6px; border-radius: 2px; background: rgba(0,0,0,.4); }
.pips i.on { background: var(--gold); }

/* 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 {
  /* Place large legendary sprites below the text. */
  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; }
/* Equal summon controls: five across when roomy, then balanced 3+2 or 2+3 rows. */
#scr-gacha > .box { max-width: 1440px; }
#scr-gacha .split > div:first-child { min-width: 0; }
#scr-gacha .gacha-pulls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 14px; }
#scr-gacha .gacha-pulls > button { grid-column: span 2; min-width: 0; width: 100%; min-height: 76px; height: 100%; padding: 10px 8px; white-space: normal; overflow-wrap: anywhere; }
#scr-gacha .gacha-pulls > button:nth-child(4) { grid-column: 2 / span 2; }
@media (min-width: 1250px) {
  #scr-gacha .gacha-pulls { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #scr-gacha .gacha-pulls > button, #scr-gacha .gacha-pulls > button:nth-child(4) { grid-column: auto; }
}
@media (max-width: 520px) {
  #scr-gacha .gacha-pulls { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  #scr-gacha .gacha-pulls > button { grid-column: span 3; min-height: 72px; font-size: 12px; padding: 8px 5px; }
  #scr-gacha .gacha-pulls > button:nth-child(3), #scr-gacha .gacha-pulls > button:nth-child(4), #scr-gacha .gacha-pulls > button:nth-child(5) { grid-column: span 2; }
}
.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;
  /* Allow ten-card results to scroll while keeping Continue visible at the bottom. */
  overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(circle at 50% 45%, #1b2d63, #03060f 70%);
}
/* Vertical centering that preserves access to overflowing content. */
#pull-fx::before, #pull-fx::after { content: ''; margin: auto; }
#pull-close { position: sticky; bottom: 8px; z-index: 2; flex-shrink: 0; box-shadow: 0 4px 18px rgba(0,0,0,.6); }
@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; }
}
/* Legacy end-of-run support message styles. */
.support-ask { position: relative; margin-top: 4px; padding: 10px 34px 12px 12px; border-radius: 10px; text-align: center;
  background: rgba(255,210,63,.08); border: 2px solid rgba(255,210,63,.45); }
.support-ask p { margin: 0 0 8px; font-size: 13px; color: var(--ink); line-height: 1.35; }
.support-ask .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.support-ask .x { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.pull-results { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; }
.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.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); } }

/* Level-up cards. */
.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; }
.card .deltas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; }
.card .delta { white-space: nowrap; color: var(--muted); }
.card .delta .dl { color: #c9d6ea; }
.card .delta .to { color: #7dffa8; }
.card .key { align-self: center; 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; }

.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) {
  #scr-menu { flex-direction: column; overflow: hidden; justify-content: flex-start; }
  /* 1.0.1: on a phone held upright the top bar wraps inside the screen instead of running off its left edge. */
  .topbar { top: 6px; left: 6px; right: 6px; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar .pill { padding: 2px 8px; font-size: 13px; gap: 4px; }
  .topbar .btn.small { padding: 3px 7px; }
  #user-pill { max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .menu-left { flex: 0 0 auto; padding: 72px 12px 4px; }
  .menu-left .logo .t1 { font-size: 26px; }
  .partner-card { display: grid; grid-template-columns: 96px 1fr; gap: 0 8px; width: 100%; text-align: left; }
  .partner-card canvas { grid-row: span 3; width: 96px; height: 74px; }
  .partner-card .nm, .partner-card .lv, .partner-actions { justify-content: flex-start; }
  .menu-right { flex: 0 0 auto; width: 100%; padding: 6px 8px 8px; background: none; }
  .menu-right > :first-child { margin-top: 0; }
  .menu-right .box { padding: 8px; }
  .menu-right .box + .box { display: none; }
  .menu-item { min-height: 40px; font-size: 14px; padding: 5px 6px; }
  .menu-item small { display: none; }
  .menu-item.play small { display: block; }
  .split { grid-template-columns: 1fr; }
  .logo .t1 { font-size: 34px; }
}

/* Pixel-art icons. */
img.pix { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }
.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; }
.move-icons { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 10px; }
.card .ico img { display: block; }
.upg-item .ic { display: flex; justify-content: center; }

/* Generation tabs. */
.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 and shiny variants. */
.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; }

/* Sound. */
.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; }

/* Cloud status and legal notice. */
.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; }   /* Above the settings overlay. */
.boot { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: #050914; color: var(--muted); font-size: 18px; }

/* Friends, rooms, invitations and leaderboard. */
.fr-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.fr-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(0,0,0,.22); border: 2px solid rgba(244,248,255,.14);
}
.fr-row b { font-size: 17px; }
.fr-row .st { color: var(--muted); font-size: 13px; }
.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); }
#fr-add { margin: 10px 0 0; }
#fr-add .field { min-width: 180px; }

.lobby-members { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.lob-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px;
  border-radius: 10px; background: rgba(0,0,0,.25); border: 3px solid var(--pc, rgba(244,248,255,.2));
  min-height: 170px; justify-content: center; text-align: center;
}
.lob-card b { font-size: 17px; color: var(--pc); }
.lob-card small { color: var(--muted); font-size: 12px; }
.lob-card .conn { font-size: 12px; color: var(--green); }
.lob-card .conn.wait { color: var(--gold); }
.lob-card.empty { border-style: dashed; border-color: rgba(244,248,255,.18); color: var(--muted); }

.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; }
.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; }
.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 { grid-template-columns: 40px auto 1fr auto 22px; gap: 6px; }
}

/* Tickets and per-species upgrades. */
.tickets-line img, #tickets-pill img, #cost-1 img, #cost-10 img { vertical-align: middle; }
.upg-head { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
.upg-head .stage { width: 120px; height: 96px; flex: 0 0 120px; }
select.field { font-family: var(--font); }

/* Gacha reels. */
#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; }

/* Wave 2 reveal: ten cards in one row under the machine (two rows of five on narrow screens), a full-width hundred-pull
   grid with the rarest first, and the flash, rarity banner and confetti of an epic, legendary or shiny draw. */
.pull-results.row10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; width: min(1240px, 100%); max-width: none; }
.pull-results.row1 .pcard.wait { width: 150px; }
.pull-results.row10 .pcard { width: auto; min-width: 0; padding: 6px 3px; }
.pull-results.row10 .pcard canvas { width: 100%; height: auto; }
.pull-results.row10 .pcard b, .pull-results.grid100 .pcard b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pull-results.row10 .pcard .tag, .pull-results.grid100 .pcard .tag { font-size: 10px; }
.pull-results.row10 .pcard .stars, .pull-results.grid100 .pcard .stars { font-size: 10px; }
@media (max-width: 760px) { .pull-results.row10 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } }
.pull-results.grid100 { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; width: 100%; max-width: none; }
.pull-results.grid100 > .sub { grid-column: 1 / -1; text-align: center; }
.pull-results.grid100 .pcard { width: auto; min-width: 0; padding: 4px 2px; border-width: 2px; box-shadow: 0 0 10px var(--rc, #fff); }
.pull-results.grid100 .pcard canvas { width: 72px; height: auto; }
.pcard.wait { display: grid; place-items: center; min-height: 96px; border-color: rgba(244,248,255,.18); box-shadow: none;
  background: rgba(255,255,255,.04); animation: none; }
.pcard.wait .wait-ball { opacity: .45; animation: wait-ball 1s ease-in-out infinite alternate; }
@keyframes wait-ball { to { opacity: .85; transform: scale(1.08); } }
.pull-flash { position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, #ffffff, var(--rc) 35%, transparent 72%); animation: pull-flash .7s ease-out forwards; }
@keyframes pull-flash { from { opacity: .9; } to { opacity: 0; } }
.pull-rarity { position: fixed; top: 14px; left: 50%; z-index: 4; pointer-events: none; white-space: nowrap;
  font-size: clamp(22px, 4vw, 40px); font-weight: 700; color: var(--rc); text-shadow: 3px 3px 0 #000, 0 0 18px var(--rc);
  animation: pull-rarity 1.8s ease-out forwards; }
@keyframes pull-rarity { 0% { opacity: 0; transform: translate(-50%, -10px) scale(1.4); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 0) scale(1); } }
.confetti { position: fixed; top: -12px; z-index: 4; width: 6px; height: 10px; pointer-events: none; animation: confetti 1.4s linear both; }
@keyframes confetti { to { transform: translateY(105vh) rotate(540deg); } }

/* Missions, achievements, profile and items. */
.goals-body { max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.goals-h { margin: 6px 0 4px; }
.goals-h h3 { margin: 0; }
.mission {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 10px 12px; margin-bottom: 6px; border-radius: 8px;
  background: rgba(0,0,0,.22); border: 2px solid rgba(244,248,255,.14);
}
.mission.ready { border-color: var(--gold); background: rgba(255,210,63,.1); }
.mission.claimed { opacity: .55; }
.mission small, .ach small { color: var(--muted); font-size: 12px; }
.mission .bar, .ach .bar { height: 7px; background: rgba(0,0,0,.4); border-radius: 6px; overflow: hidden; margin: 4px 0 2px; }
.mission .bar i, .ach .bar i { display: block; height: 100%; background: var(--gold); }
.m-rw, .a-rw { font-size: 13px; color: var(--ink); }
.m-rw img, .a-rw img, .tag-chip img { vertical-align: middle; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ach {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.2); border: 2px solid rgba(244,248,255,.1);
}
.ach.ok { border-color: rgba(255,210,63,.6); }
.ach .a-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.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; }
.fav-slots { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.fav-slot {
  width: 140px; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(0,0,0,.28); border: 3px dashed rgba(244,248,255,.25); cursor: pointer; text-align: center;
}
.fav-slots.view .fav-slot { cursor: default; border-style: solid; border-color: rgba(255,210,63,.55); }
.fav-slot b { font-size: 14px; }
.profile-box { width: min(640px, 100%); max-height: 90vh; overflow-y: auto; }
.prof-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: -10px; }
.prof-head h2 { margin: 0; }
.prof-title { color: var(--gold); font-size: 15px; border: 2px solid var(--gold); border-radius: 8px; padding: 1px 8px; }
.prof-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.prof-marks div { background: rgba(0,0,0,.25); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; }
.prof-marks span { color: var(--muted); font-size: 12px; }
.prof-marks b { font-size: 18px; }
.prof-medals { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-medals .pm { width: 84px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.prof-medals small { font-size: 10px; color: var(--muted); }
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; }
.ach-pop {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 80;
  display: flex; gap: 10px; align-items: center; padding: 10px 16px; animation: pop .2s ease-out;
  border-color: var(--gold) !important;
}
.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); }
/* Pink bond reward styling. */
.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%; }
}
@media (max-width: 760px) { .mission { grid-template-columns: 1fr; } .prof-marks { grid-template-columns: repeat(2, 1fr); } }


/* Mobile and touch. */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body { touch-action: manipulation; }
/* Suppress iPhone text-selection menus during joystick input; Safari requires the explicit WebKit property. */
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; }
/* Hide keyboard hints for touch input. */
body.touch kbd, body.touch .card .key, body.touch .kbd-hint { display: none !important; }
#rotate {
  position: fixed; inset: 0; z-index: 2147483647;
  display: none; 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); } }

/* Settings. */
#scr-settings { z-index: 60; }
.box.settings { width: min(640px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.set-body { overflow-y: auto; padding-right: 4px; min-height: 0; }
#set-tabs { flex-wrap: wrap; }
#set-tabs .gen-tab { padding: 6px 12px; }
.set-h { color: var(--gold); font-size: 17px; margin: 14px 0 6px; }
.set-h:first-child { margin-top: 4px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.set-row b { display: block; }
.set-row small { display: block; color: var(--muted); font-size: 12px; }
.set-row .switch { min-width: 58px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.set-chips { margin: 6px 0 10px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; font-size: 14px; }
.keys span { color: var(--muted); }
.credits { margin: 4px 0 12px; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.credits b { color: var(--ink); }
.about-logo { text-align: center; font-size: 34px; font-weight: 700; color: var(--gold); text-shadow: 2px 2px 0 #a55f00, 4px 4px 0 var(--shadow); margin-top: 6px; }
.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); }

/* Short landscape screens: compact top bar and two-column menu. Credits remain available in Settings, About. */
@media (max-height: 520px) {
  .scr { padding: 50px 10px 6px; }
  /* No top bar overlap, so no extra spacing is needed. */
  #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; }

  #scr-menu { flex-direction: row; padding: 0; overflow: hidden; }
  .menu-left { padding: 50px 8px 6px; }
  .menu-left .logo { margin-bottom: 2px; }
  .menu-left .logo .t1 { font-size: 28px; }
  .logo .t2 { font-size: 10px; margin-top: 2px; letter-spacing: 2px; }
  #menu-partner { height: min(34vh, 130px); width: auto; }
  .partner-card { margin-top: 2px; }
  .partner-card .nm { font-size: 17px; }
  .partner-card .lv { font-size: 12px; }
  .menu-right { flex: 0 0 auto; width: min(560px, 66vw); padding: 50px 8px 6px; gap: 6px; justify-content: flex-start; overflow: hidden; }
  .menu-right .box { padding: 6px 8px; }
  .menu-right > .box:last-child { display: none; }
  .menu-right > :first-child { margin-top: 0; }
  .ach-pop { top: auto; bottom: 8px; }
  .menu-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
  .menu-item { min-height: 34px; font-size: 13px; padding: 4px; grid-template-columns: 20px minmax(0, 1fr); column-gap: 6px; }
  .menu-item small { display: none; }
  .menu-item.play { grid-column: 1 / -1; font-size: 20px; min-height: 38px; }
  .menu-item::before { display: none; }
  .mi-ico img, .mi-ico .discord-ic { width: 20px; height: 20px; }
  .box.settings { max-height: calc(100dvh - 12px); }
}
/* Hide menu subtitles on very short phones to fit the full menu. */
@media (max-height: 400px) {
  .menu-right { padding-top: 48px; }
  .menu-item small { display: none; }
  .menu-item { font-size: 14px; padding: 5px 6px; }
  .menu-item.play { font-size: 19px; }
  .menu-item.play small { display: none; }
  #menu-partner { height: min(30vh, 110px); }
}

/* Loading screen. */
.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; }
/* Tap-to-start overlay with the world visible behind it. */
.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-links { margin-top: 10px; font-size: 13px; text-align: center; }
.login-links a { color: #9fd4ff; }

/* Legacy support styles. */
#scr-support { z-index: 60; }
.box.support { width: min(560px, 100%); }
/* Upgrade buttons and move bans. */
.upg-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ban-picker { grid-column: 1 / -1; }
.bind-panel { grid-column: 1 / -1; }
.bind-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bind-slot { display: flex; align-items: center; gap: 6px; margin: 0; }
.bind-slot span { font-weight: 700; color: var(--gold); min-width: 14px; }
.bind-slot select { width: 100%; min-width: 0; }
@media (max-width: 760px) { .bind-slots { grid-template-columns: repeat(2, 1fr); } }
.ban-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.ban-moves .chip { display: inline-flex; align-items: center; gap: 5px; }
.ban-moves .chip.ban { background: rgba(255,95,109,.25); border-color: #ff5f6d; color: #ffd3d8; text-decoration: line-through; }
/* News. */
.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; }
.box.news-box { width: min(640px, 100%); max-height: calc(100dvh - 90px); display: flex; flex-direction: column; }
.news-body { overflow-y: auto; padding-right: 4px; }
.news-day { padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.news-day:last-child { border-bottom: 0; }
.news-day h3 { color: var(--gold); margin: 14px 0 6px; font-size: 18px; }
.news-day h3 small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin-top: 2px; }
.news-part { margin: 6px 0 8px; }
.news-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px; color: #0b1020; text-shadow: none; }
.news-tag.new { background: #5fe08a; } .news-tag.chg { background: #4fb4ff; } .news-tag.fix { background: #ffb347; }
.news-day ul { margin: 0; padding-left: 20px; }
.news-day li { margin: 4px 0; line-height: 1.35; font-size: 15px; }
@media (max-width: 760px) { .news-btn span { display: none; } }
.sup-tab { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 15px; }
.sup-tab td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sup-tab td.num { text-align: right; white-space: nowrap; }
.sup-tab tr.tot td { font-weight: 700; color: var(--gold); border-bottom: 0; }
#btn-support span { margin-left: 2px; }
@media (max-height: 520px) { #btn-support span { display: none; } }
/* Landscape mobile collection: list on the left, details and companion action on the right. */
@media (max-height: 520px) {
  #scr-dex .box { height: 100%; display: flex; flex-direction: column; padding: 8px 10px; }
  #scr-dex .gen-tabs { margin-top: 2px; padding-bottom: 4px; flex: 0 0 auto; }
  #scr-dex .split { grid-template-columns: 1fr minmax(190px, 36%); gap: 8px; flex: 1; min-height: 0; margin-top: 2px !important; }
  #scr-dex .split > div:first-child { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  #scr-dex .gen-tabs, #scr-dex .filters { scrollbar-width: none; }
  #scr-dex .gen-tabs::-webkit-scrollbar, #scr-dex .filters::-webkit-scrollbar { display: none; }
  #scr-dex .filters { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 4px; flex: 0 0 auto; }
  #scr-dex .chip { flex: 0 0 auto; padding: 2px 8px; font-size: 12px; }
  #scr-dex .grid { max-height: none; flex: 1; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
  #scr-dex .cell canvas { width: 69px; height: 60px; }
  #scr-dex .cell b { font-size: 11px; }
  #dex-detail { min-height: 0; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; }
  #dex-detail .stage { width: 132px; height: 114px; margin: 2px auto 4px; }
  #dex-detail h3 { margin: 0; }
  #dex-detail .stat { grid-template-columns: 62px 1fr 34px; gap: 4px; font-size: 12px; margin: 2px 0; }
  #dex-detail p { margin: 4px 0 !important; font-size: 12px !important; }
  #dex-detail .move-icons { margin-bottom: 4px; }
  /* Keep the choose action at the bottom of the details panel. */
  #dex-detail .btn { position: sticky; bottom: 0; order: 9; margin-top: auto; padding: 8px 6px; font-size: 15px;
    box-shadow: 0 -6px 10px rgba(5,10,25,.6); }
}

/* Funding and SEO surfaces remain unpublished. */
[data-support], #support-pill, .support-ask, a[href*="ko-fi"], a[href*="github.com/sponsors"] { display:none!important; }

/* Incubator. */
.egg-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.egg-slot{border:2px solid #526580;border-radius:12px;padding:16px 8px;text-align:center;background:#152035}
.egg-slot progress{width:100%;accent-color:#5fe08a}.egg-art{margin:8px auto;width:38px;height:50px;border:3px solid #fff7da;border-radius:48% 48% 44% 44%;background:radial-gradient(ellipse at 30% 35%,#5fe08a 15%,transparent 17%),radial-gradient(ellipse at 65% 70%,#5fe08a 10%,#f4e9c9 12%)}
.egg-art.rare{filter:hue-rotate(70deg)}.egg-art.ultra{filter:hue-rotate(150deg)}.egg-empty{font-size:40px;color:#75849b;height:68px}.egg-hatches{display:flex;flex-wrap:wrap;gap:12px}.egg-hatched{text-align:center;animation:egg-appear .65s ease-out both}.egg-hatched canvas{display:block;margin:auto}@keyframes egg-appear{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
/* First-partner encounter: original shells, existing Pixelify and game palette. */
.first-partner-box{width:min(760px,100%)}.first-ready{text-align:center;padding:24px 10px}.first-ready p{max-width:460px;margin:14px auto 24px}.first-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.first-egg{font-family:var(--font);border:2px solid #7189b3;border-radius:10px;background:linear-gradient(#25416c,#152944);color:var(--ink);cursor:pointer;min-width:0;padding:10px 6px;touch-action:manipulation;text-shadow:1px 2px #101829;min-height:174px}.first-egg:hover{background:#304e78}.first-egg:focus-visible{outline:3px solid #fff5be;outline-offset:2px}.first-egg.selected{border-color:#ffe296;box-shadow:inset 0 0 0 2px #dfb451;background:#3a4266}.first-art{height:100px;display:flex;align-items:center;justify-content:center}.first-art svg{height:94px;width:80px;color:var(--egg-color);filter:drop-shadow(0 5px 0 #10213a)}.first-art canvas{width:128px;height:100px;image-rendering:pixelated;max-width:100%;object-fit:contain}.first-egg b{display:block;font-size:18px;line-height:1.2;overflow-wrap:anywhere}.first-egg-sub{display:block;font-size:13px;color:#e0eafd;margin-top:6px;line-height:1.2}.first-egg.selected .first-egg-sub{color:#ffe296}.first-confirm{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:16px}.first-confirm p{font-size:15px;line-height:1.35;margin:0;flex:1}.first-confirm .btn{min-height:46px}.first-error{color:#ffccaa;margin:8px 0 0}.first-error:empty{display:none}.first-egg.tapped .first-art{animation:first-tap .18s}.first-egg.hatched.tapped .first-art{animation:pop .25s}@keyframes first-tap{50%{transform:rotate(-6deg)}}
@media(max-width:520px){#scr-test{padding:12px}.first-partner-box{padding:16px 12px}.first-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.first-egg{min-height:148px;padding:6px}.first-art{height:86px}.first-art svg{height:80px;width:68px}.first-art canvas{height:86px;width:110px}.first-egg b{font-size:17px}.first-egg-sub{font-size:12px}.first-confirm{flex-direction:column;gap:10px;align-items:stretch}.first-confirm p{font-size:14px}.first-confirm button{width:100%}}
@media(max-height:520px) and (min-width:521px){.first-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.first-partner-box{width:min(960px,100%)}.first-egg{padding:6px 2px;min-height:146px}.first-egg b{font-size:15px}.first-art{height:80px}.first-art svg{height:74px;width:62px}.first-art canvas{width:100px;height:78px}.first-egg-sub{font-size:11px}.first-confirm{margin-top:10px}.first-confirm p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.first-egg.tapped .first-art,.first-egg.hatched.tapped .first-art{animation:none}}
/* Keep first-partner actions visible in short browser viewports, including zoomed windows. */
#scr-test .first-partner-box{min-width:0;max-width:100%;max-height:calc((100dvh - 24px - var(--tg-top,0px) - var(--tg-bottom,0px))/var(--ui-scale,1));display:flex;flex-direction:column;overflow:hidden}
#first-offer{display:flex;flex-direction:column;min-height:0}
#first-offer>.sub,.first-confirm,.first-error{flex-shrink:0}
.first-grid{min-height:0;grid-auto-rows:max-content;overflow:auto;overscroll-behavior:contain}
.first-confirm p{min-width:0;overflow-wrap:anywhere}
.first-confirm .btn{flex-shrink:0;max-width:100%;white-space:normal}
@media(max-height:520px) and (min-width:521px){
  #scr-test{padding:6px}
  #scr-test .first-partner-box{padding:10px 12px}
  #first-offer>h2{font-size:22px}
  #first-offer>.sub{font-size:13px;margin-bottom:8px}
  .first-egg{min-height:0;padding:5px 2px}
  .first-art{height:clamp(28px,10dvh,54px)}
  .first-art svg{height:100%;width:auto;max-width:100%}
  .first-art canvas{height:100%;width:auto;max-width:100%}
  .first-egg b{font-size:12px}
  .first-egg-sub{font-size:10px;margin-top:3px}
  .first-confirm{margin-top:8px;gap:8px}
  .first-confirm .btn{min-height:40px;padding:7px 10px;font-size:14px}
}
/* Native canvas pixels follow the existing artwork; avoid fractional CSS scaling. */
.first-art canvas{width:auto;height:auto;max-width:none;flex:none}

/* Rift encounter: separate art and text columns, integer canvas pixels. */
/* Atlas: one active demo, searchable text lists and no animated roster grid. */
.regions-box{width:min(1040px,100%);max-height:calc(100dvh - 90px);display:flex;flex-direction:column;overflow:hidden}
.regions-box h1{font-size:26px;margin:0}.regions-box>p{color:var(--muted);font-size:15px}
#regions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:auto;padding:4px 8px 10px 2px}
.region-card{font-family:var(--font);color:#f5f5e8;background:#1b304e;border:2px solid #6c87ab;border-radius:8px;padding:8px;cursor:pointer;text-align:left;min-width:0}
.region-card.selected{border-color:#ffda72;background:#34415c}.region-card.locked{opacity:.65;cursor:default}
.region-card img{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:4px}
.region-card b{display:block;font-size:21px;margin:7px 0 4px}.region-card span{display:block;font-size:14px}.region-card small{display:block;font-size:13px;color:#ffe4a0;margin-top:6px}
/* 1.3.1: the region's legendary stands on its map (a dark silhouette while the region is locked) and the generation sits
   beside the name. */
.region-card .rc-art{position:relative;display:block}
.region-card .rc-legend-box{position:absolute;right:1%;bottom:0;width:44%;height:100%;pointer-events:none}
.region-card .rc-legend{display:block;width:100%;height:100%;image-rendering:pixelated}
.region-card .rc-legend.silhouette{filter:brightness(0) drop-shadow(0 0 3px rgba(255,255,255,.45))}
.region-card .rc-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin:7px 0 4px}
.region-card .rc-name b{margin:0}
.region-card .rc-name small{display:inline;margin:0;color:#b5c5da;font-size:13px}
.regions-footer{padding-top:14px;flex:none}
@media(max-width:600px){#regions-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.regions-box{padding:12px;max-height:calc(100dvh - 80px)}.region-card b{font-size:18px}.regions-box .btn{font-size:14px;padding:8px}.regions-box h1{font-size:22px}.region-card span,.region-card small{font-size:12px}}
@media(max-height:520px){.regions-box{max-height:calc(100dvh - 42px);padding:12px}.regions-box h1{font-size:21px}.regions-box>p{margin:8px 0}.regions-box .btn{padding:6px 12px}.regions-footer{padding-top:8px}}
#scr-atlas{padding:20px;background:rgba(9,15,31,.97);animation:none}
.atlas-shell{width:min(1120px,100%);height:100%;min-height:0;display:flex;flex-direction:column;background:#15243c;border:2px solid #677d9d;padding:20px}
.atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;flex:none}
.atlas-heading h1{font-size:30px;margin:0}.atlas-heading p{margin:3px 0 0;color:#b5c5da;font-size:15px}
.atlas-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;min-height:0;flex:1}
.atlas-browser{display:flex;flex-direction:column;min-height:0;gap:8px}
.atlas-shell label{font-size:14px;color:#cbd9ee;display:block}
.atlas-shell input,.atlas-shell select{font-family:var(--font);font-size:16px;padding:9px;background:#0e1a30;color:#edf3ff;border:1px solid #7085a4;border-radius:5px;width:100%;min-width:0}
.atlas-filter-row{display:flex;align-items:center;gap:8px}.atlas-filter-row label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#atlas-results{margin:0;font-size:14px;color:#9fbbd5}
#atlas-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0;padding:2px 6px 8px 0}
.atlas-entry{text-align:left;padding:12px;border:1px solid #385270;background:#1b304b;border-radius:5px;cursor:pointer;font-family:var(--font);color:#f5f4e9;flex:none;min-height:84px}
.atlas-entry .type{float:right;font-size:11px;margin-left:6px}.atlas-entry b{font-size:18px;display:block}.atlas-entry small{font-size:13px;display:block;color:#b6c9df;margin-top:7px}
.atlas-entry:hover,.atlas-entry.selected{border-color:#ffd67e;background:#2b3d58}.atlas-entry:focus-visible{outline:2px solid #fff2a9}
#atlas-prompt{color:#bdc9dc;align-self:center;text-align:center}
#atlas-detail{overflow:auto;min-height:0;padding:0 12px 22px 0;line-height:1.4}
#atlas-name{font-size:32px;line-height:1.15;margin:16px 0 10px;overflow-wrap:anywhere}
#atlas-name:focus{outline:none}#atlas-badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#bbcadf;font-size:14px}
#atlas-desc{margin:14px 0}
#atlas-demo-host{width:100%;height:260px;background:#14283b;border:1px solid #526b85;display:flex;align-items:center;justify-content:center;text-align:center;color:#b7c7db;padding:0;overflow:hidden}
#atlas-demo{display:block;width:100%;height:100%;border:0}
.atlas-demo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;font-size:13px;color:#adc1da}
.atlas-note{color:#adbed4;font-size:14px}.atlas-shell h3{font-size:20px;margin:22px 0 10px;color:#ffe0a1}
#atlas-params{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}#atlas-params div{padding:10px;background:#20334e;border:1px solid #3e5370;border-radius:4px}#atlas-params dt{font-size:13px;color:#aec2dc}#atlas-params dd{margin:4px 0 0;font-size:18px;color:#f4e4bb}
#atlas-access,#atlas-mon-search{margin:6px 0 12px}#atlas-compatible{padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0 14px;font-size:15px}#atlas-compatible li{overflow-wrap:anywhere}
.atlas-pagination{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13px}
@media(max-width:600px){
 #scr-atlas{padding:12px 10px}.atlas-shell{padding:14px}.atlas-heading{gap:10px}.atlas-heading h1{font-size:26px}.atlas-heading p{display:none}.atlas-heading .btn{font-size:14px;padding:8px 12px;min-height:42px}
 .atlas-layout{grid-template-columns:minmax(0,1fr);gap:0}#atlas-prompt{display:none}.atlas-shell.has-selection .atlas-browser{display:none}#atlas-detail{padding-right:2px}#atlas-list{gap:8px}#atlas-name{font-size:28px}#atlas-demo-host{height:200px}#atlas-params{grid-template-columns:repeat(2,minmax(0,1fr))}#atlas-compatible{grid-template-columns:repeat(2,minmax(0,1fr))}.atlas-demo-row{align-items:flex-start}.atlas-demo-row .btn{flex:none}
}
@media(max-height:520px) and (min-width:601px){
 #scr-atlas{padding:10px 12px}.atlas-shell{padding:12px}.atlas-heading{margin-bottom:8px}.atlas-heading h1{font-size:24px}.atlas-heading p{display:none}.atlas-heading .btn{padding:6px 12px;font-size:15px}.atlas-layout{grid-template-columns:225px minmax(0,1fr);gap:18px}#atlas-name{font-size:26px}#atlas-demo-host{height:210px}#atlas-compatible{grid-template-columns:repeat(2,minmax(0,1fr))}
}
#scr-rift-intro{z-index:45;background:rgba(9,15,31,.96);padding:24px;overflow:auto;animation:none}
/* Expand one move directly inside the catalog on every screen size. */
.atlas-move-icon{position:relative;display:inline-flex;flex:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid #6883a8;border-radius:7px;background:#10213b;vertical-align:middle}
.atlas-move-icon img{image-rendering:pixelated;max-width:none}
.atlas-move-icon.evolved{border-color:#ffdf8e;background:#3c3540}
.atlas-evo-icon{position:absolute;right:-4px;bottom:-3px;background:#182c49;border:1px solid #ffd67e;border-radius:3px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
#scr-atlas .atlas-entry>.atlas-move-icon{float:left;margin:4px 14px 4px 0}
#scr-atlas #atlas-name{display:flex;align-items:center;gap:12px}
#scr-atlas .atlas-layout{display:flex;flex-direction:column;gap:0;min-height:0}
#scr-atlas .atlas-browser{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr);gap:8px 18px;min-height:0;flex:1}
#scr-atlas .atlas-browser>label{grid-column:1/-1}
#scr-atlas #atlas-results,#scr-atlas #atlas-empty{grid-column:1/-1}
#scr-atlas #atlas-list{grid-column:1/-1;overflow-y:auto;display:block;min-height:0;padding-right:8px}
#scr-atlas .atlas-card{margin:0 0 10px;border:1px solid #4f6989;border-radius:7px;overflow:hidden;background:#182b46}
#scr-atlas .atlas-entry{position:relative;width:100%;min-height:82px;border:0;border-radius:0;padding:15px 48px 15px 16px}
#scr-atlas .atlas-expand{position:absolute;right:16px;top:24px;font-size:24px;color:#ffe0a1}
#scr-atlas .atlas-entry .type{float:none;position:absolute;right:50px;top:15px}
#scr-atlas .atlas-entry b{padding-right:100px}
#scr-atlas #atlas-detail{overflow:visible;padding:16px;border-top:1px solid #607b9f}
#scr-atlas #atlas-prompt{display:none}
#scr-atlas #atlas-all-moves{display:none}
#scr-atlas .atlas-version-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#scr-atlas #atlas-name{margin:0;font-size:27px}
#scr-atlas #atlas-demo-host{height:auto;aspect-ratio:16/7;min-height:190px;max-height:400px}
#scr-atlas .atlas-shell.has-selection .atlas-browser{display:grid}
/* Filters scroll with the catalog, leaving room for a complete scene. */
#scr-atlas .atlas-browser,#scr-atlas .atlas-shell.has-selection .atlas-browser{display:block;overflow-y:auto;padding-right:8px}
#scr-atlas .atlas-browser>input{margin:8px 0}
#scr-atlas #atlas-results{margin:8px 0}
#scr-atlas #atlas-list{overflow:visible;padding:0}
#scr-atlas #atlas-demo-host{max-height:min(400px,calc(100dvh - 150px));min-height:140px}
@media(max-width:600px){
 #scr-atlas .atlas-browser{grid-template-columns:minmax(0,1fr);gap:8px}
 #scr-atlas .atlas-entry{padding:12px 40px 12px 12px;min-height:82px}
 #scr-atlas .atlas-entry .type{right:38px;top:14px}
 #scr-atlas .atlas-entry b{padding-right:70px;font-size:18px}
 #scr-atlas #atlas-detail{padding:10px}
 #scr-atlas .atlas-version-row{align-items:flex-start;flex-direction:column}
 #scr-atlas #atlas-name{font-size:25px}
 #scr-atlas #atlas-demo-host{aspect-ratio:4/3;min-height:220px}
}
.rift-intro-card{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:center;width:min(780px,100%);padding:32px;border:2px solid #7265a1;background:#151f38;box-shadow:8px 8px 0 #090f1f;text-align:left}
.rift-intro-visual{position:relative;height:280px;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;place-items:center;isolation:isolate}
.rift-intro-orbit{position:absolute;inset:18px;border:2px solid #554879;border-radius:50%;z-index:-1}
.rift-intro-orbit:after{content:'';position:absolute;inset:16px;border:1px solid #32364e;border-radius:50%}
#rift-intro-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#rift-intro-art canvas{width:auto;height:auto;max-width:none;image-rendering:pixelated;flex:none}
.rift-intro-label{color:#c8a9ff;font-size:14px;letter-spacing:2px;margin:0 0 12px}
#rift-intro-name{font-size:40px;line-height:1.08;margin:0 0 16px;overflow-wrap:anywhere;color:#f5f0df}
#rift-intro-types{display:flex;flex-wrap:wrap;gap:8px}
#rift-intro-fact{color:#bec8dd;line-height:1.4;margin:20px 0}
#rift-intro-shiny{color:#ffd23f;margin:8px 0 0}
#rift-intro-enter{min-height:48px;width:100%;font-size:20px}
.rift-intro-hint{color:#9daac4;font-size:13px;margin:10px 0 0;text-align:center}
@media(max-width:560px){
 #scr-rift-intro{padding:18px}
 .rift-intro-card{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px;text-align:center}
 .rift-intro-visual{height:200px}
 .rift-intro-orbit{inset:4px calc(50% - 96px)}
 #rift-intro-name{font-size:32px;margin-bottom:12px}
 #rift-intro-types{justify-content:center}
 #rift-intro-fact{margin:16px 0}
}
@media(max-height:520px) and (min-width:561px){
 #scr-rift-intro{padding:14px max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left))}
 .rift-intro-card{grid-template-columns:220px minmax(0,1fr);gap:24px;padding:22px;width:min(700px,100%)}
 .rift-intro-visual{height:220px}
 #rift-intro-name{font-size:32px;margin-bottom:10px}
 .rift-intro-label{margin-bottom:8px}
 #rift-intro-fact{margin:12px 0}
}

/* Run statistics shown on pause and at the end of a run. */
.run-stats { margin: 10px 0 14px; text-align: left; }
.rs-portrait { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rs-portrait canvas, .rs-portrait img { image-rendering: pixelated; border-radius: 8px; }
.rs-portrait span { color: var(--muted); font-size: 13px; }
.rs-head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.rs-cell { background: rgba(255,255,255,.06); border-radius: 8px; padding: 6px 4px; text-align: center; }
.rs-cell b { display: block; font-size: 16px; }
.rs-cell span { color: var(--muted); font-size: 11px; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-table th { color: var(--muted); font-weight: 600; text-align: right; padding: 3px 6px; }
.rs-table td { text-align: right; padding: 3px 6px; border-top: 1px solid rgba(255,255,255,.07); }
.rs-table th:first-child, .rs-table td:first-child { text-align: left; }
.rs-move { display: flex; align-items: center; gap: 6px; }
.rs-empty { text-align: center !important; color: var(--muted); }
@media (max-width: 520px) { .rs-head { grid-template-columns: repeat(3, 1fr); } .rs-table { font-size: 12px; } }

/* What's new: card feed and article pane; phones show one at a time. */
.box.news-box { width: min(860px, 100%); }
.news-wrap { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 14px; min-height: 0; overflow: hidden; }
.news-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 4px; }
.news-card { display: flex; flex-direction: column; gap: 4px; text-align: left; background: rgba(255,255,255,.05); border: 2px solid transparent; border-radius: 10px; padding: 10px 12px; color: inherit; font: inherit; cursor: pointer; }
.news-card:hover, .news-card.on { border-color: var(--edge); background: rgba(255,255,255,.09); }
.news-card.unread { border-color: rgba(255,95,109,.55); }
.news-meta { display: flex; align-items: center; gap: 8px; }
.news-meta small { color: var(--muted); font-size: 12px; }
.news-dot { display: none; margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: #ff5f6d; }
.news-card.unread .news-dot { display: block; }
.news-sum { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-article { overflow-y: auto; padding-right: 4px; }
.news-article h3 { color: var(--gold); margin: 8px 0; font-size: 20px; }
.news-article p { line-height: 1.45; margin: 0 0 10px; }
.news-date { color: var(--muted); }
.news-pick { color: var(--muted); margin-top: 30px; text-align: center; }
.news-back { display: none; margin-bottom: 8px; }
.news-tag.patch { background: #ffb347; } .news-tag.update { background: #4fb4ff; }
.news-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff5f6d; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
@media (max-width: 760px), (max-height: 500px) {
  .news-wrap { grid-template-columns: 1fr; }
  .news-article { display: none; }
  #scr-news.reading .news-list { display: none; }
  #scr-news.reading .news-article { display: block; }
  .news-back { display: inline-block; }
}

/* SpriteCollab portraits: integer scale with a type-coloured frame. */
.pt-portrait { image-rendering: pixelated; border: 2px solid; border-radius: 4px; background: rgba(0,0,0,.25); vertical-align: middle; flex: none; }
#menu-partner-name .pt-portrait { margin-right: 8px; }
/* Menu E marker: a small badge after the partner name; ::after keeps a larger touch area without growing the row. */
#menu-partner-name .menu-evolution-hint { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; margin-left: 8px; padding: 0; border-radius: 6px; font: 700 13px/1 sans-serif; text-shadow: none; vertical-align: middle; }
#menu-partner-name .menu-evolution-hint::after { content: ''; position: absolute; inset: -10px; }
#menu-partner-name .menu-evolution-hint:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
.egg-name { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Google sign-in button (Google branding guidelines, light theme). */
.login-cloud { display: flex; justify-content: center; margin-top: 12px; }
.gsi-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 12px; min-width: 220px;
  background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 4px; font: 500 14px Roboto, Arial, sans-serif; letter-spacing: .25px; cursor: pointer; text-shadow: none; }
.gsi-button:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gsi-button:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; }
.gsi-icon { display: inline-flex; width: 18px; height: 18px; }
.gsi-icon svg { width: 18px; height: 18px; }
#login-cloud-note { margin-top: 8px; }
.cloud-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; text-align: left; }
.cloud-card { background: rgba(255,255,255,.06); border-radius: 10px; padding: 10px 12px; }
.cloud-card h3 { margin: 0 0 6px; color: var(--gold); font-size: 16px; }
.cloud-warn { color: #ffb347; font-weight: 600; }   /* 1.3.1 (Q38): the picked copy holds far less progress. */
.cloud-card p { margin: 2px 0; font-size: 14px; }
.cloud-card small { color: var(--muted); }
@media (max-width: 520px) { .cloud-cards { grid-template-columns: 1fr; } }
/* 1.15.1 account link (js/core/account-link.js): on a phone held sideways the choice and its buttons fit one screen. */
#login-link { margin-top: 8px; }
.link-warn { color: #ffd08a; }
@media (max-height: 480px) {
  .link-modal .box { padding: 10px 14px; }
  .link-modal h2 { margin: 0 0 4px; font-size: 18px; }
  .link-modal .sub { margin: 0 0 4px; font-size: 12px; }
  .link-modal .cloud-cards { margin: 6px 0; gap: 8px; }
  .link-modal .cloud-card { padding: 6px 10px; }
  .link-modal .cloud-card h3 { margin: 0 0 2px; font-size: 14px; }
  .link-modal .cloud-card p { margin: 0; font-size: 12px; }
  .link-modal .btn { padding: 6px 12px; font-size: 13px; }
}

/* Pause menu: per-move cast mode switches. */
#pause-cast { margin: 8px 0 4px; text-align: left; }
#pause-cast .cast-title { font-size: 15px; margin: 4px 0; }
#pause-cast .note { font-size: 12px; margin: 0 0 6px; opacity: .8; }
.cast-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.cast-row .cast-name { font-weight: 700; min-width: 110px; }
.cast-row .chip { padding: 4px 8px; font-size: 12px; }
/* Collection: copy count badge. */
.cell .badge-copies { position: absolute; bottom: 22px; right: 5px; font-size: 11px; font-weight: 800; color: var(--gold); text-shadow: 0 1px 0 #000; }

/* R16: locked gacha banners. */
.gen-tab.locked { opacity: .55; }
.gen-tab.locked::after { content: ''; display: inline-block; width: 7px; height: 6px; margin-left: 5px; background: currentColor; border-radius: 1px; vertical-align: 0; }
.banner.locked .feat { filter: grayscale(1) brightness(.45); }
.banner-lock { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.55); color: var(--gold); font-weight: 700; }
.lock-ic { display: inline-block; position: relative; width: 10px; height: 8px; margin: 4px 3px 0 2px; background: var(--gold); border-radius: 1px; vertical-align: -1px; }
.lock-ic::before { content: ''; position: absolute; left: 2px; top: -5px; width: 4px; height: 5px; border: 1px solid var(--gold); border-bottom: 0; border-radius: 3px 3px 0 0; }
/* ---- 1.0.1: PokéTide frames and language picker ---- */
:root {
  --pt-deep: #1B2A6B; --pt-wave: #40D6FF; --pt-white: #FFFFFF; --pt-yellow: #FFD640; --pt-ink: #141028;
  /* 9-slice frame: 2 px #141028 outline with 2 px pixel corners, 1 px inner line in the wave colour at 40%, deep-blue fill. */
  --pt-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23141028' d='M2 0h8v1h1v1h1v8h-1v1h-1v1H2v-1H1v-1H0V2h1V1h1z'/%3E%3Cpath fill='%232A6FA6' d='M3 2h6v1h1v6h-1v1H3V9H2V3h1z'/%3E%3Cpath fill='%231B2A6B' d='M3 3h6v6H3z'/%3E%3C/svg%3E");
}
/* Level-up cards, pause, run summary, item and bond windows; patch 1.1 can add .pt-frame to the Poké Ball window. */
#scr-levelup > .box, #scr-pause > .box, #scr-over > .box, #scr-item > .box, #scr-bond > .box, .pt-frame {
  background: none; border-radius: 0; box-shadow: 0 14px 40px rgba(0,0,0,.5);
  border: 4px solid transparent; border-image: var(--pt-frame) 4 fill / 4px stretch;
}
.cards .card, #item-cards .card, #bond-cards .card {
  position: relative; border-radius: 0; background: none; transform: none;
  border: 4px solid transparent; border-image: var(--pt-frame) 4 fill / 4px stretch;
  padding-top: 14px;
}
/* Rarity or kind colour as the top stripe, not the whole frame. */
.cards .card::before, #item-cards .card::before, #bond-cards .card::before {
  content: ''; position: absolute; left: 2px; right: 2px; top: 1px; height: 4px; background: var(--rc, #9fb1c9);
  box-shadow: 0 1px 0 var(--pt-ink);
}
.card.evo { --rc: var(--pt-yellow); }
.card.bond { --rc: #ff8ad8; }
.card.evo, .card.bond { background: none; }
.card:hover { background: none; transform: none; }
/* Selected card: a wave runs along the outline; reduced effects show a still highlight. */
@property --pt-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cards .card:hover::after, .cards .card:focus-visible::after, .cards .card.picked::after,
#item-cards .card:hover::after, #bond-cards .card:hover::after {
  content: ''; position: absolute; inset: -4px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--pt-a), transparent 0 55%, var(--pt-wave) 75%, #fff 80%, var(--pt-wave) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
  animation: pt-wave 1.4s linear infinite;
}
@keyframes pt-wave { to { --pt-a: 360deg; } }
body.calm .card:hover::after, body.calm .card:focus-visible::after, body.calm .card.picked::after {
  animation: none; background: var(--pt-wave);
}
.cards.done .card.picked { border-color: transparent; }
.card .key { border-radius: 0; }

/* Start-screen language button and list. */
.lang-pick { position: absolute; top: 10px; right: 10px; z-index: 2; }
.lang-btn { min-width: 42px; padding: 4px 8px; font-size: 13px; letter-spacing: 1px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; min-width: 190px; padding: 6px;
  border: 4px solid transparent; border-image: var(--pt-frame) 4 fill / 4px stretch; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.lang-menu button { background: none; border: 0; color: var(--ink); font: inherit; font-size: 15px; text-align: left; padding: 7px 10px; cursor: pointer; text-shadow: 2px 2px 0 var(--shadow); }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(64,214,255,.18); outline: none; }
.lang-menu button.on { color: var(--pt-yellow); }
.lang-chips .chip { font-size: 14px; }
/* 1.0.1: toasts (cast-mode switch, copies, rewards) in the PokéTide frame. */
.toast { border-radius: 0; background: none; border: 4px solid transparent; border-image: var(--pt-frame) 4 fill / 4px stretch; }
.toast.in-run { bottom: auto; top: 76px; max-width: min(560px, calc(100vw - 32px)); text-align: center; }
/* Keep transient notices clear of the gacha Skip action on every screen size: Skip sits under the card row, so the notice goes to the top. */
body:has(#pull-fx:not(.hidden) #pull-skip:not(.hidden)) .toast {
  top: 8px; bottom: auto; max-width: calc(100vw - 32px); pointer-events: none;
}

/* rc-1.1b sheet 9: painted menu icons. */
.mi-art { display: block; image-rendering: pixelated; }

/* rc-1.1b start screen: "PokéTide" 1.5x in white with a wave-blue stroke, a deep-blue outer contour and a 2 px drop. */
.tapstart .tap-title { font-size: clamp(57px, 12vw, 96px); color: #FFFFFF; -webkit-text-stroke: 3px #64D6FF; paint-order: stroke fill;
  text-shadow: 3px 0 0 #1B2A6B, -3px 0 0 #1B2A6B, 0 3px 0 #1B2A6B, 0 -3px 0 #1B2A6B, 3px 3px 0 #1B2A6B, -3px 3px 0 #1B2A6B, 3px -3px 0 #1B2A6B, -3px -3px 0 #1B2A6B, 0 5px 0 #1B2A6B;
  margin: 0 0 14px; line-height: 1.05; max-width: calc(100vw - 32px); }
.tapstart .boot-in { padding: 0 16px; }
.tapstart .tap-slogan { font-size: clamp(22px, 5vw, 34px); font-weight: 700; color: #FFFFFF !important; margin: 4px 0 2px; }
.tapstart .tap-sub { font-size: clamp(14px, 3.4vw, 18px); color: #cfe9ff !important; margin: 0; }
/* rc-1.1b: contact window and the selected news card. */
.contact-box { width: min(460px, 100%); }
.contact-text { font-size: 16px; line-height: 1.5; }
.contact-text a { color: #9fd4ff; word-break: break-all; }
.contact-official { font-size: 14px; line-height: 1.5; color: var(--muted); }
.contact-official a { color: #9fd4ff; word-break: break-all; }
#btn-contact svg, #btn-contact img { display: block; }
/* 1.2 Discord button: the official mark centred on the artist's frame (or on our standard button until it arrives). */
.discord-ic { display: inline-flex; align-items: center; justify-content: center; background: center / contain no-repeat; image-rendering: pixelated; }
.discord-ic svg, .discord-ic img { display: block; }
/* In the menu the icon takes the size the menu rules give every icon; the mark keeps the frame's 20/32 centre. */
.menu-group .menu-item .mi-ico .discord-ic > img, .menu-group .menu-item .mi-ico .discord-ic > svg { width: 100%; height: 100%; }
.menu-group .menu-item .mi-ico .discord-ic.framed > img, .menu-group .menu-item .mi-ico .discord-ic.framed > svg { width: 62.5%; height: 62.5%; }
/* A phone held upright has no room left in the top bar: Discord stays in the main menu only. */
@media (max-width: 599px) { .topbar > #btn-discord { display: none; } }
.news-card.on { border-color: var(--pt-yellow, #FFD640); box-shadow: inset 4px 0 0 var(--pt-yellow, #FFD640); }
.top-ic { display: block; image-rendering: pixelated; } #user-pill .top-ic, #btn-news .top-ic { display: inline-block; vertical-align: middle; }
/* ---- 1.2: online screens (leaderboard, profile, mail, notebook) ---- */
.online-box { width: min(640px, 100%); max-height: min(92vh, 100%); display: flex; flex-direction: column; }
.on-body { overflow: auto; min-height: 120px; }
.on-tabs { margin: 6px 0 8px; }
.on-filters { gap: 8px; margin-bottom: 8px; }
.on-filters select, .online .field { background: #0b1030; color: #fff; border: 2px solid var(--pt-ink); padding: 6px 8px; font: inherit; }
.on-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.on-table td { padding: 4px 6px; border-bottom: 1px solid rgba(64,214,255,.15); vertical-align: middle; }
.on-table td small { display: block; color: var(--muted); font-size: 11px; }
.on-table .rk { width: 34px; color: var(--pt-yellow); text-align: right; }
.on-table .num { text-align: right; white-space: nowrap; }
.on-table tr.mine td { background: rgba(255,214,64,.12); }
.on-build { white-space: nowrap; }
.on-plink { color: #fff; }
.on-mine { margin-top: 8px; padding: 8px 10px; background: rgba(0,0,0,.25); font-size: 14px; }
.on-av { display: inline-block; line-height: 0; padding: 2px; background: var(--ring, #141028); box-shadow: 0 0 0 2px var(--pt-ink); }
.on-av-empty { display: inline-block; background: var(--pt-deep); }
.on-av.framed { position: relative; padding: 0; background: none; box-shadow: none; vertical-align: middle; }
.on-av.framed .on-av-in { position: absolute; inset: 0; display: grid; place-items: center; }
.on-av.framed .on-av-frame { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.on-frame.locked .on-av.framed { filter: saturate(.35) brightness(.8); }
.on-prof-head { display: flex; gap: 12px; align-items: center; margin: 4px 0 10px; }
.on-prof-head b { font-size: 20px; display: block; }
.on-prof-head small { color: var(--muted); }
.on-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.on-stats div { background: rgba(0,0,0,.25); padding: 6px; text-align: center; }
.on-stats span { display: block; font-size: 11px; color: var(--muted); }
.on-stats b { font-size: 18px; }
.on-acts { gap: 8px; margin-top: 10px; }
.on-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 4px; }
.on-cell { background: rgba(0,0,0,.25); border: 2px solid transparent; padding: 2px; cursor: pointer; line-height: 0; }
.on-cell:hover, .on-cell:focus-visible { border-color: var(--pt-wave); }
.on-cell.sh { background: rgba(154,230,255,.18); }
.on-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.on-type { position: relative; background: rgba(0,0,0,.25); padding: 6px 8px 8px; border-left: 4px solid var(--tc); }
.on-type b { display: block; font-size: 14px; }
.on-type small { display: block; font-size: 11px; color: var(--muted); }
.on-type i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--tc); }
.on-goal { color: var(--pt-yellow); margin: 0 0 8px; }
.on-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.on-frame { background: rgba(0,0,0,.25); border: 2px solid transparent; color: #fff; font: inherit; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.on-frame small { font-size: 11px; }
.on-frame.on { border-color: var(--pt-yellow); }
.on-frame.locked { opacity: .45; cursor: default; }
.on-gift { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: rgba(0,0,0,.25); padding: 8px 10px; margin-bottom: 6px; }
.on-gift p { margin: 2px 0; font-size: 13px; color: var(--muted); }
.on-gift small { color: var(--muted); font-size: 11px; }
.over-rank:empty { display: none; }
.over-rank { margin: 8px 0; }
.on-rank { background: rgba(255,214,64,.12); border: 2px solid var(--pt-ink); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.on-rank b { color: var(--pt-yellow); }
@media (max-width: 520px) { .on-stats { grid-template-columns: repeat(2, 1fr); } .on-table { font-size: 12px; } }

/* ---- 1.3: trades ---- */
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-cols h3 { margin: 4px 0 6px; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; max-height: 46vh; overflow: auto; align-content: start; }
.tr-mon { position: relative; background: rgba(0,0,0,.25); border: 2px solid transparent; color: #fff; font: inherit; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.tr-mon small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-mon i { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 10px; color: var(--pt-yellow); }
.tr-mon.on { border-color: var(--pt-wave); background: rgba(64,214,255,.15); }
.tr-mon.sh { background: rgba(154,230,255,.12); }
.tr-row { background: rgba(0,0,0,.25); padding: 8px 10px; margin-bottom: 6px; }
.tr-who { display: flex; justify-content: space-between; gap: 8px; }
.tr-who small { color: var(--muted); }
.tr-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--muted); }
.tr-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 0 0; color: #fff; font-size: 12px; }
.tr-acts { gap: 6px; }
.on-trade-note { width: 100%; text-align: left; cursor: pointer; border: 2px solid var(--pt-yellow); color: #fff; font: inherit; }
@media (max-width: 520px) { .tr-cols, .tr-swap { grid-template-columns: 1fr; } .tr-grid { max-height: 30vh; } }

/* ---- 1.3: friends and the daily challenge ---- */
.fr-add .field { flex: 1 1 140px; max-width: 220px; }
.fr-list { display: flex; flex-direction: column; gap: 6px; }
.fr-row, .fr-req { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(0,0,0,.25); padding: 6px 8px; }
.fr-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fr-name { min-width: 0; }
.fr-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-name small { display: block; color: var(--muted); font-size: 11px; }
.fr-acts { gap: 6px; }
.dl-head { display: flex; gap: 12px; align-items: center; margin: 4px 0 8px; }
.dl-head b, .dl-head span, .dl-head small { display: block; }
.dl-head b { font-size: 18px; }
.dl-head small { color: var(--pt-yellow); margin-top: 2px; }
#dl-play { margin: 4px 0 10px; }
/* Telegram Mini App (1.5): in full screen, screens, the top bar and the rotation prompt keep clear of Telegram's header
   and the device cut-outs. The insets come from js/core/tg.js and stay 0 on the ordinary site. */
body.tg .scr, body.tg #rotate { border-style: solid; border-color: transparent;
  border-width: var(--tg-top, 0px) var(--tg-right, 0px) var(--tg-bottom, 0px) var(--tg-left, 0px); }
body.tg .topbar, body.tg .sound-panel, body.tg .ach-pop, body.tg .toast.in-run { margin-top: var(--tg-top, 0px); }
body.tg .topbar, body.tg .sound-panel { margin-right: var(--tg-right, 0px); }
/* iPhone (viewport-fit=cover): on the ordinary site and from the Home Screen the top bar and the sound panel keep clear of
   the cut-out, the rounded corners and the status bar. Both are zoomed by --ui-scale, so the insets are divided back by it. */
body:not(.tg) .topbar, body:not(.tg) .sound-panel {
  margin-top: calc(env(safe-area-inset-top, 0px) / var(--ui-scale, 1));
  margin-right: calc(env(safe-area-inset-right, 0px) / var(--ui-scale, 1));
  margin-left: calc(env(safe-area-inset-left, 0px) / var(--ui-scale, 1)); }
/* Panels sized to the viewport (100dvh) would run under the header again; inside Telegram they fit the inset screen. */
body.tg .scr > .box { max-height: 100%; }
.over-actions { justify-content: center; gap: 10px; flex-wrap: wrap; }

/* 1.1a: achievement pop-ups keep clear of the HUD (partner panel, clock, minimap, move slots, dash button) and of window
   headers: middle of the left edge during a run, bottom left elsewhere. Several in a row still queue (progress.js). */
@keyframes achIn { from { opacity: 0; } to { opacity: 1; } }
.ach-pop { left: 10px; right: auto; top: auto; bottom: 34px; transform: none; animation: achIn .2s ease-out; max-width: min(360px, calc(100vw - 20px)); }
.ach-pop.in-run { top: calc(50% - 32px); bottom: auto; max-width: min(46vw, 340px); }
/* 1.1a: loading bar on the boot screen. */
.boot-bar { position: relative; width: min(320px, 80vw); height: 14px; margin: 14px auto 0; background: rgba(0,0,0,.45); box-shadow: 0 0 0 2px var(--pt-ink, #101018), inset 0 0 0 2px rgba(255,255,255,.12); }
.boot-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold, #ffd23f); transition: width .15s linear; }
.boot-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 #000; }
/* 1.1a: interface size (Settings > Graphics): windows, the top bar and pop-ups follow --ui-scale (settings.js); the game
   canvas is not zoomed, the HUD scales itself (hud.js). */
.scr, .topbar, .sound-panel, .toast, .ach-pop { zoom: var(--ui-scale, 1); }
/* Inside a zoomed window viewport units grow with the zoom, so heights tied to the screen are divided back by it. */
.box.settings { max-height: calc((100dvh - 24px) / var(--ui-scale, 1)); }
.box.news-box { max-height: calc((100dvh - 90px) / var(--ui-scale, 1)); }
.regions-box { max-height: calc((100dvh - 90px) / var(--ui-scale, 1)); }
.profile-box { max-height: calc(90vh / var(--ui-scale, 1)); }
.goals-body { max-height: calc(62vh / var(--ui-scale, 1)); }
.fr-list { max-height: calc(52vh / var(--ui-scale, 1)); }
.rk-list, .tr-grid { max-height: calc(46vh / var(--ui-scale, 1)); }
@media (max-height: 520px) { .regions-box { max-height: calc((100dvh - 42px) / var(--ui-scale, 1)); } }
@media (max-width: 600px) { .regions-box { max-height: calc((100dvh - 80px) / var(--ui-scale, 1)); } }
@media (max-width: 520px) { .tr-grid { max-height: calc(30vh / var(--ui-scale, 1)); } }
.grid { max-height: calc(56vh / var(--ui-scale, 1)); }
@media (max-height: 520px) { .box.settings { max-height: calc((100dvh - 12px) / var(--ui-scale, 1)); } }
/* 1.1a: top-bar language list (js/ui/lang-menu.js): fixed under the globe button, same frame as the login picker. */
.top-lang-menu { position: fixed; right: auto; z-index: 70; zoom: var(--ui-scale, 1); }
.top-lang-menu .lang-opt { display: grid; grid-template-columns: 30px 1fr 14px; align-items: center; gap: 8px; }
.top-lang-menu .lang-opt b { font-size: 11px; color: var(--muted, #9fb0d8); }
.top-lang-menu .lang-opt i { font-style: normal; color: var(--pt-yellow, #ffd23f); }

/* 1.1a: upcoming moves (ported from the 1.4 branch), in two groups. */

.moves-box { width: min(760px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; gap: 8px; }
.moves-box h2 { margin: 0; }
.moves-who { display: flex; align-items: center; gap: 8px; }
.moves-who .pt-portrait { width: 32px; height: 32px; }
.moves-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.moves-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: auto; min-height: 0; align-content: start; }
.mv-card { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: rgba(10,16,40,.55); border: 2px solid rgba(64,214,255,.25); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.mv-card:hover, .mv-card:focus-visible { border-color: #40d6ff; outline: none; }
.mv-card.open { border-color: var(--gold); }
.mv-card.got { background: rgba(95,224,138,.12); }
.mv-ic { flex: none; }
.mv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mv-main small { color: var(--muted); font-size: 12px; }
.mv-main .mv-src { color: #9fd8ff; }
.mv-got { flex: none; color: #5fe08a; font-size: 20px; font-weight: 800; }
.mv-detail { grid-column: 1 / -1; background: rgba(5,8,24,.6); border: 2px solid var(--gold); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.mv-desc { margin: 0 0 6px; color: var(--muted); }
.mv-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 6px; }
.mv-grow { width: 100%; border-collapse: collapse; font-size: 12px; }
.mv-grow th, .mv-grow td { text-align: left; padding: 2px 6px; border-bottom: 1px solid rgba(64,214,255,.15); }
.mv-grow th { color: var(--muted); font-weight: 700; }
.mv-evo { margin: 6px 0 0; color: var(--gold); }
.moves-bonds { margin: 0; font-size: 13px; }
@media (max-width: 560px) { .moves-list { grid-template-columns: 1fr; } }

/* Hatch card. */
.moves-box { max-height: calc((100dvh - 40px) / var(--ui-scale, 1)); }
.mv-group { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; color: var(--gold, #ffd23f); }
.mv-evos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.mv-evos > b { width: 100%; color: var(--muted); }
.mv-bonds { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.partner-actions { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }

:lang(zh), :lang(ja) { line-break: strict; word-break: keep-all; }
.logo .t1 { color: #fff; text-shadow: -3px 0 #0b2a30, 3px 0 #0b2a30, 0 -3px #0b2a30, 0 3px #0b2a30, 3px 6px 0 rgba(0,0,0,.45); }
@media (min-width: 761px) and (min-height: 661px) {
  .menu-item { font-size: 18px; padding: 6px 10px; }
  .menu-item.play { font-size: 28px; }
  .menu-item small { font-size: 12px; }
}

/* The board owns its list scroll; fixed controls and the own-place row stay visible. */
.board-view .online-box { height: min(680px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
.board-view .on-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.board-view .on-board { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.on-period-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.on-period-row .on-tabs { flex-wrap: nowrap; min-width: 0; }
.on-period-row #on-reset { white-space: nowrap; font-size: 12px; }
.on-regions { display: flex; gap: 4px; overflow-x: auto; flex: 0 0 auto; padding: 2px 0 6px; overscroll-behavior: contain; }
.on-regions button { flex: 0 0 auto; }
.board-view .on-filters { flex: 0 0 auto; gap: 6px; margin: 4px 0; min-height: 30px; }
.board-view .on-mine { flex-shrink: 0; margin-top: 4px; padding: 6px 8px; }
.board-view .on-mine p { margin: 0; }
.on-board-box { width: min(940px, 100%); }
.on-board-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; }
.on-board-layout.on-has-podium { grid-template-columns: minmax(220px, 36%) minmax(0, 1fr); }
.on-podiums { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 12px 4px; }
.on-podium-title { margin: 0; text-align: center; color: var(--gold); font-size: 18px; }
.on-podium-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.on-podium { --on-step: 68px; --on-medal: #dceaff; min-width: 0; padding: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 0;
  color: var(--ink); font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; }
.on-podium-1 { --on-step: 96px; --on-medal: #ffd640; grid-column: 2; }
.on-podium-2 { grid-column: 1; }
.on-podium-3 { --on-step: 48px; --on-medal: #e3b284; grid-column: 3; }
.on-podium-meta { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 26px; margin-bottom: 4px; }
.on-podium-frame { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.on-podium-stage { width: 100%; height: 72px; position: relative; display: flex; align-items: end; justify-content: center; }
.on-podium-sprite { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; visibility: hidden; }
.on-podium-sprite-fallback { width: 24px; height: 16px; margin-bottom: 2px; border: 2px dashed #8294bc; border-radius: 50%; box-sizing: border-box; }
.on-sprite-ready .on-podium-sprite { visibility: visible; }
.on-sprite-ready .on-podium-sprite-fallback { visibility: hidden; }
.on-podium-name { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.on-podium-time { font-size: 17px; color: #fff; white-space: nowrap; }
.on-podium-step { width: 100%; height: var(--on-step); display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  color: var(--on-medal); background: linear-gradient(#294a8a, #172650); border: 3px solid var(--on-medal); box-shadow: inset 0 0 0 2px #10182a, 0 3px 0 #10182a; }
.on-podium-rank { font-size: 28px; }
.on-podium:hover .on-podium-name { color: var(--gold); }
.on-podium:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.on-podium:disabled { cursor: default; }
@media (max-height: 520px) {
  .board-view { padding: 6px; }
  .board-view .online-box { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); padding: 8px 12px; }
  .board-view h2 { margin: 0; font-size: 20px; }
  .board-view .gen-tab { padding: 3px 8px; font-size: 13px; }
  .board-view .on-tabs { margin: 4px 0; }
  .board-view .on-mine { font-size: 12px; white-space: nowrap; overflow-x: auto; }
  .board-view .on-mine .btn { padding: 2px 6px; }
  .on-board-layout { gap: 10px; }
  .on-board-layout.on-has-podium { grid-template-columns: minmax(210px, 33%) minmax(0, 1fr); }
  .on-podiums { gap: 2px; padding: 2px 4px; }
  .on-podium-title { font-size: 12px; }
  .on-podium-steps { gap: 6px; }
  .on-podium { --on-step: 24px; font-size: 11px; }
  .on-podium-1 { --on-step: 42px; }
  .on-podium-3 { --on-step: 16px; }
  .on-podium-meta { gap: 2px; min-height: 18px; margin-bottom: 2px; }
  .on-podium-frame { width: 16px; height: 16px; }
  .on-podium-stage { height: 44px; }
  .on-podium-time { font-size: 13px; }
  .on-podium-rank { font-size: 16px; }
}

/* ---- 1.15 UI shell: top bar. Every item shares one height (--tb-h), one centre line and one gap; icons sit centred;
   labels never wrap, so items cannot grow or overlap. Order and content are unchanged. ---- */
.topbar { --tb-h: 40px; --tb-pad: 12px; --tb-font: 14px; gap: 8px; align-items: center; flex-wrap: nowrap; }
.topbar > * { box-sizing: border-box; flex: 0 0 auto; height: var(--tb-h); min-height: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 var(--tb-pad); font-size: var(--tb-font); line-height: 1; white-space: nowrap; vertical-align: middle; }
.topbar > .btn.small { min-width: var(--tb-h); padding: 0 calc(var(--tb-pad) - 2px); }
.topbar > .btn.small:active { transform: none; }
/* Icon-only buttons are exact squares. */
.topbar > #btn-sound, .topbar > #btn-full, .topbar > #btn-globe, .topbar > #btn-contact, .topbar > #btn-discord, .topbar > #btn-settings { width: var(--tb-h); padding: 0; }
.topbar .top-ic, .topbar img, .topbar svg, .topbar .icon { flex: 0 0 auto; display: block; vertical-align: middle; }
/* The older painted icons sit low in their canvas (empty rows above, few below), so a centred box shows the drawing low.
   Each one is moved by the offset of its opaque area from the canvas centre (percent of its own box, so any interface size
   and both the 1x and @2x files agree); the drawing's centre then lands on the button's centre. The 1.15 icons
   (fullscreen, language, mail, settings) and the 1.2 contact icon are drawn centred and need no offset. */
.topbar .top-ic[src*="top-profile"] { translate: 0 -14.0625%; }
.topbar .top-ic[src*="top-sound"] { translate: 1.5625% -10.9375%; }
.topbar .top-ic[src*="top-news"], .topbar .dust-ic { translate: 1.5625% -7.8125%; }
#user-pill { max-width: 220px; }
#user-pill > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Medium widths keep every item on one row: the news label collapses to its icon. */
@media (max-width: 1100px) { #btn-news > span { display: none; } .topbar > #btn-news { width: var(--tb-h); padding: 0; } #user-pill { max-width: 150px; } }
@media (max-width: 760px) and (min-height: 521px) {
  .topbar { --tb-h: 32px; --tb-pad: 8px; --tb-font: 13px; gap: 4px; left: auto; flex-wrap: nowrap; }
  #user-pill { max-width: 110px; }
}
/* Upright phones: one row of every item is wider than the screen (654 px at 390), so the bar spans the screen and wraps
   onto a second row, still right-aligned; nothing is hidden. */
@media (max-width: 600px) and (min-height: 521px) {
  .topbar { left: 6px; right: 6px; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .topbar > #daily-gift { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  #user-pill { max-width: 90px; }
  /* Screens under the bar start below its real bottom edge (set by G.UI.initChrome), whatever the number of rows. */
  #scr-goals, #scr-dex, #scr-upgrades, #scr-gacha, #scr-friends, #scr-rank, #scr-lobby, #scr-profile { padding-top: calc(var(--topbar-bottom, 74px) / var(--ui-scale, 1) + 8px); }
}
@media (max-height: 520px) {
  .topbar { --tb-h: 30px; --tb-pad: 8px; --tb-font: 13px; gap: 5px; }
  #user-pill { max-width: 120px; }
}

/* ---- 1.15 UI shell: main menu. The partner stays on the map at the left; the right half holds one column of three white,
   rounded group cards (Play, Pokémon, Other) stacked under each other, each with a blue tab on its top edge and its entries in
   two columns. An entry is not a framed button: icon, bold title and a small grey subtitle, with a light row highlight on
   hover and focus. Rules are scoped to .menu-group so the older .menu-list grids and compact rules do not apply. ---- */
#scr-menu { --mg-ink: #1B2A6B; --mg-muted: #7783a0; --mg-tab: #2c5fd6; --mg-hover: #eef4ff; }
.menu-groups { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.menu-group { position: relative; min-width: 0; background: #ffffff; color: var(--mg-ink); border-radius: 18px;
  box-shadow: 0 10px 28px rgba(5,12,32,.38); padding: 26px 18px 14px; container-type: inline-size; }
.menu-group-title { position: absolute; top: -13px; left: 20px; margin: 0; padding: 4px 14px; font-size: 14px; line-height: 1.2;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; color: #ffffff; background: var(--mg-tab);
  border-radius: 8px; box-shadow: 0 3px 0 #1B2A6B; text-shadow: 1px 1px 0 #1B2A6B; }
.menu-group .mg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.menu-group .menu-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
  min-height: 50px; padding: 6px 10px; border-radius: 12px; background: none; color: var(--mg-ink); text-shadow: none;
  font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.menu-group .menu-item::before { display: none; }
.menu-group .menu-item small { grid-column: 2; color: var(--mg-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.menu-group .menu-item .mi-ico img, .menu-group .menu-item .mi-ico svg, .menu-group .menu-item .mi-ico .discord-ic { width: 32px; height: 32px; }
.menu-group .menu-item:hover, .menu-group .menu-item:focus-visible { background: var(--mg-hover); outline: none; }
.menu-group .menu-item:focus-visible { box-shadow: inset 0 0 0 2px #7fb4ff; }
.menu-group .menu-item[hidden] { display: none; }
/* Play: a large Play entry with the Random dice inside its frame, the Endless line and Leaderboard under it; the side column
   lists Daily challenge, the event entry and the grey Matchmaking and Co-op tiles (owner sketch 27.10). */
.mg-play-main, .mg-play-side { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.mg-play-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.menu-group .menu-item.play { flex: 1 1 auto; min-width: 0; font-size: 34px; min-height: 66px; grid-template-columns: 44px minmax(0, 1fr); color: var(--mg-ink); }
.menu-group .menu-item.play .mi-ico img, .menu-group .menu-item.play .mi-ico svg { width: 40px; height: 40px; }
.menu-group .menu-item.play small { font-size: 13px; white-space: normal; line-height: 1.2; }
.menu-group .menu-item.mg-random { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 0; height: 34px;
  padding: 0 10px; border-radius: 17px; background: #e6efff; font-size: 13px; }
.menu-group .menu-item.mg-random:hover, .menu-group .menu-item.mg-random:focus-visible { background: #d3e3ff; }
.mg-dice svg { display: block; width: 20px; height: 20px; }
.mg-random-label:empty { display: none; }
/* Endless: one small line in the normal colour, disabled (no hover). */
.menu-group .menu-item.mg-soon { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 66px; font-size: 14px;
  cursor: default; opacity: 1; filter: none; }
.menu-group .menu-item.mg-soon .mi-ico { display: none; }
.menu-group .menu-item.mg-soon small { color: var(--mg-ink); font-size: 14px; font-weight: 400; }
.menu-group .menu-item.mg-soon small::before { content: "\00B7"; margin-right: 6px; }
.menu-group .menu-item.mg-soon:hover { background: none; }
/* Run statistics under the partner card. */
.menu-stats { margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: rgba(10,20,50,.7); font-size: 13px; line-height: 1.45;
  color: var(--muted); text-align: center; text-shadow: 1px 1px 0 var(--shadow); }
.menu-stats:empty { display: none; }

/* Desktop and laptops: left half for the partner, right half for the menu column (about 45% of the screen, bounded and centred
   in its half on wide monitors). #scr-menu is zoomed by --ui-scale, which also scales vw inside it, so screen-relative sizes
   divide it back out. */
@media (min-height: 521px) {
  #scr-menu { justify-content: center; }
  #scr-menu .menu-left { flex: 1 1 50%; min-width: 0; padding: 70px 16px 24px; }
  #scr-menu .menu-right { flex: 1 1 50%; min-width: 0; width: auto; align-items: center; padding: 70px 16px 24px; background: none; overflow: visible; }
  #scr-menu .menu-groups { width: min(100%, calc(45vw / var(--ui-scale, 1)), 760px); }
  #scr-menu .menu-left .logo .t1 { font-size: clamp(28px, calc(4vw / var(--ui-scale, 1)), 64px); white-space: nowrap; }
  #scr-menu #menu-partner { width: min(260px, calc(20vw / var(--ui-scale, 1))); height: auto; }
}
@media (max-height: 860px) and (min-height: 521px) {
  .menu-groups { gap: 24px; }
  .menu-group { padding: 22px 14px 10px; }
  .menu-group .menu-item { min-height: 44px; font-size: 17px; padding: 4px 8px; }
  .menu-group .menu-item.play { font-size: 28px; min-height: 54px; }
}
/* Upright tablets: partner on top, the column of cards below. */
@media (max-aspect-ratio: 1/1) and (min-height: 521px) {
  #scr-menu { flex-direction: column; justify-content: flex-start; align-items: center; overflow: hidden; }
  #scr-menu .menu-left { flex: 0 0 auto; padding: 70px 12px 0; }
  #scr-menu .menu-right { flex: 0 0 auto; width: 100%; padding: 22px 14px 8px; }
  #scr-menu .menu-groups { width: min(100%, 720px); gap: 24px; }
  #scr-menu .menu-stats { display: none; }
  #scr-menu #menu-partner { height: min(14vh, 160px); width: auto; }
  #scr-menu .menu-left .logo .t1 { font-size: clamp(26px, 6vw, 44px); }
  #scr-menu .partner-card { margin-top: 4px; }
  .menu-group { padding: 20px 12px 8px; }
  .menu-group .menu-item { min-height: 40px; font-size: 16px; padding: 3px 8px; }
  .menu-group .menu-item.play { font-size: 26px; min-height: 50px; }
}
/* Phones held sideways: Play across the top, Pokémon and Other side by side under it, one-line entries. */
@media (max-height: 520px) {
  #scr-menu .menu-right { width: min(640px, calc(69vw / var(--ui-scale, 1))); padding: 48px 6px 6px; }
  #scr-menu .menu-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 8px; }
  .mg-play { grid-column: 1 / -1; }
  .menu-group { padding: 14px 6px 5px; border-radius: 12px; box-shadow: 0 5px 14px rgba(5,12,32,.38); }
  .menu-group-title { top: -10px; left: 10px; font-size: 10px; padding: 2px 8px; border-radius: 6px; box-shadow: 0 2px 0 #1B2A6B; }
  .menu-group .mg-grid { gap: 0 4px; }
  .menu-group .menu-item { min-height: 33px; padding: 2px 3px; font-size: 12px; letter-spacing: 0; grid-template-columns: 18px minmax(0, 1fr); column-gap: 4px; border-radius: 8px; }
  .menu-group .menu-item small { display: none; }
  .menu-group .menu-item .mi-ico img, .menu-group .menu-item .mi-ico svg, .menu-group .menu-item .mi-ico .discord-ic { width: 18px; height: 18px; }
  .menu-group .menu-item.play { font-size: 20px; min-height: 36px; grid-template-columns: 22px minmax(0, 1fr); }
  .menu-group .menu-item.play .mi-ico img, .menu-group .menu-item.play .mi-ico svg { width: 22px; height: 22px; }
  .menu-group .menu-item.mg-random { height: 34px; padding: 0 8px; }
  .mg-random-label { display: none; }
  .mg-dice svg { width: 18px; height: 18px; }
  .menu-group .menu-item.mg-soon { min-height: 33px; padding: 2px 4px 2px 31px; font-size: 12px; }
  .menu-group .menu-item.mg-soon small { display: inline; font-size: 12px; }
  .menu-stats { display: none; }
  .mg-play-side { gap: 0; }
}
/* The shortest phones (740x360 class): long words such as "Лаборатория" or "Brutkasten" still fit their half-card. */
@media (max-height: 400px) {
  .mg-pokemon .menu-item, .mg-other .menu-item { font-size: 11px; }
  .mg-pokemon, .mg-other { padding-left: 4px; padding-right: 4px; }
  .mg-pokemon .mg-grid, .mg-other .mg-grid { grid-template-columns: repeat(2, auto); justify-content: space-between; }
}
/* Phones held sideways: both columns stay inside the notch and the home-indicator strip, and the menu scrolls when the window
   is shorter than its content (Safari with its toolbar, split screen). The insets are divided by --ui-scale because #scr-menu is zoomed.
   The right column gives up only a sliver of its width (12% of the insets) and the outer paddings absorb the rest, so labels keep their words. */
@media (max-height: 520px) {
  #scr-menu { align-items: flex-start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    padding-left: calc(env(safe-area-inset-left, 0px) / var(--ui-scale, 1)); padding-right: calc(env(safe-area-inset-right, 0px) / var(--ui-scale, 1)); }
  #scr-menu .menu-left, #scr-menu .menu-right { box-sizing: border-box; min-height: 100%; }
  #scr-menu .menu-right { width: min(640px, calc((69vw - (env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)) * 0.12) / var(--ui-scale, 1)));
    overflow: visible; padding-right: max(0px, calc(6px - env(safe-area-inset-right, 0px) / var(--ui-scale, 1))); padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) / var(--ui-scale, 1))); }
  #scr-menu .menu-left { padding-left: max(0px, calc(8px - env(safe-area-inset-left, 0px) / var(--ui-scale, 1))); padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) / var(--ui-scale, 1))); }
}
/* Narrow cards (laptops at a large interface size): tighter entries so labels keep their words. */
@container (max-width: 420px) {
  .menu-group .mg-grid { gap: 2px 8px; }
  .menu-group .menu-item { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; padding-left: 6px; padding-right: 6px; }
  .menu-group .menu-item .mi-ico img, .menu-group .menu-item .mi-ico svg, .menu-group .menu-item .mi-ico .discord-ic { width: 24px; height: 24px; }
  .menu-group .menu-item.play { font-size: 26px; }
  .mg-random-label { display: none; }
}

/* 1.15: Mail in the top bar with a red dot for unread mail. */
#btn-mail { position: relative; }
#btn-mail .mail-dot { display: none; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff5f6d; box-shadow: 0 0 0 2px var(--shadow); }
#btn-mail.unread .mail-dot { display: block; }
.topbar > #btn-mail { width: var(--tb-h); padding: 0; }
/* Wave 1: rich news articles — subheadings, lists with bold keywords and info / important callouts. */
.news-article .news-h { color: var(--gold); font-size: 16px; margin: 16px 0 6px; }
.news-article .news-ul { margin: 0 0 10px; padding-left: 20px; }
.news-article .news-ul li { margin: 4px 0; line-height: 1.4; }
.news-article b { color: var(--edge); }
.news-note { position: relative; margin: 10px 0 12px; padding: 8px 12px 8px 40px; border-radius: 8px; border-left: 4px solid #4fb4ff; background: rgba(79,180,255,.12); line-height: 1.4; }
.news-note::before { content: 'i'; position: absolute; left: 10px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: #4fb4ff; color: #0b1020; font-weight: 700; font-size: 13px; line-height: 20px; text-align: center; text-shadow: none; }
.news-note.warn { border-left-color: #ffb347; background: rgba(255,179,71,.13); }
.news-note.warn::before { content: '!'; background: #ffb347; }
.news-article { overflow-wrap: anywhere; }
/* Play group: matchmaking and co-op, announced but not available yet (js/ui/menu.js). Two compact grey tiles share one
   row in the side column. They take focus and only show a hint. */
/* Both Play columns start at the top: Play sits level with the first side entry instead of drifting down. */
.mg-play-main, .mg-play-side { justify-content: flex-start; }
/* Random is an icon-only dice inside the Play tile's frame; its full name stays in title and aria-label. */
.mg-play-row { position: relative; }
.menu-group .menu-item.play { font-size: 30px; min-height: 58px; padding-right: 50px; }
.menu-group .menu-item.mg-random { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 40px; height: 40px;
  padding: 0; justify-content: center; border-radius: 50%; }
.mg-random-label { display: none; }
/* Narrow cards keep their smaller Play label (the container rule above). */
@container (max-width: 420px) {
  .menu-group .menu-item.play { font-size: 26px; padding-right: 42px; }
  .menu-group .menu-item.mg-random { right: 4px; width: 34px; height: 34px; }
}
/* Other: two fixed columns, so entries the server shows or hides never push the rest across; the friend entries head the
   right column above PC. */
.mg-other .mg-grid { grid-auto-flow: row dense; }
.mg-other .mg-grid > [data-go="gacha"], .mg-other .mg-grid > [data-go="atlas"], .mg-other .mg-grid > [data-go="goals"],
.mg-other .mg-grid > [data-go="discord"], .mg-other .mg-grid > [data-go="mail"] { grid-column: 1; }
.mg-other .mg-grid > [data-go="trade"], .mg-other .mg-grid > [data-go="friendlist"], .mg-other .mg-grid > [data-go="friends"],
.mg-other .mg-grid > [data-go="pc"], .mg-other .mg-grid > [data-go="notebook"] { grid-column: 2; }
.mg-unavail-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
.menu-group .menu-item.mg-unavail { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 0;
  padding: 4px 8px; background: #f1f3f7; color: var(--mg-muted); font-size: 14px; line-height: 1.2; text-align: left; cursor: default; }
.menu-group .menu-item.mg-unavail .mi-ico { display: none; }
/* Half a column is narrow: the label and the caption wrap instead of ending in an ellipsis. */
.menu-group .menu-item.mg-unavail > span, .menu-group .menu-item.mg-unavail small { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.menu-group .menu-item.mg-unavail small { color: var(--mg-muted); font-size: 11px; }
.menu-group .menu-item.mg-unavail:hover { background: #f1f3f7; }
.menu-group .menu-item.mg-unavail:focus-visible { background: #e6e9f0; }
/* Portrait screens scroll the menu, so the tiles stack there instead of squeezing two labels into half a column. */
@media (max-aspect-ratio: 1/1) { .mg-unavail-row { grid-template-columns: minmax(0, 1fr); } }
/* Phones held sideways: one-line entries, so the tiles take the same touch height as the rest of the menu. */
@media (max-height: 520px) {
  .menu-group .menu-item.mg-unavail { min-height: 33px; padding: 2px 4px; font-size: 12px; border-radius: 8px; }
  .menu-group .menu-item.play { font-size: 18px; min-height: 34px; padding-right: 38px; }
  .menu-group .menu-item.mg-random { right: 3px; width: 30px; height: 30px; }
}
/* The one co-op switch is G.CoopUIEntry: once the server enables co-op and its entry shows, these tiles step aside. */
#scr-menu .mg-play:has(#pt-coop-entry:not([hidden])) .mg-unavail-row { display: none; }
.w3-dps-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.w3-dps-scroll .rs-table th{white-space:normal}

/* Keep Vietnamese letters and tone marks in one system face. */
html:lang(vi) { --font: "Segoe UI", system-ui, sans-serif; }

/* Portrait topbar: preserve every control while allowing additional rows. */
@media (max-width:650px) and (orientation:portrait) {
  .topbar { left:6px; right:6px; flex-wrap:wrap; justify-content:flex-end; row-gap:4px; max-width:calc(100% - 12px); }
  .topbar > #user-pill { max-width:180px; min-width:140px; }
  #user-pill > span[translate="no"] { min-width:8ch; overflow:hidden; text-overflow:ellipsis; }
  #scr-goals, #scr-dex, #scr-upgrades, #scr-gacha, #scr-friends, #scr-rank, #scr-lobby, #scr-profile { padding-top:calc(var(--topbar-bottom,74px) / var(--ui-scale,1) + 8px); }
}
/* 1.3.1: at 360 px the 140 px nickname floor pushed Settings onto a third row. Up to 380 px the pill keeps its eight
   characters within 120 px, so the bar stays two rows. */
@media (max-width:380px) and (orientation:portrait) { .topbar > #user-pill { min-width:0; max-width:120px; } }
/* 1.3.1: in half a column of an upright phone the 34 px Play title cut even "Play" and "Играть" (at 412 px too); it
   scales with the screen there, so whole words fit and no language needs an abbreviation. 4.8vw leaves the longest
   title, German, a few pixels of room at 360 px. */
@media (max-width:430px) and (orientation:portrait) {
  .menu-group .menu-item.play { font-size:min(34px, 4.8vw); grid-template-columns:28px minmax(0, 1fr); }
  .menu-group .menu-item.play .mi-ico img, .menu-group .menu-item.play .mi-ico svg { width:26px; height:26px; }
}
.lab-bans .chip.w3-9-starter-locked:disabled { opacity:1; color:var(--muted); background:#14213a; border:2px dashed #8295b5; box-shadow:none; cursor:not-allowed; }
.w3-9-starter-hint { display:block; flex-basis:100%; color:var(--muted); }
/* Play group layout (RC 1.3, owner's screenshot): Play, Endless and the grey Matchmaking Duel and Co-op tiles on the left;
   Daily challenge, Leaderboard and Gengar's Cave on the right. Both columns share the group's three rows, so entries side
   by side keep one height and one centre line; an entry the server or the event hides leaves its row empty instead of
   pulling the others up. Without subgrid the columns stack as before. */
@supports (grid-template-rows: subgrid) {
  .mg-play .mg-grid { grid-template-rows: repeat(3, auto); }
  /* gap: normal takes the group's row gap, so both columns step down together; one full-width column keeps them equal. */
  .mg-play .mg-play-main, .mg-play .mg-play-side { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); gap: normal; align-items: stretch; }
  .mg-play-main > .mg-play-row { grid-row: 1; }
  .mg-play-main > [data-go="endless"] { grid-row: 2; }
  .mg-play-main > .mg-unavail-row { grid-row: 3; }
  .mg-play-side > [data-go="daily"] { grid-row: 1; }
  .mg-play-side > [data-go="board"], .mg-play-side > [data-go="rank"] { grid-row: 2; }
  .mg-play-side > [data-go="cave"] { grid-row: 3; }
  /* An entry stretched to a taller neighbour keeps its label and caption together, centred like the rest. */
  .mg-play-main > .menu-item, .mg-play-side > .menu-item { align-content: center; }
}
/* Every grey tile stays a comfortable touch target, stacked or side by side; slim side padding keeps "Not available for
   now" on one line in half a column, so the tile row is no taller than the entries next to it need. */
.menu-group .menu-item.mg-unavail { min-height: 30px; padding-left: 6px; padding-right: 6px; }
.menu-group .menu-item.mg-unavail small { font-size: 10px; }

/* Researched but not collected: an original check mark, without external artwork. */
.w3-10-researched{display:inline-block;width:14px;height:14px;border:1px solid #b9efff;border-radius:3px;background:#16445d;position:relative;vertical-align:middle;flex:none}
.w3-10-researched::after{content:'';position:absolute;width:7px;height:4px;border-left:2px solid #b9efff;border-bottom:2px solid #b9efff;transform:rotate(-45deg);left:3px;top:3px}
.cell>.w3-10-researched{position:absolute;top:18px;left:5px}
.w3-10-legend{margin:6px 0;line-height:1.35}

.w3-11-password > .box { width:min(480px,100%); max-height:100%; overflow-y:auto; }
.w3-11-password form { display:flex; flex-direction:column; gap:12px; }
.w3-11-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.w3-11-password .field { box-sizing:border-box; width:100%; min-width:0; }
.w3-11-password textarea { min-height:96px; overflow-wrap:anywhere; resize:vertical; }
.w3-11-password p, .w3-11-password label, .w3-11-password button { overflow-wrap:anywhere; }
.w3-11-password .row { gap:8px; }
/* 1.3.1 (D-346): the official site line. It sits on its own lines just above the menu credits, in the left half beside the
   menu cards, so the credits line keeps its place. Upright screens stack the menu cards down to the credits line, so there
   it steps aside: the sign-in screen and Settings > About still carry it. */
.credits-line .credits-official { display: block; line-height: 1.2; margin-bottom: 1px; max-width: calc(50vw - 28px); }
@media (max-aspect-ratio: 1/1) { .credits-line .credits-official { display: none; } }
/* js/ui/contact-ui.js sets this wherever the copy would touch the menu or the top bar (larger interface sizes, short windows). */
.credits-line .credits-official.official-off { display: none; }
.credits-line .credits-official a, .login-official a, .official-about a { color: inherit; }
.login-official { margin-top: 6px; }