/* Section 01: entry + welcome */
.entry .wrap{justify-content:space-between;padding:calc(env(safe-area-inset-top) + 7svh) 20px calc(env(safe-area-inset-bottom) + 14px);transition:opacity .6s var(--ease),transform .8s var(--ease),filter .6s;will-change:opacity}
.entry .stage{--w:min(66vw,340px);margin-top:4svh;flex:none}
.entry.in-welcome .wrap{opacity:0;transform:scale(.97) translateY(-10px);filter:blur(4px);pointer-events:none}
.entry .menu{margin:auto 0;gap:4px;width:100%;max-width:420px}
.entry .menu .big{letter-spacing:.34em;font-size:15px;min-height:48px;padding:12px 18px;width:100%;transition:letter-spacing .35s var(--ease),color .2s,opacity .2s}
.entry .menu .big:hover,.entry .menu .big:focus-visible{letter-spacing:.42em}
.entry .menu .big:active{opacity:.6}
.entry .menu .big[aria-expanded=true]{color:var(--red)}
.entry .copy{position:static;margin-top:16px;font-size:10px;letter-spacing:.26em;color:#777;text-align:center}
.entry .player{margin:0 auto 14px;padding:6px 18px 14px;background:rgba(0,0,0,.7);border:0;border-top:1px solid #222;border-bottom:1px solid #222}
.songs button{padding:12px 4px;font-size:16px;min-height:46px}
.songs button .n{display:inline-flex;width:22px;color:#6d6d6d}
.songs button .n svg{width:15px;height:15px;fill:currentColor}
.songs button.on .n{color:var(--red)}
.pstat{color:#8f8f8f;letter-spacing:.1em;font-size:11px}
@media(max-height:700px){.entry .stage{--w:min(50vw,230px)}.songs button{padding:7px 4px;min-height:38px}.entry .menu .big{min-height:44px;padding:8px 18px}}
@media(min-width:900px){.entry .stage{--w:min(30vw,420px)}}

/* white welcome */
.welcome{position:fixed;inset:0;z-index:20;background:#fff;color:#0a0a0a;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(env(safe-area-inset-top) + 16px) 24px calc(env(safe-area-inset-bottom) + 16px);clip-path:circle(0 at 50% 92%);visibility:hidden;transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s .9s;overflow:hidden}
.in-welcome .welcome{clip-path:circle(150% at 50% 92%);visibility:visible;transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s}
.wstate{display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;max-height:100%}
.wstate[hidden]{display:none}
.tokstage{--w:min(62vw,260px,34svh);position:relative;width:var(--w);aspect-ratio:1;perspective:900px;margin-bottom:3.5svh;flex:none}
.tokwrap{width:100%;height:100%;transform-style:preserve-3d;animation:sway 7s ease-in-out infinite alternate,bob 4s ease-in-out infinite alternate}
.tokimg{width:100%;height:100%;display:block;backface-visibility:hidden;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.tokshadow{position:absolute;left:12%;right:12%;bottom:-9%;height:9%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.38),transparent 70%);filter:blur(5px);animation:shad 4s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotateY(-20deg) rotateX(4deg)}to{transform:rotateY(20deg) rotateX(-3deg)}}
@keyframes bob{from{translate:0 -6px}to{translate:0 6px}}
@keyframes shad{from{transform:scale(1);opacity:.9}to{transform:scale(.82);opacity:.6}}
.reward{margin:0;font-family:var(--head,"Arial Narrow",Arial,sans-serif);text-transform:uppercase;line-height:.9;display:flex;flex-direction:column;align-items:center;gap:6px}
.reward b{font-size:clamp(52px,17vw,84px);font-weight:900;letter-spacing:-.01em}
.reward span{font-size:clamp(15px,4.6vw,22px);font-weight:900;letter-spacing:.2em}
.wlabel{margin:12px 0 0;font-size:11px;letter-spacing:.4em;color:#777;font-weight:700}
.wactions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:4svh}
.signbtn{width:100%;max-width:340px;min-height:58px;border-radius:16px;background:#0a0a0a;color:#fff;font-size:13px;letter-spacing:.24em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s}
.signbtn:hover{background:#222}.signbtn:active{transform:scale(.975)}
.guest{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;font-size:14px;font-weight:700;color:#222;letter-spacing:.06em;border-bottom:1px solid transparent;transition:color .2s,opacity .2s}
.guest:hover{color:#000;text-decoration:underline;text-underline-offset:5px}.guest:active{opacity:.6}
.wfine{margin:2.5svh 0 0;font-size:10.5px;font-weight:400;color:#8a8a8a;letter-spacing:.04em;line-height:1.5;max-width:280px}
.wtitle{margin:14px 0 18px;font-family:"Arial Narrow",Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(40px,11.5vw,68px);line-height:.92}
.wtext{font-weight:400;color:#555;line-height:1.6;font-size:15px;margin:0 0 26px;max-width:320px}
.quietbtn{margin-top:6px;min-height:44px;padding:0 18px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#777}
.guest.big2{background:#0a0a0a;color:#fff;border-radius:16px;min-height:56px;width:100%;max-width:340px;letter-spacing:.22em;font-size:12px;text-transform:uppercase}
/* staggered reveal */
.wstate>*{opacity:0;transform:translateY(18px)}
.in-welcome .wstate>*{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.in-welcome .wstate>:nth-child(1){transition-delay:.55s}.in-welcome .wstate>:nth-child(2){transition-delay:.7s}.in-welcome .wstate>:nth-child(3){transition-delay:.8s}.in-welcome .wstate>:nth-child(4){transition-delay:.9s}.in-welcome .wstate>:nth-child(5){transition-delay:1s}
@media(max-height:620px){.tokstage{width:min(40vw,150px)}.reward b{font-size:44px}.wactions{margin-top:2svh}.wfine{display:none}}
@media(prefers-reduced-motion:reduce){
  .tokwrap,.tokshadow,.logo3d{animation:none!important}
  .welcome,.in-welcome .welcome{clip-path:none;opacity:0;transition:opacity .3s}.in-welcome .welcome{opacity:1}
  .entry.in-welcome .wrap{transform:none;filter:none}.wstate>*,.in-welcome .wstate>*{transition:none;transform:none}
}
.entry .logo3d{animation-duration:6s}





/* music: tap-to-play prompt */
.entry .player{position:relative;padding-top:46px}
.plback{position:absolute;left:6px;top:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#8f8f8f;transition:color .2s,transform .2s var(--ease)}
.plback:hover,.plback:focus-visible{color:#fff;transform:translateX(-2px)}
.entry .wrap{min-height:100svh}

/* spinnable token: drag or tap to spin; once spun it keeps turning */
.tokstage{touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.tokstage.drag{cursor:grabbing}
.tokimg{position:absolute;inset:0;-webkit-user-drag:none;pointer-events:none}
.tokimg.back{transform:rotateY(180deg)}
.tokwrap.spun{animation:bob 4s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.tokwrap.spun{animation:none!important}}

/* heartbeat red glow (entry screen only) */
.entry .glow::before{width:150vmax;height:80vmax;left:50%;top:58%;margin:-40vmax 0 0 -75vmax;background:radial-gradient(ellipse,rgba(209,40,36,.5),rgba(130,14,14,.2) 40%,transparent 64%);transform-origin:50% 50%;animation:heart 4.2s ease-in-out infinite}
@keyframes heart{0%{opacity:.45;transform:scale(.92)}14%{opacity:.9;transform:scale(1.04)}28%{opacity:.5;transform:scale(.95)}42%{opacity:.8;transform:scale(1.02)}75%,100%{opacity:.45;transform:scale(.92)}}
@media (prefers-reduced-motion:reduce){.entry .glow::before{animation:none;opacity:.6}}
/* intro: small copyright pinned to the bottom of the screen */
.entry .copy{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 12px);margin:0;padding:0;font-size:7px;letter-spacing:.24em;color:#6a6a6a;text-align:center;pointer-events:none}

.entry .menu .big::after{display:none!important}

/* thick 3D coin: faces sit at the front/back of a stack of metal rim slices */
.tokimg{transform:translateZ(calc(var(--w)*.032))}
.tokimg.back{transform:rotateY(180deg) translateZ(calc(var(--w)*.032))}
/* flat, even token: long perspective + gentle sway so the disc never skews */
.tokstage{perspective:calc(var(--w)*8)}
@keyframes sway{from{transform:rotateY(-9deg)}to{transform:rotateY(9deg)}}
.tokimg{filter:none}
/* iOS: never animate the 3D coin element itself (breaks the rim); sway runs in JS, bob on the stage */
.tokwrap,.tokwrap.spun{animation:none!important;will-change:transform}
.tokstage{animation:bob 4s ease-in-out infinite alternate}
.tokimg,.coinrim{-webkit-backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.tokstage{animation:none!important}}
/* Jenga drop on ENTER */
@keyframes jfall{0%{transform:none}10%{transform:translate(var(--jx,0),-4px) rotate(calc(var(--jr,0deg)*.15))}100%{transform:translate(calc(var(--jx,0)*3),125svh) rotate(var(--jr,0deg))}}
.entry .wrap.fall{pointer-events:none}
.entry .wrap.fall .stage,.entry .wrap.fall #enter,.entry .wrap.fall #changesong{animation:jfall .95s cubic-bezier(.5,0,.85,.45) both;transform-origin:50% 100%}
.entry .wrap.fall .stage{--jx:-8px;--jr:-9deg;animation-delay:.3s}
.entry .wrap.fall #enter{--jx:10px;--jr:7deg;animation-delay:.15s}
.entry .wrap.fall #changesong{--jx:-6px;--jr:-5deg;animation-delay:0s}
.entry .wrap.fall .copy{transition:opacity .4s;opacity:0}
.tokstage{perspective-origin:50% 50%}.tokwrap{transform-origin:50% 50%}
/* flat coin: 2D flip, centred */
.tokstage{perspective:none}
.tokwrap{transform-style:flat;will-change:transform;transform-origin:50% 50%}
.tokimg,.tokimg.back{transform:none!important;backface-visibility:visible;-webkit-backface-visibility:visible}
.tokimg.back{display:none}
.tokwrap.bk .tokimg:not(.back){display:none}
.tokwrap.bk .tokimg.back{display:block}
/* quicker hand-off into the welcome screen */
.in-welcome .welcome{transition:clip-path .55s cubic-bezier(.6,0,.2,1),visibility 0s}
.entry.in-welcome .wrap{transition-duration:.35s}
.tokimg.back{margin:0!important;padding:0!important;font-size:inherit}
/* Enter / Change song: a little smaller and lower (owner request); the welcome screen has separate Sign up and Log in */
.entry .menu{margin:auto 0 7svh}
.entry .menu .big{font-size:13px;letter-spacing:.3em;min-height:44px;padding:10px 16px}
.entry .menu .big:hover,.entry .menu .big:focus-visible{letter-spacing:.36em}
@media(max-height:700px){.entry .menu{margin-bottom:4svh}.entry .menu .big{min-height:40px;padding:7px 16px}}
.signbtn.alt{background:transparent;color:#0a0a0a;border:2px solid #0a0a0a}.signbtn.alt:hover{background:#0a0a0a;color:#fff}
.reward b[hidden]{display:none}
.locknote{margin:0 auto 10px;max-width:300px;text-align:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#d8d8d4}
/* Site lock: only a small message and Change song */
body.site-locked #enter{display:none!important}
body.site-locked .locknote{font-size:14px;margin:0 auto 14px}