/* Race Across the Middle Bit: the dark game look in Pemmican colours (docs/brand-upgrade.md, 18 Oct).
   Ink ground on every screen, Ink-raised cards with a 1 px bone outline, Sun for pixel numbers and the ONE
   marker per screen, Jade for buttons, Ember only at display size (volcano, finished moments).
   Contrast (WCAG): bone on ink 12.6:1, bone on raised 9.8:1, dim on raised 5.6:1, ink on jade 8.2:1, ink on sun 9:1.
   Nothing in the UI is red, ever. */
/* Jersey 15 (SIL OFL, static/vendor/fonts), the pixel font. Drawn smaller than Pixelify was, so it's scaled up here
   once instead of in every rule. */
@font-face { font-family: "Jersey 15"; src: url("/static/vendor/fonts/jersey-15-latin-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; size-adjust: 124%; }

:root {
  --ground: #06343D;      /* Ink: the dark ground on every screen */
  --raised: #0B4651;      /* Ink raised: cards, sheets, the map HUD */
  --deep: #042930;        /* block sides and shadows under raised things */
  --bone: #FBF7F2;        /* body text, 1 px card outlines */
  --dim: #A8C3C4;         /* secondary text (5.6:1 on raised) */
  --line: rgba(251, 247, 242, .16);   /* dividers inside cards */
  --outline: rgba(251, 247, 242, .9); /* the 1 px card outline */
  --sun: #FFCE00;         /* pixel numbers, the marker, the corner tab */
  --jade: #00E5B8;        /* buttons, cheers */
  --jade-lit: #8DF7E0;    /* the lit top edge of a button */
  --jade-side: #00A386;   /* the block side of a button */
  --ember: #E0691A;       /* display size only */
  --on-light: #06343D;    /* text on Sun or Jade */
  --silver: #C9D6D6;      /* the Trail Elders (teal is for water only) */
  --grass: #8DAE5A;
  --grass-dark: #5F8C3E;
  --pixel-font: "Jersey 15", "Arial Narrow", sans-serif;   /* numbers, stop plates, map labels, item names (Drazen, 18 Oct: replaced Pixelify, whose 5 read as an 8) */
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;   /* buttons, big moments, a few titles: always uppercase */
  --body-font: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --side: 5px;
  /* older names, kept so every rule speaks the same palette */
  --sand: var(--ground); --paper: var(--raised); --ink: var(--bone); --muted: var(--dim); --soil: var(--line);
  --soil-dark: var(--deep); --mustard: var(--jade); --mustard-side: var(--jade-side); --water-deep: var(--sun);
  --water: #3E8F94; --tangerine: var(--ember);
  --hud: var(--raised); --hud-solid: var(--raised); --hud-line: var(--line); --hud-ink: var(--bone);
  --hud-dim: var(--dim); --gold: var(--sun); --moss: #9DAD72; --teal-ink: var(--silver);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font: 16px/1.5 var(--body-font);
  font-synthesis: none;   /* Anton and Jersey 15 come in one weight: no smeared fake bold on pixel text */
}

a { color: var(--water-deep); text-underline-offset: 3px; }
img.pixel-art, .pixel-art { image-rendering: pixelated; }
[x-cloak] { display: none !important; }

h1, h2, .big { font-family: var(--body-font); font-weight: 700; line-height: 1.1; margin: 0; }
h1 { font: 400 40px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: 21px; }
.accent { color: var(--sun); }

.label { font: 700 11px/1.3 var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* --- the card: Ink raised, 1 px bone outline, a small Sun tab on the top edge --- */
.box, .g-card, .card {
  position: relative; background: var(--raised); color: var(--bone);
  border: 1px solid var(--outline); border-radius: 4px; padding: 16px 18px;
}
.box::before, .g-card::before, .card::before {
  content: ""; position: absolute; top: -1px; left: 16px; width: 22px; height: 5px; background: var(--sun);
}
.box.dim { border-color: var(--line); }
.box.dim::before, .no-tab::before { display: none; }
.dialog::before { content: "* "; color: var(--sun); font-weight: 700; }

/* --- the ONE marker per screen: a pixel-stepped Sun block behind the phrase that matters --- */
.mark {
  display: inline-block; padding: .02em .28em 0; background: var(--sun); color: var(--on-light);
  font: 400 1em/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}

/* --- buttons: style B3, a jade pixel block (stepped corners, lit top edge, a block side that presses in),
       label in Anton uppercase. Secondary buttons are the same block in Ink raised. --- */
.btn, .g-btn {
  --btn-bg: var(--raised); --btn-ink: var(--bone); --btn-lit: rgba(251, 247, 242, .22); --btn-side: var(--deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 3px 18px 7px; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 400 18px/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
  color: var(--btn-ink); background: var(--btn-bg);
  box-shadow: inset 0 3px 0 var(--btn-lit), inset 0 -5px 0 var(--btn-side), inset 0 0 0 1px var(--line);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.btn.primary, .g-btn.primary { --btn-bg: var(--jade); --btn-ink: var(--on-light); --btn-lit: var(--jade-lit); --btn-side: var(--jade-side);
  box-shadow: inset 0 3px 0 var(--btn-lit), inset 0 -5px 0 var(--btn-side); }
.btn:hover, .g-btn:hover { filter: brightness(1.07); }
.btn:active, .g-btn:active { transform: translateY(2px); padding-bottom: 4px;
  box-shadow: inset 0 3px 0 var(--btn-lit), inset 0 -2px 0 var(--btn-side); }
.btn:focus-visible, .g-btn:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 3px;
}
.btn.small, .g-btn.small { min-height: 38px; padding: 2px 12px 6px; font-size: 15px; }
.btn[disabled], .g-btn[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.4); transform: none; }

/* --- shop buttons: style D, the Anton pill with a hard pixel drop. Only for buttons that leave the game
       for the shop (Claim gift, product links). --- */
.btn-shop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 2px 22px 0;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 400 18px/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
  color: var(--on-light); background: var(--jade); box-shadow: 4px 4px 0 var(--bone);
}
.btn-shop:hover { filter: brightness(1.07); }
.btn-shop:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--bone); }
.btn-shop::after { content: "↗"; font-family: var(--body-font); font-weight: 700; }

.btn:focus-visible, .g-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--sun), inset 0 -5px 0 var(--btn-side); }

.text-btn {
  min-height: 44px; min-width: 44px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 15px var(--body-font); color: var(--dim); text-decoration: underline; text-underline-offset: 3px;
}
.text-btn:hover { color: var(--bone); }

/* --- forms --- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
input, select {
  width: 100%; min-height: 48px; padding: 0 12px; margin: 0;
  font: 17px var(--body-font); font-variant-numeric: tabular-nums;
  color: var(--bone); background: var(--ground); border: 1px solid var(--outline); border-radius: 4px; color-scheme: dark;
}
input:focus, select:focus { border-color: var(--sun); }
input::placeholder { color: rgba(168, 195, 196, .7); }

/* Two-option toggle (treadmill / outdoor) built from radio buttons. */
.toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--outline); border-radius: 4px; overflow: hidden; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle label {
  display: flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer;
  font: 400 17px var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--dim); background: transparent;
}
.toggle label:hover { color: var(--bone); }
.toggle input:checked + label { background: var(--jade); color: var(--on-light); }
.toggle input:focus-visible + label { outline: 3px solid var(--sun); outline-offset: -5px; }

/* --- page shell --- */
.test-mode {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 2000;
  padding: 2px 10px; white-space: nowrap; font: 700 12px var(--body-font); letter-spacing: .04em;
  background: var(--ember); color: var(--on-light);
}
.page { max-width: 560px; margin: 0 auto; padding: 32px 16px 48px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.topbar a { font: 700 15px var(--body-font); color: var(--bone); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
section { margin-top: 32px; }
section > .label:first-child { display: block; margin-bottom: 12px; }
.flush { margin: 0; }

/* --- Me hero: a slice of the island above a paper panel (art never sits behind text) --- */
.scene-card { padding: 0; overflow: hidden; }
.scene-card .scene {
  height: 150px; border-bottom: 3px solid var(--soil);
  background: var(--sand) url("/static/map/preview.webp") 92% 44% / 330% auto no-repeat;
  image-rendering: pixelated;
}
.scene-card .body { padding: 16px 18px 14px; }
.big-number { font: 700 64px/0.9 var(--pixel-font); }
.big-number small { font: 600 14px var(--pixel-font); color: var(--muted); margin-left: 6px; }
.title-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 700 19px var(--body-font); }
.title-row img { width: 54px; image-rendering: pixelated; }
.stats { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column; gap: 2px; }
.stats b { font: 700 22px var(--pixel-font); }

/* --- the week: 7 tiles. Walked = raised grass. Not walked = flat sand. Never red. --- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.week .day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.week .sq { width: 100%; max-width: 34px; aspect-ratio: 1; background: var(--sand); border: 2px solid var(--soil); }
.week .sq.walked { background: var(--grass); border-color: var(--grass-dark); box-shadow: 0 4px 0 var(--soil); transform: translateY(-4px); }
.week .today .label { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- ledger --- */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ledger .km { font: 700 22px var(--pixel-font); text-align: right; }
.ledger .what { color: var(--muted); font-size: 14px; }
.ledger form { grid-column: 2; text-align: right; }

.clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clocks .box b { display: block; font: 700 24px var(--pixel-font); margin-top: 4px; }
.clocks .box span { display: block; font-size: 14px; color: var(--muted); }

.rest-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.rest-list li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.rest-list .icon { color: #C25400; }

/* --- login / join --- */
.hero .mascot { width: 112px; height: auto; margin-bottom: 20px; filter: drop-shadow(0 6px 0 var(--deep)); }
.hero h1 { font-size: 52px; line-height: 1.02; }
.hero .lede { margin: 16px 0 6px; color: var(--bone); font-size: 18px; }
.hero > .g-dim { margin: 0 0 24px; }
.login-footer { margin: 28px 0 0; font-size: 14px; color: var(--dim); font-style: italic; }
.hero .box { margin-bottom: 24px; }
.box.stack p { margin: 0; }

/* --- stops list --- */
.stops { list-style: none; padding: 0; margin: 0; }
.stops li { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stops .km { font-family: var(--pixel-font); white-space: nowrap; }
.stops .crater { color: var(--ember); font-weight: 600; }

/* === map page === */
#map { position: fixed; inset: 0; background: var(--sand); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 1500; background: rgba(23, 19, 16, 0.35); }
.sheet {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 1600;
  max-width: 560px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; padding: 20px 18px 14px;
  max-height: 88vh;
  max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));   /* dvh: the height you can see, Safari toolbars and all */
}
.sheet h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sheet .intro { margin: 0; color: var(--muted); }
.sheet .actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 6px; }

/* --- map layers (built in map.js). Stops and bison are pixel art, scaled with the zoom. --- */
#map { background: #3C8E91; }                         /* the sea, so panning past the edge looks right */
.zpixel, .leaflet-tile { image-rendering: pixelated; }
.map-far .leaflet-tile, .map-far .stop-sprite, .map-far .stop-glow, .map-far .bison i, .map-far .bison .ph { image-rendering: auto; }
.stop-sprite, .stop-glow, .bison { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.stop-sprite, .stop-glow { background-repeat: no-repeat; image-rendering: pixelated; }
.stop-sprite { cursor: pointer; }
.stop-sprite:focus-visible { outline: 3px dashed var(--water-deep); outline-offset: 4px; }

/* The glow: a gold outline hugging the stop, like an "interact" highlight in a game.
   The next stop pulses and sparkles; any stop lights up on hover. */
.stop-glow { pointer-events: none; opacity: 0; transition: opacity .25s; }
.stop-glow.hover { opacity: .8; }
.stop-glow.next { opacity: 1; animation: glow-pulse 1.6s ease-in-out infinite; }
.stop-glow.burst { opacity: 1; animation: glow-burst 1.8s ease-out 1; }
.stop-glow .spark { position: absolute; width: 8px; height: 8px; background: #FFF3C9; box-shadow: 0 0 0 2px rgba(224, 169, 59, .6); opacity: 0; display: none; }
.stop-glow.next .spark, .stop-glow.burst .spark { display: block; animation: spark-rise 2.4s linear infinite; }
@keyframes glow-pulse { 0%, 100% { opacity: .55; filter: brightness(.95); } 50% { opacity: 1; filter: brightness(1.25); } }
@keyframes glow-burst { 0% { opacity: 1; filter: brightness(2.2); } 60% { opacity: 1; } 100% { opacity: 0; filter: brightness(1); } }
@keyframes spark-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }

/* Bison: a sprite sheet per facing. Frames 0-11 idle (breathing, a blink), 12-15 walking. */
.bison .hop { position: relative; transform-origin: 50% 100%; }   /* above the pace ring */
.bison i { display: block; background-repeat: no-repeat; image-rendering: pixelated; animation: bison-idle 2.4s steps(12) infinite; }
.bison.walking i { animation: bison-walk .8s steps(8) infinite; }
/* the grey stand-in while the sheet loads (map.js); gone once it has */
.bison .ph { position: absolute; left: 0; top: 0; background-repeat: no-repeat; image-rendering: pixelated; pointer-events: none;
  animation: bison-ph 1.1s ease-in-out infinite alternate; }
.bison .ph.se { background-image: var(--ph-se); } .bison .ph.sw { background-image: var(--ph-sw); }
.bison .ph.ne { background-image: var(--ph-ne); } .bison .ph.nw { background-image: var(--ph-nw); }
.bison.ready .ph { display: none; }
@keyframes bison-ph { from { opacity: .7; } to { opacity: 1; } }
.bison.cheer .hop { animation: bison-hop .45s ease-out 3; }
@keyframes bison-idle { from { background-position: 0 0; } to { background-position: calc(var(--fw) * -12) 0; } }
@keyframes bison-walk { from { background-position: calc(var(--fw) * -12) 0; } to { background-position: calc(var(--fw) * -20) 0; } }
@keyframes bison-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-36px) scaleY(1.04); } 70% { transform: translateY(0) scaleY(.94); } }

/* Labels keep their size at any zoom. */
.map-label { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; }
.map-label > div { transform: translate(-50%, -100%); }
.map-label .pill {
  padding: 0 7px; font: 600 14px var(--pixel-font); color: var(--ink); background: var(--paper);
  border: 2px solid var(--soil); box-shadow: 0 3px 0 var(--soil-dark);
}
.map-label .pill.me { background: var(--mustard); border-color: var(--soil-dark); z-index: 2; }
.map-label .stop-badge {
  width: 26px; height: 26px; display: grid; place-items: center; font: 700 15px var(--pixel-font);
  background: var(--grass); border: 2px solid var(--grass-dark); color: var(--ink); box-shadow: 0 3px 0 var(--soil);
}
.map-label .stop-hover { padding: 4px 9px; font: 700 15px var(--pixel-font); background: var(--paper); border: 2px solid var(--soil); box-shadow: 0 3px 0 var(--soil-dark); }
.map-label .next-pin {
  display: flex; flex-direction: column; align-items: center; padding: 6px 12px 7px; text-align: center;
  background: var(--paper); border: 3px solid var(--mustard-side); box-shadow: 0 4px 0 var(--soil-dark);
  animation: pin-bob 1.2s ease-in-out infinite;
}
.map-label .next-pin b { font: 700 17px/1.15 var(--pixel-font); }
.map-label .next-pin .label { font-size: 12px; }
@keyframes pin-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }

/* Checkpoint celebration */
#confetti { position: fixed; inset: 0; z-index: 1700; pointer-events: none; }
.checkpoint {
  position: fixed; top: 22%; left: 50%; z-index: 1750; transform: translate(-50%, 0);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 26px 16px; text-align: center;
  border-color: var(--mustard-side); box-shadow: 0 var(--side) 0 var(--soil-dark), 0 0 0 6px rgba(224, 169, 59, .35);
}
.checkpoint b { font: 700 30px/1.1 var(--pixel-font); }
.checkpoint.show { animation: checkpoint-in .5s cubic-bezier(.2, 1.4, .4, 1) 1; }
@keyframes checkpoint-in { from { transform: translate(-50%, -40px) scale(.8); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.stop-card h2 { margin: 4px 0 8px; }
.stop-card p { margin: 0 0 10px; }
.stop-card .found { font: 700 16px var(--body-font); color: var(--sun); }
.stop-card .actions { grid-template-columns: 1fr 1fr; }
.stop-card .actions .btn[hidden] + .btn { grid-column: 1 / -1; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .stop-glow.next, .map-label .next-pin, .stop-glow .spark, .bison i, .bison .ph, .bison.cheer .hop, .checkpoint.show { animation: none !important; }
  .stop-glow.next { opacity: 1; }
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--paper); color: var(--ink); border-radius: 0; box-shadow: 0 0 0 3px var(--soil), 0 6px 0 3px var(--soil-dark);
}
.leaflet-popup-content { margin: 10px 14px; font: 700 17px var(--pixel-font); }
.leaflet-popup-content .label { display: block; margin-top: 4px; max-width: 230px; font: 14px/1.4 system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--muted); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

/* Trail Elders explainer: a native <details>, so it opens by tap, click or keyboard. No hover needed. */
details.elders summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; }
details.elders summary::-webkit-details-marker { display: none; }
details.elders summary .label::after { content: " ⓘ"; }
details.elders[open] { max-width: 250px; }
details.elders p { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.elders-note { margin: 12px 4px 0; font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* Desktop: same layout, more room. */
@media (min-width: 768px) {
  .page { padding-top: 56px; }
}

/* === character builder (/bison) === */
.builder h1 { font-size: 34px; }
.stage { position: relative; height: 300px; padding: 0; overflow: hidden; background: #A7C46E; }
.stage-ground { position: absolute; inset: auto 0 0 0; height: 46%; background: repeating-linear-gradient(135deg, #8DAE5A 0 12px, #86A754 12px 24px); border-top: 3px solid #5F8C3E; }
.stage-bison { position: absolute; left: 50%; top: 66%; }
.stage-bison i { display: block; background-repeat: no-repeat; image-rendering: pixelated; animation: bison-idle 2.4s steps(12) infinite; }
.stage-bison i.walking { animation: bison-walk .8s steps(8) infinite; }
.stage-controls { position: absolute; left: 8px; right: 8px; bottom: 4px; display: flex; justify-content: center; gap: 8px; }
.stage-controls .btn { min-height: 40px; padding: 0 12px; font-size: 16px; }
.pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.pick legend { margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 14px; cursor: pointer; font: 700 15px var(--body-font); color: var(--ink);
  background: var(--paper); border: 3px solid var(--soil); box-shadow: 0 4px 0 var(--soil-dark); margin-bottom: 4px;
}
.chip[aria-pressed="true"], .tile[aria-pressed="true"] { background: var(--mustard); border-color: var(--soil-dark); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; cursor: pointer; min-width: 0;
  font: 600 14px/1.15 var(--body-font); color: var(--ink); text-align: center;
  background: var(--paper); border: 3px solid var(--soil); box-shadow: 0 4px 0 var(--soil-dark); margin-bottom: 4px;
}
.tile small { font: 12px/1.2 system-ui, sans-serif; color: var(--muted); }
.tile.locked { opacity: .6; cursor: not-allowed; }
.tile .thumb { width: 76px; height: 52px; background-repeat: no-repeat; image-rendering: pixelated; background-color: rgba(251, 247, 242, .08); }
.tile .thumb.none { display: grid; place-items: center; font: 700 22px var(--pixel-font); color: var(--muted); }
.tile:focus-visible, .chip:focus-visible { outline: 3px dashed var(--water-deep); outline-offset: 3px; }
.save-bar { position: sticky; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--sand) 30%); }
.save-bar .btn { width: 100%; }
.me-bison { width: 92px; height: 72px; flex: none; background-repeat: no-repeat; image-rendering: pixelated; }
.dress-link { font: 700 15px var(--body-font); }

/* --- "Look how far you've come" (top-left box + sheet). Weeks, never days. --- */
.journey-chip { display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.journey-chip b { display: flex; align-items: center; gap: 6px; }
.journey-chip:focus-visible { outline: 3px dashed var(--water-deep); outline-offset: 4px; }
.streak-mark { width: 14px; height: 14px; background: var(--grass); border: 2px solid var(--grass-dark); box-shadow: 0 3px 0 var(--soil); transform: translateY(-1px); }
.journey h2 { margin: 2px 0 6px; }
.journey p { margin: 0 0 10px; }
.journey-km { font: 600 15px var(--pixel-font); color: var(--muted); }
.journey-km b { font: 700 40px/1 var(--pixel-font); color: var(--ink); margin-right: 4px; }
.journey-bar { height: 14px; margin: 8px 0 14px; background: var(--sand); border: 2px solid var(--soil); }
.journey-bar i { display: block; height: 100%; background: var(--grass); box-shadow: inset 0 -3px 0 var(--grass-dark); }
.journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin-bottom: 12px; }
.journey-grid div { display: flex; flex-direction: column; min-width: 0; }
.journey-grid b { font: 700 20px var(--pixel-font); }
.journey .actions { grid-template-columns: 1fr 2fr; }

/* Trail Elders on the map: two old bison on a teal ring (not players, not ghosts). */
.bison .pace-ring { position: absolute; width: 150px; height: 56px; border: 5px dashed var(--silver); border-radius: 50%; background: rgba(201, 214, 214, .18); }
.bison.elder { cursor: pointer; }


/* --- The Herd (leaderboards) --- */
.lede-small { margin: 8px 0 18px; color: var(--muted); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs a {
  flex: 1 1 auto; text-align: center; padding: 10px 10px; min-height: 44px; text-decoration: none; color: var(--ink);
  font: 700 15px var(--body-font); background: var(--paper); border: 1px solid var(--line);
}
.tabs a[aria-current="page"], .chip[aria-current="true"] { background: var(--mustard); border-color: var(--soil-dark); }
.day-picks { margin-bottom: 6px; }
.day-picks .chip { display: inline-flex; align-items: center; text-decoration: none; }
.board-what { margin: 8px 0 12px; color: var(--muted); font-size: 15px; }
.board { list-style: none; padding: 6px 12px; }
.board li { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.board li:last-child { border-bottom: 0; }
.board .rank { font: 700 20px var(--pixel-font); text-align: center; }
.board .who { display: flex; flex-direction: column; min-width: 0; }
.board .who b { font: 700 16px var(--body-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .who small { color: var(--muted); font-size: 13px; }
.board .score { font: 700 18px var(--pixel-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board li.me { background: rgba(255, 206, 0, .12); margin: 0 -12px; padding: 8px 12px; }
.board li.gap-above { margin-top: 10px; border-top: 3px dotted var(--soil); }
.board .elders-row { grid-template-columns: 34px 1fr auto; color: var(--water-deep); }
.board .elders-row .who small { color: var(--water-deep); }
.board .empty { display: block; color: var(--muted); padding: 14px 0; }
.bison-thumb { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; }

/* --- the Pack --- */
.pack-grid { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pack-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; background: var(--ground); border: 1px solid var(--line); border-radius: 4px; }
.pack-slot img { height: 72px; width: auto; object-fit: contain; }
.pack-slot b { font: 700 16px var(--pixel-font); }
.pack-slot small { color: var(--muted); font-size: 13px; }
.pack-slot a { font: 700 14px var(--body-font); color: var(--sun); }
.pack-slot.missing img { filter: brightness(0) invert(1) opacity(.12); }
.pack-slot.missing b { color: var(--dim); font-weight: 700; }
.gift-card { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; margin-top: 10px; }
.gift-card img { width: 64px; }
.gift-card b { font: 700 18px var(--pixel-font); }
.gift-card p { margin: 2px 0; }
.gift-card small { color: var(--muted); }
.hoofprints { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hoof-row { display: flex; gap: 8px; }
.hoof-dot { width: 26px; height: 26px; background: var(--ground); border: 1px solid var(--line); border-radius: 3px; }
.hoof-dot.on { background: var(--bone); border-color: var(--bone); box-shadow: inset 0 -4px 0 var(--dim); }
.muted { color: var(--muted); font-size: 14px; }

/* --- Hoof it: photo first --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo-drop {
  display: flex; flex-direction: column; gap: 12px; padding: 12px 14px;
  background: var(--ground); border: 1px dashed var(--outline); border-radius: 4px; min-height: 64px;
}
.photo-drop:focus-within { outline: 3px dashed var(--water-deep); outline-offset: 3px; }
.photo-drop b { display: block; font: 700 16px var(--body-font); }
.photo-drop small { color: var(--muted); font-size: 13px; }
.photo-drop.busy { opacity: .7; }
.photo-drop.done { border-style: solid; border-color: var(--grass); background: rgba(141, 174, 90, .12); }
.photo-icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--jade); color: var(--on-light); border-radius: 4px; flex: none; overflow: hidden; }
.photo-icon img { width: 100%; height: 100%; object-fit: cover; }
.photo-drop-top { display: flex; align-items: center; gap: 12px; }
/* camera + upload side by side; the label is the button, the file input inside it is hidden */
.photo-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-pick .btn { position: relative; justify-content: center; text-align: center; cursor: pointer; }
.photo-pick .btn:focus-within { outline: 3px dashed var(--sun); outline-offset: 2px; }
/* a mouse and no touch screen: there's no camera to point at a treadmill, so upload only */
@media (hover: hover) and (pointer: fine) {
  .photo-pick .cam-only { display: none; }
  .photo-pick { grid-template-columns: 1fr; }
}
.snack { border: 1px dashed var(--line); border-radius: 4px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.snack legend { padding: 0 4px; }
.snack input[type=file] { min-height: 44px; padding: 8px; font-size: 15px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.check input { width: 22px; min-height: 22px; }
.ledger .tag { display: inline-block; margin-top: 4px; padding: 0 6px; font: 600 12px var(--body-font); border: 1px solid var(--line); color: var(--muted); }
.ledger .tag.ok { border-color: var(--grass); color: var(--grass); }
.ledger .what a { font-size: 13px; margin-left: 6px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }

/* --- Photo checks (walks that don't match their photo) ------------------------------------------- */
.mismatch { padding: 12px; background: rgba(255, 206, 0, .07); border-color: var(--sun); }
.mismatch .dialog { margin: 0 0 8px; }
.mismatch .muted { font-size: 14px; margin: 8px 0 0; }
.check-numbers { width: 100%; border-collapse: collapse; font: 600 15px var(--body-font); font-variant-numeric: tabular-nums; }
.check-numbers th, .check-numbers td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.check-numbers thead th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.check-numbers tr.differs td { background: rgba(255, 206, 0, .2); }   /* a Sun tint, never red */
.notice { position: fixed; top: 92px; left: 12px; right: 12px; z-index: 1400; display: flex; gap: 10px; align-items: center; padding: 10px 12px; }
.notice .dialog { margin: 0; flex: 1; }
.admin-link { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin: 24px 0; color: var(--ink); text-decoration: none; }
.check-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; margin: 10px 0 16px; }
.check-photo img { width: 100%; height: 150px; object-fit: cover; border: 1px solid var(--line); background: var(--ground); }
.check-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.check-card .actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }

/* === map HUD: dark espresso glass over the sea (Drazen, 17 Oct: back to the demo's layout) ===
   Status card top left, crew card top right, one action bar bottom centre. */
.hud { position: fixed; z-index: 1000; background: var(--raised); border: 1px solid var(--outline); border-radius: 4px; color: var(--bone);
  font-family: var(--body-font); box-shadow: 0 6px 0 rgba(4, 41, 48, .55); }
#status::before, #crew::before { content: ""; position: absolute; top: -1px; left: 16px; width: 22px; height: 5px; background: var(--sun); }
#status { top: calc(env(safe-area-inset-top, 0px) + 14px); left: max(14px, env(safe-area-inset-left, 0px)); width: min(340px, calc(100vw - 28px));
  padding: 14px 16px 15px; display: grid; gap: 10px; text-align: left; cursor: pointer; font-size: 14px; }
#status:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#status > span { display: flex; }
#status .brand { align-items: baseline; justify-content: space-between; gap: 10px; }
#status .brand .h { font: 400 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
#status .brand span:last-child { font: 500 12px/1 var(--body-font); color: var(--hud-dim); white-space: nowrap; }
#status .kms { align-items: baseline; gap: 6px; font-family: var(--pixel-font); font-variant-numeric: tabular-nums; }
#status .kms b { font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1; }
#status .kms small { font-size: 15px; color: var(--hud-dim); }
#status .bar { position: relative; height: 12px; background: rgba(251, 247, 242, .1); border-radius: 3px; overflow: hidden; }
#status .bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, #E6B800 10px 12px); border-radius: 3px; }
#status .row { justify-content: space-between; gap: 12px; font-size: 13px; color: var(--hud-dim); }
#status .row strong { color: var(--hud-ink); }
#status .next { align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hud-line); }
#status .next .dot { width: 12px; height: 12px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 206, 0, .25); flex: none; }
#status .next > span:last-child { display: flex; flex-direction: column; min-width: 0; }
#status .next .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hud-dim); }
#status .next .n { font: 700 15px/1.2 var(--pixel-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#crew { top: calc(env(safe-area-inset-top, 0px) + 14px); right: max(14px, env(safe-area-inset-right, 0px)); width: 270px; padding: 12px 12px 8px;
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; }
#crew h2 { margin: 2px 4px 8px; font: 700 11px/1 var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--hud-dim);
  display: flex; justify-content: space-between; }
#crew ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#crew li button { width: 100%; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; padding: 5px 6px; background: none;
  border: 0; border-radius: 4px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#crew li button:hover, #crew li button:focus-visible { background: rgba(251, 247, 242, .07); outline: none; }
#crew li.me button { background: rgba(251, 247, 242, .07); box-shadow: inset 3px 0 0 var(--sun); }
#crew li.elders { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--hud-line); }
#crew li.elders .who small { color: var(--silver); }
#crew .map-toggle { display: inline-block; width: auto; margin: 0 0 4px 68px; padding: 2px 0; border: 0; background: none; text-align: left;
  color: var(--hud-dim); font: 600 12px var(--body-font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#crew .map-toggle:hover, #crew .map-toggle:focus-visible { color: var(--gold); background: none; }
#crew .hq-toggle { margin: 4px 6px 2px; }
body.elders-hidden .bison.elder, body.elders-hidden .map-label .pill.elder { display: none; }
body.hq-hidden .bison.hq, body.hq-hidden .map-label .pill.hq, body.hq-hidden .map-label.hq, body.hq-hidden .track-prints.hq { display: none; }
body.elders-hidden #crew li.elders > button:first-child { opacity: .5; }
#crew .bison-thumb { display: block; }
#crew .who { font-weight: 700; font-size: 14px; min-width: 0; }
#crew .who small { display: block; font-weight: 400; font-size: 12px; color: var(--hud-dim); margin-top: 1px; }
#crew .gap { font: 500 13px/1 var(--pixel-font); color: var(--hud-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
#crew .gap.ahead { color: var(--gold); }
#crew .about { margin: 6px 6px 4px; font-size: 13px; line-height: 1.45; color: var(--hud-dim); }

#actions { left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 4px; max-width: calc(100vw - 28px); }
#actions button:not(.btn), #actions a { font: 700 14px/1 var(--body-font); color: var(--hud-ink); background: rgba(251, 247, 242, .08); border: 0; border-radius: 4px;
  padding: 12px 14px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
#actions button:not(.btn):hover, #actions a:hover { background: rgba(251, 247, 242, .14); }
#actions button:focus-visible, #actions a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#actions .btn { min-height: 46px; padding: 3px 16px 7px; }
#actions .zoom { padding: 12px 13px; font-family: var(--pixel-font); font-size: 17px; }
#actions .sep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--hud-line); }
#actions .pixel-icon, #actions svg { flex: none; }
#actions .sm, .sm-only { display: none !important; }
#actions a .pixel-icon, #actions a svg { opacity: .9; }

/* map labels in the same glass */
.map-page .map-label .pill { padding: 5px 8px; font: 700 12px/1 var(--body-font); color: var(--hud-ink); background: var(--hud-solid);
  border: 1px solid var(--hud-line); border-radius: 999px; box-shadow: none; }
.map-page .map-label .pill.me { background: var(--gold); color: var(--on-light); border-color: transparent; }
.map-page .map-label .pill.elder { background: var(--raised); border-color: var(--silver); color: var(--silver); }
.map-page .map-label .stop-badge { width: auto; height: auto; padding: 4px 7px; font: 700 11px/1 var(--body-font); color: #22301A; background: var(--moss);
  border: 0; border-radius: 999px; box-shadow: none; opacity: .92; }
.map-page .map-label .stop-hover { font: 700 14px/1 var(--pixel-font); padding: 6px 9px; border-radius: 4px; color: var(--hud-ink); background: var(--hud-solid);
  border: 1px solid var(--hud-line); box-shadow: none; }
.map-page .map-label .next-pin { background: var(--hud-solid); color: var(--hud-ink); border: 2px solid var(--gold); border-radius: 4px; padding: 7px 11px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.map-page .map-label .next-pin .label { font: 700 10px/1 var(--body-font); letter-spacing: .12em; color: var(--gold); }
.map-page .map-label .next-pin b { font: 700 17px/1.15 var(--pixel-font); margin-top: 4px; }
.map-page .map-label .next-pin { position: relative; margin-bottom: 14px; }
.map-page .map-label .next-pin .dist { font: 500 13px/1 var(--pixel-font); color: var(--hud-dim); margin-top: 4px; }
.map-page .map-label .next-pin .chev { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 11px solid var(--gold); }
.map-page .notice { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); left: 50%; right: auto; transform: translateX(-50%); width: min(460px, calc(100vw - 28px)); }
body.crew-hidden .bison.other, body.crew-hidden .map-label .pill:not(.me):not(.elder) { display: none; }

@media (max-width: 760px) {
  #crew { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); left: max(14px, env(safe-area-inset-left, 0px)); width: auto; display: none; max-height: 55vh; }
  #crew.open { display: block; }
  #status { padding: 11px 13px 12px; gap: 8px; }
  #status .kms b { font-size: 24px; }
  #actions { gap: 3px; padding: 5px; }
  #actions .lg, .lg-only { display: none !important; }
  #actions .sm, #actions .sm-only { display: flex !important; }
  #actions button, #actions a { padding: 11px 9px; }
  #actions .btn { padding: 3px 12px 7px; font-size: 17px; }
}
/* walk 3 on (Drazen, 21 Oct): Hoof it, Find me, Crew, Stash, Herd, Me still fit on a small phone */
@media (max-width: 420px) {
  #actions { gap: 2px; padding: 4px; max-width: calc(100vw - 16px); }
  #actions button:not(.btn), #actions a { padding: 11px 7px; }
  #actions .btn { padding: 3px 10px 7px; }
  #actions .sep { margin: 6px 0; }
  #actions .nav-dot { right: 4px; top: 5px; }
}

/* sheets, cards and the checkpoint banner on the map share the glass look */
.map-page .sheet-backdrop { background: rgba(2, 20, 24, .55); }
.map-page .sheet.box, .map-page .checkpoint.box { box-shadow: 0 16px 48px rgba(0, 0, 0, .45); }
.map-page .checkpoint.box { border: 2px solid var(--sun); }
.map-page .sheet h2 { color: var(--bone); }
.map-page .checkpoint b { font: 400 34px/1.05 var(--display); text-transform: uppercase; color: var(--bone); }
.stop-card h2, .stop-plate { font-family: var(--pixel-font); }
.map-page .sheet .label, .map-page .checkpoint .label { font: 700 11px/1.3 var(--body-font); letter-spacing: .12em; color: var(--hud-dim); }
.map-page .checkpoint .label:first-child { color: var(--gold); }
.map-page .sheet .intro, .map-page .sheet .muted, .map-page .sheet p { color: var(--hud-dim); }
.map-page .sheet .dialog::before { color: var(--gold); }
.map-page .sheet a:not(.btn):not(.btn-shop) { color: var(--sun); }
.item-names, .item-name { font-family: var(--pixel-font); font-weight: 600; }
.display-title { font: 400 30px/1 var(--display) !important; text-transform: uppercase; letter-spacing: .01em; }


.map-page .sheet .snack { border: 1px dashed var(--hud-line); border-radius: 4px; }
.map-page .sheet .mismatch { background: rgba(255, 206, 0, .08); border: 1px solid rgba(255, 206, 0, .5); border-radius: 4px; box-shadow: none; }
.map-page .sheet .check-numbers th, .map-page .sheet .check-numbers td { border-bottom-color: var(--hud-line); }
.map-page .sheet .check-numbers thead th { color: var(--hud-dim); }
.map-page .sheet .check-numbers tr.differs td { background: rgba(255, 206, 0, .22); }
.map-page .journey-km, .map-page .journey-km b { color: var(--hud-ink); }
.map-page .journey-km { color: var(--hud-dim); }
.map-page .journey-bar { background: rgba(251, 247, 242, .1); border: 0; border-radius: 3px; overflow: hidden; }
.map-page .journey-bar i { background: repeating-linear-gradient(90deg, var(--gold) 0 10px, #E6B800 10px 12px); box-shadow: none; }
.map-page .journey-grid b { color: var(--hud-ink); }
.map-page .stop-card .found { color: var(--moss); }
.map-page .notice.box { border-color: var(--sun); }
.map-page .notice .dialog::before { color: var(--gold); }
.map-page .notice .text-btn { color: var(--gold); }

/* === glass pages (Me first): the map's dark espresso glass on the sea, Jersey 15 for names and numbers === */
.glass-page { background: var(--ground); color: var(--bone); font-family: var(--body-font); }
.glass-page .page { max-width: 760px; padding: 28px 16px 56px; display: grid; gap: 14px; }

.g-eyebrow { display: block; font: 700 11px/1.3 var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--hud-dim); }
.g-eyebrow.teal { color: var(--teal-ink); }
.g-dim { color: var(--hud-dim); margin: 6px 0 0; font-size: 14px; }
.g-dim.small { font-size: 12px; margin: 0; text-align: right; }
.g-dim a:not(.btn) { color: var(--sun); }
.g-chip { display: inline-block; font: 700 12px/1 var(--body-font); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 3px;
  background: var(--bone); color: var(--on-light); margin: 2px 6px 2px 0; }
.g-chip.dim { background: rgba(251, 247, 242, .1); color: var(--hud-ink); text-transform: none; letter-spacing: 0; font-weight: 500; }
.g-pill:focus-visible, .g-link:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.g-link { background: none; border: 0; padding: 0; color: var(--hud-dim); font: 600 13px var(--body-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.g-link:hover { color: var(--hud-ink); }
.g-topbar { display: flex; justify-content: space-between; align-items: center; }
.g-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--hud); border: 1px solid var(--hud-line);
  color: var(--hud-ink); font: 700 14px var(--body-font); text-decoration: none; }
.g-topbar .g-link { color: var(--hud-ink); }
.g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.g-kms { display: flex; align-items: baseline; gap: 8px; font-family: var(--pixel-font); font-variant-numeric: tabular-nums; }
.g-kms b { font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; }
.g-kms small { font-size: 16px; color: var(--hud-dim); }
.g-bar { position: relative; height: 12px; margin: 12px 0 10px; background: rgba(251, 247, 242, .1); border-radius: 3px; overflow: hidden; }
.g-bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--grass) 0 10px, var(--grass-dark) 10px 12px); border-radius: 3px; }
.g-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--hud-dim); }
.g-row strong { color: var(--hud-ink); }
.g-next { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hud-line); }
.g-next .dot { width: 12px; height: 12px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 206, 0, .25); flex: none; }
.g-next > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.g-next .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hud-dim); }
.g-next .n { font: 700 16px/1.2 var(--pixel-font); }
.g-tag { display: inline-block; font: 600 12px/1 var(--body-font); padding: 4px 8px; border-radius: 999px; background: rgba(251, 247, 242, .08); color: var(--hud-dim); margin: 0 6px 4px 0; }
.g-tag.ok { background: rgba(157, 173, 114, .2); color: #C9D6A3; }
.g-tag.wait { background: transparent; border: 1px solid rgba(255, 206, 0, .6); color: var(--gold); }

/* Me: hero */
.me-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; }
.me-stage { position: relative; height: 230px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #0F5B68 0%, #0B4651 58%, #08394A 100%); }
.me-stage::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 255, 255, .06) 22px 24px); }
.me-island { position: absolute; left: 50%; top: 74%; width: 300px; height: 150px; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #9DBE62, #8DAE5A 60%, #7FA04F); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 14px 0 #7B4E2C) drop-shadow(0 6px 0 #EAD7B8); }
.me-sprite { position: absolute; display: block; background-repeat: no-repeat; image-rendering: pixelated; animation: bison-idle 2.4s steps(12) infinite; }
.me-who h1 { font: 400 36px/1 var(--display); text-transform: uppercase; margin: 6px 0 8px; color: var(--bone); }
.me-who .g-btn { margin-top: 14px; }
.me-found { margin-top: 12px; }
.me-found .g-eyebrow { margin-bottom: 6px; }

/* Me: stat tiles */
.me-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.me-tiles .me-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.me-tiles b { font: 700 24px/1.1 var(--pixel-font); color: var(--hud-ink); }
.me-tiles small { font-size: 12px; color: var(--hud-dim); }

.me-elders summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.me-elders summary::-webkit-details-marker { display: none; }
.me-elders summary .n { display: block; font: 700 16px/1.25 var(--body-font); }
.me-elders summary .g-eyebrow::after { content: " ⓘ"; }
.me-elders .gap { font: 500 15px var(--pixel-font); color: var(--hud-dim); white-space: nowrap; }
.me-elders .gap.ahead { color: var(--gold); }
.me-elders p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--hud-dim); }

/* Me: this week */
.me-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 12px 0 2px; text-align: center; }
.me-days div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.me-days span { font: 700 12px var(--body-font); color: var(--hud-dim); }
.me-days .today span { color: var(--hud-ink); text-decoration: underline; text-underline-offset: 3px; }
.me-days i { width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 4px; background: rgba(251, 247, 242, .07); border: 1px solid var(--hud-line); }
.me-days i.walked { background: var(--grass); border-color: var(--grass-dark); box-shadow: inset 0 -4px 0 var(--grass-dark); }
.me-days .today i:not(.walked) { border-color: rgba(255, 206, 0, .6); }

.me-admin { display: flex; justify-content: space-between; align-items: center; text-decoration: none; }
.me-admin .n { display: block; font: 700 16px var(--body-font); }

/* Me: ledger */
.me-ledger ul { list-style: none; margin: 0; padding: 0; }
.me-ledger li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hud-line); }
.me-ledger .when { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 4px; background: rgba(251, 247, 242, .06); }
.me-ledger .when b { font: 700 18px/1 var(--pixel-font); }
.me-ledger .when span { font: 700 10px var(--body-font); letter-spacing: .1em; text-transform: uppercase; color: var(--hud-dim); }
.me-ledger .what { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.me-ledger .main { font-size: 14px; }
.me-ledger .links { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.me-ledger .links a { color: var(--hud-dim); }
.me-ledger .links a:hover { color: var(--hud-ink); }
.me-ledger .km { text-align: right; }
.me-ledger .km b { display: block; font: 700 22px/1 var(--pixel-font); color: var(--gold); }
.me-ledger .km.zero b { color: var(--hud-dim); }
.me-ledger .km small { font-size: 11px; color: var(--hud-dim); }

/* Me: rest stops */
.me-rest-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.glass-page select, .glass-page input[type=date] { min-height: 44px; padding: 0 12px; background: rgba(251, 247, 242, .06); color: var(--hud-ink);
  border: 1px solid var(--hud-line); border-radius: 4px; font: 15px var(--body-font); color-scheme: dark; }
.glass-page select:focus, .glass-page input:focus { border-color: var(--gold); outline: none; }
.me-rest-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.me-rest-list li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(251, 247, 242, .07); font-size: 13px; }
.me-rest-list small { color: var(--hud-dim); }
.glass-page section { margin: 0; }

@media (max-width: 640px) {
  .me-hero { grid-template-columns: 1fr; }
  .me-stage { height: 200px; }
  .me-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-bar span { font-size: 10px; white-space: normal; max-width: 64px; }
  .me-rest-form { grid-template-columns: 1fr 1fr; }
  .me-rest-form .g-btn { grid-column: 1 / -1; }
  .g-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .g-dim.small { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .me-sprite { animation: none; } }

/* === Herd screens (leaderboards, Snack Pack, friends, walker cards) in glass === */
.herd-head h1 { font: 400 40px/1 var(--display); text-transform: uppercase; margin: 6px 0 4px; color: var(--bone); }
.herd-head .g-dim { margin: 0; }
.g-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 4px; background: var(--hud); border: 1px solid var(--hud-line); }
.g-tabs a { flex: 1; text-align: center; padding: 10px 6px; border-radius: 4px; color: var(--hud-dim); font: 700 13px/1.25 var(--body-font); text-decoration: none; }
.g-tabs a:hover { color: var(--hud-ink); background: rgba(251, 247, 242, .06); }
.g-tabs a[aria-current="page"] { background: var(--bone); color: var(--on-light); }
.g-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.g-seg a { padding: 9px 12px; border-radius: 4px; background: rgba(251, 247, 242, .08); color: var(--hud-ink); font: 700 13px var(--body-font); text-decoration: none; }
.g-seg a[aria-current="page"] { background: var(--hud-ink); color: var(--raised); }
.g-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.g-chipbtn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hud-line);
  background: transparent; color: var(--hud-dim); font: 700 13px var(--body-font); text-decoration: none; cursor: pointer; }
.g-chipbtn.small { min-height: 30px; font-size: 12px; }
.g-chipbtn:hover { color: var(--hud-ink); }
.g-chipbtn[aria-current="true"], .g-chipbtn[aria-pressed="true"] { background: rgba(0, 229, 184, .12); border-color: var(--jade); color: var(--jade); }
.g-warn { margin: 8px 0 0; color: var(--gold); font-size: 14px; }
.g-warn a { color: var(--gold); }
.g-note { margin: 0 4px; color: rgba(251, 247, 242, .85); font-size: 13px; }
.g-points { margin: 8px 0 12px; padding-left: 18px; color: var(--hud-dim); font-size: 14px; line-height: 1.5; }
.g-points b { color: var(--hud-ink); }
.g-tag.small { font-size: 10px; padding: 2px 6px; vertical-align: middle; }
.g-board { list-style: none; margin: 0; padding: 0; }
.g-board li { border-top: 1px solid var(--hud-line); }
.g-board li:first-child { border-top: 0; }
.g-board li > a, .g-board .elders-row { display: grid; grid-template-columns: 30px 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px;
  color: inherit; text-decoration: none; border-radius: 4px; }
.g-board li > a:hover { background: rgba(251, 247, 242, .06); }
.g-board li.me > a { background: rgba(251, 247, 242, .07); box-shadow: inset 3px 0 0 var(--sun); }
.g-board li.gap-above { margin-top: 10px; border-top: 1px dashed var(--hud-line); padding-top: 6px; }
.g-board .rank { font: 700 18px var(--pixel-font); text-align: center; color: var(--hud-dim); }
.g-board .who { display: flex; flex-direction: column; min-width: 0; }
.g-board .who b { font: 700 16px var(--body-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-board .who small { color: var(--hud-dim); font-size: 12px; }
.g-board .score { font: 700 17px var(--pixel-font); color: var(--gold); white-space: nowrap; }
.g-board .elders-row .who b, .g-board .elders-row .who small, .g-board .elders-row .score { color: var(--teal-ink); }
.g-board .empty { padding: 14px 6px; color: var(--hud-dim); }
.w-list { list-style: none; margin: 8px 0 0; padding: 0; }
.w-row a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 4px; color: inherit; text-decoration: none; }
.w-row a:hover { background: rgba(251, 247, 242, .06); }
.w-row.me a { background: rgba(251, 247, 242, .07); box-shadow: inset 3px 0 0 var(--sun); }
.w-row .who { font-weight: 700; font-size: 15px; min-width: 0; }
.w-row .who small { display: block; font-weight: 400; font-size: 12px; color: var(--hud-dim); }
.w-row .gap { font: 500 14px var(--pixel-font); color: var(--hud-dim); white-space: nowrap; }
.w-row.has-after { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.w-row.has-after form { margin: 0; }
.pack-name { font: 400 28px/1.05 var(--display); text-transform: uppercase; margin: 6px 0 6px; color: var(--bone); }
.pack-new, .invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; }
.glass-page input[type=text] { min-height: 44px; padding: 0 12px; background: rgba(251, 247, 242, .06); color: var(--hud-ink);
  border: 1px solid var(--hud-line); border-radius: 4px; font: 15px var(--body-font); }
.g-btn.wide { width: 100%; margin-top: 14px; }
.join-card p a:not(.btn):not(.btn-shop), .g-card p a:not(.btn):not(.btn-shop) { color: var(--sun); }
.walker-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: center; }
.walker-stage { height: 200px; }
.walker-card h1 { font: 400 34px/1 var(--display); text-transform: uppercase; margin: 6px 0 8px; }
.walker-thumb { display: grid; place-items: center; height: 140px; border-radius: 4px; background: linear-gradient(180deg, #0F5B68, #08394A); }
.walker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.me-privacy form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .walker-card { grid-template-columns: 1fr; }
  .pack-new, .invite { grid-template-columns: 1fr; }
}
/* crew card: filters and card links */
.crew-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 4px 8px; }
.crew-filters button { padding: 6px 9px; border-radius: 999px; border: 1px solid var(--hud-line); background: transparent; color: var(--hud-dim);
  font: 700 12px var(--body-font); cursor: pointer; }
.crew-filters button:hover { color: var(--hud-ink); }
.crew-filters button[aria-pressed="true"] { background: rgba(0, 229, 184, .12); border-color: var(--jade); color: var(--jade); }
.crew-filters button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#crew li { position: relative; }
#crew .card-link { position: absolute; right: 8px; bottom: 6px; font: 600 11px var(--body-font); color: var(--hud-dim); text-decoration: underline; text-underline-offset: 2px; }
#crew .card-link:hover { color: var(--gold); }
#crew li button .gap { align-self: start; margin-top: 6px; }
.crew-more { display: block; margin: 8px 6px 4px; font: 700 13px var(--body-font); color: var(--gold); text-decoration: none; }
.map-page .bison.filtered, .map-page .map-label.filtered, .map-page .map-label .pill.filtered { display: none; }
.map-page .bison.other { cursor: pointer; }

/* horn bumps */
.bump-form { display: inline; }
.bump { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--hud-line);
  background: transparent; color: var(--hud-dim); font: 700 12px var(--body-font); cursor: pointer; width: max-content; }
.bump:hover { color: var(--bone); border-color: var(--jade); }
.bump.on { background: rgba(0, 229, 184, .12); border-color: var(--jade); color: var(--jade); }
.bump b { font: 700 12px var(--pixel-font); }
.bump.static { cursor: default; border-color: transparent; padding-left: 0; }
.bump .horn { flex: none; }
.bump:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.walk-feed { list-style: none; margin: 8px 0 0; padding: 0; }
.walk-feed li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--hud-line); }
.walk-feed li:first-child { border-top: 0; }
.walk-feed .when { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 4px; background: rgba(251, 247, 242, .06); }
.walk-feed .when b { font: 700 18px/1 var(--pixel-font); }
.walk-feed .when span { font: 700 10px var(--body-font); letter-spacing: .1em; text-transform: uppercase; color: var(--hud-dim); }
.walk-feed .what { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.walk-feed .main { font-size: 14px; }
.walk-feed .km { text-align: right; }
.walk-feed .km b { display: block; font: 700 18px/1 var(--pixel-font); color: var(--gold); }
.walk-feed .km small { font-size: 11px; color: var(--hud-dim); }
.me-ledger .bumped-by { font-size: 12px; color: var(--gold); }

/* === brand: the sunset disc from the Good Vibes Bison logo (decoration only, never UI state) === */
.sunset-disc { display: block; border-radius: 50%; aspect-ratio: 1;
  background: linear-gradient(180deg, #FF6A00 0 10%, #FFCE00 10% 15%, #FF6A00 15% 23%, #FFCE00 23% 28%, #FF6A00 28% 34%,
    #FFCE00 34% 38.5%, #FF6A00 38.5% 42.5%, #FFCE00 42.5% 61%, #00BCC4 61% 100%);
  box-shadow: 0 0 0 4px #171310, 0 0 0 7px #FFF6DC; }
.me-stage .sunset-disc { position: absolute; left: 50%; top: 46%; width: 190px; transform: translate(-50%, -50%); }

/* === builder (/bison) === */
.builder-form { display: grid; gap: 14px; }
.b-hero { text-align: center; }
.b-hero h1 { font: 400 36px/1 var(--display); text-transform: uppercase; margin: 10px 0 0; }
.b-stage { position: relative; height: 280px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #0F5B68 0%, #0B4651 58%, #08394A 100%); }
.b-stage .sunset-disc { position: absolute; left: 50%; top: 44%; width: 220px; transform: translate(-50%, -50%); }
.b-sprite { position: absolute; left: 45%; top: 78%; }
.b-sprite i { display: block; background-repeat: no-repeat; image-rendering: pixelated; animation: bison-idle 2.4s steps(12) infinite; }
.b-sprite i.walking { animation: bison-walk .8s steps(8) infinite; }
.b-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.b-fields { display: grid; gap: 14px; }
.b-field { display: grid; gap: 6px; }
.b-field small { margin: 0; font-size: 13px; }
.b-bodies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.b-body { display: grid; justify-items: center; gap: 2px; padding: 10px 8px 12px; border-radius: 4px; cursor: pointer; text-align: center;
  background: rgba(251, 247, 242, .06); border: 2px solid transparent; color: var(--hud-ink); font-family: var(--body-font); }
.b-body b { font: 700 17px/1.2 var(--pixel-font); margin-top: 4px; }
.b-body small { font-size: 12px; line-height: 1.35; color: var(--hud-dim); }
.b-body[aria-pressed="true"] { border-color: var(--jade); background: rgba(0, 229, 184, .1); }
.b-thumb { display: block; background-repeat: no-repeat; image-rendering: pixelated; }
.b-colour-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hud-line); }
.b-colour-row:first-of-type { border-top: 0; margin-top: 6px; }
.b-colour-name { font: 700 14px var(--body-font); }
.b-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.b-swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 2px solid rgba(23, 19, 16, .9); cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px rgba(251, 247, 242, .25); }
.b-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--raised), 0 0 0 5px var(--jade); }
.b-swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.b-slot { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.b-slot legend { padding: 0; margin-bottom: 6px; font: 700 14px var(--body-font); }
.b-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.b-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 4px; cursor: pointer; min-width: 0;
  background: rgba(251, 247, 242, .06); border: 2px solid transparent; color: var(--hud-ink); font: 600 13px/1.2 var(--body-font); text-align: center; }
.b-tile[aria-pressed="true"] { border-color: var(--jade); background: rgba(0, 229, 184, .1); }
.b-tile.locked { cursor: not-allowed; color: var(--hud-dim); }
.b-tile.locked .b-gthumb { filter: grayscale(1) brightness(.7); opacity: .6; }
.b-tile small { font-size: 11px; color: var(--hud-dim); line-height: 1.25; }
.b-gthumb { width: 76px; height: 52px; border-radius: 4px; background-color: rgba(251, 247, 242, .08); background-repeat: no-repeat; image-rendering: pixelated; }
.b-gthumb.none { display: grid; place-items: center; font: 700 22px var(--pixel-font); color: var(--hud-dim); }
.b-prog { display: block; width: 70%; height: 4px; border-radius: 2px; background: rgba(251, 247, 242, .12); overflow: hidden; }
.b-prog i { display: block; height: 100%; background: var(--grass); }
.b-save { position: sticky; bottom: 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.b-save .g-btn { width: 100%; min-height: 52px; font-size: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.b-tile:focus-visible, .b-body:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* stop card: the Good Vibes Bison's line */
.stop-card .host { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; font-style: italic; }
.stop-card .host img { flex: none; border-radius: 50%; }
.map-page .sheet .host { color: var(--hud-ink); }

/* Me: bag, trail vest, field notes */
.me-bag { margin: 8px 0 0; font-size: 14px; color: var(--hud-dim); }
.me-bag b { color: var(--bone); font-weight: 700; }
.me-bag a { color: var(--gold); }
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.me-who .me-actions .g-btn { margin-top: 0; }
.patches { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px 6px; }
.patch { display: grid; justify-items: center; gap: 4px; text-align: center; }
.patch span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font: 700 15px var(--pixel-font);
  color: var(--hud-dim); border: 2px dashed rgba(251, 247, 242, .25); }
.patch small { font-size: 10px; line-height: 1.2; color: var(--hud-dim); max-width: 70px; }
.patch.got span { color: #171310; border: 3px solid #171310; outline: 2px dashed #FFF6DC; outline-offset: -7px;
  background: linear-gradient(180deg, #FF6A00 0 18%, #FFCE00 18% 26%, #FF6A00 26% 38%, #FFCE00 38% 64%, #00BCC4 64%); }
.patch.got small { color: var(--hud-ink); }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 10px 0 0; }
.notes div { padding: 10px 12px; border-radius: 4px; background: rgba(251, 247, 242, .06); }
.notes dt { font-size: 12px; color: var(--hud-dim); }
.notes dd { margin: 2px 0 0; font: 700 22px/1.1 var(--pixel-font); color: var(--hud-ink); font-variant-numeric: tabular-nums; }
.notes-next { margin-top: 16px; }
.next-gear { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.next-gear li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 14px; }
.next-gear span { color: var(--hud-dim); font-size: 13px; text-align: right; }
.next-gear i { grid-column: 1 / -1; height: 5px; border-radius: 2px; background: linear-gradient(90deg, var(--grass) var(--p), rgba(251, 247, 242, .12) var(--p)); }

/* A friend's tracks on the map: where they were on my journey day. Faint, never a second bison. */
.map-label .tracks { display: inline-flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); padding: 4px 9px 4px 6px;
  font: 600 11px/1 var(--body-font, sans-serif); color: var(--bone); background: rgba(6, 52, 61, .65); border: 1px dashed rgba(255, 206, 0, .7);
  border-radius: 999px; white-space: nowrap; opacity: .85; pointer-events: none; }
.map-label .tracks::before { content: ""; width: 14px; height: 12px; flex: none;
  background: radial-gradient(circle at 30% 60%, #FFCE00 0 2.5px, transparent 3px), radial-gradient(circle at 70% 40%, #FFCE00 0 2.5px, transparent 3px); }
.map-label.filtered, .map-page .map-label.filtered { display: none; }
body.crew-hidden .map-label .tracks { display: none; }
/* welcome */
.glass-page h2 { font: 700 21px/1.2 var(--body-font); margin: 6px 0 4px; }
.glass-page .g-card > p { margin: 10px 0 0; line-height: 1.5; font-size: 15px; }
.wel-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.wel-list li { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 4px; background: rgba(251, 247, 242, .05); }
.wel-list .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wel-list .who small { color: var(--hud-dim); font-size: 13px; margin-top: 2px; }
.wel-list form { margin: 0; }
.wel-search { width: 100%; margin-top: 12px; }

/* the hoofprints leading to a friend's tracks (scaled with the map, rotated along the trail) */
.track-prints { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.track-prints > div { position: relative; width: 0; height: 0; }
.track-prints i { position: absolute; width: 18px; height: 14px; margin: -7px 0 0 -9px;
  background: radial-gradient(ellipse 4px 6px at 30% 50%, #FFCE00 90%, transparent 100%),
              radial-gradient(ellipse 4px 6px at 70% 50%, #FFCE00 90%, transparent 100%);
  filter: drop-shadow(0 0 1px #171310) drop-shadow(0 0 1px #171310); }
.track-prints.filtered { display: none; }
body.crew-hidden .track-prints { display: none; }

/* them on that day: a see-through, smaller, still copy of their bison (it's not a second walker, so no clicks) */
.bison.then { pointer-events: none; opacity: .55; filter: saturate(.55) brightness(1.15); }
.bison.then i { animation: none; background-position: 0 0; }
.bison.then.filtered { display: none; }
body.crew-hidden .bison.then { display: none; }

/* ---- The stage profile (spec §3b): the trail side-on, grass → rock → snow like the map. templates/_profile.html ---- */
.profile { display: block; margin: 0; }
.profile svg { display: block; width: 100%; height: auto; overflow: visible; }
.profile .ahead { opacity: .72; }
.profile .ridge { fill: none; stroke: rgba(251, 247, 242, .5); stroke-width: 3; stroke-linejoin: round; }
.profile-slim .ridge { stroke-width: 4; }
.profile .ridge.done { stroke: #FFCE00; stroke-width: 4; }
.profile .stage-band { fill: none; stroke: rgba(255, 206, 0, .35); stroke-width: 2; stroke-dasharray: 6 8; }
.profile-slim .stage-band { display: none; }
.profile .stage-ridge { fill: none; stroke: #FFCE00; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.profile .tick { fill: rgba(251, 247, 242, .55); stroke: var(--raised); stroke-width: 2; }
.profile .tick.reached { fill: #FFCE00; }
.profile .s-name { font: 700 34px var(--pixel-font); fill: var(--bone); }
.profile .s-alt { font: 500 28px var(--body-font, sans-serif); fill: var(--dim); }
.profile .axis { font: 500 26px var(--body-font, sans-serif); fill: var(--dim); }
.profile .dot { stroke: #171310; stroke-width: 4; }
.profile .dot.you { fill: #FFCE00; }
.profile .dot.elders { fill: var(--silver); }
.profile .dot.friend { fill: var(--bone); }
.profile figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: var(--hud-dim, var(--dim)); }
.profile .key { display: inline-flex; align-items: center; gap: 6px; }
.profile .key i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #171310; }
.profile .k-you { background: #FFCE00; } .profile .k-elders { background: var(--silver); } .profile .k-friend { background: var(--bone); }
#status > .profile { display: block; margin: 2px 0 -2px; }
.journey .profile-full { margin: 6px 0 4px; }
.profile-now { margin: 8px 0 12px; font-size: 13px; color: var(--hud-dim, var(--dim)); }
.profile-now .label { margin-right: 4px; }
.wel-trail .profile-full { margin: 14px 0 6px; }

/* Me: the height-o-meter. Five British landmarks side by side, to scale; yours is the dashed Sun line. */
.hm-head { margin: 8px 0 2px; font: 400 26px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hm-next { margin: 0; }
.hm-bars { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 170px; margin: 16px 0 6px; padding-bottom: 34px; }
.hm-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.hm-bar i { display: block; width: 100%; height: max(4px, calc(var(--h) * 100%)); background: rgba(251, 247, 242, .14);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% 100%, 0 100%); }
.hm-bar.got i { background: var(--grass); box-shadow: inset 0 4px 0 #A9C877; }
.hm-bar span, .hm-bar small { position: absolute; top: 100%; font-size: 11px; line-height: 1.2; text-align: center; white-space: nowrap; color: var(--dim); }
.hm-bar span { margin-top: 4px; font-weight: 700; color: var(--bone); }
.hm-bar small { margin-top: 18px; }
.hm-you { position: absolute; left: 0; right: 0; bottom: calc(34px + var(--you) * (100% - 34px)); border-top: 2px dashed var(--sun); }
.hm-herd { margin-top: 26px; }
.me-tiles .me-tile.wide { grid-column: span 2; }

/* === Community (brand upgrade pass 2) === */
.founder-badge { display: inline-block; margin-left: 6px; padding: 2px 6px 1px; vertical-align: middle; border-radius: 3px;
  font: 400 11px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; background: var(--bone); color: var(--on-light); }
.map-label .pill .founder-badge { margin-left: 5px; font-size: 10px; }
/* the Campfire */
.moment { display: grid; gap: 10px; }
.moment.pinned { border-color: var(--sun); }
.mo-head { display: flex; align-items: center; gap: 10px; }
.mo-head .who { display: flex; flex-direction: column; font-weight: 700; }
.mo-head .who a { color: var(--bone); text-decoration: none; }
.mo-head small { font-weight: 400; font-size: 12px; color: var(--dim); }
.pin-tag { color: var(--sun); font-weight: 700; }
.mo-line { margin: 0; font-size: 17px; line-height: 1.4; }
.mo-photo { width: 100%; max-height: 420px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.mo-walk { margin: 0; font-size: 14px; color: var(--dim); }
.mo-walk b { font: 400 22px/1 var(--pixel-font); color: var(--sun); }
.cheer-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cheer { min-height: 34px; padding: 3px 11px 0; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--bone);
  font: 400 14px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.cheer:hover { border-color: var(--jade); }
.cheer.on { background: var(--jade); border-color: var(--jade); color: var(--on-light); }
.cheer b { font-family: var(--pixel-font); font-weight: 400; margin-left: 2px; }
.cheer:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.mo-cheered { margin: 6px 0 0; font-size: 13px; color: var(--jade); }
.mo-comments { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 14px; }
.mo-comments form { display: inline; }
.mo-comment { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mo-comment input { min-height: 40px; font-size: 15px; }
.mo-actions { display: flex; gap: 16px; justify-content: flex-end; }
form.inline { display: inline; }
.g-link.small { font-size: 12px; }
/* the Herd jobs badge + sheet */
/* the Herd jobs badge: a round block bottom right, above the action bar, only when there's something to do */
#jobs-btn { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--bone); padding: 0; }
#jobs-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.jobs-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
  border-radius: 9px; background: var(--jade); color: var(--on-light); font: 400 13px/1 var(--pixel-font); }
.job-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px;
  background: var(--ground); border: 1px solid var(--line); font-size: 15px; }
.job.self, .job.admin { border-style: dashed; }
.job form { margin: 0; }
/* cards on the map */
.share-sheet .share-walk, .share-walk { margin: 0; font: 400 20px/1.2 var(--pixel-font); color: var(--sun); }
.postcard { text-align: center; }
.postcard h2 { justify-content: center; }
.postcard-img { width: min(240px, 60vw); border-radius: 4px; border: 1px solid var(--outline); margin: 10px auto; display: block; }
.nudge-card, .push-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.push-card b { font: 400 20px/1.1 var(--display); text-transform: uppercase; }
.push-card .muted { margin: 6px 0 0; color: var(--dim); font-size: 14px; }
.push-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* Me: postcards, pings */
.postcards { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.postcards a { display: grid; gap: 4px; text-decoration: none; color: var(--bone); font-size: 12px; text-align: center; }
.postcards img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.ping-form { display: grid; gap: 8px; margin-top: 10px; }
.ping-form .g-btn { justify-self: start; margin-top: 4px; }
/* rough week */
textarea { width: 100%; padding: 10px 12px; font: 17px/1.4 var(--body-font); color: var(--bone); background: var(--ground);
  border: 1px solid var(--outline); border-radius: 4px; resize: vertical; }
textarea:focus { border-color: var(--sun); outline: none; }
.rough-reply .host { display: flex; align-items: center; gap: 10px; }
.rough-line { font: 400 24px/1.2 var(--display); text-transform: uppercase; margin: 10px 0 4px; }
.rough-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--dim); }
.report-card { margin: 10px 0; }
.cheer-row.static { margin: 0; }
.cheer-row.static .cheer { cursor: default; display: inline-flex; align-items: center; }

/* climbs (spec §3b) */
#status .climb-now { display: block; font-size: 12px; line-height: 1.35; color: var(--dim); margin-top: -4px; }
.climb-line { margin: 0 0 10px; font-size: 14px; color: var(--sun); }
.long-way small { font-size: 12px; }
.patch.got.summit span { background: linear-gradient(180deg, #FBF7F2 0 30%, #FF6A00 30% 42%, #FFCE00 42% 64%, #00BCC4 64%);
  outline-color: #06343D; }
.snack-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.bump.snack { font-weight: 700; }

/* why Save is greyed out: said in words, not just a hover title (phones have no hover) */
.hoof-need { margin: 12px 0 0; font-size: 14px; color: var(--bone, #FBF7F2); opacity: .8; }

/* an event stop's bonus is on (Windy Knoll: incline counts double): a jade line under the progress card */
#status .event-now { color: var(--jade); }

/* --- the UGC photo grid (/admin/photos) ----------------------------------------------------------- */
.ugc-grid { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ugc { background: var(--raised); border: 1px solid var(--bone); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.ugc img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.ugc-meta { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ugc-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ugc-meta form { margin-top: 4px; }
.ugc-meta .g-btn { width: 100%; }

/* gift claiming (spec §6): the Claim / Use it button is style D, the shop's own */
.gift-card .btn-shop { margin-top: 10px; }
.gift-claim { margin: 0; }
.gift-choices { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.gift-code { margin: 8px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gift-code b { font: 400 20px var(--pixel-font); color: var(--sun); letter-spacing: .04em; white-space: nowrap; }
.gift-expired, .gift-redeemed { opacity: .7; }

/* wallowing (spec §5): a mud wallow under the bison, which sinks in a bit. Brown, never red. */
.bison .mud { position: absolute; width: 260px; height: 84px; border-radius: 50%; background: #6B4428;
  box-shadow: inset 0 8px 0 rgba(0, 0, 0, .28), inset 0 -6px 0 rgba(255, 255, 255, .08), 0 0 0 5px #4A2E1A; }
.bison.wallowing .hop { position: relative; transform: translateY(22px); clip-path: inset(0 0 26px 0); }   /* relative: painted over the mud */

/* the snack pouch (spec §7): ten pips, jade when full of snacks, honey when the Biscuit Tin has it */
.pouch { margin: 12px 0; }
.pouch-head { display: flex; justify-content: space-between; align-items: baseline; }
.pouch-head b { font: 400 18px var(--pixel-font); color: var(--sun); }
.pouch-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0; }
.pouch-pips span { height: 12px; border-radius: 2px; background: rgba(251, 247, 242, .12); }
.pouch-pips span.on { background: var(--jade); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.pouch.biscuits .pouch-pips span.on { background: #E8A33D; }
.pouch p { margin: 0; font-size: 13px; }
.me-pouch .pouch { margin: 0; }
.stop-card .postcard-link { margin: 0 0 10px; font-size: 14px; }
.stop-card .postcard-link a { color: var(--jade); font-weight: 700; }
.roundup-copy { white-space: pre-wrap; font: 400 15px/1.5 var(--body-font); background: var(--ground); padding: 12px; border-radius: 4px; margin: 8px 0 0; user-select: all; }

/* --- announcements (spec §11): a pixel letter over the map, the Inbox, the admin page ------------------ */
.letter { background: var(--raised); border: 1px solid var(--bone); padding: 16px; position: relative; }
.letter::before { content: ""; position: absolute; top: -1px; left: 16px; width: 22px; height: 5px; background: var(--sun); }
.letter-from { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.letter-badge { font: 400 12px/1 var(--display); text-transform: uppercase; background: var(--sun); color: var(--ground); padding: 4px 6px; }
.letter h2 { margin: 4px 0 8px; }
.letter-img { display: block; width: 100%; border-radius: 4px; margin: 0 0 10px; }
.letter-body a { color: var(--jade); }
.letter-btn { margin-top: 12px; text-decoration: none; }
.letter-btn.btn-shop { white-space: normal; text-align: center; line-height: 1.1; padding: 8px 22px 6px; }
.letter-sheet .letter { background: none; border: 0; padding: 0; }
.letter-sheet .letter::before { display: none; }
.letter-sheet .actions { margin-top: 14px; }
.inbox-item { margin: 0 0 16px; }
.inbox-item.unread .letter { box-shadow: 0 0 0 2px var(--jade); }
.phone-frame { max-width: 380px; margin: 10px auto 0; padding: 18px 12px; border: 3px solid var(--line); border-radius: 28px; background: var(--ground); }
.announce-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.announce-audience { border: 1px dashed var(--line); border-radius: 4px; padding: 10px 12px; display: grid; gap: 8px; }
.announce-form select, .announce-form textarea { width: 100%; }
.reach { margin: 4px 0 0; }
.reach b { font: 400 22px var(--pixel-font); color: var(--sun); }
.nav-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); margin-left: 4px; vertical-align: top; }
@media (max-width: 520px) { .announce-form .two { grid-template-columns: 1fr; } }

/* the surfing bison at every celebration, on the sunset disc (brand upgrade): decoration, so Tangerine is fine */
.checkpoint { padding-top: 60px; }
.checkpoint .surf { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); width: 104px; height: 104px;
  border-radius: 50%; border: 4px solid #06343D; overflow: hidden;
  background: linear-gradient(to bottom, #FFCE00 0 16%, #FF6A00 16% 24%, #FFCE00 24% 33%, #FF6A00 33% 39%,
              #FFCE00 39% 47%, #FF6A00 47% 51%, #FFCE00 51% 60%, #00BCC4 60%); }
.checkpoint .surf img { position: absolute; left: 50%; bottom: 8px; width: 84px; transform: translateX(-50%); }
.checkpoint.show .surf img { animation: surf-bob 1.2s ease-in-out infinite; }
@keyframes surf-bob { 50% { transform: translate(-50%, -4px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .checkpoint .surf img { animation: none !important; } }
#actions a { position: relative; }
#actions .nav-dot { position: absolute; top: 8px; right: 10px; margin: 0; }

/* --- Snack HQ (/admin) ----------------------------------------------------------------------------- */
.hq-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin: 8px 0; }
.hq-card > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hq-card .n { color: var(--dim); font-size: 14px; }
.hq-n { font: 400 24px var(--pixel-font); color: var(--dim); }
.hq-card.hot .hq-n { color: var(--sun); }
.hq-card.hot { box-shadow: inset 4px 0 0 var(--sun); }
.glass-page .label { display: block; margin: 18px 0 4px; }
.admin-table-wrap { overflow-x: auto; padding: 8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font: 600 11px var(--body-font); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 6px 8px; }
.admin-table td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
.admin-table a { color: var(--bone); }
#hq-btn { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 160px); width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 50%; color: var(--ground); background: var(--sun); text-decoration: none;
  font: 400 15px/1 var(--display); text-transform: uppercase; }
#hq-btn .jobs-count { background: var(--bone); }

/* ---- welcome, take 2 (18 Oct): what this is, who's with you, bring someone ---- */
.wel-hero { padding: 6px 2px 2px; }
.wel-hero h1 { font: 400 44px/1.02 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.wel-hero .mark { font-size: 1em; }
.wel-lead { font-size: 17px; line-height: 1.5; margin: 0; }
.wel-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.wel-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; }
.wel-steps .n { width: 34px; height: 34px; display: grid; place-items: center; background: var(--sun); color: var(--on-light);
  font: 400 20px/1 var(--display); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.wel-steps b { display: block; font-size: 16px; }
.wel-trail .stage-band { display: none; }
.wel-trail figcaption { display: none; }
.wel-trail p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.wel-faces { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.wel-faces li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 8px; border-radius: 4px; background: rgba(251, 247, 242, .05); }
.wel-faces b { font-size: 14px; margin-top: 4px; }
.wel-faces small { font-size: 11px; color: var(--hud-dim); letter-spacing: .04em; }
.wel-faces + p { font-size: 15px; line-height: 1.45; margin: 0; }
.wel-people-line { font-size: 15px; line-height: 1.45; margin: 8px 0 12px; }
.wel-more { margin-top: 12px; }
.wel-more summary, .wel-counted summary { cursor: pointer; font: 700 14px var(--body-font); color: var(--sun); list-style: none; min-height: 32px; display: flex; align-items: center; }
.wel-more summary::-webkit-details-marker, .wel-counted summary::-webkit-details-marker { display: none; }
.wel-counted summary .g-eyebrow { color: var(--sun); }
.wel-counted summary::after { content: "+"; margin-left: auto; font: 400 22px var(--display); color: var(--sun); }
.wel-counted[open] summary::after { content: "–"; }
.wel-counted p { font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.wel-go { margin-top: 4px; background: linear-gradient(to bottom, rgba(6,52,61,0), var(--ground) 30%); padding-top: 18px; }
.wel-eg { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--sun);
  background: rgba(255, 206, 0, .07); font-size: 14px; font-variant-numeric: tabular-nums; }
.wel-eg > span:first-child { grid-column: 1 / -1; font: 700 11px/1.3 var(--body-font); letter-spacing: .1em; text-transform: uppercase; color: var(--hud-dim); }
.wel-eg > span:last-child { text-align: right; }
.wel-eg b { color: var(--sun); }
.wel-eg.flat { border-left-color: var(--hud-dim); background: rgba(251, 247, 242, .04); margin-top: 6px; }
.wel-eg.flat b { color: var(--bone); }

/* Hoof it: phone-steps helper (Drazen, 18 Oct). Shut, it's one small link; open, a dashed box. */
.phone-help summary { cursor: pointer; list-style: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
  font: 700 14px var(--body-font); color: var(--water-deep); text-decoration: underline; text-underline-offset: 3px; }
.phone-help summary::-webkit-details-marker { display: none; }
.phone-help summary::after { content: "›"; text-decoration: none; display: inline-block; transition: transform .15s; }
.phone-help[open] { border: 1px dashed var(--line); border-radius: 4px; padding: 0 12px; }
.phone-help[open] summary { text-decoration: none; }
.phone-help[open] summary::after { transform: rotate(90deg); }
.phone-steps { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.steps-calc { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line); }
.steps-calc .field { margin: 0; }
.steps-out { display: flex; align-items: center; gap: 10px; font: 700 18px var(--body-font); font-variant-numeric: tabular-nums; min-height: 44px; }
.phone-note { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* steps mode: distance and climb come from the steps, so their boxes are greyed out */
.steps-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-left: 3px solid var(--sun);
  background: rgba(255, 206, 0, .07); font-size: 14px; line-height: 1.45; }
.steps-mode .link-btn { background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; color: var(--water-deep);
  font: 700 14px var(--body-font); text-decoration: underline; text-underline-offset: 3px; }
input.locked, input.locked:focus { opacity: .5; cursor: not-allowed; border-style: dashed; }

/* every sheet gets an × in the top corner (Drazen, 18 Oct). Sticky, so it stays put when a long sheet scrolls. */
.sheet-x { position: sticky; top: -8px; z-index: 2; margin: -10px -8px -34px auto;   /* in the flow (so it sticks) but takes no room */
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  font: 400 30px/1 var(--body-font); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.sheet-x:hover { border-color: var(--sun); color: var(--sun); }
.sheet-x:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
/* Me: the share card's own sheet (no share sheet on this device, or the card wasn't ready) */
.share-wrap { display: contents; }
.card-sheet { display: grid; gap: 10px; }
.card-preview { width: 100%; max-width: 420px; justify-self: center; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.card-hint { text-align: center; }
.card-link { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13px; word-break: break-all; }
.card-link a { color: var(--sun); }

/* --- the long trail's badges and finds (Stash, Drazen 19 Oct) ------------------------------------------------- */
.badge-shelf { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.badge { aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6px; border: 3px solid var(--ink); background: var(--sun); color: var(--on-light, #171310); position: relative; }
.badge b { font: 400 18px/1 var(--display); text-transform: uppercase; }
.badge small { font: 600 10px/1.1 var(--body-font); text-transform: uppercase; letter-spacing: .04em; }
.badge.b-day { background: var(--jade, #00E0B0); }
.badge.b-gw { background: var(--tangerine, #FF6A00); }
.badge.next { background: none; border: 3px dashed var(--hud-line, rgba(251,247,242,.3)); color: var(--hud-dim, #C9D6D6); }
.badge.next em { font: 600 10px/1.1 var(--body-font); font-style: normal; margin-top: 3px; color: var(--gold, #FFCE00); }
.find-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 4px; }
.find-list li { padding: 6px 10px; border-radius: 4px; background: rgba(251, 247, 242, .06); font-size: 14px; }
.find-next { margin: 0 0 8px; font-weight: 700; color: var(--gold, #FFCE00); }

/* the long trail on the map: waymarkers, the next find, "So close" (Drazen, 19 Oct) */
.waymarker { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; cursor: pointer; height: auto; }
.waymarker.passed { filter: saturate(.75); }
.map-far .waymarker { image-rendering: auto; }
.map-label .wm-tip { display: grid; gap: 3px; max-width: 220px; padding: 9px 11px; transform: translate(-50%, calc(-100% - 8px));
  background: var(--hud-solid, #0B4651); color: var(--hud-ink, #FBF7F2); border: 2px solid var(--sun); border-radius: 6px;
  font: 400 13px/1.35 var(--body-font); pointer-events: auto; }
.map-label .wm-tip b { font: 700 14px/1.2 var(--body-font); color: var(--sun); }
.map-label .wm-tip small { font: 600 11px var(--body-font); color: var(--hud-dim, #C9D6D6); }
.map-label .wm-tip small.gives { color: var(--jade); }
.map-label .find-glint { width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; position: relative;
  background: radial-gradient(circle, #FFF6DC 0 22%, rgba(255, 206, 0, .85) 23% 40%, rgba(255, 206, 0, 0) 41%);
  animation: find-glint 1.6s ease-in-out infinite; }
.map-label .find-glint::before, .map-label .find-glint::after { content: ""; position: absolute; left: 50%; top: 50%; background: #FFF6DC;
  transform: translate(-50%, -50%); }
.map-label .find-glint::before { width: 2px; height: 22px; } .map-label .find-glint::after { width: 22px; height: 2px; }
.map-label .glint-tip { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); white-space: nowrap; padding: 5px 8px;
  background: var(--hud-solid, #0B4651); color: var(--hud-ink, #FBF7F2); border-radius: 4px; font: 600 12px var(--body-font); }
@keyframes find-glint { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.8) rotate(0deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .map-label .find-glint { animation: none; } }
#status .so-close, #status .horizon-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
#status .so-close, #status .horizon-line .l { font: 700 11px/1 var(--body-font); letter-spacing: .1em; text-transform: uppercase; color: var(--sun); }
#status .so-close, #status .horizon-line b { font-weight: 700; }
#status .so-close, #status .horizon-line .km { color: var(--hud-dim, #C9D6D6); font-variant-numeric: tabular-nums; }

/* Normal / Hard (Drazen, 19 Oct) and the home-screen card */
.difficulty-pick { display: grid; gap: 12px; }
.diff-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; cursor: pointer; }
.diff-card input { grid-row: span 2; width: 22px; height: 22px; accent-color: var(--jade); }
.diff-card .diff-name { font: 400 26px/1 var(--display); text-transform: uppercase; }
.diff-card:has(input:checked) { outline: 3px solid var(--sun); }
.diff-hard .diff-name { color: var(--sun); }
.climb-now.hard { color: var(--sun); }
.hard-warn { margin: 6px 0 0; }
.install-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.install-steps ol { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.install-card .g-btn { margin: 6px 0 4px; }

/* weekly quests and squad goals (Drazen, 19 Oct) */
.quests { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.quest { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.quest .q-title { font-weight: 700; }
.quest .q-bar, .squad-goal .q-bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: rgba(251, 247, 242, .1); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--sun); border-radius: 5px; }
.quest.done .q-bar i, .squad-goal.done .q-bar i { background: var(--jade); }
.quest .q-n { grid-row: 1; grid-column: 2; font: 500 13px var(--pixel-font); color: var(--hud-dim, #C9D6D6); }
.quest.done .q-n { color: var(--jade); }
.q-reward { grid-column: 1 / -1; color: var(--hud-dim, #C9D6D6); font-size: 12px; }
.squad-goal { display: grid; gap: 5px; margin: 8px 0 12px; }
.squad-goal .q-n { font-size: 14px; font-weight: 700; }

/* seasons on the map (Drazen, 19 Oct): a light drift of snow, blossom, sun motes or leaves. Never in the way. */
.season-fx { position: fixed; inset: 0; pointer-events: none; z-index: 640; overflow: hidden; }
.season-fx i { position: absolute; top: -20px; left: calc(var(--i) * 5.7%); width: 8px; height: 8px; opacity: .85;
  animation: season-fall calc(9s + var(--i) * .7s) linear infinite; animation-delay: calc(var(--i) * -1.3s); }
.season-snow .season-fx i { background: #FFFBF2; border-radius: 50%; box-shadow: 0 0 4px rgba(255,255,255,.7); }
.season-blossom .season-fx i { background: #F7B6C8; border-radius: 60% 0 60% 0; width: 9px; height: 7px; }
.season-leaves .season-fx i { background: #E07A2E; border-radius: 0 70% 0 70%; width: 10px; height: 8px; }
.season-leaves .season-fx i:nth-child(3n) { background: #C9A227; }
.season-sun .season-fx i { background: rgba(255, 214, 102, .55); border-radius: 50%; width: 5px; height: 5px; animation-name: season-float; }
@keyframes season-fall { from { transform: translate(0, -20px) rotate(0deg); } to { transform: translate(40px, 110vh) rotate(300deg); } }
@keyframes season-float { 0% { transform: translate(0, 100vh); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate(30px, -10vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } }
.season-now { color: var(--hud-dim, #C9D6D6); }

.b-swatch.locked { opacity: .45; cursor: not-allowed; background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,.35) 5px 7px); }

/* Snack HQ: the game's dials */
.game-hq { margin-top: 14px; min-width: 0; max-width: 100%; }
.game-hq .admin-table-wrap { max-width: 100%; overflow-x: auto; padding: 0; }
.game-hq .g-btn { width: auto; justify-self: start; }
.hq-numbers { display: grid; gap: 10px; }
.hq-num { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hq-num input { width: 110px; flex: none; }
.hq-num small { flex: 1 1 180px; min-width: 0; }
.hq-rows input, .hq-rows select, .hq-rows textarea { width: 100%; min-width: 70px; font: inherit; font-size: 13px; padding: 5px 6px; }
.hq-rows textarea { min-width: 180px; }
.hq-rows td { vertical-align: top; padding: 4px; }
.hq-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* the walk sheet: everything a walk got, before the bison moves (Drazen, 20 Oct) */
.walk-summary { max-height: 86vh; overflow-y: auto; }
.walk-summary .sum-block { margin: 14px 0 0; display: grid; gap: 6px; }
.walk-summary .sum-stop { padding: 10px 12px; border-radius: 6px; background: rgba(255, 206, 0, .1); border-left: 4px solid var(--sun); }
.walk-summary .sum-stop b { font: 400 22px/1.1 var(--display); text-transform: uppercase; }
.walk-summary .sum-stop p { margin: 4px 0 0; }
.walk-summary .sum-item, .walk-summary .sum-gift { font-weight: 700; color: var(--jade); }
.walk-summary .sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.walk-summary .sum-list li { padding: 6px 10px; border-radius: 4px; background: rgba(251, 247, 242, .06); }
.walk-summary .sum-list li.sum-destination, .walk-summary .sum-list li.sum-waymarker { font-weight: 700; }
.walk-summary .sum-extra b { font-size: 17px; }
.walk-summary .sum-postcards { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; }
.walk-summary .sum-postcards img { width: 90px; border-radius: 4px; display: block; }
.walk-summary .sum-postcards span { display: block; font-size: 12px; margin-top: 3px; max-width: 90px; }
.walk-summary .sum-asks { display: grid; gap: 8px; margin-top: 16px; }
.walk-summary .sum-done { margin: 0; font-weight: 700; color: var(--jade); }
.toggle.mode-pick { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.phone-help .steps-mode { margin: 6px 0; font-weight: 700; }

/* Hoof it as a wizard (Drazen, 20 Oct) */
.hoof-step { display: grid; gap: 12px; }
.step-q { margin: 4px 0 0; font: 700 18px/1.3 var(--body-font); }
.mode-cards { display: grid; gap: 10px; }
.mode-card { display: grid; gap: 4px; padding: 14px 16px; border: 2px solid var(--outline); border-radius: 6px; text-align: left;
  background: rgba(251, 247, 242, .05); color: inherit; font: inherit; cursor: pointer; }
.mode-card b { font: 400 20px/1 var(--display); text-transform: uppercase; }
.mode-card span { font-size: 14px; color: var(--hud-dim, #C9D6D6); }
.mode-card:hover, .mode-card:focus-visible { border-color: var(--jade); outline: none; background: rgba(0, 229, 184, .1); }
.remember { font-size: 14px; }
.mode-chip { display: flex; align-items: center; gap: 10px; margin: 0; }
.mode-chip b { font: 400 16px/1 var(--display); text-transform: uppercase; color: var(--jade); }
.photo-pick.big { display: grid; gap: 10px; }
.photo-pick.big .btn { justify-content: center; }
.photo-pick.busy { opacity: .6; pointer-events: none; }
.step-note { margin: 0; }
.help-link { justify-self: start; }
.hoof-help { font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 6px; background: rgba(251, 247, 242, .06); }
.hoof-help p { margin: 0 0 6px; }
.step-photo { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.step-photo img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.step-photo small { display: block; color: var(--hud-dim, #C9D6D6); }
.sheet .link-btn, .hoof-step .link-btn, .mode-chip .link-btn { background: none; border: 0; padding: 2px 0; color: var(--sun);
  font: 600 14px var(--body-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the difficulty, always in sight (Drazen, 20 Oct) */
.diff-tag { display: inline-block; padding: 1px 7px; border-radius: 3px; font: 700 11px/1.5 var(--body-font); letter-spacing: .06em;
  text-transform: uppercase; background: var(--jade); color: var(--on-light); }
.diff-tag.diff-hard { background: var(--sun); }
.diff-line { margin: 0; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.diff-line a { color: var(--sun); font-weight: 600; }

/* Just keep walking (Drazen, 21 Oct): the horizon, Trail ahead, the welcome card, the world as the menu */
#status .horizon-line { margin-top: 4px; }
#status .horizon-line.h-feature .l { color: var(--jade); }
#status .horizon-line.real .l { color: #FF9A4D; }
.trail-ahead { margin: 6px 0 14px; }
.ahead-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.ahead { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px;
  border-top: 1px solid var(--hud-line); }
.ahead-what { min-width: 0; display: grid; }
.ahead-what b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahead-what small { color: var(--hud-dim, #C9D6D6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahead-km { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--hud-dim, #C9D6D6); white-space: nowrap; }
.ahead-icon { width: 14px; height: 14px; border-radius: 3px; background: var(--gold); justify-self: center; box-shadow: 0 0 0 3px rgba(255, 206, 0, .2); }
.a-climb .ahead-icon { background: var(--silver); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; box-shadow: none; }
.a-gift .ahead-icon, .real .ahead-icon { background: #E0691A; box-shadow: 0 0 0 3px rgba(224, 105, 26, .3); }
.a-item .ahead-icon, .a-destination .ahead-icon { background: var(--jade); box-shadow: 0 0 0 3px rgba(0, 229, 184, .2); }
.a-waymarker .ahead-icon { background: #8B5A2B; }
.a-find .ahead-icon { background: #FFF6DC; transform: rotate(45deg) scale(.8); }
.a-badge .ahead-icon { border-radius: 50%; background: var(--sun); }
.a-feature .ahead-icon { background: transparent; border: 2px dashed var(--jade); box-shadow: none; }
.a-elders .ahead-icon { background: var(--silver); border-radius: 50%; }
.a-feature .ahead-what b { color: var(--jade); }
.real .ahead-what small, .a-gift .ahead-what small { color: #FF9A4D; font-weight: 700; }
.ahead-scale { margin: 8px 0 0; font-size: 13px; }
.welcome-card .wc-ahead { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.welcome-card .wc-ahead li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-weight: 600; }
.welcome-card .wc-ahead small { color: var(--hud-dim, #C9D6D6); }
.welcome-card .wc-install { margin: 10px 0 0; font-size: 13px; text-align: center; }
.walk-summary .sum-new { padding: 10px 12px; border-radius: 6px; background: rgba(0, 229, 184, .1); border-left: 4px solid var(--jade); }
.walk-summary .sum-new b { font: 400 20px/1.1 var(--display); text-transform: uppercase; color: var(--jade); }
.walk-summary .sum-new p, .walk-summary .sum-elders p { margin: 0; }
.walk-summary .sum-elders { padding: 10px 12px; border-radius: 6px; background: rgba(201, 214, 214, .1); border-left: 4px solid var(--silver); }
.walk-summary .sum-post a { font-weight: 700; }
.sum-next { margin: 16px 0 0; font-weight: 600; }
.sum-next .label { color: var(--sun); }
.climb-q { padding: 12px; border-radius: 6px; border: 2px solid var(--sun); background: rgba(255, 206, 0, .06); }
.climb-q p { margin: 0; }
.climb-q .tread-q { border: 0; padding: 0; margin: 4px 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.climb-q-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.climb-q-picks .btn { display: grid; gap: 4px; text-align: left; justify-items: start; height: auto; padding: 10px 12px; white-space: normal; }
.climb-q-picks .btn small { font: 400 12px/1.35 var(--body-font); text-transform: none; letter-spacing: 0; }
.climb-card { max-width: 520px; }
.small { font-size: 13px; }
/* the things on the map you can tap (labels: constant size) */
.map-label .world { transform: translate(-50%, -100%); pointer-events: none; }
.world-btn { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 0;
  background: rgba(11, 70, 81, .85); border-radius: 6px; box-shadow: 0 2px 0 rgba(6, 52, 61, .9); cursor: pointer; color: var(--bone, #FBF7F2);
  font: 700 12px/1 var(--body-font); }
.world-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.world-btn svg { display: block; image-rendering: pixelated; }
.world-btn .nav-dot { position: absolute; top: -3px; right: -3px; margin: 0; }
.world.hut.has-post .world-btn { background: var(--sun); color: var(--on-light, #06343D); animation: post-bob 1.8s ease-in-out infinite; }
.world .post-n, .world .board-n, .world .note-n { padding: 0 3px; }
.world.parcel .world-btn { background: rgba(224, 105, 26, .9); }
.world.bunting .bunting-t { padding-right: 4px; }
.map-label .pill .bag-btn { margin-left: 6px; padding: 1px; vertical-align: middle; background: rgba(6, 52, 61, .25); box-shadow: none; }
.map-label .pill .bag-btn svg { width: 18px; height: 18px; }
.map-label .pill .ice-axe svg { width: 16px; height: 16px; vertical-align: middle; margin-left: 4px; }
.map-label .pill { pointer-events: none; }
.bison.tappable { cursor: pointer; }
.new-dot { animation: new-dot 1.4s ease-in-out infinite; }
@keyframes new-dot { 50% { transform: scale(1.35); } }
@keyframes post-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .new-dot, .world.hut.has-post .world-btn { animation: none; } }
.hq-funnel { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.hq-funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.hq-funnel .hf-n { font: 400 22px/1 var(--pixel-font); color: var(--sun); }
.hq-funnel .hf-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(251, 247, 242, .08); overflow: hidden; }
.hq-funnel .hf-bar i { display: block; height: 100%; background: var(--jade); }
.hq-funnel small { grid-column: 1 / -1; }
.welcome-card .actions { grid-template-columns: 1fr 1fr; }
.welcome-card .actions .btn { min-width: 0; padding-left: 8px; padding-right: 8px; }
#actions button { position: relative; }
/* Hoof it: the photo's progress (Drazen, 21 Oct) */
.photo-progress { display: grid; gap: 6px; }
.photo-progress .pp-label { font-weight: 600; }
.photo-progress .pp-bar { height: 8px; border-radius: 4px; background: rgba(251, 247, 242, .1); overflow: hidden; }
.photo-progress .pp-bar i { display: block; height: 100%; width: 0; background: var(--jade); transition: width .2s linear; }
.photo-progress .link-btn { justify-self: start; }
.hq-vision { margin: 0 0 12px; }
.hq-vision.down { border-color: var(--sun); }
/* Why this exists (Drazen, 21 Oct) */
.about-story { display: grid; gap: 12px; margin: 8px 0 18px; }
.about-story .mascot { width: 84px; height: auto; filter: drop-shadow(0 6px 0 var(--deep)); }
.about-story h1 { margin: 0; font-size: 40px; line-height: 1.05; }
.about-story p { margin: 0; font-size: 17px; line-height: 1.55; }
.about-signed { color: var(--sun); font-weight: 700; }
.about-how .wel-steps b { color: var(--bone); }
.about-tagline { margin: 22px 0 6px; text-align: center; font: 400 28px/1.1 var(--display); text-transform: uppercase; color: var(--sun); }
.about-link { margin: 4px 0 18px; font-weight: 600; }
.about-link a { color: var(--sun); }
.me-about { text-align: center; }
/* the first screen (Drazen, 21 Oct): what it is, the way in, then why and how. Wide screens: two columns */
.landing { display: grid; gap: 22px; }
.land-hero { display: grid; gap: 10px; }
.land-hero .mascot { width: 84px; height: auto; filter: drop-shadow(0 6px 0 var(--deep)); }
.glass-page .land-hero h1 { margin: 0; font-size: 40px; line-height: 1.02; }
.land-hero .lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--bone); }
.land-join { display: grid; gap: 12px; padding: 18px 16px; }
.land-join h2 { margin: 0; font: 400 26px/1 var(--display); text-transform: uppercase; }
.land-join > p { margin: 0; }
.land-join .stack { display: grid; gap: 10px; }
.land-story { display: grid; gap: 18px; }
.about-why { display: grid; gap: 10px; }
.glass-page .about-why-title { margin: 0; font: 400 36px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0; }
.about-why p { margin: 0; font-size: 17px; line-height: 1.55; }
.about-mascot { width: 84px; height: auto; filter: drop-shadow(0 6px 0 var(--deep)); }
.land-again { margin: 0; text-align: center; }
@media (min-width: 900px) {
  .glass-page .page:has(.landing) { max-width: 1060px; }
  .landing { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); grid-template-areas: "hero join" "story join"; gap: 22px 40px; align-items: start; }
  .land-hero { grid-area: hero; }
  .land-join { grid-area: join; position: sticky; top: 28px; }
  .land-story { grid-area: story; }
  .glass-page .land-hero h1 { font-size: 60px; }
  .land-again { display: none; }
}
/* You unlocked (Drazen, 23 Oct): an award, not a note */
.sum-unlock { position: relative; margin: 18px 0 4px; padding: 30px 16px 18px; display: grid; justify-items: center; gap: 6px;
  text-align: center; border-radius: 10px; border: 3px solid var(--sun);
  background: radial-gradient(circle at 50% 34%, rgba(255, 206, 0, .32), rgba(255, 206, 0, .06) 55%, rgba(0, 229, 184, .06));
  box-shadow: 0 0 0 4px rgba(255, 206, 0, .15), 0 8px 0 rgba(6, 52, 61, .6); overflow: hidden; animation: unlock-pop .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.unlock-ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 4px 16px 5px;
  font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--on-light);
  background: var(--sun); border-radius: 0 0 6px 6px; white-space: nowrap; }
.unlock-badge { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.unlock-badge .unlock-icon { position: relative; z-index: 1; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(6, 52, 61, .7));
  animation: unlock-bob 2.2s ease-in-out infinite; }
.unlock-rays { position: absolute; inset: -18px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 206, 0, .45) 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: unlock-spin 12s linear infinite; }
.unlock-name { font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--sun); text-shadow: 0 3px 0 rgba(6, 52, 61, .8); }
.unlock-line { margin: 0; font-size: 16px; line-height: 1.45; }
.unlock-where { margin: 2px 0 0; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: rgba(0, 229, 184, .16); color: var(--jade); }
@keyframes unlock-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes unlock-bob { 50% { transform: translateY(-5px); } }
@keyframes unlock-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sum-unlock, .unlock-badge .unlock-icon, .unlock-rays { animation: none; } }
/* postcards in the walk sheet: a frame that shows the words if the picture fails */
.sum-postcards .pc-frame { position: relative; display: block; width: 90px; height: 160px; border-radius: 4px; overflow: hidden;
  background: #06343D; border: 2px solid var(--sun); }
.sum-postcards .pc-frame img { width: 100%; height: 100%; object-fit: cover; }
.sum-postcards .pc-words { display: none; position: absolute; inset: 0; place-items: center; padding: 8px; text-align: center;
  font: 400 16px/1.05 var(--display); text-transform: uppercase; color: var(--bone); }
.sum-postcards .pc-failed img { display: none; }
.sum-postcards .pc-failed .pc-words { display: grid; }
/* Next up: the stage you're on (Drazen, 23 Oct) */
.sum-leg { padding: 12px; border-radius: 8px; background: rgba(251, 247, 242, .05); border: 1px solid var(--hud-line); }
.sum-leg .leg-title { font: 400 24px/1 var(--display); text-transform: uppercase; }
.leg-profile { display: block; width: 100%; height: auto; margin: 4px 0; }
.leg-profile .leg-area { fill: rgba(141, 174, 90, .28); }
.leg-profile .leg-area.walked { fill: rgba(141, 174, 90, .55); }
.leg-profile .leg-area.this-walk { fill: rgba(255, 206, 0, .55); }
.leg-profile .leg-ridge { fill: none; stroke: rgba(251, 247, 242, .55); stroke-width: 4; stroke-dasharray: 10 10; }
.leg-profile .leg-ridge.done { stroke: var(--sun); stroke-dasharray: none; stroke-width: 6; }
.leg-profile .leg-flag { stroke: var(--bone); stroke-width: 4; }
.leg-profile .leg-flag-cloth { fill: #E0691A; }
.leg-profile .leg-stop { fill: var(--bone); }
.leg-profile .dot.you { fill: var(--sun); stroke: #06343D; stroke-width: 5; }
.leg-profile .leg-name { fill: var(--hud-dim, #C9D6D6); font: 600 26px var(--body-font); }
.leg-profile .leg-name.to { fill: var(--bone); font-weight: 700; }
.leg-facts, .leg-eta { margin: 0; }
.leg-eta { color: var(--jade); font-weight: 600; }
.leg-there { margin-top: 6px; display: grid; gap: 4px; }
.leg-there p { margin: 0; }
.sum-gift.real { color: #FF9A4D; }
/* a puff of dust behind a walking bison (Drazen, 23 Oct) */
.dust-puff { position: absolute; left: 0; top: 0; width: 34px; height: 18px; margin: -10px 0 0 -17px; border-radius: 50%;
  background: rgba(240, 228, 200, .75); box-shadow: 10px -4px 0 -3px rgba(240, 228, 200, .6); pointer-events: none;
  transform-origin: 50% 50%; animation: dust .9s ease-out forwards; }
@keyframes dust { from { opacity: .9; scale: .5; } to { opacity: 0; scale: 1.5; translate: 0 -10px; } }

/* Snack HQ: one walker (admin_walker.html) */
.hq-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.hq-state-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(251, 247, 242, .06); }
.hq-state-grid b { font: 700 20px/1.1 var(--pixel-font); color: var(--hud-ink); }
.hq-state-grid small { font-size: 11px; }
.g-tag.dim { opacity: .55; }
@media (max-width: 420px) { .hq-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stop-card-img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; margin: 8px 0 4px; }
.map-label .wm-tip img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 6px; }

/* Boy Boss HQ: the trail timeline (admin_trail.html) */
.tl { list-style: none; margin: 14px 0 40px; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 61px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: rgba(251, 247, 242, .14); }
.tl > li { display: grid; grid-template-columns: 52px 20px minmax(0, 1fr); gap: 0 8px; align-items: start; margin: 0 0 10px; }
.tl-km { font: 700 14px/1.1 var(--pixel-font); color: var(--hud-ink); text-align: right; padding-top: 18px; }
.tl-km small { display: block; font: 600 10px var(--body-font); color: var(--hud-dim); }
.tl-dot { width: 14px; height: 14px; margin: 19px 0 0 3px; border-radius: 50%; background: var(--ground); border: 3px solid var(--hud-dim); position: relative; z-index: 1; }
.tl-stop .tl-dot { background: var(--sun); border-color: var(--sun); }
.tl-destination .tl-dot { border-color: var(--jade); background: var(--jade); }
.tl-row.has .tl-dot { box-shadow: 0 0 0 4px rgba(255, 206, 0, .25); }
.tl-finds { margin-top: -4px !important; }
.tl-finds .tl-dot { width: 8px; height: 8px; margin: 4px 0 0 6px; border: 0; background: rgba(251, 247, 242, .3); }
.tl-finds small { font-size: 12px; padding-top: 0; }
.tl-card { margin: 0; padding: 12px 14px; }
.tl-card summary { list-style: none; cursor: pointer; display: grid; gap: 4px; }
.tl-card summary::-webkit-details-marker { display: none; }
.tl-card summary .g-eyebrow::after { content: " ▸"; }
.tl-card[open] summary .g-eyebrow::after { content: " ▾"; }
.tl-name { font: 700 16px/1.25 var(--body-font); color: var(--bone); }
.tl-tags:empty { display: none; }
.tl-tags .g-tag { margin-bottom: 2px; }
.tl-text { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-card[open] .tl-text { display: none; }
.tl-card form { margin-top: 12px; border-top: 1px solid rgba(251, 247, 242, .1); padding-top: 12px; }
.g-tag.tl-gift { background: rgba(255, 206, 0, .18); color: var(--gold); }
.g-tag.tl-item { background: rgba(0, 229, 186, .14); color: var(--jade); }
.g-tag.tl-opens { background: rgba(157, 173, 114, .22); color: #C9D6A3; }
.tl-image img { width: 100%; max-width: 320px; border-radius: 8px; }
.tl-filter { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.tl-filter .g-pill.on { background: var(--sun); color: var(--on-light); border-color: var(--sun); }
.tl-add summary { list-style: none; cursor: pointer; display: grid; gap: 4px; }
.tl-add summary::-webkit-details-marker { display: none; }
.tl-add form { margin-top: 12px; }
.tl-head .hq-state-grid { margin-top: 0; }
.tl-head .hq-state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tl-head .hq-state-grid > div { padding: 8px 10px; }
.tl-head .hq-state-grid .label { font-size: 10px; }
@media (min-width: 900px) { .tl-head .hq-state-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tl-add summary, .tl-head p { text-align: left; justify-items: start; }
.g-btn.hq-change { display: inline-flex; margin-top: 8px; padding: 6px 12px; font-size: 13px; min-height: 0; }
.land-invite { margin: 0 0 6px; font: 600 15px/1.3 var(--body-font); color: var(--sun); }