/* Shared typography. New UI should use these roles or their tokens. */
:root {
  --font-brand: 'Russo One', 'Arial Black', system-ui, sans-serif;
  --font-pixel: 'Quick Pick Pixel', monospace;
  --font-terminal: ui-monospace, monospace;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-micro: 8px;
  --text-small: 10px;
  --text-label: 12px;
  --text-body: 14px;
  --text-display: 20px;
  --text-brand: 34px;
  --text-brand-phone: 24px;
  --text-brand-narrow: 20px;
  --type-primary: var(--text-primary);
  --type-muted: var(--text-secondary);
  --type-emphasis: var(--text-emphasis);
  --type-supporting: var(--text-secondary);
  --type-error: var(--text-error);
}

@font-face {
  font-family: 'Quick Pick Pixel';
  src: url('/assets/fonts/QuickPickPixel.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Russo One';
  src: url('/assets/fonts/RussoOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Component bindings from app.css; original cascade order is preserved. */
body {
  line-height: 1.45;
}
button,
input,
select {
  font: inherit;
}
.submit-picks {
  line-height: 1.4;
}
.section-heading p {
  font-size: 0.92rem;
}
.summary-rank {
  font-family: var(--font-body);

  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.summary-name {
  font-weight: 600;
}
.summary-points {
  font-family: var(--font-body);

  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.summary-points span {
  font-family: inherit;

  font-weight: 600;
  letter-spacing: 0.08em;
}
.scoreboard thead th {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.week-label {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 750;
}
.week-phase {
  font-size: 0.72rem;
}
.pick {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.mobile-availability-tab {
  text-transform: uppercase;
}
.mobile-team-table-header {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mobile-division-row {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mobile-team-name strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mobile-week-header strong {
  font-weight: 600;
}
.mobile-week-header small {
  font-weight: 800;

  text-transform: uppercase;
}
.mobile-pick-player {
  font-weight: 600;
}
.mobile-pick-entry .pick {
  font-size: var(--text-label);
}
.availability-table thead th {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.division-row th {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.team-label strong {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.availability-mark {
  font-size: 0.66rem;
  font-weight: 600;
}
.dialog-header h2 {
  font-weight: 600;
}
.dialog-close {
  font-size: var(--text-brand-phone);
  line-height: 1;
}
.week-options h3 {
  font-size: 13px;
  font-weight: 600;
}
.week-option {
  font-weight: 600;
}
.week-option small {
  font-weight: 400;
}
:is(
  .summary-rank,
  .summary-points,
  .pick,
  .team-label strong,
  .mobile-team-name strong,
  .availability-mark
) {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}
body {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}
.hero .app-nav {
  font-size: var(--text-label);
}
.submit-picks {
  font-family: var(--font-pixel);
  font-size: var(--text-display);
  font-weight: 400;
}
h1 {
  font-family: var(--font-brand);
  font-size: var(--text-brand);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #7181b7;
  text-shadow: 3px 3px #080c28;
}
.section-heading h2 {
  font-family: var(--font-pixel);
  font-size: var(--text-display);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 2px 2px var(--banner-shadow);
}
:root[data-style='retro']
  :is(
    .summary-name,
    .summary-rank,
    .summary-points,
    .pick,
    .mobile-team-name strong,
    .team-label strong,
    .availability-mark,
    .mobile-team-table-header,
    .mobile-pick-player,
    .mobile-week-header strong,
    .week-label
  ) {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0;
}
.summary-name {
  font-size: var(--text-display);
  line-height: 1.4;
}
.summary-rank {
  font-size: var(--text-body);
}
.summary-points {
  font-size: var(--text-display);
}
.summary-points span {
  font-size: var(--text-small);
}
.mobile-week-header strong {
  font-size: var(--text-display);
  line-height: 1.4;
}
.mobile-week-header small {
  font-size: var(--text-small);
  letter-spacing: 0;
}
.mobile-pick-player {
  font-size: var(--text-display);
  line-height: 1.4;
}
:root[data-style='retro'] .pick {
  font-size: var(--text-small);
  line-height: 2;
}
.mobile-picks-controls button {
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
}
.mobile-picks-controls #week-label {
  font-size: var(--text-label);
  font-weight: 400;
}
.mobile-availability-tab {
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0;
}
.mobile-team-name strong,
.team-label strong {
  font-size: var(--text-small);
}
.mobile-team-table-row .availability-mark {
  font-size: var(--text-small);
}
.used-week-label {
  font-family: var(--font-terminal);
  font-size: var(--text-micro);
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0.04em;
}
.used-week-number {
  font-family: var(--font-pixel);
  font-size: var(--text-display);
  line-height: 20px;
}
.mobile-division-row,
.division-row th {
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
}
.scoreboard thead th,
.availability-table thead th,
.week-label {
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0;
}
.mobile-team-table-header {
  font-size: var(--text-small);
}
.dialog-header h2 {
  font-family: var(--font-pixel);
  font-size: var(--text-display);
  line-height: 1.4;
}
.week-option {
  font-family: var(--font-pixel);
  font-size: var(--text-small);
  line-height: 2;
}
.week-option small {
  font-family: var(--font-terminal);
  font-size: 11px;
}
:root[data-style='retro'] :is(.team-wordmark, .pick-hidden-mark) {
  font-family: var(--font-pixel);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-shadow:
    -1px -1px 0 var(--team-edge),
    0 -1px 0 var(--team-edge),
    1px -1px 0 var(--team-edge),
    -1px 0 0 var(--team-edge),
    1px 0 0 var(--team-edge),
    -1px 1px 0 var(--team-edge),
    0 1px 0 var(--team-edge),
    1px 1px 0 var(--team-edge),
    2px 2px 0 var(--team-shadow),
    3px 3px 0 #080c28;
}
.pick-result {
  font-family: var(--font-terminal);
  font-size: var(--text-label);
  text-shadow: none;
}
@media (forced-colors: active) {
  :root[data-style='retro'] :is(.team-wordmark, .pick-hidden-mark) {
    text-shadow: none;
  }
}
@media (max-width: 360px) {
  h1 {
    font-size: var(--text-display);
  }
}
@media (min-width: 361px) and (max-width: 430px) {
  h1 {
    font-size: var(--text-brand-phone);
  }
}
:root[data-style='retro'] .availability-mark.available {
  font-size: var(--text-small);
  line-height: 2;
}
[data-scoreboard-section][aria-hidden='true'] :is(.team-label, .mobile-team-name) strong {
  font-size: var(--text-display);
  line-height: 1.4;
}

/* Component bindings from forms.css; original cascade order is preserved. */
.app-nav {
  font: 400 var(--text-label)/1.5 var(--font-pixel);
  text-transform: uppercase;
}
.app-nav button {
  font: inherit;
}
.account-name {
  font: inherit;
}
#admin-link {
  font-size: var(--text-label);
}
.form-panel h2 {
  font-size: 18px;
  line-height: 1.6;
}
.form-panel h3 {
  font:
    700 17px system-ui,
    sans-serif;
}
.form-panel p,
#page-status {
  font:
    15px/1.6 system-ui,
    sans-serif;
}
#scoreboard-page #page-status {
  font:
    400 14px/1.6 ui-monospace,
    monospace;
}
form label {
  font:
    600 15px/1.5 system-ui,
    sans-serif;
}
input[type='email'],
select {
  font:
    16px system-ui,
    sans-serif;
}
.primary,
.review button {
  font:
    700 16px system-ui,
    sans-serif;
}
legend {
  font:
    600 16px system-ui,
    sans-serif;
}
.matchup-at {
  font:
    600 18px system-ui,
    sans-serif;
}
.matchup-choice .team-wordmark {
  font-size: 18px;
}
.matchup-kickoff {
  font:
    12px/1.35 system-ui,
    sans-serif;
}
@media (max-width: 480px) {
  .form-panel h2 {
    font-size: 15px;
  }
}
#save-pick .team-wordmark {
  font-size: 18px;
}
@media (max-width: 480px) {
  .app-nav {
    font-size: 13px;
  }
}
.pick-action-link {
  font: 400 var(--text-body)/1.5 var(--font-pixel);
  text-transform: uppercase;
}
.week-action-footer .pick-action-link {
  font-size: var(--text-label);
  line-height: 1.4;
}
#pick-deadline {
  font:
    400 12px/1.4 system-ui,
    sans-serif;
}
#pick-week {
  font-size: var(--text-body);
}
.matchup-score {
  font:
    700 24px/1.2 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.matchup-status {
  font:
    700 12px/1.4 system-ui,
    sans-serif;
}

/* Reusable roles for new elements. Component layout belongs in app.css/forms.css. */
.type-masthead {
  font: 400 var(--text-brand)/1.1 var(--font-brand);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--type-primary);
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #7181b7;
  text-shadow: 3px 3px #080c28;
}
.type-section-heading {
  font: 400 var(--text-display)/1.6 var(--font-pixel);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--type-primary);
  text-shadow: 2px 2px var(--banner-shadow);
}
.type-player,
.type-score {
  font: 400 var(--text-display)/1.4 var(--font-pixel);
  letter-spacing: 0;
  color: var(--type-primary);
}
.type-score {
  color: var(--type-emphasis);
}
.type-rank {
  font: 400 var(--text-body)/1.4 var(--font-pixel);
  color: var(--type-muted);
}
.type-unit,
.type-column-compact {
  font: 400 var(--text-small)/1.4 var(--font-pixel);
  color: var(--type-muted);
}
.type-column,
.type-week,
.type-division,
.type-navigation {
  font: 400 var(--text-label)/1.5 var(--font-pixel);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--type-muted);
}
.type-week,
.type-navigation {
  color: var(--type-primary);
}
.type-division {
  color: var(--type-primary);
  line-height: 2;
}
.type-action {
  font: 400 var(--text-body)/1.5 var(--font-pixel);
  letter-spacing: 0;
  text-transform: uppercase;
}
.type-supporting {
  font: 400 var(--text-body)/1.6 var(--font-terminal);
  text-transform: none;
  color: var(--type-supporting);
}
.type-supporting.error {
  color: var(--type-error);
}
@media (max-width: 360px) {
  .type-masthead {
    font-size: var(--text-brand-narrow);
  }
}
@media (min-width: 361px) and (max-width: 430px) {
  .type-masthead {
    font-size: var(--text-brand-phone);
  }
}

.week-picker h3 {
  font: 400 var(--text-body)/1.4 var(--font-pixel);
  text-transform: uppercase;
}
.week-picker .week-option {
  font: 400 var(--text-label)/1.4 var(--font-pixel);
  text-transform: uppercase;
}
.week-picker .week-option small {
  font: 400 11px/1.2 var(--font-body);
  text-transform: none;
}

.current-pick-label,
.matchup-day {
  font: 400 12px/1.5 var(--font-pixel);
  text-transform: uppercase;
}
.matchup-team-note {
  font:
    400 10px/1.4 system-ui,
    sans-serif;
}
.current-pick-empty {
  font: 400 18px/1 var(--font-pixel);
}
#save-pick {
  font: 400 14px/1.4 var(--font-pixel);
  text-transform: uppercase;
}
#save-pick .team-wordmark {
  font-size: 20px;
}

/* Game tiles reuse utility text and pixel score roles. */
.watch-status {
  font: var(--text-small)/1.5 var(--font-terminal);
}
.watch-score {
  font: var(--text-display)/1 var(--font-pixel);
}
.watch-followers {
  font: var(--text-label)/1.5 var(--font-terminal);
}
.watch-follower {
  white-space: nowrap;
}

#login-page #page-status,
#login-page .type-supporting {
  font: 400 var(--text-body)/1.6 var(--font-terminal);
}
#login-page label {
  font: 400 var(--text-label)/1.5 var(--font-pixel);
}