:root {
  /* Shared Esports Hub directory tokens. Page-specific hub styles are loaded
     from `static/css/pages/` after this file. */
  --hub-cyan: #19bef4;
  --hub-panel: rgba(7, 20, 32, .94);
  --hub-panel-2: rgba(13, 30, 44, .94);
  --hub-line: rgba(124, 164, 190, .28);
  --hub-muted: #9eacba;
}

.hub-directory {
  min-height: 70vh;
  color: #eef5f8;
  background:
    radial-gradient(circle at 55% 5%, rgba(20, 126, 184, .12), transparent 30%),
    linear-gradient(135deg, rgba(3, 13, 22, .96), rgba(7, 24, 39, .97) 55%, rgba(3, 13, 22, .98));
}

.hub-directory .container { width: min(90%, 1720px); max-width: none; }
.hub-directory .section { padding: 18px 0 26px; }
.hub-directory .page-hero + .section { padding-top: 0; }

.hub-page-hero {
  min-height: 145px;
  padding: 32px 0 20px;
  background: linear-gradient(90deg, rgba(3, 14, 24, .98), rgba(4, 19, 32, .62), rgba(3, 14, 24, .3));
}

.hub-page-hero h1 {
  color: #fff;
  font-family: var(--ff-oxanium), "Rajdhani", sans-serif;
  font-size: clamp(3.4rem, 3vw, 4.3rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.hub-page-hero strong { display: block; margin-top: 10px; font-size: 1.45rem; }
.hub-page-hero .lede { margin-top: 4px; color: #c1cbd4; font-size: 1.25rem; }

.hub-filter-panel.browse-toolbar {
  display: block;
  margin: 0 0 15px;
  padding: 20px 22px;
  background: linear-gradient(145deg, rgba(14, 31, 46, .97), rgba(6, 17, 28, .98));
  border: 1px solid var(--hub-line);
  border-radius: 7px;
}

.hub-filter-panel .browse-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.hub-filter-panel .browse-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 18px; }
.hub-directory--teams .hub-filter-panel .browse-filter-grid { grid-template-columns: 320px minmax(300px, 1fr); }
.hub-directory--leaderboard .hub-filter-panel .browse-filter-grid { grid-template-columns: minmax(360px, 1fr) 320px; }
.hub-filter-panel .browse-field { display: grid; gap: 7px; }
.hub-filter-panel .browse-field > span { color: #8297aa; font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hub-filter-panel :is(input, select) { width: 100%; height: 46px; padding: 0 15px; color: #eaf1f5; background: #091825; border: 1px solid var(--hub-line); border-radius: 4px; }
.hub-filter-panel .browse-filter-actions { display: flex; gap: 10px; }
.hub-filter-panel :is(.btn, .browse-clear) { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 46px; padding: 0 22px; border-radius: 4px; font-family: var(--ff-oxanium), "Rajdhani", sans-serif; font-size: 1.18rem; font-weight: 800; text-transform: uppercase; }
.hub-filter-panel :is(.btn, .browse-clear) ion-icon { width: 18px; height: 18px; margin-right: 9px; }
.hub-filter-panel .btn { color: #02131c; background: linear-gradient(135deg, #10adee, #32c6f6); border: 1px solid var(--hub-cyan); }
.hub-filter-panel .browse-clear { color: #e5edf2; background: rgba(5, 15, 24, .68); border: 1px solid var(--hub-line); }

.hub-directory .browse-results-meta { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 12px; color: #b9c4cc; font-size: 1.15rem; }
.hub-directory .browse-results-meta p:first-child { display: flex; align-items: center; gap: 8px; color: #e5edf2; font-weight: 700; }
.hub-directory .browse-results-meta ion-icon { width: 18px; height: 18px; color: var(--hub-cyan); }

/* Tournament directory */
.hub-directory--tournaments .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.hub-directory .event-card {
  position: relative;
  display: block;
  min-height: 252px;
  overflow: hidden;
  padding: 25px 24px 22px;
  color: #eef5f8;
  background: linear-gradient(135deg, rgba(16, 36, 52, .97), rgba(5, 17, 27, .98));
  border: 1px solid var(--hub-cyan);
  border-radius: 7px;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0, 4, 12, .12);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.hub-directory .event-card:is(:hover, :focus-visible) { color: #eef5f8; background: linear-gradient(135deg, rgba(20, 44, 62, .99), rgba(7, 22, 34, .99)); border-color: #63ddff; box-shadow: 0 0 0 1px rgba(25,190,244,.18), 0 16px 34px rgba(0, 8, 18, .42), inset 0 0 28px rgba(25,190,244,.05); transform: translateY(-4px); }
.hub-directory .event-card::before,
.hub-directory .event-card::after { display: none; }
.hub-directory .event-card > * { position: relative; z-index: 2; }
.hub-tournament-art { position: absolute !important; z-index: 1 !important; top: 50%; right: 18px; bottom: auto; width: 132px; height: 132px; opacity: .13; filter: grayscale(1); transform: translateY(-50%); transition: opacity .22s ease, transform .22s ease; }
.hub-directory .event-card:is(:hover, :focus-visible) .hub-tournament-art { opacity: .23; transform: translateY(-50%) scale(1.04); }
.hub-tournament-art img { width: 100%; height: 100%; object-fit: contain; }
.hub-directory .browse-card-head { display: flex; justify-content: space-between; align-items: center; }
.hub-directory .event-card .card-game { color: var(--hub-cyan); font-size: 1.1rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hub-directory .status-pill { padding: 6px 14px; color: var(--hub-cyan); background: rgba(20, 181, 239, .08); border: 1px solid rgba(20, 181, 239, .35); border-radius: 20px; font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hub-directory .event-card h3 { max-width: calc(100% - 110px); margin: 20px 0 15px; color: #f4f7f9; font-family: var(--ff-oxanium), "Rajdhani", sans-serif; font-size: 1.72rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.hub-directory .event-card .meta { display: flex; flex-wrap: wrap; gap: 10px 20px; color: #aab6c0; font-size: 1.03rem; }
.hub-directory .event-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.hub-directory .event-card .meta ion-icon { width: 16px; height: 16px; }
.hub-directory .event-card .card-meta-text { margin-top: 10px; color: #9eacb8; font-size: 1.02rem; }
.hub-directory .event-card .prize { margin-top: 11px; color: var(--hub-cyan); font-size: 1.72rem; font-weight: 800; }

/* Team directory */
.hub-directory--teams .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.hub-directory .team-card {
  position: relative;
  min-height: 150px;
  padding: 20px 68px 18px 128px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(13, 34, 50, .97), rgba(6, 18, 28, .98));
  border: 1px solid var(--hub-cyan);
  border-radius: 7px;
}
.hub-directory .team-card::after { content: ""; position: absolute; inset: 42% 0 0 28%; opacity: .12; background: linear-gradient(135deg, transparent 40%, #4c687c 41%, transparent 43%); transform: rotate(-8deg); }
.hub-directory .team-card .browse-card-head { display: block; }
.hub-directory .team-card-identity { position: static; }
.hub-directory .team-card-logo { position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 88px; height: 88px; object-fit: contain; color: #fff; background: linear-gradient(145deg, #112a3d, #050d14); border: 1px solid var(--hub-cyan); border-radius: 8px; font-family: var(--ff-oxanium), sans-serif; font-size: 4rem; font-weight: 800; }
.hub-directory .team-card .region { color: var(--hub-cyan); font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hub-directory .team-card .status-pill { position: absolute; top: 16px; right: 18px; color: #eef4f7; background: linear-gradient(180deg, #31404d, #1b2833); border-color: #4b5a66; }
.hub-directory .team-card h3 { position: relative; z-index: 2; margin: 17px 0 8px; font-family: var(--ff-oxanium), sans-serif; font-size: 2rem; text-transform: uppercase; }
.hub-directory .team-card h3 a { color: #f4f7f9; }
.hub-directory .team-card .card-meta-text { position: relative; z-index: 2; color: #9faeba; font-size: 1.15rem; }
.hub-team-arrow { position: absolute; z-index: 3; right: 18px; bottom: 18px; display: grid; place-items: center; width: 48px; height: 42px; color: #fff; background: linear-gradient(180deg, #243647, #152432); border: 1px solid #536474; border-radius: 5px; font-size: 2rem; }

/* Match directory */
.hub-directory--matches .card-stack { display: grid; gap: 8px; }
.hub-directory .match-card {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(10, 31, 47, .98), rgba(5, 18, 29, .93)), var(--hub-match-art);
  background-position: right center;
  background-size: auto 180%;
  border: 1px solid var(--hub-cyan);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 4, 12, .12);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
.hub-directory .match-card:is(:hover, :focus-within) { border-color: #63ddff; box-shadow: 0 0 0 1px rgba(25,190,244,.16), 0 16px 34px rgba(0,8,18,.42), inset 0 0 30px rgba(25,190,244,.045); filter: brightness(1.06); transform: translateY(-3px); }
.hub-directory .match-card-link { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 118px; color: #eef4f7; }
.hub-directory .match-card-topline { display: grid; grid-template-columns: 62px 1fr; align-content: center; gap: 8px 15px; padding: 15px 20px; }
.hub-directory .match-card-game { display: grid; place-items: center; grid-row: span 2; width: 62px; height: 40px; color: #eaf3f8; background: #10324b; border-radius: 5px; font-weight: 800; }
.hub-directory .match-card-game img { width: 30px; height: 30px; object-fit: contain; }
.hub-directory .match-card-time { display: grid; align-content: center; }
.hub-directory .match-card-time strong { font-size: 1.3rem; }
.hub-directory .match-card-time span { color: #a3b0bc; font-size: .95rem; text-transform: uppercase; }
.hub-directory .match-card-topline .badge { grid-column: 1 / -1; justify-self: start; padding: 5px 16px; border-radius: 4px; font-size: .95rem; font-weight: 800; text-transform: uppercase; }
.hub-directory .match-card-event { display: none; }
.hub-directory .match-card-body { display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center; gap: 24px; padding: 14px 30px; }
.hub-directory .match-team { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.hub-directory .match-team--right { justify-content: flex-start; }
.hub-directory .match-team-copy h2 { font-family: var(--ff-oxanium), sans-serif; font-size: 1.8rem; text-transform: uppercase; }
.hub-directory .match-team-copy span { color: #93a3b1; font-size: 1rem; text-transform: uppercase; }
.hub-directory .match-team-logo { display: grid; place-items: center; width: 68px; height: 68px; color: #08111a; background: linear-gradient(145deg, #f5f8fa, #cbd5dc); border-radius: 7px; font-size: 1.8rem; font-weight: 800; }
.hub-directory .match-team-logo img { width: 54px; height: 54px; object-fit: contain; }
.hub-directory .match-versus { text-align: center; }
.hub-directory .match-versus span { color: var(--hub-cyan); font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hub-directory .match-versus strong { display: block; color: #f4f8fa; font-family: var(--ff-oxanium), sans-serif; font-size: 3.2rem; letter-spacing: .12em; }
.hub-directory .match-live-strip { display: none; }


.hub-directory .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; }
.hub-directory .pagination .btn { min-width: 42px; }
.hub-directory .pagination .pagination-status--current { min-width: 72px; color: #04131d; background: var(--hub-cyan); border-color: var(--hub-cyan); opacity: 1; }
.hub-directory .pagination .pagination-status--ellipsis { min-width: 30px; background: transparent; border-color: transparent; opacity: .7; }
.hub-directory .pagination :is(.pagination-btn,.pagination-status){display:inline-grid;width:auto;min-width:42px;min-height:40px;padding:0 13px;place-items:center;border:1px solid rgba(57,201,247,.38);border-radius:5px;background:#071a27;color:#b9cbd5;box-shadow:none;font:800 12px/1 var(--ff-oxanium);text-transform:uppercase}
.hub-directory .pagination .pagination-btn:is(:hover,:focus){color:#03131d;background:var(--hub-cyan);border-color:var(--hub-cyan)}
.hub-directory .pagination .pagination-status--current{min-width:42px;color:#03131d;background:var(--hub-cyan);border-color:var(--hub-cyan)}
@media(max-width:767px){.hub-directory .pagination{gap:6px}.hub-directory .pagination :is(.pagination-btn,.pagination-status){width:auto;min-width:38px;min-height:38px;padding-inline:10px;font-size:11px}}

@media (max-width: 1100px) {
  .hub-directory .container { width: min(94%, 1540px); }
  .hub-directory--tournaments .grid-3,
  .hub-directory--teams .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-filter-panel .browse-filter-form { grid-template-columns: 1fr; }
  .hub-filter-panel .browse-filter-actions { justify-content: flex-end; }
  .hub-directory .match-card-body { grid-template-columns: 1fr 130px 1fr; gap: 12px; }
  .hub-directory .player-profile-grid { grid-template-columns: 1fr; gap: 34px; }
  .hub-directory .leaderboard-board .players-board-head { display: none; }
  .hub-directory .leaderboard-player-row { grid-template-columns: 60px 1.4fr 1fr 1.6fr; }
}

@media (max-width: 760px) {
  .hub-page-hero { min-height: 125px; }
  .hub-page-hero h1 { font-size: clamp(2.7rem, 10vw, 3.8rem); line-height: 1.05; }
  .hub-page-hero strong { font-size: clamp(1.2rem, 4vw, 1.45rem); line-height: 1.25; }
  .hub-page-hero .lede { font-size: clamp(1.1rem, 3.7vw, 1.28rem); line-height: 1.45; }
  .hub-filter-panel .browse-filter-grid,
  .hub-directory--teams .hub-filter-panel .browse-filter-grid,
  .hub-directory--leaderboard .hub-filter-panel .browse-filter-grid { grid-template-columns: 1fr; }
  .hub-filter-panel .browse-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hub-filter-panel :is(.btn, .browse-clear) { min-width: 0; }
  .hub-directory .browse-results-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hub-directory--tournaments .grid-3,
  .hub-directory--teams .grid-3 { grid-template-columns: 1fr; }
  .hub-directory .match-card-link { grid-template-columns: 1fr; }
  .hub-directory .match-card-topline { grid-template-columns: 58px 1fr auto; }
  .hub-directory .match-card-topline .badge { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .hub-directory .match-card-body { grid-template-columns: 1fr 80px 1fr; padding: 16px; }
  .hub-directory .match-team { align-items: center; flex-direction: column-reverse; text-align: center; }
  .hub-directory .match-team--right { flex-direction: column; }
  .hub-directory .match-team-copy h2 { font-size: 1.3rem; }
  .hub-directory .match-versus strong { font-size: 2.2rem; }
  .hub-directory .player-profile-main { align-items: flex-start; flex-direction: column; }
  .hub-directory .player-profile-bars { width: 100%; }
  .hub-directory .leaderboard-player-row { grid-template-columns: 45px 1fr; gap: 10px; padding: 12px; }
  .hub-directory .player-row-meta,
  .hub-directory .player-row-stats { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hub-directory .player-row-cell { padding: 8px; background: rgba(255,255,255,.025); }
  .hub-directory .player-row-cell > span { display: block; margin-bottom: 3px; color: #8494a2; font-size: .8rem; text-transform: uppercase; }
}

/* Mobile directory layouts. */
@media(max-width:760px){
  .hub-directory .container{width:100%;padding-inline:14px}
  .hub-directory :is(.hub-filter-panel,.browse-toolbar,.browse-filter-form,.browse-filter-grid,.browse-results-meta,.grid-3,.event-card,.team-card,.match-card-link,.leaderboard-board,.leaderboard-feature){width:100%;max-width:100%;min-width:0}
  .hub-filter-panel .browse-filter-actions{grid-template-columns:minmax(0,1fr)}
  .hub-directory .match-card-body{grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);gap:7px;padding-inline:10px}
  .hub-directory .match-team-copy h2{font-size:clamp(14px,4vw,19px)}
  .hub-directory .event-card h3{max-width:100%;font-size:clamp(1.45rem,5vw,1.8rem)}
  .hub-directory .event-card .meta,.hub-directory .event-card .card-meta-text{font-size:1rem;line-height:1.4}
  .hub-directory .status-pill{padding-inline:10px;font-size:.88rem}
  .hub-directory .browse-card-head{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .hub-directory .player-profile-title-row h1{font-size:clamp(2.35rem,8vw,3.2rem);line-height:1.05}
  .hub-directory .match-card-topline{grid-template-columns:52px minmax(0,1fr)}
  .hub-directory .match-card-topline .badge{grid-column:1/-1;grid-row:auto;justify-self:start}
  .hub-directory .leaderboard-feature{grid-template-columns:minmax(0,1fr)!important;padding:18px 14px!important}
  .hub-directory .leaderboard-player-row{grid-template-columns:42px minmax(0,1fr)}
}

@media(max-width:575px){
  .hub-directory .team-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 14px;min-height:0;padding:16px}
  .hub-directory .team-card .browse-card-head{display:contents}
  .hub-directory .team-card-identity{display:contents}
  .hub-directory .team-card-logo{position:static;grid-column:1;grid-row:1/4;width:72px;height:72px;font-size:2.5rem}
  .hub-directory .team-card .region{grid-column:2;margin:0;font-size:.9rem}
  .hub-directory .team-card .status-pill{position:static;grid-column:2;grid-row:4;justify-self:start;margin-top:8px;font-size:.78rem}
  .hub-directory .team-card h3{grid-column:2;margin:4px 0;font-size:1.45rem}
  .hub-directory .team-card .card-meta-text{grid-column:2;margin:0;font-size:.95rem}
  .hub-team-arrow{display:none}
  .hub-directory .match-card-link{grid-template-columns:minmax(0,1fr)}
  .hub-directory .match-card-topline{grid-template-columns:54px minmax(0,1fr) auto;padding:12px 14px}
  .hub-directory .match-card-topline .badge{grid-column:3;grid-row:1/3;align-self:center}
  .hub-directory .match-card-body{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 14px}
  .hub-directory .match-team,.hub-directory .match-team--right{justify-content:center;flex-direction:row;text-align:left}
  .hub-directory .match-team-copy h2{font-size:clamp(1.25rem,5vw,1.65rem);line-height:1.05}
  .hub-directory .match-team-copy span,.hub-directory .match-card-time span{font-size:.9rem}
  .hub-directory .match-versus strong{font-size:clamp(2rem,10vw,2.7rem);letter-spacing:.05em}
  .hub-directory .match-versus{padding-block:3px}
}

/* Compact match cards and pagination on phones. */
@media(max-width:575px){
  .hub-directory--matches .match-card-link{min-height:0}
  .hub-directory--matches .match-card-topline{grid-template-columns:38px minmax(0,1fr) auto;gap:4px 8px;padding:8px 10px}
  .hub-directory--matches .match-card-game{grid-row:1/3;width:38px;height:32px}
  .hub-directory--matches .match-card-game img{width:24px;height:24px}
  .hub-directory--matches .match-card-time strong{font-size:1.05rem}
  .hub-directory--matches .match-card-time span{font-size:.75rem}
  .hub-directory--matches .match-card-topline .badge{grid-column:3;grid-row:1/3;padding:4px 8px;font-size:.72rem}
  .hub-directory--matches .match-card-body{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:5px;padding:9px 10px 11px}
  .hub-directory--matches .match-team,.hub-directory--matches .match-team--right{flex-direction:column;justify-content:center;gap:5px;text-align:center}
  .hub-directory--matches .match-team-logo{width:42px;height:42px;border-radius:5px}
  .hub-directory--matches .match-team-logo img{width:34px;height:34px}
  .hub-directory--matches .match-team-copy h2{font-size:clamp(.9rem,3.6vw,1.15rem);line-height:1.05}
  .hub-directory--matches .match-team-copy span{display:none}
  .hub-directory--matches .match-versus{padding:0}
  .hub-directory--matches .match-versus span{font-size:.7rem}
  .hub-directory--matches .match-versus strong{font-size:1.55rem;letter-spacing:0}
  .hub-directory--matches .pagination{width:max-content;max-width:100%;margin:16px auto 0!important;justify-content:center!important;gap:5px;flex-wrap:nowrap}
  .hub-directory--matches .pagination :is(.pagination-btn,.pagination-status){min-width:34px;min-height:34px;padding-inline:8px;font-size:9px}
}