:root {
  --bg: #080a0f; --panel: #11141b; --panel-2: #171b24; --line: #292e39;
  --text: #f5f7fa; --muted: #9198a7; --accent: #e9ff3f; --orange: #ff6738;
  --radius: 18px; --shadow: 0 24px 70px rgba(0,0,0,.42);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .17; background-image: radial-gradient(circle at 15% 15%, rgba(233,255,63,.24), transparent 24%), radial-gradient(circle at 82% 68%, rgba(255,103,56,.13), transparent 23%); }
.noise::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px); background-size: 38px 38px; }
.topbar { position: relative; z-index: 2; height: 78px; max-width: 1440px; margin: auto; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { color: white; text-decoration: none; font-weight: 850; letter-spacing: -.04em; display: flex; gap: 12px; align-items: center; }
.brand b { color: var(--accent); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; background: var(--accent); color: #0a0c0f; border-radius: 8px 8px 8px 2px; font-size: 13px; transform: skew(-6deg); }
.save-status { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .08em; }
.save-status span { width: 7px; height: 7px; border-radius: 50%; background: #59db80; box-shadow: 0 0 12px #59db80; }
main { position: relative; z-index: 1; }
.fiction-note { max-width:1320px; margin:-36px auto 0; padding:0 5vw 28px; display:flex; justify-content:center; flex-wrap:wrap; gap:12px 20px; color:#575e6a; font-size:10px; text-align:center; text-transform:uppercase; letter-spacing:.08em; }
.fiction-note button { border:0; background:none; color:#9098a5; padding:0 7px; font-size:10px; font-weight:800; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }
.screen { max-width: 1320px; min-height: calc(100vh - 78px); margin: auto; padding: 6vw 5vw; }
.creation-screen { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 8vw, 130px); align-items: center; }
.eyebrow, .step-label { margin: 0 0 12px; color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; }
.hero-copy h1, .draft-header h1 { margin: 0; font-size: clamp(58px, 8.4vw, 126px); line-height: .82; letter-spacing: -.075em; font-style: italic; font-weight: 950; }
.hero-copy h1 span, .draft-header h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.hero-description { max-width: 560px; color: #adb3bf; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; margin: 34px 0; }
.hero-stats { display: flex; gap: 36px; }
.hero-stats div { display: flex; flex-direction: column; border-left: 2px solid var(--line); padding-left: 13px; }
.hero-stats strong { font-size: 23px; line-height: 1; }
.hero-stats span { color: var(--muted); font-size: 11px; margin-top: 7px; text-transform: uppercase; letter-spacing: .07em; }
.creation-card { background: linear-gradient(145deg, rgba(24,28,37,.96), rgba(13,15,21,.98)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 42px); }
.card-heading, .panel-heading, .board-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.card-heading { margin-bottom: 28px; }
.card-heading h2, .panel-heading h2, .board-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.overall-badge { flex: 0 0 64px; height: 64px; display: grid; place-items: center; background: var(--accent); color: #090b10; border-radius: 10px; transform: rotate(3deg); }
.overall-badge span { align-self: end; font-size: 9px; letter-spacing: .12em; font-weight: 900; }
.overall-badge strong { align-self: start; font-size: 30px; line-height: 1; }
label { display: block; color: #c0c6d1; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; margin: 18px 0 8px; }
input, select { width: 100%; height: 52px; border: 1px solid #303642; border-radius: 9px; background: #0d1016; color: var(--text); padding: 0 15px; outline: none; transition: .2s; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233,255,63,.1); }
input::placeholder { color: #585e69; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.primary-button { width: 100%; min-height: 56px; border: 0; border-radius: 9px; margin-top: 28px; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; background: var(--accent); color: #090b10; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; transition: transform .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(233,255,63,.18); }
.form-note { margin: 14px 0 0; text-align: center; color: #646b78; font-size: 12px; }
.draft-screen { padding-top: 46px; }
.draft-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.draft-header h1 { font-size: clamp(38px, 5vw, 70px); line-height: .92; }
.draft-header > div > p:last-child { color: var(--muted); }
.prospect-chip { min-width: 330px; display: flex; align-items: center; gap: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.mini-jersey { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--orange); font-weight: 950; }
.prospect-chip div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.prospect-chip span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.chip-ovr { border-left: 1px solid var(--line); padding: 0 10px; text-align: center; }
.chip-ovr small { display: block; color: var(--muted); font-size: 8px; }
.chip-ovr b { color: var(--accent); font-size: 25px; }
.progress-track { height: 4px; background: #1e222b; border-radius: 10px; margin: 28px 0; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .4s ease; }
.draft-layout { display: grid; grid-template-columns: minmax(290px, .75fr) minmax(430px, 1.25fr); gap: 22px; }
.legend-card { min-height: 465px; position: relative; overflow: hidden; background: #e95532; border-radius: 26px; clip-path: inset(0 round 26px); padding: 22px; box-shadow: 0 18px 55px rgba(0,0,0,.42); isolation: isolate; }
.legend-card::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; border: 1px solid rgba(13,15,20,.45); border-radius: inherit; }
.legend-topline { position: relative; z-index: 3; display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; font-weight: 850; letter-spacing: .13em; }
.player-number { position: absolute; z-index: 0; right: -12px; top: 20px; font-size: 190px; font-weight: 950; color: rgba(0,0,0,.09); letter-spacing: -.12em; }
.player-portrait { position: absolute; z-index: 1; inset: 0; border-radius:26px; background-size: cover; background-position: center; background-repeat: no-repeat; filter:contrast(1.16) saturate(1.04); image-rendering: auto; transform:translateZ(0); }
.player-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(18,13,10,.88) 100%); }
.legend-info { position: absolute; z-index: 3; bottom: 22px; left: 22px; right: 22px; }
.legend-info h2 { margin: 3px 0 8px; font-size: clamp(45px, 5vw, 72px); line-height: .76; letter-spacing: -.075em; text-transform: uppercase; font-style: italic; text-shadow: 0 4px 20px rgba(0,0,0,.2); }
.legend-info p { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 750; }
.legend-info p:first-child { color: var(--accent); text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.attribute-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.scout-strip { display: grid; grid-template-columns: 1.3fr 1fr .65fr; gap: 1px; margin: 22px 0 4px; background: #303642; border: 1px solid #303642; }
.scout-strip div { min-width: 0; background: #0d1016; padding: 11px 13px; }
.scout-strip small { display: block; color: #747c89; font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }
.scout-strip strong { display: block; margin-top: 4px; overflow: hidden; color: #eef0f4; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.reroll-button { border: 1px solid #3a404c; border-radius: 8px; background: transparent; color: white; padding: 10px 13px; font-weight: 750; }
.reroll-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reroll-button:disabled { opacity: .4; cursor: not-allowed; }
.reroll-button small { color: var(--muted); margin-left: 5px; }
.attribute-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }
.attribute-choice { min-height: 78px; position: relative; border: 1px solid #2e3440; border-radius: 3px; background: #0d1016; color: white; padding: 13px 15px; display: flex; align-items: center; gap: 13px; text-align: left; transition: .18s; }
.attribute-choice:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); background: #151a1d; }
.attribute-choice.recommended { border-left: 3px solid var(--accent); background: linear-gradient(90deg, rgba(233,255,63,.07), #0d1016 32%); }
.attribute-choice:disabled { opacity: .3; cursor: not-allowed; }
.key-hint { position: absolute; top: 5px; right: 7px; color: #565e6b; font-size: 8px; font-weight: 900; }
.attribute-choice .abbr { width: 40px; color: var(--accent); font-size: 12px; font-weight: 900; }
.attribute-choice .choice-name { flex: 1; }
.attribute-choice .choice-name strong { display: block; font-size: 13px; }
.attribute-choice .choice-name small { color: var(--muted); }
.attribute-choice .rating { font-size: 25px; font-weight: 950; }
.draft-tip { color: #656d7b; text-align: center; font-size: 11px; margin: 20px 0 0; }
.pick-history { display: flex; min-height: 0; gap: 8px; margin-top: 20px; overflow-x: auto; scrollbar-width: thin; }
.history-label { align-self: center; padding-right: 7px; color: #646c78; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.history-pick { flex: 0 0 auto; min-width: 125px; padding: 9px 11px; border-top: 2px solid var(--accent); background: #11141b; }
.history-pick small { color: #656d79; font-size: 8px; }
.history-pick b { margin-left: 7px; font-size: 11px; }
.history-pick span { display: block; margin-top: 4px; max-width: 115px; overflow: hidden; color: #9299a6; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.build-board { margin-top: 22px; background: rgba(17,20,27,.82); border: 1px solid var(--line); border-radius: 4px; padding: 22px; }
.board-heading span { color: var(--muted); font-size: 12px; }
.build-summary { display: flex; align-items: center; gap: 13px; }
.build-summary b { color: var(--accent); font-size: 12px; }
.build-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px; margin-top: 16px; }
.build-slot { min-width: 0; min-height: 84px; background: #0c0f14; border: 1px dashed #343946; border-radius: 9px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.build-slot.filled { border-style: solid; border-color: rgba(233,255,63,.42); background: rgba(233,255,63,.05); }
.build-slot span { color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.build-slot strong { font-size: 21px; }
.build-slot small { color: #666d79; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-button { display: block; margin: 24px auto 0; border: 0; background: none; color: #6f7684; text-decoration: underline; }
.text-button:hover { color: white; }
.draft-complete { text-align: center; padding: 54px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at center, rgba(233,255,63,.1), transparent 50%), var(--panel); }
.draft-complete h2 { margin: 0; font-size: clamp(40px, 6vw, 74px); letter-spacing: -.06em; }
.draft-complete > p:not(.eyebrow) { color: var(--muted); }
.draft-complete .primary-button { max-width: 420px; margin: 28px auto 0; }
.career-screen { padding-top: 42px; }
.career-topline { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 24px; border-bottom: 4px solid #242934; }
.career-topline h1 { margin: 0; font-size: clamp(42px, 7vw, 92px); line-height: .84; letter-spacing: -.07em; font-style: italic; }
.career-topline > div > p:last-child { margin: 14px 0 0; color: var(--muted); }
.career-actions { display:flex; align-items:center; gap:12px; }
.career-action-buttons { display:flex; gap:7px; }
.customize-button { height:42px; border:1px solid #39404c; border-radius:21px; background:#11141b; color:white; padding:0 17px; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.customize-button:hover { border-color:var(--accent); color:var(--accent); }
.retire-button { height:42px; border:1px solid #563037; border-radius:21px; background:#1b1115; color:#ff8798; padding:0 15px; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.retire-button:hover { border-color:#ff6b80; background:#2a1319; }
.career-ovr { flex: 0 0 112px; min-height: 104px; display: grid; place-items: center; background: var(--accent); color: #090b10; clip-path: polygon(8% 0,100% 0,100% 90%,92% 100%,0 100%,0 10%); }
.career-screen .career-ovr { background:var(--career-accent,var(--accent)); }
.career-ovr small { align-self: end; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.career-ovr strong { font-size: 48px; line-height: .9; }
.career-ovr span { align-self: start; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.career-dashboard { display: grid; grid-template-columns: minmax(280px,.68fr) minmax(530px,1.32fr); gap: 24px; margin-top: 26px; }
.career-customizer { margin-top:18px; border:1px solid #353c47; border-radius:18px; background:#11141b; padding:22px; animation:panel-in .3s ease both; }
.career-tabs { display:flex; gap:4px; margin-top:20px; padding:5px; border:1px solid var(--line); border-radius:14px; background:#0b0e13; }
.career-tabs button { flex:1; min-height:48px; border:0; border-radius:9px; background:transparent; color:#7f8794; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.career-tabs button span { margin-right:8px; color:#555d69; font-size:8px; }
.career-tabs button b { margin-left:8px; padding:3px 7px; border-radius:10px; background:#252b34; color:#aeb5c0; font-size:8px; }
.career-tabs button.active { background:#191e27; color:white; box-shadow:inset 0 -2px 0 var(--career-accent,var(--accent)); }
.career-tab-panel { animation:panel-in .28s ease both; }
.customizer-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.customizer-heading h2 { margin:0; font-size:25px; }
.customizer-heading button { width:34px; height:34px; border:0; border-radius:50%; background:#252a33; color:white; font-size:22px; }
.customizer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:20px; }
.customizer-grid > div > small { display:block; margin-bottom:8px; color:#7e8693; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.segmented { display:flex; gap:4px; padding:4px; background:#090c11; border-radius:12px; }
.segmented button { flex:1; min-height:38px; border:0; border-radius:8px; background:transparent; color:#858d9a; font-size:10px; font-weight:800; }
.segmented button:hover { color:white; }
.segmented button.selected { background:var(--accent); color:#090b10; box-shadow:0 4px 18px rgba(233,255,63,.16); }
.appearance-customizer { display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.appearance-customizer small,.color-customizer small { color:#7e8693; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.appearance-customizer p { margin:6px 0 0; color:#7f8794; font-size:11px; line-height:1.45; }
.portrait-picker { display:grid; grid-template-columns:repeat(9,1fr); gap:6px; }
.portrait-option { aspect-ratio:1; border:2px solid transparent; border-radius:10px; background-size:cover; background-position:center; transition:.18s; }
.portrait-option:hover { transform:translateY(-3px); }
.portrait-option.selected { border-color:var(--career-accent,var(--accent)); box-shadow:0 0 0 2px #11141b,0 0 0 4px var(--career-accent,var(--accent)); }
.color-customizer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; }
.accent-picker { display:flex; gap:8px; }
.accent-picker button { width:30px; height:30px; border:3px solid #11141b; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #414855; }
.accent-picker button.selected { box-shadow:0 0 0 2px #11141b,0 0 0 4px var(--swatch); }
.career-profile { position: relative; min-height: 640px; overflow: hidden; background: #e95532; border-radius: 28px!important; clip-path: inset(0 round 28px); -webkit-mask-image:-webkit-radial-gradient(white,black); transform:translateZ(0); box-shadow: 0 18px 55px rgba(0,0,0,.42); isolation:isolate; }
.career-art { position: absolute; inset: 0; border-radius:28px; background-size: cover; background-position: center; filter:contrast(1.16) saturate(1.04); image-rendering:auto; }
.career-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(9,10,13,.94) 90%); }
.career-profile-copy { position: absolute; z-index: 2; bottom: 74px; left: 24px; right: 24px; }
.career-profile-copy small { color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
.career-profile-copy h2 { margin: 5px 0; font-size: clamp(36px,4vw,58px); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; font-style: italic; }
.career-profile-copy p { margin: 0; color: #d0d4db; }
.career-rings { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.award-pill { padding: 5px 8px; background: var(--accent); color: #0a0b0e; font-size: 8px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.career-screen .award-pill { background:var(--career-accent,var(--accent)); }
.career-main { min-width: 0; }
.career-event { min-height: 280px; position:relative; padding: clamp(24px,3vw,38px); border: 1px solid var(--line); border-left: 4px solid var(--career-accent,var(--accent)); background: #11141b; }
.career-event.event-reveal { animation:event-reveal .42s cubic-bezier(.2,.8,.2,1) both; }
.career-event.is-simulating { overflow:hidden; pointer-events:none; }
.career-event.is-simulating::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 25%,rgba(233,255,63,.11) 45%,transparent 65%); animation:scan 1s linear infinite; }
.career-event h2 { margin: 0; font-size: clamp(30px,4vw,52px); line-height: .96; letter-spacing: -.05em; }
.career-event > p:not(.eyebrow) { max-width: 680px; color: #aab1bd; line-height: 1.55; }
.ai-career-overview { max-width:680px; margin:17px 0; padding:12px 14px; border-left:2px solid var(--career-accent,var(--accent)); background:#0c0f14; }
.ai-career-overview small { color:#69717e; font-size:8px; text-transform:uppercase; letter-spacing:.12em; }
.ai-career-overview p { margin:5px 0 0; color:white; font-size:13px; font-weight:750; }
.career-advance { max-width: 390px; }
.event-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; }
.event-choice { min-height: 74px; border: 1px solid #343a46; border-radius: 2px; background: #0d1016; color: white; padding: 12px; text-align: left; }
.event-choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.event-choice.retire-choice { border-color:#563037; color:#ff9aaa; }
.event-choice.retire-choice:hover { border-color:#ff6b80; background:#231217; }
.event-choice strong { display:block; font-size: 12px; }
.event-choice small { display:block; margin-top:5px; color:#858c99; }
.career-numbers { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 14px; border: 1px solid var(--line); }
.career-numbers div { padding: 15px; border-right: 1px solid var(--line); background: #0d1016; }
.career-numbers div:last-child { border:0; }
.career-numbers small { display:block; color:#707886; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.career-numbers strong { display:block; margin-top:5px; font-size:24px; }
.career-progression { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.career-progression > div { padding:13px 15px; background:#11141b; border:1px solid var(--line); }
.career-progression span { display:flex; justify-content:space-between; align-items:end; }
.career-progression small { color:#747c89; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.career-progression b { font-size:12px; }
.career-progression i { display:block; height:5px; margin-top:10px; overflow:hidden; background:#242a33; border-radius:8px; }
.career-progression em { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),#7dff8b); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.career-screen .career-progression em { background:linear-gradient(90deg,var(--career-accent,var(--accent)),#7dff8b); }
.career-challenges,.record-book { margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#0e1117; }
.goals-panel { padding-bottom:20px; }
.goals-summary { flex:0 0 230px; padding:18px; border-left:3px solid var(--career-accent,var(--accent)); background:#090c11; }
.goals-summary small,.goals-summary span { display:block; color:#777f8b; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.goals-summary strong { display:block; margin:5px 0; font-size:28px; }
.challenge-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.challenge-heading .eyebrow { margin:0 0 4px; }
.challenge-heading h2 { margin:0; font-size:20px; letter-spacing:-.03em; }
.challenge-heading > span { color:#727a87; font-size:9px; text-align:right; text-transform:uppercase; letter-spacing:.08em; }
.objective-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.objective-card { padding:14px; border:1px solid #303743; border-radius:11px; background:#11151d; }
.objective-card.complete { border-color:var(--career-accent,var(--accent)); }
.objective-card header,.objective-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.objective-card header span { color:var(--career-accent,var(--accent)); font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.objective-card header b { color:#7e8794; font-size:8px; }
.objective-card h3 { min-height:32px; margin:10px 0; font-size:13px; line-height:1.25; }
.goal-progress { height:5px; overflow:hidden; border-radius:5px; background:#252b35; }
.goal-progress i { display:block; height:100%; border-radius:inherit; background:var(--career-accent,var(--accent)); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.objective-card footer { margin-top:8px; }
.objective-card footer strong,.objective-card footer small { color:#89919e; font-size:8px; }
.record-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.record-card { padding:14px; overflow:hidden; border:1px solid #303743; border-radius:11px; background:linear-gradient(145deg,#131821,#0d1016); }
.record-card.broken { border-color:var(--career-accent,var(--accent)); box-shadow:inset 0 0 24px color-mix(in srgb,var(--career-accent,var(--accent)) 8%,transparent); }
.record-card small { color:#737c89; font-size:7px; font-weight:900; text-transform:uppercase; letter-spacing:.11em; }
.record-card.broken small { color:var(--career-accent,var(--accent)); }
.record-card h3 { min-height:28px; margin:7px 0 12px; font-size:11px; }
.record-card div { display:flex; align-items:baseline; gap:5px; }
.record-card strong { font-size:21px; }
.record-card span { color:#6e7683; font-size:9px; }
.record-card > i { display:block; height:3px; margin-top:10px; overflow:hidden; background:#262c35; }
.record-card em { display:block; height:100%; background:var(--career-accent,var(--accent)); transition:width .7s cubic-bezier(.2,.8,.2,1); }
.season-log { margin-top:14px; border:1px solid var(--line); background:#0e1117; }
.log-heading { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }
.log-heading h2 { margin:0; font-size:16px; }
.log-heading span { color:var(--muted); font-size:10px; }
.season-table-wrap { max-height: 260px; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:11px; }
th { position:sticky; top:0; background:#171b23; color:#6f7784; font-size:8px; letter-spacing:.1em; text-align:left; }
th,td { padding:10px 12px; border-bottom:1px solid #242a34; white-space:nowrap; }
td:last-child { color:var(--accent); font-weight:800; }
.empty-row td { padding:36px; color:#606875!important; text-align:center; }
.hub-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-top:24px; padding:28px; border:1px solid var(--line); background:#11141b; }
.hub-heading h2 { margin:0; font-size:clamp(30px,4vw,54px); letter-spacing:-.05em; }
.hub-heading > div > p:last-child { color:#8e96a3; }
.wallet-card { flex:0 0 220px; padding:18px; border-left:3px solid var(--career-accent,var(--accent)); background:#090c11; }
.wallet-card small,.wallet-card span { display:block; color:#777f8b; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.wallet-card strong { display:block; margin:4px 0; font-size:28px; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.shop-item { min-height:350px; position:relative; overflow:hidden; padding:0; border:1px solid #343a45; border-radius:16px; background:#11141b; }
.shop-art { height:170px; border-bottom:1px solid #343a45; background-size:cover; background-position:center; transition:filter .25s,transform .25s; }
.shop-item:hover .shop-art { transform:scale(1.025); }
.shop-item-copy { position:relative; z-index:2; padding:17px 18px 19px; background:#11141b; }
.shop-item.owned { border-color:var(--career-accent,var(--accent)); }
.shop-item.locked { border-color:#2a303a; }
.shop-item.locked .shop-art { filter:grayscale(.8) brightness(.34); }
.shop-item.locked .shop-item-copy { opacity:.58; }
.shop-lock { position:absolute; z-index:3; left:0; right:0; top:0; height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(5,7,10,.48); backdrop-filter:blur(2px); text-align:center; }
.shop-lock span { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(8,10,14,.82); font-size:23px; box-shadow:0 12px 30px rgba(0,0,0,.4); }
.shop-lock strong { margin-top:8px; color:white; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.shop-lock small { margin-top:3px; color:#aab1bc!important; font-size:8px!important; }
.shop-item small { color:#747c89; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.shop-item h3 { margin:10px 0 6px; font-size:22px; }
.shop-item p { min-height:36px; color:#8b93a0; font-size:11px; line-height:1.45; }
.shop-item footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.shop-item footer strong { color:var(--career-accent,var(--accent)); }
.shop-item button { min-height:34px; border:0; border-radius:7px; background:var(--career-accent,var(--accent)); color:#090b10; padding:0 12px; font-size:9px; font-weight:900; text-transform:uppercase; }
.shop-item button:disabled { background:#292f38; color:#6f7783; cursor:not-allowed; }
.phone-stage { display:grid; grid-template-columns:minmax(300px,420px) minmax(260px,1fr); gap:36px; align-items:center; max-width:920px; margin:26px auto; }
.social-phone { min-height:680px; position:relative; overflow:hidden; border:8px solid #242933; border-radius:46px; background:#f5f1e8; color:#121317; box-shadow:0 35px 90px rgba(0,0,0,.5); }
.phone-speaker { width:92px; height:20px; margin:auto; border-radius:0 0 16px 16px; background:#242933; }
.social-phone > header { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid #ddd7cb; }
.social-phone > header > div:nth-child(2) { flex:1; }
.social-phone header strong,.social-phone header span { display:block; }
.social-phone header span { color:#7d7d7d; font-size:9px; }
.social-phone header b { color:#e23249; font-size:9px; }
.social-avatar { width:36px; height:36px; border-radius:50%; background-size:cover; background-position:center; }
.social-compose { padding:11px 13px; border-bottom:1px solid #ddd7cb; background:#ebe6dc; }
.social-compose textarea { width:100%; height:56px; resize:none; border:1px solid #d0c9bc; border-radius:10px; background:#fffdf8; color:#191a1d; padding:9px; font-size:11px; outline:none; }
.social-compose textarea:focus { border-color:#7f8f20; }
.social-compose div { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }
.social-compose small { color:#827f78; font-size:7px; line-height:1.3; }
.social-compose small.error { color:#c62c42; font-weight:800; }
.social-compose button { flex:0 0 auto; border:0; border-radius:14px; background:#15171b; color:white; padding:7px 13px; font-size:9px; font-weight:850; }
.phone-search { display:flex; gap:6px; padding:10px 13px; border-bottom:1px solid #ddd7cb; background:#f5f1e8; }
.phone-search input { flex:1; height:34px; border:1px solid #cdc6ba; border-radius:17px; background:white; color:#17181b; padding:0 13px; font-size:10px; }
.phone-search button { width:34px; border:0; border-radius:50%; background:#ddd7cb; color:#333; }
.social-feed { height:430px; overflow:auto; }
.social-post { padding:16px; border-bottom:1px solid #ddd7cb; animation:event-reveal .35s ease both; }
.social-post header { display:flex; justify-content:space-between; font-size:9px; }
.social-post header b { font-size:11px; }
.social-post p { margin:9px 0; font-size:12px; line-height:1.45; }
.social-post footer { display:flex; align-items:center; gap:14px; color:#767676; font-size:10px; }
.social-action { border:0; background:none; color:#767676; padding:0; font-size:10px; }
.social-action.liked { color:#d42b48; font-weight:850; }
.reply-toggle { border:0; background:none; color:#536c9d; padding:0; font-size:9px; font-weight:750; }
.social-replies { margin-top:10px; padding:8px 10px; border-left:2px solid #c5beaf; background:#ebe6dc; }
.social-replies p { margin:5px 0; color:#555; font-size:9px; }
.social-replies b { color:#222; }
.social-phone > nav { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; padding:10px 12px; border-top:1px solid #ddd7cb; background:#f5f1e8; }
.social-phone > nav button { width:40px; height:36px; border:0; border-radius:18px; background:transparent; color:#15171b; font-size:20px; }
.social-phone > nav button:hover,.social-phone > nav button.active { background:#ded8cc; color:#c92541; }
.phone-empty { padding:60px 24px; color:#7d7d7d; text-align:center; }
.phone-profile { padding:28px 20px; text-align:center; }
.phone-profile .large-avatar { width:110px; height:110px; margin:auto; border:4px solid white; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 7px 24px rgba(0,0,0,.18); }
.phone-profile h3 { margin:14px 0 3px; font-size:25px; }
.phone-profile > p { color:#777; font-size:11px; }
.profile-counts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:24px; border-block:1px solid #d9d2c7; }
.profile-counts div { padding:13px 5px; }
.profile-counts b,.profile-counts span { display:block; }
.profile-counts span { color:#777; font-size:8px; text-transform:uppercase; }
.social-insights { padding:28px; border:1px solid var(--line); border-radius:18px; background:#11141b; }
.social-insights h3 { margin:0 0 24px; font-size:34px; letter-spacing:-.04em; }
.social-insights div { display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); }
.social-insights span { color:#7e8693; font-size:10px; text-transform:uppercase; }
.legal-backdrop { position:fixed; z-index:220; inset:0; display:grid; place-items:center; padding:20px; background:rgba(3,5,8,.93); backdrop-filter:blur(12px); }
.legal-modal { width:min(760px,100%); max-height:calc(100vh - 40px); overflow:auto; position:relative; padding:clamp(24px,4vw,42px); border:1px solid #414957; border-top:4px solid var(--accent); border-radius:22px; background:#11141b; box-shadow:0 40px 120px rgba(0,0,0,.75); }
.legal-shield { position:absolute; right:28px; top:27px; display:grid; place-items:center; width:52px; height:58px; background:var(--accent); color:#090b10; clip-path:polygon(50% 0,94% 16%,86% 76%,50% 100%,14% 76%,6% 16%); font-size:13px; font-weight:950; }
.legal-modal h2 { max-width:570px; margin:0; font-size:clamp(34px,5vw,58px); line-height:.96; letter-spacing:-.05em; }
.legal-intro { max-width:620px; color:#a1a9b6; line-height:1.55; }
.policy-tabs { display:flex; gap:5px; margin-top:22px; padding:4px; border-radius:11px; background:#090c11; }
.policy-tabs button { flex:1; min-height:40px; border:0; border-radius:8px; background:transparent; color:#858e9b; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.policy-tabs button.active { background:#202631; color:white; box-shadow:inset 0 -2px 0 var(--accent); }
.policy-copy { height:220px; overflow:auto; margin-top:10px; padding:18px; border:1px solid #303743; border-radius:10px; background:#0b0e13; color:#aab2bf; font-size:11px; line-height:1.55; }
.policy-copy h3 { margin:0 0 10px; color:white; font-size:19px; }
.policy-copy h4 { margin:15px 0 5px; color:#d9dee6; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.policy-copy p,.policy-copy ul { margin:6px 0; }
.human-check { min-height:65px; display:flex; align-items:center; margin-top:14px; }
.human-check-message { margin:4px 0 0; color:#8d96a4; font-size:10px; }
.human-check-message.error { color:#ff8068; }
.legal-agreement { display:flex; align-items:flex-start; gap:11px; margin:16px 0 0; padding:13px; border:1px solid #343b46; border-radius:10px; background:#0d1016; color:#e0e4ea; font-size:11px; line-height:1.4; text-transform:none; letter-spacing:0; }
.legal-agreement input { flex:0 0 18px; width:18px; height:18px; margin:0; accent-color:var(--accent); }
.legal-modal .primary-button { margin-top:12px; }
.legal-modal .primary-button:disabled { background:#303641; color:#737b88; cursor:not-allowed; transform:none; box-shadow:none; }
.legal-modal > small { display:block; margin-top:11px; color:#68707d; font-size:8px; text-align:center; text-transform:uppercase; letter-spacing:.08em; }
.contract-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:22px; background:rgba(3,5,8,.82); backdrop-filter:blur(10px); animation:panel-in .25s ease both; }
.contract-modal { width:min(820px,100%); position:relative; overflow:hidden; padding:clamp(26px,5vw,52px); border:1px solid #434b57; border-top:4px solid var(--accent); border-radius:24px; background:#11141b; box-shadow:0 40px 120px rgba(0,0,0,.7); }
.contract-modal h2 { max-width:620px; margin:0; font-size:clamp(34px,5vw,64px); line-height:.95; letter-spacing:-.055em; }
.contract-modal > p:not(.eyebrow):not(.contract-note) { color:#9ba3af; line-height:1.55; }
.contract-stamp { position:absolute; right:-25px; top:26px; padding:11px 40px; background:var(--accent); color:#090b10; font-size:9px; font-weight:950; text-align:center; transform:rotate(8deg); }
.contract-close { position:absolute; z-index:2; right:18px; bottom:18px; width:36px; height:36px; border:1px solid #3b424d; border-radius:50%; background:#1b2029; color:white; font-size:21px; }
.contract-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px; }
.contract-option { min-height:155px; border:1px solid #343b46; border-radius:12px; background:#0a0d12; color:white; padding:18px; text-align:left; transition:.2s; }
.contract-option:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.contract-option small { color:#707986; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.contract-option strong { display:block; margin:13px 0 6px; font-size:18px; }
.contract-option span { display:block; color:var(--accent); font-size:12px; font-weight:850; }
.contract-option p { color:#8d95a2; font-size:10px; line-height:1.45; }
.contract-note { margin:18px 0 0; color:#626a76; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
@keyframes panel-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes event-reveal { from { opacity:.25; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes scan { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; padding: 12px 18px; background: white; color: #111; border-radius: 8px; box-shadow: var(--shadow); font-weight: 750; transform: translate(-50%, 100px); opacity: 0; transition: .3s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
@keyframes pick-pulse { 0% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@media (max-width: 900px) {
  .creation-screen { grid-template-columns: 1fr; padding-top: 10vw; }
  .hero-copy h1 { font-size: clamp(60px, 15vw, 110px); }
  .creation-card { max-width: 620px; width: 100%; }
  .draft-header { align-items: flex-start; flex-direction: column; }
  .prospect-chip { width: 100%; }
  .draft-layout { grid-template-columns: 1fr; }
  .legend-card { min-height: 420px; }
  .build-grid { grid-template-columns: repeat(4, 1fr); }
  .career-dashboard { grid-template-columns:1fr; }
  .career-profile { min-height:520px; }
  .customizer-grid { grid-template-columns:1fr; }
  .shop-grid { grid-template-columns:repeat(2,1fr); }
  .appearance-customizer { grid-template-columns:1fr; }
  .portrait-picker { grid-template-columns:repeat(5,1fr); }
  .record-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px) {
  .topbar { padding: 0 20px; }
  .save-status { display: none; }
  .screen { padding: 40px 20px; }
  .hero-copy h1 { font-size: 17vw; }
  .hero-stats { gap: 14px; flex-wrap: wrap; }
  .hero-stats span { font-size: 9px; }
  .field-row, .attribute-choices { grid-template-columns: 1fr; }
  .scout-strip { grid-template-columns: 1fr 1fr; }
  .scout-strip div:last-child { grid-column: 1 / -1; }
  .draft-header h1 { font-size: 12vw; }
  .prospect-chip { min-width: 0; }
  .build-grid { grid-template-columns: repeat(2, 1fr); }
  .legend-card { min-height: 380px; }
  .legend-info h2 { font-size: 50px; }
  .career-topline { align-items:flex-start; }
  .career-actions { flex-direction:column-reverse; align-items:flex-end; }
  .career-action-buttons { flex-direction:column; }
  .career-ovr { flex-basis:86px; min-height:88px; }
  .career-ovr strong { font-size:38px; }
  .career-profile { min-height:440px; }
  .event-choices { grid-template-columns:1fr; }
  .career-numbers { grid-template-columns:1fr 1fr; }
  .career-progression { grid-template-columns:1fr; }
  .objective-grid,.record-grid { grid-template-columns:1fr; }
  .challenge-heading { align-items:flex-start; flex-direction:column; }
  .challenge-heading > span { text-align:left; }
  .career-tabs { overflow-x:auto; }
  .career-tabs button { flex:0 0 170px; }
  .hub-heading,.phone-stage { grid-template-columns:1fr; display:grid; }
  .wallet-card,.goals-summary { width:100%; }
  .color-customizer { align-items:flex-start; flex-direction:column; }
  .shop-grid { grid-template-columns:1fr; }
  .shop-art,.shop-lock { height:190px; }
  .legal-backdrop { padding:10px; }
  .legal-modal { max-height:calc(100vh - 20px); padding:24px 18px; border-radius:16px; }
  .legal-shield { display:none; }
  .policy-copy { height:190px; }
  .social-phone { min-height:620px; border-radius:36px; }
  .social-feed { height:370px; }
  .contract-choices { grid-template-columns:1fr; }
  .contract-stamp { display:none; }
  .career-numbers div:nth-child(2) { border-right:0; }
  .career-numbers div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .fiction-note { margin-top: -20px; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }