@layer theme,base;@layer components{.battle-replay{--br-line:var(--ic-line,#232b2d);--br-text:var(--ic-text,#e2ddd0);--br-text-bright:var(--ic-text-bright,#efeade);--br-text-dim:var(--ic-text-dim,#d8d3c4);--br-brass:var(--ic-brass,#c8a44a);--br-own:#8fd16a;--br-enemy:#e8604a;margin:0}.battle-replay [data-team=own]{--team:var(--br-own)}.battle-replay [data-team=enemy]{--team:var(--br-enemy)}.br-stage{aspect-ratio:16/10;border:1px solid var(--br-line);-webkit-user-select:none;user-select:none;isolation:isolate;background:#0d1113;position:relative;overflow:hidden;container-type:size}.battle-replay[data-mode=play] .br-stage{cursor:pointer}@media (width<=519px){.br-stage{aspect-ratio:4/3.4}}.br-world{transition:scale .7s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0}.battle-replay[data-decisive] .br-world{scale:1.06}.br-world[data-shake=a]{animation:.42s ease-out br-shake-a}.br-world[data-shake=b]{animation:.42s ease-out br-shake-b}.br-backdrop{object-fit:cover;object-position:50% 50%;filter:saturate(.8)brightness(.74)contrast(1.08)sepia(.14);pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.br-grade{z-index:100;pointer-events:none;background:radial-gradient(72% 68% at 50% 56%,#0000 52%,#06080ab8 100%),linear-gradient(#080a0cc7 0%,#0000 24% 68%,#080a0ce0 100%),linear-gradient(115deg,#ffba6e21,#0000 48%);transition:box-shadow .4s;position:absolute;inset:0}.battle-replay[data-decisive] .br-grade{box-shadow:inset 0 0 0 2px var(--br-brass), inset 0 0 70px color-mix(in oklch, var(--br-brass) 38%, transparent)}.br-field{aspect-ratio:16/9;position:absolute;top:54%;left:0;right:0;translate:0 -50%;container-type:size}.br-crater{background:radial-gradient(closest-side,#18120cd1,#2e221680 55%,#0000);border-radius:50%;width:4.8cqw;height:2.1cqw;animation:.5s ease-out both br-crater;position:absolute;translate:-50% -50%}.br-prop{height:calc(var(--h) * 1cqh);filter:drop-shadow(0 .7cqh .5cqh #0000008c)brightness(.9);pointer-events:none;width:auto;max-width:none;position:absolute;translate:-50% -100%}.br-formation,.br-tags{translate:calc(var(--shift,0) * 1cqw) 0;transition:translate .7s cubic-bezier(.2,.7,.2,1),opacity .7s;position:absolute;inset:0}.br-formation[data-gone],.br-tags[data-gone]{opacity:.3}.battle-replay[data-mode=play] .br-formation,.battle-replay[data-mode=play] .br-tags{animation:.85s cubic-bezier(.2,.7,.2,1) both br-deploy}.battle-replay[data-mode=play] .br-formation[data-side=defender],.battle-replay[data-mode=play] .br-tags[data-side=defender]{--enter:1}.br-unit{width:calc(var(--h) * 1.7cqh);height:calc(var(--h) * 1cqh);position:absolute;translate:-50% -100%}.br-mark{left:50%;bottom:calc(var(--h) * -.1cqh);width:calc(var(--h) * 1.35cqh);height:calc(var(--h) * .36cqh);background:radial-gradient(closest-side, #0000008c, #0003 60%, transparent), radial-gradient(closest-side, color-mix(in oklch, var(--team) 70%, transparent) 55%, color-mix(in oklch, var(--team) 25%, transparent) 80%, transparent);border-radius:50%;transition:opacity .5s;position:absolute;translate:-50%}.br-unit[data-dead] .br-mark{opacity:.25}.br-cluster{isolation:isolate;position:absolute;inset:0}.br-cluster[data-hit]{animation:.45s ease-out br-hit}.br-sprite{z-index:2;filter:drop-shadow(0 .5cqh .4cqh #0000008c)contrast(1.05)saturate(1.05);pointer-events:none;width:auto;max-width:none;height:100%;transition:opacity .5s,filter .5s;position:absolute;bottom:0;left:50%;translate:-50%}.br-sprite[data-copy="1"]{z-index:1;height:86%;bottom:16%;left:30%}.br-sprite[data-copy="2"]{z-index:0;height:86%;bottom:12%;left:72%}.br-sprite[data-vehicle][data-copy="1"]{height:80%;bottom:30%;left:30%}.br-sprite[data-vehicle][data-copy="2"]{height:80%;bottom:20%;left:78%}.br-formation[data-side=attacker] .br-sprite{scale:-1 1}.br-unit[data-dead] .br-sprite{opacity:.32;filter:grayscale()brightness(.55)}.battle-replay[data-mode=play] .br-unit:not([data-dead]) .br-sprite:not([data-vehicle]){animation:br-bob .95s ease-in-out var(--bob,0s) infinite alternate}.battle-replay[data-mode=play] .br-unit:not([data-dead]) .br-sprite[data-vehicle]{animation:br-rumble .16s linear var(--bob,0s) infinite alternate}.br-tags{z-index:120;pointer-events:none}.br-tag{position:absolute}.br-count{font:700 clamp(9px, 2.15cqw, 13px) / 1 var(--font-sans);color:var(--br-text-bright);box-shadow:inset 3px 0 0 var(--team), 0 1px 3px #000000b3;white-space:nowrap;font-variant-numeric:tabular-nums;background:#090b0ddb;border-radius:3px;padding:.28em .5em .24em;position:absolute;top:0;left:0;translate:-50% .7cqh}.br-tag[data-dead] .br-count{color:var(--br-enemy);box-shadow:inset 3px 0 #ffffff40,0 1px 3px #000000b3}.br-loss{top:calc(var(--h) * -1cqh);font:800 clamp(12px, 3.1cqw, 19px) / 1 var(--font-display);letter-spacing:.02em;color:#ff7a5c;text-shadow:0 0 2px #000,0 1px #000,0 0 10px #000c;white-space:nowrap;animation:1.25s ease-out both br-loss;position:absolute;left:0;translate:-50%}.br-tower{height:calc(var(--h) * 1cqh);position:absolute;translate:-50% -100%}.br-tower img{filter:drop-shadow(0 .8cqh .6cqh #0009)brightness(.95);width:auto;max-width:none;height:100%;transition:filter .6s;display:block}.br-tower img[data-hit]{animation:.45s ease-out br-hit}.br-tower[data-silenced] img{filter:grayscale(.85)brightness(.5)}.br-tower[data-silenced]:after{content:"";pointer-events:none;background:radial-gradient(closest-side,#34302cd9,#46403a66 60%,#0000);border-radius:50%;height:55%;animation:3.2s ease-in-out infinite alternate br-plume;position:absolute;top:-18%;left:15%;right:15%}.br-tower-bar{z-index:1;background:#0000008c;height:.9cqh;min-height:3px;position:absolute;top:4%;left:22%;right:22%;box-shadow:0 0 0 1px #00000080}.br-tower-bar>i{background:var(--br-brass);height:100%;transition:width .6s;display:block}.br-volley{z-index:150;pointer-events:none;position:absolute;inset:0}.br-volley>span{left:calc(var(--x0) * 1%);top:calc(var(--y0) * 1%);position:absolute}.br-flash{opacity:0;width:5cqw;height:5cqw;animation:br-flash .22s ease-out var(--delay);background:radial-gradient(circle,#fff7d6 0,#ffcd6ee6 22%,#ff822866 45%,#0000 66%);border-radius:50%;margin:-2.5cqw 0 0 -2.5cqw;position:absolute}.br-flash:after{content:"";transform-origin:0;width:6cqw;height:1.1cqw;rotate:var(--angle);background:linear-gradient(90deg,#ffe6a0f2,#0000);border-radius:50%;margin-top:-.55cqw;position:absolute;top:50%;left:50%}.br-shot{opacity:0;animation:br-shot-x var(--dur) linear var(--delay);position:absolute;top:0;left:0}.br-shot>i{transform-origin:100%;width:3.6cqw;height:.5cqw;rotate:var(--angle);animation:br-shot-y var(--dur) var(--delay);background:linear-gradient(90deg,#0000,#ffd682b3 55%,#fff6d8 92%,#fff);border-radius:999px;margin:-.25cqw 0 0 -3.6cqw;display:block;position:absolute;box-shadow:0 0 .8cqw #ffbe5acc}.br-volley>[data-from=defender] .br-shot>i,.br-volley>[data-from=tower] .br-shot>i{background:linear-gradient(90deg,#0000,#ff966eb3 55%,#ffe0cf 92%,#fff);box-shadow:0 0 .8cqw #ff7850cc}.br-volley>[data-arc] .br-shot>i{background:radial-gradient(circle at 35% 35%,#6b6358,#1d1a16 70%);border-radius:50%;width:1.5cqw;height:1.5cqw;margin:-.75cqw 0 0 -.75cqw;rotate:none;box-shadow:0 0 .6cqw .2cqw #ffaa50b3,-1.4cqw .3cqw 1.2cqw .4cqw #aaa09159}.br-burst{left:calc((var(--x1) - var(--x0)) * 1cqw);top:calc((var(--y1) - var(--y0)) * 1cqh);position:absolute}.br-burst:before,.br-burst:after,.br-burst>i{content:"";opacity:0;position:absolute}.br-burst:before{width:9cqw;height:9cqw;animation:br-fire .48s ease-out calc(var(--delay) + var(--dur));background:radial-gradient(circle,#fff8dc 0,#ffd479 16%,#ff8a32 34%,#963c16b3 52%,#0000 70%);border-radius:50%;margin:-4.5cqw 0 0 -4.5cqw}.br-burst:after{width:10cqw;height:8cqw;animation:br-smoke 1.4s ease-out calc(var(--delay) + var(--dur) + 60ms);background:radial-gradient(closest-side,#3e3a34cc,#5c564c61 60%,#0000);border-radius:50%;margin:-5.5cqw 0 0 -5cqw}.br-burst>i{width:.8cqw;height:.8cqw;animation:br-debris .62s cubic-bezier(.2, .6, .4, 1) calc(var(--delay) + var(--dur));background:#2e241a;border-radius:30%;margin:-.4cqw 0 0 -.4cqw}.br-burst>i:first-child{--dx:-3.2cqw;--dy:-4.5cqh}.br-burst>i:nth-child(2){--dx:2.6cqw;--dy:-5.5cqh}.br-burst>i:nth-child(3){--dx:.4cqw;--dy:-7cqh}.br-hud{z-index:200;pointer-events:none;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:2cqw;display:grid;position:absolute;top:2.4cqh;left:2.2cqw;right:2.2cqw}.br-side{min-width:0;max-width:32cqw}.br-side[data-flip]{justify-self:end;width:100%}.br-side-head{font:700 clamp(10px, 2.2cqw, 14px) / 1.1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--br-text-bright);text-shadow:0 1px 3px #000000e6;justify-content:space-between;align-items:baseline;gap:.6em;display:flex}.br-side[data-flip] .br-side-head{flex-direction:row-reverse}.br-side-head b{color:var(--team);font-weight:800}.br-side-head span{color:var(--br-text);font-family:var(--font-sans);letter-spacing:0;font-weight:600}.br-meter{background:#00000080;border-radius:2px;height:clamp(5px,1.2cqw,9px);margin-top:.8cqh;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1f,0 1px 3px #0009}.br-meter>i{position:absolute;top:0;bottom:0;left:0}.br-side[data-flip] .br-meter>i{left:auto;right:0}.br-meter-trail{background:#ffecd2b3;transition:width .9s .5s}.br-meter-fill{background:linear-gradient(180deg, color-mix(in oklch, var(--team) 60%, white), var(--team) 55%, color-mix(in oklch, var(--team) 70%, black));transition:width .35s}.br-rounds{flex-direction:column;align-items:center;gap:.8cqh;display:flex}.br-pips{background:#080a0c99;border:1px solid #ffffff1a;border-radius:3px;gap:clamp(4px,1cqw,7px);padding:.4em .7em;display:flex}.br-pips>i{border:1px solid #fff6;width:clamp(6px,1.2cqw,9px);height:clamp(6px,1.2cqw,9px);transition:background-color .3s,scale .3s;rotate:45deg}.br-pips>i[data-state=done]{background:#fff9}.br-pips>i[data-state=now]{background:var(--br-text-bright);scale:1.35;box-shadow:0 0 8px #fff0c8cc}.br-pips>i[data-key]{border-color:var(--br-brass)}.br-pips>i[data-key][data-state]{background:var(--br-brass)}.br-phase{font:700 clamp(9px, 1.8cqw, 11px) / 1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--br-text);text-shadow:0 1px 3px #000000e6;white-space:nowrap}.br-title{z-index:180;font:800 clamp(20px, 6.2cqw, 46px) / 1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--br-text-bright);text-shadow:0 2px #0009,0 0 24px #000000d9;white-space:nowrap;pointer-events:none;animation:1.05s ease-out both br-title;position:absolute;top:33%;left:50%;translate:-50% -50%}.br-title[data-key]{color:var(--br-brass);text-shadow:0 2px 0 #0009, 0 0 26px color-mix(in oklch, var(--br-brass) 55%, transparent)}.br-stamp{z-index:190;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0 0 12%}.br-stamp strong{font:800 clamp(24px, 8cqw, 60px) / 1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--br-enemy);border-block:1px solid color-mix(in oklch, var(--br-enemy) 55%, transparent);text-shadow:0 0 22px color-mix(in oklch, var(--br-enemy) 55%, transparent);background:linear-gradient(90deg,#0000,#080a0cc7 18% 82%,#0000);padding:.18em 1.1em .14em;animation:.6s cubic-bezier(.34,1.56,.64,1) both br-stamp}.br-stamp[data-won=true] strong{color:var(--br-own);border-color:color-mix(in oklch, var(--br-own) 55%, transparent);text-shadow:0 0 22px color-mix(in oklch, var(--br-own) 55%, transparent)}.br-band{z-index:200;justify-content:space-between;align-items:flex-end;gap:8px;padding:10px 12px;display:flex;position:absolute;bottom:0;left:0;right:0}.br-caption{text-shadow:0 1px 3px #000000e6;min-width:0}.br-caption strong{font:700 clamp(12px, 2.4cqw, 15px) / 1.15 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--br-text-bright);display:block}.br-caption span{color:var(--br-text);font-variant-numeric:tabular-nums;margin-top:2px;font-size:clamp(10.5px,1.9cqw,12px);line-height:1.35;display:block}.br-controls{flex-shrink:0;gap:6px;display:flex}.br-btn{min-height:36px;font:700 11px / 1 var(--font-display);letter-spacing:.09em;text-transform:uppercase;color:var(--br-text);cursor:pointer;white-space:nowrap;background:#0c0e10d1;border:1px solid #ffffff29;border-radius:2px;justify-content:center;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.br-btn:hover:not(:disabled){border-color:var(--br-brass);color:var(--br-text-bright)}.br-btn:focus-visible{outline:2px solid var(--br-brass);outline-offset:2px}.br-btn:disabled{opacity:.4;cursor:default}.br-btn--primary{color:#1a1406;background:linear-gradient(180deg, #e2c16a, var(--br-brass));border-color:#e6c877}.br-btn--primary:hover:not(:disabled){color:#0d0a03;border-color:#fff0c0}.br-btn--icon{width:36px;padding:0}.br-btn svg{width:14px;height:14px}@media (pointer:coarse){.br-btn{min-height:44px}.br-btn--icon{width:44px}}@keyframes br-deploy{0%{transform:translateX(calc((var(--enter,-1)) * 12cqw));opacity:0}}@keyframes br-bob{to{transform:translateY(-.45cqh)}}@keyframes br-rumble{to{transform:translate(.08cqw,-.12cqh)}}@keyframes br-hit{0%{filter:brightness(1.45)sepia(.7)saturate(2.4)hue-rotate(-28deg)}25%{translate:-.7cqw}55%{translate:.6cqw}to{filter:none;translate:0}}@keyframes br-shake-a{0%,to{translate:0}20%{translate:-.6% .5%}45%{translate:.5% -.4%}70%{translate:-.3% .2%}}@keyframes br-shake-b{0%,to{translate:0}20%{translate:.6% .4%}45%{translate:-.5% -.5%}70%{translate:.3% .2%}}@keyframes br-crater{0%{opacity:0;scale:.3}}@keyframes br-plume{0%{translate:0;scale:.9}to{translate:.4cqw -1.4cqh;scale:1.12}}@keyframes br-loss{0%{opacity:0;translate:-50% 1.5cqh;scale:.7}15%{opacity:1;translate:-50%;scale:1.12}30%{scale:1}75%{opacity:1}to{opacity:0;translate:-50% -3.5cqh}}@keyframes br-flash{0%{opacity:0;scale:.4}25%{opacity:1;scale:1}to{opacity:0;scale:1.3}}@keyframes br-shot-x{0%{opacity:1;translate:0}to{opacity:1;translate:calc((var(--x1) - var(--x0)) * 1cqw) 0}}@keyframes br-shot-y{0%{animation-timing-function:cubic-bezier(.33,.66,.66,1);translate:0}50%{translate:0 calc(((var(--y1) - var(--y0)) / 2 - var(--arc)) * 1cqh);animation-timing-function:cubic-bezier(.33,0,.66,.33)}to{translate:0 calc((var(--y1) - var(--y0)) * 1cqh)}}@keyframes br-fire{0%{opacity:1;scale:.2}30%{opacity:1;scale:1}to{opacity:0;scale:1.3}}@keyframes br-smoke{0%{opacity:0;translate:0;scale:.4}20%{opacity:.9}to{opacity:0;translate:.6cqw -6cqh;scale:1.5}}@keyframes br-debris{0%{opacity:1;translate:0}to{opacity:0;translate:var(--dx) var(--dy);rotate:200deg}}@keyframes br-title{0%{opacity:0;letter-spacing:.34em;scale:1.3}18%{opacity:1;letter-spacing:.14em;scale:1}70%{opacity:.95}to{opacity:0;scale:.97}}@keyframes br-stamp{0%{opacity:0;scale:1.5}to{opacity:1;scale:1}}@media (prefers-reduced-motion:reduce){.battle-replay *,.br-stage{transition:none!important;animation:none!important}.battle-replay[data-decisive] .br-world{scale:none}}[data-reduce-motion=true] .battle-replay *,[data-reduce-motion=true] .br-stage{transition:none!important;animation:none!important}.report-replay{width:calc(100% + 1.5rem);margin:-.75rem -.75rem .75rem}.report-replay .br-stage{border-width:0 0 1px}}@layer utilities;