/* Lang dropdown - used with data-lang-switcher */
.lang-switcher .lang-select {
  background: var(--surface, #18181b);
  border: 1px solid var(--border, #27272a);
  color: var(--text, #fafafa);
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.lang-switcher .lang-select:hover, .lang-switcher .lang-select:focus { border-color: #3f3f46; outline: none; }

/* GeoWeta mobile-first utilities - include after main styles */
/* Breakpoints: Mobile ≤480px, Tablet 481-768px, Desktop 769+ */

@media (max-width: 480px) {
  .nav-bar, .top-bar { padding: 12px 16px !important; }
  .nav-right { gap: 12px !important; flex-wrap: wrap; }
  .section-title { font-size: 24px !important; }
  section { padding: 48px 0 !important; }
  .container { padding: 0 16px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .stat-card { padding: 20px 16px !important; }
  .stat-card .value { font-size: 32px !important; }
  .leaderboard-row, .leaderboard-header { grid-template-columns: 40px 1fr 80px !important; padding: 14px 16px !important; gap: 12px !important; }
  .stats-by-mode { margin: 0 -16px 32px; border-radius: 0; }
  .chart-wrap { height: 160px; padding: 16px; }
  .accuracy-row { flex-direction: column; gap: 12px; }
  .mode-card .thumb { height: 120px; }
  .mode-card .body { padding: 20px; }
  .btn-play, .btn-secondary { min-width: 100% !important; }
}

@media (max-width: 768px) {
  .content-grid { grid-template-columns: 1fr !important; }
  .stats-row { gap: 32px !important; }
  .stat-value { font-size: 36px !important; }
  .game-area { grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr !important; }
  .panorama-wrap, .map-wrap { min-height: 280px; }
  .controls { position: sticky; bottom: 0; left: 0; right: 0; padding: 12px; background: rgba(26,22,20,0.95); }
  .btn { min-width: 120px; min-height: 44px; padding: 14px 24px; width: 100%; max-width: 320px; }
}

/* Touch targets - main CTAs and buttons */
button.btn, a.btn-play, a.btn-secondary { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }