:root {
  --bg: #11161c;
  --panel: rgba(17, 22, 28, 0.88);
  --edge: rgba(255, 255, 255, 0.16);
  --text: #f2f5f8;
  --muted: #9fb0c0;
  --accent: #6eb7f0;
  --good: #7ddba4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

/* ---- Panorama fills the viewport; everything else floats on top ---- */
#pano {
  position: fixed;
  inset: 0;
  background: #0b0f14;
}

.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 500;
}
.hud > * { pointer-events: auto; }

.room-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: .22em;
  font-weight: 700;
  font-size: 20px;
  padding: 4px 10px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--panel);
}
.hud-label { color: var(--muted); font-size: 13px; }
.timer { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.urgent { color: #ff8a8a; }
/* Armed but not ticking: the round is waiting for everyone's panorama to render.
   The number shown is the round's full length, frozen, so it has to look
   inactive -- a solid figure that is not moving reads as a stuck clock. */
.timer.waiting { color: var(--muted); opacity: .65; }

.dots { display: flex; gap: 6px; margin-left: auto; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 1px solid var(--edge);
}
.dot.in { background: var(--good); }

/* ---- Inset minimap: the GeoGuessr-style corner map ---- */
#minimap-wrap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 600;
  width: 260px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  /* Grow on hover/focus so the map is small while you look around and big
     while you aim. Transitioning width/height (not transform) keeps Leaflet's
     tile math honest -- a CSS scale() would make clicks land in the wrong place. */
  transition: width .18s ease, height .18s ease;
}
#minimap-wrap:hover, #minimap-wrap.pinned { width: 44vw; height: 46vh; }

/* There is nothing to aim at in the lobby or on the final scores, and the inset
   sits at z-index 600 -- above the sheet -- so leaving it up there put it over
   the scoreboard. Hidden outright rather than sent behind: the hover-expand
   would otherwise still fire from a mouse crossing the scores. */
#minimap-wrap.hidden { display: none; }
#minimap { width: 100%; height: 100%; }

.map-actions {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
  z-index: 620;
}
button.lg {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: var(--accent);
  color: #06121d;
  font-weight: 700;
  cursor: pointer;
  /* Not decoration: without a hover state the button gives no sign it is live
     until it is clicked, which on the one irreversible control in the game
     leaves you unsure whether you are about to be able to press it. */
  transition: background-color .12s ease, filter .12s ease, transform .06s ease;
}
button.lg:hover:not([disabled]) { filter: brightness(1.12); }
button.lg:active:not([disabled]) { transform: translateY(1px); filter: brightness(.95); }
button.lg:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
button.lg[disabled] { background: #45525e; color: #93a3b1; cursor: not-allowed; }
button.lg.ghost { background: var(--panel); color: var(--text); }

/* ---- Centre overlays: join screen, reveal, final ---- */
.sheet {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 14, .82);
  backdrop-filter: blur(6px);
  z-index: 900;
}
.card {
  width: min(560px, 92vw);
  max-height: 86vh; overflow: auto;
  background: #151c24;
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 24px;
}
.card h1 { margin: 0 0 4px; font-size: 26px; }
.card p.sub { margin: 0 0 18px; color: var(--muted); }
.card input, .card select {
  width: 100%; padding: 10px 12px; margin-bottom: 10px;
  border-radius: 8px; border: 1px solid var(--edge);
  background: #0e141a; color: var(--text); font-size: 15px;
}
.err { color: #ff9c9c; min-height: 20px; font-size: 14px; }
table.scores { width: 100%; border-collapse: collapse; }
table.scores td, table.scores th { padding: 7px 4px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); }
table.scores td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The reveal is NOT a .sheet: a full-screen overlay would blur and swallow
   clicks on the inset map, which is precisely what the player wants to look at
   while the line from their pin to the true spot is on screen. */
.panel-left {
  position: fixed;
  left: 20px; bottom: 20px;
  width: min(460px, 42vw);
  max-height: 70vh; overflow: auto;
  z-index: 700;
}
/* .card defaults to min(560px, 92vw), which is WIDER than this panel and so
   clipped the Score column clean off. Inside the panel the card is the panel. */
.panel-left .card { width: 100%; }

.hide { display: none !important; }

/* ---- Locked-in guess ----
   Locking in is irreversible AND collapses the clock for everyone else, so it
   gets a state rather than a toast: a toast is gone in three seconds and the
   player is left unsure whether it registered. The green rim reads at a glance
   from across the screen while you are still looking at the panorama. */
#minimap-wrap.locked {
  border-color: var(--good);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 45%, transparent),
              0 10px 30px rgba(0,0,0,.55);
}
button.lg.locked,
button.lg.locked:disabled {
  background: var(--good);
  color: #06121d;
  opacity: 1;            /* override the generic :disabled dimming */
  cursor: default;
  letter-spacing: .02em;
}