@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --bg-deep: #05070d;
  --bg-1: #0a0e1c;
  --bg-2: #121a2e;
  --panel: rgba(18, 24, 44, 0.72);
  --panel-strong: rgba(24, 32, 56, 0.9);
  --panel-soft: rgba(255, 255, 255, 0.03);
  --border: rgba(130, 170, 255, 0.16);
  --border-strong: rgba(150, 200, 255, 0.28);
  --text: #eef2ff;
  --muted: #8b93b8;
  --neon-cyan: #33e8ff;
  --neon-violet: #a855f7;
  --neon-magenta: #ff3fb0;
  --neon-gold: #ffcb47;
  --neon-green: #38f2b0;
  --danger: #ff5470;
  --accent: var(--neon-cyan);
  --accent-2: var(--neon-violet);
  --accent-3: var(--neon-magenta);
  --shadow-glow: 0 0 24px rgba(51, 232, 255, 0.22);
  --radius: 16px;
  --radius-sm: 10px;
  --tabbar-h: 68px;
  --design-width: 460px;
  --design-height: 940px;
  --app-scale: 1;
  --app-gutter: 12px;
  /* The camera cutout, where the page is drawn behind it. The Android app runs
     full screen and MainActivity reports the cutout as --safe-area-inset-*;
     everywhere else these are 0 (index.html has no viewport-fit=cover). */
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

* {
  box-sizing: border-box;
}

/* Hide scrollbars everywhere, but keep touch + wheel scrolling functional. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(168, 85, 247, 0.16), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(51, 232, 255, 0.14), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(255, 63, 176, 0.12), transparent 55%),
    var(--bg-deep);
  color: var(--text);
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.business-title h4,
.panel-title,
.panel-subtitle,
.coin-marquee,
.brand-text,
.lvl-badge,
.btn,
.mode-btn,
.tab-label,
.stat-chip,
.meta-pill strong,
.preview-hud__item strong {
  font-family: "Baloo 2", "Poppins", sans-serif;
}

body[data-world="hometown"] { --accent: var(--neon-cyan); --accent-2: var(--neon-violet); }
body[data-world="metroplex"] { --accent: var(--neon-magenta); --accent-2: var(--neon-gold); }
body[data-world="orbital"] { --accent: var(--neon-violet); --accent-2: var(--neon-cyan); }

button, input, select {
  font-family: inherit;
  color: inherit;
}

a { color: var(--accent); }

.small { font-size: 12px; color: var(--muted); }

#app {
  position: fixed;
  /* Centred in the space clear of the camera cutout. On a phone the game fills
     the whole screen instead (below). */
  top: calc(50% + (var(--safe-top) - var(--safe-bottom)) / 2);
  left: calc(50% + (var(--safe-left) - var(--safe-right)) / 2);
  width: var(--design-width);
  height: var(--design-height);
  transform: translate(-50%, -50%) scale(var(--app-scale));
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 20% 0%, rgba(168, 85, 247, 0.14), transparent 40%),
    radial-gradient(circle at 100% 30%, rgba(51, 232, 255, 0.1), transparent 45%),
    linear-gradient(180deg, rgba(18, 24, 46, 0.65), rgba(8, 11, 22, 0.85));
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

/* A phone in portrait: the game fills the screen edge to edge. 23/30 is 460/600,
   the squarest shape fitGameToScreen can fill without letterboxing; squarer or
   wider screens keep the floating card, with its gutter, corners and shadow. */
@media (max-width: 600px) and (max-aspect-ratio: 23/30) {
  :root {
    --app-gutter: 0px;
  }

  #app {
    /* Up to the top edge, behind the camera cutout; the top bar keeps its
       content clear of it (below). A cutout on another edge, which is rare,
       stays outside the game. */
    top: calc(50% - var(--safe-bottom) / 2);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---------- Top bar ---------- */
.topbar {
  flex: 0 0 auto;
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.95), rgba(10, 14, 28, 0.55));
  border-bottom: 1px solid var(--border);
  z-index: 5;
}

/* A phone's game reaches up behind the camera cutout, so the top bar pads its
   content clear of it. Inside #app CSS px are design px: the cutout's screen px
   over the scale. */
@media (max-width: 600px) and (max-aspect-ratio: 23/30) {
  .topbar {
    /* Whichever is larger, not both: the camera already holds the content down,
       and adding the full 14px on top of it left an empty strip above the top
       bar. With no camera in the way this is the plain 14px. */
    padding-top: max(14px, calc(var(--safe-top) / var(--app-scale) + 6px));
  }
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-icon {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.coin-marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 8px 22px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 203, 71, 0.16), rgba(255, 63, 176, 0.12));
  border: 1px solid rgba(255, 203, 71, 0.4);
  box-shadow: 0 0 24px rgba(255, 203, 71, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-shadow: 0 0 18px rgba(255, 203, 71, 0.55);
}

.coin-icon {
  color: var(--neon-gold);
  filter: drop-shadow(0 0 6px rgba(255, 203, 71, 0.7));
}

.topbar-actions {
  display: flex;
  gap: 6px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 12px rgba(51, 232, 255, 0.25);
}

.icon-btn:active { transform: scale(0.92); }

.icon-btn { position: relative; }

.topbar-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.stat-chip {
  flex: 0 1 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- Main scroll area ---------- */
.app-main {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(var(--tabbar-h) + 84px);
}

.tab-panel {
  display: none;
  animation: panelIn 0.22s ease;
}

.tab-panel.active { display: block; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.panel-title {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 12px currentColor;
}

.panel-subtitle {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ---------- World selector ---------- */
.world-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.world-nav-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.world-nav-btn:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 14px rgba(51, 232, 255, 0.25);
}

.world-nav-btn:active { transform: scale(0.9); }

.world-display {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}

.world-name {
  font-family: "Baloo 2", "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 12px currentColor;
}

.world-identity {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

.world-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.world-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.world-dot.active {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transform: scale(1.3);
}

.world-dot.locked {
  background: var(--muted);
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- World bar (legacy) ---------- */
.world-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

#worldSelect {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
  font-size: 13px;
}

.world-identity {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

/* ---------- Preview HUD ---------- */
.preview-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.preview-hud__item {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-hud__item span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.preview-hud__item strong {
  font-size: 14px;
  color: var(--accent);
}

/* ---------- Buy mode + quick actions ---------- */
.buy-mode-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.buy-mode-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.buy-mode-group > span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex: 0 0 auto;
}

.buy-mode-toggles {
  display: flex;
  gap: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.mode-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0a0e1c;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(51, 232, 255, 0.5);
}

.quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.btn {
  border: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%), var(--panel-strong);
  color: var(--text);
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 0 rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--border-strong);
  transform: translateY(0);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 16px rgba(51, 232, 255, 0.25); }

.btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.35);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-block { flex: 1; }

.btn-secondary {
  background: var(--panel-soft);
  color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 0 rgba(0, 0, 0, 0.3);
}

.btn-strong {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 40%), linear-gradient(135deg, var(--neon-magenta), var(--neon-gold));
  color: #17101a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(140, 20, 80, 0.6), 0 0 24px rgba(255, 63, 176, 0.4);
}

.btn-muted {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--border);
  color: var(--muted);
}

.buy-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 40%), linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
  color: #04241c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(6, 90, 80, 0.6), 0 0 20px rgba(56, 242, 176, 0.35);
}

/* ---------- Business cards ---------- */
#businesses {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.business {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 40%), var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  animation: cardIn 0.3s ease;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.business::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent);
}

.business.business-locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.business.business-locked::before {
  background: var(--muted);
  box-shadow: none;
}

.business-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.business-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 12px rgba(51, 232, 255, 0.12);
}

.business-title {
  flex: 1 1 auto;
  min-width: 0;
}

.business-title h4 {
  margin: 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.business-flavor {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lvl-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--border-strong);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.business .lvl { color: var(--accent); }

.business-meta-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.meta-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

.meta-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.business .prod { font-size: 12px; color: var(--neon-green); font-weight: 700; }
.business .next-ms { font-size: 12px; color: var(--neon-gold); font-weight: 700; }
.business .unlock-note { font-size: 11px; color: var(--danger); margin-top: 6px; }

.manager-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted);
}

.business .manager-lvl { color: var(--accent-2); font-weight: 700; }
.business .manager-state { color: var(--neon-green); }

.buy-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.cost-tag {
  font-size: 11.5px;
  color: var(--muted);
}

.business .cost { color: var(--neon-gold); font-weight: 700; }

.manager-row {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.upgrade { margin-top: 6px; }

.upgrade .btn { width: 100%; }

.cycle-meter {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  margin-top: 6px;
  overflow: hidden;
}

.cycle-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.2s linear;
}

.business-unlocked-pop { animation: unlockPulse 0.6s ease; }
.business-juice { animation: cardJuice 0.35s ease; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes unlockPulse {
  0% { box-shadow: 0 0 0 rgba(51, 232, 255, 0); }
  40% { box-shadow: 0 0 28px rgba(51, 232, 255, 0.55); }
  100% { box-shadow: 0 0 0 rgba(51, 232, 255, 0); }
}

@keyframes cardJuice {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}


/* ---------- Missions ---------- */
.mission-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.mission-head-row .panel-title { margin: 0; }

.missions-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mission-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mission-card.mission-ready {
  border-color: var(--neon-green);
  box-shadow: 0 0 14px rgba(56, 242, 176, 0.25);
}

.mission-card.mission-claimed { opacity: 0.55; }

.mission-card-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
}

.mission-icon { font-size: 18px; line-height: 1; }

.mission-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mission-bar {
  height: 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mission-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
  transition: width 0.25s ease;
}

.mission-progress {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-reward {
  font-size: 10px;
  font-weight: 700;
  color: var(--neon-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-claim {
  padding: 6px 8px;
  font-size: 12px;
  width: 100%;
}

.mission-claim:disabled { opacity: 0.6; cursor: default; }

.mission-timer { color: var(--neon-gold); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---------- Shop / manager tree ---------- */
.rebirth-block { text-align: center; }

#shopList, #managerTree, #achList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-item, .manager-tree-item, .ach-item {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.shop-item.business-locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.manager-upgrade-icon {
  font-size: 15px;
  margin-right: 2px;
}

.ach-item.unlocked {
  border-color: var(--neon-gold);
  box-shadow: 0 0 12px rgba(255, 203, 71, 0.25);
}

/* ---------- Leaderboard ---------- */
#leaderList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

#leaderList div {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

.leader-you {
  background: rgba(51, 232, 255, 0.08);
  border: 1px solid rgba(51, 232, 255, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

#leaderList .leader-me {
  color: var(--neon-cyan);
  font-weight: 700;
  border-color: var(--border-strong);
}

/* ---------- Dev tools ---------- */
#devTools summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.dev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.dev-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.dev-field select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
}

/* ---------- Floating Watch Ad button ---------- */
.fab-ad {
  position: absolute;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 16px);
  z-index: 6;
  border: none;
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 11.5px;
  font-weight: 700;
  color: #17101a;
  background: linear-gradient(135deg, var(--neon-gold), var(--neon-magenta));
  box-shadow: 0 0 16px rgba(255, 203, 71, 0.4);
  cursor: pointer;
  animation: floatGlow 2.4s ease-in-out infinite;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.fab-ad.boosting {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  box-shadow: 0 0 16px rgba(51, 232, 255, 0.45);
  animation: none;
  cursor: default;
}

@keyframes floatGlow {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 18px rgba(255, 203, 71, 0.4); }
  50% { transform: translateY(-3px); box-shadow: 0 0 28px rgba(255, 203, 71, 0.6); }
}

/* ---------- Bottom tab bar ---------- */
.tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Full screen: the navigation bar is hidden, and a swipe only slides it in
     over the tab bar for a moment, so no inset here. */
  height: var(--tabbar-h);
  padding: 8px;
  display: flex;
  gap: 4px;
  /* Opaque rather than blurred: a live blur behind a bar inside a scaled
     container is expensive on phones and a known source of flicker. */
  background: linear-gradient(180deg, rgb(10, 14, 28), rgb(6, 8, 16));
  border-top: 1px solid var(--border);
  z-index: 7;
}

.tab-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.tab-btn:active { transform: scale(0.94); }

.tab-icon { font-size: 20px; }

.tab-btn.active {
  color: var(--accent);
  text-shadow: 0 0 12px currentColor;
  background: linear-gradient(180deg, rgba(51, 232, 255, 0.16), rgba(51, 232, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tab-btn.active .tab-icon {
  filter: drop-shadow(0 0 8px currentColor);
  animation: tabPop 0.3s ease;
}

@keyframes tabPop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}


/* ---------- Toasts / effects ---------- */
#toastLayer {
  position: fixed;
  /* Clear of the camera cutout. */
  top: calc(var(--safe-top) + 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 999;
  pointer-events: none;
}

.toast {
  background: var(--panel-strong);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  box-shadow: var(--shadow-glow);
  animation: toastIn 0.3s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tap-burst {
  position: fixed;
  pointer-events: none;
  z-index: 998;
  font-weight: 700;
  color: var(--neon-gold);
  animation: tapBurst 0.6s ease forwards;
}

@keyframes tapBurst {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(1.3); }
}

.reward-pop {
  position: fixed;
  pointer-events: none;
  z-index: 998;
  font-size: 19px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--neon-green);
  /* A dark outline so the number reads over any card. */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.95);
  animation: rewardPop 0.8s ease forwards;
}

/* Combos, cash bursts and other headline rewards. */
.reward-pop-big {
  font-size: 25px;
  color: var(--neon-gold);
}

/* translate(-50%, ...) centres the number on the tap point; see spawnRewardPop. */
@keyframes rewardPop {
  0% { opacity: 1; transform: translate(-50%, 0) scale(0.8); }
  30% { transform: translate(-50%, -12px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

/* ---------- Tappable event drops ---------- */
.event-drop {
  --drop-ms: 9000ms;
  --drop-glow: rgba(255, 203, 71, 0.55);
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: eventDropDrift var(--drop-ms) linear forwards;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.event-drop--rtl { animation-name: eventDropDriftRtl; }
.event-drop--surge { --drop-glow: rgba(51, 232, 255, 0.6); }

.event-drop__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 30px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 62%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 22px var(--drop-glow), inset 0 0 12px rgba(255, 255, 255, 0.12);
  animation: eventDropBob 1.1s ease-in-out infinite;
}

.event-drop__label {
  font-family: "Baloo 2", "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(5, 7, 13, 0.72);
  border: 1px solid var(--border-strong);
}

.event-drop--caught,
.event-drop--missed { pointer-events: none; }

.event-drop--caught .event-drop__icon,
.event-drop--caught .event-drop__label { animation: eventDropCatch 0.3s ease forwards; }

.event-drop--missed {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes eventDropDrift {
  from { transform: translate(calc(-50% - 290px), -50%); }
  to { transform: translate(calc(-50% + 290px), -50%); }
}

@keyframes eventDropDriftRtl {
  from { transform: translate(calc(-50% + 290px), -50%); }
  to { transform: translate(calc(-50% - 290px), -50%); }
}

@keyframes eventDropBob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
}

@keyframes eventDropCatch {
  to { transform: scale(1.6); opacity: 0; }
}

/* Reduced motion: no drifting. The drop waits mid-screen and fades on its own. */
body.reduced-motion .event-drop { animation: none !important; }

/* ---------- Dialogs ---------- */
dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  color: var(--text);
}

dialog::backdrop {
  background: rgba(4, 6, 12, 0.7);
  backdrop-filter: blur(4px);
}

/* Full screen, a tall dialog would reach up behind the camera cutout. */
dialog:modal {
  top: var(--safe-top);
  bottom: var(--safe-bottom);
  max-height: calc(100% - var(--safe-top) - var(--safe-bottom) - 2em - 6px);
}

.settings-form, .manager-form {
  background: linear-gradient(180deg, rgba(20, 26, 48, 0.98), rgba(10, 13, 24, 0.98));
  padding: 18px;
  /* No wider than the dialog can show: the browser keeps a modal dialog to the
     screen less 2em + 6px, and its borders take 2px more. Any wider and the
     dialog scrolls sideways; selecting a box then slides the whole form left. */
  width: min(380px, calc(100vw - 2em - 8px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--radius);
}

.settings-form h3, .manager-form h3 {
  margin: 0;
  color: var(--accent);
  text-shadow: 0 0 12px currentColor;
}

.settings-form label, .manager-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.settings-form select, .manager-form select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
}

/* On a narrow screen a box or list gives way, rather than pushing its row wider
   than the dialog. */
.settings-form label > select,
.settings-form label > input[type="text"] {
  min-width: 0;
}

.settings-form input[type="text"] {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
  font-size: 13px;
}

.settings-form input[type="text"]::placeholder {
  color: var(--muted);
  opacity: 1;
}

.settings-form input[type="text"][readonly] {
  background: var(--panel-soft);
  color: var(--muted);
  user-select: all;
}

.manager-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.manager-item {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.settings-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ---------- Gems ---------- */
.gem-chip {
  color: var(--neon-cyan);
  border-color: rgba(51, 232, 255, 0.4);
  background: rgba(51, 232, 255, 0.08);
}

.top-gems {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(51, 232, 255, 0.4);
  background: rgba(51, 232, 255, 0.08);
  color: var(--neon-cyan);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Season banner ---------- */
.season-banner {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(255, 203, 71, 0.16), rgba(255, 63, 176, 0.14));
  border: 1px solid rgba(255, 203, 71, 0.4);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(255, 203, 71, 0.15);
}

/* ---------- Notifications ---------- */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Rewards modal ---------- */
.rewards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reward-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
}

.reward-btn > span:last-child {
  display: flex;
  flex-direction: column;
}

.reward-btn strong { font-size: 13px; }
.reward-btn small { font-size: 11px; color: var(--muted); }

.reward-icon { font-size: 22px; }

/* ---------- Offline modal ---------- */
.offline-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.offline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  font-size: 13px;
}

.offline-row strong { color: var(--neon-green); }

/* ---------- Morning Briefing ---------- */
.briefing__masthead {
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

.briefing__dateline {
  margin: 6px 0 10px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

.briefing__headline {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  text-align: center;
}

.briefing__stories {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.briefing__story {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.briefing__offer {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.briefing__offer p {
  margin: 4px 0 10px;
  line-height: 1.45;
}

.briefing__offer-actions {
  display: flex;
  gap: 8px;
}

.briefing__offer-actions .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- Arriving in a new world ---------- */
.arrival { text-align: center; }

.arrival__kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.arrival__name {
  margin: 6px 0 2px;
  font-size: 22px;
}

.arrival__identity {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--neon-green);
}

.arrival__traits { margin: 0 0 8px; }

.arrival__paper {
  margin: 0 0 4px;
  color: var(--muted);
}

/* ---------- Getting Started Guide ---------- */
.guide-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
  max-height: 52vh;
  overflow-y: auto;
}

.guide-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

.guide-item-icon {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

.guide-item-body strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 2px;
}

.guide-item-body .small {
  font-size: 11px;
  line-height: 1.4;
}

/* ---------- Unlock teaser ---------- */
.unlock-teaser {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 203, 71, 0.06);
  border: 1px dashed rgba(255, 203, 71, 0.35);
  color: var(--neon-gold);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

/* ---------- Premium shop ---------- */
.premium-gem-balance { text-align: center; }

.gem-balance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.gem-balance-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.gem-balance-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: 0 0 16px rgba(51, 232, 255, 0.6);
}

.premium-gem-balance .btn { margin-top: 4px; }

/* ---------- Prestige multiplier ---------- */
.prestige-mult {
  display: block;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  text-align: center;
  color: var(--neon-gold);
  font-weight: 700;
}

/* ---------- Daily chest ---------- */
.daily-chest-modal {
  text-align: center;
}

.daily-chest {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.chest {
  font-size: 64px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}

.chest:hover {
  transform: scale(1.06);
}

.chest.opened {
  animation: chestOpen 0.5s ease;
}

@keyframes chestOpen {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.25) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---------- Previews / loadouts ---------- */
.preview-note {
  display: block;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  text-align: center;
}

.loadout-points {
  color: var(--neon-gold);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Auto-buy active state ---------- */
.btn.active {
  background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
  color: #04241c;
}

/* ---------- Reduced motion ---------- */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ---------- Custom themes ---------- */
body[data-theme="neon"] {
  --bg-deep: #0d0016;
  --bg-1: #1a0030;
  --bg-2: #260040;
  --neon-cyan: #00ffcc;
  --neon-violet: #ff00aa;
  --neon-magenta: #ff00ff;
  --accent: var(--neon-cyan);
  --accent-2: var(--neon-magenta);
}

body[data-theme="ocean"] {
  --bg-deep: #001020;
  --bg-1: #00243a;
  --bg-2: #003450;
  --neon-cyan: #00e5ff;
  --neon-violet: #1e88e5;
  --neon-magenta: #00b0ff;
  --accent: var(--neon-cyan);
  --accent-2: var(--neon-violet);
}

body[data-theme="sunset"] {
  --bg-deep: #1a0a02;
  --bg-1: #2d1405;
  --bg-2: #3d1d08;
  --neon-cyan: #ff9e00;
  --neon-violet: #ff6d00;
  --neon-magenta: #ff3d00;
  --accent: var(--neon-gold);
  --accent-2: var(--neon-magenta);
}

body[data-theme="royal"] {
  --bg-deep: #0d0a1a;
  --bg-1: #1a1430;
  --bg-2: #2a1e45;
  --neon-cyan: #ffd700;
  --neon-violet: #c0a000;
  --neon-magenta: #ffc400;
  --accent: var(--neon-gold);
  --accent-2: var(--neon-violet);
}

/* ---------- Privacy gate ---------- */
.privacy-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
  background:
    radial-gradient(circle at 15% 0%, rgba(168, 85, 247, 0.18), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(51, 232, 255, 0.16), transparent 45%),
    var(--bg-deep);
}

html.privacy-consented .privacy-gate {
  display: none;
}

.privacy-gate__card {
  width: 100%;
  max-width: 400px;
  text-align: center;
  padding: 26px 22px;
  background: var(--panel-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.privacy-gate__icon {
  font-size: 42px;
}

.privacy-gate__icon img {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.privacy-gate__card h2 {
  margin: 8px 0 6px;
  font-family: "Baloo 2", "Poppins", sans-serif;
}

.privacy-gate__card .btn {
  margin: 10px 0;
}

.privacy-gate__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.privacy-gate__actions .btn {
  flex: 1;
  margin: 0;
}

/* ---------- Bug report + version ---------- */
.bug-report {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bug-report textarea {
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
}

.version-chip {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

/* ---------- Simulated ad overlay ---------- */
.ad-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 13, 0.9);
}

.ad-overlay[hidden] {
  display: none;
}

.ad-overlay__card {
  text-align: center;
  padding: 26px 34px;
  background: var(--panel-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.ad-overlay__icon {
  font-size: 40px;
}

.ad-overlay__countdown {
  font-size: 28px;
  font-weight: 700;
  color: var(--neon-cyan);
  margin-top: 8px;
}

/* Volume sliders in the settings modal. Matches the existing accent styling
   used by selects and text inputs above. */
.settings-form input[type="range"] {
  flex: 0 0 150px;
  width: 150px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(120, 140, 200, 0.28);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.settings-form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px currentColor;
  cursor: pointer;
}

.settings-form input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px currentColor;
  cursor: pointer;
}

.settings-form input[type="range"]:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- Upgrades tab: teasers for what is coming next ---------- */
.upgrade-section-title {
  margin: 14px 2px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.upgrade-teaser {
  opacity: 0.78;
}

.upgrade-row-text {
  flex: 1;
  min-width: 0;
}

.teaser-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.teaser-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(130, 170, 255, 0.14);
  overflow: hidden;
}

.teaser-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--neon-violet), var(--neon-gold));
  transition: width 0.25s linear;
}

.teaser-need {
  white-space: nowrap;
  color: var(--neon-gold);
}

/* ---------- Settings: Report a Bug → Show screen info ---------- */
.display-info-btn {
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.display-info {
  color: var(--muted);
  line-height: 1.5;
  word-break: break-word;
  user-select: text;
}