:root{
--bg:#101018;
--ink:#e6e7ff;
--accent:#7cff9b;
--accent2:#ffb86b;
--danger:#ff5d73;
}
*{ box-sizing:border-box; }
html,body{
height:100%;
margin:0;
background: radial-gradient(1200px 800px at 70% 20%, #1c1f3a 0%, var(--bg) 60%);
color:var(--ink);
font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
user-select:none;
}
.hud{
position:fixed;
top:0; left:0; right:0;
display:flex; justify-content:space-between; align-items:center;
padding:10px 16px;
pointer-events:none;
}
.logo{ font-weight:800; letter-spacing:.5px; filter:drop-shadow(0 2px 0 #0007); }
.scoreboard{ font-weight:700; }

#arena{
position:relative;
height:calc(100% - 140px);
margin-top:40px;
overflow:hidden;
border:4px dashed #2f3355;
border-radius:16px;
margin-inline: clamp(8px, 4vw, 28px);
background:
radial-gradient(200px 200px at 10% 20%, #1b2244 0%, #121428 70%, transparent 71%) no-repeat,
radial-gradient(220px 220px at 90% 70%, #1b2244 0%, #121428 70%, transparent 71%) no-repeat,
repeating-linear-gradient(45deg, #131630 0 12px, #15183a 12px 24px);
}

#hero{
position:absolute;
width:min(28vmin, 320px);
will-change: transform, left, top;
filter: drop-shadow(0 18px 24px #0008);
transition: transform .15s ease, filter .2s ease;
}

#hero.bonk{
animation: bonk .25s ease;
filter: drop-shadow(0 0 0 #0000) hue-rotate(45deg);
}
@keyframes bonk{
0%{ transform: scale(.96) rotate(-6deg); }
50%{ transform: scale(1.08) rotate(6deg); }
100%{ transform: scale(1); }
}

#message{
position:absolute; inset:auto 0 10px 0;
text-align:center; font-weight:700;
opacity:.9;
text-shadow:0 2px 0 #0009;
}

.controls{
position:fixed; left:0; right:0; bottom:0;
display:flex; gap:8px; flex-wrap:wrap;
padding:12px clamp(8px, 4vw, 28px);
background: linear-gradient(180deg, #0e1022b0, #0e1022f0 40%, #0e1022f0);
backdrop-filter: blur(6px);
border-top:1px solid #2b2e55;
}
.btn{
appearance:none; border:none; cursor:pointer;
padding:12px 14px; border-radius:12px;
font-weight:800; color:#0b0d18;
transition: transform .05s ease, filter .2s ease;
}
.btn:active{ transform: translateY(2px) scale(.98); }
.btn.fart{ background:var(--accent); }
.btn.chaos{ background:#aef; }
.btn.spin{ background:#ffd166; }
.btn.shrink{ background:#c3f; color:white;}
.btn.invert{ background:#eee; }
.btn.rain{ background:var(--accent2); }
.btn.mute{ background:var(--danger); color:#fff;}

body.invert{
filter: invert(1) hue-rotate(180deg);
}

.rain-emoji{
position:absolute;
font-size: clamp(18px, 4vmin, 36px);
will-change: transform, opacity;
animation: fall 1.6s linear forwards;
pointer-events:none;
}
@keyframes fall{
0%{ transform: translateY(-20vh) rotate(0deg) scale(1); opacity:1;}
100%{ transform: translateY(105vh) rotate(360deg) scale(.9); opacity:.2;}
}

.spinny #hero{
animation: spin 1.1s linear infinite;
}
@keyframes spin{
to{ transform: rotate(360deg) }
}

.shrunk #hero { transform: scale(.6); }
.grow #hero { transform: scale(1.3) }