/* ============================================================
   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;

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

  /* Type colours (official) */
  --t-normal:#A8A77A; --t-fire:#EE8130;   --t-water:#6390F0;
  --t-electric:#F7D02C;--t-grass:#7AC74C; --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:60px;
  --sidebar-w-open:212px;

  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:'SF Mono',Consolas,'Courier New',monospace;
}

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

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

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 1920px tile repeated, translated one tile-width. */
.emerald__layer{
  position:absolute;left:0;
  width:200%;height:100%;
  background-repeat:repeat-x;
  background-size:1920px 100%;
  animation:emeraldSlide linear infinite;
  will-change:transform;
}
@keyframes emeraldSlide{
  from{transform:translateX(-1920px)}
  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}

@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 ───────────────────────────────────────── */
#app{
  position:relative;z-index:1;
  height:100vh;height:100dvh;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "side head"
    "side main"
    "side chat";
  gap:10px;
  padding:10px;
  overflow:hidden;
}

/* ══════════ HEADER ══════════ */
.topbar{
  grid-area:head;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;
  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;
}
.topbar__left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar__right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.location{min-width:0}
.location__label{
  display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700
}
.location__name{
  font-size:clamp(15px,2.1vw,21px);font-weight:800;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.location__terrain{
  display:block;font-size:11px;color:var(--txt-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30ch
}

.routenav{display:flex;gap:5px;flex-shrink:0}
.routenav__btn{
  width:34px;height:34px;padding:8px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);transition:.16s;
}
.routenav__btn:hover:not(:disabled){background:var(--red);border-color:var(--red-lt);transform:translateY(-1px)}
.routenav__btn:active:not(:disabled){transform:translateY(0)}
.routenav__btn:disabled{opacity:.3;cursor:not-allowed}
.routenav__btn--accent{background:linear-gradient(150deg,var(--red),var(--red-dk));border-color:var(--red-lt)}
.routenav__btn--accent:hover:not(:disabled){filter:brightness(1.18)}

.iconbtn{
  width:40px;height:40px;padding:7px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
  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--rotom .lens{fill:rgba(255,123,84,.3)}
.iconbtn--rotom .bar{fill:currentColor;stroke:none}
.iconbtn--dex{color:var(--red-lt)}
.iconbtn--dex:hover{background:rgba(238,21,21,.14);border-color:var(--red-lt)}
.iconbtn--dex .lens{fill:rgba(106,180,255,.35)}
.iconbtn--dex .led{fill:currentColor;stroke:none}
.iconbtn--dex .bar{fill:rgba(255,255,255,.16);stroke:none}
.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:has(.ico-trophy){color:var(--yellow)}
.iconbtn:has(.ico-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}

/* ══════════ SIDEBAR ══════════ */
.sidebar{
  grid-area:side;
  display:flex;flex-direction:column;gap:8px;
  padding:9px 8px;
  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;
}
.sidebar.is-open{width:var(--sidebar-w-open)}

.sidebar__toggle{
  width:42px;height:42px;padding:10px;flex-shrink:0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-3);
  transition:.16s;
}
.sidebar__toggle:hover{background:var(--red);border-color:var(--red-lt)}

.sidebar__nav{display:flex;flex-direction:column;gap:5px;overflow:hidden}
.sidenav{
  display:flex;align-items:center;gap:11px;
  padding:9px;height:42px;flex-shrink:0;
  border-radius:var(--r-sm);border:1px solid transparent;
  transition:.16s;white-space:nowrap;
}
.sidenav:hover{background:var(--ink-3);border-color:var(--line)}
/* `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}

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

/* ══════════ MAIN STAGE ══════════ */
.stage{
  grid-area:main;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.6vh,18px);
  min-height:0;                  /* critical for grid overflow */
  position:relative;
}

/* Stats */
.stats{
  display:flex;gap:7px;flex-wrap:wrap;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);padding:7px 9px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  flex-shrink:0;
}
.stat{
  display:flex;flex-direction:column;align-items:center;
  min-width:66px;padding:3px 9px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
}
.stat__val{font-size:clamp(14px,2vw,19px);font-weight:800;font-family:var(--mono);line-height:1.2}
.stat__key{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.stat--shiny .stat__val{color:var(--shiny)}
.stat--shadow .stat__val{color:var(--shadow)}

.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);
}

/* Pokéball clicker */
.pokeball{
  --sz:clamp(112px,20vh,186px);
  position:relative;width:var(--sz);height:var(--sz);
  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 */
.team{display:flex;align-items:center;gap:8px;flex-shrink:0}
.team__slots{display:flex;gap:5px}
.slot{
  width:clamp(38px,5.4vh,50px);height:clamp(38px,5.4vh,50px);
  border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-brd);
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:.16s;cursor:pointer;
}
.slot:hover{border-color:var(--red-lt);transform:translateY(-2px)}
.slot img{width:88%;height:88%;object-fit:contain;image-rendering:pixelated}
.slot.is-empty::after{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--line)}
.slot__hp{
  position:absolute;bottom:3px;left:12%;width:76%;height:3px;
  border-radius:2px;background:rgba(0,0,0,.5);overflow:hidden;
}
.slot__hp i{display:block;height:100%;background:var(--ok);border-radius:2px}
.slot.is-shiny{box-shadow:0 0 0 1px var(--shiny),0 0 12px rgba(255,213,74,.4)}
.slot.is-shadow{box-shadow:0 0 0 1px var(--shadow),0 0 12px rgba(155,92,255,.4)}

.team__pc{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:clamp(38px,5.4vh,50px);height:clamp(38px,5.4vh,50px);
  padding:7px 5px 5px;
  background:linear-gradient(160deg,var(--blue),var(--blue-dk));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);
  transition:.16s;
}
.team__pc:hover{transform:translateY(-2px);filter:brightness(1.2)}
.team__pc svg{width:17px;height:17px;stroke-width:1.9}
.team__pc span{font-size:8px;font-weight:800;letter-spacing:.06em}

/* ══════════ CHAT ══════════ */
.chat{
  grid-area:chat;
  display:flex;flex-direction:column;
  height:clamp(140px,22vh,196px);
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;transition:height .22s cubic-bezier(.4,0,.2,1);
}
.chat.is-collapsed{height:40px}
.chat.is-collapsed .chat__log,.chat.is-collapsed .chat__form{display:none}
.chat.is-collapsed .chat__collapse svg{transform:rotate(180deg)}

.chat__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px;border-bottom:1px solid var(--line);flex-shrink:0;height:40px;
}
.chat__tabs{display:flex;gap:3px}
.chattab{
  padding:6px 15px;font-size:12px;font-weight:700;color:var(--txt-dim);
  border-radius:var(--r-sm) var(--r-sm) 0 0;transition:.16s;position:relative;
}
.chattab:hover{color:var(--txt)}
.chattab.is-active{color:var(--txt)}
.chattab.is-active::after{
  content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--red);border-radius:2px 2px 0 0;
}
.chat__collapse{width:26px;height:26px;padding:5px;color:var(--txt-dim);border-radius:6px}
.chat__collapse:hover{background:var(--ink-3);color:var(--txt)}
.chat__collapse svg{transition:transform .22s}

.chat__log{
  flex:1;overflow-y:auto;padding:7px 11px;
  display:flex;flex-direction:column;gap:4px;
  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{font-size:12px;line-height:1.45;word-break:break-word}
.msg__who{font-weight:700;color:var(--yellow)}
.msg__who--me{color:var(--red-lt)}
.msg--sys{color:var(--txt-dim);font-style:italic;font-size:11px}

/* A roaming legendary is the one message nobody should scroll past,
   so it is the one that is not small, dim and italic. */
.msg--roam{color:var(--yellow);font-style:normal;font-weight:700;font-size:12.5px;
  padding:6px 9px;margin:3px 0;border-left:3px solid var(--yellow);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(90deg,rgba(255,203,5,.16),rgba(255,203,5,.02));
  animation:msgflash 1.6s ease-out}
/* A guild clearing a raid boss is announced the same way, in the
   colour the raid screen uses. */
.msg--raid{color:var(--shadow);font-style:normal;font-weight:700;font-size:12.5px;
  padding:6px 9px;margin:3px 0;border-left:3px solid var(--shadow);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(90deg,rgba(155,92,255,.18),rgba(155,92,255,.02));
  animation:msgflash 1.6s ease-out}
@keyframes msgflash{
  0%,18%{background-color:rgba(255,255,255,.22)}
  100%{background-color:transparent}
}

.chat__form{display:flex;gap:6px;padding:7px 8px;border-top:1px solid var(--line);flex-shrink:0}
.chat__input{
  flex:1;min-width:0;padding:7px 12px;font-size:13px;color:var(--txt);
  background:var(--ink);border:1px solid var(--line);border-radius:99px;outline:none;
  transition:border-color .16s;
}
.chat__input:focus{border-color:var(--red)}
.chat__input::placeholder{color:var(--txt-dim)}
.chat__send{
  width:34px;height:34px;padding:8px;flex-shrink:0;
  background:var(--red);border-radius:50%;transition:.16s;
}
.chat__send:hover{background:var(--red-lt);transform:scale(1.08)}

/* ══════════ 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);
}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}}

.modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 17px;border-bottom:1px solid var(--line);flex-shrink:0;
  background:linear-gradient(180deg,rgba(238,21,21,.11),transparent);
}
.modal__title{font-size:16px;font-weight:800}
.modal__x{width:30px;height:30px;padding:7px;border-radius:7px;color:var(--txt-dim)}
.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}

/* ══════════ PC STORAGE ══════════ */
.pc{display:flex;flex-direction:column;gap:12px}

.pc__bank{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(42,117,187,.2),rgba(27,79,134,.12));
  border:1px solid rgba(42,117,187,.35);
}
.pc__bank-ico{font-size:22px}
.pc__bank-info{flex:1;min-width:140px}
.pc__bank-label{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-dim);font-weight:700}
.pc__bank-val{font-size:19px;font-weight:800;font-family:var(--mono);color:var(--yellow)}
.pc__bank-actions{display:flex;gap:6px}
.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)}

/* Filters */
.pc__filters{
  display:grid;gap:8px;padding:12px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
}
.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)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.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)}

/* Box header */
.pc__boxbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc__boxnav{display:flex;align-items:center;gap:8px}
.pc__boxnav button{
  width:30px;height:30px;padding:7px;border-radius:7px;
  background:var(--ink-3);border:1px solid var(--line);transition:.16s;
}
.pc__boxnav button:hover{background:var(--blue)}
.pc__boxname{font-size:14px;font-weight:800;min-width:112px;text-align:center}
.pc__count{font-size:11px;color:var(--txt-dim);font-family:var(--mono)}

/* Grid */
.pc__grid{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  padding:11px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);min-height:190px;align-content:start;
}
.pcmon{
  aspect-ratio:1;border-radius:8px;position:relative;
  background:var(--ink-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:.13s;cursor:pointer;
}
.pcmon:hover{transform:scale(1.09);border-color:var(--red-lt);z-index:2}
.pcmon img{width:90%;height:90%;object-fit:contain;image-rendering:pixelated}
.pcmon.is-shiny{border-color:var(--shiny);background:rgba(255,213,74,.1)}
.pcmon.is-shadow{border-color:var(--shadow);background:rgba(155,92,255,.1)}
.pcmon__tag{
  position:absolute;top:2px;right:3px;font-size:8px;font-weight:800;
  text-shadow:0 1px 2px #000;
}
.pc__empty{
  grid-column:1/-1;text-align:center;padding:34px 12px;
  color:var(--txt-dim);font-size:12px;
}

/* Detail */
.pcdetail{
  display:grid;grid-template-columns:110px 1fr;gap:14px;
  padding:13px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
}
.pcdetail__art{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px;background:var(--ink-3);border-radius:var(--r-sm);
}
.pcdetail__art img{width:82px;height:82px;object-fit:contain;image-rendering:pixelated}
.pcdetail__nick{font-size:13px;font-weight:800;text-align:center}
.pcdetail__sp{font-size:10px;color:var(--txt-dim)}
.pcdetail__body{display:flex;flex-direction:column;gap:9px;min-width:0}
.pcdetail__row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.kv{font-size:11px;color:var(--txt-dim)}
.kv b{color:var(--txt);font-family:var(--mono);font-weight:700}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.statrow{display:flex;flex-direction:column;gap:2px}
.statrow__k{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-dim);font-weight:700}
.statrow__bar{height:5px;border-radius:3px;background:var(--ink-3);overflow:hidden}
.statrow__bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--red),var(--yellow))}
.statrow__v{font-size:10px;font-family:var(--mono);color:var(--txt)}
.pcdetail__acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:860px){
  :root{--sidebar-w:0px}
  #app{
    grid-template-columns:1fr;
    grid-template-areas:"head" "main" "chat";
    gap:8px;padding:8px;
  }
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:60;
    width:var(--sidebar-w-open);
    transform:translateX(calc(-1 * var(--sidebar-w-open)));
    border-radius:0 var(--r) var(--r) 0;
    transition:transform .24s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.is-open{transform:translateX(0)}
  .sidebar .sidenav__txt{opacity:1}
  .sidebar__toggle{
    position:absolute;right:-52px;top:9px;
    background:var(--glass);backdrop-filter:blur(14px);
  }
  .location__terrain{display:none}
  .chat{height:clamp(118px,17vh,152px)}
  .pcdetail{grid-template-columns:1fr}
  .pcdetail__art{flex-direction:row;justify-content:center;gap:12px}
}

@media (max-width:520px){
  .topbar{padding:7px 10px;gap:8px}
  .location__label{display:none}
  .location__name{font-size:14px}
  .routenav__btn{width:30px;height:30px;padding:7px}
  .iconbtn{width:35px;height:35px;padding:6px}
  .stat{min-width:54px;padding:2px 6px}
  .stats{padding:5px 6px;gap:4px}
  .clickhint{display:none}
  .pc__filters{grid-template-columns:1fr 1fr}
  .fld--range{grid-column:span 2}
  .pc__grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}
}

@media (max-height:620px){
  .stats{padding:4px 7px}
  .clickhint{display:none}
  .chat{height:clamp(100px,15vh,130px)}
}

@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);
}
.bside{display:flex;align-items:center;gap:clamp(8px,3vw,32px)}
.bside--foe{justify-content:flex-start}
.bside--me{justify-content:flex-end;flex-direction:row}

.bmon{position:relative;flex-shrink:0}
.bmon img{
  width:clamp(96px,19vh,190px);height:clamp(96px,19vh,190px);
  object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.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))}
.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)}}

/* Info cards */
.bcard{
  min-width:clamp(152px,26vw,238px);
  padding:8px 12px;border-radius:10px;
  background:rgba(18,24,20,.86);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.bcard__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bcard__name{font-size:13px;font-weight:800;letter-spacing:.02em}
.bcard__lv{font-size:11px;font-family:var(--mono);color:var(--txt-dim)}
.bcard__hpnum{font-size:10px;font-family:var(--mono);color:var(--txt-dim)}
.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;
}
.hpbar{
  height:7px;margin:5px 0 3px;border-radius:4px;
  background:rgba(0,0,0,.55);overflow:hidden;
  border:1px solid rgba(0,0,0,.4);
}
.hpbar i{
  display:block;height:100%;border-radius:4px;width:100%;
  transition:width .5s cubic-bezier(.4,0,.2,1),background .3s;
}
.hpbar i.is-ok{background:linear-gradient(90deg,#3FD98A,#5BE8A0)}
.hpbar i.is-warn{background:linear-gradient(90deg,#F0C040,#FFD866)}
.hpbar i.is-low{background:linear-gradient(90deg,#E8503C,#FF6B54)}
.expbar{height:3px;margin-top:4px;border-radius:2px;background:rgba(0,0,0,.5);overflow:hidden}
.expbar i{display:block;height:100%;background:#4FC3F7;transition:width .5s ease;width:0}

/* Bottom UI */
.battle__ui{
  position:relative;flex-shrink:0;
  display:grid;grid-template-columns:1fr auto;gap:10px;
  padding:12px clamp(12px,4vw,52px) clamp(14px,3vh,26px);
}
.blog{
  min-height:clamp(72px,13vh,104px);max-height:clamp(72px,13vh,104px);
  overflow-y:auto;padding:10px 14px;
  background:rgba(10,14,12,.9);
  border:2px solid rgba(255,255,255,.2);border-radius:10px;
  font-size:13px;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}

.bmenu{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
  align-content:start;min-width:clamp(160px,24vw,232px);
}
.bbtn{
  padding:11px 8px;font-size:12px;font-weight:800;letter-spacing:.05em;
  background:rgba(18,24,20,.9);
  border:2px solid rgba(255,255,255,.2);border-radius:9px;
  transition:.14s;
}
.bbtn:hover{background:var(--red);border-color:var(--red-lt);transform:translateY(-2px)}
.bbtn--fight{background:linear-gradient(150deg,var(--red),var(--red-dk));border-color:var(--red-lt)}
.bbtn--fight:hover{filter:brightness(1.2)}
.bbtn--run:hover{background:var(--ink-3)}

.bmoves{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:7px;
}
.bmoves[hidden]{display:none}
.mvbtn{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:9px 12px;border-radius:9px;
  background:rgba(18,24,20,.9);
  border:2px solid rgba(255,255,255,.2);
  transition:.14s;text-align:left;
}
.mvbtn:hover:not(:disabled){border-color:var(--red-lt);transform:translateY(-2px)}
.mvbtn:disabled{opacity:.4;cursor:not-allowed}
.mvbtn__name{font-size:12px;font-weight:800}
.mvbtn__meta{display:flex;align-items:center;gap:7px;width:100%}
.mvbtn__pp{font-size:10px;font-family:var(--mono);color:var(--txt-dim);margin-left:auto}
.mvbtn--back{align-items:center;justify-content:center;font-size:12px;font-weight:700}

@media (max-width:720px){
  .battle__ui{grid-template-columns:1fr;gap:8px}
  .bmenu{grid-template-columns:repeat(4,1fr);min-width:0}
  .bbtn{padding:10px 4px;font-size:11px}
  .bcard{min-width:132px;padding:6px 9px}
  .bmoves{grid-template-columns:1fr 1fr}
  .blog{min-height:62px;max-height:62px;font-size:12px}
}
@media (max-height:600px){
  .blog{min-height:54px;max-height:54px}
  .bmon img{width:clamp(62px,12vh,92px);height:clamp(62px,12vh,92px)}
}

/* ============================================================
   BAG
   ============================================================ */
.bag{display:flex;flex-direction:column;gap:14px}
.bag__head{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim);padding-bottom:5px;border-bottom:1px solid var(--line);
}
.bag__grid{display:flex;flex-direction:column;gap:5px}
.bagitem{
  display:flex;align-items:center;gap:11px;
  padding:8px 11px;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line);
}
.bagitem__ico{width:26px;height:26px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.bagitem__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bagitem__name{font-size:12px;font-weight:700}
.bagitem__txt{
  font-size:10px;color:var(--txt-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch;
}
.bagitem__n{font-size:12px;font-family:var(--mono);color:var(--yellow);font-weight:700}
.bagitem .btn{padding:5px 12px;font-size:11px}

/* Ability line on the battle cards */
.bcard__abil{
  font-size:9px;color:var(--blue);font-weight:700;
  letter-spacing:.03em;min-height:11px;
}

/* ============================================================
   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. */
.battle__bg.is-mountain .battle__photo,
.battle__bg.is-volcano .battle__photo,
.battle__bg.is-ice .battle__photo{object-position:center 30%}

/* 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}

/* ── Account chip in the header ───────────────────────── */
.account{
  display:flex;align-items:center;gap:7px;
  padding:5px 6px 5px 11px;margin-right:2px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:99px;
}
.account[hidden]{display:none}
.account__name{font-size:12px;font-weight:700;max-width:14ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account__sync{font-size:9px;color:var(--red-lt);font-weight:700;letter-spacing:.05em}
.account__out{
  width:24px;height:24px;padding:5px;border-radius:50%;
  color:var(--txt-dim);transition:.16s;
}
.account__out:hover{background:var(--red);color:#fff}
.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)}
@media (max-width:640px){
  .account__name{display:none}
  .account{padding:5px}
}


/* ── 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}
.account.is-guest{border-color:var(--red);background:rgba(238,21,21,.14)}

.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}

/* ── Pokemon info screen ──────────────────────────────── */
.mi{display:flex;flex-direction:column;gap:14px}
.mi__head{display:flex;gap:16px;align-items:flex-start}
.mi__art{
  width:104px;height:104px;flex-shrink:0;border-radius:var(--r-sm);
  background:var(--ink);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.mi__art img{width:88%;height:88%;object-fit:contain;image-rendering:pixelated}
.mi__art.is-shiny{border-color:var(--shiny);box-shadow:0 0 14px rgba(255,213,74,.3)}
.mi__art.is-shadow{border-color:var(--shadow);box-shadow:0 0 14px rgba(155,92,255,.3)}
.mi__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mi__namerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mi__name{font-size:19px;font-weight:800}
.mi__male{color:#6FA8DC;font-size:17px;font-weight:700}
.mi__female{color:#E88AAE;font-size:17px;font-weight:700}
.mi__none{color:var(--txt-dim)}
.mi__species{font-size:12px;color:var(--txt-dim)}
.mi__types{display:flex;gap:5px}
.mi__tag{font-size:9px;font-weight:800;padding:2px 8px;border-radius:99px}
.mi__tag--shiny{background:var(--shiny);color:#3A2E00}
.mi__tag--shadow{background:var(--shadow);color:#fff}
.mi__rename{align-self:flex-start;padding:5px 12px;font-size:11px;margin-top:3px}

.mi__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.mi__kv{
  display:flex;flex-direction:column;gap:2px;padding:8px 11px;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
}
.mi__kv span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700}
.mi__kv b{font-size:12px;font-weight:700}
.mi__up{color:var(--ok);font-size:11px}
.mi__down{color:#FF7B7B;font-size:11px}
.mi__neutral{color:var(--txt-dim);font-size:11px;font-weight:400}
.mi__abiltext{font-size:11px;line-height:1.5;color:var(--txt-dim);
  padding:8px 11px;background:var(--ink);border-radius:var(--r-sm)}

.mi__sub{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:800;
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:5px;
}
.mi__totals{font-size:10px;letter-spacing:0;text-transform:none;font-family:var(--mono)}
.mi__statlegend,.mi__stat{
  display:grid;grid-template-columns:70px 42px 1fr 30px 34px;
  align-items:center;gap:8px;
}
.mi__statlegend{font-size:9px;color:var(--txt-dim);font-weight:700;padding:0 0 2px}
.mi__statlegend span{text-align:right}
.mi__stats{display:flex;flex-direction:column;gap:5px}
.mi__stat{font-size:12px}
.mi__statk{color:var(--txt-dim);font-size:11px}
.mi__statv{font-family:var(--mono);font-weight:800;text-align:right}
.mi__bar{height:6px;border-radius:3px;background:var(--ink);overflow:hidden}
.mi__bar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--ok))}
.mi__stat.is-up .mi__statv{color:var(--ok)}
.mi__stat.is-down .mi__statv{color:#FF7B7B}
.mi__stat.is-up .mi__bar i{background:linear-gradient(90deg,var(--ok),#7BE8A8)}
.mi__iv,.mi__ev{font-family:var(--mono);font-size:10px;text-align:right}
.mi__iv{color:var(--yellow)}
.mi__ev{color:var(--blue)}

.mi__moves{display:flex;flex-direction:column;gap:5px}
.mi__move{
  display:grid;grid-template-columns:1fr 74px 30px 38px 38px 52px;
  align-items:center;gap:8px;padding:7px 11px;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12px;
}
.mi__movename{font-weight:700}
.mi__movenum{font-family:var(--mono);font-size:11px;color:var(--txt-dim);text-align:right}
.mi__movepp{font-family:var(--mono);font-size:10px;color:var(--blue);text-align:right}
.mi__empty{font-size:12px;color:var(--txt-dim);padding:10px}
.mvcat{width:28px;height:14px;object-fit:contain;image-rendering:pixelated}
.mvcat--txt{
  font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 5px;border-radius:4px;background:var(--ink-3);color:var(--txt-dim);
  width:auto;height:auto;
}

@media (max-width:620px){
  .mi__head{flex-direction:column;align-items:center;text-align:center}
  .mi__id{align-items:center}
  .mi__move{grid-template-columns:1fr 60px 30px 34px 44px}
  .mi__move span:nth-child(5){display:none}
  .mi__statlegend,.mi__stat{grid-template-columns:56px 36px 1fr 26px 30px;gap:6px}
}

/* ── Battle history ───────────────────────────────────── */
.blghist{display:flex;flex-direction:column;gap:10px}
.blg{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;
}
.blg__head{
  display:flex;align-items:center;gap:9px;padding:10px 13px;
  cursor:pointer;list-style:none;user-select:none;
}
.blg__head::-webkit-details-marker{display:none}
.blg__head:hover{background:rgba(255,255,255,.03)}
.blg__mon{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.blg__vs{font-size:9px;color:var(--txt-dim);font-weight:800}
.blg__title{flex:1;font-size:12px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blg__title small{color:var(--txt-dim);font-weight:400}
.blg__trainer{font-size:10px;color:var(--yellow);white-space:nowrap}
.blg__outcome{
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;background:var(--ink-3);white-space:nowrap;
}
.blg__outcome.is-won{background:rgba(63,217,138,.2);color:var(--ok)}
.blg__outcome.is-lost{background:rgba(238,21,21,.2);color:#FF7B7B}
.blg__outcome.is-caught{background:rgba(255,213,74,.2);color:var(--shiny)}
.blg__outcome.is-flee{color:var(--txt-dim)}
.blg__when{font-size:10px;color:var(--txt-dim);font-family:var(--mono);white-space:nowrap}
.blg__meta{padding:0 13px 6px;font-size:10px;color:var(--txt-dim)}
.blg__body{
  max-height:340px;overflow-y:auto;padding:4px 13px 12px;
  border-top:1px solid var(--line);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.blg__turn{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.blg__turn:last-child{border-bottom:none}
.blg__turnno{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:.1em;
  color:var(--txt-dim);text-transform:uppercase;margin-bottom:3px;
}
.blg__line{font-size:12px;line-height:1.5}
.blg__line.is-sys{color:var(--yellow);font-weight:700}
.blg__line.is-good{color:var(--ok);font-weight:700}

@media (max-width:620px){
  .blg__when,.blg__trainer{display:none}
}


/* ============================================================
   LEADERBOARD
   Card rows rather than a table: avatar, name, progress bar.
   ============================================================ */
.lbboard{display:flex;flex-direction:column;gap:8px}

.lbrow{
  display:grid;
  grid-template-columns:46px 40px 1fr auto 92px;
  align-items:center;gap:12px;
  padding:11px 16px 11px 10px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:13px;
  transition:transform .14s,border-color .14s,background .14s;
}
.lbrow:hover{
  transform:translateX(3px);
  border-color:var(--txt-dim);
  background:var(--ink-3);
}

/* Top three carry a tinted edge and a metal medal. */
.lbrow.is-gold{
  border-color:rgba(255,213,74,.5);
  background:linear-gradient(100deg,rgba(255,213,74,.11),var(--ink-2) 42%);
}
.lbrow.is-silver{
  border-color:rgba(200,208,218,.4);
  background:linear-gradient(100deg,rgba(200,208,218,.09),var(--ink-2) 42%);
}
.lbrow.is-bronze{
  border-color:rgba(205,127,50,.4);
  background:linear-gradient(100deg,rgba(205,127,50,.09),var(--ink-2) 42%);
}
.lbrow.is-you{
  border-color:var(--red);
  box-shadow:inset 3px 0 0 var(--red),0 0 0 1px rgba(238,21,21,.2);
}

.lbrow__rank{display:flex;align-items:center;justify-content:center}
.lbrow__no{
  font-family:var(--mono);font-size:15px;font-weight:800;
  color:var(--txt-dim);
}
.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;
}

.lbrow__ava{
  width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,var(--ink-3),var(--ink));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  flex-shrink:0;
}
.lbrow.is-gold .lbrow__ava{border-color:rgba(255,213,74,.55)}
.lbrow.is-silver .lbrow__ava{border-color:rgba(200,208,218,.5)}
.lbrow.is-bronze .lbrow__ava{border-color:rgba(205,127,50,.55)}
.lbrow__avatar{
  width:34px;height:34px;object-fit:contain;image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

.lbrow__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.lbrow__name{
  font-size:15px;font-weight:800;letter-spacing:.01em;
  display:flex;align-items:center;gap:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lbrow__youtag{
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:99px;background:var(--red);color:#fff;
}
.lbrow__meta{display:flex;align-items:center;gap:9px}
.lbrow__dex{font-size:11px;color:var(--txt-dim)}
.lbrow__dex b{font-family:var(--mono);font-size:12px;color:var(--blue);font-weight:800}
.lbrow__champ{
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;
  background:linear-gradient(135deg,var(--yellow),#E8A800);color:#3A2E00;
}

.lbrow__badges{display:flex;align-items:center;gap:4px}
.lbrow__badgeno{
  font-family:var(--mono);font-size:11px;color:var(--txt-dim);
  margin-left:5px;font-weight:700;
}
.lbdot{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.lbdot.is-on{
  background:radial-gradient(circle at 35% 30%,#FFE68A,var(--yellow));
  box-shadow:0 0 6px rgba(255,203,5,.55);
}

.lbrow__pct{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.lbrow__pctval{
  font-size:13px;font-weight:800;font-family:var(--mono);
  color:var(--blue);
}
.lbrow.is-gold .lbrow__pctval{color:var(--yellow)}
.lbrow__track{
  width:84px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.lbrow__track i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--ok));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.lbrow.is-gold .lbrow__track i{background:linear-gradient(90deg,#E8A800,var(--yellow))}

.lbempty{padding:34px;text-align:center;color:var(--txt-dim);font-size:13px}

.lbpager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:16px;
}
.lbpager__no{font-size:12px;color:var(--txt-dim);font-family:var(--mono)}
.lbyou{
  margin-top:12px;text-align:center;font-size:12px;color:var(--txt-dim);
}
.lbyou b{color:var(--yellow);font-family:var(--mono)}
.lbyou .linkbtn{margin-left:8px}

@media (max-width:640px){
  .lbrow{grid-template-columns:34px 30px 1fr 64px;gap:8px;padding:9px 11px 9px 7px}
  .lbrow__badges{display:none}
  .lbrow__avatar{width:28px;height:28px}
  .lbrow__name{font-size:13px}
  .lbrow__track{width:60px}
  .lbmedal{width:24px;height:24px}
}


/* ============================================================
   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;justify-content: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;
}
.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}
  .cut__choices.is-grid .cut__opts{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
}

/* ============================================================
   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)}

/* Worlddex cells carry the finder and the moment. */
.wdxcell{padding-bottom:9px}
.wdxcell__by{
  font-size:10px;font-weight:800;color:var(--yellow);
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.wdxcell__by--none{color:var(--txt-dim);font-weight:600;opacity:.6}
.wdxcell__at{font-size:8px;color:var(--txt-dim);letter-spacing:.02em}
.wdxcell.is-claimed{border-color:rgba(255,203,58,.34)}

.wdxsub{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-dim);margin:14px 0 8px;
}
.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}
}

/* ============================================================
   CASINO
   ============================================================ */
.casino{display:flex;flex-direction:column;gap:14px}
.casino__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
}
.casino__coins{display:flex;align-items:center;gap:8px}
.casino__coins img{width:28px;height:28px;image-rendering:pixelated}
.casino__coins b{font-size:20px;font-weight:900;color:var(--yellow)}
.casino__coins span{
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700;
}
.casino__buy{font-size:12px;white-space:nowrap}

/* Reels */
.slots{
  display:flex;justify-content:center;padding:18px 12px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,203,58,.10),transparent 65%),
    linear-gradient(180deg,#2A1B2E,#1A1220);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:box-shadow .2s;
}
.slots.is-win{box-shadow:inset 0 0 40px rgba(255,203,58,.35)}
.slots__frame{
  position:relative;display:flex;gap:8px;padding:10px;
  background:#120C16;border:3px solid rgba(255,203,58,.5);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.slotreel{
  display:flex;flex-direction:column;gap:6px;
  padding:6px;background:rgba(255,255,255,.04);border-radius:8px;
}
.slotcell{
  width:clamp(46px,9vw,66px);height:clamp(46px,9vw,66px);
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);border-radius:6px;
}
.slotcell img{
  width:82%;height:82%;object-fit:contain;image-rendering:pixelated;
}
/* The paid line at bet 1 sits across the middle row. */
.slots__payline{
  position:absolute;left:4px;right:4px;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(238,21,21,.75),transparent);
  transform:translateY(-1px);pointer-events:none;
}

.slots__result{
  text-align:center;font-size:13px;font-weight:700;min-height:20px;
  color:var(--txt-dim);
}
.slots__result.is-good{color:var(--yellow)}
.slots__result.is-bad{color:var(--red-lt)}

/* Bet selector */
.casino__bets{display:flex;gap:8px;justify-content:center}
.betbtn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 18px;min-width:92px;
  background:var(--ink-3);border:2px solid var(--line);border-radius:11px;
  transition:.16s;
}
.betbtn b{font-size:18px;font-weight:900}
.betbtn span{font-size:10px;color:var(--txt-dim);font-weight:700}
.betbtn i{font-size:9px;color:var(--txt-dim);font-style:normal}
.betbtn.is-on{
  border-color:var(--yellow);background:rgba(255,203,58,.12);
}
.betbtn.is-on b{color:var(--yellow)}

.slots__go{align-self:center;min-width:220px;padding:11px 26px;font-size:14px}
.slots__go:disabled{opacity:.55}

/* Paytable */
.paytable{
  padding:12px 14px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
}
.paytable h4{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-dim);margin-bottom:9px;
}
.paytable h4 span{text-transform:none;letter-spacing:0;opacity:.7}
.paytable__grid{display:flex;flex-direction:column;gap:5px}
.payrow{display:flex;align-items:center;gap:5px;font-size:12px}
.payrow img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.payrow b{margin-left:auto;font-weight:800;color:var(--yellow)}
.payrow--note{color:var(--txt-dim);font-size:11px;gap:8px}

@media (max-width:640px){
  .casino__top{flex-direction:column;align-items:stretch}
  .betbtn{min-width:0;flex:1;padding:8px 6px}
  .slots__go{min-width:0;width:100%}
}

/* ── Safari ─────────────────────────────────────────── */
.safari{display:flex;flex-direction:column;gap:12px}
.safgate,.safsession{
  padding:16px;text-align:center;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.safgate p{font-size:13px;line-height:1.6}
.safgate__money{font-size:11px;color:var(--txt-dim)}
.safsession__time{display:flex;flex-direction:column;align-items:center}
.safsession__time b{font-size:26px;font-weight:900;color:var(--yellow);line-height:1}
.safsession__time span{
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700;margin-top:2px;
}
.safsession__go{min-width:200px}
.safsession__prog{
  width:min(320px,100%);height:6px;border-radius:99px;
  background:var(--ink);overflow:hidden;
}
.safsession__prog i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--yellow));
  transition:width .2s;
}
.safsession__hint{font-size:11px;color:var(--txt-dim)}
.safari__msg{text-align:center;font-size:12px;color:var(--red-lt);min-height:16px}
.safari__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.safari__head h4{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim);
}
.safari__head span{font-size:11px;color:var(--txt-dim);opacity:.8}
.safgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px;
}
.safcell{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 4px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:9px;
}
.safcell img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.safcell span{font-size:10px;font-weight:700;text-align:center;line-height:1.2}
.casino__buys{display:flex;gap:6px}
.casino__buy{font-size:12px;padding:7px 12px;white-space:nowrap}
.casino__buy small{opacity:.7;font-size:10px;margin-left:3px}

/* ── Guild Hall ─────────────────────────────────────── */
.guild{display:flex;flex-direction:column;gap:12px}
.guild__msg{font-size:12px;min-height:16px;text-align:center}
.guild__msg.is-good{color:var(--yellow)}
.guild__msg.is-bad{color:var(--red-lt)}
.gsub{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-dim);margin-top:4px;
}

.gfound{
  padding:14px;background:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:9px;
}
.gfound h4{font-size:13px;font-weight:800}
.gfound__row{display:flex;gap:8px}
.ginput{
  flex:1;padding:9px 11px;font-size:13px;
  background:var(--ink);border:1px solid var(--line);border-radius:8px;
  color:var(--txt);
}
.ginput:focus{outline:none;border-color:var(--red)}
.ginput--tag{max-width:96px;text-transform:uppercase}
.ginput--num{max-width:150px}
.glogos{display:flex;gap:6px;flex-wrap:wrap}
.glogo{
  padding:5px;background:var(--ink);border:2px solid var(--line);border-radius:9px;
}
.glogo img{width:30px;height:30px;image-rendering:pixelated;display:block}
.glogo.is-on{border-color:var(--yellow);background:rgba(255,203,58,.12)}

.gdir{display:flex;flex-direction:column;gap:6px}
.gcard{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:10px;
}
.gcard__logo{width:34px;height:34px;image-rendering:pixelated}
.gcard__id{display:flex;flex-direction:column;min-width:0}
.gcard__id b{font-size:13px;font-weight:800}
.gcard__tag{font-size:10px;color:var(--txt-dim);font-weight:700}
.gcard__count{margin-left:auto;font-size:11px;color:var(--txt-dim)}
.gcard__join{font-size:12px;padding:6px 14px}

.ghead{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
}
.ghead__logo{width:46px;height:46px;image-rendering:pixelated}
.ghead__id h3{font-size:17px;font-weight:900}
.ghead__id h3 span{color:var(--yellow);font-size:13px}
.ghead__id p{font-size:11px;color:var(--txt-dim);margin-top:2px}
.ghead__leave{margin-left:auto;font-size:12px}

.gmotd{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--ink-3);border:1px dashed var(--line);border-radius:var(--r-sm);
  font-size:12px;line-height:1.5;
}
.gmotd__edit{
  margin-left:auto;font-size:11px;color:var(--txt-dim);
  text-decoration:underline;white-space:nowrap;
}

.gbank{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
}
.gbank__sum{display:flex;flex-direction:column}
.gbank__sum span{
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700;
}
.gbank__sum b{font-size:20px;font-weight:900;color:var(--yellow)}
.gbank__act{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.gbank__act .btn{font-size:12px;padding:8px 14px}

.groster{display:flex;flex-direction:column;gap:5px}
.gmember{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:10px;
}
.gmember__ava{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line);
}
.gmember__id{display:flex;flex-direction:column;min-width:0}
.gmember__id b{font-size:13px;font-weight:800}
.gmember__rank{font-size:10px;font-weight:800;letter-spacing:.04em}
.gmember__rank.rank-3{color:var(--yellow)}
.gmember__rank.rank-2{color:#7FB2FF}
.gmember__rank.rank-1{color:var(--txt-dim)}
.gmember__prog{margin-left:auto;font-size:11px;color:var(--txt-dim)}
.grank{
  padding:5px 8px;font-size:11px;background:var(--ink);
  border:1px solid var(--line);border-radius:7px;color:var(--txt);
}
.gkick{
  width:26px;height:26px;font-size:16px;line-height:1;
  background:var(--ink);border:1px solid var(--line);border-radius:7px;
  color:var(--txt-dim);
}
.gkick:hover{color:var(--red-lt);border-color:var(--red)}

@media (max-width:640px){
  .gbank__act{margin-left:0;width:100%}
  .gmember__prog{display:none}
}

/* ── Quests & Achievements ──────────────────────────── */
.quests{display:flex;flex-direction:column;gap:10px}
.quests__msg{font-size:12px;min-height:16px;text-align:center}
.quests__msg.is-good{color:var(--yellow)}
.quests__msg.is-bad{color:var(--red-lt)}
.qsub{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-dim);margin-top:6px;
  display:flex;align-items:baseline;gap:8px;
}
.qsub span{font-size:11px;opacity:.75;text-transform:none;letter-spacing:0}

.qdaily{
  display:flex;align-items:center;gap:14px;padding:12px 14px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
}
.qdaily__streak{display:flex;flex-direction:column;align-items:center;min-width:56px}
.qdaily__streak b{font-size:24px;font-weight:900;color:var(--yellow);line-height:1}
.qdaily__streak span{
  font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:700;margin-top:2px;
}
.qdaily__done{font-size:12px;color:var(--txt-dim)}

.qlist{display:flex;flex-direction:column;gap:6px}
.quest{
  padding:10px 12px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:10px;
}
.quest.is-done{border-color:rgba(255,203,58,.4)}
.quest.is-claimed{opacity:.55}
.quest__top{display:flex;align-items:baseline;gap:8px}
.quest__name{font-size:13px;font-weight:800}
.quest__time{margin-left:auto;font-size:10px;color:var(--txt-dim)}
.quest__desc{font-size:11px;color:var(--txt-dim);margin:3px 0 7px}
.quest__bar{height:6px;border-radius:99px;background:var(--ink);overflow:hidden}
.quest__bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--yellow));
}
.quest__foot{display:flex;align-items:center;gap:10px;margin-top:6px}
.quest__count{font-size:11px;font-weight:700;color:var(--txt-dim)}
.quest__go{margin-left:auto;font-size:12px;padding:5px 16px}
.quest__claimed{
  margin-left:auto;font-size:11px;font-weight:700;color:var(--yellow);
}

.achlist{display:flex;flex-direction:column;gap:5px}
.ach{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:10px;
}
.ach.is-earned{border-color:rgba(255,203,58,.34)}
.ach__id{display:flex;flex-direction:column;min-width:0;flex:1}
.ach__id b{font-size:12px;font-weight:800}
.ach.is-earned .ach__id b{color:var(--yellow)}
.ach__id span{font-size:10px;color:var(--txt-dim);line-height:1.4}
.ach__done{font-size:12px;font-weight:800;color:var(--yellow);white-space:nowrap}
.ach__prog{display:flex;align-items:center;gap:7px;min-width:110px}
.ach__bar{flex:1;height:5px;border-radius:99px;background:var(--ink);overflow:hidden}
.ach__bar i{display:block;height:100%;background:var(--txt-dim);border-radius:99px}
.ach__prog span{font-size:9px;color:var(--txt-dim);white-space:nowrap}

@media (max-width:640px){
  .ach__id span{display:none}
  .ach__prog{min-width:80px}
}

/* ── Safari warden ──────────────────────────────────── */
.warden{
  display:flex;gap:14px;padding:14px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-sm);
}
.warden__art{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--yellow);background:var(--ink);
}
.warden__talk{flex:1;min-width:0}
.warden__who{
  font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--yellow);
}
.warden__talk p{font-size:13px;line-height:1.6;margin:4px 0 10px}
.warden__act{display:flex;gap:8px;flex-wrap:wrap}
.warden__act .btn{font-size:12px}

/* ── 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}

.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__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}
}

/* ============================================================
   PokéMart
   Shelf on the left, the selected item on the right. The shelf
   scrolls; the panel stays put, so the buy button never moves out
   from under the pointer while browsing.
   ============================================================ */
.shop{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0}

.shop__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.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__cats{display:flex;flex-wrap:wrap;gap:5px}
.shop__cat{padding:5px 11px;border-radius:999px;font-size:.78rem;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line);color:var(--txt-dim);
  transition:background .15s,color .15s,border-color .15s}
.shop__cat:hover{color:var(--txt);border-color:var(--blue)}
.shop__cat.is-on{background:var(--blue);border-color:var(--blue);color:#fff}

.shop__body{display:grid;grid-template-columns:1fr 260px;gap:12px;
  flex:1;min-height:0}

.shop__list{overflow-y:auto;display:flex;flex-direction:column;gap:4px;
  padding-right:4px}
.shop__row{display:grid;grid-template-columns:32px 1fr auto auto;
  align-items:center;gap:10px;width:100%;padding:7px 10px;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);text-align:left;font-size:.85rem;
  transition:background .12s,border-color .12s}
.shop__row:hover{background:var(--ink-3);border-color:var(--blue)}
.shop__row.is-on{border-color:var(--yellow);background:rgba(255,203,5,.08)}
.shop__row.is-poor{opacity:.5}
.shop__ico{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.shop__name{display:flex;flex-direction:column;gap:1px;min-width:0}
.shop__tm{font-size:.68rem;color:var(--txt-dim);font-style:normal;
  text-transform:capitalize}
.shop__have{color:var(--txt-dim);font-size:.78rem;font-variant-numeric:tabular-nums}
.shop__price{color:var(--yellow);font-size:.82rem;font-variant-numeric:tabular-nums;
  min-width:64px;text-align:right}

.shop__detail{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px;background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);overflow-y:auto}
.shop__detail--empty{justify-content:center}
.shop__big{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.shop__detail h4{margin:0;font-size:1rem;text-align:center}
.shop__text{margin:0;font-size:.78rem;color:var(--txt-dim);text-align:center;
  line-height:1.45}

.shop__qty{display:flex;align-items:center;gap:5px;margin-top:2px}
.shop__qty b{min-width:34px;text-align:center;font-size:1.05rem;
  font-variant-numeric:tabular-nums}
.btn--sm{padding:3px 8px;font-size:.76rem}

.shop__total{display:flex;align-items:center;justify-content:space-between;
  gap:14px;width:100%;padding:7px 10px;border-radius:var(--r-sm);
  background:var(--ink-3);font-size:.84rem}
.shop__total b{color:var(--yellow);font-variant-numeric:tabular-nums}
.shop__go{width:100%}
.shop__warn{margin:0;font-size:.76rem;color:var(--red-lt)}
.shop__locked{margin:0;font-size:.76rem;color:var(--txt-dim);text-align:center}

@media (max-width:720px){
  .shop__body{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .shop__detail{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .shop__big{width:44px;height:44px}
}

/* ============================================================
   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}
.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
   A list of challenges in travel order; each one opens in place to
   show the leader, their type and the six Pokemon they field.
   ============================================================ */
.gyms{display:flex;flex-direction:column;gap:8px}
.gyms__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 13px;background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);font-size:.85rem}
.gyms__track{display:flex;gap:4px}
.gyms__pip{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;
  opacity:.22;filter:grayscale(1);transition:opacity .2s,filter .2s}
.gyms__pip.is-on{opacity:1;filter:none}
.gyms__head{margin:12px 0 2px;font-size:.95rem;color:var(--txt)}
.gyms__head em{font-style:normal;font-size:.76rem;color:var(--txt-dim)}

.gym{background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;transition:border-color .15s}
.gym.is-next{border-color:var(--yellow)}
.gym.is-done{border-color:var(--ok)}
.gym.is-locked{opacity:.55}
.gym--champ.is-next{border-color:var(--red)}

.gym__head{display:grid;
  grid-template-columns:38px 1fr auto auto 54px;
  align-items:center;gap:11px;width:100%;padding:9px 12px;cursor:pointer;
  background:none;border:0;color:var(--txt);text-align:left;font:inherit}
.gym__head:hover{background:var(--ink-3)}
.gym__badge{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.gym__e4{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line);font-weight:700;
  font-size:.9rem;color:var(--txt-dim)}
.gym__e4--champ{border-color:var(--red);color:var(--red-lt)}
.gym__title{display:flex;flex-direction:column;gap:1px;min-width:0}
.gym__title b{font-size:.9rem;font-weight:600}
.gym__title em{font-style:normal;font-size:.74rem;color:var(--txt-dim)}
.gym__lv{font-size:.76rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.gym__mark{font-size:.7rem;color:var(--txt-dim);text-align:right;
  text-transform:uppercase;letter-spacing:.04em}

.gym__body{padding:0 12px 13px;display:flex;flex-direction:column;gap:12px;
  border-top:1px solid var(--line)}
.gym__who{display:flex;gap:13px;align-items:flex-start;padding-top:12px}
.gym__portrait{position:relative;display:grid;place-items:center;
  flex:0 0 86px;height:106px;border-radius:var(--r-sm);
  background:repeating-linear-gradient(45deg,var(--ink-3) 0 8px,var(--ink) 8px 16px);
  border:1px dashed var(--line)}
.gym__initial{font-size:2.1rem;font-weight:700;color:var(--txt-dim);opacity:.5}
.gym__soon{position:absolute;bottom:5px;font-size:.56rem;text-align:center;
  color:var(--txt-dim);text-transform:uppercase;letter-spacing:.05em;
  line-height:1.25}
.gym__blurb{display:flex;flex-direction:column;gap:3px;min-width:0}
.gym__blurb b{font-size:.95rem}
.gym__blurb em{font-style:normal;font-size:.76rem;color:var(--yellow)}
.gym__blurb p{margin:5px 0 0;font-size:.8rem;color:var(--txt-dim);line-height:1.5}

.gym__team{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.gym__slot{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 3px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm)}
.gym__slot img{width:46px;height:46px;object-fit:contain;image-rendering:pixelated}
.gym__slotname{font-size:.66rem;text-align:center;line-height:1.2}
.gym__slotlv{font-size:.64rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .gym__head{grid-template-columns:32px 1fr auto;row-gap:4px}
  .gym__lv,.gym__mark{grid-column:2/-1;text-align:left}
  .gym__team{grid-template-columns:repeat(3,1fr)}
  .gym__who{flex-direction:column}
}

/* ============================================================
   Move Tutor and TM teaching
   ============================================================ */
.tut{display:flex;flex-direction:column;gap:11px}
.tut__intro{margin:0;font-size:.84rem;color:var(--txt-dim);line-height:1.55}
.tut__head{margin:2px 0 0;font-size:.9rem}
.tut__team{display:flex;flex-direction:column;gap:6px}

.tut__top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.tut__who{display:flex;align-items:center;gap:8px}
.tut__who img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.tut__who b{font-size:.9rem}
.tut__who em{font-style:normal;font-size:.74rem;color:var(--txt-dim);
  margin-left:4px}
.tut__back{font-size:.78rem;padding:5px 10px}

.tut__list{display:flex;flex-direction:column;gap:5px;max-height:46vh;
  overflow-y:auto;padding-right:4px}
.tut__move{display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:10px;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);font:inherit;font-size:.84rem;
  transition:background .12s,border-color .12s}
.tut__move:hover:not(:disabled){background:var(--ink-3);border-color:var(--blue)}
.tut__move:disabled{opacity:.45;cursor:not-allowed}
.tut__mname{font-weight:600}
.tut__mstat{font-size:.72rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tut__go{font-size:.72rem;color:var(--yellow);white-space:nowrap;
  padding-left:4px;border-left:1px solid var(--line)}

.tut__replace{display:flex;flex-direction:column;gap:10px}
.tut__replace h4{margin:0;font-size:.95rem}
.tut__hint{margin:0;font-size:.82rem;color:var(--txt-dim)}

@media (max-width:640px){
  .tut__move{grid-template-columns:1fr auto;row-gap:4px}
  .tut__mstat,.tut__go{grid-column:1/-1;border-left:0;padding-left:0}
}

/* ============================================================
   Route information
   Which Pokémon live here and how often each turns up.
   ============================================================ */
.routenav__btn--info{color:var(--blue)}
.routenav__btn--info:hover{color:var(--txt)}

.rinfo{display:flex;flex-direction:column;gap:12px}
.rinfo__head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px}
.rinfo__head h3{margin:0;font-size:1.05rem}
.rinfo__head p{margin:2px 0 0;font-size:.78rem;color:var(--txt-dim);
  text-transform:capitalize}
.rinfo__here{flex:0 0 auto;padding:3px 9px;border-radius:999px;
  background:rgba(63,217,138,.15);border:1px solid rgba(63,217,138,.35);
  color:var(--ok);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}

.rinfo__list{display:flex;flex-direction:column;gap:4px;max-height:52vh;
  overflow-y:auto;padding-right:4px}
.rinfo__row{display:grid;grid-template-columns:38px 1fr auto 90px 48px;
  align-items:center;gap:10px;padding:6px 10px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.rinfo__row.is-caught{border-color:rgba(63,217,138,.3)}
.rinfo__ico{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.rinfo__name{display:flex;flex-direction:column;gap:1px;font-size:.85rem;
  min-width:0}
.rinfo__name em{font-style:normal;font-size:.64rem;color:var(--ok);
  text-transform:uppercase;letter-spacing:.04em}
.rinfo__types{display:flex;gap:3px}
.rinfo__bar{display:block;height:7px;border-radius:99px;background:var(--ink);
  overflow:hidden}
.rinfo__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--yellow))}
.rinfo__pct{font-size:.8rem;text-align:right;color:var(--yellow);
  font-variant-numeric:tabular-nums}

.rinfo__rare{display:flex;gap:10px;flex-wrap:wrap}
.rinfo__rare span{flex:1 1 140px;padding:8px 11px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-brd);font-size:.8rem;
  color:var(--txt-dim)}
.rinfo__rare b{color:var(--shiny);margin-right:6px}
.rinfo__rare span:last-child b{color:var(--shadow)}
.rinfo__note{margin:0;font-size:.74rem;color:var(--txt-dim);line-height:1.5}

@media (max-width:640px){
  .rinfo__row{grid-template-columns:32px 1fr 48px;row-gap:4px}
  .rinfo__types{grid-column:2/-1}
  .rinfo__bar{display: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)}

/* ============================================================
   Nursery
   Two boarding slots with the couple's mood between them, and the egg
   they leave behind.
   ============================================================ */
.nurs{display:flex;flex-direction:column;gap:14px}
.nurs__intro{margin:0;font-size:.84rem;color:var(--txt-dim);line-height:1.5;
  text-align:center}

.nurs__pair{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;
  align-items:center}
.nurs__slot{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 10px;min-height:150px;justify-content:center;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);color:var(--txt)}
.nurs__slot img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.nurs__slot--empty{cursor:pointer;border-style:dashed;
  transition:border-color .15s,background .15s}
.nurs__slot--empty:hover{border-color:var(--blue);background:var(--ink-3)}
.nurs__plus{font-size:2rem;color:var(--txt-dim);line-height:1}
.nurs__hint{font-size:.76rem;color:var(--txt-dim)}
.nurs__name{display:flex;align-items:center;gap:5px;font-size:.9rem}
.nurs__m{color:#6EA8FF;font-style:normal}
.nurs__f{color:#FF7EB6;font-style:normal}
.nurs__lv{font-size:.74rem;color:var(--txt-dim);text-transform:capitalize}

.nurs__mood{display:grid;place-items:center;max-width:140px;padding:9px 11px;
  border-radius:var(--r-sm);font-size:.76rem;text-align:center;line-height:1.4;
  border:1px solid var(--line);background:var(--ink-2)}
.nurs__mood.is-great{border-color:var(--ok);color:var(--ok);
  background:rgba(63,217,138,.1)}
.nurs__mood.is-good{border-color:var(--yellow);color:var(--yellow);
  background:rgba(255,203,5,.08)}
.nurs__mood.is-poor{border-color:var(--line);color:var(--txt-dim)}
.nurs__mood.is-none{border-color:var(--line);color:var(--txt-dim);opacity:.8}

.nurs__egg{display:flex;gap:14px;align-items:center;padding:14px;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r)}
.nurs__egg--none{justify-content:center;min-height:74px}
.nurs__eggimg{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;
  animation:eggWobble 2.4s ease-in-out infinite}
@keyframes eggWobble{
  0%,88%,100%{transform:rotate(0)}
  91%{transform:rotate(-7deg)}
  95%{transform:rotate(7deg)}
}
.nurs__egginfo{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.nurs__egginfo b{font-size:.92rem}
.nurs__egginfo p{margin:0;font-size:.76rem;color:var(--txt-dim);line-height:1.45}
.nurs__bar{height:8px;border-radius:99px;background:var(--ink);overflow:hidden;
  margin-top:3px}
.nurs__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--yellow),var(--ok));transition:width .3s}
.nurs__pct{font-size:.74rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.nurs__from{font-size:.72rem;color:var(--txt-dim);opacity:.8}

@media (max-width:600px){
  .nurs__pair{grid-template-columns:1fr;gap:8px}
  .nurs__mood{max-width:none}
  .nurs__egg{flex-direction:column;text-align:center}
}

/* ============================================================
   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)}

.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 .teamslot{transform:scale(.85);transform-origin:bottom}

/* ── 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}
.teamdot{width:9px;height:9px;border-radius:50%;
  background:var(--yellow);border:1px solid rgba(0,0,0,.35);
  transition:background .25s,opacity .25s}
.teamdot.is-out{background:transparent;border-color:var(--txt-dim);opacity:.45}

/* Challenging a leader */
.gym__go{width:100%;margin-top:4px}
.gym__beaten{margin:4px 0 0;font-size:.78rem;color:var(--ok);text-align:center}

/* ── 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. */
.ghead__raids{margin-left:auto}
.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}
.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}
}

/* Catching a Shiny or a Shadow is the rarest thing in the game, so it
   gets the same weight in the chat as a roaming legendary — in the
   colour the rest of the UI already uses for each. */
.msg--shiny{color:var(--shiny);font-style:normal;font-weight:700;font-size:12.5px;
  padding:6px 9px;margin:3px 0;border-left:3px solid var(--shiny);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(90deg,rgba(255,213,74,.18),rgba(255,213,74,.02));
  animation:msgflash 1.6s ease-out}
.msg--shadow{color:var(--shadow);font-style:normal;font-weight:700;font-size:12.5px;
  padding:6px 9px;margin:3px 0;border-left:3px solid var(--shadow);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(90deg,rgba(155,92,255,.2),rgba(155,92,255,.02));
  animation:msgflash 1.6s ease-out}

/* ============================================================
   Mining
   A rock face to swing at, what came out, and the fossils waiting.
   ============================================================ */
.mine{display:flex;flex-direction:column;gap:14px}
/* The crystal cavern the site is dug into. The gradient underneath
   stays as the fallback: if the photograph is ever missing the panel
   is still a rock face rather than a blank box. */
.mine__face{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:10px;padding:34px 14px;border-radius:var(--r);
  background:
    linear-gradient(180deg,rgba(10,14,30,.55),rgba(6,9,20,.78)),
    url('../sprites/mine/mine.jpg') center/cover no-repeat,
    linear-gradient(180deg,#3a3128,#241e18);
  border:1px solid var(--line);overflow:hidden}
/* The old drawn rock texture is now only a faint sheen over the
   artwork, so the cavern reads rather than the pattern. */
.mine__rock{position:absolute;inset:0;opacity:.12;
  background:repeating-linear-gradient(38deg,rgba(0,0,0,.22) 0 3px,
    transparent 3px 9px)}
.mine__face.is-hit{animation:mineHit .26s ease-out}
@keyframes mineHit{
  30%{transform:translateY(3px) scale(.995)}
  100%{transform:none}
}
.mine__face.is-break::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,220,150,.5),transparent 62%);
  animation:mineBreak .6s ease-out forwards;pointer-events:none}
@keyframes mineBreak{to{opacity:0;transform:scale(1.5)}}
.mine__swing{position:relative;z-index:1;padding:11px 26px;cursor:pointer;
  border-radius:var(--r-sm);font-size:.95rem;font-weight:600;
  background:var(--yellow);border:1px solid var(--yellow-dk);color:#2a2100;
  transition:transform .1s,filter .15s}
.mine__swing:hover:not(:disabled){filter:brightness(1.08)}
.mine__swing:active:not(:disabled){transform:translateY(2px)}
.mine__swing:disabled{opacity:.6;cursor:wait}
.mine__bar{position:relative;z-index:1;width:min(100%,320px);height:8px;
  border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden}
.mine__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--yellow),#ffe9a3);transition:width .25s}
.mine__prog{position:relative;z-index:1;font-size:.76rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}

.mine__hint{display:flex;align-items:center;gap:11px;padding:10px 13px;
  border-radius:var(--r-sm);background:var(--ink-2);border:1px solid var(--line);
  font-size:.8rem;color:var(--txt-dim);line-height:1.45}
.mine__hint.is-on{border-color:var(--ok);color:var(--txt);
  background:rgba(63,217,138,.08)}
.mine__hint img{width:30px;height:30px;image-rendering:pixelated;flex:0 0 auto}
.mine__hint em{display:block;font-style:normal;font-size:.72rem;
  color:var(--yellow);margin-top:2px}

.mine__finds h4,.mine__fossils h4{margin:0 0 7px;font-size:.85rem}
.mine__finds{display:flex;flex-direction:column;gap:4px}
.mine__find{display:flex;align-items:center;gap:9px;padding:6px 10px;
  border-radius:var(--r-sm);background:var(--ink-2);border:1px solid var(--line);
  font-size:.82rem;animation:findIn .3s ease-out}
@keyframes findIn{from{opacity:0;transform:translateX(-8px)}}
.mine__find img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.mine__find b{margin-left:auto;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--shiny)}
.mine__find.is-fossil{border-color:var(--shiny);background:rgba(255,213,74,.09)}
.mine__find.is-treasure{border-color:var(--yellow)}
.mine__find.is-stone{border-color:var(--blue)}

.mine__fossils{display:flex;flex-direction:column;gap:5px}
.mine__note{margin:0 0 6px;font-size:.75rem;color:var(--txt-dim)}
.mine__fossil{display:flex;align-items:center;gap:10px;padding:8px 11px;
  border-radius:var(--r-sm);background:var(--glass);
  border:1px solid var(--glass-brd)}
.mine__fossil img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.mine__fname{display:flex;flex-direction:column;gap:1px;flex:1;font-size:.85rem}
.mine__fname em{font-style:normal;font-size:.72rem;color:var(--txt-dim)}
.mine__qty{font-size:.76rem;color:var(--txt-dim)}
.mine__stats{margin:0;text-align:center;font-size:.74rem;color:var(--txt-dim)}

/* ============================================================
   Fishing
   ============================================================ */
.fish{display:flex;flex-direction:column;gap:12px;align-items:center}
/* The moonlit lake. Anchored low so the water — where the float and
   the line actually are — fills the panel, with the treeline above
   it. The flat blue gradient stays underneath as the fallback. */
.fish__water{position:relative;width:100%;height:190px;border-radius:var(--r);
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(8,14,28,.30),rgba(6,10,22,.55)),
    url('../sprites/fishing/lake.jpg') center 68%/cover no-repeat,
    linear-gradient(180deg,#1d4f7a 0%,#12395c 55%,#0d2942 100%)}
.fish__water::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.045) 0 2px,transparent 2px 7px);
  animation:fishWaves 4s linear infinite}
@keyframes fishWaves{to{transform:translateY(7px)}}
.fish__line{position:absolute;left:50%;top:0;width:1px;height:56%;
  background:rgba(255,255,255,.4)}
.fish__float{position:absolute;left:50%;top:54%;width:14px;height:14px;
  margin-left:-7px;border-radius:50%;
  background:linear-gradient(180deg,#EE1515 0 50%,#f4f4f4 50%);
  border:1px solid rgba(0,0,0,.4);
  animation:fishBob 2.6s ease-in-out infinite}
@keyframes fishBob{50%{transform:translateY(5px)}}
.fish__water.is-casting .fish__float{animation-duration:.7s}
.fish__water.is-bite .fish__float{animation:fishBite .3s ease-in-out 3}
@keyframes fishBite{50%{transform:translateY(16px) scale(.85)}}
.fish__ripple{position:absolute;left:50%;top:58%;width:40px;height:12px;
  margin-left:-20px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  animation:fishRipple 2.6s ease-out infinite}
@keyframes fishRipple{
  0%{transform:scale(.4);opacity:.7}
  100%{transform:scale(2.2);opacity:0}
}

.fish__rods{display:flex;flex-direction:column;gap:5px;width:100%}
.fish__rod{display:flex;align-items:center;gap:11px;padding:9px 12px;
  cursor:pointer;text-align:left;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line);color:var(--txt);
  transition:border-color .15s,background .15s}
.fish__rod:hover:not(:disabled){border-color:var(--blue)}
.fish__rod.is-on{border-color:var(--yellow);background:rgba(255,203,5,.08)}
.fish__rod.is-locked{opacity:.5;cursor:not-allowed}
.fish__rod img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.fish__rodname{display:flex;flex-direction:column;gap:1px;font-size:.87rem}
.fish__rodname em{font-style:normal;font-size:.72rem;color:var(--txt-dim)}
.fish__cast{width:100%}
.fish__bar{width:min(100%,320px);height:7px;border-radius:99px;
  background:var(--ink);overflow:hidden}
.fish__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),#8fd0ff);transition:width .25s}
.fish__prog{font-size:.74rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.fish__note{width:100%;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(255,213,74,.08);border:1px solid rgba(255,213,74,.3)}
.fish__note b{font-size:.83rem;color:var(--shiny)}
.fish__note p{margin:4px 0 0;font-size:.77rem;color:var(--txt-dim);line-height:1.45}

/* ============================================================
   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
   ============================================================ */
.mega{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.mega__tabs{display:flex;align-items:center;gap:6px}
.mega__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}
.mega__tab:hover{color:var(--txt);border-color:var(--shadow)}
.mega__tab.is-on{background:var(--shadow);border-color:var(--shadow);color:#fff}
.mega__progress{margin-left:auto;font-size:.78rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.mega__body{flex:1;min-height:0;overflow-y:auto}

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

.mega__master{display:flex;flex-direction:column;gap:12px;padding:15px;
  border-radius:var(--r);
  background:linear-gradient(135deg,rgba(155,92,255,.12),transparent 62%),
    var(--glass);
  border:1px solid rgba(155,92,255,.34)}
.mega__master.is-beaten{border-color:var(--ok);
  background:linear-gradient(135deg,rgba(63,217,138,.1),transparent 62%),var(--glass)}
.mega__who{display:flex;align-items:center;gap:13px}
.mega__portrait{position:relative;display:grid;place-items:center;
  flex:0 0 74px;height:92px;border-radius:var(--r-sm);
  background:repeating-linear-gradient(45deg,var(--ink-3) 0 8px,var(--ink) 8px 16px);
  border:1px dashed var(--line)}
.mega__portrait span{font-size:1.9rem;font-weight:700;color:var(--txt-dim);
  opacity:.5}
.mega__portrait em{position:absolute;bottom:5px;font-size:.55rem;
  font-style:normal;text-align:center;color:var(--txt-dim);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.25}
.mega__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mega__title{font-size:.72rem;color:var(--shadow);text-transform:uppercase;
  letter-spacing:.06em}
.mega__id b{font-size:1.15rem}
.mega__where{font-size:.78rem;color:var(--txt-dim)}
.mega__ace{width:84px;height:84px;object-fit:contain;image-rendering:pixelated}

.mega__prize{display:flex;flex-direction:column;gap:2px;padding:10px 13px;
  border-radius:var(--r-sm);background:var(--ink);text-align:center}
.mega__prize span{font-size:.74rem;color:var(--txt-dim)}
.mega__prize b{font-size:1rem;color:var(--shiny)}
.mega__clock{padding:9px;border-radius:var(--r-sm);text-align:center;
  font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--ink-2);border:1px solid var(--line)}
.mega__act{display:flex;flex-direction:column;gap:7px}
.mega__act .btn{width:100%}
.mega__note,.mega__done{margin:0;font-size:.78rem;color:var(--txt-dim);
  line-height:1.45;text-align:center}
.mega__done{color:var(--ok)}

.mega__count{display:flex;flex-direction:column;gap:6px;padding:11px 13px;
  border-radius:var(--r);background:var(--glass);
  border:1px solid var(--glass-brd);font-size:.84rem;margin-bottom:10px}
.mega__count b{color:var(--shiny);font-size:1.1rem}
.mega__cbar{height:7px;border-radius:99px;background:var(--ink);overflow:hidden}
.mega__cbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--shadow),var(--shiny));transition:width .3s}
.mega__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:6px}
.mega__stone{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid var(--line);opacity:.4;transition:opacity .2s,border-color .2s}
.mega__stone.is-held{opacity:1;border-color:var(--shiny);
  background:rgba(255,213,74,.07)}
.mega__stone img{width:44px;height:44px;object-fit:contain;
  image-rendering:pixelated}
.mega__stone span{font-size:.66rem;text-align:center;line-height:1.2}

.gym__go--again{margin-top:6px}

@media (max-width:600px){
  .mega__who{flex-wrap:wrap;justify-content:center;text-align:center}
  .mega__ace{width:64px;height:64px}
  .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.
   ============================================================ */
.bbtn--mega{
  background:linear-gradient(135deg,var(--shadow),#c98bff);
  border-color:var(--shadow);color:#fff;
  animation:megaPulse 1.8s ease-in-out infinite}
.bbtn--mega:hover{filter:brightness(1.12)}
@keyframes megaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(155,92,255,.55)}
  50%{box-shadow:0 0 0 7px rgba(155,92,255,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){
  .bbtn--mega{animation:none}
  .bmon--me.is-mega img,.bmon--me.is-mega::before{animation:none}
}

/* ============================================================
   Battle Tower
   The run on one tab, what Battle Points buy on the other. The
   payout for retiring sits next to the button that does it, because
   that is the decision the screen exists to support.
   ============================================================ */
.tower{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.tower__tabs{display:flex;align-items:center;gap:6px}
.tower__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}
.tower__tab:hover{color:var(--txt);border-color:var(--yellow)}
.tower__tab.is-on{background:var(--yellow);border-color:var(--yellow);
  color:#2a2100}
.tower__bp{margin-left:auto;font-size:.82rem;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.tower__body{flex:1;min-height:0;overflow-y:auto}

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

.tower__run{display:flex;flex-direction:column;gap:14px}
.tower__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tower__stat{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 8px;border-radius:var(--r);background:var(--glass);
  border:1px solid var(--glass-brd)}
.tower__stat b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.tower__stat span{font-size:.7rem;color:var(--txt-dim);
  text-transform:uppercase;letter-spacing:.05em}
.tower__stat--bp b{color:var(--yellow)}

.tower__floor{display:flex;flex-direction:column;gap:6px;padding:14px;
  border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,203,5,.1),transparent 60%),
    var(--glass);
  border:1px solid rgba(255,203,5,.3)}
.tower__no{font-size:1.05rem;font-weight:600}
.tower__bar{height:9px;border-radius:99px;background:var(--ink);overflow:hidden}
.tower__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--yellow),#ffe9a3);transition:width .3s}
.tower__lv{font-size:.77rem;color:var(--txt-dim)}

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

.tower__tiers h4{margin:0 0 7px;font-size:.85rem}
.tower__tierlist{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px}
.tower__tier{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 4px;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid var(--line);opacity:.55}
.tower__tier.is-done{opacity:1;border-color:var(--ok)}
.tower__tier span{font-size:.68rem;color:var(--txt-dim)}
.tower__tier b{font-size:.85rem;color:var(--yellow);
  font-variant-numeric:tabular-nums}

/* The exchange */
.tower__shop{display:flex;flex-direction:column;gap:10px}
.tower__wallet{display:flex;align-items:baseline;gap:8px;padding:11px 14px;
  border-radius:var(--r);background:var(--glass);
  border:1px solid var(--glass-brd)}
.tower__wallet b{font-size:1.5rem;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.tower__wallet span{font-size:.78rem;color:var(--txt-dim)}
.tower__cats{display:flex;gap:5px;flex-wrap:wrap}
.tower__cat{padding:5px 11px;border-radius:999px;font-size:.77rem;
  cursor:pointer;background:var(--ink-3);border:1px solid var(--line);
  color:var(--txt-dim);transition:background .15s,color .15s,border-color .15s}
.tower__cat:hover{color:var(--txt);border-color:var(--yellow)}
.tower__cat.is-on{background:var(--yellow);border-color:var(--yellow);
  color:#2a2100}

.tower__items{display:flex;flex-direction:column;gap:6px}
.tower__item{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:var(--r-sm);background:var(--ink-2);border:1px solid var(--line)}
.tower__item.is-poor{opacity:.55}
.tower__item img{width:34px;height:34px;object-fit:contain;
  image-rendering:pixelated;flex:0 0 auto}
.tower__itxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tower__itxt b{font-size:.87rem}
.tower__itxt p{margin:0;font-size:.75rem;color:var(--txt-dim);line-height:1.4}
.tower__held{font-size:.72rem;color:var(--ok)}

@media (max-width:600px){
  .tower__stats{grid-template-columns:1fr 1fr}
  .tower__item{flex-wrap:wrap}
}

/* ============================================================
   Story
   A progress bar and a way back in. The chapter list is
   deliberately not a spoiler list: it shows how far you have come,
   not what is still to happen.
   ============================================================ */
.story{display:flex;flex-direction:column;gap:16px;padding:4px 0}
.story__head{display:flex;flex-direction:column;gap:7px}
.story__bar{height:10px;border-radius:99px;background:var(--ink);
  overflow:hidden}
.story__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#6f35fc,#b18cff);transition:width .4s}
.story__count{font-size:.8rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.story__note{margin:0;font-size:.85rem;color:var(--txt-dim);line-height:1.6}
.story .btn{width:100%}

/* 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 listing shows the whole Pokemon, because buying one you cannot
   inspect is a lottery rather than a trade. The card is therefore
   dense on purpose: art, identity, every IV and EV, the moveset and
   the original trainer, with the price and the action pinned to the
   right where the eye ends up.
   ============================================================ */
.market{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.market__tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.market__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}
.market__tab:hover{color:var(--txt);border-color:var(--yellow)}
.market__tab.is-on{background:var(--yellow);border-color:var(--yellow);color:#2a2100}
.market__money{margin-left:auto;font-size:.85rem;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.market__body{flex:1;min-height:0;overflow-y:auto}

/* Filters */
.mkfilters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin-bottom:10px}
.mkf{padding:6px 9px;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid var(--line);color:var(--txt);font-size:.8rem}
.mkf--text{min-width:130px}
.mkf--num{width:110px}
.mkchk{display:flex;align-items:center;gap:5px;font-size:.8rem;
  color:var(--txt-dim);cursor:pointer}
.mkf__go{padding:6px 14px;font-size:.8rem}

/* The list */
.mklist{display:flex;flex-direction:column;gap:8px}
.mkcard{display:flex;gap:12px;padding:11px 13px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd);
  align-items:stretch}
.mkcard.is-mine{border-color:rgba(255,203,5,.35)}
.mkcard.is-winning{border-color:var(--ok)}

/* The Pokemon half */
.mkmon{display:flex;gap:11px;flex:1;min-width:0}
.mkmon__art{position:relative;flex:0 0 auto;width:74px;height:74px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-2);border-radius:var(--r-sm)}
.mkmon__art img{width:64px;height:64px;object-fit:contain;
  image-rendering:pixelated}
.mktag{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  font-size:.58rem;font-weight:800;letter-spacing:.04em;padding:1px 6px;
  border-radius:999px;white-space:nowrap}
.mktag--shiny{background:var(--yellow);color:#2a2100}
.mktag--shadow{background:#6f35fc;color:#fff}
.mkmon__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mkmon__head{display:flex;align-items:baseline;gap:7px}
.mkmon__head b{font-size:.95rem}
.mkmon__lv{font-size:.75rem;color:var(--txt-dim)}
.mkmon__sex{font-size:.8rem}
.mkmon__sex.is-male{color:#68a0ff}
.mkmon__sex.is-female{color:#ff7fa8}
.mkmon__meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.72rem;
  color:var(--txt-dim)}

/* IVs and EVs, the numbers a buyer is really here for. */
.mkiv{display:flex;flex-direction:column;gap:3px}
.mkiv__sum{font-size:.7rem;color:var(--txt-dim)}
.mkiv__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.mkiv__cell{display:flex;flex-direction:column;align-items:center;
  padding:3px 2px;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid var(--line);line-height:1.15}
.mkiv__cell em{font-size:.56rem;color:var(--txt-dim);font-style:normal}
.mkiv__cell b{font-size:.76rem;font-variant-numeric:tabular-nums}
.mkiv__cell i{font-size:.54rem;color:var(--ok);font-style:normal}
.mkiv__cell.is-max{border-color:var(--yellow)}
.mkiv__cell.is-max b{color:var(--yellow)}
.mkiv__cell.is-good b{color:var(--ok)}
.mkiv__cell.is-poor b{color:var(--bad,#ff6b6b)}

.mkmoves{display:flex;gap:4px;flex-wrap:wrap}
.mkmove{font-size:.66rem;padding:2px 7px;border-radius:999px;
  background:var(--ink-3);border:1px solid var(--line);color:var(--txt-dim)}
.mkot{display:flex;align-items:center;gap:5px;font-size:.68rem;
  color:var(--txt-dim)}
.mkot img{width:14px;height:14px;object-fit:contain;image-rendering:pixelated}
.mkot em{font-style:normal;opacity:.65}

/* The price half */
.mkcard__deal{flex:0 0 176px;display:flex;flex-direction:column;gap:6px;
  justify-content:center;padding-left:11px;
  border-left:1px solid var(--glass-brd)}
.mkprice{display:flex;flex-direction:column;gap:1px}
.mkprice__label{font-size:.65rem;color:var(--txt-dim);
  text-transform:uppercase;letter-spacing:.05em}
.mkprice b{font-size:1.15rem;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.mkprice em{font-size:.66rem;color:var(--txt-dim);font-style:normal}
.mkends{font-size:.72rem;color:var(--txt-dim);font-variant-numeric:tabular-nums}
.mkseller{font-size:.68rem;color:var(--txt-dim)}
.mkbtn{width:100%;font-size:.8rem;padding:7px 10px}
.mknote{margin:0;font-size:.7rem;color:var(--txt-dim);line-height:1.4}
.mkstate{font-size:.75rem;font-weight:700}
.mkstate.is-sold{color:var(--ok)}
.mkstate.is-expired,.mkstate.is-cancelled{color:var(--txt-dim)}

/* Selling */
.mksell{display:flex;flex-direction:column;gap:8px}
.mksell__row{display:flex;gap:12px;padding:11px 13px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-brd)}
.mksell__form{flex:0 0 190px;display:flex;flex-direction:column;gap:6px;
  justify-content:center;padding-left:11px;
  border-left:1px solid var(--glass-brd)}
.mksell__kind{display:flex;flex-direction:column;gap:3px;font-size:.74rem;
  color:var(--txt-dim)}
.mksell__kind label{display:flex;align-items:center;gap:5px;cursor:pointer}

/* The post */
.mkmail{display:flex;flex-direction:column;gap:6px}
.mkmail__row{display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:9px 12px;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid var(--line);font-size:.8rem}
.mkmail__row b{color:var(--yellow);font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .mkcard,.mksell__row{flex-direction:column}
  .mkcard__deal,.mksell__form{flex:1 1 auto;padding-left:0;border-left:0;
    border-top:1px solid var(--glass-brd);padding-top:9px}
  .mkiv__grid{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   Pokemon at work
   The crew panel shared by the Mining Site and the Fishing Spot.
   Three things at a glance: how full the crates are, who is
   working, and how long until the next item.
   ============================================================ */
/* The crew panel is appended inside whatever layout each site
   already uses. The Fishing screen is a flex row, so without this the
   panel is treated as a column and squeezed to half width; spanning
   the full row keeps both sites looking the same. */
.work__mount{margin-top:14px;width:100%;flex:1 0 100%}
.work{display:flex;flex-direction:column;gap:11px;
  padding-top:12px;border-top:1px solid var(--glass-brd)}

.work__head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.work__stack{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.work__bar{height:9px;border-radius:99px;background:var(--ink);overflow:hidden}
.work__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--ok),#9ff0c0);transition:width .4s}
.work__bar.is-full i{background:linear-gradient(90deg,var(--yellow),#ffe9a3)}
.work__count{font-size:.74rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}
.work__rate{display:flex;flex-direction:column;gap:2px;text-align:right;
  font-size:.74rem;color:var(--txt-dim)}
.work__rate b{color:var(--txt)}
.work__rate em{font-style:normal;font-variant-numeric:tabular-nums}
.work__rate em.is-full{color:var(--yellow)}

.work__crew h4{margin:0 0 7px;font-size:.85rem;display:flex;
  justify-content:space-between;align-items:baseline}
.work__crew h4 span{font-size:.72rem;color:var(--txt-dim);font-weight:400}
.work__slots{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;
  margin-bottom:8px}
.workmon{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 6px;border-radius:var(--r-sm);background:var(--ink-2);
  border:1px solid var(--line)}
.workmon img{width:42px;height:42px;object-fit:contain;
  image-rendering:pixelated}
.workmon b{font-size:.76rem;text-align:center;line-height:1.2}
.workmon em{font-size:.66rem;color:var(--txt-dim);font-style:normal}
.workmon.is-gone{opacity:.5;justify-content:center;min-height:80px}
.work__off{margin-top:4px;font-size:.64rem;padding:2px 8px;border-radius:999px;
  background:var(--ink-3);border:1px solid var(--line);color:var(--txt-dim);
  cursor:pointer}
.work__off:hover{color:var(--txt);border-color:var(--yellow)}
.work__empty{margin:0 0 8px;font-size:.78rem;color:var(--txt-dim);
  line-height:1.5}
.work__note{margin:0;font-size:.7rem;color:var(--txt-dim);line-height:1.5}

/* Choosing who goes */
.workpick{margin-top:4px;padding:10px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line)}
.workpick h4{margin:0 0 8px;font-size:.82rem}
.workpick__list{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:5px;
  max-height:230px;overflow-y:auto;margin-bottom:8px}
.workpick__mon{display:flex;align-items:center;gap:7px;padding:6px 8px;
  border-radius:var(--r-sm);background:var(--ink-3);border:1px solid var(--line);
  cursor:pointer;text-align:left;transition:border-color .15s}
.workpick__mon:hover{border-color:var(--yellow)}
.workpick__mon.is-suited{border-color:rgba(119,204,85,.45)}
.workpick__mon img{width:32px;height:32px;object-fit:contain;
  image-rendering:pixelated;flex:0 0 auto}
.workpick__name{flex:1;min-width:0;display:flex;flex-direction:column;
  font-size:.76rem;line-height:1.2}
.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__team{font-size:.6rem;color:var(--txt-dim)}

/* What listing costs, said before the seller commits rather than
   after. */
.mksell__terms{margin:0 0 8px;font-size:.76rem;color:var(--txt-dim);
  line-height:1.5}
.mksell__terms b{color:var(--yellow)}
.mksell__tax{font-size:.7rem;color:var(--txt-dim);
  font-variant-numeric:tabular-nums}