:root{--bg:#10051c;--pink:#ff2e88;--cyan:#1ef2ff;--lime:#b6ff2e;--yellow:#ffe12e;--ink:#f6ecff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'VT323',monospace;touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);background:radial-gradient(circle at 50% 30%,#3a146680,#10051ccc 75%);overflow-y:auto}
.screen>*{animation:rise .5s both}
.screen>*:nth-child(2){animation-delay:.05s}.screen>*:nth-child(3){animation-delay:.1s}.screen>*:nth-child(4){animation-delay:.15s}.screen>*:nth-child(5){animation-delay:.2s}.screen>*:nth-child(6){animation-delay:.25s}.screen>*:nth-child(7){animation-delay:.3s}.screen>*:nth-child(8){animation-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.logo{font-family:'Rubik Mono One';font-size:clamp(40px,13vw,76px);line-height:.9;text-align:center;color:var(--cyan);text-shadow:0 0 24px var(--cyan),0 0 60px #1ef2ff66,5px 5px 0 var(--pink);animation:bob 1.6s ease-in-out infinite!important}
.logo span{color:var(--pink);text-shadow:0 0 24px var(--pink),0 0 60px #ff2e8866,5px 5px 0 var(--cyan)}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
.sticker{background:var(--lime);color:#1a0b2e;font-size:22px;padding:4px 14px;border-radius:30px;transform:rotate(-6deg);box-shadow:0 0 20px #b6ff2e88,3px 3px 0 #000;animation:spin 3s ease-in-out infinite!important}
@keyframes spin{50%{transform:rotate(6deg) scale(1.08)}}
.best{font-size:24px;opacity:.9}.best b{color:var(--lime)}
h2{font-family:'Rubik Mono One';font-size:34px;margin:0;color:var(--pink);text-shadow:0 0 18px var(--pink),3px 3px 0 #000}
.btn{font-family:'Rubik Mono One';font-size:17px;min-height:56px;min-width:250px;border:3px solid var(--ink);background:linear-gradient(180deg,#ffffff14,#00000040);color:var(--ink);border-radius:14px;cursor:pointer;transition:transform .08s,box-shadow .2s;box-shadow:0 5px 0 #000a;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#fff3,transparent);transform:skewX(-20deg);animation:shine 3s infinite}
@keyframes shine{60%,100%{left:130%}}
.btn:active{transform:scale(.93,.86);box-shadow:0 1px 0 #000a}
.btn.pink{border-color:var(--pink);color:#fff;background:linear-gradient(180deg,#ff2e88cc,#9a0f52cc);box-shadow:0 0 22px #ff2e8888,0 5px 0 #5a0830}
.btn.cyan{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px #1ef2ff44,0 5px 0 #000a}
.btn.lime{border-color:var(--lime);color:#1a0b2e;background:linear-gradient(180deg,#b6ff2e,#6fb50f);box-shadow:0 0 18px #b6ff2e66,0 5px 0 #3a5c08}
.btn.small{min-width:0;font-size:12px;padding:0 12px;min-height:48px}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tip{text-align:center;opacity:.6;font-size:18px;margin:0}
.remix{color:var(--cyan);font-size:20px}
#hud{position:fixed;inset:0;pointer-events:none}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:calc(env(safe-area-inset-top) + 10px) 14px 0}
.mid{text-align:center}
#hScore{font-family:'Rubik Mono One';font-size:22px;color:var(--lime);text-shadow:0 0 10px var(--lime)}
#hearts{font-size:24px;color:var(--pink);letter-spacing:2px;text-shadow:0 0 8px var(--pink)}
#hearts .empty{opacity:.2;text-shadow:none}
#hearts.shake{animation:sh .3s}
@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#hWave{font-family:'Rubik Mono One';font-size:15px;color:var(--cyan);margin-top:4px;text-shadow:0 0 10px var(--cyan)}
#hWeap{font-size:18px;margin-top:2px}
.icon-btn{pointer-events:auto;width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);background:#0008;color:var(--ink);font-family:'Rubik Mono One';font-size:18px;box-shadow:0 0 12px #fff3}
.swap{position:absolute;right:44px;bottom:calc(env(safe-area-inset-bottom) + 180px);width:64px;height:64px;font-size:11px;border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 14px #ffe12e66}
.swap:active{transform:scale(.9)}
#combo{position:absolute;top:22%;width:100%;text-align:center;font-family:'Rubik Mono One';font-size:34px;color:var(--pink);text-shadow:0 0 20px var(--pink),3px 3px 0 #000;opacity:0;transition:opacity .4s}
#combo.pop{animation:pop .25s}
@keyframes pop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
#ammoWrap{position:absolute;right:16px;bottom:calc(env(safe-area-inset-bottom) + 24px);width:16px;height:140px;border:2px solid var(--cyan);border-radius:10px;overflow:hidden;background:#0006}
#ammoBar{position:absolute;bottom:0;width:100%;background:var(--cyan);box-shadow:0 0 10px currentColor}
#ammoTxt{position:absolute;right:22px;bottom:0;writing-mode:vertical-rl;font-size:20px;color:var(--lime);white-space:nowrap}
#puWrap{position:absolute;left:14px;top:calc(env(safe-area-inset-top) + 110px);display:flex;flex-direction:column;gap:6px;font-size:20px}
.pu{background:#0008;border:2px solid var(--lime);border-radius:20px;padding:0 10px;color:var(--lime);box-shadow:0 0 10px #b6ff2e55}
.modal{position:fixed;inset:0;background:#10051caa;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
.panel{border:3px solid var(--pink);box-shadow:0 0 40px #ff2e8866,inset 0 0 30px #ff2e8822;border-radius:20px;padding:24px;background:linear-gradient(180deg,#2c1250f0,#170828f0);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:360px;width:100%;text-align:center;font-size:22px;animation:rise .3s}
.panel .joke{color:var(--lime);font-size:20px}
#cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding:10px 4px}
.card{--c:var(--cyan);flex:0 0 220px;scroll-snap-align:center;border:3px solid var(--c);border-radius:18px;padding:14px;background:linear-gradient(180deg,#ffffff0d,#0007);display:flex;flex-direction:column;gap:6px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 35%,transparent)}
.card.locked{filter:saturate(.5);opacity:.85}
.gun{height:14px;width:70%;border-radius:4px;box-shadow:0 0 14px currentColor;margin:4px 0 6px;position:relative}
.gun::after{content:'';position:absolute;left:10%;top:100%;width:16%;height:14px;background:inherit;border-radius:0 0 4px 4px}
.card h3{font-family:'Rubik Mono One';font-size:14px;margin:12px 0 0;color:var(--c)}
.card p{margin:0;font-size:18px;opacity:.8;min-height:44px}
.stat{display:flex;align-items:center;gap:6px;font-size:16px}.stat i{flex:1;height:8px;background:#fff2;border-radius:4px;overflow:hidden}.stat i b{display:block;height:100%}
.card .btn{min-width:0;font-size:13px;min-height:48px}
.badge{background:var(--lime);color:#1a0b2e;text-align:center;border-radius:10px;font-family:'Rubik Mono One';font-size:12px;padding:6px}
#chapters{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}
.chap{--c:var(--pink);display:flex;align-items:center;gap:14px;border:3px solid var(--c);border-radius:16px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 25%,transparent),#0006);color:var(--ink);padding:10px 14px;text-align:left;cursor:pointer;font-family:'VT323';min-height:64px;box-shadow:0 0 14px color-mix(in srgb,var(--c) 30%,transparent)}
.chap:active{transform:scale(.97)}
.chap.lock{filter:grayscale(1);opacity:.4}
.chap .num{font-family:'Rubik Mono One';font-size:28px;color:var(--c);text-shadow:0 0 10px var(--c)}
.chap .ct{display:flex;flex-direction:column}.chap b{font-family:'Rubik Mono One';font-size:14px;font-weight:400}.chap small{font-size:17px;opacity:.75}
#dlg{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 20px);max-width:520px;margin:0 auto;border:3px solid var(--cyan);border-radius:18px;background:linear-gradient(180deg,#1b0a33f2,#0d0418f2);padding:16px 18px 12px;box-shadow:0 0 30px #1ef2ff55;cursor:pointer;animation:rise .25s}
#dlg[data-who=foe]{border-color:var(--pink);box-shadow:0 0 30px #ff2e8866}
#dlg[data-who=you]{border-color:var(--lime);box-shadow:0 0 30px #b6ff2e55}
.dlg-name{position:absolute;top:-16px;left:16px;background:var(--cyan);color:#10051c;font-family:'Rubik Mono One';font-size:12px;padding:4px 10px;border-radius:8px}
#dlg[data-who=foe] .dlg-name{background:var(--pink);color:#fff}
#dlg[data-who=you] .dlg-name{background:var(--lime)}
#dlgText{font-size:26px;line-height:1.1;min-height:58px}
#dlgText.type{animation:typein .5s steps(20)}
@keyframes typein{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.dlg-next{text-align:right;font-size:16px;opacity:.6;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.15}}
#rows{width:100%;max-width:420px;max-height:55vh;overflow-y:auto;font-size:22px}
.lb{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid #fff2;align-items:center}
.lb.me{background:#ff2e8844;border-radius:8px}
.lb span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 6px currentColor}
#auth-status{font-size:18px;opacity:.8}