@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg: #0a0c0a;
  --bg-raised: #12150f;
  --line: #23281f;
  --lime: #c4f42a;
  --fire: #ff6b4a;
  --water: #4ad9ff;
  --grass: #4ade80;
  --electric: #ffd447;
  --fairy: #ff8fd1;
  --text: #eef0e7;
  --text-dim: #8b9385;
  --text-faint: #565f52;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; min-height:100vh; }
body{ display:flex; justify-content:center; padding:32px 16px 64px; }
.stage{ width:100%; max-width:480px; }

.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--lime); text-transform:uppercase; margin-bottom:8px; }
h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:32px; letter-spacing:-.01em; line-height:1.05; }
h1.section-h1{ font-size:24px; margin-bottom:16px; }
.tagline{ color:var(--text-dim); font-size:14.5px; margin-top:10px; line-height:1.5; max-width:none; text-align:justify; text-align-last:center; }
#legendaryIntroDesc{ hyphens:none; -webkit-hyphens:none; }
#legendaryIntroName{ text-transform:capitalize; }

button{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; letter-spacing:.02em; cursor:pointer; border:none; border-radius:10px; transition:transform .12s ease, opacity .12s ease; }
button:active{ transform:scale(0.97); }
button:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
button:disabled{ opacity:.35; cursor:default; }
.btn-primary{ width:100%; padding:16px; background:var(--lime); color:#0a0c0a; }
.btn-ghost{ width:100%; padding:13px; background:transparent; border:1px solid var(--line); color:var(--text); margin-top:10px; font-size:13.5px; }
.hint{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-faint); text-align:center; margin-top:14px; letter-spacing:.04em; }

/* Homepage-only link to faq.html — lives inside #startScreen so it
   disappears with the rest of the homepage once a run starts, same as
   every other homepage-only element. Anchored to #startScreen itself
   (not the viewport) so it stays aligned with the rest of the content
   column instead of drifting to the raw browser edge on wide screens. */
#startScreen{ position:relative; }
.start-top-actions{ position:absolute; top:0; right:0; z-index:40; display:flex; gap:8px; }
.faq-link, .report-bug-home-link{
  width:auto; padding:8px 14px; margin-top:0; font-size:11px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.02em;
  border-radius:10px; text-decoration:none; display:inline-block;
}

.mode-select{ display:flex; gap:8px; margin-top:12px; }
.mode-btn{ flex:1; padding:10px; background:transparent; border:1px solid var(--line); color:var(--text-dim); font-size:12.5px; letter-spacing:.04em; border-radius:10px; }
.mode-btn.active{ border-color:var(--lime); color:var(--lime); background:rgba(196,244,42,0.08); }
.mode-hint{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); text-align:center; margin-top:8px; letter-spacing:.02em; }

.start-visual{ margin:28px 0 24px; height:120px; border:1px solid var(--line); border-radius:14px;
  background: radial-gradient(circle at 20% 20%, rgba(196,244,42,0.10), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,107,74,0.10), transparent 40%), var(--bg-raised);
  display:flex; align-items:center; justify-content:center; gap:14px; }
.orb{ width:30px; height:30px; border-radius:50%; opacity:.85; animation:float 3.2s ease-in-out infinite; }
.orb:nth-child(1){ background:var(--fire); } .orb:nth-child(2){ background:var(--water); animation-delay:.4s;}
.orb:nth-child(3){ background:var(--grass); animation-delay:.8s;} .orb:nth-child(4){ background:var(--electric); animation-delay:1.2s;}
.orb:nth-child(5){ background:var(--fairy); animation-delay:1.6s;}
@keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

.loading-note{ text-align:center; color:var(--text-faint); font-family:'JetBrains Mono',monospace; font-size:12px; margin-top:20px; }

.best{ margin-top:26px; display:none; }
.best.active{ display:block; }
.best-title{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; margin-bottom:10px; }
.best-row{ display:flex; width:100%; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; background:transparent; color:var(--text); text-align:left; font-family:'Inter',sans-serif; font-weight:400; }
.best-row:last-child{ border-bottom:none; }
.best-row:active{ opacity:.6; }

.ranking-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.ranking-tab{ flex:1; padding:8px; background:transparent; border:1px solid var(--line); color:var(--text-dim); font-size:11px; letter-spacing:.04em; border-radius:8px; }
.ranking-tab.active{ border-color:var(--lime); color:var(--lime); background:rgba(196,244,42,0.08); }
.best-rank{ font-family:'JetBrains Mono',monospace; color:var(--text-faint); width:22px; flex-shrink:0; }
.best-name{ flex:1; font-weight:600; text-align:left; }
.best-ovr{ font-family:'JetBrains Mono',monospace; color:var(--lime); flex-shrink:0; margin-left:8px; }

/* ---------- avatar (PNG with graceful fallback) ---------- */
.avatar{ position:relative; width:100%; aspect-ratio:1; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--bg); margin-bottom:6px; }
.avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6px; }
.avatar .fallback{ position:relative; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; }
.avatar-sm{ width:44px; height:44px; margin:0; flex-shrink:0; }
.avatar-sm .fallback{ font-size:12px; }

/* Pro mode: covered wild-encounter/starter cards, identity hidden until clicked */
.mystery-avatar{ background:repeating-linear-gradient(135deg, var(--bg-raised), var(--bg-raised) 6px, var(--bg) 6px, var(--bg) 12px); border:1px dashed var(--line); }
.mystery-mark{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; color:var(--text-dim); }
.mystery-card .c-name{ color:var(--text-dim); letter-spacing:.08em; }

/* Pro mode reveal: clicked card flips over slowly with a highlight, every
   other covered card in the grid flips over quickly right after. */
.wild-grid.revealing, .starter-grid.revealing{ pointer-events:none; }
.card-reveal-content{ opacity:0; transform:scale(.8); }
.card-reveal-content.shown{ opacity:1; transform:scale(1); transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.wild-card.selected-reveal, .starter-card.selected-reveal{ border-color:var(--lime); box-shadow:0 0 0 2px var(--lime), 0 0 18px 3px rgba(196,244,42,.4); transition:border-color .55s ease, box-shadow .55s ease; }
.wild-card.selected-reveal .card-reveal-content.shown, .starter-card.selected-reveal .card-reveal-content.shown{ transition-duration:.6s; }

/* shiny sparkle overlay */
.avatar.is-shiny{ box-shadow:0 0 0 2px #ffd447, 0 0 14px 2px rgba(255,212,71,0.55); animation:shiny-glow 1.8s ease-in-out infinite; }
.avatar.is-shiny .sparkle{ position:absolute; font-size:11px; line-height:1; pointer-events:none; opacity:0; animation:sparkle-twinkle 1.6s ease-in-out infinite; }
.avatar.is-shiny .sparkle.s1{ top:4%; left:8%; animation-delay:0s; }
.avatar.is-shiny .sparkle.s2{ top:8%; right:6%; font-size:9px; animation-delay:.5s; }
.avatar.is-shiny .sparkle.s3{ bottom:6%; left:38%; font-size:9px; animation-delay:1s; }
@keyframes shiny-glow{ 0%,100%{ box-shadow:0 0 0 2px #ffd447, 0 0 10px 1px rgba(255,212,71,0.4); } 50%{ box-shadow:0 0 0 2px #ffe98a, 0 0 18px 4px rgba(255,212,71,0.75); } }
@keyframes sparkle-twinkle{ 0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); } 40%{ opacity:1; transform:scale(1.1) rotate(15deg); } 60%{ opacity:1; transform:scale(1) rotate(-10deg); } 80%{ opacity:0; transform:scale(.5) rotate(0deg); } }

/* ---------- type chips ---------- */
.type-chip{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:5px; font-weight:700; margin-right:4px; }

/* ---------- STARTER SELECT ---------- */
.starter-select{ display:none; margin-top:22px; }
.starter-select.active{ display:block; }

.professor-note{ display:flex; gap:12px; align-items:flex-start; background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:18px; }
.professor-badge{ flex-shrink:0; width:38px; height:38px; border-radius:50%; background:color-mix(in srgb, var(--lime) 22%, var(--bg)); color:var(--lime); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:10px; letter-spacing:.03em; display:flex; align-items:center; justify-content:center; }
.professor-line{ font-size:13.5px; color:var(--text-dim); line-height:1.5; font-style:italic; }

.starter-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.starter-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center; color:var(--text); }
.starter-card:active{ transform:scale(0.96); }
.starter-card .c-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; display:block; text-transform:capitalize; }
.starter-card .c-types{ margin-top:6px; }

/* ---------- ENCOUNTER ---------- */
.encounter{ display:none; margin-top:22px; }
.encounter.active{ display:block; }
.progress-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.progress-label{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; }
.progress-label span{ color:var(--lime); text-transform:capitalize; font-weight:700; }
.encounter-hint{ margin-top:6px; font-size:13px; }

/* ---------- inventory strip (shared: catch screen + city) ---------- */
.inv-strip{ display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.inv-grid-2x4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:14px; }
.inv-chip{ flex:1; min-width:64px; background:var(--bg-raised); border:1px solid var(--line); border-radius:9px; padding:8px 6px; text-align:center; }
.inv-count{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--lime); }
.inv-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin-top:2px; }
.inv-label-row{ display:flex; align-items:center; justify-content:center; gap:4px; margin-top:3px; }
.inv-label-row .inv-label{ margin-top:0; }
.inv-chip .inv-label-row .item-icon{ width:14px; height:14px; margin:0; display:inline-block; }

/* item icons (assets/items/*.png) — dropped inline wherever an item shows up */
.item-icon{ width:20px; height:20px; object-fit:contain; display:block; margin:0 auto 4px; flex-shrink:0; }
.inv-chip .item-icon{ width:18px; height:18px; }
.shop-row .item-icon{ width:28px; height:28px; margin:0; }
.catch-actions .btn-ghost .item-icon{ width:16px; height:16px; display:inline-block; vertical-align:middle; margin:0 4px 0 0; }
.eyebrow .item-icon{ width:16px; height:16px; display:inline-block; vertical-align:middle; margin:0 4px 0 0; }
.section-h1 .item-icon{ width:26px; height:26px; display:inline-block; vertical-align:-5px; margin:0 4px 0 0; }

/* ---------- ROSTER STRIP (current active team, shown pre-decision) ---------- */
.roster-strip{ display:flex; gap:6px; margin-top:8px; }
.roster-slot{ flex:1 1 0; min-width:0; background:var(--bg-raised); border:1px solid var(--line); border-radius:10px; padding:6px; text-align:center; }
.roster-slot .avatar-sm{ width:100%; height:auto; aspect-ratio:1; margin:0 auto 4px; }
.roster-slot .tn{ display:block; font-weight:700; font-size:10px; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.roster-slot .tt{ display:block; font-family:'JetBrains Mono',monospace; font-size:8px; text-transform:uppercase; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- GYM BADGE SELECT ---------- */
.badge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.badge-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:14px 10px; text-align:center; color:var(--text); position:relative; }
.badge-card:active{ transform:scale(0.96); }
.badge-icon{ width:48px; height:48px; object-fit:contain; margin:0 auto 8px; display:block; }
.badge-card .c-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px; display:block; }
.badge-card .c-types{ margin-top:6px; }
.badge-card.locked{ opacity:.4; pointer-events:none; }
.badge-card .result-tag{ display:block; margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--lime); }

.badge-grid.mini-grid{ grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:8px; }
.badge-card.mini{ padding:8px 4px; }
.badge-card.mini .badge-icon{ width:26px; height:26px; margin-bottom:4px; }
.badge-card.mini .c-name{ font-size:8.5px; line-height:1.2; }
.badge-card.mini.locked{ opacity:.25; filter:grayscale(1); }

/* ---------- RUN DETAIL POPUP (compact — everything fits without scrolling) ---------- */
.run-detail-card .card-inner{ padding:18px 16px 16px; }
.run-detail-team-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; margin-top:8px; }
.run-mon-slot{ text-align:center; min-width:0; }
.run-mon-slot .avatar-sm{ width:100%; height:auto; aspect-ratio:1; margin:0 auto 2px; border-radius:6px; }
.run-mon-slot .tn{ display:block; font-size:8px; font-weight:700; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* badges shown at a size/contrast where the art is actually legible, not just tiny dots */
.run-detail-badge-grid{ grid-template-columns:repeat(5, 1fr); gap:6px; }
.run-detail-badge-grid .badge-card.mini{ padding:6px 3px; background:var(--bg); }
.run-detail-badge-grid .badge-icon{ width:30px; height:30px; margin:0 auto; }

.lead-select-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px; }
.lead-select-grid .wild-card:hover{ border-color:var(--lime); }

.wild-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:16px; }
.wild-card{ min-width:0; background:var(--bg-raised); border:1px solid var(--line); border-radius:10px; padding:6px 3px 8px; text-align:center; color:var(--text); position:relative; }
.wild-card:active{ transform:scale(0.96); }
.wild-card .avatar{ margin-bottom:4px; }
.wild-card .c-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:9.5px; display:block; text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wild-card .c-types{ margin-top:4px; display:flex; align-items:center; justify-content:center; gap:3px; }
.type-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.wild-card.resolved{ pointer-events:none; }
.wild-card.caught{ border-color:var(--lime); background:rgba(196,244,42,0.08); }
.wild-card.fled{ opacity:.4; }
.wild-card.fled .avatar img{ filter:grayscale(1); }
.wild-card .result-tag{ font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:.04em; text-transform:uppercase; margin-top:4px; display:block; }
.wild-card.caught .result-tag{ color:var(--lime); }
.wild-card.fled .result-tag{ color:var(--fire); }
.wild-card.locked{ pointer-events:none; opacity:.5; }

/* ---------- CATCH ATTEMPT ---------- */
.catch-attempt{ display:none; margin-top:22px; }
.catch-attempt.active{ display:block; }
.catch-target{ background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center; margin-top:16px; }
.catch-target .avatar{ width:140px; margin:0 auto 10px; }
.catch-target .c-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; text-transform:capitalize; display:block; }
.catch-target .c-types{ margin-top:8px; }
/* Safari Zone: Rock and Berry are alternative pre-throw boosts, not a
   sequence, so they sit side by side instead of stacked. */
.safari-action-row{ display:flex; gap:8px; }
.safari-action-row .btn-ghost{ flex:1; margin-top:0; }

/* Catch screen: Pokéball/Great Ball/Ultra Ball are alternative throws, not
   a sequence, same reasoning as the Safari row above. Smaller font/padding
   than a full-width btn-ghost so "GREAT BALL ×99 (BOOSTED)" still fits
   three-across without overlapping. */
.ball-throw-row{ display:flex; gap:6px; }
.ball-throw-row .btn-ghost{
  flex:1; margin-top:0; padding:16px 4px; font-size:11px; line-height:1.3;
  border-color:color-mix(in srgb, var(--lime) 45%, var(--line));
  background:color-mix(in srgb, var(--lime) 8%, transparent);
}

.catch-log{ margin-top:14px; min-height:20px; }
.catch-log-line{ font-size:13px; color:var(--text-dim); padding:6px 0; opacity:0; animation:reveal .3s ease forwards; }
.catch-log-success{ color:var(--lime); font-weight:700; background:color-mix(in srgb, var(--lime) 12%, transparent); border-radius:8px; padding:8px 10px; }
.catch-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.catch-actions .btn-ghost{ margin-top:0; padding:12px 6px; font-size:11.5px; }

/* shiny indicators */
.shiny-tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.05em; color:#ffd447; text-transform:uppercase; margin-top:6px; }

/* gold amounts — always yellow/gold and bold, wherever they appear */
.gold-text{ color:#ffd447; font-weight:700; }
.wild-card .shiny-dot{ position:absolute; top:4px; right:5px; font-size:11px; }

/* ---------- RANDOM EVENTS ---------- */
.event-screen{ text-align:center; }

/* JRPG-style rival challenge dialogue */
.rival-portrait{ width:88px; height:88px; margin:16px auto 8px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(74,217,255,0.25), var(--bg-raised)); border:2px solid var(--water); display:flex; align-items:center; justify-content:center; font-size:40px; overflow:hidden; }
.rival-portrait img{ width:100%; height:100%; object-fit:cover; }
.rival-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:var(--water); }
.rival-name-sub{ font-family:'JetBrains Mono',monospace; font-weight:400; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; margin-left:4px; }
.dialogue-box{ margin-top:14px; background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:16px; min-height:70px; text-align:left; font-size:14px; line-height:1.5; }
/* Deckhand Milo's boarding portrait (assets/trainers/Milo.png) is a tall
   ~2:3 crop, unlike every other trainer's square/circular art, so it gets
   its own taller rounded-rect frame instead of .rival-portrait's circle. */
.cruise-boarding-portrait{ width:140px; height:212px; margin:16px auto 8px; border-radius:16px; background:radial-gradient(circle at 35% 30%, rgba(74,217,255,0.25), var(--bg-raised)); border:2px solid var(--water); overflow:hidden; }
.cruise-boarding-portrait img{ width:100%; height:100%; object-fit:cover; }
.item-find-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:14px; padding:26px 20px; margin-top:18px; }
.item-find-card .item-icon{ width:56px; height:56px; margin:0 auto 10px; }
.item-find-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--lime); }

/* Champion ending: Elite Four silhouettes with the Master Ball reveal in front */
.champion-scene{ position:relative; height:170px; margin:20px 0; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle, color-mix(in srgb, var(--lime) 10%, transparent), transparent 70%), var(--bg-raised); border:1px solid var(--line); }
.champion-silhouettes{ display:flex; gap:16px; filter:brightness(0); opacity:.5; font-size:56px; line-height:1; }
.champion-masterball{ position:absolute; width:88px; height:88px; object-fit:contain; filter:drop-shadow(0 0 18px color-mix(in srgb, var(--lime) 60%, transparent)); animation:reveal .6s ease forwards, champion-pulse 2.4s ease-in-out infinite .6s; }
@keyframes champion-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

/* Cruise Ticket won: mandatory endgame event, no purchase needed anymore */
.cruise-ticket-scene{ position:relative; height:150px; margin:18px 0 6px; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle, color-mix(in srgb, var(--water) 20%, transparent), transparent 70%), var(--bg-raised); border:1px solid var(--line); }
.cruise-ticket-art{ width:110px; height:110px; object-fit:contain; filter:drop-shadow(0 0 20px color-mix(in srgb, var(--water) 65%, transparent)); animation:reveal .5s ease forwards, champion-pulse 1.8s ease-in-out infinite .5s; }
.cruise-ticket-title{
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:26px; text-align:center; margin-top:8px; letter-spacing:-.01em;
  background:linear-gradient(90deg, var(--water), var(--lime), #ffd447, var(--water));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:vibrant-text-shift 2.2s linear infinite;
}
@keyframes vibrant-text-shift{ 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }

/* Legendary encounter intro: lore + 3-of-team picker */
.legendary-portrait{ width:140px; margin:14px auto 4px; }

/* King of the Hill intro/reveal: a wide scene image, not an icon-in-a-box
   like the champion/cruise-ticket reward art, so it gets its own full-bleed
   treatment instead of reusing .champion-scene's centered small-icon layout.
   object-fit:fill stretches the source image to fill the whole 16:9 box
   edge-to-edge (no letterboxing, no cropping). */
.hill-scene{ position:relative; width:100%; max-width:420px; aspect-ratio:16/9; margin:20px auto; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--bg-raised); }
.hill-scene img{ width:100%; height:100%; object-fit:fill; display:block; }

/* Token Exchange reveal: starts as a solid black silhouette, fades in slowly */
.shiny-reveal-stage{ display:flex; justify-content:center; }
.shiny-reveal-avatar .avatar img{ filter:brightness(0); transition:filter 2.4s ease; }
.shiny-reveal-avatar.revealed .avatar img{ filter:brightness(1); }
.trainer-portrait{ display:block; width:96px; height:96px; object-fit:contain; margin:10px auto 4px; border-radius:12px; background:var(--bg-raised); border:1px solid var(--line); padding:6px; }
.battle-head .trainer-portrait{ width:48px; height:48px; margin:0; display:inline-block; vertical-align:middle; padding:3px; border-radius:8px; }
.legendary-picker-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px; }
.legendary-pick-card{ background:var(--bg-raised); border:2px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center; color:var(--text); font-family:inherit; }
.legendary-pick-card .c-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10.5px; display:block; margin-top:4px; text-transform:capitalize; }
.legendary-pick-card.selected{ border-color:var(--lime); background:color-mix(in srgb, var(--lime) 14%, var(--bg-raised)); }
.legendary-pick-card.disabled{ opacity:.35; }

/* Small inline "trophy" icon reused wherever a run's badges/achievements show */
.trophy-icon-inline{ width:16px; height:16px; display:inline-block; vertical-align:middle; margin:0 0 0 5px; }

@keyframes slot-spin{ 0%{ transform:rotateX(0deg) scale(1); } 50%{ transform:rotateX(90deg) scale(.85); } 100%{ transform:rotateX(0deg) scale(1); } }
.slot-win-banner{ margin-top:14px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:#0a0c0a; background:var(--lime); border-radius:10px; padding:10px; }
.slot-win-banner.win-pop{ animation:win-pop-blink .9s ease; }

/* ---------- LUCKY SPIN (Cruise Casino mini-event: a 4-way prize wheel) ---------- */
.lucky-wheel-wrap{ position:relative; width:200px; height:200px; margin:20px auto 8px; filter:drop-shadow(0 10px 22px rgba(0,0,0,0.5)); }
.lucky-wheel-pointer{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%) translateY(0);
  font-size:22px; color:var(--lime); z-index:2; line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.lucky-wheel-pointer.landed{ animation:lucky-wheel-pointer-bounce .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes lucky-wheel-pointer-bounce{
  0%{ transform:translateX(-50%) translateY(0); }
  35%{ transform:translateX(-50%) translateY(5px); }
  65%{ transform:translateX(-50%) translateY(-2px); }
  100%{ transform:translateX(-50%) translateY(0); }
}
.lucky-wheel{
  width:200px; height:200px; border-radius:50%; border:4px solid var(--line);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--lime) 30%, var(--line)), inset 0 0 26px rgba(0,0,0,0.4);
  /* background (conic-gradient) is built at runtime from LUCKY_SPIN_OUTCOMES — see openLuckySpin() */
  /* A gentle overshoot-then-settle (rather than a flat ease-out) reads more
     like a real wheel winding down instead of stopping dead. */
  transition: transform 3.8s cubic-bezier(0.22, 0.85, 0.1, 1), opacity .22s ease;
}
.lucky-wheel.resetting{ opacity:0; }
.lucky-wheel-hub{
  position:absolute; top:50%; left:50%; width:22px; height:22px; z-index:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--bg-raised); border:3px solid var(--line);
  box-shadow:0 0 10px rgba(0,0,0,0.55);
}
.lucky-wheel-legend{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px; }
.lucky-wheel-legend-chip{ display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); }
.lucky-wheel-legend-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ---------- TOKEN CASINO (Lucky Dice + Token Shop) ---------- */
.token-slot-cabinet{ margin-top:18px; background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:16px; }
.token-slot-displays{ display:flex; gap:8px; margin-bottom:14px; }
.token-slot-display{ flex:1; background:#0a0c0a; border:1px solid var(--line); border-radius:8px; padding:8px 10px; text-align:center; }
.token-slot-display-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; color:var(--text-faint); }
.token-slot-display-value{ display:block; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:20px; color:var(--lime); text-shadow:0 0 8px color-mix(in srgb, var(--lime) 60%, transparent); margin-top:2px; }

.dice-row{ display:flex; gap:18px; justify-content:center; align-items:center; background:#0a0c0a; border:2px solid var(--line); border-radius:10px; padding:22px 10px; }
/* Faces are drawn as a 3x3 pip grid (see dieFaceHTML()) rather than a
   Unicode die character — those render as an illegible placeholder glyph
   in some fonts regardless of font-size. */
.die-face{ width:92px; height:92px; border-radius:14px; background:var(--bg); border:1px solid var(--line); display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); gap:4px; padding:14px; }
.die-face.spin-anim{ animation:slot-spin .35s ease; }
.die-pip{ border-radius:50%; background:transparent; align-self:center; justify-self:center; width:16px; height:16px; }
.die-pip.on{ background:var(--text); }
/* Lights up on any payout — see finishDiceRoll(). */
.die-face.winning-roll{ border-color:#ffd447; box-shadow:0 0 0 2px color-mix(in srgb, #ffd447 55%, transparent); background:color-mix(in srgb, #ffd447 12%, var(--bg)); }
.die-face.winning-roll .die-pip.on{ background:#ffd447; }

/* Static payout reference, always visible under the dice. */
.dice-legend{ margin-top:14px; display:flex; flex-direction:column; gap:4px; }
.dice-legend-row{ display:flex; justify-content:space-between; align-items:center; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); padding:3px 2px; border-bottom:1px solid var(--line); }
.dice-legend-row:last-child{ border-bottom:none; }
.dice-legend-payout{ color:var(--lime); font-weight:700; }

.token-slot-win-banner{ margin-top:12px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; text-align:center; color:#0a0c0a; background:var(--lime); border-radius:10px; padding:10px; }
.token-slot-win-banner.win-pop{ animation:win-pop-blink .9s ease; }
/* The exact combination that won this roll (see finishDiceRoll()). */
.win-banner-combo{ margin-top:2px; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
@keyframes win-pop-blink{
  0%{ transform:scale(0.6); opacity:0; background:var(--lime); }
  15%{ transform:scale(1.15); opacity:1; background:#fff; }
  30%{ transform:scale(1); background:var(--lime); }
  45%{ background:#fff; } 60%{ background:var(--lime); } 75%{ background:#fff; }
  100%{ transform:scale(1); background:var(--lime); }
}
#slotSpinBtn{ margin-top:16px; }

/* ---------- FISHING (Cruise Casino mini-event) ---------- */
.fishing-scene{ margin:18px auto; width:160px; aspect-ratio:1; border-radius:14px; background:radial-gradient(circle at 50% 100%, rgba(74,217,255,0.18), transparent 70%), var(--bg-raised); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:6px; }
#fishingCastBtn{ margin-top:0; }
.fishing-bobber{ font-size:32px; display:inline-block; animation:float 2.2s ease-in-out infinite; }
/* Every cast plays casting -> tugging -> caught/released, driven by
   renderFishingScene() swapping this class (see castFishingLine()) — purely
   presentational suspense, doesn't touch FISHING_CATCH_CHANCE. */
.fishing-scene.casting .fishing-bobber{ animation:fishing-cast .5s ease; }
.fishing-scene.tugging .fishing-bobber{ animation:fishing-tug .12s ease-in-out infinite; }
.fishing-tug-indicator{ font-size:20px; font-weight:800; color:#ffd447; animation:sparkle-twinkle .5s ease-in-out infinite; }
.fishing-catch-reveal{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.fishing-catch-reveal .fishing-catch-avatar{ width:48px; }
.fishing-catch-reveal.caught .fishing-catch-avatar{ animation:evo-fade-in .7s ease forwards; }
.fishing-catch-reveal .fishing-catch-label{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); }
.fishing-catch-reveal.caught .fishing-catch-label{ color:var(--lime); font-weight:700; }
.fishing-splash{ font-size:28px; display:inline-block; animation:fishing-sink .9s ease forwards; }
@keyframes fishing-cast{ 0%{ transform:translateY(-22px) scale(.6); opacity:.3; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes fishing-tug{ 0%,100%{ transform:translate(0,0) rotate(0deg); } 25%{ transform:translate(-4px,2px) rotate(-10deg); } 50%{ transform:translate(3px,-2px) rotate(8deg); } 75%{ transform:translate(-3px,1px) rotate(-6deg); } }
@keyframes fishing-sink{ 0%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(16px); opacity:.15; } }

/* ---------- CRUISE SHIP theming ---------- */
.trainer-battle.cruise-battle .battle-name{ color:var(--water); }
.trainer-battle.cruise-battle .hp-card{ border-color:var(--water); }

/* ---------- MODAL POPUP (e.g. Cruise Ship Ticket confirmation) ---------- */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:100; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.active{ display:flex; }
.modal-card{ background:var(--bg-raised); border:1px solid var(--line); border-radius:16px; padding:26px 22px; max-width:360px; width:100%; text-align:center; animation:reveal .25s ease forwards; }
.modal-icon{ font-size:38px; margin-bottom:8px; }
.modal-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; letter-spacing:.02em; }
.modal-text{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin-top:10px; }
.absol-sense-name{ text-transform:capitalize; }
#absolSenseAvatar{ display:flex; justify-content:center; }
#absolSenseAvatar .avatar{ width:75%; }
.modal-card .btn-primary{ margin-top:18px; }
.modal-card .btn-ghost{ margin-top:10px; }
.gym-win-badge-icon{ width:72px; height:72px; }

.share-options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.share-option-btn{ margin-top:0; }

.mega-form-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.mega-form-choice-card{ background:var(--bg); border:2px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center; color:var(--text); font-family:inherit; }
.mega-form-choice-card:hover{ border-color:var(--lime); }
.mega-form-choice-card .c-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; display:block; margin-top:4px; text-transform:capitalize; }

/* ---------- SHOP (shared shop-row pattern, also used by PokeStop) ---------- */
.shop-grid{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.shop-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.shop-left{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.shop-info{ min-width:0; flex:1; }
.shop-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; }
.shop-desc{ font-size:11.5px; color:var(--text-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop-level{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); margin-top:3px; }
.shop-buy{ width:auto; margin-top:0; padding:10px 14px; font-size:12px; white-space:nowrap; }

.shop-tabs{ display:flex; gap:6px; margin-top:14px; }
.shop-tab{ flex:1; padding:10px 6px; font-size:11.5px; background:var(--bg-raised); border:1px solid var(--line); border-radius:9px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; letter-spacing:.03em; text-transform:uppercase; }
.shop-tab.active{ background:color-mix(in srgb, var(--lime) 18%, var(--bg-raised)); border-color:var(--lime); color:var(--lime); }

/* ---------- POKESTOP / COMPUTER / TEAM MANAGEMENT (share the .city screen pattern) ---------- */
.city{ display:none; margin-top:22px; }
.city.active{ display:block; }
.city .tagline b{ color:var(--lime); text-transform:capitalize; font-weight:700; }
.city .shop-grid{ margin-top:14px; }
#pokestopEndRunBtn{ color:var(--text-faint); }

.pokestop-nav{ display:flex; gap:8px; margin-top:16px; }
.pokestop-nav .btn-ghost{ flex:1; margin-top:0; }
.computer-btn{ display:flex; align-items:center; justify-content:center; padding:8px; }
.computer-btn-icon{ width:20%; height:auto; object-fit:contain; display:block; }
.notif-dot{ display:none; position:absolute; top:-5px; right:-5px; width:11px; height:11px; border-radius:50%; background:var(--fire); border:2px solid var(--bg); }
.notif-dot.active{ display:block; }

/* ---------- EVOLUTION REVEAL (PokeStop + Result) ---------- */
.evolution-reveal{ margin-top:16px; border:1px solid var(--lime); border-radius:14px; padding:18px 16px; text-align:center; background:radial-gradient(circle at 50% 0%, rgba(196,244,42,0.12), transparent 70%), var(--bg-raised); }
.evolution-label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); }
.evolution-stage{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.evo-mon{ width:64px; }
.evolution-arrow{ color:var(--text-faint); font-size:18px; }
.evolution-text{ margin-top:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; text-transform:capitalize; }
.evolution-reveal.evolve-anim .evo-from{ animation:evo-fade-out 1.6s ease forwards; }
.evolution-reveal.evolve-anim .evo-to{ animation:evo-fade-in 1.6s ease forwards; }
@keyframes evo-fade-out{ 0%,40%{ opacity:1; transform:scale(1); filter:brightness(1); } 70%{ opacity:.2; transform:scale(1.15); filter:brightness(2.5); } 100%{ opacity:0; transform:scale(1.15); filter:brightness(2.5); } }
@keyframes evo-fade-in{ 0%,60%{ opacity:0; transform:scale(.7); filter:brightness(2.5); } 85%{ filter:brightness(2.5); } 100%{ opacity:1; transform:scale(1); filter:brightness(1); } }

.team-mgmt-section{ margin-top:18px; }
.team-mgmt-title{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; }
.team-mgmt-row{ display:flex; align-items:center; gap:10px; background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:8px 10px; margin-bottom:8px; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.team-mgmt-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.team-mgmt-info .tn{ font-weight:700; font-size:13px; text-transform:capitalize; }
.team-mgmt-info .tt{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); text-transform:uppercase; margin-top:2px; }
.team-mgmt-btn{ width:auto; margin-top:0; padding:9px 12px; font-size:11px; white-space:nowrap; }
/* Highlights whichever Pokémon were added since the player's last Computer visit. */
.team-mgmt-row.new-arrival{ border-color:var(--lime); box-shadow:0 0 0 2px color-mix(in srgb, var(--lime) 30%, transparent); }
/* Wraps the avatar+name/type block so it's independently clickable (opens
   the Pokédex popup) without colliding with the reorder/deposit buttons. */
.team-mgmt-mon-info{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:none; border:none; padding:0; margin:0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
/* Replaces the old hold-and-drag reorder gesture (unreliable on touch) with
   a tap-to-move-one-slot control. */
.reorder-btns{ display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
.reorder-btn{ width:22px; height:18px; padding:0; line-height:18px; font-size:9px; background:var(--bg); border:1px solid var(--line); border-radius:4px; color:var(--text-dim); cursor:pointer; }
.reorder-btn:disabled{ opacity:.25; cursor:default; }
.new-tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.05em; color:var(--lime); text-transform:uppercase; margin-left:6px; padding:1px 5px; border-radius:4px; background:color-mix(in srgb, var(--lime) 16%, transparent); vertical-align:middle; }

/* ---------- TRADE OFFER (route trainers only, see openTradeOffer()) ---------- */
.trade-mon-showcase{ text-align:center; margin-top:8px; }
.trade-mon-showcase .avatar-sm{ width:88px; height:88px; margin:0 auto 6px; }
.trade-mon-showcase .tn{ display:block; font-weight:700; font-size:14px; text-transform:capitalize; }
.trade-give-row{ cursor:pointer; }
.trade-give-row.selected{ border-color:var(--lime); box-shadow:0 0 0 2px color-mix(in srgb, var(--lime) 35%, transparent); }
/* Bigger than the shared .evolution-reveal default (64px) — the trade swap
   is the whole point of this screen, so the two Pokémon get a much larger,
   perfectly square (1:1) banner instead of the small evolution-style icons. */
.trade-swap-reveal{ padding:28px 20px; }
.trade-swap-reveal .evolution-stage{ gap:24px; }
.trade-swap-reveal .evo-mon{ width:150px; }
.trade-swap-reveal .evo-mon .avatar-sm{ width:150px; height:150px; }
/* Reveal + "thanks for the trade" now live on the same screen — the thank-you
   text/button fade in below the swap banner once its animation has played,
   instead of replacing it. */
.trade-thanks-text, .trade-thanks-continue{ opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; pointer-events:none; }
.trade-thanks-text.shown, .trade-thanks-continue.shown{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* ---------- POKÉDEX POPUP (Computer screen — click any owned Pokémon) ---------- */
/* Wider than the default .modal-card cap and tightened all around so a
   dual-type Pokémon with a long weak/resist/immune list still fits without
   scrolling — more horizontal room means fewer wrapped chip lines. */
.pokedex-card{ position:relative; max-width:420px; max-height:85vh; overflow-y:auto; text-align:left; padding:18px 18px 16px; }
/* Replaces the bottom CLOSE button so the whole card can be shorter. */
.pokedex-close-x{ position:absolute; top:8px; right:8px; width:24px; height:24px; padding:0; line-height:24px; background:var(--bg); border:1px solid var(--line); border-radius:50%; color:var(--text-dim); font-size:12px; cursor:pointer; z-index:1; }
.pokedex-card .team-mgmt-title{ margin-bottom:4px; }
.pokedex-header{ text-align:center; }
.pokedex-portrait{ width:68px; margin:0 auto 4px; }
.pokedex-header .tn{ font-weight:700; font-size:14px; text-transform:capitalize; }
.pokedex-types{ margin-top:3px; }
.pokedex-stat-row{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.pokedex-stat-label{ width:48px; flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-faint); }
.pokedex-stat-track{ flex:1; height:5px; border-radius:3px; background:var(--bg); overflow:hidden; }
.pokedex-stat-fill{ height:100%; background:var(--lime); }
.pokedex-stat-val{ width:26px; text-align:right; flex-shrink:0; font-size:10.5px; font-weight:700; }
.pokedex-move-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:3px 0; border-bottom:1px solid var(--line); }
.pokedex-move-row:last-child{ border-bottom:none; }
.pokedex-move-name{ font-weight:700; font-size:12px; text-transform:capitalize; }
.pokedex-move-meta{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-faint); text-transform:uppercase; white-space:nowrap; }
.pokedex-matchup-row{ margin-bottom:5px; }
.pokedex-section-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.06em; color:var(--text-faint); margin-bottom:3px; }
.pokedex-matchup-chips{ display:flex; flex-wrap:wrap; gap:3px; }
.pokedex-matchup-chips .type-chip{ margin-right:0; padding:1px 6px; font-size:8px; }

/* Battle status-condition chip (e.g. "PSN") next to a battler's name — one
   color rule per status type, same pill shape as .new-tag. */
.status-tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; margin-left:6px; padding:1px 5px; border-radius:4px; vertical-align:middle; }
.status-tag-poison{ color:#A040A0; background:color-mix(in srgb, #A040A0 22%, transparent); }
.status-tag-burn{ color:var(--fire); background:color-mix(in srgb, var(--fire) 22%, transparent); }
.status-tag-sleep{ color:#8899aa; background:color-mix(in srgb, #8899aa 22%, transparent); }
/* ---------- TRAINER BATTLE ---------- */
.trainer-battle{ display:none; margin-top:22px; }
.trainer-battle.active{ display:block; }
.battle-head{ margin-bottom:14px; }
.battle-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; }
.battle-sub{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.trainer-battle.gym-battle .battle-name{ color:var(--lime); }
.trainer-battle.gym-battle .hp-card{ border-color:var(--lime); }
.trainer-battle.legendary-battle .battle-name{ color:#ffd447; }
.trainer-battle.legendary-battle .hp-card{ border-color:#ffd447; }
.trainer-battle.legendary-battle .battle-sub{ color:#ffd447; }
.trainer-battle.elite-battle .battle-name{ color:var(--fire); }
.trainer-battle.elite-battle .hp-card{ border-color:var(--fire); }

.hp-panel{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.hp-card{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--bg-raised); display:flex; gap:10px; align-items:center; }
.hp-double-row{ display:flex; gap:8px; }
.hp-double-row .hp-card{ flex:1; min-width:0; padding:16px 14px; }
.hp-double-row .avatar-sm{ width:64px; height:64px; }
.trainer-battle.double-battle .hp-card{ border-color:var(--water); }
/* Double Battle only: the HUD gets roughly double the height (bigger
   avatar/padding/text) so both active Pokémon a side stay easy to read at
   a glance, single battles keep the compact card untouched. The name gets
   an ellipsis truncation (min-width:0 on the flex item) rather than just
   growing the font, a long species name at this card width would otherwise
   overlap the HP number instead of wrapping. */
.hp-double-row .hp-side-label{ font-size:10px; }
.hp-double-row .hp-name-row{ font-size:14px; margin-top:4px; gap:6px; }
.hp-double-row .hp-name-row span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hp-double-row .hp-name-row span:last-child{ flex-shrink:0; }
.hp-double-row .hp-bar-track{ height:9px; margin-top:8px; }
.hp-double-row .foe-ball{ width:11px; height:11px; }
.hp-info{ flex:1; min-width:0; }
.hp-side-label{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.hp-name-row{ display:flex; justify-content:space-between; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; text-transform:capitalize; margin-top:2px; }
.hp-bar-track{ height:7px; border-radius:4px; background:var(--line); margin-top:6px; overflow:hidden; }
.hp-bar-fill{ height:100%; background:var(--lime); transition:width .3s ease; }
.hp-bar-fill.low{ background:var(--fire); }

.bag-panel{ display:none; margin-top:8px; border:1px solid var(--line); border-radius:10px; padding:8px; background:var(--bg-raised); }
.bag-panel.active{ display:block; }
.bag-items-row{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
/* Single battles show a 3rd "Switch" card alongside Potion/Revive. */
.bag-items-row.three-cards{ grid-template-columns:1fr 1fr 1fr; }
/* A 4th card shows up once a Max Potion (King of the Hill reward) has been picked up. */
.bag-items-row.four-cards{ grid-template-columns:1fr 1fr 1fr 1fr; }
/* Explicit stacking context above the ring, so its buttons are always
   clickable regardless of the ring's own paint order. */
.bag-item-card{ position:relative; z-index:1; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px; text-align:center; }

/* Countdown ring around the Potion/Revive cards: sweeps a full circle over
   the item-use window, so it visibly "closes" right as the window ends. */
@property --ring-pct{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.item-window-ring{
  position:absolute; z-index:0; inset:-6px; border-radius:12px; padding:4px;
  pointer-events:none;
  background:conic-gradient(from -90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.4) var(--ring-pct), transparent var(--ring-pct));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation-name:item-window-fill;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}
@keyframes item-window-fill{
  from{ --ring-pct:0%; }
  to{ --ring-pct:100%; }
}
.bag-item-card .item-icon{ width:18px; height:18px; margin:0 auto 3px; }
/* Switch isn't a real inventory item (no icon asset), so it uses an emoji
   in place of itemIconHTML()'s <img> — same box size as the real icons so
   its card lines up with Potion/Revive/Max Potion instead of sitting
   shorter (and pushing its USE button up) from missing that icon row. */
.bag-item-card .switch-icon{ font-size:15px; line-height:18px; }
.bag-item-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; }
.bag-item-desc{ font-size:9px; color:var(--text-faint); margin-top:1px; text-transform:capitalize; min-height:1.8em; line-height:1.2; }
.bag-use{ width:100%; margin-top:4px; padding:5px 10px; font-size:10.5px; }

.revive-picker{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.revive-picker-label{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; }
.revive-pick-btn{ margin-top:4px; padding:8px; font-size:11px; text-transform:capitalize; }
.revive-cancel-btn{ margin-top:8px; padding:8px; font-size:10.5px; color:var(--text-faint); }

/* opponent's remaining-Pokémon ball indicators */
.foe-balls{ display:flex; gap:4px; margin-bottom:4px; }
.foe-ball{ width:10px; height:10px; border-radius:50%; background:var(--lime); border:1px solid color-mix(in srgb, var(--lime) 60%, black); flex-shrink:0; }
.foe-ball.used{ background:var(--text-dim); border-color:color-mix(in srgb, var(--text-dim) 60%, black); opacity:.6; }

/* ---------- MID-BATTLE TEAM SWITCH ---------- */
.switch-prompt{ margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--lime); text-align:center; animation:reveal .3s ease forwards; }
.team-switch-strip{ display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; margin-top:10px; }
.switch-slot{ background:var(--bg-raised); border:1px solid var(--line); border-radius:9px; padding:4px 3px 6px; position:relative; }
.switch-slot:not(:disabled):active{ transform:scale(0.94); }
.switch-slot .avatar{ margin-bottom:3px; }
.switch-slot.active{ border-color:var(--lime); }
.switch-slot.fainted{ opacity:.4; }
.switch-slot.fainted .avatar img{ filter:grayscale(1); }
.switch-slot.empty{ opacity:.15; pointer-events:none; }
/* While "CHOOSE YOUR NEXT POKÉMON" is showing, ring the cards that can actually be picked. */
.switch-slot.selectable{ border-color:var(--lime); box-shadow:0 0 0 2px color-mix(in srgb, var(--lime) 35%, transparent); cursor:pointer; }
.switch-slot.selectable:hover{ box-shadow:0 0 0 2px color-mix(in srgb, var(--lime) 55%, transparent); }
/* Brief glow on Audino's slot the moment its heal proc fires, so the player notices the ability actually triggered. */
.switch-slot.ability-flash{ animation:abilityFlash 1.75s ease; }
@keyframes abilityFlash{
  0%, 100%{ box-shadow:none; }
  30%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--lime) 70%, transparent); }
}
.switch-hp-track{ height:4px; border-radius:3px; background:var(--line); overflow:hidden; }
.switch-hp-fill{ height:100%; background:var(--lime); }
.switch-hp-fill.low{ background:var(--fire); }
.switch-fainted-tag{ position:absolute; top:2px; right:4px; font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.03em; color:var(--fire); }

.log{ display:flex; flex-direction:column; max-height:220px; overflow-y:auto; }
.log-line{ padding:8px 0; border-bottom:1px solid var(--line); opacity:0; animation:reveal .3s ease forwards; font-size:12.5px; }
.log-line:last-child{ border-bottom:none; }
.log-line .lg-move{ font-weight:600; text-transform:capitalize; }
.log-line .lg-dmg{ color:var(--text-dim); font-size:11.5px; margin-top:1px; }
.log-line.faint .lg-move{ color:var(--fire); font-weight:700; }
.log-line.win .lg-move{ color:var(--lime); font-weight:700; }
.log-line.out .lg-move{ color:var(--fire); font-weight:700; }
.log-line.reward .lg-move{ color:#ffd447; font-weight:800; font-size:15px; text-shadow:0 0 10px rgba(255,212,71,0.55); }
.log-line.status .lg-move{ color:#A040A0; font-weight:700; }
.log-line.status-poison .lg-move{ color:#A040A0; font-weight:700; }
.log-line.status-burn .lg-move{ color:var(--fire); font-weight:700; }
.log-line.status-sleep .lg-move{ color:#8899aa; font-weight:700; }
.log-line.heal .lg-move{ color:#90ee90; font-weight:700; }
@keyframes reveal{ to{ opacity:1; } }

/* ---------- RESULT ---------- */
.result{ display:none; margin-top:22px; }
.result.active{ display:block; }
.card{ border-radius:20px; padding:2px; }
.card-inner{ background:var(--bg-raised); border-radius:18px; padding:22px 20px 20px; }
.new-best-tag{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; font-weight:700; color:#0a0c0a; background:var(--lime); padding:4px 9px; border-radius:6px; margin-bottom:12px; }
.foil-empty{ background:#33392c; }
.foil-modest{ background:linear-gradient(135deg,#7a5230,#c98a4e,#7a5230); }
.foil-solid{ background:linear-gradient(135deg,#4a6b8a,#9fd4ff,#4a6b8a); }
.foil-perfect{ background:linear-gradient(120deg,#ff6b4a,#ffd447,#4ade80,#4ad9ff,#ff8fd1,#ff6b4a); background-size:300% 300%; animation:holo 4s linear infinite; }
.foil-defeat{ background:linear-gradient(135deg,#5a1f1f,#ff6b4a,#5a1f1f); }
@keyframes holo{ 0%{background-position:0% 50%;} 100%{background-position:300% 50%;} }

.ovr-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:42px; line-height:1; }
.ovr-label{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); letter-spacing:.08em; }
.tier-name{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-top:14px; }
.tier-flavor{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }

/* spotlighted final-team grid at the top of the Result card */
.team-spotlight{ margin-top:18px; border:1px solid var(--lime); border-radius:14px; padding:14px; background:radial-gradient(circle at 50% 0%, rgba(196,244,42,0.10), transparent 70%), var(--bg-raised); }
.team-spotlight-title{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); text-align:center; margin-bottom:10px; }
.team-spotlight-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.spotlight-slot{ text-align:center; }
.spotlight-slot .avatar-sm{ width:56px; height:56px; margin:0 auto 4px; }
.spotlight-slot .tn{ display:block; font-size:11px; font-weight:700; text-transform:capitalize; }
/* Nuzlocke graveyard (result card + run detail card) — muted, distinct from
   the lime "active team" styling so it always reads as secondary. */
.graveyard-spotlight{ border-color:var(--line); background:var(--bg-raised); }
.graveyard-spotlight .team-spotlight-title{ color:var(--text-faint); }
.fainted-slot .avatar img{ filter:grayscale(1); }
.fainted-slot .avatar{ opacity:.55; }
.fainted-slot .tn{ color:var(--text-faint); }

/* hidden-achievement titles, shown compact on the Result card, only when at least one unlocked */
.achievements-strip{ margin-top:16px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--bg-raised); }
.achievements-grid{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.achv-chip{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.04em; font-weight:700; color:var(--lime); background:rgba(196,244,42,0.10); border:1px solid var(--lime); border-radius:6px; padding:4px 8px; white-space:nowrap; }

.team-list{ margin-top:16px; display:flex; flex-direction:column; gap:6px; }
.team-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; padding:7px 0; border-bottom:1px solid var(--line); }
.team-row:last-child{ border-bottom:none; }
.team-row .tn{ font-weight:600; flex:1; text-transform:capitalize; }
.team-row .tt{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; }
.empty-note{ color:var(--text-faint); font-size:13px; margin-top:14px; }

/* Small dismissible hint banner (e.g. "check the Computer" after a rare reward) */
.mini-hint-popup{ display:flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--lime) 16%, var(--bg-raised)); border:1px solid var(--lime); border-radius:10px; padding:10px 12px; margin-top:12px; opacity:0; animation:reveal .35s ease forwards; }
.mini-hint-icon{ font-size:18px; flex-shrink:0; }
.mini-hint-text{ flex:1; font-size:12.5px; font-weight:600; }
.mini-hint-close{ background:transparent; border:none; color:var(--text-dim); font-size:14px; padding:2px 4px; flex-shrink:0; width:auto; }

.divider{ height:1px; background:var(--line); margin:18px 0; }
.credit-line{ font-size:12px; color:var(--text-faint); line-height:1.5; }
.credit-line b{ color:var(--text-dim); font-weight:600; text-transform:capitalize; }
.actions{ margin-top:22px; display:flex; gap:8px; }
.actions .btn-ghost{ margin-top:0; }
.share-status{ margin-top:8px; font-size:12px; color:var(--lime); text-align:center; min-height:1em; }

/* Hall of Fame downloadable card (Champion runs only) — gradient-border
   treatment, same construction as the score .card/.card-inner pattern. */
.hof-card{ margin-top:18px; border-radius:18px; padding:2px; background:linear-gradient(120deg,#ff6b4a,#ffd447,#4ade80,#4ad9ff,#ff8fd1,#ff6b4a); background-size:300% 300%; animation:holo 4s linear infinite; }
.hof-card-title{ background:var(--bg-raised); border-radius:16px 16px 0 0; padding:16px 18px 4px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; text-align:center; }
.hof-card-desc{ background:var(--bg-raised); padding:0 18px 12px; font-size:12.5px; color:var(--text-dim); text-align:center; }
.hof-card #downloadHofBtn{ display:block; margin:4px 18px 0; width:calc(100% - 36px); }
.hof-status{ background:var(--bg-raised); border-radius:0 0 16px 16px; padding:8px 18px 14px; font-size:12px; color:var(--lime); text-align:center; min-height:1em; }

.highscore-entry{ margin-top:18px; }
.highscore-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--text-dim); margin-bottom:8px; }
.name-input{ width:100%; padding:13px 14px; background:var(--bg-raised); border:1px solid var(--line); border-radius:10px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px; margin-bottom:10px; }
.name-input:focus{ outline:2px solid var(--lime); outline-offset:1px; }
.name-input:disabled{ opacity:.5; }
.report-bug-textarea{ resize:vertical; min-height:80px; }
.report-bug-status{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); min-height:14px; margin-bottom:4px; }
.report-bug-card{ position:relative; }
.report-bug-icon{ width:44px; height:44px; object-fit:contain; margin-bottom:8px; }
.report-bug-intro{ margin-bottom:20px; }