.brawl-page #ui:before{background:radial-gradient(ellipse 75% 70% at 50% 52%,#0000 55%,#0a0406bf)}.brawl-plates{position:absolute;top:10px;left:50%;transform:translate(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,220px));gap:6px;width:min(100% - 20px,904px);justify-content:center}.brawl-plate{position:relative;display:flex;gap:8px;align-items:center;padding:6px 10px 6px 6px;background:#141116f5;min-width:0;transition:opacity .4s,filter .4s}.brawl-plate:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tint);opacity:.8}.brawl-plate .face{flex:none;width:44px;height:44px;overflow:hidden;background:var(--ink-3);display:grid;place-items:start center}.brawl-plate .face canvas{width:60px!important;height:auto!important;margin-top:-4px;display:block}.brawl-plate .body{flex:1;min-width:0;display:grid;gap:4px}.brawl-plate .head{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.brawl-plate .name{font-family:var(--display);font-stretch:85%;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:13px;color:var(--tint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brawl-plate .kills{color:var(--ivory-2);font-size:11px;letter-spacing:1px;white-space:nowrap}.brawl-plate .hp-track{position:relative;height:9px;background:var(--ink-0);overflow:hidden}.brawl-plate .hp-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#8fe39f,#4fae6a);transition:width .15s linear}.brawl-plate .hp-fill.low{background:linear-gradient(180deg,#f08a6a,#c8402e)}.brawl-plate .hp-shield{position:absolute;top:0;bottom:0;background:#f3ead8bf}.brawl-plate .hp-text{position:absolute;right:3px;top:-2px;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}.brawl-plate .statuses{display:flex;gap:2px;height:16px}.brawl-plate .statuses img{width:16px;height:16px}.brawl-plate .tag{flex:none;font-family:var(--display);font-weight:800;font-size:11px;color:var(--mute)}.brawl-plate .tag:empty{display:none}.brawl-plate.out{opacity:.5;filter:grayscale(1)}.brawl-plate.won{background:linear-gradient(90deg,#6b5021f2,#141116f5)}.brawl-plate.won .tag{color:var(--gold)}.brawl-clock{align-self:center;min-width:52px;text-align:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--ivory-2);letter-spacing:.06em;text-shadow:0 1px 3px #000}.brawl-feed{position:absolute;top:78px;left:50%;transform:translate(-50%);display:grid;gap:4px;justify-items:center;width:min(100% - 20px,520px)}.brawl-ko{padding:6px 14px;background:#4a1220f2;font-family:var(--display);font-stretch:85%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:14px;animation:brawl-in .25s ease-out;transition:opacity .5s}.brawl-ko.fade{opacity:0}@keyframes brawl-in{0%{transform:translateY(-8px) scale(1.15);opacity:0}}.brawl-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;display:grid;justify-items:center;gap:10px;padding:26px 34px 28px;background:#0e0a0df0;text-align:center;width:min(100% - 32px,460px);animation:brawl-in .3s ease-out}.brawl-center .kicker{font-family:var(--display);font-weight:750;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--wine-hi)}.brawl-center h1{margin:0;font-family:var(--display);font-stretch:80%;font-weight:900;text-transform:uppercase;font-size:30px;line-height:1.05;letter-spacing:.02em}.brawl-center p{margin:0 0 6px;color:var(--ivory-2)}.brawl-center .row{display:flex;gap:8px}.brawl-center .winner-face{background:linear-gradient(180deg,var(--gold-lo),transparent)}.brawl-bar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:6px;background:#141116f5;pointer-events:auto}.brawl-speeds{display:flex;gap:2px}.brawl-bar .btn{padding:8px 12px}.brawl-bar .btn:disabled{opacity:.4;cursor:default}@media(max-width:760px){.brawl-plates{grid-template-columns:repeat(2,minmax(0,1fr));top:6px;gap:4px}.brawl-plate{padding:4px 8px 4px 4px;gap:6px}.brawl-plate .face{width:34px}.brawl-plate .face canvas{width:46px!important;margin-top:-3px}.brawl-plate .face{height:34px}.brawl-plate .statuses{height:12px}.brawl-plate .statuses img{width:12px;height:12px}.brawl-feed{top:108px}.brawl-ko{font-size:12px}.brawl-center h1{font-size:24px}.brawl-bar{bottom:8px;width:calc(100% - 16px);justify-content:center;flex-wrap:wrap}.brawl-bar .btn{padding:8px 10px}}.brawl-plate .name{flex:1;min-width:0}
