:root { --bg:#1b1717; --panel:#242026; --panel2:#1c181d; --border:#2f2a31; --ok:#1d5e2b; --ok2:#154a21; --nav-btn-h: 38px; --green:#178a2f; --green2:#0f5f22; }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:#fff}
  .wrap{
  width:100%;
  max-width:1450px;
  margin:0 auto;
  padding:0 20px;
}

  
  header .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
  .logo{text-decoration:none;color:#fff;font-weight:800;letter-spacing:.5px;font-size:22px}
  nav{display:flex;align-items:center;gap:12px}

  .scrim-tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
    margin-bottom:15px;
    margin-top: 15px;
  }
  .scrim-tab{
    display:inline-flex;align-items:center;justify-content:center;
    height:var(--nav-btn-h);padding:0 14px;
    border:1px solid #3a3333;border-radius:10px;
    background:#2a2525;color:#fff;
    text-decoration:none;font-weight:800;letter-spacing:.3px
  }
  .scrim-tab.active{
    background:linear-gradient(90deg,var(--ok),var(--ok2));
    border-color:#2b8a3e;color:#fff;
    box-shadow:0 0 0 2px rgba(43,138,62,.35) inset
  }
  

  .contact-btn{background:linear-gradient(90deg,#ffb347,#ff7733);color:#000;border:none;padding:8px 18px;border-radius:8px;font-weight:700;text-decoration:none}
  .admin-btn{background:#2a2525;color:#fff;border:1px solid #3a3333;padding:8px 18px;border-radius:8px;font-weight:700;text-decoration:none}
  nav .admin-btn{display:inline-flex;align-items:center;height:var(--nav-btn-h);line-height:1}

  .steam-img-btn{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;height:var(--nav-btn-h)}
  .steam-img-btn img{display:block;height:var(--nav-btn-h);width:auto}
  .steam-logout-btn{display:inline-flex;align-items:center;height:var(--nav-btn-h);padding:8px 18px;border-radius:8px;background:#2a2525;color:#fff;border:1px solid #3a3333;text-decoration:none;font-weight:700}

  
  .h1{font-size:24px;font-weight:800;margin:0 0 14px;}
  .h2{font-size:24px;font-weight:800;margin:20 10 14px;}

  .hostOnly{display:none}
  .hostOnly.show{display:block}

  .lobby{overflow:hidden}
  
  .slot input{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .badges,.kick,.hostbtn,.move{flex:0 0 auto}

  .lobby{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:12px;padding:16px}
  .lobby-grid{
  display:grid;
  gap:14px;
  grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);
  width:100%;
  min-width:0;
}
  .team{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
  .team-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font-weight:800;
  color:#fff;
}

.team-head > span:first-child{
  flex:0 0 auto;
  white-space:nowrap;
}

.team-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  opacity:.9;
}
.team-name.editable{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}.team-name.editable:hover{opacity:1;filter:brightness(1.15)}
  
  
  
  .slot{
  background:#1d1920;
  border:1px solid #2a242a;
  border-radius:10px;
  padding:10px;
  display:flex;
  gap:6px;
  align-items:center;
  min-width:0;
  overflow:hidden;
  transition:background .15s,border-color .15s;
}
  .slot input{flex:1;border:none;outline:none;background:transparent;color:#fff;font-weight:600}
  .slot input[readonly]{opacity:.9;cursor:default}
  .slot.live{background:linear-gradient(180deg,var(--ok),var(--ok2));border-color:#2b8a3e}
  .slot.accepted{background:linear-gradient(180deg,var(--ok),var(--ok2));border-color:#2b8a3e}
  .slot.declined{background:linear-gradient(180deg,#5e1d1d,#4a1515);border-color:#8a2b2b}
  .server.allaccepted{border-color:#2b8a3e;box-shadow:0 0 0 2px rgba(43,138,62,.35)}

  #serverConnectCard {
    display: none;
    margin-top: 20px;
    background: linear-gradient(180deg,#221f24,#1b1717);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }
  #serverConnectCard .connect-label {
    font-weight: 900;
    color: #ffd042;
    margin-bottom: 8px;
  }
  #serverConnectCard .connect-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  #serverConnectCard .connect {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    background: #1f1a1a;
    border: 1px solid #2a2222;
    border-radius: 8px;
    padding: 8px 10px;
    color: #e9e9ee;
  }
  #serverConnectCard .copy-btn {
    border: 1px solid #3a3333;
    background: #2a2525;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
  }

  .kick,.hostbtn,.move{border:1px solid #3a3333;background:#2a2525;color:#fff;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12px;display:none}
  .move{border-color:#375a7f;background:#20364d}
  .move.selected{border-color:#ffd042;background:#5b4a10;color:#fff}
  .move.swap-target{border-color:#2b8a3e;background:#154a21}

  .captains-pick-panel{display:none;min-height:430px;padding:4px}
  .captains-pick-panel.show{display:block}
  .captains-pick-shell{background:#1d1920;border:1px solid #2a242a;border-radius:12px;padding:16px}
  .captains-pick-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
  .captains-pick-title{font-size:22px;font-weight:900;letter-spacing:.4px}
  .captains-pick-status{color:#cfd0d6;margin-top:5px;line-height:1.4}
  .captains-private-note{font-size:12px;color:#9da0a8;margin-top:6px}
  .captains-cancel{background:linear-gradient(90deg,#9b1c1c,#7a1414);border-color:#c43d3d;white-space:nowrap}
  .captains-grid{display:grid;grid-template-columns:1fr minmax(260px,1.15fr) 1fr;gap:14px;align-items:start}
  .captains-column{background:#18151a;border:1px solid var(--border);border-radius:10px;padding:12px;min-height:300px}
  .captains-column.ct{box-shadow:inset 0 3px 0 #4a90e2}
  .captains-column.t{box-shadow:inset 0 3px 0 #ff8b3d}
  .captains-column.pool{box-shadow:inset 0 3px 0 #ffd042}
  .captains-column-title{font-weight:900;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
  .captains-player-list{display:flex;flex-direction:column;gap:8px}
  .captains-player{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#221d24;border:1px solid #363036;border-radius:9px;padding:9px 10px;min-height:42px}
  .captains-player-name{font-weight:750;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .captains-player.captain{border-color:#ffd042;background:#2b2515}
  .captains-role{font-size:10px;font-weight:900;letter-spacing:.5px;color:#ffd042;border:1px solid rgba(255,208,66,.45);border-radius:999px;padding:2px 6px}
  .captains-pick-choice{width:100%;text-align:left;text-transform:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px}
  .captains-pick-choice[disabled]{opacity:.72}
  .captains-pick-choice.available{border-color:#2b8a3e;background:#173c21}
  .captains-waiting{display:flex;min-height:390px;align-items:center;justify-content:center;text-align:center;padding:30px}
  .captains-waiting-card{max-width:520px;background:#18151a;border:1px solid var(--border);border-radius:12px;padding:28px}
  .captains-waiting-title{font-size:24px;font-weight:900;margin-bottom:9px}
  .captains-waiting-text{color:#cfd0d6;line-height:1.5}
  .captains-empty{color:#8f9198;font-style:italic;padding:8px 2px}

  @media (max-width:900px){
    .captains-grid{grid-template-columns:1fr}
    .captains-column.pool{order:-1}
    .captains-pick-head{flex-direction:column}
  }

  .mid{display:flex;flex-direction:column;align-items:stretch;gap:10px;justify-content:center}
  .mid .box{background:#1d1920;border:1px solid #2a242a;border-radius:10px;padding:12px}
  .mid label{display:block;font-size:12px;color:#cfd0d6;margin-bottom:6px;letter-spacing:.4px}
  select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #363036;background:#221d24;color:#fff;font-weight:600}
  .btn{border:1px solid #3a3333;background:#2a2525;color:#fff;padding:12px 14px;border-radius:10px;cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.5px;text-align:center}
  .btn.small{padding:8px 10px;font-size:12px}
  .btn.active{outline:2px solid #ffd042}
  .btn[disabled]{opacity:.5;cursor:not-allowed}

  .btn-join{background:linear-gradient(90deg,#1d5e2b,#154a21);border-color:#2b8a3e;color:#fff}

  .btn-leave{background:linear-gradient(90deg,#9b1c1c,#7a1414);border-color:#c43d3d;color:#fff}

  .hostBadge{font-size:12px;opacity:.8;margin-left:8px}

  
  .slot .host-flag{flex:0 0 auto}
  .admin-flag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;margin-left:6px;border-radius:999px;font-size:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(135deg,#0d2918,#123b21);color:#72f09a;border:1px solid #2d8e4c;box-shadow:0 0 12px rgba(54,211,102,.14),inset 0 0 0 1px rgba(255,255,255,.025)}
  .admin-flag::before{content:"◆";font-size:7px;color:#47df75;text-shadow:0 0 8px rgba(71,223,117,.7)}
  .slot .admin-flag{flex:0 0 auto}
  .claim-host-btn{display:none;border-color:#2d8e4c!important;background:linear-gradient(135deg,#123b21,#0d2918)!important;color:#8cf5aa!important;box-shadow:0 0 16px rgba(54,211,102,.08)}
  .claim-host-btn.show{display:block}
  .claim-host-btn:hover:not(:disabled){border-color:#46c96c!important;background:linear-gradient(135deg,#17522d,#103920)!important}

  .joinbox{background:#1d1920;border:1px solid #2a242a;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
  .btnrow{display:flex;gap:8px}
  .btnrow .btn,.btnrow a.btn{flex:1}
  .steamRow{display:flex;align-items:center;gap:8px}
  .steamRow img{width:24px;height:24px;border-radius:50%}

  .servers{display:flex;flex-direction:column;gap:10px}
  .server{background:linear-gradient(180deg,#221f24,#1b1717);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;transition:box-shadow .15s,border-color .15s}
  .server.highlighted{border-color:#2b8a3e;box-shadow:0 0 0 2px rgba(43,138,62,.35)}
  .highlight{background:linear-gradient(90deg,#ffb347,#ff7733);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900;letter-spacing:.3px}
  .connect{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;background:#1f1a1a;border:1px solid #2a2222;border-radius:8px;padding:8px 10px;color:#e9e9ee}
  .copy-btn{border:1px solid #3a3333;background:#2a2525;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}

  .server-row{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }

  .pill-btn{
    border:1px solid #3a3333;
    background:#2a2525;
    color:#fff;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
  }

  .server details.cmds.wide{
    width:100%;
    margin-top:10px;
    background:#18161a;
    border:1px solid var(--border);
    border-radius:10px;
    padding:0;
  }

  .server details.cmds.wide[open]{
    box-shadow:0 0 0 2px rgba(43,138,62,.15) inset;
  }

  #cmdsPrac > summary::-webkit-details-marker{ display:none; }
  #cmdsPrac > summary{ list-style:none; }

  .server-row details.cmds {
    margin-left: auto;
    cursor: pointer;
  }

  .server-row summary {
    font-weight: 600;
    list-style: none;
  }
  .server-row summary::-webkit-details-marker { display:none; }

  .cmds{
    background:linear-gradient(180deg,#221f24,#1b1717);
    border:1px solid var(--border);
    border-radius:12px;
    padding:0;
    overflow:hidden;
  }
  .cmds > summary{
    list-style:none;
    cursor:pointer;
    padding:14px 16px;
    font-weight:900;
    display:flex; align-items:center; gap:10px;
    user-select:none;
  }
  .cmds > summary::-webkit-details-marker {display:none}
  .cmds[open] > summary { border-bottom:1px solid var(--border); }
  .cmds .caret{transition:transform .18s ease; display:inline-block}
  .cmds[open] .caret{ transform:rotate(90deg); }
  .cmds .hint{ font-weight:700; opacity:.6; margin-left:auto; }

  .cmd-list{ padding:8px 10px 12px; display:flex; flex-direction:column; gap:12px; }

  .cmd-group{
    border:1px solid var(--border);
    background:#1d1920;
    border-radius:10px;
    padding:10px 10px 6px;
  }
  .cmd-group-title{
    font-weight:900; letter-spacing:.3px; opacity:.95; margin:0 0 8px 2px;
  }

  .cmd-row{
    display:grid;
    grid-template-columns: max-content auto max-content;
    gap:10px;
    align-items:center;
    padding:6px 8px;
    border-radius:8px;
    transition:background .12s;
  }
  .cmd-row:hover{ background:#19161b; }

  .cmd-pill{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    background:#141114;
    border:1px solid #2a242a;
    border-radius:999px;
    padding:4px 10px;
    font-weight:800;
    letter-spacing:.2px;
    white-space:nowrap;
  }

  .arg-pill{
    margin-left:8px;
    font-size:12px;
    opacity:.9;
    background:#1f1a1f;
    border:1px dashed #2a242a;
    border-radius:999px;
    padding:2px 8px;
  }

  .cmd-desc{ color:#cfd0d6; }

  .copy-cmd{
    border:1px solid #3a3333;
    background:#2a2525;
    color:#fff;
    padding:6px 10px;
    border-radius:8px;
    font-weight:700; font-size:12px;
    cursor:pointer;
  }
  .copy-cmd.copied{ outline:2px solid #21c55d; }

  .match{background:linear-gradient(180deg,#221f24,#1b1717);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .match-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer}

  .match-title{
    display:grid;
    --date-col: 16ch;
    --score-col: 72px;
    --map-col: 110px;
    grid-template-columns: var(--date-col) var(--score-col) var(--map-col) 1fr;
    align-items:center;
    gap:10px;
    width:100%;
  }
  .match-title .when {
    color: #fff;
    font-weight: 800;
  }
  .match-title .score{
    justify-self:start;
    width:var(--score-col);
    display:inline-flex; align-items:center; justify-content:center;
  }
  .match-title .map-pill{
    justify-self:start;
    width:var(--map-col);
    text-align:center;
  }
  .match-title .teams{
    display:inline-flex; align-items:center; gap:10px;
  }
  .match-title .datetime{
    background:linear-gradient(90deg,#ffb347,#ff7733);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:800
  }
  .chev{opacity:.7}
  .match-body{display:none;border-top:1px solid var(--border);padding:0}
  .table{width:100%;border-collapse:collapse}
  .table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid #2a242a}
  .table th{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#cfd0d6}
  .table tr:last-child td{border-bottom:none}
  .table td.best { font-weight:900; color:#ffd042; }
  .table td.best .star { margin-left:6px; font-size:.9em; color:#ffd042; text-shadow:0 0 6px rgba(255,208,66,.35); }

  .match-head-grid{
    display:grid;
    grid-template-columns: 160px 140px 140px 1fr;
    align-items:center;
    gap:12px;
    width:100%;
  }

  .match-when{
    background:linear-gradient(90deg,#ffb347,#ff7733);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    font-weight:800;
    justify-self:start;
  }

  .match-score{ justify-self:start; }

  .match-score-pill{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding:2px 10px; border:1px solid #2a242a; border-radius:999px;
    background:#141114; font-weight:900; letter-spacing:.3px;
    min-width: 76px;
  }
  .match-score-pill .ct  { justify-self:end; }
  .match-score-pill .dash{ justify-self:center; opacity:.7; }
  .match-score-pill .t   { justify-self:start; }

  .match-map{
    padding:2px 10px; border:1px solid #2a242a; border-radius:999px;
    background:#1d1920; font-weight:800; letter-spacing:.3px; opacity:.95;
    justify-self:start;
  }

  .match-teams{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
  }
  .match-team{ font-weight:900; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .match-team.win  { color:#21c55d; }
  .match-team.lose { color:#e25d5d; }
  .match-team.left  { justify-self:end;  text-align:right;  padding-right:8px; }
  .match-team.right { justify-self:start;text-align:left;   padding-left:8px; }
  .match-vs{
    font-weight:900; opacity:.9; text-align:center;
    width: 100%;
  }

  @media (max-width: 700px){
    .match-head-grid{
      grid-template-columns: 1fr 1fr;
      row-gap: 8px;
    }
    .match-when{ grid-column: 1 / 2; }
    .match-score{ grid-column: 2 / 3; justify-self:end; }
    .match-map{ grid-column: 1 / 2; }
    .match-teams{ grid-column: 1 / 3; }
  }

  .badge{display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:#b8b8be}
  .loading{padding:14px;color:#ddd}
  .empty{padding:14px;color:#aaa}

  .scrim-tab.inLobby{
    box-shadow: 0 0 0 2px rgba(33,197,93,.55), 0 0 14px rgba(33,197,93,.25);
    border-color:#2b8a3e;
  }

  .scrim-tab .active-tag{
    display:inline;
    margin-left:8px;
    font-weight:900;
    letter-spacing:.4px;
    color:#a5afa8;
    white-space:nowrap;
  }
  .scrim-tab .active-tag.status-players,
  .scrim-tab .active-tag.status-active{ color:#21c55d; }
  .scrim-tab .active-tag.status-offline{ color:#e25d5d; }
  .scrim-tab.status-online .dot,
  .scrim-tab.status-players .dot,
  .scrim-tab.active-match .dot{ background:#21c55d !important; }
  .scrim-tab.status-offline .dot{ background:#e25d5d !important; }

  .scrim-tab .dot{ width:8px;height:8px;border-radius:999px;margin-right:8px;background:#666; }

  @media (max-width:900px){.lobby-grid{grid-template-columns:1fr}.mid{order:-1}}
  @media (max-width:700px){.server{flex-direction:column;align-items:flex-start}}
  .teamCell{color:#fff;font-weight:800;padding:6px 10px!important;border-radius:8px;display:inline-block}
  .teamCell.t{background:linear-gradient(90deg,#ffb347,#ff7733)}
  .teamCell.ct{background:linear-gradient(90deg,#4a90e2,#007aff)}

  .logo-img{height:50px;display:block}
  .badges{display:inline-flex;gap:5px;align-items:center;margin-left:6px;min-width:0}
  .badge-pill{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid #2a242a;border-radius:999px;font-size:11px;font-weight:700;background:#141114;color:#eaeaf0}
  .inhouse-pill{
    display:inline-grid;gap:1px;padding:3px 7px;border:1px solid #493038;border-radius:8px;
    background:linear-gradient(180deg,#1d1519,#141114);font-size:10px;font-weight:800;
    line-height:1.15;white-space:nowrap;color:#d6d1d4
  }
  .inhouse-pill strong{color:#fff;font-weight:900}

  .table tr.win  td { background: rgba(33,197,93,.08); }
  .table tr.lose td { background: rgba(226,93,93,.08); }
  .table tr.win  td:first-child { border-left: 3px solid #21c55d; }
  .table tr.lose td:first-child { border-left: 3px solid #e25d5d; }
  .table tr.win  .player { color:#21c55d; font-weight:700; }
  .table tr.lose .player { color:#e25d5d; font-weight:700; }

  
  :root{
    --bg:#0b0c10;
    --panel:#15171e;
    --panel2:#101218;
    --border:#292d38;
    --border-soft:#20232c;
    --text:#f5f7fb;
    --muted:#9da4b2;
    --accent:#f59e0b;
    --accent-2:#f97316;
    --blue:#3b82f6;
    --green:#22c55e;
    --danger:#ef4444;
    --shadow:0 20px 60px rgba(0,0,0,.30);
    --shadow-soft:0 10px 28px rgba(0,0,0,.20);
  }

  body{
    color:var(--text);
    background:
      radial-gradient(circle at 12% -8%, rgba(249,115,22,.13), transparent 32%),
      radial-gradient(circle at 88% -4%, rgba(59,130,246,.12), transparent 30%),
      linear-gradient(180deg,#0a0b0f 0%,#101117 55%,#0c0d11 100%);
    background-attachment:fixed;
  }

  header{
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(10,11,15,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 8px 30px rgba(0,0,0,.20);
  }
  header .inner{padding:12px 0}
  header .h2{margin:0;font-size:21px;letter-spacing:.045em}

  
  .section{padding:18px 0}
  .h1{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
    font-size:19px;
    letter-spacing:.04em;
  }
  .h1::before{
    content:"";
    width:4px;
    height:20px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    box-shadow:0 0 18px rgba(249,115,22,.35);
  }

  .section-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .section-meta{
    margin-bottom:14px;
    padding:5px 10px;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
  }

  .lobby,
  .server,
  .match,
  .captains-pick-shell{
    border-color:rgba(255,255,255,.085);
    box-shadow:var(--shadow-soft);
  }
  .lobby{
    padding:18px;
    border-radius:16px;
    background:linear-gradient(145deg,rgba(25,27,35,.97),rgba(14,16,22,.98));
  }
  .lobby-grid{gap:16px;grid-template-columns:minmax(0,1fr) 270px minmax(0,1fr)}
  .team-head{
    min-height:46px;
    border-color:rgba(255,255,255,.16);
    border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 20px rgba(0,0,0,.15);
  }
  .team1-head{background:linear-gradient(115deg,#d97706,#f97316)}
  .team2-head{background:linear-gradient(115deg,#2563eb,#0ea5e9)}
  .slot{
    min-height:48px;
    border-color:var(--border-soft);
    border-radius:12px;
    background:linear-gradient(180deg,#191b22,#14161c);
  }
  .slot:hover{border-color:#3a3f4d;background:linear-gradient(180deg,#1d2028,#161920)}
  .mid{gap:11px}
  .mid .box,.joinbox{
    border-color:var(--border-soft);
    border-radius:12px;
    background:linear-gradient(180deg,#181a21,#13151b);
  }

  .btn,.copy-btn,.pill-btn,.copy-cmd,.kick,.hostbtn,.move,
  .admin-btn,.contact-btn,.steam-logout-btn,.scrim-tab{
    transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,opacity .15s ease;
  }
  .btn{
    border-radius:11px;
    border-color:#343845;
    background:linear-gradient(180deg,#242731,#1b1e26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  }
  .scrim-tab{
    border-color:#303440;
    background:rgba(23,25,32,.88);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  .scrim-tab.active{
    background:linear-gradient(115deg,#166534,#15803d);
    border-color:#22c55e;
    box-shadow:0 0 0 1px rgba(34,197,94,.25) inset,0 10px 30px rgba(22,101,52,.20);
  }
  .admin-btn,.steam-logout-btn{
    border-color:#303440;
    background:rgba(24,26,33,.9);
  }
  .contact-btn{background:linear-gradient(115deg,#f59e0b,#f97316);box-shadow:0 8px 22px rgba(249,115,22,.16)}

  @media (hover:hover){
    .btn:not([disabled]):hover,.copy-btn:hover,.pill-btn:hover,.copy-cmd:hover,
    .kick:hover,.hostbtn:hover,.move:hover,.admin-btn:hover,.contact-btn:hover,
    .steam-logout-btn:hover,.scrim-tab:hover{
      transform:translateY(-1px);
      border-color:#505666;
      box-shadow:0 9px 22px rgba(0,0,0,.22);
    }
    .match:hover{border-color:#373c49;box-shadow:0 16px 38px rgba(0,0,0,.26)}
  }

  button:focus-visible,a:focus-visible,select:focus-visible{
    outline:2px solid #fbbf24;
    outline-offset:2px;
  }

  .server{
    border-radius:15px;
    background:linear-gradient(145deg,rgba(24,26,34,.96),rgba(13,15,20,.98));
  }
  .connect{border-color:#2d313c;background:#0f1116;color:#dfe3eb}

  .match{
    margin-bottom:10px;
    border-radius:15px;
    background:linear-gradient(145deg,rgba(23,25,33,.98),rgba(13,15,20,.99));
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  .match-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    min-height:66px;
    padding:12px 14px 12px 16px;
    cursor:pointer;
  }
  .match-head-grid{
    grid-template-columns:150px 92px 112px minmax(220px,1fr);
    gap:12px;
    min-width:0;
  }
  .match-when{font-size:13px;letter-spacing:.02em}
  .match-score-pill{
    min-width:76px;
    padding:5px 11px;
    border-color:#303440;
    background:#0f1116;
  }
  .match-map{
    padding:5px 10px;
    border-color:#303440;
    background:#181b22;
    color:#d9dde6;
    font-size:12px;
    text-transform:uppercase;
  }
  .match-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    flex:0 0 auto;
  }
  .match-demo-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:132px;
    height:36px;
    padding:0 12px;
    border:1px solid transparent;
    border-radius:10px;
    text-decoration:none;
    font-size:11px;
    font-weight:900;
    letter-spacing:.055em;
    white-space:nowrap;
    user-select:none;
  }
  .match-demo-btn.available{
    border-color:#2f9e58;
    background:linear-gradient(115deg,#166534,#15803d);
    color:#fff;
    box-shadow:0 8px 20px rgba(22,101,52,.18),inset 0 1px 0 rgba(255,255,255,.10);
    cursor:pointer;
  }
  .match-demo-btn.available:hover{background:linear-gradient(115deg,#15803d,#16a34a);transform:translateY(-1px)}
  .match-demo-btn.unavailable{
    border-color:#2f9e58;
    background:linear-gradient(115deg,#166534,#15803d);
    color:#fff;
    box-shadow:0 8px 20px rgba(22,101,52,.18),inset 0 1px 0 rgba(255,255,255,.10);
    cursor:default;
  }
  .match-expand-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid #303440;
    border-radius:10px;
    background:#181a21;
    color:#cbd0da;
    cursor:pointer;
  }
  .match-expand-btn .chev{display:block;transition:transform .18s ease;opacity:.82}
  .match.open .match-expand-btn .chev{transform:rotate(180deg)}
  .match-body{background:rgba(8,9,12,.35)}

  .match-highlight-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:104px;
    height:36px;
    padding:0 11px;
    border:1px solid #6d5420;
    border-radius:10px;
    background:linear-gradient(115deg,#3b2d0d,#574014);
    color:#ffd977;
    font-size:11px;
    font-weight:900;
    letter-spacing:.055em;
    white-space:nowrap;
  }
  .match-highlight-badge.processing{
    border-color:#34425d;
    background:#182235;
    color:#9fc3ff;
  }
  .match-highlights{
    padding:18px;
    border-bottom:1px solid var(--border);
    background:
      radial-gradient(circle at 10% 0%,rgba(245,158,11,.08),transparent 34%),
      linear-gradient(180deg,rgba(17,19,25,.96),rgba(11,12,16,.96));
  }
  .match-highlights-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:13px;
  }
  .match-highlights-title{
    font-size:14px;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .match-highlights-note{font-size:12px;color:#858b97}
  .match-highlights-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:12px;
  }
  .highlight-card{
    min-width:0;
    overflow:hidden;
    border:1px solid #2d313b;
    border-radius:13px;
    background:#111319;
    box-shadow:0 12px 28px rgba(0,0,0,.20);
  }
  .highlight-video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
    background:#050608;
    object-fit:contain;
  }
  .highlight-meta{padding:10px 11px 12px}
  .highlight-meta-row{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .highlight-title{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:13px;
    font-weight:900;
  }
  .clip-share-btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    height:28px;
    padding:0 10px;
    border:1px solid #2f9e58;
    border-radius:7px;
    background:linear-gradient(115deg,#166534,#15803d);
    color:#fff;
    font:inherit;
    font-size:9px;
    font-weight:950;
    letter-spacing:.055em;
    cursor:pointer;
    user-select:none;
    transition:background .15s ease,transform .15s ease,border-color .15s ease;
  }
  .clip-share-btn:hover{
    border-color:#39b866;
    background:linear-gradient(115deg,#15803d,#16a34a);
    transform:translateY(-1px);
  }
  .clip-share-btn:active{transform:translateY(0)}
  .clip-share-btn.copied{
    border-color:#4ade80;
    background:linear-gradient(115deg,#15803d,#22c55e);
  }
  .clip-download-btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    height:28px;
    padding:0 10px;
    border:1px solid #2f9e58;
    border-radius:7px;
    background:linear-gradient(115deg,#166534,#15803d);
    color:#fff;
    text-decoration:none;
    font:inherit;
    font-size:9px;
    font-weight:950;
    letter-spacing:.055em;
    cursor:pointer;
    user-select:none;
    transition:background .15s ease,transform .15s ease,border-color .15s ease;
  }
  .clip-download-btn:hover{
    border-color:#39b866;
    background:linear-gradient(115deg,#15803d,#16a34a);
    transform:translateY(-1px);
  }
  .clip-download-btn:active{transform:translateY(0)}
  .highlight-subtitle{
    min-height:17px;
    margin-top:3px;
    color:#969ca8;
    font-size:11px;
    line-height:1.45;
  }
  .highlight-status{
    padding:18px;
    border-bottom:1px solid var(--border);
    color:#9ba2af;
    text-align:center;
    font-size:13px;
    font-weight:800;
    letter-spacing:.03em;
  }
  .match-scoreboard-label{
    padding:13px 14px 9px;
    color:#8f96a3;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .table th{background:rgba(255,255,255,.018)}
  .table tr:hover td{background-color:rgba(255,255,255,.025)}

  .empty,.loading{color:var(--muted)}
  .site-footer{
    padding:24px 0 34px;
    text-align:center;
    color:#666d79;
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  @media (max-width:1100px){
    .match-head-grid{grid-template-columns:135px 85px 98px minmax(180px,1fr)}
    .match-demo-btn{min-width:116px;padding:0 9px}
  }
  @media (max-width:900px){
    header .inner{align-items:flex-start;gap:12px}
    header nav{flex-wrap:wrap;justify-content:flex-end}
    .lobby-grid{grid-template-columns:1fr}
    .mid{order:-1}
    .match-head{grid-template-columns:1fr}
    .match-head-actions{justify-content:flex-end}
  }
  @media (max-width:700px){
    .wrap{padding:0 12px}
    header{position:relative}
    header .inner{flex-direction:column}
    header nav{width:100%;justify-content:flex-start}
    .scrim-tabs{gap:10px}
    .scrim-tab{flex:1;padding:0 10px}
    .match-head-grid{grid-template-columns:1fr 1fr}
    .match-when{grid-column:1/2}
    .match-score{grid-column:2/3;justify-self:end}
    .match-map{grid-column:1/2}
    .match-teams{grid-column:1/3}
    .match-head-actions{width:100%;justify-content:space-between}
    .match-demo-btn{flex:1;max-width:190px}
    .match-highlight-badge{min-width:0;flex:1}
    .match-highlights{padding:13px}
    .match-highlights-head{align-items:flex-start;flex-direction:column}
    .match-highlights-grid{grid-template-columns:1fr}
    .table{min-width:620px}
    .match-body{overflow-x:auto}
  }

  
  :root{--v10-bg:#070b09;--v10-panel:#0d1210;--v10-panel-2:#111713;--v10-panel-3:#151c18;--v10-line:#263029;--v10-line-soft:#1d2520;--v10-text:#f5f8f6;--v10-muted:#87928b;--v10-green:#39e05f;--v10-green-2:#1fb847;--v10-green-dark:#123b20;--v10-orange:#f59e0b;--v10-blue:#3b82f6}
  html{scroll-behavior:smooth;scroll-padding-top:88px}
  body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--v10-text);background:radial-gradient(circle at 18% 15%,rgba(30,220,82,.11),transparent 28%),radial-gradient(circle at 88% 6%,rgba(13,73,34,.18),transparent 30%),linear-gradient(180deg,#060907 0%,#090d0b 42%,#070a08 100%)}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 76%)}
  .wrap{width:100%;max-width:1580px;padding:0 28px}
  .site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(5,8,6,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px rgba(0,0,0,.28)}
  .site-header-inner{min-height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px}
  .brand{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;min-width:max-content}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(57,224,95,.45);border-radius:10px;background:linear-gradient(145deg,#173620,#0b1710);box-shadow:0 0 28px rgba(57,224,95,.13),inset 0 1px 0 rgba(255,255,255,.08);transform:rotate(45deg)}.brand-mark span{font-size:10px;font-weight:1000;letter-spacing:-.08em;color:var(--v10-green);transform:rotate(-45deg)}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:17px;letter-spacing:.035em;font-weight:950}.brand-copy small{margin-top:5px;color:#69736c;font-size:9px;font-weight:900;letter-spacing:.19em}
  .primary-nav{display:flex;justify-content:center;align-items:center;gap:30px}.primary-nav a{position:relative;color:#9da6a0;text-decoration:none;font-size:11px;font-weight:850;letter-spacing:.08em;transition:color .16s ease}.primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:2px;border-radius:9px;background:var(--v10-green);transition:right .18s ease}.primary-nav a:hover{color:#fff}.primary-nav a:hover::after{right:0}
  .primary-nav a.nav-best-highlights{
    color:#ffe36a;
    font-weight:950;
    text-shadow:
      0 0 5px rgba(255,227,106,.95),
      0 0 14px rgba(250,204,21,.68),
      0 0 28px rgba(245,158,11,.42);
    animation:bestHighlightsGlow 1.8s ease-in-out infinite alternate;
  }
  .primary-nav a.nav-best-highlights::after{
    right:0;
    background:linear-gradient(90deg,#f59e0b,#fde047,#f59e0b);
    box-shadow:
      0 0 7px rgba(253,224,71,.92),
      0 0 16px rgba(245,158,11,.62);
  }
  .primary-nav a.nav-best-highlights:hover{
    color:#fff3a6;
    text-shadow:
      0 0 6px rgba(255,243,166,1),
      0 0 18px rgba(250,204,21,.9),
      0 0 34px rgba(245,158,11,.58);
  }
  @keyframes bestHighlightsGlow{
    from{
      text-shadow:
        0 0 4px rgba(255,227,106,.72),
        0 0 11px rgba(250,204,21,.48),
        0 0 20px rgba(245,158,11,.28);
    }
    to{
      text-shadow:
        0 0 7px rgba(255,239,145,1),
        0 0 20px rgba(250,204,21,.82),
        0 0 36px rgba(245,158,11,.52);
    }
  }
  @media (prefers-reduced-motion:reduce){
    .primary-nav a.nav-best-highlights{animation:none}
  }.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.header-admin{height:38px;display:inline-flex;align-items:center;padding:0 13px;border-color:#263029;background:#0e1410;color:#9ca69f;font-size:10px;letter-spacing:.08em}.steam-img-btn{height:38px}.steam-img-btn img{height:38px;max-width:150px;object-fit:contain}.steam-logout-btn{height:38px;border-color:#263029;background:#0e1410}
  .landing-stage{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(840px,2.35fr);gap:34px;align-items:center;min-height:660px;padding:24px 0 34px}.landing-intro{position:relative;padding:32px 5px 32px 12px}.landing-intro::before{content:"";position:absolute;left:-120px;top:-120px;width:500px;height:500px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(43,219,85,.12),rgba(15,69,32,.04) 42%,transparent 70%);filter:blur(6px)}.hero-eyebrow{position:relative;display:flex;align-items:center;gap:9px;color:var(--v10-green);font-size:11px;font-weight:950;letter-spacing:.13em}.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--v10-green);box-shadow:0 0 16px rgba(57,224,95,.9)}.landing-intro h1{position:relative;margin:18px 0 18px;font-size:clamp(50px,4.6vw,78px);line-height:.91;letter-spacing:-.055em;font-weight:1000;color:#f7faf8}.landing-intro h1 span{color:var(--v10-green);text-shadow:0 0 42px rgba(57,224,95,.16)}.hero-copy{position:relative;max-width:410px;margin:0;color:#929d96;font-size:14px;line-height:1.7}.hero-actions{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.hero-btn{height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:7px;text-decoration:none;font-size:11px;font-weight:950;letter-spacing:.06em;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.hero-btn-primary{border:1px solid #43ed68;background:linear-gradient(135deg,#35d957,#23b946);color:#071109;box-shadow:0 12px 35px rgba(39,195,75,.18)}.hero-btn-secondary{border:1px solid #303a33;background:rgba(12,17,14,.8);color:#dbe1dd}.hero-btn:hover{transform:translateY(-1px)}.hero-features{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:34px;border:1px solid #1e2821;border-radius:9px;overflow:hidden;background:#1e2821;max-width:470px}.hero-feature{min-width:0;padding:12px 13px;background:rgba(11,16,13,.95)}.hero-feature strong{display:block;color:#eaf0ec;font-size:14px;font-weight:950}.hero-feature span{display:block;margin-top:3px;color:#667169;font-size:9px;font-weight:750;line-height:1.3}
  .live-lobby-shell{position:relative;min-width:0;padding:17px;border:1px solid rgba(67,91,73,.56);border-radius:13px;background:linear-gradient(145deg,rgba(14,20,16,.98),rgba(8,12,10,.99));box-shadow:0 30px 80px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.015) inset}.live-lobby-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 0 0,rgba(57,224,95,.065),transparent 30%)}.live-lobby-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:3px 3px 13px}.live-lobby-kicker{color:#6c786f;font-size:9px;font-weight:900;letter-spacing:.18em}.live-lobby-title{margin-top:4px;color:#f3f6f4;font-size:17px;font-weight:950;letter-spacing:.025em}.live-lobby-title .hostBadge{color:#7f8b82;font-size:10px;font-weight:800;letter-spacing:.02em}.live-status{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #244f31;border-radius:999px;background:#0b1b10;color:#63dd7b;font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.live-status span{width:6px;height:6px;border-radius:50%;background:#43e365;box-shadow:0 0 11px rgba(67,227,101,.7)}
  .live-lobby-shell .scrim-tabs{position:relative;width:auto;justify-content:flex-start;gap:8px;margin:0 0 10px}.live-lobby-shell .scrim-tab{height:31px;padding:0 10px;border-radius:7px;border-color:#27332b;background:#101612;color:#a5afa8;font-size:10px}.live-lobby-shell .scrim-tab.active{border-color:#2c8e47;background:#102c19;color:#fff;box-shadow:none}.live-lobby-shell .scrim-tab .dot{width:6px;height:6px}.live-lobby-shell .lobby{position:relative;padding:13px;border-radius:9px;border-color:#222d26;background:rgba(10,15,12,.80);box-shadow:none;overflow:hidden}.live-lobby-shell .team-head{min-height:36px;padding:7px 9px;border-radius:7px;border:1px solid #27342c;background:#111914;box-shadow:none;font-size:10px;letter-spacing:.025em}.live-lobby-shell .team1-head{border-top:2px solid #f59e0b;color:#f3f5f3}.live-lobby-shell .team2-head{border-top:2px solid #3b82f6;color:#f3f5f3}.live-lobby-shell .slot{min-height:42px;padding:6px 7px;border-radius:7px;border-color:#202a23;background:#0d130f}.live-lobby-shell .slot:hover{border-color:#334238;background:#101812}.live-lobby-shell .slot.live,.live-lobby-shell .slot.accepted{background:linear-gradient(90deg,#12341d,#11291a);border-color:#2d8c46}.live-lobby-shell .slot.declined{background:#2c1212;border-color:#7d2929}.live-lobby-shell .kick,.live-lobby-shell .hostbtn,.live-lobby-shell .move{padding:5px 6px;border-radius:6px;font-size:9px}.live-lobby-shell .mid .box,.live-lobby-shell .joinbox{padding:9px;border-radius:7px;border-color:#202a23;background:#0d130f}.live-lobby-shell .mid label{font-size:9px;color:#737f77}.live-lobby-shell select{padding:8px 9px;border-radius:6px;border-color:#27332b;background:#101612;font-size:10px}.live-lobby-shell .btn{padding:9px 9px;border-radius:7px;border-color:#2a352e;background:#111713;font-size:9px;letter-spacing:.045em}.live-lobby-shell .btn-join{border-color:#31a64f;background:linear-gradient(135deg,#188437,#166b30)}.live-lobby-shell .btn-leave{border-color:#a43a3a;background:#641d1d}.live-lobby-shell #startBtn{border-color:#2fa54c;background:linear-gradient(135deg,#1c8b3c,#12662b)}.live-lobby-shell #copyIpStringBtn{border-color:#38b75a!important;background:linear-gradient(135deg,#209541,#126b2f)!important}.live-lobby-shell .captains-pick-shell{box-shadow:none;border-color:#263129;background:#0c120e}
  .home-divider{display:flex;align-items:center;gap:15px;margin:8px 0 11px;color:#59655d;font-size:9px;font-weight:950;letter-spacing:.18em}.home-divider-line{height:1px;flex:1;background:linear-gradient(90deg,#263029,transparent)}.content-panel{margin:0 0 18px;padding:18px;border:1px solid #202a23;border-radius:11px;background:linear-gradient(145deg,rgba(13,18,15,.96),rgba(8,12,9,.98));box-shadow:0 18px 50px rgba(0,0,0,.23)}.content-panel .h1{margin:0;font-size:12px;letter-spacing:.09em}.content-panel .h1::before{width:3px;height:15px;background:var(--v10-green);box-shadow:0 0 13px rgba(57,224,95,.25)}.content-panel .section-meta{margin:0;border-color:#263129;background:#0b100d;color:#6e7a72;font-size:9px}
  .matches-panel .match{margin-bottom:7px;border-radius:8px;border-color:#202a23;background:#0b100d;box-shadow:none}.matches-panel .match:last-child{margin-bottom:0}.matches-panel .match-when{color:#7b877f;font-size:11px}.matches-panel .match-score-pill{border-radius:6px;border-color:#28332c;background:#090d0b;font-size:12px}.matches-panel .match-map{border-radius:6px;border-color:#28332c;background:#111713;color:#9da8a1;font-size:10px}.matches-panel .match-teams{font-size:11px;font-weight:850}.matches-panel .match-demo-btn,.matches-panel .match-expand-btn,.matches-panel .match-highlight-badge{height:31px;border-radius:6px;font-size:9px}.matches-panel .match-highlight-badge{border-color:#2f7741;background:#102818;color:#70e887}.matches-panel .match-highlight-badge::before{content:"●";margin-right:6px;font-size:7px;color:#4bed6c}.matches-panel .match-body{border-top:1px solid #1d2720;background:#080c09}.matches-panel .match-highlights{background:linear-gradient(180deg,#0c120e,#080c09);border-color:#202a23}
  #serversSection .server{padding:11px 12px;border-radius:8px;border-color:#202a23;background:#0b100d;box-shadow:none}#serversSection .highlight{color:#8fe7a0;background:none;-webkit-text-fill-color:initial;font-size:10px}#serversSection .connect{padding:7px 8px;border-radius:6px;border-color:#252f29;background:#070b08;font-size:10px}#serversSection .copy-btn{padding:7px 10px;border-radius:6px;border-color:#2b382f;background:#111713;font-size:10px}.modern-footer{display:flex;align-items:center;justify-content:center;gap:9px;padding:23px 0 38px;color:#475149;font-size:9px;font-weight:850;letter-spacing:.13em}.modern-footer .footer-dot{color:#23532f}
  @media (max-width:1280px){.landing-stage{grid-template-columns:1fr;align-items:start;min-height:0;padding-top:16px}.landing-intro{display:grid;grid-template-columns:1fr auto;column-gap:24px;padding:20px 4px 8px}.hero-eyebrow,.landing-intro h1,.hero-copy{grid-column:1/2}.landing-intro h1{font-size:54px}.hero-actions{grid-column:1/2}.hero-features{grid-column:2/3;grid-row:1/5;align-self:center;grid-template-columns:1fr;min-width:210px;margin:0}.live-lobby-shell .lobby-grid{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr)}}
  @media (max-width:900px){.wrap{padding:0 16px}.site-header-inner{grid-template-columns:auto 1fr;gap:14px;min-height:64px}.primary-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:22px;padding:0 0 11px;overflow-x:auto}.header-actions{margin-left:auto}.landing-intro{display:block}.hero-features{grid-template-columns:repeat(3,1fr);min-width:0;margin-top:27px}.live-lobby-shell .lobby-grid{grid-template-columns:1fr}.live-lobby-shell .mid{order:-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.live-lobby-shell .joinbox,.live-lobby-shell .mid .box{grid-column:1/-1}.matches-panel .match-head-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:620px){.wrap{padding:0 10px}.brand-copy small{display:none}.brand-mark{width:31px;height:31px}.brand-copy strong{font-size:14px}.header-admin{display:none}.site-main{padding-top:16px}.landing-stage{gap:18px;padding-top:7px}.landing-intro h1{font-size:44px}.hero-copy{font-size:13px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-btn{padding:0 10px}.hero-features{grid-template-columns:1fr;gap:0;border:0;background:transparent}.hero-feature{border-bottom:1px solid #1d2720;padding:9px 0;background:transparent}.live-lobby-shell{padding:10px;border-radius:9px}.live-lobby-topbar{align-items:flex-start}.live-status{font-size:8px;padding:6px 7px}.live-lobby-shell .mid{grid-template-columns:1fr}.live-lobby-shell .joinbox,.live-lobby-shell .mid .box{grid-column:auto}.content-panel{padding:12px;border-radius:9px}}

  

  .landing-stage{
    min-height:500px;
    padding-top:30px;
    padding-bottom:42px;
    align-items:center;
  }
  .home-divider{
    margin:0 0 14px;
    font-size:10px;
    letter-spacing:.15em;
  }

  .content-panel{
    padding:14px 18px;
    margin-bottom:16px;
  }
  .content-panel .section-title-row{
    min-height:28px;
    margin-bottom:13px;
    align-items:center;
  }
  .content-panel .h1{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    line-height:1;
    letter-spacing:.065em;
  }
  .content-panel .h1::before{
    flex:0 0 3px;
    width:3px;
    height:17px;
  }
  .content-panel .section-meta{
    min-height:27px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    font-size:10px;
    letter-spacing:.055em;
  }

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .live-lobby-shell .kick,
  .live-lobby-shell .hostbtn,
  .live-lobby-shell .move{
    min-height:28px;
    padding:0 7px;
    font-size:9.5px;
  }
  
  .live-lobby-shell .mid .box,
  .live-lobby-shell .joinbox{
    padding:10px;
  }
  .live-lobby-shell .steamRow{
    gap:9px;
    font-size:13px;
    font-weight:800;
  }
  
  .live-lobby-shell .mid label{
    margin-bottom:5px;
    font-size:10px;
    letter-spacing:.08em;
  }
  .live-lobby-shell select{
    min-height:36px;
    padding:0 10px;
    font-size:11.5px;
  }
  .live-lobby-shell .btn{
    min-height:36px;
    padding:0 10px;
    font-size:10.5px;
    line-height:1.15;
    letter-spacing:.04em;
  }

  #serversSection .servers{
    gap:8px;
  }
  #serversSection .server{
    display:block;
    width:100%;
    padding:0;
    overflow:hidden;
  }
  #serversSection .server-row{
    display:grid;
    grid-template-columns:180px minmax(300px,1fr) 66px;
    align-items:center;
    gap:14px;
    width:100%;
    min-height:48px;
    padding:9px 11px;
  }
  #serversSection .highlight{
    font-size:11.5px;
    line-height:1.2;
    letter-spacing:.035em;
    white-space:nowrap;
  }
  #serversSection .connect{
    width:100%;
    min-width:0;
    min-height:32px;
    display:flex;
    align-items:center;
    padding:0 10px;
    font-size:11.5px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #serversSection .copy-btn{
    width:66px;
    min-height:32px;
    padding:0;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.035em;
  }

  .matches-panel .match{
    margin-bottom:8px;
  }
  .matches-panel .match-head{
    min-height:64px;
    padding:10px 11px 10px 13px;
    gap:16px;
  }
  .matches-panel .match-head-grid{
    grid-template-columns:150px 80px 100px minmax(230px,1fr);
    gap:12px;
    align-items:center;
  }
  .matches-panel .match-when{
    font-size:12px;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
  }
  .matches-panel .match-score-pill{
    min-width:72px;
    min-height:30px;
    padding:0 9px;
    font-size:13px;
    font-variant-numeric:tabular-nums;
  }
  .matches-panel .match-map{
    min-width:88px;
    min-height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 9px;
    font-size:11px;
  }
  .matches-panel .match-teams{
    min-width:0;
    font-size:12.5px;
    line-height:1.2;
  }
  .matches-panel .match-vs{
    width:30px;
    color:#79847d;
    font-size:10px;
  }
  .matches-panel .match-head-actions{
    gap:8px;
  }
  .matches-panel .match-demo-btn,
  .matches-panel .match-highlight-badge{
    min-height:34px;
    height:34px;
    padding:0 11px;
    font-size:10px;
  }
  .matches-panel .match-highlight-badge{
    width:118px;
    min-width:118px;
  }
  .matches-panel .match-expand-btn{
    width:36px;
    height:34px;
    min-height:34px;
    font-size:10px;
  }

  @media (max-width:1280px){
    .landing-stage{min-height:0;padding-top:18px;padding-bottom:32px}
    .live-lobby-shell .lobby-grid{grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr)}
  }
  @media (max-width:1050px){
    #serversSection .server-row{grid-template-columns:160px minmax(0,1fr) 66px}
    .matches-panel .match-head-grid{grid-template-columns:140px 76px 94px minmax(170px,1fr)}
  }
  @media (max-width:900px){
    .live-lobby-shell .lobby-grid{grid-template-columns:1fr}
    #serversSection .server-row{grid-template-columns:150px minmax(0,1fr) 64px}
    .matches-panel .match-head-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:620px){
    .content-panel{padding:13px}
    .content-panel .h1{font-size:13px}
    .live-lobby-shell{padding:11px}
    .live-lobby-title{font-size:16px}
    .live-lobby-shell .team-head{font-size:11px}
    .live-lobby-shell .slot input{font-size:12px}
    #serversSection .server-row{
      grid-template-columns:1fr auto;
      gap:8px;
      padding:10px;
    }
    #serversSection .highlight{grid-column:1/-1}
    #serversSection .connect{font-size:10.5px}
    #serversSection .copy-btn{width:62px}
    .matches-panel .match-when{font-size:11px}
    .matches-panel .match-teams{font-size:11.5px}
  }


  
  
  .primary-nav a::after{bottom:-9px}
  
  .landing-stage{display:block;min-height:0;padding:30px 0 38px}
  .live-lobby-shell{width:100%;max-width:none;padding:20px}
  
  .live-lobby-kicker{font-size:11px;letter-spacing:.14em}
  .live-lobby-title{font-size:20px;line-height:1.2;letter-spacing:.012em}
  .live-lobby-title .hostBadge{font-size:12px;letter-spacing:0}
  .live-status{min-height:32px;padding:0 12px;font-size:10.5px}
  .live-lobby-shell .scrim-tabs{margin-bottom:13px}
  .live-lobby-shell .scrim-tab{height:36px;padding:0 14px;font-size:12px;letter-spacing:.025em}
  .live-lobby-shell .lobby{padding:16px}
  .live-lobby-shell .lobby-grid{grid-template-columns:minmax(330px,1fr) 270px minmax(330px,1fr);gap:14px}
  .live-lobby-shell .team{gap:9px}
  .live-lobby-shell .team-head{min-height:42px;padding:0 12px;font-size:13px;line-height:1.3;letter-spacing:.005em;font-weight:900}
  .live-lobby-shell .team-name{font-size:12.5px;letter-spacing:0}
  .live-lobby-shell .slot{min-height:47px;padding:8px 10px}
  .live-lobby-shell .slot input{font-size:13.5px;line-height:1.35;font-weight:720;letter-spacing:0}
  .live-lobby-shell .kick,.live-lobby-shell .hostbtn,.live-lobby-shell .move{min-height:29px;padding:0 8px;font-size:10px;letter-spacing:0}
  .live-lobby-shell .mid{gap:9px}
  .live-lobby-shell .mid .box,.live-lobby-shell .joinbox{padding:11px}
  .live-lobby-shell .steamRow{font-size:14px;line-height:1.3}
  .live-lobby-shell .steamRow img{width:29px;height:29px}
  .live-lobby-shell .mid label{font-size:11px;line-height:1.2;letter-spacing:.055em}
  .live-lobby-shell select{min-height:38px;font-size:12.5px;line-height:1.2}
  .live-lobby-shell .btn{min-height:38px;font-size:11.5px;line-height:1.2;letter-spacing:.018em}
  #serversSection .server-row{grid-template-columns:190px 420px 66px;justify-content:start;gap:14px}
  #serversSection .connect{width:420px;max-width:420px;font-size:12px}
  #serversSection .highlight{font-size:12px}
  .highlights-page{min-height:calc(100vh - 110px);padding:34px 0 46px}
  .highlights-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:6px 3px 24px;border-bottom:1px solid #202a23}
  .highlights-page-kicker{color:var(--v10-green);font-size:10px;font-weight:950;letter-spacing:.16em}
  .highlights-page h1{margin:7px 0 8px;color:#f7faf8;font-size:38px;line-height:1;font-weight:1000;letter-spacing:-.035em}
  .highlights-page-head p{max-width:650px;margin:0;color:#7f8b83;font-size:13px;line-height:1.6}
  .highlights-page-count{flex:0 0 auto;min-height:31px;display:inline-flex;align-items:center;padding:0 11px;border:1px solid #263129;border-radius:999px;background:#0b100d;color:#77837b;font-size:10px;font-weight:900;letter-spacing:.06em}
  .highlights-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}
  .highlights-sort{display:flex;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;padding:4px;border:1px solid #202a23;border-radius:9px;background:#0a0f0c}
  .highlights-sort-btn{height:36px;padding:0 14px;border:1px solid transparent;border-radius:6px;background:transparent;color:#7f8b83;font:inherit;font-size:10.5px;font-weight:950;letter-spacing:.055em;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
  .highlights-sort-btn:hover{color:#eaf0ec}
  .highlights-sort-btn.active{border-color:#2f7e43;background:#12341c;color:#79ed8f;box-shadow:0 0 18px rgba(57,224,95,.07)}
  .highlights-sort-note{color:#657168;font-size:10px;font-weight:800;letter-spacing:.035em}
  .highlights-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
  .library-highlight-card{min-width:0;overflow:hidden;border:1px solid #202b23;border-radius:10px;background:linear-gradient(145deg,#0d130f,#090d0b);box-shadow:0 16px 36px rgba(0,0,0,.22);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
  .library-highlight-card:hover{transform:translateY(-2px);border-color:#315d3d;box-shadow:0 20px 44px rgba(0,0,0,.30),0 0 24px rgba(57,224,95,.035)}
  .library-highlight-video{display:block;width:100%;aspect-ratio:16/9;background:#030504;object-fit:cover}
  .library-highlight-meta{padding:13px 14px 14px}
  .library-highlight-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .library-highlight-player{min-width:0;color:#f1f5f2;font-size:14px;font-weight:950;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .library-highlight-play{flex:0 0 auto;min-width:38px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;border:1px solid #2d7640;border-radius:5px;background:#102818;color:#6bea83;font-size:10px;font-weight:1000;letter-spacing:.03em}
  .library-highlight-detail-row{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    margin-top:6px;
  }
  .library-highlight-detail{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#a4aea7;
    font-size:11px;
    font-weight:800;
    line-height:1.35;
  }
  .library-highlight-detail-row .clip-share-btn,
  .library-highlight-detail-row .clip-download-btn{
    height:26px;
    min-width:62px;
  }
  .library-highlight-context{display:flex;align-items:center;gap:8px;min-width:0;margin-top:11px;padding-top:10px;border-top:1px solid #1c2520;color:#667169;font-size:10px;font-weight:750}
  .library-highlight-context span{white-space:nowrap}
  .library-highlight-context .library-teams{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .library-highlight-dot{width:3px;height:3px;border-radius:50%;background:#36443a}
  .highlights-empty{grid-column:1/-1;padding:48px 20px;border:1px dashed #263129;border-radius:10px;color:#748078;text-align:center;font-size:12px}
  @media (max-width:1200px){
    .live-lobby-shell .lobby-grid{grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr)}
    .highlights-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    #serversSection .server-row{grid-template-columns:175px 400px 66px}
    #serversSection .connect{width:400px;max-width:400px}
  }
  @media (max-width:900px){
    .primary-nav{gap:24px}
    .primary-nav a{font-size:12.5px}
    .live-lobby-shell .lobby-grid{grid-template-columns:1fr}
    #serversSection .server-row{grid-template-columns:160px minmax(0,1fr) 64px}
    #serversSection .connect{width:100%;max-width:none}
    .highlights-page-head{align-items:flex-start;flex-direction:column}
  }
  @media (max-width:680px){
    .highlights-library-grid{grid-template-columns:1fr}
    .highlights-toolbar{align-items:flex-start;flex-direction:column}
    .highlights-sort{width:100%;display:grid;grid-template-columns:1fr 1fr}
    .highlights-sort-btn{width:100%;padding:0 8px}
    .highlights-page h1{font-size:31px}
    .live-lobby-shell{padding:12px}
    .live-lobby-shell .team-head{font-size:12px}
    .live-lobby-shell .slot input{font-size:13px}
  }


  .landing-stage{padding-top:30px}
  .lobby-tabs{
    position:relative;
    z-index:3;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:7px;
    width:100%;
    margin:0 0 -1px;
    padding:0;
  }
  .lobby-tabs .scrim-tab{
    position:relative;
    min-width:126px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border:1px solid #27342c;
    border-bottom-color:#344039;
    border-radius:10px 10px 0 0;
    background:#090e0b;
    color:#77837b;
    font-size:11.5px;
    font-weight:950;
    letter-spacing:.04em;
    text-decoration:none;
    box-shadow:none;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
  }
  .lobby-tabs .scrim-tab:hover{border-color:#355540;background:#0e1711;color:#d8dfda}
  .lobby-tabs .scrim-tab.active{
    z-index:2;
    height:44px;
    border-color:rgba(67,91,73,.76);
    border-bottom-color:#0d130f;
    background:linear-gradient(180deg,#122019,#0d130f);
    color:#fff;
    transform:translateY(1px);
  }
  .lobby-tabs .scrim-tab .dot{width:6px;height:6px;margin-right:8px}
  .lobby-tabs .scrim-tab .active-tag{margin-left:7px;font-size:8px;letter-spacing:.035em}
  .live-lobby-topbar{min-height:42px;padding:3px 4px 14px}
  .live-lobby-title{margin-top:0;font-size:19px;line-height:1.2}
  .live-lobby-title .hostBadge{display:none!important}
  @media (max-width:620px){
    .lobby-tabs{padding:0;gap:5px}
    .lobby-tabs .scrim-tab{min-width:0;flex:1;height:39px;padding:0 8px;font-size:10.5px}
    .lobby-tabs .scrim-tab.active{height:41px}
  }


  .live-status strong{font:inherit;font-weight:inherit;letter-spacing:inherit}
  .live-status.offline{
    border-color:#64302f;
    background:#1c0c0c;
    color:#ff7370;
  }
  .live-status.offline span{
    background:#f04f4b;
    box-shadow:0 0 11px rgba(240,79,75,.62);
  }


  .progressive-load-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:20px 0 6px;
  }
  .progressive-load-btn{
    min-width:132px;
    height:38px;
    padding:0 16px;
    border:1px solid #2e4937;
    border-radius:7px;
    background:#0f1a13;
    color:#8aee9d;
    font:inherit;
    font-size:10.5px;
    font-weight:950;
    letter-spacing:.06em;
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
  }
  .progressive-load-btn:hover{
    border-color:#3e7c4f;
    background:#14261a;
    color:#b2f8bd;
    transform:translateY(-1px);
  }
  .progressive-load-btn:disabled{
    cursor:default;
    opacity:.46;
    transform:none;
  }
  .progressive-load-status{
    color:#667269;
    font-size:10px;
    font-weight:800;
    letter-spacing:.03em;
  }
  .progressive-load-sentinel{
    width:100%;
    height:1px;
    pointer-events:none;
  }

  .prac-servers-page{
    min-height:calc(100vh - 110px);
    padding:34px 0 46px;
  }
  .prac-servers-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    padding:6px 3px 24px;
    margin-bottom:18px;
    border-bottom:1px solid #202a23;
  }
  .prac-servers-page-kicker{
    color:var(--v10-green);
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
  }
  .prac-servers-page h1{
    margin:7px 0 8px;
    color:#f7faf8;
    font-size:38px;
    line-height:1;
    font-weight:1000;
    letter-spacing:-.035em;
  }
  .prac-servers-page-head p{
    max-width:650px;
    margin:0;
    color:#7f8b83;
    font-size:13px;
    line-height:1.6;
  }
  .prac-servers-panel{
    margin:0;
    padding:18px;
  }
  .prac-servers-panel .section-title-row{
    display:none;
  }
  .prac-servers-panel .servers{
    gap:12px;
  }
  .prac-servers-panel .server{
    border-color:#263129;
    background:linear-gradient(145deg,#0d130f,#090d0b);
  }
  .prac-servers-panel .server-row{
    min-height:58px;
  }

  @media (max-width:680px){
    .prac-servers-page{
      padding-top:22px;
    }
    .prac-servers-page h1{
      font-size:31px;
    }
    .prac-servers-page-head{
      align-items:flex-start;
      flex-direction:column;
    }
  }


  /* Featured aftermovie + aftermovies library */
  .home-aftermovie-feature{
    display:grid;
    width:50%;
    box-sizing:border-box;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
    align-items:stretch;
    gap:16px;
    margin:6px auto 18px;
    padding:14px;
    border:1px solid #213128;
    border-radius:12px;
    background:
      radial-gradient(circle at 14% 0%,rgba(57,224,95,.09),transparent 34%),
      linear-gradient(145deg,rgba(13,19,15,.98),rgba(7,11,8,.99));
    box-shadow:0 16px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
    overflow:hidden;
  }
  .home-aftermovie-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:8px 12px;
  }
  .home-aftermovie-kicker{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--v10-green);
    font-size:9px;
    font-weight:950;
    letter-spacing:.16em;
  }
  .home-aftermovie-kicker span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--v10-green);
    box-shadow:0 0 12px rgba(57,224,95,.75);
  }
  .home-aftermovie-title{
    margin-top:7px;
    color:#f3f7f4;
    font-size:21px;
    line-height:1.15;
    font-weight:1000;
    letter-spacing:-.018em;
  }
  .home-aftermovie-subtitle{
    margin-top:5px;
    color:#68746c;
    font-size:9.5px;
    font-weight:900;
    letter-spacing:.12em;
  }
  .home-aftermovie-link{
    min-height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:13px;
    padding:0 11px;
    border:1px solid #2f8e48;
    border-radius:6px;
    background:#102719;
    color:#78eb8d;
    text-decoration:none;
    font-size:9px;
    font-weight:950;
    letter-spacing:.075em;
    transition:transform .15s ease,border-color .15s ease,background .15s ease;
  }
  .home-aftermovie-link:hover{
    transform:translateY(-1px);
    border-color:#43b85e;
    background:#14351f;
  }
  .home-aftermovie-video-wrap{
    min-width:0;
    aspect-ratio:16/9;
    overflow:hidden;
    border:1px solid #26332b;
    border-radius:8px;
    background:#030504;
  }
  .home-aftermovie-video{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#030504;
    object-fit:cover;
  }

  .aftermovies-page{
    min-height:calc(100vh - 110px);
    padding:34px 0 46px;
  }
  .aftermovies-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    padding:6px 3px 24px;
    margin-bottom:18px;
    border-bottom:1px solid #202a23;
  }
  .aftermovies-page-kicker{
    color:var(--v10-green);
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
  }
  .aftermovies-page h1{
    margin:7px 0 8px;
    color:#f7faf8;
    font-size:38px;
    line-height:1;
    font-weight:1000;
    letter-spacing:-.035em;
  }
  .aftermovies-page-head p{
    max-width:650px;
    margin:0;
    color:#7f8b83;
    font-size:13px;
    line-height:1.6;
  }
  .aftermovies-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
  }
  .aftermovie-card{
    min-width:0;
    overflow:hidden;
    border:1px solid #202b23;
    border-radius:10px;
    background:linear-gradient(145deg,#0d130f,#090d0b);
    box-shadow:0 16px 36px rgba(0,0,0,.22);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  }
  .aftermovie-card:hover{
    transform:translateY(-2px);
    border-color:#315d3d;
    box-shadow:0 20px 44px rgba(0,0,0,.30),0 0 24px rgba(57,224,95,.035);
  }
  .aftermovie-video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border:0;
    background:#030504;
    object-fit:contain;
  }
  .aftermovie-meta{
    padding:13px 14px 15px;
  }
  .aftermovie-month{
    color:var(--v10-green);
    font-size:9px;
    font-weight:950;
    letter-spacing:.13em;
  }
  .aftermovie-title{
    margin-top:5px;
    color:#f1f5f2;
    font-size:14px;
    font-weight:950;
    line-height:1.25;
  }
  @media (max-width:1100px){
    .aftermovies-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:1000px){
    .home-aftermovie-feature{width:68%}
  }
  @media (max-width:800px){
    .home-aftermovie-feature{width:82%;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
    .home-aftermovie-title{font-size:18px}
  }
  @media (max-width:680px){
    .home-aftermovie-feature{width:100%;grid-template-columns:1fr;padding:10px;margin:6px auto 14px}
    .home-aftermovie-copy{padding:7px 6px 4px}
    .home-aftermovie-video{max-height:none}
    .aftermovies-grid{grid-template-columns:1fr}
    .aftermovies-page{padding-top:22px}
    .aftermovies-page h1{font-size:31px}
    .aftermovies-page-head{align-items:flex-start;flex-direction:column}
  }


  /* ===== Account / Cup / Profile / Users ===== */
  .account-menu{position:relative;display:flex;align-items:center}
  .account-trigger{
    display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 11px 0 7px;
    border:1px solid #303440;border-radius:10px;background:rgba(24,26,33,.94);
    color:#fff;text-decoration:none;font-weight:850;cursor:pointer;max-width:210px;
  }
  .account-trigger img{width:26px;height:26px;border-radius:7px;object-fit:cover}
  .account-trigger .account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
  .account-trigger .account-chevron{font-size:10px;color:#9ca3af;transition:transform .15s ease}
  .account-menu.open .account-chevron{transform:rotate(180deg)}
  .account-dropdown{
    position:absolute;right:0;top:46px;width:190px;padding:7px;z-index:90;
    border:1px solid #303440;border-radius:12px;background:#14161c;
    box-shadow:0 20px 50px rgba(0,0,0,.46);
  }
  .account-dropdown a,.account-dropdown button{
    display:flex;align-items:center;width:100%;min-height:38px;padding:0 11px;border:0;border-radius:8px;
    background:transparent;color:#f5f7fb;text-decoration:none;font:inherit;font-size:13px;font-weight:800;cursor:pointer;
  }
  .account-dropdown a:hover,.account-dropdown button:hover{background:#1f222b}
  .account-dropdown .admin-menu-link{color:#62d98a}
  .account-dropdown .logout-menu-btn{color:#f38c8c}

  .page-shell{padding:30px 0 12px}
  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
  .page-kicker{color:#57cf7c;font-size:11px;font-weight:950;letter-spacing:.18em;text-transform:uppercase}
  .page-head h1{margin:5px 0 0;font-size:36px;line-height:1;letter-spacing:-.035em}
  .page-head p{margin:9px 0 0;color:#8f96a3;font-size:13px;font-weight:700}
  .admin-plus-btn{
    width:44px;height:44px;border-radius:12px;border:1px solid #30a85b;background:linear-gradient(145deg,#166534,#15803d);
    color:#fff;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 10px 28px rgba(22,101,52,.22)
  }
  .admin-plus-btn:hover{background:linear-gradient(145deg,#15803d,#16a34a);transform:translateY(-1px)}

  .cup-create-panel{margin:0 0 18px;padding:16px;border:1px solid #2d333e;border-radius:15px;background:linear-gradient(145deg,#171a21,#101218)}
  .cup-create-grid{display:grid;grid-template-columns:minmax(220px,1.7fr) 150px 170px 140px auto;gap:12px;align-items:end}
  .field-label{display:block;margin:0 0 7px;color:#969dab;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
  .site-input,.site-select{
    width:100%;height:42px;padding:0 12px;border:1px solid #343947;border-radius:10px;background:#0f1117;color:#f4f7fb;
    font:inherit;font-size:13px;font-weight:750;outline:none
  }
  .site-input:focus,.site-select:focus{border-color:#38a85f;box-shadow:0 0 0 2px rgba(34,197,94,.12)}
  .form-submit{height:42px;padding:0 18px;border:1px solid #30a85b;border-radius:10px;background:linear-gradient(145deg,#166534,#15803d);color:#fff;font-weight:900;cursor:pointer}

  .cup-list{display:flex;flex-direction:column;gap:11px}
  .cup-card{
    display:grid;grid-template-columns:minmax(0,1fr) 180px 145px minmax(250px,auto);gap:18px;align-items:center;
    padding:16px 17px;border:1px solid #292e39;border-radius:15px;background:linear-gradient(145deg,#171920,#101218);box-shadow:0 12px 30px rgba(0,0,0,.18)
  }
  .cup-name{font-size:17px;font-weight:950;letter-spacing:.01em}
  .cup-meta{margin-top:5px;color:#89919f;font-size:12px;font-weight:700}
  .cup-date{font-size:13px;font-weight:850;color:#e4e7ed}
  .cup-capacity{font-size:12px;color:#a3aab6;font-weight:800}
  .cup-action{display:flex;justify-content:flex-end;gap:8px;align-items:center;align-content:center;flex-wrap:wrap;min-width:0}
  .cup-status-btn,.cup-secondary-btn{
    display:inline-flex;align-items:center;justify-content:center;min-width:116px;height:38px;padding:0 12px;border-radius:10px;
    font-size:11px;font-weight:950;letter-spacing:.06em;text-transform:uppercase
  }
  button.cup-status-btn{cursor:pointer}
  .cup-status-btn.signup{border:1px solid #30a85b;background:linear-gradient(145deg,#166534,#15803d);color:#fff}
  .cup-status-btn.signed{border:1px solid #306f47;background:#152b1d;color:#78e39a}
  .cup-status-btn.finished{border:1px solid #373b45;background:#17191f;color:#777e8a}
  .cup-status-btn.started{border:1px solid #775d23;background:#32280f;color:#e7c05c}
  .cup-status-btn.full{border:1px solid #4b4f59;background:#1b1e25;color:#8a919c}
  .cup-secondary-btn{border:1px solid #3d424d;background:#1b1e25;color:#dfe3ea;cursor:pointer}
  .cup-secondary-btn.unsubscribe{border-color:#734343;background:#2b1719;color:#f3a0a0}
  .cup-secondary-btn.cancel{border-color:#8a3e45;background:#341719;color:#ff9ca4}
  .cup-player-strip{display:flex;gap:5px;margin-top:9px;align-items:center;min-height:24px}
  .cup-player-strip img{width:23px;height:23px;border-radius:6px;border:1px solid #303540}
  .cup-player-more{color:#8e95a1;font-size:11px;font-weight:850}
  .empty-panel{padding:36px;border:1px dashed #303540;border-radius:15px;color:#8e95a2;text-align:center;background:rgba(255,255,255,.015)}

  .profile-top{
    display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,2.15fr);gap:16px;margin-bottom:16px
  }
  .profile-card,.profile-chart-card,.profile-highlights-card,.profile-cups-card,.profile-matches-card,.users-card{
    border:1px solid #292e39;border-radius:16px;background:linear-gradient(145deg,#171920,#101218);box-shadow:0 12px 32px rgba(0,0,0,.18)
  }
  .profile-card{padding:20px;display:flex;align-items:center;gap:15px}
  .profile-avatar{width:76px;height:76px;border-radius:15px;object-fit:cover;border:1px solid #343946;background:#0c0e12}
  .profile-name{font-size:22px;font-weight:950;line-height:1.1}
  .profile-steamid{margin-top:7px;color:#7f8794;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}
  .profile-role{display:inline-flex;margin-top:9px;padding:3px 8px;border:1px solid #2c8d4a;border-radius:999px;background:#102819;color:#66db89;font-size:10px;font-weight:950;letter-spacing:.07em}
  .player-profile-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
  .player-profile-link:hover{color:#6be58a;border-bottom-color:#3ca95b}
  .slot input.profile-clickable{cursor:pointer}
  .slot input.profile-clickable:hover{color:#79e793}
  .cup-player-link{display:inline-flex;border-radius:6px}
  .cup-player-link:hover img{border-color:#45b564;box-shadow:0 0 0 1px rgba(69,181,100,.25)}
  .stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .stat-card{padding:16px;border:1px solid #292e39;border-radius:14px;background:linear-gradient(145deg,#171920,#101218)}
  .stat-label{color:#818997;font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
  .stat-value{margin-top:5px;font-size:25px;font-weight:950;letter-spacing:-.04em}
  .stat-sub{margin-top:3px;color:#69717d;font-size:10px;font-weight:800}
  .profile-chart-card{padding:17px;min-width:0}
  .profile-section-title{font-size:12px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
  .profile-section-note{margin-top:3px;color:#7f8794;font-size:11px}
  .kd-canvas-wrap{height:185px;margin-top:10px;position:relative}
  #kdChart{width:100%;height:100%;display:block}
  .profile-highlights-card{padding:17px;margin-top:16px}
  .profile-highlights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
  .profile-highlights-extra{margin-top:12px}
  .profile-highlights-more-row{display:flex;justify-content:center;margin-top:13px}
  .profile-highlights-more{height:35px;padding:0 15px;border:1px solid #2e7842;border-radius:8px;background:#102719;color:#70e28d;font-size:10px;font-weight:950;letter-spacing:.055em;cursor:pointer}
  .profile-highlights-more:hover{border-color:#3aa257;background:#153420}
  .profile-cups-card{padding:17px;margin-top:16px}
  .profile-matches-card{padding:17px;margin-top:16px}
  .profile-match-list{margin-top:12px}
  .profile-cup-list{display:flex;flex-direction:column;gap:9px;margin-top:12px}
  .profile-cup-row{display:grid;grid-template-columns:minmax(0,1fr) 180px 120px;gap:12px;align-items:center;padding:11px 12px;border:1px solid #292e39;border-radius:11px;background:#12141a}
  .profile-cup-row strong{font-size:13px}.profile-cup-row small{display:block;margin-top:3px;color:#7f8793}
  .unsubscribe-btn{height:32px;border:1px solid #734343;border-radius:8px;background:#2b1719;color:#f3a0a0;font-size:10px;font-weight:950;cursor:pointer}

  .players-card,.users-card{overflow:hidden;border:1px solid #292e39;border-radius:16px;background:linear-gradient(145deg,#171920,#101218);box-shadow:0 12px 32px rgba(0,0,0,.18)}
  .players-toolbar,.users-toolbar{display:flex;gap:10px;padding:14px;border-bottom:1px solid #282d38}
  .players-search,.users-search{flex:1}
  .players-sort-actions{display:flex;gap:8px;flex:0 0 auto}
  .players-sort-btn{
    height:40px;padding:0 12px;border:1px solid #343a45;border-radius:9px;background:#191c22;color:#8d96a2;
    font:inherit;font-size:9px;font-weight:950;letter-spacing:.055em;white-space:nowrap;cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
  }
  .players-sort-btn:hover{color:#eef3ef;border-color:#435047}
  .players-sort-btn.active{border-color:#2f8e48;background:#102719;color:#78eb8d;box-shadow:0 0 18px rgba(57,224,95,.05)}
  .players-table{width:100%;border-collapse:collapse}
  .players-table th,.players-table td{padding:12px 14px;border-bottom:1px solid #242933;text-align:left}
  .players-table th{color:#7e8694;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
  .players-table tr:last-child td{border-bottom:0}
  .players-table tr:hover td{background:rgba(255,255,255,.018)}
  .player-directory-cell{display:flex;align-items:center;gap:10px;min-width:0}
  .player-directory-cell img,.player-directory-placeholder{width:36px;height:36px;border-radius:9px;background:#0c0e12;border:1px solid #2d323d;flex:0 0 auto}
  .player-directory-name{font-weight:900;color:#f4f7fb;text-decoration:none}
  .player-directory-name:hover{color:#69df88}
  .player-directory-id{display:block;margin-top:2px;color:#747c88;font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .players-count{color:#89919f;font-size:11px;font-weight:850;white-space:nowrap}

  .users-card{overflow:hidden}
  .users-toolbar{display:flex;gap:10px;padding:14px;border-bottom:1px solid #282d38}
  .users-search{flex:1}
  .users-table{width:100%;border-collapse:collapse}
  .users-table th,.users-table td{padding:12px 14px;border-bottom:1px solid #242933;text-align:left}
  .users-table th{color:#7e8694;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
  .users-table tr:last-child td{border-bottom:0}
  .user-cell{display:flex;align-items:center;gap:10px}.user-cell img{width:34px;height:34px;border-radius:8px;background:#0c0e12}
  .user-cell strong{display:block}.user-cell small{display:block;margin-top:2px;color:#747c88;font-size:10px}
  .role-badge{display:inline-flex;padding:3px 7px;border-radius:999px;border:1px solid #3a404c;color:#9ca4b0;font-size:9px;font-weight:950;letter-spacing:.08em}
  .role-badge.admin{border-color:#2b8c49;background:#122719;color:#62d887}
  .user-action-row{display:flex;gap:7px;justify-content:flex-end}
  .user-action-btn{height:31px;padding:0 9px;border:1px solid #3a404b;border-radius:8px;background:#1b1e25;color:#e6e9ef;font-size:9px;font-weight:950;cursor:pointer}
  .user-action-btn.grant{border-color:#2d8b4a;background:#122719;color:#67db8a}.user-action-btn.revoke{border-color:#714045;background:#2a1719;color:#ec969d}

  @media(max-width:1050px){
    .cup-create-grid{grid-template-columns:1fr 140px 170px 140px}.cup-create-grid .form-submit{grid-column:1/-1}
    .cup-card{grid-template-columns:minmax(0,1fr) 170px 130px}.cup-action{grid-column:1/-1;justify-content:flex-start}
    .profile-top{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(3,1fr)}.profile-highlights-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:720px){
    .page-head{align-items:flex-start}.page-head h1{font-size:30px}
    .cup-create-grid{grid-template-columns:1fr}.cup-card{grid-template-columns:1fr;gap:8px}.cup-action{grid-column:auto}
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .profile-highlights-grid{grid-template-columns:1fr}
    .profile-cup-row{grid-template-columns:1fr}.users-card,.players-card{overflow-x:auto}.users-table{min-width:760px}.players-table{min-width:580px}
    .players-toolbar{min-width:580px}.players-sort-actions{gap:6px}.players-sort-btn{padding:0 9px}
    .account-trigger .account-name{max-width:90px}
  }

  /* ---- Cup tournament control center ---- */
  .cup-name-link{color:inherit;text-decoration:none;transition:.15s ease}.cup-name-link:hover{color:#63df87;text-shadow:0 0 16px rgba(69,181,100,.3)}
  .cup-detail-shell{display:flex;flex-direction:column;gap:16px}
  .cup-detail-hero{border:1px solid #2b313b;background:linear-gradient(145deg,#11141a,#0d1015);border-radius:16px;padding:20px;box-shadow:0 18px 45px rgba(0,0,0,.22)}
  .cup-detail-hero-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
  .cup-detail-title{font-size:clamp(25px,4vw,42px);line-height:1;font-weight:950;letter-spacing:-.035em;margin:5px 0 9px}
  .cup-detail-meta{display:flex;gap:8px;flex-wrap:wrap;color:#a8b0bc;font-size:12px;font-weight:850}
  .cup-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #343a45;background:#171a21;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:950;letter-spacing:.08em;color:#cbd1da}
  .cup-chip.live{border-color:#3b8954;background:#13291a;color:#6be390;box-shadow:0 0 18px rgba(54,200,101,.1)}
  .cup-chip.finished{border-color:#8c702e;background:#2b2310;color:#f2ca62}
  .cup-detail-card{border:1px solid #292f39;background:#11141a;border-radius:14px;padding:17px}
  .cup-detail-card h2{margin:0 0 4px;font-size:16px;letter-spacing:.04em}.cup-detail-note{color:#858d99;font-size:12px;margin-bottom:14px}
  .cup-player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
  .cup-player-row{display:flex;align-items:center;gap:9px;border:1px solid #282d36;background:#15181f;border-radius:10px;padding:8px 10px;min-width:0}
  .cup-player-row img{width:30px;height:30px;border-radius:7px;object-fit:cover}.cup-player-row a{color:#e7eaf0;text-decoration:none;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cup-control-card{border-color:#28603b;background:linear-gradient(145deg,rgba(20,51,30,.72),#11151a);box-shadow:0 0 35px rgba(44,160,80,.08)}
  .cup-control-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.cup-control-actions button,.cup-small-btn{border:1px solid #3b8552;background:#153420;color:#dff9e7;border-radius:8px;padding:9px 12px;font-size:11px;font-weight:950;letter-spacing:.05em;cursor:pointer}.cup-control-actions button.danger{border-color:#85434a;background:#32181b;color:#ffb3b8}.cup-control-actions button.primary{background:linear-gradient(145deg,#176d38,#119545);border-color:#43bd6b;color:white}
  .cup-edit-grid{display:grid;grid-template-columns:minmax(180px,1fr) 150px 160px 120px;gap:10px}.cup-edit-grid label,.team-name-field label{display:block;font-size:10px;font-weight:900;color:#89919e;letter-spacing:.08em;margin:0 0 5px}
  .cup-team-layout{display:grid;grid-template-columns:1fr;gap:12px}.cup-team-card{border:1px solid #2c323c;background:#14171d;border-radius:12px;padding:12px}.cup-team-head{display:flex;gap:8px;align-items:end;margin-bottom:10px}.cup-team-head .team-name-field{flex:1}.cup-team-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.cup-team-slot select{width:100%;min-width:0}
  .cup-public-team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.cup-public-team-grid .cup-team-card{min-width:0}.cup-public-team-grid .cup-team-card strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .match-result-meta{display:flex;justify-content:center;gap:7px;align-items:center;min-height:19px;margin-top:8px;font-size:10px;font-weight:850;color:#9da6b2}.match-result-meta .map-pill{padding:3px 6px;border:1px solid #355440;border-radius:999px;background:#102116;color:#72e891}.match-result-meta .score-pill{font-size:12px;color:#e9ecef;letter-spacing:.04em}.match-result-editor{display:grid;grid-template-columns:minmax(110px,1fr) 66px auto 66px auto;gap:6px;align-items:end;margin-top:10px;padding-top:10px;border-top:1px solid #282e37}.match-result-editor label{display:block;margin-bottom:4px;font-size:8px;font-weight:900;letter-spacing:.08em;color:#717b88}.match-result-editor .site-input,.match-result-editor .site-select{height:34px;padding:6px 8px;font-size:10px}.match-result-editor .score-sep{padding-bottom:9px;color:#707985;font-weight:900}.match-result-editor button{height:34px;border:1px solid #34744a;background:#12311d;color:#78ed98;border-radius:8px;padding:0 9px;font-size:9px;font-weight:950;cursor:pointer}.winner-change-note{margin-top:6px;text-align:center;color:#7f8996;font-size:9px}.winner-actions .selected{box-shadow:0 0 0 1px rgba(114,232,145,.5),0 0 14px rgba(76,214,111,.12)}
  .cup-unassigned{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.cup-unassigned span{border:1px solid #343a45;background:#181b22;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:800;color:#b8bec8}
  .first-match-grid,.cup-match-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.first-match-card,.tourney-match{position:relative;border:1px solid #303640;background:#15181f;border-radius:12px;padding:13px}.lobby-tag{position:absolute;right:9px;top:9px;border:1px solid #3c9d5a;background:#14351e;color:#78ed98;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:950;letter-spacing:.08em}.wave-tag{color:#727b88;font-size:10px;font-weight:850;margin-bottom:6px}.first-match-card .match-vs,.tourney-match .match-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-top:15px}.match-team{text-align:center;font-size:12px;font-weight:900;min-width:0}.match-team.winner{color:#72e891}.match-vs-badge{font-size:9px;font-weight:950;color:#656d79}.winner-actions{display:flex;gap:6px;margin-top:10px}.winner-actions button{flex:1;border:1px solid #3a434e;background:#1a1e25;color:#cfd4dd;border-radius:7px;padding:7px 6px;font-size:10px;font-weight:900;cursor:pointer}.winner-actions button.selected{border-color:#3f9c5a;background:#173b23;color:#77e897}
  .standings-wrap{overflow:auto}.cup-standings{width:100%;border-collapse:collapse;min-width:470px}.cup-standings th,.cup-standings td{padding:9px 10px;border-bottom:1px solid #272c35;text-align:left;font-size:12px}.cup-standings th{font-size:10px;color:#777f8c;letter-spacing:.08em}.cup-standings td.num{text-align:center;width:55px}.cup-standings tr.top-seed td{color:#dceee2}
  .playoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.playoff-column{display:flex;flex-direction:column;gap:12px}.playoff-label{font-size:11px;font-weight:950;color:#838b98;letter-spacing:.1em;margin-bottom:4px}.champion-card{border:1px solid #a9822f;background:radial-gradient(circle at 50% 0,rgba(246,195,66,.18),transparent 62%),#1c180e;border-radius:16px;padding:25px;text-align:center;box-shadow:0 0 35px rgba(229,177,47,.12)}.champion-star{font-size:12px;color:#f0c75e;font-weight:950;letter-spacing:.16em}.champion-name{font-size:30px;font-weight:1000;color:#ffd86d;margin-top:7px;text-shadow:0 0 18px rgba(255,211,89,.22)}
  .cup-back-link{display:inline-flex;color:#8bdca1;text-decoration:none;font-size:11px;font-weight:900;margin-bottom:10px}.cup-empty-soft{color:#757d89;font-size:12px;padding:8px 0}
  @media(max-width:900px){.cup-edit-grid{grid-template-columns:1fr 1fr}.cup-team-slots{grid-template-columns:1fr 1fr}.first-match-grid,.cup-match-grid{grid-template-columns:1fr}.playoff-grid{grid-template-columns:1fr}.cup-team-head{align-items:stretch;flex-direction:column}}
  @media(max-width:560px){.cup-edit-grid{grid-template-columns:1fr}.cup-team-slots{grid-template-columns:1fr}.cup-detail-hero{padding:15px}}


/* === MAP VOTE === */
#voteMapBtn{border-color:#2f9d4c;background:linear-gradient(135deg,#173f24,#102b19)}
.map-vote-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,8,5,.92);backdrop-filter:blur(7px);border-radius:0}
.map-vote-overlay[hidden]{display:none!important}
.map-vote-card{width:min(650px,96%);border:1px solid #2d8c46;border-radius:12px;background:linear-gradient(180deg,#111a14,#0a100c);box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 28px rgba(42,177,78,.12);padding:20px}
.map-vote-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}
.map-vote-kicker{font-size:9px;font-weight:900;letter-spacing:.18em;color:#4cd66d;margin-bottom:4px}
.map-vote-title{font-size:22px;font-weight:950;letter-spacing:.04em;color:#fff}
.map-vote-sub{margin-top:5px;color:#8f9a92;font-size:11px;line-height:1.45}
.map-vote-countdown{flex:0 0 auto;min-width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:2px solid #37b75a;background:#0d1d12;color:#72f18e;font-size:22px;font-weight:950;box-shadow:0 0 22px rgba(55,183,90,.18)}
.map-vote-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.map-vote-choice{appearance:none;border:1px solid #2b352e;border-radius:8px;background:#101612;color:#d8dfda;padding:9px 8px;font-size:10px;font-weight:900;letter-spacing:.04em;cursor:pointer;transition:.15s ease;display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0}
.map-vote-choice:hover:not(:disabled){border-color:#3fb45c;background:#16281a;transform:translateY(-1px)}
.map-vote-choice.selected{border-color:#55d875;background:linear-gradient(135deg,#1d7133,#154e26);color:#fff;box-shadow:0 0 18px rgba(67,208,101,.18)}
.map-vote-choice:disabled{opacity:.45;cursor:not-allowed}
.map-vote-map-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-vote-count{flex:0 0 auto;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;border:1px solid #344139;background:#0a0f0c;color:#7f8b82;font-size:11px;font-weight:950;line-height:1}
.map-vote-count.has-votes{border-color:#3fbd60;background:#183e22;color:#7cf397;box-shadow:0 0 12px rgba(67,208,101,.14)}
.map-vote-choice.selected .map-vote-count{border-color:#7ef29a;background:#0f3118;color:#a0ffb5}
.map-vote-status{margin-top:12px;min-height:18px;text-align:center;color:#9ba69e;font-size:10px;font-weight:750}
.map-vote-status strong{color:#61dd7e}
@media(max-width:760px){.map-vote-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.map-vote-title{font-size:18px}.map-vote-card{padding:15px}}


@media(max-width:1100px){.cup-public-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.match-result-editor{grid-template-columns:1fr 60px auto 60px}.match-result-editor button{grid-column:1/-1}}
@media(max-width:650px){.cup-public-team-grid{grid-template-columns:1fr}.match-result-editor{grid-template-columns:1fr 52px auto 52px}}
/* Temporary CounterStrikeSharp maintenance notice */
.server-maintenance-notice{
  margin:0 0 14px;
  padding:15px 18px;
  border:1px solid rgba(226,93,93,.52);
  border-left:4px solid #e25d5d;
  border-radius:9px;
  background:linear-gradient(135deg,rgba(88,25,25,.34),rgba(25,18,19,.86));
  color:#e9ece9;
  text-align:center;
}
.server-maintenance-notice strong{
  display:block;
  margin-bottom:5px;
  color:#ff7777;
  font-size:12px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.server-maintenance-notice p{
  margin:0 auto;
  max-width:930px;
  color:#c8cfca;
  font-size:12px;
  font-weight:650;
  line-height:1.55;
}
.server-maintenance-notice .maintenance-api{color:#fff;font-weight:850}
@media(max-width:650px){
  .server-maintenance-notice{padding:13px 14px;text-align:left}
  .server-maintenance-notice p{font-size:11px}
}



  /* Homepage refresh: practice/highlights hero */
  body{
    background:
      radial-gradient(circle at 12% 6%,rgba(109,255,74,.12),transparent 18%),
      radial-gradient(circle at 88% 9%,rgba(88,255,108,.10),transparent 16%),
      linear-gradient(180deg,#060906 0%,#060906 22%,#050705 100%);
    color:#f4f7f5;
  }
  body::before,
  body::after{
    content:"";
    position:fixed;
    top:0;
    bottom:0;
    width:220px;
    pointer-events:none;
    z-index:-1;
    opacity:.9;
    filter:blur(2px);
  }
  body::before{
    left:0;
    background:
      radial-gradient(circle at -10% 28%,rgba(110,255,70,.26),transparent 36%),
      linear-gradient(90deg,rgba(28,64,27,.32),transparent 70%);
  }
  body::after{
    right:0;
    background:
      radial-gradient(circle at 110% 28%,rgba(110,255,70,.24),transparent 36%),
      linear-gradient(270deg,rgba(28,64,27,.32),transparent 70%);
  }
  .site-header{
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid rgba(58,82,62,.55);
    background:rgba(6,9,7,.88);
    backdrop-filter:blur(10px);
    box-shadow:0 12px 35px rgba(0,0,0,.28);
  }
  .site-header-inner{
    gap:18px;
    padding:14px 0;
  }
  .brand{
    display:inline-flex;
    flex-direction:row;
    align-items:baseline;
    gap:10px;
    text-decoration:none;
    white-space:nowrap;
  }
  .brand-mark,
  .brand-copy{
    display:none !important;
  }
  .brand-logo{
    display:inline-flex;
    align-items:baseline;
    font-size:clamp(34px,3vw,52px);
    font-weight:1000;
    line-height:1;
    letter-spacing:-.05em;
    text-transform:uppercase;
    text-shadow:0 8px 24px rgba(0,0,0,.34);
  }
  .brand-logo-accent{
    color:#9afc2f;
  }
  .brand-logo-text{
    color:#f6faf7;
  }
  .brand-byline{
    display:inline-flex;
    align-items:baseline;
    gap:4px;
    margin:0 0 3px 0;
    color:#7b8780;
    font-size:10.5px;
    font-weight:850;
    line-height:1;
    letter-spacing:.10em;
    text-transform:none;
  }
  .brand-byline strong{
    color:#9afc2f;
    font-size:11.5px;
    font-weight:950;
    letter-spacing:.09em;
  }
  .primary-nav{
    flex:1 1 auto;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .primary-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 12px;
    border:1px solid transparent;
    border-radius:8px;
    color:#b0b9b3;
    font-size:11px;
    font-weight:950;
    letter-spacing:.08em;
    text-decoration:none;
    text-transform:uppercase;
    transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s ease;
  }
  .primary-nav a:hover,
  .primary-nav a:focus-visible{
    color:#fff;
    border-color:#233026;
    background:#0d120e;
    transform:translateY(-1px);
  }
  .header-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .header-admin,
  .steam-logout-btn{
    border-radius:10px;
    border-color:#2e3931;
    background:#0f1511;
  }
  .site-main{
    position:relative;
    padding-top:18px;
  }
  .home-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.22fr) minmax(0,.98fr);
    gap:16px;
    margin:6px 0 14px;
    align-items:stretch;
  }
  .home-card{
    position:relative;
    min-width:0;
    padding:16px;
    border:1px solid rgba(68,144,84,.65);
    border-radius:14px;
    background:
      radial-gradient(circle at 0 0,rgba(85,255,112,.08),transparent 26%),
      linear-gradient(145deg,rgba(9,14,11,.98),rgba(5,8,6,.99));
    box-shadow:0 28px 65px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.015);
    overflow:hidden;
  }
  .home-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  }
  .home-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }
  .home-card-title{
    margin:0;
    color:#f3f7f4;
    font-size:clamp(19px,1.7vw,31px);
    line-height:1;
    font-weight:1000;
    letter-spacing:-.045em;
    text-transform:uppercase;
  }
  .home-card-meta{
    flex:0 0 auto;
    padding-top:1px;
    color:#a4aea7;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
    white-space:nowrap;
    text-transform:uppercase;
  }
  .home-card-meta span{
    color:#89ef7d;
    margin:0 4px;
  }
  .home-prac-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .prac-hero-item{
    min-width:0;
  }
  .prac-hero-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin-bottom:6px;
    flex-wrap:wrap;
  }
  .prac-hero-name{
    color:#f3f7f4;
    font-size:clamp(15px,1.1vw,22px);
    line-height:1;
    font-weight:1000;
    letter-spacing:-.035em;
    text-transform:uppercase;
  }
  .prac-hero-name span{
    color:#98fb37;
  }
  .prac-hero-thumb-wrap,
  .home-highlight-media{
    border:1px solid #223026;
    border-radius:12px;
    overflow:hidden;
    background:#09100b;
  }
  .prac-hero-thumb-wrap{
    height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3px 0;
  }
  .prac-hero-thumb{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .home-highlight-media video{
    display:block;
    width:100%;
    height:176px;
    object-fit:cover;
    background:#000;
  }
  .promo-copy-btn,
  .home-aftermovie-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:31px;
    padding:0 12px;
    border:1px solid #43b257;
    border-radius:8px;
    background:linear-gradient(135deg,#10291a,#0b1d12);
    color:#97fb7e;
    text-decoration:none;
    font-size:10px;
    font-weight:1000;
    letter-spacing:.1em;
    text-transform:uppercase;
    transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
    box-shadow:0 0 0 1px rgba(112,255,121,.08) inset;
    cursor:pointer;
  }
  .promo-copy-btn::after,
  .home-aftermovie-link::after{
    content:"›";
    margin-left:7px;
    font-size:16px;
    line-height:1;
    transform:translateY(-1px);
  }
  .promo-copy-btn:hover,
  .promo-copy-btn:focus-visible,
  .home-aftermovie-link:hover,
  .home-aftermovie-link:focus-visible{
    transform:translateY(-1px);
    border-color:#61da73;
    background:linear-gradient(135deg,#14351f,#0f2718);
    color:#b6ff95;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
  .promo-copy-btn.copied{
    color:#071109;
    background:linear-gradient(135deg,#7dfb60,#52d347);
    border-color:#8fff6f;
  }
  .promo-copy-btn.copied::after{
    content:"";
    margin-left:0;
  }
  .home-highlight-copy{
    margin-top:10px;
  }
  .home-highlight-title{
    color:#f2f7f4;
    font-size:clamp(14px,1.05vw,20px);
    font-weight:1000;
    letter-spacing:-.03em;
    text-transform:uppercase;
  }
  .home-highlight-desc{
    margin-top:8px;
    color:#9ca79f;
    font-size:11px;
    line-height:1.45;
    max-width:58ch;
  }
  .home-highlight-card .home-aftermovie-link{
    margin-top:12px;
    min-height:36px;
    padding:0 16px;
    font-size:11px;
  }
  .home-aftermovie-feature{
    display:none !important;
  }
  @media (max-width:1180px){
    .home-hero-grid{
      grid-template-columns:1fr;
    }
    .home-card-meta{
      white-space:normal;
      text-align:right;
    }
  }
  @media (max-width:860px){
    .site-header-inner{
      flex-wrap:wrap;
      justify-content:center;
    }
    .primary-nav{
      order:3;
      width:100%;
    }
    .header-actions{
      width:100%;
      justify-content:center;
    }
    .home-card{
      padding:16px;
    }
    .home-card-head,
    .prac-hero-row{
      flex-direction:column;
      align-items:flex-start;
    }
    .home-card-meta{
      text-align:left;
      padding-top:0;
    }
    .promo-copy-btn,
    .home-aftermovie-link{
      width:100%;
    }
    .prac-hero-thumb{
      aspect-ratio:16 / 6;
    }
  }



  /* Sketch-guided compact homepage feature row */
  
  .home-card-compact{
    padding:12px 13px 13px;
    border-radius:12px;
  }
  .compact-feature-head{
    justify-content:center;
    margin:0 0 10px;
    text-align:center;
  }
  .compact-feature-head .home-card-title{
    width:100%;
    font-size:clamp(18px,1.55vw,28px);
    letter-spacing:-.03em;
    line-height:1;
    text-align:center;
  }
  .home-prac-list-compact{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:start;
  }
  .compact-server-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:nowrap;
    margin:0 0 7px;
  }
  .compact-server-row .prac-hero-name{
    flex:0 1 auto;
    min-width:0;
    font-size:clamp(14px,1.18vw,20px);
    white-space:nowrap;
  }
  .compact-copy-btn{
    flex:0 0 auto;
    min-height:28px;
    padding:0 10px;
    border-radius:6px;
    font-size:8.5px;
    letter-spacing:.075em;
  }
  .compact-copy-btn::after{
    margin-left:5px;
    font-size:13px;
  }
  .compact-thumb-wrap{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    padding:0;
    border-radius:7px;
    background:#050805;
  }
  .compact-thumb-wrap .prac-hero-thumb{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .home-highlight-compact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.72fr) minmax(138px,.78fr);
    gap:12px;
    align-items:stretch;
  }
  
  
  .compact-highlight-copy{
    margin:0;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:stretch;
    padding:4px 0 2px;
  }
  .compact-highlight-desc{
    margin:0 0 13px;
    color:#d7ded9;
    font-size:9px;
    line-height:1.35;
    font-weight:950;
    letter-spacing:.045em;
    text-align:center;
  }
  .compact-aftermovie-link{
    width:100%;
    min-height:31px !important;
    margin:0 !important;
    padding:0 9px !important;
    border-radius:6px;
    font-size:8.5px !important;
    letter-spacing:.055em;
    white-space:nowrap;
  }
  .compact-aftermovie-link::after{
    margin-left:5px;
    font-size:13px;
  }
  .home-hero-grid-sketch + .landing-stage{
    padding-top:14px;
  }
  @media (max-width:1180px){
    .home-hero-grid-sketch{
      grid-template-columns:1fr;
    }
    .home-highlight-compact-layout{
      grid-template-columns:minmax(0,1.75fr) minmax(160px,.7fr);
    }
  }
  @media (max-width:720px){
    .home-prac-list-compact{
      grid-template-columns:1fr;
    }
    .home-highlight-compact-layout{
      grid-template-columns:1fr;
    }
    .compact-highlight-copy{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:center;
    }
    .compact-highlight-desc{
      margin:0;
      text-align:left;
    }
    .compact-aftermovie-link{
      width:auto;
    }
  }


  /* ================================================================
     QUICK TWEAKS — top navigation + compact homepage feature cards
     These values are intentionally grouped here so they are easy to
     adjust manually later without touching the rest of the site.
     ================================================================ */

  /* NAVBAR TEXT SIZE: LOBBY -> DISCORD */
  .primary-nav a{
    font-size:13px;
  }

  /* ADMIN BUTTON TEXT SIZE */
  .header-admin{
    font-size:13px;
    font-weight:950;
  }

  /*
     FEATURE HEADLINE SIZE.
     This deliberately matches AIM_MAP / NADE PRAC below.
     Change this font-size AND .compact-server-row .prac-hero-name
     together if you want both sizes to remain identical.
  */
  .compact-feature-head .home-card-title,
  .compact-server-row .prac-hero-name{
    font-size:clamp(14px,1.18vw,15px);
  }

  /* SPACE BELOW BOTH FEATURE HEADLINES */
  .compact-feature-head{
    margin-bottom:12px;
  }

  /*
     BEST HIGHLIGHTS layout:
     button first, then centered 16:9 video. The video is about the
     same visual width as one thumbnail in the practice card.
  */
  .home-highlight-compact-layout{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
  }

  .compact-highlight-copy{
    order:1;
    width:auto;
    min-width:0;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .compact-aftermovie-link{
    width:auto !important;
    min-width:94px;
    min-height:28px !important;
    height:28px;
    margin:0 !important;
    padding:0 10px !important;
    border-radius:6px;
    font-size:8.5px !important;
    letter-spacing:.075em;
    white-space:nowrap;
  }

  .compact-aftermovie-media{
    order:2;
    width:74%;
    max-width:100%;
    aspect-ratio:16/9;
    min-width:0;
    margin:0 auto;
    border-radius:7px;
    background:#030504;
  }

  .compact-aftermovie-media .home-aftermovie-video{
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:16/9;
    object-fit:contain;
    background:#030504;
  }

  .compact-feature-head .home-card-title{
  font-family:inherit;
  font-size:20px;
  font-weight:1000;
  letter-spacing:.01em;
  color:#ffffff;
}

  /* Headline color lik navbar font 
  .compact-feature-head .home-card-title{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:900;
  color:#b7ff58;
  letter-spacing:.02em;
  font-size:18px;
}*/

  /* Headline med glow 
  .compact-feature-head .home-card-title{
  color:#6f9862;
  font-weight:1000;
  text-shadow:
  0.5px 0 0 currentColor,
  -0.5px 0 0 currentColor,
  0 0 10px rgba(57,224,95,.28);*/

/* Headline med grønn glow 
.compact-feature-head .home-card-title{
  color:#91f58a;
  font-weight:1000;
  text-shadow:0 0 12px rgba(57,224,95,.18);
}*/

/* Headline med gul glow
.compact-feature-head .home-card-title{
  color:#ffd95a;
  font-weight:1000;
} */

  /* Fjerne pil i copy shiten - FIKSE SEINARE */
  .compact-copy-btn::after{
  content:none;
  margin:0;
}

  @media (max-width:1180px){
    .compact-aftermovie-media{
      width:min(64%,520px);
    }
  }

  @media (max-width:720px){
    .primary-nav a{
      font-size:12px;
    }
    .header-admin{
      font-size:12px;
    }
    .compact-aftermovie-media{
      width:100%;
    }
    .compact-highlight-copy{
      width:100%;
      display:flex;
      justify-content:center;
    }
    .compact-aftermovie-link{
      width:auto !important;
    }
  }



  /* ================================================================
     V8 — centered/shorter homepage feature cards
     Equal 50/50 columns put the gap exactly on the page centre.
     Warmup thumbnails are deliberately smaller while the aftermovie
     uses more of its card, keeping the whole feature row compact.
     ================================================================ */
  .home-hero-grid-sketch{
    width:min(100%,1200px);
    margin:4px auto 14px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
  }
  .home-hero-grid-sketch .home-card-compact{
    padding:10px 12px 12px;
    border-radius:11px;
  }

  /* Left card: keep the two server blocks centred vertically so the
     free space above/below the thumbnails stays visually balanced. */
  .home-hero-grid-sketch .home-prac-card{
    display:flex;
    flex-direction:column;
  }
  
  .home-hero-grid-sketch .home-prac-list-compact{
    flex:1 1 auto;
    gap:12px;
    align-items:center;
    align-content:center;
  }
  
  .home-hero-grid-sketch .compact-thumb-wrap{
    width:82%;
    max-width:250px;
    margin:0 auto;
    aspect-ratio:16/9;
  }

  /* Right card: remove the empty heading spacer and let the actual
     video occupy substantially more of the card than before. */
  .home-hero-grid-sketch .home-highlight-card{
    display:flex;
    flex-direction:column;
  }
  .home-hero-grid-sketch .home-highlight-card .compact-feature-head:empty{
    display:none;
  }
  .home-hero-grid-sketch .home-highlight-compact-layout{
    flex:1 1 auto;
    width:100%;
    min-height:0;
    justify-content:center;
  }
  

  @media (max-width:1180px){
    .home-hero-grid-sketch{
      width:100%;
      grid-template-columns:1fr;
    }
    .home-hero-grid-sketch .compact-thumb-wrap{
      width:min(82%,320px);
      max-width:320px;
    }
    .home-hero-grid-sketch .compact-aftermovie-media{
      width:min(88%,560px);
    }
  }
  @media (max-width:720px){
    .home-hero-grid-sketch .compact-thumb-wrap,
    .home-hero-grid-sketch .compact-aftermovie-media{
      width:100%;
      max-width:none;
    }
  }

  /* ================================================================
     V9 — slightly shorter top feature row
     Reduce both warmup thumbnails and the featured aftermovie so the
     two cards take less vertical space while staying centred/equal.
     ================================================================ */
  .home-hero-grid-sketch .home-card-compact{
    padding:8px 11px 10px;
  }
  .home-hero-grid-sketch .home-prac-card .compact-feature-head{
    margin-bottom:7px;
  }
  .home-hero-grid-sketch .home-prac-list-compact{
    gap:10px;
  }
  .home-hero-grid-sketch .compact-server-row{
    margin-bottom:5px;
  }
  .home-hero-grid-sketch .compact-thumb-wrap{
    width:74%;
    max-width:225px;
  }
  .home-hero-grid-sketch .home-highlight-compact-layout{
    gap:6px;
  }
  .home-hero-grid-sketch .compact-aftermovie-media{
    width:64%;
    max-width:390px;
    margin:auto;
  }

  @media (max-width:1180px){
    .home-hero-grid-sketch .compact-thumb-wrap{
      width:min(76%,290px);
      max-width:290px;
    }
    .home-hero-grid-sketch .compact-aftermovie-media{
      width:min(68%,420px);
      max-width:420px;
    }
  }
  @media (max-width:720px){
    .home-hero-grid-sketch .compact-thumb-wrap,
    .home-hero-grid-sketch .compact-aftermovie-media{
      width:100%;
      max-width:none;
    }
  }

  /* Homepage warmup labels sit directly on the card background (no extra row box). */
  .home-prac-list-compact .compact-server-row{
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    cursor:default;
  }

  /* Compact GATHER server overview — mirrors RECENT MATCHES styling */
  .server-overview-stack{display:flex;flex-direction:column;gap:12px;margin:2px 0 16px}
  .server-overview-stack .content-panel{margin:0;padding:17px 18px}
  .server-list-panel .section-title-row{margin-bottom:11px}
  .compact-server-table{border:1px solid #202a23;border-radius:8px;overflow:hidden;background:#080c09}
  .compact-server-grid{
    display:grid;
    grid-template-columns:minmax(260px,1.35fr) minmax(145px,.82fr) 88px 132px minmax(105px,.72fr) 92px;
    align-items:center;
    gap:12px;
    min-width:0;
  }
  .compact-server-head{
    min-height:34px;
    padding:0 12px;
    border-bottom:1px solid #202a23;
    background:#0a0f0c;
    color:#69756d;
    font-size:9px;
    font-weight:950;
    letter-spacing:.09em;
    text-transform:uppercase;
  }
  .gather-server-row{
    min-height:57px;
    padding:8px 12px;
    border-bottom:1px solid #1d2720;
    background:#0b100d;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
  }
  .gather-server-row:last-child{border-bottom:0}
  @media (hover:hover){
    .gather-server-row:hover{background:#0e1611;box-shadow:inset 3px 0 0 rgba(57,224,95,.45)}
    .gather-server-row:hover .server-name-pill{border-color:#4d6556;background:#141d17}
  }
  .gather-server-row:focus-visible{outline:1px solid #43b257;outline-offset:-2px;background:#0e1611}
  
  .server-game-icon{width:28px;height:28px;flex:0 0 28px;border-radius:5px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
  .server-name-pill{
    width:190px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 8px;
    border:1px solid #334039;
    border-radius:6px;
    background:#101612;
    color:#eef3ef;
    font-size:10px;
    font-weight:1000;
    letter-spacing:.065em;
    white-space:nowrap;
    transition:border-color .14s ease,background .14s ease;
  }
  .server-state-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#39e05f;box-shadow:0 0 11px rgba(57,224,95,.55)}
  .server-state-dot.offline{background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,.4)}
  .server-host-cell,.server-map-cell,.server-players-cell,.server-score-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:850;letter-spacing:.025em;color:#dbe2dd}
  .server-host-cell.no-host{color:#55df70}
  .server-map-cell{color:#a7b0aa;text-transform:uppercase}
  .server-players-cell,.server-score-cell{font-variant-numeric:tabular-nums;color:#eef3ef;font-weight:950}
  .server-status-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:96px;height:30px;padding:0 10px;border:1px solid;border-radius:6px;font-size:10px;font-weight:1000;letter-spacing:.055em;white-space:nowrap}
  .server-status-pill > span{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}
  
  
  
  .server-status-pill.offline{min-width:124px;border-color:#713838;background:#241111;color:#e06a6a}
  #serverOverview[hidden],#lobby[hidden]{display:none!important}

  @media (max-width:1050px){
    .compact-server-grid{grid-template-columns:230px minmax(120px,.8fr) 72px 116px minmax(92px,.72fr) 78px;gap:9px}
    .compact-server-head,.gather-server-row{padding-left:10px;padding-right:10px}
    .server-game-icon{width:24px;height:24px;flex-basis:24px}
    .server-name-cell{gap:6px}
    .server-name-pill{width:172px;padding:0 7px}
    .server-status-pill{font-size:9.5px}
  }
  @media (max-width:820px){
    .compact-server-table{overflow-x:auto}
    .compact-server-grid{min-width:850px}
  }
  @media (max-width:620px){
    .server-overview-stack .content-panel{padding:13px}
    .compact-server-head{display:none}
    .compact-server-table{overflow:visible;border:0;background:transparent}
    .compact-server-grid{min-width:0}
    .gather-server-row{
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px 12px;
      min-height:0;
      margin-bottom:7px;
      padding:11px;
      border:1px solid #202a23!important;
      border-radius:8px;
    }
    .gather-server-row:last-child{margin-bottom:0}
    .gather-server-table .server-col-server{grid-column:1;grid-row:1}
    .gather-server-table .server-col-status{grid-column:2;grid-row:1}
    .gather-server-table .server-col-host{grid-column:1;grid-row:2}
    .gather-server-table .server-col-players{grid-column:2;grid-row:2;text-align:right}
    .gather-server-table .server-col-map{grid-column:1;grid-row:3}
    .gather-server-table .server-col-score{grid-column:2;grid-row:3;text-align:right}
    .server-game-icon{width:26px;height:26px;flex-basis:26px}
    .server-name-pill{width:auto;min-width:172px;padding:0 8px}
    .server-status-pill{min-width:82px;height:28px;font-size:9px}
    .server-status-pill.offline{min-width:116px}
  }


  /* Collapsed gathers shown around the currently expanded gather. */
  .expanded-gather-neighbors{margin:0 0 9px}
  .expanded-gather-neighbors-below{margin:9px 0 0}
  .expanded-gather-neighbors:empty{display:none}
  .expanded-gather-neighbors .gather-server-row{min-height:50px}

  /* Read-only lobby activity log + compact action bar */
  .live-lobby-shell .lobby-grid{
    align-items:stretch;
  }
  .live-lobby-shell .mid{
    justify-content:flex-start;
    height:100%;
    min-height:0;
  }
  .lobby-activity-box{
    height:auto;
    min-height:0;
    max-height:none;
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #202a23;
    border-radius:7px;
    background:#0b100d;
  }
  .lobby-activity-title{
    flex:0 0 auto;
    padding:8px 9px 7px;
    border-bottom:1px solid #1d2720;
    color:#c6cec9;
    font-size:9px;
    font-weight:950;
    letter-spacing:.075em;
    text-align:center;
  }
  .lobby-activity-feed{
    min-height:0;
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding:7px 9px 8px;
    scrollbar-width:thin;
    scrollbar-color:#26342b transparent;
  }
  .lobby-activity-feed::-webkit-scrollbar{width:6px}
  .lobby-activity-feed::-webkit-scrollbar-thumb{background:#26342b;border-radius:999px}
  .lobby-activity-empty{
    display:flex;
    min-height:100%;
    align-items:center;
    justify-content:center;
    color:#526058;
    font-size:9px;
    font-weight:750;
    text-align:center;
  }
  .lobby-activity-entry{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:7px;
    padding:4px 0;
    color:#b8c1bb;
    font-size:9.5px;
    line-height:1.32;
    border-bottom:1px solid rgba(29,39,32,.55);
  }
  .lobby-activity-entry:last-child{border-bottom:0}
  .lobby-activity-time{color:#58645d;font-variant-numeric:tabular-nums;white-space:nowrap}
  .lobby-activity-message{min-width:0;overflow-wrap:anywhere}
  .lobby-activity-entry.success .lobby-activity-message{color:#62e77d;font-weight:900}
  .lobby-activity-entry.warning .lobby-activity-message{color:#d9a85c}
  .lobby-activity-entry.danger .lobby-activity-message{color:#e36d6d}
  .lobby-activity-entry.muted .lobby-activity-message{color:#78837c}
  .lobby-action-bar{
    display:flex;
    align-items:stretch;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    margin-top:9px;
  }
  .live-lobby-shell .lobby-action-bar .btn{
    width:auto;
    min-width:128px;
    min-height:32px;
    flex:1 1 128px;
    max-width:190px;
    margin:0;
  }
  .live-lobby-shell .lobby-action-bar .hostOnly.show,
  .live-lobby-shell .lobby-action-bar .claim-host-btn.show{display:flex;align-items:center;justify-content:center}
  @media (max-width:900px){
    .live-lobby-shell .mid .lobby-activity-box{grid-column:1/-1;height:165px;min-height:165px;max-height:165px}
    .live-lobby-shell .mid #copyIpStringBtn{grid-column:1/-1}
    .lobby-action-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
    .live-lobby-shell .lobby-action-bar .btn{width:100%;max-width:none;min-width:0}
  }
  @media (max-width:620px){
    .lobby-action-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lobby-activity-box{height:150px;min-height:150px;max-height:150px}
  }


/* Patch notes and refreshed home feature — V2 compact top + server-row warmup */
.home-hero-grid-sketch{width:min(100%,1080px)}
.patch-home-card{display:flex;flex-direction:column;min-width:0;padding:18px 20px!important;background:radial-gradient(circle at 0 0,rgba(68,185,112,.12),transparent 55%),#121817!important}
.patch-home-card .home-card-head,.home-highlight-card .home-card-head{display:flex!important;justify-content:center;align-items:center;min-height:30px!important;margin-bottom:6px!important;text-align:center}
.patch-home-card .home-card-title,.home-highlight-card .home-card-title{width:100%;text-align:center}
.patch-home-content{flex:1;min-height:146px;padding:9px 0}.patch-home-content h3{font-size:20px;margin:7px 0 6px}.patch-muted{color:#91a29a}.patch-date{color:#8caa98;font-size:12px;font-weight:700;letter-spacing:.7px}.patch-home-summary{color:#d4e1d9;line-height:1.55;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.patch-home-changes{padding-left:19px;color:#c7d6cd;font-size:13px;line-height:1.55;max-height:68px;overflow:hidden}.patch-action-link{color:#7de4a0;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.5px}
.home-highlight-card{border:1px solid rgba(96,205,135,.22)!important;background:linear-gradient(145deg,#17201b,#101414)!important;padding:12px 16px 11px!important}.home-highlight-card .home-highlight-media{overflow:hidden;border-radius:9px;box-shadow:0 8px 25px rgba(0,0,0,.35)}
.home-hero-grid-sketch .compact-aftermovie-media{width:68%;max-width:360px}

/* Warmup servers: two compact server-style rows with thumbnail -> name -> copy button. */
.warmup-section{margin:12px 0 16px;padding:17px 18px!important}
.warmup-inner{width:100%}
.warmup-inner .home-card-head{display:none}
.warmup-inner .home-prac-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.warmup-inner .prac-hero-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  min-height:58px;
  gap:12px;
  padding:8px 11px;
  border:1px solid #202a23;
  border-radius:8px;
  background:#0b100d;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
@media(hover:hover){.warmup-inner .prac-hero-item:hover{background:#0e1611;border-color:#2b3b31;box-shadow:inset 3px 0 0 rgba(57,224,95,.35)}}
.warmup-inner .compact-thumb-wrap{
  order:0;
  flex:0 0 70px;
  width:70px!important;
  height:40px!important;
  max-width:none!important;
  margin:0!important;
  aspect-ratio:auto!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid #263129;
  border-radius:6px;
  background:#050805;
}
.warmup-inner .prac-hero-thumb{display:block;width:100%;height:100%;object-fit:cover}
.warmup-inner .compact-server-row{
  order:1;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:16px;
  margin:0!important;
  padding:0!important;
}
.warmup-inner .prac-hero-name{flex:0 1 auto;min-width:0;font-size:14px;line-height:1.1;white-space:nowrap}
.warmup-inner .compact-copy-btn{flex:0 0 auto;min-height:28px;padding:0 11px;margin:0;font-size:8.5px}

.patch-page{padding:28px 0}.patch-page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}.patch-page-heading h1{font-size:36px;margin:5px 0}.patch-page-heading p{color:#99a99e}.patch-eyebrow{color:#71d998;letter-spacing:2px;font-size:11px;font-weight:800}.patch-primary,.patch-secondary{padding:11px 16px;border-radius:7px;cursor:pointer;font-weight:800;border:1px solid #4dbb75;background:#24854b;color:white}.patch-secondary{background:#1b2420;border-color:#46554b}.patch-list{display:grid;gap:18px}.patch-entry{padding:24px;background:linear-gradient(140deg,#17201a,#111613);border:1px solid #2b3a30;border-radius:12px;border-left:3px solid #396b4b}.patch-entry:first-child{border-left-color:#72e49a}.patch-entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.patch-entry h2{font-size:23px;margin:8px 0 18px}.patch-entry ul{padding-left:21px;line-height:1.9;color:#dce6df}.patch-entry li::marker{color:#70db95}.patch-summary-block{border-top:1px solid #314036;margin-top:18px;padding-top:15px;color:#b6c7ba;line-height:1.6;overflow-wrap:anywhere}.patch-summary-block strong{display:block;font-size:11px;color:#7bd89c;letter-spacing:1px;margin-bottom:6px}.patch-admin-actions{display:flex;gap:8px}.patch-admin-actions button{background:transparent;border:1px solid #46594a;color:#cbd8cf;border-radius:6px;padding:7px 11px;cursor:pointer}.patch-editor{display:grid;gap:15px;background:#141c17;border:1px solid #416349;padding:22px;border-radius:12px;margin-bottom:24px}.patch-editor label{display:grid;gap:7px;color:#9fc6ac;font-weight:800;font-size:12px;letter-spacing:.5px}.patch-editor input,.patch-editor textarea{width:100%;box-sizing:border-box;background:#0c130f;color:#f0f7f1;border:1px solid #405548;border-radius:7px;padding:12px;font:inherit}.patch-editor small{font-weight:400;color:#91a29a}.patch-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:1180px){.home-hero-grid-sketch{width:min(100%,1080px);grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero-grid-sketch .compact-aftermovie-media{width:72%;max-width:360px}}
@media(max-width:850px){.home-hero-grid-sketch{grid-template-columns:1fr;width:min(100%,620px)}.home-hero-grid-sketch .compact-aftermovie-media{width:min(72%,390px)}.warmup-inner .home-prac-list{grid-template-columns:1fr}}
@media(max-width:700px){.patch-page-heading{align-items:flex-start}.patch-page-heading h1{font-size:27px}.patch-entry{padding:17px}.patch-entry-head{flex-wrap:wrap}.warmup-inner .prac-hero-item{min-height:54px;gap:9px;padding:7px 8px}.warmup-inner .compact-thumb-wrap{flex-basis:60px;width:60px!important;height:34px!important}.warmup-inner .compact-server-row{gap:10px}.warmup-inner .prac-hero-name{font-size:12.5px}.home-hero-grid-sketch .compact-aftermovie-media{width:100%;max-width:none}}


/* ================================================================
   V4 — compact expandable Gather Server cards
   Warmup-style thumbnail/name treatment + Recent Matches expansion.
   ================================================================ */

.gather-card-list{display:flex;flex-direction:column;gap:7px}
.gather-overview-card{
  overflow:hidden;
  border:1px solid #202a23;
  border-radius:8px;
  background:#0b100d;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
  scroll-margin-top:92px;
}
.gather-server-row{
  width:100%;
  min-height:58px;
  display:grid;
  /* Left-side info is intentionally packed together. Two flexible spacer
     columns place MAP/SCORE around the same horizontal area as the
     Highlights/Demo actions in RECENT MATCHES while the expand control
     remains pinned to the far right. */
  grid-template-columns:minmax(285px,300px) 76px minmax(190px,220px) 96px 86px minmax(180px,.65fr) 112px 118px minmax(30px,.35fr) 34px;
  align-items:center;
  gap:8px;
  margin:0;
  padding:8px 11px;
  border:0;
  background:#0b100d;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,box-shadow .14s ease;
}
@media (hover:hover){
  .gather-server-row:hover{background:#0e1611;box-shadow:inset 3px 0 0 rgba(57,224,95,.45)}
}
.gather-overview-card.joined .gather-server-row{
  background:#0e1611;
  box-shadow:inset 3px 0 0 rgba(57,224,95,.45);
}
.gather-overview-card.expanded{border-color:#315d3d;box-shadow:0 14px 34px rgba(0,0,0,.18)}
.gather-overview-card.expanded .gather-server-row{background:#0e1611}
.gather-server-row:focus-visible{outline:1px solid #43b257;outline-offset:-2px}
.server-name-cell{min-width:0;display:flex;align-items:center;gap:11px}
.server-game-thumb{
  width:58px;
  height:34px;
  flex:0 0 58px;
  display:block;
  object-fit:cover;
  border:1px solid #263129;
  border-radius:6px;
  background:#050805;
}
.gather-server-name{
  min-width:0;
  color:#f1f5f2;
  font-size:14px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.gather-server-name strong{color:#98fb37;font-weight:1000}
.server-status-pill{
  min-width:0!important;
  width:max-content;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0 11px;
  border:1px solid;
  border-radius:6px;
  font-size:8.5px;
  font-weight:1000;
  letter-spacing:.075em;
  white-space:nowrap;
}
.server-status-pill > span{display:none!important}
.server-status-pill.open{border-color:#38b75a;background:#102818;color:#86f59a}
.server-status-pill.full{border-color:#8a5a25;background:#2d1d0b;color:#f2a655}
.server-status-pill.ingame{border-color:#8f3434;background:#2c1010;color:#f26c6c}
.server-status-pill.offline{border-color:#713838;background:#241111;color:#e06a6a}
.server-inline-stat{min-width:0;display:flex;align-items:center;gap:7px;white-space:nowrap}
/* Slightly larger stat labels, while the live values match the visual weight
   and size used by AIM_MAP / 24/7 in the Warmup Servers rows. */
.server-inline-label{color:#657168;font-size:10.5px;font-weight:950;letter-spacing:.075em;text-transform:uppercase}
.server-inline-label::after{content:":"}
.server-inline-stat strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  font-size:10.5px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:.075em;
}
.server-host-value,.server-host-value.no-host{color:#fff!important}
.server-col-players strong,.server-col-score strong{font-variant-numeric:tabular-nums;color:#fff}
.server-players-value{overflow:visible!important;text-overflow:clip!important}
.server-col-map strong{color:#fff;text-transform:uppercase}
.server-inline-stat-right{justify-content:flex-start;text-align:left}
.server-col-joined{min-width:0;display:flex;align-items:center;justify-content:flex-start}
.server-joined-value{
  color:#98fb37;
  font-size:10.5px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:.075em;
  white-space:nowrap;
}
.server-joined-value[hidden]{display:none!important}
.gather-row-spacer,.gather-row-spacer-right{min-width:0}
.gather-expand-icon{
  width:32px!important;
  height:30px!important;
  min-height:30px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  justify-self:end;
  border:1px solid #28332c!important;
  border-radius:6px!important;
  background:#101612!important;
  color:#9ca8a0!important;
  pointer-events:none;
}
.gather-expand-icon .chev{display:block;transition:transform .18s ease;font-size:12px;line-height:1}
.gather-overview-card.expanded .gather-expand-icon .chev{transform:rotate(180deg)}
.gather-card-detail{border-top:1px solid #1d2720;background:#080c09}
.gather-card-detail[hidden]{display:none!important}
/* The expanded server row already identifies the Gather and its server state.
   Strip the old outer LIVE LOBBY shell/header so expansion shows only the
   actual lobby panel beneath the server row. */
.gather-card-detail #lobby{display:block!important;padding:10px!important;margin:0!important;min-height:0!important}
.gather-card-detail .live-lobby-shell{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.gather-card-detail .live-lobby-shell::before{display:none!important}
.gather-card-detail .live-lobby-topbar{display:none!important}
.gather-card-detail .live-lobby-shell .lobby{margin:0!important}


@media (max-width:1150px){
  .gather-server-row{grid-template-columns:minmax(245px,270px) 74px minmax(145px,165px) 88px 76px minmax(70px,1fr) 94px 92px 32px;gap:7px}
  .gather-row-spacer-right{display:none}
  .server-game-thumb{width:52px;height:31px;flex-basis:52px}
  .gather-server-name{font-size:13px}
}
@media (max-width:900px){
  .gather-server-row{grid-template-columns:minmax(225px,1.35fr) 72px 132px 82px 72px minmax(12px,.35fr) 84px 82px 32px;gap:7px}
  .gather-row-spacer-right{display:none}
}
@media (max-width:760px){
  .gather-server-row{
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px 10px;
    padding:9px;
  }
  .server-col-server{grid-column:1;grid-row:1}
  .server-col-status{grid-column:2;grid-row:1}
  .gather-expand-icon{grid-column:3;grid-row:1}
  .server-col-host{grid-column:1;grid-row:2}
  .server-col-players{grid-column:2;grid-row:2}
  .server-col-joined{grid-column:3;grid-row:2;justify-content:flex-end}
  .gather-row-spacer,.gather-row-spacer-right{display:none}
  .server-col-map{grid-column:1;grid-row:3;justify-content:flex-start;text-align:left}
  .server-col-score{grid-column:2;grid-row:3;justify-content:flex-start;text-align:left}
  .server-game-thumb{width:52px;height:30px;flex-basis:52px}
  .gather-server-name{font-size:12.5px}
  .server-inline-label{font-size:8.5px}
  .server-inline-stat strong{font-size:12.5px}
  .gather-card-detail #lobby{padding:7px!important}
}


/* ================================================================
   V7 — Best Plays of the Week homepage panel
   Match other homepage panel widths, with five evenly-spaced clips.
   ================================================================ */
.weekly-highlights-section{
  width:100%;
  box-sizing:border-box;
  margin:0 auto!important;
  padding:14px 18px!important;
}
/* Keep the heading left-aligned with the full-width weekly panel below. */
.weekly-highlights-external-heading{
  width:100%;
  box-sizing:border-box;
}
.weekly-highlights-grid{
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:15px;
  align-items:start;
}
.weekly-highlight-card{
  min-width:0;
}
.weekly-highlight-video-wrap{
  overflow:hidden;
  border:1px solid #253129;
  border-radius:8px;
  background:#030504;
  box-shadow:0 10px 25px rgba(0,0,0,.22);
}
.weekly-highlight-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  background:#030504;
  object-fit:cover;
}
.weekly-highlight-caption{
  margin-top:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  color:#f0f5f1;
  font-size:12.5px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.005em;
}
.weekly-highlight-caption strong{
  color:#98fb37;
  font-weight:1000;
}
.weekly-highlights-empty{
  grid-column:1/-1;
  padding:26px 12px;
  color:#6f7a73;
  text-align:center;
  font-size:11px;
  font-weight:800;
}
@media(max-width:1100px){
  .weekly-highlights-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .weekly-highlights-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .weekly-highlights-section{padding:14px 13px!important}
  .weekly-highlights-grid{grid-template-columns:1fr}
}


/* ================================================================
   V18 — subtle green glow around the four main homepage panels
   ================================================================ */
#weeklyHighlightsSection,
.gather-server-panel,
#warmupHome,
#matchesSection{
  border-color:rgba(57,224,95,.26)!important;
  box-shadow:
    0 0 0 1px rgba(57,224,95,.035),
    0 0 22px rgba(57,224,95,.075),
    0 18px 50px rgba(0,0,0,.23)!important;
}


/* ================================================================
   V20 — Gather homepage cards + full lobby tab view
   Layout-only refresh. Existing lobby/API behavior is preserved.
   ================================================================ */
.gather-server-panel{
  padding:17px 18px 18px!important;
}
.gather-server-panel .section-title-row{
  margin-bottom:18px;
}
.gather-card-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  width:100%;
}
.gather-overview-card{
  min-width:0;
  min-height:214px;
  display:flex;
  flex-direction:column;
  padding:17px 18px 15px;
  overflow:hidden;
  border:1px solid #28452f;
  border-radius:11px;
  background:linear-gradient(145deg,#0c130f,#090e0b);
  box-shadow:0 12px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.018);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease;
}
@media (hover:hover){
  .gather-overview-card:hover{
    border-color:#356740;
    background:linear-gradient(145deg,#0e1711,#0a100c);
    box-shadow:0 16px 32px rgba(0,0,0,.20),0 0 18px rgba(57,224,95,.035);
    transform:translateY(-1px);
  }
}
.gather-card-top{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:start;
  gap:14px;
  min-width:0;
}
.gather-overview-card .server-game-thumb{
  width:72px;
  height:42px;
  flex:0 0 72px;
  border-radius:7px;
  border-color:#314137;
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.gather-card-heading{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:2px;
}
.gather-overview-card .gather-server-name{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  font-size:15px;
  line-height:1.15;
  letter-spacing:-.015em;
}
.gather-card-state{
  min-height:16px;
  margin-top:5px;
  text-align:center;
  font-size:10px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.045em;
}
.gather-card-state.online{color:#8bdc39}
.gather-card-state.full{color:#ef5a5a}
.gather-card-state.ingame{color:#e5c64e}
.gather-card-state.offline{color:#ef5a5a}
.gather-card-stats{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:9px 18px;
  margin-top:17px;
  min-width:0;
}
.gather-card-stat{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}

.gather-card-stat .server-inline-label{
  flex:0 0 auto;
  color:#647068;
  font-size:10.5px;
}
.gather-card-stat strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#f4f7f5;
  font-size:11px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:.04em;
}
.gather-card-stat .server-players-value,
.gather-card-stat .server-score-value{font-variant-numeric:tabular-nums}
.gather-open-btn{
  align-self:center;
  min-width:142px;
  min-height:34px;
  margin-top:auto;
  padding:0 18px;
  border:1px solid #305f39;
  border-radius:999px;
  background:linear-gradient(180deg,#254d2d,#1d3d24);
  color:#e8eee9;
  font:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:.015em;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
@media (hover:hover){
  .gather-open-btn:hover{
    border-color:#449454;
    background:linear-gradient(180deg,#306439,#244d2c);
    box-shadow:0 8px 20px rgba(26,106,47,.16);
    transform:translateY(-1px);
  }
}
.gather-open-btn:focus-visible{outline:2px solid #67dd7e;outline-offset:2px}

/* When OPEN GATHER is pressed, the card grid is replaced by four evenly
   distributed lobby tabs and the existing lobby UI. */
.gather-card-list[hidden],
.gather-lobby-tabs[hidden],
.gather-lobby-mount[hidden]{display:none!important}
.gather-lobby-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,5.3vw,82px);
  align-items:end;
  width:100%;
  margin:0;
  padding:0;
}
.gather-lobby-tab{
  min-width:0;
  height:55px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:0 11px;
  border:1px solid #2b4932;
  border-bottom-color:#233c29;
  border-radius:9px 9px 0 0;
  background:#0b110d;
  color:#f2f6f3;
  font:inherit;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(0,0,0,.14);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.gather-lobby-tab img{
  width:54px;
  height:31px;
  display:block;
  object-fit:cover;
  border:1px solid #314137;
  border-radius:5px;
}
.gather-lobby-tab-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
  color:#f0f4f1;
  font-size:11px;
  line-height:1.15;
  font-weight:1000;
  letter-spacing:-.01em;
}
.gather-lobby-tab-name strong{color:#98fb37;font-weight:1000}
.gather-lobby-tab-count{
  color:#eef3ef;
  font-size:10px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.gather-lobby-tab.inLobby{
  border-color:#2f9a4a;
  border-bottom-color:#1e7335;
  background:linear-gradient(180deg,#174b27,#12391f);
  box-shadow:0 0 0 1px rgba(57,224,95,.16) inset,0 0 18px rgba(57,224,95,.13);
}
.gather-lobby-tab.inLobby.viewing{
  background:linear-gradient(180deg,#1a582d,#154323);
}
@media (hover:hover){
  .gather-lobby-tab:hover{
    border-color:#467050;
    background:#111b14;
  }
  .gather-lobby-tab.inLobby:hover{
    border-color:#43b85d;
    background:linear-gradient(180deg,#1b5b2f,#154524);
  }
}
.gather-lobby-tab:focus-visible{outline:2px solid #67dd7e;outline-offset:2px}
.gather-lobby-mount{
  width:100%;
  padding:8px;
  border:1px solid #223629;
  border-radius:0 0 9px 9px;
  background:#080d0a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}
.gather-lobby-mount #lobby{
  display:block!important;
  width:100%;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
.gather-lobby-mount .live-lobby-shell{
  width:100%;
  max-width:none;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.gather-lobby-mount .live-lobby-shell::before{display:none!important}
.gather-lobby-mount .live-lobby-topbar{display:none!important}
.gather-lobby-mount .live-lobby-shell .lobby{
  margin:0!important;
  padding:13px!important;
  border-color:#1f3025!important;
  border-radius:8px!important;
  background:#090f0b!important;
  box-shadow:none!important;
}
.expanded-gather-neighbors{display:none!important}

@media (max-width:1180px){
  .gather-card-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gather-lobby-tabs{gap:12px}
  .gather-lobby-tab{grid-template-columns:46px minmax(0,1fr) auto;padding:0 9px;gap:8px}
  .gather-lobby-tab img{width:46px;height:27px}
  .gather-lobby-tab-name{font-size:10.5px}
}
@media (max-width:720px){
  .gather-server-panel{padding:13px!important}
  .gather-server-panel .section-title-row{margin-bottom:13px}
  .gather-card-list{grid-template-columns:1fr;gap:13px}
  .gather-overview-card{min-height:202px;padding:15px}
  .gather-lobby-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:7px}
  .gather-lobby-tab{height:48px;border-radius:7px}
  .gather-lobby-tab.viewing{transform:none}
  .gather-lobby-mount{border-radius:8px;padding:6px}
}
@media (max-width:460px){
  .gather-lobby-tab{grid-template-columns:38px minmax(0,1fr);gap:7px;padding:0 7px}
  .gather-lobby-tab img{width:38px;height:23px}
  .gather-lobby-tab-count{display:none}
  .gather-lobby-tab-name{font-size:9.5px}
}



/* ================================================================
   V21 — Gather card/lobby visual polish
   ================================================================ */

/* Front-page gather cards: tighter vertical layout and 3-stat bottom row. */



.gather-card-top{
  grid-template-columns:68px minmax(0,1fr);
  gap:12px;
}
.gather-overview-card .server-game-thumb{
  width:68px;
  height:40px;
  flex-basis:68px;
}
.gather-card-stats{
  grid-template-columns:minmax(0,1.16fr) minmax(68px,.88fr) minmax(58px,.72fr);
  gap:7px 9px;
  margin-top:12px;
}



.gather-open-btn{
  align-self:center;
  min-width:0;
  min-height:28px;
  height:28px;
  margin-top:9px;
  padding:0 10px;
  border:1px solid #43b257;
  border-radius:6px;
  background:linear-gradient(135deg,#10291a,#0b1d12);
  color:#97fb7e;
  font-size:8.5px;
  font-weight:1000;
  letter-spacing:.075em;
  text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(112,255,121,.08) inset;
}
.gather-open-btn::after{
  content:"›";
  margin-left:5px;
  font-size:13px;
  line-height:1;
  transform:translateY(-1px);
}
@media (hover:hover){
  .gather-open-btn:hover{
    border-color:#61da73;
    background:linear-gradient(135deg,#14351f,#0f2718);
    color:#b6ff95;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
}

/* Lobby tabs: keep player count directly beside server name and increase legibility. */
.gather-lobby-tab{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  height:57px;
}
.gather-lobby-tab-name{
  flex:0 1 auto;
  width:auto;
  font-size:12.5px;
  line-height:1.15;
}
.gather-lobby-tab-count{
  flex:0 0 auto;
  margin-left:2px;
  font-size:11.5px;
  line-height:1;
}
.gather-lobby-tab.viewing{
  z-index:3;
  transform:none;
  margin-bottom:-1px;
  border-color:#2f9a4a;
  border-bottom-color:transparent;
}

/* Green connector/background between the active tab row and lobby, with
   the same family of green used by the joined tab. */
.gather-lobby-mount{
  position:relative;
  z-index:1;
  padding:8px;
  border:1px solid #2f9a4a;
  border-radius:0 0 9px 9px;
  background:#174b27;
  box-shadow:
    0 0 0 1px rgba(57,224,95,.10) inset,
    0 0 22px rgba(57,224,95,.07);
}
.gather-lobby-mount .live-lobby-shell .lobby{
  border-color:#243b2b!important;
  background:#090f0b!important;
}

/* VOTE MAP uses the same neutral styling as SCRAMBLE TEAMS. */
#voteMapBtn{
  border-color:#2a352e!important;
  background:#111713!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* START is neutral/grey while unavailable and turns green only when enabled. */
.live-lobby-shell #startBtn:disabled{
  border-color:#2a352e!important;
  background:#111713!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* STOP replaces START only during a live match. */
.live-lobby-shell #stopBtn{
  border-color:#a43a3a!important;
  background:linear-gradient(135deg,#7b2525,#5f1919)!important;
  color:#fff!important;
}
@media (hover:hover){
  .live-lobby-shell #stopBtn:hover:not(:disabled){
    border-color:#d55252!important;
    background:linear-gradient(135deg,#913030,#742020)!important;
  }
}

@media (max-width:1180px){
  .gather-lobby-tab{gap:8px}
  .gather-lobby-tab-name{font-size:11.5px}
  .gather-lobby-tab-count{font-size:10.75px}
}
@media (max-width:720px){
  .gather-overview-card{min-height:170px;padding:13px 14px 10px}
  .gather-card-stats{grid-template-columns:minmax(0,1.08fr) minmax(62px,.86fr) minmax(54px,.72fr)}
  .gather-lobby-tab{height:49px}
  .gather-lobby-tab-name{font-size:10.75px}
  .gather-lobby-tab-count{font-size:10px}
}
@media (max-width:460px){
  .gather-lobby-tab{display:grid;grid-template-columns:38px minmax(0,1fr);gap:7px}
  .gather-lobby-tab-count{display:none}
}



/* ================================================================
   V22 — Gather card proportions + joined-only lobby frame
   ================================================================ */

/* Front page: narrower cards, more breathing room, more compact height. */




/* HOST is its own row. MAP stays on the left; PLAYERS sits directly above
   SCORE on the same vertical line at the right. */






/* Small COPY-IP-style button, right aligned beneath the stats. */
.gather-open-btn{
  align-self:flex-end;
  height:28px;
  min-height:28px;
  margin-top:5px;
  padding:0 10px;
}


/* Tabs: larger server/count text; the count is centered in the free space
   between the server name and the right tab edge. */
.gather-lobby-tab{
  display:grid;
  grid-template-columns:54px max-content minmax(42px,1fr);
  align-items:center;
  gap:10px;
  height:59px;
}
.gather-lobby-tab-name{
  width:auto;
  font-size:13.5px;
  line-height:1.1;
}
.gather-lobby-tab-count{
  justify-self:center;
  margin-left:0;
  color:#f0f4f1;
  font-size:13.5px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:-.01em;
}

/* Simply viewing a lobby is neutral. The green tab + connector/frame only
   appears after this user has actually joined that gather. */
.gather-lobby-tab.viewing{
  border-color:#3d5d45;
  border-bottom-color:transparent;
  background:#101813;
  box-shadow:0 7px 18px rgba(0,0,0,.14);
}

.gather-lobby-mount{
  border-color:#2b4932;
  background:#0b110d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}


/* Team headers are neutral (knife round decides sides) and slightly lighter
   than the player rows. Team name is inline immediately after TEAM 1/2. */
.gather-lobby-mount .live-lobby-shell .team-head{
  justify-content:flex-start;
  border:1px solid #344038!important;
  background:#151d18!important;
  color:#f3f6f4!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.gather-lobby-mount .live-lobby-shell .team1-head,
.gather-lobby-mount .live-lobby-shell .team2-head{
  border-top:1px solid #344038!important;
}
.gather-lobby-mount .team-header-label{
  display:flex;
  align-items:center;
  min-width:0;
  gap:4px;
  white-space:nowrap;
}


@media (max-width:1180px){
  .gather-card-list{gap:20px;padding:0 8px}
  .gather-lobby-tab{grid-template-columns:46px max-content minmax(36px,1fr);gap:8px}
  .gather-lobby-tab-name,.gather-lobby-tab-count{font-size:12px}
}
@media (max-width:720px){
  .gather-card-list{padding:0;gap:13px}
  .gather-overview-card{min-height:154px;padding:13px 14px}
  .gather-card-stats{grid-template-columns:minmax(0,1fr) 106px;column-gap:12px}
  .gather-lobby-tab{height:50px}
  .gather-lobby-tab-name,.gather-lobby-tab-count{font-size:11px}
}
@media (max-width:460px){
  .gather-lobby-tab{grid-template-columns:38px minmax(0,1fr);gap:7px}
  .gather-lobby-tab-count{display:none}
}



/* ================================================================
   V23 — gather card alignment, dynamic team headers, host stack
   ================================================================ */

/* FRONT PAGE ---------------------------------------------------- */
.gather-server-panel .section-title-row{
  margin-bottom:9px!important;
}
.gather-card-list{
  gap:32px;
  padding:0 16px;
}
.gather-overview-card{
  min-height:146px;
  padding:14px 16px 14px;
}
.gather-overview-card .gather-server-name{
  font-size:18px;
  line-height:1.08;
  letter-spacing:-.018em;
}

/* HOST + PLAYERS share row 1; MAP + SCORE share row 2. */
.gather-card-stats{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(82px,.85fr);
  grid-template-rows:auto auto;
  column-gap:16px;
  row-gap:6px;
  margin-top:10px;
}
.gather-card-stat-wide{
  grid-column:1;
  grid-row:1;
}
.gather-card-stats > .gather-card-stat:nth-child(2){
  grid-column:1;
  grid-row:2;
}
.gather-card-stats > .gather-card-stat:nth-child(3){
  grid-column:2;
  grid-row:1;
}
.gather-card-stats > .gather-card-stat:nth-child(4){
  grid-column:2;
  grid-row:2;
}
.gather-card-stat .server-inline-label{
  font-size:12.25px;
}
.gather-card-stat strong{
  font-size:12.75px;
}

/* Align OPEN GATHER with the left content edge and keep equal-feeling
   top/side/bottom spacing inside the card. */
.gather-open-btn{
  align-self:flex-start;
  min-width:0;
  height:28px;
  min-height:28px;
  margin-top:8px;
  padding:0 10px;
}


/* LOBBY TABS / JOINED FRAME ------------------------------------ */
.gather-lobby-tab.inLobby,
.gather-lobby-tab.inLobby.viewing{
  border-color:#2a7540;
  border-bottom-color:transparent;
  background:linear-gradient(180deg,#143d22,#102f1a);
  box-shadow:0 0 0 1px rgba(57,224,95,.09) inset,0 0 14px rgba(57,224,95,.07);
}
.gather-lobby-mount.inLobby{
  border-color:#2a7540;
  background:#102f1a;
  box-shadow:0 0 0 1px rgba(57,224,95,.055) inset,0 0 16px rgba(57,224,95,.035);
}

/* TEAM HEADERS ------------------------------------------------- */
/* Light vertical colour washes: enough identity to read instantly,
   while keeping knife-round neutrality and text contrast. */
.gather-lobby-mount .live-lobby-shell .team-head{
  justify-content:flex-start;
  color:#f5f7f5!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.gather-lobby-mount .live-lobby-shell .team1-head{
  border:1px solid rgba(245,158,11,.34)!important;
  background:linear-gradient(
    180deg,
    rgba(245,158,11,.23) 0%,
    rgba(245,158,11,.105) 52%,
    rgba(245,158,11,.045) 100%
  )!important;
}
.gather-lobby-mount .live-lobby-shell .team2-head{
  border:1px solid rgba(59,130,246,.34)!important;
  background:linear-gradient(
    180deg,
    rgba(59,130,246,.23) 0%,
    rgba(59,130,246,.105) 52%,
    rgba(59,130,246,.045) 100%
  )!important;
}
.gather-lobby-mount .team-header-label{
  display:flex;
  align-items:center;
  min-width:0;
  white-space:nowrap;
}
.gather-lobby-mount .live-lobby-shell .team-name{
  flex:0 1 auto;
  min-width:0;
  text-align:left;
  color:#f5f7f5;
  font-size:inherit;
  line-height:inherit;
  font-weight:900;
  opacity:1;
}

/* HOST CONTROLS ------------------------------------------------ */
/* Only the host receives this class/placement. The four control slots are
   centered below LOBBY LOG and stack vertically in the requested order. */
.live-lobby-shell .lobby-action-bar.host-control-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:7px;
  margin:0;
  padding:0;
}
.live-lobby-shell .lobby-action-bar.host-control-stack .btn{
  flex:0 0 auto;
  width:min(100%,190px);
  min-width:0;
  max-width:190px;
  min-height:32px;
  margin:0;
}
.live-lobby-shell .lobby-action-bar.host-control-stack .hostOnly.show{
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:1180px){
  .gather-card-list{gap:22px;padding:0 8px}
  .gather-overview-card .gather-server-name{font-size:16.5px}
  .gather-card-stat .server-inline-label{font-size:11.5px}
  .gather-card-stat strong{font-size:12px}
}
@media (max-width:720px){
  .gather-card-list{padding:0;gap:13px}
  .gather-overview-card{min-height:144px;padding:13px 14px}
  .gather-card-stats{grid-template-columns:minmax(0,1fr) 100px;column-gap:12px}
  .gather-overview-card .gather-server-name{font-size:16px}
  .gather-card-stat .server-inline-label{font-size:11px}
  .gather-card-stat strong{font-size:11.5px}
}



/* ================================================================
   V24 — external homepage section headings + neutral OPEN GATHER
   ================================================================ */

/* Standalone headings between the large homepage panels. */
.external-section-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:13px 0;
  color:#eef4ef;
  font-size:16px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.105em;
  text-align:center;
}

/* Make the heading sit equally between the box above and the box below. */
#weeklyHighlightsSection{
  margin-bottom:0;
}
.server-overview-stack{
  margin:0;
}
.gather-server-panel{
  margin-bottom:18px;
  padding-top:14px!important;
  padding-bottom:14px!important;
}
#warmupHome{
  margin-bottom:0;
}

/* With the headings removed from inside these panels, keep true top/bottom
   padding symmetry inside the boxes. */
.gather-server-panel .gather-card-list{
  margin:0;
}
#warmupHome{
  padding-top:17px!important;
  padding-bottom:17px!important;
}
#matchesSection{
  padding-top:17px!important;
  padding-bottom:17px!important;
}

/* OPEN GATHER: centered, always-active neutral control matching the
   VOTE MAP visual language rather than the green COPY-IP styling. */
.gather-open-btn{
  align-self:center!important;
  min-width:136px;
  height:32px;
  min-height:32px;
  margin-top:8px;
  padding:0 13px;
  border:1px solid #2a352e!important;
  border-radius:7px;
  background:#111713!important;
  color:#fff!important;
  font-size:9.5px;
  font-weight:950;
  letter-spacing:.045em;
  text-transform:uppercase;
  box-shadow:none!important;
  opacity:1!important;
  cursor:pointer!important;
}
.gather-open-btn::after{content:none!important}
.gather-open-btn:disabled{
  opacity:1!important;
  cursor:pointer!important;
}
@media (hover:hover){
  .gather-open-btn:hover{
    border-color:#46544b!important;
    background:#171f1a!important;
    color:#fff!important;
    box-shadow:none!important;
    transform:translateY(-1px);
  }
}

@media (max-width:720px){
  .external-section-heading{
    margin:11px 0;
    font-size:14px;
    letter-spacing:.085em;
  }
}



/* ================================================================
   V25 — unified servers panel + heading/lobby quality polish
   ================================================================ */

/* EXTERNAL SECTION HEADINGS ------------------------------------ */
/* Twice the space to the panel above as to the panel below. */
.external-section-heading{
  justify-content:flex-start!important;
  gap:7px;
  margin:26px 0 13px!important;
  padding-left:18px;
  color:#eef4ef;
  font-size:16px;
  font-weight:1000;
  letter-spacing:.095em;
  text-align:left;
}
.external-section-heading .external-heading-bar{
  color:var(--v10-green);
  font-weight:1000;
  text-shadow:0 0 10px rgba(57,224,95,.24);
}

/* Let the heading itself own the inter-section spacing. */
#weeklyHighlightsSection{margin-bottom:0!important}
.gather-server-panel{margin-bottom:0!important}

/* GATHER + WARMUP SERVERS IN ONE PANEL ------------------------- */
.gather-server-panel{
  padding-top:14px!important;
  padding-bottom:14px!important;
}
.gather-overview-card{
  border-color:#202a23!important;
  background:#0b100d!important;
}
@media (hover:hover){
  .gather-overview-card:hover{
    border-color:#2b3b31!important;
    background:#0e1611!important;
    box-shadow:0 16px 32px rgba(0,0,0,.20),inset 3px 0 0 rgba(57,224,95,.20)!important;
  }
}

/* Warmup cards are compact content-width boxes centered below the four
   Gather cards. Gap above = 2x the panel's 14px bottom padding. */
.embedded-warmup-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100%;
  margin:28px 0 0;
  padding:0;
}
#gatherCardList[hidden] + .embedded-warmup-row{
  display:none!important;
}
.embedded-warmup-row .prac-hero-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:max-content;
  max-width:100%;
  min-height:58px;
  gap:12px;
  padding:8px 10px;
  border:1px solid #202a23;
  border-radius:8px;
  background:#0b100d;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
@media (hover:hover){
  .embedded-warmup-row .prac-hero-item:hover{
    background:#0e1611;
    border-color:#2b3b31;
    box-shadow:inset 3px 0 0 rgba(57,224,95,.35);
  }
}
.embedded-warmup-row .compact-thumb-wrap{
  order:0;
  flex:0 0 70px;
  width:70px!important;
  height:40px!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid #263129;
  border-radius:6px;
  background:#050805;
}
.embedded-warmup-row .prac-hero-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.embedded-warmup-row .compact-server-row{
  order:1;
  flex:0 1 auto;
  width:auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:14px;
  margin:0!important;
  padding:0!important;
}
.embedded-warmup-row .prac-hero-name{
  flex:0 1 auto;
  min-width:0;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
}
.embedded-warmup-row .compact-copy-btn{
  flex:0 0 auto;
  min-height:28px;
  padding:0 11px;
  margin:0;
  font-size:8.5px;
}

/* LOBBY -------------------------------------------------------- */
/* Keep the outer tab-to-lobby connector/frame and joined fill exactly as
   before, but remove the extra inner lobby outline. */
.gather-lobby-mount .live-lobby-shell .lobby{
  border-color:transparent!important;
}

/* For the host, preserve the console's normal height and extend the center
   column/lobby downward to make room for the vertical action buttons. */
.live-lobby-shell .lobby-grid.host-controls-extended .mid{
  height:auto;
}
.live-lobby-shell .lobby-grid.host-controls-extended .lobby-activity-box{
  flex:0 0 var(--host-lobby-log-height,150px);
  height:var(--host-lobby-log-height,150px);
  min-height:var(--host-lobby-log-height,150px);
  max-height:var(--host-lobby-log-height,150px);
}
.live-lobby-shell .lobby-grid.host-controls-extended .lobby-action-bar.host-control-stack{
  flex:0 0 auto;
  margin-top:0;
}

/* Responsive warmup layout. */
@media (max-width:850px){
  .embedded-warmup-row{
    flex-wrap:wrap;
    gap:12px;
  }
}
@media (max-width:620px){
  .external-section-heading{
    margin:22px 0 11px!important;
    padding-left:13px;
    font-size:14px;
  }
  .embedded-warmup-row{
    margin-top:26px;
  }
  .embedded-warmup-row .prac-hero-item{
    width:min(100%,330px);
  }
}



/* ================================================================
   V26 — static site background
   ================================================================ */

body::before{
  background-image:none!important;
}



/* ================================================================
   V27 — true flat background + softer site glow
   ================================================================ */

/* Force the page canvas to one single solid colour. Older homepage CSS
   created fixed left/right pseudo-elements; disabling BOTH removes the
   hard vertical glow cut visible while scrolling. */
html,
body{
  background:#0e140a!important;
  background-color:#0e140a!important;
  background-image:none!important;
  background-attachment:initial!important;
}

body::before,
body::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:0!important;
}

/* Keep the green identity around the large homepage panels, but make the
   glow much quieter and less halo-like. */
#weeklyHighlightsSection,
.gather-server-panel,
#matchesSection{
  border-color:rgba(57,224,95,.18)!important;
  box-shadow:
    0 0 0 1px rgba(57,224,95,.018),
    0 0 10px rgba(57,224,95,.028),
    0 12px 34px rgba(0,0,0,.18)!important;
}

/* Slightly reduce a few decorative green glows so the flat background
   remains dominant without removing the site's green accent entirely. */
.external-section-heading .external-heading-bar{
  text-shadow:0 0 6px rgba(57,224,95,.16)!important;
}
.content-panel .h1::before{
  box-shadow:0 0 8px rgba(57,224,95,.16)!important;
}
.brand-mark{
  box-shadow:
    0 0 16px rgba(57,224,95,.07),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
}



/* ================================================================
   V28 — player-row badges/actions quality pass
   ================================================================ */

:root{
  --lobby-mini-control-w:72px;
  --lobby-mini-control-h:34px;
}

/* Occupied-slot player name is rendered as text so the role star can sit
   immediately after it. The original readonly input stays hidden/in place
   for all existing lobby logic. */
.live-lobby-shell .slot .player-name-display{
  flex:0 1 auto;
  min-width:0;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:13.5px;
  line-height:1.25;
  font-weight:720;
  letter-spacing:0;
}
.live-lobby-shell .slot .player-name-display.profile-clickable{
  cursor:pointer;
}
.live-lobby-shell .slot .player-name-display.profile-clickable:hover{
  color:#dff7e4;
}

/* Admin role marker: one star directly after the name.
   Normal admin = green; owner/Supreme Leader = gold. */
.admin-star{
  flex:0 0 auto;
  display:inline-block;
  margin-left:4px;
  color:#ffffff;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  text-shadow:0 0 4px rgba(255,255,255,.14);
}
.admin-star.owner{
  color:#f2c94c;
  text-shadow:0 0 5px rgba(242,201,76,.20);
}

/* HOST flag: use the same bright green family as SERVER # in the lobby tab. */
.host-flag{
  flex:0 0 auto!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 7px;
  margin-left:6px;
  border:1px solid rgba(152,251,55,.38);
  border-radius:6px;
  background:#111a0d;
  color:#98fb37;
  font-size:10px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.045em;
  text-transform:uppercase;
  box-shadow:none;
}

/* GATHERS/KD box: same neutral background/outline family as SCRAMBLE TEAMS.
   Keep its existing small two-line text size. */
.live-lobby-shell .inhouse-pill{
  flex:0 0 var(--lobby-mini-control-w);
  width:var(--lobby-mini-control-w);
  min-width:var(--lobby-mini-control-w);
  max-width:var(--lobby-mini-control-w);
  height:var(--lobby-mini-control-h);
  min-height:var(--lobby-mini-control-h);
  max-height:var(--lobby-mini-control-h);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:1px;
  padding:0 4px;
  margin:0;
  border:1px solid #2a352e;
  border-radius:6px;
  background:#111713;
  color:#d6ddd8;
  box-shadow:none;
  font-size:10px;
  font-weight:800;
  line-height:1.08;
  white-space:nowrap;
  box-sizing:border-box;
}
.live-lobby-shell .inhouse-pill strong{
  color:#fff;
  font-weight:950;
}

/* MAKE HOST / MOVE / KICK: exact same outer dimensions as GATHERS/KD. */
.live-lobby-shell .slot .hostbtn,
.live-lobby-shell .slot .move,
.live-lobby-shell .slot .kick{
  flex:0 0 var(--lobby-mini-control-w)!important;
  width:var(--lobby-mini-control-w)!important;
  min-width:var(--lobby-mini-control-w)!important;
  max-width:var(--lobby-mini-control-w)!important;
  height:var(--lobby-mini-control-h)!important;
  min-height:var(--lobby-mini-control-h)!important;
  max-height:var(--lobby-mini-control-h)!important;
  padding:0 4px!important;
  border-radius:6px!important;
  box-sizing:border-box;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:9.5px!important;
  line-height:1!important;
  font-weight:900;
  letter-spacing:.025em!important;
  text-transform:uppercase;
}

/* MOVE now uses the same normal color as MAKE HOST. */
.live-lobby-shell .slot .hostbtn,
.live-lobby-shell .slot .move{
  border-color:#3a3333!important;
  background:#2a2525!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Keep selection/swap feedback visible when MOVE is actively being used. */
.live-lobby-shell .slot .move.selected{
  border-color:#705f2a!important;
  background:#332d18!important;
  color:#f4dc87!important;
}
.live-lobby-shell .slot .move.swap-target{
  border-color:#2b7040!important;
  background:#15321f!important;
  color:#9be4ac!important;
}

/* KICK keeps its functionally distinct appearance, but matches dimensions. */
.live-lobby-shell .slot .kick{
  border-color:#603232!important;
  background:#2c1818!important;
  color:#f1c6c6!important;
}

/* Existing JS sets display:inline-block; make visible controls use flex so
   their labels remain perfectly centered in the shared dimensions. */
.live-lobby-shell .slot .hostbtn[style*="inline-block"],
.live-lobby-shell .slot .move[style*="inline-block"],
.live-lobby-shell .slot .kick[style*="inline-block"]{
  display:inline-flex!important;
}

/* Keep spacing consistent now that all utility boxes share one size. */
.live-lobby-shell .slot{
  gap:6px;
}
.live-lobby-shell .slot .badges{
  margin-left:6px;
  gap:5px;
}



/* ================================================================
   V30 — right-aligned player utility controls
   ================================================================ */

/* Keep player name / star / HOST on the left, and push the utility group
   all the way to the right. The row's own right padding then matches the
   player name's left padding naturally. */
.live-lobby-shell .slot .slot-right-controls{
  flex:0 0 auto;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-width:0;
}

/* Requested order:
   MAKE HOST -> MOVE -> KICK -> GATHERS/KD */
.live-lobby-shell .slot .slot-right-controls .hostbtn{order:1}
.live-lobby-shell .slot .slot-right-controls .move{order:2}
.live-lobby-shell .slot .slot-right-controls .kick{order:3}
.live-lobby-shell .slot .slot-right-controls .badges{order:4}

/* GATHERS/KD gets a little more breathing room so neither text line
   approaches the border. */
.live-lobby-shell .slot .slot-right-controls .inhouse-pill{
  flex:0 0 86px!important;
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  padding-left:6px!important;
  padding-right:6px!important;
}

/* Action buttons are now content-width with exactly 2px horizontal padding
   on each side of their text, while retaining the common 34px height. */
.live-lobby-shell .slot .slot-right-controls .hostbtn,
.live-lobby-shell .slot .slot-right-controls .move,
.live-lobby-shell .slot .slot-right-controls .kick{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:var(--lobby-mini-control-h)!important;
  min-height:var(--lobby-mini-control-h)!important;
  max-height:var(--lobby-mini-control-h)!important;
  padding-left:4px!important;
  padding-right:4px!important;
  white-space:nowrap;
}

/* The badge container itself should add no extra offset; the slot's own
   padding controls the final distance to the right border. */
.live-lobby-shell .slot .slot-right-controls .badges{
  flex:0 0 auto;
  margin-left:0!important;
  gap:0;
}



/* ================================================================
   V32 — dynamic Gather homepage cards/buttons
   ================================================================ */

/* Empty lobby = normal card. Any players = subtle green tint.
   Your own lobby gets only a small extra lift, still intentionally restrained. */
.gather-overview-card{
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.gather-overview-card.has-players{
  background:#0d1710!important;
  border-color:#26392b!important;
  box-shadow:
    inset 0 0 0 1px rgba(57,224,95,.018),
    0 10px 24px rgba(0,0,0,.15)!important;
}

.gather-overview-card.has-players.your-lobby{
  background:#0e1b12!important;
  border-color:#2b4431!important;
  box-shadow:
    inset 0 0 0 1px rgba(57,224,95,.03),
    0 10px 26px rgba(0,0,0,.16)!important;
}

/* The button remains centered but grows to fit the current label. */
.gather-open-btn{
  width:auto!important;
  min-width:146px!important;
  max-width:none!important;
  padding-left:18px!important;
  padding-right:18px!important;
  white-space:nowrap;
}

/* START A GATHER and OPEN LOBBY retain the existing neutral button style. */
.gather-open-btn:not(.your-lobby){
  border-color:#2a352e!important;
  background:#111713!important;
  color:#fff!important;
}

/* Your own lobby gets a slightly greener button than the surrounding card,
   without becoming a bright green CTA. */
.gather-open-btn.your-lobby{
  border-color:#31553a!important;
  background:#14271a!important;
  color:#eaf7ed!important;
  box-shadow:inset 0 0 0 1px rgba(57,224,95,.025)!important;
}

@media (hover:hover){
  .gather-open-btn:not(.your-lobby):hover{
    border-color:#46544b!important;
    background:#171f1a!important;
  }
  .gather-open-btn.your-lobby:hover{
    border-color:#3b6846!important;
    background:#18301f!important;
    color:#f3fff5!important;
  }
}



/* ================================================================
   V34 — lobby log capitalization + red move/swap events
   ================================================================ */
.lobby-activity-title,
.lobby-activity-feed{
  text-transform:uppercase;
}



/* ================================================================
   V35 — Gather status alignment + server health UX
   ================================================================ */

/* On full desktop cards, center one shared text/action column in the whole
   card. The thumbnail stays anchored on the left. This makes:
     GATHER SERVER #
     STATUS: ...
     action button
   begin on the exact same vertical line. */
@media (min-width:1401px){
  .gather-card-top{
    position:relative;
    display:flex!important;
    align-items:flex-start;
    justify-content:center;
    min-height:42px;
  }
  .gather-card-top .server-game-thumb{
    position:absolute;
    left:0;
    top:0;
  }
  .gather-card-heading{
    flex:0 0 174px;
    width:174px;
    min-width:174px;
    align-items:flex-start!important;
  }
}

/* On narrower layouts keep the existing thumbnail-safe structure, but make
   the text itself left aligned. */
.gather-card-heading{
  align-items:flex-start!important;
}
.gather-overview-card .gather-server-name{
  text-align:left!important;
}
.gather-card-state{
  width:100%;
  text-align:left!important;
  color:#fff!important;
}
.gather-card-state .gather-status-prefix{
  color:#fff!important;
}
.gather-card-state.ready .gather-status-value,
.gather-card-state.lobby-started .gather-status-value{
  color:#8bdc39!important;
}
.gather-card-state.full .gather-status-value,
.gather-card-state.offline .gather-status-value{
  color:#ef5a5a!important;
}
.gather-card-state.ingame .gather-status-value{
  color:#e5c64e!important;
}

/* The centered front-page action button shares the same baseline width as the
   desktop heading/status column, and may still grow if a future label needs it. */
.gather-open-btn{
  min-width:174px!important;
  width:auto!important;
  max-width:none!important;
}

/* Empty + offline server: START A GATHER is visibly blocked. Existing lobbies
   remain openable so players can still read the lobby console/status. */
.gather-open-btn.server-offline:disabled{
  border-color:#7b3434!important;
  background:#351818!important;
  color:#ffb7b7!important;
  opacity:1!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}
@media (hover:hover){
  .gather-open-btn.server-offline:disabled:hover{
    border-color:#7b3434!important;
    background:#351818!important;
    color:#ffb7b7!important;
    transform:none!important;
  }
}

/* Inside an existing lobby, a confirmed GET5 outage overrides the normal
   neutral disabled START GATHER style with a clear red server-health state. */
.live-lobby-shell #startBtn.server-offline:disabled{
  border-color:#8d3c3c!important;
  background:#471d1d!important;
  color:#ffd0d0!important;
  opacity:1!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}


/* ================================================================
   V36 — front-page Gather title/status alignment
   Keep the thumbnail at the card's normal left padding, then use the
   same 16px spacing before the left-aligned title/status column.
   ================================================================ */
@media (min-width:721px){
  .gather-server-panel .gather-card-top{
    display:grid!important;
    grid-template-columns:68px minmax(0,1fr);
    align-items:start;
    justify-content:initial;
    gap:16px;
    min-height:42px;
  }
  .gather-server-panel .gather-card-top .server-game-thumb{
    position:static;
    left:auto;
    top:auto;
  }
  .gather-server-panel .gather-card-heading{
    flex:initial;
    width:auto;
    min-width:0;
    align-items:flex-start!important;
  }
}


/* ================================================================
   V40 — Left-aligned homepage headings on full-width panels.
   Weekly highlights remain visible while viewing a gather lobby.
   ================================================================ */
#homeView > .external-section-heading{
  justify-content:flex-start!important;
  text-align:left;
}
#homeView > #weeklyHighlightsHeading{
  width:100%;
}


/* ================================================================
   V41 — Standalone homepage PRACTICE SERVERS + matches-only route
   Move the original warmup cards without replacing their actions.
   ================================================================ */
#practiceServersHome{
  width:min(100%,840px);
  box-sizing:border-box;
  margin:0 auto!important;
  padding:14px 16px!important;
  border-color:rgba(57,224,95,.18)!important;
  box-shadow:0 0 0 1px rgba(57,224,95,.018),
             0 0 10px rgba(57,224,95,.028),
             0 12px 34px rgba(0,0,0,.18)!important;
}
#homeView > #practiceServersHeading{
  width:min(100%,840px);
  box-sizing:border-box;
  margin:26px auto 13px!important;
  padding:0!important;
  justify-content:center!important;
  text-align:center!important;
}
#practiceServersHome .embedded-warmup-row{
  width:100%;
  margin:0!important;
  gap:14px;
  justify-content:center;
}
#practiceServersHome .prac-hero-item{min-width:0;}
@media(max-width:850px){
  #practiceServersHome .embedded-warmup-row{gap:12px;}
}
@media(max-width:620px){
  #homeView > #practiceServersHeading{margin-top:22px!important;}
  #practiceServersHome{padding:13px!important;}
  #practiceServersHome .embedded-warmup-row{margin:0!important;}
}
/* The practice page is now a separate route; the old lobby-hide rule is removed. */

/* Recent Matches in navigation opens a separate, matches-only view. */
body.showing-recent-matches #homeView > :not(#recentMatchesHeading):not(#matchesSection){
  display:none!important;
}
body.showing-recent-matches #homeView > #recentMatchesHeading{
  margin-top:26px!important;
}



/* ================================================================
   Phase UI — compact Highlights aftermovies + PRAC-only view
   Kept at the end to preserve existing page/feature cascade.
   ================================================================ */
/* Dedicated PRAC SERVERS page reuses the original cards and wake/copy buttons. */
.practice-page{min-height:calc(100vh - 170px);padding:36px 0 52px;}
#practiceView > #practiceServersHeading{
  width:min(100%,840px);
  margin:10px auto 14px!important;
  padding:0!important;
  justify-content:center!important;
  text-align:center!important;
}
#practiceView #practiceServersHome{
  width:min(100%,840px);
  margin:0 auto!important;
  padding:14px 16px!important;
}
/* The new page owns the practice heading/box; lobby visibility is automatic
   because practiceView is hidden outside the practice route. */

/* Aftermovies sit above the Highlights library and use compact cards. */
#highlightsView > #aftermoviesView{
  min-height:0;
  padding:0 0 22px;
  margin:0 0 26px;
  border-bottom:1px solid #263129;
}
.highlights-aftermovies .aftermovies-page-head{
  margin:0 0 12px;
  padding:0;
  border:0;
  align-items:center;
}
.highlights-aftermovies .aftermovies-page-kicker{font-size:9px;}
.highlights-aftermovies h2{
  margin:4px 0 5px;
  color:#f7faf8;
  font-size:19px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:.025em;
}
.highlights-aftermovies .aftermovies-page-head p{
  font-size:10px;
  line-height:1.4;
}
.highlights-aftermovies .aftermovies-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,240px));
  gap:13px;
  justify-content:start;
}
.highlights-aftermovies .aftermovie-card{
  border-radius:8px;
  box-shadow:none;
}
.highlights-aftermovies .aftermovie-meta{padding:8px 10px 10px;}
.highlights-aftermovies .aftermovie-title{font-size:11px;margin-top:3px;}
.highlights-aftermovies .aftermovie-month{font-size:9px;}
.highlights-aftermovies .aftermovie-video{aspect-ratio:16/9;}
.highlights-aftermovies .empty-panel{padding:12px 14px;font-size:12px;}
/* Four highlights per row on desktop, adapting to smaller screens. */
#highlightsView .highlights-library-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}
@media(max-width:1120px){
  #highlightsView .highlights-library-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:800px){
  #highlightsView .highlights-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:540px){
  #highlightsView .highlights-library-grid{grid-template-columns:1fr;}
  .practice-page{padding:18px 0 36px;}
  #practiceView > #practiceServersHeading{margin:15px auto 12px!important;}
  .highlights-aftermovies .aftermovies-grid{grid-template-columns:minmax(0,1fr);}
  .highlights-aftermovies .aftermovie-card{max-width:290px;}
  .highlights-aftermovies h2{font-size:18px;}
}

/* ================================================================
   Phase 4 — responsive profile, practice power, gallery refinement
   ================================================================ */
body.gather-lobby-active #weeklyHighlightsHeading,
body.gather-lobby-active #weeklyHighlightsSection{display:none!important}

#practiceView #practiceServersHome{width:min(100%,1100px);padding:0!important;background:transparent;border:0;box-shadow:none}
#practiceView > #practiceServersHeading{width:min(100%,1100px)}
.practice-page-intro{text-align:center;color:#a6b4aa;font-size:13px;line-height:1.6;max-width:730px;margin:0 auto 24px}
.practice-page-intro strong{color:#7cdf91}
#practiceView .embedded-warmup-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
#practiceView .prac-hero-item{display:flex;flex-direction:column;gap:13px;min-width:0;padding:20px;border:1px solid #2b3a2e;border-radius:14px;background:linear-gradient(150deg,#151d17,#0b100d);box-shadow:0 18px 45px rgba(0,0,0,.20)}
#practiceView .prac-hero-name{margin:0;text-align:left;font-size:clamp(19px,2vw,25px);line-height:1.15;font-weight:950}
#practiceView .prac-hero-name span{color:var(--v10-green)}
#practiceView .prac-hero-thumb-wrap{display:block;width:100%;height:auto;aspect-ratio:16/9;overflow:hidden;border:1px solid #263429;border-radius:10px;padding:0}
#practiceView .prac-hero-thumb{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#practiceView .prac-info{color:#a0ada3;font-size:13px;line-height:1.55;margin:0;min-height:64px}
#practiceView .prac-info strong{color:#78df8d}
#practiceView .prac-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#practiceView .prac-live-status{color:#909c92;font-size:10px;font-weight:850;letter-spacing:.04em}
#practiceView .prac-live-status[data-state="online"]{color:#7ce994}
#practiceView .prac-live-status[data-state="starting"]{color:#e6c37c}
#practiceView .prac-power-btn{min-width:145px;height:38px;padding:0 15px;border:1px solid #3a9a55;border-radius:8px;background:#143b23;color:#b4ffc3;font-size:11px;font-weight:950;letter-spacing:.045em;cursor:pointer}
#practiceView .prac-power-btn:disabled{opacity:.62;cursor:wait}

#highlightsView .highlights-aftermovies .aftermovies-page-head,
#highlightsView .highlights-aftermovies .aftermovies-page-head>div{text-align:center;justify-content:center;width:100%}
#highlightsView .highlights-aftermovies .aftermovies-page-head p{margin:0 auto}
#highlightsView .highlights-aftermovies .aftermovies-grid{grid-template-columns:repeat(auto-fit,minmax(230px,290px));justify-content:center;gap:17px}
#highlightsView .highlights-aftermovies h2{font-size:23px}
#highlightsView .highlights-aftermovies .aftermovie-meta{text-align:center;padding:10px 12px 12px}
#highlightsView .highlights-aftermovies .aftermovie-title{font-size:13px}

#profileView .profile-top{grid-template-columns:minmax(210px,.75fr) minmax(0,2.25fr);gap:12px;margin-bottom:12px}
#profileView .profile-card{padding:13px;gap:11px}
#profileView .profile-avatar{width:57px;height:57px;border-radius:10px}
#profileView .profile-name{font-size:19px}
#profileView .profile-steamid{font-size:10px;overflow-wrap:anywhere}
#profileView .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#profileView .stat-card{min-width:0;padding:11px 12px;border:1px solid #263329;border-radius:11px;background:linear-gradient(145deg,rgba(13,18,15,.96),rgba(8,12,9,.98));box-shadow:0 18px 50px rgba(0,0,0,.23);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#profileView .stat-value{font-size:24px;margin-top:3px}
#profileView .stat-label{color:#7e8694;font-size:10px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
#profileView .stat-sub{margin-top:4px;color:#7f8794;font-size:10px;font-weight:800}
/* Phase 4D — summary cards use Recent Matches styling and cleaner copy. */
#profileView .stat-feature{gap:0}
#profileView .stat-feature-copy{display:flex;flex:1;flex-direction:column;justify-content:center;min-width:0}
#profileView .stat-feature-game{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
#profileView .stat-feature .stat-value{display:flex;flex-wrap:wrap;gap:0 .35em;align-items:baseline;line-height:1.15;color:#f2f5f3;overflow-wrap:anywhere}
#profileView .stat-feature .stat-sub{display:flex;flex-wrap:wrap;gap:0 .35em;align-items:baseline;line-height:1.35}
#profileView .stat-feature .stat-sub-value{color:#f2f5f3}
#profileView .stat-feature-empty{font-size:21px}
#profileView .profile-feature-btn{flex:0 0 auto;align-self:center;min-height:34px;margin:0;border:1px solid #348950;border-radius:7px;padding:7px 11px;background:#14341f;color:#86e79b;font-size:10px;font-weight:950;cursor:pointer}
#profileView .profile-feature-btn:hover{background:#1d472c}
#profileView .profile-feature-player{color:#8ceb9f;text-decoration:none;font:inherit;letter-spacing:inherit;overflow-wrap:anywhere}
#profileView .profile-feature-player:hover{text-decoration:underline}
#profileView .profile-highlights-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:12px}
#profileView .profile-highlights-grid > *{flex:0 1 calc((100% - 44px)/5);width:calc((100% - 44px)/5);min-width:0;max-width:none}
#profileView .profile-highlights-card{margin-top:12px}
.profile-scoreboard-modal{width:min(920px,calc(100vw - 32px));max-height:min(86vh,850px);overflow:auto;padding:22px;border:1px solid #35503c;border-radius:14px;background:#11171a;color:#eef5ef;box-shadow:0 25px 75px rgba(0,0,0,.8)}
.profile-scoreboard-modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
.profile-scoreboard-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.profile-modal-close{background:#202925;color:#e0f5e4;border:1px solid #3a5740;border-radius:7px;padding:8px 12px;cursor:pointer}
.profile-scoreboard-summary{color:#7f9989;font-size:11px;margin-top:14px}
.profile-scoreboard-teams{font-size:20px;font-weight:950;margin:6px 0 15px}
.profile-scoreboard-scroll{overflow-x:auto}
.profile-scoreboard-modal table{min-width:510px;width:100%}
@media(max-width:1250px){
  #profileView .profile-top{grid-template-columns:1fr}
  #profileView .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:880px){
  #profileView .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #profileView .profile-highlights-grid > *{flex-basis:calc((100% - 22px)/3);width:calc((100% - 22px)/3)}
}
@media(max-width:700px){
  #practiceView .embedded-warmup-row{grid-template-columns:1fr}
  #practiceView .prac-hero-item{padding:15px}
  #practiceView .prac-info{min-height:0}
}
@media(max-width:570px){
  /* Stack the BEST GAME action below its numbers on narrow phones. */
  #profileView .stat-feature-game{flex-direction:column;align-items:stretch;justify-content:center;gap:7px}
  #profileView .stat-feature-game .profile-feature-btn{align-self:flex-start}
  #profileView .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #profileView .profile-highlights-grid > *{flex-basis:calc((100% - 11px)/2);width:calc((100% - 11px)/2)}
  #highlightsView .highlights-aftermovies .aftermovies-grid{grid-template-columns:minmax(0,1fr)}
  #highlightsView .highlights-aftermovies .aftermovie-card{max-width:320px;width:100%;margin:0 auto}
}
#profileView .profile-highlights-more-row[hidden]{display:none!important}

/* ================================================================
   Phase 4B — compact Players directory, styled like Recent Matches.
   Vertical column rules and horizontal row rules are both visible.
   ================================================================ */
#playersView{
  box-sizing:border-box;
  width:100%;
  max-width:1120px;
  margin-inline:auto;
}
#playersView .players-card{
  overflow:hidden;
  border:1px solid #263329;
  border-radius:11px;
  background:linear-gradient(145deg,rgba(13,18,15,.96),rgba(8,12,9,.98));
  box-shadow:0 18px 50px rgba(0,0,0,.23);
}
#playersView .players-toolbar{
  padding:12px 14px;
  border-bottom:1px solid #263329;
  background:rgba(14,20,16,.65);
  flex-wrap:wrap;
}
#playersView .players-search{min-width:235px;max-width:390px}
#playersView .players-table-scroll{max-width:100%;overflow-x:auto}
#playersView .players-table{width:100%;min-width:900px;border-collapse:separate;border-spacing:0}
#playersView .players-table th,
#playersView .players-table td{
  box-sizing:border-box;
  padding:11px 12px;
  border-bottom:1px solid #223027;
  border-right:1px solid #223027;
  vertical-align:middle;
  white-space:nowrap;
}
#playersView .players-table th:last-child,
#playersView .players-table td:last-child{border-right:0}
#playersView .players-table th{
  background:#101a13;
  color:#8f9c92;
  font-size:10px;
  font-weight:950;
  letter-spacing:.065em;
}
#playersView .players-table tbody tr:last-child td{border-bottom:0}
#playersView .players-table tbody tr:nth-child(even){background:rgba(48,70,51,.08)}
#playersView .players-table tbody tr:hover td{background:rgba(74,136,83,.13)}
#playersView .players-table th:first-child,
#playersView .players-table td:first-child{width:26%;min-width:215px}
#playersView .players-table th:not(:first-child),
#playersView .players-table td:not(:first-child){text-align:center}
#playersView .players-table .player-directory-name{font-size:12px}
#playersView .players-table .player-directory-id{font-size:9px;color:#788b7c}
#playersView .players-table .players-numeric{font-weight:850;color:#eaf3ec;font-variant-numeric:tabular-nums}
#playersView .players-table .players-date{color:#bccbbf;font-variant-numeric:tabular-nums}
#playersView .players-table .players-map{font-weight:900;color:#9fe1b0;font-size:11px}
#playersView .players-table .admin-star{font-size:16px;margin:0}
#playersView .players-table .players-no-role{color:#536359}
#playersView .players-match-btn{
  cursor:pointer;
  border:1px solid #337747;
  border-radius:7px;
  min-height:30px;
  padding:0 10px;
  background:#142a19;
  color:#9af3aa;
  font-family:inherit;
  font-size:10px;
  font-weight:950;
  letter-spacing:.025em;
  white-space:nowrap;
}
#playersView .players-match-btn:hover,
#playersView .players-match-btn:focus-visible{background:#21472a;border-color:#56b86b;color:#fff}
@media(max-width:960px){
  #playersView .players-sort-actions{flex-wrap:wrap}
  #playersView .players-search{flex:1 1 235px;max-width:none}
  #playersView .players-toolbar{min-width:0}
}


/* ================================================================
   Phase 4E — unified profile panels / cleaner Highlights landing.
   Match the existing Recent Matches dark green surfaces; do not
   change nested highlight/match-card rendering or interactions.
   ================================================================ */
#profileView .profile-card,
#profileView .profile-highlights-card,
#profileView .profile-matches-card{
  border:1px solid #263329;
  border-radius:11px;
  background:linear-gradient(145deg,rgba(13,18,15,.96),rgba(8,12,9,.98));
  box-shadow:0 18px 50px rgba(0,0,0,.23);
}
#profileView .profile-avatar{border-color:#263329;}

/* Compact section spacing; no divider between the two galleries. */
#highlightsView{padding-top:17px;}
#highlightsView > #aftermoviesView{
  min-height:0;
  padding:0;
  margin:0 0 18px;
  border:0;
}
#highlightsView .highlights-aftermovies .aftermovies-page-head{
  margin:0 0 13px;
  padding:0;
  border:0;
  justify-content:center;
  text-align:center;
}
#highlightsView .highlights-aftermovies h2{
  font-size:23px;
  font-weight:950;
  margin:0 0 6px;
  letter-spacing:.025em;
}
#highlightsView .highlights-aftermovies .aftermovies-page-head p{
  margin:0 auto;
  font-size:12px;
  line-height:1.5;
}
#highlightsView > .highlights-page-head{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:0;
  padding:0;
  border:0;
}
#highlightsView > .highlights-page-head > div{
  width:100%;
  text-align:center;
}
#highlightsView > .highlights-page-head h1{
  font-size:23px;
  font-weight:950;
  line-height:1.2;
  letter-spacing:.025em;
  margin:0 0 6px;
}
#highlightsView > .highlights-page-head p{
  max-width:680px;
  margin:0 auto;
  font-size:12px;
  line-height:1.5;
}
#highlightsView > .highlights-toolbar{
  justify-content:center;
  align-items:center;
  padding:14px 0 20px;
}
#highlightsView .highlights-sort{justify-content:center;}
@media(max-width:680px){
  #highlightsView{padding-top:13px;}
  #highlightsView > .highlights-toolbar{align-items:center;}
  #highlightsView > .highlights-page-head h1,
  #highlightsView .highlights-aftermovies h2{font-size:21px;}
}


/* ================================================================
   Phase 4G — centered landing headings and clear Gather CTAs
   Scope deliberately limited to the homepage overview, not lobby UI.
   ================================================================ */
#homeView > .home-section-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center!important;
  text-align:center!important;
  gap:0;
  margin:24px 0 13px!important;
  padding:0 12px!important;
  box-sizing:border-box;
}
#homeView > .home-section-heading .home-heading-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#eef4ef;
  font-size:18px;
  font-weight:1000;
  letter-spacing:.085em;
  line-height:1.15;
}
#homeView > .home-section-heading .home-heading-description{
  max-width:100%;
  margin:0;
  color:#a5b3a9;
  font-size:11.5px;
  font-weight:850;
  letter-spacing:.05em;
  line-height:1.4;
  text-transform:uppercase;
}
/* Standalone FINISHED GATHERS uses the same centered treatment. */
body.showing-recent-matches #homeView > #recentMatchesHeading{
  margin-top:26px!important;
}
/* Make room for full action descriptions inside every Gather card. */
#homeView .gather-overview-card{
  min-height:190px;
  box-sizing:border-box;
}
#homeView .gather-overview-card .gather-card-top{
  align-items:start;
}
#homeView .gather-overview-card .gather-card-heading{
  height:40px;
  min-height:40px;
  padding-top:0;
  justify-content:space-between;
  box-sizing:border-box;
}
#homeView .gather-overview-card .gather-card-state{
  font-size:12px;
  line-height:1.1;
  min-height:13px;
  margin:0;
  overflow-wrap:normal;
}
#homeView .gather-overview-card .gather-card-stats{
  margin-top:16px;
  gap:9px 10px;
}
#homeView .gather-overview-card .gather-card-stat .server-inline-label{
  color:#88968b;
  font-size:11.5px;
}
#homeView .gather-overview-card .gather-card-stat strong{
  font-size:12px;
}
#homeView .gather-open-btn{
  box-sizing:border-box;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  align-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:40px;
  margin:15px 0 0!important;
  padding:8px 8px!important;
  border-radius:8px;
  font-size:13px;
  font-weight:950;
  line-height:1.25;
  letter-spacing:.025em;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
  cursor:pointer;
}
/* Override older generic your-lobby/neutral rules with explicit state styles. */
#homeView .gather-open-btn.gather-cta-start,
#homeView .gather-open-btn.gather-cta-join,
#homeView .gather-open-btn.gather-cta-yours{
  border:1px solid #347b45!important;
  background:linear-gradient(145deg,#1a3e25,#15311f)!important;
  color:#e3ffea!important;
  box-shadow:inset 0 0 0 1px rgba(103,222,126,.055)!important;
}
#homeView .gather-open-btn.gather-cta-view{
  border:1px solid #465049!important;
  background:#252b28!important;
  color:#e0e6e2!important;
  box-shadow:none!important;
}
#homeView .gather-open-btn.gather-cta-offline:disabled{
  border:1px solid #713337!important;
  background:#33191c!important;
  color:#ffb9be!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
  opacity:1!important;
}
/* Phase 4H — compact descriptions inside the three homepage panels. */
#homeView .home-panel-intro{
  margin:0;
  padding:3px 2px 0;
  color:#a5b3a9;
  font-size:11.5px;
  font-weight:850;
  letter-spacing:.05em;
  line-height:1.42;
  text-transform:uppercase;
  text-align:center;
}
#homeView .home-panel-intro-accent{color:#74d67f;}
#homeView .home-panel-intro-divider{
  width:100%;
  height:1px;
  margin:11px 0 11px;
  background:linear-gradient(90deg,rgba(77,120,88,0),rgba(77,120,88,.92) 12%,rgba(77,120,88,.92) 88%,rgba(77,120,88,0));
}
#homeView .matches-panel .home-panel-intro{
  padding-top:2px;
  padding-bottom:11px;
}
/* Do not show an unrelated homepage description while a Gather is expanded. */
body.gather-lobby-active #serverOverview .home-panel-intro,
body.gather-lobby-active #serverOverview .home-panel-intro-divider{display:none!important;}
@media(hover:hover){
  #homeView .gather-open-btn.gather-cta-start:hover,
  #homeView .gather-open-btn.gather-cta-join:hover,
  #homeView .gather-open-btn.gather-cta-yours:hover{
    border-color:#4cac63!important;
    background:linear-gradient(145deg,#235331,#194025)!important;
  }
  #homeView .gather-open-btn.gather-cta-view:hover{
    border-color:#607167!important;
    background:#303a33!important;
  }
  #homeView .gather-open-btn.gather-cta-offline:disabled:hover{
    border-color:#713337!important;
    background:#33191c!important;
    color:#ffb9be!important;
    transform:none!important;
  }
}
@media(max-width:1180px){
  #homeView .gather-overview-card .gather-card-stat .server-inline-label{font-size:11px}
  #homeView .gather-overview-card .gather-card-stat strong{font-size:11.5px}
}
@media(max-width:620px){
  #homeView > .home-section-heading .home-heading-title{font-size:18px;letter-spacing:.065em}
  #homeView .home-panel-intro{font-size:11px}
  #homeView .gather-overview-card{min-height:186px}
}