:root {
  color-scheme: dark;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 16px;
  color: #f7f2e6;
  --ink: #111820;
  --panel: #17232d;
  --glass: rgba(17, 24, 32, .95);
  --ivory: #f7f2e6;
  --lime: #d8ff6b;
  --orange: #ffaa73;
  --violet: #b6a3ff;
  --aqua: #71d7d0;
  --muted: #acbac5;
  --line: rgba(209, 225, 236, .16);
  --shadow: 0 10px 32px #060c1745, inset 0 1px 0 #ffffff04;
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--ink); }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff05; color: inherit; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
button:hover { background: #ffffff0d; border-color: #d8ff6b70; }
button:disabled { opacity: .46; cursor: not-allowed; }
button:disabled:hover { background: #ffffff05; border-color: var(--line); }
button:focus-visible, a:focus-visible, canvas:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
button.active, button[aria-pressed=true] { color: var(--lime); border-color: #d8ff6b78; background: #d8ff6b14; }
button.primary { background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 700; }
button.primary:hover { background: #e4ff98; border-color: #e4ff98; }
button.primary:disabled:hover { background: var(--lime); }
[hidden] { display: none !important; }
svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h2 { font-family: var(--display); font-size: 30px; line-height: 1.08; letter-spacing: .005em; font-weight: 700; margin: 6px 0 0; }
#world { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; background: #aabbbf; }
#world:focus-visible { outline-offset: -3px; }
body.building #world { cursor: crosshair; }
.glass { border: 1px solid var(--line); border-radius: 12px; background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.icon-button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 9px; border-color: transparent; background: transparent; }
.icon-button svg { width: 21px; height: 21px; }
.eyebrow { display: inline-block; font-size: 10px; line-height: 1.35; letter-spacing: .15em; font-weight: 700; color: var(--muted); }
kbd { display: inline-block; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; font: 10px 'DM Sans', sans-serif; color: var(--muted); background: #ffffff06; }
.hud { position: absolute; z-index: 6; top: max(16px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); display: flex; align-items: stretch; justify-content: space-between; gap: 20px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 8px; padding: 7px 15px 7px 7px; min-height: 72px; text-align: left; }
.brand-mark { width: 58px; height: 58px; object-fit: contain; flex: none; }
.wordmark { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--display); font-weight: 700; line-height: .87; white-space: nowrap; }
.wordmark > span { font-size: 13px; line-height: 1.2; letter-spacing: .11em; }
.wordmark > b { font-size: 36px; letter-spacing: .025em; font-weight: 800; color: var(--lime); }
.brand-stub { align-self: stretch; display: flex; align-items: center; margin-left: 8px; padding-left: 15px; border-left: 1px dashed #d8ff6b42; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .13em; line-height: 1.5; }
.stats { display: flex; align-items: center; gap: 0; padding: 8px; }
.stat { display: flex; align-items: center; gap: 10px; padding: 0 17px; border-right: 1px solid var(--line); }
.stat small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
.stat strong { font-size: 20px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat-icon { color: var(--lime); }
.stat:nth-child(2) .stat-icon { color: var(--violet); }
.stat:nth-child(3) .stat-icon { color: var(--orange); }
.stat-icon svg { width: 23px; height: 23px; }
.hud-sandbox { margin-inline: 14px; color: var(--lime); font-size: 9px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.hud-sandbox[data-paused=true] { color: var(--orange); }
.hud-actions { display: flex; }
.park-card { max-height: calc(100dvh - 280px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; position: absolute; left: 20px; top: 108px; width: 278px; padding: 12px 18px 18px; }
.park-heading { display: flex; align-items: center; justify-content: space-between; margin-right: -10px; }
.park-heading button { display: grid; place-items: center; padding: 8px; width: 36px; min-height: 36px; border-color: transparent; background: transparent; }
.park-heading button svg { width: 16px; height: 16px; }
.park-card h1 { margin: 0 0 3px; font: 700 28px/1.1 var(--display); letter-spacing: .005em; }
.venue-location { display: block; min-height: 38px; max-width: 100%; padding: 7px 0; border-color: transparent; background: transparent; color: var(--muted); font-size: 11px; text-align: left; line-height: 1.5; }
.venue-location:hover { border-color: transparent; color: var(--lime); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.entrance-summary { display: block; width: 100%; margin: 5px 0 15px; padding: 9px 12px; min-height: 40px; text-align: left; color: var(--aqua); background: #71d7d008; font-size: 12px; }
.entrance-summary::after { content: '↗'; float: right; margin-left: 8px; }
.heliport-summary { display: block; width: 100%; margin: -7px 0 15px; min-height: 40px; padding: 9px 12px; color: var(--ivory); background: #b6a3ff09; border-color: #b6a3ff3d; font-size: 12px; text-align: left; line-height: 1.5; }
.heliport-summary::after { content: '↗'; float: right; margin-left: 7px; color: var(--violet); }
.entrance-summary.busy { color: var(--orange); border-color: #ffaa7366; background: #ffaa730b; }
.park-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.mode-badge { padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; font-size: 8px; letter-spacing: .08em; color: var(--muted); }
.divider, .dialog-divider { border: 0; height: 1px; background: var(--line); margin: 16px 0; }
.profit-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.profit-line > span { color: var(--muted); }
.profit-line strong { color: var(--lime); font-weight: 600; font-variant-numeric: tabular-nums; }
#budget-summary { width: 100%; padding: 10px 0; text-align: left; border: 0; border-radius: 0; background: transparent; font-size: .875rem; }
#budget-summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.finance-card { padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.finance-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.finance-heading h3 { margin: 0; font-size: 1.125rem; }
.finance-heading > span, .finance-units, .finance-note { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.finance-units { margin: 8px 0 16px; }
.finance-ledger { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 12px 16px; font-size: .875rem; line-height: 1.5; }
.finance-ledger dt { color: var(--muted); }
.finance-ledger dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.finance-ledger .finance-total { padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; color: var(--lime); }
.finance-details { border-block: 1px solid var(--line); margin-block: 20px; padding-block: 14px; font-size: .875rem; }
.finance-details summary { cursor: pointer; }
.finance-outlook { padding: 18px; background: #d8ff6b08; border: 1px solid #d8ff6b26; border-radius: 8px; }
.finance-outlook > span { display: block; color: var(--muted); font-size: .875rem; }
.finance-outlook > strong { display: block; margin-top: 6px; font-size: 1.5rem; color: var(--lime); font-variant-numeric: tabular-nums; }
.finance-outlook p { margin: 12px 0 0; font-size: .875rem; line-height: 1.6; }
.lineup-budget-summary { padding: 12px; border-left: 2px solid var(--lime); background: #d8ff6b08; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.lineup-booking-note.loss, .finance-ledger dd.loss, .finance-outlook > strong.loss { color: var(--orange); }
.park-hint { margin: 12px 0 18px; font-size: 12px; line-height: 1.55; color: #d4dde2; }
.goal { border-top: 1px dashed var(--line); padding-top: 14px; }
.goal-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.goal-symbol { color: var(--lime); }
.goal-symbol svg { width: 15px; height: 15px; }
.goal small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
#goal-count { margin-left: auto; color: var(--lime); font-size: 11px; font-variant-numeric: tabular-nums; }
.goal > strong { display: block; font-size: 12px; font-weight: 500; }
progress { display: block; width: 100%; height: 5px; margin: 12px 0 0; border: 0; border-radius: 5px; appearance: none; overflow: hidden; background: #ffffff12; accent-color: var(--lime); }
progress::-webkit-progress-bar { background: #ffffff12; border-radius: 5px; }
progress::-webkit-progress-value { background: var(--lime); border-radius: 5px; transition: width .3s; }
progress::-moz-progress-bar { background: var(--lime); border-radius: 5px; }
.view-controls { position: absolute; right: 20px; top: 108px; display: flex; flex-direction: column; gap: 2px; padding: 5px; }
.view-controls > span { height: 1px; margin: 3px 9px; background: var(--line); }
.view-controls .icon-button:hover { color: var(--lime); }
.build-toolbar { position: absolute; z-index: 5; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; display: flex; gap: 3px; padding: 6px; transform: translateX(-50%); }
.build-toolbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 78px; height: 72px; padding: 8px; border-color: transparent; background: transparent; font-size: 11px; font-weight: 500; }
.build-toolbar button:hover { background: #ffffff09; }
.build-toolbar button.active { border-color: #d8ff6b6e; background: #d8ff6b14; }
.build-toolbar button > span:first-child { color: var(--muted); }
.build-toolbar button.active > span:first-child, .build-toolbar button:hover > span:first-child { color: var(--lime); }
.build-toolbar svg { width: 24px; height: 24px; }
.build-toolbar kbd { position: absolute; top: 5px; right: 6px; padding: 0; border: 0; background: none; font-size: 8px; opacity: .7; }
.bottom-left { position: absolute; left: 20px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.speed-controls { display: flex; align-items: center; gap: 2px; padding: 4px; }
.speed-controls button { min-width: 36px; min-height: 40px; padding: 6px; border-color: transparent; background: transparent; font-size: 12px; }
.speed-controls .icon-button { min-width: 40px; }
.speed-controls .icon-button svg { width: 18px; height: 18px; }
.speed-controls button.active { background: #d8ff6b16; }
.speed-divider { width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
#gates { min-width: 101px; color: var(--orange); font-size: 11px; }
#gates[aria-pressed=true] { color: var(--lime); background: transparent; }
#gates::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 6px 2px 0; border-radius: 50%; background: currentColor; }
.control-hint { padding: 4px 7px; border-radius: 4px; background: #111820b8; color: #e2e9ea; font-size: 9px; line-height: 1.4; }
.minimap { position: absolute; right: 20px; bottom: 20px; width: 190px; padding: 10px; overflow: hidden; }
.map-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 1px 8px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.map-heading > span:last-child { color: var(--ivory); }
#minimap { display: block; width: 100%; height: auto; border-radius: 4px; cursor: crosshair; }
.map-legend { display: flex; justify-content: space-between; gap: 5px; padding-top: 8px; color: var(--muted); font-size: 8px; }
.map-legend span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 1px; background: var(--violet); }
.map-legend span:nth-child(2)::before { background: var(--orange); }
.map-legend span:nth-child(3)::before { background: var(--lime); }
#save-status { display: block; width: calc(100% + 4px); min-height: 30px; margin: 5px -2px -5px; padding: 6px 2px; border-color: transparent; background: transparent; color: var(--muted); font-size: 9px; text-align: center; line-height: 1.4; }
#save-status:hover { color: var(--ivory); }
#save-status::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--muted); }
#save-status[data-state=saved]::before { background: var(--lime); }
#save-status[data-state=saving]::before { background: var(--aqua); animation: save-pulse .8s ease-in-out infinite alternate; }
#save-status[data-state=error] { color: var(--orange); }
#save-status[data-state=error]::before { background: var(--orange); }
.catalog { position: absolute; z-index: 4; left: 20px; top: 108px; width: 340px; max-height: calc(100dvh - 228px); padding: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #52616b transparent; }
.catalog-open .park-card, .building .park-card { display: none; }
.catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.catalog-head h2 { font-size: 27px; }
.catalog-head > .icon-button { margin: -8px -8px 0 0; flex: none; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catalog-item { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0 0 12px; text-align: left; background: #ffffff03; overflow: hidden; }
.catalog-item:hover { background: #d8ff6b08; border-color: var(--lime); }
.item-size { position: absolute; z-index: 1; top: 7px; right: 7px; padding: 3px 5px; border-radius: 3px; background: #111820cc; color: #c8d3da; font-size: 9px; letter-spacing: .06em; }
.item-preview { display: grid; place-items: center; width: 100%; height: 102px; margin-bottom: 11px; overflow: hidden; background: #111820; color: var(--muted); border-bottom: 1px solid #ffffff06; }
.item-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.item-preview > svg { width: 40px; height: 40px; }
.catalog-item > strong { padding-inline: 11px; font-size: 12px; line-height: 1.4; font-weight: 600; }
.item-detail { display: block; padding: 5px 11px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.item-cost { display: block; padding: 8px 11px 0; margin-top: auto; color: var(--lime); font-size: 12px; font-weight: 600; }
.item-budget { display: block; min-height: 14px; padding: 3px 11px 0; color: var(--orange); font-size: 9px; line-height: 1.45; }
.catalog-item[data-affordable=false] .item-cost { color: var(--orange); }
.catalog-note, .sponsor-intro { margin: 14px 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.catalog-group { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font-family: var(--display); font-size: 21px; font-weight: 600; }
.catalog-group span { color: var(--muted); font-size: 14px; }
.catalog-group.essentials { margin-top: 23px; }
.sponsor-intro { margin-top: 0; }
.sponsor-item { border-top-color: #b6a3ff66; }
.decor-intro { margin: -4px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.decor-filters { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 20px; }
.decor-filters button { padding: 7px 11px; border-radius: 20px; font-size: 11px; }
.decor-filters button[aria-pressed=true] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.decor-collection { margin-bottom: 25px; }
.decor-collection[data-art-collection=fire] .catalog-group { color: var(--orange); }
.fire-item { border-top-color: #ffaa7377; }
.item-badge { position: absolute; z-index: 1; top: 8px; left: 7px; padding: 4px 5px; border-radius: 3px; color: #ffd2b5; background: #38241ee8; font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.item-badge.kinetic { color: var(--aqua); background: #152e30e8; }
.catalog-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 15px; border-top: 1px dashed var(--line); }
.catalog-footer p { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.catalog-footer button { font-size: 11px; white-space: nowrap; }
.build-hint { position: absolute; z-index: 5; left: 50%; bottom: 121px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(680px, calc(100% - 440px)); padding: 13px 15px; transform: translateX(-50%); border-color: #d8ff6b52; }
.build-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-right: 8px; }
.build-copy > .eyebrow { color: var(--lime); font-size: 9px; }
#build-label { font-size: 13px; line-height: 1.4; font-weight: 600; }
.build-feedback { color: var(--muted); font-size: 11px; line-height: 1.5; }
.build-hint[data-valid=false] { border-color: #ffaa7377; }
.build-hint[data-valid=false] .build-feedback { color: var(--orange); }
.build-hint button { min-height: 40px; padding: 8px 10px; white-space: nowrap; font-size: 11px; }
.build-hint button kbd { margin-left: 5px; }
.path-palette { display: grid; gap: 10px; }
.path-card { display: grid; grid-template-columns: 78px 1fr; gap: 13px; padding: 10px; text-align: left; overflow: hidden; background: #ffffff03; }
.path-card:hover { border-color: #d8ff6b70; background: #d8ff6b08; }
.path-card-copy { display: flex; flex-direction: column; align-self: center; gap: 4px; }
.path-card-copy > small { color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.path-card-copy > strong { font-size: 13px; font-weight: 600; }
.path-card-copy > span { color: var(--lime); font-size: 10px; line-height: 1.5; }
.path-card-copy i { display: block; color: var(--muted); font-style: normal; font-size: 9px; }
.path-swatch { display: block; width: 78px; height: 74px; border-radius: 7px 16px 7px 7px; border: 3px solid #bcb7a8; box-shadow: inset 0 0 15px #0002, 0 6px 10px #0002; }
.path-swatch[data-surface=concrete] { background: repeating-linear-gradient(0deg, transparent 0 34px, #66675e66 34px 35px), repeating-linear-gradient(90deg, #b2b3ab 0 34px, #7c7c7266 34px 35px); }
.path-swatch[data-surface=stone] { background: repeating-linear-gradient(0deg, transparent 0 16px, #66574566 16px 17px), repeating-linear-gradient(90deg, #c4b092 0 24px, #aa9278 24px 25px, #b9a184 25px 49px, #aa9278 49px 50px); border-color: #d1c4b0; }
.path-swatch[data-surface=boardwalk] { background: repeating-linear-gradient(0deg, #a68058 0 7px, #654a37 7px 9px, #96714e 9px 16px, #6c513c 16px 18px); border-color: #6c513c; }
.path-swatch[data-surface=earth] { background: radial-gradient(ellipse at 30% 40%, #d2ad7255 0 1px, transparent 2px) 0 0 / 7px 9px, radial-gradient(ellipse at 70% 50%, #57473044 0 2px, transparent 3px) 0 0 / 11px 7px, #92744e; border-color: #735d43; }
.path-swatch[data-surface=asphalt] { background: radial-gradient(circle, #a2a89e25 0 .6px, transparent 1px) 0 0 / 4px 5px, #4e575a; border-color: #8b9290; }
.path-swatch[data-surface=led] { background: repeating-linear-gradient(0deg, transparent 0 15px, #31394399 15px 16px), repeating-linear-gradient(90deg, #66707b 0 22px, #3c4554 22px 23px); border-color: #71e7dc; box-shadow: inset 0 0 10px #71e7dc33, 0 0 13px #71e7dc33; }
.path-tips { margin-top: 20px; padding: 15px; border: 1px solid #71d7d025; border-radius: 8px; background: #71d7d005; }
.path-tips h3 { margin: 0 0 8px; font-size: 13px; color: var(--aqua); }
.path-tips p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.build-hint.path-mode { display: grid; grid-template-columns: minmax(0,1fr) auto auto; width: 710px; max-width: calc(100% - 70px); }
.path-mode .build-copy { margin-right: 0; }
.path-mode .build-copy > .eyebrow { display: none; }
.path-tools { grid-column: 1/-1; display: grid; grid-template-columns: minmax(135px,1fr) 120px auto; align-items: end; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.path-tools label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; letter-spacing: .05em; }
.path-tools select { width: 100%; min-width: 0; min-height: 38px; padding: 7px 9px; border-radius: 5px; border: 1px solid var(--line); background: #1b252d; color: var(--ivory); font: inherit; font-size: 11px; letter-spacing: 0; }
.path-tools select:disabled { opacity: .4; }
.path-mode-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 6px; gap: 3px; }
.path-mode-switch button { min-height: 32px; padding: 5px 10px; background: none; border-color: transparent; }
.path-mode-switch button[aria-pressed=true] { background: #d8ff6b18; color: var(--lime); border-color: #d8ff6b38; }
#cancel-build { color: var(--lime); border-color: #d8ff6b45; }
.inspector { position: absolute; z-index: 4; right: 88px; top: 108px; width: 306px; max-height: calc(100dvh - 238px); padding: 18px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.inspector-top { display: flex; align-items: center; justify-content: space-between; margin: -7px -8px 0 0; }
.inspector h2 { margin-bottom: 13px; }
.connection { display: inline-block; padding: 5px 8px; border: 1px solid #71d7d038; border-radius: 4px; color: var(--aqua); font-size: 10px; line-height: 1.5; }
.connection.warning { color: var(--orange); border-color: #ffaa734d; }
.inspector > p { margin: 15px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.inspector dl { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 18px 0; padding: 15px 0; border-block: 1px solid var(--line); font-size: 12px; }
.inspector dt { color: var(--muted); }
.inspector dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.crowd-stat { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; text-align: left; color: inherit; }
.crowd-stat:hover { background: #b6a3ff12; }
#crowd-view[aria-pressed="true"] { background: #d8ff6b18; color: var(--lime); }
.crowd-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; gap: 8px 4px; min-height: 44px; margin-top: 7px; padding: 7px 5px; border-color: transparent; border-radius: 5px; background: none; box-shadow: none; backdrop-filter: none; color: var(--ivory); font-size: 8px; }
.minimap:has(.crowd-legend:not([hidden])) .map-legend { display: none; }
.crowd-legend b { width: 100%; text-align: left; letter-spacing: .12em; font-size: 8px; color: var(--muted); }
.crowd-legend span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #71d7d0; }
.crowd-legend .busy::before { background: #ffb65f; }
.crowd-legend .crowded::before { background: #f16a75; }
.guest-identity { display: flex; align-items: center; gap: 11px; margin: 15px 0; }
.guest-avatar { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: #b6a3ff1a; color: var(--violet); border: 1px solid #b6a3ff30; }
.guest-avatar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.guest-identity > div { display: grid; gap: 4px; font-size: 12px; }
.guest-identity > div > span { color: var(--muted); font-size: 11px; }
.guest-mood { margin-left: auto; color: var(--lime); font: 700 25px 'Barlow Condensed', sans-serif; }
.guest-mood[data-low="true"] { color: #f19b94; }
.guest-thought { margin: 18px 0 22px; padding: 13px 15px; border-left: 2px solid var(--aqua); background: #71d7d008; color: var(--ivory); font-size: 12px; line-height: 1.7; }
.guest-section-label { display: block; margin-top: 20px; margin-bottom: 12px; }
.guest-needs { display: grid; gap: 13px; }
.guest-need { display: grid; gap: 6px; font-size: 11px; --need-color: #71d7d0; }
.guest-need > span { display: flex; justify-content: space-between; color: var(--muted); }
.guest-need strong { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--need-color); }
.guest-need[data-level="medium"] { --need-color: #ffb65f; }
.guest-need[data-level="low"] { --need-color: #f19b94; }
.guest-need progress { width: 100%; height: 5px; border: 0; border-radius: 4px; overflow: hidden; appearance: none; background: #ffffff0c; accent-color: var(--need-color); }
.guest-need progress::-webkit-progress-bar { background: #ffffff0c; }
.guest-need progress::-webkit-progress-value { background: var(--need-color); transition: width .3s; }
.guest-need progress::-moz-progress-bar { background: var(--need-color); }
.inspector .guest-need-note { color: var(--muted); font-size: 10px; line-height: 1.65; margin: 11px 0; }
.inspector[data-profile="guest"] dd { max-width: 160px; }
.crowd-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.crowd-metrics > div { border: 1px solid var(--line); border-radius: 8px; padding: 11px; display: grid; gap: 6px; }
.crowd-metrics span { font-size: 8px; letter-spacing: .07em; color: var(--muted); }
.crowd-metrics strong { font-size: 23px; font-variant-numeric: tabular-nums; color: var(--aqua); }
.crowd-needs { display: grid; gap: 9px; margin-bottom: 15px; }
.crowd-needs > div { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.crowd-needs strong { color: var(--ivory); font-weight: 500; }
.crowd-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-top: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #ffffff03; text-align: left; font-size: 11px; }
.crowd-row:hover { border-color: #b6a3ff65; background: #b6a3ff0a; }
.crowd-row strong { flex-shrink: 0; color: var(--aqua); font-size: 10px; font-weight: 500; }
.vendor-service { border-top: 1px dashed var(--line); padding-top: 17px; margin-bottom: 18px; }
.vendor-service > p:not(.guest-need-note) { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .crowd-legend { font-size: 7px; padding: 4px 0; gap: 5px 2px; } .crowd-legend span::before { width: 3px; height: 3px; margin-right: 2px; } }
.actions { display: grid; gap: 8px; }
.actions button { font-size: 12px; }
#remove-building { margin-top: 3px; border-color: transparent; color: var(--orange); background: transparent; }
.form-row { display: flex; flex-direction: column; gap: 20px; font-size: 14px; }
.form-row > span { display: flex; justify-content: space-between; gap: 10px; }
.form-row strong { color: var(--lime); }
input[type=range] { width: 100%; margin: 0; accent-color: var(--lime); }
.park-metrics, .entrance-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; padding: 14px 0; border-block: 1px solid var(--line); }
.park-metrics span, .entrance-metrics span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .05em; line-height: 1.6; }
.park-metrics strong, .entrance-metrics strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.catalog-wide-button { width: 100%; margin-top: 15px; padding: 12px 8px; font-size: 12px; line-height: 1.5; }
.entrance-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.entrance-heading h3, .entrance-upgrade h3, .crew-heading { margin: 0; font: 600 23px/1.15 var(--display); }
.entrance-heading button { min-height: 38px; padding: 6px 8px; font-size: 10px; white-space: nowrap; }
.entrance-status { padding: 9px 11px; border: 1px solid #71d7d033; border-radius: 6px; color: var(--aqua); font-size: 11px; line-height: 1.55; background: #71d7d006; }
.entrance-status.busy { border-color: #ffaa7355; color: var(--orange); background: #ffaa7309; }
.queue-load { margin-top: 14px; color: var(--muted); font-size: 10px; }
.queue-load progress { margin-top: 7px; }
.entrance-detail { margin: 10px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.entrance-upgrade { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.entrance-upgrade > div { display: flex; align-items: center; justify-content: space-between; }
.entrance-upgrade > div > strong { color: var(--lime); font-size: 12px; }
.entrance-upgrade p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.entrance-upgrade .catalog-wide-button { margin-top: 11px; }
.entrance-upgrade > small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.entrance-note { padding: 11px; border-radius: 6px; background: #ffffff04; }
.toast { position: absolute; z-index: 12; top: 108px; left: 50%; display: flex; align-items: center; gap: 12px; max-width: min(480px, calc(100% - 48px)); width: max-content; padding: 14px 18px; transform: translateX(-50%); border-color: #d8ff6b4d; font-size: 12px; line-height: 1.6; pointer-events: none; animation: toast-in .2s ease-out; }
#toast-icon { flex: none; color: var(--lime); }
#toast-icon svg { width: 20px; height: 20px; }
.toast[data-tone=error] { border-color: #ffaa7370; }
.toast[data-tone=error] #toast-icon { color: var(--orange); }
dialog { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 26px; border: 1px solid #cedfe22e; border-radius: 16px; background: var(--ink); color: var(--ivory); box-shadow: 0 28px 120px #03070eb3; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #52616b transparent; }
dialog::backdrop { background: #071019a8; backdrop-filter: blur(7px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-head > .icon-button { flex: none; margin: -8px -8px 0 0; }
.dialog-head h2 { font-size: 34px; }
.dialog-copy, #confirm-new > p { margin: 16px 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.save-info { margin: 15px 0; padding: 12px 14px; border: 1px solid #d8ff6b30; border-radius: 7px; background: #d8ff6b07; color: var(--lime); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.save-info[data-state=error] { border-color: #ffaa734d; background: #ffaa7307; color: var(--orange); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dialog-actions button { min-height: 46px; padding: 10px 9px; font-size: 12px; line-height: 1.4; }
.small-copy { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 14px 0; }
.cheat-menu-button { display: flex; align-items: center; gap: 12px; text-align: left; }
.cheat-menu-button > span:nth-child(2) { flex: 1; }
.cheat-menu-button small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; font-weight: 400; }
.cheat-menu-button > span:first-child { color: var(--lime); }
.venue-options-button.cheat-menu-button::after { content: none; }
#cheat-codes { width: min(520px, calc(100vw - 24px)); }
.cheat-destination { display: flex; align-items: center; gap: 13px; padding: 15px; margin: 20px 0; border: 1px solid #d8ff6b38; border-radius: 10px; background: #d8ff6b08; }
.cheat-destination > span { color: var(--lime); }
.cheat-destination small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .12em; margin-bottom: 5px; }
.cheat-destination strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
#cheat-form label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.cheat-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
#cheat-input { width: 100%; min-width: 0; min-height: 50px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff05; color: var(--ivory); font-family: monospace; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
#cheat-input::placeholder { color: #7f8a91; font-size: 12px; }
#cheat-input:disabled { opacity: .6; }
.cheat-result { padding: 14px; border-radius: 8px; margin: 13px 0 0; line-height: 1.6; font-size: 13px; border: 1px solid var(--line); }
.cheat-result[data-state="success"] { color: var(--lime); border-color: #d8ff6b55; background: #d8ff6b0c; animation: cheat-claimed .3s ease-out; }
.cheat-result[data-state="error"] { color: #ffc2b3; border-color: #f28f7344; background: #f28f7308; }
.cheat-result[data-state="pending"] { color: var(--muted); }
.cheat-social { padding: 16px; background: #ffffff04; border: 1px dashed var(--line); border-radius: 9px; }
.cheat-social > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.cheat-social a { display: inline-block; padding: 8px 0; color: var(--lime); font-size: 12px; text-underline-offset: 4px; }
.cheat-history { list-style: none; padding: 0; margin: 8px 0 0; }
.cheat-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 15px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cheat-history strong { font-size: 13px; overflow-wrap: anywhere; }
.cheat-history b { color: var(--lime); font-size: 13px; }
.cheat-history small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
@keyframes cheat-claimed { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cheat-result[data-state="success"] { animation: none; } }
@media (max-width: 430px) { .cheat-entry { grid-template-columns: minmax(0, 1fr); } .cheat-entry button { min-height: 48px; } }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 16px 0; font-size: 12px; }
select { max-width: 60%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ivory); font-size: 12px; }
.venue-options-button { width: 100%; margin-top: 8px; text-align: left; font-size: 12px; }
.venue-options-button::after { content: '↗'; float: right; color: var(--muted); }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 -7px; padding-top: 8px; border-top: 1px dashed var(--line); }
.settings-footer > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.music-settings { margin: 24px 0 14px; padding: 20px 0 6px; border-top: 1px solid var(--line); }
#music-menu { width: min(400px, calc(100vw - 32px)); inset: 0 max(84px, env(safe-area-inset-right)) 0 auto; margin: auto 0; }
#music-menu .music-settings { margin: 10px 0 0; padding: 8px 0 0; border: 0; }
#music-toggle { background: var(--lime); color: var(--ink); border-color: var(--lime); font-weight: 600; }
#music-menu .setting-row { flex-wrap: wrap; }
#music-menu #music-mode { flex: 1 1 230px; max-width: 100%; }
@media (max-width: 640px) { #music-menu { inset: 0; margin: auto; width: calc(100vw - 24px); } }
.music-settings h3 { margin: 0 0 14px; font: inherit; font-size: 1rem; font-weight: 650; }
.music-now { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #c8ff0006; }
.music-now > div { flex: 1 1 180px; min-width: 0; }
.music-now strong { display: block; color: var(--lime); font-size: 1rem; overflow-wrap: anywhere; }
.music-now p { margin: 5px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.music-now button { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: .875rem; }
.music-settings .setting-row { font-size: .875rem; }
.music-settings select { flex: 1; min-width: 0; max-width: 75%; font-size: .875rem; }
.music-volume-label { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; }
.music-volume-label output { color: var(--lime); font-variant-numeric: tabular-nums; }
#music-volume { min-height: 44px; cursor: pointer; }
#music-hint { margin: 4px 0 10px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.danger-link { padding: 8px 0; border-color: transparent; background: transparent; color: var(--orange); font-size: 11px; text-align: left; }
.danger-link:hover { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
#venue-picker { width: min(1000px, calc(100vw - 44px)); padding: 28px; }
.venue-title { display: flex; align-items: center; gap: 13px; }
.dialog-mark { flex: none; object-fit: contain; }
.venue-title h2 { font-size: 38px; }
.venue-title .eyebrow { color: var(--lime); }
.venue-intro { margin: 17px 0 24px; font-size: 15px; line-height: 1.6; }
.venue-intro > span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.venue-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.venue-card { position: relative; min-width: 0; padding: 0; overflow: hidden; border-radius: 10px; border-color: var(--line); text-align: left; color: var(--ivory); background: #ffffff02; }
.venue-card[aria-pressed=true] { color: var(--ivory); background: #d8ff6b07; border-color: var(--lime); box-shadow: inset 0 -3px 0 var(--lime); }
.venue-card:disabled { opacity: .6; }
.venue-plan { position: relative; height: 135px; padding: 0; background: var(--panel); overflow: hidden; border-bottom: 1px dashed #e7f2f049; }
.venue-plan canvas { display: block; width: 100%; height: 100%; }
.venue-tag { position: absolute; left: 9px; bottom: 9px; max-width: calc(100% - 18px); padding: 4px 6px; border: 1px solid #ffffff12; border-radius: 3px; background: #111820e6; color: var(--ivory); font-size: 8px; font-weight: 700; letter-spacing: .07em; line-height: 1.4; }
.venue-card-copy { padding: 14px 13px 17px; }
.venue-pass-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.venue-number { color: var(--muted); font: 600 20px/1 var(--display); letter-spacing: .03em; }
.venue-selection { display: flex; align-items: center; gap: 3px; color: var(--lime); font-size: 8px; font-weight: 600; letter-spacing: .08em; opacity: 0; }
.venue-selection svg { width: 13px; height: 13px; }
.venue-card[aria-pressed=true] .venue-selection { opacity: 1; }
.venue-card-copy > strong { display: block; min-height: 50px; font: 600 24px/1.02 var(--display); }
.venue-card-copy > small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.venue-progress { display: block; min-height: 43px; margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--line); color: #ccd6dc; font-size: 10px; line-height: 1.5; }
.venue-details { margin-top: 20px; padding: 15px 0; border-block: 1px solid var(--line); }
.venue-details p { margin: 0; font-size: 12px; line-height: 1.65; color: #d3dce0; }
.venue-facts { display: flex; flex-wrap: wrap; gap: 7px 20px; margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.venue-facts b { color: var(--lime); font-weight: 500; }
.venue-facts > span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--muted); }
.festival-name-row { display: flex; align-items: center; gap: 20px; margin: 18px 0; font-size: 12px; color: var(--muted); }
.festival-name-row input { flex: 1; min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px; background: #ffffff04; color: var(--ivory); font-size: 14px; }
.venue-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 18px; }
#venue-save-note { max-width: 65%; color: var(--muted); font-size: 11px; line-height: 1.6; }
.venue-footer button { min-width: 165px; padding: 13px 20px; font-size: 12px; }
.venue-error { padding: 12px; border: 1px solid #ffaa7355; border-radius: 6px; color: var(--orange); font-size: 12px; line-height: 1.6; background: #ffaa7308; }
#controls-help { width: min(580px, calc(100vw - 32px)); }
.quick-start { display: grid; gap: 17px; margin: 24px 0; padding: 0; list-style: none; }
.quick-start li { display: flex; align-items: flex-start; gap: 14px; }
.quick-start li > span { flex: none; min-width: 31px; padding-top: 1px; color: var(--lime); font: 600 27px/1 var(--display); }
.quick-start strong { display: block; font-size: 13px; font-weight: 600; }
.quick-start p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.controls-list { display: grid; grid-template-columns: 1fr 1.2fr; gap: 13px 16px; margin: 20px 0; font-size: 11px; line-height: 1.6; }
.controls-list dt { color: var(--muted); }
.controls-list dd { margin: 0; }
.help-footer { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); }
.help-footer img { flex: none; }
.help-footer > span { font-size: 9px; font-weight: 700; letter-spacing: .09em; }
.help-footer small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 400; letter-spacing: 0; }
.help-footer button { margin-left: auto; font-size: 11px; }
.loading { position: fixed; z-index: 50; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; background: radial-gradient(ellipse at 50% 40%, #223129 0%, var(--ink) 52%); }
.loading-edition, .loading-footer { position: absolute; left: 32px; right: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 10px; letter-spacing: .14em; line-height: 1.5; }
.loading-edition { top: max(28px, env(safe-area-inset-top)); }
.loading-edition > span:last-child { color: var(--lime); }
.loading-footer { bottom: max(28px, env(safe-area-inset-bottom)); padding-top: 19px; border-top: 1px dashed var(--line); font-size: 9px; }
.loading-identity { display: flex; flex-direction: column; align-items: center; }
.loading-mark { width: 160px; height: 160px; margin-bottom: 4px; object-fit: contain; }
.wordmark-large { align-items: center; }
.wordmark-large > span { font-size: 23px; letter-spacing: .18em; }
.wordmark-large > b { font-size: 91px; letter-spacing: .01em; }
.brand-tagline { margin: 24px 0 0; color: var(--ivory); font-size: 20px; letter-spacing: -.035em; }
.loading-status { width: min(280px, 78vw); margin-top: 48px; text-align: center; }
.loading-track { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: #ffffff10; }
.loading-track::after { content: ''; display: block; width: 40%; height: 100%; background: var(--lime); animation: loading-travel 1.6s ease-in-out infinite; }
.loading-status h2 { margin: 19px 0 5px; font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0; }
.loading-status p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.failure { position: absolute; z-index: 60; left: 50%; top: 50%; width: min(430px, calc(100% - 36px)); padding: 30px; transform: translate(-50%, -50%); text-align: center; }
.failure .dialog-mark { display: block; margin: 0 auto 14px; }
.failure h2 { margin: 12px 0; font-size: 32px; }
.failure p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.failure button { margin-top: 7px; min-width: 130px; font-size: 12px; }
@keyframes loading-travel { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes save-pulse { from { opacity: .4; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; margin-top: -5px; } to { opacity: 1; margin-top: 0; } }
@media (max-width: 1200px) {
  .bottom-left { bottom: 119px; }
  .control-hint { display: none; }
  .build-hint { left: 20px; transform: none; bottom: 181px; max-width: calc(100% - 240px); }
  .brand-stub { display: none; }
  .stat { padding-inline: 13px; }
  .hud-sandbox { margin-inline: 11px; }
}
@media (max-width: 1000px) {
  .stat { padding-inline: 11px; gap: 8px; }
  .stat-icon { display: none; }
  .hud-sandbox { display: none; }
  .stats { padding-inline: 7px; }
  .hud { gap: 12px; }
  .venue-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venue-plan { height: 140px; }
  .venue-card-copy > strong { min-height: 0; font-size: 25px; }
  .venue-progress { min-height: 0; }
  .catalog { max-height: calc(100dvh - 292px); }
}
@media (max-width: 760px) {
  .hud { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; height: 126px; gap: 8px; align-items: flex-start; }
  .brand { min-height: 58px; height: 58px; padding: 4px 13px 4px 4px; }
  .brand-mark { width: 48px; height: 48px; }
  .wordmark > span { font-size: 11px; }
  .wordmark > b { font-size: 30px; }
  .brand-stub { display: flex; font-size: 8px; }
  .stats { position: absolute; top: 66px; left: 0; right: 0; min-height: 60px; padding: 6px; }
  .stat { flex: 1; padding: 0 10px; }
  .stat small { font-size: 8px; letter-spacing: .05em; }
  .stat strong { font-size: 17px; }
  .hud-actions .icon-button { min-width: 38px; padding-inline: 7px; }
  .hud-actions svg { width: 19px; height: 19px; }
  .park-card { max-height: calc(100dvh - 319px); top: 151px; left: 10px; width: 262px; padding: 10px 16px 15px; }
  .park-card h1 { font-size: 26px; }
  .view-controls { top: 151px; right: 10px; padding: 4px; }
  .view-controls .icon-button { min-width: 40px; min-height: 40px; padding: 9px; }
  .build-toolbar { bottom: max(12px, env(safe-area-inset-bottom)); left: 10px; right: 10px; transform: none; gap: 2px; padding: 5px; }
  .build-toolbar button { flex: 1; width: auto; min-width: 0; height: 64px; padding: 6px 0; gap: 7px; font-size: 10px; }
  .build-toolbar kbd { display: none; }
  .build-toolbar svg { width: 23px; height: 23px; }
  .bottom-left { left: 10px; bottom: max(100px, calc(env(safe-area-inset-bottom) + 88px)); }
  .speed-controls button { min-width: 32px; min-height: 40px; font-size: 11px; }
  #gates { min-width: 91px; padding-inline: 4px; font-size: 10px; }
  .speed-divider { margin-inline: 1px; }
  .minimap { right: 10px; bottom: max(100px, calc(env(safe-area-inset-bottom) + 88px)); width: 125px; padding: 7px; }
  .map-heading { font-size: 8px; padding-bottom: 5px; }
  .map-legend { display: none; }
  #save-status { font-size: 8px; min-height: 26px; }
  .catalog { top: 151px; left: 10px; width: min(340px, calc(100vw - 80px)); max-height: calc(100dvh - 318px); padding: 15px; }
  .catalog-head h2 { font-size: 26px; }
  .item-preview { height: 98px; }
  .catalog-item > strong { font-size: 11px; }
  .inspector { top: 151px; left: 10px; right: auto; width: min(330px, calc(100vw - 80px)); max-height: calc(100dvh - 318px); padding: 16px; }
  body:has(#inspector:not([hidden])) .park-card { display: none; }
  .build-hint { left: 10px; bottom: 160px; max-width: calc(100% - 155px); flex-wrap: wrap; gap: 8px; padding: 12px; }
  .build-copy { width: 100%; margin: 0; }
  #build-label { font-size: 12px; }
  .build-hint button { min-height: 40px; font-size: 10px; padding-inline: 9px; }
  .build-hint kbd { display: none; }
  .toast { top: 151px; padding: 12px 15px; font-size: 11px; max-width: calc(100% - 100px); }
  #venue-picker { padding: 22px; width: calc(100vw - 28px); }
  .venue-title { gap: 9px; }
  .venue-title .dialog-mark { width: 45px; height: 45px; }
  .venue-title h2 { font-size: 32px; }
  .venue-intro { margin-block: 17px; font-size: 13px; }
  .venue-intro > span { font-size: 11px; }
  .venue-card-copy { padding: 12px; }
  .venue-card-copy > strong { font-size: 23px; }
  .venue-details { margin-top: 17px; }
  .venue-footer { gap: 15px; }
  .venue-footer button { min-width: 140px; padding: 12px; }
  .festival-name-row { gap: 12px; }
  .loading-edition, .loading-footer { left: 22px; right: 22px; font-size: 8px; }
  .wordmark-large > span { font-size: 21px; }
  .wordmark-large > b { font-size: 83px; }
}
@media (max-width: 450px) {
  .stat { padding-inline: 8px; }
  .stat small { font-size: 7px; }
  .stat strong { font-size: 16px; }
  .hud-actions .icon-button { min-width: 34px; padding-inline: 5px; }
  .brand-stub { display: none; }
  .park-card { width: calc(100% - 84px); }
  .park-hint { font-size: 11px; }
  .minimap { width: 100px; }
  .map-heading { font-size: 7px; }
  #save-status { font-size: 7px; }
  .speed-controls button { min-width: 29px; }
  .speed-controls .icon-button { min-width: 32px; }
  #gates { min-width: 83px; font-size: 9px; }
  .bottom-left { max-width: calc(100% - 124px); }
  .build-hint { max-width: calc(100% - 130px); }
  .build-hint button { padding-inline: 9px; }
  .catalog-grid { gap: 8px; }
  .catalog-item > strong, .item-detail, .item-cost, .item-budget { padding-inline: 8px; }
  .item-preview { height: 83px; }
  .item-size { font-size: 8px; }
  .catalog-head h2 { font-size: 24px; }
  .park-metrics strong, .entrance-metrics strong { font-size: 14px; }
  .entrance-heading { align-items: flex-start; }
  .entrance-heading h3 { font-size: 21px; }
  dialog { padding: 21px; width: calc(100vw - 24px); }
  .dialog-head h2 { font-size: 30px; }
  #venue-picker { padding: 19px; }
  .venue-title .dialog-mark { width: 36px; height: 36px; }
  .venue-title .eyebrow { font-size: 8px; }
  .venue-title h2 { font-size: 28px; }
  .venue-cards { gap: 9px; }
  .venue-plan { height: 100px; }
  .venue-tag { left: 6px; bottom: 6px; font-size: 7px; padding: 3px 4px; }
  .venue-card-copy { padding: 10px; }
  .venue-card-copy > strong { min-height: 43px; font-size: 22px; }
  .venue-card-copy > small { font-size: 9px; }
  .venue-number { font-size: 18px; }
  .venue-selection { font-size: 7px; }
  .venue-progress { font-size: 9px; }
  .venue-footer { align-items: stretch; flex-direction: column; gap: 12px; }
  #venue-save-note { max-width: 100%; font-size: 10px; }
  .festival-name-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .festival-name-row input { font-size: 16px; }
  .controls-list { grid-template-columns: 1fr 1fr; font-size: 10px; gap: 12px; }
  .help-footer { flex-wrap: wrap; }
  .help-footer button { width: 100%; margin: 7px 0 0; }
  .loading-edition > span:last-child { display: none; }
  .loading-footer > span:last-child { display: none; }
  .loading-mark { width: 138px; height: 138px; }
}
@media (max-height: 760px) {
  .park-hint { margin-block: 10px; }
  .park-card .divider { margin-block: 12px; }
  .loading-mark { width: 115px; height: 115px; }
  .loading-status { margin-top: 28px; }
  .brand-tagline { margin-top: 18px; }
}
@media (max-width: 360px) {
  .minimap { display: none; }
  .bottom-left { max-width: calc(100% - 20px); }
  .build-hint { max-width: calc(100% - 88px); }
}
@media (max-height: 680px) and (max-width: 760px) {
  .minimap { display: none; }
  .park-card #park-details { max-height: none; overflow: visible; }
  .build-hint { max-width: calc(100% - 88px); }
}
@media (max-height: 580px) and (orientation: landscape) {
  .hud { top: 8px; height: 60px; }
  .brand { height: 58px; min-height: 58px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand .wordmark, .brand-stub { display: none; }
  .stats { position: static; min-height: 58px; margin-left: auto; }
  .stat { min-width: 90px; }
  .park-card, .catalog, .inspector, .view-controls, .toast { top: 82px; }
  .park-card { max-height: calc(100dvh - 240px); }
  .park-card #park-details { max-height: none; overflow: visible; }
  .catalog, .inspector { max-height: calc(100dvh - 246px); }
  .bottom-left { bottom: 104px; }
  .view-controls { display: grid; grid-template-columns: repeat(2, 40px); gap: 2px; }
  .view-controls > span { display: none; }
  .view-controls .icon-button { min-width: 40px; min-height: 40px; }
  .inspector { right: 120px; }
  .minimap { display: none; }
  .build-hint { bottom: 160px; left: 20px; max-width: calc(100% - 120px); }
  .loading-identity { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 420px; max-width: 100%; gap: 10px; }
  .loading-mark { width: 90px; height: 90px; margin: 0; }
  .wordmark-large > b { font-size: 70px; }
  .wordmark-large > span { font-size: 18px; }
  .brand-tagline { width: 100%; text-align: center; margin-top: 0; font-size: 17px; }
  .loading-status { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .loading-track::after { width: 100%; opacity: .6; }
}

/* Photo Mode keeps all game controls out of the image and keyboard tab order. */
body.photo-mode #game > :not(#world):not(#photo-tools) { display: none !important; }
.photo-tools { position: absolute; z-index: 30; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(700px, calc(100% - 32px)); padding: 20px 24px; }
.photo-heading, .photo-options, .photo-bookmarks { display: flex; align-items: center; gap: 16px; }
.photo-heading { justify-content: space-between; margin-bottom: 16px; }
.photo-heading h2 { font: 600 30px/1.1 var(--display); margin: 5px 0 0; }
.photo-heading > button { border-color: transparent; color: var(--muted); font-size: 11px; }
.photo-options { flex-wrap: wrap; }
.photo-options label { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.photo-options select { padding: 9px; color: var(--ivory); background: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.photo-camera { display: flex; gap: 1px; }
.photo-camera .icon-button { min-width: 34px; min-height: 36px; padding: 7px; }
.photo-options > .primary { margin-left: auto; }
.photo-bookmarks { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); gap: 10px; flex-wrap: wrap; }
.photo-bookmarks > span { color: var(--muted); font-size: 9px; letter-spacing: .12em; margin-right: auto; }
.photo-bookmarks > div { display: flex; gap: 3px; }
.photo-bookmarks button { font-size: 11px; padding: 6px 8px; }
.photo-bookmarks [data-photo-save] { color: var(--lime); border-color: transparent; }
#photo-status { color: var(--muted); font-size: 10px; margin: 12px 0 0; }
@media (max-width: 620px) { .photo-tools { padding: 14px; bottom: 10px; } .photo-heading h2 { font-size: 24px; } .photo-options { gap: 9px; } .photo-options > .primary { margin-left: 0; } .photo-bookmarks { gap: 4px; } .photo-bookmarks > span { flex-basis: 100%; margin-bottom: 4px; } }
@media (max-height: 560px) and (min-width: 621px) { .photo-tools { left: 12px; bottom: 12px; transform: none; width: 400px; padding: 12px; } .photo-heading { margin-bottom: 8px; } .photo-heading h2 { font-size: 23px; } .photo-options, .photo-bookmarks { gap: 6px; } .photo-bookmarks { margin-top: 9px; padding-top: 9px; } }

@media (max-width: 800px) {
 .build-hint.path-mode { left: 10px; right: 10px; bottom: 153px; transform: none; width: auto; max-width: none; grid-template-columns: 1fr auto; }
 .path-mode .build-copy { grid-column: 1/-1; }
 .path-tools { grid-template-columns: minmax(0,1fr) 112px; gap: 8px; }
 .path-mode-switch { grid-column: 1/-1; }
 .path-mode-switch button { flex: 1; }
 body.path-building .minimap, body.path-building .park-card { display: none; }
 .path-mode #path-build { justify-self: start; min-height: 40px; }
}
@media (max-height: 550px) and (min-width: 801px) {
 .build-hint.path-mode { left: 20px; bottom: 100px; max-width: calc(100% - 120px); }
}

/* VIP uses warm gold and velvet while sharing the festival's controls. */
.vip-ink { color: #e1c187 !important; }
.build-toolbar button[data-category=vip] { color: #dcc190; }
.build-toolbar button[data-category=vip].active { color: #efd0a0; background: #d1ad7015; border-color: #d1ad7040; }
.vip-intro { display: flex; gap: 12px; padding: 14px; margin: 0 0 19px; background: linear-gradient(135deg,#84658126,#caa15d12); border: 1px solid #d5b47c38; border-radius: 9px; }
.vip-intro strong { display: block; color: #edd3aa; font-size: 12px; line-height: 1.5; }
.vip-intro p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.vip-seal { flex: 0 0 33px; color: #e1c187; }
.vip-seal svg { width: 33px; height: 33px; }
.vip-sales-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; font-size: 13px; }
.vip-sales-toggle small { display: block; margin-top: 5px; font-size: 10px; color: var(--muted); }
.vip-sales-toggle input { width: 20px; height: 20px; accent-color: #ddbd81; }
.vip-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; padding: 17px 0; border-block: 1px solid var(--line); }
.vip-metrics span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .08em; line-height: 1.5; }
.vip-metrics strong { display: block; margin-top: 6px; color: #e5c795; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vip-status { padding: 12px 13px; background: #d4b1730b; border-left: 2px solid #d4b17370; color: #dfc89e; font-size: 11px; line-height: 1.65; }
.vip-area-list { display: grid; gap: 8px; margin: 18px 0 22px; }
.vip-area-list:empty { display: none; }
.vip-area-list button { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 5px; padding: 12px; }
.vip-area-list span { font-size: 12px; }
.vip-area-list small { grid-row: 2; color: var(--muted); font-size: 10px; line-height: 1.5; }
.vip-area-list b { grid-column: 2; grid-row: 1/3; align-self: center; font-size: 17px; font-weight: 400; color: #e5c795; }
.vip-rename { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.vip-rename input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #ffffff05; color: var(--ivory); font: inherit; }

/* Artist bookings borrow the visual language of a festival lineup poster. */
.lineup-summary { display: block; width: 100%; margin: 0 0 15px; padding: 9px 12px; min-height: 40px; text-align: left; color: var(--lime); background: #d8ff6b08; font-size: 12px; }
.lineup-summary::after { content: '↗'; float: right; margin-left: 8px; }
.reputation-card { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 16px; background: #d8ff6b08; border: 1px solid #d8ff6b35; border-radius: 8px; }
.reputation-card .eyebrow { font-size: 8px; letter-spacing: .12em; }
.reputation-card strong { display: block; margin-top: 7px; font: 600 25px/1.1 var(--display); color: var(--lime); }
.reputation-card > b { align-self: end; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.reputation-card progress, .reputation-card p { grid-column: 1/-1; width: 100%; margin: 0; }
.reputation-card p { color: var(--muted); font-size: 10px; }
.lineup-intro { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 18px 0; }
.lineup-field { display: grid; gap: 7px; min-width: 0; font-size: 11px; color: var(--muted); }
.lineup-field select { width: 100%; min-width: 0; min-height: 42px; padding: 10px 8px; color: var(--ivory); background: var(--ink); border: 1px solid var(--line); border-radius: 5px; font: inherit; }
.lineup-slots { display: grid; gap: 12px; margin: 19px 0 14px; }
.lineup-repeat { display: flex; align-items: center; gap: 10px; font-size: 12px; cursor: pointer; }
.lineup-repeat input { width: 18px; height: 18px; accent-color: var(--lime); }
.lineup-booking-note { font-size: 11px; color: var(--muted); line-height: 1.75; margin: 14px 0 0; }
.live-set { margin: 16px 0; padding: 15px; background: #ffffff03; border: 1px solid var(--line); border-left: 3px solid var(--artist); border-radius: 5px; }
.live-set .eyebrow { color: var(--artist); font-size: 9px; }
.live-set h3 { font: 600 27px/1.05 var(--display); color: var(--artist); margin: 9px 0; overflow-wrap: anywhere; }
.live-set p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 8px 0; font-variant-numeric: tabular-nums; }
.live-set p:empty { display: none; }
.live-set button { font-size: 10px; margin-top: 5px; }
.live-set progress { width: 100%; height: 4px; }
.artist-roster { display: grid; grid-template-columns: 1fr; gap: 9px; }
.artist-card { display: grid; gap: 7px; position: relative; padding: 15px; text-align: left; border-left: 3px solid var(--artist); background: linear-gradient(125deg,#ffffff06,transparent); }
.artist-card .artist-tier { text-transform: uppercase; font-size: 8px; letter-spacing: .14em; color: var(--artist); }
.artist-card strong { font: 600 27px/.98 var(--display); letter-spacing: .005em; color: var(--artist); }
.artist-card > span:not(.artist-tier), .artist-card small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.artist-card b { font-size: 12px; font-weight: 500; }
.artist-card.artist-locked { opacity: .68; }
.artist-card:not(:disabled):hover { border-color: var(--artist); background: #ffffff0b; }
.performance-recap { padding: 14px 0; border-bottom: 1px solid var(--line); }
.performance-recap > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.performance-recap strong { font: 500 20px/1.1 var(--display); }
.performance-recap b { flex: none; font-size: 10px; color: var(--lime); }
.performance-recap p { font-size: 11px; margin: 8px 0; }
.performance-recap small, .lineup-empty-note { font-size: 11px; color: var(--muted); line-height: 1.6; }
.lineup-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 7px; margin: 20px 0; }
.lineup-empty strong { font-size: 14px; }
.lineup-empty p { color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (min-width: 761px) and (max-width: 1000px) {
 .build-toolbar { left: 20px; transform: none; width: calc(100% - 250px); }
 .build-toolbar button { flex: 1; min-width: 0; width: auto; padding-inline: 2px; }
}
@media (max-width: 450px) { .build-toolbar button { font-size: 9px; } .build-toolbar svg { width: 21px; height: 21px; } }

/* Clear next steps and a readable placement review, using the existing HUD. */
.park-hint { margin-bottom: 10px; }
.park-hint[data-tone=warning] { color: #ffd2b5; }
.park-action { display: block; width: 100%; min-height: 44px; margin-bottom: 17px; padding: 10px 12px; text-align: left; color: var(--lime); background: #d8ff6b09; border-color: #d8ff6b35; font-size: 12px; line-height: 1.45; }
.park-action:hover { background: #d8ff6b18; border-color: var(--lime); }
.build-details { color: var(--aqua); font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.construction-summary { display: block; width: 100%; min-height: 44px; margin: 0 0 15px; padding: 9px 12px; text-align: left; font-size: 11px; line-height: 1.5; color: var(--muted); }
.construction-summary::after { content: '↗'; float: right; margin-left: 5px; }
.construction-summary[data-busy=true] { color: var(--orange); background: #ffaa7308; border-color: #ffaa7333; }
.item-build-time { padding: 5px 11px 0; color: var(--orange); font-size: 10px; font-variant-numeric: tabular-nums; }
.construction-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.construction-office-mark { display: grid; place-items: center; flex: none; width: 58px; height: 64px; border: 1px dashed #ffaa7366; border-radius: 9px; color: var(--orange); font: 700 40px var(--display); background: #ffaa7308; }
.construction-intro strong { font-size: 16px; }
.construction-intro p, .construction-clock-note, .construction-empty p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.construction-clock-note { border-left: 2px solid var(--orange); padding: 0 0 0 12px; margin-bottom: 20px; }
.construction-crews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.construction-crews > div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #ffffff03; }
.construction-crews span { display: block; color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.construction-crews strong { display: block; margin: 8px 0 5px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.construction-crews small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.construction-projects { display: grid; gap: 12px; }
.construction-project { min-width: 0; padding: 15px; border: 1px solid #ffaa7338; border-radius: 10px; background: #ffaa7304; }
.construction-project-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.construction-project-top .eyebrow, .construction-ink { color: var(--orange); }
.construction-badge { padding: 3px 7px; border-radius: 4px; color: var(--orange); background: #ffaa7314; font-size: 9px; font-weight: 700; }
.construction-badge[data-phase=queued] { color: var(--muted); background: #ffffff08; }
.construction-project h3 { margin: 12px 0 14px; font: 700 22px/1.1 var(--display); }
.construction-project progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; accent-color: var(--orange); background: #ffffff10; }
.construction-project progress::-webkit-progress-bar { background: #ffffff10; }
.construction-project progress::-webkit-progress-value { background: var(--orange); }
.construction-project progress::-moz-progress-bar { background: var(--orange); }
.construction-eta { margin: 9px 0 5px; color: var(--orange); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.construction-ready { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.construction-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.construction-actions button { flex: 1 1 auto; min-height: 44px; padding: 9px; font-size: 11px; }
.construction-actions button:last-child { color: var(--muted); }
.construction-empty { border: 1px dashed var(--line); border-radius: 10px; padding: 22px 18px; }
.construction-empty strong { color: var(--orange); font-size: 14px; }
.inspector .construction-project { margin-top: 18px; }
.inspector .construction-project p { font-size: 11px; }
@media(max-width:450px) { .item-build-time { padding-inline: 8px; } .construction-project { padding: 12px; } }

/* MFT / Mainstage identity and venue editions. */
.identity-type { display: block; width: 168px; height: auto; }
.wordmark-large .identity-type { width: min(365px, 76vw); height: auto; }
.brand .brand-mark { width: 52px; height: 52px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.objective-summary { width: 100%; margin-top: 10px; padding: 10px 0 0; min-height: 44px; border: 0; border-top: 1px dashed var(--line); border-radius: 0; color: var(--muted); background: transparent; text-align: left; font-size: 11px; }
.objective-summary.reward-ready { color: var(--lime); }
.objective-intro { display: flex; align-items: center; gap: 15px; margin: 0 0 20px; }
.objective-intro .eyebrow { color: var(--edition-color); }
.objective-intro h3 { margin: 5px 0; font: 700 26px/1.08 var(--display); }
.objective-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.objective-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 65px; height: 78px; flex: none; border: 1px solid var(--edition-color); border-radius: 7px; color: var(--edition-color); font: 700 36px/1 var(--display); }
.objective-seal small { padding-top: 6px; font: 600 10px 'DM Sans',sans-serif; letter-spacing: .15em; color: var(--muted); }
.objective-edition { display: flex; gap: 14px; align-items: center; padding: 17px; border: 1px solid var(--line); background: #ffffff03; border-radius: 10px; }
.edition-swatch { display: flex; align-items: flex-end; gap: 4px; width: 50px; height: 48px; flex: none; }
.edition-swatch span { display: block; width: 14px; height: 35px; background: var(--edition-color); border-radius: 2px 2px 0 0; }
.edition-swatch span:nth-child(2) { height: 48px; background: var(--edition-accent); }
.objective-edition strong { display: block; margin-top: 5px; color: var(--edition-color); font-size: 16px; }
.objective-edition p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.edition-controls { display: grid; gap: 0; margin-top: 9px; }
.edition-controls label { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 12px; }
.edition-controls small { display: block; padding-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.edition-controls input { width: 22px; height: 22px; flex: none; accent-color: var(--lime); }
.objective-clock-note { margin: 18px 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.objective-list { display: grid; gap: 14px; }
.objective-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff02; }
.objective-card[data-state=active] { border-color: #71d7d05c; }
.objective-card[data-state=ready] { border-color: #d8ff6b80; background: #d8ff6b06; }
.objective-card[data-state=locked] { background: #ffffff01; }
.objective-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.objective-number { color: var(--muted); font: 700 24px/1 var(--display); }
.objective-state { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.objective-card[data-state=ready] .objective-state { color: var(--lime); }
.objective-card[data-state=active] .objective-state { color: var(--aqua); }
.objective-card h3 { margin: 10px 0 7px; font: 700 25px/1.05 var(--display); }
.objective-card > p { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.objective-card progress, .home-objective progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 3px; overflow: hidden; accent-color: var(--lime); background: #ffffff10; }
.objective-card progress::-webkit-progress-bar, .home-objective progress::-webkit-progress-bar { background: #ffffff10; }
.objective-card progress::-webkit-progress-value, .home-objective progress::-webkit-progress-value { background: var(--lime); }
.objective-card progress::-moz-progress-bar, .home-objective progress::-moz-progress-bar { background: var(--lime); }
.objective-card ul { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.objective-card li { display: grid; grid-template-columns: 13px 1fr auto; align-items: start; gap: 7px; font-size: 10px; line-height: 1.55; color: var(--muted); }
.objective-card li strong { font-size: 10px; color: var(--ivory); font-variant-numeric: tabular-nums; text-align: right; }
.objective-card li[data-met=true] .objective-check-mark { color: var(--lime); }
.objective-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px dashed var(--line); padding-top: 14px; }
.objective-reward > span { flex: 1; min-width: 100px; font-size: 11px; color: var(--lime); line-height: 1.6; }
.objective-reward b { display: block; color: var(--muted); font-size: 10px; font-weight: 500; }
.objective-reward button { font-size: 11px; padding: 10px; }
.objective-card[data-state=ready] .objective-reward button { color: var(--ink); background: var(--lime); border-color: var(--lime); font-weight: 700; }

#home-menu { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: auto; background: linear-gradient(90deg,#111820f5 0%,#111820ec 30%,#111820c4 47%,#11182036 74%,#1118200d 100%); box-shadow: none; }
#home-menu::backdrop { background: #11182012; backdrop-filter: none; }
.home-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: max(22px,env(safe-area-inset-top)) 38px 0; }
.home-publisher { display: flex; align-items: center; gap: 12px; color: #bec9cd; font-size: 9px; letter-spacing: .16em; }
.publisher-image { position: relative; display: block; width: 34px; aspect-ratio: 1226 / 1055; overflow: hidden; flex: none; }
.publisher-image img { position: absolute; left: -26.1%; top: -47.96%; width: 167.05%; height: auto; max-width: none; }
.home-content { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(550px,48vw); margin: clamp(30px,6vh,78px) 0 125px clamp(28px,5vw,78px); }
.home-logo { display: block; width: 100%; height: auto; }
.home-tagline { margin: 23px 0 10px; font: 700 clamp(38px,4vw,60px)/.97 var(--display); letter-spacing: -.02em; }
.home-intro { width: min(410px,100%); margin: 0; color: #bfccd3; font-size: 13px; line-height: 1.8; }
.home-festival { display: grid; gap: 5px; margin-top: 24px; padding-left: 13px; border-left: 2px solid var(--lime); }
.home-festival strong { font-size: 19px; line-height: 1.3; }
.home-festival strong { overflow-wrap: anywhere; }
.home-festival > span:last-child { color: var(--muted); font-size: 10px; line-height: 1.5; }
.home-objective { width: min(410px,100%); margin-top: 23px; padding: 15px 0 0; border-top: 1px dashed var(--line); }
.home-objective > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#home-objective-count { color: var(--muted); font-size: 9px; }
.home-objective > strong { display: block; margin: 7px 0 12px; font-size: 13px; line-height: 1.5; }
.home-objective small { display: block; margin-top: 9px; color: var(--lime); font-size: 10px; line-height: 1.5; }
.home-actions { display: flex; gap: 10px; width: min(410px,100%); margin-top: 24px; }
.home-actions button { flex: 1; min-width: 0; min-height: 52px; font-size: 12px; padding: 12px 14px; }
.home-help { align-self: flex-start; margin: 13px 0 0; padding: 6px 0; min-height: 36px; border: 0; color: var(--muted); font-size: 10px; background: transparent; text-align: left; }
.home-help:hover { color: var(--ivory); background: transparent; }
.home-status { width: min(410px,100%); margin: 7px 0 0; color: #92a6b0; font-size: 9px; line-height: 1.65; }
.home-status[data-error=true] { color: var(--orange); }
.home-retry { align-self: flex-start; margin-top: 9px; font-size: 11px; }
.home-scene-card { position: fixed; right: 35px; bottom: 125px; width: min(340px,35vw); padding: 17px 20px; border: 1px solid #ffffff24; border-radius: 10px; background: #111820a8; backdrop-filter: blur(12px); }
.home-scene-card .eyebrow { display: flex; gap: 7px; align-items: center; color: #cedbb3; font-size: 8px; }
.home-scene-card i { width: 5px; height: 5px; background: var(--lime); border-radius: 50%; }
.home-scene-card strong { display: block; margin-top: 9px; font: 700 27px/1.03 var(--display); }
.home-scene-card > span:last-child { display: block; margin-top: 7px; font-size: 10px; line-height: 1.6; color: #c1ced6; }
.home-footer { position: fixed; z-index: 2; display: flex; align-items: center; gap: 32px; bottom: 0; left: 0; right: 0; min-height: 87px; padding: 19px clamp(28px,5vw,78px) max(19px,env(safe-area-inset-bottom)); border-top: 1px solid #ffffff14; background: #111820d9; backdrop-filter: blur(10px); }
.home-footer > span { font: 600 27px/1 var(--display); color: var(--lime); }
.home-footer small { display: block; margin-top: 5px; font: 600 8px/1.5 'DM Sans',sans-serif; color: var(--muted); letter-spacing: .13em; }
.home-footer .home-footer-clock { font-size: 19px; }
.home-footer b { margin-left: auto; font-size: 8px; color: var(--muted); letter-spacing: .18em; font-weight: 500; }
#welcome-back { width: min(600px,calc(100vw - 30px)); }
.welcome-since { margin: 15px 0 20px; font-size: 11px; color: var(--muted); line-height: 1.6; }
.welcome-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.welcome-metrics > div { padding: 16px 11px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff03; }
.welcome-metrics strong { display: block; color: var(--lime); font: 700 36px/1 var(--display); }
.welcome-metrics span { display: block; margin-top: 7px; font-size: 8px; color: var(--muted); line-height: 1.6; letter-spacing: .06em; }
.welcome-project-list { display: grid; gap: 9px; max-height: 230px; overflow-y: auto; list-style: none; padding: 0; margin: 22px 0; scrollbar-width: thin; }
.welcome-project-list li { display: grid; grid-template-columns: 16px 1fr auto; gap: 9px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.welcome-project-list li > span { color: var(--lime); }
.welcome-project-list strong { font-size: 12px; font-weight: 500; line-height: 1.5; }
.welcome-project-list small { color: var(--aqua); font-size: 10px; line-height: 1.5; }
.welcome-project-list li.welcome-quiet { display: block; font-size: 12px; color: var(--muted); line-height: 1.7; }
.welcome-next { padding: 15px; border-radius: 8px; border: 1px solid #d8ff6b33; background: #d8ff6b05; }
.welcome-next strong { display: block; margin-top: 6px; font: 700 24px/1.1 var(--display); }
.welcome-next p { margin: 9px 0 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.welcome-budget { margin-top: 18px; font-size: 11px; color: var(--ivory); line-height: 1.6; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.welcome-actions button { flex: 1 1 135px; font-size: 11px; }
@media(max-width:1000px) { .home-content { width: 49vw; margin-left: 30px; } .home-scene-card { right: 25px; width: 34vw; } .home-footer b { display: none; } }
@media(max-width:760px) { .identity-type { width: 140px; } .home-topline { padding: 16px 22px 0; } .home-content { width: min(460px,calc(100vw - 46px)); margin: 28px 23px 126px; } #home-menu { background: linear-gradient(90deg,#111820ef 0%,#111820d6 62%,#1118209c 100%); } .home-scene-card { display: none; } .home-logo { max-width: 420px; } .home-tagline { font-size: 44px; } .home-footer { gap: 26px; min-height: 84px; padding-inline: 23px; } }
@media(max-width:450px) { .home-content { margin-top: 35px; } .home-actions { gap: 8px; } .home-actions button { font-size: 11px; padding-inline: 10px; } .home-tagline { margin-top: 20px; font-size: 40px; } .home-intro { font-size: 12px; } .home-footer { gap: 24px; } .home-footer > span { font-size: 23px; } .home-footer .home-footer-clock { font-size: 17px; } .objective-card { padding: 13px; } .objective-card li { font-size: 9px; gap: 6px; grid-template-columns: 11px 1fr auto; } .objective-card li strong { font-size: 9px; } .welcome-metrics { gap: 7px; } .welcome-metrics > div { padding-inline: 8px; } }
@media(max-height:700px) and (min-width:761px) { .home-content { margin-top: 22px; margin-bottom: 110px; width: min(440px,47vw); } .home-logo { max-width: 400px; } .home-tagline { margin-top: 12px; font-size: 38px; } .home-intro { font-size: 11px; } .home-festival, .home-objective { margin-top: 15px; } .home-actions { margin-top: 17px; } .home-footer { min-height: 73px; } .home-scene-card { bottom: 98px; } }
@media(max-height:620px) and (orientation:landscape) { .brand .identity-type { display: none; } .home-topline { padding-top: 10px; } .home-content { width: min(470px,55vw); margin-top: 13px; margin-bottom: 100px; } .home-logo { max-width: 290px; } .home-tagline { font-size: 32px; margin-top: 12px; } .home-objective { display: none; } .home-festival { margin-top: 14px; } .home-footer { min-height: 64px; padding-block: 12px; } }
@media(prefers-reduced-motion:reduce) { #home-menu *, .objective-card * { transition: none !important; animation: none !important; } }
@media(max-height:780px) and (max-width:760px) { .home-content { margin-top: 20px; } .home-tagline { font-size: 38px; margin-top: 12px; } #home-menu[data-returning=true] .home-intro { display: none; } .home-festival { margin-top: 16px; } .home-objective { margin-top: 16px; padding-top: 10px; } .home-actions { margin-top: 20px; } }
@media(max-height:620px) and (orientation:landscape) { .home-tagline, .home-intro { display: none; } .home-festival .eyebrow { display: none; } }
.build-hint.touch-placement { flex-wrap: wrap; width: min(550px, calc(100% - 260px)); }
.touch-placement .build-copy { flex-basis: 100%; margin-right: 0; }
.touch-placement #place-building { flex: 1; min-height: 44px; }
#pause[data-paused=true] { color: var(--orange); background: #ffaa7310; }
@media (max-width: 760px) {
 .build-hint.touch-placement { width: calc(100% - 80px); max-width: calc(100% - 80px); bottom: max(160px, calc(env(safe-area-inset-bottom) + 148px)); }
 .touch-placement .build-copy { width: 100%; }
 .touch-placement button { min-height: 44px; }
 .touch-placement #build-label { font-size: 13px; }
 .touch-placement .build-feedback { font-size: 11px; }
 .park-action { font-size: 11px; }
}

/* Layout tools and early budget guidance. */
#layout-view[aria-pressed="true"] { background: #d8ff6b18; color: var(--lime); }
.layout-panel { position: absolute; z-index: 6; left: 285px; bottom: 105px; width: 240px; padding: 12px; }
.layout-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.layout-heading strong { font-size: 10px; letter-spacing: 1.5px; color: var(--lime); }
.layout-heading .icon-button { width: 30px; height: 30px; }
.layout-tabs { display: flex; gap: 6px; margin: 8px 0 12px; }
.layout-tabs button { flex: 1; min-height: 38px; font-size: 11px; }
.layout-tabs button[aria-pressed="true"] { color: var(--lime); background: #d8ff6b14; border-color: #d8ff6b55; }
.layout-key { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 8px; }
.layout-chip { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #d1d9d7; }
.layout-chip::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 2px; background: var(--tile-color); }
.layout-chip.available { --tile-color: #b8ef77; }.layout-chip.locked { --tile-color: #e5b766; }.layout-chip.protected { --tile-color: #a692b0; }.layout-chip.walkway { --tile-color: #7ed5e5; }.layout-chip.occupied { --tile-color: #80939c; }.layout-chip.construction { --tile-color: #f6a75d; }.layout-chip.connected { --tile-color: #66e0cf; }.layout-chip.disconnected { --tile-color: #ff786d; }.layout-chip.vip { --tile-color: #dfc278; }
.budget-warning { display: flex; flex-direction: column; gap: 5px; width: 100%; margin: 10px 0; padding: 10px 11px; background: #e5b76613; border: 1px solid #e5b76666; color: #edc98c; text-align: left; }
.budget-warning strong { font-size: 11px; }.budget-warning span { font-size: 9px; line-height: 1.55; }
.budget-warning[data-severity="critical"] { background: #ff786d15; color: #ffa298; border-color: #ff786d88; }
.profit-line.at-risk { color: #f1bb79; }
@media(max-width:760px) { .layout-panel { left: 12px; bottom: max(172px,calc(env(safe-area-inset-bottom) + 160px)); width: min(240px,calc(100vw - 80px)); } .budget-warning { margin: 6px 0; padding: 8px; } }
@media(max-height:620px) { .layout-panel { padding: 9px; }.layout-key { gap: 6px; }.layout-tabs { margin-block: 5px 8px; } }

.funds-stat { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; text-align: left; color: inherit; }
.funds-stat:hover { background: #d8ff6b0b; }
.funds-stat[data-risk="warning"] { background: #e5b76610; }.funds-stat[data-risk="critical"] { background: #ff786d18; }
.funds-stat[data-risk="warning"] strong, .funds-stat[data-risk="warning"] small { color: #edc98c; }.funds-stat[data-risk="critical"] strong, .funds-stat[data-risk="critical"] small { color: #ffa298; }