/* ================================================================== */
/*  RESET & BASE                                                       */
/* ================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #1a1a2e;
  color: #eee;
  overflow: hidden;
}

/* ================================================================== */
/*  SCREENS                                                            */
/* ================================================================== */
.screen {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.screen.active { display: flex; }

/* ================================================================== */
/*  START SCREEN                                                       */
/* ================================================================== */
#start-screen {
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(24px, 6vh, 80px) 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.start-card {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 500px;
  width: 90%;
  text-align: center;
}

.start-card h1 { font-size: 2rem; margin-bottom: 8px; }
.subtitle { color: #aaa; margin-bottom: 28px; font-size: .95rem; }

.form-group {
  margin-bottom: 18px;
  text-align: left;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: .85rem;
  color: #ccc;
}
.form-group select,
.form-group input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #eee;
  font-size: .95rem;
  outline: none;
}
.form-group select option {
  background: #1a1a2e;
  color: #eee;
}
.form-group select:focus,
.form-group input:focus {
  border-color: #e94560;
}
.form-group-checkbox {
  display: flex;
  align-items: center;
}
.form-group-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .9rem;
  color: #ccc;
  margin-bottom: 0;
}
.form-group-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #e94560;
  cursor: pointer;
}

/* ================================================================== */
/*  BUTTONS                                                            */
/* ================================================================== */
.btn {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: #e94560;
  color: #fff;
  width: 100%;
  margin-top: 10px;
}
.btn-primary:hover { background: #d63851; }

.btn-guess {
  background: #e94560;
  color: #fff;
  width: 100%;
  margin-top: 6px;
  font-size: .95rem;
  padding: 14px 0;
}
.btn-guess:disabled {
  background: #555;
  cursor: default;
}

/* ================================================================== */
/*  GAME SCREEN                                                        */
/* ================================================================== */
#game-screen { display: none; }
#game-screen.active { display: block; }

#street-view {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

#game-screen { cursor: crosshair; }

/* Timer — top-left, below API counter */
#timer-bar {
  position: absolute;
  top: 30px;
  left: 8px;
  background: rgba(0,0,0,0.65);
  padding: 12px 48px 16px;
  border-radius: 32px;
  font-size: 2.6rem;
  font-weight: bold;
  z-index: 10;
  pointer-events: none;
  min-width: 180px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mp-round-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #aaa;
  margin-bottom: 2px;
}

/* ================================================================== */
/*  COMPASS BAR                                                        */
/* ================================================================== */
#compass-bar {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
}

#compass-viewport {
  width: 320px;
  height: 28px;
  overflow: hidden;
  background: rgba(0,0,0,0.55);
  border-radius: 14px;
  position: relative;
}

#compass-strip {
  display: flex;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  align-items: center;
  will-change: transform;
}

#compass-strip span {
  display: inline-block;
  width: 40px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: bold;
  color: #ccc;
  flex-shrink: 0;
}
#compass-strip span:nth-child(16n+1) { color: #e94560; } /* N markers red */

#compass-needle {
  color: #e94560;
  font-size: 0.7rem;
  margin-top: -2px;
  text-align: center;
}

/* ================================================================== */
/*  MINI-MAP (guess map overlay)                                       */
/* ================================================================== */
#mini-map-wrapper {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 10;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.25);
  transition: width .3s ease, height .3s ease, opacity .3s ease;
  background: #222;
  display: flex;
  flex-direction: column;
}

/* Collapsed (mini) state */
#mini-map-wrapper.mini {
  width: 22vw;
  height: 22vh;
  opacity: 0.70;
}

/* We no longer use pure-CSS :hover for expand — JS handles it */

#guess-map {
  flex: 1;
  width: 100%;
}

/* ---- Resize control buttons ---- */
#map-resize-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.resize-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  color: #eee;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  line-height: 1;
}
.resize-btn:hover { background: rgba(233,69,96,0.8); }

/* ================================================================== */
/*  TIMER GLOW                                                         */
/* ================================================================== */
#timer-bar.glow {
  animation: timer-glow 0.7s ease-in-out infinite alternate;
}
@keyframes timer-glow {
  from { box-shadow: 0 0 8px 2px rgba(233,69,96,0.5); background: rgba(0,0,0,0.65); color: #eee; }
  to   { box-shadow: 0 0 20px 8px rgba(233,69,96,0.9); background: rgba(180,30,50,0.75); color: #fff; }
}

/* Full-viewport red vignette when time is running out */
#game-screen.time-warning::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  animation: viewport-glow 0.7s ease-in-out infinite alternate;
}
@keyframes viewport-glow {
  from { box-shadow: inset 0 0 80px 30px rgba(233,69,96,0.25); }
  to   { box-shadow: inset 0 0 140px 60px rgba(233,69,96,0.55); }
}

/* ================================================================== */
/*  RESULT SCREEN                                                      */
/* ================================================================== */
#result-screen {
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(24px, 6vh, 80px) 0;
  background: rgba(0,0,0,0.85);
}

#result-card {
  background: #16213e;
  border-radius: 16px;
  padding: 32px;
  max-width: 700px;
  width: 92%;
  text-align: center;
}

#result-card h2 { margin-bottom: 16px; }

#result-map {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  margin-bottom: 18px;
}

#result-details { margin-bottom: 28px; }
#result-details p { font-size: 1.1rem; margin: 4px 0; }

#play-again-btn { max-width: 260px; margin: 0 auto; display: block; }

/* ================================================================== */
/*  LOADING OVERLAY                                                    */
/* ================================================================== */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(26,26,46,0.92);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #eee;
  font-size: 1.2rem;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255,255,255,0.15);
  border-top-color: #e94560;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-bottom: 18px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================== */
/*  API CALL COUNTER                                                   */
/* ================================================================== */
/* ---- Keyboard shortcuts overlay ---- */
#shortcuts-overlay {
  position: absolute;
  bottom: 24px;
  left: 8px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 14px;
  border-radius: 6px;
  line-height: 1.8;
  pointer-events: none;
  z-index: 20;
}
#shortcuts-overlay kbd {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 5px;
  font-family: inherit;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.9);
}

#api-counter {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(0,0,0,0.5);
  color: #aaa;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  font-family: monospace;
}

/* ================================================================== */
/*  BUTTON GROUPS (Rounds, Movement, Match Type)                       */
/* ================================================================== */
.btn-group {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.btn-option {
  padding: 8px 18px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #ccc;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  flex: 1;
  text-align: center;
}
.btn-option:hover {
  border-color: rgba(233,69,96,0.5);
  color: #fff;
}
.btn-option.selected {
  border-color: #e94560;
  background: rgba(233,69,96,0.12);
  color: #fff;
}
.btn-option.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ================================================================== */
/*  RANGE SLIDER (Time Limit)                                          */
/* ================================================================== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
  outline: none;
  margin-top: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e94560;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
  transition: transform .15s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e94560;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
}

/* ================================================================== */
/*  MULTIPLAYER — BUTTONS                                              */
/* ================================================================== */
.btn-secondary {
  background: rgba(255,255,255,0.12);
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.2);
  width: 100%;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.divider {
  display: flex;
  align-items: center;
  margin: 18px 0 10px;
  color: #666;
  font-size: .85rem;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.divider span { padding: 0 12px; }

/* ================================================================== */
/*  JOIN MATCH SCREEN                                                  */
/* ================================================================== */
#join-match-screen {
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(24px, 6vh, 80px) 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* ================================================================== */
/*  LOBBY SCREEN                                                       */
/* ================================================================== */
#lobby-screen {
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(24px, 6vh, 80px) 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.lobby-card {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 720px;
  width: 92%;
  text-align: center;
}

.lobby-card h1 { font-size: 1.6rem; margin-bottom: 12px; }

.lobby-config {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.cfg-badge {
  background: rgba(233,69,96,0.2);
  color: #e94560;
  border: 1px solid rgba(233,69,96,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .8rem;
  font-weight: 600;
}

.lobby-share {
  margin-bottom: 16px;
  text-align: left;
}
.lobby-share label {
  font-size: .82rem;
  color: #aaa;
  margin-bottom: 4px;
  display: block;
}
.share-row {
  display: flex;
  gap: 8px;
}
.share-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #ddd;
  font-size: .85rem;
}
.btn-small {
  padding: 8px 16px;
  font-size: .82rem;
  border-radius: 8px;
  background: #e94560;
  color: #fff;
  border: none;
  cursor: pointer;
}
.btn-small:hover { background: #d63851; }

/* Lobby teams display */
.lobby-teams {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}

.lobby-team-col {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 12px;
}
.lobby-team-col h3 { font-size: .95rem; margin-bottom: 8px; }
.lobby-team-red { border: 1px solid rgba(233,69,96,0.4); }
.lobby-team-blue { border: 1px solid rgba(66,165,245,0.4); }
.lobby-team-purple { border: 1px solid rgba(149,1,229,0.4); }

.lobby-teams ul, .lobby-player-list {
  list-style: none;
  text-align: left;
}
.lobby-teams li, .lobby-player-list li {
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: .9rem;
  background: rgba(255,255,255,0.04);
}
.lobby-teams li.ready, .lobby-player-list li.ready {
  background: rgba(0,200,83,0.12);
  color: #69f0ae;
}

/* Team selection buttons */
.lobby-team-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}
.btn-team {
  padding: 8px 24px;
  border-radius: 8px;
  font-size: .9rem;
  cursor: pointer;
  border: 2px solid;
}
.btn-red {
  background: rgba(233,69,96,0.15);
  color: #e94560;
  border-color: rgba(233,69,96,0.4);
}
.btn-red:hover { background: rgba(233,69,96,0.3); }
.btn-blue {
  background: rgba(66,165,245,0.15);
  color: #42a5f5;
  border-color: rgba(66,165,245,0.4);
}
.btn-blue:hover { background: rgba(66,165,245,0.3); }
.btn-purple {
  background: rgba(149,1,229,0.15);
  color: #ba5cf9;
  border-color: rgba(149,1,229,0.4);
}
.btn-purple:hover { background: rgba(149,1,229,0.3); }

.lobby-actions {
  margin-bottom: 12px;
}

.btn-ready-active {
  background: #43a047 !important;
}
.btn-ready-active:hover {
  background: #388e3c !important;
}

.lobby-status {
  color: #888;
  font-size: .85rem;
  margin-top: 8px;
}

/* ================================================================== */
/*  MULTIPLAYER — GAME OVERLAYS                                        */
/* ================================================================== */
.mp-banner {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(0,200,83,0.85);
  color: #fff;
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 1rem;
  font-weight: 600;
  pointer-events: none;
  animation: mp-banner-in .3s ease;
}

.mp-opponent-banner {
  background: rgba(233,69,96,0.85);
  top: 100px;
}

.mp-pressure-banner {
  background: rgba(255,152,0,0.9);
  top: 145px;
  animation: mp-pulse .6s ease-in-out infinite alternate;
}

.mp-connection-banner {
  top: 50px;
  font-size: 1.1rem;
  padding: 12px 28px;
}

/* "X lost connection" — amber */
.mp-connection-lost {
  background: rgba(230,120,0,0.93);
}

/* "X reconnected" — prominent green, slightly larger */
.mp-connection-reconnected {
  background: rgba(0,190,70,0.95);
  font-size: 1.15rem;
}

@keyframes mp-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes mp-pulse {
  from { box-shadow: 0 0 6px rgba(255,152,0,0.4); }
  to   { box-shadow: 0 0 20px rgba(255,152,0,0.9); }
}

/* ================================================================== */
/*  MULTIPLAYER — ROUND RESULT OVERLAY                                 */
/* ================================================================== */
#mp-round-result {
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(24px, 6vh, 80px) 0;
  background: rgba(0,0,0,0.88);
}

.result-card-mp {
  background: #16213e;
  border-radius: 16px;
  padding: 28px;
  max-width: 680px;
  width: 92%;
  text-align: center;
}

.result-card-mp h2 { margin-bottom: 12px; }

.mp-rr-map {
  width: 100%;
  height: 280px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.mp-rr-player {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 3px;
  font-size: .9rem;
  background: rgba(255,255,255,0.04);
}
.mp-rr-me {
  background: rgba(233,69,96,0.15);
  font-weight: 600;
}

.mp-rr-team {
  padding: 6px 12px;
  border-radius: 6px;
  margin: 4px 0;
  font-size: .9rem;
}
.mp-rr-team-red { background: rgba(233,69,96,0.12); color: #e94560; }
.mp-rr-team-blue { background: rgba(66,165,245,0.12); color: #42a5f5; }
.mp-rr-team-purple { background: rgba(149,1,229,0.12); color: #ba5cf9; }

.mp-rr-winner {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 10px 0 6px;
  color: #39ff14;
}

.mp-rr-next {
  color: #888;
  font-size: .82rem;
  margin-top: 10px;
}

#mp-rr-ready-section {
  margin-top: 12px;
  text-align: center;
}

#mp-rr-ready-btn {
  margin-bottom: 10px;
}

.mp-rr-ready-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.mp-rr-ready-list li {
  background: rgba(255,255,255,0.07);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: .82rem;
  color: #aaa;
  transition: all 0.2s;
}

.mp-rr-ready-list li.ready {
  color: #4caf50;
  background: rgba(76,175,80,0.12);
}

/* ================================================================== */
/*  MATCH RESULT SCREEN                                                */
/* ================================================================== */
#match-result-screen {
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(24px, 6vh, 80px) 0;
  background: rgba(0,0,0,0.9);
}

.match-result-card {
  background: #16213e;
  border-radius: 16px;
  padding: 36px;
  max-width: 550px;
  width: 92%;
  text-align: center;
}

.match-result-card h1 { margin-bottom: 18px; font-size: 1.6rem; }

.mp-match-winner {
  font-size: 1.3rem;
  margin-bottom: 18px;
  padding: 12px;
  background: rgba(57,255,20,0.07);
  border: 1px solid rgba(57,255,20,0.25);
  border-radius: 10px;
  color: #39ff14;
}

.mp-score-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.mp-score-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: #aaa;
  font-size: .82rem;
  font-weight: 600;
}
.mp-score-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: .92rem;
}
.mp-me-row td { font-weight: 700; }

.team-label-red { color: #e94560; }
.team-label-blue { color: #42a5f5; }
.team-label-purple { color: #ba5cf9; }
.team-label-coop { color: #69f0ae; }

/* ================================================================== */
/*  SCORE PROGRESS BAR                                                 */
/* ================================================================== */
.score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.score-bar {
  flex: 1;
  height: 20px;
  border-radius: 4px;
  position: relative;
}
.score-bar-fill {
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  transition: width 0.3s ease;
}
.score-bar-label {
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  padding: 0 8px;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.65),
     1px -1px 0 rgba(0,0,0,0.65),
    -1px  1px 0 rgba(0,0,0,0.65),
     1px  1px 0 rgba(0,0,0,0.65);
}
.score-bar-max {
  color: #888;
  font-size: .82rem;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.score-bar-wrap.large .score-bar {
  overflow: visible;
}
.score-bar-wrap.large .score-bar-fill {
  height: 30px;
  margin-top: -5px;
}
.score-bar-wrap.large .score-bar-label {
  font-size: 1.15rem;
}

.score-bar-prefix {
  white-space: nowrap;
  color: inherit;
  font-size: .85rem;
  flex-shrink: 0;
  min-width: 5rem;
}
.score-bar-prefix--large {
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 5rem;
}


.dist-ruler {
  position: relative;
  cursor: default;
  display: inline-block;
}
.dist-ruler::after {
  content: attr(data-dist);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: .78rem;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 999;
}
.dist-ruler:hover::after {
  opacity: 1;
}

/* ================================================================== */
/*  ROUND BREAKDOWN (finished match view)                              */
/* ================================================================== */
.round-breakdown {
  margin-bottom: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
}
.round-breakdown summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: .9rem;
  user-select: none;
}
.round-breakdown summary:hover { background: rgba(255,255,255,0.06); }
.round-detail-table { margin: 0; }

/* ================================================================== */
/*  DEBUG OVERLAY                                                       */
/* ================================================================== */
.hidden { display: none !important; }

#debug-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#debug-modal {
  background: #1e1e2e;
  color: #e0e0e0;
  border-radius: 10px;
  padding: 20px 24px;
  width: 90%;
  max-width: 520px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#debug-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
}

#debug-close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
#debug-close-btn:hover { color: #fff; }

#debug-params {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.debug-param {
  display: contents;
}

.debug-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 0;
}

.debug-value {
  font-size: 0.88rem;
  color: #e0e0e0;
  font-weight: 500;
  padding: 2px 0;
}

#debug-location-link {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  color: #64b5f6;
  word-break: break-all;
  text-decoration: underline;
}
#debug-location-link:hover { color: #90caf9; }

#debug-map {
  height: 260px;
  border-radius: 6px;
  overflow: hidden;
  background: #333;
}

/* ================================================================== */
/*  TOUCH SPLIT-SCREEN LAYOUT                                          */
/* ================================================================== */

/* Override display:block set by #game-screen.active when in touch mode */
#game-screen.active.touch-mode {
  display: flex;
  flex-direction: column;
}
#game-screen.active.touch-mode.split-vertical {
  flex-direction: row;
}

/* Street view becomes a flex child in touch mode */
#game-screen.touch-mode #street-view {
  flex: 0 0 60%; /* JS overrides flex-basis via style.flexBasis */
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  cursor: default;
}

/* Guess map wrapper: always visible, static (no absolute overlay) */
#game-screen.touch-mode #mini-map-wrapper {
  position: static;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  border-radius: 0;
  border: none;
  border-top: 2px solid rgba(255,255,255,0.15);
  transition: none;
  bottom: auto;
  right: auto;
}
#game-screen.touch-mode.split-vertical #mini-map-wrapper {
  border-top: none;
  border-left: 2px solid rgba(255,255,255,0.15);
}

/* Hide resize buttons and keyboard shortcuts overlay on touch */
#game-screen.touch-mode #map-resize-controls { display: none; }
#game-screen.touch-mode #shortcuts-overlay   { display: none; }

/* Push timer down in touch mode so compass doesn't overlap it */
#game-screen.touch-mode #timer-bar { top: 62px; }

/* ---- Draggable split handle ---- */
#split-handle {
  display: none; /* shown only in touch mode below */
  flex: 0 0 4px;
  background: rgba(255,255,255,0.28);  /* the visible line */
  touch-action: none;
  user-select: none;
  position: relative;
  z-index: 200; /* above Google Maps internal overlays */
  overflow: visible;
}

/* Grab rectangle: overflows both sides of the 4px line.
   Horizontal split — 2:1 (wide): 96 × 48 px */
#split-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 48px;
  border-radius: 14px;
  background: rgba(140,140,140,0.90);
}

#game-screen.touch-mode #split-handle {
  display: block;
  cursor: row-resize;
}
#game-screen.touch-mode.split-vertical #split-handle {
  cursor: col-resize;
}
/* Vertical split — 1:2 (tall): 48 × 96 px */
#game-screen.touch-mode.split-vertical #split-handle::after {
  width: 48px;
  height: 96px;
  border-radius: 14px;
  transform: translate(-50%, -50%);
}

/* ---- Orientation toggle button (bottom-left, replaces shortcuts overlay) ---- */
#split-orientation-btn {
  display: none; /* shown only in touch mode below */
  position: absolute;
  bottom: 24px;
  left: 8px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background .2s;
  padding: 0;
}
#game-screen.touch-mode #split-orientation-btn {
  display: flex;
}
#split-orientation-btn:active { background: rgba(233,69,96,0.70); }

/* ---- Undo / Reset touch buttons (same style, stacked above orientation btn) ---- */
#touch-undo-btn,
#touch-reset-btn {
  display: none; /* shown only in touch mode below */
  position: absolute;
  left: 8px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background .2s;
  padding: 0;
}
#touch-reset-btn { bottom: 76px; }   /* one slot above orientation btn */
#touch-undo-btn  { bottom: 128px; }  /* two slots above orientation btn */

#game-screen.touch-mode #touch-undo-btn,
#game-screen.touch-mode #touch-reset-btn {
  display: flex;
}
#touch-undo-btn:active,
#touch-reset-btn:active { background: rgba(233,69,96,0.70); }