:root{
  --night:#0b1230; --night2:#1b1f4d; --lav:#c9b8ff;
  --cream:#f7ecdc; --sand:#efd9b8; --saffron:#e8873a; --rust:#b4532a; --brown:#3b2418;
  --pink:#ff3d8b; --purple:#6d28d9; --teal:#14c9b5; --sun:#ffd23f;
  --serif:"Fraunces", Georgia, serif;
  --hand:"Caveat", cursive;
  --mono:"Space Mono", ui-monospace, monospace;
  --sans:"DM Sans", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--night);color:#fff;overflow-x:hidden;line-height:1.5}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
[hidden]{display:none!important}

/* ---------- stars ---------- */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.15}}

/* ---------- GATE ---------- */
.gate{position:relative;min-height:100svh;display:grid;place-items:center;padding:32px 16px;
  background:radial-gradient(120% 80% at 50% 0%, #2a2f6e 0%, var(--night) 60%)}
.gate-inner{position:relative;width:100%;max-width:440px;text-align:center}
.gate-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lav);margin-bottom:18px;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.4}}
.pass{display:flex;flex-direction:column;background:#fffaf2;color:#1d1a2e;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);text-align:left;animation:floatIn 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes floatIn{from{transform:translateY(40px) rotate(-3deg);opacity:0}}
.pass-main{padding:20px 20px 16px}
.pass-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.pass-airline{font-weight:700;color:#c2185b;font-size:13px}
.pass-route{display:flex;justify-content:space-between;align-items:center;margin:18px 0 14px}
.pass-route .code{display:block;font-family:var(--serif);font-weight:900;font-size:44px;line-height:1}
.pass-route .city{font-size:12px;color:#6b6480}
.pass-route div:last-child{text-align:right}
.pass-plane{font-size:24px;color:#c2185b;animation:planeBob 2.4s ease-in-out infinite}
@keyframes planeBob{50%{transform:translate(6px,-4px)}}
.pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;border-top:1px dashed #d8cfe0;padding-top:14px}
.pass-grid label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8a83a0}
.pass-grid b{font-size:13px;line-height:1.25}
.pass-stub{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:#f3e9da;border-top:2px dashed #cdbfa9}
.pass-stub::before,.pass-stub::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--night)}
.pass-stub::before{left:-10px}.pass-stub::after{right:-10px}
.pass-stub span{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.2em;color:#c2185b}
.barcode{height:34px;flex:1;max-width:180px;background:repeating-linear-gradient(90deg,#1d1a2e 0 2px,transparent 2px 4px,#1d1a2e 4px 5px,transparent 5px 8px,#1d1a2e 8px 11px,transparent 11px 13px)}
.btn-board{margin-top:28px;width:100%;padding:18px;border-radius:999px;background:linear-gradient(90deg,#ff3d8b,#ff8a3d);
  font-weight:700;font-size:18px;color:#fff;box-shadow:0 12px 30px -8px rgba(255,61,139,.6);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.03)}}
.gate-hint{margin-top:14px;font-size:13px;color:#a9a6cc}
.gate.leaving .pass{animation:tearOff .9s ease-in forwards}
@keyframes tearOff{to{transform:translateY(-120vh) rotate(8deg)}}

/* ---------- shared chapter ---------- */
.chapter{position:relative;padding:72px 16px 96px;overflow:hidden}
.chapter > *{position:relative;max-width:720px;margin-left:auto;margin-right:auto}
.ch-head{text-align:center;margin-bottom:40px;min-height:60svh;display:flex;flex-direction:column;justify-content:center}
.ch-tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.ch-title{font-family:var(--serif);font-weight:900;font-size:clamp(52px,14vw,112px);line-height:.95;margin:14px 0 18px;letter-spacing:-.02em}
.ch-title em{font-style:italic;font-weight:400}
.ch-sub{font-family:var(--hand);font-size:26px;opacity:.9}
.ch-end{font-family:var(--serif);font-size:clamp(24px,6vw,36px);text-align:center;margin-top:64px;line-height:1.3}
.ch-end em{font-style:italic}

figure{margin:0 auto}
figure img{width:100%;height:auto;border-radius:6px}
figcaption{font-family:var(--hand);font-size:24px;line-height:1.15;margin-top:10px}
.hero-photo{margin:0 auto 48px;padding:12px 12px 18px;border-radius:10px}
.hero-photo img{aspect-ratio:4/5;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:48px auto}
.duo figure{padding:8px 8px 14px;border-radius:6px}
.duo img{aspect-ratio:3/4;object-fit:cover}
.duo figcaption{font-size:20px}
.tilt-l{transform:rotate(-2.5deg)} .tilt-r{transform:rotate(2deg);margin-top:40px}
@media (max-width:520px){ .duo figcaption{font-size:18px} }

.reveal{opacity:0;translate:0 40px;transition:opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;translate:0 0}

/* ---------- CH1 golden ---------- */
.ch1{background:linear-gradient(180deg,#fbe6c8 0%,var(--cream) 30%,#f6dcc0 70%,#e9b98f 100%);color:var(--brown)}
.ch1 .ch-tag{color:var(--rust)}
.ch1 .ch-title em{color:var(--saffron)}
.ch1 figure{background:#fffaf1;box-shadow:0 18px 40px -18px rgba(90,45,20,.45)}
.ch1 figcaption{color:var(--rust)}
.road{margin:0 auto 24px;padding:20px;border-radius:16px;background:rgba(255,255,255,.55)}
.road-label{font-family:var(--hand);font-size:24px;margin-bottom:14px}
.road-label span{font-family:var(--mono);font-size:14px;background:var(--saffron);color:#fff;padding:2px 8px;border-radius:6px}
.road-track{position:relative;height:44px;border-radius:999px;background:#4a3a33;overflow:hidden}
.road-track::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;translate:0 -50%;
  background:repeating-linear-gradient(90deg,#ffe08a 0 18px,transparent 18px 34px)}
.road-bike{position:absolute;top:50%;left:0;translate:0 -50%;font-size:28px;z-index:2;transform:scaleX(-1);transition:left .15s linear}
.road-end{position:absolute;right:8px;top:50%;translate:0 -50%;z-index:2;font-size:12px;color:#fff;font-weight:700;background:var(--rust);padding:3px 8px;border-radius:99px}
.big-chorus{text-align:center;font-family:var(--serif);font-weight:900;font-size:clamp(44px,12vw,92px);line-height:1;margin:72px auto}
.big-chorus span{display:block}
.big-chorus .soft{font-family:var(--hand);font-weight:500;font-size:clamp(26px,7vw,40px);margin:14px 0;color:var(--rust)}
.big-chorus .punch{font-style:italic;color:var(--saffron)}

/* ---------- CH2 night ---------- */
.ch2{background:linear-gradient(180deg,#0d0f2b 0%,var(--night2) 50%,#0b1230 100%);color:#eae6ff}
.ch2 .ch-tag{color:var(--lav)}
.ch2 .ch-title em{color:#9fe7ff}
.ch2 figure{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.ch2 figcaption{color:#cfe8ff}
.call{max-width:340px;margin:0 auto 56px;padding:28px 20px;border-radius:32px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.call-avatar{width:110px;height:110px;margin:0 auto 14px;border-radius:50%;padding:4px;background:conic-gradient(#9fe7ff,#c9b8ff,#ff7eb6,#9fe7ff);animation:spin 6s linear infinite}
.call-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;animation:spin 6s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
.call-name{font-size:22px;font-weight:700}
.call-status{font-family:var(--mono);font-size:14px;color:#8ff0b4}
.call-buttons{display:flex;justify-content:center;gap:18px;margin-top:22px}
.cb{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);font-size:22px}
.cb.end{background:#e5484d;rotate:135deg}
.zones{margin:0 auto 32px;text-align:center}
.zones-label{font-family:var(--hand);font-size:24px;margin-bottom:14px;color:var(--lav)}
.zones-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.zones-row div{padding:14px 6px;border-radius:14px;background:rgba(255,255,255,.06)}
.zones-row b{display:block;font-family:var(--mono);font-size:22px}
.zones-row span{font-size:11px;opacity:.7}
.zones-row .home{background:rgba(255,126,182,.18)}
.doodle{margin:56px auto 0;text-align:center}
.doodle-title{font-family:var(--hand);font-size:28px}
.doodle-sub{font-size:13px;opacity:.6;margin-bottom:14px}
#doodle{width:100%;aspect-ratio:10/7;border-radius:18px;background:#14183d;border:1px dashed rgba(255,255,255,.25);touch-action:none}
.doodle-tools{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:50%;background:var(--c);border:3px solid transparent}
.sw.on{border-color:#fff}
.tool{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.12);font-size:14px}

/* ---------- UTHO ---------- */
.utho{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 16px;
  background:#120a26;color:#fff;position:relative;overflow:hidden}
.utho::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,#ff3d8b,#6d28d9,#14c9b5,#ffd23f,#ff3d8b);opacity:.18;animation:spin 14s linear infinite}
.utho > *{position:relative}
.utho-small{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;max-width:320px}
.utho-big{font-family:var(--serif);font-weight:900;font-size:clamp(64px,20vw,160px);line-height:.9;margin:18px 0}
.utho-big span{color:var(--sun);display:inline-block;animation:shake .5s ease-in-out infinite}
@keyframes shake{25%{rotate:-4deg}75%{rotate:4deg}}
.utho-mid{font-size:22px}
.btn-utho{margin-top:30px;padding:20px 34px;border-radius:999px;background:var(--sun);color:#1b0f2e;font-weight:700;font-size:20px;
  box-shadow:0 0 0 0 rgba(255,210,63,.7);animation:ring 1.4s ease-out infinite}
@keyframes ring{to{box-shadow:0 0 0 24px rgba(255,210,63,0)}}
.utho-hint{margin-top:16px;font-family:var(--hand);font-size:22px;opacity:.8}

/* ---------- CH3 party ---------- */
.ch3{background:linear-gradient(160deg,#ff3d8b 0%,#a020c8 35%,#6d28d9 60%,#14a7b5 100%);color:#fff}
.ch3 .ch-tag{color:#ffe4f1}
.ch3 .ch-title em{color:var(--sun)}
.ch3 figure{background:#fff;color:#2a0f3a;box-shadow:0 20px 40px -18px rgba(30,0,60,.6)}
.ch3 figcaption{color:#7a1fa2}
.haww{font-family:var(--serif);font-style:italic;color:var(--sun)}
.ch3.party .ch-title{animation:bounce .6s ease-in-out infinite alternate}
@keyframes bounce{to{transform:translateY(-10px) scale(1.02)}}
.map{margin:0 auto 32px;padding:18px;border-radius:20px;background:rgba(20,0,40,.35);color:var(--sun)}
.map svg{width:100%;height:auto;overflow:visible}
.map .cities circle{fill:#fff}
.map .cities circle.home{fill:var(--sun)}
.map .cities text{fill:#fff;font-family:var(--mono);font-size:10px}
.map .cities .lit circle{fill:var(--sun)}
.map-label{color:#fff;font-family:var(--hand);font-size:22px;text-align:center;margin-top:8px}
.map-label b{font-family:var(--mono);font-size:14px;background:var(--sun);color:#2a0f3a;padding:2px 8px;border-radius:6px}
.kumbh{margin:48px auto;max-width:520px;padding:12px 12px 18px;border-radius:8px;transform:rotate(-1.5deg)}
.kumbh figcaption{font-size:28px;text-align:center}
.kumbh small{display:block;font-size:22px;color:#a3489b}
.exhibit{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;background:#ff3d8b;color:#fff;padding:2px 8px;border-radius:4px;margin-bottom:6px}
.marquee{max-width:none!important;margin:40px -16px;overflow:hidden;background:var(--sun);color:#2a0f3a;rotate:-2deg;padding:12px 0}
.marquee div{display:inline-block;white-space:nowrap;font-family:var(--serif);font-weight:900;font-size:28px;animation:scroll 14s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.roast-head{text-align:center;font-family:var(--serif);font-weight:700;font-size:28px;margin:48px auto 24px}
.roast-head small{display:block;font-family:var(--hand);font-weight:500;font-size:20px;opacity:.85}
.wall{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.pola{padding:8px 8px 14px;border-radius:4px;transform:rotate(var(--r));cursor:pointer;transition:transform .3s}
.pola:active{transform:rotate(0) scale(.97)}
.pola img{aspect-ratio:3/4;object-fit:cover}
.pola figcaption{font-size:18px}
.pola:last-child:nth-child(odd){grid-column:1/-1;max-width:60%}
.truth{margin:72px auto 0;text-align:center;padding:32px 20px;border-radius:24px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.truth p{font-family:var(--hand);font-size:24px}
.truth h3{font-family:var(--serif);font-weight:900;font-size:clamp(34px,9vw,56px);line-height:1.05;margin:12px 0;color:var(--sun)}
.truth .truth-sm{font-family:var(--sans);font-size:16px;opacity:.9}
.bubble{position:fixed;z-index:60;pointer-events:none;font-family:var(--serif);font-weight:900;font-size:28px;color:#fff;
  text-shadow:0 2px 0 #ff3d8b,0 4px 12px rgba(0,0,0,.3);animation:bub 1.2s ease-out forwards}
@keyframes bub{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}20%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}100%{transform:translate(-50%,-220%) scale(1);opacity:0}}

/* ---------- LANDING ---------- */
.landing{position:relative;padding:96px 16px 180px;text-align:center;
  background:linear-gradient(180deg,#14a7b5 0%,#8fd3e0 18%,#fde7d4 45%,#fff5ec 100%);color:#2b1d3a}
.landing > *{max-width:640px;margin-left:auto;margin-right:auto}
.land-tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#0b4b55}
.land-title{font-family:var(--serif);font-weight:900;font-size:clamp(56px,15vw,120px);line-height:1;margin:16px 0 36px}
.land-photo{padding:12px;background:#fff;border-radius:10px;box-shadow:0 30px 60px -24px rgba(40,20,60,.4)}
.land-photo img{border-radius:6px}
.land-line{font-family:var(--serif);font-size:clamp(28px,7vw,44px);line-height:1.2;margin:48px auto}
.land-line em{color:#c2185b}
.letter{text-align:left;background:#fffdf8;padding:28px 24px;border-radius:6px;box-shadow:0 20px 40px -20px rgba(40,20,60,.35);
  background-image:repeating-linear-gradient(#fffdf8 0 31px,#f0e4d6 31px 32px);font-family:var(--hand);font-size:26px;line-height:32px;color:#2b1d3a}
.letter p + p{margin-top:16px}
.letter .sign{text-align:right;color:#c2185b}
.land-last{font-family:var(--hand);font-size:30px;margin-top:48px}
.btn-replay{margin-top:28px;padding:14px 26px;border-radius:999px;background:#2b1d3a;color:#fff;font-weight:700}

/* ---------- PLAYER ---------- */
.player{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px;
  background:rgba(14,10,34,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1)}
.p-btn{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);font-size:16px}
.p-body{flex:1;min-width:0;cursor:pointer}
.p-title{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.p-line{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.p-next{font-size:12px;opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1em}
.p-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.15);margin-top:6px;overflow:hidden}
.p-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7eb6,#ffd23f)}

.sheet{position:fixed;inset:0;z-index:70;background:#0e0a22;color:#fff;display:flex;flex-direction:column}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.sheet-head p{font-family:var(--serif);font-weight:700;font-size:20px}
.sheet-head button{font-size:22px;width:40px;height:40px}
.sheet-body{position:relative;flex:1;overflow-y:auto;padding:24px 20px 50vh;max-width:640px;width:100%;margin:0 auto}
.sheet-body h4{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#ff7eb6;margin:28px 0 8px}
.sheet-body .ln{font-size:20px;line-height:1.35;padding:4px 0;opacity:.4;transition:opacity .3s, color .3s;cursor:pointer}
.sheet-body .ln.done{opacity:.6}
.sheet-body .ln.on{opacity:1;color:#ffd23f}
.sheet-body .note{font-style:italic;font-size:14px;opacity:.45}

.toast{position:fixed;left:50%;top:20px;translate:-50% -150%;z-index:80;padding:12px 18px;border-radius:14px;background:#fff;color:#2b1d3a;
  font-weight:700;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);transition:translate .4s cubic-bezier(.2,.8,.2,1);max-width:90vw;text-align:center}
.toast.show{translate:-50% 0}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}

/* tap-timing helper (?tap=1) */
.tapper{position:fixed;top:12px;right:12px;z-index:95;width:min(320px,calc(100vw - 24px));padding:12px;border-radius:14px;background:#fff;color:#111;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.tapper button{display:block;width:100%;margin-top:8px;padding:12px;border-radius:10px;background:#ff3d8b;color:#fff;font-weight:700}
.tapper textarea{width:100%;height:90px;margin-top:8px;font-family:var(--mono);font-size:11px}

@media (min-width:760px){
  .chapter{padding-top:96px}
  .duo{gap:40px}
  .wall{grid-template-columns:repeat(3,1fr)}
  .pola:last-child:nth-child(odd){grid-column:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}