:root{--ink:#FFF4D1;--sun:#FFE066;--plate:rgba(42,10,94,.92);--deep:#2A0A5E;--line:#4A0C70;--top:44px;--btn:72px;--gap:12px;--chrome:264px;--artmax:680px}
*{box-sizing:border-box}
html{background:#8B2CFF}
html,body{margin:0;height:100%;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(60% 45% at 50% 45%,rgba(255,224,102,.35) 0,transparent 70%),linear-gradient(135deg,#2A0A5E 0,#8B2CFF 38%,#FF3EA5 70%,#19E6FF 100%)}
.fx::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.16) 2px,transparent 2.5px) 0 0/26px 26px}
.fx i,.fx b{position:absolute;top:-40px;left:var(--x);animation:fall var(--d) linear var(--w) infinite}
.fx i{width:12px;height:18px;border-radius:3px;background:var(--c);box-shadow:0 0 0 2px rgba(74,12,112,.55)}
.fx b{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6B0 0,#FFD21F 42%,#F2B33D 70%,#B86E00 100%);box-shadow:inset 0 0 0 3px #FFE066,0 0 0 2px var(--line);animation-name:coin}
.fx i:nth-of-type(1){--x:3%;--d:11s;--w:-1s;--c:#FF3EA5;--y:12%}
.fx i:nth-of-type(2){--x:10%;--d:14s;--w:-7s;--c:#19E6FF;--y:58%}
.fx i:nth-of-type(3){--x:17%;--d:12s;--w:-3s;--c:#B6FF2A;--y:30%}
.fx i:nth-of-type(4){--x:24%;--d:16s;--w:-11s;--c:#FFD21F;--y:80%}
.fx i:nth-of-type(5){--x:31%;--d:13s;--w:-5s;--c:#FF9A2E;--y:8%}
.fx i:nth-of-type(6){--x:38%;--d:15s;--w:-9s;--c:#19E6FF;--y:44%}
.fx i:nth-of-type(7){--x:46%;--d:12s;--w:-2s;--c:#FF3EA5;--y:70%}
.fx i:nth-of-type(8){--x:54%;--d:17s;--w:-13s;--c:#FFD21F;--y:20%}
.fx i:nth-of-type(9){--x:61%;--d:11s;--w:-6s;--c:#B6FF2A;--y:90%}
.fx i:nth-of-type(10){--x:68%;--d:14s;--w:-4s;--c:#FF9A2E;--y:36%}
.fx i:nth-of-type(11){--x:75%;--d:13s;--w:-10s;--c:#FF3EA5;--y:64%}
.fx i:nth-of-type(12){--x:82%;--d:16s;--w:-8s;--c:#19E6FF;--y:14%}
.fx i:nth-of-type(13){--x:89%;--d:12s;--w:-1s;--c:#FFD21F;--y:50%}
.fx i:nth-of-type(14){--x:95%;--d:15s;--w:-12s;--c:#B6FF2A;--y:84%}
.fx b:nth-of-type(1){--x:7%;--d:18s;--w:-4s;--y:40%}
.fx b:nth-of-type(2){--x:27%;--d:21s;--w:-15s;--y:6%}
.fx b:nth-of-type(3){--x:50%;--d:19s;--w:-9s;--y:94%}
.fx b:nth-of-type(4){--x:71%;--d:22s;--w:-2s;--y:26%}
.fx b:nth-of-type(5){--x:86%;--d:20s;--w:-12s;--y:74%}
.fx b:nth-of-type(6){--x:93%;--d:17s;--w:-7s;--y:4%}
@keyframes fall{to{transform:translate3d(40px,calc(100vh + 80px),0) rotate(620deg)}}
@keyframes coin{to{transform:translate3d(-30px,calc(100vh + 80px),0) rotateY(1080deg)}}
@keyframes bob{50%{translate:0 -8px}}
@keyframes pulse{50%{scale:1.06}}
.top{flex:0 0 auto;height:var(--top);width:100%;max-width:720px;display:flex;justify-content:space-between;align-items:center;padding:max(6px,env(safe-area-inset-top)) 12px 0}
.logo,.exit{background:var(--plate);border-radius:999px;text-decoration:none;box-shadow:0 0 0 2px var(--sun)}
.logo{font-weight:900;letter-spacing:.22em;font-size:15px;color:var(--sun);padding:5px 10px 5px 13px}
.exit{color:#fff;font-size:14px;font-weight:700;padding:6px 14px}
main{flex:1 1 auto;min-height:0;width:100%;max-width:720px;padding:0 16px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap)}
.art{flex:0 1 auto;display:block;width:auto;height:auto;max-width:min(100%,var(--artmax));max-height:calc(100vh - var(--chrome));max-height:calc(100svh - var(--chrome));aspect-ratio:1/1;object-fit:contain;border-radius:18px;border:4px solid #fff;box-shadow:0 0 0 3px var(--line),0 14px 0 rgba(42,10,94,.45);animation:bob 3.2s ease-in-out infinite}
.play{flex:0 0 auto;position:relative;overflow:hidden;display:grid;place-items:center;min-width:220px;height:var(--btn);min-height:56px;padding:0 44px;border-radius:999px;border:7px solid #fff;background:linear-gradient(180deg,#FF6FB5 0,#FF3EA5 42%,#FF7A1A 100%);box-shadow:0 0 0 4px var(--line),0 9px 0 4px var(--deep),0 16px 30px rgba(42,10,94,.5);color:#fff;font-size:30px;font-weight:900;letter-spacing:.12em;text-decoration:none;text-shadow:0 3px 0 var(--line),2px 0 0 var(--line),-2px 0 0 var(--line),0 -2px 0 var(--line),2px 2px 0 var(--line),-2px 2px 0 var(--line);cursor:pointer;animation:pulse 1.4s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.play::before{content:"";position:absolute;left:12%;right:12%;top:4px;height:36%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.12));pointer-events:none}
.play:focus-visible{outline:3px solid var(--sun);outline-offset:6px}
.play:active{transform:translateY(5px);box-shadow:0 0 0 4px var(--line),0 4px 0 4px var(--deep)}
.play[aria-disabled="true"]{opacity:.6;pointer-events:none;animation:none}
.lines{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.pill{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sun);background:var(--plate);border:2px solid var(--sun);border-radius:999px;padding:4px 14px;text-align:center}
.fine{margin:0;font-size:11px;line-height:1.4;color:#fff;background:var(--plate);border-radius:8px;padding:2px 10px;text-align:center}
@media (max-height:560px){:root{--btn:60px}.play{font-size:24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.fx i,.fx b{top:var(--y)}}