/* ===== Pokegain styles ===== *
 * Pokémon Crystal / Gold "Bill's PC" pixel-art skin.
 * Press Start 2P for headers, VT323 for body, hard pixel edges, crystal-blue
 * dialog panels with gold trim. Pokeball animation = spin → pop-open → card.
 */

html { scroll-behavior: smooth; }

::selection { background: #ffd23f; color: #0d0820; }

/* Force solid section backgrounds — the shell-purple body backdrop should
 * never show through content. Any section without a bg falls to this. */
section, main, aside, header, footer, nav {
  background-color: #1f1340;
}
/* Overrides for sections that already declare a bg via Tailwind utility */
section.bg-panel,  main.bg-panel,  aside.bg-panel,  header.bg-panel  { background-color: #3a2a6e !important; }
section.bg-panel2, main.bg-panel2, aside.bg-panel2, header.bg-panel2 { background-color: #0e2240 !important; }
section.bg-ink,    main.bg-ink,    aside.bg-ink,    header.bg-ink    { background-color: #1f1340 !important; }
section.bg-ink2,   main.bg-ink2,   aside.bg-ink2,   header.bg-ink2   { background-color: #0d0820 !important; }

/* ============================================================
 * TEXT CONTRAST — no outline stacks (they made pixel fonts mush).
 * Inter is the body default at 16 px so it just reads cleanly on
 * the solid panel backgrounds. Pixel fonts only appear inside
 * solid chrome elements (gold menu bars, A/B buttons) where the
 * background contrast is high enough on its own.
 * ============================================================ */

body, .font-sans, .font-mono { text-shadow: none; }

/* Press Start 2P chrome — text already sits on its own solid bg
 * (gold menu bar, red live pill, etc) so no shadow needed. */
.pc-menu, .gb-dialog-title, .gba-btn, .live-pill { text-shadow: none; }

/* Brand wordmark — solid gold, no gradient, no fuzz */
.pg-grad {
  color: #ffd23f;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #ffd23f;
  filter: none;
}

/* ============================================================
 * GBA ATOMIC PURPLE SHELL — body backdrop
 *
 * Softer translucent-purple gradient. We keep the shell vibe but
 * cut the speckle + highlight intensity hard so light text reads
 * cleanly over it without needing huge text-shadow stacks.
 * ============================================================ */
.pc-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #4a3380 0%, #2e1d5c 60%, #1a1040 100%);
  background-attachment: fixed;
}
/* No speckle layer anymore — was bleeding into text. The header strip and
 * panels provide the visual texture instead. */
body > * { position: relative; z-index: 1; }

/* ============================================================
 * LCD SCREEN — apply to high-priority panels
 *
 * Deep teal LCD bg, purple shell-bezel border, soft inner glow
 * + horizontal scanline overlay. Read like a screen inside the
 * shell rather than just a card on the page.
 * ============================================================ */
.gba-lcd {
  background: #1a3658;
  color: #9dd4f5;
  border: 4px solid #1f1340;
  position: relative;
  box-shadow:
    inset 0 0 0 2px #6b4ba8,
    inset 0 0 28px rgba(0, 0, 0, 0.55),
    0 4px 0 #0d0820;
  image-rendering: pixelated;
}
.gba-lcd::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  z-index: 2;
}
.gba-lcd > * { position: relative; z-index: 3; }

/* ============================================================
 * GBC DIALOG BOX (kept from previous pass, color tuned for shell)
 * ============================================================ */

.gb-dialog {
  background: #fdfff0;
  color: #2a1d05;
  border: 3px solid #1f1340;
  box-shadow:
    inset 0 0 0 3px #fdfff0,
    inset 0 0 0 6px #c79400,
    inset 0 0 0 9px #fdfff0,
    4px 4px 0 #0d0820;
  padding: 14px 16px;
  position: relative;
  image-rendering: pixelated;
}
.gb-dialog .gb-dialog-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #2a1d05;
  background: #ffd23f;
  border: 2px solid #1f1340;
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 #1f1340;
}
.gb-dialog .gb-dialog-num {
  font-family: 'Press Start 2P', monospace;
  color: #1f1340;
  text-shadow: 2px 2px 0 #ffd23f, 4px 4px 0 #1f1340;
}

/* ============================================================
 * SECTION HEADER BARS — gold strip with A/B badge
 *
 * Wraps the existing .pc-menu, now decorated with a GBA A or B
 * badge to signal "this is interactive — press A" feel.
 * ============================================================ */

.pc-menu {
  background: linear-gradient(180deg, #ffd23f 0%, #c79400 100%);
  color: #1f1340;
  border: 2px solid #1f1340;
  padding: 5px 10px 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 #0d0820;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pc-menu::before {
  content: "▶";
  color: #d34a4a;
  animation: pcCursor 700ms steps(1) infinite;
}
@keyframes pcCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.pc-menu-mini {
  background: transparent;
  color: #ffd23f;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.pc-menu-mini::before { content: "▶"; color: #d34a4a; margin-right: 4px; }

/* ============================================================
 * A / B CIRCLE BUTTONS — the primary CTA language
 *
 * Mimics the GBA's iconic A (red, top-right) and B (green,
 * bottom-left) circular buttons. Use as:
 *   <button class="gba-btn gba-a">…</button>
 *   <button class="gba-btn gba-b">…</button>
 *
 * Each has a letter badge baked into the button via ::before.
 * Wraps inline text on the right via a flexbox container.
 * ============================================================ */

.gba-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 6px;
  height: 38px;
  border: 2px solid #0d0820;
  border-radius: 999px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fdfff0;
  background: #1f1340;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    inset 0 3px 0 rgba(255, 255, 255, 0.18),
    2px 2px 0 #0d0820;
  transition: transform 60ms ease, box-shadow 60ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.gba-btn:hover { filter: brightness(1.05); }
.gba-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.45),
    inset 0 3px 0 rgba(255, 255, 255, 0.18),
    0 0 0 #0d0820;
}
.gba-btn::before {
  content: attr(data-key);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  color: #fdfff0;
  border: 2px solid #0d0820;
  box-shadow:
    inset -2px -3px 0 rgba(0, 0, 0, 0.4),
    inset 2px 2px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}
.gba-a::before {
  background: radial-gradient(circle at 35% 35%, #ff8888 0%, #d34a4a 50%, #8a1f1f 100%);
}
.gba-b::before {
  background: radial-gradient(circle at 35% 35%, #8effd0 0%, #4ae8a8 50%, #1f8868 100%);
}

/* Standalone tiny A / B badge — for inline accents (chips, lists, hints).
   Use <span class="gba-chip gba-a"></span>  with no children. */
.gba-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #0d0820;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #fdfff0;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  vertical-align: middle;
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.4),
    inset 2px 2px 0 rgba(255, 255, 255, 0.35);
}
.gba-chip.gba-a::after { content: "A"; }
.gba-chip.gba-b::after { content: "B"; }
.gba-chip.gba-a { background: radial-gradient(circle at 35% 35%, #ff8888 0%, #d34a4a 50%, #8a1f1f 100%); }
.gba-chip.gba-b { background: radial-gradient(circle at 35% 35%, #8effd0 0%, #4ae8a8 50%, #1f8868 100%); }

/* ============================================================
 * D-PAD CORNER ACCENT — decorative arrows around the LCD
 * ============================================================ */

.dpad {
  display: inline-grid;
  grid-template-columns: repeat(3, 14px);
  grid-template-rows: repeat(3, 14px);
  gap: 2px;
  color: #1f1340;
}
.dpad span {
  background: linear-gradient(180deg, #4a3380 0%, #2a1860 100%);
  border: 1px solid #0d0820;
  color: #b59ee8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
}
.dpad .dp-c { background: transparent; border: none; }

/* ============================================================
 * GBC DIALOG BOX
 *
 * Use for high-value data the way Pokémon Crystal uses cream
 * dialog overlays inside the game screen: countdown card, card
 * reveal pane, wallet lookup results. Double-border, drop shadow.
 * ============================================================ */

.gb-dialog {
  background: #fdfff0;
  color: #2a1d05;
  border: 3px solid #2a1d05;
  box-shadow:
    /* inner gold band (Crystal title-screen vibe) */
    inset 0 0 0 3px #fdfff0,
    inset 0 0 0 6px #c79400,
    inset 0 0 0 9px #fdfff0,
    /* chunky drop shadow */
    4px 4px 0 #080a26;
  padding: 14px 16px;
  position: relative;
  image-rendering: pixelated;
}
.gb-dialog .gb-dialog-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #2a1d05;
  background: #ffd23f;
  border: 2px solid #2a1d05;
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 #2a1d05;
}
.gb-dialog .gb-dialog-num {
  font-family: 'Press Start 2P', monospace;
  color: #2a1d05;
  text-shadow: 2px 2px 0 #c79400;
}

/* ============================================================
 * MENU BAR — gold-on-navy header rectangles
 *
 * Replaces the muted "▼ POKéBALL SPIN" labels with a chunky gold
 * menu bar that reads like the row items in Bill's PC.
 * ============================================================ */

.pc-menu {
  background: linear-gradient(180deg, #ffd23f 0%, #c79400 100%);
  color: #2a1d05;
  border: 2px solid #080a26;
  padding: 5px 10px 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 #080a26;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pc-menu::before {
  /* blinking ▶ red selection cursor */
  content: "▶";
  color: #e74c3c;
  animation: pcCursor 700ms steps(1) infinite;
}
@keyframes pcCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Variant — quieter, used for nested headers */
.pc-menu-mini {
  background: transparent;
  color: #ffd23f;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.pc-menu-mini::before { content: "▶"; color: #e74c3c; margin-right: 4px; }

/* Pixel-rendering on everything that should look crisp */
img, .logo-pball, .pokeball, .pc-pix { image-rendering: pixelated; }

/* Press Start 2P is the chrome font — used at 7-10 px on solid bgs */
.font-display {
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* Body text — Inter, comfortable size */
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Font alias classes — both `font-mono` and `font-sans` now use Inter so
 * legacy markup that used either still reads cleanly. */
.font-mono { font-family: 'Inter', system-ui, sans-serif; }
.font-sans { font-family: 'Inter', system-ui, sans-serif; }
/* Opt-in pixel font for terminal-style content (bot feed log lines) */
.font-pixel { font-family: 'VT323', monospace; font-size: 17px; letter-spacing: 0.02em; }

/* Bump the small Tailwind text-[Npx] utilities up to actually-readable sizes
 * (Inter at 9 px is microscopic). */
.text-\[9px\]  { font-size: 11px !important; }
.text-\[10px\] { font-size: 12px !important; }
.text-\[11px\] { font-size: 13px !important; }
.text-\[12px\] { font-size: 14px !important; }
.text-\[13px\] { font-size: 15px !important; }
.text-\[14px\] { font-size: 16px !important; }
/* Press Start 2P needs the opposite — clamp the chrome sizes small */
.font-display.text-\[9px\],
.font-display.text-\[10px\] { font-size: 8px !important; }
.font-display.text-\[11px\],
.font-display.text-\[12px\] { font-size: 9px !important; }
.font-display.text-\[13px\],
.font-display.text-\[14px\],
.font-display.text-sm        { font-size: 10px !important; }

/* White-with-opacity utilities — bumped to a brighter shell-lilac with high
 * contrast (the prior rgba alphas were too dim against the dark purple). */
.text-white\/55, .text-white\/60, .text-white\/65, .text-white\/70 { color: #d9c9f0 !important; }
.text-white\/80, .text-white\/90 { color: #f5edff !important; }

/* live pulse dot */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.live-pulse { animation: live-pulse 1.4s ease-in-out infinite; }

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ============================================================
 * MINI POKEBALL — header logo
 * Red top / gold bottom (Crystal+Gold mash), pixel-crisp.
 * ============================================================ */

.logo-pball {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid #000;
  background: #fff8e0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 1px 0 #000;
}
.logo-pball .lpb-top  { position: absolute; left: 0; right: 0; top: 0;    height: 50%; background: #f87171; }
.logo-pball .lpb-bot  { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #f7c948; }
.logo-pball .lpb-band { position: absolute; left: 0; right: 0; top: 50%;  height: 3px; margin-top: -1.5px; background: #000; }
.logo-pball .lpb-btn  { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff8e0; border: 1.5px solid #000; border-radius: 50%; }

/* ============================================================
 * DRAW REEL (idle scrolling wallets)
 * ============================================================ */

#reelStage { position: relative; }

.reel-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.blob-a {
  width: 130%; height: 180%;
  top: -40%; left: -15%;
  background: radial-gradient(circle, rgba(167, 134, 224, 0.40) 0%, transparent 65%);  /* purple shell */
  animation: blobA 7s ease-in-out infinite;
}
.blob-b {
  width: 100%; height: 140%;
  top: -20%; left: 10%;
  background: radial-gradient(circle, rgba(92, 212, 224, 0.32) 0%, transparent 60%);   /* LCD cyan */
  animation: blobB 5.5s ease-in-out infinite;
}
.blob-c {
  width: 80%; height: 120%;
  top: 10%; left: 30%;
  background: radial-gradient(circle, rgba(74, 232, 168, 0.28) 0%, transparent 55%);   /* B-button mint */
  animation: blobC 9s ease-in-out infinite;
}
#reelStage.spinning .blob-a { animation-duration: 1.2s; }
#reelStage.spinning .blob-b { animation-duration: 0.9s; }
#reelStage.spinning .blob-c { animation-duration: 1.5s; }

@keyframes blobA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(8%, -6%) scale(1.08); }
}
@keyframes blobB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-10%, 8%) scale(1.05); }
}
@keyframes blobC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(6%, 10%) scale(1.1); }
}

.reel-fade-top, .reel-fade-bot {
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  z-index: 2;
  pointer-events: none;
}
.reel-fade-top { top: 0;    background: linear-gradient(180deg, #06091f 0%, transparent 100%); }
.reel-fade-bot { bottom: 0; background: linear-gradient(0deg,   #06091f 0%, transparent 100%); }

.reel-center-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 28px;
  margin-top: -14px;
  border-top:    1px solid rgba(247, 201, 72, 0.35);
  border-bottom: 1px solid rgba(247, 201, 72, 0.35);
  background: linear-gradient(90deg, rgba(247, 201, 72, 0.06), rgba(92, 184, 196, 0.06));
  z-index: 3;
}

.reel-track { position: relative; z-index: 1; will-change: transform; }
.reel-track .reel-row {
  height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 16px;
  letter-spacing: 0.18em;
  opacity: 0.85;
  user-select: none;
  white-space: nowrap;
}
.reel-track.loop { animation: reelLoop 14s linear infinite; }
@keyframes reelLoop { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ============================================================
 * SPARKLES (overlay layer above the reel/pokeball)
 * ============================================================ */

.sparkle-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.sparkle {
  position: absolute; width: 14px; height: 14px;
  opacity: 0;
  animation: sparkleFly 1100ms ease-out forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 6px currentColor);
}
.sparkle svg { display: block; width: 100%; height: 100%; }
.sparkle.sx-emerald { color: #a3e635; }
.sparkle.sx-violet  { color: #a78bfa; }
.sparkle.sx-cyan    { color: #5cb8c4; }
.sparkle.sx-magenta { color: #e879f9; }
.sparkle.sx-gold    { color: #f7c948; }

@keyframes sparkleFly {
  0%   { transform: translate(0, 0) scale(0.2) rotate(0deg);   opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.4) rotate(220deg); opacity: 0; }
}
.sparkle.burst {
  width: 22px; height: 22px;
  animation-duration: 1800ms;
  animation-timing-function: cubic-bezier(0.18, 0.7, 0.3, 1);
}

/* ============================================================
 * POKEBALL — the star of the show
 *
 * Layout:
 *   .pokeball-stage          full-cover overlay inside #reelStage
 *     .pokeball              160x160 pixel-art pokeball
 *       .pb-top              red upper half
 *       .pb-bot              gold lower half  (note: gold, not white — keeping
 *                            on-brand for $POKEGAIN even though canon = white)
 *       .pb-band             black equator band
 *       .pb-btn              white center button
 *       .pb-flash            white burst on open
 *       .pb-shadow           drop shadow on the floor
 *     .pb-card               the card that emerges from inside
 *
 * Phases (controlled by classes added by JS):
 *   .dropping   → pokeball falls in from above
 *   .spinning   → fast vertical-axis rotation + bounce
 *   .wobble     → slow side-to-side rock before the open
 *   .opening    → top/bot fly apart, flash, sparkles
 *   .pb-card.show → card scales up from inside
 * ============================================================ */

.pokeball-stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
  pointer-events: none;
}
.pokeball-stage.hidden { display: none; }

.pokeball {
  position: relative;
  width: 160px;
  height: 160px;
  transform-style: preserve-3d;
}

.pb-top, .pb-bot {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  border: 5px solid #000;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.0);
  /* hard pixel edges */
  image-rendering: pixelated;
}
.pb-top {
  top: 0;
  background:
    radial-gradient(circle at 32% 32%, #ffb3b3 0%, #f87171 35%, #c44343 100%);
  border-radius: 80px 80px 0 0;
  border-bottom: none;
  /* simulate big pixel highlight */
  box-shadow: inset 14px 14px 0 -8px rgba(255, 255, 255, 0.5);
}
.pb-bot {
  bottom: 0;
  background:
    radial-gradient(circle at 32% 68%, #fde68a 0%, #f7c948 40%, #a17812 100%);
  border-radius: 0 0 80px 80px;
  border-top: none;
  box-shadow: inset 14px 14px 0 -8px rgba(255, 255, 255, 0.5);
}

.pb-band {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 14px;
  margin-top: -7px;
  background: #000;
  z-index: 3;
  /* faint highlight on the band */
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12);
}

.pb-btn {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fff8e0 60%, #a8a193 100%);
  border: 5px solid #000;
  border-radius: 50%;
  z-index: 4;
  box-shadow:
    inset 0 -4px 6px rgba(0, 0, 0, 0.25),
    0 0 0 3px #fff8e0,
    0 0 0 5px #000;
}

.pb-shadow {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 140px;
  height: 14px;
  margin-left: -70px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}

.pb-flash {
  position: absolute;
  inset: -100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 248, 224, 0.7) 30%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* ----- Phase: drop in ----- */
.pokeball-stage.dropping .pokeball {
  animation: pbDrop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pbDrop {
  0%   { transform: translateY(-240px) scale(0.5); opacity: 0; }
  60%  { transform: translateY(20px) scale(1.12); opacity: 1; }
  80%  { transform: translateY(-6px) scale(0.95); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ----- Phase: spinning fast ----- */
.pokeball.spinning {
  animation:
    pbSpin 360ms linear infinite,
    pbBounce 600ms ease-in-out infinite alternate;
}
@keyframes pbSpin  { from { transform: rotate(0deg);   } to { transform: rotate(360deg); } }
@keyframes pbBounce { from { translate: 0 -10px; } to { translate: 0 8px; } }

/* ----- Phase: slow wobble before open ----- */
.pokeball.wobble {
  animation: pbWobble 120ms ease-in-out infinite alternate;
}
@keyframes pbWobble { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* ----- Phase: pop open ----- */
.pokeball.opening .pb-top {
  animation: pbTopOpen 650ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pokeball.opening .pb-bot {
  animation: pbBotOpen 650ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pokeball.opening .pb-btn {
  animation: pbBtnFade 280ms ease forwards;
}
.pokeball.opening .pb-band {
  animation: pbBtnFade 280ms ease forwards;
}
.pokeball.opening .pb-flash {
  animation: pbFlash 700ms ease forwards;
}
.pokeball.opening .pb-shadow {
  animation: pbShadowFade 700ms ease forwards;
}
@keyframes pbTopOpen { to { transform: translateY(-160px) rotate(-22deg) scale(1.05); opacity: 0; } }
@keyframes pbBotOpen { to { transform: translateY(160px)  rotate(22deg)  scale(1.05); opacity: 0; } }
@keyframes pbBtnFade { to { transform: scale(2.2); opacity: 0; } }
@keyframes pbFlash   { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pbShadowFade { to { opacity: 0; } }

/* ----- The card that pops out ----- */
.pb-card {
  position: absolute;
  width: 168px;
  height: 234px;
  border: 4px solid #000;
  background: #0a0e2a;
  overflow: hidden;
  box-shadow:
    0 0 0 4px #f7c948,
    0 0 24px rgba(247, 201, 72, 0.7),
    0 0 48px rgba(92, 184, 196, 0.5);
  image-rendering: pixelated;
  z-index: 7;
}
.pb-card.hidden { display: none; }
.pb-card.show   { animation: cardEmerge 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.pb-card img    { width: 100%; height: 100%; object-fit: contain; background: #000; }

@keyframes cardEmerge {
  0%   { transform: scale(0.15) rotate(-25deg) translateY(20px); opacity: 0; }
  50%  { transform: scale(1.15) rotate(8deg)  translateY(-10px); opacity: 1; }
  100% { transform: scale(1)    rotate(0deg)  translateY(0);     opacity: 1; }
}

/* ============================================================
 * MISC — feed tabs, gallery cards, FAQ
 * ============================================================ */

.feed-tab.active {
  border-color: rgba(247, 201, 72, 0.5);
  color: #f7c948;
}

.grail-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.grail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(247, 201, 72, 0.3);
}

.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary .faq-chev { transform: rotate(90deg); }
.faq-chev { transition: transform 160ms ease; display: inline-block; }

/* scrollbar */
.bot-feed::-webkit-scrollbar { width: 6px; }
.bot-feed::-webkit-scrollbar-track { background: transparent; }
.bot-feed::-webkit-scrollbar-thumb { background: rgba(255, 210, 63, 0.4); border-radius: 0; }

/* ============================================================
 * SELECTION CURSOR — show a blinking ▶ next to interactive rows
 * ============================================================ */

.menu-row {
  position: relative;
  padding-left: 1.5em;
}
.menu-row::before {
  content: "▶";
  color: #e74c3c;
  position: absolute;
  left: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  font-size: 0.85em;
}
.menu-row:hover::before { opacity: 1; }

/* Buttons get a GB feel: chunky border, 2px drop shadow that pops on press */
button, .btn-pc {
  transition: transform 60ms ease, box-shadow 60ms ease;
}
button:active, .btn-pc:active {
  transform: translate(2px, 2px);
}

/* ============================================================
 * CRYSTAL SHINY SPRITES
 *
 * Pixel-art sprites from Pokémon Crystal (gen-II shiny variants
 * via PokeAPI's sprite repo). Used as tasteful decorative
 * accents — top nav, section headers, hero corner — never the
 * focal element. Idle bob animation gives them a "trainer
 * follows you" feel without being distracting.
 * ============================================================ */
.shiny-sprite {
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
  animation: shinyBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 0 rgba(13, 8, 32, 0.45));
}
/* Showdown ani GIFs are native ~64-96 px; downscale to keep them tasteful.
 * `object-fit: contain` so they don't squish if the container clips them. */
.shiny-sprite { object-fit: contain; }
.shiny-sprite.sm { width: 32px; height: 32px; }
.shiny-sprite.md { width: 48px; height: 48px; }
.shiny-sprite.lg { width: 72px; height: 72px; }
.shiny-sprite.xl { width: 96px; height: 96px; }

/* Stagger so multiple sprites on screen don't bob in lockstep */
.shiny-sprite.delay-1 { animation-delay: 0.4s; }
.shiny-sprite.delay-2 { animation-delay: 0.8s; }
.shiny-sprite.delay-3 { animation-delay: 1.2s; }

@keyframes shinyBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Faint sparkle ring behind important sprites (Suicune, Mewtwo) */
.shiny-aura {
  position: relative;
  display: inline-block;
}
.shiny-aura::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  animation: shinyAura 2s ease-in-out infinite alternate;
}
@keyframes shinyAura {
  from { opacity: 0.4; transform: scale(0.85); }
  to   { opacity: 0.9; transform: scale(1.1); }
}

/* Header strip "LIVE · AUTOMATED" pill — give it real chrome */
.live-pill {
  background: #e74c3c;
  color: #fdfff0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 4px 7px 3px;
  border: 2px solid #0d0820;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 #0d0820;
}

/* ============================================================
 * MOBILE BREAKPOINTS
 *
 * Press Start 2P is wide — at small viewports the section labels
 * overflow, A/B buttons crowd the header, and the d-pad clutters
 * the spin hint. Shrink chrome aggressively under 640px.
 * ============================================================ */

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Press Start 2P labels — shrink, tighten letter-spacing,
   * allow wrap when they have to */
  .pc-menu {
    font-size: 7px;
    padding: 4px 6px 3px;
    letter-spacing: 0.04em;
    box-shadow: 2px 2px 0 #0d0820;
    white-space: normal;
    line-height: 1.4;
  }

  /* Mid-size headings */
  .font-display.text-2xl, .font-display.text-3xl, .font-display.text-4xl {
    font-size: 18px !important;
    line-height: 1.25;
  }

  /* GBA A/B buttons — smaller pill, smaller letter circle */
  .gba-btn {
    height: 32px;
    font-size: 7px;
    padding: 0 9px 0 3px;
    gap: 7px;
  }
  .gba-btn::before {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  /* Hide decorative d-pad on phones — saves precious header width */
  .dpad { display: none !important; }

  /* Tighten section paddings throughout */
  .px-8 { padding-left: 14px !important; padding-right: 14px !important; }
  .py-14 { padding-top: 28px !important; padding-bottom: 28px !important; }
  .py-10, .py-8 { padding-top: 20px !important; padding-bottom: 20px !important; }
  .px-6 { padding-left: 12px !important; padding-right: 12px !important; }

  /* Reel stage — reduce height + margin for phones */
  #reelStage { height: 220px !important; margin: 6px !important; }
  .pokeball { width: 124px; height: 124px; }

  /* Card reveal — keep landed card from overflowing */
  #reelLanded { padding: 14px !important; }
  #landedCardImg { max-width: 140px !important; }

  /* Bot feed terminal — smaller font on mobile */
  #botFeed { font-size: 13px !important; }
  #botFeed .text-\[11px\] { font-size: 12px !important; }

  /* GBC dialog box — slightly smaller */
  .gb-dialog { padding: 10px 12px; }
  .gb-dialog .gb-dialog-title { font-size: 8px; }
  .font-display.text-4xl.tabular-nums { font-size: 26px !important; }
}

/* Slightly more spacious tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  .pc-menu { font-size: 8px; }
  .gba-btn { font-size: 7px; padding: 0 10px 0 4px; }
}

/* ============================================================
 * STAT TICKER BAR — keep it slim on every viewport
 *
 * The first row of the header is now a single-line scrollable
 * data ticker. Make sure it never grows past ~36-40 px tall.
 * ============================================================ */
@media (max-width: 640px) {
  /* The mobile padding makes the bar ~32 px tall. */
  section > .flex.items-center.gap-2.overflow-x-auto {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  /* Tagline block: shrink padding hard on mobile so the whole header is
     ~120 px tall instead of the old ~480 px. */
  section > .flex.flex-col.lg\:flex-row {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
}