/* ============================================================================
   SAVE OUR FIELDS — GPS AR Safari · Shire-modern design system
   Warm, storybook countryside. Round door, not angular card.
   ========================================================================== */

:root {
  /* palette */
  --meadow: #3E7A4E;
  --meadow-light: #6A9B5E;
  --cream: #F6EFDD;
  --brown: #6B4A2F;
  --brown-light: #8A6240;
  --amber: #E8A33D;
  --terracotta: #C46A3A;
  --violet: #6D5A7E;
  --ink: #2E2A24;
  --paper: #F3E7C9;
  --wood: #7A5230;
  --wood-dark: #5C3D22;
  --ink-soft: rgba(46, 42, 36, 0.72);
  --line: rgba(46, 42, 36, 0.18);

  /* type */
  --font-display: "Zilla Slab", "Georgia", serif;
  --font-body: "Nunito", "Avenir Next", system-ui, sans-serif;
  --font-hand: "Jim Nightshade", "Caveat", cursive;
  --font-rusty: "Permanent Marker", "Jim Nightshade", cursive;
  --font-digital: "DSEG7-Classic", "Courier New", monospace;
  --font-stencil: "Black Ops One", "Arial Black", sans-serif;

  /* shape */
  --r-round: 999px;
  --r-card: 22px;

  /* motion */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* layout */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---------- self-hosted fonts ---------- */
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/zillaslab-500.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/zillaslab-600.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/zillaslab-700.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/zillaslab-500i.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/zillaslab-600i.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/zillaslab-700i.woff2") format("woff2");
}

@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/permanent-marker-400.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/nunito-400.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/nunito-600.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/nunito-700.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/nunito-800.woff2") format("woff2");
}

@font-face {
  font-family: "Jim Nightshade";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jim-nightshade-400.woff2") format("woff2");
}

@font-face {
  font-family: "DSEG7-Classic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/dseg7-classic-regular.woff2") format("woff2");
}
@font-face {
  font-family: "DSEG7-Classic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/dseg7-classic-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Black Ops One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/blackopsone-400.woff2") format("woff2");
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(180deg, #dce8cd 0%, var(--cream) 42%, var(--paper) 100%);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ensure emphasis always carries a bold weight — guards against webfont
   rendering quirks where the first glyph of a <strong> drops to normal */
strong { font-weight: 700; }

body.lock { overflow: hidden; }

img, svg { display: block; max-width: 100%; }

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 6px; }

::selection { background: var(--amber); color: var(--ink); }

.hidden { display: none !important; }

/* ---------- app shell ---------- */
#app {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(18px) scale(0.995);
  pointer-events: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  padding-top: calc(var(--safe-top) + 18px);
  padding-bottom: calc(var(--safe-bottom) + 22px);
}

.screen.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.screen:not(.active),
.screen:not(.active) * {
  pointer-events: none !important;
}

.screen__inner {
  width: 100%;
  max-width: 640px;
  padding: 0 20px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; }

h1 { font-size: clamp(1.9rem, 7vw, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 5.4vw, 2rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }

.lead { font-size: 1.06rem; line-height: 1.55; color: var(--ink-soft); }

.hand { font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.3; }

.rusty-quote {
  position: relative;
  font-family: var(--font-rusty);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--terracotta);
  text-shadow: 0 1px 1px rgba(246, 239, 221, 0.5), 0 1px 2px rgba(92, 61, 34, 0.18);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 250, 225, 0.5), transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(107, 74, 47, 0.06) 21px 22px),
    linear-gradient(180deg, #f3e5c2, #e7d3a6);
  border: 1.5px solid #b96a3a;
  border-radius: 14px 14px 14px 5px;
  box-shadow: 0 4px 0 #8f4e26, 0 6px 12px rgba(46, 42, 36, 0.14);
  padding: 10px 14px 10px 60px;
  transform: rotate(-0.4deg);
}
.rusty-quote::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  line-height: 1;
  width: 39px;
  height: 39px;
  background:
    url("../assets/characters/rusty.png") center top / cover no-repeat,
    linear-gradient(180deg, #fdf6e3, #f0dfbd);
  border: 1.5px solid #b96a3a;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(92, 61, 34, 0.2);
}
.rusty-quote::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 92px;
  height: 14px;
  background: linear-gradient(90deg, rgba(232, 163, 61, 0.35), rgba(246, 239, 221, 0.55) 40%, rgba(232, 163, 61, 0.35));
  border-left: 1px dashed rgba(107, 74, 47, 0.25);
  border-right: 1px dashed rgba(107, 74, 47, 0.25);
  border-radius: 2px;
  transform: translateX(-50%) rotate(-2deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.rusty-signoff {
  display: block;
  margin-top: 8px;
  text-align: right;
  font-size: 0.92rem;
  opacity: 0.85;
}
.rusty-signoff::before {
  content: "—\00a0";
  opacity: 0.9;
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---------- buttons ---------- */
.btn-round {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--cream);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 235, 190, 0.35), transparent 46%),
    linear-gradient(180deg, var(--brown-light), var(--brown));
  border: 3px solid var(--wood-dark);
  border-radius: var(--r-round);
  padding: 17px 34px;
  box-shadow: 0 7px 0 var(--wood-dark), 0 14px 22px rgba(46, 42, 36, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  text-decoration: none;
  min-height: 56px;
}

.btn-round:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--wood-dark), 0 6px 10px rgba(46, 42, 36, 0.24);
}

.btn-round.amber {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 250, 220, 0.5), transparent 46%),
    linear-gradient(180deg, #f2b84f, var(--amber));
  border-color: #c07f1e;
  color: var(--ink);
  box-shadow: 0 7px 0 #c07f1e, 0 14px 22px rgba(46, 42, 36, 0.26);
}
.btn-round.amber:active { box-shadow: 0 2px 0 #c07f1e, 0 6px 10px rgba(46, 42, 36, 0.22); }

.btn-round.meadow {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 245, 205, 0.35), transparent 46%),
    linear-gradient(180deg, var(--meadow-light), var(--meadow));
  border-color: #2d5a39;
  box-shadow: 0 7px 0 #2d5a39, 0 14px 22px rgba(46, 42, 36, 0.26);
}
.btn-round.meadow:active { box-shadow: 0 2px 0 #2d5a39, 0 6px 10px rgba(46, 42, 36, 0.22); }

.btn-sign {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cream);
  background: linear-gradient(180deg, #8a5f35, var(--wood));
  border: 2px solid var(--wood-dark);
  border-radius: 10px 10px 999px 999px;
  padding: 12px 22px 14px;
  box-shadow: 0 5px 0 var(--wood-dark);
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
}
.btn-sign:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--wood-dark); }

.btn-campaign {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  color: var(--ink);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 250, 220, 0.6), transparent 44%),
    linear-gradient(180deg, #f4c060, var(--amber));
  border: 3px solid #c07f1e;
  border-radius: 22px;
  padding: 12px 22px 12px 18px;
  box-shadow: 0 6px 0 #b8771c, 0 14px 22px rgba(46, 42, 36, 0.26);
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  cursor: pointer;
  text-align: left;
  line-height: 1.1;
}
.btn-campaign:hover { filter: brightness(1.03); }
.btn-campaign:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #b8771c, 0 6px 10px rgba(46, 42, 36, 0.22);
}
.btn-campaign__stars {
  font-size: 1.5rem;
  color: #fff6d8;
  text-shadow: 0 1px 0 rgba(184, 119, 28, 0.6);
  line-height: 1;
}
.btn-campaign__label {
  display: block;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.btn-campaign__sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(46, 42, 36, 0.72);
  letter-spacing: 0.02em;
}

.btn-journal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--cream);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 245, 205, 0.4), transparent 44%),
    linear-gradient(180deg, var(--meadow-light), var(--meadow));
  border: 3px solid #2d5a39;
  border-radius: 999px;
  padding: 13px 26px 13px 18px;
  box-shadow: 0 6px 0 #2d5a39, 0 14px 22px rgba(46, 42, 36, 0.26);
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  cursor: pointer;
  text-decoration: none;
}
.btn-journal:hover { filter: brightness(1.04); }
.btn-journal:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #2d5a39, 0 6px 10px rgba(46, 42, 36, 0.22);
}
.btn-journal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 245, 205, 0.22);
  color: #eaf4dd;
  flex-shrink: 0;
}
.btn-journal__label {
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.btn-text {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--meadow);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 12px;
}

.btn-sight {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--ink);
  background: radial-gradient(circle at 30% 22%, rgba(255, 250, 220, 0.55), transparent 46%),
    linear-gradient(180deg, #f4c060, var(--amber));
  border: 3px solid #c07f1e;
  border-radius: var(--r-round);
  padding: 16px 30px;
  box-shadow: 0 6px 0 #c07f1e, 0 10px 18px rgba(0, 0, 0, 0.3);
}
.btn-sight:active { transform: translateY(4px); box-shadow: 0 2px 0 #c07f1e; }

.btn-round:disabled {
  opacity: 0.45;
  transform: none;
  box-shadow: 0 2px 0 var(--wood-dark);
  cursor: not-allowed;
}

/* ---------- parchment cards ---------- */
.parchment {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 253, 244, 0.9), transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 108%, rgba(140, 100, 45, 0.16), transparent 60%),
    radial-gradient(circle at 14% 18%, rgba(150, 105, 50, 0.10) 0, transparent 40%),
    radial-gradient(circle at 86% 74%, rgba(150, 105, 50, 0.10) 0, transparent 38%),
    radial-gradient(circle at 70% 12%, rgba(255, 250, 230, 0.55) 0, transparent 45%),
    linear-gradient(180deg, #faf1da 0%, #f3e5bd 48%, #ecd9a8 100%);
  border-radius: var(--r-card);
  padding: 26px 24px;
  box-shadow:
    0 12px 26px rgba(46, 42, 36, 0.20),
    inset 0 0 46px rgba(150, 110, 55, 0.18),
    inset 0 1px 2px rgba(255, 253, 240, 0.7);
}

/* hand-aged speckle + deckle: layered on top of the base colour */
.parchment::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 30%, rgba(120, 85, 40, 0.12) 0, transparent 5%),
    radial-gradient(circle at 64% 20%, rgba(120, 85, 40, 0.09) 0, transparent 4%),
    radial-gradient(circle at 42% 68%, rgba(120, 85, 40, 0.11) 0, transparent 6%),
    radial-gradient(circle at 82% 55%, rgba(120, 85, 40, 0.08) 0, transparent 5%),
    radial-gradient(circle at 8% 82%, rgba(120, 85, 40, 0.10) 0, transparent 4%),
    radial-gradient(circle at 50% 50%, rgba(255, 250, 232, 0.5) 0, transparent 70%);
  pointer-events: none;
}

/* darker, softly deckled rim so it reads as cut (not a hard computer line) */
.parchment::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--r-card) - 2px);
  border: 1px solid rgba(150, 110, 55, 0.30);
  box-shadow: inset 0 0 6px rgba(255, 250, 230, 0.5);
  pointer-events: none;
}

/* ---------- torn / deckled edges ---------- */
/* Organic, non-repetitive tear. Built as a data-URI SVG mask whose edge is
   displaced by an feTurbulence filter — fractal noise, so no two edges match.
   (An in-document clip-path filter is ignored by browsers, hence the mask.) */
.torn {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-25%25'%20y='-25%25'%20width='150%25'%20height='150%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.035'%20numOctaves='4'%20seed='7'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='70'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='600'%20height='600'%20filter='url(%23t)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-25%25'%20y='-25%25'%20width='150%25'%20height='150%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.035'%20numOctaves='4'%20seed='7'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='70'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='600'%20height='600'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* give the torn card a thicker, slightly charred deckle rim */
.torn::after {
  inset: 2px;
  border-radius: 4px;
  border: 1px solid rgba(130, 92, 45, 0.45);
  box-shadow:
    inset 0 0 8px rgba(120, 85, 40, 0.22),
    inset 0 0 22px rgba(120, 85, 40, 0.10);
}

/* ---------- mission (homebox) ---------- */
/* Intro card at the top of the landing: matches the other landing cards
   (heading + Nunito body) while keeping the torn-parchment identity. */
.mission-card .lead { margin-bottom: 0; }
.mission-card .lead + .lead { margin-top: 12px; }

.mission-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--brown);
}

/* Rusty's closing aside — a toned-down handwritten callout, not the whole card.
   No emoji avatar: his selected portrait (rusty.png) floats at the top-left
   (flipped to face the text) and the words flow around it on the right. */
.mission-quote {
  margin-top: 16px;
  font-size: 1.18rem;
  color: var(--terracotta);
  padding: 16px 20px;
  overflow: hidden;
}
.mission-quote::before {
  content: "";
  display: none;
}
.mission-quote__portrait {
  float: left;
  height: clamp(150px, 44vh, 250px);
  width: auto;
  margin: 0 18px 10px 0;
  border-radius: 12px;
  border: 2px solid rgba(107, 74, 47, 0.4);
  box-shadow: 0 5px 12px rgba(46, 42, 36, 0.22);
  background: linear-gradient(180deg, #fdf6e3, #f0dfbd);
  transform: scaleX(-1);
}
.mission-quote__body {
  display: block;
}

/* ---------- medallions ---------- */
.medallion {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 4px solid var(--wood);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 var(--wood-dark), 0 8px 14px rgba(46, 42, 36, 0.2);
  transition: transform 0.2s var(--spring);
  padding: 6px;
}
.medallion svg { width: 100%; height: 100%; }
.medallion.sighted { border-color: var(--amber); box-shadow: 0 5px 0 #c07f1e, 0 0 0 4px rgba(232, 163, 61, 0.28); }
.medallion.unsighted { filter: grayscale(0.9); opacity: 0.55; }

.medallion-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brown);
  background: var(--paper);
  border: 2px solid #d9c189;
  border-radius: var(--r-round);
  padding: 8px 14px;
}
.chip svg { width: 22px; height: 22px; }
.chip.done { color: var(--meadow); border-color: var(--meadow-light); }
.chip.fail { color: var(--terracotta); border-color: var(--terracotta); }

/* ---------- banner / hero ---------- */
.hero-scene { position: relative; width: 100%; max-width: 460px; margin: 0 auto 6px; }
.hero-scene svg { width: 100%; height: auto; }

/* hero photograph — soft feathered edges that blend into parchment */
#hero-scene,
#celebrate-scene {
  padding: 14px 16px;
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255, 253, 240, 0.8), transparent 60%),
    radial-gradient(ellipse at 50% 45%, #f3e6c3 0%, #ecd9a8 60%, #e3cf9d 100%);
  box-shadow:
    0 12px 26px rgba(46, 42, 36, 0.22),
    inset 0 0 0 1px rgba(130, 92, 45, 0.38),
    inset 0 0 40px rgba(130, 92, 45, 0.14);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cdefs%3E%3Cfilter%20id='o'%20x='-25%25'%20y='-25%25'%20width='150%25'%20height='150%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.035'%20numOctaves='4'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='70'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='600'%20height='600'%20filter='url(%23o)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cdefs%3E%3Cfilter%20id='o'%20x='-25%25'%20y='-25%25'%20width='150%25'%20height='150%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.035'%20numOctaves='4'%20seed='11'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='70'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='600'%20height='600'%20filter='url(%23o)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
#hero-scene .hero-photo,
#celebrate-scene .hero-photo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.55) saturate(0.75) brightness(1.04) contrast(0.94);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-25%25'%20y='-25%25'%20width='150%25'%20height='150%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.035'%20numOctaves='4'%20seed='7'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='70'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='600'%20height='600'%20filter='url(%23t)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cdefs%3E%3Cfilter%20id='t'%20x='-25%25'%20y='-25%25'%20width='150%25'%20height='150%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.035'%20numOctaves='4'%20seed='7'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='70'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='600'%20height='600'%20filter='url(%23t)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
#hero-scene::after,
#celebrate-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 46px rgba(120, 85, 40, 0.22);
  pointer-events: none;
}

/* celebration animated scene — the parchment frame becomes a meadow stage for
   the SceneRender composition (all seven + random props). Aspect matches the
   10:6 design canvas so the scene cover-fits without cropping. */
#celebrate-scene.scene-mode {
  padding: 0;
  aspect-ratio: 10 / 6;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    #f7efc9 0%,
    #eef0d0 34%,
    #cfe0a9 62%,
    #a9c97f 100%);
}

/* hero photo carousel — the parchment frame (#hero-scene) stays still while
   the images slide inside it. The track translates within an overflow-hidden
   clip so only the photos move. 4 slides (3 photos + a 4th copy of slide 1),
   4s each, seamless infinite loop — the final copy makes the wrap invisible. */
.hero-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero-carousel__track {
  display: flex;
  width: 100%;
  animation: hero-slide 16s linear infinite;
  will-change: transform;
}
#hero-scene .hero-photo,
#celebrate-scene .hero-photo {
  flex: 0 0 100%;
  width: 100%;
}
@keyframes hero-slide {
  0%, 18.75%   { transform: translateX(0); }
  25%, 43.75%  { transform: translateX(-100%); }
  50%, 68.75%  { transform: translateX(-200%); }
  75%, 93.75%  { transform: translateX(-300%); }
  100%         { transform: translateX(0); }
}

/* ---------- sections on landing ---------- */
.landing-block {
  width: 100%;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.landing-block h2 { color: var(--brown); }
.landing-block .landing-block__title,
.mission-lead { text-align: center; }
.landing-block .row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* "Good manners" heading inside the landing parchment */
.manners-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--brown);
  font-size: 1.15rem;
}
.manners-head::before {
  content: "🐾";
  font-size: 1.1rem;
  line-height: 1;
}

.what-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: center;
  width: 100%;
}
.what-card .icon { width: 34px; height: 34px; }

.how-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 2px dashed rgba(107, 74, 47, 0.25);
}
.how-step:last-child { border-bottom: none; }
.how-num {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--meadow);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #2d5a39;
}

.footer-note {
  margin-top: 34px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-note a { color: var(--meadow); }

/* ---------- Vivid Atom credit (Sources screen) ---------- */
.vivid-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 14px;
  background: rgba(46, 42, 36, 0.92);
  border: 1px solid rgba(246, 239, 221, 0.16);
  border-radius: 999px;
  color: var(--cream);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.vivid-credit:hover { background: rgba(46, 42, 36, 1); }
.vivid-credit:active { transform: translateY(1px); }
.vivid-credit .vivid-credit__logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.vivid-credit strong { color: #F06020; }

/* ---------- preload ---------- */
.preload-body { gap: 20px; padding-top: 20px; }

.progress-ring-wrap {
  position: relative;
  width: 176px; height: 176px;
  display: grid;
  place-items: center;
}
.progress-ring { transform: rotate(-90deg); position: absolute; inset: 0; }
.progress-ring .track { fill: none; stroke: rgba(107, 74, 47, 0.18); stroke-width: 12; }
.progress-ring .fill {
  fill: none;
  stroke: var(--meadow);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 489;
  stroke-dashoffset: 489;
  transition: stroke-dashoffset 0.3s var(--ease);
}
.progress-center { text-align: center; }
.progress-center .pct { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--brown); }
.progress-center .pct-sub { font-size: 0.82rem; color: var(--ink-soft); }

.preload-chips { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }

.preload-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 2px solid #d9c189;
  border-radius: 14px;
}
.preload-item .name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--brown); }
.preload-item .bar { height: 8px; border-radius: 999px; background: rgba(107, 74, 47, 0.15); overflow: hidden; }
.preload-item .bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--meadow-light), var(--meadow));
  border-radius: 999px;
  transition: width 0.25s var(--ease);
}
.preload-item .state { font-size: 0.78rem; color: var(--ink-soft); min-width: 46px; text-align: right; }
.preload-item .retry {
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  color: var(--cream); background: var(--terracotta); border-radius: 8px; padding: 4px 10px;
}
.preload-item.failed { border-color: var(--terracotta); }
.preload-item.done .bar-fill { background: var(--meadow); }

.preload-fact {
  max-width: 420px;
  width: 100%;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
  min-height: 3.4em;
}

/* ---------- map ---------- */
#map { position: absolute; inset: 0; z-index: 0; }
#map .leaflet-container { background: #e9dfc4; font-family: var(--font-body); }

/* keep Leaflet zoom controls clear of the top notch and the bottom map sheet */
#map .leaflet-top { top: calc(var(--safe-top) + 10px); }
#map .leaflet-left { left: calc(var(--safe-left) + 10px); }
#map .leaflet-control-zoom {
  border: 2px solid var(--wood-dark);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(46, 42, 36, 0.3);
}
#map .leaflet-control-zoom a {
  width: 40px; height: 40px;
  line-height: 40px;
  color: var(--brown);
  background: linear-gradient(180deg, #fbf3df, #ecdcb6);
  font-family: var(--font-display);
  font-weight: 700;
}
#map .leaflet-control-zoom a:hover { background: linear-gradient(180deg, #f7ecd0, #e6d3a6); }

/* styled explainer popups on the start/entrance points */
#map .poi-popup-wrap .leaflet-popup-content-wrapper {
  background: linear-gradient(180deg, #faf1da, #f0e0ba);
  color: var(--brown);
  border: 2px solid var(--wood-dark);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(46, 42, 36, 0.25);
}
#map .poi-popup-wrap .leaflet-popup-content { margin: 12px 14px; }
#map .poi-popup-wrap .leaflet-popup-tip {
  background: #f0e0ba;
  border: 2px solid var(--wood-dark);
}
#map .poi-popup-wrap .leaflet-popup-close-button {
  color: var(--brown);
  font-size: 18px;
  padding: 4px 6px;
}
#map .poi-popup h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brown);
  margin: 0 0 4px;
}
#map .poi-popup p {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0;
}

.signpost-marker {
  position: relative;
  width: 40px; height: 52px;
}
.signpost-marker .post {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 6px; height: 100%;
  background: linear-gradient(180deg, #8a5f35, var(--wood-dark));
  border-radius: 2px;
}
.signpost-marker .board {
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 30px;
  background: linear-gradient(180deg, #9c6f40, var(--wood));
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.signpost-marker.done .board { background: linear-gradient(180deg, var(--meadow-light), var(--meadow)); border-color: #2d5a39; }
.signpost-marker.next .board { box-shadow: 0 0 0 5px rgba(232, 163, 61, 0.5); animation: pulse 1.8s infinite; }

@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(232, 163, 61, 0.16); } }

#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 900; }

@keyframes flourish-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.8); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}

.player-marker {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--meadow);
  box-shadow: 0 0 0 4px rgba(62, 122, 78, 0.3);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.player-marker::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed rgba(62, 122, 78, 0.5);
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- map sheet (bottom bar with HUD + CTA) ---------- */
.map-sheet {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 14px);
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 520px;
  z-index: 600;
  padding: 16px 16px 18px;
  border-radius: 20px;
}
.map-sheet .sheet-top {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  row-gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px dashed rgba(107, 74, 47, 0.2);
}
.map-sheet .hud-clock {
  margin-left: 0;
}

/* Abbots Langley Association logo — embossed into the field unit's main body,
   sat to the right of the Journal button in the specimen tray, pressed into
   the parchment like a maker's mark. */
.map-sheet .unit-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 253, 240, 0.5), transparent 55%),
    linear-gradient(180deg, rgba(150, 110, 55, 0.14), rgba(150, 110, 55, 0.05));
  box-shadow:
    inset 0 2px 3px rgba(74, 51, 32, 0.28),
    inset 0 -1px 1px rgba(255, 250, 232, 0.55);
  padding: 6px 12px;
  min-height: 40px;
}
.map-sheet .unit-mark img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter:
    sepia(0.55) saturate(0.85) contrast(0.92) brightness(0.95)
    drop-shadow(0 1px 0 rgba(255, 250, 232, 0.5))
    drop-shadow(0 -1px 1px rgba(74, 51, 32, 0.45));
  opacity: 0.82;
}

/* ---------- GPS status pill ---------- */
.map-sheet .gps-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 5px 10px 5px 8px;
  border-radius: var(--r-round);
  background: linear-gradient(180deg, #fbf3df, #f1e2bd);
  border: 2px solid var(--brown-light);
  box-shadow: inset 0 1px 2px rgba(255, 253, 240, 0.7), 0 2px 6px rgba(46, 42, 36, 0.12);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  min-height: 38px;
}
.map-sheet .gps-status .gps-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--line);
  flex: 0 0 auto;
}
.map-sheet .gps-status .gps-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--brown);
}
.map-sheet .gps-status .gps-value {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.map-sheet .gps-status .gps-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}
.map-sheet .gps-status .gps-bars i {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: var(--line);
}
.map-sheet .gps-status .gps-bars i:nth-child(1) { height: 5px; }
.map-sheet .gps-status .gps-bars i:nth-child(2) { height: 9px; }
.map-sheet .gps-status .gps-bars i:nth-child(3) { height: 13px; }
/* colour states colour the icon ring + bars */
.map-sheet .gps-status.good { border-color: var(--meadow); box-shadow: inset 0 1px 2px rgba(255,253,240,.7), 0 0 0 3px rgba(62,122,78,.18); }
.map-sheet .gps-status.good .gps-icon { border-color: var(--meadow); }
.map-sheet .gps-status.good .gps-bars i { background: var(--meadow); }
.map-sheet .gps-status.amber { border-color: var(--amber); }
.map-sheet .gps-status.amber .gps-icon { border-color: var(--amber); }
.map-sheet .gps-status.amber .gps-bars i { background: var(--amber); }
.map-sheet .gps-status.bad { border-color: var(--terracotta); box-shadow: inset 0 1px 2px rgba(255,253,240,.7), 0 0 0 3px rgba(196,106,58,.18); }
.map-sheet .gps-status.bad .gps-icon { border-color: var(--terracotta); }
.map-sheet .gps-status.bad .gps-bars i { background: var(--terracotta); }

/* ---------- LED clock ---------- */
.map-sheet .hud-clock {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #20221f, #10120f);
  border: 2px solid var(--wood-dark);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 2px 0 var(--wood-dark);
  font-family: var(--font-digital);
  font-weight: 700;
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  letter-spacing: 1px;
  color: #ffd57a;
  text-shadow: 0 0 6px rgba(232, 163, 61, 0.9), 0 0 2px rgba(255, 213, 122, 0.8);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.map-sheet .hud-clock .sep {
  animation: led-blink 1s steps(1) infinite;
  color: #ffb64d;
  text-shadow: 0 0 6px rgba(232, 163, 61, 1);
}
@keyframes led-blink { 50% { opacity: 0.15; } }

/* ---------- badge tray + counter ---------- */
.map-sheet .sheet-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
/* right cluster of the specimen tray: counter, Journal button, then the
   embossed ALA mark sits to the right of the Journal button */
.map-sheet .sheet-badges__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
}
.map-sheet .hud-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}
.map-sheet .hud-badge {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #c9b894;
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-shadow: 0 3px 0 rgba(107, 74, 47, 0.35);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.2s var(--spring);
}
.map-sheet .hud-stack {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 999px;
  background: linear-gradient(160deg, #e8a33d, #c46a3a);
  color: #fff;
  font-family: var(--font-digi, var(--font-display));
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 2px 0 rgba(107, 74, 47, 0.45);
}
.map-sheet .hud-badge svg { width: 100%; height: 100%; }
.map-sheet .hud-badge.found {
  border-color: var(--amber);
  box-shadow: 0 3px 0 #b9781c, 0 0 0 3px rgba(232, 163, 61, 0.28);
}
.map-sheet .hud-badge.unfound {
  border-style: dashed;
  filter: grayscale(1);
  opacity: 0.6;
}
.map-sheet .hud-badge.closest {
  border-color: var(--terracotta);
  border-style: solid;
  box-shadow: 0 3px 0 #93462a, 0 0 0 4px rgba(196, 106, 58, 0.4);
  animation: pulse 1.8s infinite;
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}
.map-sheet .hud-badge.boris-badge {
  cursor: pointer;
  border-style: solid;
}
.map-sheet .hud-badge.boris-badge:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 0 #22c55e, 0 0 0 4px rgba(34, 197, 94, 0.35);
}
.map-sheet .hud-badge.boris-badge:active {
  transform: scale(0.96);
}
.map-sheet .hud-badge.found {
  cursor: pointer;
}
.map-sheet .hud-badge.found:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 0 #b9781c, 0 0 0 4px rgba(232, 163, 61, 0.35);
}
.map-sheet .hud-badge.found:active {
  transform: scale(0.96);
}
.map-sheet .badge-counter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--brown);
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: right;
}
.map-sheet .next-stop { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--brown); }
.map-sheet .dist { font-size: 0.9rem; color: var(--ink-soft); }
.map-sheet .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- FIELD UNIT device chrome (map sheet) ---------- */
.map-sheet.device {
  border: 3px solid var(--brown-light);
  box-shadow:
    0 10px 30px rgba(46, 42, 36, 0.30),
    inset 0 0 0 1px rgba(246, 239, 221, 0.55),
    inset 0 0 22px rgba(150, 110, 55, 0.14);
}

/* brand nameplate */
.device-nameplate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #8a6240, #6b4a2f);
  border-bottom: 2px solid #4a3320;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.35), 0 2px 6px rgba(46, 42, 36, 0.18);
  font-family: var(--font-stencil);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0;
  color: var(--cream);
  min-height: 24px;
  overflow: hidden;
}
.device-brand { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.device-logo { display: inline-flex; flex: 0 0 auto; }
.device-logo svg { width: 16px; height: 16px; }
.device-onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: rgba(246, 239, 221, 0.85);
  white-space: nowrap;
  flex: 0 0 auto;
}
.onair-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #8a8a84;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.map-sheet.has-fix .onair-dot {
  background: #4ade80;
  box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.8);
  animation: onair-blink 2.2s ease-in-out infinite;
}
.map-sheet.searching .onair-dot {
  background: var(--amber);
  box-shadow: 0 0 8px 1px rgba(232, 163, 61, 0.7);
  animation: onair-blink 1s ease-in-out infinite;
}
@keyframes onair-blink { 50% { opacity: 0.4; } }

/* corner screws */
.screw {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8d9b5, #7a5a30 72%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(46, 42, 36, 0.4);
  z-index: 3;
}
.screw::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 1.5px;
  transform: translate(-50%, -50%) rotate(-38deg);
  background: rgba(46, 42, 36, 0.5);
  border-radius: 1px;
}
.screw--tl { top: 7px; left: 7px; }
.screw--tr { top: 7px; right: 7px; }
.screw--bl { bottom: 7px; left: 7px; }
.screw--br { bottom: 7px; right: 7px; }

/* whimsical instrument labels */
.map-sheet .sheet-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(107, 74, 47, 0.72);
  margin-bottom: 5px;
}

/* radar sweep */
.map-sheet .radar {
  position: relative;
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(107, 74, 47, 0.35);
  background: rgba(246, 239, 221, 0.65);
  flex: 0 0 auto;
  margin-left: 2px;
  overflow: hidden;
  color: #c9b894;
}
.map-sheet .radar i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, currentColor 300deg, currentColor 360deg);
  animation: radar-spin 2.4s linear infinite;
}
.map-sheet .radar i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px 1px currentColor;
}
.map-sheet .radar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: radar-ring 2.4s ease-out infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes radar-ring {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
.map-sheet.good .radar { color: var(--meadow); }
.map-sheet.amber .radar { color: var(--amber); }
.map-sheet.bad .radar { color: var(--terracotta); }
.map-sheet.searching .radar { color: var(--amber); }

/* bearing readout + range gauge */
.map-sheet .bearing { flex: 1 1 auto; min-width: 0; }
.map-sheet .range-bar {
  margin-top: 8px;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(107, 74, 47, 0.14);
  border: 1px solid rgba(107, 74, 47, 0.2);
  overflow: hidden;
}
.map-sheet .range-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--meadow-light), var(--meadow));
  box-shadow: 0 0 6px rgba(62, 122, 78, 0.6);
  transition: width 0.6s var(--ease);
}

/* ---------- field trigger (Spot Creature!) ---------- */
.map-sheet .field-trigger {
  font-family: var(--font-stencil);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 250, 220, 0.6), transparent 46%),
    linear-gradient(180deg, #f4c060, var(--amber));
  border: 2px solid #c07f1e;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 36px;
  gap: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.7),
    0 3px 0 #c07f1e,
    0 8px 14px rgba(46, 42, 36, 0.24);
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  white-space: nowrap;
}
.map-sheet .field-trigger svg { width: 20px; height: 20px; flex: 0 0 auto; }
.map-sheet .field-trigger:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.5),
    0 1px 0 #c07f1e,
    0 4px 8px rgba(46, 42, 36, 0.2);
}
.map-sheet .field-trigger:not(.hidden) {
  animation: trigger-glow 2.4s ease-in-out infinite;
}
@keyframes trigger-glow {
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 240, 0.7),
      0 3px 0 #c07f1e,
      0 0 0 4px rgba(232, 163, 61, 0.28),
      0 8px 14px rgba(46, 42, 36, 0.24);
  }
}

/* The field unit's plain camera — a quiet meadow-green sibling of the amber
   "Spot Creature!" trigger. No pulse: it's always on offer, not a nudge. */
.map-sheet .map-triggers {
  display: flex;
  align-items: center;
  gap: 10px;
}
.map-sheet .camera-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-stencil);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #fff;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 250, 220, 0.28), transparent 46%),
    linear-gradient(180deg, #4f8a5f, var(--meadow));
  border: 2px solid #2f5c3c;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.5),
    0 3px 0 #2f5c3c,
    0 8px 14px rgba(46, 42, 36, 0.24);
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  white-space: nowrap;
}
.map-sheet .camera-trigger svg { width: 18px; height: 18px; flex: 0 0 auto; }
.map-sheet .camera-trigger:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.4),
    0 1px 0 #2f5c3c,
    0 4px 8px rgba(46, 42, 36, 0.2);
}

/* scanline display finish */
.map-sheet .scanlines {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(to bottom, rgba(46, 42, 36, 0.035) 0 1px, transparent 1px 3px);
}

.compass-rose {
  position: absolute;
  right: calc(var(--safe-right) + 12px);
  top: calc(var(--safe-top) + 12px);
  z-index: 600;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 6px 14px rgba(46, 42, 36, 0.35));
}
.compass-rose svg { width: 100%; height: 100%; }
/* matrix-green compass needle glow as it points north */
.compass-rose svg {
  animation: compass-breathe 4s ease-in-out infinite;
}
@keyframes compass-breathe {
  50% { filter: drop-shadow(0 6px 14px rgba(46,42,36,0.35)) drop-shadow(0 0 8px rgba(34,197,94,0.45)); }
}

/* ---------- clue / porthole ---------- */
.porthole {
  position: relative;
  width: min(88vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 10px solid var(--wood);
  box-shadow:
    0 18px 40px rgba(46, 42, 36, 0.32),
    0 0 0 2px rgba(46, 42, 36, 0.18),
    inset 0 0 0 6px var(--wood-dark),
    inset 0 2px 4px rgba(255, 240, 220, 0.5);
  overflow: hidden;
  background: var(--paper);
  transform: scale(0.6) rotate(-8deg);
  opacity: 0;
  transition: transform 0.55s var(--spring), opacity 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.porthole.open {
  transform: scale(1) rotate(0);
  opacity: 1;
  box-shadow:
    0 22px 48px rgba(46, 42, 36, 0.36),
    0 0 0 2px rgba(46, 42, 36, 0.18),
    inset 0 0 0 6px var(--wood-dark),
    inset 0 2px 4px rgba(255, 240, 220, 0.5),
    0 0 34px rgba(232, 163, 61, 0.18);
}
/* embossed brass-style ring inside the wooden frame */
.porthole::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 3px solid rgba(199, 160, 90, 0.55);
  box-shadow:
    inset 0 1px 2px rgba(255, 240, 215, 0.6),
    inset 0 -2px 3px rgba(70, 50, 20, 0.4);
  pointer-events: none;
  z-index: 3;
}
/* soft inner vignette so the fog recedes into the frame */
.porthole::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, transparent 52%, rgba(30, 24, 18, 0.42) 82%, rgba(20, 15, 10, 0.6) 100%);
  pointer-events: none;
  z-index: 2;
}
.porthole svg { width: 100%; height: 100%; }
.porthole .medallion-bg { display: none; }
/* the revealed medallion sits beneath the brass ring + vignette */
.porthole svg { position: relative; z-index: 1; }

/* revealed animal medallion — inset slightly, with foliage peeking behind */
.porthole .medallion-reveal {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 80%;
  margin: 10% auto;
  display: grid;
  place-items: center;
}
.porthole .medallion-reveal svg { width: 100%; height: 100%; }
/* let the foliage show through the revealed medallion — drop the parchment
   disc and accent ring entirely so the character sits straight on the flowers */
.porthole .medallion-reveal svg circle { display: none; }
.porthole .medallion-foliage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.porthole .medallion-foliage img {
  position: absolute;
  opacity: 0.6;
  filter: drop-shadow(0 2px 3px rgba(46, 42, 36, 0.22));
}
.porthole .fl--grass { left: 5%; bottom: 7%; width: 26%; transform: rotate(-6deg); }
.porthole .fl--flowers { right: 6%; bottom: 13%; width: 30%; transform: rotate(5deg); }
.porthole .fl--berries { left: 11%; top: 9%; width: 22%; transform: rotate(-8deg); }
.porthole .fl--stone { right: 9%; top: 24%; width: 24%; }
.porthole .fl--mushroom { left: 32%; bottom: 1%; width: 15%; }

/* first-find selfie nudge under the porthole */
#clue-selfie {
  margin-top: 12px;
  animation: selfie-pop 0.55s var(--spring);
}
#clue-selfie.show { animation: selfie-pop 0.55s var(--spring); }
@keyframes selfie-pop {
  from { opacity: 0; transform: translateY(6px); }
}

/* fog drifting behind the mystery question mark in the porthole */
.porthole .fog-a { animation: fog-drift 11s ease-in-out infinite alternate; }
.porthole .fog-b { animation: fog-drift 8s ease-in-out infinite alternate-reverse; }
@keyframes fog-drift {
  from { transform: translateX(-10px); }
  to { transform: translateX(10px); }
}

/* the mystery question mark — a slow, alive "stirring" bob */
.porthole .myst-q {
  transform-origin: 50% 50%;
  animation: q-stir 4.5s ease-in-out infinite;
}
@keyframes q-stir {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.92; }
  35% { transform: translateY(-4px) rotate(-2.5deg); }
  55% { transform: translateY(1px) rotate(2deg); }
  70% { transform: translateY(-1px) rotate(-1deg); }
  85% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
/* the caption — a gentle breath, peeking in and out */
.porthole .myst-caption {
  fill: #FFD98A;
  filter: drop-shadow(0 0 6px rgba(255, 190, 80, 0.55)) drop-shadow(0 1px 2px rgba(20, 14, 8, 0.8));
  animation: caption-breathe 4.5s ease-in-out infinite;
}
@keyframes caption-breathe {
  0%, 100% { opacity: 0.8; }
  45% { opacity: 1; }
}

/* the animal pops into the porthole when the player arrives */
@keyframes porthole-reveal {
  0% { opacity: 0; transform: scale(0.6); }
  70% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* decorative band that holds the arrival flourish */
#clue-flourish {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  margin-top: 10px;
  filter: drop-shadow(0 4px 8px rgba(46, 42, 36, 0.22));
}

/* Rusty's teasing line under the porthole before the animal shows */
#clue-hint {
  margin: 12px 0 4px;
  font-size: 1.02rem;
  text-align: center;
}

.clue-cards {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}
.clue-cards .cards-track {
  display: block;
}
.clue-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.clue-card.hidden { display: none; }
.clue-card .card-title,
.clue-card .nook-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--violet);
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.clue-card .lead {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.clue-card .lead + .lead { margin-top: 10px; }
.clue-card .nook-list {
  margin: 0 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clue-card .nook-list li { font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); }

/* Rusty's speech bubble — the narrator leans in for an aside */
.clue-card .rusty-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px dashed rgba(107, 74, 47, 0.28);
}
.clue-card .rusty-bubble__avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.clue-card .rusty-bubble__avatar-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 2px solid var(--wood-dark);
  background: linear-gradient(180deg, #fdf6e3, #f0dfbd);
  box-shadow: 0 2px 4px rgba(46, 42, 36, 0.28);
}
.clue-card .rusty-bubble__bubble {
  position: relative;
  flex: 1 1 auto;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 253, 244, 0.85), transparent 60%),
    linear-gradient(180deg, #fdf6e3, #f6e8c8);
  border: 2px solid var(--wood-dark);
  border-radius: 18px 18px 18px 6px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(46, 42, 36, 0.16);
}
.clue-card .rusty-bubble__bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 16px;
  width: 12px;
  height: 12px;
  background: #f8eccf;
  border-left: 2px solid var(--wood-dark);
  border-bottom: 2px solid var(--wood-dark);
  transform: rotate(45deg);
}
.clue-card .rusty-bubble .rusty-quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  transform: none;
}
.clue-card .rusty-bubble .rusty-quote::before { content: none; }
.clue-card .rusty-bubble .rusty-quote::after { content: none; }
/* ---------- clue tabs: old red wax letter-seals ---------- */
.clue-tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 0 6px;
  width: 100%;
}
.clue-tab {
  position: relative;
  flex: 1 1 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  line-height: 1.1;
  white-space: nowrap;
  color: #fdf1e0;
  min-height: 46px;
  padding: 8px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  border: none;
  /* the molten red wax blob */
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 210, 170, 0.55) 0, transparent 42%),
    radial-gradient(circle at 72% 78%, rgba(90, 18, 10, 0.5) 0, transparent 55%),
    radial-gradient(circle at 50% 50%, #c8341f 0%, #a82316 62%, #8a1c10 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 -5px 10px rgba(90, 16, 8, 0.55),
    inset 0 4px 8px rgba(255, 220, 180, 0.35),
    0 6px 12px rgba(46, 42, 36, 0.28);
  transition: transform 0.15s var(--spring), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
  /* rough, crimped edges — fractal noise nudges the wax outline like real melted wax */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cdefs%3E%3Cfilter%20id='w'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.05'%20numOctaves='2'%20seed='3'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='16'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='300'%20height='300'%20filter='url(%23w)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cdefs%3E%3Cfilter%20id='w'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.05%200.05'%20numOctaves='2'%20seed='3'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='16'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect%20width='300'%20height='300'%20filter='url(%23w)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
/* the pressed stamp ring, embossed into the wax */
.clue-tab::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  border: 2px solid rgba(70, 14, 7, 0.5);
  box-shadow:
    inset 0 1px 3px rgba(255, 225, 190, 0.35),
    inset 0 -2px 4px rgba(70, 14, 7, 0.35);
  pointer-events: none;
}
.clue-tab:hover {
  transform: translateY(-2px) rotate(-1.5deg);
  filter: brightness(1.06);
}
.clue-tab:active { transform: translateY(0) scale(0.97); }
.clue-tab.active {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 220, 185, 0.6) 0, transparent 42%),
    radial-gradient(circle at 72% 78%, rgba(120, 24, 12, 0.5) 0, transparent 55%),
    radial-gradient(circle at 50% 50%, #e0442a 0%, #c0291a 58%, #9d2012 100%);
  transform: translateY(-3px) rotate(-1.5deg);
  box-shadow:
    inset 0 -4px 9px rgba(90, 16, 8, 0.5),
    inset 0 4px 7px rgba(255, 225, 190, 0.4),
    0 0 0 4px rgba(196, 52, 31, 0.22),
    0 9px 16px rgba(46, 42, 36, 0.32);
  color: #fff6ea;
}

/* keep the three wax-seal tabs fitting on narrow phones */
@media (max-width: 480px) {
  .clue-tabs { gap: 6px; padding: 0 4px; margin: 12px 0 4px; }
  .clue-tab { font-size: 0.8rem; min-height: 40px; padding: 6px 6px; letter-spacing: 0; }
}

/* ---------- AR ---------- */
#screen-ar {
  padding: 0;
  overflow: hidden;
  background: #1c1c1c;
}
#ar-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* front (selfie) camera — mirror the raw feed so it reads like a mirror */
#ar-video.mirrored { transform: scaleX(-1); }
/* #ar-stage is the full-screen container for the layered 2D cartoon scene */
#ar-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* Boris's Matrix code-rain overlay — a full-screen falling-glyph reveal over
   the frozen AR frame. Each .boris-col is a column of green glyphs that falls
   from top to bottom on a loop; the head glyphs glow brighter (the classic
   Matrix "wake up, meadow" look). */
#ar-stage .boris-code-rain {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(10,24,14,0.05) 0%, rgba(6,18,10,0.5) 100%),
    rgba(8,20,12,0.22);
}
#ar-stage .boris-code-rain .boris-col {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Courier New", monospace;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
  animation-name: boris-rain-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
#ar-stage .boris-code-rain .boris-col > span:first-child {
  color: #d9ffe9;
  text-shadow: 0 0 10px rgba(220, 255, 235, 0.95);
}
@keyframes boris-rain-fall {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}
/* ==========================================================
   SCENE RENDER — generic layered reveal scenes (shared module)
   Styling for .sr-layer / .scene-fx is injected by js/scene-render.js
   so the app and the scene-builder preview stay identical.
   ========================================================== */

.ar-hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px);
}
.ar-hud > * { pointer-events: auto; }

.ar-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(20, 18, 12, 0.55) 100%);
  pointer-events: none;
}

.ar-nameplate {
  background: linear-gradient(180deg, #9c6f40, var(--wood));
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  padding: 10px 22px;
  color: var(--cream);
  text-align: center;
  box-shadow: 0 5px 0 var(--wood-dark), 0 10px 18px rgba(0, 0, 0, 0.35);
  animation: bob 3.2s ease-in-out infinite;
}
.ar-nameplate .n1 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.ar-nameplate .n2 { font-family: var(--font-body); font-size: 0.82rem; opacity: 0.85; }
@keyframes bob { 50% { transform: translateY(-5px); } }

.ar-cue { text-align: center; color: var(--cream); text-shadow: 0 2px 6px rgba(0,0,0,0.6); font-size: 0.95rem; }
.ar-cue .hand {
  color: #ffe9bd;
  font-family: var(--font-rusty);
  font-size: 4.6rem;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(46, 42, 36, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(232, 163, 61, 0.4);
  animation: hand-pulse 1.8s ease-in-out infinite;
}
@keyframes hand-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.ar-cue strong { color: var(--amber); }

/* Rusty's glass HUD panel — a high-tech AR field-guide readout that carries
   his rotating quip on the sighting screen. Frosted glass over the live feed,
   with Rusty's robot avatar glowing on the left. */
.rusty-glass {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  max-width: min(92vw, 460px);
  text-align: left;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  color: var(--cream);
  background: linear-gradient(180deg, rgba(28, 34, 40, 0.52), rgba(16, 20, 24, 0.58));
  border: 1px solid rgba(232, 163, 61, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 22px rgba(232, 163, 61, 0.22),
    0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(11px) saturate(1.25);
  -webkit-backdrop-filter: blur(11px) saturate(1.25);
  animation: rusty-glass-bob 3.4s ease-in-out infinite;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.rusty-glass__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 233, 168, 0.28), rgba(232, 163, 61, 0.16) 55%, transparent 70%);
  border: 1px solid rgba(255, 233, 168, 0.45);
  box-shadow: 0 0 16px rgba(232, 163, 61, 0.45), 0 0 0 4px rgba(232, 163, 61, 0.08);
}
.rusty-glass__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  display: block;
}
.rusty-glass__bubble {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-rusty);
  font-size: 1.18rem;
  line-height: 1.3;
  color: #fff6e3;
}
.rusty-glass__line { margin: 0; }
.rusty-glass__line strong {
  color: var(--amber);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(232, 163, 61, 0.55);
}
@keyframes rusty-glass-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.rusty-glass.fade-out {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  visibility: hidden;
  animation: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.6s;
}

.ar-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

.ar-exit {
  position: absolute;
  top: calc(var(--safe-top) + 14px);
  left: calc(var(--safe-left) + 14px);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(246, 239, 221, 0.92);
  border: 2px solid #d9c189;
  font-size: 20px;
  display: grid;
  place-items: center;
  color: var(--brown);
}

.sighted-stamp {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: start center;
  padding-top: calc(var(--safe-top) + 140px);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  background: radial-gradient(ellipse at center, rgba(20, 18, 12, 0.18) 40%, rgba(20, 18, 12, 0.55) 100%);
}
.sighted-stamp.show {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}
.sighted-stamp .stamp {
  transform: rotate(-12deg) scale(0.4);
  opacity: 0;
  transition: transform 0.45s var(--spring), opacity 0.3s var(--ease);
  font-family: var(--font-stencil);
  font-weight: 400;
  font-size: 2.3rem;
  color: #ffb347;
  border: 6px solid #ffb347;
  border-radius: 16px;
  padding: 12px 28px;
  text-transform: uppercase;
  letter-spacing: 3px;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 170, 60, 0.6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 179, 71, 0.3), 0 0 34px rgba(255, 150, 40, 0.55);
  background: rgba(60, 28, 6, 0.4);
}
.sighted-stamp.show .stamp { transform: rotate(-12deg) scale(1); opacity: 1; }
.sighted-stamp .stamp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sighted-stamp .stamp-logo {
  position: absolute;
  left: 16px;
  bottom: calc(var(--safe-bottom) + 68px);
  width: 150px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.sighted-stamp .stamp-logo img { width: 100%; height: auto; display: block; }
.sighted-stamp .stamp-actions {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 18px);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  max-width: calc(100% - 24px);
}
.sighted-stamp .stamp-dismiss {
  pointer-events: none;
  opacity: 0;
  font-family: var(--font-stencil);
  font-weight: 400;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
  padding: 6px 12px;
  min-height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease) 0.2s, transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
}
.sighted-stamp.show .stamp-actions,
.sighted-stamp.show .stamp-dismiss { pointer-events: auto; }
.sighted-stamp.show .stamp-dismiss { opacity: 1; }
.sighted-stamp .stamp-dismiss svg { flex: 0 0 auto; }
/* Retake — ghost redo control */
.sighted-stamp #ar-stamp-retake {
  color: var(--cream);
  background: rgba(246, 239, 221, 0.12);
  border: 2px solid rgba(246, 239, 221, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
}
.sighted-stamp #ar-stamp-retake:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.28);
}
/* Carry on adventure — amber primary trigger (matches the field-trigger) */
.sighted-stamp #ar-stamp-dismiss {
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 250, 220, 0.6), transparent 46%),
    linear-gradient(180deg, #f4c060, var(--amber));
  border: 2px solid #c07f1e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.7),
    0 3px 0 #c07f1e,
    0 8px 14px rgba(0, 0, 0, 0.3);
}
.sighted-stamp #ar-stamp-dismiss:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, 0.5), 0 1px 0 #c07f1e, 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* hide the tap target, cue, exit cross and camera controls once a photo is taken */
#screen-ar.sighted .ar-bottom { visibility: hidden; opacity: 0; }
#screen-ar.sighted .ar-exit { visibility: hidden; opacity: 0; }
#screen-ar.sighted .ar-cue { visibility: hidden; opacity: 0; }
#screen-ar.sighted .photo-console { visibility: hidden; opacity: 0; }

.ar-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #3d5a3f 0%, #6a9b5e 55%, var(--paper) 100%);
  padding: 24px;
}
.ar-backdrop svg { width: min(80vw, 420px); height: auto; }
.ar-backdrop-note { position: absolute; bottom: 130px; left: 0; right: 0; text-align: center; color: var(--cream); text-shadow: 0 2px 5px rgba(0,0,0,0.5); font-size: 0.9rem; }

/* ---------- camera debug overlay (?camdebug=1) ---------- */
#cam-debug {
  position: absolute;
  z-index: 6;
  top: calc(var(--safe-top) + 14px);
  right: 14px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(20, 18, 12, 0.78);
  color: #7df9c2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  line-height: 1.45;
  white-space: pre;
  pointer-events: none;
  border-radius: 8px;
  max-width: 46vw;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ==========================================================
   PHOTO CONSOLE — futuristic field-unit camera controls
   Frosted-glass control deck over the live sighting. Rusty-themed:
   meadow green + amber + stencil type, but clean and modern.
   ========================================================== */
.photo-console {
  position: absolute;
  right: calc(var(--safe-right) + 12px);
  top: calc(var(--safe-top) + 14px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.photo-console > * { pointer-events: auto; }

.console-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(232, 163, 61, 0.45);
  color: var(--cream);
  background: linear-gradient(180deg, rgba(28, 34, 40, 0.6), rgba(16, 20, 24, 0.68));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 18px rgba(232, 163, 61, 0.18), 0 6px 16px rgba(0,0,0,0.4);
  backdrop-filter: blur(11px) saturate(1.25);
  -webkit-backdrop-filter: blur(11px) saturate(1.25);
  font-family: var(--font-stencil);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.console-toggle svg { color: var(--amber); }

.console-panel {
  display: none;
  width: min(84vw, 360px);
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(232, 163, 61, 0.35);
  background: linear-gradient(180deg, rgba(28, 34, 40, 0.78), rgba(16, 20, 24, 0.85));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 26px rgba(232, 163, 61, 0.2), 0 12px 34px rgba(0,0,0,0.5);
  backdrop-filter: blur(13px) saturate(1.3);
  -webkit-backdrop-filter: blur(13px) saturate(1.3);
}
.photo-console.open .console-panel { display: flex; flex-direction: column; gap: 10px; }

.console-row { display: flex; flex-direction: column; gap: 5px; }
.console-label {
  font-family: var(--font-stencil);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.9;
}
.console-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.console-chips .chip {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(246, 239, 221, 0.35);
  color: var(--cream);
  background: rgba(246, 239, 221, 0.08);
  font-family: var(--font-stencil);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.console-chips .chip:active { transform: translateY(1px); }
.console-chips .chip.active {
  color: var(--ink);
  border-color: #c07f1e;
  background: linear-gradient(180deg, #f4c060, var(--amber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, 0.6);
}
.console-readout {
  min-width: 44px;
  text-align: center;
  color: #7df9c2;
  font-family: var(--font-stencil);
  font-size: 0.72rem;
}

/* ---------- core tier — always-on, big friendly controls ---------- */
.console-core { padding-bottom: 2px; }
.core-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.core-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(246, 239, 221, 0.4);
  color: var(--cream);
  background: rgba(246, 239, 221, 0.1);
  font-family: var(--font-stencil);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.core-btn svg { flex: 0 0 auto; color: var(--amber); }
.core-btn:hover { border-color: rgba(232, 163, 61, 0.6); }
.core-btn:active { transform: translateY(1px); }
.core-btn.active {
  color: var(--ink);
  border-color: #c07f1e;
  background: linear-gradient(180deg, #f4c060, var(--amber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 240, 0.6);
}
.core-btn.active svg { color: var(--ink); }

/* ---------- FUN PACK — locked card / unlocked creative kit ---------- */
.console-fun {
  border-top: 1px dashed rgba(232, 163, 61, 0.3);
  padding-top: 10px;
}
.console-fun-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(232, 163, 61, 0.45);
  background: rgba(232, 163, 61, 0.06);
}
.console-fun-lock-icon { color: var(--amber); flex: 0 0 auto; display: inline-flex; }
.console-fun-lock-title {
  font-family: var(--font-stencil);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}
.console-fun-lock-hint {
  font-family: var(--font);
  font-size: 0.74rem;
  color: var(--cream);
  opacity: 0.85;
  line-height: 1.25;
}
.console-fun.locked .console-fun-lock-hint { flex: 1 1 auto; }
.console-fun.locked .console-fun-body {
  opacity: 0.38;
  filter: saturate(0.4);
  pointer-events: none;
  user-select: none;
}
.console-fun.locked .console-fun-body .chip {
  cursor: not-allowed;
}
.console-fun:not(.locked) .console-fun-lock { display: none; }

/* ambient effects off — hides the scene's own .scene-fx particles (theme
   grades keep their own particles). */
#ar-stage.no-fx .scene-fx { display: none; }

/* ---------- themed scene modes (applied to #ar-stage) ---------- */
#ar-stage.mode-disco {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 0, 128, 0.28), transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(0, 220, 255, 0.28), transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(255, 220, 0, 0.24), transparent 45%);
  animation: disco-flash 1.2s steps(2) infinite;
}
#ar-stage.mode-disco::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0.18) 6deg, rgba(255,255,255,0) 12deg);
  animation: disco-spin 9s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes disco-flash { 50% { filter: brightness(1.35) saturate(1.6); } }
@keyframes disco-spin { to { transform: rotate(360deg); } }
/* creature bounce in disco */
#ar-stage.mode-disco [data-id="creature"] { animation: disco-bounce 0.55s ease-in-out infinite; }
@keyframes disco-bounce {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* dusk — warm violet twilight: an indigo wash with a soft amber horizon glow
   so the fireflies + stars read warmly against cool shadows */
#ar-stage.mode-dusk { filter: brightness(0.8) sepia(0.4) hue-rotate(-10deg) saturate(0.75) contrast(1.05); }
#ar-stage.mode-dusk::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 42% at 50% 100%, rgba(232, 163, 61, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(40, 24, 90, 0.6), rgba(28, 18, 64, 0.28) 50%, rgba(10, 8, 30, 0.55));
  pointer-events: none;
}

/* snow — bright, cold and crisp: a cool blue-white grade with a soft frost */
#ar-stage.mode-snow { filter: brightness(1.12) saturate(0.7) hue-rotate(-6deg) contrast(1.02); }
#ar-stage.mode-snow::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(220, 235, 255, 0.4), transparent 65%),
    linear-gradient(180deg, rgba(180, 210, 245, 0.18), rgba(210, 228, 250, 0.1) 45%, rgba(160, 190, 225, 0.28));
  pointer-events: none;
}

/* autumn — warm amber fall: a golden grade with soft burnt-orange edges */
#ar-stage.mode-autumn { filter: sepia(0.55) hue-rotate(12deg) saturate(1.25) brightness(1.02) contrast(1.04); }
#ar-stage.mode-autumn::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 105%, rgba(196, 106, 58, 0.4), transparent 68%),
    radial-gradient(ellipse at 50% 0%, transparent 55%, rgba(120, 70, 30, 0.25) 100%);
  pointer-events: none;
}

/* dandelion — a fresh spring morning: bright, airy and sunlit, so the
   drifting seed heads glow against a soft golden haze */
#ar-stage.mode-dandelion { filter: brightness(1.08) saturate(0.9) hue-rotate(-4deg) contrast(1.02); }
#ar-stage.mode-dandelion::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(255, 248, 214, 0.45), transparent 65%),
    linear-gradient(180deg, rgba(190, 220, 170, 0.12), rgba(240, 230, 190, 0.08) 55%, rgba(160, 190, 130, 0.2));
  pointer-events: none;
}
#ar-stage.mode-dandelion [data-id="creature"],
#ar-stage.mode-dandelion .sr-layer {
  filter: drop-shadow(0 0 3px rgba(255, 248, 214, 0.4));
}

/* matrix — the light live version: a green digital grade + sparse glyph rain.
   The dense full-screen code-rain is reserved for the frozen "Say crikey!" */
#ar-stage.mode-matrix { filter: brightness(0.92) sepia(0.35) hue-rotate(70deg) saturate(1.35); }
#ar-stage.mode-matrix::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(8, 20, 12, 0.35) 100%);
  pointer-events: none;
}
/* sparse live glyph rain — fewer, slower, dimmer columns than the frozen reveal */
#ar-stage .boris-code-rain.light {
  background: rgba(8, 20, 12, 0.18);
}
#ar-stage .boris-code-rain.light .boris-col {
  font-size: 14px;
  opacity: 0.5;
  color: #5fe08c;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
}
#ar-stage .boris-code-rain.light .boris-col > span:first-child {
  color: #c8ffdd;
}

/* night — a deep moonlit grade with stars and drifting fireflies, shared by
   the badger (fireflies) and bat (moon + stars) booths */
#ar-stage.mode-night { filter: brightness(0.8) saturate(0.8) hue-rotate(-16deg) contrast(1.06); }
#ar-stage.mode-night::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(150, 170, 235, 0.28), transparent 65%),
    linear-gradient(180deg, rgba(12, 16, 48, 0.5), rgba(8, 10, 32, 0.3) 55%, rgba(4, 6, 20, 0.55));
  pointer-events: none;
}
#ar-stage.mode-night [data-id="creature"],
#ar-stage.mode-night .sr-layer {
  filter: drop-shadow(0 0 4px rgba(180, 200, 255, 0.4));
}

/* ---------- photo filters (frozen frame, applied to #ar-stage) ---------- */
#ar-stage.filter-sepia { filter: sepia(0.85) contrast(1.05); }
#ar-stage.filter-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(10, 8, 4, 0.62) 100%);
  pointer-events: none;
  z-index: 10;
}
#ar-stage.filter-none::after { content: none; }

/* ---------- photo frames ---------- */
/* Polaroid: a grubby, aged instant-photo frame around a TRANSPARENT centre so
   the photo shows through. The dirty paper ring sits outside the element's box
   (inset to the photo area), leaving the middle clear. Rotated slightly so it
   reads as a real, hand-held, slightly-misaligned print — never a crisp UI box. */
#ar-stage.frame-polaroid::before {
  content: "";
  position: absolute;
  inset: 3.5%;
  z-index: 12;
  background: transparent;
  border-radius: 5px 7px 6px 8px;
  transform: rotate(-1.6deg);
  pointer-events: none;
  /* the grubby paper mat — built from layered, uneven box-shadows so the
     edges are ragged and worn rather than one clean ring */
  box-shadow:
    /* soiled cream paper — slightly patchy across the width */
    0 0 0 15px #dfd2b0,
    0 0 0 16px rgba(120, 96, 58, 0.16),
    0 0 0 21px #d6c7a3,
    0 0 0 22px rgba(96, 74, 42, 0.20),
    0 0 0 26px #cdbd97,
    0 0 0 27px rgba(84, 64, 36, 0.16),
    /* dirt smudge speckle across the paper */
    inset 0 0 60px rgba(120, 92, 52, 0.22),
    /* heavy, warm, aged drop shadow beneath the whole print */
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.4);
}
/* a faint grime + fingerprint wash over the paper so it never reads clean.
   Doubled class keeps this beating filter-none/filter-vignette's ::after. */
#ar-stage.frame-polaroid.frame-polaroid::after {
  content: "";
  position: absolute;
  inset: 3.5%;
  z-index: 13;
  border-radius: 5px 7px 6px 8px;
  transform: rotate(-1.6deg);
  pointer-events: none;
  background:
    radial-gradient(18% 14% at 18% 26%, rgba(96, 74, 42, 0.16), transparent 60%),
    radial-gradient(24% 18% at 82% 70%, rgba(84, 64, 36, 0.14), transparent 62%),
    radial-gradient(40% 26% at 64% 12%, rgba(110, 88, 50, 0.12), transparent 66%),
    radial-gradient(12% 10% at 46% 88%, rgba(70, 54, 30, 0.18), transparent 60%),
    repeating-linear-gradient(115deg, rgba(70, 54, 30, 0.035) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(24deg, rgba(120, 96, 58, 0.028) 0 3px, transparent 3px 9px);
}
#ar-stage.frame-plain::before {
  content: "";
  position: absolute;
  inset: 2.5%;
  z-index: 12;
  border: 6px solid rgba(246, 239, 221, 0.92);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* ---------- map hidden-hare hint ---------- */
.hidden-hint { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }

/* ---------- clue screen Boris nod ---------- */
.clue-hare {
  margin-top: 14px;
  font-size: 0.86rem;
  opacity: 0.85;
  text-align: center;
}

/* ---------- journal photo gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.gallery-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ink);
  box-shadow: 0 3px 10px rgba(46, 42, 36, 0.2);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.gallery-emblem {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  cursor: default;
}
.gallery-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 18, 12, 0.72);
  color: var(--cream);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.gallery-empty { font-size: 0.9rem; opacity: 0.8; }
.gallery-lightbox img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 12px;
}
.gallery-lightbox { display: flex; flex-direction: column; align-items: center; }


/* ---------- celebration ---------- */
.celebrate-scene { position: relative; width: 100%; max-width: 480px; margin: 0 auto 8px; }
.celebrate-scene svg { width: 100%; height: auto; }

.confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 3px;
  animation: confetti-fall linear forwards;
  pointer-events: none;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.85; }
}

/* acorn score shelf — a wooden plank (same recipe as the sign buttons /
   medallions) that the Comfy-rendered watercolour acorn stands on. */
.score-shelf {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 18px 6px;
  background: linear-gradient(180deg, #9c6f40, var(--wood));
  border: 2px solid var(--wood-dark);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--wood-dark), 0 8px 14px rgba(46, 42, 36, 0.2),
    inset 0 2px 6px rgba(255, 250, 230, 0.28);
}
.score-shelf__acorn {
  height: 64px;
  width: auto;
  margin-bottom: -6px;
  filter: drop-shadow(0 6px 8px rgba(46, 42, 36, 0.3));
}
.score-shelf__score {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 4px;
}
.score-shelf__unit {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: rgba(246, 239, 221, 0.9);
}
/* watercolour acorn inside journal stat values */
.stat-acorn {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
}

.rank-card { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 420px; }
.rank-card .rank-icon { width: 64px; height: 64px; flex: 0 0 auto; }

/* Celebration actions — the primary pair sit under the speech; the remaining
   four buttons form a tidy 2x2 grid below the rank/score. */
.celebrate-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.celebrate-actions--primary {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  gap: 14px;
  padding-bottom: 16px;
}
.celebrate-actions--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 16px auto 0;
}
.celebrate-actions--grid .btn-round {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  padding: 12px 12px;
  font-size: 1rem;
  min-height: 0;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 12px);
  transform: translateX(-50%) translateY(24px);
  z-index: 950;
  width: min(92vw, 640px);
  max-width: min(92vw, 640px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--spring), opacity 0.3s var(--ease);
  padding: 8px 12px;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* badge toasts appear at the top of the screen instead of the bottom,
   and always in front of modals/overlays */
.toast.top {
  bottom: auto;
  top: calc(var(--safe-top) + 12px);
  transform: translateX(-50%) translateY(-24px);
  z-index: 2000;
}
.toast.top.show { transform: translateX(-50%) translateY(0); }

/* persistent "new version ready" banner — tappable, sits above the toast */
.update-banner {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + 12px);
  transform: translateX(-50%) translateY(-110%);
  z-index: 2100;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(92vw, 640px);
  padding: 12px 16px;
  border: none;
  border-radius: 14px;
  background: var(--ink, #2f2b26);
  color: #fdf6e3;
  font-family: var(--font-body, inherit);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s var(--spring, cubic-bezier(0.34, 1.4, 0.64, 1)), opacity 0.3s var(--ease, ease);
}
.update-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* the toast is already its own parchment box — keep Rusty's emoji but drop the
   nested box so it doesn't look boxed-in-boxed */
.toast .parchment { padding: 14px 18px; }
.toast:not(.badge-toast) .rusty-quote {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 8px 2px 8px 60px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.3;
  transform: none;
}
.toast .rusty-quote::before {
  top: 50%;
  transform: translateY(-50%);
}
.toast .rusty-quote::after { content: none; }

/* badge toasts show the earned badge icon(s) instead of Rusty's robot */
.toast.badge-toast .rusty-quote::before { content: none; }
.toast.badge-toast .rusty-quote { padding-left: 2px; text-align: center; }
.toast-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.toast-badges svg { width: 46px; height: 46px; }
.toast-secret {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet);
  border: 1.5px dashed var(--violet);
  border-radius: 999px;
  padding: 2px 10px;
  background: rgba(109, 90, 126, 0.08);
}
.toast .toast-secret + .rusty-quote { padding-top: 6px; }
.toast .code-rain {
  display: block;
  width: 96px;
  height: auto;
  margin: 2px auto 6px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

/* ---------- location-needed ---------- */
.loc-screen { justify-content: center; text-align: center; gap: 8px; }

/* ---------- set-off pre-flight ---------- */
.setoff-body { justify-content: center; text-align: center; gap: 14px; position: relative; }
.setoff-body > :not(.setoff-rocket) { position: relative; z-index: 1; }
.setoff-rocket {
  position: absolute;
  top: 6px;
  left: 5%;
  height: 270px;
  width: auto;
  opacity: 0.32;
  filter: brightness(1.15) saturate(0.85) drop-shadow(0 6px 10px rgba(46, 42, 36, 0.18));
  pointer-events: none;
  z-index: 0;
  animation: rocket-float 4.5s ease-in-out infinite;
}
@keyframes rocket-float {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(-4px); }
}
.setoff-camera {
  position: relative;
  width: min(88vw, 400px);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  border: 3px solid var(--wood);
  box-shadow: 0 8px 22px rgba(46, 42, 36, 0.22);
}
.setoff-camera video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.setoff-camera-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 22px;
  color: var(--cream);
  font-family: var(--font-hand);
  font-size: 1.15rem;
  text-align: center;
}
.setoff-camera-fallback.show { display: grid; }
.setoff-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.setoff-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-round);
  background: rgba(246, 239, 221, 0.92);
  border: 2px solid var(--line);
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.setoff-check::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9b894;
}
.setoff-check.ok { border-color: var(--meadow); color: var(--meadow); }
.setoff-check.ok::before { background: var(--meadow); }
.setoff-check.bad { border-color: var(--terracotta); color: var(--terracotta); }
.setoff-check.bad::before { background: var(--terracotta); }

/* ---------- debug ---------- */
#debug-panel {
  position: fixed;
  top: calc(var(--safe-top) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  background: rgba(28, 26, 22, 0.9);
  border: 1px solid rgba(246, 239, 221, 0.16);
  border-radius: 11px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-body);
  color: var(--cream);
}
#debug-panel.off { display: none; }

#debug-panel .debug-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 2px 0;
}
#debug-panel .debug-title {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--amber);
  border: 1px solid rgba(232, 163, 61, 0.5);
  border-radius: 5px;
  padding: 1px 5px;
  line-height: 1.4;
  flex: none;
}
#debug-panel .pos {
  font-family: var(--font-digital), monospace;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: #ffe9bd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  min-width: 0;
}

#debug-panel .debug-body {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  max-width: 100%;
}
#debug-panel .debug-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
#debug-panel .debug-group + .debug-group {
  border-left: 1px solid rgba(246, 239, 221, 0.16);
}

#debug-panel button {
  appearance: none;
  background: rgba(246, 239, 221, 0.08);
  color: var(--cream);
  border: 1px solid rgba(246, 239, 221, 0.12);
  border-radius: 7px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
#debug-panel button:hover { background: rgba(246, 239, 221, 0.18); }
#debug-panel button:active { transform: translateY(1px); }
#debug-panel button:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

#debug-panel .debug-hide {
  color: #ffe9bd;
  background: rgba(196, 106, 58, 0.55);
  border-color: rgba(196, 106, 58, 0.8);
}
#debug-panel .debug-hide:hover { background: rgba(196, 106, 58, 0.8); }

#debug-panel .debug-music button.playing {
  color: #1c1a16;
  background: var(--amber, #e8a33d);
  border-color: var(--amber, #e8a33d);
  box-shadow: 0 0 0 1px rgba(232, 163, 61, 0.6);
}
#debug-panel .debug-stop {
  color: #ffe9bd;
  background: rgba(196, 106, 58, 0.5);
  border-color: rgba(196, 106, 58, 0.75);
}
#debug-panel .debug-stop:hover { background: rgba(196, 106, 58, 0.8); }

#debug-toggle {
  position: fixed;
  right: 14px;
  bottom: calc(var(--safe-bottom) + 16px);
  z-index: 901;
  display: none;
  background: rgba(28, 26, 22, 0.9);
  color: var(--cream);
  border: 1px solid rgba(246, 239, 221, 0.16);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
#debug-toggle.show { display: block; }

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: grid;
  place-items: center;
  background: rgba(46, 42, 36, 0.55);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.modal.show { opacity: 1; pointer-events: auto; }
.modal .modal-card { width: 100%; max-width: 420px; max-height: 78vh; overflow-y: auto; }
.modal .modal-card > .modal-close {
  margin: 16px auto 0;
  display: flex;
}
/* Save-choice dialog: pin the header + action buttons, let only the long joke
   scroll between them so it fits comfortably on a phone without burying the
   buttons below the fold. */
.modal .modal-card.save-card {
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  overflow: hidden;
  padding: 16px 18px 14px;
}
.modal .save-card h2 { margin: 0 0 8px; text-align: center; }
.modal .save-card__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0 -4px;
  padding: 0 4px;
}
.modal .save-card__scroll .rusty-quote { margin: 0; }
.modal .save-card__actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(150, 110, 55, 0.3);
  flex: 0 0 auto;
}
/* compact buttons so the save dialog fits on a phone without scrolling */
.modal .save-card__actions .btn-round {
  font-size: 0.92rem;
  padding: 6px 14px;
  min-height: 0;
  border-width: 2px;
  justify-content: center;
  text-align: center;
  box-shadow: 0 3px 0 var(--wood-dark), 0 6px 10px rgba(46, 42, 36, 0.2);
}
.modal .save-card__actions .btn-round.amber { box-shadow: 0 3px 0 #c07f1e, 0 6px 10px rgba(46, 42, 36, 0.2); }
.modal .save-card__actions .btn-round:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-dark), 0 4px 6px rgba(46, 42, 36, 0.18); }
.modal .save-card__actions .btn-round.amber:active { box-shadow: 0 1px 0 #c07f1e, 0 4px 6px rgba(46, 42, 36, 0.18); }
.modal .save-card__actions .btn-text { padding: 4px 6px; font-size: 0.88rem; text-align: center; display: block; }
/* ensure the whole scrollable area never collapses to nothing */
.modal .save-card__scroll { min-height: 0; }
/* keep modal rusty-quotes compact so the dialog doesn't overflow on phones */
.modal .rusty-quote {
  font-size: 0.95rem;
  line-height: 1.25;
  padding: 8px 10px 8px 60px;
  transform: none;
}
.modal .rusty-quote::before {
  font-size: 1.15rem;
  left: 10px;
}
.modal .rusty-quote::after { content: none; }
.modal .dialog-note {
  margin-top: 18px;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--brown);
  text-align: center;
  background: rgba(246, 239, 221, 0.7);
  border: 1px solid rgba(107, 74, 47, 0.28);
  border-radius: 10px;
}
.modal .dialog-note__link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--meadow);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.modal .dialog-note__link:active { color: var(--brown); }

/* adventure-complete modal — manners checklist + closing nudge */
.completion-card { text-align: center; }
.completion-card .rusty-quote { margin-top: 12px; text-align: left; }
.completion-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--brown);
  text-align: left;
  background: rgba(246, 239, 221, 0.7);
  border: 1px solid rgba(107, 74, 47, 0.28);
  border-radius: 10px;
  cursor: pointer;
}
.completion-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--meadow);
  cursor: pointer;
}
.completion-check input[type="checkbox"]:disabled { cursor: default; }
.completion-card .btn-round { margin-top: 18px; display: inline-flex; }
/* adventure-complete card folded into the celebration page (no modal) */
.completion-card .dialog-note {
  margin-top: 18px;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--brown);
  text-align: center;
  background: rgba(246, 239, 221, 0.7);
  border: 1px solid rgba(107, 74, 47, 0.28);
  border-radius: 10px;
}

/* ---------- contact form ("send us a message") ---------- */
.contact-link { color: var(--meadow); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.contact-card { text-align: center; }
.contact-form { margin-top: 14px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.contact-field { display: flex; flex-direction: column; gap: 5px; }
.contact-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brown);
}
.contact-field input,
.contact-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(255, 253, 244, 0.7);
  border: 2px solid #d9c189;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  resize: vertical;
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--meadow);
  box-shadow: 0 0 0 3px rgba(62, 122, 78, 0.18);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(107, 74, 47, 0.55); }
.contact-msg { font-size: 0.85rem; line-height: 1.45; margin: 0; }
.contact-msg.err { color: var(--terracotta); }
.contact-msg.ok { color: var(--meadow); }
.contact-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
.contact-actions .btn-round { font-size: 1.02rem; padding: 12px 22px; min-height: 0; }
.contact-done { text-align: center; font-size: 1.05rem; line-height: 1.5; color: var(--brown); margin: 8px 0 4px; }
.contact-done strong { color: var(--meadow); }
.contact-send:disabled { opacity: 0.6; cursor: wait; transform: none; box-shadow: 0 7px 0 #c07f1e; }

/* ---------- field journal ---------- */
/* Rusty's quotes in the journal run smaller and sit clear of the blocks above */
#screen-journal .rusty-quote {
  font-size: 1rem;
  margin-top: 16px;
  transform: none;
}
#screen-journal .rusty-quote::before { font-size: 1.1rem; }
/* journal celebration actions — a side-by-side row of two smaller buttons,
   shown once the walk is complete */
.journal-celebrate-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  margin-bottom: 10px;
}
.journal-celebrate-row[hidden] { display: none; }
.journal-reset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  text-align: center;
}
.journal-reset[hidden] { display: none; }
#journal-celebrate,
#journal-selfie {
  font-size: 1.02rem;
  padding: 10px 20px;
  min-height: 44px;
}
#journal-celebrate svg,
#journal-selfie svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* "View the celebration" — gold-burst gradient, sparkles, soft celebratory glow */
#journal-celebrate {
  color: #3a2813;
  border-color: #a86a1f;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 252, 214, 0.6), transparent 50%),
    radial-gradient(circle at 78% 70%, rgba(196, 52, 31, 0.3), transparent 55%),
    linear-gradient(180deg, #f7c652 0%, #e8a33d 45%, #d98a2b 100%);
  box-shadow:
    0 7px 0 #9c6218,
    0 14px 22px rgba(46, 42, 36, 0.3),
    0 0 20px rgba(232, 163, 61, 0.4);
  animation: celebrate-glow 2.4s ease-in-out infinite;
}
#journal-celebrate svg {
  animation: celebrate-spin 6s linear infinite;
}

/* "Celebrate with the field" — meadow green with a crisp photo icon */
#journal-selfie {
  color: var(--cream);
  border-color: #2d5a39;
  background:
    radial-gradient(circle at 28% 24%, rgba(210, 240, 190, 0.4), transparent 46%),
    linear-gradient(180deg, var(--meadow-light), var(--meadow));
  box-shadow: 0 7px 0 #2d5a39, 0 14px 22px rgba(46, 42, 36, 0.28);
}

@keyframes celebrate-glow {
  0%, 100% {
    box-shadow: 0 7px 0 #9c6218, 0 14px 22px rgba(46, 42, 36, 0.3), 0 0 16px rgba(232, 163, 61, 0.35);
  }
  50% {
    box-shadow: 0 7px 0 #9c6218, 0 14px 22px rgba(46, 42, 36, 0.3), 0 0 34px rgba(255, 205, 90, 0.7);
  }
}
@keyframes celebrate-spin { to { transform: rotate(360deg); } }
.journal-creature {
  width: 104px;
  min-height: 132px;
  border: 2px solid var(--wood-dark);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbf3df, var(--paper));
  padding: 10px 8px 9px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-display);
  box-sizing: border-box;
}
.journal-creature.sighted {
  border-color: var(--amber);
  box-shadow: 0 4px 0 #b9781c, 0 0 0 3px rgba(232, 163, 61, 0.22);
}
.journal-creature.unsighted {
  filter: grayscale(0.9);
  opacity: 0.6;
}
.journal-creature-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--brown);
  text-align: center;
  line-height: 1.1;
  width: 100%;
  overflow-wrap: break-word;
}
.journal-creature.unsighted .journal-creature-name { color: var(--ink-soft); }
.journal-creature:active { transform: translateY(2px); }

.journal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.journal-stat {
  background: linear-gradient(180deg, #fbf3df, var(--paper));
  border: 2px solid var(--wood-dark);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.journal-stat .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.journal-stat .stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brown); }
.journal-stat .stat-value .acorn { display: inline-block; vertical-align: middle; margin-left: 2px; }

.journal-columns {
  display: flex;
  gap: 14px;
  width: 100%;
  margin-top: 16px;
  align-items: stretch;
}
.journal-columns .parchment {
  flex: 1 1 0;
  min-width: 0;
}
.journal-columns .parchment:first-child {
  flex: 0 0 250px;
}
@media (max-width: 700px) {
  .journal-columns {
    flex-direction: column;
    align-items: stretch;
  }
  .journal-columns .parchment:first-child { flex: 1 1 auto; }
  .rusty-glass { gap: 10px; padding: 10px 14px 10px 10px; }
  .rusty-glass__avatar { width: 38px; height: 38px; }
  .rusty-glass__bubble { font-size: 1.06rem; }
}

/* ---------- badge shelf ---------- */
/* Full-width so the grid has a definite width to distribute columns across */
.parchment.fullwidth { width: 100%; }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px 10px;
  justify-items: center;
}
.badge-tier {
  grid-column: 1 / -1;
  width: 100%;
  margin: 10px 0 -4px;
  padding-top: 14px;
  border-top: 1px dashed #d9c189;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meadow);
}
.badge-tier-count {
  float: right;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #8a6240;
  background: rgba(232, 163, 61, 0.16);
  border: 1px solid rgba(232, 163, 61, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: none;
}
/* stack bubble — "5×" pinned to the badge icon corner */
.badge .badge-icon { position: relative; }
.badge-stack {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 2;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(160deg, #e8a33d, #c46a3a);
  color: #fff;
  font-family: var(--font-digi, var(--font-display));
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 2px 0 rgba(107, 74, 47, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.55);
}
/* thin progress-to-next-tier bar + countdown label on stacked badges */
.badge-progress {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(138, 98, 64, 0.18);
  overflow: hidden;
}
.badge-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e8a33d, #3e7a4e); }
.badge-next {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #8a6240;
}
.badge-next--top { color: var(--meadow); }
.badge-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a6240;
  background: rgba(232, 163, 61, 0.14);
  border: 1px solid rgba(232, 163, 61, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 4px;
  white-space: nowrap;
}
.badge {
  position: relative;
  background: linear-gradient(180deg, #fbf3df, var(--paper));
  border: 2px solid var(--wood-dark);
  border-radius: 12px;
  padding: 8px 8px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.badge .badge-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.badge .badge-icon svg { width: 100%; height: 100%; }
.badge-name { font-family: var(--font-display); font-weight: 700; font-size: 0.84rem; color: var(--brown); line-height: 1.1; }
.badge-blurb { font-size: 0.68rem; line-height: 1.25; color: var(--ink-soft); }
.badge.unearned {
  border-style: dashed;
  filter: grayscale(0.9);
  opacity: 0.6;
}
.badge.unearned .badge-name { color: var(--ink-soft); }
.badge.earned {
  border-color: var(--amber);
  box-shadow: 0 4px 0 #b9781c, 0 0 0 3px rgba(232, 163, 61, 0.22);
}
.badge.earned.reenter {
  cursor: pointer;
  transition: transform 0.15s var(--spring), box-shadow 0.15s var(--ease);
}
.badge.earned.reenter:hover,
.badge.earned.reenter:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #b9781c, 0 0 0 3px rgba(232, 163, 61, 0.28);
}
.badge.earned.reenter:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #b9781c;
}
.badge .badge-lock {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.8rem;
  line-height: 1;
  filter: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 999px;
  transition: transform 0.2s var(--spring), background-color 0.2s var(--ease);
}
.badge .badge-lock:hover,
.badge .badge-lock:focus-visible {
  transform: scale(1.15);
  background: rgba(109, 90, 126, 0.12);
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.badge .badge-lock:active { transform: scale(0.95); }
.badge .badge-lock.showing {
  color: var(--violet);
  background: rgba(109, 90, 126, 0.14);
  box-shadow: 0 0 0 2px rgba(109, 90, 126, 0.25);
}
.badge-grid + h3 { margin-top: 14px; }
#celebrate-badges .badge-grid { margin-top: 12px; }
.celebrate-walk-badges {
  margin: 10px 0 4px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.celebrate-walk-badges strong { color: var(--brown); }

/* map HUD journal button sits beside the specimen tray */
.map-sheet .sheet-badges { flex-wrap: wrap; }
.journal-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 14px 10px;
  box-shadow: 0 4px 0 var(--wood-dark);
  letter-spacing: 0.02em;
}
.journal-map-btn svg {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .porthole, .sighted-stamp.show .stamp { transform: none; opacity: 1; }
  .porthole { transform: scale(1) rotate(0); }
  .hero-carousel__track { animation: none; transform: translateX(0); }
}

/* ---------- wide screens ---------- */
@media (min-width: 720px) {
  .screen { padding-top: calc(var(--safe-top) + 30px); }
}

/* ---------- very small screens ---------- */
/* Extra-tighten the save dialog so it never needs to scroll on tiny phones. */
@media (max-width: 360px) {
  .modal .modal-card.save-card { padding: 12px 14px 10px; }
  .modal .save-card h2 { margin-bottom: 6px; }
  .setoff-rocket { height: 180px; top: 4px; left: 3%; }
  .rusty-quote { font-size: 0.95rem; line-height: 1.28; padding: 8px 10px 8px 52px; }
  .rusty-quote::before { font-size: 1rem; width: 33px; height: 33px; left: 8px; top: 7px; }
  .rusty-quote::after { width: 70px; height: 11px; }
  .modal .rusty-quote { font-size: 0.85rem; line-height: 1.22; padding: 6px 8px 6px 52px; }
  .modal .rusty-quote::before { font-size: 1rem; left: 8px; top: 7px; }
  .modal .save-card__actions { gap: 4px; margin-top: 6px; padding-top: 6px; }
  .modal .save-card__actions .btn-round { font-size: 0.85rem; padding: 5px 10px; }
  .modal .save-card__actions .btn-text { font-size: 0.8rem; padding: 3px 4px; }
}

/* ---------- sighted-stamp actions: stack on phones so Save/Retake/Carry-on
   always fit, and keep the #SaveOurFields hashtag fully visible ---------- */
@media (max-width: 480px) {
  .sighted-stamp .stamp-actions {
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 220px;
    gap: 6px;
  }
  .sighted-stamp .stamp-actions .stamp-dismiss {
    width: 100%;
    white-space: nowrap;
    padding: 5px 10px;
    min-height: 26px;
    font-size: 0.62rem;
    gap: 5px;
  }
  .sighted-stamp .stamp-logo {
    left: 10px;
    bottom: calc(var(--safe-bottom) + 150px);
    width: 100px;
    padding: 6px 8px;
  }
  /* keep the #SaveOurFields hashtag fully on-screen */
  .sighted-stamp .stamp {
    font-size: clamp(1.1rem, 6.5vw, 2.3rem);
    letter-spacing: 2px;
    padding: 10px 20px;
    border-width: 5px;
    max-width: calc(100% - 24px);
    white-space: nowrap;
  }
}

/* ---------- Secret Squirrel gate (coming soon) ---------- */
.gate-body {
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.gate-emblem {
  margin-bottom: 4px;
  animation: gate-bob 3.4s var(--ease) infinite;
}
.gate-emblem .gate-acorn {
  height: clamp(70px, 17vw, 95px);
  width: auto;
  filter: drop-shadow(0 8px 10px rgba(46, 42, 36, 0.2));
}
@keyframes gate-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

.gate-title { color: var(--meadow); }

.gate-card {
  width: 100%;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.gate-lead { max-width: 460px; }

.gate-hint { max-width: 420px; text-align: left; }

.gate-form {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gate-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brown);
  text-align: left;
}

.gate-row { display: flex; gap: 10px; align-items: stretch; }

.gate-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--ink);
  background: #fdf7e6;
  border: 2px solid var(--wood-dark);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: inset 0 2px 0 rgba(107, 74, 47, 0.12);
}
.gate-input::placeholder { color: rgba(46, 42, 36, 0.35); font-style: italic; }

.gate-row .gate-unlock {
  padding: 12px 22px;
  min-height: 0;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.gate-error {
  font-family: var(--font-rusty);
  font-size: 1rem;
  color: var(--terracotta);
  background: rgba(196, 106, 58, 0.08);
  border: 1.5px dashed rgba(196, 106, 58, 0.5);
  border-radius: 10px;
  padding: 8px 14px;
  max-width: 420px;
}

.gate-shake { animation: gate-shake 0.45s var(--ease); }
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.gate-lock { margin-top: 2px; font-size: 0.92rem; }

@media (max-width: 480px) {
  .gate-card { padding: 20px 16px; }
  .gate-row { flex-direction: column; }
  .gate-row .gate-unlock { justify-content: center; }
}

/* ---------- FIELD WAR ROOM (choose your meadow) ---------- */
.fields-body .screen__inner { max-width: 720px; }

#fields-quote { margin-top: 18px; }

.fields-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
@media (min-width: 560px) {
  .fields-grid { grid-template-columns: 1fr 1fr; }
}

.field-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border: 2px solid #d9c189;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 3px 0 rgba(107, 74, 47, 0.18), 0 8px 16px rgba(46, 42, 36, 0.08);
}
.field-card--unmapped,
.field-card--draft {
  border-style: dashed;
  border-color: #b9a877;
  background: rgba(241, 228, 194, 0.6);
}

.field-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.field-card__emblem {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid var(--brown);
  box-shadow: 0 2px 4px rgba(46, 42, 36, 0.18);
}
.field-card__emblem--glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  background: var(--meadow);
  border-color: var(--meadow);
}
.field-card__titles { flex: 1 1 auto; min-width: 0; }
.field-card__titles h2 { font-size: 1.18rem; color: var(--brown); }
.field-card__town { font-size: 0.85rem; color: #8a6240; margin-top: 2px; }

.field-card__premier {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--amber);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 2px 0 rgba(107, 74, 47, 0.3);
}

.field-card__threat { font-size: 0.95rem; color: var(--brown); }

.field-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.field-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brown);
  background: #efe2c3;
  border: 1.5px solid #d9c189;
  border-radius: 999px;
  padding: 3px 10px;
}
.field-chip--mapped { color: #fff; background: var(--meadow); border-color: var(--meadow); }
.field-chip--defended { color: #fff; background: #4f7a3a; border-color: #4f7a3a; }
.field-chip--lost { color: #fff; background: #8a8a84; border-color: #8a8a84; }
.field-chip--unmapped { color: var(--terracotta); background: rgba(196, 106, 58, 0.1); border-color: rgba(196, 106, 58, 0.5); }
.field-chip--draft { color: #8a6240; }
.field-chip--founding { color: #6B4A2F; background: rgba(232, 163, 61, 0.16); border-color: rgba(232, 163, 61, 0.55); }

.field-card__citizens { font-size: 0.8rem; color: #8a6240; }

.field-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin-top: 2px;
}
.field-card__actions .btn-round[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
.field-card__actions .btn-text { font-size: 0.92rem; }

.fields-foot { margin-top: 18px; }

.field-card__btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.field-card__actions .field-card__btnrow .btn-round {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.92rem;
}

/* Unmapped cards — a faded, knocked-back Rusty beside a small placeholder
   button, so the card reads "not here yet" without shouting it. */
.field-card__rusty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-card__rusty-img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.32;
  filter: grayscale(0.7) sepia(0.25);
  border: 1.5px dashed rgba(107, 74, 47, 0.45);
  background: rgba(241, 228, 194, 0.35);
}
.field-card__rusty-btn {
  min-height: 32px !important;
  padding: 4px 12px !important;
  font-size: 0.78rem !important;
}

/* ---------- ROLL OF HONOUR + FIELD RANGER CLAIM ---------- */
.roll-list {
  width: 100%;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roll-tier {
  color: var(--brown);
  font-size: 0.95rem;
  margin: 8px 0 2px;
  font-family: var(--font-display);
}
.roll-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 2px solid #d9c189;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.95rem;
}
.roll-row--verified { border-color: var(--meadow); background: rgba(62, 122, 78, 0.08); }
/* founder rows — a golden laurel tier: hand-picked early adopters stand out
   wherever they appear on the roll (top 100 or the appended Founders tier). */
.roll-row--founder {
  border-color: var(--amber);
  background: linear-gradient(180deg, rgba(232, 163, 61, 0.14), rgba(196, 106, 58, 0.08));
}
.roll-row--founder .roll-rank,
.roll-row--founder .roll-handle { color: var(--terracotta); }
.roll-founder { display: inline-flex; vertical-align: -4px; margin-right: 5px; }
.roll-tier--founders { color: var(--terracotta); }
.roll-rank {
  flex: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 700;
  color: #8a6240;
}
.roll-handle { flex: 1 1 auto; font-weight: 700; color: var(--brown); }
.roll-verified { color: var(--meadow); font-weight: 800; }
.roll-field { color: #8a6240; font-size: 0.85rem; }
.roll-score { color: var(--terracotta); font-size: 0.85rem; white-space: nowrap; }
.roll-mine { margin-top: 14px; font-size: 0.9rem; color: #8a6240; }

.claim-preview {
  font-family: var(--font-rusty);
  font-size: 0.95rem;
  color: var(--meadow);
  min-height: 1.4em;
  margin: 2px 0 4px;
}
/* ============================================================================
   FIELD DIAGNOSTICS — the field unit's tune-up
   ========================================================================== */
.diag-body { max-width: 620px; }
.diag-row {
  background: #fffdf4;
  border: 1.5px solid #d9c189;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
.diag-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.diag-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brown);
}
.diag-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--brown);
  background: #efe2c3;
  border: 1.5px solid #d9c189;
}
.diag-chip--ok { color: #fff; background: var(--meadow); border-color: var(--meadow); }
.diag-chip--bad { color: #fff; background: #b0563f; border-color: #b0563f; }
.diag-chip--warn { color: var(--terracotta); background: rgba(232, 163, 61, 0.16); border-color: rgba(232, 163, 61, 0.55); }
.diag-row__detail {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #8a6240;
}
.diag-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.diag-btn { padding: 8px 14px; font-size: 0.85rem; }
.diag-btn[disabled] { opacity: 0.7; cursor: not-allowed; }
.diag-reset-toggle {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--meadow);
  text-decoration: underline;
  cursor: pointer;
}
.diag-reset {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f4ecd7;
  border: 1px dashed #c9b98a;
  border-radius: 10px;
}
.diag-reset .lead { font-size: 0.86rem; margin-top: 6px; }
.diag-reset .lead:first-child { margin-top: 0; }

/* ============================================================================
   PLAIN CAMERA — the field unit's free lens (map HUD "Camera" button)
   ========================================================================== */
/* In plain mode the photo console is a photobooth concept — hide it entirely.
   The Rusty cue is hidden via inline style from game.js; the nameplate stays
   as a quiet "Field Camera" plate. */
#screen-ar.plain .photo-console { display: none; }
#screen-ar.plain .ar-cue { display: none; }
#screen-ar.plain .ar-bottom { gap: 10px; }
#screen-ar.plain .btn-sight { background: var(--meadow); }

/* ============================================================================
   FRIENDING HUB — the meet modal (chirp + QR backup)
   ========================================================================== */
.fu-menu {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.fu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 148px;
  padding: 16px 12px;
  background: linear-gradient(180deg, #fffdf4, #f4ecd7);
  border: 2px solid #d9c189;
  border-radius: 16px;
  color: var(--brown);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 0 #c9b98a, 0 10px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
}
.fu-tile svg { color: var(--meadow); }
.fu-tile small { font-family: var(--font-body); font-weight: 400; font-size: 0.72rem; color: #8a6240; }
.fu-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9b98a, 0 4px 8px rgba(0, 0, 0, 0.2); }
.fu-people {
  margin-top: 4px;
  background: none;
  border: 0;
  color: var(--amber);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: underline;
  cursor: pointer;
}
.fu-quote {
  font-family: var(--font-rusty);
  font-size: 0.85rem;
  color: var(--cream);
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.fu-big { font-size: 0.95rem; color: var(--cream); max-width: 440px; margin: 0 auto; line-height: 1.5; }
.fu-big strong { color: var(--amber); }
.fu-name {
  font-family: var(--font-rusty);
  font-size: 1.1rem;
  color: var(--amber);
  margin: 0;
}
.fu-meta { font-size: 0.78rem; color: rgba(246, 239, 221, 0.85); margin: 0; }
.fu-qr {
  width: min(68vw, 320px);
  height: auto;
  border-radius: 14px;
  border: 4px solid #f6efdd;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: #f6efdd;
}
.fu-back {
  margin-top: 4px;
  background: none;
  border: 0;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}
.fu-scan-frame {
  position: relative;
  width: min(74vw, 340px);
  height: min(74vw, 340px);
  border-radius: 14px;
  border: 2px solid rgba(246, 239, 221, 0.4);
  overflow: hidden;
  background: rgba(20, 18, 12, 0.35);
}
.fu-scan-reticle {
  position: absolute;
  inset: 14%;
  border: 3px solid var(--amber);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
  animation: fu-reticle 2.2s ease-in-out infinite;
}
.fu-scan-reticle::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  height: 2px;
  top: 50%;
  background: rgba(232, 163, 61, 0.7);
  box-shadow: 0 0 12px rgba(232, 163, 61, 0.8);
}
@keyframes fu-reticle {
  50% { box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.3); transform: scale(1.015); }
}
.fu-scan-canvas { position: absolute; opacity: 0; pointer-events: none; width: 2px; height: 2px; }
.fu-people-list { text-align: left; margin-top: 10px; }
.fu-friend {
  padding: 10px 12px;
  background: #fffdf4;
  border: 1.5px solid #d9c189;
  border-radius: 10px;
  margin-top: 8px;
}
.fu-friend__name { font-family: var(--font-rusty); font-size: 1rem; color: var(--brown); }
.fu-friend__meta { font-size: 0.78rem; color: #8a6240; margin-top: 2px; }
.fu-protect { font-size: 0.78rem; margin-top: 14px; opacity: 0.9; }

/* ============================================================================
   CHIRP — friend by song (Meet tab)
   ========================================================================== */
.fu-tile--hero {
  width: 220px;
  padding: 20px 16px;
}
.fu-menu--stack { flex-direction: column; }
.fu-menu--stack .fu-tile--hero { width: 240px; }
.fu-chirp-orb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 250, 220, 0.35), rgba(232, 163, 61, 0.18) 55%, rgba(62, 122, 78, 0.25));
  border: 2px solid rgba(246, 239, 221, 0.5);
  display: grid;
  place-items: center;
  box-shadow: 0 0 30px rgba(232, 163, 61, 0.25);
}
.fu-chirp-orb .fu-chirp-bird { font-size: 3rem; }
.fu-chirp-orb.singing { animation: fu-chirp-pulse 0.5s ease-in-out infinite alternate; }
.fu-chirp-orb.listening { animation: fu-chirp-pulse 1.1s ease-in-out infinite alternate; }
@keyframes fu-chirp-pulse {
  from { box-shadow: 0 0 18px rgba(232, 163, 61, 0.18); transform: scale(1); }
  to { box-shadow: 0 0 42px rgba(232, 163, 61, 0.45); transform: scale(1.06); }
}

/* ============================================================================
   MEET PANEL TIDY — Chirp hero + QR backup tiles; cute floating chirp button
   ========================================================================== */
.fu-menu--backup { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fu-menu--backup .fu-tile { width: 142px; padding: 14px 10px; }
.fu-backup-quote {
  font-size: 0.76rem;
  max-width: 430px;
  margin: 8px auto 0;
  opacity: 0.92;
}

/* "Your people" modal — give the button row room to breathe above the content */
.fu-people-card .contact-actions { margin-top: 18px; }

/* ============================================================================
   MAP SHEET — first-class Chirp launcher above the Camera button
   ========================================================================== */
.map-sheet .map-triggers {
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.map-sheet .map-triggers__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.map-sheet .map-chirp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-stencil);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 250, 220, 0.6), transparent 46%),
    linear-gradient(180deg, #f4c060, var(--amber));
  border: 2px solid #c07f1e;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.7),
    0 3px 0 #c07f1e,
    0 8px 14px rgba(46, 42, 36, 0.24);
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.map-sheet .map-chirp svg { width: 16px; height: 16px; flex: 0 0 auto; }
.map-sheet .map-chirp:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.5),
    0 1px 0 #c07f1e,
    0 4px 8px rgba(46, 42, 36, 0.2);
}

/* QR scan inside the friending modal — the live camera fills the reticle frame */
.fu-scan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Journal pill — joins Chirp/Camera as a map-trigger sibling (neutral
   parchment so it doesn't compete with the amber chirp / green camera) */
.map-sheet .map-journal-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-stencil);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--brown);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 253, 240, 0.7), transparent 46%),
    linear-gradient(180deg, #faf3df, #eee0bd);
  border: 2px solid #c9b98a;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.8),
    0 3px 0 #c9b98a,
    0 8px 14px rgba(46, 42, 36, 0.24);
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.map-sheet .map-journal-trigger svg { width: 16px; height: 16px; flex: 0 0 auto; }
.map-sheet .map-journal-trigger:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.6),
    0 1px 0 #c9b98a,
    0 4px 8px rgba(46, 42, 36, 0.2);
}

/* the chirp bird — same 🐦 as the friending modal's orb */
.map-sheet .map-chirp .map-chirp__bird {
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* ALA maker's mark — sits between GPS and the clock up top */
.map-sheet .sheet-top .unit-mark { min-height: 0; padding: 4px 10px; }

/* ============================================================================
   FRIENDING HUB MODAL — polished, compact, parchment-appropriate
   (these styles were written for the dark camera backdrop; in the parchment
   modal the text needs real ink, and the layout needs to fit without scroll)
   ========================================================================== */
.fu-chirp-modal { text-align: center; padding: 14px 16px 12px; }

/* dark-on-parchment text */
.fu-chirp-modal .fu-big { color: var(--brown); }
.fu-chirp-modal .fu-big strong { color: var(--terracotta); }
.fu-chirp-modal .fu-quote { color: #8a6240; }
.fu-chirp-modal .fu-meta { color: #8a6240; }
.fu-chirp-modal .fu-name { color: var(--terracotta); }
.fu-chirp-modal .fu-back { color: var(--meadow); }

/* compact bird orb */
.fu-chirp-modal .fu-chirp-orb {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  background: radial-gradient(circle at 35% 30%, #fff8e4, rgba(232, 163, 61, 0.16) 60%, rgba(62, 122, 78, 0.1));
  border: 2px solid #d9c189;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.fu-chirp-modal .fu-chirp-orb .fu-chirp-bird { font-size: 1.6rem; }
.fu-chirp-modal .fu-chirp-orb.singing,
.fu-chirp-modal .fu-chirp-orb.listening { box-shadow: 0 0 22px rgba(232, 163, 61, 0.35); }

/* sing/listen side by side, compact tiles */
.fu-chirp-modal .fu-big { margin-top: 8px; font-size: 0.88rem; line-height: 1.35; }
.fu-chirp-modal .fu-menu { gap: 8px; }
.fu-chirp-modal .fu-menu--stack { flex-direction: row; }
.fu-chirp-modal .fu-menu--stack .fu-tile--hero,
.fu-chirp-modal .fu-menu--backup .fu-tile { width: auto; flex: 1 1 0; padding: 9px 8px; }
.fu-chirp-modal .fu-tile { gap: 2px; font-size: 0.9rem; }
.fu-chirp-modal .fu-tile svg { width: 18px; height: 18px; }
.fu-chirp-modal .fu-tile small { font-size: 0.64rem; line-height: 1.15; }

/* breathing room between the orb/title, the chirp buttons and the QR backup */
.fu-chirp-modal .fu-menu--stack { margin-top: 10px; }
.fu-chirp-modal .fu-menu--backup { margin-top: 12px; }

/* tidy the footer */
.fu-chirp-modal .fu-backup-quote { font-size: 0.68rem; line-height: 1.3; margin: 8px auto 3px; color: #8a6240; }
.fu-chirp-modal .fu-people { margin-top: 4px; }
.fu-chirp-modal .fu-back { margin-top: 6px; }

/* QR view — fit the code nicely without scroll */
.fu-chirp-modal .fu-qr { width: min(62vw, 280px); margin: 4px auto 6px; }

/* scan view — keep the frame compact inside the modal */
.fu-chirp-modal .fu-scan-frame { width: min(64vw, 300px); height: min(64vw, 300px); margin: 0 auto; }
.fu-chirp-modal .fu-scan-frame .fu-scan-video { border-radius: 12px; }

/* proper, compact buttons in the friending modal (replaces the oversized
   .btn-round and the underlined-text .fu-back links) */
.fu-chirp-modal .btn-round {
  padding: 10px 20px;
  font-size: 0.95rem;
  min-height: 0;
  border-width: 2px;
  box-shadow: 0 4px 0 var(--wood-dark), 0 8px 12px rgba(46, 42, 36, 0.18);
}
.fu-chirp-modal .btn-round:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--wood-dark), 0 4px 6px rgba(46, 42, 36, 0.15);
}
.fu-chirp-modal .fu-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brown);
  background: #fffdf4;
  border: 2px solid #d9c189;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 #c9b98a;
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
}
.fu-chirp-modal .fu-back:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #c9b98a;
}
.fu-chirp-modal .fu-people {
  background: none;
  border: 0;
  color: var(--terracotta);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: underline;
  margin-top: 8px;
  cursor: pointer;
}

/* Kiosk feel — no double-tap-zoom anywhere (pinch is blocked in JS, map excepted).
   Keeps single-finger scrolling intact. */
html, body { touch-action: manipulation; }

/* The photobooth's field-name plate — a quiet caption at the bottom, same
   wood-plate family as the top nameplate but smaller and still. */
.ar-nameplate--field {
  padding: 6px 16px;
  border-width: 2px;
  border-radius: 10px;
  animation: none;
  box-shadow: 0 3px 0 var(--wood-dark), 0 8px 14px rgba(0, 0, 0, 0.3);
}
.ar-nameplate--field .n1 { font-size: 0.92rem; }
.ar-nameplate--field .n2 { font-size: 0.72rem; }

/* Burn-the-photos — journal "Your photos" header + embers flourish */
.journal-burn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: #b0563f;
  background: none;
  border: 1.5px solid rgba(176, 86, 63, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.journal-burn:hover { background: rgba(176, 86, 63, 0.12); }
.gallery-grid { position: relative; }
.gallery-grid.burning { filter: brightness(1.12) sepia(0.35); transition: filter 0.2s var(--ease); }
.ember {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd76a, #e8a33d 60%, transparent);
  opacity: 0;
  animation: ember-rise 0.9s ease-in forwards;
  pointer-events: none;
}
@keyframes ember-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px) scale(1.25); }
}

/* Share a photo — mirrors the delete button, sits on the left so they don't clash */
.gallery-share {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(62, 122, 78, 0.85);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Secondary button — the quiet "carry on" of a button row, matching the
   pill family without shouting (used for 'Never mind' in the save choice). */
.btn-round--ghost {
  background: #fffdf4;
  border-color: #c9b98a;
  color: var(--brown);
  box-shadow: 0 5px 0 #c9b98a, 0 10px 16px rgba(46, 42, 36, 0.12);
}
.btn-round--ghost:active {
  box-shadow: 0 1px 0 #c9b98a, 0 4px 8px rgba(46, 42, 36, 0.1);
}

/* Journal action rows — the celebrate + nav pills sit right below "Your
   creatures", centred and aligned with one another */
.journal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 4px;
}
.journal-actions .btn-round--ghost { padding: 13px 24px; font-size: 1rem; }

/* Journal identity card — the ranger's name, or a nudge to claim one */
.journal-identity { padding: 14px 16px; }
.ji-claimed {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ji-avatar { font-size: 1.7rem; }
.ji-meta { flex: 1 1 0; min-width: 180px; }
.ji-label {
  font-family: var(--font-stencil);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--meadow);
  text-transform: uppercase;
}
.ji-name { font-family: var(--font-rusty); font-size: 1.35rem; color: var(--brown); }
.ji-note { font-size: 0.82rem; color: #8a6240; }
.ji-change { padding: 9px 18px; font-size: 0.88rem; }
.ji-unclaimed { text-align: center; }
.ji-unclaimed .rusty-quote { font-size: 0.86rem; }
.ji-cta { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.ji-steps { margin-top: 12px; text-align: left; background: #f4ecd7; border: 1px dashed #c9b98a; border-radius: 10px; padding: 10px 14px; }

/* ============================================================================
   LANDING ACCORDIONS — single-open collapsible intro sections
   ========================================================================== */
.accordion { width: 100%; }
.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: #fffdf4;
  border: 2px solid #d9c189;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brown);
  box-shadow: 0 3px 0 #c9b98a;
  transition: transform 0.12s var(--spring), box-shadow 0.12s var(--ease);
  text-align: left;
}
.accordion__head:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9b98a; }
.accordion__chevron {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: var(--amber);
  transition: transform 0.3s var(--ease);
}
.accordion.open .accordion__chevron { transform: rotate(180deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.accordion.open .accordion__panel { grid-template-rows: 1fr; }
.accordion__inner { overflow: hidden; }
.accordion.open .accordion__inner { overflow: visible; }
.accordion__inner .parchment { margin-top: 10px; }

/* War-room status board — the front line at a glance */
.fields-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.fields-stat {
  flex: 1 1 90px;
  max-width: 130px;
  background: #fffdf4;
  border: 2px solid #d9c189;
  border-radius: 14px;
  padding: 10px 8px 8px;
  text-align: center;
  box-shadow: 0 3px 0 #c9b98a;
}
.fields-stat__n { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--brown); }
.fields-stat__l { font-size: 0.72rem; color: #8a6240; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }
.fields-stat--won .fields-stat__n { color: #4f7a3a; }
.fields-stat--lost .fields-stat__n { color: #8a8a84; }
.fields-stat--scanning .fields-stat__n { color: var(--terracotta); }
.fields-stat--mine .fields-stat__n { color: var(--meadow); }
.fields-stats__quote { width: 100%; font-size: 0.82rem; color: #8a6240; margin: 10px 0 0; text-align: center; }

/* Your fields — the fields you've actually walked */
.fields-mine { text-align: left; }
.fields-mine__row { padding: 10px 12px; background: #fffdf4; border: 1.5px solid #d9c189; border-radius: 10px; margin-top: 8px; }
.fields-mine__name { font-family: var(--font-display); font-weight: 700; color: var(--brown); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fields-mine__meta { font-size: 0.78rem; color: #8a6240; margin-top: 2px; }