* {
  box-sizing: border-box;
}
:root {
  --bg: #0b0b0d;
  --panel: #121218;
  --panel2: #0e0e14;
  --line: #1e1e28;
  --text: #f5f7fb;
  --muted: #c9c9d1;
  --accent: #27ae60;
  --accentHover: #e53935;
  --imageSize: 500px;
  --mapHeight: 500px;
}
@media (max-width: 980px) {
  :root {
    --imageSize: 500px;
    --mapHeight: 500px;
  }
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
  overflow-x: hidden;
}

/* Screens */
.screen {
  display: none;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}
.screen.active {
  display: grid;
}

.hide {
  display: none;
}

.home-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 28px 20px;
  width: min(520px, 92vw);
  text-align: center;
}
.home-logo {
  height: 72px;
  display: block;
  margin: 0 auto 8px auto;
}
.center {
  text-align: center;
}
.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.home-form {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.home-form input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #2a2a36;
  background: #161622;
  color: #fff;
  min-width: 260px;
}
.cta-btn {
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.05s;
}
.cta-btn:hover {
  background: var(--accentHover);
}
.cta-btn:active {
  transform: translateY(1px);
}
.cta-btn.ghost {
  background: #2b2b38;
}
.cta-btn.lg {
  font-size: 1.25rem;
  padding: 14px 22px;
}
.cta-btn.xl {
  font-size: 1.35rem;
  padding: 16px 28px;
}
.home-note {
  color: var(--muted);
  margin: 12px 0 0 0;
  font-size: 12px;
}
.home-error {
  color: #ff8a80;
  margin: 8px 0 0 0;
  font-size: 13px;
}
.database-status {
  color: #ffa726;
  margin: 8px 0 0 0;
  font-size: 12px;
  background: rgba(255, 167, 38, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 167, 38, 0.3);
}

/* Header */
.game-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.logo {
  height: 44px;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-direction: column;
}
.hud {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-self: center;
}
.score-wrap,
.round-wrap {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
  min-width: 110px;
  text-align: center;
}
.score-label,
.round-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 2px;
}
.score-val {
  font-size: 1.6rem;
  font-weight: 800;
}
.round-val {
  font-size: 1.2rem;
  font-weight: 700;
}
.timer-wrap {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: #1b1b28;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 12px;
}
.timer {
  font-size: 2rem;
  font-weight: 900;
}
.timer-s {
  color: var(--muted);
  font-weight: 600;
}
.warn {
  color: #ffb300;
}

/* Layout */
.container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding: 16px;
}
.left,
.right {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.title-over-photo {
  margin: 0 0 8px 0;
}

/* Fixed image square frame */
/* Fixed image square frame */
.photo-box {
  display: grid;
  place-items: center;
  background: var(--panel2);
  border: 1px solid #1c1c28;
  border-radius: 12px;
  width: var(--imageSize);
  height: var(--imageSize);
  margin: 0 auto;
}
#photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* Map wrap ensures the map fills exactly and centers */
.map-wrap {
  border: 1px solid #1c1c28;
  border-radius: 12px;
  background: var(--panel2);
  width: var(--imageSize);
  height: var(--imageSize);
  margin: 0 auto;
  display: grid;
}
.map {
  width: 100%;
  height: 100%;
  border-radius: 12px; /* visually line up with wrap */
}
.leaflet-container {
  width: 100% !important;
  height: 100% !important;
}
/* guard against any outline gaps */
.map .leaflet-pane,
.map .leaflet-layer {
  transform: translateZ(0);
}

.actions {
  grid-column: 1/-1;
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}
.result {
  grid-column: 1/-1;
  margin: 14px 0 0 0;
  min-height: 28px;
  color: var(--text);
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
}

.footer {
  padding: 12px 16px;
  color: #a4a4ae;
  text-align: center;
}

/* Fade transitions */
.fade-hub {
  opacity: 1;
  transition: opacity 0.28s ease;
}
.fade-hub.is-fading {
  opacity: 0.001;
}

/* Leaderboard */
.leaderboard-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  width: min(520px, 95vw);
  max-width: 95vw;
}
.board {
  list-style: none;
  max-height: 48vh;
  overflow: auto;
  margin: 10px 0 14px 0;
}

/* Responsive */
@media (max-width: 980px) {
  .container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hud {
    justify-self: start;
  }
}

/* Footer link styling */
.footer a {
  color: #a4a4ae;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

/* Result-only screen (map centered + progress bar) */
.result-only {
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 16px;
}
.result-map-wrap {
  border: 1px solid #1c1c28;
  border-radius: 12px;
  background: var(--panel2);
  width: var(--imageSize);
  height: var(--imageSize);
  display: grid;
  margin: 0 auto;
}
.progress-wrap {
  width: min(540px, 92vw);
  text-align: center;
}
.progress-bg {
  width: 100%;
  height: 16px;
  background: #1c1c28;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.6s ease;
}
.points-label {
  margin-top: 8px;
  font-weight: 800;
}
.leaflet-interactive.polyline-thin {
  stroke-width: 2 !important;
}

.board li .rank {
  display: inline-block;
  width: 1.6em;
}

/* Auth tweaks */
.auth-toggle {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.auth-toggle .small {
  font-size: 0.9rem;
  padding: 8px 12px;
}
.auth-toggle .active {
  background: var(--accent);
  color: white;
}

.home-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.home-actions.hide {
  display: none;
}

/* Smaller secondary logout button */
.cta-btn.sm {
  font-size: 0.9rem;
  padding: 8px 12px;
}
.logout-btn {
  display: block;
  margin: 10px auto 0 auto;
}
.logout-btn.hide {
  display: none;
}

/* Slimmer enter button */
.enter-btn {
  margin-top: 14px;
  display: block;
  width: auto;
  padding: 12px 18px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Mobile optimizations ===== */
@media (max-width: 768px) {
  /* Prevent any sideways scroll + tighter paddings */
  .screen {
    padding: 8px;
  }

  /* Home card responsive */
  .home-card {
    width: min(420px, 95vw);
    padding: 20px 16px 16px;
  }

  .home-form {
    flex-direction: column;
    align-items: center;
  }
  .home-form input {
    min-width: min(280px, 90vw);
    width: 100%;
    max-width: 320px;
  }

  /* Game header adjustments */
  .game-header {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px 12px;
  }
  .brand {
    gap: 4px;
  }
  .brand .subtitle {
    font-size: 11px;
  }
  .hud {
    justify-self: end;
    gap: 8px;
  }
  .score-wrap,
  .round-wrap {
    min-width: auto;
    padding: 4px 8px;
    font-size: 0.9rem;
  }
  .score-val {
    font-size: 1.2rem;
  }
  .round-val {
    font-size: 1rem;
  }
  .timer-wrap {
    padding: 4px 8px;
  }
  .timer {
    font-size: 1.4rem;
  }

  /* Scale logos so they don't overflow */
  .home-logo {
    height: auto;
    max-width: 70%;
    margin: 0 auto 6px auto;
  }
  .logo {
    height: auto;
    max-width: 50vw;
  }

  /* Container adjustments */
  .container {
    padding: 8px;
    gap: 8px;
  }
  .left,
  .right {
    padding: 12px;
  }

  /* Responsive image and map sizing */
  :root {
    --imageSize: min(90vw, 380px);
  }
  .photo-box,
  .map-wrap,
  .result-map-wrap {
    width: var(--imageSize);
    height: var(--imageSize);
    max-width: 90vw;
  }

  /* Progress wrap responsive */
  .progress-wrap {
    width: min(90vw, 400px);
  }

  /* Buttons smaller so both areas fit in one view */
  .cta-btn.lg,
  .cta-btn.xl {
    font-size: 1rem;
    padding: 10px 14px;
  }
  .actions {
    margin-top: 4px;
    gap: 8px;
  }

  /* Auth toggle responsive */
  .auth-toggle {
    flex-wrap: wrap;
    gap: 6px;
  }
  .home-actions {
    gap: 8px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .screen {
    padding: 4px;
  }

  .home-card {
    width: 98vw;
    padding: 16px 12px 12px;
  }

  .game-header {
    padding: 6px 8px;
  }

  .container {
    padding: 4px;
  }

  :root {
    --imageSize: min(95vw, 320px);
  }

  .title-over-photo {
    font-size: 1.1rem;
  }

  .cta-btn.lg,
  .cta-btn.xl {
    font-size: 0.95rem;
    padding: 8px 12px;
  }

  /* Leaderboard mobile adjustments */
  .leaderboard-card {
    padding: 16px 12px;
  }
  .leaderboard-card h3 {
    font-size: 1.1rem;
    line-height: 1.3;
  }
}