:root {
  --poke-red: #e3350d;
  --poke-red-dark: #8b1a0a;
  --poke-red-light: #ff5a36;
  --poke-yellow: #ffcb05;
  --poke-blue: #3b4cca;
  --panel-bg: rgba(12, 16, 24, 0.9);
  --panel-border: rgba(139, 195, 74, 0.22);
  --emerald: #8bc34a;
  --dex-lcd: #98d4a8;
  --dex-lcd-glow: rgba(139, 195, 74, 0.35);
  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --arcade-side-w: clamp(172px, 16.5vw, 248px);
  --arcade-deck-h: clamp(64px, 10vh, 88px);
  --arcade-ui-scale: 1.32;
  --arcade-cabinet-border: #5c1010;
  --arcade-cabinet-mid: #b71c1c;
  --arcade-cabinet-light: #e53935;
  --arcade-purple: #c62828;
  --arcade-purple-dark: #4a0a0a;
  --arcade-neon: #8bc34a;
  /* Game Boy × Pokédex shared palette */
  --gb-shell: #c62828;
  --gb-shell-dark: #7f1010;
  --gb-shell-light: #ef5350;
  --gb-bezel: #1a1a1a;
  --gb-bezel-mid: #2d2d2d;
  --gb-lcd-bg: #9bbc0f;
  --gb-lcd-mid: #8bac0f;
  --gb-lcd-dark: #306230;
  --gb-lcd-text: #0f380f;
  --gb-lcd-muted: #1a4a1a;
  --gb-lcd-highlight: #c4d44a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background:
    linear-gradient(180deg, #5c94fc 0%, #87b8ff 42%, #58a038 42%, #2d6a1e 100%);
  font-family: var(--font-body);
}
html {
  --app-height: 100dvh;
  --app-offset-top: 0px;
}

/* ── Arcade room + machine shell ── */
.arcade-room {
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #0a1808;
}
.arcade-room-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.arcade-room > .arcade-machine {
  position: relative;
  z-index: 1;
}

.arcade-machine {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  filter: none;
}

.arcade-machine-glow,
.arcade-machine-rim {
  display: none;
}

/* Desktop — full-height Pokédex cabinet, same proportions as 1320×860 reference */
@media (min-width: 901px) {
  .arcade-room {
    align-items: center;
    justify-content: center;
    padding: clamp(0.2rem, 0.35vh, 0.4rem) clamp(0.35rem, 0.8vw, 0.75rem);
    background: #0a1808;
  }
  .arcade-room::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0,0,0,0.38) 100%);
    z-index: 0;
  }
  .arcade-machine {
    position: relative;
    z-index: 1;
    container-type: size;
    container-name: dex-machine;
    --machine-pad-y: clamp(0.2rem, 0.35vh, 0.4rem);
    --machine-pad-x: clamp(0.35rem, 0.8vw, 0.75rem);
    aspect-ratio: 1320 / 860;
    height: min(
      calc(100dvh - 2 * var(--machine-pad-y)),
      calc((100vw - 2 * var(--machine-pad-x)) * 860 / 1320)
    );
    width: min(
      calc(100vw - 2 * var(--machine-pad-x)),
      calc((100dvh - 2 * var(--machine-pad-y)) * 1320 / 860)
    );
    flex: none;
    border-radius: 22px 22px 20px 20px;
    overflow: hidden;
    filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.62));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 0, 0, 0.65);
  }
  .arcade-cabinet {
    --arcade-side-w: clamp(160px, 16.8cqw, 320px);
  }
  .arcade-center {
    --arcade-deck-h: clamp(56px, 9cqh, 100px);
  }
  .arcade-left #battle-team-aside {
    flex: 0 1 auto;
    max-height: 48cqh;
    padding: 0.32rem 0.28rem;
    overflow: hidden;
  }
  .arcade-left .battle-team-hint { display: none; }
  .arcade-left .panel-title.battle-subtitle {
    font-family: var(--font-pixel);
    font-size: 0.52rem !important;
    margin-bottom: 0.28rem;
    letter-spacing: 0.1em;
  }
  .arcade-left .battle-team-panel { gap: 0.28rem; }
  .arcade-left .battle-team-slot {
    padding: 0.28rem 0.24rem 0.3rem;
    gap: 0.14rem;
    min-height: 96px;
  }
  .arcade-left .battle-team-slot-num { font-size: 0.52rem; }
  .arcade-left .battle-team-slot img { width: 46px; height: 46px; }
  .arcade-left .battle-team-slot-name { font-size: 0.72rem; font-weight: 800; }
  .arcade-left .battle-team-slot-lv { font-size: 0.58rem; font-weight: 700; }
  .arcade-left .battle-team-stat-label { font-size: 0.44rem; }
  .arcade-left .battle-team-stat-val { font-size: 0.54rem; font-weight: 700; }
  .arcade-left .battle-team-slot-hp,
  .arcade-left .battle-team-slot-exp { height: 8px; }
  .arcade-left .battle-team-slot-bars { gap: 0.22rem; }
  .arcade-left .battle-team-stat-row { grid-template-columns: 1.45rem minmax(0, 1fr) auto; gap: 0.24rem; }
  .arcade-left .battle-team-stat-label { color: var(--gb-lcd-dark); }
  .arcade-left .battle-team-stat-val { color: var(--gb-lcd-text); }
  .arcade-left .battle-team-slot-hp,
  .arcade-left .battle-team-slot-exp {
    background: rgba(15, 56, 15, 0.2);
    border-color: rgba(15, 56, 15, 0.35);
  }
  .arcade-left .battle-team-slot-empty { font-size: 0.58rem; min-height: 56px; }
  .arcade-left .battle-team-add-label { font-size: 0.56rem; }
  .arcade-left .dex-dpad--cabinet {
    margin-top: auto;
    margin-bottom: 0.1rem;
    padding: 0.35rem 0.4rem 0.42rem;
  }
  .arcade-left .dpad--cabinet { width: clamp(96px, 11.5cqw, 128px); height: clamp(96px, 11.5cqw, 128px); }
  .arcade-marquee {
    border-radius: 22px 22px 0 0;
    padding: 0.55rem 1rem 0.7rem;
  }
  .arcade-plinth {
    border-radius: 0 0 18px 18px;
  }
  .arcade-deck {
    margin: 0 0.2rem 0.2rem;
    border-radius: 0 0 12px 12px;
  }
  .arcade-cabinet {
    box-shadow:
      inset 12px 0 32px rgba(0,0,0,0.38),
      inset -12px 0 32px rgba(0,0,0,0.38),
      inset 0 0 80px rgba(0,0,0,0.15);
  }
  .arcade-machine-glow,
  .arcade-machine-rim {
    display: block;
  }
  .arcade-machine-glow {
    position: absolute;
    inset: -3px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255, 203, 5, 0.22) 0%, rgba(155, 188, 15, 0.12) 50%, rgba(227, 53, 13, 0.28) 100%);
    filter: blur(10px);
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;
    animation: cabinetGlowPulse 6s ease-in-out infinite;
  }
  .arcade-machine-rim {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    box-shadow:
      inset 0 0 0 2px rgba(255, 203, 5, 0.12),
      inset 0 3px 0 rgba(255, 255, 255, 0.14),
      inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  }
  .arcade-screen-shell {
    margin: 0.28rem;
    padding: 0.42rem;
    border-width: 0;
    border-radius: 14px 14px 10px 10px;
    background: linear-gradient(165deg, var(--gb-bezel-mid) 0%, var(--gb-bezel) 100%);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.08),
      inset 0 -4px 10px rgba(0, 0, 0, 0.45),
      0 0 0 3px #000;
  }
  .arcade-crt-frame {
    border-radius: 8px 8px 6px 6px;
    background: linear-gradient(180deg, #242424 0%, #121212 100%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.65);
  }
  .arcade-viewport-slot {
    padding: 0.38rem;
    border-radius: 6px;
    background:
      repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.05) 0 2px, transparent 2px 4px),
      linear-gradient(180deg, #1a2418 0%, #0a1008 100%);
    box-shadow: inset 0 8px 22px rgba(0, 0, 0, 0.72);
  }
  .arcade-crt-glass {
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16));
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    transform: none;
    border: 3px solid var(--gb-lcd-dark);
    box-shadow:
      inset 0 0 24px rgba(15, 56, 15, 0.22),
      inset 0 2px 0 rgba(196, 212, 74, 0.25);
  }
  .arcade-crt-glass::before {
    background:
      radial-gradient(ellipse at 50% 28%, rgba(196, 212, 74, 0.1) 0%, transparent 52%),
      radial-gradient(ellipse at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.28) 100%);
  }
  .arcade-crt-filter::before {
    background:
      radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.48) 100%),
      repeating-linear-gradient(
        0deg,
        rgba(15, 56, 15, 0) 0px,
        rgba(15, 56, 15, 0) 2px,
        rgba(15, 56, 15, 0.08) 2px,
        rgba(15, 56, 15, 0.08) 3px
      );
    opacity: 0.72;
  }
  .arcade-plinth {
    height: 30px;
    gap: 0.65rem;
  }
  .plinth-brand {
    color: rgba(255,203,5,0.42);
    text-shadow: 0 0 12px rgba(255,203,5,0.15);
  }
}

.arcade-marquee {
  position: relative;
  flex-shrink: 0;
  padding: 0.55rem 0.85rem 0.48rem;
  background: linear-gradient(180deg, var(--gb-shell-light) 0%, var(--gb-shell) 38%, var(--gb-shell-dark) 100%);
  border: 4px solid #000;
  border-bottom: none;
  border-radius: 0;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset 0 -8px 16px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.dex-lid-badge {
  position: absolute;
  top: 0.5rem;
  left: clamp(0.85rem, 3vw, 1.75rem);
  right: auto;
  transform: none;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.dex-lid-badge .pokeball-lg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #fff 0%, #fff 46%, #111 46%, #111 54%, var(--poke-red) 54%, #b71c1c 100%);
  border: 3px solid #111;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.45);
  position: relative;
}
.dex-lid-badge .pokeball-lg::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
}

.dex-hinge {
  position: absolute;
  bottom: 0;
  left: 6%;
  right: 6%;
  height: 8px;
  background: linear-gradient(180deg, #111, #333 45%, #111);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.arcade-marquee-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 80%, rgba(255,203,5,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(255,203,5,0.12) 0%, transparent 45%);
  pointer-events: none;
}

.arcade-marquee-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  padding-left: clamp(3.6rem, 9vw, 4.8rem);
  padding-right: clamp(0.75rem, 3vw, 1.75rem);
}
.marquee-poke { display: none; }
.marquee-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.62rem, 1.35vw, 0.88rem);
  line-height: 1.35;
  color: var(--poke-yellow);
  letter-spacing: 0.08em;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 rgba(0, 0, 0, 0.5);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.marquee-edition {
  font-family: var(--font-pixel);
  font-size: clamp(0.38rem, 1.15vw, 0.52rem);
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.12em;
  text-transform: none;
}

.marquee-starters {
  position: absolute;
  right: clamp(0.85rem, 3vw, 1.75rem);
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.35rem;
  z-index: 2;
}
.marquee-starter {
  width: clamp(28px, 2.8vw, 36px);
  height: clamp(28px, 2.8vw, 36px);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.22);
  background-size: 88%;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  image-rendering: pixelated;
}
.marquee-starter--1 {
  background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png');
}
.marquee-starter--4 {
  background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png');
}
.marquee-starter--7 {
  background-image: url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png');
}

.marquee-type-row { display: none; }
.type-chip {
  font-family: var(--font-pixel);
  font-size: 0.2rem;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.28rem;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.35);
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.type-chip--fire { background: #f08030; color: #fff; }
.type-chip--water { background: #6890f0; color: #fff; }
.type-chip--grass { background: #78c850; color: #fff; }
.type-chip--elec { background: #f8d030; color: #222; }

.cabinet-vert-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--font-pixel);
  font-size: 0.34rem;
  color: rgba(255,203,5,0.12);
  letter-spacing: 0.45em;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(255,203,5,0.08);
}
.cabinet-vert-brand--right {
  color: rgba(255,255,255,0.1);
  letter-spacing: 0.55em;
}

.plinth-ball {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fff 0%, #ddd 38%, #999 100%);
  border: 2px solid #222;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45);
  position: relative;
}
.plinth-ball::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #222;
}

.arcade-marquee-lights {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.38rem;
  padding-top: 0.32rem;
  border-top: 2px solid rgba(0, 0, 0, 0.28);
  z-index: 1;
}
.dex-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
}
.dex-led-on,
.dex-led-power {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.45);
  animation: loginPowerBlink 2.4s ease-in-out infinite;
}
.dex-led-scan,
.dex-led-blink {
  background: #fde047;
  box-shadow: 0 0 6px rgba(253, 224, 71, 0.55);
}
.dex-led-scan,
.dex-led-blink {
  animation: dexLedBlink 1.2s ease-in-out infinite;
}
@keyframes dexLedBlink {
  0%, 100% { opacity: 0.35; background: #333; box-shadow: none; }
  50% { opacity: 1; background: var(--dex-lcd); box-shadow: 0 0 10px var(--dex-lcd-glow); }
}

.arcade-plinth {
  flex-shrink: 0;
  height: 22px;
  background: linear-gradient(180deg, var(--gb-shell) 0%, var(--gb-shell-dark) 100%);
  border: 4px solid #000;
  border-top: 3px solid rgba(0, 0, 0, 0.45);
  border-radius: 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plinth-brand {
  font-family: var(--font-pixel);
  font-size: 0.24rem;
  color: rgba(255, 203, 5, 0.72);
  letter-spacing: 0.12em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

/* ── Arcade cabinet shell ── */
.arcade-cabinet {
  display: grid;
  grid-template-columns: var(--arcade-side-w) minmax(0, 1fr) var(--arcade-side-w);
  flex: 1;
  min-height: 0;
  gap: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--gb-shell) 0%, var(--gb-shell-dark) 100%);
  border-left: 4px solid #000;
  border-right: 4px solid #000;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -10px 20px rgba(0, 0, 0, 0.25);
}

.arcade-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.arcade-side-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.arcade-side-art-left {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 8%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.05) 0%, transparent 8%),
    repeating-linear-gradient(
      -12deg,
      transparent 0 18px,
      rgba(0,0,0,0.06) 18px 20px
    );
}
.arcade-side-art-right {
  background:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.06) 0%, transparent 8%),
    radial-gradient(circle at 20% 70%, rgba(255,255,255,0.05) 0%, transparent 8%),
    repeating-linear-gradient(
      12deg,
      transparent 0 18px,
      rgba(0,0,0,0.06) 18px 20px
    );
}

.arcade-left,
.arcade-right {
  background: linear-gradient(180deg, var(--gb-shell) 0%, var(--gb-shell-dark) 55%, #5a1010 100%);
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  border-bottom: 3px solid rgba(0, 0, 0, 0.45);
  padding: 0.55rem 0.5rem;
  gap: 0.5rem;
  overflow: hidden;
  position: relative;
  font-size: calc(1rem * var(--arcade-ui-scale));
}

.arcade-left > *,
.arcade-right > *:not(.arcade-side-art) {
  position: relative;
  z-index: 1;
}

.arcade-left {
  border-right: 4px solid rgba(0,0,0,0.5);
  box-shadow: inset -6px 0 16px rgba(0,0,0,0.35);
}

.arcade-right {
  border-left: 4px solid rgba(0,0,0,0.5);
  box-shadow: inset 6px 0 16px rgba(0,0,0,0.35);
}

.arcade-side-brand {
  text-align: center;
  padding: 0.2rem 0;
}
.arcade-side-logo {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.46rem;
  color: var(--poke-yellow);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
}
.arcade-side-edition {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.18em;
  margin-top: 0.2rem;
}

.arcade-deco { flex-shrink: 0; }

/* D-pad (classic Pokédex controls) */
.dex-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.25rem auto 0.35rem;
  padding: 0.35rem;
}
.dex-dpad--cabinet {
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0.12rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}
.dex-dpad-label {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.3rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.38rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.dpad {
  position: relative;
  width: 88px;
  height: 88px;
}
.dpad--cabinet {
  width: clamp(108px, 13cqw, 136px);
  height: clamp(108px, 13cqw, 136px);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
}
.dpad-up, .dpad-down, .dpad-left, .dpad-right, .dpad-center,
.dpad-btn {
  position: absolute;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.dpad-up, .dpad-down, .dpad-left, .dpad-right, .dpad-center {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.24) 0%, transparent 44%),
    linear-gradient(165deg, #a1a9b8 0%, #52525b 44%, #27272a 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 3px 0 rgba(10, 10, 10, 0.94),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 7px rgba(0, 0, 0, 0.2);
}
.dpad-btn:active, .dpad-btn.active {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42) 0%, transparent 44%),
    linear-gradient(165deg, #ffe566 0%, var(--poke-yellow) 42%, #c9a012 100%);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 0 12px rgba(255, 203, 5, 0.45),
    0 1px 0 rgba(122, 90, 12, 0.9),
    inset 0 2px 0 rgba(255, 255, 255, 0.38);
}
.dpad-center {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 44%),
    radial-gradient(circle at 38% 32%, #fff8d6 0%, var(--poke-yellow) 50%, #c9a012 100%) !important;
  border: 2px solid #7a5a0c !important;
  box-shadow:
    0 2px 0 rgba(74, 56, 8, 0.88),
    inset 0 2px 0 rgba(255, 255, 255, 0.48) !important;
}
.dpad-btn.active.dpad-up { transform: translateX(-50%) translateY(1px); }
.dpad-btn.active.dpad-down { transform: translateX(-50%) translateY(-1px); }
.dpad-btn.active.dpad-left { transform: translateY(-50%) translateX(1px); }
.dpad-btn.active.dpad-right { transform: translateY(-50%) translateX(-1px); }
.dpad-center {
  pointer-events: none;
}
.dpad-center {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 5px;
  z-index: 2;
}
.dpad--cabinet .dpad-center {
  width: 36%;
  height: 36%;
  border-radius: 6px;
}
.dpad-up, .dpad-down {
  left: 50%; transform: translateX(-50%);
  width: 28px; height: 32px;
  border-radius: 6px 6px 3px 3px;
}
.dpad--cabinet .dpad-up,
.dpad--cabinet .dpad-down {
  width: 34%;
  height: 38%;
  border-radius: 8px 8px 4px 4px;
}
.dpad-up { top: 0; }
.dpad-up::after,
.dpad-down::after,
.dpad-left::after,
.dpad-right::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  opacity: 0.35;
  pointer-events: none;
}
.dpad-up::after {
  top: 28%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(255, 255, 255, 0.85);
}
.dpad-down { bottom: 0; border-radius: 3px 3px 6px 6px; }
.dpad-down::after {
  bottom: 28%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(255, 255, 255, 0.85);
}
.dpad-left, .dpad-right {
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 28px;
  border-radius: 6px;
}
.dpad--cabinet .dpad-left,
.dpad--cabinet .dpad-right {
  width: 38%;
  height: 34%;
  border-radius: 8px;
}
.dpad-left { left: 0; }
.dpad-left::after {
  left: 30%;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid rgba(255, 255, 255, 0.85);
}
.dpad-right { right: 0; }
.dpad-right::after {
  right: 30%;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid rgba(255, 255, 255, 0.85);
}
.dpad--cabinet .dpad-up::after {
  border-left-width: 6px;
  border-right-width: 6px;
  border-bottom-width: 8px;
}
.dpad--cabinet .dpad-down::after {
  border-left-width: 6px;
  border-right-width: 6px;
  border-top-width: 8px;
}
.dpad--cabinet .dpad-left::after,
.dpad--cabinet .dpad-right::after {
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-right-width: 8px;
  border-left-width: 8px;
}

.arcade-score-box {
  text-align: center;
  padding: 0.45rem 0.35rem;
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--gb-lcd-bg) 0%, var(--gb-lcd-mid) 100%);
  border: 2px solid var(--gb-lcd-dark);
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: inset 0 2px 0 rgba(196, 212, 74, 0.25);
}
.dex-counter-box .arcade-score-label {
  color: var(--gb-lcd-muted);
}
.arcade-score-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--gb-lcd-muted);
  letter-spacing: 0.1em;
  margin-bottom: 0.28rem;
}
.arcade-score-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gb-lcd-dark);
  text-shadow: 1px 1px 0 rgba(196, 212, 74, 0.55);
  letter-spacing: 0.05em;
}

.arcade-pika-deco {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: auto;
  margin: auto auto 0;
  opacity: 0.85;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  pointer-events: none;
}
.arcade-right .arcade-score-box { order: 2; }
.arcade-right .map2d-panel { order: 3; }
.arcade-right .dex-controls { order: 4; }
.arcade-right .arcade-pika-right { order: 5; width: 88px; height: 88px; }

.arcade-left .hud-quest { flex-shrink: 0; }
.arcade-left .global-chat { flex-shrink: 1; order: 0; }
.arcade-left .kintara-panel,
.arcade-right .kintara-panel {
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--gb-lcd-bg) 0%, var(--gb-lcd-mid) 100%);
  border: 2px solid var(--gb-lcd-dark);
  border-radius: 4px;
  box-shadow:
    inset 0 0 16px rgba(15, 56, 15, 0.14),
    inset 0 2px 0 rgba(196, 212, 74, 0.28);
  backdrop-filter: none;
  color: var(--gb-lcd-text);
}
.arcade-left .panel-title,
.arcade-right .panel-title {
  color: var(--gb-lcd-dark);
  border-bottom-color: rgba(15, 56, 15, 0.22);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.36rem;
  padding-bottom: 0.28rem;
  border-bottom: 2px solid rgba(15, 56, 15, 0.18);
}
.arcade-left .battle-subtitle,
.arcade-right .hud-lb-self,
.arcade-right .map2d-title {
  color: var(--gb-lcd-muted);
}
.arcade-left .quest-name {
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  line-height: 1.55;
  color: var(--gb-lcd-text);
  letter-spacing: 0.04em;
}
.arcade-left .quest-desc {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.45;
  color: var(--gb-lcd-muted);
  margin: 0.3rem 0 0.45rem;
}
.arcade-left .battle-team-slot-name,
.arcade-left .battle-team-slot-lv,
.arcade-left .battle-team-stat-label,
.arcade-left .battle-team-stat-val,
.arcade-right .hud-lb-row,
.arcade-right .map2d-region {
  color: var(--gb-lcd-text);
}
.arcade-right .hud-lb-self {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--gb-lcd-muted);
}
.arcade-right .hud-lb-row {
  font-size: 0.58rem;
}
.arcade-right .hud-lb-rank {
  font-size: 0.62rem;
}
.arcade-right .quality-btn {
  color: var(--gb-lcd-text);
  border-color: rgba(15, 56, 15, 0.35);
  background: rgba(255, 255, 255, 0.2);
}
.arcade-right .quality-btn.active {
  color: var(--gb-lcd-dark);
  border-color: var(--gb-lcd-dark);
  background: rgba(196, 212, 74, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.arcade-left .arcade-score-box { flex-shrink: 0; }
.arcade-left .dex-dpad--cabinet { flex-shrink: 0; z-index: 2; }

.arcade-header-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.35rem;
  text-align: center;
  flex-shrink: 0;
  border: 2px solid var(--gb-lcd-dark);
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--gb-lcd-bg) 0%, var(--gb-lcd-mid) 100%);
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(196, 212, 74, 0.25);
}
.arcade-header-title {
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  color: var(--gb-lcd-dark);
  letter-spacing: 0.06em;
}
.arcade-header-sub {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--gb-lcd-muted);
}

.pokeball-lg {
  width: 18px; height: 18px;
}
.dex-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding: 0.5rem 0 0.35rem;
}
.dex-btn-row {
  display: flex;
  gap: 0.65rem;
  padding: 0.35rem 0.55rem;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.45);
}
.dex-btn-label {
  font-family: var(--font-pixel);
  font-size: 0.24rem;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.12em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}
.dex-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 38% 32%, #fff8d6 0%, #f0d050 38%, #c9a012 100%);
  border: 2px solid #7a5a0c;
  box-shadow:
    0 3px 0 rgba(74, 56, 8, 0.85),
    inset 0 2px 0 rgba(255, 255, 255, 0.52);
  cursor: pointer;
  font-family: var(--font-pixel);
  font-size: 0.34rem;
  color: #2a1810;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
}
.dex-btn .mob-glyph {
  width: 58%;
  height: 58%;
  margin: 0;
  pointer-events: none;
}
#dex-btn-e .mob-glyph-interact { color: rgba(255, 255, 255, 0.95); }
#dex-btn-space .mob-glyph-battle::before { color: #fff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45)); }
.dex-btn:hover { filter: brightness(1.12); }
.dex-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(74, 56, 8, 0.75), inset 0 2px 4px rgba(0, 0, 0, 0.22);
}
.dex-btn-main {
  width: 44px;
  height: 44px;
  font-size: 0.5rem;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 38% 32%, #ff9a85 0%, #e3350d 45%, #9b1c1c 100%);
  border-color: #6b0f0f;
  box-shadow:
    0 3px 0 rgba(74, 8, 8, 0.88),
    inset 0 2px 0 rgba(255, 255, 255, 0.38);
}
.dex-btn-main:active { transform: translateY(4px); }

/* ── Pokédex screen area ── */
.arcade-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
  background: linear-gradient(180deg, var(--gb-shell-dark) 0%, #3a0a0a 100%);
  border-left: 3px solid rgba(0, 0, 0, 0.45);
  border-right: 3px solid rgba(0, 0, 0, 0.45);
  padding: 0.35rem 0.35rem 0;
}

.arcade-screen-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, var(--gb-bezel-mid) 0%, var(--gb-bezel) 100%);
  border: 3px solid #000;
  border-radius: 12px 12px 8px 8px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 10px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  margin: 0.15rem;
  padding: 0.38rem;
}

.arcade-crt-hood,
.dex-screen-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.65rem;
  background: linear-gradient(180deg, #2e2e2e 0%, #181818 100%);
  border-bottom: 2px solid #0a0a0a;
}
.hood-label {
  font-family: var(--font-pixel);
  font-size: clamp(0.44rem, 1.1vw, 0.58rem);
  color: var(--poke-yellow);
  letter-spacing: 0.12em;
  text-shadow: 2px 2px 0 #000;
  flex-shrink: 0;
}
.hood-online {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.2rem 0.45rem 0.2rem 0.35rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hood-online-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.85);
  animation: loginPowerBlink 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.hood-online-text {
  font-family: var(--font-pixel);
  font-size: clamp(0.38rem, 1vw, 0.48rem);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.hood-online-text strong {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.75vw, 0.92rem);
  font-weight: 800;
  color: #4ade80;
  margin-left: 0.15rem;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
}
.dex-scan-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.75);
  animation: loginPowerBlink 2.4s ease-in-out infinite;
}
.hood-screw {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #888, #333);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}

.arcade-bezel-top { display: none; }

.arcade-crt-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.28rem 0.32rem 0.38rem;
  gap: 0.28rem;
  background: linear-gradient(180deg, #242424 0%, #121212 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
}

/* 16:9 game viewport — letterbox in remaining frame space */
.arcade-viewport-slot {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.05) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #1a2418 0%, #0a1008 100%);
  border-radius: 4px;
  container-type: size;
  container-name: dex-viewport;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.65);
  padding: 0.32rem;
}

.arcade-crt-glass {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  width: min(100cqw, calc(100cqh * 16 / 9));
  height: min(100cqh, calc(100cqw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: #0a120a;
  border: 3px solid var(--gb-lcd-dark);
  box-shadow:
    inset 0 0 24px rgba(15, 56, 15, 0.18),
    inset 0 2px 0 rgba(196, 212, 74, 0.25);
  transform: none;
}

@supports not (width: 1cqw) {
  .arcade-crt-glass {
    width: 100%;
    height: auto;
    max-height: 100%;
  }
}
.arcade-crt-glass::before {
  content: '';
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(139, 195, 74, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.2) 100%);
  border-radius: inherit;
}
.arcade-crt-glass::after {
  content: '';
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
  border-radius: inherit;
  opacity: 0.2;
}

.arcade-crt-filter {
  position: absolute;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  box-shadow:
    inset 0 0 100px rgba(0,0,0,0.42),
    inset 0 0 0 2px rgba(139, 195, 74, 0.06);
}
.arcade-crt-glass #game-canvas {
  filter: none;
}
.arcade-crt-filter::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 48%, rgba(15, 56, 15, 0.22) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(15, 56, 15, 0) 0px,
      rgba(15, 56, 15, 0) 3px,
      rgba(15, 56, 15, 0.05) 3px,
      rgba(15, 56, 15, 0.05) 4px
    );
  opacity: 0.32;
  animation: crtFlicker 4s ease-in-out infinite;
}
.arcade-crt-filter::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(139,195,74,0.05) 0%, transparent 58%),
    linear-gradient(90deg, rgba(255,0,0,0.012) 0%, transparent 35%, transparent 65%, rgba(0,80,255,0.012) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.35;
}
@keyframes crtFlicker {
  0%, 100% { opacity: 0.68; }
  50% { opacity: 0.78; }
}
body.in-battle .arcade-crt-filter { z-index: 46; }

.arcade-deck,
.dex-lower-shell {
  position: relative;
  flex-shrink: 0;
  min-height: var(--arcade-deck-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0 0.15rem 0.35rem;
  padding: 0.45rem 0.75rem 0.5rem;
  background: linear-gradient(180deg, var(--gb-bezel-mid) 0%, var(--gb-bezel) 100%);
  border: 3px solid #000;
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
.dex-status-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
}
.dex-led-strip {
  display: flex;
  gap: 0.35rem;
}
.dex-status-text {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.06em;
  animation: dexStatusPulse 2s ease-in-out infinite;
}
@keyframes dexStatusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.dex-hint-bar {
  width: 100%;
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, var(--gb-lcd-bg) 0%, var(--gb-lcd-mid) 100%) !important;
  border: 2px solid var(--gb-lcd-dark) !important;
  color: var(--gb-lcd-text) !important;
  border-radius: 3px !important;
}
.dex-hint-bar strong { color: var(--gb-lcd-dark); }
.arcade-deck-slope {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 35%);
  pointer-events: none;
}

.dex-exit-btn {
  position: fixed;
  top: max(0.4rem, env(safe-area-inset-top));
  right: max(0.4rem, env(safe-area-inset-right));
  z-index: 260;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.28);
  background: linear-gradient(180deg, #555 0%, #2a2a2a 48%, #141414 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 10px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.45);
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.dex-exit-btn:hover {
  background: linear-gradient(180deg, var(--poke-red-light) 0%, var(--poke-red) 50%, var(--poke-red-dark) 100%);
  border-color: rgba(255,255,255,0.45);
}
.dex-exit-btn:active {
  transform: scale(0.94);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5), inset 0 2px 6px rgba(0,0,0,0.4);
}

.site-back { display: none; }

#game-canvas {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  background: #5c94fc;
  filter: none;
  image-rendering: pixelated;
  transition: opacity 0.35s ease;
  touch-action: none;
}
#game-canvas.battle-hidden { opacity: 0; pointer-events: none; }
body.in-battle #hud { opacity: 0; pointer-events: none; }

/* Mobile battle — hide cabinet chrome; desktop keeps full Pokédex frame */
body.is-mobile.in-battle .arcade-left .hud-quest,
body.is-mobile.in-battle .arcade-left .global-chat,
body.is-mobile.in-battle .arcade-left .arcade-score-box,
body.is-mobile.in-battle .arcade-left .arcade-deco.dex-dpad,
body.is-mobile.in-battle .arcade-left .arcade-pika-deco,
body.is-mobile.in-battle .arcade-left .arcade-side-brand,
body.is-mobile.in-battle .arcade-right .map2d-panel,
body.is-mobile.in-battle .arcade-right .arcade-score-box,
body.is-mobile.in-battle .arcade-right .arcade-pika-deco,
body.is-mobile.in-battle .arcade-right .arcade-header-badge,
body.is-mobile.in-battle .arcade-center .hud-top,
body.is-mobile.in-battle .arcade-deck {
  opacity: 0;
  pointer-events: none;
}
body.is-mobile.in-battle #hud-lb-mini { opacity: 1; pointer-events: auto; }

body.in-battle #battle-team-aside {
  opacity: 1;
  pointer-events: auto;
}
body.is-mobile.in-battle #battle-team-aside {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-mobile.in-battle .mobile-hud-chat,
body.is-mobile.in-battle .mobile-hud-squad {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.is-mobile.in-battle .mobile-hud-chat .global-chat {
  display: none !important;
}
body.in-battle #battle-party-strip { opacity: 1; pointer-events: auto; }
body.in-battle:not(.is-mobile) .battle-party-strip { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.battle-team-aside {
  position: relative;
  width: 100%;
  padding: 0.5rem 0.45rem;
  z-index: 2;
  pointer-events: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.party-roster.hidden { display: none; }
.party-roster {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem;
  margin-bottom: 0.45rem;
}
.party-roster-slot {
  position: relative; aspect-ratio: 1; border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.party-roster-slot.lead { border-color: var(--poke-yellow); box-shadow: 0 0 8px rgba(255,203,5,0.35); }
.party-roster-slot.empty { border-style: dashed; opacity: 0.45; color: rgba(255,255,255,0.35); font-size: 0.7rem; }
.party-roster-slot img { width: 88%; height: 88%; object-fit: contain; image-rendering: pixelated; }
.party-roster-lv {
  position: absolute; right: 2px; bottom: 1px; font-size: 0.42rem; font-family: var(--font-mono);
  color: #fff; text-shadow: 0 1px 2px #000; font-weight: 700;
}
.party-lead-info {
  display: flex; align-items: flex-start; gap: 0.35rem;
  margin-bottom: 0.5rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.battle-subtitle { margin-top: 0.15rem; font-size: 0.68rem !important; }
.hud-lb-mini {
  position: relative;
  width: 100%;
  padding: 0.55rem 0.5rem;
  z-index: 2;
  pointer-events: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.hud-lb-self {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.45rem;
  line-height: 1.35;
  font-weight: 600;
}
.hud-lb-self.has-rank { color: #fde047; font-weight: 700; font-size: 0.82rem; }
.quality-panel {
  flex-shrink: 0;
  width: 100%;
  padding: 0.45rem 0.5rem;
  pointer-events: auto;
}
.quality-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.22rem;
}
.quality-btn {
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  padding: 0.4rem 0.15rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.quality-btn:hover { border-color: rgba(124, 240, 255, 0.45); }
.quality-btn.active {
  border-color: var(--poke-yellow);
  background: rgba(255, 203, 5, 0.14);
  color: var(--poke-yellow);
  box-shadow: 0 0 8px rgba(255, 203, 5, 0.25);
}
.hud-lb-top {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin-bottom: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(11.5rem, 38vh);
  overflow-y: auto;
  scrollbar-width: thin;
}
.hud-lb-row {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto;
  gap: 0.22rem;
  align-items: center;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.9);
  padding: 0.1rem 0.08rem;
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
}
.hud-lb-row.lb-me {
  color: #fde047;
  background: rgba(255,203,5,0.1);
  border: 1px solid rgba(255,203,5,0.25);
}
.hud-lb-rank { font-family: var(--font-mono); color: #7cf0ff; font-weight: 700; font-size: 0.78rem; }
.hud-lb-name { min-width: 0; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.01em; display: flex; flex-direction: column; gap: 0.12rem; align-items: flex-start; }
.hud-lb-name .lb-trainer { font-family: var(--font-body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-lb-row.lb-wallet-open { align-items: start; }
.hud-lb-row.lb-wallet-open .hud-lb-name { overflow: visible; white-space: normal; }
.lb-wallet-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  max-width: 100%;
  margin: 0;
  padding: 0.12rem 0.35rem;
  border: 1px solid rgba(124, 240, 255, 0.28);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.32);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(124, 240, 255, 0.92);
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
}
.lb-wallet-toggle:hover { border-color: rgba(255, 203, 5, 0.45); color: #fde047; }
.lb-wallet-toggle.is-expanded { border-color: rgba(255, 203, 5, 0.5); background: rgba(255, 203, 5, 0.08); }
.lb-wallet-toggle.copied { border-color: rgba(74, 222, 128, 0.55); color: #4ade80; }
.lb-wallet-short { font-weight: 700; letter-spacing: 0.02em; }
.lb-wallet-expanded-pane { display: none; width: 100%; gap: 0.25rem; align-items: flex-start; }
.lb-wallet-toggle.is-expanded .lb-wallet-short { display: none; }
.lb-wallet-toggle.is-expanded .lb-wallet-expanded-pane { display: flex; flex-direction: column; }
.lb-wallet-addr {
  font-size: 0.52rem;
  white-space: normal;
  word-break: break-all;
  line-height: 1.25;
  color: #b8f5ff;
  font-family: var(--font-mono);
}
.lb-wallet-copy {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  align-self: flex-end;
  padding: 0.05rem 0.2rem;
}
.lb-wallet-copy:hover { color: var(--poke-yellow); }
body.lb-admin-view .lb-wallet-toggle .lb-wallet-short { display: none; }
body.lb-admin-view .lb-wallet-toggle .lb-wallet-expanded-pane { display: flex; flex-direction: column; }
body.lb-admin-view .lb-wallet-toggle { border-color: rgba(255, 203, 5, 0.35); }
.hud-lb-pts { font-family: var(--font-mono); color: #4ade80; font-weight: 700; font-size: 0.78rem; }
.hud-lb-empty { font-size: 0.72rem; color: rgba(255,255,255,0.55); margin: 0; }
.hud-lb-more {
  width: 100%;
  font-size: 0.44rem;
  padding: 0.42rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(124,240,255,0.4);
  background: rgba(124,240,255,0.1);
  color: #7cf0ff;
  cursor: pointer;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.hud-lb-more:hover { background: rgba(124,240,255,0.18); }
.battle-team-hint { font-size: 0.68rem; color: rgba(255,255,255,0.72); margin-bottom: 0.4rem; line-height: 1.4; font-family: var(--font-mono); }
.battle-team-aside::-webkit-scrollbar { display: none; }
.battle-team-panel { display: flex; flex-direction: column; gap: 0.38rem; overflow-x: hidden; }
.battle-team-slot {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  min-height: 82px; padding: 0.4rem 0.42rem 0.4rem 0.52rem; border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.35); cursor: pointer; color: #fff; width: 100%;
}
.battle-team-slot-num {
  position: absolute; top: 0.22rem; left: 0.28rem;
  font-size: 0.48rem; font-family: var(--font-mono); color: rgba(124,240,255,0.85); font-weight: 700;
}
.battle-team-slot-row {
  display: flex; align-items: center; gap: 0.35rem; width: 100%; padding-left: 0.55rem;
}
.battle-team-slot-meta {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem;
}
.battle-team-slot-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem;
}
.battle-team-slot-name {
  font-size: 0.76rem; font-weight: 700; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.battle-team-slot-lv { font-size: 0.62rem; font-family: var(--font-mono); color: rgba(255,255,255,0.9); flex-shrink: 0; }
.battle-team-slot-bars { display: flex; flex-direction: column; gap: 0.22rem; width: 100%; }
.battle-team-stat-row {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  gap: 0.28rem;
  align-items: center;
}
.battle-team-stat-label {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}
.battle-team-stat-val {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.battle-team-slot-hp,
.battle-team-slot-exp {
  height: 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.battle-team-slot-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  width: 100%;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.35);
}
.battle-team-slot-hp-fill.mid { background: linear-gradient(90deg, #ca8a04, #facc15); box-shadow: 0 0 6px rgba(250, 204, 21, 0.3); }
.battle-team-slot-hp-fill.low { background: linear-gradient(90deg, #dc2626, #f87171); box-shadow: 0 0 6px rgba(248, 113, 113, 0.35); }
.battle-team-slot-hp-fill.fainted { background: #4b5563; box-shadow: none; }
.battle-team-slot-exp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--poke-blue), var(--poke-yellow));
  width: 0%;
  box-shadow: 0 0 6px rgba(255, 203, 5, 0.28);
}
.battle-team-slot-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0.35rem 0.5rem;
  color: rgba(255,255,255,0.65);
}
.battle-team-add-label {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--poke-yellow);
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.55),
    0 0 12px rgba(255, 203, 5, 0.35);
  padding: 0.35rem 0.65rem;
  border: 2px dashed rgba(255, 203, 5, 0.55);
  border-radius: 4px;
  background: rgba(255, 203, 5, 0.08);
  line-height: 1;
}
.arcade-left .battle-team-slot.empty .battle-team-add-label {
  color: var(--gb-lcd-dark);
  border-color: rgba(15, 56, 15, 0.45);
  background: rgba(255, 255, 255, 0.22);
  text-shadow: 1px 1px 0 rgba(196, 212, 74, 0.55);
}
.battle-team-slot.empty:hover .battle-team-add-label {
  border-color: var(--poke-yellow);
  background: rgba(255, 203, 5, 0.18);
  color: var(--gb-lcd-text);
}
.battle-team-slot.active { border-color: var(--poke-yellow); box-shadow: 0 0 8px rgba(255,203,5,0.35); }
.battle-team-slot.can-switch { cursor: pointer; border-color: rgba(124,240,255,0.55); }
.battle-team-slot.can-switch:hover { border-color: #7cf0ff; background: rgba(124,240,255,0.12); }
.battle-team-slot.pick-next { animation: pickNextPulse 0.9s ease-in-out infinite; }
.battle-team-slot.swap-pick { border-color: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.55); }
.battle-team-slot.fainted { opacity: 0.4; filter: grayscale(0.8); }
@keyframes pickNextPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,203,5,0.35); }
  50% { box-shadow: 0 0 14px rgba(255,203,5,0.75); }
}
.battle-team-slot.empty {
  border-style: dashed; opacity: 0.95; border-color: rgba(255,203,5,0.45);
  background: rgba(255,203,5,0.06);
}
.battle-team-slot.empty:hover { border-color: var(--poke-yellow); background: rgba(255,203,5,0.14); }
.battle-team-slot img { width: 50px; height: 50px; image-rendering: pixelated; object-fit: contain; }
.battle-team-slot span { font-size: 0.56rem; font-family: var(--font-mono); }
.battle-team-plus { font-size: 1.55rem; color: var(--poke-yellow); line-height: 1; }

.battle-party-strip {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 0.45rem; z-index: 45;
  pointer-events: auto;
}
.battle-party-strip::before {
  content: 'SWITCH'; font-family: var(--font-pixel); font-size: 0.38rem;
  color: var(--poke-yellow); text-align: center; margin-bottom: 0.15rem;
}
.battle-strip-slot {
  width: 64px; height: 64px; padding: 0.25rem; border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.2); background: rgba(12,16,24,0.85); cursor: pointer;
}
.battle-strip-slot.active { border-color: var(--poke-yellow); }
.battle-strip-slot.fainted { opacity: 0.35; }
.battle-strip-slot:disabled { cursor: default; opacity: 0.5; }
.battle-strip-slot img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
body.in-battle .dex-exit-btn { opacity: 0.72; }
body.in-battle .dex-exit-btn:hover { opacity: 1; }

.kintara-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 10px;
}

/* HUD — overlays inside CRT screen */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

.hud-top {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding: 0.45rem 0.65rem;
  pointer-events: auto;
  border: 2px solid var(--gb-lcd-dark);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, rgba(155, 188, 15, 0.92) 0%, rgba(139, 172, 15, 0.95) 100%);
  box-shadow: inset 0 2px 0 rgba(196, 212, 74, 0.35);
}
.hud-brand {
  font-family: var(--font-pixel); font-size: 0.62rem; color: var(--gb-lcd-dark); letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 0.5rem;
  flex-shrink: 0;
}
.hud-brand em { color: var(--gb-lcd-muted); font-style: normal; font-family: var(--font-mono); font-size: 0.54rem; }
.pokeball-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(180deg, var(--poke-red) 50%, #fff 50%);
  border: 1px solid var(--gb-lcd-dark); flex-shrink: 0;
}
.hud-zone {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 1rem; font-weight: 700; color: var(--gb-lcd-dark);
  flex: 1 1 8rem;
  min-width: 0;
  text-shadow: 1px 1px 0 rgba(196, 212, 74, 0.45);
}
.zone-pin { font-size: 0.85rem; }
.hud-time {
  margin-left: 0.35rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gb-lcd-dark);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(45, 56, 33, 0.25);
  border-radius: 4px;
  white-space: nowrap;
}
.hud-time.is-night {
  color: #e9d5ff;
  background: rgba(30, 27, 75, 0.72);
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.25);
}
.hud-time.is-dawn,
.hud-time.is-dusk {
  color: #fdba74;
  background: rgba(120, 53, 15, 0.35);
  border-color: rgba(251, 146, 60, 0.45);
}
.hud-time.is-day {
  color: var(--gb-lcd-dark);
  background: rgba(255, 255, 255, 0.42);
}
body.game-night #game-canvas {
  filter: brightness(0.78) saturate(0.9);
}
body.game-dawn #game-canvas,
body.game-dusk #game-canvas {
  filter: brightness(0.97) saturate(1.02);
}
body.in-battle #game-canvas {
  filter: none;
}
.hud-stats {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem 0.85rem;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  flex-shrink: 0;
}
.hud-stats span { white-space: nowrap; line-height: 1.4; }
.hud-stats .online {
  font-size: 0.68rem;
  color: #1a6b1a;
  padding: 0.12rem 0.35rem;
  border-radius: 5px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.hud-stats .online #online-count {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 800;
  color: #15803d;
}
.hud-stats .gold { color: #7a5a0c; text-shadow: none; }
.hud-stats .dex { color: var(--gb-lcd-dark); text-shadow: none; }
.hud-lb-btn {
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,203,5,0.4);
  border-radius: 6px; padding: 0.28rem 0.5rem; cursor: pointer; font-size: 0.62rem;
  line-height: 1; color: #fff;
}
.hud-lb-btn:hover { background: rgba(255,203,5,0.2); }

.hud-quest {
  position: relative;
  width: 100%;
  padding: 0.55rem 0.5rem;
  pointer-events: auto;
  z-index: 2;
  flex-shrink: 0;
}
.panel-title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--emerald);
  text-transform: uppercase;
  margin-bottom: 0.42rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.quest-name { font-weight: 700; font-size: 0.88rem; color: #fff; line-height: 1.25; }
.quest-desc { font-size: 0.72rem; color: rgba(255,255,255,0.58); margin: 0.35rem 0 0.5rem; line-height: 1.4; }
.quest-bar { height: 6px; background: rgba(0,0,0,0.45); border-radius: 3px; overflow: hidden; }
.quest-fill { height: 100%; background: linear-gradient(90deg, var(--emerald), #6ee7b7); width: 0%; transition: width 0.4s; }

.party-icon { width: 34px; height: 34px; image-rendering: auto; object-fit: contain; flex-shrink: 0; }
.party-info { font-size: 0.62rem; color: #fff; min-width: 0; flex: 1; line-height: 1.25; }
.party-info .bar-wrap { margin-top: 3px; }
.party-size { color: var(--poke-yellow); font-weight: 700; margin-left: 0.2rem; }
.exp-wrap { height: 4px; margin-top: 2px; }
.exp-bar { height: 100%; background: linear-gradient(90deg, #3b82f6, #7cf0ff); width: 0%; transition: width 0.3s; }
.exp-text { font-size: 0.55rem; color: rgba(255,255,255,0.45); }

.map2d-panel {
  position: relative;
  width: 100%;
  padding: 0.45rem;
  pointer-events: auto;
  flex-shrink: 0;
  margin-top: auto;
}
.map2d-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.map2d-title { font-family: var(--font-pixel); font-size: 0.38rem; color: var(--emerald); letter-spacing: 0.04em; }
.map2d-expand {
  border: none; background: rgba(255,255,255,0.08); color: #fff; border-radius: 4px;
  width: 24px; height: 24px; cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.map2d-expand:hover { background: rgba(255,203,5,0.25); }
#minimap { width: 100%; max-width: none; height: auto; aspect-ratio: 1; display: block; margin: 0 auto; image-rendering: pixelated; border-radius: 6px; }
.map2d-region {
  display: block; margin-top: 0.35rem; font-size: 0.72rem; color: var(--poke-yellow);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.map2d-modal {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: rgba(7, 11, 20, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  border-radius: inherit;
  backdrop-filter: blur(2px);
}
.map2d-modal.hidden { display: none; }
.map2d-modal-card {
  padding: 0.75rem;
  max-width: min(440px, 100%);
  max-height: calc(100% - 0.5rem);
  overflow-y: auto;
  width: 100%;
}
#map2d-large {
  width: 100%;
  height: auto;
  max-height: min(360px, calc(100% - 3rem));
  display: block;
  image-rendering: pixelated;
  border-radius: 8px;
}

.global-chat {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.35rem;
  z-index: 18;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.5rem;
  pointer-events: auto;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(12, 16, 24, 0.94), rgba(12, 16, 24, 0.94)) padding-box,
    linear-gradient(90deg, var(--poke-red), var(--poke-yellow), var(--poke-blue)) border-box;
}
.chat-header {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-pixel); font-size: 0.32rem; color: var(--poke-yellow);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.chat-send-btn {
  padding: 0.45rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--poke-yellow);
  background: linear-gradient(180deg, rgba(227,53,13,0.35), rgba(59,76,202,0.35));
  color: #fff; font-family: var(--font-pixel);
  font-size: 0.28rem; cursor: pointer; white-space: nowrap;
}
.chat-messages {
  max-height: 5.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.2rem;
  font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.35;
  scrollbar-width: thin; scrollbar-color: rgba(124,240,255,0.35) transparent;
}
.chat-line { color: rgba(255,255,255,0.82); word-break: break-word; }
.chat-line.self .chat-name { color: #fde047; }
.chat-name { color: #7cf0ff; font-weight: 700; margin-right: 0.35rem; }
.chat-text { color: rgba(255,255,255,0.9); }
.chat-form { display: flex; gap: 0.35rem; align-items: center; }
.chat-form input {
  flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid rgba(124,240,255,0.35); background: rgba(0,0,0,0.45);
  color: #fff; font-family: var(--font-body); font-size: 0.78rem;
}
.chat-form input:focus { outline: none; border-color: #7cf0ff; box-shadow: 0 0 0 2px rgba(124,240,255,0.15); }
.global-chat.chat-active { border-color: #7cf0ff; box-shadow: 0 0 0 2px rgba(124,240,255,0.2); }
.global-chat.chat-active .chat-form input { border-color: #7cf0ff; background: rgba(8,14,24,0.95); }
.chat-send-btn:hover { background: linear-gradient(180deg, rgba(227,53,13,0.55), rgba(59,76,202,0.55)); }

/* World chat docked in left cabinet panel */
.arcade-left .global-chat,
.mobile-hud-chat .global-chat {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  z-index: 1;
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  gap: 0.28rem;
  padding: 0.35rem 0.4rem 0.4rem;
}
.arcade-left .global-chat {
  margin: 0.1rem 0;
}
.arcade-left .global-chat .chat-messages,
.mobile-hud-chat .global-chat .chat-messages {
  flex: 1 1 auto;
  min-height: 2.5rem;
  max-height: none;
  overflow-y: auto;
}
.arcade-left .global-chat .chat-header {
  flex-shrink: 0;
  font-size: 0.44rem;
  color: var(--gb-lcd-dark);
}
.arcade-left .global-chat .chat-messages {
  font-size: 0.62rem;
  line-height: 1.4;
}
.arcade-left .global-chat .chat-line { color: var(--gb-lcd-text); }
.arcade-left .global-chat .chat-name { color: var(--gb-lcd-dark); font-size: 0.62rem; }
.arcade-left .global-chat .chat-text { color: var(--gb-lcd-text); font-size: 0.62rem; }
.arcade-left .global-chat .chat-line.self .chat-name { color: #3d5c18; }
.arcade-left .global-chat .chat-form input {
  border-color: rgba(15, 56, 15, 0.35);
  background: rgba(255, 255, 255, 0.35);
  color: var(--gb-lcd-text);
  font-size: 0.72rem;
}
.arcade-left .global-chat .chat-send-btn {
  font-size: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-color: var(--gb-lcd-dark);
  color: var(--gb-lcd-text);
  background: linear-gradient(180deg, rgba(196, 212, 74, 0.45), rgba(139, 172, 15, 0.35));
}

.hud-hint {
  position: relative;
  transform: none;
  left: auto;
  bottom: auto;
  padding: 0.22rem 0.65rem;
  font-size: 0.52rem;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  z-index: 2;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}
.hud-hint strong { color: #4ade80; font-weight: 700; }

@media (max-width: 640px) {
  :root { --arcade-side-w: clamp(100px, 22vw, 130px); }
  .global-chat { max-width: none; left: 0.25rem; right: 0.25rem; bottom: 0.25rem; }
  .arcade-side-brand, .dex-dpad, .arcade-pika-deco, .dex-controls { display: none; }
  .arcade-score-box { padding: 0.2rem; }
  .arcade-score-val { font-size: 0.65rem; }
  .dex-status-text { font-size: 0.28rem; }
  .hud-hint { font-size: 0.42rem; padding: 0.15rem 0.35rem; }
  .chat-messages { max-height: 4rem; font-size: 0.62rem; }
}

.grass-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 12; padding: 0.55rem 1rem; font-size: 0.82rem; font-weight: 700;
  color: #fff; background: rgba(21, 128, 61, 0.92); border: 2px solid #4ade80;
  border-radius: 10px; pointer-events: none; animation: grassPulse 1.2s infinite;
}
.grass-hint.hidden { display: none; }
@keyframes grassPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.75; } }

.focus-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 25; padding: 0.75rem 1.25rem; font-size: 0.85rem; font-weight: 700;
  background: rgba(227, 53, 13, 0.92); color: #fff; border: 2px solid #ffcb05;
  border-radius: 10px; pointer-events: none; animation: pulse 1.5s infinite;
}
.focus-hint.hidden { display: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }

.bar-wrap { height: 7px; background: rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden; }
.hp-bar { height: 100%; background: linear-gradient(90deg, #22c55e, #86efac); width: 100%; transition: width 0.3s; }
.hp-bar.enemy-hp { background: linear-gradient(90deg, #f59e0b, #fde047); }
.hp-text { font-size: 0.6rem; color: rgba(255,255,255,0.55); }

/* Battle arena inside Pokédex screen */
.dex-battle-overlay,
#battle-overlay {
  position: absolute;
  inset: 0;
  z-index: 26;
  pointer-events: auto;
  border-radius: inherit;
  overflow: hidden;
  background: #0a120a;
}
.dex-battle-overlay.hidden,
#battle-overlay.hidden { display: none; }

.battle-arena-2d {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #0f380f;
}
.battle-arena-2d::before {
  content: '';
  position: absolute; inset: 0; z-index: 14; pointer-events: none;
  opacity: 0.06;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(15,56,15,0.9) 2px 3px);
}
.arena-sky {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, #9bbc0f 0%, #8bac0f 22%, #306230 58%, #0f380f 100%);
}
.arena-forest {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
}
.arena-clouds {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
}
.arena-hills-far {
  position: absolute; left: -5%; right: -5%; bottom: 38%; height: 28%; z-index: 3;
  background: #306230;
  clip-path: polygon(0 100%, 12% 42%, 28% 58%, 44% 36%, 58% 52%, 72% 34%, 88% 48%, 100% 38%, 100% 100%);
  opacity: 0.55;
}
.arena-hills-near {
  position: absolute; left: -8%; right: -8%; bottom: 30%; height: 22%; z-index: 4;
  background: #0f380f;
  clip-path: polygon(0 100%, 8% 55%, 22% 68%, 38% 48%, 52% 62%, 68% 44%, 82% 58%, 100% 46%, 100% 100%);
  opacity: 0.7;
}
.arena-ground-far {
  position: absolute; left: 0; right: 0; bottom: 18%; height: 38%; z-index: 5;
  background: #306230;
  transform: scaleY(0.92); transform-origin: bottom center;
}
.arena-ground {
  position: absolute; left: -2%; right: -2%; bottom: 0; height: 56%; z-index: 6;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(15,56,15,0.22) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(15,56,15,0.14) 3px 4px),
    linear-gradient(180deg, #8bac0f 0%, #306230 42%, #0f380f 100%);
  box-shadow: inset 0 8px 0 rgba(155,188,15,0.35);
}
.arena-platform {
  position: absolute; border-radius: 50%; z-index: 6;
  background: radial-gradient(ellipse, rgba(15,56,15,0.45) 0%, rgba(15,56,15,0.12) 50%, transparent 72%);
  filter: none;
}
.enemy-platform { width: 34%; height: 9%; top: 43%; right: 21%; }
.player-platform { width: 38%; height: 10%; bottom: 41%; left: 19%; }
.arena-ring {
  position: absolute; left: 50%; bottom: 28%; transform: translateX(-50%);
  width: min(560px, 88vw); height: 18%; z-index: 6; pointer-events: none;
  border: 2px solid rgba(155,188,15,0.35);
  border-radius: 50%;
  box-shadow: none;
}

.arena-enemy {
  position: absolute; top: 14%; right: 12%; width: min(360px, 44vw);
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem;
  z-index: 8;
}
.arena-player {
  position: absolute; bottom: 36%; left: 16%; width: min(340px, 42vw);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
  z-index: 9;
}
.arena-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: contrast(1.18) saturate(1.15) drop-shadow(0 4px 0 rgba(15,56,15,0.5)) drop-shadow(0 0 12px rgba(255,255,255,0.08));
  animation: battleBobAnime 1.8s ease-in-out infinite;
  display: block;
  object-fit: contain;
  transition: filter 0.12s, transform 0.12s;
}
@keyframes battleBobAnime {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
}
.enemy-sprite { width: min(168px, 24vw); height: min(168px, 22vh); margin-right: 0; position: relative; z-index: 1; }
.player-sprite { width: min(184px, 26vw); height: min(184px, 24vh); margin-left: 0; }
.arena-trainer-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: contrast(1.1) saturate(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.55));
  pointer-events: none;
  object-fit: contain;
  animation: battleBobAnime 2.2s ease-in-out infinite;
}
.enemy-trainer-sprite {
  position: absolute;
  right: 0;
  bottom: 6%;
  width: min(58px, 11vw);
  height: auto;
  z-index: 0;
  opacity: 0.96;
}
.enemy-trainer-sprite.hidden { display: none; }
body.trainer-battle .enemy-hud .name-row span:first-child {
  color: #fde047;
}
@keyframes battleBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.battle-fx-layer {
  position: absolute; inset: 0; z-index: 11; pointer-events: none; overflow: hidden;
}
.fx-burst {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fx-color, #fff) 0%, transparent 68%);
  opacity: 0.85;
  animation: fxBurst 0.5s ease-out forwards;
}
.fx-slash {
  position: absolute; width: 100px; height: 8px; margin: -4px 0 0 -50px;
  background: linear-gradient(90deg, transparent, var(--fx-color, #fff), transparent);
  border-radius: 4px;
  transform: rotate(-28deg);
  animation: fxSlash 0.35s ease-out forwards;
  box-shadow: 0 0 16px var(--fx-color, #fff);
}
.fx-slash-reverse { transform: rotate(28deg); animation-name: fxSlashRev; }
@keyframes fxBurst {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes fxSlash {
  0% { transform: rotate(-28deg) scaleX(0.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotate(-28deg) scaleX(1.4); opacity: 0; }
}
@keyframes fxSlashRev {
  0% { transform: rotate(28deg) scaleX(0.2); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotate(28deg) scaleX(1.4); opacity: 0; }
}
.fx-lunge-player { animation: fxLungePlayer 0.28s ease-out !important; }
.fx-lunge-enemy { animation: fxLungeEnemy 0.28s ease-out !important; }
@keyframes fxLungePlayer {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translate(28px, -18px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes fxLungeEnemy {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translate(-28px, 18px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
.fx-hit-shake { animation: fxHitShake 0.4s ease-in-out !important; }
.fx-crit-pop { filter: drop-shadow(0 0 12px #ffcb05) brightness(1.25) !important; }
@keyframes fxHitShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.arena-player.fx-hurt .player-sprite,
.arena-enemy.fx-hurt .enemy-sprite { filter: drop-shadow(0 0 14px #ef4444) brightness(0.85); }
.battle-arena-2d.fx-screen-flash::after {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: var(--fx-flash, #fff);
  opacity: 0.22;
  animation: fxScreenFlash 0.18s ease-out forwards;
}
@keyframes fxScreenFlash {
  from { opacity: 0.28; }
  to { opacity: 0; }
}

.arena-hud {
  padding: 0.35rem 0.5rem; min-width: 128px; max-width: min(200px, 28vw);
  color: #fff; font-size: 0.92em;
}
.arena-hud .name-row { font-size: 0.76rem; }
.arena-hud .bar-wrap { height: 7px; }
.enemy-hud { text-align: right; }
.player-hud { text-align: left; }

.battle-ui-panel {
  position: absolute; left: 50%; bottom: 0.5rem; transform: translateX(-50%);
  width: min(680px, 96%); max-height: 36vh; padding: 0.75rem 0.85rem; color: #e8f0e8;
  z-index: 12; display: flex; flex-direction: column;
  background: rgba(8, 12, 8, 0.88) !important;
  border: 2px solid rgba(139, 195, 74, 0.22) !important;
  box-shadow: 0 0 20px rgba(139, 195, 74, 0.08), inset 0 0 0 1px rgba(0,0,0,0.45);
}
.battle-header #battle-zone {
  font-family: var(--font-pixel);
  font-size: 0.34rem;
  color: var(--dex-lcd);
  letter-spacing: 0.06em;
}
.battle-ui-panel.switch-active {
  max-height: min(28vh, 240px); padding: 0.55rem 0.7rem;
}
.battle-ui-panel.switch-active .battle-log { display: none; }
.battle-ui-panel.switch-active .battle-header { margin-bottom: 0.35rem; }
.battle-ui-panel.moves-active .battle-log { display: none; }
.battle-ui-panel.moves-active .battle-header { margin-bottom: 0.35rem; }

.battle-team-picker {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  pointer-events: auto;
}
body.battle-picker-open .battle-team-aside,
body.battle-picker-open .hud-lb-mini {
  pointer-events: none;
}
.battle-team-picker.hidden { display: none; }
.battle-team-picker-card {
  width: min(640px, 96vw); max-height: 82vh; padding: 1rem; color: #fff;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.battle-team-picker-head { display: flex; align-items: center; gap: 0.75rem; }
.battle-team-picker-head h2 { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--poke-yellow); flex: 1; }
.battle-team-picker-hint { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.battle-team-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.4rem;
  overflow-y: auto; max-height: min(52vh, 420px); padding-right: 0.2rem;
}
.btp-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.45rem 0.3rem; border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.35);
  color: #fff; cursor: pointer; font-size: 0.55rem;
}
.btp-cell img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.btp-cell small { font-family: var(--font-mono); color: rgba(255,255,255,0.45); }
.btp-cell:hover:not(:disabled) { border-color: var(--poke-yellow); }
.btp-cell.selected { border-color: var(--poke-yellow); background: rgba(255,203,5,0.12); }
.btp-cell.in-other { border-color: rgba(124,240,255,0.45); }
.btp-cell.in-other:hover { border-color: #7cf0ff; background: rgba(124,240,255,0.1); }
.btp-cell.taken { opacity: 0.35; cursor: not-allowed; }
.btp-empty { text-align: center; color: rgba(255,255,255,0.55); padding: 1rem; font-size: 0.8rem; }
.btp-clear { align-self: center; font-size: 0.42rem; margin-top: 0.25rem; }

.leaderboard-panel {
  position: fixed; inset: 0; z-index: 36;
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  pointer-events: auto;
}
.leaderboard-panel.hidden { display: none; }
.leaderboard-card {
  width: min(520px, 96vw); max-height: 80vh; padding: 1rem; color: #fff;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.leaderboard-head { display: flex; align-items: center; gap: 0.75rem; }
.leaderboard-head h2 { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--poke-yellow); flex: 1; }
.leaderboard-status { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
.leaderboard-list { overflow-y: auto; max-height: min(58vh, 480px); }
.lb-empty { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-align: center; padding: 1rem; }
.lb-table { display: flex; flex-direction: column; gap: 0.2rem; }
.lb-row {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 2.6rem 2.6rem 2.8rem; gap: 0.28rem;
  align-items: center; font-size: 0.72rem; padding: 0.35rem 0.45rem;
  border-radius: 6px; background: rgba(0,0,0,0.25);
  min-width: 0;
}
.lb-row.lb-head { font-size: 0.62rem; color: rgba(255,255,255,0.45); background: transparent; }
.lb-catch--wild { color: #a8e6cf; text-align: center; }
.lb-catch--shiny { color: #ffd700; text-align: center; font-weight: 600; }
.lb-row.lb-me { border: 1px solid rgba(255,203,5,0.45); background: rgba(255,203,5,0.08); }
.lb-row.lb-wallet-open { align-items: start; }
.lb-row.lb-clickable,
.hud-lb-row.lb-clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lb-row.lb-clickable:hover,
.hud-lb-row.lb-clickable:hover {
  background: rgba(124,240,255,0.1);
  border-color: rgba(124,240,255,0.35);
}
.lb-row.lb-clickable:focus-visible,
.hud-lb-row.lb-clickable:focus-visible {
  outline: 2px solid var(--poke-yellow);
  outline-offset: 1px;
}
.lb-rank { font-family: var(--font-mono); color: var(--emerald); }
.lb-name { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lb-name .lb-trainer { font-family: var(--font-body); font-weight: 600; }
.lb-name small { font-size: 0.58rem; color: rgba(255,255,255,0.45); font-family: var(--font-mono); }
.lb-score { font-family: var(--font-mono); color: var(--poke-yellow); }

.player-profile-panel {
  position: fixed; inset: 0; z-index: 37;
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  pointer-events: auto;
}
.player-profile-panel.hidden { display: none; }
.player-profile-card {
  width: min(400px, 94vw); max-height: 82vh; padding: 1rem; color: #fff;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.player-profile-head { display: flex; align-items: center; gap: 0.75rem; }
.player-profile-head h2 { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--poke-yellow); flex: 1; }
.player-profile-body { overflow-y: auto; display: flex; flex-direction: column; gap: 0.85rem; }
.player-profile-loading,
.player-profile-empty { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-align: center; padding: 1rem 0; }
.player-profile-hero { text-align: center; }
.player-profile-name { font-size: 1.35rem; margin: 0; font-weight: 700; }
.player-profile-rank { font-size: 0.75rem; color: var(--emerald); font-family: var(--font-mono); margin: 0.25rem 0 0; }
.player-profile-wallet { margin-top: 0.55rem; display: flex; justify-content: center; width: 100%; }
.player-profile-wallet .lb-wallet-toggle { max-width: min(100%, 20rem); }
.player-profile-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.player-profile-stat {
  border: 1px solid var(--panel-border); border-radius: 10px; padding: 0.65rem;
  background: rgba(0,0,0,0.35); text-align: center;
}
.player-profile-stat-val { display: block; font-family: var(--font-mono); font-size: 1.25rem; color: var(--poke-yellow); }
.player-profile-stat-label { display: block; font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.player-profile-top h4 {
  font-family: var(--font-pixel); font-size: 0.42rem; color: var(--poke-yellow);
  margin: 0 0 0.5rem;
}
.player-profile-mons { display: flex; flex-direction: column; gap: 0.45rem; }
.player-profile-mon {
  display: grid; grid-template-columns: 1.5rem 48px 1fr; gap: 0.5rem; align-items: center;
  padding: 0.4rem 0.5rem; border-radius: 8px; background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
}
.player-profile-mon-rank { font-family: var(--font-mono); color: var(--emerald); font-size: 0.8rem; text-align: center; }
.player-profile-mon img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.player-profile-mon-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.player-profile-mon-name { font-weight: 600; font-size: 0.85rem; }
.player-profile-mon-lvl { font-size: 0.72rem; color: rgba(255,255,255,0.55); font-family: var(--font-mono); }

.dex-panel {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  pointer-events: auto;
}
.dex-panel.hidden { display: none; }
.dex-panel-card { width: min(1240px, 98vw); max-height: 94vh; padding: 1.1rem; color: #fff; display: flex; flex-direction: column; gap: 0.75rem; }
.dex-body { display: grid; grid-template-columns: 1fr minmax(400px, 520px); gap: 1rem; min-height: 0; flex: 1; align-items: start; }
.dex-detail {
  border: 1px solid var(--panel-border); border-radius: 12px; padding: 0.85rem 1rem;
  background: rgba(0,0,0,0.4); overflow: visible; max-height: none;
}
.dex-detail-hero { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 0.65rem; }
.dex-detail-hero img { width: 112px; height: 112px; object-fit: contain; flex-shrink: 0; }
.dex-detail-hero-text { flex: 1; min-width: 0; }
.dex-detail-silhouette { width: 120px; height: 120px; object-fit: contain; opacity: 0.35; filter: grayscale(1); margin: 0 auto 0.5rem; display: block; }
.dex-detail-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--emerald); }
.dex-detail h3 { font-size: 1.35rem; margin: 0.15rem 0; }
.dex-detail-types { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.3rem; }
.dex-detail-owned, .dex-detail-level, .dex-detail-hint { font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-top: 0.28rem; }
.dex-exp-wrap { margin-top: 0.35rem; max-width: 100%; }
.dex-exp-bar { height: 8px; background: rgba(0,0,0,0.55); border: 1px solid rgba(124,240,255,0.2); border-radius: 5px; overflow: hidden; }
.dex-exp-bar .exp-bar { border-radius: 4px; background: linear-gradient(90deg, var(--poke-blue), var(--poke-yellow)); }
.dex-detail-stats h4, .dex-detail-moves h4 { font-size: 0.7rem; color: var(--poke-yellow); margin: 0 0 0.35rem; }
.dex-detail-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.5rem;
}
.dex-detail-stats-block { min-width: 0; }
.dex-subhead { margin-top: 0 !important; opacity: 0.85; font-size: 0.65rem !important; }
.dex-stat-row {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) 2.5rem;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.72rem;
  margin-bottom: 0.25rem;
}
.dex-stat-label { font-family: var(--font-mono); color: rgba(255,255,255,0.7); }
.dex-stat-val { font-family: var(--font-mono); text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.dex-stat-bar { height: 7px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; min-width: 0; }
.dex-stat-bar div { height: 100%; border-radius: 3px; }
.dex-hp-sub { font-size: 0.62rem; color: rgba(255,255,255,0.45); margin: -0.1rem 0 0.28rem 2.55rem; display: block; }
.dex-bst { font-size: 0.72rem; margin-top: 0.35rem; color: rgba(255,255,255,0.65); }
.dex-bst strong { color: var(--poke-yellow); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dex-move-grid { display: grid; gap: 0.4rem; }
.dex-move-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dex-move-card {
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 0.5rem 0.6rem;
  background: rgba(0,0,0,0.3);
}
.dex-move-card.dex-move-unknown { opacity: 0.65; }
.dex-move-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.35rem; }
.dex-move-head strong { font-size: 0.82rem; }
.dex-move-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; color: rgba(255,255,255,0.55); }
.dex-move-pwr-bar { flex: 1; height: 5px; background: rgba(0,0,0,0.45); border-radius: 3px; overflow: hidden; }
.dex-move-pwr-bar div { height: 100%; background: linear-gradient(90deg, #ef4444, #fbbf24); border-radius: 3px; }
.dex-detail-empty { text-align: center; padding: 0.5rem 0.25rem 0.75rem; color: rgba(255,255,255,0.6); }
.dex-cell { cursor: pointer; }
.dex-cell.selected { outline: 2px solid var(--poke-yellow); }
.dex-panel-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.dex-tabs { display: flex; gap: 0.35rem; }
.dex-tab {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(8,12,20,0.65);
  color: rgba(255,255,255,0.72);
  cursor: pointer;
}
.dex-tab.active { border-color: var(--poke-yellow); color: var(--poke-yellow); }
.dex-tab--shiny.active {
  border-color: #fde047;
  color: #fde047;
  box-shadow: 0 0 10px rgba(253,224,71,0.35);
}
.dex-cell.shiny-caught {
  border-color: rgba(253,224,71,0.85);
  box-shadow: inset 0 0 12px rgba(253,224,71,0.22), 0 0 8px rgba(253,224,71,0.25);
}
.dex-cell--shiny-mode:not(.caught) { color: rgba(253,224,71,0.45); }
.dex-detail-hero--shiny img { filter: drop-shadow(0 0 10px rgba(253,224,71,0.65)); }
.dex-shiny-tag { color: #fde047; font-weight: 700; }
.dex-shiny-preview { filter: saturate(1.2) drop-shadow(0 0 8px rgba(253,224,71,0.5)); }
#enemy-sprite-battle.shiny-sprite,
#enemy-sprite.shiny-sprite {
  filter: drop-shadow(0 0 12px rgba(253,224,71,0.75)) saturate(1.15);
}
.dex-panel-head h2 { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--poke-yellow); flex: 1; }
.dex-panel-head span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--emerald); }
.dex-panel-hint { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

@media (max-width: 820px) {
  .dex-panel {
    padding:
      max(0.35rem, env(safe-area-inset-top))
      max(0.35rem, env(safe-area-inset-right))
      max(0.35rem, env(safe-area-inset-bottom))
      max(0.35rem, env(safe-area-inset-left));
    align-items: stretch;
  }
  .dex-panel-card {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    height: 100%;
    padding: 0.45rem 0.5rem 0.5rem;
    gap: 0.35rem;
    overflow: hidden;
  }
  .dex-panel-hint { display: none; }
  .dex-panel-head { flex-shrink: 0; }
  .dex-panel-head h2 { font-size: 0.48rem; }
  .dex-panel-head span { font-size: 0.65rem; }
  .dex-body {
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow: hidden;
  }
  .dex-grid {
    flex: 0 0 auto;
    max-height: min(20vh, 108px);
    min-height: 0;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 0.22rem;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 0.15rem;
  }
  .dex-cell img { width: 30px; height: 30px; }
  .dex-cell-lv { font-size: 0.4rem; }
  .dex-cell-num { font-size: 0.38rem; }
  .dex-detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.45rem 0.5rem;
  }
  .dex-detail-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.28rem 0.4rem;
    margin-bottom: 0.28rem;
  }
  .dex-detail-hero {
    margin-bottom: 0.3rem;
    gap: 0.4rem;
    align-items: center;
  }
  .dex-detail-hero img { width: 56px; height: 56px; }
  .dex-detail-silhouette { width: 56px; height: 56px; margin-bottom: 0.25rem; }
  .dex-detail h3 { font-size: 0.92rem; margin: 0.08rem 0; }
  .dex-detail-num { font-size: 0.58rem; }
  .dex-detail-owned,
  .dex-detail-level,
  .dex-detail-hint { font-size: 0.55rem; margin-top: 0.1rem; line-height: 1.25; }
  .dex-detail-stats h4,
  .dex-detail-moves h4 { font-size: 0.56rem; margin-bottom: 0.18rem; }
  .dex-subhead { font-size: 0.52rem !important; }
  .dex-stat-row {
    font-size: 0.55rem;
    margin-bottom: 0.1rem;
    grid-template-columns: 1.65rem minmax(0, 1fr) 1.65rem;
    gap: 0.22rem;
  }
  .dex-stat-bar { height: 4px; }
  .dex-hp-sub { font-size: 0.48rem; margin: -0.05rem 0 0.12rem 1.75rem; }
  .dex-bst { font-size: 0.55rem; margin-top: 0.12rem; }
  .dex-exp-wrap { margin-top: 0.18rem; }
  .dex-exp-bar { height: 5px; }
  .dex-move-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.22rem;
  }
  .dex-move-card { padding: 0.28rem 0.32rem; border-radius: 6px; }
  .dex-move-head { margin-bottom: 0.12rem; }
  .dex-move-head strong { font-size: 0.62rem; }
  .dex-move-meta { font-size: 0.5rem; gap: 0.28rem; }
  .dex-move-pwr-bar { height: 4px; }
  .dex-detail-empty { padding: 0.25rem 0.15rem 0.35rem; }
}

body.is-mobile .dex-panel-card {
  max-height: var(--app-height, 100dvh);
}
body.is-mobile .dex-panel:not(.hidden) {
  touch-action: pan-y;
}
body.is-mobile.is-immersive .dex-panel {
  z-index: 88;
}
body.is-mobile.is-immersive .dex-grid {
  max-height: min(18vh, 96px);
}

.dex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 0.45rem;
  overflow-y: auto; max-height: min(72vh, 640px); padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 240, 255, 0.4) rgba(8, 12, 20, 0.85);
}
.dex-grid::-webkit-scrollbar { width: 7px; }
.dex-grid::-webkit-scrollbar-track { background: rgba(8, 12, 20, 0.85); border-radius: 4px; }
.dex-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 240, 255, 0.45), rgba(59, 76, 202, 0.55));
  border-radius: 4px;
  border: 1px solid rgba(124, 240, 255, 0.2);
}
.dex-cell {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.25);
  font-family: var(--font-mono); font-size: 0.55rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.15rem; padding: 0.2rem; cursor: default;
}
.dex-cell.caught {
  border-color: rgba(124,240,255,0.45); background: rgba(124,240,255,0.08); color: #fff;
}
.dex-cell img { width: 48px; height: 48px; object-fit: contain; }
.dex-cell-lv {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 700;
  color: var(--poke-yellow);
  line-height: 1.1;
  margin-top: 0.1rem;
}
.dex-cell-num { font-size: 0.45rem; color: rgba(255,255,255,0.55); }
.battle-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.battle-header span:first-child { font-family: var(--font-pixel); font-size: 0.4rem; color: var(--emerald); }
.turn-badge { font-family: var(--font-pixel); font-size: 0.33rem; padding: 0.25rem 0.5rem; background: var(--poke-yellow); color: #1a1a2e; border-radius: 4px; }
.turn-badge.enemy { background: var(--poke-red); color: #fff; }
.turn-badge.switch { background: #f59e0b; color: #1a1a2e; animation: pickNextPulse 0.9s ease-in-out infinite; }

.name-row { display: flex; gap: 0.5rem; font-weight: 700; font-size: 0.82rem; }
.enemy-hud .name-row { justify-content: flex-end; }
.type-row { display: flex; gap: 0.25rem; margin: 0.2rem 0; flex-wrap: wrap; }
.enemy-hud .type-row { justify-content: flex-end; }
.type-chip { font-size: 0.55rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 3px; color: #fff; }

.battle-log {
  min-height: 2.4rem; max-height: 4.5rem; overflow-y: auto;
  background: rgba(0,0,0,0.45); border: 1px solid var(--panel-border);
  padding: 0.5rem 0.65rem; font-size: 0.82rem; margin-bottom: 0.5rem; border-radius: 8px; line-height: 1.4;
  flex-shrink: 0;
}
.battle-main-menu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
}
.battle-main-menu #btn-run { grid-column: 1 / -1; }
.battle-main-menu.hidden { display: none; }
.switch-menu { display: flex; flex-direction: column; gap: 0.4rem; }
.switch-menu.hidden { display: none; }
.switch-menu-title {
  font-family: var(--font-pixel); font-size: 0.4rem; color: var(--poke-yellow);
  text-align: center;
}
.switch-menu-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem;
  max-height: none; overflow: visible;
}
.switch-row {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.35rem 0.3rem;
  border: 2px solid rgba(255,255,255,0.15); border-radius: 8px;
  background: rgba(0,0,0,0.35); color: #fff; cursor: pointer; text-align: left; width: 100%;
}
.switch-row.can-pick:hover { border-color: #7cf0ff; background: rgba(124,240,255,0.1); }
.switch-row.active { border-color: var(--poke-yellow); }
.switch-row.fainted { opacity: 0.45; }
.switch-row:disabled { cursor: default; opacity: 0.5; }
.switch-row img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.switch-row-text { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.62rem; text-align: center; }
.switch-row-text strong { font-size: 0.68rem; }
.switch-menu .back-move { margin-top: 0.15rem; }
.switch-hp-bar { height: 5px; background: rgba(0,0,0,0.45); border-radius: 3px; overflow: hidden; }
.switch-hp-bar div { height: 100%; background: linear-gradient(90deg, #22c55e, #86efac); }
.switch-row.fainted .switch-hp-bar div { background: #6b7280; }
.switch-hp-num { font-family: var(--font-mono); font-size: 0.58rem; color: rgba(255,255,255,0.65); }
.kintara-btn.switch { border-color: rgba(124,240,255,0.45); color: #7cf0ff; }
.move-menu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem;
}
.move-menu.hidden { display: none; }
.move-menu.disabled { opacity: 0.55; pointer-events: none; }
.move-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  min-height: 3.8rem; text-align: left; padding: 0.55rem 0.65rem !important;
}
.move-name { font-size: 0.52rem; line-height: 1.35; color: #fff; }
.move-meta { font-size: 0.42rem; opacity: 0.95; padding: 0.12rem 0.3rem; border-radius: 3px; }
.back-move { grid-column: span 2; }

.battle-main-menu .kintara-btn { font-size: 0.44rem; padding: 0.7rem; }
.kintara-btn {
  padding: 0.6rem; font-family: var(--font-pixel); font-size: 0.38rem;
  cursor: pointer; border: 2px solid var(--panel-border); border-radius: 8px;
  background: rgba(255,255,255,0.06); color: #fff; transition: all 0.15s;
}
.kintara-btn:hover { background: rgba(255,255,255,0.12); border-color: var(--poke-yellow); }
.kintara-btn.fight { border-color: #fbbf24; color: #fde68a; }
.kintara-btn.catch { border-color: #ef4444; color: #fecaca; }
.kintara-btn.run { border-color: #64748b; }
.kintara-btn.auto { border-color: #a78bfa; color: #ddd6fe; }
.kintara-btn.auto.active {
  background: rgba(167,139,250,0.22); border-color: #c4b5fd;
  box-shadow: 0 0 10px rgba(167,139,250,0.35); color: #f5f3ff;
}
.kintara-btn.primary { background: var(--poke-yellow); color: #1a1a2e; border-color: #c7a008; font-size: 0.42rem; }

/* Overlays */
.dex-screen-overlay {
  position: absolute;
  inset: 0;
  z-index: 28;
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
  pointer-events: auto;
}
.dex-screen-overlay.hidden { display: none; }

.fullscreen-overlay {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(7, 11, 20, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.fullscreen-overlay.hidden { display: none; }

.starter-card, .victory-card, .blackout-card { padding: 2rem; text-align: center; max-width: 520px; color: #fff; }
.starter-card h1, .victory-card h1 { font-family: var(--font-pixel); font-size: 0.75rem; color: var(--poke-yellow); margin-bottom: 0.75rem; line-height: 1.6; }
.tech-tag { font-size: 0.65rem; color: var(--emerald); margin-bottom: 0.5rem; font-family: monospace; }
.starter-card p { color: rgba(255,255,255,0.65); margin-bottom: 1.25rem; font-size: 0.9rem; }

.starter-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.starter-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.75rem; background: rgba(255,255,255,0.05); border: 2px solid var(--panel-border);
  border-radius: 12px; cursor: pointer; color: #fff; min-width: 110px; transition: all 0.2s;
}
.starter-btn:hover { border-color: var(--poke-yellow); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(255,203,5,0.2); }
.starter-btn.active { border-color: var(--emerald); box-shadow: 0 0 0 2px rgba(124,240,255,0.35); }
.starter-btn img { width: 72px; height: 72px; object-fit: contain; }

.character-creator {
  max-width: 560px; text-align: left;
  overflow: visible;
}

/* ── Fullscreen login / loading — Game Boy × Pokédex ── */
.login-fullscreen-overlay {
  --gb-shell: #c62828;
  --gb-shell-dark: #7f1010;
  --gb-shell-light: #ef5350;
  --gb-bezel: #1a1a1a;
  --gb-bezel-mid: #2d2d2d;
  --gb-lcd-bg: #9bbc0f;
  --gb-lcd-mid: #8bac0f;
  --gb-lcd-dark: #306230;
  --gb-lcd-text: #0f380f;
  --gb-lcd-muted: #1a4a1a;
  --gb-lcd-highlight: #c4d44a;
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0a1808;
}
.login-fullscreen-overlay.hidden { display: none; }

/* Route 1 pixel sky + grass backdrop */
.login-gb-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-gb-bg-sky {
  position: absolute;
  inset: 0 0 38% 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #5c94fc 0%, #87b8ff 55%, #b8d8ff 100%);
}
.login-gb-bg-grass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 3px, transparent 3px 12px),
    linear-gradient(180deg, #58a038 0%, #3d8a28 35%, #2d6a1e 100%);
}
.login-gb-bg-pixels {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,203,5,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 68%, rgba(255,203,5,0.35) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 72%, rgba(255,255,255,0.3) 0 1px, transparent 2px);
  animation: loginStarsDrift 18s linear infinite;
}
@keyframes loginStarsDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

/* Pokédex clamshell device */
.login-gb-device {
  position: relative;
  z-index: 1;
  width: min(94vw, 520px);
  max-height: min(94dvh, 820px);
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.login-gb-lid {
  flex: 0 0 auto;
  padding: 0.55rem 0.85rem 0.45rem;
  background:
    linear-gradient(180deg, var(--gb-shell-light) 0%, var(--gb-shell) 38%, var(--gb-shell-dark) 100%);
  border: 4px solid #000;
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset 0 -8px 16px rgba(0, 0, 0, 0.22);
}
.login-gb-lid-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.login-gb-pokeball {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #fff 0%, #fff 46%, #111 46%, #111 54%, var(--poke-red) 54%, #b71c1c 100%);
  border: 3px solid #111;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.45);
  position: relative;
}
.login-gb-pokeball::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.login-gb-lid-text {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.login-gb-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.72rem, 3.2vw, 1rem);
  color: var(--poke-yellow);
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-shadow:
    3px 3px 0 #000,
    -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.login-gb-subtitle {
  font-family: var(--font-pixel);
  font-size: clamp(0.3rem, 1.35vw, 0.46rem);
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 #000;
}
.login-gb-lid-strip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.42rem;
  padding-top: 0.35rem;
  border-top: 2px solid rgba(0, 0, 0, 0.28);
}
.login-gb-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
}
.login-gb-led--power {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.45);
  animation: loginPowerBlink 2.4s ease-in-out infinite;
}
.login-gb-led--signal {
  background: #fde047;
  box-shadow: 0 0 6px rgba(253, 224, 71, 0.55);
}
@keyframes loginPowerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.login-gb-hinge {
  flex: 0 0 8px;
  background: linear-gradient(180deg, #111 0%, #333 45%, #111 100%);
  border-left: 4px solid #000;
  border-right: 4px solid #000;
}
.login-gb-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.65rem 0.7rem;
  background:
    linear-gradient(180deg, var(--gb-shell) 0%, var(--gb-shell-dark) 100%);
  border: 4px solid #000;
  border-top: none;
  border-radius: 0 0 20px 20px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 20px rgba(0, 0, 0, 0.25);
}
.login-gb-bezel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.45rem;
  background: linear-gradient(165deg, var(--gb-bezel-mid) 0%, var(--gb-bezel) 100%);
  border: 3px solid #000;
  border-radius: 10px 10px 4px 4px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 10px rgba(0, 0, 0, 0.45);
}
.login-gb-screen-tag {
  flex: 0 0 auto;
  font-family: var(--font-pixel);
  font-size: clamp(0.28rem, 1.1vw, 0.38rem);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  padding-left: 0.1rem;
}
.login-gb-hint {
  font-family: var(--font-pixel);
  font-size: clamp(0.28rem, 1.1vw, 0.36rem);
  color: var(--gb-lcd-muted);
  text-align: center;
  margin-top: 0.45rem;
  letter-spacing: 0.04em;
  animation: loginHintBlink 1.4s step-end infinite;
}
@keyframes loginHintBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Game Boy LCD screen (login card) */
.login-8bit {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-height: min(68dvh, 560px);
  overflow-y: auto;
  padding: 0.75rem 0.85rem 0.85rem;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(15, 56, 15, 0.04) 0 2px,
      transparent 2px 4px
    ),
    linear-gradient(180deg, var(--gb-lcd-bg) 0%, var(--gb-lcd-mid) 100%);
  border: 3px solid var(--gb-lcd-dark);
  border-radius: 3px;
  box-shadow:
    inset 0 0 24px rgba(15, 56, 15, 0.18),
    inset 0 2px 0 rgba(196, 212, 74, 0.35);
  color: var(--gb-lcd-text);
  image-rendering: pixelated;
  -webkit-overflow-scrolling: touch;
}
.login-8bit-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px dashed rgba(15, 56, 15, 0.28);
}
.login-8bit-head-block {
  flex: 1 1 auto;
  min-width: 0;
}
.login-8bit-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.28rem;
  flex: 0 0 auto;
  max-width: 46%;
  margin: 0;
  padding: 0.2rem 0.35rem;
  border-bottom: none;
  background: rgba(15, 56, 15, 0.12);
  border: 2px solid rgba(15, 56, 15, 0.22);
  border-radius: 4px;
}
.login-8bit-brand-ball {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--poke-red);
  border: 2px solid var(--gb-lcd-dark);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  position: relative;
}
.login-8bit-brand-ball::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border: 1px solid var(--gb-lcd-dark);
  border-radius: 50%;
  background: var(--gb-lcd-highlight);
}
.login-8bit-brand-text {
  font-family: var(--font-pixel);
  font-size: clamp(0.3rem, 1.2vw, 0.42rem);
  color: var(--gb-lcd-dark);
  letter-spacing: 0.06em;
  text-align: right;
  line-height: 1.55;
}
.login-8bit-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.12rem;
}
.login-8bit-head--center {
  justify-content: center;
}
.login-8bit-dot {
  width: 8px;
  height: 8px;
  background: var(--gb-lcd-dark);
  box-shadow: 0 0 0 1px rgba(196, 212, 74, 0.6);
  animation: loginBlink 1.2s step-end infinite;
}
@keyframes loginBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.login-8bit-head h1 {
  font-family: var(--font-pixel);
  font-size: clamp(0.58rem, 2.4vw, 0.78rem);
  color: var(--gb-lcd-dark);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-shadow: 1px 1px 0 rgba(196, 212, 74, 0.65);
}
.login-8bit-tag {
  text-align: left;
  font-family: var(--font-pixel);
  font-size: clamp(0.34rem, 1.4vw, 0.48rem);
  color: var(--gb-lcd-muted);
  margin-bottom: 0;
  letter-spacing: 0.06em;
}
.login-8bit-section-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.34rem, 1.35vw, 0.46rem);
  color: var(--gb-lcd-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.28rem;
  line-height: 1.45;
  padding-bottom: 0.12rem;
  border-bottom: 2px solid rgba(15, 56, 15, 0.18);
}
.login-8bit-label {
  font-family: var(--font-pixel) !important;
  font-size: clamp(0.3rem, 1.15vw, 0.4rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  margin-bottom: 0.22rem !important;
  color: var(--gb-lcd-muted) !important;
}
.login-8bit-section { margin-bottom: 0.5rem; }
.login-8bit-divider {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem 0 0.5rem;
  color: var(--gb-lcd-muted);
  font-family: var(--font-pixel);
  font-size: clamp(0.32rem, 1.15vw, 0.42rem);
  text-transform: uppercase;
}
.login-8bit-divider::before,
.login-8bit-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(15, 56, 15, 0.28) 0 4px, transparent 4px 8px);
}
.login-8bit-btn {
  display: block;
  width: 100%;
  padding: 0.58rem 0.7rem;
  border: 3px solid var(--gb-lcd-dark);
  background: var(--gb-lcd-highlight);
  color: var(--gb-lcd-dark);
  font-family: var(--font-pixel);
  font-size: clamp(0.38rem, 1.5vw, 0.52rem);
  line-height: 1.5;
  cursor: pointer;
  box-shadow:
    inset 0 -4px 0 rgba(15, 56, 15, 0.22),
    0 4px 0 var(--gb-lcd-dark);
  transition: transform 0.08s, filter 0.08s;
  border-radius: 2px;
}
.login-8bit-btn:hover:not(:disabled) { filter: brightness(1.06); }
.login-8bit-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 -2px 0 rgba(15, 56, 15, 0.22), 0 1px 0 var(--gb-lcd-dark);
}
.login-8bit-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.login-guest-btn {
  background: linear-gradient(180deg, #5c94fc 0%, #3060b0 100%);
  border-color: #1a3060;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 -4px 0 rgba(26, 48, 96, 0.55), 0 4px 0 #1a3060;
  margin-bottom: 0.15rem;
}
.login-guest-btn:active:not(:disabled) {
  box-shadow: inset 0 -2px 0 rgba(26, 48, 96, 0.45), 0 1px 0 #1a3060;
}
.login-start-btn {
  background: linear-gradient(180deg, var(--poke-yellow) 0%, #d4a017 100%);
  border-color: #7a5a0c;
  color: #3d2800;
  font-size: clamp(0.42rem, 1.65vw, 0.56rem);
  margin-top: 0.2rem;
  box-shadow: inset 0 -4px 0 rgba(122, 90, 12, 0.45), 0 4px 0 #5a4008;
}
.login-start-btn:active:not(:disabled) {
  box-shadow: inset 0 -2px 0 rgba(122, 90, 12, 0.4), 0 1px 0 #5a4008;
}
.login-phantom-btn {
  margin-bottom: 0.25rem;
  background: linear-gradient(180deg, #6b7280 0%, #374151 100%);
  border-color: #1f2937;
  color: #fff;
  width: 100%;
}
.login-mini-btn {
  width: auto;
  flex: 0 0 auto;
  padding: 0.45rem 0.55rem;
  font-size: clamp(0.32rem, 1.2vw, 0.44rem);
}
.login-guest-badge {
  text-align: center;
  margin-bottom: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.login-guest-badge span {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  font-family: var(--font-pixel);
  font-size: clamp(0.34rem, 1.3vw, 0.46rem);
  color: var(--gb-lcd-dark);
  background: rgba(92, 148, 252, 0.35);
  border: 2px solid rgba(15, 56, 15, 0.35);
}
.login-logout-btn {
  width: 100%;
  min-width: 8.5rem;
  margin-bottom: 0.35rem;
  padding: 0.4rem 0.65rem;
  font-size: clamp(0.3rem, 1.15vw, 0.4rem);
  background: rgba(15, 56, 15, 0.12);
  border-color: rgba(15, 56, 15, 0.35);
  color: var(--gb-lcd-muted);
  box-shadow: inset 0 -3px 0 rgba(15, 56, 15, 0.15), 0 3px 0 rgba(15, 56, 15, 0.25);
}
.login-logout-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  color: var(--gb-lcd-dark);
}
.login-guest-badge.hidden { display: none; }
#character-screen.guest-mode #wallet-row { display: none; }
#character-screen.guest-mode #btn-play-guest { display: none; }
.login-guest-badge .guest-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--gb-lcd-muted);
  margin-top: 0.2rem;
  font-family: var(--font-body);
}
.login-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.45rem;
}
.login-name-row .name-input,
.login-name-row .wallet-input { width: 100%; }
.login-name-row .wallet-status { margin-top: 0.35rem; margin-bottom: 0; }
.login-starter-row { gap: 0.3rem; }
.login-starter-btn {
  min-width: 0;
  flex: 1;
  padding: 0.4rem 0.2rem 0.45rem;
  gap: 0.22rem;
  border-radius: 4px;
  border: 3px solid rgba(15, 56, 15, 0.35);
  background: rgba(196, 212, 74, 0.35);
  box-shadow: inset 0 -3px 0 rgba(15, 56, 15, 0.12);
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
}
.login-starter-btn:hover {
  border-color: var(--gb-lcd-dark);
  transform: translateY(-2px);
}
.login-starter-btn.active {
  border-color: var(--gb-lcd-dark);
  background: rgba(196, 212, 74, 0.65);
  box-shadow:
    0 0 0 2px rgba(15, 56, 15, 0.2),
    inset 0 -2px 0 rgba(15, 56, 15, 0.18);
}
.login-starter-btn img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 rgba(15, 56, 15, 0.25));
}
.login-starter-btn span {
  font-size: clamp(0.38rem, 1.4vw, 0.52rem);
  font-family: var(--font-pixel);
  line-height: 1.25;
  color: var(--gb-lcd-dark);
}
.login-loading-text {
  font-family: var(--font-pixel);
  font-size: clamp(0.34rem, 1.35vw, 0.46rem);
  color: var(--gb-lcd-muted);
  text-align: center;
  margin: 0.55rem 0 0.65rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
}
.loading-card-8bit { text-align: center; }

/* Decorative Game Boy controls under LCD */
.login-gb-deco {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0 0.15rem;
}
.login-gb-dpad {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}
.login-gb-dpad-up,
.login-gb-dpad-down,
.login-gb-dpad-left,
.login-gb-dpad-right,
.login-gb-dpad-center {
  position: absolute;
  background: linear-gradient(165deg, #444 0%, #1a1a1a 100%);
  border: 2px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.login-gb-dpad-up,
.login-gb-dpad-down {
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 16px;
}
.login-gb-dpad-up { top: 0; border-radius: 3px 3px 1px 1px; }
.login-gb-dpad-down { bottom: 0; border-radius: 1px 1px 3px 3px; }
.login-gb-dpad-left,
.login-gb-dpad-right {
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 18px;
}
.login-gb-dpad-left { left: 0; border-radius: 3px 1px 1px 3px; }
.login-gb-dpad-right { right: 0; border-radius: 1px 3px 3px 1px; }
.login-gb-dpad-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 2px;
}
.login-gb-ab {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.login-gb-btn-a,
.login-gb-btn-b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-pixel);
  font-size: 0.28rem;
  color: rgba(255, 255, 255, 0.75);
  border: 2px solid #000;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 3px 0 rgba(0, 0, 0, 0.45);
}
.login-gb-btn-a {
  background: linear-gradient(165deg, #ef5350 0%, #b71c1c 100%);
  transform: translateY(-6px);
}
.login-gb-btn-b {
  background: linear-gradient(165deg, #ffd54f 0%, #f9a825 100%);
  color: rgba(0, 0, 0, 0.65);
}
.login-gb-speaker {
  flex: 1 1 auto;
  max-width: 72px;
  height: 28px;
  margin-left: auto;
  background: repeating-linear-gradient(
    -28deg,
    rgba(0, 0, 0, 0.55) 0 2px,
    transparent 2px 5px
  );
  border-radius: 2px;
  opacity: 0.55;
}
.login-gb-device--loading .login-gb-deco { display: none; }

.character-creator h1 { text-align: center; }
.character-creator .tech-tag { text-align: center; }
.creator-section { margin-bottom: 1rem; }
.creator-label {
  display: block;
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--dex-lcd);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.28rem;
}
.login-8bit .creator-label {
  color: var(--gb-lcd-muted, #1a4a1a);
}
.wallet-status { font-size: 0.82rem; color: var(--gb-lcd-muted, rgba(26,74,26,0.85)); margin-bottom: 0.35rem; font-family: var(--font-body); }
.wallet-status.connected { color: #1a6b1a; font-weight: 600; }
.wallet-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.wallet-input, .name-input {
  flex: 1; min-width: 0; width: 100%; padding: 0.52rem 0.65rem; border-radius: 2px;
  border: 2px solid rgba(15, 56, 15, 0.45); background: rgba(196, 212, 74, 0.35); color: var(--gb-lcd-dark, #0f380f);
  font-family: var(--font-body); font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(15, 56, 15, 0.12);
}
.wallet-input::placeholder, .name-input::placeholder { color: rgba(15, 56, 15, 0.45); }
.wallet-input:focus, .name-input:focus {
  outline: none;
  border-color: var(--gb-lcd-dark, #0f380f);
  background: rgba(196, 212, 74, 0.55);
  box-shadow: inset 0 2px 4px rgba(15, 56, 15, 0.1), 0 0 0 2px rgba(15, 56, 15, 0.15);
}
.creator-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.swatch-row { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.swatch-btn {
  width: 30px; height: 30px; border-radius: 2px; border: 2px solid rgba(15, 56, 15, 0.35);
  cursor: pointer; padding: 0; transition: transform 0.1s, border-color 0.1s;
  box-shadow: inset 0 -2px 0 rgba(15, 56, 15, 0.2), 0 2px 0 rgba(15, 56, 15, 0.25);
}
.swatch-btn:hover { transform: scale(1.08); }
.swatch-btn.active { border-color: var(--gb-lcd-dark, #0f380f); box-shadow: 0 0 0 2px rgba(15, 56, 15, 0.25); }
.creator-welcome { color: #1a6b1a; font-size: 0.88rem; text-align: center; margin: 0.35rem 0; line-height: 1.4; font-weight: 600; }
.creator-welcome.hidden { display: none; }
#starter-section.hidden { display: none; }
#wallet-section.hidden { display: none; }
.login-account-notice {
  border: 2px dashed rgba(15, 56, 15, 0.35);
  padding: 0.45rem 0.55rem;
  background: rgba(92, 148, 252, 0.18);
  margin-bottom: 0.4rem;
  border-radius: 3px;
}
.account-notice-text {
  font-size: 0.78rem;
  color: var(--gb-lcd-muted, #1a4a1a);
  line-height: 1.45;
  margin: 0;
}
.account-notice-text strong { color: var(--gb-lcd-dark, #0f380f); font-weight: 700; }
.creator-error { color: #b91c1c; font-size: 0.88rem; text-align: center; margin: 0.35rem 0; line-height: 1.4; font-weight: 600; }
.creator-error.hidden { display: none; }
#btn-audio-toggle.muted { opacity: 0.55; }

/* Character creator / login — compact on phones */
@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
  .dex-screen-overlay,
  #character-screen.dex-screen-overlay,
  #loading-screen.dex-screen-overlay {
    align-items: center;
    padding: max(0.35rem, env(safe-area-inset-top)) 0.45rem 0.45rem;
  }

  .login-8bit {
    width: 100%;
    max-width: none;
    max-height: none;
  }
  .login-gb-device {
    width: min(96vw, 400px);
    max-height: min(94dvh, 640px);
  }
  .account-notice-text { font-size: 0.72rem; }

  .login-8bit-topbar { margin-bottom: 0.35rem; padding-bottom: 0.35rem; }
  .login-8bit-brand-text { font-size: 0.36rem; }
  .login-8bit-section-title { font-size: 0.36rem; margin-bottom: 0.22rem; }
  .login-8bit-label { font-size: 0.32rem !important; }

  .login-8bit-head h1 { font-size: 0.52rem; }
  .login-8bit-tag { font-size: 0.38rem; margin-bottom: 0.4rem; }
  .login-8bit-section { margin-bottom: 0.35rem; }
  .login-8bit-btn { font-size: 0.38rem; padding: 0.45rem 0.5rem; }
  .login-starter-btn img { width: 44px; height: 44px; }
  .login-starter-btn span { font-size: 0.4rem; }
  .creator-label { font-size: 0.75rem; }
  .wallet-status { font-size: 0.82rem; }
  .wallet-input, .name-input { font-size: 0.92rem; }

  .character-creator,
  .loading-card {
    max-width: 100%;
    width: 100%;
    max-height: none;
    padding: 0.7rem 0.65rem 0.75rem;
    padding-top: 1.6rem;
  }

  .character-creator h1,
  .loading-card h1 {
    font-size: 0.5rem;
    margin-bottom: 0.3rem;
    line-height: 1.45;
  }

  .character-creator .tech-tag {
    font-size: 0.48rem;
    margin-bottom: 0.35rem;
    line-height: 1.35;
  }

  .creator-section { margin-bottom: 0.45rem; }
  .creator-label { font-size: 0.52rem; margin-bottom: 0.22rem; }
  .wallet-status { font-size: 0.65rem; margin-bottom: 0.25rem; }

  .wallet-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.3rem;
    align-items: stretch;
  }
  .login-phantom-btn { grid-column: 1 / -1; width: 100%; font-size: 0.34rem; padding: 0.42rem; }
  .wallet-input { grid-column: 1 / -1; min-width: 0; width: 100%; font-size: 0.68rem; padding: 0.32rem 0.45rem; }
  .name-input { min-width: 0; width: 100%; font-size: 0.68rem; padding: 0.32rem 0.45rem; }
  #btn-wallet-manual { font-size: 0.28rem; padding: 0.35rem 0.45rem; }
  .wallet-clear-btn { padding: 0.32rem 0.4rem; font-size: 0.55rem; }

  .login-colors { gap: 0.28rem 0.35rem; }
  .swatch-btn { width: 26px; height: 26px; min-width: 26px; min-height: 26px; }
  .swatch-row { gap: 0.25rem; }

  .starter-row { gap: 0.3rem; }
  .starter-btn {
    min-width: 0;
    flex: 1;
    padding: 0.35rem 0.2rem;
    gap: 0.2rem;
    border-radius: 8px;
  }
  .starter-btn img { width: 44px; height: 44px; }
  .starter-btn span { font-size: 0.52rem; line-height: 1.2; }

  .creator-welcome,
  .creator-error { font-size: 0.62rem; margin: 0.25rem 0; }
  .start-game-btn { font-size: 0.34rem; padding: 0.45rem; margin-top: 0.3rem; }
  .loading-card { min-width: 0; }
  .loading-bar-wrap { margin-top: 0.55rem; height: 6px; }
}

@media (max-height: 420px) and (orientation: landscape) {
  .login-gb-title { font-size: 0.58rem; }
  .login-gb-subtitle { font-size: 0.28rem; }
  .login-gb-device { max-height: 96dvh; }
  .login-gb-lid { padding: 0.32rem 0.5rem 0.28rem; }
  .login-gb-pokeball { width: 28px; height: 28px; }
  .login-gb-deco { display: none; }
  .login-8bit { padding: 0.5rem 0.65rem 0.6rem; max-height: 52dvh; }
  .login-8bit-brand-text { font-size: 0.32rem; }
  .character-creator .tech-tag { display: none; }
  .character-creator h1 { font-size: 0.44rem; }
  .creator-section { margin-bottom: 0.3rem; }
  .starter-btn img { width: 36px; height: 36px; }
  .starter-btn span { font-size: 0.46rem; }
  .swatch-btn { width: 22px; height: 22px; min-width: 22px; min-height: 22px; }
  .login-colors { grid-template-columns: 1fr 1fr; gap: 0.2rem 0.3rem; }
}

body.is-mobile #character-screen.login-fullscreen-overlay,
body.is-mobile #loading-screen.login-fullscreen-overlay {
  align-items: center;
  justify-content: center;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding:
    max(0.2rem, env(safe-area-inset-top))
    max(0.25rem, env(safe-area-inset-right))
    max(0.2rem, env(safe-area-inset-bottom))
    max(0.25rem, env(safe-area-inset-left));
}
body.is-mobile .login-gb-device {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  flex: 0 1 auto;
}
body.is-mobile .login-gb-lid {
  flex: 0 0 auto;
  padding: 0.28rem 0.5rem 0.22rem;
  border-radius: 12px 12px 0 0;
}
body.is-mobile .login-gb-lid-strip {
  margin-top: 0.18rem;
  padding-top: 0.15rem;
}
body.is-mobile .login-gb-hinge {
  flex: 0 0 5px;
}
body.is-mobile .login-gb-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.28rem 0.38rem 0.32rem;
  border-radius: 0 0 14px 14px;
}
body.is-mobile .login-gb-bezel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.28rem;
}
body.is-mobile .login-gb-pokeball {
  width: 28px;
  height: 28px;
}
body.is-mobile .login-gb-title {
  font-size: 0.5rem;
  line-height: 1.2;
}
body.is-mobile .login-gb-subtitle {
  font-size: 0.24rem;
}
body.is-mobile .login-gb-deco {
  display: none;
}
body.is-mobile .login-gb-screen-tag {
  margin-bottom: 0.18rem;
  font-size: 0.26rem;
}
body.is-mobile .login-8bit {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.38rem 0.48rem 0.42rem;
  -webkit-overflow-scrolling: touch;
}
body.is-mobile .login-8bit-brand {
  display: none;
}
body.is-mobile .login-account-notice {
  display: none;
}
body.is-mobile .login-8bit-topbar {
  margin-bottom: 0.22rem;
  padding-bottom: 0.22rem;
}
body.is-mobile .login-8bit-tag {
  display: none;
}
body.is-mobile .login-8bit-head h1 {
  font-size: 0.42rem;
}
body.is-mobile .login-8bit-section {
  margin-bottom: 0.22rem;
}
body.is-mobile .login-8bit-label {
  font-size: 0.3rem !important;
  margin-bottom: 0.12rem;
}
body.is-mobile .login-8bit-btn {
  font-size: 0.32rem;
  padding: 0.34rem 0.4rem;
}
body.is-mobile .wallet-input,
body.is-mobile .name-input {
  font-size: 16px;
  padding: 0.3rem 0.42rem;
}
body.is-mobile .wallet-status {
  font-size: 0.58rem;
  line-height: 1.2;
  margin-top: 0.15rem;
  margin-bottom: 0.1rem;
}
body.is-mobile .login-colors {
  gap: 0.18rem 0.22rem;
}
body.is-mobile .login-starter-row {
  gap: 0.18rem;
}
body.is-mobile .login-starter-btn {
  padding: 0.22rem 0.12rem;
}
body.is-mobile .login-starter-btn img {
  width: 32px;
  height: 32px;
}
body.is-mobile .login-starter-btn span {
  font-size: 0.34rem;
}
body.is-mobile .creator-welcome,
body.is-mobile .creator-error {
  font-family: var(--font-body);
  font-size: clamp(0.58rem, 2.4vw, 0.72rem);
  margin: 0.15rem 0;
}

@media (max-width: 768px) {
  #character-screen.login-fullscreen-overlay:not(.hidden),
  #loading-screen.login-fullscreen-overlay:not(.hidden) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  #character-screen.login-fullscreen-overlay:not(.hidden) .login-gb-device,
  #loading-screen.login-fullscreen-overlay:not(.hidden) .login-gb-device {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  #character-screen.login-fullscreen-overlay:not(.hidden) .login-gb-body,
  #loading-screen.login-fullscreen-overlay:not(.hidden) .login-gb-body,
  #character-screen.login-fullscreen-overlay:not(.hidden) .login-gb-bezel,
  #loading-screen.login-fullscreen-overlay:not(.hidden) .login-gb-bezel {
    min-height: 0;
    overflow: hidden;
  }
  #character-screen.login-fullscreen-overlay:not(.hidden) .login-8bit,
  #loading-screen.login-fullscreen-overlay:not(.hidden) .login-8bit {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
  }
}

@media (max-height: 700px) and (max-width: 768px) {
  body.is-mobile .login-gb-lid {
    padding: 0.2rem 0.42rem 0.18rem;
  }
  body.is-mobile .login-gb-pokeball {
    width: 24px;
    height: 24px;
  }
  body.is-mobile .login-gb-lid-strip {
    display: none;
  }
  body.is-mobile .login-8bit-btn {
    padding: 0.28rem 0.35rem;
  }
  body.is-mobile .login-starter-btn img {
    width: 28px;
    height: 28px;
  }
  body.is-mobile .wallet-status {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.loading-card { min-width: 280px; }
.loading-bar-wrap {
  height: 10px;
  background: rgba(15, 56, 15, 0.22);
  border: 2px solid rgba(15, 56, 15, 0.35);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.75rem;
}
.loading-bar {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    var(--gb-lcd-dark, #0f380f) 0 8px,
    var(--gb-lcd-highlight, #c4d44a) 8px 16px
  );
  transition: width 0.35s;
  box-shadow: inset 0 0 6px rgba(196, 212, 74, 0.35);
}

#dialog-box,
.poke-dialog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 18;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none;
  pointer-events: auto;
  border: none;
  background: transparent;
  box-shadow: none;
}
#dialog-box.hidden,
.poke-dialog.hidden { display: none; }

.poke-dialog .dialog-inner {
  margin: 0 0.65rem 0.65rem;
  padding: 0.85rem 1rem 0.7rem;
  background: linear-gradient(180deg, #f8faf8 0%, #e8f0e8 100%);
  border: 4px solid #0f380f;
  outline: 3px solid #ffcb05;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px #306230,
    0 8px 0 rgba(15, 56, 15, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.65);
  color: #0f380f;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: start;
}

.dialog-portrait {
  grid-row: 1 / 3;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: #306230;
  border: 3px solid #0f380f;
  box-shadow: inset 0 0 0 2px #ffcb05;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.dialog-portrait.hidden { display: none; }

.dialog-content {
  min-width: 0;
}

.interact-prompt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5.5rem;
  z-index: 17;
  margin: 0 0.65rem;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border: 4px solid #2d2d2d;
  box-shadow: inset 0 0 0 2px #f4d35e, 0 4px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  color: #f4d35e;
  image-rendering: pixelated;
}
.interact-prompt.hidden { display: none; }
.interact-icon { font-size: 0.9rem; image-rendering: pixelated; }
.interact-prompt-text { flex: 1; }
.interact-key {
  padding: 0.2rem 0.45rem;
  background: #0f380f;
  border: 2px solid #ffcb05;
  color: #ffcb05;
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  image-rendering: pixelated;
}

.dialog-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding-top: 0.35rem;
  border-top: 2px dashed rgba(15, 56, 15, 0.25);
}

.dialog-speaker {
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  color: #1e40af;
  margin-bottom: 0.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dialog-speaker.hidden { display: none; }

#dialog-text,
.dialog-body {
  font-family: var(--font-pixel);
  font-size: 0.56rem;
  line-height: 1.7;
  margin: 0;
  color: #0f380f;
  min-height: 2.2em;
}

.dialog-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: #0f380f;
  background: #ffcb05;
  border: 2px solid #0f380f;
  border-radius: 2px;
  animation: dialog-blink 0.85s step-end infinite;
}

@keyframes dialog-blink {
  50% { opacity: 0.35; }
}

.dialog-hint {
  display: inline-block;
  font-size: 0.42rem;
  color: #306230;
  font-family: var(--font-pixel);
  letter-spacing: 0.06em;
}

.oak-prompt {
  position: absolute; z-index: 16; padding: 0.3rem 0.6rem;
  font-family: var(--font-pixel); font-size: 0.35rem; color: #fff;
  background: var(--poke-blue); border: 2px solid var(--poke-yellow); border-radius: 6px;
  pointer-events: none; transform: translate(-50%, -100%);
  left: 50%; top: 12%;
}
.oak-prompt.hidden { display: none; }

/* Type colors */
.type-normal { background: #9ca3af; }
.type-fire { background: #ef4444; }
.type-water { background: #3b82f6; }
.type-grass { background: #22c55e; }
.type-electric { background: #eab308; color: #1a1a2e; }
.type-ice { background: #67e8f9; color: #1a1a2e; }
.type-fighting { background: #b91c1c; }
.type-poison { background: #a855f7; }
.type-ground { background: #d97706; }
.type-flying { background: #818cf8; }
.type-psychic { background: #ec4899; }
.type-bug { background: #84cc16; color: #1a1a2e; }
.type-rock { background: #78716c; }
.type-ghost { background: #6b21a8; }
.type-dragon { background: #6366f1; }
.type-dark { background: #374151; }
.type-steel { background: #94a3b8; color: #1a1a2e; }
.type-fairy { background: #f472b6; color: #1a1a2e; }

/* ── Mobile / landscape ───────────────────────────────────────── */
.rotate-prompt {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a1a2e 0%, #2d6a30 100%);
  padding: 1.5rem;
}
.rotate-prompt.hidden { display: none; }
.rotate-prompt-card { text-align: center; padding: 1.5rem 1.25rem; max-width: 280px; color: #fff; }
.rotate-icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; animation: rotateWiggle 1.8s ease-in-out infinite; }
.rotate-title { font-family: var(--font-pixel); font-size: 0.45rem; color: var(--poke-yellow); line-height: 1.6; margin-bottom: 0.5rem; }
.rotate-sub { font-size: 0.75rem; color: rgba(255,255,255,0.55); }
@keyframes rotateWiggle {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(78deg); }
}

.mobile-controls {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
}
.mobile-controls.hidden { display: none; }
.mobile-dpad, .mobile-actions, .mobile-cam { pointer-events: auto; }

.virtual-dpad {
  position: absolute;
  left: max(0.35rem, env(safe-area-inset-left));
  bottom: max(0.35rem, env(safe-area-inset-bottom));
  width: 7.25rem;
  height: 7.25rem;
}
.vpad-shell {
  position: relative;
  width: 100%;
  height: 100%;
}
.vpad-zone, .vpad-center {
  position: absolute;
  border: none;
  padding: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.vpad-zone {
  background: linear-gradient(180deg, #4a4a4a, #1a1a1a);
  box-shadow: 0 3px 0 #0a0a0a, inset 0 1px 0 rgba(255,255,255,0.14);
  cursor: pointer;
}
.vpad-zone:active, .vpad-zone.active {
  background: linear-gradient(180deg, #6a6a6a, #2a2a2a);
  box-shadow: 0 1px 0 #0a0a0a, inset 0 2px 8px rgba(0,0,0,0.5);
}
.vpad-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 30%;
  border-radius: 5px;
  background: linear-gradient(180deg, #333, #111);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  pointer-events: none;
}
.vpad-up, .vpad-down {
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 36%;
  border-radius: 6px 6px 3px 3px;
}
.vpad-up { top: 0; }
.vpad-down { bottom: 0; border-radius: 3px 3px 6px 6px; }
.vpad-left, .vpad-right {
  top: 50%;
  transform: translateY(-50%);
  width: 36%;
  height: 34%;
  border-radius: 6px;
}
.vpad-left { left: 0; }
.vpad-right { right: 0; }

.mobile-dpad {
  display: block;
}

.mobile-cam {
  position: absolute; left: max(8.25rem, calc(env(safe-area-inset-left) + 8rem));
  bottom: max(0.35rem, env(safe-area-inset-bottom));
  display: flex; gap: 0.25rem;
}

.mobile-actions {
  position: absolute; right: max(0.35rem, env(safe-area-inset-right)); bottom: max(0.35rem, env(safe-area-inset-bottom));
  display: flex; gap: 0.22rem; align-items: flex-end; flex-wrap: wrap;
  max-width: calc(100vw - 9rem);
  justify-content: flex-end;
}
.mob-dex { border-color: rgba(255,203,5,0.55); color: #fde047; font-family: var(--font-pixel); font-size: 0.34rem; }

.mob-btn {
  width: 2.15rem; height: 2.15rem; border-radius: 10px;
  border: 2px solid rgba(124,240,255,0.45);
  background: rgba(8,14,24,0.72); color: #fff;
  font-size: 0.85rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.mob-btn:active, .mob-btn.active { background: rgba(124,240,255,0.28); border-color: #7cf0ff; }
.mob-battle { border-color: rgba(255,203,5,0.55); color: #fde047; }
.mob-interact { font-family: var(--font-pixel); font-size: 0.38rem; }

.mob-chat-close {
  display: none; position: absolute; top: 0.2rem; right: 0.25rem; z-index: 2;
  width: 1.4rem; height: 1.4rem; border: none; border-radius: 6px;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 0.65rem; cursor: pointer;
}

body.is-mobile .dex-exit-btn {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.88rem;
  top: max(0.12rem, env(safe-area-inset-top));
  right: max(0.12rem, env(safe-area-inset-right));
  z-index: 280;
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(165deg, rgba(34, 40, 52, 0.96) 0%, rgba(12, 16, 24, 0.98) 100%);
  box-shadow:
    var(--mob-shadow, 0 4px 18px rgba(0, 0, 0, 0.42)),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.is-mobile.is-immersive .global-chat.chat-open .mob-chat-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  top: max(0.3rem, env(safe-area-inset-top));
  right: max(0.3rem, env(safe-area-inset-right));
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 14, 24, 0.92);
}
body.is-mobile .dex-exit-btn:active {
  transform: scale(0.92);
}

/* Mobile landscape — edge-to-edge fullscreen game */
body.is-mobile.is-immersive {
  --arcade-ui-scale: 1;
  --arcade-deck-h: 0px;
  --mob-glass-top: rgba(18, 24, 36, 0.93);
  --mob-glass-bot: rgba(8, 12, 20, 0.9);
  --mob-glass-bg: linear-gradient(165deg, rgba(18, 24, 36, 0.93) 0%, rgba(8, 12, 20, 0.9) 100%);
  --mob-glass-border: rgba(255, 255, 255, 0.11);
  --mob-glass-highlight: rgba(255, 255, 255, 0.07);
  --mob-gold: #ffcb05;
  --mob-cyan: #7cf0ff;
  --mob-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
  position: fixed;
  inset: 0;
  left: 0;
  right: 0;
  top: var(--app-offset-top, 0px);
  width: 100%;
  width: 100vw;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #000 !important;
}
html.is-immersive {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  background: #000 !important;
}
body.is-mobile.is-immersive .arcade-room-scene { display: none; }
body.is-mobile.is-immersive .arcade-room {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  background: #000;
}
body.is-mobile.is-immersive .arcade-machine {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  filter: none;
}
body.is-mobile.is-immersive .arcade-marquee {
  display: none !important;
}
body.is-mobile.is-immersive .arcade-plinth {
  display: none !important;
}
body.is-mobile.is-immersive .dex-lid-badge,
body.is-mobile.is-immersive .marquee-poke,
body.is-mobile.is-immersive .marquee-edition,
body.is-mobile.is-immersive .arcade-marquee-lights,
body.is-mobile.is-immersive .dex-hinge {
  display: none;
}
body.is-mobile.is-immersive .marquee-title {
  font-size: 0.38rem;
  padding: 0;
  background: none;
  border: none;
  letter-spacing: 0.12em;
}
body.is-mobile.is-immersive .arcade-cabinet {
  display: flex !important;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  grid-template-columns: none;
  border: none;
  background: #000 !important;
  box-shadow: none !important;
}
body.is-mobile.is-immersive .arcade-left,
body.is-mobile.is-immersive .arcade-right {
  display: none !important;
}
body.is-mobile.is-immersive .quality-panel {
  display: none !important;
}

/* Minimap removed */
.map2d-panel,
.map2d-modal,
.mobile-hud-map,
#minimap,
#map2d-large {
  display: none !important;
}

/* Mobile HUD — team left · ranking right */
.mobile-hud-dock,
.mobile-hud-map,
.mobile-hud-lb-strip {
  display: none;
}
body.is-mobile.is-immersive .mobile-hud-dock {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
  position: absolute;
  top: 0;
  left: max(0, env(safe-area-inset-left));
  right: max(0, env(safe-area-inset-right));
  padding-top: max(2px, env(safe-area-inset-top));
  z-index: 24;
  pointer-events: none;
  font-size: clamp(11px, 2.4vw, 14px);
}

body.is-mobile.is-immersive .mobile-hud-left {
  flex: 0 0 auto;
  align-self: flex-start;
  pointer-events: none;
}
body.is-mobile.is-immersive .mobile-hud-right {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.14rem;
  max-width: min(52vw, 15rem);
  padding-right: calc(1.85rem + env(safe-area-inset-right, 0px));
  pointer-events: none;
}

body.is-mobile.is-immersive .mobile-hud-score-bar,
body.is-mobile.is-immersive .mobile-hud-lb-strip,
body.is-mobile.is-immersive .mobile-hud-squad,
body.is-mobile.is-immersive .mobile-hud-lb {
  pointer-events: none;
}
body.is-mobile.is-immersive .mobile-hud-score-bar > *,
body.is-mobile.is-immersive .mobile-hud-lb-strip > *,
body.is-mobile.is-immersive .mobile-hud-squad > *,
body.is-mobile.is-immersive .mobile-hud-lb > * {
  pointer-events: auto;
}

body.is-mobile.is-immersive .mobile-hud-lb-strip {
  display: block;
  width: 100%;
  min-width: 0;
}
body.is-mobile.is-immersive .mobile-hud-lb {
  display: flex;
  width: 100%;
  min-width: 0;
}

body.is-mobile.is-immersive .mobile-hud-score-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(0.08rem, 0.9vw, 0.16rem);
  flex-shrink: 0;
  width: 100%;
}
body.is-mobile.is-immersive .mobile-hud-lb-btn {
  flex: 0 0 auto;
  width: clamp(1.65rem, 5.5vw, 2rem);
  height: clamp(1.65rem, 5.5vw, 2rem);
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 203, 5, 0.45);
  background: linear-gradient(165deg, var(--mob-glass-top) 0%, var(--mob-glass-bot) 100%);
  box-shadow: var(--mob-shadow), inset 0 1px 0 rgba(255, 203, 5, 0.15);
  font-size: clamp(0.85rem, 2.8vw, 1rem);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
body.is-mobile.is-immersive .mobile-hud-lb-btn:active {
  transform: scale(0.94);
}
body.is-mobile.is-immersive .mobile-hud-rank-pill,
body.is-mobile.is-immersive .mobile-hud-dollars-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.03rem;
  padding: 0.06rem 0.36rem;
  border-radius: 999px;
  background: linear-gradient(165deg, var(--mob-glass-top) 0%, var(--mob-glass-bot) 100%);
  border: 1px solid var(--mob-glass-border);
  box-shadow: var(--mob-shadow), inset 0 1px 0 var(--mob-glass-highlight);
  backdrop-filter: blur(12px);
}
body.is-mobile.is-immersive .mobile-hud-rank-pill {
  min-width: clamp(2.6rem, 12.5vw, 3.3rem);
  border-color: rgba(124, 240, 255, 0.28);
  box-shadow: var(--mob-shadow), inset 0 1px 0 rgba(124, 240, 255, 0.1);
}
body.is-mobile.is-immersive .mobile-hud-dollars-pill {
  min-width: clamp(3.85rem, 22vw, 5.8rem);
  padding: 0.05rem 0.32rem;
  border-color: rgba(255, 203, 5, 0.34);
  box-shadow: var(--mob-shadow), inset 0 1px 0 rgba(255, 203, 5, 0.12);
}
body.is-mobile.is-immersive .mobile-hud-stat-label {
  font-family: var(--font-pixel);
  font-size: clamp(6px, 1.5vw, 8px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}
body.is-mobile.is-immersive .mobile-hud-rank-val {
  font-family: var(--font-mono);
  font-size: clamp(12px, 2.8vw, 15px);
  line-height: 1;
  color: rgba(124, 240, 255, 0.75);
  font-weight: 700;
}
body.is-mobile.is-immersive .mobile-hud-rank-val.has-rank {
  color: #fde047;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.35);
}
body.is-mobile.is-immersive .mobile-hud-dollars-val {
  font-family: var(--font-mono);
  font-size: clamp(12px, 2.8vw, 15px);
  line-height: 1;
  color: var(--poke-yellow);
  text-shadow: 0 0 10px rgba(255, 203, 5, 0.35);
}

body.is-mobile.is-immersive .mobile-hud-side,
body.is-mobile.is-immersive .mobile-hud-map,
body.is-mobile.is-immersive .mobile-hud-chat,
body.is-mobile.is-immersive .mobile-hud-mid,
body.is-mobile.is-immersive .mobile-hud-top {
  display: none !important;
}
body.is-mobile #global-chat {
  display: none !important;
}
body.is-mobile.is-immersive .mobile-hud-squad {
  flex: 0 0 clamp(2.85rem, 10.5vw, 3.45rem);
  width: clamp(2.85rem, 10.5vw, 3.45rem);
  max-width: clamp(2.85rem, 10.5vw, 3.45rem);
  max-height: min(36vh, calc(var(--app-height, 100dvh) - 8.5rem));
  min-width: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
body.is-mobile.is-immersive .mobile-hud-dock .mobile-hud-squad .kintara-panel,
body.is-mobile.is-immersive .mobile-hud-squad #battle-team-aside {
  background:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.05) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, rgba(155, 188, 15, 0.9) 0%, rgba(139, 172, 15, 0.94) 100%) !important;
  border: 2px solid var(--gb-lcd-dark, #306230) !important;
  box-shadow: var(--mob-shadow), inset 0 1px 0 rgba(196, 212, 74, 0.28) !important;
  backdrop-filter: none;
  color: var(--gb-lcd-text, #0f380f);
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini,
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini.kintara-panel {
  width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  padding: 6px 8px;
  display: block !important;
  border-radius: 10px;
  box-sizing: border-box;
  background: linear-gradient(165deg, var(--mob-glass-top) 0%, var(--mob-glass-bot) 100%) !important;
  border: 1px solid var(--mob-glass-border) !important;
  box-shadow: var(--mob-shadow), inset 0 1px 0 var(--mob-glass-highlight) !important;
  backdrop-filter: blur(12px);
  color: #fff;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .panel-title,
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .panel-title.hidden,
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-self,
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-more {
  display: none !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-top {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  max-height: none !important;
  flex: none !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 6px 4px 5px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  text-align: center !important;
  font-size: inherit !important;
  color: #fff !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-row--top1 {
  background: rgba(255, 203, 5, 0.14);
  border-color: rgba(255, 203, 5, 0.35);
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-row--top2 {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-row--top3 {
  background: rgba(234, 88, 12, 0.12);
  border-color: rgba(234, 88, 12, 0.28);
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-rank {
  font-size: 1.15em !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-name {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.92em !important;
  line-height: 1.15 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-name .lb-trainer {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-pts,
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-pts--compact {
  font-size: 0.82em !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-row.lb-me {
  border-color: rgba(255, 203, 5, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 203, 5, 0.25) !important;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .hud-lb-empty {
  grid-column: 1 / -1;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding: 6px;
}
body.is-mobile.is-immersive .mobile-hud-lb #hud-lb-mini .lb-wallet-toggle {
  display: none !important;
}

body.is-mobile.is-immersive .mobile-hud-squad #battle-team-aside .panel-title.battle-subtitle {
  color: var(--gb-lcd-dark, #0f380f);
  font-size: clamp(0.19rem, 1.85vw, 0.26rem);
  margin: 0 0 0.04rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.is-mobile.is-immersive .mobile-hud-squad #battle-team-aside {
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(36vh, calc(var(--app-height, 100dvh) - 8.5rem));
  padding: 0.08rem 0.1rem;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  border-radius: 8px;
  box-sizing: border-box;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  min-height: clamp(1.55rem, 7.2vw, 2rem);
  padding: 0.08rem 0.1rem;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  border-radius: 6px;
  background: rgba(15, 56, 15, 0.1);
  border: 1px solid rgba(15, 56, 15, 0.22);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot.active {
  border-color: var(--gb-lcd-dark, #0f380f);
  background: rgba(196, 212, 74, 0.35);
  box-shadow: 0 0 8px rgba(15, 56, 15, 0.18);
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-name,
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-lv {
  color: var(--gb-lcd-dark, #0f380f);
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-panel {
  flex: 0 1 auto;
  flex-direction: column;
  gap: clamp(0.05rem, 0.7vw, 0.1rem);
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: stretch;
  scrollbar-width: none;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot img {
  width: clamp(1.1rem, 5.8vw, 1.45rem);
  height: clamp(1.1rem, 5.8vw, 1.45rem);
  flex-shrink: 0;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-num {
  display: block !important;
  position: absolute;
  top: 0.02rem;
  left: 0.08rem;
  font-size: clamp(0.2rem, 1.6vw, 0.26rem);
  line-height: 1;
  opacity: 0.85;
  z-index: 1;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-meta {
  display: flex !important;
  flex-direction: column;
  gap: 0.02rem;
  min-width: 0;
  flex: 1 1 auto;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-name,
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-lv {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-name {
  font-size: clamp(0.26rem, 2vw, 0.34rem);
  line-height: 1.1;
  font-weight: 600;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-lv {
  font-size: clamp(0.22rem, 1.7vw, 0.3rem);
  opacity: 0.88;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-hp,
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-exp {
  display: block !important;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(15, 56, 15, 0.25);
  overflow: hidden;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-hp-fill {
  background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.35);
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-exp-fill {
  background: linear-gradient(90deg, var(--poke-blue), var(--poke-yellow));
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-bars {
  display: flex !important;
  flex-direction: column;
  gap: 0.05rem;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-stat-row {
  display: grid !important;
  grid-template-columns: 0.9rem minmax(0, 1fr) auto;
  gap: 0.06rem;
  align-items: center;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-stat-label {
  font-size: clamp(0.18rem, 1.4vw, 0.24rem);
  color: var(--gb-lcd-dark, #0f380f);
  opacity: 0.85;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-stat-val {
  font-size: clamp(0.18rem, 1.45vw, 0.24rem);
  color: var(--gb-lcd-dark, #0f380f);
  opacity: 0.9;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-head {
  display: flex !important;
  justify-content: space-between;
  gap: 0.08rem;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-row {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 0.08rem;
}
body.is-mobile.is-immersive .mobile-hud-squad #battle-team-aside .battle-team-hint { display: none !important; }
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-panel::-webkit-scrollbar { display: none; }
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-empty {
  font-size: clamp(0.36rem, 2.4vw, 0.48rem);
  padding: 0;
}
body.is-mobile.is-immersive .mobile-hud-squad .battle-team-slot-empty span:last-child { display: none; }

body.is-mobile.is-immersive.in-battle .mobile-hud-dock { z-index: 62; }

@media (max-height: 420px) and (orientation: landscape) {
  body.is-mobile.is-immersive .mobile-hud-squad {
    flex-basis: clamp(2.65rem, 10vw, 3.2rem);
    width: clamp(2.65rem, 10vw, 3.2rem);
    max-width: clamp(2.65rem, 10vw, 3.2rem);
  }
  body.is-mobile.is-immersive .mobile-cam-row {
    gap: clamp(0.28rem, 1.6vw, 0.5rem);
  }
  body.is-mobile.is-immersive .mobile-dpad-gb-wrap {
    width: clamp(4.5rem, 12.5vw, 5.4rem);
    padding-top: clamp(1.35rem, 3.8vw, 1.65rem);
  }
  body.is-mobile.is-immersive .mobile-actions--diamond {
    width: clamp(3.85rem, 14vw, 4.85rem);
    height: clamp(3.85rem, 14vw, 4.85rem);
  }
}

@media (max-width: 680px) and (orientation: landscape) {
  body.is-mobile.is-immersive .mobile-hud-dollars-pill {
    min-width: 4rem;
    padding: 0.07rem 0.32rem;
  }
}

body.is-mobile.is-immersive .arcade-crt-filter::before {
  animation: none;
  opacity: 0.38;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(15, 56, 15, 0.42) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(15, 56, 15, 0) 0px,
      rgba(15, 56, 15, 0) 2px,
      rgba(15, 56, 15, 0.14) 2px,
      rgba(15, 56, 15, 0.14) 3px
    );
}
body.is-mobile.is-immersive .arcade-crt-glass #game-canvas {
  filter: saturate(0.98) contrast(1.06) brightness(1.02);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
body.is-mobile.is-immersive .arcade-crt-glass::after {
  opacity: 0.38;
  mix-blend-mode: soft-light;
}
body.is-mobile.is-immersive .arcade-center {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #000;
}
body.is-mobile.is-immersive .arcade-screen-shell {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
body.is-mobile.is-immersive .arcade-crt-hood {
  display: none !important;
}
body.is-mobile.is-immersive .hood-label {
  font-size: 0.24rem;
}
body.is-mobile.is-immersive .arcade-deck {
  display: none !important;
}
body.is-mobile.is-immersive .plinth-brand {
  display: none;
}
body.is-mobile.is-immersive .hud-top {
  display: none !important;
}
body.is-mobile.is-immersive .arcade-crt-frame {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  background: #000;
  box-shadow: none;
}
body.is-mobile.is-immersive .arcade-viewport-slot {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  container-type: normal;
  border-radius: 0;
  background: #000;
  padding: 0;
}
body.is-mobile.is-immersive .arcade-crt-glass {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
body.is-mobile.is-immersive .arcade-crt-glass::before,
body.is-mobile.is-immersive .arcade-crt-glass::after {
  display: none;
}
.mobile-controls-deck {
  position: absolute;
  left: max(0.1rem, env(safe-area-inset-left));
  bottom: max(0.1rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: clamp(0.15rem, 1.2vw, 0.3rem);
  padding: 0.32rem 0.38rem 0.28rem;
  background: linear-gradient(180deg, var(--poke-red-dark) 0%, #3a0a0a 100%);
  border: 3px solid var(--arcade-cabinet-border);
  border-radius: 12px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
  max-width: min(68vw, 22rem);
  z-index: 28;
}
.mobile-controls-deck--retro {
  align-items: stretch;
  gap: clamp(0.22rem, 1.4vw, 0.38rem);
  padding: 0.42rem 0.48rem 0.46rem;
  background:
    linear-gradient(165deg, #ff5a3a 0%, var(--poke-red) 18%, var(--poke-red-dark) 52%, #5c1212 100%);
  border: 3px solid #2a0808;
  border-radius: 18px 18px 22px 22px;
  box-shadow:
    0 5px 0 #3a0a0a,
    0 10px 22px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -5px 14px rgba(0, 0, 0, 0.28);
  max-width: min(72vw, 24rem);
}
.mob-deck-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: clamp(0.22rem, 1.5vw, 0.28rem);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 0.1rem;
}
.mob-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58%;
  height: 58%;
  margin: 0 auto;
  line-height: 1;
  pointer-events: none;
}
.mob-glyph-interact {
  position: relative;
  color: #1a2840;
}
.mob-glyph-interact::before {
  content: '';
  display: block;
  width: 0.95em;
  height: 0.72em;
  margin: 0 auto;
  border: 2px solid currentColor;
  border-radius: 0.55em 0.55em 0.55em 0.12em;
  position: relative;
  top: 0.08em;
}
.mob-glyph-interact::after {
  content: '…';
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-size: 0.55em;
  letter-spacing: 0.06em;
  line-height: 1;
}
.mob-glyph-battle::before {
  content: '⚔';
  font-size: 1.05em;
}
.mob-glyph-dex {
  position: relative;
}
.mob-glyph-dex::before {
  content: '';
  display: block;
  width: 0.78em;
  height: 0.95em;
  margin: 0 auto;
  border-radius: 0.1em 0.14em 0.12em 0.1em;
  background: linear-gradient(135deg, #ff6b6b 0%, #cc0000 55%, #8b0000 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 rgba(0, 0, 0, 0.35);
  position: relative;
  top: 0.04em;
}
.mob-glyph-dex::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: 0.34em;
  height: 0.34em;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.mob-glyph-chat::before {
  content: '💬';
  font-size: 0.92em;
}
.mob-glyph-cam-l::before {
  content: '↶';
  font-size: 1.15em;
  font-weight: 700;
}
.mob-glyph-cam-r::before {
  content: '↷';
  font-size: 1.15em;
  font-weight: 700;
}
.vpad-shell--retro {
  padding: 0.32rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #1a1a1a 0%, #050505 78%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow:
    inset 0 5px 16px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.45);
}
.mobile-controls-deck--retro .vpad-zone {
  background: linear-gradient(165deg, #6b7280 0%, #404040 38%, #222 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 3px 0 #0c0c0c,
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 5px rgba(0, 0, 0, 0.4);
  overflow: visible;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
.mobile-controls-deck--retro .vpad-zone:active,
.mobile-controls-deck--retro .vpad-zone.active {
  background: linear-gradient(165deg, #ffe566 0%, #ffcb05 38%, #d4a017 100%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 14px rgba(255, 203, 5, 0.55),
    0 1px 0 #8b6914,
    inset 0 2px 6px rgba(255, 255, 255, 0.35);
}
.mobile-controls-deck--retro .vpad-zone.active.vpad-up { transform: translateX(-50%) translateY(2px); }
.mobile-controls-deck--retro .vpad-zone.active.vpad-down { transform: translateX(-50%) translateY(-2px); }
.mobile-controls-deck--retro .vpad-zone.active.vpad-left { transform: translateY(-50%) translateX(2px); }
.mobile-controls-deck--retro .vpad-zone.active.vpad-right { transform: translateY(-50%) translateX(-2px); }
.mobile-controls-deck--retro .vpad-center {
  background:
    radial-gradient(circle at 35% 30%, #fff 0%, #fff 44%, #ef4444 44%, #ef4444 100%);
  border: 2px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.45);
  width: 34%;
  height: 34%;
}
.mobile-controls-deck--retro .vpad-up::after,
.mobile-controls-deck--retro .vpad-down::after,
.mobile-controls-deck--retro .vpad-left::after,
.mobile-controls-deck--retro .vpad-right::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  opacity: 0.88;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
.mobile-controls-deck--retro .vpad-zone.active::after {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.65));
}
.mobile-controls-deck--retro .vpad-up::after {
  top: 28%;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #f8fafc;
}
.mobile-controls-deck--retro .vpad-down::after {
  bottom: 28%;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #f8fafc;
}
.mobile-controls-deck--retro .vpad-left::after {
  left: 30%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 9px solid #f8fafc;
}
.mobile-controls-deck--retro .vpad-right::after {
  right: 30%;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #f8fafc;
}

body.is-mobile.is-immersive #mobile-controls {
  display: flex !important;
  visibility: visible !important;
  align-items: flex-end;
  justify-content: stretch;
  background: transparent !important;
  padding:
    0
    max(0, env(safe-area-inset-right))
    max(0, env(safe-area-inset-bottom))
    max(0, env(safe-area-inset-left));
}
body.is-mobile.is-immersive .mobile-controls-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: clamp(0.06rem, 1vw, 0.2rem);
  pointer-events: none;
  transform: none;
}
body.is-mobile.is-immersive .mobile-controls-left,
body.is-mobile.is-immersive .mobile-controls-right {
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
body.is-mobile.is-immersive .mobile-controls-left {
  align-items: flex-start;
  flex: 0 1 auto;
  min-width: 0;
}
body.is-mobile.is-immersive .mobile-controls-right {
  align-items: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}
body.is-mobile.is-immersive .mobile-controls-layout,
body.is-mobile.is-immersive .mobile-controls-left,
body.is-mobile.is-immersive .mobile-controls-right,
body.is-mobile.is-immersive .mobile-move-stack,
body.is-mobile.is-immersive .mobile-dpad,
body.is-mobile.is-immersive .virtual-dpad,
body.is-mobile.is-immersive .mobile-cam--inline {
  background: transparent !important;
  box-shadow: none !important;
}
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-zone {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.24) 0%, transparent 44%),
    linear-gradient(165deg, #a1a9b8 0%, #52525b 44%, #27272a 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 11px;
  box-shadow:
    0 3px 0 rgba(10, 10, 10, 0.94),
    0 6px 16px rgba(0, 0, 0, 0.34),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 7px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease, filter 0.08s ease;
}
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-up,
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-down {
  border-radius: 10px 10px 8px 8px;
}
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-left,
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-right {
  border-radius: 10px;
}
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-center {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 44%),
    radial-gradient(circle at 38% 32%, #fff8d6 0%, var(--mob-gold) 50%, #c9a012 100%) !important;
  border: 2px solid #7a5a0c !important;
  box-shadow:
    0 2px 0 rgba(74, 56, 8, 0.88),
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 6px rgba(0, 0, 0, 0.16) !important;
}
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-zone:active,
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-zone.active {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.42) 0%, transparent 44%),
    linear-gradient(165deg, #ffe566 0%, var(--mob-gold) 42%, #c9a012 100%);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 0 16px rgba(255, 203, 5, 0.5),
    0 1px 0 rgba(122, 90, 12, 0.9),
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 5px rgba(0, 0, 0, 0.18);
  filter: drop-shadow(0 2px 6px rgba(255, 203, 5, 0.28));
}
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-zone.active.vpad-up { transform: translateX(-50%) translateY(2px); }
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-zone.active.vpad-down { transform: translateX(-50%) translateY(-2px); }
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-zone.active.vpad-left { transform: translateY(-50%) translateX(2px); }
body.is-mobile.is-immersive .mobile-controls-deck--retro .vpad-zone.active.vpad-right { transform: translateY(-50%) translateX(-2px); }
body.is-mobile.is-immersive .mobile-controls-deck .mob-btn {
  border-width: 2px;
  box-shadow:
    0 3px 0 rgba(74, 56, 8, 0.88),
    0 6px 14px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12);
}
body.is-mobile.is-immersive .mobile-controls-deck,
body.is-mobile.is-immersive .mobile-controls-deck--retro,
body.is-mobile.is-immersive #mobile-controls .mobile-controls-deck,
body.is-mobile.is-immersive #mobile-controls .mobile-controls-deck--retro {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  outline: none !important;
}
body.is-mobile.is-immersive .mobile-controls-deck--move,
body.is-mobile.is-immersive .mobile-controls-deck--actions,
body.is-mobile.is-immersive #mobile-controls .mobile-controls-deck--move,
body.is-mobile.is-immersive #mobile-controls .mobile-controls-deck--actions {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.is-mobile.is-immersive .mob-deck-label {
  display: none;
}
body.is-mobile.is-immersive .mobile-controls-deck .vpad-shell--retro,
body.is-mobile.is-immersive #mobile-controls .vpad-shell--retro {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.is-mobile.is-immersive .mobile-controls-left,
body.is-mobile.is-immersive .mobile-controls-right {
  background: transparent !important;
}
body.is-mobile.is-immersive .mobile-controls-deck {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: none;
  pointer-events: auto;
}
body.is-mobile.is-immersive .mobile-controls-deck--move {
  display: none !important;
}
body.is-mobile.is-immersive .mobile-cam-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.28rem 0.32rem 0.32rem;
  min-width: 0;
  max-width: none;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.mobile-cam-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 2vw, 0.65rem);
  pointer-events: auto;
}
body.is-mobile.is-immersive .mobile-cam-row .mob-btn {
  position: relative;
  width: clamp(1.85rem, 5.4vw, 2.2rem);
  height: clamp(1.85rem, 5.4vw, 2.2rem);
}
.mobile-dpad-gb-wrap {
  position: relative;
  width: clamp(5.2rem, 14.5vw, 6.35rem);
  padding-top: clamp(1.55rem, 4.6vw, 1.95rem);
}
body.is-mobile.is-immersive .mobile-dpad-gb-wrap,
body.is-mobile.is-immersive .mobile-dpad-cross,
body.is-mobile.is-immersive .dpad--mobile-gb {
  display: none !important;
}
body.is-mobile.is-immersive .mobile-dpad-gb-wrap .vpad-cam-above-left {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  top: auto;
  left: auto;
  justify-self: end;
}
body.is-mobile.is-immersive .mobile-dpad-gb-wrap .vpad-cam-above-right {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  top: auto;
  right: auto;
  justify-self: start;
}
body.is-mobile.is-immersive .mobile-dpad-gb-wrap .mobile-dpad-cross {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}
.mobile-dpad-cross {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.42));
}
.dpad--mobile-gb {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.dpad--mobile-gb .dpad-up,
.dpad--mobile-gb .dpad-down {
  width: 34%;
  height: 38%;
  border-radius: 8px 8px 4px 4px;
}
.dpad--mobile-gb .dpad-left,
.dpad--mobile-gb .dpad-right {
  width: 38%;
  height: 34%;
  border-radius: 8px;
}
.dpad--mobile-gb .dpad-center {
  width: 36%;
  height: 36%;
  border-radius: 6px;
}
.vpad-cam-above-left,
.vpad-cam-above-right {
  position: absolute;
  top: 0;
  z-index: 4;
  width: clamp(1.55rem, 4.4vw, 1.85rem);
  height: clamp(1.55rem, 4.4vw, 1.85rem);
  padding: 0;
  border-radius: 50%;
  touch-action: none;
}
.vpad-cam-above-left {
  left: 0;
}
.vpad-cam-above-right {
  right: 0;
}
.mobile-move-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16rem;
  width: 100%;
}
.mobile-cam--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 1.2vw, 0.36rem);
  width: 100%;
}
body.is-mobile.is-immersive .mobile-controls-deck--actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  min-width: 0;
  max-width: clamp(4.35rem, 14.5vw, 5.35rem);
}
body.is-mobile.is-immersive .mob-deck-label--actions {
  margin-bottom: 0.1rem;
}
.mobile-actions--diamond {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(0.1rem, 0.75vw, 0.18rem);
  width: clamp(5.35rem, 17vw, 6.45rem);
  height: clamp(5.35rem, 17vw, 6.45rem);
  align-items: center;
  justify-items: center;
}
body.is-mobile.is-immersive .mobile-actions--diamond {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: clamp(4.1rem, 13.5vw, 5.15rem);
  height: clamp(4.1rem, 13.5vw, 5.15rem);
  margin-bottom: 0.06rem;
}
body.is-mobile.is-immersive .mobile-actions--diamond .mob-pos-n { grid-column: 2; grid-row: 1; }
body.is-mobile.is-immersive .mobile-actions--diamond .mob-pos-w { grid-column: 1; grid-row: 2; }
body.is-mobile.is-immersive .mobile-actions--diamond .mob-pos-e { grid-column: 2; grid-row: 2; }
body.is-mobile.is-immersive .mobile-actions--diamond .mob-pos-s { display: none !important; }
.mobile-actions--diamond .mob-pos-n { grid-column: 2; grid-row: 1; }
.mobile-actions--diamond .mob-pos-w { grid-column: 1; grid-row: 2; }
.mobile-actions--diamond .mob-pos-e { grid-column: 3; grid-row: 2; }
.mobile-actions--diamond .mob-pos-s { grid-column: 2; grid-row: 3; }
body.is-mobile.is-immersive .mobile-controls-deck .mobile-dpad-cross,
body.is-mobile.is-immersive .mobile-controls-deck .dpad--mobile-gb {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
body.is-mobile.is-immersive .mobile-controls-deck .mob-btn {
  position: relative;
  width: clamp(1.85rem, 5.4vw, 2.2rem);
  height: clamp(1.85rem, 5.4vw, 2.2rem);
  font-size: clamp(0.85rem, 2.8vw, 1rem);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #2a1810;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
    radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 38% 32%, #fff8d6 0%, #f0d050 38%, #c9a012 100%);
  border: 2px solid #7a5a0c;
  box-shadow:
    0 3px 0 rgba(74, 56, 8, 0.85),
    0 5px 12px rgba(0, 0, 0, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.52),
    inset 0 -3px 6px rgba(0, 0, 0, 0.14);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}
body.is-mobile.is-immersive .mobile-controls-deck .mob-btn:active,
body.is-mobile.is-immersive .mobile-controls-deck .mob-btn.active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(74, 56, 8, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.26),
    inset 0 3px 7px rgba(0, 0, 0, 0.22);
  filter: none;
}
body.is-mobile.is-immersive .vpad-cam-above-left,
body.is-mobile.is-immersive .vpad-cam-above-right {
  color: #e8f4ff;
  font-size: clamp(0.72rem, 2.2vw, 0.86rem);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 38% 30%, #666 0%, #333 52%, #1a1a1a 100%);
  border: 2px solid #111;
  box-shadow:
    0 3px 0 rgba(10, 10, 10, 0.9),
    0 5px 11px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 6px rgba(0, 0, 0, 0.14);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
}
body.is-mobile.is-immersive .vpad-cam-above-left:active,
body.is-mobile.is-immersive .vpad-cam-above-right:active,
body.is-mobile.is-immersive .vpad-cam-above-left.active,
body.is-mobile.is-immersive .vpad-cam-above-right.active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.45) 0%, rgba(8, 14, 24, 0.95) 100%);
  border-color: #7cf0ff;
}
body.is-mobile.is-immersive .dpad--mobile-gb .dpad-btn {
  border-radius: 8px;
}
body.is-mobile.is-immersive .mobile-actions--diamond .mob-battle {
  width: clamp(2.35rem, 6.8vw, 2.85rem);
  height: clamp(2.35rem, 6.8vw, 2.85rem);
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 38% 32%, #ff9a85 0%, #e3350d 45%, #9b1c1c 100%);
  border-color: #6b0f0f;
  box-shadow:
    0 3px 0 rgba(74, 8, 8, 0.88),
    0 5px 10px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -3px 7px rgba(0, 0, 0, 0.18);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
}
body.is-mobile.is-immersive .mobile-actions--diamond .mob-battle:active,
body.is-mobile.is-immersive .mobile-actions--diamond .mob-battle.active {
  box-shadow:
    0 1px 0 rgba(74, 8, 8, 0.75),
    0 2px 7px rgba(0, 0, 0, 0.24),
    inset 0 3px 9px rgba(0, 0, 0, 0.28);
  filter: none;
}
body.is-mobile.is-immersive .mobile-controls-deck .mob-battle .mob-glyph-battle::before {
  font-size: 1.2em;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}
body.is-mobile.is-immersive .mobile-controls-deck .mob-interact {
  color: #1a2840;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45) 0%, transparent 42%),
    radial-gradient(circle at 38% 30%, #d4ecff 0%, #7eb8e8 42%, #4a90c4 100%);
  border-color: #2a6088;
  box-shadow:
    0 3px 0 rgba(26, 64, 96, 0.85),
    0 5px 11px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}
body.is-mobile.is-immersive .mobile-controls-deck .mob-dex {
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 42%),
    radial-gradient(circle at 38% 30%, #ff7a7a 0%, #cc0000 50%, #8b0000 100%);
  border-color: #5c0000;
  box-shadow:
    0 3px 0 rgba(58, 0, 0, 0.85),
    0 5px 11px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 6px rgba(0, 0, 0, 0.14);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
}
body.is-mobile.is-immersive .mobile-controls-deck .mob-chat {
  color: #1a3320;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45) 0%, transparent 42%),
    radial-gradient(circle at 38% 30%, #d8ffd8 0%, #7dd87d 42%, #4caf50 100%);
  border-color: #2e7d32;
  box-shadow:
    0 3px 0 rgba(27, 94, 32, 0.85),
    0 5px 11px rgba(0, 0, 0, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}
body.is-mobile.is-immersive .mobile-controls-deck .mob-cam-left,
body.is-mobile.is-immersive .mobile-controls-deck .mob-cam-right {
  color: #eee;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 38% 30%, #666 0%, #333 52%, #1a1a1a 100%);
  border-color: #111;
  box-shadow:
    0 3px 0 rgba(10, 10, 10, 0.9),
    0 5px 11px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 6px rgba(0, 0, 0, 0.14);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
}
body.is-mobile.is-immersive #dialog-box,
body.is-mobile.is-immersive .poke-dialog {
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem));
  left: 0;
  right: 0;
  width: 100%;
  z-index: 80;
}
body.is-mobile.is-immersive .poke-dialog .dialog-inner {
  margin: 0 0.45rem 0.35rem;
  padding: 0.55rem 0.65rem 0.45rem;
}
body.is-mobile.is-immersive #dialog-text,
body.is-mobile.is-immersive .dialog-body {
  font-size: 0.42rem;
}
body.is-mobile.is-immersive .mobile-hud-chat {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(4.5rem, 22vw, 7.5rem);
  width: clamp(4.5rem, 22vw, 7.5rem);
  max-width: clamp(4.5rem, 22vw, 7.5rem);
  min-width: 0;
  min-height: 0;
  max-height: min(42vh, calc(var(--app-height, 100dvh) - 7.5rem));
  align-self: flex-start;
  pointer-events: auto;
  overflow: hidden;
}
body.is-mobile.is-immersive .mobile-hud-chat .global-chat {
  flex: 1;
  min-height: 0;
  padding: 0.28rem 0.3rem 0.32rem;
  gap: 0.2rem;
  font-size: 0.9em;
}
body.is-mobile.is-immersive .mobile-hud-chat .chat-header {
  font-size: clamp(8px, 1.5vw, 10px);
}
body.is-mobile.is-immersive .mobile-hud-chat .chat-messages {
  font-size: clamp(10px, 1.75vw, 12px);
  line-height: 1.35;
  min-height: 0;
  max-height: calc(3 * 1.35 * 12px + 0.35rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.is-mobile.is-immersive .mobile-hud-chat .chat-form input {
  font-size: clamp(10px, 1.8vw, 12px);
  padding: 0.28rem 0.35rem;
}
body.is-mobile.is-immersive .mobile-hud-chat .chat-send-btn {
  display: none;
}
body.is-mobile.is-immersive .mobile-hud-chat > * {
  pointer-events: auto;
}

body.is-mobile.is-immersive .mobile-controls-deck .mob-chat {
  display: none !important;
}

body.is-mobile.is-immersive .global-chat:not(.chat-open) {
  display: none !important;
}
body.is-mobile.is-immersive .mobile-hud-chat .global-chat:not(.chat-open) {
  display: flex !important;
}
body.is-mobile.is-immersive .arcade-left .global-chat,
body.is-mobile.is-immersive .mobile-hud-chat .global-chat {
  display: flex !important;
}
body.is-mobile.is-immersive .global-chat.chat-open {
  display: block !important;
  position: fixed;
  z-index: 95;
  left: max(0.35rem, env(safe-area-inset-left));
  right: max(0.35rem, env(safe-area-inset-right));
  bottom: max(7rem, calc(env(safe-area-inset-bottom) + 6.4rem));
  top: auto;
  max-width: none;
  opacity: 1;
  pointer-events: auto;
}
body.is-mobile.is-immersive .global-chat.chat-open .chat-messages {
  max-height: min(28vh, 6rem);
}

body.is-mobile.is-immersive.in-battle #mobile-controls {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.dex-panel-open #mobile-controls {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-mobile.in-battle .battle-party-strip {
  flex-direction: row;
  top: auto; left: 50%; right: auto; bottom: calc(31vh + 0.35rem);
  transform: translateX(-50%);
  gap: 0.2rem; padding: 0.15rem 0.25rem;
  background: rgba(8, 12, 20, 0.72); border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
}
body.is-mobile.in-battle .battle-party-strip::before { display: none; }
body.is-mobile.in-battle .battle-strip-slot { width: 36px; height: 36px; padding: 0.15rem; }

body.is-mobile.in-battle .enemy-sprite {
  width: min(118px, 19vw); height: min(118px, 24vh);
}
body.is-mobile.in-battle .player-sprite {
  width: min(128px, 21vw); height: min(128px, 26vh);
}
body.is-mobile.in-battle .enemy-trainer-sprite {
  width: min(48px, 10vw);
  bottom: 4%;
  right: -2%;
}
body.is-mobile.in-battle .arena-enemy {
  top: 8%; right: 12%; width: min(130px, 26vw);
}
body.is-mobile.in-battle .arena-player {
  bottom: 42%; left: 10%; width: min(140px, 28vw);
}
body.is-mobile.in-battle .enemy-platform { top: 34%; width: 28%; height: 7%; right: 18%; }
body.is-mobile.in-battle .player-platform { bottom: 44%; width: 30%; height: 8%; left: 14%; }
body.is-mobile.in-battle .arena-ring { bottom: 34%; width: min(260px, 68vw); height: 11%; }
body.is-mobile.in-battle .switch-menu-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem; }
body.is-mobile.in-battle .battle-ui-panel {
  max-height: min(42vh, 15.5rem);
  padding: 0.4rem 0.5rem;
  bottom: max(0.35rem, env(safe-area-inset-bottom));
  width: min(98vw, 480px);
  z-index: 72;
  overflow: hidden;
}
body.is-mobile.in-battle .battle-ui-panel.moves-active {
  max-height: min(46vh, 16.5rem);
  padding-bottom: 0.45rem;
}
body.is-mobile.in-battle .battle-log {
  font-size: 0.62rem;
  min-height: 1.5rem;
  max-height: 2.4rem;
  padding: 0.3rem 0.4rem;
  margin-bottom: 0.35rem;
}
body.is-mobile.in-battle .kintara-btn { font-size: 0.28rem; padding: 0.38rem 0.42rem; }
body.is-mobile.in-battle .move-menu {
  gap: 0.22rem;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}
body.is-mobile.in-battle .move-btn {
  font-size: 0.28rem;
  min-height: 0;
  padding: 0.32rem 0.3rem !important;
}
body.is-mobile.in-battle .move-name { font-size: 0.46rem; line-height: 1.2; }
body.is-mobile.in-battle .move-meta { font-size: 0.38rem; padding: 0.06rem 0.22rem; }
body.is-mobile.in-battle .back-move {
  padding: 0.32rem 0.4rem !important;
  min-height: 0;
}

body.is-portrait .arcade-room { visibility: hidden; }
body.is-portrait #mobile-controls { visibility: hidden; }
body.is-portrait .rotate-prompt { z-index: 300; }

@media (max-width: 900px) and (orientation: landscape) {
  .battle-party-strip { left: 0.35rem; gap: 0.25rem; }
  .battle-strip-slot { width: 44px; height: 44px; }
  .battle-ui-panel { padding: 0.55rem; max-height: min(38vh, 15rem); }
  .battle-ui-panel.moves-active { max-height: min(44vh, 17rem); }
  .battle-ui-panel.moves-active .battle-log { display: none; }
  .move-btn { min-height: 0; padding: 0.38rem 0.35rem !important; }
  .battle-log { font-size: 0.72rem; min-height: 2rem; padding: 0.4rem 0.5rem; }
  .kintara-btn { font-size: 0.32rem; padding: 0.45rem; }
  .enemy-sprite { width: min(130px, 20vw); height: min(130px, 26vh); }
  .player-sprite { width: min(140px, 22vw); height: min(140px, 28vh); }
  .arena-enemy { top: 8%; right: 12%; width: min(140px, 26vw); }
  .arena-player { bottom: 40%; left: 10%; width: min(150px, 28vw); }
  .switch-menu-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Desktop Pokédex cabinet branding (901px+) ── */
@keyframes cabinetGlowPulse {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.62; }
}

@media (min-width: 901px) {
  .arcade-marquee {
    background:
      linear-gradient(180deg, var(--poke-red-light) 0%, var(--poke-red) 32%, var(--poke-red-dark) 100%),
      repeating-linear-gradient(
        90deg,
        transparent 0 24px,
        rgba(0,0,0,0.04) 24px 26px
      );
  }
  .arcade-marquee::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(
      90deg,
      var(--poke-red) 0%,
      var(--poke-yellow) 20%,
      var(--poke-blue) 40%,
      var(--poke-yellow) 60%,
      var(--poke-red) 80%,
      var(--poke-yellow) 100%
    );
    opacity: 0.55;
    z-index: 1;
  }
  .marquee-starter {
    animation: starterBob 3.5s ease-in-out infinite;
  }
  .marquee-starter--4 { animation-delay: 0.4s; }
  .marquee-starter--7 { animation-delay: 0.8s; }
  @keyframes starterBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  .arcade-left::before,
  .arcade-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.75;
  }
  .arcade-left::before {
    left: 0;
    background: linear-gradient(
      180deg,
      var(--poke-red) 0%,
      var(--poke-yellow) 25%,
      var(--poke-blue) 50%,
      var(--poke-yellow) 75%,
      var(--poke-red) 100%
    );
  }
  .arcade-right::after {
    right: 0;
    background: linear-gradient(
      180deg,
      var(--poke-blue) 0%,
      var(--poke-yellow) 25%,
      var(--poke-red) 50%,
      var(--poke-yellow) 75%,
      var(--poke-blue) 100%
    );
  }
  .arcade-side-art-left {
    opacity: 0.42;
    background:
      url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png') no-repeat 50% 18% / 72% auto,
      radial-gradient(circle at 22% 78%, rgba(255,203,5,0.12) 0%, transparent 22%),
      radial-gradient(circle at 78% 42%, rgba(59,76,202,0.1) 0%, transparent 20%),
      repeating-linear-gradient(-12deg, transparent 0 18px, rgba(0,0,0,0.07) 18px 20px);
    filter: saturate(0.85) brightness(0.72);
  }
  .arcade-side-art-right {
    opacity: 0.42;
    background:
      url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/6.png') no-repeat 50% 22% / 68% auto,
      radial-gradient(circle at 78% 72%, rgba(227,53,13,0.12) 0%, transparent 22%),
      radial-gradient(circle at 24% 38%, rgba(139,195,74,0.1) 0%, transparent 20%),
      repeating-linear-gradient(12deg, transparent 0 18px, rgba(0,0,0,0.07) 18px 20px);
    filter: saturate(0.85) brightness(0.72);
  }
  .arcade-cabinet {
    background:
      linear-gradient(90deg, var(--poke-red-dark) 0%, var(--poke-red) 22%, #c62828 50%, var(--poke-red) 78%, var(--poke-red-dark) 100%);
  }
  .arcade-deck {
    background:
      linear-gradient(180deg, var(--poke-red) 0%, var(--poke-red-dark) 50%, #3a0808 100%);
    border-color: rgba(0,0,0,0.5);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.16),
      inset 0 -8px 18px rgba(0,0,0,0.45),
      0 8px 14px rgba(0,0,0,0.4);
  }
  .dex-lid-badge {
    box-shadow:
      0 3px 10px rgba(0,0,0,0.5),
      0 0 16px rgba(255,203,5,0.2);
  }

  /* Right panel — map bezel + arcade action buttons */
  .arcade-left > .kintara-panel,
  .arcade-right > .kintara-panel,
  .arcade-left .arcade-score-box,
  .arcade-right .arcade-score-box {
    box-shadow:
      0 5px 14px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    border-radius: 8px;
  }

  .map2d-panel {
    padding: 0.55rem 0.5rem 0.45rem;
    border: 2px solid transparent;
    background:
      linear-gradient(rgba(8, 12, 20, 0.96), rgba(4, 8, 14, 0.98)) padding-box,
      linear-gradient(135deg, var(--poke-red), var(--poke-yellow) 42%, var(--poke-blue)) border-box;
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-radius: 10px;
  }
  .map2d-panel::before {
    content: '';
    position: absolute;
    top: 0.42rem;
    left: 0.42rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #ddd 42%, #999 100%);
    border: 2px solid #222;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 1;
  }
  .map2d-head { margin-bottom: 0.38rem; }
  .map2d-title {
    color: var(--poke-yellow);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  }
  .map2d-canvas-wrap {
    padding: 5px;
    background: linear-gradient(180deg, #3a3a3a 0%, #141414 55%, #080808 100%);
    border-radius: 8px;
    box-shadow:
      inset 0 2px 10px rgba(0, 0, 0, 0.65),
      0 2px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.55);
  }
  #minimap {
    border-radius: 4px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    box-shadow: inset 0 0 0 1px rgba(255, 203, 5, 0.12);
  }
  .map2d-region {
    margin-top: 0.42rem;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
  .map2d-expand {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255, 203, 5, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  .dex-controls {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.62rem 0.45rem 0.48rem;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.28) 100%);
    border: 2px solid rgba(0, 0, 0, 0.48);
    border-radius: 14px;
    box-shadow:
      0 7px 16px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .dex-controls::before {
    content: 'ACTION';
    display: block;
    font-family: var(--font-pixel);
    font-size: 0.22rem;
    letter-spacing: 0.18em;
    color: rgba(255, 203, 5, 0.55);
    text-align: center;
    margin-bottom: 0.28rem;
  }
  .dex-btn-row {
    gap: 0.85rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, #222 0%, #0c0c0c 100%);
    border: 3px solid #1a1a1a;
    border-radius: 999px;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.07),
      0 4px 12px rgba(0, 0, 0, 0.45);
  }
  .dex-btn-label {
    font-size: 0.26rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.12rem;
  }
  .dex-btn {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(0, 0, 0, 0.65);
    box-shadow:
      0 6px 0 #050505,
      0 10px 16px rgba(0, 0, 0, 0.5),
      inset 0 3px 7px rgba(255, 255, 255, 0.2),
      inset 0 -5px 9px rgba(0, 0, 0, 0.35);
    font-size: 0.38rem;
  }
  .dex-btn .mob-glyph {
    width: 54%;
    height: 54%;
  }
  .dex-btn-main .mob-glyph {
    width: 50%;
    height: 50%;
  }
  .dex-btn-main .mob-glyph-battle::before {
    font-size: 1.35em;
  }
  #dex-btn-e .mob-glyph-interact::before {
    border-color: rgba(255, 255, 255, 0.92);
  }
  #dex-btn-e .mob-glyph-interact::after {
    color: rgba(255, 255, 255, 0.95);
  }
  .dex-btn:active {
    transform: translateY(5px);
    box-shadow:
      0 1px 0 #050505,
      0 3px 8px rgba(0, 0, 0, 0.4),
      inset 0 3px 8px rgba(0, 0, 0, 0.45);
  }
  .dex-btn-main {
    width: 58px;
    height: 58px;
    font-size: 0.54rem;
    color: var(--poke-yellow);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
    background: radial-gradient(circle at 32% 24%, #ff5a36 0%, var(--poke-red) 42%, var(--poke-red-dark) 88%);
    border-color: #4a0a0a;
    box-shadow:
      0 7px 0 #3a0808,
      0 12px 20px rgba(227, 53, 13, 0.25),
      inset 0 3px 8px rgba(255, 255, 255, 0.22),
      inset 0 -5px 10px rgba(0, 0, 0, 0.35);
  }
  .dex-btn-main:active { transform: translateY(6px); }
  #dex-btn-p {
    background: radial-gradient(circle at 32% 24%, #6b7ef0 0%, var(--poke-blue) 48%, #1e2878 90%);
    color: #fff;
  }
  #dex-btn-e {
    background: radial-gradient(circle at 32% 24%, #4ade80 0%, #22c55e 48%, #15803d 90%);
    color: #fff;
  }
  .dex-btn-label {
    font-size: 0.24rem;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.08em;
  }

  .arcade-left .dex-dpad--cabinet {
    padding: 0.55rem 0.5rem 0.62rem;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.32) 100%);
    border: 2px solid rgba(0, 0, 0, 0.45);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
  }
  .arcade-pika-deco {
    opacity: 0.92;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  }
  .arcade-right .arcade-pika-right {
    width: 96px;
    height: 96px;
  }

  #map2d-large {
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px rgba(255, 203, 5, 0.15);
  }
  .map2d-modal-card {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  }
}

/* Mobile — leaderboard modal + close buttons */
body.is-mobile .map2d-expand {
  width: clamp(2rem, 6.5vw, 2.35rem);
  height: clamp(2rem, 6.5vw, 2.35rem);
  min-width: 2rem;
  min-height: 2rem;
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.is-mobile .leaderboard-panel {
  padding: max(0.45rem, env(safe-area-inset-top)) max(0.45rem, env(safe-area-inset-right)) max(0.45rem, env(safe-area-inset-bottom)) max(0.45rem, env(safe-area-inset-left));
  align-items: flex-start;
}
body.is-mobile .leaderboard-card {
  width: min(520px, 100%);
  max-height: min(88vh, calc(var(--app-height, 100dvh) - 0.9rem));
  padding: 0.65rem 0.55rem;
  overflow: hidden;
}
body.is-mobile .leaderboard-list {
  max-height: min(62vh, calc(var(--app-height, 100dvh) - 7rem));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.is-mobile .lb-table { min-width: 0; overflow: hidden; }
body.is-mobile .lb-row {
  grid-template-columns: 1.25rem minmax(0, 1fr) 2rem 2rem 2.4rem;
  gap: 0.2rem;
  padding: 0.28rem 0.32rem;
  font-size: 0.62rem;
}
body.is-mobile .lb-name .lb-trainer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
body.is-mobile.is-immersive .leaderboard-panel { z-index: 90; }
body.is-mobile.is-immersive .leaderboard-card { max-height: min(92vh, calc(var(--app-height, 100dvh) - 0.5rem)); }
body.is-mobile.is-immersive .leaderboard-list { max-height: min(68vh, calc(var(--app-height, 100dvh) - 5.5rem)); }
@media (max-height: 420px) and (orientation: landscape) {
  body.is-mobile .lb-row {
    grid-template-columns: 1.1rem minmax(0, 1fr) 1.75rem 1.75rem 2.1rem;
    font-size: 0.58rem;
    padding: 0.22rem 0.28rem;
  }
  body.is-mobile .leaderboard-head h2 { font-size: 0.46rem; }
}

/* —— Tournament coliseum (2D bracket mode) —— */
body.coliseum-2d-mode #game-canvas {
  filter: contrast(1.05) saturate(1.02) brightness(0.98);
}
body.coliseum-2d-mode .arcade-crt-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.04) 0,
    rgba(0, 0, 0, 0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 2;
}
.tournament-panel {
  position: fixed;
  top: 50%;
  right: max(0.5rem, env(safe-area-inset-right));
  transform: translateY(-50%);
  z-index: 34;
  width: min(240px, 42vw);
  pointer-events: auto;
}
.tournament-panel.hidden { display: none; }
.tournament-card {
  padding: 0.65rem 0.7rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(78vh, 520px);
  overflow: hidden;
}
.tournament-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.tournament-head h2 {
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  color: #ff6b35;
  flex: 1;
  margin: 0;
}
.tournament-badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 107, 53, 0.2);
  border: 1px solid rgba(255, 107, 53, 0.55);
  color: #ffb38a;
}
.tournament-status {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  line-height: 1.35;
}
.coliseum-topdown {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 107, 53, 0.35);
  background: #120a04;
  image-rendering: pixelated;
}
.tournament-bracket {
  overflow-y: auto;
  max-height: min(36vh, 220px);
  font-size: 0.65rem;
}
.tournament-bracket-empty {
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0.35rem 0;
  font-size: 0.62rem;
}
.tournament-bracket-tree {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}
.tournament-round {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tournament-round-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--emerald);
  text-align: center;
}
.tournament-match {
  padding: 0.28rem 0.35rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.25;
  word-break: break-word;
}
.tournament-match.is-active {
  border-color: rgba(255, 107, 53, 0.75);
  background: rgba(255, 107, 53, 0.12);
  color: #ffd4c2;
}
.tournament-match.is-done { opacity: 0.55; }
.tournament-match.is-mine { border-color: rgba(255, 203, 5, 0.45); }
.tournament-match-sprite {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  vertical-align: -2px;
  margin-right: 2px;
}
.tournament-match-pair { white-space: nowrap; }
.tournament-fight-feed-wrap {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.55);
  max-height: 4.5rem;
  overflow-y: auto;
}
.tournament-fight-feed-wrap--side { max-height: 3.2rem; }
.tournament-fight-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tournament-fight-feed li strong { color: #ffb38a; }
.tournament-fight-feed-empty {
  margin: 0;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.4);
}
.tournament-roster-card.is-out {
  opacity: 0.38;
  filter: grayscale(0.6);
}
.tournament-toast {
  font-size: 0.68rem;
  color: var(--poke-yellow);
  text-align: center;
  margin: 0;
  padding: 0.25rem;
  border-radius: 4px;
  background: rgba(255, 203, 5, 0.1);
}
.tournament-toast.hidden { display: none; }
body.is-mobile.coliseum-2d-mode .tournament-panel {
  top: auto;
  bottom: max(0.35rem, env(safe-area-inset-bottom));
  right: 0.35rem;
  left: 0.35rem;
  transform: none;
  width: auto;
}
body.is-mobile.coliseum-2d-mode .tournament-bracket {
  max-height: 28vh;
}
body.is-mobile.in-battle .tournament-panel { display: none !important; }

.tournament-menu-panel {
  position: fixed; inset: 0; z-index: 38;
  background: rgba(7, 11, 20, 0.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  pointer-events: auto;
}
.tournament-menu-panel.hidden { display: none; }
.tournament-menu-card {
  width: min(640px, 96vw); max-height: 88vh;
  padding: 1rem 1.1rem; color: #fff;
  display: flex; flex-direction: column; gap: 0.65rem;
  overflow: hidden;
}
.tournament-menu-head {
  display: flex; align-items: center; gap: 0.75rem;
}
.tournament-menu-head h2 {
  font-family: var(--font-pixel); font-size: 0.52rem;
  color: #ff6b35; flex: 1; margin: 0;
}
.tournament-menu-status {
  font-size: 0.78rem; color: rgba(255,255,255,0.62); margin: 0;
}
.tournament-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.4rem;
  max-height: min(32vh, 240px);
  overflow-y: auto;
}
.tournament-roster-card {
  display: flex; gap: 0.45rem; align-items: center;
  padding: 0.35rem 0.45rem; border-radius: 6px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.68rem;
}
.tournament-roster-card.is-me {
  border-color: rgba(255,203,5,0.55);
  background: rgba(255,203,5,0.1);
}
.tournament-roster-card.is-bot strong::after {
  content: ' · BOT';
  font-size: 0.55rem; color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.tournament-roster-sprite {
  width: 36px; height: 36px; image-rendering: pixelated;
}
.tournament-roster-meta {
  display: flex; flex-direction: column; gap: 0.08rem; min-width: 0;
}
.tournament-roster-meta strong { font-size: 0.72rem; }
.tournament-roster-meta small { color: rgba(255,255,255,0.45); font-size: 0.58rem; }
.tournament-bracket--menu {
  max-height: min(28vh, 200px);
  overflow-y: auto;
}
.tournament-start-btn {
  align-self: center;
  font-family: var(--font-pixel);
  font-size: 0.42rem;
  padding: 0.55rem 1.2rem;
}
.tournament-start-btn.hidden { display: none; }

.game-legal-footer {
  position: absolute;
  bottom: 0.35rem;
  left: 0.5rem;
  right: 0.5rem;
  margin: 0;
  padding: 0 0.25rem;
  font-size: 0.48rem;
  line-height: 1.35;
  text-align: center;
  color: rgba(200, 210, 180, 0.42);
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 640px) {
  .game-legal-footer {
    font-size: 0.52rem;
    max-width: 42rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}