/* =====================================================================
 * main.css
 * Estilos globais: variáveis CSS, reset, tipografia base, .screen,
 * sistema de botões, animações compartilhadas, modo Relíquia, overrides
 * do Leaflet e responsividade base.
 * ===================================================================== */

/* ========== CSS VARIABLES ========== */
:root {
  --color-primary: #1B4F72;
  --color-accent: #F39C12;
  --color-bg: #0D1B2A;
  --color-surface: #1A2940;
  --color-text: #E8F4F8;
  --color-success: #27AE60;
  --color-danger: #E74C3C;
  --color-muted: #5D7B94;
  --font-main: 'Sora', sans-serif;
  --font-serif: 'Merriweather', serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --transition: 0.3s ease;
}

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
}
#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; }
a { color: var(--color-accent); }

/* ========== SCREEN SYSTEM ========== */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.4s ease;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes countUp {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }
.animate-score { animation: countUp 0.5s ease-out; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  transition: all var(--transition);
  min-height: 48px;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text);
  border: 2px solid rgba(255,255,255,0.1);
}
.btn-primary:hover { background: #1a6da0; }

.btn-accent {
  background: var(--color-accent);
  color: #1a1a1a;
  border: 2px solid rgba(0,0,0,0.1);
}
.btn-accent:hover { background: #e8920a; }

.btn-success { background: var(--color-success); color: #fff; }
.btn-success:hover { background: #219a52; }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #c0392b; }

.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  border: 2px solid var(--color-muted);
}
.btn-ghost:hover { color: var(--color-text); border-color: var(--color-text); }

.btn-sm { padding: 10px 20px; font-size: 0.875rem; }

/* ========== SPINNER ========== */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ========== MODO RELÍQUIA (sépia em telas, exceto a imagem) ========== */
.mode-reliquia .game-header,
.mode-reliquia .game-controls,
.mode-reliquia .home-screen,
.mode-reliquia .name-screen,
.mode-reliquia .feedback-screen,
.mode-reliquia .results-screen,
.mode-reliquia .ranking-screen {
  filter: sepia(0.3) contrast(1.05);
}
.mode-reliquia .game-header { font-family: var(--font-serif); }
.mode-reliquia .game-title { font-family: var(--font-serif); }
.mode-reliquia::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    rgba(139, 119, 101, 0.015) 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* ========== LEAFLET OVERRIDES ========== */
.leaflet-control-attribution { font-size: 10px !important; }

/* ========== RESPONSIVE ========== */
@media (min-width: 768px) {
  .game-map-container { min-height: 50vh; }
  #game-map { min-height: 50vh; }
  .feedback-map-container { height: 320px; }
}
@media (max-width: 480px) {
  .game-header { padding: 10px 12px; }
  .game-controls { padding: 10px 12px; gap: 8px; }
  .btn { padding: 12px 20px; font-size: 0.9rem; }
  .feedback-points { font-size: 2.4rem; }
  .results-total { font-size: 2.8rem; }
}