.ratio-boss-card{--boss-ink:#132331;--boss-cyan:#21d4c2;--boss-gold:#ffcf4a;--boss-coral:#ff6b55;position:relative;display:grid;grid-template-columns:minmax(250px,.8fr) minmax(360px,1.35fr);min-height:290px;margin:0 0 18px;overflow:hidden;border:1px solid rgba(19,35,49,.18);border-radius:26px;background:linear-gradient(135deg,#f7f1df 0 48%,#e1fbf7 48% 100%);box-shadow:0 20px 45px rgba(25,62,72,.16);color:var(--boss-ink);isolation:isolate}.ratio-boss-card[hidden]{display:none!important}
.ratio-boss-card::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 39px,rgba(19,35,49,.035) 40px),repeating-linear-gradient(0deg,transparent 0 39px,rgba(19,35,49,.035) 40px)}
.ratio-boss-scene{position:relative;display:grid;place-items:center;min-height:290px;background:radial-gradient(circle at 50% 62%,#6f8596 0 8%,transparent 9%),linear-gradient(180deg,#142838 0 63%,#263d45 63% 100%)}
.ratio-boss-scene::before{content:"";position:absolute;inset:20px;border:2px dashed rgba(80,235,215,.2);border-radius:18px}
.ratio-boss-base{position:absolute;bottom:18px;display:flex;align-items:flex-end;gap:8px}.ratio-boss-base span{display:block;width:64px;height:34px;border:4px solid #0d1b25;background:#516874;box-shadow:inset 0 7px rgba(255,255,255,.08)}.ratio-boss-base span:nth-child(2){height:58px;background:#405966}
.ratio-boss-figure{position:relative;width:150px;height:150px;margin-top:-28px;filter:drop-shadow(0 16px 10px rgba(0,0,0,.3));transform-origin:center bottom}
.ratio-boss-face{position:absolute;inset:15px;border:7px solid #14212a;border-radius:20px 20px 29px 29px;background:linear-gradient(145deg,#ffcf4a,#ef7d36);box-shadow:inset 10px 9px rgba(255,255,255,.22),inset -10px -10px rgba(97,42,13,.16)}
.ratio-boss-face::before,.ratio-boss-face::after{content:"";position:absolute;top:22px;width:34px;height:8px;border-radius:8px;background:#17242d}.ratio-boss-face::before{left:15px;transform:rotate(13deg)}.ratio-boss-face::after{right:15px;transform:rotate(-13deg)}
.ratio-boss-eye{position:absolute;top:43px;width:25px;height:29px;border:5px solid #17242d;border-radius:8px;background:#f7f7e8;overflow:hidden}.ratio-boss-eye::after{content:"";position:absolute;bottom:2px;width:10px;height:13px;border-radius:3px;background:#17242d}.ratio-boss-eye.left{left:17px}.ratio-boss-eye.left::after{right:1px}.ratio-boss-eye.right{right:17px}.ratio-boss-eye.right::after{left:1px}
.ratio-boss-mouth{position:absolute;left:39px;bottom:19px;width:49px;height:26px;border:5px solid #17242d;border-radius:5px 5px 18px 18px;background:#7f2b2d}.ratio-boss-mouth::after{content:"";position:absolute;left:8px;bottom:0;width:25px;height:9px;border-radius:10px 10px 2px 2px;background:#ff8d87}
.ratio-boss-antenna{position:absolute;z-index:-1;left:71px;top:-10px;width:8px;height:32px;background:#14212a}.ratio-boss-antenna::after{content:"";position:absolute;left:-7px;top:-9px;width:20px;height:20px;border:5px solid #14212a;border-radius:50%;background:var(--boss-coral)}
.ratio-boss-ear,.ratio-boss-arm{position:absolute;z-index:-1;border:6px solid #14212a;background:#ef7d36}.ratio-boss-ear{top:55px;width:24px;height:42px}.ratio-boss-ear.left{left:-2px}.ratio-boss-ear.right{right:-2px}.ratio-boss-arm{top:100px;width:45px;height:24px}.ratio-boss-arm.left{left:-28px;transform:rotate(25deg)}.ratio-boss-arm.right{right:-28px;transform:rotate(-25deg)}
.ratio-boss-boom{position:absolute;z-index:4;opacity:0;font:900 2.4rem/1 Georgia,serif;color:#fff;text-shadow:4px 4px 0 #e44831,-3px -3px 0 #f9c33a;transform:scale(.2) rotate(-12deg)}
.ratio-boss-debris{position:absolute;inset:0;pointer-events:none}.ratio-boss-debris i{position:absolute;left:50%;top:43%;width:16px;height:16px;border:3px solid #15242e;background:#ffbd36;opacity:0}
.ratio-boss-console{align-self:center;padding:26px 30px}.ratio-boss-kicker{color:#197f75;font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.ratio-boss-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:4px 0 18px}.ratio-boss-title-row h2{margin:0;font-family:Georgia,"Noto Serif TC",serif;font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.12}.ratio-boss-title-row p{margin:7px 0 0;color:#50636c;font-size:.9rem}.ratio-boss-win-badge{flex:none;padding:8px 11px;border:1px solid rgba(19,35,49,.15);border-radius:999px;background:#fff9e9;font-size:.78rem;font-weight:800}.ratio-boss-win-badge b{color:#c44732;font-size:1.05rem}
.ratio-boss-hp-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:.82rem}.ratio-boss-hp-head span{font-variant-numeric:tabular-nums;color:#5a6c72}.ratio-boss-hp{height:20px;padding:4px;border:2px solid #132331;border-radius:999px;background:#fff;box-shadow:3px 4px 0 rgba(19,35,49,.13)}.ratio-boss-hp span{display:block;height:100%;border-radius:999px;background:repeating-linear-gradient(135deg,var(--boss-coral) 0 12px,#ff9079 12px 24px);transition:width .55s cubic-bezier(.22,1,.36,1)}
.ratio-boss-cores{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:12px 0}.ratio-boss-core{height:16px;border:2px solid #132331;border-radius:4px;background:var(--boss-gold);box-shadow:2px 2px 0 rgba(19,35,49,.14);transition:.3s ease}.ratio-boss-core.is-broken{background:#dce3df;transform:scale(.72) rotate(12deg);opacity:.55}
.ratio-boss-status{min-height:44px;padding:10px 12px;border-left:4px solid var(--boss-cyan);border-radius:8px;background:rgba(255,255,255,.72);font-weight:800;line-height:1.45}
.ratio-boss-alert{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:11px;color:#5a6c72;font-size:.78rem}.ratio-boss-alert>div{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.ratio-boss-alert-dot{height:7px;border-radius:8px;background:#d7dfdc}.ratio-boss-alert-dot.is-on{background:#ef7d36}.ratio-boss-alert b{font-variant-numeric:tabular-nums}.ratio-boss-note{display:block;margin-top:10px;color:#68787d;line-height:1.45}
.ratio-boss-card.is-entering .ratio-boss-figure{animation:ratio-boss-enter 1s cubic-bezier(.2,1.55,.45,1) both}.ratio-boss-card.is-entering .ratio-boss-scene{animation:ratio-boss-alarm .25s steps(2) 4}.ratio-boss-card.is-hit .ratio-boss-figure{animation:ratio-boss-hit .65s ease both}.ratio-boss-card.is-critical .ratio-boss-scene{animation:ratio-boss-flash .18s steps(2) 4}.ratio-boss-card.is-critical .ratio-boss-boom{animation:ratio-boss-boom .65s ease both}.ratio-boss-card.is-miss .ratio-boss-mouth{animation:ratio-boss-laugh .24s ease 3}.ratio-boss-card.is-respawning .ratio-boss-figure{animation:ratio-boss-respawn 1s cubic-bezier(.2,1.4,.4,1) both}.ratio-boss-card.is-exploding .ratio-boss-figure{animation:ratio-boss-defeat 1.25s ease-in both}.ratio-boss-card.is-exploding .ratio-boss-boom{animation:ratio-boss-boom 1s ease both}.ratio-boss-card.is-exploding .ratio-boss-debris i{animation:ratio-boss-debris 1.1s ease-out both}
.ratio-boss-card.is-summoning .ratio-boss-figure{animation:ratio-boss-enter 1s cubic-bezier(.2,1.55,.45,1) both}.ratio-boss-card.is-summoning .ratio-boss-scene{animation:ratio-boss-alarm .22s steps(2) 5}
.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(2n){background:#39d7c3}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(3n){background:#ff6b55}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(1){--x:-105px;--y:-90px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(2){--x:-65px;--y:-120px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(3){--x:-25px;--y:-105px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(4){--x:25px;--y:-120px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(5){--x:75px;--y:-95px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(6){--x:110px;--y:-45px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(7){--x:105px;--y:35px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(8){--x:65px;--y:70px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(9){--x:20px;--y:82px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(10){--x:-35px;--y:75px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(11){--x:-85px;--y:50px}.ratio-boss-card.is-exploding .ratio-boss-debris i:nth-child(12){--x:-115px;--y:0}
.ratio-boss-card.is-defeated .ratio-boss-figure{opacity:.13;transform:translateY(55px) scale(.62) rotate(9deg)}.ratio-boss-card.is-defeated .ratio-boss-face{filter:grayscale(.7)}
@keyframes ratio-boss-enter{0%{transform:translateY(-260px) rotate(-14deg) scale(.7)}65%{transform:translateY(18px) rotate(5deg) scale(1.08)}100%{transform:none}}
@keyframes ratio-boss-alarm{50%{filter:brightness(1.7) saturate(1.3)}}@keyframes ratio-boss-hit{0%,100%{transform:none}18%{transform:translateX(14px) rotate(8deg)}36%{transform:translateX(-20px) rotate(-10deg)}60%{transform:translateX(8px) rotate(4deg)}}@keyframes ratio-boss-flash{50%{filter:brightness(1.8) saturate(1.4)}}@keyframes ratio-boss-boom{0%{opacity:0;transform:scale(.15) rotate(-12deg)}45%{opacity:1;transform:scale(1.2) rotate(-5deg)}100%{opacity:0;transform:scale(1.5) rotate(4deg)}}@keyframes ratio-boss-laugh{50%{height:11px;transform:translateY(7px)}}@keyframes ratio-boss-respawn{0%{opacity:0;transform:scale(.05) rotate(300deg)}75%{opacity:1;transform:scale(1.15) rotate(-8deg)}100%{transform:none}}@keyframes ratio-boss-defeat{0%{transform:none}20%{transform:translateX(-15px) rotate(-8deg)}40%{transform:translateX(18px) rotate(10deg)}68%{opacity:1;transform:scale(1.12) rotate(-6deg)}100%{opacity:.1;transform:translateY(75px) scale(.2) rotate(35deg)}}@keyframes ratio-boss-debris{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(320deg)}}
@media(max-width:760px){.ratio-boss-card{grid-template-columns:1fr}.ratio-boss-scene{min-height:225px}.ratio-boss-console{padding:21px}.ratio-boss-title-row{display:block}.ratio-boss-win-badge{display:inline-block;margin-top:10px}.ratio-boss-figure{transform:scale(.86)}.ratio-boss-cores{gap:3px}.ratio-boss-core{height:13px}}@media(prefers-reduced-motion:reduce){.ratio-boss-card *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.ratio-reset-zone{width:min(960px,calc(100% - 32px));margin:34px auto 18px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px dashed rgba(139,148,158,.55);border-radius:14px;background:rgba(110,118,129,.08);color:#8b949e}.ratio-reset-zone b{color:#c9d1d9}.ratio-reset-zone p{margin:3px 0 0;font-size:.8rem;line-height:1.45}.ratio-reset-button{flex:none!important;background:transparent!important;border-color:rgba(248,81,73,.38)!important;color:#f0a09a!important;box-shadow:none!important}.ratio-reset-button:hover{background:rgba(248,81,73,.1)!important}@media(max-width:620px){.ratio-reset-zone{align-items:stretch;flex-direction:column}.ratio-reset-button{width:100%!important}}