/* ══════════════════════════════════════════════════════════════
   TRAILGUESSR — plain outfitter's catalogue: white page, deep
   green serif wordmark, grey rules, nothing decorative.
   ══════════════════════════════════════════════════════════════ */
:root {
  --green: #264d36;
  --green-dark: #1b3a28;
  --ink: #1f1f1f;
  --grey-text: #5f6368;
  --rule: #c9c9c9;
  --rule-light: #e6e6e6;
  --grey-bg: #f2f2f2;
  --white: #ffffff;
  --head-h: 3.6rem;
  --rail: 0px;      /* side ad rails; set at >=1280px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Montserrat", system-ui, sans-serif;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--green); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── site header ─────────────────────────────────────────── */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 var(--white), 0 4px 0 var(--rule-light);
}
.wordmark {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 1.9rem; letter-spacing: -0.01em;
  color: var(--green); text-decoration: none; line-height: 1;
}
.site-nav { display: flex; gap: 1.6rem; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 0.3em 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a.current { border-bottom-color: var(--ink); }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--green);
  background: var(--green); color: #fff;
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.85em 1.6em;
  transition: background 0.12s, color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-outline { background: #fff; color: var(--green); }
.btn-outline:hover:not(:disabled) { background: var(--grey-bg); color: var(--green-dark); }

/* ══════════ START SCREEN ══════════ */
.gate {
  position: fixed; top: 0; bottom: 0; left: var(--rail); right: var(--rail); z-index: 100;
  padding: 0 1.5rem 3rem;
  overflow-y: auto;
  background: var(--white);
}
.intro { max-width: 640px; margin: 0 auto; padding-top: clamp(2rem, 8vh, 5rem); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-text); margin-bottom: 0.6rem; }
.rule-orn { display: flex; align-items: center; gap: 0.8rem; margin: 1.8rem 0 1rem; color: var(--green); max-width: 420px; }
.rule-orn span { flex: 1; border-top: 1px solid var(--rule); }
.intro h1 {
  font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; color: var(--green);
}
.lede { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; max-width: 60ch; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.gate-note { margin-top: 1rem; font-size: 0.92rem; color: var(--grey-text); }
.gate-note a { color: var(--green); }

.token { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border: 1px solid var(--rule); background: var(--grey-bg); }
.token label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.token-row { display: flex; gap: 0.6rem; }
.token-row input { flex: 1; min-width: 0; font: inherit; padding: 0.6em 0.8em; border: 1px solid var(--rule); background: #fff; }
.token-row input:focus { outline: none; border-color: var(--ink); }
.token-help { margin-top: 0.6rem; font-size: 0.88rem; line-height: 1.5; color: var(--grey-text); }
.token-error { margin-top: 0.5rem; color: #a3201a; font-weight: 600; }

/* ══════════ GAME SHELL ══════════ */
.game { position: fixed; top: 0; bottom: 0; left: var(--rail); right: var(--rail); background: var(--white); }
.pano { position: absolute; top: var(--head-h); left: 0; right: 0; bottom: 0; background: #111; }

/* game header — same bar as the site */
.hud {
  position: absolute; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 1.2rem;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 var(--white), 0 4px 0 var(--rule-light);
}
.hud-logo { font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.5rem; color: var(--green); line-height: 1; }
.hud-center { display: flex; align-items: center; gap: 0.8rem; }
.blazes { display: flex; gap: 5px; }
.blaze { width: 22px; height: 4px; background: var(--rule-light); }
.blaze.done { background: var(--green); }
.blaze.now { background: var(--ink); }
.hud-round { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.hud-score { justify-self: end; display: flex; align-items: baseline; gap: 0.5rem; }
.hud-score-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey-text); }
.hud-score-num { font-family: "Libre Caslon Text", Georgia, serif; font-size: 1.4rem; color: var(--green); font-variant-numeric: tabular-nums; }

.home-btn {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 25;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule);
  font-weight: 500; font-size: 0.85rem; padding: 0.55em 0.9em;
}
.home-btn:hover { border-color: var(--ink); }

.veil {
  position: absolute; top: var(--head-h); left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; place-items: center; text-align: center; padding: 1rem;
  background: var(--white); color: var(--grey-text);
  transition: opacity 0.3s;
}
.veil.hide { opacity: 0; pointer-events: none; }

/* ── guess map ───────────────────────────────────────────── */
.map-card {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 25;
  width: 250px; height: 170px;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  overflow: hidden;
  transition: width 0.2s ease, height 0.2s ease;
}
.map-card:hover, .map-card:focus-within, .map-card.open {
  width: min(640px, calc(100vw - 2rem));
  height: min(480px, calc(100vh - 8rem));
}
.map-toggle { display: none; }
.guess-map { flex: 1; z-index: 1; cursor: crosshair; }
.map-foot { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.7rem; border-top: 1px solid var(--rule); }
.pick-label { flex: 1; font-size: 0.88rem; color: var(--grey-text); }
.map-foot .btn { padding: 0.6em 1.3em; }

.leaflet-container { font-family: inherit; background: #e9eef0; }
.pin-guess { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.pin-answer { width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green), 0 1px 4px rgba(0,0,0,0.4); }
.leaflet-tooltip.tg-tip { background: var(--ink); color: #fff; border: none; border-radius: 0; font-weight: 500; font-size: 0.8rem; }
.leaflet-tooltip.tg-tip::before { display: none; }

/* ── round result ────────────────────────────────────────── */
.result { position: absolute; top: var(--head-h); left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; background: #fff; }
.result-map { flex: 1; min-height: 0; }
.result-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 1.2rem 1rem 1.4rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.result-name { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: var(--green); line-height: 1.15; }
.result-place { color: var(--grey-text); }
.result-dist { margin-top: 0.3rem; display: flex; align-items: center; gap: 0.4em; color: var(--green); }
.result-dist b { color: var(--ink); }
.result-points { font-family: "Libre Caslon Text", Georgia, serif; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.result-points small { font-family: "Montserrat", sans-serif; font-size: 0.34em; color: var(--grey-text); }
.meter { width: min(360px, 80vw); height: 4px; margin-top: 0.3rem; background: var(--rule-light); }
.meter-fill { height: 100%; width: 0%; background: var(--green); transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.result-link a { display: inline-block; margin-top: 0.3rem; font-weight: 500; }
.result-link a::after { content: " \2197"; }
.result-credit { font-size: 0.78rem; color: var(--grey-text); }
.result-card .btn { margin-top: 0.8rem; }

/* ── final ───────────────────────────────────────────────── */
.final {
  position: absolute; top: var(--head-h); left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; place-items: start center; padding: clamp(1.5rem, 6vh, 4rem) 1rem; overflow-y: auto;
  background: #fff;
}
.final-card { width: min(560px, 100%); text-align: center; }
.final .eyebrow { margin-bottom: 0.3rem; }
.final-title { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.4rem); color: var(--green); }
.final-total { font-family: "Libre Caslon Text", Georgia, serif; font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1.1; margin: 0.2rem 0 1.4rem; font-variant-numeric: tabular-nums; }
.final-total small { font-family: "Montserrat", sans-serif; font-size: 0.3em; color: var(--grey-text); }
.final-rounds { text-align: left; border-top: 1px solid var(--rule); box-shadow: 0 -3px 0 var(--white), 0 -4px 0 var(--rule-light); margin-bottom: 1.6rem; }
.final-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule-light); }
.final-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.final-row small { color: var(--grey-text); margin-left: 0.4em; }
.final-row .final-at { margin-left: 0.7em; font-size: 0.8rem; font-weight: 500; }
.final-row b { font-family: "Libre Caslon Text", Georgia, serif; font-weight: 400; font-size: 1.15rem; color: var(--green); font-variant-numeric: tabular-nums; }
.share-row { display: flex; justify-content: center; gap: 1.2rem; font-size: 0.85rem; margin-bottom: 1rem; color: var(--grey-text); }
.share-row a { color: var(--green); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.final-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-bottom: 1rem; }
.final .gate-note { margin-top: 0; }

/* ── small screens ───────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --head-h: 3.2rem; }
  .site-nav { gap: 1rem; font-size: 0.75rem; }
  .hud { grid-template-columns: auto 1fr; padding: 0 0.8rem; }
  .hud-logo { display: none; }
  .hud-center { justify-self: start; }
  .map-card, .map-card:hover, .map-card:focus-within {
    left: 0.6rem; right: 0.6rem; bottom: 0.6rem; width: auto; height: auto;
  }
  .map-card .guess-map, .map-card .map-foot { display: none; }
  .map-card.open { height: 62vh; width: auto; }
  .map-card.open .guess-map { display: block; }
  .map-card.open .map-foot { display: flex; }
  .map-toggle {
    display: block; width: 100%; border: none; background: var(--green); color: #fff;
    font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.9em 0;
  }
  .map-card.open .map-toggle { border-bottom: 1px solid var(--rule); }
  .home-btn { bottom: 4.4rem; left: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ══════════ AD SLOTS ══════════
   Grey placeholders sized to standard units. The ad network's script
   fills them (or inserts its own units); the label is for us, not readers. */
.ad-slot {
  position: relative;
  background: var(--grey-bg);
  display: grid; place-items: center;
}
.ad-slot::before {
  content: "Advertisement";
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #9a9a9a;
}
.ad-slot:not(:empty)::before { display: none; }
/* <body class="no-ads">: placeholders hidden until a network is live, but the
   side columns stay so the game keeps its centred, catalogue-page width */
.no-ads .ad-slot { display: none; }
.ad-leaderboard { width: min(728px, 100%); height: 90px; margin: 1.2rem auto 0; }
.ad-300x250 { width: 300px; height: 250px; margin: 1rem auto; }
.ad-300x600 { width: 300px; height: 600px; position: sticky; top: 1.2rem; }

.side-rail { display: none; }
@media (min-width: 1280px) {
  :root { --rail: clamp(140px, 11vw, 220px); }   /* narrow gutters for now; widen when ads go live */
  .side-rail {
    display: block;
    position: fixed; top: 0; bottom: 0; width: var(--rail);
    padding: 1.2rem 12px;
    background: var(--white);
    overflow: hidden;
  }
  #sidebar-left { left: 0; border-right: 1px solid var(--rule-light); }
  #sidebar { right: 0; border-left: 1px solid var(--rule-light); }
}
/* on the result card the unit sits beside the text on wide screens */
@media (min-width: 900px) {
  .result-card { display: grid; grid-template-columns: 300px 1fr; grid-auto-flow: dense; gap: 0 2rem; align-items: center; text-align: left; justify-items: start; padding-left: 2rem; padding-right: 2rem; }
  .result-card > :not(.ad-result) { grid-column: 2; }
  .ad-result { grid-column: 1; grid-row: 1 / span 8; margin: 0; }
  .meter { margin-left: 0; }
}
@media (max-width: 640px) {
  .ad-leaderboard { height: 50px; }   /* 320x50 on phones */
}