/* The founding chronicle. Live world, short decisions, a quiet place for details. */
#shell .sh-live-settlement { position:relative; height:180px; min-height:140px; flex-shrink:0; overflow:hidden; border-radius:16px; border:1px solid var(--world-line); }
#shell #sh-campaign-world { width:100%; height:100%; margin:0; border:0; border-radius:0; pointer-events:none; }
#shell .sh-live-caption { position:absolute; inset:auto 0 0; display:flex; align-items:center; gap:7px; padding:24px 14px 12px; background:linear-gradient(transparent,#14281feb); font-size:12px; color:#f5ead6; pointer-events:none; }
#shell .sh-live-caption .mx-ic { width:18px; height:18px; }
#shell .sh-era-browser { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
#shell .sh-era-browser label { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#d4ddcd; }
#shell .sh-era-browser select { grid-column:1/-1; width:100%; min-width:0; height:48px; min-height:48px; padding:8px 12px; color:#f4eddd; background:#2b4436; border:1px solid var(--world-line); border-radius:10px; font:inherit; font-size:16px; }
#shell .sh-era-browser > span { font-size:12px; color:#d2c19a; }
#shell .sh-levels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
#shell .sh-level { display:flex; align-items:center; justify-content:center; gap:5px; flex-direction:column; height:54px; min-width:0; padding:5px; border:1px solid var(--world-line); background:#304939; color:#eee4cf; border-radius:10px; cursor:pointer; font:inherit; font-weight:600; }
#shell .sh-level .mx-ic { width:12px; height:12px; opacity:.75; }
#shell .sh-level[aria-pressed="true"] { border-color:#e8c88b; background:#c4a96b; color:#21362b; }
#shell .sh-level.is-complete:not([aria-pressed="true"]) { background:#41664a; }
#shell .sh-level:disabled { opacity:1; color:#aebda8; background:#253a2e; cursor:default; }
#shell .sh-era-note { font-size:12px; line-height:1.5; margin:0; color:#becbb6; }
#shell .sh-story-card { display:flex; flex-direction:column; gap:10px; padding:18px; }
#shell .sh-story-card h2 { margin:0; font:500 clamp(24px,5vw,32px) Georgia,serif; color:#f0e6ce; }
#shell .sh-story-card p { margin:0; font-size:14px; line-height:1.55; }
#shell .sh-story-card .sh-objective { display:flex; gap:8px; align-items:flex-start; color:#e9cb8b; }
#shell .sh-objective .mx-ic { flex-shrink:0; width:18px; height:18px; margin-top:2px; }
#shell #sh-march-text { color:#bec9b6; font-size:12px; line-height:1.5; }
#shell .sh-story-prologue p { line-height:1.7; color:#dddcca; }
#shell .sh-story-ages { display:grid; gap:16px; padding-inline-start:24px; }
#shell .sh-story-ages b,#shell .sh-story-ages small { display:block; }
#shell .sh-story-ages small { margin-top:5px; color:#b9c5b3; line-height:1.5; }
#shell .sh-creator-tools { margin-top:20px; border-top:1px solid var(--world-line); padding-top:8px; }
#shell .sh-creator-tools summary { min-height:44px; align-content:center; cursor:pointer; }
#shell .sh-creator-tools > .mx-btn { width:100%; margin-top:8px; text-decoration:none; min-height:44px; }
#shell .sh-house-quick { display:flex; flex-direction:column; gap:16px; }
#shell .sh-house-quick label { display:flex; flex-direction:column; gap:8px; font-size:14px; }
#shell .sh-house-quick select { min-height:48px; padding:10px 12px; color:#f1ead9; background:#2e4a3a; font:inherit; border:1px solid var(--world-line); border-radius:10px; }
#shell .sh-house-quick summary { min-height:44px; align-content:center; cursor:pointer; }
#shell .mx-ic:has(use[href="#mx-gold"]) { color:#e3b64f; }
#shell .mx-ic:has(use[href="#mx-fire"]) { color:#dfa46a; }
#shell .mx-ic:has(use[href="#mx-sell"]) { color:#c7cfa7; }
#shell .mx-currency[hidden] { display:none!important; }
.mx-btn:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #f1ce87; outline-offset:3px; }
/* Shared chrome: account for both portrait and landscape device cutouts. */
#shell { --ui-left:max(12px,env(safe-area-inset-left)); --ui-right:max(12px,env(safe-area-inset-right)); --ui-head:calc(76px + env(safe-area-inset-top)); --ui-foot:calc(70px + env(safe-area-inset-bottom)); }
#shell .mx-topbar { min-height:var(--ui-head); grid-template-columns:auto minmax(0,1fr) auto; padding:calc(10px + env(safe-area-inset-top)) var(--ui-right) 12px var(--ui-left); gap:10px; }
#shell .sh-heading { min-width:0; text-align:center; }
#shell .mx-topbar-title { white-space:normal; font-size:clamp(18px,4.8vw,22px); line-height:1.2; }
#shell #sh-era-label { display:block; margin-top:4px; color:#d5ddcb; font-size:12px; line-height:1.3; }
#shell .mx-currency { max-width:114px; padding:7px 9px; font-size:13px; gap:5px; }
#shell .mx-currency output { min-width:0; overflow:hidden; text-overflow:ellipsis; }
#shell .mx-currency .mx-ic { flex:none; width:18px; height:18px; }
#shell.is-lab .mx-topbar-title { color:#edce90; }
#shell .sh-screen { padding:var(--ui-head) var(--ui-right) var(--ui-foot) var(--ui-left); }
#shell .mx-screen-body { padding:12px 0 16px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#819174 transparent; }
#shell .mx-tabbar { width:min(calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)),600px); left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right))/2); }
#shell :is(.mx-btn,.mx-row,summary) { touch-action:manipulation; }
#shell .mx-btn { white-space:normal; line-height:1.3; }
#shell .mx-row-tx { overflow-wrap:anywhere; }
#shell .sh-sheet-body { padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right)); }
#shell .sh-sheet-header { padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right)); }
#shell .sh-fullsheet .mx-modal { max-height:calc(100dvh - env(safe-area-inset-top) - 16px); }
#shell .sh-fullsheet .sh-sheet-body { scrollbar-width:thin; }
#shell .sh-toasts { top:calc(var(--ui-head) + 4px); left:var(--ui-left); right:var(--ui-right); }

/* March keeps the departure action outside the scrolling briefing. */
#shell .sh-march { flex:1; width:min(100%,760px); gap:16px; scroll-padding-block:12px; }
#shell .sh-march-overview, #shell .sh-march-chronicle { display:flex; flex-direction:column; gap:12px; min-width:0; flex:none; }
#shell .sh-chronicle { display:grid; gap:12px; }
#shell .sh-chapter-heading { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:8px; }
#shell .sh-chapter-heading .mx-label { font-size:11px; letter-spacing:.09em; }
#shell .sh-threat { font-size:12px; color:#d2d9c6; }
#shell .sh-story-card { padding:16px; }
#shell .sh-story-card h2 { font-size:clamp(24px,5vw,30px); line-height:1.12; }
#shell .sh-story-card > p { color:#dae0ce; font-size:14px; line-height:1.5; }
#shell .sh-story-card .sh-reward-preview { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:#e9cc8c; font-size:13px; }
#shell .sh-reward-preview .mx-ic { width:16px; height:16px; }
#shell .sh-reward-preview small { margin-left:auto; color:#c4cfb8; font-size:12px; }
#shell .sh-story-card #sh-march-meta { font-size:12px; color:#dfc28a; }
#shell .sh-story-card [hidden] { display:none; }
#shell .sh-briefing { border-top:1px solid var(--world-line); }
#shell .sh-briefing summary { min-height:44px; align-content:center; cursor:pointer; font-size:13px; color:#ebd39d; }
#shell .sh-briefing > :not(summary) { margin:0 0 12px; }
#shell .sh-briefing #sh-march-text { display:block; font-size:13px; color:#cbd5c0; }
#shell .sh-briefing #sh-march-bonus { font-size:13px; color:#d5ddcb; }
#shell .sh-briefing .mx-btn { width:100%; min-height:44px; }
#shell .sh-march-departure { flex:none; width:min(100%,760px); margin:0 auto; padding:10px 0 8px; display:grid; gap:8px; border-top:1px solid var(--world-line); background:#213b2e; box-shadow:0 -8px 20px #213b2e; z-index:2; }
#shell .sh-departure-status { display:flex; align-items:center; gap:7px; min-width:0; font-size:12px; color:#e5d6af; }
#shell .sh-departure-status .mx-ic { width:18px; height:18px; flex:none; }
#shell .sh-departure-status strong { min-width:0; font-weight:600; }
#shell .sh-departure-status > span { margin-left:auto; white-space:nowrap; color:#c6d1bd; }
#shell #sh-march-go { min-height:52px; font-size:16px; }
#shell .sh-journey { flex:none; border:1px solid var(--world-line); background:#1b3228; border-radius:14px; }
#shell .sh-journey summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:72px; padding:12px; cursor:pointer; list-style:none; }
#shell .sh-journey summary::-webkit-details-marker { display:none; }
#shell .sh-journey summary::after { content:'+'; font-size:20px; color:#e8cb8e; }
#shell .sh-journey[open] summary::after { content:'−'; }
#shell .sh-journey summary b { display:block; font-size:14px; font-weight:600; color:#efe4cc; }
#shell .sh-journey summary small { display:block; margin-top:4px; font-size:12px; line-height:1.4; color:#c1ceb6; }
#shell .sh-era-track { display:flex; gap:3px; margin-left:auto; }
#shell .sh-era-track i { width:6px; height:20px; border-radius:4px; background:#425747; }
#shell .sh-era-track .is-done { background:#8da76a; }
#shell .sh-era-track .is-current { background:#e1bf7c; }
#shell .sh-journey-body { padding:0 12px 12px; }
#shell .sh-milestones { display:flex; flex-wrap:wrap; gap:12px; color:#ebd6a5; font-size:13px; }
#shell .sh-milestones span { display:flex; align-items:center; gap:6px; }
#shell .sh-milestones .mx-ic { width:16px; height:16px; }
#shell .sh-journey-body p { font-size:13px; line-height:1.5; color:#d5ddca; }
#shell .sh-journey-body .mx-btn { width:100%; min-height:44px; text-decoration:none; }
#shell .sh-install { margin-top:4px; font-size:15px; min-height:48px; }
#shell .sh-creator-tools { margin-top:8px; }

@media(min-width:1000px) {
 #shell { --ui-left:28px; --ui-right:28px; }
 #shell .sh-march { width:min(100%,1080px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr); align-content:start; gap:24px; padding-top:20px; }
 #shell .sh-live-settlement { height:270px; }
 #shell .sh-march-departure { width:min(100%,1080px); grid-template-columns:1fr minmax(280px,40%); align-items:center; padding:12px 0; }
 #shell .sh-departure-status { font-size:14px; }
 #shell .sh-departure-status > span { margin:0 24px; }
}
@media(max-width:359px) {
 #shell .mx-topbar { gap:6px; }
 #shell .mx-currency { max-width:86px; font-size:12px; padding:7px; }
 #shell .mx-topbar-title { font-size:18px; }
 #shell #sh-era-label { font-size:11px; }
 #shell .sh-live-settlement { height:140px; min-height:140px; }
 #shell .sh-story-card { padding:12px; }
 #shell .sh-era-track { display:none; }
}
@media(orientation:landscape) and (max-height:540px) {
 #shell { --ui-head:calc(64px + env(safe-area-inset-top)); }
 #shell .mx-topbar { padding-block:calc(6px + env(safe-area-inset-top)) 6px; }
 #shell .sh-march { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,1fr); gap:16px; width:100%; align-content:start; }
 #shell .sh-live-settlement { height:160px; min-height:160px; }
 #shell .sh-march-overview .sh-story-card { order:-1; }
 #shell .sh-march-departure { width:100%; grid-template-columns:1fr minmax(220px,40%); align-items:center; padding:6px 0; }
 #shell .sh-departure-status > span { display:none; }
 #shell #sh-march-go { min-height:44px; }
 #shell .sh-fullsheet { padding:8px var(--ui-right) 8px var(--ui-left); }
 #shell .sh-sheet-header { padding-block:10px; }
 #shell .sh-sheet-header h2 { font-size:21px; }
 #shell .sh-more-grid .mx-btn { min-height:68px; }
 #play .mx-mobile-header { padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
 #play .mx-mobile-nav, #play[data-mobile-view="field"] .command-strip { left:max(8px,env(safe-area-inset-left)); }
 #play .field-tools, #play[data-mobile-view="orders"] .command-strip, #play[data-mobile-view="map"] .world-controls, #play[data-mobile-view="log"] .command-desk { right:max(8px,env(safe-area-inset-right)); }
}
@media(prefers-reduced-motion:reduce) { #shell * { scroll-behavior:auto!important; } }
