:root{--ink:#f8fbff;--muted:#b8c9df;--field:#29a866;--gold:#ffd85a;--blue:#4ecfff}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#061427;color:var(--ink);font-family:Inter,"Trebuchet MS","Segoe UI",sans-serif}
button{font:inherit;touch-action:manipulation}
.game-wrap{display:grid;width:min(100vw,56.25vh);height:min(100vh,177.7778vw);margin:auto}
.swarm-card{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;gap:clamp(6px,1.8cqw,9px);overflow:hidden;border:clamp(3px,1.1cqw,5px) solid var(--blue);border-radius:12px;background:linear-gradient(#102d5a 0 9%,#0d213c 9% 100%);padding:clamp(9px,2.7cqw,13px);box-shadow:inset 0 0 28px #4ecfff1c,0 0 0 2px #061427;container-type:inline-size}
.battle-head{display:flex;align-items:start;justify-content:space-between;gap:8px}
.battle-name{font-size:clamp(18px,5.7cqw,25px);font-weight:950;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px #081327}
.battle-state{margin-top:2px;color:#d7e7f6;font-size:clamp(10px,2.9cqw,18px);font-weight:700}
.metrics{display:flex;gap:12px;text-align:right}
.metrics span{display:block;color:#8fb4d8;font-size:clamp(8px,2.2cqw,14px);font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.metrics strong{display:block;max-width:150px;overflow:hidden;color:var(--gold);font-size:clamp(15px,4.6cqw,21px);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
.arena{position:relative;flex:1;min-height:0;overflow:hidden;border:clamp(2px,.8cqw,3px) solid #9af4c2;border-radius:8px;background:var(--field);box-shadow:inset 0 0 25px #043926b3,0 0 18px #5df2a838}
#arena{display:block;width:100%;height:100%}
.callout{position:absolute;z-index:3;left:7px;top:7px;max-width:56%;overflow:hidden;padding:5px 8px;border:1px solid #ffffff8c;border-radius:999px;background:#061833e6;font-size:clamp(8px,2.35cqw,15px);font-weight:900;text-overflow:ellipsis;text-shadow:0 2px #07152a;white-space:nowrap}
.mini-board{position:absolute;z-index:3;right:7px;top:7px;width:37%;padding:6px;border:2px solid var(--gold);border-radius:6px;background:#071126e8;box-shadow:0 4px 12px #0006;font-size:clamp(7px,2.05cqw,14px)}
.mini-board>strong{display:block;color:var(--gold);font-size:clamp(8px,2.15cqw,14px);letter-spacing:.08em;text-align:center}
.mini-board-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;margin-top:3px}
.mini-board-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gift-rails{position:absolute;z-index:4;inset:0;pointer-events:none}
.gift-rail{position:absolute;top:34%;display:grid;gap:7px;width:31%}
.gift-rail.left{left:5px}.gift-rail.right{right:5px}
.gift-rail-item{display:flex;align-items:center;gap:5px;min-width:0;padding:5px;border:1px solid #ffffff2e;border-radius:8px;background:#061228e8;box-shadow:0 2px 7px #0008;font-size:clamp(8px,2.35cqw,15px);font-weight:850;line-height:1.15}
.gift-rail.right .gift-rail-item{flex-direction:row-reverse;text-align:right}
.gift-rail-item .tt-core-gift-icon{display:grid;place-items:center;width:clamp(21px,6cqw,27px);height:clamp(21px,6cqw,27px);flex:0 0 clamp(21px,6cqw,27px)}
.gift-rail-item .tt-core-gift-icon img{width:100%;height:100%;object-fit:contain}
.gift-rail-item span:last-child{min-width:0;overflow-wrap:anywhere}
.effect-strip{position:absolute;z-index:3;right:7px;bottom:7px;left:7px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.effect-chip{padding:4px 7px;border:1px solid #77e9ffa6;border-radius:999px;background:#061833e6;font-size:clamp(7px,2.05cqw,14px);font-weight:900}
.mode-label{position:absolute;z-index:6;top:10px;left:50%;transform:translateX(-50%);padding:5px 11px;border-radius:999px;background:#061228eb;color:var(--gold);font-size:clamp(10px,2.8cqw,18px);font-weight:900}
.gift-toast{display:flex;align-items:center;justify-content:center;gap:7px;min-height:25px;font-size:clamp(10px,2.9cqw,18px);font-weight:850;text-align:center}
.gift-toast img{width:21px;height:21px;object-fit:contain}
.readout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;font-size:clamp(10px,2.8cqw,18px);font-weight:800}
.readout>div:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readout strong{color:var(--gold)}.population{color:#71f0ae;font-weight:950}
.feed{display:grid;grid-template-columns:1fr 1fr;gap:3px 7px;min-height:39px;color:#dcecff;font-size:clamp(8px,2.2cqw,14px)}
.feed div{overflow:hidden;padding:2px 5px;border-left:2px solid #ffcf4a;background:#ffffff0b;text-overflow:ellipsis;white-space:nowrap}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.controls button{min-height:36px;border:1px solid #4c6d94;border-radius:7px;background:#203753;color:var(--ink);font-size:clamp(10px,2.8cqw,18px);font-weight:800;cursor:pointer}
.controls button[data-active=true]{border-color:var(--gold);background:#7b5e11}
html.source-page,html.source-page body{width:100%;height:100%;overflow:hidden;background:#061427!important}
.source-page body{display:flex;align-items:center;justify-content:center}
.source-page .tt-core-status>.tt-core-pill{display:none}
.preview-status{display:none!important}
[data-tt-gift-icons=off] .gift-rail-item .tt-core-gift-icon{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}