* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  --ui-font: ui-serif, Georgia, Cambria, "Times New Roman", Times, "Noto Serif SC", serif;
  --icon-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-family: var(--ui-font);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  --page: #071019;
  --shell: rgba(8, 16, 25, .92);
  --surface: rgba(12, 22, 33, .92);
  --surface-strong: #0d1824;
  --surface-soft: rgba(25, 38, 52, .78);
  --ink: #f3f8fc;
  --muted: #93a5b5;
  --accent: #91f45d;
  --accent-ink: #09130c;
  --line: rgba(197, 220, 237, .14);
  --danger: #ff7a72;
  --warning: #ffd95c;
  --shadow: 0 1.4rem 4rem rgba(0, 0, 0, .28);
  background: var(--page);
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #e9e6dc;
  --shell: rgba(245, 243, 236, .94);
  --surface: rgba(252, 251, 247, .95);
  --surface-strong: #fbfaf6;
  --surface-soft: rgba(231, 229, 220, .86);
  --ink: #1b2b21;
  --muted: #6b756e;
  --accent: #527c62;
  --accent-ink: #fff;
  --line: rgba(28, 47, 36, .14);
  --danger: #ad403c;
  --warning: #8a6a12;
  --shadow: 0 1.4rem 4rem rgba(43, 54, 46, .15);
}

html { min-width: 320px; min-height: 100%; background: var(--page); scroll-behavior: auto; overflow-anchor: none; }
body { min-height: 100dvh; margin: 0; color: var(--ink); background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 28%), radial-gradient(circle at 100% 100%, rgba(78, 122, 255, .1), transparent 32%), var(--page); line-height: 1.5; }
#app { overflow-anchor: none; }
button, textarea, input, select { min-width: 0; font: inherit; }
button { max-width: 100%; color: inherit; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, white); outline-offset: 3px; }
button:active { transform: scale(.975); transition: transform 90ms ease-out; }
h1, h2, h3, p { overflow-wrap: break-word; word-break: normal; }
h1, h2, h3 { letter-spacing: -.035em; }
h1, h2, h3 { text-wrap: balance; }

.game-shell {
  width: min(96rem, calc(100% - 2rem));
  min-height: calc(100dvh - 2rem);
  margin: 1rem auto;
  padding: .85rem;
  display: grid;
  grid-template-columns: 13.2rem minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 2.15rem;
  background: var(--shell);
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .08);
}

.surface-card {
  border: 1px solid var(--line);
  border-radius: 1.55rem;
  background: var(--surface);
  box-shadow: 0 .65rem 1.8rem rgba(0, 0, 0, .07), inset 0 1px rgba(255, 255, 255, .07);
}

.app-header {
  grid-column: 1 / -1;
  min-height: 4.8rem;
  margin-bottom: .8rem;
  padding: .8rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(26px) saturate(160%);
}

.brand { min-width: 0; display: flex; align-items: center; gap: .75rem; }
.brand b { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: .9rem; color: var(--accent-ink); background: var(--accent); font-family: var(--icon-font); font-size: .86rem; font-weight: 900; box-shadow: 0 .65rem 1.5rem color-mix(in srgb, var(--accent) 23%, transparent); }
.brand span { color: var(--muted); font-size: .75rem; }
.app-title { display: flex; flex-direction: column; text-align: center; }
.app-title small, .world-date span { color: color-mix(in srgb, var(--muted) 45%, var(--ink)); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; }
.app-title strong { margin-top: .15rem; font-size: 1.05rem; }
.world-date { min-width: 0; justify-self: end; display: flex; flex-direction: column; text-align: right; }
.world-date b { max-width: 18rem; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--ink); font-weight: 850; }
.theme-toggle { min-width: 6.5rem; min-height: 2.9rem; padding: 0 .9rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface-soft); cursor: pointer; }
.theme-toggle i { font-family: var(--icon-font); font-style: normal; }
.theme-toggle span { font-size: .75rem; font-weight: 800; }

.main-nav {
  width: calc(100% - .7rem);
  padding: .7rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-radius: 1.6rem;
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}
.main-nav button { min-height: 3.3rem; padding: .65rem .8rem; display: flex; align-items: center; gap: .75rem; border: 0; border-radius: 1rem; color: var(--muted); background: transparent; cursor: pointer; text-align: left; }
.main-nav button i { width: 1.25rem; font-family: var(--icon-font); font-style: normal; text-align: center; }
.main-nav button span { font-size: .84rem; font-weight: 750; }
.main-nav button:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 65%, transparent); }
.main-nav button.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, var(--surface-soft)); }
.nav-spacer { flex: 1; min-height: 5rem; }
.main-nav .utility-button { min-height: 2.7rem; font-size: .74rem; }
.main-nav .danger:hover { color: var(--danger); }

.app-content { min-width: 0; min-height: 42rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.65rem; background: color-mix(in srgb, var(--surface) 68%, transparent); }
.view { min-height: 100%; padding: 2rem; animation: view-enter 320ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes view-enter { from { opacity: .65; transform: scale(.993) translateY(.3rem); } to { opacity: 1; transform: none; } }

.eyebrow { margin: 0; color: var(--accent); font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.primary-action, .secondary-action { min-width: 0; min-height: 3rem; height: auto; padding: .7rem 1.15rem; border: 0; border-radius: 999px; cursor: pointer; font-weight: 850; line-height: 1.3; text-align: center; }
.primary-action { color: var(--accent-ink); background: var(--accent); }
.secondary-action { color: var(--ink); background: var(--surface-soft); }
.immersive { min-height: 3.45rem; font-size: .95rem; }
.horizontal-scroll { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.horizontal-scroll::-webkit-scrollbar { display: none; }

/* Overview */
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(19rem, .88fr); grid-template-areas: "hero player" "match metrics" "match feed"; gap: 1rem; align-items: stretch; }
.career-hero { grid-area: hero; min-height: 20rem; padding: clamp(1.6rem, 3.5vw, 2.7rem); display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 37%), linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--surface-soft)), var(--surface)); }
.career-hero h1 { max-width: 42rem; margin: .5rem 0 .9rem; font-size: clamp(2.9rem, 5vw, 5.4rem); line-height: .93; letter-spacing: -.055em; }
.career-hero > p:not(.eyebrow) { max-width: 40rem; margin: 0 0 1.25rem; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.career-hero .primary-action { align-self: flex-start; }
.overview-player { grid-area: player; }
.player-card { min-height: 100%; padding: 1.25rem; display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 1rem; }
.player-assets { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.crest { width: 3.9rem; height: 4.5rem; display: block; object-fit: contain; border-radius: .85rem; filter: drop-shadow(0 .35rem .7rem rgba(0, 0, 0, .22)); background: var(--surface-soft); }
.entity-badge { width: 2.2rem; height: 2.2rem; display: inline-block; flex: 0 0 auto; object-fit: contain; vertical-align: middle; border-radius: .45rem; background: var(--surface-soft); }
.kit-badge { width: 2rem; height: 2.3rem; object-fit: contain; }
.mini-badge { width: 1.65rem; height: 1.65rem; display: inline-block; margin-right: .4rem; object-fit: contain; vertical-align: middle; border-radius: .35rem; background: var(--surface-soft); }
.nation-flags { display: inline-flex; align-items: center; gap: .2rem; margin-right: .3rem; vertical-align: middle; }
.nation-flags img, .nation-flag-emoji { width: 1.35rem; height: .95rem; display: inline-grid; place-items: center; object-fit: cover; overflow: hidden; border-radius: .16rem; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.nation-flag-emoji { overflow: visible; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 1.24rem; line-height: 1; box-shadow: none; }
.nation-flag-fallback { font-size: .68rem; width: auto; max-width: 4.4rem; color: var(--ink); }
.identity-nation { display: inline-flex; align-items: center; }
.award-badge { width: 3.35rem; height: 3.8rem; flex: 0 0 auto; object-fit: contain; }
.competition-badge { width: 2.55rem; height: 2.55rem; flex: 0 0 auto; object-fit: contain; border-radius: 50%; }
.competition-badge-inline { width: 1.1rem; height: 1.1rem; margin: 0 .2rem; vertical-align: middle; border-radius: 50%; }
.honors-room { margin-top: 1rem; padding: 1.15rem; }
.honors-room > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.honors-room > header > span { color: var(--accent); font-size: .72rem; font-weight: 850; }
.honors-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1rem; }
.honor-group { padding: .85rem; border-radius: 1rem; background: var(--surface-soft); }
.honor-group h3 { margin: 0 0 .7rem; font-size: .9rem; }
.honor-grid { display: grid; gap: .6rem; }
.honor-item { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .55rem; border-radius: .75rem; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.honor-item > div { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.honor-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.honor-item span, .honor-item small { color: var(--muted); font-size: .62rem; }
.honor-item.won small { color: var(--accent); }.honor-item.nominated { opacity: .62; }
.player-identity { min-width: 0; }
.player-identity p { margin: 0; color: var(--muted); font-size: .68rem; }
.player-identity h2 { margin: .2rem 0 .45rem; font-size: 1.6rem; }
.player-identity > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.player-identity > div > span { padding: .25rem .45rem; color: var(--ink); background: var(--surface-soft); font-size: .6rem; font-weight: 800; }
.overall { text-align: right; display: flex; flex-direction: column; }
.overall small { color: var(--muted); font-size: .6rem; letter-spacing: .12em; }.overall strong { font-size: 2.65rem; line-height: 1; }.overall span { margin-top: .25rem; color: var(--accent); font-size: .62rem; }
.overview-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.metric-card { min-height: 8.2rem; padding: 1rem; display: flex; flex-direction: column; }
.metric-card > span { color: var(--muted); font-size: .7rem; }.metric-card strong { margin-top: auto; font-size: 1.5rem; }.metric-card small { margin-top: .25rem; color: var(--muted); font-size: .62rem; }
.metric-card.good small { color: var(--accent); }.metric-card.warn small { color: var(--warning); }.metric-card.danger small { color: var(--danger); }
.next-match { grid-area: match; padding: 1.15rem; }
.next-match header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.next-match header span, .feed-card header span { color: var(--accent); font-size: .67rem; font-weight: 900; letter-spacing: .06em; }
.next-match h2 { margin: .25rem 0 0; font-size: 1.55rem; line-height: 1.08; }
.next-match header > b { padding: .6rem .75rem; border-radius: .9rem; white-space: pre-line; text-align: center; background: var(--surface-soft); font-size: .75rem; }
.pitch-map { height: 14.8rem; margin-top: 1rem; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 1.15rem; background: repeating-linear-gradient(90deg, #123c2e 0 16.66%, #164735 16.66% 33.32%); }
.pitch-map::before { content: ""; position: absolute; inset: .8rem; border: 1px solid rgba(255, 255, 255, .45); background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .38) 50%, transparent calc(50% + .5px)); }
.pitch-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; transform: translate(-50%, -50%); }
.pitch-map span { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 2; color: white; font-size: .68rem; font-weight: 750; }
.pitch-dot { position: absolute; z-index: 3; width: .85rem; height: .85rem; border: .22rem solid rgba(145, 244, 93, .22); border-radius: 50%; background: #c8ff3e; box-shadow: 0 0 1rem rgba(200, 255, 62, .55); }
.pitch-dot.p1 { left: 41%; top: 63%; }.pitch-dot.p2 { left: 59%; top: 48%; }.pitch-dot.p3 { left: 73%; top: 31%; }
.next-match .secondary-action { margin-top: .9rem; }
.feed-card { grid-area: feed; padding: 1rem; }
.feed-card header { padding-bottom: .7rem; display: flex; justify-content: space-between; align-items: center; }
.feed-card h2 { margin: .1rem 0 0; font-size: 1.2rem; }
.feed-card header button { min-height: 2.7rem; padding: 0 .8rem; border: 0; border-radius: 999px; color: var(--ink); background: var(--surface-soft); cursor: pointer; }
.feed-card article { padding: .8rem 0; display: grid; grid-template-columns: 3.2rem 1fr; gap: .7rem; border-top: 1px solid var(--line); }
.feed-card time { color: var(--accent); font-size: .65rem; font-weight: 900; }.feed-card article b { font-size: .78rem; }.feed-card article p { margin: .2rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }

/* Shared headings */
.view-heading { margin-bottom: 1.4rem; display: grid; grid-template-columns: 1fr minmax(18rem, .7fr); align-items: end; gap: 2rem; }
.view-heading span { color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.view-heading h1 { margin: .35rem 0 0; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .95; }
.view-heading > p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.section-note, .empty-copy { color: var(--muted); font-size: .72rem; line-height: 1.55; }

/* New career */
.create-shell { display: block; }
.create-view { width: min(100%, 78rem); margin: 0 auto; }
.create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.create-section { min-width: 0; padding: 1.2rem; }
.create-section-wide { grid-column: 1 / -1; }
.create-section-heading { margin-bottom: 1rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.create-section-heading > div { min-width: 0; }
.create-section-heading span { color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.create-section-heading h2 { margin: .25rem 0 0; font-size: 1.35rem; }
.create-section-heading p { max-width: 18rem; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; text-align: right; }
.create-fields { display: grid; gap: .75rem; align-items: start; }
.identity-fields, .background-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bias-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.body-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-wide { grid-column: 1 / -1; }
.form-field { min-width: 0; display: grid; gap: .4rem; align-content: start; }
.form-field > span, .check-row > span { color: var(--muted); font-size: .68rem; font-weight: 800; line-height: 1.35; }
.form-field > span small { display: block; margin-top: .15rem; color: var(--muted); font-size: .58rem; font-weight: 600; }
.form-field input:not([type="checkbox"]), .form-field select { width: 100%; min-width: 0; min-height: 2.9rem; box-sizing: border-box; padding: 0 .75rem; border: 1px solid var(--line); border-radius: .85rem; color: var(--ink); background: var(--surface-soft); }
.form-field input:not([type="checkbox"]):focus, .form-field select:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 1px; }
.check-row { min-width: 0; min-height: 2.9rem; padding: .7rem .75rem; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface-soft); cursor: pointer; }
.check-row input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--accent); }
.trait-picker { margin: 0; padding: 0; border: 0; }
.trait-picker legend { padding: 0; color: var(--muted); font-size: .68rem; font-weight: 800; }
.trait-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-top: .7rem; }
.trait-options label { min-width: 0; min-height: 3rem; padding: .65rem .7rem; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: .85rem; color: var(--ink); background: var(--surface-soft); cursor: pointer; font-size: .75rem; line-height: 1.35; }
.trait-options label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft)); }
.trait-options input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--accent); }
.create-actions { margin-top: 1.1rem; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); }
.create-actions p { max-width: 42rem; margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.create-actions .primary-action { min-width: 8rem; }
.create-view > .save-list { margin-top: 1rem; padding: 1.2rem; }

/* Week */
.resource-strip { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.resource-strip article { padding: 1rem; display: grid; grid-template-columns: 1fr auto; gap: .8rem; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--surface-soft); }
.resource-strip span { color: var(--muted); font-size: .68rem; }.resource-strip b { font-size: 1.05rem; }.resource-strip i { grid-column: 1 / -1; height: .4rem; overflow: hidden; background: color-mix(in srgb, var(--muted) 22%, transparent); }.resource-strip em { display: block; height: 100%; background: var(--accent); }
.week-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); grid-template-areas: "calendar activity" "calendar progress"; gap: 1rem; }
.calendar-card { grid-area: calendar; padding: 1.2rem; }.activity-card { grid-area: activity; padding: 1.2rem; }.progress-card { grid-area: progress; padding: 1.2rem; }
.week-layout h2 { margin: 0 0 1rem; }
.calendar-list { margin: 0; padding: 0; list-style: none; }
.calendar-list li { min-height: 4.5rem; padding: .85rem 0; display: grid; grid-template-columns: 3.7rem 1fr auto; align-items: center; gap: .7rem; border-top: 1px solid var(--line); }
.calendar-list time { color: var(--accent); font-size: .7rem; font-weight: 900; }.calendar-list div { display: flex; flex-direction: column; }.calendar-list div b { font-size: .82rem; }.calendar-list div span { margin-top: .2rem; color: var(--muted); font-size: .66rem; }.calendar-list small { color: var(--muted); font-size: .62rem; }
.calendar-list .selected-day, .calendar-list .match-day { margin-inline: -.5rem; padding-inline: .5rem; background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: .25rem solid var(--accent); }
.activity-options { display: grid; gap: .6rem; }
.activity-option { min-height: 5rem; padding: .85rem; display: flex; flex-direction: column; align-items: stretch; gap: .55rem; border: 1px solid var(--line); border-radius: 1rem; text-align: left; background: var(--surface-soft); cursor: pointer; }
.activity-option span { display: flex; flex-direction: column; }.activity-option b { font-size: .8rem; }.activity-option em { margin-top: .25rem; color: var(--muted); font-size: .66rem; font-style: normal; line-height: 1.45; }.activity-option small { color: var(--muted); font-size: .6rem; }
.activity-option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface-soft)); box-shadow: inset .25rem 0 var(--accent); }
.activity-option:disabled { cursor: not-allowed; opacity: .65; }
.progress-card label { margin-bottom: .85rem; display: grid; grid-template-columns: 1fr auto; gap: .45rem; }.progress-card label span, .progress-card label b { font-size: .68rem; }.progress-card label i { grid-column: 1 / -1; height: .42rem; background: color-mix(in srgb, var(--muted) 22%, transparent); }.progress-card label em { display: block; height: 100%; background: var(--accent); }.progress-card > p { color: var(--muted); font-size: .68rem; line-height: 1.55; }
/* Action buttons live in one container: flex rows on desktop, a single full-width
   column on phones; adjacent controls always keep >=8px (never HTML-space spacing). */
.progress-actions { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.progress-actions > button { flex: 1 1 11rem; min-height: 3rem; }

/* Match */
.match-view { padding: 1.2rem; }
.match-toolbar { margin-bottom: .75rem; padding: .4rem .55rem; display: flex; align-items: center; gap: .5rem; border-radius: 1.15rem; }
.match-toolbar .secondary-action { min-height: 3rem; padding: .55rem 1.05rem; display: inline-flex; align-items: center; gap: .4rem; }
.match-toolbar .secondary-action i { font-family: var(--icon-font); font-style: normal; }
.match-toolbar-note { min-width: 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.match-scoreboard { margin-bottom: 1rem; padding: 1rem 1.4rem; display: grid; grid-template-columns: 1fr .9fr 1fr; align-items: center; border-radius: 1.45rem; color: #f7fbff; background-color: #173b2d; background-image: linear-gradient(110deg, #173b2d, #0e1a27); }
.match-scoreboard > div { display: flex; align-items: center; justify-content: center; gap: 1rem; }.match-scoreboard > div span { color: #cbd7df; font-size: .78rem; font-weight: 800; }.match-scoreboard > div b { color: #fff; font-size: 2.25rem; }.match-scoreboard section { display: flex; flex-direction: column; text-align: center; }.match-scoreboard section small { color: #cbd7df; font-size: .65rem; }.match-scoreboard section strong { margin: .15rem 0; color: #fff; font-size: 1.8rem; }.match-scoreboard section em { color: #ffe55c; font-size: .62rem; font-style: normal; font-weight: 900; }
:root[data-theme="light"] .match-scoreboard { color: #f7fbff; background-color: #365b46; background-image: linear-gradient(110deg, #365b46, #1b3326); }
.match-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: 1rem; }
.match-narrative { min-height: 36rem; padding: clamp(1.35rem, 3vw, 2.3rem); }
.match-narrative h1 { max-width: 50rem; margin: .5rem 0 1.1rem; font: 700 clamp(2.5rem, 4.7vw, 4.9rem)/1.02 var(--ui-font); letter-spacing: -.045em; }
.narrative-lead { max-width: 53rem; color: var(--muted); font: 1.02rem/1.95 var(--ui-font); }
.scene-chapter { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.scene-chapter > header { margin-bottom: 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.scene-chapter > header span { color: var(--accent); font-size: .64rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.scene-chapter > header b { color: var(--muted); font-size: .68rem; }
.scene-prose { max-width: 54rem; }
.scene-prose p { margin: 0 0 1rem; color: color-mix(in srgb, var(--ink) 76%, var(--muted)); font: 1rem/1.95 var(--ui-font); }
.scene-prose p:last-child { margin-bottom: 0; }
.pregame-prose { margin-top: 1.1rem; }
.continuity-echo { margin-bottom: 1.2rem; padding: 1rem 1.1rem; border-left: .25rem solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-soft)); }
.continuity-echo span { color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.continuity-echo p { margin: .45rem 0 0; color: var(--ink); font: .84rem/1.7 var(--ui-font); }
.score-context { margin: 1.2rem 0 0; padding: .9rem 1rem; border-radius: 1rem; color: var(--muted); background: var(--surface-soft); font-size: .72rem; line-height: 1.65; }
.decision-threshold { padding-top: 2rem; }
.decision-cue { max-width: 53rem; margin: 1rem 0; color: var(--ink); font: 700 .93rem/1.75 var(--ui-font); }
.choice-heading { margin: 1.5rem 0 .75rem; }
.choice-heading span { color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.choice-heading h2 { margin: .25rem 0 0; font-size: 1.3rem; }
.pregame-card { background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 35%), var(--surface); }
.pregame-card blockquote { margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: .25rem solid var(--accent); background: var(--surface-soft); font: 700 .88rem/1.65 var(--ui-font); }
.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.brief-grid div { padding: .9rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-soft); }.brief-grid dt { color: var(--muted); font-size: .62rem; }.brief-grid dd { margin: .25rem 0 0; font-size: .75rem; font-weight: 750; line-height: 1.45; }
.pregame-card .primary-action { margin-top: 1.4rem; }
.match-side { min-height: 30rem; padding: 1.2rem; }
.match-side h2 { margin: 0 0 .65rem; }.match-side > p { color: var(--muted); font-size: .68rem; line-height: 1.55; }
.pressure-block { margin: 1.2rem 0; padding: 1rem 1.1rem; border-left: .25rem solid var(--accent); background: var(--surface-soft); }.pressure-block span { color: var(--accent); font-size: .63rem; font-weight: 900; letter-spacing: .08em; }.pressure-block p { margin: .45rem 0 0; font-size: .8rem; line-height: 1.65; }
.decision-list { display: grid; gap: .7rem; }
.decision-list button { min-height: 5rem; padding: .95rem 1rem; display: grid; grid-template-columns: minmax(0, .85fr) minmax(14rem, 1.15fr); align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 1rem; text-align: left; background: var(--surface-soft); cursor: pointer; }
.decision-list button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-soft)); }
.decision-list button span { display: flex; flex-direction: column; }.decision-list button b { font-size: .88rem; }.decision-list button em { margin-top: .22rem; color: var(--accent); font-size: .62rem; font-style: normal; }.decision-list button small { color: var(--muted); font-size: .68rem; line-height: 1.5; }
.decision-footnote { color: var(--muted); font-size: .63rem; line-height: 1.5; }
.live-stats { margin-bottom: 1.3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }.live-stats div { padding: .75rem .45rem; display: flex; flex-direction: column; border-radius: .8rem; background: var(--surface-soft); }.live-stats span { color: var(--muted); font-size: .55rem; }.live-stats b { margin-top: .3rem; font-size: .78rem; }
.match-timeline { margin: 0; padding: 0; list-style: none; }.match-timeline li { padding: .75rem 0; display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; border-top: 1px solid var(--line); }.match-timeline time { color: var(--accent); font-size: .65rem; font-weight: 900; }.match-timeline p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }.match-timeline li.success p { color: var(--ink); }.match-timeline li.fail time { color: var(--danger); }
.outcome-card { display: flex; flex-direction: column; justify-content: center; }.outcome-prose { max-width: 54rem; display: grid; gap: 1rem; }.outcome-prose p { margin: 0; color: var(--ink); font: 1.02rem/1.9 var(--ui-font); }.outcome-prose p:first-child { font-size: 1.14rem; }.fact-strip { margin: 1.35rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }.fact-strip div { padding: .9rem; display: flex; flex-direction: column; border-radius: 1rem; background: var(--surface-soft); }.fact-strip span { color: var(--muted); font-size: .62rem; }.fact-strip b { margin-top: .25rem; font-size: .88rem; }
.next-chapter-hint { margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in srgb, var(--accent) 5%, var(--surface-soft)); }
.next-chapter-hint span { color: var(--accent); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.next-chapter-hint p { margin: .35rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.match-summary-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr); gap: 1rem; }.summary-hero, .summary-facts { padding: clamp(1.4rem, 3vw, 2.4rem); }.summary-hero { min-height: 35rem; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 36%), var(--surface); }.summary-hero h1 { margin: .55rem 0; font-size: clamp(3rem, 5vw, 5.3rem); line-height: .95; }.summary-hero > p { color: var(--muted); line-height: 1.65; }.summary-rating { margin: 1rem 0 1.4rem; display: flex; flex-direction: column; }.summary-rating span, .summary-rating small { color: var(--muted); font-size: .68rem; }.summary-rating strong { font-size: 4rem; line-height: 1; }.summary-rating small { margin-top: .35rem; color: var(--accent); }.summary-actions { display: flex; flex-wrap: wrap; gap: .6rem; }.summary-actions .primary-action, .summary-actions .secondary-action { align-self: flex-start; }
.summary-facts h2 { margin-top: 0; }.summary-grid { margin-bottom: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }.summary-grid div { padding: .9rem; display: flex; flex-direction: column; border-radius: .9rem; background: var(--surface-soft); }.summary-grid span { color: var(--muted); font-size: .6rem; }.summary-grid b { margin-top: .3rem; font-size: 1.1rem; }

/* Relationships */
.people-layout { display: grid; grid-template-columns: minmax(16rem, .62fr) minmax(0, 1.38fr); gap: 1rem; }
.people-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; align-content: start; }
.person-card { min-height: 9rem; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--surface); cursor: pointer; }.person-card i { width: 3rem; height: 3rem; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; font-style: normal; font-weight: 900; }.person-card b { margin-top: .55rem; }.person-card span { margin-top: .2rem; color: var(--muted); font-size: .65rem; }.person-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }.person-card.active i { border-color: var(--accent); box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--accent) 12%, transparent); }
.relationship-detail { min-height: 34rem; padding: clamp(1.4rem, 3vw, 2.3rem); }.relationship-detail h1 { margin: .35rem 0 .7rem; font-size: clamp(2.8rem, 5vw, 5rem); }.relation-summary { max-width: 45rem; color: var(--muted); line-height: 1.7; }.relation-bars { margin: 1.5rem 0; display: grid; gap: .9rem; }.relation-row { display: grid; grid-template-columns: 3rem 1fr 5.5rem; align-items: center; gap: .7rem; }.relation-row span, .relation-row b { font-size: .68rem; }.relation-row b { text-align: right; }.relation-row i { height: .42rem; background: color-mix(in srgb, var(--muted) 22%, transparent); }.relation-row em { display: block; height: 100%; background: var(--accent); }.relationship-detail ul { padding-left: 1.15rem; color: var(--muted); line-height: 1.75; font-size: .75rem; }

/* Career */
.agent-note { margin-bottom: 1rem; padding: 1.1rem; display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; }.agent-note > i { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%; color: #18202b; background: #edf3ff; font-style: normal; font-weight: 900; }.agent-note span { color: var(--accent); font-size: .65rem; font-weight: 900; }.agent-note h2 { margin: .25rem 0; font-size: 1.2rem; }.agent-note p { margin: 0; color: var(--muted); font-size: .7rem; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }.offer-card { min-height: 23rem; padding: 1.2rem; display: flex; flex-direction: column; align-items: stretch; text-align: left; cursor: pointer; }.offer-card > span { color: var(--accent); font-size: .65rem; font-weight: 900; }.offer-card h2 { margin: .45rem 0; font-size: 1.65rem; }.offer-card > b { font-size: .75rem; }.offer-card > p { color: var(--muted); font-size: .65rem; }.offer-card ul { padding-left: 1rem; color: var(--muted); font-size: .68rem; line-height: 1.7; }.offer-card em { margin-top: auto; min-height: 2.7rem; padding: 0 .9rem; display: inline-flex; align-items: center; align-self: flex-start; border-radius: 999px; color: var(--ink); background: var(--surface-soft); font-size: .68rem; font-style: normal; font-weight: 800; }.offer-card.selected { border-color: var(--accent); box-shadow: inset 0 -.28rem var(--accent); }.offer-card.selected em { color: var(--accent-ink); background: var(--accent); }
.offer-actions { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.offer-actions button { min-height: 2.75rem; }
.contract-summary { margin-top: 1rem; padding: 1rem 1.2rem; display: grid; grid-template-columns: 9rem minmax(10rem, .7fr) 1fr; align-items: center; gap: 1rem; }.contract-summary span { color: var(--muted); font-size: .68rem; }.contract-summary strong { font-size: 1.05rem; }.contract-summary p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 1.4rem; max-width: calc(100% - 2rem); padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(20px); opacity: 0; transform: translate(-50%, 1rem); pointer-events: none; transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1); font-size: .74rem; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Complete component layouts. These views were rendered before they had a
   shared card/form treatment, which made the long iPhone screens collapse
   into browser-default controls. */
.world-simulation { grid-area: world; min-width: 0; padding: 1.15rem; }
.world-simulation > header, .psychology-card > header { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.world-simulation header span, .psychology-card header span { color: var(--accent); font-size: .64rem; font-weight: 900; letter-spacing: .08em; }
.world-simulation h2, .psychology-card h2 { margin: .25rem 0 0; font-size: 1.25rem; }
.world-simulation header > b, .psychology-card header > b { padding: .45rem .6rem; border-radius: .75rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface-soft)); font-size: .62rem; white-space: nowrap; }
.world-simulation > p, .psychology-card > p, .career-view > .surface-card > p, .people-strip > .surface-card > p, .people-strip > .national-card > p { margin: .7rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.memory-list { margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; list-style: none; }
.memory-list li { min-width: 0; padding: .75rem; display: grid; gap: .18rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface-soft); }
.memory-list b { font-size: .75rem; }.memory-list span { color: var(--muted); font-size: .68rem; line-height: 1.5; }

.timing-card .timing-note { margin: .5rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.timing-card .timing-sub { margin: 1rem 0 0; font-size: .72rem; color: var(--muted); }
.timing-reports li { grid-template-columns: auto 1fr; align-items: baseline; }
.timing-card .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.timing-card .summary-grid b { font-size: .95rem; }

.psychology-card { margin: 0 0 1rem; padding: 1.1rem; }
.psychology-card label { margin-top: .85rem; display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
.psychology-card label span, .psychology-card label b { font-size: .7rem; }.psychology-card label i { grid-column: 1 / -1; height: .45rem; overflow: hidden; background: color-mix(in srgb, var(--muted) 22%, transparent); }.psychology-card label em { display: block; height: 100%; background: var(--accent); }

.people-strip { min-width: 0; padding: 1rem; }
.people-strip > h2 { grid-column: 1 / -1; margin: 0; font-size: 1.1rem; }
.people-strip > .surface-card, .people-strip > .national-card, .inline-control { min-width: 0; padding: .95rem; display: grid; gap: .55rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-soft); }
.national-card > span, .inline-control > span { color: var(--muted); font-size: .66rem; font-weight: 800; }.national-card > b { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; font-size: .9rem; }
.people-strip .secondary-action { width: 100%; }.people-strip textarea { width: 100%; min-height: 6.5rem; }
.rival-card ul { margin: 0; padding: 0; display: grid; gap: .5rem; list-style: none; }.rival-card li { min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: .4rem; align-items: center; }.rival-card li span { grid-column: 2; color: var(--muted); font-size: .67rem; }

.button-row { display: flex; flex-wrap: wrap; gap: .5rem; }.button-row > button { flex: 1 1 10rem; }
.button-row + .button-row { margin-top: .5rem; }
.section-title { margin: 1.2rem 0 .7rem; font-size: 1.15rem; }
.career-view > .surface-card { margin-top: 1rem; padding: 1.15rem; }
.career-view > .honors-room { padding: 1.15rem; }
.career-stats, .club-politics, .comeback-card, .fast-forward, .records-card, .wealth-card, .retire-panel, .coach-hero, .coach-ops, .life-report { min-width: 0; }
.career-stats h2, .club-politics h2, .comeback-card h2, .fast-forward h2, .records-card h2, .wealth-card h2, .retire-panel h2, .coach-hero h1, .coach-ops h2, .life-report h1 { margin-top: 0; }
.transfer-card { margin-top: 1rem; padding: 1.15rem; }.transfer-card > span { color: var(--accent); font-size: .66rem; font-weight: 900; }.transfer-card h2 { margin: .35rem 0; font-size: 1.3rem; }.transfer-card > div { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.coach-hero { display: grid; gap: .75rem; }.coach-hero > p { margin: 0; color: var(--muted); line-height: 1.6; }
.coach-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }.coach-stats > div { padding: .75rem; border-radius: .85rem; background: var(--surface-soft); }.coach-stats span { color: var(--muted); font-size: .64rem; }.coach-stats b { display: block; margin-top: .25rem; font-size: 1.15rem; }
.coach-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.coach-ops > h2, .coach-ops > p, .coach-ops > .button-row { grid-column: 1 / -1; }.coach-ops > p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.coach-ops > .primary-action, .coach-ops > .danger { grid-column: 1 / -1; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.settings-grid > .surface-card { min-width: 0; padding: 1.15rem; display: grid; align-content: start; gap: .75rem; }
.settings-grid h2 { margin: 0; font-size: 1.18rem; }
.settings-grid label, .trait-card label, .coach-ops label { min-width: 0; display: grid; gap: .4rem; color: var(--muted); font-size: .68rem; font-weight: 800; }
.settings-grid input:not([type="checkbox"]), .settings-grid select, .settings-grid textarea, .trait-card select, .coach-ops input, .coach-ops select, .inline-control select { width: 100%; min-width: 0; min-height: 2.85rem; padding: 0 .75rem; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line); border-radius: .85rem; color: var(--ink); background: var(--surface-strong); }
.settings-grid input::placeholder, .coach-ops input::placeholder { font-size: .88em; }
.settings-grid textarea { min-height: 6.5rem; padding-block: .7rem; resize: vertical; }
.settings-grid input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.file-label { min-height: 2.85rem; padding: .55rem .75rem; display: flex !important; align-items: center; justify-content: space-between; gap: .65rem; border: 1px dashed var(--line); border-radius: .85rem; color: var(--ink) !important; background: var(--surface-soft); cursor: pointer; }
.file-label input { max-width: min(13rem, 56%); min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: .68rem; }
.save-cards { display: grid; gap: .65rem; }.save-cards article { padding: .8rem; display: grid; grid-template-columns: 1fr auto; gap: .45rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface-soft); }.save-cards article > span { color: var(--muted); font-size: .66rem; }.save-cards article > div { grid-column: 1 / -1; display: flex; gap: .5rem; }.save-cards button { min-height: 2.55rem; padding: 0 .8rem; border: 0; border-radius: .75rem; color: var(--ink); background: var(--surface-strong); }
.private-asset-preview { padding: .8rem; display: grid; gap: .5rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: .9rem; background: color-mix(in srgb, var(--accent) 7%, var(--surface-soft)); }.private-asset-preview > span { color: var(--accent); font-size: .64rem; font-weight: 900; }.private-asset-preview b { min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: .72rem; }
.public-fm-progress { padding: .75rem .8rem; display: grid; gap: .45rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: .9rem; background: color-mix(in srgb, var(--accent) 7%, var(--surface-soft)); }.public-fm-progress progress { width: 100%; height: .55rem; border: 0; border-radius: 99px; accent-color: var(--accent); }.public-fm-progress progress::-webkit-progress-bar { border-radius: 99px; background: color-mix(in srgb, var(--muted) 22%, transparent); }.public-fm-progress progress::-webkit-progress-value { border-radius: 99px; background: var(--accent); }.public-fm-progress span { font-size: .68rem; color: var(--muted); }.public-fm-status { font-weight: 900; color: var(--accent) !important; }
.public-fm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }.public-fm-actions .secondary-action { flex: 1 1 auto; min-height: 2.7rem; padding: 0 .6rem; font-size: .72rem; }

.overview-grid { grid-template-areas: "hero player" "world player" "match metrics" "match feed"; }

@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: 1fr; grid-template-areas: "hero" "player" "world" "metrics" "match" "feed"; }
  .week-layout { grid-template-columns: 1fr; grid-template-areas: "calendar" "activity" "progress"; }
  .match-layout, .match-summary-layout { grid-template-columns: 1fr; }
  .match-side { min-height: 0; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  body { background: var(--page); }
  html, body { width: 100%; overflow-x: clip; }
  .game-shell { width: 100%; min-height: 100dvh; margin: 0; padding: max(.55rem, env(safe-area-inset-top)) .55rem calc(8.6rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; background: var(--page); }
  .create-shell { min-height: 100dvh; padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
  .create-view { width: auto; margin: 0; padding: .35rem 0 1rem; }
  .create-view .view-heading { margin: .4rem .3rem 1rem; }
  .create-form { grid-template-columns: 1fr; gap: .75rem; }
  .create-section { padding: 1rem; border-radius: 1.35rem; }
  .create-section-heading { display: block; margin-bottom: .85rem; }
  .create-section-heading p { max-width: none; margin-top: .45rem; text-align: left; }
  .identity-fields { grid-template-columns: 1fr; }
  .background-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bias-fields { gap: .5rem; }
  .body-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body-fields .check-row { grid-column: 1 / -1; }
  .form-field input:not([type="checkbox"]), .form-field select { min-height: 3rem; padding-inline: .7rem; font-size: 1rem; }
  .trait-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .trait-options label { min-height: 3.1rem; padding: .65rem .6rem; font-size: .76rem; }
  .create-actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
  .create-actions .primary-action { width: 100%; }
  .create-view > .save-list { padding: 1rem; }
  .app-header { position: sticky; z-index: 25; top: max(.35rem, env(safe-area-inset-top)); min-height: 4.25rem; margin-bottom: .65rem; padding: .65rem .75rem; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; border-radius: 1.3rem; }
  .brand span, .app-title { display: none; }
  .brand b { width: 2.8rem; height: 2.8rem; }
  .world-date { width: 100%; justify-self: start; text-align: left; }
  .world-date span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; }.world-date b { max-width: 100%; font-size: .78rem; }
  .theme-toggle { min-width: 2.8rem; width: 2.8rem; min-height: 2.8rem; padding: 0; }
  .theme-toggle span { display: none; }
  .main-nav { position: fixed; z-index: 40; left: max(.7rem, env(safe-area-inset-left)); right: max(.7rem, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 1.35rem); width: auto; padding: .35rem; flex-direction: row; gap: 0; border-radius: 1.45rem; background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: 0 .8rem 2.3rem rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .18); backdrop-filter: blur(28px) saturate(180%); }
  .main-nav button { flex: 1; min-width: 0; min-height: 3.45rem; padding: .35rem .1rem; flex-direction: column; justify-content: center; gap: .15rem; border-radius: 1.05rem; }
  .main-nav button i { width: auto; line-height: 1; }.main-nav button span { font-size: .64rem; line-height: 1.1; white-space: nowrap; }
  .main-nav .nav-spacer, .main-nav .utility-button[data-action="new"] { display: none; }
  .main-nav .utility-button[data-view="settings"] { display: flex; }
  .app-content { min-height: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; }
  .view { padding: .35rem 0 1.5rem; }
  .narrative-view { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .overview-grid { display: flex; flex-direction: column; gap: .75rem; }
  .career-hero { order: 1; min-height: 19rem; padding: 1.25rem; border-radius: 1.75rem; }
  .career-hero h1 { max-width: 100%; font-size: clamp(2.35rem, 10.8vw, 3rem); line-height: 1.04; text-wrap: balance; }
  .career-hero > p:not(.eyebrow) { font-size: .78rem; }
  .career-hero .primary-action { width: 100%; min-height: 3.2rem; }
  .overview-player { order: 2; }
  .player-card { min-height: 6.5rem; padding: .9rem; grid-template-columns: 3.2rem 1fr auto; border-radius: 1.4rem; }
  .crest { width: 3rem; height: 3.6rem; }.player-identity h2 { font-size: 1.35rem; }.player-identity p { font-size: .6rem; }.player-identity > div > span { font-size: .53rem; }.overall strong { font-size: 2rem; }.honors-groups { grid-template-columns: 1fr; }.honors-room { padding: .95rem; }
  .world-simulation { order: 3; padding: 1rem; border-radius: 1.5rem; }
  .overview-metrics { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; overflow: visible; }
  .metric-card { min-height: 7.3rem; padding: .9rem; border-radius: 1.35rem; }.metric-card:nth-child(3) { grid-column: 1 / -1; }
  .next-match { order: 5; border-radius: 1.55rem; }.next-match h2 { font-size: 1.3rem; }.pitch-map { height: 14rem; }.next-match .secondary-action { width: 100%; min-height: 3.1rem; }
  .feed-card { order: 6; border-radius: 1.55rem; }
  .view-heading { margin: .4rem .3rem 1rem; display: block; }.view-heading h1 { margin-top: .3rem; font-size: clamp(2.2rem, 10vw, 2.85rem); line-height: 1.06; }.view-heading > p { margin-top: .65rem; font-size: .78rem; line-height: 1.65; }
  .resource-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; overflow: visible; }.resource-strip article { min-width: 0; padding: .8rem; grid-template-columns: 1fr; gap: .35rem; }.resource-strip span { font-size: .62rem; }.resource-strip b { font-size: .95rem; }
  .week-layout { display: flex; flex-direction: column; gap: .75rem; }.calendar-card, .activity-card, .progress-card { padding: 1rem; border-radius: 1.5rem; }
  .calendar-list li { grid-template-columns: 3rem 1fr; }.calendar-list small { grid-column: 2; justify-self: start; }
  .activity-option { min-height: 6rem; }
  /* Keep the last match action scrollable above the floating iPhone tab bar. */
  .match-view { padding: 0 0 calc(5.8rem + env(safe-area-inset-bottom)); }
  .match-toolbar { margin: .15rem .35rem .6rem; padding: .3rem; gap: .45rem; }
  .match-toolbar .secondary-action { flex: 1; min-height: 44px; padding: .45rem .9rem; font-size: .84rem; }
  .match-toolbar-note { display: none; }
  .progress-actions { flex-direction: column; width: 100%; }
  .progress-actions > button { width: 100%; min-height: 44px; }
  .match-scoreboard { margin: 0 0 .75rem; padding: .75rem .4rem; grid-template-columns: 1fr .8fr 1fr; border-radius: 1.35rem; }.match-scoreboard > div { flex-direction: column; gap: .15rem; }.match-scoreboard > div span { font-size: .58rem; }.match-scoreboard > div b { font-size: 1.6rem; }.match-scoreboard section small { font-size: .56rem; }.match-scoreboard section strong { font-size: 1.25rem; }
  .match-layout, .match-summary-layout { display: flex; flex-direction: column; gap: .75rem; }
  .match-narrative, .match-side, .summary-hero, .summary-facts { min-height: 0; padding: 1rem; border-radius: 1.5rem; }
  .match-narrative h1 { font-size: clamp(2rem, 9.5vw, 2.45rem); line-height: 1.08; }.narrative-lead { font-size: 1rem; line-height: 1.85; }
  .scene-chapter { padding-bottom: 1.4rem; }.scene-chapter > header { align-items: flex-start; flex-direction: column; gap: .2rem; }.scene-prose p { margin-bottom: 1rem; font-size: .94rem; line-height: 1.9; }.continuity-echo { padding: .9rem; }.continuity-echo p { font-size: .8rem; }.score-context { font-size: .68rem; }.decision-threshold { padding-top: 1.4rem; }.decision-cue { font-size: .88rem; line-height: 1.7; }.choice-heading h2 { font-size: 1.15rem; }
  .outcome-prose { gap: .9rem; }.outcome-prose p, .outcome-prose p:first-child { font-size: .96rem; line-height: 1.85; }
  .brief-grid { grid-template-columns: 1fr; }.decision-list button { min-height: 6.2rem; padding: .9rem; display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }.decision-list button small { font-size: .7rem; }
  .live-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }.fact-strip { grid-template-columns: 1fr; }.outcome-card .primary-action { width: 100%; }
  .summary-hero { min-height: 26rem; }.summary-hero h1 { font-size: clamp(2.35rem, 10vw, 2.85rem); line-height: 1.05; }.summary-actions { display: grid; }.summary-actions .primary-action, .summary-actions .secondary-action { width: 100%; }
  .people-layout { display: flex; flex-direction: column; gap: .75rem; }.people-strip { display: grid; grid-template-columns: 1fr; gap: .65rem; overflow: visible; }.people-strip > h2 { grid-column: auto; }.person-card { min-height: 7rem; }.relationship-detail { min-height: 0; padding: 1rem; border-radius: 1.5rem; }.relationship-detail h1 { font-size: clamp(2.3rem, 10vw, 2.8rem); line-height: 1.06; }.relation-row { grid-template-columns: 4.25rem minmax(0, 1fr); }.relation-row b { grid-column: 2; text-align: left; overflow-wrap: anywhere; }
  .agent-note { padding: 1rem; grid-template-columns: 3.2rem 1fr; border-radius: 1.5rem; }.agent-note > i { width: 3rem; height: 3rem; }.agent-note h2 { font-size: 1rem; }
  .offer-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; overflow: visible; }.offer-card { min-height: 0; border-radius: 1.5rem; }
  .contract-summary { padding: 1rem; grid-template-columns: 1fr; border-radius: 1.35rem; }.contract-summary p { margin-top: -.4rem; }
  .toast { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  #app[data-view="narrative"] .toast { bottom: auto; top: max(5.2rem, calc(env(safe-area-inset-top) + 4.6rem)); }
  .settings-grid { grid-template-columns: 1fr; gap: .75rem; }.settings-grid > .surface-card, .career-view > .surface-card { padding: 1rem; border-radius: 1.4rem; }
  .settings-grid input:not([type="checkbox"]), .settings-grid select, .settings-grid textarea, .trait-card select, .coach-ops input, .coach-ops select, .inline-control select { min-height: 3rem; font-size: 1rem; }
  #mainContent button, #mainContent select, #mainContent input:not([type="checkbox"]):not([type="file"]) { min-height: 44px; }
  #mainContent select, #mainContent input:not([type="checkbox"]):not([type="file"]) { font-size: 1rem; }
  .button-row { display: grid; grid-template-columns: 1fr; gap: .5rem; }.button-row > button { width: 100%; min-height: 44px; }
  .coach-ops { grid-template-columns: 1fr; }.coach-ops > h2, .coach-ops > p, .coach-ops > .button-row, .coach-ops > .primary-action, .coach-ops > .danger { grid-column: auto; }
  .coach-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.transfer-card > div, .save-cards article > div { display: grid; grid-template-columns: 1fr; }
  .file-label { min-height: 3rem; display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: stretch; }.file-label input { width: 100%; max-width: 100%; }
  .settings-grid button, .save-cards button, .offer-actions button { width: 100%; }
  .timing-card .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timing-card .summary-grid > div:nth-child(3) { grid-column: 1 / -1; }
  .honor-item { align-items: flex-start; }
  .honor-item b { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.35; }
}

@media (max-width: 430px) {
  .player-identity > div > span:last-child { display: inline-flex; padding: .2rem; font-size: 0; background: transparent; }
  .player-identity > div > span:last-child .nation-flags { margin: 0; }
  .player-identity > div > span:last-child .nation-flags img, .player-identity > div > span:last-child .nation-flag-emoji { width: 1.2rem; height: .82rem; font-size: 1.15rem; }
  .match-scoreboard > div span { max-width: 6.4rem; }
  .career-hero h1 { font-size: clamp(2.25rem, 10.5vw, 2.75rem); }
  .create-section { padding: .9rem; }
  .trait-options { grid-template-columns: 1fr; }
  .trait-options label { min-height: 3rem; }
  .public-fm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-fm-actions .secondary-action { width: 100%; min-height: 3rem; padding-inline: .45rem; }
  .public-fm-actions .danger { grid-column: 1 / -1; }
  .version-badge { border-radius: 1.1rem; }
}

@media (max-width: 850px) and (max-height: 500px) and (orientation: landscape) {
  .game-shell { padding: max(.45rem, env(safe-area-inset-top)) calc(5.25rem + env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.55rem, env(safe-area-inset-left)); }
  .game-shell.create-shell { padding-right: max(.55rem, env(safe-area-inset-right)); }
  .app-header { top: max(.35rem, env(safe-area-inset-top)); min-height: 3.7rem; }
  .brand b, .theme-toggle { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
  .main-nav { left: auto; right: max(.45rem, env(safe-area-inset-right)); top: max(.45rem, env(safe-area-inset-top)); bottom: max(.45rem, env(safe-area-inset-bottom)); width: 4.35rem; padding: .25rem; flex-direction: column; border-radius: 1.25rem; }
  .main-nav button { width: 100%; min-height: 44px; padding: .15rem; flex: 1 1 0; gap: .08rem; border-radius: .9rem; }
  .main-nav button span { font-size: .58rem; }
  .view { padding-bottom: .65rem; }
  .app-update-bar { margin-bottom: .35rem; }
  .career-hero { min-height: 14rem; }
  .career-hero h1, .view-heading h1, .relationship-detail h1, .summary-hero h1 { font-size: 2.25rem; line-height: 1.04; }
  .micro-scene-layer { padding-right: calc(5.4rem + env(safe-area-inset-right)); padding-bottom: max(.55rem, env(safe-area-inset-bottom)); }
  .toast { right: calc(5.2rem + env(safe-area-inset-right)); bottom: max(.55rem, env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .bias-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bias-fields .form-field:nth-child(n + 4) { grid-column: 1 / -1; }
  .public-fm-actions .secondary-action { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .view { animation: none !important; }
  button:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .app-header, .main-nav, .toast { backdrop-filter: none; background: var(--surface-strong); }
}

@media (prefers-contrast: more) {
  :root { --line: currentColor; }
  .surface-card, .app-content, .main-nav, .app-header { border-width: 2px; }
}

.narrative-briefing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr);
  gap: 1rem;
  align-items: start;
}

.narrative-main,
.narrative-side {
  min-width: 0;
  padding: 1.2rem;
}

.narrative-main h2,
.narrative-side h2,
.narrative-settlement h2,
.narrative-library h2 {
  margin-top: .3rem;
  font-family: var(--ui-font);
  letter-spacing: -.035em;
}

.narrative-main .section-note,
.narrative-ai .ai-status {
  color: color-mix(in srgb, var(--muted) 35%, var(--ink));
  font-size: .8rem;
}

.narrative-choice-panel {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.narrative-facts {
  display: grid;
  gap: .5rem;
  margin: .7rem 0 1.2rem;
}

.narrative-facts div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .6rem;
  padding: .55rem 0;
  border-top: 1px solid var(--line);
}

.narrative-facts dt {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.narrative-facts dd {
  margin: 0;
  font-size: .76rem;
  line-height: 1.55;
}

.narrative-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.narrative-controls button {
  flex: 1 1 8rem;
}

.narrative-settlement {
  margin-top: 1.2rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--muted));
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--accent) 5%);
  box-shadow: 0 .5rem 1.4rem color-mix(in srgb, var(--ink) 8%, transparent);
}

.narrative-settlement .stats-fold summary {
  cursor: pointer;
  font-weight: 850;
  color: var(--ink);
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, var(--muted));
  padding: .5rem .15rem;
}

.narrative-settlement h2 {
  line-height: 1.6;
  word-break: keep-all;
}

.narrative-library {
  position: fixed;
  z-index: 80;
  inset: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
  padding: 1.2rem;
  overflow: auto;
}

.narrative-library .library-list {
  display: grid;
  gap: .6rem;
  margin-top: .8rem;
}

.narrative-library .library-entry {
  min-height: 3.6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem .7rem;
  align-items: center;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  color: var(--ink);
  text-align: left;
  background: var(--surface-soft);
}

.narrative-library .library-entry small {
  grid-column: 2;
  color: var(--muted);
}

.narrative-library .library-entry[data-read="false"] b::after {
  content: " · 未读";
  color: var(--warning);
  font-size: .62rem;
}

.narrative-ai {
  position: fixed;
  z-index: 90;
  inset: 50% auto auto 50%;
  width: min(34rem, calc(100% - 1.4rem));
  padding: 1.2rem;
  transform: translate(-50%, -50%);
}

.narrative-facts-mini,
.narrative-inline-continue,
.narrative-inline-settle,
.narrative-inline-confirm,
.narrative-inline-library,
.narrative-inline-ai {
  display: none;
}

.narrative-inline-expand {
  display: inline-flex;
  margin-top: .9rem;
}

.narrative-montage {
  grid-column: 1 / -1;
  padding: 1.1rem;
}

.narrative-montage h2 {
  margin: .3rem 0;
}

.narrative-montage p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.micro-scene-layer {
  position: fixed;
  /* Narrative modal must sit above transient toasts so its prose and close
     control remain readable on narrow screens. */
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(3, 9, 15, .58);
  backdrop-filter: blur(12px) saturate(130%);
}

.micro-scene {
  width: min(34rem, 100%);
  max-height: min(72dvh, 40rem);
  padding: 1.1rem;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .35);
}

.micro-scene > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .8rem;
}

.micro-scene h2 {
  margin: .3rem 0 0;
  font-family: var(--ui-font);
}

.micro-scene p {
  margin: .5rem 0 0;
  color: var(--ink);
  line-height: 1.7;
}

.micro-scene .secondary-action {
  width: auto;
  min-height: 44px;
  padding-inline: 1rem;
}

@media (max-width: 850px) {
  .micro-scene-layer {
    place-items: end center;
    padding: max(.7rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right)) calc(6.65rem + env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left));
  }

  .micro-scene {
    width: 100%;
    max-height: calc(100dvh - 8.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 1rem;
    border-radius: 1.45rem;
  }

  .micro-scene p {
    line-height: 1.65;
  }
}

.fast-forward-panel {
  position: fixed;
  z-index: 110;
  inset: 50% auto auto 50%;
  width: min(32rem, calc(100% - 1.4rem));
  padding: 1.2rem;
  transform: translate(-50%, -50%);
}

.fast-forward-panel h2 {
  margin-top: .3rem;
}

.fast-forward-panel .ai-progress {
  margin: .9rem 0;
}

@media (max-width: 1100px) {
  .narrative-briefing {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .narrative-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .narrative-controls .primary-action {
    grid-column: 1 / -1;
    order: -1;
  }

  .narrative-main,
  .narrative-side {
    padding: 1rem;
    border-radius: 1.5rem;
  }

  .narrative-main {
    min-height: calc(100dvh - 15rem);
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .narrative-main.has-choice {
    min-height: auto;
    /* Choice cards must never end underneath the fixed bottom navigation. */
    padding-bottom: calc(5.4rem + env(safe-area-inset-bottom));
  }

  .narrative-main.has-choice + .narrative-side {
    display: none;
  }

  .narrative-view.is-settlement .narrative-side {
    display: none;
  }

  .narrative-view.is-settlement .narrative-controls {
    display: none;
  }

  .narrative-view.has-choice .narrative-controls {
    display: none;
  }

  .narrative-controls {
    margin-bottom: 1rem;
  }

  .narrative-view .scene-prose p {
    font-size: .85rem;
    line-height: 1.65;
    margin-bottom: .45rem;
    word-break: keep-all;
  }

  .narrative-view .view-heading {
    margin: .2rem .3rem .6rem;
  }

  .narrative-view .view-heading h1 {
    font-size: 2rem;
    line-height: 1;
  }

  .narrative-view .view-heading > p {
    margin-top: .35rem;
  }

  .narrative-main .section-note {
    margin: .2rem 0 .4rem;
  }

  .narrative-choice-panel {
    margin-top: .3rem;
    padding-top: .3rem;
  }

  .narrative-facts div {
    border-color: color-mix(in srgb, var(--line) 45%, var(--muted));
  }

  .narrative-facts-mini {
    display: block;
    margin-top: 1rem;
    padding: .85rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--accent) 7%);
  }

  .narrative-facts-mini p {
    margin: 0;
    color: color-mix(in srgb, var(--muted) 35%, var(--ink));
    font-size: .78rem;
    line-height: 1.4;
  }

  .narrative-inline-continue {
    display: inline-flex;
    width: 100%;
    margin-top: 1rem;
  }

  .narrative-inline-settle {
    display: inline-flex;
    width: 100%;
    margin-top: 1rem;
  }

  .narrative-inline-confirm {
    display: inline-flex;
    width: 100%;
    margin-bottom: .8rem;
  }

  .narrative-inline-library,
  .narrative-inline-ai {
    display: inline-flex;
  }

  .narrative-settlement-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 1rem;
  }

  .narrative-settlement-actions button {
    border: 1px solid color-mix(in srgb, var(--muted) 70%, var(--ink));
    background: var(--surface-strong);
    box-shadow: 0 .2rem .6rem color-mix(in srgb, var(--ink) 6%, transparent);
  }

  .narrative-inline-expand {
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 800;
  }

  .narrative-choice-panel .decision-list button {
    min-height: 2.8rem;
    padding: .2rem .5rem;
    border: 2px solid color-mix(in srgb, var(--muted) 85%, var(--ink));
    background: var(--surface-strong);
  }

  .narrative-choice-panel .decision-list button em {
    display: none;
  }

  .narrative-choice-panel .decision-list button small {
    color: color-mix(in srgb, var(--muted) 20%, var(--ink));
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.3;
  }

  .narrative-choice-panel .decision-list button.selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-soft));
    box-shadow: 0 0 0 1px var(--accent);
  }

  .narrative-choice-panel .decision-list button.selected::after {
    content: "✓ 已选择";
    color: var(--accent);
    font-size: .68rem;
    font-weight: 850;
  }

  .narrative-choice-panel .decision-list {
    gap: .3rem;
  }

  .narrative-choice-panel .decision-cue,
  .narrative-choice-panel .decision-footnote {
    color: color-mix(in srgb, var(--muted) 35%, var(--ink));
    font-size: .8rem;
    line-height: 1.55;
  }

  .narrative-choice-panel .decision-cue {
    display: none;
  }
}

.large-text { font-size: 112.5%; }

@media (max-width: 850px) {
  html.large-text .career-hero h1,
  html.large-text .view-heading h1,
  html.large-text .relationship-detail h1,
  html.large-text .summary-hero h1 {
    font-size: clamp(2.15rem, 9.5vw, 2.65rem);
  }

  html.large-text .main-nav button span {
    font-size: .58rem;
  }

  html.large-text .settings-grid input:not([type="checkbox"]),
  html.large-text .settings-grid select,
  html.large-text .settings-grid textarea {
    font-size: 1rem;
  }
}

.trait-picker { margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 1rem; }
.trait-picker legend { padding: 0 .4rem; color: var(--muted); font-size: .75rem; font-weight: 800; }
.trait-picker label { display: flex; align-items: center; gap: .5rem; padding: .42rem 0; font-size: .88rem; }
.trait-picker input { min-width: 1.2rem; min-height: 1.2rem; }
.ability-grid div b { font-size: 1.6rem; }
.national-history { margin-top: .5rem; color: var(--muted); font-size: .78rem; line-height: 1.6; }

.app-update-bar { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: .6rem; margin: 0 0 .65rem; }
.app-update-widget { display: flex; align-items: center; gap: .55rem; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.version-badge { min-height: 44px; padding: .45rem .75rem; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .16rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--surface-strong) 88%, var(--surface-soft)); cursor: pointer; text-align: left; }
.update-badge-version { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 850; line-height: 1.2; }
.update-badge-cache { color: var(--muted); font-size: .64rem; font-weight: 750; line-height: 1.2; }
.update-refresh-button { width: 44px; height: 44px; flex: 0 0 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface-soft); cursor: pointer; }
.update-refresh-button svg { width: 20px; height: 20px; }
.update-refresh-button.checking svg { animation: update-spin .8s linear infinite; }
.version-badge.checking .update-badge-version::before { content: ""; width: .55rem; height: .55rem; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: update-spin .8s linear infinite; }
.update-status { color: var(--muted); font-size: .68rem; line-height: 1.4; max-width: 24rem; }
.update-status[data-kind="latest"] { color: var(--accent); }
.update-status[data-kind="error"], .update-status[data-kind="offline"], .update-status[data-kind="older"], .update-status[data-kind="invalid"], .update-status[data-kind="timeout"], .update-status[data-kind="save-failed"] { color: var(--danger); }
.update-card [data-update-build-time] { display: block; overflow-wrap: anywhere; }
.update-card { grid-column: 1 / -1; }
@keyframes update-spin { to { transform: rotate(360deg); } }

@media (max-width: 850px) {
  .app-update-bar { justify-content: stretch; margin: .25rem 0 .6rem; }
  .app-update-widget { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: .45rem .55rem; }
  .app-update-widget .version-badge { width: 100%; min-height: 44px; }
  .app-update-widget .update-refresh-button { justify-self: end; }
  .app-update-widget .update-status { grid-column: 1 / -1; max-width: none; }
}

/* Focused match/novel chapters use the full iPhone canvas.  Keeping the
   floating tab bar over long prose makes it look as if the copy is clipped;
   the chapter and match controls already provide the required next/back path. */
@media (max-width: 850px) {
  #app[data-view="match"] .main-nav { display: none; }
  #app[data-view="match"] .game-shell { padding-bottom: max(.7rem, env(safe-area-inset-bottom)); }
  #app[data-view="match"] .match-view { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  #app[data-view="match"] .micro-scene-layer {
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  }
}