/* HyperClutch Battle — game layer (heroes, boss raid, effects). Purely cosmetic; scoring is untouched. */

/* ---------- stage ---------- */
.hcs{--eye:#c8ff24;position:relative;height:clamp(220px,36vw,280px);margin:0 0 14px;border-radius:16px;overflow:hidden;border:1px solid var(--line2);isolation:isolate;
  background:linear-gradient(180deg,#171248 0%,#2a2272 46%,#43308f 63%,#130e2f 63.2%,#0d0923 100%);user-select:none;-webkit-user-select:none}
.hcs::before{content:"";position:absolute;inset:0;z-index:0;opacity:.9;
  background:radial-gradient(1.4px 1.4px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 30% 34%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 52% 12%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 71% 28%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 88% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 8%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 40%,#fff 50%,transparent 51%);
  animation:hcTwinkle 3.2s ease-in-out infinite}
.hcs::after{content:"";position:absolute;right:30%;top:14%;width:44px;height:44px;border-radius:50%;z-index:0;background:radial-gradient(circle at 35% 35%,#fff7d6,#ffd98a 60%,#e5a94a);box-shadow:0 0 40px #ffd98a55}
.hcs-ground{position:absolute;left:0;right:0;bottom:0;height:37%;z-index:1;
  background:repeating-linear-gradient(90deg,#c8ff2416 0 2px,transparent 2px 54px),repeating-linear-gradient(0deg,#38e4ef18 0 2px,transparent 2px 24px);background-size:54px 100%,100% 24px;animation:hcScroll 2.6s linear infinite}
.hcs-ground::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 16px var(--cyan)}
.hcs.shake{animation:hcShake .35s}
.hcs.flash .hcs-vig{animation:hcFlash .5s}
.hcs-vig{position:absolute;inset:0;z-index:8;pointer-events:none;box-shadow:inset 0 0 70px 6px transparent;transition:box-shadow .3s}
.hcs.charging .hcs-vig{box-shadow:inset 0 0 70px 6px #ff6d9155;animation:pulse .6s infinite}

/* top-left profile chip */
.hcs-me{position:absolute;z-index:7;left:10px;top:10px;display:flex;flex-direction:column;gap:5px;min-width:122px;padding:7px 10px;background:#0a0f20cc;border:1px solid #ffffff1c;border-radius:11px;backdrop-filter:blur(4px)}
.hcs-me .lv{display:flex;align-items:baseline;gap:6px;font:900 15px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em}
.hcs-me .lv b{color:var(--lime)}
.hcs-me .lv span{color:var(--muted);font:700 10px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hcs-xp{height:5px;border-radius:99px;background:#1b243b;overflow:hidden}
.hcs-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.hcs-streak{font:900 13px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em;color:var(--amber);min-height:13px}
.hcs-streak.on{animation:hcPop .35s}

/* boss */
.hcs-bosshud{position:absolute;z-index:7;right:10px;top:10px;width:min(44%,250px);text-align:right}
.hcs-bossname{font:900 14px 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ffd0dc;text-shadow:0 1px 6px #000a}
.hcs-survivors{margin-top:4px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:#0a0f20cc;border:1px solid #ff5e9d44;transition:border-color .3s,box-shadow .3s}
.hcs-survivors b{font:900 19px 'Barlow Condensed',sans-serif;line-height:1;color:#ffd3e2}
.hcs-survivors span{font:800 9px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hcs-survivors.solo{border-color:#ffc24a77;box-shadow:0 0 18px #ffc24a44;animation:hcSoloPulse 1.4s ease-in-out infinite}
.hcs-survivors.solo b{color:var(--amber)}
@keyframes hcSoloPulse{0%,100%{box-shadow:0 0 10px #ffc24a22}50%{box-shadow:0 0 24px #ffc24a66}}
.hcs-boss{position:absolute;z-index:3;right:5%;bottom:6%;width:clamp(108px,22vw,168px);aspect-ratio:160/170;transform-origin:50% 100%;animation:hcBoss 2.8s ease-in-out infinite}
.hcs-boss svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 14px #0008)}
.hcs-boss .gb{fill:#6d5aa3}.hcs-boss .gb2{fill:#5b4b8a}.hcs-boss .gh{fill:#7d68ba}
.hcs-boss .b-eye{fill:var(--eye);filter:drop-shadow(0 0 6px var(--eye))}
.hcs-boss .crack{opacity:0;transition:opacity .5s}
.hcs.phase2 .hcs-boss{--eye:#ffc24a}.hcs.phase2 .hcs-boss .crack.c1{opacity:.9}
.hcs.phase3 .hcs-boss{--eye:#ff6d91}.hcs.phase3 .hcs-boss .crack{opacity:.95}
.hcs.phase3 .hcs-boss{animation-duration:1.4s}
.hcs-boss.hit{animation:hcBossHit .45s}
.hcs-boss.strike{animation:hcBossStrike .7s}
.hcs-boss.roar{animation:hcRoar .8s}
.hcs-boss.dead{animation:hcDefeat 1.4s forwards}
.hcs.charging .hcs-boss{animation:hcCharge .22s infinite}
.hcs.sleep .hcs-boss{animation:hcSleep 3.6s ease-in-out infinite;filter:saturate(.6) brightness(.8)}
.hcs.sleep .hcs-boss .b-eye{fill:#2b2150;filter:none}
.hcs.sleep .hcs-boss::after{content:"Z z z";position:absolute;left:62%;top:-4%;font:900 18px 'Barlow Condensed',sans-serif;color:#cdbfff;letter-spacing:.2em;animation:hcZzz 2.4s ease-in-out infinite}

/* heroes */
.hcs-heroes{position:absolute;z-index:4;left:3%;bottom:7%;right:44%;display:flex;align-items:flex-end;justify-content:flex-start}
.hero{position:relative;flex:none;width:clamp(40px,7.4vw,58px);margin-right:-8px}
.hero.me{width:clamp(56px,10.4vw,82px);margin-left:6px;margin-right:0;z-index:3}
.hero .fig{width:100%;aspect-ratio:64/80;transform-origin:50% 100%;animation:hcBob 1.9s ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform}
.hero svg{width:100%;height:100%;overflow:visible}
.hero .eyes{transform-origin:32px 31px;animation:hcBlink 4.2s infinite;animation-delay:var(--d,0s)}
.hero .lbl{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 9.5px 'DM Sans',sans-serif;color:#d8def2;letter-spacing:.04em;text-shadow:0 1px 4px #000}
.hero.me .lbl{color:var(--cyan);font-size:10.5px}
.hero.me::after{content:"";position:absolute;left:50%;bottom:-4px;width:70%;height:7px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(#38e4ef99,transparent 70%)}
.hero.charge .fig{filter:drop-shadow(0 0 7px var(--cyan));animation:hcCharge .3s infinite}
.hero.armed .fig{filter:drop-shadow(0 0 9px var(--amber)) drop-shadow(0 0 16px var(--amber))}
.hero.attack .fig{animation:hcLunge .55s var(--ease,ease-out)}
.hero.hurt .fig{animation:hcHurt .5s;filter:drop-shadow(0 0 8px #ff6d91)}
.hero.cheer .fig{animation:hcCheer .6s ease-in-out infinite}
.hero.slump .fig{animation:none;transform:rotate(8deg) translateY(4px) scaleY(.94);filter:grayscale(.6) brightness(.8)}
.hero-more{align-self:center;margin-left:6px;padding:3px 8px;border-radius:99px;background:#0a0f20cc;border:1px solid #ffffff22;color:var(--muted);font:800 11px 'DM Sans',sans-serif}

/* hearts above each hero */
.hero-hearts{position:absolute;z-index:4;left:50%;top:-9px;transform:translateX(-50%);display:flex;gap:1px;pointer-events:none}
.hero-hearts i{font-style:normal;font-size:9px;line-height:1;color:#ff5e9d;opacity:.16;text-shadow:0 0 5px #ff5e9d66;transition:opacity .2s}
.hero-hearts i.on{opacity:1}
.hero-hearts i.break{animation:hcHeartBreak .52s ease-out}
.hero.me .hero-hearts i{font-size:11px}
.hero.dead .hero-hearts{opacity:.35}

/* fallen hero + grave marker */
.hero .tomb{position:absolute;z-index:2;left:50%;bottom:-3px;display:flex;flex-direction:column;align-items:center;gap:1px;opacity:0;transform:translate(-50%,8px) scale(.62);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.2,1);pointer-events:none}
.hero .tomb span{display:grid;place-items:center;width:26px;height:31px;border-radius:13px 13px 4px 4px;background:linear-gradient(160deg,#5d6680,#31384a);border:1px solid #96a0b8;color:#d8e0f2;font-size:12px;line-height:1;box-shadow:0 5px 10px #0008}
.hero .tomb b{font:900 7px 'DM Sans',sans-serif;letter-spacing:.12em;color:#ff9bb2;text-shadow:0 1px 3px #000}
.hero.dead .tomb{opacity:1;transform:translate(-50%,0) scale(1)}
.hero.dead .fig{animation:hcFall .68s cubic-bezier(.3,.7,.3,1) forwards!important;transform-origin:50% 100%;filter:grayscale(1) brightness(.5)}
.hero.dead .eyes{animation:none}
.hero.dead .lbl{color:#ff8aa6}
.hero.dead.me::after{display:none}

/* dodge / parry movement */
.hero.dodge-jump .fig{animation:hcDodgeJump .74s cubic-bezier(.2,.8,.2,1)}
.hero.dodge-slide .fig{animation:hcDodgeSlide .74s ease-in-out}
.hero.dodge-blink .fig{animation:hcDodgeBlink .74s linear}
.hero.dodge-flip .fig{animation:hcDodgeFlip .74s cubic-bezier(.2,.8,.2,1)}
.hero.parry .fig{filter:drop-shadow(0 0 12px #c8ff24) drop-shadow(0 0 24px #c8ff2499)}
.hero.parry::before{content:"";position:absolute;z-index:3;left:50%;top:42%;width:72px;height:72px;border:2px solid #c8ff24;border-radius:50%;box-shadow:0 0 20px #c8ff2477,inset 0 0 16px #c8ff2444;transform:translate(-50%,-50%);animation:hcParryRing .82s ease-out forwards;pointer-events:none}

/* your hearts + elimination state */
.hcs-myhearts{display:flex;align-items:center;gap:2px;line-height:1;min-height:13px}
.hcs-myhearts .lab{margin-right:3px;color:var(--muted);font:800 8px 'DM Sans',sans-serif;letter-spacing:.12em}
.hcs-myhearts i{font-style:normal;font-size:13px;line-height:1;color:#ff5e9d;text-shadow:0 0 7px #ff5e9d66;transition:opacity .2s,transform .2s}
.hcs-myhearts i:not(.on){opacity:.16;text-shadow:none}
.hcs-myhearts.out .lab{color:var(--red)}
.hcs-out{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 18px;border-radius:14px;background:#0a0f20e6;border:1px solid #ff6d9166;box-shadow:0 0 34px #ff6d9133;pointer-events:none;backdrop-filter:blur(4px)}
.hcs-out b{font:900 22px 'Barlow Condensed',sans-serif;letter-spacing:.16em;color:var(--red);text-shadow:0 0 16px #ff6d9177}
.hcs-out span{font:700 9px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* golem strike countdown */
.hcs-attack{position:absolute;z-index:9;left:50%;top:7px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:99px;background:#2a0d18e8;border:1px solid #ff5e9d66;box-shadow:0 0 22px #ff5e9d33;backdrop-filter:blur(4px);animation:hcAttackIn .25s ease-out}
.hcs-attack .lbl{font:900 10px 'Barlow Condensed',sans-serif;letter-spacing:.14em;color:#ffd3e2;white-space:nowrap}
.hcs-attack .bar{width:68px;height:6px;border-radius:99px;background:#1a0a12;overflow:hidden}
.hcs-attack .bar i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--red));transition:width .1s linear}
.hcs-attack .sec{font:900 14px 'Barlow Condensed',sans-serif;color:#fff;min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
.hcs-attack.strike{background:#ff5e9d;border-color:#fff;animation:hcStrikeFlash .55s}
.hcs.danger .hcs-vig{box-shadow:inset 0 0 80px 10px #ff5e9d33;animation:hcDanger .7s infinite}
.hcs-boss.windup{animation:hcWindup .45s infinite;filter:drop-shadow(0 0 20px #ff5e9d99)}
.fx-claw{position:absolute;height:4px;margin-top:-2px;border-radius:2px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,#ff5e9d 32%,#fff 68%,transparent);box-shadow:0 0 10px #ff5e9d,0 0 24px #ff5e9d99;animation:hcClaw .4s ease-out forwards}
.fx-shot.reflect{--c:#c8ff24;box-shadow:0 0 16px 5px #c8ff24,0 0 34px 10px #c8ff2466}

/* effects */
.hcs-fx{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.fx-shot{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#fff 0 28%,var(--c,#38e4ef) 60%,transparent 72%);box-shadow:0 0 14px 4px var(--c,#38e4ef)}
.fx-shot.crit{width:30px;height:30px;margin:-15px 0 0 -15px;--c:#ffc24a;box-shadow:0 0 24px 8px #ffc24a}
.fx-num{position:absolute;font:900 24px 'Barlow Condensed',sans-serif;letter-spacing:.04em;color:#fff;text-shadow:0 0 10px var(--c,#ff5e9d),0 2px 0 #0008;animation:hcFloat 1.1s ease-out forwards;white-space:nowrap}
.fx-num.good{--c:#65f2cb;color:#d8fff1}.fx-num.xp{--c:#a18aff;color:#e5deff;font-size:19px}.fx-num.crit{--c:#ffc24a;color:#fff3cf;font-size:30px}.fx-num.bad{--c:#ff6d91;color:#ffd8e2}
.fx-boom{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;animation:hcBoom .45s ease-out forwards}
.hcs-banner{position:absolute;z-index:9;left:50%;top:42%;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;text-align:center;white-space:nowrap;
  font:900 clamp(30px,8.5vw,58px)/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:#fff;text-shadow:0 0 22px var(--bc,#38e4ef),0 3px 0 #0009}
.hcs-banner small{display:block;margin-top:4px;font:700 clamp(11px,2.4vw,14px) 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px #000}
.hcs-banner.show{animation:hcBanner var(--bt,1.15s) cubic-bezier(.2,.9,.2,1) forwards}
.hcs-banner.good{--bc:#65f2cb}.hcs-banner.bad{--bc:#ff6d91}.hcs-banner.gold{--bc:#ffc24a}.hcs-banner.violet{--bc:#a18aff}
.hcs-snd{position:absolute;z-index:9;right:8px;bottom:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#0a0f20cc;border:1px solid #ffffff22;color:var(--txt);font-size:14px;cursor:pointer;padding:0}
.hcs-snd:hover{border-color:var(--cyan)}
.hc-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

/* power-up row */
.hcs-power{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.hc-power{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 16px;border-radius:11px;cursor:pointer;border:1.5px solid #ffc24a66;background:#ffc24a12;color:var(--amber);font:900 15px 'Barlow Condensed',sans-serif;letter-spacing:.07em;text-transform:uppercase;transition:transform .12s,background .15s,box-shadow .15s}
.hc-power:hover:not(:disabled){background:#ffc24a22;transform:translateY(-1px)}
.hc-power.armed{background:linear-gradient(100deg,#ffc24a,#ff8a5e);color:#2a1500;border-color:transparent;box-shadow:0 0 22px #ffc24a77;animation:hcArmed .9s ease-in-out infinite}
.hc-power:disabled{opacity:.45;cursor:not-allowed}
.hcs-power p{margin:0;flex:1 1 220px;color:var(--dim);font-size:11.5px;line-height:1.45}

/* concept card (learning) */
.hc-concept{margin-top:14px;padding:13px 15px;border-radius:14px;border:1px solid #a18aff44;background:linear-gradient(145deg,#a18aff14,#38e4ef0a);animation:hcSlide .35s ease-out both}
.hc-concept .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;color:#cfc3ff;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hc-concept .hd em{font-style:normal;padding:2px 8px;border-radius:99px;background:#a18aff26;color:#e5deff;letter-spacing:.06em}
.hc-concept .ans{font-size:14.5px;font-weight:700;color:var(--green)}
.hc-concept .why{margin-top:5px;color:#d3daf0;font-size:13px;line-height:1.55}

/* knowledge report */
.hc-report{margin:18px 0 6px;padding:clamp(14px,3vw,20px);border-radius:16px;border:1px solid #a18aff44;background:linear-gradient(145deg,#171244,#0e1226);animation:hcSlide .4s ease-out both}
.hc-report h3{margin:0 0 12px;font:900 22px 'Barlow Condensed',sans-serif;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.hc-report h3 span{color:var(--violet)}
.hc-rep-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hc-ring{position:relative;flex:none;width:92px;height:92px}
.hc-ring svg{width:92px;height:92px;transform:rotate(-90deg)}
.hc-ring .t{fill:none;stroke:#1b243b;stroke-width:9}.hc-ring .v{fill:none;stroke:var(--violet);stroke-width:9;stroke-linecap:round;stroke-dasharray:238.76;stroke-dashoffset:238.76;transition:stroke-dashoffset 1.1s .2s cubic-bezier(.2,.8,.2,1)}
.hc-ring b{position:absolute;inset:0;display:grid;place-items:center;font:900 26px 'Barlow Condensed',sans-serif}
.hc-rep-meta{flex:1 1 200px;min-width:0}
.hc-rep-meta .big{font:800 20px 'Barlow Condensed',sans-serif;letter-spacing:.04em}
.hc-rep-meta p{margin:3px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.hc-xpline{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.hc-xpline b{color:var(--violet);font:900 17px 'Barlow Condensed',sans-serif}
.hc-lvup{display:inline-block;padding:2px 9px;border-radius:99px;background:linear-gradient(100deg,var(--amber),#ff8a5e);color:#2a1500;font:900 13px 'Barlow Condensed',sans-serif;letter-spacing:.08em;animation:hcPop .5s}
.hc-topics{display:grid;gap:6px;margin-top:14px}
.hc-topic{display:grid;grid-template-columns:minmax(80px,32%) 1fr auto;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.hc-topic .bar{height:7px;border-radius:99px;background:#1b243b;overflow:hidden}.hc-topic .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.hc-topic .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-review-h{margin:16px 0 8px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hc-miss{margin-top:8px;border:1px solid #ff6d9133;background:#ff6d910a;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5}
.hc-miss .q{font-weight:700}
.hc-miss .you{color:var(--red);margin-top:4px}.hc-miss .right{color:var(--green)}
.hc-miss .why{margin-top:4px;color:#d3daf0}
.hc-flawless{margin-top:14px;padding:11px 13px;border-radius:12px;border:1px solid #6bf2b444;background:#6bf2b40d;color:var(--green);font-weight:700;font-size:13.5px}

/* hero picker + roster avatars */
.hc-picker{margin:14px 0 4px}
.hc-picker .lab{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.hc-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px}
.hc-pick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;background:var(--panel2);border:1.5px solid var(--line2);border-radius:13px;color:var(--txt);cursor:pointer;font:700 11px 'DM Sans',sans-serif;transition:transform .12s,border-color .15s,background .15s}
.hc-pick svg{width:44px;height:44px}
.hc-pick:hover{transform:translateY(-2px);border-color:var(--cyan)}
.hc-pick[aria-pressed="true"]{border-color:var(--lime);background:#c8ff2412;box-shadow:0 0 0 3px #c8ff2420}
.hc-pick[aria-pressed="true"] svg{animation:hcBob 1.2s ease-in-out infinite}
.avatar.hero-av{padding:0;overflow:hidden;background:linear-gradient(160deg,#27306b,#14193a);border:1px solid #ffffff1c}
.avatar.hero-av svg{width:100%;height:100%;display:block}
.pod .avatar.hero-av{width:46px;height:46px}
#live-room-info .hcs{margin:14px 0}

/* motion */
@keyframes hcDodgeJump{0%{transform:none}26%{transform:translateY(-48px) scale(1.06,.94)}50%{transform:translateY(-30px) scale(.98,1.02)}74%{transform:translateY(-8px)}100%{transform:none}}
@keyframes hcDodgeSlide{0%{transform:none}28%{transform:translate(-36px,3px) rotate(-17deg) skewX(10deg)}58%{transform:translate(-20px,2px) rotate(-7deg) skewX(4deg)}100%{transform:none}}
@keyframes hcDodgeBlink{0%{opacity:1;transform:none}12%{opacity:.12;transform:translateX(28px)}24%{opacity:1;transform:translateX(-8px)}36%{opacity:.18;transform:translateX(24px)}48%,100%{opacity:1;transform:none}}
@keyframes hcDodgeFlip{0%{transform:none}30%{transform:translateY(-34px) rotate(-190deg) scale(.88)}64%{transform:translateY(-16px) rotate(-325deg) scale(1)}100%{transform:none}}
@keyframes hcParryRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.75)}}
@keyframes hcHeartBreak{0%{opacity:1;transform:scale(1.6);color:#fff}45%{opacity:1;transform:scale(.75) rotate(-24deg);color:var(--red)}100%{opacity:.16;transform:scale(1)}}
@keyframes hcFall{0%{transform:none;opacity:1}42%{transform:rotate(12deg) translateY(-5px)}100%{transform:rotate(76deg) translate(12px,10px) scale(.9);opacity:.28;filter:grayscale(1) brightness(.5)}}
@keyframes hcAttackIn{from{opacity:0;transform:translate(-50%,-9px) scale(.9)}}
@keyframes hcStrikeFlash{0%,100%{box-shadow:0 0 22px #ff5e9d33}50%{box-shadow:0 0 42px #ff5e9dcc;background:#ff8aae}}
@keyframes hcDanger{50%{box-shadow:inset 0 0 100px 18px #ff6d9155}}
@keyframes hcWindup{0%,100%{transform:translateX(-3px) scale(1.01)}50%{transform:translateX(3px) scale(1.045)}}
@keyframes hcClaw{0%{opacity:0;filter:brightness(2.4)}18%{opacity:1}100%{opacity:0;filter:brightness(1)}}
@keyframes hcTwinkle{50%{opacity:.45}}
@keyframes hcScroll{to{background-position:-54px 0,0 24px}}
@keyframes hcBob{50%{transform:translateY(-3px) scale(1.015,.985)}}
@keyframes hcBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes hcBoss{50%{transform:translateY(-4px) scale(1.02,.985)}}
@keyframes hcSleep{50%{transform:translateY(2px) scale(1.01,.99)}}
@keyframes hcZzz{0%{opacity:0;transform:translateY(8px)}50%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@keyframes hcBossHit{0%{filter:brightness(2.4) saturate(0)}20%{transform:translateX(10px) rotate(2deg)}45%{transform:translateX(-8px) rotate(-2deg)}100%{transform:none}}
@keyframes hcBossStrike{0%{transform:none}30%{transform:translateX(26px) scale(1.04)}55%{transform:translateX(-90px) scale(1.12)}100%{transform:none}}
@keyframes hcRoar{0%{transform:scale(1)}30%{transform:scale(1.14,.92)}55%{transform:scale(.96,1.08)}100%{transform:scale(1)}}
@keyframes hcDefeat{0%{transform:none;filter:brightness(2)}35%{transform:translateX(8px) rotate(3deg)}100%{transform:translateY(40px) rotate(18deg) scale(.7);opacity:0;filter:grayscale(1)}}
@keyframes hcCharge{50%{transform:translateX(2px)}0%,100%{transform:translateX(-2px)}}
@keyframes hcLunge{0%{transform:none}35%{transform:translateX(var(--dx,60px)) scale(1.1)}100%{transform:none}}
@keyframes hcHurt{0%{transform:none}20%{transform:translateX(-9px) rotate(-8deg)}45%{transform:translateX(7px) rotate(5deg)}100%{transform:none}}
@keyframes hcCheer{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px) scale(1.06)}}
@keyframes hcShake{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
@keyframes hcFlash{0%{box-shadow:inset 0 0 90px 20px #ffffffaa}100%{box-shadow:inset 0 0 70px 6px transparent}}
@keyframes hcFloat{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}15%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-52px) scale(1)}}
@keyframes hcBoom{to{transform:scale(11);opacity:0}}
@keyframes hcBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}30%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1.04)}}
@keyframes hcArmed{50%{box-shadow:0 0 34px #ffc24acc}}
@keyframes hcPop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes hcSlide{from{transform:translateY(8px);opacity:0}}

@media(max-width:650px){
  .hcs{height:236px}
  .hcs-me{min-width:104px;padding:6px 8px}
  .hcs-heroes{right:42%}
  .hc-picks{max-width:none}
  .hcs-power p{display:none}
  .hcs-attack{top:auto;bottom:42px;padding:4px 8px;gap:5px}
  .hcs-attack .lbl{display:none}
  .hcs-attack .bar{width:54px}
  .hcs-attack .sec{font-size:12px;min-width:20px}
  .hcs-out b{font-size:19px}
  .hcs-out span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .hcs::before,.hcs-ground,.hero .fig,.hcs-boss{animation:none!important}
}