/* SHADOWS animated roster modal */
[hidden].roster-backdrop{display:none!important}
.roster-backdrop{position:fixed;z-index:5000;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(2,3,5,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.roster-backdrop.is-open{opacity:1;visibility:visible}
.roster-modal{width:min(100%,980px);max-height:min(88vh,850px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #3c3e43;border-radius:12px;background:linear-gradient(150deg,#15171a 0%,#0b0c0e 75%);box-shadow:0 30px 110px #000d,0 0 0 1px #ffd21c08;transform:translateY(18px) scale(.975);opacity:0;transition:transform .24s cubic-bezier(.2,.85,.2,1),opacity .2s ease}
.roster-backdrop.is-open .roster-modal{transform:translateY(0) scale(1);opacity:1}
.roster-modal-top{height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #2b2d32;background:#0d0e10;color:#858990;font-size:9px;letter-spacing:.17em;font-weight:800}
.roster-modal-top span i{font-style:normal;color:var(--yellow);padding:0 5px}
.roster-close{display:grid;place-items:center;width:29px;height:29px;border:1px solid #3a3d42;border-radius:5px;color:#c8cacc;background:#191b1e;font-size:23px;line-height:1;transition:all .16s}
.roster-close:hover{background:var(--yellow);border-color:var(--yellow);color:#090a0c;transform:rotate(90deg)}
.roster-modal-heading{display:flex;align-items:center;gap:15px;padding:20px 22px 17px;border-bottom:1px solid #292c30;background:radial-gradient(ellipse at 85% 40%,#ffd21c0a,transparent 36%),linear-gradient(120deg,#15171a,#101113)}
.roster-modal-mark{display:grid;place-items:center;flex-shrink:0;width:49px;height:49px;border:1px solid #6a5716;border-radius:8px;background:#252012;color:var(--yellow);font-size:24px;box-shadow:inset 0 0 25px #ffd21c08}
.roster-modal-title{min-width:0;flex:1}
.roster-modal-title>span{color:var(--yellow);font-size:8px;font-weight:800;letter-spacing:.16em}
.roster-modal-title h2{margin:3px 0 5px;color:#f3f3ef;font-size:24px;line-height:1.12;font-weight:800;letter-spacing:-.02em}
.roster-modal-title p{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.roster-modal-title p strong{color:#d8d9d9;font-size:11px}
.roster-modal-title p small{color:#888c92;font-size:10px}
.roster-total{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0}
.roster-total strong{color:#f5f5f0;font-size:31px;font-weight:800;line-height:1}
.roster-total span{margin-top:5px;color:#7a7e84;font-size:8px;font-weight:800;letter-spacing:.15em}
.roster-team-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:14px 18px;border-bottom:1px solid #2a2c30;background:#101113}
.roster-team-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:0 10px;border:1px solid #35383d;border-radius:5px;background:#17191c;color:#a4a8ae;font-size:9px;letter-spacing:.07em;font-weight:800;transition:background .16s,border-color .16s,color .16s,transform .16s}
.roster-team-tab b{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:4px;background:#24262a;color:#d8d9db;font-size:10px}
.roster-team-tab:hover{transform:translateY(-1px);border-color:#696d73;color:#fff}
.roster-team-tab.tab-all.active{background:#28251a;border-color:#7d691e;color:#ffe168}
.roster-team-tab.tab-all.active b{background:#51451b;color:#ffe168}
.roster-team-tab.tab-terrorists i{width:7px;height:7px;border-radius:50%;background:#ff9b32}
.roster-team-tab.tab-terrorists.active{background:#2c1d12;border-color:#a15d20;color:#ffb465}
.roster-team-tab.tab-terrorists.active b{background:#512b11;color:#ffb465}
.roster-team-tab.tab-counter i{width:7px;height:7px;border-radius:50%;background:#55b8ff}
.roster-team-tab.tab-counter.active{background:#102338;border-color:#2f72a8;color:#77cbff}
.roster-team-tab.tab-counter.active b{background:#173b59;color:#8bd4ff}
.roster-list-head,.roster-player-row{display:grid;grid-template-columns:38px minmax(190px,1fr) 112px 76px 76px 92px;align-items:center;column-gap:10px;min-width:660px}
.roster-list-head{padding:11px 18px;background:#1a1c1f;color:#858990;border-bottom:1px solid #35383d;font-size:8px;letter-spacing:.12em;font-weight:800}
.roster-list-head span:nth-child(n+4){text-align:center}
.roster-list{min-height:180px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#383b40 #0c0d0f;scrollbar-width:thin}
.roster-player-row{position:relative;padding:11px 18px;border-bottom:1px solid #24262b;color:#c5c7ca;font-size:11px;animation:roster-row-in .2s ease both;transition:background .15s}
.roster-player-row:nth-child(even){background:#ffffff03}
.roster-player-row:hover{background:#ffffff08}
.roster-player-row:before{position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;content:"";transition:background .15s}
.roster-player-row.team-2:before{background:#e78b2e}
.roster-player-row.team-3:before{background:#359fe5}
.roster-player-number{color:#6e7278;font-size:10px;font-weight:800}
.roster-player-details{display:flex;flex-direction:column;gap:3px;min-width:0}
.roster-player-name{max-width:100%;overflow:hidden;color:#f0f0ed;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}
.roster-player-steamid{overflow:hidden;color:#70747a;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;font-size:8px}
.roster-team-chip{display:inline-flex;align-items:center;justify-content:center;width:49px;min-height:24px;border:1px solid #3b3e43;border-radius:4px;background:#191b1e;color:#a9adb2;font-size:9px;font-weight:800;letter-spacing:.04em}
.roster-team-chip.chip-2{border-color:#79451e;background:#291b10;color:#ffb365}
.roster-team-chip.chip-3{border-color:#285c87;background:#102137;color:#85cfff}
.roster-team-chip.chip-1{width:76px;border-color:#44464b;background:#202226;color:#b9bcc1;font-size:8px}
.roster-player-stat,.roster-player-time{justify-self:center;color:#e1e2df;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.roster-player-stat.muted-stat{color:#82868c;font-weight:500}
.roster-player-time{color:#a6a9ae;font-size:10px}
.roster-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-top:1px solid #303238;background:#0d0e10}
.roster-modal-footer>span{display:flex;align-items:center;gap:7px;color:#767a80;font-size:8px;font-weight:800;letter-spacing:.1em}
.roster-modal-footer>span i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #56d66f70}
.roster-modal-footer>span.roster-state-error{color:#ff9999}
.roster-modal-footer>span.roster-state-error i{background:#ef4747;box-shadow:none}
.roster-modal-footer>div{display:flex;align-items:center;gap:8px}
.roster-modal-footer .btn{min-height:37px;padding:0 12px;font-size:8px}
.roster-loading,.roster-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:25px}
.roster-loading strong,.roster-empty strong{color:#e7e8e5;font-size:13px}
.roster-loading small,.roster-empty small{color:#81858b;font-size:10px}
.roster-spinner{width:29px;height:29px;border:2px solid #34373c;border-top-color:var(--yellow);border-radius:50%;animation:roster-spin .75s linear infinite}
.roster-empty>span{display:grid;place-items:center;width:39px;height:39px;border:1px solid #6d5818;border-radius:50%;background:#221d0f;color:var(--yellow);font-size:20px;font-weight:800}
.roster-empty.roster-error>span{border-color:#6e3537;background:#2a1517;color:#ff8d91}
.roster-backdrop button:focus-visible,.roster-backdrop a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.logout-button{display:grid;place-items:center;width:35px;height:38px;border:1px solid #34363a;border-radius:5px;color:#aaaeb4;font-size:17px}
.logout-button:hover{border-color:#7e3336;background:#241214;color:#ff9699}
.login-button.logged-in{max-width:145px;overflow:hidden}
.login-button.logged-in span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.roster-open{overflow:hidden}
.hero-panel{min-height:390px!important;background-image:linear-gradient(90deg,rgba(5,6,8,.94) 0%,rgba(5,6,8,.75) 34%,rgba(5,6,8,.33) 68%,rgba(5,6,8,.65) 100%),url('hero.jpg')!important;background-size:cover!important;background-position:center 46%!important;border-color:#4b4328!important}
.hero-panel:before{opacity:.16!important;background-size:48px 48px!important}
.hero-main{padding-top:37px!important;padding-bottom:27px!important}
.hero-side-stamp{right:40px!important;bottom:32px!important}
@keyframes roster-spin{to{transform:rotate(360deg)}}
@keyframes roster-row-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .roster-backdrop{padding:8px;align-items:center}
  .roster-modal{width:100%;max-height:92vh;border-radius:9px}
  .roster-modal-heading{gap:10px;padding:15px 12px}
  .roster-modal-mark{width:37px;height:37px;font-size:18px}
  .roster-modal-title h2{font-size:18px}
  .roster-modal-title p{gap:4px;align-items:flex-start;flex-direction:column}
  .roster-total strong{font-size:24px}
  .roster-team-tabs{gap:5px;padding:10px}
  .roster-team-tab{min-height:40px;padding:0 5px;font-size:7px;letter-spacing:0;gap:4px}
  .roster-team-tab b{min-width:18px;height:18px;font-size:9px}
  .roster-list-head{padding:10px 12px}
  .roster-player-row{padding:11px 12px}
  .roster-modal-footer{align-items:stretch;flex-direction:column;padding:12px}
  .roster-modal-footer>div{display:grid;grid-template-columns:1fr 1fr}
  .roster-modal-footer .btn{width:100%;padding:0 5px;font-size:8px}
  .hero-panel{min-height:405px!important;background-position:58% center!important}
  .hero-panel:after{background:linear-gradient(90deg,#090a0cf5 0%,#090a0cba 58%,#090a0c72 100%)}
}
@media(prefers-reduced-motion:reduce){
  .roster-backdrop,.roster-modal,.roster-player-row,.roster-spinner{transition:none!important;animation:none!important}
}