:root {
  color-scheme: dark;
  --bg: #070d12;
  --bg-deep: #04080b;
  --surface: #0e1821;
  --surface-raised: #142432;
  --surface-soft: #182a39;
  --line: rgba(205, 225, 239, 0.16);
  --line-strong: rgba(205, 225, 239, 0.32);
  --ink: #f5f2e9;
  --muted: #91a3b1;
  --muted-2: #647785;
  --accent: #ff6242;
  --accent-dark: #c83b21;
  --ice: #64d8ff;
  --gold: #f3ca52;
  --success: #62e6a7;
  --danger: #ff7676;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --content: 1160px;
  --ease-fluid: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 160ms;
  --motion-base: 360ms;
  --motion-slow: 620ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(100, 216, 255, 0.08), transparent 32rem),
    radial-gradient(circle at 88% 28%, rgba(255, 98, 66, 0.08), transparent 34rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  font-family: var(--body);
  line-height: 1.5;
}

body::before {
  position: fixed;
  inset: -48px;
  z-index: -1;
  content: '';
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  will-change: transform, opacity;
  animation: ambient-drift 18s ease-in-out infinite alternate;
}

body.history-open { overflow: hidden; }

button, input { font: inherit; }
button { color: inherit; }
button, [role='button'] { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

button,
input,
.panel,
.story-panel,
.crest img,
.attribute-bar span,
.idol-track span,
.luck-track span {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-fluid);
}

button:active:not(:disabled) { transform: scale(.975); transition-duration: 80ms; }

:focus-visible {
  outline: 3px solid var(--ice);
  outline-offset: 3px;
}

#app { view-transition-name: game-stage; }
html.is-transitioning #app { pointer-events: none; }
#app[data-motion='native'] :is(.history-overlay, .history-panel) { animation: none; }
html.is-transitioning .season-confetti i { animation: none; opacity: 0; }

::view-transition-group(game-stage) {
  animation-timing-function: var(--ease-fluid);
}

::view-transition-old(game-stage) {
  animation: view-fade-out 150ms var(--ease-fluid) both;
}

::view-transition-new(game-stage) {
  animation: view-fade-in 210ms var(--ease-fluid) both;
}

html[data-motion='page'][data-motion-direction='forward']::view-transition-old(game-stage) {
  animation: view-page-old-forward 300ms var(--ease-fluid) both;
}

html[data-motion='page'][data-motion-direction='forward']::view-transition-new(game-stage) {
  animation: view-page-new-forward 440ms var(--ease-spring) both;
}

html[data-motion='page'][data-motion-direction='backward']::view-transition-old(game-stage) {
  animation: view-page-old-backward 300ms var(--ease-fluid) both;
}

html[data-motion='page'][data-motion-direction='backward']::view-transition-new(game-stage) {
  animation: view-page-new-backward 440ms var(--ease-spring) both;
}

html[data-motion='overlay']::view-transition-old(game-stage) {
  animation: view-overlay-old 220ms var(--ease-fluid) both;
}

html[data-motion='overlay']::view-transition-new(game-stage) {
  animation: view-overlay-new 300ms var(--ease-spring) both;
}

#app.motion-pending :is(.launch-layout, .player-card, .career-actions, .story-panel, .retired-card) {
  opacity: 0;
  transform: translateY(22px) scale(.992);
}

#app.motion-ready[data-motion='enter'] :is(.launch-layout, .player-card, .retired-card),
#app.motion-ready[data-motion='page'] :is(.launch-layout, .player-card, .retired-card) {
  animation: motion-rise var(--motion-slow) var(--ease-spring) both;
}

#app.motion-ready[data-motion='enter'] .career-actions,
#app.motion-ready[data-motion='page'] .career-actions {
  animation: motion-rise 500ms 60ms var(--ease-spring) both;
}

#app.motion-ready[data-motion='enter'] .story-panel,
#app.motion-ready[data-motion='page'] .story-panel {
  animation: motion-rise var(--motion-slow) 110ms var(--ease-spring) both;
}

#app.motion-pending .motion-item {
  opacity: 0;
  transform: translateY(12px) scale(.985);
}

#app.motion-ready:is([data-motion='enter'], [data-motion='page']) .motion-item,
#app.motion-ready[data-motion='overlay'] .motion-item {
  animation: motion-rise 520ms var(--ease-spring) both;
  animation-delay: calc(150ms + min(var(--motion-index, 0), 8) * 42ms);
}

#app.motion-pending :is(.attribute-bar span, .idol-track span, .luck-track span) {
  transform: scaleX(0);
  transform-origin: left center;
}

#app.motion-ready :is(.attribute-bar span, .idol-track span, .luck-track span) {
  transform: scaleX(1);
  transform-origin: left center;
  transition-duration: 900ms;
  transition-delay: 150ms;
  transition-timing-function: var(--ease-spring);
}

#app.motion-ready .attribute:nth-child(2) .attribute-bar span { transition-delay: 190ms; }
#app.motion-ready .attribute:nth-child(3) .attribute-bar span { transition-delay: 230ms; }
#app.motion-ready .attribute:nth-child(4) .attribute-bar span { transition-delay: 270ms; }
#app.motion-ready .attribute:nth-child(5) .attribute-bar span { transition-delay: 310ms; }

@keyframes view-fade-out {
  to { opacity: 0; transform: scale(.994); }
}

@keyframes view-fade-in {
  from { opacity: 0; transform: scale(.994); }
}

@keyframes view-page-old-forward {
  to { opacity: 0; transform: translateX(-28px) scale(.985); }
}

@keyframes view-page-new-forward {
  from { opacity: 0; transform: translateX(34px) scale(.985); }
}

@keyframes view-page-old-backward {
  to { opacity: 0; transform: translateX(28px) scale(.985); }
}

@keyframes view-page-new-backward {
  from { opacity: 0; transform: translateX(-34px) scale(.985); }
}

@keyframes view-overlay-old {
  to { opacity: .55; transform: scale(.985); }
}

@keyframes view-overlay-new {
  from { opacity: .35; transform: scale(1.015); }
}

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1rem;
  color: var(--bg);
  background: var(--ice);
  font-weight: 800;
}
.skip-link:focus { top: 1rem; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  padding: 0 max(1rem, calc((100vw - var(--content)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(4, 8, 11, 0.88);
  backdrop-filter: blur(18px);
  animation: topbar-drop 560ms var(--ease-spring) both;
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: .7rem;
  color: var(--accent);
  border-right: 1px solid var(--line-strong);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease-spring), filter var(--motion-base) var(--ease-fluid);
}
.brand-mark svg { width: 37px; height: 37px; }
.brand-copy { display: grid; line-height: .9; }
.brand-copy strong,
.brand-copy small { font-family: var(--display); letter-spacing: .09em; }
.brand-copy strong { font-size: 1.35rem; font-weight: 900; }
.brand-copy small { margin-top: .28rem; color: var(--ice); font-size: .75rem; font-weight: 800; }

.topbar-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.live-dot { width: 7px; height: 7px; background: var(--success); box-shadow: 0 0 14px var(--success); animation: live-pulse 2s var(--ease-fluid) infinite; }
.meta-divider { width: 1px; height: 16px; background: var(--line-strong); }

.ghost-button {
  justify-self: end;
  padding: .65rem .85rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.ghost-button:hover { color: var(--ink); border-color: var(--ice); }

@media (hover: hover) {
  .brand:hover .brand-mark { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 10px rgba(116, 232, 255, .25)); }
}

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

.page-shell {
  width: min(var(--content), calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 5.5rem) 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .8rem;
  color: var(--ice);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { width: 26px; height: 3px; content: ''; background: currentColor; }

.display-title {
  max-width: 780px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.3rem, 11vw, 9rem);
  font-style: italic;
  font-weight: 900;
  line-height: .76;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.display-title .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.display-title .accent { color: var(--accent); }

.hero-copy {
  max-width: 660px;
  margin: 1.7rem 0 0;
  color: #b2c0ca;
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.launch-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.3rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.hero-stat { padding: 1rem .8rem 1rem 0; }
.hero-stat + .hero-stat { padding-left: 1rem; border-left: 1px solid var(--line); }
.hero-stat strong { display: block; color: var(--ink); font-family: var(--display); font-size: 2rem; line-height: 1; }
.hero-stat span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.panel {
  position: relative;
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(20, 36, 50, .96), rgba(9, 18, 26, .98));
  box-shadow: 18px 18px 0 rgba(0,0,0,.22);
}
.panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: '';
  background: linear-gradient(90deg, var(--accent) 0 28%, var(--ice) 28% 39%, transparent 39%);
}
.setup-panel { padding: clamp(1.2rem, 3vw, 2rem); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.section-head h2,
.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-style: italic;
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
}
.section-head span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }

.form-grid { display: grid; grid-template-columns: 1fr 110px; gap: .8rem; }
.field-label { display: grid; gap: .42rem; }
.field-label > span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.text-input {
  width: 100%;
  min-height: 50px;
  padding: .8rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: rgba(4, 10, 15, .72);
  color: var(--ink);
  font-weight: 700;
}
.text-input::placeholder { color: var(--muted-2); }
.text-input:focus { border-color: var(--ice); box-shadow: 0 0 0 4px rgba(93,210,255,.09), 0 12px 30px rgba(0,0,0,.18); transform: translateY(-1px); }

.setup-block { margin-top: 1.25rem; }
.setup-label { display: flex; justify-content: space-between; margin-bottom: .55rem; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.setup-label strong { color: var(--ink); }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); }
.segment-button {
  min-height: 44px;
  padding: .7rem .75rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: rgba(4,10,15,.45);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}
.segment-button:last-child { border-right: 0; }
.segment-button:hover { color: var(--ink); background: var(--surface-soft); }
.segment-button.is-active { color: var(--bg-deep); background: var(--ice); }
.segment-button.is-accent.is-active { background: var(--accent); color: var(--ink); }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.role-card {
  position: relative;
  min-height: 92px;
  padding: .85rem 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(4,10,15,.52);
  text-align: left;
  cursor: pointer;
}
.role-card::after { position: absolute; right: -.3rem; bottom: -1.2rem; color: rgba(255,255,255,.04); font-family: var(--display); font-size: 5rem; font-weight: 900; content: attr(data-number); }
.role-card:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.role-card.is-active { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); animation: selection-snap 320ms var(--ease-spring) both; }
.role-card strong { display: block; font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; }
.role-card span { color: var(--muted); font-size: .75rem; }

.club-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
  max-height: 310px;
  padding-right: .35rem;
  overflow: auto;
  scrollbar-color: var(--line-strong) transparent;
}
.club-button {
  display: grid;
  grid-template-rows: 52px auto;
  place-items: center;
  min-height: 102px;
  padding: .65rem .4rem;
  border: 1px solid var(--line);
  background: rgba(4, 10, 15, .54);
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}
.club-button:hover { color: var(--ink); border-color: var(--ice); transform: translateY(-2px); }
.club-button.is-active { color: var(--ink); border-color: var(--accent); background: rgba(255, 98, 66, .09); box-shadow: inset 0 -3px 0 var(--accent); animation: selection-snap 320ms var(--ease-spring) both; }
.club-button:disabled,
.club-button.is-provisional { opacity: .46; border-style: dashed; cursor: not-allowed; filter: grayscale(1); }
.club-button:disabled:hover { color: var(--muted); border-color: var(--line); transform: none; background: rgba(4, 10, 15, .54); }
.club-button span:last-child { display: -webkit-box; overflow: hidden; font-size: .68rem; font-weight: 700; line-height: 1.18; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.crest {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--crest-size, 48px);
  height: var(--crest-size, 48px);
  flex: 0 0 auto;
}
.crest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.35)); }
.crest span { display: grid; place-items: center; width: 88%; height: 88%; color: var(--ink); background: linear-gradient(135deg, var(--surface-soft), var(--accent-dark)); border: 2px solid rgba(255,255,255,.5); clip-path: polygon(50% 0, 92% 16%, 86% 75%, 50% 100%, 14% 75%, 8% 16%); font-family: var(--display); font-size: calc(var(--crest-size, 48px) * .25); font-weight: 900; }

.selected-club {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .9rem;
  padding: .85rem;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.035);
  transition: background-color var(--motion-base) var(--ease-fluid), border-color var(--motion-base) var(--ease-fluid);
}
.selected-club strong { display: block; font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; }
.selected-club small { color: var(--muted); }

.button-row { display: grid; grid-template-columns: auto 1fr; gap: .65rem; margin-top: 1.3rem; }
.primary-button,
.secondary-button {
  min-height: 52px;
  padding: .9rem 1.15rem;
  border: 1px solid transparent;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.primary-button { position: relative; overflow: hidden; background: var(--accent); color: #120805; box-shadow: 7px 7px 0 rgba(255,98,66,.16); }
.primary-button::after { position: absolute; inset: -50% auto -50% -35%; width: 24%; content: ''; background: rgba(255,255,255,.38); transform: rotate(18deg) translateX(-260%); transition: transform 520ms var(--ease-fluid); pointer-events: none; }
.primary-button:hover { background: #ff795d; transform: translate(-2px,-2px); box-shadow: 9px 9px 0 rgba(255,98,66,.16); }
.primary-button:hover::after { transform: rotate(18deg) translateX(760%); }
.secondary-button { border-color: var(--line-strong); background: transparent; color: var(--muted); }
.secondary-button:hover { color: var(--ink); border-color: var(--ice); }
.full-button { width: 100%; }
.form-error { min-height: 1.2rem; margin: .65rem 0 0; color: var(--danger); font-size: .78rem; font-weight: 700; }

.career-shell { width: min(var(--content), calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0 3rem; }
.player-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(380px, .92fr);
  grid-template-areas:
    'player metrics'
    'attributes meta';
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--ice);
  background: linear-gradient(105deg, #162d44 0%, #0d1924 72%);
}
.player-card::after { position: absolute; right: -4%; top: -95%; width: 360px; height: 360px; content: ''; border: 70px solid rgba(255,255,255,.025); border-radius: 50%; }
.player-main { grid-area: player; position: relative; z-index: 2; display: grid; grid-template-columns: 82px 1fr auto; gap: .85rem; align-items: center; min-width: 0; padding: .7rem .9rem .65rem; }
.overall { display: grid; align-content: center; height: 64px; padding-right: .65rem; border-right: 1px solid var(--line-strong); text-align: center; }
.overall strong { font-family: var(--display); font-size: 3rem; font-weight: 900; line-height: .78; }
.overall span { margin-top: .35rem; color: var(--muted); font-size: .54rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.player-name { margin: 0; overflow: hidden; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.45rem); font-style: italic; font-weight: 900; line-height: .84; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.player-name span { color: var(--accent); }
.player-clubline { margin: .32rem 0 0; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.player-clubline strong { color: var(--success); }
.player-crest { position: relative; z-index: 2; display: grid; justify-items: center; gap: .4rem; }
.player-crest small { color: var(--muted); font-family: var(--display); font-size: .62rem; font-weight: 700; text-transform: uppercase; }

.metrics-row { grid-area: metrics; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { display: grid; align-content: center; min-width: 0; padding: .45rem .35rem; text-align: center; background: rgba(4,9,13,.2); }
.metric + .metric { border-left: 1px solid var(--line); }
.metric strong { display: block; font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.metric:first-child strong { color: var(--success); }
.metric span { color: var(--muted); font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.attribute-row { grid-area: attributes; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; padding: .5rem .75rem; border-top: 1px solid var(--line); }
.attribute { min-width: 0; }
.attribute-top { display: flex; justify-content: space-between; gap: .25rem; color: var(--muted); font-size: .54rem; font-weight: 800; text-transform: uppercase; }
.attribute-top strong { color: var(--ink); font-family: var(--display); font-size: .88rem; }
.attribute-bar { height: 3px; margin-top: .25rem; overflow: hidden; background: rgba(255,255,255,.08); }
.attribute-bar span { display: block; width: var(--value); height: 100%; background: linear-gradient(90deg, var(--ice), var(--accent)); }

.career-meta { grid-area: meta; position: relative; z-index: 2; display: grid; grid-template-columns: .9fr .9fr .75fr 1.45fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.meta-card { display: grid; align-content: center; min-width: 0; padding: .4rem .5rem; }
.meta-card + .meta-card { border-left: 1px solid var(--line); }
.meta-card strong { display: block; overflow: hidden; color: var(--gold); font-family: var(--display); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.meta-card span { color: var(--muted); font-size: .5rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.idol-card { grid-column: auto; display: grid; align-content: center; min-width: 0; padding: .4rem .5rem; border-left: 1px solid var(--line); }
.idol-label { display: flex; justify-content: space-between; gap: .25rem; color: var(--muted); font-size: .52rem; font-weight: 800; text-transform: uppercase; }
.idol-label strong { color: var(--ink); }
.idol-track { height: 4px; margin-top: .28rem; background: rgba(255,255,255,.08); }
.idol-track span { display: block; height: 100%; width: var(--idol); background: linear-gradient(90deg, var(--accent), var(--gold)); }

.career-actions { display: flex; justify-content: flex-end; margin: .35rem 0 .65rem; }
.text-button { padding: .4rem 0; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.text-button:hover { color: var(--ice); border-color: var(--ice); }

.story-panel { position: relative; overflow: hidden; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(15,26,35,.98), rgba(7,13,18,.99)); }
.story-panel::before { position: absolute; inset: 0 auto 0 0; width: 5px; content: ''; background: var(--accent); }
.story-panel::after { position: absolute; right: -2rem; top: -3.5rem; content: '⚽'; opacity: .035; font-size: 13rem; filter: grayscale(1); animation: ball-float 8s ease-in-out infinite alternate; }
.story-content { position: relative; z-index: 2; }
.story-kicker { margin: 0 0 .45rem; color: var(--success); font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.story-title { max-width: 800px; margin: 0; font-family: var(--display); font-size: clamp(2.3rem, 6vw, 4.5rem); font-style: italic; font-weight: 900; line-height: .84; text-transform: uppercase; }
.story-body { max-width: 820px; margin: 1rem 0 1.4rem; color: #b2c0ca; font-size: clamp(.95rem, 2vw, 1.08rem); }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.choice-card { min-height: 128px; padding: 1rem 1.05rem; border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.choice-card:hover { border-color: var(--accent); background: rgba(255,98,66,.07); transform: translateY(-2px); }
.choice-card strong { display: block; font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; }
.choice-card span { display: block; margin-top: .35rem; color: var(--muted); font-size: .8rem; }
.choice-card small { display: block; margin-top: .8rem; color: var(--accent); font-size: .63rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.minigame-panel {
  --minigame-tone: var(--ice);
  border-color: rgba(93,210,255,.38);
  background:
    radial-gradient(circle at 75% 0%, rgba(93,210,255,.12), transparent 32%),
    linear-gradient(145deg, rgba(13,25,35,.99), rgba(5,11,16,.995));
}
.minigame-panel::before { background: linear-gradient(180deg, var(--minigame-tone), var(--accent)); }
.minigame-panel::after { content: ''; width: 22rem; height: 22rem; border: 1px solid rgba(93,210,255,.1); border-radius: 50%; filter: none; animation: none; }
.minigame-content { display: grid; gap: .7rem; }
.minigame-chrome { display: flex; justify-content: space-between; align-items: center; padding-bottom: .55rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.minigame-chrome span { display: flex; align-items: center; gap: .45rem; color: var(--ink); }
.minigame-chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(255,98,66,.7); }
.minigame-chrome small { color: var(--muted-2); font: inherit; }
.minigame-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.minigame-heading .story-kicker { margin-bottom: .2rem; }
.minigame-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.8rem); font-style: italic; font-weight: 900; line-height: .85; text-transform: uppercase; }
.minigame-heading > div:first-child > span { display: block; margin-top: .28rem; color: var(--muted); font-family: var(--display); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.minigame-attribute { display: grid; grid-template-columns: auto auto; gap: .02rem .65rem; min-width: 155px; padding: .55rem .7rem; border: 1px solid rgba(36,225,117,.3); background: rgba(36,225,117,.055); }
.minigame-attribute small { grid-column: 1 / -1; color: var(--muted); font-size: .52rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.minigame-attribute strong { align-self: end; color: var(--success); font-family: var(--display); font-size: 1rem; text-transform: uppercase; }
.minigame-attribute b { grid-row: 2; grid-column: 2; color: var(--ink); font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.minigame-matchup { display: flex; align-items: center; gap: .65rem; width: fit-content; padding: .32rem .45rem; border-left: 2px solid var(--gold); background: rgba(255,255,255,.025); }
.minigame-matchup > span { display: flex; align-items: center; gap: .4rem; }
.minigame-matchup strong { max-width: 230px; overflow: hidden; font-family: var(--display); font-size: 1rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.minigame-matchup em { color: var(--muted-2); font-family: var(--display); font-size: .7rem; font-style: normal; font-weight: 900; }
.minigame-body { max-width: 980px; margin: 0; color: #b7c3cc; font-size: .88rem; line-height: 1.45; }
.minigame-body::first-letter { color: var(--ink); }

.minigame-stage { --flight-y: -82px; --keeper-scale: 1; position: relative; height: 128px; overflow: hidden; border: 1px solid rgba(93,210,255,.22); background: linear-gradient(180deg, rgba(14,43,48,.72), rgba(5,21,25,.92)); isolation: isolate; }
.minigame-stage::before { position: absolute; inset: 0; content: ''; opacity: .22; background: repeating-linear-gradient(90deg, transparent 0 9.8%, rgba(255,255,255,.08) 10% 10.2%); }
.minigame-pitch-lines { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.16) 50%, transparent 50.2%); }
.minigame-pitch-lines::before { position: absolute; left: 50%; top: 6px; width: min(56%, 400px); height: 74px; border: 1px solid rgba(255,255,255,.2); border-top: 0; content: ''; transform: translateX(-50%); }
.minigame-goal { position: absolute; left: 50%; top: 7px; width: min(42%, 300px); height: 58px; border: 3px solid rgba(255,255,255,.72); border-bottom-width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.1) 19px 20px), repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,.1) 14px 15px); box-shadow: 0 9px 22px rgba(0,0,0,.28); }
.minigame-goal i { position: absolute; left: 50%; bottom: -18px; width: 64px; height: 30px; border: 1px solid rgba(255,255,255,.18); border-radius: 50% 50% 0 0; transform: translateX(-50%); }
.minigame-keeper { position: absolute; z-index: 4; left: 50%; top: 43px; width: 30px; height: 31px; transform: translateX(-50%) scale(var(--keeper-scale)); }
.minigame-keeper::before { position: absolute; left: 9px; top: 0; width: 12px; height: 12px; border-radius: 50%; content: ''; background: #f2b38f; }
.minigame-keeper::after { position: absolute; left: 4px; top: 11px; width: 22px; height: 18px; border-radius: 5px 5px 2px 2px; content: ''; background: linear-gradient(135deg, #ad50e8, #6c2ca3); box-shadow: -10px 3px 0 -6px #ad50e8, 10px 3px 0 -6px #ad50e8; }
.minigame-player { position: absolute; z-index: 3; left: 50%; bottom: 6px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(3,9,13,.9); font-size: .88rem; transform: translateX(-50%); }
.minigame-ball { position: absolute; z-index: 5; left: 50%; bottom: 38px; width: 11px; height: 11px; margin-left: -5.5px; border: 2px solid #101820; border-radius: 50%; background: #f7f5ea; box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 5px 9px rgba(0,0,0,.4); animation: minigame-ball-ready 1.6s ease-in-out infinite; }
.minigame-impact { position: absolute; z-index: 2; left: 50%; top: 28px; width: 18px; height: 18px; border: 2px solid var(--minigame-tone); border-radius: 50%; opacity: 0; transform: translateX(calc(-50% + var(--shot-x))) scale(.2); }
.minigame-stage.is-played .minigame-ball { animation: minigame-ball-flight 820ms 90ms var(--ease-fluid) both; }
.minigame-stage.is-played .minigame-keeper { animation: minigame-keeper-dive 760ms 120ms var(--ease-spring) both; }
.minigame-stage.is-played .minigame-impact { animation: minigame-impact 520ms 660ms var(--ease-spring) both; }
.minigame-stage.is-failure .minigame-impact { border-color: var(--accent); }

.minigame-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.minigame-choice { display: grid; grid-template-columns: 38px 1fr; gap: .05rem .55rem; align-content: center; min-height: 88px; padding: .7rem .8rem; border: 1px solid var(--line-strong); background: rgba(2,8,12,.6); text-align: left; cursor: pointer; }
.minigame-choice:hover { border-color: var(--minigame-tone); background: rgba(93,210,255,.065); transform: translateY(-2px); }
.minigame-choice > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(93,210,255,.3); border-radius: 9px; color: var(--ice); background: rgba(93,210,255,.08); font-size: 1.35rem; }
.minigame-choice strong { align-self: end; font-family: var(--display); font-size: 1.05rem; line-height: 1; text-transform: uppercase; }
.minigame-choice small { align-self: start; overflow: hidden; color: var(--muted); font-size: .61rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.minigame-instruction { margin: -.15rem 0 0; color: var(--muted-2); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

.minigame-result { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--line-strong); background: rgba(255,255,255,.028); }
.minigame-result.is-success { border-color: rgba(36,225,117,.45); background: rgba(36,225,117,.055); }
.minigame-result.is-failure { border-color: rgba(255,98,66,.42); background: rgba(255,98,66,.05); }
.minigame-result-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; color: var(--success); font-family: var(--display); font-size: 2rem; font-weight: 900; }
.minigame-result.is-failure .minigame-result-mark { color: var(--accent); }
.minigame-result-copy { min-width: 0; }
.minigame-result-copy > small { color: var(--success); font-size: .54rem; font-weight: 900; letter-spacing: .1em; }
.minigame-result.is-failure .minigame-result-copy > small { color: var(--accent); }
.minigame-result-copy h3 { margin: .08rem 0; font-family: var(--display); font-size: 1.5rem; font-style: italic; line-height: 1; text-transform: uppercase; }
.minigame-result-copy p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.3; }
.minigame-result-copy p strong { color: var(--ink); }
.minigame-result-numbers { display: grid; grid-template-columns: repeat(2, auto); gap: .35rem; }
.minigame-result-numbers span { min-width: 74px; padding: .35rem .45rem; border: 1px solid var(--line); text-align: center; }
.minigame-result-numbers small { display: block; color: var(--muted-2); font-size: .48rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.minigame-result-numbers strong { color: var(--ice); font-family: var(--display); font-size: 1.25rem; }
.minigame-result .primary-button { min-height: 46px; padding: .65rem .8rem; font-size: .78rem; }

@keyframes minigame-ball-ready {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.08); }
}
@keyframes minigame-ball-flight {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  68% { transform: translate3d(var(--shot-x), var(--flight-y), 0) scale(.76); }
  100% { transform: translate3d(var(--shot-x), var(--flight-y), 0) scale(.7); }
}
@keyframes minigame-keeper-dive {
  0% { transform: translateX(-50%) translateX(0) rotate(0) scale(var(--keeper-scale)); }
  100% { transform: translateX(-50%) translateX(var(--keeper-x)) rotate(9deg) scale(var(--keeper-scale)); }
}
@keyframes minigame-impact {
  0% { opacity: 0; transform: translateX(calc(-50% + var(--shot-x))) scale(.2); }
  45% { opacity: .9; }
  100% { opacity: 0; transform: translateX(calc(-50% + var(--shot-x))) scale(2.8); }
}

.report { border-top-color: var(--gold); }
.report-masthead { display: flex; justify-content: space-between; padding-bottom: .7rem; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.report-masthead strong { color: var(--ice); }
.report-title { margin: 1rem 0 .35rem; font-family: var(--display); font-size: clamp(2.5rem, 7vw, 5rem); font-style: italic; font-weight: 900; line-height: .82; text-transform: uppercase; }
.report-summary { margin: 0 0 1rem; color: #b2c0ca; }
.rating-card { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; padding: .8rem 1rem; border: 1px solid rgba(243,202,82,.45); background: rgba(243,202,82,.08); }
.rating-card span { color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.rating-card strong { color: var(--gold); font-family: var(--display); font-size: 2.4rem; line-height: 1; }
#app.motion-ready[data-motion='page'] .rating-card strong { animation: score-pop 760ms 240ms var(--ease-spring) both; }
.report-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.report-list li { padding-left: .8rem; border-left: 3px solid var(--ice); color: #b9c6cf; font-size: .86rem; }
.report-list strong { color: var(--ink); }

.season-report { overflow: hidden; }
.season-achievement { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 1.25rem; align-items: center; min-height: 190px; margin: 1rem 0 .75rem; padding: 1.35rem 1.6rem; overflow: hidden; border: 1px solid var(--line-strong); background: linear-gradient(125deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.season-achievement::after { position: absolute; right: -3rem; bottom: -5rem; width: 14rem; height: 14rem; border: 1px solid currentColor; border-radius: 50%; content: ''; opacity: .07; }
.season-achievement.is-gold { color: var(--gold); border-color: rgba(243,202,82,.6); background: linear-gradient(125deg, rgba(243,202,82,.16), rgba(243,202,82,.035)); }
.season-achievement.is-success { color: var(--success); border-color: rgba(36,225,117,.55); background: linear-gradient(125deg, rgba(36,225,117,.14), rgba(36,225,117,.025)); }
.season-achievement.is-danger { color: var(--accent); border-color: rgba(255,98,66,.55); background: linear-gradient(125deg, rgba(255,98,66,.13), rgba(255,98,66,.025)); }
.season-achievement.is-ice { color: var(--ice); border-color: rgba(93,210,255,.5); background: linear-gradient(125deg, rgba(93,210,255,.12), rgba(93,210,255,.02)); }
.season-achievement.is-neutral { color: #a9b5bd; }
.achievement-mark { position: relative; z-index: 2; display: grid; place-items: center; min-width: 104px; min-height: 104px; }
.achievement-mark > span:last-child { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; background: var(--surface); color: inherit; font-family: var(--display); font-size: 1.15rem; font-weight: 900; }
#app.motion-ready[data-motion='page'] .achievement-mark { animation: trophy-land 820ms 160ms var(--ease-spring) both; }
.achievement-copy { position: relative; z-index: 2; }
.achievement-copy small { display: block; color: currentColor; font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.achievement-copy strong { display: block; margin: .25rem 0; color: currentColor; font-family: var(--display); font-size: clamp(2rem, 5vw, 3.8rem); font-style: italic; line-height: .9; text-transform: uppercase; }
.achievement-copy p { max-width: 690px; margin: .55rem 0 0; color: #b8c3ca; font-size: .84rem; }
.season-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.season-confetti i { position: absolute; width: 24px; height: 6px; background: var(--success); transform: rotate(22deg); animation: confetti-fall 1.55s var(--ease-fluid) both; animation-delay: calc(var(--confetti-index, 0) * 65ms); }
.season-confetti i:nth-child(2n) { width: 18px; background: var(--ice); transform: rotate(-17deg); }
.season-confetti i:nth-child(3n) { background: var(--accent); transform: rotate(58deg); }
.season-confetti i:nth-child(4n) { background: var(--gold); }
.confetti-1 { --confetti-index: 0; --confetti-drift: 20px; left: 5%; top: 15%; }
.confetti-2 { --confetti-index: 2; --confetti-drift: -28px; left: 28%; top: 9%; }
.confetti-3 { --confetti-index: 1; --confetti-drift: 34px; left: 48%; top: 19%; }
.confetti-4 { --confetti-index: 4; --confetti-drift: -18px; left: 72%; top: 11%; }
.confetti-5 { --confetti-index: 3; --confetti-drift: 25px; right: 4%; top: 27%; }
.confetti-6 { --confetti-index: 5; --confetti-drift: -35px; left: 13%; bottom: 12%; }
.confetti-7 { --confetti-index: 7; --confetti-drift: 18px; left: 39%; bottom: 8%; }
.confetti-8 { --confetti-index: 6; --confetti-drift: -22px; left: 63%; bottom: 17%; }
.confetti-9 { --confetti-index: 8; --confetti-drift: 30px; right: 9%; bottom: 9%; }
.confetti-10 { --confetti-index: 9; --confetti-drift: -26px; left: 83%; top: 53%; }
.season-storylines { gap: .45rem; }
.season-storylines li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .45rem; align-items: start; padding: .18rem 0 .18rem .75rem; }
.season-storylines li > span { line-height: 1.35; text-align: center; }
.season-storylines p { margin: 0; }
.report-continue { margin-top: 1.4rem; letter-spacing: .05em; }
.offseason-kicker { margin-top: 1rem; }
.offseason-title { max-width: 780px; margin: .25rem 0 .6rem; font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4.6rem); font-style: italic; font-weight: 900; line-height: .88; text-transform: uppercase; }
.offseason .planning { margin-top: 1.35rem; }

.planning { margin-top: 1rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.planning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.planning h3 { margin: 0 0 .2rem; font-family: var(--display); font-size: 1.7rem; font-style: italic; text-transform: uppercase; }
.planning-intro { margin: 0 0 .75rem; color: var(--muted); font-size: .78rem; }
.market-panel {
  border-color: rgba(93,210,255,.32);
  background:
    radial-gradient(circle at 88% -18%, rgba(93,210,255,.11), transparent 28%),
    linear-gradient(145deg, rgba(12,24,34,.99), rgba(5,11,16,.995));
}
.market-panel::before { background: linear-gradient(180deg, var(--ice), var(--success)); }
.market-panel::after { content: '€'; top: -6rem; right: 1rem; color: rgba(255,255,255,.045); font-family: var(--display); font-size: 20rem; font-weight: 900; filter: none; animation: none; }
.market-content { display: grid; gap: .8rem; }
.market-masthead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.market-player-identity { overflow: hidden; color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.market-player-identity b { color: var(--ink); }
.market-history-button { padding: .22rem 0 .22rem .7rem; border: 0; border-left: 1px solid var(--line-strong); background: transparent; color: var(--ice); font: inherit; cursor: pointer; }
.market-history-button:hover { color: var(--ink); }
.market-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: end; }
.market-heading .offseason-kicker { margin-top: 0; }
.market-heading .offseason-title { max-width: none; font-size: clamp(2.35rem, 4.7vw, 4rem); }
.market-heading .report-summary { margin-bottom: 0; }
.market-snapshot { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); min-width: 390px; border: 1px solid var(--line); background: rgba(2,8,12,.44); }
.market-snapshot > span { display: grid; grid-template-columns: 1fr auto; gap: .05rem .5rem; align-items: center; min-width: 0; padding: .5rem .6rem; }
.market-snapshot > span:nth-child(even) { border-left: 1px solid var(--line); }
.market-snapshot > span:nth-child(n + 3) { border-top: 1px solid var(--line); }
.market-snapshot small { grid-column: 1 / -1; color: var(--muted-2); font-size: .52rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.market-snapshot strong { overflow: hidden; font-family: var(--display); font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.market-snapshot strong i { color: var(--muted-2); font-style: normal; }
.market-snapshot em { font-family: var(--display); font-size: .84rem; font-style: normal; font-weight: 900; }

.offer-market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.offer-contract {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  min-width: 0;
  min-height: 178px;
  padding: .72rem .78rem .68rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 94% 10%, rgba(93,210,255,.09), transparent 38%),
    rgba(3,10,15,.72);
  color: var(--ink);
  text-align: left;
  isolation: isolate;
  cursor: pointer;
}
.offer-contract::after { position: absolute; z-index: -1; right: -2.7rem; bottom: -3.6rem; width: 9rem; height: 9rem; border: 22px solid rgba(255,255,255,.025); border-radius: 50%; content: ''; }
.offer-topline { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--ice), var(--accent)); }
.offer-contract.is-renewal .offer-topline { background: linear-gradient(90deg, var(--success), #baff77); }
.offer-contract:hover { border-color: var(--ice); background-color: rgba(93,210,255,.045); }
.offer-contract.is-active { border-color: var(--success); background-color: rgba(36,225,117,.055); box-shadow: inset 0 0 0 1px rgba(36,225,117,.15), 0 10px 26px rgba(0,0,0,.2); animation: selection-snap 320ms var(--ease-spring) both; }
.offer-clubline { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: .55rem; align-items: center; min-width: 0; }
.offer-clubcopy { min-width: 0; }
.offer-clubcopy strong { display: block; overflow: hidden; font-family: var(--display); font-size: 1.12rem; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.offer-clubcopy small { display: block; margin-top: .16rem; overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.offer-clubline > em { align-self: start; padding: .16rem .28rem; border: 1px solid rgba(93,210,255,.35); color: var(--ice); font-size: .48rem; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.offer-contract.is-renewal .offer-clubline > em { border-color: var(--success); color: var(--success); transform: rotate(4deg); }
.offer-money { display: flex; align-items: baseline; gap: .35rem; margin-top: .48rem; }
.offer-money strong { color: var(--success); font-family: var(--display); font-size: 1.55rem; line-height: 1; }
.offer-money small { color: var(--muted); font-size: .6rem; }
.offer-comparison { display: block; margin-top: .12rem; font-size: .56rem; font-weight: 800; }
.offer-terms { display: grid; gap: .16rem; align-content: center; margin-top: .38rem; }
.offer-terms > span { display: flex; gap: .34rem; align-items: center; min-width: 0; overflow: hidden; color: #b7c4cd; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.offer-terms b { color: var(--ice); font-size: .58rem; text-transform: uppercase; }
.offer-arrival { display: grid; gap: .12rem; align-self: end; margin-top: .38rem; }
.offer-arrival small { overflow: hidden; color: var(--muted); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.offer-standing { display: grid; gap: .25rem; align-self: end; margin-top: .44rem; }
.offer-standing > span { height: 5px; overflow: hidden; background: rgba(255,255,255,.09); }
.offer-standing i { display: block; width: var(--standing); height: 100%; background: linear-gradient(90deg, var(--success), var(--gold)); }
.offer-standing small { color: var(--muted); font-size: .56rem; }
.offer-selected { position: absolute; right: .55rem; bottom: .5rem; display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted-2); font-size: .67rem; }
.offer-contract.is-active .offer-selected { border-color: var(--success); background: var(--success); color: #03150b; font-weight: 900; }

.representative-button { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .7rem; align-items: center; min-height: 52px; padding: .55rem .7rem; border: 1px dashed var(--line-strong); background: rgba(255,255,255,.018); color: var(--muted); text-align: left; cursor: pointer; }
.representative-button > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,98,66,.35); border-radius: 50%; color: var(--accent); font-size: 1rem; }
.representative-button > span:nth-child(2) { min-width: 0; }
.representative-button strong, .representative-button small { display: block; }
.representative-button strong { color: var(--ink); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.representative-button small { margin-top: .1rem; color: var(--muted-2); font-size: .57rem; }
.representative-button em { color: var(--accent); font-size: .55rem; font-style: normal; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.representative-button:hover:not([aria-disabled='true']) { border-color: var(--accent); background: rgba(255,98,66,.055); transform: translateY(-1px); }
.representative-button[aria-disabled='true'] { cursor: default; opacity: .58; }
.representative-button[aria-disabled='true'] em { color: var(--muted-2); }

.market-confirm { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .58rem .65rem; border: 1px solid rgba(36,225,117,.32); background: rgba(36,225,117,.045); }
.market-confirm-club { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.market-confirm-club > span:last-child { display: grid; min-width: 0; }
.market-confirm-club small { color: var(--muted-2); font-size: .48rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.market-confirm-club strong { overflow: hidden; font-family: var(--display); font-size: 1.05rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.market-confirm-club em { overflow: hidden; color: var(--success); font-size: .58rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.market-confirm .primary-button { min-height: 44px; flex: 0 0 auto; padding: .65rem .9rem; font-size: .78rem; }
.market-development { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(0, 1.25fr); gap: .7rem; align-items: center; padding: .55rem .65rem; border: 1px solid var(--line); background: rgba(3,10,15,.62); }
.market-development-copy strong, .market-development-copy small { display: block; }
.market-development-copy strong { color: var(--ice); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.market-development-copy small { margin-top: .12rem; color: var(--muted); font-size: .56rem; }
.market-development-changes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.market-development-changes > span { display: grid; grid-template-columns: 1fr auto; gap: 0 .25rem; padding: .16rem .45rem; border-left: 1px solid var(--line); }
.market-development-changes small { grid-column: 1 / -1; color: var(--muted); font-size: .46rem; letter-spacing: .08em; }
.market-development-changes b { font-family: var(--display); font-size: .88rem; }
.market-development-changes em { color: var(--ink); font-size: .56rem; font-style: normal; }
.is-offseason .player-card { grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr); grid-template-areas: 'player metrics'; }
.is-offseason .metrics-row { border-bottom: 0; }
.is-offseason .attribute-row,
.is-offseason .career-meta { display: none; }

.development-card { overflow: hidden; border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); }
.development-overall { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.development-overall > span { color: var(--muted); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.development-overall > strong { font-family: var(--display); font-size: 2rem; line-height: 1; text-align: center; }
.development-overall i { color: var(--muted-2); font-style: normal; }
.development-overall em { min-width: 2.7rem; font-family: var(--display); font-size: 1.45rem; font-style: normal; font-weight: 900; text-align: right; }
.is-positive { color: var(--success) !important; }
.is-negative { color: var(--accent) !important; }
.is-neutral { color: var(--muted) !important; }
.luck-block { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.luck-label { display: flex; justify-content: space-between; color: var(--muted); font-size: .67rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.luck-label strong { color: var(--ice); }
.luck-track { height: 6px; margin: .45rem 0 .4rem; background: rgba(255,255,255,.08); }
.luck-track span { display: block; width: var(--luck); height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold), var(--success)); }
.luck-block > small { color: var(--muted); font-size: .68rem; }
.development-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .6rem; }
.development-reasons > span { display: grid; gap: .08rem; padding: .45rem .55rem; border: 1px solid var(--line); background: rgba(0,0,0,.16); }
.development-reasons small { color: var(--muted-2); font-size: .56rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.development-reasons strong { color: var(--ink); font-size: .66rem; }
.development-attributes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--line); gap: 1px; }
.development-attribute { display: grid; grid-column: span 2; grid-template-columns: 1fr auto; gap: .2rem .45rem; align-items: center; padding: .65rem .7rem; background: var(--surface); }
.development-attribute:nth-last-child(-n + 2) { grid-column: span 3; }
.development-attribute > span { color: var(--muted); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.development-attribute > strong { font-family: var(--display); font-size: 1.1rem; }
.development-attribute > small { grid-column: 1 / -1; color: var(--ink); font-size: .66rem; }
.event-impact { padding: .75rem 1rem; }
.event-impact > strong { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.event-impact > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.event-impact > div > span { display: flex; gap: .5rem; align-items: center; padding: .38rem .5rem; border: 1px solid var(--line); background: rgba(0,0,0,.18); }
.event-impact small { color: var(--muted); font-size: .6rem; }
.event-impact b { font-family: var(--display); font-size: .95rem; }
.no-impact { margin: 0; padding: .75rem 1rem; color: var(--muted-2); font-size: .67rem; }

.history-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(2,5,8,.84); backdrop-filter: blur(10px); animation: overlay-in 220ms var(--ease-fluid) both; }
.history-panel { width: min(760px, 100%); max-height: min(760px, 90vh); overflow: auto; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 20px 20px 0 rgba(0,0,0,.35); animation: modal-in 440ms var(--ease-spring) both; }
.history-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.history-head h2 { margin: 0; font-family: var(--display); font-size: 2rem; font-style: italic; text-transform: uppercase; }
.history-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.history-item { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.history-season { color: var(--ice); font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.history-item strong { display: block; }
.history-item span { color: var(--muted); font-size: .75rem; }
.history-rating { color: var(--gold); font-family: var(--display); font-size: 1.6rem; font-weight: 900; }
.empty-history { padding: 2rem; color: var(--muted); text-align: center; }

.retired-card { padding: clamp(1.5rem,5vw,4rem); text-align: center; }
.retired-card .display-title { max-width: none; font-size: clamp(4rem,12vw,8rem); }
.retired-stats { display: grid; grid-template-columns: repeat(4,1fr); margin: 2rem 0; border: 1px solid var(--line); }
.retired-stats div { padding: 1rem; }
.retired-stats div + div { border-left: 1px solid var(--line); }
.retired-stats strong { display: block; font-family: var(--display); font-size: 2rem; }
.retired-stats span { color: var(--muted); font-size: .66rem; text-transform: uppercase; }

:is(.metric, .meta-card, .selected-club, .development-attribute, .history-item, .season-storylines li) {
  transition-property: background-color, border-color, transform, box-shadow;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease-fluid);
}

.choice-card small { transition: color var(--motion-fast) ease, transform var(--motion-base) var(--ease-spring); }

@media (hover: hover) {
  .role-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
  .club-button:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.22); }
  .club-button:hover .crest img,
  .offer-contract:hover .crest img { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
  .selected-club:hover { background: rgba(255,98,66,.075); }
  .choice-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.2); }
  .choice-card:hover small { color: #ff8a71; transform: translateX(5px); }
  .offer-contract:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }
  .metric:hover,
  .meta-card:hover { background: rgba(255,255,255,.035); }
  .development-attribute:hover { z-index: 1; transform: translateY(-2px); background: var(--surface-soft); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
  .season-storylines li:hover { transform: translateX(4px); background: rgba(255,255,255,.025); }
  .history-item:hover { background: rgba(93,210,255,.045); transform: translateX(3px); }
}

.site-footer { display: flex; justify-content: space-between; gap: 2rem; width: min(var(--content), calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--muted-2); font-size: .68rem; }
.site-footer p { margin: 0; }
.site-footer strong { color: var(--muted); letter-spacing: .08em; }

@keyframes ambient-drift {
  from { transform: translate3d(-12px, -8px, 0); opacity: .16; }
  to { transform: translate3d(12px, 8px, 0); opacity: .26; }
}

@keyframes topbar-drop {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes live-pulse {
  0%, 100% { opacity: .72; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.22); }
}

@keyframes selection-snap {
  0% { transform: scale(.975); }
  58% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

@keyframes ball-float {
  from { transform: translate3d(0, 0, 0) rotate(-5deg); }
  to { transform: translate3d(-18px, 18px, 0) rotate(8deg); }
}

@keyframes score-pop {
  0% { opacity: 0; transform: translateY(14px) scale(.6) rotate(-6deg); filter: blur(5px); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.14) rotate(1deg); filter: blur(0); text-shadow: 0 0 28px rgba(243,202,82,.65); }
  100% { transform: translateY(0) scale(1); text-shadow: 0 0 0 transparent; }
}

@keyframes trophy-land {
  0% { opacity: 0; transform: translateY(-28px) scale(.65) rotate(-8deg); filter: blur(6px); }
  60% { opacity: 1; transform: translateY(4px) scale(1.08) rotate(2deg); filter: blur(0); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes confetti-fall {
  0% { opacity: 0; translate: 0 -82px; rotate: 0deg; scale: .35; }
  18% { opacity: 1; }
  78% { opacity: .9; }
  100% { opacity: 0; translate: var(--confetti-drift, 16px) 170px; rotate: 620deg; scale: .8; }
}

@keyframes overlay-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(10px); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(28px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 901px) and (max-height: 760px) {
  #app { min-height: 0; }
  .topbar { min-height: 56px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-mark svg { width: 31px; height: 31px; }
  .brand-copy strong { font-size: 1.1rem; }
  .brand-copy small { margin-top: .18rem; font-size: .62rem; }
  .topbar-meta { font-size: .62rem; }
  .ghost-button { padding: .5rem .65rem; font-size: .66rem; }
  .career-shell { padding: .5rem 0 1rem; }
  .player-main { grid-template-columns: 70px 1fr auto; gap: .65rem; padding: .45rem .7rem; }
  .overall { height: 52px; padding-right: .5rem; }
  .overall strong { font-size: 2.5rem; }
  .overall span { margin-top: .2rem; font-size: .48rem; }
  .player-name { font-size: 2rem; }
  .player-clubline { margin-top: .2rem; font-size: .56rem; }
  .player-crest { gap: .2rem; }
  .player-crest .crest { --crest-size: 44px !important; }
  .player-crest small { font-size: .54rem; }
  .metric { padding: .3rem; }
  .metric strong { font-size: 1.2rem; }
  .metric span { font-size: .47rem; }
  .attribute-row { gap: .3rem; padding: .34rem .6rem; }
  .attribute-top { font-size: .49rem; }
  .attribute-top strong { font-size: .78rem; }
  .attribute-bar { margin-top: .18rem; }
  .meta-card { padding: .28rem .4rem; }
  .meta-card strong { font-size: .88rem; }
  .meta-card span { font-size: .45rem; }
  .idol-card { padding: .28rem .4rem; }
  .idol-label { font-size: .46rem; }
  .idol-track { height: 3px; margin-top: .2rem; }
  .career-actions { margin: .18rem 0 .38rem; }
  .text-button { padding: .22rem 0; font-size: .62rem; }
  .story-panel { padding: .72rem 1rem .78rem 1.15rem; }
  .story-kicker { margin-bottom: .18rem; font-size: .58rem; }
  .story-title { font-size: 2.45rem; line-height: .86; }
  .story-body { margin: .38rem 0 .58rem; font-size: .78rem; line-height: 1.35; }
  .choice-grid { gap: .45rem; }
  .choice-card { min-height: 74px; padding: .55rem .72rem; }
  .choice-card strong { font-size: 1.08rem; }
  .choice-card span { margin-top: .15rem; font-size: .67rem; line-height: 1.3; }
  .choice-card small { margin-top: .38rem; font-size: .54rem; }
  .minigame-content { gap: .35rem; }
  .minigame-chrome { padding-bottom: .3rem; font-size: .5rem; }
  .minigame-heading h2 { font-size: 1.9rem; }
  .minigame-heading > div:first-child > span { margin-top: .1rem; font-size: .62rem; }
  .minigame-attribute { min-width: 130px; padding: .3rem .45rem; }
  .minigame-attribute small { font-size: .43rem; }
  .minigame-attribute strong { font-size: .82rem; }
  .minigame-attribute b { font-size: 1.35rem; }
  .minigame-matchup { padding: .18rem .3rem; }
  .minigame-matchup .crest { --crest-size: 25px !important; }
  .minigame-matchup strong { max-width: 170px; font-size: .78rem; }
  .minigame-body { font-size: .65rem; line-height: 1.3; }
  .minigame-stage { --flight-y: -39px; --keeper-scale: .7; height: 66px; }
  .minigame-pitch-lines::before { top: 3px; height: 38px; }
  .minigame-goal { top: 3px; height: 32px; border-width: 2px; }
  .minigame-keeper { top: 20px; transform-origin: center bottom; }
  .minigame-player { bottom: 2px; width: 23px; height: 23px; font-size: .65rem; }
  .minigame-ball { bottom: 25px; width: 8px; height: 8px; margin-left: -4px; }
  .minigame-impact { top: 13px; }
  .minigame-choice-grid { gap: .35rem; }
  .minigame-choice { grid-template-columns: 28px 1fr; min-height: 58px; padding: .35rem .45rem; }
  .minigame-choice > span { width: 28px; height: 28px; font-size: 1rem; }
  .minigame-choice strong { font-size: .82rem; }
  .minigame-choice small { font-size: .51rem; }
  .minigame-instruction { font-size: .48rem; }
  .minigame-result { grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: .45rem; padding: .4rem .5rem; }
  .minigame-result-mark { width: 36px; height: 36px; font-size: 1.45rem; }
  .minigame-result-copy h3 { font-size: 1.05rem; }
  .minigame-result-copy p { font-size: .55rem; }
  .minigame-result-numbers span { min-width: 58px; padding: .22rem .3rem; }
  .minigame-result-numbers strong { font-size: .95rem; }
  .minigame-result .primary-button { min-height: 38px; padding: .4rem .55rem; font-size: .61rem; }
  .is-offseason .career-actions { margin: .1rem 0 .3rem; }
  .market-panel { padding: .52rem .72rem .58rem .82rem; }
  .market-content { gap: .38rem; }
  .market-masthead { gap: .5rem; font-size: .5rem; }
  .market-history-button { padding-left: .5rem; }
  .market-heading { gap: .7rem; }
  .market-heading .offseason-kicker { margin-bottom: .08rem; font-size: .5rem; }
  .market-heading .offseason-title { font-size: 1.85rem; line-height: .86; }
  .market-heading .report-summary { max-width: 580px; font-size: .62rem; line-height: 1.2; }
  .market-snapshot { grid-template-columns: repeat(4, minmax(74px, 1fr)); min-width: 390px; }
  .market-snapshot > span { display: grid; grid-template-columns: 1fr auto; padding: .28rem .38rem; }
  .market-snapshot > span:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); }
  .market-snapshot > span:first-child { border-left: 0; }
  .market-snapshot small { font-size: .42rem; }
  .market-snapshot strong { font-size: .78rem; }
  .market-snapshot em { font-size: .65rem; }
  .offer-market-grid { gap: .32rem; }
  .offer-contract { min-height: 119px; padding: .38rem .45rem .35rem; }
  .offer-clubline { grid-template-columns: 31px minmax(0, 1fr) auto; gap: .35rem; }
  .offer-clubline .crest { --crest-size: 30px !important; }
  .offer-clubcopy strong { font-size: .8rem; }
  .offer-clubcopy small { font-size: .43rem; }
  .offer-clubline > em { padding: .1rem .16rem; font-size: .36rem; }
  .offer-money { margin-top: .22rem; }
  .offer-money strong { font-size: 1.03rem; }
  .offer-money small, .offer-comparison { font-size: .43rem; }
  .offer-terms { gap: .04rem; margin-top: .18rem; }
  .offer-terms > span, .offer-terms b { font-size: .44rem; }
  .offer-arrival, .offer-standing { gap: .04rem; margin-top: .12rem; }
  .offer-arrival small, .offer-standing small { font-size: .42rem; }
  .offer-standing > span { height: 3px; }
  .offer-selected { right: .28rem; bottom: .25rem; width: 16px; height: 16px; font-size: .48rem; }
  .representative-button { min-height: 40px; padding: .25rem .45rem; }
  .representative-button > span:first-child { width: 28px; height: 28px; }
  .representative-button strong { font-size: .55rem; }
  .representative-button small, .representative-button em { font-size: .45rem; }
  .market-confirm { padding: .28rem .4rem; }
  .market-confirm-club .crest { --crest-size: 30px !important; }
  .market-confirm-club strong { font-size: .78rem; }
  .market-confirm-club small, .market-confirm-club em { font-size: .43rem; }
  .market-confirm .primary-button { min-height: 36px; padding: .4rem .6rem; font-size: .62rem; }
  .market-development { padding: .35rem .48rem; }
  .site-footer { padding: .5rem 0 .7rem; font-size: .56rem; }
}

@media (max-width: 900px) {
  .launch-layout { grid-template-columns: 1fr; }
  .hero-pane { padding-bottom: 1rem; }
  .display-title { max-width: 650px; }
  .club-grid { grid-template-columns: repeat(5,1fr); }
  .player-card { display: block; }
  .player-main { grid-area: auto; grid-template-columns: 95px 1fr auto; padding: 1rem; }
  .metrics-row { grid-area: auto; border-top: 1px solid var(--line); border-left: 0; }
  .attribute-row { grid-area: auto; }
  .career-meta { grid-area: auto; grid-template-columns: repeat(3, 1fr); border-left: 0; }
  .idol-card { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .planning-grid { grid-template-columns: 1fr; }
  .is-offseason .player-card { display: block; }
  .offer-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-heading { grid-template-columns: 1fr; gap: .7rem; }
  .market-snapshot { width: 100%; min-width: 0; }
}

@media (max-width: 680px) {
  .topbar { grid-template-columns: 1fr auto; min-height: 66px; }
  .topbar-meta { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-mark svg { width: 31px; }
  .page-shell { width: min(100% - 1rem, var(--content)); padding-top: 2.5rem; }
  .display-title { font-size: clamp(4rem, 20vw, 6rem); }
  .setup-panel { padding: 1rem; }
  .club-grid { grid-template-columns: repeat(3,1fr); max-height: 360px; }
  .button-row { grid-template-columns: 1fr; }
  .primary-button { grid-row: 1; }
  .career-shell { width: calc(100% - 1rem); padding-top: .8rem; }
  .player-main { grid-template-columns: 72px 1fr 58px; gap: .65rem; padding: 1rem .8rem .8rem; }
  .overall { height: 68px; padding-right: .5rem; }
  .overall strong { font-size: 3rem; }
  .player-name { font-size: 2rem; }
  .player-clubline { font-size: .64rem; }
  .metrics-row { grid-template-columns: repeat(4,1fr); }
  .metric { padding: .5rem .2rem; }
  .metric:nth-child(3) { border-top: 0; border-left: 1px solid var(--line); }
  .metric:nth-child(4) { border-top: 0; }
  .attribute-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .28rem; padding: .55rem .65rem; }
  .attribute-top { gap: .12rem; font-size: .58rem; }
  .attribute-top > span[data-short],
  .meta-card > span[data-short],
  .idol-label > span[data-short] { font-size: 0; }
  .attribute-top > span[data-short]::after { content: attr(data-short); font-size: .58rem; }
  .meta-card > span[data-short]::after,
  .idol-label > span[data-short]::after { content: attr(data-short); font-size: .5rem; }
  .career-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .meta-card { padding: .5rem .4rem; }
  .idol-card { grid-column: auto; padding: .5rem .4rem; border-top: 0; border-left: 1px solid var(--line); }
  .idol-label { display: grid; grid-template-columns: 1fr; gap: .05rem; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .choice-card { min-height: 118px; padding: .7rem; }
  .choice-card strong { font-size: 1rem; line-height: 1.05; }
  .choice-card span { font-size: .68rem; line-height: 1.3; }
  .choice-card small { margin-top: .45rem; font-size: .54rem; }
  .story-panel { padding: 1.2rem 1rem 1.2rem 1.25rem; }
  .story-title { font-size: clamp(1.85rem, 9vw, 2.2rem); }
  .story-body { margin: .7rem 0 .9rem; font-size: .82rem; }
  .minigame-panel { padding: .85rem .8rem .9rem 1rem; }
  .minigame-content { gap: .55rem; }
  .minigame-chrome { font-size: .48rem; }
  .minigame-chrome small { max-width: 44%; text-align: right; }
  .minigame-heading { gap: .55rem; }
  .minigame-heading h2 { font-size: clamp(1.65rem, 8vw, 2rem); }
  .minigame-heading > div:first-child > span { font-size: .61rem; }
  .minigame-attribute { min-width: 118px; padding: .4rem .48rem; }
  .minigame-attribute small { font-size: .43rem; }
  .minigame-attribute strong { font-size: .76rem; }
  .minigame-attribute b { font-size: 1.3rem; }
  .minigame-matchup { width: 100%; justify-content: center; gap: .35rem; }
  .minigame-matchup > span { min-width: 0; gap: .25rem; }
  .minigame-matchup strong { max-width: 105px; font-size: .72rem; }
  .minigame-matchup .crest { --crest-size: 27px !important; }
  .minigame-body { font-size: .72rem; line-height: 1.35; }
  .minigame-stage { --flight-y: -57px; --keeper-scale: .82; height: 94px; }
  .minigame-pitch-lines::before { height: 55px; }
  .minigame-goal { width: 58%; height: 43px; }
  .minigame-keeper { top: 29px; transform-origin: center bottom; }
  .minigame-player { bottom: 4px; width: 27px; height: 27px; }
  .minigame-ball { bottom: 31px; }
  .minigame-impact { top: 19px; }
  .minigame-choice-grid { gap: .3rem; }
  .minigame-choice { display: flex; min-height: 84px; padding: .45rem .3rem; flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
  .minigame-choice > span { width: 30px; height: 30px; flex: 0 0 auto; font-size: 1rem; }
  .minigame-choice strong { font-size: .76rem; }
  .minigame-choice small { display: -webkit-box; font-size: .5rem; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .minigame-instruction { font-size: .46rem; }
  .minigame-result { grid-template-columns: 36px minmax(0, 1fr) auto; gap: .4rem; padding: .45rem; }
  .minigame-result-mark { width: 34px; height: 34px; font-size: 1.4rem; }
  .minigame-result-copy h3 { font-size: 1.05rem; }
  .minigame-result-copy p { display: -webkit-box; overflow: hidden; font-size: .52rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .minigame-result-numbers { grid-row: 1; grid-column: 3; grid-template-columns: repeat(2, 48px); }
  .minigame-result-numbers span { min-width: 0; padding: .25rem .2rem; }
  .minigame-result .primary-button { grid-row: 2; grid-column: 1 / -1; width: 100%; min-height: 42px; }
  .report-masthead { align-items: flex-start; gap: .5rem; }
  .season-achievement { grid-template-columns: 1fr; gap: .7rem; padding: 1.2rem; text-align: center; }
  .achievement-mark { justify-self: center; }
  .achievement-copy strong { font-size: clamp(2rem, 11vw, 3rem); }
  .achievement-copy p { margin-right: auto; margin-left: auto; }
  .season-storylines li { grid-template-columns: 1.25rem 1fr; }
  .is-offseason .player-main { grid-template-columns: 62px minmax(0, 1fr) 48px; padding: .65rem .7rem; }
  .is-offseason .overall { height: 52px; }
  .is-offseason .overall strong { font-size: 2.35rem; }
  .is-offseason .player-name { font-size: 1.55rem; }
  .is-offseason .player-crest .crest { --crest-size: 38px !important; }
  .is-offseason .metrics-row { display: none; }
  .is-offseason .career-actions { margin: .12rem 0 .35rem; }
  .market-panel { padding: .72rem .65rem .72rem .78rem; }
  .market-content { gap: .45rem; }
  .market-masthead { grid-template-columns: 1fr auto; gap: .35rem; }
  .market-masthead > strong { grid-column: 1; }
  .market-player-identity { grid-row: 2; grid-column: 1 / -1; text-align: left; }
  .market-history-button { grid-row: 1; grid-column: 2; }
  .market-heading { gap: .42rem; }
  .market-heading .offseason-kicker { margin-bottom: .12rem; font-size: .5rem; }
  .market-heading .offseason-title { font-size: clamp(1.8rem, 8vw, 2.25rem); }
  .market-heading .report-summary { margin: .18rem 0 0; font-size: .65rem; line-height: 1.25; }
  .market-snapshot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .market-snapshot > span { display: grid; grid-template-columns: 1fr; gap: .02rem; padding: .32rem .3rem; text-align: center; }
  .market-snapshot > span:nth-child(n) { border-top: 0; border-left: 1px solid var(--line); }
  .market-snapshot > span:first-child { border-left: 0; }
  .market-snapshot small { font-size: .4rem; }
  .market-snapshot strong { font-size: .74rem; }
  .market-snapshot em { display: none; }
  .offer-market-grid { gap: .32rem; }
  .offer-contract { min-height: 136px; padding: .42rem .4rem .4rem; }
  .offer-clubline { grid-template-columns: 32px minmax(0, 1fr); gap: .34rem; }
  .offer-clubline .crest { --crest-size: 31px !important; }
  .offer-clubcopy { padding-right: 0; }
  .offer-clubcopy strong { display: -webkit-box; overflow: hidden; font-size: .74rem; line-height: .9; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .offer-clubcopy small { font-size: .42rem; }
  .offer-clubline > em { display: none; }
  .offer-contract.is-renewal .offer-clubcopy { padding-right: 2.35rem; }
  .offer-contract.is-renewal .offer-clubline > em { position: absolute; top: .48rem; right: .35rem; display: block; padding: .08rem .15rem; font-size: .33rem; }
  .offer-money { margin-top: .22rem; }
  .offer-money strong { font-size: 1.02rem; }
  .offer-money small { font-size: .42rem; }
  .offer-comparison { margin-top: .05rem; font-size: .4rem; }
  .offer-terms { gap: .03rem; margin-top: .14rem; }
  .offer-terms > span, .offer-terms b { font-size: .42rem; }
  .offer-arrival, .offer-standing { gap: .03rem; margin-top: .12rem; }
  .offer-arrival small, .offer-standing small { font-size: .4rem; }
  .offer-standing > span { height: 3px; }
  .offer-selected { right: .28rem; bottom: .28rem; width: 16px; height: 16px; font-size: .48rem; }
  .representative-button { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 44px; padding: .32rem .4rem; }
  .representative-button > span:first-child { width: 28px; height: 28px; }
  .representative-button strong { font-size: .51rem; }
  .representative-button small { font-size: .42rem; }
  .representative-button em { font-size: .4rem; }
  .market-confirm { gap: .45rem; padding: .35rem .4rem; }
  .market-confirm-club { gap: .35rem; min-width: 0; }
  .market-confirm-club .crest { --crest-size: 30px !important; }
  .market-confirm-club strong { font-size: .72rem; }
  .market-confirm-club small, .market-confirm-club em { font-size: .39rem; }
  .market-confirm .primary-button { min-height: 40px; max-width: 154px; padding: .42rem .5rem; font-size: .58rem; }
  .market-development { grid-template-columns: 1fr; gap: .35rem; padding: .46rem .5rem; }
  .market-development-copy { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
  .market-development-copy small { margin-top: 0; }
  .market-development-changes > span { padding-inline: .28rem; }
  .development-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .development-attribute, .development-attribute:nth-last-child(-n + 2) { grid-column: auto; }
  .development-attribute:last-child { grid-column: 1 / -1; }
  .site-footer { display: grid; }
  .history-item { grid-template-columns: auto 1fr; }
  .history-rating { grid-column: 2; }
  .retired-stats { grid-template-columns: repeat(2,1fr); }
  .retired-stats div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .retired-stats div:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 410px) {
  .brand-copy strong { font-size: 1.05rem; }
  .brand-copy small { font-size: .62rem; }
  .ghost-button { padding: .5rem .55rem; font-size: .66rem; }
  .form-grid { grid-template-columns: 1fr 88px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat + .hero-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .segmented { overflow-x: auto; grid-auto-columns: minmax(68px,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  ::view-transition-old(game-stage),
  ::view-transition-new(game-stage) { animation: none !important; }
}

/* Career room redesign — an original compact interface informed by sports-career dashboards. */
:root {
  --bg: #07080b;
  --bg-deep: #040507;
  --surface: #101116;
  --surface-raised: #17191f;
  --surface-soft: #1d2027;
  --line: rgba(241, 245, 249, .075);
  --line-strong: rgba(241, 245, 249, .15);
  --ink: #f8f8f6;
  --muted: #8e929e;
  --muted-2: #555b67;
  --ice: #a7c7e8;
  --success: #3be0a5;
  --danger: #ff5f82;
  --gold: #f5ba3d;
  --career-orange: #e8790c;
  --content: 1240px;
}

body {
  background:
    radial-gradient(circle at 10% -10%, rgba(126, 160, 198, .08), transparent 28rem),
    linear-gradient(180deg, #08090c, #050609 70%);
}

body::before {
  opacity: .08;
  background-size: 64px 64px;
  animation-duration: 28s;
}

.topbar {
  min-height: 54px;
  padding-inline: max(.75rem, calc((100vw - var(--content)) / 2));
  background: rgba(6, 7, 10, .94);
  backdrop-filter: blur(12px);
}

.brand-mark { width: 38px; height: 38px; margin-right: .55rem; }
.brand-mark svg { width: 30px; height: 30px; }
.brand-copy strong { font-size: 1.05rem; }
.brand-copy small { margin-top: .14rem; font-size: .59rem; }
.topbar-meta { font-size: .59rem; }
.ghost-button { padding: .48rem .72rem; border-radius: 999px; font-size: .64rem; }
#app { min-height: calc(100vh - 96px); }

.panel,
.story-panel,
.player-card,
.history-panel {
  border-radius: 14px;
  box-shadow: none;
}

.primary-button,
.secondary-button {
  min-height: 44px;
  padding: .7rem 1rem;
  border-radius: 999px;
  font-family: var(--body);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.primary-button {
  color: #090a0d;
  background: #f5f5f3;
  box-shadow: none;
}
.primary-button::after { display: none; }
.primary-button:hover { color: #050608; background: #fff; box-shadow: 0 8px 24px rgba(255,255,255,.08); }
.secondary-button { color: var(--ink); border-color: rgba(255,255,255,.7); }
.secondary-button:hover { color: #fff; border-color: #fff; }

/* Identity setup */
.setup-page {
  width: min(var(--content), calc(100% - 1.25rem));
  padding: .65rem 0 1rem;
}

.identity-board {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(14, 15, 20, .96);
  box-shadow: 0 30px 80px rgba(0,0,0,.24);
}

.identity-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 60px;
  padding: .7rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.identity-board-head .eyebrow { margin: 0 0 .12rem; font-size: .55rem; }
.identity-board-head h1 { margin: 0; font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1; }
.identity-board-head > p { max-width: 500px; margin: 0; color: var(--muted); font-size: .7rem; text-align: right; }

.identity-grid {
  display: grid;
  grid-template-columns: minmax(210px, .68fr) minmax(390px, 1.32fr) minmax(240px, .8fr);
  min-height: 350px;
}

.identity-pane { min-width: 0; padding: .85rem 1rem; }
.identity-pane + .identity-pane { border-left: 1px solid var(--line); }
.identity-pane h2 { margin: 0; font-size: .9rem; line-height: 1; }
.identity-pane-title { display: flex; align-items: baseline; justify-content: space-between; gap: .65rem; margin-bottom: .65rem; }
.identity-pane-title span { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }

.identity-profile { display: grid; grid-template-rows: auto 1fr auto auto; gap: .55rem; }
.identity-profile > h2 { text-align: center; }
.kit-preview {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  width: min(178px, 82%);
  height: 205px;
  margin: 0 auto;
  color: #ffe073;
  background:
    linear-gradient(112deg, transparent 0 22%, rgba(255,255,255,.08) 22% 25%, transparent 25% 72%, rgba(0,0,0,.13) 72% 76%, transparent 76%),
    linear-gradient(145deg, #c9272f, #a91220 65%);
  clip-path: polygon(26% 0, 39% 7%, 61% 7%, 74% 0, 100% 18%, 90% 43%, 78% 37%, 74% 100%, 26% 100%, 22% 37%, 10% 43%, 0 18%);
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.32));
}
.kit-preview::before { position: absolute; inset: 5px 0 auto; height: 14px; content: ''; border-top: 6px solid #162f6d; }
.kit-preview span { max-width: 72%; overflow: hidden; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.kit-preview strong { font-family: var(--display); font-size: 3.7rem; line-height: .88; }
.kit-preview small { margin-top: .3rem; color: rgba(255,255,255,.52); font-size: .42rem; font-weight: 900; letter-spacing: .15em; }

.identity-fields { grid-template-columns: minmax(0, 1fr) 74px; gap: .5rem; }
.identity-fields .text-input { min-height: 40px; padding: .55rem .65rem; border-radius: 10px; background: #18191e; font-size: .7rem; }
.identity-fields .field-label > span { font-size: .5rem; }
.identity-origin { display: flex; align-items: center; justify-content: space-between; padding: .48rem .58rem; border: 1px solid var(--line); border-radius: 10px; background: #17181d; }
.identity-origin span { color: var(--muted); font-size: .52rem; font-weight: 800; text-transform: uppercase; }
.identity-origin strong { font-size: .65rem; }

.setup-selector-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(120px, .8fr); gap: .5rem; margin-bottom: .6rem; }
.setup-selector-row > div > span { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .5rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.setup-selector-row .segmented { overflow: hidden; border-radius: 9px; }
.setup-selector-row .segment-button { min-height: 34px; padding: .35rem .4rem; font-size: .56rem; text-transform: none; }

.identity-club .club-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  max-height: 255px;
  padding-right: .2rem;
}
.identity-club .club-button {
  grid-template-rows: 36px auto;
  min-height: 68px;
  padding: .3rem .24rem;
  border-radius: 9px;
  background: #17181d;
}
.identity-club .club-button span:last-child { font-size: .51rem; }
.identity-club .club-button.is-active { border-color: #f3f4f6; background: #21232a; box-shadow: inset 0 0 0 1px #f3f4f6; }

.identity-position { display: grid; grid-template-rows: auto 1fr auto; }
.setup-pitch {
  position: relative;
  width: min(100%, 225px);
  height: 270px;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid #a8efd8;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,.025) 50%, transparent 50%),
    linear-gradient(90deg, rgba(0,0,0,.08) 50%, transparent 50%),
    #064838;
  background-size: 100% 25%, 50% 100%, auto;
}
.setup-pitch::before { position: absolute; inset: 50% 0 auto; height: 1px; content: ''; background: #b8f3df; }
.setup-pitch::after { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border: 1px solid #b8f3df; border-radius: 50%; content: ''; transform: translate(-50%,-50%); }
.pitch-box { position: absolute; left: 24%; right: 24%; top: -1px; height: 48px; border: 1px solid #b8f3df; }
.pitch-box::after { position: absolute; left: 50%; top: 100%; width: 88px; height: 35px; border: 1px solid #b8f3df; border-top: 0; border-radius: 0 0 50% 50%; content: ''; transform: translateX(-50%); }
.role-node {
  position: absolute;
  z-index: 2;
  left: 50%;
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 46px;
  padding: .35rem .65rem;
  border: 1px solid rgba(168,239,216,.4);
  border-radius: 999px;
  background: #00392e;
  color: #b8f3df;
  cursor: pointer;
  transform: translateX(-50%);
}
.role-node.is-striker { top: 18%; }
.role-node.is-playmaker { top: 40%; }
.role-node strong { font-size: .76rem; }
.role-node small { color: rgba(184,243,223,.6); font-size: .48rem; }
.role-node.is-active { color: #05120e; border-color: #fff; background: #b8f3df; box-shadow: 0 0 0 4px rgba(184,243,223,.12), 0 0 28px rgba(59,224,165,.18); }
.role-node.is-active small { color: #31584c; }
.position-note { margin: .45rem 0 0; color: var(--muted); font-size: .58rem; text-align: center; }

.identity-actions {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, .7fr) auto auto;
  gap: .65rem;
  align-items: center;
  min-height: 62px;
  padding: .55rem .9rem;
  border-top: 1px solid var(--line);
}
.identity-actions .selected-club { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
.identity-actions .selected-club small,
.identity-actions .selected-club strong,
.identity-actions .selected-club span { display: block; }
.identity-actions .selected-club small { color: var(--muted-2); font-size: .45rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.identity-actions .selected-club strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.identity-actions .selected-club span { overflow: hidden; color: var(--muted); font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.identity-actions .form-error { min-height: 0; margin: 0; font-size: .62rem; }

/* Persistent career board */
.career-shell {
  width: min(var(--content), calc(100% - 1.25rem));
  margin: 0 auto;
  padding: .55rem 0 1.25rem;
}

.career-board {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr);
  gap: .5rem;
  height: calc(100vh - 78px);
  min-height: 480px;
  max-height: 680px;
}

.career-primary {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .5rem;
  min-width: 0;
  min-height: 0;
}

.career-primary > .story-panel,
.career-primary > .retired-card { min-height: 0; overflow: auto; scrollbar-color: var(--line-strong) transparent; }

.career-primary .player-card {
  --rating: var(--career-orange);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'player' 'metrics' 'attributes';
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-left: 0;
  background:
    radial-gradient(circle at 76% 50%, color-mix(in srgb, var(--rating) 13%, transparent), transparent 45%),
    #11131a;
}
.career-primary .player-card.is-rising { --rating: #7893b7; }
.career-primary .player-card.is-established { --rating: #59b7e8; }
.career-primary .player-card.is-elite { --rating: #8fd8ff; }
.career-primary .player-card::after { right: -8%; top: -130%; opacity: .45; }
.career-primary .player-main { grid-template-columns: 72px minmax(0, 1fr) auto; gap: .65rem; min-height: 78px; padding: .48rem .65rem; }
.career-primary .overall {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  height: 64px;
  padding: .4rem;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rating) 86%, #fff 4%), color-mix(in srgb, var(--rating) 72%, #111 28%));
}
.career-primary .overall span { order: 0; margin: 0; color: rgba(255,255,255,.7); font-size: .47rem; }
.career-primary .overall strong { order: 1; align-self: center; font-size: 2.65rem; }
.player-identity-copy { min-width: 0; }
.player-tags { display: flex; gap: .32rem; margin-bottom: .22rem; }
.player-tags span { padding: .12rem .35rem; border-radius: 999px; color: #fff; background: #20242e; font-size: .48rem; font-weight: 900; }
.player-tags span:last-child { background: #9d2747; }
.career-primary .player-name { font-family: var(--body); font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-style: normal; line-height: 1; text-transform: none; }
.career-primary .player-clubline { display: flex; align-items: center; gap: .34rem; min-width: 0; margin: .28rem 0 0; text-transform: none; }
.career-primary .player-clubline strong { overflow: hidden; color: var(--ink); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.career-primary .player-clubline > span:last-child { overflow: hidden; color: var(--muted-2); font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.player-vitals { display: grid; grid-template-columns: auto auto; gap: .65rem; align-items: center; }
.player-vitals > span { display: grid; justify-items: end; }
.player-vitals small { color: var(--muted-2); font-size: .43rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.player-vitals strong { font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1; white-space: nowrap; }
.career-primary .metrics-row { grid-area: metrics; border: 0; border-top: 1px solid var(--line); }
.career-primary .metric { min-height: 38px; padding: .28rem; }
.career-primary .metric strong { font-family: var(--body); font-size: .92rem; }
.career-primary .metric:first-child strong { color: var(--ink); }
.career-primary .metric span { font-size: .43rem; }
.career-primary .attribute-row { grid-area: attributes; gap: .35rem; padding: .35rem .55rem .4rem; }
.career-primary .attribute-top { font-size: .43rem; }
.career-primary .attribute-top strong { font-size: .7rem; }
.career-primary .attribute-bar { height: 2px; }
.career-primary .career-meta { display: none; }

.career-primary .story-panel {
  padding: .85rem .95rem;
  border-color: var(--line-strong);
  background: #101116;
}
.career-primary .story-panel::before { display: none; }
.career-primary .story-panel::after { opacity: .018; }
.career-primary .story-kicker { margin-bottom: .28rem; color: var(--muted); font-size: .52rem; }
.career-primary .story-title { max-width: none; font-family: var(--body); font-size: clamp(1.55rem, 3.6vw, 2.3rem); font-style: normal; line-height: 1.02; text-transform: none; }
.career-primary .story-body { margin: .55rem 0 .7rem; color: #a8abb4; font-size: .7rem; line-height: 1.4; }
.career-primary .choice-grid { gap: .5rem; }
.career-primary .choice-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 150px;
  padding: .75rem;
  border-color: var(--line-strong);
  border-radius: 14px;
  background: #13151a;
}
.career-primary .choice-card:hover { border-color: rgba(255,255,255,.48); background: #181a20; }
.career-primary .choice-card strong { font-family: var(--body); font-size: .86rem; text-transform: none; }
.career-primary .choice-card > span:not(.decision-impact) { margin-top: .28rem; font-size: .62rem; line-height: 1.35; }
.career-primary .choice-card > small { margin-top: .5rem; color: #fff; font-size: .5rem; }
.decision-impact { display: flex; flex-wrap: wrap; gap: .24rem; align-content: end; margin-top: .55rem; }
.impact-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .38rem; border-radius: 999px; font-size: .48rem; font-weight: 800; line-height: 1.15; }
.impact-chip b { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: .5rem; }
.impact-chip.is-favorable { color: #42e5ae; background: rgba(18, 107, 79, .32); }
.impact-chip.is-favorable b { background: rgba(59,224,165,.16); }
.impact-chip.is-adverse { color: #ff6688; background: rgba(112, 22, 52, .34); }
.impact-chip.is-adverse b { background: rgba(255,95,130,.14); }

/* Timeline */
.career-timeline {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #0e0f13;
}
.timeline-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 50px; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.timeline-titlebar > div > span { color: var(--muted-2); font-size: .45rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.timeline-titlebar h2 { margin: .05rem 0 0; font-size: .95rem; line-height: 1; }
.timeline-titlebar .text-button { padding: .25rem .45rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .48rem; }
.timeline-columns,
.timeline-row {
  display: grid;
  grid-template-columns: 38px minmax(150px, 1fr) 40px 34px 34px 34px;
  gap: .28rem;
  align-items: center;
}
.timeline-columns { min-height: 18px; padding: 0 .48rem; color: var(--muted-2); font-size: .42rem; font-weight: 900; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.timeline-columns span:nth-child(2) { text-align: left; }
.timeline-list { display: grid; min-height: 0; margin: 0; padding: 0 .34rem .2rem; flex: 1; grid-template-rows: repeat(23, minmax(17px, 1fr)); list-style: none; }
.timeline-row { min-height: 17px; padding: 0 .14rem; border-radius: 6px; color: #f1f2f4; font-size: .55rem; line-height: 1; text-align: center; }
.timeline-row:nth-child(odd) { background: rgba(255,255,255,.022); }
.timeline-row.is-played { background: #17191f; }
.timeline-row.is-current { background: rgba(46, 116, 164, .16); box-shadow: inset 2px 0 0 #77c7f1; }
.timeline-row.is-current[aria-current='step'] { position: relative; }
.timeline-row.is-future { color: #343842; background: transparent; }
.timeline-age { display: grid; place-items: center; width: 27px; height: 15px; border-radius: 5px; color: #101116; background: #eceeed; font-size: .55rem; font-weight: 900; }
.timeline-row.is-played .timeline-age { color: #fff; background: #3b83ba; }
.timeline-row.is-current .timeline-age { background: #c9efff; color: #071116; }
.timeline-row.is-future .timeline-age { color: #4e535e; background: #17191d; }
.timeline-club { display: flex; align-items: center; gap: .32rem; min-width: 0; text-align: left; }
.timeline-club .crest { --crest-size: 15px !important; }
.timeline-club > i { width: 15px; height: 1px; flex: 0 0 auto; background: #292c33; }
.timeline-club > span { display: flex; align-items: baseline; min-width: 0; gap: .3rem; }
.timeline-club strong { overflow: hidden; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.timeline-club small { overflow: hidden; color: #7bcdf6; font-size: .42rem; text-overflow: ellipsis; white-space: nowrap; }
.timeline-club em { margin-left: auto; font-size: .55rem; font-style: normal; }
.timeline-overall { justify-self: center; min-width: 28px; padding: .12rem .24rem; border-radius: 5px; color: #fff; background: #555d6b; font-weight: 900; }
.timeline-overall.is-rookie { background: #c96708; }
.timeline-overall.is-rising { background: #617d9f; }
.timeline-overall.is-established { color: #061219; background: #66bee9; box-shadow: 0 0 14px rgba(102,190,233,.18); }
.timeline-overall.is-elite { color: #061219; background: #a5e3ff; box-shadow: 0 0 16px rgba(143,216,255,.28); }
.timeline-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .7rem; align-items: center; min-height: 32px; padding: .35rem .55rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .5rem; }
.timeline-totals > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-totals strong { color: var(--ink); }

/* Compact reports, minigames and retirement inside the board */
.career-primary .report-title { margin: .5rem 0 .18rem; font-family: var(--body); font-size: 2rem; font-style: normal; line-height: 1; text-transform: none; }
.career-primary .report-summary { margin-bottom: .5rem; font-size: .65rem; line-height: 1.3; }
.career-primary .season-achievement { grid-template-columns: 66px 1fr; gap: .65rem; min-height: 78px; margin: .45rem 0; padding: .55rem .65rem; border-radius: 12px; }
.career-primary .achievement-mark { min-width: 58px; min-height: 58px; }
.career-primary .achievement-mark .crest { --crest-size: 52px !important; }
.career-primary .achievement-mark > span:last-child { width: 24px; height: 24px; font-size: .7rem; }
.career-primary .achievement-copy small { font-size: .45rem; }
.career-primary .achievement-copy strong { margin: .12rem 0; font-family: var(--body); font-size: 1rem; font-style: normal; }
.career-primary .achievement-copy p { margin-top: .18rem; font-size: .55rem; line-height: 1.25; }
.career-primary .rating-card { margin: .4rem 0; padding: .35rem .55rem; border-radius: 9px; }
.career-primary .rating-card span { font-size: .48rem; }
.career-primary .rating-card strong { font-family: var(--body); font-size: 1.35rem; }
.career-primary .season-storylines { gap: .16rem; }
.career-primary .season-storylines li { grid-template-columns: 1rem 1fr; gap: .28rem; padding: .12rem 0 .12rem .45rem; font-size: .55rem; line-height: 1.25; }
.career-primary .report-continue { min-height: 40px; margin-top: .55rem; }
.career-primary .minigame-content { gap: .45rem; }
.career-primary .minigame-heading h2 { font-family: var(--body); font-size: 1.7rem; font-style: normal; text-transform: none; }
.career-primary .minigame-body { font-size: .62rem; }
.career-primary .minigame-stage { height: 90px; border-radius: 10px; }
.career-primary .minigame-choice { min-height: 72px; border-radius: 10px; }
.career-primary .minigame-result { grid-template-columns: 38px minmax(0, 1fr); border-radius: 10px; }
.career-primary .minigame-result-numbers { grid-column: 1 / -1; }
.career-primary .minigame-result .primary-button { grid-column: 1 / -1; width: 100%; }

.career-board.is-retired .retired-card { display: grid; align-content: start; padding: .85rem; text-align: left; }
.retired-heading h2 { margin: .1rem 0 .35rem; font-size: 1.45rem; }
.retired-heading > p:last-child { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.35; }
.career-board.is-retired .retired-stats { margin: .7rem 0; border-radius: 10px; }
.career-board.is-retired .retired-stats div { padding: .45rem .25rem; text-align: center; }
.career-board.is-retired .retired-stats strong { font-family: var(--body); font-size: 1rem; }
.career-board.is-retired .retired-stats span { font-size: .45rem; }
.retired-cabinet { padding: .6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.retired-cabinet > strong { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .5rem; letter-spacing: .09em; text-transform: uppercase; }
.retired-cabinet > div { display: flex; gap: .45rem; min-height: 29px; align-items: center; color: var(--gold); }
.retired-cabinet span { font-size: 1.2rem; }
.retired-cabinet small { color: var(--muted-2); font-size: .55rem; }
.retired-visual { display: grid; grid-template-columns: 86px 1fr; gap: .7rem; align-items: center; min-height: 95px; margin-top: .65rem; padding: .7rem; border-radius: 12px; background: linear-gradient(135deg, #1a1b21, #0e0f12); }
.retired-visual > span { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: rgba(255,255,255,.16); font-size: 2rem; font-weight: 900; }
.retired-visual strong,
.retired-visual small { display: block; }
.retired-visual strong { font-size: .78rem; }
.retired-visual small { margin-top: .2rem; color: var(--muted); font-size: .55rem; }
.retired-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .65rem; }

/* Keep the summer market full-width, but bring it into the same visual system. */
.is-offseason .market-panel { border-radius: 14px; background: #0e0f13; }
.is-offseason .market-panel::before { display: none; }
.is-offseason .market-panel::after { opacity: .018; }
.is-offseason .offseason-title { font-family: var(--body); font-style: normal; text-transform: none; }
.is-offseason .offer-contract,
.is-offseason .representative-button,
.is-offseason .market-confirm,
.is-offseason .market-snapshot,
.is-offseason .market-development { border-radius: 10px; }
.is-offseason .offer-contract { background-color: #14161b; }
.is-offseason .offer-contract.is-active { border-color: #fff; background-color: #1a1d22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.36); }

.site-footer { padding: .65rem 0 1rem; font-size: .55rem; }

@media (min-width: 901px) and (max-height: 760px) {
  .setup-page { padding-top: .45rem; }
  .identity-board-head { min-height: 52px; padding-block: .5rem; }
  .identity-grid { min-height: 330px; }
  .kit-preview { height: 185px; }
  .setup-pitch { height: 245px; }
  .identity-club .club-grid { max-height: 225px; }
  .identity-actions { min-height: 56px; padding-block: .4rem; }
  .career-primary .player-main { min-height: 70px; }
  .career-primary .overall { height: 58px; }
  .career-primary .metrics-row { min-height: 34px; }
  .career-primary .attribute-row { padding-block: .25rem; }
  .career-primary .choice-card { min-height: 132px; }
  .career-primary .season-achievement { min-height: 70px; }
}

@media (max-width: 900px) {
  .identity-grid { grid-template-columns: 1fr 1.35fr; }
  .identity-position { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0 !important; }
  .identity-position .setup-pitch { width: min(100%, 520px); height: 210px; }
  .role-node.is-striker { left: 38%; top: 20%; }
  .role-node.is-playmaker { left: 62%; top: 42%; }
  .career-board { grid-template-columns: 1fr; height: auto; min-height: 0; max-height: none; }
  .career-primary { display: grid; }
  .career-primary > .story-panel,
  .career-primary > .retired-card { overflow: visible; }
  .career-timeline { min-height: 0; }
  .timeline-list { display: grid; grid-template-rows: none; }
  .timeline-row { min-height: 28px; }
  .timeline-row.is-future:not(.is-near-future) { display: none; }
}

@media (max-width: 680px) {
  .topbar { min-height: 56px; }
  .setup-page { width: calc(100% - .7rem); padding-top: .35rem; }
  .identity-board { border-radius: 12px; }
  .identity-board-head { display: block; padding: .75rem; }
  .identity-board-head > p { margin-top: .3rem; text-align: left; }
  .identity-grid { display: grid; grid-template-columns: 1fr; }
  .identity-pane + .identity-pane { border-top: 1px solid var(--line); border-left: 0; }
  .identity-profile { grid-template-columns: 130px 1fr; grid-template-rows: auto auto auto; align-items: center; }
  .identity-profile > h2 { grid-column: 1 / -1; text-align: left; }
  .kit-preview { grid-row: 2 / 4; width: 118px; height: 142px; }
  .kit-preview strong { font-size: 2.6rem; }
  .identity-origin { grid-column: 2; }
  .identity-club { grid-row: 3; }
  .identity-club .club-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 265px; }
  .identity-position { grid-row: 2; }
  .identity-position .setup-pitch { height: 188px; }
  .setup-selector-row { grid-template-columns: 1fr; }
  .identity-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .identity-actions .selected-club { grid-column: 1 / -1; }
  .identity-actions .form-error { grid-column: 1 / -1; }
  .identity-actions .secondary-button,
  .identity-actions .primary-button { min-width: 0; padding-inline: .65rem; }

  .career-shell { width: calc(100% - .7rem); padding-top: .35rem; }
  .career-primary .player-main { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .career-primary .overall { width: 56px; height: 56px; }
  .career-primary .overall strong { font-size: 2.25rem; }
  .career-primary .player-name { font-size: 1.14rem; }
  .player-vitals { grid-template-columns: 1fr; gap: .25rem; }
  .player-vitals > span:first-child { display: none; }
  .player-vitals strong { font-size: .88rem; }
  .career-primary .player-clubline > span:last-child { display: none; }
  .career-primary .metric { min-height: 34px; }
  .career-primary .attribute-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .career-primary .choice-grid { grid-template-columns: 1fr 1fr; }
  .career-primary .choice-card { min-height: 164px; padding: .65rem; }
  .decision-impact { align-content: start; }
  .impact-chip { font-size: .44rem; }
  .timeline-columns,
  .timeline-row { grid-template-columns: 34px minmax(105px, 1fr) 36px 28px 28px 28px; gap: .18rem; }
  .timeline-row { padding-inline: .12rem; }
  .timeline-club small { display: none; }
  .timeline-totals { gap: .35rem; }
  .career-primary .season-achievement { grid-template-columns: 58px 1fr; text-align: left; }
  .career-primary .achievement-mark { justify-self: auto; }
  .career-primary .minigame-result { grid-template-columns: 34px minmax(0,1fr); }
  .career-board.is-retired .retired-stats { grid-template-columns: repeat(4, 1fr); }
  .career-board.is-retired .retired-stats div:nth-child(n) { border-top: 0; }
  .career-board.is-retired .retired-stats div + div { border-left: 1px solid var(--line); }
}

@media (max-width: 410px) {
  .identity-board-head > p { font-size: .62rem; }
  .identity-profile { grid-template-columns: 112px 1fr; }
  .kit-preview { width: 104px; height: 132px; }
  .identity-club .club-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .identity-actions { gap: .4rem; padding: .5rem; }
  .career-primary .choice-card { min-height: 176px; }
  .career-primary .choice-card strong { font-size: .74rem; }
  .career-primary .choice-card > span:not(.decision-impact) { font-size: .56rem; }
  .timeline-columns,
  .timeline-row { grid-template-columns: 31px minmax(88px, 1fr) 32px 25px 25px 25px; }
  .timeline-club strong { font-size: .5rem; }
}

/* Final density and interaction corrections after real-browser visual QA. */
.choice-card .decision-impact {
  display: flex;
  flex-wrap: wrap;
  gap: .24rem;
  align-content: end;
  margin-top: .55rem;
}
.choice-card .impact-chip {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  color: inherit;
}
.choice-card .impact-chip.is-favorable { color: #42e5ae; }
.choice-card .impact-chip.is-adverse { color: #ff6688; }

.career-shell.is-report .career-primary .attribute-row,
.career-board.is-retired .player-card .metrics-row,
.career-board.is-retired .player-card .attribute-row { display: none; }

.career-primary .report-masthead { padding-bottom: .35rem; font-size: .52rem; }
.career-primary .report-title { margin-top: .35rem; font-size: 1.72rem; }
.career-primary .season-achievement { min-height: 66px; padding-block: .42rem; }
.career-primary .achievement-mark { min-height: 50px; }
.career-primary .achievement-mark .crest { --crest-size: 46px !important; }

.career-board.is-retired .retired-cabinet { padding: .38rem .55rem; }
.career-board.is-retired .retired-cabinet > strong { margin-bottom: .18rem; }
.career-board.is-retired .retired-cabinet > div { min-height: 20px; }
.career-board.is-retired .retired-visual { grid-template-columns: 66px 1fr; min-height: 74px; padding: .48rem .6rem; }
.career-board.is-retired .retired-visual > span { width: 60px; height: 60px; font-size: 1.55rem; }
.career-board.is-retired .retired-actions { margin-top: .45rem; }

@media (max-width: 680px) {
  .identity-fields .text-input,
  .setup-selector-row .segment-button,
  .topbar .ghost-button,
  .timeline-titlebar .text-button { min-height: 44px; }

  .identity-actions .selected-club { grid-row: 1; }
  .identity-actions .form-error { grid-row: 2; }
  .identity-actions .secondary-button { grid-row: 3; grid-column: 1; }
  .identity-actions .primary-button { grid-row: 3; grid-column: 2; }
  .retired-actions .secondary-button,
  .retired-actions .primary-button { grid-row: auto; }

  .career-primary > .story-panel { overflow: hidden; }
  .career-primary .primary-button,
  .market-panel .text-button,
  .market-panel .primary-button,
  .market-panel .market-history-button { min-height: 44px; }
}