/* ---- Reset / base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-bg: #283848;
  --c-bg-2: #1a242e;
  --c-panel: #f8f8f0;
  --c-panel-dark: #303848;
  --c-text: #202028;
  --c-text-light: #f8f8f0;
  --c-accent: #d04848;
  --c-blue: #3870c0;
  --c-green: #58a058;
  --c-yellow: #f0c038;
  --c-shadow: #000000;
  --c-grass: #78c850;
  --c-grass-dark: #4a7838;
  --px: 4px;
}

html, body {
  min-height: 100%;
  overflow-x: hidden;
  background: #0b1118;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--c-text-light);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.6;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.hidden { display: none !important; }

/* ---- App layout ---- */
#app {
  max-width: 680px;
  margin: 10px auto;
  height: calc(100dvh - 20px);
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  position: relative;
  border: 3px solid #3a5068;
  box-shadow:
    0 0 0 1px #000,
    0 0 32px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--c-panel-dark);
  border-bottom: var(--px) solid var(--c-bg-2);
}

.topbar .title {
  font-size: 10px;
  color: var(--c-yellow);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.home-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(240,192,56,0.18);
  border: 2px solid rgba(240,192,56,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  padding: 0;
  cursor: pointer;
}
.home-btn img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  display: block;
}
.home-btn:hover { background: rgba(240,192,56,0.35); }
.home-btn:active { transform: scale(0.9); }

/* ---- Home confirm modal ---- */
.home-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.home-confirm-overlay.hidden { display: none; }
.home-confirm-box {
  background: #1a242e;
  border: 3px solid #f0c038;
  box-shadow: 0 0 40px rgba(240,192,56,0.25), 0 0 0 1px #000;
  width: 100%;
  max-width: 280px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
}
.home-confirm-icon {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  animation: float 2.4s ease-in-out infinite;
}
.home-confirm-title {
  font-size: 11px;
  color: #f0c038;
  letter-spacing: 2px;
  margin-top: 4px;
}
.home-confirm-sub {
  font-size: 7px;
  color: #a0b8c8;
  line-height: 2;
}
.home-confirm-btns {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}
.home-confirm-yes, .home-confirm-no {
  flex: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 12px 0;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
}
.home-confirm-yes { background: #d04848; color: #fff; }
.home-confirm-no  { background: #283848; color: #a0b8c8; border-color: #3a5068; }
.home-confirm-yes:active, .home-confirm-no:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

.topbar-right {
  display: flex;
  gap: 10px;
  font-size: 10px;
  align-items: center;
}

.topbar-yen {
  font-size: 10px;
}

.money-wrap {
  position: relative;
  cursor: default;
}
.money-wrap::after {
  content: attr(data-rate);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  background: #1a242e;
  border: 2px solid #3a5068;
  color: #58c858;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 6px 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.money-wrap:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.btn-reset {
  font-family: inherit;
  font-size: 7px;
  padding: 4px 8px;
  background: var(--c-accent);
  color: #fff;
  border: 2px solid #000;
  cursor: pointer;
  letter-spacing: 1px;
}
.btn-reset:hover { background: #b03838; }

.btn-reset-settings {
  display: block;
  width: calc(100% - 32px);
  margin: 24px 16px 8px;
  padding: 14px 0;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 2px;
  background: #2a1a1a;
  color: #c04040;
  border: 2px solid #c04040;
  cursor: pointer;
}
.btn-reset-settings:hover { background: #3a1a1a; }

/* ---- Milestone toast ---- */
.milestone-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: #1a2030;
  border: 3px solid var(--c-yellow);
  color: var(--c-text-light);
  padding: 10px 16px;
  font-size: 8px;
  line-height: 1.8;
  text-align: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  min-width: 200px;
}
.milestone-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.milestone-toast.out  { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.milestone-toast .mt-title {
  color: var(--c-yellow);
  font-size: 9px;
  margin-bottom: 4px;
}

/* ---- Milestones button ---- */
.btn-milestones {
  background: #1e2c40;
  color: var(--c-yellow);
  border: 2px solid var(--c-yellow);
  padding: 10px 18px;
  font-size: 9px;
  letter-spacing: 2px;
}
.btn-milestones:hover { background: #283848; }

/* ---- Origin button ---- */
.btn-origin {
  background: #1e2c40;
  color: #a050ff;
  border: 2px solid #a050ff;
  padding: 10px 18px;
  font-size: 9px;
  letter-spacing: 2px;
}
.btn-origin:hover { background: #28183e; }

/* ── Origin info modal ────────────────────────────────────────────────────── */
.dex-origin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.dex-origin-box {
  background: #0c0c1a;
  border: 1px solid rgba(160,80,255,0.4);
  border-radius: 6px;
  padding: 16px;
  width: 380px;
  max-width: 95vw;
  max-height: 80vh;
  overflow-y: auto;
  font-family: 'Press Start 2P', monospace;
}
.dex-origin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #c080ff;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.dex-origin-close {
  background: none;
  border: none;
  color: #c080ff;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.dex-origin-close:hover { color: #fff; }
.dex-origin-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dex-origin-name {
  font-size: 8px;
  letter-spacing: 0.08em;
}
.dex-origin-rate {
  font-size: 6px;
  color: rgba(255,255,255,0.35);
}
.dex-origin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.dex-origin-chip {
  font-size: 6px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  color: #aaa;
}
.origin-chip-pos   { background: rgba(60,200,80,0.18);  color: #60e080; }
.origin-chip-money { background: rgba(240,192,56,0.18); color: #f0c038; }

/* ---- Milestones modal ---- */
.ms-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.ms-modal-box {
  background: var(--c-panel-dark);
  border: 3px solid var(--c-yellow);
  width: min(90vw, 380px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 0 0 12px;
}
.ms-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 10px;
  color: var(--c-yellow);
  border-bottom: 2px solid var(--c-yellow);
  position: sticky;
  top: 0;
  background: var(--c-panel-dark);
}
.ms-close {
  background: none;
  border: none;
  color: var(--c-text-light);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.dex-ms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #1e2830;
  opacity: 0.4;
}
.dex-ms-row.claimed { opacity: 0.65; }
.dex-ms-row.unlocked, .dex-ms-row.claimed { opacity: 1; }
.dex-ms-check-info { display: flex; align-items: center; gap: 8px; flex: 1; }
.dex-ms-check {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
  color: var(--c-yellow);
}
.dex-ms-row.claimed .dex-ms-check { color: #58c058; }
.dex-ms-info { flex: 1; }
.dex-ms-count { font-size: 8px; color: var(--c-text-light); }
.dex-ms-row.claimed .dex-ms-count { text-decoration: line-through; color: #888; }
.dex-ms-rewards { font-size: 6px; color: #7090a0; margin-top: 3px; }
.dex-ms-prog { font-size: 7px; color: #a0a0a0; flex-shrink: 0; }
.dex-ms-claim-btn {
  background: var(--c-yellow);
  color: var(--c-bg-2);
  border: none;
  padding: 6px 10px;
  font-size: 7px;
  flex-shrink: 0;
  cursor: pointer;
}
.dex-ms-claim-btn:hover { background: #f8d848; }

/* ---- Reset confirm modal ---- */
.reset-modal-box { text-align: center; }
.reset-modal-body { padding: 24px 20px 20px; }
.reset-modal-warn { font-size: 28px; margin-bottom: 12px; }
.reset-modal-msg { font-size: 9px; color: var(--c-text-light); margin-bottom: 8px; }
.reset-modal-sub { font-size: 7px; color: #888; margin-bottom: 20px; }
.reset-modal-btns { display: flex; gap: 10px; justify-content: center; }
.reset-cancel {
  background: #303848;
  color: var(--c-text-light);
  border: 2px solid #505868;
  padding: 10px 18px;
  font-size: 8px;
}
.reset-cancel:hover { background: #404858; }
.reset-confirm {
  background: #8b2020;
  color: #fff;
  border: 2px solid #c03030;
  padding: 10px 18px;
  font-size: 8px;
}
.reset-confirm:hover { background: #b02828; }

/* ---- Dev toolbar ---- */
#dev-toolbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #1a0a2e;
  border-top: 2px solid #7030c0;
  z-index: 200;
}
.dev-label {
  font-size: 7px;
  color: #c070ff;
  letter-spacing: 1px;
  margin-right: 4px;
}
.dev-btn {
  font-family: inherit;
  font-size: 7px;
  padding: 4px 8px;
  background: #7030c0;
  color: #fff;
  border: 2px solid #000;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.dev-btn:hover { background: #9050e0; }

/* ---- Rarity table progress badge ---- */
.rarity-progress {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: var(--c-bg-2);
  color: var(--c-yellow);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 8px 12px;
  border: 2px solid #000;
  z-index: 50;
  letter-spacing: 1px;
}
.rarity-progress.done { background: var(--c-green); color: #fff; }

/* ---- Screen / panels ---- */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.panel {
  background: var(--c-panel);
  color: var(--c-text);
  border: var(--px) solid var(--c-bg-2);
  border-radius: 2px;
  padding: 10px;
  position: relative;
  box-shadow: 0 var(--px) 0 var(--c-bg-2);
}

/* ---- Idle scene ---- */
.idle-panel {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #06091a;
  flex: 0 0 auto;
  aspect-ratio: 622 / 366;
  max-height: min(40vh, 366px);
  min-height: 120px;
}

.idle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Glowing eyes overlay */
.cf-eyes-row {
  position: absolute;
  left: 0; right: 0;
  bottom: 88px;
  height: 8px;
  pointer-events: none;
  z-index: 4;
}
.cf-eye-pair {
  position: absolute;
  bottom: 0;
  display: flex;
  gap: 4px;
  animation: cf-blink var(--bd, 3s) step-end infinite;
  animation-delay: var(--bdelay, 0s);
}
.cf-eye-pair::before,
.cf-eye-pair::after {
  content: '';
  width: 3px; height: 3px;
  background: #e8e060;
  border-radius: 1px;
  box-shadow: 0 0 5px 2px rgba(240, 220, 60, 0.7);
}
@keyframes cf-blink {
  0%, 90%, 100% { opacity: 1; }
  93%, 97%      { opacity: 0; }
}

/* HUD overlay at top */
.cf-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  text-align: center;
  padding: 8px 16px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
}
.idle-text   { font-size: 8px; color: #f5d070; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.spawn-timer { font-size: 7px; color: #d8c080; margin-top: 3px; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.queue-info  { font-size: 7px; color: #e06060; margin-top: 2px; min-height: 10px; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

/* ---- Encounter panel ---- */
.encounter-panel { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-height: 0; overflow: hidden; }

.encounter-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 12px;
  background: linear-gradient(to bottom, #f0c860 0%, #d8a040 100%);
  border: var(--px) solid var(--c-bg-2);
  border-radius: 2px;
  flex: 1 1 0;
  min-height: 80px;
  overflow: hidden;
}

.sprite-wrap {
  width: 192px;
  height: 192px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  position: relative;
}


.wild-sprite {
  width: 154px;
  height: 154px;
  image-rendering: pixelated;
  animation: bob 1.2s steps(2) infinite;
  position: relative;
  top: 20px;
}
.wild-sprite.shiny {
  filter: drop-shadow(0 0 8px #ffe060) drop-shadow(0 0 16px #ffb030);
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.sprite-shadow {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  z-index: 0;
}
.wild-sprite { z-index: 1; }

.encounter-info {
  text-align: center;
  width: 100%;
}

.wild-label {
  font-size: 10px;
  margin-bottom: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dex-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dex-dot-caught { background: #58a058; box-shadow: 0 0 4px #58a058; }
.dex-dot-new    { background: #555; }
.wild-name-box {
  display: inline-block;
  background: var(--c-bg-2);
  color: var(--c-text-light);
  padding: 8px 12px;
  border: 3px solid #000;
  box-shadow: 0 3px 0 #000;
  letter-spacing: 1px;
}
.wild-name-box #wild-name { color: var(--c-yellow); }
.wild-level-badge {
  display: inline-block;
  background: var(--c-blue);
  color: #fff;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 9px;
  border: 2px solid #000;
}

.btn-dex-entry {
  display: block;
  width: 100%;
  flex-shrink: 0;
  background: var(--c-bg-2);
  color: #c8902a;
  border: 2px solid #c8902a;
  box-shadow: 0 0 0 1px #3a2208;
  font-family: inherit;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 6px 0;
  cursor: pointer;
  text-align: center;
}
.btn-dex-entry:active { background: #1a1208; }

.dex-entry-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.dex-entry-modal-inner {
  background: rgba(14, 10, 4, 0.97);
  border: 2px solid #c8902a;
  box-shadow: 0 0 0 1px #3a2208, inset 0 0 0 1px #5a3a10;
  padding: 14px 16px 10px;
  max-width: 300px;
  width: 88%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dex-entry-name {
  font-size: 11px;
  color: var(--c-yellow);
  text-align: center;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.dex-entry-modal-inner p {
  margin: 0;
  font-size: 10px;
  color: #f0e8cc;
  line-height: 1.8;
  font-family: inherit;
}
#dex-entry-close {
  align-self: center;
  background: var(--c-bg-2);
  color: #f0e8cc;
  border: 2px solid #555;
  font-family: inherit;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 5px 18px;
  cursor: pointer;
}
#dex-entry-close:active { background: #222; }

.wild-rarity-wrap { text-align: center; margin-top: 4px; }
.wild-rarity {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  font-size: 8px;
  background: var(--c-bg-2);
  color: var(--c-text-light);
  padding: 8px 14px;
  border: 3px solid #000;
  box-shadow: 0 3px 0 #000;
}
.rate-big {
  font-size: 11px;
  color: #8098a8;
  letter-spacing: 1px;
}
.rate-stars { font-size: 8px; color: #8098a8; }

/* Rarity tier colors for the encounter rate display */
.tier-common   .rate-big, .tier-common   .rate-stars { color: #8098a8; }
.tier-uncommon .rate-big, .tier-uncommon .rate-stars { color: #78c878; }
.tier-rare     .rate-big, .tier-rare     .rate-stars { color: #88a8f0; }
.tier-ultra    .rate-big, .tier-ultra    .rate-stars { color: #f0c038; }
.tier-legendary .rate-big,
.tier-legendary .rate-stars { animation: po-rainbow-text 2s linear infinite; }

.encounter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- Battle modal (1v1) ---- */
.battle-inner { max-width: 480px; }
.battle-title {
  font-size: 14px;
  text-align: center;
  color: var(--c-accent);
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.battle-arena {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  gap: 8px;
  background: linear-gradient(to bottom, #b8e0a0 0%, #78c850 100%);
  border: 3px solid var(--c-bg-2);
  padding: 12px 8px 16px;
  min-height: 200px;
  margin-bottom: 0;
}
.battle-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.battle-hud {
  width: 100%;
  background: rgba(0,0,0,0.52);
  border: 2px solid #000;
  padding: 4px 6px 5px;
  box-shadow: 0 2px 0 #000;
}
.battle-hud-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.battle-name { font-size: 8px; color: #fff; }
.battle-lvl  { font-size: 7px; color: var(--c-yellow); }
.battle-hp {
  width: 100%;
  height: 8px;
  background: #303030;
  border: 2px solid #000;
  overflow: hidden;
}
.battle-hp-fill {
  height: 100%;
  background: var(--c-green);
  transition: width 0.25s linear;
}
.battle-hp-fill.wild { background: var(--c-green); }
.battle-sprite {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  margin-top: auto;
}
.battle-sprite-player { transform: scaleX(-1); }
.battle-sprite-enemy { transform: none; }
.battle-team-dots {
  display: flex;
  gap: 4px;
  justify-content: center;
  min-height: 12px;
}
.battle-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #000;
  background: var(--c-green);
}
.battle-dot.battle-dot-active  { background: var(--c-yellow); }
.battle-dot.battle-dot-fainted { background: #555; }
.battle-status {
  font-size: 9px;
  text-align: center;
  color: var(--c-bg-2);
  background: var(--c-panel);
  border: 2px solid var(--c-bg-2);
  padding: 8px;
  margin: 10px 0;
  line-height: 1.6;
  min-height: 30px;
}

/* Attack bump animations */
@keyframes battle-atk-right {
  0%   { transform: scaleX(-1) translateX(0); }
  40%  { transform: scaleX(-1) translateX(-30px); }
  100% { transform: scaleX(-1) translateX(0); }
}
@keyframes battle-atk-left {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(-30px); }
  100% { transform: translateX(0); }
}
.battle-sprite-player.atk-right { animation: battle-atk-right 0.28s ease-out; }
.battle-sprite-enemy.atk-left { animation: battle-atk-left 0.28s ease-out; }

/* ---- Buttons ---- */
.btn {
  font-family: inherit;
  font-size: 10px;
  padding: 9px 8px;
  background: var(--c-blue);
  color: var(--c-text-light);
  border: var(--px) solid var(--c-bg-2);
  box-shadow: 0 var(--px) 0 var(--c-bg-2);
  letter-spacing: 1px;
  transition: transform 0.05s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--c-bg-2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-fight { background: var(--c-accent); }
.btn-catch { background: var(--c-green); }
.btn-skip  { background: var(--c-panel-dark); }
.btn-throw { background: var(--c-yellow); color: var(--c-bg-2); width: 100%; margin-top: 12px; }

/* ---- Up Next queue strip ---- */
.queue-strip-wrap {
  background: var(--c-panel-dark);
  border: var(--px) solid var(--c-bg-2);
  padding: 6px 8px;
}
.queue-strip-label {
  font-size: 7px;
  color: var(--c-yellow);
  margin-bottom: 4px;
  letter-spacing: 2px;
}
.queue-strip {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.queue-cell {
  aspect-ratio: 1 / 1;
  background: var(--c-bg-2);
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.queue-cell.empty { opacity: 0.35; }

/* Origin queue borders — shiny most special, void special, rest subtle */
.queue-cell.origin-shiny {
  background: linear-gradient(135deg, #6a5028, #3a2818);
  border-color: #d4af37;
  animation: q-shiny-glow 1.4s ease-in-out infinite;
}
@keyframes q-shiny-glow {
  0%, 100% { box-shadow: 0 0 6px #ffe060, inset 0 0 4px rgba(255,224,96,0.3); }
  50%       { box-shadow: 0 0 16px #ffe060, 0 0 28px rgba(255,200,0,0.4), inset 0 0 8px rgba(255,224,96,0.5); }
}
.queue-cell.origin-void {
  border-color: #5d2d8e;
  animation: q-void-glow 2s ease-in-out infinite;
}
@keyframes q-void-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(93,45,142,0.8), inset 0 0 4px rgba(93,45,142,0.25); }
  50%       { box-shadow: 0 0 12px rgba(93,45,142,1), inset 0 0 8px rgba(93,45,142,0.4); }
}
.queue-cell.origin-berserk { border-color: #c03028; box-shadow: 0 0 4px rgba(192,48,40,0.7); }
.queue-cell.origin-feral   { border-color: #8b6914; box-shadow: 0 0 4px rgba(139,105,20,0.7); }
.queue-cell.origin-armored { border-color: #708090; box-shadow: 0 0 4px rgba(112,128,144,0.7); }
.queue-cell.origin-ancient { border-color: #b8860b; box-shadow: 0 0 4px rgba(184,134,11,0.7); }
.queue-cell.origin-phantom { border-color: #9370db; box-shadow: 0 0 4px rgba(147,112,219,0.7); }
.queue-cell.origin-swift   { border-color: #1e90ff; box-shadow: 0 0 4px rgba(30,144,255,0.7); }
.queue-cell.origin-giant   { border-color: #228b22; box-shadow: 0 0 4px rgba(34,139,34,0.7); }

/* Caught indicator dot */
.caught-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.caught-dot.caught   { background: #48c848; box-shadow: 0 0 4px #48c848; }
.caught-dot.uncaught { background: #606878; }

/* Dot appended to wild-name-box */
#caught-dot {
  margin-left: 8px;
  vertical-align: middle;
}

/* Dot in queue strip cell — bottom-right corner */
.queue-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.queue-cell { position: relative; }

/* ---- Team strip ---- */
.team-strip-wrap {
  background: var(--c-panel-dark);
  border: var(--px) solid var(--c-bg-2);
  padding: 4px 6px;
  margin-top: 0;
  min-width: 0;
  flex: 0 0 auto;
  overflow: visible;
}
.team-strip-label {
  font-size: 7px;
  color: var(--c-green);
  margin-bottom: 4px;
  letter-spacing: 2px;
}
.team-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  gap: 3px;
  width: 100%;
  aspect-ratio: 6;
}
.team-cell {
  position: relative;
  background: var(--c-bg-2);
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 2px 0;
  min-width: 0;
  min-height: 0;
  gap: 1px;
  overflow: visible;
}
.team-cell.empty { opacity: 0.35; }
.team-cell.empty .team-empty-mark { font-size: 20px; color: #555; }
.team-sprite { flex: 1; min-height: 0; width: auto; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.team-level { font-size: clamp(6px, 1.8vw, 9px); color: var(--c-yellow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.team-fallback { font-size: 8px; color: #aaa; }
.team-cell.shiny { box-shadow: inset 0 0 6px #ffe060; }
.team-cell.shiny .team-sprite { filter: drop-shadow(0 0 3px #ffe060); }

/* Evolve-ready glow (team strip) */
@keyframes evo-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #4090f0, 0 0 6px #4090f0; }
  50%       { box-shadow: 0 0 0 2px #80c0ff, 0 0 14px #80c0ff; }
}
.team-cell.evolve-ready {
  animation: evo-pulse 1.5s ease-in-out infinite;
}
.team-evo-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #4090f0;
  color: #fff;
  font-size: 5px;
  padding: 1px 3px;
  border: 1px solid #000;
  letter-spacing: 0.5px;
  pointer-events: none;
}

.team-evo-badge.mega-badge {
  background: linear-gradient(135deg, #b44aff, #5540ff);
}
.team-cell.mega-form {
  box-shadow: 0 0 8px 2px rgba(180, 74, 255, 0.5);
}
.team-evo-badge.gmax-badge {
  background: linear-gradient(135deg, #ff2200, #ff7700);
}
.team-cell.gmax-form {
  box-shadow: 0 0 8px 2px rgba(255, 50, 0, 0.6);
  animation: gmax-cell-pulse 1.4s ease-in-out infinite;
}
@keyframes gmax-cell-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255,50,0,0.5); }
  50%       { box-shadow: 0 0 18px 4px rgba(255,80,0,0.85); }
}

/* XP bar pinned to bottom of each team cell */
.team-xp-bar {
  align-self: stretch;
  height: 5px;
  background: #111;
  border-top: 1px solid #000;
  margin-top: auto;
}
.team-xp-fill {
  height: 100%;
  background: var(--c-blue);
  transition: width 0.4s ease-out;
  min-width: 1px;
}
.team-xp-fill.maxed { background: var(--c-yellow); }

/* +N XP fade-in/fade-up toast */
.xp-pop {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--c-blue);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 3px 5px;
  border: 2px solid #000;
  box-shadow: 0 2px 0 #000;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.25s ease-out, transform 0.5s ease-out;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
.xp-pop.show { opacity: 1; transform: translateY(-10px); }
.xp-pop.out  { opacity: 0; transform: translateY(-28px); transition: opacity 1s ease-out, transform 1s ease-out; }

.team-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.team-name {
  font-size: clamp(5px, 1.5vw, 8px);
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.team-ivs {
  font-size: clamp(4px, 1.1vw, 6px);
  color: #888;
}
.team-strip-hint {
  color: #555;
  font-size: 6px;
  letter-spacing: 0;
  margin-left: 6px;
  text-transform: none;
}

/* PC Box */
.pc-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 4px;
}
.pc-box-label {
  font-size: 7px;
  color: var(--c-green);
  letter-spacing: 2px;
}
.pc-box-count {
  font-size: 6px;
  color: #666;
}
.pc-box {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  padding: 2px 1px;
  overflow-y: auto;
  max-height: 400px;
}
.pc-card {
  position: relative;
  background: var(--c-bg-2);
  border: 2px solid #2a2a3a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 2px 3px;
  cursor: pointer;
  gap: 1px;
  transition: border-color 0.12s;
  min-width: 0;
}
.pc-card:hover { border-color: var(--c-yellow); }
.pc-card.on-team { border-color: var(--c-green); background: #101e10; }
.pc-card.shiny { background: #1a1600; }
.pc-card.shiny.on-team { background: #1a1a06; }
.pc-sprite {
  width: 80%;
  height: auto;
  image-rendering: pixelated;
}
.pc-name {
  font-size: 5px;
  color: #ccc;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pc-level { font-size: 5px; color: var(--c-yellow); }
.pc-team-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--c-green);
  color: #000;
  font-size: 4px;
  padding: 1px 2px;
  letter-spacing: 0;
  pointer-events: none;
}
.pc-card.pc-empty {
  background: #0e0e16;
  border: 2px solid #1a1a26;
  cursor: default;
  opacity: 0.4;
  pointer-events: none;
}
.pc-iv-dot { display: none; }
.pc-loading { font-size: 10px; color: #888; }
.pc-box-empty {
  font-size: 7px;
  color: #666;
  text-align: center;
  padding: 10px 4px;
  grid-column: 1 / -1;
}

/* IV displays in afk stats popup */
.afk-iv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px 4px;
  margin: 4px 0;
  width: 100%;
}
.afk-iv-row {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
}
.afk-iv-label { color: #888; }
.afk-iv-val { color: #ddd; }
.afk-iv-val.iv-hi { color: #ffe060; }
.afk-iv-val.iv-lo { color: #e04040; }
.afk-picker-card-iv { font-size: 6px; color: #888; margin-top: 1px; }

/* IV chips in training zone */
.train-iv-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 4px;
}
.train-iv-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: #1e2030;
  border: 1px solid #333;
}
.train-iv-label {
  font-size: 5px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
}
.train-iv-val {
  font-size: 9px;
  color: #aaa;
}
.train-iv-chip.iv-hi { border-color: rgba(255,224,96,0.4); }
.train-iv-chip.iv-hi .train-iv-val { color: #ffe060; }
.train-iv-chip.iv-lo { border-color: rgba(224,64,64,0.4); }
.train-iv-chip.iv-lo .train-iv-val { color: #e04040; }

/* Pokedex owned count */
.dex-popup-owned {
  font-size: 7px;
  color: var(--c-green);
  margin-top: 2px;
}
.queue-sprite {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.queue-silhouette {
  width: 100%;
  height: 100%;
  filter: brightness(0);
  image-rendering: pixelated;
}
.queue-pokeball {
  width: 60%;
  height: 60%;
  opacity: 0.7;
}

/* ---- Nav ---- */
.bottom-nav {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.nav-btn {
  font-family: inherit;
  font-size: 9px;
  padding: 8px 4px;
  background: var(--c-panel-dark);
  color: var(--c-text-light);
  border: var(--px) solid var(--c-bg-2);
  box-shadow: 0 var(--px) 0 var(--c-bg-2);
}
.nav-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--c-bg-2); }

/* ---- Modal ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal-inner {
  background: var(--c-panel);
  color: var(--c-text);
  border: var(--px) solid var(--c-bg-2);
  box-shadow: 0 var(--px) 0 var(--c-bg-2);
  padding: 20px;
  width: 100%;
  max-width: 420px;
}

.catch-header {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin-bottom: 12px;
}

.catch-round { font-size: 9px; text-align: center; margin-bottom: 12px; color: var(--c-accent); }

/* ---- Ball picker (inside catch modal) ---- */
.ball-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.ball-pick {
  font-family: inherit;
  background: var(--c-panel-dark);
  color: var(--c-text-light);
  border: 2px solid var(--c-bg-2);
  padding: 6px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ball-pick:disabled { opacity: 0.35; cursor: not-allowed; }
.ball-pick.active {
  background: var(--c-yellow);
  color: var(--c-bg-2);
  outline: 2px solid var(--c-accent);
}
.ball-pick-icon-img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}
.ball-pick-name { font-size: 7px; letter-spacing: 1px; }
.ball-pick-count { font-size: 7px; opacity: 0.85; }

/* ---- Timing bar ---- */
.timing-bar {
  position: relative;
  width: 100%;
  height: 32px;
  background: var(--c-panel-dark);
  border: var(--px) solid var(--c-bg-2);
  overflow: hidden;
}

.hit-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--c-green),
    var(--c-green) 4px,
    #4a8848 4px,
    #4a8848 8px
  );
  transition: left 0.2s, width 0.2s;
}

.marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 4px;
  background: var(--c-accent);
  box-shadow: 0 0 4px var(--c-yellow);
  left: 0;
}

.catch-instruction {
  text-align: center;
  font-size: 10px;
  margin-top: 12px;
  color: var(--c-text);
}
.catch-instruction kbd {
  display: inline-block;
  background: var(--c-green);
  color: var(--c-text-light);
  padding: 3px 10px;
  font-family: inherit;
  font-size: 10px;
  border-radius: 2px;
  box-shadow: 0 3px 0 #3a6e3a;
  animation: kbd-pulse 1.2s ease-in-out infinite;
}
@keyframes kbd-pulse {
  0%, 100% { box-shadow: 0 3px 0 #3a6e3a, 0 0 0 0 rgba(88,160,88,0); }
  50%       { box-shadow: 0 3px 0 #3a6e3a, 0 0 0 5px rgba(88,160,88,0.35); }
}

.catch-result {
  text-align: center;
  font-size: 10px;
  margin-top: 12px;
  min-height: 16px;
  color: var(--c-accent);
}
.catch-result.success { color: var(--c-green); }

/* ---- Side panel ---- */
.side-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  z-index: 90;
}
.side-panel-inner {
  background: var(--c-panel);
  color: var(--c-text);
  border: var(--px) solid var(--c-bg-2);
  padding: 16px;
  width: 100%;
  max-width: 640px;
  height: 92vh;
  max-height: 92vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
#panel-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.close-panel {
  align-self: flex-end;
  flex-shrink: 0;
  margin-bottom: 4px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--c-text);
  cursor: pointer;
  padding: 0 4px;
}
@media (max-width: 600px) {
  .close-panel {
    position: fixed;
    top: max(env(safe-area-inset-top, 0px), 16px);
    right: 16px;
    background: rgba(0,0,0,0.55);
    border: 2px solid #555;
    border-radius: 2px;
    font-size: 18px;
    color: #fff;
    padding: 4px 10px;
    z-index: 91;
    line-height: 1;
  }
}

.panel-title {
  font-size: 12px;
  color: var(--c-accent);
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.panel-stub { font-size: 9px; color: #555; line-height: 1.8; }

/* ---- Store ---- */
.wallet {
  font-size: 10px;
  background: var(--c-bg-2);
  color: var(--c-yellow);
  padding: 8px;
  border: var(--px) solid #000;
  margin-bottom: 12px;
  text-align: center;
}
.store-list { display: flex; flex-direction: column; gap: 8px; }
.store-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 2px solid var(--c-bg-2);
  padding: 8px;
}
.ball-icon-img,
.item-icon-img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.item-icon-fallback {
  width: 32px;
  height: 32px;
  font-size: 20px;
  align-items: center;
  justify-content: center;
}
.store-name { font-size: 10px; }
.store-blurb { font-size: 7px; color: #555; margin-top: 2px; line-height: 1.6; }
.store-owned { font-size: 7px; color: #888; margin-top: 4px; }
.store-buy { text-align: right; }
.store-price { font-size: 8px; margin-bottom: 4px; color: var(--c-bg-2); }
.btn-buy { font-size: 8px; padding: 6px 10px; background: var(--c-green); }
.store-free { font-size: 9px; color: var(--c-green); font-weight: bold; }

/* Store tabs */
.store-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.store-tab {
  flex: 1;
  font-family: inherit;
  font-size: 9px;
  padding: 7px 4px;
  background: var(--c-bg-2);
  color: #aaa;
  border: 2px solid #000;
  cursor: pointer;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .store-tab { font-size: 7px; letter-spacing: 0; padding: 7px 2px; }
}
.store-tab.active {
  background: var(--c-blue);
  color: #fff;
}
.store-tab:hover:not(.active) { color: #fff; }

/* ---- Power-ups tab ---- */
.store-section-label {
  font-size: 8px;
  color: #a0b0c0;
  letter-spacing: 1px;
  padding: 10px 0 4px;
  border-top: 1px solid #303848;
  margin-top: 6px;
}
.perk-owned-tag {
  font-size: 7px;
  color: #58c058;
  letter-spacing: 1px;
  padding: 4px 6px;
  border: 1px solid #3a6a3a;
  background: #1a2e1a;
}
#lucky-egg-display {
  font-size: 8px;
  color: #f0c840;
  letter-spacing: 1px;
}

/* Booster pack rows */
.pack-row { align-items: center; }
.pack-locked { opacity: 0.5; filter: grayscale(0.6); }
.pack-lock { font-size: 8px; color: #888; text-align: center; }
.pack-complete { opacity: 0.7; }
.pack-complete-tag {
  font-family: inherit;
  font-size: 8px;
  letter-spacing: .08em;
  color: #4caf82;
  border: 2px solid #4caf82;
  padding: 4px 8px;
  text-align: center;
}
.pack-stars {
  font-size: 10px;
  min-width: 40px;
  text-align: center;
  letter-spacing: 1px;
}
.pack-stars-common    { color: #8098a8; }
.pack-stars-uncommon  { color: #58a858; }
.pack-stars-rare      { color: #4878d0; }
.pack-stars-ultra     { color: #c0900a; }

.pack-row-common    { border-left: 4px solid #8098a8; background: #fafaf8; }
.pack-row-uncommon  { border-left: 4px solid #58a858; background: #f4fbf4; }
.pack-row-rare      { border-left: 4px solid #4878d0; background: #f2f6fd; }
.pack-row-ultra     { border-left: 4px solid #c0900a; background: #fdf8f0; }
.pack-row-legendary { border-left: 4px solid #c050ff; background: #fdf2ff; animation: pack-row-rainbow-border 2s linear infinite; }
@keyframes pack-row-rainbow-border {
  0%   { border-left-color: #ff5050; }
  20%  { border-left-color: #ffb030; }
  40%  { border-left-color: #50c050; }
  60%  { border-left-color: #50c0ff; }
  80%  { border-left-color: #c050ff; }
  100% { border-left-color: #ff5050; }
}

/* Pack result */
.pack-result  { min-height: 0; margin-top: 6px; }
.pack-queued  {
  font-size: 7px;
  color: #58c058;
  padding: 6px 8px;
  border: 1px solid #3a6a3a;
  background: #121e12;
  text-align: center;
  letter-spacing: 1px;
  animation: pack-pop 0.25s ease-out;
}
@keyframes pack-pop {
  0%   { transform: translateY(-4px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.store-items-note {
  color: #666;
  padding: 4px 0 8px;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 4px;
}

.evo-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0 4px;
}
.evo-page-btn {
  padding: 4px 10px;
  font-size: 9px;
  background: var(--c-bg-2);
  color: var(--c-text-light);
  border: 2px solid #444;
}
.evo-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.evo-page-label {
  font-size: 8px;
  color: #aaa;
  min-width: 40px;
  text-align: center;
}

/* ---- Pokédex ---- */
.dex-summary {
  font-size: 9px;
  text-align: center;
  margin-bottom: 8px;
  color: var(--c-bg-2);
}

.dex-mode-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.dex-mode-tab {
  font-family: inherit;
  font-size: 7px;
  padding: 8px 4px;
  background: var(--c-panel-dark);
  color: #d0d0c8;
  border: var(--px) solid #000;
  box-shadow: 0 var(--px) 0 #000;
  cursor: pointer;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
}
.dex-mode-tab:hover { color: #fff; }
.dex-mode-tab.active {
  box-shadow: 0 var(--px) 0 #000;
}

/* ── Origin badges ───────────────────────────────────────────────────────── */
.origin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 5px;
  padding: 2px 4px;
  border-radius: 2px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  line-height: 1;
  vertical-align: middle;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
}
.wild-origin-row {
  min-height: 14px;
  display: flex;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 2px;
}
.wild-origin-row .origin-badge {
  font-size: 9px;
  padding: 10px 22px;
  border-radius: 4px;
  letter-spacing: 1px;
  border: 2px solid rgba(0,0,0,0.4);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.dex-popup-origins {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin: 4px 0;
}

/* ── Origin tooltip ──────────────────────────────────────────────────────── */
.origin-tooltip {
  position: fixed;
  z-index: 2000;
  background: #111820;
  border: 2px solid #888;
  border-radius: 4px;
  padding: 10px 14px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.8);
  transform: translateX(-50%);
}
.origin-tooltip-name {
  font-size: 7px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.origin-tooltip-desc {
  font-size: 6px;
  color: #a0c0d8;
  line-height: 2;
  white-space: nowrap;
}

.dex-toolbar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.dex-toggle {
  font-family: inherit;
  font-size: 9px;
  padding: 10px 18px;
  background: var(--c-panel-dark);
  color: var(--c-text-light);
  border: var(--px) solid #000;
  box-shadow: 0 var(--px) 0 #000;
  cursor: pointer;
  letter-spacing: 1px;
}
.dex-toggle:active { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.dex-toggle.active {
  background: var(--c-green);
  color: #fff;
}

.dex-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 8px;
  color: #888;
  padding: 40px 24px;
}

.dex-grid.dex-grid--empty {
  background: linear-gradient(135deg, #2e2840, #1a1828);
  border-radius: 6px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dex-grid.dex-grid--normal  { background: linear-gradient(135deg, #252525, #1c1c1c); }
.dex-grid.dex-grid--berserk { background: linear-gradient(135deg, #3a1010, #200c0c); }
.dex-grid.dex-grid--armored { background: linear-gradient(135deg, #1c2430, #131a24); }
.dex-grid.dex-grid--phantom { background: linear-gradient(135deg, #281838, #1a1028); }
.dex-grid.dex-grid--giant   { background: linear-gradient(135deg, #102818, #0c1e10); }
.dex-grid.dex-grid--feral   { background: linear-gradient(135deg, #2a1a06, #1c1204); }
.dex-grid.dex-grid--ancient { background: linear-gradient(135deg, #2e2208, #201808); }
.dex-grid.dex-grid--swift   { background: linear-gradient(135deg, #0a1e38, #081428); }
.dex-grid.dex-grid--void    { background: linear-gradient(135deg, #1a0a2e, #100620); }
.dex-grid.dex-grid--shiny   { background: linear-gradient(135deg, #4a3820, #2a2030); }
.dex-cell.shiny .dex-sprite {
  filter: drop-shadow(0 0 4px #ffe060) drop-shadow(0 0 8px #ffb030);
}
.dex-detail-shiny {
  display: inline-block;
  font-size: 7px;
  color: #b8860b;
  background: linear-gradient(90deg, #ffe080, #ffaa40);
  padding: 2px 6px;
  border: 1px solid var(--c-bg-2);
  margin: 4px 0;
}
.dex-detail-sprite.shiny {
  filter: drop-shadow(0 0 6px #ffe060) drop-shadow(0 0 12px #ffb030);
}

/* ---- Settings panel ---- */
.settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding: 10px;
  background: #fff;
  border: 2px solid var(--c-bg-2);
}
.settings-label {
  font-size: 9px;
  color: var(--c-bg-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.settings-val { color: var(--c-green); font-size: 9px; }
.settings-checkbox {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.settings-checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-bg-2);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--c-accent);
  font-family: inherit;
  line-height: 1;
}
.settings-checkbox.muted .settings-checkbox-box {
  background: #f0e8e8;
  border-color: var(--c-accent);
}
.settings-slider-row { display: flex; align-items: center; gap: 8px; }
.settings-slider-row .settings-slider { flex: 1; }
.settings-slider:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: var(--c-bg-2);
  border: 2px solid #000;
  outline: none;
  cursor: pointer;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--c-yellow);
  border: 2px solid #000;
  cursor: pointer;
}
.settings-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--c-yellow);
  border: 2px solid #000;
  cursor: pointer;
}
/* ---- Settings action buttons ---- */
.settings-action-btn,
.settings-reset-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 0;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 2px;
  text-align: center;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
.settings-action-btn:active,
.settings-reset-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.settings-action-btn {
  background: #283848;
  color: var(--c-text-light);
  border-color: #3a5068;
  box-shadow: 0 4px 0 #000;
}
.settings-action-btn:hover { background: #303d50; }
.settings-reset-btn {
  background: #2a1818;
  color: var(--c-accent);
  border-color: #5a2020;
}
.settings-reset-btn:hover { background: #3a2020; }

/* ---- Nav disabled state ---- */
.nav-btn-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.nav-btn-disabled::after {
  content: ' 🔒';
  font-size: 7px;
}

/* ---- PVP coming soon ---- */
.pvp-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
}
.pvp-coming-icon { font-size: 40px; }
.pvp-coming-title {
  font-size: 14px;
  color: var(--c-yellow);
  letter-spacing: 4px;
}
.pvp-coming-sub {
  font-size: 7px;
  color: #a0b8c8;
  line-height: 2;
  max-width: 240px;
}

.dex-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 6px;
  background: var(--c-bg-2);
  border: 2px solid #000;
}
.dex-cell {
  background: #f8f8f0;
  border: 2px solid var(--c-bg-2);
  padding: 2px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1;
  overflow: hidden;
}
.dex-cell.uncaught { background: #1e1e2c; }
.dex-cell.uncaught .silhouette { opacity: 0.38; }
.dex-cell.uncaught .dex-id { color: #5a5a78; }
.dex-cell.caught {
  background: #fff8e0;
  border-color: #48c848;
  box-shadow: inset 0 0 6px rgba(72,200,72,0.2), 0 0 5px rgba(72,200,72,0.35);
}
.dex-cell:hover { outline: 2px solid var(--c-yellow); }
.dex-sprite-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.dex-pokeball-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}
.dex-sprite-wrap .dex-sprite {
  position: absolute;
  inset: 0;
}
.dex-sprite, .silhouette {
  width: 48px; height: 48px;
  image-rendering: pixelated;
}
.dex-id { font-size: 6px; color: var(--c-bg-2); }

.dex-detail {
  margin-top: 12px;
  background: #fff;
  border: 2px solid var(--c-bg-2);
  padding: 10px;
  min-height: 80px;
}
.dex-detail-empty { font-size: 8px; color: #888; text-align: center; line-height: 2; }
.dex-detail-row { display: flex; gap: 12px; align-items: flex-start; }
.dex-detail-info { flex: 1; min-width: 0; }
.dex-detail-sprite { width: 76px; height: 76px; image-rendering: pixelated; flex-shrink: 0; }
.dex-detail-name { font-size: 10px; color: var(--c-accent); margin-bottom: 4px; }
.dex-detail-types { font-size: 8px; color: #558866; margin: 3px 0; text-transform: capitalize; }
.dex-detail-flavor { font-size: 7px; line-height: 1.7; color: var(--c-text); margin-top: 8px; }
.dex-detail-rate { font-size: 7px; color: #6888a8; margin: 3px 0; }
.dex-detail-caught { font-size: 7px; color: #888; margin: 3px 0; }
.dex-detail-mystery { font-size: 7px; color: #999; font-style: italic; }
.dex-detail-level { font-size: 9px; color: var(--c-text-light); margin: 5px 0 3px; }
.dex-max-level { font-size: 7px; color: #f0c038; }
.dex-exp-bar-wrap { height: 6px; background: #2a3848; border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.dex-exp-bar-fill { height: 100%; background: #48a8e8; border-radius: 3px; transition: width 0.3s; }
.dex-exp-label { font-size: 7px; color: #6888a8; margin-bottom: 4px; }

/* Evolution chain in detail panel */
.dex-chain { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dex-chain-step { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0.5; }
.dex-chain-step.caught { opacity: 1; }
.dex-chain-step.current { opacity: 1; }
.dex-chain-step.current .dex-chain-name { color: var(--c-yellow); }
.dex-chain-sprite { width: 36px; height: 36px; image-rendering: pixelated; }
.dex-chain-name { font-size: 6px; color: var(--c-text-light); text-transform: capitalize; text-align: center; }
.dex-chain-arrow { font-size: 8px; color: #506070; margin-bottom: 14px; }

/* "While you were away" popup */
.away-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.away-box {
  background: #1a242e;
  border: 3px solid #3a5068;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 320px;
  width: 100%;
}
.away-title { font-size: 13px; color: var(--c-yellow); letter-spacing: 3px; }
.away-time { font-size: 8px; color: var(--c-text-light); letter-spacing: 1px; line-height: 2; }
.away-earned { font-size: 14px; color: #58c858; letter-spacing: 2px; }
.away-close-btn { margin-top: 4px; padding: 14px 0; font-size: 10px; letter-spacing: 2px; }

/* ---- Pokédex detail popup ---- */
.dex-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dex-popup-box {
  position: relative;
  background: #1a242e;
  border: 3px solid var(--c-bg-2);
  box-shadow: 0 0 40px rgba(0,0,0,0.9);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.dex-popup-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none;
  border: none;
  color: #a0b8c8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0 4px;
}
.dex-popup-close:hover { color: #fff; }
.dex-popup-sprite {
  width: 96px; height: 96px;
  image-rendering: pixelated;
}
.dex-popup-sprite.shiny {
  filter: drop-shadow(0 0 8px #ffe060) drop-shadow(0 0 16px #ffb030);
}
.dex-popup-name {
  font-size: 10px;
  color: var(--c-yellow);
  letter-spacing: 2px;
}
.dex-popup-types {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2px 0;
}
.dex-popup-type {
  font-size: 6px;
  padding: 2px 6px;
  border: 1px solid #3a5068;
  background: #283848;
  color: #c0d0e0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dex-popup-shiny { font-size: 7px; color: #b8860b; }
.dex-popup-rate { font-size: 8px; color: var(--c-green); }
.dex-popup-flavor { font-size: 7px; color: #a0b8c8; line-height: 1.8; max-width: 220px; }
.dex-popup-mystery { font-size: 18px; color: #4a5e6e; letter-spacing: 3px; }
.dex-popup-not-caught { font-size: 7px; color: #a0b8c8; }
.dex-popup-mystery-rate { color: #4a5e6e; }
.dex-popup-level { font-size: 8px; color: var(--c-blue); }
.dex-popup-caught { font-size: 7px; color: #6a8898; }
.dex-exp-bar-wrap { width: 100%; height: 6px; background: #283848; border: 1px solid #3a5068; margin: 2px 0; }
.dex-exp-bar-fill { height: 100%; background: var(--c-blue); }
.dex-max-level { color: var(--c-yellow); font-size: 7px; }
.dex-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 4px;
  width: 100%;
}
.dex-chain-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #243040;
  border: 2px solid #304858;
  padding: 8px 6px 6px;
  min-width: 56px;
  opacity: 0.4;
}
.dex-chain-step.caught { opacity: 0.85; }
.dex-chain-step.current { opacity: 1; border-color: var(--c-yellow); box-shadow: 0 0 6px rgba(240,192,56,0.4); }
.dex-chain-sprite { width: 40px; height: 40px; image-rendering: pixelated; }
.dex-chain-unknown {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #506070;
  background: #1a242e;
}
.dex-chain-name { font-size: 5px; color: #a0b8c8; text-transform: capitalize; text-align: center; }
.dex-chain-arrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dex-chain-arrow { font-size: 10px; color: #506070; }
.dex-chain-item-sprite {
  width: 24px; height: 24px;
  image-rendering: pixelated;
}
.dex-chain-evo-hint {
  font-size: 5px;
  color: var(--c-yellow);
  text-align: center;
  max-width: 48px;
  word-break: break-word;
  line-height: 1.4;
  text-transform: capitalize;
}

/* ---- Team slot stats popup ---- */
.afk-stats-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.afk-stats-box {
  position: relative;
  background: #1a242e;
  border: 3px solid var(--c-bg-2);
  box-shadow: 0 0 40px rgba(0,0,0,0.9);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.afk-stats-sprite {
  width: 96px; height: 96px;
  image-rendering: pixelated;
}
.afk-stats-sprite.shiny {
  filter: drop-shadow(0 0 8px #ffe060) drop-shadow(0 0 16px #ffb030);
}
.afk-stats-name { font-size: 10px; color: var(--c-yellow); letter-spacing: 2px; }
.afk-stats-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
  border-top: 1px solid #283848;
}
.afk-stats-label { font-size: 7px; color: #a0b8c8; letter-spacing: 1px; }
.afk-stats-val { font-size: 8px; color: var(--c-text-light); }
.afk-stats-coins { color: var(--c-green); }

/* ---- Afk swap button ---- */
.afk-swap {
  position: absolute;
  top: 4px; right: 22px;
  background: none;
  border: none;
  color: #3870c0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0 2px;
  z-index: 2;
}
.afk-swap:hover { color: #80b0ff; }

/* ---- Picker: search + sort + grid ---- */
.afk-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.afk-picker-search {
  width: 100%;
  background: #1a242e;
  border: 2px solid #3a5068;
  color: var(--c-text-light);
  font-family: inherit;
  font-size: 8px;
  padding: 8px 10px;
  outline: none;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.afk-picker-search:focus { border-color: var(--c-yellow); }
.afk-picker-sort-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.afk-picker-sort-btn {
  flex: 1;
  background: #1a242e;
  border: 2px solid #3a5068;
  color: #a0b8c8;
  font-family: inherit;
  font-size: 7px;
  padding: 6px 0;
  cursor: pointer;
  letter-spacing: 1px;
  transition: color 0.1s, background 0.1s;
}
.afk-picker-sort-btn.active {
  background: #283848;
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}
.afk-picker-sort-btn:hover:not(.active) { color: #f8f8f0; background: #283848; }
.afk-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.afk-picker-card {
  background: #f8f8f0;
  border: 2px solid var(--c-bg-2);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: outline 0.08s;
}
.afk-picker-card:hover { outline: 2px solid var(--c-yellow); }
.afk-picker-card.shiny { background: linear-gradient(135deg, #fff8e0 0%, #ffe8a0 100%); border-color: #b8860b; }
.afk-picker-card.shiny .afk-picker-card-sprite { filter: drop-shadow(0 0 4px #ffe060); }
.afk-picker-card.already-assigned { opacity: 0.5; }
.afk-picker-card-sprite { width: 80px; height: 80px; image-rendering: pixelated; }
.afk-picker-card-name { font-size: 7px; color: var(--c-bg-2); text-align: center; }
.afk-picker-card-lvl { font-size: 7px; color: var(--c-blue); }
.afk-picker-card-rate { font-size: 7px; color: var(--c-green); }
.afk-picker-card-tag {
  font-size: 5px;
  color: #fff;
  background: var(--c-accent);
  padding: 1px 4px;
  border: 1px solid #000;
}
.afk-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 8px;
  color: #a0b8c8;
  padding: 20px;
}

/* ---- Starter picker modal ---- */
.starter-modal {
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.starter-inner {
  max-width: 720px;
  width: 100%;
}
.starter-title {
  font-size: 14px;
  color: var(--c-accent);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.starter-subtitle {
  font-size: 8px;
  color: var(--c-bg-2);
  text-align: center;
  margin-bottom: 16px;
}
.starter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}
.starter-tab {
  font-family: inherit;
  font-size: 9px;
  padding: 6px 10px;
  min-width: 32px;
  background: var(--c-bg-2);
  color: #aaa;
  border: 2px solid #000;
  cursor: pointer;
  letter-spacing: 1px;
}
.starter-tab:hover { color: #fff; }
.starter-tab.active {
  background: var(--c-yellow);
  color: var(--c-bg-2);
}

.starter-cards {
  display: flex;
  justify-content: center;
  min-height: 200px;
}
.starter-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.starter-card {
  width: 130px;
  background: #fff;
  border: 3px solid var(--c-bg-2);
  padding: 12px 6px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s;
}
.starter-card:hover {
  outline: 3px solid var(--c-yellow);
  transform: translateY(-2px);
  background: #fff8e0;
}
.starter-sprite { width: 96px; height: 96px; image-rendering: pixelated; }
.starter-name { font-size: 9px; color: var(--c-bg-2); }
.starter-rate { font-size: 7px; color: var(--c-green); }
.starter-loading {
  font-size: 10px;
  color: #666;
  text-align: center;
  padding: 40px;
}

/* ---- Tutorial scene ---- */
.tut-scene {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 680px;
  z-index: 200;
  background: url('public/Tutorial Vertical.png') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
@media (min-width: 600px)  { .tut-scene { max-width: 760px; } }
@media (min-width: 1024px) {
  .tut-scene {
    max-width: 920px;
    background-image: url('public/Tutorial Landscape.png');
  }
}
@media (min-width: 1600px) { .tut-scene { max-width: 1060px; } }
.tut-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0,0,0,0.2);
  border: 2px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 7px;
  padding: 7px 12px;
  cursor: pointer;
  letter-spacing: 1px;
  z-index: 1;
}
.tut-skip:hover { background: rgba(0,0,0,0.4); color: #fff; }
.tut-mute-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0,0,0,0.2);
  border: 2px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 11px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  padding: 0;
}
.tut-mute-btn:hover { background: rgba(0,0,0,0.4); }
.tut-mute-btn.muted { color: rgba(208,72,72,0.9); border-color: rgba(208,72,72,0.5); }
.tut-oak-wrap {
  position: absolute;
  bottom: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tut-oak {
  height: min(58vh, 420px);
  width: auto;
  display: block;
  image-rendering: auto;
}
@media (min-width: 1024px) { .tut-oak { height: min(46vh, 300px); } }
@media (min-width: 1600px) { .tut-oak { height: min(42vh, 260px); } }
.tut-oak-shadow {
  width: 110px;
  height: 14px;
  margin-top: -4px;
  background: radial-gradient(ellipse, rgba(0,50,40,0.3) 0%, transparent 72%);
  border-radius: 50%;
}
.tut-box {
  width: calc(100% - 32px);
  max-width: 540px;
  background: #f0f0e8;
  border: 4px solid #202028;
  border-radius: 12px;
  padding: 18px 22px 16px;
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
  position: relative;
  min-height: 80px;
  user-select: none;
}
.tut-box:active { background: #e8e8e0; }
.tut-box-text {
  font-size: 8px;
  line-height: 2.2;
  color: #202028;
  pointer-events: none;
  padding-right: 18px;
}
.tut-box-arrow {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 10px;
  color: #202028;
  pointer-events: none;
  animation: tut-bounce 0.65s ease-in-out infinite;
}
@keyframes tut-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.tut-box-last {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: var(--c-green);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 8px;
  padding: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  text-align: center;
}
.tut-box-last:hover { background: var(--c-bg-2); }

/* ---- Tip cards ---- */
.tip-scene {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tip-card {
  background: #f0f0e8;
  border: 4px solid #202028;
  border-radius: 12px;
  padding: 24px 22px 20px;
  max-width: 340px;
  width: 100%;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
}
.tip-card-title {
  font-size: 10px;
  color: var(--c-green);
  letter-spacing: 2px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #d0d0c0;
}
.tip-card-text {
  font-size: 7px;
  line-height: 2.2;
  color: #202028;
  margin-bottom: 20px;
}
.tip-card-btn {
  width: 100%;
  background: var(--c-green);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 8px;
  padding: 12px;
  cursor: pointer;
  letter-spacing: 1px;
  border-radius: 4px;
}
.tip-card-btn:hover { background: var(--c-bg-2); }

/* ---- AFK Area ---- */
.afk-stats {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.afk-stats.single .afk-stat {
  width: 100%;
}
.afk-stat {
  background: var(--c-bg-2);
  color: var(--c-text-light);
  border: var(--px) solid #000;
  padding: 8px;
  text-align: center;
}
.afk-label { font-size: 7px; color: #aaa; margin-bottom: 4px; }
.afk-val { font-size: 10px; color: var(--c-yellow); }

.afk-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.afk-btn-row .btn-equip-best {
  flex: 1;
  margin-bottom: 0;
}
.btn-clear-team {
  flex: 1;
  background: #8b2020;
  color: #fff;
  border: var(--px) solid #000;
  padding: 10px;
}
.btn-clear-team:disabled { background: #666; color: #aaa; cursor: not-allowed; }
.btn-clear-team:not(:disabled):hover { background: #b02828; }
.afk-pending { color: var(--c-green); }

.afk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.afk-slot {
  position: relative;
  background: #fff;
  border: var(--px) dashed var(--c-bg-2);
  padding: 8px 4px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: inherit;
  cursor: pointer;
}
.afk-slot.empty { background: #e8e8d8; }
.afk-slot.filled { background: #fff8e0; border-style: solid; }
.afk-slot:hover { outline: 2px solid var(--c-yellow); }
.afk-slot.drag-over { outline: 2px solid var(--c-green); background: #e8ffe0; }
.afk-plus { font-size: 24px; color: #888; }
.afk-empty-label { font-size: 7px; color: #888; }
.afk-slot-picking { outline: 2px solid var(--c-yellow) !important; background: #2a2810 !important; }
.afk-slot-picking .afk-plus { color: var(--c-yellow); }
.afk-slot-picking .afk-empty-label { color: var(--c-yellow); }
.afk-sprite { width: 58px; height: 58px; image-rendering: pixelated; }
.afk-slot.shiny { background: linear-gradient(135deg, #fff8e0 0%, #ffe8a0 100%); border-color: #b8860b; }
.afk-slot.shiny .afk-sprite { filter: drop-shadow(0 0 4px #ffe060); }
.afk-slot.evolve-ready { border-color: #4090f0; animation: evo-pulse-light 1.5s ease-in-out infinite; }
@keyframes evo-pulse-light {
  0%, 100% { box-shadow: 0 0 0 2px #4090f080; }
  50%       { box-shadow: 0 0 0 3px #80c0ff, 0 0 10px #4090f060; }
}
.btn-evolve {
  width: 100%;
  background: #4090f0;
  color: #fff;
  font-family: inherit;
  font-size: 7px;
  padding: 5px 4px;
  margin-top: 4px;
  border: 2px solid #000;
  cursor: pointer;
  letter-spacing: 1px;
}
.btn-evolve:hover { background: #3070d0; }
.btn-use-item {
  width: 100%;
  background: #7050b8;
  color: #fff;
  font-family: inherit;
  font-size: 6px;
  padding: 4px 2px;
  margin-top: 3px;
  border: 2px solid #000;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.btn-use-item:hover { background: #5a3a9a; }
.btn-mega-stone { background: linear-gradient(135deg, #7a2fff, #3a1fb8) !important; }
.btn-mega-stone:hover { background: linear-gradient(135deg, #9a4fff, #5530e0) !important; }
.btn-gmax-factor { background: linear-gradient(135deg, #cc1100, #881100) !important; }
.btn-gmax-factor:hover { background: linear-gradient(135deg, #ff2200, #aa1100) !important; }
.afk-picker-row.shiny { background: linear-gradient(90deg, #fff8e0, #ffe8a0); }
.afk-picker-row.shiny .afk-picker-sprite { filter: drop-shadow(0 0 3px #ffe060); }
.afk-name { font-size: 7px; color: var(--c-bg-2); text-align: center; }
.afk-rate { font-size: 7px; color: var(--c-green); }
.afk-level { font-size: 7px; color: var(--c-blue); }
.afk-slot.dragging { opacity: 0.4; }

/* PC Box inside afk panel */
.afk-pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 6px;
  padding-top: 12px;
  border-top: var(--px) solid #ccc;
}
.afk-pc-label { font-size: 7px; color: var(--c-bg-2); letter-spacing: 2px; }
.afk-pc-count { font-size: 6px; color: #888; }
.afk-pc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.afk-pc-nav-btn {
  background: var(--c-bg-2);
  color: var(--c-text-light);
  border: var(--px) solid #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1;
}
.afk-pc-nav-btn:disabled { opacity: 0.3; cursor: default; }
.afk-pc-nav-btn:not(:disabled):hover { background: #3a4a5a; }
.afk-pc-nav-label {
  font-size: 8px;
  color: var(--c-text-light);
  letter-spacing: 1px;
  min-width: 60px;
  text-align: center;
}
.afk-pc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-bottom: 12px;
}
.afk-pc-slot {
  position: relative;
  background: #e8e8d8;
  border: var(--px) dashed #aaa;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
  cursor: default;
  transition: outline 0.08s;
}
.afk-pc-slot.filled {
  background: #fff8e0;
  border-style: solid;
  border-color: var(--c-bg-2);
  cursor: pointer;
}
.afk-pc-slot.filled:hover { outline: 2px solid var(--c-yellow); }
.afk-pc-slot.on-team { background: #1a2e1a; border: var(--px) dashed #4a8a4a; cursor: default; }
.afk-pc-on-team-label { font-size: 6px; color: #4a8a4a; letter-spacing: 1px; text-align: center; }
.afk-pc-slot.shiny { background: linear-gradient(135deg, #fff8e0 0%, #ffe8a0 100%); border-color: #b8860b; }
.afk-pc-slot.evolve-ready { border-color: #4090f0; animation: evo-pulse-light 1.5s ease-in-out infinite; }
.afk-pc-slot.drag-over { outline: 2px solid var(--c-green) !important; background: #d8f8d8; }
.afk-pc-slot.dragging { opacity: 0.35; }
.afk-pc-sprite { width: 82%; height: auto; image-rendering: pixelated; }
.afk-pc-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 4px;
  color: var(--c-bg-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.afk-pc-level { font-family: 'Press Start 2P', monospace; font-size: 4px; color: var(--c-blue); }
.afk-pc-iv { font-family: 'Press Start 2P', monospace; font-size: 4px; }
.afk-pc-iv.iv-gold { color: #c8900a; }
.afk-pc-iv.iv-blue { color: #2070d0; }
.afk-pc-iv.iv-green { color: #308040; }
.afk-pc-iv.iv-gray { color: #888; }
.afk-pc-team-badge {
  position: absolute;
  top: 1px;
  left: 1px;
  background: var(--c-green);
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 3px;
  padding: 1px 2px;
  pointer-events: none;
}
.afk-pc-loading { font-size: 10px; color: #888; }
.afk-remove {
  position: absolute;
  top: 2px; right: 4px;
  background: var(--c-accent);
  color: #fff;
  border: 1px solid #000;
  font-family: inherit;
  font-size: 8px;
  width: 16px; height: 16px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

/* PC Box sort row */
.afk-pc-sort-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.afk-pc-sort-label {
  font-size: 6px;
  color: #888;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.afk-pc-sort-btn {
  flex: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 4px 3px;
  background: var(--c-bg-2);
  color: #a0b8c8;
  border: 2px solid #3a4a5a;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.1s, color 0.1s;
}
.afk-pc-sort-btn.active {
  background: #283848;
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}
.afk-pc-sort-btn:hover:not(.active) { background: #283848; color: #f8f8f0; }

/* PC swap mode styles */
.afk-pc-slot.swap-source {
  outline: 3px solid var(--c-yellow);
  animation: evo-pulse-light 1s ease-in-out infinite;
}
.afk-pc-swap-badge {
  position: absolute;
  bottom: 1px;
  left: 1px;
  background: var(--c-yellow);
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 3px;
  padding: 1px 2px;
  pointer-events: none;
}
.afk-swap-banner {
  background: #1e2e1a;
  border: 2px solid var(--c-yellow);
  padding: 6px 10px;
  font-size: 7px;
  color: var(--c-yellow);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.afk-swap-cancel-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 3px 8px;
  background: var(--c-accent);
  color: #fff;
  border: 2px solid #000;
  cursor: pointer;
  flex-shrink: 0;
}

/* PC slot popup */
.pc-slot-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pc-slot-popup {
  background: #1a242e;
  border: 3px solid #3a5068;
  box-shadow: 0 0 40px rgba(0,0,0,0.9);
  padding: 20px 16px 16px;
  width: 100%;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.pc-popup-title {
  font-size: 9px;
  color: var(--c-yellow);
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.pc-popup-sub {
  font-size: 7px;
  color: #a0b8c8;
  text-align: center;
  margin-bottom: 4px;
}
.pc-popup-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 12px 8px;
  border: 3px solid #000;
  box-shadow: 0 3px 0 #000;
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform 0.06s, box-shadow 0.06s;
}
.pc-popup-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.pc-popup-swap   { background: #2050b8; color: #fff; }
.pc-popup-swap:hover { background: #3060d0; }
.pc-popup-stats  { background: #702090; color: #fff; }
.pc-popup-stats:hover { background: #9030b8; }
.pc-popup-clip   { background: #207820; color: #fff; }
.pc-popup-clip:hover { background: #30a030; }
.pc-popup-remove  { background: #702020; color: #fff; }
.pc-popup-remove:hover { background: #902828; }
.pc-popup-release { background: #904010; color: #fff; }
.pc-popup-release:hover { background: #b05018; }
.pc-popup-cancel { background: #303848; color: #a0b8c8; border-color: #505868; box-shadow: none; font-size: 7px; padding: 8px; }
.pc-popup-nickname-btn { background: #1a5f8a; color: #fff; }
.pc-popup-nickname-btn:hover { background: #2278b0; }
.pc-popup-evolve-btn { background: #207840; color: #fff; }
.pc-popup-evolve-btn:hover { background: #2a9850; }
.pc-popup-evolve-disabled { background: #2a3030; color: #607068; border-color: #3a4040; box-shadow: none; cursor: not-allowed; }
.pc-popup-nickname-display { font-style: italic; font-size: 10px; color: var(--c-yellow); }
.pc-popup-species-display { font-size: 7px; color: #a0b8c8; margin-top: 2px; }
.pc-nickname-input {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  background: #0e1822;
  color: var(--c-text);
  border: 2px solid #3a5068;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
.pc-nickname-input:focus { border-color: var(--c-yellow); }
.pc-nickname-error { font-size: 7px; color: #e06030; min-height: 14px; text-align: center; }
.pc-evolve-item-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
}
.pc-evolve-arrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  background: #2050b8;
  color: #fff;
  border: 2px solid #3060d0;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}
.pc-evolve-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.pc-evolve-item-label { font-size: 8px; color: var(--c-yellow); text-transform: capitalize; }

/* Multi-release mode */
.pc-release-mode-btn { color: #e06030; }
.pc-release-mode-btn.active { background: #3a1008; color: #ff8050; border-color: #903020; }
.afk-pc-slot.release-selected {
  border-color: #e04020;
  box-shadow: 0 0 6px rgba(224,64,32,0.6), inset 0 0 8px rgba(224,64,32,0.2);
  opacity: 0.75;
}
.afk-pc-slot .afk-pc-release-check {
  position: absolute;
  top: 2px; right: 3px;
  font-size: 10px;
  color: #ff6040;
  line-height: 1;
  pointer-events: none;
}
.pc-release-bar {
  margin-top: 6px;
  padding: 8px 10px;
  background: #1e1010;
  border: 2px solid #803020;
  font-size: 7px;
  color: #a07060;
  text-align: center;
  letter-spacing: 1px;
}
.pc-release-all-btn {
  width: 100%;
  background: #903020;
  color: #fff;
  border: 2px solid #000;
  box-shadow: 0 3px 0 #000;
  font-family: inherit;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 10px;
  cursor: pointer;
}
.pc-release-all-btn:hover { background: #b04030; }
/* Receipt popup */
.pc-release-receipt { max-height: 80vh; overflow-y: auto; }
.pc-release-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  max-height: 40vh;
  overflow-y: auto;
}
.pc-release-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: #1a1e28;
  border: 1px solid #303848;
  font-size: 7px;
}
.pc-release-sprite {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.pc-release-name { flex: 1; color: #d0d8e0; letter-spacing: 0.5px; }
.pc-release-money { color: #f0c038; font-size: 8px; flex-shrink: 0; }
.pc-release-total {
  font-size: 10px;
  color: #f0c038;
  text-align: right;
  padding: 6px 2px 2px;
  border-top: 1px solid #303848;
  letter-spacing: 1px;
}

/* Team swap picker popup */
.pc-team-swap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pc-team-swap-box {
  background: #1a242e;
  border: 3px solid #3a5068;
  box-shadow: 0 0 40px rgba(0,0,0,0.9);
  padding: 20px 16px 16px;
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.pc-team-swap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #283848;
  border: 2px solid #3a5068;
  padding: 8px 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--c-text-light);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.pc-team-swap-row:hover { background: #304050; outline: 2px solid var(--c-yellow); }
.pc-team-swap-sprite {
  width: 32px; height: 32px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.btn-claim {
  width: 100%;
  background: var(--c-green);
  font-size: 11px;
  padding: 12px;
}
.btn-equip-best {
  background: var(--c-yellow);
  color: var(--c-bg-2);
  font-size: 10px;
  padding: 10px;
  margin-bottom: 12px;
}
.btn-equip-best:disabled { background: #666; color: #aaa; cursor: not-allowed; }
.afk-hint {
  font-size: 7px;
  color: #888;
  text-align: center;
  margin-top: 8px;
  line-height: 1.8;
}

/* Picker */
.btn-back {
  background: var(--c-panel-dark);
  font-size: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}
.afk-picker-heading {
  font-size: 9px;
  color: var(--c-accent);
  margin-bottom: 8px;
}
.afk-search-wrap {
  padding: 0 0 10px;
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.afk-shiny-toggle {
  font-family: inherit;
  font-size: 8px;
  letter-spacing: .06em;
  padding: 0 10px;
  flex-shrink: 0;
  background: #0e161e;
  color: rgba(255,255,255,0.4);
  border: 2px solid #3a5068;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.afk-shiny-toggle.active {
  background: rgba(240,192,56,0.15);
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}
.afk-search {
  flex: 1;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 10px 12px;
  background: #0e161e;
  color: var(--c-text-light);
  border: 2px solid #3a5068;
  outline: none;
}
.afk-search:focus { border-color: var(--c-yellow); }
.afk-search::placeholder { color: #506070; }
.afk-search-empty {
  font-size: 8px;
  color: #606878;
  text-align: center;
  padding: 20px 0;
}
.afk-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--c-bg-2);
  padding: 4px;
}
.afk-picker-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--c-bg-2);
  padding: 6px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.afk-picker-row:hover { outline: 2px solid var(--c-yellow); }
.afk-picker-row.already-assigned { opacity: 0.55; }
.afk-picker-sprite { width: 48px; height: 48px; image-rendering: pixelated; }
.afk-picker-name { font-size: 9px; color: var(--c-bg-2); }
.afk-picker-lvl { font-size: 7px; color: var(--c-blue); margin-left: 4px; }
.afk-picker-rate { font-size: 7px; color: var(--c-green); margin-top: 2px; }
.afk-picker-tag {
  font-size: 6px;
  color: #fff;
  background: var(--c-accent);
  padding: 2px 4px;
  border: 1px solid #000;
}
.afk-picker-evo-tag {
  font-size: 6px;
  color: #a0b8d0;
  margin-left: 4px;
}

/* ---- Pack Opening Animation ---- */
.po-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.po-box {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.po-heading {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #f0c038;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(240,192,56,0.6);
}

/* Track */
.po-stage {
  position: relative;
  width: 100%;
}
.po-track {
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  position: relative;
}
.po-strip {
  display: flex;
  gap: 10px;
  will-change: transform;
}
.po-fade-left, .po-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.po-fade-left  { left: 0;  background: linear-gradient(to right, rgba(0,0,0,0.9), transparent); }
.po-fade-right { right: 0; background: linear-gradient(to left,  rgba(0,0,0,0.9), transparent); }
.po-center-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: #f0c038;
  box-shadow: 0 0 12px 3px rgba(240,192,56,0.7);
  z-index: 3;
  pointer-events: none;
}

/* Cards */
.po-card {
  flex-shrink: 0;
  width: 120px;
  height: 160px;
  border-radius: 6px;
  border: 3px solid #555;
  background: #1a242e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  position: relative;
  overflow: hidden;
}
.po-sprite {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}
.po-rarity-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  letter-spacing: 1px;
  color: #aaa;
  text-align: center;
}
.po-winner-card {
  transform: scale(1.06);
  z-index: 1;
}
.po-sprite.po-shiny {
  filter: drop-shadow(0 0 4px #ffe060) drop-shadow(0 0 10px #ffa000);
}
.po-card-origin {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 4px;
  color: #fff;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* Rarity borders */
.po-common   { border-color: #707070; }
.po-uncommon { border-color: #58a058; box-shadow: 0 0 20px rgba(88,160,88,0.5); }
.po-uncommon .po-rarity-label { color: #78c878; }
.po-rare     { border-color: #4878d0; box-shadow: 0 0 24px rgba(72,120,208,0.6); }
.po-rare .po-rarity-label { color: #88a8f0; }
.po-ultra    { border-color: #d09020; box-shadow: 0 0 28px rgba(208,144,32,0.7); animation: po-shimmer 1.8s ease-in-out infinite; }
.po-ultra .po-rarity-label { color: #f0c038; }
.po-legendary { border-color: transparent; background-clip: padding-box; box-shadow: 0 0 40px rgba(255,80,180,0.6); animation: po-rainbow 2s linear infinite; }
.po-legendary .po-rarity-label { color: #fff; }
.po-mega { border-color: #9040e0; box-shadow: 0 0 28px rgba(144,64,224,0.7); animation: po-mega-pulse 2s ease-in-out infinite; }
.po-mega .po-rarity-label { color: #d080ff; }
@keyframes po-mega-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(144,64,224,0.6); border-color: #9040e0; }
  50%       { box-shadow: 0 0 40px rgba(180,80,255,0.9); border-color: #c060ff; }
}
.po-gmax { border-color: #cc1100; box-shadow: 0 0 30px rgba(220,30,0,0.8); animation: po-gmax-card 1.2s ease-in-out infinite; }
.po-gmax .po-rarity-label { color: #ff7755; }
.po-gmax-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  object-fit: contain;
  animation: po-gmax-aura 1.2s ease-in-out infinite;
}
.po-reveal-inner.po-gmax { border-color: #cc1100; animation: po-gmax-card 1.2s ease-in-out infinite; }
.po-reveal-badge.po-gmax { background: #220000; color: #ff6644; border: 1px solid #cc1100; }
@keyframes po-gmax-aura {
  0%, 100% {
    filter: brightness(1.1) drop-shadow(0 0 5px #ff2200) drop-shadow(0 0 12px #ff0000);
  }
  50% {
    filter: brightness(1.35) drop-shadow(0 0 14px #ff5500) drop-shadow(0 0 30px #ff1100) drop-shadow(0 0 55px rgba(255,60,0,0.65));
  }
}
@keyframes po-gmax-card {
  0%, 100% { border-color: #bb0000; box-shadow: 0 0 25px rgba(210,20,0,0.75); }
  50%       { border-color: #ff3300; box-shadow: 0 0 55px rgba(255,60,0,0.95), 0 0 90px rgba(255,0,0,0.45); }
}
.pack-stars-gmax { color: #ff3300; animation: po-gmax-aura 1.2s ease-in-out infinite; }

@keyframes po-shimmer {
  0%, 100% { box-shadow: 0 0 22px rgba(208,144,32,0.5), 0 0 44px rgba(208,144,32,0.2); }
  50%       { box-shadow: 0 0 38px rgba(240,192,56,0.9), 0 0 70px rgba(240,192,56,0.4); }
}
@keyframes po-rainbow {
  0%   { border-color: #ff5050; box-shadow: 0 0 40px rgba(255,80,80,0.7); }
  20%  { border-color: #ffb030; box-shadow: 0 0 40px rgba(255,176,48,0.7); }
  40%  { border-color: #50ff80; box-shadow: 0 0 40px rgba(80,255,128,0.7); }
  60%  { border-color: #50c0ff; box-shadow: 0 0 40px rgba(80,192,255,0.7); }
  80%  { border-color: #c050ff; box-shadow: 0 0 40px rgba(192,80,255,0.7); }
  100% { border-color: #ff5050; box-shadow: 0 0 40px rgba(255,80,80,0.7); }
}

/* Reveal */
.po-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: scale(0.85) translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  min-height: 0;
}
.po-reveal.po-reveal-show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}
.po-reveal-inner {
  width: 160px;
  height: 210px;
  border-radius: 10px;
  border: 4px solid #555;
  background: #1a242e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
}
.po-reveal-inner.po-uncommon { border-color: #58a058; box-shadow: 0 0 52px rgba(88,160,88,0.6); }
.po-reveal-inner.po-rare     { border-color: #4878d0; box-shadow: 0 0 60px rgba(72,120,208,0.7); }
.po-reveal-inner.po-ultra    { border-color: #d09020; animation: po-shimmer 1.5s ease-in-out infinite; }
.po-reveal-inner.po-legendary { animation: po-rainbow 2s linear infinite; }
.po-reveal-sprite {
  width: 132px;
  height: 132px;
  image-rendering: pixelated;
  animation: po-float 2s ease-in-out infinite;
}
.po-reveal-sprite.po-shiny {
  filter: drop-shadow(0 0 6px #ffe060) drop-shadow(0 0 14px #ffa000);
}
.po-reveal-sprite.po-sprite-giant {
  animation: po-float-giant 2s ease-in-out infinite;
}
@keyframes po-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes po-float-giant {
  0%, 100% { transform: translateY(0) scale(1.4); }
  50%       { transform: translateY(-6px) scale(1.4); }
}
.po-reveal-origin-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #fff;
  padding: 4px 10px;
  border-radius: 3px;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
}
.po-reveal-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #f8f8f0;
  text-align: center;
  letter-spacing: 1px;
}
.po-reveal-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 1px;
}
.po-reveal-badge.po-common   { background: #444; color: #aaa; }
.po-reveal-badge.po-uncommon { background: #1a3a1a; color: #78c878; border: 1px solid #58a058; }
.po-reveal-badge.po-rare     { background: #1a2a4a; color: #88a8f0; border: 1px solid #4878d0; }
.po-reveal-badge.po-ultra    { background: #2a1e08; color: #f0c038; border: 1px solid #d09020; }
.po-reveal-badge.po-legendary { background: #1a0a2a; color: #fff; border: 1px solid #c050ff; }

.po-reveal-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.po-cant-afford {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #666;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.8;
}
.po-again-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 12px 20px;
  background: #3870c0;
  color: #fff;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000;
  cursor: pointer;
  transition: transform 0.08s;
  white-space: nowrap;
}
.po-again-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.po-again-btn:hover  { background: #4888d8; }
.po-continue-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 10px 20px;
  background: #383848;
  color: #a0b0c0;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000;
  cursor: pointer;
  transition: transform 0.08s;
  white-space: nowrap;
}
.po-continue-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.po-continue-btn:hover  { color: #f8f8f0; }

/* Legendary pack star row */
.pack-stars-legendary { color: #c050ff; animation: po-rainbow-text 2s linear infinite; }
@keyframes po-rainbow-text {
  0%   { color: #ff5050; } 20%  { color: #ffb030; }
  40%  { color: #50ff80; } 60%  { color: #50c0ff; }
  80%  { color: #c050ff; } 100% { color: #ff5050; }
}

/* ---- Dev panel ---- */
.dev-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(10, 6, 2, 0.95);
  border-top: 2px solid #d04848;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Press Start 2P', monospace;
}
.dev-panel-title {
  font-size: 8px;
  color: #d04848;
  letter-spacing: 1px;
  margin-right: 4px;
  flex-shrink: 0;
}
.dev-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 6px 10px;
  background: #1a0a0a;
  color: #f0a0a0;
  border: 2px solid #d04848;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.1s;
}
.dev-btn:hover { background: #3a1010; color: #fff; }
.dev-btn-exit { background: #2a0000; color: #ff6060; border-color: #ff4040; }
.dev-btn-exit:hover { background: #ff4040; color: #fff; }
.dev-pokegen {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #5a1010;
  padding-top: 8px;
  margin-top: 4px;
}
.dg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dg-input {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  background: #0e0606;
  color: #f0a0a0;
  border: 1px solid #d04848;
  padding: 4px 6px;
  outline: none;
}
.dg-level { width: 48px; }
.dg-ivs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dg-iv-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  color: #f0a0a0;
}
.dg-iv {
  width: 32px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  background: #0e0606;
  color: #f0a0a0;
  border: 1px solid #d04848;
  padding: 3px 4px;
  text-align: center;
  outline: none;
}
.dg-max-btn { font-size: 6px; padding: 4px 8px; }
.dg-spawn-btn { font-size: 6px; padding: 5px 10px; }
.dg-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #78e878;
}
.pack-queue-full {
  font-size: 6px;
  color: #f0a0a0;
  margin-top: 4px;
  font-family: 'Press Start 2P', monospace;
}
.dev-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: #1a0a0a;
  border: 2px solid #d04848;
  color: #f0a0a0;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 10px 18px;
  letter-spacing: 1px;
  animation: dev-toast-fade 1.8s ease forwards;
  pointer-events: none;
}
@keyframes dev-toast-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Mobile fixes ---- */
@media (max-width: 600px) {
  /* Topbar: grid layout — icon+title stacked over yen on left, controls on right */
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 6px 10px;
    column-gap: 8px;
    row-gap: 2px;
  }
  .topbar .title {
    grid-column: 1;
    grid-row: 1;
    font-size: 9px;
  }
  .topbar-yen {
    grid-column: 1;
    grid-row: 2;
    font-size: 8px;
    padding-left: 42px;
    color: var(--c-yellow);
    opacity: 0.85;
  }
  .topbar-right {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  #lucky-egg-display {
    grid-column: 1;
    grid-row: 3;
  }

  /* Hide the dex-dot (caught indicator) — it breaks centering of the wild name */
  .dex-dot { display: none; }

  /* Starter gen tabs: allow wrapping to 2 rows instead of overflowing */
  .starter-tabs {
    flex-wrap: wrap;
  }

  /* Side panel: leave room at top so Instagram's toolbar doesn't cover the X */
  .side-panel {
    padding-top: max(env(safe-area-inset-top, 0px), 44px);
  }

  /* Pokédex grid: 6 columns instead of 8 */
  .dex-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Nav: slightly bigger tap targets on mobile */
  .nav-btn {
    font-size: 8px;
    padding: 10px 4px;
    white-space: nowrap;
    letter-spacing: 0;
  }

  /* Encounter stage: shrink sprite so flavor text + buttons stay visible */
  .sprite-wrap {
    width: 130px;
    height: 130px;
  }
  .wild-sprite {
    width: 106px;
    height: 106px;
  }
  .encounter-stage {
    min-height: 60px;
    overflow: hidden;
  }

  /* Catch timing bar: taller touch target on mobile */
  .timing-bar {
    height: 48px;
  }

  /* Pokédex: smaller controls so more entries are visible */
  .dex-mode-tab {
    font-size: 6px;
    padding: 6px 2px;
    letter-spacing: 0;
  }
  .dex-summary {
    font-size: 7px;
    margin-bottom: 6px;
  }
  .dex-toggle {
    font-size: 7px;
    padding: 7px 10px;
    letter-spacing: 0;
  }
  .btn-milestones, .btn-origin {
    font-size: 7px;
    padding: 7px 10px;
    letter-spacing: 0;
  }
  .dex-search-input {
    font-size: 7px;
    padding: 6px 8px;
  }

  /* Training: BOX 1/2/3 label is white-on-white on the light panel — make it dark */
  .afk-pc-nav-label {
    color: var(--c-text);
  }
  .afk-pc-nav-btn {
    color: var(--c-text);
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.2);
  }

  /* Distortion world: restore light text on dark background (overrides training panel rule) */
  .distortion-scene .afk-pc-nav-label {
    color: var(--c-text-light);
  }
  .distortion-scene .afk-pc-nav-btn {
    color: var(--c-text-light);
    background: var(--c-bg-2);
    border-color: #000;
  }

  /* Distortion world: tighter grid on mobile, bigger sprites */
  .dt-pokemon-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .dt-card-sprite {
    width: 52px;
    height: 52px;
  }
  .distortion-scene {
    padding: 8px;
    gap: 8px;
  }
  .distortion-giratina-sprite {
    width: 60px;
    height: 60px;
  }
  .distortion-dialogue {
    font-size: 7px;
    padding: 6px 8px;
    min-height: 36px;
  }
}

/* ---- Save-progress banner (guests) ---- */
.save-banner {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  background: var(--c-panel-dark);
  border-top: var(--px) solid var(--c-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  z-index: 50;
}

.save-banner-text {
  font-size: 7px;
  color: var(--c-text-light);
  opacity: 0.8;
}

.save-banner-btn {
  background: var(--c-yellow);
  color: var(--c-bg-2);
  border: none;
  font-family: inherit;
  font-size: 7px;
  padding: 5px 10px;
  cursor: pointer;
  box-shadow: 0 2px 0 #a07820;
  flex-shrink: 0;
}

.save-banner-btn:hover { filter: brightness(1.1); }
.save-banner-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---- Auth Modal ---- */
.auth-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px;
  max-width: 300px;
  width: 100%;
}

.auth-logo {
  font-size: 14px;
  color: var(--c-yellow);
  letter-spacing: 2px;
}

.auth-sub {
  font-size: 7px;
  color: var(--c-text);
  opacity: 0.55;
  text-align: center;
  margin-bottom: 4px;
}

.auth-tabs {
  display: flex;
  width: 100%;
  border: var(--px) solid var(--c-bg-2);
  overflow: hidden;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 0;
  font-family: inherit;
  font-size: 8px;
  cursor: pointer;
  color: var(--c-text);
  opacity: 0.45;
}

.auth-tab.active {
  background: var(--c-panel-dark);
  color: var(--c-text-light);
  opacity: 1;
}

.auth-input {
  width: 100%;
  background: #fff;
  border: var(--px) solid var(--c-bg-2);
  padding: 9px 10px;
  font-family: inherit;
  font-size: 8px;
  color: var(--c-text);
  outline: none;
}

.auth-input:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px rgba(56,112,192,0.2);
}

.auth-error {
  font-size: 7px;
  color: var(--c-accent);
  text-align: center;
  min-height: 12px;
  line-height: 1.6;
}

.auth-btn { width: 100%; }

.auth-guest-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 7px;
  color: var(--c-text);
  opacity: 0.45;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 2px;
}

.auth-guest-btn:hover { opacity: 0.85; }

/* ---- Account badge (topbar) ---- */
.account-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-name {
  font-size: 8px;
  color: var(--c-text-light);
  opacity: 0.65;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-logout {
  background: none;
  border: var(--px) solid rgba(255,255,255,0.2);
  color: var(--c-text-light);
  font-family: inherit;
  font-size: 7px;
  padding: 2px 6px;
  cursor: pointer;
  opacity: 0.55;
}

.account-logout:hover {
  opacity: 1;
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.account-signup {
  background: none;
  border: var(--px) solid #f0c038;
  color: #f0c038;
  font-family: inherit;
  font-size: 7px;
  padding: 2px 6px;
  cursor: pointer;
  letter-spacing: 1px;
}
.account-signup:hover { background: rgba(240,192,56,0.15); }

/* ---- Topbar mute button ---- */
.topbar-mute-btn {
  background: none;
  border: var(--px) solid rgba(255,255,255,0.2);
  color: var(--c-text-light);
  font-family: inherit;
  font-size: 11px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 0.1s, border-color 0.1s;
  padding: 0;
}
.topbar-mute-btn:hover { opacity: 1; }
.topbar-mute-btn.muted {
  opacity: 0.4;
  border-color: rgba(208,72,72,0.5);
  color: var(--c-accent);
}

/* ---- Pokédex sticky header ---- */
.dex-sticky-header {
  position: sticky;
  top: 0;
  background: #f8f8f0;
  z-index: 200;
  padding-bottom: 8px;
  box-shadow: 0 2px 4px #f8f8f0;
}

/* ---- Network error banner ---- */
.network-error-banner {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #5c1a1a;
  border: var(--px) solid var(--c-accent);
  color: var(--c-text-light);
  font-family: inherit;
  font-size: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}

.network-error-retry {
  background: var(--c-accent);
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 7px;
  padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.network-error-retry:hover { opacity: 0.85; }

.network-error-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-family: inherit;
  font-size: 10px;
  padding: 0 4px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.network-error-dismiss:hover { color: #fff; }

/* ---- Leaderboard ---- */
.lb-sort-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.lb-sort-tab {
  flex: 1;
  font-family: inherit;
  font-size: 8px;
  letter-spacing: .06em;
  padding: 5px 4px;
  border: 2px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.5);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lb-sort-tab.active {
  background: var(--c-yellow);
  border-color: #b88a00;
  color: #1a1a24;
}
.lb-sort-active {
  font-weight: 700;
}
.lb-sort-active .lb-stat-label,
.lb-sort-active .lb-stat-val {
  opacity: 1 !important;
}

.lb-loading, .lb-empty {
  text-align: center;
  padding: 32px 16px;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
}

.lb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 12px;
}

.lb-card {
  background: #1e2a36;
  border: 2px solid rgba(255,255,255,0.07);
  padding: 10px 12px;
  position: relative;
}

.lb-card.lb-top3 {
  border-color: var(--rank-color, rgba(255,255,255,0.2));
  background: color-mix(in srgb, var(--rank-color, #fff) 6%, #1e2a36);
}

.lb-card.lb-self {
  border-color: var(--c-yellow) !important;
  background: rgba(240,192,56,0.85) !important;
}

.lb-card.lb-self .lb-username,
.lb-card.lb-self .lb-stat-val,
.lb-card.lb-self .lb-rank-num {
  color: #1a1a24 !important;
}

.lb-card.lb-self .lb-stat-label,
.lb-card.lb-self .lb-shiny-label {
  color: rgba(0,0,0,0.5) !important;
}

.lb-card.lb-self .lb-shiny-val {
  color: #7a4a00 !important;
}

.lb-card.lb-self .lb-slot-img,
.lb-card.lb-self .lb-slot-empty {
  background: rgba(0,0,0,0.15);
  border-color: rgba(0,0,0,0.15);
}

.lb-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lb-rank-col {
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.lb-rank-num {
  font-size: 8px;
  line-height: 1;
}

.lb-name-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-username {
  font-size: 9px;
  color: #f8f8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-team-row {
  display: flex;
  gap: 3px;
}

.lb-slot-img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
}

.lb-slot-empty {
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.04);
  opacity: 0.35;
}

.lb-stats-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.lb-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.lb-stat-label {
  font-size: 7px;
  color: rgba(255,255,255,0.4);
}

.lb-stat-val {
  font-size: 9px;
  color: #f8f8f0;
  min-width: 42px;
  text-align: right;
}

.lb-income-label { color: rgba(88,160,88,0.8); }
.lb-income-val   { color: #78d878; }
.lb-shiny-label  { color: rgba(240,192,56,0.6); }
.lb-shiny-val    { color: #f0c038; }

.lb-refresh-btn {
  display: block;
  margin: 8px auto 4px;
  font-size: 8px;
  padding: 6px 20px;
}

/* ---- PvP Battle ---- */
.pvp-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.pvp-input {
  flex: 1;
  font-family: inherit;
  font-size: 9px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.08);
  border: 2px solid rgba(0,0,0,0.18);
  color: inherit;
  outline: none;
  letter-spacing: .04em;
}
.pvp-input:focus { border-color: var(--c-yellow); }
.pvp-challenge-btn {
  font-size: 8px;
  padding: 8px 14px;
  white-space: nowrap;
}
.pvp-area { display: flex; flex-direction: column; gap: 10px; }
.pvp-loading, .pvp-error {
  text-align: center;
  padding: 24px;
  font-size: 9px;
  color: rgba(0,0,0,0.45);
}
.pvp-error { color: #c04040; }

/* Team rows */
.pvp-team-row { display: flex; flex-direction: column; gap: 4px; }
.pvp-team-label {
  font-size: 8px;
  letter-spacing: .1em;
  color: rgba(0,0,0,0.45);
}
.pvp-team-sprites {
  display: flex;
  gap: 4px;
}
.pvp-team-sprite {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: opacity .3s, filter .3s;
}
.pvp-team-sprite.pvp-fainted {
  opacity: 0.25;
  filter: grayscale(1);
}

/* Arena */
.pvp-arena {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.05);
  border: 2px solid rgba(0,0,0,0.1);
  padding: 10px 8px;
}
.pvp-vs {
  font-size: 11px;
  font-weight: 900;
  color: rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.pvp-fighter {
  flex: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.pvp-fighter-opp { flex-direction: row-reverse; text-align: right; }
.pvp-fighter-sprite {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.pvp-fighter-info { flex: 1; min-width: 0; }
.pvp-fighter-name {
  font-size: 8px;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.pvp-hp-bar-wrap {
  height: 6px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.15);
  margin-bottom: 2px;
}
.pvp-hp-bar-fill {
  height: 100%;
  background: #4caf82;
  transition: width .25s, background .25s;
}
.pvp-hp-bar-fill.mid { background: #e8b840; }
.pvp-hp-bar-fill.low { background: #d04040; }
.pvp-hp-label { font-size: 7px; color: rgba(0,0,0,0.4); }

/* Log */
.pvp-log {
  max-height: 120px;
  overflow-y: auto;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pvp-log-line {
  font-size: 8px;
  color: rgba(0,0,0,0.6);
  line-height: 1.4;
}

/* Result */
.pvp-result {
  text-align: center;
  padding: 12px;
  font-size: 11px;
  letter-spacing: .1em;
  border: 3px solid;
}
.pvp-win  { background: rgba(76,175,130,0.15); border-color: #4caf82; color: #2a7a50; }
.pvp-lose { background: rgba(200,60,60,0.1);   border-color: #c04040; color: #a03030; }

/* ---- Training ---- */
/* ---- Training: empty / loading states ---- */
.train-empty, .train-grid-empty {
  text-align: center;
  padding: 28px;
  font-size: 9px;
  color: rgba(0,0,0,0.38);
}
.train-select-header {
  font-size: 9px;
  color: var(--c-yellow);
  letter-spacing: .12em;
  text-align: center;
  padding: 8px 16px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.train-zone-empty {
  text-align: center;
  padding: 32px 16px;
  font-size: 9px;
  color: var(--c-yellow);
  letter-spacing: .08em;
  background: rgba(0,0,0,0.55);
  border: 2px dashed rgba(240,192,56,0.4);
  border-radius: 8px;
  margin: 24px 16px;
}
.train-zone-loading {
  text-align: center;
  padding: 28px;
  font-size: 9px;
  color: rgba(0,0,0,0.38);
}

/* ---- PC Section (top half) ---- */
.train-pc-section {
  margin-bottom: 14px;
}

.train-pc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}
.train-pc-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.train-pc-side--right {
  align-items: flex-end;
}
.train-pc-label {
  font-size: 6px;
  letter-spacing: .12em;
  color: rgba(0,0,0,0.6);
}
.train-btn-group {
  display: flex;
  gap: 4px;
}
.train-filter-btn, .train-sort-btn {
  font-family: inherit;
  font-size: 7px;
  letter-spacing: .07em;
  padding: 5px 8px;
  border: 2px solid rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.45);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.train-filter-btn.active, .train-sort-btn.active {
  background: var(--c-yellow, #f0c038);
  border-color: #b88a00;
  color: #1a1a24;
}

/* Mobile dropdowns */
.train-select {
  font-family: inherit;
  font-size: 8px;
  letter-spacing: .06em;
  padding: 5px 8px;
  border: 2px solid rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.55);
  cursor: pointer;
}
.train-desktop { display: flex; }
.train-mobile  { display: none; }
@media (max-width: 480px) {
  .train-desktop { display: none; }
  .train-mobile  { display: block; }
}

/* Picker grid — 5 columns, bigger cells */
.train-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}
.train-cell {
  aspect-ratio: 1;
  padding: 4px 3px 2px;
  background: rgba(0,0,0,0.05);
  border: 2px solid rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: border-color .13s, background .13s;
}
.train-cell:hover { border-color: rgba(0,0,0,0.28); background: rgba(0,0,0,0.08); }
.train-cell.selected { border-color: var(--c-yellow, #f0c038); background: rgba(240,192,56,0.12); }
.train-cell.shiny { border-color: rgba(240,192,56,0.4); }
.train-cell-sprite {
  width: 100%;
  max-width: 70px;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}
.train-cell-num { font-size: 7px; color: rgba(0,0,0,0.3); line-height: 1; }
.train-cell-loading { font-size: 13px; color: rgba(0,0,0,0.2); }

/* ---- Training zone (bottom half) ---- */
.train-zone {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.train-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.train-popup-box {
  background: var(--c-panel);
  border: var(--px) solid var(--c-bg-2);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}
.train-popup-close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 18px;
  color: var(--c-text);
  cursor: pointer;
  padding: 6px 10px;
  z-index: 1;
}

/* Encounter-style stage */
.train-stage {
  display: flex;
  align-items: stretch;
  border: var(--px) solid var(--c-bg-2);
  overflow: hidden;
}
.train-stage.shiny .train-stage-sprite-wrap {
  background: linear-gradient(135deg, #f8f060 0%, #f0c038 60%, #d89830 100%);
}

.train-stage-sprite-wrap {
  flex-shrink: 0;
  width: 150px;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to bottom, #f0c860 0%, #d8a040 100%);
}
.train-stage-sprite {
  width: 112px;
  height: 112px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: bob 1.2s steps(2) infinite;
}
.train-stage.shiny .train-stage-sprite {
  filter: drop-shadow(0 0 8px #ffe060) drop-shadow(0 0 14px #ffb030);
}

.train-stage-info {
  flex: 1;
  min-width: 0;
  background: var(--c-bg-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.train-stage-name {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: capitalize;
  color: var(--c-yellow);
}
.train-stage-types {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.train-type {
  font-size: 7px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.train-stage-level {
  font-size: 8px;
  color: rgba(255,255,255,0.45);
}
.train-exp-wrap {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
}
.train-exp-fill { height: 100%; background: #4a9eff; transition: width .2s; }
.train-exp-label { font-size: 7px; color: rgba(255,255,255,0.35); }

/* Berry button */
.train-berry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  background: #2a4a28;
  border: 3px solid #4a8a46;
  border-top: none;
  color: #a8e0a4;
  font-size: 10px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .1s;
}
.train-berry-btn:hover { background: #385c36; }
.train-berry-btn:active { transform: scale(0.98); }
.train-berry-btn.pop { animation: berry-pop .18s ease-out; }
@keyframes berry-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.train-berry-img { width: 32px; height: 32px; image-rendering: pixelated; }

/* Auto-feed bar */
.train-auto-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.train-auto-wrap {
  flex: 1; height: 5px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.1);
}
.train-auto-fill {
  height: 100%; background: #4a9eff;
  width: 0%; transition: width .05s linear;
}
.train-auto-label { font-size: 7px; color: rgba(0,0,0,0.32); white-space: nowrap; }

/* XP toast */
.train-toast {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%) translateY(0);
  font-size: 10px; letter-spacing: .06em;
  color: #4a9eff;
  pointer-events: none; opacity: 0;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
  background: rgba(14,10,4,0.88);
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 2px;
}
.train-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* Radar chart */
.afk-radar-wrap { display: flex; justify-content: center; padding: 6px 0 2px; position: relative; }
.afk-radar { display: block; overflow: visible; }
.afk-stats-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 8px; }

/* Stats ? tip button */
.afk-stat-tip-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.55);
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.afk-stat-tip-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Stats tip popup */
.afk-stat-tip-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.afk-stat-tip-popup {
  width: 100%;
  max-width: 240px;
  background: #1a1a2e;
  border: 1px solid rgba(74,158,255,0.35);
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  position: relative;
}
.afk-stat-tip-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.afk-stat-tip-close:hover { color: #fff; }
.afk-stat-tip-title {
  font-size: 7px;
  letter-spacing: 0.1em;
  color: #4a9eff;
  margin-bottom: 6px;
  text-align: center;
}
.afk-stat-tip-body {
  font-size: 7px;
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 8px;
  text-align: center;
}
.afk-stat-tip-body strong { color: #ddd; }
.afk-stat-tip-section { margin-bottom: 6px; }
.afk-stat-tip-label {
  font-size: 6px;
  letter-spacing: 0.1em;
  color: #666;
  margin-bottom: 3px;
}
.afk-stat-tip-compare {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  margin-bottom: 2px;
}
.afk-stat-tip-dom  { color: #ffe060; font-weight: bold; }
.afk-stat-tip-vs   { color: #555; font-size: 6px; }
.afk-stat-tip-sub  { color: #666; }
.afk-stat-tip-note { font-size: 6px; color: #888; }

/* TEAM section header row */
.afk-team-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 2px;
  padding: 0 2px;
}
.afk-team-section-label {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #555;
  font-family: inherit;
}
.afk-team-dots { display: none; }
.afk-stats-label { color: rgba(255,255,255,0.45); letter-spacing: .08em; }
.afk-stats-val { color: #f0f0e8; }
.afk-stats-coins { color: #78d878; }
.afk-stats-sprite { width: 72px; height: 72px; image-rendering: pixelated; }
.afk-stats-sprite.shiny { filter: drop-shadow(0 0 6px #ffe060); }
.afk-stats-name { font-size: 10px; color: var(--c-yellow, #f0c038); letter-spacing: 2px; margin: 4px 0 2px; }
.afk-picker-card-loading {
  font-size: 14px; color: rgba(255,255,255,0.2);
  height: 40px; display: flex; align-items: center; justify-content: center;
}

/* ---- Pokédex search bar ---- */
.dex-search-wrap {
  display: flex;
  margin-bottom: 8px;
}
.dex-search-input {
  flex: 1;
  font-family: inherit;
  font-size: 9px;
  padding: 8px 10px;
  background: var(--c-panel-dark);
  color: var(--c-text-light);
  border: var(--px) solid #444;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  letter-spacing: 1px;
  outline: none;
}
.dex-search-input::placeholder { color: #666; }
.dex-search-input:focus { border-color: var(--c-yellow); }

/* ---- Social Hub ---- */
.social-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.social-tab {
  flex: 1;
  font-family: inherit;
  font-size: 9px;
  padding: 10px 6px;
  background: var(--c-panel-dark);
  color: #d0d0c8;
  border: var(--px) solid #000;
  box-shadow: 0 var(--px) 0 #000;
  cursor: pointer;
  letter-spacing: 1px;
  text-align: center;
}
.social-tab.active {
  background: var(--c-yellow, #f0c038);
  color: #1a1a10;
}
.social-tab-locked {
  opacity: 0.55;
  cursor: default;
}
.social-lock { font-size: 10px; }
.social-body { display: flex; flex-direction: column; gap: 0; }

/* ---- Wonder Trade ---- */
.wonder-desc {
  font-size: 8px;
  color: #d8eaf0;
  line-height: 1.8;
  margin-bottom: 10px;
  text-align: center;
  background: rgba(0,0,0,0.75);
  border-radius: 4px;
  padding: 10px 14px;
}
.wonder-trade-btn {
  width: 100%;
  font-size: 11px;
  padding: 12px;
  margin-bottom: 12px;
}
.wonder-trade-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wonder-empty {
  font-size: 9px;
  color: #888;
  text-align: center;
  padding: 32px 16px;
}
.wonder-loading, .wonder-error {
  font-size: 9px;
  color: #a0b8c0;
  text-align: center;
  padding: 20px;
}
.wonder-error { color: #c04040; }
.wonder-result-area { min-height: 0; }
.wonder-result-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
}
.wonder-result-card-modal {
  max-width: 320px;
  width: 100%;
}
.wonder-result-dismiss {
  margin-top: 10px;
  width: 100%;
  font-size: 9px;
  letter-spacing: 2px;
}
.wonder-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--c-panel-dark);
  border: var(--px) solid #444;
  box-shadow: 0 var(--px) 0 #000;
}
.wonder-result-title {
  font-size: 10px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 2px;
}
.wonder-trade-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
}
.wonder-trade-sent {
  text-align: center;
  flex: 1;
}
.wonder-trade-sent-label {
  font-size: 6px;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.wonder-trade-sent-name {
  font-size: 8px;
  color: #d0d0c8;
  text-transform: capitalize;
}
.wonder-trade-sent-level {
  font-size: 6px;
  color: #666;
}
.wonder-trade-arrow {
  font-size: 20px;
  color: var(--c-yellow, #f0c038);
  flex-shrink: 0;
}
.wonder-trade-received {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.wonder-received-sprite-wrap {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wonder-received-sprite {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
  object-fit: contain;
  animation: wonder-pop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes wonder-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.wonder-received-name {
  font-size: 10px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 1px;
}
.wonder-received-level {
  font-size: 7px;
  color: #888;
}
.wonder-again-btn {
  font-size: 9px;
  padding: 8px 20px;
}

/* Wonder Trade — PC box overrides */
.wonder-pc-grid {
  margin-bottom: 10px;
}
.wonder-selectable {
  cursor: pointer;
}
.wonder-selectable:hover {
  border-color: #888 !important;
}
.wonder-selected {
  border-color: var(--c-yellow, #f0c038) !important;
  background: rgba(240,192,56,0.12) !important;
  box-shadow: 0 0 0 1px var(--c-yellow, #f0c038) !important;
}
.wonder-on-team {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* Wonder Trade — cooldown */
.wonder-cooldown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}
.wonder-cooldown-icon {
  font-size: 32px;
}
.wonder-cooldown-label {
  font-size: 8px;
  color: #a0b8c0;
  letter-spacing: 1px;
}
.wonder-cooldown-timer {
  font-size: 22px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 3px;
}

/* ══════════════════════════════════════════════════════
   LINK TRADE
   ══════════════════════════════════════════════════════ */

/* ── Shared layout ── */
.lt-lobby,
.lt-waiting,
.lt-selecting,
.lt-trade,
.lt-complete,
.lt-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 16px;
  width: 100%;
}

/* ── Buttons ── */
.lt-btn-primary {
  width: 100%;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 14px 0;
  background: var(--c-blue, #3870c0);
  color: #fff;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000;
  transition: transform 0.08s, box-shadow 0.08s;
}
.lt-btn-primary:hover { background: #4880d8; }
.lt-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

.lt-btn-join {
  font-size: 9px;
  padding: 12px 18px;
  background: var(--c-blue, #3870c0);
  color: #fff;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000;
  flex-shrink: 0;
  transition: transform 0.08s, box-shadow 0.08s;
}
.lt-btn-join:hover { background: #4880d8; }
.lt-btn-join:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

.lt-btn-ghost {
  font-size: 8px;
  letter-spacing: 1px;
  padding: 10px 24px;
  background: transparent;
  color: #a0b8c8;
  border: 2px solid #3a5068;
  transition: background 0.1s;
}
.lt-btn-ghost:hover { background: rgba(255,255,255,0.05); }

.lt-btn-yellow {
  width: 100%;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 14px 0;
  background: var(--c-yellow, #f0c038);
  color: #1a1200;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000, 0 0 18px rgba(240,192,56,0.4);
  animation: lt-glow-yellow 1.8s ease-in-out infinite alternate;
  transition: transform 0.08s, box-shadow 0.08s;
}
.lt-btn-yellow:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
@keyframes lt-glow-yellow {
  from { box-shadow: 0 4px 0 #000, 0 0 8px rgba(240,192,56,0.3); }
  to   { box-shadow: 0 4px 0 #000, 0 0 24px rgba(240,192,56,0.7); }
}

.lt-btn-green {
  width: 100%;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 14px 0;
  background: var(--c-green, #58a058);
  color: #fff;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000, 0 0 18px rgba(88,160,88,0.4);
  animation: lt-glow-green 1.4s ease-in-out infinite alternate;
  transition: transform 0.08s, box-shadow 0.08s;
}
.lt-btn-green:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
@keyframes lt-glow-green {
  from { box-shadow: 0 4px 0 #000, 0 0 8px rgba(88,160,88,0.3); }
  to   { box-shadow: 0 4px 0 #000, 0 0 28px rgba(88,160,88,0.75); }
}

.lt-confirm-btn {
  width: 100%;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 14px 0;
}
.lt-confirm-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Lobby ── */
.lt-hero-icon {
  font-size: 40px;
  margin-top: 8px;
  animation: lt-float 2.6s ease-in-out infinite;
}
@keyframes lt-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.lt-hero-title {
  font-size: 13px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 3px;
}
.lt-hero-sub {
  font-size: 7px;
  color: #a0b8c0;
  text-align: center;
  line-height: 2;
  margin-bottom: 4px;
}
.lt-field-label {
  font-size: 7px;
  color: #788898;
  letter-spacing: 2px;
  text-align: center;
}
.lt-section-box {
  width: 100%;
  background: #0d1820;
  border: 1px solid #2a3a4a;
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

/* Unified lobby card */
.lt-unified-card {
  width: 100%;
  background: #0d1820;
  border: 2px solid #2a3a4a;
  border-radius: 6px;
  overflow: hidden;
}
.lt-card-title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  gap: 6px;
}
.lt-card-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.lt-card-sep {
  position: relative;
  border-top: 1px solid #2a3a4a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lt-card-or {
  position: absolute;
  font-size: 7px;
  color: #4a6a7a;
  background: #0d1820;
  padding: 0 10px;
  letter-spacing: 2px;
}
.lt-input {
  width: 100%;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 10px 12px;
  background: #1a242e;
  color: var(--c-text-light, #f8f8f0);
  border: 2px solid #3a5068;
  outline: none;
  transition: border-color 0.15s;
}
.lt-input:focus { border-color: var(--c-yellow, #f0c038); }
.lt-divider {
  font-size: 7px;
  color: #4a6070;
  letter-spacing: 3px;
  margin: 2px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.lt-divider::before,
.lt-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #2a3a4a;
}
.lt-code-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
.lt-code-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;
}
.lt-error {
  font-size: 7px;
  color: #e06060;
  text-align: center;
  letter-spacing: 1px;
}

/* ── Waiting ── */
.lt-wait-label {
  font-size: 8px;
  color: #788898;
  letter-spacing: 2px;
  margin-top: 8px;
}
.lt-code-display {
  font-size: 22px;
  letter-spacing: 8px;
  color: var(--c-yellow, #f0c038);
  background: #1a242e;
  border: 3px solid var(--c-yellow, #f0c038);
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 0 1px #000, 0 0 16px rgba(240,192,56,0.2);
  user-select: all;
}
.lt-code-display:hover { background: rgba(240,192,56,0.1); box-shadow: 0 0 0 1px #000, 0 0 24px rgba(240,192,56,0.4); }
.lt-code-copied { color: #58c858 !important; border-color: #58c858 !important; }
.lt-code-display-sm { font-size: 16px; letter-spacing: 5px; padding: 10px 16px; }
.lt-copy-hint {
  font-size: 6px;
  color: #4a6070;
  letter-spacing: 1px;
}
.lt-wait-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.lt-wait-status-text {
  font-size: 8px;
  color: #a0b8c8;
  letter-spacing: 1px;
}
/* Animated dot spinner */
.lt-spinner { display: flex; gap: 5px; }
.lt-spinner span {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--c-yellow, #f0c038);
  border-radius: 50%;
  animation: lt-bounce 1.2s ease-in-out infinite both;
}
.lt-spinner span:nth-child(2) { animation-delay: 0.2s; }
.lt-spinner span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lt-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}

/* ── Selecting ── */
.lt-select-header {
  font-size: 8px;
  color: #a0b8c0;
  letter-spacing: 1px;
  text-align: center;
}
.lt-partner-name {
  color: var(--c-yellow, #f0c038);
}
.lt-select-prompt {
  font-size: 8px;
  color: #788898;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.lt-pc-grid {
  margin-bottom: 8px;
}
.lt-empty {
  font-size: 8px;
  color: #666;
  text-align: center;
  padding: 32px 16px;
}

/* ── Trade screen ── */
.lt-trade-title {
  font-size: 9px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 2px;
  margin-top: 4px;
}
.lt-arena {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 4px 0;
}
.lt-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #1a242e;
  border: 2px solid #2a3848;
  padding: 10px 6px 12px;
  min-width: 0;
}
.lt-side-label {
  font-size: 6px;
  color: #788898;
  letter-spacing: 2px;
}
.lt-side-name {
  font-size: 8px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 1px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.lt-side-sprite-wrap {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
.lt-side-sprite {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  object-fit: contain;
  animation: lt-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lt-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.lt-side-sprite-placeholder {
  font-size: 28px;
  color: #3a5068;
}
.lt-side-pname {
  font-size: 7px;
  color: #d8d8d0;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.lt-side-plevel {
  font-size: 6px;
  color: #788898;
}
.lt-side-empty {
  font-size: 7px;
  color: #4a6070;
  text-align: center;
  margin: 8px 0;
}
.lt-side-status {
  font-size: 6px;
  color: #4a6070;
  letter-spacing: 1px;
  margin-top: 4px;
}
.lt-status-yellow { color: var(--c-yellow, #f0c038); }
.lt-status-green  { color: var(--c-green, #58a058); }

.lt-vs {
  font-size: 24px;
  color: var(--c-yellow, #f0c038);
  align-self: center;
  flex-shrink: 0;
}

/* Action area */
.lt-action-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.lt-wait-msg {
  font-size: 7px;
  color: #788898;
  letter-spacing: 1px;
  text-align: center;
  padding: 8px 0;
}
.lt-yellow-waiting {
  font-size: 8px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 1px;
  text-align: center;
  padding: 10px 0;
  animation: lt-pulse 1.5s ease-in-out infinite;
}
.lt-green-waiting {
  font-size: 8px;
  color: var(--c-green, #58a058);
  letter-spacing: 1px;
  text-align: center;
  padding: 10px 0;
  animation: lt-pulse 1.5s ease-in-out infinite;
}
@keyframes lt-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── Complete ── */
.lt-complete-title {
  font-size: 12px;
  color: var(--c-yellow, #f0c038);
  letter-spacing: 2px;
  margin-top: 8px;
  animation: lt-float 2s ease-in-out infinite;
}
.lt-complete-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  margin: 8px 0;
}
.lt-complete-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #1a242e;
  border: 2px solid #2a3848;
  padding: 12px 8px;
}
.lt-complete-label {
  font-size: 6px;
  color: #788898;
  letter-spacing: 2px;
}
.lt-complete-sprite {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  object-fit: contain;
}
.lt-complete-recv-anim {
  animation: lt-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.lt-complete-arrow {
  font-size: 24px;
  color: var(--c-yellow, #f0c038);
  flex-shrink: 0;
}
.lt-complete-pname {
  font-size: 7px;
  color: #d8d8d0;
  letter-spacing: 1px;
}
.lt-complete-recv-name {
  color: var(--c-yellow, #f0c038);
}
.lt-complete-plevel {
  font-size: 6px;
  color: #788898;
}

/* ── Notice (disconnect / cancel) ── */
.lt-notice {
  padding: 32px 16px;
  text-align: center;
}
.lt-notice-icon {
  font-size: 36px;
}
.lt-notice-title {
  font-size: 10px;
  color: #e06060;
  letter-spacing: 2px;
}
.lt-notice-sub {
  font-size: 7px;
  color: #a0b8c0;
  line-height: 2;
}
.lt-level-warn {
  font-size: 7px;
  color: #f0c038;
  background: rgba(20,15,0,0.85);
  border: 1px solid rgba(240,192,56,0.6);
  padding: 8px 12px;
  line-height: 2;
  text-align: center;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISTORTION WORLD
   ═══════════════════════════════════════════════════════════════════════════ */

.distortion-scene {
  position: relative;
  background: radial-gradient(ellipse at 50% 30%, #2a0e4a 0%, #110a22 55%, #000 100%);
  border: 1px solid rgba(160, 80, 255, 0.25);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Trait info ? button ──────────────────────────────────────────────────── */
.dt-trait-info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(160, 80, 255, 0.15);
  border: 1.5px solid rgba(160, 80, 255, 0.55);
  color: #c080ff;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
  padding: 0;
}
.dt-trait-info-btn:hover {
  background: rgba(160, 80, 255, 0.3);
  border-color: #a050ff;
}

/* ── Trait info modal ─────────────────────────────────────────────────────── */
.dt-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.dt-info-box {
  background: #0e0518;
  border: 1px solid rgba(160,80,255,0.45);
  border-radius: 6px;
  padding: 16px;
  width: 560px;
  max-width: 95vw;
  max-height: 80vh;
  overflow-y: auto;
  font-family: 'Press Start 2P', monospace;
}
.dt-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #c080ff;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.dt-info-close {
  background: none;
  border: none;
  color: #c080ff;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.dt-info-close:hover { color: #fff; }
.dt-info-tier-header {
  font-size: 7px;
  letter-spacing: 0.08em;
  margin: 12px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 4px;
}
.dt-info-tier-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  padding: 8px 2px 6px;
  gap: 8px;
}
.dt-info-tier-toggle:hover { background: rgba(255,255,255,0.04); }
.dt-tier-arrow {
  font-size: 7px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.dt-info-tier-body {
  padding: 2px 0 4px;
}
.dt-info-trait-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-wrap: wrap;
}
.dt-info-trait-name {
  font-size: 7px;
  min-width: 90px;
  flex-shrink: 0;
}
.dt-info-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dt-info-chip {
  font-size: 6px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  color: #aaa;
}
.dt-info-chip.dt-eff-pos    { background: rgba(60,200,80,0.18);  color: #60e080; }
.dt-info-chip.dt-eff-neg    { background: rgba(220,60,60,0.18);  color: #e06060; }
.dt-info-chip.dt-eff-money  { background: rgba(240,192,56,0.18); color: #f0c038; }
.dt-info-chip.dt-eff-quirky { background: rgba(232,128,208,0.18); color: #e880d0; }

/* NPC row: Giratina sprite + dialogue side by side */
.distortion-npc-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.distortion-giratina-sprite {
  width: 80px;
  height: 80px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(140, 60, 255, 0.7));
  flex-shrink: 0;
}

.distortion-dialogue {
  background: rgba(10, 4, 24, 0.85);
  border: 1px solid rgba(160, 80, 255, 0.45);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 8px;
  color: #d0b0ff;
  line-height: 1.9;
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.distortion-balance {
  font-size: 8px;
  color: #f0c038;
  text-align: right;
  letter-spacing: 0.05em;
  transition: font-size 0.15s, text-align 0.15s;
}
.distortion-balance.dt-balance-detail {
  font-size: 14px;
  text-align: center;
  margin: 6px 0 2px;
  letter-spacing: 0.08em;
}

/* Section label */
.dt-section-label {
  font-size: 7px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(160, 80, 255, 0.2);
  padding-bottom: 4px;
}

/* Pokémon grid */
.dt-pokemon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.dt-pokemon-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.dt-pokemon-card:hover {
  background: rgba(160, 80, 255, 0.12);
  border-color: rgba(160, 80, 255, 0.5);
}
.dt-pokemon-card.selected {
  background: rgba(160, 80, 255, 0.18);
  border-color: #a050ff;
  box-shadow: 0 0 6px rgba(160, 80, 255, 0.4);
}
.dt-pokemon-card.has-trait {
  border-color: rgba(200, 160, 255, 0.3);
}

.dt-card-sprite {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}
.dt-card-name {
  font-size: 6px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  word-break: break-all;
  line-height: 1.4;
}
.dt-card-level {
  font-size: 6px;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.dt-card-trait {
  font-size: 5px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.dt-card-loading {
  font-size: 14px;
  color: rgba(255,255,255,0.3);
  padding: 8px 0;
}
.dt-no-pokemon {
  font-size: 8px;
  color: rgba(255,255,255,0.4);
  padding: 16px 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* Selected section */
.dt-selected-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dt-none-hint {
  font-size: 8px;
  color: #fff;
  text-align: center;
  padding: 8px 0;
}
.dt-selected-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 8px;
}
.dt-selected-sprite {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.dt-selected-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dt-selected-name {
  font-size: 8px;
  color: #f0eaff;
}
.dt-selected-level {
  font-size: 7px;
  color: #fff;
}
.dt-current-trait-row {
  font-size: 7px;
  color: #fff;
  line-height: 1.6;
}
.dt-no-trait {
  color: rgba(200,180,255,0.35);
}

/* Trait badges (color set inline via JS) */
.dt-trait-badge {
  font-weight: bold;
  font-size: inherit;
  letter-spacing: 0.04em;
}
.dt-trait-tier-label {
  font-size: 0.85em;
  opacity: 0.75;
}

.dt-afford-hint {
  font-size: 7px;
  color: #e05050;
  text-align: center;
}

/* Reroll button */
.dt-reroll-btn {
  background: linear-gradient(135deg, #4a1a7a, #2a0a4a);
  border: 1px solid rgba(160,80,255,0.6);
  color: #d0a0ff;
  font-family: inherit;
  font-size: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: 0.08em;
  transition: background 0.15s, box-shadow 0.15s;
  width: 100%;
}
.dt-reroll-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #6020a0, #3a1060);
  box-shadow: 0 0 10px rgba(160,80,255,0.4);
}
.dt-reroll-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dt-reroll-iv-btn {
  background: linear-gradient(135deg, #1a4a7a, #0a2a4a);
  border-color: rgba(80,160,255,0.6);
  color: #a0d0ff;
}
.dt-reroll-iv-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2060a0, #103060);
  box-shadow: 0 0 10px rgba(80,160,255,0.4);
}

/* IV reroll sub-section */
.dt-iv-divider {
  font-size: 7px;
  letter-spacing: 0.12em;
  color: #7090b0;
  text-align: center;
  padding-top: 6px;
  margin-top: 8px;
}
.dt-iv-reroll-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 4px 0;
  border-top: 1px solid rgba(80,160,255,0.2);
  border-left: 1px solid rgba(80,160,255,0.2);
}
.dt-iv-reroll-row {
  display: grid;
  grid-template-columns: 28px 38px 1fr;
  align-items: center;
  gap: 4px;
  background: rgba(80,160,255,0.04);
  border-right: 1px solid rgba(80,160,255,0.2);
  border-bottom: 1px solid rgba(80,160,255,0.2);
  padding: 5px 6px;
}
.dt-iv-reroll-label {
  font-size: 7px;
  color: #7090b0;
  white-space: nowrap;
}
.dt-iv-reroll-val {
  font-size: 8px;
  color: #c0d8f0;
  white-space: nowrap;
}
/* mode selector */
.dt-reroll-mode-header {
  font-size: 7px;
  color: #9080b8;
  letter-spacing: 0.15em;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 4px;
}
.dt-reroll-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dt-reroll-mode-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 10px 0;
  background: rgba(160,80,255,0.08);
  border: 1px solid rgba(160,80,255,0.25);
  color: #b070e8;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s, border-color 0.1s;
}
.dt-reroll-mode-btn:hover { background: rgba(160,80,255,0.18); }
.dt-reroll-mode-btn.active {
  background: rgba(160,80,255,0.28);
  border-color: rgba(160,80,255,0.65);
  color: #e0b0ff;
}
/* trait tier table */
.dt-tier-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0 4px;
}
.dt-tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  font-size: 7px;
}
.dt-tier-name { letter-spacing: 0.1em; }
.dt-tier-rate { color: rgba(255,255,255,0.45); }
.dt-iv-reroll-val.iv-hi { color: #ffe060; }
.dt-iv-reroll-val.iv-lo { color: #e04040; }
.dt-iv-lock-btn {
  font-family: inherit;
  font-size: 6px;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(80,160,255,0.12);
  border: 1px solid rgba(80,160,255,0.3);
  color: #80b0d8;
  letter-spacing: 0.05em;
  transition: background 0.1s, box-shadow 0.1s;
  flex-shrink: 0;
}
.dt-iv-lock-btn:hover {
  background: rgba(80,160,255,0.22);
  box-shadow: 0 0 6px rgba(80,160,255,0.3);
}
.dt-iv-lock-btn.locked {
  background: rgba(255,224,96,0.15);
  border-color: rgba(255,224,96,0.5);
  color: #ffe060;
}
.dt-iv-lock-btn.locked:hover {
  background: rgba(255,224,96,0.25);
}
.dt-iv-locked-tag {
  font-size: 6px;
  color: #ffe060;
  opacity: 0.7;
}

/* Roll section */
.dt-roll-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #0a0418;
  border: 1px solid rgba(160,80,255,0.3);
  border-radius: 4px;
  padding: 12px;
}
.dt-roll-section.hidden { display: none; }

/* ── Roll modal overlay ──────────────────────────────────────────────────── */
.dt-roll-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dt-roll-modal {
  background: #0a0418;
  border: 2px solid rgba(160,80,255,0.5);
  border-radius: 8px;
  padding: 20px 18px;
  max-width: 380px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 0 48px rgba(120,40,255,0.3);
}
.dt-roll-modal-title {
  font-size: 8px;
  color: #a080d0;
  letter-spacing: .1em;
  text-align: center;
  border-bottom: 1px solid rgba(160,80,255,0.25);
  padding-bottom: 10px;
}
.dt-reroll-again-btn {
  font-family: inherit;
  font-size: 7px;
  padding: 9px 8px;
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: .06em;
  border: 1px solid rgba(160,80,255,0.4);
  background: rgba(100,40,180,0.2);
  color: #c0a0ff;
  transition: opacity 0.15s, background 0.15s;
  width: 100%;
}
.dt-reroll-again-btn:hover:not(:disabled) { background: rgba(100,40,180,0.38); }
.dt-reroll-again-btn:disabled { opacity: 0.35; cursor: not-allowed; }

@keyframes dt-roll-flash {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.97); }
}
@keyframes dt-roll-pop {
  0%   { transform: scale(1);    letter-spacing: 0.08em; }
  40%  { transform: scale(1.6);  letter-spacing: 0.18em; }
  100% { transform: scale(1.3);  letter-spacing: 0.13em; }
}
.dt-rolling-name.locked {
  animation: dt-roll-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.dt-rolling-name {
  animation: dt-roll-flash 0.16s linear infinite;
  font-size: 13px;
  color: #c080ff;
  text-align: center;
  padding: 8px 0;
  letter-spacing: 0.08em;
}

.dt-roll-result {
  font-size: 8px;
  color: #e8d8ff;
  text-align: center;
  padding: 4px 0;
}

/* Stat diff table */
.dt-diff-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dt-diff-row {
  display: grid;
  grid-template-columns: 40px 56px 20px 56px 1fr;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  line-height: 1.6;
}
.dt-diff-stat  { color: #fff; }
.dt-diff-old   { color: rgba(255,255,255,0.55); text-align: right; }
.dt-diff-arrow { color: rgba(255,255,255,0.35); text-align: center; }
.dt-diff-new   { font-weight: bold; text-align: right; }
.dt-diff-delta { font-size: 9px; }
.dt-diff-up    { color: #60e080; }
.dt-diff-down  { color: #e06060; }
.dt-diff-same  { color: rgba(255,255,255,0.55); }
.dt-diff-obsessive {
  font-size: 10px;
  color: #e880d0;
  line-height: 1.8;
  font-style: italic;
}
.dt-diff-money {
  font-size: 10px;
  color: #f0c038;
  text-align: center;
  padding-top: 2px;
}

/* Confirm / cancel row */
.dt-confirm-row {
  display: flex;
  gap: 8px;
}
.dt-confirm-btn, .dt-cancel-btn {
  flex: 1;
  font-family: inherit;
  font-size: 8px;
  padding: 9px 8px;
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: 0.06em;
  border: 1px solid;
  transition: opacity 0.15s;
}
.dt-confirm-btn {
  background: rgba(60, 160, 80, 0.2);
  border-color: rgba(60,160,80,0.6);
  color: #80e0a0;
}
.dt-confirm-btn:hover { opacity: 0.85; }
.dt-cancel-btn {
  background: rgba(160, 60, 60, 0.15);
  border-color: rgba(160,60,60,0.5);
  color: #e08080;
}
.dt-cancel-btn:hover { opacity: 0.85; }

/* Search input */
.dt-search-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(160,80,255,0.3);
  border-radius: 4px;
  color: #e0d8f0;
  font-family: inherit;
  font-size: 8px;
  padding: 7px 10px;
  outline: none;
}
.dt-search-input::placeholder { color: rgba(200,160,255,0.35); }
.dt-search-input:focus { border-color: rgba(160,80,255,0.7); }

/* Box nav spacing inside distortion */
.dt-box-nav { margin: 0; }

/* ── Detail view ──────────────────────────────────────────────────────────── */
.dt-detail-view {
  position: relative;
}

.dt-back-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  background: rgba(20, 8, 40, 0.85);
  border: 1px solid rgba(160, 80, 255, 0.55);
  color: #c080ff;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 5px 9px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.15s, border-color 0.15s;
}
.dt-back-btn:hover {
  background: rgba(160, 80, 255, 0.22);
  border-color: #a050ff;
}

.dt-detail-scene {
  width: 100%;
  max-width: 622px;
  aspect-ratio: 622 / 366;
  position: relative;
  background: url('public/Distortion BG.png') center/cover no-repeat, radial-gradient(ellipse at 50% 40%, #2a0e4a 0%, #0e051d 55%, #000 100%);
  border: 1px solid rgba(160, 80, 255, 0.25);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.dt-detail-giratina {
  width: 45%;
  max-width: 200px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 24px rgba(160, 80, 255, 0.65));
  animation: dt-giratina-hover 3s ease-in-out infinite;
}

@keyframes dt-giratina-hover {
  0%   { transform: translateY(0px);   }
  30%  { transform: translateY(-8px);  }
  55%  { transform: translateY(-5px);  }
  75%  { transform: translateY(-10px); }
  100% { transform: translateY(0px);   }
}

.dt-detail-poke-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  width: 18%;
  max-width: 80px;
}

.dt-detail-poke-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,180,255,0.55) 0%, rgba(160,80,255,0.25) 40%, transparent 70%);
  animation: dt-poke-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dt-poke-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.12); }
}

.dt-detail-poke-sprite {
  position: relative;
  width: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.85));
  z-index: 1;
}

.dt-detail-poke-name {
  font-size: 7px;
  color: #e0d0ff;
  margin-top: 5px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px #000;
}

/* Empty PC slot */
.dt-card-empty {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.05);
  cursor: default;
  min-height: 64px;
}

/* Trait effect chips */
.dt-trait-effect {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.dt-effect-chip {
  font-size: 7px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.07);
}
.dt-eff-pos   { color: #60e080; border: 1px solid rgba(96,224,128,0.35); }
.dt-eff-neg   { color: #e06060; border: 1px solid rgba(224,96,96,0.35); }
.dt-eff-money { color: #f0c038; border: 1px solid rgba(240,192,56,0.35); }
.dt-eff-quirky { color: #e880d0; border: 1px solid rgba(232,128,208,0.35); font-style: italic; }

/* "Combined with origin" label between effect chips and diff table */
.dt-diff-label {
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  text-align: center;
  border-top: 1px solid rgba(160,80,255,0.15);
  padding-top: 6px;
  margin-top: 2px;
}

/* Money rate on selected Pokémon */
.dt-money-rate {
  font-size: 7px;
  color: #f0c038;
  margin-top: 2px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   mobile  : < 600px  (already handled above)
   tablet  : 600px – 1023px
   desktop : ≥ 1024px (MacBook / laptop / monitor)
   ============================================================ */

/* ---- Tablet (600px – 1023px): wider container, single-row nav ---- */
@media (min-width: 600px) {
  #app {
    max-width: 760px;
    margin: 16px auto;
    height: calc(100dvh - 32px);
  }

  /* Nav becomes 1 row → frees ~30px of vertical space */
  .bottom-nav {
    grid-template-columns: repeat(8, 1fr);
  }

  .nav-btn {
    font-size: 8px;
    padding: 9px 4px;
  }
}

/* ---- Desktop / MacBook (≥ 1024px): even wider + roomier UI ---- */
@media (min-width: 1024px) {
  #app {
    max-width: 920px;
    margin: 20px auto;
    height: calc(100dvh - 40px);
  }

  .nav-btn {
    font-size: 9px;
    padding: 10px 4px;
  }

  /* Encounter sprite: bigger on large screens */
  .sprite-wrap {
    width: 220px;
    height: 220px;
  }
  .wild-sprite {
    width: 176px;
    height: 176px;
  }

  /* Dex grid: more columns */
  .dex-grid {
    grid-template-columns: repeat(10, 1fr);
  }

  /* Queue: wider cells look better */
  .queue-strip {
    gap: 6px;
  }
}

/* ---- MacBook Air 15" / 1710×1080 and wider (≥ 1600px) ---- */
@media (min-width: 1600px) {
  #app {
    max-width: 1060px;
    margin: 20px auto;
    height: calc(100dvh - 40px);
  }

  .sprite-wrap {
    width: 300px;
    height: 300px;
  }
  .wild-sprite {
    width: 240px;
    height: 240px;
  }

  .dex-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* ---- Short-viewport: shared tightening (all ≥600px, ≤820px tall) ---- */
@media (max-height: 820px) and (min-width: 600px) {
  .queue-strip-wrap {
    padding: 3px 8px;
  }
  .queue-strip-label,
  .team-strip-label {
    margin-bottom: 2px;
  }
  .team-strip-wrap {
    padding: 2px 6px;
  }
  .nav-btn {
    padding: 6px 4px;
  }
}

/* ---- Short-viewport: tablet (600–1023px) — shrink sprite to fit ---- */
@media (max-height: 820px) and (min-width: 600px) and (max-width: 1023px) {
  .sprite-wrap {
    width: 130px;
    height: 130px;
  }
  .wild-sprite {
    width: 104px;
    height: 104px;
    top: 10px;
  }
}

/* ---- Short-viewport: desktop/MacBook (≥1024px) — big sprite ---- */
@media (max-height: 820px) and (min-width: 1024px) {
  /* Cap team and queue cell heights to free vertical space */
  .team-strip {
    aspect-ratio: unset;
    height: 88px;
  }
  .queue-cell {
    aspect-ratio: unset;
    height: 56px;
  }

  /* Big sprite for MacBook */
  .sprite-wrap {
    width: 190px;
    height: 190px;
  }
  .wild-sprite {
    width: 152px;
    height: 152px;
    top: 14px;
  }
}