/* ============================================================
   WORLDDEX — Aetheria UI
   Single-screen dashboard. No page scrolling on any viewport.
   ============================================================ */

:root{
  /* Brand */
  --red:#EE1515;      --red-dk:#B00C0C;   --red-lt:#FF4E4E;
  --yellow:#FFCB05;   --yellow-dk:#D9A800;
  --blue:#2A75BB;     --blue-dk:#1B4F86;

  /* Neutrals */
  --ink:#0E1116;      --ink-2:#161B23;    --ink-3:#1E252F;
  --line:#2A3340;     --txt:#EEF2F7;      --txt-dim:#9AA7B8;
  /* Three names that were used but never defined, so the rules
     reaching for them rendered with no colour at all - the Lottery
     drew its winning numbers and its match count as plain text. Two
     are aliases of names that already existed under a different
     spelling; --gold is the value the seven other uses of it already
     pass as their fallback. */
  --dim:#9AA7B8;      --txt-faint:#9AA7B8;  --gold:#e8c96a;
  /* The highlight of the Rearrange mode, which reached for --pri and
     found nothing: its dashed edge and the drop marker drew in no
     colour at all. And a fourth step of ink, for things raised above
     a card. */
  --pri:#5B8CFF;      --ink-4:#273041;

  /* Semantic */
  --shiny:#FFD54A;    --shadow:#9B5CFF;   --ok:#3FD98A;

  /* Type colours. Fire, Water, Grass and Electric are the brighter
     values of the project palette (CLAUDE.md, the same ones the wiki
     uses): the summary and the PC light a Pokemon in its own types,
     and the duller four sank into the dark glass there. */
  --t-normal:#A8A77A; --t-fire:#FF4422;   --t-water:#3399FF;
  --t-electric:#FFCC33;--t-grass:#77CC55; --t-ice:#96D9D6;
  --t-fighting:#C22E28;--t-poison:#A33EA1;--t-ground:#E2BF65;
  --t-flying:#A98FF3; --t-psychic:#F95587;--t-bug:#A6B91A;
  --t-rock:#B6A136;   --t-ghost:#735797;  --t-dragon:#6F35FC;
  --t-dark:#705746;   --t-steel:#B7B7CE;  --t-fairy:#D685AD;

  /* Metrics */
  --r:14px; --r-sm:9px;
  --glass:rgba(22,27,35,.72);
  --glass-brd:rgba(255,255,255,.09);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --sidebar-w:64px;
  --sidebar-w-open:240px;
  /* The chat, docked down the right; and folded to its rail. */
  --chat-w:clamp(300px,25vw,360px);
  --chat-w-folded:60px;
  --tabbar-h:0px;

  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Headings and numbers. Rubik is served from this site, not from a
     font host: a player's browser asks nobody else for anything. */
  --display:'Rubik',var(--sans);
  --mono:'SF Mono',Consolas,'Courier New',monospace;
}

@font-face{
  font-family:'Rubik';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/rubik-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  overflow:hidden;               /* hard no-scroll */
  overscroll-behavior:none;
}

/* ══════════ NOTHING GETS SELECTED BY ACCIDENT ══════════

   A clicker is played by clicking fast, and a fast click that drags
   even slightly is a text selection: sprites end up outlined in blue,
   labels highlight, and the next click clears it instead of playing.

   Selection is switched off everywhere and given back only where it
   is worth having — chat messages somebody might want to copy, and
   any field they type into. This is presentation only: buttons stay
   buttons, and `pointer-events` is untouched, so everything remains
   as clickable as it was.

   Images get `-webkit-user-drag` as well: without it a sprite can be
   picked up and dragged as a file, which looks like the game broke. */
body{
  -webkit-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
img{-webkit-user-drag:none;user-drag:none}

/* Text people may legitimately want to take with them: what was said
   in chat, what happened in a battle, and anything they typed. */
.chat__log,.msg,.blog,.blog__line,
input,textarea,select,[contenteditable]{
  -webkit-user-select:text;-ms-user-select:text;user-select:text;
}

body{
  font-family:var(--sans);
  color:var(--txt);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;display:block}

/* ── Animated Emerald background ─────────────────────── */
.emerald{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#78C8F8 0%,#A8E0F8 45%,#88C070 46%,#78B060 100%);
  image-rendering:pixelated;
}
/* Each layer is the 1920x1200 tile repeated, translated one tile-width.

   The height used to be forced to 100%, which stretched a landscape
   tile over a portrait screen: on a phone the sky was pulled to four
   times its proper height, the horizon ended up in the wrong place,
   and the three layers no longer lined up with each other. The art
   keeps its own proportions now, and the strip is simply taller than
   the viewport where it has to be. */
.emerald__layer{
  position:absolute;left:0;top:0;
  height:100%;
  background-repeat:repeat-x;
  background-size:auto 100%;
  animation:emeraldSlide linear infinite;
  will-change:transform;

  /* Wide enough for the screen plus one full tile of travel.

     `width:200%` was measured against the viewport, which works on a
     desktop and fails badly on a phone: at 360px wide the strip was
     720px while the slide moves it 1280px, so a third of the way
     through every loop the background simply ran out and tore. The
     width follows the tile now, not the screen. */
  width:calc(100vw + 100vh * 1.6 + 4px);
}
/* One tile-width per loop. With `background-size: auto 100%` the
   drawn width follows the viewport height (1920/1200 of it), so the
   slide is expressed the same way — a fixed 1920px step would tear
   the seam open on any screen that is not exactly 1200px tall. */
@keyframes emeraldSlide{
  from{transform:translateX(calc(-100vh * 1.6))}
  to{transform:translateX(0)}
}
.emerald__sky{top:0;opacity:.95}
.emerald__sea{top:0;opacity:.9}
/* The grass tile is 1200px tall with the ground band near its base, so pull
   it down until only that band shows along the bottom of the viewport. */
.emerald__grass{top:0;z-index:3;transform-origin:bottom}

.emerald__sprite{
  position:absolute;z-index:2;
  image-rendering:pixelated;
  pointer-events:none;
}
/* Riders sit on the grass line, scaled down from the 1920px source art.
   `bottom` doubles as depth: the lower a sprite sits, the nearer it is,
   so it is also drawn larger. May was smaller than Brendan while
   standing closer to the camera, which read as her being far away.

   Everything that travels starts and ends fully off-screen — see the
   note on the keyframes below — so `left` only sets the lane, not a
   visible starting spot. */
.emerald__brendan{bottom:20%;left:0;width:84px;
  animation:emeraldRideL 26s linear infinite}
.emerald__may{bottom:16%;left:0;width:96px;
  animation:emeraldRideL 26s linear infinite -13s}
/* Torchic runs at May's heel: same lane, same speed, same offset, a
   step behind her. Without the travel it was left standing alone in
   the middle of the field.

   Two animations cannot both drive `transform` — the later one wins —
   so the travel goes on a wrapper and only the hop is left here. */
.emerald__torchic{position:absolute;inset:auto auto 0 0;width:30px;
  animation:emeraldHop 0.5s ease-in-out infinite}
.emerald__runner{position:absolute;bottom:15%;left:0;z-index:2;
  pointer-events:none;
  animation:emeraldRideL 26s linear infinite -12.55s}
.emerald__manectric{bottom:21%;left:0;width:62px;
  animation:emeraldPace 19s linear infinite -6s}
.emerald__latios{top:12%;right:12%;width:190px;opacity:.85;animation:emeraldGlide 5s ease-in-out infinite}
.emerald__latias{top:20%;right:26%;width:160px;opacity:.85;animation:emeraldGlide 5s ease-in-out infinite 1s}

/* The scene on a phone.

   The sprites are sized in pixels against a screen measured in
   percentages. On a desktop a 190px Latios is a bird in the sky; on a
   360px phone it is half the width of the screen, parked over the
   counters. The riders had the same problem lower down, ending up on
   top of the chat.

   Everything shrinks and moves out to the edges, and the two
   legendaries go up into the corner where there is nothing else. */
@media (max-width:620px){
  .emerald__latios{width:96px;top:7%;right:4%;opacity:.6}
  .emerald__latias{width:80px;top:15%;right:22%;opacity:.6}
  .emerald__brendan{width:52px;bottom:24%}
  .emerald__may{width:58px;bottom:21%}
  .emerald__manectric{width:40px;bottom:25%}
  .emerald__torchic{width:20px}
  .emerald__runner{bottom:20%}
  /* A little more veil: the art is busier per pixel down here. */
  .emerald__veil{
    background:
      radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.26),rgba(0,0,0,.6) 78%),
      linear-gradient(180deg,rgba(6,18,14,.5),rgba(6,18,14,.36) 40%,rgba(6,18,14,.62));
  }
}

/* Small phones: the legendaries are scenery, not content. */
@media (max-width:400px){
  .emerald__latios,.emerald__latias{display:none}
}

@keyframes emeraldBob{50%{transform:translateY(-4px)}}
/* Riders cross the screen instead of standing still.
   The source sprites all face LEFT, so moving right needs scaleX(-1)
   and moving left needs none — otherwise they ride backwards.

   Both ends must be off-screen. These used to begin at +20vw, which is
   inside the viewport: on every loop the sprite reappeared in the
   middle of the field out of nowhere instead of walking in from the
   edge. Starting past 100vw means it always enters from the right and
   leaves past the left. */
@keyframes emeraldRideR{
  from{transform:translateX(-30vw) scaleX(-1)}
  to{transform:translateX(130vw) scaleX(-1)}
}
@keyframes emeraldRideL{
  from{transform:translateX(130vw)}
  to{transform:translateX(-30vw)}
}
@keyframes emeraldHop{50%{transform:translateY(-7px)}}
/* Same rule: enters from off the right edge, leaves past the left. */
@keyframes emeraldPace{
  from{transform:translateX(130vw)}
  to{transform:translateX(-30vw)}
}
@keyframes emeraldGlide{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-16px) scale(1.06)}
}

/* Keeps the glass panels legible over bright pixel art. */
.emerald__veil{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.18),rgba(0,0,0,.52) 78%),
    linear-gradient(180deg,rgba(6,18,14,.42),rgba(6,18,14,.28) 40%,rgba(6,18,14,.55));
}

@media (prefers-reduced-motion:reduce){
  .emerald__layer,.emerald__sprite,.emerald__runner{animation:none!important}
}

/* ── App shell ───────────────────────────────────────── */
/* Three columns on a desktop: the menu, the stage, and the chat
   docked down the right over the full height. The header runs over
   the stage and the chat together, so the Ball keeps the middle of
   the screen and the chat has room to be read rather than being a
   strip along the bottom. Folding the chat narrows its column to a
   rail of channels. */
#app{
  position:relative;z-index:1;
  height:100vh;height:100dvh;
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--chat-w);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "side head head"
    "side main chat";
  gap:10px;
  padding:10px;
  overflow:hidden;
}
#app.is-chat-folded{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--chat-w-folded)}

/* ══════════ HEADER ══════════ */
.topbar{
  grid-area:head;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px 8px 10px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  min-height:0;
  /* Above the stage and the chat, so the two menus that drop out of
     it are not drawn underneath them. */
  position:relative;z-index:30;
}
.topbar__left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar__right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.routenav{display:flex;align-items:center;gap:4px;flex-shrink:0;min-width:0}
.routenav__btn{
  width:38px;height:38px;padding:9px;flex-shrink:0;
  background:var(--ink-3);border:1px solid var(--line);border-radius:11px;
  color:var(--txt);transition:.16s;
}
.routenav__btn:hover:not(:disabled){border-color:var(--txt-dim);transform:translateY(-1px)}
.routenav__btn:active:not(:disabled){transform:translateY(0)}
.routenav__btn:disabled{opacity:.3;cursor:not-allowed}
/* The two jumps: one to the near end of the road, one to the far
   end. Both red, because both move you a long way at once. */
.routenav__btn--accent,
.routenav__btn--first{background:linear-gradient(150deg,var(--red),var(--red-dk));border-color:var(--red-lt);color:#fff}
.routenav__btn--accent:hover:not(:disabled),
.routenav__btn--first:hover:not(:disabled){filter:brightness(1.18)}

/* The place name, between the arrows. A button now: it opens what is
   about where you are standing. */
.location{position:relative;min-width:0}
.location__btn{
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:168px;max-width:300px;padding:3px 12px;border-radius:12px;
  text-align:left;transition:background .15s;
}
.location__btn:hover,.location__btn[aria-expanded="true"]{background:rgba(255,255,255,.06)}
.location__label{
  display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700
}
.location__name{
  display:block;max-width:100%;
  font:700 clamp(16px,1.7vw,21px)/1.15 var(--display);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.location__terrain{
  display:flex;align-items:center;gap:4px;max-width:100%;
  font-size:11.5px;color:var(--txt-dim);white-space:nowrap
}
.location__terrain > span{overflow:hidden;text-overflow:ellipsis}
.location__chev{width:12px;height:12px;flex-shrink:0;transition:transform .18s}
.location__btn[aria-expanded="true"] .location__chev{transform:rotate(180deg)}

/* A small menu that drops out of the header: the place menu and the
   account menu. One look for both. */
.popmenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:80;
  min-width:250px;padding:6px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);
  animation:popin .14s ease-out;
}
.popmenu[hidden]{display:none}
.popmenu--right{left:auto;right:0}
@keyframes popin{from{opacity:0;transform:translateY(-4px)}}
.popmenu__head{
  display:flex;align-items:center;gap:11px;
  padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)
}
.popmenu__head b{display:block;font:700 15px var(--display)}
.popmenu__head small{display:block;font-size:11.5px;color:var(--txt-dim);margin-top:1px}
.popmenu__item{
  display:flex;align-items:center;gap:12px;width:100%;min-height:42px;
  padding:7px 10px;border-radius:10px;text-align:left;
  font-size:13.5px;font-weight:500;transition:background .12s
}
.popmenu__item:hover,.popmenu__item:focus-visible{background:var(--ink-3)}
.popmenu__ico{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;color:var(--txt-dim)}
.popmenu__ico img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.popmenu__ico svg{width:19px;height:19px}
.popmenu__item--danger,.popmenu__item--danger .popmenu__ico{color:#FF8A80}
.popmenu__sep{border:0;border-top:1px solid var(--line);margin:4px 6px}

/* Who is about and the time, side by side. */
.hstatus{display:flex;align-items:center;gap:6px;min-width:0}

.iconbtn{
  width:40px;height:40px;padding:7px;flex-shrink:0;
  background:var(--ink-3);border:1px solid var(--line);border-radius:12px;
  transition:.16s;
}
.iconbtn:hover{transform:translateY(-2px);border-color:var(--txt-dim)}
.iconbtn svg{stroke-width:1.7}
.ico-img{
  width:100%;height:100%;object-fit:contain;image-rendering:pixelated;
  display:block;
}
.iconbtn--rotom{padding:4px}
.iconbtn--rotom:hover .ico-img{transform:scale(1.08);transition:transform .16s}
.iconbtn--rotom{color:#FF7B54}
.iconbtn--rotom:hover{background:rgba(255,123,84,.14);border-color:#FF7B54}
.iconbtn--dex{color:var(--red-lt)}
.iconbtn--dex:hover{background:rgba(238,21,21,.14);border-color:var(--red-lt)}
.ico-gear{stroke-width:1.6}

/* The rankings button: a trophy reads better than a single gym badge. */
.ico-trophy{stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.iconbtn--trophy{color:var(--yellow)}
.iconbtn--trophy:hover{
  background:rgba(255,203,58,.14);border-color:var(--yellow);
}

/* The Pokedex artwork is a wide illustration; a little inset keeps it
   from touching the button edge. */
.iconbtn--dex{padding:5px}
.iconbtn--dex .ico-img{image-rendering:auto}

/* ── The trainer ─────────────────────────────────────
   Their profile Pokémon in a ring, with a dot that says whether the
   game is saving to the server. Everything about the account opens
   from it. */
.account{position:relative;flex-shrink:0}
.account__btn{
  position:relative;width:42px;height:42px;padding:0;border-radius:50%;
  display:grid;place-items:center;transition:transform .15s;
}
.account__btn:hover{transform:translateY(-1px)}
.account__btn .pfp{width:42px;height:42px}
.account__btn::after{
  content:'';position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;background:var(--ok);border:2px solid var(--ink-2)
}
.account.is-offline .account__btn::after{background:var(--txt-dim)}
.account.is-guest .account__btn::after{background:var(--yellow)}
.account__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.account__name{font:700 15px var(--display)}
.account__sync{color:var(--txt-dim)}

/* A trainer's profile picture: a Pokémon sprite, framed in a ring of
   its own type colour. Used in the header, in the chat and on the
   card a name opens. Before anything is chosen it is the player's
   first letter, and the lead of their team once the server says who
   that is. */
.pfp{
  --pfp-c:var(--blue);
  width:34px;height:34px;flex-shrink:0;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 66%,
    color-mix(in srgb,var(--pfp-c) 46%,var(--ink-3)),var(--ink-3) 76%);
  border:1.5px solid color-mix(in srgb,var(--pfp-c) 68%,transparent);
  font:700 14px var(--display);color:var(--txt);
}
.pfp img{
  width:130%;height:130%;max-width:none;margin-top:-6%;
  object-fit:contain;image-rendering:pixelated;
}
.pfp--lg{width:52px;height:52px;font-size:19px}
.pfp--xl{width:68px;height:68px;font-size:24px;border-width:2px}

/* How many trainers are playing right now. The dot pulses so the
   number reads as live rather than as a statistic. */
.online{
  display:flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:var(--ink-3);border:1px solid var(--line);
  font-size:.72rem;white-space:nowrap;
}
.online[hidden]{display:none}

/* Day or night, beside the online count and shaped like it. The two
   states are told apart by more than the word: warm for day, cool for
   night, so it reads at a glance rather than word by word. */
.daynight{
  display:flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:var(--ink-3);border:1px solid var(--line);
  font-size:.72rem;white-space:nowrap;cursor:default;
  color:var(--shiny);
}
.daynight[hidden]{display:none}
.daynight__ico{
  width:15px;height:15px;object-fit:contain;image-rendering:pixelated;
  flex-shrink:0;
}
.daynight__label{font-weight:700;letter-spacing:.02em}
/* The clock. Tabular figures so the seconds tick in place rather than
   shuffling the whole header sideways every time a 1 becomes a 0. */
.daynight__clock{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:600;letter-spacing:.02em;
  opacity:.85;
  padding-left:6px;margin-left:1px;
  border-left:1px solid var(--line);
}
/* During the Lycanroc Dusk hour, and only then. The clock is the
   thing that changes, so the clock is the thing that says so. */
.daynight.is-dusk .daynight__clock{
  color:#fbbf24;opacity:1;
  text-shadow:0 0 8px rgba(251,191,36,.5);
}
.daynight.is-night{
  color:#a5b4fc;
  border-color:rgba(165,180,252,.32);
  background:linear-gradient(180deg,rgba(99,102,241,.14),var(--ink-3));
}
.online__dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:#4ade80;box-shadow:0 0 7px rgba(74,222,128,.85);
  animation:onlinePulse 2.4s ease-in-out infinite;
}
@keyframes onlinePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}
.online__n{font-weight:800;font-variant-numeric:tabular-nums;color:var(--txt)}
.online__label{color:var(--txt-dim)}
/* Nobody about: the dot goes quiet rather than claiming a heartbeat. */
.online.is-empty .online__dot{
  background:var(--txt-dim);box-shadow:none;animation:none;
}
@media (prefers-reduced-motion:reduce){
  .online__dot{animation:none}
}

/* How close the current route is to opening the next. Sits under the
   click hint, quiet enough not to compete with the Poke Ball. */
.routeprog{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  margin-top:6px;width:min(320px,80%);
}
.routeprog[hidden]{display:none}
.routeprog__bar{
  width:100%;height:5px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.routeprog__bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--ok),#9df3c4);
  transition:width .4s ease;
}
.routeprog__txt{
  font-size:.68rem;color:var(--txt-dim);text-align:center;
}

/* The party inside a battle: who is left and how hurt they are.
   Laid out like the bag rows so the two screens feel related. */
.mvbtn--mon{
  flex-direction:row;align-items:center;gap:9px;
}
.mvbtn--mon .mvbtn__name{flex:1;min-width:0;display:flex;
  align-items:baseline;gap:6px}
.bmon__lv{font-size:.66rem;color:var(--txt-dim);font-style:normal}
.bparty__hp{
  width:54px;height:5px;border-radius:99px;flex-shrink:0;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.bparty__hp i{display:block;height:100%;border-radius:99px}
.bparty__hp i.is-ok{background:var(--ok)}
.bparty__hp i.is-warn{background:var(--yellow)}
.bparty__hp i.is-low{background:var(--red-lt)}
/* Fainted, or already on the field: shown, but not a choice. */
.mvbtn--mon.is-dead{opacity:.42}
.mvbtn--mon.is-dead img{filter:grayscale(1)}
.mvbtn--mon.is-out{border-color:var(--yellow);opacity:1}

/* ══════════ DIALOGS ══════════

   Replacing alert(), confirm() and prompt(), which drag the browser's
   own grey box with "phoenixdmx.com says" across the game. */
.dlg{
  position:fixed;inset:0;z-index:210;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(6,9,13,.7);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .18s;
}
.dlg.is-in{opacity:1}
.dlg__card{
  /* Same rule as the reward panel: a card taller than the screen
     inside a centred fixed layer spills out of both ends and cannot
     be scrolled to, which takes its buttons with it. */
  width:min(420px,100%);max-height:90dvh;overflow-y:auto;
  padding:20px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line);
  box-shadow:0 22px 54px rgba(0,0,0,.6);
  transform:translateY(12px) scale(.97);transition:transform .18s;
}
.dlg.is-in .dlg__card{transform:none}
.dlg__head{margin:0 0 8px;font-size:1rem}
.dlg__text{margin:0;font-size:.86rem;line-height:1.5}
.dlg__note{margin:8px 0 0;font-size:.74rem;color:var(--txt-dim)}
.dlg__input{
  width:100%;margin-top:12px;padding:9px 11px;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--ink);color:var(--txt);font-size:.88rem;
}
.dlg__input:focus{outline:none;border-color:var(--red-lt)}
.dlg__row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.dlg__row .btn{min-width:96px}
/* A list to pick from - boxes by name, with how full each is. Two
   columns where there is room, one on a phone. */
.dlg__choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:6px;margin-top:12px;max-height:52dvh;overflow-y:auto;padding-right:2px}
.dlg__choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--ink);color:var(--txt);text-align:left;cursor:pointer;
  font:inherit;min-width:0}
.dlg__choice:hover:not([disabled]),.dlg__choice:focus-visible{
  border-color:var(--red-lt);outline:none}
.dlg__choice.is-current{border-color:var(--red);background:var(--ink-2)}
.dlg__choice[disabled]{opacity:.45;cursor:not-allowed}
.dlg__choice-l{font-size:.82rem;font-weight:600;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg__choice-n{font-size:.68rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
/* Releasing a Pokemon cannot be undone; the button says so. */
.btn--danger{background:var(--red-dk);border-color:var(--red);color:#fff}
.btn--danger:hover{background:var(--red)}

@media (prefers-reduced-motion:reduce){
  .dlg,.dlg__card{transition:none}
}

/* ══════════ LEARNING A MOVE ══════════

   Shown after a battle, over everything, because the answer decides
   what the Pokemon can do next. The new move sits apart from the four
   it might replace so there is no doubt which is which. */
/* Off to the right rather than in the middle. The Poké Ball sits in
   the centre of the screen and is being clicked repeatedly — a dialog
   that appears there catches the click that was already on its way,
   and players were answering a question they never saw. */
.lm{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:flex-end;padding:18px;
  background:rgba(6,9,13,.72);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .22s;
}
.lm.is-in{opacity:1}
.lm__card{
  width:min(520px,100%);max-height:90vh;overflow-y:auto;
  /* Clear of the centre, where the Poké Ball is. */
  margin-right:clamp(0px,4vw,60px);
  padding:20px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97);transition:transform .22s;
}
.lm.is-in .lm__card{transform:none}
.lm__head{margin:0 0 6px;font-size:1.02rem}
.lm__note{margin:0 0 14px;font-size:.8rem;color:var(--txt-dim)}
.lm__sub{
  margin:14px 0 7px;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim);
}
.lm__grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.lm__move{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:10px 12px;border-radius:var(--r-sm);text-align:left;
  background:var(--ink-3);border:1px solid var(--line);transition:.14s;
}
.lm__move:not(:disabled):hover{
  border-color:var(--red-lt);transform:translateY(-2px);
}
/* The new move is shown for comparison, not to be picked. */
.lm__move.is-new{
  width:100%;cursor:default;
  background:rgba(255,203,58,.09);border-color:rgba(255,203,58,.4);
}
.lm__move:disabled{opacity:1}
.lm__top{display:flex;align-items:center;gap:8px;width:100%}
.lm__name{font-size:.86rem;font-weight:800}
.lm__stats{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.68rem;color:var(--txt-dim);font-variant-numeric:tabular-nums;
}
.lm__stats em{font-style:normal}
.lm__top{gap:8px}
.lm__keep{width:100%;margin-top:14px}

/* Confirming which move to forget. It replaces the grid rather than
   covering it: a panel laid over four cards puts a button exactly
   where the player was already tapping, which is how somebody
   confirms a choice they never meant to make. */
.lm__swap{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:10px;align-items:center;margin:14px 0;
}
.lm__swapside{display:flex;flex-direction:column;gap:5px}
.lm__swaplbl{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700;
}
/* The one being given up, marked as such rather than only labelled. */
.lm__swapside--out .lm__move{opacity:.62;border-style:dashed}
.lm__swaparrow{font-size:18px;color:var(--txt-dim)}

.lm__confirm{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.lm__confirm .btn{width:100%}

@media (max-width:520px){
  .lm__swap{grid-template-columns:1fr;gap:6px}
  /* Pointing down rather than across once the two stack. */
  .lm__swaparrow{transform:rotate(90deg);justify-self:center}
}

@media (max-width:520px){
  .lm__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .lm,.lm__card{transition:none}
  .lm__move:hover{transform:none}
}

/* ══════════ SIDEBAR ══════════ */
.sidebar{
  grid-area:side;
  display:flex;flex-direction:column;gap:8px;
  /* The top is room for the menu button, which floats over this
     corner (fixed at 20px, 44px tall: down to 64px on the screen,
     and the panel starts at 10px). The Rearrange button's margin
     alone only exists while the panel is open, so the collapsed rail
     relies on this padding to keep its first entry clear of it. */
  padding:58px 8px 9px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  width:var(--sidebar-w);
  transition:width .22s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
  position:relative;
}
/* Opening the sidebar makes it wider than the grid column it sits in,
   so the overhanging part used to fall underneath the stage and
   swallow every click past the middle of a label. Lifting it above
   the stage while open gives the whole row back its click area; the
   column itself stays narrow so the stage does not jump sideways
   each time the menu opens. */
.sidebar.is-open{width:var(--sidebar-w-open);z-index:40}

/* The name beside the menu button, only while there is room for it. */
.sidebar__brand{
  position:absolute;top:21px;left:64px;
  font:800 18px/1 var(--display);letter-spacing:.01em;white-space:nowrap;
  opacity:0;transition:opacity .15s;pointer-events:none
}
.sidebar__brand em{font-style:normal;color:var(--red-lt)}
.sidebar.is-open .sidebar__brand{opacity:1}

/* Sitting outside the sidebar, so it is placed rather than flowed:
   over the top of the rail on a desktop. On a phone the tab bar
   opens the menu instead and this is not shown. */
.sidebar__toggle{
  position:fixed;left:20px;top:20px;z-index:70;
  width:44px;height:44px;padding:11px;flex-shrink:0;
  border:1px solid var(--line);border-radius:12px;background:var(--ink-3);
  color:var(--txt-dim);transition:.16s;
}
.sidebar__toggle:hover{color:var(--txt);border-color:var(--txt-dim)}

/* The list scrolls rather than being cut off. It used to clip:
   every entry refuses to shrink, so on a short window — or on an
   admin account, which has one entry more — whatever did not fit was
   simply not drawn.

   overflow-x stays hidden so the labels still slide away when the
   panel collapses; only the vertical axis scrolls. */
.sidebar__nav{
  display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;overflow-x:hidden;
  min-height:0;flex:1;
}
/* Collapsed, the panel is one icon wide — a scrollbar would push
   every icon visibly off centre. So it scrolls without showing the
   bar until the panel is open and there is room for it. */
.sidebar__nav{scrollbar-width:none}
.sidebar__nav::-webkit-scrollbar{width:0}

.sidebar.is-open .sidebar__nav{
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.sidebar.is-open .sidebar__nav::-webkit-scrollbar{width:6px}
.sidebar.is-open .sidebar__nav::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:3px}
.sidebar.is-open .sidebar__nav::-webkit-scrollbar-track{background:transparent}

/* ── Groups ──────────────────────────────────────────
   Each group carries a colour of its own, taken from a type, so the
   menu has a shape even folded to one icon wide: a short bar in the
   group's colour stands where its heading will be. */
.sidegroup{display:flex;flex-direction:column;gap:2px;--acc:var(--txt-dim)}
.sidegroup[hidden]{display:none}
.sidegroup[data-group="fav"]{--acc:var(--yellow)}
.sidegroup[data-group="adventure"]{--acc:#8F66FF}
.sidegroup[data-group="explore"]{--acc:var(--t-grass)}
.sidegroup[data-group="raise"]{--acc:#E58FC0}
.sidegroup[data-group="battle"]{--acc:#F0584F}
.sidegroup[data-group="social"]{--acc:#3399FF}
.sidegroup[data-group="games"]{--acc:#FFCC33}
.sidegroup[data-group="info"]{--acc:var(--txt-dim)}
.sidegroup__h{
  display:flex;align-items:center;gap:8px;height:16px;margin:2px 0 2px;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc);white-space:nowrap;overflow:hidden;
  /* Folded, the words go and the bar is all that is left. */
  font-size:0;
}
.sidegroup__h::before{
  content:'';flex-shrink:0;width:24px;height:3px;margin:0 auto;border-radius:2px;
  background:var(--acc);opacity:.8;transition:width .2s
}
.sidebar.is-open .sidegroup__h{font-size:10px}
.sidebar.is-open .sidegroup__h::before{width:12px;margin:0 0 0 2px}
/* News, the wiki and the admin panel sit at the bottom, quietly. */
.sidegroup--foot{margin-top:auto;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}

.sidenav{
  display:flex;align-items:center;gap:12px;
  padding:8px 10px;height:44px;flex-shrink:0;
  border-radius:12px;border:1px solid transparent;
  transition:.16s;white-space:nowrap;
}
.sidegroup--foot .sidenav{height:38px}
.sidegroup--foot .sidenav__ico{width:22px;height:22px}
.sidenav:hover{background:color-mix(in srgb,var(--acc) 16%,transparent)}
.sidenav:hover .sidenav__ico{transform:translateY(-1px) scale(1.08)}
/* The screen this entry opened is up. */
.sidenav.is-active{
  background:color-mix(in srgb,var(--acc) 24%,transparent);
  border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--acc) 26%,transparent)
}
.sidenav.is-active::before{
  content:'';position:absolute;left:-8px;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--acc)
}
/* The wiki entry is a link rather than a button, because it opens
   a page of its own in a new tab. A link brings its own colour and
   underline, and misses what a button gets for free. */
a.sidenav{color:inherit;text-decoration:none;font:inherit;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a.sidenav:hover{text-decoration:none;background:color-mix(in srgb,var(--acc) 16%,transparent)}
/* `display:flex` above wins over the `hidden` attribute, so a hidden
   sidebar button stayed on screen. The post-League places rely on
   being hidden until the player is Champion, so say it explicitly. */
.sidenav[hidden]{display:none!important}
/* Only on a phone, where the header has no room for it. */
.sidenav--phone{display:none}

/* ── Rearranging the menu ─────────────────────────────
 *
 * The button only exists while the panel is open: collapsed the
 * sidebar is one icon wide, and there is no room to drag anything
 * into. Entries move inside their own group; the star lifts one
 * into Favorites at the top.
 */
.sidebar__edit{
  display:none;align-items:center;gap:8px;
  /* Clear of the menu button through the panel's own top padding,
     which every entry needs and not only this one. */
  margin:0 0 6px;padding:7px 9px;width:100%;
  border-radius:var(--r-sm);border:1px dashed var(--line);
  background:none;color:var(--txt-dim);cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;text-align:left;
  transition:.16s
}
.sidebar.is-open .sidebar__edit{display:flex}
.sidebar__edit:hover{color:var(--txt);border-color:var(--pri)}
.sidebar__edit svg{width:16px;height:16px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sidebar__edit[aria-pressed="true"]{
  color:var(--txt);border-style:solid;border-color:var(--pri);
  background:rgba(91,140,255,.12)}

/* While arranging, the whole list says so: a dashed edge, and a grab
   cursor on every entry rather than the pointer that means "opens
   something". */
.sidebar.is-editing .sidebar__nav{
  border-radius:var(--r-sm);
  outline:1px dashed rgba(91,140,255,.4);outline-offset:3px}
.sidebar.is-editing .sidenav{cursor:grab;touch-action:none}
.sidebar.is-editing .sidenav:active{cursor:grabbing}
/* An empty Favorites group is where a star puts things, so while
   arranging it is shown with a line saying so. */
.sidebar.is-editing .sidegroup[data-group="fav"]{display:flex}
.sidebar.is-editing .sidegroup[data-group="fav"]:not(:has(.sidenav))::after{
  content:'Star an entry to pin it here';
  font-size:11px;color:var(--txt-dim);padding:4px 10px 6px}

/* The entry being carried. Fixed, so it follows the finger even when
   the list scrolls underneath it. */
.sidenav.is-dragging{
  position:fixed;z-index:120;margin:0;pointer-events:none;
  background:var(--ink-2,var(--ink-3));border-color:var(--pri);
  box-shadow:0 10px 26px rgba(0,0,0,.55);opacity:.96}
/* Where it will land. */
.sidenav__gap{
  border-radius:var(--r-sm);flex-shrink:0;
  border:1px dashed var(--pri);background:rgba(91,140,255,.08)}

/* The star and the minus, at the far end of each row. */
.sidenav__tools{
  margin-left:auto;display:flex;gap:4px;flex-shrink:0;
  opacity:0;transition:opacity .18s}
.sidebar.is-open.is-editing .sidenav__tools{opacity:1}
.sidenav__tool{
  width:22px;height:22px;line-height:20px;text-align:center;
  border-radius:5px;border:1px solid var(--line);
  background:var(--ink);color:var(--txt-dim);
  font-size:13px;cursor:pointer;user-select:none;
  transition:.14s}
.sidenav__tool:hover{color:var(--txt);border-color:var(--pri)}
.sidenav__tool:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
.sidenav.is-pinned .sidenav__tool--pin{color:#FFCC33;border-color:#FFCC33}

/* Put away: still listed while arranging, so it can be brought back,
   but plainly not part of the menu any more. */
.sidebar.is-editing .sidenav.is-away{opacity:.42}
.sidebar.is-editing .sidenav.is-away .sidenav__txt{text-decoration:line-through}

/* A pinned entry is marked in the ordinary menu too, or the pin is
   only visible in the mode where it was set. */
.sidenav.is-pinned{border-color:rgba(255,204,51,.35)}

.sidenav__ico{width:28px;height:28px;flex-shrink:0;display:block;
  object-fit:contain;image-rendering:pixelated;transition:transform .16s}
.sidenav__txt{
  font-size:13.5px;font-weight:600;opacity:0;
  transition:opacity .18s;pointer-events:none
}
.sidebar.is-open .sidenav__txt{opacity:1}

/* The name of an entry, beside the folded rail - the labels are faded
   out there, and an icon alone was a guess. Fixed to the screen and
   placed by the script, because the panel clips anything that leaves
   it. */
.navtip{
  position:fixed;z-index:130;pointer-events:none;
  padding:6px 10px;border-radius:8px;transform:translateY(-50%);
  background:var(--ink-3);border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  font-size:12.5px;font-weight:600;white-space:nowrap;
}
.navtip[hidden]{display:none}
.navtip b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc,var(--txt-dim));margin-bottom:1px}

/* A count of something waiting — friend requests today. It sits on
   the icon rather than after the label, because the sidebar spends
   most of its time collapsed with the labels faded out, and a badge
   nobody can see until they open the sidebar is a badge that does
   not work.

   The blink is slow and never reaches full transparency: it has to
   catch the eye of somebody clicking in the middle of the screen
   without pulling them off what they are doing. */
.sidenav{position:relative}
.sidenav__count{
  position:absolute;left:27px;top:2px;
  min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:#e0202a;color:#fff;
  font-size:10px;font-weight:800;line-height:1;
  border:2px solid var(--ink);
  box-shadow:0 0 6px rgba(224,32,42,.7);
  pointer-events:none;
  animation:navcount 1.25s ease-in-out infinite;
}
@keyframes navcount{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.45;transform:scale(.92)}
}
/* Someone who has asked not to see motion still gets the badge —
   it just holds still. */
@media (prefers-reduced-motion:reduce){
  .sidenav__count{animation:none}
}

/* A quiet line under the icon: what a crew is holding, or how long
   the Safari has left before it turns over.

   Deliberately not a badge. The red count means "deal with this";
   this means "here is a number you might want". It only turns red
   when the number has become the same kind of news — a shelf that is
   full has stopped earning, and a Safari with five minutes left is
   about to change species. */
.sidenav__note{
  /* Anchored to the icon, not to the button: the sidebar is narrow
     when collapsed and a clock hung off the right edge of the label
     was cut in half by it. */
  position:absolute;left:4px;bottom:0;
  padding:0 3px;border-radius:7px;
  background:var(--ink-3);color:var(--dim);
  font-size:9px;font-weight:700;line-height:14px;
  border:1px solid var(--line);
  pointer-events:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.sidenav__note.is-urgent{
  background:#e0202a;color:#fff;border-color:transparent;
  box-shadow:0 0 5px rgba(224,32,42,.6);
}

/* ══════════ MAIN STAGE ══════════ */
.stage{
  grid-area:main;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.5vh,16px);
  min-height:0;min-width:0;      /* critical for grid overflow */
  position:relative;
  /* The colour of the route, set by the script from what lives on
     it. Grass until it says otherwise. */
  --terrain:var(--t-grass);
}

/* Stats. Four counters, but not four equal ones: Clicks and
   Encounters are the running total and step back, Shiny and Shadow
   are what anybody is hunting and are lit in their own colours. */
.stats{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  flex-shrink:0;max-width:100%;
}
.stat{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-width:100px;padding:7px 14px;border-radius:12px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.stat__val{font:700 clamp(16px,1.8vw,20px)/1.15 var(--display);font-variant-numeric:tabular-nums}
.stat__key{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.stat--quiet{background:rgba(22,27,35,.5)}
.stat--quiet .stat__val{font-size:clamp(14px,1.4vw,16px);color:#C6D0DC}
.stat--shiny{
  border-color:rgba(255,213,74,.45);
  background:linear-gradient(160deg,rgba(255,213,74,.18),rgba(22,27,35,.78) 70%);
  box-shadow:0 0 24px rgba(255,213,74,.14)
}
.stat--shadow{
  border-color:rgba(155,92,255,.5);
  background:linear-gradient(160deg,rgba(155,92,255,.2),rgba(22,27,35,.78) 70%);
  box-shadow:0 0 24px rgba(155,92,255,.15)
}

/* The odds, under the count they belong to. Small enough to ignore
   while playing and there when somebody wonders. */
.stat__odds{font-size:10px;color:var(--txt-dim);font-family:var(--mono);
  letter-spacing:.02em;margin-top:1px;white-space:nowrap}
/* An event is running: the number is not the usual one. */
.stat__odds.is-boosted{color:var(--yellow)}

/* Resetting the encounter counter. Tucked into the corner of its own
   tile, faint until the tile is hovered — a control that undoes a
   long hunt should take a deliberate move to find. */
.stat__reset{
  position:absolute;top:3px;right:4px;
  width:15px;height:15px;padding:0;line-height:1;
  font-size:9px;font-weight:800;
  border-radius:50%;border:1px solid transparent;
  background:transparent;color:var(--txt-dim);
  opacity:0;transition:.14s;cursor:pointer;
}
.stat:hover .stat__reset{opacity:.55}
.stat__reset:hover{opacity:1;color:var(--red-lt);border-color:var(--red)}
@media (hover:none){ .stat__reset{opacity:.4} }
.stat--shiny .stat__val{color:var(--shiny)}
.stat--shadow .stat__val{color:#B98CFF}

/* ── The Ball ────────────────────────────────────────
   A light behind it in the route's colour, a ring, and a ripple on
   every press. The light breathes slowly; nothing else moves until
   the Ball is pressed. */
.ballwrap{
  --sz:clamp(112px,19vh,180px);
  position:relative;flex-shrink:0;
  width:calc(var(--sz) * 1.3);height:calc(var(--sz) * 1.3);
  display:grid;place-items:center;
}
.ballwrap__aura{
  position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--terrain) 40%,transparent),
    color-mix(in srgb,var(--terrain) 10%,transparent) 44%,transparent 68%);
  animation:ballBreathe 4.5s ease-in-out infinite;
}
.ballwrap__ring{
  position:absolute;inset:3%;border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--terrain) 40%,transparent);
}
.ballwrap__ring::after{
  content:'';position:absolute;inset:-9%;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--terrain) 22%,transparent);
  animation:ballSpin 40s linear infinite;
}
@keyframes ballBreathe{50%{transform:scale(1.06);opacity:.85}}
@keyframes ballSpin{to{transform:rotate(360deg)}}
.ballwrap__ripple{
  position:absolute;inset:16%;border-radius:50%;pointer-events:none;
  border:2px solid var(--terrain);
  animation:ballRipple .6s ease-out forwards;
}
@keyframes ballRipple{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}

.tbadge{
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:var(--ink-3);           /* until a type says otherwise */
}

/* The eighteen official type colours. The variables were defined at
   the top of the file from the start, but nothing ever used them for
   a badge — so every type badge in the game came out the same grey,
   including the ones in the learn-a-move dialog. */
.tbadge.t-normal{background:var(--t-normal)}
.tbadge.t-fire{background:var(--t-fire)}
.tbadge.t-water{background:var(--t-water)}
.tbadge.t-electric{background:var(--t-electric)}
.tbadge.t-grass{background:var(--t-grass)}
.tbadge.t-ice{background:var(--t-ice)}
.tbadge.t-fighting{background:var(--t-fighting)}
.tbadge.t-poison{background:var(--t-poison)}
.tbadge.t-ground{background:var(--t-ground)}
.tbadge.t-flying{background:var(--t-flying)}
.tbadge.t-psychic{background:var(--t-psychic)}
.tbadge.t-bug{background:var(--t-bug)}
.tbadge.t-rock{background:var(--t-rock)}
.tbadge.t-ghost{background:var(--t-ghost)}
.tbadge.t-dragon{background:var(--t-dragon)}
.tbadge.t-dark{background:var(--t-dark)}
.tbadge.t-steel{background:var(--t-steel)}
.tbadge.t-fairy{background:var(--t-fairy)}

/* Two of them are dark enough that white text on them is hard to
   read; these get the ink colour instead. */
.tbadge.t-electric,.tbadge.t-ice,.tbadge.t-ground,.tbadge.t-fairy{
  color:var(--ink);text-shadow:none;
}

/* A type as its Scarlet/Violet badge. The art is the whole badge, so
   it only needs a height; the width follows its 5:1 shape. */
.tsprite{height:20px;width:auto;flex-shrink:0;vertical-align:middle;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tsprite--sm{height:16px}
.tsprite--xs{height:13px}

/* Move category, as the three shapes the games use. */
.catico{display:inline-grid;place-items:center;width:22px;height:22px;
  flex-shrink:0;border-radius:6px;background:rgba(0,0,0,.35)}
.catico svg{width:15px;height:15px;fill:none;stroke-width:1.6}
.catico--phys{color:#F0703C}
.catico--spec{color:#5B8DEF}
.catico--stat{color:var(--txt-dim)}
.catico circle{stroke:currentColor}
.catico .catico__fill{fill:currentColor;stroke:none}

/* What kind of move it is. Physical, Special and Status are three
   different decisions in a battle, so they are three different
   shapes rather than three words in the same grey. */
.mcat{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px;
  border:1px solid var(--line);color:var(--txt-dim);
}
.mcat::before{
  content:'';width:8px;height:8px;flex-shrink:0;
}
/* Physical: a solid block, the way a hit lands. */
.mcat--phys{border-color:rgba(238,21,21,.5);color:#ff9d9d}
.mcat--phys::before{background:#EE1515;border-radius:2px}
/* Special: a circle, for something thrown rather than swung. */
.mcat--spec{border-color:rgba(42,117,187,.6);color:#9fc6f5}
.mcat--spec::before{background:#2A75BB;border-radius:50%}
/* Status: an outline, because nothing is dealt. */
.mcat--status{border-color:rgba(154,167,184,.5);color:var(--txt-dim)}
.mcat--status::before{
  background:transparent;border:2px solid var(--txt-dim);border-radius:50%;
}

/* Pokéball clicker */
.pokeball{
  position:relative;
  width:var(--sz,clamp(112px,20vh,186px));height:var(--sz,clamp(112px,20vh,186px));
  border-radius:50%;flex-shrink:0;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55));
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
.pokeball:hover{transform:scale(1.055)}
.pokeball:active{transform:scale(.93)}
.pokeball.is-shake{animation:shake .42s ease}
@keyframes shake{
  0%,100%{transform:rotate(0) scale(1)}
  20%{transform:rotate(-13deg) scale(1.04)}
  45%{transform:rotate(11deg) scale(1.04)}
  70%{transform:rotate(-7deg) scale(1.02)}
}
/* The artwork covers the drawn ball. If the file is missing the img is
   removed and .is-css falls back to the CSS-built version underneath. */
.pokeball__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:4;pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.pokeball:not(.is-css) .pokeball__top,
.pokeball:not(.is-css) .pokeball__band,
.pokeball:not(.is-css) .pokeball__btn,
.pokeball:not(.is-css) .pokeball__bot{display:none}
.pokeball:not(.is-css){filter:none}

.pokeball__top,.pokeball__bot{position:absolute;left:0;width:100%;height:50%}
.pokeball__top{top:0;background:linear-gradient(170deg,var(--red-lt),var(--red) 55%,var(--red-dk));
  border-radius:calc(var(--sz)) calc(var(--sz)) 0 0}
.pokeball__bot{bottom:0;background:linear-gradient(10deg,#D8DEE9,#FDFDFD 55%,#FFF);
  border-radius:0 0 calc(var(--sz)) calc(var(--sz))}
.pokeball__band{position:absolute;top:calc(50% - 5%);left:0;width:100%;height:10%;
  background:var(--ink);z-index:2}
.pokeball__btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:27%;height:27%;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#FFF,#D5DBE3);
  border:calc(var(--sz)*.038) solid var(--ink);
  box-shadow:0 0 0 calc(var(--sz)*.018) rgba(255,255,255,.5),inset 0 2px 5px rgba(0,0,0,.22);
}
.pokeball.is-shake .pokeball__btn{animation:glow .42s ease}
@keyframes glow{50%{box-shadow:0 0 22px 6px var(--yellow),inset 0 2px 5px rgba(0,0,0,.22)}}

.clickhint{font-size:11px;color:var(--txt-dim);letter-spacing:.04em;flex-shrink:0}

/* Floating +1 */
.float1{
  position:absolute;pointer-events:none;z-index:20;
  font-weight:800;font-size:17px;color:var(--yellow);
  text-shadow:0 2px 5px rgba(0,0,0,.7);
  animation:float1 .8s ease-out forwards;
}
@keyframes float1{
  0%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-62px) scale(1.35)}
}

/* Team. Each slot is framed in its Pokémon's type colours, with its
   level and how hurt it is - the bar used to be six empty squares
   with a sprite in, and which of them was the Fire type or the one
   nearly fainted had to be remembered. */
.team{
  display:flex;align-items:center;gap:12px;flex-shrink:0;max-width:100%;
  padding:9px 10px;border-radius:18px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.team__slots{display:flex;gap:7px;min-width:0}
.slot{
  width:clamp(44px,6.8vh,64px);height:clamp(44px,6.8vh,64px);
  border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-brd);
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:.16s;cursor:pointer;
}
/* Lit in its Pokemon's types, the same light as the summary: a glow
   of the first type behind the sprite and a rim in the second. */
.slot[style*="--tc"]{
  background:
    radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tc) 42%,transparent),transparent 70%),
    linear-gradient(150deg,color-mix(in srgb,var(--tc) 22%,var(--ink-2)),
      color-mix(in srgb,var(--tc2) 18%,var(--ink-2)));
  border-color:color-mix(in srgb,var(--tc2) 38%,var(--glass-brd))}
.slot:hover{border-color:var(--tc,var(--red-lt));transform:translateY(-2px)}
.slot.is-faint img{filter:grayscale(1) brightness(.7);opacity:.6}
/* The level in the corner, small: it is read at a glance, not studied. */
.slot__lv{position:absolute;left:2px;bottom:7px;z-index:2;
  font-size:8px;font-weight:800;line-height:1;padding:1px 3px;border-radius:4px;
  background:rgba(0,0,0,.55);color:#fff;font-variant-numeric:tabular-nums;
  pointer-events:none}
/* A status is its Gen VIII pill, small, across the top - where the
   games put it in the party screen. */
.slot__status{position:absolute;left:50%;top:-5px;transform:translateX(-50%);z-index:2;
  height:9px;width:auto;max-width:92%;object-fit:contain;
  pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}

/* ── Rearranging the team ────────────────────────────

   The handle sits in the corner of a slot. It is deliberately small
   on a desktop, where a mis-click costs a click, and grows on touch,
   where a mis-tap costs a tap and some patience. */
.slot__grab{
  position:absolute;top:-4px;right:-4px;z-index:3;
  width:18px;height:18px;padding:2px;border-radius:50%;
  background:var(--ink-3);border:1px solid var(--line);
  color:var(--txt-dim);opacity:0;transition:opacity .14s,background .14s;
}
.slot:hover .slot__grab{opacity:1}
.slot__grab:hover{background:var(--red);color:#fff;border-color:var(--red-lt)}
.slot__grab svg{
  width:100%;height:100%;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;
}

/* Being carried: lifted and outlined, so it is obvious which one is
   in hand while the next tap is chosen. */
.slot.is-moving{
  box-shadow:0 0 0 2px var(--yellow),0 0 0 5px rgba(255,203,58,.25);
  transform:translateY(-4px);
}
.slot.is-moving .slot__grab{opacity:1;background:var(--yellow);color:var(--ink)}

/* Somewhere it could go. Empty slots stop being invisible while
   something is being carried. */
.team__slots.is-moving .slot.is-target{box-shadow:0 0 0 1px rgba(255,203,58,.45)}
.team__slots.is-moving .slot.is-empty.is-target{
  background:rgba(255,203,58,.08);
  border-style:dashed;
}

/* On touch there is no hover, so the handle is always there — and
   big enough to hit without magnifying the screen. */
@media (hover:none){
  .slot__grab{
    opacity:1;width:22px;height:22px;top:-6px;right:-6px;
    background:var(--ink-2);
  }
}
@media (max-width:620px){
  .slot__grab{width:24px;height:24px;top:-7px;right:-7px}
}
.slot img{width:88%;height:88%;object-fit:contain;image-rendering:pixelated}
/* An empty slot is a hollow Poke Ball waiting to be filled. */
.slot.is-empty{cursor:default}
.slot.is-empty::after{content:'';width:46%;aspect-ratio:1;border-radius:50%;
  opacity:.5;
  background:
    radial-gradient(circle,transparent 0 17%,var(--line) 18% 27%,transparent 28%),
    linear-gradient(transparent 45%,var(--line) 45% 55%,transparent 55%);
  box-shadow:inset 0 0 0 2px var(--line)}
.slot.is-empty:hover{transform:none;border-color:var(--glass-brd)}

/* The hover card under a team slot. */
.teampeek{position:fixed;z-index:90;display:grid;grid-template-columns:1fr auto;
  gap:4px 10px;align-items:center;min-width:170px;padding:9px 11px;
  border-radius:var(--r-sm);pointer-events:none;
  background:
    linear-gradient(140deg,color-mix(in srgb,var(--tc,var(--ink-3)) 26%,var(--ink-2)),var(--ink-2) 80%);
  border:1px solid color-mix(in srgb,var(--tc,var(--line)) 45%,var(--line));
  box-shadow:0 10px 26px rgba(0,0,0,.5);animation:peekIn .14s ease-out}
.teampeek[hidden]{display:none}
@keyframes peekIn{from{opacity:0;transform:translateY(-4px)}}
.teampeek__name{font-size:13px;font-weight:800;white-space:nowrap}
.teampeek__lv{font-size:11px;font-weight:700;color:var(--txt-dim);text-align:right}
.teampeek__types{grid-column:1/-1;display:flex;gap:4px}
.teampeek__hp{grid-column:1/-1;display:block;height:5px;border-radius:99px;
  background:rgba(0,0,0,.45);overflow:hidden}
.teampeek__hp i{display:block;height:100%;background:var(--ok)}
.teampeek__hp.is-warn i{background:#F0C040}
.teampeek__hp.is-low i{background:#E8503C}
.teampeek__hp.is-out i{background:#6B7280}
.teampeek__hpn{grid-column:1/-1;font-size:10px;font-family:var(--mono);color:var(--txt-dim)}
.slot__hp{
  position:absolute;bottom:5px;left:12%;width:76%;height:4px;z-index:2;
  border-radius:2px;background:rgba(0,0,0,.6);overflow:hidden;
}
.slot__hp i{display:block;height:100%;background:var(--ok);border-radius:2px;
  transition:width .3s ease}
/* The same reading as the battle bar: healthy, thin, nearly out. */
.slot__hp i.is-warn{background:#F0C040}
.slot__hp i.is-low{background:#E8503C}
.slot__hp i.is-out{background:#6B7280}
.slot.is-shiny{box-shadow:0 0 0 1px var(--shiny),0 0 14px rgba(255,213,74,.4)}
.slot.is-shadow{box-shadow:0 0 0 1px var(--shadow),0 0 14px rgba(155,92,255,.4)}
/* A Shiny wears a small four-point star in the corner as well, so it
   reads without the glow. */
.slot.is-shiny::after{
  content:'';position:absolute;right:6px;top:5px;width:7px;height:7px;z-index:2;
  background:var(--shiny);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)
}

/* The PC and the Bag, beside the party. */
.team__acts{display:flex;gap:7px;padding-left:12px;border-left:1px solid rgba(255,255,255,.09)}
.team__pc,.team__bag{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:clamp(44px,6.8vh,64px);height:clamp(44px,6.8vh,64px);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:.16s;
}
.team__pc{background:linear-gradient(160deg,#2F80CC,var(--blue-dk))}
.team__bag{background:linear-gradient(160deg,#C9822F,#82491A)}
.team__pc:hover,.team__bag:hover{transform:translateY(-3px);filter:brightness(1.15)}
.team__pc svg{width:20px;height:20px;stroke-width:1.9}
.team__bag img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}

/* ══════════ CHAT ══════════ */
.chat{
  grid-area:chat;
  display:flex;flex-direction:column;
  min-height:0;min-width:0;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;position:relative;
}

.chat__head{
  display:flex;align-items:center;gap:2px;flex-shrink:0;
  padding:7px 7px 7px 8px;border-bottom:1px solid rgba(255,255,255,.06);
}
/* The tabs push everything after them to the far end of the bar. */
.chat__tabs{
  display:flex;gap:2px;min-width:0;margin-right:auto;
  padding:3px;border-radius:11px;background:rgba(0,0,0,.28);
}
.chattab{
  display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border-radius:8px;font-size:12.5px;font-weight:600;color:var(--txt-dim);
  white-space:nowrap;transition:.16s;
}
.chattab:hover{color:var(--txt)}
.chattab.is-active{color:var(--txt);background:var(--ink-4)}
/* What is waiting in a channel. Gold when somebody named you. */
.chattab__n{
  min-width:18px;height:16px;padding:0 5px;border-radius:8px;
  background:var(--red);color:#fff;text-align:center;
  font:700 10px/16px var(--display);
}
.chattab__n.is-at{background:var(--shiny);color:var(--ink)}
.chattab__n[hidden]{display:none}

.chat__tool,.chat__collapse{
  position:relative;flex-shrink:0;width:34px;height:34px;padding:8px;
  border-radius:9px;color:var(--txt-dim);transition:.16s;
}
.chat__tool:hover,.chat__tool[aria-expanded="true"],
.chat__collapse:hover{background:var(--ink-3);color:var(--txt)}
.chat__tooldot{position:absolute;top:6px;right:6px;width:7px;height:7px;
  border-radius:50%;background:var(--shiny)}
.chat__tooldot[hidden]{display:none}

/* The way out to the Discord server, in the chat header where the
   people it is for already are. Pushed to the far end of the bar with
   margin-left:auto, beside the filter and the fold. */
.chat__discord{
  display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  width:34px;height:34px;flex-shrink:0;border-radius:9px;
  color:var(--txt-dim);transition:.16s;
}
/* `display` beats the hidden attribute, so a component with a display
   of its own has to say this or it shows anyway. Every other hidden
   thing in this file carries the same line - without it the button
   sat in the bar with no href: visible, and doing nothing. */
.chat__discord[hidden]{display:none}
.chat__discord:hover{background:#5865F2;color:#fff}
.chat__discord-ico{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.chat__discord-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Folded ──────────────────────────────────────────
   A rail of channels, each with what is waiting in it. Everything
   else steps aside. */
.chat__rail{display:none;flex-direction:column;align-items:center;gap:6px;padding:10px 0}
.chat.is-collapsed .chat__rail{display:flex}
.chat.is-collapsed > :not(.chat__rail){display:none!important}
.chat__railbtn{
  position:relative;width:42px;height:42px;padding:11px;border-radius:12px;
  color:var(--txt-dim);transition:.16s;
}
.chat__railbtn:hover{background:var(--ink-3);color:var(--txt)}
.chat__railbtn[data-rail="open"]{margin-bottom:6px}
.chat__railbtn .chattab__n{position:absolute;top:2px;left:24px}

/* ── Filters ─────────────────────────────────────────
   One switch per kind of message, behind one button. A group that is
   off says how many lines it is holding back, so nothing disappears
   silently. */
.chat__filters{
  position:absolute;right:8px;top:50px;z-index:20;
  width:min(300px,calc(100% - 16px));padding:6px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);animation:popin .14s ease-out;
}
.chat__filters[hidden]{display:none}
.chat__filtershead{padding:8px 10px 6px;font-size:12px;color:var(--txt-dim);line-height:1.45}
.chatfilter{
  display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;
  border-radius:10px;text-align:left;transition:background .12s;
}
.chatfilter:hover{background:var(--ink-3)}
.chatfilter__txt{flex:1;min-width:0}
.chatfilter__txt b{display:block;font-size:13px;font-weight:600}
.chatfilter__txt small{font-size:11.5px;color:var(--txt-dim)}
.chatfilter__n{font:10.5px var(--mono);color:var(--txt-dim);flex-shrink:0}
.chatfilter__sw{
  position:relative;flex-shrink:0;width:34px;height:20px;border-radius:10px;
  background:var(--line);transition:background .15s;
}
.chatfilter__sw::after{
  content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .15s;
}
.chatfilter.is-on .chatfilter__sw{background:var(--ok)}
.chatfilter.is-on .chatfilter__sw::after{transform:translateX(14px)}

/* Something to act on in this channel: an open guild raid. */
.chat__pin{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  margin:8px 8px 0;padding:6px 8px 6px 6px;border-radius:12px;
  background:linear-gradient(90deg,rgba(224,32,42,.24),rgba(224,32,42,.05));
  border:1px solid rgba(224,32,42,.42);
}
.chat__pin[hidden]{display:none}
.chat__pin img{width:40px;height:40px;margin:-6px -2px;object-fit:contain;image-rendering:pixelated}
.chat__pin div{flex:1;min-width:0;font-size:11.5px;color:var(--txt-dim)}
.chat__pin b{display:block;font-size:13px;color:var(--txt)}
.chat__pin button{height:30px;padding:0 12px;border-radius:8px;background:var(--red);
  color:#fff;font-size:12px;font-weight:700;flex-shrink:0}
.chat__pin button:hover{background:var(--red-lt)}

/* ── The conversation ────────────────────────────── */
.chat__body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.chat__log{
  flex:1;min-height:0;overflow-y:auto;padding:8px 6px 10px 8px;
  display:flex;flex-direction:column;gap:1px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.chat__log::-webkit-scrollbar{width:6px}
.chat__log::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.msg{position:relative;font-size:13px;line-height:1.45;word-break:break-word}

/* Something a player said. Lines in a row from the same person are
   one block under one name and one face, the way a conversation is
   read; the time of each later line shows when it is pointed at. */
.msg--player{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 10px;
  padding:5px 8px;border-radius:10px;
}
.msg--player:hover,.msg--player.is-sel{background:rgba(255,255,255,.035)}
.msg--cont{padding-top:1px;padding-bottom:2px}
.msg__gut .msg__at{display:block;text-align:right;padding-top:2px;opacity:0;transition:opacity .12s}
.msg--player:hover .msg__gut .msg__at,.msg--player.is-sel .msg__gut .msg__at,
.chat__log.has-stamps .msg__gut .msg__at{opacity:.75}
.msg__b{min-width:0}
.msg__h{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:1px}
.msg__h .msg__at{margin-left:auto;flex-shrink:0}
.msg__t{color:#D8DFE8}
.msg__who{font-weight:700;color:#8EC5FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg__who--me{color:#7BE0B0}
/* Another player's name opens their card. A button that reads like
   the name it always was. */
.msg__who--btn{padding:0;border:0;background:none;font:inherit;font-weight:700;
  color:#8EC5FF;cursor:pointer;text-align:left}
.msg__who--btn:hover{text-decoration:underline}
.msg--me{background:rgba(63,217,138,.05)}
/* Somebody named you. */
.msg--mention{background:rgba(255,213,74,.08);box-shadow:inset 3px 0 0 var(--shiny)}
.msg__mention{color:var(--shiny);font-weight:600}
/* The line this one answers. */
.msg__quote{
  display:flex;align-items:center;gap:5px;min-width:0;margin:0 0 2px;
  font-size:11.5px;color:var(--txt-dim);white-space:nowrap;overflow:hidden
}
.msg__quote svg{width:12px;height:12px;flex-shrink:0}
.msg__quote b{font-weight:600;color:var(--txt)}
.msg__quote span{overflow:hidden;text-overflow:ellipsis}

/* Reply and report, over the corner of the line they belong to. */
.msg__acts{
  position:absolute;right:6px;top:-12px;z-index:3;
  display:none;gap:2px;padding:2px;border-radius:9px;
  background:var(--ink-4,var(--ink-3));border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.msg--player:hover .msg__acts,.msg--player.is-sel .msg__acts{display:flex}
.msg--player:first-child .msg__acts{top:2px}
.msg__act{
  width:28px;height:28px;padding:7px;border-radius:7px;
  color:var(--txt-dim);font-size:12px;font-weight:800;line-height:14px;
}
.msg__act:hover{background:var(--ink-3);color:var(--txt)}
.msg__report{padding:0}
.msg__report:hover{color:var(--red-lt)}

/* A Pokémon somebody is showing off, as it was when they showed it -
   the server builds this card, not the sender. A card with the whole
   Pokémon behind it is a button that opens its summary. */
.msg__show{
  display:flex;align-items:center;gap:10px;max-width:260px;margin-top:4px;
  padding:6px 12px 6px 4px;border-radius:12px;background:var(--ink-3);
  border:1px solid color-mix(in srgb,var(--c,var(--line)) 55%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--c,transparent) 14%,transparent);
}
.msg__show img{width:54px;height:54px;margin:-8px -4px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.msg__show b{display:block;font:700 13.5px var(--display);color:var(--txt)}
.msg__show small{font-size:11px;color:var(--txt-dim)}
.msg__show .tbadge{margin:3px 3px 0 0;display:inline-block}
.msg__showid,.msg__showtypes{display:block;min-width:0}
.msg__show small{display:block}
.msg__show.is-open{
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:transform .14s,box-shadow .16s,border-color .16s;
}
.msg__show.is-open:hover,.msg__show.is-open:focus-visible{
  border-color:var(--c,var(--txt-dim));transform:translateY(-1px);
  box-shadow:0 0 22px color-mix(in srgb,var(--c,transparent) 30%,transparent);
}
.msg__show.is-open:focus-visible{outline:2px solid var(--c,var(--txt-dim));outline-offset:2px}
.msg__show.is-open:active{transform:none}
@media (prefers-reduced-motion:reduce){.msg__show.is-open,.msg__show.is-open:hover{transition:none;transform:none}}

/* What the game itself says in a room people talk in. */
.msg--sys{color:var(--txt-dim);font-size:12px;padding:4px 10px}

/* The announcements: a roaming legendary, a guild raid, somebody's
   Shiny or Shadow. The one thing in the chat nobody should scroll
   past, so each is a card with the Pokémon on it - and, where there
   is something to do about it, the button to do it. */
.msg--ann{
  display:flex;align-items:center;gap:10px;margin:5px 2px;
  padding:7px 10px 7px 6px;border-radius:12px;border:1px solid;
  font-size:12.5px;color:var(--txt);line-height:1.4;
  animation:msgflash 1.6s ease-out;
}
.msg--ann .msg__art{width:46px;height:46px;margin:-7px -2px;flex-shrink:0;object-fit:contain;image-rendering:pixelated}
.msg--ann .msg__badge{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center}
.msg--ann .msg__badge svg{width:22px;height:22px}
.msg__ann{flex:1;min-width:0}
.msg__ann .msg__at{display:block;margin-top:1px}
.msg__go{
  height:30px;padding:0 10px;flex-shrink:0;border-radius:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  font-size:11.5px;font-weight:700;white-space:nowrap
}
.msg__go:hover{background:rgba(255,255,255,.15)}
.msg--shiny{border-color:rgba(255,213,74,.42);
  background:linear-gradient(90deg,rgba(255,213,74,.17),rgba(255,213,74,.03))}
.msg--shiny .msg__badge{color:var(--shiny)}
.msg--shadow{border-color:rgba(155,92,255,.45);
  background:linear-gradient(90deg,rgba(155,92,255,.2),rgba(155,92,255,.03))}
.msg--shadow .msg__badge{color:#B98CFF}
.msg--roam{border-color:rgba(51,153,255,.45);
  background:linear-gradient(90deg,rgba(51,153,255,.17),rgba(51,153,255,.03))}
.msg--roam .msg__badge{color:#7DB8FF}
.msg--raid{border-color:rgba(224,32,42,.42);
  background:linear-gradient(90deg,rgba(224,32,42,.16),rgba(224,32,42,.03))}
.msg--raid .msg__badge{color:var(--red-lt)}
@keyframes msgflash{
  0%,18%{background-color:rgba(255,255,255,.22)}
  100%{background-color:transparent}
}

/* The Activity channel: what the game did, one compact line each
   with a sprite for what kind of thing it was. */
.msg--act{display:flex;align-items:center;gap:10px;padding:4px 8px;border-radius:8px;
  font-size:12.5px;color:#C9D2DD}
.msg--act:hover{background:rgba(255,255,255,.03)}
.msg__kind{width:24px;height:24px;flex-shrink:0;display:grid;place-items:center;color:var(--txt-dim)}
.msg__kind img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.msg__kind svg{width:15px;height:15px}
.msg--act .msg__t{flex:1;min-width:0;color:inherit}
.msg--act .msg__at{flex-shrink:0}

/* Where the unread part begins. */
.msg__new{
  display:flex;align-items:center;gap:8px;margin:6px 8px;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red-lt)
}
.msg__new::before,.msg__new::after{content:'';flex:1;height:1px;background:rgba(255,78,78,.4)}
.chat__hidden{font-size:11.5px;color:var(--txt-dim);text-align:center;padding:8px}
.chat__empty{margin:auto;padding:24px 16px;max-width:30ch;text-align:center;
  font-size:12.5px;line-height:1.5;color:var(--txt-dim)}
.chat__hidden button{color:var(--shiny);text-decoration:underline;font-weight:600}

/* Scrolled up to read, and something new arrived below. */
.chat__jump{
  position:absolute;left:50%;bottom:10px;z-index:4;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 8px;
  border-radius:999px;background:var(--ink-3);border:1px solid var(--line);
  font-size:12px;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.chat__jump[hidden]{display:none}
.chat__jump svg{width:15px;height:15px}

/* A trainer's card, opened from their name: who they are, and what
   can be done about them from here. */
.pcard{
  position:absolute;left:8px;right:8px;top:8px;z-index:25;max-width:360px;
  display:grid;gap:12px;padding:14px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);animation:popin .14s ease-out;
}
.pcard[hidden]{display:none}
.pcard__top{display:flex;align-items:center;gap:12px;padding-right:30px}
.pcard__n{display:flex;align-items:center;gap:8px;font:700 17px var(--display)}
.pcard small{display:block;font-size:12px;color:var(--txt-dim);line-height:1.5}
.pcard__x{position:absolute;right:8px;top:8px;width:30px;height:30px;padding:7px;border-radius:8px;color:var(--txt-dim)}
.pcard__x:hover{background:var(--ink-3);color:var(--txt)}
.pcard__acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pcard__acts button{
  display:flex;align-items:center;justify-content:center;gap:7px;height:40px;
  border-radius:10px;background:var(--ink-3);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;transition:border-color .12s
}
.pcard__acts button:hover{border-color:var(--txt-dim)}
.pcard__acts svg{width:16px;height:16px;flex-shrink:0}
.pcard__acts .is-danger{color:#FF8A80}

/* ── Writing ─────────────────────────────────────── */
.chat__compose{flex-shrink:0;position:relative;padding:8px;border-top:1px solid rgba(255,255,255,.06)}
.chat__reply{display:flex;align-items:center;gap:7px;padding:0 4px 7px;font-size:12px;color:var(--txt-dim);min-width:0}
.chat__reply[hidden]{display:none}
.chat__reply svg{width:13px;height:13px;flex-shrink:0}
.chat__reply b{color:var(--txt)}
.chat__reply span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chat__reply button{margin-left:auto;width:24px;height:24px;padding:5px;border-radius:6px;flex-shrink:0}
.chat__reply button:hover{background:var(--ink-3)}
/* Names to mention, and the team to show from: both open above the
   line being written. */
.chat__sug,.chat__attach{
  position:absolute;left:8px;right:8px;bottom:calc(100% - 2px);z-index:10;padding:4px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg)
}
.chat__sug[hidden],.chat__attach[hidden]{display:none}
.chat__sughead{padding:4px 8px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
.chat__sug button{display:flex;align-items:center;gap:10px;width:100%;padding:5px 8px;border-radius:8px;font-size:13px;font-weight:600}
.chat__sug button:hover,.chat__sug button.is-first{background:var(--ink-3)}
.chat__sug .pfp{width:26px;height:26px}
/* The picker: team and PC, with a search that stays put while the
   list under it scrolls. */
.chat__attach{right:auto;width:300px;max-width:calc(100% - 16px);padding:0;display:flex;flex-direction:column;max-height:min(420px,60vh)}
.chat__attachtop{padding:8px 8px 6px;border-bottom:1px solid var(--line)}
.chat__attachfind{
  width:100%;height:30px;margin-top:2px;padding:0 10px;border-radius:8px;font-size:12.5px;
  color:var(--txt);background:var(--ink-3);border:1px solid var(--line)
}
.chat__attachfind:focus{outline:none;border-color:var(--txt-dim)}
.chat__attachlist{overflow-y:auto;padding:4px 8px 8px;overscroll-behavior:contain}
.chat__attachlist .chat__sughead{padding:8px 2px 4px}
.chat__attachlist .chat__hidden{padding:2px 2px 4px;font-size:11.5px;color:var(--txt-dim)}
.chat__attachgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.chat__attachgrid button{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 6px;
  border-radius:10px;background:var(--ink-3);border:1px solid transparent;font-size:10.5px;font-weight:600;min-width:0
}
.chat__attachgrid button:hover{border-color:var(--txt-dim)}
.chat__attachgrid img{width:50px;height:50px;margin:-6px 0 -4px;object-fit:contain;image-rendering:pixelated}
.chat__attachgrid span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat__attachgrid small{font-size:9.5px;color:var(--txt-dim);font-weight:600}
.chat__attachgrid button.is-shiny{border-color:color-mix(in srgb,var(--shiny) 50%,transparent)}

.chat__form{
  display:flex;align-items:center;gap:4px;padding:4px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:12px;
  transition:border-color .16s,box-shadow .16s;
}
.chat__form:focus-within{border-color:var(--txt-dim);box-shadow:0 0 0 3px rgba(51,153,255,.14)}
.chat__form.is-readonly{opacity:.7}
.chat__form.is-readonly .chat__show,.chat__form.is-readonly .chat__send{display:none}
.chat__show{width:34px;height:34px;padding:6px;border-radius:9px;flex-shrink:0}
.chat__show:hover,.chat__show[aria-expanded="true"]{background:var(--ink-4,var(--ink-2))}
.chat__show img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.chat__input{
  flex:1;min-width:0;height:34px;padding:0 4px;font-size:13px;color:var(--txt);
  background:none;border:0;outline:none;
}
.chat__input::placeholder{color:var(--txt-dim)}
.chat__count{font:10.5px var(--mono);color:var(--txt-dim);flex-shrink:0;padding:0 2px}
.chat__count[hidden]{display:none}
.chat__count.is-max{color:var(--red-lt)}
.chat__send{
  width:34px;height:34px;padding:9px;flex-shrink:0;
  background:var(--red);border-radius:9px;transition:.16s;color:#fff;
}
.chat__send:hover{background:var(--red-lt)}

/* The one line a phone shows. Not drawn anywhere wider. */
.chat__strip{display:none}

/* The player's text size for the chat. */
.chat__log.is-small .msg{font-size:12px}
.chat__log.is-small .msg--sys,.chat__log.is-small .msg--act{font-size:11px}
.chat__log.is-large .msg{font-size:14.5px}
.chat__log.is-large .msg--sys,.chat__log.is-large .msg--act{font-size:13px}
/* Chat settings: the free-text rows. */
.opt__row--wide{flex-direction:column;align-items:stretch;gap:6px}
.opt__text{width:100%;padding:7px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink);color:var(--txt);font:inherit;
  font-size:.82rem}
.opt__ignored{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem}
.opt__ignored em{color:var(--txt-dim);font-style:normal}
.opt__ign{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 9px;
  border-radius:99px;background:var(--ink);border:1px solid var(--line)}

/* ══════════ PHONE TAB BAR ══════════ */
/* Only on a phone; see the responsive section. */
.tabbar{display:none}

/* ══════════ NEWS & EVENTS ══════════ */
/* One window, two tabs: the calendar and the patch notes. */
.newstabs{display:flex;gap:4px;margin:-4px 0 14px;border-bottom:1px solid var(--line)}
.newstabs__tab{
  position:relative;padding:9px 14px;margin-bottom:-1px;
  font-size:13px;font-weight:600;color:var(--txt-dim);
  border-bottom:2px solid transparent;transition:color .15s
}
.newstabs__tab:hover{color:var(--txt)}
.newstabs__tab.is-on{color:var(--txt);border-color:var(--acc,var(--red))}
.newstabs__dot{
  display:inline-block;width:7px;height:7px;margin-left:7px;vertical-align:2px;
  border-radius:50%;background:var(--yellow)
}

/* ══════════ PROFILE POKÉMON PICKER ══════════ */
.pfpick{display:flex;flex-direction:column;gap:12px}
.pfpick__now{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;
  background:var(--ink-3);border:1px solid var(--line)}
.pfpick__now b{display:block;font:700 16px var(--display)}
.pfpick__now small{color:var(--txt-dim);font-size:12px}
.pfpick__bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pfpick__q{flex:1;min-width:160px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--ink);color:var(--txt);font:inherit;font-size:13px}
.pfpick__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.pfpick__mon{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;
  border-radius:12px;background:var(--ink-3);border:1px solid transparent;
  font-size:11px;font-weight:600;min-width:0;transition:border-color .12s,transform .12s
}
.pfpick__mon:hover{border-color:var(--txt-dim);transform:translateY(-2px)}
.pfpick__mon.is-on{border-color:var(--shiny);box-shadow:0 0 0 1px var(--shiny)}
.pfpick__mon img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;margin:-4px 0}
.pfpick__mon span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfpick__mon.is-shiny span::before{content:'';display:inline-block;width:7px;height:7px;margin-right:3px;
  background:var(--shiny);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.pfpick__empty{color:var(--txt-dim);font-size:13px;padding:20px;text-align:center}

/* ══════════ MODAL ══════════ */
.overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:fade .16s ease;
}
.overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}}

.modal{
  width:min(1080px,100%);max-height:min(88dvh,860px);
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);
  overflow:hidden;animation:pop .2s cubic-bezier(.34,1.56,.64,1);
}
/* A floor as well as a ceiling, for the screens that redraw themselves.
   With only max-height a window was exactly as tall as whatever it
   happened to be showing, so putting a team member away — one row less
   to draw — shrank the whole PC, and doing it six times shrank it six
   times over.

   A class rather than a rule on .modal, so a window holding two lines
   of text is still two lines tall. */
.modal--tall{ height:min(88dvh,860px) }
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}}

/* The window wears the colour and the icon of the menu entry that
   opened it. */
.modal{--acc:var(--red)}
.modal__head{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px 12px 16px;border-bottom:1px solid var(--line);flex-shrink:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 18%,transparent),transparent 62%);
}
.modal__ico{
  width:40px;height:40px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 20%,var(--ink-3));
  border:1px solid color-mix(in srgb,var(--acc) 38%,transparent);
}
.modal__ico[hidden]{display:none}
.modal__ico img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.modal__titles{flex:1;min-width:0;display:flex;flex-direction:column}
.modal__grp{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.modal__grp[hidden]{display:none}
.modal__title{font:700 18px/1.2 var(--display)}
.modal__x{width:36px;height:36px;padding:9px;border-radius:10px;color:var(--txt-dim);flex-shrink:0}
.modal__x:hover{background:var(--red);color:#fff}
.modal__body{
  flex:1;overflow-y:auto;padding:17px;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.modal__body::-webkit-scrollbar{width:8px}
.modal__body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

.placeholder{text-align:center;padding:46px 20px;color:var(--txt-dim)}
.placeholder__ico{width:56px;height:56px;margin:0 auto 12px;display:block;
  object-fit:contain;image-rendering:pixelated}
.placeholder h3{font-size:17px;color:var(--txt);margin-bottom:7px}
.placeholder p{font-size:13px;line-height:1.6;max-width:44ch;margin:0 auto}

/* ============================================================
   Storage PC
   Party | box | summary, side by side once the window is wide enough,
   so picking a Pokemon shows it without scrolling. Narrower, the party
   moves above the box; on a phone the summary rises as a sheet.
   Every cell is lit in its Pokemon's types (--tc, --tc2), and a box
   can have one of the route photographs behind it.
   ============================================================ */
.pc{display:flex;flex-direction:column;gap:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Toolbar ── */
.pc__bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pc__search{flex:1 1 220px;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;
  border-radius:99px;background:var(--ink);border:1px solid var(--line);transition:border-color .15s}
.pc__search:focus-within{border-color:var(--blue)}
.pc__search svg{width:16px;height:16px;flex-shrink:0;color:var(--txt-dim)}
.pc__search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--txt);
  font:inherit;font-size:13px}
.pc__sort select{height:36px;padding:0 12px;border-radius:99px;background:var(--ink);
  border:1px solid var(--line);color:var(--txt);font:inherit;font-size:12px;outline:none}
.pc__sort select:focus{border-color:var(--blue)}
.pc__more{height:36px;display:inline-flex;align-items:center;gap:6px;border-radius:99px}
.pc__more.is-on{border-color:var(--blue);background:rgba(42,117,187,.18)}
.pc__badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--red);color:#fff;font-size:10px}
/* The bank as a pill, the Amulet Coin for money. */
.pc__bank{margin-left:auto;display:flex;align-items:center;gap:10px;padding:4px 5px 4px 10px;
  border-radius:99px;border:1px solid rgba(42,117,187,.35);
  background:linear-gradient(135deg,rgba(42,117,187,.22),rgba(27,79,134,.1))}
.pc__bank img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.pc__bank-info{display:flex;flex-direction:column;line-height:1.15}
.pc__bank-label{font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim)}
.pc__bank-val{font-size:13px;font-weight:800;font-family:var(--mono);color:var(--yellow);
  font-variant-numeric:tabular-nums}
.pc__bank .btn{border-radius:99px;padding:6px 12px;font-size:11px}

/* The eighteen types as badges to tap. */
.pc__types{display:flex;flex-wrap:wrap;gap:4px}
.pc__type{padding:2px;border-radius:99px;border:1px solid transparent;line-height:0;
  transition:opacity .15s,transform .15s,border-color .15s}
.pc__type:hover{transform:translateY(-1px)}
.pc__type.is-off{opacity:.32}
.pc__type.is-on{border-color:rgba(255,255,255,.85);box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.pc__type:focus-visible{outline:2px solid var(--yellow);outline-offset:1px}

/* The drawer with the rest. */
.pc__filters{display:grid;gap:10px 12px;padding:12px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  animation:sumPage .18s ease-out}
.fld--flags{grid-column:1/-1}

/* ── Columns ── */
.pc__layout{display:grid;gap:12px;align-items:start;grid-template-columns:minmax(0,1fr)}
.pc__party,.pc__boxcol{min-width:0}
@media (min-width:760px){
  .pc__layout{grid-template-columns:minmax(0,1fr) 340px}
  .pc__party{grid-column:1/-1}
  /* The summary stays beside the box while the box scrolls. */
  .pc__sumcol{position:sticky;top:0;max-height:calc(min(88dvh,860px) - 96px);
    overflow-y:auto;scrollbar-width:thin;border-radius:var(--r)}
}
/* In between, the team and the saved teams share one row above the
   box, and the six squares stop growing past a useful size. */
@media (min-width:760px) and (max-width:1039px){
  .pc__party{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px;align-items:start}
  .pc__party .pcpresets{margin-top:0}
  .pc__party .pcteam__head em{display:none}
}
@media (min-width:1040px){
  .pc__layout{grid-template-columns:186px minmax(0,1fr) 360px}
  .pc__party{grid-column:auto}
}
.pc__sheetx{display:none}
/* A phone: the summary is a sheet over the box, there only while
   something is picked. */
@media (max-width:759px){
  .pc__sumcol{position:fixed;left:0;right:0;bottom:0;z-index:120;max-height:86dvh;
    overflow-y:auto;padding:12px 10px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--ink-2);border-top:1px solid var(--line);border-radius:18px 18px 0 0;
    box-shadow:0 -14px 40px rgba(0,0,0,.6);transform:translateY(105%);
    transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .pc.has-sel .pc__sumcol{transform:none}
  .pc:not(.has-sel) .pc__sumcol{visibility:hidden}
  .pc__sheetx{display:grid;place-items:center;position:sticky;top:0;z-index:3;
    margin:0 0 8px auto;width:34px;height:34px;padding:8px;border-radius:50%;
    background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15)}
  .pc__sheetx svg{stroke-width:2.4}
}

/* ── The party ── */
.pcteam{padding:10px;border-radius:var(--r);background:var(--ink);border:1px solid var(--line)}
.pcteam__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.pcteam__head span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim)}
.pcteam__head em{font-size:10px;font-style:normal;color:var(--txt-dim)}
/* Six columns whatever is in it, and every place drawn, so taking one
   out never resizes the rest. */
.pcteam__row{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.pcteam__cell{display:flex;flex-direction:column;gap:3px;align-items:stretch;align-self:start;
  min-width:0}
.pcteam__slot{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;
  align-self:start;border-radius:var(--r-sm);cursor:pointer;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc,var(--ink-3)) 38%,transparent),transparent 72%),
    var(--ink-3);
  border:1px solid color-mix(in srgb,var(--tc2,var(--line)) 35%,var(--line));
  transition:transform .15s,border-color .15s}
.pcteam__slot:hover{border-color:var(--tc,var(--txt-dim));transform:translateY(-2px)}
.pcteam__slot img{width:82%;height:82%;object-fit:contain;image-rendering:pixelated}
.pcteam__slot.is-faint img{filter:grayscale(1) brightness(.7);opacity:.6}
.pcteam__slot.is-empty{cursor:default;background:transparent;border:1px dashed var(--line)}
.pcteam__slot.is-empty:hover{transform:none;border-color:var(--line)}
.pcteam__lv{position:absolute;left:3px;bottom:3px;font-size:9px;font-weight:800;line-height:1;
  padding:1px 3px;border-radius:4px;background:rgba(0,0,0,.55);font-variant-numeric:tabular-nums}
.pcteam__info{display:none}
.pcteam__store{padding:3px 0;font:inherit;font-size:9px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;color:var(--txt-dim);background:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-sm);transition:background .15s,color .15s}
.pcteam__store:hover{background:var(--red-dk);color:#fff;border-color:transparent}
.pcteam__store:focus-visible{outline:2px solid var(--yellow);outline-offset:1px}
.pcteam__msg{margin:6px 0 0;font-size:11px;color:#FF7B7B;min-height:1em}
/* Its own column: a card per Pokemon with its name and health. */
@media (min-width:1040px){
  .pcteam__head em{display:none}
  .pcteam__row{grid-template-columns:minmax(0,1fr);gap:5px}
  .pcteam__cell{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 8px;
    align-items:center;padding:5px;border-radius:var(--r-sm);
    background:linear-gradient(110deg,color-mix(in srgb,var(--tc,var(--ink-3)) 16%,var(--ink-2)),var(--ink-2) 80%);
    border:1px solid var(--line)}
  .pcteam__slot{width:44px}
  .pcteam__info{display:flex;flex-direction:column;gap:5px;min-width:0}
  .pcteam__info b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcteam__hp{display:block;height:4px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden}
  .pcteam__hp i{display:block;height:100%;background:var(--ok)}
  .pcteam__store{grid-column:1/-1;padding:2px 0;font-size:8px}
  .pcteam__row > .pcteam__slot.is-empty{width:100%;aspect-ratio:auto;height:40px}
}

/* Saved teams. A preset is a note about which Pokemon were together,
   so an empty one reads as empty rather than as a slot to fill. */
.pcpresets{margin-top:10px;padding:10px;border-radius:var(--r);background:var(--ink);
  border:1px solid var(--line)}
.pcpresets__head{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin-bottom:8px}
.pcpresets__head span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim)}
.pcpresets__head em{font-size:10px;font-style:normal;color:var(--txt-dim)}
.pcpresets__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
@media (min-width:1040px){ .pcpresets__row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pcpreset{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:5px 4px;
  font:inherit;cursor:pointer;color:var(--txt-dim);background:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .15s,color .15s}
.pcpreset:hover{border-color:var(--yellow);color:var(--txt)}
.pcpreset.is-set{color:var(--txt)}
.pcpreset.is-open{border-color:var(--yellow);background:var(--ink-2)}
.pcpreset__n{max-width:100%;font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pcpreset__c{font-size:.66rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.pcpreset.is-set .pcpreset__c{color:var(--ok)}
.pcpreset__panel{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.pcpreset__head{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.pcpreset__name{flex:1;min-width:120px;padding:5px 8px;font:inherit;font-size:.85rem;color:var(--txt);
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm)}
.pcpreset__name:focus{outline:2px solid var(--yellow);outline-offset:1px}
.pcpreset__mons{display:flex;flex-wrap:wrap;gap:6px}
.pcpreset__mon{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 6px;
  background:var(--ink-3);border-radius:var(--r-sm)}
.pcpreset__mon img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated}
.pcpreset__mon span{font-size:.66rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.pcpreset__none{margin:0;font-size:.8rem;color:var(--txt-dim)}

/* ── The box ── */
.pc__boxcol{display:flex;flex-direction:column;gap:8px}
.pc__boxbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pc__boxnav{display:flex;align-items:center;gap:6px;min-width:0}
.pc__boxnav > button[data-box]{width:30px;height:30px;padding:7px;flex-shrink:0;border-radius:8px;
  background:var(--ink-3);border:1px solid var(--line);transition:background .15s}
.pc__boxnav > button[data-box]:hover{background:var(--blue)}
.pc__boxname{min-width:90px;max-width:220px;font-size:15px;font-weight:800;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc__boxedit{display:inline-grid;place-items:center;width:26px;height:26px;padding:5px;flex-shrink:0;
  border-radius:7px;color:var(--txt-dim);transition:background .15s,color .15s}
.pc__boxedit:hover,.pc__boxedit.is-on{background:var(--ink-3);color:var(--txt)}
.pc__boxedit svg{stroke-width:2}
.pc__count{font-size:11px;color:var(--txt-dim);font-family:var(--mono)}

/* Choosing the picture behind a box. */
.pc__walls{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px;padding:8px;
  border-radius:var(--r-sm);background:var(--ink);border:1px solid var(--line);
  animation:sumPage .18s ease-out}
.pc__wall{display:flex;align-items:flex-end;height:46px;padding:0;overflow:hidden;border-radius:8px;
  border:2px solid transparent;background-color:var(--ink-3);background-size:cover;background-position:center;
  transition:border-color .15s,transform .15s}
.pc__wall:hover{transform:translateY(-1px);border-color:var(--line)}
.pc__wall.is-on{border-color:var(--yellow)}
.pc__wall span{width:100%;padding:2px 5px;font-size:9px;font-weight:700;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.8))}
.pc__wall.is-none{align-items:center;justify-content:center;background:var(--ink-3)}
.pc__wall.is-none span{background:none;text-align:center;color:var(--txt-dim)}

.pc__grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
  align-content:start;min-height:200px;padding:10px;border-radius:var(--r);
  background:var(--ink);border:1px solid var(--line)}
.pc__grid.has-wall{background-size:cover;background-position:center}
.pc__empty{grid-column:1/-1;margin:0;padding:34px 12px;text-align:center;font-size:12px;
  color:var(--txt-dim);border-radius:8px;background:rgba(14,17,22,.6)}

/* A cell, glowing in its first type over a strip of both. */
.pcmon{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;cursor:pointer;
  border-radius:10px;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc,var(--ink-3)) 36%,transparent),transparent 72%),
    rgba(30,37,47,.84);
  border:1px solid color-mix(in srgb,var(--tc,var(--line)) 30%,var(--line));
  transition:transform .13s,border-color .13s,box-shadow .13s}
.pcmon::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--tc,transparent) 50%,var(--tc2,transparent) 50%)}
.pcmon:hover{transform:scale(1.08);border-color:var(--tc,var(--red-lt));z-index:2}
.pcmon.is-sel{z-index:1;border-color:#fff;
  box-shadow:0 0 0 2px var(--tc,var(--yellow)),0 0 14px color-mix(in srgb,var(--tc,var(--yellow)) 55%,transparent)}
.pcmon img{width:88%;height:88%;object-fit:contain;image-rendering:pixelated}
.pcmon.is-shiny{border-color:var(--shiny);box-shadow:inset 0 0 10px rgba(255,213,74,.28)}
.pcmon.is-shadow{border-color:var(--shadow);box-shadow:inset 0 0 10px rgba(155,92,255,.3)}
.pcmon.is-fav{box-shadow:inset 0 0 0 1px var(--yellow-dk)}
/* The marks, one per corner: what it holds top-left, shiny or shadow
   top-right, the sex bottom-left, a favourite bottom-right. */
.pcmon__tag{position:absolute;top:2px;right:3px;font-size:8px;font-weight:800;
  text-shadow:0 1px 2px #000;pointer-events:none}
.pcmon__sex{position:absolute;bottom:4px;left:3px;font-size:11px;line-height:1;pointer-events:none}
.pcmon__fav{position:absolute;bottom:4px;right:3px;font-size:10px;line-height:1;color:var(--yellow);
  pointer-events:none}
.pcmon__item{position:absolute;top:2px;left:2px;width:13px;height:13px;line-height:0;
  border-radius:3px;background:rgba(0,0,0,.45);pointer-events:none}
.pcmon__item img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}

/* Marking several to release at once. A marked square is unmistakable
   - a green ring and a tick - because releasing has no undo. */
.pcmon.is-marked{border-color:#77CC55;
  box-shadow:0 0 0 2px rgba(119,204,85,.55);background:rgba(119,204,85,.13)}
.pcteam__slot.is-marked{border-color:#77CC55;
  box-shadow:0 0 0 2px rgba(119,204,85,.55);background:rgba(119,204,85,.13)}
.pcmon.is-marked::after{content:'';position:absolute;right:3px;bottom:5px;width:13px;height:13px;
  border-radius:50%;background:#77CC55;
  clip-path:polygon(14% 46%,0 60%,38% 96%,100% 26%,86% 14%,38% 68%)}
.pc__grid.is-picking .pcmon:hover{transform:scale(1.04);border-color:#77CC55}
.pcmark{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.pcmark.is-on{padding:7px 9px;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid rgba(119,204,85,.5)}
.pcmark__n{flex:1;min-width:120px;font-size:.76rem;color:var(--txt-dim)}
.pcmark .btn[disabled]{opacity:.45;cursor:default}

/* One tile per box with how full it is. */
.pc__strip{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
@media (max-width:620px){ .pc__strip{grid-template-columns:repeat(8,minmax(0,1fr))} }
.pc__stripbox{display:flex;flex-direction:column;justify-content:space-between;height:30px;padding:3px 4px;
  overflow:hidden;border-radius:6px;border:1px solid var(--line);
  background-color:var(--ink-3);background-size:cover;background-position:center;
  transition:border-color .15s,transform .15s}
.pc__stripbox:hover{transform:translateY(-1px);border-color:var(--txt-dim)}
.pc__stripbox.is-on{border-color:var(--yellow)}
.pc__stripbox.is-empty{opacity:.55}
.pc__stripn{font-size:9px;font-weight:800;line-height:1;text-align:left;color:var(--txt-dim)}
.pc__stripbox.is-on .pc__stripn{color:var(--txt)}
.pc__stripfill{display:block;height:3px;border-radius:2px;background:rgba(0,0,0,.5);overflow:hidden}
.pc__stripfill i{display:block;height:100%;background:var(--ok)}

.btn{
  padding:7px 15px;font-size:12px;font-weight:700;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line);transition:.16s;
}
.btn:hover{background:var(--line)}
.btn--pri{background:var(--red);border-color:var(--red-lt)}
.btn--pri:hover{background:var(--red-lt)}
.btn--blue{background:var(--blue);border-color:var(--blue)}
.btn--blue:hover{filter:brightness(1.2)}

.fld{display:flex;flex-direction:column;gap:4px}
.fld__lbl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.fld input,.fld select{
  padding:6px 10px;font-size:12px;font-family:inherit;color:var(--txt);
  background:var(--ink-3);border:1px solid var(--line);border-radius:6px;outline:none;
  transition:border-color .16s;width:100%;
}
.fld input:focus,.fld select:focus{border-color:var(--red)}
.fld--range{grid-column:span 2}
.rangebox{display:flex;align-items:center;gap:7px}
.rangebox input[type=range]{flex:1;accent-color:var(--red);padding:0}
.rangebox output{font-family:var(--mono);font-size:11px;min-width:26px;text-align:right;color:var(--yellow)}
/* Two ends of a level band, sat where a slider would be. Both boxes
   share the width evenly so neither looks like the important one. */
.lvlbox{display:flex;align-items:center;gap:6px}
.lvlbox input[type=number]{
  flex:1;min-width:0;width:100%;padding:5px 7px;
  font-family:var(--mono);font-size:11px;text-align:center;
  background:var(--ink-3);border:1px solid var(--line);border-radius:6px;
  color:var(--txt);
}
.lvlbox input[type=number]:focus{border-color:var(--red);outline:none}
.lvlbox__to{font-size:10px;color:var(--txt-dim);flex-shrink:0}
.chips{display:flex;gap:5px;flex-wrap:wrap}
/* What the Sanctum boss will bring, so the one attempt a day can be
   prepared for rather than walked into. */
.bosscard__moves{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.bmove{display:flex;align-items:center;gap:5px;padding:3px 7px;
  border-radius:6px;background:var(--ink-3);border:1px solid var(--line)}
.bmove b{font-size:11px;font-weight:600;color:var(--txt)}
.bmove i{font-style:normal;font-size:9px;padding:1px 5px;border-radius:99px}
.bmove em{font-style:normal;font-size:10px;font-family:var(--mono);
  color:var(--txt-dim)}
.chip{
  padding:5px 11px;font-size:11px;font-weight:700;border-radius:99px;
  background:var(--ink-3);border:1px solid var(--line);transition:.16s;
}
.chip:hover{border-color:var(--txt-dim)}
.chip.is-on{background:var(--red);border-color:var(--red-lt);color:#fff}
.chip--shiny.is-on{background:var(--shiny);border-color:var(--shiny);color:#3A2E00}
.chip--shadow.is-on{background:var(--shadow);border-color:var(--shadow)}

/* A Pokemon marked as one to keep, and which sex it is. A box of
   thirty looks the same at a glance; both of these are what tells one
   apart from the next. */
.chip--fav.is-on{background:rgba(255,203,5,.16);border-color:var(--yellow-dk);
  color:var(--yellow)}
.sex--m{color:#6aa9ff}
.sex--f{color:#ff8fb0}

/* A team member is tapped to look at and stored with its own button.
   Tapping used to put it away on the spot. */
/* Rank colours.

   Ten names, and the stylesheet decides what each one is. A free
   colour would mean a value a player typed ending up in a style
   attribute, which is a way to put CSS on everybody else's screen -
   so the guild picks from a list and this is the list. */
.rankc--default{--rank-c:var(--txt-dim)}
.rankc--red{--rank-c:#ff6b6b}
.rankc--orange{--rank-c:#ff9f45}
.rankc--yellow{--rank-c:var(--yellow)}
.rankc--green{--rank-c:#5ede8f}
.rankc--teal{--rank-c:#3fd6c8}
.rankc--blue{--rank-c:#68a0ff}
.rankc--purple{--rank-c:#b07cff}
.rankc--pink{--rank-c:#ff7fc4}
.rankc--grey{--rank-c:#96a3b5}

/* The rank under a member's name takes it. */
.gmember__rank{color:var(--rank-c,var(--txt-dim))}

/* The swatch beside a rank's name in the editor. The row's own left
   edge is coloured further down, next to the rule that draws the row
   - a border-left here is overwritten by the `border:` shorthand in
   that rule, which comes later and wins. */
.grank-swatch{width:12px;height:12px;border-radius:3px;flex:0 0 auto;
  background:var(--rank-c,var(--line));
  border:1px solid rgba(255,255,255,.15)}
.grank-colour{background:var(--ink-3);color:var(--txt);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:3px 6px;font:inherit;font-size:.76rem}
.grank-colour:focus{outline:2px solid var(--yellow);outline-offset:1px}

/* ══════════ RESPONSIVE ══════════ */
/* A narrow desktop: the chat gives up a little width before the
   stage has to. */
@media (max-width:1180px){
  :root{--chat-w:300px}
  .location__btn{min-width:140px}
  .stat{min-width:86px;padding:6px 11px}
}
@media (max-width:1020px) and (min-width:861px){
  .hstatus .online__label,.hstatus .daynight__label{display:none}
  .topbar__left{gap:8px}
}

/* ══════════ A PHONE, OR A TABLET UPRIGHT ══════════

   There is no room for three columns, so the screen becomes one:
   the header, the stage, one line of chat, and a tab bar under the
   thumb with the five things opened most. Everything in the side
   menu is in the Menu sheet that tab opens, laid out as a grid of
   tiles by group. The chat opens as a sheet of its own.

   `min-width:0` appears more than once on purpose. A flex or grid
   child defaults to min-width:auto, which means "never shrink below
   my content" — that is what pushed rows past the edge of the screen
   before, and it has to be undone at every level of the chain. */
@media (max-width:860px){
  :root{--sidebar-w:0px;--tabbar-h:64px}
  #app,#app.is-chat-folded{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"head" "main" "chat" "tabs";
    gap:8px;padding:8px 8px 0;
  }
  #app,.stage,.topbar,.chat{min-width:0;max-width:100%}

  /* ── The header, in two short rows ── */
  .topbar{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nav acct" "status money";
    gap:6px 8px;padding:6px 8px;
  }
  .topbar__left,.topbar__right{display:contents}
  .routenav{grid-area:nav;min-width:0}
  .routenav__btn{width:40px;height:44px;padding:11px 10px}
  .location{flex:1;min-width:0}
  .location__btn{width:100%;min-width:0;max-width:none;align-items:center;text-align:center;padding:2px 4px}
  .location__label{display:none}
  .location__name{font-size:16px}
  .location__terrain{justify-content:center;font-size:11px}
  .popmenu{left:50%;transform:translateX(-50%);min-width:min(280px,calc(100vw - 24px));animation:none}
  .popmenu--right{left:auto;right:0;transform:none}
  .hstatus{grid-area:status;justify-content:flex-start}
  .hmoney{grid-area:money;justify-self:end}
  .account{grid-area:acct}
  .account__btn,.account__btn .pfp{width:40px;height:40px}
  /* The Dexes are in the tab bar and the rankings in the menu. */
  .topbar .iconbtn{display:none}
  .online__label{display:none}      /* the dot and the number say it */
  /* The stone says which half of the day it is; the word would only
     be repeating it, and the header is short of room. */
  .daynight__label{display:none}
  /* The clock stays: it is the part that cannot be guessed from the
     stone, and the reason the header carries this at all. */
  .daynight{padding:4px 8px}
  .daynight__clock{padding-left:5px;font-size:.7rem}

  /* ── The menu, as a sheet ── */
  .sidebar__toggle{display:none}
  .sidebar,.sidebar.is-open{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;
    width:auto;max-height:84dvh;
    padding:52px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 12px);
    border-radius:24px 24px 0 0;border-bottom:0;
    background:var(--ink-2);
    transform:translateY(105%);
    transition:transform .28s cubic-bezier(.3,.9,.3,1);
  }
  /* `none` rather than translateY(0): any transform at all makes the
     panel the box its fixed children are placed against, and the
     darkened backdrop below would then cover the sheet and nothing
     else. */
  .sidebar.is-open{transform:none}
  .sidebar::before{
    content:'';position:absolute;top:9px;left:50%;width:40px;height:5px;
    margin-left:-20px;border-radius:3px;background:var(--line)
  }
  .sidebar.is-open::after{
    content:'';position:fixed;inset:0;z-index:-1;
    background:rgba(6,9,13,.55);
  }
  .sidebar__brand{top:22px;left:18px;opacity:1}
  .sidebar__edit{position:absolute;top:14px;right:14px;width:auto;margin:0}
  .sidebar .sidenav__txt{opacity:1}
  .sidebar .sidegroup__h{font-size:10px}
  .sidebar .sidegroup__h::before{width:12px;margin:0 0 0 2px}
  /* Groups as rows of four tiles. */
  .sidegroup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .sidegroup[hidden]{display:none}
  .sidegroup__h{grid-column:1/-1}
  .sidegroup--foot{margin-top:4px}
  .sidenav,.sidegroup--foot .sidenav{
    flex-direction:column;justify-content:flex-start;gap:6px;height:auto;
    padding:4px 2px 6px;text-align:center;white-space:normal;
  }
  .sidenav__ico,.sidegroup--foot .sidenav__ico{
    box-sizing:content-box;width:32px;height:32px;padding:12px;border-radius:17px;
    background:color-mix(in srgb,var(--acc) 14%,var(--ink-3));
    border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
  }
  .sidenav:hover,.sidenav.is-active{background:none;box-shadow:none;border-color:transparent}
  .sidenav.is-active::before{display:none}
  .sidenav__txt{font-size:11px;line-height:1.2}
  .sidenav__count{left:calc(50% + 12px);top:0}
  .sidenav__note{left:auto;right:calc(50% - 30px);bottom:auto;top:44px}
  .sidenav--phone{display:flex}
  /* Arranging needs a list rather than tiles: the drag follows the
     finger up and down. */
  .sidebar.is-editing .sidegroup{display:flex;flex-direction:column}
  .sidebar.is-editing .sidenav{flex-direction:row;height:44px;padding:8px 10px;text-align:left}
  .sidebar.is-editing .sidenav__ico{box-sizing:border-box;width:28px;height:28px;padding:0;background:none;border:0}
  .sidebar.is-editing .sidenav__tools{opacity:1}

  /* ── The tab bar ── */
  .tabbar{
    grid-area:tabs;position:relative;z-index:70;
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    margin:0 -8px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(12,15,20,.95);border-top:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .tabbar__btn{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;height:52px;min-width:0;border-radius:12px;
    font-size:10.5px;font-weight:600;color:var(--txt-dim);transition:color .15s;
  }
  .tabbar__btn img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
  .tabbar__btn img.ico-smooth{image-rendering:auto}
  .tabbar__btn img.tabbar__lead{width:34px;height:34px;margin:-3px 0}
  .tabbar__btn svg{width:24px;height:24px}
  .tabbar__btn:hover,.tabbar__btn[aria-expanded="true"],.tabbar__btn.is-active{color:var(--txt)}
  .tabbar__btn[aria-expanded="true"]::before,.tabbar__btn.is-active::before{
    content:'';position:absolute;top:-6px;left:50%;width:30px;height:3px;margin-left:-15px;
    border-radius:0 0 3px 3px;background:var(--red-lt)
  }
  .tabbar__n{
    position:absolute;top:3px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;
    border-radius:9px;background:#e0202a;color:#fff;border:2px solid var(--ink);
    font:800 10px/13px var(--display);text-align:center
  }
  .tabbar__n[hidden]{display:none}

  /* ── The stage ── */
  .stage{padding-left:2px;padding-right:2px;gap:10px}
  .stats{flex-wrap:nowrap;gap:5px;width:100%}
  .stat{min-width:0;flex:1 1 0;padding:5px 7px}
  .stat__val{font-size:15px}
  .stat--quiet .stat__val{font-size:13px}
  .stat__key{font-size:8px;letter-spacing:.07em}
  .stat__odds{font-size:8.5px}
  .ballwrap{--sz:clamp(110px,22vh,156px)}
  .team{padding:7px;gap:0}
  .team__slots{gap:5px}
  .slot{width:clamp(38px,12.6vw,52px);height:clamp(38px,12.6vw,52px);border-radius:12px}
  /* The PC and the Bag are in the tab bar. */
  .team__acts{display:none}
  .clickhint{display:none}

  /* ── The chat: one line, and a sheet ── */
  .chat{border-radius:14px}
  .chat > *{display:none!important}
  .chat > .chat__strip{display:flex!important}
  .chat__strip{
    align-items:center;gap:10px;width:100%;height:50px;padding:0 10px 0 8px;text-align:left
  }
  .chat__strip .pfp{width:32px;height:32px}
  .chat__striptxt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:12.5px;color:var(--txt-dim)}
  .chat__striptxt b{color:#8EC5FF}
  .chat__strip > svg{width:18px;height:18px;color:var(--txt-dim);flex-shrink:0}
  .chat.is-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:90;height:88dvh;
    border-radius:24px 24px 0 0;border-bottom:0;background:var(--ink-2);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -20px 50px rgba(0,0,0,.55),0 0 0 100vmax rgba(4,6,9,.5);
    animation:sheetUp .26s cubic-bezier(.3,.9,.3,1);
  }
  @keyframes sheetUp{from{transform:translateY(40px);opacity:.4}}
  .chat.is-sheet > .chat__head{display:flex!important;padding-top:14px}
  .chat.is-sheet > .chat__head::before{
    content:'';position:absolute;top:6px;left:50%;width:40px;height:5px;margin-left:-20px;
    border-radius:3px;background:var(--line)
  }
  .chat.is-sheet > .chat__body{display:flex!important}
  .chat.is-sheet > .chat__compose{display:block!important}
  .chat.is-sheet > .chat__pin:not([hidden]){display:flex!important}
  .chat.is-sheet > .chat__filters:not([hidden]){display:block!important}
  .chat.is-sheet > .chat__strip{display:none!important}
  .chat.is-sheet .chat__collapse svg{transform:rotate(90deg)}
  /* Folding is a desktop idea; a phone keeps its one line. */
  .chat.is-collapsed > .chat__strip{display:flex!important}
  .chat.is-collapsed > .chat__rail{display:none!important}
  .chat__filters{top:58px}
  .msg__acts{top:-14px}

}

@media (max-width:520px){
  .fld--range{grid-column:span 2}
}

@media (max-width:620px){
  /* Modals use the whole screen; a centred card with margins wastes
     a third of a phone. */
  .overlay{padding:0}
  .modal{
    width:100%;max-width:100%;height:100dvh;max-height:100dvh;
    border-radius:0;
  }
  .modal__body{padding:12px}
  .modal__head{padding:11px 13px}

  /* Anything laid out in columns becomes one column. */
  .shop__body,.nurs__pair,.lm__grid,.bag__grid{
    grid-template-columns:1fr;
  }
  .fld--range{grid-column:auto}
}

/* Very narrow, or a small phone in landscape. */
@media (max-width:380px){
  .stat__key{display:none}          /* the number is the point */
  .routenav__btn{width:36px;padding:11px 8px}
  .location__name{font-size:15px}
}

@media (max-height:620px) and (min-width:861px){
  .stat{padding:4px 10px}
  .clickhint{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   BATTLE SCREEN
   ============================================================ */
.battle{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  opacity:0;transition:opacity .42s ease;
  overflow:hidden;
}
.battle.is-in{opacity:1}
.battle[hidden]{display:none}

.battle__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 22%,rgba(80,190,150,.28),transparent 62%),
    linear-gradient(178deg,#0C2A24 0%,#10382C 42%,#1A4A34 72%,#245C3C 100%);
  /* Scenery only. It covers the whole battle screen, so without this
     it sits over the menu and swallows every click on FIGHT, BAG and
     the move buttons. */
  pointer-events:none;
}
.battle__bg::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);
  opacity:.4;
}

.battle__field{
  position:relative;flex:1;min-height:0;
  width:min(100%,1180px);margin:0 auto;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(10px,2.4vh,26px) clamp(12px,4vw,52px);
}
/* The two sides, laid out the way every Pokemon battle has been:
   the opponent up and to the right, yours down and to the left.

   They were the other way round - the foe on the left with its card
   beside it, yours on the right - so every attack you launched
   travelled from the right of the screen towards the left while the
   Pokemon being hit was in the top-left corner. The animation reads
   the real positions of both sprites, so it was never wrong about
   where it was aiming; the field was mirrored underneath it.

   row-reverse rather than reordering the markup: the card is written
   before the sprite on the foe's side and after it on yours, and
   flipping the visual order here keeps the reading order - name,
   then health, then the Pokemon - intact for a screen reader. */
.bside{display:flex;align-items:center;gap:clamp(8px,3vw,32px)}
/* Only the cards are packed here now — the sprites are placed against
   the field below, so each row holds its card alone. The series puts
   the foe's card top-left and yours bottom-right, away from the
   Pokemon each belongs to, and that is what these read as with the
   sprites standing where they now stand. */
.bside--foe{justify-content:flex-start}
.bside--me{justify-content:flex-end}

/* Where the two of them stand.

   The backdrops are painted with the ground in the middle and scenery
   up at the edges, so a foe pinned to the far left stood in the trees
   rather than on the grass. The series puts the foe out to the right
   and a little back, you to the left and nearer the camera; that is
   also where these paintings leave room. Percentages rather than
   pixels, so it holds at any size, and the pair are nudged towards
   the centre where the ground actually is.

   Nothing in js/battle-anim.js needs to know: it measures both
   sprites with getBoundingClientRect() every time. */
/* Standing spots, set against the field rather than packed by flex.

   row-reverse with flex-end pinned the foe to the far left edge — into
   the trees on every one of these backdrops, because they paint the
   ground across the middle and scenery up the sides. Taking the sprite
   out of the flow lets it stand where the ground actually is: the foe
   right of centre and higher up (further away), you left of centre and
   lower (nearer the camera), as the series arranges them.

   The cards stay in the flex flow where they were. Nothing in
   js/battle-anim.js needs to know — it measures both sprites with
   getBoundingClientRect() on every effect. */
.bmon{position:relative;flex-shrink:0}
/* A quarter larger than they were. Players reported the whole screen
   reading as small on a desktop, and they were right: these numbers
   were chosen against the drawn CSS scenes, which filled the field
   themselves. Against a painted backdrop the Pokemon are the subject
   and were sized like props.

   The phone rules further down are untouched — there the sprites are
   as large as the width allows already. */
.bmon img{
  width:clamp(120px,23.8vh,238px);height:clamp(120px,23.8vh,238px);
  object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

/* Set after the base rules above, which would otherwise win on order.

   Anchored to .battle__field rather than to .bside: a row is only as
   tall as the card in it (~72px), so a percentage there moved the
   sprite a few pixels and left the foe hanging off the top card,
   above the rooftops. Against the field, the percentages mean what
   they say — these backdrops put their ground across the lower middle
   and their sky and scenery up top. */
.bside{position:static}
.battle__field .bmon{position:absolute;margin:0}
.bside--foe .bmon{right:16%;bottom:32%}
.bside--me  .bmon{left:12%;bottom:2%}

/* The foe stands further off, so it is drawn smaller — the same
   quarter larger than it was, keeping the distance between them. */
.bside--foe .bmon img{
  width:clamp(100px,19.4vh,195px);height:clamp(100px,19.4vh,195px);
}
.bmon::after{
  content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:74%;height:13px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.42),transparent 70%);
}
.bmon img.is-shiny{filter:drop-shadow(0 0 14px var(--shiny)) drop-shadow(0 8px 18px rgba(0,0,0,.55))}

/* ── A rare one announcing itself ─────────────────────

   Stars burst outward from the Pokemon and fall away, and the sprite
   flares once underneath them. The sting was already playing and the
   log already said so; this is the part a player actually looks at.

   The container is added and removed by the battle screen, so nothing
   here runs unless a Shiny or a Shadow is on the field. */
.rarefx{
  position:absolute;left:50%;top:50%;width:0;height:0;
  pointer-events:none;z-index:8;
}
/* Bigger than a first guess suggested. At 7px the stars vanished
   into the glow around the sprite — the burst was there in the DOM
   and invisible on screen, which is the same as not having it. */
.rarefx i{
  position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px;
  background:#FFF6D0;
  /* A four-pointed star rather than a dot: it reads as a sparkle even
     at this size, where a circle just reads as a bubble. */
  clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);
  box-shadow:0 0 10px var(--shiny),0 0 22px var(--shiny);
  opacity:0;
  animation:rareStar var(--dur,.9s) ease-out var(--delay,0s) forwards;
}
.rarefx.is-shadow i{
  background:#E4D2FF;
  box-shadow:0 0 10px var(--shadow),0 0 22px var(--shadow);
}
@keyframes rareStar{
  0%   {opacity:0;transform:rotate(var(--a)) translateX(10px) scale(.3)}
  15%  {opacity:1;transform:rotate(var(--a)) translateX(46px) scale(1.5)}
  65%  {opacity:1;transform:rotate(var(--a)) translateX(var(--far,96px)) scale(1)}
  100% {opacity:0;transform:rotate(var(--a)) translateX(var(--far,96px)) translateY(30px) scale(.4)}
}

/* One bright pulse over the sprite as the stars go out. */
.bmon img.is-flare{animation:rareFlare .62s ease-out}
@keyframes rareFlare{
  0%  {filter:drop-shadow(0 0 14px var(--shiny)) brightness(1)}
  28% {filter:drop-shadow(0 0 30px var(--shiny)) brightness(1.85) saturate(1.3)}
  100%{filter:drop-shadow(0 0 14px var(--shiny)) brightness(1)}
}
.bmon img.is-shadow.is-flare{animation:rareFlareDark .62s ease-out}
@keyframes rareFlareDark{
  0%  {filter:drop-shadow(0 0 14px var(--shadow)) brightness(.62) contrast(1.35)}
  28% {filter:drop-shadow(0 0 32px var(--shadow)) brightness(1.15) contrast(1.5)}
  100%{filter:drop-shadow(0 0 14px var(--shadow)) brightness(.62) contrast(1.35)}
}

@media (prefers-reduced-motion:reduce){
  .rarefx{display:none}
  .bmon img.is-flare,.bmon img.is-shadow.is-flare{animation:none}
}
.bmon img.is-shadow{filter:drop-shadow(0 0 14px var(--shadow)) brightness(.62) contrast(1.35)}

/* A Pokemon is not on the field until it has been sent out. Without
   this it stands there from the first frame, and the trainer's throw
   looks like it arrives too late for something already visible.

   Being on the field and the spawn animation are two different
   things: `.is-onfield` is set when the ball opens and stays for the
   rest of the battle, while `.is-spawn` plays once and is cleared
   again so a switch-in can replay it. */
.bmon img{opacity:0}
.bmon.is-onfield img{opacity:1}
.bmon--foe.is-spawn img{animation:spawnFoe .62s cubic-bezier(.34,1.56,.64,1)}
.bmon--me.is-spawn img{animation:spawnMe .62s cubic-bezier(.34,1.56,.64,1)}
@keyframes spawnFoe{from{opacity:0;transform:translateX(70px) scale(.5)}}
@keyframes spawnMe{from{opacity:0;transform:translateX(-70px) scale(.5)}}

.bmon.is-hit img{animation:hitShake .3s ease}
@keyframes hitShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px);filter:brightness(2.4)}
  50%{transform:translateX(8px)}
  75%{transform:translateX(-4px);filter:brightness(1.8)}
}
.bmon.is-faint img{animation:faintDrop .8s ease forwards}
@keyframes faintDrop{to{opacity:0;transform:translateY(64px) scale(.72)}}
#b-me-img.is-evolving{animation:evoPulse .5s ease-in-out infinite alternate}
@keyframes evoPulse{to{filter:brightness(4) saturate(0);transform:scale(1.16)}}

/* ── The battle HUD ───────────────────────────────────

   Taken from WorlddexOnline's battle screen (BattleScreen.gd,
   ActionPanel.gd, MegaOrb.gd): dark rounded name plates, and the four
   commands as four coloured slabs with the field showing between them.
   The colours are that screen's own, named once here. The lettering is
   this game's font, not the pixel face the Godot build uses. */
:root{
  --bplate:#1E222C;                     /* MenuTheme.CARD */
  --bplate-edge:rgba(255,255,255,.09);  /* MenuTheme.GLASS_BRD */
  --btrack:#2A3340;                     /* MenuTheme.LINE */
  --bslab-ink:rgba(15,15,23,.92);       /* the slab outline */
  --bslab-fight:#C42B2B;
  --bslab-team:#2E6E32;
  --bslab-bag:#D88628;
  --bslab-run:#2B49A8;
  --bslab-gold:#FFD54A;
  --bmega-glow:#B04CE0;
}

/* The name plate: one dark rounded card, the name on top with the
   level and sex beside it, the team's balls and the status under that,
   then the health bar across the whole plate. */
.bcard{
  position:relative;
  min-width:clamp(200px,30vw,300px);
  padding:7px 12px 8px;
  background:var(--bplate);
  border:1px solid var(--bplate-edge);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.bcard__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* A long name is shortened; the level beside it never is. */
.bcard__title{justify-content:flex-start}
.bcard__name{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:16px;font-weight:700;letter-spacing:.02em;
  text-shadow:1px 1px 0 rgba(0,0,0,.9);
}
.bcard__lv{
  flex:0 0 auto;
  font-size:14px;font-family:var(--mono);color:#EEF2F7;
  text-shadow:1px 1px 0 rgba(0,0,0,.9);
}
/* The team's balls to the left, the status to the right. Held open
   at the height of a ball so the bar does not jump when either
   appears. */
.bcard__info{min-height:16px;margin-top:3px}
.bcard__info .bcard__team{flex:1 1 auto;margin-top:0}
/* The 16px ball artwork at its own size, as the Godot plate draws it;
   smaller, the balls read as coloured dots. */
.bcard__info .teamdot{width:16px;height:16px}
.bcard__hpnum{
  font-size:15px;font-weight:700;font-family:var(--mono);color:#EEF2F7;
  text-shadow:1px 1px 0 rgba(0,0,0,.9);
}
.bcard__status{
  font-size:9px;font-weight:800;letter-spacing:.06em;
  color:var(--yellow);min-height:12px;
  display:inline-flex;align-items:center;
}
.bcard__status[hidden]{display:none}

/* The condition badge is artwork, not text. Kept small enough to sit
   on the health card without crowding the name, and pixel-scaled so
   it stays crisp next to the sprites. */
.bstatus__ico{
  height:15px;width:auto;display:block;
  image-rendering:pixelated;
}
/* The bar runs the full width of the plate. A short one read as a
   broken gauge in the Godot build, and so it does here. */
.hpbar{
  height:8px;margin-top:5px;border-radius:3px;
  background:var(--btrack);overflow:hidden;
}
.hpbar i{
  display:block;height:100%;border-radius:3px;width:100%;
  transition:width .5s cubic-bezier(.4,0,.2,1),background .3s;
}
/* The weather banner, top centre of the arena. Each kind gets its
   own tint so it reads at a glance without an icon. */
.bwx{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:7;
  padding:4px 12px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;
  background:rgba(6,9,13,.72);border:1px solid var(--glass-brd);
  backdrop-filter:blur(8px);color:var(--txt);
}
.bwx[hidden]{display:none}
.bwx.is-sun{border-color:#F0C040;color:#FFD866}
.bwx.is-rain{border-color:#4FA8F5;color:#8CC8FF}
.bwx.is-sand{border-color:#C2A05A;color:#E0C68A}
.bwx.is-hail{border-color:#7FD4E8;color:#B4E8F5}

/* The gender mark sits after the level, as the Godot plate has it.
   Blue and pink are the series' own colours for it, and a genderless
   species shows nothing at all. */
.bcard__sex{flex:0 0 auto;font-size:13px;font-weight:800;line-height:1}
.bcard__sex.is-male{color:#5FA8F5}
.bcard__sex.is-female{color:#F57FB0}
.hpbar i.is-ok{background:#3FD98A}
.hpbar i.is-warn{background:#FFCB05}
.hpbar i.is-low{background:#EE4B3B}
/* Experience under the health, thinner and blue, so it is never
   mistaken for it. Only the player's plate has one. */
.expbar{
  height:4px;margin:5px 0 0;border-radius:2px;
  background:var(--btrack);overflow:hidden;
}
.expbar i{
  display:block;height:100%;border-radius:2px;background:#5AA9E8;
  transition:width .5s ease;width:0;
}

/* Bottom UI */
.battle__ui{
  /* Raised above .battle__field, which comes first in the document and
     is positioned too: the Mega key sits above this strip's top edge,
     and without this the field is painted over it and swallows the
     click that would have reached it. */
  position:relative;z-index:2;flex-shrink:0;
  display:grid;grid-template-columns:1fr auto;gap:10px;
  padding:12px clamp(12px,4vw,52px) clamp(14px,3vh,26px);
}
/* The message box, matching the health cards rather than sitting in a
   style of its own: the same plate colour, the same pale outline and
   the same rounding. */
.blog{
  min-height:clamp(72px,13vh,104px);max-height:clamp(72px,13vh,104px);
  overflow-y:auto;padding:11px 16px;
  background:#011017;
  border:2px solid #9fa4ab;border-radius:9px;
  box-shadow:0 3px 10px rgba(0,0,0,.55),
             inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:14px;line-height:1.5;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.blog::-webkit-scrollbar{width:5px}
.blog::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.blog__line{margin-bottom:2px}
.blog__line.is-sys{color:var(--yellow);font-weight:700}
.blog__line.is-good{color:var(--ok);font-weight:700}

/* The command menu: four slabs, two by two, after WorlddexOnline's
   ActionPanel. Each has its own colour - FIGHT red, POKéMON green, BAG
   orange, RUN blue - and the corner facing the middle cut off, so the
   four lean away from each other and leave a diamond between them.
   Nothing is painted in the gaps: the field shows through, which is
   what makes the four read as one control rather than four buttons.

   The block itself draws nothing. The drop shadow sits on it rather
   than on the slabs, because a clip-path cuts the shadow off with the
   corner. */
.bmenu{
  --c:24px;   /* how deep the corner cut is */
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;
  align-content:start;align-self:start;
  width:clamp(250px,28vw,340px);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.bbtn{
  padding:10px 5px;
  font-size:clamp(17px,2.2vh,21px);font-weight:800;letter-spacing:.03em;
  background:transparent;
  border:0;border-radius:4px;
  color:#14171b;
  text-align:left;
  display:flex;align-items:center;gap:7px;
  transition:.12s;
}
.bbtn:hover{background:rgba(0,0,0,.13);color:#000}
/* One slab. The button is the dark outline; the colour is a copy of
   the same shape three pixels in, with a light line along its top
   edge so the slab reads as raised rather than flat. isolation keeps
   the colour layer above the outline and under the label. */
.bmenu .bbtn{
  --slab:var(--bslab-fight);
  --cut:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%);
  --cut-in:polygon(0 0,100% 0,100% calc(100% - var(--c) + 2px),calc(100% - var(--c) + 2px) 100%,0 100%);
  position:relative;isolation:isolate;
  min-height:clamp(42px,6.2vh,56px);
  padding:0 calc(var(--c) * .5);
  justify-content:center;text-align:center;
  background:var(--bslab-ink);
  border-radius:0;
  clip-path:var(--cut);
  color:#fff;
  font-size:clamp(16px,2.1vh,20px);font-weight:800;letter-spacing:.06em;
  /* The lettering is outlined, as the slabs are strong colours and
     plain white on red is hard to read at speed. */
  text-shadow:
    -1.5px -1.5px 0 var(--bslab-ink), 1.5px -1.5px 0 var(--bslab-ink),
    -1.5px 1.5px 0 var(--bslab-ink), 1.5px 1.5px 0 var(--bslab-ink),
    0 2px 0 var(--bslab-ink);
  cursor:pointer;
}
.bmenu .bbtn::before{
  content:'';position:absolute;inset:3px;z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.22) 0 2px,transparent 2px),
    var(--slab);
  clip-path:var(--cut-in);
  transition:filter .12s;
}
/* The cut always faces the middle of the block. */
.bmenu .bbtn--team{
  --slab:var(--bslab-team);
  --cut:polygon(0 0,100% 0,100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  --cut-in:polygon(0 0,100% 0,100% 100%,calc(var(--c) - 2px) 100%,0 calc(100% - var(--c) + 2px));
}
.bmenu .bbtn--bag{
  --slab:var(--bslab-bag);
  --cut:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);
  --cut-in:polygon(0 0,calc(100% - var(--c) + 2px) 0,100% calc(var(--c) - 2px),100% 100%,0 100%);
}
.bmenu .bbtn--run{
  --slab:var(--bslab-run);
  --cut:polygon(var(--c) 0,100% 0,100% 100%,0 100%,0 var(--c));
  --cut-in:polygon(calc(var(--c) - 2px) 0,100% 0,100% 100%,0 100%,0 calc(var(--c) - 2px));
}
/* The one under the pointer is brighter, as the cursor slab is in the
   Godot build. A keyboard focus also turns the outline gold. */
.bmenu .bbtn:hover{background:var(--bslab-ink);color:#fff}
.bmenu .bbtn:hover::before,
.bmenu .bbtn:focus-visible::before{filter:brightness(1.2)}
.bmenu .bbtn:focus-visible{outline:none;background:var(--bslab-gold)}
.bmenu .bbtn:active{transform:translateY(1px)}
.bmenu .bbtn:disabled{cursor:not-allowed;color:rgba(255,255,255,.6)}
.bmenu .bbtn:disabled::before{filter:saturate(.25) brightness(.7)}
/* Shooing one off the line. Quieter than FIGHT and cooler than RUN,
   because it is neither a fight nor an escape — it is going back to
   what you were casting for. Only appears on the water. */
/* It sits on the move list beside Back rather than on the command
   plate: a command that is only there while a line is in the water
   left a hole in the plate the rest of the time. */
.mvbtn--shoo{
  align-items:center;justify-content:center;
  font-size:clamp(14px,1.8vh,17px);font-weight:800;
  background:rgba(24,44,58,.92);
  border-color:#9fa4ab;
  color:#cfe9f7;
}
.mvbtn--shoo:hover{
  background:rgba(34,64,84,.95);
}

.bmoves{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:7px;
}
.bmoves[hidden]{display:none}

/* ── Left-handed battle controls ─────────────────────

   Asked for by a player whose right arm is paralysed and who
   plays one-handed. On a tablet the command plate sits in the far
   right corner, which is exactly where a left hand cannot go.

   Only what is PRESSED moves. The field above - the two Pokemon,
   their health cards, who stands where - is the scene rather than
   the controls, and mirroring it would put the player's own
   Pokemon where the opponent belongs. That is not an easier
   layout, it is a different game.

   The commands keep their order and their labels: FIGHT is still
   first, RUN is still last. Nothing anybody has learned moves;
   only the hand that reaches it changes.

   The grid is `1fr auto` - message box, then plate. Reversing the
   track sizes and placing both children by name swaps the two
   without touching the document, so the reading order and the tab
   order stay exactly as they were. */
.opt-lefthand .battle__ui{grid-template-columns:auto 1fr}
.opt-lefthand .bmenu{grid-column:1;grid-row:1}
.opt-lefthand .blog{grid-column:2;grid-row:1}

/* The move list, the bag and the party spread across both
   columns already, so they need nothing - and the Mega key sits
   inside the slab block, so it moves with it. */
/* The move buttons wear the same plate as the health cards: the
   near-black blue behind a pale outline, at the same rounding. They
   used to be frosted dark boxes with a red hover, which read as a
   different screen sitting on top of this one.

   Not the stepped shape, though — that shape points at a Pokemon, and
   a list of four moves points at nothing. */
/* Struggle: what is left when nothing has PP.

   Reported as every button greyed out with nothing to press. It is
   deliberately not styled like a move worth choosing - it costs a
   quarter of the user's health - so it reads as the last resort it
   is rather than as a fifth attack. */
.mvbtn--struggle{border-color:#a04444;background:#1a0808}
.mvbtn--struggle .mvbtn__pp{color:#ff9b9b}

.mvbtn{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:9px 13px;border-radius:8px;
  background:#001119;
  border:2px solid #9fa4ab;
  box-shadow:0 2px 7px rgba(0,0,0,.5),
             inset 0 0 0 1px rgba(255,255,255,.05);
  transition:.14s;text-align:left;
}
.mvbtn:hover:not(:disabled){
  background:#0a2130;border-color:#d6dade;
}
.mvbtn:disabled{opacity:.4;cursor:not-allowed}
.mvbtn__name{
  font-size:clamp(13px,1.7vh,16px);font-weight:800;letter-spacing:.02em;
  text-shadow:1px 1px 0 rgba(0,0,0,.9);
}
.mvbtn__meta{display:flex;align-items:center;gap:7px;width:100%}
.mvbtn__pp{
  font-size:11px;font-family:var(--mono);color:#c8cdd2;
  margin-left:auto;text-shadow:1px 1px 0 rgba(0,0,0,.85);
}
/* Back is a command rather than a move, so it wears the pale plate
   the other commands do. */
.mvbtn--back{
  align-items:center;justify-content:center;
  font-size:clamp(14px,1.8vh,17px);font-weight:800;
  background:#b6b6b6;border-color:#14171b;color:#14171b;
  text-shadow:none;
}
.mvbtn--back:hover:not(:disabled){background:#c6c6c6;border-color:#14171b}

/* The bag inside a battle, sorted into pockets.

   The headings span the whole grid so a pocket reads as a band
   rather than as another button, and the item sits on one line with
   its sprite: mid-battle the sprite is what the eye finds first, and
   a Potion among a dozen balls needs to be found quickly. */
.bbag__head{
  grid-column:1/-1;margin:4px 0 0;
  font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-dim);
}
.bbag__head:first-child{margin-top:0}

/* The two halves of the bag, as tabs across the top. Four stacked
   lists meant hunting for a Super Potion past four rows of evolution
   stones; in a fight there are only two things worth reaching for. */
.bbag__tabs{
  grid-column:1/-1;display:flex;gap:6px;margin:0 0 6px;
}
.bbag__tab{
  flex:1;padding:7px 10px;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line);
  color:var(--txt-dim);font-size:12px;font-weight:800;
  letter-spacing:.02em;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.bbag__tab em{
  font-style:normal;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:999px;
  background:var(--ink);color:var(--txt-dim);
}
.bbag__tab.is-on{
  background:linear-gradient(180deg,rgba(238,21,21,.18),var(--ink-3));
  border-color:rgba(238,21,21,.5);color:var(--txt);
}
.bbag__tab.is-on em{background:rgba(238,21,21,.28);color:var(--txt)}
.bbag__tab[disabled]{opacity:.4;cursor:default}
/* Paging the pocket. The menu is a fixed two-column grid that does
   not scroll, so a player with many kinds of ball could not reach
   the ones past the bottom at all. Six to a page, and the arrows
   only appear when there is somewhere to go. */
.bbag__pager{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  gap:10px;margin:2px 0 0;
}
.bbag__arrow{
  width:34px;padding:5px 0;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line);
  color:var(--txt);font-size:12px;line-height:1;cursor:pointer;
}
.bbag__arrow:hover:not([disabled]){border-color:var(--txt-dim)}
.bbag__arrow[disabled]{opacity:.35;cursor:default}
.bbag__pageno{
  font-size:11.5px;font-weight:700;color:#14171b;
  font-variant-numeric:tabular-nums;min-width:38px;text-align:center;
}

.mvbtn--item{
  flex-direction:row;align-items:center;gap:9px;
}
.mvbtn__ico{
  width:26px;height:26px;flex-shrink:0;object-fit:contain;
  image-rendering:pixelated;
}
.mvbtn--item .mvbtn__name{flex:1;min-width:0}
.mvbtn--item .mvbtn__meta{width:auto}
.mvbtn--item .mvbtn__pp{margin-left:0}

@media (max-width:720px){
  .battle__ui{grid-template-columns:1fr;gap:8px}
  /* One column: there is no left or right here, only an order,
     and it is already the message above the commands. So the
     mirrored rules are put back rather than carried in - left
     alone, `grid-column:2` on a one-column grid would push the
     message box into a second column that should not exist.

     A phone is also not the screen the setting was asked for:
     the request was about tablets and larger screens, where the
     far corner is genuinely out of reach. On a phone everything
     is already within a thumb. */
  .opt-lefthand .battle__ui{grid-template-columns:1fr}
  .opt-lefthand .bmenu,
  .opt-lefthand .blog{grid-column:1;grid-row:auto}
  /* The slabs stay two by two - the diamond in the middle is where
     MEGA goes - and take the whole width under the message box. */
  .bmenu{width:100%;min-width:0}
  .bbtn{padding:10px 4px;font-size:11px}
  .bcard{min-width:0;padding:6px 9px}
  .bmoves{grid-template-columns:1fr 1fr}
  .blog{min-height:62px;max-height:62px;font-size:12px}
}

/* A phone in portrait. Everything here is about width running out:
   the battle card, the move buttons and the party rows all carry
   more than fits across 360 pixels. */
@media (max-width:420px){
  .bbtn{padding:9px 3px;font-size:13px;letter-spacing:.01em;gap:5px}
  .bmoves{grid-template-columns:1fr}
  .mvbtn{padding:8px 10px}
  .mvbtn__name{font-size:13px}
  /* The card sits over the sprite rather than beside it. */
  .bcard{padding:5px 8px}
  .bcard__name{font-size:11px}
  /* The same element carries two things: a trainer Pokemon's ability,
     which is a nicety, and whether a wild one is already in the
     Pokedex, which is the whole reason to throw a ball. Hiding the
     element hid both, so on a narrow phone there was no way to tell a
     new species from a tenth Pidgey. The ability goes; the mark
     stays, and shrinks to fit.

     A traced ability stays as well. Reading the opponent's ability is
     the entire reason Trace is on a team, so it is information rather
     than decoration - hiding it on a phone would hide the only thing
     the ability does. */
  .bcard__abil:not(.bcard__caught):not(.is-traced){display:none}
  .bcard__caught{font-size:.6rem;padding:1px 5px}
  /* Party rows lose the HP bar before they lose the name. */
  .bparty__hp{width:38px}
  .mvbtn--mon .mvbtn__name{font-size:11px}
  .blog{min-height:54px;max-height:54px;font-size:11px}
}
@media (max-height:600px){
  .blog{min-height:54px;max-height:54px}
  .bmon img{width:clamp(62px,12vh,92px);height:clamp(62px,12vh,92px)}
}

/* ============================================================
   BAG
   After WorlddexOnline's Bag (BagPanel + BagMenu): a dark panel, the
   title with a search box, the items as a two-column grid, the chosen
   item's detail along the bottom, and a column of pocket icons down
   the right. The colours are BagPanel's own, named once here.
   ============================================================ */
.bagx{
  --bagx-panel:#242630;    /* BagPanel 0.14 0.15 0.19 */
  --bagx-edge:#595E70;     /* 0.35 0.37 0.44 */
  --bagx-field:#171A21;    /* 0.09 0.10 0.13 */
  --bagx-field-edge:#4D5161;
  --bagx-card:#333845;     /* 0.20 0.22 0.27 */
  --bagx-card-edge:#4D5466;
  --bagx-cat:#2B2E3A;      /* 0.17 0.18 0.23 */
  --bagx-cat-on:#4D5469;   /* 0.30 0.33 0.42 */
  display:flex;gap:8px;align-items:stretch;
  background:var(--bagx-panel);border:2px solid var(--bagx-edge);
  border-radius:12px;padding:8px 10px;
  height:min(72vh,640px);min-height:340px;
  color:var(--txt);
}
.bagx__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.bagx__head{display:flex;align-items:center;gap:8px}
.bagx__title{margin:0;font-size:16px;font-weight:800;white-space:nowrap}
.bagx__search{
  flex:1;min-width:0;display:flex;align-items:center;gap:2px;
  background:var(--bagx-field);border:1px solid var(--bagx-field-edge);
  border-radius:6px;padding:2px 4px 2px 8px;
}
.bagx__search input{
  flex:1;min-width:0;border:0;background:transparent;color:inherit;
  font:inherit;font-size:13px;padding:6px 2px;outline:none;
}
/* The search draws its own clear; the browser's would be a second x. */
.bagx__search input::-webkit-search-cancel-button{display:none}
.bagx__clear{
  border:0;background:transparent;color:var(--txt-dim);cursor:pointer;
  font-weight:800;font-size:13px;width:22px;height:22px;border-radius:4px;
}
.bagx__clear:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.bagx__close{
  border:0;background:transparent;color:var(--txt-dim);cursor:pointer;
  font-weight:800;font-size:18px;width:28px;height:28px;border-radius:6px;flex-shrink:0;
}
.bagx__close:hover{color:var(--txt);background:rgba(255,255,255,.06)}
/* The Bag draws its own title and close; the window's header steps
   aside, and its padding with it, so the panel is the window. */
/* Only while the Bag itself is showing: the Pokemon picker that Use
   and Give open in the same window keeps the header and its close. */
.modal--bag:has(.bagx) .modal__head{display:none}
.modal--bag .modal__body:has(> .bagx){padding:0}

.bagx__grid{
  flex:1;min-height:0;overflow-y:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:start;
  padding-right:2px;
}
.bagx__item{
  display:flex;align-items:center;gap:6px;min-width:0;
  height:38px;padding:0 8px;cursor:pointer;text-align:left;
  background:var(--bagx-card);border:1px solid var(--bagx-card-edge);
  border-radius:8px;color:inherit;font:inherit;
  transition:background .12s,border-color .12s;
}
.bagx__item:hover{border-color:var(--bagx-edge);background:#3A404E}
.bagx__item.is-sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.bagx__item.is-on{border-color:var(--ok)}
.bagx__item img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.bagx__name{flex:1;min-width:0;font-size:12px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bagx__n{font-size:12px;color:var(--txt-dim);font-family:var(--mono)}
.bagx__empty{grid-column:1/-1;text-align:center;color:var(--txt-dim);font-size:12px;margin:24px 0}

.bagx__detail{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--bagx-edge);padding-top:8px;min-height:64px;
}
.bagx__detail.is-empty{align-items:center;justify-content:space-between}
.bagx__big{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.bagx__about{flex:1;min-width:160px;display:flex;flex-direction:column;gap:3px}
.bagx__dname{font-size:13px}
.bagx__dcount{color:var(--txt-dim);font-family:var(--mono);font-weight:600}
.bagx__dtext{margin:0;font-size:12px;line-height:1.4;color:var(--txt-dim)}
.bagx__on{font-size:11px;color:var(--ok);font-weight:700}
.bagx__hint{margin:0;font-size:12px;color:var(--txt-dim)}
.bagx__keys{display:block;font-size:11px;opacity:.8;margin-top:2px}
.bagx__acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bagx__acts .btn{padding:6px 12px;font-size:12px}
.bagx__sort{white-space:nowrap}

.bagx__bar{display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.bagx__cat{
  width:34px;height:34px;padding:3px;cursor:pointer;flex-shrink:0;
  background:var(--bagx-cat);border:1px solid #474B5C;border-radius:6px;
}
.bagx__cat img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.bagx__cat:hover{background:#363A49}
.bagx__cat.is-on{background:var(--bagx-cat-on);border:2px solid var(--gold)}

/* A phone: one column of items, and the pockets as a row under the
   title rather than a column that would take a third of the width. */
@media (max-width:560px){
  .bagx{flex-direction:column-reverse;height:auto;min-height:0;min-width:0;max-width:100%}
  /* min-width:0, or the row of nine icons sets the width of the whole
     panel and pushes it off the side of the screen. */
  .bagx__bar{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;min-width:0}
  .bagx__main{width:100%}
  .bagx__grid{grid-template-columns:minmax(0,1fr);max-height:52vh}
}

/* Ability line on the battle cards */
.bcard__abil{
  font-size:9px;color:var(--blue);font-weight:700;
  letter-spacing:.03em;min-height:11px;
}
/* An ability taken off the opponent, so it does not read as the
   Pokemon's own. */
.bcard__abil.is-traced{
  color:var(--shiny);
  text-shadow:0 0 6px rgba(255,213,74,.35);
}

/* ============================================================
   BATTLE ZONE BACKDROPS
   One scene per terrain type. Sky and ground come from the
   gradient; .bprop elements add the silhouette on top.
   ============================================================ */
.battle__bg{overflow:hidden}

/* Ground band shared by all zones (overridden per zone below). */
.battle__bg::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:26%;
  background:var(--zone-ground,#2E7D46);
  box-shadow:inset 0 3px 0 var(--zone-edge,rgba(255,255,255,.16));
}

/* ── Meadow (default) ── */
.battle__bg.is-meadow{
  --zone-ground:#4C9A4E; --zone-edge:rgba(190,240,170,.35);
  background:linear-gradient(180deg,#7FC7F0 0%,#A8DDF4 40%,#CFEBC4 66%,#8FCB74 100%);
}
/* ── Forest ── */
.battle__bg.is-forest{
  --zone-ground:#24632F; --zone-edge:rgba(150,220,140,.3);
  background:linear-gradient(180deg,#3E7A52 0%,#5B9A62 38%,#4F8B4C 64%,#2F6B38 100%);
}
/* ── Mountain ── */
.battle__bg.is-mountain{
  --zone-ground:#6B6152; --zone-edge:rgba(240,235,220,.28);
  background:linear-gradient(180deg,#8FB6D6 0%,#BBD3E4 42%,#B4A894 66%,#7D7263 100%);
}
/* ── Volcano ── */
.battle__bg.is-volcano{
  --zone-ground:#3A2320; --zone-edge:rgba(255,140,60,.4);
  background:linear-gradient(180deg,#3B1E22 0%,#7A2E22 34%,#C4542A 58%,#5E2A1E 100%);
}
/* ── Ice ── */
.battle__bg.is-ice{
  --zone-ground:#D6E9F2; --zone-edge:rgba(255,255,255,.75);
  background:linear-gradient(180deg,#9CC8E8 0%,#C8E4F4 42%,#E8F4FA 66%,#BCD8E8 100%);
}
/* ── Desert ── */
.battle__bg.is-desert{
  --zone-ground:#D8B060; --zone-edge:rgba(255,240,190,.4);
  background:linear-gradient(180deg,#F0C87A 0%,#F6DCA0 40%,#E8C078 66%,#C89A4E 100%);
}
/* ── Water / coast ── */
.battle__bg.is-water{
  --zone-ground:#1E5F8E; --zone-edge:rgba(180,230,255,.4);
  background:linear-gradient(180deg,#6FC0E8 0%,#A0DCF0 38%,#3E8CBE 60%,#1A5480 100%);
}
/* ── Swamp / moor ── */
.battle__bg.is-swamp{
  --zone-ground:#3E4A32; --zone-edge:rgba(190,210,150,.25);
  background:linear-gradient(180deg,#6E7A62 0%,#8A9478 38%,#5C6A4A 64%,#3A4630 100%);
}
/* ── Cave ── */
.battle__bg.is-cave{
  --zone-ground:#2A2630; --zone-edge:rgba(150,140,180,.3);
  background:linear-gradient(180deg,#171422 0%,#2A2438 40%,#3A3048 66%,#221C2E 100%);
}
/* ── Urban / industrial ── */
.battle__bg.is-urban{
  --zone-ground:#3A3E46; --zone-edge:rgba(160,200,230,.28);
  background:linear-gradient(180deg,#2E3A4A 0%,#4A5A6E 38%,#556070 64%,#333A44 100%);
}
/* ── Ruins ── */
.battle__bg.is-ruins{
  --zone-ground:#4A4438; --zone-edge:rgba(220,200,150,.3);
  background:linear-gradient(180deg,#4A3E5E 0%,#6E5F7E 36%,#7A6A62 62%,#4E453A 100%);
}

/* Scanline texture stays on every zone. */
.battle__bg::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);
  opacity:.4;pointer-events:none;
}

/* ── Decorative props ─────────────────────────────────── */
.bprop{
  position:absolute;bottom:24%;pointer-events:none;
  transform:translateX(-50%);
}
/* Grass tufts */
.bprop--tuft{
  width:46px;height:22px;
  background:radial-gradient(ellipse at 50% 100%,var(--zone-ground,#4C9A4E) 60%,transparent 62%);
  filter:brightness(1.25);
}
/* Conifer silhouettes */
.bprop--tree{
  width:0;height:0;bottom:25%;
  border-left:28px solid transparent;border-right:28px solid transparent;
  border-bottom:86px solid rgba(18,52,26,.85);
}
.bprop--tree::after{
  content:'';position:absolute;left:-9px;top:62px;
  width:18px;height:24px;background:rgba(48,32,18,.9);
}
/* Mountain / volcano peaks */
.bprop--peak{
  width:0;height:0;bottom:26%;
  border-left:96px solid transparent;border-right:96px solid transparent;
  border-bottom:132px solid rgba(255,255,255,.12);
}
.battle__bg.is-volcano .bprop--peak{border-bottom-color:rgba(40,20,16,.72)}
.battle__bg.is-ice .bprop--peak{border-bottom-color:rgba(255,255,255,.6)}
/* Rising embers */
.bprop--ember{
  width:5px;height:5px;border-radius:50%;bottom:30%;
  background:#FFB347;box-shadow:0 0 8px #FF7B2E;
  animation:emberRise 3.4s linear infinite;
  animation-delay:calc(var(--i) * -.9s);
}
@keyframes emberRise{
  from{transform:translate(-50%,0);opacity:0}
  25%{opacity:1}
  to{transform:translate(-50%,-190px);opacity:0}
}
/* Falling snow */
.bprop--flake{
  width:4px;height:4px;border-radius:50%;bottom:auto;top:-6px;
  background:#fff;opacity:.85;
  animation:flakeFall 6s linear infinite;
  animation-delay:calc(var(--i) * -1.5s);
}
@keyframes flakeFall{
  from{transform:translate(-50%,0)}
  to{transform:translate(-50%,60vh)}
}
/* Sand dunes */
.bprop--dune{
  width:230px;height:56px;bottom:25%;
  border-radius:50% 50% 0 0;
  background:rgba(200,150,70,.55);
}
.bprop--cactus{
  width:18px;height:66px;bottom:26%;border-radius:6px;
  background:rgba(60,110,60,.8);
}
.bprop--cactus::after{
  content:'';position:absolute;left:10px;top:12px;
  width:16px;height:8px;border-radius:6px;background:rgba(60,110,60,.8);
}
/* Sea foam lines */
.bprop--wave{
  width:180px;height:8px;border-radius:4px;bottom:22%;
  background:rgba(255,255,255,.35);
  animation:waveDrift 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * -1.1s);
}
@keyframes waveDrift{50%{transform:translateX(calc(-50% + 22px))}}
/* Marsh reeds */
.bprop--reed{
  width:5px;height:64px;bottom:25%;
  background:rgba(120,150,90,.85);
  transform-origin:bottom;
  animation:reedSway 3.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.6s);
}
@keyframes reedSway{50%{transform:translateX(-50%) rotate(6deg)}}
/* Cave stalactites hang from the top */
.bprop--stal{
  width:0;height:0;bottom:auto;top:0;
  border-left:22px solid transparent;border-right:22px solid transparent;
  border-top:104px solid rgba(70,60,86,.9);
}
/* Power pylons */
.bprop--pylon{
  width:9px;height:140px;bottom:25%;
  background:rgba(120,135,150,.75);
}
.bprop--pylon::after{
  content:'';position:absolute;left:-20px;top:22px;
  width:50px;height:6px;background:rgba(120,135,150,.75);
}
/* Ruined pillars */
.bprop--pillar{
  width:36px;height:108px;bottom:25%;
  background:linear-gradient(180deg,rgba(190,175,140,.75),rgba(120,110,88,.75));
  border-radius:3px 3px 0 0;
}
.bprop--pillar:nth-child(even){height:42px;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .bprop{animation:none!important}
}

/* ── Photo backdrops ──────────────────────────────────
   A licensed image fills the arena; cover-crop keeps the
   composition centred rather than stretching it. The gradient
   underneath shows through while the file loads.
   ============================================================ */
.battle__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  image-rendering:auto;
  z-index:0;
}
/* Portrait sources get pushed up so the horizon lands above the log. */
/* There used to be a rule here pulling the crop up on four zones,
   because their artwork was portrait or square and lost most of
   itself to a screen-shaped crop. Every backdrop is 16:9 now, so what
   was painted is what is seen and nothing needs pulling anywhere. */

/* Photo zones drop the drawn ground band and darken toward the UI so the
   log and menu stay readable over any artwork. */
.battle__bg.has-photo::before{
  height:32%;background:none;box-shadow:none;
  background:linear-gradient(180deg,transparent,rgba(6,12,10,.55));
  z-index:1;
}
.battle__bg.has-photo::after{opacity:.22;z-index:2}

.board__yourank{
  margin-top:12px;text-align:center;font-size:12px;color:var(--txt-dim);
}
.board__yourank b{color:var(--yellow);font-family:var(--mono)}

/* ── Announcements ────────────────────────────────────

   Somebody in the region found something rare. It slides in at the
   top, sits for a few seconds and leaves on its own — a Shiny is
   worth looking up for, not worth a button to dismiss.

   Below the top bar rather than over it, so it never covers the route
   name or the menu button. */
.newsfeed{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);
  z-index:120;display:flex;flex-direction:column;gap:8px;
  align-items:center;pointer-events:none;
  width:max-content;max-width:min(560px,calc(100vw - 24px));
}
.newsitem{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 12px;border-radius:99px;
  background:rgba(10,14,20,.92);border:1px solid var(--glass-brd);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:12.5px;line-height:1.35;
  opacity:0;transform:translateY(-10px);
  transition:opacity .28s ease,transform .28s ease;
}
.newsitem.is-in{opacity:1;transform:translateY(0)}
.newsitem.is-out{opacity:0;transform:translateY(-8px)}
.newsitem__ico{
  width:26px;height:26px;flex-shrink:0;object-fit:contain;
  image-rendering:pixelated;
}
.newsitem__txt{min-width:0}
.newsitem__txt b{font-weight:800}

/* Each kind gets its own edge, so it reads before it is read. */
.newsitem--shiny{border-color:var(--shiny);
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 20px rgba(255,213,74,.25)}
.newsitem--shiny .newsitem__txt b{color:var(--shiny)}
.newsitem--shadow{border-color:var(--shadow);
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 20px rgba(155,92,255,.25)}
.newsitem--shadow .newsitem__txt b{color:var(--shadow)}
.newsitem--raid{border-color:var(--red-lt)}
.newsitem--raid .newsitem__txt b{color:var(--red-lt)}

@media (max-width:620px){
  .newsfeed{top:auto;bottom:14px;max-width:calc(100vw - 20px)}
  .newsitem{font-size:11.5px;padding:8px 13px 8px 10px}
}
@media (prefers-reduced-motion:reduce){
  .newsitem{transition:opacity .18s ease}
  .newsitem.is-in,.newsitem.is-out{transform:none}
}

/* ── Guest banner ─────────────────────────────────────── */
.guestbar{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:150;display:flex;align-items:center;gap:12px;
  max-width:min(680px,calc(100vw - 24px));
  padding:10px 12px 10px 16px;
  background:linear-gradient(135deg,rgba(238,21,21,.92),rgba(176,12,12,.92));
  border:1px solid rgba(255,255,255,.2);border-radius:99px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
}
.guestbar.is-min{padding:8px;gap:0}
.guestbar.is-min .guestbar__txt,.guestbar.is-min .guestbar__cta{display:none}
.guestbar__txt{font-size:12px;line-height:1.45}
.guestbar__cta{white-space:nowrap;padding:7px 14px;font-size:12px;
  background:#fff;color:var(--red-dk);border:none}
.guestbar__cta:hover{background:var(--yellow)}
.guestbar__x{width:24px;height:24px;padding:5px;border-radius:50%;color:#fff;opacity:.8}
.guestbar__x:hover{background:rgba(0,0,0,.25);opacity:1}
/* On a phone the banner wraps to several lines, and a pill that tall
   reads as a blob. */
@media (max-width:520px){
  .guestbar:not(.is-min){border-radius:18px;left:12px;right:12px;transform:none;max-width:none}
  .guestbar{bottom:calc(var(--tabbar-h) + 72px)}
}

.convert{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:0 auto}
.convert__lead{font-size:13px;line-height:1.6;color:var(--txt-dim)}

/* ── Leaderboard paging ───────────────────────────────── */
.board__pager{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;
}
.board__pageno{font-size:12px;color:var(--txt-dim);font-family:var(--mono)}
.board__yourank .linkbtn{margin-left:8px}

/* ============================================================
   Summary
   One Pokemon, for the team and the PC alike. The left side is lit in
   the Pokemon's own types (--tc and --tc2, set inline by typeLight());
   the right holds four pages. Two columns once the summary itself is
   wide enough - measured on the summary rather than the window, so the
   same markup stacks in the PC's narrow side panel and on a phone.
   ============================================================ */
.sum{--tc:var(--t-normal);--tc2:var(--tc);container-type:inline-size;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--ink-2)}
.sum [hidden]{display:none!important}
.sum__grid{display:grid;grid-template-columns:minmax(0,1fr)}
@container (min-width:700px){
  .sum__grid{grid-template-columns:290px minmax(0,1fr)}
  .sum__hero{border-right:1px solid var(--line)}
}

/* ── The hero ── */
.sum__hero{position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:11px;padding:12px 16px 16px;
  background:
    radial-gradient(circle at 50% 26%,color-mix(in srgb,var(--tc) 46%,transparent),transparent 58%),
    linear-gradient(140deg,color-mix(in srgb,var(--tc) 32%,var(--ink-2)) 0%,
      color-mix(in srgb,var(--tc2) 24%,var(--ink-2)) 70%,var(--ink-2) 100%)}
.sum__hero.is-shiny{box-shadow:inset 0 0 0 2px var(--shiny),inset 0 0 34px rgba(255,213,74,.22)}
.sum__hero.is-shadow{box-shadow:inset 0 0 0 2px var(--shadow),inset 0 0 34px rgba(155,92,255,.28)}
/* A Poke Ball behind the art, faint, the way the games' summary
   screens carry one. */
.sum__ball{position:absolute;z-index:-1;right:-44px;top:-28px;width:220px;height:220px;
  opacity:.09;transform:rotate(-18deg);color:#fff;pointer-events:none}
.sum__ball svg{stroke-width:9}
.sum__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}
.sum__nav{display:flex;align-items:center;gap:6px}
.sum__nav button{width:28px;height:28px;padding:6px;border-radius:8px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);transition:background .15s}
.sum__nav button:hover{background:rgba(0,0,0,.48)}
.sum__nav svg{stroke-width:2.4}
.sum__nav span{font-size:11px;color:rgba(255,255,255,.78);min-width:44px;text-align:center;
  font-variant-numeric:tabular-nums}
.sum__where{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.3);color:rgba(255,255,255,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}

.sum__art{position:relative;display:grid;place-items:center;height:156px}
.sum__art::after{content:'';position:absolute;bottom:12px;width:140px;height:20px;
  border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent)}
.sum__mon{width:156px;height:156px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:sumIn .22s ease-out}
@keyframes sumIn{from{opacity:0;transform:translateY(6px) scale(.97)}}
.sum__ballart{position:absolute;left:0;bottom:4px;width:28px;height:28px;
  object-fit:contain;image-rendering:pixelated}
/* A shiny twinkles: three four-pointed stars, drawn rather than typed. */
.sum__spark{position:absolute;width:12px;height:12px;background:var(--shiny);opacity:0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:sumTwinkle 2.4s ease-in-out infinite}
.sum__spark:nth-of-type(1){left:22%;top:16%}
.sum__spark:nth-of-type(2){right:20%;top:34%;width:9px;height:9px;animation-delay:.8s}
.sum__spark:nth-of-type(3){left:30%;bottom:24%;width:7px;height:7px;animation-delay:1.5s}
@keyframes sumTwinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}}

.sum__id{display:flex;flex-direction:column;gap:6px;min-width:0}
.sum__namerow{display:flex;align-items:center;gap:8px;min-width:0}
.sum__name{margin:0;font-size:21px;font-weight:800;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.35)}
.sum__sex{font-size:18px;font-weight:800;line-height:1}
.sum__sex--none{color:rgba(255,255,255,.5);font-size:14px}
.sum__status{height:16px;width:auto}
.sum__lv{margin-left:auto;flex-shrink:0;font-size:13px;font-weight:800;padding:4px 10px;
  border-radius:8px;background:rgba(0,0,0,.32);font-variant-numeric:tabular-nums}
.sum__lv small{font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-right:2px}
.sum__species{font-size:12px;color:rgba(255,255,255,.75)}
.sum__types{display:flex;gap:6px;flex-wrap:wrap}
.sum__chips{display:flex;gap:6px;flex-wrap:wrap}
.sum__chip{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.sum__chip--shiny{background:var(--shiny);border-color:var(--shiny);color:#3A2E00}
.sum__chip--shadow{background:var(--shadow);border-color:var(--shadow);color:#fff}
button.sum__chip{cursor:pointer;transition:border-color .15s,color .15s}
button.sum__chip:hover{border-color:var(--yellow);color:var(--txt)}
.sum__chip--fav.is-on{color:var(--yellow);border-color:rgba(255,203,5,.55);
  background:rgba(255,203,5,.12)}

/* Meters in the hero: HP, EXP, friendship. One shape for all three. */
.sum__meter,.sum .xpbar,.sum .friend{display:flex;flex-direction:column;gap:4px}
.sum__meterhead,.xpbar__head,.friend__head{display:flex;justify-content:space-between;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.75)}
.sum__meterhead b,.xpbar__head b,.friend__head b{font-family:var(--mono);letter-spacing:0;
  color:#fff;text-transform:none;font-variant-numeric:tabular-nums}
.sum__track,.xpbar__track,.friend__bar{display:block;height:7px;border-radius:99px;
  background:rgba(0,0,0,.4);overflow:hidden}
.sum__track i,.xpbar__track i,.friend__bar i{display:block;height:100%;border-radius:99px;
  transform-origin:left;animation:sumGrow .6s cubic-bezier(.2,.8,.2,1)}
@keyframes sumGrow{from{transform:scaleX(0)}}
.sum__hp .sum__track i{background:var(--ok)}
.sum__hp.is-warn .sum__track i{background:#F0C040}
.sum__hp.is-low .sum__track i{background:#E8503C}
.sum__hp.is-out .sum__track i{background:#6B7280}
/* Named apart from .expbar, which the battle screen uses for the thin
   bar under a Pokemon's health: sharing the name let that rule win. */
.xpbar{width:100%}
.xpbar__track i{background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#3aa0ff) 65%,#fff),var(--tc,#3aa0ff))}
/* Friendship warms as it climbs. Pink at the top is the colour the
   games have used for it since it was a number you could see. */
.friend{width:100%}
.friend__bar i{background:linear-gradient(90deg,#8d6e63,#bcaaa4)}
.friend.is-mid .friend__bar i{background:linear-gradient(90deg,#c98a9b,#e0a9b8)}
.friend.is-high .friend__bar i{background:linear-gradient(90deg,#ff8fb0,#ff5f8f)}
.friend__n{display:block;font-size:10px;line-height:1.4;color:rgba(255,255,255,.72)}

/* ── Pages ── */
.sum__side{display:flex;flex-direction:column;min-width:0}
.sum__tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.sum__tab{position:relative;padding:12px 13px 11px;font-size:13px;font-weight:700;
  color:var(--txt-dim);white-space:nowrap;transition:color .15s}
.sum__tab:hover{color:var(--txt)}
.sum__tab[aria-selected="true"]{color:var(--txt)}
.sum__tab[aria-selected="true"]::after{content:'';position:absolute;left:9px;right:9px;bottom:-1px;
  height:3px;border-radius:3px 3px 0 0;background:var(--tc);
  box-shadow:0 0 12px color-mix(in srgb,var(--tc) 70%,transparent)}
.sum__tab:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px;border-radius:6px}
.sum__panel{padding:14px;min-height:300px;animation:sumPage .2s ease-out}
@keyframes sumPage{from{opacity:0;transform:translateY(4px)}}
.sum__empty{margin:0;padding:24px 8px;text-align:center;font-size:12px;color:var(--txt-dim)}
.sum__lbl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim)}

/* Info */
.sum__info{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sum__tile{position:relative;display:flex;flex-direction:column;gap:5px;padding:11px 12px;
  border-radius:var(--r-sm);background:var(--ink);border:1px solid var(--line);min-width:0}
.sum__tile > b{font-size:15px}
.sum__tile p{margin:0;font-size:12px;line-height:1.5;color:var(--txt-dim)}
.sum__nat{display:flex;gap:9px;font-size:12px;font-weight:700}
.sum__up{color:var(--ok)}
.sum__down{color:#FF7B7B}
.sum__neutral{color:var(--txt-dim);font-weight:600}
/* A Hidden Ability is the rare roll and the thing an Ability Patch is
   bought for, so it is set apart in gold with its name on a ribbon. */
.sum__abil.is-hidden{border-color:rgba(255,203,5,.55);
  background:linear-gradient(135deg,rgba(255,203,5,.1),transparent 60%),var(--ink)}
.sum__abil.is-hidden > b{color:var(--yellow)}
.ha-tag{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;
  background:var(--yellow);color:#3A2E00}
.sum__abil .ha-tag{position:absolute;top:10px;right:10px}
.sum__itemrow{display:flex;align-items:center;gap:9px;min-height:30px}
.sum__itemrow img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.sum__itemrow b{font-size:14px}
.sum__none{color:var(--txt-dim);font-size:14px;font-weight:600}
.sum__facts{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px}
.sum__facts dt{color:var(--txt-dim)}
.sum__facts dd{margin:0;font-weight:700;display:flex;align-items:center;gap:6px;min-width:0}
.sum__facts dd img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}

/* Stats */
.sum__statstop{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px}
.sumseg{display:inline-flex;padding:3px;border-radius:99px;background:var(--ink);
  border:1px solid var(--line)}
.sumseg button{padding:5px 12px;font-size:12px;font-weight:700;border-radius:99px;
  color:var(--txt-dim);transition:color .15s,background .15s}
.sumseg button[aria-pressed="true"]{background:var(--ink-3);color:var(--txt);
  box-shadow:inset 0 0 0 1px var(--line)}
.sum__totals{font-size:12px;color:var(--txt-dim);font-family:var(--mono)}
.sum__totals b{color:var(--txt)}
.sum__stats{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@container (min-width:600px){
  .sum__stats{grid-template-columns:230px minmax(0,1fr);align-items:center}
}
.sumhex{width:100%;max-width:250px;height:auto;margin:0 auto;display:block}
.sumhex__ring{fill:none;stroke:var(--line);stroke-width:1}
.sumhex__axis{stroke:var(--line);stroke-width:1}
.sumhex__shape{fill:color-mix(in srgb,var(--tc) 38%,transparent);stroke:var(--tc);
  stroke-width:2.2;transform-origin:130px 118px;animation:sumHex .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sumHex{from{transform:scale(.2);opacity:0}}
.sumhex__dot{fill:var(--tc);stroke:var(--ink-2);stroke-width:1.5}
.sumhex text{font-family:var(--sans);font-size:11px;font-weight:700;stroke:none}
.sumhex__k{fill:var(--txt-dim)}
.sumhex__k.is-up{fill:var(--ok)}
.sumhex__k.is-down{fill:#FF7B7B}
.sumhex__v{fill:var(--txt);font-family:var(--mono)!important}

.statrows{display:flex;flex-direction:column;gap:7px;min-width:0}
.statrow{display:grid;grid-template-columns:42px 40px minmax(0,1fr) 52px 62px;gap:9px;
  align-items:center;font-size:12px}
.statrow--head{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-dim)}
.statrow--head span:nth-child(2){text-align:right}
.statrow__k{font-weight:800;font-size:11px;letter-spacing:.04em;color:var(--txt-dim);white-space:nowrap}
.statrow__k i{font-style:normal;font-size:8px;margin-left:2px;vertical-align:top}
.statrow.is-up .statrow__k{color:var(--ok)}
.statrow.is-down .statrow__k{color:var(--red-lt)}
/* The number it fights with. The nature's two stats in green and red. */
.statrow__n{font-family:var(--mono);font-weight:700;font-size:14px;text-align:right;
  color:var(--txt);font-variant-numeric:tabular-nums}
.statrow.is-up .statrow__n{color:var(--ok)}
.statrow.is-down .statrow__n{color:var(--red-lt)}
.statrow__bar{display:block;height:8px;border-radius:99px;background:var(--ink-3);overflow:hidden}
.statrow__bar i{display:block;height:100%;border-radius:99px;background:var(--tc);
  transform-origin:left;animation:sumGrow .5s cubic-bezier(.2,.8,.2,1)}
.statrow__iv{font-family:var(--mono);font-size:11px;color:var(--txt-dim);white-space:nowrap}
.statrow__iv.is-best{color:var(--yellow);font-weight:700}
.statrow__ev{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:10px;
  color:var(--txt-dim);white-space:nowrap}
.statrow__ev span{display:block;height:3px;border-radius:2px;background:var(--ink-3);overflow:hidden}
.statrow__ev span i{display:block;height:100%;background:var(--blue)}
@container (max-width:420px){
  .statrow{grid-template-columns:38px 36px minmax(0,1fr) 46px;gap:7px}
  .statrow__ev,.statrow--head span:last-child{display:none}
}

/* Moves: each card in its own type's colour. */
.smoves{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@container (min-width:560px){ .smoves{grid-template-columns:1fr 1fr} }
.smove{--mc:var(--t-normal);position:relative;display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;
  padding:10px 12px 10px 15px;border-radius:var(--r-sm);overflow:hidden;
  background:linear-gradient(110deg,color-mix(in srgb,var(--mc) 22%,var(--ink)) 0%,var(--ink) 75%);
  border:1px solid color-mix(in srgb,var(--mc) 35%,var(--line));
  transition:transform .15s,border-color .15s}
.smove::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mc)}
.smove:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--mc) 70%,var(--line))}
.smove:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.smove__top{display:flex;align-items:center;gap:7px;min-width:0}
.smove__n{flex:1;min-width:0;font-size:14px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smove__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.smove__num{display:flex;flex-direction:column;gap:1px}
.smove__num em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.smove__num b{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
/* What the move does, folded until the card is tapped. Allowed to
   wrap, because a sentence cut off at an ellipsis explains nothing. */
.smove__d{display:none;font-size:12px;line-height:1.5;color:var(--txt-dim);white-space:normal}
.smove[aria-expanded="true"] .smove__d{display:block}

/* Evolution */
.sumevo{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.sumevo__stage{flex:1 0 100px;max-width:160px;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:11px 8px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line);text-align:center}
.sumevo__stage img{width:72px;height:72px;object-fit:contain;image-rendering:pixelated}
.sumevo__stage b{font-size:12px}
.sumevo__stage em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt)}
.sumevo__stage.is-now{border-color:var(--tc);
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--tc) 26%,transparent),transparent 70%),var(--ink);
  box-shadow:0 0 0 1px var(--tc),0 0 16px color-mix(in srgb,var(--tc) 32%,transparent)}
.sumevo__arrow{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;font-size:10px;line-height:1.3;color:var(--txt-dim);text-align:center}
.sumevo__arrow svg{width:28px;height:14px;stroke:var(--txt-dim)}
/* What it can become, and what each road asks for. On every Pokemon,
   because "this does not evolve" is worth knowing too. */
.evoguide{display:flex;flex-direction:column;gap:7px}
.evoguide__head{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim)}
.evoguide__row{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--r-sm);
  background:var(--ink);border:1px dashed color-mix(in srgb,var(--tc) 45%,var(--line))}
.evoguide__art{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.evoguide__to{display:flex;flex-direction:column;gap:2px;min-width:0}
.evoguide__to b{font-size:13px}
.evoguide__to em{font-style:normal;font-size:11px;line-height:1.4;color:var(--txt-dim)}
.evoguide__none{font-size:12px;color:var(--txt-dim)}
/* A Meltan working towards Melmetal: four hundred wild wins, so the
   number gets a block of its own. */
.meltan{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid rgba(120,180,255,.28)}
.meltan__head{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;
  color:var(--txt-dim);margin-bottom:5px}
.meltan__head b{font-size:12px;color:var(--txt);font-variant-numeric:tabular-nums}
.meltan__bar{height:8px;border-radius:99px;overflow:hidden;background:var(--ink-3)}
.meltan__bar i{display:block;height:100%;background:linear-gradient(90deg,#8a9bb4,#cfd8e6)}
.meltan__n{display:block;margin-top:5px;font-size:11px;color:var(--txt-dim)}

.sum__acts{display:flex;gap:7px;flex-wrap:wrap;padding:12px 14px 14px;border-top:1px solid var(--line)}

/* The PC's summary before anything is picked. */
.pcdetail.is-empty{display:grid;place-items:center;min-height:120px;padding:24px 14px;
  border:1px dashed var(--line);border-radius:var(--r);text-align:center;
  font-size:12px;color:var(--txt-dim)}
.pcdetail.is-empty p{margin:0}

/* ============================================================
   Party screen
   The six being carried as cards, each lit in its types like the
   summary, with the saved teams underneath.
   ============================================================ */
.team__party{background:linear-gradient(160deg,var(--red),var(--red-dk))}

.party{display:flex;flex-direction:column;gap:12px}
.party__hint{margin:0;font-size:12px;color:var(--txt-dim)}
.party.is-moving .party__hint{color:var(--yellow)}
.party__msg{margin:0;min-height:1em;font-size:12px;color:var(--txt-dim)}
.party__grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

.pcard{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;
  min-height:122px;padding:12px 14px 12px 10px;border-radius:var(--r);
  background:
    radial-gradient(circle at 15% 50%,color-mix(in srgb,var(--tc) 42%,transparent),transparent 55%),
    linear-gradient(135deg,color-mix(in srgb,var(--tc) 26%,var(--ink-2)) 0%,
      color-mix(in srgb,var(--tc2) 18%,var(--ink-2)) 75%);
  border:1px solid color-mix(in srgb,var(--tc) 40%,var(--line));
  transition:transform .15s,border-color .15s,box-shadow .15s}
.pcard:hover{transform:translateY(-2px);border-color:var(--tc);
  box-shadow:0 8px 22px color-mix(in srgb,var(--tc) 22%,transparent)}
.pcard:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.pcard.is-lead{border-width:2px}
.pcard.is-shiny{box-shadow:inset 0 0 0 1px var(--shiny),inset 0 0 22px rgba(255,213,74,.2)}
.pcard.is-shadow{box-shadow:inset 0 0 0 1px var(--shadow),inset 0 0 22px rgba(155,92,255,.25)}
.pcard.is-faint .pcard__art img{filter:grayscale(1) brightness(.7);opacity:.6}
.pcard.is-moving{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,203,58,.35);transform:translateY(-3px)}
.pcard.is-target,.pcard.is-over{border-style:dashed;border-color:rgba(255,203,58,.6)}
.pcard.is-dragging{opacity:.5}
.pcard__ball{position:absolute;z-index:-1;right:-30px;bottom:-34px;width:130px;height:130px;
  opacity:.08;transform:rotate(-18deg);color:#fff;pointer-events:none}
.pcard__ball svg{stroke-width:9}
.pcard__lead{position:absolute;left:10px;top:8px;z-index:2;font-size:9px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:99px;
  background:var(--yellow);color:#3A2E00}
.pcard__grab{position:absolute;right:6px;top:6px;z-index:3;width:24px;height:24px;padding:4px;
  border-radius:50%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);
  color:var(--txt-dim);opacity:.7;transition:opacity .15s,background .15s}
.pcard__grab:hover,.pcard.is-moving .pcard__grab{opacity:1;background:var(--yellow);color:var(--ink)}
.pcard__grab svg{stroke-width:2.4}
.pcard__art{display:grid;place-items:center;height:88px}
.pcard__art img{width:88px;height:88px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.pcard__body{display:flex;flex-direction:column;gap:6px;min-width:0;padding-right:18px}
.pcard__top{display:flex;align-items:baseline;gap:6px;min-width:0}
.pcard__name{font-size:15px;font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pcard__lv{margin-left:auto;flex-shrink:0;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.pcard__types{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pcard__status{height:14px;width:auto}
.pcard__hp{display:block;height:6px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden}
.pcard__hp i{display:block;height:100%;border-radius:99px;background:var(--ok);
  transform-origin:left;animation:sumGrow .5s cubic-bezier(.2,.8,.2,1)}
.pcard__hp.is-warn i{background:#F0C040}
.pcard__hp.is-low i{background:#E8503C}
.pcard__hp.is-out i{background:#6B7280}
.pcard__hpn{font-size:10px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.pcard__hpn b{font-family:var(--mono);letter-spacing:0;color:#fff}
.pcard__item{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__item img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.pcard__item em{font-style:normal;color:var(--txt-dim)}
/* An empty place is a hollow Poke Ball. */
.pcard.is-empty{cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:transparent;border:1px dashed var(--line)}
.pcard.is-empty:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pcard__emptyball{width:40px;aspect-ratio:1;border-radius:50%;opacity:.5;
  background:
    radial-gradient(circle,transparent 0 17%,var(--line) 18% 27%,transparent 28%),
    linear-gradient(transparent 45%,var(--line) 45% 55%,transparent 55%);
  box-shadow:inset 0 0 0 3px var(--line)}
.pcard__emptyn{font-size:11px;color:var(--txt-dim)}

.party__presets{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.party__sub{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:11px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.party__sub em{font-size:11px;font-style:normal;font-weight:400;letter-spacing:0;text-transform:none}
.party__presetgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ppreset{display:flex;flex-direction:column;gap:6px;padding:9px 10px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line)}
.ppreset.is-empty{border-style:dashed}
.ppreset__name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppreset__mons{display:flex;gap:2px;min-height:34px;align-items:center}
.ppreset__mons img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.ppreset__mons em{font-size:11px;font-style:normal;color:var(--txt-dim)}
.ppreset__acts{display:flex;gap:6px}

/* ── Battle History: the VS Recorder ──────────────────────
   The device on top, match cards down the left, the chosen battle
   on the right: a small field, four numbers and the timeline. */
.bh{display:grid;gap:14px;container:bh/inline-size}
.bh-device{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:12px 16px;border-radius:16px;background:linear-gradient(180deg,#c21d1d,#7a0b0b);
  border:1px solid #ff6b6b;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -6px 14px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.4)}
.bh-device > img{width:40px;height:40px;image-rendering:pixelated}
.bh-device__lens{position:relative;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#bfe3ff,#1d6fd6 45%,#062a5c);
  box-shadow:0 0 0 4px #2a0505,0 0 12px rgba(124,196,255,.6)}
.bh-device__lens::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(124,196,255,.6);animation:bh-ring 2s infinite}
@keyframes bh-ring{from{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}
.bh-device__screen{display:flex;flex-wrap:wrap;gap:4px 14px;min-width:0;padding:8px 12px;border-radius:10px;
  background:linear-gradient(180deg,#0d1a12,#0a140e);box-shadow:inset 0 2px 6px rgba(0,0,0,.7);
  font:600 .82rem var(--display);color:#8cf5b0;letter-spacing:.04em}
.bh-device__screen b{color:#d7ffe4}
.bh-rec{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#ff4d4d;
  animation:bh-blink 1s infinite}
@keyframes bh-blink{50%{opacity:.35}}
.bh-filters{display:flex;flex-wrap:wrap;gap:6px}
.bh-fbtn{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--ink-2);cursor:pointer;
  font:600 .78rem var(--display);color:var(--txt-dim)}
.bh-fbtn[aria-pressed="true"]{background:var(--ink-4);color:var(--txt);border-color:#3c4a6a}
.bh-empty{margin:0;padding:24px;border-radius:12px;border:1px dashed var(--line);color:var(--txt-dim);text-align:center}
.bh-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.bh-cards{display:grid;gap:10px}

.bh-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
  align-items:center;min-height:106px;padding:0;overflow:hidden;border-radius:14px;cursor:pointer;text-align:left;
  color:var(--txt);font:inherit;border:1px solid var(--line);background:var(--ink-2);
  animation:bh-in .45s both;transition:transform .15s,border-color .15s}
.bh-card:hover{transform:translateX(3px)}
.bh-card[aria-current="true"]{border-color:#ff6b6b;box-shadow:0 0 0 1px rgba(255,107,107,.3)}
@keyframes bh-in{from{transform:translateX(-24px);opacity:0}}
.bh-card__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.35}
.bh-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,color-mix(in srgb,var(--c1,var(--t-normal)) 55%,rgba(11,15,23,.6)) 0 47%,rgba(11,15,23,.85) 47% 53%,
    color-mix(in srgb,var(--c2,var(--t-normal)) 55%,rgba(11,15,23,.6)) 53%)}
.bh-card__meta{position:absolute;left:12px;top:6px;font-size:.66rem;color:rgba(255,255,255,.78)}
.bh-card__meta--r{left:auto;right:12px}
.bh-side{display:flex;align-items:center;gap:6px;min-width:0;padding:16px 12px 10px}
.bh-side--foe{flex-direction:row-reverse;text-align:right}
.bh-side__lead{flex:none;width:72px;height:72px;object-fit:contain}
.bh-side__tr{flex:none;width:56px;height:72px;object-fit:contain}
.bh-side__rest{display:flex;flex-wrap:wrap;max-width:76px}
.bh-side__rest img{width:30px;height:30px}
.bh-side__rest img.is-down{filter:grayscale(1) brightness(.55)}
.bh-side__who{display:grid;min-width:0}
.bh-side__who b{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-side__who small{font-size:.7rem;color:rgba(255,255,255,.72)}
.bh-vs{font:900 1rem var(--display);font-style:italic;text-align:center;text-shadow:2px 2px 0 #000}
.bh-stamp{position:absolute;left:50%;bottom:6px;transform:translateX(-50%) rotate(-6deg);padding:2px 10px;border-radius:6px;
  font:900 .74rem var(--display);letter-spacing:.14em;white-space:nowrap;border:2px solid currentColor;background:rgba(0,0,0,.55);
  animation:bh-stamp .4s .3s cubic-bezier(.2,1.8,.4,1) both}
@keyframes bh-stamp{from{transform:translateX(-50%) rotate(-6deg) scale(3);opacity:0}}
.bh-stamp img{width:14px;height:14px;margin-right:4px;vertical-align:-2px;image-rendering:pixelated}
.bh-stamp--won{color:#7dffb5} .bh-stamp--lost{color:#ff8a95} .bh-stamp--caught{color:#ffe36e} .bh-stamp--fled{color:#aab3c5}

.bh-detail{display:grid;gap:12px;padding:14px;border-radius:16px;background:var(--ink-2);border:1px solid var(--line)}
.bh-detail__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.bh-detail__head h3{margin:0;font:800 1.1rem var(--display)}
.bh-detail__head p{margin:2px 0 0;font-size:.78rem;color:var(--txt-dim)}
.bh-play{background:linear-gradient(180deg,#ff3b3b,var(--red));border-color:#ff6060;color:#fff;font-family:var(--display);font-weight:700}
.bh-field{position:relative;height:150px;overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#22314f,#121a2c);
  background-size:cover;background-position:center 60%}
.bh-field::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(10,14,24,.5))}
.bh-mon{position:absolute;z-index:1}
.bh-mon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
.bh-mon img.is-flip{transform:scaleX(-1)}
.bh-mon--foe{right:14%;top:8%;width:90px;height:90px}
.bh-mon--me{left:12%;bottom:-6%;width:110px;height:110px}
.bh-mon.is-hit{animation:bh-hit .45s}
@keyframes bh-hit{0%,100%{transform:none;filter:none}20%{transform:translateX(-10px);filter:brightness(3)}
  40%{transform:translateX(9px)}60%{transform:translateX(-6px);filter:brightness(2)}80%{transform:translateX(4px)}}
.bh-mon.is-faint{animation:bh-faint .6s forwards}
@keyframes bh-faint{to{transform:translateY(50px);opacity:0}}
.bh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bh-stat{display:grid;padding:8px 10px;border-radius:11px;background:var(--ink-3);border:1px solid var(--line)}
.bh-stat b{font:800 1.3rem var(--display);font-variant-numeric:tabular-nums}
.bh-stat small{font-size:.66rem;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.08em}
.bh-timeline{position:relative;display:grid;gap:2px;max-height:340px;overflow:auto;padding:4px 4px 4px 34px}
.bh-timeline::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#3a4766,transparent)}
.bh-turn{position:relative;margin:8px 0 2px;font:800 .7rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim)}
.bh-turn::before{content:attr(data-n);position:absolute;left:-30px;top:-3px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink-4);border:1px solid #3a4766;color:var(--txt);font-size:.66rem;letter-spacing:0}
.bh-tl{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;font-size:.84rem;color:#c7d0dc}
.bh-tl__ic{flex:none;display:grid;place-items:center;min-width:22px;height:22px}
.bh-tl--move .bh-tl__ic{min-width:70px;justify-items:start}
.bh-ty{display:block;height:14px;width:auto}
.bh-ball{width:20px;height:20px;image-rendering:pixelated}
.bh-ball.is-down{filter:grayscale(1) brightness(.6)}
.bh-st{max-width:24px;max-height:14px}
.bh-dot{width:6px;height:6px;border-radius:50%;background:#56627c}
.bh-tl--super{background:rgba(255,203,5,.07);color:#ffe9a3}
.bh-tl--crit{background:rgba(255,90,106,.08);color:#ffc2c8}
.bh-tl--resist{color:#9fb0c8}
.bh-tl--faint{color:var(--txt-dim)}
.bh-tl--catch,.bh-tl--win{background:rgba(63,217,138,.08);color:#b9f5d2}
.bh-tl--lose{background:rgba(255,90,106,.08)}
.bh-tl.is-in{animation:bh-tl .3s both}
@keyframes bh-tl{from{transform:translateX(-10px);opacity:0}}
.bh-tl.is-typing .bh-tl__tx::after{content:"|";margin-left:1px;color:var(--txt-dim);animation:bh-blink .8s infinite}
@container bh (max-width:720px){
  .bh-split{grid-template-columns:minmax(0,1fr)}
  .bh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bh-card{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}
  .bh-side__rest{display:none}
  .bh-side__lead{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  .bh-card,.bh-stamp,.bh-tl.is-in,.bh-device__lens::after,.bh-rec{animation:none}
}

/* ============================================================
   HALL OF FAME
   The rankings window: a hero that says what the board ranks, one
   sprite tab per board, Everyone / Friends / Guild, the top three in
   Hall of Fame frames, slim rows below, and the player's own place
   pinned in red under the list. The window takes the colour of the
   board that is open (--bc). The sign-in page uses the frames and
   rows alone (.hof-list.is-compact).
   ============================================================ */
/* The metals of the three frames, wherever a list is drawn - the
   sign-in page has the list without the window around it. */
.hof,.hof-list{--gold:#FFD54A;--silver:#C8D0DA;--bronze:#D98C45}
.hof{
  --pad:17px;--bc:#FF4E4E;
  margin:calc(var(--pad) * -1);
  min-height:calc(100% + var(--pad) * 2);
  display:flex;flex-direction:column;position:relative;
}
.hof__body{flex:1;transition:opacity .15s}
.hof.is-loading .hof__body{opacity:.45;pointer-events:none}
@media (max-width:620px){.hof{--pad:12px}}

/* ── Hero ───────────────────────────────────────────── */
.hof-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:20px 20px 16px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(420px 170px at 10% 30%,color-mix(in srgb,var(--bc) 30%,transparent),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.hof-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 14px);
  -webkit-mask:linear-gradient(90deg,#000,transparent 65%);mask:linear-gradient(90deg,#000,transparent 65%);
}
.hof-hero__emb{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--bc) 45%,var(--ink-3)),var(--ink) 75%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--bc) 55%,transparent),
             0 0 26px color-mix(in srgb,var(--bc) 40%,transparent);
  animation:hofPop .45s cubic-bezier(.2,.8,.2,1) both;
}
.hof-hero__emb img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.hof-hero__txt{min-width:0}
.hof-hero__eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bc)}
.hof-hero__h{font:800 24px/1.12 var(--display);margin:3px 0 4px;text-wrap:balance}
.hof-hero__sub{font-size:12.5px;color:var(--txt-dim);line-height:1.45;max-width:52ch;margin:0}
.hof-hero__stat{text-align:right;display:flex;flex-direction:column}
.hof-hero__stat b{font:800 28px/1 var(--display);font-variant-numeric:tabular-nums}
.hof-hero__stat span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim);margin-top:3px}
.hof-season{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:4px 10px 4px 8px;
  border-radius:99px;background:rgba(255,203,5,.1);border:1px solid rgba(255,203,5,.35);
  font-size:12px;font-weight:700;color:var(--yellow);
}
.hof-season i,.hof-live i{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor;animation:hofPulse 1.6s infinite}

/* The Tower's prizes, places 1 to 10. */
.hof-prizes{display:flex;gap:6px;padding:9px 20px;overflow-x:auto;scrollbar-width:thin;
  border-bottom:1px solid var(--line);background:rgba(255,203,5,.035)}
.hof-prizes__lbl{flex:0 0 auto;align-self:center;margin-right:4px;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim)}
.hof-prize{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;
  border-radius:10px;background:var(--ink-3);border:1px solid var(--line);font-size:12px}
.hof-prize b{font-variant-numeric:tabular-nums}
.hof-prize img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.hof-prize__rk{font:800 12px/1 var(--display);min-width:34px;text-align:center;padding:4px 6px;
  border-radius:6px;background:var(--ink-4)}
.hof-prize.is-1 .hof-prize__rk{background:linear-gradient(135deg,#FFF0B8,var(--gold) 50%,#C99A00);color:#2a1d00}
.hof-prize.is-2 .hof-prize__rk{background:linear-gradient(135deg,#fff,var(--silver) 50%,#7E8896);color:#1c2027}
.hof-prize.is-3 .hof-prize__rk{background:linear-gradient(135deg,#F0C08A,var(--bronze) 50%,#8A5420);color:#2a1608}

/* ── Board tabs ─────────────────────────────────────── */
.hof-tabs{display:flex;gap:2px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line)}
.hof-tabs::-webkit-scrollbar{display:none}
.hof-tab{
  flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:76px;padding:8px 10px 9px;border-radius:10px 10px 0 0;
  font-size:11.5px;font-weight:700;color:var(--txt-dim);
  transition:color .15s,background .15s;
}
.hof-tab img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;
  filter:grayscale(.6) brightness(.85);transition:transform .2s,filter .2s}
.hof-tab:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.hof-tab:hover img{transform:translateY(-2px);filter:none}
.hof-tab.is-on{color:var(--txt);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 16%,transparent),transparent)}
.hof-tab.is-on img{filter:none;transform:scale(1.08)}
.hof-tab.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:var(--tc);box-shadow:0 0 10px var(--tc)}

/* ── Everyone / Friends / Guild ─────────────────────── */
.hof-scope{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 18px 2px}
.hof-seg{display:inline-flex;padding:3px;border-radius:99px;background:var(--ink-2);border:1px solid var(--line)}
.hof-seg button{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
  font-size:12px;font-weight:700;color:var(--txt-dim)}
.hof-seg button:hover{color:var(--txt)}
.hof-seg button.is-on{background:var(--ink-4);color:var(--txt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hof-seg img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.hof-scope__hint{font-size:12px;color:var(--txt-dim)}

/* ── Faces ──────────────────────────────────────────── */
.hof-face{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.hof-initial{display:none;font:800 16px/1 var(--display);color:var(--txt-dim)}
.hof-initial.is-on,.is-initial > .hof-initial{display:block}

/* ── The top three: Hall of Fame frames ─────────────── */
.hof-frames{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:end;
  max-width:640px;margin:0 auto;padding:22px 18px 10px;width:100%}
.hof-frame{
  --m:var(--silver);
  position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 8px 12px;border-radius:14px;text-align:center;
  background:
    linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35)),
    conic-gradient(from 200deg at 50% 0%,transparent 0deg,color-mix(in srgb,var(--m) 22%,transparent) 30deg,transparent 60deg),
    linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:2px solid color-mix(in srgb,var(--m) 70%,transparent);
  box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px color-mix(in srgb,var(--m) 30%,transparent),
             0 10px 24px rgba(0,0,0,.4);
  animation:hofPop .5s cubic-bezier(.2,.8,.2,1) backwards;
  transition:transform .15s;
}
button.hof-frame:hover{transform:translateY(-3px)}
.hof-frame--1{--m:var(--gold);padding-top:20px;animation-delay:.1s}
.hof-frame--3{--m:var(--bronze);animation-delay:.18s}
.hof-frame.is-empty{opacity:.4}
.hof-frame.is-you{outline:2px solid var(--red);outline-offset:3px}
.hof-frame__plaque{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:3px 12px;border-radius:6px;font:900 11.5px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;
  color:#1a1408;background:linear-gradient(135deg,rgba(255,255,255,.55),var(--m) 40%,color-mix(in srgb,var(--m) 60%,#000));
}
.hof-frame__crown{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:28px;height:28px;
  object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 8px rgba(255,213,74,.7))}
.hof-frame__mon{width:88px;height:88px;display:grid;place-items:center}
.hof-frame--1 .hof-frame__mon{width:112px;height:112px}
.hof-frame__mon .hof-face{filter:drop-shadow(0 5px 6px rgba(0,0,0,.6));animation:hofBob 3s ease-in-out infinite}
.hof-frame--2 .hof-face{animation-delay:-1s}
.hof-frame--3 .hof-face{animation-delay:-2s}
.hof-frame__mon .hof-initial{font-size:34px}
.hof-frame__name{max-width:100%;display:flex;align-items:center;justify-content:center;gap:4px;
  font:800 14.5px/1.2 var(--display)}
.hof-frame__name > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hof-frame__val{font:700 13px/1.2 var(--display);color:var(--m);font-variant-numeric:tabular-nums}
.hof-frame__val small,.hof-row__num small{font-weight:500;font-size:.8em;color:var(--txt-dim);margin:0 3px}

/* ── Rows ───────────────────────────────────────────── */
.hof-rows{display:flex;flex-direction:column;padding:6px 12px 8px}
.hof-row{
  display:grid;grid-template-columns:42px 40px minmax(0,1fr) minmax(92px,170px);gap:10px;align-items:center;
  width:100%;padding:6px 10px;border-radius:11px;text-align:left;
  animation:hofSlide .35s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0ms);
  transition:background .15s;
}
.hof-row:nth-child(even){background:rgba(255,255,255,.018)}
.hof-row:hover{background:var(--ink-3)}
.hof-row:focus-visible,.hof-frame:focus-visible{outline:2px solid var(--bc);outline-offset:1px}
.hof-row__rk{font:800 15px/1 var(--display);color:var(--txt-dim);text-align:center;font-variant-numeric:tabular-nums}
.hof-row__mon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;overflow:visible;
  background:radial-gradient(circle at 50% 40%,var(--ink-4),var(--ink-2))}
.hof-row__mon .hof-face{width:46px;height:46px;max-width:none;margin-top:-6px}
.hof-row__id{min-width:0;display:flex;flex-direction:column;gap:2px}
.hof-row__name{display:flex;align-items:center;gap:5px;min-width:0;font-weight:700;font-size:14.5px}
.hof-row__nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hof-row__sub{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt-dim);
  white-space:nowrap;overflow:hidden}
.hof-row__val{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.hof-row__num{display:flex;align-items:center;font:700 14px/1.1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.hof-row__prize{width:22px;height:22px;margin-left:4px;object-fit:contain;image-rendering:pixelated}
.hof-bar{width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.hof-bar i{display:block;height:100%;border-radius:3px;transform-origin:left;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bc) 55%,#000),var(--bc));
  animation:hofGrow .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.hof-row.is-you{background:linear-gradient(90deg,rgba(238,21,21,.16),transparent 70%);box-shadow:inset 3px 0 0 var(--red)}
.hof-row.is-flash,.hof-frame.is-flash{animation:hofFlash 1.4s ease}
.hof-you{flex:0 0 auto;padding:2px 6px;border-radius:99px;background:var(--red);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hof-champ{padding:1px 6px;border-radius:99px;background:linear-gradient(135deg,var(--yellow),#E8A800);color:#3A2E00;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hof-live{display:inline-flex;align-items:center;gap:5px;color:var(--ok);font-weight:700}
.hof-live i{width:6px;height:6px}
.hof-pips{display:inline-flex;gap:2px}
.hof-pips i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.12)}
.hof-pips i.is-on{background:var(--yellow);box-shadow:0 0 4px rgba(255,203,5,.6)}
.hof-ranks{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.hof-ranks .lbrank{width:26px;height:20px}
.hof-empty{padding:40px 20px;text-align:center;color:var(--txt-dim);font-size:13px}

/* ── Pager and last month ───────────────────────────── */
.hof-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:4px 12px 14px}
.hof-pager button{min-width:32px;height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--line);
  background:var(--ink-3);font-weight:700;font-size:12.5px;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.hof-pager button:hover{color:var(--txt)}
.hof-pager button.is-on{background:var(--ink-4);color:var(--txt);border-color:var(--bc)}
.hof-pager span{color:var(--txt-dim);padding:0 2px}
.hof-last{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:2px 18px 14px;padding:8px 12px;
  border-radius:11px;border:1px dashed var(--line);background:var(--ink-2);font-size:12px;color:var(--txt-dim)}
.hof-last__who{display:inline-flex;align-items:center;gap:5px;color:var(--txt);font-weight:600}
.hof-last__mon{width:30px;height:30px;display:grid;place-items:center}

/* ── The player's own place ─────────────────────────── */
/* Stuck to the very bottom of the window: a sticky edge stops at the
   scroller's padding, so it is pulled down through that padding. */
.hof__me{position:sticky;bottom:calc(var(--pad) * -1);z-index:2}
.hof-me{
  display:grid;grid-template-columns:auto 40px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 16px;border-top:1px solid rgba(238,21,21,.45);
  background:linear-gradient(90deg,color-mix(in srgb,var(--red) 26%,var(--ink-2)),var(--ink-2) 45%);
  box-shadow:0 -8px 18px rgba(0,0,0,.35);
}
.hof-me.is-out{grid-template-columns:1fr;font-size:12.5px;color:var(--txt-dim);
  background:var(--ink-2);border-top-color:var(--line)}
.hof-me__rk{font:900 20px/1 var(--display);font-variant-numeric:tabular-nums}
.hof-me__rk small{display:block;margin-top:2px;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim)}
.hof-me__mon{width:40px;height:40px;display:grid;place-items:center}
.hof-me__mon .hof-face{width:44px;height:44px;max-width:none}
.hof-me__txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.hof-me__txt > b{font-weight:700}
.hof-me__gap{font-size:12px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hof-me__gap em{font-style:normal;font-weight:700;color:var(--yellow)}
.hof-me__go{padding:7px 14px;border-radius:9px;background:var(--red);color:#fff;font-weight:700;font-size:12.5px;white-space:nowrap}
.hof-me__go:hover{background:var(--red-lt)}

/* ── A trainer's card ───────────────────────────────── */
.hof-card__bg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;
  background:rgba(5,7,10,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hof-card{width:100%;max-width:340px;overflow:hidden;border-radius:16px;background:var(--ink-2);
  border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6);animation:hofPop .3s cubic-bezier(.2,.8,.2,1)}
.hof-card__top{position:relative;display:flex;gap:12px;align-items:center;padding:16px 44px 12px 16px;
  background:radial-gradient(260px 120px at 20% 10%,color-mix(in srgb,var(--bc) 30%,transparent),transparent),var(--ink-3)}
.hof-card__mon{width:84px;height:84px;flex:0 0 auto;display:grid;place-items:center}
.hof-card__mon .hof-initial{font-size:34px}
.hof-card__who{min-width:0;display:flex;flex-direction:column;gap:4px}
.hof-card__name{font:800 19px/1.15 var(--display);overflow-wrap:anywhere}
.hof-card__meta{font-size:12px;color:var(--txt-dim)}
.hof-card__who .lbrank{width:36px;height:28px}
.hof-card__x{position:absolute;top:10px;right:10px;width:30px;height:30px;padding:7px;border-radius:9px;color:var(--txt-dim)}
.hof-card__x:hover{background:var(--red);color:#fff}
.hof-card__x svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.hof-card__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.hof-card__grid div{display:flex;flex-direction:column;gap:2px;padding:9px 10px;background:var(--ink-2)}
.hof-card__grid b{font:700 14.5px/1.1 var(--display);font-variant-numeric:tabular-nums}
.hof-card__grid span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim)}
.hof-card__badges{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;
  border-top:1px solid var(--line);font-size:12px;color:var(--txt-dim)}
.hof-card__badges .hof-pips i{width:10px;height:10px}
.hof-card__badges b{color:var(--txt);font-variant-numeric:tabular-nums}
.hof-card__acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.hof-card__acts:empty{display:none}
.hof-card__acts button{flex:1;padding:8px 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--ink-3);font-weight:700;font-size:12.5px}
.hof-card__acts button:hover:not(:disabled){border-color:var(--bc)}
.hof-card__acts button:disabled{opacity:.6}
.hof-card__guild{flex-basis:100%;font-size:11.5px;color:var(--txt-dim)}

/* ── Sign-in page preview ───────────────────────────── */
.hof-list.is-compact .hof-frames{padding:24px 12px 6px;gap:8px}
.hof-list.is-compact .hof-frame__mon{width:68px;height:68px}
.hof-list.is-compact .hof-frame--1 .hof-frame__mon{width:86px;height:86px}
.hof-list.is-compact .hof-rows{padding:4px 8px 10px}
.hof-list.is-compact .hof-row{cursor:default}

/* The medals still used by the Battle Tower's own ranking. */
.lbmedal{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:900;color:#1A1408;
}
.lbmedal svg{display:none}
.lbmedal::after{content:attr(data-rank)}
.lbmedal--gold{
  background:radial-gradient(circle at 35% 28%,#FFF0B8,#FFD54A 45%,#D9A800);
  box-shadow:0 0 12px rgba(255,213,74,.55),inset 0 -2px 4px rgba(0,0,0,.25);
}
.lbmedal--silver{
  background:radial-gradient(circle at 35% 28%,#FFF,#C8D0DA 45%,#8A94A2);
  box-shadow:0 0 9px rgba(200,208,218,.4),inset 0 -2px 4px rgba(0,0,0,.25);
}
.lbmedal--bronze{
  background:radial-gradient(circle at 35% 28%,#F0C08A,#CD7F32 45%,#8A5420);
  box-shadow:0 0 9px rgba(205,127,50,.4),inset 0 -2px 4px rgba(0,0,0,.25);
  color:#2A1608;
}

@media (max-width:640px){
  .hof-hero{grid-template-columns:auto minmax(0,1fr);padding:16px 14px 12px;gap:12px}
  .hof-hero__stat{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:8px;text-align:left}
  .hof-hero__stat b{font-size:20px}
  .hof-hero__h{font-size:19px}
  .hof-hero__emb{width:54px;height:54px}
  .hof-hero__emb img{width:32px;height:32px}
  .hof-prizes{padding-inline:14px}
  .hof-tab{min-width:64px;padding-inline:7px}
  .hof-scope{padding-inline:14px}
  .hof-frames{gap:6px;padding:24px 8px 8px}
  .hof-frame{padding-inline:4px}
  .hof-frame__mon{width:64px;height:64px}
  .hof-frame--1 .hof-frame__mon{width:80px;height:80px}
  .hof-frame__name{font-size:12.5px}
  .hof-frame__name .hof-ranks{display:none}
  .hof-frame__val{font-size:11.5px}
  .hof-rows{padding-inline:6px}
  .hof-row{grid-template-columns:30px 36px minmax(0,1fr) 76px;gap:7px;padding:6px}
  .hof-row__mon{width:36px;height:36px}
  .hof-row__mon .hof-face{width:42px;height:42px}
  .hof-row__name{font-size:13.5px}
  .hof-row__sub .hof-pips{display:none}
  .hof-row__num{font-size:12.5px}
  .hof-last{margin-inline:12px}
  .hof-me{grid-template-columns:auto 36px minmax(0,1fr);gap:8px 10px;padding:9px 12px}
  .hof-me__go{grid-column:1 / -1}
  .hof-me__gap{white-space:normal}
}

@keyframes hofPop{from{transform:translateY(10px) scale(.96);opacity:.2}to{transform:none;opacity:1}}
@keyframes hofSlide{from{transform:translateX(-8px);opacity:.3}to{transform:none;opacity:1}}
@keyframes hofGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hofBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hofPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hofFlash{0%,60%{background-color:rgba(255,203,5,.28)}100%{background-color:transparent}}
@media (prefers-reduced-motion:reduce){
  .hof *,.hof-list *,.hof-card{animation:none!important;transition:none!important}
}

/* ============================================================
   CUTSCENE
   ============================================================ */
.cut{
  position:fixed;inset:0;z-index:300;
  opacity:0;transition:opacity .42s ease;
  overflow:hidden;user-select:none;cursor:pointer;
}
.cut.is-in{opacity:1}
.cut[hidden]{display:none}

.cut__bg{
  position:absolute;inset:0;
  /* Opaque base colour under the gradient: the cutscene must never let
     the game screen behind it show through. */
  background-color:#0E1116;
  background-image:linear-gradient(180deg,#0E1116,#1A2230 60%,#0E1116);
  background-size:cover;background-position:center;
  transition:background .6s ease;
}
.cut__bg.is-lab{
  background-color:#141C26;
  background-image:
    radial-gradient(ellipse at 50% 30%,rgba(120,180,230,.2),transparent 60%),
    linear-gradient(180deg,#1A2634,#243244 55%,#141C26);
}
.cut__bg.is-village{
  background-color:#243020;
  background-image:
    radial-gradient(ellipse at 50% 25%,rgba(255,200,120,.16),transparent 60%),
    linear-gradient(180deg,#2A3A4E,#3E5A48 52%,#243020);
}
.cut__bg::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px);
  opacity:.35;
}
/* Scanlines suit the flat gradient scenes; over real artwork they only
   add grime. */
.cut__bg.has-photo::after{opacity:.12}

/* A photo backdrop replaces the gradient. It gets a scrim so the actors
   and the dialogue box keep their contrast against a busy scene. */
.cut__bg.has-photo{
  background-size:cover;background-position:center;
  background-repeat:no-repeat;
  /* The art is small pixel work blown up to full screen; a smooth
     upscale turns it to mush, so keep the pixels crisp. */
  image-rendering:pixelated;
}
/* Just enough scrim to seat the actors and keep the dialogue legible,
   without swallowing the scene. */
.cut__bg.has-photo::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,10,14,.10) 55%,rgba(6,10,14,.62));
}

/* ── Actors ──────────────────────────────────────────── */
.cut__stage{position:absolute;inset:0}
.cutactor{
  position:absolute;bottom:26%;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1),
             left .5s ease,right .5s ease;
}
.cutactor.is-in{opacity:1;transform:translateY(0)}
.cutactor img{display:block;filter:drop-shadow(0 12px 26px rgba(0,0,0,.6))}
.cutactor.is-flip img{transform:scaleX(-1)}

/* Kept well inside the frame: on a wide screen the two speakers should
   read as facing each other, not pinned to opposite edges. */
.cutactor.is-left{left:26%}
.cutactor.is-right{right:26%}
.cutactor.is-center{left:50%;margin-left:-90px}

@media (min-width:1500px){
  .cutactor.is-left{left:30%}
  .cutactor.is-right{right:30%}
}

.cutactor.is-tall img{height:min(56vh,470px);width:auto}
/* The source sprites are 96px; without an explicit width they render at
   native size and look lost on a full-screen stage. */
.cutactor.is-mon img{
  height:min(34vh,260px);width:auto;min-width:180px;
  object-fit:contain;image-rendering:pixelated;
}
.cutactor.is-item img{
  height:min(13vh,96px);width:auto;image-rendering:pixelated;
}

/* Prof Aspen's Premier Ball: falls, settles, then bursts open. */
.cutactor.anim-drop img{animation:cutDrop .9s cubic-bezier(.5,0,.75,.2) forwards}
@keyframes cutDrop{
  from{transform:translateY(-38vh) rotate(-20deg)}
  70%{transform:translateY(0) rotate(4deg)}
  85%{transform:translateY(-14px) rotate(-2deg)}
  to{transform:translateY(0) rotate(0)}
}
.cutactor.anim-burst img{animation:cutBurst .7s ease-out forwards}
@keyframes cutBurst{
  0%{transform:scale(1);filter:brightness(1)}
  45%{transform:scale(1.5);filter:brightness(5) drop-shadow(0 0 30px #fff)}
  to{transform:scale(2.4);opacity:0;filter:brightness(8)}
}
.cutactor.anim-appear img{animation:cutAppear .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes cutAppear{
  0%{transform:scale(.2);opacity:0;filter:brightness(6)}
  55%{filter:brightness(2.4)}
  to{transform:scale(1);opacity:1;filter:brightness(1)}
}

/* ── Dialogue ────────────────────────────────────────── */
.cut__box{
  position:absolute;left:50%;bottom:5%;transform:translateX(-50%);
  width:min(860px,calc(100vw - 32px));
  min-height:118px;
  padding:16px 22px 20px;
  background:rgba(12,17,24,.94);
  border:2px solid rgba(255,255,255,.22);
  border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
}
.cut__box[hidden]{display:none}
.cut__speaker{
  display:flex;align-items:center;gap:10px;
  margin-bottom:9px;
}
.cut__speaker[hidden]{display:none}
.cut__speaker span{
  font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--yellow);
}
.cut__portrait{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:2px solid var(--yellow);background:var(--ink);
  image-rendering:auto;
}
.cut__text{
  font-size:15px;line-height:1.65;min-height:50px;
}
.cut__next{
  position:absolute;right:18px;bottom:12px;
  color:var(--yellow);font-size:13px;
  animation:cutBlink 1s steps(2) infinite;
}
.cut__next[hidden]{display:none}
@keyframes cutBlink{50%{opacity:0}}

.cut__skip{
  position:absolute;top:16px;right:16px;
  padding:7px 15px;font-size:12px;font-weight:700;
  background:rgba(12,17,24,.8);border:1px solid var(--line);
  border-radius:99px;color:var(--txt-dim);
}
.cut__skip:hover{color:var(--txt);border-color:var(--txt-dim)}
.cut__skip[hidden]{display:none}

/* ── Choices ─────────────────────────────────────────── */
.cut__choices{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:24px;
  /* Light enough that the scene stays visible behind the cards; the
     cards carry their own background for contrast. */
  background:rgba(6,10,14,.42);backdrop-filter:blur(3px);
  overflow-y:auto;

  /* Centred only while it fits. `justify-content:center` on a
     scrolling flex column overflows in BOTH directions, and no
     browser scrolls above the start edge — so on a phone the top of
     the starter grid hung off the screen and could not be reached by
     scrolling. Generations 1 and 2 were rendered and unreachable.

     `safe center` falls back to flex-start the moment the content is
     taller than the box; the auto margins do the same for browsers
     that do not know the keyword yet. */
  justify-content:safe center;
}
.cut__choices:not(.is-confirm) > :first-child{margin-top:auto}
.cut__choices:not(.is-confirm) > :last-child{margin-bottom:auto}
.cut__choices[hidden]{display:none}

/* A confirmation is about something the player is looking at, so the
   veil is lifted and the buttons move to the top — otherwise the blur
   hides the very Pokemon the question is asking about. */
.cut__choices.is-confirm{
  justify-content:flex-start;padding-top:8vh;
  background:linear-gradient(180deg,rgba(6,10,14,.72) 0%,
    rgba(6,10,14,.45) 34%,transparent 56%);
  backdrop-filter:none;
}
.cut__choicehead{
  font-size:clamp(17px,3vw,24px);font-weight:900;letter-spacing:.04em;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 26px rgba(0,0,0,.7);
}
.cut__opts{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  max-width:900px;
}
.cut__choices.is-grid .cut__opts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:10px;width:min(880px,100%);
}
.cutopt{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 18px;min-width:104px;
  background:rgba(14,19,26,.9);border:2px solid var(--line);border-radius:13px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:.16s;
}
.cutopt:hover{
  border-color:var(--red);transform:translateY(-3px);
  background:var(--ink-3);
}
.cutopt img{
  width:76px;height:76px;object-fit:contain;image-rendering:pixelated;
}
.cut__choices.is-grid .cutopt{padding:10px 6px 8px;min-width:0}
/* 96px source sprites: render them at native size so the grid reads as
   a row of Pokemon rather than a row of labels. */
.cut__choices.is-grid .cutopt img{width:88px;height:88px}
.cutopt__label{font-size:13px;font-weight:800}
.cut__choices.is-grid .cutopt__label{font-size:11px}
.cutopt__sub{font-size:10px;color:var(--txt-dim);letter-spacing:.04em}

@media (max-width:640px){
  .cutactor.is-left{left:4%}
  .cutactor.is-right{right:4%}
  .cutactor.is-tall img{height:min(40vh,320px)}
  .cut__text{font-size:14px}
  .cut__portrait{width:36px;height:36px}
  /* Twenty-seven starters is a long scroll on a phone, so the
     cards lose the padding they do not need. Four to a row instead
     of three turns nine rows into seven. */
  .cut__choices{padding:16px 12px;gap:12px}
  .cut__choices.is-grid .cut__opts{
    grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
  .cut__choices.is-grid .cutopt{padding:6px 4px 5px;gap:2px}
  .cut__choices.is-grid .cutopt img{width:64px;height:64px}
  .cut__choices.is-grid .cutopt__label{font-size:10px;line-height:1.2}
  .cut__choices.is-grid .cutopt__sub{font-size:9px}
}

/* ============================================================
   POKEDEX & WORLDDEX
   ============================================================ */
.dexbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:10px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
}
.dexbar__stat{display:flex;flex-direction:column;align-items:center;min-width:56px}
.dexbar__stat b{font-size:19px;font-weight:900;line-height:1}
.dexbar__stat b.is-shiny{color:var(--shiny)}
.dexbar__stat b.is-shadow{color:var(--shadow)}
.dexbar__stat span{
  font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700;margin-top:3px;
}
.dexbar__prog{
  flex:1;min-width:120px;height:8px;border-radius:99px;
  background:var(--ink);overflow:hidden;
}
.dexbar__prog i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--yellow));
}
.dexnote{
  font-size:12px;line-height:1.6;color:var(--txt-dim);
  margin-bottom:12px;
}

/* Grid of entries. Unregistered species stay as dark silhouettes. */
.dexgrid,.wdxgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px;
}
.dexcell,.wdxcell{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:10px;
  text-align:center;
}
.dexcell img,.wdxcell img{
  width:56px;height:56px;object-fit:contain;image-rendering:pixelated;
}
.dexcell__no,.wdxcell__no{
  font-size:9px;font-weight:800;color:var(--txt-dim);letter-spacing:.04em;
}
.dexcell__name,.wdxcell__name{
  font-size:11px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* Seen but not caught: the sprite is dimmed but still readable. */
.dexcell.is-seen img{filter:grayscale(1) brightness(.7);opacity:.75}
.dexcell.is-seen .dexcell__name{color:var(--txt-dim)}
/* Never encountered: a flat silhouette. */
.dexcell.is-unknown img,.wdxcell.is-unknown img{
  filter:brightness(0) invert(.22);opacity:.5;
}
.dexcell.is-unknown .dexcell__name,
.wdxcell.is-unknown .wdxcell__name{color:var(--txt-dim);opacity:.65}
.dexcell.is-caught{border-color:rgba(238,21,21,.34)}
/* A Pokedex entry opens its page, so it is a button - drawn exactly
   as the tile it always was. */
button.dexcell{font:inherit;color:inherit;cursor:pointer}
button.dexcell:hover{border-color:var(--yellow)}

/* ── Pokedex and Worlddex: finding things ───────────────── */
.dexgens{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:5px;margin-bottom:10px}
.dexgen{display:flex;flex-direction:column;gap:3px;padding:6px 7px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--ink-3);
  color:var(--txt);font:inherit;cursor:pointer;text-align:left}
.dexgen b{font-size:11px}
.dexgen em{font-style:normal;font-size:9px;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.dexgen.is-on{border-color:var(--yellow)}
.dexgen__bar{display:block;height:4px;border-radius:99px;background:var(--ink);overflow:hidden}
.dexgen__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--yellow))}
.dexsearch{flex:1 1 180px;min-width:0;padding:7px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--ink);color:var(--txt);font:inherit;
  font-size:13px}
.dexsearch:focus{outline:none;border-color:var(--red-lt)}
.dexchips{display:flex;flex-wrap:wrap;gap:4px}
.dexchip{padding:5px 10px;border-radius:99px;border:1px solid var(--line);
  background:var(--ink-3);color:var(--txt-dim);font:inherit;font-size:11px;
  font-weight:700;cursor:pointer}
.dexchip.is-on{background:var(--red);border-color:var(--red);color:#fff}
.dexsels{display:flex;flex-wrap:wrap;gap:5px}
.dexsel{padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--ink);color:var(--txt);font:inherit;font-size:12px}
.dexclear{padding:0;border:0;background:none;color:var(--red-lt);font:inherit;
  font-size:12px;cursor:pointer;text-decoration:underline}
.wdxboard{list-style:none;display:flex;flex-direction:column;gap:4px;margin:0 0 14px;
  padding:0}
.wdxboard__row{display:grid;grid-template-columns:22px 1fr 38px 38px;align-items:center;
  gap:6px;padding:5px 10px;background:var(--ink-3);border:1px solid var(--line);
  border-radius:8px;font-size:12px}
.wdxboard__row.is-me{border-color:var(--yellow)}
.wdxboard__n{font-weight:800;color:var(--txt-dim)}
.wdxboard__who{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wdxboard__c{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.wdxboard__c.is-shiny{color:var(--shiny)}
.wdxboard__c.is-shadow{color:var(--shadow)}
.wdxcell.is-claimed{border-color:rgba(255,203,58,.34)}

.wdxfeed{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.wdxfeed__row{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:8px;
  font-size:12px;
}
.wdxfeed__row img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.wdxfeed__name{font-weight:800}
.wdxfeed__tag{
  font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;
}
.wdxfeed__tag--shiny{background:var(--shiny);color:#1A1206}
.wdxfeed__tag--shadow{background:var(--shadow);color:#fff}
.wdxfeed__by{margin-left:auto;font-weight:700;color:var(--yellow)}
.wdxfeed__at{font-size:10px;color:var(--txt-dim);white-space:nowrap}
.wdxfeed__empty{
  padding:14px;text-align:center;font-size:12px;color:var(--txt-dim);
  background:var(--ink-3);border:1px dashed var(--line);border-radius:8px;
}

.wdxtabs{display:flex;gap:6px;margin-bottom:10px}
.wdxtab{
  padding:7px 16px;font-size:12px;font-weight:800;
  background:var(--ink-3);border:1px solid var(--line);border-radius:99px;
  color:var(--txt-dim);
}
.wdxtab.is-on{background:var(--red);border-color:var(--red);color:#fff}

@media (max-width:640px){
  .dexgrid,.wdxgrid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .dexcell img,.wdxcell img{width:44px;height:44px}
  .wdxfeed__at{display:none}
}

/* ============================================================
   POKEDEX DEVICE (js/dex-device.js)
   The shell is drawn here; where each piece sits during the
   opening is set from the script, frame by frame. The screen is a
   dark display behind the cyan glass, and the two books are drawn
   onto it as three panels: list, entry, tabs.
   ============================================================ */
.dexdev{
  --dex-red:#D42A3C; --dex-red-lt:#E5485A; --dex-red-dk:#A81E2E;
  --dex-ring:#1B1B1D; --dex-ring-rim:#B49A86;
  --dex-glass:#CFF6F7; --dex-led:#4B5A7A;
  --dex-disp:#0B1A26; --dex-disp-2:#0F2433;
  --dex-line:rgba(92,214,230,.22); --dex-line-hi:rgba(92,214,230,.6);
  --dex-txt:#DDF6FA; --dex-dim:#8FB7C2; --dex-accent:#7DEBFA;
  position:fixed;inset:0;z-index:110;overflow:hidden;outline:none;
}
.dexdev[hidden]{display:none}
/* The page styles every svg as a full-size icon; the shell's pieces
   take the sizes they are drawn with. */
.dexdev svg{width:auto;height:auto;fill:none;stroke:none}
.dexdev__dim{position:absolute;inset:0;background:#000;opacity:0}
.dexdev__blur{position:absolute;inset:0;opacity:0;pointer-events:none;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* On a phone the blur goes. It sits over the whole game, which keeps
   moving behind it, so a phone re-blurred the full screen on every
   frame of the opening - most of why it stuttered. The device covers
   nearly all of a phone's screen anyway, and the dim stays. */
@media (max-width:860px){
  .dexdev__blur{backdrop-filter:none;-webkit-backdrop-filter:none}
}

.dexdev__dev{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;pointer-events:none}
.dexdev__dev > *{position:absolute;left:0;top:0;transform-origin:0 0}
/* The shell itself takes a click, so a click on the red halves is not a
   click on the backdrop behind them. */
.dexdev__cap,.dexdev__glass{pointer-events:auto}
/* Folding away, it no longer stands in the way of the game. */
.dexdev.is-closing,.dexdev.is-closing *{pointer-events:none!important}
.dexdev__cap{z-index:1;overflow:hidden;border:1.5px solid var(--dex-red-dk);
  background:linear-gradient(180deg,var(--dex-red-lt),var(--dex-red) 38%,var(--dex-red) 70%,var(--dex-red-dk))}
.dexdev__cap--top{border-bottom:0;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.25)}
.dexdev__cap--bot{border-top:0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),inset 0 3px 6px rgba(0,0,0,.25)}
.dexdev__cap svg{position:absolute;pointer-events:none}
.dexdev__arc{fill:none;stroke:var(--dex-red-dk);stroke-linecap:round}
.dexdev__arc-hi{fill:none;stroke:rgba(255,255,255,.14);stroke-linecap:round}
.dexdev__led{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;
  background:var(--dex-led);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.dexdev.is-lit .dexdev__led{background:var(--dex-glass);box-shadow:0 0 8px 2px rgba(150,240,255,.8)}
.dexdev__ring{z-index:2;line-height:0}
.dexdev__ring--bot svg{transform:scaleY(-1)}
.dexdev__ring-band{fill:var(--dex-ring)}
.dexdev__ring-glass{fill:var(--dex-glass)}
.dexdev__ring-inner{fill:none;stroke:rgba(40,110,130,.45);stroke-width:2}
.dexdev__ring-rim{fill:none;stroke:var(--dex-ring-rim);stroke-width:2.5}
.dexdev__glass{z-index:3;background:var(--dex-glass);
  border-top:2px solid rgba(40,110,130,.45);border-bottom:2px solid rgba(40,110,130,.45);
  box-shadow:inset 0 6px 10px -6px rgba(255,255,255,.9),inset 0 -6px 12px -8px rgba(40,110,130,.5)}
.dexdev__glow{z-index:4;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(180,250,255,.95),rgba(120,230,245,.35) 55%,transparent)}

.dexdev__layer{position:absolute;left:50%;top:50%;pointer-events:none}
.dexdev__boot{opacity:0;display:grid;place-items:center}
.dexdev .dexdev__logo{width:34%;height:auto;max-width:150px;aspect-ratio:1;stroke-dasharray:1 1;stroke-dashoffset:1}
.dexdev__logo *{fill:none;stroke:#2A8FBF;stroke-width:7;stroke-linecap:round}
/* Contained: the screen has its own fixed size, so nothing drawn in
   its thousands of nodes has to be laid out against the page, and the
   shell moving around it does not reach in. */
.dexdev__screen{opacity:0;overflow:hidden;border-radius:10px;contain:layout paint style;
  background:linear-gradient(180deg,var(--dex-disp-2),var(--dex-disp));
  box-shadow:inset 0 0 0 1px rgba(92,214,230,.35),inset 0 0 40px rgba(0,0,0,.35)}
.dexdev.is-ready .dexdev__screen{pointer-events:auto}
.dexdev__content{position:absolute;inset:0;overflow:hidden;color:var(--dex-txt)}
.dexdev__scan{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;
  background:#E9FEFF;box-shadow:0 0 12px 3px rgba(140,240,255,.85)}
.dexdev__chrome{opacity:0}
.dexdev.is-ready .dexdev__x{pointer-events:auto}
.dexdev__label{position:absolute;font-weight:900;letter-spacing:.22em;font-size:13px;
  color:rgba(255,255,255,.88);text-shadow:0 1px 0 rgba(0,0,0,.35);white-space:nowrap}
.dexdev__x{position:absolute;width:34px;height:34px;padding:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  border:2px solid rgba(255,255,255,.7);background:rgba(20,10,14,.55)}
.dexdev .dexdev__x svg{width:14px;height:14px}
.dexdev__x:hover{background:var(--dex-ring);border-color:#fff}
.dexdev__x:focus-visible{outline:2px solid var(--dex-accent);outline-offset:3px}

/* ── The screen: three panels ─────────────────────────── */
.dxs{display:grid;gap:10px;height:100%;padding:12px;font-size:12px;color:var(--dex-txt)}
.dexdev__content[data-layout="wide"] .dxs{
  grid-template-columns:minmax(0,36fr) minmax(0,28fr) minmax(0,36fr)}
.dxs__list,.dxs__entry,.dxs__tabs{
  min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px;
  border:1px solid var(--dex-line);border-radius:8px;background:rgba(14,40,56,.45)}
.dxs__list{overflow:hidden}
.dxs__entry{overflow-y:auto;align-items:center;text-align:center}
.dxs__tabs{overflow:hidden}
.dxs ::-webkit-scrollbar{width:7px}
.dxs ::-webkit-scrollbar-thumb{background:var(--dex-line);border-radius:4px}
.dxs *{scrollbar-width:thin;scrollbar-color:var(--dex-line) transparent}

/* A tall screen shows the list, and an opened entry instead of it. */
.dexdev__content[data-layout="tall"] .dxs{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.dexdev__content[data-layout="tall"] .dxs:not(.is-detail) .dxs__entry,
.dexdev__content[data-layout="tall"] .dxs:not(.is-detail) .dxs__tabs,
.dexdev__content[data-layout="tall"] .dxs.is-detail .dxs__list{display:none}
.dexdev__content[data-layout="tall"] .dxs.is-detail{display:block;overflow-y:auto}
.dexdev__content[data-layout="tall"] .dxs.is-detail .dxs__entry,
.dexdev__content[data-layout="tall"] .dxs.is-detail .dxs__tabs{overflow:visible;margin-bottom:10px}
.dexdev__content[data-layout="tall"] .dxs.is-detail .dxs__pane{overflow:visible}
.dxs__back{display:none;align-self:flex-start;padding:4px 10px;border-radius:99px;cursor:pointer;
  border:1px solid var(--dex-line-hi);background:transparent;color:var(--dex-txt);font:inherit;font-weight:700}
.dexdev__content[data-layout="tall"] .dxs__back{display:inline-block}

/* The list panel */
.dxs .dexbar{margin:0;padding:8px 10px;gap:12px;background:rgba(10,30,44,.6);border-color:var(--dex-line)}
.dxs .dexbar__stat{min-width:44px}
.dxs .dexbar__stat b{font-size:16px}
.dxs .dexbar__stat span{color:var(--dex-dim)}
.dxs .dexbar__prog{min-width:60px;height:6px;background:rgba(92,214,230,.15)}
.dxs .dexbar__prog i{background:linear-gradient(90deg,#3FB8CC,#9CF2FF)}
.dxs__find{display:flex;gap:6px}
.dxs .dexsearch{flex:1 1 auto;background:rgba(5,18,28,.85);border-color:var(--dex-line-hi);color:var(--dex-txt)}
.dxs .dexsearch:focus{border-color:var(--dex-accent)}
.dxs__ftoggle{flex:none;padding:5px 11px;border-radius:99px;cursor:pointer;font:inherit;font-weight:700;
  border:1px solid var(--dex-line);background:transparent;color:var(--dex-dim)}
.dxs__ftoggle[aria-expanded="true"],.dxs__ftoggle.has-active{border-color:var(--dex-line-hi);color:var(--dex-txt)}
.dxs__ftoggle b{display:inline-block;min-width:16px;margin-left:3px;padding:0 4px;border-radius:99px;
  background:var(--dex-accent);color:var(--dex-disp);font-size:10px}
.dxs__filters{display:flex;flex-direction:column;gap:7px;padding:8px;
  border:1px solid var(--dex-line);border-radius:7px;background:rgba(5,18,28,.5)}
.dxs__filters[hidden]{display:none}
.dxs .dexgens{grid-template-columns:repeat(5,minmax(0,1fr));margin:0;gap:4px}
.dxs .dexgen{padding:4px 5px;background:rgba(10,30,44,.7);border-color:var(--dex-line);color:var(--dex-txt)}
.dxs .dexgen.is-on{border-color:var(--dex-accent)}
.dxs .dexgen em{color:var(--dex-dim)}
.dxs .dexgen__bar{background:rgba(92,214,230,.12)}
.dxs .dexgen__bar i{background:linear-gradient(90deg,#3FB8CC,#9CF2FF)}
.dxs .dexchip{background:transparent;border-color:var(--dex-line);color:#A9D3DB}
.dxs .dexchip.is-on{background:rgba(92,214,230,.2);border-color:var(--dex-line-hi);color:#F0FDFF}
.dxs .dexsel{flex:1 1 120px;min-width:0;background:rgba(5,18,28,.85);border-color:var(--dex-line);color:var(--dex-txt)}
.dxs .dexnote{margin:0;font-size:11px;line-height:1.45;color:var(--dex-dim)}
.dxs .dexclear{color:var(--dex-accent)}
.dxs .dexgrid,.dxs .wdxgrid{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;padding:2px}
.dxs .dexcell,.dxs .wdxcell{position:relative;padding:5px 3px 6px;font:inherit;color:inherit;cursor:pointer;
  background:rgba(10,30,44,.6);border:1px solid var(--dex-line);border-radius:7px;
  content-visibility:auto;contain-intrinsic-size:74px 86px}
.dxs .dexcell img,.dxs .wdxcell img{width:48px;height:48px}
.dxs .dexcell .dexcell__ball{position:absolute;right:4px;top:4px;width:14px;height:14px}
.dxs .dexcell__no,.dxs .wdxcell__no{color:var(--dex-dim)}
.dxs .dexcell__name,.dxs .wdxcell__name{font-size:10.5px;white-space:nowrap}
.dxs .dexcell.is-seen img{filter:none;opacity:1}
.dxs .dexcell.is-seen .dexcell__name{color:var(--dex-dim)}
.dxs .dexcell.is-caught{border-color:var(--dex-line)}
.dxs .wdxcell.is-claimed{border-color:rgba(255,213,74,.4)}
.dxs--wdx[data-variant="shadow"] .wdxcell.is-claimed{border-color:rgba(155,92,255,.5)}
.dxs .dexcell:hover,.dxs .wdxcell:hover{border-color:var(--dex-line-hi)}
.dxs .dexcell.is-sel,.dxs .wdxcell.is-sel{border-color:var(--dex-accent);
  box-shadow:0 0 0 1px var(--dex-accent),0 0 12px rgba(125,235,250,.35)}
.dxs .dexcell:focus-visible,.dxs .wdxcell:focus-visible{outline:2px solid var(--dex-accent);outline-offset:1px}
.dxs .wdxtabs{margin:0}
.dxs .wdxtab{cursor:pointer;background:transparent;border-color:var(--dex-line);color:#A9D3DB}
.dxs .wdxtab.is-on[data-variant="shiny"]{background:var(--shiny);border-color:var(--shiny);color:#1A1206}
.dxs .wdxtab.is-on[data-variant="shadow"]{background:var(--shadow);border-color:var(--shadow);color:#fff}

/* The entry panel */
.dxs__head{display:flex;flex-direction:column;align-items:center;gap:2px}
.dxs__no{font-family:var(--mono);font-size:11px;color:#7FCFDC}
.dxs__name{margin:0;font-size:20px;line-height:1.15;text-wrap:balance}
.dxs__genus{font-size:11px;color:var(--dex-dim)}
.dxs__plat{--plat:var(--t-normal);position:relative;flex:none;width:min(160px,70%);aspect-ratio:1.25;
  display:grid;place-items:end center}
.dxs__plat::after{content:"";position:absolute;left:6%;right:6%;bottom:4%;height:22%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--plat) 80%,#fff),
    color-mix(in srgb,var(--plat) 30%,transparent) 70%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--plat) 50%,transparent)}
.dxs__plat--shiny{--plat:var(--shiny)}
.dxs__plat--shadow{--plat:var(--shadow)}
.dxs__mon{position:relative;z-index:1;width:78%;margin-bottom:9%;image-rendering:pixelated}
.dxs__mon.is-unknown{filter:brightness(0);opacity:.55}
.dxs__types{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.dxs__type{height:20px;width:auto}
.dxs__state{margin:0;font-size:11px;color:var(--dex-dim)}
.dxs__facts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;width:100%;margin:0;text-align:left}
.dxs__facts--one{grid-template-columns:1fr}
.dxs__facts dt{font-size:9.5px;color:var(--dex-dim);text-transform:uppercase;letter-spacing:.1em}
.dxs__facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.dxs__finder{font-size:15px;color:var(--yellow)}
.dxs__finder.is-me{color:var(--dex-accent)}
.dxs__radar{margin:0;width:100%;max-width:200px}
.dexdev .dxs__radar svg{display:block;width:100%;height:auto}
.dxs__radar text{fill:#9FD3DD;stroke:none;font-size:8.5px;font-family:var(--sans)}
.dxs__radar-grid{fill:none;stroke:rgba(92,214,230,.22);stroke-width:1}
.dxs__radar-shape{fill:rgba(92,214,230,.28);stroke:var(--dex-accent);stroke-width:1.5}
.dxs__radar figcaption{font-size:10.5px;color:var(--dex-dim)}
.dxs__radar figcaption b{color:var(--dex-txt)}
.dxs__locked,.dxs__muted{margin:0;font-size:11.5px;line-height:1.5;color:var(--dex-dim)}
.dxs__locked{padding:8px 10px;border:1px dashed var(--dex-line);border-radius:7px}
.dxs__empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--dex-dim)}
.dxs__empty img{width:30px;height:30px;image-rendering:pixelated}

/* The tabs panel */
.dxs__tabbar{display:flex;gap:4px;flex:none}
.dxs__tab{flex:1;padding:5px 0;border-radius:6px;cursor:pointer;font:inherit;font-weight:700;font-size:11.5px;
  border:1px solid var(--dex-line);background:transparent;color:#A9D3DB}
.dxs__tab.is-on{background:rgba(92,214,230,.2);border-color:var(--dex-line-hi);color:#F0FDFF}
.dxs__tab:focus-visible{outline:2px solid var(--dex-accent);outline-offset:1px}
.dxs__pane{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.dxs__pane[hidden]{display:none}
.dxs__desc{margin:0;font-size:12.5px;line-height:1.55}
.dxs__sub{margin:4px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7FCFDC}
.dxs__pane p{margin:0}
.dxs__abil{display:flex;flex-wrap:wrap;gap:5px}
.dxs__abil span{padding:2px 8px;border:1px solid var(--dex-line);border-radius:5px;cursor:help}
.dxs__abil .is-hidden{color:#FFB25E;border-color:rgba(255,178,94,.5)}
.dxs__evo{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.dxs__evo-stage{display:flex;flex-direction:column;gap:4px}
.dxs__evo-arrow{width:0;height:0;border:5px solid transparent;border-left:7px solid var(--dex-dim);margin:0 2px 0 4px}
.dxs__evo-mon{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 6px;cursor:pointer;
  border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;font:inherit}
.dxs__evo-mon:hover,.dxs__evo-mon.is-here{border-color:var(--dex-line-hi)}
.dxs__evo-mon img{width:44px;height:44px;image-rendering:pixelated}
.dxs__evo-mon img.is-unknown{filter:brightness(0);opacity:.55}
.dxs__evo-mon span{font-size:10.5px;font-weight:700}
.dxs__evo-mon small{font-size:9.5px;color:var(--dex-dim)}
.dxs__moves{display:flex;flex-direction:column;gap:3px}
.dxs__move{display:grid;grid-template-columns:40px minmax(0,1fr) 54px 30px;align-items:center;gap:6px;
  padding:4px 7px;border-radius:5px;background:rgba(10,30,44,.55)}
.dxs__move-lv{font-family:var(--mono);font-size:10px;color:var(--dex-dim)}
.dxs__move-name{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dxs__move-name i{flex:none;width:8px;height:8px;border-radius:50%}
.dxs__move-cat{font-size:10px;color:var(--dex-dim)}
.dxs__move-pw{text-align:right;font-variant-numeric:tabular-nums;color:#A9D3DB}
.dxs__areas{display:flex;flex-direction:column;gap:4px}
.dxs__area{display:flex;flex-direction:column;padding:6px 8px;border-radius:6px;background:rgba(10,30,44,.55)}
.dxs__area span{font-size:11px;color:var(--dex-dim)}
.dxs .wdxfeed{margin:0;padding:0}
.dxs .wdxfeed__row,.dxs .wdxboard__row,.dxs .wdxfeed__empty{background:rgba(10,30,44,.6);border-color:var(--dex-line)}
.dxs .wdxboard{margin:0}
.dxs .wdxboard__row.is-me{border-color:var(--dex-accent)}

/* The Worlddex screen carries a wash of the half it shows. */
.dxs--wdx{background:radial-gradient(120% 80% at 50% 0%,rgba(255,213,74,.07),transparent 60%)}
.dxs--wdx[data-variant="shadow"]{background:radial-gradient(120% 80% at 50% 0%,rgba(155,92,255,.10),transparent 60%)}

/* ============================================================
   GAME CORNER
   A banner holding the Coin Case, two pages - the machine and the
   prize counter - and the cabinet itself, lit like an arcade. The
   neon is the screen's own pair of colours, set once on .gcorner so
   everything below mixes from them rather than repeating hex.
   ============================================================ */
.gcorner{
  --gc-neon:#FF3DA6;--gc-neon2:var(--yellow);
  --gc-felt:#2A1B2E;--gc-felt-dk:#140C18;
  --gc-neon-hi:color-mix(in srgb,var(--gc-neon) 60%,#fff);
  --gc-neon-soft:color-mix(in srgb,var(--gc-neon) 16%,transparent);
  --gc-gold-soft:color-mix(in srgb,var(--gc-neon2) 14%,transparent);
  display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;
  animation:gcIn .2s ease}
.gcorner [hidden]{display:none!important}
.gcorner img{image-rendering:pixelated}
@keyframes gcIn{from{opacity:0;transform:translateY(5px)}}

/* ── The banner ──────────────────────────────────────── */
.gcorner__hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px 16px;
  padding:20px 18px 14px;border-radius:var(--r);color:#fff;
  background:
    radial-gradient(110% 140% at 0% 0%,
      color-mix(in srgb,var(--gc-neon) 55%,transparent),transparent 60%),
    radial-gradient(90% 120% at 100% 100%,
      color-mix(in srgb,var(--gc-neon2) 30%,transparent),transparent 62%),
    linear-gradient(120deg,var(--gc-felt),var(--gc-felt-dk));
  border:1px solid color-mix(in srgb,var(--gc-neon-hi) 35%,transparent);
  box-shadow:0 16px 36px -14px color-mix(in srgb,var(--gc-neon) 55%,transparent)}
/* A Poké Ball drawn in the corner, faint: a ring and the band across
   it, as on the Guild Hall's banner. */
.gcorner__hero::before,.gcorner__hero::after{content:"";position:absolute;
  z-index:-1;pointer-events:none}
.gcorner__hero::before{right:-46px;top:-46px;width:190px;height:190px;
  border-radius:50%;border:18px solid rgba(255,255,255,.07)}
.gcorner__hero::after{right:-46px;top:40px;width:190px;height:18px;
  background:rgba(255,255,255,.07)}
/* A row of marquee bulbs along the top edge, chasing. One element and
   a moving background rather than forty nodes. */
.gcorner__bulbs{position:absolute;left:10px;right:10px;top:6px;height:8px;
  background:radial-gradient(circle,var(--gc-neon2) 0 2px,
    color-mix(in srgb,var(--gc-neon2) 30%,transparent) 2.5px,transparent 3.5px)
    0 50%/16px 8px repeat-x;
  opacity:.85;animation:bulbs 1.4s linear infinite}
@keyframes bulbs{to{background-position:16px 50%}}

.gcorner__bank{display:flex;align-items:center;gap:13px;min-width:0}
.gcorner__emblem{flex-shrink:0;width:60px;height:60px;border-radius:18px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);
  box-shadow:0 0 0 4px var(--gc-gold-soft),
             0 0 24px color-mix(in srgb,var(--gc-neon2) 45%,transparent);
  animation:gcFloat 4.5s ease-in-out infinite}
.gcorner__emblem img{width:42px;height:42px;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
@keyframes gcFloat{50%{transform:translateY(-4px)}}
.gcorner__purse{display:flex;flex-direction:column;line-height:1.1}
.gcorner__purse span{font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.gcorner__purse b{font-size:28px;font-weight:900;color:var(--gc-neon2);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px color-mix(in srgb,var(--gc-neon2) 55%,transparent),
              0 2px 4px rgba(0,0,0,.5);
  transition:transform .15s ease}
.gcorner__purse b.is-up{transform:scale(1.06)}

.casino__buys{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  justify-content:flex-end}
.casino__buy{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:78px;padding:7px 12px;border-radius:12px;cursor:pointer;
  color:#fff;font:inherit;
  background:rgba(8,10,14,.38);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  transition:border-color .15s ease,background .15s ease,transform .12s ease}
.casino__buy b{font-size:15px;font-weight:900;color:var(--gc-neon2)}
.casino__buy small{font-size:10px;color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums}
.casino__buy:hover:not(:disabled){border-color:var(--gc-neon2);
  background:rgba(8,10,14,.55)}
.casino__buy:active:not(:disabled){transform:translateY(1px)}
.casino__buy:disabled{opacity:.45;cursor:not-allowed}
.casino__left{flex-basis:100%;text-align:right;font-size:11px;
  color:rgba(255,255,255,.72);white-space:nowrap}

.gcorner__msg{flex-basis:100%;margin:0;max-height:0;overflow:hidden;
  font-size:12px;font-weight:600;color:#fff;opacity:0;
  transition:max-height .2s ease,opacity .2s ease}
.gcorner__msg.is-show{max-height:3em;opacity:1}
.gcorner__msg.is-good{color:#8ff0bd}
.gcorner__msg.is-bad{color:#ffb0b0}

/* ── Pages ───────────────────────────────────────────── */
.gcorner__tabs{display:flex;gap:4px;padding:5px;border-radius:14px;
  background:var(--ink-3);border:1px solid var(--line)}
.gcorner__tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border:0;border-radius:10px;background:none;
  color:var(--txt-dim);font:inherit;font-size:.88rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:color .15s ease,background .15s ease}
.gcorner__tab img{width:22px;height:22px;object-fit:contain;opacity:.7}
.gcorner__tab:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.gcorner__tab.is-on{color:#fff;
  background:linear-gradient(135deg,var(--gc-neon),
    color-mix(in srgb,var(--gc-neon) 55%,var(--gc-felt)));
  box-shadow:0 4px 14px -4px color-mix(in srgb,var(--gc-neon) 70%,transparent)}
.gcorner__tab.is-on img{opacity:1}
.gcorner__page{display:flex;flex-direction:column;gap:12px;animation:gcIn .2s ease}

/* ── The cabinet ─────────────────────────────────────── */
.cabinet{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:0 16px 16px;border-radius:22px;
  background:
    radial-gradient(ellipse at 50% 0%,var(--gc-neon-soft),transparent 60%),
    linear-gradient(180deg,var(--gc-felt),var(--gc-felt-dk));
  border:1px solid color-mix(in srgb,var(--gc-neon) 30%,var(--line));
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.04),
             inset 0 2px 0 rgba(255,255,255,.08),var(--shadow-lg)}
.cabinet__marquee{display:flex;flex-direction:column;align-items:center;
  gap:6px;margin:0 -16px;padding:10px 16px 8px;border-radius:22px 22px 0 0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent);
  border-bottom:1px solid rgba(255,255,255,.06)}
.cabinet__name{margin:0;font-size:22px;font-weight:900;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gc-neon-hi);
  text-shadow:0 0 6px var(--gc-neon),0 0 18px var(--gc-neon)}
.cabinet__lights{display:flex;gap:10px}
.cabinet__lights i{width:8px;height:8px;border-radius:50%;
  background:var(--gc-neon2);
  box-shadow:0 0 8px color-mix(in srgb,var(--gc-neon2) 80%,transparent);
  animation:chase 1.2s steps(1) infinite}
.cabinet__lights i:nth-child(even){animation-delay:-.6s}
@keyframes chase{50%{opacity:.25;box-shadow:none}}
.cabinet.is-spinning .cabinet__lights i{animation-duration:.5s}
.cabinet.is-spinning .cabinet__lights i:nth-child(even){animation-delay:-.25s}
.cabinet.is-win .cabinet__lights i{animation-duration:.24s;
  animation-delay:0s;background:#fff}
.cabinet.is-win .cabinet__name{animation:hitPulse .45s ease-in-out 3}

/* Reels */
.slots{display:flex;justify-content:center;transition:filter .2s}
.slots__frame{
  position:relative;display:flex;gap:8px;padding:10px;
  background:#0C080F;border-radius:14px;
  border:3px solid color-mix(in srgb,var(--gc-neon2) 55%,transparent);
  box-shadow:0 0 0 2px rgba(0,0,0,.6),inset 0 6px 14px rgba(0,0,0,.7),
             0 10px 30px rgba(0,0,0,.6)}
/* A glass sheen over the window. */
.slots__frame::after{content:"";position:absolute;inset:0;border-radius:11px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,
    transparent 70%,rgba(0,0,0,.35))}
.slotreel{position:relative;overflow:hidden;padding:6px;border-radius:9px;
  background:linear-gradient(180deg,#1b1320,#2a1f30 50%,#1b1320)}
.slotreel__strip{display:flex;flex-direction:column;gap:6px;will-change:transform}
.slotreel.is-spinning .slotreel__strip{filter:blur(1.2px) brightness(1.1)}
.slotreel__strip.is-snap{animation:reelSnap .24s ease-out}
@keyframes reelSnap{0%{transform:translateY(6px)}60%{transform:translateY(-2px)}}
.slotcell{
  width:clamp(52px,11vw,74px);height:clamp(52px,11vw,74px);
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.07),rgba(0,0,0,.35));
  border-radius:8px;transition:background .2s,box-shadow .2s}
.slotcell img{width:92%;height:92%;object-fit:contain}
.slotcell.is-hit{
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb,var(--gc-neon2) 38%,transparent),rgba(0,0,0,.3));
  box-shadow:inset 0 0 0 2px var(--gc-neon2),
             0 0 16px color-mix(in srgb,var(--gc-neon2) 60%,transparent)}
.slotcell.is-hit img{animation:hitPulse .5s ease-in-out 3}
@keyframes hitPulse{50%{transform:scale(1.12);filter:brightness(1.3)}}
/* The lines this bet is playing. One was drawn whatever the bet, so
   raising it promised three lines or five and showed the middle row
   either way - the machine was scoring lines nobody could see.

   Five positions, in the order linesFor() scores them: the middle
   row, then the top and bottom, then the two diagonals. */
.slots__payline{
  position:absolute;left:4px;right:4px;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--gc-neon) 80%,transparent),transparent);
  transform-origin:center;pointer-events:none;transition:opacity .2s}
.slots__payline.is-mid{top:50%;transform:translateY(-1px)}
.slots__payline.is-top{top:16.6%;transform:translateY(-1px)}
.slots__payline.is-bot{top:83.3%;transform:translateY(-1px)}
/* The diagonals run corner to corner, so they are the same bar turned
   and stretched to reach: three rows over three reels. */
.slots__payline.is-down{top:50%;transform:translateY(-1px) rotate(19deg) scaleX(1.06)}
.slots__payline.is-up{top:50%;transform:translateY(-1px) rotate(-19deg) scaleX(1.06)}
/* A diagonal crosses the whole grid rather than sitting on one row,
   so it is dimmer - five bright bars over the reels would be more
   noise than information. */
.slots__payline.is-down,
.slots__payline.is-up{opacity:.55}
.slots__payline.is-hit{height:3px;opacity:1;
  background:linear-gradient(90deg,transparent,var(--gc-neon2) 12%,
    var(--gc-neon2) 88%,transparent);
  box-shadow:0 0 10px var(--gc-neon2);animation:lineBlink .3s steps(1) 5}
@keyframes lineBlink{50%{opacity:.2}}

.slots__result{margin:0;text-align:center;font-size:13px;font-weight:700;
  min-height:20px;color:var(--txt-dim)}
.slots__result.is-good{color:var(--gc-neon2);
  text-shadow:0 0 10px color-mix(in srgb,var(--gc-neon2) 50%,transparent)}
.slots__result.is-bad{color:var(--red-lt)}

/* The deck: three bet buttons and the big one. */
.cabinet__deck{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:12px 18px}
.casino__bets{display:flex;gap:10px}
.betbtn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:0;border:0;background:none;color:var(--txt);font:inherit;
  cursor:pointer}
.betbtn b{width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;font-weight:900;
  color:var(--txt-dim);
  background:radial-gradient(circle at 50% 30%,#3a3045,#1c1622 70%);
  border:2px solid var(--line);
  box-shadow:0 4px 0 #0a070c,inset 0 2px 0 rgba(255,255,255,.1);
  transition:transform .1s ease,box-shadow .1s ease,background .15s,color .15s}
.betbtn span{font-size:10px;font-weight:700;color:var(--txt-dim)}
.betbtn i{font-size:9px;color:var(--txt-dim);font-style:normal;opacity:.8}
.betbtn:hover b{border-color:color-mix(in srgb,var(--gc-neon2) 50%,var(--line))}
.betbtn:active b{transform:translateY(3px);box-shadow:0 1px 0 #0a070c}
.betbtn.is-on b{color:#2a1a00;border-color:var(--gc-neon2);
  background:radial-gradient(circle at 50% 30%,#fff3b0,var(--gc-neon2) 60%,
    color-mix(in srgb,var(--gc-neon2) 70%,#000));
  box-shadow:0 4px 0 color-mix(in srgb,var(--gc-neon2) 40%,#000),
             0 0 16px color-mix(in srgb,var(--gc-neon2) 55%,transparent)}
.betbtn.is-on span{color:var(--gc-neon2)}

.slots__go{
  display:flex;flex-direction:column;align-items:center;line-height:1.1;
  min-width:170px;padding:11px 28px;border-radius:99px;cursor:pointer;
  color:#fff;font:inherit;font-size:18px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;border:0;
  background:linear-gradient(180deg,#ff5a5a,var(--red) 55%,var(--red-dk));
  box-shadow:0 5px 0 #6d0a0a,0 10px 24px -6px rgba(238,21,21,.6),
             inset 0 2px 0 rgba(255,255,255,.3);
  transition:transform .1s ease,box-shadow .1s ease,filter .15s}
.slots__go small{font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:none;opacity:.85}
.slots__go:hover:not(:disabled){filter:brightness(1.08)}
.slots__go:active:not(:disabled){transform:translateY(4px);
  box-shadow:0 1px 0 #6d0a0a,0 4px 12px -6px rgba(238,21,21,.6)}
.slots__go:disabled{opacity:.6;cursor:default}

/* Paytable, folded away under the machine. */
.paytable{padding:0;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line)}
.paytable summary{display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;cursor:pointer;list-style:none}
.paytable summary::-webkit-details-marker{display:none}
.paytable summary::after{content:"";width:8px;height:8px;
  border-right:2px solid var(--txt-dim);border-bottom:2px solid var(--txt-dim);
  transform:rotate(45deg);transition:transform .2s ease}
.paytable[open] summary::after{transform:rotate(-135deg)}
.paytable h4{margin:0;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-dim)}
.paytable h4 span{text-transform:none;letter-spacing:0;opacity:.7}
.paytable__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:6px;padding:0 14px 12px}
.payrow{display:flex;align-items:center;gap:4px;padding:5px 8px;font-size:12px;
  border-radius:8px;background:rgba(255,255,255,.03)}
.payrow img{width:24px;height:24px;object-fit:contain}
.payrow b{margin-left:auto;font-weight:800;color:var(--gc-neon2);
  font-variant-numeric:tabular-nums}
.payrow[data-sym="seven"],.payrow[data-sym="bar"]{background:var(--gc-gold-soft)}
.payrow--note{grid-column:1/-1;color:var(--txt-dim);font-size:11px;gap:8px;
  background:none}

/* ── The prize counter ─────────────────────────────────
   Coins buy what money cannot, so the shelves read as a shop: art on
   a little stage, the price as a coin chip, and what is still out of
   reach showing how far off it is. */
.prizes__note{margin:0 0 12px;font-size:.76rem;color:var(--txt-dim)}
.prizes__shelf{margin-bottom:14px}
.prizes__shelf h5{margin:0 0 8px;font-size:.72rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gc-neon-hi)}
.prizes__grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px}

.prize{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 9px 11px;text-align:center;color:var(--txt);font:inherit;
  border-radius:var(--r-sm);background:var(--glass);
  border:1px solid var(--glass-brd);cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
  animation:gcIn .2s ease both}
.prize:hover:not(:disabled){transform:translateY(-2px);
  border-color:var(--gc-neon2);background:var(--gc-gold-soft)}
.prize:hover:not(:disabled) .prize__ico{animation:prizeHop .4s ease}
@keyframes prizeHop{40%{transform:translateY(-5px)}}
.prize__stage{position:relative;display:grid;place-items:center;
  width:64px;height:54px}
.prize__stage::after{content:"";position:absolute;bottom:2px;left:10px;right:10px;
  height:9px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%)}
.prize__ico{width:52px;height:52px;object-fit:contain}
.prize__name{font-size:.78rem;font-weight:700;line-height:1.2}
.prize__cost{display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px 2px 5px;border-radius:99px;
  font-size:.78rem;font-weight:800;color:var(--gc-neon2);
  font-variant-numeric:tabular-nums;
  background:var(--ink);border:1px solid var(--line)}
/* A coin, drawn: there is no sprite of a single Game Corner coin. */
.prize__cost::before{content:"";width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff6c2,var(--gc-neon2) 55%,#a87a00);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.prize__txt{font-size:.66rem;color:var(--txt-dim);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.prize__need{font-size:.64rem;font-weight:700;color:var(--red-lt)}
/* Priced out rather than unavailable: the shelf still shows what it
   would cost, which is the reason to keep playing. */
.prize.is-short{cursor:not-allowed}
.prize.is-short .prize__stage,.prize.is-short .prize__name,
.prize.is-short .prize__txt{opacity:.5}
.prize.is-short .prize__ico{filter:grayscale(.6)}
.prize.is-busy{pointer-events:none;animation:busyPulse 1s ease-in-out infinite}
@keyframes busyPulse{50%{opacity:.55}}

/* Today's counter, set apart from the fixed shelves. */
.rotshelf{padding:12px 12px 4px;border-radius:var(--r);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--gc-neon) 14%,var(--ink-2)),var(--ink-2) 72%);
  border:1px solid color-mix(in srgb,var(--gc-neon) 40%,var(--line))}
.rotshelf__head{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:4px}
.rotshelf__head h5{margin:0}
.rotshelf__clock{flex-shrink:0;padding:2px 9px;border-radius:99px;
  font-size:.68rem;font-style:normal;font-weight:700;color:var(--gc-neon2);
  background:rgba(0,0,0,.3);border:1px solid var(--gc-gold-soft)}
.rotshelf .prizes__note{margin-bottom:10px}
.prize--rot{border-color:color-mix(in srgb,var(--gc-neon) 30%,var(--glass-brd))}
.prize--rot:hover:not(:disabled){border-color:var(--gc-neon-hi);
  background:var(--gc-neon-soft)}

/* ── Jackpot pop-up (Reward.jackpot) ─────────────────── */
.reward.jackpot{position:relative;overflow:hidden;isolation:isolate;
  --gc-neon:#FF3DA6;--gc-neon2:var(--yellow);
  background:
    radial-gradient(ellipse at 50% 0%,
      color-mix(in srgb,var(--gc-neon) 30%,transparent),transparent 65%),
    linear-gradient(180deg,#2A1B2E,#140C18);
  border-color:color-mix(in srgb,var(--gc-neon2) 55%,transparent)}
.jackpot__kicker{margin:0 0 10px;font-size:26px;font-weight:900;
  letter-spacing:.3em;text-transform:uppercase;color:#fff3b0;
  text-shadow:0 0 8px var(--gc-neon2),0 0 22px var(--gc-neon);
  animation:jackpotPop .5s cubic-bezier(.34,1.56,.64,1) both}
.jackpot__row{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
.jackpot__sym{width:64px;height:64px;display:grid;place-items:center;
  border-radius:12px;background:rgba(0,0,0,.4);
  box-shadow:inset 0 0 0 2px var(--gc-neon2),
             0 0 18px color-mix(in srgb,var(--gc-neon2) 50%,transparent);
  animation:jackpotDrop .4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--i) * 180ms + 150ms)}
.jackpot__sym img{width:50px;height:50px;object-fit:contain;image-rendering:pixelated}
@keyframes jackpotDrop{from{opacity:0;transform:translateY(-40px) scale(.6)}}
@keyframes jackpotPop{from{opacity:0;transform:scale(.6)}}
.jackpot__amount{display:block;margin:2px 0 8px;font-size:30px;font-weight:900;
  color:var(--gc-neon2);font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px color-mix(in srgb,var(--gc-neon2) 60%,transparent)}
.jackpot__after{opacity:0;pointer-events:none;transition:opacity .25s ease}
.jackpot.is-ready .jackpot__after{opacity:1;pointer-events:auto}
.jackpot__rain{position:absolute;inset:0;z-index:-1;pointer-events:none}
.jackpot__rain i{position:absolute;top:-20px;left:var(--x);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff6c2,var(--gc-neon2) 55%,#a87a00);
  transform:scale(var(--s,1));
  animation:coinRain 1.7s ease-in var(--d) 2 both}
@keyframes coinRain{
  from{transform:translateY(0) scale(var(--s,1)) rotateY(0)}
  to{transform:translateY(420px) scale(var(--s,1)) rotateY(720deg);opacity:.2}}

@media (max-width:640px){
  .gcorner__hero{padding:18px 14px 12px}
  .gcorner__emblem{width:50px;height:50px;border-radius:15px}
  .gcorner__emblem img{width:34px;height:34px}
  .gcorner__purse b{font-size:24px}
  .casino__buys{flex-basis:100%;justify-content:stretch}
  .casino__buy{flex:1}
  .casino__left{text-align:center}
  .gcorner__tab{padding:8px 8px;font-size:.82rem}
  .cabinet{padding:0 10px 14px}
  .cabinet__marquee{margin:0 -10px}
  .cabinet__name{font-size:18px}
  .cabinet__lights{gap:7px}
  .slots__frame{gap:6px;padding:8px}
  .slotreel{padding:4px}
  .cabinet__deck{flex-direction:column}
  .casino__bets{width:100%;justify-content:space-around}
  .slots__go{width:100%}
  .prizes__grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .gcorner,.gcorner *,.jackpot,.jackpot *{animation:none!important;
    transition:none!important}
  .jackpot__rain{display:none}
}

/* ── Safari: the Grand Safari and the EV Safari ─────────
   One look for both reserves: a photo banner of the place, the Warden
   at the gate with the ticket, and inside a ring that empties as the
   visit runs out beside the Ball. --rc is the reserve's colour - gold
   for the Grand Safari, the stat's own colour on an EV ground. */
.reserve{--rc:#E8C96A;display:flex;flex-direction:column;gap:12px}
.reshero{position:relative;display:flex;align-items:flex-end;gap:14px;min-height:150px;padding:16px;
  border-radius:var(--r);overflow:hidden;background-size:cover;background-position:center;
  border:1px solid color-mix(in srgb,var(--rc) 40%,transparent)}
.reshero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,16,.15),rgba(10,12,16,.9) 75%),
    linear-gradient(90deg,color-mix(in srgb,var(--rc) 25%,transparent),transparent 60%)}
.reshero > *{position:relative}
.reshero__txt{flex:1;min-width:0}
.reshero__eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rc)}
.reshero h3{margin:2px 0 4px;font:800 24px/1.1 var(--display);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.reshero p{margin:0;max-width:60ch;font-size:12.5px;line-height:1.5;color:#d9e1ea}
.reshero__stat{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.reshero__stat b{font:800 28px/1 var(--display);color:var(--rc)}
.reshero__stat span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#d9e1ea}
.reshero__item{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}

/* The gate. */
.resgate{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line)}
.resgate__art{width:76px;height:76px;flex:0 0 auto;object-fit:cover;object-position:top;border-radius:12px;
  border:2px solid color-mix(in srgb,var(--rc) 50%,transparent)}
.resgate__talk{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.resgate__who{font:800 14px var(--display);color:var(--rc)}
.resgate__say{margin:0;font-size:13px;line-height:1.55}
.resgate__ticket{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;
  background:repeating-linear-gradient(90deg,var(--ink-3) 0 12px,var(--ink-2) 12px 14px);border:1px dashed var(--rc)}
.resgate__ticket img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.resgate__ticket b{display:block;font-size:13.5px}
.resgate__ticket small{font-size:11px;color:var(--txt-dim)}
.resgate__ticket span{margin-left:auto;font:800 17px var(--display);color:var(--rc)}
.resgate__act{display:flex;gap:8px;flex-wrap:wrap}
.resgate__money{margin:0;font-size:11.5px;color:var(--txt-dim)}

/* Inside: the ring, the Ball, the searches. */
.ressession{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:16px;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--line)}
.resring{--p:100;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--rc) calc(var(--p) * 1%),rgba(255,255,255,.07) 0);
  box-shadow:0 0 22px color-mix(in srgb,var(--rc) 25%,transparent)}
.resring__in{width:96px;height:96px;border-radius:50%;background:var(--ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.resring__in b{font:900 24px/1 var(--display);font-variant-numeric:tabular-nums}
.resring__in span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim)}
.ressession__ball{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pokeball--res{--sz:118px}
.resprog{width:min(260px,100%);height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.resprog i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 55%,#000),var(--rc));
  transition:width .2s}
.resprog__hint{margin:0;font-size:11.5px;color:var(--txt-dim)}
.ressession__tally{display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:baseline}
.ressession__tally b{font:800 20px/1.1 var(--display);color:var(--rc);text-align:right;font-variant-numeric:tabular-nums}
.ressession__tally span{font-size:11px;color:var(--txt-dim)}

.reserve__msg{margin:0;text-align:center;font-size:12px;color:var(--red-lt);min-height:16px}
.reserve__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.reserve__head h4{margin:0;font:800 14px var(--display)}
.reserve__head span{font-size:11px;color:var(--txt-dim)}

/* The Grand Safari's rotation. */
.resgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.rescard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;
  border-radius:12px;background:var(--ink-2);border:1px solid var(--line);text-align:center;transition:transform .12s}
.rescard:hover{transform:translateY(-2px)}
.rescard img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.rescard b{font-size:11.5px;line-height:1.2}
.rescard__tag{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 7px;border-radius:99px}
.rescard.is-needed{border-color:rgba(255,203,58,.4);background:linear-gradient(180deg,rgba(255,203,58,.08),var(--ink-2))}
.rescard__tag.is-needed{background:rgba(255,203,58,.16);color:var(--yellow)}
.rescard__tag.is-caught{background:rgba(63,217,138,.14);color:var(--ok)}
.rescard.is-caught img{opacity:.6}

/* The EV Safari's six grounds. */
.evzones{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.evzone{--zc:#9DB7F5;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background-size:cover;
  background-position:center;border:1px solid color-mix(in srgb,var(--zc) 45%,transparent);
  box-shadow:inset 0 3px 0 var(--zc)}
.evzone__head{display:flex;align-items:center;gap:9px}
.evzone__head img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.evzone__head b{display:block;font:800 15px var(--display);color:var(--zc);text-shadow:0 1px 3px #000}
.evzone__head small{font-size:11px;color:#d9e1ea}
.evzone__mons{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.evzone__mons span{position:relative;display:grid;place-items:center}
.evzone__mons img{width:100%;max-width:48px;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.evzone__mons i{position:absolute;right:0;bottom:0;font:800 9.5px var(--display);font-style:normal;
  padding:0 3px;border-radius:4px;background:var(--zc);color:#14171c}
.evzone__facts{margin:0;font-size:11px;color:#d9e1ea}
.evzone .btn{align-self:stretch}

/* The lead's effort values. */
.evtrack{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line)}
.evtrack__head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.evtrack__head > img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.evtrack__head b{display:block;font:800 15px var(--display)}
.evtrack__head small{display:block;font-size:11px;color:var(--txt-dim)}
.evtrack__item{display:flex!important;align-items:center;gap:4px}
.evtrack__item img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.evtrack__total{margin-left:auto;text-align:right}
.evtrack__total b{font:800 22px/1 var(--display);font-variant-numeric:tabular-nums}
.evtrack__total span{font-size:11px;color:var(--txt-dim);margin-left:3px}
.evbar{display:grid;grid-template-columns:62px 1fr 34px;gap:8px;align-items:center;font-size:12px;opacity:.75}
.evbar.is-on{opacity:1}
.evbar__k{color:var(--txt-dim)}
.evbar.is-on .evbar__k{color:var(--rc);font-weight:800}
.evbar__track{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.evbar__track i{display:block;height:100%;border-radius:4px;background:rgba(255,255,255,.35);transition:width .5s}
.evbar.is-on .evbar__track i{background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 55%,#000),var(--rc))}
.evbar__v{text-align:right;font-variant-numeric:tabular-nums}
.evtrack__warn{margin:4px 0 0;padding:7px 10px;border-radius:9px;font-size:12px;
  background:rgba(255,203,58,.1);border:1px solid rgba(255,203,58,.4);color:var(--yellow)}
.evtrack__none{margin:0;font-size:12px;color:var(--txt-dim)}

@media (max-width:640px){
  .reshero{min-height:120px}
  .reshero h3{font-size:20px}
  .reshero__stat b{font-size:22px}
  .ressession{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ressession__tally{justify-content:center}
  .resgate__art{width:56px;height:56px}
}

/* ── Sanctum & roamers ──────────────────────────────── */
.sanctum{display:flex;flex-direction:column;gap:12px}
.sanctum__travel{text-align:center}
.bosscard,.roamcard{
  display:flex;align-items:center;gap:14px;padding:14px;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(155,92,255,.12),transparent 60%),
    var(--ink-3);
  border:1px solid rgba(155,92,255,.34);border-radius:var(--r-sm);
}
.roamcard{
  background:
    radial-gradient(ellipse at 20% 50%,rgba(255,203,58,.10),transparent 60%),
    var(--ink-3);
  border-color:rgba(255,203,58,.30);
}
.bosscard.is-spent,.roamcard.is-spent{opacity:.6;border-color:var(--line)}
.bosscard__art,.roamcard__art{
  width:84px;height:84px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));
}
.bosscard__id,.roamcard__id{flex:1;min-width:0}
.bosscard__label{
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700;
}
.bosscard__id h3,.roamcard__id h3{font-size:19px;font-weight:900;margin:2px 0 5px}
.bosscard__types{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.bosscard__lvl{font-size:11px;font-weight:800;color:var(--txt-dim)}
.roamcard__where{font-size:12px;color:var(--txt-dim);margin-bottom:5px}
.roamcard__where b{color:var(--txt)}
.bosscard__act{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;
}
.bosscard__time{font-size:10px;color:var(--txt-dim);white-space:nowrap}
.bosscard__spent{font-size:12px;font-weight:700;color:var(--txt-dim)}

.bosslog{display:flex;flex-direction:column;gap:4px}
.bosslog__row{
  display:flex;align-items:center;gap:9px;padding:6px 10px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:8px;
  font-size:12px;
}
.bosslog__row img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.bosslog__out{margin-left:auto;font-weight:700;font-size:11px}
.bosslog__out.is-caught{color:var(--yellow)}
.bosslog__out.is-won{color:#7FD48A}
.bosslog__out.is-lost{color:var(--red-lt)}
.bosslog__at{font-size:10px;color:var(--txt-dim);white-space:nowrap}

@media (max-width:640px){
  .bosscard,.roamcard{flex-wrap:wrap}
  .bosscard__act{align-items:stretch;width:100%}
  .warden{flex-direction:column;align-items:center;text-align:center}
}

/* ── Region map ─────────────────────────────────────── */
.mapscreen{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;
  align-items:start;
}
.mapwrap{
  position:relative;border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:#0B1A2E;
}
.mapwrap__img{display:block;width:100%;height:auto}
.mapwrap__marks{position:absolute;inset:0;pointer-events:none}

/* The marker IS the clickable point: sized to cover the artwork's own
   printed number discs, which do not match our route table. */
.mapmark{
  position:absolute;transform:translate(-50%,-50%);
  width:26px;height:26px;padding:0;background:none;border:none;
  pointer-events:auto;cursor:pointer;z-index:1;
}
.mapmark__pin{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  font-size:11px;font-weight:900;line-height:1;
  color:#12161C;background:#EDE3C8;
  border:2px solid rgba(12,16,22,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
  transition:transform .14s,background .14s;
}
.mapmark:hover{z-index:5}
.mapmark:hover .mapmark__pin{transform:scale(1.25)}

.mapmark.is-town .mapmark__pin,
.mapmark.is-city .mapmark__pin{background:var(--red);color:#fff;font-size:9px}
.mapmark.is-landmark .mapmark__pin{background:#8FA6C0;color:#12161C;font-size:9px}
.mapmark.is-special .mapmark__pin{background:var(--shadow);color:#fff;font-size:12px}
/* An event zone is only on the map while the event is running, so
   it is allowed to be the loudest thing on it. */
.mapmark.is-event .mapmark__pin{
  background:var(--shiny);color:#1A1206;font-size:12px;
  box-shadow:0 0 0 2px rgba(255,213,74,.35),0 2px 8px rgba(0,0,0,.55);
  animation:mapEventPulse 2.4s ease-in-out infinite;
}
@keyframes mapEventPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,213,74,.35),
                     0 2px 8px rgba(0,0,0,.55)}
  50%    {box-shadow:0 0 0 6px rgba(255,213,74,.14),
                     0 2px 8px rgba(0,0,0,.55)}
}
@media (prefers-reduced-motion:reduce){
  .mapmark.is-event .mapmark__pin{animation:none}
}

.mapmark.is-locked{opacity:.42}
.mapmark.is-locked .mapmark__pin{background:#5A6472;color:#20262E}

.mapmark.is-here{z-index:4}
.mapmark.is-here .mapmark__pin{
  background:#7FD48A;color:#0E1A10;
  box-shadow:0 0 0 3px rgba(127,212,138,.45),0 2px 8px rgba(0,0,0,.6);
  animation:mapPulse 1.8s ease-in-out infinite;
}
.mapmark.is-roamer .mapmark__pin{
  box-shadow:0 0 0 3px rgba(255,203,58,.55),0 0 14px rgba(255,203,58,.85);
}
@keyframes mapPulse{50%{transform:scale(1.18)}}

/* Name on hover, so the map stays readable at rest. */
.mapmark__tip{
  position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);
  padding:3px 8px;border-radius:6px;white-space:nowrap;
  font-size:10px;font-weight:700;color:var(--txt);
  background:rgba(10,14,20,.94);border:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .14s;
}
.mapmark:hover .mapmark__tip{opacity:1}

.maplist{
  display:flex;flex-direction:column;gap:8px;
  max-height:min(70vh,640px);
}
.maplist__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.maplist__head h4{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim);
}
.maplist__head span{font-size:12px;font-weight:800;color:var(--yellow)}
.maplist__roam{
  display:flex;align-items:center;gap:7px;padding:7px 9px;font-size:11px;
  background:var(--ink-3);border:1px solid rgba(255,203,58,.3);border-radius:8px;
  color:var(--txt-dim);
}
.maplist__roam img{width:26px;height:26px;image-rendering:pixelated}
.maplist__roam b{color:var(--txt)}
.maplist__rows{
  display:flex;flex-direction:column;gap:3px;
  overflow-y:auto;padding-right:4px;
}

.maprow{
  display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;
  padding:7px 9px;text-align:left;
  background:var(--ink-3);border:1px solid var(--line);border-radius:8px;
  transition:.14s;
}
.maprow:hover:not(:disabled){border-color:var(--txt-dim);transform:translateX(2px)}
.maprow:disabled{opacity:.4;cursor:default}
.maprow__kind{
  font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-dim);
}
.maprow.is-city .maprow__kind{color:var(--red-lt)}
.maprow.is-special .maprow__kind{color:var(--shadow)}
.maprow.is-event .maprow__kind{color:var(--shiny)}
.maprow.is-event{
  border-color:rgba(255,213,74,.30);
  background:linear-gradient(90deg,rgba(255,213,74,.09),transparent 62%);
}
.maprow__name{font-size:12px;font-weight:700;line-height:1.2}
.maprow__terrain{
  grid-column:2;font-size:10px;color:var(--txt-dim);line-height:1.2;
}
.maprow__you{
  font-size:9px;font-weight:800;color:#7FD48A;
  padding:2px 6px;border:1px solid rgba(127,212,138,.4);border-radius:99px;
}
.maprow__lock{font-size:9px;color:var(--txt-dim)}
.maprow__roamer img{width:22px;height:22px;image-rendering:pixelated}
.maprow.is-here{border-color:rgba(127,212,138,.45)}

@media (max-width:900px){
  .mapscreen{grid-template-columns:1fr}
  .maplist{max-height:340px}
}

/* ============================================================
   MOVE ANIMATIONS
   One theme per type, so every move is covered by 18 looks rather
   than 919 pieces of art. Particles travel from the attacker to the
   target using CSS custom properties set per particle.
   ============================================================ */
.fxlayer{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6;
}

/* A brief tint of the move's colour across the arena. */
.battle__field.is-fx::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 55%,
             var(--fx-tint,transparent) 0%,transparent 62%);
  opacity:.16;animation:fxTint .42s ease-out;
}
@keyframes fxTint{0%{opacity:0}30%{opacity:.22}100%{opacity:0}}

/* The travelling particle. Every theme reshapes this base. */
.fxp{
  position:absolute;left:0;top:0;width:12px;height:12px;
  border-radius:50%;background:var(--c,#fff);
  transform:translate(var(--x0),var(--y0));
  animation:fxFly .52s cubic-bezier(.4,.05,.35,1) forwards;
  will-change:transform,opacity;
}
@keyframes fxFly{
  0%  {transform:translate(var(--x0),var(--y0)) scale(.4);opacity:0}
  15% {opacity:1}
  100%{transform:translate(var(--x1),var(--y1)) scale(1.15);opacity:0}
}

/* ── The eighteen looks ─────────────────────────────── */

/* Fire: flickering embers with a warm halo. */
.fx-fire{
  width:14px;height:16px;border-radius:50% 50% 45% 45%;
  box-shadow:0 0 12px var(--c),0 0 22px var(--c);
  animation-name:fxFly,fxFlicker;animation-duration:.52s,.22s;
  animation-iteration-count:1,infinite;
}
@keyframes fxFlicker{50%{filter:brightness(1.5) saturate(1.3)}}

/* Water: elongated droplets. */
.fx-water{
  width:10px;height:18px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:0 0 10px var(--c);opacity:.9;
}

/* Electric: hard-edged sparks that jitter along the path. */
.fx-electric{
  width:5px;height:20px;border-radius:1px;
  box-shadow:0 0 12px var(--c),0 0 20px var(--c);
  animation-name:fxFly,fxZap;animation-duration:.4s,.09s;
  animation-iteration-count:1,infinite;
}
@keyframes fxZap{
  0%,100%{transform-origin:center;filter:brightness(1)}
  50%{filter:brightness(2)}
}

/* Grass: spinning leaves. */
.fx-grass{
  width:14px;height:9px;border-radius:100% 0 100% 0;
  animation-name:fxFly,fxSpin;animation-duration:.55s,.5s;
}
@keyframes fxSpin{to{rotate:540deg}}

/* Ice: angular shards. */
.fx-ice{
  width:11px;height:11px;border-radius:2px;rotate:45deg;
  box-shadow:0 0 10px var(--c);opacity:.92;
}

/* Fighting: heavy impact rings. */
.fx-fighting{
  width:26px;height:26px;border-radius:50%;
  background:transparent;border:3px solid var(--c);
  animation-name:fxPunch;animation-duration:.36s;
}
@keyframes fxPunch{
  0%  {transform:translate(var(--x1),var(--y1)) scale(.2);opacity:1}
  100%{transform:translate(var(--x1),var(--y1)) scale(1.8);opacity:0}
}

/* Poison: rising bubbles. */
.fx-poison{
  width:13px;height:13px;opacity:.85;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.18),0 0 9px var(--c);
  animation-name:fxFly,fxBob;animation-duration:.6s,.34s;
  animation-iteration-count:1,infinite;
}
@keyframes fxBob{50%{margin-top:-5px}}

/* Ground: chunks of earth thrown upward. */
.fx-ground{
  width:13px;height:10px;border-radius:3px 5px 4px 6px;
  animation-name:fxArc;animation-duration:.5s;
}
@keyframes fxArc{
  0%  {transform:translate(var(--x0),var(--y0)) rotate(0);opacity:1}
  50% {transform:translate(calc((var(--x0) + var(--x1)) / 2),
                          calc(var(--y0) - 34px)) rotate(180deg)}
  100%{transform:translate(var(--x1),var(--y1)) rotate(360deg);opacity:0}
}

/* Flying: thin gust streaks. */
.fx-flying{
  width:22px;height:3px;border-radius:2px;opacity:.8;
  box-shadow:0 0 8px var(--c);
}

/* Psychic: warping rings. */
.fx-psychic{
  width:18px;height:18px;background:transparent;
  border:2px solid var(--c);border-radius:50%;
  box-shadow:0 0 14px var(--c);
  animation-name:fxFly,fxWarp;animation-duration:.55s,.4s;
}
@keyframes fxWarp{50%{border-radius:40% 60% 55% 45%}}

/* Bug: small darting specks. */
.fx-bug{
  width:8px;height:8px;
  animation-name:fxFly,fxDart;animation-duration:.5s,.12s;
  animation-iteration-count:1,infinite;
}
@keyframes fxDart{50%{margin-left:4px;margin-top:-3px}}

/* Rock: jagged stones. */
.fx-rock{
  width:15px;height:13px;
  border-radius:20% 60% 30% 55%;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.25);
  animation-name:fxArc;animation-duration:.52s;
}

/* Ghost: soft, fading wisps. */
.fx-ghost{
  width:17px;height:19px;border-radius:50% 50% 42% 42%;opacity:.6;
  filter:blur(1px);box-shadow:0 0 16px var(--c);
  animation-name:fxFly,fxWaver;animation-duration:.7s,.5s;
  animation-iteration-count:1,infinite;
}
@keyframes fxWaver{50%{opacity:.28;filter:blur(2.5px)}}

/* Dragon: bright energy motes with a long glow. */
.fx-dragon{
  width:12px;height:12px;
  box-shadow:0 0 14px var(--c),0 0 26px var(--c);
}

/* Dark: shadow blots that swallow the light. */
.fx-dark{
  width:16px;height:16px;opacity:.75;filter:blur(1.5px);
  box-shadow:0 0 18px rgba(0,0,0,.7);
}

/* Steel: sharp metallic glints. */
.fx-steel{
  width:6px;height:16px;border-radius:1px;rotate:20deg;
  box-shadow:0 0 10px var(--c),0 0 3px #fff;
}

/* Fairy: twinkling sparkles. */
.fx-fairy{
  width:10px;height:10px;
  box-shadow:0 0 12px var(--c),0 0 20px var(--c);
  animation-name:fxFly,fxTwinkle;animation-duration:.6s,.28s;
  animation-iteration-count:1,infinite;
}
@keyframes fxTwinkle{50%{transform:scale(.5);opacity:.55}}

/* Normal: plain impact motes. */
.fx-normal{width:11px;height:11px;box-shadow:0 0 8px var(--c)}

/* ── Attacker motion ────────────────────────────────── */

/* Physical moves lunge into the target and spring back. */
.bmon.is-lunge img{
  animation:fxLunge .44s cubic-bezier(.35,1.4,.5,1);
}
@keyframes fxLunge{
  0%  {transform:translate(0,0)}
  35% {transform:translate(var(--lunge-x,30px),var(--lunge-y,-20px))}
  100%{transform:translate(0,0)}
}

/* Status moves glow at the user instead of travelling. */
.bmon.is-charging img{
  animation:fxCharge .5s ease-in-out;
}
@keyframes fxCharge{
  0%,100%{filter:none}
  50%{filter:brightness(1.5) drop-shadow(0 0 16px var(--fx-tint,#fff))}
}

@media (prefers-reduced-motion:reduce){
  .fxp,.bmon.is-lunge img,.bmon.is-charging img,
  .battle__field.is-fx::before{animation:none!important}
  .fxp{opacity:0}
}

/* ============================================================
   Shared with the Hunt and the Arena shop
   The PokéMart once owned these; the screens that borrowed them
   keep them.
   ============================================================ */
.shop__modes{display:flex;gap:6px}
.shop__modes .btn.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.shop__wallet{display:flex;align-items:center;gap:7px;padding:6px 12px;
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-sm)}
.shop__wallet img{width:22px;height:22px;image-rendering:pixelated}
.shop__wallet b{color:var(--yellow);font-variant-numeric:tabular-nums}
.shop__msg{margin:0;padding:8px 12px;border-radius:var(--r-sm);
  background:rgba(63,217,138,.12);border:1px solid rgba(63,217,138,.3);
  color:var(--ok);font-size:.86rem}
.shop__have{color:var(--txt-dim);font-size:.78rem;font-variant-numeric:tabular-nums}

/* ============================================================
   PokéMart
   A shop front on the street: a blue-and-white awning over the
   scene, the sign, the clerk's line and the wallet on glass tiles,
   as the Marketplace and the Guild Hall open. Buy / Sell as pills,
   the aisles as signs, the stock standing on wooden shelves, and the
   till on the right - a sheet from the bottom on a phone. The shelf
   scrolls; the till stays put, so the buy button never moves out
   from under the pointer while browsing.
   ============================================================ */
.mart{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}

/* ── The shop front ──────────────────────────────────── */
.marthero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;min-height:132px;padding:32px 16px 14px;flex-shrink:0;
  border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#3D5A7A,#22303F)}
.marthero__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:brightness(.6) saturate(1.05);
  transform:scale(1.08);animation:scenePan 40s ease-in-out infinite alternate}
.marthero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,22,.1),rgba(14,17,22,.82)),
    radial-gradient(ellipse 60% 90% at 0% 100%,rgba(42,117,187,.3),transparent 70%)}
/* The Ore Collector's awning in the mart's own blue: stripes with a
   scalloped edge, cut by a mask so the street shows between. */
.marthero__awning{position:absolute;top:0;left:0;right:0;height:20px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 22px,#EEF4FB 22px 44px);
  -webkit-mask:radial-gradient(circle 11px at 11px 20px,transparent 10px,#000 11px) 0 0/22px 100% repeat-x;
          mask:radial-gradient(circle 11px at 11px 20px,transparent 10px,#000 11px) 0 0/22px 100% repeat-x}
.marthero__front{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.marthero__sign{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;
  border-radius:8px;color:#fff;font-size:1.05rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.4);
  background:linear-gradient(180deg,#3B8AD6,var(--blue-dk));border:2px solid #CFE3F7;
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.marthero__sign img{width:24px;height:24px;image-rendering:pixelated}
.marthero__bubble{position:relative;margin:0;max-width:34ch;padding:8px 12px;
  border-radius:12px;color:#1B2330;font-size:.82rem;font-weight:600;line-height:1.35;
  background:rgba(255,255,255,.94);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.marthero__bubble::before{content:'';position:absolute;left:18px;top:-5px;width:11px;height:11px;
  background:inherit;transform:rotate(45deg)}

.martstats{display:flex;gap:8px;flex-wrap:wrap}
.martstat{display:flex;align-items:center;gap:8px;min-width:112px;padding:7px 12px 7px 8px;
  border-radius:12px;color:var(--txt);
  background:rgba(14,17,22,.5);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.martstat img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.martstat span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.martstat em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.martstat b{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.martstat--money b{color:var(--yellow)}
/* Money going out flashes red, money coming in green, and the coin
   hops either way. */
.martstat.is-paid{animation:martPaid .7s ease-out}
.martstat.is-got{animation:martGot .7s ease-out}
.martstat.is-paid img,.martstat.is-got img{animation:martHop .7s ease-out}
@keyframes martPaid{30%{border-color:rgba(255,78,78,.85);transform:translateY(-2px)}}
@keyframes martGot{30%{border-color:rgba(63,217,138,.85);transform:translateY(-2px)}}
@keyframes martHop{40%{transform:translateY(-5px) rotate(-14deg)}}

/* ── Counters and aisles ─────────────────────────────── */
.martnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}
.marttabs{display:flex;gap:2px;padding:3px;flex-shrink:0;
  border-radius:99px;background:var(--ink);border:1px solid var(--line)}
.marttab{flex:0 0 auto;padding:7px 18px;border-radius:99px;font-size:.8rem;font-weight:700;
  color:var(--txt-dim);background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s}
.marttab:hover{color:var(--txt)}
.marttab.is-on{background:var(--red);color:#fff;box-shadow:0 4px 12px -4px rgba(238,21,21,.7)}
.marttab span{margin-left:6px;padding:0 6px;border-radius:99px;font-size:.68rem;
  background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}

/* An aisle sign: the sprite of what is down it, a blue header bar. */
.martaisles{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.mart.is-sell .martaisles{display:none}
.martaisle{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;
  border-radius:8px;font:inherit;font-size:.76rem;font-weight:700;color:var(--txt-dim);
  white-space:nowrap;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--blue-dk);
  transition:color .15s,background .15s,border-color .15s}
.martaisle img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.martaisle i{display:inline-flex;align-items:center;font-style:normal;font-size:.66rem;
  padding:0 6px;border-radius:99px;background:rgba(255,255,255,.08);
  font-variant-numeric:tabular-nums}
.martaisle:hover{color:var(--txt);border-color:var(--blue)}
.martaisle.is-on{color:#fff;border-color:var(--blue);border-top-color:#7FB6EA;
  background:linear-gradient(180deg,rgba(42,117,187,.42),rgba(42,117,187,.14))}
.martaisle.is-locked{opacity:.62}
.martaisle.is-locked img{filter:grayscale(1)}
.martaisle .martaisle__lock{padding:0 2px;background:none}

/* ── The shop floor ──────────────────────────────────── */
.martmain{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px}
.martstore{min-height:0;overflow-y:auto;padding:12px 12px 2px;border-radius:var(--r);
  background:linear-gradient(180deg,#1B222C,#141A22);border:1px solid var(--line);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.martstore__empty{margin:0;padding:40px 12px;text-align:center;color:var(--txt-dim);font-size:.86rem}

/* The shelves. Rows are a fixed height so the planks can be drawn
   as one repeating background under every row - full width, even
   under a row that is only half stocked, as a real shelf is. */
.martshelf{--row:120px;--gap:20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(106px,1fr));
  grid-auto-rows:var(--row);gap:var(--gap) 10px;padding-bottom:var(--gap);margin-bottom:8px;
  background:repeating-linear-gradient(180deg,
    transparent 0 var(--row),
    #93622F var(--row) calc(var(--row) + 7px),
    #5E3B1C calc(var(--row) + 7px) calc(var(--row) + 10px),
    rgba(0,0,0,.35) calc(var(--row) + 10px),
    transparent calc(var(--row) + 17px) calc(var(--row) + var(--gap)))}

.martitem{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:5px;min-width:0;height:100%;padding:24px 6px 8px;
  border-radius:10px 10px 3px 3px;font:inherit;color:var(--txt);text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);border-bottom:0;
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.martitem:hover{transform:translateY(-3px);border-color:rgba(42,117,187,.75);
  background:linear-gradient(180deg,rgba(42,117,187,.18),rgba(42,117,187,.04))}
.martitem:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.martitem.is-on{transform:translateY(-3px);border-color:var(--yellow);
  background:linear-gradient(180deg,rgba(255,203,5,.16),rgba(255,203,5,.03));
  box-shadow:0 0 0 1px var(--yellow),0 10px 22px -10px rgba(255,203,5,.6)}
.martitem__ico{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.45));transition:transform .2s}
.martitem:hover .martitem__ico,.martitem.is-on .martitem__ico{transform:scale(1.12)}
.martitem__name{max-width:100%;min-height:2.4em;font-size:.74rem;font-weight:700;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* The price tag: a yellow label with a punched hole, hung in the
   corner. */
.martitem__tag{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px 2px 10px;border-radius:0 3px 3px 0;font-size:.66rem;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:#2A2100;background:var(--yellow);
  clip-path:polygon(6px 0,100% 0,100% 100%,6px 100%,0 50%)}
.martitem__tag::before{content:'';position:absolute;left:5px;top:50%;width:3px;height:3px;
  margin-top:-1.5px;border-radius:50%;background:rgba(0,0,0,.5)}
.martitem__tag img{width:13px;height:13px;object-fit:contain;image-rendering:pixelated}
.martitem__have{position:absolute;top:6px;left:6px;padding:1px 6px;border-radius:99px;
  font-size:.62rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:#CFE3F7;background:rgba(42,117,187,.4)}
/* More than the wallet holds: still there to look at, priced red. */
.martitem.is-poor{opacity:.6}
.martitem.is-poor .martitem__tag{color:#fff;background:var(--red-dk)}
/* What the next badges open, in silhouette. */
.martitem.is-locked{cursor:default;border-style:dashed;border-color:rgba(255,255,255,.09);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 6px,transparent 6px 12px)}
.martitem.is-locked:hover{transform:none}
.martitem.is-locked .martitem__ico{filter:brightness(0) opacity(.45);transform:none}
.martitem.is-locked .martitem__name{color:var(--txt-dim)}
.martitem.is-locked .martitem__tag{color:var(--txt-dim);background:var(--ink-3)}
.martitem.is-locked .martitem__tag::before{background:rgba(255,255,255,.25)}

/* The bag by pocket, on the selling side. */
.martgroup{display:flex;align-items:center;gap:7px;margin:2px 0 10px;font-size:.7rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
.martgroup img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.martgroup i{font-style:normal;padding:0 6px;border-radius:99px;letter-spacing:0;
  background:rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.martgroup::after{content:'';flex:1;height:1px;background:var(--line)}

/* ── The window display ──────────────────────────────── */
/* The evolution item on offer: one, half price, six hours.

   At the head of the shelves rather than in an aisle, because the
   offered item may belong to an aisle the player has not unlocked -
   reaching past that gate is the whole point of it. Dimmed once
   taken rather than removed, so the countdown to the next one stays
   readable. */
.shopsale{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;
  margin:0 0 16px;padding:22px 14px 12px 12px;border-radius:12px;overflow:hidden;
  background:
    radial-gradient(ellipse 45% 130% at 6% 60%,rgba(255,204,51,.3),transparent 70%),
    linear-gradient(90deg,rgba(255,204,51,.13),rgba(255,204,51,.03));
  border:1px solid rgba(255,204,51,.45);
  box-shadow:0 10px 24px -16px rgba(255,204,51,.7)}
.shopsale.is-taken{opacity:.6;border-color:var(--line);background:var(--ink-3);box-shadow:none}
.shopsale__ribbon{position:absolute;top:0;left:0;padding:2px 10px;border-radius:0 0 8px 0;
  font-size:.58rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--red)}
.shopsale.is-taken .shopsale__ribbon{background:var(--line);color:var(--txt-dim)}
.shopsale__stage{position:relative;flex-shrink:0;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.2),rgba(255,204,51,.1) 60%,transparent 72%)}
.shopsale__ico{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.45));animation:martFloat 3s ease-in-out infinite}
.shopsale.is-taken .shopsale__ico{animation:none;filter:grayscale(1)}
@keyframes martFloat{50%{transform:translateY(-4px)}}
.shopsale__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.shopsale__tag{align-self:flex-start;padding:1px 7px;border-radius:99px;font-size:.6rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2A2100;background:#FFCC33}
.shopsale.is-taken .shopsale__tag{background:var(--line);color:var(--txt-dim)}
.shopsale__name{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shopsale__note{font-size:.68rem;color:var(--txt-dim)}
.shopsale__price{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;
  font-variant-numeric:tabular-nums}
.shopsale__price s{font-size:.68rem;color:var(--txt-dim)}
.shopsale__price b{font-size:1rem;color:#FFCC33}
.shopsale.is-taken .shopsale__price b{color:var(--txt-dim)}
.shopsale__buy{flex-shrink:0;padding:7px 16px;font-size:.8rem;color:#fff}

/* ── The till ────────────────────────────────────────── */
.martcounter{position:relative;display:flex;flex-direction:column;gap:9px;min-height:0;
  overflow-y:auto;padding:14px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(42,117,187,.13),transparent 45%),var(--glass);
  border:1px solid var(--glass-brd);border-top:4px solid var(--blue);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.martcounter.is-idle{justify-content:center;background:transparent;
  border:1px dashed var(--line)}
.martcounter__idle{display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;color:var(--txt-dim);font-size:.82rem;line-height:1.45}
.martcounter__idle img{width:40px;height:40px;opacity:.5;image-rendering:pixelated;
  animation:martFloat 3s ease-in-out infinite}
.martcounter__idle p{margin:0;max-width:22ch}
.martcounter__close{display:none}
.martcounter__mat{align-self:center;display:grid;place-items:center;width:96px;height:96px;
  flex-shrink:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.13),rgba(42,117,187,.14) 60%,transparent 71%)}
.martcounter__mat img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.5));animation:martIn .25s ease-out}
@keyframes martIn{from{opacity:0;transform:translateY(6px) scale(.9)}}
.martcounter__kicker{align-self:center;font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#7FB6EA}
.martcounter__name{margin:-5px 0 0;font-size:1.05rem;text-align:center}
.martcounter__text{margin:0;font-size:.76rem;line-height:1.45;color:var(--txt-dim);text-align:center}
.martcounter__own{margin:0;font-size:.74rem;color:var(--txt-dim);text-align:center}
.martcounter__own b{color:var(--txt);font-variant-numeric:tabular-nums}

.martqty{display:flex;align-items:center;gap:4px;padding:4px;flex-shrink:0;
  border-radius:99px;background:var(--ink);border:1px solid var(--line)}
.martqty__b{min-width:32px;height:30px;padding:0 7px;border-radius:99px;font:inherit;
  font-size:.74rem;font-weight:800;color:var(--txt);cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line);transition:background .15s,border-color .15s}
.martqty__b:hover{border-color:var(--blue);background:rgba(42,117,187,.25)}
.martqty__n{flex:1;text-align:center;font-size:1.1rem;font-weight:900;
  font-variant-numeric:tabular-nums}
.martqty__max{color:var(--yellow)}

/* The receipt: paper, a dashed rule over the total, and a torn
   edge cut by a mask. */
.martreceipt{flex-shrink:0;padding:11px 12px 15px;border-radius:4px 4px 0 0;
  font-family:var(--mono);font-size:.74rem;color:#2A2F38;background:#F4F1E8;
  -webkit-mask:radial-gradient(circle 5px at 5px 100%,transparent 4.5px,#000 5px) 0 0/10px 100% repeat-x;
          mask:radial-gradient(circle 5px at 5px 100%,transparent 4.5px,#000 5px) 0 0/10px 100% repeat-x}
.martreceipt>div{display:flex;justify-content:space-between;gap:8px;line-height:1.6}
.martreceipt>div>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.martreceipt>div>:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.martreceipt__total{margin-top:5px;padding-top:5px;border-top:1px dashed rgba(0,0,0,.35);
  font-size:.86rem;font-weight:800}
.martreceipt__after{color:#6B7280}

.martcounter__go{width:100%;flex-shrink:0;padding:10px 15px;font-size:.9rem;color:#fff}
.martcounter__go:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.martcounter__warn{margin:0;font-size:.76rem;color:var(--red-lt);text-align:center}
.mart.is-busy .martcounter__go,.mart.is-busy .shopsale__buy{opacity:.6;pointer-events:none}

/* A message that survives the redraw. */
.marttoast{position:fixed;left:50%;bottom:24px;z-index:220;max-width:min(460px,calc(100vw - 32px));
  padding:10px 16px;border-radius:12px;font-size:.84rem;font-weight:600;color:var(--txt);
  background:rgba(22,27,35,.9);border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);
  opacity:0;transform:translate(-50%,12px);pointer-events:none;
  transition:opacity .22s,transform .22s}
.marttoast.is-bad{border-color:rgba(238,21,21,.6)}
.marttoast.is-in{opacity:1;transform:translate(-50%,0)}

/* ── Smaller screens ─────────────────────────────────── */
@media (max-width:900px){
  /* The till becomes a sheet from the bottom, over the shelves. */
  .martmain{grid-template-columns:minmax(0,1fr)}
  .martcounter.is-idle{display:none}
  .martcounter{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:150;max-height:82dvh;
    padding-top:18px;border-radius:var(--r) var(--r) 0 0;background-color:var(--ink-2);
    box-shadow:0 -16px 40px rgba(0,0,0,.6);animation:martSheet .24s ease-out}
  .martcounter__close{position:absolute;top:10px;right:10px;display:grid;place-items:center;
    width:32px;height:32px;border-radius:50%;color:var(--txt-dim);cursor:pointer;
    background:var(--ink-3);border:1px solid var(--line)}
  .martcounter__close:hover{color:#fff;background:var(--red)}
  .martmain.has-pick .martstore{padding-bottom:45dvh}
}
@keyframes martSheet{from{transform:translateY(100%)}}
@media (max-width:640px){
  .marthero{min-height:0;padding:28px 12px 12px}
  .marthero__bubble{font-size:.76rem}
  .martstats{width:100%;gap:6px}
  .martstat{flex:1;min-width:0;padding:6px 8px}
  .martstat img{display:none}
  .martstat b{font-size:13px}
  .martnav{flex-direction:column;align-items:stretch;gap:8px}
  .marttab{flex:1}
  /* One row that scrolls sideways. contain keeps its full length out
     of the window's own width, which it would otherwise stretch. */
  .martaisles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    contain:inline-size}
  .martaisles::-webkit-scrollbar{display:none}
  .martstore{padding:10px 8px 2px}
  .martshelf{--row:110px;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));column-gap:8px}
  .martitem__ico{width:38px;height:38px}
  .shopsale{flex-wrap:wrap;gap:8px}
  .shopsale__note{display:none}
  .shopsale__buy{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .mart *,.mart *::before,.mart *::after,.marttoast{animation:none!important;transition:none!important}
}

/* ============================================================
   Choosing who an item goes to, and the Pokémon Center
   ============================================================ */
.usepick{display:flex;flex-direction:column;gap:10px}
.usepick__head{margin:0;font-size:.95rem;color:var(--txt)}
.usepick__list{display:flex;flex-direction:column;gap:6px}
.usepick__mon{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:11px;padding:8px 11px;cursor:pointer;text-align:left;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);transition:background .12s,border-color .12s}
.usepick__mon:hover:not(:disabled){background:var(--ink-3);border-color:var(--blue)}
.usepick__mon:disabled{opacity:.42;cursor:not-allowed}
.usepick__mon img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.usepick__name{display:flex;flex-direction:column;gap:1px;font-size:.88rem}
.usepick__name em{font-style:normal;font-size:.72rem;color:var(--txt-dim)}
.usepick__hp{font-size:.78rem;color:var(--txt-dim);text-align:right;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.usepick__st{color:var(--yellow);text-transform:uppercase;font-size:.66rem}
/* What an Ability Capsule would change this Pokemon to, in place of
   a health bar that says nothing about whether it would do anything.
   Dimmed where it would do nothing at all. */
.usepick__ab{font-size:.74rem;color:var(--txt);white-space:nowrap}
.usepick__ab.is-off{color:var(--txt-dim);font-style:italic}
.usepick__bar{display:block;width:74px;height:6px;border-radius:99px;
  background:var(--ink);overflow:hidden}
.usepick__bar i{display:block;height:100%;border-radius:99px;background:var(--ok);
  transition:width .3s}
.usepick__back{align-self:flex-start}

.center{display:flex;flex-direction:column;gap:14px;align-items:center}
.center__line{margin:0;text-align:center;color:var(--txt-dim);font-size:.88rem;
  max-width:44ch;line-height:1.5}
.center__team{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.center__mon{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px;min-width:104px;background:var(--glass);
  border:1px solid var(--glass-brd);border-radius:var(--r)}
.center__mon img{width:52px;height:52px;object-fit:contain;image-rendering:pixelated}
.center__name{font-size:.8rem}
.center__hp{font-size:.72rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.center__go{min-width:220px}

/* The EXP Share sits in the Bag as a permanent key item, so it is
   marked apart from the things that get spent. */
.bagitem--key{border-color:var(--yellow);
  background:linear-gradient(180deg,rgba(255,203,5,.07),transparent)}

/* ============================================================
   Gyms & League
   The badge case on top, then three tabs. Gyms: a rail of the eight
   leaders and the chosen one on a stage - art in front of their town,
   tinted in their type, the team as cards, what hits them hard and
   the button. League: the four seats and the Champion as one road.
   Rematches: a grid of everyone who can be fought again today.
   ============================================================ */
.lg{--t-mixed:#8FA3BF;--mega:#C77DFF;display:grid;gap:14px;
  container-type:inline-size;container-name:lg}

/* The badge case: eight sockets, the earned ones lit. */
.lg-case{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:16px;padding:12px 16px;border-radius:var(--r);
  background:linear-gradient(180deg,#2a1f1a,#1d1512);border:1px solid #3d2e25;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 24px rgba(0,0,0,.35)}
.lg-case__count{display:grid;line-height:1.1}
.lg-case__count b{font-family:var(--display);font-size:1.6rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.lg-case__count span{font-size:.72rem;color:#c9b6a6;letter-spacing:.08em;
  text-transform:uppercase}
.lg-case__slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;
  max-width:520px;width:100%;justify-self:center}
.lg-socket{position:relative;aspect-ratio:1;display:grid;place-items:center;
  border:0;padding:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,#120d0b,#0a0706);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07)}
.lg-socket img{width:78%;height:78%;object-fit:contain;opacity:.6;
  filter:grayscale(1) brightness(.35);transition:filter .2s,opacity .2s}
.lg-socket.is-on img{opacity:1;filter:drop-shadow(0 0 6px rgba(255,214,120,.45))}
.lg-socket.is-next{box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 2px rgba(255,203,5,.55)}
.lg-socket.is-next::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(255,203,5,.5);animation:lg-pulse 1.8s ease-out infinite}
@keyframes lg-pulse{from{transform:scale(.92);opacity:.9}to{transform:scale(1.18);opacity:0}}
.lg-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font-size:.74rem;font-weight:600;white-space:nowrap;color:var(--txt-dim);
  border:1px solid var(--line);background:var(--ink-2)}
.lg-chip--open{border-color:rgba(255,203,5,.5);color:var(--yellow)}
.lg-chip--champ{border-color:rgba(232,201,106,.6);color:var(--gold);
  background:rgba(232,201,106,.08)}

.lg-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.lg-tab{display:flex;align-items:center;gap:7px;padding:9px 14px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  color:var(--txt-dim);font-family:var(--display);font-weight:600;font-size:.9rem}
.lg-tab[aria-selected="true"]{color:var(--txt);border-bottom-color:var(--red)}
.lg-tab__n{font-size:.7rem;padding:1px 7px;border-radius:999px;background:var(--ink-3);
  color:var(--txt-dim);font-variant-numeric:tabular-nums}
.lg-body{display:grid;gap:12px}

/* Shared pieces */
.lg-ty{display:block;height:18px;width:auto}
.lg-ty--sm{height:15px}
.lg-mixed{display:inline-flex;align-items:center;height:18px;padding:0 9px;
  border-radius:5px;color:#111;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(90deg,var(--t-steel),var(--t-psychic),var(--t-fire))}
.lg-balls{display:inline-flex;align-items:center;gap:3px}
.lg-balls img{width:14px;height:14px;image-rendering:pixelated}
.lg-balls i{display:inline-block;width:12px;height:12px;margin:1px;border-radius:50%;
  border:1.5px dashed #47515f}
.lg-eyebrow{margin:0;font-family:var(--display);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.lg-ok{color:var(--ok);font-weight:600;font-size:.82rem}
.lg-timer{font-variant-numeric:tabular-nums}
.lg-note{margin:0;font-size:.8rem;color:var(--txt-dim)}
.lg-empty{margin:0;padding:20px;border-radius:12px;border:1px dashed var(--line);
  color:var(--txt-dim);text-align:center}
.lg-seg{display:flex;gap:3px;padding:3px;border-radius:10px;
  background:var(--ink);border:1px solid var(--line)}
.lg-seg button{padding:5px 10px;border:0;border-radius:7px;background:none;cursor:pointer;
  color:var(--txt-dim);font:inherit;font-size:.78rem;white-space:nowrap}
.lg-seg button[aria-pressed="true"]{background:var(--ink-4);color:var(--txt);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lg-seg button:disabled{opacity:.4;cursor:not-allowed}
.lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:11px;font-family:var(--display);font-weight:700;
  font-size:.92rem;white-space:nowrap}
.lg-btn img{width:18px;height:18px;image-rendering:pixelated}
.lg-btn--go{background:linear-gradient(180deg,#ff3b3b,var(--red));border-color:#ff5a5a;
  color:#fff;box-shadow:0 6px 18px rgba(238,21,21,.35)}
.lg-btn--go:hover:not(:disabled){background:linear-gradient(180deg,#ff5252,#d11010)}
.lg-btn--champ{background:linear-gradient(180deg,#f3d67f,#c9a645);border-color:#f7e3a3;
  color:#2a1f00;box-shadow:0 6px 18px rgba(232,201,106,.3)}
.lg-btn--sm{padding:6px 12px;font-size:.8rem;border-radius:9px}
.lg-sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.lg-sechead h3{margin:0;font-family:var(--display);font-size:1rem}
.lg-sechead span{color:var(--txt-dim);font-size:.8rem}

/* Gyms: rail and stage */
.lg-split{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start}
.lg-rail{display:grid;gap:4px}
.lg-ritem{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;
  gap:10px;width:100%;padding:7px 10px;border-radius:11px;cursor:pointer;
  border:1px solid transparent;background:none;color:var(--txt);font:inherit;text-align:left}
.lg-ritem:hover{background:var(--ink-3)}
.lg-ritem[aria-current="true"]{background:var(--ink-3);
  border-color:color-mix(in srgb,var(--tc) 50%,var(--line))}
.lg-ritem__badge{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--tc) 35%,transparent),transparent 70%)}
.lg-ritem__badge img{width:30px;height:30px;object-fit:contain}
.lg-ritem.is-locked .lg-ritem__badge img{filter:grayscale(1) brightness(.5)}
.lg-ritem__who{display:grid;min-width:0}
.lg-ritem__who b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-ritem__who em{font-style:normal;font-size:.72rem;color:var(--txt-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-st{padding:2px 7px;border-radius:6px;font-size:.64rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.lg-st--done{color:var(--ok);background:rgba(63,217,138,.1)}
.lg-st--next{color:var(--ink);background:var(--yellow)}
.lg-st--locked{color:var(--txt-dim);background:var(--ink-3)}

.lg-stage{--tc:var(--t-normal);display:grid;border-radius:16px;overflow:hidden;
  background:var(--ink-3);border:1px solid color-mix(in srgb,var(--tc) 35%,var(--line))}
.lg-hero{position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(140px,230px) minmax(0,1fr);gap:18px;
  padding:18px 20px 0;min-height:250px}
.lg-scene{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.lg-scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 30%,rgba(14,17,22,.55)) 0%,
    rgba(14,17,22,.82) 48%,rgba(30,37,47,.97) 100%),
    linear-gradient(180deg,transparent 55%,var(--ink-3) 100%)}
.lg-art{position:relative;margin:0;align-self:end;display:flex;align-items:flex-end;
  justify-content:center;height:232px}
.lg-art::before{content:"";position:absolute;bottom:-14px;left:10%;right:10%;height:46px;
  border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tc) 55%,transparent),transparent)}
.lg-art img{position:relative;max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.lg img.px,.gymgreet img.px,.gymtalk img.px{image-rendering:pixelated}
.lg-info{align-self:center;display:grid;gap:8px;padding-bottom:18px;min-width:0}
.lg-info h2{margin:0;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(1.5rem,4cqi,2.3rem);letter-spacing:-.01em;text-wrap:balance}
.lg-title{margin:0;font-weight:600;color:color-mix(in srgb,var(--tc) 55%,var(--txt))}
.lg-crown{margin:0;font-family:var(--display);font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lg-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lg-fact{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;
  border-radius:999px;font-size:.78rem;white-space:nowrap;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.lg-fact img{height:20px;width:auto}
.lg-fact b{font-family:var(--display);font-variant-numeric:tabular-nums}
.lg-quote{position:relative;margin:2px 0 0;padding:10px 14px;max-width:62ch;
  border-radius:12px;font-size:.86rem;color:#d5dde8;
  background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.07)}
.lg-quote::before{content:"";position:absolute;left:-7px;top:16px;
  border:7px solid transparent;border-left:0;border-right-color:rgba(0,0,0,.38)}
.lg-stage--champ{border-color:rgba(232,201,106,.55);
  box-shadow:0 0 0 1px rgba(232,201,106,.15),0 20px 50px rgba(232,201,106,.08)}
.lg-stage--champ .lg-scene::after{
  background:linear-gradient(90deg,rgba(120,90,20,.45) 0%,rgba(14,17,22,.8) 48%,
    rgba(30,37,47,.97) 100%),linear-gradient(180deg,transparent 55%,var(--ink-3) 100%)}
.lg-stage--champ .lg-hero{min-height:300px}
.lg-stage--champ .lg-art{height:300px}

.lg-teamhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;padding:14px 20px 8px}
.lg-teamhead h3{display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--display);font-size:.95rem}
.lg-team{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:10px;padding:0 20px}
.lg-mon{position:relative;display:grid;align-content:start;gap:7px;padding:10px;
  min-width:0;border-radius:12px;background:var(--ink-2);border:1px solid var(--line)}
.lg-mon.is-ace{border-color:rgba(255,213,74,.5);
  background:linear-gradient(180deg,rgba(255,213,74,.08),var(--ink-2) 60%)}
.lg-mon__top{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:center}
.lg-mon__art{position:relative;display:grid;place-items:center;width:64px;height:64px;
  border-radius:10px;
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--mc) 30%,transparent),transparent 70%)}
.lg-mon__art > img{width:64px;height:64px;image-rendering:pixelated}
.lg-mon__mega{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;
  border-radius:50%;background:#1b1230;
  box-shadow:0 0 0 1.5px var(--mega),0 0 10px rgba(199,125,255,.6)}
.lg-mon__mega img{width:100%;height:100%}
.lg-mon__name{display:grid;gap:4px;min-width:0}
.lg-mon__name b{font-size:.86rem;line-height:1.15;overflow-wrap:anywhere;padding-right:34px}
.lg-mon__lv{font-family:var(--display);font-size:.74rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.lg-mon__types{display:flex;flex-wrap:wrap;gap:3px}
.lg-mon__plain{margin:0;font-size:.72rem;color:var(--txt-dim)}
.lg-tag{position:absolute;top:8px;right:8px;padding:2px 6px;border-radius:5px;
  font-size:.6rem;font-weight:800;letter-spacing:.1em}
.lg-tag--ace{background:var(--shiny);color:#2a2000}
.lg-tag--mega{color:var(--mega);background:rgba(199,125,255,.18);
  border:1px solid rgba(199,125,255,.45)}
.lg-mon.is-ace .lg-tag--mega{top:28px}
.lg-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;margin:0;
  font-size:.76rem;align-items:center}
.lg-kv dt{color:var(--txt-dim)}
.lg-kv dd{display:flex;align-items:center;gap:5px;min-width:0;margin:0}
.lg-kv dd img{flex:none;width:20px;height:20px;image-rendering:pixelated}
.lg-moves{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.lg-mv{padding:3px 6px;border-radius:6px;font-size:.7rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb,var(--mt) 22%,var(--ink));
  border:1px solid color-mix(in srgb,var(--mt) 45%,transparent)}

.lg-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
  margin-top:14px;padding:16px 20px 18px;border-top:1px solid var(--line);
  background:rgba(0,0,0,.18)}
.lg-weak{display:grid;gap:6px;min-width:0}
.lg-weak > span{font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim)}
.lg-weak div{display:flex;flex-wrap:wrap;gap:4px}
.lg-cta{display:grid;gap:6px;justify-items:end;text-align:right}
.lg-cta p{margin:0;max-width:38ch;font-size:.78rem;color:var(--txt-dim)}

/* League: Victory Road */
.lg-road{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;padding:16px 14px 12px;border-radius:var(--r);
  background:linear-gradient(180deg,#151b26,#121720);border:1px solid var(--line)}
.lg-road::before{content:"";position:absolute;left:10%;right:10%;top:52px;height:3px;
  background:repeating-linear-gradient(90deg,#3a4556 0 10px,transparent 10px 16px)}
.lg-road__fill{position:absolute;left:10%;top:52px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--yellow),var(--gold));transition:width .4s}
.lg-node{position:relative;display:grid;justify-items:center;gap:6px;min-width:0;padding:0;
  border:0;background:none;color:var(--txt);font:inherit;cursor:pointer}
.lg-node__ring{position:relative;width:74px;height:74px;max-width:100%;padding:3px;
  border-radius:50%;background:var(--line)}
.lg-node__ring > span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tc) 50%,var(--ink-3)),var(--ink-2))}
.lg-node__ring img{width:100%;height:150%;object-fit:cover;object-position:top}
.lg-node.is-done .lg-node__ring{background:var(--ok)}
.lg-node.is-next .lg-node__ring{background:conic-gradient(var(--yellow),var(--gold),var(--yellow))}
.lg-node.is-locked .lg-node__ring img{filter:brightness(.25) grayscale(1)}
.lg-node[aria-current="true"] .lg-node__ring{
  box-shadow:0 0 0 3px var(--ink-2),0 0 0 5px color-mix(in srgb,var(--tc) 80%,white)}
.lg-node--champ .lg-node__ring{width:86px;height:86px;margin-top:-6px}
.lg-node__seat{position:absolute;top:-2px;left:50%;transform:translateX(18px);
  padding:1px 6px;border-radius:999px;font-family:var(--display);font-weight:800;
  font-size:.68rem;background:var(--ink);border:1px solid var(--line)}
.lg-node b{max-width:100%;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-node em{font-style:normal;font-size:.68rem;color:var(--txt-dim)}
.lg-roadnote{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  padding:0 4px;font-size:.78rem;color:var(--txt-dim)}

/* Rematches */
.lg-rmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.lg-rm{--tc:var(--t-normal);display:grid;grid-template-columns:62px minmax(0,1fr);
  align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--ink-3);
  border:1px solid color-mix(in srgb,var(--tc) 30%,var(--line))}
.lg-rm.is-used{opacity:.75}
.lg-rm__face{position:relative;width:62px;height:62px;overflow:hidden;border-radius:12px;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tc) 45%,var(--ink-3)),var(--ink-2))}
.lg-rm__face img{width:100%;height:160%;object-fit:cover;object-position:top}
.lg-rm__face .lg-rm__badge{position:absolute;right:2px;bottom:2px;width:20px;height:20px;
  object-fit:contain}
.lg-rm__who{display:grid;gap:4px;min-width:0}
.lg-rm__who b{font-size:.86rem}
.lg-rm__act{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:8px;font-size:.8rem}
.lg-ring{--p:0;flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:conic-gradient(var(--txt-dim) calc(var(--p)*360deg),var(--ink-4) 0)}
.lg-ring::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--ink-3)}
.lg-run{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--r);background:var(--ink-3);
  border:1px solid rgba(232,201,106,.3)}
.lg-seats{display:flex;flex-wrap:wrap;gap:6px}
.lg-seat{position:relative;width:44px;height:44px;overflow:hidden;border-radius:50%;
  border:2px solid var(--line);background:var(--ink-2)}
.lg-seat img{width:100%;height:150%;object-fit:cover;object-position:top}
.lg-seat.is-won{border-color:var(--ok)}
.lg-seat.is-won::after{content:"";position:absolute;inset:0;background:rgba(63,217,138,.25)}
.lg-seat.is-now{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,203,5,.2)}

/* Narrow: the phone, or a window squeezed by the chat */
@container lg (max-width:720px){
  .lg-split{grid-template-columns:minmax(0,1fr)}
  .lg-rail{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
  .lg-ritem{position:relative;flex:none;grid-template-columns:34px;justify-items:center;
    width:auto;padding:6px}
  .lg-ritem__who{display:none}
  .lg-ritem .lg-st{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
    padding:1px 4px;font-size:.5rem}
  .lg-ritem .lg-st--locked{display:none}
  /* The figure stands above the name rather than beside it: a column
     narrow enough to leave the text room shrinks the art to a thumb. */
  .lg-hero{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 14px 0;min-height:0}
  .lg-art,.lg-stage--champ .lg-art{height:170px}
  .lg-stage--champ .lg-art{height:220px}
  .lg-stage--champ .lg-hero{min-height:0}
  .lg-scene::after{background:linear-gradient(180deg,
    color-mix(in srgb,var(--tc) 25%,rgba(14,17,22,.5)) 0%,rgba(14,17,22,.8) 45%,var(--ink-3) 100%)}
  .lg-stage--champ .lg-scene::after{background:linear-gradient(180deg,
    rgba(120,90,20,.4) 0%,rgba(14,17,22,.8) 45%,var(--ink-3) 100%)}
  .lg-info{padding-bottom:12px}
  .lg-team{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 14px}
  .lg-teamhead{padding:12px 14px 8px}
  .lg-foot{grid-template-columns:minmax(0,1fr);padding:14px}
  .lg-cta{justify-items:stretch;text-align:left}
  .lg-case{grid-template-columns:auto 1fr;gap:10px 12px;padding:10px 12px}
  .lg-case__slots{grid-column:1/-1;grid-row:2;gap:5px}
  .lg-case .lg-chip{justify-self:end}
  .lg-road{gap:2px;padding:14px 6px 10px}
  .lg-road::before,.lg-road__fill{top:40px}
  .lg-node__ring{width:52px;height:52px}
  .lg-node--champ .lg-node__ring{width:60px;height:60px;margin-top:-4px}
  .lg-node__seat{transform:translateX(10px)}
  .lg-node em{display:none}
  .lg-run{grid-template-columns:minmax(0,1fr)}
}
@container lg (max-width:420px){
  .lg-mon__top{grid-template-columns:52px minmax(0,1fr)}
  .lg-mon__art,.lg-mon__art > img{width:52px;height:52px}
  /* The ACE and MEGA tags move onto the sprite, so the name keeps the
     whole width of a narrow card. */
  .lg-tag{top:6px;left:6px;right:auto}
  .lg-mon.is-ace .lg-tag--mega{top:24px}
  .lg-mon__name b{padding-right:0;overflow-wrap:normal}
  .lg-moves{grid-template-columns:1fr}
  .lg-tab{padding:8px 10px;font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){
  .lg-socket.is-next::after{animation:none}
}

/* ============================================================
   Move Tutor
   A scientist's lab: the brass sign, the tutor's line and the wallet
   over the scene, as the PokéMart and the Mega shrine open. The team
   and the four moves it knows down the left, the list on the right
   in cards built on the summary's .smove, and every teach confirmed
   on a sheet with the receipt - from the bottom on a phone.
   ============================================================ */
.tutor{--brass:#C9973A;--brass-dk:#6E4A16;--brass-lt:#F1D9A4;
  container-type:inline-size;display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.tutor img{image-rendering:pixelated}

/* ── The lab ─────────────────────────────────────────── */
.tuthero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;min-height:132px;padding:22px 16px 14px;flex-shrink:0;
  border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#3A4A5A,#1E2630)}
.tuthero__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:brightness(.58) saturate(1.05);image-rendering:auto!important;
  transform:scale(1.08);animation:scenePan 40s ease-in-out infinite alternate}
.tuthero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,22,.08),rgba(14,17,22,.84)),
    radial-gradient(ellipse 60% 90% at 0% 100%,rgba(201,151,58,.3),transparent 70%)}
.tuthero__front{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;flex:1 1 320px}
.tuthero__sign{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;
  border-radius:8px;color:#fff;font:900 1.02rem/1 var(--display);letter-spacing:.08em;
  text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.45);
  background:linear-gradient(180deg,#D9A645,var(--brass-dk));border:2px solid var(--brass-lt);
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.tuthero__sign img{width:24px;height:24px}
.tuthero__say{display:flex;align-items:flex-start;gap:8px;min-width:0}
.tuthero__npc{width:44px;height:44px;flex-shrink:0;border-radius:50%;object-fit:cover;
  object-position:50% 12%;background:radial-gradient(circle at 50% 35%,#F6E7C4,#BF9447);
  border:2px solid var(--brass-lt);box-shadow:0 3px 10px rgba(0,0,0,.4)}
.tuthero__bubble{position:relative;margin:2px 0 0;max-width:44ch;padding:8px 12px;
  border-radius:12px;color:#1B2330;font-size:.82rem;font-weight:600;line-height:1.38;
  background:rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.tuthero__bubble::before{content:'';position:absolute;left:-5px;top:13px;width:11px;height:11px;
  background:inherit;transform:rotate(45deg)}
.tuthero__bubble.is-new{animation:tutBubble .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes tutBubble{from{transform:scale(.92);opacity:.4}}

.tutstats{display:flex;gap:8px;flex-wrap:wrap}
.tutstat{display:flex;align-items:center;gap:8px;min-width:108px;padding:7px 12px 7px 8px;
  border-radius:12px;color:var(--txt);
  background:rgba(14,17,22,.5);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tutstat img{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.tutstat span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.tutstat em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.tutstat b{font:900 15px/1.15 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.tutstat--money b{color:var(--yellow)}
.tutstat--money.is-short b{color:var(--red-lt)}
.tutstat.is-paid{animation:martPaid .7s ease-out}
.tutstat.is-paid img{animation:martHop .7s ease-out}

/* ── Two columns ─────────────────────────────────────── */
.tutbody{display:flex;flex-direction:column;flex:1;min-height:0}
.tutmain{display:grid;grid-template-columns:292px minmax(0,1fr);gap:12px;flex:1;min-height:0}
.tutside{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tutpanel{padding:10px 12px 12px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-brd)}
.tutpanel h4{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim)}
.tutpanel h4 small{margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:0;text-transform:none}
.tutpanel h4 small b{color:var(--txt)}

/* The team: six slots lit in their types, as the Mega screen draws them. */
.tutteam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.tutslot{--tc:var(--line);--tc2:var(--tc);position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;width:100%;aspect-ratio:1/1.08;padding:4px 2px 5px;
  border-radius:10px;cursor:pointer;color:var(--txt);font:inherit;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 30%,var(--ink-2)),
    color-mix(in srgb,var(--tc2) 22%,var(--ink-2)));
  border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);transition:transform .15s,box-shadow .15s}
.tutslot:hover{transform:translateY(-2px)}
.tutslot:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.tutslot img{width:74%;max-height:58%;object-fit:contain}
.tutslot b{max-width:100%;font-size:.68rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tutslot em{font-style:normal;font-size:.6rem;color:var(--txt-dim);font-family:var(--mono)}
.tutslot__pips{display:flex;gap:2px}
.tutslot__pips i{width:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.18)}
.tutslot__pips i.is-on{background:var(--txt)}
.tutslot.is-on{border:2px solid var(--yellow);
  box-shadow:0 0 0 3px rgba(255,203,5,.18),0 8px 18px -6px rgba(255,203,5,.45)}
.tutslot.is-on::after{content:'';position:absolute;bottom:-6px;left:50%;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:var(--yellow);border-radius:2px}

/* The four moves it knows now. */
.tutknown{display:grid;gap:6px}
.kmove{--mc:var(--t-normal);position:relative;display:flex;align-items:center;gap:7px;min-height:38px;
  padding:6px 9px 6px 12px;border-radius:var(--r-sm);overflow:hidden;
  background:linear-gradient(110deg,color-mix(in srgb,var(--mc) 22%,var(--ink)) 0%,var(--ink) 80%);
  border:1px solid color-mix(in srgb,var(--mc) 35%,var(--line))}
.kmove::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mc)}
.kmove__n{flex:1;min-width:0;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kmove__pw{font:600 11px var(--mono);color:var(--txt-dim);white-space:nowrap}
.kmove--empty{justify-content:center;font-size:12px;font-weight:600;color:var(--txt-dim);
  background:transparent;border:1px dashed var(--line)}
.kmove--empty::before{display:none}
.kmove.is-new{animation:tutSlot .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes tutSlot{
  0%{transform:scale(.6);opacity:0}
  45%{transform:scale(1.04);opacity:1;box-shadow:0 0 22px 4px color-mix(in srgb,var(--mc) 70%,transparent)}
  100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}

/* ── The list ────────────────────────────────────────── */
.tutlist{display:flex;flex-direction:column;gap:9px;min-height:0;min-width:0}
.tutnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}
.tuttabs{display:flex;gap:2px;padding:3px;flex-shrink:0;
  border-radius:99px;background:var(--ink);border:1px solid var(--line)}
.tuttab{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:7px 16px;border:0;
  border-radius:99px;font:inherit;font-size:.8rem;font-weight:700;color:var(--txt-dim);
  background:transparent;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tuttab img{width:18px;height:18px}
.tuttab:hover{color:var(--txt)}
.tuttab.is-on{background:var(--red);color:#fff;box-shadow:0 4px 12px -4px rgba(238,21,21,.7)}
.tuttab span{padding:0 6px;border-radius:99px;font-size:.68rem;
  background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
.tutsearch{display:flex;gap:6px;flex:1 1 160px;min-width:0}
.tutsearch input,.tutsearch select{min-width:0;height:34px;padding:0 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--ink);color:var(--txt);font:inherit;font-size:.8rem}
.tutsearch input{flex:1}
.tutsearch select{flex:0 0 auto;max-width:42%}

/* Where a move comes from: four signs, each in its own colour. */
.tutfrom{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}
.tutfrom:empty{display:none}
.tutfrom__b{--fc:var(--txt-dim);display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;
  border-radius:8px;font:inherit;font-size:.75rem;font-weight:700;color:var(--txt-dim);cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--fc)}
.tutfrom__b i{font-style:normal;font-size:.66rem;padding:0 6px;border-radius:99px;
  background:rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.tutfrom__b img{width:18px;height:18px}
.tutfrom__b:hover{color:var(--txt)}
.tutfrom__b.is-on{color:var(--txt);background:var(--ink-4);
  border-color:color-mix(in srgb,var(--fc) 55%,var(--line));border-top-color:var(--fc)}
.tutfrom__dot{width:9px;height:9px;border-radius:50%;background:var(--fc)}
.tutfrom__b--level,.tcard__from--level{--fc:var(--ok)}
.tutfrom__b--egg,.tcard__from--egg{--fc:#F2C6DE}
.tutfrom__b--tutor,.tcard__from--tutor{--fc:#C9973A}
.tutfrom__b--oldtm,.tcard__from--oldtm{--fc:var(--blue)}
.tutfrom__b--tm,.tcard__from--tm{--fc:#9FB4C8}

.tutcards{flex:1;min-height:0;overflow-y:auto;padding:2px 4px 10px 2px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;gap:8px;align-content:start;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tutcards .placeholder{grid-column:1/-1}

/* A move card, built on the summary's .smove: the move's own colour,
   a rail down the left, the numbers in a row, the price at the end. */
.tcard{--mc:var(--t-normal);position:relative;display:flex;flex-direction:column;gap:7px;
  padding:10px 11px 10px 15px;border-radius:var(--r-sm);overflow:hidden;
  background:linear-gradient(110deg,color-mix(in srgb,var(--mc) 22%,var(--ink)) 0%,var(--ink) 75%);
  border:1px solid color-mix(in srgb,var(--mc) 35%,var(--line));
  transition:transform .15s,border-color .15s}
.tcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mc)}
.tcard:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--mc) 70%,var(--line))}
.tcard.is-leaving{animation:tutLeave .4s ease-in forwards}
@keyframes tutLeave{to{opacity:0;transform:translateY(-10px) scale(.96)}}
.tcard__top{display:flex;align-items:center;gap:7px;min-width:0}
.tcard__n{flex:1;min-width:0;font-size:14px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard__stab{font-size:8.5px;font-weight:900;letter-spacing:.1em;padding:2px 6px;border-radius:99px;
  color:#16110A;background:linear-gradient(180deg,#FFE27A,var(--yellow))}
.tcard__row{display:flex;align-items:flex-end;gap:10px}
.tcard__nums{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0}
.tcard__num{display:flex;flex-direction:column;gap:1px}
.tcard__num em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.tcard__num b{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.tcard__go{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;height:32px;padding:0 12px;
  border:0;border-radius:9px;font:inherit;font-size:.78rem;font-weight:800;color:#16110A;cursor:pointer;
  background:linear-gradient(180deg,#FFDB4D,var(--yellow));
  box-shadow:0 3px 0 #9E7B00,0 6px 14px -6px rgba(255,203,5,.6);
  font-variant-numeric:tabular-nums;transition:transform .1s,box-shadow .1s,filter .15s}
.tcard__go img{width:20px;height:20px;margin-left:-4px}
.tcard__go:hover:not(:disabled){filter:brightness(1.07)}
.tcard__go:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #9E7B00}
.tcard__go:disabled{cursor:not-allowed;color:var(--txt-dim);background:var(--ink-3);box-shadow:none}
.tcard__go--tm{color:#fff;background:linear-gradient(180deg,#4B92D8,var(--blue-dk));
  box-shadow:0 3px 0 #123659,0 6px 14px -6px rgba(42,117,187,.7)}
.tcard__go--tm:active:not(:disabled){box-shadow:0 1px 0 #123659}
.tcard__foot{display:flex;align-items:center;gap:8px;min-width:0}
.tcard__from{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:.7rem;font-weight:700;
  color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard__from img{width:16px;height:16px}
.tcard__dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--fc)}
.tcard__more{margin-left:auto;padding:2px 0;border:0;background:none;font:inherit;font-size:.7rem;
  font-weight:700;color:var(--txt-dim);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(154,167,184,.4)}
.tcard__more:hover{color:var(--txt)}
/* What the move does, folded until asked for. Allowed to wrap. */
.tcard__d{display:none;margin:0;font-size:12px;line-height:1.5;color:var(--txt-dim)}
.tcard.is-open .tcard__d{display:block}

.tutempty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:40px 16px;text-align:center;color:var(--txt-dim);font-size:.84rem}
.tutempty img{width:48px;height:48px;opacity:.7}
.tutempty b{color:var(--txt);font-size:.95rem}

/* ── The sheet ───────────────────────────────────────── */
.tutsheet{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(6,8,11,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:tutFade .2s ease-out}
@keyframes tutFade{from{opacity:0}}
.tutsheet__card{container-type:inline-size;width:min(640px,100%);max-height:88dvh;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;padding:16px 16px 18px;border-radius:18px;
  background:var(--ink-2);border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.6);
  animation:tutSheet .32s cubic-bezier(.2,.9,.3,1.1)}
@keyframes tutSheet{from{transform:translateY(40px);opacity:0}}
.tutsheet__grab{display:none}
.tutsheet h3{margin:0;font:800 1.05rem/1.25 var(--display);text-wrap:balance}
.tutsheet p{margin:0;font-size:.82rem;line-height:1.45;color:var(--txt-dim)}
.tutsheet p b{color:var(--txt)}
.tutsheet__who{display:flex;align-items:center;gap:10px}
.tutsheet__who img{width:56px;height:56px;flex-shrink:0;object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.tutsheet .tcard--new{border-width:2px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mc) 50%,transparent),0 10px 26px -10px var(--mc)}
.tcard__ribbon{position:absolute;top:8px;right:-30px;transform:rotate(35deg);padding:2px 32px;
  font-size:8.5px;font-weight:900;letter-spacing:.14em;color:#16110A;background:var(--yellow)}
.tutvs{display:flex;align-items:center;gap:10px;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-dim)}
.tutvs::before,.tutvs::after{content:'';flex:1;height:1px;background:var(--line)}
.tutforget{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;gap:8px}
.tutforget .tcard{width:100%;text-align:left;font:inherit;color:var(--txt);cursor:pointer}
.tutforget .tcard.is-pick{border-color:var(--red-lt);box-shadow:0 0 0 3px rgba(255,78,78,.22)}
.tutforget .tcard.is-pick .tcard__n{text-decoration:line-through;
  text-decoration-color:var(--red-lt);text-decoration-thickness:2px}
.tcard__delta{flex-shrink:0;padding:1px 6px;border-radius:6px;font:700 10.5px var(--mono);
  background:rgba(255,255,255,.06)}
.tcard__delta.is-up{color:var(--ok)}
.tcard__delta.is-down{color:var(--red-lt)}
/* The receipt, as the PokéMart prints it. */
.tutreceipt{padding:11px 12px 15px;border-radius:4px 4px 0 0;
  font-family:var(--mono);font-size:.74rem;color:#2A2F38;background:#F4F1E8;
  -webkit-mask:radial-gradient(circle 5px at 5px 100%,transparent 4.5px,#000 5px) 0 0/10px 100% repeat-x;
          mask:radial-gradient(circle 5px at 5px 100%,transparent 4.5px,#000 5px) 0 0/10px 100% repeat-x}
.tutreceipt>div{display:flex;justify-content:space-between;gap:8px;line-height:1.6}
.tutreceipt>div>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tutreceipt>div>:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.tutreceipt__total{margin-top:5px;padding-top:5px;border-top:1px dashed rgba(0,0,0,.35);
  font-size:.86rem;font-weight:800}
.tutreceipt__after{color:#6B7280}
.tutsheet__acts{display:flex;gap:8px;flex-wrap:wrap}
.tutsheet__acts .btn{height:42px;padding:0 16px;font-weight:800}
.tutsheet__go{flex:1;border:0;color:#fff;
  background:linear-gradient(180deg,#FF3B3B,var(--red-dk));box-shadow:0 3px 0 #6E0606}
.tutsheet__go:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}

/* ── Locked ──────────────────────────────────────────── */
.tutseal{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:20px;text-align:center}
.tutseal__case{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(201,151,58,.35),var(--ink-3) 70%);
  border:2px solid color-mix(in srgb,var(--brass) 55%,transparent);box-shadow:0 0 40px -6px rgba(201,151,58,.45)}
.tutseal__case img{width:56px;height:56px;filter:grayscale(.5) brightness(.85)}
.tutseal h3{margin:0;font:800 1.15rem var(--display)}
.tutseal p{margin:0;max-width:44ch;font-size:.85rem;line-height:1.5;color:var(--txt-dim)}
.tutseal__badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tutseal__badges span{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--ink-3);border:1px solid var(--line)}
.tutseal__badges img{width:32px;height:32px;object-fit:contain}
.tutseal__badges span.is-missing{border-style:dashed}
.tutseal__badges span.is-missing img{filter:grayscale(1) brightness(.35)}
.tutseal__bar{width:min(300px,100%);height:8px;border-radius:99px;background:var(--ink-3);overflow:hidden}
.tutseal__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--yellow))}

/* ── Narrow windows ──────────────────────────────────── */
@container (max-width:760px){
  .tutcards{grid-template-columns:minmax(0,1fr)}
}
/* A phone: one column that the window scrolls, the team as a strip. */
@container (max-width:640px){
  .tutmain{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .tutside{overflow:visible}
  .tutteam{display:flex;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
  .tutteam li{flex:0 0 74px;scroll-snap-align:start}
  .tuthero{min-height:0;padding:14px 12px 12px}
  .tuthero__bubble{font-size:.78rem}
  /* The wallet gets a row of its own: a rich trainer's seven digits
     do not fit a third of a phone. */
  .tutstats{width:100%}
  .tutstat{flex:1 1 0;min-width:0;padding:6px 8px}
  .tutstat--money{flex-basis:100%}
  .tutstat img{width:22px;height:22px}
  .tutstat b{font-size:13px}
  .tutcards{overflow:visible}
}
@media (max-width:640px){
  .tutor{height:auto}
  .tutsheet{align-items:flex-end;padding:0}
  .tutsheet__card{border-radius:18px 18px 0 0;border-bottom:0;max-height:90dvh;
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .tutsheet__grab{display:block;align-self:center;width:44px;height:4px;margin-top:-6px;
    border-radius:4px;background:var(--line)}
}
@container (max-width:520px){
  .tutforget{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .tuthero__photo,.tuthero__bubble.is-new,.tutstat.is-paid,.tutstat.is-paid img,.kmove.is-new,
  .tcard.is-leaving,.tutsheet,.tutsheet__card{animation:none}
}

/* ============================================================
   Route information
   The route as a place: its picture across the top, the road to the
   next one as a row of Poké Balls, whatever is moving the odds, and
   every species as a card lit in its types. Pages through the routes
   reached so far without travelling.
   ============================================================ */
.modal--rinfo{width:min(920px,100%)}
.modal--rinfo .modal__body{padding:0}

.rinfo{display:flex;flex-direction:column;min-height:100%}
.rinfo.is-busy .rinfo__body,.rinfo.is-busy .rinfo__heroin{opacity:.45;transition:opacity .2s}

/* The picture. */
.rinfo__hero{
  position:relative;overflow:hidden;flex-shrink:0;
  min-height:210px;display:flex;align-items:flex-end;
  background:linear-gradient(160deg,#2b5a3a,#16261c 70%);
}
.rinfo__hero.is-water,.rinfo__hero.is-deepsea{background:linear-gradient(160deg,#1f5f99,#0d2238 70%)}
.rinfo__hero.is-volcano{background:linear-gradient(160deg,#8a2e17,#2a0f08 70%)}
.rinfo__hero.is-cave,.rinfo__hero.is-urban{background:linear-gradient(160deg,#3a3f4a,#14171c 70%)}
.rinfo__hero.is-ice{background:linear-gradient(160deg,#6aa6c4,#1b3446 70%)}
.rinfo__hero.is-desert,.rinfo__hero.is-canyon{background:linear-gradient(160deg,#b0793a,#3a230f 70%)}
.rinfo__hero.is-ruins,.rinfo__hero.is-shrine{background:linear-gradient(160deg,#5b4a7a,#1c1628 70%)}
.rinfo__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:rinfoPan 900ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rinfoPan{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
.rinfo__shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,17,22,0) 20%,rgba(14,17,22,.55) 58%,var(--ink-2) 100%),
    linear-gradient(90deg,rgba(14,17,22,.55),transparent 55%);
}
.rinfo__heroin{position:relative;padding:20px 64px 16px 64px;width:100%;
  animation:rinfoUp .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes rinfoUp{from{opacity:0;transform:translateY(8px)}}
.rinfo__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.82)}
.rinfo__count{padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.16);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.rinfo__here{padding:2px 9px;border-radius:999px;color:#0b2416;background:var(--ok);
  letter-spacing:.08em;box-shadow:0 0 14px rgba(63,217,138,.5)}
.rinfo__name{margin:6px 0 0;font:800 clamp(26px,4.2vw,36px)/1.05 var(--display);
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.rinfo__terrain{margin:3px 0 0;font-size:14px;color:rgba(255,255,255,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.6)}
.rinfo__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rinfo__chip{padding:5px 10px;border-radius:999px;font-size:12px;color:var(--txt);
  background:rgba(14,17,22,.62);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rinfo__chip b{font:700 12.5px var(--display);color:var(--yellow);margin-right:2px}

.rinfo__nav{
  position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-34px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(14,17,22,.55);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .15s,transform .15s,opacity .15s;
}
.rinfo__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.rinfo__nav.is-prev{left:10px}
.rinfo__nav.is-next{right:10px}
.rinfo__nav:hover:not(:disabled){background:var(--red);transform:scale(1.07)}
.rinfo__nav:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.rinfo__nav:disabled{opacity:.25;cursor:default}

.rinfo__body{display:flex;flex-direction:column;gap:14px;padding:14px 18px 18px}

/* The road to the next route: one ball per catch it is waiting for. */
.rinfo__road{
  display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,rgba(255,203,5,.1),rgba(255,203,5,.02));
  border:1px solid rgba(255,203,5,.28);
}
.rinfo__road.is-done{background:linear-gradient(90deg,rgba(63,217,138,.1),rgba(63,217,138,.02));
  border-color:rgba(63,217,138,.32)}
.rinfo__roadtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rinfo__roadtxt b{display:flex;align-items:center;gap:6px;font:700 15px var(--display)}
.rinfo__roadtxt span{font-size:12px;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.rinfo__tick{width:18px;height:18px;fill:none;stroke:var(--ok);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.rinfo__balls{display:flex;flex-wrap:wrap;gap:3px}
.rinfo__ball{width:32px;height:32px;margin:-3px -2px;image-rendering:pixelated;
  filter:grayscale(1) brightness(.5);opacity:.55}
.rinfo__ball.is-on{filter:none;opacity:1;
  animation:rinfoBall .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes rinfoBall{from{transform:scale(.3) rotate(-90deg);opacity:0}}

/* What is moving the odds: the lead's ability, a Global Hunt. */
.rinfo__strip{
  position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--ink-3);border:1px solid var(--line);
}
.rinfo__strip.is-lead{border-color:rgba(91,140,255,.35);
  background:linear-gradient(90deg,rgba(91,140,255,.14),var(--ink-3) 70%)}
.rinfo__strip.is-event{border-color:rgba(255,203,5,.35);
  background:linear-gradient(90deg,rgba(238,21,21,.16),rgba(255,203,5,.06) 60%,var(--ink-3))}
.rinfo__stripart{width:72px;height:72px;margin:-10px -6px;object-fit:contain;image-rendering:pixelated;
  flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.rinfo__striptxt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:1px}
.rinfo__stripkey{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim)}
.rinfo__striphead{font:700 16px var(--display)}
.rinfo__striptxt p{margin:2px 0 0;font-size:13px;color:var(--txt-dim);line-height:1.45}
.rinfo__striptxt p b{color:var(--txt)}
.rinfo__stripico{width:30px;height:30px;image-rendering:pixelated;opacity:.85;flex-shrink:0}
.rinfo__hot{align-self:flex-start;margin-top:5px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:700;color:#2a1500;background:var(--yellow);
  box-shadow:0 0 16px rgba(255,203,5,.45)}
.rinfo__pools{display:flex;flex-wrap:wrap;gap:10px 16px}
.rinfo__pool{display:flex;flex-direction:column;gap:4px}
.rinfo__poolhead{font-size:11px;color:var(--txt-dim)}
.rinfo__pool.is-rare .rinfo__poolhead{color:var(--shiny)}
.rinfo__poolmons{display:flex;gap:4px}
.rinfo__pmon{position:relative;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
.rinfo__pool.is-rare .rinfo__pmon{border-color:rgba(255,213,74,.35)}
.rinfo__pmon > img:first-child{width:52px;height:52px;object-fit:contain;image-rendering:pixelated}
.rinfo__pball{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;image-rendering:pixelated}

/* The species. */
.rinfo__sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:10px}
.rinfo__sechead h4{margin:0;font:700 15px var(--display)}
.rinfo__filters{display:flex;gap:4px}
.rinfo__filter{padding:5px 11px;border-radius:999px;font-size:12px;cursor:pointer;
  color:var(--txt-dim);background:var(--ink-3);border:1px solid var(--line);
  transition:background .15s,color .15s,border-color .15s}
.rinfo__filter b{font-weight:700;color:var(--txt);margin-left:2px}
.rinfo__filter:hover:not(:disabled){color:var(--txt);border-color:var(--blue)}
.rinfo__filter.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.rinfo__filter.is-on b{color:#fff}
.rinfo__filter:disabled{opacity:.4;cursor:default}

.rinfo__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.rcard{
  --tc:var(--t-normal);--tc2:var(--tc);
  position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 11px 11px;
  border-radius:var(--r);overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 30%,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--tc2) 14%,var(--ink-3)),var(--ink-2));
  border:1px solid color-mix(in srgb,var(--tc) 32%,var(--line));
  animation:rinfoUp .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 40ms);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.rcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.45);
  border-color:color-mix(in srgb,var(--tc) 60%,var(--line))}
/* Still to find: lifted out of the grid rather than left to be
   spotted by a missing tick. */
.rcard.is-missing{box-shadow:inset 0 0 0 1px rgba(255,203,5,.35)}
.rcard.is-caught .rcard__art{filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.rcard.is-pulled{border-color:rgba(91,140,255,.7);
  box-shadow:0 0 0 1px rgba(91,140,255,.5),0 0 18px rgba(91,140,255,.3)}
.rcard__top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:20px}
.rcard__rar{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim)}
.rcard.is-uncommon .rcard__rar{color:#8fc1ff}
.rcard.is-rare .rcard__rar{color:var(--shiny)}
.rcard__got{display:flex;align-items:center;gap:2px;padding:0 7px 0 1px;border-radius:999px;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ok);background:rgba(63,217,138,.14);border:1px solid rgba(63,217,138,.3)}
.rcard__got img{width:20px;height:20px;margin:-2px 0;image-rendering:pixelated}
.rcard__need{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:2px 7px;border-radius:999px;color:var(--txt-dim);background:rgba(0,0,0,.3)}
.rcard__need.is-needed{color:#2a1500;background:var(--yellow);
  animation:rinfoPulse 2.4s ease-in-out infinite}
@keyframes rinfoPulse{50%{box-shadow:0 0 12px rgba(255,203,5,.55)}}
/* The sprites carry a lot of empty canvas, so they are drawn larger
   than their box and allowed to spill into the padding. */
.rcard__stage{height:90px;display:grid;place-items:center}
.rcard__art{width:124px;height:124px;margin:-17px 0;object-fit:contain;image-rendering:pixelated;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.rcard:hover .rcard__art{transform:scale(1.1)}
.rcard__name{margin:0;font:700 14.5px/1.15 var(--display);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard__types{display:flex;justify-content:center;gap:4px;min-height:16px}
.rcard__type{width:calc(50% - 2px);max-width:84px;height:auto;align-self:center}
.rcard__type.is-text{padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;
  color:#fff;background:var(--tc)}
.rcard__odds{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:2px}
.rcard__pct{font:800 19px var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}
.rcard__base{font-size:11px;color:var(--txt-dim);text-decoration:line-through;
  text-decoration-color:rgba(154,167,184,.5)}
.rcard__bar{height:4px;border-radius:99px;background:rgba(0,0,0,.35);overflow:hidden}
.rcard__bar i{display:block;height:100%;width:var(--w,0%);border-radius:99px;
  background:linear-gradient(90deg,var(--tc),var(--yellow));
  animation:rinfoBar .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 40ms + .15s)}
@keyframes rinfoBar{from{width:0}}

/* The rare things. */
.rinfo__odds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rinfo__odd{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line)}
.rinfo__odd img{width:32px;height:32px;image-rendering:pixelated;flex-shrink:0}
.rinfo__odd div{display:flex;flex-direction:column;min-width:0}
.rinfo__odd span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.rinfo__odd.is-shiny{border-color:rgba(255,213,74,.3)}
.rinfo__odd.is-shiny span{color:var(--shiny)}
.rinfo__odd.is-shadow{border-color:rgba(155,92,255,.32)}
.rinfo__odd.is-shadow span{color:var(--shadow)}
.rinfo__odd b{font:700 15px var(--display);font-variant-numeric:tabular-nums}
.rinfo__odd em{font-style:normal;font-size:11px;color:var(--ok)}
.rinfo__note{grid-column:1/-1;margin:0;font-size:12px;color:var(--txt-dim);line-height:1.5}

/* A route not reached yet, and the first paint. */
.rinfo__locked{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:34px 16px;text-align:center;color:var(--txt-dim)}
.rinfo__locked img{width:48px;height:48px;image-rendering:pixelated;opacity:.8}
.rinfo__locked b{font:700 16px var(--display);color:var(--txt)}
.rinfo__locked p{margin:0;font-size:13px;max-width:36ch}
.rinfo__hero.is-skel{background:linear-gradient(100deg,var(--ink-3) 30%,var(--ink-4) 50%,var(--ink-3) 70%);
  background-size:300% 100%;animation:rinfoSkel 1.2s linear infinite}
.rinfo__skel{height:120px;border-radius:var(--r-sm);
  background:linear-gradient(100deg,var(--ink-3) 30%,var(--ink-4) 50%,var(--ink-3) 70%);
  background-size:300% 100%;animation:rinfoSkel 1.2s linear infinite}
@keyframes rinfoSkel{from{background-position:100% 0}to{background-position:0 0}}

@media (max-width:620px){
  .rinfo__hero{min-height:178px}
  .rinfo__heroin{padding:16px 14px 12px}
  .rinfo__nav{top:14px;margin-top:0;width:36px;height:36px}
  .rinfo__nav.is-prev{left:auto;right:52px}
  .rinfo__nav.is-next{right:10px}
  .rinfo__body{padding:12px 12px 16px;gap:12px}
  .rinfo__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rcard__stage{height:76px}
  .rcard__art{width:104px;height:104px;margin:-14px 0}
  .rinfo__odds{grid-template-columns:1fr}
  .rinfo__stripico{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rinfo__photo,.rinfo__heroin,.rcard,.rinfo__ball.is-on,.rcard__bar i,
  .rcard__need.is-needed,.rinfo__hero.is-skel,.rinfo__skel{animation:none}
  .rcard,.rcard__art,.rinfo__nav{transition:none}
}

/* ============================================================
   Guild emblems
   Over a hundred to choose from, shown a family at a time so the
   picker stays a picker rather than a wall.
   ============================================================ */
.gemblem{display:flex;flex-direction:column;gap:8px}
.gemblem__tabs{display:flex;flex-wrap:wrap;gap:4px}
.gemblem__tab{padding:4px 10px;border-radius:999px;font-size:.74rem;
  cursor:pointer;background:var(--ink-3);border:1px solid var(--line);
  color:var(--txt-dim);transition:background .15s,color .15s,border-color .15s}
.gemblem__tab:hover{color:var(--txt);border-color:var(--blue)}
.gemblem__tab.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.gemblem__grid{max-height:168px;overflow-y:auto;align-content:flex-start;
  padding:4px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm)}

/* ============================================================
   Daycare
   A yard with the player's own route behind it, two pens with the
   couple's hearts between them, and a nest where the egg sits inside
   a ring that fills as it nears hatching.
   ============================================================ */
.nurs{display:flex;flex-direction:column;max-width:760px;margin:0 auto}
.nurs [hidden]{display:none!important}
.nurs__yard,.nurs__pick{display:flex;flex-direction:column;gap:14px}
.nurs .is-entering{animation:nursIn .24s ease-out}
@keyframes nursIn{from{opacity:0;transform:translateY(6px)}}

/* The scene: wherever the player stands, behind a paddock fence. */
.nurs__scene{position:relative;display:grid;place-items:center;height:118px;
  padding:0 18px 22px;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#3E6E9C 0%,#5B8F5A 70%,#3D6B3A 100%)}
.nurs__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:brightness(.6) saturate(1.05);
  transform:scale(1.08);animation:scenePan 38s ease-in-out infinite alternate}
@keyframes scenePan{to{transform:scale(1.08) translateX(-3%)}}
.nurs__scene::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,22,.1),rgba(14,17,22,.78))}
.nurs__fence{position:absolute;left:0;right:0;bottom:0;height:30px;opacity:.75;
  background:
    linear-gradient(180deg,transparent 7px,#A97C47 7px,#A97C47 11px,transparent 11px,
      transparent 18px,#8C6234 18px,#8C6234 22px,transparent 22px),
    repeating-linear-gradient(90deg,transparent 0 30px,#B98A52 30px 36px,
      #7A5530 36px 37px,transparent 37px 52px)}
.nurs__intro{position:relative;margin:0;max-width:46ch;font-size:.86rem;
  line-height:1.5;text-align:center;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}

.nurs__msg{margin:0;padding:9px 13px;font-size:.8rem;border-radius:var(--r-sm);
  border:1px solid rgba(238,21,21,.45);background:rgba(238,21,21,.1);
  color:#FFB4B4}
.nurs__msg.is-in{animation:nursIn .22s ease-out}
.nurs__msg.is-info{border-color:rgba(42,117,187,.45);background:rgba(42,117,187,.1);
  color:var(--txt)}

/* ── Pens ───────────────────────────────────────────── */
.nurs__pair{display:grid;grid-template-columns:1fr 150px 1fr;gap:12px;
  align-items:stretch}
.nurs__pen{position:relative;min-height:204px;border-radius:var(--r);
  overflow:hidden;display:grid;
  background:
    radial-gradient(ellipse 70% 40% at 50% 92%,rgba(119,204,85,.16),transparent 70%),
    var(--glass);
  border:1px solid var(--glass-brd)}
.nurs__pen:empty{background:linear-gradient(100deg,var(--glass) 30%,
  var(--ink-3) 50%,var(--glass) 70%) 0 0/300% 100%;
  animation:penShimmer 1.4s linear infinite}
@keyframes penShimmer{to{background-position:-150% 0}}

/* An empty pen: a faded Poke Ball waiting for someone. */
.nurs__open{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;width:100%;min-height:204px;
  border:2px dashed rgba(255,255,255,.12);border-radius:var(--r);
  background:transparent;color:var(--txt-dim);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.nurs__open:hover,.nurs__open:focus-visible{border-color:var(--blue);
  background:rgba(42,117,187,.08);color:var(--txt);outline:none}
.nurs__lure{position:relative;display:grid;place-items:center;width:58px;height:58px;
  border-radius:50%;background:var(--ink);border:1px solid var(--line)}
.nurs__lure::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--blue);opacity:0;animation:lurePulse 2.4s ease-out infinite}
@keyframes lurePulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.nurs__lure img{width:42px;height:42px;image-rendering:pixelated;
  filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s,transform .3s}
.nurs__open:hover .nurs__lure img,.nurs__open:focus-visible .nurs__lure img{
  filter:none;opacity:1;animation:ballWiggle .6s ease-in-out}
@keyframes ballWiggle{25%{transform:rotate(-16deg)}60%{transform:rotate(12deg)}}
.nurs__hint{font-size:.8rem;font-weight:600}

/* A pen with someone in it. */
.nurs__mon{display:flex;flex-direction:column;align-items:center;gap:4px;
  height:100%;padding:12px 10px 12px}
.nurs__stage{position:relative;width:96px;height:96px;flex-shrink:0}
.nurs__disc{position:absolute;left:50%;bottom:8px;width:58px;height:12px;
  border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);
  animation:discBreath 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes discBreath{50%{transform:translateX(-50%) scale(.82);opacity:.7}}
.nurs__sprite{position:relative;width:96px;height:96px;object-fit:contain;
  image-rendering:pixelated;animation:monBob 2.6s ease-in-out infinite;
  animation-delay:var(--d,0s)}
@keyframes monBob{50%{transform:translateY(-5px)}}
.nurs__ball{position:absolute;right:-8px;bottom:4px;width:24px;height:24px;
  image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.nurs__flash{position:absolute;left:50%;top:55%;width:70px;height:70px;
  margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.6) 35%,transparent 70%)}

.nurs__mon.is-shiny .nurs__sprite{filter:drop-shadow(0 0 6px rgba(255,213,74,.55))}
.nurs__mon.is-shadow .nurs__sprite{filter:drop-shadow(0 0 7px rgba(155,92,255,.7))}
.nurs__mon.is-shiny .nurs__stage::after,
.nurs__card.is-shiny::after{content:'';position:absolute;top:8px;left:10px;
  width:12px;height:12px;background:var(--shiny);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:twinkle 1.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}
  50%{transform:scale(1) rotate(45deg);opacity:1}}

.nurs__name{display:flex;align-items:center;gap:4px;font-size:.92rem;font-weight:700}
.nurs__g{font-style:normal;font-weight:700}
.nurs__g--m{color:#6EA8FF}
.nurs__g--f{color:#FF7EB6}
.nurs__lv{font-size:.74rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.nurs__item{display:inline-flex;align-items:center;gap:4px;margin-top:2px;
  padding:2px 9px 2px 4px;border-radius:99px;font-size:.72rem;
  background:var(--ink);border:1px solid var(--line);color:var(--txt-dim)}
.nurs__item img{width:20px;height:20px;image-rendering:pixelated}
.nurs__item.is-key{border-color:rgba(255,203,5,.45);color:var(--yellow)}
.nurs__perk{font-size:.68rem;color:var(--txt-dim)}
.nurs__take{margin-top:auto}

/* Sent out: the ball drops in, opens with a flash, and out it comes. */
.nurs__pen.is-arriving .nurs__ball{animation:ballDrop .55s cubic-bezier(.3,1.4,.6,1) both}
@keyframes ballDrop{
  0%{transform:translate(-50px,-80px) scale(1.7);opacity:0}
  40%{opacity:1}
  100%{transform:none}}
.nurs__pen.is-arriving .nurs__flash{animation:penFlash .5s .3s ease-out both}
@keyframes penFlash{0%{opacity:.95;transform:scale(.2)}100%{opacity:0;transform:scale(1.7)}}
.nurs__pen.is-arriving .nurs__sprite{
  animation:monOut .5s .34s cubic-bezier(.34,1.56,.64,1) both,
            monBob 2.6s .9s ease-in-out infinite}
@keyframes monOut{from{transform:scale(0);filter:brightness(6);opacity:0}}
.nurs__pen.is-arriving .nurs__name,.nurs__pen.is-arriving .nurs__lv,
.nurs__pen.is-arriving .nurs__item,.nurs__pen.is-arriving .nurs__perk,
.nurs__pen.is-arriving .nurs__take{animation:nursIn .3s .55s ease-out both}

/* Called back: red, smaller, gone into the ball. */
.nurs__pen.is-leaving .nurs__sprite{animation:monIn .44s ease-in forwards}
@keyframes monIn{
  40%{filter:brightness(.7) sepia(1) saturate(6) hue-rotate(-40deg)}
  100%{transform:translate(30px,26px) scale(0);opacity:0;
    filter:brightness(.7) sepia(1) saturate(6) hue-rotate(-40deg)}}
.nurs__pen.is-leaving .nurs__disc,.nurs__pen.is-leaving .nurs__name,
.nurs__pen.is-leaving .nurs__lv,.nurs__pen.is-leaving .nurs__item,
.nurs__pen.is-leaving .nurs__perk,.nurs__pen.is-leaving .nurs__take{
  transition:opacity .3s;opacity:0}
.nurs__pen.is-busy{pointer-events:none}
.nurs__pen.is-busy .nurs__ball{animation:ballSpin .7s linear infinite}
.nurs__pen.is-busy .nurs__take{opacity:.5}
@keyframes ballSpin{to{transform:rotate(360deg)}}

/* ── The bond between them ──────────────────────────── */
.nurs__bond{display:flex;flex-direction:column;align-items:center;gap:9px;
  align-self:center;text-align:center}
.nurs__hearts{display:flex;gap:5px}
.nurs__heart{width:24px;height:22px;fill:rgba(255,255,255,.06);
  stroke:rgba(255,255,255,.2);stroke-width:1.2;
  transition:fill .35s,stroke .35s,filter .35s}
.nurs__heart.is-on{fill:#FF6B9A;stroke:#FF9BBC;
  filter:drop-shadow(0 0 6px rgba(255,107,154,.55))}
.nurs__heart.is-pop{animation:heartPop .5s calc(var(--i,0) * 130ms)
  cubic-bezier(.34,1.56,.64,1) both}
@keyframes heartPop{0%{transform:scale(.3)}60%{transform:scale(1.28)}100%{transform:scale(1)}}
.nurs__bond.is-3 .nurs__heart.is-on:not(.is-pop){animation:heartBeat 1.7s ease-in-out infinite}
.nurs__bond.is-3 .nurs__heart:nth-child(2){animation-delay:.12s}
.nurs__bond.is-3 .nurs__heart:nth-child(3){animation-delay:.24s}
@keyframes heartBeat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.16)}
  28%{transform:scale(1.04)}}
.nurs__say{position:relative;display:block;padding:8px 11px;font-size:.77rem;
  font-style:italic;line-height:1.4;color:var(--txt-dim);
  background:var(--ink-2);border:1px solid var(--line);border-radius:10px}
.nurs__say::before{content:'';position:absolute;top:-6px;left:50%;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:var(--ink-2);
  border-left:1px solid var(--line);border-top:1px solid var(--line)}
.nurs__say:empty{display:none}
.nurs__bond.is-3 .nurs__say{color:var(--txt);border-color:rgba(255,107,154,.4)}
.nurs__bond.is-3 .nurs__say::before{border-color:rgba(255,107,154,.4)}
.nurs__bond.is-2 .nurs__say{color:var(--txt)}

/* ── The nest ───────────────────────────────────────── */
.nurs__nest{position:relative;display:grid;grid-template-columns:140px 1fr;
  gap:18px;align-items:center;padding:14px 18px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd);
  transition:border-color .8s}
.nurs__nest.is-warm{border-color:rgba(238,129,48,.38)}
.nurs__cradle{position:relative;display:grid;place-items:center;
  width:132px;height:132px;margin:0 auto}
.nurs__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.nurs__track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:6}
.nurs__fill{fill:none;stroke:var(--yellow);stroke-width:6;stroke-linecap:round;
  transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1),stroke .5s,filter .5s}
.nurs__nest[data-tier="3"] .nurs__fill{stroke:var(--ok);
  filter:drop-shadow(0 0 5px rgba(63,217,138,.6))}

/* Straw, drawn rather than drawn from a sprite. */
.nurs__bed{position:absolute;left:50%;bottom:17px;width:82px;height:26px;
  transform:translateX(-50%);border-radius:50%;
  background:repeating-linear-gradient(100deg,#8A6236 0 3px,#B58A52 3px 6px,#6E4C28 6px 8px);
  box-shadow:inset 0 5px 7px rgba(0,0,0,.5),0 3px 6px rgba(0,0,0,.35)}
.nurs__warmth{position:absolute;inset:14px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(238,129,48,.5),transparent 66%);
  transition:opacity .8s}
.nurs__nest.is-warm .nurs__warmth{opacity:1;animation:flicker 2.3s ease-in-out infinite}
@keyframes flicker{50%{transform:scale(1.07);filter:brightness(1.2)}}
.nurs__bump{position:relative;z-index:1;display:block;transform-origin:50% 72%}
.nurs__egg{display:block;width:128px;height:128px;object-fit:contain;
  image-rendering:pixelated;transform-origin:50% 72%;
  animation:eggWobble 4.2s ease-in-out infinite}
.nurs__nest[data-tier="1"] .nurs__egg{animation-duration:3s}
.nurs__nest[data-tier="2"] .nurs__egg{animation-name:eggShake;animation-duration:1.9s}
.nurs__nest[data-tier="3"] .nurs__egg{animation-name:eggShake;animation-duration:1.05s}
@keyframes eggWobble{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-7deg)}
  92%{transform:rotate(7deg)}96%{transform:rotate(-3deg)}}
@keyframes eggShake{0%,58%,100%{transform:rotate(0)}64%{transform:rotate(-11deg)}
  70%{transform:rotate(11deg)}76%{transform:rotate(-9deg)}82%{transform:rotate(8deg)}
  90%{transform:rotate(-3deg)}}
.nurs__burst{position:absolute;left:50%;top:48%;z-index:2;width:120px;height:120px;
  margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.7) 30%,transparent 68%)}

.nurs__eggtxt{display:flex;flex-direction:column;gap:5px;min-width:0}
.nurs__eggtxt b{font-size:.98rem}
.nurs__eggtxt p{margin:0;font-size:.78rem;line-height:1.5;color:var(--txt-dim)}
.nurs__pct{font-size:.8rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.nurs__pct b{font-size:1.05rem;color:var(--yellow);transition:color .5s}
.nurs__nest[data-tier="3"] .nurs__pct b{color:var(--ok)}
.nurs__tip{font-size:.74rem;line-height:1.45;color:var(--txt-dim)}
.nurs__warm{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.74rem;line-height:1.45;color:#FFB37A;animation:nursIn .4s ease-out}
.nurs__warm img{height:18px;width:auto}
.nurs__from{display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  font-size:.74rem;color:var(--txt-dim)}
.nurs__parent{display:inline-flex;align-items:center;color:var(--txt)}
.nurs__parent img{width:32px;height:32px;margin:-6px -2px;image-rendering:pixelated}

/* No egg: an empty nest, and the shape of one to come. */
.nurs__nest.is-empty .nurs__eggtxt b{color:var(--txt-dim)}
.nurs__ghost{position:relative;width:128px;height:128px;image-rendering:pixelated;
  filter:brightness(0) invert(1);opacity:.06}
.nurs__nest.is-waiting .nurs__ghost{animation:ghostBreath 3s ease-in-out infinite}
@keyframes ghostBreath{50%{opacity:.17}}

/* An egg arrives: it drops into the straw and settles. */
.nurs__nest.is-landing .nurs__bump{animation:eggDrop .75s cubic-bezier(.3,.9,.4,1) both}
@keyframes eggDrop{
  0%{transform:translateY(-120px);opacity:0}
  55%{transform:translateY(0) scale(1.12,.86);opacity:1}
  72%{transform:translateY(-12px) scale(.96,1.05)}
  88%{transform:translateY(0) scale(1.03,.97)}
  100%{transform:none}}
.nurs__nest.is-landing .nurs__burst{animation:landGlint .7s .4s ease-out both}
@keyframes landGlint{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(1.3)}}

/* The hatch: it shakes, cracks, a flash — and someone is there. */
.nurs__hatch.is-hatching .nurs__egg{animation:eggHatch .16s linear infinite}
@keyframes eggHatch{25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}}
.nurs__hatch.is-hatching .nurs__bump::after{content:'';position:absolute;
  left:50%;top:44%;width:40px;height:16px;margin-left:-20px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M1 8l6-5 5 9 6-8 5 7 6-8 5 9 5-5' fill='none' stroke='%23233' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:crack 1.1s steps(3,end) forwards}
@keyframes crack{to{opacity:1}}
.nurs__hatch.is-hatching .nurs__burst{animation:hatchFlash 1.1s ease-in forwards}
@keyframes hatchFlash{0%,70%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1.5)}}
.nurs__hatch.is-born .nurs__egg{animation:bornPop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bornPop{from{transform:scale(.2);filter:brightness(6)}}
.nurs__hatch.is-born .nurs__burst{animation:flashOut .7s ease-out both}
@keyframes flashOut{from{opacity:1;transform:scale(1.5)}to{opacity:0;transform:scale(2)}}
.nurs__hatch.is-born .nurs__help{display:none}
.nurs__hatch.is-born .nurs__egghead{animation:nursIn .35s .2s ease-out both}
.nurs__hatch.is-born-shiny .nurs__cradle::before,
.nurs__hatch.is-born-shiny .nurs__cradle::after,
.nurs__hatch.is-born-shadow .nurs__cradle::before,
.nurs__hatch.is-born-shadow .nurs__cradle::after{content:'';position:absolute;z-index:3;
  width:16px;height:16px;background:var(--shiny);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:twinkle 1.2s ease-in-out infinite}
.nurs__hatch.is-born-shiny .nurs__cradle::before,
.nurs__hatch.is-born-shadow .nurs__cradle::before{top:18px;left:20px}
.nurs__hatch.is-born-shiny .nurs__cradle::after,
.nurs__hatch.is-born-shadow .nurs__cradle::after{top:34px;right:16px;animation-delay:.5s}
.nurs__hatch.is-born-shadow .nurs__cradle::before,
.nurs__hatch.is-born-shadow .nurs__cradle::after{background:var(--shadow)}

/* The same egg in the hatch pop-up (Reward.hatch), whatever screen the
   click came from. */
.nurs__hatchcard{display:flex;flex-direction:column;align-items:center}
.nurs__kicker{margin:0;font-size:.86rem;font-weight:800;letter-spacing:.08em;
  color:var(--yellow);transition:opacity .3s}
.nurs__hatchcard.is-born .nurs__kicker{opacity:0}
.nurs__hatchcard .nurs__cradle{width:150px;height:150px;margin:2px auto 8px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,203,5,.14),transparent 66%)}
.nurs__hatchcard.is-born .nurs__cradle{
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 66%)}
.nurs__hatchcard .nurs__egg{animation:eggShake 1.05s ease-in-out infinite}
.nurs__hatchnote{min-height:1.2em}
/* What it rolled and the buttons wait for the reveal: a player still
   clicking must not close the pop-up before seeing what hatched. */
.nurs__hatchcard .nurs__after{display:grid;grid-template-rows:0fr;align-self:stretch;
  opacity:0;pointer-events:none;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .35s .1s}
.nurs__hatchcard.is-ready .nurs__after{grid-template-rows:1fr;opacity:1;pointer-events:auto}
.nurs__afterin{display:flex;flex-direction:column;align-items:center;min-height:0;
  overflow:hidden;padding:2px 3px}
.nurs__afterin>.hatchstats{align-self:stretch}

/* ── The picker ─────────────────────────────────────── */
.nurs__pickhead{display:flex;align-items:center;gap:12px}
.nurs__pickhead h3{margin:0;font-size:1rem}
.nurs__pickbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nurs__tabs{display:inline-flex;gap:2px;padding:3px;border-radius:99px;
  background:var(--ink);border:1px solid var(--line)}
.nurs__tab{padding:6px 15px;border-radius:99px;font-size:.8rem;font-weight:600;
  color:var(--txt-dim);background:transparent;border:0;cursor:pointer;
  transition:background .2s,color .2s}
.nurs__tab:hover{color:var(--txt)}
.nurs__tab.is-on{background:var(--red);color:#fff}
.nurs__tab span{margin-left:6px;font-size:.72rem;opacity:.75;
  font-variant-numeric:tabular-nums}
.nurs__search{flex:1;min-width:140px;padding:7px 14px;border-radius:99px;
  font:inherit;font-size:.82rem;color:var(--txt);background:var(--ink);
  border:1px solid var(--line);transition:border-color .2s}
.nurs__search:focus{outline:none;border-color:var(--blue)}
.nurs__found{font-size:.74rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.nurs__partner{display:flex;align-items:center;gap:10px;margin:0;padding:6px 12px;
  font-size:.78rem;line-height:1.45;color:var(--txt-dim);border-radius:var(--r-sm);
  background:rgba(42,117,187,.1);border:1px solid rgba(42,117,187,.35)}
.nurs__partner img{width:44px;height:44px;margin:-6px 0;image-rendering:pixelated;
  flex-shrink:0}
.nurs__partner b{color:var(--txt)}
.nurs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.nurs__card{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:6px 6px 10px;min-width:0;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-brd);color:var(--txt);
  cursor:pointer;transition:transform .15s,border-color .15s,background .15s,opacity .2s}
.nurs__card:hover,.nurs__card:focus-visible{transform:translateY(-2px);
  border-color:var(--blue);background:var(--ink-3);outline:none}
.nurs__card img{width:84px;height:84px;margin:-8px 0 -10px;object-fit:contain;
  image-rendering:pixelated}
.nurs__card:hover img{animation:monHop .45s ease-out}
@keyframes monHop{40%{transform:translateY(-6px)}}
.nurs__card.is-shiny img{filter:drop-shadow(0 0 5px rgba(255,213,74,.55))}
.nurs__card.is-shadow img{filter:drop-shadow(0 0 6px rgba(155,92,255,.7))}
.nurs__cardname{display:flex;align-items:center;justify-content:center;gap:3px;
  max-width:100%;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden}
.nurs__cardlv{font-size:.7rem;color:var(--txt-dim)}
.nurs__card.is-unlikely{opacity:.42}
.nurs__card.is-unlikely:hover,.nurs__card.is-unlikely:focus-visible{opacity:.85}
.nurs__card.is-ditto{border-color:rgba(185,139,216,.5);
  background:linear-gradient(180deg,rgba(185,139,216,.12),transparent 70%),var(--glass)}
.nurs__ribbon{margin-top:3px;padding:1px 7px;border-radius:99px;font-size:.62rem;
  font-weight:700;letter-spacing:.03em;color:#E2C8F5;background:rgba(185,139,216,.2)}
.nurs__card.is-busy{pointer-events:none}
.nurs__card.is-busy img{animation:none;opacity:.35}
.nurs__card.is-busy::before{content:'';position:absolute;top:22px;left:50%;
  width:30px;height:30px;margin-left:-15px;z-index:1;image-rendering:pixelated;
  background:url(../sprites/items/poke-ball.png) center/contain no-repeat;
  animation:ballSpin .7s linear infinite}
.nurs__none{grid-column:1/-1;margin:0;padding:30px 10px;text-align:center;
  font-size:.84rem;color:var(--txt-dim)}

@media (max-width:600px){
  .nurs__scene{height:96px}
  .nurs__intro{font-size:.8rem}
  .nurs__pair{grid-template-columns:1fr 1fr;gap:8px;
    grid-template-areas:"a b" "bond bond"}
  .nurs__pen[data-pen="0"]{grid-area:a}
  .nurs__pen[data-pen="1"]{grid-area:b}
  .nurs__bond{grid-area:bond}
  .nurs__pen,.nurs__open{min-height:180px}
  .nurs__stage,.nurs__sprite{width:80px;height:80px}
  .nurs__nest{grid-template-columns:1fr;justify-items:center;text-align:center}
  .nurs__eggtxt{align-items:center}
  .nurs__from{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .nurs *,.nurs *::before,.nurs *::after,
  .nurs__hatchcard *,.nurs__hatchcard *::before,.nurs__hatchcard *::after{animation:none!important;
    transition:none!important}
}

/* ============================================================
   Guild Raids
   The boss, the countdown, who has entered, the run of fifty, and
   the token shop.
   ============================================================ */
.raid{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.raid__tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.raid__tab{padding:6px 13px;border-radius:999px;font-size:.8rem;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line);color:var(--txt-dim);
  transition:background .15s,color .15s,border-color .15s}
.raid__tab:hover{color:var(--txt);border-color:var(--shadow)}
.raid__tab.is-on{background:var(--shadow);border-color:var(--shadow);color:#fff}
.raid__progress{margin-left:auto;font-size:.78rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.raid__body{flex:1;min-height:0;overflow-y:auto;display:flex;
  flex-direction:column;gap:12px}

.raid__boss{display:flex;gap:15px;align-items:center;padding:15px;
  background:linear-gradient(135deg,rgba(155,92,255,.12),transparent 60%),
    var(--glass);
  border:1px solid rgba(155,92,255,.32);border-radius:var(--r)}
.raid__bossimg{width:104px;height:104px;object-fit:contain;
  image-rendering:pixelated;flex:0 0 auto}
.raid__bossinfo{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.raid__no{font-size:.7rem;color:var(--shadow);text-transform:uppercase;
  letter-spacing:.06em}
.raid__bossinfo b{font-size:1.25rem}
.raid__types{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.raid__lv{font-size:.76rem;color:var(--txt-dim)}
.raid__hpbar{height:11px;border-radius:99px;background:var(--ink);
  overflow:hidden;margin-top:4px;border:1px solid var(--line)}
.raid__hpbar i{display:block;height:100%;
  background:linear-gradient(90deg,var(--red),var(--red-lt));transition:width .4s}
.raid__hp{font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--txt)}
.raid__moves{font-size:.74rem;color:var(--txt-dim);text-transform:capitalize}
.raid__reward{font-size:.74rem;color:var(--yellow)}

.raid__clock{padding:9px;border-radius:var(--r-sm);text-align:center;
  font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--ink-2);border:1px solid var(--line);color:var(--txt)}
.raid__clock.is-ready{border-color:var(--ok);color:var(--ok);
  background:rgba(63,217,138,.1)}

/* What the team would do to the boss, read before entering.

   Colour carries the one thing worth seeing at a glance: green is a
   Pokemon worth bringing, red is one that cannot help. The wording
   says it too - colour alone is not something to rely on. */
.raidprev{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line)}
.raidprev h4{margin:0 0 7px;font-size:.85rem}
.raidprev__row{display:grid;
  grid-template-columns:26px 1fr auto auto 62px;
  align-items:center;gap:8px;padding:3px 0;font-size:.78rem}
.raidprev__ico{width:26px;height:26px;object-fit:contain;
  image-rendering:pixelated}
.raidprev__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raidprev__name em{font-style:normal;color:var(--txt-dim);font-size:.68rem;
  margin-left:5px}
.raidprev__move{color:var(--txt-dim);font-size:.7rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11ch}
.raidprev__mult{font-size:.66rem;font-weight:800;padding:1px 6px;
  border-radius:3px;background:var(--ink-3);color:var(--txt-dim)}
.raidprev__hit{text-align:right;font-variant-numeric:tabular-nums;
  font-weight:700}

.raidprev__row.is-super .raidprev__mult{background:#77CC55;color:#12240b}
.raidprev__row.is-super .raidprev__hit{color:#77CC55}
.raidprev__row.is-weak .raidprev__mult{background:#5a4a2a;color:#ffcc80}
.raidprev__row.is-none{opacity:.55}
.raidprev__row.is-none .raidprev__mult{background:#7a2f2f;color:#ffd7d7}

.raidprev__sum{margin:7px 0 0;font-size:.78rem}
.raidprev__fine{margin:2px 0 0;font-size:.66rem;color:var(--txt-dim)}

/* Narrow: the move name is the first thing to go - the multiplier
   and the number are what the decision turns on. */
@media (max-width:520px){
  .raidprev__row{grid-template-columns:24px 1fr auto 56px}
  .raidprev__move{display:none}
}

.raid__signups h4{margin:0 0 6px;font-size:.85rem}
.raid__who{display:flex;flex-wrap:wrap;gap:5px}
.raid__member{padding:4px 10px;border-radius:999px;font-size:.76rem;
  background:var(--ink-3);border:1px solid var(--line)}

.raid__act{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.raid__act .btn{width:100%}
.raid__note{margin:0;font-size:.77rem;color:var(--txt-dim);line-height:1.45;
  text-align:center}

/* The run of fifty */
.raid__road{display:flex;flex-direction:column;gap:4px}
.raid__step{display:grid;grid-template-columns:30px 40px 1fr auto auto;
  align-items:center;gap:9px;padding:6px 10px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line);opacity:.6}
.raid__step.is-done{opacity:1;border-color:var(--ok)}
.raid__step.is-next{opacity:1;border-color:var(--yellow);
  background:rgba(255,203,5,.06)}
.raid__stepno{font-size:.74rem;color:var(--txt-dim);text-align:center;
  font-variant-numeric:tabular-nums}
.raid__step img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.raid__stepname{display:flex;flex-direction:column;gap:1px;font-size:.83rem;
  min-width:0}
.raid__stepname em{font-style:normal;font-size:.7rem;color:var(--txt-dim)}
.raid__steptok{font-size:.76rem;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.raid__tick{font-size:.8rem}

/* Token shop */
.raid__shop{display:flex;flex-direction:column;gap:8px}
.raid__tokens{display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r)}
.raid__tokens img{width:26px;height:26px;image-rendering:pixelated}
.raid__tokens b{font-size:1.1rem;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.raid__tokens span{font-size:.78rem;color:var(--txt-dim)}
.raid__up{display:flex;align-items:center;gap:12px;padding:11px 13px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.raid__up.is-maxed{opacity:.6;border-color:var(--ok)}
.raid__upinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.raid__upinfo b{font-size:.88rem}
.raid__upinfo p{margin:0;font-size:.76rem;color:var(--txt-dim);line-height:1.4}
.raid__uplv{font-size:.72rem;color:var(--txt-dim)}
.raid__upmax{font-size:.76rem;color:var(--ok)}

@media (max-width:640px){
  .raid__boss{flex-direction:column;text-align:center}
  .raid__step{grid-template-columns:26px 32px 1fr auto}
  .raid__tick{display:none}
}

/* ============================================================
   Options
   Rows of switches, sliders and small choice groups.
   ============================================================ */
.opt{display:flex;flex-direction:column;gap:18px}
.opt__sec{display:flex;flex-direction:column;gap:2px}
.opt__sec h3{margin:0 0 6px;font-size:.9rem;color:var(--txt);
  padding-bottom:5px;border-bottom:1px solid var(--line)}

.opt__row{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:9px 2px}
.opt__label{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt__label b{font-size:.86rem;font-weight:500}
.opt__label span{font-size:.74rem;color:var(--txt-dim);line-height:1.4}

/* Switch */
.opt__switch{flex:0 0 auto;width:44px;height:25px;padding:0;cursor:pointer;
  border-radius:99px;background:var(--ink-3);border:1px solid var(--line);
  position:relative;transition:background .18s,border-color .18s}
.opt__switch.is-on{background:var(--ok);border-color:var(--ok)}
.opt__knob{position:absolute;top:2px;left:2px;width:19px;height:19px;
  border-radius:50%;background:var(--txt-dim);transition:transform .18s,background .18s}
.opt__switch.is-on .opt__knob{transform:translateX(19px);background:#fff}

/* Slider */
.opt__slide{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.opt__slide input[type=range]{width:140px;accent-color:var(--blue);cursor:pointer}
.opt__pct{font-size:.76rem;color:var(--txt-dim);min-width:38px;text-align:right;
  font-variant-numeric:tabular-nums}

/* Choice group */
.opt__choice{display:flex;gap:4px;flex:0 0 auto}
.opt__opt{padding:5px 11px;border-radius:var(--r-sm);font-size:.76rem;
  cursor:pointer;background:var(--ink-3);border:1px solid var(--line);
  color:var(--txt-dim);transition:background .15s,color .15s,border-color .15s}
.opt__opt:hover{color:var(--txt);border-color:var(--blue)}
.opt__opt.is-on{background:var(--blue);border-color:var(--blue);color:#fff}

.opt__acct{display:flex;flex-direction:column;gap:9px;padding:12px;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r)}
.opt__acct p{margin:0;font-size:.82rem}
.opt__acct em{font-style:normal;color:var(--txt-dim);font-size:.76rem}
.opt__acctbtns{display:flex;gap:8px;flex-wrap:wrap}
.opt__note{font-size:.74rem;color:var(--txt-dim);line-height:1.45}

.msg__at{color:var(--txt-dim);font-size:10px;font-variant-numeric:tabular-nums;
  opacity:.75}

@media (max-width:520px){
  .opt__row{flex-direction:column;align-items:flex-start;gap:7px}
  .opt__slide input[type=range]{width:100%}
  .opt__slide{width:100%}
}

/* ── What the display settings actually do ─────────────
   Set as classes on <html> by js/options.js, so one switch reaches
   every screen without each one having to ask. */
html.opt-no-anim *,
html.opt-no-anim *::before,
html.opt-no-anim *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
html.opt-smooth img{image-rendering:auto!important}
html.opt-bg-off .emerald{display:none}
html.opt-bg-off body{background:var(--ink)}
html.opt-bg-still .emerald__layer,
html.opt-bg-still .emerald__sprite,
html.opt-bg-still .emerald__runner{animation:none!important}
html.opt-compact .team__slots{gap:3px}
html.opt-compact .slot,html.opt-compact .team__pc,html.opt-compact .team__bag{width:clamp(36px,5.2vh,48px);height:clamp(36px,5.2vh,48px)}

/* ── A trainer's remaining Pokémon ─────────────────────
   A row of balls on their card: filled for one still standing, hollow
   for one that is down. It is the only thing the player learns about
   the roster before it is sent out. */
.bcard__team{display:flex;gap:4px;margin-top:5px}
/* Real Poké Balls rather than drawn dots: the sprite library has
   one, and the house rule is to use it. A spent ball is greyed and
   faded rather than removed, so the row keeps its length and the
   size of the fight stays readable. */
.teamdot{width:13px;height:13px;object-fit:contain;
  image-rendering:pixelated;display:block;
  transition:filter .25s,opacity .25s}
.teamdot.is-out{filter:grayscale(1) brightness(.6);opacity:.4}
/* The balls say which are left; the number says how many, which the
   row alone stops conveying past three or four. */
.teamdots{display:inline-flex;gap:4px;align-items:center}
.teamcount{margin-left:7px;font-size:.68rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}

/* ── Trainers on the battle field ──────────────────────
   Shown while they send a Pokémon out, then gone. Leader artwork does
   not exist yet, so their side falls back to a marked silhouette
   rather than borrowing somebody else's sprite. */
/* Anchored to the field, not to a side: the opposing trainer belongs
   at the top right where their Pokemon is, and the player's at the
   bottom left. The first version was absolute inside an unpositioned
   parent, so both fell to the bottom-left corner of the whole field. */
.btrainer{position:absolute;z-index:6;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;transition:opacity .35s ease,transform .35s ease}
.btrainer--foe{top:4%;right:8%;transform:translateX(40px)}
.btrainer--me{bottom:16%;left:8%;transform:translateX(-40px)}
.btrainer.is-in{opacity:1;transform:translateX(0)}
.btrainer img{width:96px;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.btrainer__name{font-size:.72rem;color:var(--txt);padding:2px 8px;
  border-radius:99px;background:rgba(0,0,0,.55);white-space:nowrap}

/* No artwork: a silhouette that says so rather than a wrong face. */
.btrainer.is-placeholder img{display:none}
.btrainer.is-placeholder::before{content:'';display:block;width:78px;height:104px;
  border-radius:38px 38px 12px 12px;
  background:linear-gradient(180deg,var(--ink-3),var(--ink));
  border:1px dashed var(--line)}

/* Sending a Pokemon out: the ball the trainer actually throws.
   Until now only the trainer leaned forward and the Pokemon simply
   appeared, so there was no throw to see. The ball arcs from the
   thrower to where the Pokemon will stand, bursts, and is gone —
   the sprite fades in underneath it via `.is-spawn`.

   Two directions because the two sides throw towards each other:
   the opponent's ball travels left and down, the player's right and
   up towards the far side of the field. */
.sendball{position:absolute;width:30px;height:30px;z-index:7;
  pointer-events:none;opacity:0}
.sendball img{width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
/* No sprite on disk: draw one, as the catch ball does. */
.sendball.is-css::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,#EE1515 0 47%,#1a1a1a 47% 53%,#f4f4f4 53% 100%);
  border:2px solid #1a1a1a;box-shadow:0 3px 6px rgba(0,0,0,.5)}

.sendball--foe{top:12%;right:14%}
.sendball--me{bottom:26%;left:14%}
.sendball--foe.is-fly{animation:sendArcFoe .38s cubic-bezier(.35,-.25,.55,1) both}
.sendball--me.is-fly{animation:sendArcMe .38s cubic-bezier(.35,-.25,.55,1) both}
@keyframes sendArcFoe{
  0%{transform:translate(0,0) rotate(0) scale(.6);opacity:0}
  12%{opacity:1}
  100%{transform:translate(-58px,86px) rotate(540deg) scale(1);opacity:1}
}
@keyframes sendArcMe{
  0%{transform:translate(0,0) rotate(0) scale(.6);opacity:0}
  12%{opacity:1}
  100%{transform:translate(74px,-96px) rotate(540deg) scale(1);opacity:1}
}

/* It opens: a white burst, then nothing. */
.sendball.is-burst{animation:sendBurst .26s ease-out forwards}
@keyframes sendBurst{
  0%{filter:brightness(1);transform:scale(1);opacity:1}
  40%{filter:brightness(3.4);transform:scale(1.5);opacity:1}
  100%{filter:brightness(4);transform:scale(2.2);opacity:0}
}

/* The throw: a quick lean before the Pokémon appears. */
.btrainer.is-throw{animation:btThrow .34s ease-in-out}
@keyframes btThrow{
  40%{transform:translateY(-5px) scale(1.04)}
  100%{transform:translateY(0) scale(1)}
}
.btrainer--foe.is-out{opacity:0;transform:translateX(60px)}
.btrainer--me.is-out{opacity:0;transform:translateX(-60px)}

/* Whether a wild species is already in the Pokédex. */
.bcard__caught{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 7px;border-radius:99px;border:1px solid var(--line);
  color:var(--txt-dim)}
.bcard__caught.is-caught{color:var(--ok);border-color:var(--ok);
  background:rgba(63,217,138,.12)}

@media (max-width:640px){
  .btrainer img{width:68px}
  .btrainer.is-placeholder::before{width:56px;height:76px}
}

/* Raids are reached from inside the Guild Hall, so they need a way back. */
.raid__back{width:100%;margin-top:12px}

/* ============================================================
   Catching
   A ball arcs in, draws the Pokémon down into itself, drops, rocks
   once per wobble, then either clicks shut with a scatter of stars or
   bursts open in a puff of dust.
   ============================================================ */
.catchball{position:absolute;left:50%;top:38%;width:38px;height:38px;
  margin:-19px 0 0 -19px;z-index:5;pointer-events:none}
/* The ball lives inside .bmon--foe so it can be positioned over the
   Pokemon, which also means `.bside--foe .bmon img` applies to it —
   and that rule sizes a Pokemon, up to 195px. Same specificity, but it
   is written later in the file, so it won a ball nearly as big as the
   Pokemon it was being thrown at. Named through .catchball so this
   wins on specificity rather than on which line happens to come
   last. */
.catchball img,.bside--foe .catchball img{
  width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
/* No sprite on disk: draw one. */
.catchball.is-css::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,#EE1515 0 47%,#1a1a1a 47% 53%,#f4f4f4 53% 100%);
  border:2px solid #1a1a1a;box-shadow:0 3px 6px rgba(0,0,0,.5)}

/* Thrown in from the player's corner. */
.catchball.is-throw{animation:ballArc .46s cubic-bezier(.3,-.4,.5,1) both}
@keyframes ballArc{
  0%{transform:translate(-260px,190px) rotate(0) scale(.7);opacity:0}
  15%{opacity:1}
  100%{transform:translate(0,0) rotate(720deg) scale(1)}
}

/* The moment it opens and pulls the Pokémon in. */
.catchball.is-open{animation:ballFlash .3s ease-out both}
@keyframes ballFlash{
  0%{filter:brightness(1)}
  50%{filter:brightness(2.6)}
  100%{filter:brightness(1)}
}
.bmon img.is-absorbed{animation:monAbsorb .32s ease-in forwards}
@keyframes monAbsorb{
  0%{transform:scale(1);opacity:1;filter:none}
  60%{filter:brightness(3) saturate(0)}
  100%{transform:scale(.05) translateY(24px);opacity:0;
       filter:brightness(3) saturate(0)}
}

/* It drops to the ground and settles. */
.catchball.is-fall{animation:ballFall .36s cubic-bezier(.5,0,.7,1) forwards}
@keyframes ballFall{
  0%{transform:translateY(0)}
  70%{transform:translateY(52px)}
  85%{transform:translateY(44px)}
  100%{transform:translateY(52px)}
}
.catchball.is-rest{transform:translateY(52px)}

/* One rock per wobble. */
.catchball.is-wobble{animation:ballWobble .52s ease-in-out}
@keyframes ballWobble{
  0%,100%{transform:translateY(52px) rotate(0)}
  25%{transform:translateY(52px) rotate(-24deg)}
  75%{transform:translateY(52px) rotate(24deg)}
}

/* Caught: a click, a settle, and stars. */
.catchball.is-caught{animation:ballClick .5s ease-out}
@keyframes ballClick{
  0%{transform:translateY(52px) scale(1);filter:brightness(1)}
  30%{transform:translateY(52px) scale(1.18);filter:brightness(2.4)}
  100%{transform:translateY(52px) scale(1);filter:brightness(1)}
}
.catchstars{position:absolute;inset:0}
.catchstars i{position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 6px var(--yellow);
  animation:starOut .65s ease-out forwards;
  transform:rotate(var(--a)) translateX(0)}
@keyframes starOut{
  0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(1)}
  100%{opacity:0;transform:rotate(var(--a)) translateX(46px) scale(.3)}
}

/* Broke free: the ball bursts and throws up dust. */
.catchball.is-break{animation:ballBreak .38s ease-out forwards}
@keyframes ballBreak{
  0%{transform:translateY(52px) scale(1);opacity:1;filter:brightness(1)}
  40%{transform:translateY(52px) scale(1.3);filter:brightness(2.2)}
  100%{transform:translateY(52px) scale(.4);opacity:0}
}
.catchdust{position:absolute;inset:0}
.catchdust i{position:absolute;left:50%;top:60%;width:13px;height:13px;
  margin:-6.5px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,214,190,.95),rgba(226,214,190,0) 70%);
  animation:dustOut .55s ease-out forwards;
  transform:rotate(var(--a)) translateX(0)}
@keyframes dustOut{
  0%{opacity:.9;transform:rotate(var(--a)) translateX(0) scale(.5)}
  100%{opacity:0;transform:rotate(var(--a)) translateX(38px) scale(1.9)}
}
.bmon img.is-escaped{animation:monEscape .42s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes monEscape{
  0%{transform:scale(.05) translateY(24px);opacity:0;filter:brightness(3)}
  100%{transform:scale(1) translateY(0);opacity:1;filter:none}
}

@media (prefers-reduced-motion:reduce){
  .catchball,.catchball *,.bmon img.is-absorbed,.bmon img.is-escaped{
    animation:none!important}
}


/* ============================================================
   Mining Site & Fishing Spot
   Two places the crew works, built the same way: a scene with the
   Pokemon on the job, the crate it fills, and each site's own corner
   (the Fossil Lab and the Ore Collector; the tackle box).

   The two backdrops are pixel art — a blue crystal cavern and a
   moonlit lake — so everything drawn over them is kept blocky and
   pixelated rather than soft, and the accent of each site is taken
   from its picture: crystal cyan underground, moonlight on the water.
   ============================================================ */
.site{display:flex;flex-direction:column;gap:14px;max-width:1000px;margin:0 auto;
  --accent:#7FD8FF;--accent-2:#3E8CFF;--accent-rgb:127,216,255;
  --warm:#FFB55E}
.site--fish{--accent:#BFE3FF;--accent-2:#3399FF;--accent-rgb:150,205,255}
.site [hidden]{display:none!important}

.site__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:900px){
  .site__cols{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
}
.site__main,.site__side{display:flex;flex-direction:column;gap:14px;min-width:0}
.site__head{display:flex;gap:11px;align-items:flex-start;margin:0 0 12px}
.site__head img{width:34px;height:34px;object-fit:contain;flex:0 0 auto;
  image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.site__head h4{margin:0;font-size:.95rem;letter-spacing:.01em}
.site__head p{margin:2px 0 0;font-size:.76rem;color:var(--txt-dim);line-height:1.45}

/* Every panel below the scene is the same card. */
.work__crate,.work__haul,.work__crew,.workpick,.mlab,.orebuy,.tackle{
  position:relative;padding:14px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd)}

/* ── The scenes ─────────────────────────────────────── */
.mscene,.fscene{position:relative;height:236px;border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  border:1px solid rgba(var(--accent-rgb),.22);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.4)}
.mscene__bg,.fscene__bg{position:absolute;inset:0;z-index:-3;
  image-rendering:pixelated;animation:scenePan 44s ease-in-out infinite alternate}
.mscene{background:linear-gradient(180deg,#132044,#0a1128)}
.mscene__bg{background:url('../sprites/mine/mine.jpg') center 62%/cover no-repeat;
  filter:brightness(.72) saturate(1.1)}
.fscene{background:linear-gradient(180deg,#0f2a4d,#081a30)}
.fscene__bg{background:url('../sprites/fishing/lake.jpg') center 72%/cover no-repeat;
  filter:brightness(.8) saturate(1.05)}
.mscene::after,.fscene::after{content:'';position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 75% 85% at 50% 55%,transparent 45%,rgba(4,8,20,.6) 100%),
    linear-gradient(180deg,rgba(4,8,20,0) 55%,rgba(4,8,20,.7) 100%)}

/* The badges along the top. */
.mscene__hud,.fscene__hud{position:absolute;top:10px;left:10px;right:10px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  flex-wrap:wrap;pointer-events:none}
.mscene__badge{display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px 4px 5px;border-radius:999px;pointer-events:auto;
  background:rgba(6,10,24,.66);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.74rem;color:#fff;line-height:1.2}
.mscene__badge:empty{display:none}
.mscene__badge img{width:26px;height:26px;object-fit:contain;
  image-rendering:pixelated}
.mscene__badge b{color:var(--accent);font-variant-numeric:tabular-nums}
.mscene__badge em{display:block;font-style:normal;font-size:.64rem;
  color:#9fe6b9}
.mscene__badge span{display:flex;flex-direction:column}
.mscene__fossil.is-on{border-color:rgba(63,217,138,.6);
  box-shadow:0 0 0 0 rgba(63,217,138,.5);animation:fossilGlow 2.6s ease-out infinite}
@keyframes fossilGlow{0%{box-shadow:0 0 0 0 rgba(63,217,138,.45)}
  70%,100%{box-shadow:0 0 0 9px rgba(63,217,138,0)}}

/* One line along the bottom saying what is going on. */
.mscene__status{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:22px 14px 9px;font-size:.78rem;text-align:center;color:#fff;
  text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.6);
  background:linear-gradient(180deg,transparent,rgba(4,8,20,.72));
  pointer-events:none}

/* ── The cavern ─────────────────────────────────────── */
.mscene__lamp{position:absolute;left:50%;bottom:-10%;width:340px;height:260px;
  margin-left:-170px;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at 42% 62%,rgba(255,181,94,.30),
    rgba(255,181,94,.08) 45%,transparent 68%);
  animation:lampFlicker 3.4s steps(6,end) infinite}
@keyframes lampFlicker{0%,100%{opacity:.9}35%{opacity:1}55%{opacity:.72}75%{opacity:.95}}
.mscene.is-empty .mscene__lamp{opacity:.35;animation:none}

/* Motes of crystal light drifting up through the cave. */
.mscene__crystals i{position:absolute;bottom:-6px;width:4px;height:4px;
  background:var(--accent);box-shadow:0 0 6px 1px rgba(var(--accent-rgb),.8);
  opacity:0;animation:mote 7s linear infinite}
.mscene__crystals i:nth-child(1){left:12%;animation-delay:0s}
.mscene__crystals i:nth-child(2){left:28%;animation-delay:2.4s;animation-duration:8s}
.mscene__crystals i:nth-child(3){left:61%;animation-delay:1.1s}
.mscene__crystals i:nth-child(4){left:79%;animation-delay:3.6s;animation-duration:9s}
.mscene__crystals i:nth-child(5){left:91%;animation-delay:5s}
@keyframes mote{0%{opacity:0;transform:translateY(0)}
  15%{opacity:.9}80%{opacity:.6}100%{opacity:0;transform:translate(14px,-210px)}}

.mscene__stage{position:absolute;left:50%;bottom:30px;width:250px;height:136px;
  margin-left:-125px}

/* The seam: a cluster of crystal being chipped at. */
.mscene__seam{position:absolute;right:4px;bottom:4px;width:84px;height:104px;
  filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.55))}
.mscene__seam i{position:absolute;bottom:0;
  clip-path:polygon(50% 0,100% 22%,100% 100%,0 100%,0 22%);
  background:linear-gradient(90deg,#E9FBFF 0 30%,#8ADFFF 30% 62%,#3E8CFF 62%)}
.mscene__seam i:nth-child(1){left:26px;width:26px;height:100px}
.mscene__seam i:nth-child(2){left:6px;width:20px;height:64px;transform:rotate(-16deg);
  transform-origin:bottom right}
.mscene__seam i:nth-child(3){left:52px;width:20px;height:72px;transform:rotate(18deg);
  transform-origin:bottom left}
.mscene.is-working .mscene__seam{animation:seamJolt 2.4s infinite}
@keyframes seamJolt{0%,76%,100%{transform:none}79%{transform:translateX(3px)}
  83%{transform:translateX(-1px)}}

.mscene__worker,.fscene__worker{position:absolute;width:112px;height:112px}
.mscene__worker{left:16px;bottom:0}
.mscene__mon,.fscene__mon{position:relative;width:100%;height:100%;
  object-fit:contain;image-rendering:pixelated;transform-origin:50% 92%;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.55))}
.mscene__disc,.fscene__disc{position:absolute;left:50%;bottom:6px;width:70px;height:12px;
  margin-left:-35px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%)}
.mscene__worker.is-shiny .mscene__mon,.fscene__worker.is-shiny .fscene__mon{
  filter:drop-shadow(0 0 6px rgba(255,213,74,.75)) drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.mscene__worker.is-shadow .mscene__mon,.fscene__worker.is-shadow .fscene__mon{
  filter:drop-shadow(0 0 8px rgba(155,92,255,.85)) drop-shadow(0 3px 2px rgba(0,0,0,.5))}

/* The swing: wind up, lunge at the seam, settle. Sparks and rubble
   are timed to the same 2.4 seconds, so they land on the hit. */
.mscene.is-working .mscene__mon{animation:mineStrike 2.4s ease-in-out infinite}
@keyframes mineStrike{
  0%,60%,100%{transform:none}
  70%{transform:translateX(-7px) rotate(-7deg)}
  78%{transform:translateX(16px) rotate(9deg)}
  88%{transform:translateX(5px) rotate(2deg)}}
.mscene.is-resting .mscene__mon{animation:monRest 3.8s ease-in-out infinite}
@keyframes monRest{50%{transform:translateY(3px) scaleY(.96)}}

.mscene__impact{position:absolute;right:66px;bottom:52px;width:0;height:0}
.mscene__impact i{position:absolute;width:4px;height:4px;background:#FFE7A3;
  box-shadow:0 0 6px 1px rgba(255,190,90,.9);opacity:0}
.mscene.is-working .mscene__impact i{animation:spark 2.4s linear infinite}
.mscene__impact i:nth-child(1){--sx:-26px;--sy:-30px}
.mscene__impact i:nth-child(2){--sx:-34px;--sy:-8px}
.mscene__impact i:nth-child(3){--sx:-18px;--sy:-42px}
.mscene__impact i:nth-child(4){--sx:-30px;--sy:16px;background:var(--accent)}
.mscene__impact i:nth-child(5){--sx:-8px;--sy:-36px;background:var(--accent)}
.mscene__impact i:nth-child(6){--sx:-40px;--sy:-20px}
@keyframes spark{0%,77%{opacity:0;transform:none}
  79%{opacity:1;transform:none}
  100%{opacity:0;transform:translate(var(--sx),var(--sy))}}

.mscene__rubble{position:absolute;right:58px;bottom:2px;width:0;height:0}
.mscene__rubble i{position:absolute;bottom:0;width:6px;height:6px;
  background:#5a6a9a;box-shadow:inset -2px -2px 0 #2c375f;opacity:0}
.mscene.is-working .mscene__rubble i{animation:rubble 2.4s ease-in infinite}
.mscene__rubble i:nth-child(1){--rx:-14px}
.mscene__rubble i:nth-child(2){--rx:-26px;width:4px;height:4px}
.mscene__rubble i:nth-child(3){--rx:-6px;width:5px;height:5px}
@keyframes rubble{0%,78%{opacity:0;transform:translate(0,-46px)}
  80%{opacity:1}
  94%{opacity:1;transform:translate(var(--rx),0)}
  100%{opacity:0;transform:translate(var(--rx),0)}}

/* A pick leaning on the rock while nobody is here. */
.mscene__empty{position:absolute;left:52px;bottom:0;width:64px;height:64px}
.mscene__pick{width:64px;height:64px;transform:rotate(-24deg);opacity:.85;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}

/* Something comes loose from the seam and lands in the crate. */
.mscene__found,.fscene__splash{position:absolute;width:40px;height:40px;
  object-fit:contain;image-rendering:pixelated;opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(255,231,163,.9))}
.mscene__found{right:44px;bottom:46px}
.mscene__found.is-up{animation:foundPop 1.5s ease-out forwards}
@keyframes foundPop{
  0%{opacity:0;transform:scale(.4)}
  20%{opacity:1;transform:translate(-10px,-42px) scale(1.15)}
  70%{opacity:1;transform:translate(-30px,-34px) scale(1)}
  100%{opacity:0;transform:translate(-40px,-10px) scale(.7)}}

/* ── The lake ───────────────────────────────────────── */
/* Moonlight glinting on the water, and fireflies over the reeds. */
.fscene__shimmer i{position:absolute;height:2px;background:rgba(220,240,255,.75);
  box-shadow:0 0 4px rgba(200,230,255,.8);opacity:0;
  animation:glint 4.2s ease-in-out infinite}
.fscene__shimmer i:nth-child(1){left:56%;top:70%;width:26px}
.fscene__shimmer i:nth-child(2){left:64%;top:78%;width:18px;animation-delay:1.4s}
.fscene__shimmer i:nth-child(3){left:51%;top:84%;width:30px;animation-delay:2.7s}
@keyframes glint{0%,100%{opacity:0;transform:translateX(0)}
  45%{opacity:.85}60%{opacity:.4;transform:translateX(8px)}}
.fscene__flies i{position:absolute;width:3px;height:3px;background:#FFF6A8;
  box-shadow:0 0 6px 2px rgba(255,240,140,.7);opacity:0;
  animation:firefly 6s ease-in-out infinite}
.fscene__flies i:nth-child(1){left:8%;top:56%}
.fscene__flies i:nth-child(2){left:22%;top:40%;animation-delay:1.8s}
.fscene__flies i:nth-child(3){left:84%;top:60%;animation-delay:3.1s}
.fscene__flies i:nth-child(4){left:93%;top:38%;animation-delay:4.4s}
@keyframes firefly{0%,100%{opacity:0;transform:translate(0,0)}
  30%{opacity:1}50%{transform:translate(10px,-12px)}70%{opacity:.8}
  85%{opacity:0;transform:translate(-6px,-20px)}}

/* The jetty, drawn plank by plank. */
.fscene__jetty{position:absolute;left:0;bottom:24px;width:min(42%,300px);height:22px;
  background:repeating-linear-gradient(90deg,#7a4d26 0 16px,#5e3a1b 16px 18px);
  border-top:4px solid #a26b37;box-shadow:0 4px 0 #2e1c0d}
.fscene__jetty::before,.fscene__jetty::after{content:'';position:absolute;top:100%;
  width:8px;height:40px;background:linear-gradient(90deg,#4a2d14,#2e1c0d)}
.fscene__jetty::before{left:18%}
.fscene__jetty::after{right:10px}
.fscene__spare{position:absolute;left:46%;top:-20px;width:30px;height:30px;
  image-rendering:pixelated;transform:rotate(56deg);opacity:0}
.fscene.is-empty .fscene__spare{opacity:.9}

/* Sprites carry empty space under the feet, so the box sits a little
   into the planks for the Pokemon to stand on them. */
.fscene__worker{left:calc(min(42%,300px) - 124px);bottom:12px}
.fscene__rod{position:absolute;right:-26px;top:10px;width:48px;height:48px;
  image-rendering:pixelated;transform-origin:10% 90%;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.fscene.is-working .fscene__mon{animation:monBob 3s ease-in-out infinite}
.fscene.is-working .fscene__rod{animation:rodSway 3s ease-in-out infinite}
@keyframes rodSway{50%{transform:rotate(-4deg)}}
.fscene.is-nibble .fscene__rod{animation:rodTug .5s ease-in-out infinite}
@keyframes rodTug{50%{transform:rotate(7deg)}}
.fscene.is-resting .fscene__mon{animation:monRest 3.8s ease-in-out infinite}
.fscene.is-resting .fscene__rod{transform:rotate(48deg)}

.fscene__line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible}
.fscene__line line{stroke:rgba(235,245,255,.6);stroke-width:1}
.fscene:not(.is-working) .fscene__line,
.fscene:not(.is-working) .fscene__float{display:none}

.fscene__float{position:absolute;left:64%;top:74%;width:14px;height:14px;
  margin:-7px 0 0 -7px}
.fscene__bob{position:absolute;inset:0;
  background:linear-gradient(180deg,#EE1515 0 50%,#f4f4f4 50%);
  box-shadow:0 0 0 2px #1a1a1a,0 0 10px rgba(255,255,255,.35);
  animation:fishBob 2.6s ease-in-out infinite}
@keyframes fishBob{50%{transform:translateY(4px)}}
.fscene.is-nibble .fscene__bob{animation:fishBite .45s ease-in-out infinite}
@keyframes fishBite{50%{transform:translateY(9px) scale(.85)}}
.fscene__ring{position:absolute;left:50%;top:70%;width:40px;height:12px;
  margin-left:-20px;border-radius:50%;border:2px solid rgba(220,240,255,.35);
  animation:fishRipple 2.6s ease-out infinite}
.fscene__ring + .fscene__ring{animation-delay:1.3s}
@keyframes fishRipple{0%{transform:scale(.3);opacity:.8}100%{transform:scale(2.2);opacity:0}}

.fscene__splash{left:64%;top:74%;margin:-20px 0 0 -20px}
.fscene__splash.is-up{animation:splashUp 1.6s ease-out forwards}
@keyframes splashUp{
  0%{opacity:0;transform:translateY(10px) scale(.5)}
  25%{opacity:1;transform:translateY(-56px) scale(1.2) rotate(-8deg)}
  60%{opacity:1;transform:translate(-60px,-40px) scale(1) rotate(6deg)}
  100%{opacity:0;transform:translate(-120px,0) scale(.6)}}

/* ── The crate ──────────────────────────────────────── */
.work{display:flex;flex-direction:column;gap:14px}
.work__crate{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:14px}
.work__box{position:relative;width:60px;height:50px;flex-shrink:0;
  background:repeating-linear-gradient(0deg,#8a5a2e 0 11px,#6b4423 11px 13px);
  border:3px solid #43280f;box-shadow:inset 0 0 0 2px rgba(255,210,150,.12),
    0 4px 0 rgba(0,0,0,.35)}
.work--fishing .work__box{border-radius:6px 6px 14px 14px;
  background:
    repeating-linear-gradient(45deg,#b58a4a 0 4px,#8e6630 4px 8px),
    #8e6630}
/* What is in it, rising with the count. */
.work__box span{position:absolute;left:3px;right:3px;bottom:3px;
  height:var(--fill,0%);max-height:calc(100% - 6px);
  transition:height .7s cubic-bezier(.3,1.3,.5,1);
  background:
    radial-gradient(circle at 25% 40%,#E9FBFF 0 2px,transparent 3px),
    radial-gradient(circle at 70% 30%,#FFE08A 0 2px,transparent 3px),
    radial-gradient(circle at 50% 75%,#8ADFFF 0 3px,transparent 4px),
    linear-gradient(180deg,#5d6f9e,#36446e);
  background-size:14px 12px,18px 14px,16px 16px,100% 100%}
.work--fishing .work__box span{
  background:
    radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.6) 0 2px,transparent 3px),
    linear-gradient(180deg,#5cb8ff,#1f6fc2);
  background-size:12px 10px,100% 100%}
.work__crate.is-full .work__box{animation:crateGlow 1.8s ease-in-out infinite}
@keyframes crateGlow{50%{box-shadow:inset 0 0 0 2px rgba(255,210,150,.12),
  0 4px 0 rgba(0,0,0,.35),0 0 18px 2px rgba(255,203,5,.55)}}
.work__box.is-pop{animation:cratePop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes cratePop{30%{transform:scale(1.12,.9)}60%{transform:scale(.95,1.06)}}
.work__fly{position:absolute;left:50%;top:0;width:32px;height:32px;margin-left:-16px;
  object-fit:contain;image-rendering:pixelated;pointer-events:none;z-index:3;
  animation:workFly 1s cubic-bezier(.2,.8,.3,1) forwards;opacity:0}
@keyframes workFly{
  0%{opacity:0;transform:translate(0,10px) scale(.5)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),-76px) scale(1.1)}}

.work__stack{display:flex;flex-direction:column;gap:6px;min-width:0}
.work__label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.work__label b{font-size:.88rem}
.work__count{font-size:.8rem;font-weight:700;color:var(--txt);
  font-variant-numeric:tabular-nums}
.work__bar{position:relative;height:10px;border-radius:99px;overflow:hidden;
  background:var(--ink);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.work__bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.45);
  transition:width .7s cubic-bezier(.3,1.1,.5,1)}
.work__bar.is-notched::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--cap) - 2px),
    rgba(14,17,22,.85) calc(100% / var(--cap) - 2px) calc(100% / var(--cap)))}
.work__bar.is-full i{background:linear-gradient(90deg,var(--yellow),#ffe9a3);
  box-shadow:0 0 12px rgba(255,203,5,.55)}
.work__rate{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-size:.74rem;color:var(--txt-dim)}
.work__rate b{color:var(--txt)}
.work__next{font-style:normal;font-variant-numeric:tabular-nums}
.work__next.is-full{color:var(--yellow)}
.work__collect{white-space:nowrap}
.work__crate.is-full .work__collect{animation:collectPulse 1.8s ease-out infinite}
@keyframes collectPulse{0%{box-shadow:0 0 0 0 rgba(255,203,5,.55)}
  70%,100%{box-shadow:0 0 0 10px rgba(255,203,5,0)}}

/* ── Who is working ─────────────────────────────────── */
.work__crewhead,.work__haulhead{display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.work__crew h4,.work__haul h4{margin:0;font-size:.88rem;display:flex;
  align-items:center;gap:7px}
.work__crew h4 span{font-size:.72rem;color:var(--txt-dim);font-weight:400}
.work__fits{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;
  color:var(--txt-dim)}
.work__type{height:16px;width:auto;image-rendering:auto}
.work__slots{display:flex;flex-direction:column;gap:8px}
.workmon{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:var(--r-sm);text-align:left;color:var(--txt);
  background:
    radial-gradient(ellipse 60% 90% at 0% 50%,rgba(var(--accent-rgb),.14),transparent 70%),
    var(--ink-2);
  border:1px solid rgba(var(--accent-rgb),.25)}
.workmon__img{width:76px;height:76px;object-fit:contain;flex-shrink:0;
  image-rendering:pixelated;animation:monBob 2.8s ease-in-out infinite;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.workmon.is-shiny .workmon__img{filter:drop-shadow(0 0 6px rgba(255,213,74,.7))}
.workmon.is-shadow .workmon__img{filter:drop-shadow(0 0 7px rgba(155,92,255,.8))}
.workmon__name{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.workmon__name b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workmon__name em{font-style:normal;font-size:.72rem;color:var(--txt-dim)}
.workmon__fit{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--ok)}
.workmon.is-gone{justify-content:space-between;color:var(--txt-dim);font-size:.8rem}
.work__off{flex-shrink:0}
/* An empty post: a Poke Ball waiting for someone, like the Daycare's
   empty pen. */
.workmon--open{width:100%;cursor:pointer;border-style:dashed;
  border-color:rgba(255,255,255,.16);background:transparent;
  transition:border-color .2s,background .2s}
.workmon--open:hover,.workmon--open:focus-visible{border-color:var(--accent);
  background:rgba(var(--accent-rgb),.07);outline:none}
.workmon__lure{position:relative;display:grid;place-items:center;width:56px;height:56px;
  flex-shrink:0;border-radius:50%;background:var(--ink);border:1px solid var(--line);
  margin:0 10px}
.workmon__lure::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;animation:lurePulse 2.4s ease-out infinite}
.workmon__lure img{width:34px;height:34px;image-rendering:pixelated}
.workmon--open:hover .workmon__lure img{animation:ballWiggle .6s ease-in-out}
.work__note{margin:0;font-size:.7rem;color:var(--txt-dim);line-height:1.5;
  text-align:center}

/* ── Waiting to be fought ───────────────────────────── */
.work__haul{border-color:rgba(255,203,5,.32);
  background:linear-gradient(180deg,rgba(255,203,5,.07),transparent 60%),var(--glass)}
.work__haul h4 span{min-width:22px;padding:1px 7px;border-radius:999px;
  background:var(--yellow);color:var(--ink);font-size:.72rem;text-align:center}
.work__haulhead p{margin:0;flex-basis:100%;font-size:.74rem;color:var(--txt-dim)}
.work__pendlist{list-style:none;margin:0 0 12px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.work__pendlist li{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:8px 6px 8px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line);text-align:center;
  transition:opacity .25s,transform .25s}
.work__pendlist li.is-leaving{opacity:0;transform:scale(.9)}
.work__pendlist img{width:84px;height:84px;margin:-12px 0 -10px;object-fit:contain;
  image-rendering:pixelated}
.work__pendname{display:flex;flex-direction:column;font-size:.76rem;
  line-height:1.25;max-width:100%}
.work__pendname em{font-style:normal;color:var(--txt-dim);font-size:.68rem}
.work__pendlist b{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px}
.work__pendlist b.is-shiny{color:var(--ink);background:var(--shiny)}
.work__pendlist b.is-shadow{color:#fff;background:var(--shadow)}
.work__pendlist li.is-shiny{border-color:rgba(255,213,74,.6);
  box-shadow:0 0 12px rgba(255,213,74,.2)}
.work__pendlist li.is-shadow{border-color:rgba(155,92,255,.6);
  box-shadow:0 0 12px rgba(155,92,255,.25)}
.work__drop{position:absolute;top:4px;right:4px;width:22px;height:22px;
  display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  font-size:14px;line-height:1;border:1px solid var(--line);
  background:var(--ink);color:var(--txt-dim);opacity:.45;
  transition:opacity .15s,background .15s,color .15s}
.work__pendlist li:hover .work__drop{opacity:1}
.work__drop:hover{background:rgba(229,72,77,.9);color:#fff;opacity:1}
.work__drop:focus-visible{outline:2px solid var(--red);opacity:1}
.work__drop[disabled]{opacity:.3;cursor:default}
.work__more{justify-content:center;color:var(--txt-dim);font-size:.8rem;
  border-style:dashed!important}
.work__haulact{display:flex}
.work__fight{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.work__fight img{width:22px;height:22px;image-rendering:pixelated}

/* Clearing a crew's whole haul, with the three things worth keeping
   back. The boxes start ticked, so a careless press keeps them. */
.work__clear{margin:10px 0 0;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ink)}
.work__clear summary{cursor:pointer;padding:8px 12px;font-size:.78rem;
  color:var(--txt-dim);list-style:none}
.work__clear summary::-webkit-details-marker{display:none}
.work__clear summary::before{content:'';display:inline-block;width:0;height:0;
  margin-right:8px;border:4px solid transparent;border-left:6px solid currentColor;
  transition:transform .15s;transform-origin:30% 50%}
.work__clear[open] summary::before{transform:rotate(90deg)}
.work__clearbody{display:flex;flex-direction:column;gap:6px;padding:0 12px 10px}
.work__keep{display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--txt-dim);cursor:pointer}
.work__keep input{accent-color:var(--yellow);cursor:pointer}
.work__release{align-self:flex-start;margin-top:4px;font-size:13px}

/* ── Who should go ──────────────────────────────────── */
.workpick{border-color:rgba(var(--accent-rgb),.4);animation:nursIn .22s ease-out}
.workpick__head{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin:0 0 10px}
.workpick__head h4{margin:0;font-size:.9rem}
.workpick__bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.workpick__tabs{display:inline-flex;padding:3px;border-radius:999px;
  background:var(--ink);border:1px solid var(--line)}
.workpick__tab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border:0;border-radius:999px;background:transparent;color:var(--txt-dim);
  font-size:.78rem;cursor:pointer}
.workpick__tab span{font-size:.68rem;opacity:.75}
.workpick__tab.is-on{background:var(--ink-3);color:var(--txt);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.workpick__search{flex:1;min-width:150px;padding:7px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink);color:var(--txt);font-size:.8rem}
.workpick__search:focus{outline:none;border-color:var(--accent)}
.workpick__list{display:grid;gap:6px;max-height:300px;overflow:auto;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:2px}
.workpick__mon{position:relative;display:flex;align-items:center;gap:7px;
  padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  background:var(--ink-2);border:1px solid var(--line);color:var(--txt);
  transition:border-color .15s,transform .15s}
.workpick__mon:hover,.workpick__mon:focus-visible{border-color:var(--accent);
  transform:translateY(-1px);outline:none}
.workpick__mon.is-suited{border-color:rgba(119,204,85,.45);
  background:linear-gradient(90deg,rgba(119,204,85,.1),transparent 70%),var(--ink-2)}
.workpick__mon.is-shiny img{filter:drop-shadow(0 0 4px rgba(255,213,74,.8))}
.workpick__mon.is-shadow img{filter:drop-shadow(0 0 5px rgba(155,92,255,.85))}
.workpick__mon.is-busy{opacity:.5;pointer-events:none}
.workpick__mon img{width:36px;height:36px;object-fit:contain;flex-shrink:0;
  image-rendering:pixelated}
.workpick__name{flex:1;min-width:0;display:flex;flex-direction:column;
  font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workpick__name em{font-size:.64rem;color:var(--txt-dim);font-style:normal}
.workpick__tag{font-size:.6rem;padding:1px 6px;border-radius:999px;
  background:var(--ok);color:#0d2417;font-weight:700}
.workpick__none{grid-column:1 / -1;margin:8px 0;font-size:.8rem;
  color:var(--txt-dim);text-align:center}
.workpick__warn{margin:10px 0 0;font-size:.7rem;color:var(--txt-dim)}

/* ── The Fossil Lab ─────────────────────────────────── */
.mlab{background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.07),transparent 45%),var(--glass)}
.mlab__none{display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center}
.mlab__none p{margin:0;font-size:.76rem;color:var(--txt-dim);line-height:1.5}
.mlab__shelf{display:flex;gap:10px;padding:8px 14px 4px;
  border-bottom:4px solid #4a2d14;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.mlab__shelf img{width:30px;height:30px;image-rendering:pixelated;
  filter:grayscale(1) brightness(.6);opacity:.6}
.mlab__list{display:flex;flex-direction:column;gap:8px}
.mlab__fossil{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line)}
.mlab__rock{position:relative;display:grid;place-items:center;width:46px;height:46px;
  border-radius:10px;
  background:radial-gradient(circle at 35% 30%,#6b5a48,#3b2f24 70%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.08)}
.mlab__rock img{width:34px;height:34px;image-rendering:pixelated}
.mlab__qty{position:absolute;right:-6px;bottom:-6px;padding:0 5px;border-radius:999px;
  font-size:.64rem;font-weight:700;background:var(--ink);border:1px solid var(--line)}
/* A pixel arrow from what goes in to what comes out. */
.mlab__arrow{display:inline-block;width:14px;height:10px;flex-shrink:0;
  background:var(--accent);opacity:.7;
  clip-path:polygon(0 35%,55% 35%,55% 0,100% 50%,55% 100%,55% 65%,0 65%)}
.mlab__mon{display:grid;place-items:center;width:52px;height:52px}
.mlab__mon img,.mlab__pairmon{width:52px;height:52px;object-fit:contain;
  image-rendering:pixelated}
/* Not in the Pokedex yet: a silhouette, so the revival is a reveal. */
.mlab__mon.is-new img,.mlab__pairmon.is-new{filter:brightness(0) drop-shadow(0 0 4px rgba(var(--accent-rgb),.6));
  opacity:.85}
.mlab__info{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.82rem}
.mlab__info em{font-style:normal;font-size:.72rem;color:var(--txt-dim)}
.mlab__tag{align-self:flex-start;font-size:.6rem;font-weight:700;padding:1px 6px;
  border-radius:999px;color:var(--ink);background:var(--accent)}
.mlab__halves{margin-top:12px}
.mlab__halves h5{margin:0 0 4px;font-size:.82rem}
.mlab__note{margin:0 0 8px;font-size:.72rem;color:var(--txt-dim);line-height:1.45}
.mlab__halfcols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.mlab__halfcols > div{display:flex;flex-direction:column;gap:5px;padding:8px;
  border-radius:var(--r-sm);background:var(--ink-2);border:1px solid var(--line)}
.mlab__col{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-dim)}
.mlab__half{display:flex;align-items:center;gap:7px;font-size:.76rem}
.mlab__half img{width:28px;height:28px;image-rendering:pixelated}
.mlab__half em{font-style:normal;color:var(--txt-dim)}
.mlab__miss{margin:0;font-size:.72rem;color:var(--txt-dim);font-style:italic}
.mlab__pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px}
.mlab__pair{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px;border-radius:var(--r-sm);cursor:pointer;color:var(--txt);
  background:var(--ink-2);border:1px solid rgba(var(--accent-rgb),.35);
  transition:border-color .15s,transform .15s,background .15s}
.mlab__pair:hover,.mlab__pair:focus-visible{border-color:var(--accent);
  background:rgba(var(--accent-rgb),.08);transform:translateY(-1px);outline:none}
.mlab__pair b{font-size:.78rem}
.mlab__combo{display:flex;align-items:center;gap:4px}
.mlab__combo > img:not(.mlab__pairmon){width:28px;height:28px;image-rendering:pixelated}
.mlab__combo i{font-style:normal;color:var(--txt-dim);font-weight:700}

/* ── The Ore Collector's stall ──────────────────────── */
/* He stands where the ore comes out rather than at a counter in
   town: a wooden stall under a striped awning, prices chalked up. */
.orebuy{padding-top:0;overflow:hidden;
  background:
    linear-gradient(180deg,transparent 60%,rgba(122,77,38,.12)),
    var(--glass)}
.orebuy__awning{height:16px;margin:0 -14px 12px;
  background:repeating-linear-gradient(90deg,#c0392b 0 18px,#f3e9d2 18px 36px);
  -webkit-mask:radial-gradient(circle 9px at 9px 16px,transparent 8px,#000 9px) 0 0/18px 100% repeat-x;
          mask:radial-gradient(circle 9px at 9px 16px,transparent 8px,#000 9px) 0 0/18px 100% repeat-x;
  box-shadow:0 2px 0 rgba(0,0,0,.25)}
.orebuy__sign{margin:0 0 10px}
.orebuy__sign h4{margin:0;font-size:.95rem}
.orebuy__line{margin:3px 0 0;font-size:.78rem;color:var(--txt-dim);font-style:italic}
.orebuy__list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px}
.orebuy__list li{display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-radius:var(--r-sm);
  background:repeating-linear-gradient(0deg,rgba(122,77,38,.18) 0 14px,
    rgba(94,58,27,.18) 14px 15px),var(--ink-2);
  border:1px solid rgba(162,107,55,.35);transition:opacity .3s}
.orebuy__list li.is-sold{opacity:.4}
.orebuy__list img{width:30px;height:30px;object-fit:contain;
  image-rendering:pixelated;flex-shrink:0}
.orebuy__name{flex:1;min-width:0;font-size:.84rem}
.orebuy__name em{font-style:normal;color:var(--txt-dim);font-size:.74rem}
/* The price, which is what somebody came here to read: a tag. */
.orebuy__price,.orebuy__tag{font-size:.74rem;font-weight:700;white-space:nowrap;
  color:#2b1a08;background:#f3e2b3;padding:2px 8px 2px 10px;
  clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%);
  font-variant-numeric:tabular-nums}
.orebuy__btns{display:flex;gap:5px;flex-shrink:0}
.orebuy__all{white-space:nowrap}
.orebuy__sum{margin:10px 0 0;font-size:.76rem;color:var(--txt-dim);text-align:right}
.orebuy__sum b{color:var(--gold)}
.orebuy__empty{margin:0 0 8px;font-size:.76rem;color:var(--txt-dim)}
.orebuy__prices{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.orebuy__prices li{display:flex;align-items:center;gap:7px;padding:5px 8px;
  border-radius:var(--r-sm);background:var(--ink-2);font-size:.74rem}
.orebuy__prices li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.orebuy__prices img{width:24px;height:24px;image-rendering:pixelated}

/* ── The tackle box ─────────────────────────────────── */
.tackle{background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.06),transparent 45%),var(--glass)}
.tackle__tray{display:flex;flex-direction:column;gap:6px;padding:8px;
  border-radius:var(--r-sm);
  background:linear-gradient(180deg,#2f5a3c,#24452f);
  border:3px solid #1b3323;box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.tackle__rod{display:flex;align-items:center;gap:10px;padding:7px 9px;
  border-radius:7px;background:rgba(8,20,12,.55);border:1px solid rgba(255,255,255,.06)}
.tackle__slot{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;
  border-radius:6px;background:rgba(0,0,0,.35);box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
.tackle__slot img{width:32px;height:32px;image-rendering:pixelated}
.tackle__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:.84rem}
.tackle__info em{font-style:normal;font-size:.7rem;color:var(--txt-dim)}
.tackle__state{font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap;
  color:var(--txt-dim);border:1px solid var(--line)}
.tackle__rod.is-inuse{border-color:rgba(255,203,5,.55);
  background:linear-gradient(90deg,rgba(255,203,5,.12),rgba(8,20,12,.55) 60%)}
.tackle__rod.is-inuse .tackle__state{color:var(--ink);background:var(--yellow);
  border-color:var(--yellow)}
.tackle__rod.is-locked{opacity:.6}
.tackle__rod.is-locked .tackle__slot img{filter:brightness(0);opacity:.5}
.tackle__bites{margin-top:12px}
.tackle__bites h5{margin:0 0 7px;font-size:.8rem;display:flex;
  justify-content:space-between;gap:8px}
.tackle__bites h5 span{font-weight:400;color:var(--txt-dim);font-size:.72rem}
.tackle__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:4px}
.tackle__fish{display:grid;place-items:center;aspect-ratio:1;border-radius:7px;
  background:rgba(51,153,255,.08);border:1px solid rgba(51,153,255,.18)}
.tackle__fish img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.tackle__fish.is-new img{filter:brightness(0) drop-shadow(0 0 3px rgba(var(--accent-rgb),.55));
  opacity:.75}
.tackle__more{display:grid;place-items:center;font-size:.72rem;color:var(--txt-dim);
  border-radius:7px;border:1px dashed var(--line)}
.tackle__facts{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.tackle__facts li{display:flex;align-items:center;gap:8px;font-size:.74rem;
  color:var(--txt-dim);line-height:1.4}
.tackle__facts img{width:24px;height:24px;flex-shrink:0;image-rendering:pixelated}

/* ── Small screens ──────────────────────────────────── */
@media (max-width:560px){
  .mscene,.fscene{height:196px}
  .mscene__stage{transform:scale(.82);transform-origin:50% 100%;bottom:26px}
  .fscene__worker{transform:scale(.82);transform-origin:50% 100%}
  .work__crate{grid-template-columns:auto minmax(0,1fr)}
  .work__collect{grid-column:1 / -1}
  .mlab__fossil{grid-template-columns:auto auto auto minmax(0,1fr)}
  .mlab__fossil .btn{grid-column:1 / -1}
  .orebuy__list li{flex-wrap:wrap}
  .orebuy__name{flex:1 1 calc(100% - 40px)}
  .orebuy__price{order:2}
  .orebuy__btns{order:3;margin-left:auto}
}

/* Somebody who asked for no motion gets a still scene. */
@media (prefers-reduced-motion:reduce){
  .site *,.site *::before,.site *::after{animation:none!important;
    transition:none!important}
  .mscene__impact,.mscene__rubble,.mscene__crystals,.fscene__flies,
  .fscene__shimmer,.fscene__ring{display:none}
}

/* ============================================================
   Boost orbs
   ============================================================ */
.boost{display:flex;flex-direction:column;gap:11px}
.boost__intro{margin:0;font-size:.82rem;color:var(--txt-dim);line-height:1.5}
.boost__card{display:flex;align-items:center;gap:13px;padding:13px;
  border-radius:var(--r);background:var(--glass);
  border:1px solid var(--glass-brd);transition:border-color .2s}
.boost__card.is-on{border-color:var(--ok);
  background:linear-gradient(135deg,rgba(63,217,138,.1),transparent 60%),var(--glass)}
.boost__ico{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.boost__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.boost__info b{font-size:.92rem}
.boost__info p{margin:0;font-size:.78rem;color:var(--txt-dim);line-height:1.4}
.boost__left{font-size:.78rem;color:var(--ok);font-variant-numeric:tabular-nums}
.boost__held{font-size:.76rem;color:var(--txt-dim)}
.boost__note{margin:4px 0 0;font-size:.75rem;color:var(--txt-dim);
  line-height:1.5;font-style:italic}

/* ============================================================
   Mega Evolution
   A shrine at dusk, as the PokéMart is a street and the Marketplace a
   town: the scene with Professor Aspen and three glass tiles on top,
   pill tabs under it, and the tab below. The screen's own accent is
   the five colours of the Mega symbol; every card is lit by the types
   of the Mega form it is about (--tc, --tc2).
   ============================================================ */
.mega{--mg:linear-gradient(90deg,#FFD84A,#5BE38C,#3FD3F0,#9B6BFF,#FF5FC8);
  --mgc:conic-gradient(from 0deg,#FFD84A,#5BE38C,#3FD3F0,#9B6BFF,#FF5FC8,#FFD84A);
  display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.mega [hidden]{display:none!important}

/* ── The shrine ──────────────────────────────────────── */
.megahero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;min-height:132px;padding:18px 16px 14px;flex-shrink:0;
  border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#3A2B5C,#1A1626)}
.megahero__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:brightness(.5) saturate(1.1) hue-rotate(-12deg);
  transform:scale(1.08);animation:scenePan 40s ease-in-out infinite alternate}
.megahero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,22,.05),rgba(14,17,22,.85)),
    radial-gradient(ellipse 55% 90% at 0% 100%,rgba(155,107,255,.35),transparent 70%),
    radial-gradient(ellipse 40% 70% at 100% 0%,rgba(255,95,200,.18),transparent 70%)}
/* The rainbow seam along the top, where the PokéMart has its awning. */
.megahero::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--mg);background-size:200% 100%;animation:megaSlide 8s linear infinite}
@keyframes megaSlide{to{background-position:200% 0}}
.megahero__front{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.megahero__sign{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;
  border-radius:8px;color:#fff;font-size:1.05rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.4);
  background:linear-gradient(180deg,#7B4FE0,#3E2385);border:2px solid #D9C8FF;
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.megahero__sign img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.megahero__say{display:flex;align-items:flex-start;gap:8px}
.megahero__say>img{width:38px;height:38px;flex-shrink:0;border-radius:50%;object-fit:cover;
  object-position:top;background:var(--ink-3);border:2px solid rgba(255,255,255,.75);
  image-rendering:pixelated}
.megahero__bubble{position:relative;margin:2px 0 0;max-width:40ch;padding:8px 12px;
  border-radius:12px;color:#1B2330;font-size:.82rem;font-weight:600;line-height:1.35;
  background:rgba(255,255,255,.94);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.megahero__bubble::before{content:'';position:absolute;left:-5px;top:12px;width:11px;height:11px;
  background:inherit;transform:rotate(45deg)}

.megastats{display:flex;gap:8px;flex-wrap:wrap}
.megastat{display:flex;align-items:center;gap:8px;min-width:112px;padding:7px 12px 7px 8px;
  border-radius:12px;color:var(--txt);
  background:rgba(14,17,22,.5);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.megastat img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.megastat span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.megastat em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.megastat b{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.megastat--stones b{background:var(--mg);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Tabs ────────────────────────────────────────────── */
.megatabs{display:flex;gap:2px;padding:3px;flex-shrink:0;align-self:flex-start;
  border-radius:99px;background:var(--ink);border:1px solid var(--line)}
.megatabs:empty{display:none}
.megatab{flex:0 0 auto;padding:7px 18px;border-radius:99px;font:inherit;font-size:.8rem;font-weight:700;
  color:var(--txt-dim);background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s}
.megatab:hover{color:var(--txt)}
.megatab.is-on{color:#fff;background:linear-gradient(135deg,#7B4FE0,#C2459E);
  box-shadow:0 4px 12px -4px rgba(155,92,255,.8)}
.megatab span{margin-left:6px;padding:0 6px;border-radius:99px;font-size:.68rem;
  background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}

.megamain{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.megaempty{margin:0;padding:40px 12px;text-align:center;color:var(--txt-dim);font-size:.86rem}
.megatype{height:18px;width:auto}

/* The Mega aura: a slow ring in the five colours behind a Mega. */
.megaaura{position:absolute;inset:8%;border-radius:50%;background:var(--mgc);
  filter:blur(14px);opacity:.55;animation:megaSpin 9s linear infinite}
.megaaura::after{content:'';position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle,rgba(14,17,22,.2),rgba(14,17,22,.85))}
@keyframes megaSpin{to{transform:rotate(360deg)}}

/* ── Sealed ──────────────────────────────────────────── */
.megaseal{display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:440px;margin:10px auto;padding:30px 20px;text-align:center;
  border-radius:var(--r);background:var(--glass);border:1px dashed var(--line)}
.megaseal__stone{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,rgba(155,107,255,.18),transparent 70%)}
.megaseal__stone img{width:56px;height:56px;image-rendering:pixelated;
  filter:brightness(0) opacity(.45);animation:martFloat 3s ease-in-out infinite}
.megaseal h3{margin:0;font-size:1.05rem}
.megaseal__steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;
  font-size:.84rem;color:var(--txt-dim)}
.megaseal__steps li{padding:7px 12px;border-radius:10px;background:var(--ink-2);border:1px solid var(--line)}
.megaseal__steps li.is-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}

/* ── Master Trainer ──────────────────────────────────── */
.megaduel-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;
  align-items:start}
.megaduel{--tc:var(--line);--tc2:var(--tc);position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r);
  background:
    radial-gradient(ellipse 70% 80% at 80% 40%,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 70%,color-mix(in srgb,var(--tc2) 18%,transparent),transparent 70%),
    linear-gradient(180deg,#1B2030,#12151E);
  border:1px solid color-mix(in srgb,var(--tc) 45%,var(--line))}
.megaduel__stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;
  min-height:190px;padding:10px 6px 0;position:relative}
/* The ground both stand on. */
.megaduel__stage::after{content:'';position:absolute;left:4%;right:4%;bottom:-4px;height:26px;z-index:-1;
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
.megaduel__trainer{position:relative;display:grid;place-items:center;height:170px}
.megaduel__trainer img{grid-area:1/1;height:150px;width:auto;max-width:100%;object-fit:contain;
  image-rendering:pixelated;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6));animation:megaIn .35s ease-out}
.megaduel__initial{grid-area:1/1;font-size:3rem;font-weight:900;color:var(--txt-dim);opacity:.25}
.megaduel__vs{align-self:center;font-size:1.5rem;font-weight:900;font-style:italic;letter-spacing:.04em;
  background:var(--mg);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.megaduel__mon{position:relative;display:grid;place-items:center;height:180px;padding:0;
  background:none;border:0;cursor:pointer}
.megaduel__mon img{position:relative;width:min(170px,100%);height:170px;object-fit:contain;
  image-rendering:pixelated;filter:drop-shadow(0 8px 8px rgba(0,0,0,.55));
  animation:megaIn .35s ease-out,martFloat 4s ease-in-out .35s infinite}
@keyframes megaIn{from{opacity:0;transform:translateY(8px) scale(.92)}}
.megaduel__id{display:flex;flex-direction:column;gap:2px}
.megaduel__title{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--tc) 70%,#fff)}
.megaduel__id>b{font-size:1.4rem;line-height:1.1}
.megaduel__where{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:4px;
  padding:3px 10px;border-radius:99px;font-size:.76rem;color:var(--txt-dim);white-space:nowrap;
  background:rgba(0,0,0,.3);border:1px solid var(--line)}
.megaduel__where.is-here{color:#fff;border-color:color-mix(in srgb,var(--ok) 60%,transparent)}
.megaduel__where i{font-style:normal;font-weight:800;color:var(--ok);animation:megaBlink 1.6s ease-in-out infinite}
@keyframes megaBlink{50%{opacity:.45}}
.megaduel.is-beaten .megaduel__mon img{filter:grayscale(.5) drop-shadow(0 8px 8px rgba(0,0,0,.55))}
.megaduel__stamp{position:absolute;top:18px;right:-34px;padding:4px 40px;transform:rotate(30deg);
  font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#0E1116;
  background:var(--ok);box-shadow:0 4px 10px rgba(0,0,0,.4)}

.megaside{display:flex;flex-direction:column;gap:10px;min-width:0}
.megaprize{--tc:var(--line);--tc2:var(--tc);position:relative;display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 20%,transparent),transparent 65%),var(--glass);
  border:1px solid color-mix(in srgb,var(--tc) 40%,var(--line))}
.megaprize__gem{position:relative;display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
.megaprize__gem::before{content:'';position:absolute;inset:6px;border-radius:50%;
  background:var(--mgc);opacity:.35;filter:blur(8px);animation:megaSpin 7s linear infinite}
.megaprize__gem img{position:relative;width:44px;height:44px;object-fit:contain;image-rendering:pixelated;
  animation:martFloat 3s ease-in-out infinite}
.megaprize__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.megaprize__body em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-dim)}
.megaprize__body b{font-size:1.05rem;color:var(--shiny)}
.megaprize__body>span{font-size:.78rem;color:var(--txt-dim)}
.megaprize__types{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px}
.megaprize__types small{font-size:.72rem;color:var(--txt);margin-left:4px}
.megaprize__ribbon{position:absolute;top:0;right:0;padding:2px 10px;border-radius:0 0 0 8px;
  font-size:.64rem;font-weight:800;color:#0E1116;background:var(--ok)}

.megateam{padding:10px 12px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-brd)}
.megateam h4,.megacmp h4,.megagive h4{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim)}
.megateam h4 small,.megacmp h4 small{font-size:.7rem;font-weight:600;letter-spacing:0;text-transform:none}
.megateam ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.megateam__slot{--tc:var(--line);--tc2:var(--tc);position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;aspect-ratio:1/1.15;border-radius:10px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 30%,var(--ink-2)),
    color-mix(in srgb,var(--tc2) 22%,var(--ink-2)));
  border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.megateam__slot img{width:80%;max-height:60%;object-fit:contain;image-rendering:pixelated}
.megateam__slot.is-ace{border-color:transparent;
  background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,var(--mgc) border-box;border:2px solid transparent}
.megateam__slot.is-ace span{font-size:.6rem;font-weight:800;color:var(--shiny)}
.megateam__ball{width:22px!important;height:22px;opacity:.85}
.megateam__types{display:flex;gap:1px;flex-wrap:wrap;justify-content:center}
.megateam__types .megatype{height:12px}

.megaact{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd)}
/* The twelve-hour window as a ring that empties. */
.megaclock{--left:100%;position:relative;flex-shrink:0;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,var(--ink-2) 62%,transparent 63%),
    conic-gradient(#9B6BFF var(--left),rgba(255,255,255,.07) 0)}
.megaclock span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.megaclock em{font-style:normal;font-size:.55rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim)}
.megaclock b{font-size:.88rem;font-variant-numeric:tabular-nums}
.megaact__body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.megaact__go{width:100%;padding:10px 15px;font-size:.9rem;color:#fff}
.megaact__go:disabled{opacity:.55;cursor:default}
.megaact__body p{margin:0;font-size:.76rem;line-height:1.45;color:var(--txt-dim)}

.meganext{--tc:var(--line);display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
  font-size:.78rem;color:var(--txt-dim);
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 18%,transparent),transparent 70%),var(--ink-2);
  border:1px dashed color-mix(in srgb,var(--tc) 45%,var(--line))}
.meganext span{flex:1;min-width:0}
.meganext span b{color:var(--txt)}
.meganext>b{font-variant-numeric:tabular-nums;color:var(--txt)}

/* ── Mega Stones ─────────────────────────────────────── */
.megastones{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
.megastones__list{min-width:0}
.megabar{padding:10px 12px 12px;margin-bottom:10px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd)}
.megabar__head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:10px;font-size:.84rem}
.megabar__head b{font-size:1.1rem;background:var(--mg);-webkit-background-clip:text;background-clip:text;color:transparent}
.megabar__head small{margin-left:auto;font-size:.74rem;color:var(--txt-dim)}
.megabar__track{position:relative;height:8px;margin:0 10px 10px;border-radius:99px;background:var(--ink)}
.megabar__track>span{display:block;height:100%;border-radius:99px;background:var(--mg);transition:width .4s}
.megabar__mark{position:absolute;top:50%;display:grid;place-items:center;width:22px;height:22px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--ink-3);border:1px solid var(--line)}
.megabar__mark img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated;
  filter:grayscale(1) brightness(.6)}
.megabar__mark.is-on{border-color:#D9C8FF;background:#3E2385}
.megabar__mark.is-on img{filter:none}

.megafilter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.megapill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;
  font:inherit;font-size:.76rem;font-weight:700;color:var(--txt-dim);cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);transition:color .15s,border-color .15s,background .15s}
.megapill span{padding:0 6px;border-radius:99px;font-size:.66rem;background:rgba(255,255,255,.08);
  font-variant-numeric:tabular-nums}
.megapill:hover{color:var(--txt);border-color:#9B6BFF}
.megapill.is-on{color:#fff;border-color:#9B6BFF;background:rgba(155,107,255,.22)}

.megagroup{display:flex;align-items:center;gap:7px;margin:4px 0 8px;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
.megagroup i{font-style:normal;padding:0 6px;border-radius:99px;letter-spacing:0;background:rgba(255,255,255,.08)}
.megagroup::after{content:'';flex:1;height:1px;background:var(--line)}
.megashelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-bottom:14px}

.megastone{--tc:var(--line);--tc2:var(--tc);position:relative;display:flex;flex-direction:column;
  align-items:center;gap:2px;min-width:0;padding:22px 6px 9px;border-radius:12px;font:inherit;
  color:var(--txt);text-align:center;cursor:pointer;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 22%,var(--ink-2)),
    color-mix(in srgb,var(--tc2) 14%,var(--ink-2)));
  border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);
  transition:transform .15s,border-color .15s,box-shadow .15s}
.megastone:hover{transform:translateY(-3px);
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--tc) 90%,transparent)}
.megastone:focus-visible{outline:2px solid #9B6BFF;outline-offset:2px}
.megastone.is-on{transform:translateY(-3px);border-color:transparent;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 26%,var(--ink-2)),
    color-mix(in srgb,var(--tc2) 16%,var(--ink-2))) padding-box,var(--mgc) border-box;
  border:2px solid transparent}
.megastone__gem{position:absolute;top:5px;left:5px;width:24px;height:24px;object-fit:contain;
  image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.megastone__worn{position:absolute;top:3px;right:3px;width:26px;height:26px;object-fit:contain;
  image-rendering:pixelated;border-radius:50%;background:rgba(0,0,0,.35)}
.megastone__art{display:grid;place-items:center;width:72px;height:72px}
.megastone__art img{width:72px;height:72px;object-fit:contain;image-rendering:pixelated;
  transition:transform .2s}
.megastone:hover .megastone__art img,.megastone.is-on .megastone__art img{transform:scale(1.1)}
.megastone b{max-width:100%;font-size:.74rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.megastone small{max-width:100%;font-size:.64rem;color:var(--txt-dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.megastone.is-missing{background:var(--ink-2);border:1px dashed rgba(255,255,255,.12)}
.megastone.is-missing .megastone__art img{filter:brightness(0) opacity(.5)}
.megastone.is-missing .megastone__gem{filter:grayscale(1) opacity(.5)}
.megastone.is-missing b{color:var(--txt-dim)}

.megapanel{position:sticky;top:0;display:flex;flex-direction:column;gap:10px;min-height:0;
  max-height:100%;overflow-y:auto;padding:14px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd);border-top:4px solid #9B6BFF;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.megapanel.is-idle{justify-content:center;min-height:240px;background:transparent;
  border:1px dashed var(--line)}
.megapanel__idle{display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;color:var(--txt-dim);font-size:.82rem;line-height:1.45}
.megapanel__idle img{width:44px;height:44px;opacity:.5;animation:martFloat 3s ease-in-out infinite}
.megapanel__idle p{margin:0;max-width:24ch}
.megapanel__close{display:none}
.megapanel__head{--tc:var(--line);--tc2:var(--tc);display:flex;flex-direction:column;align-items:center;
  gap:2px;margin:-14px -14px 0;padding:14px 14px 12px;text-align:center;
  background:radial-gradient(ellipse 80% 70% at 50% 30%,color-mix(in srgb,var(--tc) 28%,transparent),transparent 75%)}
.megapanel__mat{position:relative;display:grid;place-items:center;width:132px;height:132px;margin-bottom:4px}
.megapanel__mon{position:relative;width:112px;height:112px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.5));animation:megaIn .3s ease-out}
.megapanel__mon.is-shadow{filter:brightness(0) opacity(.55)}
.megapanel__gem{position:absolute;right:4px;bottom:4px;width:36px;height:36px;object-fit:contain;
  image-rendering:pixelated;padding:3px;border-radius:50%;background:rgba(14,17,22,.75);
  border:1px solid rgba(255,255,255,.2)}
.megapanel__head em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#C9B4FF}
.megapanel__head h3{margin:0;font-size:1.1rem}
.megapanel__head>span{font-size:.8rem;color:var(--txt-dim)}
.megapanel__types{display:flex;gap:4px;margin-top:4px}
.megapanel__ability{margin:4px 0 0;font-size:.76rem;color:var(--txt-dim)}
.megapanel__ability b{color:var(--txt)}

.megacmp{padding:10px 12px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line)}
.megacmp__row{display:grid;grid-template-columns:30px 1fr 30px 30px;align-items:center;gap:6px;
  font-size:.72rem;line-height:1.9}
.megacmp__row>span:first-child{color:var(--txt-dim);font-weight:700}
.megacmp__bar{position:relative;height:6px;border-radius:99px;background:var(--ink)}
.megacmp__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--mg)}
.megacmp__bar i.megacmp__base{background:rgba(255,255,255,.35)}
.megacmp__row b{text-align:right;font-variant-numeric:tabular-nums}
.megacmp__row small{text-align:right;font-variant-numeric:tabular-nums;color:var(--txt-dim)}
.megacmp__row small.is-up{color:var(--ok)}
.megacmp__row small.is-down{color:var(--red-lt)}

.megapanel__where{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;
  font-size:.8rem;background:var(--ink-2);border:1px solid var(--line)}
.megapanel__where img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.megapanel__where.is-worn{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.megagive ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.megagive li{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 4px;border-radius:10px;
  background:var(--ink-2);border:1px solid var(--line)}
.megagive li img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.megagive li span{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.megagive li b{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.megagive li small{font-size:.66rem;color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.megagive li .btn{padding:5px 12px;font-size:.74rem;color:#fff}
.megagive p{margin:0;font-size:.78rem;color:var(--txt-dim)}
.megapanel__carrier{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;
  text-align:center;border-radius:12px;background:var(--ink-2);border:1px dashed var(--line)}
.megapanel__carrier em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-dim)}
.megapanel__carrier>b{font-size:.95rem}
.megapanel__carrier>span{font-size:.78rem;color:var(--txt-dim)}
.megapanel__carrier>span b{color:var(--txt);font-variant-numeric:tabular-nums}
.megapanel__carrier .is-now{color:var(--ok);font-weight:800}
.megapanel__carrier .btn{margin-top:4px;width:100%;color:#fff}

/* ── Key Stone ───────────────────────────────────────── */
.megakey{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;align-items:start}
.megapedestal{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 14px;border-radius:var(--r);text-align:center;
  background:radial-gradient(ellipse 80% 55% at 50% 25%,rgba(155,107,255,.22),transparent 75%),var(--glass);
  border:1px solid var(--glass-brd)}
.megapedestal__stage{position:relative;display:grid;place-items:center;width:150px;height:150px}
/* The plinth under the holder. */
.megapedestal__stage::after{content:'';position:absolute;left:18%;right:18%;bottom:8px;height:16px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(217,200,255,.35),transparent 70%)}
.megapedestal__holder{position:relative;width:96px;height:96px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.55));animation:megaIn .3s ease-out,martFloat 3.5s ease-in-out .3s infinite}
.megapedestal__holder.is-locked{filter:brightness(0) opacity(.5)}
/* The Key Stone catching the light every few seconds. */
.megapedestal__key{position:absolute;top:14px;right:14px;width:30px;height:30px;image-rendering:pixelated;
  animation:megaGlint 3.2s ease-in-out infinite}
@keyframes megaGlint{0%,70%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  80%{filter:drop-shadow(0 0 8px #fff) brightness(1.5)}}
.megapedestal em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#C9B4FF}
.megapedestal h3{margin:0;font-size:1.1rem}
.megapedestal p{margin:0;font-size:.78rem;line-height:1.45;color:var(--txt-dim)}
.megapedestal__go{width:100%;margin-top:6px;padding:10px 15px;font-size:.88rem;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.megapedestal__go:disabled{opacity:.6;cursor:default}
.megapedestal__note{font-size:.68rem;color:var(--txt-dim)}

.megaholders{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px}
.megaholder{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 8px 10px;border-radius:12px;font:inherit;color:var(--txt);text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(155,107,255,.12),rgba(155,107,255,.02)),var(--ink-2);
  border:1px solid rgba(155,107,255,.3);transition:transform .15s,border-color .15s,box-shadow .15s}
.megaholder:hover{transform:translateY(-3px);border-color:#9B6BFF}
.megaholder:focus-visible{outline:2px solid #9B6BFF;outline-offset:2px}
.megaholder img{width:52px;height:52px;object-fit:contain;image-rendering:pixelated;transition:transform .2s}
.megaholder:hover img{transform:scale(1.1) rotate(-6deg)}
.megaholder b{font-size:.78rem}
.megaholder__tag{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;white-space:nowrap;
  font-size:.64rem;font-weight:700;color:var(--txt-dim);background:var(--ink)}
.megaholder__tag svg,.megapedestal__go svg{width:11px;height:11px;flex-shrink:0}
.megaholder__tag.is-open{color:#C9B4FF}
.megaholder.is-worn .megaholder__tag{color:#0E1116;background:var(--ok)}
.megaholder.is-on{transform:translateY(-3px);border-color:transparent;
  background:linear-gradient(180deg,#2A2140,var(--ink-2)) padding-box,var(--mgc) border-box;
  border:2px solid transparent;box-shadow:0 10px 22px -12px rgba(155,107,255,.9)}
.megaholder.is-locked{background:var(--ink-2);border-style:dashed;border-color:rgba(255,255,255,.1)}
.megaholder.is-locked img{filter:brightness(0) opacity(.45);transform:none}
.megaholder.is-locked b{color:var(--txt-dim)}
.megaholder.is-locked.is-on{border-style:solid}

.mega.is-busy [data-wear],.mega.is-busy [data-give],.mega.is-busy [data-fight],
.mega.is-busy [data-travel]{opacity:.6;pointer-events:none}

/* ── Smaller screens ─────────────────────────────────── */
@media (max-width:900px){
  .megaduel-wrap,.megakey{grid-template-columns:minmax(0,1fr)}
  .megapedestal{position:static}
  /* The stone panel becomes a sheet from the bottom, over the shelf. */
  .megastones{grid-template-columns:minmax(0,1fr)}
  .megapanel.is-idle{display:none}
  .megapanel{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:150;max-height:82dvh;
    padding-top:18px;border-radius:var(--r) var(--r) 0 0;background-color:var(--ink-2);
    box-shadow:0 -16px 40px rgba(0,0,0,.6);animation:martSheet .24s ease-out}
  .megapanel__head{margin-top:-18px;padding-top:18px}
  .megapanel__close{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;
    width:32px;height:32px;border-radius:50%;color:var(--txt-dim);cursor:pointer;
    background:var(--ink-3);border:1px solid var(--line)}
  .megapanel__close:hover{color:#fff;background:var(--red)}
  .mega.has-pick .megastones__list{padding-bottom:45dvh}
}
@media (max-width:640px){
  .megahero{min-height:0;padding:16px 12px 12px}
  .megahero__bubble{font-size:.76rem}
  .megahero__say>img{width:30px;height:30px}
  .megastats{width:100%;gap:6px}
  .megastat{flex:1;min-width:0;padding:6px 8px}
  .megastat img{display:none}
  .megastat b{font-size:13px}
  .megatabs{align-self:stretch}
  .megatab{flex:1;padding:7px 8px}
  .megaduel__stage{min-height:150px}
  .megaduel__trainer,.megaduel__mon{height:140px}
  .megaduel__trainer img{height:120px}
  .megaduel__mon img{height:130px}
  .megaclock{width:84px;height:84px}
  .megashelf{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
  .megastone__art,.megastone__art img{width:60px;height:60px}
  .megaholders{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .mega *,.mega *::before,.mega *::after,.megahero::before{animation:none!important;transition:none!important}
}

@media (max-width:600px){
  .boost__card{flex-wrap:wrap}
}

/* ============================================================
   Mega Evolution in battle
   The button only appears when the Pokemon out holds a stone that
   fits it, so it is styled to stand out when it does.
   ============================================================ */
/* The key sits in the diamond the four command slabs leave between
   their cut corners, after WorlddexOnline's MegaOrb: a dark diamond
   holding the Key Stone orb. Mega Evolution is not always available,
   so it is only there while the Pokemon out can actually do it - the
   rest of the time the field shows through the diamond and the four
   commands look exactly as they do without it.

   A square turned on its corner. Its half-diagonal (side / 1.41) stays
   a few pixels inside the slabs' cut edges (cut + half the gap), so a
   thin ring of field shows between the diamond and the slabs. */
.bmega{
  --d:36px;
  position:absolute;left:50%;top:50%;z-index:3;
  width:var(--d);height:var(--d);margin:calc(var(--d) / -2);
  display:flex;align-items:center;justify-content:center;
  padding:0;
  cursor:pointer;
  transform:rotate(45deg);
  background:var(--bslab-ink);
  border:3px solid var(--bmega-glow);border-radius:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  animation:megaPulse 1.8s ease-in-out infinite;
  transition:filter .12s,transform .12s;
}
/* A finger needs more than the diamond itself to aim at. The ring
   around it is the slabs' cut corners, which are never pressed. */
.bmega::after{content:'';position:absolute;inset:-6px;border-radius:50%}
/* A display of its own beats the hidden attribute, so the key stayed
   on screen for a Pokemon holding no stone at all whatever
   paintMegaButton set. The same trap caught three neighbours that are
   also toggled by the attribute: the stat stages on either card, the
   trainer's remaining team, and SCARE OFF on the move list. */
.bmega[hidden],
.bmenu[hidden],
.bstages[hidden],
.bcard__team[hidden],
.mvbtn[hidden]{display:none}
/* The orb stands upright inside the turned diamond. 32px artwork,
   kept pixel-sharp. */
.bmega img{
  width:calc(var(--d) - 8px);height:calc(var(--d) - 8px);
  object-fit:contain;image-rendering:pixelated;
  transform:rotate(-45deg);
  filter:drop-shadow(0 0 4px rgba(200,150,255,.85));
}
.bmega:hover,.bmega:focus-visible{filter:brightness(1.18);outline:none;
  transform:rotate(45deg) scale(1.08)}
/* Ultra Burst sits where the Mega key does - the two are never both on
   offer, since no Necrozma holds a Mega Stone - in Necrozma's gold. */
.bmega--ultra{border-color:var(--bslab-gold);animation-name:ultraPulse}
.bmega--ultra img{filter:drop-shadow(0 0 4px rgba(255,214,90,.9))}
.bmega:active{transform:rotate(45deg) scale(.96)}
@keyframes megaPulse{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 0 rgba(176,76,224,.6)}
  50%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 7px rgba(176,76,224,0)}
}
@keyframes ultraPulse{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 0 rgba(255,213,74,.6)}
  50%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 7px rgba(255,213,74,0)}
}

/* The transformation itself: a flare, a pulse, and the sprite swaps
   underneath while the light covers it. */
.bmon--me.is-mega img{animation:megaTransform .9s ease-in-out}
@keyframes megaTransform{
  0%{filter:none;transform:scale(1)}
  30%{filter:brightness(3) saturate(0);transform:scale(1.12)}
  55%{filter:brightness(4) saturate(0);transform:scale(.9)}
  80%{filter:brightness(2.2) saturate(.6);transform:scale(1.16)}
  100%{filter:none;transform:scale(1)}
}
.bmon--me.is-mega::before{
  content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;
  margin:-10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(200,150,255,.95),rgba(155,92,255,0) 70%);
  animation:megaFlare .9s ease-out forwards}
@keyframes megaFlare{
  0%{transform:scale(.4);opacity:0}
  35%{opacity:1}
  100%{transform:scale(14);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .bmega{animation:none}
  .bmon--me.is-mega img,.bmon--me.is-mega::before{animation:none}
}

/* ============================================================
   Battle Tower
   Opens like the PokéMart and the Guild Hall: the Tower's arena
   across the top, gold where the mart is blue, with the
   receptionist's line and the run's numbers on glass tiles. Then the
   tabs, then one of two floors: the picker (no run open) or the
   climb (a run open) - the fifty floors as a track beside the next
   trainer, the three you brought and the decision to press on. The
   payout for retiring sits next to the button that does it.
   ============================================================ */
.twr{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0;
  --gold:#F5C542;--gold-dk:#B8860B}

/* ── The arena front ─────────────────────────────────── */
.twrhero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;min-height:132px;padding:28px 16px 14px;flex-shrink:0;
  border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#3A3150,#1C1A26)}
.twrhero__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:brightness(.5) saturate(.75) sepia(.4) hue-rotate(-12deg);
  transform:scale(1.08);animation:scenePan 40s ease-in-out infinite alternate}
.twrhero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,22,.05),rgba(14,17,22,.85)),
    radial-gradient(ellipse 60% 90% at 0% 100%,rgba(245,197,66,.28),transparent 70%)}
/* A gold rail across the top, the Tower's answer to the mart's awning. */
.twrhero::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 26px,var(--gold-dk) 26px 30px);
  box-shadow:0 2px 10px rgba(245,197,66,.45)}
.twrhero__front{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.twrhero__sign{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;
  border-radius:8px;color:#2A2100;font-size:1.05rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(180deg,#FFE08A,var(--gold) 45%,var(--gold-dk));
  border:2px solid #FFF1C2;
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.twrhero__sign img{width:24px;height:24px;image-rendering:pixelated}
.twrhero__bubble{position:relative;margin:0;max-width:36ch;padding:8px 12px;
  border-radius:12px;color:#1B2330;font-size:.82rem;font-weight:600;line-height:1.35;
  background:rgba(255,255,255,.94);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.twrhero__bubble::before{content:'';position:absolute;left:18px;top:-5px;width:11px;height:11px;
  background:inherit;transform:rotate(45deg)}

.twrstats{display:flex;gap:8px;flex-wrap:wrap}
.twrstat{display:flex;align-items:center;gap:8px;min-width:104px;padding:7px 12px 7px 8px;
  border-radius:12px;color:var(--txt);
  background:rgba(14,17,22,.5);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.twrstat img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.twrstat span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.twrstat em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.twrstat b{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.twrstat--bp b{color:var(--gold)}

.twrtabs{display:flex;gap:2px;padding:3px;align-self:flex-start;flex-shrink:0;
  border-radius:99px;background:var(--ink);border:1px solid var(--line)}
.twrtab{flex:0 0 auto;padding:7px 18px;border-radius:99px;font-size:.8rem;font-weight:700;
  color:var(--txt-dim);background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s}
.twrtab:hover{color:var(--txt)}
.twrtab.is-on{background:var(--gold);color:#2A2100;
  box-shadow:0 4px 12px -4px rgba(245,197,66,.7)}
.twrtab span{margin-left:6px;padding:0 6px;border-radius:99px;font-size:.68rem;
  background:rgba(0,0,0,.14);font-variant-numeric:tabular-nums}
.twrtab:not(.is-on) span{background:rgba(255,255,255,.1)}

.twrbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;
  flex-direction:column;gap:12px}

.twrlocked{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:34px 20px;text-align:center}
.twrlocked img{width:56px;height:56px;object-fit:contain;
  image-rendering:pixelated;opacity:.35}
.twrlocked p{margin:0;font-size:.85rem;color:var(--txt-dim);
  max-width:40ch;line-height:1.5}

/* What the last floor did, said once. */
.twrresult{display:flex;flex-direction:column;gap:2px;padding:11px 14px;flex-shrink:0;
  border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-brd);
  border-left:4px solid var(--ok);animation:twrIn .45s ease-out}
.twrresult.is-bad{border-left-color:var(--danger)}
.twrresult b{font-size:.95rem}
.twrresult span{font-size:.78rem;color:var(--txt-dim)}
@keyframes twrIn{from{opacity:0;transform:translateY(-6px)}}

/* A panel on the floor. */
.twrpanel{padding:12px;border-radius:var(--r);
  background:linear-gradient(180deg,#1B222C,#141A22);border:1px solid var(--line)}
.twrpanel h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:.92rem}
.twrpanel h3 small,.twrh small{font-size:.7rem;font-weight:500;color:var(--txt-dim)}
.twrh{margin:4px 0 0;font-size:.82rem}
.twrnote{margin:0;font-size:.74rem;color:var(--txt-dim);line-height:1.5}
.twrtype{height:14px;width:auto;max-width:100%}

/* ── No run open: pick three ─────────────────────────── */
.twrlobby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:12px;
  align-items:start}
.twrpick{display:flex;flex-direction:column;gap:10px;min-width:0}
.twrpick__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.twrpick__head h3{margin:0}
.twrsrc{display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--ink);
  border:1px solid var(--line)}
.twrsrc__b{padding:5px 13px;border-radius:99px;border:0;background:transparent;font:inherit;
  font-size:.76rem;font-weight:700;color:var(--txt-dim);cursor:pointer}
.twrsrc__b.is-on{background:rgba(245,197,66,.18);color:var(--gold)}
.twrsrc__b span{margin-left:5px;font-size:.66rem;opacity:.8;font-variant-numeric:tabular-nums}
.twrsearch{width:100%;padding:8px 11px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line);color:var(--txt);
  font:inherit;font-size:.82rem}
.twrsearch:focus{outline:none;border-color:var(--gold)}

.twrmons{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.twrmon{--tc:var(--line);position:relative;display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:10px 6px 8px;border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 24%,transparent),transparent 62%),
    var(--ink-2);
  border:1px solid var(--line);color:var(--txt);font:inherit;cursor:pointer;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.twrmon:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}
.twrmon.is-picked{border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 6px 18px -6px rgba(245,197,66,.6)}
.twrmon.is-blocked{cursor:not-allowed;opacity:.5}
.twrmon.is-blocked .twrmon__art{filter:grayscale(1)}
.twrmon__art{width:60px;height:60px;object-fit:contain;image-rendering:pixelated}
.twrmon b{font-size:.78rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twrmon__types{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;min-height:14px;
  max-width:100%}
.twrmon__lv{font-size:.68rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.twrmon__lv i{font-style:normal;color:var(--gold)}
.twrmon__order{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;
  background:var(--gold);color:#2A2100;font-style:normal;font-size:.7rem;font-weight:800;
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.twrmon__item{position:absolute;top:5px;right:5px;width:22px;height:22px;
  object-fit:contain;image-rendering:pixelated}
.twrmon__why{font-style:normal;font-size:.62rem;color:var(--txt-dim);
  text-align:center;line-height:1.3;margin-top:2px}

.twrside{display:flex;flex-direction:column;gap:10px;position:sticky;top:0}
.twrside h3{margin:0}
.twrpodium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.twrslot{--tc:var(--line);position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;min-height:108px;padding:20px 4px 8px;
  border-radius:12px;background:var(--ink-2);border:1px dashed var(--line);
  color:var(--txt-dim);font:inherit;font-size:.72rem}
.twrslot.is-set{border-style:solid;border-color:color-mix(in srgb,var(--tc) 70%,#fff 0%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%),
    var(--ink-2);color:var(--txt);cursor:pointer}
button.twrslot.is-set:hover{border-color:var(--danger)}
.twrslot img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.twrslot b{font-size:.74rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twrslot > span{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:100%}
.twrslot .twrtype{height:12px}
.twrslot__no{position:absolute;top:5px;left:6px;font-style:normal;font-size:.6rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}

.twrrules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.twrrules li{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--txt-dim);
  line-height:1.35}
.twrrules img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}

.twrgo{width:100%;padding:12px 14px;border-radius:12px;border:0;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:900;letter-spacing:.03em;color:#fff;
  background:linear-gradient(180deg,#FF6B5E,var(--red));
  box-shadow:0 6px 16px -6px rgba(238,21,21,.8),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .15s,filter .15s}
.twrgo:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.twrgo:disabled{cursor:not-allowed;color:var(--txt-dim);background:var(--ink-3);box-shadow:none}
.twrquit{width:100%;padding:11px 14px;border-radius:12px;cursor:pointer;font:inherit;
  font-size:.84rem;font-weight:700;color:var(--gold);background:transparent;
  border:1px solid rgba(245,197,66,.5);transition:background .15s}
.twrquit:hover:not(:disabled){background:rgba(245,197,66,.1)}
.twrquit:disabled{opacity:.5;cursor:not-allowed}

.twrladder{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.twrladder__t{display:flex;flex-direction:column;align-items:center;padding:5px 2px;
  border-radius:8px;background:var(--ink-2);border:1px solid var(--line);opacity:.6}
.twrladder__t.is-done{opacity:1;border-color:var(--ok)}
.twrladder__t span{font-size:.62rem;color:var(--txt-dim)}
.twrladder__t b{font-size:.8rem;color:var(--gold);font-variant-numeric:tabular-nums}

/* ── A run open: the climb ───────────────────────────── */
.twrclimb{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:start}
.twrclimb__main{display:flex;flex-direction:column;gap:12px;min-width:0}

.twrtrack{position:sticky;top:0}
.twrfloors{position:relative;margin:0;padding:0 0 0 2px;list-style:none;
  max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;
  scrollbar-width:thin}
.twrfloor{position:relative;display:flex;align-items:center;gap:8px;min-height:22px;
  padding-left:4px}
/* The shaft: a line through every floor, gold below the one in play. */
.twrfloor::before{content:'';position:absolute;left:16px;top:-3px;bottom:-3px;width:2px;
  background:var(--line)}
.twrfloor.is-done::before{background:var(--gold-dk)}
.twrfloor__n{position:relative;z-index:1;width:26px;height:22px;border-radius:6px;
  display:grid;place-items:center;font-size:.66rem;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--txt-dim);
  background:var(--ink-2);border:1px solid var(--line)}
.twrfloor.is-done .twrfloor__n{color:#2A2100;background:var(--gold-dk);border-color:var(--gold-dk)}
.twrfloor.is-now .twrfloor__n{color:#fff;background:var(--red);border-color:#FF8A80;
  box-shadow:0 0 0 3px rgba(238,21,21,.25),0 0 14px rgba(238,21,21,.6);
  animation:twrPulse 1.6s ease-in-out infinite}
.twrfloor.is-mile .twrfloor__n{border-color:var(--gold)}
.twrfloor__bp{font-size:.66rem;font-weight:800;color:var(--gold);padding:1px 7px;
  border-radius:99px;background:rgba(245,197,66,.12);border:1px solid rgba(245,197,66,.3)}
.twrfloor.is-done .twrfloor__bp{opacity:.55}
/* Gatekeepers and bosses stand out on the track before they are met. */
.twrfloor__tag{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;color:#CFE3F7;background:rgba(42,117,187,.25);
  border:1px solid rgba(42,117,187,.5)}
.twrfloor__tag.is-boss{color:#2A2100;background:var(--gold);border-color:var(--gold)}
.twrfloor.is-gate .twrfloor__n{border-color:#5B9BD5}
.twrfloor.is-boss .twrfloor__n{border-color:var(--gold);color:var(--gold)}
.twrfloor.is-boss.is-done .twrfloor__n,.twrfloor.is-gate.is-done .twrfloor__n{color:#2A2100}
/* Above the last floor that pays: the shaft turns red, and a line
   across it says where the BP end. */
.twrfloor.is-beyond::before{background:rgba(238,21,21,.35)}
.twrfloor.is-beyond.is-done::before{background:#B00C0C}
.twrfloor.is-beyond:not(.is-done):not(.is-now) .twrfloor__n{border-color:rgba(238,21,21,.45)}
.twrfloor.is-beyond.is-done .twrfloor__n{color:#fff;background:#B00C0C;border-color:#B00C0C}
.twrfloor__line{display:flex;align-items:center;gap:6px;margin:4px 0;list-style:none;
  font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#FF8A80}
.twrfloor__line::before,.twrfloor__line::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(238,21,21,.6),transparent)}
/* The player's best run and the ranking's top, on the track. */
.twrfloor__mark{font-size:.58rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;color:#FFE08A;border:1px solid rgba(245,197,66,.5);
  background:rgba(245,197,66,.1)}
.twrfloor__mark.is-mine{color:#B9F5D3;border-color:rgba(63,217,138,.5);background:rgba(63,217,138,.1)}
@keyframes twrPulse{50%{box-shadow:0 0 0 5px rgba(238,21,21,.12),0 0 20px rgba(238,21,21,.75)}}

.twrfoe{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.twrfoe__floor{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:14px;flex-shrink:0;color:#2A2100;
  background:linear-gradient(180deg,#FFE08A,var(--gold) 50%,var(--gold-dk));
  box-shadow:0 6px 16px -6px rgba(245,197,66,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.twrfoe__floor em{font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase}
.twrfoe__floor b{font-size:1.9rem;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.twrfoe__floor small{font-size:.62rem;font-weight:700}
.twrfoe__info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:150px}
.twrfoe__info b{font-size:.95rem}
.twrfoe__info > span{font-size:.78rem;color:var(--txt-dim)}
.twrfoe__lv{font-style:normal;font-weight:800;color:#FF8A80}
.twrfoe__ai{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--txt) !important}
.twrpips{display:inline-flex;gap:3px}
.twrpips i{width:9px;height:9px;border-radius:2px;background:var(--ink-3);border:1px solid var(--line)}
.twrpips i.is-on{background:var(--red);border-color:#FF8A80}
.twrfoe__balls{display:flex;gap:6px}
.twrfoe.is-boss{padding:10px;margin:-10px;border-radius:12px;
  background:radial-gradient(ellipse 70% 100% at 0% 50%,rgba(245,197,66,.16),transparent 70%)}
.twrfoe.is-gate .twrfoe__floor{background:linear-gradient(180deg,#A9D1F5,#5B9BD5 50%,#2A75BB)}
.twrfoe__face{width:72px;height:72px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;
  filter:drop-shadow(0 4px 10px rgba(245,197,66,.35))}
.twrfoe__tag{align-self:flex-start;font-style:normal;font-size:.62rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:99px;
  color:#CFE3F7;background:rgba(42,117,187,.3);border:1px solid rgba(42,117,187,.6)}
.twrfoe__tag.is-boss{color:#2A2100;background:var(--gold);border-color:var(--gold)}
.twrfoe__quote{font-size:.78rem;font-style:italic;color:var(--txt);opacity:.85;line-height:1.4}
.twrfoe__ball{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--ink-2);border:1px solid var(--line)}
.twrfoe__ball img{width:26px;height:26px;image-rendering:pixelated}

.twrteam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.twrteam__m{--tc:var(--line);position:relative;display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:20px 6px 8px;border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 26%,transparent),transparent 65%),
    var(--ink-2);border:1px solid var(--line)}
.twrteam__art{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.twrteam__m b{font-size:.8rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.twrdecide{display:flex;flex-direction:column;gap:10px}
.twrpay{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.twrpay div{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;
  background:var(--ink-2);border:1px solid var(--line)}
.twrpay div.is-now{border-color:rgba(245,197,66,.55);background:rgba(245,197,66,.08)}
.twrpay em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim)}
.twrpay b{font-size:1rem;color:var(--gold);font-variant-numeric:tabular-nums}
.twrdecide__btns{display:grid;grid-template-columns:3fr 2fr;gap:8px}

/* ── The exchange ────────────────────────────────────── */
.twrshop{display:flex;flex-direction:column;gap:10px}
.twrcats{display:flex;flex-wrap:wrap;gap:6px}
.twrcat{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;
  border-radius:8px;font:inherit;font-size:.76rem;font-weight:700;color:var(--txt-dim);
  white-space:nowrap;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--gold-dk);
  transition:color .15s,background .15s,border-color .15s}
.twrcat img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.twrcat i{font-style:normal;font-size:.66rem;padding:0 6px;border-radius:99px;
  background:rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.twrcat:hover{color:var(--txt);border-color:var(--gold)}
.twrcat.is-on{color:#fff;border-color:var(--gold);border-top-color:#FFE08A;
  background:linear-gradient(180deg,rgba(245,197,66,.3),rgba(245,197,66,.08))}

.twritems{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.twritem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(180deg,#1B222C,#141A22);border:1px solid var(--line)}
.twritem.is-poor .twritem__art,.twritem.is-poor .twritem__txt{opacity:.55}
.twritem__art{width:38px;height:38px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.twritem__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.twritem__txt b{font-size:.86rem}
.twritem__txt p{margin:0;font-size:.73rem;color:var(--txt-dim);line-height:1.4}
.twritem__held{font-size:.7rem;color:var(--ok)}
.twrprice{flex:0 0 auto;min-width:74px;padding:7px 10px;border-radius:99px;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:#2A2100;background:linear-gradient(180deg,#FFE08A,var(--gold));border:0;
  box-shadow:0 3px 10px -4px rgba(245,197,66,.8)}
.twrprice:hover:not(:disabled){filter:brightness(1.08)}
.twrprice:disabled{cursor:not-allowed;color:var(--txt-dim);background:var(--ink-3);box-shadow:none}
.twrprice.is-poor{color:#FF8A80}

.twrtoast{position:fixed;left:50%;bottom:24px;z-index:220;max-width:min(460px,calc(100vw - 32px));
  padding:10px 16px;border-radius:12px;font-size:.84rem;font-weight:600;color:var(--txt);
  background:rgba(20,24,31,.96);border:1px solid rgba(245,197,66,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,10px);
  transition:opacity .25s,transform .25s;pointer-events:none}
.twrtoast.is-bad{border-color:rgba(238,21,21,.6)}
.twrtoast.is-in{opacity:1;transform:translate(-50%,0)}

/* The floor on the battle screen, so a fight in the Tower says so. */
.btower{position:absolute;top:10px;left:50%;z-index:6;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:99px;
  font-size:.74rem;font-weight:800;color:var(--txt);white-space:nowrap;
  background:rgba(14,17,22,.62);border:1px solid rgba(245,197,66,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btower img{width:20px;height:20px;image-rendering:pixelated}
.btower b{color:#F5C542}
.btower span{color:var(--txt-dim);font-weight:700}
.btower__tag{font-style:normal;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 7px;border-radius:99px;color:#CFE3F7;background:rgba(42,117,187,.35)}
.btower__tag.is-boss{color:#2A2100;background:#F5C542}

/* ── The ranking ─────────────────────────────────────── */
.twrranking{display:flex;flex-direction:column;gap:10px}
.twrranking h3{margin:0}
.twrranks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.twrrank{display:grid;grid-template-columns:40px 40px minmax(0,1fr) auto;align-items:center;
  gap:10px;padding:8px 12px 8px 8px;border-radius:12px;background:var(--ink-2);
  border:1px solid var(--line)}
.twrrank.is-gold{border-color:rgba(255,213,74,.55);
  background:linear-gradient(90deg,rgba(255,213,74,.12),var(--ink-2) 60%)}
.twrrank.is-silver{border-color:rgba(200,208,218,.45)}
.twrrank.is-bronze{border-color:rgba(205,127,50,.45)}
.twrrank.is-you{box-shadow:inset 3px 0 0 var(--gold)}
.twrrank__no{display:flex;justify-content:center;font-family:var(--mono);font-size:14px;
  font-weight:800;color:var(--txt-dim)}
.twrrank__ava{width:40px;height:40px;border-radius:50%;object-fit:cover;
  background:radial-gradient(circle at 50% 35%,var(--ink-3),var(--ink));border:1px solid var(--line)}
.twrrank__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.twrrank__id b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twrrank__you{margin-left:6px;padding:0 6px;border-radius:99px;font-style:normal;font-size:.6rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2A2100;background:var(--gold)}
.twrrank__live{align-self:flex-start;font-style:normal;font-size:.64rem;font-weight:800;
  padding:1px 7px;border-radius:99px;color:#fff;background:rgba(238,21,21,.35);
  border:1px solid rgba(238,21,21,.6);animation:twrLive 2.4s ease-in-out infinite}
@keyframes twrLive{50%{background:rgba(238,21,21,.6)}}
.twrrank__best{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.twrrank__best b{font-size:1.25rem;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.twrrank__best.is-beyond b{color:#FF8A80}
.twrrank__best small{font-size:.6rem;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.08em}
.twrrank__gap{text-align:center;color:var(--txt-dim);letter-spacing:.3em;list-style:none}
.twrranking__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.twrranking__left{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:99px;color:#FFE08A;background:rgba(245,197,66,.1);
  border:1px solid rgba(245,197,66,.35)}
/* What the places pay, as a strip of chips. */
.twrprizes{margin:0;padding:0;list-style:none;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.twrprizes__p{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;
  background:var(--ink-2);border:1px solid var(--line)}
.twrprizes__p em{font-style:normal;font-size:.66rem;font-weight:800;color:var(--txt-dim);
  font-family:var(--mono)}
.twrprizes__p b{font-size:.8rem;color:var(--gold);font-variant-numeric:tabular-nums;margin-right:auto}
.twrprizes__p img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.twrprizes__p.is-gold{border-color:rgba(255,213,74,.55);background:linear-gradient(135deg,rgba(255,213,74,.14),var(--ink-2))}
.twrprizes__p.is-silver{border-color:rgba(200,208,218,.45)}
.twrprizes__p.is-bronze{border-color:rgba(205,127,50,.45)}
/* Last month's podium. */
.twrlast{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.twrlast__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.twrlast__p{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;
  border-radius:10px;background:var(--ink-2);border:1px solid var(--line);min-width:0}
.twrlast__p b{font-size:.8rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twrlast__p small{font-size:.64rem;color:var(--txt-dim)}
.twrlast__p .lbmedal{width:24px;height:24px}
/* A prize from a closed month, at the top of the challenge. */
.twrprize{flex-direction:row;align-items:center;gap:12px;border-left-color:var(--gold);
  background:linear-gradient(90deg,rgba(245,197,66,.14),transparent 70%)}
.twrprize > img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.twrprize > span{display:flex;flex-direction:column;gap:2px}
@media (prefers-reduced-motion:reduce){.twrrank__live{animation:none}}

@media (max-width:760px){
  .twrlobby,.twrclimb{grid-template-columns:1fr}
  .twrside,.twrtrack{position:static}
  /* On a phone the decision comes first and the track under it. */
  .twrtrack{order:2}
  .twrfloors{max-height:180px}
  .twrdecide__btns{grid-template-columns:1fr}
}
@media (max-width:480px){
  .twrhero{min-height:0;padding-top:20px}
  .twrstat{min-width:0;flex:1}
  .twrpay{grid-template-columns:1fr 1fr}
  .twrpay div:last-child{grid-column:1 / -1}
  .twrmons{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .twritems{grid-template-columns:1fr}
  .twrrank{grid-template-columns:30px 32px minmax(0,1fr) auto;gap:8px}
  .twrrank__ava{width:32px;height:32px}
  .twrrank .lbmedal{width:24px;height:24px}
  .twrfoe__floor{width:68px;height:68px}
  .btower{top:6px;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .twrhero__photo,.twrfloor.is-now .twrfloor__n,.twrresult{animation:none}
}

/* ============================================================
   Story
   The journal: a banner with the act and the badge road, a tab
   track, and three pages -- what is next, every chapter, and the
   people in them. Laid out like Friends & Trading and the Guild
   Hall. Chapters still ahead keep their titles hidden, so the list
   shows how far you have come without spoiling what is coming.
   ============================================================ */
.story{display:flex;flex-direction:column;gap:14px;max-width:900px;
  margin:0 auto;min-width:0}
.story .btn{display:inline-flex;align-items:center;justify-content:center;
  gap:6px;color:var(--txt);cursor:pointer;white-space:nowrap}
.story .btn--pri{color:#fff}
.story .btn--ghost{background:transparent;border-color:var(--line);
  color:var(--txt-dim)}
.story .btn--ghost:hover{background:rgba(255,255,255,.05);color:var(--txt);
  border-color:var(--txt-dim)}
.stinline{width:16px;height:16px;object-fit:contain;vertical-align:-3px;
  image-rendering:pixelated}

/* ── The banner ──────────────────────────────────────── */
.sthero{position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:12px;
  padding:16px 18px 14px;border-radius:var(--r);color:#fff;
  background:
    radial-gradient(110% 140% at 0% 0%,rgba(111,53,252,.55),transparent 62%),
    radial-gradient(110% 140% at 100% 100%,rgba(255,203,5,.28),transparent 64%),
    linear-gradient(120deg,#24164A,#1B2C47);
  border:1px solid rgba(177,140,255,.3);
  box-shadow:0 16px 36px -16px rgba(111,53,252,.55)}
/* A ley line drawn across the corner, faint. */
.sthero::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-60px;top:-70px;width:240px;height:240px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 26px rgba(255,255,255,.03)}
.sthero__main{display:flex;align-items:center;gap:14px;min-width:0}
.sthero__lead{flex-shrink:0;width:64px;height:64px;border-radius:50%;
  overflow:hidden;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 0 0 4px rgba(111,53,252,.3),0 0 24px rgba(111,53,252,.45);
  animation:frFloat 4.5s ease-in-out infinite}
.sthero__lead img{width:100%;height:100%;object-fit:cover;object-position:top}
.sthero__id{flex:1;min-width:0}
.sthero__act{margin:0;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.sthero__count{margin:2px 0 8px;font-size:20px;font-weight:900;line-height:1.2;
  text-shadow:0 2px 6px rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.sthero__bar{height:8px;border-radius:99px;background:rgba(8,10,14,.45);
  overflow:hidden}
.sthero__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#6f35fc,#b18cff,var(--yellow));
  transition:width .5s ease-out}

/* The badge road: eight badges and the League at the end of it. It
   scrolls inside itself on a narrow screen, never the page. */
.sttrack{display:flex;align-items:center;gap:0;overflow-x:auto;
  padding:4px 2px;scrollbar-width:none}
.sttrack::-webkit-scrollbar{display:none}
.sttrack__b{flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:rgba(8,10,14,.4);
  border:1px solid rgba(255,255,255,.14)}
.sttrack__b img{width:22px;height:22px;object-fit:contain;
  image-rendering:pixelated;filter:grayscale(1) brightness(.6);opacity:.55}
.sttrack__b.is-got{border-color:rgba(255,203,5,.6);
  box-shadow:0 0 10px rgba(255,203,5,.35)}
.sttrack__b.is-got img{filter:none;opacity:1}
.sttrack__b.is-next{border-color:rgba(177,140,255,.8);
  animation:frGlow 2.4s ease-in-out infinite}
.sttrack__line{flex:1 0 8px;height:2px;min-width:8px;
  background:rgba(255,255,255,.14)}
.sttrack__line.is-got{background:rgba(255,203,5,.6)}
.sttrack__end{flex-shrink:0;padding:4px 10px;border-radius:99px;font-size:11px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.6);background:rgba(8,10,14,.4);
  border:1px solid rgba(255,255,255,.14)}
.sttrack__end.is-got{color:var(--ink);background:var(--yellow);
  border-color:var(--yellow)}

.sthero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ststat{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:9px;
  align-items:center;padding:8px 11px;border-radius:12px;color:#fff;
  background:rgba(8,10,14,.34);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px)}
.ststat img{grid-row:1/3;width:28px;height:28px;object-fit:contain;
  image-rendering:pixelated}
.ststat span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:800;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ststat b{font-size:15px;font-weight:900;white-space:nowrap;
  font-variant-numeric:tabular-nums}

.stbody{display:flex;flex-direction:column;gap:12px;min-width:0}
.stbody.is-entering{animation:nursIn .22s ease-out}

/* ── Next up ─────────────────────────────────────────── */
.stnext{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(111,53,252,.1),var(--ink-3) 70%)}
.stnext__ico{flex-shrink:0;width:44px;height:44px;object-fit:contain;
  image-rendering:pixelated}
.stnext__ico--leader{width:52px;height:52px;object-fit:cover;object-position:top;
  border-radius:50%;background:var(--ink);border:2px solid var(--line);
  image-rendering:auto}
.stnext__txt{flex:1;min-width:0}
.stnext__tag{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.stnext h4{margin:2px 0 4px;font-size:16px;font-weight:800;color:var(--txt)}
.stnext p{margin:0;font-size:13px;line-height:1.55;color:var(--txt-dim)}
.stnext p b{color:var(--txt)}
.stnext__bar{height:6px;margin-top:8px;border-radius:99px;background:var(--ink);
  overflow:hidden}
.stnext__bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.stnext.is-here{border-color:rgba(255,203,5,.55);
  animation:frGlow 2.4s ease-in-out infinite}
.stnext.is-here .stnext__tag{color:var(--yellow)}
.stnext.is-missed{border-color:rgba(255,166,0,.55);
  background:linear-gradient(180deg,rgba(255,166,0,.12),var(--ink-3) 70%)}
.stnext.is-missed .stnext__tag{color:#FFB347}
.stnext.is-travel .stnext__tag{color:#b18cff}
.stnext.is-done{border-color:rgba(63,217,138,.45);
  background:linear-gradient(180deg,rgba(63,217,138,.1),var(--ink-3) 70%)}
.stnext.is-done .stnext__tag{color:var(--ok)}

/* ── Chapter rows ────────────────────────────────────── */
.stlist{display:flex;flex-direction:column;gap:6px}
.strow{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;
  align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  background:var(--ink-3);border:1px solid var(--line);
  border-left:3px solid var(--line)}
.strow__n{font-size:12px;font-weight:800;color:var(--txt-dim);text-align:right;
  font-variant-numeric:tabular-nums}
.strow__id{display:flex;flex-direction:column;gap:2px;min-width:0}
.strow__id b{font-size:14px;font-weight:800;color:var(--txt);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.strow__id small{font-size:12px;color:var(--txt-dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.strow__ok{font-size:11px}
.strow__cast{display:flex}
.strow__cast .frava{margin-left:-6px;border-color:var(--ink-3)}
.strow__cast .frava:first-child{margin-left:0}
.strow__act{display:flex;justify-content:flex-end}
.strow.is-seen{border-left-color:var(--ok)}
.strow.is-current{border-left-color:var(--yellow);
  background:linear-gradient(90deg,rgba(255,203,5,.08),var(--ink-3) 60%)}
.strow.is-missed{border-left-color:#FFB347;
  background:linear-gradient(90deg,rgba(255,166,0,.1),var(--ink-3) 60%)}
.strow.is-ahead .strow__id b{color:var(--txt-dim);letter-spacing:.12em}
.stlock{display:inline-flex;color:var(--txt-dim);opacity:.6}

/* ── Acts ────────────────────────────────────────────── */
.stact{border-radius:var(--r);border:1px solid var(--line);background:var(--ink-2);
  overflow:hidden}
.stact[open]{border-color:rgba(177,140,255,.35)}
.stact__head{display:flex;align-items:center;gap:11px;padding:10px 14px;
  cursor:pointer;list-style:none}
.stact__head::-webkit-details-marker{display:none}
.stact__head img{flex-shrink:0;width:36px;height:36px;border-radius:50%;
  object-fit:cover;object-position:top;background:var(--ink);
  border:2px solid var(--line)}
.stact__id{flex:1;display:flex;flex-direction:column;min-width:0}
.stact__id b{font-size:14px;font-weight:800;color:var(--txt)}
.stact__id small{font-size:12px;color:var(--txt-dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.stact__n{font-size:12px;font-weight:800;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.stact .stlist{padding:0 10px 10px}
.stact.is-done .stact__head img{border-color:var(--ok)}
.stact.is-locked .stact__head img{filter:grayscale(1);opacity:.6}

/* ── Cast ────────────────────────────────────────────── */
.stcastgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px}
.stcast{display:flex;gap:12px;padding:12px 14px;border-radius:var(--r);
  background:var(--ink-3);border:1px solid var(--line);min-width:0}
.stcast__pic{flex-shrink:0;width:64px;height:64px;border-radius:50%;
  object-fit:cover;object-position:top;background:var(--ink);
  border:2px solid rgba(177,140,255,.5)}
.stcast__id{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  min-width:0}
.stcast__id b{font-size:15px;font-weight:900;color:var(--txt)}
.stcast__id p{margin:0;font-size:12.5px;line-height:1.5;color:var(--txt-dim)}
.stcast__more summary{font-size:12px;color:var(--txt-dim);cursor:pointer}
.stcast__more ul{margin:4px 0 0;padding-left:16px;font-size:12px;
  line-height:1.5;color:var(--txt-dim)}
.stcast__rec{font-size:12px;color:var(--txt-dim)}
/* Someone not met yet is a silhouette: the portrait blacked out, with
   a faint rim so the shape reads against the dark card. */
.stcast.is-unmet .stcast__pic{background:transparent;border-style:dashed;
  border-color:var(--line);
  filter:brightness(0) drop-shadow(0 0 1.5px rgba(255,255,255,.45))}

/* The sidebar button lights up when a chapter is due here or one
   walked past is waiting -- the same dot the patch notes use. */
.sidenav[data-modal="story"]{position:relative}
.sidenav[data-modal="story"].has-new::after{
  content:'';position:absolute;top:8px;left:26px;
  width:7px;height:7px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 0 2px var(--ink-2)}

@media (max-width:480px){
  .sthero{padding:14px 14px 12px}
  .sthero__lead{width:52px;height:52px}
  .sthero__count{font-size:17px}
  .sthero__stats{grid-template-columns:minmax(0,1fr)}
  .stnext{flex-wrap:wrap}
  .stnext .btn{width:100%}
  .strow{grid-template-columns:24px minmax(0,1fr) auto}
  .strow__cast{display:none}
}

/* Status condition icon, wherever a Pokemon is listed outside battle
   (the Pokemon Center, the item picker). Sized to sit on one line
   with the health figure next to it. */
.stico{
  height:14px;width:auto;vertical-align:-3px;margin-left:5px;
  image-rendering:pixelated;
}

/* ============================================================
   Evolution
   The classic sequence: the field darkens, the Pokemon becomes a
   white silhouette, and it pulses between two sizes — faster each
   time — until the new species is standing there instead.
   ============================================================ */

/* The darkened field behind it. */
.evoveil{
  position:absolute;inset:0;z-index:5;
  background:radial-gradient(ellipse at 50% 55%,
    rgba(20,10,40,.55), rgba(6,4,14,.94) 70%);
  opacity:0;transition:opacity .45s ease;
  pointer-events:none;
}
.evoveil.is-in{opacity:1}

/* The Pokemon itself, lifted above the veil and burnt out to a
   silhouette so the species underneath cannot be read. */
.bmon.is-evolving,
img.is-evolving{
  position:relative;z-index:6;
  filter:brightness(0) invert(1) drop-shadow(0 0 14px rgba(190,225,255,.95));
  transition:transform .28s cubic-bezier(.34,1.4,.5,1), filter .2s ease;
}
img.is-evo-big{ transform:scale(1.42) }

/* The moment it resolves: a white bloom, then back to normal colour. */
img.is-evo-flash{
  filter:brightness(2.2) drop-shadow(0 0 26px rgba(255,255,255,1));
}

@media (prefers-reduced-motion: reduce){
  .bmon.is-evolving, img.is-evolving{ transition:none }
  img.is-evo-big{ transform:none }
}

/* ============================================================
   Marketplace and auction house
   A town scene with the wallet, the listings and the post on glass
   tiles; a pill tab bar; listing cards lit in the Pokemon's first
   type. A card is compact - sprite, types, IVs at a glance, price and
   button - and opens to the whole Pokemon, because buying one you
   cannot inspect is a lottery rather than a trade.
   ============================================================ */
.mkx{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.mkbody{flex:1;min-height:0;overflow-y:auto;padding:2px 2px 10px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.mkbody.is-in>*{animation:mkIn .22s ease-out}
@keyframes mkIn{from{opacity:0;transform:translateY(5px)}}

/* ── The scene ───────────────────────────────────────── */
.mkhero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;min-height:112px;padding:16px 16px 14px;flex-shrink:0;
  border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#4A6A8C,#2B3A4C)}
.mkhero__photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:brightness(.62) saturate(1.05);
  transform:scale(1.08);animation:scenePan 40s ease-in-out infinite alternate}
.mkhero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,22,.05),rgba(14,17,22,.8)),
    radial-gradient(ellipse 60% 90% at 0% 100%,rgba(255,203,5,.16),transparent 70%)}
.mkhero__txt{display:flex;flex-direction:column;gap:3px;min-width:0;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.mkhero__kicker{font-size:.68rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--yellow)}
.mkhero__txt p{margin:0;font-size:.86rem;line-height:1.4;max-width:40ch}

.mkstats{display:flex;gap:8px;flex-wrap:wrap}
.mkstat{display:flex;align-items:center;gap:8px;min-width:118px;padding:7px 12px 7px 8px;
  border-radius:12px;color:var(--txt);text-align:left;
  background:rgba(14,17,22,.5);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mkstat img{width:28px;height:28px;image-rendering:pixelated;flex-shrink:0}
.mkstat span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.mkstat em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-dim)}
.mkstat b{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.mkstat.is-btn{cursor:pointer;transition:border-color .2s,transform .15s}
.mkstat.is-btn:hover,.mkstat.is-btn:focus-visible{border-color:var(--yellow);
  transform:translateY(-1px);outline:none}
.mkstat.is-due{border-color:rgba(255,203,5,.6)}
.mkstat.is-due b{color:var(--yellow)}
.mkstat.is-due img{animation:mkWiggle 2.6s ease-in-out infinite}
@keyframes mkWiggle{0%,80%,100%{transform:none}85%{transform:rotate(-12deg)}
  92%{transform:rotate(10deg)}}

/* ── Tabs ────────────────────────────────────────────── */
.mktabs{display:flex;gap:2px;padding:3px;flex-shrink:0;align-self:flex-start;
  max-width:100%;overflow-x:auto;scrollbar-width:none;
  border-radius:99px;background:var(--ink);border:1px solid var(--line)}
.mktabs::-webkit-scrollbar{display:none}
.mktab{flex:0 0 auto;padding:7px 15px;border-radius:99px;font-size:.8rem;font-weight:700;
  color:var(--txt-dim);background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s}
.mktab:hover{color:var(--txt)}
.mktab.is-on{background:var(--red);color:#fff;
  box-shadow:0 4px 12px -4px rgba(238,21,21,.7)}
.mktab span{margin-left:6px;padding:0 6px;border-radius:99px;font-size:.68rem;
  background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
.mktab.is-due:not(.is-on) span{background:var(--yellow);color:#2a2100}

/* ── Controls ────────────────────────────────────────── */
.mkf{padding:7px 12px;border-radius:var(--r-sm);font:inherit;font-size:.8rem;
  color:var(--txt);background:var(--ink);border:1px solid var(--line);
  transition:border-color .2s}
.mkf:focus{outline:none;border-color:var(--blue)}
.mkf--search{flex:1;min-width:150px;border-radius:99px;padding:7px 14px}
.mkf--text{width:140px}
.mkf--num{width:104px;font-variant-numeric:tabular-nums}

.mkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.mkseg{display:inline-flex;gap:2px;padding:3px;border-radius:99px;flex-shrink:0;
  background:var(--ink);border:1px solid var(--line)}
.mkseg__btn{padding:5px 13px;border-radius:99px;font-size:.76rem;font-weight:700;
  color:var(--txt-dim);background:transparent;border:0;cursor:pointer;
  transition:background .2s,color .2s}
.mkseg__btn:hover{color:var(--txt)}
.mkseg__btn.is-on{background:var(--ink-3);color:var(--txt);
  box-shadow:inset 0 0 0 1px var(--line)}
.mkseg__btn span{margin-left:6px;font-size:.7rem;opacity:.7;
  font-variant-numeric:tabular-nums}
.mkseg--wide{display:flex}
.mkseg--wide .mkseg__btn{flex:1}
.mkseg--wide .mkseg__btn.is-on{background:var(--red);color:#fff;box-shadow:none}

.mkfbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:99px;font-size:.78rem;font-weight:700;color:var(--txt);
  background:var(--ink-3);border:1px solid var(--line);cursor:pointer;
  transition:border-color .2s}
.mkfbtn:hover,.mkfbtn.is-on{border-color:var(--yellow)}
.mkfbtn span{min-width:18px;padding:0 5px;border-radius:99px;font-size:.68rem;
  background:var(--yellow);color:#2a2100;text-align:center}

.mkfilters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;
  padding:10px 12px;border-radius:var(--r);background:var(--glass);
  border:1px solid var(--glass-brd);animation:mkIn .18s ease-out}
.mkchips{display:flex;gap:6px;flex-wrap:wrap}
.mkchip{padding:5px 12px;border-radius:99px;font-size:.74rem;font-weight:700;
  color:var(--txt-dim);background:var(--ink);border:1px solid var(--line);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mkchip:hover{color:var(--txt);border-color:var(--txt-dim)}
.mkchip.is-on{color:#2a2100;background:var(--yellow);border-color:var(--yellow)}
.mkchip.is-x::after{content:'×';margin-left:6px;font-weight:900}
.mkactive{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.mkactive .mkchip{padding:3px 10px;font-size:.7rem}
.mkactive__clear{font-size:.72rem;font-weight:700;color:var(--txt-dim);
  background:none;border:0;cursor:pointer;text-decoration:underline}
.mkactive__clear:hover{color:var(--txt)}
.mkcount{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-dim)}

/* ── Listing cards ───────────────────────────────────── */
.mklist{display:flex;flex-direction:column;gap:10px}
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;
  align-items:start}
.mkcard{--tc:var(--line);position:relative;display:flex;flex-direction:column;
  min-width:0;border-radius:var(--r);overflow:hidden;
  background:
    radial-gradient(ellipse 85% 70% at 0% 0%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 70%),
    var(--glass);
  border:1px solid var(--glass-brd);
  transition:transform .18s,border-color .18s,box-shadow .18s,opacity .25s}
.mkcard:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--tc) 55%,transparent);
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--tc) 80%,transparent)}
.mkcard.is-mine{border-color:rgba(255,203,5,.35)}
.mkcard.is-winning{border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.mkcard.is-closed{opacity:.72}
.mkcard.is-gone{opacity:0;transform:scale(.96)}
.mkgrid>.mkcard{animation:mkIn .2s ease-out backwards}
.mkgrid>.mkcard:nth-child(2){animation-delay:.03s}
.mkgrid>.mkcard:nth-child(3){animation-delay:.06s}
.mkgrid>.mkcard:nth-child(4){animation-delay:.09s}
.mkgrid>.mkcard:nth-child(n+5){animation-delay:.12s}

.mkcard.is-ghost{min-height:176px;
  background:linear-gradient(100deg,var(--glass) 30%,var(--ink-3) 50%,var(--glass) 70%) 0 0/300% 100%;
  animation:mkShimmer 1.4s linear infinite}
@keyframes mkShimmer{to{background-position:-150% 0}}

.mkribbon{position:absolute;top:10px;right:-30px;z-index:1;width:110px;padding:2px 0;
  transform:rotate(35deg);font-size:.6rem;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;color:#fff;background:var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mkribbon.is-sold,.mkribbon.is-won,.mkribbon.is-winning{background:var(--ok);color:#0d2417}
.mkribbon.is-outbid{background:var(--red)}
.mkribbon.is-own{background:var(--yellow);color:#2a2100}
.mkribbon.is-expired,.mkribbon.is-cancelled,.mkribbon.is-closed{background:#4A5566}

.mkcard__top{display:flex;gap:10px;padding:12px 12px 8px}
.mkcard__art{position:relative;flex:0 0 76px;height:76px;display:grid;place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 9px,rgba(255,255,255,.07) 9px 11px,transparent 11px),
    linear-gradient(180deg,rgba(255,255,255,.06) 0 47%,rgba(255,255,255,.1) 47% 53%,rgba(255,255,255,.03) 53%),
    color-mix(in srgb,var(--tc) 18%,var(--ink))}
.mkcard__art img{width:72px;height:72px;object-fit:contain;image-rendering:pixelated}
.mkcard:hover .mkcard__art img{animation:monHop .45s ease-out}
.mkcard.is-shiny .mkcard__art img{filter:drop-shadow(0 0 5px rgba(255,213,74,.6))}
.mkcard.is-shadow .mkcard__art img{filter:drop-shadow(0 0 6px rgba(155,92,255,.75))}
.mktag{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  padding:1px 7px;border-radius:99px;font-size:.58rem;font-weight:900;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.mktag--shiny{background:var(--shiny);color:#2a2100}
.mktag--shadow{background:var(--shadow);color:#fff}
.mktag--shiny+.mktag--shadow{bottom:12px}
.mkcard__id{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.mkmon__head{display:flex;align-items:baseline;gap:6px;min-width:0}
.mkmon__head b{font-size:.98rem;font-weight:800;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mkmon__lv{font-size:.72rem;font-weight:700;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.mkmon__sex{font-size:.82rem;font-weight:800;font-style:normal}
.mkmon__sex.is-m{color:#68a0ff}
.mkmon__sex.is-f{color:#ff7fa8}
.mkmon__sex.is-n{color:var(--txt-dim)}
.mkcard__types{display:flex;gap:4px;flex-wrap:wrap;min-height:18px}
.mktype{height:18px;width:auto;image-rendering:auto}

/* The IVs at a glance: one bar per stat, gold at 31. */
.mkivbar{display:flex;align-items:center;gap:8px}
.mkivbar__bars{display:flex;align-items:flex-end;gap:2px;height:18px}
.mkivbar__bars i{width:6px;height:calc(var(--v,.5) * 100%);border-radius:2px;
  background:var(--txt-dim);opacity:.6}
.mkivbar__bars i.is-good{background:var(--ok);opacity:1}
.mkivbar__bars i.is-max{background:var(--yellow);opacity:1}
.mkivbar__bars i.is-poor{background:var(--red)}
.mkivbar__sum{font-size:.7rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}

.mkcard__deal{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:6px 12px;margin-top:auto;padding:9px 12px;
  border-top:1px solid var(--glass-brd);background:rgba(14,17,22,.35)}
.mkprice{display:flex;flex-direction:column;line-height:1.1}
.mkprice__label{font-size:.6rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim)}
.mkprice b{font-size:1.12rem;font-weight:900;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.mkprice em{font-size:.66rem;font-style:normal;color:var(--txt-dim)}
.mkcard__info{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:4px 8px;min-width:0;font-size:.7rem;color:var(--txt-dim)}
.mkkind{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--txt)}
.mkkind img{width:18px;height:18px;image-rendering:pixelated}
.mkends{font-variant-numeric:tabular-nums;font-weight:700;color:var(--txt)}
.mkends.is-ending{color:var(--red-lt);animation:mkPulse 1s ease-in-out infinite}
@keyframes mkPulse{50%{opacity:.55}}
.mkseller{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkseller::before{content:'by ';opacity:.7}
.mkcard__act{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mkbtn{flex:1;min-width:110px}
.mknote{margin:0;font-size:.72rem;color:var(--txt-dim)}
.mknote em{font-style:normal;color:var(--yellow)}
.mkstate{font-size:.76rem;font-weight:800}
.mkstate.is-sold{color:var(--ok)}
.mkstate.is-expired,.mkstate.is-cancelled{color:var(--txt-dim)}

/* Everything else about it, one click away. */
.mkcard__more{border-top:1px solid var(--glass-brd)}
.mkcard__more summary{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-dim);cursor:pointer;list-style:none}
.mkcard__more summary::-webkit-details-marker{display:none}
.mkcard__more summary::after{content:'';width:6px;height:6px;margin-top:-3px;
  border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);
  transition:transform .2s}
.mkcard__more[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.mkcard__more summary:hover{color:var(--txt)}
.mkcard__more>.mkdetail{padding:0 12px 12px;animation:mkIn .18s ease-out}

.mkdetail{display:flex;flex-direction:column;gap:8px}
.mkmon__meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.74rem;color:var(--txt-dim)}
.mkmon__meta span{display:inline-flex;align-items:center;gap:4px}
.mkmon__held img{width:16px;height:16px;image-rendering:pixelated}
.mkiv__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.mkiv__cell{display:flex;flex-direction:column;align-items:center;padding:4px 2px;
  border-radius:7px;background:var(--ink);border:1px solid var(--line);line-height:1.1}
.mkiv__cell em{font-style:normal;font-size:.58rem;font-weight:700;color:var(--txt-dim)}
.mkiv__cell b{font-size:.84rem;font-variant-numeric:tabular-nums}
.mkiv__cell i{font-style:normal;font-size:.58rem;color:var(--blue)}
.mkiv__cell.is-max{border-color:rgba(255,203,5,.5)}
.mkiv__cell.is-max b{color:var(--yellow)}
.mkiv__cell.is-good b{color:var(--ok)}
.mkiv__cell.is-poor b{color:var(--red-lt)}
.mkmoves{display:flex;flex-wrap:wrap;gap:4px}
.mkmove{--mt:var(--line);padding:3px 9px;border-radius:99px;font-size:.7rem;font-weight:600;
  background:color-mix(in srgb,var(--mt) 22%,var(--ink));
  border:1px solid color-mix(in srgb,var(--mt) 55%,transparent)}
.mkot{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--txt-dim)}
.mkot img{width:18px;height:18px;image-rendering:pixelated}

/* An empty tab: a faded Poke Ball that wakes up under the pointer. */
.mkempty{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:36px 18px;text-align:center;color:var(--txt-dim)}
.mkempty__ball{position:relative;display:grid;place-items:center;width:62px;height:62px;
  margin-bottom:6px;border-radius:50%;background:var(--ink);border:1px solid var(--line)}
.mkempty__ball::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--yellow);opacity:0;animation:lurePulse 2.6s ease-out infinite}
.mkempty__ball img{width:42px;height:42px;image-rendering:pixelated;
  filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s}
.mkempty:hover .mkempty__ball img{filter:none;opacity:1;animation:ballWiggle .6s ease-in-out}
.mkempty h3{margin:0;font-size:1rem;color:var(--txt)}
.mkempty p{margin:0 0 6px;max-width:42ch;font-size:.82rem;line-height:1.5}
.mknone{grid-column:1/-1;margin:0;padding:28px 10px;text-align:center;
  font-size:.84rem;color:var(--txt-dim)}

.mkpager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.mkpager__at{font-size:.76rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.mkpage[disabled]{opacity:.4;cursor:default}

/* Searching your own listings, and your own Pokemon when listing one. */
.mksell__search{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mksell__search input{flex:1}
.mksell__found,.mkcap{font-size:.74rem;color:var(--txt-dim);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── Selling: pick, then price ───────────────────────── */
.mksell{display:flex;flex-direction:column;gap:10px}
.mkpick__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mksell__main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;
  align-items:start}
.mkpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.mkpick__card{--tc:var(--line);position:relative;display:flex;flex-direction:column;
  align-items:center;gap:1px;padding:6px 6px 9px;min-width:0;border-radius:var(--r-sm);
  color:var(--txt);cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 16%,transparent),transparent 70%),var(--glass);
  border:1px solid var(--glass-brd);
  transition:transform .15s,border-color .15s,background .15s,opacity .2s}
.mkpick__card:hover,.mkpick__card:focus-visible{transform:translateY(-2px);
  border-color:var(--blue);outline:none}
.mkpick__card.is-sel{border-color:var(--yellow);
  box-shadow:0 0 0 1px var(--yellow),0 8px 18px -10px rgba(255,203,5,.7)}
.mkpick__card img{width:80px;height:80px;margin:-8px 0 -10px;object-fit:contain;
  image-rendering:pixelated}
.mkpick__card:hover img{animation:monHop .45s ease-out}
.mkpick__card.is-shiny img{filter:drop-shadow(0 0 5px rgba(255,213,74,.55))}
.mkpick__card.is-shadow img{filter:drop-shadow(0 0 6px rgba(155,92,255,.7))}
.mkpick__card.is-locked{opacity:.4;cursor:not-allowed;transform:none}
.mkpick__name{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%;
  font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden}
.mkpick__lv{font-size:.66rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}

.mksell__panel{--tc:var(--line);position:sticky;top:0;display:flex;flex-direction:column;
  gap:10px;padding:14px;border-radius:var(--r);
  background:
    radial-gradient(ellipse 90% 50% at 0% 0%,color-mix(in srgb,var(--tc) 20%,transparent),transparent 70%),
    var(--glass);
  border:1px solid var(--glass-brd);animation:mkIn .2s ease-out}
.mksell__panel.is-idle{border-style:dashed;background:transparent}
.mksell__panel.is-idle .mkempty{padding:24px 8px}
.mksell__head{position:relative;display:flex;gap:10px;align-items:center}
.mksell__art{width:84px;height:84px;flex-shrink:0;object-fit:contain;
  image-rendering:pixelated;animation:monBob 2.4s ease-in-out infinite}
.mksell__art.is-shiny{filter:drop-shadow(0 0 5px rgba(255,213,74,.6))}
.mksell__art.is-shadow{filter:drop-shadow(0 0 6px rgba(155,92,255,.75))}
.mksell__who{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.mksell__x{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:8px;
  font-size:1.1rem;line-height:1;color:var(--txt-dim);background:transparent;border:0;
  cursor:pointer}
.mksell__x:hover{background:var(--red);color:#fff}
.mksell__form{display:flex;flex-direction:column;gap:9px;padding-top:10px;
  border-top:1px solid var(--glass-brd)}
.mksell__field{display:flex;flex-direction:column;gap:4px}
.mksell__field span{font-size:.64rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim)}
.mksell__price{font-size:1.05rem;font-weight:800;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.mksell__hours{display:flex;gap:6px}
.mksell__hours .mkchip{flex:1}
.mksell__sum{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:0;
  font-size:.74rem}
.mksell__sum dt{color:var(--txt-dim)}
.mksell__sum dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.mksell__sum dt:last-of-type,.mksell__sum dd:last-of-type{padding-top:4px;
  border-top:1px solid var(--glass-brd);font-weight:800;color:var(--txt)}
.mksell__sum dd:last-of-type{color:var(--ok)}
.mksell__go,.mkmail__go{padding:10px 15px;font-size:.84rem}
.mksell__go[disabled]{opacity:.45;cursor:not-allowed}

/* ── History ─────────────────────────────────────────── */
/* One row per completed sale, the sprite first so the list can be
   scanned by what rather than by when. */
.mkhist{display:flex;flex-direction:column;gap:6px}
.mkhist__sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.mkhist__sum span{display:flex;align-items:baseline;gap:8px;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--glass-brd);
  font-size:.8rem;font-weight:700;color:var(--yellow);font-variant-numeric:tabular-nums}
.mkhist__sum span.is-sold{border-left:3px solid var(--ok)}
.mkhist__sum span.is-bought{border-left:3px solid var(--red)}
.mkhist__sum em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-dim)}
.mkhist__sum b{font-size:1rem;color:var(--txt)}
.mkhist__row{display:grid;
  grid-template-columns:40px minmax(0,1.4fr) minmax(0,1.4fr) auto auto;
  align-items:center;gap:10px;padding:6px 12px 6px 8px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-brd);transition:border-color .15s}
.mkhist__row:hover{border-color:var(--line)}
.mkhist__row.is-sold{border-left:3px solid var(--ok)}
.mkhist__row.is-bought{border-left:3px solid var(--red)}
.mkhist__art{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.mkhist__id{display:flex;align-items:center;gap:6px;min-width:0}
.mkhist__id b{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkhist__lvl{font-size:.66rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.mkhist__tag{padding:0 6px;border-radius:99px;font-size:.58rem;font-weight:900;
  text-transform:uppercase}
.mkhist__tag.is-shiny{background:var(--shiny);color:#2a2100}
.mkhist__tag.is-shadow{background:var(--shadow);color:#fff}
.mkhist__what{font-size:.74rem;color:var(--txt-dim);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkhist__side{color:var(--txt)}
.mkhist__price{font-size:.8rem;font-weight:800;color:var(--yellow);text-align:right;
  font-variant-numeric:tabular-nums}
.mkhist__row.is-sold .mkhist__price{color:var(--ok)}
.mkhist__when{font-size:.68rem;color:var(--txt-dim);text-align:right;white-space:nowrap}

/* ── Post ────────────────────────────────────────────── */
.mkmail{display:flex;flex-direction:column;gap:6px;max-width:620px}
.mkmail__row{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;
  border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--glass-brd);
  font-size:.8rem;animation:mkIn .2s ease-out backwards}
.mkmail__row img{width:30px;height:30px;image-rendering:pixelated;flex-shrink:0}
.mkmail__row span{flex:1;min-width:0}
.mkmail__row b{color:var(--yellow);font-variant-numeric:tabular-nums}
.mkmail__go{align-self:flex-start;margin-top:4px}

/* ── Messages and busy state ─────────────────────────── */
.mktoast{position:fixed;left:50%;bottom:24px;z-index:220;max-width:min(460px,calc(100vw - 32px));
  padding:10px 16px;border-radius:12px;font-size:.84rem;font-weight:600;color:var(--txt);
  background:rgba(22,27,35,.9);border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);
  opacity:0;transform:translate(-50%,12px);pointer-events:none;
  transition:opacity .22s,transform .22s}
.mktoast.is-bad{border-color:rgba(238,21,21,.6)}
.mktoast.is-in{opacity:1;transform:translate(-50%,0)}
.mkx.is-busy .mkbtn,.mkx.is-busy .mksell__go,.mkx.is-busy .mkmail__go{
  opacity:.6;pointer-events:none}

/* ── Smaller screens ─────────────────────────────────── */
@media (max-width:900px){
  /* The price panel becomes a sheet from the bottom, over the grid. */
  .mksell__main{grid-template-columns:1fr}
  .mksell__panel.is-idle{display:none}
  .mksell__panel{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:150;max-height:82dvh;
    overflow-y:auto;border-radius:var(--r) var(--r) 0 0;background-color:var(--ink-2);
    box-shadow:0 -16px 40px rgba(0,0,0,.6);animation:mkSheet .24s ease-out}
  .mksell__main.has-pick .mkpick{padding-bottom:40dvh}
}
@keyframes mkSheet{from{transform:translateY(100%)}}
@media (max-width:640px){
  .mkhero{min-height:0;padding:12px}
  .mkhero__txt p{display:none}
  .mkstats{width:100%;gap:6px}
  .mkstat{flex:1;min-width:0;padding:6px 8px}
  .mkstat img{display:none}
  .mkstat b{font-size:13px}
  .mktabs{align-self:stretch}
  .mkgrid{grid-template-columns:1fr}
  .mkbar .mkf--search{flex-basis:100%}
  .mkf--text,.mkf--num{flex:1;width:auto;min-width:0}
  .mkiv__grid{grid-template-columns:repeat(3,1fr)}
  .mkhist__sum{grid-template-columns:1fr}
  .mkhist__row{grid-template-columns:40px 1fr auto}
  .mkhist__what{grid-column:2 / -1}
  .mkhist__when{grid-column:2 / -1;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .mkx *,.mkx *::before,.mkx *::after,.mktoast{animation:none!important;transition:none!important}
}



/* ============================================================
   REWARDS
   What you were given, shown rather than mentioned. A line of text
   in a panel is easy to miss, and a badge is the high point of a
   chapter — it earns a moment of its own.
   ============================================================ */
/* The layer scrolls, and the panel is centred by margin rather than
   by align-items.

   A haul from the mine can be a dozen different things, and the panel
   grew with them until it was taller than a phone screen. A centred
   flex child that overflows its container spills equally out of both
   ends, and neither end of a fixed layer can be scrolled to - so the
   "Nice" button at the bottom was simply gone, with no way to dismiss
   the panel but the backdrop, which is not obvious. `auto` margins
   centre it while it fits and let it start at the top when it does
   not. */
.rewardlayer{
  position:fixed;inset:0;z-index:120;
  display:flex;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px;
  background:rgba(6,8,14,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .24s ease;
}
.rewardlayer.is-in{opacity:1}
.rewardlayer[hidden]{display:none}

.reward{
  width:min(440px,100%);
  margin:auto;                 /* centred when it fits, top-aligned when not */
  padding:22px 20px 18px;
  border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.rewardlayer.is-in .reward{transform:translateY(0) scale(1)}
.reward__title{margin:0 0 4px;font-size:1.05rem}
.reward__note{margin:0 0 14px;font-size:.8rem;color:var(--txt-dim)}

/* What a hatched Pokemon rolled, shown while deciding whether to
   keep it. Breeding is played for IVs, and the only way to see them
   used to be to go and find the Pokemon afterwards. */
.hatchstats{margin:0 0 13px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line);text-align:left}
.hatchstats__head{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:.72rem;color:var(--txt-dim);text-transform:capitalize}
.hatchstats__head b{margin-left:auto;font-size:.85rem;color:var(--txt);
  text-transform:none}
.hatchstats__perfect{margin:6px 0 0;font-size:.72rem;color:#77CC55}

.hatchiv{display:grid;grid-template-columns:56px 1fr 22px 30px;
  align-items:center;gap:7px;padding:1px 0;font-size:.72rem}
.hatchiv__k{color:var(--txt-dim)}
.hatchiv__bar{height:5px;border-radius:3px;background:var(--ink-3);
  overflow:hidden}
.hatchiv__bar i{display:block;height:100%;background:var(--txt-dim);
  border-radius:3px}
.hatchiv__iv{text-align:right;font-variant-numeric:tabular-nums}
.hatchiv__n{text-align:right;font-variant-numeric:tabular-nums;
  color:var(--txt-dim);font-size:.68rem}

/* A perfect roll is the thing being hunted, so it is findable at a
   glance rather than by reading six numbers. */
.hatchiv.is-good .hatchiv__bar i{background:#8fb8ff}
.hatchiv.is-max .hatchiv__bar i{background:#77CC55}
.hatchiv.is-max .hatchiv__iv{color:#77CC55;font-weight:800}

/* Keep and release side by side: one decision, two answers. */
.reward__pair{display:flex;gap:8px;justify-content:center}
.reward__let.is-sure{background:#7a2f2f;border-color:#a04444;color:#ffe3e3}

.reward__grid{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:14px 0 18px;
  /* A really large haul scrolls inside the panel rather than growing
     it without limit, so the button underneath stays where it is. */
  max-height:min(52dvh,420px);overflow-y:auto;
}
.reward__card{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:92px;padding:12px 10px;
  border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line);
  /* Each card arrives a beat after the one before it, so a haul
     reads as several things rather than one block appearing. */
  animation:rewardRise .42s cubic-bezier(.34,1.5,.64,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes rewardRise{
  from{opacity:0;transform:translateY(16px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.reward__ico{width:44px;height:44px;object-fit:contain;
  image-rendering:pixelated}
.reward__amount{font-size:.95rem;color:var(--yellow)}
.reward__name{font-size:.72rem;color:var(--txt-dim);line-height:1.2;
  text-transform:capitalize}
.reward__ok{min-width:120px}

/* The badge: slow to arrive, turning as it comes. */
.badgeaward{
  position:relative;width:130px;height:130px;margin:6px auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.badgeaward__img{
  width:104px;height:104px;object-fit:contain;image-rendering:pixelated;
  animation:badgeArrive 2.1s cubic-bezier(.22,.8,.3,1) both;
  filter:drop-shadow(0 0 16px rgba(255,203,58,.55));
}
@keyframes badgeArrive{
  0%{opacity:0;transform:rotate(-220deg) scale(.35)}
  55%{opacity:1}
  100%{opacity:1;transform:rotate(0deg) scale(1)}
}
.badgeaward__glow{
  position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,203,58,.34) 0%,transparent 68%);
  animation:badgeGlow 2.1s ease-out both;
}
@keyframes badgeGlow{
  0%{opacity:0;transform:scale(.4)}
  60%{opacity:1;transform:scale(1.1)}
  100%{opacity:.75;transform:scale(1)}
}

/* Someone who asked for less movement still gets the panel and the
   sprite — only the drift and the spin are dropped. */
@media (prefers-reduced-motion:reduce){
  .reward__card,.badgeaward__img,.badgeaward__glow{animation:none!important}
  .badgeaward__img{opacity:1;transform:none}
}

/* Standing somewhere without a Centre. */
.center--closed{text-align:center;padding:24px 18px}
.center__closedico{width:52px;height:52px;object-fit:contain;
  image-rendering:pixelated;opacity:.45;margin-bottom:10px}
.center--closed h3{margin:0 0 6px;font-size:1rem}
.center--closed p{margin:0;font-size:.82rem;color:var(--txt-dim);
  max-width:38ch;margin-inline:auto;line-height:1.5}


/* ── Patch notes ───────────────────────────────────────
   A release reads as three lists, coloured by what they mean: green
   for what is new, yellow for what moved, red for what was broken. */
.patches{display:flex;flex-direction:column;gap:16px}
.patch{padding:14px 15px;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line)}
.patch.is-new{border-color:var(--yellow)}
.patch__head{display:flex;align-items:baseline;gap:9px}
.patch__head h4{margin:0;font-size:1rem;display:flex;align-items:center;gap:7px}
.patch__head time{margin-left:auto;font-size:.72rem;color:var(--txt-dim)}
.patch__new{font-size:.6rem;padding:1px 7px;border-radius:999px;
  background:var(--yellow);color:#1a1500;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em}
.patch__title{margin:5px 0 12px;font-size:.86rem;color:var(--txt-dim)}
.patch__group{margin-bottom:11px}
.patch__group h5{margin:0 0 5px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em}
.patch__group ul{margin:0;padding-left:17px;
  display:flex;flex-direction:column;gap:4px}
.patch__group li{font-size:.8rem;line-height:1.45}
.patch__group--add h5{color:var(--ok)}
.patch__group--chg h5{color:var(--yellow)}
.patch__group--fix h5{color:var(--red-lt)}

/* The dot on the menu entry while something is unread. */
#nav-patches{position:relative}
#nav-patches.has-new::after{
  content:'';position:absolute;top:5px;left:31px;
  width:8px;height:8px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 0 2px var(--ink-2);
}

/* ── Friends and trading ─────────────────────────────────
   Laid out like the Guild Hall: a banner with three counts, a tab
   track, and the page under it. A Pokemon on a trade card is shown in
   full, because agreeing to a swap you cannot inspect is a coin toss
   rather than a trade. */
.friends{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:0 auto}
.friends [hidden]{display:none!important}
.btn--sm{padding:6px 12px;font-size:12px}
.friends .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:var(--txt);cursor:pointer}
.friends .btn--pri{color:#fff}
.friends .btn--ghost{background:transparent;border-color:var(--line);color:var(--txt-dim)}
.friends .btn--ghost:hover{background:rgba(255,255,255,.05);color:var(--txt);
  border-color:var(--txt-dim)}
.friends .btn[disabled]{opacity:.45;cursor:default;filter:grayscale(.4)}

/* A trainer's portrait, in a ring. */
.frava{flex-shrink:0;width:40px;height:40px;border-radius:50%;object-fit:cover;
  object-position:top;background:var(--ink);border:2px solid var(--line)}
.frava--sm{width:24px;height:24px;border-width:1px}

/* ── The banner ──────────────────────────────────────── */
.frhero{position:relative;overflow:hidden;isolation:isolate;
  padding:16px 18px 14px;border-radius:var(--r);color:#fff;
  background:
    radial-gradient(110% 140% at 0% 0%,rgba(238,21,21,.55),transparent 62%),
    radial-gradient(110% 140% at 100% 100%,rgba(42,117,187,.55),transparent 64%),
    linear-gradient(120deg,#5A1A22,#1B2C47);
  border:1px solid rgba(255,78,78,.3);
  box-shadow:0 16px 36px -16px rgba(238,21,21,.5)}
/* A Poke Ball drawn in the corner, faint: a ring and the band
   across it. */
.frhero::before,.frhero::after{content:"";position:absolute;z-index:-1;
  pointer-events:none}
.frhero::before{right:-46px;top:-46px;width:190px;height:190px;
  border-radius:50%;border:18px solid rgba(255,255,255,.08)}
.frhero::after{right:-46px;top:40px;width:190px;height:18px;
  background:rgba(255,255,255,.08)}
.frhero__main{display:flex;align-items:center;gap:14px}
.frhero__me{flex-shrink:0;display:grid;place-items:center;width:64px;height:64px;
  border-radius:50%;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px);
  box-shadow:0 0 0 4px rgba(42,117,187,.3),0 0 24px rgba(42,117,187,.45);
  animation:frFloat 4.5s ease-in-out infinite}
.frhero__me .frava{width:56px;height:56px;border-color:rgba(255,255,255,.5)}
@keyframes frFloat{50%{transform:translateY(-4px)}}
.frhero__id{min-width:0;flex:1}
.frhero__name{margin:0;font-size:20px;font-weight:900;line-height:1.2;
  text-shadow:0 2px 6px rgba(0,0,0,.45)}
.frhero__meta{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
.frhero__chip{display:inline-block;margin-left:6px;padding:1px 8px;
  border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(8,10,14,.32);border:1px solid rgba(255,255,255,.2)}
.frhero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin-top:14px}
.friends,.frbody,.frtrade,.frmon{min-width:0}
.frstat{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:9px;
  align-items:center;padding:8px 11px;border-radius:12px;text-align:left;
  color:#fff;font:inherit;cursor:pointer;
  background:rgba(8,10,14,.34);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);transition:transform .15s,border-color .15s}
.frstat:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3)}
.frstat img{grid-row:1/3;width:28px;height:28px;object-fit:contain;
  image-rendering:pixelated}
.frstat span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:800}
.frstat b{font-size:15px;font-weight:900;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.frstat.is-hot{border-color:rgba(255,203,5,.6);
  animation:frGlow 2.4s ease-in-out infinite}
.frstat.is-hot b{color:var(--yellow)}
@keyframes frGlow{50%{box-shadow:0 0 0 3px rgba(255,203,5,.18),
  0 0 18px rgba(255,203,5,.3)}}

/* ── Pages ───────────────────────────────────────────── */
.frtabs{display:flex;gap:4px;padding:5px;border-radius:14px;
  background:var(--ink-3);border:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.frtabs::-webkit-scrollbar{display:none}
.frtab{flex:1 0 auto;padding:8px 14px;border:0;border-radius:10px;
  background:none;color:var(--txt-dim);font:inherit;font-size:.88rem;
  font-weight:700;cursor:pointer;white-space:nowrap;
  transition:color .15s,background .15s}
.frtab:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.frtab.is-on{color:#fff;background:linear-gradient(135deg,var(--red),var(--red-dk));
  box-shadow:0 4px 14px -4px rgba(238,21,21,.7)}
.frtab__n{display:inline-block;min-width:20px;padding:1px 6px;
  border-radius:999px;font-size:.72rem;background:var(--yellow);color:var(--ink)}
.frtab.is-on .frtab__n{background:rgba(0,0,0,.25);color:#fff}

.frbody{display:flex;flex-direction:column;gap:12px}
.frbody.is-entering{animation:nursIn .22s ease-out}
.frhead{margin:6px 0 0;font-size:.76rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-dim)}
.frhead__n{margin-left:4px;color:var(--txt);font-variant-numeric:tabular-nums}
.frnote{margin:0;font-size:12px;line-height:1.55;color:var(--txt-dim)}
.frchip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;
  border-radius:99px;font-size:11px;font-weight:600;color:var(--txt-dim);
  background:var(--ink);border:1px solid var(--line)}
.frchip--champ{border-color:rgba(255,203,5,.45);color:var(--yellow)}
.frchip--live{border-color:rgba(63,217,138,.45);color:var(--ok)}

/* Loading: grey cards shimmering in place of the real ones. */
.frskel{display:flex;flex-direction:column;gap:9px}
.frskel span{height:58px;border-radius:var(--r);
  background:linear-gradient(100deg,var(--glass) 30%,var(--ink-3) 50%,var(--glass) 70%)
    0 0/300% 100%;
  animation:penShimmer 1.4s linear infinite}
.frskel span:first-child{height:120px}

.frempty{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:30px 16px;text-align:center;border-radius:var(--r);
  border:2px dashed rgba(255,255,255,.1)}
.frempty img{width:52px;height:52px;object-fit:contain;image-rendering:pixelated;
  filter:grayscale(1);opacity:.4;animation:frBreath 3s ease-in-out infinite}
@keyframes frBreath{50%{opacity:.75;transform:scale(1.06)}}
.frempty p{margin:0;max-width:40ch;font-size:13px;line-height:1.55;
  color:var(--txt-dim)}

/* ── Friends ─────────────────────────────────────────── */
.fradd{display:flex;flex-direction:column;gap:7px;padding:14px 16px;
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(238,21,21,.07),var(--ink-3) 70%)}
.fradd__row{display:flex;gap:8px;flex-wrap:wrap}
.fradd__field{position:relative;flex:1;min-width:180px}
.fradd__field img{position:absolute;left:9px;top:50%;width:22px;height:22px;
  transform:translateY(-50%);image-rendering:pixelated;pointer-events:none}
.fradd__field input{width:100%;padding:10px 12px 10px 38px;
  background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--txt);font:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s}
.fradd__field input:focus{border-color:var(--red);
  box-shadow:0 0 0 3px rgba(238,21,21,.18)}

.frsearch{display:flex;flex-direction:column;gap:5px;max-width:340px}
.frsearch__lbl{font-size:.7rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-dim)}
.frsearch input{width:100%;padding:9px 12px;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);
  font:inherit;outline:none}
.frsearch input:focus{border-color:var(--red)}
.frsearch--inline{width:220px}
.frsearch--inline input{padding:6px 11px;font-size:12.5px}

/* A request waiting on this player: the one thing on the page that
   wants an answer, so it glows. */
.frreqs{display:flex;flex-direction:column;gap:7px}
.frreq{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:12px;background:linear-gradient(90deg,rgba(255,203,5,.09),var(--ink-3) 60%);
  border:1px solid rgba(255,203,5,.4);animation:frGlow 2.6s ease-in-out infinite}
.frreq__id{display:flex;flex-direction:column;min-width:0;flex:1}
.frreq__id b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frreq__id span{font-size:11.5px;color:var(--txt-dim)}
.frreq__act{display:flex;gap:6px}

.frsent{display:flex;gap:6px;flex-wrap:wrap}
.frsent__chip{display:inline-flex;align-items:center;gap:7px;padding:3px 4px 3px 4px;
  border-radius:99px;background:var(--ink-3);border:1px solid var(--line);font-size:12.5px}
.frsent__chip em{font-style:normal;font-size:11px;color:var(--txt-dim)}
.frsent__x{padding:3px 9px;border-radius:99px;border:0;font:inherit;font-size:11px;
  font-weight:700;color:var(--txt-dim);background:rgba(255,255,255,.06);cursor:pointer}
.frsent__x:hover{background:var(--red);color:#fff}

.frroster__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;flex-wrap:wrap}
.frroster{display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.frcard{display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:12px;background:var(--ink-3);border:1px solid var(--line);
  border-left:3px solid var(--blue);transition:transform .14s,border-color .14s}
.frcard:hover{transform:translateY(-1px);border-color:rgba(42,117,187,.6)}
.frcard .frava{border-color:var(--blue);box-shadow:0 0 10px rgba(42,117,187,.35)}
.frcard.is-champ{border-left-color:var(--yellow)}
.frcard.is-champ .frava{border-color:var(--yellow);box-shadow:0 0 10px rgba(255,203,5,.4)}
.frcard__id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.frcard__id b{font-size:14px;font-weight:800;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.frcard__prog{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:11.5px;color:var(--txt-dim)}
.frcard__prog img{width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
.frcard__act{display:flex;gap:6px;flex-shrink:0}

/* ── One Pokemon ─────────────────────────────────────── */
.frmon{position:relative;display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:12px;border-radius:var(--r);
  background:
    radial-gradient(ellipse 80% 45% at 30% 0%,rgba(255,255,255,.04),transparent 70%),
    var(--glass);
  border:1px solid var(--glass-brd)}
.frmon[data-pick]{cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.frmon[data-pick]:hover,.frmon[data-pick]:focus-visible{
  border-color:var(--txt-dim);transform:translateY(-2px);outline:none}
.frmon.is-picked{border-color:var(--red);
  box-shadow:0 0 0 2px rgba(238,21,21,.3),0 8px 22px -10px rgba(238,21,21,.6)}
.frmon.is-picked::before{content:'';position:absolute;top:9px;right:9px;
  width:18px;height:18px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.frmon__side{align-self:flex-start;padding:1px 8px;border-radius:99px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-dim);background:var(--ink);border:1px solid var(--line)}
.frmon__top{display:flex;align-items:center;gap:10px}
.frmon__stage{position:relative;flex:none;width:72px;height:72px}
.frmon__disc{position:absolute;left:50%;bottom:4px;width:48px;height:10px;
  border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
.frmon__art{position:relative;width:72px;height:72px;object-fit:contain;
  image-rendering:pixelated;transition:transform .2s}
.frmon[data-pick]:hover .frmon__art,.frtrade .frmon__art{animation:monBob 2.6s ease-in-out infinite}
.frmon.is-shiny .frmon__art{filter:drop-shadow(0 0 6px rgba(255,213,74,.6))}
.frmon.is-shadow .frmon__art{filter:drop-shadow(0 0 7px rgba(155,92,255,.7))}
.frmon.is-shiny .frmon__stage::after{content:'';position:absolute;top:2px;left:2px;
  width:12px;height:12px;background:var(--shiny);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:twinkle 1.8s ease-in-out infinite}
.frmon__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.frmon__id b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frmon__lv{font-size:11.5px;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.frmon__types{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.frmon__mark{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px}
.frmon__mark.is-shiny{background:rgba(255,213,74,.16);color:var(--shiny)}
.frmon__mark.is-shadow{background:rgba(155,92,255,.16);color:var(--shadow)}
.frmon__meta{display:flex;gap:5px;flex-wrap:wrap}
.frmon__held{color:var(--txt);border-color:rgba(255,203,5,.35)}
.frmon__held img{width:18px;height:18px;margin:-2px 0 -2px -5px;object-fit:contain;
  image-rendering:pixelated}

/* Six IV bars, as tall as the value is out of 31. */
.frivs{display:flex;align-items:flex-end;gap:10px}
.frivs__sum{font-size:10.5px;color:var(--txt-dim);white-space:nowrap}
.frivs__sum b{font-size:14px;color:var(--txt);font-variant-numeric:tabular-nums}
.frivs__bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;flex:1;min-width:0}
.friv{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding-top:12px}
.friv__track{display:flex;align-items:flex-end;justify-content:center;width:100%;
  max-width:16px;height:24px;border-radius:3px;background:rgba(255,255,255,.05)}
.friv i{display:block;width:100%;min-height:2px;border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,var(--blue),var(--blue-dk))}
.friv.is-max i{background:linear-gradient(180deg,var(--ok),#1F9C5E);
  box-shadow:0 0 8px rgba(63,217,138,.45)}
.friv em{font-style:normal;font-size:8.5px;
  color:var(--txt-dim);letter-spacing:.03em}
.friv b{position:absolute;top:0;font-family:var(--mono);font-size:9.5px;
  font-weight:600;color:var(--txt-dim)}
.friv.is-max b{color:var(--ok);font-weight:800}
.frmon__moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.frmon__moves span{padding:4px 8px;border-radius:7px;font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}

.frmon--compact{padding:10px;gap:7px}
.frmon--compact .frmon__stage,.frmon--compact .frmon__art{width:56px;height:56px}
.frmon--compact .friv__track{height:18px}

/* The open side of an offer: a waiting Poke Ball. */
.frmon--empty{align-items:center;justify-content:center;gap:7px;min-height:170px;
  text-align:center;background:transparent;border:2px dashed rgba(255,255,255,.12)}
.frmon--empty .frmon__side{position:absolute;top:10px;left:10px}
.frmon--empty b{font-size:13.5px}
.frmon--empty > span:last-child{font-size:11.5px;color:var(--txt-dim)}
.frmon__lure{position:relative;display:grid;place-items:center;width:54px;height:54px;
  border-radius:50%;background:var(--ink);border:1px solid var(--line)}
.frmon__lure::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--blue);opacity:0;animation:lurePulse 2.4s ease-out infinite}
.frmon__lure img{width:38px;height:38px;image-rendering:pixelated;
  filter:grayscale(1);opacity:.55}

/* ── Offers ──────────────────────────────────────────── */
.frtrade{display:flex;flex-direction:column;gap:12px;padding:14px 16px;
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(42,117,187,.08),var(--ink-3) 60%)}
.frtrade--in{border-color:rgba(255,203,5,.35)}
.frtrade--confirm{border-color:rgba(63,217,138,.45);
  background:linear-gradient(180deg,rgba(63,217,138,.09),var(--ink-3) 60%)}
.frtrade__head{display:flex;align-items:center;gap:10px}
.frtrade__who{display:flex;flex-direction:column;min-width:0;flex:1}
.frtrade__who b{font-size:14px}
.frtrade__who span{font-size:11.5px;color:var(--txt-dim)}
.frstatus{flex-shrink:0;padding:3px 10px;border-radius:99px;font-size:10.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.frstatus--in{background:rgba(255,203,5,.14);color:var(--yellow)}
.frstatus--confirm{background:rgba(63,217,138,.14);color:var(--ok)}
.frstatus--out{background:rgba(255,255,255,.06);color:var(--txt-dim)}
.frtrade__pair{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
  gap:8px;align-items:center}
.frtrade__act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.frtrade__note{margin:0;font-size:12px;line-height:1.55;color:var(--txt-dim)}

/* The link cable: two arrows on a line that runs both ways. */
.frlink{position:relative;display:grid;place-items:center;height:52px;color:var(--yellow)}
.frlink::before{content:'';position:absolute;left:-8px;right:-8px;top:50%;height:2px;
  margin-top:-1px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 11px)
    0 0/22px 2px;
  animation:frCable 1.1s linear infinite}
@keyframes frCable{to{background-position:22px 0}}
@keyframes frCableV{to{background-position:0 22px}}
.frlink svg{position:relative;width:40px;height:30px;padding:4px;box-sizing:content-box;
  border-radius:50%;background:var(--ink-2);border:1px solid rgba(255,203,5,.4);
  filter:drop-shadow(0 0 8px rgba(255,203,5,.3))}

.frreply{display:flex;flex-direction:column;gap:9px;padding-top:4px;
  border-top:1px solid var(--line)}

/* ── New trade ───────────────────────────────────────── */
.frstep{display:flex;align-items:center;gap:9px;margin-top:4px}
.frstep__n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-size:12px;font-weight:900;color:#fff;background:var(--red);
  box-shadow:0 0 0 3px rgba(238,21,21,.2)}
.frstep h3{margin:0;font-size:.82rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase}
.frpick{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
.frpick .fld{flex:1}
.frpick .frava{width:46px;height:46px;border-color:var(--blue)}
.frpick select{width:100%;padding:10px 12px;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);font:inherit;outline:none}
.frpick select:focus{border-color:var(--red)}
.frgrid{display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}

/* Pinned to the bottom of the window, so Send Offer is in reach
   wherever in the grid the pick was made. */
.frpick__act{position:sticky;bottom:-17px;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;
  margin:0 0 -17px;padding:12px 14px 14px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(180deg,rgba(22,27,35,.9),var(--ink-2));
  border:1px solid var(--line);border-bottom:0;backdrop-filter:blur(10px);
  box-shadow:0 -10px 24px -12px rgba(0,0,0,.7)}
.frpick__chosen{display:flex;align-items:center;gap:8px;min-width:0}
.frpick__chosen img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated;
  animation:monBob 2.6s ease-in-out infinite}
.frpick__chosen span{display:flex;flex-direction:column;font-size:11.5px;
  color:var(--txt-dim);min-width:0}
.frpick__chosen b{font-size:14px;color:var(--txt);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.frpick__none{font-size:12.5px;font-style:italic}
.frpick__note{grid-column:1/-1;display:flex;align-items:flex-start;gap:7px;margin:0;
  font-size:11.5px;line-height:1.5;color:var(--txt-dim)}
.frpick__note img{width:20px;height:20px;flex-shrink:0;image-rendering:pixelated}

/* A note at the bottom of the screen that outlives the redraw. */
.frtoast{position:fixed;left:50%;bottom:24px;z-index:9999;max-width:min(92vw,460px);
  padding:10px 16px;border-radius:12px;font-size:13px;line-height:1.45;color:var(--txt);
  background:var(--ink-2);border:1px solid var(--line);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transform:translate(-50%,12px);
  transition:opacity .2s,transform .2s}
.frtoast.is-show{opacity:1;transform:translate(-50%,0)}
.frtoast.is-good{border-color:rgba(63,217,138,.5)}
.frtoast.is-bad{border-color:rgba(238,21,21,.55)}

@media (max-width:640px){
  .frhero{padding:14px}
  .frhero__me{width:52px;height:52px}
  .frhero__me .frava{width:46px;height:46px}
  .frhero__name{font-size:17px}
  .frhero__chip{display:table;margin:4px 0 0}
  .frhero__stats{gap:6px}
  .frstat{grid-template-columns:1fr;justify-items:center;padding:7px 4px;text-align:center}
  .frstat img{grid-row:auto;width:24px;height:24px}
  .frcard,.frreq{flex-wrap:wrap}
  .frcard__act,.frreq__act{width:100%;justify-content:flex-end}
  .frsearch--inline{width:100%}
  .frtrade__pair{grid-template-columns:minmax(0,1fr);gap:4px}
  .frlink{height:44px}
  .frlink::before{left:50%;right:auto;top:-6px;bottom:-6px;width:2px;height:auto;
    margin:0 0 0 -1px;
    background:repeating-linear-gradient(180deg,var(--yellow) 0 6px,transparent 6px 11px)
      0 0/2px 22px;animation-name:frCableV}
  .frlink svg{transform:rotate(90deg)}
  .frpick__act{bottom:-12px;margin:0 0 -12px;padding:10px 12px 12px}
}

@media (prefers-reduced-motion:reduce){
  .friends *,.friends *::before,.friends *::after{animation:none!important;
    transition:none!important}
}

/* A thing to do where you are standing. In a town there is nothing to
   search for, so the space under the Poké Ball is where the Centre
   belongs — it is the reason to be in a town at all. */
.hereaction{
  display:flex;align-items:center;gap:9px;margin:10px auto 0;
  padding:11px 18px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd);
  color:var(--txt);font-size:13.5px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .15s,border-color .15s,transform .15s;
}
.hereaction:hover{
  background:rgba(255,255,255,.08);border-color:var(--txt-dim);
  transform:translateY(-1px);
}
.hereaction img{width:22px;height:22px;object-fit:contain;
  image-rendering:pixelated}
.hereaction[hidden]{display:none}


/* ── The leader who comes over ───────────────────────────
   Arriving in a gym town without its badge. Not a modal in
   the usual sense: the answer "not yet" is a real one, and
   the button it leaves behind is the way back. */
.gymgreet{
  position:fixed;inset:0;z-index:215;display:grid;place-items:center;padding:16px;
  background:rgba(6,10,18,.72);backdrop-filter:blur(6px);
  animation:gymgreet-in .25s ease}
@keyframes gymgreet-in{from{opacity:0}to{opacity:1}}

.gymgreet__card{
  --tc:var(--t-normal);position:relative;
  width:min(580px,100%);display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;
  padding:18px;border-radius:18px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 22%,var(--ink-2)),var(--ink-2) 60%);
  border:1px solid color-mix(in srgb,var(--tc) 45%,var(--line));
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:gymgreet-rise .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes gymgreet-rise{from{transform:translateY(18px) scale(.96);opacity:0}
                         to{transform:none;opacity:1}}
.gymgreet__art{margin:0;display:flex;align-items:flex-end;justify-content:center;height:200px}
.gymgreet__art img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.gymgreet__body{display:grid;gap:8px;align-content:center;min-width:0}
.gymgreet__name{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1}
.gymgreet__title{font-size:.84rem;font-weight:600;
  color:color-mix(in srgb,var(--tc) 55%,var(--txt))}
.gymgreet__say{margin:0;padding:10px 14px;border-radius:12px;line-height:1.5;font-size:.9rem;
  color:#d5dde8;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07)}
.gymgreet__facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gymgreet__badge{width:28px;height:28px;object-fit:contain}
.gymgreet__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

/* The leader stays in town after a "not yet". */
.gymtalk{
  --tc:var(--yellow);
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:8px;
  padding:5px 16px 5px 5px;border-radius:999px;cursor:pointer;
  color:var(--txt);font:inherit;font-size:.86rem;font-weight:600;
  background:var(--ink-3);
  border:1px solid color-mix(in srgb,var(--tc) 60%,var(--line));
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .15s ease,box-shadow .15s ease}
.gymtalk:hover{transform:translateX(-50%) translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.5)}
.gymtalk__face{width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:color-mix(in srgb,var(--tc) 35%,var(--ink-4))}
.gymtalk__face img{width:100%;height:150%;object-fit:cover;object-position:top}

@media (max-width:560px){
  .gymgreet__card{grid-template-columns:minmax(0,1fr);text-align:center}
  .gymgreet__art{height:140px}
  .gymgreet__facts,.gymgreet__row{justify-content:center}
  .gymgreet__row .btn{flex:1}
  .gymtalk{bottom:76px;font-size:.82rem}
}

/* ── Hazards on the field ────────────────────────────────
   Set once and then relevant for the rest of the fight, which
   makes them exactly the thing a player forgets. Each side
   shows what it is standing in. */
.bhaz{
  position:absolute;display:flex;gap:5px;z-index:5;pointer-events:none}
.bhaz--foe{top:38%;right:9%}
.bhaz--me{bottom:22%;left:9%}
.bhaz__m{
  position:relative;display:grid;place-items:center;
  width:32px;height:32px;border-radius:8px;
  background:rgba(8,12,20,.72);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  pointer-events:auto}
.bhaz__m img{width:23px;height:23px;object-fit:contain;image-rendering:pixelated}
.bhaz__m b{
  position:absolute;right:-4px;bottom:-4px;
  min-width:14px;height:14px;padding:0 3px;border-radius:999px;
  background:var(--red,#e5484d);color:#fff;
  font-size:9px;font-weight:800;line-height:14px;text-align:center}
.bhaz__m.is-rocks{border-color:rgba(187,170,102,.6)}
.bhaz__m.is-spikes{border-color:rgba(200,200,210,.6)}
.bhaz__m.is-tspikes{border-color:rgba(170,85,153,.7)}
.bhaz__m.is-web{border-color:rgba(170,187,34,.6)}
.bhaz__m.is-hit{animation:bhaz-hit .5s ease}
@keyframes bhaz-hit{
  0%{transform:scale(1)}
  35%{transform:scale(1.35);box-shadow:0 0 14px rgba(255,255,255,.5)}
  100%{transform:scale(1)}}

/* The moment a hazard is laid, or catches somebody arriving. */
.hazfx{position:absolute;left:0;right:0;height:0;z-index:6;pointer-events:none}
.hazfx--foe{top:52%}
.hazfx--me{bottom:26%}
.hazfx i{
  position:absolute;left:50%;top:0;width:7px;height:7px;
  border-radius:2px;opacity:0;
  animation:haz-scatter .85s ease-out forwards;
  animation-delay:var(--d,0s)}
.hazfx--foe i{left:72%}
.hazfx--me i{left:28%}
.hazfx.is-rocks i{background:#bbaa66;border-radius:3px}
.hazfx.is-spikes i{background:#c8c8d2;width:5px;height:11px;border-radius:1px}
.hazfx.is-tspikes i{background:#aa5599;width:5px;height:11px;border-radius:1px}
.hazfx.is-web i{background:#aabb22;width:9px;height:2px;border-radius:0}
@keyframes haz-scatter{
  0%{opacity:0;transform:translate(0,-26px) rotate(0deg)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(var(--x,0),16px) rotate(180deg)}}
/* Tripping over one throws it upward instead of scattering it down. */
.hazfx.is-trip i{animation-name:haz-trip}
@keyframes haz-trip{
  0%{opacity:0;transform:translate(0,6px) scale(.6)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(var(--x,0),-30px) scale(1.1) rotate(150deg)}}

/* ── Raised and lowered stats ────────────────────────────
   A Swords Dance said so once and scrolled away; from then on
   the fight was at +2 with nothing on screen saying so. */
.bstages{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.bstage{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 6px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.02em;
  border:1px solid transparent}
.bstage b{font-weight:900}
.bstage.is-up{
  background:rgba(109,223,123,.16);border-color:rgba(109,223,123,.45);
  color:#8ef0a0}
.bstage.is-down{
  background:rgba(229,72,77,.16);border-color:rgba(229,72,77,.45);
  color:#ff9a9d}

@media (max-width:640px){
  .bhaz__m{width:27px;height:27px}
  .bhaz__m img{width:19px;height:19px}
  .bstage{font-size:9px;padding:1px 5px}
}

/* A Repel already running, shown next to it in the Bag. */
.bagitem__on{
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  font-size:11px;font-weight:700;
  background:rgba(77,155,255,.16);border:1px solid rgba(77,155,255,.45);
  color:#8ec2ff}

/* A stone changed a species. The old sprite fades into the new one. */
.reward--evo .evoaward{
  position:relative;display:grid;place-items:center;
  width:150px;height:150px;margin:0 auto 6px}
.evoaward__glow{
  position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.32) 0%,transparent 68%);
  animation:evoaward-glow 2.2s ease-in-out infinite}
@keyframes evoaward-glow{
  0%,100%{opacity:.5;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}}
.evoaward__old,.evoaward__new{
  position:absolute;width:128px;height:128px;object-fit:contain;
  image-rendering:pixelated}
.evoaward__old{animation:evoaward-out 1.1s ease forwards}
.evoaward__new{opacity:0;animation:evoaward-in 1.1s ease forwards}
@keyframes evoaward-out{
  0%{opacity:1;filter:brightness(1)}
  55%{opacity:1;filter:brightness(6) saturate(0)}
  100%{opacity:0;filter:brightness(6) saturate(0)}}
@keyframes evoaward-in{
  0%,45%{opacity:0;filter:brightness(6) saturate(0)}
  70%{opacity:1;filter:brightness(6) saturate(0)}
  100%{opacity:1;filter:none}}

@media (prefers-reduced-motion:reduce){
  .evoaward__old{display:none}
  .evoaward__new{opacity:1;animation:none}
  .evoaward__glow{animation:none}
}

/* ── A fossil coming back to life ────────────────────────
   The rock sits in the light, the ring closes over it, and the
   Pokemon is what is left. Slower than the evolution flash on
   purpose: this is the rarest thing the Mine produces and it should
   be watched rather than glimpsed.

   Shiny and Shadow tint the light rather than adding a label, using
   the two colours the rest of the game already gives them. */
.reward--fossil .fossilrev{
  position:relative;display:grid;place-items:center;
  width:164px;height:164px;margin:0 auto 6px}
.fossilrev__glow{
  position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,235,180,.34) 0%,transparent 70%);
  animation:fossil-glow 2.6s ease-in-out infinite}
.fossilrev.is-shiny .fossilrev__glow{
  background:radial-gradient(circle,rgba(255,213,74,.42) 0%,transparent 70%)}
.fossilrev.is-shadow .fossilrev__glow{
  background:radial-gradient(circle,rgba(150,90,220,.42) 0%,transparent 70%)}
@keyframes fossil-glow{
  0%,100%{opacity:.45;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.08)}}

/* The ring is the machine doing its work: it draws in around the
   fossil, then fades as the Pokemon takes its place. */
.fossilrev__ring{
  position:absolute;width:150px;height:150px;border-radius:50%;
  border:2px solid rgba(255,235,180,.75);
  animation:fossil-ring 2.1s ease-out forwards}
.fossilrev.is-shiny .fossilrev__ring{border-color:rgba(255,213,74,.85)}
.fossilrev.is-shadow .fossilrev__ring{border-color:rgba(178,120,240,.85)}
@keyframes fossil-ring{
  0%{transform:scale(1.5);opacity:0}
  25%{opacity:.9}
  60%{transform:scale(.7);opacity:.7}
  100%{transform:scale(.5);opacity:0}}

.fossilrev__rock,.fossilrev__mon{
  position:absolute;object-fit:contain;image-rendering:pixelated}
.fossilrev__rock{width:64px;height:64px;
  animation:fossil-rock 2.1s ease-in forwards}
@keyframes fossil-rock{
  0%{opacity:1;transform:scale(1) rotate(0)}
  45%{opacity:1;transform:scale(1.12) rotate(-6deg);filter:brightness(2)}
  70%{opacity:0;transform:scale(.6) rotate(4deg);filter:brightness(8)}
  100%{opacity:0}}

/* The Pokemon arrives out of the same white the rock left behind,
   then settles into its own colours - shiny or shadow art included,
   because the sprite is chosen before any of this runs. */
.fossilrev__mon{width:132px;height:132px;opacity:0;
  animation:fossil-mon 2.1s ease-out forwards}
@keyframes fossil-mon{
  0%,55%{opacity:0;transform:scale(.72);filter:brightness(8) saturate(0)}
  72%{opacity:1;transform:scale(1.08);filter:brightness(6) saturate(0)}
  86%{transform:scale(.98)}
  100%{opacity:1;transform:scale(1);filter:none}}

/* Nothing moves for somebody who asked for that: the Pokemon is
   simply there, which is the part that matters. */
@media (prefers-reduced-motion:reduce){
  .fossilrev__rock,.fossilrev__ring{display:none}
  .fossilrev__mon{opacity:1;animation:none}
  .fossilrev__glow{animation:none}
}

/* ── The Quest Board ──────────────────────────────────
   Laid out like Friends and the Guild Hall: a banner, a tab track,
   and the page under it. The banner and track borrow those screens'
   classes; what is here is the board's own. */
.quests{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:0 auto;
  min-width:0}
.quests .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:var(--txt);cursor:pointer}
.quests .btn--pri{color:#fff}
.quests .btn--ghost{background:transparent;border-color:var(--line);color:var(--txt-dim)}
.quests .btn--ghost:hover{background:rgba(255,255,255,.05);color:var(--txt);
  border-color:var(--txt-dim)}
.quests .btn[disabled]{opacity:.6;cursor:default}

/* The banner in red and gold: a Poke Ball and what it pays out. */
.qhero{
  background:
    radial-gradient(110% 140% at 0% 0%,rgba(238,21,21,.5),transparent 62%),
    radial-gradient(110% 140% at 100% 100%,rgba(255,203,5,.3),transparent 64%),
    linear-gradient(120deg,#5A1A22,#3A2A14);
  border-color:rgba(255,203,5,.3);
  box-shadow:0 16px 36px -16px rgba(238,21,21,.45)}
.qhero__streak{flex-shrink:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);
  box-shadow:0 0 0 4px rgba(255,203,5,.22),0 0 24px rgba(255,203,5,.3);
  animation:frFloat 4.5s ease-in-out infinite}
.qhero__streak b{font-size:24px;font-weight:900;line-height:1;color:var(--yellow);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.qhero__streak span{margin-top:2px;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.qhero__streak.is-hot{animation:frFloat 4.5s ease-in-out infinite,
  frGlow 2.4s ease-in-out infinite}

/* The week of check-ins. */
.qcal{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.qcal__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;
  margin:0;padding:0;list-style:none}
.qcal__day{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:7px 2px 6px;border-radius:10px;
  background:rgba(8,10,14,.34);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);transition:transform .15s}
.qcal__n{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.7);white-space:nowrap}
.qcal__ico{width:30px;height:30px;margin:1px 0;object-fit:contain;
  image-rendering:pixelated}
.qcal__r{font-size:11px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.qcal__day.is-big{border-color:rgba(255,203,5,.45)}
.qcal__day.is-big .qcal__r{color:var(--yellow)}
.qcal__day.is-done{opacity:.5}
.qcal__day.is-today{opacity:1;transform:translateY(-3px);
  border-color:var(--yellow);background:rgba(255,203,5,.16);
  animation:frGlow 2.4s ease-in-out infinite}
.qcal__day.is-today .qcal__ico{animation:qHop 1.6s ease-in-out infinite}
.qcal__day.is-today .qcal__n{color:var(--yellow)}
/* A green tick in the corner of a day already paid. */
.qcal__tick{position:absolute;top:-5px;right:-5px;width:15px;height:15px;
  border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px #2A1C16}
.qcal__tick::after{content:"";position:absolute;left:5px;top:2.5px;width:3px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.qcal__act{display:flex;justify-content:flex-end}
.qhero__claim{padding:9px 18px;font-size:13px;
  box-shadow:0 6px 18px -6px rgba(238,21,21,.8)}
.qhero__wait{padding:7px 13px;border-radius:999px;font-size:12px;
  color:rgba(255,255,255,.88);background:rgba(8,10,14,.34);
  border:1px solid rgba(255,255,255,.14)}
@keyframes qHop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* The Poke Ball on a claim button, and its wobble while the server
   decides - the shake before a catch is confirmed. */
.qball{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.is-catching .qball{animation:qWobble .7s ease-in-out infinite;
  transform-origin:50% 90%}
@keyframes qWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg)}
  75%{transform:rotate(22deg)}}

.qbody{min-width:0}

/* ── Quests: one section per ball ────────────────────── */
.qslot{--sc:238,21,21;display:flex;flex-direction:column;gap:10px;padding:12px;
  border-radius:var(--r);border:1px solid var(--line);
  border-top:3px solid rgb(var(--sc));
  background:linear-gradient(180deg,rgba(var(--sc),.10),var(--ink-3) 140px)}
.qslot--weekly{--sc:42,117,187}
.qslot--monthly{--sc:255,203,5}
.qslot__head{display:flex;align-items:center;gap:10px}
.qslot__ball{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.qslot__id{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.qslot__id h4{margin:0;font-size:14px;font-weight:900}
.qslot__id span{font-size:11px;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.qslot__pool{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:5px 10px;
  border-radius:10px;background:rgba(0,0,0,.18);border:1px dashed rgba(255,255,255,.08)}
.qslot__pool span{margin-right:4px;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-dim)}
.qslot__pool i{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  transition:transform .15s,background .15s;cursor:help}
.qslot__pool i:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}
.qslot__pool img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}

.qlist{display:flex;flex-direction:column;gap:8px}
.qcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;
  gap:12px;padding:10px 12px;border-radius:12px;
  background:var(--ink-2);border:1px solid var(--line);
  transition:transform .15s,border-color .15s}
.qcard:hover{transform:translateY(-1px);border-color:rgba(var(--sc),.45)}
.qcard__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,rgba(var(--sc),.28),var(--ink) 72%);
  border:1px solid rgba(var(--sc),.35)}
.qcard__ico img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.qcard__body{min-width:0}
.qcard__top{display:flex;align-items:baseline;gap:8px}
.qcard__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13.5px;font-weight:800}
.qcard__count{margin-left:auto;font-size:11px;font-weight:700;color:var(--txt-dim);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.qcard__desc{margin:2px 0 7px;font-size:11.5px;line-height:1.45;color:var(--txt-dim)}
.qcard__act{display:flex;align-items:center}
.qcard__claim{padding:7px 14px}
.qcard__stamp{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;
  white-space:nowrap;color:var(--ok);border:1px solid rgba(63,217,138,.4);
  transform:rotate(-4deg)}
.qcard.is-ready{border-color:rgba(255,203,5,.55);
  background:linear-gradient(90deg,rgba(255,203,5,.1),var(--ink-2) 65%);
  animation:frGlow 2.6s ease-in-out infinite}
.qcard.is-claimed{opacity:.6}
.qcard.is-claimed .qcard__ico img{filter:grayscale(.7)}

/* The EXP bar from the summary screen. */
.qexp{display:flex;align-items:center;gap:6px}
.qexp__lbl{padding:1px 5px;border-radius:4px;font-size:8.5px;font-weight:900;
  letter-spacing:.06em;color:var(--yellow);background:var(--ink)}
.qexp__bar{flex:1;height:7px;border-radius:99px;overflow:hidden;
  background:var(--ink);border:1px solid rgba(255,255,255,.06)}
.qexp__bar i{position:relative;display:block;height:100%;border-radius:99px;
  background:linear-gradient(180deg,#6CC4FF,#2A75BB);transition:width .5s ease-out}
.qexp__bar i::after{content:"";position:absolute;inset:0 0 50% 0;border-radius:99px;
  background:rgba(255,255,255,.28)}
.qcard.is-ready .qexp__bar i,.qcard.is-claimed .qexp__bar i{
  background:linear-gradient(180deg,#FFE066,var(--yellow-dk))}

/* ── Achievements ────────────────────────────────────── */
.qfilters{display:flex;flex-wrap:wrap;gap:6px}
.qfilter{padding:6px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--ink-3);color:var(--txt-dim);font:inherit;font-size:12px;
  font-weight:700;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.qfilter span{opacity:.7;font-variant-numeric:tabular-nums}
.qfilter:hover{color:var(--txt);border-color:var(--txt-dim)}
.qfilter.is-on{color:#fff;border-color:var(--red);background:rgba(238,21,21,.18)}
.qshelf{display:flex;flex-direction:column;gap:8px}
.qshelf .frhead{display:flex;align-items:center;gap:7px}
.qshelf__ico{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.qachs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.qach{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;
  gap:11px;padding:10px 12px;border-radius:12px;
  background:var(--ink-2);border:1px solid var(--line)}
/* A medal whose ring fills as it is worked towards. */
.qach__medal{--p:0;position:relative;display:grid;place-items:center;width:48px;
  height:48px;border-radius:50%;
  background:conic-gradient(var(--blue) calc(var(--p) * 1%),rgba(255,255,255,.08) 0)}
.qach__medal::before{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--ink)}
.qach__medal img{position:relative;width:28px;height:28px;object-fit:contain;
  image-rendering:pixelated;filter:grayscale(1);opacity:.55}
.qach__body{display:flex;flex-direction:column;min-width:0}
.qach__name{font-size:13px;font-weight:800}
.qach__desc{font-size:11px;line-height:1.4;color:var(--txt-dim)}
.qach__meta{margin-top:3px;font-size:10.5px;font-weight:700;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.qach__pay{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:800;
  white-space:nowrap;color:var(--txt-dim)}
.qach__pay img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated}
.qach.is-earned{border-color:rgba(255,203,5,.4);
  background:linear-gradient(135deg,rgba(255,203,5,.09),var(--ink-2) 60%)}
.qach.is-earned .qach__medal{background:conic-gradient(var(--yellow) 0 100%);
  box-shadow:0 0 14px rgba(255,203,5,.35)}
.qach.is-earned .qach__medal img{filter:none;opacity:1}
.qach.is-earned .qach__name,.qach.is-earned .qach__pay{color:var(--yellow)}
.qach.is-earned .qach__meta{color:var(--ok)}

/* ── Type collections ────────────────────────────────── */
.qtypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.qtype{position:relative;overflow:hidden;padding:11px 12px;border-radius:12px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 22%,var(--ink-2)),
    var(--ink-2) 62%);
  border:1px solid color-mix(in srgb,var(--tc) 35%,var(--line))}
.qtype__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.qtype__label{height:20px;width:auto;max-width:96px;object-fit:contain}
.qtype__n{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.qtype__n span{margin-left:4px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-dim)}
.qtype__rungs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;
  margin:10px 0 8px}
.qtype__rungs i{display:grid;place-items:center;height:22px;border-radius:999px;
  font-style:normal;font-size:10px;font-weight:800;color:var(--txt-dim);
  font-variant-numeric:tabular-nums;cursor:help;
  background:rgba(0,0,0,.22);border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}
.qtype__rungs i.is-on{color:#fff;background:var(--tc);border-color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 0 10px color-mix(in srgb,var(--tc) 55%,transparent)}
.qtype__bar{height:5px;border-radius:99px;overflow:hidden;background:var(--ink)}
.qtype__bar i{display:block;height:100%;border-radius:99px;background:var(--tc);
  transition:width .5s ease-out}
.qtype__next{display:block;margin-top:6px;font-size:11px;color:var(--txt-dim)}
/* A finished ladder shines in its own colour. */
.qtype.is-done{border-color:var(--tc);
  box-shadow:0 0 0 1px var(--tc),0 8px 22px -10px var(--tc)}
.qtype.is-done::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,
    transparent 60%) 0 0/250% 100%;animation:qShine 4s linear infinite}
@keyframes qShine{from{background-position:150% 0}to{background-position:-100% 0}}

@media (max-width:640px){
  .qcal__days{gap:4px}
  .qcal__day{padding:6px 0 5px}
  .qcal__n{font-size:8px;letter-spacing:0}
  .qcal__ico{width:24px;height:24px}
  .qcal__r{font-size:10px}
  .qcal__act{justify-content:stretch}
  .qhero__claim,.qhero__wait{width:100%;text-align:center}
  .qcard{grid-template-columns:38px minmax(0,1fr);gap:10px}
  .qcard__ico{width:38px;height:38px}
  .qcard__ico img{width:26px;height:26px}
  .qcard__act{grid-column:1/-1;justify-content:flex-end}
  .qachs{grid-template-columns:minmax(0,1fr)}
  .qtypes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  /* Two columns leave no room for the word beside a three-digit
     count; the number says enough on its own. */
  .qtype__n span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .quests *,.quests *::before,.quests *::after{animation:none!important;
    transition:none!important}
}

/* Money in the header. Prize money was paid for every battle and had
   nowhere to show, which is why players reported trainers paying
   nothing — they always had. */
.hmoney{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 8px;border-radius:999px;
  background:rgba(255,203,5,.08);border:1px solid rgba(255,203,5,.24);color:#FFE27A;
  font:700 .88rem var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.hmoney__ico{width:18px;height:18px;object-fit:contain;
  image-rendering:pixelated}
.hmoney b{font-weight:800;letter-spacing:.01em}
.hmoney b::before{content:'₽';opacity:.65;margin-right:1px;font-weight:600}
.hmoney.is-up{animation:hmoney-up .7s ease}
@keyframes hmoney-up{
  0%{transform:scale(1)}
  30%{transform:scale(1.12);
      border-color:var(--gold,#ffcc33);
      box-shadow:0 0 14px rgba(255,204,51,.45)}
  100%{transform:scale(1)}}

@media (max-width:640px){
  .hmoney{padding:4px 9px 4px 6px;font-size:.8rem;gap:4px}
  .hmoney__ico{width:15px;height:15px}
}

/* The held-item picker.

   Three hundred items in one column, each carrying its full effect
   text, is what players called unreadable — and sixty-eight of them
   are Mega Stones whose descriptions differ by a single species
   name. It is a grid of sprites now, with a search, group tabs, and
   one description at a time for whatever is under the pointer.

   Taking the item back keeps its own row above the grid. It was
   already there and already highlighted, and players still reported
   that an item could only be swapped — because it sat in the same
   column as three hundred others and read as one of them. Out of
   the list entirely this time. */
.helditems__take{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;margin-bottom:12px;
  background:linear-gradient(135deg,rgba(229,72,77,.18),var(--ink-3));
  border:1px solid rgba(229,72,77,.55);border-radius:var(--r-sm);
  color:var(--txt);cursor:pointer;transition:.14s}
.helditems__take:hover{
  background:linear-gradient(135deg,rgba(229,72,77,.3),var(--ink-3));
  border-color:rgba(229,72,77,.8)}
.helditems__take img{width:26px;height:26px;object-fit:contain;
  image-rendering:pixelated;flex-shrink:0}
.helditems__take span{display:flex;flex-direction:column;gap:2px}
.helditems__take b{font-size:12px;font-weight:700}
.helditems__take em{font-size:10px;color:var(--txt-dim);font-style:normal}

/* Search and groups. */
.helditems__bar{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.helditems__find{
  padding:6px 10px;font-size:12px;font-family:inherit;color:var(--txt);
  background:var(--ink-3);border:1px solid var(--line);border-radius:6px;
  outline:none;width:100%}
.helditems__find:focus{border-color:var(--red)}
.helditems__tabs{display:flex;flex-wrap:wrap;gap:5px}
.hitab{
  padding:4px 9px;font-size:10px;font-weight:700;letter-spacing:.03em;
  background:var(--ink-3);border:1px solid var(--line);border-radius:999px;
  color:var(--txt-dim);cursor:pointer;transition:.14s}
.hitab em{font-style:normal;opacity:.65;margin-left:3px}
.hitab:hover{color:var(--txt);border-color:var(--txt-dim)}
.hitab.is-on{background:var(--red);border-color:var(--red-lt);color:#fff}
.hitab.is-on em{opacity:.8}

/* The grid itself: a sprite and a name, nothing more. */
.helditems__grid{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
  max-height:44vh;overflow-y:auto;padding-right:2px}
.hicard{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:8px 5px;
  background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--txt);cursor:pointer;
  transition:.12s}
.hicard:hover:not([disabled]),.hicard:focus-visible{
  border-color:var(--red);transform:translateY(-1px)}
.hicard[disabled]{opacity:.4;cursor:default}
.hicard img{width:28px;height:28px;object-fit:contain;
  image-rendering:pixelated}
.hicard__name{
  font-size:9.5px;line-height:1.25;text-align:center;
  /* Two lines, then trimmed: an item name is recognisable long
     before it is complete, and a card that grows to fit the longest
     one wastes the row for every other. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.hicard__qty{
  position:absolute;top:3px;right:4px;font-size:9px;font-weight:800;
  color:var(--txt-dim)}

@media (max-width:520px){
  .helditems__grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .helditems__grid{max-height:38vh}
}

/* At the level cap the bar is full rather than empty — the stored
   experience is zeroed because there is no part-level to keep, and
   reading that as 0% made a Pokemon look like it had lost everything
   it had just been shown gaining. Coloured apart so a full bar does
   not read as "about to level up". */
.expbar i.is-capped{
  background:linear-gradient(90deg,#8899ff,#aab4ff);
  opacity:.75}

/* The Discord button, on the sign-in page and in the options. Players
   had nowhere to report anything from inside the game. */
.discordbtn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:14px auto 0;padding:11px 22px;
  max-width:280px;border-radius:12px;
  background:#5865F2;color:#fff;
  font:inherit;font-size:.95rem;font-weight:700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px rgba(88,101,242,.35);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.discordbtn:hover{
  transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 10px 26px rgba(88,101,242,.5);
  text-decoration:none;color:#fff}
.discordbtn__ico{width:22px;height:22px;fill:currentColor;flex-shrink:0}
.discordbtn--opt{margin:4px 0 0;max-width:none}

@media (max-width:640px){
  .discordbtn{padding:10px 18px;font-size:.88rem}
}

/* Type filter in the PC. Eighteen chips in the game's own type
   colours, several of which can be on at once. */
.chips--types{flex-wrap:wrap;gap:4px}
.chip--type{
  padding:3px 9px;border:1px solid transparent;border-radius:999px;
  cursor:pointer;opacity:.4;
  transition:opacity .14s ease,transform .14s ease}
.chip--type:hover{opacity:.75;transform:translateY(-1px)}
.chip--type.is-on{
  opacity:1;
  border-color:rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.4)}
.fld--types{grid-column:1/-1}

@media (max-width:640px){
  .chip--type{padding:2px 7px;font-size:8px}
}

/* Who is playing right now. The counter told you there were nine
   people about and nothing else - not whether any of them was
   somebody you could trade with. */
.onlinelist{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.onlinelist__who{display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--ink-3);border:1px solid var(--line);font-size:.84rem}

/* Watching a raid back. A raid is settled on the server in one pass,
   so the guild only ever saw whether the boss fell - this plays the
   run: the health bar coming down one trainer at a time. */
.msg__replay{
  display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;
  border:1px solid var(--blue);background:rgba(77,155,255,.12);
  color:var(--blue);font-size:.74rem;cursor:pointer;
}
.msg__replay:hover{background:rgba(77,155,255,.22)}

.replay__boss{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.replay__boss img{width:64px;height:64px;object-fit:contain;
  image-rendering:pixelated}
.replay__boss b{display:block;font-size:1.05rem}
.replay__lv{color:var(--txt-dim);font-size:.8rem}
.replay__bar{height:12px;border-radius:99px;background:var(--ink);
  overflow:hidden;border:1px solid var(--line)}
.replay__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--yellow));
  transition:width .45s ease}
.replay__hp{margin:6px 0 12px;font-size:.8rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums;text-align:right}
.replay__turns{max-height:44vh;overflow:auto;display:flex;
  flex-direction:column;gap:4px}
.replay__turn{display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-radius:8px;background:var(--ink-2);border:1px solid var(--line);
  font-size:.84rem}
.replay__turn b{flex:1}
.replay__turn span{color:var(--txt-dim);font-variant-numeric:tabular-nums}
.replay__turn em{color:var(--ok);font-style:normal;font-size:.76rem}

/* The fight behind a trainer's total: one block per Pokemon, one row
   per turn. Folded away by default - the replay is a summary first,
   and this is for somebody asking why a number was what it was. */
.replay__more{margin-left:6px;padding:0 6px;color:var(--txt-dim);
  font-size:.8rem;line-height:1;background:none;border:0;cursor:pointer}
.replay__more:hover{color:var(--txt)}
.replay__detail{margin:-2px 0 6px;padding:6px 8px 8px;
  border-radius:0 0 8px 8px;background:var(--ink);
  border:1px solid var(--line);border-top:0}

.rpmon{margin:6px 0 0;padding:5px 6px;border-radius:6px;background:var(--ink-2)}
.rpmon.is-out{opacity:.62}
.rpmon__head{display:flex;align-items:center;gap:7px;font-size:.8rem;
  margin-bottom:3px}
.rpmon__head img{width:24px;height:24px;object-fit:contain;
  image-rendering:pixelated}
.rpmon__head b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpmon__lv{color:var(--txt-dim);font-size:.7rem}
.rpmon__dealt{font-variant-numeric:tabular-nums;font-weight:700;
  font-size:.76rem}
.rpmon__head em{font-style:normal;font-size:.68rem;color:var(--txt-dim)}
.rpmon__head em.is-final{color:var(--ok)}

.rpturn{display:grid;grid-template-columns:18px 1fr auto auto 62px;
  align-items:center;gap:7px;padding:1px 0;font-size:.72rem}
.rpturn__n{color:var(--txt-dim);text-align:right;font-size:.64rem}
.rpturn__move{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpturn__move em{font-style:normal;font-size:.58rem;font-weight:800;
  margin-left:4px;padding:0 3px;border-radius:2px;
  background:var(--ink-3);color:var(--txt-dim)}
.rpturn__why{font-size:.64rem;color:var(--txt-dim);text-align:right}
.rpturn__dmg{font-variant-numeric:tabular-nums;text-align:right;
  font-weight:700}
.rpturn__back{font-size:.64rem;color:var(--danger);text-align:right;
  font-variant-numeric:tabular-nums}

/* Narrow: the reason drops before the numbers do. */
@media (max-width:520px){
  .rpturn{grid-template-columns:16px 1fr auto 54px}
  .rpturn__why{display:none}
}
.replay__turn.is-final{border-color:var(--ok)}
.replay__end{margin:12px 0 0;text-align:center;font-weight:600}
.replay__end.is-won{color:var(--ok)}
.replay__end.is-lost{color:var(--txt-dim)}

/* ============================================================
   The battle screen on a phone

   The new screen was drawn against a desktop window and never sized
   down. On a 390px phone the two sprites overlapped by about thirty
   pixels — the player's Pokemon standing through the wild one — and
   the two health cards, at 152px each, wanted 304px of a 360px field
   with nothing left between them.

   So on a narrow screen the pair are drawn smaller and pulled in
   towards their own edges, the cards give up their minimum width,
   and the command plate stops trying to be a 2x2 grid of full-size
   lettering.
   ============================================================ */
@media (max-width:640px){
  /* Standing spots, tightened. The foe keeps its distance up the
     picture; both come in towards their own side so they no longer
     meet in the middle. */
  .bside--foe .bmon{right:6%}
  .bside--me  .bmon{left:3%}

  .bmon img{
    width:clamp(76px,15vh,124px);height:clamp(76px,15vh,124px);
  }
  .bside--foe .bmon img{
    width:clamp(66px,12.5vh,104px);height:clamp(66px,12.5vh,104px);
  }

  /* The cards: narrower, and the padding that made them wide again
     taken back. Two of them still have to sit either side of a field
     a third the width they were designed for. */
  .bcard{
    min-width:0;max-width:52vw;
    padding:5px 9px 6px;
    font-size:.9em;
  }
  .expbar{margin:4px 0 0}

  /* The command slabs. Still two by two with the diamond between
     them, at a size that fits a thumb rather than a mouse. */
  .bmenu{--c:20px;gap:8px}
  .bbtn{font-size:clamp(13px,3.4vw,16px);gap:5px}
  .bmenu .bbtn{min-height:44px;font-size:clamp(14px,4vw,17px)}

  /* The move list: one column reads better than two on a narrow
     screen, and a move name has room for its whole name. */
  .bmoves{grid-template-columns:1fr;gap:5px}
  .mvbtn{padding:6px 9px}
  .mvbtn__name{font-size:clamp(13px,3.6vw,16px)}

  /* The Mega key stays in the diamond between the slabs, which are
     the full width of the screen here and nowhere near the player's
     card. A smaller diamond for the smaller cut. */
  .bmega{--d:32px}

  /* The log, which had been sized for a window twice this wide. */
  .blog{font-size:.82rem;padding:6px 8px}
}

/* Phones held upright, where height is the scarcer of the two.
   Everything above still applies; this only takes the sprites down
   again so the field, the cards and the plate all fit at once. */
@media (max-width:430px) and (orientation:portrait){
  .bmon img{
    width:clamp(70px,22vw,104px);height:clamp(70px,22vw,104px);
  }
  .bside--foe .bmon img{
    width:clamp(62px,19vw,92px);height:clamp(62px,19vw,92px);
  }
  .bside--foe .bmon{right:4%;bottom:34%}
  .bside--me  .bmon{left:2%;bottom:1%}
  .bcard{max-width:56vw}
  .battle__field{padding:8px 10px}
  .battle__ui{padding:8px 10px 10px}
}


/* ============================================================
   Showcase controls

   Two buttons under the Ball, for recording a trailer: line the
   next wild encounter up as a Shiny or a Shadow. Drawn only for an
   admin — js/showcase.js asks the server first, and the server
   refuses the request from anybody else regardless.

   Deliberately plain. It is a recording tool, not part of the game,
   and it should not look like something a player is missing out on.
   ============================================================ */
.showcase{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  justify-content:center;
  margin:10px auto 0;padding:7px 11px;
  max-width:max-content;
  background:rgba(10,14,20,.72);
  border:1px dashed var(--line);border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.showcase__lbl{
  font-size:10px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txt-dim);
}
.showcase__btn{
  padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.03em;
  border:1px solid var(--line-2, #334155);
  background:var(--ink-3);color:var(--txt);
  cursor:pointer;transition:.15s;
}
.showcase__btn:hover{filter:brightness(1.15)}
.showcase__btn:disabled{opacity:.5;cursor:default}

/* Armed: the button takes the colour of what it will produce, so a
   glance at the recording says which is queued. */
.showcase__btn--shiny.is-armed{
  background:var(--shiny,#ffd54a);border-color:var(--shiny,#ffd54a);
  color:#1a1508;
  box-shadow:0 0 12px rgba(255,213,74,.5);
}
.showcase__btn--shadow.is-armed{
  background:var(--shadow,#9b5cff);border-color:var(--shadow,#9b5cff);
  color:#fff;
  box-shadow:0 0 12px rgba(155,92,255,.5);
}
.showcase__state{
  font-size:11px;color:var(--txt-dim);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .showcase{gap:5px;padding:5px 9px;margin-top:8px}
  .showcase__lbl{display:none}
  .showcase__btn{padding:4px 10px;font-size:11px}
  .showcase__state{width:100%;text-align:center}
}

/* ── The Ball inside the Safari panel ─────────────────
   The same Ball as the main screen, for the same action — searching
   the grass. A plain button there made the reserve feel like a
   different game from a route, when it is the same thing.

   Smaller than on the main screen, because it sits in a panel rather
   than filling one: 112px at its smallest out there would crowd the
   timer and the progress bar above and below it. */
.pokeball--saf{
  --sz:clamp(84px,13vh,128px);
  margin:6px auto 2px;
}
.safsession .clickhint{
  margin:0 0 8px;text-align:center;
  font-size:12.5px;color:var(--txt-dim);
}
@media (max-width:640px){
  .pokeball--saf{--sz:clamp(76px,17vw,104px)}
}

/* ============================================================
   THE DAILY DRAW
   A Loto-ID kiosk: a banner with the clock; the machine - a drum of
   balls and five Poké Ball slots that drop, wobble and open right to
   left - with the ticket's numbers under it; then tonight's ticket,
   the prize ladder, the week's numbers and who collected. The two
   colours are set once on .lotto and everything mixes from them.
   ============================================================ */
.lotto{
  --lt-a:#3EC7FF;--lt-gold:var(--yellow);
  --lt-deep:#0E1F3D;--lt-deeper:#070F20;
  --lt-a-soft:color-mix(in srgb,var(--lt-a) 16%,transparent);
  --lt-gold-soft:color-mix(in srgb,var(--lt-gold) 18%,transparent);
  display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto;
  animation:gcIn .2s ease}
.lotto [hidden]{display:none!important}
.lotto img{image-rendering:pixelated}

/* ── The banner ──────────────────────────────────────── */
.lotto__hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px 18px;
  padding:22px 18px 16px;border-radius:var(--r);color:#fff;
  background:
    radial-gradient(110% 140% at 0% 0%,
      color-mix(in srgb,var(--lt-a) 42%,transparent),transparent 60%),
    radial-gradient(90% 120% at 100% 100%,
      color-mix(in srgb,var(--lt-gold) 24%,transparent),transparent 62%),
    linear-gradient(120deg,var(--lt-deep),var(--lt-deeper));
  border:1px solid color-mix(in srgb,var(--lt-a) 38%,transparent);
  box-shadow:0 16px 36px -14px color-mix(in srgb,var(--lt-a) 50%,transparent)}
/* A faint Poké Ball in the corner, as on the Game Corner's banner. */
.lotto__hero::before,.lotto__hero::after{content:"";position:absolute;
  z-index:-1;pointer-events:none}
.lotto__hero::before{right:-46px;top:-46px;width:190px;height:190px;
  border-radius:50%;border:18px solid rgba(255,255,255,.07)}
.lotto__hero::after{right:-46px;top:40px;width:190px;height:18px;
  background:rgba(255,255,255,.07)}
.lotto__bulbs{position:absolute;left:10px;right:10px;top:6px;height:8px;
  background:radial-gradient(circle,var(--lt-a) 0 2px,
    color-mix(in srgb,var(--lt-a) 30%,transparent) 2.5px,transparent 3.5px)
    0 50%/16px 8px repeat-x;
  opacity:.8;animation:bulbs 1.8s linear infinite}

.lotto__brand{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 380px}
.lotto__emblem{flex-shrink:0;width:60px;height:60px;border-radius:18px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 0 4px var(--lt-gold-soft),
             0 0 24px color-mix(in srgb,var(--lt-a) 45%,transparent);
  animation:gcFloat 4.5s ease-in-out infinite}
.lotto__emblem img{width:42px;height:42px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.lotto__eyebrow{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.lotto__title{margin:2px 0 0;font:800 clamp(24px,3.6vw,32px)/1.05 var(--display);
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.lotto__sub{margin:5px 0 0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.82);
  max-width:58ch}

.lotto__clock{display:flex;flex-direction:column;align-items:flex-end;min-width:150px;
  padding:10px 14px;border-radius:12px;
  background:rgba(5,10,20,.42);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lotto__clock span{font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.lotto__clock b{font:800 26px/1.15 var(--display);color:var(--lt-gold);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px color-mix(in srgb,var(--lt-gold) 50%,transparent)}
.lotto__clock small{font-size:11.5px;color:rgba(255,255,255,.75)}

/* ── The machine ─────────────────────────────────────── */
.lotto__stage{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:14px 16px 16px;border-radius:var(--r);
  background:
    radial-gradient(80% 90% at 50% 0%,var(--lt-a-soft),transparent 70%),
    var(--ink-3);
  border:1px solid var(--line)}
.lotto__stagehead{display:flex;flex-wrap:wrap;gap:6px}
.lotto__tag{padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt);
  background:var(--ink);border:1px solid var(--line)}
.lotto__tag.is-warn{color:var(--lt-gold);
  border-color:color-mix(in srgb,var(--lt-gold) 40%,transparent)}

.lotto__machine{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,4vw,40px);padding:10px 0 4px}

/* The drum: a glass window with balls tumbling in it. */
.lotto__drum{position:relative;flex-shrink:0;width:118px;height:118px;
  border-radius:50%;overflow:hidden;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.2),transparent 42%),
    radial-gradient(circle,color-mix(in srgb,var(--lt-a) 20%,var(--ink)) 0 58%,var(--ink) 100%);
  border:5px solid #c9d3e0;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),0 0 0 3px var(--ink),
             0 10px 24px rgba(0,0,0,.45),0 0 28px var(--lt-a-soft)}
.lotto__dball{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;
  animation:ltBob 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
@keyframes ltBob{50%{transform:translateY(-14px) rotate(30deg)}}
.lotto__stage.is-live .lotto__dball{animation:ltTumble .7s linear infinite;
  animation-delay:calc(var(--i) * -.12s)}
@keyframes ltTumble{
  25%{transform:translate(10px,-36px) rotate(140deg)}
  50%{transform:translate(-8px,-54px) rotate(260deg)}
  75%{transform:translate(-14px,-20px) rotate(330deg)}
  to{transform:rotate(360deg)}}

/* A slot: a Poké Ball drawn in two caps over the digit inside it.
   The caps fly apart when it opens. */
.lotto__slots{display:flex;gap:clamp(6px,1.6vw,12px)}
.lotto__slot{--sz:clamp(50px,9vw,68px);
  position:relative;width:var(--sz);height:var(--sz);border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#1b2a47,#0a1122 75%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.4);
  transition:box-shadow .3s}
.lotto__digit{font:800 calc(var(--sz) * .52)/1 var(--display);color:#fff;
  font-variant-numeric:tabular-nums;opacity:0;transform:scale(.4);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s,color .3s,text-shadow .3s}
.lotto__slot.is-open .lotto__digit{opacity:1;transform:none}
.lotto__slot.is-hit{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--lt-gold) 65%,transparent),
  0 0 22px var(--lt-gold-soft),0 6px 14px rgba(0,0,0,.4)}
.lotto__slot.is-hit .lotto__digit{color:var(--lt-gold);
  text-shadow:0 0 16px color-mix(in srgb,var(--lt-gold) 70%,transparent)}
.lotto__cap{position:absolute;left:0;right:0;height:50%;
  transition:transform .45s cubic-bezier(.5,-.3,.4,1.4),opacity .3s ease .12s}
.lotto__cap--top{top:0;border-radius:var(--sz) var(--sz) 0 0;
  background:linear-gradient(180deg,#ff6060,#d81b1b 70%,#a80f0f);
  border-bottom:calc(var(--sz) * .06) solid #111;transform-origin:50% 100%}
.lotto__cap--bot{bottom:0;border-radius:0 0 var(--sz) var(--sz);
  background:linear-gradient(180deg,#f4f6fa,#c3cad6);
  border-top:calc(var(--sz) * .06) solid #111}
.lotto__cap--top::after{content:"";position:absolute;z-index:1;left:50%;
  bottom:calc(var(--sz) * -.17);width:calc(var(--sz) * .28);height:calc(var(--sz) * .28);
  margin-left:calc(var(--sz) * -.14);border-radius:50%;
  background:#f4f6fa;border:calc(var(--sz) * .06) solid #111}
.lotto__slot.is-open .lotto__cap--top{transform:translateY(-70%) rotate(-28deg);opacity:0}
.lotto__slot.is-open .lotto__cap--bot{transform:translateY(60%) rotate(12deg);opacity:0}
.lotto__slot.is-drop{animation:ltDrop .38s cubic-bezier(.3,1.5,.6,1) both}
@keyframes ltDrop{from{transform:translateY(-70px) scale(.6);opacity:0}}
/* Three wobbles, the way a catch does it. */
.lotto__slot.is-wobble{animation:ltWobble .77s ease-in-out both}
@keyframes ltWobble{20%{transform:rotate(-18deg)}45%{transform:rotate(14deg)}
  70%{transform:rotate(-8deg)}}

.lotto__status{margin:0;min-height:1.3em;text-align:center;font-size:13px;color:var(--txt-dim)}
.lotto__stage.is-live .lotto__status{color:var(--lt-a);font-weight:600}

/* What it came to. */
.lotto__verdict{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;
  padding:12px 14px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line);
  animation:rinfoUp .4s cubic-bezier(.2,.7,.2,1) both}
.lotto__verdict.is-won{
  background:linear-gradient(90deg,var(--lt-gold-soft),transparent 80%),var(--ink);
  border-color:color-mix(in srgb,var(--lt-gold) 45%,transparent)}
.lotto__verdict.is-big{box-shadow:0 0 30px var(--lt-gold-soft)}
.lotto__vtext{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.lotto__vtext b{font:800 18px var(--display)}
.lotto__verdict.is-won .lotto__vtext b{color:var(--lt-gold)}
.lotto__vtext span{font-size:13px;color:var(--txt-dim)}
.lotto__vloot{display:flex;align-items:center;gap:6px}
.lotto__collect{padding:10px 18px;border:0;border-radius:12px;cursor:pointer;
  font:800 14px var(--display);color:#1a1300;
  background:linear-gradient(180deg,#ffe066,var(--lt-gold));
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--lt-gold) 75%,transparent);
  transition:transform .12s,filter .15s}
.lotto__collect:hover:not(:disabled){filter:brightness(1.06)}
.lotto__collect:active:not(:disabled){transform:translateY(1px)}
.lotto__collect:disabled{opacity:.5;cursor:default}
.lotto__verdict.is-lost .lotto__collect{color:var(--txt);background:var(--ink-4);
  border:1px solid var(--line);box-shadow:none}
.lotto__done{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ok)}

/* An item of a prize, and its money. */
.lotto__loot{position:relative;display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.lotto__loot img{width:30px;height:30px}
.lotto__loot small{position:absolute;right:-5px;bottom:-6px;padding:0 4px;
  font:800 10px/1.5 var(--display);border-radius:6px;
  background:var(--ink-2);border:1px solid var(--line)}
.lotto__cash{padding:4px 8px;border-radius:8px;white-space:nowrap;
  font:800 12.5px var(--display);color:var(--lt-gold);background:var(--lt-gold-soft);
  font-variant-numeric:tabular-nums}

/* The numbers on a ticket. */
.lotto__numshead{display:flex;justify-content:space-between;align-items:baseline;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-dim)}
.lotto__numshead b{color:var(--txt)}
.lotto__chips{list-style:none;margin:0;padding:2px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;
  max-height:232px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* Tonight's list is the compact one: a face and a number. */
.lotto__chips.is-small{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));max-height:176px}
.lotto__chips.is-small .lotto__who{display:none}
.lotto__chips.is-small .lotto__chip{justify-content:space-between}
.lotto__chip{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;
  border-radius:10px;background:var(--ink);border:1px solid var(--line);
  transition:opacity .3s,filter .3s,border-color .3s,box-shadow .3s}
.lotto__chip.is-own{border-color:color-mix(in srgb,var(--lt-a) 40%,var(--line))}
.lotto__face{flex-shrink:0;width:36px;height:36px;display:grid;place-items:center;
  border-radius:8px;background:rgba(255,255,255,.04);overflow:hidden}
.lotto__face img{width:52px;height:52px;max-width:none;object-fit:contain}
.lotto__chip.is-own .lotto__face img{width:30px;height:30px}
.lotto__who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.lotto__who b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lotto__who small{font-size:10.5px;color:var(--txt-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lotto__digits{display:flex;gap:1px;font:700 14px var(--mono);font-variant-numeric:tabular-nums}
.lotto__digits i{width:1.1em;font-style:normal;text-align:center;border-radius:4px;
  transition:color .25s,background .25s}
.lotto__digits i.is-hit{color:#1a1300;background:var(--lt-gold)}
.lotto__chip.is-out{opacity:.38;filter:grayscale(.8)}
.lotto__chip.is-best{opacity:1;filter:none;border-color:var(--lt-gold);
  box-shadow:0 0 0 1px var(--lt-gold),0 0 18px var(--lt-gold-soft)}
.lotto__empty{margin:0;text-align:center;font-size:13px;color:var(--txt-dim)}

.lotto__stagebar{display:flex;justify-content:center;gap:8px}
.lotto__stagebar:not(:has(button:not([hidden]))){display:none}
.lotto__ghost{padding:6px 14px;border-radius:999px;cursor:pointer;
  font:700 12px var(--sans);color:var(--txt-dim);
  background:transparent;border:1px solid var(--line);transition:color .15s,border-color .15s}
.lotto__ghost:hover{color:var(--txt);border-color:var(--lt-a)}
.lotto__ghost:focus-visible,.lotto__buy:focus-visible,.lotto__collect:focus-visible{
  outline:2px solid var(--lt-a);outline-offset:2px}

/* ── Panels ──────────────────────────────────────────── */
.lotto__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lotto__panel{display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:14px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
.lotto__h{margin:0;font:700 15px var(--display)}
.lotto__note{margin:0;font-size:12px;line-height:1.4;color:var(--txt-dim)}
.lotto__tip{margin:0;padding-left:10px;font-size:12px;line-height:1.4;color:var(--txt-dim);
  border-left:2px solid var(--lt-a)}

/* Tonight's ticket. */
.lotto__buy{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:12px 16px;border:0;border-radius:12px;cursor:pointer;
  font:800 15px var(--display);color:#1a1300;
  background:linear-gradient(180deg,#ffe066,var(--lt-gold));
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--lt-gold) 80%,transparent);
  transition:transform .12s,filter .15s}
.lotto__buy b{font-size:17px;font-variant-numeric:tabular-nums}
.lotto__buy:hover:not(:disabled){filter:brightness(1.06)}
.lotto__buy:active:not(:disabled){transform:translateY(1px)}
.lotto__buy:disabled{opacity:.5;cursor:not-allowed}
/* A bought ticket, torn off with a notch either side. */
.lotto__stub{position:relative;display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 14%,transparent),transparent);
  border:1px dashed color-mix(in srgb,var(--ok) 55%,transparent);
  animation:ltPrint .5s cubic-bezier(.2,.7,.2,1) both}
.lotto__stub::before,.lotto__stub::after{content:"";position:absolute;top:50%;
  width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--ink-3);
  border:1px dashed color-mix(in srgb,var(--ok) 55%,transparent)}
.lotto__stub::before{left:-8px}
.lotto__stub::after{right:-8px}
@keyframes ltPrint{from{opacity:0;transform:translateY(-8px) scaleY(.85)}}
.lotto__stub img{width:40px;height:40px;flex-shrink:0}
.lotto__stub b{display:block;font:800 15px var(--display);color:var(--ok)}
.lotto__stub span{font-size:12px;color:var(--txt-dim)}

.lotto__streak{display:flex;flex-direction:column;gap:7px;padding-top:10px;
  border-top:1px solid var(--line)}
.lotto__pips7{display:flex;gap:5px}
.lotto__pip{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);border:1px solid var(--line)}
.lotto__pip img{width:26px;height:26px;filter:grayscale(1) brightness(.55);opacity:.6}
.lotto__pip.is-on{border-color:color-mix(in srgb,var(--lt-a) 55%,var(--line))}
.lotto__pip.is-on img{filter:none;opacity:1}
.lotto__pip.is-free{border-color:color-mix(in srgb,var(--lt-gold) 50%,var(--line))}
.lotto__pip.is-next{animation:ltPulse 1.6s ease-in-out infinite}
@keyframes ltPulse{50%{box-shadow:0 0 0 4px var(--lt-a-soft)}}
.lotto__streak span{font-size:12px;color:var(--txt-dim)}

/* The ladder. */
.lotto__ladder{display:flex;flex-direction:column;gap:6px}
.lotto__prize{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;background:var(--ink);border:1px solid var(--line);
  transition:border-color .3s,box-shadow .3s}
.lotto__prize.is-top{
  background:linear-gradient(90deg,var(--lt-gold-soft),var(--ink) 70%);
  border-color:color-mix(in srgb,var(--lt-gold) 35%,var(--line))}
.lotto__prize.is-won{border-color:var(--lt-gold);
  box-shadow:0 0 0 1px var(--lt-gold),0 0 18px var(--lt-gold-soft)}
.lotto__pips{display:flex;gap:3px;flex-shrink:0}
.lotto__pips i{width:9px;height:9px;border-radius:50%;
  background:var(--ink-4);border:1px solid var(--line)}
.lotto__pips i.is-on{background:var(--lt-gold);border-color:var(--lt-gold);
  box-shadow:0 0 6px var(--lt-gold-soft)}
.lotto__pbody{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.lotto__pbody b{font-size:13px}
.lotto__pbody small{font-size:11px;color:var(--txt-dim)}
.lotto__pgot{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}

/* The last week, and who collected. */
.lotto__history,.lotto__winners{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px}
.lotto__history li,.lotto__winners li{display:grid;align-items:center;gap:10px;
  padding:6px 10px;border-radius:8px;background:var(--ink);border:1px solid var(--line);
  font-size:12.5px}
.lotto__history li{grid-template-columns:1fr auto 74px}
.lotto__history li:first-child{border-color:color-mix(in srgb,var(--lt-a) 40%,var(--line))}
.lotto__history span{color:var(--txt-dim)}
.lotto__history b{font:700 15px var(--mono);letter-spacing:.14em}
.lotto__history em,.lotto__winners em{font-style:normal;text-align:right;font-size:11.5px;
  color:var(--txt-dim)}
.lotto__history li.is-hit em{color:var(--lt-gold);font-weight:700}
.lotto__winners li{grid-template-columns:auto 1fr auto}
.lotto__winners b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lotto__winners li[data-m="4"],.lotto__winners li[data-m="5"]{
  border-color:color-mix(in srgb,var(--lt-gold) 45%,var(--line));
  background:linear-gradient(90deg,var(--lt-gold-soft),var(--ink) 70%)}

.lotto__msg{margin:0;min-height:1.2em;text-align:center;font-size:13px}
.lotto__msg.is-good{color:var(--ok)}
.lotto__msg.is-bad{color:var(--red-lt)}

@media (max-width:640px){
  .lotto__hero{padding:20px 14px 14px}
  .lotto__clock{width:100%;align-items:flex-start}
  .lotto__cols{grid-template-columns:1fr}
  .lotto__machine{flex-direction:column;gap:14px}
  .lotto__drum{width:92px;height:92px}
  .lotto__dball{width:26px;height:26px;margin:-13px 0 0 -13px}
  .lotto__chips{grid-template-columns:1fr}
  .lotto__prize{grid-template-columns:auto 1fr}
  .lotto__pgot{grid-column:1 / -1;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .lotto__dball,.lotto__bulbs,.lotto__emblem,.lotto__pip.is-next{animation:none}
}

/* ── Ranks ───────────────────────────────────────────────
   Four ranks, shown as cards. Each one carries an icon with the
   text tag underneath it, so a rank whose artwork has not been
   dropped into sprites/ranks/ yet still reads as [DEV] rather than
   as a broken image. */

.rk-wrap{display:flex;flex-direction:column;gap:16px}

.rk__head h3{margin:0;font-size:19px}
.rk__sub{margin:3px 0 0;font-size:13.5px;color:var(--txt-dim);max-width:56ch}

.rk__list{display:grid;gap:10px}

.rk{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;
  padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--ink-2);
  /* Not held yet reads as not held: dimmed, but still legible. */
  opacity:.62;transition:opacity .18s ease,border-color .18s ease;
}
.rk.is-held{opacity:1;border-color:rgba(255,255,255,.18);background:var(--ink-3)}

/* The icon. Sized to the artwork, which is square. */
.rk__ico{
  position:relative;display:grid;place-items:center;
  width:88px;height:71px;flex:none;
}
/* contain, damit das ganze Banner zu sehen ist: die Bilder sind breiter
   als hoch, und ein Kasten mit anderem Verhaeltnis schnitt sonst quer
   durch die Grafik. */
.rk__ico img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
/* The tag is hidden behind the artwork, and steps in when there is
   none — the img removes itself on error and sets this class. */
.rk__tag{display:none}
.rk__ico.is-text{
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ink);
}
.rk__ico.is-text .rk__tag{
  display:block;font-family:var(--mono);font-size:13px;
  letter-spacing:.06em;color:var(--txt-dim);
}

/* Each rank keeps the colour of its artwork, so the four are
   distinguishable at a glance even before the icons are in. */
.rk__ico--developer.is-text .rk__tag{color:#ff4d6d}
.rk__ico--moderator.is-text .rk__tag{color:#57c7ff}
.rk__ico--donator.is-text .rk__tag{color:var(--yellow)}
.rk__ico--complete-dex.is-text .rk__tag{color:#d7e3f4}

.rk__body{min-width:0}
.rk__name{margin:0;font-size:15px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rk__chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--txt-dim);font-weight:400;
}
.rk__text{margin:4px 0 0;font-size:13px;color:var(--txt-dim);line-height:1.45}

.rk__left,.rk__have{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-dim);white-space:nowrap;
}
.rk__have{color:var(--ok)}

/* The Pokedex bar for the one rank that is earned. */
.rk__dex{
  padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--ink-2);
}
.rk__dexhead{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--txt-dim);margin-bottom:8px;
}
.rk__dexhead b{color:var(--txt);font-size:14px}
.rk__track{
  display:block;height:7px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.rk__track i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--yellow));
}
.rk__note{margin:8px 0 0;font-size:12.5px;color:var(--txt-dim)}

/* Supporting the project. */
.rk__buy{
  padding:14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--ink-2);
}
.rk__buy.is-on{border-color:rgba(255,203,5,.35);background:rgba(255,203,5,.06)}
.rk__buyh{margin:0 0 8px;font-size:15px}

.rk__perks{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--txt-dim)}
.rk__perks li{margin:4px 0}
.rk__perks b{color:var(--txt)}

/* What an amount buys: four steps, side by side on a wide screen. */
.rk__tiers{list-style:none;margin:10px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}
.rk__tiers li{display:flex;flex-direction:column;gap:2px;padding:9px 11px;
  border-radius:var(--r-sm);border:1px solid rgba(255,203,5,.22);
  background:rgba(255,203,5,.05)}
.rk__tiers b{font-size:15px;color:var(--yellow);font-variant-numeric:tabular-nums}
.rk__tiers span{font-size:12.5px;color:var(--txt-dim)}

.rk__ref{
  margin:12px 0;padding:10px 12px;
  border:1px dashed var(--line);border-radius:var(--r-sm);
  background:var(--ink);display:flex;flex-direction:column;gap:3px;
}
.rk__k{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-dim)}
.rk__refno{
  font-family:var(--mono);font-size:clamp(19px,4.5vw,25px);
  letter-spacing:.14em;color:var(--yellow);
}

/* The two things a supporter has to type on the Ko-fi page. Numbered
   rather than prose, because a missed message box is a donation that
   cannot be matched to an account. */
.rk__steps{margin:12px 0 0;padding-left:20px;font-size:13.5px;color:var(--txt)}
.rk__steps li{margin:6px 0}
.rk__steps li::marker{color:var(--yellow);font-weight:700}
.rk__steps .rk__ref{margin:6px 0 0}

.rk__go{align-self:flex-start;font-size:15px;padding:11px 20px;margin-top:2px}

.rk__pending{
  margin:10px 0 0;padding:9px 11px;font-size:13px;
  border-radius:var(--r-sm);border:1px solid rgba(63,217,138,.28);
  background:rgba(63,217,138,.08);color:var(--txt);
}

.rk__small{margin:11px 0 0;font-size:11.5px;color:var(--txt-dim);line-height:1.5;max-width:64ch}

.rk__msg{margin:0;font-size:13.5px;min-height:1.2em}
.rk__msg.is-good{color:var(--ok)}
.rk__msg.is-bad{color:var(--red-lt,#ff6b6b)}

@media (max-width:640px){
  .rk{grid-template-columns:auto 1fr;grid-template-areas:'ico body' 'note note';row-gap:8px}
  /* Narrower on a phone, but still a banner rather than a square. */
  .rk__ico{grid-area:ico;width:68px;height:55px}
  .rk__body{grid-area:body}
  .rk__left,.rk__have{grid-area:note}
  .rk__go{align-self:stretch;width:100%;text-align:center}
}

/* ── Rank tags in chat ───────────────────────────────────
   [DEV] and friends, in front of the name. */
.msg__tag{
  --rc:var(--txt-dim);flex-shrink:0;
  font:800 9px/1 var(--display);letter-spacing:.06em;
  padding:3px 5px;border-radius:5px;color:var(--rc);
  background:color-mix(in srgb,var(--rc) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--rc) 40%,transparent);
}
.msg__tag--developer{--rc:#ff4d6d}
.msg__tag--moderator{--rc:#57c7ff}
.msg__tag--donator{--rc:var(--yellow)}
.msg__tag--complete-dex{--rc:#d7e3f4}

/* ── Rank icons on the leaderboard ───────────────────────
   Small, in front of the name, and they fall back to the text tag
   the same way the cards do. */
/* The rank artwork is a banner - wider than it is tall - so the slot
   is a banner too. Squeezed into a square the lettering on it became
   unreadable, which is the whole thing the picture is for. */
.lbrank{display:inline-grid;place-items:center;width:30px;height:24px}
.lbrank__img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.lbrank__tag{display:none}
.lbrank.is-text{width:auto;padding:1px 4px;border-radius:4px;background:rgba(255,255,255,.07)}
.lbrank.is-text .lbrank__tag{
  display:block;font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.04em;color:var(--txt-dim);
}
.lbrank--developer.is-text .lbrank__tag{color:#ff4d6d}
.lbrank--moderator.is-text .lbrank__tag{color:#57c7ff}
.lbrank--donator.is-text .lbrank__tag{color:var(--yellow)}
.lbrank--complete-dex.is-text .lbrank__tag{color:#d7e3f4}

/* What is running right now, under the search counter. Hidden when
   nothing is on, so it takes no room in the ordinary case. */
.nowon{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:6px 0 0;
}
.nowon__bit{
  font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink-3);color:var(--txt-dim);
}
.nowon__bit.is-shiny{
  color:var(--yellow);border-color:rgba(255,205,60,.45);
  background:rgba(255,205,60,.10);
}
.nowon__bit.is-shadow{
  color:#c39bff;border-color:rgba(160,110,255,.45);
  background:rgba(160,110,255,.10);
}
.nowon__bit.is-contest{
  color:#7ee0a5;border-color:rgba(63,217,138,.45);
  background:rgba(63,217,138,.10);
}



/* ── The Berry Garden ──────────────────────────────────

   A level and stats on top, a row of tools, the beds beside the panel
   for the chosen bed, and a drawer underneath for Seeds, the Apricorn
   Workshop and the Berry Dex.

   The beds keep their 5x5 shape at every width - a garden that
   reflows into a column stops being a garden, because which field is
   beside which is the whole of the mutation system. They shrink
   instead. Plants are Platinum's berry-tree sprites: 16x32 pixel art,
   two frames stacked, swaying between them. */
.garden{--leaf:#77CC55;--leaf-dk:#3E7D2B;--water:#4FB3FF;--mut:#D685FF;
  display:flex;flex-direction:column;gap:0;border-radius:var(--r);overflow:hidden;
  background:var(--ink);border:1px solid var(--line)}

.garden__top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:12px 14px;
  background:linear-gradient(90deg,rgba(119,204,85,.16),transparent 60%),var(--ink-2);
  border-bottom:1px solid var(--line)}
.ghead__lvl{display:flex;align-items:center;gap:10px}
.ghead__badge{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font:900 18px/1 var(--display);color:#0f2a08;
  background:radial-gradient(circle at 40% 35%,#9ee27a,var(--leaf-dk));
  box-shadow:0 0 0 2px rgba(119,204,85,.5),0 0 16px rgba(119,204,85,.3)}
.ghead__lvl b{display:block;font:800 15px/1.2 var(--display)}
.ghead__lvl small{font-size:11px;color:var(--txt-dim)}
.garden__stat{display:flex;flex-direction:column;line-height:1.15;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-dim)}
.garden__stat b{font:800 18px/1.1 var(--display);letter-spacing:0;color:var(--txt);font-variant-numeric:tabular-nums}
.garden__stat.is-ready b{color:var(--yellow)}
.garden__sky{margin-left:auto;padding:4px 10px;border-radius:99px;font-size:11.5px;color:var(--txt-dim);
  background:var(--ink-3);border:1px solid var(--line)}

/* The tools: pick one, then tap beds. */
.gtools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--line)}
.gtool{display:flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:10px;
  background:var(--ink-3);border:1px solid var(--line);font-size:12.5px;font-weight:700;
  transition:border-color .15s,background .15s}
.gtool img,.gtool svg{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.gtool:hover{border-color:var(--txt-dim)}
.gtool.is-on{border-color:var(--leaf);
  background:linear-gradient(180deg,rgba(119,204,85,.22),rgba(119,204,85,.06));
  box-shadow:0 0 0 1px rgba(119,204,85,.3)}
.gtools__gap{flex:1}
.gtools .btn b{color:var(--yellow);margin-left:4px}
.gtools__hint{padding:6px 14px;font-size:12px;color:var(--txt-dim);
  background:rgba(119,204,85,.06);border-bottom:1px solid var(--line)}
.gtools__hint b{color:var(--leaf)}
.gtools__mulch{padding:8px 14px;border-bottom:1px solid var(--line)}

.garden__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start}

/* The yard the beds sit in: mown grass, darker at night. */
.gyard{padding:16px;min-width:0;
  background:radial-gradient(500px 260px at 30% 0%,rgba(255,255,220,.06),transparent 70%),
    repeating-linear-gradient(45deg,#24401c 0 8px,#284720 8px 16px)}
.garden.is-night .gyard{background:radial-gradient(500px 260px at 30% 0%,rgba(120,150,255,.08),transparent 70%),
    repeating-linear-gradient(45deg,#14241a 0 8px,#172a1e 8px 16px)}
.ggrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-width:560px;margin:0 auto}

.gtile{position:relative;aspect-ratio:1;border-radius:11px;padding:0;overflow:hidden;
  border:0;background:#5b4127;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 0 0 2px rgba(0,0,0,.25);transition:transform .12s}
.gtile:hover{transform:translateY(-2px)}
.gtile.is-on{box-shadow:0 0 0 3px var(--yellow),0 4px 0 rgba(0,0,0,.35)}
.gtile.is-busy{opacity:.6;pointer-events:none}
.gtile__soil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gtile__plant{position:absolute;left:50%;bottom:13%;width:38%;aspect-ratio:16/32;transform:translateX(-50%);
  background-size:100% 200%;background-repeat:no-repeat;image-rendering:pixelated;
  animation:gsway 1.6s steps(1) infinite;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.gtile__plant.is-dirt{width:36%;aspect-ratio:1;background-size:100% 100%;animation:none;bottom:24%}
.gtile__plant.is-apricorn{filter:hue-rotate(160deg) saturate(.7) drop-shadow(0 3px 2px rgba(0,0,0,.45))}
@keyframes gsway{0%{background-position:0 0}50%{background-position:0 100%}}
.gtile__fruit{position:absolute;width:26%;right:15%;bottom:20%;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.gtile__bar{position:absolute;left:9%;right:9%;bottom:6%;height:5px;border-radius:3px;background:rgba(0,0,0,.5);overflow:hidden}
.gtile__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf-dk),var(--leaf))}
.gtile__ready{position:absolute;top:6%;right:6%;padding:2px 7px;border-radius:99px;font:800 10px/1.4 var(--display);
  background:var(--yellow);color:#2a1d00;box-shadow:0 0 10px rgba(255,203,5,.7);
  animation:gready .8s ease-in-out infinite alternate}
@keyframes gready{to{transform:scale(1.1)}}
.gtile__flags{position:absolute;top:6%;left:6%;display:flex;gap:3px}
.gtile__flag{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;background:rgba(0,0,0,.55)}
.gtile__flag svg{width:13px;height:13px}
.gtile__mulch{position:absolute;right:6%;bottom:12%;width:22%;object-fit:contain;image-rendering:pixelated}
.gtile__empty{position:absolute;inset:auto 0 8% 0;text-align:center;font-size:10.5px;font-weight:700;
  color:rgba(255,255,255,.75);text-shadow:0 1px 2px #000}
/* The word is there for screen readers and the title; the picture says it on screen. */
.gtile__state{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gtile.is-locked{background:repeating-linear-gradient(90deg,#5b4127 0 6px,#6c4e30 6px 9px);
  display:grid;place-items:center;opacity:.85}
.gtile__lock{font:800 10.5px var(--display);color:#f0dcc0;background:rgba(0,0,0,.45);padding:3px 6px;border-radius:6px}
.gtile__lock:empty{display:none}
.gtile.is-withered .gtile__plant{filter:grayscale(1) brightness(.6)}
.gtile.has-hint::after{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;
  box-shadow:inset 0 0 16px rgba(214,133,255,.8);animation:gglow 2s ease-in-out infinite alternate}
@keyframes gglow{from{opacity:.4}to{opacity:1}}
.gtile__hint{position:absolute;z-index:4;top:5%;right:5%;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;font:800 11px/1 var(--display);color:#fff;background:var(--mut);cursor:help}
.gtile.is-ready .gtile__hint{top:auto;bottom:16%}
.gtile__hint:focus{outline:2px solid #fff;outline-offset:1px}
.gtile__tip{display:none;position:absolute;z-index:6;top:22px;right:-2px;width:170px;padding:7px 9px;
  border-radius:8px;background:var(--ink-2);border:1px solid var(--mut);font:600 11px/1.4 var(--sans);
  color:var(--txt);text-align:left;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.gtile__hint:hover .gtile__tip,.gtile__hint:focus .gtile__tip,.gtile__hint.is-open .gtile__tip{display:block}
.ggrid .gtile:nth-child(5n+1) .gtile__tip,.ggrid .gtile:nth-child(5n+2) .gtile__tip{right:auto;left:-2px}
.gtile:has(.gtile__hint:hover),.gtile:has(.gtile__hint:focus),.gtile:has(.gtile__hint.is-open){overflow:visible;z-index:5}
/* Water falling, and what a harvest brought in. */
.gtile__fx{position:absolute;inset:0;pointer-events:none}
.gtile__fx i{position:absolute;top:-10%;width:3px;height:9px;border-radius:2px;background:var(--water);
  animation:gdrop .7s ease-in forwards}
@keyframes gdrop{to{transform:translateY(130px);opacity:0}}
.gtile__float{position:absolute;left:50%;top:30%;transform:translateX(-50%);white-space:nowrap;
  font:800 13px var(--display);color:var(--yellow);text-shadow:0 2px 3px #000;animation:gfloat 1.2s ease-out forwards}
@keyframes gfloat{to{transform:translate(-50%,-40px);opacity:0}}

/* The panel for the chosen bed. */
.gpanel{padding:14px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line);
  background:var(--ink-2);min-height:100%}
.gpanel h4{margin:0;font:800 16px var(--display)}
.gpanel__note{margin:0;font-size:12px;line-height:1.5;color:var(--txt-dim)}
.gpanel__note b{color:var(--txt)}
.gpanel__head{display:flex;gap:12px;align-items:center}
.gpanel__plant{position:relative;flex:0 0 auto;width:52px;height:104px;background-size:100% 200%;
  background-repeat:no-repeat;image-rendering:pixelated;animation:gsway 1.6s steps(1) infinite}
.gpanel__plant.is-dirt{height:52px;background-size:100% 100%;animation:none}
.gpanel__plant.is-apricorn{filter:hue-rotate(160deg) saturate(.7)}
.gpanel__head b{display:block;font:800 17px/1.2 var(--display)}
.gpanel__stage{display:block;font-size:12px;color:var(--leaf);font-weight:700}
.gpanel__what{display:block;font-size:11.5px;color:var(--txt-dim);margin-top:2px}
.gtl{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.gtl div{text-align:center;font-size:9.5px;color:var(--txt-dim)}
.gtl i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-bottom:4px}
.gtl .is-done i{background:var(--leaf)}
.gtl .is-now i{background:linear-gradient(90deg,var(--leaf) 50%,rgba(255,255,255,.08) 50%)}
.gtl .is-now{color:var(--txt);font-weight:700}
.gmeter{display:grid;grid-template-columns:52px 1fr 40px;align-items:center;gap:8px;font-size:12px}
.gmeter__k{color:var(--txt-dim)}
.gmeter__v{text-align:right;font-variant-numeric:tabular-nums}
.gbar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.gbar i{display:block;height:100%;border-radius:4px}
.gbar--growth i{background:linear-gradient(90deg,var(--leaf-dk),var(--leaf))}
.gbar--water i{background:linear-gradient(90deg,#2a6fb0,var(--water))}
.gfacts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12px}
.gfacts li{color:var(--txt-dim)}
.gfacts .is-good{color:var(--leaf)}
.gfacts .is-bad{color:#e0a35c}
.gfacts .is-odd{color:var(--mut)}
.gacts{display:flex;flex-wrap:wrap;gap:6px}
.gacts .btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.gacts .btn img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}

.gmulch{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.gmulch__b{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;text-align:left;
  background:var(--ink-3);border:1px solid var(--line);font-size:11.5px}
.gmulch__b img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.gmulch__b b{display:block;font-size:12px}
.gmulch__b small{display:block;color:var(--txt-dim);font-size:10.5px;line-height:1.3}
.gmulch__b:hover{border-color:var(--leaf)}
.gmulch__b.is-on{border-color:var(--leaf);background:rgba(119,204,85,.12)}
.gpanel .gmulch{grid-template-columns:1fr}

/* The drawer. */
.gdrawer{border-top:1px solid var(--line)}
.gdrawer__tabs{display:flex;gap:2px;padding:8px 12px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.gdrawer__tab{position:relative;display:flex;align-items:center;gap:6px;padding:8px 12px;flex:0 0 auto;
  border-radius:10px 10px 0 0;font-size:12.5px;font-weight:700;color:var(--txt-dim)}
.gdrawer__tab img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}
.gdrawer__tab.is-on{color:var(--txt);background:linear-gradient(180deg,rgba(119,204,85,.15),transparent)}
.gdrawer__tab.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:var(--leaf)}
.gdrawer__body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px}
.gfilters{display:flex;flex-wrap:wrap;gap:6px}
.gfilters button{padding:5px 11px;border-radius:99px;font-size:12px;font-weight:600;
  background:var(--ink-3);border:1px solid var(--line);color:var(--txt-dim)}
.gfilters button.is-on{color:var(--txt);border-color:var(--leaf);background:rgba(119,204,85,.14)}
.gseeds{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.gseed{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;
  border-radius:12px;background:var(--ink-3);border:1px solid var(--line);text-align:center;transition:border-color .15s,transform .1s}
.gseed:hover{border-color:var(--leaf);transform:translateY(-2px)}
.gseed.is-pick{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.gseed img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.gseed__n{font-size:12px}
.gseed__q{position:absolute;top:5px;right:7px;font:800 11px var(--display);color:var(--txt-dim)}
.gseed__t{font-size:10.5px;color:var(--txt-dim)}

.gwork{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.gwork__c{display:flex;flex-direction:column;gap:7px;padding:11px;border-radius:13px;background:var(--ink-3);border:1px solid var(--line)}
.gwork__h{display:flex;align-items:center;gap:8px}
.gwork__h img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.gwork__h b{display:block;font:800 14px var(--display)}
.gwork__h small{display:block;font-size:11px;color:var(--txt-dim)}
.gwork__n{margin-left:auto;font:800 16px var(--display)}
.gwork__b{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:6px 8px;border-radius:10px;background:var(--ink-2);border:1px solid var(--line)}
.gwork__b img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.gwork__b b{display:block;font-size:12px}
.gwork__b small{display:block;font-size:10.5px;line-height:1.3;color:var(--txt-dim)}

/* ── The Berry Dex ─────────────────────────────────── */
.gdexlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.gdex{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border-radius:12px;
  text-align:center;background:var(--ink-3);border:1px solid var(--line)}
.gdex__ico{width:38px;height:38px;object-fit:contain;image-rendering:pixelated}
.gdex b{font-size:12.5px}
.gdex__stars{color:var(--yellow);font-size:11px;letter-spacing:1px}
.gdex__note{font-size:10.5px;color:var(--txt-dim)}
.gdex__recipe{font-size:10.5px;color:var(--mut)}
.gdex__recipe.is-hidden{opacity:.7}
.gdex__ev{font-size:10.5px;color:var(--leaf)}
.gdex--mut{border-color:rgba(214,133,255,.45);background:linear-gradient(180deg,rgba(214,133,255,.12),var(--ink-3))}
.gdex--unknown .gdex__ico{filter:brightness(0) opacity(.45)}

/* ── Narrow ────────────────────────────────────────── */

/* The panel goes under the beds rather than beside them, and the beds
   keep all five columns: it is a map, and a map that reflows is a
   different map. */
@media (max-width:760px){
  .garden__body{grid-template-columns:1fr}
  .gpanel{border-left:0;border-top:1px solid var(--line)}
  .gyard{padding:10px}
  .ggrid{gap:5px}
  .gtool span{display:none}
  .gtool{padding:6px 8px}
  .garden__sky{display:none}
}
@media (max-width:420px){
  .ggrid{gap:4px}
  .gtile__ready{font-size:8px;padding:1px 4px}
  .gtile__flags{transform:scale(.8);transform-origin:top left}
}
@media (prefers-reduced-motion:reduce){
  .gtile__plant,.gpanel__plant,.gtile__ready,.gtile.has-hint::after,.gtile__fx i,.gtile__float{animation:none}
}
/* == The Arena ==========================================
   Players fighting players. Built from the same pieces as the rest of
   the game - the same cards, buttons and type colours - because a
   screen that looks borrowed from another game reads as bolted on. */

.pvp{display:flex;flex-direction:column;gap:14px}

.pvp__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.pvp__head h3{margin:0;font-size:1.05rem}
.pvp__season{margin:2px 0 0;font-size:.72rem;color:var(--txt-dim)}
.pvp__coins{display:flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:var(--r-sm);background:var(--ink-3);
  border:1px solid var(--line);font-size:.82rem}
.pvp__coins img{width:18px;height:18px;image-rendering:pixelated}

.pvp__cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pvpcard{padding:12px;border-radius:var(--r-sm);background:var(--ink-3);
  border:1px solid var(--line);display:flex;flex-direction:column;
  gap:6px;align-items:flex-start}
.pvpcard h4{margin:0;font-size:.82rem}
.pvpcard__rating{font-size:1.5rem;font-weight:800;line-height:1}
.pvpcard__wl{display:flex;gap:10px;font-size:.72rem;color:var(--txt-dim)}
.pvpcard__streak{font-size:.7rem;color:#FFCC33}
.pvpcard__go{display:flex;gap:6px;margin-top:4px;width:100%}
.pvpcard__go .btn{flex:1;font-size:.74rem;padding:6px 8px}

/* A division is a word as well as a colour, so it reads without
   depending on telling gold from silver. */
.pvpdiv{display:inline-block;padding:2px 8px;border-radius:99px;
  font-size:.66rem;font-weight:800;letter-spacing:.03em;
  border:1px solid currentColor}
.pvpdiv--bronze{color:#C97B3C}
.pvpdiv--silver{color:#AFBAC8}
.pvpdiv--gold{color:#FFCC33}
.pvpdiv--platinum{color:#7FE7DC}
.pvpdiv--diamond{color:#8CC8FF}
.pvpdiv--master{color:#C88CFF}
.pvpdiv--grandmaster{color:#FF6B6B}
.pvpdiv--placing{color:var(--txt-dim)}

.pvp__team h4{margin:0 0 4px;font-size:.82rem}
.pvp__hint{margin:0 0 8px;font-size:.72rem;color:var(--txt-dim)}
/* The picker holds a search bar as well as the Pokemon now, so the
   grid moved inside to .pvpmons and this is a plain block. The
   scroll went with it: the search bar has to stay put while the list
   under it moves. */
.pvpteam{display:block}
.pvpmons{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:6px;max-height:32vh;overflow-y:auto}
.pvpmon{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:6px 4px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line);cursor:pointer;transition:.14s;
  font:inherit;color:inherit}
.pvpmon:hover{border-color:var(--pri)}
.pvpmon.is-on{border-color:var(--pri);background:rgba(91,140,255,.14)}
.pvpmon img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.pvpmon__name{font-size:.66rem;font-weight:600;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pvpmon__lvl{font-size:.62rem;color:var(--txt-dim)}
.pvpmon__no{position:absolute;top:2px;right:3px;width:16px;height:16px;
  line-height:15px;text-align:center;border-radius:50%;background:var(--pri);
  color:#fff;font-size:.62rem;font-weight:800}

/* -- Searching -- */
.pvpsearch{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 12px;text-align:center}
.pvpsearch h3{margin:0;font-size:1rem}
.pvpsearch__what{margin:0;font-size:.74rem;color:var(--txt-dim);
  text-transform:capitalize}
.pvpsearch__spin{width:38px;height:38px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--pri);
  animation:pvpspin 900ms linear infinite}
@keyframes pvpspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pvpsearch__spin{animation:none}}
.pvpsearch__facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;
  margin:6px 0 4px;font-size:.74rem}
.pvpsearch__facts dt{color:var(--txt-dim);font-size:.68rem}
.pvpsearch__facts dd{margin:0;font-weight:700}

/* -- The battle -- */
.pvpbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 10px;border-radius:var(--r-sm);background:var(--ink-3);
  border:1px solid var(--line);font-size:.78rem}
/* The timer says a number, not only a colour - a countdown nobody can
   read is a countdown that runs out by surprise. */
.pvpbar__timer{font-variant-numeric:tabular-nums;font-weight:800}
.pvpbar__timer.is-urgent{color:#FF4422}

.pvpgone{margin:0;padding:6px 10px;border-radius:var(--r-sm);
  background:rgba(255,68,34,.12);border:1px solid rgba(255,68,34,.4);
  font-size:.74rem}

.pvpfield{display:flex;flex-direction:column;gap:10px;padding:12px;
  border-radius:var(--r-sm);background:var(--ink-3);
  border:1px solid var(--line)}
.pvpfield__foes,.pvpfield__mine{display:flex;gap:10px;flex-wrap:wrap;
  align-items:center}
.pvpfield__mine{justify-content:flex-end}
.pvpfield__left{font-size:.68rem;color:var(--txt-dim);margin-left:auto}

/* A card is as wide as it needs to be, not as wide as the panel.
   With one Pokemon out per side, flex:1 stretched a single card
   across the whole screen and the health bar with it - a 900px bar
   for 106 HP. Capped, so a solo battle and a double battle draw the
   same size of card. */
.pvpfoe,.pvpmine{display:flex;align-items:center;gap:8px;
  flex:0 1 300px;max-width:340px;min-width:0}
.pvpmine{flex-direction:row-reverse;text-align:right}
.pvpfoe.is-down,.pvpmine.is-down{opacity:.4}
.pvpfoe__art,.pvpmine__art{width:56px;height:56px;object-fit:contain;
  image-rendering:pixelated;flex-shrink:0}
.pvpfoe__bar,.pvpmine__bar{display:flex;flex-direction:column;gap:3px;
  min-width:0;flex:1}
.pvpfoe__bar b,.pvpmine__bar b{font-size:.78rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pvpfoe__lvl,.pvpmine__lvl,.pvpfoe__pct,.pvpmine__hp{font-size:.66rem;
  color:var(--txt-dim)}

.pvphp{display:block;height:6px;border-radius:3px;overflow:hidden;
  background:rgba(0,0,0,.5)}
.pvphp i{display:block;height:100%;transition:width .35s}
.pvphp--ok i{background:#77CC55}
.pvphp--low i{background:#FFCC33}
.pvphp--crit i{background:#FF4422}

/* Status is a word, not a tint. */
.pvpstatus{align-self:flex-start;padding:1px 6px;border-radius:3px;
  font-size:.6rem;font-weight:800;letter-spacing:.04em;
  border:1px solid currentColor}
.pvpstatus--brn{color:#FF4422}
.pvpstatus--psn,.pvpstatus--tox{color:#B47BD8}
.pvpstatus--par{color:#FFCC33}
.pvpstatus--slp{color:#98A0B5}
.pvpstatus--frz{color:#8CC8FF}

.pvplog{height:96px;overflow-y:auto;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line);font-size:.74rem}
.pvplog p{margin:0 0 3px}

.pvpacts{display:flex;flex-direction:column;gap:8px}
.pvpmoves{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pvpmove{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-radius:var(--r-sm);background:var(--ink-3);
  border:1px solid var(--line);cursor:pointer;font:inherit;color:inherit;
  transition:.14s;text-align:left}
.pvpmove:hover:not(:disabled){border-color:var(--pri);background:var(--ink)}
.pvpmove.is-dead,.pvpmove:disabled{opacity:.4;cursor:not-allowed}
.pvpmove__n{font-size:.78rem;font-weight:600}
.pvpmove__pp{font-size:.66rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.pvpacts__row{display:flex;gap:8px}
.pvpacts__row .btn{flex:1}
.pvpwait{margin:0;padding:12px;text-align:center;font-size:.8rem;
  color:var(--txt-dim)}

/* -- The result -- */
.pvpend{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:24px 14px;text-align:center;border-radius:var(--r-sm);
  border:1px solid var(--line)}
.pvpend.is-win{background:rgba(119,204,85,.10);border-color:rgba(119,204,85,.5)}
.pvpend.is-loss{background:rgba(255,68,34,.08);border-color:rgba(255,68,34,.4)}
.pvpend h3{margin:0;font-size:1.5rem;letter-spacing:.02em}
.pvpend__who{margin:0;font-size:.78rem;color:var(--txt-dim)}
.pvpend__rating{display:flex;align-items:baseline;gap:8px;font-size:1.1rem;
  margin-top:6px;font-variant-numeric:tabular-nums}
.pvpend__rating b{font-size:1.5rem}
.pvpend__arrow{color:var(--txt-dim)}
.pvpend__delta{font-size:.86rem;font-weight:800}
.pvpend__delta.is-up{color:#77CC55}
.pvpend__delta.is-down{color:#FF4422}
.pvpend__unranked,.pvpend__coins,.pvpend__streak{margin:0;font-size:.78rem}
.pvpend__coins{color:#FFCC33}
.pvpend__streak{color:#77CC55}
.pvpend__btns{margin-top:10px}

/* -- Small screens --
   A battle has to stay usable on a phone: one column, and nothing
   that pushes the page sideways. */
@media (max-width:620px){
  .pvp__cards{grid-template-columns:1fr}
  .pvpsearch__facts{grid-template-columns:1fr}
  .pvpfield__mine{justify-content:flex-start}
  .pvpmine{flex-direction:row;text-align:left}
  .pvpfoe,.pvpmine{flex:1 1 100%}
  .pvpmoves{grid-template-columns:1fr}
  .pvpteam{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
}

/* == The Arena battle, full screen =======================
   Built on the wild-battle classes so the two read as one game: the
   same cards, the same health bars, the same move plate. What is new
   is only what PvP adds - a turn clock, a waiting state, and the
   other trainer having a name. */

.pvpstage{position:fixed;inset:0;z-index:210}
.pvpstage[hidden]{display:none}

.pvpbattle{position:absolute;inset:0;display:flex;flex-direction:column}

/* The backdrop. Its own rule so the Arena can be given a picture of
   its own without touching the wild one - drop a file in and this is
   the only line that changes. */
.pvpbattle__bg{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(120,90,220,.30),transparent 60%),
    linear-gradient(178deg,#1A1430 0%,#221A42 40%,#2C2352 72%,#3A2C66 100%);
}
.pvpbattle__bg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 76%,rgba(0,0,0,.34),transparent 58%);
}

.pvpbattle__field{position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 16px}

/* Who is fighting whom, along the top. */
.pvpvs{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:3;
  padding:5px 14px;border-radius:99px;
  background:rgba(12,14,22,.72);border:1px solid var(--line);
  font-size:.74rem;font-weight:700;max-width:92vw}
.pvpvs__x{color:var(--txt-dim);font-size:.66rem}
.pvpvs__them{max-width:36vw;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* The clock. A number as well as a colour. */
.pvpclock{position:absolute;top:10px;right:14px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding:5px 11px;border-radius:var(--r-sm);
  background:rgba(12,14,22,.72);border:1px solid var(--line)}
.pvpclock__turn{font-size:.62rem;color:var(--txt-dim)}
.pvpclock__s{font-size:.94rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.pvpclock.is-urgent{border-color:#FF4422}
.pvpclock.is-urgent .pvpclock__s{color:#FF4422}

.pvpgone{position:absolute;top:52px;left:50%;transform:translateX(-50%);
  z-index:3;padding:5px 12px;border-radius:var(--r-sm);
  background:rgba(255,68,34,.16);border:1px solid rgba(255,68,34,.55);
  font-size:.72rem;white-space:nowrap}

/* The two halves of the field. */
.pvpfoes{position:relative;display:flex;gap:16px;justify-content:flex-end;
  align-items:flex-start;padding-top:44px;flex-wrap:wrap}
.pvpmines{position:relative;display:flex;gap:16px;justify-content:flex-start;
  align-items:flex-end;flex-wrap:wrap}
.pvpleft{position:absolute;top:46px;left:0;font-size:.66rem;
  color:var(--txt-dim);background:rgba(12,14,22,.6);
  padding:2px 8px;border-radius:99px}

/* A side is the card and the sprite together, as in a wild fight.
   The wild screen positions .bside and .bmon absolutely against the
   field - it draws two fixed places, one per combatant. This screen
   lays them out in a row instead, because a double battle has four,
   so both have to be put back into the flow or the sprites and the
   move plate are positioned off the visible area entirely. */
.pvpbattle .bside{position:relative!important;inset:auto!important;
  display:flex;align-items:center;gap:10px;
  transform:none!important;width:auto;height:auto}
.pvpbattle .bmon{position:relative!important;inset:auto!important;
  transform:none!important;flex-shrink:0}
.pvpbattle .bside--foe{flex-direction:row}
.pvpbattle .bside--me{flex-direction:row}
.pvpbattle .bcard{min-width:168px;max-width:230px;
  padding:7px 10px;border-radius:var(--r-sm);
  background:rgba(12,14,22,.80);border:1px solid var(--line)}
/* Visible from the first draw.
   The wild screen fades a Pokemon in with a send-out animation and
   starts it at opacity 0; without that animation running here every
   sprite stayed invisible while its card sat above an empty space. */
.pvpbattle .bmon img{width:clamp(88px,15vh,150px)!important;
  height:clamp(88px,15vh,150px)!important;object-fit:contain;
  image-rendering:pixelated;opacity:1!important;
  animation:none!important;transform:none!important;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.55))}
.pvpbattle .bmon.is-down img{opacity:.25;filter:grayscale(1)}

.pvpbattle .hpbar i.is-ok{background:#77CC55}
.pvpbattle .hpbar i.is-low{background:#FFCC33}
.pvpbattle .hpbar i.is-crit{background:#FF4422}

/* The commands, on the plate along the bottom. */
/* The plate along the bottom. The log sits inside it rather than
   floating over the field, so the move buttons are never covered by
   a battle log that grew a line. */
.pvpbattle__ui{position:relative;z-index:4;flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;padding:10px 14px 14px;
  max-height:52vh;overflow-y:auto;
  background:linear-gradient(180deg,transparent,rgba(8,10,16,.92) 22%)}
.pvpbattle .blog{height:82px;overflow-y:auto;padding:8px 11px;
  border-radius:var(--r-sm);background:rgba(10,12,18,.86);
  border:1px solid var(--line);font-size:.76rem}
.pvpbattle .blog p{margin:0 0 3px}

.pvpplate{display:flex;flex-direction:column;gap:4px}
.pvpplate__who{font-size:.66rem;color:var(--txt-dim);padding-left:2px}
.pvpplate.is-done{opacity:.5}
.pvpplate__moves{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* Which of the opposing pair a move is aimed at.

   Doubles sent every attack at the opponent's left-hand Pokemon with
   no way to say otherwise. The strip sits above the moves rather than
   behind a dialog, so the choice is made and seen in one place - and
   it only appears when there are two opponents left to choose
   between. */
.pvpaim{display:flex;align-items:center;gap:4px;padding-left:2px;
  flex-wrap:wrap}
.pvpaim__lbl{font-size:.6rem;color:var(--txt-dim);text-transform:uppercase;
  letter-spacing:.04em}
.pvpaim__b{font-size:.66rem;line-height:1;padding:4px 7px;border-radius:6px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:var(--txt-dim);cursor:pointer;transition:background .12s,color .12s}
.pvpaim__b:hover:not(:disabled){background:rgba(255,255,255,.12)}
.pvpaim__b.is-on{background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:600}
.pvpaim__b:disabled{opacity:.45;cursor:default}

/* The move buttons.
   .bbtn is drawn for the wild screen, which puts its commands on a
   pale plate - dark text on transparent. On this darker stage that
   was near-invisible, so the Arena gives them their own surface
   rather than borrowing one that assumes a different background. */
.pvpbattle .bmove{display:flex;align-items:center;justify-content:space-between;
  gap:8px;text-align:left;padding:11px 13px;
  background:rgba(24,28,38,.94);color:var(--txt);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.pvpbattle .bmove:hover:not(:disabled){background:rgba(38,44,60,.98);
  border-color:var(--pri);color:#fff}
.pvpbattle .pvpextra .bbtn{justify-content:center;
  background:rgba(24,28,38,.94);color:var(--txt);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.84rem;padding:10px}
.pvpbattle .pvpextra .bbtn:hover{border-color:var(--pri);color:#fff}
.pvpbattle .pvpextra .bbtn--run:hover{border-color:#FF4422;color:#FF6B5A}
.bmove__n{font-size:.8rem;font-weight:700}
.bmove__pp{font-size:.66rem;opacity:.75;font-variant-numeric:tabular-nums}
.pvpbattle .bmove:disabled{opacity:.38;cursor:not-allowed}

.pvpwaiting{display:flex;align-items:center;justify-content:center;
  padding:16px;border-radius:var(--r-sm);
  background:rgba(10,12,18,.7);border:1px solid var(--line)}
.pvpwaiting__txt{font-size:.82rem;color:var(--txt-dim)}

.pvpextra{display:flex;gap:8px}
.pvpextra .bbtn{flex:1}

/* -- On a phone --
   One column, smaller sprites, and the field allowed to scroll rather
   than pushing the plate off the bottom. */
@media (max-width:620px){
  .pvpbattle__field{padding:10px;overflow-y:auto}
  .pvpfoes,.pvpmines{gap:8px}
  .pvpbattle .bmon img{width:64px;height:64px}
  .pvpbattle .bcard{min-width:140px;font-size:.72rem}
  .pvpplate__moves{grid-template-columns:1fr 1fr}
  .pvpvs{font-size:.68rem;padding:4px 10px}
  .pvpbattle .blog{height:64px}
}

/* -- The ladder and the history -- */
.pvptabs{display:flex;gap:4px;border-bottom:1px solid var(--line);
  margin-bottom:2px}
.pvptab{padding:8px 14px;border:0;border-bottom:2px solid transparent;
  background:none;color:var(--txt-dim);font:inherit;font-size:.8rem;
  font-weight:700;cursor:pointer;transition:.14s}
.pvptab:hover{color:var(--txt)}
.pvptab.is-on{color:var(--txt);border-bottom-color:var(--pri)}

.pvpfilters{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pvpfilters__gap{flex:1;min-width:8px}
.pvpchip{padding:5px 11px;border-radius:99px;border:1px solid var(--line);
  background:var(--ink-3);color:var(--txt-dim);font:inherit;font-size:.72rem;
  font-weight:600;cursor:pointer;transition:.14s}
.pvpchip:hover{color:var(--txt);border-color:var(--pri)}
.pvpchip.is-on{background:rgba(91,140,255,.16);border-color:var(--pri);
  color:var(--txt)}

.pvpyou{margin:0;padding:8px 11px;border-radius:var(--r-sm);
  background:rgba(91,140,255,.10);border:1px solid rgba(91,140,255,.35);
  font-size:.78rem}
.pvpyou--none{background:var(--ink-3);border-color:var(--line);
  color:var(--txt-dim)}

/* The table scrolls inside its own box rather than pushing the panel
   sideways on a narrow screen. */
.pvpboard{width:100%;border-collapse:collapse;font-size:.78rem;
  display:block;overflow-x:auto;white-space:nowrap}
.pvpboard thead th{text-align:left;padding:7px 9px;font-size:.68rem;
  color:var(--txt-dim);font-weight:700;border-bottom:1px solid var(--line)}
.pvpboard td{padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.05)}
.pvpboard__rank{color:var(--txt-dim);font-variant-numeric:tabular-nums}
.pvpboard__n{font-variant-numeric:tabular-nums;text-align:right}
.pvpboard tr.is-you{background:rgba(91,140,255,.12)}
.pvpboard tr.is-you td{font-weight:700}

.pvphist{display:flex;flex-direction:column;gap:5px}
.pvphist__row{display:grid;
  /* Six columns since every row got a Watch button - the replay was
     always being recorded, it just had nothing to open it. */
  grid-template-columns:56px 1fr auto 52px 64px auto;
  align-items:center;gap:8px;padding:8px 11px;
  border-radius:var(--r-sm);background:var(--ink-3);
  border:1px solid var(--line);font-size:.76rem}
.pvphist__row.is-win{border-left:3px solid #77CC55}
.pvphist__row.is-loss{border-left:3px solid #FF4422}
.pvphist__res{font-weight:800;font-size:.72rem}
.is-win .pvphist__res{color:#77CC55}
.is-loss .pvphist__res{color:#FF4422}
.pvphist__vs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvphist__mode{font-size:.68rem;color:var(--txt-dim);
  text-transform:capitalize}
.pvphist__rat{text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums}
.pvphist__rat.is-up{color:#77CC55}
.pvphist__rat.is-down{color:#FF4422}
.pvphist__rat--none{color:var(--txt-dim);font-weight:400}
.pvphist__when{text-align:right;font-size:.68rem;color:var(--txt-dim)}

.pvppager{display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:.74rem;color:var(--txt-dim)}
.pvppager .btn{padding:5px 12px;font-size:.74rem}

@media (max-width:620px){
  .pvphist__row{grid-template-columns:50px 1fr 46px;
    grid-template-areas:'res vs rat' 'mode mode when'}
  .pvphist__res{grid-area:res}
  .pvphist__vs{grid-area:vs}
  .pvphist__rat{grid-area:rat}
  .pvphist__mode{grid-area:mode}
  .pvphist__when{grid-area:when}
}

/* ── Finding a Pokemon to bring ──────────────────────────
   The search bar and the filters above the picker. The bar is always
   there; the rest opens when asked for, because six controls above a
   list of forty sprites is the list pushed off the screen. */
.pvpfind{margin:0 0 8px}
.pvpfind__bar{display:flex;gap:6px;align-items:center}
.pvpfind__q{flex:1;min-width:0;padding:7px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink);color:inherit;
  font:inherit;font-size:.76rem}
.pvpfind__q:focus{outline:none;border-color:var(--pri)}
.pvpfind__more{position:relative;white-space:nowrap;font-size:.72rem;
  padding:7px 12px}
.pvpfind__more.is-on{border-color:var(--pri);color:var(--pri)}
/* A dot on the button when something is filtering, so a list that
   looks short is never a mystery. */
.pvpfind__dot{position:absolute;top:4px;right:4px;width:6px;height:6px;
  border-radius:50%;background:var(--pri)}
.pvpfind__grid{display:grid;gap:8px;margin-top:8px;padding:10px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ink);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.pvpfind__flags{grid-column:1/-1}
.pvpfind__n{margin:8px 0 4px;font-size:.68rem;color:var(--txt-dim)}
.pvpfind__more-n{margin:6px 0 0;font-size:.66rem;color:var(--txt-dim);
  text-align:center}

/* ── Guild war ───────────────────────────────────────────
   Two guilds, one number each, and what this player may do about it. */
.pvpwar__score{display:flex;align-items:center;justify-content:center;
  gap:14px;margin:10px 0;padding:12px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line)}
.pvpwar__side{display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:0;flex:1}
.pvpwar__name{font-size:.72rem;font-weight:700;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pvpwar__side b{font-size:1.6rem;line-height:1;color:var(--pri)}
.pvpwar__vs{font-size:.68rem;color:var(--txt-dim);text-transform:uppercase;
  letter-spacing:.08em}
.pvpwar__phase{margin:0 0 10px;font-size:.72rem;color:var(--txt-dim);
  text-align:center}
.pvpwar__you{margin:0 0 8px;font-size:.74rem}
.pvpwar__h{margin:14px 0 6px;font-size:.78rem}

/* ── The shop ────────────────────────────────────────────
   Cosmetics only, so the card says what it is and what it costs and
   nothing about power. */
.pvpshop{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pvpshop__it{display:flex;flex-direction:column;gap:4px;padding:10px;
  border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line)}
.pvpshop__it.is-owned{border-color:var(--ok,#4ADE80)}
.pvpshop__it.is-locked{opacity:.55}
.pvpshop__n{font-size:.76rem;font-weight:700}
.pvpshop__t{font-size:.68rem;color:var(--txt-dim);flex:1}
.pvpshop__have{font-size:.68rem;font-weight:700;color:var(--ok,#4ADE80)}
.pvpshop__need{font-size:.66rem;color:var(--txt-dim)}
.pvp__coins{display:flex;align-items:center;gap:5px;font-size:.86rem;
  font-weight:800}
.pvp__coins img{width:20px;height:20px;object-fit:contain;
  image-rendering:pixelated}

/* ── Quests ──────────────────────────────────────────────
   A bar rather than a number: how far along is the thing being asked. */
.pvpquests{display:grid;gap:8px}
.pvpquest{padding:10px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line)}
.pvpquest.is-done{border-color:var(--pri)}
.pvpquest.is-claimed{opacity:.6}
.pvpquest__top{display:flex;justify-content:space-between;gap:8px;
  align-items:baseline}
.pvpquest__t{font-size:.74rem;font-weight:600}
.pvpquest__n{font-size:.68rem;color:var(--txt-dim);white-space:nowrap}
.pvpquest__bar{display:block;height:6px;margin:7px 0;border-radius:3px;
  background:var(--line);overflow:hidden}
.pvpquest__bar i{display:block;height:100%;background:var(--pri);
  border-radius:3px;transition:width .3s}
.pvpquest__foot{display:flex;justify-content:space-between;
  align-items:center;gap:8px}
.pvpquest__c{font-size:.68rem;color:var(--txt-dim)}

/* A button that reads as a link. Used where the sentence itself is
   the action - "Nothing matches that. Clear the filters." - and a
   full button would weigh more than the words around it. */
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--pri);
  text-decoration:underline;cursor:pointer}
.lnk:hover{opacity:.8}

/* ── A replay ────────────────────────────────────────────
   Every turn was written down as it happened; this reads it back.
   A column of lines rather than a second battle screen: the fight
   was decided when it was fought, and a second opinion drawn here
   is how the two drift apart. */
.pvprep{max-height:46vh;overflow-y:auto;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ink);margin:10px 0}
.pvprep__l{margin:0 0 3px;font-size:.74rem;line-height:1.45}
/* The turn headings, so a long fight can be read in blocks. */
.pvprep__l.is-turn{margin:10px 0 5px;font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--pri)}
.pvprep__l.is-turn:first-child{margin-top:0}
.pvprep__l.is-move{font-weight:600}
.pvprep__l.is-faint{color:var(--red-lt,#ff8a8a);font-weight:600}
.pvprep__l.is-note{color:var(--txt-dim);font-style:italic}
/* What the battle itself said, indented under the move it belongs
   to so the cause and its consequences read as one thing. */
.pvprep__l.is-said{padding-left:12px;color:var(--txt-dim)}
.pvprep__bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pvprep__n{margin-left:auto;font-size:.7rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.pvphist__go{margin-left:8px}

/* ── Watching somebody else's battle ─────────────────────
   The same fight from the outside: what is on the field and how much
   health it has, for both sides, and nothing a player would not be
   allowed to know about their opponent. */
.pvpwatch__row{display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:8px;padding:8px 11px;border-radius:var(--r-sm);
  background:var(--ink-3);border:1px solid var(--line);font-size:.76rem}
.pvpwatch__who{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.pvpwatch__field{display:flex;align-items:flex-start;justify-content:center;
  gap:14px;margin:10px 0;padding:12px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line)}
.pvpwatch__side{flex:1;min-width:0;display:flex;flex-direction:column;
  gap:5px}
.pvpwatch__side.is-b{text-align:right}
.pvpwatch__name{font-size:.76rem;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pvpwatch__left{font-size:.66rem;color:var(--txt-dim)}
.pvpwatch__mon{display:flex;flex-direction:column;gap:3px;padding:6px;
  border-radius:var(--r-sm);background:var(--ink-3)}
/* A fainted Pokemon is still shown - it is part of what happened -
   but plainly out of the fight. */
.pvpwatch__mon.is-out{opacity:.45}
.pvpwatch__mon img{width:48px;height:48px;object-fit:contain;
  image-rendering:pixelated;align-self:center}
.pvpwatch__mn{font-size:.68rem;font-weight:600;text-align:center}
.pvpwatch__mn small{color:var(--txt-dim);font-weight:400}
.pvpwatch__st{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-dim);text-align:center}
.pvpwatch__cond{margin:0 0 8px;font-size:.7rem;color:var(--txt-dim);
  text-align:center}
.pvpwatch__over{margin:0 0 8px;font-size:.74rem;font-weight:700;
  text-align:center;color:var(--pri)}

/* ── The tier ────────────────────────────────────────────
   What may be brought to a fight. Every tier bans Legendary and
   Mythical Pokemon; the rest is a base stat ceiling, so a lower tier
   is a smaller and more interesting roster rather than a worse one. */
.pvptier{margin:0 0 10px}
.pvptier__row{display:flex;gap:5px;flex-wrap:wrap}
.pvptier__b{flex:1;min-width:78px;padding:7px 8px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink);color:inherit;
  font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;
  transition:.14s}
.pvptier__b:hover{border-color:var(--pri)}
.pvptier__b.is-on{border-color:var(--pri);background:rgba(91,140,255,.14);
  color:var(--pri)}
.pvptier__t{margin:6px 0 0;font-size:.68rem;color:var(--txt-dim)}

/* ── Tournaments ─────────────────────────────────────────
   A bracket with an end. The rounds are drawn as columns so the
   shape of the draw is visible rather than described. */
.pvptour{padding:10px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line)}
.pvptour.is-over{opacity:.62}
.pvptour__top{display:flex;justify-content:space-between;gap:8px;
  align-items:baseline}
.pvptour__n{font-size:.78rem;font-weight:700}
.pvptour__ph{font-size:.66rem;color:var(--txt-dim);white-space:nowrap}
.pvptour__meta{margin:4px 0 8px;font-size:.68rem;color:var(--txt-dim)}
.pvptour__go{display:flex;gap:8px;align-items:center;
  justify-content:flex-end}

.pvpbracket{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
  margin-top:10px}
.pvpbracket__r{flex:0 0 auto;min-width:132px}
.pvpbracket__m{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;
  padding:6px 8px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line)}
/* Your own line in the draw, so it can be found in a bracket of
   sixty-four without reading every name. */
.pvpbracket__m.is-yours{border-color:var(--pri)}
.pvpbracket__p{font-size:.7rem;color:var(--txt-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pvpbracket__p.is-won{color:inherit;font-weight:700}
.pvpbracket__s{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-dim)}

/* ============================================================
   The Arena, stadium at night
   Floodlit hero with the trainer card, ticket cards for the two
   formats, a radar while searching, a VS screen before a fight, a
   result that counts, a podium, match cards and a replay on a field.
   Every animation is transform and opacity, and stands still under
   reduced motion.
   ============================================================ */
.ar{--ar-gold:#F2C94C;display:grid;gap:14px;container:ar/inline-size}
.ar-eyebrow{margin:0;font:600 .68rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.ar-emb{display:inline-grid;place-items:center;flex:none}
.ar-emb svg{display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
/* The game's own svg rule draws every icon as a stroked outline at full
   width; these are filled drawings at their own size. */
.ar-emb svg,.ar-crown,.ar-flame svg,.bh-tl__ic svg{width:auto;height:auto;stroke:none;fill:none}
.ar-initial{display:grid;place-items:center;width:100%;height:100%;font:800 1.4rem var(--display);color:var(--txt-dim)}
.ar-btn--go{background:linear-gradient(180deg,#ff3b3b,var(--red));border-color:#ff6060;color:#fff;box-shadow:0 6px 18px rgba(238,21,21,.3)}
.ar-btn--blue{background:linear-gradient(180deg,#4a8dff,#2563eb);border-color:#6aa2ff;color:#fff}
.ar-btn--go img,.ar-mcard__go img{width:18px;height:18px;image-rendering:pixelated}

/* Tabs: five groups, a pair under the ones that hold two screens. */
.ar-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.ar-tab{position:relative;display:flex;align-items:center;gap:6px;padding:10px 13px;border:0;background:none;cursor:pointer;
  color:var(--txt-dim);font:600 .86rem var(--display);white-space:nowrap}
.ar-tab img{width:18px;height:18px;image-rendering:pixelated}
.ar-tab[aria-selected="true"]{color:var(--txt)}
.ar-tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--red),#ff7a7a)}
.ar-sub{display:flex;gap:3px;padding:3px;margin-top:-6px;width:max-content;max-width:100%;border-radius:10px;background:var(--ink-2);border:1px solid var(--line)}
.ar-subtab{padding:5px 12px;border:0;border-radius:7px;background:none;cursor:pointer;color:var(--txt-dim);font:600 .78rem var(--display)}
.ar-subtab[aria-pressed="true"]{background:var(--ink-4);color:var(--txt)}

/* Hero */
.ar-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:18px;align-items:center;padding:20px;min-height:190px;border-radius:16px;border:1px solid #2a3a63;
  background:radial-gradient(120% 90% at 50% 120%,#1e3a8a 0%,transparent 60%),linear-gradient(180deg,#0d1424,#121c34)}
.ar-hero::before,.ar-hero::after{content:"";position:absolute;top:-40%;width:42%;height:180%;z-index:-1;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 70%);filter:blur(6px)}
.ar-hero::before{left:6%;animation:ar-beam 7s ease-in-out infinite alternate}
.ar-hero::after{right:6%;animation:ar-beam 8s ease-in-out infinite alternate-reverse}
@keyframes ar-beam{from{transform:rotate(-18deg);opacity:.55}to{transform:rotate(14deg);opacity:.9}}
.ar-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.ar-avatar{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2b3c66,#121a2c);
  box-shadow:0 0 0 3px var(--metal,#C9824F),0 0 24px color-mix(in srgb,var(--metal,#C9824F) 40%,transparent)}
.ar-avatar__img{width:88px;height:88px;object-fit:contain;image-rendering:pixelated}
.ar-avatar .ar-emb{position:absolute;right:-12px;bottom:-10px}
.ar-card__txt{min-width:0}
.ar-card h3{margin:0;font:800 1.6rem/1 var(--display);overflow-wrap:anywhere}
.ar-card__div{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.ar-card__div b{font:800 1.1rem var(--display)}
.ar-card__div span{font:700 1.35rem var(--display);font-variant-numeric:tabular-nums}
.ar-prog{display:grid;gap:4px;margin-top:10px}
.ar-prog small{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:var(--txt-dim)}
.ar-bar{position:relative;height:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}
.ar-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;transition:width 1.2s .4s cubic-bezier(.3,.8,.3,1);
  background:linear-gradient(90deg,#b58a1e,var(--ar-gold),#fff3c4);box-shadow:0 0 12px rgba(242,201,76,.6)}
.ar-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:ar-shine 2.4s infinite}
@keyframes ar-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.ar-hero__side{display:grid;gap:10px;justify-items:end;text-align:right}
.ar-season{font:900 1.05rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.ar-season em{display:block;font:600 .74rem var(--sans);font-style:normal;letter-spacing:0;text-transform:none;color:var(--txt-dim)}
.ar-wl{display:flex;align-items:center;gap:12px}
.ar-ring{--p:0;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:conic-gradient(var(--ok) calc(var(--p)*360deg),rgba(255,90,106,.75) 0)}
.ar-ring b{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#121c34;font:800 .9rem var(--display)}
.ar-wl dl{display:grid;grid-template-columns:auto auto;gap:0 8px;margin:0;font-size:.78rem}
.ar-wl dt{color:var(--txt-dim)} .ar-wl dd{margin:0;font-weight:700}
.ar-flame{display:inline-flex;align-items:center;gap:4px;font:800 .82rem var(--display);color:#ffb347}
.ar-flame svg{transform-origin:50% 100%;animation:ar-flick 1s ease-in-out infinite alternate}
@keyframes ar-flick{from{transform:scaleY(.92) rotate(-3deg)}to{transform:scaleY(1.08) rotate(3deg)}}
.ar-coins{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;font:700 .86rem var(--display);
  background:rgba(0,0,0,.35);border:1px solid rgba(255,203,5,.35)}
.ar-coins img{width:22px;height:22px;image-rendering:pixelated}

/* Tickets */
.ar-tickets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ar-ticket{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:10px;
  align-items:center;padding:16px 18px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(135deg,#1a2238,#141b2c);transition:transform .2s,box-shadow .2s}
.ar-ticket:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.ar-ticket::before{content:"";position:absolute;right:124px;top:-8px;bottom:-8px;border-left:2px dashed rgba(255,255,255,.12)}
.ar-ticket__ring{position:absolute;right:-20px;top:50%;z-index:-1;width:150px;height:150px;transform:translateY(-50%);
  border-radius:50%;border:16px solid #fff;opacity:.07}
.ar-ticket--solo{border-color:rgba(238,21,21,.35)} .ar-ticket--duo{border-color:rgba(47,123,255,.35)}
.ar-ticket h4{margin:0;font:800 1.2rem var(--display)} .ar-ticket h4 small{font:600 .8rem var(--sans);color:var(--txt-dim)}
.ar-ticket p{margin:4px 0 0;font-size:.8rem;color:var(--txt-dim)}
.ar-ticket__go{display:grid;gap:6px}
.ar-ticket__go .btn{padding:7px 10px;font-size:.8rem}
.ar-box{padding:14px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line)}
.ar-box h4{margin:4px 0 8px;font:700 .92rem var(--display)}

/* Search */
.ar-search{display:grid;justify-items:center;gap:16px;padding:24px 10px;text-align:center}
.ar-search h3{margin:0;font:800 1.35rem var(--display)}
.ar-radar{position:relative;width:220px;height:220px;max-width:70vw;max-height:70vw;border-radius:50%;
  background:radial-gradient(circle,rgba(47,123,255,.15),transparent 70%);border:1px solid rgba(124,196,255,.25)}
.ar-radar::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(124,196,255,.45),transparent 25%);animation:ar-spin 2.4s linear infinite}
.ar-radar i{position:absolute;inset:var(--in,15%);border-radius:50%;border:1px solid rgba(124,196,255,.18)}
.ar-radar__pulse{position:absolute;inset:40%;border-radius:50%;border:2px solid rgba(124,196,255,.6);animation:ar-ping 2.4s ease-out infinite}
.ar-radar__pulse:nth-of-type(2){animation-delay:1.2s}
@keyframes ar-ping{from{inset:40%;opacity:1}to{inset:-6%;opacity:0}}
@keyframes ar-spin{to{transform:rotate(360deg)}}
.ar-radar__ball{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;image-rendering:pixelated;
  animation:ar-wobble 1.2s ease-in-out infinite}
@keyframes ar-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.ar-radar__blip{position:absolute;width:10px;height:10px;border-radius:50%;background:#7cc4ff;box-shadow:0 0 10px #7cc4ff;animation:ar-blip 2.4s infinite}
@keyframes ar-blip{0%,60%,100%{opacity:0}65%{opacity:1}}
.ar-facts{display:grid;grid-template-columns:repeat(4,auto);gap:6px 22px;margin:0}
.ar-facts div{display:grid}
.ar-facts dt{font-size:.66rem;color:var(--txt-dim);text-transform:uppercase;letter-spacing:.08em}
.ar-facts dd{margin:0;font:800 1.1rem var(--display);font-variant-numeric:tabular-nums}

/* VS, over everything for three seconds */
.ar-vs{position:fixed;inset:0;z-index:400;overflow:hidden;background:#05070c;cursor:pointer;isolation:isolate;animation:ar-shake .4s .9s}
.ar-vs.is-out{opacity:0;transition:opacity .4s}
.ar-vs__half{position:absolute;inset:0;display:flex;align-items:center;padding:0 7%}
.ar-vs__half::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 22px)}
.ar-vs__half--me{clip-path:polygon(0 0,58% 0,42% 100%,0 100%);background:linear-gradient(135deg,#7a0d0d,#e11d1d 60%,#ff5a5a);
  animation:ar-inL .55s cubic-bezier(.2,.9,.2,1) both}
.ar-vs__half--foe{justify-content:flex-end;clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%);
  background:linear-gradient(315deg,#0b2a6b,#1d4ed8 60%,#5b8cff);animation:ar-inR .55s cubic-bezier(.2,.9,.2,1) both}
@keyframes ar-inL{from{transform:translateX(-100%)}} @keyframes ar-inR{from{transform:translateX(100%)}}
.ar-vs__who{position:relative;z-index:1;display:grid;gap:8px;max-width:40%}
.ar-vs__half--foe .ar-vs__who{justify-items:end;text-align:right}
.ar-vs__mon{width:min(240px,30vw);height:min(240px,30vw);object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));animation:ar-monL .7s .25s cubic-bezier(.2,1.3,.4,1) both}
.ar-vs__half--foe .ar-vs__mon{animation-name:ar-monR}
.ar-vs__mon.ar-initial{display:grid;font-size:4rem;color:#fff}
@keyframes ar-monL{from{transform:translateX(-140px) scale(.7);opacity:0}} @keyframes ar-monR{from{transform:translateX(140px) scale(.7);opacity:0}}
.ar-vs__name{font:900 clamp(1.4rem,4vw,2.4rem)/1 var(--display);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35);animation:ar-up .4s .55s both}
.ar-vs__meta{display:flex;align-items:center;gap:8px;color:#fff;font:700 .92rem var(--display);animation:ar-up .4s .65s both}
.ar-vs__half--foe .ar-vs__meta{flex-direction:row-reverse}
.ar-vs__team{display:flex;gap:6px;animation:ar-up .4s .75s both}
.ar-vs__team img{width:24px;height:24px;image-rendering:pixelated}
@keyframes ar-up{from{transform:translateY(14px);opacity:0}}
.ar-vs__mid{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.ar-vs__x{font:900 clamp(4rem,14vw,8rem)/1 var(--display);font-style:italic;color:#fff;letter-spacing:-.04em;-webkit-text-stroke:3px #111;
  text-shadow:6px 6px 0 #000,0 0 40px rgba(255,203,5,.9);animation:ar-slam .5s .85s cubic-bezier(.2,1.8,.4,1) both}
@keyframes ar-slam{from{transform:scale(4) rotate(-12deg);opacity:0}}
.ar-vs__bolt{position:absolute;width:140%;height:8px;transform:rotate(-73deg);filter:drop-shadow(0 0 12px #ffe36e);
  background:linear-gradient(90deg,transparent,#fff,#ffe36e,#fff,transparent);animation:ar-bolt .5s .85s both}
@keyframes ar-bolt{0%{opacity:0;transform:rotate(-73deg) scaleX(0)}40%{opacity:1}100%{opacity:.85;transform:rotate(-73deg) scaleX(1)}}
.ar-vs__flash{position:absolute;inset:0;z-index:4;background:#fff;pointer-events:none;animation:ar-flash .5s .9s both}
@keyframes ar-flash{0%{opacity:0}20%{opacity:.85}100%{opacity:0}}
@keyframes ar-shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}}
.ar-vs__fmt{position:absolute;left:50%;top:calc(16px + env(safe-area-inset-top,0px));z-index:5;transform:translateX(-50%);padding:5px 14px;
  border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font:800 .8rem var(--display);letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;animation:ar-up .4s 1.1s both}
.ar-vs__skip{position:absolute;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;font-size:.72rem;
  color:rgba(255,255,255,.75);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){
  .ar-vs__half{align-items:flex-start;padding:60px 22px 22px}
  .ar-vs__half--me{clip-path:polygon(0 0,100% 0,100% 44%,0 56%)}
  .ar-vs__half--foe{align-items:flex-end;clip-path:polygon(0 56%,100% 44%,100% 100%,0 100%)}
  .ar-vs__who{max-width:100%}
  .ar-vs__mon{width:130px;height:130px}
  .ar-vs__bolt{transform:rotate(-6deg)}
}

/* Result */
.ar-res{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;gap:14px;padding:30px 20px;border-radius:16px;text-align:center}
.ar-res.is-win{background:radial-gradient(80% 70% at 50% 0%,rgba(255,203,5,.25),transparent 70%),linear-gradient(180deg,#1d2440,#121829)}
.ar-res.is-loss{background:radial-gradient(80% 70% at 50% 0%,rgba(110,120,150,.2),transparent 70%),linear-gradient(180deg,#171b26,#10131b)}
.ar-res h3{margin:0;font:900 clamp(2.4rem,9cqi,4.2rem)/1 var(--display);letter-spacing:.04em;animation:ar-slam .55s cubic-bezier(.2,1.6,.4,1)}
.ar-res.is-win h3{color:transparent;background:linear-gradient(180deg,#fff7d1,var(--ar-gold) 60%,#b07d13);-webkit-background-clip:text;
  background-clip:text;filter:drop-shadow(0 4px 0 rgba(0,0,0,.4))}
.ar-res.is-loss h3{color:#aab3c5}
.ar-res__vs{margin:0;color:var(--txt-dim);font-weight:600}
.ar-res__drop{margin:0;color:#ff8a95;font:700 .9rem var(--display)}
.ar-burst{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ar-burst i{position:absolute;left:50%;top:22%;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(180deg,var(--red) 45%,#111 45% 55%,#fff 55%);animation:ar-fly 1.4s cubic-bezier(.1,.7,.3,1) both}
@keyframes ar-fly{from{transform:translate(-50%,-50%) scale(.2);opacity:1}
  to{transform:translate(calc(-50% + var(--x,0px)),calc(-50% + var(--y,0px))) rotate(540deg) scale(1);opacity:0}}
.ar-rating{display:flex;align-items:center;gap:16px}
.ar-rating__n{font:900 3rem/1 var(--display);font-variant-numeric:tabular-nums}
.ar-delta{padding:4px 10px;border-radius:9px;font:800 1.2rem var(--display)}
.ar-delta.is-up{color:var(--ok);background:rgba(63,217,138,.12)} .ar-delta.is-down{color:#ff5a6a;background:rgba(255,90,106,.12)}
.ar-divbar{display:grid;gap:6px;width:min(460px,100%)}
.ar-divbar__row{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--txt-dim)}
.ar-promo{position:relative;display:grid;justify-items:center;gap:6px;min-height:150px}
.ar-promo__old{position:absolute;animation:ar-shatter .6s 1.6s forwards}
.ar-promo__new{opacity:0;animation:ar-rise .7s 2.1s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes ar-shatter{to{transform:scale(1.4) rotate(14deg);opacity:0;filter:blur(4px) brightness(2)}}
@keyframes ar-rise{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.ar-promo__label{opacity:0;font:900 1rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ar-gold);animation:ar-show .4s 2.6s forwards}
@keyframes ar-show{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.ar-rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ar-reward{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;font:700 .86rem var(--display);
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);animation:ar-up .4s .6s both}
.ar-reward img{width:24px;height:24px;image-rendering:pixelated}
.ar-res__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Ladder */
.ar-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:12px;padding:10px 6px 0}
.ar-pod{--c:#C9824F;display:grid;justify-items:center;gap:6px;min-width:0;animation:ar-up .5s both}
.ar-pod--1{animation-delay:.2s} .ar-pod--3{animation-delay:.35s}
.ar-pod__av{display:grid;place-items:center;width:72px;height:72px;overflow:hidden;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#2b3c66,#121a2c);box-shadow:0 0 0 3px var(--c)}
.ar-pod__av img{width:66px;height:66px;object-fit:contain;image-rendering:pixelated}
.ar-pod--1 .ar-pod__av{width:92px;height:92px} .ar-pod--1 .ar-pod__av img{width:86px;height:86px}
.ar-pod b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 .95rem var(--display)}
.ar-pod small{color:var(--txt-dim);font-size:.72rem}
.ar-pod__step{display:grid;place-items:center;width:100%;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);border-bottom:0;
  border-radius:12px 12px 0 0;font:900 2rem var(--display);color:rgba(255,255,255,.85);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#1a2233),#141b2c)}
.ar-pod--1 .ar-pod__step{height:120px} .ar-pod--2 .ar-pod__step{height:86px} .ar-pod--3 .ar-pod__step{height:64px}
.ar-pod.is-empty{opacity:.35}
.ar-crown{animation:ar-float 2.4s ease-in-out infinite}
@keyframes ar-float{50%{transform:translateY(-5px)}}
.ar-lrows{display:grid;gap:4px}
.ar-lrow{display:grid;grid-template-columns:48px 40px minmax(0,1fr) auto 90px 60px;gap:10px;align-items:center;padding:8px 12px;
  border-radius:11px;background:var(--ink-2);border:1px solid transparent;animation:ar-up .4s both}
.ar-lrow__rk{font:800 .95rem var(--display);color:var(--txt-dim)}
.ar-lrow__av{display:grid;place-items:center;width:36px;height:36px}
.ar-lrow__av img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
.ar-lrow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.ar-lrow__wr{text-align:right;font-size:.76rem;color:var(--txt-dim)}
.ar-lrow__rt{text-align:right;font:800 .95rem var(--display);font-variant-numeric:tabular-nums}
.ar-lrow.is-me{position:sticky;bottom:0;border-color:rgba(238,21,21,.45);background:linear-gradient(90deg,rgba(238,21,21,.18),var(--ink-3))}

/* History: match cards */
.ar-mcards{display:grid;gap:10px}
.ar-mcard{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) auto;
  align-items:center;gap:0;min-height:100px;border-radius:14px;border:1px solid var(--line);background:var(--ink-2);animation:ar-slide .45s both}
@keyframes ar-slide{from{transform:translateX(-24px);opacity:0}}
.ar-mcard::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,color-mix(in srgb,var(--c1,var(--t-normal)) 50%,rgba(11,15,23,.7)) 0 44%,rgba(11,15,23,.88) 44% 50%,
    color-mix(in srgb,var(--c2,var(--t-normal)) 50%,rgba(11,15,23,.7)) 50%)}
.ar-mcard__meta{position:absolute;left:12px;top:6px;font-size:.66rem;color:rgba(255,255,255,.78)}
.ar-mcard__meta--r{left:auto;right:12px}
.ar-mcard__side{display:flex;align-items:center;gap:6px;min-width:0;padding:16px 12px 10px}
.ar-mcard__side--foe{flex-direction:row-reverse;text-align:right}
.ar-mcard__lead{flex:none;width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.ar-mcard__rest{display:flex;flex-wrap:wrap;max-width:64px}
.ar-mcard__rest img{width:28px;height:28px;image-rendering:pixelated}
.ar-mcard__rest img.is-down{filter:grayscale(1) brightness(.55)}
.ar-mcard__who{display:grid;min-width:0}
.ar-mcard__who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.ar-mcard__who small{font-size:.7rem;color:rgba(255,255,255,.72)}
.ar-mcard__vs{text-align:center;font:900 1rem var(--display);font-style:italic;text-shadow:2px 2px 0 #000}
.ar-mcard__go{margin-right:12px;display:inline-flex;align-items:center;gap:6px}
.ar-stamp{position:absolute;left:calc(50% - 24px);bottom:6px;transform:translateX(-50%) rotate(-6deg);padding:2px 10px;border-radius:6px;
  border:2px solid currentColor;background:rgba(0,0,0,.55);font:900 .72rem var(--display);letter-spacing:.14em;white-space:nowrap;
  animation:ar-stamp .4s .3s cubic-bezier(.2,1.8,.4,1) both}
@keyframes ar-stamp{from{transform:translateX(-50%) rotate(-6deg) scale(3);opacity:0}}
.ar-stamp.is-won{color:#7dffb5} .ar-stamp.is-lost{color:#ff8a95}

/* Replay field */
.ar-field{position:relative;isolation:isolate;height:320px;overflow:hidden;border-radius:16px;
  background:url(../sprites/backgrounds/hq.jpg) center 60%/cover,#16213a}
.ar-field::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,24,.15),rgba(10,14,24,.55))}
.ar-mon{position:absolute;z-index:1;width:150px;height:150px}
.ar-mon img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
.ar-mon--foe.ar-mon--s0{right:12%;top:10%} .ar-mon--foe.ar-mon--s1{right:32%;top:4%;width:120px;height:120px}
.ar-mon--me{width:190px;height:190px}
.ar-mon--me.ar-mon--s0{left:8%;bottom:-6%} .ar-mon--me.ar-mon--s1{left:30%;bottom:-2%;width:160px;height:160px}
.ar-mon.is-hit{animation:ar-hit .45s .2s}
@keyframes ar-hit{0%,100%{transform:none;filter:none}20%{transform:translateX(-10px);filter:brightness(3)}40%{transform:translateX(9px)}
  60%{transform:translateX(-6px);filter:brightness(2)}80%{transform:translateX(4px)}}
.ar-mon.is-lunge-me{animation:ar-lunge-me .4s} .ar-mon.is-lunge-foe{animation:ar-lunge-foe .4s}
@keyframes ar-lunge-me{50%{transform:translate(40px,-24px)}} @keyframes ar-lunge-foe{50%{transform:translate(-40px,24px)}}
.ar-mon.is-faint{animation:ar-faint .6s forwards}
@keyframes ar-faint{to{transform:translateY(60px);opacity:0}}
.ar-mon.is-enter{animation:ar-enter .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ar-enter{from{transform:scale(.1);opacity:0;filter:brightness(4)}}
.ar-plate-slot{position:absolute;z-index:2}
.ar-plate-slot--foe.ar-plate-slot--s0{left:4%;top:8%} .ar-plate-slot--foe.ar-plate-slot--s1{left:4%;top:34%}
.ar-plate-slot--me.ar-plate-slot--s0{right:4%;bottom:10%} .ar-plate-slot--me.ar-plate-slot--s1{right:4%;bottom:36%}
.ar-plate{display:grid;gap:5px;min-width:190px;padding:8px 12px;border-radius:12px;background:rgba(10,14,24,.86);border:1px solid rgba(255,255,255,.12)}
.ar-plate b{display:flex;justify-content:space-between;gap:10px;font:700 .88rem var(--display)}
.ar-plate b small{color:var(--txt-dim);font-weight:600}
.ar-hp{height:8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.1)}
.ar-hp i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2fbf71,#5df29f);transition:width .6s cubic-bezier(.3,.8,.3,1)}
.ar-hp i.is-mid{background:linear-gradient(90deg,#d4a017,#ffd54a)} .ar-hp i.is-low{background:linear-gradient(90deg,#c62828,#ff6b6b)}
.ar-plate__balls{display:flex;align-items:center;gap:3px}
.ar-plate__balls img{width:13px;height:13px;image-rendering:pixelated}
.ar-plate__balls img.is-down{filter:grayscale(1) brightness(.5)}
.ar-plate__st{margin-left:4px;padding:0 5px;border-radius:4px;background:#7a3b16;font:800 .58rem var(--display);letter-spacing:.06em}
.ar-pop{position:absolute;z-index:3;white-space:nowrap;pointer-events:none;font:900 1.3rem var(--display);color:#fff;
  text-shadow:0 2px 0 #000,0 0 14px rgba(255,203,5,.8);animation:ar-pop 1s .2s both}
.ar-pop.is-crit{color:var(--yellow);font-size:1.5rem} .ar-pop.is-weak{color:#b9c6da;font-size:1.05rem}
.ar-pop--foe{right:16%;top:6%} .ar-pop--me{left:12%;top:40%}
@keyframes ar-pop{from{transform:translateY(0) scale(.6);opacity:0}20%{transform:translateY(-8px) scale(1.1);opacity:1}to{transform:translateY(-40px);opacity:0}}
.ar-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;
  background:var(--ink-2);border:1px solid var(--line)}
.ar-player__ctrls{display:flex;flex-wrap:wrap;gap:6px}
.ar-scrub{position:relative;height:34px;min-width:0}
.ar-scrub__track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.ar-scrub__fill{position:absolute;left:0;top:15px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--red),#ff8a8a);transition:width .3s}
.ar-scrub__tick{position:absolute;top:8px;width:10px;height:22px;margin-left:-5px;padding:0;border:0;background:none;cursor:pointer}
.ar-scrub__tick::before{content:"";position:absolute;left:4px;top:0;width:2px;height:18px;background:rgba(255,255,255,.22)}
.ar-scrub__tick span{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:.58rem;color:var(--txt-dim)}
.ar-scrub__ko{position:absolute;top:2px;width:12px;height:12px;margin-left:-6px;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,var(--red) 45%,#111 45% 55%,#fff 55%);box-shadow:0 0 0 2px var(--ink-2)}
.ar-speed{display:flex;gap:3px;padding:3px;border-radius:10px;background:var(--ink);border:1px solid var(--line)}
.ar-speed button{min-width:38px;padding:4px 8px;border:0;border-radius:7px;background:none;cursor:pointer;color:var(--txt-dim);font:700 .76rem var(--display)}
.ar-speed button[aria-pressed="true"]{background:var(--ink-4);color:var(--txt)}

/* The screens that stay as they were get the same surfaces */
.ar .pvpchip.is-on{background:var(--ink-4);border-color:#3c4a6a}
.pvpbracket{position:relative}
.pvpbracket__lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.pvpbracket__lines path{fill:none;stroke:#34405c;stroke-width:2}
.pvpbracket__lines path.is-lit{stroke:var(--red);stroke-dasharray:400;stroke-dashoffset:400;animation:ar-draw 1.2s .3s forwards}
@keyframes ar-draw{to{stroke-dashoffset:0}}
.pvpbracket__r{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-around;min-width:150px}
.pvpbracket{gap:28px}
.pvpbracket__m.is-yours{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.pvpbracket__m.is-live{position:relative;border-color:rgba(255,90,106,.6);box-shadow:0 0 18px rgba(255,90,106,.2)}
.pvpbracket__m.is-live::before{content:"LIVE";position:absolute;right:6px;top:-1px;padding:1px 5px;border-radius:0 0 5px 5px;
  background:#ff5a6a;color:#fff;font:800 .55rem var(--display);letter-spacing:.1em;animation:ar-live 1.2s infinite}
@keyframes ar-live{50%{opacity:.4}}
.pvpclock__ring{--p:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:conic-gradient(var(--yellow) calc(var(--p)*360deg),rgba(255,255,255,.1) 0)}
.pvpclock__ring .pvpclock__s{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink-2)}
.pvpclock.is-urgent .pvpclock__ring{background:conic-gradient(#FF4422 calc(var(--p)*360deg),rgba(255,255,255,.1) 0);animation:ar-live .8s infinite}
.pvpwaiting__dots b{display:inline-block;animation:ar-dot 1.2s infinite}
.pvpwaiting__dots b:nth-child(2){animation-delay:.2s} .pvpwaiting__dots b:nth-child(3){animation-delay:.4s}
@keyframes ar-dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* The Arena fight: a stadium behind it, floodlit, and each move
   button edged in its type's colour. */
.pvpbattle__bg{background:url(../sprites/backgrounds/hq.jpg) center 55%/cover,#16213a}
.pvpbattle__bg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 20% -10%,rgba(255,255,255,.18),transparent 70%),
    radial-gradient(60% 50% at 80% -10%,rgba(255,255,255,.18),transparent 70%)}
.pvpplate__moves .bmove{position:relative;overflow:hidden;border-left:4px solid var(--mt,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--mt,#556) 28%,var(--ink-2)),var(--ink-2) 80%)}
.pvpplate__moves .bmove:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.12)}
.pvpplate__moves .bmove.t-normal{--mt:var(--t-normal)} .pvpplate__moves .bmove.t-fire{--mt:var(--t-fire)}
.pvpplate__moves .bmove.t-water{--mt:var(--t-water)} .pvpplate__moves .bmove.t-electric{--mt:var(--t-electric)}
.pvpplate__moves .bmove.t-grass{--mt:var(--t-grass)} .pvpplate__moves .bmove.t-ice{--mt:var(--t-ice)}
.pvpplate__moves .bmove.t-fighting{--mt:var(--t-fighting)} .pvpplate__moves .bmove.t-poison{--mt:var(--t-poison)}
.pvpplate__moves .bmove.t-ground{--mt:var(--t-ground)} .pvpplate__moves .bmove.t-flying{--mt:var(--t-flying)}
.pvpplate__moves .bmove.t-psychic{--mt:var(--t-psychic)} .pvpplate__moves .bmove.t-bug{--mt:var(--t-bug)}
.pvpplate__moves .bmove.t-rock{--mt:var(--t-rock)} .pvpplate__moves .bmove.t-ghost{--mt:var(--t-ghost)}
.pvpplate__moves .bmove.t-dragon{--mt:var(--t-dragon)} .pvpplate__moves .bmove.t-dark{--mt:var(--t-dark)}
.pvpplate__moves .bmove.t-steel{--mt:var(--t-steel)} .pvpplate__moves .bmove.t-fairy{--mt:var(--t-fairy)}

@container ar (max-width:720px){
  .ar-tab{padding:10px 9px;font-size:.8rem}
  .ar-tab img{display:none}
  .ar-card h3{font-size:1.2rem}
  .ar-avatar{width:76px;height:76px} .ar-avatar__img{width:70px;height:70px}
  .ar-hero{grid-template-columns:minmax(0,1fr)}
  .ar-hero__side{justify-items:start;text-align:left}
  .ar-tickets{grid-template-columns:minmax(0,1fr)}
  .ar-facts{grid-template-columns:repeat(2,auto)}
  .ar-lrow{grid-template-columns:40px 34px minmax(0,1fr) 56px}
  .ar-lrow__em,.ar-lrow__wr{display:none}
  .ar-mcard{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}
  .ar-mcard__go{grid-column:1/-1;justify-self:end;margin:0 10px 10px}
  .ar-mcard__rest{display:none}
  .ar-mcard__lead{width:52px;height:52px}
  .ar-stamp{left:50%;bottom:auto;top:40px}
  .ar-field{height:260px}
  .ar-mon--me{width:130px;height:130px} .ar-mon--foe{width:100px;height:100px}
  .ar-plate{min-width:140px}
  .ar-player{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ar *,.ar *::before,.ar *::after,.ar-hero::before,.ar-hero::after{animation:none!important;transition:none!important}
}

/* ── The event calendar ──────────────────────────────────
   What is on, what is coming, and what has just been. */
.cal__lead{margin:0 0 12px;font-size:.74rem;color:var(--txt-dim)}
.cal__h{margin:14px 0 8px;font-size:.8rem}
.cal__h:first-of-type{margin-top:0}

.calcard{padding:11px 12px;margin:0 0 8px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line);
  border-left:3px solid var(--line)}
/* Running now reads as running: the left edge lights up rather than
   the whole card, which would fight the rest of the screen. */
.calcard.is-live{border-left-color:var(--pri);background:rgba(91,140,255,.08)}
.calcard.is-over{opacity:.55}
.calcard--shiny.is-live{border-left-color:#FFCC33}
.calcard--shadow.is-live{border-left-color:#6F35FC}
.calcard--money.is-live{border-left-color:#77CC55}
.calcard--exp.is-live{border-left-color:#3399FF}

.calcard__top{display:flex;justify-content:space-between;align-items:center;
  gap:8px}
.calcard__kind{font-size:.64rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txt-dim)}
.calcard__x{font-size:.78rem;font-weight:800;color:var(--pri)}
.calcard__t{margin:3px 0 0;font-size:.84rem}
.calcard__n{margin:4px 0 0;font-size:.72rem;color:var(--txt-dim)}
.calcard__when{margin:6px 0 0;font-size:.7rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}

/* ── Global Hunt ─────────────────────────────────────────
   One number the whole server fills, and your own beside it. The
   global figure is the biggest thing on the screen because it is the
   point of the event. */
.huntbanner{padding:14px 16px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(91,140,255,.22),
    rgba(120,90,220,.16));border:1px solid var(--line);margin:0 0 10px}
.huntbanner__t{margin:0;font-size:1rem}
.huntbanner__c{margin:4px 0 0;font-size:.76rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}

/* The last two days, when the catching has stopped but the tokens
   are still worth something. Warm rather than grey: it is a
   deadline to act on, not a notice that the event is finished. */
.huntbanner.is-grace{
  background:linear-gradient(135deg,rgba(255,213,74,.20),
    rgba(255,140,60,.12));border-color:rgba(255,213,74,.34);
}
.huntbanner.is-grace .huntbanner__c{color:var(--shiny)}

/* The countdown: four cells big enough to read across the room,
   and the moment it ends underneath. Tabular figures so the
   seconds do not make the row twitch. */
.huntclock{margin:10px 0 0;text-align:center}
.huntclock__l{margin:0 0 6px;font-size:.72rem;color:var(--txt-dim);
  text-transform:uppercase;letter-spacing:.06em}
.huntclock__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;max-width:340px;margin:0 auto}
.huntclock__c{display:flex;flex-direction:column;align-items:center;
  padding:8px 4px;border-radius:var(--r-sm);background:rgba(0,0,0,.22);
  border:1px solid var(--line)}
.huntclock__c b{font-size:1.6rem;line-height:1.05;
  font-variant-numeric:tabular-nums}
.huntclock__c i{font-style:normal;font-size:.62rem;color:var(--txt-dim);
  text-transform:uppercase;letter-spacing:.05em}
.huntclock__at{margin:6px 0 0;font-size:.72rem;color:var(--txt-dim)}
.huntbanner.is-grace .huntclock__c b{color:var(--shiny)}

/* And once it is genuinely finished. */
.huntbanner.is-archived{
  background:linear-gradient(135deg,rgba(120,130,150,.14),
    rgba(90,100,120,.10));
}

.huntbanner__won{
  margin:8px 0 0;padding:8px 10px;border-radius:var(--r-xs,6px);
  background:rgba(255,213,74,.10);border:1px solid rgba(255,213,74,.28);
  font-size:.78rem;color:var(--shiny);font-variant-numeric:tabular-nums;
}

.huntglobal{padding:14px 16px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line);margin:0 0 10px}
.huntglobal__n{display:flex;align-items:baseline;gap:8px;
  justify-content:center}
.huntglobal__n b{font-size:1.9rem;line-height:1;
  font-variant-numeric:tabular-nums}
.huntglobal__n span{font-size:.78rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.huntglobal__next{margin:8px 0 0;font-size:.74rem;color:var(--txt-dim);
  text-align:center}

.huntbar{display:block;height:8px;margin:10px 0 0;border-radius:4px;
  background:var(--line);overflow:hidden}
.huntbar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--pri),#9B7BFF);
  transition:width .6s ease}
.huntbar--big{height:12px;border-radius:6px}

.huntyou{padding:12px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line);margin:0 0 10px}
.huntyou__row{display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}
.huntstat{text-align:center;padding:6px 4px;border-radius:var(--r-sm);
  background:var(--ink-3)}
.huntstat b{display:block;font-size:1rem;line-height:1.2;
  font-variant-numeric:tabular-nums}
.huntstat span{display:block;font-size:.64rem;color:var(--txt-dim);
  text-transform:uppercase;letter-spacing:.05em}
.huntyou__dex{margin:8px 0 0;font-size:.74rem;text-align:center}
/* Why the tokens stopped, rather than leaving somebody to guess. */
.huntyou__cap{margin:6px 0 0;font-size:.7rem;color:var(--txt-dim);
  text-align:center}

.hunthot{margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);
  background:rgba(255,204,51,.12);border:1px solid rgba(255,204,51,.3);
  font-size:.74rem;text-align:center}

.huntsteps{display:grid;gap:5px}

/* The month's Pokemon: sprites rather than a list of names, because
   a player hunting for one is looking for its picture in the grass. */
.huntmons{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:6px;margin:0 0 8px}
.huntmons--prize{grid-template-columns:repeat(2,minmax(0,1fr))}
.huntmons--sm{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
.huntmon{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 4px;border-radius:var(--r-sm);background:var(--ink);
  border:1px solid var(--line);text-align:center;min-width:0}
.huntmon img{width:56px;height:56px;image-rendering:pixelated;
  object-fit:contain}
.huntmons--prize .huntmon{background:linear-gradient(135deg,
  rgba(255,213,74,.12),rgba(255,140,60,.06));
  border-color:rgba(255,213,74,.28)}
.huntmons--prize .huntmon img{width:72px;height:72px}
.huntmons--sm .huntmon img{width:44px;height:44px}
.huntmon__n{font-size:.72rem;font-weight:600;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.huntmon__t{font-size:.64rem;color:var(--txt-dim)}
.huntzone{margin:6px 0 4px;font-size:.74rem;color:var(--txt-dim)}
.huntzone b{color:var(--txt)}
.huntstep{display:grid;grid-template-columns:64px 1fr auto;gap:8px;
  align-items:center;padding:7px 10px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line);font-size:.74rem}
.huntstep.is-locked{opacity:.5}
.huntstep.is-ready{border-color:var(--pri);background:rgba(91,140,255,.1)}
.huntstep.is-claimed{opacity:.72}
.huntstep__at{font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--txt-dim)}
.huntstep__t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.huntstep__n{font-size:.66rem;color:var(--txt-dim);white-space:nowrap}

/* A note under a field, for the ones where the wrong choice is
   invisible rather than obvious. */
.fld__hint{display:block;margin-top:4px;font-size:.66rem;
  color:var(--txt-dim);line-height:1.4}

/* ============================================================
   GUILD HALL
   A banner in the guild's own colours, five pages under it, and
   the directory and founding form for somebody in no guild.

   Every colour here comes from --g-acc and --g-acc2, which are set
   from two names the guild chose. Names go over the wire, never
   colour values, so this list is the whole of what a guild can put
   on another player's screen. 'classic' is the house red and
   yellow, which every guild had before it could choose.
   ============================================================ */
.gtheme{--g-acc:#EE1515;--g-on-acc:#fff;--g-acc2:#FFCB05;--g-on-acc2:#14171c}

[data-gacc="classic"]{--g-acc:#EE1515;--g-on-acc:#fff}
[data-gacc="normal"]{--g-acc:#9FA19F;--g-on-acc:#14171c}
[data-gacc="fire"]{--g-acc:#E62829;--g-on-acc:#fff}
[data-gacc="water"]{--g-acc:#2980EF;--g-on-acc:#fff}
[data-gacc="electric"]{--g-acc:#FAC000;--g-on-acc:#14171c}
[data-gacc="grass"]{--g-acc:#3FA129;--g-on-acc:#fff}
[data-gacc="ice"]{--g-acc:#3DCEF3;--g-on-acc:#14171c}
[data-gacc="fighting"]{--g-acc:#FF8000;--g-on-acc:#14171c}
[data-gacc="poison"]{--g-acc:#9141CB;--g-on-acc:#fff}
[data-gacc="ground"]{--g-acc:#915121;--g-on-acc:#fff}
[data-gacc="flying"]{--g-acc:#81B9EF;--g-on-acc:#14171c}
[data-gacc="psychic"]{--g-acc:#EF4179;--g-on-acc:#fff}
[data-gacc="bug"]{--g-acc:#91A119;--g-on-acc:#14171c}
[data-gacc="rock"]{--g-acc:#AFA981;--g-on-acc:#14171c}
[data-gacc="ghost"]{--g-acc:#704170;--g-on-acc:#fff}
[data-gacc="dragon"]{--g-acc:#5060E1;--g-on-acc:#fff}
[data-gacc="dark"]{--g-acc:#6E5A55;--g-on-acc:#fff}
[data-gacc="steel"]{--g-acc:#60A1B8;--g-on-acc:#14171c}
[data-gacc="fairy"]{--g-acc:#EF70EF;--g-on-acc:#14171c}

[data-gacc2="classic"]{--g-acc2:#FFCB05;--g-on-acc2:#14171c}
[data-gacc2="normal"]{--g-acc2:#9FA19F;--g-on-acc2:#14171c}
[data-gacc2="fire"]{--g-acc2:#E62829;--g-on-acc2:#fff}
[data-gacc2="water"]{--g-acc2:#2980EF;--g-on-acc2:#fff}
[data-gacc2="electric"]{--g-acc2:#FAC000;--g-on-acc2:#14171c}
[data-gacc2="grass"]{--g-acc2:#3FA129;--g-on-acc2:#fff}
[data-gacc2="ice"]{--g-acc2:#3DCEF3;--g-on-acc2:#14171c}
[data-gacc2="fighting"]{--g-acc2:#FF8000;--g-on-acc2:#14171c}
[data-gacc2="poison"]{--g-acc2:#9141CB;--g-on-acc2:#fff}
[data-gacc2="ground"]{--g-acc2:#915121;--g-on-acc2:#fff}
[data-gacc2="flying"]{--g-acc2:#81B9EF;--g-on-acc2:#14171c}
[data-gacc2="psychic"]{--g-acc2:#EF4179;--g-on-acc2:#fff}
[data-gacc2="bug"]{--g-acc2:#91A119;--g-on-acc2:#14171c}
[data-gacc2="rock"]{--g-acc2:#AFA981;--g-on-acc2:#14171c}
[data-gacc2="ghost"]{--g-acc2:#704170;--g-on-acc2:#fff}
[data-gacc2="dragon"]{--g-acc2:#5060E1;--g-on-acc2:#fff}
[data-gacc2="dark"]{--g-acc2:#6E5A55;--g-on-acc2:#fff}
[data-gacc2="steel"]{--g-acc2:#60A1B8;--g-on-acc2:#14171c}
[data-gacc2="fairy"]{--g-acc2:#EF70EF;--g-on-acc2:#14171c}

/* Worked out from the two colours on every element that sets one,
   because a custom property is resolved where it is declared - a
   swatch with its own colour would otherwise inherit its parent's
   lighter shade. -hi is the accent lifted for text on a dark
   ground, where a deep Ghost or Dark purple would vanish. */
.gtheme,[data-gacc],[data-gacc2]{
  --g-acc-hi:color-mix(in srgb,var(--g-acc) 62%,#fff);
  --g-acc2-hi:color-mix(in srgb,var(--g-acc2) 62%,#fff);
  --g-acc-soft:color-mix(in srgb,var(--g-acc) 16%,transparent);
}

.guild{display:flex;flex-direction:column;gap:14px}
.gnote{margin:0;font-size:12px;color:var(--txt-dim);line-height:1.55}
.gsub__note{margin:0 0 12px;font-size:.84rem;color:var(--txt-dim)}
.guild [hidden]{display:none!important}

/* ── Buttons ─────────────────────────────────────────── */
.gbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border-radius:10px;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--txt);background:var(--ink-3);
  border:1px solid var(--line);cursor:pointer;white-space:nowrap;
  transition:transform .14s ease,filter .14s ease,border-color .14s ease,
             background .14s ease}
.gbtn:hover:not(:disabled){border-color:var(--g-acc-hi);transform:translateY(-1px)}
.gbtn:disabled{opacity:.45;cursor:default}
.gbtn img{width:20px;height:20px;image-rendering:pixelated}
.gbtn--pri{
  color:var(--g-on-acc);border-color:transparent;
  background:linear-gradient(135deg,var(--g-acc),
    color-mix(in srgb,var(--g-acc) 68%,var(--g-acc2)));
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--g-acc) 75%,transparent)}
.gbtn--pri:hover:not(:disabled){filter:brightness(1.1);border-color:transparent}
.gbtn--ghost{background:transparent}
.gbtn--danger{background:var(--red-dk);border-color:var(--red);color:#fff}
.gbtn--danger:hover:not(:disabled){background:var(--red);border-color:var(--red-lt)}
.gbtn--sm{padding:5px 11px;font-size:11.5px;border-radius:8px}
.gbtn--lg{padding:11px 22px;font-size:14px;border-radius:12px}
.gbtn--hero{background:#fff;color:#14171c;border-color:transparent;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.45)}
.gbtn--hero:hover:not(:disabled){border-color:transparent;filter:brightness(.95)}
.gbtn--glass{background:rgba(255,255,255,.14);color:#fff;
  border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.gbtn--icon{width:38px;height:38px;padding:0;font-size:17px}

.gchip{
  padding:4px 11px;border-radius:999px;font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;color:var(--g-acc-hi);
  background:var(--g-acc-soft);
  border:1px solid color-mix(in srgb,var(--g-acc) 40%,transparent);
  transition:background .14s ease}
.gchip:hover{background:color-mix(in srgb,var(--g-acc) 28%,transparent)}

.ginput{
  flex:1;min-width:0;padding:9px 11px;font:inherit;font-size:13px;
  background:var(--ink);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);transition:border-color .14s ease,box-shadow .14s ease}
.ginput:focus{outline:none;border-color:var(--g-acc-hi);
  box-shadow:0 0 0 3px var(--g-acc-soft)}
.ginput--tag{max-width:96px;text-transform:uppercase}
.ginput--num{min-width:120px}

/* The guild's tag, worn as a chip in its second colour. */
.gtag{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:.62em;font-weight:900;letter-spacing:.08em;vertical-align:middle;
  background:var(--g-acc2);color:var(--g-on-acc2)}

/* ── The banner ──────────────────────────────────────── */
.ghero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:16px 18px 14px;border-radius:var(--r);color:#fff;
  background:
    radial-gradient(110% 140% at 0% 0%,
      color-mix(in srgb,var(--g-acc) 70%,transparent),transparent 62%),
    radial-gradient(110% 140% at 100% 100%,
      color-mix(in srgb,var(--g-acc2) 60%,transparent),transparent 64%),
    linear-gradient(120deg,
      color-mix(in srgb,var(--g-acc) 52%,var(--ink-2)),
      color-mix(in srgb,var(--g-acc2) 40%,var(--ink-2)));
  border:1px solid color-mix(in srgb,var(--g-acc-hi) 40%,transparent);
  box-shadow:0 16px 36px -14px color-mix(in srgb,var(--g-acc) 60%,transparent)}
/* A Poké Ball drawn in the corner, faint: a ring and the band
   across it. */
.ghero::before,.ghero::after{content:"";position:absolute;z-index:-1;
  pointer-events:none}
.ghero::before{right:-46px;top:-46px;width:190px;height:190px;
  border-radius:50%;border:18px solid rgba(255,255,255,.08)}
.ghero::after{right:-46px;top:40px;width:190px;height:18px;
  background:rgba(255,255,255,.08)}

.ghero__main{display:flex;align-items:center;gap:14px}
.ghero__emblem{
  flex-shrink:0;width:68px;height:68px;border-radius:20px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--g-acc2) 30%,transparent),
             0 0 26px color-mix(in srgb,var(--g-acc2) 55%,transparent);
  animation:gfloat 4.5s ease-in-out infinite}
.ghero__emblem img{width:48px;height:48px;image-rendering:pixelated;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.ghero__id{min-width:0;flex:1}
.ghero__name{margin:0;font-size:20px;font-weight:900;line-height:1.2;
  text-shadow:0 2px 6px rgba(0,0,0,.45);overflow-wrap:anywhere}
.ghero__meta{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
.ghero__chip{display:inline-block;margin-left:6px;padding:1px 8px;
  border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(8,10,14,.32);border:1px solid rgba(255,255,255,.2)}
.ghero__act{display:flex;gap:8px;align-items:center;flex-shrink:0}

.ghero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin-top:14px}
.gstat{
  display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:9px;
  align-items:center;padding:8px 11px;border-radius:12px;
  background:rgba(8,10,14,.34);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px)}
.gstat img{grid-row:1/3;width:28px;height:28px;image-rendering:pixelated}
.gstat span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:800}
.gstat b{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.gstat.is-live{border-color:rgba(63,217,138,.55)}
.gstat.is-live b{color:#8ff0bd}

@keyframes gfloat{50%{transform:translateY(-4px)}}

/* ── Pages ───────────────────────────────────────────── */
.gtabs{display:flex;gap:4px;padding:5px;border-radius:14px;
  background:var(--ink-3);border:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.gtabs::-webkit-scrollbar{display:none}
.gtab{
  flex:1 0 auto;padding:8px 14px;border:0;border-radius:10px;
  background:none;color:var(--txt-dim);font:inherit;font-size:.88rem;
  font-weight:700;cursor:pointer;white-space:nowrap;
  transition:color .15s ease,background .15s ease}
.gtab:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.gtab.is-on{color:var(--g-on-acc);
  background:linear-gradient(135deg,var(--g-acc),
    color-mix(in srgb,var(--g-acc) 65%,var(--g-acc2)));
  box-shadow:0 4px 14px -4px color-mix(in srgb,var(--g-acc) 70%,transparent)}
.gtab__n{display:inline-block;min-width:20px;padding:1px 6px;
  border-radius:999px;font-size:.72rem;background:rgba(0,0,0,.22)}
.gpage{animation:gin .2s ease}
@keyframes gin{from{opacity:0;transform:translateY(4px)}}

.gpanel{
  display:flex;flex-direction:column;gap:10px;padding:14px 16px;
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--g-acc) 7%,var(--ink-3)),var(--ink-3) 70%)}
.gpanel__head{display:flex;align-items:center;justify-content:space-between;
  gap:10px}
.gpanel__title{margin:0;font-size:.76rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--g-acc-hi)}
.gfield__lbl{margin:2px 0 -2px;font-size:.7rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--txt-dim)}
.gform__act{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Overview: the notice board, the bank and the latest lines on the
   left, the events on the right. */
.gover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;align-items:start}
.gover__col{display:flex;flex-direction:column;gap:14px;min-width:0}

.gmotd{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:var(--r);
  background:color-mix(in srgb,var(--g-acc2) 11%,var(--ink-3));
  border:1px dashed color-mix(in srgb,var(--g-acc2) 55%,transparent)}
.gmotd__icon{width:34px;height:34px;image-rendering:pixelated;flex-shrink:0}
.gmotd__body{flex:1;min-width:0}
.gmotd__lbl{display:block;font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--g-acc2-hi)}
.gmotd__body p{margin:3px 0 0;font-size:13px;line-height:1.5;
  overflow-wrap:anywhere}

.gbank__sum{display:flex;align-items:center;gap:12px}
.gbank__icon{width:42px;height:42px;image-rendering:pixelated;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--g-acc) 55%,transparent))}
.gbank__sum span{display:block;font-size:.68rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--txt-dim)}
.gbank__sum b{font-size:26px;font-weight:900;color:var(--g-acc-hi);
  font-variant-numeric:tabular-nums}
.gbank__quick{display:flex;gap:6px;flex-wrap:wrap}
.gbank__act{display:flex;gap:6px;flex-wrap:wrap}

/* Guild events: each in its own colour, so a glance at the row says
   which ones are running. */
.gevents__lead{margin:0;font-size:12px;color:var(--txt-dim);line-height:1.55}
.gevents{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.gevent{
  --ev:var(--g-acc);
  display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--ev) 18%,var(--ink-2)),var(--ink-2) 72%);
  border:1px solid color-mix(in srgb,var(--ev) 35%,var(--line));
  transition:transform .15s ease}
.gevent:hover{transform:translateY(-2px)}
.gevent--exp{--ev:#4FA3FF}
.gevent--money{--ev:var(--yellow)}
.gevent--shiny{--ev:var(--shiny)}
.gevent--shadow{--ev:var(--shadow)}
.gevent.is-on{border-color:var(--ev);animation:gpulse 2.6s ease-in-out infinite}
@keyframes gpulse{
  50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ev) 25%,transparent),
                 0 0 22px color-mix(in srgb,var(--ev) 35%,transparent)}}
.gevent__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gevent__head b{font-size:13px;flex:1;white-space:nowrap}
.gevent__icon{width:28px;height:28px;image-rendering:pixelated}
.gevent__cost{font-family:var(--mono);font-size:12px;
  color:color-mix(in srgb,var(--ev) 70%,#fff)}
.gevent__live{font-size:11px;font-weight:800;color:var(--ok)}
.gevent__text{margin:0;font-size:11.5px;color:var(--txt-dim);line-height:1.5;flex:1}
.gevent__bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);
  overflow:hidden}
.gevent__bar i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--ev),
    color-mix(in srgb,var(--ev) 50%,#fff))}
.gevent__noperm{font-size:11px;color:var(--txt-dim);font-style:italic}
.gevent .gbtn{align-self:flex-start}

/* ── Members ─────────────────────────────────────────── */
.gsearch{width:100%;margin-bottom:12px}
.ggroup{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.ggroup__head{display:flex;align-items:center;gap:8px;margin:0;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rank-c,var(--txt-dim))}
.ggroup__dot{width:10px;height:10px;border-radius:50%;
  background:var(--rank-c,var(--line));
  box-shadow:0 0 10px var(--rank-c,transparent)}
.ggroup__n{color:var(--txt-dim);font-weight:700}
.groster{display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.gmember{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:12px;background:var(--ink-3);border:1px solid var(--line);
  border-left-width:3px;border-left-color:var(--rank-c,var(--line));
  transition:transform .14s ease,border-color .14s ease}
.gmember:hover{transform:translateY(-1px)}
.gmember.is-me{
  background:linear-gradient(90deg,var(--g-acc-soft),var(--ink-3) 65%);
  border-color:color-mix(in srgb,var(--g-acc) 45%,var(--line));
  border-left-color:var(--rank-c,var(--g-acc))}
.gmember__ava{width:38px;height:38px;border-radius:50%;object-fit:cover;
  flex-shrink:0;border:2px solid var(--rank-c,var(--line));
  box-shadow:0 0 10px color-mix(in srgb,var(--rank-c,transparent) 40%,transparent)}
.gmember__id{display:flex;flex-direction:column;min-width:0}
.gmember__id b{font-size:13px;font-weight:800;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gmember__rank{font-size:10.5px;font-weight:800;letter-spacing:.04em}
.gmember__me{display:inline-block;padding:1px 6px;border-radius:999px;
  font-size:.66rem;vertical-align:middle;
  background:var(--g-acc);color:var(--g-on-acc)}
.gmember__prog{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:var(--txt-dim);white-space:nowrap}
.gmember__prog img{width:16px;height:16px;object-fit:contain;
  image-rendering:pixelated}
.gmember__champ{padding:1px 6px;border-radius:999px;font-weight:800;
  background:rgba(255,213,74,.14);color:var(--shiny)}
.gmember__act{display:inline-flex;gap:6px;align-items:center}
.grank{padding:5px 8px;font:inherit;font-size:11px;background:var(--ink);
  border:1px solid var(--line);border-radius:8px;color:var(--txt)}
.gkick{width:28px;height:28px;font-size:16px;line-height:1;cursor:pointer;
  background:var(--ink);border:1px solid var(--line);border-radius:8px;
  color:var(--txt-dim)}
.gkick:hover{color:#fff;background:var(--red-dk);border-color:var(--red)}

/* ── The rank ladder ─────────────────────────────────── */
.granks{display:grid;gap:10px}
.grank-row{
  padding:12px 14px;border-radius:12px;
  background:var(--ink-3);border:1px solid var(--line);
  /* Marked down the left in the rank's own colour, so the ladder
     reads as a ladder rather than as a list of identical boxes. */
  border-left:3px solid var(--rank-c,var(--line))}
.grank-row.is-leader{
  border-color:rgba(255,204,51,.45);border-left-color:var(--rank-c,var(--yellow));
  background:linear-gradient(135deg,rgba(255,204,51,.08),var(--ink-3))}
.grank-row__head{display:flex;align-items:center;gap:10px;margin-bottom:9px;
  flex-wrap:wrap}
.grank-row.is-leader .grank-row__head{margin-bottom:0}
.grank-row__head b{font-size:1rem;color:var(--rank-c,var(--txt))}
.grank-name{flex:1;max-width:220px;padding:5px 9px;font-size:.92rem}
.grank-row__n{margin-left:auto;font-size:.8rem;color:var(--txt-dim);
  white-space:nowrap}
.grank-del{
  flex-shrink:0;width:26px;height:26px;border-radius:7px;
  border:1px solid var(--line);background:none;
  color:var(--txt-dim);font-size:16px;line-height:1;cursor:pointer}
.grank-del:hover{color:#fff;background:var(--red-dk);border-color:var(--red)}
/* Moving a rank up or down. The list is the order - first is
   highest - so these are how a guild arranges itself. */
.grank-move{flex-shrink:0;display:inline-flex;gap:2px}
.grank-arrow{width:26px;height:26px;border-radius:7px;
  border:1px solid var(--line);background:none;
  color:var(--txt-dim);font-size:13px;line-height:1;cursor:pointer}
.grank-arrow:hover:not(:disabled){color:var(--txt);
  border-color:var(--g-acc-hi);background:var(--g-acc-soft)}
.grank-arrow:disabled{opacity:.3;cursor:default}

.gperms{display:flex;flex-wrap:wrap;gap:7px}
.gperm{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-size:.82rem;transition:background .14s ease,border-color .14s ease}
.gperm input{margin:0;cursor:pointer;accent-color:var(--g-acc)}
.gperm:hover{border-color:rgba(255,255,255,.3)}
.gperm.is-on{background:var(--g-acc-soft);color:var(--g-acc-hi);
  border-color:color-mix(in srgb,var(--g-acc) 55%,transparent)}
.granks__act{display:flex;gap:10px;align-items:center;justify-content:flex-end;
  margin-top:6px;flex-wrap:wrap}

/* ── Activity ────────────────────────────────────────── */
.glog{display:flex;flex-direction:column;gap:4px}
.glog__row{display:flex;align-items:center;gap:10px;padding:7px 10px;
  border-radius:10px;font-size:.86rem;background:rgba(255,255,255,.025)}
.glog--full .glog__row:nth-child(odd){background:rgba(255,255,255,.045)}
.glog__icon{width:26px;height:26px;image-rendering:pixelated;flex-shrink:0}
.glog__what{flex:1;min-width:0;overflow-wrap:anywhere}
.glog__when{flex-shrink:0;font-size:.74rem;color:var(--txt-dim);
  white-space:nowrap}

/* ── Settings ────────────────────────────────────────── */
.gsettings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;align-items:start}
.gsettings > .gpanel:first-child{grid-column:1/-1}

/* The colour picker: each type by its own label sprite. */
.gswatches{display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.gswatch{
  display:block;padding:3px;border-radius:999px;cursor:pointer;
  background:var(--ink);border:2px solid transparent;
  transition:transform .14s ease,box-shadow .14s ease}
.gswatch img{display:block;width:100%;height:auto}
.gswatch:hover{transform:translateY(-1px)}
.gswatch.is-on{border-color:#fff;
  box-shadow:0 0 0 2px var(--g-acc),
             0 0 16px color-mix(in srgb,var(--g-acc) 70%,transparent)}
.gswatch__classic{
  display:flex;align-items:center;justify-content:center;aspect-ratio:5/1;
  border-radius:999px;color:#fff;font-size:10px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 0 3px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.8);
  background:linear-gradient(90deg,#EE1515 0 50%,#FFCB05 50% 100%)}
.gswatches--static{grid-template-columns:repeat(2,minmax(0,130px))}
.gswatches--static .gswatch{cursor:default}

/* What the guild asks of a newcomer. Shown to every member, not only
   to whoever may change it. */
.gjoinbar{font-size:12px}
.gjoinbar__head{display:flex;align-items:baseline;gap:8px}
.gjoinbar__lbl{font-size:.76rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--g-acc-hi)}
.gjoinbar__head b{margin-left:auto}
.gjoinbar__opts{display:flex;flex-wrap:wrap;gap:6px}
.gjoinbar__opt{
  padding:5px 11px;font:inherit;font-size:11px;font-weight:700;
  background:var(--ink-2);color:var(--txt-dim);
  border:1px solid var(--line);border-radius:999px;
  cursor:pointer;transition:.12s}
.gjoinbar__opt:hover{color:var(--txt);border-color:var(--g-acc-hi)}
.gjoinbar__opt.is-on{
  background:var(--g-acc);color:var(--g-on-acc);border-color:transparent}

.gdanger{border-color:rgba(238,21,21,.35);
  background:linear-gradient(180deg,rgba(238,21,21,.08),var(--ink-3) 70%)}
.gdanger .gpanel__title{color:var(--red-lt)}
.gdanger .gbtn{align-self:flex-start}

/* ── No guild: found one, or find one ────────────────── */
.gnone{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:16px;align-items:start}
.gfound{
  display:flex;flex-direction:column;gap:10px;padding:16px;
  border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
.ghero--preview{margin-bottom:4px}
.ghero--preview .ghero__emblem{width:58px;height:58px;border-radius:17px}
.ghero--preview .ghero__emblem img{width:40px;height:40px}
.gstep{display:flex;align-items:center;gap:8px;margin-top:6px}
.gstep h4{margin:0;font-size:13px;font-weight:800}
.gstep__n{width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;font-size:12px;font-weight:900;
  background:var(--g-acc);color:var(--g-on-acc)}
.gfound__row{display:flex;gap:8px}
.gfound__go{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:12px;
  border-top:1px solid var(--line)}
.gfound__cost{font-size:12px;color:var(--txt-dim)}
.gfound__cost b{color:var(--g-acc-hi)}

.glogos{display:flex;gap:6px;flex-wrap:wrap}
.glogo{padding:5px;background:var(--ink);border:2px solid var(--line);
  border-radius:10px;cursor:pointer;transition:transform .12s ease}
.glogo:hover{transform:translateY(-1px)}
.glogo img{width:30px;height:30px;image-rendering:pixelated;display:block}
.guild .glogo.is-on{border-color:var(--g-acc-hi);background:var(--g-acc-soft)}
.guild .gemblem__tab:hover{border-color:var(--g-acc-hi)}
.guild .gemblem__tab.is-on{background:var(--g-acc);border-color:var(--g-acc);
  color:var(--g-on-acc)}

/* The directory: every guild in its own colours, so the list reads
   as a row of banners rather than a table. */
.gdir{display:flex;flex-direction:column;gap:8px}
.gcard{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:48px minmax(0,1fr) 84px auto;
  align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--g-acc) 20%,var(--ink-2)),var(--ink-2) 55%,
    color-mix(in srgb,var(--g-acc2) 12%,var(--ink-2)));
  border:1px solid color-mix(in srgb,var(--g-acc) 30%,var(--line));
  transition:transform .14s ease}
.gcard:hover{transform:translateY(-1px)}
.gcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(var(--g-acc),var(--g-acc2))}
.gcard__emblem{width:48px;height:48px;border-radius:14px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--g-acc) 26%,transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.gcard__emblem img{width:34px;height:34px;image-rendering:pixelated}
.gcard__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.gcard__id b{font-size:13.5px;font-weight:800;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gcard__bar{font-size:11px;color:var(--txt-dim)}
.gcard__fill{display:flex;flex-direction:column;gap:4px;font-size:11px;
  color:var(--txt-dim);text-align:right;font-variant-numeric:tabular-nums}
.gcard__fill i{display:block;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.gcard__fill b{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--g-acc),var(--g-acc2))}

/* ── The note at the bottom of the screen ───────────── */
.gtoast{
  position:fixed;left:50%;bottom:24px;z-index:250;
  max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;
  background:rgba(22,27,35,.95);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);
  font-size:13px;font-weight:600;color:var(--txt);
  opacity:0;pointer-events:none;transform:translate(-50%,16px);
  transition:opacity .2s ease,transform .2s ease}
.gtoast.is-show{opacity:1;transform:translate(-50%,0)}
.gtoast.is-good{border-color:rgba(63,217,138,.55)}
.gtoast.is-bad{border-color:rgba(255,78,78,.6)}

@media (max-width:860px){
  .gover,.gsettings,.gnone{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ghero{padding:14px}
  .ghero__main{flex-wrap:wrap}
  .ghero__emblem{width:56px;height:56px;border-radius:16px}
  .ghero__emblem img{width:40px;height:40px}
  .ghero__name{font-size:17px}
  .ghero__act{width:100%}
  .gbtn--hero{flex:1}
  .ghero__stats{gap:6px}
  .gstat{grid-template-columns:minmax(0,1fr);padding:7px 8px}
  .gstat img{display:none}
  .gstat b{font-size:13px}
  .gtab{flex:0 0 auto;padding:7px 11px;font-size:.84rem}
  .groster{grid-template-columns:minmax(0,1fr)}
  .gmember{flex-wrap:wrap}
  .gmember__prog{margin-left:auto}
  .gmember__act{width:100%;justify-content:flex-end}
  .gperm{padding:4px 9px;font-size:.76rem}
  .grank-name{max-width:none}
  .gcard{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}
  .gcard__emblem{width:40px;height:40px;border-radius:12px}
  .gcard__emblem img{width:28px;height:28px}
  .gcard__fill{grid-column:2/3;grid-row:2;text-align:left}
  .gcard__join{grid-row:1/3;grid-column:3}
  .gswatches{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .ghero__emblem,.gevent.is-on,.gpage{animation:none}
  .gbtn,.gmember,.gcard,.gevent,.gswatch,.glogo{transition:none}
  .gbtn:hover:not(:disabled),.gmember:hover,.gcard:hover,.gevent:hover,
  .gswatch:hover,.glogo:hover{transform:none}
}

/* ============================================================
   RANKED SEASON PRIZE AND RIBBONS
   The Arena's Season page (what first place wins, how far you are
   from qualifying, who won before), the reveal when a season is won,
   and the Ribbons page of a Pokemon's summary. The ribbon art is the
   official set in sprites/ribbons; three of them are 40px pixel art.
   ============================================================ */
.arsz{display:flex;flex-direction:column;gap:4px}
.arsz-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  padding:16px;border-radius:14px;border:1px solid rgba(242,201,76,.35);
  background:radial-gradient(360px 140px at 12% 30%,rgba(242,201,76,.2),transparent 70%),var(--ink-2)}
.arsz-hero__rib{width:88px;height:88px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(242,201,76,.35));
  animation:arszFloat 3.2s ease-in-out infinite}
.arsz-hero__txt{min-width:0}
.arsz-hero__eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.arsz-hero h3{margin:3px 0 6px;font:800 22px/1.15 var(--display)}
.arsz-hero p{margin:0;font-size:13px;line-height:1.5;color:var(--txt-dim)}
.arsz-hero p b{color:var(--txt)}
.arsz-rules{margin:10px 0 0;padding:0 0 0 18px;display:grid;gap:4px;font-size:12.5px;color:var(--txt-dim)}
.arsz-progs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.arsz-prog{padding:10px 12px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line)}
.arsz-prog__row{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;font-size:12.5px}
.arsz-prog__row span{color:var(--txt-dim);font-variant-numeric:tabular-nums}
.arsz-prog.is-done{border-color:rgba(63,217,138,.45)}
.arsz-prog.is-done .arsz-prog__row span{color:var(--ok)}
.arsz-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.arsz-champ{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;
  background:var(--ink-2);border:1px solid var(--line)}
.arsz-champ__mon{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;flex:0 0 auto}
.arsz-champ b{display:block;font-size:13.5px}
.arsz-champ small{font-size:11.5px;color:var(--txt-dim)}
@keyframes arszFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@media (max-width:520px){
  .arsz-hero{grid-template-columns:1fr;justify-items:center;text-align:center}
  .arsz-progs{grid-template-columns:1fr}
}

/* The reveal: the fossil's arrival, with the ribbon pinned on. */
.reward__eyebrow{margin:0 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--yellow)}
.reward--season .reward__ribbon{position:absolute;right:-6px;bottom:-4px;width:58px;height:58px;
  object-fit:contain;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
  animation:seasonRibbon .6s 2.2s cubic-bezier(.2,.8,.2,1.3) forwards}
@keyframes seasonRibbon{from{opacity:0;transform:scale(.3) rotate(-30deg)}
  to{opacity:1;transform:scale(1) rotate(-8deg)}}

/* A Pokemon's ribbons, on their own page of the summary. */
.sumrib__empty{margin:8px 0;font-size:12.5px;line-height:1.5;color:var(--txt-dim)}
.sumrib__list{display:flex;flex-direction:column;gap:8px}
.sumrib__it{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;
  padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.sumrib__it.is-season{border-color:rgba(242,201,76,.45);
  background:linear-gradient(90deg,rgba(242,201,76,.12),transparent 70%)}
.sumrib__ico{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.sumrib__ico.is-pixel{width:40px;height:40px;margin:7px;image-rendering:pixelated}
.sumrib__txt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;color:var(--txt-dim)}
.sumrib__txt b{font-size:13.5px;color:var(--txt)}
.sumrib__detail{font-weight:700;color:var(--yellow)}

@media (prefers-reduced-motion:reduce){
  .arsz-hero__rib{animation:none}
  .reward--season .reward__ribbon{animation:none;opacity:1;transform:rotate(-8deg)}
}