/* ===== Country Guess — global styles ===== */

/* Self-hosted Inter (vendor/fonts, SIL Open Font License) — no font CDN. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Emoji flags for systems without them (Windows shows two letters, e.g. "KE").
   js/flags.js adds html.cg-flag-font only where flags don't render, so the
   font is only used — and downloaded — there. unicode-range limits it to
   flag characters. Twemoji Country Flags: vendor/flags/LICENSE.md
   (MIT + CC BY 4.0 art). */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("../vendor/flags/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
    U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}

:root {
  --cg-bg: #0f172a;
  --cg-surface: #1e293b;
  --cg-surface-2: #334155;
  --cg-text: #f1f5f9;
  --cg-text-dim: #94a3b8;
  --cg-accent: #10b981;
  --cg-accent-2: #3b82f6;
  --cg-warn: #f59e0b;
  --cg-danger: #ef4444;

  /* Map fills */
  --cg-map-default: #475569;
  --cg-map-default-stroke: #cbd5e1;
  --cg-ocean: #1b2b44;
  --cg-map-guessed: #10b981;
  --cg-map-missed: #ef4444;
  --cg-map-pulse: #fbbf24;
  --cg-map-hint: #8b5cf6;

  --cg-font-scale: 1;
  --cg-radius: 0.5rem;
  --cg-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.3);

  --cg-anim-fast: 180ms;
  --cg-anim-med: 360ms;
  --cg-anim-slow: 720ms;
}

/* Colorblind-safe palette (deuteranopia-friendly: blue/orange instead of red/green) */
.cg-colorblind {
  --cg-accent: #2563eb;       /* blue for "correct" */
  --cg-map-guessed: #2563eb;
  --cg-map-missed: #f97316;   /* orange for "missed" */
  --cg-danger: #f97316;
}

/* Light mode override */
.cg-light {
  --cg-bg: #f8fafc;
  --cg-surface: #ffffff;
  --cg-surface-2: #e2e8f0;
  --cg-text: #0f172a;
  --cg-text-dim: #475569;
  --cg-map-default: #cbd5e1;
  --cg-map-default-stroke: #475569;
  --cg-ocean: #dce8f1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.cg-reduced-motion *,
.cg-reduced-motion *::before,
.cg-reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}

html, body {
  background: var(--cg-bg);
  color: var(--cg-text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: calc(16px * var(--cg-font-scale));
}
html.cg-flag-font body {
  font-family: "Twemoji Country Flags", 'Inter', system-ui, -apple-system, sans-serif;
}

[dir="rtl"] body {
  text-align: right;
}

/* ===== In-game layout: big map + slim side panel =====
   The map is the star: it takes all remaining width and most of the
   viewport height so an entire region is visible at once. The side panel
   holds the prompt, the guess input, compact stats, and the running list
   of correct guesses. */

/* Let the panel breathe wider while a round is in progress. */
body.cg-playing #game-container { max-width: min(1760px, 97vw); }

#game-layout {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  /* Roughly the viewport minus the (shrunk) header. */
  height: clamp(480px, calc(100vh - 170px), 980px);
}

#map-container {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#map {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: var(--cg-surface-2);
  border-radius: var(--cg-radius);
  outline: none;
}

#side-panel {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

/* The guessed list soaks up whatever height is left and scrolls. */
/* (the found / missed lists are .cg-list-panel, which fills remaining height) */

/* Shape silhouettes are tall; keep the prompt from crowding out the input. */
#prompt-area { max-height: 40%; overflow-y: auto; }

/* ===== Inline guess feedback (under the input) ===== */
.cg-feedback {
  min-height: 1.25rem;          /* reserve space: no layout jump */
  margin-top: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.25rem;
  transition: color var(--cg-anim-fast);
}
.cg-feedback-dup     { color: var(--cg-warn); }
.cg-feedback-out     { color: var(--cg-accent-2); }
.cg-feedback-near    { color: var(--cg-warn); }
.cg-feedback-wrong   { color: var(--cg-danger); }
.cg-feedback-invalid { color: var(--cg-text-dim); }

@keyframes cg-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.cg-shake { animation: cg-shake 0.3s ease-in-out; }

/* ===== Live progress breakdown ===== */
#region-progress { flex-shrink: 0; max-height: 32%; overflow-y: auto; }
.cg-prog-row { margin-bottom: 0.5rem; }
.cg-prog-row:last-child { margin-bottom: 0; }
.cg-prog-top {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: var(--cg-text-dim);
  margin-bottom: 2px;
}
.cg-prog-done .cg-prog-top { color: var(--cg-accent); font-weight: 600; }
.cg-prog-bar {
  height: 4px; border-radius: 2px;
  background: var(--cg-surface);
  overflow: hidden;
}
.cg-prog-fill {
  height: 100%; border-radius: 2px;
  background: var(--cg-accent);
  transition: width var(--cg-anim-med) ease-out;
}

/* ===== Review popup (post-game) ===== */
.leaflet-popup-content-wrapper {
  background: var(--cg-surface) !important;
  color: var(--cg-text) !important;
  border-radius: var(--cg-radius) !important;
  box-shadow: var(--cg-shadow) !important;
}
.leaflet-popup-tip { background: var(--cg-surface) !important; }
.cg-popup { font-size: 0.85rem; line-height: 1.4; }
.cg-popup-title { font-size: 1rem; margin-bottom: 0.25rem; }
.cg-popup-dim { color: var(--cg-text-dim); }
.cg-popup-fact { margin-top: 0.35rem; font-size: 0.78rem; color: var(--cg-text-dim); font-style: italic; }
.cg-popup-badge {
  font-size: 0.7rem; font-weight: 600;
  padding: 0.05rem 0.4rem; border-radius: 999px;
  vertical-align: middle;
}
.cg-popup-ok   { background: var(--cg-accent);  color: #fff; }
.cg-popup-miss { background: var(--cg-danger);  color: #fff; }

@media (max-width: 767px) {
  #game-layout {
    flex-direction: column;
    height: auto;
  }
  #map { height: 55vh; min-height: 320px; }
  /* Phones: status + input above the map so the keyboard doesn't hide them */
  #side-panel { width: 100%; order: -1; }
  #found-panel { display: none; }
  .cg-list-panel { flex: none; max-height: 40vh; }
  #region-progress { max-height: 22vh; }
}

#map:focus-visible {
  box-shadow: 0 0 0 3px var(--cg-accent);
}

.leaflet-container {
  background: var(--cg-ocean) !important;
  font-family: inherit !important;
}

.leaflet-control-attribution {
  background: rgb(0 0 0 / 0.7) !important;
  color: #fff !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: #93c5fd !important; }

/* Country tooltip */
.cg-tooltip {
  background: var(--cg-surface) !important;
  color: var(--cg-text) !important;
  border: 1px solid var(--cg-surface-2) !important;
  font-weight: 600;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.375rem !important;
  box-shadow: var(--cg-shadow);
}

/* ===== Pulse on guess ===== */
@keyframes cg-pulse-ring {
  0%   { stroke-width: 2;  stroke-opacity: 1;   }
  60%  { stroke-width: 14; stroke-opacity: 0.4; }
  100% { stroke-width: 24; stroke-opacity: 0;   }
}
.cg-pulse {
  animation: cg-pulse-ring var(--cg-anim-slow) ease-out;
}

/* ===== Confetti milestone ===== */
@keyframes cg-confetti-fall {
  0%   { transform: translate3d(0,-20vh,0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(var(--dx,0),110vh,0) rotate(720deg); opacity: 0; }
}
.cg-confetti-piece {
  position: fixed;
  top: 0;
  width: 10px;
  height: 16px;
  pointer-events: none;
  z-index: 9999;
  animation: cg-confetti-fall 1.8s cubic-bezier(.2,.7,.4,1) forwards;
}

/* ===== Streak chip ===== */
.cg-streak-pop {
  animation: cg-streak-bump var(--cg-anim-fast) ease-out;
}
@keyframes cg-streak-bump {
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1);   }
}

/* ===== Toast ===== */
.cg-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cg-surface);
  color: var(--cg-text);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--cg-surface-2);
  box-shadow: var(--cg-shadow);
  z-index: 9999;
  animation: cg-toast-in 0.2s ease-out;
}
@keyframes cg-toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== Country card (on miss) ===== */
.cg-card {
  background: var(--cg-surface);
  border: 1px solid var(--cg-surface-2);
  border-radius: var(--cg-radius);
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.cg-card-flag {
  font-size: 3rem;
  line-height: 1;
}

/* ===== Passport heatmap cell ===== */
.cg-heat-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  background: var(--cg-surface-2);
  cursor: pointer;
}
.cg-heat-cell[data-mastery="0"]    { background: #1f2937; }
.cg-heat-cell[data-mastery="1"]    { background: #374151; }
.cg-heat-cell[data-mastery="2"]    { background: #6b7280; }
.cg-heat-cell[data-mastery="3"]    { background: #34d399; color: #042f2e; }
.cg-heat-cell[data-mastery="4"]    { background: #10b981; color: #042f2e; }

/* ===== Modal ===== */
.cg-modal-bg {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.cg-modal {
  background: var(--cg-surface);
  border-radius: var(--cg-radius);
  padding: 1.5rem;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--cg-shadow);
}

/* ===== Onboarding ===== */
.cg-onboarding-step {
  text-align: center;
  padding: 1.5rem;
}
.cg-onboarding-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

/* ===== Buttons ===== */
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--cg-radius);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform var(--cg-anim-fast), background var(--cg-anim-fast);
  user-select: none;
}
.cg-btn:active { transform: translateY(1px); }
.cg-btn:focus-visible { outline: 3px solid var(--cg-accent-2); outline-offset: 2px; }
.cg-btn-primary { background: var(--cg-accent); color: #042f2e; }
.cg-btn-primary:hover { filter: brightness(1.08); }
.cg-btn-danger  { background: var(--cg-danger); color: #fff; }
.cg-btn-ghost   { background: transparent; color: var(--cg-text); border: 1px solid var(--cg-surface-2); }
.cg-btn-ghost:hover { background: var(--cg-surface-2); }
.cg-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.875rem; }
.cg-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }

/* ===== Mode bar chips ===== */
.cg-chip {
  background: var(--cg-surface-2);
  color: var(--cg-text);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--cg-anim-fast), border-color var(--cg-anim-fast);
  display: inline-flex; align-items: center; gap: 0.3rem;
  user-select: none;
}
.cg-chip:hover { border-color: var(--cg-accent); }
.cg-chip[aria-pressed="true"],
.cg-chip[aria-checked="true"] {
  background: var(--cg-accent);
  color: #042f2e;
  font-weight: 600;
}
.cg-chip:focus-visible { outline: 2px solid var(--cg-accent-2); outline-offset: 2px; }

/* ===== Home screen: region tiles ===== */
/* Flex rather than grid so a short last row (7 tiles = 4 + 3) stays centered. */
.cg-tiles {
  --cg-tile-cols: 2;
  --cg-tile-gap: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cg-tile-gap);
  max-width: 64rem;
  margin: 1.25rem auto 0;
}
@media (min-width: 768px) {
  .cg-tiles { --cg-tile-cols: 4; --cg-tile-gap: 1rem; }
}
.cg-tile {
  --tile-accent: var(--cg-accent);
  flex: 0 0 calc((100% - (var(--cg-tile-cols) - 1) * var(--cg-tile-gap)) / var(--cg-tile-cols));
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--cg-surface);
  color: var(--cg-text);
  border: 1px solid color-mix(in srgb, var(--tile-accent) 22%, var(--cg-surface-2));
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  cursor: pointer;
  transition: transform var(--cg-anim-fast), border-color var(--cg-anim-fast), box-shadow var(--cg-anim-fast);
}
.cg-tile:hover:not(:disabled) {
  border-color: var(--tile-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--tile-accent) 55%, transparent);
}
.cg-tile:focus-visible { outline: 3px solid var(--tile-accent); outline-offset: 2px; }
.cg-tile:disabled { opacity: 0.55; cursor: wait; }
.cg-tile-art {
  display: block;
  height: 104px;
  padding: 0.6rem;
  color: var(--cg-text);          /* surrounding land uses currentColor */
  background: color-mix(in srgb, var(--tile-accent) 9%, var(--cg-surface));
}
.cg-tile-art svg { display: block; width: 100%; height: 100%; }
.cg-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem 0.85rem;
}
.cg-tile-name { font-weight: 700; font-size: calc(1.05rem * var(--cg-font-scale)); line-height: 1.2; }
.cg-tile-meta { font-size: 0.78rem; color: var(--cg-text-dim); }
.cg-tile-meta > span { white-space: nowrap; }
.cg-tile-progress { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.45rem; }
.cg-tile-bar { height: 6px; border-radius: 3px; background: var(--cg-surface-2); overflow: hidden; }
.cg-tile-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--tile-accent); }
.cg-tile-best { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 600; }
.cg-tile-new { color: var(--cg-text-dim); font-weight: 400; }
.cg-home-hint { font-size: 0.85rem; color: var(--cg-text-dim); margin: 1.25rem auto 0.25rem; max-width: 36rem; }

.cg-stars { color: #f59e0b; letter-spacing: 0.08em; }

/* ===== Play screen ===== */
/* While a round is on (and on its results), the header shrinks to a title
   line so the map and the input get the space. */
body.cg-playing #hero-sub,
body.cg-playing #hero-welcome { display: none; }
body.cg-playing #hero-title { font-size: 1.25rem; }

/* Time left + count + progress */
.cg-status {
  background: var(--cg-surface-2);
  border-radius: calc(var(--cg-radius) * 1.5);
  padding: 0.8rem 1rem 0.9rem;
}
.cg-status-row { display: flex; justify-content: space-between; align-items: flex-end; }
.cg-status-timer,
.cg-status-count {
  font-size: calc(2rem * var(--cg-font-scale));
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cg-status-timer { color: var(--cg-text); transition: color var(--cg-anim-med); }
.cg-status-count { color: var(--cg-accent); }
.cg-status-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cg-text-dim);
}
.cg-time-warn { color: var(--cg-warn); }
.cg-time-crit { color: var(--cg-danger); animation: cg-time-pulse 1s ease-in-out infinite; }
@keyframes cg-time-pulse { 50% { opacity: 0.55; } }
.cg-status-bar {
  height: 8px;
  margin-top: 0.6rem;
  border-radius: 4px;
  background: var(--cg-surface);
  overflow: hidden;
}
.cg-status-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--cg-accent);
  transition: width var(--cg-anim-med) ease-out;
}

/* The guess box: the one thing you interact with */
.cg-input {
  width: 100%;
  font-size: calc(1.25rem * var(--cg-font-scale));
  padding: 0.85rem 1rem;
  color: var(--cg-text);
  background: var(--cg-surface);
  border: 2px solid var(--cg-accent);
  border-radius: calc(var(--cg-radius) * 1.5);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cg-accent) 15%, transparent);
}
.cg-input:focus { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cg-accent) 25%, transparent); }
.cg-input::placeholder { color: var(--cg-text-dim); }

.cg-play-actions { display: flex; gap: 0.5rem; }
.cg-play-actions .cg-btn { flex: 1 1 0; padding-left: 0.5rem; padding-right: 0.5rem; }
#give-up-btn:hover { color: var(--cg-danger); border-color: var(--cg-danger); background: transparent; }

/* Side-panel cards */
.cg-panel {
  background: var(--cg-surface-2);
  border-radius: calc(var(--cg-radius) * 1.5);
  padding: 0.75rem 1rem;
}
.cg-panel-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--cg-text-dim);
  margin-bottom: 0.4rem;
}
.cg-panel-hint { font-size: 0.75rem; color: var(--cg-text-dim); margin: -0.2rem 0 0.4rem; }
.cg-list-panel { flex: 1 1 0; min-height: 0; overflow-y: auto; }

.cg-found-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0.35rem;
  margin: 0 -0.35rem;
  border-radius: 0.375rem;
  font-size: 0.92rem;
  color: var(--cg-text);
}
.cg-found-item:first-child { animation: cg-found-in 0.9s ease-out; }
@keyframes cg-found-in {
  0%   { background: color-mix(in srgb, var(--cg-accent) 30%, transparent); transform: translateY(-4px); }
  100% { background: transparent; transform: none; }
}

.cg-missed-group {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cg-text-dim);
  margin: 0.6rem 0 0.15rem;
}
.cg-missed-group:first-child { margin-top: 0; }
.cg-missed-item {
  display: flex; align-items: center; gap: 0.5rem;
  width: calc(100% + 0.7rem);
  margin: 0 -0.35rem;
  padding: 0.2rem 0.35rem;
  border-radius: 0.375rem;
  font-size: 0.92rem;
  text-align: left;
  color: var(--cg-text);
  background: transparent;
  border: none;
  cursor: pointer;
}
.cg-missed-item:hover { background: var(--cg-surface); }
.cg-missed-item:focus-visible { outline: 2px solid var(--cg-accent-2); }
.cg-missed-none { font-size: 0.95rem; font-weight: 600; color: var(--cg-accent); }

/* ===== End-of-round result card ===== */
.cg-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cg-accent) 14%, var(--cg-surface)), var(--cg-surface) 70%);
  border: 1px solid color-mix(in srgb, var(--cg-accent) 30%, var(--cg-surface-2));
}
.cg-result.hidden { display: none; }
.cg-result-main { flex: 1 1 320px; min-width: 0; }
.cg-result-label { font-size: 0.85rem; font-weight: 600; color: var(--cg-text-dim); }
.cg-result-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin-top: 0.15rem; }
.cg-result-count {
  font-size: calc(2.75rem * var(--cg-font-scale));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cg-result-sub { color: var(--cg-text-dim); }
.cg-result-bar {
  max-width: 28rem;
  height: 10px;
  margin-top: 0.75rem;
  border-radius: 5px;
  background: var(--cg-surface-2);
  overflow: hidden;
}
.cg-result-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: var(--cg-accent);
  transition: width 0.9s cubic-bezier(.2,.7,.3,1);
}
.cg-result-best { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin-top: 0.6rem; font-size: 0.9rem; }
.cg-result-best .cg-stars { font-size: 1.15rem; }
.cg-result-newbest { font-weight: 700; color: var(--cg-accent); }
.cg-result-next { color: var(--cg-text-dim); }
.cg-result-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.cg-result-extra { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; width: 100%; }
.cg-result .cg-ch-result { margin: 0.75rem 0 0; text-align: left; }

/* Optional "learn the ones you missed" */
.cg-learn {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  text-align: left;
  border-radius: calc(var(--cg-radius) * 1.5);
  background: var(--cg-surface-2);
}
.cg-learn summary { cursor: pointer; font-weight: 600; }
.cg-learn.hidden { display: none; }

.cg-modal.cg-modal-sm { max-width: 420px; }

/* ===== Home: Play / Learn switch ===== */
.cg-seg {
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--cg-surface-2);
}
.cg-seg-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--cg-text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--cg-anim-fast), color var(--cg-anim-fast);
}
.cg-seg-btn:hover { color: var(--cg-text); }
.cg-seg-btn[aria-pressed="true"] {
  background: var(--cg-surface);
  color: var(--cg-text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}
.cg-seg-btn:focus-visible { outline: 2px solid var(--cg-accent-2); outline-offset: 2px; }
.cg-home-mode-hint { font-size: 0.9rem; color: var(--cg-text-dim); margin-top: 0.5rem; }

/* ===== Learn mode ===== */
body.cg-learning #side-panel { width: 400px; }
/* The list keeps a usable height; if the card is tall the whole panel scrolls. */
.cg-learn-panel { display: flex; flex-direction: column; gap: 0.75rem; flex: 1 1 0; min-height: 0; overflow-y: auto; }
.cg-learn-panel > .cg-list-panel { flex: 1 0 11rem; }
.cg-learn-panel.hidden { display: none; }
.cg-learn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.cg-learn-head-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.cg-learn-title { font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.cg-learn-progress-text { font-size: 0.78rem; color: var(--cg-text-dim); margin-top: 0.35rem; }

.cg-learn-card {
  --tile-accent: var(--cg-accent);
  padding: 1rem 1.1rem;
  border-radius: 1rem;
  background: var(--cg-surface);
  border: 1px solid color-mix(in srgb, var(--tile-accent) 30%, var(--cg-surface-2));
  border-top: 4px solid var(--tile-accent);
  box-shadow: 0 6px 20px -12px rgb(0 0 0 / 0.35);
  flex-shrink: 0;
  animation: cg-card-in 0.25s ease-out;
}
@keyframes cg-card-in { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cg-lc-top { display: flex; align-items: center; gap: 0.75rem; }
/* The Learn card's flag is a button that opens the enlarged view */
.cg-lc-flag {
  position: relative;
  flex-shrink: 0;
  font-size: 3rem;
  line-height: 1;
  padding: 0.15rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  cursor: zoom-in;
  transition: transform var(--cg-anim-fast), background var(--cg-anim-fast);
}
.cg-lc-flag:hover { transform: scale(1.08); background: var(--cg-surface-2); }
.cg-lc-flag:focus-visible { outline: 3px solid var(--cg-accent-2); outline-offset: 2px; }
/* "Learn about the flag of X" link on country cards (opens the flag view) */
.cg-flag-link {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cg-accent-2);
  text-align: start;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cg-flag-link:hover { text-decoration-thickness: 2px; }
.cg-flag-link:focus-visible { outline: 3px solid var(--cg-accent-2); outline-offset: 2px; border-radius: 0.2rem; }
/* The flag on a country card is a button too */
.cg-card-flag.cg-flag-btn {
  align-self: flex-start;
  padding: 0.15rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  cursor: zoom-in;
  transition: transform var(--cg-anim-fast), background var(--cg-anim-fast);
}
.cg-card-flag.cg-flag-btn:hover { transform: scale(1.08); background: var(--cg-surface-2); }
.cg-card-flag.cg-flag-btn:focus-visible { outline: 3px solid var(--cg-accent-2); outline-offset: 2px; }

/* ===== Enlarged flag view ===== */
.cg-flagview-bg { background: rgb(0 0 0 / 0.78); }
.cg-modal.cg-modal-flag {
  position: relative;
  max-width: min(92vw, 640px);
  padding: 2.25rem 1.5rem 1.25rem;
  text-align: center;
  animation: cg-flag-zoom 0.18s ease-out;
}
@keyframes cg-flag-zoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.cg-flagview-close {
  position: absolute;
  top: 0.6rem;
  inset-inline-end: 0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 999px;
  font-size: 1.15rem;
  color: var(--cg-text);
  background: var(--cg-surface-2);
  cursor: pointer;
}
.cg-flagview-close:hover { background: var(--cg-accent); color: #fff; }
.cg-flagview-close:focus-visible { outline: 3px solid var(--cg-accent-2); outline-offset: 2px; }
/* Always the bundled vector flag font here: system emoji flags are small
   bitmaps on some platforms and blur when scaled up. */
.cg-flagview-flag {
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(6rem, 28vw, 12rem);
  line-height: 1.1;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.25));
}
.cg-flagview-name { font-size: 1.6rem; font-weight: 800; margin-top: 0.5rem; }
.cg-flagview-sub { color: var(--cg-text-dim); }
.cg-flagview-hint { margin-top: 0.75rem; font-size: 0.78rem; color: var(--cg-text-dim); }
.cg-flagview-section {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  text-align: start;
  border-radius: 0.75rem;
  background: var(--cg-surface-2);
}
.cg-flagview-section h3 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cg-text-dim);
  margin-bottom: 0.3rem;
}
.cg-flagview-section p { font-size: 0.95rem; line-height: 1.5; }
.cg-flagview-similar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cg-flagview-alt {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  min-width: 6.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: var(--cg-surface);
  color: var(--cg-text);
  cursor: pointer;
}
.cg-flagview-alt:hover { border-color: var(--cg-accent); }
.cg-flagview-alt:focus-visible { outline: 2px solid var(--cg-accent-2); }
/* lookalikes use the same vector flag font so they compare like-for-like */
.cg-flagview-alt-flag {
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 2.6rem;
  line-height: 1;
}
.cg-flagview-alt-name { font-size: 0.8rem; font-weight: 600; }
.cg-flagview-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.cg-lc-name { font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.cg-lc-sub { font-size: 0.8rem; color: var(--cg-text-dim); }
.cg-lc-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  background: #10b981;
}
.cg-lc-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.9rem;
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
}
.cg-lc-facts dt { color: var(--cg-text-dim); }
.cg-lc-facts dd { margin: 0; font-weight: 600; min-width: 0; }
.cg-lc-borders { display: flex; flex-wrap: wrap; gap: 0.3rem; font-weight: 400; }
.cg-lc-chip {
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 40%, var(--cg-surface-2));
  background: color-mix(in srgb, var(--tile-accent) 8%, var(--cg-surface));
  color: var(--cg-text);
  cursor: pointer;
}
.cg-lc-chip:hover { border-color: var(--tile-accent); }
.cg-lc-chip.is-outside { cursor: default; border-color: var(--cg-surface-2); background: transparent; color: var(--cg-text-dim); }
.cg-lc-fact,
.cg-lc-hook {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  background: color-mix(in srgb, var(--tile-accent) 8%, var(--cg-surface));
}
.cg-lc-hook { background: var(--cg-surface-2); }
.cg-lc-about { margin-top: 0.75rem; font-size: 0.85rem; }
.cg-lc-about summary { cursor: pointer; font-weight: 600; color: var(--cg-text-dim); }
.cg-lc-about p { margin-top: 0.35rem; line-height: 1.45; }
.cg-lc-nav { display: flex; gap: 0.5rem; margin-top: 1rem; }

.cg-learn-item {
  display: flex; align-items: center; gap: 0.5rem;
  width: calc(100% + 0.7rem);
  margin: 0 -0.35rem;
  padding: 0.22rem 0.35rem;
  border-radius: 0.375rem;
  font-size: 0.92rem;
  text-align: left;
  color: var(--cg-text);
  background: transparent;
  border: none;
  cursor: pointer;
}
.cg-learn-item:hover { background: var(--cg-surface); }
.cg-learn-item.is-current { background: #f59e0b; color: #1f1300; font-weight: 700; }
.cg-learn-item:focus-visible { outline: 2px solid var(--cg-accent-2); }
.cg-learn-check { color: #10b981; font-weight: 800; }
.cg-learn-item.is-current .cg-learn-check { color: #1f1300; }

.cg-sw-focus { background: #f59e0b; border-color: #b45309; }
.cg-pointer .leaflet-interactive { cursor: pointer !important; }
.cg-focus-ring { animation: cg-ring 1.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes cg-ring { 0% { stroke-opacity: 1; } 100% { stroke-opacity: 0.25; } }

@media (max-width: 767px) {
  body.cg-learning #side-panel { width: 100%; }
  .cg-learn-panel { flex: none; }
}

/* ===== Premium ===== */
.cg-premium-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: middle;
  color: #7c2d12;
  background: #fde68a;
}
.cg-upgrade { text-align: center; }
.cg-upgrade-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c2d12;
  background: #fde68a;
}
.cg-upgrade-list { text-align: left; display: grid; gap: 0.5rem; margin: 0 auto; max-width: 26rem; font-size: 0.92rem; }
.cg-upgrade-list li { position: relative; padding-left: 1.5rem; }
.cg-upgrade-list li::before { content: '✓'; position: absolute; left: 0; color: var(--cg-accent); font-weight: 800; }
.cg-upgrade-prices { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; font-weight: 700; }
.cg-upgrade-prices span { padding: 0.35rem 0.8rem; border-radius: 0.6rem; background: var(--cg-surface-2); }

/* ===== Achievements ===== */
.cg-ach-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width: 640px) { .cg-ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cg-ach {
  --tile-accent: var(--cg-accent);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--cg-radius);
  background: var(--cg-surface-2);
  opacity: 0.6;
}
.cg-ach.is-earned {
  opacity: 1;
  background: color-mix(in srgb, var(--tile-accent) 12%, var(--cg-surface));
  border: 1px solid color-mix(in srgb, var(--tile-accent) 35%, transparent);
}
.cg-ach-icon { font-size: 1.6rem; width: 2rem; text-align: center; flex-shrink: 0; }
.cg-ach-title { font-weight: 700; font-size: 0.92rem; }
.cg-ach-desc { font-size: 0.78rem; color: var(--cg-text-dim); }

/* ===== Footer credit ===== */
.cg-credits { margin-top: 0.35rem; }
.cg-credits a { text-decoration: underline; }

/* ===== "More" menu ===== */
.cg-menu-section {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cg-text-dim);
  margin: 1rem 0 0.5rem;
  text-align: left;
}
.cg-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .cg-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cg-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--cg-surface-2);
  color: var(--cg-text);
  border: 1px solid transparent;
  border-radius: var(--cg-radius);
  text-align: left;
  cursor: pointer;
}
.cg-menu-item:hover { border-color: var(--cg-accent); }
.cg-menu-item:focus-visible { outline: 2px solid var(--cg-accent-2); outline-offset: 2px; }
.cg-menu-icon { font-size: 1.5rem; width: 2rem; text-align: center; flex-shrink: 0; }
.cg-menu-text { display: flex; flex-direction: column; min-width: 0; }
.cg-menu-label { font-weight: 600; }
.cg-menu-desc { font-size: 0.8rem; color: var(--cg-text-dim); }

/* ===== Hint chips ===== */
.cg-hint-chip {
  background: var(--cg-surface-2);
  color: var(--cg-text);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--cg-anim-fast);
}
.cg-hint-chip:hover { background: var(--cg-accent-2); color: #fff; }
.cg-hint-chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Mode chooser ===== */
.cg-mode-card {
  background: var(--cg-surface);
  border: 2px solid transparent;
  border-radius: var(--cg-radius);
  padding: 1rem;
  cursor: pointer;
  transition: border-color var(--cg-anim-fast), transform var(--cg-anim-fast);
}
.cg-mode-card:hover { border-color: var(--cg-accent); transform: translateY(-2px); }
.cg-mode-card[aria-pressed="true"] { border-color: var(--cg-accent); }

/* ===== Settings panel ===== */
.cg-setting-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cg-surface-2);
}
.cg-setting-row:last-child { border-bottom: none; }

/* ===== Visually-hidden helper for SR-only labels ===== */
.cg-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Live region (screen-reader announcements) ===== */
#cg-live {
  position: absolute;
  left: -10000px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ===== Shape-only mode silhouette ===== */
.cg-silhouette {
  background: #000;
  border-radius: var(--cg-radius);
  padding: 1rem;
  text-align: center;
}
.cg-silhouette svg path { fill: #fff; stroke: #fff; }

/* ===== Flag display (flags mode) ===== */
.cg-flag-big {
  font-size: 7rem;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.4));
}

/* ===== Share grid ===== */
.cg-share-block {
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  white-space: pre;
  background: var(--cg-surface-2);
  padding: 1rem;
  border-radius: var(--cg-radius);
  font-size: 1.1rem;
  line-height: 1.1;
}

/* ===== Map color legend ===== */
.cg-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem 0;
  font-size: 0.75rem;
  color: var(--cg-text-dim);
}
.cg-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.cg-legend-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.cg-sw-default,
.cg-sw-in      { background: #fffdf7; border-color: #7b8a9c; }   /* matches STYLES.inPlay */
.cg-sw-out     { background: #c7d0da; border-color: #aab4c0; }   /* matches STYLES.outOfPlay */
.cg-sw-guessed { background: #10b981; }
.cg-sw-missed  { background: #f26d6d; }
.cg-colorblind .cg-sw-guessed { background: #2563eb; }
.cg-colorblind .cg-sw-missed  { background: #f97316; }

/* ===== Country count digits (flicker on update) ===== */
.cg-num-flash {
  animation: cg-flash 0.4s ease-out;
}
@keyframes cg-flash {
  0%   { color: var(--cg-warn); transform: scale(1.1); }
  100% { color: inherit; transform: scale(1); }
}

/* ===== Scrollbar (subtle) ===== */
.cg-scroll::-webkit-scrollbar { width: 8px; }
.cg-scroll::-webkit-scrollbar-thumb { background: var(--cg-surface-2); border-radius: 4px; }
.cg-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== Locate mode ===== */
.cg-crosshair { cursor: crosshair !important; }
.cg-crosshair .leaflet-interactive { cursor: crosshair !important; }
.cg-locate-target {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0.25rem 0;
}
.cg-locate-tries {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--cg-warn);
}

/* ===== Floating +points ===== */
.cg-float-points {
  position: fixed;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--cg-accent);
  pointer-events: none;
  z-index: 9999;
  animation: cg-float-up 1s ease-out forwards;
}
@keyframes cg-float-up {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(1); }
}

/* ===== Challenge result box ===== */
.cg-ch-result {
  background: var(--cg-surface-2);
  border: 1px solid var(--cg-warn);
  border-radius: var(--cg-radius);
  padding: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* ===== Journey ===== */
.cg-journey-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--cg-surface-2);
}
.cg-journey-row:last-child { border-bottom: none; }
.cg-journey-locked { opacity: 0.45; }

/* Print: clean layout */
@media print {
  .cg-no-print { display: none !important; }
  body { background: #fff; color: #000; }
}