.combat-arena{--ca-gold:#dfc17f;--ca-green:#76d9b2;--ca-red:#f09291;--ca-rage:#b8a1f2;position:relative;isolation:isolate;overflow:hidden;border:1px solid #b8a1f223;border-radius:18px;background:radial-gradient(ellipse at 0 70%,#27896512,transparent 55%),radial-gradient(ellipse at 100% 40%,#b5474310,transparent 55%),linear-gradient(135deg,#172133,#0e1624);padding:16px;color:#e9edf5;box-shadow:0 12px 32px #0002}
.combat-arena:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(120deg,transparent 49.8%,#adbdde06 50%,transparent 50.2%);background-size:100px 90px}
.ca-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;min-height:22px}.ca-phase,.ca-time{display:flex;align-items:center;gap:8px;font-size:11px;color:#a6b2c7}.ca-phase{font-weight:600;letter-spacing:.04em}.ca-phase i{width:6px;height:6px;border-radius:50%;background:var(--ca-gold);box-shadow:0 0 12px #dfc17f44}.ca-time strong{font-size:14px;color:#e2c789;font-variant-numeric:tabular-nums}.ca-field{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:12px}.ca-allies,.ca-opponents{min-width:0;display:grid;gap:10px}.ca-versus{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--ca-gold);font-size:10px;font-weight:800;letter-spacing:.2em}.ca-versus:before,.ca-versus:after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,#dfc17f4d)}.ca-versus:after{transform:rotate(180deg)}
.combat-arena .ca-march{--ca-side:var(--ca-green);appearance:none;position:relative;display:block;width:100%;min-width:0;min-height:44px;padding:14px;border:1px solid #76d9b22b;border-radius:12px;background:linear-gradient(125deg,#76d9b209,#0e1724b3);color:inherit;text-align:left;font:inherit;cursor:pointer;box-shadow:inset 0 1px #ffffff05;transition:border-color .2s,box-shadow .2s,background .2s;overflow:hidden}.combat-arena .ca-march.ca-red{--ca-side:var(--ca-red);border-color:#f092912b;background:linear-gradient(125deg,#f0929109,#0e1724b3)}.combat-arena .ca-march:hover{border-color:var(--ca-side);background-color:#ffffff04}.combat-arena .ca-march:focus-visible{outline:2px solid var(--ca-gold);outline-offset:3px}.combat-arena .ca-march.is-selected{border-color:var(--ca-gold);box-shadow:0 0 0 1px #dfc17f30,inset 0 1px #ffffff09}.ca-card-top{display:flex;gap:12px;align-items:center;min-width:0;margin-bottom:12px}.ca-portraits{position:relative;display:block;flex:0 0 62px;width:62px;height:54px}.ca-portrait-primary{display:block;width:49px;height:49px;object-fit:cover;border-radius:12px;border:1px solid color-mix(in srgb,var(--ca-side) 42%,transparent);box-shadow:0 3px 10px #0005;background:#182439}.ca-portrait-secondary{position:absolute;right:0;bottom:0;width:30px;height:30px;object-fit:cover;border-radius:9px;border:2px solid #162133;box-shadow:0 2px 7px #0005;background:#182439}.ca-portrait-empty{display:grid;place-items:center;width:49px;height:49px;border:1px dashed #a2b1c844;border-radius:12px;font-size:24px;font-weight:300;color:#8c9cb3;background:#162135}.ca-identity{display:flex;flex:1;flex-direction:column;min-width:0;gap:3px}.ca-team{color:var(--ca-side);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}.ca-name{font-size:15px;line-height:1.3;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ca-secondary{font-size:11px;color:#a0adc1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ca-status{flex-shrink:1;color:#b8c3d3;font-size:9px;text-align:right;max-width:62px;line-height:1.4}.ca-troop-heading,.ca-rage-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#9dabc0;font-size:10px;font-variant-numeric:tabular-nums}.ca-troop-heading strong{font-size:19px;line-height:1.1;letter-spacing:-.025em;color:var(--ca-side);font-weight:650}.ca-meter{display:block;overflow:hidden;width:100%;height:7px;margin-top:7px;border-radius:6px;background:#050b144d;box-shadow:inset 0 1px 2px #0003}.ca-meter>span{display:block;height:100%;border-radius:inherit;transition:width .38s cubic-bezier(.2,.7,.3,1);min-width:0}.ca-health>span{background:linear-gradient(90deg,color-mix(in srgb,var(--ca-side) 65%,#1c2838),var(--ca-side));box-shadow:0 0 10px color-mix(in srgb,var(--ca-side) 25%,transparent)}.ca-rage-heading{margin-top:10px;font-size:9px}.ca-rage-heading [data-ca-rage-value]{color:#c1b5dc}.ca-rage{height:3px;margin-top:5px}.ca-rage>span{background:linear-gradient(90deg,#73629d,var(--ca-rage))}.ca-rage.is-unscaled{opacity:.35}.ca-cast{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-height:0;opacity:0;color:#ecd7a5;font-size:10px;line-height:1.4;transition:opacity .2s,max-height .2s,margin .2s}.ca-cast:not(:empty){max-height:20px;opacity:1;margin-top:8px}.ca-march.is-defeated .ca-portraits{filter:grayscale(1);opacity:.55}.ca-march.is-defeated .ca-troop-heading strong{color:#919bad}.ca-march.is-empty{border-style:dashed}.ca-march.is-empty .ca-name{color:#aab8ca;font-size:13px}.ca-march.is-empty .ca-rage-heading,.ca-march.is-empty .ca-rage{visibility:hidden}.ca-march.is-casting{animation:ca-skill-flash .65s ease-out}.ca-march.is-charging .ca-rage>span{animation:ca-rage-glow .5s ease-out}
@keyframes ca-skill-flash{0%{box-shadow:inset 0 0 0 1px #f3d38b,0 0 26px #e3be7338}100%{box-shadow:inset 0 0 0 1px transparent,0 0 0 transparent}}@keyframes ca-rage-glow{0%{filter:brightness(1.8)}100%{filter:brightness(1)}}
.ca-march.is-casting[data-ca-beat="1"]{animation-name:ca-skill-flash-alt}.ca-march.is-charging[data-ca-beat="1"] .ca-rage>span{animation-name:ca-rage-glow-alt}@keyframes ca-skill-flash-alt{0%{box-shadow:inset 0 0 0 1px #f3d38b,0 0 26px #e3be7338}100%{box-shadow:inset 0 0 0 1px transparent,0 0 0 transparent}}@keyframes ca-rage-glow-alt{0%{filter:brightness(1.8)}100%{filter:brightness(1)}}
@media(min-width:560px){.ca-field{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:14px}.ca-versus{display:block;text-align:center;font-size:11px}.ca-versus:before,.ca-versus:after{display:none}.ca-allies{align-self:center}.ca-opponents .ca-march{padding:11px}.ca-opponents .ca-card-top{margin-bottom:9px;gap:9px}.ca-opponents .ca-portraits{width:54px;height:47px;flex-basis:54px}.ca-opponents .ca-portrait-primary{width:42px;height:42px}.ca-opponents .ca-portrait-secondary{width:26px;height:26px}.ca-opponents .ca-name{font-size:13px}.ca-opponents .ca-troop-heading strong{font-size:17px}.ca-opponents .ca-rage-heading{margin-top:7px}.combat-arena{padding:18px}.ca-topline{margin-bottom:20px}}
@media(min-width:980px){.ca-field{grid-template-columns:minmax(0,1fr) 36px minmax(0,1.3fr);gap:20px}.ca-opponents{grid-template-columns:repeat(2,minmax(0,1fr))}.ca-opponents>.ca-march:only-child{grid-column:1/-1}.ca-opponents>.ca-march:first-child:nth-last-child(3),.ca-opponents>.ca-march:first-child:nth-last-child(5){grid-column:1/-1}.ca-allies .ca-portrait-primary{width:66px;height:66px}.ca-allies .ca-portraits{width:82px;height:72px;flex-basis:82px}.ca-allies .ca-portrait-secondary{width:40px;height:40px}.ca-allies .ca-name{font-size:18px}.ca-allies .ca-card-top{margin-bottom:22px}.ca-allies .ca-troop-heading strong{font-size:26px}.ca-allies .ca-march{padding:21px}.ca-allies .ca-health{height:9px}.ca-allies .ca-rage-heading{margin-top:16px}}
@media(max-width:359px){.combat-arena{padding:11px}.combat-arena .ca-march{padding:11px}.ca-card-top{gap:8px}.ca-name{font-size:13px}.ca-status{font-size:8px}.ca-troop-heading strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){.combat-arena *,.combat-arena *:before,.combat-arena *:after{animation:none!important;transition:none!important}}
.ca-hit-normal{color:#fff}.ca-hit-skill{color:#ff7b79}.ca-hit-shield{color:#80ddf5}.ca-damage-summary{display:block;margin-top:9px;border-top:1px solid #ffffff0d;padding-top:7px}.ca-damage-summary:empty{display:none}.ca-damage-caption{display:block;font-size:9px;color:#97a8bf;margin-bottom:5px}.ca-damage-values{display:flex;flex-wrap:wrap;gap:6px 15px}.ca-damage-values>span{display:flex;flex-direction:column;gap:1px;min-width:0}.ca-damage-values>span>span{font-size:9px;line-height:1.3}.ca-damage-values strong{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.2}.ca-hit-floats{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:68px;margin-top:8px;pointer-events:none;overflow:hidden}.ca-hit-floats[hidden]{display:none}.ca-hit-lane{display:block;min-width:0;height:68px;overflow:hidden}.ca-floating-hit{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:62px;box-sizing:border-box;border:1px solid #ffffff0a;border-radius:8px;background:#070e1880;text-shadow:0 1px 2px #000;opacity:0;animation:ca-damage-float 1.7s cubic-bezier(.15,.7,.3,1) both;animation-delay:var(--ca-hit-delay)}.ca-floating-hit>strong{font-size:24px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}.ca-floating-hit>small{font-size:11px;line-height:1.4;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ca-floating-hit .ca-hit-from{font-size:10px;color:#e6edf7}.ca-hit-details{margin-top:12px;border-top:1px solid #ffffff13;padding-top:10px;font-size:11px}.ca-hit-details[hidden]{display:none}.ca-hit-details>summary{cursor:pointer;color:#b7c5d9;min-height:28px;line-height:28px;font-weight:650}.ca-hit-details>summary>span{display:inline-block;margin-left:8px;border-radius:5px;padding:0 6px;background:#ffffff08;color:#e7edf5;line-height:18px;font-variant-numeric:tabular-nums}.ca-hit-explanation{margin:4px 0 9px;color:#8fa1b9;font-size:10px;line-height:1.5}.ca-hit-details ol{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;overscroll-behavior:contain}.ca-hit-details li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:8px 0;border-top:1px solid #ffffff08;line-height:1.4}.ca-hit-route{font-size:11px;color:#d9e3f2;overflow-wrap:anywhere}.ca-hit-kind{grid-column:1;font-size:10px;color:#8fa1b9;overflow-wrap:anywhere}.ca-hit-details li>strong{grid-column:2;grid-row:1;font-size:16px;font-variant-numeric:tabular-nums}.ca-hit-details li>.ca-hit-shield{grid-column:2;grid-row:2;font-size:10px;text-align:right;font-variant-numeric:tabular-nums}

@media(max-width:559px){.ca-damage-values{gap:6px 12px}.ca-damage-values strong{font-size:16px}.ca-floating-hit>strong{font-size:23px}.ca-hit-details li>.ca-hit-shield{max-width:125px}.ca-hit-explanation{font-size:11px}}
@media(prefers-reduced-motion:reduce){.ca-hit-floats{display:none}}

@keyframes ca-damage-float{0%{opacity:0;transform:translateY(6px)}14%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3px)}}