/*
 * Towcoon semantic typography system.
 *
 * All interface typography uses Nunito Sans. Weight communicates hierarchy:
 * Bold for explanatory copy, ExtraBold for emphasis and Black for titles.
 *
 * Both families are self-hosted variable WOFF2 files. `font-display: swap`
 * keeps text visible while the local font is decoded; the system fallbacks are
 * deliberately close to the intended metrics.
 */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("./assets/fonts/fredoka-turkish-variable.woff2?v=1.0.1") format("woff2-variations");
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("./assets/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("./assets/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-regular: 700;
  --font-medium: 700;
  --font-semibold: 800;
  --font-bold: 900;
  --font-extrabold: 800;
  --font-black: 900;
  /* Backward-compatible alias used by the bundled game. */
  --font: var(--font-body);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

body {
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  font-weight: var(--font-regular);
}

/* Reusable semantic typography primitives. */
.game-title {
  font-family: var(--font-display) !important;
  font-weight: var(--font-bold) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.game-heading {
  font-family: var(--font-display) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.game-button {
  font-family: var(--font-display) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1.1;
}

.game-value {
  font-family: var(--font-display) !important;
  font-weight: var(--font-extrabold) !important;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.game-label {
  font-family: var(--font-body) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1.25;
}

.game-body {
  font-family: var(--font-body) !important;
  font-weight: var(--font-medium) !important;
  line-height: 1.45;
}

.game-caption {
  font-family: var(--font-body) !important;
  font-weight: var(--font-regular) !important;
  line-height: 1.3;
}

/* Game headings, names and section titles. */
body .app h1,
body .app h2,
body .app h3,
body .app h4,
body .app h5,
body .landing h1,
body .landing h2,
body .landing h3,
body .cr-brief-card h2,
body .cr-tour-card h2,
body .tow-story-card h2,
body .tow-finance-card h2,
body .tow-finance-panel h2,
body .tow-tax-info-page h3,
body .tow-day-end-rescue h2,
body .tow-loan-card header b,
body .tow-active-head b,
body .tow-story-hero h3,
body .tow-story-road b,
body .tow-stage-toast b,
body .tow-story-intro h2,
body .tow-visual-note b,
body .towcoon-operation-heading h3,
body .towcoon-operation-shop strong,
body .driver-hire-card h3,
body .driver-roster-copy b,
body .towcoon-new-truck-card h4,
body .towcoon-truck-type-card h5,
body .towcoon-land-placeholder h3,
body .collection-title,
body .garage-collection-summary strong,
body .collection-card b,
body .pricing-policy-title b,
body .section-title,
body .tc-request-identity h3,
body .job-type,
body .quest-head b,
body .upgrade-row h3,
body .build-card h3,
body .fleet-row b,
body .cr-tech-card h3 {
  font-family: var(--font-display) !important;
  font-weight: var(--font-bold) !important;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Buttons are the game's action language; supporting copy inside them is reset below. */
body button,
body [role="button"],
body .btn {
  font-family: var(--font-display) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1.1;
}

/* Important numbers and rewards. */
body .hud-value,
body .quest-reward,
body .price,
body .cr-tech-cost,
body .tc-request-reward strong,
body .tc-request-metric dd,
body .tow-finance-summary b,
body .tow-cash-summary b,
body .tow-loan-balance b,
body .tow-reserved-components b,
body .tow-reserved-total b,
body .tow-current-fixed-tax b,
body .tow-tax-brackets b,
body .tow-loan-card dd,
body .tow-story-hero > b,
body .towcoon-operation-toolbar strong,
body .stat-grid b,
body .summary-grid b,
body .towcoon-new-truck-card > header > small,
body .towcoon-truck-type-card > button,
body .tow-day-end-rescue dd,
body .tow-community-metrics strong,
body .z-report-panel dd,
body .z-report-panel footer,
body .z-report-net > strong {
  font-family: var(--font-display) !important;
  font-weight: var(--font-extrabold) !important;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* The top resource console has mixed div/button cards; bind its typography
   directly so button inheritance cannot make individual cards look different. */
body .app .hud-label {
  font-family: "Luckiest Guy", var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.1;
  letter-spacing: 0.055em;
}

body .app .hud-value {
  font-family: "Luckiest Guy", var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

body .app .action-bar > button,
body .app .action-bar > [role="button"] {
  font-family: "Luckiest Guy", var(--font-display), sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
}

/* Request cards share these classes in both the left rail and full list. */
body .app .tc-request-metric dt {
  font-family: "Nunito Sans", var(--font-body), sans-serif !important;
  font-weight: 700 !important;
}

body .app .tc-request-metric dd,
body .app .tc-request-identity h3,
body .app .tc-request-rarity {
  font-family: "Nunito Sans", var(--font-body), sans-serif !important;
  font-weight: 800 !important;
}

body .app .tc-request-reward strong {
  font-family: "Nunito Sans", var(--font-body), sans-serif !important;
  font-weight: 900 !important;
}

body .app .tc-request-actions button {
  font-family: "Nunito Sans", var(--font-body), sans-serif !important;
  font-weight: 900 !important;
}

body .app .hud-sub,
body .app .hud-card small {
  font-family: var(--font-body) !important;
  font-weight: var(--font-regular) !important;
  line-height: 1.3;
}

/* Compact uppercase status / rarity labels. */
body .tow-kicker,
body .tow-section-title,
body .tc-request-rarity,
body .tow-active-head em,
body .tow-loan-card header small,
body .tow-story-hero > small,
body .tow-story-road small,
body .tow-stage-toast small,
body .tow-story-intro small,
body .tow-community-metrics small {
  font-family: var(--font-display) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1.2;
  letter-spacing: 0.075em;
}

/* Supporting labels and explanatory copy remain deliberately neutral. */
body .app p,
body .app dt,
body .app small,
body .app .sub,
body .app label,
body .tc-request-metric dt,
body .tow-finance-note,
body .tow-tutorial-credit-hint,
body .tow-loan-card > p,
body .tow-story-hero p,
body .tow-story-road p,
body .tow-story-intro p,
body .tow-visual-note p,
body .tow-stage-toast small,
body .towcoon-operation-shop small,
body .driver-hire-card p,
body .driver-hire-card span,
body .driver-roster-copy span,
body .driver-roster-copy select,
body .stat-grid span,
body .summary-grid span,
body .towcoon-new-truck-card p,
body .towcoon-new-truck-card small,
body .towcoon-truck-stat,
body .towcoon-land-placeholder p,
body .garage-collection-summary span,
body .collection-card span,
body .tow-finance-panel p,
body .tow-finance-panel small,
body .tow-finance-panel dt,
body .tow-loan-balance span,
body .tow-loan-balance small,
body .cr-brief p,
body .cr-tour-card p,
body .tow-story-card p {
  font-family: var(--font-body) !important;
  font-weight: var(--font-regular) !important;
  line-height: 1.4;
}

body .app dt,
body .app label,
body .tc-request-metric dt,
body .tow-finance-summary span,
body .tow-cash-summary span,
body .tow-reserved-components span,
body .tow-finance-panel dt,
body .tow-day-end-rescue dt {
  font-weight: var(--font-semibold) !important;
  line-height: 1.25;
}

body .sign-preview {
  font-family: var(--font-display) !important;
  font-weight: var(--font-semibold) !important;
}

body .app .driver-payroll-total,
body .app .fuel-head b,
body .app .fuel-price b {
  font-family: var(--font-display) !important;
  font-weight: var(--font-extrabold) !important;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

body .garage-collection-details summary {
  font-family: var(--font-display) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1.2;
}

/* Day-end rescue: explicit hierarchy from display label through helper copy. */
body .tow-day-end-rescue {
  font-family: var(--font-body) !important;
}

body .tow-day-end-rescue > section > small {
  font-family: var(--font-display) !important;
  font-weight: var(--font-bold) !important;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

body .tow-day-end-rescue h2 {
  font-family: var(--font-display) !important;
  font-weight: var(--font-bold) !important;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

body .tow-day-end-rescue p {
  font-family: var(--font-body) !important;
  font-weight: var(--font-medium) !important;
  line-height: 1.45;
}

body .tow-day-end-rescue dt {
  font-family: var(--font-body) !important;
  font-weight: var(--font-semibold) !important;
}

body .tow-day-end-rescue dd {
  font-family: var(--font-display) !important;
  font-weight: var(--font-extrabold) !important;
  line-height: 1.08;
}

body .tow-rescue-actions b {
  font-family: var(--font-display) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1.1;
}

body .tow-rescue-actions span {
  font-family: var(--font-body) !important;
  font-weight: var(--font-medium) !important;
  line-height: 1.4;
}

/* Keep the branding sign playful without leaking the display face into its helpers. */
body .roof-neon-sign,
body .landing-logo-text,
body .z-report-hero h2,
body .z-report-hero h3,
body .z-report-section h4,
body .z-report-net h4 {
  font-family: var(--font-display) !important;
}

/* Every current and future openable screen inherits the same Black title rule. */
body .app .modal-head h2,
body .app .modal > header h2,
body .app [role="dialog"] h1,
body .app [role="dialog"] h2,
body .towcoon-management-panel h2 {
  font-family: "Nunito Sans", var(--font-body), sans-serif !important;
  font-weight: var(--font-black) !important;
}

body .app input,
body .app select,
body .app textarea,
body .app option,
body .app optgroup {
  font-family: "Nunito Sans", var(--font-body), sans-serif !important;
  font-weight: var(--font-regular) !important;
}

/* Fredoka is slightly wider than the legacy faces at very narrow widths. */
@media (max-width: 430px) {
  body .tow-day-end-rescue h2,
  body .modal-head h2,
  body .tow-finance-panel h2 {
    letter-spacing: -0.02em;
  }

  body .tc-request-actions button,
  body .app .btn {
    letter-spacing: -0.01em;
  }
}