:root{--pulse:.5;--near:0;
  --ink:#0b0b0c; --paper:#fbf6e9; --yellow:#FFD60A; --gold:#F2A900; --muted:#8a8780;
  --size:min(50vmin, 440px);
  --sans:"Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Instrument Serif", "Times New Roman", Georgia, serif;
  --hand:"Caveat", "Segoe Print", "Bradley Hand", cursive; --carny:"Rye", "Instrument Serif", Georgia, serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:#f3f1ea;font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- background ---------- */
#bg{position:fixed;inset:0;z-index:0;transition:background-color .35s ease;background-color:#121110;
  background-image:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 30%, rgba(34,5,10,.5) 78%, rgba(8,0,2,.78) 100%), url(/img/concrete.webp);
  background-size:cover, cover;background-position:center;background-blend-mode:normal, luminosity}
#bg::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- header/footer ---------- */
.top,.bottom{position:fixed;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));font-size:12px;letter-spacing:.08em;}
.top{top:0;z-index:50}
.bottom{bottom:0;padding:8px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));color:var(--muted)}
.mark{font-weight:800;letter-spacing:.22em;font-size:12px;color:#f3f1ea}
.top-right{display:flex;gap:12px;align-items:center}
.badge{background:#2a2414;color:var(--yellow);border:1px solid #4a3d10;border-radius:99px;padding:5px 10px;font-weight:600;font-size:10.5px;letter-spacing:.12em}
.fine{font-size:11px;letter-spacing:.04em;opacity:.8}
.link{background:none;border:0;color:#d9d6cc;cursor:pointer;font-size:12px;letter-spacing:.08em;padding:13px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#555}
.link:hover{color:var(--yellow)}

.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;min-width:44px;padding:0 4px;user-select:none;color:#cfccc3;font-size:11.5px;letter-spacing:.06em}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle .sw{width:30px;height:18px;border-radius:99px;background:#2b2b2e;position:relative;transition:background .2s;flex:none}
.toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#bdbab1;transition:transform .2s,background .2s}
.toggle input:checked + .sw{background:var(--yellow)}
.toggle input:checked + .sw::after{transform:translateX(12px);background:#111}
.toggle input:focus-visible + .sw{outline:2px solid var(--yellow);outline-offset:2px}
.toggle.big{font-size:14px;margin:6px 0 4px}

/* ---------- stage / smiley (ancient enamel medallion) ---------- */
#stage{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vh,40px);
  padding:calc(64px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom))}
.smiley-wrap{width:var(--size);height:var(--size);aspect-ratio:1;flex:none;margin:calc(var(--size) * .1) 0;position:relative;transition:transform .9s cubic-bezier(.75,0,.25,1.12);will-change:transform}
.smiley-grow{width:100%;height:100%;transition:transform .28s cubic-bezier(.6,0,.35,1.6)}
.smiley{all:unset;display:block;width:100%;height:100%;position:relative;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.smiley:focus-visible{outline:3px solid #ffd27a;outline-offset:14px}
/* cast shadow on the wall + chunky disc thickness */
.smiley .shadow{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.55) 70%,transparent);filter:blur(calc(var(--size) * .035));transform:translate(3%,5%);transition:transform .12s, opacity .12s}
.smiley .base{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #7a5208, #3d2604 60%, #1a1003 100%);box-shadow:inset 0 -6px 14px rgba(0,0,0,.6)}
.smiley .face{position:absolute;inset:0;border-radius:50%;transition:transform .12s ease;display:block}
.pulse-scale{position:absolute;inset:0;display:block;transform:scale(calc(1 + var(--pstep,.5) * .006));will-change:transform}
.layer{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.smiley:active .face,.smiley.pressed .face{transform:scale(.985);transition-duration:.05s}
.smiley:active .shadow,.smiley.pressed .shadow{opacity:.75}
.smiley.pressed{cursor:progress}
/* ember glow seeping through cracks/recesses: driven by --pulse / --near from JS */
.glow{mix-blend-mode:screen;opacity:calc((.12 + var(--pulse) * .42) * (.55 + var(--near) * .9));transition:opacity .4s}
.glow-b{opacity:0}
.halo{position:fixed;left:50%;top:var(--haloY,44%);width:calc(var(--size) * 2.1);height:calc(var(--size) * 2.1);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(255,150,40,.20),rgba(255,120,30,.07) 55%,transparent);opacity:calc(.25 + var(--pulse,.5) * .55 + var(--near,0) * .3)}
/* states */
.face-happy{opacity:0;transition:opacity .25s}
body.happy .face-happy{opacity:1} body.happy .glow-a{opacity:0} body.happy .glow-b{opacity:calc(.08 + var(--pulse) * .3)}
.cavity,.inner,.left-clean,.left-burnt,.shards,.melt{visibility:hidden}
body.cracking .cavity,body.cracking .inner,body.cracking .left-clean,body.cracking .shards{visibility:visible}
body.cracking .face-idle,body.cracking .face-happy{visibility:hidden}
body.broken .cavity,body.broken .inner,body.broken .left-burnt,body.broken .melt{visibility:visible}
body.broken .face-idle,body.broken .face-happy,body.broken .left-clean,body.broken .glow{visibility:hidden}
body.broken .left-burnt{animation:burnin .7s ease-out}
@keyframes burnin{from{opacity:0}}
.shards img{position:absolute;display:block;will-change:transform,opacity}
/* interior bits (raster plates positioned in face units by JS from data-g) */
.inner img,.inner i,.melt img{position:absolute;display:block}
.inner .tube-glow{left:59%;top:32%;width:40%;height:40%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,150,60,.32),rgba(255,110,20,0));animation:flick 2.6s steps(1) infinite}
.eyeball{position:absolute;inset:0;transform-origin:65.4% 3%}

@keyframes eyedrop{0%{transform:translateY(-42%)}100%{transform:none}}
@keyframes swing{0%{transform:rotate(-5deg)}100%{transform:rotate(5deg)}}
@keyframes flick{0%,100%{opacity:.9}12%{opacity:.6}14%{opacity:1}55%{opacity:.75}57%{opacity:.95}}
.drip{clip-path:inset(0 0 100% 0)}
body.broken .drip{animation:drip 2.2s cubic-bezier(.5,0,.6,1) calc(var(--d) + 1.1s) forwards}
@keyframes drip{0%{clip-path:inset(0 0 100% 0)}35%{clip-path:inset(0 0 62% 0)}100%{clip-path:inset(0 0 0 0)}}
body.static .drip{animation:none;clip-path:none}

@keyframes chatter{50%{transform:translateY(-4.5%)}}
/* practical lamps: additive light inside the disc only (maps carry the disc as alpha) */
.lit,.lamp{mix-blend-mode:plus-lighter;opacity:0;will-change:opacity}
.lit-happy{display:none} body.happy .lit-happy{display:block} body.happy .lit-idle{display:none}
body.broken .lit{display:none}
.lit-neon{opacity:calc(var(--neon,0) * .85)}
.eye-lamp{display:none} body.broken .eye-lamp{display:block}
body.eyes .eye-lamp,body.eyes .iris-lamp{animation:lampon 1.6s steps(1) forwards, lamphum 3.1s ease-in-out 1.6s infinite alternate}
body.calm.eyes .eye-lamp,body.calm.eyes .iris-lamp{animation:lampcalm 1.6s ease forwards}
@keyframes lampon{0%{opacity:0}8%{opacity:.5}11%{opacity:.05}22%{opacity:.75}26%{opacity:.25}40%{opacity:.9}100%{opacity:.9}}
@keyframes lamphum{from{opacity:.9}to{opacity:.72}}
@keyframes lampcalm{to{opacity:.8}}
/* neon ring mounted on the wall around the disc (stays put while the disc dances) */
.neon{position:absolute;inset:-25%;pointer-events:none;z-index:0}
.neon img{position:absolute;inset:0;width:100%;height:100%;display:block}
.neon-on{opacity:var(--neon,0)} .neon-bloom{inset:-15%!important;width:130%!important;height:130%!important;opacity:calc(var(--neon,0) * .3)}
.smiley-grow{position:relative;z-index:1}
/* the sign above the medallion */
.sign{width:min(560px,86vw);pointer-events:none;transition:opacity .8s, transform .8s;flex:none;margin-bottom:calc(var(--size) * .1)}
.sign img{display:block;width:100%;height:auto;filter:none}
body.dark .sign{opacity:.35} body.revealed .sign,body.cracking .sign,body.broken .sign{opacity:0;pointer-events:none}
#dim{position:fixed;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none;transition:opacity .8s ease}
body.dark #dim{opacity:.65} body.dark .halo{opacity:.15}
body.tremble .smiley{animation:tremble .045s steps(2) infinite}
@keyframes tremble{25%{transform:translate(.25%,-.15%) rotate(.18deg)}50%{transform:translate(-.1%,.2%)}75%{transform:translate(-.25%,.1%) rotate(-.18deg)}}
body.calm.tremble .smiley{animation:none}

/* ---------- copy ---------- */
.copy{text-align:center;max-width:520px;transition:opacity .5s, transform .5s}
h1{margin:0;font-weight:800;font-size:clamp(28px,5.4vmin,46px);letter-spacing:-.02em;line-height:1}
h1 .price{color:var(--yellow)}
.tiny{margin:12px auto 0;color:var(--muted);font-size:13px;line-height:1.5;max-width:400px}
.tiny .by{display:block;color:#bdb9ae;margin-top:4px;letter-spacing:.04em}
.status{min-height:1.4em;margin:12px 0 0;font-size:13px;color:var(--yellow);letter-spacing:.04em}
.counter{position:fixed;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));z-index:6;text-align:center;margin:0;font-size:12.5px;color:#bdb9ae;letter-spacing:.05em;transition:opacity .4s}
#countNum{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
body:not(.idle) .copy,body:not(.idle) .counter,body:not(.idle) .bottom,body.party .copy,body.party .counter,body.party .bottom,body.revealed .copy,body.revealed .counter,body.revealed .bottom{opacity:0;pointer-events:none}
body.party .smiley,body.revealed .smiley{cursor:default}

/* ---------- practical light rig: one raking key light orbiting the disc (relit maps), a warm backlight
   spilling round the disc onto the wall, the key's wash on the wall and the disc's hard shadow ---------- */
#rig{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;contain:strict}
.wash,.cast,.backlight{position:absolute;left:0;top:0;display:block;width:100px;height:100px;border-radius:50%;transform-origin:0 0;will-change:transform,opacity;opacity:0}
.wash{background:radial-gradient(closest-side,rgba(255,220,170,.42),rgba(255,200,140,.16) 45%,rgba(255,180,110,0))}
.backlight{background:radial-gradient(closest-side,rgba(255,200,140,0) 38%,rgba(255,214,160,.8) 43%,rgba(255,180,110,.3) 56%,rgba(255,150,80,.08) 76%,rgba(255,140,70,0))}
.cast{background:radial-gradient(closest-side,rgba(0,0,0,.9) 92%,rgba(0,0,0,0) 100%)}
.lit-rim{opacity:calc(var(--rim,0) * .4)}
.rake{opacity:0}
body.lightson .face-idle,body.lightson .face-happy{filter:brightness(.34) contrast(1.12)}
.face-idle,.face-happy{transition:filter .5s}
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
#strobe{position:fixed;inset:0;z-index:9;background:#fff;opacity:0;pointer-events:none}


/* reduced flashing: calmer lights, no strobe */

body.calm #strobe{display:none}
body.calm #bg{transition-duration:3s}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(5,5,6,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade .35s ease}
.gate-card{width:min(440px,100%);background:#141414;border:1px solid #2a2a2a;border-radius:22px;padding:28px 26px 24px;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.eyebrow{margin:0 0 8px;color:var(--yellow);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.gate h2{margin:0 0 14px;font-size:26px;letter-spacing:-.02em}
.warn{font-size:13.5px;line-height:1.55;color:#c9c6bd;margin:0 0 12px;background:#1d1a10;border:1px solid #3b3214;border-radius:12px;padding:12px 14px}
.warn strong{color:#ffe27a}
.gate-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.btn{appearance:none;border:1px solid #3a3a3a;background:rgba(27,27,27,.85);color:#f3f1ea;border-radius:999px;padding:12px 18px;min-height:44px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;transition:transform .12s, background .2s, border-color .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{border-color:#666}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--yellow);color:#111;border-color:var(--yellow);font-size:16px;padding:15px 20px}
.btn.primary:hover{background:#ffe243}
.btn.ghost{background:transparent;color:#bdb9ae}
@keyframes fade{from{opacity:0}}

/* ---------- reveal / slip ---------- */
.reveal{position:fixed;left:0;right:0;bottom:0;top:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(150px,32vh,320px) 16px max(26px,env(safe-area-inset-bottom));pointer-events:none;visibility:hidden}
body.slipping .reveal,body.revealed .reveal{visibility:visible}
body.revealed .reveal{pointer-events:auto}
.slip{width:min(560px,100%);position:relative;transform-origin:0 0;will-change:transform,clip-path;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.paper{color:#2a1d10;background:#e9dcbc url(/img/parchment.webp) center/cover;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 3 L8 1 L15 4 L24 0.5 L33 3 L41 1 L52 3.5 L60 1 L71 2.5 L80 0 L92 3 L101 1.5 L110 3.5 L122 1 L131 3 L140 0.5 L152 2.5 L161 1 L172 4 L181 1.5 L190 3 L203 0.5 L212 3 L224 1 L233 3.5 L241 1 L252 3 L263 0.5 L271 2.5 L283 1 L292 4 L300 1.5 L311 3 L320 0.5 L331 3 L342 1 L350 3.5 L362 1 L371 3 L380 0.5 L391 2.5 L400 1 L400 97 L392 99 L381 96.5 L372 99.5 L361 97 L350 99 L340 96.5 L331 99 L320 97 L309 99.5 L300 97 L289 99 L280 96 L270 99 L259 97.5 L250 99.5 L240 97 L229 99 L220 96.5 L210 99 L199 97 L190 99.5 L180 97 L169 99 L160 96.5 L150 99 L139 97.5 L130 99.5 L119 97 L110 99 L99 96.5 L90 99 L79 97 L70 99.5 L60 97 L49 99 L40 96.5 L30 99 L19 97 L10 99.5 L0 97 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 3 L8 1 L15 4 L24 0.5 L33 3 L41 1 L52 3.5 L60 1 L71 2.5 L80 0 L92 3 L101 1.5 L110 3.5 L122 1 L131 3 L140 0.5 L152 2.5 L161 1 L172 4 L181 1.5 L190 3 L203 0.5 L212 3 L224 1 L233 3.5 L241 1 L252 3 L263 0.5 L271 2.5 L283 1 L292 4 L300 1.5 L311 3 L320 0.5 L331 3 L342 1 L350 3.5 L362 1 L371 3 L380 0.5 L391 2.5 L400 1 L400 97 L392 99 L381 96.5 L372 99.5 L361 97 L350 99 L340 96.5 L331 99 L320 97 L309 99.5 L300 97 L289 99 L280 96 L270 99 L259 97.5 L250 99.5 L240 97 L229 99 L220 96.5 L210 99 L199 97 L190 99.5 L180 97 L169 99 L160 96.5 L150 99 L139 97.5 L130 99.5 L119 97 L110 99 L99 96.5 L90 99 L79 97 L70 99.5 L60 97 L49 99 L40 96.5 L30 99 L19 97 L10 99.5 L0 97 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.slip-inner{padding:22px 28px 18px;text-align:center}
.slip-eyebrow{margin:0 0 10px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#8e2a17;font-weight:600}
.slip blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,4.6vw,29px);line-height:1.18;letter-spacing:-.005em;text-wrap:balance}
.lucky{margin:14px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6b5636}
.lucky span{white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#2a1d10;font-weight:600;margin-left:6px}
.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px;opacity:0;transform:translateY(10px);transition:opacity .5s .2s, transform .5s .2s}
body.revealed .actions{opacity:1;transform:none}
.reveal-count{margin:12px 0 0;font-size:12px;color:#bdb9ae;letter-spacing:.05em;opacity:0;transition:opacity .5s .5s}
body.revealed .reveal-count{opacity:1}
body.revealed .smiley-wrap{transform:translate(var(--ux,0px),var(--up,-26vh)) scale(var(--shrink,.5))}
body.revealed #stage{justify-content:center}

/* ---------- wall ---------- */
.wall{position:fixed;z-index:45;right:0;top:0;bottom:0;width:min(420px,100%);background:#111;border-left:1px solid #262626;padding:22px 22px 30px;overflow:auto;animation:slidein .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{transform:translateX(100%)}}
.wall-head{display:flex;justify-content:space-between;align-items:center}
.wall h3{margin:0;font-size:16px;letter-spacing:-.01em}
.wall-sub{color:var(--muted);font-size:12.5px;margin:6px 0 16px}
.wall ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wall li{background:#e9dcbc url(/img/parchment.webp) center/cover;color:#1c1914;padding:14px 16px;border-radius:3px;font-family:var(--serif);font-size:18px;line-height:1.25}
.wall li small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a7f6b;margin-bottom:6px}
.wall .empty{background:none;color:var(--muted);font-family:var(--sans);font-size:13px;padding:0}

.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);z-index:60;background:#f3f1ea;color:#111;padding:10px 16px;border-radius:99px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;max-width:calc(100vw - 40px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.noscript{position:fixed;bottom:10px;width:100%;text-align:center;z-index:99}

@media (max-width:560px){
  :root{--size:min(80vw, 54vh)}
  .fine{display:none}
  .bottom{justify-content:center}
  .lbl{font-size:10.5px;letter-spacing:.03em}
  .toggle.big .lbl{display:inline}
  .slip-inner{padding:18px 18px 14px}
  .lucky span{display:block;margin:6px 0 0}
  .btn{padding:11px 14px;font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  body.idle .smiley-wrap,.eye{animation:none}
}

.ios-hint{font-size:12.5px;color:#bdb9ae;margin:0 0 6px}
html,body{overscroll-behavior:none}
/* phones */
@media (max-width:560px){
  .top .mark{display:none}
  .top{justify-content:flex-end}
  .top-right{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .badge{font-size:9.5px;padding:4px 8px} .badge .long{display:none}
  .actions{gap:6px}
  .actions .btn{flex:1 1 40%}
}
/* short landscape phones: medallion left, text right */
@media (orientation:landscape) and (max-height:500px){
  :root{--size:min(68vh, 44vw)}
  #stage{flex-direction:row;gap:5vw;padding:calc(48px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
  .copy{text-align:left;max-width:300px} .tiny{margin-left:0}
  .counter{bottom:calc(40px + env(safe-area-inset-bottom));left:auto;right:max(24px,env(safe-area-inset-right));text-align:right}
  .bottom .fine{display:none}
  .reveal{padding:calc(52px + env(safe-area-inset-top)) 16px 12px calc(var(--size) * .55 + 40px);justify-content:center}
  .slip-inner{padding:12px 16px 10px} .slip blockquote{font-size:19px}
  .actions{margin-top:10px} .reveal-count{margin-top:6px}
  .gate-card{padding:18px 20px;max-height:calc(100vh - 20px);overflow:auto}
  .gate h2{font-size:20px;margin-bottom:8px}
}

body.broken.flying .shards{visibility:visible}
body.static .drip{animation:none;transform:none}
body.static .left-burnt{animation:none}
body.static.broken .eyeball{animation:swing 3.2s ease-in-out infinite alternate}
body.calm.broken .eyeball{animation:eyedrop 1s cubic-bezier(.3,1.2,.45,1) both}
body.calm.static.broken .eyeball{animation:none}
body.revealed .halo{opacity:.35}

.badge .short,.lbl .short{display:none}
@media (max-width:560px){.badge .short,.lbl .short{display:inline}.lbl .long{display:none}}

/* ---------- analog overlay: scanlines + film grain + rolling hum bar (transforms/opacity only) ---------- */
#crt{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .6s;overflow:hidden;contain:strict}
body.analog #crt{opacity:1}
#crt i{position:absolute;display:block}
#crt .scan{inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px);opacity:.55}
#crt .grain{inset:-80px;background:url(/img/grain.webp) 0 0/160px 160px;opacity:.1;animation:grain .48s steps(6) infinite}
#crt .roll{left:0;right:0;top:0;height:22vh;background:linear-gradient(to bottom,rgba(255,240,200,0),rgba(255,240,200,.05) 50%,rgba(255,240,200,0));animation:roll 7.5s linear infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-37px,21px)}33%{transform:translate(23px,-41px)}50%{transform:translate(-13px,55px)}67%{transform:translate(49px,9px)}83%{transform:translate(-55px,-27px)}100%{transform:translate(0,0)}}
@keyframes roll{from{transform:translateY(-25vh)}to{transform:translateY(110vh)}}
body.calm #crt .grain,body.calm #crt .roll{animation:none}
@media (max-width:560px){#crt .scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px)}}
/* ---------- handwritten ink fortune ---------- */
.slip blockquote#slipText{font-family:var(--hand);font-weight:600;font-size:clamp(27px,6vw,38px);line-height:1.04;color:#24160b;letter-spacing:0;text-shadow:0 0 .6px rgba(36,22,11,.55),0 .5px 1px rgba(60,30,10,.18)}
#slipText .w{white-space:nowrap;display:inline-block}
#slipText .ch{display:inline-block;opacity:0;clip-path:inset(-20% 100% -30% -10%)}
body.writing #slipText .ch{animation:ink .2s cubic-bezier(.3,.1,.4,1) var(--t) forwards}
body.written #slipText .ch{opacity:1;clip-path:none;animation:none}
@keyframes ink{0%{opacity:.35;clip-path:inset(-20% 100% -30% -10%)}100%{opacity:1;clip-path:inset(-20% -10% -30% -10%)}}
.slip-eyebrow{font-family:var(--carny);font-weight:400;letter-spacing:.16em;font-size:12px}

@media (min-height:700px) and (min-aspect-ratio:1/1){.smiley-wrap{margin-top:4.5vh}}

/* ---------- Round 4: a thin fortune-cookie strip (about 7:1), printed vertically out of the mouth,
   then lifted, turned to horizontal and brought to camera ---------- */
:root{--slipW:min(620px,92vw)}
.slip{width:var(--slipW);transform-origin:50% 50%;backface-visibility:hidden}
.slip .paper{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0.5 0 L0.2 4 L0.9 8 L0.3 12 L0.1 16 L0.9 20 L2.0 24 L1.8 28 L1.7 32 L0.5 36 L1.2 40 L0.6 44 L0.4 48 L0.2 52 L0.5 56 L2.0 60 L398.2 60 L398.2 56 L398.2 52 L399.6 48 L399.3 44 L398.6 40 L398.4 36 L398.1 32 L398.1 28 L399.8 24 L398.7 20 L398.5 16 L398.9 12 L399.6 8 L399.0 4 L399.8 0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0.5 0 L0.2 4 L0.9 8 L0.3 12 L0.1 16 L0.9 20 L2.0 24 L1.8 28 L1.7 32 L0.5 36 L1.2 40 L0.6 44 L0.4 48 L0.2 52 L0.5 56 L2.0 60 L398.2 60 L398.2 56 L398.2 52 L399.6 48 L399.3 44 L398.6 40 L398.4 36 L398.1 32 L398.1 28 L399.8 24 L398.7 20 L398.5 16 L398.9 12 L399.6 8 L399.0 4 L399.8 0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;background-size:220% 600%;position:relative}
.slip .paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,250,235,.16),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 70%,rgba(60,35,10,.16));
  opacity:var(--curl,1)}
.slip-inner{min-height:0;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(8px,2vw,16px);
  padding:clamp(9px,1.5vw,14px) clamp(12px,3vw,26px);box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px rgba(142,42,23,.30)}
.slip .orn{margin:0;flex:none;font-size:clamp(9px,2vw,12px)}
.slip blockquote#slipText{font-size:clamp(19px,4.9vw,32px);line-height:1.06;margin:0;display:block;text-align:center;flex:1 1 auto;min-width:0}
.slip-eyebrow{margin:0 0 10px;font-size:12px;line-height:1.5;text-align:center;color:#c9a46a;opacity:0;transition:opacity .6s .3s}
.slip-eyebrow #slipNum{display:inline;font-size:12px;opacity:.85;margin-left:.4em}
.lucky{margin:12px 0 0;text-align:center;color:#a9946e;opacity:0;transition:opacity .6s .5s}
.lucky span{display:inline;margin:0 0 0 8px;letter-spacing:.2em;color:#e6d6b0}
body.revealed .slip-eyebrow,body.revealed .lucky{opacity:1}
.reveal{padding:calc(56px + clamp(150px,40vh,420px)) 12px max(18px,env(safe-area-inset-bottom))}
.actions{margin-top:16px}
@media (max-width:560px){ .lucky span{display:block;margin:6px 0 0} }
@media (orientation:landscape) and (max-height:500px){
  :root{--slipW:min(480px,calc(100vw - var(--size) * .62 - 90px))}
  .reveal{display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:calc(48px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px calc(var(--size) * .62 + 46px)}
  .slip blockquote#slipText{font-size:21px}
  .actions{margin-top:10px} .lucky{margin-top:8px}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cavity,.inner{clip-path:circle(47.6% at 50% 50%)}
.sign{margin-bottom:0}
@media (max-width:560px){ :root{--size:min(74vw, 46vh)} .sign{width:min(340px,82vw)} }
@media (orientation:landscape) and (max-height:500px){
  :root{--size:min(58vh, 40vw)}
  #stage{display:grid;grid-template-columns:auto minmax(0,320px);grid-template-rows:auto auto;column-gap:6vw;align-content:center;justify-content:center}
  .smiley-wrap{grid-row:1 / span 2;grid-column:1;margin:calc(var(--size) * .1)}
  .sign{grid-column:2;grid-row:1;width:min(300px,38vw);align-self:end;margin-bottom:10px}
  .copy{grid-column:2;grid-row:2;align-self:start}
}

.eye-lamp{filter:brightness(1.7) saturate(1.25)}

/* ---------- Round 4: the whole grin fills with teeth (both halves), pushed out through the crescent ---------- */
.grin{visibility:hidden;pointer-events:none}
body.teeth .grin,body.broken .grin{visibility:visible}
.grin-box{position:absolute;overflow:hidden}
.grin-box img{position:absolute;inset:0;width:100%;height:100%;display:block}
#mouthLine{position:absolute;display:block}
.g-throat{opacity:0}
body.teeth .g-throat{animation:gthroat .5s ease-out forwards}
body.teeth .g-upper{animation:gup 1.6s cubic-bezier(.5,0,.2,1) .1s both}
body.teeth .g-lower{animation:glow 1.6s cubic-bezier(.5,0,.2,1) .25s both}
@keyframes gthroat{to{opacity:1}}
@keyframes gup{0%{transform:translateY(-38%)}55%{transform:translateY(-14%)}62%{transform:translateY(-16%)}100%{transform:none}}
@keyframes glow{0%{transform:translateY(34%)}55%{transform:translateY(12%)}62%{transform:translateY(14%)}100%{transform:none}}
body.static .g-throat,body.static .g-upper,body.static .g-lower{animation:none;opacity:1;transform:none}
/* let the strip finish its move to camera before the buttons and captions come up */
body.revealed .actions{transition-delay:1.5s} body.revealed .slip-eyebrow{transition-delay:1.3s} body.revealed .lucky{transition-delay:1.5s} body.revealed .reveal-count{transition-delay:1.8s}
body.static.revealed .actions,body.static.revealed .slip-eyebrow,body.static.revealed .lucky,body.static.revealed .reveal-count{transition-delay:0s}

/* Round 5: teeth ratchet out in clicks (stepped), plates hinge in 3D */
body.teeth .g-upper,body.teeth .g-lower{animation-timing-function:steps(3,end)}
#shards{perspective:600px}
#shards img{backface-visibility:hidden}
/* Round 5: a properly aged strip (baked texture carries its own frayed silhouette as alpha) */
.slip .paper{background:url(/img/strip.webp) center/100% 100% no-repeat;-webkit-mask:url(/img/strip.webp) center/100% 100% no-repeat;mask:url(/img/strip.webp) center/100% 100% no-repeat}
.slip .paper::after{opacity:.6}
.slip-inner{box-shadow:none;padding:clamp(10px,1.7vw,16px) clamp(22px,4.4vw,40px)}
.slip blockquote#slipText{color:#2b1709;text-shadow:0 0 1.6px rgba(60,28,8,.45),.4px .5px .8px rgba(70,35,10,.35),0 0 .5px rgba(30,15,5,.6)}
#slipText .w:nth-child(3n) .ch:nth-child(2n){opacity:.92}
.slip .orn{opacity:.55}
:root{--slipW:min(680px,92vw)}
@media (orientation:landscape) and (max-height:500px){ :root{--slipW:min(480px,calc(100vw - var(--size) * .62 - 90px))} }
/* in-world gate: an iron service plate with brass edging */
.gate-card{background:linear-gradient(180deg,#1d1914,#12100d);border:1px solid #6b5228;border-radius:6px;box-shadow:inset 0 0 0 3px #15120e,inset 0 0 0 4px rgba(176,134,62,.35),0 40px 120px rgba(0,0,0,.7);position:relative}
.gate-card::before,.gate-card::after{content:"";position:absolute;top:10px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8b46a,#5e4520 70%)}
.gate-card::before{left:10px} .gate-card::after{right:10px}
.gate .eyebrow{font-family:var(--carny);color:#c9a46a;letter-spacing:.16em}
.gate h2{font-family:var(--carny);font-weight:400;letter-spacing:.02em;color:#efe2c4}
.warn{background:none;border:0;border-top:1px solid rgba(176,134,62,.3);border-bottom:1px solid rgba(176,134,62,.3);border-radius:0;padding:10px 0;color:#cbbd9c;font-size:13px}
.warn strong{color:#e8c77a;font-weight:600} .warn-mark{color:#e8c77a}

/* footer: room for the small link to /mystery */
.bottom{gap:18px}