*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --hlb-ink: #071528;
  --hlb-navy: #082a4c;
  --hlb-blue: #075985;
  --hlb-ice: #38bdf8;
  --hlb-ice-pale: #eaf7fd;
  --hlb-paper: #f8fbfd;
  --hlb-white: #fff;
  --hlb-gold: #f6bd55;
  --hlb-red: #b51f2e;
}

html { min-height: 100%; background: #020c16; }

.hockey-leaderboard-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: #f8fbfd;
  font-family: "Barlow", sans-serif;
  background:
    linear-gradient(180deg, rgba(2,12,22,.32), rgba(2,12,22,.74)),
    url("../logo/RinkBG.webp") center center / cover no-repeat fixed;
}

a { color: inherit; }
button { font: inherit; }

.hlb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1040px, calc(100% - 2rem));
  margin: 0 auto;
  padding: .6rem 0 .2rem;
}

.hlb-nav-logo img {
  display: block;
  width: clamp(74px, 9vw, 108px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.52));
}

.hlb-back {
  border: 2px solid rgba(56,189,248,.66);
  border-radius: 8px;
  background: rgba(7,21,40,.82);
  color: #fff;
  padding: .48rem .95rem .42rem;
  font: 800 .86rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(0,0,0,.28);
}

.hlb-back:hover,
.hlb-back:focus-visible { border-color: #fff; background: var(--hlb-blue); }

.hlb-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(940px, calc(100% - 2rem));
  margin: .15rem auto .9rem;
  padding: .2rem 0 .85rem;
  border-bottom: 3px solid rgba(56,189,248,.88);
}

.hlb-hero-logo {
  width: clamp(128px, 19vw, 190px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
}

.hlb-hero-copy { min-width: 0; }

.hlb-kicker {
  margin-bottom: .18rem;
  color: #7dd3fc;
  font: 800 .92rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hlb-hero h1 {
  color: #fff;
  font: 900 clamp(3.5rem, 9vw, 6.5rem)/.82 "Barlow Condensed", sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(7,21,40,.58);
}

.hlb-hero-copy > p:last-child {
  max-width: 50ch;
  margin-top: .42rem;
  color: rgba(255,255,255,.88);
  font-size: .92rem;
  line-height: 1.45;
}

.hlb-shell {
  flex: 1;
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto 2.5rem;
}

.hlb-card {
  overflow: hidden;
  border: 2px solid rgba(56,189,248,.72);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(248,251,253,.99), rgba(234,247,253,.98));
  color: var(--hlb-ink);
  box-shadow: 0 20px 48px rgba(0,0,0,.45), inset 0 0 0 1px #fff;
}

.mode-tabs {
  display: flex;
  border-bottom: 6px solid var(--hlb-ice);
  background: var(--hlb-navy);
}

.tab-btn {
  flex: 1;
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: #fff;
  padding: .82rem .5rem .68rem;
  cursor: pointer;
  font: 800 1rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.tab-btn:last-child { border-right: 0; }
.tab-btn:hover,
.tab-btn:focus-visible { background: #0d4776; }
.tab-btn.active {
  background: var(--hlb-ice);
  color: var(--hlb-ink);
  box-shadow: inset 0 -4px 0 var(--hlb-blue);
}

.daily-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .72rem 1rem;
  border-bottom: 1px solid #bfd8e6;
  background: #eef8fc;
}

.daily-filter.hidden { display: none; }

.daily-filter label {
  color: #52667a;
  font: 800 .78rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.daily-filter select {
  width: min(310px, 100%);
  border: 1px solid #9fc7dc;
  border-radius: 6px;
  background: #fff;
  color: var(--hlb-ink);
  font: 700 .86rem/1.2 "Barlow Condensed", sans-serif;
  padding: .45rem 2rem .45rem .65rem;
}

.daily-filter select:focus-visible {
  outline: 3px solid rgba(56,189,248,.35);
  outline-offset: 2px;
}

.lb-container { padding: .8rem; }
.loading,
.empty-state {
  padding: 2.6rem 1rem;
  color: #42566d;
  font-size: .92rem;
  text-align: center;
}
.empty-state { font-style: italic; }

.lb-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem .2rem .7rem;
  color: #52667a;
  font: 800 .75rem/1.2 "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lb-grid { display: grid; gap: .3rem; }
.lb-row {
  display: grid;
  grid-template-columns: 48px minmax(145px, 1.35fr) 82px 66px 84px 104px minmax(135px, 1fr) 84px;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .62rem .72rem;
  border: 1px solid #c9dce7;
  border-radius: 7px;
  background: #fff;
  color: #2f455c;
}

.lb-head {
  border-color: transparent;
  background: transparent;
  color: #52667a;
  padding-block: .25rem;
  font: 800 .72rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lb-score-row { cursor: default; }
.lb-score-row[data-expandable="true"] { cursor: pointer; }
.lb-score-row[data-expandable="true"]:hover,
.lb-score-row[data-expandable="true"]:focus-visible {
  border-color: var(--hlb-blue);
  background: #f4fbff;
  box-shadow: 0 0 0 2px rgba(7,89,133,.12);
  outline: none;
}

.rank-cell { color: #52667a; font: 800 .75rem/1 "Orbitron", monospace; }
.lb-rank-1 .rank-cell,
.lb-rank-2 .rank-cell,
.lb-rank-3 .rank-cell { color: #8a5900; }
.name-cell { min-width: 0; color: var(--hlb-ink); font: 700 1rem/1.1 "Rajdhani", sans-serif; }
.name-cell strong { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.roster-lock-note { display: block; margin-top: .16rem; color: #60788d; font: 600 .68rem/1.15 "Barlow", sans-serif; }
.record-cell { color: var(--hlb-blue); font: 800 .85rem/1 "Orbitron", monospace; }
.score-cell { color: #334b62; font: 700 .78rem/1 "Orbitron", monospace; }
.location-cell { color: #52667a; font-size: .76rem; font-weight: 600; }
.date-cell { color: #52667a; font-size: .74rem; }
.attempt-cell { display: flex; align-items: center; }
.attempt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: .28rem .42rem;
  border-radius: 999px;
  font: 800 .68rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.attempt-1 { background: #dcefd9; color: #285e25; }
.attempt-2 { background: #fff0c9; color: #765000; }
.attempt-3 { background: #f9dce0; color: #8b1730; }
.attempt-empty { color: #8293a2; }
.attempt-mobile { display: none; }

.mode-badge {
  display: inline-block;
  width: fit-content;
  border-radius: 999px;
  padding: .22rem .52rem .17rem;
  font: 800 .7rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mode-badge-daily { background: #d8f2fe; color: #064f78; }
.mode-badge-classic { background: #e5ebf0; color: #263d54; }
.mode-badge-face-off { background: #fde8eb; color: #7f1723; }

.lb-roster-panel {
  margin: -.3rem .2rem .2rem;
  padding: .8rem;
  border: 1px solid #bfd7e4;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #eaf7fd;
}
.lb-roster-panel.hidden { display: none; }
.lb-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: .45rem; }
.lb-roster-entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .45rem;
  border: 1px solid #d3e3ec;
  border-radius: 6px;
  background: #fff;
}
.lb-roster-slot {
  border-radius: 4px;
  background: var(--hlb-navy);
  color: #fff;
  padding: .35rem .25rem;
  text-align: center;
  font: 800 .68rem/1 "Barlow Condensed", sans-serif;
}
.lb-roster-name { display: block; overflow: hidden; color: var(--hlb-ink); font-size: .8rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lb-roster-meta { display: block; overflow: hidden; color: #52667a; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }

.hlb-footnote {
  border-top: 1px solid #c9dce7;
  padding: .8rem 1rem;
  color: #52667a;
  font: 600 .8rem/1.4 "Rajdhani", sans-serif;
  letter-spacing: .03em;
  text-align: center;
}

.hlb-footer {
  display: flex;
  justify-content: center;
  gap: .65rem;
  padding: 1.1rem 1rem 1.4rem;
  border-top: 1px solid rgba(56,189,248,.28);
  background: rgba(2,12,22,.78);
  color: rgba(255,255,255,.78);
  font: 700 .78rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hlb-footer a:hover { color: #7dd3fc; }

@media (max-width: 760px) {
  .hockey-leaderboard-page { background-attachment: scroll; }
  .hlb-nav { width: calc(100% - 1rem); max-width: calc(100vw - 1rem); }
  .hlb-hero { width: calc(100% - 1rem); max-width: calc(100vw - 1rem); gap: .55rem; }
  .hlb-hero-copy { flex: 1; min-width: 0; }
  .hlb-hero-logo { width: clamp(100px, 28vw, 140px); }
  .hlb-hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .hlb-hero-copy > p:last-child { font-size: .8rem; }
  .hlb-shell { width: calc(100% - .75rem); margin-bottom: 1.5rem; }
  .tab-btn { min-height: 44px; font-size: .88rem; padding: .65rem .3rem .52rem; }
  .lb-head { display: none; }
  .lb-score-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank name record"
      "rank mode score";
    gap: .22rem .5rem;
    padding: .7rem .58rem;
  }
  .rank-cell { grid-area: rank; }
  .name-cell { grid-area: name; }
  .record-cell { grid-area: record; justify-self: end; }
  .score-cell { grid-area: score; justify-self: end; }
  .mode-cell { grid-area: mode; }
  .attempt-cell { display: none; }
  .mode-cell { display: flex; align-items: center; gap: .4rem; }
  .attempt-mobile { display: inline-flex; }
  .attempt-mobile .attempt-empty { display: none; }
  .attempt-mobile .attempt-badge { min-width: 46px; padding: .24rem .36rem; font-size: .62rem; }
  .location-cell,
  .date-cell { display: none; }
  .lb-container { padding: .55rem; }
  .lb-summary { flex-direction: column; gap: .2rem; }
  .lb-roster-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .hlb-nav-logo img { width: 72px; }
  .hlb-back { font-size: .75rem; padding-inline: .7rem; }
  .hlb-hero-logo { width: 82px; }
  .hlb-hero h1 { max-width: 100%; font-size: clamp(2.35rem, 13vw, 3.1rem); overflow-wrap: normal; }
  .hlb-kicker { font-size: .72rem; }
  .hlb-hero-copy > p:last-child { display: none; }
  .tab-btn { font-size: .75rem; letter-spacing: .07em; }
}