.app[hidden], #titleScreen[hidden] { display:none !important; }
body.at-title { background:#193334; }
#titleScreen { --menu-cream:#f6e7c4; --menu-gold:#dcb473; position:fixed; inset:0; z-index:100; overflow:auto; color:var(--menu-cream); font-family:Georgia,'Times New Roman',serif; isolation:isolate; background:#193334; }
.title-scene { position:fixed; inset:0; width:100%; height:100%; z-index:-3; pointer-events:none; }
.title-shade { position:fixed; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(90deg,#102a2cf2 0%,#102a2cb8 29%,#102a2c26 56%,transparent 75%),linear-gradient(0deg,#0d252990,transparent 24%); }
.title-layout { min-height:calc(100% - 60px); max-width:1600px; margin:auto; padding:clamp(45px,9vh,100px) clamp(32px,6vw,100px) 45px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
.game-title { width:440px; max-width:100%; text-align:center; margin:0 0 32px; position:relative; animation:title-arrive 900ms both; }
.title-emblem { width:105px; height:58px; margin:0 auto 10px; color:var(--menu-gold); }
.title-emblem svg { width:100%; height:100%; }
.game-title h1 { font-size:clamp(40px,4.5vw,68px); font-weight:normal; line-height:.94; margin:0; letter-spacing:-2px; text-shadow:0 3px 0 #102827,0 6px 24px #0c2025; }
.game-title h1 span { display:block; }
.game-title h1 b { display:block; font-size:1.38em; letter-spacing:4px; font-weight:bold; color:#f6ddb0; }
.title-rule { display:flex; align-items:center; justify-content:center; gap:13px; margin:18px 28px 0; color:var(--menu-gold); }
.title-rule::before,.title-rule::after { content:''; height:1px; width:70px; background:#dcb4736e; }
.title-rule span { font:10px/1.5 system-ui,sans-serif; letter-spacing:3px; white-space:nowrap; }
#menuContent { width:440px; max-width:100%; }
.main-options { display:flex; flex-direction:column; gap:8px; padding:0 28px; }
#titleScreen button, #titleScreen input { font:inherit; }
#titleScreen button { cursor:pointer; }
#titleScreen button:disabled { cursor:default; }
#titleScreen button:focus-visible, #titleScreen input:focus-visible { outline:2px solid #f1cb87; outline-offset:5px; }
.menu-option { display:grid; grid-template-columns:1fr auto; text-align:left; background:transparent; border:1px solid transparent; border-bottom-color:#e6cc9420; border-radius:2px; color:var(--menu-cream); padding:13px 15px; transition:background 160ms,transform 160ms,border-color 160ms; position:relative; }
.menu-option span { font-size:25px; line-height:1.1; }
.menu-option small { font:11px/1.5 system-ui,sans-serif; color:#b9c7b5; margin-top:6px; grid-column:1; }
.menu-option i { grid-column:2; grid-row:1 / 3; align-self:center; font-size:24px; font-style:normal; color:#dfbb7c; opacity:0; transform:translateX(-5px); transition:160ms; }
.menu-option:hover:not(:disabled),.menu-option:focus-visible { background:#b7c29c15; border-color:#c5cfa335; transform:translateX(3px); }
.menu-option:hover i,.menu-option:focus-visible i { opacity:1; transform:none; }
.menu-option:disabled { opacity:.38; }
.menu-option.compact { padding-top:13px; padding-bottom:13px; }
.menu-option.compact span { font-size:23px; }
.menu-save-note { font:11px/1.6 system-ui,sans-serif; color:#bdc8b1; text-align:center; margin:22px 28px 0; }
.title-footer { position:relative; max-width:1600px; margin:auto; padding:0 clamp(32px,6vw,100px) 24px; box-sizing:border-box; display:flex; justify-content:space-between; color:#c4cfb59c; font:10px/1.5 system-ui,sans-serif; letter-spacing:1px; pointer-events:none; }
.title-footer .scene-caption { color:#e4d0a4b5; letter-spacing:2px; }
#menuStatus { width:440px; max-width:100%; min-height:18px; margin:15px 0 0; font:12px/1.5 system-ui,sans-serif; color:#efd097; text-align:center; }
.menu-back { display:block; padding:0; border:0; color:#bccbb4; background:none; font:12px system-ui,sans-serif !important; margin-bottom:28px; }
.menu-back:hover { color:#f1d8a6; }
.menu-eyebrow { font:10px system-ui,sans-serif; letter-spacing:3px; color:var(--menu-gold); }
#menuContent h2 { margin:10px 0 25px; font-size:32px; font-weight:normal; color:var(--menu-cream); }
#titleScreen[data-screen="new"] .title-layout { padding-top:40px; padding-bottom:64px; }
#titleScreen[data-screen="new"] .game-title { width:440px; margin-bottom:0; transform:scale(.65); transform-origin:left center; height:150px; text-align:left; }
#titleScreen[data-screen="new"] .title-emblem,#titleScreen[data-screen="new"] .title-rule { display:none; }
#titleScreen[data-screen="new"] #menuContent { width:900px; }
#titleScreen[data-screen="new"] .title-shade { background:linear-gradient(90deg,#102a2cf5,#102a2ce0 55%,#102a2c40); }
.scenario-picker,.play-style { border:0; margin:0; padding:0; min-width:0; }
.scenario-picker legend,.play-style legend,.name-field { color:#d4dec5; font:12px/1.5 system-ui,sans-serif; margin-bottom:10px; }
.scenario-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.scenario-option { min-width:0; text-align:left; background:#d9d6b90a; border:1px solid #d8d4b53b; border-radius:3px; padding:0 0 15px; color:var(--menu-cream); overflow:hidden; transition:background 150ms,border-color 150ms; }
.scenario-option canvas { width:100%; height:125px; object-fit:cover; display:block; filter:saturate(.75); }
.scenario-option .scenario-name { display:flex; align-items:center; justify-content:space-between; font-size:22px; margin:15px 15px 8px; }
.scenario-option .scenario-name i { font-style:normal; color:var(--menu-gold); visibility:hidden; }
.scenario-option small { display:block; min-height:52px; margin:0 15px 14px; font:12px/1.6 system-ui,sans-serif; color:#becbb7; }
.scenario-season { display:block; margin:0 15px; font:10px/1.5 system-ui,sans-serif; color:#dabd84; letter-spacing:.5px; }
.scenario-option:hover { background:#e5d3a915; border-color:#ddbd7f99; }
.scenario-option[aria-pressed="true"] { background:#e5d3a91c; border-color:#ddb779; box-shadow:0 0 0 1px #ddb77960; }
.scenario-option[aria-pressed="true"] .scenario-name i { visibility:visible; }
.new-game-fields { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:26px 0 14px; }
.name-field { display:block; margin:0; }
.name-field input { display:block; width:100%; box-sizing:border-box; font:16px Georgia,serif !important; border:0; border-bottom:1px solid #c8c9a879; border-radius:0; color:#f9e5bc; background:#e4e7c50d; padding:12px; margin-top:8px; }
.name-field input::placeholder { color:#bdc7b091; }
.play-style label { display:inline-flex; align-items:center; gap:8px; color:#e5dbbc; margin:10px 22px 0 0; font:13px/1.5 system-ui,sans-serif; }
#titleScreen input { accent-color:#dcb473; }
.starting-note,.mode-note,.overwrite-note { font:12px/1.6 system-ui,sans-serif; color:#bdcbb5; margin:9px 0; }
.starting-note { color:#deca9c; }
.overwrite-note { color:#ddc292; font-size:11px; }
.menu-primary { display:flex; align-items:center; justify-content:space-between; gap:25px; width:100%; border:1px solid #e1bd81; border-radius:3px; padding:15px 21px; font-size:20px !important; color:#263d33; background:#dfbf84; box-shadow:0 3px 0 #936d40,0 8px 23px #09232840; margin-top:25px; transition:background 150ms,transform 150ms; }
.menu-primary:hover { background:#f0d7a2; transform:translateY(-1px); }
#newGameForm > .menu-primary { width:310px; max-width:100%; }
.menu-secondary { border:1px solid #b3c0a64d; border-radius:2px; padding:10px 14px; color:#ead7ae; background:none; font:12px system-ui,sans-serif !important; }
.menu-secondary:hover { background:#b3c0a619; }
.menu-settings { max-width:370px; }
.menu-settings .menu-primary { margin-top:0; }
.menu-volume { display:grid; grid-template-columns:1fr auto; gap:9px; margin:20px 0; color:#d2dcc6; font:12px system-ui,sans-serif; }
.menu-volume output { color:#e8c887; font-variant-numeric:tabular-nums; }
.menu-volume input { width:100%; grid-column:1 / -1; cursor:pointer; }
.motion-toggle { display:flex; gap:10px; align-items:center; margin:24px 0; font:12px system-ui,sans-serif; color:#d2dcc6; }
.saved-camp { max-width:380px; }
.saved-camp canvas { width:100%; height:160px; border-radius:2px; }
.saved-camp h3 { font-size:25px; font-weight:normal; margin:18px 0 7px; overflow-wrap:anywhere; }
.saved-camp p,.empty-save { font:13px/1.7 system-ui,sans-serif; color:#cad2bc; }
.menu-enter { animation:panel-arrive 220ms both; }
.departing { pointer-events:none; }
.departing .title-layout { opacity:0; transform:translateY(-8px); transition:opacity 220ms,transform 220ms; }
.game-arrival { animation:game-arrive 450ms both; }
.game-title-control { align-self:center; background:#f1e6cb; color:#375546; border:1px solid #b5b99a; border-radius:3px; padding:7px 9px; cursor:pointer; font:11px system-ui,sans-serif; white-space:nowrap; }
.game-title-control:hover { background:#fff4d8; }
@keyframes title-arrive { from { opacity:0; translate:0 8px; } to { opacity:1; translate:0 0; } }
@keyframes panel-arrive { from { opacity:0; translate:0 6px; } to { opacity:1; translate:0 0; } }
@keyframes game-arrive { from { opacity:0; } to { opacity:1; } }
@media (max-height:760px) and (min-width:701px) { .title-layout { padding-top:32px; padding-bottom:65px; }.game-title { margin-bottom:18px; }.title-emblem { height:40px; }.game-title h1 { font-size:48px; }#titleScreen[data-screen="new"] .game-title { height:110px; }#menuContent h2 { margin-bottom:18px; }.menu-back { margin-bottom:18px; }.scenario-option canvas { height:100px; } }
@media (max-width:1000px) { #titleScreen[data-screen="new"] #menuContent { width:100%; }.scenario-options { gap:12px; }.scenario-option .scenario-name { font-size:19px; margin-left:12px; margin-right:12px; } }
@media (max-width:700px) {
  .title-layout { align-items:center; padding:35px 24px 28px; justify-content:flex-start; }
  .title-shade { background:linear-gradient(180deg,#102a2ce8,#102a2caf 70%,#102a2c65); }
  .game-title { width:360px; margin:12px 0 25px; }.game-title h1 { font-size:49px; }.title-emblem { height:45px; }
  #menuContent { width:360px; }.main-options { padding:0 15px; }.title-footer { padding:0 24px 18px; }.scene-caption { display:none; }
  #titleScreen[data-screen="new"] .title-layout { padding:24px 20px 28px; }#titleScreen[data-screen="new"] .game-title { height:98px; align-self:flex-start; transform:scale(.5); }#titleScreen[data-screen="new"] .title-shade { background:#102a2cde; }
  #menuContent h2 { font-size:28px; }.scenario-options { grid-template-columns:1fr; gap:12px; }
  .scenario-option { display:grid; grid-template-columns:100px 1fr; padding:0 0 8px; column-gap:12px; }.scenario-option canvas { grid-row:1 / 4; height:100%; min-height:118px; width:100px; }.scenario-option .scenario-name { margin:10px 12px 5px 0; font-size:21px; }.scenario-option small { min-height:0; margin:0 12px 8px 0; font-size:11px; }.scenario-season { margin:0 12px 0 0; font-size:10px; }
  .new-game-fields { grid-template-columns:1fr; gap:18px; margin-top:21px; }.play-style label { margin-top:4px; }#newGameForm>.menu-primary { width:100%; }
  .game-title-control { padding:6px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { #titleScreen *, .game-arrival { animation:none !important; transition:none !important; } }
#titleScreen.reduced-motion *, .reduce-menu-motion .game-arrival { animation:none !important; transition:none !important; }

/* A small shelf of four postcards per tier, with one readable park story. */
#titleScreen[data-screen="new"] #menuContent { width:1120px; }
#titleScreen[data-screen="new"] .game-title { height:105px; }
#titleScreen[data-screen="new"] .game-title { transform-origin:left top; }
.difficulty-tabs { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.difficulty-tabs button { border:1px solid #d8d4b53b;background:#102a2c80;color:#e7dab9;border-radius:3px;padding:10px 12px;text-align:left;font-size:18px !important; }
.difficulty-tabs small { display:block;color:#b9c7b5;font:10px/1.6 system-ui,sans-serif; }
.difficulty-tabs button[aria-selected="true"] { border-color:#ddb779;background:#d0af6720;color:#f6ddb0; }
.difficulty-note { font:12px/1.6 system-ui,sans-serif;color:#c6d1ba;min-height:20px;margin:14px 0 22px; }
.scenario-browser { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:26px;align-items:start; }
.scenario-options { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.scenario-option canvas { height:112px;filter:none; }
.scenario-option .scenario-name { font-size:18px;line-height:1.25;margin:12px 12px 6px; }
.scenario-option .scenario-season { min-height:30px;line-height:1.5;margin:0 12px;font-size:10px; }
.scenario-story { border:1px solid #d8d4b53b;background:#102a2caa;border-radius:3px;overflow:hidden; }
#scenarioHero { display:block;width:100%;height:auto;aspect-ratio:560 / 300; }
.scenario-story-body { padding:19px 22px; }
.scenario-story h3 { margin:10px 0 12px;color:#f5ddb0;font-size:28px;font-weight:normal; }
.scenario-story p { font:12px/1.7 system-ui,sans-serif;color:#c9d2bc;margin:10px 0; }
.scenario-story .scenario-challenge { color:#e1c691; }
.scenario-facts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0; }
.scenario-facts span { font:10px/1.5 system-ui,sans-serif;color:#c4cdb5; }
.scenario-facts b { display:block;color:#f0dfb8;font:16px/1.5 Georgia,serif; }
.scenario-goals { border-top:1px solid #d8d4b52b;padding-top:13px;font:12px/1.6 system-ui,sans-serif;color:#cfdbc0; }
.scenario-goals summary { cursor:pointer;color:#e2c38a; }
.scenario-goals ol { padding-left:20px;margin-bottom:0; }
.scenario-goals li { margin:12px 0; }
.scenario-goals small { display:block;color:#bac9b0; }
@media (max-width:1000px) { #titleScreen[data-screen="new"] #menuContent { width:100%; }.scenario-browser { gap:18px; }.scenario-story-body { padding:16px; }.scenario-facts { gap:8px; }.scenario-facts b { font-size:14px; } }
@media (max-width:760px) {
  .scenario-browser { grid-template-columns:1fr; }.difficulty-tabs button { padding:9px 7px;font-size:15px !important; }.difficulty-tabs small { display:none; }
  .scenario-option { display:block;padding:0 0 12px; }.scenario-option canvas { width:100%;height:105px;min-height:0; }.scenario-option .scenario-name { margin:10px 10px 5px;font-size:17px; }.scenario-option .scenario-season { margin:0 10px;font-size:10px; }
  .scenario-story h3 { font-size:25px; }.scenario-facts b { font-size:15px; }
}
@media (min-width:1001px) {
  #titleScreen[data-screen="new"] .title-layout { padding-top:25px; }
  #titleScreen[data-screen="new"] .game-title { height:76px;transform:scale(.48); }
  #titleScreen[data-screen="new"] .menu-back { margin-bottom:14px; }
  #titleScreen[data-screen="new"] h2 { margin:8px 0 16px;font-size:28px; }
  #scenarioHero { height:190px;object-fit:cover; }
  .scenario-story-body { padding:14px 20px; }.scenario-story h3 { font-size:25px;margin:8px 0; }
  .scenario-facts { margin:14px 0; }.scenario-story p { margin:7px 0; }.difficulty-note { margin:10px 0 17px; }
  .new-game-fields { margin-top:20px; }
}