/* =====================================================
   ATLASPATH — MASTER STYLESHEET
   ===================================================== */

/* =====================================================
   DESIGN TOKENS
   ===================================================== */

:root {
  color-scheme: dark;

  --bg:             #060810;

  /* Glass system — dark-tinted, deeply frosted */
  --glass-bg:       rgba(255, 255, 255, 0.07);
  --glass-border:   rgba(255, 255, 255, 0.12);
  --glass-shadow:   0 12px 56px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glass-blur:     blur(24px);

  /* Text */
  --text:           #f0f4ff;
  --text-light:     #8899bb;

  /* Accents */
  --primary:        #00e676;
  --primary-dark:   #00b85a;
  --secondary:      rgba(255, 255, 255, 0.06);
  --secondary-dark: rgba(255, 255, 255, 0.11);
  --danger:         #ff4040;
  --danger-dark:    #cc2020;
  --accent:         #00c8ff;

  /* Shape */
  --radius:         16px;
  --transition:     0.22s ease;

  /* Liquid-metal surface system — shared by every panel, card, button, and
     dropdown app-wide. A layered gradient (light-top → shadow-mid → light-
     bottom) plus inset bevel shadows, on top of whatever tint color a given
     element already uses. Never introduces new hues — only depth/gloss. */
  --metal-sheen:        linear-gradient(180deg,
                          rgba(255, 255, 255, 0.13) 0%,
                          rgba(255, 255, 255, 0.02) 38%,
                          rgba(0, 0, 0, 0.09) 62%,
                          rgba(255, 255, 255, 0.04) 100%);
  --metal-sheen-soft:   linear-gradient(180deg,
                          rgba(255, 255, 255, 0.07) 0%,
                          rgba(255, 255, 255, 0.01) 38%,
                          rgba(0, 0, 0, 0.06) 62%,
                          rgba(255, 255, 255, 0.02) 100%);
  --metal-bevel:        inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 1px rgba(0, 0, 0, 0.28);
  --metal-bevel-hover:  inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 2px rgba(0, 0, 0, 0.32);
  --metal-bevel-active: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  --metal-sweep:        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.02) 64%, transparent 80%);

  /* Subtle colored liquid-metal sheens — same light-top/shadow-mid/light-
     bottom shape as --metal-sheen, just tinted with a touch of the accent
     hue instead of pure white/black, so the black band reads as ~25% of
     the surface rather than a strong stripe. Layered over the element's
     existing tinted background-color, never replacing it. */
  --lm-blue-metal:  linear-gradient(180deg,
                      rgba(190, 225, 255, 0.16) 0%,
                      rgba(255, 255, 255, 0.02) 38%,
                      rgba(4, 8, 16, 0.16) 62%,
                      rgba(190, 225, 255, 0.08) 100%);
  --lm-green-metal: linear-gradient(180deg,
                      rgba(190, 250, 220, 0.16) 0%,
                      rgba(255, 255, 255, 0.02) 38%,
                      rgba(4, 12, 8, 0.16) 62%,
                      rgba(190, 250, 220, 0.08) 100%);
  --lm-gold-metal:  linear-gradient(180deg,
                      rgba(250, 225, 160, 0.16) 0%,
                      rgba(255, 255, 255, 0.02) 38%,
                      rgba(16, 11, 3, 0.16) 62%,
                      rgba(250, 225, 160, 0.08) 100%);

  /* Flag sizing — single source of truth */
  --flag-q-height:    180px;   /* question flag container height */
  --flag-q-max-width: 280px;   /* question flag image max-width  */
  --flag-a-max-width: 200px;   /* answer choice flag max-width   */
  --flag-a-max-height: 130px;  /* answer choice flag max-height  */
}


/* =====================================================
   GHOST LOADERS — skeleton / shimmer placeholders
   ===================================================== */

.aq-skel-line,
.aq-skel-block,
.aq-skel-circle {
  display: block;
  background-color: rgba(255, 255, 255, 0.07);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.07) 30%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.07) 70%
  );
  background-size: 200% 100%;
  animation: aq-skel-shimmer 1.4s ease-in-out infinite;
}
.aq-skel-line   { border-radius: 4px; }
.aq-skel-block  { border-radius: 8px; }
.aq-skel-circle { border-radius: 50%; flex-shrink: 0; }

@keyframes aq-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

html.light-mode .aq-skel-line,
html.light-mode .aq-skel-block,
html.light-mode .aq-skel-circle {
  background-color: rgba(0, 0, 0, 0.05);
  background-image: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.05) 30%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.05) 70%
  );
}


/* =====================================================
   BASE
   ===================================================== */

body {
  font-family: 'Syne', 'Segoe UI', sans-serif;
  font-weight: 500;
  background: #0d1018;
  color: var(--text);
  margin: 0;
  padding: 0;
  transition: opacity 0.4s ease;
}

body.preload {
  opacity: 0;
  pointer-events: none;
}

/* All sections hidden by default; JS reveals them */
section {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px 22px;
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--metal-bevel);
  will-change: backdrop-filter;
  display: none;
  color: var(--text);
}

/* Narrow menu screens — no need for full 800px */
section.menu-screen {
  position: relative;
  isolation: isolate;
  max-width: 380px;
  padding: 20px 24px;
  /* submenu-drag.js locks el.style.width to a measured offsetWidth (border-box
     size) whenever a panel goes position:fixed; without border-box that content-
     box-sized `width` grows by this padding every time it's re-locked, so panels
     silently render wider than intended — invisible in free-floating mode (slack
     around the panel absorbs it) but the excess gets clipped by the window edge
     once snapped flush left/right. */
  box-sizing: border-box;
  /* Premium liquid-metal panel treatment — same flagship look the Countries
     hub (#aq-module) debuted, promoted here 2026-07-06 so every floating nav
     panel (home menu, quiz/play/puzzle menus, encyclopedia, about-us, mode/
     focus select, aq-hub, aq-module) matches instead of just one. Overrides
     the plainer `--metal-sheen-soft` the generic `section` rule uses. */
  background-image: linear-gradient(160deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.015) 30%,
    rgba(0, 0, 0, 0.06) 55%,
    rgba(255, 255, 255, 0.035) 100%);
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px rgba(95, 186, 255, 0.10),
    0 24px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.32);
}
/* Ambient "light catching the top edge" glow — sits above the panel's own
   background but below all real content (negative z-index inside the
   isolated stacking context section.menu-screen establishes). */
section.menu-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(130% 55% at 18% -6%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, transparent 8%);
}

/* Puzzle menu rows now use the same .aq-stage component as #aq-module (the
   Countries module levels screen) — match its 480px width so row proportions
   are identical, not just the row styling. */
#puzzle-continent-menu,
#puzzle-menu {
  max-width: 480px;
}

/* About & Contact — transparent wrapper so globe shows through card gaps.
   Taller top reserve than the shared .sd-fixed cap (100vh - 160px) — same fix
   as #aq-hub/#encyclopedia above. The About + Contact text cards are long
   enough to hit that cap on modest window heights, which pins the panel's top
   (and the site-header floating above it) as high as the layout allows,
   squeezing the header up into the profile bar instead of below it, and
   making the cards look cut off rather than just scrollable. */
#about-us {
  max-width: 760px;
  max-height: calc(100vh - 250px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}
/* section.menu-screen::before's ambient corner glow is normally masked by the
   panel's own metal-sheen background — #about-us strips that background to
   transparent above, which left the glow floating on its own as a stray
   rounded panel behind the (now-removed) header. */
#about-us::before {
  content: none;
}
/* Remove the heavy card shadows that bleed into the transparent gap between cards */
#about-us .glass-card {
  box-shadow: none !important;
}

/* About page — tab bar (added 2026-07-09). One pane visible at a time; tab
   styling mirrors .stats-subtab / .stats-subtab.active exactly (same values)
   so the two tab systems read as one pattern. Wired in main.js. */
.about-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.about-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 0.939rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.about-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.about-tab.active {
  background: rgba(0, 234, 255, 0.15);
  border-color: rgba(0, 234, 255, 0.45);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.2);
}
.about-pane {
  display: none;
}
.about-pane.active {
  display: block;
}

/* About page — Data Sources & Disclaimers cards (added 2026-07-09).
   Sub-headings follow the HUD label convention: green #44cc88, overridden to
   dark forest green in light mode (grouped with the other light-mode rules). */
.about-sub-h {
  margin: 18px 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #44cc88;
}
.about-src {
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--text);
}
.about-link {
  color: rgba(95, 186, 255, 0.95);
  text-decoration: none;
}
.about-link:hover {
  text-decoration: underline;
}

/* Pricing / Upgrade page (added 2026-07-10; third tier 2026-07-23) — reached
   via "Upgrade Account" in the profile menu's Account Actions accordion.
   Three liquid-metal .glass-card tiers side by side (wrapping as the panel
   narrows): Free, Premium (featured), and the coming-soon Teachers & Tutors
   preview. No gaudy pricing-page tropes (no starbursts/ribbons) — just the
   app's existing metal-sheen + accent-glow language applied to a card, same
   restraint as every other surface. #pricing-page is left as a normal
   (non-transparent) menu-screen, unlike #about-us, since solid cards read
   better here than a globe-gap layout would. max-width 900px fits all three
   260px-min cards on one row (900 - 48 padding = 852 ≥ 3×260 + 2×18). */
#pricing-page {
  max-width: 900px;
}
.pricing-intro {
  text-align: center;
  width: 100%;
}
.pricing-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
}
.pricing-subtitle {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-light);
}
.pricing-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
  align-items: stretch;
}
.pricing-card {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  text-align: left;
  position: relative;
  margin-bottom: 0;
}
.pricing-card-featured {
  background-image: var(--lm-blue-metal);
  border-color: rgba(95, 186, 255, 0.35);
  box-shadow: var(--glass-shadow), var(--metal-bevel), 0 0 22px rgba(95, 186, 255, 0.12);
}
.pricing-card-badge {
  position: absolute;
  top: -11px;
  right: 20px;
  background: rgba(95, 186, 255, 0.16);
  border: 1px solid rgba(95, 186, 255, 0.4);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(95, 186, 255, 0.95);
  white-space: nowrap;
}
.pricing-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pricing-card-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.pricing-card-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}
.pricing-card-period {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-light);
  margin-left: 2px;
}
.pricing-card-desc {
  margin: -6px 0 0;
  font-size: 0.85rem;
  color: var(--text-light);
}
.pricing-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.pricing-feature-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text);
}
.pricing-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #44cc88;
  font-weight: 700;
  font-size: 0.82rem;
}
.pricing-cta-btn {
  width: 100%;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: var(--metal-sheen);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: var(--metal-bevel);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.pricing-cta-btn:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.11);
  box-shadow: var(--metal-bevel-hover);
}
.pricing-cta-btn:active:not(:disabled) {
  box-shadow: var(--metal-bevel-active);
}
.pricing-cta-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.pricing-cta-premium {
  background-color: rgba(95, 186, 255, 0.16);
  background-image: var(--lm-blue-metal);
  border-color: rgba(95, 186, 255, 0.45);
  color: rgba(95, 186, 255, 0.95);
}
.pricing-cta-premium:hover:not(:disabled) {
  background-color: rgba(95, 186, 255, 0.24);
}
.pricing-cta-btn.pricing-cta-active {
  background-color: rgba(68, 204, 136, 0.16);
  background-image: var(--lm-green-metal);
  border-color: rgba(68, 204, 136, 0.45);
  color: #44cc88;
}
.pricing-footnote {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-light);
  text-align: center;
  width: 100%;
}
html.light-mode .pricing-feature-list li::before {
  color: #1a7848;
}
html.light-mode .pricing-cta-btn.pricing-cta-active {
  color: #1a7848;
}

/* Home menu footer link — subtle text-only entry point to the About page.
   Resets the global button rule's text-stroke; inherits Gruppo like siblings. */
.home-footer-link {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  -webkit-text-stroke: 0;
  padding: 6px 0 2px;
  transition: color 0.18s ease;
}
.home-footer-link:hover {
  color: rgba(95, 186, 255, 0.9);
}

/* ---- ad slot (scaffolding, see docs/Database.md "Ads (Google Ad Manager)") ---- */
.aq-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.aq-ad-banner {
  min-height: 50px;
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
}

section, header, footer, .container {
  position: relative;
  z-index: 10;
}

/* Pass mouse events through layout wrappers so the globe canvas is reachable
   beside the menu. Interactive children re-enable pointer events below. */
.container, header {
  pointer-events: none;
}

section, header *, section * {
  pointer-events: auto;
}


/* =====================================================
   TYPOGRAPHY
   ===================================================== */

h2 {
  text-align: center;
  margin-bottom: 14px;
  color: var(--text);
  font-size: 1.497rem;
  font-weight: 400;
  font-family: 'Gruppo', sans-serif;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.5px var(--text);
}

header {
  text-align: center;
  margin: 28px auto 12px auto;
}

header h1 {
  font-size: 4.064rem;
  margin: 0;
  font-family: 'Gruppo', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
  -webkit-text-stroke: 0.6px var(--text);
  text-shadow: 0 0 1px rgba(255,255,255,0.25);
}

header .subtitle {
  margin-top: 10px;
  font-size: 1.125rem;
  color: var(--text-light);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Word morph: "around" → "beyond" */
.morph-word {
  display: inline-block;
  position: relative;
  margin-left: -4px;
}
.word-around {
  display: inline-block;
  transition: opacity 2.3s ease, filter 2.3s ease, transform 2.3s ease;
}
.word-beyond {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(7px);
  transition: opacity 2.3s ease, filter 2.3s ease, transform 2.3s ease;
  white-space: nowrap;
}
.morph-word.morphed .word-around {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-7px);
}
.morph-word.morphed .word-beyond {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}


/* =====================================================
   GLOBE CANVAS + BACKLIGHT
   ===================================================== */

#globe-backlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 70% at 37% 50%,
    rgba(40, 100, 255, 0.55) 0%,
    rgba(20, 60, 200, 0.30)  35%,
    rgba(10, 30, 120, 0.12)  60%,
    transparent              80%
  );
}

#globe-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#globe-load-error {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  max-width: calc(100vw - 32px);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

#globe-load-error p {
  margin: 0;
  color: var(--text);
}


/* =====================================================
   TOP-LEFT BAR (auth + theme toggle)
   ===================================================== */

#top-left-bar {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Globe / Map row inside profile dropdown */
#view-mode-row.aq-locked {
  opacity: 0.4;
  pointer-events: none;
}

.view-mode-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-mode-icon {
  display: flex;
  align-items: center;
  color: var(--text-light);
  line-height: 1;
}

#logged-out-controls {
  display: flex;
  align-items: center;
}

/* Logged-out: unified glass pill holding sign-in text + toggle */
#logged-out-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--metal-bevel);
}

.logged-out-auth-btn {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text-light);
  font-size: 0.837rem;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: color 0.2s;
}
.logged-out-auth-btn:hover {
  color: var(--text);
}

.logged-out-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.theme-icon {
  font-size: 13.903px;
  line-height: 1;
}

/* Toggle switch */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.theme-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.theme-switch input:checked + .theme-slider {
  background: var(--accent);
}

.theme-switch input:checked + .theme-slider::before {
  transform: translateX(16px);
}

/* =====================================================
   PROFILE MENU (logged-in)
   ===================================================== */

.profile-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--metal-bevel);
  color: var(--text);
  font-size: 0.911rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.18s ease;
}
.profile-pill:hover {
  background-color: rgba(255,255,255,0.28);
  box-shadow: var(--glass-shadow), var(--metal-bevel-hover);
}
.profile-pill:active {
  box-shadow: var(--glass-shadow), var(--metal-bevel-active);
}

.profile-icon {
  font-size: 1.069rem;
  line-height: 1;
}

.profile-chevron {
  font-size: 0.753rem;
  opacity: 0.55;
  transition: transform 0.2s;
  line-height: 1;
}

.profile-pill.open .profile-chevron {
  transform: rotate(180deg);
}

#profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen-soft);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--metal-bevel);
  padding: 6px 0;
  z-index: 2000;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(255, 255, 255, 0.04);
}
#profile-dropdown::-webkit-scrollbar { width: 5px; }
#profile-dropdown::-webkit-scrollbar-thumb { background: rgba(95, 186, 255, 0.35); border-radius: 3px; }
#profile-dropdown::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
html.light-mode #profile-dropdown::-webkit-scrollbar-thumb { background: rgba(20, 80, 160, 0.45); }

.profile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  font-size: 0.902rem;
  color: var(--text);
  gap: 12px;
}

.profile-menu-label {
  color: var(--text-light);
  font-size: 0.874rem;
}

.profile-menu-theme-row,
.profile-menu-coming-soon {
  pointer-events: auto;
}

/* Premium-gated Globe controls (Globe/Map, Territories/States, Spin/Drift,
   3D Contour Map). For free users the toggle is hidden and replaced by a lock;
   clicking the row opens the pricing page (wired in main.js). */
.profile-premium-lock {
  display: none;
  margin-left: auto;
  font-size: 0.82rem;
  opacity: 0.7;
  line-height: 1;
}
.profile-menu-theme-row.aq-premium-locked { cursor: pointer; }
.profile-menu-theme-row.aq-premium-locked .theme-switch { display: none; }
.profile-menu-theme-row.aq-premium-locked .profile-premium-lock { display: inline; }
.profile-menu-theme-row.aq-premium-locked .profile-menu-label { opacity: 0.5; }

/* Polygon opacity slider row — same lock treatment as the theme-row toggles above,
   adapted for a slider row (.profile-menu-contour-sliders) instead of a switch. The
   label lives inside .contour-slider-group alongside the input, so only the slider
   itself hides (label stays visible, dimmed); row switches back to a single line
   (row layout, not the default column stack) so the lock sits inline like the
   theme-row toggles instead of wrapping to its own line. */
.profile-menu-contour-sliders.aq-premium-locked { flex-direction: row; align-items: center; cursor: pointer; }
.profile-menu-contour-sliders.aq-premium-locked .contour-slider { display: none; }
.profile-menu-contour-sliders.aq-premium-locked .profile-premium-lock { display: inline; }
.profile-menu-contour-sliders.aq-premium-locked .profile-menu-label { opacity: 0.5; }

/* 3D Contour Map — Detail/Magnitude sliders row (visible only while the toggle is on) */
.profile-menu-contour-sliders {
  pointer-events: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding-top: 4px;
  padding-bottom: 10px;
}
.contour-slider-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.contour-slider-group .profile-menu-label { flex-shrink: 0; }

/* Nested sub-toggle under a parent row (e.g. Borders > Territories/States) — indents
   1.5 character-widths past its siblings' own 26px indent (set below by
   `#globe-menu-panel .profile-menu-item`) so nesting reads clearly instead of every
   row looking stacked at the same level. Needs the `#globe-menu-panel` + extra
   `.profile-menu-item` qualifier to out-specificity that ID-scoped rule — a plain
   `.profile-menu-indent` class alone ties with it and silently loses the cascade. */
#globe-menu-panel .profile-menu-item.profile-menu-indent {
  padding-left: calc(26px + 1.5ch);
}
.contour-slider {
  width: 130px;
  accent-color: var(--accent);  /* match the theme-switch toggles' checked color, both themes */
  cursor: pointer;
}

.profile-menu-coming-soon .profile-menu-label {
  opacity: 0.45;
}

.profile-coming-soon-tag {
  font-size: 0.725rem;
  color: var(--text-light);
  opacity: 0.45;
  font-style: italic;
  white-space: nowrap;
}

.profile-menu-btn-row {
  padding: 6px 10px;
}

.profile-menu-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 2px 10px;
}

/* ---- Layer Menu (expandable data-layer toggles) ---- */
.profile-menu-layer-header {
  cursor: pointer;
  user-select: none;
}
.profile-menu-layer-header:hover .profile-menu-label {
  color: var(--text);
}

.layer-menu-chevron {
  font-size: 1.3rem;
  opacity: 0.75;
  transition: transform 0.25s ease;
  line-height: 1;
}
.profile-menu-layer-header.open .layer-menu-chevron {
  transform: rotate(180deg);
}

.layer-menu-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

#layer-menu-toggle.layer-menu-locked {
  opacity: 0.32;
  pointer-events: none;
}

/* Quiz anti-cheat lock (main.js _setQuizMapLock) — while #quiz/#review are on
   screen the profile menu's Globe section is locked shut (the Layers section
   gets the same treatment via setLayerMenuLocked's .layer-menu-locked above,
   which also suspends all active layer rendering). The globe itself stays
   visible as the background — layers being suspended is what removes the
   cheat surface (user ruling 2026-07-19: globe view stays, menus lock). */
body.aq-quiz-lock #globe-menu-toggle {
  opacity: 0.32;
  pointer-events: none;
}
body.aq-quiz-lock #globe-menu-panel { max-height: 0 !important; }

.layer-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 16px 7px 26px;
  cursor: pointer;
}
.layer-menu-row:hover {
  background: rgba(255,255,255,0.06);
}

.layer-menu-coming-soon {
  cursor: default;
}
.layer-menu-coming-soon:hover {
  background: none;
}
.layer-menu-coming-soon .layer-menu-name {
  opacity: 0.45;
}
.layer-coming-soon-tag {
  font-size: 0.725rem;
  color: var(--text-light);
  opacity: 0.45;
  font-style: italic;
  white-space: nowrap;
}

.layer-menu-name {
  font-size: 0.84rem;
  color: var(--text-light);
}
.layer-menu-row:hover .layer-menu-name {
  color: var(--text);
}

/* Premium data layers (Historic Sites, National Parks) — locked for free users.
   The lock replaces the toggle box; clicking the row routes to the pricing page
   (handled in layers.js). Shown only while .layer-locked is present. */
.layer-premium-lock {
  display: none;
  margin-left: auto;
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1;
}
.layer-menu-premium.layer-locked .layer-premium-lock { display: inline; }
.layer-menu-premium.layer-locked .layer-menu-box { display: none; }
.layer-menu-premium.layer-locked .layer-menu-name { opacity: 0.5; }

.layer-menu-check {
  display: none;
}

.layer-menu-box {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  transition: background 0.18s, border-color 0.18s;
}
.layer-menu-check:checked + .layer-menu-box {
  background: var(--accent);
  border-color: var(--accent);
}
.layer-menu-box::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid rgba(8,14,28,0.9);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}
.layer-menu-check:checked + .layer-menu-box::after {
  transform: rotate(45deg) scale(1);
}

/* Sub-panel — nested under a layer row */
.layer-sub-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: rgba(255,255,255,0.025);
  border-left: 2px solid rgba(95,186,255,0.18);
  margin-left: 26px;
  margin-bottom: 2px;
  border-radius: 0 0 4px 4px;
}

.layer-sub-row {
  padding: 5px 16px 5px 14px;
}
.layer-sub-row:first-child { padding-top: 7px; }
.layer-sub-row:last-child  { padding-bottom: 7px; }

.layer-sub-row .layer-menu-name {
  font-size: 0.79rem;
  opacity: 0.85;
}

.layer-sub-box {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

/* Sub-category group headers inside a sub-panel (Mountains & Ranges: "Ranges" /
   "Mountains & Volcanoes") — inert dim labels, not toggles */
.layer-sub-header {
  padding: 7px 16px 2px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.55;
  cursor: default;
}

/* Depth-2 sub-panel — "Labels" nested one level under a sub-toggle
   (Ranges → Labels, Basins → Labels); one more indent step */
.layer-sub-panel-2 {
  margin-left: 14px;
  border-left-color: rgba(95,186,255,0.28);
  background: rgba(255,255,255,0.02);
}
.layer-sub-row-2 {
  padding-left: 12px;
}
.layer-sub-row-2 .layer-menu-name {
  font-size: 0.76rem;
  opacity: 0.8;
}

/* Globe / Account Actions accordion panels — indent contents one step,
   mirroring the Layer Menu rows */
#globe-menu-panel .profile-menu-item,
#account-menu-panel .profile-menu-item {
  padding-left: 26px;
}

/* Nav-style buttons inside the dropdown */
.profile-nav-btn {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.883rem;
  font-weight: 400;
  cursor: pointer;
  padding: 8px 12px;
  transition: background 0.2s;
}
.profile-nav-btn:hover {
  background: rgba(255,255,255,0.13);
}

.profile-nav-btn-danger {
  color: rgba(255, 80, 80, 1);
  border-color: rgba(255, 80, 80, 0.35);
}
html.light-mode .profile-nav-btn-danger {
  color: rgba(200, 30, 30, 1);
  border-color: rgba(200, 30, 30, 0.35);
}
.profile-nav-btn-danger:hover {
  background: rgba(200, 40, 40, 0.15);
}

/* =====================================================
   AUTH MODAL
   ===================================================== */

.auth-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
}

.auth-modal-content {
  width: 320px;
  padding: 24px 28px 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-modal-content input {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.auth-modal-content input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

html.light-mode .auth-modal-content input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.auth-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--glass-border);
}

.auth-tab {
  flex: 1;
  padding: 8px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-light);
  font-size: 0.958rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}

.auth-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

#auth-login-panel,
#auth-signup-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.close-auth-btn {
  margin-top: 4px;
  background: transparent;
  color: var(--text-light);
  border: none;
  cursor: pointer;
  font-size: 0.911rem;
}

.auth-error {
  color: #ff6b6b;
  font-size: 0.874rem;
  margin: 0;
  text-align: left;
  line-height: 1.4;
}

.auth-success {
  color: #44cc88;
  font-size: 0.874rem;
  margin: 0;
  text-align: left;
  line-height: 1.4;
}

/* Signup age screen (COPPA, 2026-07-09) — small label above the date-of-birth
   input (date inputs can't show placeholders). color-scheme keeps the native
   date-picker control dark-on-dark instead of a white browser default;
   light-mode override grouped with the other html.light-mode rules. */
.auth-field-label {
  font-size: 0.78rem;
  color: var(--text-light);
  margin: 0 0 -6px 2px;
  text-align: left;
}
#signup-birthdate,
#oauth-birthdate {
  color-scheme: dark;
}

/* OAuth sign-in (Google now, Apple later) — reuses the auth-modal system.
   #oauth-age-form needs its own flex/gap since it's a nested wrapper
   inside .auth-modal-content, not a direct flex child. */
#oauth-age-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

.auth-oauth-btn {
  width: 100%;
  text-align: center;
}

/* Contact form (About > Contact pane) + Admin Panel Messages list */
.contact-field {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
}
textarea.contact-field { resize: vertical; min-height: 90px; line-height: 1.4; }
.contact-field::placeholder { color: rgba(255, 255, 255, 0.55); }
html.light-mode .contact-field {
  background: rgba(255, 220, 210, 0.85);
  border: 1.5px solid rgba(180, 70, 100, 0.40);
}
html.light-mode .contact-field::placeholder { color: rgba(0, 0, 0, 0.35); }

.admin-msg-card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-msg-resolved { opacity: 0.55; }
.admin-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.admin-msg-cat {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;
}
.admin-msg-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
}
.admin-msg-status-new      { color: #44cc88; border-color: rgba(68, 204, 136, 0.5); }
.admin-msg-status-read     { color: var(--text-light); }
.admin-msg-status-resolved { color: var(--text-light); }
html.light-mode .admin-msg-status-new { color: #1a7848; border-color: rgba(20, 110, 65, 0.5); }
.admin-msg-time { margin-left: auto; color: var(--text-light); font-size: 0.75rem; }
.admin-msg-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  font-size: 0.9rem;
  color: var(--text);
}
.admin-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-msg-btn { padding: 4px 12px; font-size: 0.78rem; }

/* Pricing page status note, shown to Beta/Admin accounts in place of an
   upgrade prompt (they already hold the highest access). Green = the app's
   success/positive color; never gold here per the palette rule. */
.pricing-account-note {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #44cc88;
  text-align: left;
}
html.light-mode .pricing-account-note { color: #1a7848; }

.auth-forgot-link {
  background: none;
  border: none;
  padding: 0;
  color: rgba(95,186,255,0.9);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}


/* =====================================================
   BUTTONS
   ===================================================== */

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: 'Gruppo', sans-serif;
  font-weight: 400;
  font-size: 1.014rem;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.4px currentColor;
  transition: var(--transition);
  backdrop-filter: blur(6px);
}

.btn-primary {
  background: linear-gradient(135deg, #00e676, #00b85a);
  color: #001a0a;
  box-shadow: 0 4px 20px rgba(0, 230, 118, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-text-stroke: 0.4px #001a0a;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2affa0, #00e676);
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(0, 230, 118, 0.50);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.glass-btn {
  position: relative;
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  overflow: hidden;
  box-shadow: var(--metal-bevel);
  transition: var(--transition), box-shadow 0.18s ease;
}

.glass-btn:hover {
  background-color: var(--secondary-dark);
  border-color: var(--accent);
  box-shadow: var(--metal-bevel-hover), 0 0 10px rgba(0, 212, 255, 0.2);
  transform: translateY(-1px);
}

.glass-btn:active {
  box-shadow: var(--metal-bevel-active);
  transform: translateY(0);
}

.bottom-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
  flex-wrap: wrap;
}


/* =====================================================
   FORM CONTROLS
   ===================================================== */

.option-group {
  margin-bottom: 10px;
}

.option-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.856rem;
  font-weight: 600;
  color: var(--text-light);
}

/* Auto-locked selects (single selectable option, chosen for the user) */
select:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Quiz Customizer — question-count slider + pool counter */
#question-count-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

#question-count-value {
  color: #44cc88;
  font-weight: 700;
}

/* Quiz Customizer — Premium custom difficulty (time limit / no timer /
   answer-choice count). Sits inside #difficulty-wrapper, replacing the
   preset select for premium accounts. */
#custom-time-slider,
#custom-choices-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  margin-bottom: 10px;
}
#custom-time-slider:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#custom-time-value,
#custom-choices-value {
  color: #44cc88;
  font-weight: 700;
}
.custom-diff-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--text-light);
  cursor: pointer;
  margin: -4px 0 10px;
}

/* Quiz Customizer — Premium multi-select checkbox groups (Quiz Type, Region,
   continent/country sub-groups, Quiz Mode). Same look/spacing as
   .custom-diff-checkbox-row, wrapped for multiple items per group. */
.aq-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 6px 0 10px;
}
.aq-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--text-light);
  cursor: pointer;
  margin: 0;
}

/* Quiz Customizer section rows — the markup shares the module screens'
   .aq-stage classes directly (user ruling 2026-07-19: the module UI is
   exactly how the customizer should look), so container/header/label/icon/
   chevron/body chrome all come from the .aq-stage rules. These rules only
   add what the quiz form needs on top: header summary text and form-control
   body padding. Basic and advanced use the IDENTICAL collapsed-row UI —
   no tier-specific gating here. */
#quiz-menu .aq-stage__tasks { padding: 8px 14px 10px; }
#quiz-menu .aq-stage__tasks > :last-child { margin-bottom: 0; }
.aq-qz-summary {
  display: inline-block;
  font-size: 0.772rem;
  font-weight: 400;
  opacity: 0.55;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Placeholder inside an expanded row whose options depend on another row
   (e.g. Quiz Mode before any quiz type is checked) */
.aq-qz-hint {
  font-size: 0.8rem;
  color: var(--text-light);
}
/* Advanced Quiz Mode body — one lightly-tinted sub-panel per checked quiz
   type (single blue accent for all — per-dataset colors rejected as
   distracting, user 2026-07-19; the uppercase title alone identifies the
   dataset; left-accent border mirrors the .aq-stage__header idiom).
   Full-width children of the .aq-checkbox-group flex row, so they stack;
   labels wrap inside each panel as their own row. */
.aq-qz-mode-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 7px 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  border-left: 3px solid rgba(95, 186, 255, 0.35);
  background-color: rgba(95, 186, 255, 0.06);
}
.aq-qz-mode-group__title {
  flex-basis: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.75;
}

.quiz-pool-note {
  margin: 2px 0 10px;
  font-size: 0.82rem;
  text-align: center;
  color: var(--text-light);
}

.quiz-pool-note span {
  color: #44cc88;
  font-weight: 700;
}

/* Pool count/slider are still loading (async dataset fetch in flight) —
   pulses so a stale "0" never reads as a real answer. */
@keyframes quiz-pool-loading-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}
.quiz-pool-note--loading {
  animation: quiz-pool-loading-pulse 1.1s ease-in-out infinite;
}

/* Mode / difficulty explainer lines — Countries-type launches skip the
   tutorial menu, so the mode line is often the only rules a first-time
   customizer user sees before play starts. */
.quiz-mode-desc {
  margin: -4px 0 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-light);
  opacity: 0.85;
}

/* Empty-pool / fetch-failure warning — same red as .auth-error, not the
   reserved map-only gold/yellow. */
.quiz-pool-warning {
  margin: 2px 0 10px;
  font-size: 0.8rem;
  text-align: center;
  color: #ff6b6b;
}

#start-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border);
  color: var(--text) !important;
  font-size: 0.958rem;
  font-weight: 500;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  appearance: none !important;
  cursor: pointer;
  box-shadow: var(--metal-bevel);
  transition: var(--transition), box-shadow 0.18s ease;
  /* Arrow icon layered above the metal sheen — first layer paints on top. */
  background-image:
    url("data:image/svg+xml;utf8,<svg fill='%23e0e6f0' height='20' width='20' viewBox='0 0 20 20'><polygon points='5,7 15,7 10,13'/></svg>"),
    var(--metal-sheen) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 10px center, 0 0 !important;
  background-size: 12px, 100% 100% !important;
}

select:hover,
select:focus {
  background: var(--secondary-dark) !important;
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
}

select option {
  background-color: #0f152b;
  color: #e0e6f0;
}

/* Light mode — solid warm background so text is always readable */
html.light-mode select {
  background: rgba(255, 228, 210, 0.92) !important;
  color: #1e0c16 !important;
  border-color: rgba(180, 70, 100, 0.40);
  background-image: url("data:image/svg+xml;utf8,<svg fill='%231e0c16' height='20' width='20' viewBox='0 0 20 20'><polygon points='5,7 15,7 10,13'/></svg>") !important;
}

html.light-mode select option {
  background-color: #fde8d8;
  color: #1e0c16;
}

/* =====================================================
   CONTINENT DROPDOWN (AtlasPath module filter)
   ===================================================== */

.continent-dropdown {
  position: relative;
  margin-bottom: 20px;
}

.continent-dropdown-trigger {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 10px 17px;
  border-radius: 10px;
  background-color: var(--glass-bg);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.02) 38%,
    rgba(0, 0, 0, 0.09) 60%,
    rgba(255, 255, 255, 0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.26);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.continent-dropdown-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.15) 47%, rgba(255, 255, 255, 0.02) 64%, transparent 80%);
  background-size: 220% 220%;
  background-position: 100% 0%;
  pointer-events: none;
  transition: background-position 0.5s ease;
}
.continent-dropdown-trigger:hover::before {
  background-position: 0% 100%;
}
.continent-dropdown-name,
.continent-dropdown-arrow,
.continent-dropdown-icon,
.continent-dropdown-progress,
.continent-dropdown-right {
  position: relative;
  z-index: 1;
}

.continent-dropdown-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.continent-dropdown-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: rgba(95, 186, 255, 0.85);
}
.continent-dropdown-icon svg {
  width: 100%;
  height: 100%;
}

.continent-dropdown-name {
  flex: 1;
}

.continent-dropdown-progress {
  flex-shrink: 0;
  color: var(--text);
  font-family: 'Syne', 'Segoe UI', sans-serif;
  font-weight: 500;
  -webkit-text-stroke: 0;
}

.continent-dropdown-trigger:hover {
  background-color: var(--secondary-dark);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 1px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 200, 255, 0.12);
}

.continent-dropdown.open .continent-dropdown-trigger {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.continent-dropdown-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.continent-dropdown-name.placeholder {
  font-weight: 500;
  color: var(--text-light);
}

.continent-dropdown-arrow {
  font-size: 0.65rem;
  color: var(--text);
  opacity: 0.45;
  font-family: 'Syne', 'Segoe UI', sans-serif;
  -webkit-text-stroke: 0;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.continent-dropdown.open .continent-dropdown-arrow {
  transform: rotate(180deg);
}

.continent-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  border: 1px solid var(--accent);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(8, 14, 28, 0.97);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  padding: 4px;
}

.continent-dropdown.open .continent-dropdown-menu {
  display: block;
}

.continent-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 7px;
  border: 1px solid transparent;
  text-align: left;
  margin-bottom: 3px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(0, 0, 0, 0.06) 65%, transparent 100%);
  transition: background 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease, border-color 0.18s ease;
  transform-origin: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.continent-option-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-light);
  transition: color 0.18s ease;
}
.continent-option-icon svg {
  width: 100%;
  height: 100%;
}
.continent-option:hover .continent-option-icon,
.continent-option.selected .continent-option-icon {
  color: var(--accent);
}

.continent-option-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.continent-option-progress {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-light);
  flex-shrink: 0;
  white-space: nowrap;
}

.continent-option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 47%, rgba(255, 255, 255, 0.02) 64%, transparent 80%);
  background-size: 220% 220%;
  background-position: 100% 0%;
  pointer-events: none;
  transition: background-position 0.45s ease;
}
.continent-option:hover::before {
  background-position: 0% 100%;
}
.continent-option-name,
.continent-option-facts,
.continent-option-icon,
.continent-option-text,
.continent-option-progress {
  position: relative;
  z-index: 1;
}

.continent-option:last-child { margin-bottom: 0; }

.continent-option:hover {
  background-color: rgba(0, 200, 255, 0.12);
  border-color: rgba(0, 200, 255, 0.35);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.18),
              inset 0 0 12px rgba(0, 200, 255, 0.06);
  transform: scale(1.025);
}

.continent-option.selected {
  background-color: rgba(0, 200, 255, 0.13);
  border-color: rgba(0, 200, 255, 0.50);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.12);
}

.continent-option-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.continent-option-facts {
  display: block;
  font-size: 0.71rem;
  color: var(--text-light);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

.continent-option.selected .continent-option-name { color: var(--accent); }
.continent-option:hover .continent-option-name { color: var(--accent); }

html.light-mode .continent-dropdown-trigger {
  border: 1.5px solid rgba(180, 70, 100, 0.40);
}

html.light-mode .continent-dropdown-icon {
  color: rgba(74, 158, 255, 0.85);
}

html.light-mode .continent-option:hover .continent-option-icon,
html.light-mode .continent-option.selected .continent-option-icon {
  color: var(--accent);
}

html.light-mode .continent-dropdown.open .continent-dropdown-trigger,
html.light-mode .continent-dropdown-trigger:hover {
  border-color: var(--accent);
}

html.light-mode .continent-dropdown-menu {
  background: rgba(255, 235, 220, 0.98);
  border-color: var(--accent);
}

html.light-mode .continent-option:hover {
  background-color: rgba(160, 40, 120, 0.10);
  border-color: rgba(160, 40, 120, 0.40);
  box-shadow: 0 0 16px rgba(160, 40, 120, 0.14),
              inset 0 0 10px rgba(160, 40, 120, 0.05);
}

html.light-mode .continent-option.selected {
  background-color: rgba(160, 40, 120, 0.12);
  border-color: rgba(160, 40, 120, 0.50);
  box-shadow: 0 0 10px rgba(160, 40, 120, 0.10);
}

html.light-mode .continent-option.selected .continent-option-name { color: var(--accent); }



/* =====================================================
   HOME MENU
   ===================================================== */

/* ── Home panel — draggable wrapper for title + menu ─────────────────────── */
#home-panel {
  width: 380px;
  max-width: calc(100vw - 16px);
  text-align: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  margin: 0 auto;
}

#home-panel.menu-dragging {
  cursor: grabbing;
}

/* Snap variants: narrower width + aligned text */
#home-panel.snap-left {
  width: 380px;
  text-align: left;
}

#home-panel.snap-right {
  width: 380px;
  text-align: right;
}

/* ── Site header — floats above the active menu panel ───────────────────── */
#site-header {
  width: 380px;
  max-width: calc(100vw - 16px);
  text-align: center;
  user-select: none;
  touch-action: none;
  margin: 32px auto 0; /* 32px top: centers in flow, lowers header slightly from top */
  /* position, left, top, z-index all set by JS after intro */
}

/* Remove generic header margin when inside the floating companion */
#site-header header {
  margin: 0 0 2px 0;  /* zero all sides; 2px bottom is the only gap before the panel */
  text-align: inherit;
}

/* Snap alignment mirrors the home-panel snap classes */
#site-header.sh-snap-left  { text-align: left; }
#site-header.sh-snap-right { text-align: right; }
#site-header.sh-snap-left  .subtitle,
#site-header.sh-snap-right .subtitle {
  white-space: nowrap;
  overflow: hidden;
}

/* Section inside panel: fill panel width, no overflow, no auto side-margins.
   margin: 0 prevents the generic section margin-top (20px) from collapsing
   through #home-panel and mismatching the post-makeFixed gap (HEADER_GAP=2px). */
#home-panel #home-menu {
  max-width: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  /* Short viewports: scroll internally instead of pushing buttons below the
     fold — same treatment as .sd-fixed submenu panels (scrollbar hidden).
     Overflow lives on the glass section itself (not #home-panel) so the
     card's own box-shadow is never clipped. */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: none;
}
#home-panel #home-menu::-webkit-scrollbar { display: none; }

/* Buttons fill panel width, never wrap text */
#home-panel button {
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
  touch-action: auto;
  white-space: nowrap;
}

/* Button text alignment mirrors snap direction */
#home-panel.snap-left button {
  text-align: left;
  padding-left: 14px;
}

#home-panel.snap-right button {
  text-align: right;
  padding-right: 14px;
}

/* ── Submenu snap — position is set by submenu-drag.js (position:fixed left/top,
   mirrors menu-drag.js's home-panel snap exactly); these classes only handle
   text/content alignment so margin rules are not used here. ──────────────── */
.submenu-snap-left {
  text-align: left;
}

.submenu-snap-right {
  text-align: right;
}

.submenu-snap-left .glass-btn,
.submenu-snap-left .btn-primary {
  text-align: left;
  padding-left: 14px;
}

.submenu-snap-right .glass-btn,
.submenu-snap-right .btn-primary {
  text-align: right;
  padding-right: 14px;
}

/* ── Submenu content alignment — override elements with hardcoded text-align ─ */
.submenu-snap-left h2,
.submenu-snap-left .aq-hub-subtitle,
.submenu-snap-left .aq-coming-soon {
  text-align: left;
}

.submenu-snap-right h2,
.submenu-snap-right .aq-hub-subtitle,
.submenu-snap-right .aq-coming-soon {
  text-align: right;
}

/* Module screen header (title + desc + filter wrap) follows snap side —
   .aq-module-header hardcodes text-align: center, which its <p> children
   inherit, so it needs an explicit override like .aq-hub-subtitle does. */
.submenu-snap-left .aq-module-header {
  text-align: left;
}
.submenu-snap-right .aq-module-header {
  text-align: right;
}

/* About/Contact: align child stack + free button from fixed inline width */
.submenu-snap-left .menu-container {
  align-items: flex-start;
}
.submenu-snap-right .menu-container {
  align-items: flex-end;
}
#about-return-btn {
  width: auto;
}

/* ── Submenu dim — applied by menu-drag.js when profile dropdown is open ─── */
.submenu-dimmed {
  position: relative;
}
.submenu-dimmed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--radius);
  z-index: 200;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}

/* ── Submenu drag — freely draggable floating menu panels ──────────────────── */

/* Drag handle: grabby cursor + no text selection */
.sd-handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.sd-dragging .sd-handle,
.sd-dragging {
  cursor: grabbing !important;
  user-select: none;
}

/* Cyan outline glow while dragging; suppress all child transitions so hover
   animations on cards inside the panel don't fire during movement */
.sd-dragging {
  box-shadow: 0 0 0 2px rgba(95, 186, 255, 0.50),
              0 16px 52px rgba(0, 0, 0, 0.60) !important;
  transition: none !important;
}
.sd-dragging * {
  transition: none !important;
}

/* Tall panels scroll internally so content is never clipped by the viewport.
   Scrollbar is hidden visually (no track/thumb) but wheel/swipe scroll still works. */
section.menu-screen.sd-fixed {
  max-height: calc(100vh - 160px); /* leaves room for site-header (~80px) + gap above + margin below */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox — hidden but scrollable */
  cursor: grab;  /* whole panel background is a drag surface */
}
section.menu-screen.sd-fixed::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
/* When continent dropdown is open inside a draggable panel, let it escape the
   scroll-container clipping so all 6 options are visible below the trigger. */
section.menu-screen.sd-fixed:has(.continent-dropdown.open) {
  overflow-y: visible;
}
/* Restore natural cursors for interactive children inside a draggable panel */
section.menu-screen.sd-fixed button,
section.menu-screen.sd-fixed a,
section.menu-screen.sd-fixed select,
section.menu-screen.sd-fixed label,
section.menu-screen.sd-fixed [role="button"],
section.menu-screen.sd-fixed .aq-card,
section.menu-screen.sd-fixed .aq-stage__header,
section.menu-screen.sd-fixed .continent-option,
section.menu-screen.sd-fixed .aq-task--available { cursor: pointer; }
section.menu-screen.sd-fixed input[type="text"],
section.menu-screen.sd-fixed input[type="search"],
section.menu-screen.sd-fixed input[type="number"],
section.menu-screen.sd-fixed textarea { cursor: text; }
section.menu-screen.sd-fixed input[type="checkbox"],
section.menu-screen.sd-fixed input[type="radio"] { cursor: pointer; }

/* Dim overlay — shown when profile dropdown overlaps the panel */
#home-menu-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--radius);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* Hero CTA — primary entry point, architecturally distinct */
.aq-hero-btn {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.16), rgba(0, 230, 118, 0.14)) !important;
  border-color: rgba(0, 200, 255, 0.38) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  font-family: 'Gruppo', sans-serif !important;
  letter-spacing: 0.02em !important;
  padding: 15px 20px !important;
  margin-bottom: 6px;
  box-shadow: 0 0 28px rgba(0, 200, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  animation: none !important;
}

.aq-hero-btn:hover {
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.26), rgba(0, 230, 118, 0.22)) !important;
  border-color: rgba(0, 200, 255, 0.65) !important;
  box-shadow: 0 0 36px rgba(0, 200, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-2px);
  animation: none !important;
}

#test-menu { text-align: center; }

#test-menu button {
  width: 100%;
  margin-top: 6px;
}

button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  animation: none;
}


/* =====================================================
   GLASS CARD / PANEL
   ===================================================== */

.glass-card {
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen-soft);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: var(--glass-shadow), var(--metal-bevel);
  color: var(--text);
  /* about-us's cards set an explicit width:100% inline alongside their own
     padding — without border-box the padding stacks outside that width,
     pushing the card wider than its container (invisible with slack around
     it, but clipped once the panel is snapped flush to a screen edge). */
  box-sizing: border-box;
}


/* =====================================================
   GAME SCREEN — SHARED LAYOUT
   All quiz/learn screens use .quiz-display
   ===================================================== */

.quiz-display {
  background: var(--glass-bg);
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  margin-bottom: 20px;
}

/* Header row: counter | timer | score (or mode-specific equivalents) */
.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  min-height: 32px;
}

.quiz-header p,
.quiz-header div {
  font-size: 1.014rem;
  color: var(--text-light);
  margin: 0;
  min-width: 140px;
}

.quiz-header p:first-child,
.quiz-header div:first-child { text-align: left; }

.quiz-header p:last-child,
.quiz-header div:last-child  { text-align: right; }

/* Centre slot (timer / mode label) */
#timer,
#learn-mode-label {
  text-align: center !important;
  min-width: 120px;
  font-size: 1.069rem;
  font-weight: 600;
  color: var(--text);
}


/* =====================================================
   PROGRESS BAR
   ===================================================== */

.progress-bar-container {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}

#progress-bar,
#learn-accuracy-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00ffc8, #00aaff);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  transition: width 0.35s ease;
}


/* =====================================================
   QUESTION AREA
   ===================================================== */

.question-container {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.question-container h2 {
  font-size: 1.767rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}


/* =====================================================
   FLAG DISPLAY — QUESTION CONTEXT
   Applies to quiz + learn modes
   ===================================================== */

#flag-container,
#learn-flag-container {
  height: var(--flag-q-height);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}

#flag-container img,
#learn-flag-container img {
  display: block;
  max-width: var(--flag-q-max-width);
  max-height: var(--flag-q-height);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  padding: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}


/* =====================================================
   ANSWER GRIDS
   ===================================================== */

#answers,
#learn-answers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

/* Column count is set via inline style at question-render time
   (quiz.js loadQuestion / _answerGridColumns), scaling with the actual
   choice count — supports Premium's custom 2-8 choice range with no new
   CSS per count. */


/* =====================================================
   ANSWER TILES — unified across all modes
   ===================================================== */

.answer-option {
  background: rgba(255, 255, 255, 0.09);
  padding: 16px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  text-align: center;
  font-size: 1.069rem;
  font-weight: 500;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  position: relative;
}

.answer-key-hint {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 0.64rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
  line-height: 1;
  pointer-events: none;
  font-family: monospace;
  user-select: none;
}

html.light-mode .answer-key-hint {
  color: rgba(0, 0, 0, 0.22);
}

.answer-option:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.answer-option.correct {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  transform: none;
}

.answer-option.incorrect {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: white !important;
  transform: none;
}


/* =====================================================
   FLAG IMAGES — ANSWER CHOICE CONTEXT
   Applies to flag-as-answer in all modes
   ===================================================== */

.answer-flag {
  display: block;
  max-width: var(--flag-a-max-width);
  max-height: var(--flag-a-max-height);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  padding: 4px;
  margin: 0 auto;
}


/* =====================================================
   FEEDBACK LINE
   ===================================================== */

#feedback {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  min-height: 28px;
  margin: 10px 0;
  color: var(--text);
}


/* =====================================================
   PUZZLES — SCOPE + CONTINENT PICKERS (Games menu)
   ===================================================== */

/* Timed/Relaxed toggle — layout only; .glass-btn/.alm-opt-btn already carry
   the full liquid-metal + selected-state recipe (see tutorial.js options row). */
.puzzle-mode-toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 14px;
}
.puzzle-mode-toggle .puzzle-mode-btn {
  min-width: 5.5rem;
}

/* Personal-best time, shown in .aq-stage__header-right next to the chevron
   on Puzzle menu rows — the one bit of row content with no Countries-module
   equivalent, so it keeps its own bespoke (but minimal) styling. */
.game-row-best {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Result-overlay best-time line (standalone Puzzles only) */
.puzzle-result-best-new {
  color: #44cc88;
  font-weight: 600;
}


/* =====================================================
   ATLASPATH CURRICULUM
   ===================================================== */

/* Main-menu entry button */
.aq-hub-main-btn {
  background: linear-gradient(135deg, rgba(74,158,255,0.18), rgba(68,204,136,0.18));
  border-color: rgba(74,158,255,0.45);
  font-weight: 700;
}

/* Hub screen — wider than standard menu-screen. Also needs a taller top
   reserve than the shared .sd-fixed cap: with a full 13-module list this
   panel is tall enough to hit the bottom-of-viewport clamp, which pins its
   top (and the site-header floating above it) as high as the layout allows —
   .sd-fixed's default reserve only left room for the header's own height,
   not the profile bar above that, so the header got squeezed above the bar. */
#aq-hub {
  max-width: 580px;
  max-height: calc(100vh - 250px);
}

/* Quiz Customizer — same taller reserve as #aq-hub/#encyclopedia/#about-us/
   #aq-module above. The 2026-07-19 redesign grew this panel from 2-3 selects
   to up to 7 stacked fields (Quiz Type, Region, Continent/Country, Quiz Mode
   + description, Difficulty + description, question slider) plus the pool
   note/warning and Start button — tall enough to risk the same bottom-of-
   viewport clamp that squeezed the site-header into the profile bar on the
   other four panels, for the identical reason (the shared .sd-fixed reserve
   only budgets room for the header's own height, not the profile bar above
   it too). */
#quiz-menu {
  max-height: calc(100vh - 250px);
  /* Wider than the standard 380px .menu-screen — five section rows with
     header summaries need the breathing room (user feedback 2026-07-19:
     "feels cluttered"). 480px matches #aq-module, whose row UI this menu
     mirrors. Flow layout still clamps to the viewport on phones;
     submenu-drag locks whatever width actually renders. */
  max-width: 480px;
}

#aq-hub h2 { margin-bottom: 2px; }

.aq-hub-subtitle {
  font-size: 0.911rem;
  color: var(--text-light);
  margin: 0 0 14px;
  text-align: center;
}

/* Coming-soon notice */
.aq-coming-soon {
  font-size: 0.837rem;
  color: var(--text-light);
  text-align: center;
  margin: 10px 0 0;
  font-style: italic;
}

/* Module list — single column */
.aq-module-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Module card */
.aq-card {
  position: relative;
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--metal-bevel);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.aq-card:hover {
  transform: translateY(-2px);
  border-color: rgba(95, 186, 255, 0.45);
  box-shadow: var(--metal-bevel-hover), 0 6px 18px rgba(95, 186, 255, 0.12);
}

/* Top row: icon · name · sep · desc */
.aq-card__top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.aq-card__name {
  font-weight: 700;
  font-size: 0.939rem;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

.aq-card__sep {
  color: var(--text-light);
  flex-shrink: 0;
  font-size: 0.856rem;
}

.aq-card__desc {
  font-size: 0.8rem;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  /* Right-flush the subtext to the card's far edge in every panel state
     (free and both snaps): "Countries ······ subtext" spread. */
  text-align: right;
}

/* Bottom row: label + bar + status */
.aq-card__bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aq-card__progress-label {
  font-size: 0.698rem;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

.aq-card__bar-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.aq-card__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a9eff, #44cc88);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.aq-card__status {
  font-size: 0.698rem;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Module screen ── */
/* #aq-stages (levels/stages list) is dynamically populated by the curriculum
   and can run long — same taller top reserve as #aq-hub (see that comment
   for the full explanation). */
#aq-module {
  max-width: 480px;
  max-height: calc(100vh - 250px);
}

.aq-module-header {
  text-align: center;
  margin-bottom: 10px;
}

.aq-module-header h2 {
  margin: 0 0 4px;
  font-size: 1.442rem;
}

.aq-module-header p {
  margin: 0 0 8px;
  font-size: 0.874rem;
  color: var(--text-light);
}

#aq-filter-select {
  padding: 6px 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.874rem;
  cursor: pointer;
}

/* Pipeline indicator */
.aq-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 14px;
}

.aq-pip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.35;
  min-width: 60px;
  transition: opacity 0.2s;
}

.aq-pip--active {
  opacity: 1;
  border-color: var(--sc, rgba(95,186,255,0.5));
  box-shadow: 0 0 8px rgba(95, 186, 255, 0.18);
}

.aq-pip--done {
  opacity: 1;
  border-color: #44cc88;
  background: rgba(68, 204, 136, 0.1);
}

.aq-pip__icon { font-size: 1.014rem; }

.aq-pip__name {
  font-size: 0.642rem;
  color: var(--text-light);
  margin-top: 2px;
}

.aq-pip-arrow {
  font-size: 1.172rem;
  color: var(--text-light);
  opacity: 0.3;
  align-self: center;
}

/* Stages */
.aq-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.aq-continent-prompt {
  text-align: center;
  color: var(--text-muted, rgba(255,255,255,0.45));
  font-size: 0.939rem;
  padding: 18px 0 6px;
  margin: 0;
}

.aq-stage {
  position: relative;
  background-color: var(--glass-bg);
  background-image: linear-gradient(165deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.01) 35%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.aq-stage:hover {
  border-color: rgba(95, 186, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(95, 186, 255, 0.07);
}

.aq-stage__header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 0.939rem;
  letter-spacing: 0.01em;
  border-left: 3px solid rgba(95, 186, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.025);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.02) 38%,
    rgba(0, 0, 0, 0.10) 62%,
    rgba(255, 255, 255, 0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 1px rgba(0, 0, 0, 0.30);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.aq-stage__header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.02) 64%, transparent 80%);
  background-size: 220% 220%;
  background-position: 100% 0%;
  pointer-events: none;
  transition: background-position 0.5s ease;
}
.aq-stage__header:hover::before {
  background-position: 0% 100%;
}
.aq-stage__header:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-left-color: rgba(95, 186, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    inset 0 0 24px rgba(95, 186, 255, 0.06);
}
.aq-stage__header:active {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.aq-stage__label,
.aq-stage__header-right {
  position: relative;
  z-index: 1;
}

.aq-stage__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.aq-stage__icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: rgba(95, 186, 255, 0.85);
  transition: color 0.18s ease, transform 0.18s ease;
}
.aq-stage__icon svg {
  width: 100%;
  height: 100%;
}
.aq-stage__header:hover .aq-stage__icon {
  color: #5fbaff;
  transform: scale(1.08);
}

.aq-stage__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aq-stage__chevron {
  font-size: 0.65rem;
  opacity: 0.45;
  display: inline-block;
  transition: transform 0.18s ease;
}
.aq-stage--collapsed .aq-stage__chevron {
  transform: rotate(-90deg);
}
.aq-stage--collapsed .aq-stage__tasks {
  display: none;
}

/* Inert "coming soon" row (Puzzle menu's Country scope) — same disabled
   treatment .game-row:disabled used to give, but pointer-events:none also
   suppresses the hover glow since these rows carry no click handler. */
.aq-stage--soon {
  opacity: 0.5;
  pointer-events: none;
}

/* Fixed two-column grid — label and value each own a column so neither
   shifts position when the digit count changes (e.g. 0/1 vs 0/15). */
.aq-stage__count {
  display: grid;
  grid-template-columns: 40px 38px;
  column-gap: 6px;
  align-items: baseline;
  font-size: 0.772rem;
  font-variant-numeric: tabular-nums;
}
.aq-stage__count-label {
  font-weight: 400;
  opacity: 0.55;
  text-align: left;
}
.aq-stage__count-value {
  font-weight: 700;
  opacity: 0.85;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.aq-stage__tasks {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Task rows */
.aq-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.921rem;
  transition: background 0.15s;
}

.aq-task--available {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.04);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(0, 0, 0, 0.08) 62%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 1px rgba(0, 0, 0, 0.22);
  color: var(--text);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.aq-task--available:hover {
  background-color: rgba(95, 186, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.aq-task--done {
  background-color: rgba(68, 204, 136, 0.07);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(0, 0, 0, 0.08) 62%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 1px rgba(0, 0, 0, 0.22);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.aq-task--done:hover {
  background-color: rgba(68, 204, 136, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.aq-task--soon {
  color: var(--text-light);
  opacity: 0.45;
  cursor: default;
}

.aq-task--locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.aq-badge--locked {
  background: rgba(120, 120, 120, 0.25);
  color: #888;
  border: 1px solid rgba(120,120,120,0.3);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.8rem;
}

/* Badges */
.aq-badge {
  font-size: 0.753rem;
  padding: 2px 9px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 8px;
}

.aq-badge--done {
  background-color: rgba(68, 204, 136, 0.18);
  background-image: var(--lm-green-metal);
  box-shadow: var(--metal-bevel);
  color: #44cc88;
}
.aq-badge--go {
  background-color: rgba(95, 186, 255, 0.18);
  background-image: var(--lm-blue-metal);
  box-shadow: var(--metal-bevel);
  color: #4a9eff;
}
.aq-badge--continue {
  background-color: rgba(230, 180, 40, 0.32);
  background-image: var(--lm-gold-metal);
  border: 1px solid rgba(230, 180, 40, 0.45);
  box-shadow: var(--metal-bevel), 0 0 6px rgba(230, 180, 40, 0.25);
  color: #f0c331;
}
.aq-badge--soon     { background: rgba(255,255,255,0.06); color: var(--text-light); }

/* Explore progress bar (shown on hub below the Explore task row) */
.aq-explore-progress-wrap {
  padding: 5px 4px 8px;
}
.aq-explore-progress-track {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.aq-explore-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3ab87a, #44cc88);
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.aq-explore-progress-label {
  display: block;
  font-size: 0.69rem;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
}
html.light-mode .aq-explore-progress-track { background: rgba(0,0,0,0.10); }
html.light-mode .aq-explore-progress-label { color: rgba(0,0,0,0.38); }

/* Explore panel in-header progress bar */
.explore-panel-pb-wrap {
  padding: 4px 12px 2px;
}
.explore-panel-pb-wrap .aq-explore-progress-label {
  font-size: 0.66rem;
  margin-top: 3px;
}

/* Light-mode overrides */
html.light-mode .aq-card {
  border-color: rgba(0, 0, 0, 0.1);
}
html.light-mode .aq-card:hover {
  border-color: rgba(74,158,255,0.5);
}
html.light-mode .aq-stage {
  border-color: rgba(0, 0, 0, 0.1);
}
html.light-mode .aq-stage__header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
html.light-mode .aq-stage__header {
  border-left-color: rgba(74, 158, 255, 0.4);
}
html.light-mode .aq-stage__header:hover {
  border-left-color: rgba(74, 158, 255, 0.8);
}
html.light-mode .aq-stage__icon {
  color: rgba(74, 158, 255, 0.85);
}
html.light-mode .aq-stage__header:hover .aq-stage__icon {
  color: #2f7ce0;
}
html.light-mode .aq-task--available:hover {
  background-color: rgba(74, 158, 255, 0.08);
}
html.light-mode .aq-badge--continue {
  color: #1a1400;
}

/* ─── Levels layout (Countries module) ───────────────────────────────────── */
.aq-levels-activities {
  flex-direction: column;
  gap: 5px;
}

.aq-levels-activity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.aq-levels-activity__name {
  font-size: 0.921rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.aq-levels-activity__levels {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.aq-level-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  padding: 5px 0;
  border-radius: 8px;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.aq-level-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 47%, rgba(255, 255, 255, 0.02) 64%, transparent 80%);
  background-size: 220% 220%;
  background-position: 100% 0%;
  pointer-events: none;
  transition: background-position 0.45s ease;
}
.aq-level-btn:hover::before {
  background-position: 0% 100%;
}
.aq-level-btn__num,
.aq-level-btn__status {
  position: relative;
  z-index: 1;
}

.aq-level-btn__num {
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.7;
  line-height: 1;
  margin-bottom: 2px;
}

.aq-level-btn__status {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.aq-level-btn--available {
  cursor: pointer;
  background-color: rgba(95, 186, 255, 0.13);
  background-image: var(--lm-blue-metal);
  border-color: rgba(95, 186, 255, 0.35);
  box-shadow: var(--metal-bevel);
  color: #5fbaff;
}
.aq-level-btn--available:hover {
  background-color: rgba(95, 186, 255, 0.25);
  box-shadow: var(--metal-bevel-hover);
  transform: scale(1.05);
}

.aq-level-btn--done {
  cursor: pointer;
  background-color: rgba(68, 204, 136, 0.13);
  background-image: var(--lm-green-metal);
  border-color: rgba(68, 204, 136, 0.35);
  box-shadow: var(--metal-bevel);
  color: #44cc88;
}
.aq-level-btn--done:hover {
  background-color: rgba(68, 204, 136, 0.25);
  box-shadow: var(--metal-bevel-hover);
  transform: scale(1.05);
}

.aq-level-btn--locked {
  background: rgba(120, 120, 120, 0.1);
  border-color: rgba(120, 120, 120, 0.2);
  color: #666;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.aq-level-btn--soon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-light);
  cursor: default;
  opacity: 0.38;
  pointer-events: none;
}

html.light-mode .aq-levels-activity {
  background: rgba(0, 0, 0, 0.025);
}
html.light-mode .aq-level-btn--available {
  background-color: rgba(74, 158, 255, 0.11);
  border-color: rgba(74, 158, 255, 0.4);
  color: #1a5bc4;
}
html.light-mode .aq-level-btn--done {
  background-color: rgba(26, 120, 72, 0.1);
  border-color: rgba(26, 120, 72, 0.35);
  color: #1a7848;
}
html.light-mode .aq-level-btn--locked { color: #aaa; }

/* ----------------------------------------------------------------
   Practice section — Countries module hub
---------------------------------------------------------------- */
.aq-practice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aq-practice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}

.aq-practice-row--soon {
  opacity: 0.48;
}

.aq-practice-name {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
  flex-shrink: 0;
}

.aq-practice-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid rgba(95, 186, 255, 0.45);
  background-color: rgba(95, 186, 255, 0.12);
  background-image: var(--lm-blue-metal);
  box-shadow: var(--metal-bevel);
  color: #5fbaff;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
}
.aq-practice-btn:hover {
  background-color: rgba(95, 186, 255, 0.22);
  box-shadow: var(--metal-bevel-hover);
  transform: scale(1.04);
}
.aq-practice-btn:active {
  box-shadow: var(--metal-bevel-active);
  transform: scale(0.97);
}

.aq-practice-btn--mode {
  padding: 5px 10px;
  min-width: 36px;
  text-align: center;
}

.aq-practice-modes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.aq-practice-modes-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 2px;
}

.aq-practice-always {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(95, 186, 255, 0.75);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

html.light-mode .aq-practice-name {
  color: var(--text);
}
html.light-mode .aq-practice-btn {
  border-color: rgba(74, 158, 255, 0.4);
  background-color: rgba(74, 158, 255, 0.09);
  color: #1a5bc4;
}
html.light-mode .aq-practice-btn:hover {
  background-color: rgba(74, 158, 255, 0.18);
}
html.light-mode .aq-practice-modes-label {
  color: rgba(0, 0, 0, 0.38);
}
html.light-mode .aq-practice-always {
  color: rgba(74, 158, 255, 0.7);
}

/* ── Curriculum Goals (Countries) ─────────────────────────────── */
.aq-goals-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 4px 0 14px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(95, 186, 255, 0.45);
  background-color: rgba(95, 186, 255, 0.12);
  background-image: var(--lm-blue-metal);
  box-shadow: var(--metal-bevel);
  color: #5fbaff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.aq-goals-btn svg { width: 17px; height: 17px; flex: none; }
.aq-goals-btn:hover {
  background-color: rgba(95, 186, 255, 0.2);
  box-shadow: var(--metal-bevel-hover);
}
.aq-goals-btn:active {
  box-shadow: var(--metal-bevel-active);
  transform: scale(0.99);
}
html.light-mode .aq-goals-btn {
  border-color: rgba(74, 158, 255, 0.4);
  background-color: rgba(74, 158, 255, 0.09);
  color: #1a5bc4;
}

.aq-goals { animation: aqGoalsFade 0.2s ease; }
@keyframes aqGoalsFade { from { opacity: 0; } to { opacity: 1; } }

.aq-goals__intro {
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 14px;
}
.aq-goals__intro strong { color: #44cc88; font-weight: 600; }

.aq-goals__summary { margin: 0 0 18px; }

.aq-goals__group { margin-bottom: 16px; }
.aq-goals__group-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.aq-goals__group-sub {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}

.aq-goals__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background-color: rgba(255, 255, 255, 0.03);
}
.aq-goals__item--done {
  border-color: rgba(68, 204, 136, 0.4);
  background-color: rgba(68, 204, 136, 0.08);
}
.aq-goals__check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}
.aq-goals__item--done .aq-goals__check {
  color: #fff;
  background-color: #44cc88;
  border-color: #44cc88;
}
.aq-goals__text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
}
.aq-goals__levels { display: flex; gap: 5px; flex: none; }
.aq-goals__lv {
  min-width: 26px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.03);
}
.aq-goals__lv--done {
  color: #44cc88;
  border-color: rgba(68, 204, 136, 0.5);
  background-color: rgba(68, 204, 136, 0.12);
}

html.light-mode .aq-goals__intro { color: rgba(0, 0, 0, 0.55); }
html.light-mode .aq-goals__group-sub { color: rgba(0, 0, 0, 0.4); }
html.light-mode .aq-goals__item { background-color: rgba(0, 0, 0, 0.02); }
html.light-mode .aq-goals__check { color: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.2); }
html.light-mode .aq-goals__lv { color: rgba(0, 0, 0, 0.4); border-color: rgba(0, 0, 0, 0.14); }

/* =====================================================
   REVIEW SCREEN
   ===================================================== */

.review-section {
  background: rgba(255, 80, 80, 0.06);
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 80, 80, 0.22);
  backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
  text-align: center;
  color: var(--text);
}

.review-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.review-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  color: var(--text);
}

.review-summary-card {
  text-align: center;
  font-weight: 600;
}

.review-summary-line { margin: 6px 0; }

.review-header-row {
  display: flex;
  font-weight: bold;
  gap: 20px;
}

.review-header-cell,
.review-cell { flex: 1; }

.review-row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.review-flag {
  height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}


/* =====================================================
   STATS SCREEN
   ===================================================== */

/* The stats sheet scrolls INTERNALLY rather than growing the page. Two reasons:
   (1) the page-level scrollbar it used to create was inconsistent with every
   other panel, and (2) globe.js's window wheel handler preventDefaults every
   wheel event that isn't inside a scrollable element (_isInWheelScrollable
   walks up to document.body and never inspects body itself), so a page-scrolling
   stats sheet couldn't be wheel-scrolled at all — the wheel just zoomed the
   globe behind it. Same hidden-scrollbar convention as section.menu-screen.sd-fixed. */
.stats-screen {
  max-width: 900px;
  /* Height math is CONTENT-box: the base `section` rule never opts into
     border-box (only section.menu-screen does), so padding + border are ADDED
     to max-height. Budget against the viewport:
        40px  margins  (section margin: 20px auto — top + bottom)
        40px  padding  (section padding: 20px 22px — top + bottom)
         2px  borders  (1px top + 1px bottom)
        ----
        82px  total chrome outside the content box
     Getting this wrong (e.g. subtracting only the margins) leaves the page
     ~42px taller than the viewport, which is exactly the stray page scrollbar
     this replaced. If section's padding/border/margin change, update this. */
  max-height: calc(100vh - 82px);
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox — hidden but wheel/swipe still scroll */
}
.stats-screen::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */

/* Belt-and-braces: while the stats sheet is the visible screen, the PAGE itself
   must not scroll at all. The max-height above already budgets the panel to
   exactly 100vh, but sub-pixel rounding can still tip a document into "1px too
   tall" and re-show the browser's page scrollbar. transitionTo (main.js) sets
   `display: block` inline on the active section, so this matches only while
   stats is open and releases the moment the user navigates away. Nothing is
   lost to the clip — the panel scrolls internally, so all content stays
   reachable. (:has() is already used elsewhere in this file.) */
html:has(#stats-screen[style*="display: block"]),
html:has(#stats-screen[style*="display:block"]) {
  overflow: hidden;
}

/* Quiz + review screens — same viewport-height discipline as .stats-screen
   above: cap to the viewport and scroll INTERNALLY instead of growing the
   page (custom difficulty's 8-choice grids and long review lists both
   overflow small screens). Wheel scrolling works natively — globe.js's
   window wheel handler (_isInWheelScrollable) yields to any genuinely
   overflowing scrollable ancestor instead of hijacking into a globe zoom.
   Chrome budget (content-box, see the stats note): 40px margins (section
   20px auto) + 56px padding (.quiz-display/.review-section 28px) + 2px
   borders = 98px outside the content box. */
#quiz,
#review {
  max-height: calc(100vh - 98px);
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox — hidden but wheel/swipe still scroll */
}
#quiz::-webkit-scrollbar,
#review::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
html:has(#quiz[style*="display: block"]),
html:has(#quiz[style*="display:block"]),
html:has(#review[style*="display: block"]),
html:has(#review[style*="display:block"]) {
  overflow: hidden;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.stats-header h1 {
  font-size: 1.925rem;
  margin: 0;
  color: var(--text);
}

.glass-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.glass-button,
.stats-tab-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  transition: var(--transition);
  font-size: 1.014rem;
}

.glass-button:hover,
.stats-tab-btn:hover {
  background: rgba(0, 255, 255, 0.15);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.35);
}

.glass-content {
  min-height: 200px;
  padding: 10px;
}

.stat-line {
  margin: 8px 0;
  font-size: 1.125rem;
  color: var(--text);
}

/* =====================================================
   STATS — CONTINENT SUB-TABS
   ===================================================== */

.stats-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.stats-subtab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 0.939rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.stats-subtab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.stats-subtab.active {
  background: rgba(0, 234, 255, 0.15);
  border-color: rgba(0, 234, 255, 0.45);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.2);
}

/* 2×2 grid for the four stat numbers */
.stats-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.stat-block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
}

.stat-value {
  font-size: 2.027rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-slash {
  font-size: 1.497rem;
  color: var(--text-light);
}

.stat-label {
  font-size: 0.856rem;
  color: var(--text-light);
  font-weight: 500;
}

.stats-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.stats-card-modern {
  padding: 24px 28px;
}

.stats-card-modern h2 {
  text-align: left;
  font-size: 1.497rem;
  margin-bottom: 16px;
  color: var(--accent);
}

.stats-card-modern h3 {
  font-size: 1.172rem;
  margin: 16px 0 8px;
  color: var(--text-light);
}


/* =====================================================
   COOKIES BANNER
   ===================================================== */

#cookies-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.4s ease forwards;
}

.cookies-card {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  padding: 20px 26px;
  max-width: 700px;
  text-align: center;
  color: var(--text-light);
  box-shadow: 0 0 22px rgba(0, 255, 255, 0.2);
  font-size: 1.125rem;
  line-height: 1.55;
}


/* =====================================================
   MENU SCREEN LAYOUT HELPERS
   ===================================================== */

.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.main-menu-banner {
  font-size: 2.139rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.5px;
}


/* =====================================================
   TRANSITIONS
   ===================================================== */

.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.35s ease forwards;
}

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

@keyframes shakeAnim {
  0%   { transform: translateX(0);    }
  25%  { transform: translateX(-10px); }
  50%  { transform: translateX(10px);  }
  75%  { transform: translateX(-10px); }
  100% { transform: translateX(0);    }
}

.shake { animation: shakeAnim 0.4s ease; }


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media screen and (max-width: 700px) {
  section { margin: 16px; padding: 18px; }

  .quiz-header {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .quiz-header p,
  .quiz-header div {
    text-align: center !important;
    min-width: unset;
  }

  #timer,
  #learn-mode-label { position: static; transform: none; width: auto; }

  /* !important: column count is set via inline style at render time
     (quiz.js loadQuestion) — mobile always collapses to one column
     regardless of choice count, which needs to win over that inline style. */
  #answers { grid-template-columns: 1fr !important; }

  .bottom-controls { flex-direction: column; align-items: center; }
}


/* =====================================================
   DARK MODE — STATS SCREEN TEXT
   ===================================================== */

html:not(.light-mode) .stats-screen,
html:not(.light-mode) .stats-screen h1,
html:not(.light-mode) .stats-screen h2,
html:not(.light-mode) .stat-value,
html:not(.light-mode) .stat-label,
html:not(.light-mode) .stat-slash,
html:not(.light-mode) .stat-line,
html:not(.light-mode) .stat-block,
html:not(.light-mode) .stats-subtab,
html:not(.light-mode) .stats-section-label,
html:not(.light-mode) #stats-content p {
  color: #ffffff;
}

/* =====================================================
   DARK MODE — GLASS BUTTON ACCENT
   (previously a rainbow "neon-pulse" cycling animation — replaced with the
   calm blue-accent liquid-metal treatment used everywhere else, 2026-07-06)
   ===================================================== */

html:not(.light-mode) .glass-btn:hover {
  background-color: rgba(255, 255, 255, 0.11);
  border-color: var(--accent);
  box-shadow: var(--metal-bevel-hover), 0 0 18px rgba(0, 200, 255, 0.35);
}

/* =====================================================
   LIGHT MODE
   ===================================================== */

html.light-mode {
  color-scheme: light;

  --bg:             #ffd4b0;
  --glass-bg:       rgba(255, 215, 200, 0.65);
  --glass-border:   rgba(180, 70, 100, 0.32);
  --glass-shadow:   0 8px 30px rgba(120, 40, 80, 0.16);
  --glass-blur:     blur(18px);
  --text:           #1e0c16;
  --text-light:     #6a3055;
  --secondary:      rgba(180, 80, 120, 0.12);
  --secondary-dark: rgba(180, 80, 120, 0.22);
  --accent:         #a02878;
}

html.light-mode body {
  background: radial-gradient(
    circle at center,
    #fff0e0  0%,    /* warm white-peach centre */
    #ffc89a 25%,    /* soft peach */
    #f9a07a 45%,    /* warm orange */
    #e87878 65%,    /* coral-pink */
    #c05878 82%,    /* rose */
    #7a2858 100%    /* muted deep rose — replaces hard purple */
  );
  background-attachment: fixed;
}

/* Stronger visible borders on cards, menus, selects */
html.light-mode .glass-card,
html.light-mode .glass-button,
html.light-mode select,
html.light-mode input {
  border: 1.5px solid rgba(180, 70, 100, 0.40) !important;
}

html.light-mode select,
html.light-mode input {
  background: rgba(255, 220, 210, 0.85);
  color: var(--text);
}

html.light-mode #globe-backlight {
  background: radial-gradient(
    ellipse 70% 70% at 37% 50%,
    rgba(255, 200, 140, 0.50) 0%,    /* peach-gold centre */
    rgba(255, 140,  80, 0.28) 40%,   /* warm orange mid */
    rgba(210,  80,  80, 0.10) 65%,   /* coral fade */
    transparent                80%
  );
}

html.light-mode header .subtitle {
  font-weight: 500;
  color: var(--text-light);
}

html.light-mode .glass-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--metal-bevel-hover), 0 0 14px rgba(160, 40, 120, 0.45);
}

html.light-mode .answer-option {
  color: var(--text);
}

html.light-mode .answer-option.correct {
  background: rgba(0, 180, 80, 0.25);
  border-color: #00b850;
  color: #005a28;
}

html.light-mode .answer-option.incorrect {
  background: rgba(220, 40, 40, 0.18);
  border-color: #dc2828;
  color: #7a0000;
}

/* ============================================================
   COUNTRIES CURRICULUM — SHARED
   ============================================================ */

/* --- Explore Screen --- */
/* Explore screen — invisible shell; all UI is in #explore-right-panel */
#countries-explore-screen {
  pointer-events: none !important;
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: visible;
}

/* Reusable green button modifier */
.glass-btn.btn-green {
  background-color: rgba(68, 204, 136, 0.22);
  border-color: rgba(68, 204, 136, 0.55);
  color: #44cc88;
}
.glass-btn.btn-green:hover {
  background-color: rgba(68, 204, 136, 0.38);
  border-color: #44cc88;
}


/* --- Explore: country info card --- */
.explore-country-card {
  position: fixed;
  width: 270px;
  background: rgba(8, 14, 28, 0.88);
  border: 1px solid rgba(95, 186, 255, 0.28);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  z-index: 200;
  pointer-events: none;
}

.explore-card-flag {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(95, 186, 255, 0.15);
}

.explore-card-body {
  padding: 11px 13px 13px;
}

.explore-card-name {
  font-size: 1.042rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 9px;
  line-height: 1.3;
}

.explore-card-check {
  color: #44cc88;
}

.explore-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 0.809rem;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d0e8ff;
}

.explore-card-row:last-of-type {
  border-bottom: none;
}

.explore-card-label {
  color: rgba(255, 255, 255, 0.42);
  flex-shrink: 0;
}

html.light-mode .explore-country-card {
  background: rgba(240, 245, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
}

/* Countries-layer card instance (globe.js) — drag-aside + spring-back like the
   .geo-card, so unlike the shared class it takes pointer events directly (canvas
   clicks no longer pass through it). Placed BEFORE .card-collapsing so that rule's
   pointer-events:none still wins during the collapse animation. */
.explore-country-card.country-layer-card {
  pointer-events: auto;
  cursor: grab; /* interactive children override with their own cursor: pointer */
}
.explore-country-card.country-layer-card.ccl-dragging { cursor: grabbing; user-select: none; }
/* Flag is the card's main grab surface — suppress the native image-drag ghost */
.explore-country-card.country-layer-card .explore-card-flag { -webkit-user-drag: none; }

/* Tracking wrapper for the Explore card — globe.js positions THIS per frame; the card
   rides inside it and the "Take notes" callouts hang off the wrapper, not the card.
   PERF RULE (2026-07-16, user-reported lag): the card is blurred (backdrop-filter),
   rounded, and moved every frame — it must keep overflow:hidden so it stays one cleanly
   clipped composited layer. Never hang children outside the card itself. */
#explore-card-wrap {
  position: fixed;
  z-index: 200;
  pointer-events: none;
}
/* The activity card needs pointer-events so quiz/compare buttons are clickable.
   The globe countries-layer card shares the same CSS class but NOT this ID.
   position:relative overrides the shared class's fixed — inside the wrapper it's
   an in-flow child (the wrapper shrink-wraps to its 270px width). */
#explore-country-card {
  pointer-events: auto;
  position: relative;
}

.explore-card-note {
  margin-top: 8px;
  font-size: 0.772rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  line-height: 1.4;
}

html.light-mode .explore-card-name  { color: #111; }
html.light-mode .explore-card-row   { color: #222; border-bottom-color: rgba(0,0,0,0.06); }
html.light-mode .explore-card-label { color: rgba(0,0,0,0.42); }
html.light-mode .explore-card-hint  { color: #1a5acc; }
html.light-mode .explore-card-note  { color: rgba(0,0,0,0.4); }

/* Countries layer — placard-to-card expand animation */
.explore-country-card.card-expanding {
  animation: card-expand 0.21s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: center;
}
@keyframes card-expand {
  from { transform: scaleX(0.18) scaleY(0.07); opacity: 0.35; }
  to   { transform: scaleX(1)    scaleY(1);    opacity: 1;    }
}

/* Countries layer — card-to-placard collapse animation (reverse of expand) */
.explore-country-card.card-collapsing {
  animation: card-collapse 0.18s cubic-bezier(0.55, 0, 0.8, 0.45) forwards;
  transform-origin: center;
  pointer-events: none;
}
@keyframes card-collapse {
  from { transform: scaleX(1)    scaleY(1);    opacity: 1;    }
  to   { transform: scaleX(0.18) scaleY(0.07); opacity: 0;    }
}

/* ── Country card augments (neighbors, islands, compare) ───────── */
.explore-card-compare-btn { pointer-events: auto; }

.explore-card-sect-hdr {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(95, 186, 255, 0.55);
  margin: 10px 0 5px;
}
.explore-card-neighbors { margin-top: 4px; }
.explore-card-nb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 0.76rem;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cce3ff;
}
.explore-card-nb-row:last-of-type { border-bottom: none; }
/* Cross-link — Borders rows and Similar-size names jump to that country's own card.
   pointer-events:auto is required here too (not just on the row) since Similar-size
   spans live outside .explore-card-nb-list, the only ancestor that already re-enables
   clicks through the card's pointer-events:none shell. */
.explore-card-nav-link { cursor: pointer; pointer-events: auto; border-radius: 4px; transition: background 0.12s, color 0.12s; }
.explore-card-nb-row.explore-card-nav-link { margin: 0 -4px; padding: 3px 4px; }
.explore-card-island-row.explore-card-nav-link { margin: 0 -4px; padding: 2px 4px; }
.explore-card-nav-link:hover { background: rgba(95, 186, 255, 0.14); color: rgba(150, 210, 255, 1); }
span.explore-card-nav-link:hover { text-decoration: underline; }
.explore-card-nb-list {
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(255, 255, 255, 0.06);
}
.explore-card-nb-list::-webkit-scrollbar { width: 4px; }
.explore-card-nb-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
.explore-card-nb-list::-webkit-scrollbar-thumb { background: rgba(95, 186, 255, 0.35); border-radius: 2px; }
/* Long neighbor names + the always-nowrap border-length text (below) were together
   wider than the card in some rows, forcing the list into horizontal scroll — the
   name span had no min-width override, so a flex row only shrinks it down to its
   longest unbreakable word instead of the full available width. */
.explore-card-nb-name {
  min-width: 0;
  overflow-wrap: break-word;
}
.explore-card-border-len {
  font-size: 0.69rem;
  color: rgba(200, 228, 255, 0.65);
  white-space: nowrap;
  flex-shrink: 0;
}
.explore-card-border-unk {
  font-size: 0.66rem;
  color: rgba(200, 228, 255, 0.28);
  font-style: italic;
  flex-shrink: 0;
}
.explore-card-dim { color: rgba(200, 228, 255, 0.38); }
.explore-card-no-borders {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.32);
  font-style: italic;
  padding: 5px 0;
}

/* Island territories */
.explore-card-islands { margin-top: 6px; }
.explore-card-badge {
  background: rgba(95, 186, 255, 0.14);
  color: rgba(95, 186, 255, 0.80);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.67rem;
  font-weight: 700;
}
.explore-card-island-list {
  display: block;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(255, 255, 255, 0.06);
}
.explore-card-island-list::-webkit-scrollbar { width: 4px; }
.explore-card-island-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 2px; }
.explore-card-island-list::-webkit-scrollbar-thumb { background: rgba(95, 186, 255, 0.35); border-radius: 2px; }
.explore-card-island-name {
  min-width: 0;
  overflow-wrap: break-word;
}
.explore-card-island-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 0.74rem;
  padding: 2px 0;
  color: #cce3ff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.explore-card-island-row:last-of-type { border-bottom: none; }

/* × close button — absolute top-right corner of card */
.explore-card-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  z-index: 20;
  transition: color 0.12s;
}
.explore-card-close-btn:hover { color: rgba(255,255,255,0.85); }
html.light-mode .explore-card-close-btn { color: rgba(0,0,0,0.30); }
html.light-mode .explore-card-close-btn:hover { color: rgba(0,0,0,0.72); }

/* Action bar: Start Quiz + Compare, bottom of card, hidden until the info reveal finishes */
.explore-card-action-bar {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(95, 186, 255, 0.13);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.explore-card-action-bar--hidden {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}
.explore-card-action-bar > button {
  flex: 1;
  min-width: 0;
  padding: 9px 8px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  transition: background 0.15s, border-color 0.15s;
}

/* ── Explore card: staggered "teaching pace" reveal ─────────────── */
/* Duration MUST match ROW_FADE_MS in countries-explore.js */
@keyframes explore-card-row-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explore-card-row--reveal {
  opacity: 0;
  animation: explore-card-row-reveal 0.26s ease-out both;
}

/* Quizzable rows/sections (Population, Area, Similar size, Borders, Island Territories) —
   the sections the Explore quiz draws questions from, see globe.js _generateQuiz.
   Bright gold is a user-approved exception (2026-07-16) to the no-yellow rule — gold is the
   app's "quiz/reward material" color, matching the map's gold guide-target language. */
.explore-card-quizzable {
  background: rgba(255, 255, 190, 0.14);
  border-left: 3px solid rgba(255, 255, 190, 0.92);
  border-radius: 4px;
  margin-left: -8px;
  padding-left: 6px;
}
.explore-card-row.explore-card-quizzable { font-weight: 700; }
.explore-card-row.explore-card-quizzable .explore-card-label,
.explore-card-quizzable .explore-card-sect-hdr { color: #ffffbe; }
/* "Take notes" callout — floats off the card's left edge, tied back to its row by a
   connector line. Lives on #explore-card-wrap (NOT inside the blurred card — see the
   wrapper rule's perf note); JS sets top to the row's center, own opacity-only reveal
   (a translateY keyframe would fight the centering transform). */
.explore-card-notes-tag {
  position: absolute;
  right: calc(100% + 26px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffbe;
  background: rgba(8, 14, 28, 0.88);
  border: 1px solid rgba(255, 255, 190, 0.60);
  border-radius: 8px;
  padding: 2px 7px;
  pointer-events: none;
  opacity: 0;
  animation: explore-notes-tag-reveal 0.26s ease-out both; /* duration matches ROW_FADE_MS */
}
@keyframes explore-notes-tag-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.explore-card-notes-tag::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 26px;
  height: 1px;
  background: rgba(255, 255, 190, 0.72);
}

/* Compare button at base of card */
.explore-card-compare-btn {
  display: block;
  width: 100%;
  margin-top: 13px;
  padding: 7px 10px;
  background: rgba(95, 186, 255, 0.09);
  border: 1px solid rgba(95, 186, 255, 0.26);
  border-radius: 7px;
  color: rgba(95, 186, 255, 0.88);
  font-size: 0.79rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.explore-card-compare-btn:hover {
  background: rgba(95, 186, 255, 0.17);
  border-color: rgba(95, 186, 255, 0.52);
}

/* ── Compare panel ─────────────────────────────────────────────── */
.country-compare-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 530px;
  max-height: 86vh;
  overflow-y: auto;
  background: rgba(8, 14, 28, 0.78);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(95, 186, 255, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 5000;
  padding: 20px 22px 24px;
  color: #cce3ff;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.30) rgba(255, 255, 255, 0.04);
}
@keyframes ccp-expand {
  from { transform: translate(-50%, -50%) scaleX(0.18) scaleY(0.07); opacity: 0.35; }
  to   { transform: translate(-50%, -50%) scaleX(1)    scaleY(1);    opacity: 1;    }
}
.country-compare-panel.ccp-expanding {
  animation: ccp-expand 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: center;
}
.ccp-close,
.ccl-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.32);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.ccp-close:hover,
.ccl-close:hover { color: rgba(255, 255, 255, 0.75); }
/* .ccl-close sits over the country card's flag image — stronger white + a soft
   shadow keep it legible on arbitrary flag artwork (both themes). */
.ccl-close {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.ccl-close:hover { color: rgba(255, 255, 255, 0.95); }
.ccp-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(95, 186, 255, 0.50);
  margin-bottom: 16px;
  padding-right: 30px;
}
.ccp-flags {
  display: flex;
  align-items: flex-start;
  margin-bottom: 18px;
}
.ccp-side { flex: 1; text-align: center; }
.ccp-flag {
  width: 100%;
  max-width: 210px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto 8px;
  border: 1px solid rgba(95, 186, 255, 0.16);
}
.ccp-cname { font-size: 0.92rem; font-weight: 700; color: #fff; line-height: 1.3; }
.ccp-ctag  { font-size: 0.70rem; color: rgba(180, 210, 255, 0.46); margin-top: 2px; }
.ccp-vs {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 215, 0, 0.60);
  align-self: center;
  padding: 0 10px;
  flex-shrink: 0;
}
.ccp-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ccp-stat { display: flex; flex-direction: column; gap: 4px; }
.ccp-stat-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(95, 186, 255, 0.48);
}
.ccp-stat-pair {
  display: flex;
  gap: 12px;
}
.ccp-stat-side { flex: 1; }
.ccp-stat-pair > .ccp-stat-side:last-child { text-align: right; }
.ccp-stat-val  { font-size: 0.83rem; color: #cce3ff; font-weight: 500; }
.ccp-combined-bar {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}
.ccp-bar-fill {
  height: 100%;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ccp-bar-a { background: rgba(95, 186, 255, 0.75); }
.ccp-bar-b { background: rgba(68, 204, 136, 0.75); }

/* ── Compare panel — new elements ──────────────────────────────── */
.ccp-cap-pop {
  font-size: 0.72rem;
  color: rgba(180, 210, 255, 0.52);
  margin-top: 2px;
}
.ccp-ratio {
  font-size: 0.67rem;
  color: rgba(180, 210, 255, 0.45);
  font-style: italic;
  margin-top: 3px;
}
.ccp-dist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  margin: 8px 0 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  font-size: 0.77rem;
}
.ccp-dist-label { color: rgba(180, 210, 255, 0.55); }
.ccp-dist-val   { color: rgba(255, 215, 0, 0.82); font-weight: 600; }
.ccp-common-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 14px;
  padding-top: 12px;
}
.ccp-common-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(95, 186, 255, 0.48);
  margin-bottom: 8px;
}
.ccp-common-item        { font-size: 0.76rem; color: rgba(180, 210, 255, 0.72); padding: 3px 0; }
.ccp-common-item strong { color: #cce3ff; font-weight: 600; }
.ccp-common-none        { font-size: 0.75rem; color: rgba(180, 210, 255, 0.32); font-style: italic; }

/* ── Light-mode overrides — card augments + compare panel ──────── */
html.light-mode .explore-card-sect-hdr { color: rgba(20, 80, 160, 0.55); }
html.light-mode .explore-card-nb-row   { color: #1a2030; border-bottom-color: rgba(0, 0, 0, 0.07); }
html.light-mode .explore-card-border-len { color: rgba(0, 0, 0, 0.52); }
html.light-mode .explore-card-border-unk { color: rgba(0, 0, 0, 0.25); }
html.light-mode .explore-card-dim        { color: rgba(0, 0, 0, 0.30); }
html.light-mode .explore-card-no-borders { color: rgba(0, 0, 0, 0.35); }
html.light-mode .explore-card-nav-link:hover { background: rgba(20, 80, 160, 0.10); color: rgba(20, 80, 160, 0.95); }
html.light-mode .explore-card-badge      { background: rgba(20, 80, 160, 0.10); color: rgba(20, 80, 160, 0.72); }
html.light-mode .explore-card-island-row { color: #1a2030; border-bottom-color: rgba(0, 0, 0, 0.07); }
html.light-mode .explore-card-nb-list    { scrollbar-color: rgba(20, 80, 160, 0.45) rgba(0, 0, 0, 0.06); }
html.light-mode .explore-card-island-list { scrollbar-color: rgba(20, 80, 160, 0.45) rgba(0, 0, 0, 0.06); }
html.light-mode .explore-card-nb-list::-webkit-scrollbar-track,
html.light-mode .explore-card-island-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); }
html.light-mode .explore-card-nb-list::-webkit-scrollbar-thumb,
html.light-mode .explore-card-island-list::-webkit-scrollbar-thumb { background: rgba(20, 80, 160, 0.45); }
html.light-mode .explore-card-compare-btn {
  background: rgba(20, 80, 160, 0.07);
  border-color: rgba(20, 80, 160, 0.24);
  color: rgba(20, 80, 160, 0.82);
}
html.light-mode .explore-card-compare-btn:hover {
  background: rgba(20, 80, 160, 0.14);
  border-color: rgba(20, 80, 160, 0.48);
}
html.light-mode .explore-card-action-bar { border-top-color: rgba(20, 80, 160, 0.15); }
/* Gold quizzable treatment, light mode — darker golds for contrast on the bright card */
html.light-mode .explore-card-quizzable  { background: rgba(255, 190, 40, 0.18); border-left-color: rgba(205, 150, 15, 0.90); }
html.light-mode .explore-card-row.explore-card-quizzable .explore-card-label,
html.light-mode .explore-card-quizzable .explore-card-sect-hdr { color: rgba(150, 100, 0, 1); }
html.light-mode .explore-card-notes-tag  {
  color: rgba(150, 100, 0, 1);
  background: rgba(255, 250, 232, 0.94);
  border-color: rgba(205, 150, 15, 0.65);
}
html.light-mode .explore-card-notes-tag::after { background: rgba(190, 140, 20, 0.75); }
html.light-mode .country-compare-panel {
  background: rgba(255, 210, 185, 0.82);
  border-color: rgba(180, 70, 100, 0.28);
  box-shadow: 0 12px 40px rgba(120, 40, 80, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #1a2030;
}
html.light-mode .ccp-title      { color: rgba(20, 80, 160, 0.55); }
html.light-mode .ccp-cname      { color: #111; }
html.light-mode .ccp-ctag       { color: rgba(0, 0, 0, 0.38); }
html.light-mode .ccp-vs         { color: rgba(160, 110, 0, 0.78); }
html.light-mode .ccp-stat-label { color: rgba(20, 80, 160, 0.52); }
html.light-mode .ccp-stat-val   { color: #222; }
html.light-mode .ccp-bar-a      { background: rgba(20, 80, 180, 0.65); }
html.light-mode .ccp-bar-b      { background: rgba(20, 140, 80, 0.65); }
html.light-mode .ccp-flag       { border-color: rgba(0, 0, 0, 0.10); }
html.light-mode .ccp-close      { color: rgba(0, 0, 0, 0.35); }
html.light-mode .ccp-close:hover { color: rgba(0, 0, 0, 0.70); }
html.light-mode .ccp-cap-pop    { color: rgba(0, 0, 0, 0.42); }
html.light-mode .ccp-ratio      { color: rgba(20, 80, 160, 0.42); }
html.light-mode .ccp-dist-row   { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.09); }
html.light-mode .ccp-dist-label { color: rgba(20, 80, 160, 0.58); }
html.light-mode .ccp-dist-val   { color: rgba(120, 80, 0, 0.82); }
html.light-mode .ccp-common-section { border-top-color: rgba(0,0,0,0.09); }
html.light-mode .ccp-common-label   { color: rgba(20, 80, 160, 0.52); }
html.light-mode .ccp-common-item        { color: rgba(0, 0, 0, 0.62); }
html.light-mode .ccp-common-item strong { color: #1a0810; }
html.light-mode .ccp-common-none        { color: rgba(0, 0, 0, 0.30); }


/* ================================================================
   GEOGRAPHIC FEATURE INFORMATION FRAMEWORK — window.AqGeoCard
   Mountains/Volcanoes info card + compare panel. Mirrors the Countries
   layer card (.explore-country-card / .country-compare-panel) visually.
   ================================================================ */
.geo-card {
  position: fixed;
  width: 280px;
  max-height: 82vh;
  overflow-y: auto;
  background: rgba(8, 14, 28, 0.90);
  border: 1px solid rgba(95, 186, 255, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  z-index: 4000;
  pointer-events: auto;
  color: #cce3ff;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.30) rgba(255, 255, 255, 0.04);
  /* Drag-aside affordance — the card body can be pulled aside and springs back;
     interactive children override with their own cursor: pointer. */
  cursor: grab;
}
.geo-card.geo-card-dragging { cursor: grabbing; user-select: none; }
.geo-card::-webkit-scrollbar { width: 5px; }
.geo-card::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.geo-card::-webkit-scrollbar-thumb { background: rgba(95, 186, 255, 0.30); border-radius: 3px; }

.geo-card-body { padding: 13px 15px 15px; }
.geo-card-name { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; }
.geo-card-subtitle { font-size: 0.78rem; color: rgba(180, 210, 255, 0.55); margin-top: 2px; }
.geo-card-tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.geo-card-tag-pill {
  background: rgba(95, 186, 255, 0.14);
  color: rgba(95, 186, 255, 0.80);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: capitalize;
}
.geo-card-notice {
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(95, 186, 255, 0.14);
  border: 1px solid rgba(95, 186, 255, 0.35);
  color: rgba(210, 235, 255, 0.92);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Optional media slot (config.media) — flag card hero image. Natural aspect ratio with
   a height cap so square (Switzerland) and tall (Nepal) flags don't blow up the card. */
.geo-card-media { margin-top: 10px; text-align: center; }
.geo-card-flag-img {
  max-width: 100%;
  max-height: 96px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
/* Color swatch chips (flag card Colors row) — backgrounds are set inline per flag color;
   the thin border keeps white swatches visible against the glass surface. */
.geo-card-swatch-row { display: inline-flex; gap: 4px; vertical-align: middle; }
.geo-card-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-block;
}
.geo-card-sect-hdr {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(95, 186, 255, 0.55);
  margin: 12px 0 5px;
}
.geo-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 0.80rem;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.geo-card-row:last-of-type { border-bottom: none; }
.geo-card-label { color: rgba(255, 255, 255, 0.42); flex-shrink: 0; }
.geo-card-val   { color: #d0e8ff; text-align: right; }
/* Cross-link — Country row name(s) jump to that country's own card (Countries layer). */
.geo-card-country-link { cursor: pointer; border-radius: 3px; transition: color 0.12s; }
.geo-card-country-link:hover { color: rgba(150, 210, 255, 1); text-decoration: underline; }
/* No inner max-height/scroll here — the outer .geo-card already scrolls (max-height:82vh),
   and a second nested scroll region on top of it made long descriptions look truncated
   ("cut off at the bottom") since the inner 140px cap wasn't visually obvious. */
.geo-card-desc  { font-size: 0.78rem; line-height: 1.5; color: rgba(210, 228, 255, 0.75); }
.geo-card-action-bar { display: flex; gap: 7px; margin: 10px 0 4px; }
.geo-card-btn {
  flex: 1;
  background: rgba(95, 186, 255, 0.10);
  border: 1px solid rgba(95, 186, 255, 0.30);
  color: rgba(200, 228, 255, 0.90);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.geo-card-btn:hover { background: rgba(95, 186, 255, 0.20); border-color: rgba(95, 186, 255, 0.55); }
.geo-card-compare-btn { width: 100%; margin-top: 10px; }
.geo-card-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  z-index: 10;
}
.geo-card-close-btn:hover { color: rgba(255, 255, 255, 0.85); }
.geo-card-nb-cat { margin-top: 4px; }
.geo-card-nb-cat-title { font-size: 0.68rem; font-weight: 700; color: rgba(180, 210, 255, 0.45); margin: 6px 0 2px; }
.geo-card-nb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 0.75rem;
  padding: 2px 0;
  color: #cce3ff;
}
.geo-card-nb-name { }
.geo-card-nb-dist { color: rgba(180, 210, 255, 0.45); font-size: 0.68rem; flex-shrink: 0; }
/* Cross-link rows (Geographic Context / Notable Mountains) — clicking jumps the map to
   that feature and opens its own card. */
.geo-card-nb-clickable { cursor: pointer; margin: 0 -6px; padding: 2px 6px; border-radius: 5px; transition: background 0.12s; }
.geo-card-nb-clickable:hover { background: rgba(95, 186, 255, 0.14); }
.geo-card-nb-clickable:hover .geo-card-nb-name { color: rgba(150, 210, 255, 1); }

/* Open/close animation — mirrors .card-expanding/.card-collapsing (Countries layer) */
.geo-card.geo-card-expanding {
  animation: geo-card-expand 0.21s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: center;
}
@keyframes geo-card-expand {
  from { transform: scaleX(0.18) scaleY(0.07); opacity: 0.35; }
  to   { transform: scaleX(1)    scaleY(1);    opacity: 1;    }
}
.geo-card.geo-card-collapsing {
  animation: geo-card-collapse 0.18s cubic-bezier(0.55, 0, 0.8, 0.45) forwards;
  transform-origin: center;
  pointer-events: none;
}
@keyframes geo-card-collapse {
  from { transform: scaleX(1)    scaleY(1);    opacity: 1;    }
  to   { transform: scaleX(0.18) scaleY(0.07); opacity: 0;    }
}

/* ── Geo compare panel — mirrors .country-compare-panel ─────────── */
.geo-compare-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  max-height: 86vh;
  overflow-y: auto;
  background: rgba(8, 14, 28, 0.78);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(95, 186, 255, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 5000;
  /* Panel stays scrollable as a fallback for short viewports, but its scrollbar is
     hidden — the tall list columns (peaks/countries) scroll internally via their own
     mini-scrollbars instead, so the big panel-height scrollbar never appears. */
  padding: 20px 24px 24px 22px;
  color: #cce3ff;
  scrollbar-width: none;
}
.geo-compare-panel::-webkit-scrollbar { display: none; }
@keyframes geo-compare-expand {
  from { transform: translate(-50%, -50%) scaleX(0.18) scaleY(0.07); opacity: 0.35; }
  to   { transform: translate(-50%, -50%) scaleX(1)    scaleY(1);    opacity: 1;    }
}
.geo-compare-panel.geo-compare-expanding {
  animation: geo-compare-expand 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: center;
}
.geo-compare-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  color: rgba(255, 255, 255, 0.32);
  font-size: 1.05rem; cursor: pointer;
  padding: 4px 8px; border-radius: 4px; line-height: 1;
}
.geo-compare-close:hover { color: rgba(255, 255, 255, 0.75); }
.geo-compare-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(95, 186, 255, 0.50); margin-bottom: 16px; padding-right: 30px;
}
.geo-compare-heads { display: flex; align-items: flex-start; margin-bottom: 18px; }
.geo-compare-side { flex: 1; text-align: center; }
.geo-compare-name { font-size: 0.92rem; font-weight: 700; color: #fff; line-height: 1.3; }
.geo-compare-tag  { font-size: 0.70rem; color: rgba(180, 210, 255, 0.46); margin-top: 2px; }
.geo-compare-vs   { font-size: 0.85rem; font-weight: 700; color: rgba(95, 186, 255, 0.65); align-self: center; padding: 0 10px; flex-shrink: 0; }
/* Side-by-side media pair (flag compare) — reuses the single card's .geo-card-media
   markup per side, so the images inherit the same border/shadow/max-height styling. */
.geo-compare-media-pair { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; }
.geo-compare-media-side { flex: 1; min-width: 0; text-align: center; }
.geo-compare-media-side .geo-card-media { margin-top: 0; }
.geo-compare-dist-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; margin: 0 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px; font-size: 0.77rem;
}
.geo-compare-dist-label { color: rgba(180, 210, 255, 0.55); }
.geo-compare-dist-val   { color: rgba(68, 204, 136, 0.85); font-weight: 600; }
.geo-compare-stats { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 14px; display: flex; flex-direction: column; gap: 13px; }
/* Async augment slot (province capital block) — first child of the stats column. :empty
   hides it so the flex gap doesn't reserve a blank slot before the join resolves (or for
   types with no compareAugment at all). The nested dist-row drops its own bottom margin
   and lets the column gap space it instead. */
.geo-compare-extra { display: flex; flex-direction: column; gap: 13px; }
.geo-compare-extra:empty { display: none; }
.geo-compare-extra .geo-compare-dist-row { margin: 0; }
.geo-compare-stat { display: flex; flex-direction: column; gap: 4px; }
.geo-compare-stat-label { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(95, 186, 255, 0.48); }
.geo-compare-stat-pair { display: flex; gap: 12px; }
.geo-compare-stat-side { flex: 1; font-size: 0.83rem; color: #cce3ff; font-weight: 500; }
.geo-compare-stat-pair > .geo-compare-stat-side:last-child { text-align: right; }
.geo-compare-stat-sub { font-size: 0.68rem; color: rgba(180, 210, 255, 0.50); font-weight: 400; margin-top: 1px; }
.geo-compare-list-pair { align-items: flex-start; }
/* High-data ranges (dozens of peaks/countries) made the panel absurdly tall with one
   giant scrollbar. Each list column now scrolls internally with its own thin mini
   scrollbar and caps its height, keeping the panel compact. */
.geo-compare-list-col {
  padding-top: 2px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(255, 255, 255, 0.04);
}
.geo-compare-list-col::-webkit-scrollbar { width: 5px; }
.geo-compare-list-col::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 3px; }
.geo-compare-list-col::-webkit-scrollbar-thumb { background: rgba(95, 186, 255, 0.35); border-radius: 3px; }
/* Both columns get overflow-y:auto, so the browser puts each one's scrollbar at its own
   right edge — for the left (A-side) column that lands at the panel's centerline, which
   read as a broken/misplaced scrollbar sitting between the two sides. Flipping the left
   column to RTL moves its scrollbar to the panel's left edge instead; flipping the list
   items back to LTR keeps their text left-aligned as normal. The right (B-side) column is
   untouched — its scrollbar already sits correctly at the panel's right edge. */
.geo-compare-list-pair .geo-compare-list-col:first-child {
  direction: rtl;
  padding-right: 0;
  padding-left: 6px;
}
.geo-compare-list-pair .geo-compare-list-col:first-child .geo-compare-list-item {
  direction: ltr;
  text-align: left;
}
.geo-compare-list-item {
  font-size: 0.73rem;
  color: rgba(200, 225, 255, 0.75);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.geo-compare-list-item:last-child { border-bottom: none; }
.geo-compare-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.geo-compare-bar-fill { height: 100%; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.geo-compare-bar-a { background: rgba(95, 186, 255, 0.75); }
.geo-compare-bar-b { background: rgba(68, 204, 136, 0.75); }
.geo-compare-ratio { font-size: 0.67rem; color: rgba(180, 210, 255, 0.45); font-style: italic; margin-top: 3px; }
/* Description text reads left-aligned on both sides (unlike numeric stat values, where the
   default .geo-compare-stat-pair rule right-aligns the last column) and scrolls internally
   like the peak/country list columns rather than stretching the whole panel taller. */
.geo-compare-desc-pair { align-items: flex-start; }
.geo-compare-desc-pair > .geo-compare-stat-side:last-child { text-align: left; }
.geo-compare-desc-side {
  font-size: 0.74rem;
  line-height: 1.45;
  color: rgba(200, 225, 255, 0.75);
  max-height: 140px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(255, 255, 255, 0.04);
}
.geo-compare-desc-side::-webkit-scrollbar { width: 5px; }
.geo-compare-desc-side::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 3px; }
.geo-compare-desc-side::-webkit-scrollbar-thumb { background: rgba(95, 186, 255, 0.35); border-radius: 3px; }
.geo-compare-common-section { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 14px; padding-top: 12px; }
.geo-compare-common-label { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(95, 186, 255, 0.48); margin-bottom: 8px; }
.geo-compare-common-item { font-size: 0.76rem; color: rgba(180, 210, 255, 0.72); padding: 3px 0; }
.geo-compare-common-none { font-size: 0.75rem; color: rgba(180, 210, 255, 0.32); font-style: italic; }

/* ── Light-mode overrides ─────────────────────────────────────── */
html.light-mode .geo-card {
  background: rgba(240, 245, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
  color: #1a2030;
}
html.light-mode .geo-card-name        { color: #111; }
html.light-mode .geo-card-subtitle    { color: rgba(0, 0, 0, 0.45); }
html.light-mode .geo-card-sect-hdr    { color: rgba(20, 80, 160, 0.55); }
html.light-mode .geo-card-row         { color: #222; border-bottom-color: rgba(0, 0, 0, 0.06); }
html.light-mode .geo-card-label       { color: rgba(0, 0, 0, 0.42); }
html.light-mode .geo-card-val         { color: #1a2030; }
html.light-mode .geo-card-country-link:hover { color: rgba(20, 80, 160, 0.95); }
html.light-mode .geo-card-desc        { color: rgba(20, 20, 30, 0.68); }
html.light-mode .geo-card-tag-pill    { background: rgba(20, 80, 160, 0.10); color: rgba(20, 80, 160, 0.72); }
html.light-mode .geo-card-notice      { background: rgba(20, 80, 160, 0.10); border-color: rgba(20, 80, 160, 0.30); color: rgba(20, 60, 120, 0.90); }
html.light-mode .geo-card-btn         { background: rgba(20, 80, 160, 0.07); border-color: rgba(20, 80, 160, 0.24); color: rgba(20, 80, 160, 0.82); }
html.light-mode .geo-card-btn:hover   { background: rgba(20, 80, 160, 0.14); border-color: rgba(20, 80, 160, 0.48); }
html.light-mode .geo-card-close-btn   { color: rgba(0, 0, 0, 0.30); }
html.light-mode .geo-card-close-btn:hover { color: rgba(0, 0, 0, 0.70); }
html.light-mode .geo-card-nb-cat-title { color: rgba(20, 80, 160, 0.50); }
html.light-mode .geo-card-nb-row      { color: #1a2030; }
html.light-mode .geo-card-nb-dist     { color: rgba(0, 0, 0, 0.35); }
html.light-mode .geo-card-nb-clickable:hover { background: rgba(20, 80, 160, 0.10); }
html.light-mode .geo-card-nb-clickable:hover .geo-card-nb-name { color: rgba(20, 80, 160, 0.95); }

html.light-mode .geo-compare-panel {
  background: rgba(255, 210, 185, 0.82);
  border-color: rgba(180, 70, 100, 0.28);
  box-shadow: 0 12px 40px rgba(120, 40, 80, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #1a2030;
}
html.light-mode .geo-compare-title      { color: rgba(20, 80, 160, 0.55); }
html.light-mode .geo-compare-name       { color: #111; }
html.light-mode .geo-compare-tag        { color: rgba(0, 0, 0, 0.38); }
html.light-mode .geo-compare-vs         { color: rgba(20, 80, 160, 0.62); }
html.light-mode .geo-compare-stat-label { color: rgba(20, 80, 160, 0.52); }
html.light-mode .geo-compare-stat-side  { color: #222; }
html.light-mode .geo-compare-stat-sub   { color: rgba(0, 0, 0, 0.42); }
html.light-mode .geo-compare-list-item  { color: rgba(0, 0, 0, 0.62); border-bottom-color: rgba(0,0,0,0.06); }
html.light-mode .geo-compare-list-col   { scrollbar-color: rgba(20, 80, 160, 0.45) rgba(0, 0, 0, 0.05); }
html.light-mode .geo-compare-list-col::-webkit-scrollbar-thumb { background: rgba(20, 80, 160, 0.45); }
html.light-mode .geo-compare-list-col::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
html.light-mode .geo-compare-desc-side  { scrollbar-color: rgba(20, 80, 160, 0.45) rgba(0, 0, 0, 0.05); }
html.light-mode .geo-compare-desc-side::-webkit-scrollbar-thumb { background: rgba(20, 80, 160, 0.45); }
html.light-mode .geo-compare-desc-side::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); }
html.light-mode .geo-compare-bar-a      { background: rgba(20, 80, 180, 0.65); }
html.light-mode .geo-compare-bar-b      { background: rgba(20, 140, 80, 0.65); }
html.light-mode .geo-compare-close      { color: rgba(0, 0, 0, 0.35); }
html.light-mode .geo-compare-close:hover { color: rgba(0, 0, 0, 0.70); }
html.light-mode .geo-compare-ratio      { color: rgba(20, 80, 160, 0.42); }
html.light-mode .geo-compare-dist-row   { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.09); }
html.light-mode .geo-compare-dist-label { color: rgba(20, 80, 160, 0.58); }
html.light-mode .geo-compare-dist-val   { color: rgba(20, 120, 70, 0.85); }
html.light-mode .geo-compare-common-section { border-top-color: rgba(0,0,0,0.09); }
html.light-mode .geo-compare-common-label   { color: rgba(20, 80, 160, 0.52); }
html.light-mode .geo-compare-common-item    { color: rgba(0, 0, 0, 0.62); }
html.light-mode .geo-compare-common-none    { color: rgba(0, 0, 0, 0.30); }


/* ================================================================
   EXPLORE UNIFIED PANEL — full-height right panel
   ================================================================ */
.explore-right-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 272px;
  display: flex;
  flex-direction: column;
  background: rgba(8, 14, 28, 0.9);
  border: 1px solid rgba(95, 186, 255, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: auto;
  z-index: 10;
  overflow: hidden;
}

/* --- Header --- */
.explore-panel-header {
  padding: 16px 16px 13px;
  background: linear-gradient(160deg, rgba(95,186,255,0.1) 0%, rgba(8,14,28,0) 100%);
  border-bottom: 1px solid rgba(95, 186, 255, 0.12);
  flex-shrink: 0;
}

.explore-panel-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.explore-panel-skipped-badge {
  font-size: 0.70rem;
  font-weight: 600;
  color: rgba(255,190,120,0.85);
  background: rgba(160,100,20,0.16);
  border: 1px solid rgba(200,130,40,0.35);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  margin-left: auto;
}
html.light-mode .explore-panel-skipped-badge { color: rgba(140,80,0,0.90); background: rgba(200,130,40,0.14); border-color: rgba(160,90,10,0.30); }

.explore-panel-header-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.explore-panel-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.explore-panel-progress {
  font-size: 0.772rem;
  font-weight: 600;
  color: #44cc88;
  background: rgba(68, 204, 136, 0.12);
  border: 1px solid rgba(68, 204, 136, 0.28);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.explore-panel-subline {
  font-size: 0.772rem;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.02em;
}

/* Tool buttons — reset ↺ and help ? */
.explore-panel-header-tools {
  display: flex;
  align-items: center;
  gap: 5px;
}

.explore-tool-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.40);
  font-size: 0.88rem;
  line-height: 1;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
}

.explore-tool-btn:hover {
  background: rgba(95, 186, 255, 0.15);
  color: rgba(95, 186, 255, 0.9);
  border-color: rgba(95, 186, 255, 0.30);
}

/* Continent name as clickable snapshot button */
.explore-continent-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  cursor: pointer;
  padding: 6px 10px 6px 12px;
  text-align: left;
  font-family: inherit;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}
.explore-continent-btn:hover {
  background: rgba(95, 186, 255, 0.12);
  color: rgba(95, 186, 255, 0.92);
  border-color: rgba(95, 186, 255, 0.30);
}
.explore-continent-arrow { font-size: 0.62rem; opacity: 0.60; }

/* Continent snapshot panel — slides in below the header */
.explore-snapshot-panel {
  background: rgba(4, 9, 20, 0.72);
  border-bottom: 1px solid rgba(95, 186, 255, 0.12);
  padding: 16px 18px 18px;
  flex-shrink: 0;
  animation: explore-snapshot-in 0.18s ease-out;
}
@keyframes explore-snapshot-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explore-snapshot-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.explore-snapshot-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
}
.explore-snapshot-stat + .explore-snapshot-stat {
  border-top: 1px solid rgba(95, 186, 255, 0.09);
}
.explore-snapshot-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1;
  text-align: right;
}
.explore-snapshot-stat.explore-snapshot-stat--hl {
  align-items: flex-start;
  padding: 7px 0;
}
.explore-snapshot-hl-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.explore-snapshot-hl-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
}
.explore-snapshot-hl-sub {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
}
.explore-snapshot-lbl {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.01em;
}
.explore-snapshot-hl-sub {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.40);
}
.explore-snapshot-facts {
  border-top: 1px solid rgba(95, 186, 255, 0.09);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.explore-snapshot-fact {
  font-size: 0.76rem;
  color: rgba(150, 210, 255, 0.78);
  line-height: 1.5;
}


/* --- Shared section chrome --- */
.explore-panel-section {
  padding: 10px 15px;
  flex-shrink: 0;
}

.explore-panel-section--list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding-bottom: 8px;
}

.explore-panel-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.54);
  margin-bottom: 7px;
}

.explore-panel-divider {
  height: 1px;
  background: rgba(95, 186, 255, 0.09);
  flex-shrink: 0;
  margin: 0;
}

/* --- Heat map 2×2 radio grid --- */
.explore-hm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 5px;
  margin-bottom: 1px;
}

.explore-hm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
  user-select: none;
}


.explore-hm-row:hover {
  background: rgba(95, 186, 255, 0.08);
}

.explore-hm-row input[type="radio"],
.explore-hm-row input[type="checkbox"] {
  accent-color: #5fbaff;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}

.explore-hm-label {
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.3;
}

.explore-hm-flags-row {
  grid-column: 1 / -1;
  margin-top: 1px;
}

.explore-hm-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 9px 0 7px;
}

/* --- Heat map legend --- */
.explore-hm-legend {
  margin-top: 11px;
  padding: 0 1px;
}

.explore-hm-legend-bar {
  height: 7px;
  border-radius: 4px;
  margin-bottom: 5px;
}

.explore-hm-legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.60);
}

/* --- Countries list header --- */
.explore-panel-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.explore-panel-list-header .explore-panel-title {
  margin-bottom: 0;
}

.explore-sort-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.explore-skipped-toggle {
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  color: rgba(255,255,255,0.55);
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.explore-skipped-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}
.explore-skipped-toggle.active {
  background: rgba(200,130,40,0.20);
  border-color: rgba(200,130,40,0.55);
  color: rgba(255,190,120,0.95);
}
html.light-mode .explore-skipped-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.16); color: rgba(0,0,0,0.55); }
html.light-mode .explore-skipped-toggle:hover { background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.8); }
html.light-mode .explore-skipped-toggle.active { background: rgba(160,90,10,0.16); border-color: rgba(160,90,10,0.45); color: rgba(140,80,0,0.95); }

.explore-sort-select {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(95, 186, 255, 0.2);
  border-radius: 6px;
  color: var(--text);
  padding: 3px 7px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.explore-sort-select:hover {
  border-color: rgba(95, 186, 255, 0.42);
}

/* --- Search bar --- */
.explore-search-wrap {
  position: relative;
  margin: 8px 0 6px;
}

.explore-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 28px 6px 10px;
  font-size: 0.8rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(95, 186, 255, 0.18);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.explore-search-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.explore-search-input:focus {
  border-color: rgba(95, 186, 255, 0.42);
  background: rgba(255, 255, 255, 0.07);
}

.explore-search-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.32);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.explore-search-clear:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* --- Scrollable country list --- */
.explore-country-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.32) rgba(0, 0, 0, 0.18);
  padding-right: 3px;
}

.explore-country-list::-webkit-scrollbar        { width: 5px; }
.explore-country-list::-webkit-scrollbar-track  { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }
.explore-country-list::-webkit-scrollbar-thumb  { background: rgba(95, 186, 255, 0.32); border-radius: 3px; }

.explore-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
  border-radius: 7px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  transition: background 0.12s;
  gap: 5px;
  min-height: 28px;
}

.explore-list-item:last-child {
  border-bottom: none;
}

.explore-list-item:hover {
  background: rgba(95, 186, 255, 0.09);
}

.explore-list-item-name {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-list-item-sub {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.56);
  margin-top: 2px;
  line-height: 1.2;
}

.explore-list-item-check {
  color: #44cc88;
  font-size: 0.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.explore-list-item-value {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.56);
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 2px;
}

.explore-list-flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Left column wraps name + sub-note + neighbor badge */
.explore-list-item-left {
  flex: 1;
  min-width: 0;
}

/* Rank number (#1…) on far left, fixed width so names align */
.explore-list-rank {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(95, 186, 255, 0.55);
  min-width: 30px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Neighbor / border count badge — inline in the list row */
.explore-list-nb-badge {
  display: inline-block;
  padding: 0px 5px;
  border-radius: 8px;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.40);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.explore-list-nb-badge:hover {
  background: rgba(95, 186, 255, 0.18);
  color: rgba(95, 186, 255, 0.9);
  border-color: rgba(95, 186, 255, 0.35);
}
.explore-list-nb-badge.active {
  background: rgba(95, 186, 255, 0.22);
  color: rgba(95, 186, 255, 1.0);
  border-color: rgba(95, 186, 255, 0.55);
}

/* Pulse highlight when auto-scrolled to from map click */
@keyframes explore-list-pulse {
  0%   { background: rgba(95, 186, 255, 0.28); }
  100% { background: transparent; }
}
.explore-list-pulse {
  animation: explore-list-pulse 0.7s ease-out forwards;
}

@keyframes explore-item-popin {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: var(--item-final-opacity, 1); transform: translateY(0); }
}
.explore-list-item--popin {
  opacity: 0;
  animation: explore-item-popin 0.20s ease-out both;
}
/* Dim items fade in to their dim opacity, not full opacity */
.explore-list-item--popin.explore-list-item--dim {
  --item-final-opacity: 0.32;
}

/* Guided progression — current target country row in the list */
@keyframes explore-target-glow {
  0%, 100% { box-shadow: 0 0 3px 0 rgba(255,210,40,0.18), inset 0 0 0 0 rgba(255,210,40,0); }
  50%       { box-shadow: 0 0 10px 1px rgba(255,210,40,0.45), inset 0 0 10px 0 rgba(255,210,40,0.10); }
}
.explore-list-item--target {
  opacity: 1; /* overrides --popin's opacity:0 when both classes are present */
  background: rgba(255, 210, 40, 0.10);
  border-left: 3px solid rgba(255, 210, 40, 0.70);
  padding-left: 7px;
  margin-left: -10px;
  width: calc(100% + 10px);
  border-radius: 4px;
  animation: explore-target-glow 2s ease-in-out infinite;
}
/* Guided progression — future (locked) countries in the list */
.explore-list-item--dim {
  opacity: 0.32;
  pointer-events: none;
  cursor: default;
}
/* Skipped countries — deferred to end of queue */
.explore-list-item--skipped {
  opacity: 0.72;
  border-left: 3px solid rgba(200,130,30,0.55);
  padding-left: 7px;
  margin-left: -10px;
  width: calc(100% + 10px);
  border-radius: 4px;
}
html.light-mode .explore-list-item--skipped { border-left-color: rgba(160,90,0,0.55); }
.explore-list-skip-badge {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(210,150,40,0.85);
  background: rgba(200,130,20,0.10);
  border: 1px solid rgba(200,130,20,0.28);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
html.light-mode .explore-list-skip-badge { color: rgba(140,80,0,0.85); border-color: rgba(140,80,0,0.25); }
/* Dim items fade in to their dim opacity, not full opacity */
.explore-list-item--popin.explore-list-item--skipped {
  --item-final-opacity: 0.72;
}

/* "Next →" button that appears in the info card during guided progression */
.explore-card-next-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px 4px;
}
.explore-card-next-btn {
  background: rgba(68, 204, 136, 0.16);
  border: 1px solid rgba(68, 204, 136, 0.52);
  color: #44cc88;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.03em;
}
.explore-card-next-btn:hover {
  background: rgba(68, 204, 136, 0.28);
}
html.light-mode .explore-list-item--target {
  background: rgba(160, 90, 0, 0.09);
  border-left-color: rgba(160, 90, 0, 0.60);
}
html.light-mode .explore-card-next-btn {
  background: rgba(20, 100, 60, 0.09);
  border-color: rgba(20, 100, 60, 0.42);
  color: rgba(10, 80, 40, 1.0);
}
html.light-mode .explore-card-next-btn:hover {
  background: rgba(20, 100, 60, 0.18);
}

/* Explore — "Select <country>" prompt card (list-click in guided mode) */
.explore-prompt-body {
  padding: 16px 18px 14px;
  text-align: center;
}
.explore-prompt-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
}
.explore-prompt-hint {
  font-size: 0.78rem;
  color: rgba(255, 210, 40, 0.82);
  letter-spacing: 0.03em;
}
html.light-mode .explore-prompt-name { color: #111; }
html.light-mode .explore-prompt-hint { color: rgba(130, 70, 0, 0.85); }

/* Explore — quiz inside the info card */
.explore-quiz-notice {
  padding: 18px 14px 14px;
  color: rgba(180, 215, 255, 0.88);
  font-size: 0.875rem;
  line-height: 1.55;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 4px;
}
html.light-mode .explore-quiz-notice { color: rgba(20, 70, 140, 0.88); }

/* Country name label at top of quiz ("France") */
.explore-quiz-country-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #44cc88;
  letter-spacing: 0.03em;
  margin-bottom: 9px;
  text-transform: uppercase;
}
html.light-mode .explore-quiz-country-label { color: #1a7848; }
.explore-quiz-flag {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}
html.light-mode .explore-quiz-flag { border-color: rgba(0,0,0,0.18); }

.explore-quiz-wrap {
  padding: 13px 15px 15px;
  min-width: 220px;
}
.explore-quiz-streak-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.explore-quiz-footer-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.explore-quiz-exit-btn {
  flex: 1;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.62);
  border-radius: 8px;
  font-size: 0.78rem;
  padding: 5px 12px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.02em;
}
.explore-quiz-exit-btn:hover {
  background: rgba(255,80,60,0.13);
  color: rgba(255,120,100,0.90);
}
.explore-quiz-streak {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.explore-quiz-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.20);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.22);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.explore-quiz-dot.filled {
  background: rgba(68,204,136,0.20);
  border-color: #44cc88;
  color: #44cc88;
}
html.light-mode .explore-quiz-dot { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.20); color: rgba(0,0,0,0.22); }
html.light-mode .explore-quiz-dot.filled { background: rgba(26,120,72,0.14); border-color: #1a7848; color: #1a7848; }
@keyframes streak-shake {
  0%   { transform: translateX(0); }
  14%  { transform: translateX(-7px); }
  28%  { transform: translateX(6px); }
  42%  { transform: translateX(-5px); }
  57%  { transform: translateX(3px); }
  72%  { transform: translateX(-2px); }
  86%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
.explore-quiz-streak--shake {
  animation: streak-shake 0.38s ease-out;
}
.explore-quiz-progress {
  font-size: 0.69rem;
  color: rgba(255,255,255,0.58);
  text-align: right;
  margin-bottom: 0;
  letter-spacing: 0.04em;
}
.explore-quiz-question {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.38;
}
.explore-quiz-progress-hint {
  font-size: 0.70rem;
  color: rgba(255,255,255,0.68);
  text-align: center;
  margin: 0 0 9px;
  letter-spacing: 0.02em;
}
.explore-quiz-skip-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.60);
  border-radius: 8px;
  font-size: 0.76rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.13s, color 0.13s;
  letter-spacing: 0.02em;
}
.explore-quiz-skip-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.80);
}
@keyframes quiz-skip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,50,40,0); border-color: rgba(255,255,255,0.18); }
  50%       { box-shadow: 0 0 0 3px rgba(210,50,40,0.40); border-color: rgba(210,60,50,0.72); }
}
.explore-quiz-wrap--skip .explore-quiz-skip-btn,
.explore-quiz-wrap--skip .explore-quiz-review-btn {
  animation: quiz-skip-pulse 1.6s ease-in-out infinite;
}
html.light-mode .explore-quiz-wrap--skip .explore-quiz-skip-btn,
html.light-mode .explore-quiz-wrap--skip .explore-quiz-review-btn {
  animation: quiz-skip-pulse-light 1.6s ease-in-out infinite;
}
@keyframes quiz-skip-pulse-light {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,30,20,0); border-color: rgba(0,0,0,0.12); }
  50%       { box-shadow: 0 0 0 3px rgba(180,30,20,0.30); border-color: rgba(180,30,20,0.60); }
}
.explore-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.explore-quiz-choice {
  position: relative;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.86);
  font-size: 0.81rem;
  padding: 7px 10px 7px 26px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background 0.11s, border-color 0.11s;
}
.explore-quiz-key-hint {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.63rem;
  font-family: monospace;
  color: rgba(255,255,255,0.28);
  pointer-events: none;
  line-height: 1;
}
html.light-mode .explore-quiz-key-hint { color: rgba(0,0,0,0.25); }
.explore-quiz-choice:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.26);
}
.explore-quiz-choice--correct {
  background: rgba(68,204,136,0.20) !important;
  border-color: rgba(68,204,136,0.65) !important;
  color: #44cc88 !important;
}
.explore-quiz-choice--wrong {
  background: rgba(255,75,55,0.16) !important;
  border-color: rgba(255,75,55,0.50) !important;
  color: rgba(255,120,110,0.90) !important;
}
.explore-quiz-wrap--result {
  background: rgba(10, 22, 48, 0.78);
  border: 1px solid rgba(68, 204, 136, 0.30);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 24px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
html.light-mode .explore-quiz-wrap--result {
  background: rgba(230, 248, 238, 0.88);
  border-color: rgba(26,120,72,0.30);
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
.explore-quiz-result-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.40);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.12s;
}
.explore-quiz-result-close:hover { color: rgba(255,255,255,0.80); }
html.light-mode .explore-quiz-result-close { color: rgba(0,0,0,0.32); }
html.light-mode .explore-quiz-result-close:hover { color: rgba(0,0,0,0.65); }
.explore-quiz-wrap--result { position: relative; }
.explore-quiz-result-score {
  font-size: 1.55rem;
  font-weight: 700;
  color: #44cc88;
  text-align: center;
  margin: 14px 0 2px;
  letter-spacing: 0.01em;
}
html.light-mode .explore-quiz-result-score { color: #1a7848; }
.explore-quiz-result-score--fail { color: rgba(255,110,100,0.90); }
.explore-quiz-result-msg {
  font-size: 0.84rem;
  text-align: center;
  color: rgba(255,255,255,0.62);
  margin-bottom: 12px;
}
.explore-quiz-result-divider {
  height: 1px;
  background: rgba(68,204,136,0.15);
  margin: 8px 0;
}
.explore-quiz-result-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.explore-quiz-retry-btn,
.explore-quiz-next-btn {
  background: rgba(95,186,255,0.14);
  border: 1px solid rgba(95,186,255,0.45);
  color: rgba(160,220,255,1.0);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s;
  letter-spacing: 0.03em;
}
.explore-quiz-retry-btn:hover,
.explore-quiz-next-btn:hover { background: rgba(95,186,255,0.26); }
.explore-quiz-start-btn {
  background: rgba(68,204,136,0.16) !important;
  border-color: rgba(68,204,136,0.52) !important;
  color: #44cc88 !important;
}
.explore-quiz-start-btn:hover { background: rgba(68,204,136,0.28) !important; }
.explore-quiz-review-btn {
  flex: 1;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.62);
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background 0.13s, color 0.13s;
  letter-spacing: 0.02em;
}
.explore-quiz-review-btn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
}
html.light-mode .explore-quiz-review-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.18); color: rgba(0,0,0,0.52); }
html.light-mode .explore-quiz-review-btn:hover { background: rgba(0,0,0,0.09); color: rgba(0,0,0,0.78); }
html.light-mode .explore-quiz-progress { color: rgba(0,0,0,0.52); }
html.light-mode .explore-quiz-progress-hint { color: rgba(0,0,0,0.62); }
html.light-mode .explore-quiz-exit-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.18); color: rgba(0,0,0,0.52); }
html.light-mode .explore-quiz-exit-btn:hover { background: rgba(160,20,10,0.08); color: rgba(140,10,0,0.85); }
html.light-mode .explore-quiz-skip-btn { background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.56); }
html.light-mode .explore-quiz-skip-btn:hover { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.78); }
html.light-mode .explore-quiz-question { color: #111; }
html.light-mode .explore-quiz-choice { background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.14); color: #222; }
html.light-mode .explore-quiz-choice:hover { background: rgba(0,0,0,0.07); }
html.light-mode .explore-quiz-result-msg { color: rgba(0,0,0,0.52); }

/* Quiz result — correct/wrong breakdown sections */
.explore-qr-section {
  margin: 5px 0;
}
.explore-qr-title {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.explore-qr-title--correct { color: rgba(68, 204, 136, 0.72); }
.explore-qr-title--wrong   { color: rgba(255, 110, 90, 0.72); }
.explore-qr-item {
  font-size: 0.77rem;
  padding: 1px 0;
  line-height: 1.4;
}
.explore-qr-item--correct { color: rgba(100, 220, 155, 0.88); }
.explore-qr-item--wrong   { color: rgba(255, 145, 125, 0.88); }
.explore-qr-item strong   { color: rgba(255, 255, 255, 0.90); font-weight: 600; }
html.light-mode .explore-qr-title--correct { color: rgba(15, 130, 70, 0.85); }
html.light-mode .explore-qr-title--wrong   { color: rgba(180, 50, 30, 0.80); }
html.light-mode .explore-qr-item--correct  { color: rgba(10, 120, 60, 0.88); }
html.light-mode .explore-qr-item--wrong    { color: rgba(180, 60, 40, 0.88); }
html.light-mode .explore-qr-item strong    { color: rgba(0, 0, 0, 0.82); }
html.light-mode .explore-quiz-retry-btn,
html.light-mode .explore-quiz-next-btn { background: rgba(20,80,160,0.08); border-color: rgba(20,80,160,0.42); color: rgba(10,60,140,1.0); }
html.light-mode .explore-quiz-retry-btn:hover,
html.light-mode .explore-quiz-next-btn:hover { background: rgba(20,80,160,0.16); }
html.light-mode .explore-quiz-start-btn { background: rgba(20,100,60,0.09) !important; border-color: rgba(20,100,60,0.42) !important; color: rgba(10,80,40,1.0) !important; }
html.light-mode .explore-quiz-start-btn:hover { background: rgba(20,100,60,0.18) !important; }

/* Similar size fact line inside the info card */
.explore-card-similar {
  font-size: 0.78rem;
  color: rgba(200, 228, 255, 0.70);
}

/* --- Footer --- */
.explore-panel-footer {
  padding: 10px 15px 14px;
  flex-shrink: 0;
  border-top: 1px solid rgba(95, 186, 255, 0.09);
}

.explore-panel-leave-btn {
  width: 100%;
  padding: 8px 0;
  font-size: 0.8rem;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.60);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.explore-panel-leave-btn:hover {
  background: rgba(255, 80, 80, 0.1);
  border-color: rgba(255, 100, 100, 0.35);
  color: rgba(255, 140, 140, 0.9);
}

/* --- Completion popup — body-level, centred --- */
.countries-explore-complete {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  transform: none;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.countries-explore-complete-box {
  background: rgba(8, 14, 28, 0.94);
  border: 1px solid rgba(68, 204, 136, 0.35);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

.countries-explore-complete-box h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  color: #44cc88;
}

.countries-explore-complete-box p {
  margin: 0 0 20px;
  font-size: 0.911rem;
  color: rgba(255,255,255,0.7);
}

.countries-explore-complete-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* --- Light mode overrides --- */
html.light-mode .explore-right-panel {
  background: rgba(232, 240, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255,255,255,0.8);
}

html.light-mode .explore-panel-header {
  background: linear-gradient(160deg, rgba(74,158,255,0.08) 0%, transparent 100%);
  border-bottom-color: rgba(0,0,0,0.07);
}

html.light-mode .explore-panel-heading  { color: #111; }
html.light-mode .explore-panel-subline  { color: rgba(0,0,0,0.38); }
html.light-mode .explore-panel-progress { color: #1a7848; background: rgba(26,120,72,0.1); border-color: rgba(26,120,72,0.28); }
html.light-mode .explore-tool-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); color: rgba(0,0,0,0.38); }
html.light-mode .explore-tool-btn:hover { background: rgba(20,80,160,0.10); color: rgba(20,80,160,0.8); border-color: rgba(20,80,160,0.25); }
html.light-mode .explore-continent-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.16);
  color: rgba(0, 0, 0, 0.65);
}
html.light-mode .explore-continent-btn:hover {
  background: rgba(20, 80, 160, 0.09);
  border-color: rgba(20, 80, 160, 0.28);
  color: rgba(20, 80, 160, 0.85);
}
html.light-mode .explore-snapshot-panel     { background: rgba(220,235,255,0.78); border-bottom-color: rgba(0,0,0,0.08); }
html.light-mode .explore-snapshot-val        { color: rgba(0,0,0,0.72); }
html.light-mode .explore-snapshot-lbl        { color: rgba(0,0,0,0.56); }
html.light-mode .explore-snapshot-hl-name    { color: rgba(0,0,0,0.82); }
html.light-mode .explore-snapshot-hl-sub     { color: rgba(0,0,0,0.56); }
html.light-mode .explore-snapshot-fact       { color: rgba(20,80,160,0.70); }
html.light-mode .explore-panel-title    { color: rgba(0,0,0,0.55); }
html.light-mode .explore-panel-divider  { background: rgba(0,0,0,0.07); }
html.light-mode .explore-hm-sep         { background: rgba(0,0,0,0.07); }
html.light-mode .explore-hm-row:hover   { background: rgba(74,158,255,0.07); }
html.light-mode .explore-hm-legend-labels { color: rgba(0,0,0,0.60); }
html.light-mode .explore-sort-select    { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
html.light-mode .explore-search-input  { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
html.light-mode .explore-search-input::placeholder { color: rgba(0,0,0,0.44); }
html.light-mode .explore-search-input:focus { border-color: rgba(74,158,255,0.42); background: rgba(0,0,0,0.06); }
html.light-mode .explore-search-clear  { color: rgba(0,0,0,0.48); }
html.light-mode .explore-search-clear:hover { color: rgba(0,0,0,0.70); }
html.light-mode .explore-list-item-sub  { color: rgba(0,0,0,0.58); }
html.light-mode .explore-list-item-check { color: #1a7848; }
html.light-mode .explore-list-rank { color: rgba(20,80,160,0.65); }
html.light-mode .explore-list-item-value { color: rgba(0,0,0,0.55); }
html.light-mode .explore-list-flag { opacity: 1; }
html.light-mode .explore-list-nb-badge { color: rgba(0,0,0,0.55); background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); }
html.light-mode .explore-list-nb-badge:hover { background: rgba(20,80,160,0.10); color: rgba(20,80,160,0.8); border-color: rgba(20,80,160,0.25); }
html.light-mode .explore-list-nb-badge.active { background: rgba(20,80,160,0.15); color: rgba(20,80,160,1.0); border-color: rgba(20,80,160,0.40); }
html.light-mode .explore-card-similar { color: rgba(0,0,60,0.72); }
html.light-mode .explore-country-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
html.light-mode .explore-country-list::-webkit-scrollbar-thumb { background: rgba(20,80,160,0.32); }
html.light-mode .explore-panel-leave-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.55);
}
html.light-mode .explore-panel-leave-btn:hover {
  background: rgba(200,0,0,0.06);
  border-color: rgba(200,0,0,0.2);
  color: rgba(180,0,0,0.75);
}
html.light-mode .countries-explore-complete-box {
  background: rgba(235,245,255,0.98);
  border-color: rgba(26,120,72,0.4);
}
html.light-mode .countries-explore-complete-box h3 { color: #1a7848; }
html.light-mode .countries-explore-complete-box p  { color: rgba(0,0,0,0.6); }

/* --- Locate Screen --- */
/* Green start button — draws user's eye to the action */
#countries-locate-start-btn {
  background: rgba(68, 204, 136, 0.22);
  border-color: rgba(68, 204, 136, 0.55);
  color: #44cc88;
}
#countries-locate-start-btn:hover {
  background: rgba(68, 204, 136, 0.38);
  border-color: #44cc88;
}

.countries-locate-hints-btn {
  font-size: 0.78rem;
  opacity: 0.72;
}
.countries-locate-hints-btn.hints-active {
  background: rgba(68, 204, 136, 0.22);
  border-color: rgba(68, 204, 136, 0.55);
  color: #44cc88;
  opacity: 1;
}
.countries-locate-hints-btn.hints-active:hover {
  background: rgba(68, 204, 136, 0.38);
  border-color: #44cc88;
}
.locate-hints-warning {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 10, 30, 0.88);
  border: 1px solid rgba(255, 120, 60, 0.55);
  color: rgba(255, 160, 80, 0.95);
  font-size: 0.78rem;
  padding: 5px 14px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  white-space: nowrap;
  z-index: 20;
}
.locate-hints-warning.visible {
  opacity: 1;
}

/* Pinned pill overlay at top-right of viewport, identical pattern to explore screen */
#countries-locate-screen {
  pointer-events: none;
  position: fixed !important;
  top: 20px;
  right: 20px;
  left: auto;
  transform: none;
  margin: 0 !important;
  z-index: 10;
  max-width: none !important;
  width: auto !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}
#countries-locate-screen .glass-btn,
#countries-locate-screen button,
#countries-locate-screen select {
  pointer-events: auto;
}

.countries-locate-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.countries-locate-label {
  font-size: 0.911rem;
  flex-shrink: 0;
  color: #44cc88;
}
.countries-locate-label strong {
  color: var(--text);
}

@keyframes locate-name-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
#countries-locate-target.fading-out {
  animation: locate-name-out 0.18s ease forwards;
}

.countries-locate-count {
  font-size: 0.837rem;
  color: #44cc88;
  white-space: nowrap;
  flex-shrink: 0;
}

.countries-locate-timer {
  font-size: 1.05rem;
  font-weight: 700;
  color: #44cc88;
  min-width: 1.6ch;
  text-align: center;
  flex-shrink: 0;
}
.countries-locate-timer--low {
  color: #ff4444;
}

.countries-locate-feedback {
  pointer-events: none;
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.939rem;
  font-weight: 600;
  background: rgba(8,14,28,0.82);
  border: 1px solid rgba(95,186,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 11;
  white-space: nowrap;
}
.countries-locate-feedback.correct   { color: #44cc88; border-color: rgba(68,204,136,0.4); }
.countries-locate-feedback.incorrect { color: #ff6666; border-color: rgba(255,100,100,0.4); }

.countries-locate-result {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 28, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.countries-locate-result-box {
  background: rgba(8, 14, 28, 0.96);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  min-width: 320px;
  max-width: 480px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.countries-locate-result-box h3 {
  margin: 0 0 0.25rem;
  font-size: 1.283rem;
}

.countries-locate-result-stats {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  font-size: 0.911rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.stat-correct { color: #44cc88; }
.stat-wrong   { color: #ff6666; }
.stat-pct     { color: #d0e8ff; }

.countries-locate-wrong-list {
  text-align: left;
  font-size: 0.856rem;
  color: #ff9999;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.countries-locate-wrong-list strong {
  display: block;
  margin-bottom: 0.3rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
}
.countries-locate-wrong-list ul {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 1rem;
}
.countries-locate-wrong-list li { margin-bottom: 2px; }

.countries-locate-result-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.countries-locate-retry-prompt {
  text-align: center;
  margin: 0.5rem 0 0.25rem;
}

.countries-locate-retry-prompt p {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: rgba(255,255,255,0.88);
}

.countries-locate-retry-prompt-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* Give Up confirmation overlay */
.giveup-confirm {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
}

.giveup-box {
  background-color: rgba(18, 22, 30, 0.92);
  background-image: var(--metal-sheen-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.75rem 2.25rem;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), var(--metal-bevel);
}

.giveup-box p {
  margin: 0 0 1.25rem;
  font-size: 1.014rem;
  color: var(--text);
}

.giveup-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* Shared by Explore/Locate/Puzzle/Bigger's give-up confirm — no light-mode
   variant existed before (background stayed dark-navy in both themes). */
html.light-mode .giveup-box {
  background-color: rgba(255, 215, 200, 0.92);
  border: 1.5px solid rgba(180, 70, 100, 0.40);
}

/* --- Final Exam Screen --- */
/* Pinned pill overlay at top-right, identical pattern to locate screen */
/* Final Exam — zero-size invisible shell (same pattern as #countries-explore-screen).
   All exam UI lives in the body-level console elements below; keeping them out of
   the glass section matters because backdrop-filter creates a containing block
   for fixed-position descendants (they'd anchor to the section, not the viewport). */
#countries-exam-screen {
  pointer-events: none !important;
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  overflow: visible;
}

/* Exam console — header strip: title, question counter, speed meter, progress bar */
#countries-exam-header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  width: min(560px, calc(100vw - 32px));
  background: rgba(8, 14, 28, 0.90);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 14px;
  padding: 9px 14px 11px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.countries-exam-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.countries-exam-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #44cc88;
  white-space: nowrap;
}
.countries-exam-title strong { color: var(--text); }
.countries-exam-count {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
#countries-exam-header .glass-btn {
  padding: 4px 12px;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.countries-exam-progress-track {
  margin-top: 8px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.countries-exam-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(95, 186, 255, 0.85), rgba(68, 204, 136, 0.85));
  transition: width 0.3s ease;
}
html.light-mode #countries-exam-header {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
html.light-mode .countries-exam-title { color: #1a7848; }
html.light-mode .countries-exam-progress-track { background: rgba(0, 0, 0, 0.08); }

/* Exam console — question dock (bottom-center home for every question) */
#countries-exam-dock {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  width: min(600px, calc(100vw - 32px));
  background: rgba(8, 14, 28, 0.92);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.countries-exam-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #44cc88;
  border: 1px solid rgba(68, 204, 136, 0.35);
  background: rgba(68, 204, 136, 0.10);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.countries-exam-kicker--mc {
  color: #5fbaff;
  border-color: rgba(95, 186, 255, 0.35);
  background: rgba(95, 186, 255, 0.10);
}
.countries-exam-dock-kicker-row {
  display: flex;
  justify-content: center;
  margin-bottom: 9px;
}
.countries-exam-dock-locate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.80);
}
.countries-exam-locate-text strong {
  color: var(--text);
  font-size: 1.08rem;
}
.countries-exam-dock-q {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
  margin: 0 0 12px;
}
.countries-exam-preparing {
  margin: 4px 0;
  color: rgba(255, 255, 255, 0.60);
}
.countries-exam-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.countries-exam-choice {
  position: relative;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
  padding: 9px 12px 9px 28px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.11s, border-color 0.11s;
}
.countries-exam-choice:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.26);
}
/* Neutral pick highlight — deliberately NOT green/red: no correctness reveal until submit */
.countries-exam-choice--picked {
  background: rgba(95, 186, 255, 0.20) !important;
  border-color: rgba(95, 186, 255, 0.65) !important;
  color: #5fbaff !important;
}
#countries-exam-dock.countries-exam-dock--recorded {
  border-color: rgba(95, 186, 255, 0.55);
}
#countries-exam-dock.countries-exam-dock--recorded::after {
  content: "Answer recorded";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.70rem;
  color: #5fbaff;
  background: rgba(8, 14, 28, 0.92);
  border: 1px solid rgba(95, 186, 255, 0.35);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
  animation: exam-recorded-pop 0.30s ease;
}
@keyframes exam-recorded-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.countries-exam-submit {
  text-align: center;
  padding: 4px 0 2px;
}
.countries-exam-submit .countries-exam-dock-q { margin-bottom: 13px; }
html.light-mode #countries-exam-dock {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.20);
}
html.light-mode .countries-exam-dock-locate { color: rgba(0, 0, 0, 0.70); }
html.light-mode .countries-exam-preparing { color: rgba(0, 0, 0, 0.55); }
html.light-mode .countries-exam-choice {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.14);
  color: #222;
}
html.light-mode .countries-exam-choice:hover { background: rgba(0, 0, 0, 0.07); }
html.light-mode .countries-exam-kicker { color: #1a7848; }
html.light-mode #countries-exam-dock.countries-exam-dock--recorded::after {
  background: rgba(255, 255, 255, 0.95);
}

/* Missed-question review list on the results overlay */
.countries-exam-review {
  text-align: left;
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.countries-exam-review-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #44cc88;
}
/* The result box stays near-black in BOTH modes — explicit light colors only,
   never var(--text), for anything inside .countries-locate-result-box */
.countries-exam-review-q {
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}
.countries-exam-review-ans {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}
.countries-exam-review-got { color: rgba(255, 120, 110, 0.90); }
.countries-exam-review-exp { color: #44cc88; }

/* Speed-bonus meter — blue fill drains and mutes as the bonus decays */
#countries-exam-speed-track {
  width: 90px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  overflow: hidden;
  flex-shrink: 0;
}
#countries-exam-speed-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: rgba(95,186,255,0.9);
  transition: width 0.1s linear;
}
html.light-mode #countries-exam-speed-track {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.14);
}

/* Result medal — accuracy tier · speed tier (no yellow/gold in UI) */
.countries-exam-medal {
  align-self: center;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.countries-exam-medal--pass {
  color: rgba(68,204,136,0.75);
  border-color: rgba(68,204,136,0.35);
  background: rgba(68,204,136,0.08);
}
.countries-exam-medal--knowing {
  color: #5fbaff;
  border-color: rgba(95,186,255,0.5);
  background: rgba(95,186,255,0.12);
}
.countries-exam-medal--mastered {
  color: #44cc88;
  border-color: rgba(68,204,136,0.65);
  background: rgba(68,204,136,0.18);
}

.countries-exam-best {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.62);
}

.countries-exam-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.countries-exam-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #44cc88;
}

/* Best-result chip on the module row */
.aq-exam-best {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #44cc88;
  border: 1px solid rgba(68,204,136,0.35);
  background: rgba(68,204,136,0.08);
}

/* =====================================================
   COUNTRIES PUZZLE SCREEN
   ===================================================== */

#countries-puzzle-screen {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  will-change: auto !important;
  z-index: 20;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none;
}

/* HUD pill — floats above the globe at top-right */
.puzzle-header {
  position: absolute;
  top: 20px;
  right: 20px;
  left: auto;
  transform: none;
  z-index: 2;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 8px 12px;
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  white-space: nowrap;
  height: 44px;
  box-shadow: var(--metal-bevel);
}

.puzzle-back {
  flex-shrink: 0;
}

.puzzle-title-text {
  font-size: 0.911rem;
  font-weight: normal;
  color: #44cc88;
  flex-shrink: 0;
}
.puzzle-title-text strong {
  color: var(--text);
  font-weight: normal;
}

.puzzle-ping-btn {
  flex-shrink: 0;
  border-color: rgba(74,255,204,0.35);
}
.puzzle-ping-btn:hover {
  background: rgba(74,255,204,0.12);
  border-color: rgba(74,255,204,0.6);
}
.puzzle-ping-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Sonar ping rings — appended to body overlay */
@keyframes sonar-ping {
  0%   { transform: scale(0.08); opacity: 1; }
  60%  { opacity: 0.65; }
  100% { transform: scale(1);    opacity: 0; }
}
.puzzle-sonar-ring {
  fill: none;
  stroke: #4affcc;
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: sonar-ping 1.35s cubic-bezier(0.1, 0.5, 0.4, 1) forwards;
  pointer-events: none;
}
html.light-mode .puzzle-sonar-ring {
  stroke: #8b0000;
}

/* Ghost slot centroid dot — always-visible beacon for small/island slots */
.puzzle-ghost-dot {
  fill: rgba(255, 255, 255, 0.80);
  stroke: rgba(255, 255, 255, 0.40);
  stroke-width: 1;
  pointer-events: none;
}
html.light-mode .puzzle-ghost-dot {
  fill: rgba(255, 255, 255, 0.90);
  stroke: rgba(180, 180, 180, 0.50);
}

.puzzle-count {
  margin-left: auto;
  font-size: 0.9rem;
  color: #44cc88;
  font-weight: 600;
  flex-shrink: 0;
}

.puzzle-timer {
  font-size: 0.9rem;
  color: #ff9944;
  font-weight: 700;
  min-width: 78px; /* fits M:SS.CC without HUD-pill width jitter */
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* The SVG canvas — full-screen transparent overlay */
#puzzle-board-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  pointer-events: all;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* While the camera pans/zooms or pieces scatter, skip anti-aliasing —
   rasterizing 231 AA'd country paths per frame is the dominant repaint cost.
   The class is removed ~180ms after motion stops, restoring smooth edges. */
#puzzle-board-svg.puzzle-board--moving {
  shape-rendering: optimizeSpeed;
}

/* ---- Silhouette layer (continent fill) ---- */
.puzzle-silhouette {
  fill: rgba(74, 158, 255, 0.05);
  stroke: none;
  pointer-events: none;
}

/* ---- Country name label on draggable pieces (modes 1 & 2 only) ---- */
.puzzle-label {
  fill: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(8, 14, 26, 0.88);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  font-family: 'Syne', 'Segoe UI', sans-serif;
  opacity: 0;
  transition: opacity 0.08s;
}

.puzzle-piece--dragging .puzzle-label {
  opacity: 1;
}

.puzzle-piece--placed .puzzle-label {
  display: none;
}

/* ---- Ghost outlines (outlined mode: dashed home-position silhouettes) ---- */
@keyframes puzzle-ghost-pulse {
  0%, 100% { stroke-opacity: 0.28; }
  50%       { stroke-opacity: 0.58; }
}

.puzzle-ghost {
  fill: rgba(255, 255, 255, 0.18);
  stroke: #4a9eff;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
  animation: puzzle-ghost-pulse 4.5s ease-in-out infinite;
}

.puzzle-ghost-label {
  fill: rgba(180, 210, 255, 0.55);
  font-size: 8px;
  text-anchor: middle;
  font-family: inherit;
  pointer-events: none;
}

/* ---- Pieces ---- */
/* NOTE: no filter/animation on resting pieces — an animated drop-shadow on 231
   world-puzzle paths forced a full-SVG repaint every frame (major lag source). */

.puzzle-piece {
  cursor: grab;
}

/* Invisible hit circle — gives every piece a minimum 30px-radius grab area */
.puzzle-piece-hit {
  fill: transparent;
  stroke: none;
  cursor: grab;
}
.puzzle-piece--dragging .puzzle-piece-hit {
  cursor: grabbing;
}
.puzzle-piece--placed .puzzle-piece-hit {
  pointer-events: none;
}

.puzzle-piece-path {
  fill: rgba(74, 158, 255, 0.22);
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1.2;
  transition: fill 0.25s;
}

.puzzle-piece:hover .puzzle-piece-path {
  fill: rgba(74, 158, 255, 0.38);
}


.puzzle-piece--dragging {
  cursor: grabbing;
  /* Own compositor layer: drag frames composite the cached raster instead of
     repainting the piece path on every pointermove */
  will-change: transform;
}

.puzzle-piece--dragging .puzzle-piece-path {
  fill: rgba(100, 180, 255, 0.42);
  stroke: #80c8ff;
  animation: none;
  filter: none;
  stroke-opacity: 1;
}

.puzzle-piece--placed .puzzle-piece-path {
  fill: rgba(68, 204, 136, 0.32);
  stroke: #44cc88;
  stroke-width: 1.2;
  animation: none;
  filter: none;
  animation: none;
  stroke-opacity: 0.9;
  cursor: default;
  pointer-events: none;
}

@keyframes puzzle-just-placed {
  0%   { fill: rgba(68, 204, 136, 0.65); }
  100% { fill: rgba(68, 204, 136, 0.32); }
}

.puzzle-piece--just-placed .puzzle-piece-path {
  animation: puzzle-just-placed 0.6s ease-out forwards;
}

/* ---- Completion overlay ---- */
.puzzle-result {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 28, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.puzzle-result--show {
  display: flex !important;
}

.puzzle-result-box {
  padding: 2.25rem 2.75rem;
  text-align: center;
  max-width: 360px;
  background-color: rgba(8, 18, 36, 0.96);
  background-image: var(--metal-sheen-soft);
  border: 1px solid rgba(74, 158, 255, 0.22);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), var(--metal-bevel);
  border-radius: 18px;
}

.puzzle-result-title {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #44cc88;
}

.puzzle-result-time {
  font-size: 1rem;
  color: var(--text-muted, #7a93b0);
  margin: 0 0 1.25rem;
}

.puzzle-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* ---- Light mode overrides for puzzle ---- */
html.light-mode .puzzle-label {
  fill: rgba(20, 20, 40, 0.92);
  stroke: rgba(255, 245, 240, 0.88);
}

html.light-mode .puzzle-piece-path {
  fill: rgba(160, 40, 120, 0.38);
  stroke: rgba(120, 30, 90, 0.65);
}

html.light-mode .puzzle-piece:hover .puzzle-piece-path {
  fill: rgba(160, 40, 120, 0.54);
}

html.light-mode .puzzle-piece--dragging .puzzle-piece-path {
  fill: rgba(160, 40, 120, 0.62);
  stroke: #c040a0;
  animation: none;
  filter: none;
}

html.light-mode .puzzle-piece--placed .puzzle-piece-path {
  fill: rgba(0, 160, 80, 0.42);
  stroke: #009950;
  animation: none;
  filter: none;
}

html.light-mode .puzzle-ghost {
  fill: rgba(255, 255, 255, 0.22);
  stroke: #a02878;
}


html.light-mode .puzzle-result {
  background: rgba(70, 20, 40, 0.68);
}

html.light-mode .puzzle-result-box {
  background-color: rgba(255, 185, 130, 0.97);
  background-image: var(--metal-sheen-soft);
  border: 1px solid rgba(180, 70, 100, 0.40);
  box-shadow: 0 12px 48px rgba(120, 40, 80, 0.32), var(--metal-bevel);
}

html.light-mode .puzzle-result-title {
  color: #007a40;
}

html.light-mode .puzzle-result-best-new {
  color: #1a7848;
}

/* ---- Light mode: darken green HUD text across all activities ---- */
/* Explore */
html.light-mode .glass-btn.btn-green           { color: #1a7848; border-color: rgba(20,110,65,0.55); }
html.light-mode .glass-btn.btn-green:hover     { border-color: #1a7848; }
html.light-mode .explore-card-check            { color: #1a7848; }
html.light-mode .countries-explore-complete h3 { color: #1a7848; }

/* Locate */
html.light-mode .countries-locate-label           { color: #1a7848; }
html.light-mode .countries-locate-count           { color: #1a7848; }
html.light-mode .countries-locate-timer           { color: #1a7848; }
html.light-mode .countries-locate-timer--low      { color: #cc0000; }
html.light-mode #countries-locate-start-btn       { color: #1a7848; border-color: rgba(20,110,65,0.55); }
html.light-mode #countries-locate-start-btn:hover { border-color: #1a7848; }
html.light-mode .countries-locate-hints-btn.hints-active { background: rgba(20,110,65,0.15); border-color: rgba(20,110,65,0.55); color: #1a7848; }
html.light-mode .countries-locate-feedback.correct { color: #1a7848; border-color: rgba(20,110,65,0.4); }
html.light-mode .stat-correct                  { color: #1a7848; }

/* Locate result box — h3 inherits --text which is near-black in light mode; box stays dark */
html.light-mode .countries-locate-result-box h3 { color: rgba(255,255,255,0.92); }

/* Puzzle */
html.light-mode .puzzle-title-text { color: #1a7848; }
html.light-mode .puzzle-count      { color: #1a7848; }
html.light-mode .puzzle-timer      { color: #b8560a; }

/* =====================================================
   COUNTRIES BIGGER SCREEN
   ===================================================== */

/* Screen itself: full-viewport overlay, children use position:absolute.
   showScreen sets display:block — sufficient (no display:flex here). */
#countries-bigger-screen {
  position: fixed !important;
  inset: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  will-change: auto !important;
  z-index: 20;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none;
}

/* ---- Floating HUD pill (matches Explore / Locate — top-right corner) ---- */
.bigger-hud {
  pointer-events: auto;
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  z-index: 2;
  white-space: nowrap;
}

.bigger-hud-label {
  font-size: 0.911rem;
  color: #44cc88;
  flex-shrink: 0;
}
.bigger-hud-label strong {
  color: var(--text);
  font-weight: normal;
}

.bigger-prompt {
  font-size: 0.9rem;
  color: #44cc88;
  flex-shrink: 0;
}

.bigger-timer {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ff9944;
  flex-shrink: 0;
  min-width: 1.4rem;
  text-align: center;
}
.bigger-timer--low {
  color: #ff4444;
}

.bigger-phase-num {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.bigger-progress {
  font-size: 0.837rem;
  color: #44cc88;
  flex-shrink: 0;
}

.bigger-attempts {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  transition: color 0.3s;
}

/* ---- L1/L2 game area: transparent full-screen container; children are absolute ---- */
.bigger-game-area {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* Left panel: numbered ranking slots — floating, top pinned at 25vh */
.bigger-slots-panel {
  pointer-events: auto;
  position: absolute;
  top: 25vh;
  left: 29%;
  transform: translateX(-50%);
  width: 240px;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(8, 14, 28, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}

/* Right panel: country bank — floating, top pinned at 25vh */
.bigger-bank-panel {
  pointer-events: auto;
  position: absolute;
  top: 25vh;
  left: 71%;
  transform: translateX(-50%);
  width: 240px;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(8, 14, 28, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}

/* Vertical piece bank list */
.bigger-piece-bank {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(8, 14, 28, 0.25);
}
.bigger-piece-bank::-webkit-scrollbar               { width: 5px; }
.bigger-piece-bank::-webkit-scrollbar-track         { background: rgba(8, 14, 28, 0.25); border-radius: 4px; }
.bigger-piece-bank::-webkit-scrollbar-thumb         { background: rgba(95, 186, 255, 0.35); border-radius: 4px; }
.bigger-piece-bank::-webkit-scrollbar-thumb:hover   { background: rgba(95, 186, 255, 0.58); }

/* Vertical slot list container */
.bigger-slots-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(8, 14, 28, 0.25);
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bigger-slots-list::-webkit-scrollbar               { width: 5px; }
.bigger-slots-list::-webkit-scrollbar-track         { background: rgba(8, 14, 28, 0.25); border-radius: 4px; }
.bigger-slots-list::-webkit-scrollbar-thumb         { background: rgba(95, 186, 255, 0.35); border-radius: 4px; }
.bigger-slots-list::-webkit-scrollbar-thumb:hover   { background: rgba(95, 186, 255, 0.58); }

/* ---- SVG country piece (Discover mode) ---- */
.bigger-piece {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: opacity 0.15s;
}
.bigger-piece:hover .bigger-piece-svg path {
  fill: rgba(95, 186, 255, 0.32);
  stroke: rgba(95, 186, 255, 0.9);
}
.bigger-piece-svg {
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.bigger-piece-name {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-110%);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.97);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,1);
}

/* ---- Area info — absolute overlay, never affects card height ---- */
.bigger-area-info {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.97);
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
  text-shadow: 0 1px 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,1);
}
/* On SVG pieces: area anchors just below the vertical center of the piece */
.bigger-piece .bigger-area-info {
  top: 50%;
  transform: translateY(10%);
}
/* On text cards: area sits at the bottom */
.bigger-card .bigger-area-info {
  bottom: 4px;
  top: auto;
}

/* ---- Name-only card (Learn / Reinforce) ---- */
.bigger-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  min-width: 140px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.bigger-card:hover {
  border-color: rgba(95, 186, 255, 0.45);
  box-shadow: 0 0 12px rgba(95, 186, 255, 0.18);
}
.bigger-card--locked {
  cursor: default;
  pointer-events: none;
  border-color: rgba(68, 204, 136, 0.45);
}
.bigger-card-name {
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Shared ghost / dragging states ---- */
.bigger-item--ghost {
  opacity: 0.22;
}
.bigger-item--dragging {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  cursor: grabbing !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  opacity: 0.96;
}

/* ---- L1/L2 numbered slots — identical look to L3 rank slots ---- */
.bigger-slot {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.bigger-slot-num {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.bigger-slot-dropzone {
  flex: 1;
  min-height: 38px;
  border: 1.5px dashed rgba(95, 186, 255, 0.22);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 4px;
  transition: border-color 0.18s, background 0.18s;
  background: rgba(95, 186, 255, 0.03);
}
.bigger-slot:not(.bigger-slot--correct):not(.bigger-slot--wrong):hover .bigger-slot-dropzone {
  border-color: rgba(95, 186, 255, 0.48);
  background: rgba(95, 186, 255, 0.07);
}
.bigger-slot-dropzone .bigger-card,
.bigger-slot-dropzone .bigger-piece {
  flex: 1;
  min-width: 0;
}
.bigger-slot--correct .bigger-slot-dropzone {
  border-color: rgba(68, 204, 136, 0.75);
  background: rgba(68, 204, 136, 0.1);
}
.bigger-slot--wrong .bigger-slot-dropzone {
  border-color: rgba(255, 80, 80, 0.75);
  background: rgba(255, 80, 80, 0.1);
}

/* ---- L3 layout ---- */
.bigger-rank-area {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* Left panel: ranked slots + submit — floating, top pinned at 25vh */
.bigger-ranked-panel {
  pointer-events: auto;
  position: absolute;
  top: 25vh;
  left: 29%;
  transform: translateX(-50%);
  width: 240px;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(8, 14, 28, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}

/* Right panel: unranked country pool — floating, top pinned at 25vh */
.bigger-unranked-panel {
  pointer-events: auto;
  position: absolute;
  top: 25vh;
  left: 71%;
  transform: translateX(-50%);
  width: 240px;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(8, 14, 28, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}

.bigger-panel-header {
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #44cc88;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.bigger-panel-sublabel {
  color: rgba(255, 255, 255, 0.4);
  text-transform: none;
  font-weight: normal;
  letter-spacing: 0;
  font-size: 0.72rem;
}

.bigger-unranked-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(8, 14, 28, 0.25);
}

.bigger-unranked-item {
  min-width: 0;
}

.bigger-rank-slots {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) rgba(8, 14, 28, 0.25);
}
.bigger-rank-slots::-webkit-scrollbar,
.bigger-unranked-list::-webkit-scrollbar        { width: 5px; }
.bigger-rank-slots::-webkit-scrollbar-track,
.bigger-unranked-list::-webkit-scrollbar-track  { background: rgba(8, 14, 28, 0.25); border-radius: 4px; }
.bigger-rank-slots::-webkit-scrollbar-thumb,
.bigger-unranked-list::-webkit-scrollbar-thumb  { background: rgba(95, 186, 255, 0.35); border-radius: 4px; }
.bigger-rank-slots::-webkit-scrollbar-thumb:hover,
.bigger-unranked-list::-webkit-scrollbar-thumb:hover { background: rgba(95, 186, 255, 0.58); }

.bigger-rank-slot {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.bigger-rank-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.bigger-rank-dropzone {
  flex: 1;
  min-height: 38px;
  border: 1.5px dashed rgba(95, 186, 255, 0.22);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 4px;
  transition: border-color 0.18s, background 0.18s;
  background: rgba(95, 186, 255, 0.03);
}
.bigger-rank-dropzone .bigger-card,
.bigger-rank-dropzone .bigger-piece {
  flex: 1;
  min-width: 0;
}
.bigger-rank-slot:not(.bigger-rank-slot--locked):not(.bigger-rank-slot--wrong):hover .bigger-rank-dropzone {
  border-color: rgba(95, 186, 255, 0.48);
  background: rgba(95, 186, 255, 0.07);
}
.bigger-rank-slot--locked .bigger-rank-dropzone {
  border-color: rgba(68, 204, 136, 0.42);
  background: rgba(68, 204, 136, 0.06);
}
.bigger-rank-slot--wrong .bigger-rank-dropzone {
  border-color: rgba(255, 80, 80, 0.62);
  background: rgba(255, 80, 80, 0.08);
}

.bigger-submit-wrap {
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--glass-border);
  background: rgba(8, 14, 28, 0.4);
  flex-shrink: 0;
}

/* ---- Level-complete overlay (between phases) ---- */
.bigger-level-complete {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bigger-lc-box {
  background: rgba(8, 14, 28, 0.96);
  border: 1px solid rgba(68, 204, 136, 0.3);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.bigger-lc-box h2 {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* ---- Result overlay (round retry + final) ---- */
.bigger-result {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 28, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 21;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bigger-result-box {
  background: rgba(8, 14, 28, 0.96);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  min-width: 300px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.bigger-result-box h2 {
  font-size: 1.55rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.bigger-result-box p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.bigger-result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ---- Light mode overrides ---- */
html.light-mode .bigger-hud-label      { color: #1a7848; }
html.light-mode .bigger-prompt         { color: #1a7848; }
html.light-mode .bigger-progress       { color: #1a7848; }
html.light-mode .bigger-phase-num      { color: rgba(0, 0, 0, 0.4); }
html.light-mode .bigger-panel-header   { color: #1a7848; }
html.light-mode .bigger-panel-sublabel { color: rgba(0, 0, 0, 0.4); }
html.light-mode .bigger-rank-label     { color: rgba(0, 0, 0, 0.4); }
html.light-mode .bigger-slot-num       { color: rgba(0, 0, 0, 0.4); }
html.light-mode .bigger-slot-dropzone  { border-color: rgba(20, 80, 160, 0.22); }
html.light-mode .bigger-rank-dropzone  { border-color: rgba(20, 80, 160, 0.22); }
/* Issue 2: piece/card names — white text + dark card so the shadow halo reads cleanly */
html.light-mode .bigger-piece-name     { color: rgba(255, 255, 255, 0.95); }
html.light-mode .bigger-card           { background: rgba(8, 14, 28, 0.58); border-color: rgba(95, 186, 255, 0.32); }
html.light-mode .bigger-card-name      { color: rgba(255, 255, 255, 0.93);
                                         text-shadow: 0 1px 5px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7); }
html.light-mode .bigger-piece-svg path { fill: rgba(20, 80, 160, 0.18); stroke: rgba(20, 80, 160, 0.72); }
html.light-mode .bigger-bank-panel     { background: rgba(220, 228, 255, 0.52); }
html.light-mode .bigger-slots-panel    { background: rgba(220, 228, 255, 0.52); }
html.light-mode .bigger-ranked-panel   { background: rgba(220, 228, 255, 0.52); }
html.light-mode .bigger-unranked-panel { background: rgba(220, 228, 255, 0.52); }
html.light-mode .bigger-hud            { border-color: rgba(20, 80, 160, 0.28); }
/* Level-complete + Round-complete cards — bright glass in light mode */
html.light-mode .bigger-lc-box,
html.light-mode .bigger-result-box    { background: rgba(235, 245, 255, 0.96);
                                        border-color: rgba(26, 120, 72, 0.45);
                                        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12); }
html.light-mode .bigger-lc-box h2,
html.light-mode .bigger-result-box h2 { color: rgba(15, 35, 70, 0.92); }
html.light-mode .bigger-result-box p  { color: rgba(15, 35, 70, 0.65); }
html.light-mode .bigger-result        { background: transparent; }
/* Issue 4: submit strip — transparent so it matches the panel header above it */
html.light-mode .bigger-submit-wrap   { background: transparent; }
html.light-mode .bigger-rank-slots,
html.light-mode .bigger-unranked-list,
html.light-mode .bigger-piece-bank,
html.light-mode .bigger-slots-list     { scrollbar-color: rgba(20, 80, 160, 0.45) rgba(200, 220, 255, 0.3); }
html.light-mode .bigger-rank-slots::-webkit-scrollbar-track,
html.light-mode .bigger-unranked-list::-webkit-scrollbar-track,
html.light-mode .bigger-piece-bank::-webkit-scrollbar-track,
html.light-mode .bigger-slots-list::-webkit-scrollbar-track    { background: rgba(200, 220, 255, 0.3); }
html.light-mode .bigger-rank-slots::-webkit-scrollbar-thumb,
html.light-mode .bigger-unranked-list::-webkit-scrollbar-thumb,
html.light-mode .bigger-piece-bank::-webkit-scrollbar-thumb,
html.light-mode .bigger-slots-list::-webkit-scrollbar-thumb    { background: rgba(20, 80, 160, 0.45); }
html.light-mode .bigger-rank-slots::-webkit-scrollbar-thumb:hover,
html.light-mode .bigger-unranked-list::-webkit-scrollbar-thumb:hover,
html.light-mode .bigger-piece-bank::-webkit-scrollbar-thumb:hover,
html.light-mode .bigger-slots-list::-webkit-scrollbar-thumb:hover { background: rgba(20, 80, 160, 0.7); }


/* ============================================================
   COUNTRIES ADJACENT GAME
   ============================================================ */

/* Screen: full-viewport transparent overlay — same pattern as Bigger */
#countries-adjacent-screen {
  position: fixed !important;
  inset: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  will-change: auto !important;
  pointer-events: none;
  max-width: none !important;
  padding: 0 !important;
}
#countries-adjacent-screen .glass-btn,
#countries-adjacent-screen button {
  pointer-events: auto;
}

/* ---- Right-side clue panel ---- */
.adjacent-panel {
  pointer-events: auto;
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 20;
  width: min(240px, calc(100vw - 32px));
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(8, 14, 28, 0.88);
  border: 1px solid rgba(95, 186, 255, 0.18);
  border-radius: 16px;
  padding: 12px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

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

.adjacent-panel-label {
  font-size: 0.85rem;
  color: #44cc88;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adjacent-panel-label strong {
  color: var(--text);
  font-weight: normal;
}

.adjacent-progress {
  font-size: 0.78rem;
  color: #44cc88;
  flex-shrink: 0;
  white-space: nowrap;
}

.adjacent-instruction {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.35;
  border-top: 1px solid rgba(95, 186, 255, 0.1);
  padding-top: 8px;
}

/* ---- Clue list ---- */
.adjacent-clue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adjacent-clue-item {
  font-size: 0.86rem;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(95, 186, 255, 0.14);
  background: rgba(95, 186, 255, 0.06);
  cursor: default;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adjacent-clue-item:hover {
  background: rgba(95, 186, 255, 0.15);
  border-color: rgba(95, 186, 255, 0.35);
}

/* ---- Panel footer: timer, attempts, buttons ---- */
.adjacent-panel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(95, 186, 255, 0.1);
  padding-top: 8px;
}

.adjacent-attempts {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  flex: 1;
}
.adjacent-attempts--warn {
  color: #ff9944;
}

.adjacent-timer {
  font-size: 1.1rem;
  font-weight: 700;
  color: #44cc88;
  min-width: 2.2ch;
  text-align: center;
}
.adjacent-timer--low {
  color: #ff6644;
  animation: adjacent-timer-pulse 0.5s ease infinite alternate;
}
@keyframes adjacent-timer-pulse {
  from { opacity: 1; }
  to   { opacity: 0.45; }
}

/* ---- SVG shape popup (hover, mode 1) ---- */
.adjacent-shape-popup {
  position: fixed;
  z-index: 25;
  width: 140px;
  height: 140px;
  background: rgba(8, 14, 28, 0.92);
  border: 1px solid rgba(95, 186, 255, 0.30);
  border-radius: 12px;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.adjacent-shape-svg {
  width: 100%;
  height: 100%;
}
.adjacent-shape-svg path {
  fill: rgba(95, 186, 255, 0.28);
  stroke: rgba(95, 186, 255, 0.85);
  stroke-width: 2;
  fill-rule: evenodd;
}

/* ---- Feedback toast ---- */
.adjacent-feedback {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.adjacent-feedback--correct {
  background: rgba(40, 160, 90, 0.90);
  color: #fff;
}
.adjacent-feedback--wrong {
  background: rgba(170, 40, 30, 0.90);
  color: #fff;
}

/* ---- Round result overlay (between retry passes) ---- */
.adjacent-round-result {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(4, 8, 18, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.adjacent-round-box {
  background: rgba(8, 14, 28, 0.96);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 16px;
  padding: 1.8rem 2rem;
  max-width: 360px;
  width: 90vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.adjacent-round-box h3 {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.adjacent-round-box p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.adjacent-round-attempts-left {
  font-size: 0.8rem !important;
  color: #ff9944 !important;
}

/* ---- Final result overlay ---- */
.adjacent-result {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(4, 8, 18, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.adjacent-result-box {
  background: rgba(8, 14, 28, 0.96);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  max-width: 360px;
  width: 90vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.adjacent-result-box h3 {
  font-size: 1.7rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.adjacent-result-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
}
.adjacent-result-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* ---- Light mode overrides ---- */
html.light-mode .adjacent-panel          { background: rgba(235, 245, 255, 0.92);
                                            border-color: rgba(20, 80, 160, 0.22); }
html.light-mode .adjacent-panel-label    { color: #1a7848; }
html.light-mode .adjacent-progress       { color: #1a7848; }
html.light-mode .adjacent-instruction    { color: rgba(15, 35, 70, 0.5); }
html.light-mode .adjacent-clue-item      { color: rgba(15, 35, 70, 0.9);
                                            border-color: rgba(20, 80, 160, 0.18);
                                            background: rgba(20, 80, 160, 0.06); }
html.light-mode .adjacent-clue-item:hover { background: rgba(20, 80, 160, 0.14); }
html.light-mode .adjacent-timer          { color: #1a7848; }
html.light-mode .adjacent-shape-popup    { background: rgba(235, 245, 255, 0.96);
                                            border-color: rgba(20, 80, 160, 0.28); }
html.light-mode .adjacent-shape-svg path { fill: rgba(20, 80, 160, 0.20);
                                            stroke: rgba(20, 80, 160, 0.75); }
html.light-mode .adjacent-round-box      { background: rgba(235, 245, 255, 0.96);
                                            border-color: rgba(26, 120, 72, 0.4); }
html.light-mode .adjacent-round-box h3   { color: rgba(15, 35, 70, 0.92); }
html.light-mode .adjacent-round-box p    { color: rgba(15, 35, 70, 0.65); }
html.light-mode .adjacent-result-box     { background: rgba(235, 245, 255, 0.96);
                                            border-color: rgba(26, 120, 72, 0.45); }
html.light-mode .adjacent-result-box h3  { color: rgba(15, 35, 70, 0.92); }
html.light-mode .adjacent-result-stats   { color: rgba(15, 35, 70, 0.62); }
html.light-mode .adjacent-result         { background: rgba(200, 215, 255, 0.55); }
html.light-mode .adjacent-round-result   { background: rgba(200, 215, 255, 0.55); }

/* ======================================================
   COUNTRIES BORDERS — Trivia / Which is Longer? / Locate the Border
   ====================================================== */

/* Screen: full-viewport transparent overlay — same pattern as Adjacent/Bigger.
   Added 2026-07-21 (user report: the question box covered the map) — without
   this the screen rendered as the default centered menu-screen glass panel,
   and .borders-panel's absolute top/right anchored to THAT panel instead of
   the viewport's upper-right corner. */
#countries-borders-screen {
  position: fixed !important;
  inset: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  will-change: auto !important;
  pointer-events: none;
  max-width: none !important;
  padding: 0 !important;
}
/* menu-screen::before's ambient glow would float over the whole viewport once
   the section background is stripped (#about-us precedent) */
#countries-borders-screen::before { content: none; }
#countries-borders-screen .glass-btn,
#countries-borders-screen button {
  pointer-events: auto;
}

/* Admin pill bar (2026-07-21, user request — mirrors the Locate bar): game
   label, round counter/streak, Hints, ?, and Give Up all live here so the
   panel below is pure question content. */
.borders-bar {
  pointer-events: auto;
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  background: rgba(8, 14, 28, 0.88);
  border: 1px solid rgba(95, 186, 255, 0.18);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.borders-panel {
  pointer-events: auto;
  position: absolute;
  top: 68px;   /* below the admin pill bar */
  right: 16px;
  z-index: 20;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 82px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(8, 14, 28, 0.88);
  border: 1px solid rgba(95, 186, 255, 0.18);
  border-radius: 16px;
  padding: 12px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.borders-panel-label {
  font-size: 0.85rem;
  color: #44cc88;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.borders-panel-label strong {
  color: var(--text);
  font-weight: normal;
}

.borders-progress {
  font-size: 0.78rem;
  color: #44cc88;
  flex-shrink: 0;
  white-space: nowrap;
}

.borders-mode-area {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}

/* Question/choice text enlarged 2026-07-21 (user: a bit bigger for legibility) */
.borders-question {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
  line-height: 1.45;
  text-align: center;
}
.borders-question strong {
  color: var(--text);
}

/* ---- L1: Trivia answer tiles ---- */
.borders-choices {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.borders-choice-btn {
  position: relative;
  width: 100%;
  padding: 11px 12px 11px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  white-space: normal;
  line-height: 1.3;
}
.borders-choice-btn--correct {
  background: rgba(68, 204, 136, 0.30) !important;
  border-color: rgba(68, 204, 136, 0.65) !important;
}
.borders-choice-btn--wrong {
  background: rgba(255, 80, 80, 0.26) !important;
  border-color: rgba(255, 80, 80, 0.6) !important;
}

/* ---- L2: Which is Longer? — left accent matches the border's map tint ---- */
.borders-longer-btn--a { border-left: 3px solid rgba(95, 186, 255, 0.75); }
.borders-longer-btn--b { border-left: 3px solid rgba(68, 204, 136, 0.75); }
.borders-longer-len {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}
.borders-longer-len:empty { display: none; }

/* ---- L3: Locate the Border — stacked 3-row step list ----
   Each row carries its full prompt (restyled 2026-07-21, user: line-by-line
   stacked steps, bigger prompts, no blue text — the old blue instruction
   line is gone; the rows ARE the prompts). */
.borders-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.borders-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.45;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.borders-step--active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: var(--metal-bevel);
}
.borders-step--done {
  opacity: 0.75;
  border-color: rgba(68, 204, 136, 0.45);
  background: rgba(68, 204, 136, 0.07);
}
.borders-step-num {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.92);
}
.borders-step--done .borders-step-num {
  background: rgba(68, 204, 136, 0.18);
  border-color: rgba(68, 204, 136, 0.5);
  color: #44cc88;
}
.borders-step-lbl {
  font-size: 0.88rem;
  line-height: 1.35;
  text-align: left;
  color: rgba(255, 255, 255, 0.78);
}
.borders-step--active .borders-step-lbl { color: rgba(255, 255, 255, 0.95); }
.borders-step-lbl strong { color: var(--text); }

/* ---- Reveal line (after each answer) ----
   Made prominent 2026-07-21 (user: the length was too small and vanished too
   fast) — the <strong> length gets its own big line; the advance timeouts in
   countries-borders.js grew alongside (2400ms correct / 3400ms wrong). */
.borders-reveal {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  line-height: 1.45;
  border-top: 1px solid rgba(95, 186, 255, 0.1);
  padding-top: 9px;
}
.borders-reveal strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 3px;
  color: var(--text);
}
.borders-reveal--correct strong { color: #44cc88; }
.borders-reveal--wrong strong   { color: #ff6644; }


/* ---- Feedback toast ---- */
.borders-feedback {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 0.92rem;
  font-weight: 600;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.borders-feedback--correct {
  background: rgba(40, 160, 90, 0.90);
  color: #fff;
}
.borders-feedback--wrong {
  background: rgba(170, 40, 30, 0.90);
  color: #fff;
}

/* ---- Final result overlay ---- */
.borders-result {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(4, 8, 18, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.borders-result-box {
  background: rgba(8, 14, 28, 0.96);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  max-width: 360px;
  width: 90vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.borders-result-box h3 {
  font-size: 1.7rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.borders-result-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
}
.borders-result-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

/* ---- Light mode overrides ---- */
html.light-mode .borders-panel          { background: rgba(235, 245, 255, 0.92);
                                           border-color: rgba(20, 80, 160, 0.22); }
html.light-mode .borders-bar            { background: rgba(235, 245, 255, 0.92);
                                           border-color: rgba(20, 80, 160, 0.22); }
html.light-mode .borders-panel-label    { color: #1a7848; }
html.light-mode .borders-progress       { color: #1a7848; }
html.light-mode .borders-question       { color: rgba(15, 35, 70, 0.55); }
html.light-mode .borders-question strong { color: rgba(15, 35, 70, 0.92); }
html.light-mode .borders-choice-btn     { color: rgba(15, 35, 70, 0.88); }
html.light-mode .borders-longer-btn--a  { border-left-color: rgba(20, 80, 160, 0.6); }
html.light-mode .borders-longer-btn--b  { border-left-color: rgba(26, 120, 72, 0.6); }
html.light-mode .borders-longer-len     { color: rgba(15, 35, 70, 0.6); }
html.light-mode .borders-step           { border-color: rgba(15, 35, 70, 0.14);
                                           background: rgba(15, 35, 70, 0.04); }
html.light-mode .borders-step--active   { border-color: rgba(15, 35, 70, 0.35);
                                           background: rgba(15, 35, 70, 0.08); }
html.light-mode .borders-step--done     { border-color: rgba(26, 120, 72, 0.4);
                                           background: rgba(26, 120, 72, 0.08); }
html.light-mode .borders-step-num       { background: rgba(15, 35, 70, 0.08);
                                           border-color: rgba(15, 35, 70, 0.35);
                                           color: rgba(15, 35, 70, 0.92); }
html.light-mode .borders-step--done .borders-step-num { background: rgba(26, 120, 72, 0.14);
                                           border-color: rgba(26, 120, 72, 0.45);
                                           color: #1a7848; }
html.light-mode .borders-step-lbl       { color: rgba(15, 35, 70, 0.78); }
html.light-mode .borders-step--active .borders-step-lbl { color: rgba(15, 35, 70, 0.95); }
html.light-mode .borders-reveal         { color: rgba(15, 35, 70, 0.7); }
html.light-mode .borders-reveal strong  { color: rgba(15, 35, 70, 0.92); }
html.light-mode .borders-reveal--correct strong { color: #1a7848; }
html.light-mode .borders-reveal--wrong strong   { color: #c03020; }
html.light-mode .borders-result-box     { background: rgba(235, 245, 255, 0.96);
                                           border-color: rgba(26, 120, 72, 0.45); }
html.light-mode .borders-result-box h3  { color: rgba(15, 35, 70, 0.92); }
html.light-mode .borders-result-stats   { color: rgba(15, 35, 70, 0.62); }
html.light-mode .borders-result         { background: rgba(200, 215, 255, 0.55); }

/* ---- Light mode: Layer Menu ---- */
html.light-mode .layer-menu-row:hover    { background: rgba(160, 40, 120, 0.08); }
html.light-mode .layer-menu-box          { background: rgba(160, 40, 120, 0.06);
                                            border-color: rgba(160, 40, 120, 0.35); }
html.light-mode .layer-menu-box::after   { border-color: rgba(255, 255, 255, 0.95); }
html.light-mode .layer-sub-panel         { background: rgba(160, 40, 120, 0.04);
                                            border-left-color: rgba(160, 40, 120, 0.25); }

/* ================================================================
   City / Capital expand panel
   ================================================================ */
#city-expand-panel {
  display: none;
  /* left/top are set every frame by _positionCityPanel() (globe.js), tracking the
     city's screen position exactly like the Mountains/Volcanoes/Ranges info card
     (_positionCard() in geo-feature-cards.js) — right/top below are only a fallback
     for the brief instant before the first position update lands. */
  position: fixed;
  right: 12px;
  top: 80px;
  width: 300px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(8, 14, 28, 0.93);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(95, 186, 255, 0.22);
  border-radius: 14px;
  z-index: 1100;
  font-family: 'Syne', 'Segoe UI', sans-serif;
  color: rgba(220, 235, 255, 0.95);
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 186, 255, 0.35) transparent;
}
#city-expand-panel::-webkit-scrollbar       { width: 5px; }
#city-expand-panel::-webkit-scrollbar-track { background: transparent; }
#city-expand-panel::-webkit-scrollbar-thumb { background: rgba(95, 186, 255, 0.35); border-radius: 3px; }

.cep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px 10px;
  border-bottom: 1px solid rgba(95, 186, 255, 0.12);
  position: sticky;
  top: 0;
  background: rgba(8, 14, 28, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px 14px 0 0;
  z-index: 1;
}
.cep-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cep-city-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(220, 235, 255, 0.97);
  line-height: 1.2;
}
.cep-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #44cc88;
  padding: 10px 14px 4px;
}
.cep-close {
  background: none;
  border: none;
  color: rgba(140, 170, 255, 0.65);
  font-size: 13px;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.cep-close:hover {
  color: rgba(220, 235, 255, 0.95);
  background: rgba(95, 186, 255, 0.15);
}
.cep-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 14px;
  font-size: 12px;
}
.cep-label {
  color: rgba(140, 170, 255, 0.68);
  flex-shrink: 0;
  min-width: 82px;
  font-size: 11px;
}
.cep-name {
  color: rgba(220, 235, 255, 0.90);
  flex: 1;
  min-width: 0;
  font-size: 12px;
  overflow-wrap: break-word;
}
.cep-val {
  color: rgba(220, 235, 255, 0.90);
  font-weight: 600;
  text-align: right;
  flex-shrink: 1;
  min-width: 0;
  font-size: 12px;
  overflow-wrap: break-word;
}
.cep-coords {
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  color: rgba(180, 210, 255, 0.82);
  font-weight: 400;
}
.cep-nearby-row {
  padding: 4px 14px 2px;
}
.cep-nearby-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cep-nearby-sub {
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(95, 186, 255, 0.06);
}
.cep-dim {
  font-size: 10px;
  color: rgba(140, 170, 255, 0.55);
}
.cep-dist {
  font-size: 10px;
  color: rgba(140, 170, 255, 0.55);
}
.cep-divider {
  height: 1px;
  background: rgba(95, 186, 255, 0.10);
  margin: 8px 14px 0;
}
.cep-desc {
  padding: 8px 14px 2px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(200, 220, 250, 0.82);
}
.cep-empty {
  padding: 3px 14px 8px;
  font-size: 11px;
  color: rgba(140, 170, 255, 0.45);
  font-style: italic;
}
/* Geographic Context reuses the mountain/volcano/range card's `.geo-card-*` classes
   (see geo-feature-cards.js's renderNearbySectionHTML), which are built assuming a
   parent with 15px of horizontal padding (`.geo-card-body`). The city panel has no
   such wrapper — every other section here (`.cep-row`, `.cep-section-title`, etc.)
   applies its own 14px inset directly — so without this, everything from Geographic
   Context down sat flush against the panel edge instead of lining up with the
   content above it. */
.cep-geo-context {
  padding: 0 14px 8px;
}
.cep-geo-context .geo-card-nb-name,
.cep-geo-context .geo-card-nb-dist {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Light mode */
html.light-mode #city-expand-panel {
  background: rgba(255, 248, 240, 0.96);
  border-color: rgba(190, 105, 60, 0.28);
  color: rgba(20, 10, 5, 0.95);
  scrollbar-color: rgba(190, 105, 60, 0.40) transparent;
}
html.light-mode #city-expand-panel::-webkit-scrollbar-thumb { background: rgba(190, 105, 60, 0.40); }
html.light-mode .cep-header        { background: rgba(255, 248, 240, 0.99);
                                      border-bottom-color: rgba(190, 105, 60, 0.14); }
html.light-mode .cep-city-name     { color: rgba(20, 10, 5, 0.97); }
html.light-mode .cep-section-title { color: #1a7848; }
html.light-mode .cep-close         { color: rgba(110, 60, 20, 0.65); }
html.light-mode .cep-close:hover   { color: rgba(20, 10, 5, 0.90); background: rgba(190, 105, 60, 0.12); }
html.light-mode .cep-label         { color: rgba(110, 60, 20, 0.68); }
html.light-mode .cep-name          { color: rgba(20, 10, 5, 0.90); }
html.light-mode .cep-val           { color: rgba(20, 10, 5, 0.90); }
html.light-mode .cep-coords        { color: rgba(30, 30, 100, 0.80); }
html.light-mode .cep-dim           { color: rgba(110, 60, 20, 0.55); }
html.light-mode .cep-desc          { color: rgba(45, 30, 15, 0.85); }
html.light-mode .cep-dist          { color: rgba(110, 60, 20, 0.55); }
html.light-mode .cep-nearby-sub    { border-bottom-color: rgba(190, 105, 60, 0.08); }
html.light-mode .cep-divider       { background: rgba(190, 105, 60, 0.10); }

/* =====================================================
   ACTIVITY LAUNCH MENU + TUTORIAL OVERLAY
   ===================================================== */

/* Shared full-screen overlay backdrop */
.alm-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4000;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.alm-overlay.alm-visible { opacity: 1; }

/* ---- Launch menu card ----
   Liquid-metal treatment (2026-07-21, user request: pre-start pages must
   match the rest of the menus) — background/shadow stack mirrors
   section.menu-screen's flagship panel constants exactly. */
.alm-inner {
  width: min(440px, 92vw);
  padding: 2rem 2rem 1.6rem;
  border-radius: var(--radius);
  background-color: rgba(8, 14, 28, 0.90);
  background-image: linear-gradient(160deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.015) 30%,
    rgba(0, 0, 0, 0.06) 55%,
    rgba(255, 255, 255, 0.035) 100%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 12px 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(95, 186, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transform: translateY(10px);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.alm-overlay.alm-visible .alm-inner,
.alm-overlay.alm-visible .alm-tutorial-inner {
  transform: translateY(0);
}

/* Header row */
.alm-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.alm-title {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.alm-mode-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: rgba(95, 186, 255, 0.15);
  border: 1px solid rgba(95, 186, 255, 0.35);
  color: rgba(95, 186, 255, 0.95);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Description */
.alm-description {
  font-size: 0.96rem;
  color: rgba(220, 235, 255, 0.78);
  line-height: 1.55;
  margin: 0;
}

/* Coming-soon state */
.alm-coming-soon {
  font-size: 0.96rem;
  color: rgba(220, 235, 255, 0.50);
  font-style: italic;
  text-align: center;
  padding: 0.5rem 0;
}

/* Stacked numbered direction rows (cfg.steps — mirrors the in-game
   .borders-step rows: neutral chrome, no blue text) */
.alm-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alm-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}
.alm-step-num {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.92);
}
.alm-step-lbl {
  font-size: 0.9rem;
  line-height: 1.35;
  color: rgba(220, 235, 255, 0.85);
}

/* Options picker (e.g. Borders practice mode selector) — restyled 2026-07-21
   (user request): STACKED full-width liquid-metal buttons, label above.
   Button chrome mirrors the Global Mastery hub's .aq-card constants
   (--glass-bg + --metal-sheen-soft, --metal-bevel; hover = blue border
   rgba(95,186,255,0.45) + --metal-bevel-hover + 18px blue glow, -2px lift). */
.alm-options-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}
.alm-options-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(180, 210, 255, 0.70);
}
.alm-options-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alm-opt-btn {
  width: 100%;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: var(--radius);
  background-color: var(--glass-bg);
  background-image: var(--metal-sheen-soft);
  border: 1px solid var(--glass-border);
  box-shadow: var(--metal-bevel);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, color 0.15s;
}
.alm-opt-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(95, 186, 255, 0.45);
  box-shadow: var(--metal-bevel-hover), 0 6px 18px rgba(95, 186, 255, 0.12);
}
.alm-opt-btn.alm-opt-selected {
  border-color: rgba(68, 204, 136, 0.65);
  color: #44cc88;
  background-image: var(--metal-sheen-soft),
    linear-gradient(rgba(68, 204, 136, 0.10), rgba(68, 204, 136, 0.10));
  box-shadow: var(--metal-bevel), 0 0 14px rgba(68, 204, 136, 0.14);
}
.alm-opt-btn.alm-opt-selected:hover {
  transform: none;
  border-color: rgba(68, 204, 136, 0.8);
  box-shadow: var(--metal-bevel-hover), 0 0 18px rgba(68, 204, 136, 0.18);
}

/* Footer */
.alm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.alm-how-btn {
  font-size: 0.85rem;
  opacity: 0.70;
}
.alm-how-btn:hover { opacity: 1; }
.alm-start-btn {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem 1.4rem;
}
.alm-start-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Tutorial overlay ---- (same liquid-metal chrome as .alm-inner) */
.alm-tutorial-overlay .alm-tutorial-inner {
  width: min(500px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.75rem 2rem 1.75rem;
  border-radius: var(--radius);
  background-color: rgba(8, 14, 28, 0.94);
  background-image: linear-gradient(160deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.015) 30%,
    rgba(0, 0, 0, 0.06) 55%,
    rgba(255, 255, 255, 0.035) 100%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 12px 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(95, 186, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transform: translateY(10px);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}

.alm-tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.alm-tutorial-title {
  font-size: 1.07rem;
  font-weight: 700;
  color: var(--text);
}
.alm-tutorial-back {
  font-size: 0.82rem;
  padding: 0.25rem 0.8rem;
  white-space: nowrap;
  opacity: 0.80;
}
.alm-tutorial-back:hover { opacity: 1; }

.alm-tutorial-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.alm-tutorial-rule {
  font-size: 0.93rem;
  color: rgba(220, 235, 255, 0.82);
  line-height: 1.5;
  padding-left: 1.2rem;
  position: relative;
}
.alm-tutorial-rule::before {
  content: "›";
  position: absolute;
  left: 0;
  color: #44cc88;
  font-weight: 700;
}

.alm-shortcuts-section {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0.9rem;
}
.alm-shortcuts-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(180, 210, 255, 0.50);
  margin-bottom: 0.55rem;
}
.alm-shortcuts-table {
  width: 100%;
  border-collapse: collapse;
}
.alm-shortcuts-table td {
  padding: 0.28rem 0.5rem 0.28rem 0;
  font-size: 0.88rem;
  color: rgba(220, 235, 255, 0.72);
  vertical-align: middle;
}
.alm-key-cell { width: 5.5rem; }
kbd {
  display: inline-block;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 4px;
  padding: 1px 7px;
  font-family: monospace;
  font-size: 0.82rem;
  color: rgba(220, 235, 255, 0.90);
  line-height: 1.6;
}

/* HUD ? help button */
.alm-hud-help-btn {
  font-size: 0.82rem;
  padding: 0.28rem 0.7rem;
  opacity: 0.72;
  font-weight: 700;
  min-width: 2rem;
}
.alm-hud-help-btn:hover { opacity: 1; }

/* ---- Light mode overrides ---- */
html.light-mode .alm-inner,
html.light-mode .alm-tutorial-inner {
  background: rgba(255, 210, 185, 0.93);
  border-color: rgba(190, 105, 60, 0.35);
  box-shadow: 0 12px 60px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.50);
}
html.light-mode .alm-step        { border-color: rgba(40, 20, 10, 0.14);
                                    background: rgba(40, 20, 10, 0.05); }
html.light-mode .alm-step-num    { background: rgba(40, 20, 10, 0.08);
                                    border-color: rgba(40, 20, 10, 0.30);
                                    color: rgba(40, 20, 10, 0.88); }
html.light-mode .alm-step-lbl    { color: rgba(40, 20, 10, 0.80); }
html.light-mode .alm-title       { color: #1e0c16; }
html.light-mode .alm-description { color: rgba(40, 20, 10, 0.78); }
html.light-mode .alm-tutorial-title { color: #1e0c16; }
html.light-mode .alm-tutorial-rule  { color: rgba(40, 20, 10, 0.80); }
html.light-mode .alm-shortcuts-table td { color: rgba(40, 20, 10, 0.72); }
html.light-mode .alm-mode-badge {
  background: rgba(190, 105, 60, 0.12);
  border-color: rgba(190, 105, 60, 0.40);
  color: rgba(140, 50, 10, 0.90);
}
html.light-mode kbd {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.18);
  color: rgba(40, 20, 10, 0.88);
}
html.light-mode .alm-overlay {
  background: rgba(240, 210, 190, 0.55);
}
html.light-mode .cep-empty         { color: rgba(110, 60, 20, 0.45); }

/* =====================================================
   PROGRESSION — Stats page Overview / Badges / Completion
   ===================================================== */

/* ---- Overview: level + points header row ---- */
.prg-level-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.prg-level-circle {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(95, 186, 255, 0.10);
  border: 2px solid rgba(95, 186, 255, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.prg-level-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.prg-level-word {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
}

.prg-level-mid { flex: 1; min-width: 0; }

.prg-tier-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(95, 186, 255, 0.95);
  margin-bottom: 8px;
}

.prg-xp-bar {
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

.prg-xp-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #44cc88, rgba(95, 186, 255, 0.9));
  transition: width 0.4s ease;
}

.prg-xp-text {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}

.prg-points-block { flex: 0 0 auto; text-align: right; }

.prg-points-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #44cc88;
  margin-bottom: 6px;
}

/* ---- Overview: recent activity ---- */
.prg-history { margin-top: 4px; }

.prg-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 4px;
  font-size: 0.85rem;
}

.prg-history-row + .prg-history-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.prg-history-label { color: rgba(255, 255, 255, 0.78); }

.prg-history-pts {
  color: #44cc88;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prg-empty {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  text-align: center;
  padding: 14px 0;
}

/* ---- Badges grid ---- */
.prg-badge-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 10px;
}

.prg-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 10px 0 4px;
}

.prg-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px 10px 12px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.prg-badge--earned {
  border-color: rgba(68, 204, 136, 0.35);
}

.prg-badge--earned:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(68, 204, 136, 0.18);
}

.prg-badge--locked .prg-badge-emblem {
  filter: grayscale(1) brightness(0.65);
  opacity: 0.5;
}

.prg-badge-emblem { line-height: 0; margin-bottom: 8px; }
.prg-badge-emblem svg, .prg-badge-emblem img { display: inline-block; }

.prg-badge-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.prg-badge-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.35;
  min-height: 2.7em;
}

.prg-badge-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 8px 8px 5px;
}

.prg-badge-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: rgba(95, 186, 255, 0.75);
}

.prg-badge-progress-line,
.prg-badge-earned-line {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}

.prg-badge-earned-line { color: rgba(68, 204, 136, 0.85); margin-top: 8px; }

/* ---- Completion tab ---- */
.prg-comp-ring-label {
  display: block;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
  padding: 10px 0 6px;
}

.prg-comp-ring-label span {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.prg-comp-list { margin-top: 4px; }

.prg-comp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
}

.prg-comp-row + .prg-comp-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.prg-comp-icon { flex: 0 0 auto; width: 22px; text-align: center; }

.prg-comp-name {
  flex: 0 0 160px;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prg-comp-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.prg-comp-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: #44cc88;
}

.prg-comp-count {
  flex: 0 0 64px;
  text-align: right;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ---- Progression light mode overrides ---- */
html.light-mode .prg-level-word,
html.light-mode .prg-xp-text,
html.light-mode .prg-empty,
html.light-mode .prg-badge-count,
html.light-mode .prg-badge-desc,
html.light-mode .prg-badge-progress-line,
html.light-mode .prg-comp-count,
html.light-mode .prg-comp-ring-label span { color: rgba(40, 20, 10, 0.55); }

html.light-mode .prg-history-label,
html.light-mode .prg-comp-name { color: rgba(40, 20, 10, 0.82); }

html.light-mode .prg-tier-name { color: rgba(20, 80, 160, 0.95); }

html.light-mode .prg-points-value,
html.light-mode .prg-history-pts,
html.light-mode .prg-badge-earned-line { color: #1a7848; }

html.light-mode .prg-xp-bar,
html.light-mode .prg-badge-bar,
html.light-mode .prg-comp-bar { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.10); }

html.light-mode .prg-comp-bar-fill { background: #1a7848; }

html.light-mode .prg-xp-fill { background: linear-gradient(90deg, #1a7848, rgba(20, 80, 160, 0.85)); }

html.light-mode .prg-badge,
html.light-mode .prg-badge-bar { border-color: rgba(0, 0, 0, 0.10); }

html.light-mode .prg-badge { background: rgba(255, 255, 255, 0.35); }

html.light-mode .prg-history-row + .prg-history-row,
html.light-mode .prg-comp-row + .prg-comp-row { border-top-color: rgba(0, 0, 0, 0.08); }

html.light-mode .prg-level-circle {
  background: rgba(20, 80, 160, 0.08);
  border-color: rgba(20, 80, 160, 0.40);
}


/* =====================================================
   ATLAS ENCYCLOPEDIA (encyclopedia.js)
   ===================================================== */

/* Taller top reserve than the shared .sd-fixed cap (100vh - 160px) — same fix
   as #aq-hub above. Encyclopedia's content (search box, continue-studying card,
   discover button, collections grid) is tall enough to hit that cap, which pins
   the panel's top (and the site-header floating above it) as high as the layout
   allows, squeezing the header up into the profile bar instead of below it. */
#encyclopedia {
  max-width: 560px;
  max-height: calc(100vh - 250px);
  text-align: left;
}

#encyclopedia h2 { text-align: center; }

#ency-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
  min-height: 26px;
}

.ency-crumb-back {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: rgba(95, 186, 255, 0.95);
  font-size: 0.82rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: var(--transition);
}
.ency-crumb-back:hover { border-color: rgba(95, 186, 255, 0.5); }

.ency-crumb-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ency-crumb-home { font-weight: 400; color: var(--text-light); font-style: italic; font-size: 0.85rem; }

.ency-bottom-back { display: block; margin: 14px auto 0; }

/* ---- search ---- */
.ency-search-wrap { position: relative; margin-bottom: 6px; }

#ency-search {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 9px 32px 9px 12px;
  color: var(--text);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s ease;
}
#ency-search:focus { border-color: rgba(95, 186, 255, 0.55); }
#ency-search::placeholder { color: var(--text-light); }

.ency-search-clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 0.85rem;
}
.ency-search-clear[hidden] { display: none; }

/* Filters toggle sits directly under the global search bar */
.ency-search-tools { display: flex; gap: 7px; margin-bottom: 6px; }
.ency-filter-hint { font-size: 0.76rem; color: var(--text-light); padding: 1px 2px; }

/* ---- section headers ---- */
.ency-sect-hdr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #44cc88;
  margin: 16px 0 6px;
}

/* ---- rows (search results, browse lists, related) ---- */
.ency-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ency-row:hover { background: rgba(95, 186, 255, 0.10); }

.ency-row-icon { flex-shrink: 0; font-size: 0.95rem; line-height: 1; }

.ency-row-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 55%;
}

.ency-row-sub {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ency-diff-chip {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  color: #44cc88;
  border: 1px solid rgba(68, 204, 136, 0.4);
  border-radius: 6px;
  padding: 1px 5px;
}
.ency-diff-chip.ency-diff-premium {
  color: var(--text-light);
  border-color: rgba(255, 255, 255, 0.16);
  opacity: 0.75;
}

.ency-empty {
  color: var(--text-light);
  font-size: 0.85rem;
  font-style: italic;
  padding: 10px 4px;
}

/* ---- premium gate (locked detail view) ---- */
.ency-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 32px 16px;
}
.ency-locked-icon { font-size: 2.2rem; opacity: 0.6; }
.ency-locked-title { font-size: 1.05rem; font-weight: 600; }
.ency-locked-desc {
  color: var(--text-light);
  font-size: 0.85rem;
  max-width: 320px;
  line-height: 1.5;
}
.ency-locked #ency-locked-upgrade { flex: none; padding: 10px 24px; }

/* ---- continue studying ---- */
.ency-continue {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-bg);
  border: 1px solid rgba(68, 204, 136, 0.35);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
  transition: var(--transition);
}
.ency-continue:hover { border-color: rgba(68, 204, 136, 0.7); box-shadow: 0 0 12px rgba(68, 204, 136, 0.12); }
.ency-continue-icon { font-size: 1.3rem; }
.ency-continue-txt { flex: 1; display: flex; flex-direction: column; }
.ency-continue-txt strong { font-size: 0.92rem; color: var(--text); }
.ency-continue-txt span { font-size: 0.75rem; color: var(--text-light); }
.ency-continue-go { color: #44cc88; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }

/* ---- discover ---- */
.ency-discover-btn {
  width: 100%;
  background: rgba(95, 186, 255, 0.10);
  border: 1px solid rgba(95, 186, 255, 0.35);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 0;
  cursor: pointer;
  transition: var(--transition);
}
.ency-discover-btn:hover { border-color: rgba(95, 186, 255, 0.7); box-shadow: 0 0 12px rgba(95, 186, 255, 0.15); }

.ency-recs-label { font-size: 0.75rem; color: var(--text-light); margin: 8px 0 2px; }

/* ---- collections ---- */
.ency-coll-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ency-coll-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ency-coll-card:hover {
  transform: translateY(-2px);
  border-color: rgba(95, 186, 255, 0.45);
  box-shadow: 0 6px 18px rgba(95, 186, 255, 0.12);
}
.ency-coll-title { font-size: 0.84rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.ency-coll-blurb {
  font-size: 0.72rem;
  color: var(--text-light);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ency-coll-blurb-full { display: block; -webkit-line-clamp: unset; font-size: 0.84rem; margin-bottom: 8px; }
.ency-coll-note { font-size: 0.72rem; color: var(--text-light); line-height: 1.35; margin-top: 10px; font-style: italic; }

/* ---- your atlas ---- */
.ency-your-row { display: flex; gap: 8px; }
.ency-your-btn {
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 8px 0;
  cursor: pointer;
  transition: var(--transition);
}
.ency-your-btn:hover { border-color: rgba(95, 186, 255, 0.45); }

/* ---- dataset grid ---- */
.ency-ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ency-ds-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 8px 11px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ency-ds-card:hover {
  transform: translateY(-2px);
  border-color: rgba(95, 186, 255, 0.45);
  box-shadow: 0 6px 18px rgba(95, 186, 255, 0.12);
}
.ency-ds-icon { font-size: 1.05rem; line-height: 1.2; }
.ency-ds-name { font-size: 0.86rem; font-weight: 700; color: var(--text); }
.ency-ds-count { font-size: 0.71rem; color: var(--text-light); }

/* ---- dataset search filters (panel shared with the search-bar tools row) ---- */
.ency-filter-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(95, 186, 255, 0.10);
  border: 1px solid rgba(95, 186, 255, 0.35);
  border-radius: 8px; color: var(--text);
  font-size: 0.8rem; padding: 5px 12px; cursor: pointer;
}
.ency-filter-toggle:hover { background: rgba(95, 186, 255, 0.18); }
.ency-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #44cc88; color: #06210f; font-size: 0.66rem; font-weight: 700;
}
.ency-filter-badge[hidden] { display: none; }

.ency-filter-panel {
  display: grid; gap: 7px; padding: 9px 10px; margin-top: 1px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border); border-radius: 10px;
}
.ency-filter-panel[hidden] { display: none; }
.ency-filter-field { display: flex; align-items: center; gap: 7px; }
.ency-filter-label { flex: 0 0 78px; font-size: 0.74rem; color: var(--text-light); }
.ency-filter-select {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border); border-radius: 7px;
  color: var(--text); font-size: 0.78rem; padding: 4px 6px;
}
.ency-filter-select option, .ency-filter-unit-sel option { background: #101a30; color: #e8eefc; }
/* Numeric fields stack: label on its own line, then a full-width [min] – [max] <unit> row,
   so the elevation/depth inputs (which also carry a m/ft dropdown) stay comfortably wide. */
.ency-filter-num { flex-wrap: wrap; }
.ency-filter-num .ency-filter-label { flex: 1 1 100%; margin-bottom: 3px; }
.ency-filter-num .ency-filter-input {
  flex: 1 1 70px; min-width: 60px; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border); border-radius: 7px;
  color: var(--text); font-size: 0.78rem; padding: 4px 6px;
}
.ency-filter-input:focus, .ency-filter-select:focus, .ency-filter-unit-sel:focus { outline: none; border-color: rgba(95, 186, 255, 0.55); }
.ency-filter-dash { color: var(--text-light); font-size: 0.78rem; }
.ency-filter-unit { flex: 0 0 auto; min-width: 30px; font-size: 0.72rem; color: var(--text-light); }
.ency-filter-unit-sel {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border); border-radius: 7px;
  color: var(--text); font-size: 0.74rem; padding: 4px 4px;
}
.ency-filter-clear {
  justify-self: start; margin-top: 1px;
  background: none; border: 1px solid var(--glass-border); border-radius: 7px;
  color: var(--text-light); font-size: 0.74rem; padding: 4px 10px; cursor: pointer;
}
.ency-filter-clear:hover { color: var(--text); border-color: rgba(95, 186, 255, 0.45); }

.ency-browse-count { font-size: 0.74rem; color: var(--text-light); margin: 2px 0 5px; }

.ency-more-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: rgba(95, 186, 255, 0.95);
  font-size: 0.8rem;
  padding: 7px 0;
  cursor: pointer;
  transition: var(--transition);
}
.ency-more-btn:hover { border-color: rgba(95, 186, 255, 0.5); }

/* ---- detail hero ---- */
.ency-hero {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow: hidden;
}

.ency-hero-img-wrap {
  position: relative;
  width: calc(100% + 28px);
  margin: -12px -14px 10px;
  max-height: 150px;
  overflow: hidden;
}
.ency-hero-img {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: cover;
}
.ency-hero-credit {
  position: absolute;
  right: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 2px 7px;
  font-size: 0.62rem;
  line-height: 1.3;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ency-hero-credit:hover { background: rgba(0, 0, 0, 0.75); text-decoration: underline; }

/* Clickable hero photo — subtle "enlarge" affordance on hover */
.ency-hero-img-clickable { cursor: zoom-in; }
.ency-hero-img-wrap::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(8, 14, 28, 0.62) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><line x1='15.5' y1='15.5' x2='21' y2='21'/></svg>") center / 15px no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.ency-hero-img-wrap:hover::after { opacity: 1; }

/* Full-size photo lightbox — zoom + pan viewer */
#ency-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(4, 8, 18, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ency-lightbox-fade 0.16s ease;
}
@keyframes ency-lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
.ency-lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;          /* pinch/pan handled in JS */
  cursor: zoom-in;
}
#ency-lightbox.is-zoomed .ency-lightbox-stage { cursor: grab; }
#ency-lightbox.is-zoomed .ency-lightbox-stage:active { cursor: grabbing; }
.ency-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.ency-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(95, 186, 255, 0.4);
  background: rgba(8, 14, 28, 0.92);
  color: #cfe4ff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.ency-lightbox-close:hover { background: rgba(95, 186, 255, 0.22); }
.ency-lightbox-zoom {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 7px;
}
.ency-lb-zbtn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(95, 186, 255, 0.4);
  background: rgba(8, 14, 28, 0.9);
  color: #cfe4ff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.ency-lb-zbtn:hover { background: rgba(95, 186, 255, 0.22); }
.ency-lb-zbtn svg { width: 19px; height: 19px; }
#ency-lightbox .ency-hero-credit {
  left: 12px;
  right: auto;
  top: 12px;
  bottom: auto;
  z-index: 2;
  font-size: 0.7rem;
}

.ency-hero-top { display: flex; align-items: center; gap: 10px; }
.ency-hero-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.ency-hero-flag {
  width: 42px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.ency-hero-names { flex: 1; min-width: 0; }
.ency-hero-name { font-size: 1.12rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.ency-hero-sub { font-size: 0.8rem; color: var(--text-light); margin-top: 2px; }

.ency-fav-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  width: 32px; height: 32px;
  color: var(--text-light);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
}
.ency-fav-btn:hover { border-color: rgba(95, 186, 255, 0.5); }
.ency-fav-btn.ency-fav-on { color: #44cc88; border-color: rgba(68, 204, 136, 0.5); }

.ency-tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ency-tag-pill {
  background: rgba(95, 186, 255, 0.10);
  border: 1px solid rgba(95, 186, 255, 0.25);
  border-radius: 999px;
  color: rgba(160, 210, 255, 0.95);
  font-size: 0.7rem;
  padding: 2px 9px;
  cursor: pointer;
  transition: var(--transition);
}
.ency-tag-pill:hover { border-color: rgba(95, 186, 255, 0.6); }

/* ---- rankings ---- */
.ency-ranks { margin-top: 10px; }
.ency-rank-line {
  font-size: 0.82rem;
  font-weight: 600;
  color: #44cc88;
  padding: 2px 0;
}

/* ---- quick facts ---- */
.ency-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ency-fact {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ency-fact-label { font-size: 0.67rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.ency-fact-val { font-size: 0.83rem; font-weight: 600; color: var(--text); }

.ency-desc { font-size: 0.86rem; color: var(--text); line-height: 1.5; opacity: 0.92; }

/* ---- actions ---- */
.ency-action-row { display: flex; gap: 8px; margin-top: 14px; }
.ency-action-btn {
  flex: 1;
  background: rgba(95, 186, 255, 0.10);
  border: 1px solid rgba(95, 186, 255, 0.35);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 0;
  cursor: pointer;
  transition: var(--transition);
}
.ency-action-btn:hover { border-color: rgba(95, 186, 255, 0.7); box-shadow: 0 0 12px rgba(95, 186, 255, 0.15); }

/* ---- connections ---- */
.ency-conn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ency-conn-chip {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.76rem;
  padding: 4px 11px;
  cursor: pointer;
  transition: var(--transition);
}
.ency-conn-chip:hover { border-color: rgba(95, 186, 255, 0.55); box-shadow: 0 0 10px rgba(95, 186, 255, 0.12); }

/* ---- map return chip ---- */
#ency-map-return {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 600;
  background: rgba(8, 14, 28, 0.82);
  border: 1px solid rgba(95, 186, 255, 0.45);
  border-radius: 999px;
  color: #e8eefc;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 20px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition);
}
#ency-map-return:hover { border-color: rgba(95, 186, 255, 0.8); box-shadow: 0 0 14px rgba(95, 186, 255, 0.25); }

/* ---- light mode ---- */
html.light-mode .ency-sect-hdr,
html.light-mode .ency-rank-line,
html.light-mode .ency-continue-go { color: #1a7848; }
html.light-mode .ency-diff-chip { color: #1a7848; border-color: rgba(26, 120, 72, 0.4); }
html.light-mode .ency-diff-chip.ency-diff-premium { color: var(--text-light); border-color: rgba(0, 0, 0, 0.14); }
html.light-mode .ency-fav-btn.ency-fav-on { color: #1a7848; border-color: rgba(26, 120, 72, 0.5); }
html.light-mode #ency-search,
html.light-mode .ency-filter-select,
html.light-mode .ency-filter-unit-sel,
html.light-mode .ency-filter-num .ency-filter-input { background: rgba(255, 255, 255, 0.45); }
html.light-mode .ency-filter-select option,
html.light-mode .ency-filter-unit-sel option { background: #ffffff; color: #1e0c16; }
html.light-mode .ency-fact { background: rgba(255, 255, 255, 0.35); border-color: rgba(0, 0, 0, 0.08); }
html.light-mode .ency-tag-pill { color: #1a5c96; background: rgba(40, 120, 200, 0.10); border-color: rgba(40, 120, 200, 0.30); }
html.light-mode #ency-map-return { background: rgba(255, 255, 255, 0.85); color: #1e0c16; }

/* Signup age screen date input (2026-07-09) */
html.light-mode #signup-birthdate,
html.light-mode #oauth-birthdate { color-scheme: light; }

/* About page — Data Sources & Disclaimers cards + home footer link (2026-07-09) */
html.light-mode .about-sub-h { color: #1a7848; }
html.light-mode .about-link { color: #1668a8; }
html.light-mode .home-footer-link { color: rgba(30, 12, 22, 0.5); }
html.light-mode .home-footer-link:hover { color: #1668a8; }

/* ======================================================
   PROGRESSION AWARD TOASTS + EXPLORE REWARDS (2026-07-14)
   ====================================================== */
#prg-toast-stack {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}
.prg-toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 22px;
  background: rgba(10, 22, 48, 0.86);
  border: 1px solid rgba(68, 204, 136, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.prg-toast--in { opacity: 1; transform: translateY(0); }
.prg-toast-pts {
  font-size: 0.86rem;
  font-weight: 700;
  color: #44cc88;
  white-space: nowrap;
}
.prg-toast-label {
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.prg-toast--badge { border-color: rgba(95, 186, 255, 0.45); }
.prg-toast--badge .prg-toast-label { color: rgba(170, 218, 255, 0.95); }
.prg-toast--level { border-color: rgba(95, 186, 255, 0.45); }
.prg-toast--level .prg-toast-label { color: rgba(170, 218, 255, 0.95); font-weight: 600; }
html.light-mode .prg-toast { background: rgba(255, 255, 255, 0.92); border-color: rgba(26, 120, 72, 0.35); }
html.light-mode .prg-toast-pts { color: #1a7848; }
html.light-mode .prg-toast-label { color: rgba(30, 12, 22, 0.85); }
html.light-mode .prg-toast--badge, html.light-mode .prg-toast--level { border-color: rgba(22, 104, 168, 0.40); }
html.light-mode .prg-toast--badge .prg-toast-label, html.light-mode .prg-toast--level .prg-toast-label { color: #1668a8; }

/* Explore panel — live streak chip */
.explore-streak-chip {
  font-size: 0.70rem;
  font-weight: 600;
  color: rgba(170, 218, 255, 0.90);
  background: rgba(95, 186, 255, 0.12);
  border: 1px solid rgba(95, 186, 255, 0.32);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
html.light-mode .explore-streak-chip { color: #1668a8; background: rgba(40, 120, 200, 0.10); border-color: rgba(40, 120, 200, 0.30); }

/* Tutorial overlay — Points & Rewards sheet */
.alm-rewards-section { margin-top: 14px; }
.explore-rw-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 2px;
  border-top: 1px solid rgba(95, 186, 255, 0.10);
}
.explore-rw-row:first-of-type { border-top: none; }
.explore-rw-pts {
  flex: none;
  width: 46px;
  text-align: right;
  font-size: 0.80rem;
  font-weight: 700;
  color: #44cc88;
}
.explore-rw-text {
  flex: 1;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}
.explore-rw-state {
  flex: none;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.50);
  white-space: nowrap;
}
.explore-rw-row--done .explore-rw-state { color: #44cc88; }
.explore-rw-row--done .explore-rw-text { color: rgba(255, 255, 255, 0.55); }
html.light-mode .explore-rw-pts { color: #1a7848; }
html.light-mode .explore-rw-text { color: rgba(30, 12, 22, 0.82); }
html.light-mode .explore-rw-state { color: rgba(30, 12, 22, 0.50); }
html.light-mode .explore-rw-row--done .explore-rw-state { color: #1a7848; }
html.light-mode .explore-rw-row { border-top-color: rgba(0, 0, 0, 0.08); }

/* Curriculum Goals view — Explore points readout */
.aq-goals__pts {
  flex: none;
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 700;
  color: #44cc88;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html.light-mode .aq-goals__pts { color: #1a7848; }

/* Curriculum Goals — Points & Achievements groups (2026-07-14) */
.aq-goals__ach-cat {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 10px 2px 6px;
}
.aq-goals__max {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.60);
  padding: 7px 12px 2px;
}
.aq-goals__max strong { color: #44cc88; }
html.light-mode .aq-goals__ach-cat { color: rgba(30, 12, 22, 0.50); }
html.light-mode .aq-goals__max { color: rgba(30, 12, 22, 0.62); }
html.light-mode .aq-goals__max strong { color: #1a7848; }

/* Curriculum Goals — collapsible groups (2026-07-14, mirrors the hub accordion) */
.aq-goals__ghead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 6px 8px;
  margin: 0 -8px 8px;
  border-radius: 8px;
}
.aq-goals__ghead:hover { background: rgba(255, 255, 255, 0.05); }
.aq-goals__ghead .aq-goals__group-title { margin: 0; }
.aq-goals__ghead-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.aq-goals__gstat {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aq-goals__chev {
  font-size: 0.65rem;
  color: var(--text);
  opacity: 0.45;
  transition: transform 0.15s ease;
}
.aq-goals__group--collapsed .aq-goals__chev { transform: rotate(-90deg); }
.aq-goals__group--collapsed .aq-goals__gbody { display: none; }
.aq-goals__group--collapsed { margin-bottom: 8px; }
.aq-goals__group--collapsed .aq-goals__ghead { margin-bottom: 0; }
html.light-mode .aq-goals__ghead:hover { background: rgba(0, 0, 0, 0.05); }
html.light-mode .aq-goals__gstat { color: rgba(30, 12, 22, 0.60); }

/* Global Mastery hub — module cards as dropdowns w/ nested Curriculum Goals (2026-07-14) */
.aq-card__chev {
  margin-left: auto;
  flex: none;
  font-size: 0.65rem;
  color: var(--text);
  opacity: 0.45;
  transition: transform 0.15s ease;
}
/* ------------------------------------------------------------------
   Hub module cards (Global Mastery)
   Layout rules learned the hard way (2026-07-14):
   1. HOVER MUST NOT CHANGE LAYOUT. v1 revealed a dropdown *below* the card,
      growing it and pushing every card beneath down — so travelling down the
      list landed on the third module instead of the second.
   2. RESERVING SPACE ON THE TITLE ROW, NOT THE CONTENT ROW. v2 reserved a
      260px column across the whole card, which squeezed name+description into
      ~100px ("Mountains & Ranges · Co…") and crushed the progress bar.
   So: the title row owns the action buttons (it has dead space to the right
   anyway), and the description gets its own full-width line where it can never
   be truncated by them. Hover animates opacity/transform only — no layout.
   ------------------------------------------------------------------ */
.aq-card--dd { gap: 4px; }

/* Title row — name left, buttons right. min-height is button-height so the
   row never grows when they fade in. */
.aq-card--dd .aq-card__top { min-height: 30px; gap: 8px; }
.aq-card--dd .aq-card__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Description — own line, full width (the base rule's flex:1 would stretch it
   vertically now that it's a column child, hence flex: none) */
.aq-card--dd .aq-card__desc { flex: none; width: 100%; }

.aq-card__actions {
  margin-left: auto;
  flex: none;
  display: flex;
  gap: 8px;
  cursor: default;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.aq-card__actions button {
  flex: none;
  width: auto;
  margin: 0;
  padding: 5px 12px;
  font-size: 0.76rem;
  white-space: nowrap;
  line-height: 1.3;
}
/* Pinned (clicked) — also the whole touch story, which has no hover */
.aq-card--open .aq-card__actions { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) {
  .aq-card--dd:hover .aq-card__actions { opacity: 1; transform: none; pointer-events: auto; }
  .aq-card--dd .aq-card__chev { display: none; }  /* hover is the affordance */
}
/* Touch: no hover to reveal with, and no room beside the title on a phone —
   so the buttons wrap to their own full-width row that a tap opens. Reflow on
   tap is fine: it's a deliberate action, not a fly-through. The chevron is the
   affordance here (it's hidden on hover-capable devices). */
@media (hover: none) {
  .aq-card--dd .aq-card__top { flex-wrap: wrap; }
  .aq-card--dd:not(.aq-card--open) .aq-card__chev { transform: rotate(-90deg); }
  .aq-card__actions {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 4px;
    display: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .aq-card--open .aq-card__actions { display: flex; }
  .aq-card__actions button { flex: 1; padding: 7px 12px; }
}
/* Goals panel — only ever present when pinned open */
.aq-card__goals {
  cursor: default;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(95, 186, 255, 0.14);
  text-align: left;
}
html.light-mode .aq-card__goals { border-top-color: rgba(0, 0, 0, 0.10); }

/* ======================================================
   GOAL / ACHIEVEMENT DETAIL MODAL (2026-07-14)
   Rows stay terse; full criteria live here.
   ====================================================== */
.prg-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 8, 20, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.prg-info-overlay.prg-info-visible { opacity: 1; }
.prg-info-inner {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 84vh;
  overflow-y: auto;
  scrollbar-width: none;          /* wheel/swipe still scroll — app-wide convention */
  padding: 20px 22px 22px;
  text-align: left;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}
.prg-info-inner::-webkit-scrollbar { display: none; }
.prg-info-inner--wide { max-width: 520px; }
.prg-info-visible .prg-info-inner { transform: translateY(0) scale(1); }
.prg-info-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text);
  opacity: 0.45;
  cursor: pointer;
  padding: 4px 8px;
}
.prg-info-close:hover { opacity: 0.9; }
.prg-info-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-right: 26px;
}
.prg-info-emblem { flex: none; line-height: 0; }
.prg-info-emblem--locked { filter: grayscale(1); opacity: 0.5; }
.prg-info-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.prg-info-tag {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
}
.prg-info-sect-label {
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #44cc88;
  margin-bottom: 6px;
}
.prg-info-criteria {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}
.prg-info-notes {
  margin: 10px 0 0;
  padding-left: 18px;
}
.prg-info-notes li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 4px;
}
.prg-info-status {
  margin-top: 14px;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.62);
}
.prg-info-status--done { color: #44cc88; font-weight: 600; }
.prg-info-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.prg-info-bar-fill { height: 100%; background: #44cc88; border-radius: 3px; }
.prg-info-bar-text {
  margin-top: 5px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.50);
  font-variant-numeric: tabular-nums;
}
.prg-info-reward {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(95, 186, 255, 0.14);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.prg-info-reward-pts { font-size: 1.05rem; font-weight: 700; color: #44cc88; }
.prg-info-reward-lbl { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }
html.light-mode .prg-info-overlay { background: rgba(60, 40, 50, 0.42); }
html.light-mode .prg-info-tag,
html.light-mode .prg-info-notes li,
html.light-mode .prg-info-status,
html.light-mode .prg-info-bar-text,
html.light-mode .prg-info-reward-lbl { color: rgba(30, 12, 22, 0.58); }
html.light-mode .prg-info-criteria { color: rgba(30, 12, 22, 0.86); }
html.light-mode .prg-info-sect-label,
html.light-mode .prg-info-status--done,
html.light-mode .prg-info-reward-pts { color: #1a7848; }
html.light-mode .prg-info-bar { background: rgba(0, 0, 0, 0.10); }
html.light-mode .prg-info-bar-fill { background: #1a7848; }
html.light-mode .prg-info-reward { border-top-color: rgba(0, 0, 0, 0.10); }

/* Clickable goals rows + their "i" affordance */
.aq-goals__item--click { cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.aq-goals__item--click:hover {
  border-color: rgba(95, 186, 255, 0.45);
  background-color: rgba(95, 186, 255, 0.07);
}
.aq-goals__info {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  font-style: italic;
  color: rgba(95, 186, 255, 0.75);
  border: 1px solid rgba(95, 186, 255, 0.40);
}
.aq-goals__item--click:hover .aq-goals__info {
  color: #5fbaff;
  border-color: rgba(95, 186, 255, 0.75);
}
html.light-mode .aq-goals__info { color: #1668a8; border-color: rgba(22, 104, 168, 0.40); }
html.light-mode .aq-goals__item--click:hover { border-color: rgba(22, 104, 168, 0.40); background-color: rgba(22, 104, 168, 0.06); }

/* ======================================================
   STATS — ATLASPATH TAB (2026-07-14)
   ====================================================== */
.ap-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.40);
  text-transform: none;
  letter-spacing: 0;
}
.ap-global { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ap-global-txt {
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ap-mini-bar {
  flex: 1;
  height: 5px;
  min-width: 60px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.ap-mini-bar--tall { height: 8px; }
.ap-mini-fill { height: 100%; background: #44cc88; border-radius: 3px; }

/* Continent table — scrolls horizontally on narrow screens */
.ap-table-wrap { overflow-x: auto; }
.ap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.ap-table th {
  text-align: left;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  padding: 0 10px 6px 0;
  white-space: nowrap;
}
.ap-table td {
  padding: 7px 10px 7px 0;
  border-top: 1px solid rgba(95, 186, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
  white-space: nowrap;
  vertical-align: middle;
}
.ap-td-name { font-weight: 600; color: var(--text); }
.ap-td-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 7px;
  font-variant-numeric: tabular-nums;
}
.ap-table td .ap-mini-bar { display: inline-block; width: 64px; vertical-align: middle; }
.ap-row--done .ap-td-name { color: #44cc88; }
.ap-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  margin-left: 5px;
  vertical-align: middle;
}
.ap-chip--done { color: #44cc88; background: rgba(68, 204, 136, 0.14); border: 1px solid rgba(68, 204, 136, 0.35); }
.ap-chip--storm { color: #5fbaff; background: rgba(95, 186, 255, 0.12); border: 1px solid rgba(95, 186, 255, 0.35); }

/* Stat grids */
.ap-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 18px;
}
.ap-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(95, 186, 255, 0.08);
}
.ap-stat-lbl { font-size: 0.80rem; color: rgba(255, 255, 255, 0.58); }
.ap-stat-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ap-stat-sub { font-size: 0.74rem; font-weight: 400; color: rgba(255, 255, 255, 0.40); }

/* Achievements list */
.ap-ach-cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 5px;
}
.ap-ach-cat-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ap-ach-cat-count {
  font-size: 0.74rem;
  font-weight: 600;
  color: #44cc88;
  font-variant-numeric: tabular-nums;
}
.ap-ach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  margin-bottom: 4px;
  border-radius: 7px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ap-ach:hover { border-color: rgba(95, 186, 255, 0.45); background: rgba(95, 186, 255, 0.07); }
.ap-ach--done { border-color: rgba(68, 204, 136, 0.35); background: rgba(68, 204, 136, 0.07); }
.ap-ach-check {
  flex: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}
.ap-ach--done .ap-ach-check { color: #fff; background: #44cc88; border-color: #44cc88; }
.ap-ach-name { flex: 1; font-size: 0.84rem; color: var(--text); }
.ap-ach-pts {
  flex: none;
  font-size: 0.76rem;
  font-weight: 700;
  color: #44cc88;
  font-variant-numeric: tabular-nums;
}
.ap-ach:not(.ap-ach--done) .ap-ach-pts { color: rgba(255, 255, 255, 0.42); }

/* Points ledger — inline preview has no scroller of its own (capped at 10 rows
   in stats.js); the full list opens in the AqGoalInfo popup. */
.ap-ledger-more {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(95, 186, 255, 0.30);
  background: rgba(95, 186, 255, 0.07);
  color: #5fbaff;
  font-size: 0.80rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ap-ledger-more:hover { border-color: rgba(95, 186, 255, 0.60); background: rgba(95, 186, 255, 0.13); }
.ap-ledger--full { margin-top: 2px; }
.ap-ledger-note {
  margin: 12px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}
.ap-ledger-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(95, 186, 255, 0.08);
}
.ap-ledger-when {
  flex: none;
  width: 74px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.ap-ledger-label { flex: 1; font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }
.ap-ledger-pts {
  flex: none;
  font-size: 0.80rem;
  font-weight: 700;
  color: #44cc88;
  font-variant-numeric: tabular-nums;
}

html.light-mode .ap-hint,
html.light-mode .ap-global-txt,
html.light-mode .ap-table th,
html.light-mode .ap-td-sub,
html.light-mode .ap-stat-lbl,
html.light-mode .ap-stat-sub,
html.light-mode .ap-ach-cat-name,
html.light-mode .ap-ledger-when,
html.light-mode .ap-ledger-note { color: rgba(30, 12, 22, 0.55); }
html.light-mode .ap-ledger-more { color: #1668a8; border-color: rgba(22, 104, 168, 0.35); background: rgba(22, 104, 168, 0.06); }
html.light-mode .ap-ledger-more:hover { border-color: rgba(22, 104, 168, 0.60); background: rgba(22, 104, 168, 0.12); }
html.light-mode .ap-table td,
html.light-mode .ap-ledger-label { color: rgba(30, 12, 22, 0.82); }
html.light-mode .ap-mini-bar { background: rgba(0, 0, 0, 0.10); }
html.light-mode .ap-mini-fill { background: #1a7848; }
html.light-mode .ap-ach-cat-count,
html.light-mode .ap-ach-pts,
html.light-mode .ap-ledger-pts { color: #1a7848; }
html.light-mode .ap-row--done .ap-td-name { color: #1a7848; }
html.light-mode .ap-chip--done { color: #1a7848; background: rgba(26, 120, 72, 0.10); border-color: rgba(26, 120, 72, 0.35); }
html.light-mode .ap-chip--storm { color: #1668a8; background: rgba(22, 104, 168, 0.10); border-color: rgba(22, 104, 168, 0.35); }
html.light-mode .ap-ach--done { border-color: rgba(26, 120, 72, 0.30); background: rgba(26, 120, 72, 0.06); }
html.light-mode .ap-ach--done .ap-ach-check { background: #1a7848; border-color: #1a7848; }
html.light-mode .ap-ach:not(.ap-ach--done) .ap-ach-pts { color: rgba(30, 12, 22, 0.45); }
html.light-mode .ap-table td,
html.light-mode .ap-stat,
html.light-mode .ap-ledger-row { border-color: rgba(0, 0, 0, 0.08); }

/* =====================================================
   GAMING TAB — PUZZLES STATS (run ledger + progress chart)
   Data color: green #44cc88 (light mode #1a7848). Chart is a
   hand-rolled inline SVG from stats.js; every visual part is
   classed here so light mode flips without JS.
   ===================================================== */
.pz-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.pz-stat-sm { font-size: 1.35rem; line-height: 1.25; }
.pz-rank {
  flex: none;
  width: 22px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.pz-time {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: #44cc88;
  font-variant-numeric: tabular-nums;
}
.pz-when-right { flex: 1; width: auto; text-align: right; }
.pz-chart { width: 100%; height: auto; display: block; margin-top: 4px; }
.pz-chart-line { fill: none; stroke: #44cc88; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pz-chart-dot  { fill: #44cc88; }
.pz-chart-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.pz-chart-axis { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.pz-chart-lbl  { fill: rgba(255, 255, 255, 0.45); font-size: 10px; }
/* div, not <p> — the #stats-content p dark-mode white-force would override it */
.pz-note {
  margin-top: 16px;
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}

html.light-mode .pz-rank       { color: rgba(30, 12, 22, 0.45); }
html.light-mode .pz-time       { color: #1a7848; }
html.light-mode .pz-chart-line { stroke: #1a7848; }
html.light-mode .pz-chart-dot  { fill: #1a7848; }
html.light-mode .pz-chart-grid { stroke: rgba(0, 0, 0, 0.10); }
html.light-mode .pz-chart-axis { stroke: rgba(0, 0, 0, 0.22); }
html.light-mode .pz-chart-lbl  { fill: rgba(30, 12, 22, 0.55); }
html.light-mode .pz-note       { color: rgba(30, 12, 22, 0.5); }

/* Hub card bars — both clickable, each opens an itemized breakdown (2026-07-14) */
.aq-card__bar-row {
  cursor: pointer;
  border-radius: 7px;
  padding: 3px 6px;
  margin: 0 -6px;
  transition: background-color 0.15s ease;
}
.aq-card__bar-row:hover { background-color: rgba(95, 186, 255, 0.08); }
.aq-card__bar-row .aq-goals__info { flex: none; }
.aq-card__bar-row:hover .aq-goals__info { color: #5fbaff; border-color: rgba(95, 186, 255, 0.75); }
/* Points bar fill — blue (interactive accent); Progress stays green */
.aq-card__bar-fill--pts { background: rgba(95, 186, 255, 0.85); }
html.light-mode .aq-card__bar-fill--pts { background: #1668a8; }
html.light-mode .aq-card__bar-row:hover { background-color: rgba(22, 104, 168, 0.07); }

/* Curriculum Goals step redesign (2026-07-16): headline Achievements/Points
   bars + numbered step cards + per-step Go navigation */
.aq-goals__bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
/* Stacked variant — continent goals pages force one bar per row (matches how the
   narrow hub-card panel naturally wraps the global pair). */
.aq-goals__bars--stack { grid-template-columns: 1fr; }
.aq-goals__bar {
  border: 1px solid var(--glass-border);
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.aq-goals__bar:hover {
  border-color: rgba(95, 186, 255, 0.45);
  background-color: rgba(95, 186, 255, 0.06);
}
.aq-goals__bar:hover .aq-goals__info { color: #5fbaff; border-color: rgba(95, 186, 255, 0.75); }
.aq-goals__bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.aq-goals__bar-label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.aq-goals__bar-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.aq-goals__bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.4s ease;
}
.aq-goals__bar-fill--ach { background: linear-gradient(90deg, #3ab87a, #44cc88); }
.aq-goals__bar-fill--pts { background: rgba(95, 186, 255, 0.85); }
.aq-goals__bar-stat {
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aq-goals__bars-note {
  display: block;
  font-size: 0.69rem;
  color: rgba(255, 255, 255, 0.35);
  margin: -8px 2px 14px;
}

.aq-goals__step-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(95, 186, 255, 0.9);
  border: 1.5px solid rgba(95, 186, 255, 0.45);
  font-variant-numeric: tabular-nums;
}
.aq-goals__step--done .aq-goals__step-num {
  color: #fff;
  background-color: #44cc88;
  border-color: #44cc88;
}
.aq-goals__step .aq-goals__ghead { justify-content: flex-start; gap: 10px; }
.aq-goals__step .aq-goals__group-title { flex: 1; }
.aq-goals__step-what {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 2px 8px;
}
/* <button>: reset the global Gruppo/text-stroke button rule (style.css:839) */
.aq-goals__go {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 2px;
  padding: 6px 14px;
  font-family: 'Syne', 'Segoe UI', sans-serif;
  -webkit-text-stroke: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5fbaff;
  background: rgba(95, 186, 255, 0.08);
  border: 1px solid rgba(95, 186, 255, 0.4);
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.aq-goals__go:hover { background: rgba(95, 186, 255, 0.16); border-color: rgba(95, 186, 255, 0.7); }

html.light-mode .aq-goals__bar { background-color: rgba(0, 0, 0, 0.02); }
html.light-mode .aq-goals__bar:hover {
  border-color: rgba(22, 104, 168, 0.40);
  background-color: rgba(22, 104, 168, 0.06);
}
html.light-mode .aq-goals__bar:hover .aq-goals__info { color: #1668a8; border-color: rgba(22, 104, 168, 0.40); }
html.light-mode .aq-goals__bar-track { background: rgba(0, 0, 0, 0.10); }
html.light-mode .aq-goals__bar-fill--pts { background: #1668a8; }
html.light-mode .aq-goals__bar-stat { color: rgba(30, 12, 22, 0.50); }
html.light-mode .aq-goals__bars-note { color: rgba(30, 12, 22, 0.42); }
html.light-mode .aq-goals__step-num { color: #1668a8; border-color: rgba(22, 104, 168, 0.45); }
html.light-mode .aq-goals__step--done .aq-goals__step-num { color: #fff; background-color: #1a7848; border-color: #1a7848; }
html.light-mode .aq-goals__step-what { color: rgba(30, 12, 22, 0.55); }
html.light-mode .aq-goals__go {
  color: #1668a8;
  background: rgba(22, 104, 168, 0.06);
  border-color: rgba(22, 104, 168, 0.40);
}
html.light-mode .aq-goals__go:hover { background: rgba(22, 104, 168, 0.12); border-color: rgba(22, 104, 168, 0.65); }

/* Breakdown popup rows — compact: ~200 rows must stay scannable */
.prg-break { margin-top: 2px; }
.prg-break-cat {
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #44cc88;
  margin: 12px 0 4px;
}
.prg-break-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(95, 186, 255, 0.07);
}
.prg-break-check {
  flex: none;
  width: 14px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #44cc88;
}
.prg-break-label {
  flex: 1;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.84);
  min-width: 0;
}
.prg-break-row--done .prg-break-label { color: rgba(255, 255, 255, 0.48); }
.prg-break-detail {
  display: block;
  font-size: 0.70rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.4;
}
.prg-break-chip {
  flex: none;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prg-break-row--done .prg-break-chip { color: #44cc88; }
/* Clickable rows in the Completion popup — each opens its goal's criteria */
.prg-break-row--click { cursor: pointer; border-radius: 4px; }
.prg-break-row--click:hover { background: rgba(95, 186, 255, 0.06); }
.prg-break-row .aq-goals__info { flex: none; align-self: center; }
.prg-break-row--click:hover .aq-goals__info { color: #5fbaff; border-color: rgba(95, 186, 255, 0.75); }
html.light-mode .prg-break-row--click:hover { background: rgba(22, 104, 168, 0.06); }
html.light-mode .prg-break-cat { color: #1a7848; }
html.light-mode .prg-break-check,
html.light-mode .prg-break-row--done .prg-break-chip { color: #1a7848; }
html.light-mode .prg-break-label { color: rgba(30, 12, 22, 0.84); }
html.light-mode .prg-break-row--done .prg-break-label { color: rgba(30, 12, 22, 0.45); }
html.light-mode .prg-break-detail { color: rgba(30, 12, 22, 0.48); }
html.light-mode .prg-break-chip { color: rgba(30, 12, 22, 0.55); }
html.light-mode .prg-break-row { border-bottom-color: rgba(0, 0, 0, 0.06); }

/* Breakdown popup — collapsible groups + per-source bars (2026-07-14) */
.prg-break-group {
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 6px;
}
.prg-break-ghead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  cursor: pointer;
  user-select: none;
}
.prg-break-ghead:hover { background: rgba(95, 186, 255, 0.06); border-radius: 8px; }
.prg-break-gtitle { flex: 1; font-size: 0.84rem; font-weight: 600; color: var(--text); }
.prg-break-gstat {
  flex: none;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.prg-break-gchev {
  flex: none;
  font-size: 0.6rem;
  color: var(--text);
  opacity: 0.45;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}
.prg-break-group--open .prg-break-gchev { transform: rotate(0); }
.prg-break-gbody { display: none; padding: 2px 11px 8px; }
.prg-break-group--open .prg-break-gbody { display: block; }

/* Per-source bar rows in the points popup */
.prg-break-mid { flex: 1; min-width: 0; }
.prg-break-midtop { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.prg-break-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
  margin: 4px 0 3px;
}
.prg-break-track--big { height: 9px; margin: 0 0 6px; }
.prg-break-fill { height: 100%; background: rgba(95, 186, 255, 0.85); border-radius: 3px; }
.prg-break-row--done .prg-break-fill { background: #44cc88; }
.prg-break-row--bar { border-bottom: none; padding: 6px 0; }
.prg-break-summary { margin: 4px 0 2px; }
.prg-break-summary-txt {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.60);
  font-variant-numeric: tabular-nums;
}
html.light-mode .prg-break-gstat { color: rgba(30, 12, 22, 0.55); }
html.light-mode .prg-break-track { background: rgba(0, 0, 0, 0.10); }
html.light-mode .prg-break-fill { background: #1668a8; }
html.light-mode .prg-break-row--done .prg-break-fill { background: #1a7848; }
html.light-mode .prg-break-summary-txt { color: rgba(30, 12, 22, 0.60); }
html.light-mode .prg-break-ghead:hover { background: rgba(22, 104, 168, 0.06); }