:root {
  color-scheme: dark;
  --ink: #f6f0df;
  --muted: #aebcb6;
  --forest: #102621;
  --deep: #091713;
  --sun: #efb94f;
  --blue: #8cced2;
  --lime: #b7d356;
  --line: rgba(246, 240, 223, 0.15);
  --drift-x: 0px;
  --drift-y: 0px;
}

*, *::before, *::after { box-sizing: border-box; cursor: none !important; }

html, body { width: 100%; height: 100%; overflow: hidden; }

html {
  background: var(--deep);
  cursor: none;
  /*
   * Keep the 1080p composition unchanged, but retain a readable physical size for
   * rem-based copy on UHD and DCI-4K shop-window panels. Layout dimensions
   * still follow the viewport, so the extra pixels improve the map and type
   * instead of making the whole composition behave like a zoomed web page.
   */
  font-size: clamp(16px, min(0.56vw, 1.02vh), 22px);
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse 65vw 50vh at 78% -8%, rgba(140, 206, 210, 0.11), transparent),
    radial-gradient(ellipse 48vw 40vh at 4% 45%, rgba(239, 185, 79, 0.07), transparent),
    var(--deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: filter 1.5s ease, background-color 1.5s ease;
}

body.is-night { filter: brightness(0.68) saturate(0.86); }

body.is-night.is-low-power {
  --ink: #d4cfc1;
  --muted: #83918b;
  --sun: #c99b43;
  --blue: #6fa6aa;
  --lime: #92aa4a;
  filter: none;
}

.kiosk {
  width: 100%; height: 100%;
  padding: clamp(30px, 3.4vw, 68px) clamp(42px, 4.5vw, 92px) clamp(24px, 2.5vw, 50px);
  display: grid; grid-template-rows: auto 1fr auto; gap: clamp(18px, 2vh, 32px);
  transform: translate(var(--drift-x), var(--drift-y));
  transition: transform 6s ease-in-out;
}

.kiosk-header, .kiosk-footer { position: relative; z-index: 4; }

.kiosk-header {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 32px);
  min-height: clamp(60px, 7vh, 92px); padding-bottom: clamp(14px, 1.8vh, 26px);
  border-bottom: 1px solid var(--line);
}

.kiosk-brand { display: flex; align-items: baseline; gap: 1.1em; flex-shrink: 0; }
.kiosk-brand span { color: var(--sun); font-size: clamp(1.2rem, 1.65vw, 2rem); font-weight: 950; letter-spacing: 0.18em; }
.kiosk-brand b { color: var(--muted); font-size: clamp(0.8rem, 0.9vw, 1.15rem); letter-spacing: 0.02em; }

.kiosk-ticker {
  display: flex; align-items: center; gap: 10px;
  max-width: min(100%, 54ch);
  padding: clamp(6px, 0.8vh, 10px) clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(183, 211, 86, 0.45);
  border-radius: 999px;
  background: rgba(16, 38, 33, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(183, 211, 86, 0.18);
  animation: ticker-slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.kiosk-ticker[hidden] { display: none !important; }
@keyframes ticker-slide-down {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ticker-badge {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 3px 8px; border-radius: 999px;
  background: var(--lime); color: var(--deep);
  font-size: clamp(0.65rem, 0.72vw, 0.85rem); font-weight: 950; letter-spacing: 0.08em;
}
.ticker-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--deep);
  animation: status-pulse 1.4s ease-in-out infinite;
}
.ticker-text {
  color: var(--ink); font-size: clamp(0.74rem, 0.86vw, 1.06rem); font-weight: 800;
  letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.shop-brand { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 22px); color: inherit; text-decoration: none; flex-shrink: 0; }
.shop-brand span { color: var(--muted); font-size: clamp(0.68rem, 0.76vw, 0.95rem); font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-brand strong { max-width: 22ch; color: var(--ink); font-size: clamp(0.8rem, 0.94vw, 1.18rem); line-height: 1.05; text-align: right; }
.shop-brand img { width: clamp(58px, 5.2vw, 104px); height: clamp(58px, 5.2vw, 104px); object-fit: contain; }

.kiosk-stage {
  min-height: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center; gap: clamp(40px, 5vw, 112px);
}

.lake-panel { position: relative; min-width: 0; align-self: stretch; display: grid; place-items: center; }
.lake-panel::after {
  content: ""; position: absolute; inset: 8% 3%; z-index: -1;
  background: radial-gradient(circle, rgba(140, 206, 210, 0.08), transparent 68%);
}
.lake-panel svg {
  display: block;
  width: min(100%, 74vh);
  max-height: 74vh;
  overflow: visible;
  /* Soft vignette edge feathering */
  mask-image: radial-gradient(ellipse 90% 88% at 48% 50%, black 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 88% at 48% 50%, black 65%, transparent 100%);
}

#kiosk-lake,
.kiosk-globe {
  grid-area: 1 / 1;
  transform-origin: center center;
}
.kiosk-globe {
  pointer-events: none;
  z-index: 2;
  width: min(100%, 74vh);
  height: min(100%, 74vh);
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
.kiosk-globe[hidden] {
  display: none !important;
}
.kiosk-globe.is-hidden {
  display: none !important;
}
.kiosk-basemap { opacity: 0; pointer-events: none; }
.kiosk-basemap-attribution {
  position: absolute; right: 8px; top: 8px; z-index: 5;
  max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 6px;
  color: var(--muted); background: rgba(11, 26, 22, .9);
  font-size: .68rem; line-height: 1.3;
}
.kiosk-basemap-attribution[hidden] { display: none; }
.kiosk-basemap-attribution a { color: var(--ink); }
.kiosk-earth { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 24px; pointer-events: none; z-index: 1; }
.kiosk-earth[hidden] { display: none; }
.is-earth-flight { overflow: hidden; isolation: isolate; border-radius: 24px; }
.is-earth-flight #kiosk-lake { position: relative; z-index: 3; }
.is-earth-flight .map-caption { z-index: 4; }
.earth-credit { display: none; position: absolute; bottom: 2%; left: 0; width: 100%; text-align: center; color: #9aafbd; font-size: 10px; z-index: 4; pointer-events: none; }
.is-earth-flight:has(.kiosk-earth:not([hidden])) .earth-credit { display: block; }
@media (prefers-reduced-motion: reduce) { .globe-pin-pulse { animation: none; } }
.globe-pin-label {
  fill: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}
.globe-pin-pulse {
  animation: globe-pulse 2.2s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
  transform-origin: center center;
}
@keyframes globe-pulse {
  0% { r: 5px; opacity: 0.85; }
  60% { r: 20px; opacity: 0.12; }
  100% { r: 20px; opacity: 0; }
}

.lake-loop { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.lake-loop--halo { stroke: rgba(140, 206, 210, 0.38); stroke-width: 6; }
/* steps() limits repaints to ~3/s: stroke-dashoffset animates on the main
   thread and a continuous 60 fps version kept a 4K kiosk repainting forever. */
.lake-loop--dash { stroke: var(--blue); stroke-width: 2.25; stroke-dasharray: 8 10; animation: lake-flow 55s steps(180) infinite; }
@keyframes lake-flow { to { stroke-dashoffset: -360; } }

.lake-road {
  fill: none;
  stroke: var(--sun);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
  opacity: .9;
}
.kiosk-route-attribution {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; color: var(--muted); font-size: .68rem;
}
.kiosk-route-attribution a { color: inherit; }

.lake-hub-mark circle {
  fill: var(--sun); stroke: var(--deep); stroke-width: 3;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
}
.lake-hub-mark text {
  fill: var(--ink); font-size: 16px; font-weight: 850;
  text-anchor: middle; letter-spacing: 0.04em;
  paint-order: stroke fill;
  stroke: var(--deep);
  stroke-width: 4.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
}
.lake-heat { opacity: 0.94; transition: opacity 0.8s ease; }
#kiosk-ambient-heat,
#kiosk-heat {
  mask-image: radial-gradient(ellipse 74% 70% at 48% 50%, black 35%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.25) 65%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 74% 70% at 48% 50%, black 35%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.25) 65%, transparent 78%);
}
#kiosk-ambient-heat {
  opacity: 1;
}
.lake-heat .heat-cell--fresh {
  transform-box: fill-box;
  transform-origin: center;
  animation: fresh-cell-pulse 8s ease-out forwards;
}
@keyframes fresh-cell-pulse {
  0% { transform: scale(2.4); filter: drop-shadow(0 0 10px #00ffcc); opacity: 1; }
  30% { transform: scale(1.9); filter: drop-shadow(0 0 14px #00ffcc); opacity: 0.95; }
  65% { transform: scale(1.4); filter: drop-shadow(0 0 8px #10b981); opacity: 0.9; }
  100% { transform: scale(1); filter: none; opacity: 0.85; }
}
.lake-trails path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; opacity: 0.88; }
/* Pulse via compositor-friendly transform instead of the r attribute, which
   forces main-thread paint on every frame. scale(1.22) matches the old 9→11. */
.lake-riders circle { stroke: var(--deep); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: rider-pulse 2.2s ease-in-out infinite; }
.lake-riders text { fill: var(--ink); font-size: 16px; font-weight: 850; paint-order: stroke; stroke: var(--deep); stroke-width: 5px; }
@keyframes rider-pulse { 50% { transform: scale(1.22); } }

.map-caption {
  position: absolute; left: 4%; bottom: 3%; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: rgba(9, 23, 19, 0.74); backdrop-filter: blur(12px);
  font-size: clamp(0.72rem, 0.85vw, 1.05rem); font-weight: 800;
}
.map-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 16px var(--sun); }
[data-mode="live"] .map-pulse { background: var(--lime); box-shadow: 0 0 18px var(--lime); animation: status-pulse 1.8s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: 0.35; } }
.is-low-power .lake-loop--dash,
.is-low-power .lake-riders circle,
.is-low-power .map-pulse { animation: none; }
.is-low-power .map-caption { backdrop-filter: none; }
.is-low-power .lake-hub-mark text,
.is-low-power .lake-hub-mark circle { filter: none; }
.is-low-power .kiosk { transform: none; transition: none; }
.is-low-power .slide { transform: none; transition: none; }

.content-panel { position: relative; min-width: 0; min-height: min(65vh, 680px); align-self: stretch; container-type: inline-size; }
.slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(18px); pointer-events: none;
  /* Retire the outgoing slide after the fade instead of relying on opacity alone. */
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.slide.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }

.eyebrow {
  margin: 0 0 clamp(20px, 2.6vh, 36px); color: var(--sun);
  font-size: clamp(0.78rem, 1vw, 1.25rem); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase;
}
.eyebrow--live { color: var(--lime); display: flex; align-items: center; gap: 12px; }
.eyebrow--live > span { width: 13px; height: 13px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; }
.slide h1 { margin: 0; max-width: 16ch; font-size: clamp(2.7rem, 4.4vw, 5.7rem); line-height: 0.98; letter-spacing: -0.055em; text-wrap: balance; }
.lead { max-width: 34ch; margin: clamp(22px, 3vh, 38px) 0 0; color: var(--muted); font-size: clamp(1.15rem, 1.65vw, 2.05rem); line-height: 1.38; font-weight: 580; }

.live-heading { display: flex; align-items: center; gap: clamp(28px, 3vw, 58px); }
.live-heading strong { color: var(--sun); font-size: clamp(7rem, 12vw, 15rem); line-height: 0.74; font-weight: 950; letter-spacing: -0.08em; font-variant-numeric: tabular-nums; }
.live-heading h1 { font-size: clamp(2.15rem, 3.4vw, 4.5rem); }
.rider-grid { margin-top: clamp(26px, 3.5vh, 46px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.rider-card { min-width: 0; padding: 12px 14px 12px 18px; border-left: 5px solid var(--rider-color, var(--sun)); background: rgba(255, 255, 255, 0.035); border-radius: 0 12px 12px 0; }
.rider-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(0.96rem, 1.25vw, 1.55rem); }
.rider-card span { display: block; margin-top: 3px; color: var(--muted); font-size: clamp(0.72rem, 0.9vw, 1.08rem); font-variant-numeric: tabular-nums; }

.has-many-riders .live-heading strong { font-size: clamp(5.8rem, 9vw, 11rem); }
.has-many-riders .live-heading h1 { font-size: clamp(1.85rem, 2.8vw, 3.65rem); }
.has-many-riders .rider-grid { margin-top: clamp(16px, 2vh, 26px); gap: 7px 20px; }
.has-many-riders .rider-card { padding: 7px 10px 7px 14px; }
.has-many-riders .rider-card b { font-size: clamp(0.84rem, 1.04vw, 1.28rem); }
.has-many-riders .rider-card span { font-size: clamp(0.65rem, 0.76vw, 0.92rem); }

.today-number { color: var(--lime); font-size: clamp(8rem, 15vw, 19rem); line-height: 0.72; font-weight: 950; letter-spacing: -0.08em; font-variant-numeric: tabular-nums; }
.slide--today h1 { margin-top: clamp(22px, 3vh, 38px); font-size: clamp(2.4rem, 3.8vw, 4.8rem); }
.eyebrow--today { color: var(--lime); display: flex; align-items: center; gap: 10px; }
.eyebrow--today > span:first-child { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: currentColor; box-shadow: 0 0 16px currentColor; flex-shrink: 0; }

.yesterday-number { color: var(--ink); font-size: clamp(8rem, 15vw, 19rem); line-height: 0.72; font-weight: 950; letter-spacing: -0.08em; font-variant-numeric: tabular-nums; }
.slide--yesterday h1 { margin-top: clamp(22px, 3vh, 38px); font-size: clamp(2.4rem, 3.8vw, 4.8rem); }
.name-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: clamp(20px, 2.5vh, 34px); color: var(--sun); font-size: clamp(0.9rem, 1.2vw, 1.5rem); font-weight: 800; }
.name-list span + span::before { content: "·"; margin-right: 18px; color: var(--muted); }

.how-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 0.43fr); align-items: center; gap: clamp(32px, 4vw, 72px); }
.slide--how h1 { font-size: clamp(2.4rem, 3.65vw, 4.7rem); }
.steps { list-style: none; margin: clamp(28px, 4vh, 52px) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.8vh, 24px); }
.steps li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; color: var(--muted); font-size: clamp(0.95rem, 1.25vw, 1.55rem); font-weight: 700; }
.steps b { width: clamp(34px, 2.6vw, 52px); height: clamp(34px, 2.6vw, 52px); display: grid; place-items: center; border-radius: 50%; color: var(--deep); background: var(--sun); }
.qr-card { padding: clamp(16px, 1.5vw, 26px); text-align: center; color: var(--deep); background: var(--ink); border-radius: 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28); }
.qr-card img { display: block; width: 100%; aspect-ratio: 1; }
.qr-card b { display: block; margin-top: 10px; font-size: clamp(1rem, 1.2vw, 1.45rem); }
.qr-card span { display: block; margin-top: 2px; font-size: clamp(0.72rem, 0.8vw, 0.95rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }

.mobile-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 0.58fr); align-items: center; gap: clamp(30px, 3vw, 64px); }
.slide--mobile h1 { max-width: 11ch; font-size: clamp(2.55rem, 4vw, 5.15rem); }
.slide--mobile .lead { max-width: 31ch; font-size: clamp(1.02rem, 1.42vw, 1.72rem); }
.mobile-promises { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vh, 38px); }
.mobile-promises span {
  padding: 9px 14px; border: 1px solid rgba(140, 206, 210, 0.3); border-radius: 999px;
  color: var(--blue); background: rgba(140, 206, 210, 0.065);
  font-size: clamp(0.72rem, 0.82vw, 1rem); font-weight: 850; letter-spacing: 0.02em;
}
.mobile-download-row {
  display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(18px, 2.2vh, 32px);
}
.qr-card--kiosk-app {
  flex-shrink: 0;
  width: clamp(95px, 7.5vw, 130px);
  padding: clamp(8px, 0.8vw, 14px);
  border-radius: 16px;
}
.qr-card--kiosk-app b { margin-top: 6px; font-size: clamp(0.85rem, 1vw, 1.15rem); }
.qr-card--kiosk-app span { font-size: clamp(0.6rem, 0.68vw, 0.8rem); }
.mobile-download-note strong {
  display: block; color: var(--sun);
  font-size: clamp(1.05rem, 1.3vw, 1.6rem);
  font-weight: 850; letter-spacing: -0.02em;
}
.mobile-download-note p {
  margin: 4px 0 0; color: var(--muted);
  font-size: clamp(0.82rem, 0.95vw, 1.15rem);
  line-height: 1.4;
}
.phone-pair { position: relative; min-height: clamp(360px, 46vh, 520px); }
.phone {
  position: absolute; width: clamp(150px, 11vw, 220px); aspect-ratio: 0.51;
  padding: clamp(7px, 0.55vw, 11px); border: 2px solid rgba(246, 240, 223, 0.65); border-radius: clamp(28px, 2.2vw, 42px);
  background: #07110e; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38); transform: rotate(var(--phone-tilt));
}
.phone > i { position: absolute; top: 3.5%; left: 50%; z-index: 2; width: 38%; height: 3%; border-radius: 999px; background: #07110e; transform: translateX(-50%); }
.phone-screen {
  height: 100%; padding: 18% 10% 12%; border-radius: clamp(21px, 1.7vw, 33px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 33%, rgba(140, 206, 210, 0.22), transparent 27%),
    linear-gradient(160deg, #15372f, #0a1b17 65%);
  overflow: hidden;
}
.phone-screen::before {
  content: ""; width: 62%; aspect-ratio: 0.92; margin-bottom: 16%; opacity: 0.72;
  border: 3px dashed var(--blue); border-radius: 44% 55% 50% 48%; transform: rotate(12deg);
}
.phone-screen span { color: var(--sun); font-size: clamp(0.54rem, 0.52vw, 0.72rem); font-weight: 950; letter-spacing: 0.16em; }
.phone-screen b { width: 90%; margin-top: 10%; padding: 9% 4%; border-radius: 999px; text-align: center; color: var(--deep); background: var(--sun); font-size: clamp(0.58rem, 0.62vw, 0.82rem); }
.phone-screen small { margin-top: 9%; color: var(--muted); font-size: clamp(0.55rem, 0.54vw, 0.72rem); font-weight: 800; }
.phone--ios { --phone-tilt: -5deg; left: 0; top: 2%; z-index: 1; }
.phone--android { --phone-tilt: 7deg; right: 0; bottom: 0; z-index: 2; }

.slide--community h1 { max-width: 12ch; }
.community-lines { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: clamp(28px, 4vh, 52px) 0 0; color: var(--sun); font-size: clamp(1.35rem, 2vw, 2.5rem); font-weight: 900; }
.site-address { margin: clamp(30px, 4vh, 54px) 0 0; color: var(--ink); font-size: clamp(1.1rem, 1.4vw, 1.75rem); font-weight: 900; letter-spacing: 0.04em; }

.slide--brand h1 { max-width: 14ch; }
.slide--brand .lead { max-width: 32ch; }
.slide--brand-photo {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
  grid-template-rows: max-content max-content;
  align-content: center;
  align-items: center;
  gap: clamp(16px, 2vh, 28px) clamp(18px, 3cqw, 48px);
}
.slide--brand-photo h1 { font-size: clamp(2rem, 7cqw, 5.7rem); }
.slide--brand-photo .lead { font-size: clamp(0.95rem, 2.5cqw, 2.05rem); margin-top: clamp(14px, 2vh, 28px); }
.slide--brand-photo .eyebrow { font-size: clamp(0.7rem, 1.65cqw, 1.25rem); margin-bottom: clamp(14px, 2vh, 28px); }
.slide--brand-photo > .brand-cta { grid-column: 1 / -1; justify-content: flex-end; margin-top: 0; }
.slide--brand-photo .qr-card--brand { width: clamp(144px, 22cqw, 260px); }
.slide--brand-photo .brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.brand-photo-frame {
  position: relative;
  width: 100%;
  border-radius: clamp(22px, 2.2vw, 36px);
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(246, 240, 223, 0.14);
  background: rgba(0, 0, 0, 0.3);
}
.brand-photo-frame .brand-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
.brand-cta { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); margin-top: clamp(28px, 3.5vh, 48px); }
.brand-cta .kiosk-brand-link { margin-top: 0; }
.qr-card--brand {
  width: clamp(180px, 13vw, 260px);
  padding: clamp(14px, 1.2vw, 22px);
  flex: none;
}
.qr-card--brand b {
  margin-top: 8px;
  font-size: clamp(0.68rem, 0.72vw, 0.94rem);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.qr-card--brand span {
  margin-top: 2px;
  font-size: clamp(0.58rem, 0.62vw, 0.78rem);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.kiosk-brand-link {
  width: fit-content; margin-top: clamp(28px, 4vh, 52px); padding: clamp(14px, 1.25vw, 22px) clamp(18px, 1.7vw, 30px);
  border: 1px solid color-mix(in srgb, var(--sun) 52%, transparent); border-radius: 18px;
  color: var(--ink); background: color-mix(in srgb, var(--sun) 10%, transparent); text-decoration: none;
}
.kiosk-brand-link b { display: block; font-size: clamp(0.92rem, 1.12vw, 1.4rem); }
.kiosk-brand-link span { display: block; margin-top: 4px; color: var(--sun); font-size: clamp(0.72rem, 0.82vw, 1rem); font-weight: 800; }

.kiosk-footer {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 2vw, 36px);
  min-height: clamp(44px, 5vh, 64px); padding-top: clamp(12px, 1.6vh, 22px); border-top: 1px solid var(--line);
  color: var(--muted); font-size: clamp(0.7rem, 0.78vw, 0.98rem); font-weight: 650;
}
.kiosk-footer-actions { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); }
.kiosk-version {
  font-size: clamp(0.68rem, 0.72vw, 0.9rem);
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
}
.kiosk-audio-status {
  display: inline-grid; place-items: center; width: clamp(28px, 2.2vw, 38px); height: clamp(28px, 2.2vw, 38px);
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: clamp(0.85rem, 1vw, 1.2rem);
  opacity: 0.85; transition: border-color 0.2s, background-color 0.2s;
}
.kiosk-audio-status.is-muted { opacity: 0.35; filter: grayscale(1); }
.connection { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.connection i { width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.connection.is-online i { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.connection.is-offline { color: #f2aa92; }
.connection.is-offline i { background: #e66f4d; box-shadow: 0 0 10px #e66f4d; }
[data-mode="live"] .lake-heat { opacity: 0.42; }

/* Grand reveal pulse for newly arrived heatmap trails */
@keyframes heatGrandPulse {
  0% {
    r: 0px;
    opacity: 0;
    filter: drop-shadow(0 0 14px #ff3300);
  }
  30% {
    r: 7.5px;
    opacity: 1;
    fill: #ffff77;
    filter: drop-shadow(0 0 20px #ff7700);
  }
  65% {
    r: 5px;
    opacity: 0.98;
    fill: #ff5511;
    filter: drop-shadow(0 0 10px #ff3300);
  }
  100% {
    r: 3.2px;
    opacity: 0.95;
    fill: #ff4500;
    filter: none;
  }
}

.heat-dot--grand {
  animation: heatGrandPulse 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.heat-dot--recent {
  filter: drop-shadow(0 0 4px rgba(255, 80, 40, 0.65));
}

.kiosk-ticker--grand {
  background: linear-gradient(90deg, rgba(255, 69, 0, 0.88), rgba(239, 185, 79, 0.88)) !important;
  color: #091713 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 28px rgba(255, 69, 0, 0.75);
  transition: all 0.5s ease;
}

@media (max-aspect-ratio: 14/9) {
  .kiosk { padding-left: 4vw; padding-right: 4vw; }
  .kiosk-stage { grid-template-columns: 0.82fr 1.18fr; gap: 4vw; }
  .shop-brand span, .shop-brand strong, .kiosk-brand b { display: none; }
  .content-panel { min-height: 64vh; }
}

@media (min-width: 3000px) {
  [data-kiosk-brand="kaihon-kukka"] .slide--brand h1 { font-size: 4.55rem; }
  [data-kiosk-brand="kaihon-kukka"] .slide--brand .lead,
  [data-kiosk-brand="kaihon-kukka"] .brand-cta { margin-top: 0.75rem; }
}

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

/* The brand veil lives on the full-window heat field, not on map geography. */
.kiosk { position: relative; z-index: 1; }
#kiosk-lake { mask-image: none; -webkit-mask-image: none; }
.content-panel { text-shadow: 0 2px 18px #091713; }
.content-panel::before {
  content: ""; position: absolute; inset: -8% -10%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(9, 23, 19, .48) 30%, transparent 72%);
}

.slide--photos { text-align: center; }
#kiosk-ride-photo { display: block; width: 100%; height: 65vh; object-fit: contain; margin: 1vh auto; }
#kiosk-photo-caption { max-width: 90%; margin: 1vh auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }