@font-face {
  font-family: "Anton";
  src: url("assets/Anton-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.brand strong,
h1,
.section-toolbar h2,
.login-section h2,
dialog h2 {
  font-family: "Anton", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
}

.brand strong { font-size: 30px; line-height: 1.2; }
.page-heading > div:first-child { min-width: 0; }
h1 { font-size: 46px; line-height: 1.22; overflow-wrap: anywhere; }
.section-toolbar h2, .login-section h2, dialog h2 { font-size: 24px; line-height: 1.3; }
.eyebrow { font-size: 12px; }

@media (min-width: 1700px) {
  .display-main h1 { font-size: 56px; }
}

@media (max-width: 760px) {
  .brand strong { font-size: 25px; }
  h1 { font-size: 36px; }
  .section-toolbar h2, .login-section h2, dialog h2 { font-size: 22px; }
}

/* Scherzer poster palette; readable controls and compact TV standings. */
:root {
  --bg: #0d0d0d;
  --surface: #1b1b1b;
  --line: #3b3830;
  --text: #faf8f1;
  --muted: #bdb9ae;
  --lime: #f5c62e;
  --beer: #f5c62e;
  --spritz: #7ed957;
  --red: #ffaca3;
}
body { background: linear-gradient(135deg, #211c10 0, #0d0d0d 460px); background-color: #0d0d0d; }
.site-header { background: #090909; border-bottom: 3px solid #f5c62e; }
.brand-logo { display: block; width: 190px; height: auto; }
.nav-link.active { background: #302815; color: var(--lime); }
.page-heading { border-left: 4px solid #e51225; padding-left: 18px; }
.eyebrow { letter-spacing: 1.5px; }
.eyebrow span { color: #e51225; margin: 0 8px; }
.totals { background: #151412; border-top: 2px solid var(--lime); }
.stat:first-child { padding-left: 18px; }
.segmented, .drink-controls .minus, .drink-controls .batch { background: #25231f; }
.drink-controls .minus, .drink-controls .batch { border-color: #534b3d; }
.segmented button[aria-pressed=true], .primary, .toast { color: #181409; }
.drink-controls .add-beer, .drink-controls .add-spritz { background: #000; border-color: #534b3d; color: #fff; }
.drink-controls .batch[aria-label^="+10 "] { background: #e51225; border-color: #e51225; color: #fff; }
input { background: #121212; border-color: #625c50; }
input::placeholder { color: #aaa69c; }
.demo-banner { background: #f5c62e; color: #181409; }
tr.leader { background: #2a2415; }
.spritz-board tr.leader { background: #1c2b18; }
.spritz-board tr.leader td:first-child { box-shadow: inset 3px 0 var(--spritz); }
.spritz-board td.total-cell, .spritz-board tr.leader td.position { color: var(--spritz); }
.split-board h3 { font-family: "Anton", "Arial Narrow", Arial, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .5px; }
.split-board table { border-top: 2px solid var(--beer); }
.spritz-board table { border-top-color: var(--spritz); }
.team-card { border-radius: 4px; }
.login-section { padding: 26px; background: #1b1915; border: 1px solid var(--line); border-top: 3px solid var(--lime); border-radius: 4px; }
.site-footer { display: block; padding: 20px 0; }
.display-main > .footer-sponsors { margin-bottom: 20px; }
body[data-page="display"] .site-footer .totals { margin-bottom: 0; }
.footer-sponsors h2 { font-family: "Anton", "Arial Narrow", Arial, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 18px; color: var(--muted); margin-bottom: 12px; }
.sponsor-strip { display: flex; gap: 10px; padding: 0; margin: 0; list-style: none; overflow-x: auto; }
.sponsor-strip:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.sponsor-strip li { position: relative; flex: 1 0 140px; height: 84px; background: #fff; overflow: hidden; }
/* Display exact regions of the supplied collage without redrawing sponsor logos. */
.sponsor-window { position: absolute; display: block; width: 201px; top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%) scale(.67); }
.sponsor-window img { position: absolute; left: 0; width: 201px; height: 636px; max-width: none; }
/* Keep crop coordinates in this stylesheet: production CSP blocks inline styles. */
.sponsor-strip li:nth-child(1) .sponsor-window { height: 103px; }
.sponsor-strip li:nth-child(1) img { top: 0; }
.sponsor-strip li:nth-child(2) .sponsor-window { height: 86px; }
.sponsor-strip li:nth-child(2) img { top: -104px; }
.sponsor-strip li:nth-child(3) .sponsor-window { height: 94px; }
.sponsor-strip li:nth-child(3) img { top: -191px; }
.sponsor-strip li:nth-child(4) .sponsor-window { height: 103px; }
.sponsor-strip li:nth-child(4) img { top: -285px; }
.sponsor-strip li:nth-child(5) .sponsor-window { height: 90px; }
.sponsor-strip li:nth-child(5) img { top: -388px; }
.sponsor-strip li:nth-child(6) .sponsor-window { height: 77px; }
.sponsor-strip li:nth-child(6) img { top: -478px; }
.sponsor-strip li:nth-child(7) .sponsor-window { height: 81px; }
.sponsor-strip li:nth-child(7) img { top: -555px; }
.footer-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; font-size: 11px; }
@media (max-width: 760px) {
  .brand-logo { width: 132px; }
  .page-heading { padding-left: 12px; }
  .stat:nth-child(3) { padding-left: 18px; }
  .footer-meta { flex-wrap: wrap; }
  .login-section { padding: 22px 18px; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 1200px) {
  body[data-page="display"] .brand-logo { width: 140px; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 800px) {
  body[data-page="display"] .brand-logo { width: 100px; }
  body[data-page="display"] .site-footer { display: block; padding: 8px 0; margin-top: 10px; min-height: 0; }
  body[data-page="display"] .footer-meta { display: none; }
  .display-main > .footer-sponsors { margin-bottom: 10px; }
  body[data-page="display"] .footer-sponsors h2 { font-size: 13px; margin-bottom: 6px; }
  body[data-page="display"] .sponsor-strip { gap: 6px; }
  body[data-page="display"] .sponsor-strip li { flex-basis: 110px; height: 58px; }
  body[data-page="display"] .sponsor-window { transform: translate(-50%, -50%) scale(.52); }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 600px) {
  body[data-page="display"] .brand-logo { width: 80px; }
}

/* Put display title and live status in the header to reclaim ranking space. */
body[data-page="display"] .display-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 20px; }
body[data-page="display"] .display-header h1 { font-size: 36px; line-height: 1.15; }
.header-status { display: flex; align-items: center; gap: 12px; }
body[data-page="display"] .split-board h3 { font-size: 32px; line-height: 1.2; margin-bottom: 10px; }
body[data-page="display"] .split-board h3 svg { width: 26px; height: 26px; }
@media (max-width: 1100px) {
  body[data-page="display"] .display-header { gap: 14px; }
  body[data-page="display"] .display-header h1 { font-size: 28px; }
  .display-header .nav-link span { display: none; }
  .display-header .nav-link { padding: 8px; }
}
@media (max-width: 699px) {
  body[data-page="display"] .display-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .display-header .brand { grid-column: 1; grid-row: 1; }
  .display-header nav { grid-column: 2; grid-row: 1; }
  body[data-page="display"] .display-header h1 { grid-column: 1 / -1; grid-row: 2; font-size: 28px; }
  .display-header .header-status { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; }
  body[data-page="display"] .split-board h3 { font-size: 28px; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 800px) {
  body[data-page="display"] .display-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  body[data-page="display"] .split-board h3 { font-size: 28px; margin-bottom: 6px; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 600px) {
  body[data-page="display"] .display-header h1 { font-size: 26px; }
  body[data-page="display"] .split-board h3 { font-size: 24px; margin-bottom: 4px; }
  body[data-page="display"] .split-board h3 svg { width: 22px; height: 22px; }
}