.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.role{min-width:0;justify-content:flex-start;padding:9px 7px;gap:5px}.role strong{font-size:21px;min-width:19px;color:var(--class-color)}.role span{font-size:10px;white-space:nowrap}.role small{font-size:8px!important;line-height:1.4;color:#b2c3c8;white-space:normal}.role.selected{border-color:var(--class-color);background:color-mix(in srgb,var(--class-color) 12%,#16282e)}
#class-details{margin:9px 0 11px;padding:9px 11px;border-left:2px solid var(--class-color);background:#102029d9;display:grid;gap:7px}#class-details b{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--class-color)}#class-details b small{margin-left:auto;font-size:9px;color:#b7c3c6;font-weight:400;white-space:nowrap}#class-details div>span{display:block;margin-top:3px;color:#c1cecf;font-size:9px;line-height:1.65}
.ability-hud{display:flex;align-items:center;gap:12px;bottom:62px;padding:9px 14px;background:linear-gradient(90deg,#10222be0,#10222b99);border:1px solid #97c7ce33;border-radius:7px;max-width:calc(100vw - 560px)}.ability-hud>span{min-width:112px}.ability-hud b{font-size:11px}.ability-hud small{font-size:10px;white-space:nowrap}.ability-hud #ability-icon{width:39px;height:39px;font-size:25px;flex-shrink:0}.ultimate-hud{--class-color:#f6c86c;display:flex;align-items:center;gap:9px;padding:1px 13px 1px 10px;border-left:1px solid #a0bac244}.ultimate-hud>span{min-width:115px;display:block}.ultimate-hud small{display:block;margin-top:3px;color:#9faeb5}.ultimate-hud #ultimate-icon{width:44px;height:44px;display:grid;place-items:center;font-size:28px;color:var(--class-color);border:2px solid #8eafbd44;border-radius:50%;background:conic-gradient(color-mix(in srgb,var(--class-color) 25%,transparent) var(--charge),#13243066 0)}.ultimate-hud.ready #ultimate-icon{border-color:var(--class-color);box-shadow:0 0 14px color-mix(in srgb,var(--class-color) 25%,transparent)}.ultimate-hud.ready small{color:var(--class-color)}.ultimate-hud.active #ultimate-icon{animation:skill-pulse .9s ease-in-out infinite}.ultimate-hud.active small{color:#fff}
#class-effect-status{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.3px;text-shadow:0 2px 5px #07101a;background:#10212aba;padding:5px 11px;border-radius:3px;max-width:68vw;text-align:center;pointer-events:none}#class-effect-status:empty{display:none}
#class-screen-effect{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .2s;box-shadow:inset 0 0 110px -30px var(--class-color);mix-blend-mode:screen}#class-screen-effect:not(:empty),#class-screen-effect.runner,#class-screen-effect.medic,#class-screen-effect.scout,#class-screen-effect.chronos,#class-screen-effect.guardian,#class-screen-effect.berserker,#class-screen-effect.gravity{opacity:.17}#class-screen-effect.scout{background:repeating-linear-gradient(0deg,transparent 0 5px,#7fcfff0d 6px 7px)}#class-screen-effect.berserker{opacity:.2}
#ultimate-notice{position:absolute;left:50%;top:23%;transform:translateX(-50%);font-size:23px;font-weight:700;letter-spacing:3px;color:var(--class-color);padding:11px 32px;border-top:1px solid var(--class-color);border-bottom:1px solid var(--class-color);background:linear-gradient(90deg,transparent,#0a1829c9,transparent);opacity:0;pointer-events:none}#ultimate-notice.show{animation:skill-notice 2.5s both}@keyframes skill-notice{0%{opacity:0;filter:blur(8px);letter-spacing:9px}16%,65%{opacity:1;filter:blur(0);letter-spacing:3px}100%{opacity:0;transform:translate(-50%,-8px)}}@keyframes skill-pulse{50%{box-shadow:0 0 20px var(--class-color)}}
@media(max-width:1150px){.ability-hud{max-width:none;bottom:210px;left:50%;gap:6px;padding:6px 8px}.ability-hud>span{min-width:100px}.ultimate-hud{padding-right:0}.ability-hud .ping-key{display:none}#class-effect-status{bottom:277px;font-size:10px}.role{padding:7px 5px}}
@media(max-height:820px) and (min-width:901px){.lobby-panel{margin-top:15px}.intro{margin-bottom:10px}#class-details{padding:7px 9px;gap:5px}#class-details div>span{font-size:8px}.roles{gap:4px}.role{padding:6px 4px}.role span{font-size:9px}.role small{font-size:7px!important}}
@media(prefers-reduced-motion:reduce){.ultimate-hud.active #ultimate-icon{animation:none}#ultimate-notice.show{animation:none;opacity:0}#class-screen-effect{transition:none}}