/*
 * Liwa Village — play layer styles.
 * Loaded after the prebuilt site's styles by serve.php. Everything here is
 * keyed to lv-* classes the play script adds; the one exception is .lv-settle,
 * which the script puts on the site's own photos so they can zoom gently.
 */

:root {
  --lv-red: #FF0000;
  --lv-ink: #1A1410;
  --lv-card: #FAF8F5;
  --lv-night: #0B0B0C;
  --lv-amber: #F7902D;
  --lv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lenis owns smooth scrolling on desktop; the site's own CSS smoothing would fight it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Shared type and bits ---------- */

.lv-play { position: relative; overflow: hidden; }
.lv-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lv-red);
}
.lv-eyebrow::before { content: ""; inline-size: 28px; block-size: 2px; background: currentColor; border-radius: 2px; }
[lang="ar"] .lv-eyebrow { letter-spacing: 0; font-size: 15px; }
h2.lv-title, .lv-deck__title, .lv-map__title, .lv-gz__name { text-wrap: balance; }
.lv-title {
  margin: 0 0 18px;
  font-size: clamp(36px, 5.2vw, 72px); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em;
}
[lang="ar"] .lv-title { line-height: 1.3; letter-spacing: 0; }
.lv-lead { margin: 0 0 28px; max-inline-size: 34em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; opacity: 0.8; }
[lang="ar"] .lv-lead { line-height: 1.9; }
.lv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-chips > span {
  padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1;
  background: color-mix(in srgb, var(--c, var(--lv-red)) 14%, transparent);
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--c, var(--lv-red)) 35%, transparent);
}
.lv-magnetic { transition: translate 0.45s var(--lv-ease); }

/* Sound toggle */
.lv-sound {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: inherit; background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  cursor: pointer; transition: background 0.3s, border-color 0.3s;
}
.lv-sound:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.lv-sound:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 3px; }
.lv-sound svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lv-sound .lv-sound__spk { fill: currentColor; stroke: none; }
.lv-sound[data-sound="on"] .lv-sound__off,
.lv-sound[data-sound="off"] .lv-sound__on { display: none; }

/* Confetti sits over everything and never takes a click. */
.lv-confetti { position: fixed; inset: 0; inline-size: 100vw; block-size: 100vh; z-index: 9999; pointer-events: none; }

/* Site photos that settle as they scroll in. */
.lv-settle { scale: var(--lv-s, 1); }

/* ---------- Hero fireworks ---------- */

.lv-fireworks { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.lv-skyhint {
  position: absolute; z-index: 3;
  inset-block-start: 30%; inset-inline-end: 7%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  animation: lv-float 3.2s ease-in-out infinite;
  transition: opacity 0.6s var(--lv-ease), scale 0.6s var(--lv-ease);
}
.lv-skyhint i { position: relative; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--lv-amber); }
.lv-skyhint i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--lv-amber); animation: lv-ping 1.6s var(--lv-ease) infinite; }
.lv-skyhint.is-gone { opacity: 0; scale: 0.8; }
@keyframes lv-float { 50% { translate: 0 -8px; } }
@keyframes lv-ping { from { opacity: 1; scale: 0.6; } to { opacity: 0; scale: 1.8; } }

/* ---------- Spin the wheel ---------- */

.lv-wheelsec { background: var(--lv-night); color: #fff; padding-block: clamp(80px, 11vw, 150px); isolation: isolate; }
.lv-wheelsec__bg { position: absolute; inset: 0; z-index: -2; }
.lv-wheelsec__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.32; scale: var(--lv-s, 1.1); filter: saturate(1.2); }
.lv-wheelsec__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 70% 45%, rgba(247, 144, 45, 0.18), transparent 60%),
    linear-gradient(180deg, var(--lv-night) 0%, rgba(11, 11, 12, 0.55) 30%, rgba(11, 11, 12, 0.7) 70%, var(--lv-night) 100%);
}
[dir="rtl"] .lv-wheelsec__bg::after { background:
    radial-gradient(60% 70% at 30% 45%, rgba(247, 144, 45, 0.18), transparent 60%),
    linear-gradient(180deg, var(--lv-night) 0%, rgba(11, 11, 12, 0.55) 30%, rgba(11, 11, 12, 0.7) 70%, var(--lv-night) 100%); }
.lv-wheelsec__device {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -18%; inset-inline-start: -14%;
  inline-size: min(900px, 90vw); opacity: 0.09;
}
.lv-wheelsec__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lv-wheelsec .lv-eyebrow { color: var(--lv-amber); }
.lv-wheelsec .lv-actions .btn { min-inline-size: 190px; }
.lv-wheelsec.is-flash .lv-wheel__halo { animation: lv-flash 1.4s var(--lv-ease); }
@keyframes lv-flash { 0% { opacity: 1; } 20% { opacity: 2.4; scale: 1.08; } 100% { opacity: 1; scale: 1; } }

.lv-result { min-block-size: 200px; margin-block-end: 28px; }
.lv-result__idle {
  padding: 26px 28px; border-radius: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}
.lv-result__idle p { margin: 0; opacity: 0.75; line-height: 1.6; }
.lv-result__idle .lv-result__idleTitle { margin-block-end: 6px; font-size: 20px; font-weight: 600; opacity: 1; }
.lv-result__card {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: stretch;
  padding: 14px; border-radius: 26px;
  color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 0%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--c) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: translate 0.4s var(--lv-ease), background 0.3s, box-shadow 0.4s;
}
.lv-result__card:hover { translate: 0 -4px; background: rgba(255, 255, 255, 0.11); box-shadow: 0 0 0 1px var(--c), 0 30px 60px -24px color-mix(in srgb, var(--c) 90%, transparent); }
.lv-result__photo { position: relative; overflow: hidden; border-radius: 16px; min-block-size: 170px; }
.lv-result__photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 0.8s var(--lv-ease); }
.lv-result__card:hover .lv-result__photo img { scale: 1.08; }
.lv-result__photo::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 6px; background: var(--c); }
.lv-result__body { display: flex; flex-direction: column; gap: 8px; padding-block: 6px; padding-inline-end: 8px; }
.lv-result__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-amber); }
[lang="ar"] .lv-result__kicker { letter-spacing: 0; font-size: 14px; }
.lv-result__name { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.05; }
[lang="ar"] .lv-result__name { line-height: 1.35; }
.lv-result__blurb { font-size: 15px; line-height: 1.55; opacity: 0.8; }
[lang="ar"] .lv-result__blurb { line-height: 1.85; }
.lv-result .lv-chips > span { background: color-mix(in srgb, var(--c) 35%, rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--c) 70%, transparent); color: #fff; }
.lv-result__cta { margin-block-start: auto; font-weight: 600; font-size: 15px; }
.lv-result__cta i { display: inline-block; font-style: normal; transition: translate 0.3s var(--lv-ease); }
.lv-result__card:hover .lv-result__cta i { translate: 6px 0; }
[dir="rtl"] .lv-result__card:hover .lv-result__cta i { translate: -6px 0; }

.lv-wheel { position: relative; inline-size: 100%; max-inline-size: 620px; margin-inline: auto; }
.lv-wheel__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.lv-wheel__svg:focus-visible { outline: 2px solid var(--lv-amber); outline-offset: 8px; border-radius: 24px; }
.is-dragging .lv-wheel__svg { cursor: grabbing; }
.lv-wheel__legs { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.lv-wheel__rim { fill: none; stroke: #fff; stroke-width: 7; }
.lv-wheel__rim--in { stroke-width: 2.5; opacity: 0.55; }
.lv-wheel__spokes { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; }
.lv-wheel__lattice { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
.lv-wheel__hub { fill: var(--lv-red); stroke: #fff; stroke-width: 4; }
.lv-wheel__bulb { fill: var(--lv-amber); animation: lv-chase 1.6s linear infinite; animation-delay: calc(var(--i) * -0.1s); }
.is-dragging .lv-wheel__bulb { animation-duration: 0.5s; }
.is-flash .lv-wheel__bulb { animation: lv-blink 0.25s steps(2) 5; fill: #fff; }
@keyframes lv-chase { 0%, 100% { opacity: 0.25; } 12% { opacity: 1; } 40% { opacity: 0.25; } }
@keyframes lv-blink { 50% { opacity: 0.2; } }
.lv-cabin__hanger { fill: rgba(255, 255, 255, 0.9); }
.lv-cabin__roof { fill: #fff; }
.lv-cabin__body { fill: var(--c); stroke: rgba(255, 255, 255, 0.9); stroke-width: 2.5; transition: filter 0.4s; }
.lv-cabin__win { fill: rgba(255, 255, 255, 0.22); }
.lv-cabin__num { fill: #fff; font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; font-family: inherit; letter-spacing: 0.04em; }
.lv-cabin.is-winner .lv-cabin__body { filter: drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 4px #fff); }
.lv-wheel__flag { fill: var(--lv-red); stroke: #fff; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 4px 10px rgba(255, 0, 0, 0.6)); }
.lv-wheel__hint {
  position: absolute; inset-block-end: -34px; inset-inline: 0;
  margin: 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); pointer-events: none;
  transition: opacity 0.5s;
}
[lang="ar"] .lv-wheel__hint { letter-spacing: 0; font-size: 14px; }
.is-touched .lv-wheel__hint { opacity: 0; }

/* ---------- Word band ---------- */

.lv-band { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 90px); background: #fff; }
.lv-band__row { overflow: hidden; transform-origin: 50% 50%; }
.lv-band__row--red { background: var(--lv-red); color: #fff; rotate: -2.5deg; margin-inline: -4%; padding-block: 14px; position: relative; z-index: 1; box-shadow: 0 20px 40px -20px rgba(255, 0, 0, 0.5); }
.lv-band__row--ink { rotate: 1.8deg; margin-inline: -4%; margin-block-start: -6px; padding-block: 12px; color: var(--lv-ink); background: var(--lv-card); }
.lv-band__track { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); inline-size: max-content; will-change: translate; }
.lv-band__track span { font-size: clamp(40px, 7vw, 108px); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.lv-band__row--ink .lv-band__track span { color: transparent; -webkit-text-stroke: 1.5px var(--lv-ink); }
[lang="ar"] .lv-band__row--ink .lv-band__track span { color: var(--lv-ink); -webkit-text-stroke: 0; opacity: 0.85; }
.lv-band__glyph { flex: none; inline-size: clamp(34px, 5vw, 72px); block-size: auto; fill: none; stroke: currentColor; stroke-width: 10; }
.lv-band__row--red .lv-band__glyph { animation: lv-spin 6s linear infinite; }
.lv-band__row--ink .lv-band__glyph { stroke: var(--lv-red); animation: lv-spin 9s linear infinite reverse; }
@keyframes lv-spin { to { rotate: 360deg; } }

/* ---------- Explore the zones: swipe through the village ---------- */

.lv-decksec { background: #fff; color: var(--lv-ink); }

.lv-deck { position: relative; z-index: 1; }
.lv-deck__head { margin-block-end: 22px; }
.lv-deck__title { margin: 0 0 14px; font-size: clamp(38px, 5.4vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -0.025em; }
[lang="ar"] .lv-deck__title { line-height: 1.3; letter-spacing: 0; }
.lv-deck .lv-lead { margin-block-end: 0; }

/* Zone filter chips */
.lv-deck__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: clamp(24px, 3vw, 40px); }
.lv-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--lv-ink); background: #fff; border: 1.5px solid rgba(26, 20, 16, 0.1);
  cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, translate 0.3s var(--lv-ease), box-shadow 0.3s;
}
.lv-filter i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c); }
.lv-filter b { font-size: 12px; padding: 2px 7px; border-radius: 999px; background: rgba(26, 20, 16, 0.07); }
.lv-filter:hover { translate: 0 -2px; border-color: var(--c, var(--lv-red)); }
.lv-filter.is-on { color: #fff; background: var(--c, var(--lv-ink)); border-color: var(--c, var(--lv-ink)); box-shadow: 0 10px 24px -12px var(--c, var(--lv-ink)); }
.lv-filter.is-on i { background: #fff; }
.lv-filter.is-on b { background: rgba(255, 255, 255, 0.22); }
.lv-filter:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 3px; }

.lv-deck__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lv-deck__play { display: grid; justify-items: center; gap: 58px; }

/* The stack */
.lv-stackwrap { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 44px); inline-size: 100%; }
.lv-hint {
  flex: none; font-size: 15px; font-weight: 700; white-space: nowrap;
  padding: 10px 16px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(26, 20, 16, 0.1);
  box-shadow: 0 10px 24px -16px rgba(26, 20, 16, 0.5);
  transition: opacity 0.5s;
}
.lv-hint--skip { animation: lv-nudge-start 2.2s ease-in-out infinite; }
.lv-hint--keep { color: #fff; background: var(--lv-red); border-color: var(--lv-red); animation: lv-nudge-end 2.2s ease-in-out infinite; }
@keyframes lv-nudge-end { 50% { translate: 10px 0; } }
@keyframes lv-nudge-start { 50% { translate: -10px 0; } }
[dir="rtl"] .lv-hint--keep { animation-name: lv-nudge-start; }
[dir="rtl"] .lv-hint--skip { animation-name: lv-nudge-end; }
.lv-deck.is-played .lv-hint { opacity: 0; }
.lv-stack {
  position: relative; block-size: min(60vh, 560px); min-block-size: 420px; aspect-ratio: 4 / 5.2; max-inline-size: 100%;
  --lean: 0;
  touch-action: pan-y;
}
.lv-card {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 30px; background: #111; color: #fff;
  box-shadow: 0 30px 60px -30px rgba(26, 20, 16, 0.55), 0 0 0 1px rgba(26, 20, 16, 0.06);
  cursor: grab; user-select: none; -webkit-user-select: none;
  transform-origin: 50% 85%;
}
.lv-card.is-dragging { cursor: grabbing; box-shadow: 0 40px 80px -30px rgba(26, 20, 16, 0.7); }
.lv-card__media { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--c) 70%, #fff 0%) 0%, color-mix(in srgb, var(--c) 45%, #1a1410) 100%); } /* zone colour while the photo loads, never black */
.lv-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; transition: scale 1.2s var(--lv-ease); }
.lv-card[data-depth="0"] .lv-card__media img { scale: 1.06; }
.lv-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 22%, transparent 42%, rgba(0, 0, 0, 0.85) 82%),
              linear-gradient(0deg, color-mix(in srgb, var(--c) 45%, transparent), transparent 40%);
}
.lv-card__top { position: absolute; z-index: 2; inset-inline: 18px; inset-block-start: 18px; display: flex; justify-content: space-between; align-items: center; }
.lv-card__zone { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: var(--c); box-shadow: 0 6px 18px -6px var(--c); }
.lv-card__zone i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #fff; }
.lv-card__count { direction: ltr; unicode-bidi: isolate; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; padding: 7px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lv-card__body { position: absolute; z-index: 2; inset-inline: 24px; inset-block-end: 24px; }
.lv-card__name { margin: 0 0 8px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
[lang="ar"] .lv-card__name { line-height: 1.3; letter-spacing: 0; }
.lv-card__line { margin: 0; font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; line-height: 1.4; opacity: 0.95; }
[lang="ar"] .lv-card__line { line-height: 1.8; }
.lv-card__full { margin: 0; max-block-size: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.55; transition: max-block-size 0.5s var(--lv-ease), opacity 0.4s, margin 0.4s; }
[lang="ar"] .lv-card__full { line-height: 1.85; }
.lv-card.is-open .lv-card__full { max-block-size: 220px; opacity: 0.9; margin-block-start: 10px; }
.lv-card.is-open::after { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 18%, rgba(0,0,0,.9) 60%); }
.lv-card__more { margin-block-start: 12px; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer; }
.lv-card__more:hover { background: rgba(255, 255, 255, 0.28); }
.lv-card[data-depth="1"] .lv-card__body, .lv-card[data-depth="2"] .lv-card__body, .lv-card[data-depth="1"] .lv-card__top, .lv-card[data-depth="2"] .lv-card__top { opacity: 0; }
.lv-card.is-kept .lv-card__zone::after { content: "♥"; margin-inline-start: 2px; }

/* KEEP / NEXT stamps */
.lv-card__stamp {
  position: absolute; z-index: 3; inset-block-start: 74px;
  padding: 8px 18px; border-radius: 14px; border: 4px solid currentColor;
  font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; pointer-events: none; background: rgba(0, 0, 0, 0.15);
}
[lang="ar"] .lv-card__stamp { letter-spacing: 0; }
.lv-card__stamp--keep { inset-inline-start: 22px; color: #fff; background: var(--lv-red); border-color: #fff; rotate: -14deg; }
.lv-card__stamp--skip { inset-inline-end: 22px; color: #fff; rotate: 14deg; }

/* Done card */
.lv-card--done { display: grid; place-items: center; background: var(--lv-red); cursor: default; }
.lv-card--done::after { display: none; }
.lv-card__device { position: absolute; inset: -20%; inline-size: 140%; opacity: 0.18; animation: lv-spin 60s linear infinite; }
.lv-card--done .lv-card__body { position: relative; inset: auto; padding: 32px; text-align: center; }
.lv-card--done .lv-actions { justify-content: center; margin-block-start: 22px; }
.lv-card--done .btn--primary { background: #fff; color: var(--lv-red); }

/* Controls */
.lv-deck__controls { display: flex; align-items: center; gap: 16px; }
.lv-ctl {
  display: grid; place-items: center; inline-size: 68px; block-size: 68px; border-radius: 50%; padding: 0;
  background: #fff; border: 1.5px solid rgba(26, 20, 16, 0.1); cursor: pointer;
  box-shadow: 0 16px 30px -16px rgba(26, 20, 16, 0.5);
  transition: translate 0.3s var(--lv-ease), scale 0.2s, box-shadow 0.3s, background 0.25s;
}
.lv-ctl svg { inline-size: 28px; block-size: 28px; fill: none; stroke: var(--lv-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lv-ctl:hover { translate: 0 -3px; }
.lv-ctl:active { scale: 0.92; }
.lv-ctl:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 3px; }
.lv-ctl--small { inline-size: 50px; block-size: 50px; }
.lv-ctl--small svg { inline-size: 20px; block-size: 20px; }
.lv-ctl--keep { background: var(--lv-red); border-color: var(--lv-red); box-shadow: 0 16px 30px -12px rgba(255, 0, 0, 0.6); }
.lv-ctl--keep svg { stroke: #fff; fill: #fff; }
.lv-ctl--keep:hover { box-shadow: 0 22px 40px -12px rgba(255, 0, 0, 0.7); }
/* While you drag, the button for where the card is heading swells. */
.lv-deck { --lean: 0; }
.lv-ctl--keep { scale: calc(1 + max(0, var(--lean)) * 0.25); }
.lv-ctl--skip { scale: calc(1 + max(0, var(--lean) * -1) * 0.25); }

/* My Liwa night */
.lv-tray {
  position: sticky; inset-block-start: 110px;
  padding: 24px; border-radius: 28px;
  background: #fff; border: 1px solid rgba(26, 20, 16, 0.08);
  box-shadow: 0 30px 60px -40px rgba(26, 20, 16, 0.45);
}
.lv-tray__head { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; padding: 0; margin: 0 0 14px; font: inherit; color: inherit; background: none; border: 0; cursor: default; text-align: start; }
.lv-tray__title { font-size: 22px; font-weight: 600; }
.lv-tray__count { display: grid; place-items: center; min-inline-size: 38px; block-size: 38px; padding-inline: 8px; border-radius: 999px; font-size: 16px; color: #fff; background: var(--lv-red); }
.lv-tray__meter { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; font-size: 13px; font-weight: 600; opacity: 0.8; }
.lv-tray__dots { display: flex; gap: 5px; }
.lv-tray__dots i { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2px solid var(--c); background: transparent; transition: background 0.3s, scale 0.3s var(--lv-ease); }
.lv-tray__dots i.on { background: var(--c); scale: 1.1; }
.lv-tray.is-complete .lv-tray__zones { color: var(--lv-red); }
.lv-tray__scroll {
  max-block-size: min(360px, 42vh); overflow-y: auto; overscroll-behavior: contain;
  margin-inline: -6px; padding-inline: 6px; scrollbar-width: thin;
  --fade-top: 0px; --fade-bottom: 0px;
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
}
.lv-tray__scroll.has-above { --fade-top: 28px; }
.lv-tray__scroll.has-below { --fade-bottom: 36px; }
.lv-tray__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lv-tray__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px; padding-inline-end: 10px; border-radius: 14px; background: var(--lv-card); border-inline-start: 4px solid var(--c); }
.lv-tray__list img { inline-size: 52px; block-size: 52px; border-radius: 10px; object-fit: cover; }
.lv-tray__list b { display: block; font-size: 15px; line-height: 1.25; }
.lv-tray__list small { font-size: 12px; opacity: 0.6; }
.lv-tray__list button { inline-size: 28px; block-size: 28px; border-radius: 50%; border: 0; background: rgba(26, 20, 16, 0.07); font-size: 18px; line-height: 1; cursor: pointer; color: inherit; }
.lv-tray__list button:hover { background: var(--lv-red); color: #fff; }
.lv-tray__empty { margin: 0; padding: 18px; border-radius: 16px; border: 1.5px dashed rgba(26, 20, 16, 0.18); font-size: 14px; line-height: 1.55; opacity: 0.75; }
.lv-tray.has-items .lv-tray__empty { display: none; }
.lv-tray__actions { display: grid; gap: 10px; margin-block-start: 18px; }
.lv-tray__actions .btn { justify-content: center; }
.lv-tray:not(.has-items) .lv-tray__actions { opacity: 0.45; pointer-events: none; }

.lv-fly { position: fixed; z-index: 9998; object-fit: cover; pointer-events: none; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5); }

/* Share sheet: a preview of the picture, with save and share */
.lv-sheet {
  position: fixed; inset: 0; z-index: 9990;
  display: grid; place-items: center; padding: 20px;
  background: rgba(11, 11, 12, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lv-sheet__card {
  position: relative; display: grid; gap: 16px; justify-items: center;
  inline-size: min(460px, 100%); max-block-size: calc(100vh - 40px); overflow: auto;
  padding: 22px; border-radius: 28px; background: #fff; color: var(--lv-ink);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.lv-sheet__close {
  position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-end: 12px;
  inline-size: 40px; block-size: 40px; border-radius: 50%; border: 0;
  font-size: 24px; line-height: 1; color: #fff; background: rgba(11, 11, 12, 0.6); cursor: pointer;
}
.lv-sheet__close:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 2px; }
.lv-sheet__preview { display: grid; place-items: center; block-size: min(64vh, 640px); aspect-ratio: 4 / 5; max-inline-size: 100%; border-radius: 18px; overflow: hidden; background: var(--lv-night); }
.lv-sheet__preview img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.lv-sheet__spinner { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: var(--lv-red); animation: lv-spin 0.8s linear infinite; }
.lv-sheet__note { margin: 0; font-size: 15px; text-align: center; opacity: 0.7; }
.lv-sheet .lv-actions { justify-content: center; }

/* ---------- Keep the beat: the Ayyala ---------- */

.lv-ayyala { background: var(--lv-night); color: #fff; padding-block: clamp(48px, 6vh, 72px) clamp(36px, 5vh, 56px); isolation: isolate; --tempo: 0.65s; }
.lv-ayyala .lv-title { font-size: clamp(30px, 3.4vw, 52px); margin-block-end: 10px; }
.lv-ayyala .lv-eyebrow { margin-block-end: 10px; }
.lv-ayyala .lv-lead { font-size: clamp(15px, 1.15vw, 17px); max-inline-size: 40em; }
.lv-ayyala__bg { position: absolute; inset: 0; z-index: -1; }
.lv-ayyala__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.2; scale: var(--lv-s, 1.08); filter: blur(3px) saturate(1.1); }
.lv-ayyala__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--lv-night) 0%, rgba(11, 11, 12, 0.55) 40%, rgba(11, 11, 12, 0.8) 85%, var(--lv-night) 100%); }
.lv-ayyala .lv-eyebrow { color: var(--lv-amber); }
.lv-ayyala__copy { text-align: center; max-inline-size: 720px; margin-inline: auto; }
.lv-ayyala__copy .lv-lead { margin-inline: auto; margin-block-end: 0; }

.lv-ay { --glow: 0; }
.lv-ay[data-level="1"] { --glow: 0.25; } .lv-ay[data-level="2"] { --glow: 0.5; } .lv-ay[data-level="3"] { --glow: 0.75; } .lv-ay[data-level="4"] { --glow: 1; }


.lv-ay__stage { position: relative; max-inline-size: min(980px, calc((100svh - 430px) * 3.33)); margin: clamp(30px, 5vh, 60px) auto 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lv-ay__scene { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.lv-ay__floor { opacity: calc(0.35 + var(--glow) * 0.65); transition: opacity 0.6s; }
.lv-ay.is-beat .lv-ay__floor { animation: lv-ayfloor 0.4s ease-out; }
.lv-ay__stage::after { content: ""; position: absolute; inset: -10% -20% 0; pointer-events: none; background: radial-gradient(50% 60% at 50% 70%, rgba(255, 210, 122, 0.45), transparent 70%); opacity: 0; }
.lv-ay.is-beat .lv-ay__stage::after { animation: lv-ayflash 0.45s ease-out; }
@keyframes lv-ayflash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lv-ayfloor { 0% { opacity: 1; } }
.lv-ay__man, .lv-ay__lead { filter: brightness(calc(0.85 + var(--glow) * 0.15)) drop-shadow(0 0 calc(var(--glow) * 10px) rgba(255, 210, 122, 0.5)); transition: filter 0.6s; }
/* Waiting for the first beat: the line breathes and the canes rock gently. */
.lv-ay:not([data-level]) .lv-ay__arm, .lv-ay[data-level="0"] .lv-ay__arm { animation: lv-ayidle 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.3s); }
.lv-ay:not([data-level]) .lv-ay__head, .lv-ay[data-level="0"] .lv-ay__head { animation: lv-aybreathe 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); }
@keyframes lv-ayidle { from { rotate: -3deg; } to { rotate: 4deg; } }
@keyframes lv-aybreathe { 50% { translate: 0 1.5px; rotate: 2deg; } }
.lv-ay__bob, .lv-ay__arm, .lv-ay__head, .lv-ay__stick, .lv-ay__clash, .lv-ay__toss, .lv-ay__leadarm { transform-box: fill-box; }
.lv-ay__bob { transform-origin: 50% 100%; }
.lv-ay__arm { transform-origin: 0% 0%; }
.lv-ay__head { transform-origin: 50% 100%; }
.lv-ay__stick { transform-origin: 0% 0%; }
.lv-ay__leadarm { transform-origin: 0% 100%; }
.lv-ay__toss { transform-origin: 50% 50%; }

/* Every beat: canes up and down, a dip of the knees, drum sticks strike, the tus clash. */
.lv-ay__man.is-up .lv-ay__arm { animation: lv-caneup var(--tempo) var(--lv-ease); }
.lv-ay__man.is-up .lv-ay__bob { animation: lv-dip var(--tempo) ease-out; }
.lv-ay__man.is-up .lv-ay__stick { animation: lv-ayhit 0.25s ease-out; }
.lv-ay__man.is-up .lv-ay__plate--a { animation: lv-clash-a 0.3s ease-out; }
.lv-ay__man.is-up .lv-ay__plate--b { animation: lv-clash-b 0.3s ease-out; }
.lv-ay__lead.is-up .lv-ay__bob { animation: lv-dip var(--tempo) ease-out; }
@keyframes lv-caneup { 0% { rotate: 0deg; translate: 0 0; } 30% { rotate: -30deg; translate: 0 -30px; } 100% { rotate: 0deg; translate: 0 0; } }
@keyframes lv-dip { 0% { translate: 0 0; } 25% { translate: 0 -10px; } 50% { translate: 0 6px; scale: 1 0.97; } 100% { translate: 0 0; } }
@keyframes lv-ayhit { 40% { rotate: 24deg; } }
@keyframes lv-clash-a { 40% { translate: 14px 4px; } }
@keyframes lv-clash-b { 40% { translate: -14px 4px; } }

/* Level 2 up: the rows sway in opposite directions. Level 3: heads nod with the chant. */
.lv-ay[data-level="2"] .lv-ay__man--back .lv-ay__head, .lv-ay[data-level="3"] .lv-ay__man--back .lv-ay__head, .lv-ay[data-level="4"] .lv-ay__man--back .lv-ay__head,
.lv-ay[data-level="2"] .lv-ay__man--front .lv-ay__head, .lv-ay[data-level="3"] .lv-ay__man--front .lv-ay__head, .lv-ay[data-level="4"] .lv-ay__man--front .lv-ay__head { animation: lv-aysway calc(var(--tempo) * 4) ease-in-out infinite alternate; }
.lv-ay[data-level="2"] .lv-ay__man--front .lv-ay__head, .lv-ay[data-level="3"] .lv-ay__man--front .lv-ay__head, .lv-ay[data-level="4"] .lv-ay__man--front .lv-ay__head { animation-direction: alternate-reverse; }
.lv-ay[data-level="3"] .lv-ay__lead .lv-ay__head, .lv-ay[data-level="4"] .lv-ay__lead .lv-ay__head { animation: lv-aynod calc(var(--tempo) * 2) ease-in-out infinite; }
@keyframes lv-aysway { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes lv-aynod { 50% { rotate: 6deg; translate: 0 2px; } }

/* Level 4: the lead throws his cane, spinning, and catches it. */
.lv-ay__lead.is-toss .lv-ay__toss { animation: lv-aytoss 1.5s cubic-bezier(.3, .7, .4, 1); }
.lv-ay__lead.is-toss .lv-ay__leadarm { animation: lv-aythrow 1.5s ease-out; }
@keyframes lv-aytoss { 0% { translate: 0 0; rotate: 0deg; } 45% { translate: 0 -170px; rotate: 540deg; } 100% { translate: 0 0; rotate: 1080deg; } }
@keyframes lv-aythrow { 0%, 100% { rotate: 0deg; } 12% { rotate: -28deg; } 85% { rotate: -10deg; } }

.lv-ay__ripples { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lv-ay__ripples span { position: absolute; left: 50%; bottom: 0; inline-size: 120px; block-size: 40px; margin-left: -60px; border-radius: 50%; border: 2px solid rgba(255, 210, 122, 0.7); animation: lv-ayripple 0.9s ease-out forwards; }
@keyframes lv-ayripple { to { scale: 9 3; opacity: 0; } }

/* The drum you play */
.lv-ay__controls { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 48px); margin-block-start: 4px; }
.lv-ay__drum {
  position: relative; flex: none; display: grid; place-items: center;
  inline-size: clamp(110px, 11vw, 140px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.lv-ay__drumskin {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #f6e5c6, #e6c995 40%, #c9a066 72%, #9b7443);
  box-shadow: 0 0 0 9px #6b3d1c, 0 0 0 13px #F7902D, 0 0 calc(20px + var(--glow) * 60px) calc(var(--glow) * 20px) rgba(247, 144, 45, 0.55), 0 24px 40px -10px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.5s;
}
.lv-ay__drum b { position: relative; font-size: 22px; font-weight: 700; color: #5b3a1e; font-variant-numeric: tabular-nums; }
.lv-ay__drum.is-hit b { animation: lv-aycount 0.3s var(--lv-ease); }
@keyframes lv-aycount { 30% { scale: 1.4; } }
.lv-ay__drum::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 3px solid #FFD27A; opacity: 0; pointer-events: none; }
.lv-ay__drum.is-hit::after { animation: lv-ripple 0.6s var(--lv-ease); }
@keyframes lv-ripple { from { opacity: 1; scale: 0.9; } to { opacity: 0; scale: 1.5; } }
.lv-ay__drum.is-hit .lv-ay__drumskin { animation: lv-thump 0.25s var(--lv-ease); }
@keyframes lv-thump { 30% { scale: 0.9; filter: brightness(1.2); } }
.lv-ay__drum:focus-visible { outline: 3px solid #fff; outline-offset: 18px; }
.lv-ay__side { display: grid; gap: 14px; }
.lv-ay__status { margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; color: var(--lv-amber); max-inline-size: 26em; }

/* Short laptop screens: drop the intro paragraph so the whole performance fits on screen. */
@media (max-height: 800px) and (min-width: 901px) {
  .lv-ayyala { padding-block: 28px 24px; }
  .lv-ayyala .lv-lead { display: none; }
  .lv-ay__drum { inline-size: 100px; }
}

/* ---------- Falcon hunt ---------- */

.lv-falcon {
  position: absolute; z-index: 4; inset-inline-start: var(--x); inset-block-start: var(--y);
  inline-size: 44px; block-size: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  animation: lv-perch 5s ease-in-out infinite; animation-delay: var(--d);
}
.lv-falcon svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; fill: #F7902D; stroke: #fff; stroke-width: 2; paint-order: stroke; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); transition: scale 0.3s var(--lv-ease); }
[dir="rtl"] .lv-falcon svg { scale: -1 1; }
.lv-falcon:hover svg { scale: 1.35; }
[dir="rtl"] .lv-falcon:hover svg { scale: -1.35 1.35; }
.lv-falcon:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 4px; border-radius: 8px; }
@keyframes lv-perch { 0%, 70%, 100% { rotate: 0deg; translate: 0 0; } 76% { rotate: -10deg; translate: 0 -4px; } 82% { rotate: 6deg; } 88% { rotate: 0deg; translate: 0 0; } }

.lv-hud {
  position: fixed; z-index: 61; inset-block-end: 28px; inset-inline-start: 24px;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--lv-ink); background: #fff;
  box-shadow: 0 10px 30px rgba(26, 20, 16, 0.18), 0 0 0 1px rgba(26, 20, 16, 0.06);
  opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity 0.5s, translate 0.5s var(--lv-ease), background 0.3s;
}
.lv-hud.is-shown { opacity: 1; translate: 0 0; }
.lv-hud.is-done { background: #F7902D; color: #fff; }
.lv-hud__icon { display: block; inline-size: 30px; block-size: 20px; }
.lv-hud__icon svg, .lv-toast__icon svg { display: block; inline-size: 100%; block-size: 100%; fill: #F7902D; }
.lv-hud.is-done .lv-hud__icon svg { fill: #fff; }
[dir="rtl"] .lv-hud__icon svg, [dir="rtl"] .lv-toast__icon svg { scale: -1 1; }

.lv-toast {
  position: fixed; z-index: 9995; inset-block-start: 96px; inset-inline-start: 50%;
  display: flex; align-items: center; gap: 12px; max-inline-size: min(520px, calc(100vw - 32px));
  padding: 14px 20px; border-radius: 18px; color: #fff; background: var(--lv-ink);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.45);
  translate: -50% -20px; opacity: 0; pointer-events: none; transition: opacity 0.4s, translate 0.5s var(--lv-ease);
}
[dir="rtl"] .lv-toast { translate: 50% -20px; }
.lv-toast.is-shown { opacity: 1; translate: -50% 0; }
[dir="rtl"] .lv-toast.is-shown { translate: 50% 0; }
.lv-toast.is-big { background: #F7902D; }
.lv-toast.is-big .lv-toast__icon svg { fill: #fff; }
.lv-toast p { margin: 0; font-weight: 600; line-height: 1.4; }
.lv-toast__icon { flex: none; inline-size: 36px; block-size: 24px; }

/* Sparks from the cursor over the hero sky are drawn on the fireworks canvas. */

/* ---------- The village map ---------- */

/* The invitation: last section of the page */
.lv-maptease { background: #fff; color: var(--lv-ink); }
.lv-maptease__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lv-maptease__thumb {
  position: relative; display: block; padding: 0; border: 0; border-radius: 28px; overflow: hidden; cursor: pointer;
  background: #F7902D; box-shadow: 0 40px 70px -40px rgba(26, 20, 16, 0.45), 0 0 0 1px rgba(26, 20, 16, 0.06);
  transition: translate 0.5s var(--lv-ease), box-shadow 0.5s var(--lv-ease);
}
.lv-maptease__thumb img { display: block; inline-size: 100%; aspect-ratio: 690 / 510; object-fit: cover; transition: scale 0.8s var(--lv-ease); }
.lv-maptease__thumb > span {
  position: absolute; inset-block-end: 18px; inset-inline-start: 50%; translate: -50% 0; z-index: 1;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--lv-red);
  box-shadow: 0 12px 30px -10px rgba(255, 0, 0, 0.6); transition: scale 0.3s var(--lv-ease);
}
[dir="rtl"] .lv-maptease__thumb > span { translate: 50% 0; }
.lv-maptease__thumb:hover { translate: 0 -6px; box-shadow: 0 50px 80px -40px rgba(26, 20, 16, 0.55), 0 0 0 1px rgba(26, 20, 16, 0.06); }
.lv-maptease__thumb:hover img { scale: 1.04; }
.lv-maptease__thumb:hover > span { scale: 1.06; }
.lv-maptease__thumb:focus-visible { outline: 3px solid var(--lv-red); outline-offset: 4px; }

/* The map panel, over the page */
.lv-mapsec { position: fixed; inset: 0; z-index: 9980; display: flex; background: rgba(26, 20, 16, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--lv-ink); }
.lv-mapsec[hidden] { display: none; }
.lv-mapsec__inner { position: relative; flex: 1; margin: clamp(0px, 1.6vw, 20px); padding: clamp(16px, 2vw, 26px) clamp(16px, 2.6vw, 34px); border-radius: clamp(0px, 2vw, 28px); background: #fff; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.5); }
html.lv-map-open { overflow: hidden; }
.lv-map__title { margin: 0; font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; line-height: 1.1; }
[lang="ar"] .lv-map__title { line-height: 1.4; }
.lv-mapsec .lv-eyebrow { margin-block-end: 6px; }
.lv-mapsec__close { inline-size: 46px; block-size: 46px; border-radius: 50%; border: 0; font-size: 26px; line-height: 1; color: #fff; background: var(--lv-ink); cursor: pointer; transition: background 0.2s, rotate 0.3s var(--lv-ease); }
.lv-mapsec__close:hover { background: var(--lv-red); rotate: 90deg; }
.lv-mapsec__close:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 3px; }
.lv-map__toggles { align-items: center; }
.lv-map__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-block-end: 16px; }
.lv-map__bar .lv-map__chips { margin: 0; }
.lv-map__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-block-end: 18px; }
.lv-map__head .lv-lead { margin-block-end: 0; }
.lv-map__toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-tog {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--lv-ink); background: #fff; border: 1.5px solid rgba(26, 20, 16, 0.12);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.lv-tog b { display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border-radius: 999px; font-size: 12px; color: #fff; background: var(--lv-red); }
.lv-tog[aria-pressed="true"] { color: #fff; background: var(--lv-ink); border-color: var(--lv-ink); }
.lv-tog:focus-visible, .lv-layer:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 3px; }
.lv-map__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 10px; }
.lv-map__chips--layers { margin-block-end: 18px; }
.lv-layer {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--lv-ink); background: transparent; border: 1.5px dashed rgba(26, 20, 16, 0.22);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.lv-layer i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c); }
.lv-layer.is-on { background: var(--c); color: #fff; border-style: solid; border-color: var(--c); }
.lv-layer.is-on i { background: #fff; }

.lv-map { position: relative; max-inline-size: calc((100svh - 250px) * 690 / 510); margin-inline: auto; }
.lv-map__viewport {
  position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 690 / 510; inline-size: 100%;
  background: #F7902D; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 40px 80px -50px rgba(26, 20, 16, 0.5), 0 0 0 1px rgba(26, 20, 16, 0.06);
}
.lv-mapsec.is-zoomed .lv-map__viewport { touch-action: none; }
.lv-map__viewport:active { cursor: grabbing; }
.lv-map__world { position: absolute; top: 0; left: 0; inline-size: 100%; aspect-ratio: 690 / 510; transform-origin: 0 0; will-change: transform; }
.lv-map__img { display: block; inline-size: 100%; block-size: 100%; object-fit: fill; pointer-events: none; transition: filter 0.8s; }


/* Effects layer: the turning wheel, the zipline rider, the route. */
.lv-map__fx { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.lv-map__ferrisrot { animation: lv-spin 14s linear infinite; transform-box: view-box; transform-origin: 0 0; }
.lv-map__ferris circle { fill: #FFD27A; animation: lv-chase 1.6s linear infinite; animation-delay: calc(var(--i) * -0.1s); }
.lv-map__zip line { stroke: rgba(26, 20, 16, 0.6); stroke-width: 0.8; stroke-dasharray: 2 2; }
.lv-map__rider circle { fill: #FF0000; stroke: #fff; stroke-width: 1; }
.lv-map__rider path { stroke: #1A1410; stroke-width: 1.2; fill: none; }
.lv-map__rider { animation: lv-zip 5s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes lv-zip { 0% { transform: translate(151px, 272px); opacity: 0; } 8% { opacity: 1; } 80% { transform: translate(365px, 276px); opacity: 1; } 92%, 100% { transform: translate(365px, 276px); opacity: 0; } }
.lv-map__route { fill: none; stroke: #FF0000; stroke-width: 2.4; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }

/* Pins sit flat, stay a constant size when zoomed, and stand up in 3D. */
.lv-map__pins, .lv-map__layers, .lv-map__stops { position: absolute; inset: 0; pointer-events: none; }
.lv-pin, .lv-stop, .lv-fac { position: absolute; translate: -50% -50%; scale: calc(1 / var(--zs, 1)); transform-origin: 50% 50%; }
.lv-pin {
  pointer-events: auto; display: grid; place-items: center; inline-size: 34px; block-size: 34px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.lv-pin i { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--c); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: scale 0.3s var(--lv-ease); }
.lv-pin::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
.lv-pin span {
  position: absolute; inset-block-end: calc(100% - 2px); left: 50%; translate: -50% 4px;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--lv-ink); opacity: 0; pointer-events: none; transition: opacity 0.2s, translate 0.25s var(--lv-ease);
}
.lv-pin:hover span, .lv-pin:focus-visible span, .lv-pin.is-active span { opacity: 1; translate: -50% 0; }
.lv-pin:hover i, .lv-pin.is-active i { scale: 1.4; }
.lv-pin.is-active::before, .lv-pin:hover::before { animation: lv-ping 1.4s var(--lv-ease) infinite; opacity: 1; }
.lv-pin:focus-visible { outline: none; }
.lv-pin:focus-visible i { outline: 3px solid var(--lv-ink); outline-offset: 2px; }
.lv-pin--place i { inline-size: 10px; block-size: 10px; border-width: 2px; }
.lv-pin--outside i { background: #fff; border-color: var(--lv-red); inline-size: 16px; block-size: 16px; }
.lv-pin.is-dim { opacity: 0.35; }
.lv-pin.is-kept i { background: #fff; border-color: var(--c); }
.lv-pin.is-kept i::after { content: "♥"; display: block; font-size: 8px; line-height: 9px; text-align: center; color: var(--c); }
.lv-mapsec.is-route .lv-pin:not(.is-kept) { opacity: 0.55; }

.lv-fac { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 3px solid var(--c); background: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7); animation: lv-facpulse 1.6s var(--lv-ease) infinite; animation-delay: calc(var(--i) * 0.08s); }
@keyframes lv-facpulse { 0% { box-shadow: 0 0 0 0 var(--c), 0 0 0 4px rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 14px transparent, 0 0 0 4px rgba(255, 255, 255, 0.7); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 4px rgba(255, 255, 255, 0.7); } }

.lv-stop {
  pointer-events: auto; display: grid; place-items: center; inline-size: 30px; block-size: 30px; padding: 0;
  border-radius: 50%; border: 3px solid #fff; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--c);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); cursor: pointer;
  animation: lv-stopin 0.5s var(--lv-ease) both; animation-delay: var(--d, 0s);
}
.lv-stop--start { inline-size: auto; block-size: auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; background: var(--lv-ink); }
@keyframes lv-stopin { from { opacity: 0; scale: 0; } }

/* Zoom buttons */
.lv-map__zoom { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; display: grid; gap: 6px; z-index: 3; }
.lv-map__zoom button { inline-size: 40px; block-size: 40px; border-radius: 12px; border: 0; font: inherit; font-size: 20px; font-weight: 700; color: var(--lv-ink); background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); cursor: pointer; }
.lv-map__zoom button:hover { background: var(--lv-ink); color: #fff; }
.lv-map__zoom button:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 2px; }

/* Pin card */
.lv-pop {
  position: absolute; z-index: 4; inset-block-end: 16px; inset-inline-start: 16px; inline-size: min(340px, calc(100% - 32px));
  overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.lv-pop__close { position: absolute; z-index: 1; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 34px; block-size: 34px; border-radius: 50%; border: 0; font-size: 20px; color: #fff; background: rgba(11, 11, 12, 0.6); cursor: pointer; }
.lv-pop__img { aspect-ratio: 16 / 9; overflow: hidden; }
.lv-pop__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lv-pop__body { padding: 16px 18px 18px; }
.lv-pop__zone { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--c); }
.lv-pop h4 { margin: 10px 0 6px; font-size: 22px; font-weight: 600; line-height: 1.15; }
[lang="ar"] .lv-pop h4 { line-height: 1.4; }
.lv-pop p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; opacity: 0.75; }
[lang="ar"] .lv-pop p { line-height: 1.8; }
.lv-pop .lv-actions { gap: 8px; }
.lv-pop .btn { padding-block: 9px; font-size: 14px; }

/* Your route */
.lv-routebar {
  position: absolute; z-index: 3; inset-block-start: 14px; inset-inline-start: 14px; max-inline-size: min(520px, calc(100% - 90px));
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.45);
}
.lv-routebar > div { min-inline-size: 0; }
.lv-routebar__title { display: block; font-size: 15px; }
.lv-routebar__list { display: block; font-size: 13px; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-routebar .btn { flex: none; padding-block: 9px; font-size: 14px; }

/* Zone details under the map */
.lv-map__side:empty { display: none; }
.lv-map__side { margin-block-start: 18px; }
.lv-zonecard { padding: 22px; border-radius: 24px; background: #fff; border-inline-start: 6px solid var(--c); box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.4); }
.lv-zonecard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-block-end: 16px; }
.lv-zonecard__head > span { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; font-weight: 700; color: #fff; background: var(--c); }
.lv-zonecard__head > div { flex: 1 1 320px; }
.lv-zonecard h3 { margin: 0 0 4px; font-size: 26px; font-weight: 600; }
.lv-zonecard p { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.75; }
.lv-zonecard__list { display: flex; gap: 10px; overflow-x: auto; padding-block-end: 4px; scrollbar-width: thin; }
.lv-zonecard__item { flex: none; display: grid; gap: 8px; inline-size: 150px; padding: 0; border: 0; text-align: start; font: inherit; color: inherit; background: none; cursor: pointer; }
.lv-zonecard__item img, .lv-zonecard__item i { inline-size: 150px; block-size: 100px; border-radius: 14px; object-fit: cover; background: color-mix(in srgb, var(--c) 25%, #fff); transition: scale 0.3s var(--lv-ease); }
.lv-zonecard__item:hover img { scale: 1.04; }
.lv-zonecard__item b { font-size: 14px; }

/* ---------- Falcon hunt: invitation, counter, glow ---------- */

.lv-hunt {
  position: fixed; z-index: 9993; inset-block-end: 24px; inset-inline-start: 50%;
  display: flex; align-items: center; gap: 18px; inline-size: min(560px, calc(100vw - 32px));
  padding: 20px 22px; border-radius: 26px; color: #fff; background: var(--lv-ink);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  translate: -50% 140%; opacity: 0; transition: translate 0.7s var(--lv-ease), opacity 0.5s;
}
[dir="rtl"] .lv-hunt { translate: 50% 140%; }
.lv-hunt.is-shown { translate: -50% 0; opacity: 1; }
[dir="rtl"] .lv-hunt.is-shown { translate: 50% 0; }
.lv-hunt__bird { flex: none; display: grid; place-items: center; inline-size: 84px; block-size: 84px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 144, 45, 0.45), transparent 70%); }
.lv-hunt__bird svg { inline-size: 64px; fill: #F7902D; animation: lv-perch 2.4s ease-in-out infinite; }
[dir="rtl"] .lv-hunt__bird svg { scale: -1 1; }
.lv-hunt__kicker { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-amber); }
[lang="ar"] .lv-hunt__kicker { letter-spacing: 0; font-size: 14px; }
.lv-hunt h3 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.lv-hunt__body > p:not(.lv-hunt__kicker) { margin: 0 0 12px; font-size: 14px; line-height: 1.5; opacity: 0.8; }
.lv-hunt__later { padding: 8px 4px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; opacity: 0.7; background: none; border: 0; cursor: pointer; }
.lv-hunt__close { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; inline-size: 30px; block-size: 30px; border: 0; border-radius: 50%; font-size: 18px; color: #fff; background: rgba(255, 255, 255, 0.1); cursor: pointer; }

.lv-hud__btn { padding: 6px 11px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: #F7902D; cursor: pointer; }
.lv-hud__btn--icon { inline-size: 30px; padding: 6px 0; color: var(--lv-ink); background: rgba(26, 20, 16, 0.08); }
.lv-hud.is-done .lv-hud__btn[data-act="hint"] { display: none; }
.lv-hud.is-done .lv-hud__btn--icon { background: #fff; }
.lv-hud.is-shown { pointer-events: auto; }

.lv-falcon { inline-size: 54px; block-size: 36px; }
.lv-falcon__glow { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 122, 0.55), transparent 65%); opacity: 0; pointer-events: none; }
.lv-hunting .lv-falcon__glow { opacity: 1; animation: lv-falconglow 2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes lv-falconglow { 50% { scale: 1.35; opacity: 0.5; } }
.lv-falcon.is-hinted svg { animation: lv-hinted 0.5s ease-in-out 4; }
@keyframes lv-hinted { 50% { scale: 1.8; rotate: -12deg; } }
#mappanel .lv-map__world .lv-falcon { left: var(--x); right: auto; translate: -50% -50%; scale: calc(0.75 / var(--zs, 1)); z-index: 2; }

/* ---------- The brand pattern behind each section ---------- */

.lv-patterned { position: relative; isolation: isolate; }
.lv-patterned > .container { position: relative; z-index: 1; }
.lv-bgpat { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lv-bgpat img { position: absolute; inline-size: clamp(520px, 62vw, 1100px); block-size: auto; opacity: 0.07; }
.lv-bgpat img:first-child { inset-block-start: -18%; inset-inline-end: -22%; }
.lv-bgpat img:last-child { inset-block-end: -30%; inset-inline-start: -24%; inline-size: clamp(420px, 48vw, 860px); opacity: 0.05; }
/* Alternate sections swap sides, so the pattern weaves down the page. */
.lv-bgpat--alt img:first-child { inset-inline-end: auto; inset-inline-start: -22%; }
.lv-bgpat--alt img:last-child { inset-inline-start: auto; inset-inline-end: -24%; }
.lv-bgpat--night img { opacity: 0.1; }

/* ---------- Countdown ---------- */

.lv-count { background: var(--lv-card); color: var(--lv-ink); }
.lv-count__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lv-count__clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); perspective: 900px; }
.lv-count__unit { text-align: center; }
.lv-count__unit p { margin: 12px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
[lang="ar"] .lv-count__unit p { letter-spacing: 0; font-size: 15px; }
/* Each card is two halves; every half draws the full number and shows only its own half of it. */
.lv-flip {
  --h: clamp(84px, 9vw, 140px);
  position: relative; block-size: var(--h); direction: ltr;
  font-size: clamp(44px, 5.4vw, 88px); font-weight: 600; font-variant-numeric: tabular-nums; color: #fff;
  border-radius: 18px; box-shadow: 0 24px 40px -24px rgba(26, 20, 16, 0.6);
}
.lv-flip__top, .lv-flip__bottom, .lv-flip__leaf b {
  position: absolute; inset-inline: 0; block-size: 50%; overflow: hidden;
  background: var(--lv-ink); font: inherit;
}
.lv-flip__top, .lv-flip__leaf b:first-child { inset-block-start: 0; border-radius: 18px 18px 0 0; background: #2a221c; }
.lv-flip__bottom, .lv-flip__leaf b:last-child { inset-block-end: 0; border-radius: 0 0 18px 18px; }
.lv-flip__top::before, .lv-flip__bottom::before, .lv-flip__leaf b::before {
  content: attr(data-v); position: absolute; inset-inline: 0; block-size: 200%;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.lv-flip__top::before, .lv-flip__leaf b:first-child::before { inset-block-start: 0; }
.lv-flip__bottom::before, .lv-flip__leaf b:last-child::before { inset-block-start: -100%; }
.lv-flip__leaf { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.lv-flip__leaf b { backface-visibility: hidden; }
.lv-flip__leaf b:first-child { transform-origin: 50% 100%; }
.lv-flip__leaf b:last-child { transform-origin: 50% 0%; transform: rotateX(90deg); }
.lv-flip.is-flipping .lv-flip__leaf b:first-child { animation: lv-flip-top 0.3s ease-in both; }
.lv-flip.is-flipping .lv-flip__leaf b:last-child { animation: lv-flip-bottom 0.3s 0.3s ease-out both; }
.lv-flip:not(.is-flipping) .lv-flip__leaf { visibility: hidden; }
.lv-flip::after { content: ""; position: absolute; z-index: 2; inset-inline: 0; inset-block-start: 50%; block-size: 2px; margin-block-start: -1px; background: rgba(0, 0, 0, 0.5); }
.lv-count__unit:last-child .lv-flip__top, .lv-count__unit:last-child .lv-flip__leaf b:first-child { background: #ff2a2a; }
.lv-count__unit:last-child .lv-flip__bottom, .lv-count__unit:last-child .lv-flip__leaf b:last-child { background: var(--lv-red); }
@keyframes lv-flip-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes lv-flip-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* ---------- Cursor ---------- */

.lv-cursor { position: fixed; inset: 0; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.lv-cursor.is-on { opacity: 1; }
.lv-cursor__dot, .lv-cursor__ring { position: absolute; inset-block-start: 0; left: 0; border-radius: 50%; }
.lv-cursor__dot { inline-size: 8px; block-size: 8px; margin: -4px 0 0 -4px; background: var(--lv-red); translate: var(--x) var(--y); }
.lv-cursor__ring {
  display: grid; place-items: center;
  inline-size: 38px; block-size: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(255, 0, 0, 0.55);
  translate: var(--rx) var(--ry);
  transition: inline-size 0.35s var(--lv-ease), block-size 0.35s var(--lv-ease), margin 0.35s var(--lv-ease), background 0.3s, border-color 0.3s, scale 0.2s;
}
.lv-cursor__ring b { font-size: 13px; font-weight: 700; color: #fff; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.lv-cursor[data-mode="link"] .lv-cursor__ring { inline-size: 56px; block-size: 56px; margin: -28px 0 0 -28px; border-color: var(--lv-red); background: rgba(255, 0, 0, 0.08); }
.lv-cursor[data-mode="label"] .lv-cursor__ring { inline-size: 76px; block-size: 76px; margin: -38px 0 0 -38px; border-color: transparent; background: var(--lv-red); box-shadow: 0 10px 30px rgba(255, 0, 0, 0.4); }
.lv-cursor[data-mode="label"] .lv-cursor__ring b { opacity: 1; }
.lv-cursor[data-mode="label"] .lv-cursor__dot { opacity: 0; }
.lv-cursor.is-down .lv-cursor__ring { scale: 0.85; }

/* ---------- Back-to-top wheel ---------- */

.lv-ride {
  position: fixed; z-index: 60;
  inset-block-end: 24px; inset-inline-end: 24px;
  inline-size: 64px; block-size: 64px; padding: 0;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--lv-ink);
  box-shadow: 0 10px 30px rgba(26, 20, 16, 0.18), 0 0 0 1px rgba(26, 20, 16, 0.06);
  cursor: pointer;
  opacity: 0; translate: 0 16px; scale: 0.8; pointer-events: none;
  transition: opacity 0.5s var(--lv-ease), translate 0.5s var(--lv-ease), scale 0.5s var(--lv-ease), box-shadow 0.3s;
}
.lv-ride.is-shown { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.lv-ride:hover { box-shadow: 0 14px 36px rgba(255, 0, 0, 0.28), 0 0 0 1px rgba(255, 0, 0, 0.3); }
.lv-ride:focus-visible { outline: 2px solid var(--lv-red); outline-offset: 4px; }
.lv-ride__ring { position: absolute; inset: -2px; inline-size: calc(100% + 4px); block-size: calc(100% + 4px); rotate: -90deg; }
[dir="rtl"] .lv-ride__ring { scale: -1 1; }
.lv-ride__track, .lv-ride__fill { fill: none; stroke-width: 3; }
.lv-ride__track { stroke: rgba(26, 20, 16, 0.08); }
.lv-ride__fill { stroke: var(--lv-red); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: calc(201 * (1 - var(--p, 0))); }
.lv-mini { position: absolute; inset: 9px; inline-size: calc(100% - 18px); block-size: calc(100% - 18px); overflow: visible; }
.lv-mini__legs, .lv-mini__rim, .lv-mini__spokes { fill: none; stroke: currentColor; stroke-linecap: round; }
.lv-mini__legs, .lv-mini__rim { stroke-width: 9; }
.lv-mini__spokes { stroke-width: 5; opacity: 0.5; }
.lv-mini__rotor { transform-origin: 100px 92px; rotate: var(--a, 0deg); }
.lv-mini__cabin { transform: translate(var(--x), var(--y)) rotate(calc(-1 * var(--a, 0deg))); }
.lv-mini__cabin path { fill: var(--lv-red); }

/* ---------- Narrow screens ---------- */

@media (max-width: 720px) {
  /* Falcons never hang off the edge of the screen. */
  .lv-falcon { inset-inline-start: clamp(8px, var(--x), calc(100% - 52px)); inset-block-start: clamp(8px, var(--y), calc(100% - 44px)); }
  #mappanel .lv-map__world .lv-falcon { inset-inline-start: auto; inset-block-start: var(--y); }
  /* A slimmer falcon counter. */
  .lv-hud { gap: 6px; padding: 6px 8px 6px 8px; font-size: 14px; inset-block-end: 16px; }
  .lv-hud__icon { inline-size: 24px; block-size: 16px; }
  .lv-hud__btn { padding: 5px 9px; font-size: 12px; }
  .lv-hud__btn--icon { display: none; }
}

@media (max-width: 900px) {
  .lv-wheelsec__grid, .lv-count__inner { grid-template-columns: minmax(0, 1fr); }
  .lv-ay__scene { inline-size: 100%; margin-inline: 0; }
  .lv-ay__stage { margin-block-start: 50px; max-inline-size: none; }
  .lv-map__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .lv-filter, .lv-layer { flex: none; }
  .lv-map { max-inline-size: none; }
  .lv-maptease__grid { grid-template-columns: minmax(0, 1fr); }
  .lv-mapsec__inner { margin: 0; border-radius: 0; padding-inline: 14px; }
  .lv-map__head { flex-wrap: nowrap; align-items: center; }
  .lv-map__head .lv-eyebrow { display: none; }
  .lv-map__title { font-size: 20px; }
  .lv-map__viewport { aspect-ratio: 4 / 5; border-radius: 20px; }
  .lv-map__world { inline-size: 170%; }
  .lv-routebar { inset-block-start: 10px; inset-block-end: auto; inset-inline: 10px 60px; max-inline-size: none; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; }
  .lv-routebar__title { font-size: 13px; }
  .lv-routebar__list { display: none; }
  .lv-routebar .btn { padding: 7px 12px; font-size: 13px; }
  .lv-pop { inset-inline: 10px; inset-block-end: 10px; inline-size: auto; }
  .lv-hunt { gap: 12px; padding: 16px; }
  .lv-hunt__bird { inline-size: 60px; block-size: 60px; }
  .lv-hunt__bird svg { inline-size: 46px; }
  .lv-ayyala { padding-block: 32px 28px; }
  .lv-ayyala .lv-lead { display: none; }
  .lv-ay__controls { gap: 14px; align-items: center; }
  .lv-ay__drum { inline-size: 92px; }
  .lv-ay__drum b { font-size: 14px; }
  .lv-ay__side { gap: 10px; }
  .lv-ay__status { font-size: 15px; }
  .lv-ay__side .lv-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .lv-ay__side .btn, .lv-ay__side .lv-sound { justify-content: center; padding-block: 10px; font-size: 14px; }
  .lv-hud { inset-block-end: 18px; inset-inline-start: 16px; }
  .lv-wheel { order: -1; max-inline-size: 460px; }
  /* On phones only the wheel itself takes the drag; the page still scrolls around it. */
  .lv-wheel__svg { touch-action: pan-y; }
  .lv-result__card { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .lv-result__photo { min-block-size: 140px; }
  .lv-skyhint { inset-block-start: auto; inset-block-end: 42%; inset-inline-end: 16px; }
  .lv-deck__body { grid-template-columns: minmax(0, 1fr); }
  .lv-deck__filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .lv-filter { flex: none; }
  .lv-stack { block-size: auto; min-block-size: 0; inline-size: min(100%, 380px); margin-block-end: 34px; }
  .lv-hint { display: none; }
  .lv-tray { position: sticky; z-index: 5; inset-block-start: auto; inset-block-end: 12px; margin-inline-end: 64px; padding: 12px 16px; border-radius: 20px; box-shadow: 0 20px 40px -16px rgba(26, 20, 16, 0.45); }
  .lv-tray__head { margin: 0; cursor: pointer; }
  .lv-tray__title { font-size: 17px; }
  .lv-tray__inner { display: none; padding-block-start: 14px; }
  .lv-tray.is-open .lv-tray__inner { display: block; }
  .lv-tray__scroll { max-block-size: 40vh; }
  .lv-count__clock { gap: 8px; }
}
@media (max-width: 720px) {
  .lv-ride { inset-block-end: 16px; inset-inline-end: 16px; inline-size: 54px; block-size: 54px; }
  .lv-wheelsec .lv-actions .btn { flex: 1; }
}

/* ---------- Reduced motion: everything still works, nothing moves on its own ---------- */

@media (prefers-reduced-motion: reduce) {
  .lv-wheel__bulb, .lv-band__glyph, .lv-skyhint, .lv-skyhint i::after, .lv-card__device, .lv-hint, .lv-falcon, .lv-map__ferrisrot, .lv-map__rider, .lv-fac, .lv-falcon__glow, .lv-ay__head, .lv-ay__arm, .lv-ay__bob, .lv-ay__toss, .lv-ay__leadarm { animation: none !important; }
  .lv-wheel__bulb { opacity: 0.8; }
  .lv-settle { scale: 1; }
}

@media print {
  .lv-ride, .lv-fireworks, .lv-skyhint, .lv-band, .lv-confetti, .lv-cursor, .lv-bgpat, .lv-falcon, .lv-hud, .lv-toast { display: none; }
}

/* Trackpad swipes on the deck must not trigger the browser's back/forward gesture. */
.lv-stack { overscroll-behavior-x: contain; }