.st-battle-legend{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;border-top:1px solid rgba(255,255,255,.045);} .st-battle-legend .st-legend-row{min-width:0;padding:6px 0;} .st-legend-swatch{width:18px;height:18px;flex:0 0 18px;box-sizing:border-box;position:relative;background:rgba(10,16,18,.16);border:1px solid rgba(126,139,124,.30);} .st-legend-swatch.missed{background:rgba(71,85,105,.18);border-color:rgba(100,116,139,.34);} .st-legend-swatch.missed::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(148,163,184,.62);box-shadow:0 0 0 1px rgba(15,23,42,.28);} .st-legend-swatch.ruled{background:rgba(51,65,85,.46);border-color:rgba(100,116,139,.34);} .st-legend-swatch.core{background:linear-gradient(180deg,#2e7d32,#1b5e20);border-color:#245b2b;} .st-legend-swatch.destroyed,.st-legend-swatch.unfinished{background:linear-gradient(180deg,#e53935,#b71c1c);border-color:#8b1515;} .st-legend-swatch.hit{background:rgba(10,16,18,.16);border-color:rgba(126,139,124,.30);} .st-legend-swatch.hit::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent 0 3px,#ff3b30 3px 4px,transparent 4px),linear-gradient(#ff3b30,#ff3b30) center/1px 14px no-repeat,linear-gradient(90deg,#ff3b30,#ff3b30) center/14px 1px no-repeat;} .st-legend-swatch.scouted::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;border:1px solid rgba(186,230,253,.88);background:radial-gradient(circle,transparent 0 54%,rgba(56,189,248,.16) 58%,rgba(125,211,252,.10) 70%,transparent 79%);box-shadow:inset 0 0 3px rgba(224,242,254,.40),0 0 4px rgba(56,189,248,.72);} .st-legend-swatch.scouted-unknown::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:bold 14px/1 Arial,sans-serif;color:#facc15;text-shadow:0 1px 2px #000;} .st-legend-swatch.scouted-unknown::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;border:1px solid rgba(186,230,253,.88);background:radial-gradient(circle,transparent 0 54%,rgba(56,189,248,.16) 58%,rgba(125,211,252,.10) 70%,transparent 79%);box-shadow:inset 0 0 3px rgba(224,242,254,.40),0 0 4px rgba(56,189,248,.72);} @keyframes stLegendRezPulse{0%,100%{transform:scale(.86);filter:brightness(.92);opacity:.78} 50%{transform:scale(1.12);filter:brightness(1.35);opacity:1}} @keyframes stLegendScoutPulse{0%,100%{transform:scale(.86);filter:brightness(.95);opacity:.72} 50%{transform:scale(1.14);filter:brightness(1.30);opacity:1}} .st-legend-swatch.scouting-phase::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;border:1px solid rgba(186,230,253,.88);background:radial-gradient(circle,transparent 0 54%,rgba(56,189,248,.16) 58%,rgba(125,211,252,.10) 70%,transparent 79%);box-shadow:inset 0 0 3px rgba(224,242,254,.40),0 0 4px rgba(56,189,248,.72);transform-origin:center;animation:stLegendScoutPulse 1.05s ease-in-out infinite;} .st-legend-swatch.unfinished::before,.st-legend-swatch.monk::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:bold 14px/1 Arial,sans-serif;color:#facc15;text-shadow:0 1px 2px #000;} .st-legend-swatch.plague{background:radial-gradient(circle at 28% 30%,rgba(211,147,255,.72) 0 10%,rgba(154,73,190,.58) 23%,transparent 44%),radial-gradient(circle at 72% 68%,rgba(176,95,222,.68) 0 12%,rgba(100,47,135,.58) 28%,transparent 50%),linear-gradient(145deg,rgba(66,24,89,.75),rgba(117,48,151,.70) 52%,rgba(37,18,57,.82));border-color:rgba(192,101,231,.48);box-shadow:inset 0 0 5px rgba(25,8,35,.88);} .st-legend-swatch.resurrected{background:linear-gradient(180deg,#2e7d32,#1b5e20);border-color:#245b2b;} .st-legend-swatch.resurrected::before,.st-legend-swatch.resurrected::after,.st-legend-swatch.resurrection-phase::before,.st-legend-swatch.resurrection-phase::after{content:"";position:absolute;background:#f8e7a1;box-shadow:0 0 2px rgba(250,204,21,.55);} .st-legend-swatch.resurrected::before,.st-legend-swatch.resurrection-phase::before{width:3px;height:12px;left:7px;top:2px} .st-legend-swatch.resurrected::after,.st-legend-swatch.resurrection-phase::after{width:11px;height:3px;left:3px;top:6px} .st-legend-swatch.resurrection-phase::before,.st-legend-swatch.resurrection-phase::after{transform-origin:center;animation:stLegendRezPulse 1.05s ease-in-out infinite} .st-legend-swatch.resurrection-phase{background:linear-gradient(180deg,#2e7d32,#1b5e20);border-color:#245b2b} @media(max-width:980px){.st-battle-legend{grid-template-columns:1fr;}}