/* Shared HNL identity. Club colors are accents on the same accessible dark UI. */
:root, body.has-club-theme[data-club] {
  --navy: #090e16;
  --paper: #0c121b;
  --ink: #f2f5fa;
  --muted: #a3aebf;
  --line: #293343;
  --blue: #84b7ff;
  --electric: #4d94ff;
  --red: #e93648;
  --surface: #141d29;
  --surface-raised: #1a2534;
  --identity-accent: #e93648;
}
body.has-club-theme[data-club="din"] { --identity-accent: #3788ff; }
body.has-club-theme[data-club="haj"] { --identity-accent: #eb4054; }
body.has-club-theme[data-club="rij"] { --identity-accent: #54bed9; }
body.has-club-theme[data-club="ist"] { --identity-accent: #66b958; }
body.has-club-theme[data-club="osi"] { --identity-accent: #4b9bfa; }
body.has-club-theme[data-club="var"] { --identity-accent: #a590ef; }
body.has-club-theme[data-club="sla"] { --identity-accent: #e56771; }
body.has-club-theme[data-club="gor"] { --identity-accent: #ee6555; }
body.has-club-theme[data-club="lok"] { --identity-accent: #56ace4; }
body.has-club-theme[data-club="rud"] { --identity-accent: #719de7; }
html { background: #0c121b; color-scheme: dark; scroll-padding-top: 96px; }
body, body.has-club-theme, body.has-club-theme[data-club] {
  background: #0c121b;
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body .shell { width: min(1240px, calc(100% - 64px)); }
a { color: #a9ceff; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #a9ceff; outline-offset: 4px;
}
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 2000; padding: 12px 20px; background: #fff; color: #0c121b; border-radius: 8px; }
.skip-link:focus { top: 12px; }
body h1, body h2 { font-family: "Barlow Condensed", Manrope, Arial, sans-serif; font-weight: 700; }
body :is(.site-header), body.has-club-theme[data-club] .site-header {
  background: rgba(9,14,22,.96); color: var(--ink); border-bottom: 1px solid var(--line);
  box-shadow: none; backdrop-filter: blur(16px);
}
body .nav-wrap { height: 88px; gap: 32px; }
body .brand { flex: 0 0 auto; gap: 12px; color: var(--ink); }
body .pogadalica-shield { width: 48px; height: 56px; filter: none; }
body .brand-copy strong, body.has-club-theme[data-club] .brand strong { font-size: 20px; letter-spacing: -.04em; }
body .brand-copy b { display: inline-block; margin-left: 5px; padding: 2px 5px; border: 1px solid #4a5668; border-radius: 4px; font-size: 10px; letter-spacing: .08em; vertical-align: middle; }
body .brand-copy small, body.has-club-theme[data-club] .brand small { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
body .favorite-club-mark, body.has-club-theme[data-club] .favorite-club-mark { width: 30px; height: 30px; margin-left: 6px; background: transparent; border: none; box-shadow: none; }
body .favorite-club-mark img { max-width: 28px; max-height: 28px; }
body .main-nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 5px; padding: 0; max-height: none; overflow: visible; background: transparent; border: 0; }
body .main-nav a, body.has-club-theme[data-club] .main-nav a, body .nav-more summary { color: #b8c2d1; font-size: 12px; font-weight: 700; padding: 10px 12px; white-space: nowrap; border-radius: 6px; text-decoration: none; }
body .main-nav a:hover, body.has-club-theme[data-club] .main-nav a:hover, body .nav-more summary:hover { background: #1a2432; color: #fff; text-shadow: none; }
body .main-nav a[aria-current="page"] { color: #fff; background: #1c2737; box-shadow: inset 0 -2px var(--identity-accent); }
body .main-nav .user-pill, body.has-club-theme[data-club] .user-pill { max-width: 150px; overflow: hidden; text-overflow: ellipsis; margin-left: 12px; padding: 9px 14px; background: #1b2737; border: 1px solid #354359; border-radius: 6px; color: #fff; box-shadow: none; }
body .main-nav .nav-cta { background: #e93648; color: #fff; margin-left: 10px; }
body .nav-toggle { display: none; border: 1px solid #354359; background: #192332; color: #fff; padding: 9px 12px; font-size: 12px; font-weight: 700; border-radius: 6px; }
body .nav-toggle span { margin-right: 5px; }
.nav-more { position: relative; }
.nav-more summary { cursor: pointer; list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary span { margin-left: 5px; }
.nav-more-links { position: absolute; top: calc(100% + 12px); right: 0; width: 220px; display: grid; padding: 8px; border: 1px solid #354359; border-radius: 10px; background: #141d29; box-shadow: 0 18px 48px #0006; }
body .nav-more-links a { display: block; }
body .hero, body.has-club-theme[data-club] .hero {
  position: relative; isolation: isolate; padding: 54px 0 48px;
  background: radial-gradient(ellipse at 90% 30%, #1e314533, transparent 55%), #0c121b;
  border-bottom: 0; color: var(--ink);
}
body .hero::before, body.has-club-theme[data-club] .hero::before { content: none; }
body .hero::after, body.has-club-theme[data-club] .hero::after { content: none; }
body .hero-grid { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 72px; position: relative; }
body .hero-grid::after, body.has-club-theme[data-club] .hero-grid::after { content: none; }
body .eyebrow, body .eyebrow.dark, body.has-club-theme[data-club] .eyebrow.dark { color: #a3b5ce; font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.league-dot { display: inline-block; width: 7px; height: 7px; background: var(--identity-accent); margin-right: 10px; border-radius: 50%; }
body .hero h1, body.has-club-theme[data-club] .hero h1 { font-size: clamp(60px, 6.5vw, 88px); line-height: .98; letter-spacing: -.025em; margin: 24px 0 22px; }
body .hero h1 em, body.has-club-theme[data-club] .hero h1 em { color: #a4b7cd; font-style: normal; text-shadow: none; }
body .hero p, body.has-club-theme[data-club] .hero p { color: #a3aebf; font-size: 15px; line-height: 1.8; max-width: 440px; }
body .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
body .button, body.has-club-theme[data-club] .button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 44px; padding: 12px 18px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; line-height: 1.5; font-weight: 800; transition: background .15s, border-color .15s; text-decoration: none; }
body .primary, body.has-club-theme[data-club] .primary { background: #e93648; color: #fff; box-shadow: none; transform: none; letter-spacing: 0; }
body .primary:hover, body.has-club-theme[data-club] .primary:hover { background: #c92b3b; box-shadow: none; transform: none; }
body .ghost, body.has-club-theme[data-club] .ghost { background: transparent; color: #edf2f9; border-color: #40516a; box-shadow: none; }
body .ghost:hover { background: #1c2838; border-color: #60758f; }
body .hero-season-note { margin-top: 30px; color: #7f8da3; font-size: 10px; letter-spacing: .03em; }
.hero-season-note span { color: #c0cbda; padding-right: 14px; margin-right: 14px; border-right: 1px solid #354359; font-weight: 800; }
body .match-card, body.has-club-theme[data-club] .match-card { padding: 24px 28px 18px; background: #141d29; border: 1px solid #354359; border-radius: 12px; box-shadow: 0 20px 50px #0002; }
.match-card-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
body .card-label { color: #a3b5ce; font-size: 10px; letter-spacing: .13em; }
.round-state { color: #c4cdda; background: #263245; border-radius: 4px; padding: 4px 8px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.round-state.is-open { color: #9de5bd; background: #17382a; }
body .round-head { margin: 16px 0 5px; padding-bottom: 16px; border-color: #293b4f; align-items: center; }
.round-head strong { font-family: "Barlow Condensed", Manrope, sans-serif; font-size: 36px; letter-spacing: -.02em; }
body .round-head > span { color: #9daac0; font-size: 10px; text-align: right; }
.round-head > span b { display: block; color: #edf2f9; font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; }
body .fixture { grid-template-columns: minmax(0,1fr) 55px minmax(0,1fr); gap: 8px; font-size: 12px; padding: 12px 0; border-bottom: 1px solid #253246; }
body .fixture:last-of-type { border-bottom: 0; }
.fixture-team { display: flex; gap: 8px; align-items: center; min-width: 0; color: #e3eaf4; }
.fixture-team:last-child { justify-content: flex-end; }
.fixture-team img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
body .fixture b { color: #e9eff8; background: transparent; padding: 0; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.fixture b span { display: block; color: #9eacc0; font-size: 9px; font-weight: 600; }
body .match-card .schedule-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #293b4f; font-size: 10px; line-height: 1.6; }
body .stats, body.has-club-theme[data-club] .stats { margin-top: 0; background: #111925; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
body .stats div { display: flex; align-items: center; gap: 12px; padding: 17px 26px; border-color: var(--line); }
body .stats strong { color: #f2f5fa; font-family: "Barlow Condensed", Manrope, sans-serif; font-size: 28px; line-height: 1; }
body .stats span { color: #95a4ba; font-size: 9px; margin: 0; }
.survivor-spotlight { display: flex; align-items: center; gap: 24px; margin-top: 24px; padding: 24px 28px; background: linear-gradient(100deg,#19283a,#141d29); border: 1px solid #34485f; border-radius: 10px; }
.survivor-emblem { position: relative; display: grid; place-items: center; width: 56px; height: 64px; flex: 0 0 auto; border: 1px solid #577591; border-radius: 7px 7px 22px 22px; background: #22344a; color: #d4e4f6; font-family: "Barlow Condensed",sans-serif; font-size: 38px; font-weight: 700; }
.survivor-emblem span { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; display: grid; place-items: center; background: #e93648; color: #fff; border: 2px solid #19283a; border-radius: 50%; font: 800 10px Manrope,sans-serif; }
body .survivor-spotlight h2 { margin: 3px 0 4px; font-size: 28px; letter-spacing: -.01em; }
.survivor-spotlight p { color: #a9b8cb; font-size: 11px; margin: 0; }
.survivor-spotlight > .button { margin-left: auto; flex-shrink: 0; }
body .content-grid { grid-template-columns: 1.3fr 1fr; gap: 24px; padding: 24px 0 64px; }
body .panel, body.has-club-theme[data-club] .panel,
body :is(.round-list,.leader-table,.form-card,.prediction-card,.score-scale,.bonus-card,.admin-stats,.empty-state,.club-card,.profile-stats article,.award-grid article,.reveal-card,.round-matrix-section,.rules-bonus-grid article,.rules-bonus-notes article),
body.has-club-theme[data-club] :is(.round-list,.leader-table,.form-card,.prediction-card,.score-scale,.bonus-card,.admin-stats,.empty-state,.club-card,.profile-stats article,.award-grid article,.reveal-card,.round-matrix-section,.rules-bonus-grid article,.rules-bonus-notes article) {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
}
body .panel { padding: 26px; }
body .panel h2, body.has-club-theme[data-club] .panel h2, body .round-matrix-heading h2 { color: var(--ink); font-size: 30px; margin: 5px 0 20px; line-height: 1.15; }
body .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body .text-link { color: #b2c5df; font-size: 10px; text-decoration: none; white-space: nowrap; }
body .action-grid { border: none; border-radius: 0; gap: 12px; }
body .action-grid a, body.has-club-theme[data-club] .action-grid a { padding: 18px; border: 1px solid #2e3e53; background: #192332; border-radius: 7px; color: #edf2f9; }
body .action-grid a:hover, body.has-club-theme[data-club] .action-grid a:hover { background: #213044; border-color: #60758f; }
body .action-grid a > span { color: #8e9fb6; display: flex; justify-content: space-between; font-size: 10px; }
.action-grid span b { font-size: 15px; font-weight: 500; }
body .action-grid strong { font-size: 14px; margin: 12px 0 4px; }
body .action-grid small { font-size: 10px; color: #a3b0c3; line-height: 1.7; }
body .result-row { align-items: center; grid-template-columns: 1fr 60px 1fr; padding: 15px 0; border-color: #293343; font-size: 12px; }
.result-row strong { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 23px "Barlow Condensed",sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.result-row i { font-style: normal; color: #6e8199; font-size: 16px; }
body .page-head, body.has-club-theme[data-club] .page-head,
body .club-hero, body.has-club-theme[data-club] .club-hero { background: #111925; border-bottom: 1px solid var(--line); padding: 38px 0; color: var(--ink); }
body .page-head::after, body.has-club-theme[data-club] .page-head::after { content: none; }
body .page-head h1 { font-size: clamp(36px,5vw,52px); margin: 8px 0; letter-spacing: -.02em; }
body .page-head p, body .club-hero p, body.has-club-theme[data-club] .page-head p, body.has-club-theme[data-club] .club-hero p { color: var(--muted); font-size: 13px; line-height: 1.7; }
body .page-content { padding-top: 28px; padding-bottom: 64px; }
body .round-list article { padding: 20px 24px; border-color: var(--line); gap: 16px; }
body .round-list article:hover, body.has-club-theme[data-club] .round-list article:hover, body .leader-table > div:not(.table-head):hover, body.has-club-theme[data-club] .leader-table > div:not(.table-head):hover { background: #1d2939; }
body .leader-table.overall > div { grid-template-columns: 45px minmax(180px,1fr) repeat(5,minmax(65px,90px)); align-items: center; gap: 8px; padding: 20px 24px; font-size: 13px; border-color: var(--line); }
body .leader-table .table-head, body.has-club-theme[data-club] .leader-table .table-head { background: #1c293b; color: #aebed4; border-left: 0; font-size: 9px; letter-spacing: .06em; }
body .leader-table a, body .profile-row a, body.has-club-theme[data-club] .leader-table a, body.has-club-theme[data-club] .profile-row a { color: var(--ink); text-decoration: none; }
body .leader-table.overall > div:not(.table-head) > span:last-child { color: #fff; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
body .leader-table > div:nth-child(2) { background: #1a2b3d; }
body .mini-button, body.has-club-theme[data-club] .mini-button { background: #233248; color: #c3d7f0; border: 1px solid #40526c; border-radius: 5px; padding: 8px 12px; font-size: 11px; }
body :is(.game-grid select,.form-card input,.form-card select,.form-card textarea,.score-inputs input,.bonus-answer select),
body.has-club-theme[data-club] :is(.game-grid select,.form-card input,.form-card select,.form-card textarea,.score-inputs input,.bonus-answer select) { background: #0e1724; color: #f2f5fa; border: 1px solid #49607f; border-radius: 6px; }
body .survivor-explainer, body.has-club-theme[data-club] .survivor-explainer { background: #1b2b3e; border-left-color: var(--identity-accent); }
body .survivor-explainer summary { cursor: pointer; font-size: 13px; font-weight: 800; color: #d5e3f5; }
body .survivor-explainer[open] summary { margin-bottom: 12px; }
body .survivor-callout { background: #1b2b3e; border: 1px solid #405a7a; color: var(--ink); border-radius: 10px; }
body .survivor-inline-form select { background: #0e1724; color: #f2f5fa; border-color: #49607f; }
body .h2h-table { background: var(--surface); border-color: var(--line); }
body .h2h-table .table-head { background: #1c293b; color: #aebed4; }
body .survivor-explainer p, body .profile-row strong, body.has-club-theme[data-club] .profile-row strong { color: #b3c2d6; }
body .favorite-warning { background: #242332; color: #d5dbe7; border-color: #4f4b64; }
body .favorite-warning-inner { min-height: 46px; font-size: 11px; }
body .favorite-warning a { color: #d5e5fc; }
body .message, body.has-club-theme[data-club] .message { background: #1b2b3e; color: #e7effa; border-color: #405a7a; }
body .rules-note, body.has-club-theme[data-club] .rules-note { background: #19283a; border: 1px solid #34485f; }
body .bonus-points, body.has-club-theme[data-club] .bonus-points { background: #253a54; color: #c4dcfa; }
body .round-matrix-scroll, body .overview-matrix-scroll { background: #121c29; border-color: #354359; }
body :is(.round-matrix-table,.overview-matrix) :is(th,td) { border-color: #354359; }
body :is(.round-matrix-table,.overview-matrix) thead th { background: #1c2d44; color: #edf2f9; }
body :is(.round-matrix-table,.overview-matrix) tbody th { background: #172536; color: #edf2f9; }
body .round-matrix-table tbody tr:nth-child(even) td { background: #182332; }
body .round-matrix-heading p { color: var(--muted); }
body .round-matrix-stats span { background: #24364d; color: #c7d7ec; border-color: #3c526e; }
body .round-matrix-stats b { color: #edf2f9; }
body .round-matrix-legend .status-hidden { background: #354358; color: #dae3ef; }
body .distribution, body .pick-list span { background: #223248; color: #d5e3f5; }
body .survivor-status-success { color: #80dda9 !important; }
body .survivor-status-fail { color: #ff8997 !important; }
body .survivor-status-pending { color: #eed58a !important; }
body footer, body.has-club-theme[data-club] footer { background: #090e16; color: #8c9bb3; border-top: 1px solid #293343; padding: 28px 0; }
body .hnl-footer { gap: 14px; }
body .hnl-footer img { width: 32px; height: 40px; }
.hnl-footer strong, .hnl-footer small { display: block; }
.hnl-footer strong { color: #d5dfed; font-size: 12px; }
.hnl-footer small { font-size: 9px; margin-top: 3px; }
.hnl-footer > a { font-size: 10px; color: #a3b5ce; text-decoration: none; }
.hnl-footer > a:first-of-type { margin-left: auto; }
@media (max-width: 1100px) {
  body .shell { width: calc(100% - 40px); }
  body .nav-wrap { height: 76px; gap: 12px; }
  body .nav-toggle { display: block; margin-left: auto; }
  body .main-nav, body.has-club-theme[data-club] .main-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px 20px; background: #111925; border-bottom: 1px solid #354359; max-height: calc(100dvh - 76px); overflow-y: auto; }
  body .main-nav.is-open, body.has-club-theme[data-club] .main-nav.is-open { display: flex; }
  body .main-nav a, body .nav-more summary { padding: 12px 14px; font-size: 13px; }
  body .main-nav .user-pill { max-width: none; margin: 8px 0 0; }
  .nav-more-links { position: static; width: 100%; margin-top: 4px; box-shadow: none; background: #192332; }
  body .hero-grid { gap: 32px; }
  body .hero h1 { font-size: 72px; }
}
@media (max-width: 760px) {
  body .shell { width: calc(100% - 32px); }
  body .hero { padding: 30px 0 24px; }
  body .hero-grid, body .content-grid { grid-template-columns: 1fr; gap: 24px; }
  body .hero h1, body.has-club-theme[data-club] .hero h1 { font-size: 64px; margin: 18px 0 16px; }
  body .hero p { font-size: 13px; }
  body .hero-actions { flex-direction: row; margin-top: 22px; }
  body .hero-actions .button { flex: 1; padding-inline: 12px; white-space: nowrap; }
  body .hero-season-note { margin-top: 22px; }
  body .match-card, body.has-club-theme[data-club] .match-card { padding: 20px; }
  body .fixture { font-size: 11px; }
  .fixture-team { gap: 5px; }
  .fixture-team img { width: 20px; height: 20px; }
  body .stats { grid-template-columns: 1fr 1fr; }
  body .stats div { padding: 15px 18px; }
  .survivor-spotlight { gap: 16px; padding: 20px; flex-wrap: wrap; }
  .survivor-spotlight > div:nth-child(2) { flex: 1; min-width: 160px; }
  .survivor-spotlight > .button { width: 100%; margin-left: 0; }
  body .survivor-spotlight h2 { font-size: 25px; }
  body .content-grid { padding-top: 24px; padding-bottom: 36px; }
  body .panel { padding: 20px; }
  body .action-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body .action-grid a, body.has-club-theme[data-club] .action-grid a { padding: 15px; border: 1px solid #2e3e53 !important; }
  body .action-grid strong { font-size: 12px; }
  body .action-grid small { font-size: 10px; }
  body .page-head, body.has-club-theme[data-club] .page-head { padding: 28px 0; }
  body .leader-table.overall { overflow-x: auto; }
  body .leader-table.overall > div { min-width: 620px; grid-template-columns: 30px 140px 66px repeat(4,72px); gap: 8px; font-size: 11px; padding: 16px; }
  body .leader-table.overall > div > :nth-child(7) { grid-column: 3; grid-row: 1; }
  body .leader-table.overall > div > :nth-child(3) { grid-column: 4; grid-row: 1; }
  body .leader-table.overall > div > :nth-child(4) { grid-column: 5; grid-row: 1; }
  body .leader-table.overall > div > :nth-child(5) { grid-column: 6; grid-row: 1; }
  body .leader-table.overall > div > :nth-child(6) { grid-column: 7; grid-row: 1; }
  body .leader-table.overall strong { overflow-wrap: anywhere; }
  body .round-list article { align-items: flex-start; flex-direction: column; padding: 18px; }
  body .round-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  body .hnl-footer { flex-wrap: wrap; }
  .hnl-footer > a:first-of-type { margin-left: 0; }
  .hnl-footer > span { flex: 1; min-width: 200px; }
}
@media (max-width: 380px) {
  body .brand-copy strong { font-size: 18px; }
  body .pogadalica-shield { width: 38px; }
  body .hero-actions { flex-direction: column; }
  body .action-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}