/* =========================================================================
   THE EXPEDITION — Jack's 30th birthday reveal
   Art direction tokens live here. The serif carries the feeling.
   ========================================================================= */
:root{
  /* palette (from the brief) */
  --jungle:#0a1410; --jungle-2:#0f2018; --moss:#2c4a38; --fern:#5c8a68;
  --brass:#c8a24b; --brass-bright:#e6c878; --parchment:#e8dcc0;
  --ivory:#f3eee3; --ivory-dim:#c8c1b0; --amber:#e8a04b;

  /* characterful, hand-picked type — an expedition diary, not a default UI kit */
  --serif:'Fraunces', 'Hoefler Text', Georgia, serif;             /* display + emotional lines */
  --sans:'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif; /* UI + body */
  --stamp:'Special Elite', 'Courier New', monospace;              /* kickers, like a stamped label */

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%; width:100%;}
html{ -webkit-text-size-adjust:100%; }
body{
  background:#070d0a; color:var(--ivory); font-family:var(--sans);
  overflow:hidden; position:fixed; inset:0; overscroll-behavior:none;
  touch-action:manipulation;
}

/* ---- painted backgrounds ---- */
#bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:#070d0a;}
#bg .bg-layer{position:absolute; inset:-4%; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease; will-change:opacity, transform;}
#bg .bg-layer.show{opacity:1;}
@media (prefers-reduced-motion:no-preference){ #bg .bg-layer.show{animation:kenburns 26s ease-in-out infinite alternate;} }
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)} to{transform:scale(1.12) translate(-1.5%,-1.5%)}}
/* dark scrims (top + bottom) so light text stays readable over the art */
#bg::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,8,5,.62) 0%, rgba(3,8,5,.22) 24%, rgba(3,8,5,.14) 50%, rgba(3,8,5,.34) 74%, rgba(3,8,5,.82) 100%);}

/* ---- canvas overlay (fireflies / shimmer) sits above the painting ---- */
#scenery{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:1;}

/* ---- overlays ---- */
#vignette{position:fixed; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(125% 100% at 50% 42%, transparent 44%, rgba(0,0,0,.62) 100%);
  transition:opacity 1s ease;}
#grain{position:fixed; inset:-50%; z-index:6; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(4) infinite;}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-4%,2%)}
  50%{transform:translate(3%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(2%,3%)}
}

/* ---- stage / screens ---- */
#stage{position:fixed; inset:0; z-index:10;}
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:calc(46px + var(--safe-t)) 26px calc(58px + var(--safe-b));
  gap:20px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; will-change:opacity, transform;
}
.screen::-webkit-scrollbar{width:0; height:0;}

/* full-bleed POV overlay canvas (paddle strokes etc.) behind the controls */
.pov-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;}
.pov-canvas.interactive{pointer-events:auto; touch-action:none;}
/* text always sits ABOVE the game canvas; taps still fall through to the
   canvas everywhere except the actual controls */
.stack.bottom{height:100%; justify-content:flex-end; gap:14px; position:relative; z-index:3; pointer-events:none;}
.stack.bottom .btn, .stack.bottom .paddle-row, .stack.bottom .paddle-btn{pointer-events:auto;}
.grow{flex:1 1 auto;}
/* readable over paintings — every text element gets a strong shadow */
.shadowed{text-shadow:0 2px 14px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.7);}
h1,h2{text-shadow:0 2px 4px rgba(0,0,0,.75), 0 4px 26px rgba(0,0,0,.65);}
.lede{text-shadow:0 2px 4px rgba(0,0,0,.7), 0 3px 20px rgba(0,0,0,.6);}
.body{color:var(--ivory); text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 16px rgba(0,0,0,.6);}
.kicker{text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.9), 0 0 22px rgba(0,0,0,.6);}
.tap-hint{text-shadow:0 1px 3px rgba(0,0,0,.9);}
/* a soft dark plate behind text blocks on the busiest scenes */
.plate{background:radial-gradient(closest-side, rgba(3,8,5,.55), rgba(3,8,5,.3) 55%, rgba(3,8,5,0)); padding:12px 16px; border-radius:24px;}
.hers{text-shadow:0 2px 8px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.5);
  background:radial-gradient(closest-side, rgba(6,12,8,.42), rgba(6,12,8,.2) 60%, rgba(6,12,8,0));
  padding:14px 16px; border-radius:20px;}

/* typography */
h1{font-family:var(--serif); font-weight:600; font-size:clamp(38px,11vw,64px); line-height:1.0; margin:0; letter-spacing:.4px;}
h2{font-family:var(--serif); font-weight:600; font-size:clamp(29px,8vw,46px); line-height:1.08; margin:0;}
.lede{font-family:var(--serif); font-weight:500; font-size:clamp(21px,5.8vw,30px); line-height:1.42; max-width:22ch; margin:0 auto;}
.body{font-size:clamp(14.5px,4.1vw,16px); line-height:1.62; max-width:33ch; margin:0 auto; color:var(--ivory-dim);}
.kicker{font-family:var(--stamp); font-weight:400; font-size:12.5px; letter-spacing:2.5px; color:var(--brass-bright);
  text-transform:uppercase; opacity:1; display:inline-flex; align-items:center; gap:9px;
  padding:5px 14px; border-radius:20px; background:rgba(4,10,7,.42);}
.kicker::before,.kicker::after{content:""; width:16px; height:1px; background:linear-gradient(90deg,transparent,var(--brass));}
.kicker::after{transform:scaleX(-1);}
.stack{display:flex; flex-direction:column; gap:18px; align-items:center; width:100%; max-width:480px;}
/* centred story stacks get a soft dark halo so text always reads over the
   bright painted backgrounds (the game stacks at .bottom are left alone) */
.stack:not(.bottom){position:relative;}
.stack:not(.bottom)::before{content:""; position:absolute; inset:min(-22%, -90px) min(-12%, -30px);   /* never a thin strip, even behind one short line */ z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(4,10,7,.7), rgba(4,10,7,.44) 55%, rgba(4,10,7,0));}
.spacer{height:2px;}

/* Indi's words — the serif, brass-lit, given room */
.hers{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(19px,5.4vw,27px); line-height:1.5; max-width:24ch; margin:0 auto;
  color:var(--brass-bright); text-shadow:0 2px 24px rgba(200,162,75,.22);
}
.hers.small{font-size:clamp(17px,4.9vw,22px);}

/* buttons */
.btn{
  font-family:var(--sans); font-weight:600; font-size:16px; color:#20160a;
  background:linear-gradient(180deg,var(--brass-bright),var(--brass)); border:none;
  border-radius:999px; padding:15px 32px; cursor:pointer; letter-spacing:.2px;
  box-shadow:0 10px 32px rgba(200,162,75,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .16s ease, box-shadow .3s ease; -webkit-user-select:none; user-select:none;
  min-height:50px;
}
.btn:active{transform:translateY(1px) scale(.985); box-shadow:0 6px 18px rgba(200,162,75,.28);}
.btn.ghost{background:transparent; color:var(--brass-bright);
  border:1px solid rgba(200,162,75,.55); box-shadow:none; text-shadow:0 1px 12px rgba(0,0,0,.5);}
.btn[disabled]{opacity:.4; pointer-events:none;}
.tap-hint{font-size:12px; letter-spacing:1.5px; color:var(--ivory-dim); text-transform:uppercase; opacity:.72;}

/* photos framed as lantern-lit panels / polaroids */
.photo-frame{
  position:relative; width:min(80vw,320px); border-radius:4px; padding:10px 10px 14px;
  background:linear-gradient(160deg,#efe7d2,#ddd0b2); box-shadow:0 22px 50px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.3) inset;
  transform:rotate(-1.6deg);
}
.photo-frame.r{transform:rotate(1.8deg);}
.photo-frame img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; background:var(--jungle-2);}
.photo-frame.wide img{aspect-ratio:4/3;}
.photo-frame .cap{font-family:var(--serif); font-style:italic; color:#5a4a2c; font-size:15px; margin-top:6px;}
.ph-fallback{width:100%; aspect-ratio:4/5; border-radius:2px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px; background:linear-gradient(135deg,var(--jungle-2),var(--moss));
  color:var(--ivory-dim); font-size:12px; letter-spacing:1px; font-family:var(--sans);}
.ph-fallback.wide{aspect-ratio:4/3;}

/* big reveal type — dark backing first so brass reads on bright skies */
.reveal-big{font-family:var(--serif); font-weight:700; font-size:clamp(46px,15vw,90px); line-height:.98;
  color:var(--brass-bright); text-shadow:0 2px 6px rgba(0,0,0,.85), 0 4px 22px rgba(0,0,0,.7), 0 6px 40px rgba(230,200,120,.35);}

/* the pivot: one line of text at a time, tap to turn the page */
.reveal-line{font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(26px,7.4vw,40px); line-height:1.35; color:var(--ivory); max-width:20ch; margin:0 auto;
  text-shadow:0 2px 4px rgba(0,0,0,.75), 0 4px 30px rgba(0,0,0,.6); min-height:1.4em;}
.reveal-line.peak{font-style:normal; font-weight:700; font-size:clamp(34px,10.5vw,60px); line-height:1.05;
  color:var(--brass-bright); text-shadow:0 3px 6px rgba(0,0,0,.6), 0 4px 40px rgba(230,200,120,.45);}
.ticket{border:1px solid rgba(200,162,75,.5); border-radius:16px; padding:24px 26px;
  background:linear-gradient(160deg,rgba(200,162,75,.12),rgba(200,162,75,.03)); position:relative;}
.ticket::before,.ticket::after{content:""; position:absolute; top:50%; width:18px; height:18px; border-radius:50%;
  background:#070d0a; transform:translateY(-50%);}
.ticket::before{left:-9px;} .ticket::after{right:-9px;}
.ticket .d{font-family:var(--serif); font-weight:600; font-size:clamp(30px,9vw,50px); color:var(--brass-bright); line-height:1.05;}
.ticket .sub{color:var(--ivory-dim); font-size:14px; margin-top:8px;}

/* map frame (Mode B) */
.map-frame{width:min(92vw,440px); aspect-ratio:3/4; max-height:56vh; position:relative; border-radius:14px;
  overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(200,162,75,.28);}
.map-frame svg{position:absolute; inset:0; width:100%; height:100%;}

/* generic timed reveal */
.fade-in{animation:fadeUp 1.3s cubic-bezier(.2,.7,.2,1) both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.pop-in{animation:pop 1s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes pop{from{opacity:0; transform:scale(.86);} to{opacity:1; transform:none;}}
.delay-1{animation-delay:.5s;} .delay-2{animation-delay:1s;} .delay-3{animation-delay:1.6s;} .delay-4{animation-delay:2.2s;}

/* typewriter caret */
.caret::after{content:'▌'; margin-left:1px; color:var(--brass-bright); opacity:.85; animation:blink .9s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* HUD */
#hud{position:fixed; z-index:20; top:calc(12px + var(--safe-t)); right:12px; display:flex; gap:8px;}
.hud-btn{width:42px; height:42px; border-radius:50%; border:1px solid rgba(200,162,75,.4);
  background:rgba(10,20,16,.55); color:var(--brass-bright); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, background .3s;}
.hud-btn:active{transform:scale(.92);}
#sound-toggle .mute-x{opacity:1; transition:opacity .2s;}
#sound-toggle .waves{opacity:.25; transition:opacity .2s;}
#sound-toggle[aria-pressed="true"] .mute-x{opacity:0;}
#sound-toggle[aria-pressed="true"] .waves{opacity:1;}

/* quiet back button, top-left, deliberately understated */
#backbtn{position:fixed; z-index:20; top:calc(12px + var(--safe-t)); left:12px; opacity:.72;}
#backbtn:hover{opacity:1;}

/* progress dots */
#dots{position:fixed; z-index:20; bottom:calc(12px + var(--safe-b)); left:50%; transform:translateX(-50%); width:max-content;
  display:flex; gap:5px; flex-wrap:wrap; max-width:78vw; justify-content:center; pointer-events:none;}
.pdot{width:5px; height:5px; border-radius:50%; background:rgba(243,238,227,.18); transition:all .5s ease;}
.pdot.on{background:var(--brass-bright); box-shadow:0 0 8px rgba(230,200,120,.6);}

/* loading veil */
#veil{position:fixed; inset:0; z-index:40; background:#070d0a; display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease; }
#veil.gone{opacity:0; pointer-events:none;}
.veil-inner{text-align:center; color:var(--ivory-dim); font-size:12px; letter-spacing:3px; text-transform:uppercase;}
.veil-mark{width:46px; height:46px; margin:0 auto 16px; border-radius:50%;
  border:2px solid rgba(200,162,75,.25); border-top-color:var(--brass-bright); animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- mini-game bits ---------- */
/* paddle river */
.rhythm{width:min(90vw,420px); height:70px; position:relative; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,rgba(18,53,44,.6),rgba(12,34,28,.6)); box-shadow:inset 0 0 0 1px rgba(92,138,104,.25);}
.rhythm .goal{position:absolute; top:0; bottom:0; left:calc(50% - 26px); width:52px; border-left:2px solid var(--brass);
  border-right:2px solid var(--brass); background:rgba(200,162,75,.16);}
.rhythm .bob{position:absolute; top:0; bottom:0; width:8px; border-radius:6px; background:var(--brass-bright);
  box-shadow:0 0 14px rgba(230,200,120,.9);}
.progress-wrap{width:min(90vw,420px); height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden;}
.progress-wrap .fill{height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--brass),var(--brass-bright)); transition:width .25s ease;}

/* machete: full-screen wall of vines + leaves you swipe through */
.pov-vines{position:fixed; inset:0; z-index:0; pointer-events:auto; touch-action:none; overflow:hidden;}
.obst{position:absolute; will-change:transform, opacity;}
.obst.vine{top:-2%; transform-origin:top center;}
.obst.vine svg{display:block; height:100%; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));}
.obst.leaf svg{width:100%; display:block; filter:drop-shadow(0 3px 7px rgba(0,0,0,.5));}
@media (prefers-reduced-motion:no-preference){ .obst.vine{animation:vsway 4.5s ease-in-out infinite;} }
@keyframes vsway{0%,100%{transform:rotate(calc(var(--sway,2deg) * -1))}50%{transform:rotate(var(--sway,2deg))}}
.obst.cut{animation:none !important;}

/* boat mini-game: a real canvas river panel with Jack overlaid */
.boat-game{width:min(94vw,460px); height:min(46vh,340px); position:relative; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.45), inset 0 0 0 1px rgba(200,162,75,.28); touch-action:manipulation;}
.boat-game canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.boat-jack-wrap{position:absolute; width:150px; transform:translate(-50%,-68%); pointer-events:none; z-index:2;}
.boat-progress{position:absolute; left:12px; right:12px; bottom:10px; height:6px; border-radius:6px;
  background:rgba(0,0,0,.28); overflow:hidden; z-index:3;}
.boat-progress .fill{height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--brass),var(--brass-bright)); transition:width .2s ease;}
.paddle-row{display:flex; gap:14px; width:min(94vw,460px);}
.paddle-btn{flex:1; transition:transform .16s ease, box-shadow .3s ease, filter .3s ease;}
.paddle-btn.cue{box-shadow:0 0 0 2px var(--brass-bright), 0 10px 32px rgba(230,200,120,.5); filter:brightness(1.08);}
@media (prefers-reduced-motion:no-preference){ .paddle-btn.cue{animation:cuepulse 1s ease-in-out infinite;} }
@keyframes cuepulse{0%,100%{box-shadow:0 0 0 2px var(--brass-bright),0 8px 20px rgba(230,200,120,.35);}
  50%{box-shadow:0 0 0 3px var(--brass-bright),0 10px 34px rgba(230,200,120,.65);}}

/* the kit list: three points that build one at a time */
.kit-list{list-style:none; margin:4px auto 2px; padding:0; max-width:28ch; text-align:left;
  display:flex; flex-direction:column; gap:12px;}
.kit-list li{position:relative; padding-left:26px; font-family:var(--sans); font-weight:500;
  font-size:clamp(15px,4.4vw,17.5px); line-height:1.4; color:var(--ivory);
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.5);}
.kit-list li::before{content:""; position:absolute; left:5px; top:.6em; width:7px; height:7px; border-radius:50%;
  background:var(--brass-bright); box-shadow:0 0 8px rgba(230,200,120,.65);}

/* the sprint: a single chase track - keep the runner (gold) ahead of the bee (red) */
.run-meters{width:min(92vw,430px); display:flex; flex-direction:column; gap:9px;}
.run-cap{font-family:var(--stamp); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--brass-bright); text-align:center;}
.run-track{position:relative; height:16px; border-radius:9px; background:rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(200,162,75,.28); margin-top:12px;}
.rt-gold,.rt-red{position:absolute; top:0; bottom:0; left:0;}
.rt-gold{z-index:1; width:0; border-radius:9px;
  background:linear-gradient(90deg,var(--brass),var(--brass-bright)); box-shadow:0 0 10px rgba(230,200,120,.5);
  transition:width .12s ease;}
.rt-red{z-index:2; width:0; border-radius:9px 4px 4px 9px; opacity:.94;
  background:linear-gradient(90deg,#7a2323,#e0563f); transition:width .22s ease;}
.rt-emoji{position:absolute; top:50%; font-size:21px; line-height:1; z-index:3; pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
.rt-run{z-index:4; transform:translate(-50%,-56%) scaleX(-1); transition:left .12s ease;}
.rt-bee{z-index:3; transform:translate(-50%,-58%) scaleX(-1); transition:left .22s ease;}
@media (prefers-reduced-motion:no-preference){ .rt-run.panic{animation:runpanic .3s ease-in-out infinite;} }
@keyframes runpanic{0%,100%{transform:translate(-50%,-56%) scaleX(-1);} 50%{transform:translate(-50%,-70%) scaleX(-1);}}
.rt-goal{position:absolute; right:-4px; top:50%; transform:translate(0,-50%); font-size:19px; z-index:3;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}

/* night walk: glowing eyes */
.eyes-stage{width:min(92vw,440px); height:min(46vh,360px); position:relative; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 40%, rgba(6,16,10,.25), rgba(3,9,6,.5) 90%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.4); touch-action:manipulation;}
.eye-pair{position:absolute; transform:translate(-50%,-50%); display:flex; gap:9px; padding:16px; cursor:pointer;}
.eye{width:8px; height:8px; border-radius:50%; background:radial-gradient(circle,#fff4c8,#e8a04b 60%,transparent 75%);
  box-shadow:0 0 10px 3px rgba(232,160,75,.8);}
@media (prefers-reduced-motion:no-preference){ .eye{animation:blink 3.4s ease-in-out infinite var(--blink-delay,0s);} }
@keyframes blink{0%,7%,100%{opacity:.15; transform:scaleY(1);} 3%{opacity:.15; transform:scaleY(.1);}
  8%,92%{opacity:1; transform:scaleY(1);} 50%{opacity:.85;}}
.eye-pair.seen{padding:8px;}
.critter{display:flex; flex-direction:column; align-items:center; font-size:34px; line-height:1;
  animation:pop .5s cubic-bezier(.2,1.3,.4,1) both; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.critter .cname{font-family:var(--sans); font-size:10px; letter-spacing:.5px; color:var(--brass-bright);
  margin-top:4px; text-transform:uppercase; white-space:nowrap;}

/* climb (legacy, unused) */
.climb-stage{width:min(92vw,440px); height:min(48vh,380px); position:relative; border-radius:14px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(92,138,104,.22);}

/* speech bubble for cartoon Jack */
.bubble{position:relative; background:var(--ivory); color:#20160a; font-family:var(--sans); font-weight:500;
  font-size:15px; line-height:1.4; padding:12px 16px; border-radius:14px; max-width:26ch; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.bubble::after{content:""; position:absolute; bottom:-9px; left:36px; border-width:10px 9px 0; border-style:solid;
  border-color:var(--ivory) transparent transparent;}

/* cartoon Jack container on map scenes */
.jack-holder{position:relative; width:100%; display:flex; justify-content:center;}

/* montage strip */
.montage{display:flex; gap:8px; overflow-x:auto; width:100%; max-width:480px; padding:6px 2px 12px; -webkit-overflow-scrolling:touch;}
.montage img{height:120px; width:auto; border-radius:6px; object-fit:cover; box-shadow:0 8px 22px rgba(0,0,0,.45); border:2px solid rgba(200,162,75,.25);}

/* stamps for itinerary */
.stamp-grid{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:420px;}
.stamp{width:120px; padding:12px 10px; border-radius:12px; border:1.5px dashed rgba(200,162,75,.55);
  background:rgba(232,220,192,.05); text-align:center;}
.stamp .n{font-family:var(--serif); font-weight:600; color:var(--brass-bright); font-size:20px; line-height:1.05;}
.stamp .t{font-size:11px; color:var(--ivory-dim); letter-spacing:.5px; margin-top:4px; line-height:1.3;}

/* dizzy stars */
.dizzy{position:absolute; font-size:20px; animation:orbit 1.1s linear infinite;}
@keyframes orbit{from{transform:rotate(0) translateX(26px) rotate(0);} to{transform:rotate(360deg) translateX(26px) rotate(-360deg);}}

/* --- wasp POV cinematic --- */
.monologue{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(21px,5.8vw,29px);
  color:var(--ivory-dim); line-height:1.4; max-width:22ch; margin:6px auto;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.8);}
.monologue.strong{color:var(--ivory); font-weight:600; font-style:italic; font-size:clamp(24px,6.6vw,34px);}
.bonk-word{font-family:var(--serif); font-weight:700; font-size:clamp(64px,22vw,120px); line-height:1;
  color:var(--brass-bright); text-shadow:0 6px 40px rgba(0,0,0,.6), 0 0 20px rgba(230,200,120,.5); letter-spacing:2px;}
#eyelids{position:fixed; inset:0; z-index:30; pointer-events:none;}
#eyelids .lid{position:absolute; left:-6%; right:-6%; height:58%; background:#070c09; box-shadow:0 0 50px 26px #070c09;}
#eyelids .top{top:0; border-radius:0 0 50% 50% / 0 0 34% 34%;}
#eyelids .bot{bottom:0; border-radius:50% 50% 0 0 / 34% 34% 0 0;}
#lookup-frame{position:fixed; inset:0; z-index:9; pointer-events:none;
  background:
    radial-gradient(90px 130px at 5% 3%, #06120b, transparent 72%),
    radial-gradient(100px 140px at 96% 1%, #06120b, transparent 72%),
    radial-gradient(130px 100px at 2% 99%, #06120b, transparent 72%),
    radial-gradient(120px 100px at 99% 97%, #06120b, transparent 72%),
    radial-gradient(70px 90px at 30% 0%, #08160e, transparent 70%),
    radial-gradient(80px 90px at 72% 2%, #08160e, transparent 70%),
    radial-gradient(135% 105% at 50% 52%, transparent 44%, rgba(6,12,8,.82) 100%);}
body.runshake #bg, body.runshake #scenery, body.runshake #stage{animation:runshake .16s linear infinite;}
@keyframes runshake{0%,100%{transform:translate(0,0)}25%{transform:translate(-4px,3px)}50%{transform:translate(3px,-3px)}75%{transform:translate(-3px,-2px)}}
body.bonkshake #bg, body.bonkshake #scenery, body.bonkshake #stage{animation:bonkshake .55s cubic-bezier(.36,.07,.19,.97);}
@keyframes bonkshake{0%{transform:translate(0,0)}12%{transform:translate(-14px,9px) rotate(-1.4deg)}28%{transform:translate(12px,-7px) rotate(1.2deg)}44%{transform:translate(-9px,5px)}62%{transform:translate(6px,-4px)}100%{transform:translate(0,0)}}

/* reduced motion: calmer path, same content */
@media (prefers-reduced-motion: reduce){
  #grain{display:none;}
  .fade-in,.pop-in{animation-duration:.3s;}
  .veil-mark{animation-duration:1.4s;}
  .dizzy{animation:none;}
  body.runshake #scenery, body.runshake #stage,
  body.bonkshake #scenery, body.bonkshake #stage{animation:none;}
}

/* =========================================================================
   THE TICKETS — a pair of boarding passes per direction, dealt onto a pile
   ========================================================================= */
.tix{gap:12px;}
.bp-deck{position:relative; width:min(100%,370px); height:300px; margin:2px auto 0;}
.bp-pair{position:absolute; inset:0; opacity:0; transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease;}
.bp-pair.in{opacity:1;}
.bp-journey{text-align:center; opacity:0; margin-bottom:14px;}
.bp-jt{font-family:var(--serif); font-weight:700; font-size:clamp(24px,7vw,30px); line-height:1.1; color:var(--brass-bright);
  text-shadow:0 2px 4px rgba(0,0,0,.8), 0 4px 22px rgba(0,0,0,.6);}
.bp-js{font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ivory); margin-top:3px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);}
/* a real boarding pass shape: long and thin, small corners, tear-off stub on the right.
   Two per journey, the connecting flight laid on top at a slight angle. */
.bp{position:absolute; left:0; width:100%; aspect-ratio:2.55/1; display:flex; opacity:0; border-radius:5px; overflow:hidden;
  background:linear-gradient(172deg,#f7f1e2 0%,#ebe0c5 100%); color:#1d1a12; text-align:left;
  box-shadow:0 18px 38px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.6) inset; font-family:var(--sans);}
.bp-pair .bp:nth-of-type(1){top:66px;}
.bp-pair .bp:nth-of-type(2){top:136px;}
.bp-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
.bp-band{display:flex; justify-content:space-between; align-items:center; padding:4px 10px;
  background:linear-gradient(100deg,var(--jungle-2),var(--moss)); color:var(--brass-bright);}
.bp-bpass{font-family:var(--stamp); font-size:9px; letter-spacing:2px; text-transform:uppercase;}
.bp-fl{font-size:10.5px; font-weight:700; letter-spacing:1px; color:var(--parchment);}
.bp-route{display:flex; align-items:flex-start; gap:4px; padding:5px 10px 0;}
.bp-port{flex:0 0 auto; max-width:44%;}
.bp-port.r{text-align:right;}
.bp-code{font-family:var(--serif); font-weight:700; font-size:clamp(22px,6.6vw,27px); line-height:1; color:#15261c;}
.bp-city{font-size:9px; color:#6b5d3e; margin-top:1px; line-height:1.15; white-space:nowrap;}
.bp-time{font-family:var(--serif); font-weight:600; font-size:13.5px; margin-top:1px;}
.bp-path{flex:1 1 auto; position:relative; height:26px; margin-top:2px;}
.bp-path svg:first-child{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.bp-dash{fill:none; stroke:#b08a3a; stroke-width:1.3; stroke-dasharray:3 4; vector-effect:non-scaling-stroke;}
.bp-plane{position:absolute; width:14px; height:14px; left:4%; top:66%; fill:#8a6a24;
  transform:translate(-50%,-50%) rotate(55deg); opacity:.35;}
.bp.landed .bp-plane{opacity:1; left:96%; animation:bpfly 1.6s cubic-bezier(.45,0,.25,1) both;}
@keyframes bpfly{
  0%  {left:4%;  top:66%; transform:translate(-50%,-50%) rotate(55deg);}
  50% {left:50%; top:12%; transform:translate(-50%,-50%) rotate(90deg);}
  100%{left:96%; top:66%; transform:translate(-50%,-50%) rotate(125deg);}
}
.bp-meta{display:flex; justify-content:space-between; gap:6px; margin:auto 10px 0; padding:3px 0 5px;
  border-top:1px solid rgba(120,96,48,.2);}
.bp-meta span{display:block; font-size:7px; letter-spacing:1px; text-transform:uppercase; color:#8a7a55;}
.bp-meta b{display:block; font-size:9.5px; font-weight:700; white-space:nowrap;}
.bp-op{font-size:8.5px; font-style:italic; color:#7d6c47; margin:-3px 10px 4px; font-family:var(--serif);}
.bp-stub{flex:0 0 46px; position:relative; border-left:2px dashed rgba(120,96,48,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:6px 0;}
.bp-stub::before,.bp-stub::after{content:""; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%; background:#0b1510;}
.bp-stub::before{top:-8px;} .bp-stub::after{bottom:-8px;}
.bp-bar{width:24px; flex:1 1 auto; max-height:78px; fill:#1d1a12;}
.bp-ok{font-family:var(--stamp); font-style:normal; font-size:6.5px; letter-spacing:.6px; text-transform:uppercase;
  color:#2c6a44; border:1.2px solid #2c6a44; border-radius:3px; padding:1px 2px;
  opacity:0; transform:scale(1.8) rotate(-14deg);}
.bp.landed .bp-ok{animation:bpstamp .45s cubic-bezier(.3,1.6,.5,1) .35s both;}
@keyframes bpstamp{to{opacity:.9; transform:scale(1) rotate(-10deg);}}
.bp-foil{position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,240,200,.75) 48%, rgba(230,200,120,.35) 54%, transparent 64%);
  background-size:260% 100%; background-position:120% 0; mix-blend-mode:soft-light;}
.bp.landed .bp-foil{animation:bpfoil 1.3s ease .1s both;}
@keyframes bpfoil{0%{opacity:1; background-position:120% 0;} 100%{opacity:0; background-position:-40% 0;}}

/* =========================================================================
   THE PACKING LIST — a paper note, items ticked off fast
   ========================================================================= */
.packnote{width:min(90vw,380px); margin:4px auto 0; padding:14px 16px 12px; border-radius:6px; text-align:left;
  background:linear-gradient(170deg,#f3ecd9,#e5d8b8); color:#241e12; transform:rotate(-1deg);
  box-shadow:0 22px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(160,120,50,.12);}
.pn-head{display:flex; justify-content:space-between; font-family:var(--stamp); font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:#6b5d3e; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid rgba(120,96,48,.25);}
.pn-cols{columns:2; column-gap:16px;}
.pn-group{break-inside:avoid; margin-bottom:8px;}
.pn-group h3{margin:0 0 3px; font-family:var(--serif); font-style:italic; font-weight:600; font-size:14px; color:#4a3c1c;}
.pn-group ul{list-style:none; margin:0; padding:0;}
.pn-group li{position:relative; padding-left:17px; font-size:12px; line-height:1.4; color:#5e5237; transition:color .3s ease;}
.pn-group li::before{content:""; position:absolute; left:0; top:.3em; width:10px; height:10px; border-radius:2px;
  border:1.3px solid rgba(120,96,48,.55);}
.pn-group li::after{content:""; position:absolute; left:3px; top:.12em; width:5px; height:9px;
  border:solid #2c6a44; border-width:0 2px 2px 0; transform:rotate(40deg) scale(0); transform-origin:60% 80%;
  transition:transform .28s cubic-bezier(.3,1.6,.5,1);}
.pn-group li.ticked{color:#241e12;}
.pn-group li.ticked::after{transform:rotate(40deg) scale(1);}
@media (max-width:350px){ .pn-cols{columns:1;} }

/* tilt: the deck leans with the phone, a soft sheen follows the angle */
.bp-deck{transform-style:preserve-3d; will-change:transform;}
.bp-sheen{position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:var(--so,.4);
  background:linear-gradient(105deg, transparent 30%, rgba(255,246,220,.9) 48%, rgba(230,200,120,.5) 55%, transparent 70%);
  background-size:260% 100%; background-position:var(--sx,50%) 0;}

/* the flight map: the route draws itself, each stop glows when the plane arrives */
.route-draw line{stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 4px rgba(230,200,120,.8));}
.route-draw line.go{stroke-dashoffset:0; transition:stroke-dashoffset 1.2s cubic-bezier(.45,0,.25,1);}
.hopmap .node > div:first-child{transition:transform .4s cubic-bezier(.3,1.6,.5,1), box-shadow .4s ease;}
.hopmap .node.reached > div:first-child{transform:translateX(-50%) scale(1.5) !important; box-shadow:0 0 16px 4px rgba(230,200,120,.85) !important;}
.hopmap .node.reached > div:last-child{color:var(--ivory) !important;}

/* the ending: polaroids dropping onto a pile */
.montage.polaroids{display:block; position:relative; overflow:visible; height:176px; max-width:100%; padding:0; margin-top:4px;}
.pol{position:absolute; left:50%; top:4px; width:100px; margin:0; padding:5px 5px 18px; opacity:0;
  background:linear-gradient(160deg,#f4eee0,#e2d7bd); border-radius:3px;
  box-shadow:0 16px 34px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.5) inset; transform:translate(-50%,0);}
.pol img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:1px; height:auto; border:none; box-shadow:none;}

/* when a scene is taller than the phone, start it at the top and let it scroll (never clip the top) */
.screen{justify-content:safe center;}
.tix .bp-deck{transform:perspective(900px);}
.hers.end-hers{max-width:30ch; font-size:clamp(18px,4.8vw,24px); line-height:1.45;}

/* machete: combo shout */
.combo-pop{position:fixed; z-index:4; pointer-events:none; font-family:var(--serif); font-weight:700; font-style:italic;
  font-size:26px; color:var(--brass-bright); text-shadow:0 2px 6px rgba(0,0,0,.8), 0 0 18px rgba(230,200,120,.6); white-space:nowrap; opacity:0;}

/* the "us" moment: smaller photo so photo + words + button fit one screen */
.photo-frame.compact{width:min(54vw,210px); padding:8px 8px 10px;}
.photo-frame.compact .cap{font-size:13px; margin-top:4px;}
.hers.compact{font-size:clamp(17px,4.8vw,22px); line-height:1.45; max-width:28ch;}

/* compass beats: a fork in the trail, a signpost at the end of each path */
.cbeat{gap:12px;}
.fork{position:relative; width:min(94vw,370px); aspect-ratio:1/1; max-height:52vh; margin:2px auto;}
.fork-trails{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.trail{fill:none; stroke:rgba(222,196,140,.75); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1;
  vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));}
.trail.drawn{stroke-dashoffset:0; transition:stroke-dashoffset .9s ease;}
.trail.hinted{stroke:rgba(236,210,150,.95);}
.trail.chosen{stroke:var(--brass-bright); stroke-width:5; filter:drop-shadow(0 0 6px rgba(230,200,120,.9));}
.trail:not(.chosen).drawn{transition:stroke-dashoffset .9s ease, opacity .6s ease;}
.fork:has(.trail.chosen) .trail:not(.chosen){opacity:.25;}
.fork-compass{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
/* signposts: little wooden boards, each sitting where its path leads */
.sign{position:absolute; transform:translate(-50%,-50%) scale(.6); opacity:0; width:30%; min-width:98px; max-width:124px;
  padding:7px 8px 8px; border:none; border-radius:6px; cursor:pointer; text-align:center; color:#2a1c0c;
  background:linear-gradient(180deg,#d9b87a,#b48a4c); box-shadow:0 8px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(90,60,25,.35);
  font-family:var(--sans); line-height:1.15; transition:transform .45s cubic-bezier(.3,1.6,.5,1), opacity .4s ease, filter .4s ease;}
.sign b{display:block; font-family:var(--stamp); font-weight:400; font-size:13px; letter-spacing:2px; text-transform:uppercase;}
.sign span{display:block; font-size:11px; margin-top:2px;}
.sign.up{opacity:1; transform:translate(-50%,-50%) scale(1);}
/* a small arrow on each board pointing down its path */
.sign::after{content:""; position:absolute; width:0; height:0; border:7px solid transparent;}
.sign-N::after{left:50%; bottom:-13px; transform:translateX(-50%); border-top-color:#b48a4c; display:none;}
.sign-S::after{left:50%; top:-13px; transform:translateX(-50%); border-bottom-color:#d9b87a; display:none;}
.sign-E::after{right:-13px; top:50%; transform:translateY(-50%); border-left-color:#c49f63;}
.sign-W::after{left:-13px; top:50%; transform:translateY(-50%); border-right-color:#c49f63;}
.sign-N::before{content:"▲"; display:block; font-size:9px; opacity:.6;}
.sign-S::before{content:"▼"; display:block; font-size:9px; opacity:.6; order:3;}
.sign.right{background:linear-gradient(180deg,var(--brass-bright),var(--brass)); transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 2px rgba(255,240,200,.8), 0 10px 26px rgba(230,200,120,.5);}
.sign.faded{opacity:.3; filter:grayscale(.6); pointer-events:none;}
.sign.nope{animation:signnope .45s ease;}
@keyframes signnope{20%{transform:translate(calc(-50% - 7px),-50%)}45%{transform:translate(calc(-50% + 6px),-50%)}70%{transform:translate(calc(-50% - 3px),-50%)}100%{transform:translate(-50%,-50%)}}
.psst{font-style:italic; text-transform:none; letter-spacing:.5px; font-size:13px; color:var(--brass-bright);}

/* the clay lick: a strip of snapped prints */
.filmstrip{display:flex; gap:6px; justify-content:center; min-height:56px; pointer-events:none;}
.filmstrip .shot{width:62px; height:46px; border:3px solid #f3ecd9; border-bottom-width:8px; border-radius:2px;
  box-shadow:0 6px 14px rgba(0,0,0,.5);}
.fork .fork-compass{opacity:0; transition:opacity .8s ease;} .fork.show .fork-compass{opacity:1;}