@font-face{font-family:"Spray";src:url(/assets/fonts/spray-full.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Num";src:url(/assets/fonts/num.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mono";src:url(/assets/fonts/mono-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo Black";src:url(/assets/fonts/archivo-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Urban Spray";src:url(/assets/fonts/urban-spray.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Archivo Var";src:url(/assets/fonts/archivo-variable.woff2) format("woff2-variations"),url(/assets/fonts/archivo-variable.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"JBMono";src:url(/assets/fonts/jbmono-800.woff2) format("woff2");font-weight:800;font-display:swap}

@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.95}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes fog{0%,100%{transform:translateX(0)}50%{transform:translateX(70px)}}
@keyframes gglow{0%,100%{opacity:.35}50%{opacity:1}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#07090e;color:#e8ecf3;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button{font:inherit}
.root{--P:min(76vh,800px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;width:100%;height:100vh;height:100dvh;min-height:520px;overflow:hidden;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,#0a0716 0%,#150c28 34%,#0b0a14 40%,#07090e 100%)}
.root::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}

/* stage visibility: everything stage-specific starts hidden */
.world-wrap,.sky,.fair,.screen-glow,.screen-art,.screen-btn,.booth-scene,.glasses,.grab-btn,.p-back,.p-front,.hint,.grave-btn,.skip-btn,.bubble,.clock,.restart-btn{visibility:hidden;opacity:0}
[data-stage="0"] .world-wrap,[data-stage="0"] .sky,[data-stage="0"] .p-back,[data-stage="0"] .hint,[data-stage="0"] .grave-btn,[data-stage="0"] .skip-btn,
[data-stage="1"] .booth-scene,[data-stage="1"] .glasses,[data-stage="1"] .grab-btn,[data-stage="1"] .p-back,[data-stage="1"] .skip-btn,
[data-stage="2"] .fair,[data-stage="2"] .screen-glow,[data-stage="2"] .screen-art,[data-stage="2"] .screen-btn,[data-stage="2"] .p-front,[data-stage="2"] .bubble,[data-stage="2"] .clock,[data-stage="2"] .restart-btn{visibility:visible;opacity:1}

/* ---------- stage 0: 3D graveyard walk ---------- */
.world-wrap{position:absolute;inset:0;perspective:900px;perspective-origin:50% 38%;overflow:hidden}
.ground{position:absolute;left:0;right:0;top:38%;bottom:0;background:linear-gradient(180deg,#121118 0%,#1a1921 40%,#0c0c11 100%)}
.path{position:absolute;inset:0;clip-path:polygon(48.6% 0,51.4% 0,68% 100%,32% 100%);background:linear-gradient(180deg,rgba(66,62,70,.35) 0%,rgba(66,62,70,.6) 100%)}
.world{position:absolute;left:50%;top:38%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(0);will-change:transform}
.booth-far{position:absolute;left:0;top:0;width:900px;height:1125px;transform:translate3d(-450px,-771px,-5800px);filter:drop-shadow(0 0 40px rgba(245,185,62,.25))}
.stone{position:absolute;left:0;top:0;transform-origin:50% 100%}
.stone img{position:absolute;inset:0;width:100%;height:100%;display:block}
.stone img.shade{filter:brightness(0)}
.stone .txt{position:absolute;left:3%;right:13%;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.stone .rip{font-family:"JBMono",monospace;font-weight:800;letter-spacing:.3em;padding-left:.3em;color:#3a3548}
.stone .nm{font-family:"Archivo Var",sans-serif;font-weight:900;font-stretch:70%;line-height:.95;color:#17151d;text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 2px 0 rgba(255,255,255,.22);white-space:nowrap}
.stone .tg{font-family:"Urban Spray",cursive;line-height:1;transform:rotate(-6deg);white-space:nowrap;text-transform:uppercase}
.fog{position:absolute;left:-10%;right:-10%;top:30%;height:26%;pointer-events:none;background:radial-gradient(50% 50% at 35% 60%,rgba(200,200,220,.14),rgba(200,200,220,0) 70%),radial-gradient(45% 45% at 70% 55%,rgba(200,200,220,.1),rgba(200,200,220,0) 70%);animation:fog 12s ease-in-out infinite}
.ground-fade{position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;background:linear-gradient(180deg,rgba(7,9,14,0),rgba(7,9,14,.65))}
.sky{position:absolute;inset:0;transform-origin:50% 38%;pointer-events:none;will-change:transform,opacity}
.sky img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
.sky-vig{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 58%,transparent 55%,rgba(4,5,9,.6) 100%)}
.sky-top{position:absolute;left:0;right:0;top:0;height:min(40vh,340px);background:linear-gradient(180deg,rgba(5,6,10,.8) 0%,rgba(5,6,10,.4) 60%,rgba(5,6,10,0) 100%)}

/* ---------- Prophet back view ---------- */
.p-back{position:absolute;z-index:8;left:50%;bottom:-1vh;height:52vh;aspect-ratio:9/16;transform:translateX(-50%);transform-origin:50% 100%;cursor:default;transition:opacity .3s,visibility .3s}
.clip{position:absolute;inset:0;opacity:0;transition:opacity .12s linear}
.clip.on{opacity:1}
.clip video,.clip canvas,.clip .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.clip.live .poster{visibility:hidden}
.p-back.can{cursor:pointer}
.p-back.can:hover .clip{filter:brightness(1.15) drop-shadow(0 0 18px rgba(47,155,255,.45))}
.cta{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;z-index:30;display:none}
.p-back.can .cta{display:block}
.cta-btn{display:flex;flex-direction:column;align-items:center;padding:4px 10px;border:0;background:transparent;cursor:pointer}
.cta-btn:hover,.cta-btn:focus-visible{filter:brightness(1.2);outline:none}
.cta-k{font-family:"Spray",cursive;font-size:clamp(20px,2.2vw,34px);line-height:1;color:#ffd1dc;text-transform:uppercase;transform:rotate(-3deg);white-space:nowrap;text-shadow:0 0 12px rgba(225,29,72,.8),2px 2px 0 rgba(0,0,0,.85);margin-bottom:2px}
.cta-t{font-family:"Urban Spray","Spray",cursive;font-size:clamp(34px,4.2vw,64px);line-height:1;color:#e11d48;text-transform:uppercase;transform:rotate(-3deg);white-space:nowrap;text-shadow:0 0 22px rgba(225,29,72,.6),3px 3px 0 rgba(0,0,0,.85)}
.cta-a{font-family:"Archivo Var",sans-serif;font-weight:900;font-size:clamp(22px,2.2vw,32px);line-height:1;color:#e11d48;text-shadow:0 0 14px rgba(225,29,72,.7);animation:bob 2.6s ease-in-out infinite}

/* ---------- hint (stage 0 title) ---------- */
.hint{position:absolute;z-index:20;left:50%;top:clamp(96px,14vh,140px);transform:translateX(-50%) rotate(-2deg);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;pointer-events:none;transition:opacity .3s}
.hint-t{font-family:"Spray",cursive;font-size:clamp(48px,min(8vw,13vh),128px);line-height:.9;color:#e11d48;text-transform:uppercase;text-shadow:0 0 22px rgba(225,29,72,.5),3px 3px 0 rgba(0,0,0,.8);white-space:nowrap}
.hint-s{font-size:clamp(13px,1.4vw,17px);font-weight:600;letter-spacing:.12em;color:#e2e7f2;text-shadow:0 2px 10px #000,0 0 2px #000;white-space:nowrap}
.hint.walking .hint-t{font-size:clamp(30px,3.8vw,54px)}
.hint.walking .hint-s{display:none}

/* ---------- stage 1: booth ---------- */
.booth-scene{position:absolute;inset:0;z-index:6;pointer-events:none}
.booth-scene img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;display:block}
.booth-vig{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 50%,rgba(4,5,9,0) 50%,rgba(4,5,9,.6) 100%)}
.glasses{position:absolute;z-index:12;left:58%;top:52%;width:clamp(96px,16vw,220px);aspect-ratio:1;transform:translate(-50%,-50%);transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .9s ease-in,visibility .9s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.glasses:hover img{filter:brightness(1.2) drop-shadow(0 0 14px rgba(245,185,62,.7))}
.glasses img{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.glasses-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,185,62,.55),rgba(245,185,62,0) 75%);animation:gglow 2.6s ease-in-out infinite}
.glasses.got{pointer-events:none;transform:translate(-50%,-50%) scale(1.8) translateY(-30%);opacity:0}
.grab-btn{position:absolute;z-index:30;left:58%;top:calc(52% + 8vw + 12px);transform:translateX(-50%);padding:16px 26px;border:2px solid #F5B93E;background:rgba(7,9,14,.85);color:#FFE9A8;font-family:"Spray",cursive;font-size:22px;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:0 0 24px rgba(245,185,62,.45)}
.grab-btn:hover,.grab-btn:focus-visible{background:rgba(245,185,62,.18);outline:none}

/* ---------- stage 2: drive-in ---------- */
.fair{position:absolute;inset:0;pointer-events:none}
.fair img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.fair-vig{position:absolute;inset:0;background:radial-gradient(90% 75% at 55% 45%,rgba(5,6,10,0) 0%,rgba(5,6,10,.55) 100%),linear-gradient(180deg,rgba(5,6,10,.55) 0%,rgba(5,6,10,0) 22%,rgba(5,6,10,0) 70%,rgba(5,6,10,.6) 100%)}
.screen-glow{position:absolute;z-index:2;pointer-events:none;background:radial-gradient(closest-side,rgba(71,180,255,.55),rgba(71,180,255,.18) 55%,rgba(71,180,255,0) 100%)}
[data-stage="2"] .screen-glow{animation:pulse 2.6s ease-in-out infinite}
.screen-art{position:absolute;z-index:3;height:auto;pointer-events:none;filter:drop-shadow(0 0 30px rgba(71,180,255,.55))}
.screen-btn{position:absolute;z-index:4;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-4deg);padding:0}
.screen-btn:hover,.screen-btn:focus-visible{filter:brightness(1.25);outline:none}
.screen-btn .l1{font-family:"Spray",cursive;font-size:clamp(28px,3.6vw,58px);line-height:1;color:#dff4ff;text-transform:uppercase;text-shadow:0 0 12px #4db2ff,0 0 30px #2f9bff,2px 2px 0 rgba(0,0,0,.35);white-space:nowrap}
.screen-btn .l2{font-family:"Spray",cursive;font-size:clamp(60px,8vw,136px);line-height:1;color:#fff;text-transform:uppercase;text-shadow:0 0 16px #4db2ff,0 0 44px #2f9bff,0 0 80px rgba(47,155,255,.6),3px 3px 0 rgba(0,0,0,.35);white-space:nowrap}
.p-front{position:absolute;z-index:8;bottom:0;left:46%;height:var(--P);width:auto;transform:translateX(-50%);filter:drop-shadow(0 12px 26px rgba(0,0,0,.7));pointer-events:none;transition:opacity .6s,visibility .6s}

.bubble{position:absolute;z-index:22;right:calc(54% + var(--P) * .13 + 28px);bottom:min(calc(var(--P) * .93),calc(100% - 226px));max-width:min(calc(46% - var(--P) * .13 - 42px),520px);display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 24px 16px;background:#fff;border:4px solid #0b0a10;border-radius:22px;box-shadow:6px 6px 0 #000;font-family:"Archivo Black","Arial Black",sans-serif;font-style:italic;font-size:clamp(20px,2.6vw,42px);line-height:.95;color:#0b0a10;text-align:left;cursor:pointer;transform-origin:100% 80%;transition:transform .5s cubic-bezier(.3,1.35,.5,1),opacity .35s ease,visibility .35s}
.bubble:hover{box-shadow:8px 8px 0 #000}
.bubble:focus-visible{outline:3px solid #2f9bff;outline-offset:3px}
[data-stage="2"] .bubble{transform:scale(1) rotate(-2deg)}
[data-stage="2"] .bubble.out{transform:scale(.85) rotate(-6deg);opacity:0}
.bubble .b1,.bubble .b2{text-wrap:balance}
.bubble .b2{color:#e11d48}
.bubble .tail{position:absolute;right:-15px;bottom:26px;width:24px;height:24px;background:#fff;border-right:4px solid #0b0a10;border-bottom:4px solid #0b0a10;transform:rotate(-45deg)}

.clock{position:absolute;z-index:20;left:calc(clamp(14px,3vw,48px) + var(--sl));bottom:calc(clamp(16px,3.2vh,36px) + var(--sb));display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(440px,28vw);min-width:220px}
.clock-t{grid-column:1/-1;font-family:"Spray",cursive;font-size:clamp(16px,1.5vw,22px);color:#f5b93e;text-transform:uppercase;text-shadow:0 0 14px rgba(245,185,62,.45),2px 2px 0 rgba(0,0,0,.8);transform:rotate(-1.5deg);transform-origin:left}
.box{display:flex;flex-direction:column;align-items:center;gap:5px;padding:clamp(10px,1.6vw,18px) 4px;border:1px solid #2a2f42;background:rgba(7,9,14,.86)}
.num{font-family:"Num","Arial Black",Impact,sans-serif;font-size:clamp(24px,3.4vw,52px);font-weight:400;font-variant-numeric:tabular-nums;line-height:1;color:#2f9bff;text-shadow:0 0 20px rgba(47,155,255,.4)}
.num.hms{color:#e11d48;text-shadow:0 0 20px rgba(225,29,72,.5)}
.lbl{font-family:"Mono",ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.18em;color:#a7b2c4}
.restart-btn{position:absolute;z-index:40;bottom:calc(clamp(16px,3.2vh,36px) + var(--sb));right:calc(clamp(14px,3vw,40px) + var(--sr));padding:12px 16px;border:1px solid rgba(47,155,255,.45);background:rgba(7,9,14,.72);color:#2f9bff;font-family:"Mono",monospace;font-size:13px;font-weight:700;letter-spacing:.14em;cursor:pointer;white-space:nowrap}
.restart-btn:hover,.restart-btn:focus-visible{border-color:#2f9bff;outline:none}

/* ---------- header ---------- */
.mark{position:absolute;top:calc(14px + var(--st));left:calc(18px + var(--sl));z-index:41;margin:0;font-family:"Urban Spray","Spray",cursive;font-weight:400;font-size:clamp(24px,3.4vw,50px);line-height:normal;color:#2f9bff;text-shadow:0 0 24px rgba(47,155,255,.6),3px 4px 0 rgba(0,0,0,.7);transform:rotate(-2deg);text-transform:uppercase}
.mark a{color:inherit;text-decoration:none}
.nav{position:absolute;top:calc(14px + var(--st));right:calc(14px + var(--sr));z-index:41;display:flex;align-items:center;gap:10px;justify-content:flex-end}
.social{display:flex;gap:10px}
.social a{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border:1px solid rgba(47,155,255,.45);background:rgba(7,9,14,.72);color:#2f9bff;box-shadow:0 0 18px rgba(47,155,255,.25);transition:transform .15s,box-shadow .15s,border-color .15s}
.social a:hover,.social a:focus-visible{transform:translateY(-2px);border-color:#2f9bff;box-shadow:0 0 26px rgba(47,155,255,.55);outline:none}
.social svg{width:24px;height:24px;fill:currentColor}
.social a.buy{position:relative;border-color:#00c805;box-shadow:0 0 18px rgba(0,200,5,.35)}
.social a.buy:hover,.social a.buy:focus-visible{border-color:#00c805;box-shadow:0 0 28px rgba(0,200,5,.7)}
.social a.buy img{height:32px;width:auto;display:block}
.buy-lbl{position:absolute;top:100%;left:50%;transform:translateX(-50%) rotate(-3deg);margin-top:10px;white-space:nowrap;font-family:"Spray",cursive;font-size:15px;line-height:1;color:#00c805;text-shadow:0 0 12px rgba(0,200,5,.6),2px 2px 0 rgba(0,0,0,.85);text-transform:uppercase}
.ca{display:flex;align-items:center;gap:12px;height:54px;padding:0 16px;border:2px solid rgba(0,200,5,.55);background:rgba(7,9,14,.85);color:#e8ecf3;font:700 15px/1 "JBMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;cursor:pointer;white-space:nowrap;box-shadow:0 0 20px rgba(0,200,5,.35);transition:border-color .15s}
.ca-k,.ca-c{color:#00c805}.ca-c{border-left:1px solid rgba(0,200,5,.4);padding-left:12px}
.ca:hover,.ca:focus-visible{border-color:#00c805;outline:none}.ca.done .ca-c{color:#fff}
@media (min-width:1100px){[data-stage="2"] .nav{right:auto;left:50%;transform:translateX(-50%);justify-content:center}}

/* ---------- stage 0-1 footer ---------- */
.grave-btn{position:absolute;z-index:41;right:calc(clamp(10px,3vw,56px) + var(--sr));bottom:calc(clamp(8px,2vh,30px) + var(--sb));display:block;text-decoration:none;transform:rotate(-4deg);transform-origin:bottom right;transition:transform .15s ease;filter:drop-shadow(0 22px 30px rgba(0,0,0,.8))}
.grave-btn:hover,.grave-btn:focus-visible{transform:rotate(-2deg) translateY(-6px) scale(1.04);outline:none}
.grave-btn img{width:clamp(130px,14vw,220px);height:auto;display:block}
.grave-enter{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-family:"Spray",cursive;font-size:clamp(16px,1.8vw,24px);color:#2f9bff;text-transform:uppercase;text-shadow:0 0 18px rgba(47,155,255,.6),2px 2px 0 rgba(0,0,0,.8);white-space:nowrap;pointer-events:none}
.skip-btn{position:absolute;z-index:41;left:calc(clamp(14px,3vw,40px) + var(--sl));bottom:calc(clamp(20px,5vh,48px) + var(--sb));height:64px;padding:0 28px;border:2px solid #fff;background:rgba(7,9,14,.8);color:#fff;font-family:"JBMono",monospace;font-size:20px;font-weight:800;letter-spacing:.16em;cursor:pointer;white-space:nowrap;box-shadow:0 0 18px rgba(255,255,255,.2)}
.skip-btn:hover,.skip-btn:focus-visible{background:rgba(255,255,255,.12);outline:none}
[data-stage="1"] .skip-btn{left:auto;right:clamp(14px,3vw,40px)}

.wipe{position:absolute;inset:0;z-index:80;pointer-events:none;background:#07090e;opacity:0;transition:opacity .5s ease}
.wipe.on{opacity:1}
@keyframes bootfade{to{opacity:0}}
.root.boot .wipe{opacity:1;transition:none;animation:bootfade .01s 3s forwards}

/* ---------- hype video modal ---------- */
.hype{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;background:rgba(3,4,8,.86)}
.hype[hidden]{display:none}
.hype-share{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;background:#2f9bff;color:#07090e;font:800 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.08em;text-decoration:none;box-shadow:0 0 24px rgba(47,155,255,.45)}
.hype-share svg{width:16px;height:16px;fill:currentColor}
.hype-box{position:relative;width:min(94vw,calc((100vh - 110px) * 16 / 9),1280px);aspect-ratio:16/9;background:#000;border:1px solid #2a2f42;box-shadow:0 0 60px rgba(47,155,255,.25)}
.hype-box video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.hype-x{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border:1px solid rgba(255,255,255,.35);background:rgba(7,9,14,.75);color:#fff;font-size:18px;line-height:1;cursor:pointer}

/* ---------- tablet ---------- */
@media (max-width:960px) and (min-height:521px){
  .nav{flex-direction:column;align-items:flex-end;gap:30px}
  .ca{order:2}.social{order:1}
}
@media (min-width:700px) and (orientation:portrait){.root{--P:min(50vh,600px)}}
/* ---------- phone ---------- */
@media (max-width:699px) and (orientation:portrait){
  .root{--P:min(40vh,380px)}
  [data-stage="0"] .p-back{left:46%}
  .mark{font-size:30px;left:14px;top:22px}
  .nav{top:18px;right:12px;gap:28px}
  .social{gap:8px}.social a{width:44px;height:44px}.social svg{width:21px;height:21px}.social a.buy img{height:26px}.buy-lbl{font-size:13px;margin-top:8px}
  .ca{height:auto;font-size:13px;padding:9px 11px;gap:9px}.ca .ca-c{padding-left:9px}
  .p-back{height:44vh}
  .hint{top:150px;width:94vw}
  .hint-t{font-size:clamp(34px,11vw,50px);white-space:normal}
  .hint-s{font-size:11px;white-space:normal;letter-spacing:.1em}
  .hint.walking .hint-t{font-size:30px}
  .cta-t{font-size:clamp(28px,9vw,40px)}.cta-k{font-size:clamp(17px,5vw,22px)}
  .skip-btn{height:46px;padding:0 16px;font-size:15px;bottom:calc(18px + var(--sb));left:12px}
  [data-stage="1"] .skip-btn{right:12px}
  .grave-btn img{width:min(28vw,112px)}
  .grab-btn{font-size:17px;padding:12px 16px}
  .p-front{left:26%;height:var(--P)}
  .bubble{right:12px;left:auto;bottom:calc(var(--P) * .62);max-width:58vw;font-size:clamp(16px,5vw,22px);padding:10px 14px 12px;border-width:3px;border-radius:16px;box-shadow:4px 4px 0 #000;transform-origin:0 100%}
  .bubble .tail{right:auto;left:-13px;bottom:18px;width:18px;height:18px;border-right:0;border-bottom:3px solid #0b0a10;border-left:3px solid #0b0a10;transform:rotate(45deg)}
  [data-stage="2"] .bubble{transform:scale(1) rotate(2deg)}
  .clock{left:10px;right:10px;width:auto;min-width:0;bottom:auto;gap:6px}
  .clock-t{font-size:15px}
  .box{padding:9px 2px}.num{font-size:clamp(22px,7.5vw,32px)}.lbl{font-size:8px;letter-spacing:.08em}
  .restart-btn{font-size:11px;padding:10px 12px;letter-spacing:.1em;right:10px;bottom:calc(12px + var(--sb))}
  .screen-btn .l1{font-size:clamp(22px,7vw,30px)}
  .screen-btn .l2{font-size:clamp(48px,15vw,72px)}
}
/* ---------- phone on its side ---------- */
@media (orientation:landscape) and (max-height:520px){
  .root{min-height:0;--P:86vh}
  .mark{font-size:24px;top:calc(8px + var(--st))}
  .nav{top:calc(8px + var(--st));gap:8px}
  .social{gap:6px}.social a{width:36px;height:36px}.social svg{width:18px;height:18px}.social a.buy img{height:22px}.buy-lbl{font-size:11px;margin-top:5px}
  .ca{height:36px;font-size:11px;padding:0 10px;gap:8px}.ca .ca-c{padding-left:8px}
  .hint{top:calc(54px + var(--st));gap:4px}
  .hint-t{font-size:clamp(28px,9vh,40px)}
  .hint-s{display:none}
  .hint.walking .hint-t{font-size:26px}
  .p-back{height:60vh}
  .cta-t{font-size:26px}.cta-k{font-size:16px}.cta-a{font-size:18px}
  .grave-btn img{width:84px}
  .grave-enter{font-size:13px}
  .skip-btn{height:36px;padding:0 14px;font-size:12px;bottom:calc(12px + var(--sb))}
  .glasses{width:min(110px,24vh)}
  .grab-btn{font-size:14px;padding:9px 14px}
  .p-front{left:48%}
  .bubble{font-size:clamp(15px,4.4vh,22px);padding:9px 14px 11px;border-width:3px;border-radius:16px;box-shadow:4px 4px 0 #000}
  .clock{width:min(300px,34vw);min-width:0;gap:5px;bottom:calc(10px + var(--sb))}
  .clock-t{font-size:13px}
  .box{padding:6px 2px;gap:3px}.num{font-size:22px}.lbl{font-size:7px;letter-spacing:.08em}
  .restart-btn{font-size:10px;padding:8px 10px;bottom:calc(10px + var(--sb))}
  .screen-btn .l1{font-size:clamp(18px,5vh,30px)}
  .screen-btn .l2{font-size:clamp(40px,12vh,72px)}
  .hype{gap:8px;padding:8px}
  .hype-share{padding:8px 14px;font-size:12px}
  .hype-box{width:min(94vw,calc((100vh - 64px) * 16 / 9))}
}
@media (prefers-reduced-motion:reduce){
  .fog,.cta-a,.glasses-glow,[data-stage="2"] .screen-glow{animation:none}
  .wipe,.bubble,.clip,.p-back,.p-front{transition:none}
}