/* === DESIGN SYSTEM: WORLD REGIONS MAP === */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg-dark: #0b0f19;
  --bg-surface: rgba(18, 26, 44, 0.75);
  --bg-surface-hover: rgba(28, 40, 68, 0.85);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
  --glass-blur: blur(16px);

  --accent-primary: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.4);
  --accent-secondary: #06b6d4;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;

  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;

  /* Totes les línies, blanques, com sempre. El que separa una frontera de país
     d'una divisió interna no és el color: és que a mode Països les internes no
     es dibuixen (vegeu .mode-countries més avall). */
  --border-region: #ffffff;
  --border-country: #ffffff;
  /* Valor de reserva: el gruix real el fixa updateBorderWidth() a cada moviment,
     perquè depèn de quant a prop s'estigui mirant el mapa */
  --border-width: 0.5px;
  --border-opacity: 0;

  --ocean-bg: #dfeaf6;
  --ocean-fill: #eaf6fc;
  --ocean-stroke: #cbe3ef;
  --land-fill: #1e293b;
  --land-hover: #38bdf8;
  --land-active: #3b82f6;
  --land-hit: #10b981;
  --land-miss: #ef4444;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: 'Outfit', 'Inter', sans-serif;
  background-color: var(--ocean-bg);
  color: var(--text-main);
  /* 100vh al mòbil és l'alçada COM SI la barra del navegador no hi fos, i per això
     l'última franja de l'aplicació quedava amagada al darrere. 100dvh és el que es
     veu de veritat. El vh queda de reserva per als navegadors que no el coneguin. */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* === APP CONTAINER === */
#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* === MAP CANVAS === */
#map-viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, #eff5fc 0%, #d5e3f2 100%);
  cursor: grab;
  touch-action: none;
}

#map-viewport.panning {
  cursor: grabbing;
}

#svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#svg-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Mars i oceans: l'SVG porta la làmina d'aigua com un sol path #ocean, que de
   sèrie ve blanc amb contorn negre */
/* El gruix del traç d'un SVG es mesura en unitats del mapa, no de pantalla, i per
   això les fronteres s'esvaïen: els 0,09 unitats que porta el fitxer es dibuixen
   a 0,011 px amb el món sencer a la vista. Amb non-scaling-stroke el gruix passa
   a ser de pantalla i es manté igual de llegible a qualsevol apropament. */
#svg-container svg path,
#svg-container svg polygon,
#svg-container svg circle,
#svg-container svg rect {
  /* !important perquè cada forma del SVG porta el seu propi stroke-width a l'atribut
     style, i un atribut guanya a qualsevol regla que no ho sigui */
  stroke: var(--border-region) !important;
  stroke-width: var(--border-width) !important;
  stroke-opacity: var(--border-opacity, 1) !important;
  vector-effect: non-scaling-stroke;
}

/* Mode Països: les divisions internes desapareixen. La regla va abans que la dels
   contorns i la dels estats de joc a posta — comparteixen especificitat i, entre
   iguals, mana l'última: així un país seleccionat o encertat es continua veient. */
#svg-container.mode-countries svg path:not(.country-outline),
#svg-container.mode-countries svg polygon:not(.country-outline) {
  stroke-opacity: 0 !important;
}

/* Les fronteres entre països. A diferència de les divisions internes, aquestes
   s'han de veure també de lluny: són poques (uns 320 contorns contra gairebé
   4.000 divisions) i són les que donen forma al mapa. */
#svg-container svg .country-outline {
  stroke: var(--border-country) !important;
  stroke-width: var(--border-country-width, 0.6px) !important;
  stroke-opacity: 1 !important;
}

#svg-container svg #ocean {
  stroke-opacity: 1 !important;
  fill: var(--ocean-fill) !important;
  stroke: var(--ocean-stroke) !important;
  stroke-width: 0.5px !important;
}

/* Linies de frontera / overlay (.cls-2) - No bloquegen la interactivitat de les regions */
#svg-container svg .cls-2 {
  pointer-events: none !important;
  fill: none !important;
  stroke: var(--border-country) !important;
  stroke-width: var(--border-country-width, 0.6px) !important;
}

/* Fora del terreny de joc del nivell: segueix sent visible i clicable, però
   apagat, perquè no es confongui amb el que sí que entra en joc.
   Va abans dels estats de joc a propòsit: hover, encert i error hi manen per sobre. */
#svg-container svg .out-of-scope {
  fill: #c3ccd3 !important;
  opacity: 0.62;
}

/* Mode Països: Hover i Selecció Blau */
#svg-container svg .country-hover {
  stroke-opacity: 1 !important;
  fill: #2563eb !important;
  stroke: #93c5fd !important;
  stroke-width: 1.6px !important;
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.85));
}

#svg-container svg .country-selected {
  stroke-opacity: 1 !important;
  fill: #1d4ed8 !important;
  stroke: #ffffff !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.9));
}

/* Mode Regions: Hover i Selecció Violeta */
#svg-container svg .region-hover {
  stroke-opacity: 1 !important;
  fill: #8b5cf6 !important;
  stroke: #ddd6fe !important;
  stroke-width: 1.8px !important;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.85));
}

#svg-container svg .region-selected {
  stroke-opacity: 1 !important;
  fill: #7c3aed !important;
  stroke: #ffffff !important;
  stroke-width: 2.2px !important;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.9));
}

/* Country highlight / hint */
#svg-container svg .country-highlight {
  stroke-opacity: 1 !important;
  fill: rgba(245, 158, 11, 0.35) !important;
  stroke: #f59e0b !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8));
}

/* Game states */
#svg-container svg .region-correct {
  stroke-opacity: 1 !important;
  fill: #10b981 !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.9));
  animation: pulseHit 0.6s ease-in-out;
}

#svg-container svg .region-wrong {
  stroke-opacity: 1 !important;
  fill: #ef4444 !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.9));
  animation: shakeMiss 0.4s ease;
}

/* L'encert batega amb llum, no amb moviment: un transform sobre un <path> SVG
   escala respecte de l'origen del llenç i desplaçaria el país fora de lloc */
@keyframes pulseHit {
  0%   { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.7)); }
  50%  { filter: drop-shadow(0 0 22px rgba(16, 185, 129, 1)); }
  100% { filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.9)); }
}

@keyframes shakeMiss {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* === TOP HUD / HEADER === */
.top-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 100;
}

.hud-group {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Glassmorphism Panel Base */
.glass-panel {
  background: var(--bg-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  padding: 10px 16px;
  transition: all 0.25s ease;
}

/* App Branding */
.brand-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.brand-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.brand-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Mode Selector Switcher */
.mode-segmented {
  display: flex;
  background: rgba(10, 15, 28, 0.8);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--glass-border);
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.mode-btn:hover {
  color: #fff;
}

.mode-btn.active {
  background: linear-gradient(135deg, #2563eb, #0284c7);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

/* Game Status Banner */
.game-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 24px;
}

.target-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.target-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--accent-secondary);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.target-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.target-flag {
  font-size: 1.5rem;
}

.hint-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--accent-warning);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 4px;
}

/* Stats Pill */
.stats-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.95rem;
  font-weight: 600;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-item.streak {
  color: #f97316;
}

/* Cronòmetre del HUD: avisa quan queda poc temps a la contrarellotge */
#stat-timer {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

#stat-timer.timer-warning {
  color: #fbbf24;
}

#stat-timer.timer-danger {
  color: #f87171;
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Controls */
.btn {
  background: var(--bg-surface);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn:hover {
  background: var(--bg-surface-hover);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #0284c7);
  border: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #0369a1);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
}

.btn-hint {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.btn-hint:hover {
  background: rgba(245, 158, 11, 0.3);
}

/* === FLOATING TOOLTIP === */
#map-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  display: none;
  opacity: 0;
  transform: translate(-50%, -120%) scale(0.95);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

#map-tooltip.active {
  display: block;
  opacity: 1;
  transform: translate(-50%, -120%) scale(1);
}

/* Tocat amb el dit: el rètol s'enfila per sobre del que tapa la mà */
#map-tooltip.by-finger {
  transform: translate(-50%, calc(-120% - 30px)) scale(0.95);
}

#map-tooltip.by-finger.active {
  transform: translate(-50%, calc(-120% - 30px)) scale(1);
}

.tooltip-card {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 160px;
  text-align: center;
}

.tooltip-region {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.tooltip-country {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.tooltip-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #38bdf8;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* === BOTTOM FLOATING CONTROLS & INFO BAR === */
.bottom-bar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
  z-index: 100;
}

.info-dock {
  pointer-events: auto;
  max-width: 480px;
  width: 100%;
  display: none;
}

.info-dock.visible {
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

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

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

.info-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.info-flag {
  font-size: 1.5rem;
}

.info-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.info-chip {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 9px;
  border-radius: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.info-chip-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  flex-shrink: 0;
}

.info-chip-val {
  font-weight: 600;
  color: var(--text-main);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zoom controls */
.zoom-controls {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zoom-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding: 0;
}

/* === SEARCH & EXPLORER MODAL === */
.search-box {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 6px 12px;
  width: 260px;
}

.search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  width: 100%;
}

.search-input::placeholder {
  color: var(--text-dim);
}

.search-results {
  position: absolute;
  /* la barra de cerca és a dalt de tot: la llista s'ha d'obrir cap avall,
     si no queda fora de la pantalla */
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
}

.search-results.active {
  display: flex;
}

.search-item {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s ease;
}

.search-item:hover {
  background: rgba(59, 130, 246, 0.2);
}

.search-item-main {
  font-weight: 600;
  font-size: 0.9rem;
}

.search-item-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* === LOADING OVERLAY === */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #091322;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.5s ease;
}

.spinner {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* === ICON BUTTONS & SETTINGS === */
.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  color: #fff;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.btn-close:hover {
  color: #fff;
  background: rgba(239, 68, 68, 0.2);
}

/* === SETTINGS MODAL === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(5, 10, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-overlay.visible {
  opacity: 1;
}

.modal-card {
  width: 100%;
  max-width: 480px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-card-wide {
  max-width: 880px;
  padding: 28px;
}

.modal-subtitle-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: -6px;
}

/* === CONFIGURACIÓ DE PARTIDA (nom del jugador + rellotge) === */
.match-setup {
  display: grid;
  grid-template-columns: minmax(140px, 0.85fr) minmax(265px, 1fr) minmax(230px, 1fr);
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}

.setup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.setup-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.setup-input {
  background: rgba(10, 15, 28, 0.75);
  border: 1px solid var(--glass-border);
  color: #fff;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.setup-input::placeholder {
  color: var(--text-dim);
  font-weight: 500;
}

.setup-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.timer-picker,
.duration-picker {
  display: flex;
  gap: 8px;
  background: rgba(10, 15, 28, 0.6);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.timer-btn,
.dur-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.timer-btn input,
.dur-btn input {
  display: none;
}

.timer-btn:hover,
.dur-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.timer-btn.active,
.dur-btn.active {
  background: rgba(59, 130, 246, 0.25);
  color: #fff;
  border-color: rgba(59, 130, 246, 0.4);
}

@media (max-width: 900px) {
  .match-setup {
    grid-template-columns: 1fr;
  }
}

/* Play Modes Grid */
.play-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.play-mode-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.play-mode-card:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.25);
}

.play-mode-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.countries-gradient {
  background: linear-gradient(135deg, #2563eb, #0284c7);
}

.regions-gradient {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.correus-gradient {
  background: linear-gradient(135deg, #ea580c, #f59e0b);
}

.play-mode-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  width: 100%;
}

/* Targeta destacada: el mode Correus és el que té nivells i progressió */
.correus-card-highlight {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(234, 88, 12, 0.06);
}

.correus-card-highlight:hover {
  background: rgba(234, 88, 12, 0.14);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 158, 11, 0.25);
}

.play-mode-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

/* Què vol dir el nivell triat en aquest mode concret */
.play-mode-scope {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 5px 8px;
  margin-top: 2px;
}

.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 999px;
  padding: 1px 9px;
  margin-bottom: 3px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-mode-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.35;
}

/* Dos botons: la ronda curta i la llarga */
.play-mode-start {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.play-mode-card .btn-play-mode-start {
  flex: 1;
  padding: 8px 6px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Cercador de països del mode Regions: mateix patró que el de la barra superior,
   però obrint-se dins de la targeta */
.country-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 15, 28, 0.75);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 6px 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Amb país triat el camp es veu com una tria feta, no com una cerca buida */
.country-search.has-country {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
}

.country-search.has-country .search-input {
  color: #fff;
  font-weight: 700;
}

.country-search:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.country-search .search-input {
  font-size: 0.82rem;
}

.country-search-results {
  /* Dins de la targeta hi ha més espai amunt que avall: obre cap amunt */
  top: auto;
  bottom: calc(100% + 6px);
  width: 100%;
  max-height: 180px;
  z-index: 20;
}

.country-search-results .search-item {
  padding: 6px 10px;
}

/* La targeta retalla el seu contingut (cantonades arrodonides), i això tallava
   el desplegable del cercador: mentre s'hi cerca, la deixem sobreeixir */
.play-mode-card.searching {
  overflow: visible;
  z-index: 5;
}

/* Accés ràpid: l'atzar i els països que més jugues */
.country-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.country-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  background: rgba(10, 15, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 4px 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.country-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.country-chip.active {
  background: rgba(59, 130, 246, 0.28);
  border-color: rgba(59, 130, 246, 0.5);
  color: #fff;
}

.regions-options.locked .country-search,
.regions-options.locked .country-chips {
  opacity: 0.4;
  pointer-events: none;
}

/* Selector de país del mode Regions */
.regions-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  text-align: left;
}

.modal-overlay.visible .modal-card {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.setting-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
}

.setting-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.setting-select {
  background: rgba(10, 15, 28, 0.9);
  border: 1px solid var(--glass-border);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.setting-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.setting-select option {
  background: #0f172a;
  color: #fff;
}

/* === RÀNQUING DE PUNTUACIONS === */
.lb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 15, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lb-filter:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.lb-filter.active {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fff;
}

.lb-table-wrap {
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.lb-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(8px);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.lb-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.lb-table tbody tr:last-child td {
  border-bottom: none;
}

.lb-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lb-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lb-col-pos {
  width: 46px;
  text-align: center;
}

.lb-pos {
  font-weight: 800;
  color: var(--text-muted);
  font-size: 1rem;
}

.lb-name {
  font-weight: 700;
  color: #fff;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-mode {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.lb-score {
  font-weight: 800;
  color: #38bdf8;
}

.lb-date {
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* Les partides de qui juga ara */
.lb-table tbody tr.lb-me {
  background: rgba(59, 130, 246, 0.14);
}

.lb-table tbody tr.lb-me:hover {
  background: rgba(59, 130, 246, 0.2);
}

.lb-table tbody tr.lb-me .lb-name {
  color: #93c5fd;
}

.lb-state {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .lb-col-streak,
  .lb-col-date {
    display: none;
  }
}

/* === TOGGLE SWITCH === */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.3s;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

input:checked + .slider {
  background-color: #3b82f6;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.modal-footer.justify-center {
  justify-content: center;
  gap: 12px;
}

.text-center {
  text-align: center;
}

/* === OPCIONS DEL MODE CORREUS (nivell + modalitat d'entrega) === */
.correus-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  text-align: left;
}

.opt-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.opt-group-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.opt-note {
  font-size: 0.66rem;
  line-height: 1.3;
  color: var(--text-dim);
  font-style: italic;
}

/* === LEVEL PICKER (ROOKIE / NOBEL / SENIOR) === */
.level-picker {
  display: flex;
  gap: 6px;
  background: rgba(10, 15, 28, 0.6);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lvl-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 6px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lvl-btn input {
  display: none;
}

.lvl-emoji {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.lvl-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.1;
}

.lvl-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.lvl-btn:hover .lvl-name {
  color: #fff;
}

.lvl-btn.active {
  background: rgba(234, 88, 12, 0.22);
  border-color: rgba(245, 158, 11, 0.45);
}

.lvl-btn.active .lvl-name {
  color: #fff;
}

/* === DIFFICULTY PICKER (CORREUS) === */
.difficulty-picker {
  display: flex;
  gap: 8px;
  background: rgba(10, 15, 28, 0.6);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.diff-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diff-btn input {
  display: none;
}

.diff-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.diff-btn.active {
  background: rgba(59, 130, 246, 0.25);
  color: #fff;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Opció que el nivell actual no permet triar (Rookie sempre entrega a territoris) */
.diff-btn.locked {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* === POSTCARD HUD WIDGET (CORREUS MODE) === */
.postcard-hud-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  animation: slideDownPostcard 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.postcard-card {
  width: 480px;
  max-width: 90vw;
  background: #fdfbf7;
  color: #1e293b;
  border-radius: 14px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  font-family: inherit;
}

/* Air Mail diagonal stripe border */
.postcard-airmail-stripe {
  height: 8px;
  width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    #ef4444,
    #ef4444 14px,
    #ffffff 14px,
    #ffffff 22px,
    #2563eb 22px,
    #2563eb 36px,
    #ffffff 36px,
    #ffffff 44px
  );
}

.postcard-inner {
  display: flex;
  padding: 12px 16px;
  gap: 16px;
  justify-content: space-between;
}

.postcard-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.postcard-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0369a1;
}

.round-pill {
  background: #0284c7;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.7rem;
}

/* Píndola que recorda quin és el terreny de joc de la ronda (nivell Correus) */
.scope-pill {
  background: rgba(234, 88, 12, 0.14);
  border: 1px solid rgba(234, 88, 12, 0.35);
  color: #9a3412;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: none;
  flex-shrink: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postcard-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid #e2e8f0;
  padding-left: 10px;
}

.p-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #475569;
}

.p-lbl {
  font-weight: 600;
  color: #64748b;
  font-size: 0.75rem;
}

.p-val {
  font-weight: 600;
  color: #0f172a;
}

.territory-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ea580c;
}

.country-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2563eb;
}

/* Postcard Stamp and Actions */
.postcard-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.postcard-stamp-box {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.postcard-stamp {
  width: 52px;
  height: 60px;
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.stamp-flag {
  font-size: 1.5rem;
}

.stamp-post {
  font-size: 0.55rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.postcard-postmark {
  border: 1.5px solid #94a3b8;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.52rem;
  font-weight: 800;
  transform: rotate(-15deg);
  opacity: 0.8;
}

.postcard-actions {
  display: flex;
  gap: 6px;
  width: 100%;
}

.postcard-actions .btn {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.postcard-hint-banner {
  background: #fef3c7;
  color: #92400e;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-top: 1px solid #fde68a;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* === ROUND COMPLETE MODAL === */
.round-complete-icon {
  font-size: 3.5rem;
  margin-bottom: -10px;
}

.round-complete-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.round-complete-msg {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.round-stats-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0;
}

.r-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r-stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
}

.r-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #38bdf8;
}

.r-stat-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .top-hud {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hud-group {
    justify-content: space-between;
  }
  .bottom-bar {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }
  .zoom-controls {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* Botó de confirmar la resposta. Només el fa servir el joc quan es juga amb el
   dit: amb ratolí, clicar ja és respondre. */
.confirm-answer {
  display: none;
  pointer-events: auto;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.confirm-answer.visible {
  display: flex;
}

.confirm-answer-name {
  font-weight: 700;
}

/* === TELÈFON EN VERTICAL ==========================================
   A 386 px d'ample, tot el que no és mapa li pren espai al joc. Aquí la barra
   superior torna a una sola fila, el cercador deixa de ser una caixa fixa de
   260 px —que queia literalment fora de pantalla— i tot el que s'ha de tocar
   arriba als 44 px que demanen Apple i Google.

   Aquest bloc va al final del full a posta: comparteix especificitat amb el
   punt de ruptura de 768 px i l'ha de guanyar. ================================ */
@media (max-width: 560px) {
  :root {
    --touch: 44px;
  }

  /* --- Barra superior: una fila, i només l'imprescindible --- */
  .top-hud {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
  }

  .hud-group {
    gap: 6px;
    flex-wrap: nowrap;
  }

  /* La marca es queda amb la icona: el nom del joc ja és a la pestanya */
  .brand-pill {
    padding: 0;
    width: var(--touch);
    height: var(--touch);
    justify-content: center;
    gap: 0;
  }
  .brand-pill span:not(.brand-icon) {
    display: none;
  }

  .mode-btn {
    min-height: var(--touch);
    padding: 0 12px;
  }

  .stats-pill {
    min-height: var(--touch);
  }

  .btn,
  .btn-icon,
  .zoom-btn {
    min-height: var(--touch);
    min-width: var(--touch);
  }

  /* --- Cercador: una icona que s'obre a tota l'amplada --- */
  .search-box {
    position: relative;
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    gap: 0;
    overflow: hidden;
    transition: none;
  }

  /* La lupa és decoració; qui rep el dit és el camp, que ocupa tota la caixa */
  .search-box > span {
    position: absolute;
    left: 12px;
    pointer-events: none;
    z-index: 1;
  }

  .search-box .search-input {
    position: absolute;
    inset: 0;
    padding: 0 12px 0 36px;
    font-size: 16px; /* per sota de 16 px, iOS amplia la pàgina en enfocar */
  }

  .search-box:focus-within {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    width: auto;
    z-index: 300;
  }

  .search-results {
    width: auto;
    left: 0;
    right: 0;
    max-height: 50vh;
  }

  .search-item {
    min-height: var(--touch);
    align-items: center;
    display: flex;
  }

  /* --- Jugant, la barra baixa a una sola fila ---
     Durant una partida la marca no fa res i el selector de mode no s'ha de tocar:
     el mode el fixa la ronda. El que ha de quedar és la pregunta, el marcador i
     el botó d'aturar. */
  body.playing .brand-pill,
  body.playing .mode-segmented {
    display: none;
  }

  /* El botó d'aturar es queda amb la icona. El text hi és igualment per a qui
     escolta la pàgina amb un lector de pantalla; només deixa d'ocupar amplada. */
  body.playing #btn-start-game {
    width: var(--touch);
    padding: 0;
    gap: 0;
    font-size: 0;
    justify-content: center;
  }

  body.playing #btn-start-game > span {
    font-size: 1.15rem;
  }

  /* El marcador s'ha de poder encongir: amb el rellotge en marxa són tres xifres
     i abans se n'anava a 182 px, que treia el botó de configuració de la pantalla */
  .stats-pill {
    gap: 8px;
    padding: 0 8px;
    font-size: 0.82rem;
    min-width: 0;
  }

  /* --- El rètol de la pregunta: d'una ullada, no un plafó ---
     La pregunta i les pistes han de cabre en una sola fila. Els botons perden el
     text i es queden amb la icona: el que importa aquí és quanta pantalla li
     queda al mapa, que és on es juga. */
  .game-banner {
    width: 100%;
    order: 3;
    gap: 8px;
    padding: 8px 12px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .target-info {
    flex: 1 1 auto;
    min-width: 0;
  }

  .target-label {
    font-size: 0.7rem;
  }

  .target-name {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .game-banner .hud-group {
    flex: 0 0 auto;
    gap: 6px;
  }

  /* Els botons de pista, en icona. Amb font-size zero desapareix el text tant si
     ve dins d'un span com si l'i18n l'hi ha deixat solt, i el lector de pantalla
     el continua trobant. */
  .game-banner .btn {
    padding: 0;
    width: var(--touch);
    justify-content: center;
    gap: 0;
    font-size: 0;
  }

  .game-banner .btn > span {
    font-size: 1.05rem;
  }

  /* --- Barra inferior: al polze, i sense tapar el mapa --- */
  .bottom-bar {
    /* Un dit de marge per damunt de la vora: entre la barra del navegador i la
       ratlla d'inici del telèfon, enganxar-hi el botó és demanar problemes */
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    gap: 10px;
  }

  .zoom-controls {
    justify-content: flex-end;
    gap: 8px;
  }

  /* Dins de la caixa d'informació, però amb cos de botó de polze */
  .confirm-answer.visible {
    min-height: 52px;
    font-size: 1rem;
  }

  .info-dock {
    max-width: none;
    max-height: 38vh;
    overflow-y: auto;
    padding: 10px 12px;
  }

  /* Al telèfon, cada dada a la seva línia: en dues columnes els noms llargs
     s'estrenyen i s'acaben tallant */
  .info-details {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .info-header {
    margin-bottom: 6px;
  }

  .info-title {
    font-size: 1.1rem;
  }

  /* Si les dades fan scroll, el botó no se n'ha d'anar amunt */
  .info-dock .confirm-answer.visible {
    position: sticky;
    bottom: 0;
  }

  /* Enmig d'una pregunta, la caixa es queda amb el que fa falta per respondre: què
     s'ha tocat i el botó. El codi ISO i el tipus són per a quan es va mirant el
     mapa amb calma, i aquí cada línia es paga amb mapa. */
  body.playing .info-dock .info-details {
    display: none;
  }

  body.playing .info-dock .confirm-answer.visible {
    margin-top: 8px;
    min-height: 48px;
  }

  /* --- Menú de joc: una columna, i el cap sempre visible --- */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }

  .modal-card,
  .modal-card-wide {
    max-width: none;
    max-height: 100dvh;
    height: 100%;
    border-radius: 0;
    padding: 16px max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-bottom));
    gap: 16px;
  }

  .modal-header {
    position: sticky;
    top: -16px;
    z-index: 2;
    padding: 12px 0;
    margin: -16px 0 0;
    background: rgba(15, 23, 42, 0.96);
  }

  .play-modes-grid {
    grid-template-columns: 1fr;
  }

  .play-mode-card {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 14px;
    padding: 14px;
  }

  .setup-input,
  .search-input,
  .lvl-btn,
  .diff-btn,
  .btn-close {
    min-height: var(--touch);
    font-size: 16px;
  }

  /* --- El tooltip, sota el dit, no hi cap: que sigui una barra a dalt --- */
  .tooltip-card {
    max-width: 78vw;
  }
}