/* Test 31: card-first arena. Gameplay and dialog content keep their existing contracts. */
:root {
  --bg:#101719; --panel:#192225; --soft:#253034; --edge:#39464a;
  --ink:#f4f0e8; --muted:#b8c2c3; --gold:#e8c58c;
  --good:#9bdfbe; --bad:#ff9aa3; --violet:#c7b3ef;
}
body { background:radial-gradient(ellipse at 50% -15%,#2e4442 0,transparent 58%),var(--bg); }
.wrap { max-width:1280px; padding-top:24px; }
header { border-color:#ffffff12; padding-bottom:18px; }
.brand { letter-spacing:.14em; }
.sigil { border-radius:50% 50% 12px 12px; background:#e8c58c0a; }
nav { gap:0; border-bottom:1px solid var(--edge); margin:0 0 20px; }
nav button { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; min-height:52px; }
nav [aria-current] { background:transparent; color:var(--gold); border-color:var(--gold); }
button { transition:background .15s,border-color .15s; }
button.primary { background:linear-gradient(135deg,#f1d4a5,#dbb578); box-shadow:0 5px 18px #0003; }
button:hover:not(:disabled) { background:#31403f; }
.panel { border-color:#ffffff18; background:linear-gradient(145deg,#202d2e,#182125); border-radius:18px; padding:22px; }
#app[data-entry] { max-width:none; }
#app .hud { display:flex; align-items:center; gap:0; padding:12px 0; margin:0 0 18px; border-bottom:1px solid var(--edge); }
#app .hud .metric { background:transparent; border:0; border-right:1px solid var(--edge); border-radius:0; padding:0 24px; display:flex; align-items:center; gap:8px; }
#app .hud .metric:first-child { padding-left:0; color:var(--gold); }
#app .hud .metric:last-child { border-right:0; margin-left:auto; padding-right:0; }
#app .hud .metric strong { font-size:1.25rem; line-height:1.3; }
#app .hud .metric span { font-size:.8125rem; line-height:1.4; }
#app .hud .life-hearts { display:flex; height:auto; gap:4px; }
#app .hud .life-hearts img { width:18px; height:18px; }
.arena-layout { display:grid; gap:24px; align-items:start; }
.arena-main,.arena-rail { min-width:0; }
.arena-rail { display:grid; gap:14px; }
.arena-disclosure { margin:12px 0; border:1px solid var(--edge); border-radius:12px; background:#152023; }
.arena-disclosure>summary { padding:12px 16px; color:var(--ink); font-size:.875rem; }
.arena-disclosure[open]>summary { border-bottom:1px solid var(--edge); margin-bottom:10px; }
.arena-disclosure>.panel { margin:0; border:0; background:transparent; }
.arena-disclosure>.play-layout { padding:4px; }
.arena-disclosure>.formation-tools { padding:0 12px 12px; margin:0; }
.arena-rail .intro,.arena-rail .tutorial-panel { margin:0; }
.arena-rail .tournament-strip { margin:0; border:1px solid var(--edge); background:#162023; border-radius:16px; padding:16px; }
.arena-rail .tournament-strip-title { gap:6px; margin:0; }
.arena-rail .tournament-strip-title strong { font-size:.875rem; }
.arena-rail .tournament-story { margin:12px 0 0; padding:14px 0 0; border:0; border-top:1px solid var(--edge); background:transparent; border-radius:0; }
.arena-rail .encounter-heading { align-items:start; }
.arena-rail .encounter-heading strong { font:500 1.3rem/1.25 Georgia,serif; }
.arena-rail .encounter-duel { grid-template-columns:1fr; gap:8px; }
.arena-rail .encounter-team { justify-content:start; text-align:left; }
.arena-rail .encounter-team .general-art,.arena-rail .encounter-team .portrait { width:42px; height:48px; }
.arena-rail .encounter-versus { display:none; }
.arena-rail .encounter-stakes { padding:0; background:transparent; }
.arena-rail .encounter-stakes p,.arena-rail .encounter-history { font-size:.8125rem; color:var(--muted); line-height:1.5; }
.arena-rail .tournament-list { margin:14px 0 0; background:transparent; }
.arena-rail .tournament-list>summary { padding:10px; font-size:.8125rem; }
.arena-rail .tournament-members { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 8px 8px; }
.arena-rail .tournament-member { display:flex; flex-direction:column; align-items:center; gap:5px; min-height:108px; padding:8px 3px; }
.arena-rail .tournament-member>.general-art,.arena-rail .tournament-member>.portrait { width:34px; height:38px; }
.arena-rail .tournament-member b { display:block; font-size:.75rem; white-space:normal; }
.arena-rail .tournament-member.self b { position:static; width:auto; background:transparent; }
.arena-rail .general-team-name { display:none; }
.arena-rail .tournament-hearts img { width:12px; height:12px; }

/* Three offers are real cards; details move into their existing purchase preview. */
#app[data-phase] .market { padding:22px; }
.market-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:14px; }
.market-heading h1 { font:500 clamp(1.55rem,3vw,2.1rem)/1.15 Georgia,serif; margin:5px 0 0; }
.market-swipe { display:none; color:var(--muted); font-size:.75rem; }
#app[data-phase] .market .market-status { font-size:.8125rem; color:var(--muted); margin:0 0 14px; }
#app[data-phase] .market .offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 18px; }
#app[data-phase] .market .offer { display:flex; flex-direction:column; gap:0; padding:0; min-height:0; align-self:stretch; background:#151f22; border:1px solid #68706b; border-radius:13px; box-shadow:0 10px 24px #0004; }
#app[data-phase] .market .offer.rarity-rare { border-color:#a89bbd; }
#app[data-phase] .market .offer.rarity-epic { border-color:var(--gold); }
#app[data-phase] .market .offer.recommended { outline:0; box-shadow:0 0 0 1px #e8c58c55,0 10px 24px #0004; }
#app[data-phase] .market .offer:hover { border-color:var(--gold); background:#202e30; }
#app[data-phase] .market .offer:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
#app[data-phase] .market .offer>.art { width:100%; height:250px; max-height:none; min-height:0; aspect-ratio:auto; align-self:stretch; border:0; border-radius:0; }
#app[data-phase] .market .offer>.art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%; }
#app[data-phase] .market .offer>.cost { position:absolute; top:10px; right:10px; bottom:auto; padding:6px 10px; font-size:.875rem; line-height:1.2; border-radius:8px; background:#101719f2; color:var(--gold); margin:0; }
#app[data-phase] .market .offer.unaffordable>.cost { color:var(--bad); border-color:var(--bad); }
#app[data-phase] .market .offer .upgrade-badge { top:auto; bottom:9px; left:9px; padding:4px 7px; background:#101719ed; font-size:.75rem; }
#app[data-phase] .market .offer .upgrade-badge span { display:inline; }
#app[data-phase] .market .offer>.body { display:flex; align-self:stretch; gap:8px; padding:14px; }
#app[data-phase] .market .offer strong { font:600 1.125rem/1.2 Georgia,serif; min-height:0; overflow-wrap:normal; }
#app[data-phase] .market .offer .values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; font-size:.875rem; padding:7px 0; border-top:1px solid #ffffff15; border-bottom:1px solid #ffffff15; }
#app[data-phase] .market .offer .value { display:flex; gap:3px; }
#app[data-phase] .market .offer .value img { width:14px; height:14px; }
#app[data-phase] .market .offer .effect { min-height:2.8em; font-size:.875rem; line-height:1.4; color:var(--ink); }
#app[data-phase] .market .offer .offer-context { display:none; }
#app[data-phase] .market .purchase-benefit { min-height:0; padding-top:7px; margin-top:auto; font-size:.8125rem; line-height:1.4; border-top:1px solid #ffffff12; color:var(--gold); }
#app[data-phase] .market .purchase-benefit small { display:none; }
#app[data-phase] .market .offer .buy-hint { display:block; font-size:.8125rem; color:var(--bad); padding:0; margin:0; }
#app[data-phase] .market .market-ownership { font-size:.75rem; color:var(--muted); min-height:22px; }
#app[data-phase] .market .market-ownership .general-art { width:22px; height:22px; }
#app[data-phase] .market .offer.empty { display:flex; justify-content:center; align-items:center; padding:24px 12px; min-height:250px; border:1px dashed var(--edge); box-shadow:none; background:#121c1e; }
#app[data-phase] .market .empty-symbol { display:block; }
#app[data-phase] .market-controls { gap:10px; grid-template-columns:1fr 1.4fr; }
#app[data-phase] .market-controls button { font-size:1rem; padding:12px; min-height:65px; }
#app[data-phase] .market-controls small { font-size:.75rem; line-height:1.4; }
#app[data-phase] .market-secondary { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
#app[data-phase] .market-secondary button { flex:1; font-size:.8125rem; padding:8px; }
#app[data-phase] .market .market-note { font-size:.75rem; color:var(--muted); line-height:1.5; margin-top:12px; }
.formation-tools button small { font-size:.75rem; }
.preparation-panel>h2 { font-size:2rem; margin:8px 0; }
.preparation-panel>.hint { max-width:560px; }
.team .general-banner,.enemy .general-banner { border:0; border-left:2px solid #7ebcab; border-radius:0; background:transparent; padding:5px 10px; margin:12px 0 18px; }
.enemy .general-banner { border-left-color:var(--bad); }
#app[data-phase] .roster { gap:10px; }
#app[data-phase] .unit { border-radius:10px; box-shadow:0 6px 16px #0003; }
#app[data-phase] .unit>.portrait { width:100%; height:auto; max-height:none; aspect-ratio:3/4; }
#app[data-phase] .unit>.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
#app[data-phase] .unit .unit-body { padding:9px; }
#app[data-phase] .unit .name { font-size:.8125rem; min-height:2.5em; }
#app[data-phase] .unit .values { display:grid; grid-template-columns:1fr 1fr; font-size:.75rem; }
#app[data-phase] .unit .slot { display:block; font-size:.75rem; }
.formation-direction-label { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; margin:0 0 8px; }
.formation-direction-label .swipe-label { display:none; }

/* The current action is the visual centre. Team identity is also written out. */
#app .battle-panel { background:radial-gradient(ellipse at 50% 32%,#35454090,transparent 70%),linear-gradient(140deg,#202b2f,#111b1e); border-color:#718078; }
#app .battle-panel>.result { font-size:2.2rem; margin:6px 0 12px; }
#app .battle-panel>.speed-controls { justify-content:flex-end; margin:8px 0 16px; }
#app .battle-panel>.speed-controls button { flex:0 1 auto; min-width:90px; font-size:.8125rem; padding:8px 12px; }
#app .battle-panel .combat-scene { margin:8px 0 18px; }
#app .battle-panel .combat-action-title { max-width:620px; border:1px solid color-mix(in srgb,var(--effect) 35%,transparent); margin:0 auto 18px; padding:11px 14px; }
#app .battle-panel .combat-pair { max-width:600px; grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr); gap:20px; }
#app .battle-panel .combat-single { max-width:245px; }
#app[data-phase] .battle-panel .combat-card .portrait { width:100%; height:250px; aspect-ratio:auto; max-height:none!important; border-radius:12px; }
#app .battle-panel .combat-card .portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
#app .battle-panel .combat-card .combat-side { display:inline-block; padding:4px 8px; border-radius:6px; margin-bottom:8px; background:#1b3933; color:#b4ecda; font-size:.8125rem!important; }
#app .battle-panel .combat-card.side-1 .combat-side { color:#ffbdc5; background:#3d2931; }
#app .battle-panel .combat-role { font-size:.9375rem; margin-bottom:8px; }
#app .battle-panel .combat-card>strong { margin:10px 0 8px; font-size:1.1rem!important; min-height:1.25em; }
#app .battle-panel .effect-numbers { left:8px; right:8px; bottom:9px; }
#app .battle-panel .effect-numbers b { padding:8px 4px; font-size:1rem; background:#101719f2; }
#app .battle-panel .combat-portrait>.general-art { width:100%; height:250px; object-fit:contain; }
#app .battle-panel .event-stat { margin:9px 0; }
#app .battle-panel .event-stat>span { font-size:.8125rem; }
#app .battle-panel .event-bar { height:8px; }
#app .battle-panel .combat-caption { max-width:600px; margin:20px auto; font-size:1rem; line-height:1.5; }
#app .battle-panel .combat-lineups { max-width:620px; padding-top:16px; margin-top:16px; gap:10px; }
#app .battle-panel .combat-lineup { grid-template-columns:60px minmax(0,1fr); }
#app .battle-panel .combat-lineup.side-0>span { color:#b4ecda; }
#app .battle-panel .combat-lineup.side-1>span { color:#ffbdc5; }
#app .battle-panel .combat-mini { padding:4px; gap:5px; border-radius:7px; }
#app .battle-panel .combat-mini .portrait { width:38px; height:44px; }
#app .battle-panel .combat-mini>span b,#app .battle-panel .combat-mini>span small { display:block; font-size:.75rem; }
#app .battle-panel .combat-outcome { min-height:210px; max-width:620px; margin:0 auto; background:#132322; border-color:#60716a; }
#app .battle-panel .progress { height:3px; background:#ffffff12; }
#app .battle-panel .progress i { background:var(--gold); }
#app .battle-panel .replay-actions { margin:14px 0; }
#app .battle-panel .battle-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 18px; padding-bottom:12px; margin-bottom:10px; border-bottom:1px solid var(--edge); }
#app .battle-panel .battle-toolbar .actions,#app .battle-panel .battle-toolbar .speed-controls { margin:0; }
#app .battle-panel .battle-toolbar button { padding:8px 10px; font-size:.8125rem; }
#app .battle-panel:has(#first-pact-lesson) .battle-toolbar .speed-controls { display:none; }
#app .battle-panel #next { margin-top:16px; min-height:52px; }
.final-lineups { margin:20px 0; }
#app .battle-panel .final-lineups .combat-lineups { max-width:none; margin:0; padding:10px 0; border:0; }
.general-selection { padding:32px; }
.general-selection h1 { font:500 clamp(1.8rem,4vw,2.6rem)/1.2 Georgia,serif; margin:10px 0; }
.general-option { background:linear-gradient(155deg,#2d3e3c,#152022); border-radius:16px; }
.general-option>.general-art { width:110px; height:110px; }
footer { padding:16px 0 6px; margin-top:24px; border-color:#ffffff14; }

@media(min-width:1120px) {
  .arena-layout { grid-template-columns:minmax(0,1fr) 280px; }
  .arena-disclosure .play-layout { grid-template-columns:1fr; }
}
@media(max-width:1119px) and (min-width:641px) {
  .arena-rail .tournament-members { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .arena-rail .encounter-duel { grid-template-columns:1fr auto 1fr; }
  .arena-rail .encounter-versus { display:block; }
}
@media(max-width:640px) {
  .wrap { padding:12px max(12px,env(safe-area-inset-right)) 18px max(12px,env(safe-area-inset-left)); }
  header { padding-bottom:12px; }
  .brand { font-size:1.1rem; letter-spacing:.09em; }
  .brand small { display:none; }
  .sigil { width:32px; height:36px; }
  #export-log { padding:6px 8px; font-size:.75rem; }
  nav { margin:0 0 8px; }
  nav button { font-size:.8125rem; padding:10px 5px; min-height:46px; }
  #app .hud { margin:0 0 14px; padding:9px 0; }
  #app .hud .metric { padding:0 10px; gap:3px; flex-direction:column; align-items:start; }
  #app .hud .metric strong { font-size:1.1rem; }
  #app .hud .metric span { font-size:.75rem; }
  #app .hud .metric:last-child { align-items:end; }
  #app .hud .life-hearts { height:23px; align-items:center; }
  .arena-layout { gap:14px; }
  .panel,#app[data-phase] .market { padding:14px; border-radius:14px; }
  .market-heading { gap:8px; margin-bottom:10px; }
  .market-heading h1 { font-size:1.55rem; }
  .market-swipe { display:block; max-width:68px; text-align:right; line-height:1.4; }
  #app[data-phase] .market .market-status { font-size:.75rem; margin-bottom:12px; }
  #app[data-phase] .market .offers { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(76%,270px); gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:4px; padding:4px 4px 14px; margin:0 -4px 10px; scrollbar-width:thin; scrollbar-color:#819890 #162023; }
  #app[data-phase] .market .offer { scroll-snap-align:start; }
  #app[data-phase] .market .offer>.art { height:220px; }
  #app[data-phase] .market .offer>.body { padding:12px; gap:8px; }
  #app[data-phase] .market .offer strong { font-size:1.125rem; }
  #app[data-phase] .market .offer .effect { font-size:.875rem; min-height:2.8em; }
  #app[data-phase] .market-controls { grid-template-columns:1fr 1.25fr; gap:8px; }
  #app[data-phase] .market-controls button { min-height:72px; padding:10px 6px; font-size:.875rem; }
  #app[data-phase] .market-controls small { font-size:.75rem; }
  #app[data-phase] .market-secondary button { font-size:.8125rem; }
  #app[data-phase] .roster { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:112px; overflow-x:auto; scroll-snap-type:x proximity; gap:9px; padding:4px 3px 12px; margin:0 -3px; scrollbar-width:thin; }
  #app[data-phase] .roster .unit { scroll-snap-align:start; }
  #app[data-phase] .unit .unit-body { padding:8px; }
  .formation-direction-label .swipe-label { display:inline; }
  .preparation-panel>h2 { font-size:1.7rem; }
  #app .battle-panel>.result { font-size:1.8rem; }
  #app .battle-panel>.speed-controls { margin:6px 0 12px; }
  #app .battle-panel .combat-action-title { padding:8px 10px; margin-bottom:14px; gap:6px; }
  #app .battle-panel .combat-action-title strong { font-size:1rem; }
  #app .battle-panel .combat-action-title>span { font-size:.75rem; }
  #app .battle-panel .combat-pair { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:8px; }
  #app[data-phase] .battle-panel .combat-card .portrait { height:clamp(142px,42vw,225px); }
  #app .battle-panel .combat-portrait>.general-art { height:clamp(142px,42vw,225px); }
  #app .battle-panel .combat-single { max-width:180px; }
  #app .battle-panel .combat-side { font-size:.75rem!important; }
  #app .battle-panel .combat-role { font-size:.8125rem!important; min-height:2.6em; }
  #app .battle-panel .combat-card>strong { font-size:.9375rem!important; min-height:2.5em; overflow-wrap:anywhere; }
  #app .battle-panel .effect-numbers { left:4px; right:4px; bottom:6px; }
  #app .battle-panel .effect-numbers b { font-size:.8125rem; padding:6px 2px; }
  #app .battle-panel .event-stat>span { font-size:.75rem; }
  #app .battle-panel .combat-caption { font-size:.875rem; margin:14px auto; }
  #app .battle-panel .combat-lineup { grid-template-columns:44px minmax(0,1fr); gap:5px; }
  #app .battle-panel .combat-lineup>span { font-size:.75rem; }
  #app .battle-panel .combat-minis { gap:4px; }
  #app .battle-panel .combat-mini { flex-direction:column; gap:1px; padding:2px; }
  #app .battle-panel .combat-mini .portrait { width:100%; height:37px; }
  #app .battle-panel .combat-mini>span { display:flex; justify-content:center; flex-wrap:wrap; gap:0 3px; line-height:1.2; }
  #app .battle-panel .combat-mini>span b,#app .battle-panel .combat-mini>span small { font-size:.6875rem; }
  #app .battle-panel .combat-outcome { min-height:170px; }
  .arena-rail .tournament-members { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .arena-rail .tournament-member b { font-size:.6875rem; }
  .general-selection { padding:18px; }
  .general-option>.general-art { width:80px; height:80px; }
}
@media(prefers-reduced-motion:reduce) { button { transition:none; } }

/* General development: one focused choice, quiet persistent progress. */
.specialist-options { grid-template-columns:repeat(2,minmax(0,1fr)); margin:22px 0; }
.classic-generals { border-top:1px solid var(--edge); padding-top:8px; margin-top:18px; }
.talent-selection h1 { font:500 clamp(1.65rem,3vw,2.25rem)/1.15 Georgia,serif; margin:0; }
.talent-hero { display:flex; align-items:center; gap:18px; margin:14px 0; }
.talent-hero>.general-art { width:84px; height:84px; flex-shrink:0; }
.talent-hero p { color:var(--gold); margin:8px 0 0; font-size:.875rem; }
.talent-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0; }
.talent-option { display:flex; flex-direction:column; gap:14px; padding:20px; text-align:left; min-width:0; border:1px solid #8ca49b; border-radius:16px; background:linear-gradient(145deg,#2c403b,#162124); }
.talent-option>strong { font:500 1.5rem/1.2 Georgia,serif; color:var(--gold); }
.talent-option>span { font-size:.9375rem; line-height:1.5; }
.talent-option>small { font-size:.75rem; color:var(--muted); }
.talent-option>p { font-size:.875rem; line-height:1.5; margin:0; color:#d8e9e0; }
.talent-option>b { margin-top:auto; padding-top:12px; border-top:1px solid var(--edge); font-size:.875rem; color:var(--gold); }
.talent-targets { display:flex; gap:7px; flex-wrap:wrap; }
.talent-targets>span { display:block; width:calc(33.333% - 5px); max-width:96px; min-width:55px; }
.talent-targets .portrait { width:100%; aspect-ratio:3/4; border:1px solid #849b93; border-radius:8px; }
.talent-targets small { display:block; font-size:.6875rem; line-height:1.3; padding-top:5px; overflow-wrap:anywhere; }
.talent-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.talent-chips>span { display:inline-block; border:1px solid #738b80; padding:3px 6px; border-radius:5px; color:var(--gold); font-size:.6875rem; }
.talent-intro,.talent-confirm-effect { padding:14px; border:1px solid #657c71; border-radius:10px; background:#233630; margin:14px 0; }
.talent-intro p { font-size:.875rem; }
.mastery-panel { display:grid; gap:8px; padding:16px; border:1px solid var(--edge); border-radius:14px; background:#172325; }
.mastery-panel>strong { font-size:.9375rem; }
.mastery-panel>span:not(.eyebrow),.mastery-panel>p { font-size:.8125rem; line-height:1.5; color:var(--muted); margin:0; }
.mastery-panel>button { font-size:.8125rem; margin-top:3px; }
.mastery-hero { display:flex; gap:15px; align-items:center; margin:18px 0; }
.mastery-hero>.general-art { width:80px; height:80px; }
.mastery-hero>div { display:grid; gap:5px; }
.mastery-hero span { font-size:.875rem; color:var(--gold); }
.mastery-hero small { font-size:.75rem; color:var(--muted); }
.general-mastered .general-art { border:2px solid var(--gold); border-radius:50%; box-shadow:0 0 0 3px #638573,0 0 15px #e8c58c22; }
.mastery-quest { padding:14px; margin:12px 0; border:1px solid var(--edge); border-radius:10px; background:#1b2829; }
.mastery-quest.active { border-color:#8dba9e; }
.mastery-quest h3 { margin-top:6px; }
.mastery-quest p { font-size:.875rem; }
.mastery-quest>small { display:block; color:var(--gold); font-size:.75rem; margin-top:8px; }
.mastery-story { padding:18px; margin:16px 0; border-left:2px solid var(--gold); background:#2b3028; }
.mastery-story p { font:400 1rem/1.65 Georgia,serif; }
@media(max-width:640px) {
 .talent-hero { gap:12px; }
 .talent-hero>.general-art { width:60px; height:60px; }
 .talent-options { grid-template-columns:1fr; gap:12px; margin:18px 0; }
 .talent-option { padding:16px; gap:10px; }
 .talent-targets { flex-wrap:nowrap; }
 .talent-targets>span { min-width:0; flex:1; max-width:76px; }
 .specialist-options .general-option { padding:14px 8px; }
}

/* Four generals retain a compact two-column choice on small screens. */
.mastery-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:640px) { .mastery-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Branch previews stay within the two current choice cards. */
.talent-future{display:grid;gap:.3rem;padding:.65rem .75rem;border:1px solid #d9b46b40;border-radius:.65rem;background:#d9b46b0a;text-align:left}
.talent-future small{color:var(--muted,#b5c2c3)}
.talent-future>span{font-weight:600;color:var(--gold,#d9b46b)}
.talent-future-detail{padding:.75rem 1rem;border:1px solid #d9b46b40;border-radius:.75rem;margin:1rem 0}
.talent-tree-preview{padding:.6rem 0}.talent-tree-preview summary{cursor:pointer;line-height:1.5}