:root{--bg:#0d0221;--pink:#ff2a6d;--cyan:#05d9e8;--yellow:#f9f871;--purple:#b967ff;}
html,body{margin:0;background:var(--bg);color:#fff;font-family:'Fira Code',monospace;overflow-x:hidden;-webkit-tap-highlight-color:transparent;}
.title{font-family:'Monoton',cursive;animation:hue 6s linear infinite;color:var(--pink);text-shadow:0 0 10px currentColor,0 0 30px currentColor;}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.bungee{font-family:'Bungee',cursive;}
.spot{position:fixed;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(circle at 20% 0%,rgba(255,42,109,.25),transparent 40%),radial-gradient(circle at 80% 0%,rgba(5,217,232,.22),transparent 40%);
 animation:sweep 8s ease-in-out infinite alternate;}
@keyframes sweep{0%{background-position:0 0}100%{transform:translateX(5%) scale(1.1)}}
.flash{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s;}
.ball-wrap{position:relative;width:min(300px,70vw);height:min(300px,70vw);cursor:pointer;user-select:none;}
.ball{width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;
 box-shadow:0 0 60px rgba(185,103,255,.6),inset -30px -30px 60px rgba(0,0,0,.7),inset 20px 20px 40px rgba(255,255,255,.3);
 background:#888;}
.tiles{position:absolute;inset:-50%;width:200%;height:200%;
 background-image:linear-gradient(90deg,rgba(0,0,0,.45) 1px,transparent 1px),linear-gradient(rgba(0,0,0,.45) 1px,transparent 1px),
 conic-gradient(from 0deg,#fff,#aaa,#ddd,#666,#fff,#999,#eee,#777,#fff);
 background-size:16px 16px,16px 16px,100% 100%;animation:spin linear infinite;}
.ball::after{content:'';position:absolute;inset:0;border-radius:50%;
 background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0 4%,transparent 12%),radial-gradient(circle at 50% 50%,transparent 55%,rgba(0,0,0,.6));}
@keyframes spin{to{transform:rotate(360deg)}}
.squish{animation:squish .25s ease-out;}
@keyframes squish{0%{transform:scale(1)}35%{transform:scale(.9)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.string{width:2px;height:60px;background:linear-gradient(#555,#ccc);margin:0 auto;}
.floater{position:fixed;pointer-events:none;font-family:'Bungee';font-size:24px;z-index:50;animation:floatUp 1s ease-out forwards;text-shadow:0 0 8px currentColor;}
@keyframes floatUp{to{transform:translate(-50%,-90px);opacity:0}}
.spark{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:40;animation:burst .7s ease-out forwards;}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.beam{position:absolute;left:50%;top:50%;width:4px;height:50vh;transform-origin:top center;pointer-events:none;opacity:.0;animation:beam .6s ease-out;}
@keyframes beam{0%{opacity:.8}100%{opacity:0}}
.floor{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;perspective:400px;}
.tile{aspect-ratio:1;background:#1a0b3a;border-radius:3px;transition:background .3s,box-shadow .3s;}
.card{background:rgba(255,255,255,.05);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:14px;transition:all .2s;}
.card.can{border-color:var(--cyan);box-shadow:0 0 14px rgba(5,217,232,.5);animation:wig 2.5s ease-in-out infinite;}
.card.can:hover{transform:scale(1.03);}
.card.cant{opacity:.4;}
@keyframes wig{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-1.5deg)}96%{transform:rotate(1.5deg)}}
.dancer{position:absolute;font-size:22px;pointer-events:none;animation:bop .5s ease-in-out infinite alternate;}
@keyframes bop{to{transform:translateY(-8px) rotate(10deg)}}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:100;animation:pop .4s;}
@keyframes pop{from{transform:translate(-50%,-30px) scale(.5);opacity:0}}
.confetti{position:fixed;top:-10px;width:8px;height:14px;z-index:90;pointer-events:none;animation:fall 2.2s linear forwards;}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.glow{text-shadow:0 0 12px var(--yellow);}
footer a{color:var(--cyan);}