:root {
  --ink: #090d0b;
  --ink-2: #0e1511;
  --panel: #121b16;
  --panel-soft: #17231c;
  --line: #2c3b31;
  --line-strong: #526252;
  --pitch: #1e513b;
  --pitch-bright: #2e7754;
  --gold: #c9a64b;
  --gold-light: #e5c76e;
  --cream: #f1ebd8;
  --muted: #98a69c;
  --danger: #d86858;
  --success: #78b98f;
  --blue: #83a9b8;
  --display: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --body: "Aptos", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(33, 84, 60, .18), transparent 34rem),
    var(--ink);
  color: var(--cream);
  font-family: var(--body);
  line-height: 1.5;
  font-size: 18px;
  letter-spacing: .005em;
}

button, input { font: inherit; }
button { color: inherit; }

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid rgba(201, 166, 75, .23);
  background: rgba(9, 13, 11, .92);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--display);
  font-stretch: condensed;
  font-size: 15px;
  letter-spacing: .13em;
}

.brand b { color: var(--gold); }

/* Custom letterforms, not the system display stack: the wordmark used to
   render as a different typeface on every OS. */
.brand-crest { display: block; width: 26px; height: 26px; flex: none; }
.brand-word { display: block; width: auto; height: 13px; flex: none; }
/* The wordmark is 180px at full size — wider than the old text logo — so it
   has to give ground before the nav links do. */
@media (max-width: 640px) {
  .brand-crest { width: 22px; height: 22px; }
  .brand-word { height: 9px; }
}

.site-nav nav { display: flex; align-items: center; gap: 8px; }

.nav-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  cursor: pointer;
  font: 700 13px/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-link:hover { color: var(--cream); }
a.nav-link { text-decoration: none; }

.version {
  margin-left: 8px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  color: #6f7d74;
  font: 700 11px/1 var(--mono);
  letter-spacing: .08em;
}

#app { min-height: calc(100vh - 112px); }

.landing { min-height: calc(100vh - 112px); height: auto; overflow: visible; }

.hero {
  position: relative;
  /* min-height, not height: a fixed height plus overflow:hidden clipped the
     start button off-screen entirely on short laptop displays. */
  min-height: calc(100vh - 112px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: #070a08;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/career-tunnel.jpg") center 43% / cover no-repeat;
  filter: saturate(.78) contrast(1.08) brightness(.74);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 7, 5, .94) 0%, rgba(4, 7, 5, .68) 42%, rgba(4, 7, 5, .12) 72%),
    linear-gradient(0deg, var(--ink) 0%, transparent 52%);
}

.hero-content {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 7vh, 80px) 32px clamp(24px, 6vh, 70px);
}

/* Short viewports: tighten everything so the hero still fits one screen. */
@media (max-height: 720px) {
  .hero-copy { margin-top: 14px; font-size: 15px; }
  .hero-actions { margin-top: 16px; }
  .hero-notes { margin-top: 18px !important; }
  .eyebrow { margin-bottom: 10px !important; }
}
@media (max-height: 600px) {
  .hero-notes { display: none; }
}

/* Most laptops sit between 700 and 900px tall. The aggressive tiers below only
   kicked in under 680, so ordinary screens kept desktop-sized padding and had
   to scroll for the third option. This tier just removes air. */
@media (max-height: 900px) {
  /* The desktop min-heights on these panels stretched their grid children,
     adding ~300px of empty space on the Scouting tab alone. */
  .pro-career-panel, .event-panel { min-height: 0 !important; }
  .event-content { padding: 20px 22px !important; }
  .event-content h1 { font-size: clamp(24px, 2.8vw, 34px) !important; }
  .event-description { margin: 10px 0 14px !important; font-size: 15px !important; }
  .choice-list .choice { padding: 12px 16px !important; }
  .career-topbar .topbar-player, .career-topbar .topbar-stat { min-height: 56px; }
  .season-strip { padding: 9px 15px !important; }
  .pro-section { padding: 16px 18px !important; }
  .modal-body { padding: 20px 24px !important; }
  .modal-body h2 { font-size: clamp(24px, 3.4vw, 38px) !important; }
  .season-route-grid { gap: 9px !important; }
  .season-route-card { padding: 13px 14px !important; }
  .plan-options { gap: 7px !important; margin-top: 12px !important; }
  .plan-choice { padding: 10px 14px !important; }
  .manager-word { margin: 10px 0 !important; padding: 10px 13px !important; }
}

/* Short screens: tighten the matchday flow so a fixture fits without a
   scroll marathon. Everything stays readable, just less air. */
@media (max-height: 780px) {
  .career-topbar .topbar-player, .career-topbar .topbar-stat { min-height: 52px; padding: 7px 13px; }
  .topbar-player strong { font-size: 17px; }
  .fixture-hero { padding: 12px 16px !important; }
  .fixture-hero h1 { font-size: clamp(20px, 2.6vw, 30px) !important; }
  .fixture-hero p { font-size: 13px; }
  .match-intel { gap: 8px !important; }
  .duel-card { padding: 11px 13px !important; }
  .run-twist { padding: 10px 13px !important; }
  .run-twist h3 { font-size: 15px; }
  /* Fit every session on one row so a 4th option does not cost a whole row. */
  .training-grid, .training-choice-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important; gap: 7px !important; }
  .training-card { padding: 11px 12px !important; }
  .training-choice-grid .training-card { min-height: 132px !important; }
  .training-card strong { font-size: 14px !important; }
  .training-card span { font-size: 11.5px !important; line-height: 1.35 !important; }
  .training-card small { font-size: 10px !important; }
  .camp-heading { margin-bottom: 12px !important; }
  .focused-camp-heading h1 { font-size: 21px !important; }
  .focused-camp-heading p { font-size: 12.5px; }
  .season-strip { padding: 8px 14px !important; }
  .camp-section .match-intel { margin-top: 12px !important; }
  .duel-card h3 { font-size: 16px !important; }
  .duel-card strong { font-size: 12.5px !important; }
  .intel-strip { padding: 8px 12px !important; }
  .run-twist { margin: 8px 0 10px !important; }
  .brief-compact { padding: 8px 13px !important; }

  /* Live match modal: fit three choices without an internal scrollbar. */
  .match-choice-modal .modal-body { padding: 12px 18px 8px !important; }
  .match-choice-modal .modal-body h2 { font-size: clamp(19px, 2.2vw, 25px) !important; margin-bottom: 5px !important; }
  .match-choice-modal .modal-body > p { margin: 5px 0 !important; font-size: 13px !important; }
  .match-clock { margin-bottom: 6px !important; }
  .match-clock span { font-size: 22px !important; }
  .match-pulse { padding: 7px 0 !important; gap: 9px !important; }
  .match-pulse small { font-size: 9.5px !important; }
  .match-pulse b { font-size: 15px !important; }
  .live-comment { margin: 6px 0 !important; padding: 6px 0 !important; font-size: 12px !important; }
  .live-score { padding: 9px 18px !important; }
  .live-score strong { font-size: 21px !important; }
  .match-options .choice { padding: 9px 13px !important; }
  .match-options .choice strong { font-size: 14px !important; }
  .match-options .choice small { font-size: 12px !important; }

  /* Game-plan pick: three cards plus the team-sheet note, on one screen. */
  .modal-header { padding: 7px 14px !important; }
  .matchday-modal .modal-body { padding: 13px 18px !important; }
  .matchday-modal .turn-pro-stamp { margin: 0 0 8px !important; padding: 5px 9px; font-size: 12px; letter-spacing: .1em; }
  .matchday-modal h2 { font-size: clamp(18px, 2.2vw, 24px) !important; margin-bottom: 5px !important; }
  .matchday-modal .event-kicker { margin-bottom: 5px !important; font-size: 11px !important; }
  .matchday-fixture { margin: 3px 0 !important; font-size: 12px !important; }
  .manager-word { margin: 8px 0 !important; padding: 8px 12px !important; font-size: 12.5px !important; line-height: 1.4 !important; }
  .manager-word small { margin-top: 3px !important; font-size: 10px !important; }
  .plan-options { gap: 6px !important; margin-top: 9px !important; }
  .plan-choice { padding: 8px 12px !important; }
  .plan-choice strong { font-size: 13.5px !important; }
  .plan-choice small { font-size: 11.5px !important; line-height: 1.3 !important; }
  .plan-tags i { padding: 2px 5px !important; font-size: 9px !important; }
}

/* Laptop-height screens: strip the matchday page back to what you act on, so
   preparing for a fixture is a glance rather than a scroll. */
@media (max-height: 680px) {
  .career-topbar .topbar-player, .career-topbar .topbar-stat { min-height: 40px; padding: 4px 10px; }
  .topbar-player strong { font-size: 14px; }
  .topbar-stat b { margin-top: 2px; font-size: 14px; }
  .topbar-player span, .topbar-stat span { font-size: 9.5px; }
  .pro-topbar .topbar-stat small { font-size: 9px !important; margin-top: 1px !important; }
  .topbar-club { gap: 7px !important; }
  .topbar-club .crest { width: 23px; height: 26px; }
  .topbar-club .crest i { font-size: 8px; }
  .fixture-bar-main h1 .crest-sm { width: 17px; height: 19px; margin: 0 3px; vertical-align: -3px; }
  .fixture-bar-main h1 .crest-sm i { font-size: 6.5px; }

  /* Compact player card so the sidebar never drives the page height. */
  .fut-card { padding: 9px 11px 8px !important; }
  .fut-portrait { min-height: 56px !important; }
  .fut-portrait .pixel-player { --px: 4px !important; }
  .fut-badges b { font-size: 26px !important; }
  .fut-id { margin-top: 5px !important; }
  .fut-id strong { font-size: 19px !important; }
  .fut-nick { font-size: 12px !important; }
  .fut-role { margin-top: 3px !important; padding: 2px 7px !important; font-size: 10px !important; }
  .fut-stats { margin-top: 8px !important; padding-top: 8px !important; }
  .fut-stats b { font-size: 15px !important; }
  .identity-sub { padding: 7px 12px !important; font-size: 11px !important; }
  .stats-list { padding: 9px 13px 6px !important; }
  .stat-line { margin-bottom: 7px !important; }
  .status-list { padding: 8px 13px !important; }
  .panel-tabs button { padding: 9px 5px !important; }
  .fixture-hero { padding: 9px 14px !important; }
  .fixture-hero h1 { font-size: clamp(18px, 2.2vw, 24px) !important; }
  .fixture-hero p { font-size: 12px; }
  .duel-card { padding: 8px 11px !important; }
  .duel-card h3 { font-size: 14px !important; margin: 2px 0 !important; }
  .duel-card p { font-size: 11.5px !important; }
  .duel-card strong { font-size: 11.5px !important; line-height: 1.35 !important; }
  .intel-strip { padding: 6px 11px !important; }
  .intel-strip b { font-size: 13px !important; }
  .camp-heading { margin-bottom: 9px !important; }
  .focused-camp-heading h1 { font-size: 18px !important; }
  .focused-camp-heading p, .focused-camp-heading .event-kicker { display: none; }
  .training-choice-grid .training-card { min-height: 88px !important; padding: 9px 11px !important; }
  .training-card span { font-size: 11px !important; }
  .training-card em { padding-top: 6px !important; }
  .camp-heading { margin-bottom: 6px !important; }
  .game-shell { padding-top: 8px !important; }
  .run-twist { margin: 6px 0 8px !important; padding: 8px 11px !important; }
  .run-twist h3 { font-size: 13px !important; }
  .run-twist p { font-size: 11.5px !important; }
  .extras-panel summary { padding: 8px 13px !important; }

  /* Youth year decision: keep all three options on one screen. The panels'
     desktop min-heights plus choice-list's margin-top:auto were pinning the
     choices to the bottom of a 610px block. */
  .event-panel, .pro-career-panel { min-height: 0 !important; }
  .event-content { padding: 14px 16px !important; }
  .event-content h1 { font-size: clamp(20px, 2.4vw, 27px) !important; }
  .event-description { margin: 6px 0 10px !important; font-size: 13px !important; }
  .choice-list .choice { padding: 9px 13px !important; }
  .choice-list .choice strong { font-size: 14px !important; }
  .choice-list .choice small { font-size: 12px !important; }
  .outcome-story { font-size: 14px !important; }
}

.choice-risk.risk-safe { color: var(--success); border-color: rgba(120,185,143,.5); }
.choice-risk.risk-compete { color: var(--gold-light); border-color: rgba(201,166,75,.55); }
.choice-risk.risk-gamble { color: var(--danger); border-color: rgba(216,104,88,.6); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--gold-light);
  font: 800 12px/1.2 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow::before { content: ""; width: 42px; height: 1px; background: var(--gold); }

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--display);
  /* Scale to the smaller of width and height, so a wide-but-short laptop does
     not get a 130px headline that pushes the CTA off the screen. */
  font-size: clamp(44px, min(9.6vw, 13vh), 132px);
  line-height: .77;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero h1 em {
  display: block;
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .8em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.06em;
  text-transform: none;
}

.hero-copy {
  max-width: 610px;
  margin: 28px 0 0;
  color: #c8d0c9;
  font-size: clamp(16px, 2vw, 19px);
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 19px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--panel);
  color: var(--cream);
  cursor: pointer;
  font: 800 13px/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn-primary { border-color: var(--gold); background: var(--gold); color: #10120e; }
.btn-primary:hover:not(:disabled) { background: var(--gold-light); }
.btn-ghost { background: rgba(12, 17, 14, .72); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: 12px; }
.btn-danger { border-color: rgba(216, 104, 88, .6); color: #f0aaa0; }

.hero-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  max-width: 680px;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 30px;
  color: #9dab9f;
  font: 700 12px/1 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-notes span { padding: 12px 15px; border: 1px solid var(--line); background: rgba(9,13,11,.65); }
.hero-notes span + span { border-left: 0; }
.hero-notes b { margin-right: 7px; color: var(--gold); }

.landing-info { border-top: 1px solid var(--line); background: linear-gradient(180deg, #0d1711, #090d0b 80%); }
.landing-info-inner { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 82px 0 96px; }
.landing-info-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 58px; align-items: end; }
.landing-info-head h2, .landing-faq h2 { max-width: 680px; margin: 0; color: var(--cream); font: 800 clamp(35px, 5vw, 60px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.landing-info-head > p { max-width: 460px; margin: 0 0 4px; color: #bbc6bd; font-size: 17px; line-height: 1.65; }
.landing-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 52px; }
.info-card { min-height: 250px; padding: 24px 23px 28px; border: 1px solid var(--line); background: rgba(18, 27, 22, .75); }
.info-card > span { color: var(--gold); font: 800 13px/1 var(--mono); }
.info-card h3 { margin: 52px 0 11px; font: 800 24px/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.info-card p { margin: 0; color: #b8c3ba; font-size: 15px; line-height: 1.6; }
.landing-features { display: grid; grid-template-columns: .85fr 1.15fr; gap: 58px; margin-top: 78px; padding-top: 48px; border-top: 1px solid var(--line); }
.feature-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.feature-list li { padding-left: 20px; position: relative; color: #c4cec4; font-size: 16px; line-height: 1.55; }
.feature-list li::before { content: "▸"; position: absolute; left: 0; color: var(--gold); }
.feature-list b { color: var(--cream); }
@media (max-width: 760px) { .landing-features { grid-template-columns: 1fr; gap: 24px; } }

.landing-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 58px; margin-top: 78px; padding-top: 48px; border-top: 1px solid var(--line); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; color: var(--cream); cursor: pointer; font: 800 16px/1.3 var(--body); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold); font: 400 24px/1 var(--body); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 620px; margin: -4px 36px 19px 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.noscript-content { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0; }
.noscript-content h1 { margin: 0 0 18px; font: 800 48px/.95 var(--display); text-transform: uppercase; }
.noscript-content p { color: #b8c3ba; font-size: 17px; line-height: 1.6; }

.career-intro { position: relative; min-height: calc(100vh - 112px); display: grid; place-items: start center; overflow: hidden; padding: 48px 20px 52px; background: #070b08; isolation: isolate; }
.career-intro::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,9,6,.95), rgba(5,9,6,.54)), url("assets/career-tunnel.jpg") center / cover; filter: saturate(.78) brightness(.72); }
.career-intro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 45%, rgba(46,119,84,.22), transparent 42%), linear-gradient(0deg, rgba(7,11,8,.75), transparent 55%); pointer-events: none; }
.intro-frame { width: min(760px, 100%); }
.intro-chapter { margin: 0 0 22px; color: var(--gold-light); font: 800 12px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.intro-panel { padding: clamp(24px, 3vw, 32px); border: 1px solid rgba(201,166,75,.54); background: rgba(9,14,11,.78); box-shadow: 0 20px 80px rgba(0,0,0,.25); }
.intro-place { margin: 0 0 14px; color: var(--gold-light); font: 800 13px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.intro-panel h1 { margin: 0; color: var(--cream); font: 800 clamp(48px, 9vw, 86px)/.86 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.intro-rule { width: 100%; height: 1px; margin: 20px 0 20px; background: linear-gradient(90deg, var(--gold), transparent); }
.intro-copy { min-height: 190px; color: #d0d8d0; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; }
.intro-copy p { margin: 0 0 17px; }
.intro-copy p:last-child { margin-bottom: 0; }
.intro-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--gold); animation: intro-blink .8s steps(1) infinite; }
@keyframes intro-blink { 50% { opacity: 0; } }
.intro-skip { display: block; margin: 18px 0 0; padding: 0; border: 0; background: transparent; color: #8e9a90; cursor: pointer; font: 700 12px/1.3 var(--body); letter-spacing: .04em; }
.intro-skip[hidden] { display: none; }
.intro-skip:hover { color: var(--cream); }
.intro-begin { margin-top: 22px; }
.intro-begin[hidden] { display: none; }
body.intro-mode .site-footer { display: none; }
body.intro-mode #app { min-height: calc(100vh - 58px); }
body.intro-mode .career-intro { min-height: calc(100vh - 58px); }

.landing-grid {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-left: 1px solid var(--line);
}

.feature {
  min-height: 230px;
  padding: 34px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 30, 24, .65), rgba(10, 15, 12, .45));
}

.feature-number { color: var(--gold); font: 800 13px/1 var(--body); }
.feature h2 { margin: 38px 0 9px; font: 800 23px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.feature p { margin: 0; color: #b8c3ba; font-size: 16px; line-height: 1.55; }

.section-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 44px 0 74px; }
/* Draft: nothing is clipped. The old version used fixed heights and
   overflow:hidden to force a fit, which hid most of the stats and cut the
   scouting copy in half. Now the card is sized by its content and the eight
   attributes sit in two columns so they all show. */
.draft-shell { min-height: calc(100vh - 112px); display: flex; flex-direction: column; padding: 18px 0 16px; }
.draft-shell .section-head { flex: 0 0 auto; margin-bottom: 12px; }
.draft-shell .section-head h1 { font-size: clamp(28px, 3.2vw, 44px); }
.draft-shell .section-head .eyebrow { margin-bottom: 8px; }
.draft-shell .draft-grid { flex: 0 0 auto; align-items: stretch; }
.draft-shell .prospect-card { min-height: 0; }
.prospect-mould { margin: 0 0 8px; color: #c4cec4; font-size: 13.5px; line-height: 1.45; }
.prospect-mould b { color: var(--gold-light); }
.draft-reroll { flex: 0 0 auto; display: flex; justify-content: center; margin-top: 9px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-head h1, .section-head h2 { margin: 0; font: 800 clamp(34px, 5vw, 64px)/.95 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.section-head p { max-width: 520px; margin: 0; color: #b8c3ba; font-size: 16px; }

.content-page { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 58px 0 88px; }
.page-masthead { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: end; padding-bottom: 46px; border-bottom: 1px solid var(--line); }
.page-masthead h1 { max-width: 760px; margin: 0; font: 800 clamp(48px, 7vw, 84px)/.88 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.page-lede { max-width: 690px; margin: 25px 0 0; color: #bbc6bd; font-size: 19px; line-height: 1.65; }
.page-hero-art { min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end; padding: 25px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(46,119,84,.36), rgba(10,16,12,.82)), url("assets/career-tunnel.jpg") center / cover; }
.page-hero-art strong { color: var(--gold-light); font: 900 clamp(48px, 8vw, 88px)/.82 var(--display); letter-spacing: -.06em; }
.page-hero-art span { margin-top: 17px; color: #e1e5da; font: 800 12px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.page-hero-art--archive { background: linear-gradient(145deg, rgba(116,77,29,.6), rgba(10,16,12,.9)), url("assets/career-tunnel.jpg") center / cover; }
.page-hero-art--faq { background: linear-gradient(145deg, rgba(35,85,116,.54), rgba(10,16,12,.9)), url("assets/career-tunnel.jpg") center / cover; }
.page-hero-art--privacy { background: linear-gradient(145deg, rgba(45,102,76,.6), rgba(10,16,12,.9)), url("assets/career-tunnel.jpg") center / cover; }
.page-block { margin-top: 58px; }
.page-block-head { display: grid; grid-template-columns: 1fr .7fr; gap: 50px; align-items: end; margin-bottom: 28px; }
.page-block-head h2 { max-width: 670px; margin: 0; font: 800 clamp(34px, 5vw, 58px)/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.page-block-head > p { margin: 0 0 3px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* Terms and privacy: long-form prose, narrower measure, quieter headings. */
.legal-meta { margin: 18px 0 0; color: var(--muted); font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.legal-block { max-width: 860px; margin-top: 44px; }
.legal-block h2 { margin: 0 0 16px; font: 800 clamp(24px, 3vw, 34px)/1.05 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: var(--cream); }
.legal-block p { margin: 0 0 14px; color: #c4cec4; font-size: 16px; line-height: 1.65; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-block b { color: var(--cream); }
.legal-block code { padding: 2px 5px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 13px; }
.legal-block a, .legal-page .privacy-list a, .about-page a:not(.btn) { color: var(--gold-light); text-underline-offset: 3px; }
.guide-steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.guide-step { min-height: 285px; padding: 22px 19px 24px; border-right: 1px solid var(--line); background: linear-gradient(150deg, rgba(24,39,30,.88), rgba(12,18,15,.86)); }
.guide-step:last-child { border-right: 0; }
.guide-step > span, .value-grid > article > span, .privacy-list article > span { color: var(--gold); font: 800 12px/1.2 var(--mono); letter-spacing: .08em; }
.guide-step h3, .metric-grid h3, .value-grid h3, .privacy-list h3 { margin: 53px 0 10px; font: 800 23px/1.05 var(--display); text-transform: uppercase; }
.guide-step p, .metric-grid p, .value-grid p, .privacy-list p { margin: 0; color: #b8c3ba; font-size: 15px; line-height: 1.6; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.metric-grid article { min-height: 195px; padding: 24px; border: 1px solid var(--line); background: var(--panel); }
.metric-grid h3 { margin: 0 0 13px; }
.metric-grid b { color: var(--cream); }
.guide-callout { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-top: 64px; padding: 28px 30px; border: 1px solid var(--gold); background: linear-gradient(100deg, rgba(201,166,75,.14), rgba(20,30,24,.68)); }
.guide-callout h2 { max-width: 680px; margin: 0; font: 800 clamp(30px, 4vw, 48px)/.95 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.guide-callout p:not(.eyebrow) { max-width: 700px; margin: 14px 0 0; color: #c8d0c9; font-size: 16px; line-height: 1.55; }
.guide-callout .btn { flex: 0 0 auto; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.value-grid > article { min-height: 245px; padding: 23px; border-right: 1px solid var(--line); background: var(--panel); }
.value-grid > article:last-child { border-right: 0; }
.value-grid h3 { margin-top: 50px; }
.about-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; padding-top: 46px; border-top: 1px solid var(--line); }
.about-split h2, .privacy-note h2 { margin: 0; font: 800 clamp(34px, 5vw, 58px)/.95 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.about-split p { margin: 0 0 17px; color: #b8c3ba; font-size: 17px; line-height: 1.65; }
.page-faq-list { border-top: 1px solid var(--line); }
.page-faq-list details { border-bottom: 1px solid var(--line); }
.page-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 21px 0; color: var(--cream); cursor: pointer; font: 800 18px/1.35 var(--body); list-style: none; }
.page-faq-list summary::-webkit-details-marker { display: none; }
.page-faq-list summary::after { content: "+"; color: var(--gold); font: 400 26px/1 var(--body); }
.page-faq-list details[open] summary::after { content: "−"; }
.page-faq-list details p { max-width: 820px; margin: -3px 40px 22px 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.privacy-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.privacy-list article { display: grid; grid-template-columns: 42px 1fr; gap: 12px; min-height: 190px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.privacy-list h3 { margin: 0 0 10px; }
.privacy-note { margin-top: 64px; padding: 28px 30px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.08); }
.privacy-note h2 { margin-top: 0; }
.privacy-note > p:last-child { max-width: 780px; margin: 16px 0 0; color: #c8d0c9; font-size: 16px; line-height: 1.65; }

.draft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.prospect-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #18271e, #0c120f 65%);
  transition: transform .2s ease, border-color .2s ease;
}

.prospect-card:hover, .prospect-card:focus-within { transform: translateY(-4px); border-color: var(--gold); }
.prospect-card::after { content: attr(data-number); position: absolute; right: 0; top: -14px; color: rgba(201,166,75,.07); font: 900 92px/1 var(--display); pointer-events: none; }

/* Header: sprite, identity and OVR on one row, so the portrait no longer
   costs a 175px band before any information appears. */
.prospect-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(201,166,75,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,166,75,.05) 1px, transparent 1px),
    radial-gradient(circle at 18% 50%, rgba(46,119,84,.3), transparent 68%);
  background-size: 14px 14px, 14px 14px, auto;
}
.prospect-portrait { display: grid; place-items: center; }
.prospect-portrait .pixel-player { --px: 4px; }
.prospect-sub { margin: 3px 0 0; color: var(--muted); font: 700 11px/1.3 var(--body); text-transform: uppercase; }

.pixel-player {
  --px: 6px;
  display: grid;
  grid-template-columns: repeat(12, var(--px));
  grid-auto-rows: var(--px);
  width: calc(var(--px) * 12);
  image-rendering: pixelated;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.35));
  animation: sprite-bob 2.6s ease-in-out infinite;
}
.pixel-player i { width: var(--px); height: var(--px); }

@keyframes sprite-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-player { animation: none; }
}

.prospect-body { flex: 1; padding: 13px 15px 15px; display: flex; flex-direction: column; }
.prospect-origin { margin: 0; color: var(--gold); font: 700 11px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.prospect-card h3 { margin: 3px 0 0; font: 800 22px/1 var(--display); text-transform: uppercase; }
.prospect-story { margin: 0 0 11px; color: #a9b4ab; font-size: 12.5px; line-height: 1.45; }
.trait-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.tag { min-height: 34px; display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--line-strong); color: #e2e7e2; font: 800 14px/1 var(--body); letter-spacing: .02em; text-transform: uppercase; }
.potential-label { display: flex; justify-content: space-between; margin-bottom: 9px; color: #b9c4bb; font: 700 12px/1.2 var(--body); text-transform: uppercase; }
.potential-dots { display: flex; gap: 5px; margin-bottom: 22px; }
.potential-dots i { width: 100%; height: 5px; background: #2b3730; }
.potential-dots i.on { background: var(--gold); }
.money-tag { border-color: rgba(201,166,75,.65); color: var(--gold-light); }
.prospect-stats { margin-top: auto; margin-bottom: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.prospect-legend { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.prospect-legend span { display: flex; align-items: center; gap: 5px; }
.prospect-legend i, .prospect-legend em { display: inline-block; width: 11px; height: 5px; background: var(--gold); }
.prospect-legend em { background: #526057; }
.prospect-legend b { margin-left: auto; color: var(--gold-light); font: 700 10px/1 var(--body); white-space: nowrap; }
/* Two columns: all eight attributes visible in four rows. */
.prospect-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.prospect-stat { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.prospect-stat > abbr { color: #c9d1ca; font: 800 10px/1 var(--mono); text-decoration: none; }
.prospect-stat > div { position: relative; height: 5px; overflow: hidden; background: #253029; }
.prospect-stat i, .prospect-stat em { position: absolute; top: 0; bottom: 0; }
.prospect-stat i { left: 0; z-index: 2; background: var(--gold); }
.prospect-stat em { z-index: 1; background: #56635a; }
.prospect-stat b { font: 700 11px/1 var(--mono); text-align: right; white-space: nowrap; }
.prospect-stat b small { color: var(--muted); font-size: 9px; font-weight: 700; }
.prospect-card .btn { width: 100%; min-height: 42px; }

@media (min-width: 981px) and (max-height: 720px) {
  .draft-shell { padding-top: 12px; }
  .draft-shell .section-head { margin-bottom: 8px; }
  .draft-shell .section-head h1 { font-size: clamp(24px, 2.6vw, 34px); }
  .draft-shell .section-head > p { font-size: 13px; }
  .prospect-head { padding: 9px 13px; }
  .prospect-card h3 { font-size: 19px; }
  .prospect-body { padding: 11px 13px 12px; }
  .prospect-mould { margin-bottom: 6px; font-size: 12.5px; }
  .prospect-story { margin-bottom: 8px; font-size: 12px; }
  .prospect-stats { margin-bottom: 10px; padding-top: 8px; }
  .prospect-card .btn { min-height: 38px; }
}

/* At tablet widths, three narrow columns make names and scouting notes hard
   to compare. Two columns keep the information density without turning the
   draft into a long single-card list. */
@media (min-width: 761px) and (max-width: 980px) {
  .draft-shell .section-head { align-items: start; flex-direction: column; gap: 9px; }
  .draft-shell .section-head > p { max-width: 720px; }
  .draft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draft-grid .prospect-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 14px) / 2); }
}

.game-shell { width: min(1280px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 60px; }

.career-topbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(90px, .45fr) minmax(170px, .7fr);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background: #0d1410;
}
.pro-topbar { grid-template-columns: minmax(210px, 1.25fr) minmax(165px, .85fr) minmax(120px, .6fr) 74px; }
.pro-topbar .topbar-stat small { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); font: 700 10px/1.15 var(--body); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-club strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture-bar-main h1 .crest-sm { vertical-align: -4px; }

.topbar-player, .topbar-stat { min-height: 66px; display: flex; flex-direction: column; justify-content: center; padding: 10px 15px; border-right: 1px solid var(--line); }
.topbar-player, .topbar-stat { min-width: 0; overflow: hidden; }
.topbar-player { background: linear-gradient(90deg, rgba(46,119,84,.2), transparent); }
.topbar-player strong { font: 800 20px/1 var(--display); text-transform: uppercase; }
.topbar-player span, .topbar-stat span { color: #aeb9b0; font: 700 12px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.topbar-stat b { margin-top: 6px; font: 800 18px/1 var(--body); color: var(--cream); }

.game-layout { display: grid; grid-template-columns: minmax(500px, 1.65fr) minmax(330px, .85fr); gap: 14px; align-items: start; }
.game-layout > * { min-width: 0; }

/* The status panel is a reference sidebar, not a reason to scroll the page.
   Pinning it and letting it scroll internally means page height is driven by
   the thing you are actually acting on. */
@media (min-width: 981px) {
  .player-panel {
    position: sticky;
    top: 66px;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.game-panel { border: 1px solid var(--line); background: rgba(15, 23, 18, .88); }
.panel-label { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--gold); font: 800 13px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }

.player-card-head { min-height: 130px; display: grid; place-items: center; border-bottom: 1px solid var(--line); background: radial-gradient(circle, rgba(46,119,84,.28), transparent 62%); }
.player-card-head .pixel-player { --px: 7px; }
.player-identity { padding: 18px 16px 14px; border-bottom: 1px solid var(--line); }
.player-identity h2 { margin: 0 0 5px; font: 800 27px/.95 var(--display); text-transform: uppercase; }
.player-identity p { margin: 0; color: #b5c0b7; font: 700 13px/1.5 var(--body); text-transform: uppercase; }
.overall { float: right; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--gold); color: var(--gold-light); font: 900 19px/1 var(--mono); }

.stats-list { padding: 14px 16px 10px; }
.stat-line { display: grid; grid-template-columns: 72px 1fr 27px; gap: 8px; align-items: center; margin-bottom: 10px; }
.stat-line label { color: #d3dad4; font: 700 13px/1 var(--body); text-transform: uppercase; }
.bar { height: 4px; background: #27332b; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--pitch-bright), var(--gold)); transition: width .45s ease; }
.stat-line b { text-align: right; font: 800 15px/1 var(--body); }

.career-record { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.record-cell { padding: 13px 5px; text-align: center; border-right: 1px solid var(--line); }
.record-cell:last-child { border-right: 0; }
.record-cell b { display: block; font: 800 15px/1 var(--mono); }
.record-cell span { color: #aeb9b0; font: 700 11px/1.2 var(--body); text-transform: uppercase; }

.event-panel { min-height: 610px; display: flex; flex-direction: column; }
.pro-career-panel { min-height: 690px; }
.pro-section { padding: clamp(22px, 3vw, 36px); }
.pro-section > h1, .camp-heading h1 { margin: 0; font: 800 clamp(28px, 3vw, 42px)/1.05 var(--display); letter-spacing: -.025em; }
.pro-intro { max-width: 700px; margin: 14px 0 24px; color: #bbc6bd; font-size: 16px; }
.opponent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.opponent-card { position: relative; min-height: 330px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(150deg, #18271f, #0d1511); color: var(--cream); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.opponent-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.opponent-number { color: var(--gold); font-size: 12px; font-weight: 800; }
.opponent-rating { position: absolute; top: 15px; right: 16px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--gold); color: var(--gold-light); font-size: 19px; font-weight: 900; }
.opponent-card small { margin-top: 76px; color: var(--gold); font-size: 12px; text-transform: uppercase; }
.opponent-card strong { margin-top: 9px; font: 800 25px/1.05 var(--display); }
.opponent-card em { margin-top: 11px; color: var(--muted); font: normal 14px/1.45 var(--body); }
.opponent-reward { margin-top: auto; padding-top: 25px; color: var(--success); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.camp-blocks { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.camp-blocks i { width: 30px; height: 7px; background: #354239; }
.camp-blocks i.on { background: var(--gold); }
.selected-opponent { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; padding: 16px 18px; border: 1px solid var(--gold); background: rgba(201,166,75,.07); }
.selected-opponent div { display: flex; flex-direction: column; }
.selected-opponent small { color: var(--gold); font-size: 11px; text-transform: uppercase; }
.selected-opponent strong { margin-top: 5px; font-size: 21px; }
.selected-opponent span { margin-top: 4px; color: var(--muted); font-size: 13px; }
.fixture-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; }
.fixture-hero h1 { margin: 0; font: 800 clamp(28px, 3.3vw, 44px)/1.05 var(--display); letter-spacing: -.03em; }
.fixture-hero h1 span { margin: 0 6px; color: var(--muted); font-size: .55em; font-weight: 500; }
.fixture-hero > div > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.fixture-rating { display: grid; place-items: center; flex: 0 0 78px; height: 78px; border: 1px solid var(--gold); }
.fixture-rating small { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.fixture-rating b { color: var(--gold-light); font-size: 25px; }
.fixture-route { display: grid; grid-template-columns: 1fr 24px 1.35fr 24px 1fr; align-items: center; margin: 4px 0 18px; padding: 13px; border: 1px solid var(--line); background: #0d1511; }
.fixture-route span { min-height: 54px; padding: 9px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.fixture-route span b { display: block; margin-top: 6px; color: var(--cream); font-size: 14px; text-transform: none; }
.fixture-route span.current { border: 1px solid var(--gold); color: var(--gold); }
.fixture-route span.done { opacity: .68; }
.fixture-route > i { height: 1px; background: var(--line-strong); }
.cup-route { grid-template-columns: 1fr 16px 1.25fr 16px 1fr 16px 1fr; }
.fixture-facts { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 12px; border: 1px solid var(--line); }
.fixture-facts span { padding: 11px; border-right: 1px solid var(--line); }
.fixture-facts span:last-child { border-right: 0; }
.fixture-facts small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.fixture-facts b { display: block; margin-top: 6px; font-size: 15px; }
.season-brief { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 12px; padding: 15px 17px; border: 1px solid rgba(201,166,75,.58); background: linear-gradient(100deg, rgba(201,166,75,.11), rgba(17,26,21,.9)); }
.season-brief h3 { margin: 0; font: 800 21px/1.05 var(--display); }
.season-brief p:not(.event-kicker) { max-width: 650px; margin: 7px 0 0; color: #bdc8bf; font-size: 14px; line-height: 1.45; }
.season-brief > span { min-width: 78px; padding-left: 16px; border-left: 1px solid var(--line-strong); text-align: right; }
.season-brief > span b { display: block; color: var(--gold-light); font: 800 20px/1 var(--mono); }
.season-brief > span small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.scouting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 26px; }
.scouting-grid article { min-height: 150px; padding: 15px; border: 1px solid var(--line); background: #111a15; }
.scouting-grid h3 { margin: 0; font-size: 18px; }
.scouting-grid article > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.camp-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.action-group-title { margin: 21px 0 10px; color: var(--gold); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.training-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.training-card { min-height: 142px; display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border: 1px solid var(--line); background: #111a15; color: var(--cream); text-align: left; cursor: pointer; }
.training-card:hover:not(:disabled) { border-color: var(--gold); background: #18251d; }
.training-card:disabled, .free-action:disabled { opacity: .38; cursor: not-allowed; }
.training-card small { color: var(--gold); font-size: 11px; text-transform: uppercase; }
.training-card strong { margin-top: 8px; font-size: 16px; }
.training-card span { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.free-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.free-action { min-height: 90px; padding: 13px; border: 1px dashed var(--line-strong); background: #0e1612; color: var(--cream); text-align: left; cursor: pointer; }
.free-action:hover:not(:disabled) { border-color: var(--success); }
.free-action strong { display: block; font-size: 14px; }
.free-action span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.retire-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.season-strip { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.season-strip strong { font: 800 13px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.moves { display: flex; gap: 6px; }
.moves i { width: 24px; height: 4px; background: #314037; }
.moves i.on { background: var(--gold); }

.event-content { flex: 1; display: flex; flex-direction: column; padding: clamp(22px, 4vw, 42px); }
.event-kicker { margin: 0 0 14px; color: var(--gold); font: 800 13px/1.2 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.event-content h1 { max-width: 650px; margin: 0; font: 800 clamp(28px, 3.5vw, 46px)/1.02 var(--display); letter-spacing: -.02em; text-transform: none; }
.event-description { max-width: 650px; margin: 20px 0 28px; color: #c8d0ca; font-size: 17px; line-height: 1.65; }

.choice-list { margin-top: auto; display: grid; gap: 8px; }
.choice {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #111a15;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.choice:hover { transform: translateX(3px); border-color: var(--gold); background: #18251d; }
.choice strong { display: block; font-size: 17px; }
.choice small { display: block; margin-top: 6px; color: #bdc7bf; font: 15px/1.4 var(--body); }
.choice-risk { color: var(--gold); font: 800 11px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.choice-outcome { margin: auto 0; }
.choice-outcome h1 { max-width: 600px; }
.outcome-story { max-width: 650px; margin: 22px 0; color: #d4dbd5; font-size: 18px; line-height: 1.65; }
.outcome-changes { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 28px; }
.outcome-changes span { min-width: 108px; padding: 12px 14px; border: 1px solid var(--line); background: #0e1712; }
.outcome-changes small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.outcome-changes b { display: block; margin-top: 7px; font-size: 19px; }
.outcome-changes .positive b { color: var(--success); }
.outcome-changes .negative b { color: var(--danger); }

.journey-panel { min-height: 0; margin-top: 14px; }
.journey-list { display: grid; grid-template-columns: repeat(3, 1fr); max-height: 220px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.journey-entry { position: relative; padding: 14px 14px 14px 34px; border-bottom: 1px solid rgba(44,59,49,.62); }
.journey-entry::before { content: ""; position: absolute; left: 16px; top: 19px; width: 5px; height: 5px; background: var(--line-strong); transform: rotate(45deg); }
.journey-entry.good::before { background: var(--success); }
.journey-entry.bad::before { background: var(--danger); }
.journey-entry.gold::before { background: var(--gold); }
.journey-entry time { display: block; margin-bottom: 6px; color: #9aa79d; font: 700 11px/1 var(--body); text-transform: uppercase; }
.journey-entry p { margin: 0; color: #d0d7d1; font-size: 15px; line-height: 1.5; }

.compact-player { display: grid; grid-template-columns: 118px 1fr; border-bottom: 1px solid var(--line); }
.compact-player .player-card-head { border: 0; border-right: 1px solid var(--line); }
.compact-player .player-identity { border: 0; align-self: center; }
.stat-section-title { padding: 14px 16px 2px; color: #aeb9b0; font: 800 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.finance-strip { display: grid; grid-template-columns: 1.1fr .75fr 1fr; border-bottom: 1px solid var(--line); }
.finance-strip > span { min-width: 0; padding: 12px 13px; border-right: 1px solid var(--line); }
.finance-strip > span:last-child { border-right: 0; }
/* Four cells in a three-column grid wrapped into two tall rows. A deliberate
   2x2 with tighter padding says the same in a third less height. */
.money-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.money-strip > span { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.money-strip > span:nth-child(2n) { border-right: 0; }
.money-strip > span:nth-last-child(-n+2) { border-bottom: 0; }
.money-strip b { margin-top: 5px; font-size: 14px; white-space: nowrap; }

/* Your player, riding along in the modal header so late-career decisions
   are never made blind. Numbers only - no labels to read. */
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.modal-player { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.modal-player .mp-ovr { min-width: 26px; padding: 2px 5px; border: 1px solid var(--gold); color: var(--gold-light); font: 800 13px/1.2 var(--mono); text-align: center; }
.modal-player em { display: inline-flex; gap: 5px; color: var(--muted); font: 700 10px/1 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.modal-player em i { color: #c9d1ca; font-style: normal; }
.modal-player .mp-meter { width: 30px; height: 5px; background: #2a352d; }
.modal-player .mp-meter i { display: block; height: 100%; background: var(--success); }
.modal-player .mp-meter.conf i { background: var(--gold); }
.modal-player-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
@media (max-width: 560px) { .modal-player em { display: none; } }
.finance-strip small { display: block; color: #aeb9b0; font: 700 11px/1.1 var(--body); text-transform: uppercase; }
.finance-strip b { display: block; overflow: hidden; margin-top: 8px; color: var(--gold-light); font: 800 16px/1 var(--body); text-overflow: ellipsis; }
.contract-strip { display: grid; grid-template-columns: .8fr .8fr 1.5fr; border-bottom: 1px solid var(--line); background: rgba(46,119,84,.08); }
.contract-strip > span { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--line); }
.contract-strip > span:last-child { border-right: 0; }
.contract-strip small { display: block; color: #aeb9b0; font: 700 11px/1.1 var(--body); text-transform: uppercase; }
.contract-strip b { display: block; overflow: hidden; margin-top: 7px; color: var(--cream); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dense-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
.dense-stats .stat-line { grid-template-columns: 68px 1fr 25px; }
.status-list { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; }
.status-list .meter { border: 0; background: transparent; padding: 9px; }
.meter-head { font-size: 12px; font-family: var(--body); }
.academy-options { display: grid; gap: 9px; margin-top: 24px; }
.transfer-options { display: grid; gap: 10px; margin-top: 24px; }
.path-modal { width: min(920px, 100%); }
.path-modal .modal-body { padding: clamp(24px, 4vw, 44px); }
.path-modal .modal-body > p { max-width: 650px; font-size: 16px; line-height: 1.6; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.path-card { min-height: 300px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid var(--line); background: linear-gradient(155deg, #19271f, #0e1611); color: var(--cream); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.path-card:hover { transform: translateY(-5px); border-color: var(--gold); background: linear-gradient(155deg, #203429, #111b15); }
.path-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: auto; border: 1px solid var(--gold); color: var(--gold-light); font-size: 24px; }
.path-copy { display: block; margin-top: 38px; }
.path-copy small { display: block; margin-bottom: 7px; color: var(--gold); font: 800 12px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.path-copy strong { display: block; font: 800 27px/1 var(--display); text-transform: uppercase; }
.path-copy em { display: block; margin-top: 12px; color: #b9c5bc; font: normal 14px/1.55 var(--body); }
.path-arrow { align-self: flex-end; margin-top: 18px; color: var(--gold); font-size: 22px; }
.turn-pro-modal { width: min(1040px, 100%); border-color: var(--gold); }
.turn-pro-modal .modal-body, .transfer-modal .modal-body { padding: clamp(16px, 3vw, 30px); }
.turn-pro-modal .modal-body h2, .transfer-modal .modal-body h2 { font-size: clamp(24px, 4vw, 38px); margin-bottom: 8px; }
.turn-pro-modal .modal-body > p, .transfer-modal .modal-body > p { font-size: 14px; line-height: 1.5; margin: 6px 0 0; }
.transfer-options { margin-top: 16px; }
.turn-pro-stamp { display: inline-block; margin: 0 0 12px !important; padding: 7px 11px; border: 1px solid var(--gold); background: var(--gold); color: #10130f !important; font: 900 15px/1 var(--mono); letter-spacing: .14em; }
.career-intro { cursor: pointer; }
.pro-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.pro-offer { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 16px; border: 1px solid var(--line-strong); background: #111a15; color: var(--cream); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.pro-offer:hover:not(:disabled) { transform: translateY(-5px); border-color: var(--gold); }
.pro-offer.locked { opacity: .42; cursor: not-allowed; }
.offer-level { color: var(--gold); font: 800 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.pro-offer strong { margin-top: 16px; font: 800 22px/1.05 var(--display); text-transform: uppercase; }
.pro-offer small { margin-top: 6px; color: var(--cream); font-size: 13px; }
.pro-offer em { margin-top: 8px; color: var(--muted); font: normal 12px/1.45 var(--body); }
.offer-action { margin-top: auto; padding-top: 14px; color: var(--gold-light); font: 800 13px/1 var(--body); text-transform: uppercase; }
.youth-note { padding: 16px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.08); color: var(--cream) !important; font-size: 16px; }
.development-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 24px 0; border: 1px solid var(--line); }
.development-summary div { padding: 18px; text-align: center; border-right: 1px solid var(--line); }
.development-summary div:last-child { border-right: 0; }
.development-summary b { display: block; color: var(--gold-light); font: 800 25px/1 var(--mono); }
.development-summary span { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.matchday-modal { width: min(760px, 100%); }
.match-choice-modal { width: min(880px, 100%); }
.match-choice-modal .modal-header { gap: 18px; }
.match-choice-modal .modal-header span:last-child { margin-left: auto; color: var(--cream); }
.match-choice-modal .modal-body { padding: clamp(20px, 3vw, 30px); }
.match-choice-modal .modal-body h2 { max-width: 760px; margin-bottom: 8px; font-size: clamp(27px, 2.8vw, 35px); line-height: 1.02; }
.match-choice-modal .modal-body > p { margin: 9px 0; font-size: 15px; line-height: 1.5; }
.match-choice-modal .event-kicker { margin-bottom: 10px; }
.match-choice-modal .choice-list { gap: 7px; }
.match-choice-modal .choice { grid-template-columns: 1fr; padding: 10px 13px; }
.match-choice-modal .choice strong { font-size: 15px; }
.match-choice-modal .choice small { margin-top: 4px; font-size: 13px; }
.match-timeline-mini { margin: 14px 0; border-left: 2px solid var(--gold); }
.match-timeline-mini div { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 7px 14px; font-size: 14px; }
.match-timeline-mini time { color: var(--gold); font-weight: 800; }
.matchday-brief { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0; border: 1px solid var(--line); }
.matchday-brief div { min-height: 112px; padding: 16px; border-right: 1px solid var(--line); }
.matchday-brief div:last-child { border-right: 0; }
.matchday-brief small { display: block; color: var(--gold); font: 800 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.matchday-brief strong { display: block; margin-top: 14px; font-size: 16px; line-height: 1.4; }
.tunnel-line { display: flex; align-items: center; gap: 8px; margin: 22px 0 28px; color: var(--muted); font: 700 12px/1 var(--body); text-transform: uppercase; }
.tunnel-line i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--gold); }
.tunnel-line i.pending { background: transparent; border: 1px solid var(--gold); }
.tunnel-line span + i { margin-left: auto; }

.meter-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; border: 1px solid var(--line); }
.meter { padding: 12px 14px; border-right: 1px solid var(--line); background: rgba(15,23,18,.75); }
.meter:last-child { border-right: 0; }
.meter-head { display: flex; justify-content: space-between; margin-bottom: 8px; font: 700 12px/1 var(--body); color: #b5c0b7; text-transform: uppercase; }
.meter .bar { height: 3px; }
.meter.health .bar i { background: var(--success); }
.meter.confidence .bar i { background: var(--blue); }
.meter.trust .bar i { background: var(--gold); }
.meter.fame .bar i { background: #ba82a8; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; overflow-y: auto; overscroll-behavior: contain; padding: 18px; background: rgba(2,4,3,.82); backdrop-filter: blur(7px); }
.modal { width: min(680px, 100%); margin: auto; max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--gold); background: #0d1510; box-shadow: 0 35px 100px rgba(0,0,0,.6); }
.pro-offer-grid > *, .transfer-options > *, .academy-options > *, .draft-grid > * { min-width: 0; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-header span { color: var(--gold); font: 800 12px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.modal-close { border: 0; background: none; cursor: pointer; color: var(--muted); }
.modal-body { padding: clamp(22px, 5vw, 42px); }
.modal-body h2 { margin: 0 0 14px; font: 800 clamp(30px, 5vw, 52px)/1 var(--display); text-transform: none; }
.modal-body > p { color: #b8c3ba; font-size: 16px; line-height: 1.6; }
.new-career-modal { width: min(600px, 100%); }
.new-career-modal .modal-body { padding: clamp(24px, 5vw, 40px); }
.new-career-modal .event-kicker { margin-top: 0; }
.new-career-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }

@media (max-width: 520px) {
  .new-career-actions { grid-template-columns: 1fr; }
}

.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 30px 0; }
.team { font: 800 20px/1 var(--display); text-transform: uppercase; }
.team:last-child { text-align: right; }
.score { min-width: 94px; padding: 12px; border: 1px solid var(--line-strong); background: #090d0b; text-align: center; font: 900 28px/1 var(--mono); color: var(--gold-light); }
.commentary { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.commentary li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(44,59,49,.65); font-size: 15px; }
.commentary time { color: var(--gold); font: 700 13px/1.5 var(--body); }
.season-recap { display: grid; grid-template-columns: repeat(5, 1fr); margin: 22px 0; border: 1px solid var(--line); }
.recap-label { margin: 20px 0 -13px !important; color: var(--gold) !important; font-size: 13px !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.season-recap span { padding: 13px 8px; border-right: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; text-transform: uppercase; }
.season-recap span:last-child { border-right: 0; }
.season-recap b { display: block; margin-bottom: 6px; color: var(--cream); font-size: 17px; }
.cash-breakdown { margin: -8px 0 18px; color: var(--muted); font-size: 13px; text-align: center; }
.finance-ledger { display: grid; grid-template-columns: repeat(4, 1fr); margin: -8px 0 20px; border: 1px solid var(--line); background: #0b120e; }
.finance-ledger span { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
.finance-ledger span:last-child { border-right: 0; }
.finance-ledger small { display: block; color: var(--muted); font-size: 10px; line-height: 1.25; text-transform: uppercase; }
.finance-ledger b { display: block; margin-top: 7px; color: var(--cream); font-size: 15px; }
.finance-ledger em { display: block; margin-top: 4px; color: var(--muted); font: normal 10px/1.2 var(--body); }
.finance-ledger .deduction b { color: #dcad79; }
.legacy-finance-note { margin: -8px 0 20px !important; padding: 12px 14px; border-left: 2px solid var(--gold); background: rgba(201,166,75,.07); color: var(--muted) !important; font-size: 12px !important; }

@media (max-width: 520px) {
  .scoreboard { gap: 8px; margin: 24px 0; }
  .score { min-width: 72px; padding: 10px 6px; font-size: 24px; }
  .team { font-size: 18px; overflow-wrap: anywhere; }
  .season-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-recap span { border-bottom: 1px solid var(--line); }
  .season-recap span:nth-child(2n), .season-recap span:last-child { border-right: 0; }
  .season-recap span:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

.year-review-modal .modal-body { text-align: left; }
.year-ovr { display: flex; align-items: stretch; gap: 12px; margin: 20px 0 14px; }
.year-ovr > span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--line); background: #0d1410; }
.year-ovr small { color: var(--muted); font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.year-ovr b { font: 900 34px/1 var(--mono); color: var(--cream); }
.year-ovr em { display: grid; place-items: center; color: var(--gold); font-size: 22px; font-style: normal; }
.year-ovr-now { border-color: rgba(201,166,75,.6) !important; background: rgba(201,166,75,.07) !important; position: relative; }
.year-ovr-now b { color: var(--gold-light); }
.year-ovr-now i { position: absolute; top: 6px; right: 8px; color: var(--success); font: 800 13px/1 var(--mono); font-style: normal; }
.year-archetype { margin: 0 0 14px; color: #c4cec4; font-size: 15px; }
.year-archetype strong { color: var(--gold-light); }
.year-gains { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.year-gain { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border: 1px solid var(--line); background: rgba(46,119,84,.1); }
.year-gain small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.year-gain b { color: var(--success); font: 800 16px/1 var(--mono); }
.year-milestone { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.1); color: var(--gold-light); font-size: 14px; line-height: 1.45; }
.year-progress { margin: 4px 0 22px; }
.year-progress-head { display: flex; justify-content: space-between; margin-bottom: 8px; color: #b9c4bb; font: 700 12px/1.2 var(--body); text-transform: uppercase; }
.year-progress .bar { height: 8px; background: #253029; overflow: hidden; }
.year-progress .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pitch-bright), var(--gold)); }

.rival-result { display: grid; gap: 7px; margin: 16px 0; padding: 13px 15px; border-left: 3px solid var(--danger); background: rgba(216,104,88,.09); }
.rival-head { display: flex; flex-direction: column; gap: 3px; }
.rival-head span { color: var(--danger); font: 800 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.rival-head small { color: var(--muted); font-size: 12px; }
.rival-result strong { color: var(--cream); font-size: 15px; line-height: 1.45; }
.rival-verdict { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--danger); background: rgba(216,104,88,.1); color: #e8cfc9; font-size: 15px; line-height: 1.5; }
.rival-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--danger); background: rgba(216,104,88,.06); }
.rival-card.ahead { border-left-color: var(--success); background: rgba(92,181,130,.07); }
.rival-card > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rival-card small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.rival-card b { font: 800 15px/1.1 var(--body); }
.rival-line { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: #c4cec4; }
.rival-line em { color: var(--muted); font-style: normal; }
.rival-tag { display: block; margin-top: 7px; }
.rival-card.ahead .rival-tag { color: var(--success); }

.mentor-result { display: grid; gap: 7px; margin: 16px 0; padding: 13px 15px; border-left: 3px solid var(--blue); background: rgba(131,169,184,.09); }
.mentor-head { display: flex; flex-direction: column; gap: 3px; }
.mentor-head span { color: var(--blue); font: 800 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.mentor-head small { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.mentor-result strong { color: var(--cream); font-size: 15px; line-height: 1.45; }
.mentor-verdict { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--blue); background: rgba(131,169,184,.1); color: #d3e0e6; font-size: 15px; line-height: 1.5; }
.national-result { display: grid; gap: 7px; margin: 16px 0; padding: 13px 15px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.08); }
.national-head { display: flex; flex-direction: column; gap: 3px; }
.national-head span { color: var(--gold); font: 800 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.national-head small { color: var(--muted); font-size: 12px; }
.national-result strong { color: var(--cream); font-size: 15px; line-height: 1.45; }
.national-verdict { margin: 8px 22px; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.1); color: var(--gold-light); font-size: 15px; line-height: 1.5; }

.awards-result { display: grid; gap: 8px; margin: 16px 0; }
.award-line { display: flex; flex-direction: column; gap: 3px; padding: 12px 15px; border: 1px solid rgba(201,166,75,.45); background: rgba(201,166,75,.1); }
.award-line strong { color: var(--gold-light); font: 800 15px/1.2 var(--body); letter-spacing: .02em; }
.award-line small { color: #d7cfb4; font-size: 13px; }
.award-line.ballon { border-color: var(--gold); background: linear-gradient(120deg, rgba(201,166,75,.22), rgba(201,166,75,.08)); box-shadow: 0 0 22px rgba(201,166,75,.2); animation: goal-pop .5s cubic-bezier(.2,1.4,.4,1); }
.award-line.ballon strong { font-size: 17px; letter-spacing: .04em; }
/* Youth trials — the gates you can fail */
.trial-modal.trial-pass { border-color: var(--gold); box-shadow: 0 0 40px rgba(201,166,75,.25); }
.trial-modal.trial-fail { border-color: var(--danger); }
.trial-modal.trial-fail .turn-pro-stamp { border-color: var(--danger); background: var(--danger); }
.trial-outcome-copy { font-size: 17px !important; line-height: 1.5; color: var(--cream) !important; }
.trial-consolation { margin-top: 10px !important; color: var(--muted) !important; font-size: 14px !important; }
.trial-gauge { margin: 20px 0 6px; padding: 15px; border: 1px solid var(--line); background: #0d1410; }
.trial-gauge-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.trial-gauge-head span { color: var(--muted); font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.trial-gauge-head b { color: var(--cream); font: 900 26px/1 var(--mono); }
.trial-gauge-head small { margin-left: auto; color: var(--gold); font: 700 12px/1 var(--mono); }
.trial-bar { position: relative; height: 12px; background: #253029; overflow: hidden; }
.trial-bar i { display: block; height: 100%; background: var(--danger); }
.trial-bar i.pass { background: linear-gradient(90deg, var(--pitch-bright), var(--gold)); }
.trial-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.trial-inputs span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.trial-inputs small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.trial-inputs b { color: var(--cream); font: 800 17px/1 var(--mono); }

/* Scout interest — the youth resource */
.scout-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: rgba(201,166,75,.06); }
.scout-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.scout-head small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.scout-head b { color: var(--gold-light); font: 900 20px/1 var(--mono); }
.scout-head b em { color: var(--muted); font: 700 11px/1 var(--mono); font-style: normal; }
.scout-bar { position: relative; height: 8px; background: #253029; overflow: hidden; }
.scout-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pitch-bright), var(--gold)); }
.scout-bar em { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--cream); }
.scout-note { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.35; }

.boon-modal .boon-options { display: grid; gap: 10px; margin-top: 18px; }
.boon-choice { border-color: rgba(201,166,75,.45) !important; background: rgba(201,166,75,.06) !important; }
.boon-choice:hover { border-color: var(--gold) !important; background: rgba(201,166,75,.13) !important; }
.boon-choice strong { color: var(--gold-light); }
.boon-owned { margin-top: 16px !important; color: var(--muted) !important; font-size: 13px !important; }
.boons-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: rgba(201,166,75,.06); }
.boons-card > small { display: block; margin-bottom: 7px; color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.boons-card > div { display: flex; flex-wrap: wrap; gap: 6px; }
.boon-tag { padding: 4px 8px; border: 1px solid rgba(201,166,75,.45); color: var(--gold-light); font: 700 11px/1.2 var(--body); cursor: help; }
.retire-decision-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 4px; }
.retire-decision-stats span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border: 1px solid var(--line); background: #0d1410; }
.retire-decision-stats small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.retire-decision-stats b { color: var(--cream); font: 800 20px/1 var(--mono); }

.injury-result { display: grid; gap: 5px; margin: 16px 0; padding: 13px 15px; border-left: 3px solid var(--danger); background: rgba(216,104,88,.13); }
.injury-result span { color: var(--danger); font: 800 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.injury-result strong { color: var(--cream); font-size: 15px; line-height: 1.45; }

.records-result { display: grid; gap: 8px; margin: 16px 0; }
.record-line { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-left: 3px solid var(--blue); background: rgba(131,169,184,.1); }
.record-line span { color: var(--blue); font: 800 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.record-line strong { color: var(--cream); font-size: 15px; }
.retire-honours.records em { border-color: var(--blue); color: #cfe0e7; }
.world-rank-line { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.world-rank-line b { color: var(--gold-light); font: 900 16px/1 var(--mono); }

.honours-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: rgba(201,166,75,.06); }
.honours-card .world-rank { display: flex; justify-content: space-between; align-items: baseline; }
.honours-card .world-rank small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.honours-card .world-rank b { color: var(--gold-light); font: 900 20px/1 var(--mono); }
.honours-card p { margin: 7px 0 0; color: var(--gold-light); font: 700 12px/1.45 var(--body); }
.retire-honours.individual em { border-color: var(--gold); color: var(--gold-light); }

/* FIFA-style player card */
.fut-card { margin: 0; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(160deg, #2a2416, #141109 72%); }
.fut-card.fut-gold { background: linear-gradient(160deg, #4a3d1a, #1c1708 72%); box-shadow: inset 0 0 0 1px rgba(201,166,75,.5); }
.fut-card.fut-silver { background: linear-gradient(160deg, #2c333a, #14181c 72%); }
.fut-card.fut-bronze { background: linear-gradient(160deg, #35271c, #17110b 72%); }
.fut-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.fut-badges { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fut-badges b { font: 900 34px/1 var(--mono); color: var(--gold-light); }
.fut-card.fut-silver .fut-badges b { color: #d6dee4; }
.fut-card.fut-bronze .fut-badges b { color: #e0b48c; }
.fut-badges span { font: 800 13px/1 var(--body); letter-spacing: .04em; color: var(--cream); }
.fut-badges i { font-size: 18px; font-style: normal; }
.fut-portrait { display: grid; place-items: center; min-height: 84px; }
.fut-portrait .pixel-player { --px: 6px; }
.fut-id { margin-top: 8px; text-align: center; }
.fut-id strong { display: block; font: 800 24px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.fut-nick { display: block; margin-top: 3px; color: var(--gold-light); font: 700 14px/1.2 var(--body); font-style: italic; }
.fut-role { display: inline-block; margin-top: 5px; padding: 3px 9px; border: 1px solid var(--line-strong); color: #cfd7cf; font: 700 11px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.fut-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); }
.fut-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fut-stats b { font: 800 17px/1 var(--mono); color: var(--cream); }
.fut-stats small { color: var(--muted); font: 700 9px/1 var(--body); letter-spacing: .04em; }
.identity-sub { padding: 10px 14px; border-bottom: 1px solid var(--line); color: #b5c0b7; font: 700 12px/1.45 var(--body); text-transform: uppercase; }

.nickname-reveal { margin: 16px 0; padding: 14px; text-align: center; border: 1px solid var(--gold); background: linear-gradient(120deg, rgba(201,166,75,.16), rgba(201,166,75,.05)); animation: goal-pop .5s cubic-bezier(.2,1.4,.4,1); }
.nickname-reveal small { display: block; color: var(--muted); font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.nickname-reveal strong { display: block; margin-top: 6px; color: var(--gold-light); font: 800 26px/1 var(--display); font-style: italic; }
.share-nick { margin: 2px 0 4px !important; color: var(--gold-light); font: 700 16px/1.2 var(--body) !important; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .nickname-reveal { animation: none; } }

.retire-shell { display: flex; flex-direction: column; align-items: center; }
.share-card { width: min(560px, 100%); margin: 8px 0 22px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, #12211a, #0b120e 70%); box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.share-card.grade-S { border-color: var(--gold); box-shadow: 0 22px 60px rgba(201,166,75,.25); }
.share-card.grade-A { border-color: var(--gold-light); }
.share-card-top { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 20% 0%, rgba(46,119,84,.28), transparent 60%); }
.share-portrait { display: grid; place-items: center; }
.share-id h2 { margin: 6px 0 4px; font: 800 30px/.95 var(--display); text-transform: uppercase; }
.share-id p { margin: 0; color: #b5c0b7; font: 700 12px/1.4 var(--body); text-transform: uppercase; }
.share-id .share-label { color: var(--gold-light); margin-top: 4px; }
.share-grade { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border: 1px solid var(--gold); color: var(--gold-light); font: 900 15px/1 var(--mono); }
.share-ovr { display: grid; place-items: center; gap: 2px; align-self: start; }
.share-ovr small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .08em; }
.share-ovr b { font: 900 40px/1 var(--mono); color: var(--gold-light); }
.share-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.share-stats div { padding: 14px 6px; text-align: center; border-right: 1px solid var(--line); }
.share-stats div:last-child { border-right: 0; }
.share-stats b { display: block; color: var(--cream); font: 800 22px/1 var(--mono); }
.share-stats span { display: block; margin-top: 6px; color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.retire-honours { padding: 14px 22px; border-bottom: 1px solid var(--line); }
.retire-honours > span { display: block; margin-bottom: 8px; color: var(--gold); font: 800 11px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.retire-honours div { display: flex; flex-wrap: wrap; gap: 7px; }
.retire-honours em { padding: 5px 9px; border: 1px solid rgba(201,166,75,.4); color: var(--gold-light); font: 700 12px/1.2 var(--body); font-style: normal; }
.share-story { padding: 16px 22px 4px; margin: 0; color: #c4cec4; font-size: 15px; line-height: 1.55; }
.share-card .rival-verdict, .share-card .mentor-verdict { margin: 8px 22px; }
.share-footer { display: flex; justify-content: space-between; padding: 14px 22px; margin-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font: 800 12px/1 var(--mono); letter-spacing: .1em; }

.brief-result { display: grid; gap: 6px; margin: 18px 0; padding: 13px 15px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.08); }
.brief-result.complete { border-left-color: var(--success); background: rgba(92,181,130,.09); }
.brief-result span { color: var(--gold); font: 800 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.brief-result.complete span { color: var(--success); }
.brief-result strong { color: var(--cream); font-size: 15px; line-height: 1.4; }

.result-card { padding: 28px; border: 1px solid var(--gold); background: linear-gradient(145deg, #1a2b20, #0c120f); }
.result-grade { display: inline-grid; place-items: center; width: 96px; height: 96px; border: 2px solid var(--gold); color: var(--gold-light); font: 900 49px/1 var(--display); clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); }
.result-card h2 { margin: 24px 0 10px; font: 800 clamp(40px, 7vw, 76px)/.9 var(--display); text-transform: uppercase; }
.result-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 28px 0; border: 1px solid var(--line); }
.result-stat { padding: 16px 8px; text-align: center; border-right: 1px solid var(--line); }
.result-stat:last-child { border-right: 0; }
.result-stat b { display: block; font: 800 18px/1 var(--mono); }
.result-stat span { color: var(--muted); font: 700 12px/1 var(--body); text-transform: uppercase; }

.legacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.legacy-card { padding: 22px; border: 1px solid var(--line); background: var(--panel); }
.legacy-card .grade { float: right; color: var(--gold); font: 900 35px/1 var(--display); }
.legacy-card h3 { margin: 0 0 5px; font: 800 24px/1 var(--display); text-transform: uppercase; }
.legacy-card p { margin: 0 0 18px; color: var(--muted); font: 700 13px/1.5 var(--body); text-transform: uppercase; }
.legacy-stats { display: flex; gap: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.legacy-stats span { color: var(--muted); font: 700 12px/1.5 var(--body); }
.legacy-stats b { display: block; color: var(--cream); font-size: 15px; }
.empty-state { padding: 70px 30px; border: 1px dashed var(--line-strong); text-align: center; color: var(--muted); }

.site-footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 28px; border-top: 1px solid var(--line); color: #849188; font: 700 11px/1 var(--body); letter-spacing: .05em; }
.footer-copy { display: flex; flex-wrap: wrap; gap: 15px 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.footer-links button, .footer-links a { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: transparent; color: #aeb9b0; cursor: pointer; font: 700 11px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.footer-links button:hover, .footer-links a:hover { color: var(--gold-light); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 150; transform: translate(-50%, 20px); min-width: min(460px, calc(100% - 30px)); padding: 15px 18px; border: 1px solid var(--gold); background: #101812; opacity: 0; color: var(--cream); font: 700 15px/1.45 var(--body); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* A quiet prompt: only live, unselected choices breathe. */
.choice-prompt > button:not(:disabled),
.pro-offer-grid > button:not(:disabled),
.academy-options > button:not(:disabled),
.transfer-options > button:not(:disabled),
.plan-options > button:not(:disabled),
.draft-grid .prospect-card .btn { animation: choice-breathe 3.2s ease-in-out infinite; }
.choice-prompt > button:nth-child(2), .plan-options > button:nth-child(2) { animation-delay: .18s; }
.choice-prompt > button:nth-child(3), .plan-options > button:nth-child(3) { animation-delay: .36s; }
.pro-offer-grid > button:nth-child(2), .academy-options > button:nth-child(2), .transfer-options > button:nth-child(2), .draft-grid .prospect-card:nth-child(2) .btn { animation-delay: .18s; }
.pro-offer-grid > button:nth-child(3), .academy-options > button:nth-child(3), .transfer-options > button:nth-child(3), .draft-grid .prospect-card:nth-child(3) .btn { animation-delay: .36s; }
.choice-prompt > button:hover, .choice-prompt > button:focus-visible,
.plan-options > button:hover, .plan-options > button:focus-visible,
.pro-offer-grid > button:hover, .pro-offer-grid > button:focus-visible,
.academy-options > button:hover, .academy-options > button:focus-visible,
.transfer-options > button:hover, .transfer-options > button:focus-visible,
.draft-grid .prospect-card .btn:hover, .draft-grid .prospect-card .btn:focus-visible { animation-play-state: paused; }
@keyframes choice-breathe {
  0%, 66%, 100% { border-color: var(--line); box-shadow: 0 0 0 rgba(201,166,75,0); }
  83% { border-color: rgba(201,166,75,.85); box-shadow: 0 0 22px rgba(201,166,75,.15); }
}

@media (prefers-reduced-motion: reduce) {
  .choice-prompt > button, .plan-options > button, .pro-offer-grid > button,
  .academy-options > button, .transfer-options > button,
  .draft-grid .prospect-card .btn { animation: none; }
}

/* ---- One option-card language ------------------------------------------
   The list-style options started life as four separate components with four
   borders, four title sizes and four ways of showing the same thing. They are
   all the same object — something you click to spend a decision — so they now
   share a frame, a hover and a chip row, and differ only where meaning does. */
.choice, .plan-choice, .training-card, .free-action {
  border: 1px solid var(--line);
  background: #111a15;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.choice:hover:not(:disabled), .plan-choice:hover:not(:disabled),
.training-card:hover:not(:disabled), .free-action:hover:not(:disabled) { border-color: var(--gold); background: #18251d; }
.free-action { border-style: dashed; }
.choice strong, .plan-choice strong, .training-card strong, .free-action strong { font-weight: 800; letter-spacing: -.01em; }

/* Shared chip row: stats, energy, tags — same size and shape everywhere. */
.train-chips i, .mc-chips i {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border: 1px solid var(--line-strong);
  font: 700 10px/1.5 var(--mono); font-style: normal; letter-spacing: .03em;
}
.train-chips i b { font-size: 9.5px; letter-spacing: -.5px; }

/* ---- Match choice: the odds meter --------------------------------------
   Before this, three options each carried a sentence of tags and no way to
   tell which was likelier to work, so choosing at random was rational. The
   pips are the real success chance, banded — the same number the resolver
   rolls against, so the meter can never flatter a bad option. */
.match-choice { grid-template-columns: minmax(0, 1fr) minmax(128px, auto); align-items: stretch; }
.mc-main { min-width: 0; }
.mc-read { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.mc-odds { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mc-odds b { font: 800 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.mc-pips { display: flex; gap: 3px; }
.mc-pips i { width: 13px; height: 6px; background: #2a352d; }
.mc-odds.strong b { color: var(--success); }
.mc-odds.strong .mc-pips i.on { background: var(--success); }
.mc-odds.steady b { color: var(--gold-light); }
.mc-odds.steady .mc-pips i.on { background: var(--gold); }
.mc-odds.risk b { color: #dcad79; }
.mc-odds.risk .mc-pips i.on { background: #c98a4b; }
.mc-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mc-chips i.mc-stat { color: #c9d1ca; }
.mc-chips i.mc-energy { color: #dcad79; border-color: rgba(220,173,121,.4); }
.mc-chips i.mc-energy.gain { color: var(--success); border-color: rgba(120,185,143,.45); }
.mc-chips i.mc-badge { color: var(--gold-light); border-color: rgba(201,166,75,.5); }
.mc-chips i.mc-badge.counter { color: var(--success); border-color: rgba(120,185,143,.5); }
.mc-chips i.mc-badge.danger { color: var(--danger); border-color: rgba(216,104,88,.5); }
.mc-chips i.mc-threat { font-weight: 800; }
.mc-chips i.mc-threat.hot { color: #0b1a12; background: var(--gold); border-color: var(--gold); }
.mc-chips i.mc-threat.warm { color: var(--gold-light); border-color: rgba(201,166,75,.55); }

/* Scouting cards show shape, not a rating to sort by. */
.prospect-grade { display: grid; place-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--gold); }
.prospect-grade small { color: var(--muted); font: 700 8.5px/1 var(--body); letter-spacing: .08em; }
.prospect-grade > span { display: flex; gap: 3px; }
.prospect-grade i { width: 5px; height: 12px; background: #2a352d; }
.prospect-grade i.on { background: var(--gold-light); }

.draft-note { max-width: 640px; margin: -4px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---- Club offers: a badge and a division before a wage ------------------
   Four rows of near-identical prose made every transfer feel the same. */
.club-offer { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.co-main { min-width: 0; display: grid; gap: 5px; }
.co-main strong { font-size: 17px; }
.co-main small { display: block; color: var(--muted); font: 700 12.5px/1.4 var(--body); letter-spacing: .02em; }
.co-terms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.co-terms i { padding: 2px 7px; border: 1px solid var(--line-strong); font: 700 10.5px/1.5 var(--mono); font-style: normal; color: #c9d1ca; }
.co-terms i.good { color: var(--success); border-color: rgba(120,185,143,.45); }
.co-terms i.warn { color: #dcad79; border-color: rgba(220,173,121,.45); }

/* ---- Traits panel: combos first, the roll call on demand ----------------
   Ten equal-weight tags buried the one line that pays off. */
.trait-tally-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.trait-tally { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--line-strong); font: 700 10.5px/1.4 var(--body); font-style: normal; color: #c9d1ca; }
.trait-tally em { font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.trait-tally b { color: var(--gold-light); }
.trait-all { margin-top: 10px; }
.trait-all summary { color: var(--muted); font: 700 10.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.trait-all summary:hover { color: var(--gold-light); }
.trait-all .trait-list { margin-top: 9px; }

/* Chemistry as pips: the number was never the point, the level was. */
.squad-row i.chem { display: inline-flex; gap: 3px; align-items: center; }
.squad-row i.chem span { width: 6px; height: 6px; background: #2a352d; }
.squad-row i.chem span.on { background: var(--gold); }

/* What just happened, reported in place instead of on a screen of its own. */
.camp-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid rgba(46,119,84,.5); background: rgba(46,119,84,.12); }
.camp-result .cr-tag { color: var(--gold-light); font: 800 10px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.camp-result b { color: var(--cream); font: 800 14px/1.2 var(--body); }
.camp-result .cr-changes { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.camp-result .cr-changes i { padding: 2px 6px; border: 1px solid var(--line-strong); font: 700 10.5px/1.5 var(--mono); font-style: normal; }
.camp-result .cr-changes i.positive { color: var(--success); border-color: rgba(120,185,143,.45); }
.camp-result .cr-changes i.negative { color: var(--danger); border-color: rgba(216,104,88,.5); }

/* The choice you just made, folded into the year review instead of holding
   a screen of its own. */
.carried-outcome { margin-bottom: 14px; padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(201,166,75,.08); }
.carried-outcome.bad { border-left-color: var(--danger); background: rgba(216,104,88,.08); }
.carried-outcome p { margin: 0; color: #d4dbd5; font-size: 14px; line-height: 1.5; }
.carried-outcome span { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.carried-outcome i { padding: 2px 6px; border: 1px solid var(--line-strong); font: 700 10.5px/1.5 var(--mono); font-style: normal; }
.carried-outcome i.positive { color: var(--success); border-color: rgba(120,185,143,.45); }
.carried-outcome i.negative { color: var(--danger); border-color: rgba(216,104,88,.5); }

/* The reason to start a second career, shown before the first one ends. */
.hero-sub { max-width: 640px; margin: 10px 0 0; color: var(--gold-light); font: 700 clamp(15px, 1.7vw, 19px)/1.35 var(--body); }
.challenge-teaser { margin-top: 26px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(12,20,15,.6); }
.ct-head { display: flex; align-items: baseline; gap: 12px; }
.ct-head h2 { margin: 0; font: 800 clamp(17px, 2vw, 21px)/1 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.ct-head .eyebrow { margin: 0; }
.ct-head b { margin-left: auto; color: var(--gold-light); font: 800 15px/1 var(--mono); }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.ct-grid article { display: flex; gap: 8px; align-items: flex-start; }
.ct-grid span { color: var(--gold); font: 700 12px/1.3 var(--mono); }
.ct-grid strong { display: block; color: var(--cream); font: 800 13px/1.25 var(--body); }
.ct-grid small { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }

/* The reason to press play again, before the honours and the farewells. */
.run-payoff { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 18px; padding: 13px 16px; border: 1px solid var(--gold); background: linear-gradient(100deg, rgba(201,166,75,.16), rgba(20,30,24,.6)); }
.rp-unlock { color: var(--cream); font: 700 14px/1.3 var(--body); }
.rp-unlock b { color: var(--gold-light); }
.rp-goal { color: var(--muted); font: 700 12.5px/1.3 var(--body); }
.rp-goal.done { color: var(--success); }
.run-payoff .btn { margin-left: auto; }
@media (max-width: 560px) { .run-payoff .btn { margin-left: 0; width: 100%; justify-content: center; } }

/* Preparation done: the exit is visible from whichever tab you are on. */
.camp-go { width: 100%; margin-top: 10px; justify-content: center; }

/* The one thing you are aiming at, carried from age eight to retirement. */
.run-goal { margin-bottom: 12px; padding: 11px 13px; border: 1px solid var(--line); background: rgba(201,166,75,.07); }
.run-goal.done { border-color: var(--success); background: rgba(120,185,143,.12); }
.rg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rg-head small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.rg-head b { color: var(--gold-light); font: 800 12px/1 var(--mono); }
.run-goal.done .rg-head b { color: var(--success); }
.run-goal strong { display: block; margin: 6px 0 8px; color: var(--cream); font: 800 14px/1.25 var(--body); }
.rg-bar { height: 5px; background: #2a352d; }
.rg-bar i { display: block; height: 100%; background: var(--gold); }
.run-goal.done .rg-bar i { background: var(--success); }
.run-goal-verdict { margin: 14px 0 0; font: 800 14px/1.4 var(--body); }
.run-goal-verdict.done { color: var(--success); }
.run-goal-verdict.missed { color: var(--muted); }
.draft-locked-note { margin-top: 8px; color: var(--gold-light); font: 700 12.5px/1.4 var(--body); }



.pro-topbar { grid-template-columns: minmax(250px, 1.45fr) minmax(250px, 1fr) 84px; }
.pro-topbar .topbar-stat small { margin-top: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.compact-fixture-hero { padding-bottom: 18px; }
.camp-section { display: flex; flex-direction: column; }
.camp-section .compact-fixture-hero { order: 0; }
.camp-section .focused-camp-heading { order: 1; }
.camp-section .training-choice-grid, .camp-section .ready-card { order: 2; }
.camp-section .extras-panel { order: 3; }
.camp-section .match-intel { order: 4; margin-top: 28px; }
.camp-section .brief-compact { order: 5; margin-bottom: 0; }
.match-intel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: 9px; margin-bottom: 10px; }
.duel-card { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.3fr); gap: 20px; align-items: center; min-height: 126px; padding: 17px 18px; border: 1px solid var(--line); background: linear-gradient(120deg, #15231b, #101713); }
.duel-card h3 { margin: 0; font: 800 23px/1 var(--display); }
.duel-card h3 span { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 7px; border: 1px solid var(--gold); color: var(--gold-light); font: 800 14px/1 var(--mono); }
.duel-card p:not(.event-kicker) { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.duel-card > strong { padding-left: 18px; border-left: 2px solid var(--gold); color: #d2dad3; font-size: 14px; line-height: 1.5; }
.intel-strip { display: grid; grid-template-rows: repeat(3, 1fr); border: 1px solid var(--line); background: #0d1511; }
.intel-strip span { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.intel-strip span:last-child { border-bottom: 0; }
.intel-strip small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.intel-strip b { font-size: 13px; }
.brief-compact { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; padding: 11px 14px; border-left: 2px solid var(--gold); background: rgba(201,166,75,.07); }
.brief-compact span { display: flex; align-items: baseline; gap: 10px; }
.brief-compact small { color: var(--gold); font-size: 11px; text-transform: uppercase; }
.brief-compact strong { font-size: 14px; }
.brief-compact > b { color: var(--gold-light); font: 800 12px/1 var(--mono); white-space: nowrap; }
.focused-camp-heading { margin-bottom: 12px; }
.focused-camp-heading p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.training-choice-grid { grid-template-columns: repeat(3, 1fr); }
.training-choice-grid .training-card { min-height: 184px; }
.training-card em { margin-top: auto; padding-top: 16px; color: var(--gold-light); font: normal 800 11px/1 var(--body); text-transform: uppercase; }
.ready-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px; border: 1px solid var(--gold); background: linear-gradient(100deg, rgba(201,166,75,.1), rgba(17,26,21,.9)); }
.ready-card h2 { margin: 0; font: 800 28px/1 var(--display); }
.ready-card p:not(.event-kicker) { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.extras-panel { margin-top: 16px; border: 1px solid var(--line); background: #0d1511; }
.extras-panel summary { display: flex; justify-content: space-between; gap: 18px; padding: 14px 16px; cursor: pointer; list-style: none; }
.extras-panel summary::-webkit-details-marker { display: none; }
.extras-panel summary span { font-size: 13px; font-weight: 800; text-transform: uppercase; }
.extras-panel summary small { color: var(--muted); font-size: 12px; }
.extras-panel[open] summary { border-bottom: 1px solid var(--line); }
.extras-panel .free-action-grid { padding: 10px; }
.extras-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 13px; }

.matchday-fixture { margin: 12px 0 24px !important; color: var(--cream) !important; font-weight: 800; }
.manager-word { margin: 0 0 26px; padding: 18px 20px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.08); color: #d5ddd7; font-size: 18px; line-height: 1.55; }
.manager-word small { display: block; margin-top: 12px; color: var(--gold); font-size: 11px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.live-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--line); background: #090f0b; }
.live-score span { font: 800 16px/1.1 var(--display); text-transform: uppercase; }
.live-score span:last-child { text-align: right; }
.live-score strong { min-width: 72px; color: var(--gold-light); font: 900 26px/1 var(--mono); text-align: center; }
/* Club crests — procedural, deterministic, one per club */
.crest { position: relative; display: inline-grid; place-items: center; width: 30px; height: 34px; flex: 0 0 auto; background: var(--crest-base); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); overflow: hidden; }
.crest i { position: relative; z-index: 2; color: var(--crest-ink); font: 900 11px/1 var(--mono); font-style: normal; letter-spacing: -.02em; }
.crest::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.crest-p0::before { background: linear-gradient(90deg, transparent 42%, var(--crest-ink) 42%, var(--crest-ink) 58%, transparent 58%); opacity: .55; }
.crest-p1::before { background: linear-gradient(180deg, var(--crest-ink) 50%, transparent 50%); opacity: .35; }
.crest-p2::before { background: repeating-linear-gradient(90deg, var(--crest-ink) 0 5px, transparent 5px 11px); opacity: .4; }
.crest-p3::before { background: linear-gradient(135deg, transparent 45%, var(--crest-ink) 45%, var(--crest-ink) 62%, transparent 62%); opacity: .5; }
.crest-p4::before { background: repeating-linear-gradient(0deg, var(--crest-ink) 0 5px, transparent 5px 12px); opacity: .32; }
.crest-xs { width: 17px; height: 19px; }
.crest-xs i { font-size: 7px; }
.crest-sm { width: 22px; height: 25px; vertical-align: -5px; margin: 0 5px; }
.crest-sm i { font-size: 8px; }
.crest-lg { width: 46px; height: 52px; }
.crest-lg i { font-size: 16px; }

.tier-pips { display: inline-flex; gap: 2px; vertical-align: 1px; }
.tier-pips i { width: 5px; height: 5px; background: #2f3d35; border-radius: 50%; }
.tier-pips i.on { background: var(--gold); }
.topbar-club { display: flex; align-items: center; gap: 10px; }

/* Sidebar tabs */
.panel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.panel-tabs button { padding: 11px 6px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font: 800 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; transition: color .15s ease, background .15s ease; }
.panel-tabs button:last-child { border-right: 0; }
.panel-tabs button:hover { color: var(--cream); }
.panel-tabs button.on { color: var(--gold-light); background: rgba(201,166,75,.1); box-shadow: inset 0 -2px 0 var(--gold); }
.panel-body { display: block; }

/* Club card + league ladder */
.club-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 15% 0%, rgba(46,119,84,.22), transparent 70%); }
.club-card small { display: block; color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.club-card b { display: block; margin-top: 4px; font: 800 17px/1.05 var(--display); text-transform: uppercase; }
.club-tier { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font: 700 10px/1 var(--body); text-transform: uppercase; }

.league-table { padding: 12px 14px; }
.league-table-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.league-table-head span { color: var(--gold); font: 800 11px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.league-table-head small { color: var(--muted); font-size: 10px; }
.league-table ol { margin: 0; padding: 0; list-style: none; }
.league-table li { display: grid; grid-template-columns: 18px auto 1fr auto auto; gap: 8px; align-items: center; padding: 5px 6px; border-bottom: 1px solid rgba(44,59,49,.55); font-size: 12px; }
.league-table li b { color: var(--muted); font: 700 11px/1 var(--mono); text-align: right; }
.league-table li span { color: #c4cec4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-table li em { color: var(--muted); font: 400 10px/1 var(--mono); font-style: normal; }
.league-table li strong { min-width: 22px; color: var(--cream); font: 800 12px/1 var(--mono); text-align: right; }
.league-table li.you { background: rgba(201,166,75,.13); box-shadow: inset 2px 0 0 var(--gold); }
.league-table li.you span, .league-table li.you strong { color: var(--gold-light); }
.league-table li.leader b { color: var(--gold); }
.league-boss-callout { margin: 0 0 8px; padding: 8px 9px; border: 1px solid rgba(216,104,88,.42); background: linear-gradient(90deg, rgba(216,104,88,.1), rgba(211,174,93,.06)); }
.league-boss-callout small { display: block; color: #e4a79a; font: 800 8px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.league-boss-callout b { display: block; margin-top: 5px; color: var(--cream); font-size: 10px; line-height: 1.25; }
.league-table li.boss-target { background: rgba(216,104,88,.09); box-shadow: inset -2px 0 0 rgba(216,104,88,.75); }
.league-table li.boss-target span, .league-table li.boss-target strong { color: #efb5aa; }

/* Dense one-line career bar — replaces the four half-empty topbar cells */
.pro-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 9px 14px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(46,119,84,.2), #0d1410 60%); }
.pro-bar > strong { font: 800 17px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.pro-bar em { color: #b5c0b7; font: 700 12px/1 var(--body); font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.pro-bar em b { color: var(--cream); font-family: var(--mono); font-size: 13px; }
.pro-bar-sep { width: 1px; height: 16px; background: var(--line-strong); }
.pro-bar-spacer { flex: 1; }
.pro-bar-season { color: var(--gold) !important; }
.pro-bar .crest-sm { margin: 0; }

/* Fixture strip: one line, always visible */
.fixture-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 15px; border: 1px solid var(--line); background: #0d1410; }
.fx-type { color: var(--gold); font: 800 10px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.fx-teams { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fx-teams b { font: 800 17px/1.05 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-teams i { color: var(--gold); font-family: Georgia, serif; font-size: 13px; }
.fx-teams .crest-sm { margin: 0; }
.fx-meta { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fx-meta em { color: var(--muted); font: 700 9.5px/1 var(--body); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.fx-meta b { color: var(--cream); font: 800 14px/1 var(--mono); }

/* Left-panel tabs */
.camp-tabs { display: flex; margin-top: 10px; border-bottom: 1px solid var(--line); }
.camp-tabs button { padding: 10px 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 800 11.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.camp-tabs button:hover { color: var(--cream); }
.camp-tabs button.on { color: var(--gold-light); box-shadow: inset 0 -2px 0 var(--gold); }
.camp-tab-body { padding-top: 12px; }

/* Scouting report: a readable list, not squeezed squares */
.scout-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.scout-rows > div { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: #0d1410; }
.scout-rows small { flex: 0 0 88px; color: var(--muted); font: 700 10px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.scout-rows b { color: var(--cream); font: 700 13px/1.35 var(--body); }
.form-line { display: inline-flex; gap: 3px; }
.form-line i { display: grid; place-items: center; width: 17px; height: 17px; font: 800 10px/1 var(--mono); font-style: normal; }
.form-line i.f-w { background: rgba(120,185,143,.25); color: var(--success); }
.form-line i.f-d { background: rgba(201,166,75,.2); color: var(--gold-light); }
.form-line i.f-l { background: rgba(216,104,88,.22); color: var(--danger); }
.duel-block { margin-top: 10px; padding: 11px 14px; border-left: 3px solid var(--danger); background: rgba(216,104,88,.08); }
.duel-block > span { color: var(--danger); font: 800 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.duel-block strong { display: block; margin-top: 5px; font: 800 16px/1 var(--display); text-transform: uppercase; }
.duel-block strong b { color: var(--gold-light); font-family: var(--mono); font-size: 14px; }
.duel-block > small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.duel-block p { margin: 8px 0 0; color: #c8d0ca; font-size: 13px; line-height: 1.45; }
.duel-block p b { color: var(--cream); }
.duel-block em { display: block; margin-top: 6px; color: var(--gold); font-size: 11.5px; font-style: normal; }
.extras-body .extras-note { margin: 0 0 10px; color: var(--muted); font-size: 12px; }

@media (max-height: 680px) {
  .pro-bar { padding: 6px 12px !important; margin-bottom: 7px !important; }
  .pro-bar > strong { font-size: 15px !important; }
  .fixture-strip { padding: 7px 12px !important; }
  .fx-teams b { font-size: 15px !important; }
  .camp-tabs button { padding: 8px 14px !important; }
  .camp-tab-body { padding-top: 9px !important; }
  .scout-rows > div { padding: 6px 10px !important; }
  .duel-block { padding: 9px 12px !important; }
}

/* Match week: fixture facts compressed into one bar so the decision is the hero */
.fixture-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 16px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(46,119,84,.16), transparent); }
.fixture-bar-main .event-kicker { margin: 0 0 4px; }
.fixture-bar-main h1 { margin: 0; font: 800 clamp(20px, 2.4vw, 30px)/1.02 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.fixture-bar-main h1 span { color: var(--gold); font-family: Georgia, serif; font-style: italic; font-size: .62em; text-transform: none; }
.fixture-bar-main > p { margin: 5px 0 0; color: #b5c0b7; font-size: 12.5px; }
.fixture-bar-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fixture-bar-stats span { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border: 1px solid var(--line); background: #0d1410; min-width: 0; }
.fixture-bar-stats small { color: var(--muted); font: 700 9.5px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.fixture-bar-stats b { color: var(--cream); font: 800 13px/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; }

.duel-line { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; margin-top: 8px; padding: 9px 14px; border-left: 3px solid var(--danger); background: rgba(216,104,88,.08); }
.duel-line > span { color: var(--danger); font: 800 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.duel-line strong { color: var(--cream); font: 700 13px/1.3 var(--body); }
.duel-line strong b { color: var(--gold-light); font-family: var(--mono); }
.duel-line em { color: #b5c0b7; font-size: 12px; font-style: normal; line-height: 1.35; }

/* Session cards: numbers first, prose second */
.train-chips { display: flex !important; flex-wrap: wrap; gap: 4px; margin: 7px 0 5px; }
.train-chips i { padding: 2px 6px; border: 1px solid var(--line-strong); font: 700 10px/1.4 var(--mono); font-style: normal; }
.train-chips i.up { color: var(--success); border-color: rgba(120,185,143,.45); }
.train-chips i.down { color: var(--danger); border-color: rgba(216,104,88,.5); }
.train-desc { color: var(--muted) !important; font-size: 12px !important; line-height: 1.35 !important; }
.blocks-left { padding: 5px 10px; border: 1px solid var(--gold); color: var(--gold-light); font: 800 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.training-card.rare-session { border-color: var(--gold); background: linear-gradient(150deg, rgba(201,166,75,.16), #111a15 70%); }
.training-card.rare-session small { color: var(--gold-light); }
.training-card.rare-session strong { color: var(--gold-light); }

@media (max-width: 980px) {
  .fixture-bar { grid-template-columns: 1fr; }
  .duel-line { grid-template-columns: 1fr; gap: 5px; }
}
@media (max-height: 680px) {
  .fixture-bar { padding: 8px 12px !important; gap: 10px !important; }
  .fixture-bar-main h1 { font-size: clamp(17px, 1.9vw, 22px) !important; }
  .fixture-bar-main > p { margin-top: 3px !important; font-size: 11.5px !important; }
  .fixture-bar-stats { gap: 4px !important; }
  .fixture-bar-stats span { padding: 4px 7px !important; }
  .fixture-bar-stats b { font-size: 11.5px !important; }
  .fixture-bar-stats small { font-size: 9px !important; }
  .duel-line { padding: 6px 11px !important; margin-top: 5px !important; gap: 9px !important; }
  .duel-line strong, .duel-line em { font-size: 11.5px !important; }
  .train-desc { display: none !important; }
  .train-chips { margin: 5px 0 3px !important; }
  .training-card strong { font-size: 13px !important; line-height: 1.15 !important; }
  /* The seasonal twist is a modifier you have already read — keep it to a line. */
  .run-twist { grid-template-columns: auto 1fr !important; align-items: center !important; gap: 10px !important; padding: 6px 11px !important; margin: 5px 0 !important; }
  .run-twist .event-kicker { display: none !important; }
  .run-twist h3 { font-size: 12px !important; white-space: nowrap; }
  .run-twist p { font-size: 11px !important; }
}

/* Matchday game-plan pick */
.plan-options { display: grid; gap: 9px; margin-top: 18px; }
.plan-choice { align-items: flex-start !important; }
.plan-choice strong { color: var(--gold-light); }
.plan-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; font-style: normal; }
.plan-tags i { padding: 3px 7px; border: 1px solid var(--line-strong); color: #c4cec4; font: 700 10px/1.3 var(--mono); font-style: normal; white-space: nowrap; }
.pulse-plan b { font-size: 13px !important; color: var(--gold-light) !important; }

/* Unscripted match events */
.match-event { margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--blue); background: rgba(131,169,184,.12); }
.match-event span { display: block; color: var(--blue); font: 800 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.match-event p { margin: 6px 0 0; color: #c8d0ca; font-size: 14px; line-height: 1.45; }
.match-event strong { display: block; margin-top: 6px; color: var(--cream); font-size: 14px; }
/* Trait drafts: three boxes, left to right, icon-led */
.trait-draft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.trait-draft-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 13px 14px; border: 1px solid var(--line-strong); background: linear-gradient(165deg, #18241d, #0d1410 72%);
  color: var(--cream); text-align: center; cursor: pointer; transition: transform .16s ease, border-color .16s ease;
}
.trait-draft-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.td-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(201,166,75,.45); border-radius: 50%; color: var(--gold-light); font-size: 20px; line-height: 1; }
.td-tag { color: var(--gold); font: 800 9.5px/1 var(--body); font-style: normal; letter-spacing: .09em; text-transform: uppercase; }
.trait-draft-card strong { font: 800 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.trait-draft-card small { color: #b5c0b7; font-size: 12px; line-height: 1.45; }
.td-badge { position: absolute; top: 8px; right: 8px; padding: 2px 6px; border: 1px solid var(--line-strong); color: var(--muted); font: 800 8.5px/1.3 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.trait-draft-card.combo-ready { border-color: var(--gold); background: linear-gradient(165deg, rgba(201,166,75,.2), #0d1410 72%); }
.trait-draft-card.combo-ready .td-tag { color: var(--cream); }
.trait-draft-card.combo-ready .td-icon { border-color: var(--gold); background: rgba(201,166,75,.16); }
.boon-owned { margin-top: 14px !important; color: var(--muted) !important; font-size: 12px !important; }
@media (max-width: 760px) { .trait-draft { grid-template-columns: 1fr; } .trait-draft-card { flex-direction: row; text-align: left; align-items: center; } }

/* On a phone the two-column option is a squeeze that doubles the card height,
   so the odds read moves under the text and lies flat instead. */
@media (max-width: 760px) {
  .match-choice { grid-template-columns: 1fr; gap: 10px; }
  .mc-read { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
  .mc-odds { flex-direction: row; align-items: center; gap: 7px; }
  .mc-chips { justify-content: flex-end; }
}
@media (max-height: 780px) {
  .trait-draft-card { padding: 12px 11px; gap: 5px; }
  .td-icon { width: 36px; height: 36px; font-size: 17px; }
  .trait-draft-card strong { font-size: 15px; }
  .trait-draft-card small { font-size: 11.5px; }
}

/* Fixture strip: two clear rows instead of one long run-on line */
.fixture-strip { flex-wrap: wrap; row-gap: 8px; }
.fx-teams { flex: 1 1 100%; order: 2; justify-content: flex-start; }
.fx-type { order: 1; flex: 1 1 100%; }
.fx-meta { order: 3; }
.fx-teams b { font-size: 18px; }

/* Scouting tab: a compact list, not a page */
.scout-report { display: grid; gap: 8px; align-content: start; }
.scout-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scout-rows > div { flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 10px; }
.scout-rows small { flex: none; }
@media (max-width: 980px) { .scout-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 900px) {
  /* The Boss brief sits above the tabs, so its 170px was charged to every tab
     including Prepare. Keep the stake and the stakes line, drop the prose. */
  .ladder-boss-brief { margin: 8px 0 !important; padding: 9px 12px !important; gap: 8px !important; }
  .ladder-boss-brief p { display: none !important; }
  .ladder-boss-brief strong { font-size: 15px !important; }
  .ladder-boss-brief small { font-size: 9px !important; }
  .ladder-boss-brief footer { gap: 8px !important; }
  .ladder-boss-brief footer span { font-size: 10px !important; }
  .ladder-boss-stake { padding: 6px 10px !important; }
  .ladder-boss-stake b { font-size: 12px !important; }
  .ladder-boss-stake small { font-size: 9px !important; }
  .fixture-affix-chips { margin: 6px 0 !important; }

  /* The opponent-trait panel was the tallest thing on the Scouting tab. The
     detail line is flavour; the counter is the part you act on, so keep the
     counter and move the description to a tooltip. */
  .opponent-affix-panel { margin: 0 !important; padding: 10px 12px !important; }
  .opponent-affix-grid { gap: 6px !important; }
  .opponent-affix-card { padding: 8px 10px !important; }
  .opponent-affix-card p { display: none !important; }
  .opponent-affix-card strong { font-size: 13px !important; }
  .opponent-affix-card em { font-size: 11px !important; line-height: 1.35 !important; }
  .opponent-affix-card small { font-size: 9px !important; }
  .affix-panel-head { margin-bottom: 7px !important; }
  .run-twist { margin: 0 !important; padding: 8px 11px !important; }
  .run-twist h3 { font-size: 13px !important; }
  .run-twist p { font-size: 11.5px !important; }
  .scout-rows > div { padding: 6px 9px; }
  .scout-rows b { font-size: 12px; }
  .duel-block { padding: 9px 12px; }
  .duel-block strong { font-size: 14px; }
  .duel-block p { margin-top: 6px; font-size: 12px; }
  .duel-block em { font-size: 11px; }
}

/* An unspent free action is easy to walk past — make the tab say so. */
.camp-tabs button.needs-attention { color: var(--gold-light); }
.camp-tabs button.needs-attention:not(.on) { animation: tab-nudge 2.2s ease-in-out infinite; }
.camp-tabs button.needs-attention:not(.on):hover { animation-play-state: paused; }
@keyframes tab-nudge {
  0%, 55%, 100% { color: var(--gold-light); transform: translateY(0); }
  72% { color: #ffe9ad; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .camp-tabs button.needs-attention:not(.on) { animation: none; } }
.camp-tabs button.needs-attention::before { content: "●"; margin-right: 6px; color: var(--gold); font-size: 9px; vertical-align: 2px; }

/* Route draft: read the trade-off, not a paragraph */
.route-lede { margin: 4px 0 0 !important; color: var(--muted) !important; font-size: 13px !important; }
.season-route-card small { display: flex; align-items: center; gap: 6px; }
.route-card-top em { padding: 2px 7px; border: 1px solid currentColor; font: 800 9.5px/1.4 var(--body); font-style: normal; letter-spacing: .05em; text-transform: uppercase; }
.route-risk-seasonboss { color: var(--gold); }
.route-risk-highrisk { color: var(--danger); }
.route-risk-controlled, .route-risk-league { color: var(--success); }
.route-risk-personal { color: var(--blue); }
.route-ladder { margin-top: 7px; padding: 3px 8px; border: 1px solid rgba(201,166,75,.5); color: var(--gold-light); font: 800 9.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; align-self: flex-start; }

/* Training cards read in one glance: label, name, numbers. */
.train-chips i.done { color: var(--muted); border-color: var(--line-strong); }

/* Season digest: headlines lead, the rest folds away */
.season-more { margin: 14px 0 4px; border: 1px solid var(--line); background: rgba(9,13,11,.5); }
.season-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--muted); font: 800 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.season-more summary::-webkit-details-marker { display: none; }
.season-more summary::after { content: "▾"; color: var(--gold); }
.season-more[open] summary::after { content: "▴"; }
.season-more summary:hover { color: var(--cream); }
.season-more summary small { margin-left: auto; margin-right: 6px; color: var(--gold); font-size: 10px; }
.season-more > div { padding: 4px 14px 12px; border-top: 1px solid var(--line); }
.headline-note { margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.1); }
.headline-note span { display: block; margin-bottom: 5px; color: var(--gold); font: 800 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.headline-note strong { color: var(--cream); font-size: 14.5px; line-height: 1.45; font-weight: 600; }
.match-replay > span { display: block; margin-bottom: 6px; color: var(--muted); font: 800 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }

/* One trait vocabulary instead of five */
.traits-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: rgba(201,166,75,.05); }
.traits-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.traits-head small { color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.traits-head b { color: var(--gold-light); font: 900 16px/1 var(--mono); }
.trait-list { display: flex; flex-wrap: wrap; gap: 5px; }
.trait-tag { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 8px; border: 1px solid var(--line-strong); font: 700 11px/1.2 var(--body); cursor: help; }
.trait-tag em { font: 700 9px/1 var(--mono); font-style: normal; opacity: .75; text-transform: uppercase; }
.trait-build { border-color: rgba(201,166,75,.5); color: var(--gold-light); }
.trait-boss { border-color: rgba(120,185,143,.55); color: var(--success); }
.trait-intel { border-color: rgba(131,169,184,.55); color: var(--blue); }
.trait-scar { border-color: rgba(216,104,88,.6); color: var(--danger); }
.trait-memory { border-color: rgba(155,142,196,.55); color: #b6a9de; }

/* Routine match beats carry over instead of costing a whole screen */
.carried-beat { display: flex; gap: 10px; margin: 8px 0; padding: 8px 11px; border-left: 2px solid var(--line-strong); background: rgba(255,255,255,.03); color: #b5c0b7; font-size: 12.5px; line-height: 1.4; }
.carried-beat.won { border-left-color: var(--success); }
.carried-beat.lost { border-left-color: var(--danger); }
.carried-beat time { color: var(--gold); font: 800 11px/1.4 var(--mono); white-space: nowrap; }

/* Career epilogue: the people, and what the run unlocked */
.career-people { margin: 12px 22px; padding: 12px 14px; border-left: 3px solid var(--line-strong); background: rgba(255,255,255,.03); }
.career-people > span { display: block; margin-bottom: 8px; color: var(--muted); font: 800 10px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.career-people > div { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 4px 0; }
.career-people em { color: var(--muted); font: 700 10.5px/1.35 var(--body); font-style: normal; text-transform: uppercase; }
.career-people b { color: #c8d0ca; font: 600 12.5px/1.4 var(--body); }

.challenge-result { margin: 12px 22px; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(201,166,75,.1); }
.challenge-result > span { display: block; margin-bottom: 8px; color: var(--gold); font: 800 10px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.challenge-result > div { display: flex; flex-wrap: wrap; gap: 6px; }
.challenge-chip { padding: 4px 9px; border: 1px solid rgba(201,166,75,.45); color: var(--gold-light); font: 700 11px/1.3 var(--body); cursor: help; }
.challenge-chip.fresh { border-color: var(--gold); background: rgba(201,166,75,.2); color: var(--cream); animation: goal-pop .5s cubic-bezier(.2,1.4,.4,1); }

.challenge-board { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.save-backup { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 28px; padding: 18px 20px; border: 1px solid rgba(201,166,75,.38); background: linear-gradient(110deg, rgba(201,166,75,.12), rgba(12,20,15,.65)); }
.save-backup h2 { margin: 3px 0 5px; font: 800 clamp(21px, 2.5vw, 30px)/1 var(--display); text-transform: uppercase; }
.save-backup p { max-width: 640px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.save-backup .eyebrow { color: var(--gold-light); }
.save-backup-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.backup-import-modal { width: min(100% - 24px, 520px); }
.challenge-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.challenge-board-head h2 { margin: 0; font: 800 clamp(24px, 3vw, 36px)/1 var(--display); text-transform: uppercase; }
.challenge-board-head b { color: var(--gold-light); font: 900 26px/1 var(--mono); white-space: nowrap; }
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; }
.challenge-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 11px 13px; border: 1px solid var(--line); background: rgba(9,13,11,.5); opacity: .58; }
.challenge-card.done { opacity: 1; border-color: rgba(201,166,75,.5); background: rgba(201,166,75,.08); }
.challenge-card > span { color: var(--muted); font: 800 13px/1.2 var(--mono); }
.challenge-card.done > span { color: var(--gold); }
.challenge-card strong { display: block; font: 800 14px/1.2 var(--body); }
.challenge-card.done strong { color: var(--gold-light); }
.challenge-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
@media (max-height: 720px) { .career-people, .challenge-result { margin: 9px 18px; padding: 9px 12px; } }

.reunion-badge { display: inline-block; padding: 3px 8px; border: 1px solid var(--danger); color: var(--danger); font: 800 9.5px/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.season-route-card .reunion-badge { margin-top: 7px; align-self: flex-start; }

/* Dressing room */
.squad-result { display: grid; gap: 6px; margin: 16px 0; padding: 13px 15px; border-left: 3px solid var(--blue); background: rgba(131,169,184,.1); }
.squad-result.favoured { border-left-color: var(--success); background: rgba(120,185,143,.1); }
.squad-result.clash { border-left-color: var(--danger); background: rgba(216,104,88,.1); }
.squad-result.upheaval { border-left-color: var(--gold); background: rgba(201,166,75,.12); }
.squad-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 2px; }
.squad-head span { color: var(--blue); font: 800 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.squad-result.favoured .squad-head span { color: var(--success); }
.squad-result.clash .squad-head span { color: var(--danger); }
.squad-result.upheaval .squad-head span { color: var(--gold); }
.squad-head small { color: var(--muted); font-size: 12px; }
.squad-result strong { color: var(--cream); font-size: 14px; line-height: 1.45; font-weight: 600; }

.squad-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid var(--line); border-left: 3px solid var(--blue); background: rgba(131,169,184,.07); }
.squad-card > small { display: block; color: var(--muted); font: 700 10px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.squad-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: baseline; margin-top: 7px; }
.squad-row em { color: var(--muted); font: 700 10px/1.2 var(--body); font-style: normal; text-transform: uppercase; }
.squad-row b { color: var(--cream); font: 700 12.5px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; }
.squad-row i { font: 700 10px/1.2 var(--mono); font-style: normal; white-space: nowrap; }
.squad-row i.fit-good { color: var(--success); }
.squad-row i.fit-bad { color: var(--danger); }
.squad-row i.fit-ok { color: var(--muted); }
.squad-demand { display: block; margin-top: 9px; color: #b5c0b7; font-size: 11px; line-height: 1.4; text-transform: none !important; letter-spacing: 0 !important; }

.quiet-options { display: grid; gap: 9px; margin-top: 16px; }
.quiet-choice { align-items: flex-start !important; }
.quiet-choice strong { color: var(--gold-light); }
.quiet-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; font-style: normal; }
.quiet-tags i { padding: 2px 6px; border: 1px solid var(--line-strong); font: 700 10px/1.4 var(--mono); font-style: normal; }
.quiet-tags i.up { color: var(--success); border-color: rgba(120,185,143,.45); }
.quiet-tags i.down { color: var(--danger); border-color: rgba(216,104,88,.5); }
.quiet-full { margin-top: 14px; width: 100%; }

.match-event.opponent-strike { border-left-color: var(--danger); background: rgba(216,104,88,.13); }
.match-event.opponent-strike span { color: var(--danger); }

/* overflow:hidden here silently cancelled the base modal's overflow-y:auto,
   so the one screen that stacks a goal, a twist and an opponent strike was
   also the one screen that could not scroll. Clip sideways for the shake
   animation; never clip vertically. */
.match-outcome-modal { position: relative; overflow-x: hidden; overflow-y: auto; }
.match-outcome-modal.goal-outcome { animation: goal-shake .5s ease; box-shadow: inset 0 0 0 2px var(--gold), 0 0 32px rgba(201,166,75,.35); }
.match-outcome-modal.concede-outcome { box-shadow: inset 0 0 0 2px var(--danger); }
.match-outcome-modal.success-outcome { box-shadow: inset 0 0 0 1px var(--pitch-bright); }
.goal-banner, .concede-banner { text-align: center; padding: 14px; font: 900 30px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.goal-banner { color: var(--ink); background: linear-gradient(90deg, var(--gold), var(--gold-light)); animation: goal-pop .45s cubic-bezier(.2,1.4,.4,1); }
.concede-banner { color: var(--cream); background: rgba(216,104,88,.25); border-bottom: 2px solid var(--danger); font-size: 20px; }
@keyframes goal-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes goal-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .match-outcome-modal.goal-outcome, .goal-banner { animation: none; } }

.match-clock { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.match-clock span { color: var(--gold-light); font: 900 30px/1 var(--mono); }
.match-clock small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.match-pulse { display: grid; grid-template-columns: 105px 1fr 1fr; margin: 0 0 15px; border: 1px solid var(--line); }
.match-pulse > span, .match-pulse > div { padding: 10px 12px; }
.match-pulse > span { border-right: 1px solid var(--line); }
.match-pulse > div + div { border-left: 1px solid var(--line); }
.match-pulse small { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.match-pulse > span b { display: block; margin-top: 5px; color: var(--gold-light); font: 800 18px/1 var(--mono); }
.match-pulse > div > i { display: block; height: 5px; margin-top: 9px; overflow: hidden; background: #29352d; }
.match-pulse > div > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--pitch-bright), var(--gold)); transition: width .25s ease; }
.match-energy > i b { background: linear-gradient(90deg, #b86e52, var(--pitch-bright)) !important; }
.live-comment { display: grid; grid-template-columns: 42px 1fr; gap: 10px; margin: 0 0 14px !important; padding: 9px 12px; background: rgba(46,119,84,.12); color: #c8d1ca; }
.live-comment time { color: var(--gold); font-weight: 800; }
.match-scene-copy, .match-outcome-copy { color: #c9d1cb !important; }
.match-options { margin-top: 14px; }
.match-choice-modal .match-options .choice { grid-template-columns: minmax(0, 1fr) auto; }
.match-outcome-modal .modal-body { padding-top: 28px; }
.match-outcome-modal .match-pulse { margin: 20px 0 24px; }
/* Scrolling is the safety net; being able to see the way out is the fix.
   The only action on this screen now sticks to the bottom of the modal, so
   however many beats stack up it is on screen from the moment you arrive. */
.match-outcome-modal .modal-body > .btn-primary {
  position: sticky;
  bottom: 0;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  box-shadow: 0 -14px 22px #0d1510;
}

.run-card { margin: 14px 0 18px; padding: 12px; border: 1px solid rgba(211,174,93,.36); background: linear-gradient(135deg, rgba(211,174,93,.08), rgba(9,16,12,.45)); }
.run-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.run-card small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.run-card > div:first-child b { color: var(--gold-light); font: 800 12px/1 var(--mono); }
.run-memories { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.run-memory, .run-empty { display: inline-block; padding: 5px 7px; border: 1px solid var(--line); color: var(--cream); font-size: 10px; line-height: 1.2; }
.run-memory { border-color: rgba(126,184,129,.45); color: var(--pitch-bright); }
.run-empty { color: var(--muted); }
.run-card p { margin: 10px 0 0; color: #aeb9b0; font-size: 11px; line-height: 1.45; }
.run-card p strong { color: var(--gold-light); }
.run-twist { display: grid; grid-template-columns: minmax(130px, .55fr) 1fr; gap: 16px; align-items: start; margin: 13px 0 16px; padding: 13px 15px; border-left: 2px solid var(--gold); background: rgba(211,174,93,.06); }
.run-twist h3 { margin: 2px 0 0; color: var(--cream); font-size: 17px; }
.run-twist p { margin: 0; color: #b8c3ba; font-size: 13px; line-height: 1.45; }
.reroll-choice { margin-top: 12px; }

/* Rogue route draft ------------------------------------------------------- */
.route-draft-modal { width: min(1080px, calc(100vw - 32px)); max-width: 1080px; }
.season-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.season-route-card { min-width: 0; min-height: 310px; padding: 18px; border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(18,55,42,.9), rgba(6,10,8,.98)); color: var(--cream); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.season-route-card:hover, .season-route-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); background: linear-gradient(160deg, rgba(24,73,54,.95), rgba(8,13,10,.98)); outline: none; }
.season-route-card.route-glory { border-color: rgba(211,174,93,.62); box-shadow: inset 0 3px 0 rgba(211,174,93,.68); }
.season-route-card.route-trust { border-color: rgba(126,184,129,.44); }
.season-route-card.boss-route { border-color: rgba(216,104,88,.76); background: radial-gradient(circle at 50% 12%, rgba(216,104,88,.16), transparent 38%), linear-gradient(160deg, rgba(41,35,20,.94), rgba(10,12,9,.98)); box-shadow: inset 0 3px 0 #d86858, 0 0 24px rgba(216,104,88,.08); }
.season-route-card.boss-route:hover, .season-route-card.boss-route:focus-visible { border-color: var(--gold-light); background: radial-gradient(circle at 50% 12%, rgba(216,104,88,.22), transparent 42%), linear-gradient(160deg, rgba(48,40,22,.98), rgba(11,14,10,.98)); }
.route-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font: 800 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.route-card-top em { color: var(--gold-light); font-style: normal; }
.route-clubs { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 80px; margin: 14px 0; border-block: 1px solid var(--line); }
.route-clubs i { color: var(--muted); font: 800 10px/1 var(--mono); font-style: normal; text-transform: uppercase; }
.season-route-card > strong { display: block; color: var(--cream); font: 800 25px/1.05 var(--display); text-transform: uppercase; }
.season-route-card > small { display: block; margin-top: 8px; color: var(--gold-light); font-size: 11px; }
.season-route-card > p { min-height: 54px; margin: 14px 0; color: #b8c3ba; font-size: 13px; line-height: 1.45; }
.route-payoff { display: block; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--pitch-bright); font: 750 11px/1.45 var(--body); }
.route-draft-note { margin: 15px 0 0 !important; padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(211,174,93,.06); color: var(--muted) !important; font-size: 12px !important; }
.route-draft-note strong { color: var(--gold-light); }

/* Ladder-driven season Boss ---------------------------------------------- */
.ladder-boss-stake { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; margin: 14px 0; border: 1px solid rgba(216,104,88,.48); background: rgba(7,11,8,.82); }
.ladder-boss-stake > span, .ladder-boss-stake > i { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; font-style: normal; }
.ladder-boss-stake > span:last-child { text-align: right; }
.ladder-boss-stake > i { border-inline: 1px solid rgba(216,104,88,.4); background: linear-gradient(180deg, rgba(216,104,88,.18), rgba(211,174,93,.08)); text-align: center; }
.ladder-boss-stake small { color: var(--muted); font: 800 8px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.ladder-boss-stake b { margin-top: 5px; overflow: hidden; color: var(--cream); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ladder-boss-stake > i small { color: #efb5aa; }
.ladder-boss-stake > i b { color: var(--gold-light); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.ladder-boss-stake.compact { margin: 10px 0; }
.ladder-boss-stake.compact > span, .ladder-boss-stake.compact > i { padding: 8px 9px; }
.season-route-card .ladder-boss-stake { width: 100%; margin: 0 0 11px; }
.season-route-card .ladder-boss-stake b { font-size: 9px; }
.season-route-card .ladder-boss-stake > span, .season-route-card .ladder-boss-stake > i { padding-inline: 6px; }
.match-choice-modal > .ladder-boss-stake { margin: 0; border-inline: 0; border-top: 0; }

.ladder-boss-brief { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(300px, 1.25fr); gap: 12px 16px; align-items: center; margin: 13px 0 15px; padding: 14px 15px; border: 1px solid rgba(216,104,88,.55); background: radial-gradient(circle at 0 0, rgba(216,104,88,.14), transparent 50%), rgba(9,14,11,.82); }
.ladder-boss-brief > div > small { color: #e4a79a; font: 800 9px/1 var(--mono); letter-spacing: .08em; }
.ladder-boss-brief > div > strong { display: block; margin-top: 7px; color: var(--cream); font: 800 23px/1 var(--display); text-transform: uppercase; }
.ladder-boss-brief > div > p { margin: 7px 0 0; color: #b9c2bb; font-size: 11px; line-height: 1.35; }
.ladder-boss-brief .ladder-boss-stake { margin: 0; }
.ladder-boss-brief footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(216,104,88,.3); }
.ladder-boss-brief footer span { color: var(--muted); font: 750 10px/1.35 var(--body); }
.ladder-boss-brief footer span:first-child { color: var(--pitch-bright); }
.ladder-boss-brief footer span:last-child { color: #e4a79a; text-align: right; }

/* Permanent build cards and scar drafts --------------------------------- */
.boon-meta { display: block; margin-bottom: 8px; color: var(--gold-light); font: 800 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; }
.boon-choice.combo-ready { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.boon-owned em { color: var(--pitch-bright); font: 800 9px/1 var(--mono); font-style: normal; text-transform: uppercase; }
.build-card .boon-tag { display: inline-flex; align-items: center; gap: 5px; }
.build-card .boon-tag em { color: var(--muted); font: 800 8px/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.build-card .scar-tag { border-color: rgba(216,104,88,.62); color: #efb5aa; }
.build-synergies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(211,174,93,.28); }
.build-synergies strong { padding: 5px 7px; background: rgba(211,174,93,.1); color: var(--gold-light); font: 800 9px/1 var(--mono); text-transform: uppercase; }
.build-hint { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.recovery-modal { max-width: 860px; }
.injury-memory { margin: 16px 0; padding: 12px 15px; border-left: 3px solid var(--danger); background: rgba(216,104,88,.08); color: #d9c7c2; font-size: 13px; }
.recovery-choice-grid { display: grid; gap: 9px; }
.recovery-choice { grid-template-columns: minmax(0, 1fr) auto; }
.recovery-choice > b { align-self: center; color: var(--gold-light); font: 800 10px/1 var(--mono); text-transform: uppercase; }
.scar-reward { margin: 18px 0; padding: 16px; border: 1px solid rgba(216,104,88,.58); background: linear-gradient(135deg, rgba(216,104,88,.1), rgba(9,13,11,.7)); }
.scar-reward strong { display: block; color: #efb5aa; font: 800 24px/1 var(--display); text-transform: uppercase; }
.scar-reward small { display: block; margin-top: 8px; color: #c9d1cb; line-height: 1.45; }
.synergy-unlock { padding: 11px 13px; border: 1px solid rgba(211,174,93,.5); color: var(--gold-light) !important; text-align: center; }

.league-finish-result { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0; border: 1px solid var(--line-strong); background: rgba(46,119,84,.08); }
.league-finish-result > div { padding: 13px 15px; }
.league-finish-result > div + div { border-left: 1px solid var(--line); }
.league-finish-result span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.league-finish-result strong { display: block; margin-top: 4px; color: var(--cream); font: 800 22px/1 var(--mono); }
.league-finish-result p { grid-column: 1 / -1; margin: 0; padding: 10px 15px; border-top: 1px solid var(--line); color: #b8c3ba; font-size: 12px; }
.league-finish-result.champion { border-color: var(--gold); background: rgba(211,174,93,.09); }
.league-finish-result.bottom { border-color: rgba(216,104,88,.55); }
.league-finish-result .boss-table-result { color: #d9c8aa; }
.league-finish-result .boss-table-result b { color: var(--gold-light); }
.league-finish-result .boss-table-result small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.4; text-transform: none; }
.match-pulse { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.pulse-build b { color: var(--pitch-bright) !important; font-size: 11px !important; line-height: 1.25 !important; }
.retirement-build em.scar { border-color: rgba(216,104,88,.55); color: #efb5aa; }
.retirement-build p { margin: 10px 0 0; color: var(--gold-light); font-size: 11px; }
.legacy-build { margin: 12px 0 0 !important; color: var(--gold-light) !important; font-size: 11px !important; }

/* Elite opponents, counters and learned tactical intel ------------------- */
.season-route-card { display: flex; flex-direction: column; }
.fixture-affix-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 13px; }
.fixture-affix-chips > small { margin-right: 3px; color: #e5b4a8; font: 800 9px/1 var(--mono); letter-spacing: .08em; }
.fixture-affix-chips > span { padding: 5px 7px; border: 1px solid rgba(216,104,88,.48); background: rgba(216,104,88,.07); color: #e9c1b7; font: 800 9px/1.15 var(--mono); text-transform: uppercase; }
.fixture-affix-chips > span.mastered { border-color: rgba(126,184,129,.48); background: rgba(126,184,129,.08); color: var(--pitch-bright); }
.season-route-card .fixture-affix-chips { margin-top: 0; }
.season-route-card .fixture-affix-chips > small { flex-basis: 100%; }

.opponent-affix-panel { margin: 14px 0; padding: 14px; border: 1px solid rgba(216,104,88,.42); background: linear-gradient(135deg, rgba(216,104,88,.08), rgba(8,13,10,.72)); }
.affix-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.affix-panel-head span { color: #efb5aa; font: 800 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.affix-panel-head small { color: var(--muted); font-size: 10px; }
.opponent-affix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.opponent-affix-card { min-width: 0; padding: 12px; border: 1px solid var(--line); background: rgba(8,13,10,.66); }
.opponent-affix-card.mastered { border-color: rgba(126,184,129,.5); }
.opponent-affix-card > small { color: #df9b8d; font: 800 9px/1 var(--mono); letter-spacing: .06em; }
.opponent-affix-card.mastered > small { color: var(--pitch-bright); }
.opponent-affix-card > strong { display: block; margin-top: 7px; color: var(--cream); font-size: 15px; }
.opponent-affix-card > p { margin: 7px 0; color: #b7c1b9; font-size: 11px; line-height: 1.4; }
.opponent-affix-card > em { display: block; padding-top: 7px; border-top: 1px solid var(--line); color: var(--gold-light); font: normal 750 10px/1.4 var(--body); }

.match-affix-brief { margin: 12px 0; padding: 11px 13px; border-left: 3px solid var(--danger); background: rgba(216,104,88,.08); }
.match-affix-brief > span { color: #efb5aa; font: 800 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.match-affix-brief > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.match-affix-brief b { padding: 5px 7px; border: 1px solid rgba(216,104,88,.42); color: #e5c0b7; font-size: 10px; }
.match-affix-brief b.mastered { border-color: rgba(126,184,129,.48); color: var(--pitch-bright); }
.match-affix-brief p { margin: 8px 0 0 !important; color: var(--muted) !important; font-size: 10px !important; }
.pulse-affix b { color: #efb5aa !important; font-size: 10px !important; line-height: 1.25 !important; }

.tactical-reward-modal { width: min(900px, calc(100vw - 32px)); max-width: 900px; }
.counter-proof { margin: 16px 0 !important; padding: 10px 12px; border-left: 2px solid var(--pitch-bright); background: rgba(126,184,129,.08); color: var(--muted) !important; font-size: 12px !important; }
.counter-proof strong { color: var(--pitch-bright); }
.tactical-reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 20px; }
.tactical-reward-card { min-height: 250px; display: flex; flex-direction: column; padding: 17px; border: 1px solid rgba(216,104,88,.5); background: linear-gradient(150deg, #241816, #0c110e 75%); color: var(--cream); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease; }
.tactical-reward-card:hover, .tactical-reward-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); outline: none; }
.tactical-reward-card > small { color: #df9b8d; font: 800 9px/1 var(--mono); letter-spacing: .06em; }
.tactical-reward-card > strong { margin-top: 12px; font: 800 25px/1 var(--display); text-transform: uppercase; }
.tactical-reward-card > p { margin: 13px 0; color: #b8c1ba; font-size: 12px; line-height: 1.45; }
.tactical-reward-card > em { color: var(--gold-light); font: normal 750 11px/1.4 var(--body); }
.tactical-reward-card > b { margin-top: auto; padding-top: 18px; color: var(--pitch-bright); font-size: 11px; text-transform: uppercase; }

.ladder-reward-modal { width: min(780px, calc(100vw - 32px)); max-width: 780px; }
.ladder-reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 20px; }
.ladder-reward-card { min-height: 245px; display: flex; flex-direction: column; padding: 18px; border: 1px solid rgba(211,174,93,.62); background: radial-gradient(circle at 50% 0, rgba(216,104,88,.16), transparent 52%), linear-gradient(150deg, #282116, #0b100d 78%); color: var(--cream); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.ladder-reward-card:hover, .ladder-reward-card:focus-visible { transform: translateY(-3px); border-color: var(--gold-light); box-shadow: 0 10px 28px rgba(0,0,0,.24); outline: none; }
.ladder-reward-card > small { color: #e4a79a; font: 800 9px/1 var(--mono); letter-spacing: .07em; }
.ladder-reward-card > strong { margin-top: 14px; color: var(--gold-light); font: 800 28px/.95 var(--display); text-transform: uppercase; }
.ladder-reward-card > p { margin: 15px 0; color: #bdc6bf; font-size: 12px; line-height: 1.5; }
.ladder-reward-card > b { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(211,174,93,.25); color: var(--pitch-bright); font-size: 11px; text-transform: uppercase; }

.intel-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid rgba(126,184,129,.38); background: rgba(126,184,129,.05); }
.intel-card > div:first-child { display: flex; justify-content: space-between; gap: 9px; }
.intel-card small { color: var(--muted); font: 800 9px/1 var(--mono); text-transform: uppercase; }
.intel-card b { color: var(--pitch-bright); font-size: 11px; }
.intel-card > div + div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.intel-card span, .rival-evolutions span { padding: 5px 7px; border: 1px solid var(--line); color: #c8d2ca; font-size: 9px; }
.intel-card p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.ladder-relic-card { margin: 14px 16px; padding: 11px 13px; border: 1px solid rgba(211,174,93,.42); background: linear-gradient(120deg, rgba(211,174,93,.08), rgba(216,104,88,.04)); }
.ladder-relic-card > div:first-child { display: flex; justify-content: space-between; gap: 9px; }
.ladder-relic-card small { color: #e4a79a; font: 800 9px/1 var(--mono); text-transform: uppercase; }
.ladder-relic-card b { color: var(--gold-light); font-size: 11px; }
.ladder-relic-card > div + div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ladder-relic-card span { padding: 5px 7px; border: 1px solid rgba(211,174,93,.32); color: var(--gold-light); font-size: 9px; }
.ladder-relic-card p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.rival-evolutions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(216,104,88,.26); }
.rival-evolutions > small { flex-basis: 100%; color: #df9b8d; }
.rival-evolutions span { border-color: rgba(216,104,88,.35); color: #e5b4a8; }
.retirement-intel em, .legacy-intel { color: var(--pitch-bright) !important; }
.retirement-ladder em, .legacy-ladder { color: var(--gold-light) !important; }

@media (max-width: 760px) {
  .opponent-affix-grid, .tactical-reward-grid, .ladder-reward-grid { grid-template-columns: 1fr; }
  .tactical-reward-card, .ladder-reward-card { min-height: 0; }
  .fixture-affix-chips { align-items: flex-start; }
  .fixture-affix-chips > small { flex-basis: 100%; }
  .match-affix-brief > div { flex-direction: column; align-items: flex-start; }
  .intel-card > div:first-child, .ladder-relic-card > div:first-child { align-items: flex-start; flex-direction: column; }
  .ladder-boss-brief { grid-template-columns: 1fr; }
  .ladder-boss-brief footer { grid-template-columns: 1fr; }
  .ladder-boss-brief footer span:last-child { text-align: left; }
}

@media (max-width: 980px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .journey-panel { min-height: 0; }
  .journey-list { max-height: 240px; }
  .landing-grid { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .feature { min-height: 170px; }
  .feature h2 { margin-top: 24px; }
  .page-masthead { grid-template-columns: 1fr; gap: 32px; }
  .page-hero-art { min-height: 190px; }
  .page-block-head, .about-split { grid-template-columns: 1fr; gap: 20px; }
  .guide-steps { grid-template-columns: repeat(2, 1fr); }
  .guide-step:nth-child(2) { border-right: 0; }
  .guide-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pro-topbar { grid-template-columns: 1.3fr 1fr 80px; }
  .pro-career-panel { min-height: 0; }
}

@media (max-width: 760px) {
  .site-nav { padding: 0 14px; }
  .nav-link { padding: 8px 6px; font-size: 11px; }
  .version { display: none; }
  .hero { height: auto; min-height: calc(100svh - 112px); }
  .hero::after { background: linear-gradient(0deg, var(--ink) 0%, rgba(4,7,5,.25) 68%), linear-gradient(90deg, rgba(4,7,5,.65), rgba(4,7,5,.05)); }
  .hero-content { padding: 70px 20px 55px; }
  .hero h1 { font-size: clamp(56px, 18vw, 92px); }
  .hero-copy { font-size: 15px; }
  .hero-actions .btn { flex: 1; }
  .hero-notes { grid-template-columns: 1fr; max-width: none; }
  .hero-notes span + span { border-top: 0; border-left: 1px solid var(--line); }
  .landing-info-inner { width: min(100% - 32px, 620px); padding: 62px 0 72px; }
  .landing-info-head, .landing-faq { grid-template-columns: 1fr; gap: 30px; }
  .landing-info-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 34px; }
  .info-card { min-height: 0; }
  .info-card h3 { margin-top: 28px; }
  .landing-faq { margin-top: 58px; padding-top: 38px; }
  .content-page { width: min(100% - 32px, 620px); padding: 42px 0 66px; }
  body.intro-mode #app { min-height: calc(100svh - 58px); }
  body.intro-mode .career-intro { min-height: calc(100svh - 58px); }
  .career-intro { min-height: calc(100svh - 58px); place-items: start center; padding: 42px 16px 48px; }
  .intro-panel { padding: 28px 22px; }
  .intro-copy { min-height: 240px; font-size: 17px; line-height: 1.6; }
  .intro-begin { width: 100%; }
  .page-masthead { gap: 28px; padding-bottom: 34px; }
  .page-masthead h1 { font-size: clamp(44px, 14vw, 68px); }
  .page-lede { margin-top: 19px; font-size: 17px; }
  .page-block { margin-top: 46px; }
  .page-block-head { margin-bottom: 20px; }
  .page-block-head h2, .about-split h2, .privacy-note h2 { font-size: clamp(34px, 11vw, 52px); }
  .guide-steps, .metric-grid, .value-grid, .privacy-list { grid-template-columns: 1fr; }
  .guide-step, .value-grid > article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .guide-step:last-child, .value-grid > article:last-child { border-bottom: 0; }
  .guide-step h3, .value-grid h3 { margin-top: 28px; }
  .metric-grid article { min-height: 0; }
  .privacy-list { border-left: 1px solid var(--line); }
  .privacy-list article { min-height: 0; }
  .guide-callout { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 46px; padding: 23px 20px; }
  .guide-callout .btn { width: 100%; }
  .privacy-note { margin-top: 46px; padding: 23px 20px; }
  .section-head { align-items: start; flex-direction: column; }
  .save-backup { align-items: stretch; flex-direction: column; gap: 15px; }
  .save-backup-actions { display: grid; grid-template-columns: 1fr; }
  .save-backup-actions .btn { width: 100%; }
  .draft-grid { grid-template-columns: 1fr; }
  .prospect-card { min-height: 430px; }
  .career-topbar { grid-template-columns: 1.3fr repeat(2, 1fr); }
  .pro-topbar { grid-template-columns: 1.4fr 1fr; }
  .pro-topbar .topbar-stat:nth-child(3) { display: none; }
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .player-panel { display: block; }
  .event-panel { min-height: 560px; }
  .event-content { padding: 28px 20px; }
  .choice { grid-template-columns: 1fr auto; }
  .choice-risk { display: none; }
  .meter-grid { grid-template-columns: 1fr 1fr; }
  .meter:nth-child(2) { border-right: 0; }
  .meter:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
  .result-stat { border-bottom: 1px solid var(--line); }
  .finance-ledger { grid-template-columns: 1fr 1fr; }
  .finance-ledger span:nth-child(2) { border-right: 0; }
  .finance-ledger span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .legacy-grid { grid-template-columns: 1fr; }
  .journey-list { grid-template-columns: 1fr; max-height: 300px; }
  .opponent-grid, .training-grid, .free-action-grid { grid-template-columns: 1fr; }
  .opponent-card { min-height: 230px; }
  .opponent-card small { margin-top: 45px; }
  .camp-heading, .selected-opponent { align-items: flex-start; flex-direction: column; }
  .fixture-hero { align-items: flex-start; }
  .match-intel, .duel-card { grid-template-columns: 1fr; }
  .duel-card > strong { padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .brief-compact, .brief-compact span, .ready-card { align-items: flex-start; flex-direction: column; }
  .training-choice-grid { grid-template-columns: 1fr; }
  .training-choice-grid .training-card { min-height: 150px; }
  .ready-card .btn { width: 100%; }
  .extras-panel summary { flex-direction: column; gap: 5px; }
  .live-score { gap: 8px; padding: 13px 14px; }
  .live-score span { font-size: 13px; }
  .match-pulse { grid-template-columns: 1fr 1fr; }
  .match-pulse > span { grid-row: span 2; }
  .match-pulse .pulse-build { grid-row: auto; }
  .match-pulse > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .season-route-grid { grid-template-columns: 1fr; }
  .season-route-card { min-height: 0; }
  .season-route-card > p { min-height: 0; }
  .route-draft-modal { width: min(100% - 18px, 620px); }
  .route-draft-modal .modal-body, .recovery-modal .modal-body { padding-inline: 18px; }
  .league-finish-result { grid-template-columns: 1fr 1fr; }
  .recovery-choice { grid-template-columns: 1fr; }
  .recovery-choice > b { justify-self: start; }
  .run-twist { grid-template-columns: 1fr; gap: 7px; }
  .match-choice-modal .match-options .choice { grid-template-columns: 1fr; }
  .fixture-route, .cup-route { grid-template-columns: 1fr; gap: 6px; }
  .fixture-route > i { display: none; }
  .fixture-facts { grid-template-columns: 1fr 1fr; }
  .fixture-facts span { border-bottom: 1px solid var(--line); }
  .season-brief { align-items: flex-start; flex-direction: column; }
  .season-brief > span { width: 100%; padding: 10px 0 0; border-top: 1px solid var(--line-strong); border-left: 0; text-align: left; }
  .scouting-grid { grid-template-columns: 1fr; }
  .path-grid { grid-template-columns: 1fr; }
  .pro-offer-grid { grid-template-columns: 1fr; }
  .pro-offer { min-height: 220px; }
  .matchday-brief { grid-template-columns: 1fr; }
  .matchday-brief div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .matchday-brief div:last-child { border-bottom: 0; }
  .path-card { min-height: 0; display: grid; grid-template-columns: 48px 1fr auto; gap: 15px; align-items: center; padding: 17px; }
  .path-icon { width: 46px; height: 46px; margin: 0; }
  .path-copy { margin: 0; }
  .path-copy strong { font-size: 23px; }
  .path-copy em { margin-top: 7px; }
  .path-arrow { align-self: center; margin: 0; }
  .site-footer { padding: 17px 15px; flex-direction: column; justify-content: center; text-align: center; }
  .footer-copy { justify-content: center; }
}

@media (max-width: 340px) {
  .site-nav { padding-inline: 10px; }
  .site-nav nav { gap: 0; }
  .brand { gap: 6px; font-size: 13px; letter-spacing: .08em; }
  .brand-crest { width: 22px; height: 22px; }
  .brand-word { height: 11px; }
  .nav-link { padding-inline: 4px; font-size: 10px; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .choice-prompt > button { animation: none !important; }
  .pro-offer-grid > button, .academy-options > button, .transfer-options > button, .draft-grid .prospect-card .btn { animation: none !important; }
}


/* ---- Touch targets -------------------------------------------------------
   Measured on a 375px screen mid-career: nav links were 27px tall and footer
   links 11px, which is under the 24px WCAG minimum and far under what a thumb
   can reliably hit. The career topbar also pushed 9px past the viewport. */
@media (max-width: 640px) {
  .site-nav nav { gap: 0; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .nav-link { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 7px; white-space: nowrap; }
  .site-nav { padding-inline: 12px; gap: 8px; flex-wrap: nowrap; }
  .site-nav .brand { min-width: 0; flex-shrink: 1; }
  .site-nav .version { display: none; }
  .footer-links { gap: 2px 10px; }
  .footer-links a, .footer-links button { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 2px; }
  .career-topbar { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .career-topbar .topbar-stat:last-child { border-right: 0; }
  .pro-topbar { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
/* Minimal analytics choice: visible without interrupting the game flow. */
.analytics-consent {
  position: fixed;
  z-index: 10000;
  right: 16px;
  bottom: 16px;
  width: min(420px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(9, 13, 11, .97);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
  color: #f4f6f1;
}

.analytics-consent p { margin: 0 0 10px; font-size: .84rem; line-height: 1.45; }
.analytics-consent div { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 480px) {
  .analytics-consent { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .analytics-consent div { display: grid; grid-template-columns: 1fr 1fr; }
}