:root{--pink:#ff5d8f;--red:#d7263d;--ink:#1d1a22;--cream:#fff7f1;--mint:#bff2d6;--lav:#d9c8ff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Fredoka',sans-serif;color:var(--ink);background:#f6d4e6;touch-action:none;user-select:none;-webkit-user-select:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(255,200,225,.85),rgba(217,200,255,.85));backdrop-filter:blur(4px);z-index:20;padding:16px}
.card{background:var(--cream);border:4px solid var(--ink);border-radius:32px;padding:28px 26px;max-width:560px;width:100%;text-align:center;box-shadow:10px 10px 0 var(--ink);animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.card.small{max-width:360px;display:flex;flex-direction:column;gap:10px}
@keyframes pop{from{transform:scale(.6) rotate(-4deg);opacity:0}}
h1{font-size:clamp(30px,7vw,52px);font-weight:700;line-height:1;letter-spacing:-1px}
h1 span{background:linear-gradient(90deg,var(--pink),var(--red));-webkit-background-clip:text;color:transparent}
h2{font-size:36px}
h3{margin:14px 0 6px;font-weight:500}
.tag{font-family:'DM Mono',monospace;font-size:13px;margin:10px 0 18px;opacity:.75}
.diffs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.pill{font-family:inherit;font-size:15px;font-weight:500;border:3px solid var(--ink);background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s}
.pill small{font-family:'DM Mono',monospace;opacity:.6;font-size:11px;margin-left:4px}
.pill:hover{transform:translateY(-2px)}
.pill.active{background:var(--ink);color:#fff}
.big{font-family:inherit;font-weight:700;font-size:22px;padding:14px 34px;border-radius:999px;border:4px solid var(--ink);background:linear-gradient(180deg,#ff7aa5,var(--red));color:#fff;cursor:pointer;box-shadow:0 6px 0 var(--ink);transition:.1s}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.hint,.best{font-family:'DM Mono',monospace;font-size:11px;margin-top:14px;opacity:.6;line-height:1.6}
.panda-face{width:90px;height:80px;margin:0 auto 10px;position:relative;background:#fff;border:4px solid var(--ink);border-radius:50%;animation:bob 2s ease-in-out infinite}
.panda-face i{position:absolute;background:var(--ink);border-radius:50%}
.e1,.e2{width:30px;height:30px;top:-14px}.e1{left:-6px}.e2{right:-6px}
.p1,.p2{width:20px;height:24px;top:24px;animation:blink 4s infinite}.p1{left:16px;transform:rotate(25deg)}.p2{right:16px;transform:rotate(-25deg)}
.n{width:14px;height:9px;left:34px;top:48px}
@keyframes blink{0%,92%,100%{height:24px}96%{height:3px}}
@keyframes bob{50%{transform:translateY(-6px)}}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hud-left{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:8px}
.chip{background:var(--cream);border:3px solid var(--ink);border-radius:16px;padding:6px 14px;font-size:15px;box-shadow:4px 4px 0 var(--ink)}
.chip b{font-family:'DM Mono',monospace;margin-left:6px;color:var(--red)}
.hud-right{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#minimap{width:150px;height:150px;border:3px solid var(--ink);border-radius:16px;background:rgba(255,247,241,.9);box-shadow:4px 4px 0 var(--ink)}
.mini-btn{pointer-events:auto;font-family:'DM Mono',monospace;font-size:11px;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:3px 10px;cursor:pointer}
#bubble{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:#fff;border:3px solid var(--ink);border-radius:22px;padding:10px 18px;max-width:80vw;font-size:17px;box-shadow:5px 5px 0 var(--ink);transition:.3s;text-align:center}
#bubble.flash{animation:wob .4s}
@keyframes wob{30%{transform:translateX(-50%) scale(1.1) rotate(-2deg)}}
#bubble .who{display:block;font-family:'DM Mono',monospace;font-size:10px;opacity:.5}
#bubble::after{content:'';position:absolute;bottom:-12px;left:30px;border:8px solid transparent;border-top-color:var(--ink)}
#crosshint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-family:'DM Mono',monospace;font-size:11px;opacity:.55}
#dpad{display:none;position:absolute;left:18px;bottom:110px;width:150px;height:150px;pointer-events:auto}
#dpad button{position:absolute;width:50px;height:50px;border-radius:14px;border:3px solid var(--ink);background:rgba(255,247,241,.7);font-size:18px}
#dpad [data-k=f]{left:50px;top:0}#dpad [data-k=b]{left:50px;bottom:0}#dpad [data-k=l]{left:0;top:50px}#dpad [data-k=r]{right:0;top:50px}
@media (pointer:coarse){#dpad{display:block}#crosshint{display:none}#bubble{bottom:20px;left:auto;right:10px;transform:none;max-width:52vw;font-size:14px}#minimap{width:110px;height:110px}}
.float{position:fixed;font-weight:700;font-size:28px;color:var(--red);pointer-events:none;z-index:15;animation:up 1s forwards;text-shadow:2px 2px 0 #fff}
@keyframes up{to{transform:translateY(-80px);opacity:0}}
.rating{font-size:22px;color:var(--red);font-weight:700;margin:8px 0}
.wint{font-size:46px}
.stats{display:flex;gap:10px;justify-content:center}
.stats div{border:3px solid var(--ink);border-radius:16px;padding:8px 14px;background:#fff}
.stats small{display:block;font-family:'DM Mono',monospace;font-size:10px;opacity:.6}
.stats b{font-size:20px}
#board{list-style:none;font-family:'DM Mono',monospace;font-size:13px;max-height:140px;overflow:auto;text-align:left;margin:0 auto 14px;max-width:320px}
#board li{display:flex;justify-content:space-between;padding:3px 8px;border-bottom:1px dashed #ccc}
.row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.cf{position:absolute;top:-20px;width:10px;height:14px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
#remix{position:fixed;right:12px;bottom:12px;z-index:40;background:var(--pink);color:#fff;text-decoration:none;font-weight:500;font-size:13px;padding:6px 14px;border-radius:999px;border:2px solid var(--ink)}