:root {
  --bg: #0d0618; --panel: #1a0f2e; --panel-border: #2d1f4e;
  --accent: #ff4444; --gold: #ffcc00; --neon-green: #00ff88;
  --neon-blue: #00ccff; --neon-purple: #cc44ff;
  --text: #e0d8f0; --text-dim: #8878a8;
}
* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
body { background:var(--bg); color:var(--text); font-family:'Fredoka One',cursive; overflow:hidden; height:100vh; display:flex; flex-direction:column; }

.top-hud { display:flex; justify-content:space-between; align-items:center; padding:8px 16px; background:linear-gradient(180deg,rgba(0,0,0,.8),transparent); z-index:100; flex-shrink:0; min-height:44px; }
.currency-bar { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.currency { font-family:'Orbitron',sans-serif; font-size:13px; display:flex; align-items:center; gap:5px; }
.currency .icon { font-size:16px; } .currency .val { font-weight:900; }
.pp-val { color:var(--gold); } .ds-val { color:var(--neon-purple); }
.dps-val { color:var(--neon-green); font-size:11px; }
.combo-display { font-family:'Bangers',cursive; font-size:22px; color:var(--neon-green); text-shadow:0 0 10px #00ff8866; min-width:90px; text-align:right; }

.main-layout { display:flex; flex:1; overflow:hidden; }
.arena-panel { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-width:0; }
.bg-stars { position:absolute; inset:0; background: radial-gradient(1px 1px at 10% 20%,#fff4 0%,transparent 100%), radial-gradient(1px 1px at 30% 60%,#fff2 0%,transparent 100%), radial-gradient(2px 2px at 50% 10%,#fff3 0%,transparent 100%), radial-gradient(1px 1px at 70% 80%,#fff2 0%,transparent 100%), radial-gradient(1px 1px at 90% 40%,#fff4 0%,transparent 100%); pointer-events:none; }

.side-panel { width:340px; flex-shrink:0; display:flex; flex-direction:column; background:var(--panel); border-left:2px solid var(--panel-border); z-index:50; }
.tab-bar { display:flex; border-bottom:2px solid var(--panel-border); flex-shrink:0; }
.tab-btn { flex:1; padding:10px 4px; background:transparent; border:none; color:var(--text-dim); font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:1px; transition:all .15s; border-bottom:3px solid transparent; }
.tab-btn:hover { color:var(--text); background:#ffffff08; }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); background:#ff444410; }
.tab-content { flex:1; overflow-y:auto; padding:10px; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.tab-content::-webkit-scrollbar { width:6px; } .tab-content::-webkit-scrollbar-thumb { background:#444; border-radius:3px; }
.tab-page { display:none; } .tab-page.active { display:block; }

.section-title { font-family:'Orbitron',sans-serif; font-size:11px; color:var(--neon-blue); text-transform:uppercase; letter-spacing:2px; margin:14px 0 8px; padding-bottom:4px; border-bottom:1px solid #ffffff11; }
.section-title:first-child { margin-top:0; }

.upgrade-card { background:#12082a; border:1px solid var(--panel-border); border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:all .15s; position:relative; overflow:hidden; }
.upgrade-card:hover { border-color:#5a4a7a; background:#1a0e35; }
.upgrade-card.affordable { border-color:var(--neon-green); box-shadow:0 0 8px #00ff8822; }
.upgrade-card.affordable:hover { box-shadow:0 0 16px #00ff8844; }
.upgrade-card.maxed { opacity:.5; cursor:default; border-color:#333; }
.uc-top { display:flex; justify-content:space-between; align-items:center; }
.uc-name { font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px; }
.uc-level { font-family:'Press Start 2P',monospace; font-size:8px; color:var(--neon-blue); background:#00ccff15; padding:2px 6px; border-radius:4px; }
.uc-desc { font-family:'Fredoka One',cursive; font-size:11px; color:var(--text-dim); margin:4px 0; }
.uc-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.uc-effect { font-family:'Orbitron',sans-serif; font-size:10px; color:var(--neon-green); }
.uc-cost { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; display:flex; align-items:center; gap:4px; }
.uc-cost.pp { color:var(--gold); } .uc-cost.ds { color:var(--neon-purple); }
.uc-bar { height:3px; background:#333; border-radius:2px; margin-top:6px; overflow:hidden; }
.uc-bar-fill { height:100%; background:var(--neon-blue); border-radius:2px; transition:width .3s; }

.unlock-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.unlock-card { background:#12082a; border:1px solid var(--panel-border); border-radius:10px; padding:10px; text-align:center; cursor:pointer; transition:all .2s; }
.unlock-card:hover { border-color:#5a4a7a; }
.unlock-card.affordable { border-color:var(--neon-green); box-shadow:0 0 8px #00ff8822; }
.unlock-card.owned { border-color:var(--gold); box-shadow:0 0 8px #ffcc0022; cursor:pointer; }
.unlock-card.active-item { border-color:var(--neon-green); box-shadow:0 0 12px #00ff8844; }
.unlock-card.locked { opacity:.4; }
.unlock-icon { font-size:28px; margin-bottom:4px; }
.unlock-name { font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; }
.unlock-cost { font-family:'Orbitron',sans-serif; font-size:9px; color:var(--neon-purple); margin-top:3px; }
.unlock-status { font-family:'Press Start 2P',monospace; font-size:7px; margin-top:4px; }
.unlock-status.equipped { color:var(--neon-green); }

.prestige-box { background:linear-gradient(135deg,#1a0535,#2a1050); border:2px solid var(--neon-purple); border-radius:14px; padding:16px; text-align:center; margin-bottom:14px; }
.prestige-title { font-family:'Bangers',cursive; font-size:22px; color:var(--neon-purple); text-shadow:0 0 15px #cc44ff66; letter-spacing:2px; }
.prestige-info { font-size:11px; color:var(--text-dim); margin:6px 0; line-height:1.5; }
.prestige-gain { font-family:'Orbitron',sans-serif; font-size:18px; color:var(--neon-purple); font-weight:900; margin:6px 0; }
.prestige-btn { font-family:'Bangers',cursive; font-size:20px; padding:10px 30px; background:linear-gradient(180deg,#9944ff,#6622cc); color:#fff; border:2px solid #bb66ff; border-radius:10px; cursor:pointer; letter-spacing:2px; transition:all .15s; margin-top:8px; }
.prestige-btn:hover { transform:scale(1.05); box-shadow:0 0 25px #cc44ff66; }
.prestige-btn:disabled { opacity:.3; cursor:not-allowed; transform:none; box-shadow:none; }

.ascension-box { border-color:var(--gold); background:linear-gradient(135deg,#1a1005,#2a1a08); }
.ascension-btn { background:linear-gradient(180deg,#ffcc00,#cc8800); border-color:var(--gold); color:#000; }

.claude-level-box { background:linear-gradient(135deg,#0d1a2e,#1a2040); border:1px solid #334; border-radius:10px; padding:10px; text-align:center; margin-bottom:10px; }
.claude-rank { font-family:'Bangers',cursive; font-size:20px; color:var(--gold); letter-spacing:1px; }
.claude-rank-sub { font-family:'Orbitron',sans-serif; font-size:9px; color:var(--text-dim); margin-top:2px; }
.rank-stars { color:var(--gold); font-size:12px; letter-spacing:2px; margin-top:4px; }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.stat-box { background:#12082a; border:1px solid var(--panel-border); border-radius:8px; padding:8px; text-align:center; }
.stat-val { font-family:'Orbitron',sans-serif; font-size:14px; font-weight:900; color:var(--gold); }
.stat-label { font-size:8px; color:var(--text-dim); font-family:'Orbitron',sans-serif; text-transform:uppercase; margin-top:2px; }

.badge-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.badge-card { background:#12082a; border:1px solid var(--panel-border); border-radius:10px; padding:10px; text-align:center; transition:all .2s; }
.badge-card.earned { border-color:var(--gold); box-shadow:0 0 10px #ffcc0022; }
.badge-card.unearned { opacity:.4; }
.badge-icon { font-size:28px; margin-bottom:4px; }
.badge-name { font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; margin-bottom:2px; }
.badge-desc { font-size:8px; color:var(--text-dim); font-family:'Fredoka One',cursive; }
.badge-bonus { font-family:'Orbitron',sans-serif; font-size:8px; color:var(--neon-green); margin-top:3px; }
.badge-progress { height:3px; background:#333; border-radius:2px; margin-top:5px; overflow:hidden; }
.badge-progress-fill { height:100%; background:var(--gold); border-radius:2px; transition:width .3s; }

.weapon-bar { position:absolute; bottom:55px; display:flex; gap:6px; background:rgba(0,0,0,.6); padding:6px 10px; border-radius:14px; border:1px solid #ffffff15; z-index:10; }
.weapon-btn { width:48px; height:48px; border-radius:10px; border:2px solid #444; background:#1a1a2e; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; position:relative; }
.weapon-btn:hover { border-color:#888; transform:scale(1.06); }
.weapon-btn.active { border-color:var(--accent); background:#441111; box-shadow:0 0 12px #ff000033; }
.weapon-btn.locked { opacity:.25; cursor:not-allowed; filter:grayscale(1); }
.weapon-btn .emoji { font-size:22px; }
.weapon-btn .key-hint { position:absolute; bottom:-2px; right:-2px; font-family:'Press Start 2P',monospace; font-size:6px; color:#666; background:#000; border-radius:3px; padding:1px 3px; }
.weapon-btn .lock-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(0,0,0,.6); border-radius:8px; }

.health-bar-wrap { position:absolute; bottom:14px; width:60%; max-width:300px; z-index:10; text-align:center; }
.claude-title { font-family:'Bangers',cursive; font-size:14px; color:var(--gold); text-shadow:0 0 8px #ffcc0044; margin-bottom:2px; letter-spacing:1px; }
.health-label { font-family:'Press Start 2P',monospace; font-size:7px; color:#aaa; margin-bottom:3px; }
.health-bar { width:100%; height:18px; background:#222; border-radius:9px; border:2px solid #444; overflow:hidden; }
.health-fill { height:100%; background:linear-gradient(90deg,#ff2222,#ff6644,#44ff44); border-radius:7px; transition:width .25s; box-shadow:inset 0 -2px 4px rgba(0,0,0,.3), inset 0 2px 2px rgba(255,255,255,.15); }
.ko-counter { font-family:'Press Start 2P',monospace; font-size:7px; color:var(--accent); margin-top:3px; }

.claude-container { position:relative; display:flex; flex-direction:column; align-items:center; transition:transform .05s; z-index:5; }
.claude-container.hit { animation:hitShake .3s ease-out; }
.claude-container.hit-hard { animation:hitHard .45s ease-out; }
.claude-container.dodge-left { animation:dodgeLeft .5s ease-out; }
.claude-container.dodge-right { animation:dodgeRight .5s ease-out; }
.claude-container.ko-fall { transition:transform .7s ease-in !important; transform:rotate(90deg) translateX(60px) !important; }
.claude-container.ko-rise { transition:transform .4s cubic-bezier(.175,.885,.32,1.275) !important; transform:none !important; }
@keyframes hitShake { 0%{transform:translateY(0)} 15%{transform:translateY(8px) scaleY(.94)} 40%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
@keyframes hitHard { 0%{transform:translate(0,0) rotate(0)} 10%{transform:translate(-12px,6px) rotate(-5deg)} 25%{transform:translate(12px,-3px) rotate(5deg)} 40%{transform:translate(-6px,4px) rotate(-2deg)} 100%{transform:translate(0,0) rotate(0)} }
@keyframes dodgeLeft { 0%{transform:translateX(0) rotate(0)} 30%{transform:translateX(-70px) rotate(-6deg)} 100%{transform:translateX(0) rotate(0)} }
@keyframes dodgeRight { 0%{transform:translateX(0) rotate(0)} 30%{transform:translateX(70px) rotate(6deg)} 100%{transform:translateX(0) rotate(0)} }
.claude-body { position:relative; width:clamp(120px,22vw,190px); height:clamp(220px,48vh,370px); }

.head { position:absolute; width:55%; height:28%; top:0; left:50%; transform:translateX(-50%); background:radial-gradient(ellipse at 40% 35%,var(--c-skin,#ffe0c2),var(--c-skin-d,#f5c99a)); border-radius:50% 50% 45% 45%; border:3px solid var(--c-skin-b,#d4a373); z-index:3; }
.eye { position:absolute; top:40%; width:18%; height:22%; background:#fff; border-radius:50%; border:2px solid #555; overflow:hidden; }
.eye.left { left:22%; } .eye.right { right:22%; }
.pupil { position:absolute; width:55%; height:55%; background:radial-gradient(circle at 40% 40%,var(--c-pupil,#6a4c93),var(--c-pupil-d,#2d1b4e)); border-radius:50%; top:25%; left:25%; transition:all .1s; }
.eye-shine { position:absolute; width:25%; height:25%; background:#fff; border-radius:50%; top:18%; left:18%; }
.mouth { position:absolute; bottom:18%; left:50%; transform:translateX(-50%); width:30%; height:10%; border-bottom:3px solid #c97a5a; border-radius:0 0 50% 50%; transition:all .15s; }
.mouth.pain { width:40%; height:18%; border:3px solid #c97a5a; border-radius:50%; background:#8b0000; bottom:14%; }
.mouth.ouch { width:25%; height:25%; border:3px solid #c97a5a; border-radius:50%; background:#5a0000; bottom:12%; }
.eyebrow { position:absolute; top:32%; width:20%; height:3px; background:#8b6b4a; border-radius:2px; transition:all .15s; }
.eyebrow.left { left:22%; } .eyebrow.right { right:22%; }
.eyebrow.left.pain { transform:rotate(20deg) translateY(-4px); }
.eyebrow.right.pain { transform:rotate(-20deg) translateY(-4px); }
.hair { position:absolute; top:-5%; left:50%; transform:translateX(-50%); width:62%; height:22%; background:var(--c-hair,#5a3a1a); border-radius:50% 50% 0 0; z-index:4; }
.torso { position:absolute; width:75%; height:35%; top:25%; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,var(--c-shirt,#e8855e),var(--c-shirt-d,#d4704e)); border-radius:30% 30% 10% 10%; border:3px solid var(--c-shirt-b,#b85a3a); z-index:2; }
.shirt-logo { position:absolute; top:35%; left:50%; transform:translateX(-50%); font-family:'Bangers',cursive; font-size:clamp(9px,1.5vw,14px); color:#fff8; letter-spacing:1px; }
.arm { position:absolute; top:28%; width:18%; height:28%; background:linear-gradient(180deg,var(--c-skin,#ffe0c2),var(--c-skin-d,#f0c090)); border:2px solid var(--c-skin-b,#d4a373); border-radius:40%; z-index:1; transition:all .15s; }
.arm.left { left:2%; transform:rotate(10deg); } .arm.right { right:2%; transform:rotate(-10deg); }
.arm.left.guard { left:15%; top:55%; transform:rotate(30deg); z-index:5; }
.arm.right.guard { right:15%; top:55%; transform:rotate(-30deg); z-index:5; }
.pants { position:absolute; width:60%; height:22%; top:56%; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,var(--c-pants,#3a5a8c),var(--c-pants-d,#2d4a73)); border-radius:5% 5% 20% 20%; border:3px solid var(--c-pants-b,#1e3550); z-index:2; }
.leg { position:absolute; bottom:0; width:22%; height:28%; background:linear-gradient(180deg,var(--c-pants,#3a5a8c),var(--c-pants-d,#2d4a73)); border:2px solid var(--c-pants-b,#1e3550); z-index:1; }
.leg.left { left:22%; border-radius:0 0 30% 30%; } .leg.right { right:22%; border-radius:0 0 30% 30%; }
.shoe { position:absolute; bottom:-3px; width:110%; height:18%; background:#333; border-radius:40% 40% 50% 50%; }
.leg.left .shoe { left:-10%; } .leg.right .shoe { right:-10%; }

.acc { position:absolute; z-index:10; display:none; }
.acc-hat { top:-18%; left:50%; transform:translateX(-50%); width:70%; height:25%; }
.acc-hat .hat-brim { position:absolute; bottom:0; left:-10%; width:120%; height:30%; background:#4a1a6b; border-radius:50%; }
.acc-hat .hat-cone { position:absolute; bottom:20%; left:20%; width:60%; height:100%; background:linear-gradient(180deg,#9944ff,#6a2c91); clip-path:polygon(50% 0%,0% 100%,100% 100%); }
.acc-hat .hat-star { position:absolute; top:25%; left:50%; transform:translateX(-50%); font-size:10px; }
.acc-tie { top:48%; left:50%; transform:translateX(-50%); width:10%; z-index:4; }
.acc-tie::before { content:''; display:block; width:100%; padding-bottom:40%; background:#cc2222; clip-path:polygon(0 0,100% 0,60% 100%,40% 100%); }
.acc-tie::after { content:''; display:block; width:140%; margin-left:-20%; padding-bottom:150%; background:#cc2222; clip-path:polygon(30% 0,70% 0,50% 100%); }
.acc-crown { top:-8%; left:50%; transform:translateX(-50%); font-size:clamp(16px,3vw,28px); }
.acc-antenna { top:-10%; left:50%; transform:translateX(-50%); width:4px; height:15%; }
.acc-antenna::before { content:''; display:block; width:100%; height:70%; background:linear-gradient(180deg,#888,#aaa); }
.acc-antenna::after { content:''; display:block; width:10px; height:10px; background:radial-gradient(circle,#ff0000,#cc0000); border-radius:50%; margin-left:-3px; margin-top:-2px; animation:antennaBlink 1s infinite alternate; }
@keyframes antennaBlink { 0%{opacity:.4} 100%{opacity:1} }

.nosebleed { position:absolute; bottom:22%; left:50%; transform:translateX(-50%); width:4px; height:0; background:linear-gradient(180deg,#cc0000,#ff3333); border-radius:0 0 3px 3px; z-index:5; transition:height .3s; }
.black-eye { position:absolute; top:36%; width:24%; height:28%; border-radius:50%; background:radial-gradient(circle,rgba(60,0,80,.6),transparent 70%); z-index:4; opacity:0; transition:opacity .5s; pointer-events:none; }
.black-eye.left { left:18%; } .black-eye.right { right:18%; }
.sweat { position:absolute; width:7px; height:11px; background:radial-gradient(ellipse at 30% 30%,#aaddff,#6bb8e8); border-radius:50% 50% 50% 50%/60% 60% 40% 40%; opacity:0; z-index:5; }
.sweat.show { animation:sweatDrop .8s ease-in forwards; }
@keyframes sweatDrop { 0%{opacity:0;transform:translateY(0)} 20%{opacity:1} 100%{opacity:0;transform:translateY(40px)} }
.tear { position:absolute; width:5px; height:8px; background:#66ccff; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; z-index:5; opacity:0; }
.tear.left { top:52%; left:28%; } .tear.right { top:52%; right:28%; }
.tear.show { animation:tearFall .7s ease-in infinite; }
@keyframes tearFall { 0%{opacity:0;transform:translateY(0)} 20%{opacity:1} 100%{opacity:0;transform:translateY(25px)} }
.dizzy-stars { position:absolute; top:-8%; left:50%; transform:translateX(-50%); width:80px; height:30px; z-index:10; opacity:0; transition:opacity .3s; }
.dizzy-stars.show { opacity:1; }
.dizzy-star { position:absolute; font-size:14px; animation:orbit 1s linear infinite; }
.dizzy-star:nth-child(2) { animation-delay:.33s; }
.dizzy-star:nth-child(3) { animation-delay:.66s; }
@keyframes orbit { 0%{transform:rotate(0deg) translateX(30px) rotate(0deg)} 100%{transform:rotate(360deg) translateX(30px) rotate(-360deg)} }

.hit-zone { position:absolute; z-index:10; border-radius:50%; cursor:inherit; }
.hit-zone:hover::after { content:''; position:absolute; inset:-3px; border:2px dashed #ff444488; border-radius:inherit; animation:zonePulse .8s infinite; }
.hit-zone.taunt-target { box-shadow:0 0 20px #ffcc00, 0 0 40px #ffcc0088; animation:tauntZonePulse .4s infinite alternate; }
@keyframes tauntZonePulse { 0%{box-shadow:0 0 10px #ffcc00} 100%{box-shadow:0 0 30px #ffcc00,0 0 60px #ffcc0066} }
@keyframes zonePulse { 0%,100%{opacity:.3} 50%{opacity:.8} }
.zone-face { width:48%; height:24%; top:2%; left:26%; border-radius:45%; }
.zone-gut { width:55%; height:18%; top:35%; left:22%; border-radius:40%; }
.zone-nuts { width:40%; height:14%; top:62%; left:30%; }
.zone-left-leg { width:18%; height:22%; top:75%; left:24%; border-radius:30%; }
.zone-right-leg { width:18%; height:22%; top:75%; right:24%; border-radius:30%; }
.zone-label { position:absolute; font-family:'Press Start 2P',monospace; font-size:6px; color:#ff666688; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; bottom:-12px; left:50%; transform:translateX(-50%); }
.hit-zone:hover .zone-label { opacity:1; }

.speech-bubble { position:absolute; top:-12%; right:-50%; background:#fff; border-radius:16px; padding:6px 12px; font-family:'Fredoka One',cursive; font-size:11px; color:#333; white-space:nowrap; opacity:0; transform:scale(0); transition:all .2s cubic-bezier(.175,.885,.32,1.275); z-index:20; box-shadow:0 3px 12px rgba(0,0,0,.3); pointer-events:none; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.speech-bubble.show { opacity:1; transform:scale(1); }
.speech-bubble::after { content:''; position:absolute; bottom:-7px; left:18px; border:7px solid transparent; border-top-color:#fff; border-bottom:0; }

.auto-indicator { position:absolute; top:8px; left:8px; font-family:'Orbitron',sans-serif; font-size:9px; color:var(--neon-green); background:#00ff8815; border:1px solid #00ff8844; padding:4px 8px; border-radius:8px; z-index:10; display:none; }
.auto-indicator.show { display:flex; align-items:center; gap:5px; }
.auto-dot { width:6px; height:6px; background:var(--neon-green); border-radius:50%; animation:autoPulse .5s infinite alternate; }
@keyframes autoPulse { 0%{opacity:.4} 100%{opacity:1} }

/* Taunt indicator */
.taunt-indicator { position:absolute; top:8px; right:8px; font-family:'Orbitron',sans-serif; font-size:10px; color:var(--accent); background:rgba(255,68,68,.15); border:1px solid #ff444488; padding:6px 12px; border-radius:8px; z-index:10; display:none; text-align:center; }
.taunt-indicator.show { display:block; animation:tauntPulse 1s infinite alternate; }
@keyframes tauntPulse { 0%{border-color:#ff444444} 100%{border-color:#ff4444} }
.taunt-text { font-weight:700; margin-bottom:3px; }
.taunt-interrupt { font-size:8px; color:var(--gold); }
.taunt-zone { color:var(--accent); font-weight:900; }

/* Buff tray */
.buff-tray { position:absolute; top:36px; left:8px; display:flex; flex-direction:column; gap:4px; z-index:10; }
.buff-pill { font-family:'Orbitron',sans-serif; font-size:8px; padding:3px 8px; border-radius:6px; display:flex; align-items:center; gap:4px; animation:buffFadeIn .2s ease-out; white-space:nowrap; }
.buff-pill.dmg { color:#ff8844; background:rgba(255,136,68,.15); border:1px solid #ff884444; }
.buff-pill.pp { color:var(--neon-green); background:rgba(0,255,136,.12); border:1px solid #00ff8844; }
.buff-pill.dodge { color:var(--neon-purple); background:rgba(153,68,255,.15); border:1px solid #994fff44; }
@keyframes buffFadeIn { 0%{opacity:0;transform:translateX(-8px)} 100%{opacity:1;transform:translateX(0)} }

/* Zone combo hint */
.zone-combo-hint { position:absolute; bottom:110px; font-family:'Orbitron',sans-serif; font-size:9px; color:var(--neon-blue); background:rgba(0,204,255,.1); border:1px solid #00ccff44; padding:3px 8px; border-radius:6px; z-index:10; }

.ko-flash { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Bangers',cursive; font-size:clamp(60px,15vw,140px); color:#ff2222; text-shadow:4px 4px 0 #000,0 0 60px #ff0000aa; z-index:500; pointer-events:none; animation:koFlash 1.2s ease-out forwards; letter-spacing:8px; }
@keyframes koFlash { 0%{transform:translate(-50%,-50%) scale(4);opacity:0} 15%{transform:translate(-50%,-50%) scale(.9);opacity:1} 50%{opacity:1} 100%{transform:translate(-50%,-50%) scale(.6) translateY(-40px);opacity:0} }
.ko-reward-float { position:fixed; top:60%; left:50%; transform:translateX(-50%); font-family:'Orbitron',sans-serif; font-size:20px; font-weight:900; color:var(--gold); text-shadow:2px 2px 0 #000; z-index:500; pointer-events:none; animation:koRewardFloat 1.5s ease-out forwards; }
@keyframes koRewardFloat { 0%{opacity:0;transform:translateX(-50%) translateY(20px)} 15%{opacity:1;transform:translateX(-50%) translateY(0)} 70%{opacity:1} 100%{opacity:0;transform:translateX(-50%) translateY(-50px)} }

.impact { position:fixed; pointer-events:none; z-index:200; animation:impactPop .45s ease-out forwards; font-size:45px; }
@keyframes impactPop { 0%{transform:scale(0) rotate(-20deg);opacity:1} 40%{transform:scale(1.3) rotate(5deg);opacity:1} 100%{transform:scale(.4) rotate(10deg) translateY(-40px);opacity:0} }
.float-text { position:fixed; pointer-events:none; z-index:200; font-family:'Bangers',cursive; text-shadow:2px 2px 0 #000,-1px -1px 0 #000; animation:floatUp .9s ease-out forwards; }
.pp-loss-float { position:fixed; pointer-events:none; z-index:200; font-family:'Bangers',cursive; font-size:28px; color:#ff3333; text-shadow:2px 2px 0 #000,-1px -1px 0 #000; animation:ppLossFloat 2.5s ease-out forwards; transform:translateX(-50%); }
@keyframes ppLossFloat { 0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.3)} 30%{opacity:1;transform:translateX(-50%) translateY(-20px) scale(1)} 100%{opacity:0;transform:translateX(-50%) translateY(-120px) scale(1)} }
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-90px) scale(1.3)} }
.flash { position:fixed; inset:0; opacity:0; pointer-events:none; z-index:150; animation:screenFlash .2s ease-out; }
.flash.red { background:#f00; } .flash.white { background:#fff; } .flash.yellow { background:#ffaa00; }
@keyframes screenFlash { 0%{opacity:.3} 100%{opacity:0} }
body.screenshake { animation:screenshake .3s ease-out; }
@keyframes screenshake { 15%{transform:translate(-5px,3px)} 30%{transform:translate(5px,-2px)} 45%{transform:translate(-3px,4px)} 100%{transform:translate(0,0)} }
body.screenshake-heavy { animation:screenshakeH .4s ease-out; }
@keyframes screenshakeH { 10%{transform:translate(-10px,7px) rotate(-1deg)} 20%{transform:translate(10px,-5px) rotate(1deg)} 30%{transform:translate(-7px,8px)} 100%{transform:translate(0,0) rotate(0)} }

.badge-popup { position:fixed; top:60px; right:360px; background:linear-gradient(135deg,#2a1a40,#1a0f30); border:2px solid var(--gold); border-radius:14px; padding:12px 18px; z-index:300; display:flex; align-items:center; gap:10px; animation:badgeSlide 3s ease-out forwards; box-shadow:0 0 30px #ffcc0033; }
@keyframes badgeSlide { 0%{transform:translateX(100px);opacity:0} 10%{transform:translateX(0);opacity:1} 80%{opacity:1} 100%{opacity:0;transform:translateY(-20px)} }
.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); font-family:'Orbitron',sans-serif; font-size:11px; background:#1a0f2eee; border:1px solid var(--neon-green); color:var(--neon-green); padding:8px 16px; border-radius:8px; z-index:300; animation:toastAnim 2s ease-out forwards; white-space:nowrap; }
@keyframes toastAnim { 0%{opacity:0;transform:translateX(-50%) translateY(20px)} 15%{opacity:1;transform:translateX(-50%) translateY(0)} 75%{opacity:1} 100%{opacity:0} }
canvas#bloodCanvas { position:absolute; inset:0; pointer-events:none; z-index:8; }

/* === TALENT TREE === */
.talent-tree { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.talent-branch { border-left:4px solid var(--branch-color,#444); background:#0a0518; border-radius:0 10px 10px 0; padding:10px; }
.branch-title { font-family:'Bangers',cursive; font-size:14px; letter-spacing:2px; margin-bottom:8px; text-shadow:0 0 8px currentColor; }
.talent-node { display:flex; align-items:center; gap:8px; background:#12082a; border:1px solid #333; border-radius:8px; padding:6px 10px; margin-bottom:6px; cursor:pointer; transition:all .15s; }
.talent-node:last-child { margin-bottom:0; }
.talent-node:hover { border-color:#666; }
.talent-node.affordable { border-color:var(--neon-green); box-shadow:0 0 6px #00ff8822; }
.talent-node.maxed { border-color:var(--gold); opacity:.7; }
.talent-node.locked { opacity:.3; cursor:not-allowed; }
.talent-icon { font-size:22px; flex-shrink:0; }
.talent-info { flex:1; min-width:0; }
.talent-name { font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; text-transform:capitalize; margin-bottom:2px; }
.talent-pips { display:flex; gap:3px; margin-bottom:2px; }
.pip { width:8px; height:8px; border-radius:50%; border:1px solid #555; background:#222; }
.pip.filled { background:var(--gold); border-color:var(--gold); box-shadow:0 0 4px #ffcc0066; }
.talent-desc { font-size:8px; color:var(--text-dim); margin-bottom:1px; }
.talent-effect { font-family:'Orbitron',sans-serif; font-size:8px; color:var(--neon-green); display:inline; }
.talent-cost { font-family:'Orbitron',sans-serif; font-size:8px; color:var(--neon-purple); display:inline; margin-left:8px; }

/* === MUTATION PICKER === */
.mutation-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:600; display:flex; align-items:center; justify-content:center; }
.mutation-picker { text-align:center; max-width:700px; width:90%; }
.mutation-title { font-family:'Bangers',cursive; font-size:28px; color:var(--neon-purple); text-shadow:0 0 20px #cc44ff66; margin-bottom:16px; letter-spacing:3px; }
.mutation-cards { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.mutation-card { background:linear-gradient(135deg,#1a0535,#12082a); border:2px solid var(--panel-border); border-radius:14px; padding:16px; width:200px; cursor:pointer; transition:all .2s; }
.mutation-card:hover { border-color:var(--neon-purple); transform:translateY(-4px); box-shadow:0 8px 25px rgba(204,68,255,.2); }
.mutation-card.selected { border-color:var(--neon-green); box-shadow:0 0 20px #00ff8844; transform:translateY(-4px); }
.mutation-icon { font-size:40px; margin-bottom:8px; }
.mutation-name { font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; color:var(--text); margin-bottom:4px; }
.mutation-tag { font-family:'Press Start 2P',monospace; font-size:7px; padding:2px 6px; border-radius:4px; display:inline-block; margin-bottom:6px; }
.tag-dmg { color:#ff4444; background:#ff444420; }
.tag-econ { color:#00ff88; background:#00ff8820; }
.tag-util { color:#00ccff; background:#00ccff20; }
.mutation-desc { font-size:10px; color:var(--text-dim); line-height:1.4; }
.mutation-skip { font-family:'Orbitron',sans-serif; font-size:10px; color:var(--text-dim); background:transparent; border:1px solid #444; padding:8px 20px; border-radius:8px; cursor:pointer; margin-top:16px; transition:all .15s; }
.mutation-skip:hover { border-color:#888; color:var(--text); }
.mutation-confirm { font-family:'Bangers',cursive; font-size:18px; color:#fff; background:linear-gradient(180deg,#00cc66,#008844); border:2px solid #00ff88; padding:10px 30px; border-radius:10px; cursor:pointer; margin-top:12px; transition:all .15s; display:block; margin-left:auto; margin-right:auto; }
.mutation-confirm:hover { transform:scale(1.05); box-shadow:0 0 20px #00ff8844; }

/* Active mutation in shop */
.mutation-active-card { background:linear-gradient(135deg,#1a0535,#12082a); border:1px solid var(--neon-purple); border-radius:8px; padding:8px 12px; margin-bottom:6px; font-size:11px; color:var(--text); }
.mutation-active-icon { font-size:16px; }

/* === CHALLENGE CARDS === */
.challenge-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:12px; }
.challenge-card { background:#12082a; border:2px solid #333; border-radius:10px; padding:8px; text-align:center; cursor:pointer; transition:all .15s; }
.challenge-card:hover { border-color:#666; }
.challenge-card.active { border-color:var(--accent); box-shadow:0 0 10px #ff444433; background:#1a0a0a; }
.challenge-icon { font-size:22px; margin-bottom:4px; }
.challenge-name { font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; margin-bottom:2px; }
.challenge-desc { font-size:8px; color:var(--text-dim); margin-bottom:3px; }
.challenge-bonus { font-family:'Orbitron',sans-serif; font-size:8px; color:var(--neon-green); }

/* === RELIC SYSTEM === */
.relic-slots { display:flex; gap:8px; justify-content:center; margin-bottom:10px; }
.relic-slot { width:100px; height:70px; border:2px dashed #444; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; color:var(--text-dim); cursor:pointer; transition:all .15s; }
.relic-slot.filled { border-style:solid; border-color:var(--gold); background:#12082a; font-size:28px; }
.relic-slot-name { font-family:'Orbitron',sans-serif; font-size:7px; color:var(--gold); margin-top:2px; }
.relic-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:14px; }
.relic-card { background:#12082a; border:1px solid var(--panel-border); border-radius:10px; padding:8px; text-align:center; cursor:pointer; transition:all .15s; }
.relic-card.owned { border-color:var(--gold); cursor:pointer; }
.relic-card.equipped { border-color:var(--neon-green); box-shadow:0 0 8px #00ff8822; }
.relic-card.locked { opacity:.3; cursor:default; }
.relic-icon { font-size:24px; margin-bottom:3px; }
.relic-name { font-family:'Orbitron',sans-serif; font-size:8px; font-weight:700; margin-bottom:2px; }
.relic-desc { font-size:7px; color:var(--text-dim); margin-bottom:3px; }
.relic-status { font-family:'Press Start 2P',monospace; font-size:6px; color:var(--text-dim); }

/* === MILESTONE MODAL === */
.milestone-overlay { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:700; display:flex; align-items:center; justify-content:center; animation:milestoneIn .5s ease-out; }
@keyframes milestoneIn { 0%{opacity:0} 100%{opacity:1} }
.milestone-modal { text-align:center; padding:40px; background:linear-gradient(135deg,#1a0535,#0d0618); border:3px solid var(--gold); border-radius:20px; box-shadow:0 0 60px #ffcc0033,0 0 120px #ffcc0011; max-width:400px; animation:milestonePopIn .6s cubic-bezier(.175,.885,.32,1.275); }
@keyframes milestonePopIn { 0%{transform:scale(0) rotate(-10deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
.milestone-icon { font-size:60px; margin-bottom:12px; animation:milestoneBounce 1s ease-in-out infinite; }
@keyframes milestoneBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.milestone-title { font-family:'Bangers',cursive; font-size:28px; color:var(--gold); letter-spacing:3px; text-shadow:0 0 20px #ffcc0066; margin-bottom:8px; }
.milestone-desc { font-size:14px; color:var(--text); line-height:1.5; margin-bottom:20px; }
.milestone-btn { font-family:'Bangers',cursive; font-size:20px; padding:12px 36px; background:linear-gradient(180deg,#ffcc00,#cc8800); color:#000; border:2px solid #ffdd44; border-radius:12px; cursor:pointer; letter-spacing:2px; transition:all .15s; }
.milestone-btn:hover { transform:scale(1.08); box-shadow:0 0 30px #ffcc0066; }

/* === PLAYER HP BAR === */
.player-hp-wrap { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:50%; max-width:260px; z-index:10; text-align:center; }
.player-hp-label { font-family:'Press Start 2P',monospace; font-size:7px; color:#66ccff; margin-bottom:3px; }
.player-hp-bar { width:100%; height:14px; background:#222; border-radius:7px; border:2px solid #2a6a8a; overflow:hidden; }
.player-hp-fill { height:100%; background:linear-gradient(90deg,#2288cc,#44ccff,#66eeff); border-radius:5px; transition:width .25s; box-shadow:inset 0 -2px 4px rgba(0,0,0,.3), inset 0 2px 2px rgba(255,255,255,.15); }

/* Counter-attack flash */
.counter-attack-flash { position:fixed; inset:0; background:#ff440044; pointer-events:none; z-index:150; animation:counterFlash .3s ease-out forwards; }
@keyframes counterFlash { 0%{opacity:1} 100%{opacity:0} }
.counter-attack-text { position:fixed; top:50px; left:50%; transform:translateX(-50%); font-family:'Bangers',cursive; font-size:24px; color:#ff6644; text-shadow:2px 2px 0 #000; z-index:200; pointer-events:none; animation:floatUp .9s ease-out forwards; }
.pp-loss-flash { animation:ppLossFlash 1s ease-out; }
@keyframes ppLossFlash { 0%,20%{color:#ff3333;transform:scale(1.4);} 100%{color:var(--gold);transform:scale(1);} }

/* === MINI-CLAUDE === */
.mini-claude-container { position:absolute; inset:0; pointer-events:none; z-index:11; }
.mini-claude { position:absolute; transform-origin:bottom center; pointer-events:all; cursor:inherit; transition:opacity .3s; }
.mini-claude .claude-body { width:95px; height:185px; }
.mini-claude .head { position:absolute; width:55%; height:28%; top:0; left:50%; transform:translateX(-50%); background:radial-gradient(ellipse at 40% 35%,var(--c-skin,#ffe0c2),var(--c-skin-d,#f5c99a)); border-radius:50% 50% 45% 45%; border:2px solid var(--c-skin-b,#d4a373); z-index:3; }
.mini-claude .eye { position:absolute; top:40%; width:18%; height:22%; background:#fff; border-radius:50%; border:1px solid #555; overflow:hidden; }
.mini-claude .eye.left { left:22%; } .mini-claude .eye.right { right:22%; }
.mini-claude .pupil { position:absolute; width:55%; height:55%; background:radial-gradient(circle at 40% 40%,var(--c-pupil,#6a4c93),var(--c-pupil-d,#2d1b4e)); border-radius:50%; top:25%; left:25%; }
.mini-claude .torso { position:absolute; width:75%; height:35%; top:25%; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,var(--c-shirt,#e8855e),var(--c-shirt-d,#d4704e)); border-radius:30% 30% 10% 10%; border:2px solid var(--c-shirt-b,#b85a3a); z-index:2; }
.mini-claude .shirt-logo { position:absolute; top:35%; left:50%; transform:translateX(-50%); font-family:'Bangers',cursive; font-size:8px; color:#fff8; }
.mini-claude .pants { position:absolute; width:60%; height:22%; top:56%; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,var(--c-pants,#3a5a8c),var(--c-pants-d,#2d4a73)); border-radius:5% 5% 20% 20%; border:2px solid var(--c-pants-b,#1e3550); z-index:2; }
.mini-claude .leg { position:absolute; bottom:0; width:22%; height:28%; background:linear-gradient(180deg,var(--c-pants,#3a5a8c),var(--c-pants-d,#2d4a73)); border:1px solid var(--c-pants-b,#1e3550); z-index:1; }
.mini-claude .leg.left { left:22%; border-radius:0 0 30% 30%; } .mini-claude .leg.right { right:22%; border-radius:0 0 30% 30%; }
.mini-claude .shoe { position:absolute; bottom:-2px; width:110%; height:18%; background:#333; border-radius:40% 40% 50% 50%; }
.mini-claude .leg.left .shoe { left:-10%; } .mini-claude .leg.right .shoe { right:-10%; }
.mini-claude .arm { position:absolute; top:28%; width:18%; height:28%; background:linear-gradient(180deg,var(--c-skin,#ffe0c2),var(--c-skin-d,#f0c090)); border:1px solid var(--c-skin-b,#d4a373); border-radius:40%; z-index:1; }
.mini-claude .arm.left { left:2%; transform:rotate(10deg); } .mini-claude .arm.right { right:2%; transform:rotate(-10deg); }
.mini-claude-hp { width:70px; height:8px; background:#333; border-radius:4px; border:1px solid #555; overflow:hidden; margin:4px auto 0; }
.mini-claude-hp-fill { height:100%; background:linear-gradient(90deg,#ff2222,#ff6644,#44ff44); border-radius:3px; transition:width .25s; }
.mini-claude.ko { opacity:.25; pointer-events:none; }
.mini-claude.ko .claude-body { transform:rotate(90deg) translateX(30px); }
.mini-claude.hit-flash .claude-body { animation:hitShake .3s ease-out; }

/* Mini-Claude positions */
.mini-pos-0 { bottom:100px; right:8%; }
.mini-pos-1 { bottom:100px; left:8%; }
.mini-pos-2 { bottom:140px; right:3%; }
.mini-pos-3 { bottom:140px; left:3%; }

@media(max-width:700px) {
  .main-layout { flex-direction:column; }
  .side-panel { width:100%; height:45vh; border-left:none; border-top:2px solid var(--panel-border); }
  .arena-panel { height:55vh; }
  .weapon-bar { bottom:45px; }
  .badge-popup { right:10px; top:auto; bottom:50vh; }
  .talent-tree { grid-template-columns:1fr; }
  .mutation-cards { flex-direction:column; align-items:center; }
  .challenge-grid { grid-template-columns:1fr; }
}