/* ============================================================
   PALETTE — sky adventure · sage greenwood · cafe cream
   ============================================================ */
:root {
  --cream:      #f6f1e7;
  --cream-deep: #ece2d0;
  --paper:      #fffdf8;
  --sage:       #7d9b6a;
  --sage-deep:  #5a7350;
  --forest:     #3f5238;
  --wood:       #9c7a52;
  --wood-deep:  #6f5436;
  --ink:        #2f2a24;
  --ink-soft:   #6b6258;
  --blush:      #e8b9a8;
  --sky-top:    #bfe0ef;
  --sky-mid:    #dceef2;
  --sky-low:    #f3ecdc;
  --hill-far:   #aebf8e;
  --hill-near:  #87a06b;
  --grass:      #7d9b6a;
  --heart:      #6f9b5f;
  --shadow:     rgba(63, 82, 56, 0.18);

  --radius:     20px;
  --ground-h:   26vh;          /* how tall the grass band is */
  --char-x:     50vw;          /* where Kyle + Chelsea stand (centered) */
  --peanuts-green: #6b7359;    /* the sticker-sheet green */
  --peanuts-green-d: #5c6450;
  --font-body:  'Barcelona', 'Lora', Georgia, 'Times New Roman', serif;
  --font-head:  'Barcelona', 'Lora', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--peanuts-green);   /* one green, the whole time */
  overflow: hidden;            /* fixed stage; we scroll it ourselves — never a vertical scroll */
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

kbd {
  font-family: var(--font-body);
  background: rgba(255,255,255,.8);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 800;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  font-size: .8em;
}

/* ============================================================
   INTRO ANIMATION
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #76805f 0%, var(--peanuts-green) 55%, var(--peanuts-green-d) 100%);
  cursor: pointer; overflow: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}
.intro.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.intro__card { position: relative; z-index: 2; text-align: center; padding: 2rem;
  animation: cardPop .9s cubic-bezier(.2,.9,.25,1.2) both;
  transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
/* on dismiss the title simply settles into the scene */
.intro.is-hiding .intro__card { transform: scale(.96); opacity: 0; }
@keyframes cardPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.intro__kicker { font-weight: 600; font-style: italic; letter-spacing: .1em;
  font-size: .82rem; color: #e6ead8; margin-bottom: 1rem;
  opacity: 0; animation: fadeUp .6s ease .5s forwards; }

.intro__title { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.6rem, 12vw, 5.2rem); line-height: 1.02; color: #fdfbf2;
  display: flex; flex-wrap: wrap; gap: .25em; justify-content: center;
  text-shadow: 0 3px 14px rgba(0,0,0,.18); }
.intro__word { display: inline-block; opacity: 0; transform: translateY(24px) rotate(-4deg);
  animation: wordIn .7s cubic-bezier(.2,.9,.3,1.3) forwards;
  animation-delay: calc(.15s * var(--i) + .15s); }
.intro__word:nth-child(2) { color: #fdfbf2; transform: translateY(24px) rotate(4deg); }
@keyframes wordIn { to { opacity: 1; transform: translateY(0) rotate(0); } }

.intro__heart { font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.3rem); color: #fdfbf2; margin: .5rem 0 .2rem;
  text-shadow: 0 3px 12px rgba(0,0,0,.2);
  opacity: 0; animation: heartBeat 1s ease .85s forwards; }
@keyframes heartBeat { 0% { opacity: 0; transform: scale(0);} 60% { opacity: 1; transform: scale(1.25);} 80% { transform: scale(.92);} 100% { opacity: 1; transform: scale(1);} }

.intro__sub { font-weight: 500; font-style: italic; color: #eef0e4;
  font-size: clamp(.95rem, 3.6vw, 1.1rem); opacity: 0;
  animation: fadeUp .6s ease 1.2s forwards, pulse 2s ease 1.8s infinite; }

.intro__steam { position: absolute; top: calc(50% - 180px); left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 1; opacity: .5; }
.intro__steam span { width: 7px; height: 42px; border-radius: 50%; filter: blur(3px);
  background: linear-gradient(to top, transparent, #cdbfa6); animation: steam 3s ease-in-out infinite; }
.intro__steam span:nth-child(2) { animation-delay: .6s; }
.intro__steam span:nth-child(3) { animation-delay: 1.2s; }
@keyframes steam { 0% { transform: translateY(10px) scaleY(.6); opacity: 0; } 40% { opacity: .7; } 100% { transform: translateY(-26px) scaleY(1.2); opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }
@keyframes pulse  { 0%,100% { opacity: .65;} 50% { opacity: 1;} }

/* ---------- COUNTDOWN (same look as the intro, with a live timer) ---------- */
.countdown { display: none; cursor: default; z-index: 65; }
.countdown .intro__card { padding: 1.6rem 1rem; }
.countdown__time { font-family: var(--font-head); font-weight: 700; color: #fdfbf2;
  font-size: clamp(1.9rem, 10vw, 4.8rem); line-height: 1.04; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; margin: .2rem 0 .1rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.18);
  opacity: 0; animation: fadeUp .6s ease .3s forwards; }
.countdown__labels { display: flex; justify-content: center; gap: clamp(.9rem, 6vw, 2.7rem);
  color: #d9ddc8; font-size: clamp(.55rem, 2.3vw, .72rem); letter-spacing: .22em;
  text-transform: uppercase; font-weight: 600;
  opacity: 0; animation: fadeUp .6s ease .5s forwards; }
.cd-pola { position: absolute; z-index: 1; background: #fdfbf2; padding: 6px 6px 18px;
  border-radius: 5px; box-shadow: 0 14px 30px rgba(0,0,0,.32);
  transform: rotate(var(--r,0)); animation: cdFloat 5s ease-in-out infinite;
  animation-delay: var(--d,0s); }
.cd-pola img { display: block; width: clamp(74px, 12vw, 132px); aspect-ratio: 3 / 4;
  object-fit: cover; border-radius: 3px; background: var(--cream-deep); }
@keyframes cdFloat { 0%,100% { transform: rotate(var(--r,0)) translateY(0); }
  50% { transform: rotate(var(--r,0)) translateY(-9px); } }

/* the two of us above the timer — tap to switch places */
.cd-duo { display: flex; justify-content: center; align-items: flex-end; gap: 4px;
  margin: .4rem auto .2rem; }
.cd-char { background: none; border: 0; padding: 0; line-height: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.cd-char:hover { transform: translateY(-4px) scale(1.04); }
.cd-char:active { transform: scale(.93); }
.cd-char img { width: clamp(66px, 16vw, 94px); height: auto; display: block;
  filter: drop-shadow(0 6px 11px rgba(0,0,0,.3)); animation: cdCharBob 3s ease-in-out infinite; }
.cd-char:last-child img { animation-delay: .5s; }
@keyframes cdCharBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cd-char.pop { animation: cdPop .5s ease; }
@keyframes cdPop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.16) rotate(-5deg); }
  70% { transform: scale(.96) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.cd-duo__hint { text-align: center; color: #d9ddc8; font-style: italic; font-weight: 500;
  font-size: clamp(.7rem, 2.6vw, .82rem); margin: 0 0 .5rem; opacity: .85; }

/* ============================================================
   THE STAGE — one green, the whole time
   ============================================================ */
.app { position: fixed; inset: 0; overflow: hidden; background: var(--peanuts-green);
  opacity: 0; transition: opacity .8s ease; }
.app.is-ready { opacity: 1; }

/* ---------- TOP TITLE (the intro flies up into this) ---------- */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 7; text-align: center;
  padding: 1.6vh 1rem .8vh; pointer-events: none; opacity: 0; transition: opacity .6s ease .25s; }
.app.is-ready .topbar { opacity: 1; }
.topbar__title { font-family: var(--font-head); font-weight: 700; color: #fdfbf2;
  font-size: clamp(1.5rem, 6.4vw, 2.5rem); line-height: 1.05; letter-spacing: .01em;
  text-shadow: 0 3px 12px rgba(0,0,0,.2); }
.topbar__title em { font-style: normal; color: #fdfbf2; }
.topbar__mahal { display: block; font-style: italic; font-weight: 500;
  font-size: clamp(.95rem, 4vw, 1.35rem); color: #fdfbf2; margin-top: .1rem; opacity: .95; }
.topbar .counter { margin-top: .5rem; }

/* ---------- DIRT PATH (built + scrolled in JS) ---------- */
.dirt { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; z-index: 2;
  pointer-events: none; background-repeat: repeat-x; background-position: left bottom; }

/* the moving world layer holds memories + stickers — kept ABOVE the characters
   so a photo collage never gets hidden behind them */
.world { position: absolute; inset: 0; z-index: 7; will-change: transform; }

/* fireworks canvas — sits behind the cards like distant sky bursts */
.fireworks { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .5s ease; }
.fireworks.on { opacity: 1; }

/* ============================================================
   STATIONS (each memory)
   ============================================================ */
/* anchored from the bottom so the title always sits on the same line, just above the icons;
   the photo row grows upward from there and is height-capped to fit (see layoutCollage in JS) */
.station { position: absolute; bottom: 286px; top: auto; transform: translateX(-50%);
  width: min(98vw, 1520px); display: flex; flex-direction: column; align-items: center;
  opacity: .3; transition: opacity .4s ease, transform .4s ease; }
.station.is-near { opacity: 1; }

/* date pill (above the card) */
.signpost { order: 1; margin-bottom: 8px; }
.signpost__board { display: inline-block; background: var(--wood); color: #fff7e8; font-family: var(--font-head);
  font-weight: 700; font-size: .8rem; padding: .28rem .9rem; border-radius: 999px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px var(--shadow);
  border: 2px solid var(--wood-deep); white-space: nowrap;
  transform: rotate(-2deg); }
.signpost__post { display: none; }

/* animated photo collage */
.collage { order: 2; position: relative; width: 100%;
  display: flex; justify-content: center; align-items: flex-end; gap: 10px; flex-wrap: nowrap; }
.polaroid { background: #fff; padding: 8px 8px 26px; border-radius: 7px;
  box-shadow: 0 12px 26px var(--shadow); margin: 0; flex: 0 0 auto;
  transform: rotate(var(--r, -4deg)) translateY(24px) scale(.9); opacity: 0;
  transition: transform .25s ease, box-shadow .25s ease, z-index 0s;
  cursor: zoom-in; }
.station.is-near .polaroid { animation: dealIn .6s cubic-bezier(.2,.9,.3,1.2) forwards;
  animation-delay: var(--d, 0s); }
@keyframes dealIn { to { opacity: 1; transform: rotate(var(--r, -4deg)) translateY(0) scale(1); } }
/* uniform row height (set by JS), width follows each photo's aspect ratio (no cropping) */
.polaroid img { display: block; height: var(--imgH, 220px); width: auto;
  border-radius: 4px; background: var(--cream-deep); }
.polaroid:hover { transform: rotate(0) translateY(-10px) scale(1.08) !important;
  box-shadow: 0 18px 34px var(--shadow); z-index: 20; }
.polaroid__cap { font-size: .62rem; font-weight: 700; color: var(--ink-soft);
  text-align: center; margin-top: 3px; min-height: .7rem; }

/* the note — text straight on the green */
.note { order: 3; padding: .4rem .4rem 0; margin-top: 12px; width: 100%; text-align: center; }
.note__title { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem;
  color: #fdfbf2; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.note__text { color: #f1f2e9; line-height: 1.55; font-size: 1rem; margin-top: .3rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.28); }

/* per-station edit controls */
.station__tools { order: 0; display: none; gap: 6px; margin-bottom: 8px; }
body.editing .station.is-near .station__tools { display: flex; }
.chip { border: none; cursor: pointer; font-family: var(--font-body); font-weight: 800;
  font-size: .74rem; padding: .35rem .7rem; border-radius: 999px; background: var(--sage); color: #fff;
  box-shadow: 0 4px 10px var(--shadow); }
.chip--danger { background: #c2614f; }
.chip:hover { transform: translateY(-2px); }

body.editing .note__title, body.editing .note__text, body.editing .signpost__board {
  outline: 1.5px dashed var(--blush); outline-offset: 3px; border-radius: 8px; }
body.editing [contenteditable="true"]:focus { outline: 2px solid var(--sage); background: #fff; }

/* welcome + end panels — text straight on the green */
.panel { position: absolute; top: 16vh; transform: translateX(-50%);
  width: min(90vw, 440px); text-align: center; padding: 0 1rem; }
.panel__title { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.7rem, 6.4vw, 2.5rem); color: #fdfbf2; line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.panel__title em { font-style: normal; color: #fdfbf2; }
.panel__sub { color: #f1f2e9; font-weight: 500; margin-top: .5rem; line-height: 1.5; font-size: 1rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.28); }
.panel__mahal { font-family: var(--font-head); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 5vw, 1.5rem); color: #fdfbf2; margin-top: .15rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.28); }
.panel__arrow { margin-top: .8rem; font-size: 1.1rem; font-weight: 600; color: #fdfbf2;
  text-shadow: 0 1px 8px rgba(0,0,0,.28); animation: nudge 1.4s ease-in-out infinite; }

.panel__mahal .heart { color: #e9879b; font-style: normal; }

/* foreground layer (grass patches + signs) — scrolls with the world, sits in front */
.foreground { position: absolute; inset: 0; z-index: 6; pointer-events: none; will-change: transform; }
.trailhead { position: absolute; bottom: 50px; transform: translateX(-50%); }
.trailhead__grass { line-height: 0; filter: drop-shadow(0 5px 8px var(--shadow)); }
.trailhead__grass svg { width: min(80vw, 300px); height: auto; display: block; }
.trailhead__sign { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; }
.trailhead__sign .woodsign__board { animation: nudge 1.6s ease-in-out infinite; }
.trailhead__post { width: 12px; height: 30px; margin-top: -2px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #8a6536, #6b4f2e); border-left: 2px solid #5a4022; border-right: 2px solid #5a4022; }

/* our pups greeting at the finish */
.dog { position: absolute; transform: translateX(-50%) rotate(var(--r, 0)); pointer-events: none; z-index: 2; }
.dog img { width: 100%; height: auto; display: block; filter: drop-shadow(0 7px 9px var(--shadow));
  animation: dogBob 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes dogBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-2deg); } }

/* cute wooden trail signs */
.woodsign { margin-top: 1.2rem; display: inline-block; position: relative; animation: nudge 1.6s ease-in-out infinite; }
.woodsign__board { position: relative; display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.05rem; color: #fff7e6; letter-spacing: .01em; white-space: nowrap;
  padding: .5rem 1.15rem; border-radius: 10px; border: 3px solid #6b4f2e;
  background: linear-gradient(#c2925a, #a9743f);
  box-shadow: inset 0 -5px 0 rgba(80,55,28,.35), inset 0 3px 0 rgba(255,255,255,.14), 0 6px 14px var(--shadow); }
.woodsign__board::before { content: ""; position: absolute; inset: 5px 9px; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(80,55,28,.16) 7px 8px); }
.woodsign__post { width: 12px; height: 28px; margin: 0 auto; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #8a6536, #6b4f2e); border: 2px solid #5a4022; border-top: none; }
@keyframes nudge { 0%,100% { transform: translateX(0);} 50% { transform: translateX(8px);} }

/* ============================================================
   STICKERS (photo strips + decor)
   ============================================================ */
.sticker { position: absolute; cursor: zoom-in; transform: rotate(var(--r, -6deg));
  transition: transform .25s cubic-bezier(.2,.9,.3,1.3), filter .25s ease;
  filter: drop-shadow(0 8px 14px var(--shadow)); z-index: 4; }
.sticker:hover { transform: rotate(0) scale(1.12) translateY(-6px); z-index: 25; }
.sticker.is-wiggle { animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 0%,100% { transform: rotate(var(--r,-6deg)); } 50% { transform: rotate(calc(var(--r,-6deg) * -1)); } }

/* photo-strip look: white-framed vertical strip */
.sticker--strip { background: #fff; padding: 8px 8px 26px; border-radius: 8px; }
.sticker--strip img { display: block; width: var(--sw, 82px); border-radius: 4px;
  background: var(--cream-deep); }
.sticker--strip::after { content: "📸"; position: absolute; bottom: 5px; left: 50%;
  transform: translateX(-50%); font-size: .8rem; }

/* decorative emoji stickers */
.sticker--decor { font-size: var(--sz, 2.2rem); line-height: 1; cursor: default; filter: none;
  text-shadow: 0 4px 8px var(--shadow); }
.sticker--decor:hover { transform: rotate(0) scale(1.25); }

body.editing .sticker { cursor: grab; outline: 1.5px dashed var(--blush); outline-offset: 4px; }
body.editing .sticker .sticker__del { display: grid; }
.sticker__del { display: none; position: absolute; top: -10px; right: -10px; width: 24px; height: 24px;
  place-items: center; border-radius: 50%; border: none; background: #c2614f; color: #fff;
  font-weight: 800; cursor: pointer; box-shadow: 0 3px 8px var(--shadow); z-index: 30; }

/* ============================================================
   KYLE + CHELSEA (stay in place, walk together)
   ============================================================ */
.duo { position: absolute; left: var(--char-x); bottom: 86px;
  z-index: 5; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 2px; }
/* each image is mirrored in JS to face the walk direction — the order never changes */

.duo-shadow { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 78%; height: 22px; border-radius: 50%; background: rgba(40,46,32,.26); filter: blur(4px); z-index: -1; }

.char { position: relative; border: none; background: none; padding: 0; cursor: pointer;
  width: 128px; transform-origin: bottom center; -webkit-tap-highlight-color: transparent;
  animation: idleSway 3.2s ease-in-out infinite; }
.char--kyle { width: 134px; animation-delay: .4s; }
.char img { width: 100%; height: auto; display: block; user-select: none; pointer-events: none;
  filter: drop-shadow(0 7px 9px var(--shadow)); }

.duo.walking .char--chelsea { animation: bounce .44s ease-in-out infinite; }
.duo.walking .char--kyle    { animation: bounce .44s ease-in-out infinite .14s; }
@keyframes bounce   { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-11px) rotate(1.5deg); } }
@keyframes idleSway { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }

/* little pop when you change a mood */
.char.is-pop { animation: moodPop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes moodPop { 0% { transform: scale(.8) rotate(-6deg);} 60% { transform: scale(1.12) rotate(3deg);} 100% { transform: scale(1); } }

/* tap cue arrows above each head */
.char__cue { position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-weight: 700; font-size: .8rem; color: #fff;
  background: var(--sage-deep); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 3px 7px var(--shadow);
  opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.char:hover .char__cue, .duo.show-cues .char__cue { opacity: .92; }

/* ============================================================
   HUD + CONTROLS
   ============================================================ */
.hud { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hud__top { position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.counter { pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; color: #f1f2e9; font-weight: 600; font-size: .9rem;
  padding: .2rem .5rem; text-shadow: 0 1px 6px rgba(0,0,0,.28); }
.replay { position: absolute; top: 12px; left: 12px; pointer-events: auto; width: 38px; height: 38px;
  border-radius: 50%; border: none; background: rgba(255,253,248,.92); color: var(--sage-deep);
  font-size: 1.1rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px var(--shadow); z-index: 9; }
.replay:hover { transform: rotate(-40deg); }

.trailmap { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px; pointer-events: auto; width: max-content; max-width: 94vw;
  background: rgba(255,253,248,.7); padding: .3rem .6rem; border-radius: 999px;
  box-shadow: 0 4px 12px var(--shadow); backdrop-filter: blur(4px); flex-wrap: nowrap; justify-content: center; }
.trailmap__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cream-deep);
  cursor: pointer; transition: transform .2s ease, background .2s ease; flex: none; }
.trailmap__dot.is-active { background: var(--sage); transform: scale(1.5); }

.walk-hint { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  background: rgba(47,42,36,.72); color: #fff; font-weight: 700; font-size: .76rem;
  padding: .4rem .8rem; border-radius: 999px; pointer-events: none; white-space: nowrap;
  transition: opacity .5s ease; }
.walk-hint.is-gone { opacity: 0; }

.walkbtn { position: absolute; bottom: 18px; z-index: 9; width: 64px; height: 64px; border-radius: 50%;
  border: none; background: rgba(255,253,248,.92); color: var(--forest); font-size: 1.5rem; font-weight: 800;
  cursor: pointer; box-shadow: 0 8px 20px var(--shadow); user-select: none; touch-action: none;
  transition: transform .12s ease, background .2s ease; }
.walkbtn:active { transform: scale(.9); background: var(--sage); color: #fff; }
.walkbtn--left  { left: 16px; }
.walkbtn--right { right: 16px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 70; display: none; place-items: center;
  background: rgba(34,30,24,.82); backdrop-filter: blur(4px); cursor: zoom-out; padding: 5vw; }
.lightbox.is-open { display: grid; animation: fadeUp .3s ease; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; border: 8px solid #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: #fff; color: var(--ink); font-size: 1.6rem;
  font-weight: 800; cursor: pointer; }

/* ============================================================
   EDIT TOOLBAR
   ============================================================ */
.toolbar { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(220%);
  z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem;
  max-width: calc(100vw - 1.4rem); padding: .65rem .75rem; background: rgba(255,253,248,.96);
  backdrop-filter: blur(8px); border: 1px solid #e7dcc7; border-radius: 18px;
  box-shadow: 0 12px 36px var(--shadow); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .3s ease; }
body.editing .toolbar { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.toolbar__btn { font-family: var(--font-body); font-weight: 800; font-size: .8rem; border: none;
  background: var(--sage); color: #fff; padding: .5rem .8rem; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, background .2s ease; }
.toolbar__btn:hover { transform: translateY(-2px); background: var(--sage-deep); }
.toolbar__btn--ghost { background: transparent; color: var(--ink-soft); }
.toolbar__hint { font-size: .7rem; color: var(--ink-soft); font-weight: 700; flex-basis: 100%; text-align: center; }

.toolbar-toggle { position: fixed; right: 16px; top: 60px; z-index: 51; width: 46px; height: 46px;
  border-radius: 50%; border: none; background: var(--forest); color: #fff; font-size: 1.2rem;
  cursor: pointer; box-shadow: 0 8px 22px var(--shadow); transition: transform .25s ease, background .25s ease; }
.toolbar-toggle:hover { transform: scale(1.08) rotate(-8deg); }
body.editing .toolbar-toggle { background: var(--sage); transform: rotate(8deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; }
}