/* Opening and ending are self-contained scenes; game state remains in the engine. */
.start-screen #start-content { max-width: 1240px; }
.story-welcome { --story-dark: #183b42; --story-teal: #327a70; --story-gold: #c89d4d; width: 100%; color: var(--story-dark); }
.story-welcome-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(360px, .93fr); align-items: center; gap: clamp(22px, 4vw, 64px); overflow: hidden; padding: clamp(24px, 4vw, 55px); border: 1px solid #b8c9b6; border-radius: 28px; background: linear-gradient(145deg, #fffdf3 0%, #f0f4e9 58%, #dceae2 100%); box-shadow: 0 24px 75px #314f4030, 0 2px 0 #ffffff inset; isolation: isolate; }
.story-welcome-hero::after { content: ''; position: absolute; width: 390px; height: 390px; right: -170px; top: -220px; border: 1px solid #9ebbaa; border-radius: 50%; box-shadow: 0 0 0 42px #e8efe350, 0 0 0 86px #ddebdc54; pointer-events: none; z-index: -1; }
.story-welcome-copy { min-width: 0; }
.story-brand { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-bottom: clamp(28px, 4vw, 56px); color: #385f55; font-size: 17px; font-weight: 800; letter-spacing: .05em; text-decoration: none; }
.story-brand-sign { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: #317b6e; color: #fff9e9; border-radius: 12px; font-size: 24px; box-shadow: 3px 4px 0 #9dbfac; }
.story-brand small { display: block; margin-top: 2px; color: #68837b; font-size: 10px; letter-spacing: .08em; }
.story-overline { color: #967a40; font-size: 11px; font-weight: 800; letter-spacing: .2em; line-height: 1.3; }
.story-welcome h1 { margin: 14px 0 16px; font-size: clamp(34px, 4.35vw, 64px); line-height: 1.17; font-weight: 850; letter-spacing: -.04em; text-wrap: balance; }
.story-welcome h1 em { color: #297267; font-style: normal; }
.story-lead { max-width: 42em; color: #3b5b58; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.8; }
.story-opening-ledger { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.story-opening-ledger > span { display: grid; gap: 4px; padding: 11px 14px; border: 1px solid #c6d7c9; border-radius: 12px; background: #ffffffb5; box-shadow: 0 2px 0 #fff inset; }
.story-opening-ledger small { color: #617b75; font-size: 11px; }
.story-opening-ledger strong { font-size: clamp(14px, 1.25vw, 17px); font-variant-numeric: tabular-nums; }
.story-illustration { align-self: center; min-width: 0; }
.story-illustration-svg { display: block; width: 100%; max-height: 420px; filter: drop-shadow(0 18px 13px #4d6d4e25); }
.story-illustration-captions { display: flex; justify-content: space-between; gap: 8px; margin-top: -4px; color: #3e6d62; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.story-route-line { animation: story-route 8s linear infinite; }
.story-illustration-order { transform-origin: 110px 210px; animation: story-order 3.2s ease-in-out infinite; }
.story-illustration-cash { transform-origin: 507px 233px; animation: story-cash 3.2s ease-in-out infinite; }
@keyframes story-route { to { stroke-dashoffset: -72; } }
@keyframes story-order { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes story-cash { 0%, 100% { transform: scale(1); } 55% { transform: scale(1.035); } }
.story-pick { margin-top: clamp(22px, 3vw, 34px); }
.story-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 17px; }
.story-section-heading h2 { margin-top: 4px; font-size: clamp(23px, 2vw, 31px); line-height: 1.3; }
.story-step { display: inline-grid; place-items: center; width: 45px; height: 45px; flex: none; border-radius: 12px; background: #2d756b; color: white; font-size: 15px; font-weight: 800; box-shadow: 4px 4px 0 #c9ded1; }
.story-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.story-mode-grid .story-mode-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; width: 100%; min-width: 0; min-height: 115px; padding: 14px 20px; border: 2px solid #cbd8d1; border-radius: 16px; background: #fffef9; color: #284b48; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.story-mode-grid .story-mode-card:hover:not(:disabled) { transform: translateY(-3px); border-color: #7aaa9a; box-shadow: 0 9px 20px #38544821; }
.story-mode-grid .story-mode-card[aria-pressed='true'] { border-color: #24796d; background: #e8f2e9; box-shadow: inset 0 0 0 2px #fff, 0 8px 20px #316d6022; }
.story-mode-length { display: flex; align-items: baseline; gap: 3px; grid-row: span 2; color: #257568; font-variant-numeric: tabular-nums; }
.story-mode-length strong { font-size: clamp(38px, 3.9vw, 52px); line-height: .95; letter-spacing: -.06em; }
.story-mode-length small { font-size: 16px; font-weight: 800; }
.story-mode-name { align-self: end; font-size: clamp(13px, 1.2vw, 17px); font-weight: 800; }
.story-mode-lead { align-self: start; color: #5d7770; font-size: 11px; }
.story-mode-summary { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; column-gap: 18px; row-gap: 4px; margin-top: 11px; padding: 14px 18px; border-left: 5px solid #d1ae63; border-radius: 4px 12px 12px 4px; background: #f7f1dd; color: #3b5148; font-size: 13px; }
.story-mode-summary strong { color: #1f5048; }
.story-mode-summary small { grid-column: 2; color: #66726b; font-size: 11px; }
.story-scenario-intro { margin: -5px 0 17px 58px; color: #546b67; font-size: 13px; line-height: 1.7; }
.story-scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.story-scenario-grid .story-scenario-card, .start-screen .story-scenario-grid .story-scenario-card { display: flex; flex-direction: column; width: auto; min-width: 0; min-height: 282px; margin: 0; padding: 22px; border: 1px solid #d0dcd1; border-top: 5px solid #70a694; border-radius: 15px; background: #fffefa; box-shadow: 0 5px 20px #36534812; }
.story-scenario-grid .story-scenario-card:nth-child(2) { border-top-color: #788bb6; }
.story-scenario-grid .story-scenario-card:nth-child(3) { border-top-color: #c7a568; }
.story-scenario-number { color: #52776c; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.story-scenario-card h3 { margin: 9px 0 7px; font-size: clamp(18px, 1.65vw, 23px); line-height: 1.35; }
.story-scenario-card p { color: #536a66; font-size: 13px; line-height: 1.7; }
.story-scenario-growth { display: grid; gap: 3px; margin: auto 0 14px; padding: 11px 0 0; border-top: 1px solid #e0e7df; }
.story-scenario-growth small { color: #6b7d73; font-size: 10px; }
.story-scenario-growth strong { color: #315d57; font-size: 12px; }
.story-scenario-card .primary-button { display: flex; align-items: center; justify-content: space-between; margin-top: 0; min-height: 45px; border-radius: 9px; }
.story-start-note { margin: 12px 0 0; color: #687a73; font-size: 12px; }

.paper-dialog:has(.story-welcome) { max-width: min(1100px, calc(100vw - 24px)); }
.paper-dialog:has(.story-welcome) .story-welcome-hero { padding: 25px; }
.paper-dialog:has(.story-welcome) .story-illustration { display: none; }
.paper-dialog:has(.story-welcome) .story-welcome-hero { grid-template-columns: 1fr; }
.paper-dialog:has(.story-welcome) .story-brand { margin-bottom: 16px; }
.paper-dialog:has(.story-welcome) .story-welcome h1 { font-size: clamp(27px, 4vw, 42px); }

.story-opening-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 50px); width: min(1080px, 100%); margin: auto; padding: clamp(20px, 4vw, 45px); border: 1px solid #bdd3c4; border-radius: 22px; background: linear-gradient(150deg, #fffdf4, #e7f2e8); box-shadow: 0 20px 55px #213f4030; color: #173b43; }
.story-opening-art { min-width: 0; }
.story-opening-art .story-illustration-svg { max-height: 330px; }
.story-opening-copy h2 { margin: 11px 0; font-size: clamp(29px, 3.5vw, 48px); line-height: 1.27; }
.story-opening-copy > p:not(.story-overline) { color: #44645b; font-size: 14px; line-height: 1.75; }
.story-opening-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.story-opening-copy dl div { display: grid; gap: 4px; padding: 12px; border: 1px solid #cadbd0; border-radius: 11px; background: #fffef7; }
.story-opening-copy dl div:last-child { grid-column: 1 / -1; }
.story-opening-copy dt { color: #5c776c; font-size: 11px; }
.story-opening-copy dd { margin: 0; color: #1f665c; font-size: clamp(20px, 2.1vw, 29px); font-weight: 800; font-variant-numeric: tabular-nums; }
.story-opening-copy .story-opening-next { padding-left: 12px; border-left: 4px solid #c6a058; color: #3d645a; font-weight: 700; }

.paper-dialog:has(.story-finale) { max-width: min(900px, calc(100vw - 24px)); }
.story-finale { color: #173b43; }
.story-finale-hero { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px 20px; align-items: center; padding: clamp(17px, 3vw, 31px); border-radius: 20px; background: linear-gradient(135deg, #edf3e9, #f9f4dd 72%, #e8e8d5); border: 1px solid #c5d2be; }
.story-finale[data-outcome='bankrupt'] .story-finale-hero { background: linear-gradient(135deg, #e8eeeb, #f4e7dd 75%); border-color: #cfb4a9; }
.story-finale-mark svg { display: block; width: 100%; filter: drop-shadow(0 7px 6px #59694c29); }
.story-finale-headline { min-width: 0; }
.story-finale-headline h3 { margin: 5px 0 6px; font-size: clamp(23px, 3.2vw, 36px); line-height: 1.3; letter-spacing: -.03em; }
.story-finale-headline > p:last-child { color: #536e63; font-size: 13px; line-height: 1.6; }
.story-finale-cash { display: flex; flex-wrap: wrap; gap: 5px 20px; align-items: baseline; grid-column: 1 / -1; padding-top: 13px; border-top: 1px solid #adc4ae; }
.story-finale-cash span { color: #5e756a; font-size: 12px; font-weight: 800; }
.story-finale-cash strong { color: #286f61; font-size: clamp(31px, 5vw, 54px); line-height: 1.05; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.story-finale[data-outcome='bankrupt'] .story-finale-cash strong { color: #a64b3b; }
.story-finale-cash small { color: #64766d; font-size: 12px; }
.story-finale-story { display: flex; align-items: center; gap: 16px; margin: 18px 0; }
.story-finale-story .story-step { width: 38px; height: 38px; flex: none; font-size: 11px; }
.story-finale-story p { color: #365651; font-size: 14px; line-height: 1.7; }
.story-finale-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.story-finale-highlights > div { display: grid; gap: 4px; min-width: 0; padding: 14px; border: 1px solid #d4ded2; border-radius: 12px; background: #fffefa; }
.story-finale-highlights small { color: #607a6b; font-size: 11px; }
.story-finale-highlights strong { overflow-wrap: anywhere; color: #255d56; font-size: clamp(19px, 2.8vw, 27px); font-variant-numeric: tabular-nums; }
.story-finale-highlights span { color: #667a70; font-size: 11px; }
.story-finale-ledger { margin: 18px 0 0; padding: 0; border: 1px solid #d1ded2; border-radius: 12px; background: #fbfdf9; overflow: hidden; }
.story-finale-ledger summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #e9f1e7; font-size: 15px; }
.story-finale-ledger summary span { color: #688076; font-size: 11px; font-weight: 500; }
.story-finale-ledger dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 20px; margin: 0; padding: 2px 18px 8px; font-size: 12px; }
.story-finale-ledger dt, .story-finale-ledger dd { margin: 0; padding: 8px 0; border-bottom: 1px solid #e5ebe3; }
.story-finale-ledger dd { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.story-finale-note { margin: 11px 0 18px; color: #698076; font-size: 11px; line-height: 1.7; }
.story-finale-actions { position: sticky; bottom: -30px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0 0; border-top: 1px solid #d9e3d9; background: var(--card); box-shadow: 0 -10px 14px var(--card); }
.story-finale-actions span { color: #5a756b; font-size: 12px; line-height: 1.6; }
.story-finale-actions button { flex: none; min-height: 46px; }

@media (max-width: 950px) {
  .story-welcome-hero { grid-template-columns: 1fr 1fr; gap: 12px; }
  .story-illustration-captions { display: none; }
  .story-mode-grid .story-mode-card { padding: 13px; }
  .story-scenario-grid .story-scenario-card { padding: 17px; }
}
@media (max-width: 720px) {
  .start-screen { padding: 12px; }
  .story-welcome-hero { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 18px; }
  .story-brand { margin-bottom: 20px; }
  .story-welcome h1 { font-size: clamp(33px, 8vw, 49px); }
  .story-illustration { max-width: 420px; margin: -18px auto -35px; opacity: .85; }
  .story-illustration-svg { max-height: 255px; }
  .story-opening-ledger > span { flex: 1 1 130px; }
  .story-mode-grid, .story-scenario-grid { grid-template-columns: 1fr; }
  .story-mode-grid .story-mode-card { min-height: 81px; grid-template-columns: 69px 1fr; }
  .story-mode-length strong { font-size: 39px; }
  .story-mode-summary { grid-template-columns: 1fr; }
  .story-mode-summary small { grid-column: 1; }
  .story-scenario-intro { margin-left: 0; }
  .story-scenario-grid .story-scenario-card, .start-screen .story-scenario-grid .story-scenario-card { min-height: 0; }
  .story-scenario-growth { margin-top: 15px; }
  .story-finale-hero { grid-template-columns: 67px minmax(0, 1fr); gap: 11px; }
  .story-opening-scene { grid-template-columns: 1fr; padding: 20px; }
  .story-opening-art { max-width: 390px; margin: -12px auto 5px; }
  .story-opening-art .story-illustration-svg { max-height: 185px; }
  .story-opening-copy dl { margin: 15px 0; }
  .story-finale-highlights { grid-template-columns: 1fr; }
  .story-finale-highlights > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 10px 12px; }
  .story-finale-highlights > div span { grid-column: 1 / -1; }
  .story-finale-actions { display: grid; bottom: -22px; gap: 8px; }
  .story-finale-actions button { width: 100%; }
}
@media (max-width: 390px) {
  .story-welcome-hero { padding: 19px 16px; }
  .story-illustration { max-width: 320px; max-height: 150px; overflow: hidden; margin: -8px auto -7px; }
  .story-illustration-svg { max-height: 170px; }
  .story-opening-ledger { margin-top: 19px; }
  .story-opening-ledger > span { flex-basis: 110px; }
  .story-opening-ledger > span:last-child { flex-basis: 100%; }
  .story-welcome h1 { font-size: clamp(31px, 8vw, 39px); }
  .story-finale-ledger dl { grid-template-columns: 1fr; gap: 0; }
  .story-finale-ledger dt { border: 0; padding-bottom: 0; }
  .story-finale-ledger dd { text-align: left; padding-top: 0; }
}
@media (max-height: 500px) {
  .story-illustration { display: none; }
  .story-opening-art { display: none; }
  .paper-dialog:has(.story-finale) { padding: 0; max-height: 96dvh; }
  .paper-dialog:has(.story-finale) .dialog-header h2 { font-size: 18px; }
  .story-finale-hero { grid-template-columns: 55px minmax(0, 1fr); gap: 5px 13px; padding: 10px 14px; }
  .story-finale-headline h3 { margin: 3px 0; font-size: 21px; }
  .story-finale-headline > p:last-child { font-size: 11px; }
  .story-finale-cash { gap: 4px 12px; padding-top: 7px; }
  .story-finale-cash strong { font-size: 30px; }
  .story-finale-actions { bottom: -12px; padding-top: 7px; }
  .story-finale-actions > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='full']) .story-welcome *,
  html:not([data-motion='full']) .story-opening-scene *,
  html:not([data-motion='full']) .story-finale * { animation: none !important; transition-duration: 0s !important; }
}
html[data-motion='reduced'] .story-welcome *, html[data-motion='reduced'] .story-opening-scene *, html[data-motion='reduced'] .story-finale * { animation: none !important; transition-duration: 0s !important; }