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

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #21262d;
  --border: #30363d;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --accent: #58a6ff;
  --accent-glow: #58a6ff44;
  --green: #3fb950;
  --orange: #d29922;
  --red: #f85149;
  --purple: #bc8cff;
}

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  /* 100vh first as a fallback: browsers without dvh support keep the old value,
     browsers with it override on the next line. Mobile chrome overlays 100vh,
     which would hide the bottom control bar. */
  height: 100vh;
  height: 100dvh;
  /* Prevent pull-to-refresh and bounce on mobile */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ========== SCREENS ========== */
.screen {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

/* Shared animated background layer (globe) behind menu-like screens */
#app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#app-bg.hidden { display: none; }
.screen.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

#screen-menu {
  justify-content: flex-start;
  padding: 40px 20px;
}

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

/* ========== MENU ========== */
.menu-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-height: none;
}

.menu-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, #58a6ff11 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, #bc8cff11 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, #3fb95011 0%, transparent 60%);
  pointer-events: none;
}

.menu-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: menuSlide 0.6s ease-out;
  width: 100%;
  max-width: 560px;
}

@keyframes menuSlide {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.title-glow {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--accent), var(--purple), var(--green));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}
.title-glow span {
  font-size: 1.6rem;
  font-weight: 500;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.subtitle {
  color: var(--text-dim);
  max-width: 420px;
  text-align: center;
  line-height: 1.5;
  font-size: 0.95rem;
}

.menu-modes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
}

.menu-section-label {
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
  margin-bottom: 0;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

/* ========== BUTTONS ========== */
.btn {
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.btn-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.btn-mode:hover {
  background: var(--surface2);
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
}
.btn-mode .mode-icon {
  font-size: 1.5rem;
}
.btn-mode .mode-label {
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-mode .mode-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.btn-continent-mode {
  width: 100%;
  flex-direction: row;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 1px solid var(--accent)44;
}
.btn-continent-mode .mode-icon { font-size: 2rem; }
.btn-continent-mode .mode-label { font-size: 1.1rem; }

.menu-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.menu-row .btn-continent-mode {
  flex: 1;
}

.btn-hero-mode {
  width: 100%;
  flex-direction: row;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #1a2d44, #162030);
  border: 1px solid var(--orange);
  color: var(--text);
}
.btn-hero-mode:hover {
  background: linear-gradient(135deg, #1e3a5f, #1a2d44);
  box-shadow: 0 0 20px #d2992244;
}
.btn-hero-mode .mode-icon { font-size: 2rem; }
.btn-hero-mode .mode-label { display: block; font-size: 1.1rem; font-weight: 600; }
.btn-hero-mode .mode-desc { font-size: 0.75rem; color: var(--text-dim); }

.btn-tool {
  padding: 8px 18px;
  font-size: 0.85rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
}
.btn-tool:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.btn-accent {
  padding: 10px 28px;
  font-size: 0.95rem;
  background: linear-gradient(135deg, var(--accent), #4090e0);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-accent:hover {
  box-shadow: 0 4px 24px var(--accent-glow);
}

.btn-skip {
  color: var(--orange);
  border-color: var(--orange)44;
}
.btn-skip:hover {
  border-color: var(--orange);
}

/* ========== PROMPT ========== */
#screen-prompt {
  background: var(--bg);
}

.prompt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: promptPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes promptPop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.prompt-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--surface2);
  box-shadow: 0 0 30px currentColor;
  animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 20px currentColor; transform: scale(1); }
  50% { box-shadow: 0 0 40px currentColor; transform: scale(1.05); }
}

.prompt-name {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -1px;
}
.prompt-number {
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* ========== CANVAS SCREENS ========== */
#screen-drawing,
#screen-placing,
#screen-results {
  gap: 10px;
  padding: 12px;
}

.canvas-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  padding: 0 4px;
}
.canvas-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  flex: 1;
}

.canvas-toolbar {
  display: flex;
  gap: 6px;
}

canvas {
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  max-width: 100%;
  max-height: calc(100vh - 70px);
  touch-action: none;
}

.compare-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  margin-right: 8px;
}

/* ========== RESULTS ========== */
.results-layout {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 12px;
  align-items: stretch;
}

.results-map-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.results-map-area canvas {
  max-width: 100%;
  max-height: 100%;
}

.score-panel {
  width: 360px;
  min-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.score-panel h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

.score-summary {
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.big-score {
  font-size: 2.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: scoreReveal 0.8s ease-out;
}

@keyframes scoreReveal {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.score-grade {
  color: var(--text-dim);
  font-size: 1rem;
  margin-top: 4px;
}
.score-counted {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-top: 2px;
}

.score-table-wrap {
  flex: 1;
  overflow-y: auto;
  margin: 0 -8px;
  padding: 0 8px;
}

.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.score-table th,
.score-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.score-table th {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  background: var(--surface);
}
.score-table td:first-child {
  text-align: left;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.score-table tr.skipped td {
  color: var(--text-dim);
  opacity: 0.5;
}
.score-table tr.freebie td {
  color: var(--text-dim);
  opacity: 0.6;
}
.score-table tbody tr {
  opacity: 0;
  transform: translateX(10px);
  animation: scoreRowIn 0.3s ease-out forwards;
}
@keyframes scoreRowIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Score coloring */
.score-table td.score-good { color: var(--green); }
.score-table td.score-ok { color: var(--orange); }
.score-table td.score-bad { color: var(--red); }

.legend-note {
  font-size: 0.75rem;
  color: var(--text-dim);
}

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

/* ========== DEV CONTROLS ========== */
#dev-controls {
  position: fixed;
  bottom: 8px;
  left: 8px;
  z-index: 999;
  display: flex;
  gap: 6px;
  align-items: center;
}

.dev-btn {
  padding: 3px 10px;
  font-size: 10px;
  font-family: 'Space Grotesk', monospace;
  font-weight: 600;
  letter-spacing: 1px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
}
.dev-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.dev-badge {
  display: none;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  background: var(--orange);
  color: var(--bg);
  border-radius: 4px;
  letter-spacing: 0.5px;
  animation: badgePop 0.3s ease-out;
}

@keyframes badgePop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ========== SCROLLBAR ========== */
.score-table-wrap::-webkit-scrollbar {
  width: 4px;
}
.score-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.score-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.score-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* ========== MENU TOGGLES ========== */
.menu-toggles {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-toggle {
  padding: 6px 14px;
  font-size: 0.82rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}
.btn-toggle.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.toggle-icon {
  font-size: 0.9rem;
}

.mode-badge {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  background: var(--green);
  color: var(--bg);
  border-radius: 4px;
  letter-spacing: 0.5px;
  animation: badgePop 0.3s ease-out;
}

/* ========== HIGH SCORE BADGE ========== */
.hs-badge {
  font-size: 0.65rem;
  color: var(--green);
  font-weight: 500;
}

/* ========== TWEAK CONTROLS ========== */
.tweak-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tweak-label {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  min-width: 120px;
  text-align: center;
}

/* ========== RESULTS EXTRAS ========== */
.results-mode-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 400;
  text-transform: capitalize;
}

.high-score-note {
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 600;
  margin-top: 4px;
  animation: badgePop 0.5s ease-out;
}

/* ========== PEEK SCREEN (Explorer mode) ========== */
#screen-peek {
  gap: 10px;
  padding: 12px;
}

.peek-timer {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--orange);
  min-width: 40px;
  text-align: center;
  animation: timerPulse 1s ease-in-out infinite;
}

/* ========== SPECIAL MODE BUTTONS ========== */
.btn-special-mode {
  background: linear-gradient(135deg, var(--surface), #1a2233);
  border: 1px solid var(--purple);
  border-color: #bc8cff55;
}
.btn-special-mode:hover {
  background: linear-gradient(135deg, #1a2233, var(--surface2));
  border-color: var(--purple);
  box-shadow: 0 0 20px #bc8cff22;
}

.menu-grid-special {
  grid-template-columns: repeat(4, 1fr);
}

.results-extra {
  font-size: 0.85rem;
  color: var(--orange);
  font-weight: 500;
  margin-top: 2px;
}

/* ========== GAME TIMER ========== */
.game-timer {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 16px;
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: color 0.3s ease;
}
.game-timer.urgent {
  color: var(--red);
  border-color: var(--red);
  animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ========== STREAK COUNTER ========== */
.streak-counter {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--orange);
  border-radius: 10px;
  padding: 6px 16px;
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.streak-fire {
  font-size: 1.2rem;
}

/* ========== BLIND MODE LABEL ========== */
.blind-label {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.85rem;
}

/* ========== SCORE FLASH ========== */
.score-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 3rem;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
  z-index: 50;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  transition: none;
}
.score-flash.show {
  animation: scoreFlashAnim 1.2s ease-out forwards;
}

@keyframes scoreFlashAnim {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* ========== TOAST ========== */
.toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface2);
  color: var(--text);
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1000;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========== KEYBOARD SHORTCUTS HINT ========== */
.shortcuts-hint {
  color: var(--text-dim);
  font-size: 0.7rem;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.3px;
}
.shortcuts-hint span {
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-family: monospace;
  font-size: 0.65rem;
}

/* ========== FLAG QUIZ GAME ========== */
.btn-flag-mode {
  background: linear-gradient(135deg, #1a2233, #1a3322);
  border: 1px solid #3fb95055;
}
.btn-flag-mode:hover {
  background: linear-gradient(135deg, #1a3322, var(--surface2));
  border-color: var(--green);
  box-shadow: 0 0 20px #3fb95022;
}

#screen-flag-quiz,
#screen-flag-picker {
  padding: 16px 12px;
  overflow-y: auto;
  justify-content: flex-start;
}

/* Flag Color Picker: flag beside the picker (shorter than stacked) */
.flag-question-area.flag-picker-area {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
}
.flag-picker-area .flag-main-wrap { flex: 0 1 auto; }
.flag-picker-area .flag-main-canvas { max-height: 220px; }

/* Shown vs. live "with your color" preview, side by side */
.flag-picker-compare {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.flag-cmp-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.flag-cmp-cap {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.flag-picker-area .flag-cmp-canvas { max-height: 160px; max-width: 260px; }

/* Flag Color Picker — HSV picker */
.picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.picker-row { display: flex; gap: 10px; }
.picker-sv, .picker-hue {
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: crosshair;
  touch-action: none;
}
.picker-swatch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
}
.picker-swatch {
  width: 64px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--border);
}
.picker-submit { padding: 10px 22px; }
.picker-reveal { min-height: 28px; }
.picker-reveal-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.picker-cmp { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-dim); }
.picker-cmp-sw {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.picker-points { font-weight: 700; color: var(--green); }
.hub-wide { grid-column: 1 / -1; }

.flag-game-container {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flag-game-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
}
.flag-game-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  flex: 1;
}
.flag-game-progress {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.flag-game-score {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.flag-question-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.flag-main-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.flag-question-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
}

.flag-main-display {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.flag-main-canvas {
  display: block;
  max-width: 400px;
  max-height: 260px;
  width: auto;
  height: auto;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.flag-main-name {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}

.flag-missing-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
}

/* Timer bar */
.flag-timer-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}
.flag-timer-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--green);
  transition: width 0.05s linear, background 0.3s ease;
  width: 100%;
}
.flag-timer-label {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
  color: var(--text);
  transition: color 0.2s ease;
}

.flag-color-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid var(--border);
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.flag-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 750px;
}

.flag-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  color: var(--text);
}
.flag-option-card:hover:not(.disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-3px);
}
.flag-option-card.disabled {
  cursor: default;
  opacity: 0.85;
}
.flag-option-card.correct {
  border-color: var(--green);
  box-shadow: 0 0 20px #3fb95044;
  opacity: 1;
  animation: correctPop 0.4s ease-out;
}
.flag-option-card.wrong {
  border-color: var(--red);
  box-shadow: 0 0 20px #f8514944;
  opacity: 0.6;
}

@keyframes correctPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.flag-option-img {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.flag-option-name {
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
}

.flag-name-toggle {
  font-size: 0.78rem;
}

/* Flag results */
.flag-results-panel {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.3s ease-out;
}

.flag-results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.flag-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(10px);
  animation: scoreRowIn 0.3s ease-out forwards;
}
.flag-result-row.correct {
  background: #3fb95012;
}
.flag-result-row.wrong {
  background: #f8514912;
}
.flag-result-icon {
  font-weight: 700;
  font-size: 1rem;
  width: 20px;
  text-align: center;
}
.flag-result-row.correct .flag-result-icon { color: var(--green); }
.flag-result-row.wrong .flag-result-icon { color: var(--red); }

.flag-result-name {
  flex: 1;
  font-weight: 500;
}

.flag-result-points {
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.flag-result-row.correct .flag-result-points { color: var(--green); }
.flag-result-row.wrong .flag-result-points { color: var(--text-dim); }

.flag-color-swatch-small {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
  #screen-menu {
    padding: 20px 12px;
  }

  .menu-content {
    gap: 14px;
    max-width: 100%;
  }

  .title-glow {
    font-size: 1.8rem;
  }
  .title-glow span {
    font-size: 1.2rem;
  }

  .subtitle {
    font-size: 0.85rem;
    max-width: 90%;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .btn-mode {
    padding: 10px 8px;
  }
  .btn-mode .mode-label {
    font-size: 0.85rem;
  }

  .btn-hero-mode,
  .btn-continent-mode {
    padding: 10px 14px;
  }

  .menu-row {
    flex-direction: column;
  }
  .menu-grid-special {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Canvas screens */
  #screen-drawing,
  #screen-placing,
  #screen-results {
    padding: 6px;
    gap: 4px;
  }

  .canvas-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .canvas-header h2 {
    font-size: 0.95rem;
    width: 100%;
  }

  .canvas-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  .btn-tool {
    padding: 6px 12px;
    font-size: 0.78rem;
  }

  .btn-accent {
    padding: 8px 18px;
    font-size: 0.85rem;
  }

  canvas {
    border-radius: 8px;
    max-height: calc(100vh - 90px);
  }

  /* Results: stack vertically on mobile */
  .results-layout {
    flex-direction: column;
    padding: 8px;
    gap: 8px;
    overflow-y: auto;
  }

  .results-map-area {
    max-height: 40vh;
    min-height: 200px;
  }

  .score-panel {
    width: 100%;
    min-width: 0;
    padding: 12px;
    gap: 10px;
  }

  /* Stacked, the table is what you read first; the rail follows it. */
  .results-map-area { order: 1; }
  .score-panel { order: 2; }
  .results-match-rail {
    order: 3;
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  .big-score {
    font-size: 2rem;
  }

  .score-table {
    font-size: 0.75rem;
  }

  .prompt-name {
    font-size: 2rem;
  }

  .shortcuts-hint {
    display: none;
  }

  /* Flag quiz mobile */
  .flag-game-header h2 {
    font-size: 0.95rem;
    width: 100%;
  }
  .flag-main-canvas {
    max-width: 280px;
    max-height: 180px;
  }
  .flag-options {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .flag-option-card {
    padding: 8px;
  }
  .flag-option-name {
    font-size: 0.75rem;
  }
  .flag-question-label {
    font-size: 0.95rem;
  }

  .tweak-controls {
    flex-wrap: wrap;
    gap: 4px;
  }

  .tweak-label {
    min-width: 80px;
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .menu-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .btn-mode .mode-icon {
    font-size: 1.2rem;
  }
  .btn-mode .mode-desc {
    font-size: 0.65rem;
  }

  .canvas-header h2 {
    font-size: 0.85rem;
  }

  .results-map-area {
    max-height: 35vh;
  }

  .score-panel {
    padding: 10px;
  }

  .big-score {
    font-size: 1.6rem;
  }

  .menu-toggles {
    gap: 6px;
  }
  .btn-toggle {
    padding: 5px 10px;
    font-size: 0.75rem;
  }
}

/* ========== RANK LINE MODE ========== */
.btn-rank-mode {
  background: linear-gradient(135deg, #2a2233, #1a2a33);
  border: 1px solid #bc8cff55;
}
.btn-rank-mode:hover {
  background: linear-gradient(135deg, #1a2a33, var(--surface2));
  border-color: var(--purple);
  box-shadow: 0 0 20px #bc8cff22;
}

.rank-line-container {
  width: 100%;
  max-width: 720px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.rank-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.rank-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
}
.rank-blurb {
  font-size: 0.8rem;
  color: var(--text-dim);
  flex: 1;
  min-width: 120px;
}
.rank-run {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rank-lives {
  font-size: 1.1rem;
  letter-spacing: 2px;
}
.rank-lives .heart { color: var(--red); }
.rank-lives .heart.lost { color: var(--border); }

.rank-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* Card tray */
.rank-tray {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.rank-hint {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.rank-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--surface2), var(--surface));
  border: 2px solid var(--purple);
  border-radius: 12px;
  cursor: grab;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 16px #bc8cff22;
  touch-action: none;
  user-select: none;
}
.rank-card:active { cursor: grabbing; }
.rank-card.dragging { opacity: 0.35; }
.rank-card.placeholder {
  border-color: var(--border);
  border-style: dashed;
  box-shadow: none;
  cursor: default;
  opacity: 0.5;
}
.rank-card-name {
  font-size: 1.1rem;
  font-weight: 600;
}

.rank-drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(-2deg) scale(1.04);
}

/* The line */
.rank-line-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* The list is a flex column, so its children default to flex-shrink: 1 and get
   squashed once content overflows — gaps collapsed from 10px to 0-4px on a long
   line, making the drop targets nearly unhittable. Everything inside a scroll
   container should keep its natural height. */
.rank-line-list > * { flex-shrink: 0; }

.rank-axis-label {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 0;
}
.rank-gap {
  height: 10px;
  border-radius: 6px;
  margin: 1px 0;
  transition: height 0.12s ease, background 0.12s ease;
  cursor: pointer;
}
.rank-gap.active {
  height: 36px;
  background: repeating-linear-gradient(
    45deg, #bc8cff33, #bc8cff33 8px, #bc8cff55 8px, #bc8cff55 16px);
  border: 1px dashed var(--purple);
}
.rank-gap.cursor {
  height: 32px;
  background: var(--accent-glow);
  border: 2px solid var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid transparent;
}
.rank-row.just-placed { border-color: var(--accent); }
.rank-row.place-correct {
  border-color: var(--green);
  animation: rankPulse 0.5s ease-out;
  box-shadow: 0 0 14px #3fb95044;
}
.rank-row.place-wrong {
  border-color: var(--red);
  animation: rankShake 0.4s ease-out;
  box-shadow: 0 0 14px #f8514944;
}
@keyframes rankPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes rankShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.rank-flag {
  width: 30px;
  height: auto;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.rank-row-name {
  flex: 1;
  font-size: 0.95rem;
}
.rank-row-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--green);
}

/* Results */
.rank-results-panel {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 100%;
}
.rank-results-panel h2 {
  text-align: center;
  font-size: 1.4rem;
}
.rank-results-subhead {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
}
.rank-results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rank-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 6px;
  animation: fadeIn 0.3s ease-out both;
}
.rank-result-rank {
  width: 26px;
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.rank-result-name { flex: 1; font-size: 0.9rem; }
.rank-result-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--green);
}

@media (max-width: 768px) {
  .rank-card-name { font-size: 1rem; }
  .rank-row-name { font-size: 0.88rem; }
  .rank-flag { width: 26px; }
}

/* Touch layout: card and controls live at the bottom, in the thumb zone. */
@media (pointer: coarse) {
  .rank-tray {
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .rank-card {
    cursor: default;
    width: 100%;
    max-width: 420px;
  }
  .rank-touch-controls {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 420px;
  }
  .rank-nudge {
    flex: 0 0 64px;
    min-height: 48px;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    /* btn-tool dims its text; these are primary controls, so keep full contrast. */
    color: var(--text);
  }

  /* The dev toggle is fixed at bottom-left with z-index 999, which lands it on
     top of the up-nudge and steals its taps. A phone has no use for it. */
  #dev-controls { display: none; }
  .rank-place {
    flex: 1;
    min-height: 48px;
    font-size: 1.05rem;
    font-weight: 600;
  }

  /* Spacers get their height in JS and flex-shrink: 0 from .rank-line-list > *. */

  /* Spacers leave blank space at the ends, so pin the axis labels rather than
     letting them drift out of view inside it. */
  .rank-axis-label.top,
  .rank-axis-label.bottom {
    position: sticky;
    z-index: 2;
    background: var(--surface);
  }
  .rank-axis-label.top { top: 0; }
  .rank-axis-label.bottom { bottom: 0; }

  /* 10px is a quarter of the minimum touch target. */
  .rank-gap { height: 28px; }
  .rank-gap.cursor {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rank-gap.cursor::after {
    content: 'place here';
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* Scoped to .rank-results-panel: .results-actions is shared with other
     modes' results screens, which are not long enough to need this. */
  .rank-results-panel .results-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
  }
}

/* ========== MAIN MENU: ACTIVITY HUB ========== */
.menu-hub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 620px;
  margin: 8px auto 0;
}
.hub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 22px 20px;
  text-align: left;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--surface2), var(--surface));
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.hub-icon { font-size: 2.4rem; line-height: 1; }
.hub-label { font-size: 1.25rem; font-weight: 600; }
.hub-desc { font-size: 0.82rem; color: var(--text-dim); }

/* Unified accent: all activity cards share one identity; icons differentiate. */

/* Draw sub-menu */
.draw-menu-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 4px;
}
.draw-menu-title { font-size: 1.4rem; font-weight: 600; }

#screen-draw-menu {
  justify-content: flex-start;
  padding: 20px 12px 48px;
}
.draw-menu-content { animation: none; }

@media (max-width: 600px) {
  .menu-hub { grid-template-columns: 1fr; gap: 10px; }
  .hub-card { padding: 16px; flex-direction: row; align-items: center; gap: 12px; }
  .hub-icon { font-size: 1.8rem; }
  .hub-card > .hub-label { font-size: 1.1rem; }
  .hub-desc { display: none; }
}

/* ========== RANK LINE: DATASET PICKER ========== */
.rank-picker {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  /* Inside a height:100% overflow:hidden screen, a list longer than the window is cut
     off with no way to reach the end — the thirteenth dataset sat 187px below the fold
     at every size (owner, 2026-10-18). min-height:0 lets the list below actually
     shrink, which is what makes its own overflow take effect. */
  flex: 1;
  min-height: 0;
}
.rank-picker-head { display: flex; align-items: center; }
.rank-picker h2 { text-align: center; font-size: 1.4rem; }
.rank-picker-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.rank-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  /* Clear of the scrollbar, so a long name is not underlined by it. */
  padding-right: 2px;
}
.rank-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 16px;
  text-align: left;
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.rank-picker-item:hover {
  background: var(--surface2);
  border-color: var(--purple);
}
.rank-picker-name { font-size: 1.05rem; font-weight: 600; }
.rank-picker-blurb { font-size: 0.78rem; color: var(--text-dim); }
.rank-picker-item .hs-badge {
  position: absolute;
  top: 10px;
  right: 14px;
}

/* ========== TOP 10 / BOTTOM 10 (TODOS #36) ========== */
.top-n-container {
  width: 100%;
  max-width: 720px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* --- picker: a form that fits one phone screen, not a scroll --- */
.topn-picker {
  width: 100%;
  max-width: 460px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
}
.topn-picker-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topn-picker-head h2 {
  font-size: 1.25rem;
  flex: 1;
  text-align: center;
  /* Offsets the Back button so the title sits optically centred */
  margin-right: 64px;
}

.topn-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.topn-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topn-form-label {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  width: 58px;
  flex-shrink: 0;
}
.topn-form-pair { gap: 6px; }
.topn-form-pair .topn-select { flex: 1; }

/* The roll lock beside each field. Square and narrow — it must not eat the width
   the selects need at 390px. */
.topn-lock {
  width: 36px;
  min-height: 40px;
  padding: 0;
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.topn-lock.is-locked {
  background: var(--surface2);
  border-color: var(--accent);
}
.topn-lock:disabled { opacity: 0.35; cursor: default; }
.topn-roll-hint {
  text-align: center;
  /* Reserved: the three roll messages are one, two and three lines at phone width,
     and this sits directly above the toggles it used to shove around (TODOS #44). */
  min-height: 3.1em;
}
.topn-option-group {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.topn-select {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.topn-select:disabled { opacity: 0.4; }
.topn-select option:disabled { color: var(--text-dim); }

.topn-summary {
  text-align: center;
  padding: 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.topn-summary-main { font-size: 1rem; font-weight: 600; }
.topn-summary-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }

.topn-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.topn-actions .btn { min-height: 44px; }

.topn-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- round --- */
.topn-round {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
}
.topn-round-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.topn-round-head h2 {
  font-size: 1.05rem;
  flex: 1;
}
.topn-scope-chip {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.topn-found {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.95rem;
}
.topn-lives { font-size: 1.05rem; letter-spacing: 2px; }
/* Compact: the round head already wraps at 390px, and this must not push the
   lives onto a second line. */
.topn-flagsize {
  padding: 4px 8px;
  min-height: 30px;
  font-size: 0.74rem;
  white-space: nowrap;
}
.topn-lives .heart { color: var(--red); }
.topn-lives .heart.lost { color: var(--border); }

/* The per-pick commentary. Fixed height so the grid below never jumps as the
   message changes from one line to another. */
.topn-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--surface2);
  border-left: 3px solid var(--border);
  flex-shrink: 0;
}
.topn-feedback.is-idle, .topn-feedback.is-note { color: var(--text-dim); }
.topn-feedback.is-note { border-left-color: var(--orange); }
.topn-feedback.is-hit { border-left-color: var(--green); }
.topn-feedback.is-miss { border-left-color: var(--red); }
.topn-feedback-mark { font-weight: 700; }
.is-hit .topn-feedback-mark { color: var(--green); }
.is-miss .topn-feedback-mark { color: var(--red); }
.topn-feedback-name { flex: 1; font-weight: 600; }
.topn-feedback-rank {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.topn-feedback-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--green);
}

.topn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 4px;
  /* Without this the grid is a flex child taller than its rows, and the default
     stretch inflates every card to fill the space — which is exactly the wasted
     room this layout exists to remove. */
  align-content: start;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-bottom: 4px;
}
/* Flags-only fits more per row — the flag is the whole card. 58px columns fit a
   38px flag, which is a smudge for anything with an emblem (Mexico, Sri Lanka,
   most of the Caribbean), so the floor is 76px and 🔍 Bigger doubles it
   (owner, 2026-09-12). */
.topn-grid.is-flags {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
}
.topn-grid.is-flags.is-big {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}

.topn-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  /* 38px keeps a tappable row while packing three columns into 390px */
  min-height: 38px;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.topn-card:hover:not(:disabled) { border-color: var(--purple); }
.topn-card:disabled { cursor: default; }
.topn-card.is-hit {
  background: #16301f;
  border-color: var(--green);
  opacity: 0.9;
}
.topn-card.is-miss {
  background: #301a1a;
  border-color: var(--red);
  opacity: 0.6;
}
.topn-card-name {
  flex: 1;
  font-size: 0.78rem;
  /* Long names must not push the rank badge out of the card */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topn-card-rank {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  flex-shrink: 0;
}
/* A fixed frame, not `height: auto`: Nepal's pennant and Switzerland's square are
   not 3:2, and a taller flag would make its ladder row taller than the rest. */
.topn-flag {
  width: 24px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}
.is-flags .topn-card {
  justify-content: center;
  padding: 6px 4px;
  min-height: 56px;
}
.is-flags .topn-flag { width: 62px; height: 42px; }
.is-flags.is-big .topn-card { min-height: 88px; }
.is-flags.is-big .topn-flag { width: 108px; height: 72px; }
.is-flags.is-big .topn-card-name { font-size: 0.72rem; }
.is-flags .topn-card-name {
  display: none;
}
.is-flags .topn-card.is-hit .topn-card-name,
.is-flags .topn-card.is-miss .topn-card-name {
  display: block;
  font-size: 0.62rem;
  text-align: center;
}
.is-flags .topn-card.is-hit,
.is-flags .topn-card.is-miss {
  flex-direction: column;
  gap: 2px;
}
.is-flags .topn-card-rank { font-size: 0.62rem; }

/* --- typing style --- */
.topn-type {
  position: relative;
  flex-shrink: 0;
}
.topn-type-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.topn-type-input:focus {
  outline: none;
  border-color: var(--accent);
}
.topn-suggest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 232px;
  overflow-y: auto;
}
.topn-suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  min-height: 38px;
  text-align: left;
  font-size: 0.85rem;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.topn-suggest-item:hover { border-color: var(--accent); }
/* The shortening that found this country, named so typing "uk" teaches as well as
   scores (TODOS #40). */
.topn-suggest-alias {
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* The running board: slots 1..N plus the misses under them. Capped so the pool
   below it stays usable on a phone; it scrolls once a round fills up. */
.topn-ladder {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  min-height: 0;
  flex: 0 1 auto;
  max-height: 42%;
}
/* Typing has no pool under it, so the ladder takes the rest of the screen */
.topn-type ~ .topn-ladder { flex: 1 1 auto; max-height: none; }
/* On the results screen it is the whole point, not a summary strip */
.topn-ladder.is-final { max-height: none; flex: initial; }
/* The board is rebuilt on every pick, so re-running the row animation each time
   would make the whole list flicker. Only the results reveal animates. */
.topn-ladder:not(.is-final) .topn-result-row { animation: none; }

.topn-ladder-sub {
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 0 1px;
}

/* Every ladder row is the same box — empty slot, hit, miss — so filling a slot in
   never changes the list's height and the board stops jumping under you while you
   answer (owner, 2026-09-12). */
/* `display: flex` below would otherwise beat the user-agent rule for [hidden], and the
   results toggle flips exactly that attribute (TODOS #59). */
/* The misses sit outside the ladder's scroll box so they are visible in every input
   style, not just the one whose layout happens to leave the ladder room. */
.topn-misses {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.topn-misses:empty { display: none; }

.topn-row[hidden] { display: none; }
.topn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  min-height: 30px;
  box-sizing: border-box;
  /* Pinned, not inherited: the body's 1.3 makes the 1rem value text a 21px line
     box, which pushes a filled row one pixel past an empty one. */
  line-height: 1.2;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.topn-row.is-empty {
  background: var(--surface);
  border-left-color: var(--border);
  opacity: 0.65;
}
.topn-row.is-empty .topn-result-rank { color: var(--text-dim); }
.topn-blank {
  flex: 1;
  height: 1px;
  border-bottom: 1px dashed var(--border);
}

/* Countries the metric has no figure for. Reference, not part of the loop, so it
   is a collapsed row until asked for. */
.topn-unranked {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.topn-unranked > summary {
  padding: 7px 10px;
  min-height: 34px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.topn-unranked > summary::before {
  content: '▸';
  margin-right: 7px;
}
.topn-unranked[open] > summary::before { content: '▾'; }
.topn-unranked > summary::-webkit-details-marker { display: none; }
.topn-unranked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 10px;
  max-height: 132px;
  overflow-y: auto;
}
.topn-unranked-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 0.72rem;
}

/* --- results --- */
.topn-results {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.topn-results h2 { text-align: center; font-size: 1.4rem; }
.topn-outof {
  font-size: 0.45em;
  color: var(--text-dim);
}
.topn-results-subhead {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
}
.topn-results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.topn-result-row {
  background: var(--surface2);
  animation: fadeIn 0.3s ease-out both;
}
.topn-result-row.is-hit { border-left-color: var(--green); }
.topn-result-row.is-miss { border-left-color: var(--red); }
.topn-result-row.is-wrong { border-left-color: var(--orange); opacity: 0.85; }
.topn-result-mark {
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.is-hit .topn-result-mark { color: var(--green); }
.is-miss .topn-result-mark { color: var(--red); }
.is-wrong .topn-result-mark { color: var(--orange); }
.topn-result-rank {
  width: 26px;
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.topn-result-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  /* "Saint Vincent and the Grenadines" wrapping would make its row twice as tall
     as every other one — the exact jump this layout exists to prevent. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topn-result-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--green);
}

.topn-hint {
  font-size: 0.74rem;
  color: var(--text-dim);
  padding-left: 68px;
}
/* Reserved: the blurbs run one line wide and two narrow, and this sits above the
   rest of the form (TODOS #42). */
.topn-metric-hint { min-height: 2.6em; }

@media (max-width: 768px) {
  .topn-round-head h2 { font-size: 0.95rem; width: 100%; }
  .topn-hint { padding-left: 0; }
  .topn-result-name { font-size: 0.85rem; }
  .topn-picker-head h2 { margin-right: 48px; font-size: 1.1rem; }
}

/* ========== DATA EXPLORER ========== */
.btn-explore-mode {
  background: linear-gradient(135deg, #1a2a33, #22332a);
  border: 1px solid #58a6ff55;
}
.btn-explore-mode:hover {
  background: linear-gradient(135deg, #22332a, var(--surface2));
  border-color: var(--accent);
  box-shadow: 0 0 20px #58a6ff22;
}

/* The list screens share one layout. Grouped rather than repeated, because Scores was
   added without it and sat flush against the top of the window while every sibling had
   12px (owner, 2026-10-18). */
#screen-explore,
#screen-rank-line,
#screen-top-n,
#screen-scores {
  padding: 12px;
  overflow: hidden;
  justify-content: flex-start;
}
.explore-container {
  width: 100%;
  max-width: 720px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.explore-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.explore-header h2 { font-size: 1.2rem; font-weight: 600; flex: 1; }

.explore-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.explore-select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.explore-play { margin-left: auto; }

.explore-blurb {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 2px 4px 6px;
}
.explore-list {
  /* rank column + flag + the two gaps: what a line stacked under the name must clear */
  --explore-indent: calc(30px + 30px + 12px + 12px);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Only the coverage table is legitimately wider than the screen. Letting the rank
     rows scroll sideways too is what let a long name push the value out of sight. */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.explore-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 8px;
}
/* Beside the name, not under it: a line per country turned a ranking into a wall,
   and the height must not change when the column is switched on (TODOS #67). */
.explore-aliases {
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.explore-rank {
  width: 30px;
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.explore-name { flex: 1; min-width: 0; font-size: 1rem; }
.explore-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
}

/* World map view (TODOS #48) */
.explore-list.is-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;   /* the map fills the pane; nothing here scrolls */
}
.explore-map {
  position: relative;
  flex: 1;
  min-height: 180px;
  border-radius: 8px;
  overflow: hidden;
}
.explore-map-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;   /* the map handles its own pan and pinch (TODOS #60) */
}
.explore-map-reset {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 0.75rem;
}
.explore-map-tip {
  position: absolute;
  pointer-events: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  white-space: nowrap;
  z-index: 2;
}
.explore-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 0 4px 2px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.explore-map-legend-head { flex: 1 0 100%; }
.explore-legend-item { display: flex; align-items: center; gap: 5px; }
.explore-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

@media (max-width: 480px) {
  /* A portrait pane letterboxes a landscape world: give the box the world's own
     proportions instead of all the height going spare above and below it. */
  .explore-map {
    flex: 0 1 auto;
    aspect-ratio: 1.3;
  }
}

/* Shapes grid — outlines only, named on hover (TODOS #61) */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  padding: 2px 4px 6px;
}
.shape-tile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  background: var(--surface2);
  border-radius: 8px;
  cursor: pointer;
}
.shape-tile:hover, .shape-tile:focus-visible { outline: 1px solid var(--accent); }
.shape-tile-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 4px;
  font-size: 0.72rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 0 0 8px 8px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
/* Touch has no hover, so there the country panel is the reveal. */
.shape-tile:hover .shape-tile-name,
.shape-tile:focus-visible .shape-tile-name { opacity: 1; }

/* Shapes table (TODOS #51) */
/* A column toggle is one glyph — square, no label — because these turn a column on
   rather than changing what is in the table (TODOS #67). */
.explore-glyphs { display: flex; gap: 4px; }
.explore-glyph {
  border-radius: 999px;
  padding: 0;
  width: 38px;
  text-align: center;
  /* Off is visibly off: a glyph at full strength either way left no way to tell
     whether the column was on (owner, 2026-10-11). */
  opacity: 0.45;
  filter: grayscale(1);
}
/* Its own label on hover: a glyph with no word is a guess, and a native title waits
   half a second before helping (owner, 2026-10-11). */
.explore-glyph { position: relative; }
.explore-glyph::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.explore-glyph:hover::after,
.explore-glyph:focus-visible::after { opacity: 1; }

.explore-glyph.active {
  opacity: 1;
  filter: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* A pill is on/off; the rectangular selects beside it are pick-one. The shapes are
   the signal, so the kind of control reads before the label does (TODOS #65). */
.explore-pill { border-radius: 999px; }
/* Only the action floats right; the toggles stay with the controls they belong to. */
.explore-controls .explore-play { margin-left: auto; }
/* With the outline column on there is one more thing before the name, so the value
   stacked under it on a phone has further to clear. */
.explore-row.has-outline { --explore-indent: calc(30px + 48px + 30px + 36px); }
.shape-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--surface);
}
/* Coverage / audit table */
.coverage-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.coverage-table th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 600;
  text-align: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.coverage-table th:nth-child(2) { text-align: left; }
.coverage-table td {
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.coverage-table .cov-name { text-align: left; white-space: nowrap; }
.coverage-table .cov-type {
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Coverage health strip: the integrity checks, collapsed unless something wants
   attention — a wall of green ticks only pushes the table off the screen. */
.cov-health { margin: 0 0 10px; }
.cov-health-head {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); font: inherit; font-size: 0.74rem; padding: 5px 11px;
  cursor: pointer; text-align: left; width: 100%;
}
.cov-health-head:hover { color: var(--text); border-color: var(--accent); }
.cov-check { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--surface2); align-items: start; }
.cov-check:last-child { border-bottom: none; }
.cov-check-chip {
  font-size: 0.6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px; padding: 2px 5px; text-align: center; border: 1px solid;
}
.cov-check-chip[data-state="pass"] { color: var(--green); border-color: #2c5c36; }
.cov-check-chip[data-state="look"] { color: var(--orange); border-color: #5c4a1b; }
.cov-check-chip[data-state="fail"] { color: var(--red); border-color: #6b2c2c; }
.cov-check-what { font-size: 0.78rem; color: var(--text); }
.cov-check-detail { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
.cov-check-codes { font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem; color: var(--text-dim); opacity: .7; margin-top: 3px; word-break: break-word; }

/* A gap the source explains. Muted and dashed rather than a red cross: the figure is
   missing, that is understood, and nobody needs to act on it. */
.cov-explained { color: var(--text-dim); opacity: 0.45; cursor: help; }

/* Coverage: sortable headings. The gaps are what you are looking for, so the first
   click on a column brings them up rather than pushing them down. */
.coverage-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.coverage-table th.is-sortable:hover { color: var(--accent); }
.coverage-table th.is-sorted { color: var(--accent); }

/* Coverage: curated flag colours, and the warning when one is not in the image. */
.cov-colors { white-space: nowrap; line-height: 1; }
.cov-swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25); margin-right: 2px; vertical-align: middle;
}
.cov-swatch--missing { outline: 2px solid var(--red); outline-offset: 1px; }
.cov-colors-warn { color: var(--orange); font-size: 0.66rem; margin-left: 5px; vertical-align: middle;
  cursor: help; white-space: nowrap; border-bottom: 1px dotted var(--orange); }

.cov-cell.ok { color: var(--green); }
.cov-cell.no { color: var(--red); opacity: 0.8; }
.coverage-table tr.incomplete { background: #d2992212; }
.coverage-table tr.is-aggregate { background: #f8514920; }
.coverage-table tr.is-aggregate .cov-type { color: var(--red); }
.coverage-table .rank-flag { width: 24px; }
.explore-list.is-coverage,
.explore-list.is-sources { overflow-x: auto; }

@media (max-width: 768px) {
  .explore-list { --explore-indent: calc(30px + 26px + 12px + 12px); }  /* smaller flag */
  .explore-row.has-outline { --explore-indent: calc(30px + 48px + 26px + 36px); }
  .explore-header h2 { font-size: 1.05rem; }
  .explore-play { margin-left: 0; }
  .explore-select { flex: 1; }
}

/* Pinch-zoom magnifies, it does not reflow: on one line, a zoomed-in row puts the
   flag and the value past opposite edges of the screen. Stacking the value under
   the name keeps both within a screen-width of the left edge, and the larger type
   means reaching for the zoom less often (TODOS #47). */
@media (max-width: 480px) {
  .explore-row {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 10px 12px;
  }
  .explore-name { flex: 1 1 auto; }
  .explore-value {
    flex: 1 0 100%;
    padding-left: var(--explore-indent);
  }
}

.cov-legend { font-size: 0.72rem; color: var(--text-dim); margin-top: -4px; }

/* The ghosts toggle sits on the map it affects, in the corner nothing else uses. */
.map-wrap { position: relative; display: flex; justify-content: center; }
.results-map-area { position: relative; }
.map-ghost-toggle {
  position: absolute;
  left: 10px;
  top: 10px;        /* bottom-left is the gesture hint, bottom-right the zoom % */
  font-size: 0.72rem;
  opacity: 0.5;
  z-index: 2;
}
.map-ghost-toggle:hover { opacity: 1; }
.map-ghost-toggle.active { opacity: 1; border-color: var(--accent); }

/* ========== YOUR SCORES (TODOS #41) ========== */
.scores-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.scores-group {
  padding: 10px 8px 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}
.scores-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 8px;
}
.scores-name { font-size: 1rem; }
.scores-detail { font-size: 0.78rem; color: var(--text-dim); }
.scores-best {
  margin-left: auto;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.scores-when { font-size: 0.75rem; color: var(--text-dim); min-width: 72px; text-align: right; }
.scores-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 2px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.scores-empty {
  padding: 24px 16px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}
.scores-empty p + p { margin-top: 8px; font-size: 0.85rem; }

/* The best and the date both drift away from a long name at phone width; keep the
   score with the row rather than on a line of its own. */
@media (max-width: 480px) {
  .scores-name { flex: 1 1 100%; }
  .scores-best { margin-left: 0; }
  .scores-when { margin-left: auto; min-width: 0; }
}

/* ========== COUNTRY SHOWCASE PANEL (TODOS #18) ========== */
.cp-show-map {
  position: absolute;
  top: 10px;
  right: 46px;      /* clear of the close button */
  font-size: 0.75rem;
  z-index: 1;
}
@media (max-width: 480px) {
  /* The header is tight on a phone: the label goes, the icon stays. */
  .cp-show-map { font-size: 0; padding: 6px 9px; }
  .cp-show-map::before { content: '🗺️'; font-size: 0.9rem; }
}

.explore-row.is-clickable,
.rank-row.is-clickable,
.rank-result-row.is-clickable,
.coverage-table tr.is-clickable { cursor: pointer; }
.explore-row.is-clickable:hover,
.rank-row.is-clickable:hover,
.rank-result-row.is-clickable:hover,
.coverage-table tr.is-clickable:hover { background: var(--surface2); }

.country-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(1, 4, 9, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.country-panel-overlay.open { opacity: 1; pointer-events: auto; }

.country-panel {
  position: relative;
  /* The opening width is a reader's setting (TODOS #82) — set inline by the panel from
     localStorage and changed by dragging the edge. The cap keeps it inside the
     viewport on a laptop or a phone, where the setting is ignored entirely. */
  width: min(760px, 100%);
  max-width: 100%;
  max-height: min(88vh, 760px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.16s ease;
}
.country-panel-overlay.open .country-panel { transform: none; }
.country-panel.is-resizing { transition: none; user-select: none; }

/* The grab strip on the right edge. Invisible until you are near it, gone entirely on
   anything too narrow for the choice to mean something. */
.cp-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  touch-action: none;
  border-radius: 0 14px 14px 0;
  background: transparent;
  transition: background 0.12s;
}
.cp-resize::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 3px;
  width: 2px;
  height: 36px;
  margin-top: -18px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.12s;
}
.cp-resize:hover { background: rgba(88, 166, 255, 0.07); }
.cp-resize:hover::after { background: var(--accent); }
@media (max-width: 900px), (pointer: coarse) { .cp-resize { display: none; } }

.cp-loading { color: var(--text-dim); text-align: center; padding: 30px; }

.cp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.cp-close:hover { color: var(--text); border-color: var(--accent); }

.cp-header { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding-right: 50px; flex-wrap: wrap; }
.cp-flag {
  width: 128px;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
/* Coat of arms beside the flag (TODOS #31). Height-matched to the flag rather than
   width-matched: arms are portrait and flags landscape, so equal widths would tower. */
/* Beside the flag, not at the far right of the header: the right is where Show on map
   and the close button live, and an emblem pushed there overlapped them (owner,
   2026-10-18). The two symbols of the country sitting together also reads better than
   one at each end. */
.cp-emblem {
  height: 72px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Keep the name on the same row as the three emblems and let the text wrap inside it.
   Without a basis, a long name is wider than the space left and the whole block drops
   to a row of its own — "Bosnia and Herzegovina" cost 64px of header that way. */
.cp-title-wrap { flex: 1 1 170px; min-width: 0; }
.cp-name { font-size: 1.4rem; margin: 0; line-height: 1.15; }
.cp-sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 3px; }

.cp-body { display: block; }
/* In the header now, beside the flag and the arms, at the size of the other two. */
.cp-shape {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
}
.cp-facts { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.cp-capital { display: flex; flex-direction: column; gap: 2px; }
.cp-capital-label,
.cp-section-label { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* Dated qualifier under a breakdown heading (e.g. the electricity mix year, TODOS #29). */
.cp-section-note { color: var(--text-dim); font-size: 0.68rem; opacity: 0.8; margin-top: 2px; }
.cp-capital-value { font-size: 1.05rem; font-weight: 600; }

/* As many readable columns as the chosen width allows: three at the 760px default,
   four if the reader drags it wider, two on a phone. */
.cp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 10px; }
.cp-breaks { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px 24px; align-items: start; }
.cp-metric {
  cursor: help;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cp-metric-name { color: var(--text-dim); font-size: 0.72rem; }
.cp-metric-info { margin-left: 4px; opacity: 0.5; }
.cp-metric-desc {
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
.cp-metric-value { font-size: 1rem; font-weight: 600; }
.cp-metric-rank { color: var(--text-dim); font-size: 0.72rem; margin-top: 3px; }

/* Where this figure falls between the lowest and the highest country (TODOS #82).
   The track has no ticks on purpose: it answers "roughly where", and the median is
   the only figure worth naming next to the country's own. */
.cp-spread { position: relative; height: 14px; margin-top: 5px; }
.cp-spread-rail { position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--bg); border-radius: 2px; }
.cp-spread-med { position: absolute; top: 1px; width: 1px; height: 12px; background: var(--text-dim); opacity: 0.85; }
.cp-spread-dot {
  position: absolute;
  top: 1px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.cp-spread-foot {
  color: var(--text-dim);
  font-size: 0.68rem;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-metric-band { font-size: 0.76rem; margin-top: 2px; }

/* Colour only reaches the four metrics with a direction nobody argues about, and only
   past a fixed line — never a rank, which would paint 30% of the world amber on every
   metric for ever. */
.cp-spread-dot.cp-tone-good { background: var(--green); box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.25); }
.cp-spread-dot.cp-tone-bad { background: var(--orange); box-shadow: 0 0 0 3px rgba(210, 153, 34, 0.25); }
.cp-metric-band.cp-tone-good { color: var(--green); }
.cp-metric-band.cp-tone-bad { color: var(--orange); }

.cp-religion { display: flex; flex-direction: column; gap: 6px; }
.cp-rel-row { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 8px; }
.cp-rel-name { font-size: 0.8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A named religion with no published share: no bar, so the name takes the row. */
.cp-rel-row--nameonly { grid-template-columns: 1fr; }
.cp-rel-row--nameonly .cp-rel-name { white-space: normal; }
.cp-rel-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.cp-rel-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.cp-rel-pct { font-size: 0.78rem; color: var(--text-dim); text-align: right; }
.cp-rel-more { color: var(--text-dim); font-size: 0.75rem; }

.cp-empty { color: var(--text-dim); font-size: 0.9rem; }
.cp-credit { color: var(--text-dim); font-size: 0.62rem; opacity: 0.7; text-align: right; margin-top: 14px; }

@media (max-width: 600px) {
  .country-panel-overlay { padding: 10px; }
  .country-panel { padding: 16px; }
  .cp-header { gap: 12px; padding-right: 44px; }
  .cp-flag { width: 92px; }
  .cp-emblem { height: 52px; }
  .cp-name { font-size: 1.2rem; }
  .cp-shape-canvas { width: 72px !important; height: 72px !important; }
  .cp-facts { width: 100%; }
  /* Two across stays legible at phone width. The word moves up beside the value
     rather than taking a line of its own, which is what keeps twelve metrics the
     height they were before the track arrived. */
  .cp-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cp-metric {
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name name' 'value band' 'track track' 'foot foot';
    align-items: baseline;
    gap: 1px 6px;
  }
  .cp-metric-name { grid-area: name; }
  .cp-metric-value { grid-area: value; }
  .cp-metric-band { grid-area: band; text-align: right; font-size: 0.72rem; }
  .cp-spread { grid-area: track; margin-top: 3px; }
  .cp-spread-foot { grid-area: foot; }
  .cp-metric-desc { grid-column: 1 / -1; }
  .cp-metric-value { font-size: 0.95rem; }
  .cp-breaks { grid-template-columns: 1fr; }
  .cp-rel-row { grid-template-columns: 80px 1fr 38px; }
}

/* ========== SHAPE MATCH (TODOS #58, #72) ========== */
.match-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.match-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.match-yours {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.match-head-text { min-width: 0; }
.match-title {
  font-size: 1rem;
  font-weight: 600;
}
.match-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.35;
  margin-top: 2px;
}

.match-status {
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 8px 0;
}

.match-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
}

.match-row {
  display: grid;
  grid-template-columns: 24px 52px 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  background: var(--surface2);
  cursor: pointer;
}
.match-row:hover { background: var(--border); }
.match-rank {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
}
.match-rank-long { font-size: 0.68rem; }
.match-thumb {
  background: var(--bg);
  border-radius: 6px;
}
.match-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
}
.match-name {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-name em { color: var(--text-dim); font-style: normal; }
.match-score {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.match-good { color: var(--green); }
.match-ok { color: var(--orange); }
.match-bad { color: var(--red); }

.match-pin { border-top: 1px dashed var(--border); padding-top: 8px; }
.match-pin-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.match-pin-hit {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  color: var(--green);
}

.match-search { position: relative; }
.match-search-input {
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.match-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.match-search-results {
  list-style: none;
  margin-top: 4px;
  max-height: 170px;
  overflow-y: auto;
}
.match-search-hit {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.match-search-hit:hover { background: var(--surface2); }
.match-hit-rank {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.match-search-empty {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 5px 8px;
}

/* The shape-review rail down the left of the results map (TODOS #58) */
.results-match-rail {
  width: 310px;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.match-rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.match-rail-which {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-rail-arrow {
  width: 26px;
  height: 26px;
  flex: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.match-rail-arrow:hover:not(:disabled) { background: var(--border); }
.match-rail-arrow:disabled { opacity: 0.3; cursor: default; }
.match-rail-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
/* The score table doubles as the picker for this rail */
.score-table tbody tr.match-selected td { background: var(--surface2); }
.score-table tbody tr.match-pickable { cursor: pointer; }

/* Freestyle result (TODOS #72) — no map, so the panel gets the middle of the screen */
.freestyle-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow-y: auto;
}
.freestyle-card {
  width: 100%;
  max-width: 460px;
  max-height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.freestyle-card h2 { font-size: 1.2rem; font-weight: 600; }
#freestyle-host { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.cov-cell.cov-ceiling { font-variant-numeric: tabular-nums; font-weight: 600; cursor: help; }
.cov-cell.cov-ceiling.no { font-weight: 700; }
.cov-cell.cov-emblem { text-align: center; }
.cov-cell.cov-emblem img { height: 34px; width: auto; max-width: 48px; object-fit: contain; vertical-align: middle; }

/* ========== DATA SOURCES (TODOS #79) ========== */
.cp-metric-source { margin-top: 5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-size: 0.68rem; }
.cp-metric-source-label { color: var(--text-dim); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-metric-source a { color: var(--accent); text-decoration: none; }
.cp-metric-source a:hover { text-decoration: underline; }
/* A figure that did NOT come from the metric's usual source has to say so where the
   figure is, not only in the sources table. */
.cp-metric-source-flag {
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  opacity: 0.85;
}

/* Prose and URLs, not ticks: the coverage table centres its cells, which reads wrong
   for a column of sentences. */
.sources-table th,
.sources-table td { text-align: left; vertical-align: top; }
.sources-table th:nth-child(4),
.sources-table td.src-covers { text-align: right; }
.src-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.src-name a:hover { color: var(--accent); text-decoration: underline; }
.src-endpoint {
  color: var(--text-dim);
  font-size: 0.64rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0.75;
  margin-top: 2px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.src-what { color: var(--text-dim); max-width: 340px; }
.src-metrics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.src-metric {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.66rem;
  color: var(--text);
}
.src-license a { color: var(--accent); text-decoration: none; }
.src-license a:hover { text-decoration: underline; }
.src-covers { text-align: right; font-variant-numeric: tabular-nums; }
.src-when { white-space: nowrap; color: var(--text-dim); }
.src-when.is-stale { color: var(--warn, #f59e0b); font-weight: 600; }

@media (max-width: 640px) {
  /* The endpoint and the metric chips are the first things to go: on a phone the
     source, its licence and its age are what the table is for. */
  /* Five columns do not fit 390px, and the ones worth having there are which source,
     under what licence, and how old. The prose and the endpoint are desktop detail;
     keeping them pushed licence and age off the end of a scroll nobody would guess
     was there. */
  .src-endpoint,
  .src-metrics,
  .sources-table th:nth-child(2),
  .sources-table td:nth-child(2) { display: none; }
}

/* ========== TRADE PARTNERS (TODOS #30) ========== */
/* The back arrow sits in the flow above the header rather than beside the close button:
   the top-right corner already holds Close and Show on map, and a third absolute
   control there collides with the flag on a phone. */
.cp-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.78rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.cp-back:hover { color: var(--text); border-color: var(--accent); }

.cp-trade { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.cp-trade-head { font-size: 0.95rem; font-weight: 600; margin-bottom: 10px; }
.cp-trade-section { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cp-trade-section:last-child { margin-bottom: 0; }
.cp-trade-section > .cp-section-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cp-trade-year { font-variant-numeric: tabular-nums; opacity: 0.75; }

.cp-trade-row {
  display: grid;
  grid-template-columns: 24px 104px 1fr 42px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 2px 4px;
  margin: 0 -4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.cp-trade-row.is-clickable { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.cp-trade-row.is-clickable:hover { background: var(--surface2); border-color: var(--border); }
.cp-trade-flag { width: 24px; height: auto; border-radius: 2px; display: block; }
.cp-trade-name { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A partner list with no published shares has no bar and no share column. */
.cp-trade-row--nameonly { grid-template-columns: 24px 1fr; }

/* A card, because as a plain third section it read as a footnote to the two above it
   and was missed entirely (owner, 2026-10-24). */
.cp-trade-reciprocal {
  gap: 2px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.cp-trade-reciprocal .cp-section-label { margin-bottom: 4px; }
.cp-trade-recip-line {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px;
  margin: 0 -4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.cp-trade-recip-line:hover { background: var(--surface); }
/* The count is the fact; the sentence around it is scaffolding. */
.cp-trade-recip-line b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.cp-trade-caret { color: var(--text-dim); font-size: 0.7rem; width: 10px; }
.cp-trade-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 10px 16px; }
.cp-trade-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
}
.cp-trade-chip img { width: 18px; height: auto; border-radius: 2px; }
.cp-trade-chip.is-clickable { cursor: pointer; transition: border-color 0.12s; }
.cp-trade-chip.is-clickable:hover { border-color: var(--accent); }
.cp-trade-more {
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
}
.cp-trade-more:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 480px) {
  /* The name column gives way first: the flag already identifies the partner. */
  .cp-trade-row { grid-template-columns: 22px minmax(64px, 88px) 1fr 38px; gap: 6px; }
}

/* ========== WORLD HERITAGE SITES (TODOS #46) ========== */
.cp-heritage { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.cp-heritage-head { font-size: 0.95rem; font-weight: 600; margin-bottom: 10px; }
.cp-heritage-more { margin-top: 10px; font-size: 0.78rem; }

.whs-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.whs-row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--surface2);
  border-radius: 8px;
  padding: 6px;
}
.whs-row .whs-shot { width: 76px; height: 52px; flex: none; }
.whs-body { min-width: 0; }
.whs-name { font-size: 0.85rem; line-height: 1.25; }
.whs-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.whs-danger {
  display: inline-block; margin-top: 3px; font-size: 0.62rem; letter-spacing: 0.03em;
  color: var(--red); border: 1px solid var(--red); border-radius: 4px; padding: 0 4px;
}

.whs-shot {
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whs-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A site with no usable photo keeps its slot rather than collapsing the row. */
.whs-shot--empty { background: repeating-linear-gradient(45deg, var(--surface2), var(--surface2) 6px, var(--bg) 6px, var(--bg) 12px); }

/* The heritage wall (TODOS #46) */
.whs-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
  padding: 4px 0 12px;
}
.whs-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.whs-tile:hover { border-color: var(--accent); }
.whs-tile .whs-shot { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.whs-tile .whs-body { padding: 7px 9px 9px; }
.whs-tile .whs-name {
  font-size: 0.78rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 768px) {
  .whs-wall { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
}
.explore-container.is-wide { max-width: 1180px; }
.whs-shot { position: relative; }
.whs-rank {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: rgba(13, 17, 23, 0.78);
  border-radius: 5px;
  padding: 1px 5px;
  cursor: help;
}