/* Just Leave v6 — the player wears the teaser's clothes.
   Lettering: Chewy (closest match to the teaser's brushed condensed capitals).
   UI law (Cameron, taste-ledger 5939678d9810): minimal, transparent bubbles, the scene carries the moment. */
@font-face{font-family:"Chewy";src:url(fonts/chewy.woff2) format("woff2");font-display:block}
@font-face{font-family:"Patrick Hand";src:url(fonts/patrickhand.woff2) format("woff2");font-display:swap}

:root{
  --ink:#7a2430; --ink-deep:#4e1320; --cream:#fbf0dc; --amber:#f2a541; --orange:#f2561d;
  --violet:#3a1f63; --night:#120b1c; --glass:rgba(255,248,236,.16); --glass-edge:rgba(255,246,230,.55);
  --display:"Chewy","Luckiest Guy",ui-rounded,system-ui,sans-serif;
  --hand:"Patrick Hand",ui-rounded,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--night);color:var(--cream);overflow:hidden;-webkit-font-smoothing:antialiased;font-family:var(--hand)}
button{font:inherit;color:inherit}
#stage{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,#2a1640 0%,#120b1c 60%,#07040b 100%)}
#frame{position:relative;overflow:hidden;background:#000;
  width:min(100vw,calc(100dvh*9/16));height:min(100dvh,calc(100vw*16/9));
  box-shadow:0 30px 120px rgba(58,31,99,.55),0 0 0 1px rgba(255,255,255,.04);border-radius:clamp(0px,(100vw - 520px)*.04,22px)}
video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;background:#000}
video.on{opacity:1}
#grade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 85% at 50% 42%,transparent 55%,rgba(18,8,30,.42) 100%)}

.lettered{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;filter:url(#brush)}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:clamp(11px,2.6cqw,14px);color:rgba(251,240,220,.78)}
#frame{container-type:size}

/* ---------- the drink: only at a decision ---------- */
@keyframes sip{0%{transform:scale(1)}35%{transform:scale(1.18,.86)}70%{transform:scale(.94,1.06)}100%{transform:scale(1)}}
#liquid,#liquidTop{transition:y .5s cubic-bezier(.3,1.3,.5,1)}

/* ---------- the Social Battery badge: opaque, top-right, on every shot ----------
   Measured union of the baked badge on teaser + s01-s04 (480x854): x 365-462, y 0-127.
   This covers x 74%-98%, y 0-16% so no baked pixel ever shows. */
#badge{position:absolute;z-index:5;top:0;right:2%;width:24%;height:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqh;
  background:radial-gradient(120% 90% at 50% 0%,#4a2672 0%,#2a1446 62%,#1d0e33 100%);border-radius:0 0 22px 22px;
  box-shadow:0 8px 26px rgba(10,4,20,.5),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 1px 18px rgba(242,165,65,.10)}
#badge.sip{animation:sip .6s cubic-bezier(.3,1.7,.4,1)}
@keyframes sip{0%{transform:scale(1)}35%{transform:scale(1.07,.93)}70%{transform:scale(.98,1.03)}100%{transform:scale(1)}}
.badge-word{font-family:var(--display);text-transform:uppercase;text-align:center;line-height:.9;font-size:4.1cqw;color:var(--cream);text-shadow:0 2px 0 var(--ink-deep)}
#badge .glass{width:9cqw;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
#badgePct{font-family:var(--display);font-size:3.1cqw;line-height:1;color:var(--amber)}
#liquid,#liquidTop{transition:y .35s linear}
/* viewfinder marks — drawn by the player; BR sits exactly on each shot's baked mark (graph.frameMarks) */
.mark{position:absolute;z-index:4;width:14.6%;height:7.6%;pointer-events:none;border:0 solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.mark.tl{left:7.3%;top:2.9%;border-left-width:4px;border-top-width:4px}
.mark.bl{left:7.3%;bottom:2.9%;border-left-width:4px;border-bottom-width:4px}
.mark.br{left:calc(var(--bx,92.7%) - 14.6%);top:calc(var(--by,97.1%) - 7.6%);border-right-width:4px;border-bottom-width:4px;margin:2px -2px 0 0}

/* ---------- captions: off by default, a translucent bubble when on ---------- */
#captions{position:absolute;left:6%;right:6%;bottom:6.5%;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .2s}
#captions.on{opacity:1}
.bubble{background:var(--glass);border:1px solid var(--glass-edge);border-radius:22px;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 8px 30px rgba(20,6,30,.35),inset 0 1px 0 rgba(255,255,255,.35)}
#captions .bubble{padding:.55em 1em .6em;max-width:100%;text-align:center;font-size:clamp(15px,4.3cqw,22px);line-height:1.2;color:#fff;text-shadow:0 1px 6px rgba(30,8,20,.6)}
#capWho{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:.62em;color:var(--amber);margin-bottom:.1em}

/* ---------- the choice ---------- */
#scrim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(to bottom,rgba(18,8,30,0) 38%,rgba(18,8,30,.62) 72%,rgba(18,8,30,.78) 100%)}
#scrim.on{opacity:1}
#card{transition:opacity .28s;position:absolute;left:0;right:0;bottom:6%;padding:0 7%;display:flex;flex-direction:column;align-items:center;gap:3.2cqw;pointer-events:none}
#cardQ{font-size:clamp(26px,9.4cqw,52px);line-height:.92;text-align:center;color:var(--cream);
  text-shadow:0 3px 0 var(--ink),0 6px 22px rgba(0,0,0,.55);opacity:0;transform:translateY(14px) rotate(-2deg) scale(.9)}
#card:not(.on){opacity:0;visibility:hidden;transition:opacity .28s,visibility 0s .28s}
video.fade{transition:opacity var(--fade,0ms) linear}
#card.on #cardQ{animation:qIn .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes qIn{to{opacity:1;transform:rotate(-2deg)}}
#opts{display:flex;flex-direction:column;align-items:center;gap:2.6cqw;width:100%}
.opt{position:relative;pointer-events:auto;cursor:pointer;border:1px solid var(--glass-edge);
  background:linear-gradient(180deg,rgba(255,250,240,.24),rgba(255,240,220,.1));
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border-radius:999px;padding:.42em 1.25em .5em;min-width:58%;max-width:100%;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,6.4cqw,34px);line-height:1;color:#fff;
  text-shadow:0 2px 0 var(--ink),0 3px 12px rgba(0,0,0,.45);
  box-shadow:0 10px 30px rgba(20,6,30,.35),inset 0 1px 0 rgba(255,255,255,.45);
  opacity:0;transform:scale(.4,.2) translateY(30px)}
#card.on .opt{animation:pop .62s cubic-bezier(.2,1.7,.35,1) forwards}
@keyframes pop{0%{opacity:0;transform:scale(.4,.2) translateY(30px)}55%{opacity:1;transform:scale(1.08,.92)}78%{transform:scale(.97,1.04)}100%{opacity:1;transform:none}}
.opt:nth-child(1){--r:-1.5deg}.opt:nth-child(2){--r:1.2deg}.opt:nth-child(3){--r:-.8deg}
.opt:hover:not(:disabled),.opt:focus-visible{outline:none;border-color:#fff;background:linear-gradient(180deg,rgba(255,250,240,.36),rgba(242,165,65,.22));animation:pop .62s cubic-bezier(.2,1.7,.35,1) forwards,wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:var(--r,-1.5deg)}75%{rotate:calc(var(--r,-1.5deg)*-1)}}
.opt.picked{animation:picked .5s cubic-bezier(.3,1.6,.4,1) forwards!important;background:linear-gradient(180deg,rgba(242,165,65,.75),rgba(226,103,58,.55));border-color:#fff}
@keyframes picked{0%{transform:scale(1)}40%{transform:scale(1.14,.88)}100%{transform:scale(1.04);opacity:1}}
.opt.gone{transition:opacity .25s,transform .3s;opacity:0!important;transform:scale(.8) translateY(10px)!important;animation:none!important}
#card.shown .opt{border-style:dashed;cursor:default}
#card.shown .opt:after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(18,8,30,.18)}
.drinkrow{display:flex;align-items:center;gap:3cqw;width:78%;opacity:0;transform:translateY(10px);transition:opacity .35s .35s,transform .45s .35s cubic-bezier(.2,1.6,.4,1)}
#card.on .drinkrow{opacity:1;transform:none}
#card.shown .drinkrow{display:none}
.timer{flex:1;height:6px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden;opacity:0;transition:opacity .3s}
#card.on .timer{opacity:1}
.timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--orange),var(--amber));transform-origin:left;border-radius:9px}

/* ---------- boot ---------- */
#boot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 8%;
  background:linear-gradient(to bottom,rgba(18,8,30,.25),rgba(18,8,30,.82)),url(stills/boot.jpg) center/cover no-repeat;transition:opacity .7s}
#boot.gone{opacity:0;pointer-events:none}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:3.4cqw}
.title{margin:0;font-weight:400;font-size:clamp(70px,27cqw,150px);line-height:.8;color:var(--cream);
  text-shadow:0 5px 0 var(--ink),0 9px 0 var(--ink-deep),0 18px 40px rgba(0,0,0,.6);transform:rotate(-3deg)}
.title.small{font-size:clamp(44px,15cqw,84px)}
.goal{margin:1.5cqw 0 0;font-size:clamp(18px,5.6cqw,30px);line-height:.98;color:var(--amber);text-shadow:0 2px 0 var(--ink-deep);max-width:16ch;transform:rotate(-1.5deg)}
.credit{font-family:var(--hand);font-size:clamp(15px,4.2cqw,20px);color:rgba(251,240,220,.85)}
.credit span{color:var(--amber);margin:0 .3em}
#loadline{width:46%;height:5px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden}
#loadfill{height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--amber));transition:width .3s}
.bubble-btn{cursor:pointer;border:1px solid var(--glass-edge);border-radius:999px;padding:.5em 1.6em .58em;
  background:linear-gradient(180deg,rgba(255,250,240,.26),rgba(255,240,220,.1));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,6.2cqw,30px);color:#fff;text-shadow:0 2px 0 var(--ink);
  box-shadow:0 10px 30px rgba(20,6,30,.4),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .2s cubic-bezier(.3,1.7,.4,1),background .2s}
.bubble-btn:hover:not(:disabled){transform:scale(1.06) rotate(-1deg);background:linear-gradient(180deg,rgba(242,165,65,.6),rgba(226,103,58,.4))}
.bubble-btn:disabled{opacity:.6;cursor:default}
.bubble-btn.small{font-size:clamp(16px,4.6cqw,22px)}
.hint{font-size:clamp(13px,3.6cqw,17px);color:rgba(251,240,220,.6)}

/* ---------- end ---------- */
#end{position:absolute;inset:0;display:grid;place-items:center;padding:0 8%;text-align:center;opacity:0;pointer-events:none;transition:opacity .8s;
  background:rgba(18,8,30,.55);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
#end.on{opacity:1;pointer-events:auto}
.end-inner{display:flex;flex-direction:column;align-items:center;gap:3cqw}
.endline{margin:0;font-size:clamp(22px,7.4cqw,38px);line-height:.95;color:var(--amber);text-shadow:0 2px 0 var(--ink-deep);max-width:15ch}
#endPath{display:flex;flex-wrap:wrap;justify-content:center;gap:2cqw;max-width:100%}
#endPath span{font-family:var(--hand);font-size:clamp(14px,4cqw,19px);padding:.25em .8em;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);color:#fff}
.end-batt{font-family:var(--hand);font-size:clamp(15px,4.4cqw,21px);color:rgba(251,240,220,.85)}
.end-batt b{font-family:var(--display);font-weight:400;color:#fff;font-size:1.4em;margin-left:.3em}

/* ---------- small chips ---------- */
.chip{position:absolute;bottom:4.6%;width:clamp(30px,8.4cqw,40px);height:clamp(30px,8.4cqw,40px);border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:rgba(18,8,30,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--display);font-size:clamp(11px,3cqw,14px);color:rgba(255,255,255,.8);opacity:.55;transition:opacity .2s}
.chip:hover,.chip[aria-pressed="true"]{opacity:1}
#cc{left:10%}#mute{left:calc(10% + clamp(36px,10cqw,48px))}
body.booting .chip{display:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}