/* Global */
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overscroll-behavior: none;
  overflow: hidden;
}

#app {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

/* ── Theme variables ─────────────────────────────────────────── */
:root {
  /* Topbar / settings panel */
  --topbar-bg:        #1a1a2e;
  --panel-bg:         #1e2130;
  --text-main:        #dde1f0;
  --text-sub:         #9499b4;
  --text-muted:       #5c6080;
  --border:           #383c58;
  --input-bg:         #252a3d;
  --input-border:     #454870;
  --btn-bg:           #343756;
  --btn-hover:        #424668;
  --btn-disabled:     #333;
  --sect-hdr-bg:      #2a2e48;
  --sect-hdr-hover:   #353960;
  --sect-text:        #c0c4d8;
  --warn-bg:          rgba(255,160,0,.12);
  --warn-border:      #c87e00;
  --warn-text:        #ffcc70;
  --player-label:     #9499b4;
  --reroll-border:    #454870;
  --reroll-hover:     rgba(255,255,255,.08);

  /* Start / End screens */
  --screen-bg:          linear-gradient(135deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%);
  --screen-card-bg:     rgba(255,255,255,0.08);
  --screen-card-border: rgba(255,255,255,0.15);
  --screen-text:        #fff;
  --screen-text-sub:    rgba(255,255,255,0.75);
  --screen-hint:        rgba(255,255,255,0.45);
  --screen-btn-disabled:#555;

  /* End screen rows */
  --end-row-bg:         rgba(255,255,255,0.05);
  --end-winner-bg:      rgba(255,235,59,0.13);
  --end-winner-border:  rgba(255,235,59,0.3);
  --end-dist-color:     rgba(255,255,255,0.62);

  /* Info panel */
  --info-bg:            rgba(18,20,38,0.88);
  --info-box-border:    rgba(255,255,255,0.08);
  --info-text:          #fff;
  --info-turn-color:    #ffeb3b;
  --info-muted:         rgba(255,255,255,0.48);
  --info-score:         rgba(255,255,255,0.62);
  --info-divider:       rgba(255,255,255,0.1);

  /* Town name pill */
  --town-name-bg:       rgba(0,0,0,0.72);
  --town-name-text:     #fff;
}

body.light-mode {
  /* Topbar / settings panel */
  --topbar-bg:        #2c3e50;
  --panel-bg:         #f4f4f4;
  --text-main:        #222;
  --text-sub:         #444;
  --text-muted:       #888;
  --border:           #ddd;
  --input-bg:         #fff;
  --input-border:     #ccc;
  --btn-bg:           #4a5568;
  --btn-hover:        #5a6578;
  --btn-disabled:     #aaa;
  --sect-hdr-bg:      #e0e0e0;
  --sect-hdr-hover:   #d0d0d0;
  --sect-text:        #333;
  --warn-bg:          #fff3cd;
  --warn-border:      #ffc107;
  --warn-text:        #7d5a00;
  --player-label:     #555;
  --reroll-border:    #ccc;
  --reroll-hover:     #ddd;

  /* Start / End screens */
  --screen-bg:          linear-gradient(135deg,#dbeafe 0%,#ede9fe 60%,#fce7f3 100%);
  --screen-card-bg:     rgba(255,255,255,0.82);
  --screen-card-border: rgba(0,0,0,0.1);
  --screen-text:        #1a1a3e;
  --screen-text-sub:    rgba(20,20,60,0.68);
  --screen-hint:        rgba(20,20,60,0.42);
  --screen-btn-disabled:#aaa;

  /* End screen rows */
  --end-row-bg:         rgba(0,0,0,0.04);
  --end-winner-bg:      rgba(251,191,36,0.18);
  --end-winner-border:  rgba(251,191,36,0.45);
  --end-dist-color:     rgba(0,0,0,0.5);

  /* Info panel */
  --info-bg:            rgba(255,255,255,0.93);
  --info-box-border:    rgba(0,0,0,0.1);
  --info-text:          #1a1a2e;
  --info-turn-color:    #b91c1c;
  --info-muted:         rgba(0,0,0,0.42);
  --info-score:         rgba(0,0,0,0.55);
  --info-divider:       rgba(0,0,0,0.1);

  /* Town name pill */
  --town-name-bg:       rgba(255,255,255,0.92);
  --town-name-text:     #1a1a2e;
}

/* Map */
#map {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 100%;
}
#mapMask {
  position: absolute;
  top: 50px; left: 0; right: 0; bottom: 0;
  background: #f5f3ef;
  z-index: 200;
  pointer-events: none;
  transition: opacity 0.35s;
  display: none;
}

/* Top bar */
#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50px;
  background: var(--topbar-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1rem;
  z-index: 1000;
  transition: background 0.25s;
}
#topbar h1 { font-size: 1.2rem; margin: 0; }
#currentTownDisplay { font-size: 1rem; margin-left: 2rem; color: #ffeb3b; }
#topbar button {
  background: var(--btn-bg);
  border: none;
  color: #fff;
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
#topbar button:hover:enabled { background: var(--btn-hover); }
#btnSettings, #btnTheme {
  width: 36px; height: 36px;
  border-radius: 50%; padding: 0;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Settings panel */
#settings {
  position: absolute;
  top: 50px; right: 0;
  width: 320px;
  max-width: 100%;
  bottom: 0;
  background: var(--panel-bg);
  color: var(--text-main);
  box-shadow: -2px 0 8px rgba(0,0,0,0.4);
  padding: 1rem;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 0.3s, visibility 0.3s, background 0.25s;
  overflow-y: auto;
  z-index: 1001;
  visibility: hidden;
  pointer-events: none;
}
#settings.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
#settings h2 { margin-top: 0; color: var(--text-main); }
#settings label { display: block; margin: 0.5rem 0 0.2rem; color: var(--text-sub); }
#settings input[type="number"] {
  width: 100%; padding: 0.3rem; box-sizing: border-box;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text-main); border-radius: 4px;
}
#settings select {
  width: 100%; padding: 0.3rem; box-sizing: border-box;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text-main); border-radius: 4px;
}
#settings .toggle { display: flex; align-items: center; margin: 0.4rem 0; gap: 0.25rem; }
#settings .toggle input[type="checkbox"] { margin-right: 0.25rem; flex-shrink: 0; }
#settings .toggle label { flex: 1; display: inline; margin: 0; color: var(--text-sub); }

/* Collapsible sections */
.sect-hdr {
  width: 100%; background: var(--sect-hdr-bg); border: none;
  padding: 0.35rem 0.6rem; margin: 0.6rem 0 0;
  text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 4px; font-size: 0.86rem; font-weight: bold; color: var(--sect-text);
  transition: background 0.15s;
}
.sect-hdr:hover { background: var(--sect-hdr-hover); }
.sect-hdr .arrow { transition: transform 0.2s; }
.sect-hdr.collapsed .arrow { transform: rotate(-90deg); }
.sect-body { padding: 0.1rem 0 0.2rem; }
.sect-body.collapsed { display: none; }

/* Sliders */
.w-val { min-width: 3.2rem; text-align: right; font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; }
.slider-label {
  font-size: 0.82rem; color: var(--text-muted);
  padding-left: 0.2rem; margin-top: 0.3rem;
}
.slider-row {
  display: flex; align-items: center; gap: 0.3rem;
  margin: 0.15rem 0 0.5rem;
}
.slider-row input[type="range"] { flex: 1; cursor: pointer; }
.slider-row input[type="number"] {
  flex: 1; text-align: center; min-width: 0;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text-main); border-radius: 4px; padding: 0.2rem 0.3rem;
  font-size: 0.9rem; box-sizing: border-box;
  -moz-appearance: textfield; appearance: textfield;
}
.slider-row input[type="number"]::-webkit-inner-spin-button,
.slider-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.slider-btn {
  background: var(--btn-bg); border: 1px solid var(--input-border);
  color: #fff; border-radius: 4px;
  width: 24px; height: 24px; font-size: 1rem; font-weight: bold;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; transition: background 0.15s;
}
.slider-btn:hover { background: var(--btn-hover); }

#townCountInfo { font-size: 0.82rem; color: var(--text-muted); margin: 0.1rem 0 0.6rem; text-align: right; }
#restartWarning {
  display: none;
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
  border-radius: 4px; padding: 0.4rem 0.6rem; font-size: 0.82rem; margin-bottom: 0.4rem;
}
#btnRestart {
  width: 100%; margin-top: 0.4rem;
  background: #ce2939; color: #fff; border: none;
  padding: 0.5rem; border-radius: 4px; cursor: pointer;
  font-weight: bold; transition: background 0.2s;
}
#btnRestart:hover:enabled { background: #e63349; }
#btnRestart:disabled { background: var(--btn-disabled); cursor: not-allowed; }

/* Start Screen */
#startScreen {
  position: absolute;
  top: 50px; left: 0; right: 0; bottom: 0;
  background: var(--screen-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 900;
  transition: background 0.3s;
}
#startScreen.hidden { display: none; }
#startContent {
  text-align: center;
  padding: 2.5rem 3rem;
  background: var(--screen-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid var(--screen-card-border);
  max-width: 480px; width: 90%;
  color: var(--screen-text);
  transition: background 0.3s, border-color 0.3s;
}
.start-icon { font-size: 4rem; margin-bottom: 0.5rem; }
#startContent h2 { font-size: 1.8rem; margin: 0.5rem 0 1rem; color: var(--screen-text); }
#startContent p { font-size: 1rem; color: var(--screen-text-sub); margin: 0 0 1.5rem; line-height: 1.5; }
#btnStartScreen {
  background: #ce2939; color: #fff; border: none;
  padding: 0.8rem 2.5rem; font-size: 1.2rem; font-weight: bold;
  border-radius: 8px; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: block; margin: 0 auto 1rem;
}
#btnStartScreen:hover:enabled { background: #e63349; transform: scale(1.04); }
#btnStartScreen:disabled { background: var(--screen-btn-disabled); cursor: not-allowed; }
.start-hint { font-size: 0.85rem; color: var(--screen-hint); margin: 0; }

/* Town name overlay */
#townNameDisplay {
  position: absolute;
  top: 62px; left: 50%; transform: translateX(-50%);
  z-index: 500;
  background: var(--town-name-bg);
  color: var(--town-name-text);
  padding: 0.45rem 1.4rem;
  border-radius: 28px;
  font-size: 1.8rem; font-weight: bold;
  pointer-events: none;
  white-space: nowrap; max-width: 90vw;
  overflow: hidden; text-overflow: ellipsis;
  display: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: background 0.25s, color 0.25s;
}
#townNameDisplay.visible { display: block; }

/* Action buttons */
#btnGuess, #btnNext {
  position: absolute;
  bottom: 36px; right: 16px;
  z-index: 1000; color: #fff; border: none;
  padding: 0.75rem 1.6rem; font-size: 1.1rem; font-weight: bold;
  border-radius: 8px; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: none;
}
#btnGuess.visible, #btnNext.visible { display: block; }
#btnGuess { background: #ce2939; }
#btnGuess:hover:enabled { background: #e63349; transform: scale(1.04); }
#btnGuess:disabled { background: #555; cursor: not-allowed; opacity: 0.7; }
#btnNext { background: #1565c0; }
#btnNext:hover:enabled { background: #1976d2; transform: scale(1.04); }
#btnNext:disabled { background: #555; cursor: not-allowed; opacity: 0.7; }

#btnHintReroll, #btnHintCounty, #btnHintExtraGuess {
  position: absolute;
  right: 16px;
  z-index: 1000; color: #fff; border: none;
  padding: 0.55rem 1.1rem; font-size: 0.88rem; font-weight: bold;
  border-radius: 8px; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  display: none;
  white-space: nowrap;
}
#btnHintReroll.visible, #btnHintCounty.visible, #btnHintExtraGuess.visible { display: block; }
#btnHintReroll { bottom: 188px; background: #b45309; }
#btnHintReroll:hover:enabled { background: #d97706; transform: scale(1.04); }
#btnHintReroll:disabled { background: #333; cursor: not-allowed; opacity: 0.6; }
#btnHintCounty { bottom: 138px; background: #0d6940; }
#btnHintCounty:hover:enabled { background: #0f7a4c; transform: scale(1.04); }
#btnHintCounty:disabled { background: #333; cursor: not-allowed; opacity: 0.6; }
#btnHintExtraGuess { bottom: 88px; background: #5b21b6; }
#btnHintExtraGuess:hover:enabled { background: #6d28d9; transform: scale(1.04); }
#btnHintExtraGuess:disabled { background: #333; cursor: not-allowed; opacity: 0.6; }

/* Info box */
#info {
  position: absolute;
  bottom: 10px; left: 10px;
  background: var(--info-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--info-text);
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  z-index: 1000;
  min-width: 155px; max-width: 52vw;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  border: 1px solid var(--info-box-border);
  line-height: 1.4;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
#playerTurnLine {
  font-size: 0.95rem; font-weight: 700; color: var(--info-turn-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.game-estimate {
  font-size: 0.78rem; color: var(--text-muted);
  min-height: 1.1em; margin: 0.15rem 0 0.3rem;
  line-height: 1.3;
}
.game-estimate.ok   { color: #4ade80; }
.game-estimate.warn { color: #f59e0b; }
#roundInfo { font-size: 0.72rem; color: var(--info-muted); margin: 0.08rem 0 0.1rem; }
#timerDisplay {
  font-size: 0.9rem; font-weight: 700;
  color: var(--info-turn-color);
  min-height: 1.2em; margin-bottom: 0.1rem;
}
#timerDisplay.timer-urgent { color: #e53935; animation: timerPulse 0.5s infinite alternate; }
@keyframes timerPulse { to { opacity: 0.45; } }
#feedback { font-size: 0.85rem; min-height: 1.1em; }
#scoreboard {
  font-size: 0.76rem; color: var(--info-score);
  margin-top: 0.28rem; padding-top: 0.28rem;
  border-top: 1px solid var(--info-divider);
  line-height: 1.55;
}
/* Scale bar */
.maplibregl-ctrl-scale {
  background: rgba(0, 0, 0, 0.55);
  border-color: #ccc;
  border-top: none;
  color: #eee;
  font-size: 0.72rem;
  padding: 1px 4px;
}
body.light-mode .maplibregl-ctrl-scale {
  background: rgba(255, 255, 255, 0.75);
  border-color: #555;
  color: #222;
}
/* Scale bar sits in the top-left corner, below the topbar, above all game UI */
.maplibregl-ctrl-top-left {
  z-index: 1001;
}
/* Hide the round-info box and scale bar until a round is actually active
   (e.g. while the start or end screen is showing). */
body:not(.in-game) #info,
body:not(.in-game) .maplibregl-ctrl-top-left {
  display: none;
}

.distance-label {
  background: rgba(255,255,255,0.85); color: #222;
  padding: 2px 6px; border-radius: 4px; font-size: 0.82rem;
}

/* End Screen */
#endScreen {
  position: absolute;
  top: 50px; left: 0; right: 0; bottom: 0;
  background: var(--screen-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 900;
  transition: background 0.3s;
}
#endScreen.hidden { display: none; }
#endContent {
  text-align: center;
  padding: 2rem 2.5rem;
  background: var(--screen-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid var(--screen-card-border);
  max-width: 420px; width: 90%;
  color: var(--screen-text);
  transition: background 0.3s, border-color 0.3s;
}
.end-trophy { font-size: 3.5rem; margin-bottom: 0.2rem; }
#endContent h2 { font-size: 1.6rem; margin: 0.3rem 0 1rem; }
#endScoreboard { margin: 0 0 1.2rem; text-align: left; }
.end-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem; border-radius: 8px; margin: 0.3rem 0;
  background: var(--end-row-bg);
}
.end-row.end-winner {
  background: var(--end-winner-bg);
  border: 1px solid var(--end-winner-border);
}
.end-medal { font-size: 1.1rem; flex-shrink: 0; }
.end-name  { flex: 1; font-weight: 600; }
.end-dist  { font-size: 0.85rem; color: var(--end-dist-color); flex-shrink: 0; }
#btnPlayAgain {
  background: #ce2939; color: #fff; border: none;
  padding: 0.75rem 2.2rem; font-size: 1.1rem; font-weight: bold;
  border-radius: 8px; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#btnPlayAgain:hover { background: #e63349; transform: scale(1.04); }

/* Player name inputs */
.player-name-row { display: flex; align-items: center; gap: 0.35rem; margin: 0.2rem 0; }
.player-name-label { min-width: 58px; font-size: 0.82rem; color: var(--player-label); flex-shrink: 0; }
.player-name-input {
  flex: 1; padding: 0.25rem 0.4rem;
  border: 1px solid var(--input-border); border-radius: 4px;
  font-size: 0.82rem; min-width: 0; box-sizing: border-box;
  background: var(--input-bg); color: var(--text-main);
}
.player-name-input::placeholder { color: var(--text-muted); }
.player-name-reroll {
  background: none; border: 1px solid var(--reroll-border);
  border-radius: 4px; padding: 0.15rem 0.3rem;
  cursor: pointer; font-size: 0.95rem; flex-shrink: 0;
  line-height: 1; transition: background 0.15s; color: var(--text-main);
}
.player-name-reroll:hover { background: var(--reroll-hover); }

/* Faster taps on mobile */
button, input, select, a { touch-action: manipulation; }

/* ── Tablet (≤ 768px) ───────────────────────────────────────── */
@media (max-width: 768px) {
  #settings { width: min(320px, 100%); }
}

/* ── Phone (≤ 480px) ────────────────────────────────────────── */
@media (max-width: 480px) {
  #topbar { padding: 0 0.5rem; }
  #topbar button { padding: 0.4rem 0.6rem; font-size: 0.9rem; }

  #settings { width: 100%; }
  #settings input[type="number"],
  #settings select { font-size: 1rem; padding: 0.4rem; }
  #settings .toggle { padding: 0.2rem 0; }
  #settings .toggle input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

  #info { font-size: 0.82rem; padding: 0.35rem 0.5rem; max-width: 60vw; bottom: 6px; left: 6px; }

  #startContent { padding: 1.5rem 1.2rem; width: 93%; }
  .start-icon { font-size: 2.8rem; }
  #startContent h2 { font-size: 1.4rem; }
  #startContent p { font-size: 0.9rem; margin-bottom: 1rem; }
  #btnStartScreen { font-size: 1rem; padding: 0.7rem 2rem; }

  #townNameDisplay { font-size: 1.3rem; padding: 0.35rem 1rem; top: 58px; }
  #btnGuess, #btnNext { bottom: 28px; right: 10px; padding: 0.6rem 1.2rem; font-size: 1rem; }
  #btnHintReroll { bottom: 166px; right: 10px; }
  #btnHintCounty { bottom: 120px; right: 10px; }
  #btnHintExtraGuess { bottom: 74px; right: 10px; }
}