* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, "PingFang HK", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  background: #f4f1ea;
  color: #222;
}

header {
  background: #8c2f2f;
  color: #fff;
  text-align: center;
  padding: 16px 12px;
  position: relative;
}

header h1 { margin: 0; font-size: 2rem; letter-spacing: 0.1em; }
header .subtitle { margin: 4px 0 0; opacity: 0.9; }

/* Hamburger button + menu (v2.1, feature #5) */
#btn-menu {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
  font-size: 1.2rem;
}
#menu {
  position: absolute;
  top: 100%;
  left: 12px;
  z-index: 100;
  width: 260px;
  max-width: calc(100vw - 24px);
  background: #fff;
  color: #222;
  text-align: left;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 10px 12px 14px;
}
.menu-heading { font-size: 0.8rem; color: #999; letter-spacing: 0.08em; margin: 10px 4px 4px; }
.menu-heading:first-child { margin-top: 0; }
#menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #222;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 1rem;
}
#menu button:hover { background: #f4f1ea; }
#menu button:disabled { color: #aaa; cursor: not-allowed; background: transparent; }
#menu-profile { padding: 4px 10px 0; font-size: 0.95rem; }
#menu-profile .hint { margin: 6px 0 0; }
/* Settings toggles in the profile/account section (v2.2, features #17/#19) */
#profile-settings { margin-top: 6px; }
.setting-row { display: block; padding: 9px 10px; cursor: pointer; }
.setting-row input { width: auto; margin-right: 8px; vertical-align: middle; }
#profile-name {
  width: 100%;
  font-size: 1rem;
  padding: 8px 10px;
  margin: 4px 0 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#profile-display { font-weight: bold; margin-right: 8px; }

/* v2.1 (#13): the map area goes wide (like GeoSports); the text column
   stays narrow. main is 1200px; the text blocks are capped at 760px. */
main { max-width: 1200px; margin: 0 auto; padding: 16px 12px 32px; }
#screen-select, #screen-results, #screen-stats, #screen-about, #clue-card, #reveal, footer { max-width: 760px; margin-left: auto; margin-right: auto; }

#clue-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

#clue-meta { font-size: 0.85rem; color: #777; margin-bottom: 6px; }
#clue-text { margin: 0; font-size: 1.15rem; line-height: 1.6; }
#timer-row { margin: 8px 0 0; font-size: 1.05rem; }
#timer-line { font-weight: bold; }
#timer-line.timer-low { color: #c0392b; }
#timer-note { color: #c0392b; margin-left: 8px; }

/* Game-select screen (v2) */
#screen-select .game-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.game-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 16px; font-size: 1.25rem; width: 100%; }
.game-btn .game-meta { font-size: 0.9rem; opacity: 0.85; }
#btn-back-select { background: #fff; color: #8c2f2f; border: 1px solid #8c2f2f; }

#map { height: 560px; border-radius: 10px; border: 1px solid #ccc; z-index: 0; }

/* Map wrapper + live score box (v2.1, feature #1) */
#map-wrap { position: relative; }
#score-box {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(20, 20, 20, 0.8);
  color: #fff;
  font-weight: bold;
  font-size: 1.05rem;
  padding: 8px 14px;
  border-radius: 999px;
  pointer-events: none;
}

/* Lock button overlaid on the map (v2.2, feature #18): bottom-centre, so
   it is always visible without scrolling and never covers the score box
   (top-right). Shown only in confirm mode, after a pin is placed. */
#btn-lock {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

@media (max-width: 640px) {
  #map { height: 420px; }
  #score-box { font-size: 0.95rem; padding: 6px 12px; }
}

.hint { font-size: 0.9rem; color: #666; line-height: 1.5; }

.actions { margin: 14px 0; text-align: center; }

button {
  font-size: 1.05rem;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: #8c2f2f;
  color: #fff;
  cursor: pointer;
}

button:disabled { background: #bbb; cursor: not-allowed; }

#reveal {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
}

#reveal-feedback { font-size: 1.25rem; font-weight: bold; margin: 0 0 6px; }
#reveal-place { font-size: 1.1rem; font-weight: bold; margin: 0 0 6px; }
#reveal-distance, #reveal-time, #reveal-score { margin: 4px 0; }
#reveal-story { line-height: 1.6; margin: 10px 0 4px; }
#reveal-source { font-size: 0.85rem; color: #777; margin: 0; }

#screen-results h2 { text-align: center; }
#total-score { text-align: center; font-size: 1.6rem; font-weight: bold; }

.result-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.result-row .q-label { width: 64px; flex-shrink: 0; }
.result-row .bar-wrap { flex: 1; background: #e3ded2; border-radius: 6px; overflow: hidden; height: 18px; }
.result-row .bar { height: 100%; background: #8c2f2f; }
.result-row .q-score { width: 132px; text-align: right; flex-shrink: 0; }

#streak-line, #stats-line, #countdown-line { text-align: center; }

footer { margin-top: 28px; font-size: 0.85rem; color: #777; line-height: 1.5; }

/* Provisional (orange) guess pin, answer (green) pin, locked guess (blue) pin.
   The outer .pin-wrap is the MapLibre marker element (MapLibre sets its
   transform for placement); the inner .pin keeps the teardrop rotation. */
.pin-wrap { width: 22px; height: 22px; }
.pin {
  width: 22px; height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.pin-orange { background: #f59e0b; }
.pin-green { background: #16a34a; }
.pin-blue { background: #2563eb; }

/* Stats page (v2.1, feature #11): 7-day bar chart, plain CSS bars */
#stats-chart { display: flex; align-items: flex-end; gap: 8px; height: 170px; margin: 16px 0 8px; }
.stat-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.stat-bar { width: 100%; max-width: 48px; background: #8c2f2f; border-radius: 6px 6px 0 0; }
.stat-bar-empty { background: #e3ded2; }
.stat-label { font-size: 0.8rem; color: #666; margin-top: 6px; white-space: nowrap; }
#stats-totals { text-align: center; line-height: 1.6; }
#screen-stats .actions button.active, #screen-about .actions button.active, #menu .actions button.active { background: #5e1f1f; }

/* About screen */
#screen-about h2, #screen-stats h2 { text-align: center; }
#about-howto, #about-scoring { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 14px 16px; margin: 12px 0; line-height: 1.6; }
#about-howto h3, #about-scoring h3 { margin: 0 0 6px; }