/* ---------- Brand: "Night safari" ----------
   Three main colours, defined once here and used everywhere:
   near-black background, amber accent, cream text. */
:root {
  --bg: #0B0D10;          /* near-black, behind the starfield */
  --amber: #FFA62B;       /* buttons, highlights and the logo */
  --amber-light: #FFC266; /* headings and labels on dark panels */
  --amber-dark: #E08C12;  /* pressed / darker amber */
  --cream: #F5EBDD;       /* main text */
  --muted: #A39B8F;       /* secondary text */
  --on-amber: #0B0D10;    /* text on amber or yellow */

  /* Score colours, tuned to sit with the amber: far / closer / very close or spot on */
  --heat-far: #E4573D;
  --heat-mid: #E9D24A;
  --heat-near: #48BF84;

  /* Dark glass panels */
  --glass: rgba(14, 16, 20, 0.66);
  --glass-strong: rgba(14, 16, 20, 0.9);
  --glass-solid: rgba(14, 16, 20, 0.82);
  --glass-border: rgba(245, 235, 221, 0.14);

  /* Small extras */
  --on-heat: #FFFFFF;      /* text on the green and red score colours */
  --pin-ring: #FFFFFF;     /* the white ring around pins on the globe */
  --map-label: #FFFFFF;    /* country names on the globe */
  --map-loading: #0B2438;  /* shown for a moment where map imagery is still loading */

  /* Older names used further down, pointed at the brand colours */
  --space: var(--bg);
  --sand: var(--cream);
  --sand-dark: var(--muted);
  --ink: var(--on-amber);
  --orange: var(--amber);
  --orange-light: var(--amber-light);
  --leaf: var(--amber-light);
  --green: var(--heat-near);
  --green-dark: var(--glass-strong);
  --pin: var(--amber); /* the "about to guess" pin */

  --header-h: 60px; /* the top bar's height */

  /* One font throughout */
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);
}
* { box-sizing: border-box; }

body {
  margin: 0;
  /* A starry night sky: each line below is one tiny star. The stars repeat in three
     tiles of different sizes (set in background-size) so the pattern doesn't look regular. */
  background-color: var(--space);
  background-image:
    /* tile 1 (233px) */
    radial-gradient(1px 1px at 25px 35px, #fff, transparent),
    radial-gradient(1px 1px at 140px 80px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 190px 190px, #fff, transparent),
    radial-gradient(1px 1px at 70px 160px, rgba(255, 255, 255, 0.5), transparent),
    /* tile 2 (347px) */
    radial-gradient(1px 1px at 300px 40px, rgba(200, 220, 255, 0.9), transparent),
    radial-gradient(1px 1px at 110px 250px, #fff, transparent),
    radial-gradient(2px 2px at 230px 310px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 20px 320px, rgba(255, 255, 255, 0.6), transparent),
    /* tile 3 (491px) */
    radial-gradient(1.5px 1.5px at 400px 120px, rgba(255, 240, 210, 0.9), transparent),
    radial-gradient(1px 1px at 180px 420px, #fff, transparent),
    radial-gradient(1px 1px at 460px 380px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 60px 470px, #fff, transparent);
  background-size:
    233px 233px, 233px 233px, 233px 233px, 233px 233px,
    347px 347px, 347px 347px, 347px 347px, 347px 347px,
    491px 491px, 491px 491px, 491px 491px, 491px 491px;
  color: var(--sand);
  font-family: var(--font-body);
  line-height: 1.45;
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* A dark, see-through panel with a soft blur behind it. */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
}

/* ---------- Header ---------- */

/* The header has no bar of its own: its pieces float over the globe as small glass
   shapes. The holder lets taps through to the globe; only the pieces catch them. */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* Three columns: the left buttons, the logo, the right buttons. The two side columns
     share the space equally, so the logo sits in the true centre of the screen. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: env(safe-area-inset-top) 12px 0;
  pointer-events: none;
}

.top-bar > * { pointer-events: auto; }
.top-bar > .header-group:first-child { justify-self: start; }
.top-bar > .header-group:last-child { justify-self: end; }

/* The logo, with the round / score bar hanging directly below it, so the two are
   always lined up. */
.header-centre {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The logo: pin-and-paw icon plus the wordmark, used in the top bar, the how-to-play
   screen and the results. In the top bar it sits on a glass pill. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cream);
  white-space: nowrap;
}

.brand-icon { width: 26px; height: 26px; flex: none; }
.brand-word { font-size: 1.25rem; line-height: 1; }
.brand-pin { color: var(--amber); }

.logo {
  padding: 6px 16px 6px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Bigger version on the how-to-play and results screens */
.brand-large { margin-bottom: 14px; gap: 10px; }
.brand-large .brand-icon { width: 36px; height: 36px; }
.brand-large .brand-word { font-size: 1.5rem; }
.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: var(--sand);
  fill: var(--sand);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, scale 0.12s;
}

.icon-btn:hover { background: var(--glass-strong); }

.emoji-btn { font-size: 1.05rem; }

.header-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 🔥 streak counter */
.streak-btn {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 10px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: var(--sand);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, scale 0.12s;
}

.streak-btn:hover { background: var(--glass-strong); }

.streak-btn .flame {
  display: inline-block;
  transform-origin: 50% 90%;
}

/* The flame flares up when the streak goes up. */
.streak-btn.flare .flame { animation: flare 0.9s ease-out; }

@keyframes flare {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.7) rotate(-8deg); filter: drop-shadow(0 0 8px var(--amber)); }
  60%  { transform: scale(0.9) rotate(5deg); }
  100% { transform: scale(1); }
}

/* ---------- Layout ---------- */

/* The globe fills the whole screen; everything else floats over it. (dvh adjusts for
   phone address bars; the vh line is a fallback for older browsers.) */
.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden; /* keeps the globe's glow inside the screen */
}

.map-area {
  position: absolute;
  inset: 0;
}

/* The space at the top taken by the floating header and score bar. */
:root { --top-space: calc(var(--header-h) + 46px); }

/* The map's zoom buttons sit below the floating header and score bar. */
.maplibregl-ctrl-top-right { top: var(--top-space); }

/* Hidden on screen but still read out by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A soft blue halo behind the globe, adding to MapLibre's own thin atmosphere so the
   glow shows up against the stars. game.js keeps it lined up with the globe. */
.globe-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 18px 4px rgba(120, 180, 255, 0.45),
    0 0 70px 22px rgba(70, 130, 255, 0.22);
}

/* ---------- Loading spinner (globe and photo) ---------- */

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

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

.globe-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  font-weight: 700;
  pointer-events: none;
}

/* ---------- Photo box (floats over the top-left of the globe) ---------- */

/* Just a holder with no background: the toggle button, the photo card and each hint
   card are separate glass cards with the globe showing between them. The holder lets
   taps through to the globe; only the cards catch them. */
.photo-box {
  position: absolute;
  top: var(--top-space);
  left: 12px;
  z-index: 2;
  --card-w: min(44vw, 260px); /* the photo card's width */
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.photo-box > * { pointer-events: auto; }

.photo-card {
  width: var(--card-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* "Hide clues" hides the photo card and the hint chips; the top row stays visible. */
.photo-box.photo-hidden .photo-card,
.photo-box.photo-hidden .clues { display: none; }

/* The top row: [Hide clues] [🔍 Zoom] [💡 Hint] then the hint tokens. It may be wider
   than the photo, but stops short of the map's zoom buttons on the right, wrapping if
   it has to. */
.clue-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 80px);
  pointer-events: none;
}

.clue-row > * { pointer-events: auto; }

/* Compact pill buttons, at least 40px tall so they're easy to tap. */
.pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--cream);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background 0.2s, scale 0.12s, opacity 0.2s;
}

.pill:hover:not(:disabled) { background: var(--glass-strong); border-color: var(--amber); }
.pill:active:not(:disabled) { scale: 0.95; }
.pill:disabled { opacity: 0.4; cursor: default; }

.tokens { cursor: default; padding: 0 12px; }

.photo-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  cursor: zoom-in;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.4s;
  user-select: none;
  pointer-events: none;
}

/* The photo always fills its box (trimming the edges if its shape differs), so there
   are never black bars. Once the round is revealed it's shown un-zoomed. */

/* Spinner while the photo loads */
.photo-frame .spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

.photo-frame.loading .spinner { display: block; }
.photo-frame.loading img { opacity: 0; }

/* Message if the photo can't be loaded */
.photo-error {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--green-dark);
}

.photo-frame.failed .photo-error { display: grid; }
.photo-frame.failed img { visibility: hidden; }

/* Full-screen photo: tap the photo to open, tap again to close. */
.photo-box.expanded { z-index: 100; }

/* (The card's blur would otherwise trap the full-screen photo inside the card.) */
.photo-box.expanded .photo-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.photo-box.expanded .photo-frame {
  --big: min(94vw, 900px, 113vh); /* 113vh keeps the 4:3 photo within 85% of the screen height */
  position: fixed;
  inset: 0;
  margin: auto;
  width: var(--big);
  height: calc(var(--big) * 0.75);
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

/* ---------- Score bar (top of the globe) ---------- */

/* A floating glass pill just below the header. */
.status-bar {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  /* If there are ever more chips than fit, they scroll sideways instead of wrapping. */
  overflow-x: auto;
  scrollbar-width: none;
}

.round-label { flex: none; }

.total-label {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--on-amber);
  font-family: var(--font-display);
  font-weight: 600;
}

/* One small chip per finished round, e.g. "① 3,710" */
.round-chips {
  display: flex;
  gap: 6px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.round-chips li {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}

/* ---------- Hint tokens, and the zoom / hint buttons ---------- */

.tokens-icons { display: inline-flex; gap: 2px; font-size: 1.1rem; }
.token.used { opacity: 0.25; filter: grayscale(1); }

/* A little pulse when a token is used. */
.tokens.bump .tokens-icons { animation: bump 0.45s ease-out; }

@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* "Did you know?" facts on the round result */
.know-title { font-weight: 800; color: var(--leaf); }

.risk-buttons { display: contents; }

/* ---------- Hint chips (revealed by the Hint button) ---------- */

.clues {
  width: var(--card-w);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.clues:empty { display: none; }

.clue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 14px; /* a pill when it's one line, a soft box when the text wraps */
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: left;
}

.clue-icon { flex: none; }

.clue strong {
  margin-right: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leaf);
}

/* A newly earned clue pops in. */
.clue.new { animation: clue-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

@keyframes clue-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.85); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Heat colours (shared by dots, list rows and chips) ---------- */

.heat-far  { background: var(--heat-far);  color: var(--on-heat); }
.heat-mid  { background: var(--heat-mid);  color: var(--ink); }
.heat-near { background: var(--heat-near); color: var(--on-heat); }
.heat-hit  { background: var(--green);     color: var(--on-heat); }

/* ---------- Buttons ---------- */

.btn {
  padding: 11px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--orange);
  color: var(--on-amber);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: scale 0.12s, filter 0.2s, background 0.2s, box-shadow 0.12s;
}

.btn:hover:not(:disabled) { filter: brightness(1.08); }

.btn:disabled {
  background: var(--glass-solid);
  color: var(--sand-dark);
  box-shadow: none;
  cursor: default;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--sand);
}

.btn-wide { width: 100%; }

.link-btn {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--orange-light);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* The press effect: buttons shrink slightly while held down. */
.btn:active:not(:disabled),
.icon-btn:active,
.link-btn:active {
  scale: 0.95;
}

.btn:active:not(:disabled) { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

/* The bar under the globe holding the guess button. */
/* The main button(s) float over the bottom of the globe, with no bar behind them, so
   the globe uses the whole screen. They sit just above the map credits line. The
   holder lets taps through to the globe; only the buttons themselves catch them. */
.action-bar {
  position: absolute;
  left: 50%;
  /* --credits-h is the map credits' current height, kept up to date by game.js. */
  bottom: calc(var(--credits-h, 24px) + 10px + env(safe-area-inset-bottom));
  z-index: 3;
  transform: translateX(-50%);
  width: min(400px, calc(100% - 96px));
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.action-bar .btn {
  flex: 1;
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.25);
}

.action-bar .btn:disabled {
  background: var(--glass-solid);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.action-bar .btn-ghost {
  flex: 0 0 auto;
  background: var(--glass-solid);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- Map ---------- */

#map {
  position: absolute;
  inset: 0;
  background: transparent; /* lets the stars on the page show around the globe */
}

/* Each marker on the globe is a holder (moved around by the map) with a dot inside
   (which we're free to animate). */
.map-dot {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid var(--pin-ring);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.map-pin { background: var(--pin); }

/* The red pin drops in with a little bounce. */
.map-dot.drop { animation: drop 0.5s ease-out both; }

@keyframes drop {
  0%   { transform: translateY(-32px) scale(0.6); opacity: 0; }
  55%  { transform: translateY(0) scale(1.1); opacity: 1; }
  75%  { transform: translateY(-6px) scale(0.97); }
  100% { transform: none; }
}

/* A wrong guess gives a quick shake. */
.map-dot.shake { animation: shake 0.5s ease-in-out; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* A correct guess sends out green ripples. */
.map-dot.ripple::before,
.map-dot.ripple::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 3px solid var(--heat-near);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 1.6s ease-out 3 both;
}

.map-dot.ripple::after { animation-delay: 0.5s; }

@keyframes ripple {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(5); opacity: 0; }
}

/* The "1,234 km · 3,210 pts" label shown on the globe after a guess. */
.map-label {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  color: var(--sand);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ---------- Slide-up panels (bonus round and results) ---------- */

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: min(560px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  background: var(--glass-solid); /* a little more solid than other glass, for easy reading */
  /* Closed: pushed below the screen and hidden. */
  transform: translate(-50%, 110%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.45s;
}

.sheet.open {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.sheet h2 { color: var(--leaf); font-size: 1.45rem; }

/* ---------- The day's results: a full screen in the glass style ---------- */

.results-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  padding: 56px 16px calc(24px + env(safe-area-inset-bottom));
  background: rgba(11, 13, 16, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  /* Closed: faded out and hidden. */
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
}

.results-screen.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s, transform 0.35s, visibility 0s;
}

.results-inner {
  width: min(520px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.results-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf);
}

/* The × sits in the top corner of the screen. */
.sheet-close.results-close {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  width: 42px;
  height: 42px;
  font-size: 1.6rem;
  border: 1px solid var(--glass-border);
}

.sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sand);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.sheet-close:hover { background: rgba(255, 255, 255, 0.22); }

.outcome {
  padding-right: 40px; /* room for the close button */
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

/* Points breakdown (one round) and the day's per-round list */
.breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  list-style: none;
  font-size: 0.9rem;
}

.result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.result-name { flex: 1; }
.result-points { font-family: var(--font-display); font-weight: 600; }

.final-score {
  font-family: var(--font-display);
  font-size: 1.1rem;
  opacity: 0.9;
}

.final-score strong {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--orange-light);
}

.results-extras { font-size: 0.85rem; font-weight: 700; opacity: 0.9; }

/* The confetti burst is drawn on a see-through canvas over the whole page. */
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 150;
  pointer-events: none;
}
.credit { font-size: 0.85rem; opacity: 0.9; }
.credit a { color: var(--leaf); }

/* Bonus round answer buttons */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn.choice {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: var(--sand);
  font-weight: 700;
}

.btn.choice:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); filter: none; }
.btn.choice:disabled { opacity: 0.55; }
.btn.choice.right { background: var(--heat-near); border-color: transparent; color: var(--on-heat); opacity: 1; }
.btn.choice.wrong { background: var(--heat-far); border-color: transparent; color: var(--on-heat); opacity: 1; }

#bonus-form { display: flex; gap: 8px; flex-wrap: wrap; }

#bonus-input {
  flex: 1 1 160px;
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--sand);
  font: inherit;
}

#bonus-input:focus { outline: none; border-color: var(--orange); }

.bonus-links { display: flex; justify-content: space-between; }

/* ---------- Pop-up panels (help and stats) ---------- */

dialog {
  width: min(92vw, 440px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 22px;
  background: var(--glass-strong);
  color: var(--sand);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

dialog h2 { color: var(--leaf); margin-bottom: 12px; font-size: 1.5rem; }
dialog h3 { margin: 16px 0 8px; font-size: 1.05rem; }
dialog ul { margin: 0 0 16px; padding-left: 20px; }
dialog li { margin-bottom: 8px; }

/* The three-line "How to play" */
dialog .help-list { padding: 0; list-style: none; }
dialog .help-list li { margin-bottom: 12px; font-size: 1.05rem; font-weight: 600; }

.chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  text-align: center;
}

.stat-row strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--leaf);
}

.stat-row span { font-size: 0.75rem; }

.stat-note { margin: 10px 0 16px; font-size: 0.8rem; text-align: center; opacity: 0.8; }

/* ---------- "Copied!" message ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--green-dark);
  color: var(--sand);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[hidden] { display: none !important; }

/* ---------- Phones ---------- */

@media (max-width: 600px) {
  :root { --header-h: 56px; }
  .top-bar { padding: env(safe-area-inset-top) 8px 0; }
  .logo { padding: 5px 11px 5px 8px; gap: 5px; }
  .brand-word { font-size: 0.95rem; }
  .brand-icon { width: 20px; height: 20px; }
  .header-group { gap: 5px; }
  .icon-btn { width: 36px; height: 36px; }
  .streak-btn { height: 36px; padding: 0 7px; font-size: 1rem; }

  /* The photo shrinks to a small thumbnail; tap it to see it full-screen. */
  .photo-box {
    left: 8px;
    --card-w: 150px;
    gap: 5px;
  }
  .photo-card { padding: 6px; gap: 5px; }

  .pill { padding: 0 11px; font-size: 0.78rem; }
  .clue { font-size: 0.7rem; padding: 4px 8px; }
  .photo-error { font-size: 0.62rem; padding: 4px; }

  /* On phones the Zoom and Hint buttons show just their icons. */
  .mini-label { display: none; }
  .tokens-icons { font-size: 1rem; }

  .status-bar { gap: 6px; padding: 5px 6px 5px 11px; font-size: 0.78rem; }
  .total-label { padding: 1px 8px; }
  .round-chips { gap: 4px; }
  .round-chips li { padding: 2px 6px; font-size: 0.7rem; }
  .round-chips .chip-points { display: none; } /* just the coloured number on phones */

  .action-bar { width: calc(100% - 32px); }
}

/* Very narrow phones: drop the paw so the game's name fits on one line. */
@media (max-width: 400px) {
  .brand-word { font-size: 0.85rem; letter-spacing: 0.04em; }
}

/* ---------- The ☰ menu ---------- */

.menu-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 230px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  background: var(--glass-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px; /* big enough to tap comfortably on a phone */
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--cream);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover, .menu-item:focus-visible { background: rgba(255, 166, 43, 0.14); outline: none; }
.menu-icon { width: 1.4em; text-align: center; }

.menu-soon {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "Coming soon" panel */
.soon-icon { font-size: 2.6rem; text-align: center; margin: 0 0 4px; }
#soon-dialog h2 { text-align: center; margin-bottom: 4px; }
.soon-badge { text-align: center; color: var(--amber); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; margin: 0 0 12px; }
.soon-text { text-align: center; color: var(--cream); margin: 0 0 18px; }

/* Previous days */
.history-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.history-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); }
.history-when { display: flex; flex-direction: column; line-height: 1.2; min-width: 7.5em; }
.history-when strong { color: var(--amber); }
.history-when span { color: var(--muted); font-size: 0.8rem; }
.history-squares { flex: 1; letter-spacing: 1px; }
.history-score { font-weight: 700; white-space: nowrap; }
.history-empty { color: var(--muted); text-align: center; margin: 4px 0 18px; }

/* ---------- Sharing ---------- */

.btn-big { padding: 16px 20px; font-size: 1.15rem; border-radius: 14px; }

.share-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }

.share-opt {
  display: block;
  padding: 11px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--cream);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.share-opt:hover { border-color: var(--amber); color: var(--amber); }

/* ---------- Reduce motion ---------- */

/* If the player's device asks for less motion, switch the animations off.
   (The loading spinner is kept so it's still clear something is happening.) */
@media (prefers-reduced-motion: reduce) {
  *:not(.spinner),
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}