:root {
  color-scheme: dark;
  --bg: #090b13;
  --panel: #161b28;
  --fg: #f0f3fa;
  --muted: #a2acc2;
  --purple: #7a2cff;
  --pink: #ff2abf;
  --cyan: #9ffcff;
  --accent: #bca0ff;
  --border: #b1c0df2b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { color: var(--fg); background: radial-gradient(ellipse at 7% 0%, #4b2a6826, transparent 48%), radial-gradient(ellipse at 100% 85%, #24464d22, transparent 55%), var(--bg); }
button, input, select { font: inherit; }
button { min-height: 44px; cursor: pointer; color: inherit; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button, a { -webkit-touch-callout: none; }
button:disabled { opacity: .43; cursor: default; }
button:active:not(:disabled) { filter: brightness(1.15); }
button strong, button small { display: block; }
button small { font-weight: 500; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, a, input, select { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--cyan); }
select, input[type="text"], input[type="number"] { display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #b3bfdd45; border-radius: 9px; padding: 9px 10px; background: #252d41; color: #f0f3fb; font-size: 16px; line-height: 1.4; }
select { padding-right: 28px; }
input[type="range"] { min-height: 44px; accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }
svg { display: block; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game-shell { position: relative; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 6px; width: min(1280px,100%); height: 100vh; height: 100svh; height: 100dvh; margin: auto; padding: max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.game-header { display: grid; grid-template-columns: 65px minmax(0,1fr) 47px; align-items: center; min-height: 52px; }
.back-link { display: flex; align-items: center; gap: 3px; min-height: 44px; color: #aeb4cb; font-size: 11px; font-weight: 750; }
.back-link svg { width: 17px; height: 17px; }
.game-brand { min-width: 0; text-align: center; }
.brand-kicker { display: block; margin-bottom: 4px; color: #9b91b4; font-size: 7px; font-weight: 750; letter-spacing: .12em; }
.game-brand h1 { margin: 0; font-size: clamp(18px,5vw,24px); line-height: 1; letter-spacing: -.045em; font-weight: 900; white-space: nowrap; }
.game-brand h1 span { color: #c5aff2; }
.icon-button { display: grid; place-items: center; flex-shrink: 0; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #b4acd436; border-radius: 11px; background: #26263c80; color: #d1c5e7; font-size: 25px; line-height: 1; }
#settings-button { justify-self: end; }
#pause-button { font-size: 0; }
#pause-button>svg { display: none; }
#pause-button[aria-label^="Pause"]::before { content: ""; display: block; width: 12px; height: 17px; border-right: 4px solid currentColor; border-left: 4px solid currentColor; }
#pause-button[aria-label^="Resume"]::before { content: ""; display: block; width: 0; height: 0; margin-left: 3px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid currentColor; }
.profile-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 23px; padding: 0 3px 2px; }
.profile-wallet, .profile-rank { display: flex; align-items: center; gap: 5px; min-width: 0; }
.currency-icon { color: #dcc59b; font-size: 15px; }
.profile-wallet strong { color: #f0d9b3; font-size: 12px; }
.profile-label { color: #9496ac; font-size: 6px; font-weight: 800; letter-spacing: .04em; }
.profile-rank strong { color: #d7c6f1; font-size: 11px; }
.profile-xp-track { display: block; width: 38px; height: 4px; border-radius: 4px; overflow: hidden; background: #ab8bc332; }
.profile-xp-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #c49cec; }
.profile-tag { color: #849ca6; font-size: 6px; font-weight: 750; letter-spacing: .09em; }
.game-stage { position: relative; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #bac9da30; border-radius: 16px; background: #233833; box-shadow: 0 12px 36px #0004; }
.hud { display: grid; grid-row: 1; gap: 6px; min-width: 0; padding: 7px 10px; border-bottom: 1px solid #b6bdd52c; background: linear-gradient(115deg,#1b2232,#1a1d2a); }
.hud-primary { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr) minmax(0,.7fr) 44px; gap: 7px; align-items: center; }
.hud-stat { min-width: 0; }
.hud-label { display: block; margin-bottom: 4px; color: #a0a7bc; font-size: 6px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.hud-stat strong { display: block; color: #ece5f6; font-size: 16px; line-height: 1.1; white-space: nowrap; }
.cash-stat strong { color: #f0d7a4; font-size: 21px; }
.rating-stat strong { color: #e8c787; font-size: 15px; letter-spacing: 1px; }
.hud-clock { text-align: right; }
.hud-clock span { display: block; margin-bottom: 3px; color: #a5b7c2; font-size: 8px; }
.hud-clock strong { color: #d5eeee; font-size: 16px; font-variant-numeric: tabular-nums; }
.hud-secondary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.hud-secondary span { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; min-width: 0; }
.hud-secondary small { color: #98a9b9; font-size: 6px; font-weight: 750; white-space: nowrap; }
.hud-secondary strong { color: #dce2ed; font-size: 10px; line-height: 1.25; white-space: nowrap; }
#profit-value { color: #bed5b4; }
.hud-objective { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hud-objective p { min-width: 0; margin: 0; color: #b7c5d6; font-size: 9px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip, .status-tag { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 20px; padding: 3px 7px; border: 1px solid #a5b8d62d; border-radius: 6px; background: #879ba418; color: #c8d4db; font-size: 8px; font-weight: 750; line-height: 1.2; }
.status-tag.is-good, .status-tag.is-complete { color: #c3e5c9; border-color: #9fcea547; background: #5d836124; }
.status-tag.is-warning, .status-tag.is-waiting { color: #e6cba3; border-color: #d7ac6643; background: #a2803523; }
.status-tag.is-bad { color: #ecc2ca; border-color: #d590a84d; background: #955f6f25; }
.tutorial-panel { grid-row: 2; min-width: 0; padding: 7px 10px; border-bottom: 1px solid #a6c5c53d; background: #253d40f2; }
.tutorial-kicker { display: block; color: #a9d2d3; font-size: 6px; font-weight: 800; letter-spacing: .09em; }
.tutorial-panel p { margin: 5px 0 7px; color: #e6f0e8; font-size: 11px; line-height: 1.45; }
.tutorial-actions { display: flex; gap: 7px; }
.tutorial-actions button { padding: 6px 10px; font-size: 10px; }
.tutorial-actions .primary-button { flex: 1; }
.game-workspace { position: relative; grid-row: 3; min-width: 0; min-height: 0; overflow: hidden; }
.world-frame { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: #5b7965; }
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.camera-controls { position: absolute; right: 7px; top: 7px; display: flex; gap: 4px; pointer-events: auto; }
.camera-button { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #e6f0e254; border-radius: 10px; background: #1c2c31dc; color: #e5efe9; box-shadow: 0 3px 8px #0002; font-size: 23px; font-weight: 650; }
.camera-button svg { width: 18px; height: 18px; }
.field-hint { position: absolute; bottom: 9px; left: 10px; pointer-events: none; color: #f0f5e5b0; text-shadow: 0 1px 4px #000b; font-size: 6px; font-weight: 800; letter-spacing: .09em; }
.selection-panel { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: min(265px,48%); border: 1px solid #c8cbdd61; border-radius: 14px; background: #18202df7; box-shadow: 0 9px 28px #0006; overflow: hidden; }
.selection-bar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 7px 0 12px; border-bottom: 1px solid #bbcae329; }
.selection-kicker { color: #aab8ca; font-size: 7px; font-weight: 800; letter-spacing: .11em; }
.selection-bar .icon-button { border: 0; background: none; }
.selection-content { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 10px 11px 12px; scrollbar-width: thin; }
.selection-heading, .detail-title { margin: 0 0 7px; color: #eee8f8; font-size: 16px; line-height: 1.35; letter-spacing: -.025em; }
.selection-heading h3, .selection-content h3 { margin: 0 0 7px; color: #eee8f8; font-size: 15px; line-height: 1.35; }
.selection-copy, .detail-copy, .selection-content>p { margin: 5px 0 9px; color: #b0bccf; font-size: 11px; line-height: 1.6; }
.detail-grid, .building-stats, .aircraft-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 9px 0; }
.detail-actions, .selection-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.detail-actions>* { flex: 1; min-width: 105px; }
.selection-content select { margin: 6px 0 9px; }
.selection-content button { font-size: 11px; }
.placement-toolbar { grid-row: 4; padding: 8px 10px; border-top: 1px solid #bcafdf41; background: #292739; }
.placement-toolbar p { margin: 0 0 6px; color: #d5cce7; font-size: 10px; line-height: 1.5; }
.placement-actions { display: grid; grid-template-columns: 1fr 1.5fr .8fr; gap: 6px; }
.placement-actions button { padding: 7px; font-size: 11px; }
.placement-actions span { margin-right: 4px; font-size: 18px; }
.command-bar { grid-row: 5; display: flex; flex-direction: column; gap: 6px; padding: 7px 9px; border-top: 1px solid #afbacd31; background: linear-gradient(115deg,#1b2331,#1e2233); }
.management-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.command-button { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border: 1px solid #b9bfd137; border-radius: 10px; background: #303246; color: #dbd9eb; font-size: 10px; font-weight: 750; }
.command-button svg { flex-shrink: 0; width: 16px; height: 16px; }
.build-command { background: #725a972e; border-color: #be9fdf57; color: #e5d2f7; }
.speed-control { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.speed-control>span { color: #95a2b9; font-size: 7px; font-weight: 800; letter-spacing: .05em; }
.speed-control select { width: min(180px,56%); min-height: 44px; padding: 7px 23px 7px 9px; font-size: 16px; }

.primary-button, .secondary-button, .tertiary-button, .danger-button, .menu-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 750; line-height: 1.4; text-align: center; }
.primary-button { color: #fff7ff; border-color: #c8a6e95c; background: linear-gradient(110deg,color-mix(in srgb,var(--accent) 53%,#462273),#925c9e); box-shadow: 0 4px 14px #5c367124; }
.secondary-button { color: #dcdbea; border-color: #b9bfd13c; background: #303449; }
.tertiary-button { color: #b7bdcf; border-color: #b0badb23; background: #1f263633; }
.danger-button { color: #f0c2cb; border-color: #d997aa57; background: #68374958; }
.wide-button, .full-width { width: 100%; }
.game-overlay { position: absolute; inset: 0; z-index: 9; display: grid; place-items: start center; padding: 23px 21px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: linear-gradient(135deg,#101622f8,#15192af2 58%,#23192de8); scrollbar-width: thin; }
.overlay-panel { width: min(520px,100%); text-align: center; margin: auto; }
.overlay-kicker { display: block; margin: 0 0 10px; color: #b7a2d3; font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.hero-art { width: min(275px,86%); height: 145px; margin: 0 auto 13px; border: 1px solid #a1b5cd34; border-radius: 15px; overflow: hidden; background: #314c4b; box-shadow: 0 9px 24px #0002; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.overlay-title { margin: 0; color: #f2edf8; font-size: clamp(30px,9.3vw,44px); line-height: 1.02; letter-spacing: -.055em; font-weight: 900; }
.overlay-title span { color: #c6a8e4; }
.overlay-copy { margin: 12px 0 16px; color: #adb9ce; font-size: 12px; line-height: 1.7; }
.menu-record { margin: 0 0 10px; color: #afbad0; font-size: 11px; line-height: 1.5; }
.menu-primary { display: flex; flex-direction: column; gap: 3px; width: 100%; min-height: 63px; margin: 12px 0 9px; }
.menu-primary strong { font-size: 14px; }
.menu-primary small { color: #e0cfe9; font-size: 10px; }
.menu-primary>.primary-button { width: 100%; display: flex; flex-direction: column; min-height: 60px; }
.menu-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.menu-modes button { display: flex; flex-direction: column; gap: 4px; min-height: 69px; padding: 10px 6px; }
.menu-modes strong { font-size: 11px; line-height: 1.35; }
.menu-modes small { color: #9facbf; font-size: 9px; }
.menu-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 10px 0 6px; }
.menu-actions button { min-width: 0; padding: 8px 4px; font-size: 10px; }
.arcade-return, .menu-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 3px; color: #a4afc5; font-size: 11px; font-weight: 750; }
.result-grid, .stats-grid, .finance-grid, .dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.result-grid { margin: 17px 0; text-align: left; }
.stat-cell { min-width: 0; padding: 12px; border: 1px solid #aabae12e; border-radius: 10px; background: #4c597b17; }
.stat-cell span, .stat-cell small, .stat-cell .label { display: block; margin-bottom: 5px; color: #a8b6cb; font-size: 9px; line-height: 1.4; }
.stat-cell strong, .stat-cell .value { display: block; color: #e7e2f0; font-size: 18px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.result-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.result-actions>* , .dialog-actions>* { flex: 1; min-width: 120px; }
.result-stars { margin: 12px 0; color: #e8c684; font-size: 31px; letter-spacing: 4px; }
.result-reward { color: #d9bd85; font-size: 12px; line-height: 1.6; }
.save-note { position: absolute; right: max(12px,env(safe-area-inset-right)); bottom: max(8px,env(safe-area-inset-bottom)); left: max(12px,env(safe-area-inset-left)); z-index: 11; margin: 0; padding: 9px 12px; border: 1px solid #d9b78261; border-radius: 9px; background: #2c2534f5; color: #efd1aa; font-size: 10px; line-height: 1.5; }
.toast { position: fixed; top: max(94px,calc(env(safe-area-inset-top) + 90px)); left: 50%; z-index: 50; transform: translateX(-50%); width: max-content; max-width: min(440px,calc(100% - 30px)); padding: 11px 15px; border: 1px solid #b2c6d64d; border-radius: 11px; background: #242a3bf5; color: #e3e4f2; font-size: 11px; font-weight: 650; text-align: center; line-height: 1.5; box-shadow: 0 6px 22px #0006; pointer-events: none; }
.game-shell.is-menu .game-stage { grid-template-rows: minmax(0,1fr); }
.game-shell.is-menu .game-workspace { grid-row: 1; }
.game-shell.is-menu .command-bar, .game-shell.is-menu .placement-toolbar, .game-shell.is-menu .camera-controls, .game-shell.is-menu .field-hint { display: none; }

.game-dialog { width: min(620px,calc(100% - 24px)); max-width: 100%; max-height: calc(100vh - 30px); max-height: calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom))); margin: auto; padding: 0; color: var(--fg); border: 1px solid #a5b7d54d; border-radius: 18px; background: linear-gradient(125deg,#1b2231,#222335); box-shadow: 0 18px 65px #0009; overflow: hidden; }
.game-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr); }
.game-dialog::backdrop { background: #080b14bb; backdrop-filter: blur(7px); }
.wide-dialog { width: min(840px,calc(100% - 24px)); }
.confirm-dialog { width: min(470px,calc(100% - 24px)); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid #b2c1dd2b; background: #8592b008; }
.dialog-header>div { min-width: 0; }
.dialog-kicker { display: block; margin-bottom: 6px; color: #a8a0bc; font-size: 7px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; }
.dialog-header h2 { margin: 0; color: #eee8f8; font-size: 24px; font-weight: 850; letter-spacing: -.035em; line-height: 1.1; }
.dialog-header .icon-button { background: #57506d27; }
.dialog-body { min-width: 0; min-height: 0; padding: 17px 18px 22px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: thin; }
.dialog-body p { overflow-wrap: anywhere; }
.dialog-intro { margin: 0 0 16px; color: #b5c0d3; font-size: 12px; line-height: 1.75; }
.dialog-body h3 { margin: 17px 0 9px; color: #e6e1f1; font-size: 16px; letter-spacing: -.02em; }
.category-tabs, .collection-category, .tab-row { display: flex; gap: 6px; margin: 12px 0 15px; padding-bottom: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.category-button, .tab-button, .category-tabs button, .collection-category button, .tab-row button { flex-shrink: 0; min-height: 44px; padding: 8px 11px; border: 1px solid #a9b6d53c; border-radius: 9px; background: #2a3146; color: #b8c3d8; font-size: 11px; font-weight: 750; }
.category-button.is-active, .category-tabs button.is-active, .category-tabs button[aria-pressed="true"], .tab-button.is-active, .tab-row button.is-active { background: #55436d; color: #f0e4fa; border-color: #c4a2e35f; }
.build-grid, .catalog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.catalog-card, .facility-card, .card { min-width: 0; padding: 13px; border: 1px solid #aebbd937; border-radius: 12px; background: linear-gradient(125deg,#30384a,#2b3043); }
.catalog-card, .facility-card { text-align: left; }
.catalog-card>canvas, .facility-preview { display: block; width: 100%; height: 72px; margin: 0 auto 7px; object-fit: contain; border-radius: 8px; background: radial-gradient(ellipse,#7590901b,transparent); }
.catalog-card strong, .facility-card strong, .card-heading { display: block; margin: 0 0 5px; color: #e9e3f4; font-size: 13px; line-height: 1.4; }
.catalog-card small, .facility-card small { color: #b5c2d0; font-size: 10px; line-height: 1.5; }
.card-description, .card p { margin: 6px 0 10px; color: #b4c0d3; font-size: 11px; line-height: 1.65; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-heading h3 { margin: 0; font-size: 15px; line-height: 1.4; }
.card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.card-actions>* { flex: 1; min-width: 100px; }
.card-actions button { font-size: 11px; }
.card+.card, .challenge-card+.challenge-card { margin-top: 10px; }
.progress-bar, .progress-track, .service-track { display: block; height: 5px; overflow: hidden; border-radius: 5px; background: #aeb4d229; }
.progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#a885d6,#b1d8d0); }
.progress-label { display: flex; justify-content: space-between; gap: 8px; margin: 7px 0; color: #b6c2d6; font-size: 10px; line-height: 1.5; }
.flight-board-layout { display: grid; grid-template-columns: 1fr; gap: 15px; }
.flight-list { display: grid; gap: 8px; min-width: 0; }
.flight-card, .flight-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid #aebbd937; border-radius: 10px; background: #30394b; text-align: left; }
.flight-card.is-selected, .flight-row.is-selected { border-color: #bc9be180; background: #42364f; }
.flight-card strong, .flight-row strong { display: block; color: #f0e9f7; font-size: 12px; }
.flight-card small, .flight-row small { display: block; margin-top: 4px; color: #b6c4d5; font-size: 10px; line-height: 1.5; }
.flight-detail { min-width: 0; }
.flight-detail:empty { display: none; }
.flight-detail canvas, .aircraft-preview { display: block; width: 160px; max-width: 100%; height: 94px; object-fit: contain; margin: auto; }
.service-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; padding: 8px 0; border-bottom: 1px solid #b5c6de24; color: #b8c8d7; font-size: 11px; }
.service-row .progress-bar, .service-row .service-track { grid-column: 1 / -1; }
.service-row>small { grid-column: 1 / -1; color: #d0bea2; font-size: 10px; line-height: 1.6; }
.services-list { margin: 12px 0; }
.airport-name-setting { margin: 0 0 20px; }
.airport-name-setting>label { display: block; margin-bottom: 7px; color: #b5c6d8; font-size: 11px; font-weight: 750; }
.inline-input { display: flex; align-items: center; gap: 7px; }
.inline-input input { flex: 1; }
.inline-input button { flex-shrink: 0; font-size: 11px; }
.department-card, .research-card, .contract-card, .milestone-card, .incident-card { margin: 10px 0; }
.milestone-card.is-complete { border-color: #bdd2b840; }
.milestone-card.is-current { border-color: #c3a4e864; }
.chapter-heading { margin: 22px 0 11px; color: #d9ccea; font-size: 15px; }
.finance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #b5c6de25; color: #b2c2d4; font-size: 12px; }
.finance-row strong { color: #e2e7ed; font-size: 13px; text-align: right; }
.challenge-card { display: block; width: 100%; padding: 14px; border: 1px solid #adb9db40; border-radius: 12px; background: #313749; text-align: left; }
.challenge-card strong { display: block; margin-bottom: 5px; font-size: 14px; color: #eae4f5; }
.challenge-card small, .challenge-card p { display: block; color: #b3c0d3; font-size: 11px; line-height: 1.6; }
.cosmetic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.cosmetic-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px; border: 1px solid #b0bcda40; border-radius: 12px; background: #303449; }
.cosmetic-card strong { font-size: 13px; color: #eae3f5; }
.cosmetic-card small, .cosmetic-card p { margin: 0; color: #b3bdd2; font-size: 10px; line-height: 1.6; }
.cosmetic-card button { width: 100%; margin-top: auto; font-size: 11px; }
.cosmetic-swatch { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #b1b6ca43; border-radius: 12px; background: color-mix(in srgb,var(--swatch,#9fcfc4) 20%,#252b39); color: var(--swatch,#9fcfc4); font-size: 27px; }
.achievement-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #b5c6de2b; }
.achievement-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid #b7b8d23d; border-radius: 12px; background: #78658e28; color: #bba6d4; font-size: 23px; }
.achievement-card.is-unlocked .achievement-icon { color: #efd092; border-color: #d6bd844c; background: #9a805a25; }
.achievement-body { flex: 1; min-width: 0; }
.achievement-body h3, .achievement-body>strong { display: block; margin: 0 0 6px; color: #e9e3f3; font-size: 13px; line-height: 1.4; }
.achievement-body p { margin: 0 0 8px; color: #b8c2d5; font-size: 11px; line-height: 1.65; }
.achievement-body small { display: block; margin-top: 6px; color: #a9b2c8; font-size: 9px; line-height: 1.5; }
.notice, .empty-state { padding: 13px; border: 1px solid #ceb9863e; border-radius: 10px; background: #a07f3820; color: #e3d2b1; font-size: 12px; line-height: 1.7; }
.empty-state { border-color: #a5b8d63b; background: #768fac16; color: #b9cadd; }
.setting-row, .volume-row, .select-setting { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 15px 0; border-bottom: 1px solid #b5c6de29; }
.setting-row { cursor: pointer; }
.setting-row>span:first-child, .volume-row>span, .select-setting>span { min-width: 0; }
.setting-row strong, .volume-row strong, .select-setting strong { display: block; margin-bottom: 5px; color: #e8e4f1; font-size: 13px; font-weight: 750; }
.setting-row small, .volume-row small, .select-setting small { display: block; color: #b5c1d2; font-size: 11px; line-height: 1.65; }
.setting-row input { position: absolute; right: 0; width: 48px; height: 44px; opacity: 0; cursor: pointer; }
.switch { position: relative; display: block; flex-shrink: 0; width: 43px; height: 26px; border: 1px solid #b2a8c657; border-radius: 20px; background: #454058; pointer-events: none; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #c2bbd2; transition: transform .16s,background .16s; }
.setting-row input:checked+.switch { border-color: #c9a0e6; background: #775894; }
.setting-row input:checked+.switch::after { transform: translateX(17px); background: #f2e4ff; }
.setting-row input:focus-visible+.switch { outline: 2px solid var(--cyan); outline-offset: 3px; }
.volume-row input { flex-shrink: 0; width: 108px; }
.select-setting { flex-wrap: wrap; }
.select-setting select { width: 100%; margin-top: 4px; }
.settings-status { color: #b8c6db; font-size: 11px; line-height: 1.6; }
.local-save-info { padding: 12px 0; color: #a4b2c9; font-size: 11px; line-height: 1.75; }
.release-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 22px; color: #9296ae; font-size: 7px; font-weight: 750; letter-spacing: .06em; }
.sandbox-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 10px; margin: 16px 0; }
.input-setting>span { display: block; margin-bottom: 7px; color: #c1cbdd; font-size: 11px; font-weight: 750; }
.help-section { display: flex; gap: 11px; margin-bottom: 20px; }
.help-number { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #b5b2d548; border-radius: 10px; background: #76628d27; color: #cab0e7; font-size: 11px; font-weight: 850; }
.help-section h3 { margin: 2px 0 6px; color: #eae5f3; font-size: 14px; }
.help-section p { margin: 0; color: #b7c2d3; font-size: 11px; line-height: 1.8; }
.keyboard-guide { display: flex; flex-wrap: wrap; gap: 8px 13px; margin: 18px 0; color: #adb9cf; font-size: 10px; line-height: 1.8; }
kbd { display: inline-block; padding: 2px 5px; border: 1px solid #acb4d14a; border-radius: 5px; background: #30354b; color: #e3def1; font-family: inherit; font-size: 9px; font-weight: 750; }
.noscript-note { position: fixed; inset: 15%; z-index: 150; padding: 30px; border: 1px solid #aabbd0; border-radius: 16px; background: #222c3b; font-size: 14px; line-height: 1.8; }
.noscript-note a { display: block; margin-top: 20px; color: var(--cyan); }

@media (min-width: 700px) and (min-height: 650px) {
  .game-shell { max-width: 1000px; gap: 9px; padding-top: max(13px,env(safe-area-inset-top)); padding-bottom: max(13px,env(safe-area-inset-bottom)); }
  .game-header { min-height: 60px; }
  .game-brand h1 { font-size: 31px; }
  .brand-kicker { font-size: 8px; }
  .game-stage { border-radius: 19px; }
  .hud { padding: 11px 15px; }
  .hud-primary { grid-template-columns: 1fr 1fr 1fr 44px; }
  .hud-label { font-size: 8px; }
  .cash-stat strong { font-size: 25px; }
  .rating-stat strong { font-size: 22px; }
  .hud-secondary small { font-size: 8px; }
  .hud-secondary strong { font-size: 12px; }
  .command-bar { flex-direction: row; align-items: center; gap: 14px; padding: 11px 14px; }
  .management-controls { flex: 1; }
  .command-button { font-size: 12px; }
  .speed-control { flex-direction: column; align-items: flex-start; gap: 3px; width: 180px; }
  .speed-control select { width: 100%; }
  .selection-panel { left: 20%; right: 20%; max-height: min(300px,45%); }
  .selection-content { padding: 14px; }
  .build-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .flight-board-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 359px) {
  .game-shell { gap: 4px; padding-left: max(8px,env(safe-area-inset-left)); padding-right: max(8px,env(safe-area-inset-right)); }
  .game-header { grid-template-columns: 53px minmax(0,1fr) 44px; min-height: 48px; }
  .back-link { font-size: 10px; gap: 1px; }
  .game-brand h1 { font-size: 18px; }
  .brand-kicker { font-size: 6px; letter-spacing: .08em; }
  .profile-tag { display: none; }
  .hud { padding: 6px 7px; gap: 5px; }
  .hud-primary { gap: 4px; }
  .hud-label { font-size: 5px; }
  .cash-stat strong { font-size: 17px; }
  .rating-stat strong { font-size: 12px; letter-spacing: 0; }
  .hud-clock strong { font-size: 13px; }
  .hud-secondary { gap: 4px; }
  .hud-secondary small { font-size: 5px; }
  .hud-secondary strong { font-size: 9px; }
  .hud-objective p { font-size: 8px; }
  .command-bar { padding: 6px 7px; }
  .management-controls { gap: 4px; }
  .command-button { gap: 3px; font-size: 9px; }
  .command-button svg { width: 13px; height: 13px; }
  .selection-panel { left: 6px; right: 6px; bottom: 6px; }
  .selection-content { padding: 8px; }
  .placement-toolbar { padding: 7px; }
  .placement-actions button { font-size: 10px; padding: 6px; }
  .game-overlay { padding: 17px; }
  .overlay-title { font-size: 31px; }
  .overlay-copy { font-size: 11px; }
  .menu-modes strong { font-size: 10px; }
  .menu-modes small { font-size: 8px; }
  .menu-actions button { font-size: 9px; }
  .dialog-header { padding: 13px 12px 11px; }
  .dialog-header h2 { font-size: 21px; }
  .dialog-kicker { font-size: 6px; }
  .dialog-body { padding: 14px 12px 18px; }
  .catalog-card, .facility-card, .card { padding: 10px; }
  .catalog-card strong { font-size: 12px; }
  .catalog-card small { font-size: 9px; }
  .volume-row input { width: 84px; }
  .sandbox-grid { gap: 12px 7px; }
  .stat-cell { padding: 10px; }
  .stat-cell strong, .stat-cell .value { font-size: 16px; }
}
@media (max-height: 690px) and (orientation: portrait) {
  .game-shell { gap: 4px; }
  .game-header { min-height: 48px; }
  .profile-strip { min-height: 20px; }
  .game-overlay { padding: 16px; }
  .hero-art { width: 185px; height: 92px; margin-bottom: 7px; }
  .overlay-title { font-size: 31px; }
  .overlay-kicker { font-size: 6px; margin-bottom: 7px; }
  .overlay-copy { margin: 9px 0 11px; font-size: 11px; }
  .menu-primary { min-height: 54px; margin: 10px 0 7px; }
  .menu-primary>.primary-button { min-height: 54px; }
  .menu-modes button { min-height: 57px; }
  .menu-actions { gap: 5px; margin: 7px 0 3px; }
  .arcade-return { margin-top: 0; }
  .tutorial-panel { padding: 6px 8px; }
  .tutorial-panel p { margin: 4px 0 5px; font-size: 10px; line-height: 1.4; }
  .tutorial-kicker { font-size: 6px; }
  .tutorial-actions button { padding: 6px; font-size: 9px; }
  .field-hint { display: none; }
  .selection-panel { max-height: 49%; }
}
@media (orientation: landscape) and (max-height: 650px) {
  .game-shell { grid-template-rows: auto minmax(0,1fr); gap: 5px; padding-top: max(5px,env(safe-area-inset-top)); padding-bottom: max(5px,env(safe-area-inset-bottom)); }
  .game-header { grid-template-columns: 70px minmax(0,1fr) 65px; min-height: 44px; }
  .game-brand { display: flex; justify-content: center; align-items: center; gap: 12px; }
  .brand-kicker { margin: 0; font-size: 6px; }
  .game-brand h1 { font-size: 22px; }
  .profile-strip { display: none; }
  .game-stage { grid-template-columns: minmax(0,1fr) 245px; grid-template-rows: auto minmax(0,1fr) auto auto; border-radius: 12px; }
  .game-workspace { display: contents; }
  .world-frame { grid-column: 1; grid-row: 1 / 5; border-right: 1px solid #c4d0d02b; }
  .hud { grid-column: 2; grid-row: 1; gap: 5px; padding: 7px 8px; border-bottom: 0; }
  .hud-primary { grid-template-columns: minmax(0,1fr) minmax(0,.9fr) 44px; gap: 5px; }
  .cash-stat { grid-column: 1; grid-row: 1; }
  .rating-stat { grid-column: 2; grid-row: 1; }
  #pause-button { grid-column: 3; grid-row: 1; }
  .hud-clock { grid-column: 1 / 4; grid-row: 2; display: flex; align-items: center; justify-content: space-between; }
  .hud-clock span { margin: 0; font-size: 8px; }
  .hud-clock strong { font-size: 11px; }
  .cash-stat strong { font-size: 18px; }
  .rating-stat strong { font-size: 13px; letter-spacing: 0; }
  .hud-label { font-size: 5px; }
  .hud-secondary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 7px; }
  .hud-secondary small { font-size: 5px; }
  .hud-secondary strong { font-size: 9px; }
  .hud-objective p { font-size: 8px; }
  .status-chip { font-size: 7px; padding: 2px 5px; min-height: 18px; }
  .tutorial-panel { grid-column: 2; grid-row: 2; min-height: 0; padding: 7px 8px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid #b8d0d130; border-bottom: 0; }
  .tutorial-panel p { font-size: 9px; line-height: 1.5; }
  .tutorial-kicker { font-size: 5px; }
  .tutorial-actions { gap: 5px; }
  .tutorial-actions button { font-size: 8px; padding: 6px 4px; }
  .selection-panel { position: relative; grid-column: 2; grid-row: 2; top: auto; right: auto; bottom: auto; left: auto; width: auto; max-height: 100%; margin: 0 7px; border-radius: 10px; box-shadow: none; }
  .selection-content { padding: 8px; }
  .selection-bar { padding-left: 9px; }
  .selection-content h3, .detail-title { font-size: 14px; }
  .selection-content p, .selection-copy, .detail-copy { font-size: 10px; }
  .detail-grid { gap: 5px; }
  .detail-grid .stat-cell { padding: 8px; }
  .detail-grid .stat-cell strong { font-size: 12px; }
  .detail-grid .stat-cell span { font-size: 8px; }
  .game-stage:has(#selection-panel:not([hidden])) #tutorial-panel { position: absolute; grid-column: 1; grid-row: 1 / 5; left: 7px; right: 7px; bottom: 7px; top: auto; z-index: 5; width: auto; max-height: 48%; border: 1px solid #bdd3d657; border-radius: 10px; background: #263d42f5; box-shadow: 0 5px 18px #0004; }
  .game-stage:has(#selection-panel:not([hidden])) .hud-secondary,
  .game-stage:has(#selection-panel:not([hidden])) .hud-objective,
  .game-stage:has(#selection-panel:not([hidden])) .hud-clock,
  .game-stage:has(#placement-toolbar:not([hidden])) .hud-secondary,
  .game-stage:has(#placement-toolbar:not([hidden])) .hud-objective,
  .game-stage:has(#placement-toolbar:not([hidden])) .hud-clock { display: none; }
  .placement-toolbar { grid-column: 2; grid-row: 3; padding: 6px 7px; }
  .placement-toolbar p { font-size: 9px; margin-bottom: 4px; }
  .placement-actions { gap: 4px; }
  .placement-actions button { font-size: 9px; padding: 5px 3px; }
  .placement-actions span { font-size: 14px; margin-right: 1px; }
  .command-bar { grid-column: 2; grid-row: 4; gap: 5px; padding: 6px 7px; }
  .management-controls { gap: 4px; }
  .command-button { flex-direction: column; gap: 3px; font-size: 8px; padding: 5px 2px; }
  .command-button svg { width: 14px; height: 14px; }
  .speed-control>span { font-size: 6px; }
  .speed-control select { width: 118px; padding: 6px 23px 6px 7px; }
  .camera-controls { right: 6px; top: 6px; gap: 3px; }
  .field-hint { display: none; }
  .game-shell.is-menu .game-stage { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
  .game-shell.is-menu .world-frame { grid-column: 1; grid-row: 1; border: 0; }
  .game-overlay { padding: 16px 24px; }
  .overlay-panel { width: min(590px,100%); }
  .hero-art { display: none; }
  .overlay-title { font-size: 31px; }
  .overlay-copy { font-size: 11px; margin: 8px 0 10px; }
  .overlay-kicker { font-size: 6px; margin-bottom: 6px; }
  .menu-primary { min-height: 51px; margin: 10px 0 7px; }
  .menu-primary>.primary-button { min-height: 51px; }
  .menu-modes { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .menu-modes button { min-height: 59px; padding: 8px 5px; }
  .menu-modes strong { font-size: 10px; }
  .menu-modes small { font-size: 8px; }
  .menu-actions { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin: 8px 0 3px; }
  .menu-actions button { font-size: 9px; }
  .arcade-return { margin: 0; }
  .game-dialog { max-height: calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))); }
  .dialog-header { padding: 11px 16px 10px; }
  .dialog-header h2 { font-size: 22px; }
  .dialog-body { padding: 14px 16px 19px; }
  .flight-board-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .toast { top: max(55px,calc(env(safe-area-inset-top) + 48px)); }
}
@media (orientation: landscape) and (max-height: 360px) {
  .game-stage { grid-template-columns: minmax(0,1fr) 226px; }
  .brand-kicker { display: none; }
  .game-brand h1 { font-size: 21px; }
  .hud { padding: 5px 7px; gap: 4px; }
  .hud-primary { gap: 3px; }
  .cash-stat strong { font-size: 16px; }
  .rating-stat strong { font-size: 12px; }
  .hud-clock { display: none; }
  .hud-secondary { gap: 2px 6px; }
  .hud-objective p { font-size: 7px; }
  .tutorial-panel { padding: 5px 7px; }
  .tutorial-panel p { font-size: 8px; line-height: 1.4; margin: 4px 0; }
  .tutorial-actions button { font-size: 7px; }
  .command-bar { padding: 5px 6px; }
  .command-button { font-size: 7px; }
  .speed-control>span { font-size: 5px; }
  .placement-toolbar { padding: 5px 6px; }
  .placement-toolbar p { font-size: 8px; }
  .game-overlay { padding: 12px 19px; }
  .overlay-title { font-size: 28px; }
  .overlay-copy { font-size: 10px; margin: 7px 0 9px; }
  .menu-primary { min-height: 49px; margin: 8px 0 6px; }
  .menu-modes button { min-height: 56px; }
  .menu-modes strong { font-size: 9px; }
  .menu-actions button { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .game-dialog::backdrop { backdrop-filter: none; }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* The controller renders its real records, menus and cards into the shell. */
.eyebrow { margin: 0 0 10px; color: #b7a2d3; font-size: 7px; font-weight: 850; letter-spacing: .12em; line-height: 1.6; }
.overlay-panel>h1, .overlay-panel>h2 { margin: 0; color: #f2edf8; font-size: clamp(31px,8.8vw,44px); font-weight: 900; line-height: 1.04; letter-spacing: -.055em; }
.overlay-panel>h1 span { color: #c6a8e4; }
.menu-copy, .overlay-panel>p:not(.eyebrow):not(.menu-record) { margin: 12px 0 16px; color: #adb9ce; font-size: 12px; line-height: 1.7; }
.menu-record:has(.stat-cell) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 15px 0 12px; text-align: left; }
.menu-record .stat-cell { padding: 10px; }
.menu-record .stat-cell span { font-size: 8px; }
.menu-record .stat-cell strong { font-size: 13px; }
.menu-actions>[data-action="continue"], .menu-actions>[data-action="resume"] { grid-column: 1 / -1; min-height: 52px; font-size: 13px; }
.card>h3 { margin: 0 0 7px; font-size: 15px; line-height: 1.4; }
.build-grid>.card, .cosmetic-grid>.card { margin: 0; }
.catalog-card .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.catalog-card .stat-cell { padding: 8px; }
.catalog-card .stat-cell span { font-size: 8px; }
.catalog-card .stat-cell strong { font-size: 12px; }
.catalog-card .primary-button { width: 100%; margin-top: 7px; font-size: 11px; }
.card.achievement-card { display: block; padding: 14px; }
.card.achievement-card h3 { color: #e9e3f3; font-size: 14px; }
.detail-title>span { display: block; margin-top: 4px; color: #acbdd1; font-size: 10px; font-weight: 650; letter-spacing: 0; }
.target-setting { display: block; margin: 10px 0; color: #b6c4d6; font-size: 11px; font-weight: 750; }
.target-setting select { margin-top: 6px; }
.confirmation-card { margin-top: 12px; padding: 12px; border: 1px solid #c5a3d75a; border-radius: 10px; background: #67517c27; }
.confirmation-card p { margin: 0 0 10px; color: #ddd1e9; font-size: 11px; line-height: 1.65; }
.confirmation-card button { width: 100%; margin-top: 7px; }
.empty-copy, #flight-detail>p { margin: 0; color: #b5c4d5; font-size: 12px; line-height: 1.75; }
#operations-content>button, #career-content>button { margin: 8px 6px 0 0; }
#continue-sandbox { width: 100%; margin: 14px 0 8px; }
#operations-content .card>label { display: block; margin: 9px 0; color: #b6c4d6; font-size: 11px; font-weight: 750; }
#operations-content .card>label select { margin-top: 6px; }
.cosmetic-grid>.card .primary-button { width: 100%; }
.cosmetic-grid>.card .cosmetic-swatch { margin: 9px 0; }
@media (max-width:359px) {
  .menu-record .stat-cell { padding: 8px; }
  .menu-record .stat-cell strong { font-size: 11px; }
  .menu-record .stat-cell span { font-size: 7px; }
}
@media (max-height:690px) and (orientation:portrait) {
  .overlay-panel>h1, .overlay-panel>h2 { font-size: 31px; }
  .menu-copy, .overlay-panel>p:not(.eyebrow):not(.menu-record) { margin: 8px 0 10px; font-size: 11px; }
  .menu-record:has(.stat-cell) { margin: 11px 0 9px; }
}
@media (orientation:landscape) and (max-height:650px) {
  .overlay-panel>h1, .overlay-panel>h2 { font-size: 31px; }
  .menu-copy, .overlay-panel>p:not(.eyebrow):not(.menu-record) { margin: 8px 0 10px; font-size: 11px; }
  .menu-record:has(.stat-cell) { margin: 10px 0 8px; }
  .menu-record .stat-cell { padding: 8px 10px; }
  .menu-record .stat-cell strong { font-size: 12px; }
  .menu-actions>[data-action="continue"], .menu-actions>[data-action="resume"] { grid-column: 1 / -1; min-height: 47px; }
}