:root {
  --ink: #201d16;
  --accent-red: #b8342f;
  --good: #2f7a3d;
  --bad: #b8342f;
  --mid: #b8860b;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  color: var(--ink);
  background: #d8c9a8;
  overflow: hidden;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

img { -webkit-user-drag: none; user-select: none; }

#stageWrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Fill the viewport ("cover" behaviour) and crop the excess off both
   sides — but cap how much gets cropped so it never eats into real
   controls, and bias which side absorbs it. The rightmost controls
   (#resetPinBtn at ~81.2%, and #gaugeWrap further out at ~89%) only
   have ~11% of pure decoration to sacrifice before anything functional
   would be clipped, while the left side (#storyArea starts at 24.6%)
   has much more slack. Total crop is still capped at 30% of the image
   width (as before), but the horizontal translate is offset from
   center (-54% instead of -50%) so that split is ~19% left / ~11%
   right instead of even, protecting the right-side controls first.
   On screens narrower than that cap allows (e.g. a near-square window),
   we fall back to a thin top/bottom letterbox instead of cropping
   further, rather than clipping the Score/Streak/Reset Pin/Gauge
   controls. */
#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-54%, -50%);
  width: min(max(100vw, calc(100vh * 1942 / 809)), calc(100vw / 0.7));
  aspect-ratio: 1942 / 809;
  container-type: inline-size;
}

#bgImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ov { position: absolute; }

/* ---------- source / date ---------- */
#sourceName {
  left: 24.98%;
  top: 21.63%;
  width: 15.7%;
  height: 4.94%;
  display: block;
  line-height: 1.5;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 1.6cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dispatchDate {
  left: 37.8%;
  top: 22.25%;
  width: 8.3%;
  height: 4.08%;
  display: block;
  line-height: 1.8;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85cqw;
  color: #4a4030;
}

/* ---------- story card ---------- */
#storyArea {
  left: 24.61%;
  top: 27.69%;
  width: 22.97%;
  height: 58.59%;
  display: flex;
  flex-direction: column;
  padding: 0.4% 0.6% 4cqw;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #a3906a transparent;
}
#storyArea::-webkit-scrollbar {
  width: 6px;
}
#storyArea::-webkit-scrollbar-track {
  background: transparent;
}
#storyArea::-webkit-scrollbar-thumb {
  background: #a3906a;
  border-radius: 3px;
}
#storyArea::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}
.story-kicker {
  font-size: 0.72cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-red);
  margin-bottom: 2.2%;
  flex-shrink: 0;
}
#storyText {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25cqw;
  line-height: 1.55;
  margin: 0;
}
#storyText strong {
  background: var(--ink);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 2px;
}
#storyText strong.revealed {
  background: none;
  color: var(--accent-red);
  padding: 0;
}

#resultInline {
  margin-top: 4%;
  padding-top: 4%;
  border-top: 2px dashed #b7a980;
  flex-shrink: 0;
}
#resultInline.hidden { display: none; }
#resultHeadline {
  font-family: 'Playfair Display', serif;
  font-size: 1.35cqw;
  font-weight: 800;
  margin-bottom: 1.5%;
}
#resultDetail {
  font-size: 0.95cqw;
  line-height: 1.5;
  margin-bottom: 3%;
  color: #3a3225;
}
#resultDetail a { color: var(--accent-red); }

/* ---------- map ---------- */
#mapArea {
  left: 50.4%;
  top: 27.81%;
  width: 31%;
  height: 53.15%;
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100%;
  filter: sepia(0.35) saturate(1.3) hue-rotate(-6deg) brightness(1.03) contrast(0.96);
}
.answer-pin {
  z-index: 1000 !important;
}
.answer-label {
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  background: #f1ead8;
  border: 1px solid #a3906a;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
}
#distanceBadge {
  position: absolute;
  top: 3%;
  right: 3%;
  z-index: 1000;
  background: #e5dac9;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 0.4cqw 0.8cqw;
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  font-size: 0.95cqw;
  color: var(--ink);
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}
#distanceBadge.hidden { display: none; }

/* ---------- proximity gauge ---------- */
#gaugeWrap {
  left: 82.8%;
  top: 21.5%;
  width: 6.5%;
  height: 65.64%;
  box-sizing: border-box;
  background: #e5dac9;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.2);
}
#gaugeTrack {
  position: absolute;
  left: 0.9cqw;
  top: 2cqw;
  bottom: 2cqw;
  width: 0.55cqw;
  border-radius: 3px;
  background: linear-gradient(to bottom, #ff4433, #ffb020, #2fc2e0);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.35), 0 0 6px rgba(255, 200, 120, 0.25);
}
#gaugeMarkers {
  position: absolute;
  left: 0;
  right: 0;
  top: 2cqw;
  bottom: 2cqw;
}
.gauge-marker {
  position: absolute;
  top: calc(100% - var(--pos, 0%));
  left: 1.85cqw;
  display: flex;
  align-items: center;
  gap: 0.35cqw;
  transform: translateY(-50%);
}
.gauge-tri {
  width: 0;
  height: 0;
  border-top: 0.42cqw solid transparent;
  border-bottom: 0.42cqw solid transparent;
  border-right: 0.6cqw solid var(--ink);
  flex-shrink: 0;
}
.gauge-num {
  font-family: 'Special Elite', monospace;
  font-size: 0.85cqw;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.gauge-marker.latest .gauge-tri { border-right-color: var(--accent-red); }
.gauge-marker.latest .gauge-num { color: var(--accent-red); }

#gaugeHint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  letter-spacing: 0.05cqw;
  color: var(--ink);
  opacity: 0.85;
  pointer-events: none;
  font-size: 2.6cqw;
  transition: font-size 0.35s ease, opacity 0.35s ease,
    top 0.35s ease, bottom 0.35s ease, right 0.35s ease, left 0.35s ease;
}
#gaugeHint.compact {
  inset: auto;
  right: 0.6cqw;
  top: 2cqw;
  bottom: 2cqw;
  font-size: 0.9cqw;
  opacity: 0.55;
}

/* ---------- invisible hotspots over baked-in art ---------- */
.hotspot {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hotspot:hover { background: rgba(255,255,255,0.12); }
.hotspot:active { background: rgba(0,0,0,0.08); }

/* the live map div sits over the baked-in +/- artwork, so these need
   their own visible face instead of just being a transparent hotspot */
#zoomInBtn, #zoomOutBtn {
  background: #f1ead8;
  border: 1px solid #a3906a;
  border-radius: 3px;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.2);
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  font-size: 1.3cqw;
  color: var(--ink);
  line-height: 1;
  z-index: 5;
}
#zoomInBtn:hover, #zoomOutBtn:hover { background: #fff8e8; }
#zoomInBtn::before { content: '+'; }
#zoomOutBtn::before { content: '\2212'; }

#zoomInBtn { left: 50.88%; top: 28.18%; width: 2.06%; height: 3.96%; }
#zoomOutBtn { left: 50.88%; top: 33.13%; width: 2.06%; height: 3.96%; }
#resetPinBtn { left: 75.45%; top: 23.3%; width: 5.77%; height: 4.08%; }
#guessBtn {
  left: 58.3%; top: 82%; width: 13%; height: 6%;
  border: none;
  border-radius: 6px;
  background: #1a1a1a;
  box-shadow: 1px 2px 0 rgba(0,0,0,0.35);
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  font-size: 1.05cqw;
  color: #f1ead8;
  cursor: pointer;
  z-index: 6;
}
#guessBtn:hover { background: #2c2c2c; }
#guessBtn:active { background: #000; }
#guessBtn:disabled {
  cursor: not-allowed;
  background: #55524c;
  color: #b8b4aa;
}
#guessBtn:disabled:hover { background: #55524c; }

/* ---------- share button ---------- */
#shareBtn {
  left: 58.3%; top: 81.5%; width: 13%; height: 6.6%;
  border-radius: 6px;
  background: #f1ead8;
  border: 1px solid #a3906a;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  font-size: 1.05cqw;
  color: var(--accent-red);
  cursor: pointer;
  z-index: 6;
}
#shareBtn:hover { background: #fff8e8; }
#shareBtn[hidden] { display: none; }

/* ---------- share overlay ---------- */
#shareOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 16, 8, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  overflow-y: auto;
}
#shareOverlay.hidden { display: none; }
#shareOverlayInner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 480px;
  width: 100%;
  margin: auto;
}
#shareCloseBtn {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(241, 234, 216, 0.5);
  background: rgba(241, 234, 216, 0.12);
  color: #f1ead8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#shareCloseBtn:hover { background: rgba(241, 234, 216, 0.25); }
#shareCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  background: #f1ead8;
}
#shareStatus {
  min-height: 1.2em;
  font-family: 'Special Elite', monospace;
  font-size: 13px;
  color: #f1ead8;
  opacity: 0.85;
}
#shareActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.share-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  background: #e5cfb0;
  border: 1px solid #a3906a;
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.share-action-btn:hover { background: #efdcc0; }
.share-action-btn[hidden] { display: none; }
.share-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- score / streak ---------- */
.stat-value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.4cqw;
  line-height: 1;
}
#totalScore {
  left: 73.5%; top: 16.44%; width: 4.17%; height: 5.07%;
  font-size: 0.82cqw;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  font-weight: 100;
}
#streakVal { left: 78%; top: 16.44%; width: 4.12%; height: 5.07%; }

/* =========================================================
   MOBILE LAYOUT — separate portrait background + overlay grid

   The mobile background (887x1774) is deliberately taller than any
   phone viewport, with decorative newspaper bleed at the very top and
   bottom. #stage is sized to the IMAGE's own aspect ratio (not the
   viewport's) and always spans the full width, so it never crops
   horizontally; #stageWrap then clips it top/bottom to the actual
   viewport height. Narrower/shorter aspect ratios crop more of the
   decorative bleed; taller phones show more (or all) of it, falling
   back to a plain letterboxed edge if the image is shorter than the
   viewport at that width.
   ========================================================= */
@media (max-width: 700px) {
  #stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    aspect-ratio: 887 / 1774;
    container-type: inline-size;
  }

  /* ---------- source / date ----------
     sits inside the story card's own paper background (as a dateline
     above the kicker) rather than floating over the busy decorative
     clippings above the card, where it had no clean surface to read
     against and could spill outside any sensible box. */
  #sourceName {
    left: 12.5%;
    top: 30.6%;
    width: 32%;
    height: 2%;
    font-size: 2.6cqw;
    line-height: 1.2;
    z-index: 2;
  }
  #dispatchDate {
    left: 45%;
    top: 30.65%;
    width: 26%;
    height: 1.9%;
    font-size: 2.1cqw;
    z-index: 2;
  }

  /* ---------- story card ---------- */
  #storyArea {
    left: 14.5%;
    top: 30%;
    width: 77.5%;
    height: 18.4%;
    /* horizontal/bottom padding in cqw (not %) since padding-% resolves
       against the box's WIDTH, not height. No top padding here — the
       ::before spacer below reserves that space instead. */
    padding: 0 1.5% 2.5%;
    z-index: 1;
  }
  /* padding-top would scroll away with the content, so on scroll story
     text would slide up through the reserved dateline zone and show
     through (storyArea stacks above #sourceName/#dispatchDate in DOM
     order). Use a sticky, opaque spacer instead so it stays put and
     covers the zone regardless of scroll position. */
  #storyArea::before {
    content: '';
    display: block;
    flex-shrink: 0;
    order: -1;
    position: sticky;
    top: 0;
    width: 100%;
    height: 6.8cqw;
    background: #e8dcce;
  }
  .story-kicker { font-size: 2.1cqw; margin-bottom: 2.5%; }
  #storyText { font-size: 3.2cqw; line-height: 1.42; }
  #resultInline { margin-top: 4%; padding-top: 4%; }
  #resultHeadline { font-size: 3.5cqw; }
  #resultDetail { font-size: 2.6cqw; }

  /* ---------- map ---------- */
  #mapArea {
    left: 7%;
    top: 53.9%;
    width: 86%;
    height: 21.9%;
  }
  #distanceBadge { font-size: 2.6cqw; padding: 1.3cqw 2.2cqw; }

  /* ---------- baked-in map controls ---------- */
  #zoomInBtn, #zoomOutBtn { font-size: 3.6cqw; }
  #zoomInBtn { left: 10%; top: 54.6%; width: 5%; height: 3.3%; }
  #zoomOutBtn { left: 10%; top: 58.3%; width: 5%; height: 3.3%; }
  #resetPinBtn { left: 73%; top: 51%; width: 18.5%; height: 2.8%; }
  #guessBtn, #shareBtn { left: 32%; top: 76.6%; width: 36.5%; height: 4.2%; font-size: 3cqw; }

  /* ---------- score / streak ----------
     the numeric value sits in the blank strip below the baked
     "Score"/"Streak" labels, not on top of them */
  .stat-value { font-size: 2.4cqw; }
  #totalScore {
    left: 73%; top: 28.9%; width: 10%; height: 2.2%;
    font-size: 1.7cqw;
  }
  #streakVal { left: 84.5%; top: 28.9%; width: 8.5%; height: 2.2%; }

  /* ---------- proximity gauge — horizontal, below the map + submit
     button. The mobile background has no baked art for this, so it
     gets its own paper-card face to read clearly over the decorative
     clippings behind it. ---------- */
  #gaugeWrap {
    left: 8%;
    top: 83%;
    width: 84%;
    height: 8.4%;
    border-radius: 8px;
  }
  #gaugeHint {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    letter-spacing: 0;
    inset: auto;
    left: 0;
    right: 0;
    top: 0.5cqw;
    bottom: auto;
    font-size: 2.6cqw;
  }
  #gaugeHint.compact {
    inset: auto;
    left: 0;
    right: 0;
    top: 0.5cqw;
    bottom: auto;
    font-size: 2cqw;
    opacity: 0.6;
  }
  /* track sits partway up the strip (not flush with the bottom edge);
     markers stack a number and a downward-pointing triangle above
     their spot on the track */
  #gaugeTrack {
    left: 3cqw;
    right: 3cqw;
    top: auto;
    bottom: 4.2cqw;
    width: auto;
    height: 1cqw;
    border-radius: 3px;
    background: linear-gradient(to right, #2fc2e0, #ffb020, #ff4433);
  }
  #gaugeMarkers {
    left: 3cqw;
    right: 3cqw;
    top: 0.3cqw;
    bottom: 4.2cqw;
  }
  .gauge-marker {
    position: absolute;
    left: var(--pos, 0%);
    top: auto;
    bottom: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.3cqw;
    transform: translateX(-50%);
  }
  .gauge-tri {
    width: 0;
    height: 0;
    border-left: 0.55cqw solid transparent;
    border-right: 0.55cqw solid transparent;
    border-top: 0.85cqw solid var(--ink);
    border-bottom: none;
  }
  .gauge-marker.latest .gauge-tri { border-top-color: var(--accent-red); }
  .gauge-num { font-size: 2.8cqw; }
}