:root{
  --bg:#09090b;
  --panel:#151518;
  --panel2:#1b1b1f;
  --panel3:#202025;
  --line:#2d2d33;
  --line-soft:#232328;

  --text:#f7f7f8;
  --muted:#9c9ca5;
  --muted2:#71717a;

  --red:#c3141e;
  --red-dark:#850d14;
  --red-bright:#ef3340;
  --red-soft:#f2a1a6;

  --radius-sm:10px;
  --radius:15px;
  --radius-lg:20px;
  --radius-xl:24px;

  --shadow:0 12px 32px rgba(0,0,0,.22);
}

/* ------------------------------
   RESET / BASE
------------------------------ */

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
}

html,
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

body{
  padding-bottom:86px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

button,
a,
input,
select{
  -webkit-tap-highlight-color:transparent;
}

h1,
h2,
h3,
p{
  overflow-wrap:break-word;
}

/* ------------------------------
   TOP HEADER
------------------------------ */

.topbar{
  position:sticky;
  top:0;
  z-index:20;

  display:flex;
  justify-content:space-between;
  align-items:center;

  min-height:68px;
  padding:10px 16px;

  background:rgba(9,9,11,.95);
  border-bottom:1px solid var(--line);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.brand-mark{
  flex:0 0 auto;
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:
    linear-gradient(145deg,var(--red-bright),var(--red));

  box-shadow:
    inset 0 1px rgba(255,255,255,.12);

  color:#fff;
  font-size:15px;
  font-weight:950;
  letter-spacing:-.7px;
}

.eyebrow{
  color:var(--muted);
  font-size:10px;
  line-height:1.1;
  font-weight:850;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

h1{
  margin:3px 0 0;
  font-size:18px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.25px;
}

h2{
  margin:4px 0 0;
  font-size:28px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.6px;
}

h3{
  margin:0;
  font-size:16px;
  line-height:1.2;
  font-weight:850;
}

/* ------------------------------
   MAIN LAYOUT
------------------------------ */

main{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:18px 16px 30px;
}

.view{
  display:none;
}

.view.active{
  display:block;
  animation:viewFade .18s ease-out;
}

@keyframes viewFade{
  from{
    opacity:.25;
    transform:translateY(3px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* ------------------------------
   HEADER ACTIONS
------------------------------ */

.top-actions{
  display:flex;
  align-items:center;
  gap:5px;
}

.programs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:38px;
  padding:8px 12px;

  color:var(--text);
  text-decoration:none;

  border:1px solid var(--line);
  border-radius:11px;

  background:var(--panel);

  font-size:11px;
  font-weight:850;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.programs-btn:hover{
  background:var(--panel2);
  border-color:#48484f;
}

.programs-btn:active{
  transform:scale(.97);
}

.icon-btn,
.text-btn,
.close-btn{
  border:0;
  background:transparent;
  color:var(--text);
}

.icon-btn{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:12px;

  font-size:24px;
  line-height:1;
}

.icon-btn:hover{
  background:var(--panel);
}

.text-btn{
  padding:4px 2px;

  color:var(--red-soft);

  font-size:12px;
  font-weight:800;
}

/* ------------------------------
   HOME HERO
------------------------------ */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;

  position:relative;
  overflow:hidden;

  min-height:138px;
  padding:24px;

  border:1px solid rgba(255,255,255,.04);
  border-radius:var(--radius-xl);

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(255,255,255,.08),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--red-dark) 0%,
      #aa1019 42%,
      #d01824 100%
    );

  box-shadow:var(--shadow);
}

.hero:after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-70px;
  bottom:-110px;

  border-radius:50%;
  border:28px solid rgba(255,255,255,.035);
}

.hero-kicker{
  position:relative;
  z-index:1;

  font-size:10px;
  font-weight:950;
  letter-spacing:1.7px;
}

.hero h2{
  position:relative;
  z-index:1;

  margin:8px 0 8px;

  font-size:31px;
  line-height:1;
  letter-spacing:-1px;
}

.hero p{
  position:relative;
  z-index:1;

  max-width:525px;
  margin:0;

  color:#f7d9db;
  font-size:13px;
  line-height:1.5;
}

.hero-date{
  position:relative;
  z-index:1;

  flex:0 0 auto;
  width:88px;
  height:88px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  border:1px solid rgba(255,255,255,.05);
  border-radius:21px;

  background:#0b0b0d;

  box-shadow:0 8px 25px rgba(0,0,0,.22);
}

.hero-date span{
  font-size:20px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.7px;
}

.hero-date small{
  margin-top:5px;

  color:var(--muted);

  font-size:10px;
  line-height:1.1;
}

/* ------------------------------
   LIVE STATUS
------------------------------ */

.status-banner{
  margin:13px 0 18px;
  padding:12px 14px;

  background:var(--panel);

  border:1px solid var(--line);
  border-left:4px solid var(--red-bright);
  border-radius:13px;

  color:#d4d4d8;

  font-size:12px;
  line-height:1.4;
}

/* ------------------------------
   ANNOUNCEMENTS
------------------------------ */

#homeAnnouncements{
  margin-bottom:20px;
}

/*
  The announcement cards currently have inline styles from app.js.
  These rules gently polish the surrounding area without breaking them.
*/

#homeAnnouncements > div:first-child{
  margin-top:18px !important;
  margin-bottom:11px !important;
}

#homeAnnouncements strong{
  letter-spacing:-.15px;
}

/* ------------------------------
   SECTION HEADINGS
------------------------------ */

.section-head,
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  margin:22px 2px 11px;
}

.page-head{
  margin-top:10px;
  margin-bottom:18px;
}

.page-head h2{
  margin-top:5px;
}

/* ------------------------------
   GAME CARDS
------------------------------ */

.stack{
  display:grid;
  gap:9px;
}

.game-card{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 64px;
  gap:13px;
  align-items:center;

  min-height:60px;
  padding:13px 14px;

  background:var(--panel);

  border:1px solid var(--line);
  border-radius:15px;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.game-card:hover{
  background:#18181c;
  border-color:#37373e;
}

.game-time{
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
}

.game-match{
  min-width:0;
  font-size:13px;
}

.game-match strong{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;

  font-size:13px;
  font-weight:850;
}

.game-match small{
  display:block;

  margin-top:3px;

  color:var(--muted);

  font-size:10.5px;
  line-height:1.25;
}

.game-court{
  text-align:right;

  color:var(--muted);

  font-size:10.5px;
  white-space:nowrap;
}

.game-card.final-game{
  border-left:4px solid var(--red-bright);
}

.game-scoreline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;

  font-size:13px;
}

.game-scoreline .winner{
  color:#fff;
  font-weight:950;
}

.final-badge{
  display:inline-block;

  margin:5px 0 1px;
  padding:4px 7px;

  border-radius:999px;

  background:var(--red);

  color:#fff;

  font-size:9px;
  font-weight:950;
  letter-spacing:.8px;
}

.tourney-round{
  margin-bottom:3px;

  color:var(--red-soft);

  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
}

/* ------------------------------
   QUICK ACCESS
------------------------------ */

.quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.quick-card{
  position:relative;
  overflow:hidden;

  min-height:92px;
  padding:17px;

  text-align:left;

  color:var(--text);

  background:
    linear-gradient(
      145deg,
      var(--panel),
      #17171b
    );

  border:1px solid var(--line);
  border-radius:17px;

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.quick-card:after{
  content:"›";

  position:absolute;
  right:14px;
  top:50%;

  transform:translateY(-50%);

  color:#4f4f57;

  font-size:25px;
  font-weight:400;
}

.quick-card:hover{
  transform:translateY(-1px);
  background:var(--panel2);
  border-color:#393940;
}

.quick-card:active{
  transform:scale(.985);
}

.quick-card strong{
  display:block;

  padding-right:22px;

  font-size:14px;
  font-weight:900;
}

.quick-card span{
  display:block;

  max-width:85%;
  margin-top:7px;

  color:var(--muted);

  font-size:11px;
  line-height:1.35;
}

/* ------------------------------
   FILTERS / SEARCH
------------------------------ */

.filters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;

  margin-bottom:14px;
}

.filters.single{
  grid-template-columns:1fr;
}

select,
input{
  width:100%;
  min-height:47px;

  padding:11px 13px;

  background:var(--panel);

  color:var(--text);

  border:1px solid var(--line);
  border-radius:12px;

  font-size:15px;

  outline:none;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

select:focus,
input:focus{
  border-color:#55555d;

  background:#19191d;

  box-shadow:
    0 0 0 3px rgba(239,51,64,.08);
}

input::placeholder{
  color:#6f6f78;
}

.date-group{
  margin:18px 1px 8px;

  color:#d9d9dd;

  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
}

/* ------------------------------
   TEAM DIRECTORY
------------------------------ */

.team-list{
  display:grid;
  gap:9px;
}

.team-card{
  width:100%;
  min-height:75px;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;

  padding:14px 15px;

  text-align:left;

  color:var(--text);

  background:var(--panel);

  border:1px solid var(--line);
  border-radius:15px;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.team-card:hover{
  background:var(--panel2);
  border-color:#3b3b42;
}

.team-card:active{
  transform:scale(.99);
}

.team-card strong{
  display:block;

  font-size:14px;
  font-weight:900;
}

.team-card small{
  display:block;

  margin-top:4px;

  color:var(--muted);

  font-size:10.5px;
}

.team-card .chev{
  color:#64646c;
  font-size:23px;
  font-weight:300;
}

.division-chip{
  display:inline-flex;

  margin-top:7px;
  padding:4px 8px;

  border:1px solid #33333a;
  border-radius:999px;

  background:#242429;

  color:#c5c5cb;

  font-size:9px;
  font-weight:750;
}

/* ------------------------------
   STANDINGS
------------------------------ */

#standingsTable{
  overflow-x:auto;

  border-radius:15px;

  -webkit-overflow-scrolling:touch;
}

.standings{
  width:100%;
  min-width:520px;

  border-collapse:separate;
  border-spacing:0;

  overflow:hidden;

  background:var(--panel);

  border:1px solid var(--line);
  border-radius:15px;
}

.standings th,
.standings td{
  padding:11px 9px;

  border-bottom:1px solid var(--line-soft);

  text-align:right;

  font-size:12px;
}

.standings th{
  color:var(--muted);

  background:#111114;

  font-size:9px;
  font-weight:900;
  letter-spacing:.5px;
}

.standings td:nth-child(2),
.standings th:nth-child(2){
  text-align:left;
}

.standings th:first-child,
.standings td:first-child{
  width:38px;
  text-align:center;
}

.standings tbody tr:last-child td{
  border-bottom:0;
}

.standings tbody tr:hover td{
  background:#19191d;
}

.standings tbody tr.gp-zero td{
  color:var(--muted2);
}

.standings tbody tr.gp-zero td:nth-child(2){
  color:var(--muted);
}

.standings .muted-cell{
  color:var(--muted2);
}

/* ------------------------------
   MY TEAM
------------------------------ */

.my-team-hero{
  position:relative;
  overflow:hidden;

  margin-bottom:18px;
  padding:21px;

  background:
    linear-gradient(
      135deg,
      #18181c,
      #202024
    );

  border:1px solid var(--line);
  border-radius:19px;

  box-shadow:0 10px 25px rgba(0,0,0,.14);
}

.my-team-hero:before{
  content:"";

  position:absolute;
  top:0;
  bottom:0;
  left:0;

  width:4px;

  background:var(--red-bright);
}

.my-team-hero h3{
  margin-top:5px;

  font-size:24px;
  font-weight:950;
  letter-spacing:-.6px;
}

.my-team-hero p{
  margin:7px 0 0;

  color:var(--muted);

  font-size:12px;
}
/* ------------------------------
   X LEAGUE POINTS
------------------------------ */

.xlp-intro{
  background:
    linear-gradient(
      135deg,
      #17171b,
      #101014
    );

  border:1px solid var(--line);
  border-radius:18px;

  padding:18px;
  margin-bottom:20px;
}

.xlp-intro-head{
  position:relative;
}

.xlp-intro h3{
  margin:5px 0 7px;

  font-size:23px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.5px;
}

.xlp-intro p{
  margin:0;

  max-width:650px;

  color:var(--muted);

  font-size:12px;
  line-height:1.55;
}

.xlp-scoring{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;

  margin-top:17px;
}

.xlp-score{
  min-height:70px;

  padding:12px;

  background:#1b1b20;

  border:1px solid var(--line);
  border-radius:12px;
}

.xlp-score strong{
  display:block;

  font-size:20px;
  line-height:1;
  font-weight:950;
}

.xlp-score span{
  display:block;

  margin-top:6px;

  color:var(--muted);

  font-size:9.5px;
  line-height:1.35;
}

.xlp-score.positive strong{
  color:#63c174;
}

.xlp-score.negative strong{
  color:#e16b6b;
}


/* ------------------------------
   XLP LEADERBOARD
------------------------------ */

#xlpTable{
  overflow-x:auto;

  border-radius:15px;

  -webkit-overflow-scrolling:touch;
}

.xlp-table{
  width:100%;
  min-width:560px;

  border-collapse:separate;
  border-spacing:0;

  overflow:hidden;

  background:var(--panel);

  border:1px solid var(--line);
  border-radius:15px;
}

.xlp-table th,
.xlp-table td{
  padding:11px 10px;

  border-bottom:1px solid var(--line-soft);

  font-size:12px;
}

.xlp-table th{
  background:#111114;

  color:var(--muted);

  font-size:9px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.xlp-table th:first-child,
.xlp-table td:first-child{
  width:42px;
  text-align:center;
}

.xlp-table th:last-child,
.xlp-table td:last-child{
  width:55px;
  text-align:right;
}

.xlp-table tbody tr:last-child td{
  border-bottom:0;
}

.xlp-table tbody tr:hover td{
  background:#19191d;
}

.xlp-rank{
  color:var(--muted);
  font-size:11px;
}

.xlp-player{
  font-weight:850;
}

.xlp-team{
  color:var(--muted);
  font-size:11px;
}

.xlp-points{
  font-weight:950;
  font-size:13px;
}

.xlp-points.positive{
  color:#63c174;
}

.xlp-points.negative{
  color:#e16b6b;
}


/* ------------------------------
   XLP MOBILE
------------------------------ */

@media(max-width:600px){

  .xlp-intro{
    padding:16px;
    border-radius:16px;
  }

  .xlp-intro h3{
    font-size:21px;
  }

  .xlp-intro p{
    font-size:11.5px;
  }

  .xlp-scoring{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .xlp-score{
    min-height:64px;
    padding:10px;
  }

  .xlp-score strong{
    font-size:18px;
  }

  .xlp-score span{
    font-size:9px;
  }

}

/* ------------------------------
   GAME AWARDS VOTING
------------------------------ */

.voting-intro{
  background:
    linear-gradient(
      135deg,
      #17171b,
      #101014
    );

  border:1px solid var(--line);
  border-radius:18px;

  padding:18px;
  margin-bottom:20px;
}

.voting-intro h3{
  margin:5px 0 7px;

  font-size:23px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.5px;
}

.voting-intro p{
  margin:0;

  max-width:650px;

  color:var(--muted);

  font-size:12px;
  line-height:1.55;
}

.voting-categories{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;

  margin-top:17px;
}

.voting-category{
  min-height:70px;

  padding:12px;

  background:#1b1b20;

  border:1px solid var(--line);
  border-radius:12px;
}

.voting-category strong{
  display:block;

  font-size:14px;
  line-height:1.2;
  font-weight:950;
}

.voting-category span{
  display:block;

  margin-top:6px;

  color:var(--muted);

  font-size:9.5px;
  line-height:1.35;
}

.vote-counter{
  display:flex;
  align-items:baseline;
  gap:6px;

  margin-top:17px;

  padding-top:14px;
  border-top:1px solid var(--line);
}

.vote-counter strong{
  font-size:20px;
  font-weight:950;
  color:var(--red);
}

.vote-counter span{
  color:var(--muted);
  font-size:12px;
}

@media(max-width:600px){

  .voting-intro{
    padding:16px;
    border-radius:16px;
  }

  .voting-intro h3{
    font-size:21px;
  }

  .voting-intro p{
    font-size:11.5px;
  }

  .voting-categories{
    grid-template-columns:1fr;
    gap:7px;
  }

  .voting-category{
    min-height:auto;
    padding:10px;
  }

}
/* ------------------------------
   MODALS
------------------------------ */

.modal{
  position:fixed;
  inset:0;
  z-index:50;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  padding-top:50px;

  background:rgba(0,0,0,.78);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.modal.hidden{
  display:none;
}

.modal-card{
  position:relative;

  width:100%;
  max-width:700px;
  max-height:88vh;

  overflow:auto;

  padding:23px 20px 28px;

  background:#121216;

  border:1px solid var(--line);
  border-bottom:0;
  border-radius:23px 23px 0 0;

  box-shadow:
    0 -18px 45px rgba(0,0,0,.34);
}

.release-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(195,20,30,.14);
  border:1px solid rgba(195,20,30,.4);
  color:var(--red-soft);
  font-size:13px;
  font-weight:750;
}

.close-btn{
  position:absolute;
  top:8px;
  right:12px;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#c7c7cc;

  font-size:29px;
}

.close-btn:hover{
  background:var(--panel2);
}

.roster-head{
  padding-right:45px;
}

.roster-head h2{
  margin-bottom:5px;
}

.favorite-btn{
  width:100%;

  margin:15px 0 19px;
  padding:13px;

  border:0;
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-bright)
    );

  color:#fff;

  font-size:13px;
  font-weight:950;

  box-shadow:0 8px 20px rgba(181,18,27,.2);
}

.favorite-btn:active{
  transform:scale(.99);
}

/* ------------------------------
   BUTTON HIERARCHY
------------------------------ */

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;

  padding:7px 12px;

  border:1px solid var(--line);
  border-radius:10px;

  background:var(--panel2);

  color:var(--text);

  font-size:12px;
  font-weight:700;

  transition:background .15s ease;
}

.back-btn:active{
  background:var(--panel3);
}

.btn-primary,
#submitVotesBtn,
#rosterPasswordSubmit{
  width:100%;

  padding:13px;

  border:0;
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-bright)
    );

  color:#fff;

  font-size:13px;
  font-weight:950;

  box-shadow:0 8px 20px rgba(181,18,27,.2);
}

.btn-primary:active,
#submitVotesBtn:active,
#rosterPasswordSubmit:active{
  transform:scale(.99);
}

.btn-primary:disabled,
#submitVotesBtn:disabled,
#rosterPasswordSubmit:disabled{
  opacity:.5;
  box-shadow:none;
}

.roster-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;

  padding:12px 1px;

  border-top:1px solid var(--line);
}

.roster-row:first-of-type{
  margin-top:14px;
}

.roster-row strong{
  font-size:13px;
  font-weight:850;
}

.roster-meta,
.roster-row small{
  display:block;

  margin-top:4px;

  color:var(--muted);

  font-size:10.5px;
  line-height:1.3;
}

/* ------------------------------
   EMPTY STATES
------------------------------ */

.empty{
  padding:20px;

  color:var(--muted);

  background:var(--panel);

  border:1px dashed #34343b;
  border-radius:14px;

  font-size:13px;
  line-height:1.5;
}

/* ------------------------------
   BOTTOM NAV
------------------------------ */

.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;

  z-index:30;

  display:grid;
  grid-template-columns:repeat(8,1fr);

  padding:
    5px 4px
    calc(6px + env(safe-area-inset-bottom));

  background:rgba(14,14,17,.97);

  border-top:1px solid var(--line);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.bottom-nav button{
  position:relative;

  min-height:53px;

  padding:5px 2px;

  border:0;
  border-radius:10px;

  background:transparent;

  color:#6f6f78;

  font-size:8px;
  font-weight:700;

  transition:
    color .15s ease,
    background .15s ease;
}

.bottom-nav button span{
  display:block;

  margin-bottom:3px;

  font-size:16px;
  line-height:1;
}

.bottom-nav button.active{
  color:#fff;
}

.bottom-nav button.active:before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:18px;
  height:3px;

  transform:translateX(-50%);

  border-radius:999px;

  background:var(--red-bright);
}

/* ------------------------------
   TABLET / DESKTOP
------------------------------ */

@media(min-width:720px){

  main{
    padding:24px 22px 38px;
  }

  .hero{
    min-height:150px;
    padding:27px 28px;
  }

  .hero h2{
    font-size:35px;
  }

  .hero-date{
    width:90px;
    height:90px;
  }

  .team-list{
    grid-template-columns:1fr 1fr;
  }

  .quick-card{
    min-height:96px;
  }

  .modal{
    align-items:center;
    padding:25px;
  }

  .modal-card{
    border-bottom:1px solid var(--line);
    border-radius:22px;
  }
}

/* ------------------------------
   SMALL PHONES
------------------------------ */

@media(max-width:520px){

  main{
    padding:14px 12px 24px;
  }

  .topbar{
    padding:9px 10px;
  }

  .brand-mark{
    width:43px;
    height:43px;
    border-radius:12px;
  }

  h1{
    font-size:16px;
  }

  .hero{
    grid-template-columns:1fr;
    gap:14px;

    padding:20px;

    border-radius:20px;
  }

  .hero h2{
    font-size:28px;
  }

  .hero-date{
    width:100%;
    height:auto;

    flex-direction:row;
    justify-content:flex-start;
    gap:7px;

    padding:10px 12px;

    border-radius:13px;
  }

  .hero-date span{
    font-size:15px;
  }

  .hero-date small{
    margin-top:0;
  }

  .game-card{
    grid-template-columns:65px minmax(0,1fr) 50px;
    gap:8px;

    padding:12px 10px;
  }

  .game-time{
    font-size:11px;
  }

  .game-match strong{
    font-size:12px;
  }

  .game-match small{
    font-size:9.5px;
  }

  .game-court{
    font-size:9px;
  }

  .quick-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .quick-card{
    min-height:88px;
    padding:14px;
  }

  .filters{
    gap:7px;
  }

  select,
  input{
    min-height:45px;
    padding:10px 11px;
    font-size:14px;
  }

  .programs-btn{
    padding:8px 9px;
    font-size:10px;
  }
}

/* ------------------------------
   VERY SMALL PHONES
------------------------------ */

@media(max-width:350px){

  .quick-grid{
    grid-template-columns:1fr;
  }

  .filters{
    grid-template-columns:1fr;
  }

  .hero h2{
    font-size:25px;
  }
}
/* ------------------------------
   AWARD VOTING BUTTONS
------------------------------ */

.award-vote-btn{
  padding:10px 6px;

  border:1px solid var(--line);
  border-radius:10px;

  background:var(--panel2);

  color:var(--text);

  font-size:12px;
  font-weight:700;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .1s ease;
}

.award-vote-btn:active{
  transform:scale(.96);
}

.award-vote-btn.selected{
  border-color:var(--red-bright);

  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-bright)
    );

  color:#fff;

  box-shadow:0 6px 16px rgba(181,18,27,.28);
}

.award-vote-btn:disabled{
  opacity:.45;
}

/* ------------------------------
   VOTING PLAYER LIST
------------------------------ */

.team-group-heading{
  margin:18px 2px 8px;

  color:var(--muted);

  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.team-group-heading:first-child{
  margin-top:2px;
}

.voting-player-card{
  margin-bottom:10px;
  padding:14px;

  background:var(--panel);

  border:1px solid var(--line);
  border-radius:14px;
}

.voting-player-head{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:12px;
}

.voting-player-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;

  width:32px;
  height:32px;

  border:1px solid var(--line);
  border-radius:50%;

  background:var(--panel3);

  color:var(--muted);

  font-size:11px;
  font-weight:800;
}

.voting-player-chips{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}


/* ============================================================
   PUBLIC APP REDESIGN — division colors, pill filters/legend,
   redesigned schedule rows, colored chips, avatars, live badge.
   Added 2026-08-31. Purely additive: no existing rule removed.
   ============================================================ */
:root{
--div-1:#3b82f6;
--div-5:#a855f7;
--div-6:#c3141e;
--div-7:#f59e0b;
--live-green:#22c55e;
}

.div-legend{
display:flex;
gap:8px;
overflow-x:auto;
padding:2px 2px 12px;
-webkit-overflow-scrolling:touch;
}
.div-pill{
flex:0 0 auto;
display:flex;
align-items:center;
gap:6px;
padding:8px 13px;
border-radius:999px;
border:1px solid var(--line);
background:var(--panel2);
color:var(--text);
font-size:12px;
font-weight:800;
white-space:nowrap;
}
.div-pill .dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--dot,var(--muted2));
}
.div-pill.active{
border-color:var(--dot,var(--muted2));
background:color-mix(in srgb, var(--dot,var(--muted2)) 18%, var(--panel2));
}

.my-team-chip{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 13px;
border-radius:999px;
border:1px solid var(--red-bright);
background:color-mix(in srgb, var(--red-bright) 16%, var(--panel2));
color:#fff;
font-size:12px;
font-weight:800;
white-space:nowrap;
}

.div-color-key{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:2px 2px 14px;
}
.div-color-key span{
display:inline-flex;
align-items:center;
gap:5px;
color:var(--muted);
font-size:10.5px;
font-weight:700;
}
.div-color-key .dot{
width:7px;
height:7px;
border-radius:50%;
}

.result-count{
color:var(--muted2);
font-size:11px;
margin:2px 2px 10px;
}

.game-row{
position:relative;
display:grid;
grid-template-columns:56px minmax(0,1fr) auto;
gap:11px;
align-items:center;
padding:10px 10px 10px 14px;
border-bottom:1px solid var(--line-soft);
}
.game-row:before{
content:"";
position:absolute;
left:0;
top:6px;
bottom:6px;
width:3px;
border-radius:3px;
background:var(--dot,var(--muted2));
}
.game-row .g-time{
font-size:12.5px;
font-weight:900;
white-space:nowrap;
}
.game-row .g-match{
min-width:0;
}
.game-row .g-match strong{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:13px;
font-weight:800;
}
.g-tags{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin-top:3px;
}
.g-div-tag{
font-size:8.5px;
font-weight:900;
letter-spacing:.4px;
text-transform:uppercase;
color:var(--dot,var(--muted));
}
.g-meta{
color:var(--muted);
font-size:9.5px;
}
.game-row .g-court-col{
text-align:right;
color:var(--muted);
font-size:10px;
white-space:nowrap;
}
.game-row.final .g-score{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
font-size:13px;
}
.game-row.final .winner{
color:#fff;
font-weight:950;
}
.final-badge-sm{
display:inline-block;
margin:4px 0 1px;
padding:3px 7px;
border-radius:999px;
background:var(--dot,var(--red));
color:#fff;
font-size:8px;
font-weight:950;
letter-spacing:.6px;
}
.live-badge{
display:inline-flex;
align-items:center;
gap:4px;
margin:4px 0 1px;
padding:3px 7px;
border-radius:999px;
background:var(--live-green);
color:#04150a;
font-size:8px;
font-weight:950;
letter-spacing:.6px;
}
.live-badge:before{
content:"";
width:5px;
height:5px;
border-radius:50%;
background:#04150a;
animation:pcbLivePulse 1.2s ease-in-out infinite;
}
@keyframes pcbLivePulse{
0%,100%{opacity:1;}
50%{opacity:.35;}
}

.division-chip{
border-color:color-mix(in srgb, var(--dot,var(--muted2)) 45%, var(--line));
background:color-mix(in srgb, var(--dot,var(--muted2)) 16%, var(--panel2));
}
.division-chip .dot{
display:inline-block;
width:6px;
height:6px;
border-radius:50%;
background:var(--dot,var(--muted2));
margin-right:2px;
}

.team-card{
position:relative;
padding-left:18px;
}
.team-card:before{
content:"";
position:absolute;
left:0;
top:10px;
bottom:10px;
width:4px;
border-radius:0 4px 4px 0;
background:var(--dot,var(--muted2));
}
.team-card-head{
display:flex;
align-items:center;
gap:11px;
min-width:0;
}
.team-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:10px;
background:color-mix(in srgb, var(--dot,var(--muted2)) 24%, var(--panel3));
color:#fff;
font-size:11px;
font-weight:950;
flex:0 0 auto;
}

.roster-row[data-open-card] strong{
text-decoration:underline;
text-decoration-color:var(--red-soft);
text-underline-offset:3px;
text-decoration-thickness:1.5px;
}

.xlp-name-cell{
display:flex;
align-items:center;
gap:7px;
}
.xlp-name-cell .dot{
width:7px;
height:7px;
border-radius:50%;
flex:0 0 auto;
background:var(--dot,var(--muted2));
}
.xlp-name-cell.clickable{
cursor:pointer;
}
.xlp-name-cell.clickable span.pname{
text-decoration:underline;
text-decoration-color:var(--red-soft);
text-underline-offset:3px;
}
.xlp-name-cell.clickable:after{
content:"\203A";
color:#64646c;
font-size:14px;
margin-left:2px;
}

.standings tbody tr.my-team-row td{
background:color-mix(in srgb, var(--red-bright) 12%, var(--panel));
}

@media(min-width:600px){
.div-legend{flex-wrap:wrap;overflow-x:visible;}
}