/* =====================================================================
   landing.css — #home as a full-bleed landing page + app view over the
   three.js beach (js/home3d/*). Views: html[data-home-view='landing'|'app']
   (js/landing.js). Scene state: html[data-home3d='loading'|'on'|'off'].
   The wooden signpost menu itself lives in css/beach.css.
   Entrance motion animates transform/opacity only.
   ===================================================================== */

/* ---------------------------------------------------------------- frame */
/* #app is a 560px phone column for the game; the home screen goes edge to edge. */
#app:has(> #home:not(.hidden)) { max-width: none; border: 0; box-shadow: none; }

#home {
  --lp-ink: #fff;
  --lp-sun: #ffd84a;
  --lp-sun-2: #ffb21a;
  --lp-coral: #ff7a59;
  --lp-sea: #22b5d8;
  --lp-palm: #49c06f;
  --lp-brown: #3a1d07;
  --lp-glass: linear-gradient(160deg, rgba(255, 250, 242, 0.22), rgba(255, 236, 214, 0.06)), rgba(48, 22, 10, 0.26);
  --lp-glass-line: rgba(255, 255, 255, 0.32);
  --lp-shadow-text: 0 1px 2px rgba(40, 14, 0, 0.45), 0 2px 18px rgba(40, 14, 0, 0.4);
  --lp-gutter: clamp(16px, 5.5vw, 96px);
  --lnav-h: calc(64px + var(--safe-top));
}

/* ---------------------------------------------------------------- 3D scene host + CSS-beach crossfade */
.home3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.home3d canvas { display: block; width: 100%; height: 100%; }
html[data-home3d='on'] .home3d { opacity: 1; }
#home .beach-scene { transition: opacity 0.9s ease; }
html[data-home3d='on'] #home .beach-scene { opacity: 0; }
html[data-home3d='on'] #home .beach-scene.is-gone { display: none; }
html[data-home3d='on'] #home.beach { background: linear-gradient(180deg, #5d7fc4 0%, #f2a37c 45%, #f6d29a 100%); }

/* readability scrim: JS drives opacity from landing scroll (0 on the hero, 1 a screen down) */
.home-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(26, 12, 40, 0.25), transparent 70%),
    linear-gradient(180deg, rgba(34, 16, 28, 0.56), rgba(36, 16, 6, 0.72));
}
html[data-home-view='app'] .home-scrim { opacity: 0 !important; }

/* ---------------------------------------------------------------- view switching */
html[data-home-view='app'] #home #landing { display: none; }
html[data-home-view='landing'] #home #homeApp { display: none; }
#landing { animation: lpViewIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#homeApp { animation: lpAppIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#home.is-leaving #landing { opacity: 0; transform: translate3d(0, -16px, 0) scale(0.985); transition: opacity 0.26s ease, transform 0.26s ease; }
#home.is-leaving #homeApp { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.26s ease, transform 0.26s ease; }
@keyframes lpViewIn { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes lpAppIn { from { opacity: 0; } }

/* ================================================================ LANDING */
.landing {
  position: absolute; inset: 0; z-index: 2;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  color: var(--lp-ink);
  font-family: Fredoka, "Segoe UI", system-ui, sans-serif; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.landing button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.landing em { font-style: normal; }

/* ---------------------------------------------------------------- top nav */
.lnav {
  position: sticky; top: 0; z-index: 6; height: var(--lnav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: var(--safe-top) var(--lp-gutter) 0;
}
.lnav::before { /* glass bar that fades in once the page scrolls */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, rgba(48, 22, 30, 0.78), rgba(44, 20, 12, 0.62));
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 30px -10px rgba(30, 10, 0, 0.35);
  transition: opacity 0.3s ease;
}
.lnav.is-scrolled::before { opacity: 1; }

.lnav-brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 0; border-radius: 12px; }
.lmark { position: relative; display: inline-block; width: 34px; height: 38px; flex: none; }
.lmark i {
  position: absolute; top: 2px; width: 24px; height: 33px; border-radius: 4px;
  font-style: normal; font-family: Bangers, Impact, sans-serif; font-size: 18px; line-height: 33px; text-align: center;
  box-shadow: 0 3px 6px rgba(40, 14, 0, 0.35);
}
.lmark .lm-a { left: 0; background: #fffdf6; border: 1px solid #e8dcc6; transform: rotate(-12deg); }
.lmark .lm-a::after { content: "♥"; position: absolute; inset: 0; color: #d6332a; font-family: Georgia, serif; font-size: 15px; }
.lmark .lm-b { left: 10px; background: linear-gradient(160deg, #55d2f4, #1199cf); border: 1.5px solid #fff; color: #ffe14a; transform: rotate(9deg); -webkit-text-stroke: 1px #0b5a7d; }
.lnav-word {
  font-family: Bangers, Impact, sans-serif; font-size: 30px; letter-spacing: 2px; line-height: 1;
  color: #ffe14a; -webkit-text-stroke: 1.5px #5d3100;
  text-shadow: 0 3px 0 #c56f00, 0 6px 14px rgba(40, 14, 0, 0.45);
}

.lnav-links { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 18px); }
.lnav-link {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 999px;
  color: #fff; font-family: Fredoka, system-ui, sans-serif; font-weight: 600; font-size: 16px;
  text-shadow: var(--lp-shadow-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lnav-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(40, 14, 0, 0.5)); }
.lnav-link svg .dot { fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .lnav-link:hover { transform: translateY(-1px); } }

/* ---------------------------------------------------------------- buttons */
.lbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font-family: Fredoka, system-ui, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.2px;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.25s ease, opacity 0.2s;
}
.lbtn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lbtn-sun {
  color: #4a1f00;
  background: linear-gradient(180deg, #ffeb7a 0%, #ffcc2e 48%, #f8a90c 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65), inset 0 -3px 0 rgba(176, 82, 0, 0.35),
    0 1px 0 rgba(120, 50, 0, 0.4), 0 12px 26px -8px rgba(170, 70, 0, 0.75);
  text-shadow: 0 1px 0 rgba(255, 245, 200, 0.7);
}
.lbtn-glass {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 12px 26px -12px rgba(30, 10, 0, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  text-shadow: 0 1px 2px rgba(40, 14, 0, 0.5);
}
.lbtn-xl { height: 60px; padding: 0 30px; font-size: 20px; }
.lbtn:active { transform: translateY(2px) scale(0.97); transition-duration: 0.06s; }
@media (hover: hover) and (pointer: fine) {
  .lbtn:hover { transform: translateY(-2px); }
  .lbtn-sun:hover svg { transform: translateX(3px); }
  .lbtn svg { transition: transform 0.25s ease; }
}
.lbtn:focus-visible, .lnav-link:focus-visible, .lnav-brand:focus-visible, .lscroll:focus-visible,
.lfoot-links button:focus-visible, .app-back:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lnav-play { height: 42px; padding: 0 22px; font-size: 16px; margin-left: 4px; }

/* ---------------------------------------------------------------- hero */
.lhero {
  position: relative; min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * var(--lnav-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--lnav-h) var(--lp-gutter) calc(64px + var(--safe-bottom));
}
.lhero::before { /* contrast scrim under the copy; the scene stays bright up top */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(40, 18, 40, 0.34) 0, rgba(40, 18, 40, 0) 16%),
    linear-gradient(0deg, rgba(34, 14, 4, 0.78) 0, rgba(40, 16, 6, 0.55) 30%, rgba(40, 16, 6, 0) 62%);
}
.lhero-copy { position: relative; max-width: 660px; }
.lhero-copy > * { animation: lpRise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lhero-copy > :nth-child(1) { animation-delay: 0.1s; }
.lhero-copy > :nth-child(2) { animation-delay: 0.18s; }
.lhero-copy > :nth-child(3) { animation-delay: 0.3s; }
.lhero-copy > :nth-child(4) { animation-delay: 0.4s; }
.lhero-copy > :nth-child(5) { animation-delay: 0.5s; }
@keyframes lpRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } }

.lchip {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 7px 14px 7px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: #fff;
  background: rgba(30, 12, 4, 0.34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ldot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #5cf08a; box-shadow: 0 0 10px #5cf08a; }
.ldot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #5cf08a; animation: lpPing 2s ease-out infinite; }
@keyframes lpPing { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3); opacity: 0; } }

.lhero-title {
  margin: 0; font-family: Bangers, Impact, sans-serif; font-weight: 400;
  font-size: clamp(50px, 12.6vw, 124px); line-height: 0.92; letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(110, 40, 0, 0.42), 0 10px 34px rgba(40, 10, 0, 0.5);
}
.lhero-title > span { display: block; }
.lhero-title .lt-2 { margin-top: 0.06em; }
.lhero-title em {
  display: inline-block; color: #ffe14a;
  -webkit-text-stroke: 0.035em #5d3100; paint-order: stroke fill;
  text-shadow: 0 0.045em 0 #e08a00, 0 0.09em 0 #a85f00, 0 0.16em 0.3em rgba(40, 10, 0, 0.55);
  transform: rotate(-3deg); transform-origin: 0 70%;
}
.lhero-sub {
  margin: 16px 0 0; max-width: 32ch;
  font-size: clamp(18px, 2vw, 23px); line-height: 1.35; font-weight: 500;
  color: rgba(255, 255, 255, 0.96); text-shadow: var(--lp-shadow-text);
}
.lcta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.lproof { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); text-shadow: var(--lp-shadow-text); }
.lproof li { display: inline-flex; align-items: center; gap: 6px; }
.lproof li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #5cf08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.3l2.2 2.2 4.8-5' fill='none' stroke='%23123d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

.lscroll {
  position: absolute; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 10px;
  color: rgba(255, 255, 255, 0.86); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  text-shadow: var(--lp-shadow-text);
  animation: lpRise 0.8s 0.9s both;
}
.lscroll svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: lpBob 1.8s ease-in-out infinite; }
@keyframes lpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------------------------------------------------------------- sections */
.lsec { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--lp-gutter) 0; }
.lsec-head { max-width: 700px; margin: 0 auto clamp(26px, 4vw, 48px); text-align: center; }
.lkicker {
  display: inline-block; margin: 0 0 4px; font-family: Caveat, cursive; font-weight: 700; font-size: clamp(24px, 2.6vw, 30px); line-height: 1;
  color: var(--lp-sun); transform: rotate(-2deg); text-shadow: 0 2px 0 rgba(90, 30, 0, 0.5), 0 2px 14px rgba(40, 10, 0, 0.45);
}
.lsec-title, .lfinal h2 {
  margin: 0; font-family: Bangers, Impact, sans-serif; font-weight: 400; letter-spacing: 1.5px;
  font-size: clamp(44px, 7vw, 82px); line-height: 0.95; color: #fff;
  text-shadow: 0 3px 0 rgba(110, 40, 0, 0.4), 0 8px 30px rgba(40, 10, 0, 0.45);
}
.lsec-title em, .lfinal h2 em { color: #ffe14a; -webkit-text-stroke: 0.03em #5d3100; paint-order: stroke fill; text-shadow: 0 0.05em 0 #d07a00, 0 0.12em 0.3em rgba(40, 10, 0, 0.5); }
.lsec-sub { margin: 14px auto 0; max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.45; color: rgba(255, 255, 255, 0.92); text-shadow: var(--lp-shadow-text); }

/* scroll entrances (gated on html.lp-js so content is never hidden without JS) */
.lp-js .lreveal {
  opacity: 0; transform: translate3d(0, 34px, 0) scale(0.985);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.lp-js .lreveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- feature cards (frosted glass) */
.lgrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lcard {
  position: relative; overflow: hidden; border-radius: 26px;
  background: var(--lp-glass);
  box-shadow: inset 0 0 0 1px var(--lp-glass-line), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 30px 60px -28px rgba(30, 10, 0, 0.65);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.lcard-body { padding: 4px 22px 24px; }
.lcard h3 { margin: 12px 0 6px; font-family: Fredoka, system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.1; color: #fff; text-shadow: var(--lp-shadow-text); }
.lcard p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(40, 14, 0, 0.45); }

/* wooden tag: a little plank nailed to each card */
.ltag {
  position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 14px 0 16px;
  font-family: "Bree Serif", Georgia, serif; font-size: 14.5px; color: #4d2508;
  text-shadow: 0 1px 0 rgba(255, 230, 185, 0.8);
  clip-path: polygon(0 12%, 4% 0, 96% 4%, 100% 50%, 96% 100%, 3% 94%, 0 82%, 1.5% 50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.3' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.16 0 0 0 0 0.04 1.4 0 0 0 -0.52'/%3E%3C/filter%3E%3Crect width='200' height='40' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 40px,
    linear-gradient(180deg, rgba(255, 244, 214, 0.4), transparent 40%, rgba(70, 30, 5, 0.2)),
    linear-gradient(var(--tagpaint, transparent), var(--tagpaint, transparent)),
    linear-gradient(180deg, #f0c588, #d39b58 60%, #a96b33);
  transform: rotate(-1.5deg);
}
.ltag::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fbf6ea, #8a7d6e 60%, #4a3f33); }
.ltag-sea { --tagpaint: rgba(46, 160, 186, 0.22); }
.ltag-coral { --tagpaint: rgba(236, 110, 80, 0.22); transform: rotate(1.2deg); }
.ltag-sun { --tagpaint: rgba(250, 210, 80, 0.28); }
.ltag-palm { --tagpaint: rgba(80, 180, 100, 0.2); transform: rotate(1deg); }

/* card art */
.lart { position: relative; height: 150px; margin: 16px 16px 0; border-radius: 18px; overflow: hidden; }
.lart-seats { background: radial-gradient(120% 90% at 50% 120%, rgba(34, 181, 216, 0.4), rgba(34, 181, 216, 0.06) 70%), rgba(255, 255, 255, 0.06); }
.ltable {
  position: absolute; left: 50%; top: 50%; width: 170px; height: 76px; margin: -38px 0 0 -85px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 35%, #2fbfa4, #108a77 70%, #0b6a5c);
  box-shadow: 0 0 0 6px #a8693a, 0 0 0 8px #6b3a14, 0 16px 26px rgba(20, 8, 0, 0.45);
}
.ltable b { font-family: "Bree Serif", Georgia, serif; font-weight: 400; font-size: 16px; letter-spacing: 4px; color: #eafff9; padding: 3px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.18); border: 1px dashed rgba(255, 255, 255, 0.45); }
.lseat {
  position: absolute; z-index: 1; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  display: grid; place-items: center; font-family: Fredoka, sans-serif; font-weight: 700; font-size: 17px; color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(20, 8, 0, 0.4);
}
.lart-seats { --k: 1; }
.lseat.s1 { left: 50%; top: calc(50% - 52px * var(--k)); background: linear-gradient(160deg, #ff9a6b, #e25a3a); }
.lseat.s2 { left: calc(50% - 112px * var(--k)); top: 50%; background: linear-gradient(160deg, #7bd0ff, #2a8fd6); }
.lseat.s3 { left: calc(50% + 112px * var(--k)); top: 50%; background: linear-gradient(160deg, #9ce58a, #3aa55a); }
.lseat.s4 { left: 50%; top: calc(50% + 52px * var(--k)); }
.lcopy { display: none; }
.lseat.empty { background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); border: 0; color: #fff; font-size: 24px; font-weight: 600; }
.lcard.is-in .lseat.empty { animation: lpSeat 2.4s 1s ease-in-out infinite; }
@keyframes lpSeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.lart-chat { background: radial-gradient(120% 100% at 0% 0%, rgba(255, 122, 89, 0.32), rgba(255, 122, 89, 0.04) 70%), rgba(255, 255, 255, 0.06); }
.lbub {
  position: absolute; max-width: 72%; padding: 9px 14px; border-radius: 18px 18px 18px 6px;
  font-size: 15px; font-weight: 600; color: #3a1d07; background: #fffaf0; box-shadow: 0 8px 18px -6px rgba(30, 10, 0, 0.45);
}
.lbub.b1 { left: 16px; top: 22px; }
.lbub.b2 { right: 16px; top: 72px; border-radius: 18px 18px 6px 18px; color: #3d1d00; background: linear-gradient(180deg, #ffe46b, #ffc21a); }
.lreact { position: absolute; bottom: -6px; font-size: 26px; filter: drop-shadow(0 4px 6px rgba(30, 10, 0, 0.35)); }
.lreact.r1 { left: 18%; } .lreact.r2 { left: 34%; } .lreact.r3 { left: 50%; }
.lcard.is-in .lreact { animation: lpFloat 3.6s ease-in infinite; }
.lcard.is-in .lreact.r2 { animation-delay: 1.2s; }
.lcard.is-in .lreact.r3 { animation-delay: 2.4s; }
@keyframes lpFloat {
  0% { transform: translate3d(0, 10px, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate3d(8px, -110px, 0) scale(1.1); opacity: 0; }
}

.lart-coach { display: flex; align-items: center; gap: 14px; padding: 0 16px; background: radial-gradient(120% 100% at 100% 0%, rgba(255, 216, 74, 0.36), rgba(255, 216, 74, 0.04) 70%), rgba(255, 255, 255, 0.06); }
.lspark {
  flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; color: #6a3a00; background: radial-gradient(circle at 40% 35%, #fff6b8, #ffd84a 55%, #f0a20c);
  box-shadow: 0 0 0 5px rgba(255, 230, 120, 0.3), 0 0 30px rgba(255, 210, 80, 0.7);
}
.lcard.is-in .lspark { animation: lpGlow 2.8s ease-in-out infinite; }
@keyframes lpGlow { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(20deg); } }
.lhint { padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: #fffaf0; color: #3a1d07; font-size: 15px; line-height: 1.3; box-shadow: 0 8px 18px -6px rgba(30, 10, 0, 0.45); }
.lhint b { display: block; margin-bottom: 2px; font-family: Caveat, cursive; font-size: 20px; line-height: 1; color: #b25b00; }

.lart-lb { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding-bottom: 0; background: radial-gradient(120% 100% at 50% 0%, rgba(73, 192, 111, 0.3), rgba(73, 192, 111, 0.04) 70%), rgba(255, 255, 255, 0.06); }
.lpod { position: relative; width: 64px; border-radius: 10px 10px 0 0; display: flex; justify-content: center; padding-top: 8px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5); transform-origin: 50% 100%; }
.lpod i { font-style: normal; font-family: Bangers, Impact, sans-serif; font-size: 30px; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.lpod.p1 { height: 110px; background: linear-gradient(180deg, #ffe46b, #f2a90c); }
.lpod.p2 { height: 80px; background: linear-gradient(180deg, #eef3f7, #a9b6c2); }
.lpod.p3 { height: 60px; background: linear-gradient(180deg, #f3b07a, #c06a2a); }
.lpod.p1::before { content: "👑"; position: absolute; top: -34px; font-size: 26px; }
.lp-js .lcard .lpod { transform: scaleY(0.2); transition: transform 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) 0.35s; }
.lp-js .lcard .lpod.p1 { transition-delay: 0.5s; }
.lp-js .lcard .lpod.p3 { transition-delay: 0.6s; }
.lp-js .lcard.is-in .lpod { transform: none; }

/* ---------------------------------------------------------------- steps (wood boards) */
.lsteps { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lstep {
  position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 22px 18px; border-radius: 18px;
  color: #3a1d07;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' preserveAspectRatio='none'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.16 0 0 0 0 0.04 1.3 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='400' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 244, 214, 0.45), transparent 22%, transparent 78%, rgba(70, 30, 5, 0.22)),
    linear-gradient(180deg, #f6d29a, #e6b06a 60%, #c88a48);
  box-shadow: inset 0 2px 0 rgba(255, 238, 200, 0.7), inset 0 -3px 0 rgba(80, 36, 8, 0.3), 0 24px 40px -22px rgba(30, 10, 0, 0.7);
}
.lstep-n {
  flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-family: Bangers, Impact, sans-serif; font-size: 32px; line-height: 1; color: #fff;
  -webkit-text-stroke: 1px #5d3100; paint-order: stroke fill;
  background: radial-gradient(circle at 38% 32%, #ff9f7a, #e2532f 60%, #b23a1c);
  box-shadow: inset 0 2px 0 rgba(255, 220, 200, 0.6), 0 4px 0 #7a2810, 0 8px 14px rgba(60, 20, 0, 0.35);
}
.lstep:nth-child(2) .lstep-n { background: radial-gradient(circle at 38% 32%, #8fe0ff, #22a9d8 60%, #0a76a0); box-shadow: inset 0 2px 0 rgba(220, 245, 255, 0.6), 0 4px 0 #075473, 0 8px 14px rgba(0, 30, 60, 0.35); }
.lstep:nth-child(3) .lstep-n { background: radial-gradient(circle at 38% 32%, #fff2a0, #ffcf2e 60%, #e09a00); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 250, 220, 0.7), 0 4px 0 #9a5d00, 0 8px 14px rgba(60, 30, 0, 0.35); }
.lstep h3 { margin: 4px 0 6px; font-family: "Bree Serif", Georgia, serif; font-weight: 400; font-size: 23px; line-height: 1.1; color: #4d2508; text-shadow: 0 1px 0 rgba(255, 236, 200, 0.8); }
.lstep p { margin: 0; font-size: 16px; line-height: 1.45; color: #4a2a10; }

/* ---------------------------------------------------------------- final CTA + footer */
.lfinal {
  position: relative; max-width: 980px; margin: clamp(56px, 9vw, 110px) auto 0; padding: clamp(34px, 5vw, 60px) 22px;
  text-align: center; border-radius: 30px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255, 216, 74, 0.28), rgba(255, 122, 89, 0.12) 50%, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px var(--lp-glass-line), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 30px 60px -28px rgba(30, 10, 0, 0.65);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
@media (max-width: 1020px) { .lfinal { margin-left: var(--lp-gutter); margin-right: var(--lp-gutter); } }
.lfinal p { margin: 12px auto 0; max-width: 46ch; font-size: clamp(16px, 1.7vw, 19px); color: rgba(255, 255, 255, 0.92); text-shadow: var(--lp-shadow-text); }
.lfinal .lcta { justify-content: center; }

.lfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  max-width: 1240px; margin: clamp(48px, 7vw, 90px) auto 0;
  padding: 22px var(--lp-gutter) calc(26px + var(--safe-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 2px rgba(30, 10, 0, 0.5);
}
.lfoot-brand { display: inline-flex; align-items: center; gap: 10px; }
.lfoot-brand .lnav-word { font-size: 24px; }
.lfoot-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.lfoot-links button { padding: 8px 10px; border-radius: 10px; font-family: Fredoka, sans-serif; font-weight: 600; font-size: 15px; color: #fff; }
@media (hover: hover) and (pointer: fine) { .lfoot-links button:hover { text-decoration: underline; text-underline-offset: 4px; } }
.lfoot-fine { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }

/* ---------------------------------------------------------------- landing: phones */
@media (max-width: 699px) {
  .lnav-link { width: 42px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(30, 12, 4, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
  .lnav-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lnav-word { font-size: 26px; }
  .lnav-play { padding: 0 18px; }
  .lcta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .lbtn-xl { height: 56px; padding: 0 12px; font-size: 17.5px; gap: 8px; }
  .lbtn-xl svg { width: 20px; height: 20px; }
  .lhero { padding-bottom: calc(62px + var(--safe-bottom)); }
  .lscroll span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lscroll { bottom: calc(10px + var(--safe-bottom)); }
  .lhero-sub { margin-top: 12px; }
  .lproof { font-size: 13px; gap: 6px 14px; margin-top: 16px; }
}
@media (max-width: 359px) {
  .lnav-link { display: none; }
  .lcta { grid-template-columns: 1fr; }
}
@media (max-height: 700px) and (max-width: 699px) {
  .lproof, .lscroll { display: none; }
  .lhero { padding-bottom: calc(24px + var(--safe-bottom)); }
  .lchip { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------- landing: tablet / desktop */
@media (min-width: 760px) {
  .lgrid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .lcard-hero { grid-column: 1 / -1; }
  .lgrid > .lcard:last-child { grid-column: 1 / -1; }
  .lsteps { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .lstep { flex-direction: column; gap: 14px; padding: 26px 24px 28px; }
  .lart { height: 170px; }
}
@media (min-width: 1000px) {
  .lhero { justify-content: center; padding-top: calc(var(--lnav-h) + 6vh); padding-bottom: 12vh; }
  .lhero::before {
    background:
      linear-gradient(180deg, rgba(40, 18, 40, 0.34) 0, rgba(40, 18, 40, 0) 14%),
      radial-gradient(85% 95% at 0% 72%, rgba(34, 14, 4, 0.66) 0, rgba(40, 16, 6, 0.38) 45%, rgba(40, 16, 6, 0) 75%);
  }
  .lgrid { grid-template-columns: repeat(3, 1fr); }
  .lcard-hero { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
  .lcard-hero .lart { height: 320px; margin: 16px 0 16px 16px; }
  .lcard-hero .lcard-body { padding: 28px clamp(28px, 3.5vw, 56px); }
  .lcard-hero h3 { font-size: clamp(30px, 2.8vw, 40px); margin-top: 16px; }
  .lcard-hero p { font-size: 18px; max-width: 38ch; }
  .lgrid > .lcard:last-child { grid-column: auto; }
  .lcard-hero .lart-seats { --k: 1.45; }
  .lcard-hero .ltable { transform: scale(1.45); }
  .lcard-hero .lseat { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 21px; }
  .lcard-hero .ltable, .lcard-hero .lseat { translate: 0 -18px; }
  .lcard-hero .lcopy {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
    font-size: 14.5px; font-weight: 600; color: #fff; background: rgba(12, 60, 52, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 8px 18px -8px rgba(0, 0, 0, 0.5);
  }
  .lcard-hero .lcopy b { color: #7ff0b0; font-weight: 700; }
}

/* ================================================================ APP view chrome */
.app-bar {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-top)) 12px 0;
  pointer-events: none;
}
.app-back {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px;
  font-family: Fredoka, system-ui, sans-serif; font-weight: 600; font-size: 15px; color: #fff;
  background: rgba(40, 18, 6, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 6px 18px -8px rgba(30, 10, 0, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  text-shadow: 0 1px 2px rgba(30, 10, 0, 0.5);
  transition: transform 0.2s ease;
  touch-action: manipulation;
}
.app-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.app-back:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .app-back:hover { transform: translateX(-2px); } }

.app-pitch { display: none; }

/* a desktop scrim so the pitch copy reads over a bright sky */
@media (min-width: 900px) {
  #homeApp::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(70% 90% at 0% 100%, rgba(34, 14, 4, 0.55), rgba(34, 14, 4, 0) 70%),
      linear-gradient(180deg, rgba(40, 18, 40, 0.25), rgba(40, 18, 40, 0) 16%);
  }
  .app-pitch { display: block; color: #fff; max-width: 520px; }
  .app-kicker { margin: 0; font-family: Caveat, cursive; font-weight: 700; font-size: 30px; line-height: 1; color: var(--lp-sun); transform: rotate(-2deg); transform-origin: 0 50%; text-shadow: 0 2px 0 rgba(90, 30, 0, 0.5), 0 2px 14px rgba(40, 10, 0, 0.45); }
  .app-title { margin: 6px 0 0; font-family: Bangers, Impact, sans-serif; font-size: clamp(60px, 6.4vw, 96px); line-height: 0.92; letter-spacing: 1.5px; text-shadow: 0 3px 0 rgba(110, 40, 0, 0.42), 0 10px 34px rgba(40, 10, 0, 0.5); }
  .app-sub { margin: 16px 0 0; max-width: 34ch; font-family: Fredoka, sans-serif; font-weight: 500; font-size: 19px; line-height: 1.4; text-shadow: var(--lp-shadow-text); }
  .app-pitch > * { animation: lpRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .app-pitch > :nth-child(2) { animation-delay: 0.08s; }
  .app-pitch > :nth-child(3) { animation-delay: 0.16s; }
  .app-bar { padding: calc(18px + var(--safe-top)) clamp(24px, 5vw, 80px) 0; }
}

/* ---------------------------------------------------------------- quality + motion */
html[data-quality='low'] .lcard, html[data-quality='low'] .lfinal, html[data-quality='low'] .lnav::before,
html[data-quality='low'] .lbtn-glass, html[data-quality='low'] .lchip, html[data-quality='low'] .app-back {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-quality='low'] .lcard, html[data-quality='low'] .lfinal { background: rgba(60, 28, 14, 0.55); }

@media (prefers-reduced-motion: reduce) {
  #landing, #homeApp, .lhero-copy > *, .lscroll, .app-pitch > * { animation: none !important; }
  .lscroll svg, .ldot::after { animation: none !important; }
  .lcard.is-in .lreact, .lcard.is-in .lspark, .lcard.is-in .lseat.empty { animation: none !important; }
  .lreact { bottom: 14px; }
  .lp-js .lreveal, .lp-js .lcard .lpod { opacity: 1; transform: none; transition: none; }
  #home.is-leaving #landing, #home.is-leaving #homeApp { transition: none; }
  .home3d, #home .beach-scene { transition: none; }
}