/* ---- the game's own faces ----------------------------------------------
   The three families Pro Soccer Career ships, used the way the game uses
   them: Inter (variable, wght 100-900) is the body/UI face, Wix Made for
   Display (variable, 400-800) is the headline face and the one big numbers
   wear, and Now Alt (static weights) carries the small wide uppercase
   labels that sit above a value. */
@font-face {
  font-family: "Inter";
  src: url("font/inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Wix Made for Display";
  src: url("font/wix_made_for_display.ttf") format("truetype");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Now Alt";
  src: url("font/nowalt.otf") format("opentype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Now Alt";
  src: url("font/nowalt_medium.otf") format("opentype");
  font-weight: 500 600; font-display: swap;
}
@font-face {
  font-family: "Now Alt";
  src: url("font/nowalt_bold.otf") format("opentype");
  font-weight: 700 800; font-display: swap;
}
@font-face {
  font-family: "Now Alt";
  src: url("font/nowalt_black.otf") format("opentype");
  font-weight: 900; font-display: swap;
}

/* Pro Soccer Career — marketing site
   The same sheet as prodrivercareer.com, with the tokens taken from the
   brand artwork: the deep forest green the wordmark is set in, the gold of
   its speed stripe, and the cream it reverses to. Light is the default
   palette; dark is redefined per token, once under prefers-color-scheme
   (guarded so an explicit light choice wins) and once under
   [data-theme="dark"] so the toggle beats the system in both directions.
   Nothing gets its only definition inside a media block. */
:root {
  /* Straight off the logo files, every one of them. */
  --brand: #01442D;           /* the green the wordmark is set in */
  --brand-soft: #3B8F5C;      /* outer stripe */
  --accent: #EAAB40;          /* middle stripe — the gold */
  --accent-pale: #FFE08A;     /* inner stripe */
  --cream: #F7F1E4;           /* what the wordmark reverses to */

  /* Gold is for FILLS, never for text on a light ground: it sits at 1.8:1
     on the cream and cannot be read. Text accents take --accent-text,
     which is a readable green here and the gold itself in dark mode. */
  --accent-ink: #01442D;      /* what goes ON the gold — 5.6:1 */
  --accent-text: #0B6B44;     /* accent text on light — 5.8:1 */

  --bg: #F7F1E4;              /* the brand cream, as the page */
  --bg-alt: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F0E9D9;       /* derived: cream, one step down */
  --ink: #01442D;             /* 10:1 on the cream */
  --ink-soft: #44584E;        /* 6.8:1 */
  --ink-faint: #7E8E84;       /* 3.1:1 — decorative only */
  --line: #E3DACA;
  --shadow: 0 4px 14px rgba(1, 44, 29, .10);
  --band: #01442D;
  --band-ink: #F7F1E4;
  --band-ink-soft: #BBD0C3;

  --radius: 8px;
  --radius-sm: 6px;

  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;

  --maxw: 1120px;
  --pad: clamp(16px, 4vw, 32px);
}

/* Dark is the same forest, at night. The gold gets brighter than the page
   rather than darker, so there it CAN carry text: 8.1:1 on the canvas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06251A;
    --bg-alt: #0A3123;
    --surface: #0C3A28;
    --surface-2: #0A3123;
    --ink: #F7F1E4;           /* 14.5:1 */
    --ink-soft: #AFC2B7;      /* 8.7:1 */
    --ink-faint: #80948A;     /* 5.1:1 */
    --line: #17533A;
    --shadow: 0 3px 12px rgba(0, 0, 0, .35);
    --band: #01442D;
    --band-ink-soft: #BBD0C3;
    --accent-text: #EAAB40;   /* the gold reads here — 8.1:1 */
  }
}

:root[data-theme="dark"] {
  --bg: #06251A;
  --bg-alt: #0A3123;
  --surface: #0C3A28;
  --surface-2: #0A3123;
  --ink: #F7F1E4;
  --ink-soft: #AFC2B7;
  --ink-faint: #80948A;
  --line: #17533A;
  --shadow: 0 3px 12px rgba(0, 0, 0, .35);
  --band: #01442D;
  --band-ink-soft: #BBD0C3;
  --accent-text: #EAAB40;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Wix Made for Display", "Inter", -apple-system, "Segoe UI",
    Roboto, Arial, "Noto Sans", sans-serif;
  --font-label: "Now Alt", "Inter", -apple-system, "Segoe UI", Roboto, Arial,
    "Noto Sans", sans-serif;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

h1, h2, h3 {
  line-height: 1.12; margin: 0 0 .35em; letter-spacing: -.02em;
  font-family: var(--font-display);
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.08rem; font-weight: 700; }
p { margin: 0 0 .9em; }
a { color: inherit; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-label);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-text);
}
.eyebrow::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px;
  background: var(--accent); transform: skewX(-18deg);
}

.lede { color: var(--ink-soft); font-size: 1rem; max-width: 62ch; }

/* ---- header ---------------------------------------------------------- */

header.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 1rem; height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand img { height: 32px; width: auto; display: block; }

/* The lockup ships as a pair — navy ink for light grounds, white for dark.
   Grounds that are always navy (the hero band, the footer) take the white
   file directly; anything on the page's own background swaps by theme with
   the tokens' three-state logic: bare :root is light, the media query
   covers a system-dark visitor, and an explicit data-theme beats both. */
img.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.logo-on-light { display: none; }
  :root:not([data-theme="light"]) img.logo-on-dark { display: block; }
}
:root[data-theme="dark"] img.logo-on-light { display: none; }
:root[data-theme="dark"] img.logo-on-dark { display: block; }
nav.links { display: none; gap: 1.4rem; }
nav.links a {
  text-decoration: none; font-size: .8rem; font-weight: 800; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .13em;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
nav.links a:hover { color: var(--ink); border-bottom-color: var(--accent); }
header.top::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 34%, transparent 34%);
}
@media (min-width: 900px) { nav.links { display: flex; } }

.tools { display: flex; align-items: center; gap: .5rem; }

.select, .icon-btn {
  font: inherit; font-size: .88rem; font-weight: 650;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .45rem .8rem; cursor: pointer;
}
.select { padding-right: 1.6rem; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; }
.icon-btn:hover, .select:hover { border-color: var(--ink-faint); }

/* ---- sections -------------------------------------------------------- */

section { padding: clamp(38px, 5.5vw, 60px) 0; }
section.alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 1.4rem; }

.grid { display: grid; gap: var(--gap-md); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The game's SurfaceCard: the card colour, 8px, and a soft lift off the
   canvas — no outline. */
.card {
  background: var(--surface); border: 0;
  border-radius: var(--radius); padding: var(--gap-lg);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(1, 44, 29, .16); }
.card h3 {
  display: flex; align-items: center; gap: var(--gap-sm);
  margin: 0 0 var(--gap-sm); font-size: 1.02rem;
}
.card .ico {
  flex: none;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent-text);
}
.card .ico svg { width: 18px; height: 18px; display: block; }
.card p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* ---- the season, week by week ---------------------------------------- */

/* Six numbered cards: the same SurfaceCard, with the step's number on the
   crimson disc the game's decision dialogs wear. */
.steps-grid { display: grid; gap: var(--gap-md); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 560px) { .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step-card h3 { align-items: flex-start; }
.step-card .n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-label); font-size: .82rem; font-weight: 800;
}
.tags { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-top: var(--gap-md); }
.tag {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface-2); border-radius: var(--radius-sm); padding: .25rem .6rem;
}

/* ---- languages ------------------------------------------------------- */

.lang-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.lang-chip {
  font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .9rem;
}
.lang-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.lang-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- fair play -------------------------------------------------------- */

/* Three promises, so the row is three up from the first breakpoint rather
   than two-then-one. */
@media (min-width: 560px) and (max-width: 899px) {
  .fair-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- languages -------------------------------------------------------- */

/* The section describes the GAME's four languages; this line admits that
   the chips under it only switch the page, and it has two. */
.lang-note {
  color: var(--ink-faint); font-size: .86rem; margin: 0 0 var(--gap-md);
}

/* ---- footer ---------------------------------------------------------- */

footer.bottom { background: var(--band); color: var(--band-ink); padding: 3rem 0 2.4rem; }
footer.bottom .foot-logo { height: 30px; width: auto; display: block; }
footer.bottom p { color: var(--band-ink-soft); font-size: .88rem; margin: 1rem 0 0; }
.foot-row { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: space-between; }
/* The byline sits under the tagline; the studio's name is a link wherever
   its language puts it, and its X account rides alongside. */
.foot-by {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-sm);
  margin-top: var(--gap-xs) !important;
}
.foot-by a { color: var(--band-ink); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.foot-by a:hover { border-bottom-color: currentColor; }
.foot-x {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--radius-sm); border-bottom: 0 !important;
  background: rgba(255, 255, 255, .09); color: var(--band-ink);
}
.foot-x:hover { background: rgba(255, 255, 255, .18); }
footer.bottom .foot-x svg { height: 14px; width: 14px; display: block; }

/* Right-aligned under the store badges, and set down off them. */
.legal-links {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  justify-content: flex-end; margin-top: var(--gap-lg);
}
.legal-links a {
  color: var(--band-ink-soft); font-size: .86rem; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.legal-links a:hover { color: var(--band-ink); border-bottom-color: currentColor; }

/* ---- the legal pages (support.html, privacy.html, eula.html) ----------- */

.legal { max-width: 76ch; }
.legal h1 { margin-bottom: .3rem; }
.legal .updated { color: var(--ink-faint); font-size: .9rem; margin: 0 0 2.2rem; }
/* The note on top of a translated document: the English version is the
   official one. */
.legal .doc-note {
  margin: 0 0 var(--gap-lg); padding: 10px 14px;
  background: var(--bg-alt); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .9rem;
}
.legal h2 { font-size: 1.22rem; margin: 2.1rem 0 .55rem; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.65; }
.legal ul { padding-inline-start: 1.2rem; margin: .6rem 0 1rem; }
.legal li { margin: .35rem 0; }
.legal a { color: var(--accent-text); }

/* ---- the phone frame -------------------------------------------------- */

/* ONE device, at every size on the page. `.phone-slot` sets how wide the
   device may be; `.phone` fills it and is the query container, so every
   part of the frame is a share of the phone's OWN rendered width. That is
   the point: tying the bezel to a max-width instead draws 300px of chrome
   around a phone its column has squeezed to 250, and the hero's device
   stops matching the row's. */
.phone-slot { display: block; width: 100%; margin: 0 auto; container-type: inline-size; }

.phone {
  display: block; margin: 0; position: relative; width: 100%;
  padding: 3cqw;                       /* 9 / 300 */
  border-radius: 12.667cqw;            /* 38 / 300 */
  background: #0b0e13;
  box-shadow:
    0 0.667cqw 2cqw rgba(0, 0, 0, .25),
    0 8cqw 20cqw rgba(10, 12, 18, .35),
    inset 0 0 0 max(1px, 0.667cqw) #2a2f3a;
}
.phone-screen {
  display: block; position: relative; overflow: hidden;
  border-radius: 10cqw;                /* 30 / 300 */
  aspect-ratio: 430 / 932; background: #101319;
}
/* No notch pill: these captures start at the app's own header, so a notch
   drawn over them lands on the word "Decision time" rather than on a status
   bar. The bezel and the corner radius carry the device on their own. */
.phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- the classics ----------------------------------------------------- */

/* Three fixtures, three devices. The caption sits under its own phone so a
   narrow screen stacks fixture-with-its-shot rather than leaving three
   phones above three paragraphs. */
.match-grid { display: grid; gap: var(--gap-xl); grid-template-columns: 1fr; }
@media (min-width: 620px) { .match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .match-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.match-card { display: flex; flex-direction: column; align-items: center; }
.match-card .phone-slot { max-width: 290px; }
.match-cap { margin-top: var(--gap-lg); text-align: center; max-width: 34ch; }
.match-cap h3 { margin: 0 0 .3em; font-size: 1.02rem; }
.match-cap p { color: var(--ink-soft); font-size: .9rem; margin: 0; }

/* ---- hero grid -------------------------------------------------------- */

.hero-grid { display: grid; gap: var(--gap-xl); align-items: end; grid-template-columns: 1fr; }
.hero-phone { max-width: 300px; justify-self: center; }
@media (min-width: 1020px) {
  .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr); }
  .hero-copy { align-self: center; }
  .hero-phone { justify-self: end; }
}

/* ---- the contact address --------------------------------------------- */

/* The address is not in the page until a person reaches for the link, so
   until then this is a prompt rather than an address: the dotted rule says
   it does something. The selector reads the href, so the moment the script
   swaps in the mailto the link goes back to looking like every other link
   in the document. */
a.mail[href="#"] {
  cursor: pointer; text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* Without JavaScript the reveal link can never reveal anything, so it is
   not shown at all — the <noscript> fallback below takes its place. */
.no-js a.mail { display: none; }

/* That fallback: the address with no address in the source. Three ordinary
   words, with the @ and the dot drawn by CSS, so the markup holds nothing
   an email pattern can match. */
.mail-parts .m-a::after { content: "\000040"; }
.mail-parts .m-b::after { content: "\00002E"; }

/* ---- reveal on scroll ------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- store badges ----------------------------------------------------- */

.store-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 22px; }
/* The official badge artwork carries its own plate and border, so the site
   adds nothing but a size — equal heights, widths as the files come. */
.store-badge { display: block; transition: transform .12s ease; }
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { display: block; height: 52px; width: auto; }
.store-badges--left { justify-content: flex-start; margin: 1.1rem 0 0; }

/* ---- the legend banner ------------------------------------------------ */

.legend-banner {
  margin-top: var(--gap-md); display: block; overflow: hidden;
  background: var(--band); color: var(--band-ink);
  border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.9rem);
  position: relative; box-shadow: var(--shadow);
}
.legend-banner::after {
  content: ""; position: absolute; inset: -20% -8% -20% 62%;
  background: var(--accent); opacity: .20; transform: skewX(-14deg); pointer-events: none;
}
.legend-copy { position: relative; z-index: 1; max-width: 62ch; }
.legend-copy .ico {
  width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); margin-bottom: 1rem;
}
.legend-copy .ico svg { width: 22px; height: 22px; display: block; }
.legend-copy h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.legend-copy p { color: var(--band-ink-soft); margin: 0; max-width: 58ch; }

/* ---- game-landing hero: the game's navy, in both site themes ------------ */

.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(110% 130% at 50% -30%, #0B5538 0%, #01442D 52%, #042A1C 100%);
  padding: clamp(44px, 7vw, 84px) 0 clamp(36px, 5vw, 56px);
}
/* The touchline stripe along the bottom: the crimson, then the yellow. */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6px; z-index: 1;
  background: linear-gradient(90deg, var(--brand-soft) 0 34%, var(--accent) 34% 67%, var(--accent-pale) 67%);
  pointer-events: none;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 55%, rgba(234, 171, 64, .20) 55%, rgba(234, 171, 64, .06) 78%, transparent 78%);
}
/* Half a pitch, ghosted behind the copy the way the driver site ghosts
   the home circuit. */
.hero-pitch {
  position: absolute; right: -4%; bottom: -12%; width: min(58%, 720px); height: auto;
}
.hero-pitch * { fill: none; stroke: #8FBFA4; stroke-opacity: .20; stroke-width: 1.1; stroke-linejoin: round; }
.hero .wrap { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--accent-pale); }
.hero .eyebrow::before { background: var(--accent); }
.hero .lede { color: #b9c1d6; font-size: 1.08rem; }
.hero-logo { width: min(440px, 90%); height: auto; display: block; margin: .4rem 0 1.2rem; }
.hero-copy { text-align: start; max-width: 640px; }
.hero-copy h1 { color: #fff; }
.hero-badges { justify-content: flex-start; margin: 1.4rem 0 .4rem; }
.hero-scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: .2rem;
  margin-top: 1.4rem; color: #cdd4e6; text-decoration: none;
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}
.hero-scroll:hover { color: #fff; }
.hero-scroll svg { animation: hero-bounce 1.6s ease-in-out infinite; }
@keyframes hero-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll svg { animation: none; } }