:root{
  --accent:#e2683c; --accent-soft:rgba(226,104,60,.95);
  --ink:#f4f1ec; --muted:rgba(244,241,236,.66);
  --glass:rgba(20,28,40,.55); --line:rgba(255,255,255,.14);
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:#0a0f17;color:var(--ink);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
#stage{position:fixed;inset:0;overflow:hidden;}
#map{position:absolute;inset:0;display:block;}
#vignette{position:absolute;inset:0;pointer-events:none;opacity:var(--vig,.85);transition:opacity .8s ease;
  background:radial-gradient(125% 95% at 50% 45%,transparent 50%,rgba(0,0,0,.62) 100%);}
/* cinematic post-FX: a subtle always-on film grade on the basemap, plus rack-focus (DOF) — while a
   photo is revealed (#stage.focus, toggled per 'photos' segment) the map background softens so the
   sharp photo card pops. Photo + chrome stay sharp. Reduced-motion never sets .focus (see render). */
#mlmap{filter:saturate(1.08) contrast(1.04) brightness(1.02);transition:filter .6s ease;}
#map{transition:filter .55s ease;}
#stage.focus #mlmap{filter:saturate(1.14) contrast(1.06) brightness(1.02) blur(5px);}
#stage.focus #map{filter:blur(4px);}
#stage.focus #vignette{opacity:.96;}
/* Scrim statt Letterbox: KEINE schwarzen Balken (las als "16:9 importiert & beschnitten" = demohaft).
   Stattdessen weiche Top-/Bottom-Gradienten, die Caption + Chrome tragen — die Karte/Foto bluten randlos
   (full-bleed 9:16). Immer dezent da (Lesbarkeit), vertiefen sich leicht im .cinema (Foto)-Segment. */
.letterbox{position:absolute;left:0;right:0;z-index:7;pointer-events:none;transition:opacity .55s ease,height .55s ease;}
#lbTop{top:0;height:20%;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent);opacity:.9;}
#lbBottom{bottom:0;height:28%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);opacity:1;}
#stage.cinema #lbTop{height:24%;opacity:1;}
#stage.cinema #lbBottom{height:34%;opacity:1;}

#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);letter-spacing:.05em;font-size:15px;background:#0a0f17;z-index:50;transition:opacity .6s;}
#loading.gone{opacity:0;pointer-events:none;}

#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;z-index:12;
  height:calc(62px + var(--sat));padding:var(--sat) calc(16px + var(--sar)) 0 calc(16px + var(--sal));
  background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);}
#tripTitleBar{flex:1;text-align:center;font-size:15px;font-weight:600;opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.7);}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--glass);
  color:var(--ink);font-size:15px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;flex:none;transition:transform .15s,background .15s;}
.iconbtn:active{transform:scale(.94);}
.iconbtn.play{width:52px;height:52px;font-size:17px;background:var(--accent);border-color:transparent;color:#fff;}
.iconbtn.on{color:var(--accent);border-color:var(--accent);}
@media(hover:hover){ .iconbtn:hover{background:rgba(40,52,68,.7);} .tpill:hover{color:var(--ink);} }
@media(pointer:coarse){ .iconbtn{width:44px;height:44px;} .iconbtn.play{width:58px;height:58px;} .tpill{padding:9px 16px;} }

:focus{outline:none;}
.iconbtn:focus-visible,.tpill:focus-visible,#scrub:focus-visible{outline:3px solid #fff;outline-offset:3px;
  box-shadow:0 0 0 6px rgba(226,104,60,.5);}

#tripBar{position:absolute;top:calc(60px + var(--sat));left:0;right:0;display:flex;gap:8px;justify-content:center;
  flex-wrap:wrap;padding:0 12px;z-index:11;}
.tpill{font-size:12px;font-weight:600;padding:6px 13px;border-radius:20px;border:1px solid var(--line);
  background:var(--glass);color:var(--muted);cursor:pointer;-webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);transition:color .2s,border-color .2s,background .2s;}
.tpill[aria-selected="true"]{color:#fff;border-color:var(--accent);background:rgba(226,104,60,.22);}

/* Film-Caption: Ortsname = Held (Fraunces-Serif, groß), Region als ruhige Metadaten darunter.
   Unten-links auf dem Bottom-Scrim, leichtes text-shadow als Versicherung über bewegter Karte+Foto. */
#locLabel{position:absolute;left:calc(26px + var(--sal));bottom:calc(128px + var(--sab));z-index:8;
  opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;max-width:78%;
  text-shadow:0 1px 12px rgba(0,0,0,.35);}
#locLabel.show{opacity:1;transform:none;}
#locLabel .ll-name{display:block;font-family:'Fraunces',Georgia,serif;font-size:38px;font-weight:600;
  line-height:1.04;letter-spacing:-.01em;}
#locLabel small{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.6;}
#locLabel small::before{content:"";flex:none;width:7px;height:9px;background:currentColor;
  -webkit-mask:var(--pin) center/contain no-repeat;mask:var(--pin) center/contain no-repeat;
  transform:translateY(-1px);}
:root{--pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0zm0 17a5 5 0 110-10 5 5 0 010 10z'/%3E%3C/svg%3E");}

/* Intro/Outro-Titelkarte — kinetische Fraunces-Zeremonie (BEIDE Renderer; f(t) in app.js overlays()).
   Radialer Scrim hinter dem Text statt Voll-Darken; Title leichter Serif (Fraunces ~340) wirkt teurer;
   Kicker uppercase-tracked + gezeichneter Akzent-Strich (echot die Route). Motion via inline-CSS-vars
   --ti/--ty/--tb/--ka, gesetzt pro Frame in overlays() → deterministisch, spiegelt drawExportFrame. */
#card{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:11px;padding:24px;}
#card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(58% 42% at 50% 50%,rgba(0,0,0,.62),rgba(0,0,0,.34) 46%,transparent 72%);}
#card.hidden{opacity:0;pointer-events:none;}
.card-kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:700;
  opacity:var(--ka,1);transform:translateY(calc((1 - var(--ka,1)) * 10px));}
.card-rule{width:46px;height:2px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb,226,104,60),.65);
  transform:scaleX(var(--ka,1));transform-origin:center;opacity:calc(.35 + var(--ka,1) * .65);}
.card-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(46px,12vw,76px);font-weight:340;
  letter-spacing:-.02em;line-height:.98;text-shadow:0 2px 18px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.4);
  max-width:90vw;overflow-wrap:break-word;hyphens:auto;
  opacity:var(--ti,1);transform:translateY(var(--ty,0)) scale(1);filter:blur(var(--tb,0));
  -webkit-clip-path:inset(0 0 var(--tclip,0) 0);clip-path:inset(0 0 var(--tclip,0) 0);}
.card-sub{font-size:16px;color:var(--muted);opacity:var(--si,1);transform:translateY(calc((1 - var(--si,1)) * 8px));}

/* Outro/Recap-Finale — bottom-anchored über der voll erleuchteten Route. Motion via inline-vars in overlays(). */
#outro{position:absolute;left:calc(26px + var(--sal));right:calc(26px + var(--sar));
  bottom:calc(178px + var(--sab));z-index:9;text-align:left;text-shadow:0 1px 14px rgba(0,0,0,.5);}
#outro.hidden{display:none;}
.outro-kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:700;
  opacity:var(--ka,1);transform:translateY(calc((1 - var(--ka,1)) * 8px));}
.outro-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(38px,11vw,48px);font-weight:500;
  letter-spacing:-.015em;line-height:1.0;margin-top:8px;color:var(--ink);overflow-wrap:break-word;hyphens:auto;
  opacity:var(--ti,1);transform:translateY(var(--ty,0));}
.outro-tiles{display:flex;gap:10px;margin-top:18px;}
.stat-tile{flex:1;min-width:0;padding:13px 14px;border-radius:14px;border:1px solid rgba(226,104,60,.25);
  background:rgba(20,28,40,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.3);opacity:var(--ti0,1);transform:translateY(calc((1 - var(--ti0,1)) * 14px));}
.stat-tile:nth-child(2){opacity:var(--ti1,1);transform:translateY(calc((1 - var(--ti1,1)) * 14px));}
.stat-tile:nth-child(3){opacity:var(--ti2,1);transform:translateY(calc((1 - var(--ti2,1)) * 14px));}
.stat-num{font-family:'Fraunces',Georgia,serif;font-size:clamp(28px,9vw,40px);font-weight:500;line-height:1;
  letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;}
.stat-lbl{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);opacity:.6;}

/* Outro-CTA-Row (im Chrome): „Reel teilen" solid accent + „Nochmal ansehen" ghost teal. */
#outroCta{display:flex;gap:10px;margin-top:12px;pointer-events:auto;
  transition:opacity .4s ease,transform .4s ease;}
#outroCta.hidden{opacity:0;transform:translateY(8px);pointer-events:none;display:none;}
.octa{flex:1;font-size:15px;font-weight:600;padding:13px;border-radius:14px;border:1px solid var(--line);cursor:pointer;}
.octa.primary{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 6px 22px rgba(226,104,60,.38),inset 0 1px 0 rgba(255,255,255,.22);}
.octa.ghost{background:rgba(20,28,40,.45);color:#5BC8C2;border-color:rgba(91,200,194,.4);}
.octa:active{transform:scale(.98);}

/* full-bleed: das Foto ist der Ort. Bild = inset:0/cover/kein Radius; warmer Edge-Glow innen.
   Reveal/Drift via inline-var --pk (1.10→1.14 Skala) + opacity --po, gesetzt pro Frame in overlays(). */
#photo{position:absolute;inset:0;z-index:8;overflow:hidden;opacity:var(--po,1);
  box-shadow:inset 0 0 80px rgba(var(--accent-rgb,226,104,60),.12);transition:none;}
#photo.hidden{opacity:0;pointer-events:none;}
.ph-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:118px;
  background-size:cover;background-position:center;transform:scale(var(--pk,1.10));
  transform-origin:center;will-change:transform;}
#phImg{opacity:var(--po,1);} /* incoming photo fades in over the outgoing .ph-prev → cross-dissolve */
.ph-prev{transform:scale(var(--pkp,1.14));opacity:var(--pop,0);}
.ph-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.34) 0%,transparent 22%,transparent 46%,rgba(0,0,0,.62) 100%);}
/* Top-Progress-Tick-Row: eine Tick pro Foto, aktive = hell (#FF8254). */
.ph-ticks{position:absolute;top:calc(14px + var(--sat));left:calc(16px + var(--sal));right:calc(16px + var(--sar));
  z-index:2;display:flex;gap:5px;}
.ph-ticks .tk{flex:1;height:3px;border-radius:3px;background:rgba(244,241,236,.28);overflow:hidden;}
.ph-ticks .tk.done::after,.ph-ticks .tk.on::after{content:"";display:block;height:100%;border-radius:3px;
  background:var(--tick,#FF8254);box-shadow:0 0 6px rgba(var(--accent-rgb,226,104,60),.6);}
.ph-ticks .tk.done::after{width:100%;}
.ph-ticks .tk.on::after{width:var(--tkfill,0%);}
/* Film-Lockup unten-links: Ort = Held (Fraunces), getrackte UPPERCASE-Meta-Zeile mit Pin, Caption darunter. */
#photo figcaption{position:absolute;left:calc(26px + var(--sal));right:calc(26px + var(--sar));
  bottom:calc(118px + var(--sab));z-index:2;text-align:left;text-shadow:0 1px 14px rgba(0,0,0,.55);}
.ph-place{display:block;font-family:'Fraunces',Georgia,serif;font-size:clamp(26px,7.5vw,34px);font-weight:500;
  line-height:1.02;letter-spacing:-.01em;color:var(--ink);}
.ph-meta{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.66;}
.ph-meta::before{content:"";flex:none;width:7px;height:9px;background:currentColor;
  -webkit-mask:var(--pin) center/contain no-repeat;mask:var(--pin) center/contain no-repeat;transform:translateY(-1px);}
.ph-cap{display:block;margin-top:8px;font-size:16px;font-weight:500;line-height:1.35;color:rgba(244,241,236,.7);
  max-width:80%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* gerahmter Fallback NUR ohne Bild (kein full-bleed-Verlauf): kleine Karte mittig mit Emoji. */
#photo.framed{inset:auto;left:50%;bottom:calc(132px + var(--sab));transform:translateX(-50%);
  width:min(360px,80%);aspect-ratio:4/3;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1);}
#photo.framed .ph-img{transform:scale(var(--pk,1.04));border-radius:20px;}
/* gerahmte Card sitzt NICHT am Screen-Top → Tick-Row über die Card statt mitten aufs Bild (Safe-Area-Offset gilt nur full-bleed) */
#photo.framed .ph-ticks{top:auto;bottom:calc(100% + 10px);left:2px;right:2px;}
#photo.framed figcaption{position:static;text-align:center;margin-top:0;padding:0 18px;
  position:absolute;left:0;right:0;bottom:16px;}
#photo.framed .ph-cap{margin-left:auto;margin-right:auto;}
.ph-date,.ph-count{display:none;} /* alte Chips: durch Lockup + Tick-Row ersetzt (Datum in Meta-Zeile eingefaltet) */

/* ===== Player chrome (cinematic, "invisible until wanted") =====
   One bottom zone: a glass scrim carries a thin segmented progress bar (always faintly visible,
   doubles as scrubber) + heavy controls that auto-fade. NO top bar (iOS adds its own native toolbar). */
#chrome{position:absolute;left:0;right:0;bottom:0;z-index:9;pointer-events:none;
  padding:0 calc(16px + var(--sar)) calc(10px + var(--sab)) calc(16px + var(--sal));
  background:linear-gradient(to top,rgba(0,0,0,.58) 0%,rgba(0,0,0,.34) 42%,transparent 100%);}

/* Segmented Stories-style progress bar: one segment per chapter, thin, low.
   Always present (the quiet primary indicator); thickens a touch while scrubbing.
   #progress carries the scrub overlay + float; #pips holds only the (rebuilt) segments. */
#progress{position:relative;height:18px;margin-bottom:10px;pointer-events:auto;cursor:pointer;touch-action:none;
  transition:opacity .3s ease;}
#pips{display:flex;gap:5px;align-items:flex-end;height:100%;}
.pip{flex:1;height:3px;border-radius:3px;background:rgba(244,241,236,.22);overflow:hidden;
  transition:height .18s ease,background .3s ease;}
.pip::after{content:"";display:block;height:100%;width:var(--fill,0%);background:rgba(244,241,236,.55);
  border-radius:3px;transition:width .08s linear,background .3s ease;}
.pip.done{background:rgba(244,241,236,.22);}
.pip.done::after{width:100%;background:rgba(244,241,236,.55);}
.pip.active::after{background:var(--accent);box-shadow:0 0 6px rgba(226,104,60,.55);}
#progress.scrubbing .pip{height:5px;}
/* the ARIA slider lives invisibly on top of the whole bar for keyboard + screen-reader use */
#scrub{position:absolute;inset:-12px 0;background:transparent;}
/* floating time/stop label that appears above the thumb while dragging */
#pipFloat{position:absolute;bottom:22px;left:0;transform:translateX(-50%);padding:4px 10px;border-radius:10px;
  background:rgba(20,28,40,.85);border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:600;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .15s ease;}
#progress.scrubbing #pipFloat{opacity:1;}

/* Heavy controls row — play (hero), replay, time. Auto-fades on idle. */
#controls{display:flex;align-items:center;justify-content:center;gap:18px;position:relative;
  pointer-events:auto;transition:opacity .3s ease,transform .3s ease;}
#chrome.idle #controls{opacity:0;transform:translateY(6px);pointer-events:none;}
#chrome.idle #progress{opacity:.6;}

/* play/pause = the hero control: warm accent, subtle glow, breathing while idle/paused */
.iconbtn.play{width:60px;height:60px;font-size:20px;background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 6px 22px rgba(226,104,60,.38),inset 0 1px 0 rgba(255,255,255,.22);}
.iconbtn.play.breathing{animation:playBreathe 2.4s ease-in-out infinite;}
@keyframes playBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.iconbtn.play:active{transform:scale(.95);}
/* replay only matters at the end — neutral ghost, demoted otherwise */
.iconbtn.ghostbtn{width:44px;height:44px;font-size:16px;background:rgba(20,28,40,.45);color:var(--ink);
  border-color:var(--line);}
#controls.ended .iconbtn.ghostbtn{border-color:var(--accent);color:var(--accent);}

#time{position:absolute;left:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;}
#timeSep,#timeTot{opacity:.6;}

#watermark{position:absolute;right:calc(16px + var(--sar));bottom:calc(12px + var(--sab));z-index:9;
  display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:rgba(244,241,236,.5);
  letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none;}
#watermark.hidden{display:none;}
.wm-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(226,104,60,.7);opacity:.85;}

#shareSheet{position:absolute;inset:0;z-index:40;}
#shareSheet.hidden{display:none;}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.sheet-card{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:#121821;
  border-top:1px solid var(--line);border-radius:20px 20px 0 0;
  padding:12px 18px calc(20px + var(--sab));animation:sheetup .35s ease;}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grip{width:38px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);margin:2px auto 14px;}
.sheet-title{font-size:18px;font-weight:600;margin-bottom:14px;}
.sheet-block{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;}
.sheet-label{font-size:14px;font-weight:600;margin-bottom:4px;}
.sheet-hint{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.sheet-linkrow{display:flex;gap:8px;}
#shareLink{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-size:13px;padding:9px 11px;}
.sheet-pills{display:flex;gap:8px;margin-bottom:10px;}
.fpill{font-size:13px;font-weight:600;padding:7px 14px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;}
.fpill.active{color:#fff;border-color:var(--accent);background:rgba(226,104,60,.2);}
.sheet-btn{width:100%;font-size:14px;font-weight:600;padding:11px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;}
.sheet-btn.primary{background:var(--accent);border-color:transparent;color:#fff;width:auto;padding:11px 18px;}
.sheet-btn.ghost{background:transparent;margin-top:4px;color:var(--muted);}
.sheet-btn:active{transform:scale(.99);}
.sheet-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:11px;cursor:pointer;}
.sheet-pro{font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:1px 8px;}

#toast{position:absolute;left:50%;bottom:calc(78px + var(--sab));transform:translateX(-50%) translateY(12px);
  background:rgba(20,28,40,.95);border:1px solid var(--line);color:var(--ink);font-size:13px;padding:9px 16px;
  border-radius:22px;z-index:45;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:84%;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.qr-row{display:flex;gap:14px;align-items:flex-start;}
#qrCanvas{flex:none;width:120px;height:120px;border-radius:10px;background:#fff;padding:6px;}
.qr-side{flex:1;min-width:0;}
#embedCode{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;color:var(--muted);
  font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;padding:8px;resize:none;margin-bottom:8px;}
body.embed #topbar,body.embed #tripBar{display:none;}

/* Ambient/Idle ("lebende Karte" als Home-Hintergrund): nur die dunkle 3D-Karte (#mlmap), KEINE Chrome.
   Overlay-Canvas + alle UI-Ebenen aus; dezente Vignette bleibt (premium als Hintergrund hinter UI). */
body.ambient #topbar,body.ambient #tripBar,body.ambient #card,body.ambient #photo,body.ambient #chrome,
body.ambient .letterbox,body.ambient #locLabel,
body.ambient #map,body.ambient #loading{display:none!important;}
body.ambient #vignette{opacity:.7;}
body.ambient #mlmap{pointer-events:none;}

.tpill.import{border-style:dashed;color:var(--ink);}
#dropzone{position:absolute;inset:0;z-index:46;display:flex;align-items:center;justify-content:center;
  background:rgba(10,15,23,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:24px;}
#dropzone.hidden{display:none;}
.dz-inner{border:2px dashed rgba(226,104,60,.7);border-radius:22px;padding:42px 54px;text-align:center;pointer-events:none;}
.dz-icon{font-size:46px;color:var(--accent);line-height:1;}
.dz-title{font-size:21px;font-weight:600;margin-top:12px;}
.dz-sub{font-size:13px;color:var(--muted);margin-top:7px;}
#importStatus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:47;text-align:center;
  background:rgba(18,24,33,.96);border:1px solid var(--line);border-radius:16px;padding:20px 26px;max-width:82%;
  font-size:15px;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#importStatus.hidden{display:none;}
#importStatus .is-sub{font-size:12px;font-weight:400;color:var(--muted);margin-top:7px;line-height:1.5;}
#importStatus .is-spin{width:22px;height:22px;margin:0 auto 12px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--accent);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:760px){#photo.framed{width:420px;}}
@media(max-width:480px){
  .card-sub{font-size:15px;}
  #locLabel{bottom:calc(150px + var(--sab));}
  #locLabel .ll-name{font-size:31px;}
  #tripTitleBar{font-size:14px;}
}
@media(prefers-reduced-motion:reduce){
  /* static end-states for the new beats: overlays() also passes static f(t) values when reduce.matches */
  .ph-img{transform:scale(1.04)!important;will-change:auto;}
  .card-title,.card-kicker,.card-rule,.card-sub,.outro-title,.outro-kicker,.stat-tile{transition:none;}
  .pip,#locLabel,#card,#photo,#outro,#outroCta,.letterbox,#vignette,.sheet-card{transition:none;animation:none;}
  /* no fade dance: chrome + controls just show, play does not breathe */
  #chrome,#controls,.iconbtn.play{transition:none;animation:none;}
  #chrome.idle #controls{opacity:1;transform:none;pointer-events:auto;}
  #chrome.idle #progress{opacity:1;}
}