/* App shell (stage S2). Loads after mobile-shell.css. Everything is scoped to html[data-shell="on"], which shell.js sets on phone-width screens;
   on wider screens the shell is hidden and the original page is untouched. The kit pieces (top bar, tabs, modal, rows) come from brand/css/shell-kit.css. */
#shell { display: none; }
html[data-shell="on"] #shell { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; height: 100vh; height: 100dvh; color: var(--mx-text-on-dark); background: transparent; pointer-events: none; }
html[data-shell="on"] #shell .sh-menu { display: flex; flex: 1; min-height: 0; flex-direction: column; background: var(--mx-brand-deep); pointer-events: auto; }
html[data-shell="on"] #shell[data-mode="match"] .sh-menu { display: none; }

/* the match (#play) is shown only on the play route; mobile-shell.css forces it on with !important, so this needs more specificity */
html[data-shell="on"]:not([data-view="match"]) #play { display: none !important; }
html[data-shell="on"][data-view="match"] body { background: #111b1b; }

#shell .sh-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; outline: none; overflow: hidden; }
#shell .mx-screen-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#shell .mx-topbar-title { font-size: var(--mx-text-h3); }
#shell h2 { outline: none; }

/* March home */
#shell .sh-scene { flex: 1; min-height: 140px; position: relative; border-radius: 14px; border: 1px solid var(--edge); overflow: hidden;
  background: linear-gradient(180deg, transparent 55%, rgb(20 40 32 / .75)), url("brand/scenes/river-march-3d-gameplay.webp") center 40% / cover no-repeat; }
#shell .sh-studio-link { display: flex; align-items: center; justify-content: center; min-height: 44px; flex: none; text-decoration: none; }
html[data-map-draft="true"] #play .import-button { display: none; }
#shell .sh-scene-tag { position: absolute; left: 10px; top: 10px; padding: .25rem .5rem; border-radius: 8px; background: color-mix(in srgb, var(--mx-brand-deep) 82%, transparent); color: var(--mx-text-on-dark); }
#shell .sh-card { padding: .875rem 1rem; display: grid; gap: .25rem; flex: none; }
#shell .sh-card h2 { margin: 0; font: var(--mx-weight-strong) var(--mx-text-base)/1.3 var(--mx-font-ui); }
#shell .sh-card p { margin: 0; font-size: var(--mx-text-sm); }
#shell .sh-supply-brief { display: flex; flex: none; gap: .75rem; align-items: center; padding: .75rem .875rem; border-color: color-mix(in srgb, var(--mx-brand-gold) 50%, var(--edge)); }
#shell .sh-supply-emblem { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 10px; color: var(--mx-brand-gold); background: rgb(199 155 91 / .13); }
#shell .sh-supply-brief strong { color: var(--mx-brand-gold); }
#shell .sh-supply-brief p { margin: .2rem 0 0; color: var(--mx-text-on-dark-muted); font-size: var(--mx-text-sm); line-height: 1.35; }
#shell .sh-march #sh-march-go { flex: none; }

/* empty states */
#shell .sh-empty { display: grid; justify-items: center; align-content: center; gap: .625rem; flex: 1; padding: 1.5rem 1.25rem; text-align: center; }
#shell .sh-empty .mx-ic { color: var(--mx-text-on-dark-muted); }
#shell .sh-empty h2 { margin: 0; font: var(--mx-display-weight) var(--mx-text-h3)/1.2 var(--mx-font-display); }
#shell .sh-empty p { margin: 0; max-width: 32ch; color: var(--mx-text-on-dark-muted); font-size: var(--mx-text-sm); line-height: 1.45; }
#shell .mx-need { margin: 0; text-align: center; }

/* layers: modal, toast, loading */
#shell .sh-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#shell .sh-layer > * { pointer-events: auto; }
#shell .sh-notice-ic { display: grid; place-items: center; color: var(--mx-health-danger); }
#shell .mx-modal .mx-btn-lg { flex: none; }
#shell .sh-fullsheet { padding: 0; display: block; }
#shell .sh-fullsheet .mx-modal { height: 100%; max-height: none; max-width: none; overflow: hidden; gap: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(ellipse at 35% 0, #31483b, #172b24 55%, #14241f); }
#shell .sh-sheet-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: calc(.9rem + env(safe-area-inset-top)) clamp(1rem, 5vw, 2rem) .8rem; border-bottom: 1px solid rgb(231 210 164 / .22); background: rgb(20 37 30 / .75); }
#shell .sh-sheet-header > div { min-width: 0; }
#shell .sh-sheet-header > div > span { color: #d8c098; font-size: .68rem; font-weight: 700; letter-spacing: .19em; }
#shell .sh-sheet-header h2 { margin: .25rem 0 0; color: #f8eddb; font: var(--mx-display-weight) clamp(1.3rem, 6vw, 2rem)/1.12 var(--mx-font-display); overflow-wrap: anywhere; }
#shell .sh-sheet-header .sh-sheet-close { display: flex; align-items: center; gap: .35rem; width: auto; height: auto; min-height: 44px; padding: .4rem .65rem; border-radius: 10px; border: 1px solid #68796b; color: #efe3ce; background: #2a4035; box-shadow: none; font: 700 .8rem/1.1 var(--mx-font-ui); }
#shell .sh-sheet-close .mx-ic { width: 1.15rem; height: 1.15rem; }
#shell .sh-sheet-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .8rem; width: min(100%, 580px); margin: 0 auto; padding: 1rem clamp(1rem, 5vw, 2rem) calc(1.25rem + env(safe-area-inset-bottom)); }
#shell .sh-sheet-body > * { flex-shrink: 0; }
#shell .sh-sheet-body .mx-sub { text-align: left; font-size: .96rem; line-height: 1.5; }
#shell .sh-sheet-body > .mx-btn { width: 100%; min-height: 50px; }
#shell .sh-building-art { position: relative; display: grid; place-items: center; min-height: 160px; border: 1px solid rgb(231 210 164 / .18); border-radius: 14px; background: radial-gradient(ellipse at 50% 67%, #486047, #283c31 62%, #22352b); }
#shell .sh-building-art img { display: block; max-width: 100%; height: auto; }
#shell .sh-art-pennant { position: absolute; top: 40%; left: calc(50% + 40px); width: 27px; height: 22px; background: var(--banner-color); clip-path: polygon(0 0, 100% 30%, 0 100%); }
#shell .sh-banner-picker { padding: .8rem; border: 1px solid #556a5b; border-radius: 12px; background: #263c32; }
#shell .sh-banner-picker h3, #shell .sh-banner-picker p { margin: 0 0 .5rem; }
#shell .sh-banner-picker p { color: var(--mx-text-on-dark-muted); font-size: var(--mx-text-sm); }
#shell .sh-banner-picker > div { display: flex; flex-wrap: wrap; gap: .5rem; }
#shell .sh-banner-picker button { min-height: 44px; }
#shell .sh-banner-picker button[aria-pressed="true"] { border-color: #dfbd80; outline: 1px solid #dfbd80; }
#shell .sh-banner-dot { width: .8rem; height: .8rem; display: inline-block; border-radius: 50%; background: var(--banner-color); }
#shell .sh-toasts { position: absolute; left: 12px; right: 12px; top: calc(68px + env(safe-area-inset-top)); z-index: 40; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
#shell:has(.sh-fullsheet) .sh-toasts { z-index: 19; }
#shell[data-mode="match"] .sh-toasts { top: calc(120px + env(safe-area-inset-top)); }
#shell .sh-loading { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; background: var(--mx-brand-deep); pointer-events: auto; transition: opacity var(--mx-dur-slow) var(--mx-ease); }
#shell .sh-loading.is-done { opacity: 0; pointer-events: none; }
#shell .sh-loading img { max-width: 70%; height: auto; }
#shell .sh-load-text { margin: 0; font-size: var(--mx-text-sm); color: var(--mx-text-on-dark-muted); }

/* the Leave button added to the match header (mobile-shell.js owns the rest of that header) */
#play .mx-mobile-header #sh-leave { min-width: 48px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--mx-phone-line); border-radius: 9px; color: var(--mx-phone-cream); background: #3a2b27; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
#play .mx-mobile-header #sh-leave:focus-visible { outline: 3px solid var(--mx-phone-gold); outline-offset: 2px; }

/* settings, save and data, credits (settings.js) */
#shell .sh-set-list { display: grid; gap: .5rem; }
#shell .sh-back { justify-self: start; }
#shell .mx-setting-nav { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; }
#shell .mx-setting-nav:focus-visible { outline: 3px solid var(--mx-brand-gold); outline-offset: 2px; }
#shell .mx-setting small { display: block; margin-top: 2px; font-size: var(--mx-text-sm); color: var(--mx-text-on-dark-muted); font-weight: 400; line-height: 1.25; }
#shell .sh-chev { font-size: 1.5rem; line-height: 1; color: var(--mx-text-on-dark-muted); }
#shell .sh-version { margin: .25rem 0 0; text-align: center; }
#shell .sh-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
#shell .mx-modal .mx-btn-danger { background: color-mix(in srgb, var(--mx-health-danger) 30%, var(--mx-brand-deep)); }
#shell .mx-bigtext { margin: 0; }

/* player settings applied by settings.js */
html[data-motion="reduced"] { --mx-dur-fast: 1ms; --mx-dur-base: 1ms; --mx-dur-slow: 1ms; }
html[data-motion="reduced"] .mx-bubble { animation: none; }
html[data-shell="on"][data-text="large"] { font-size: 112.5%; }

/* village (village.js) */
#shell .sh-village { position: relative; flex: 1; min-height: 260px; border-radius: 14px; border: 1px solid var(--edge); overflow: hidden; background: #0d1c17; touch-action: manipulation; }
#shell .sh-v-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#shell .sh-v-layer { position: absolute; inset: 0; }
#shell .sh-bld { position: absolute; transform: translate(-50%, -82%); display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--mx-text-on-dark); cursor: pointer; touch-action: manipulation; }
#shell .sh-hall { transform: translate(-50%, -62%); }
#shell .sh-bld:focus-visible { outline: 3px solid var(--mx-brand-gold); outline-offset: 2px; }
#shell .sh-bld:active { background: rgb(255 255 255 / .08); }
#shell .sh-chip { margin-bottom: -2px; padding: 0 .5rem; min-height: 22px; display: inline-flex; align-items: center; border-radius: 999px; background: color-mix(in srgb, var(--mx-brand-deep) 88%, transparent); border: 1px solid var(--edge); font-size: var(--mx-text-xs); font-weight: var(--mx-weight-strong); white-space: nowrap; pointer-events: none; }
#shell .sh-v-layer .mx-plot { z-index: 1; min-width: 44px; min-height: 44px; }
#shell .sh-v-layer .sh-bld[data-v="plot"] { z-index: 2; }
#shell .sh-v-layer .mx-bubble { z-index: 3; }
#shell .sh-collect-all { position: absolute; right: 10px; top: 10px; z-index: 4; background: color-mix(in srgb, var(--mx-brand-deep) 86%, transparent); }
#shell .sh-vinfo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem .875rem; flex: none; }
#shell .sh-vinfo-tx { min-width: 0; display: grid; gap: 2px; }
#shell .sh-vinfo-tx small { font-size: var(--mx-text-sm); color: var(--mx-text-on-dark-muted); line-height: 1.25; }
#shell #sh-village-info { display: grid; flex: none; gap: .5rem; }
#shell .sh-v-onboarding { display: grid; gap: .625rem; padding: .75rem .875rem; border-color: color-mix(in srgb, var(--mx-brand-gold) 48%, var(--edge)); background: linear-gradient(115deg, rgb(199 155 91 / .12), transparent 75%), var(--mx-brand-deep); }
#shell .sh-v-onboarding .sh-vinfo-tx b { color: var(--mx-brand-gold); }
#shell .sh-v-onboarding-actions { display: grid; gap: .45rem; }
#shell .sh-v-onboarding-actions .mx-btn { width: 100%; min-height: 44px; justify-content: center; text-decoration: none; }
#shell .sh-building-list { min-height: 44px; justify-content: center; }
#shell .mx-row.is-short .mx-row-tx small { color: #ff9a85; }
#shell button.mx-row { color: inherit; }
#shell .mx-modal .mx-btn .mx-cost { margin-left: .25rem; }

/* S5: tasks, results, Ascend, Hold records */
#shell .sh-daily { flex: none; }
#shell .sh-bonus { display: grid; gap: .5rem; padding: .75rem; }
#shell .sh-bonus small { font-size: var(--mx-text-sm); color: var(--mx-text-on-dark-muted); }
#shell .sh-sets { display: flex; gap: .375rem; }
#shell .sh-set { flex: 1; min-height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--edge); background: var(--mx-health-track); font-size: var(--mx-text-xs); font-weight: var(--mx-weight-strong); color: var(--mx-text-on-dark-muted); }
#shell .sh-set.is-done { background: var(--mx-brand-gold); border-color: transparent; color: var(--mx-brand-deep); }
#shell .sh-lists { display: grid; gap: .25rem; padding: .75rem 1rem; flex: none; }
#shell .sh-lists b { font-size: var(--mx-text-sm); }
#shell .sh-lists small { font-size: var(--mx-text-sm); color: var(--mx-text-on-dark-muted); line-height: 1.3; margin-bottom: .375rem; }
#shell .sh-unlock { display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem; font-size: var(--mx-text-sm); }
#shell .sh-unlock .mx-ic { color: var(--mx-interact-valid); flex: none; }
#shell .sh-record { padding: .75rem; flex: none; }
#shell .mx-modal .mx-rows { margin: 0; }
#shell .mx-modal .mx-seg { align-self: center; }
#shell .mx-modal .mx-stars { margin: 0; }

/* S6: Customize, Collection, Market (cosmetics.js) */
#shell .sh-village-short { flex: none; height: min(44vh, 320px); min-height: 220px; }
#shell .sh-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
#shell .sh-item { width: 100%; min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: .5rem .25rem; border-radius: 12px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--mx-brand-pine) 62%, transparent); color: inherit; font: inherit; text-align: center; cursor: pointer; touch-action: manipulation; }
#shell .sh-item b { font-size: .8125rem; line-height: 1.15; }
#shell .sh-item:focus-visible { outline: 3px solid var(--mx-brand-gold); outline-offset: 2px; }
#shell .sh-item.is-worn { border-color: var(--mx-interact-valid); }
#shell .sh-item.is-unknown { opacity: .75; border-style: dashed; }
#shell .sh-item.is-unknown .sh-thumb { filter: brightness(0) opacity(.5); }
#shell .sh-thumb { width: 56px; height: 56px; object-fit: contain; flex: none; }
#shell .sh-preview { display: grid; place-items: center; }
#shell .sh-preview .sh-thumb { width: 96px; height: 96px; }
#shell .sh-bundle { display: flex; gap: .5rem; justify-content: space-around; }
#shell .sh-bundle-item { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
#shell .sh-bundle-item small { font-size: var(--mx-text-xs); color: var(--mx-text-on-dark-muted); line-height: 1.1; }
#shell .sh-sticky { position: sticky; bottom: 0; z-index: 3; display: grid; place-items: center; padding: .5rem 0 .25rem; margin-top: auto; background: linear-gradient(transparent, var(--mx-brand-deep) 45%); }
#shell .sh-sticky .mx-seg { margin-top: 0; }
#shell .mx-row .sh-thumb { width: 32px; height: 32px; }
#shell .mx-plot.is-filled::before { opacity: .22; }
#shell .mx-plot.is-filled::after { opacity: 0; }
#shell .sh-custom { gap: .5rem; }