:root{--bg:#12071f;--panel:#1e1033;--red:#ff2e4d;--yellow:#ffd21f;--cyan:#25e6ff;--green:#3dff7a;--ink:#fff7e6}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:radial-gradient(circle at 20% 0,#3b1160 0,transparent 40%),radial-gradient(circle at 90% 10%,#5c0a24 0,transparent 35%),var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:radial-gradient(#fff 1.2px,transparent 1.3px);background-size:18px 18px}
.wrap{max-width:760px;margin:0 auto;padding:18px 14px 48px;position:relative;z-index:1}
.logo{font-size:clamp(34px,8vw,58px);font-weight:1000;letter-spacing:.5px;text-align:center;line-height:.95;text-transform:uppercase;text-shadow:4px 4px 0 var(--red)}
.logo span{color:var(--yellow)}
.tag{text-align:center;opacity:.92;font-weight:700;margin:10px 0 20px}
.card{background:var(--panel);border:3px solid #000;border-radius:20px;box-shadow:7px 7px 0 #000;padding:18px;margin:14px 0}
label{font-weight:900;display:block;margin:14px 0 7px}
input,select{width:100%;padding:14px;border-radius:12px;border:3px solid #000;font-size:18px;font-weight:700;color:#161616}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
.pick{border:3px solid #000;background:#2c1a4d;border-radius:16px;padding:12px 6px;text-align:center;cursor:pointer;color:#fff;font-weight:900}
.pick .emo{font-size:42px;display:block}.pick.sel{background:var(--yellow);color:#111;transform:rotate(-2deg) scale(1.03)}
.btn{display:block;width:100%;border:3px solid #000;border-radius:14px;padding:15px;font-size:19px;font-weight:1000;cursor:pointer;background:var(--red);color:#fff;box-shadow:5px 5px 0 #000;text-align:center;text-decoration:none;margin:10px 0}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.btn.green{background:#14b84a}.btn.cyan{background:#0799b8}.btn.yellow{background:var(--yellow);color:#111}.btn.ghost{background:#fff;color:#111}
.linkbox{word-break:break-all;background:#0b0516;border:2px dashed var(--yellow);border-radius:12px;padding:12px;font-size:14px}
.small{font-size:13px;opacity:.85;line-height:1.5}.center{text-align:center}
/* PLAY / ARENA */
.stage{position:relative;background:linear-gradient(#241043,#170a2b);border:3px solid #000;border-radius:22px;box-shadow:7px 7px 0 #000;min-height:520px;overflow:hidden}
.ring{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:82%;height:120px;background:#7a1730;border:4px solid #fff;border-radius:50%;opacity:.9}
.giftwrap{text-align:center;padding:46px 14px}
.gift{font-size:132px;cursor:pointer;display:inline-block;animation:bounce 1s infinite;user-select:none;-webkit-tap-highlight-color:transparent}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
.gift.shake1{animation:shake .25s infinite}.gift.shake2{animation:shake .12s infinite}
@keyframes shake{0%{transform:translateX(-7px) rotate(-5deg)}50%{transform:translateX(7px) rotate(5deg)}100%{transform:translateX(-7px)}}
.hpbar{height:26px;background:#111;border:3px solid #000;border-radius:99px;overflow:hidden;margin:12px}
.hpfill{height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));transition:width .45s}
.hud{display:flex;justify-content:space-between;padding:10px 14px 0;font-weight:1000}
.victim{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);text-align:center;z-index:5;transition:transform .18s}
.victim .face{font-size:118px;line-height:1;filter:drop-shadow(5px 7px 0 rgba(0,0,0,.45))}
.victim .name{background:var(--yellow);color:#111;border:3px solid #000;border-radius:99px;padding:6px 16px;font-weight:1000;font-size:20px;display:inline-block;margin-top:6px;max-width:88vw}
.victim.hit{animation:vhit .38s}.victim.spin{animation:vspin .6s}.victim.squash{animation:vsquash .55s}.victim.fly{animation:vfly .6s}
@keyframes vhit{0%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 22px)) rotate(-9deg)}60%{transform:translateX(calc(-50% + 20px)) rotate(8deg)}100%{transform:translateX(-50%)}}
@keyframes vspin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes vsquash{0%{transform:translateX(-50%) scaleY(1)}45%{transform:translateX(-50%) scaleY(.48) scaleX(1.35)}100%{transform:translateX(-50%) scaleY(1)}}
@keyframes vfly{0%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-110px) rotate(18deg)}100%{transform:translateX(-50%) translateY(0)}}
.attacker{position:absolute;bottom:105px;font-size:92px;z-index:6;transition:all .55s cubic-bezier(.2,.9,.3,1.2);text-align:center;line-height:1}
.attacker .who{display:block;font-size:13px;background:#111;color:#fff;border:2px solid #fff;border-radius:99px;padding:4px 8px;margin-top:5px;font-weight:900;max-width:170px}
.attacker.from-left{left:-180px}.attacker.from-right{right:-180px;left:auto}.attacker.from-top{top:-180px;bottom:auto;left:50%;transform:translateX(-50%)}
.attacker.in-left{left:6%}.attacker.in-right{right:6%}.attacker.in-top{top:64px}
.banner{position:absolute;top:52px;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--red);border:3px solid #000;box-shadow:5px 5px 0 #000;color:#fff;font-weight:1000;padding:10px 16px;border-radius:12px;z-index:9;text-align:center;width:92%;font-size:clamp(17px,4.5vw,25px)}
.comic{position:absolute;z-index:10;font-weight:1000;font-size:clamp(30px,8vw,54px);color:var(--yellow);text-shadow:3px 3px 0 var(--red),-2px -2px 0 #000;animation:pop .6s forwards;pointer-events:none}
@keyframes pop{0%{transform:scale(.3) rotate(-14deg);opacity:0}35%{opacity:1;transform:scale(1.25) rotate(5deg)}100%{transform:scale(1) translateY(-35px);opacity:0}}
.dmg{position:absolute;z-index:10;color:#ff5266;font-weight:1000;font-size:28px;animation:pop .8s forwards;pointer-events:none}
.flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:8;pointer-events:none}.flash.on{animation:fl .28s}@keyframes fl{0%{opacity:.75}100%{opacity:0}}
.shakeScreen{animation:scr .45s}@keyframes scr{0%,100%{transform:translate(0)}20%{transform:translate(-10px,5px)}40%{transform:translate(10px,-6px)}60%{transform:translate(-8px,-4px)}80%{transform:translate(8px,4px)}}
.controls{display:flex;flex-wrap:wrap;gap:10px;padding:12px}.controls .btn{margin:0;flex:1 1 150px;width:auto;font-size:16px;padding:13px 8px}
@media(max-width:560px){.bubble-a{bottom:auto;top:118px}.bubble-v{bottom:auto;top:196px}.stage{min-height:480px}}
#escapeBtn{position:absolute;z-index:11;width:auto;padding:10px 14px;font-size:15px}
.hidden{display:none!important}
.ko{font-size:clamp(52px,14vw,96px);font-weight:1000;color:var(--yellow);text-shadow:5px 5px 0 var(--red);text-align:center}
.confetti{position:absolute;width:10px;height:16px;z-index:12;animation:fall linear forwards}@keyframes fall{to{transform:translateY(560px) rotate(720deg);opacity:0}}
.muzzle{font-size:44px;position:absolute;z-index:9;animation:pop .25s forwards}
footer{text-align:center;opacity:.75;font-size:12px;padding:18px}
/* v2: real GIF panels */
.attacker.gifbox{width:min(42%,215px);bottom:118px}
.attacker.gifbox img.gif{width:100%;display:block;border:3px solid #000;border-radius:14px;box-shadow:6px 6px 0 #000;background:#000}
.attacker.gifbox .who{max-width:100%;margin-left:auto;margin-right:auto}
.attacker.gifbox.from-top{width:min(52%,250px)}
.attacker .fallback{font-size:92px;line-height:1}
.boomwrap{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;font-size:120px}
.boomfx{width:100%;height:100%;object-fit:cover;opacity:.96}
.mini{position:absolute;width:27%;z-index:6}.mini img{width:100%;border:3px solid #000;border-radius:12px;box-shadow:4px 4px 0 #000;display:block}
/* v4: Hinglish dialogue bubbles */
.bubble{position:absolute;z-index:8;background:#fff;color:#111;border:3px solid #000;border-radius:16px;box-shadow:4px 4px 0 #000;padding:9px 14px;font-weight:900;font-size:clamp(15px,4vw,21px);max-width:64%;text-align:center;animation:bubpop .25s ease-out}
.bubble::after{content:'';position:absolute;bottom:-11px;left:50%;margin-left:-8px;border:8px solid transparent;border-top:11px solid #000;border-bottom:0}
.bubble-v{left:50%;transform:translateX(-50%);bottom:296px;background:#ffe082}
.bubble-a{bottom:352px}.bubble-a.bl{left:3%}.bubble-a.br{right:3%}.bubble-a.bc{left:50%;transform:translateX(-50%)}
@keyframes bubpop{from{scale:.6;opacity:0}to{scale:1;opacity:1}}