:root {
  color-scheme: dark; font-family: 'Segoe UI', Arial, sans-serif;
  --text: #eff8f5; --muted: #9aaeb9; --green: #9bf3b2; --amber: #ffd081; --blue: #92d3fa; --edge: #9bbdc22b;
  --gutter: 26px;
  --top: max(var(--gutter), env(safe-area-inset-top)); --bottom: max(var(--gutter), env(safe-area-inset-bottom));
  --left: max(var(--gutter), env(safe-area-inset-left)); --right: max(var(--gutter), env(safe-area-inset-right));
}

#zone-hud { position:absolute; top:calc(var(--top) + 82px); left:50%; transform:translateX(-50%); display:flex; align-items:center; flex-direction:column; gap:7px; max-width:90vw; }
#overview-button,#challenge-chip { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:8px 14px; border-radius:14px; color:#c8ebe6; font-size:10px; letter-spacing:.7px; }
#overview-button svg { width:18px; }
#overview-button small { color:#89abb7; font-size:8px; }
#overview-button kbd { margin:0; }
#challenge-chip { color:#ffdfa6; border-color:#eab96560; font-weight:700; font-variant-numeric:tabular-nums; }
#challenge-banner { position:absolute; top:31%; left:50%; transform:translateX(-50%); padding:22px 32px; width:max-content; max-width:92vw; text-align:center; font-size:clamp(15px,2vw,27px); font-weight:800; letter-spacing:2px; color:#ffe4b5; border-block:1px solid #e8bb7799; background:linear-gradient(90deg,#1b304000,#1b3040f0 15%,#1b3040f0 85%,#1b304000); }
#game-shell:has(#zone-hud) .warning-pill { top:calc(var(--top) + 187px); }
.zone-map { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.zone-card { min-height:145px; display:flex; flex-direction:column; align-items:start; text-align:left; padding:15px; gap:8px; border:1px solid #7dbbc044; border-radius:16px; background:linear-gradient(140deg,#334b5d,#1b2d3b); }
.zone-card.utility { background:linear-gradient(140deg,#6a6044,#2d3337); }
.zone-card.noc { background:linear-gradient(140deg,#6b6173,#303348); }
.zone-card.lab { background:linear-gradient(140deg,#59497b,#233d54); }
.zone-card[aria-current] { border-color:#bcf8c6; box-shadow:inset 0 0 0 1px #bcf8c633; }
.zone-card strong { font-size:12px; letter-spacing:.7px; }.zone-card small { color:#a6c7d1; }.zone-card>span:last-child,.zone-card em { font-size:10px; color:#d3edb5; font-style:normal; }
.zone-mini { font-size:25px; color:#aff1e7; }
.challenge-progress,.challenge-reward { padding:12px 0; color:#c7f5d2; font-weight:650; line-height:1.6; }
.challenge-job { display:block; padding:6px 0; font-size:10px; letter-spacing:1px; color:#eec494; }
#build-zone-shortcut { min-height:44px; white-space:normal; font-size:10px; }
@media(max-width:700px) and (min-height:541px){
  #zone-hud { top:151px; width:calc(100% - 26px); gap:5px; }
  #overview-button { padding:7px 11px; font-size:9px; min-height:38px; }
  #overview-button kbd { display:none; }
  #challenge-chip { min-height:34px; font-size:9px; padding:6px 12px; }
  #game-shell:has(#zone-hud) .warning-pill { top:236px; font-size:9px; min-height:30px; }
  .zone-map { gap:8px; }.zone-card { padding:12px; min-height:135px; }.zone-card strong { font-size:10px; }
  #build-hint:has(#build-zone-shortcut:not([hidden])) { flex-wrap:wrap; }
}
@media(max-height:540px){
  #zone-hud { top:calc(var(--top) + 52px); gap:4px; }
  #overview-button,#challenge-chip { min-height:30px; padding:5px 10px; font-size:9px; }
  #game-shell:has(#zone-hud) .warning-pill { top:calc(var(--top) + 122px); min-height:26px; font-size:9px; }
  #overview-button kbd { display:none; }
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { width: 100vw; height: 100dvh; background: #101d27; color: var(--text); font-size: 14px; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .18s, transform .18s, border-color .18s; }
button:disabled { cursor: default; }
button:active:enabled { transform: translateY(2px); }
button:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, p { margin: 0; }
img { user-select: none; -webkit-user-drag: none; }
[hidden] { display: none !important; }

.mission-marker { position:absolute; z-index:3; transform:translate(-50%,-100%); min-height:44px; max-width:190px; padding:8px 12px; border:1px solid #c1b0fb; border-radius:12px; background:#302e51ef; color:#eee5ff; font-size:10px; font-weight:700; box-shadow:0 4px 16px #10182755; }
.mission-marker::after { content:''; position:absolute; bottom:-6px; left:calc(50% - 5px); border:5px solid transparent; border-top-color:#c1b0fb; border-bottom:0; }
#mission-hint { position:absolute; z-index:4; left:24px; bottom:110px; min-height:44px; max-width:320px; padding:10px 14px; border:1px solid #c1b0fb80; border-radius:12px; color:#e6defa; font-size:11px; text-align:left; }
.mission-bonus { color:#b2e1da; font-size:12px; }
.zone-card.mission-destination { border-color:#c1b0fb; }
#game-shell:not([data-mode=playing]) #mission-hint { display:none; }
@media(max-width:700px) and (min-height:541px) { #mission-hint { left:14px; bottom:calc(var(--bottom) + 154px); max-width:calc(100% - 28px); font-size:10px; } }
@media(max-height:540px) { #mission-hint { left:14px; bottom:82px; max-width:235px; font-size:10px; } }
#game-shell { position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 52%, #30424d 0%, #1c2e3c 40%, #101d29 90%); }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#game:focus-visible { box-shadow: inset 0 0 0 2px #9bf3b244; }
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#hud button, #objective-hud { pointer-events: auto; }
.glass, .floating-panel { background: linear-gradient(145deg, #1d303ae8, #13232dda); border: 1px solid var(--edge); box-shadow: 0 8px 24px #050d1633, inset 0 1px 0 #e6fff20a; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--edge); border-radius: 14px; background-color: #253945a6; color: #c4d5dc; }
.icon-button:hover { background-color: #38515c; border-color: #a9d4c55c; }
.icon-button svg { width: 19px; height: 19px; }
#hud-top-left { position: absolute; top: var(--top); left: var(--left); }
.wallet { display: flex; align-items: center; gap: 13px; padding: 11px 20px 12px 12px; border-radius: 22px; width: max-content; min-width: 183px; }
.coin { height: 41px; width: 41px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #c6f897, #69b86f); border: 3px solid #b8f4a1; box-shadow: 0 3px 0 #477c53, 0 0 20px #a8e38c17; color: #2a5936; font-size: 26px; font-weight: 800; text-shadow: 0 1px 0 #dcffd06b; }
#cash { display: block; font-size: 27px; line-height: 1.05; font-weight: 750; color: #c9ffd0; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
#income { display: block; font-size: 11px; font-weight: 600; color: #84caa0; margin-top: 6px; }
.resource-row { display: flex; gap: 7px; margin-top: 9px; }
.resource-pill { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border-radius: 15px; font-size: 12px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resource-pill svg { width: 16px; height: 16px; }
.resource-pill small { font-size: 10px; font-weight: 400; color: #b8bbc0; }
#power-hud { color: var(--amber); }
#cooling-hud { color: var(--blue); }
.resource-pill:hover { border-color: currentColor; }
.facility-badge { position: absolute; top: var(--top); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 9px 20px 10px 11px; border-radius: 19px; min-height: 62px; text-align: left; }
.facility-badge:active:enabled { transform: translate(-50%, 2px); }
.facility-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #91bdc219; color: #bbd8de; }
#facility-name { display: block; font-size: 12px; letter-spacing: 2px; }
.facility-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 9px Consolas, monospace; color: #90abb6; white-space: nowrap; }
.facility-meta i { height: 3px; width: 3px; background: #81bc9b; border-radius: 50%; }
#hud-top-right { display: flex; gap: 8px; position: absolute; right: var(--right); top: var(--top); }
#sound-button[aria-pressed=true] { color: var(--green); }
.warning-pill { position: absolute; top: calc(var(--top) + 78px); left: 50%; transform: translateX(-50%); max-width: min(360px, 65vw); min-height: 44px; padding: 8px 16px; background: #592b2aeb; color: #ffd1b9; border: 1px solid #ed9c8160; border-radius: 16px; font-size: 11px; box-shadow: 0 5px 20px #0002; }
.warning-pill:active:enabled { transform: translate(-50%, 2px); }
.world-label { position: absolute; bottom: calc(var(--bottom) + 97px); left: var(--left); opacity: .65; font-size: 8px; letter-spacing: 2.8px; color: #829fab; line-height: 1.7; }
.world-label>span { display: block; }
.world-label strong { color: #b0c5cb; font-size: 15px; font-weight: 650; letter-spacing: 3.5px; }
.world-label strong span { font: 9px Consolas, monospace; color: #7d9ba9; letter-spacing: 0; }
.desktop-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 9px; color: #73909e; white-space: nowrap; }
.desktop-hint>span { margin: 0 9px; color: #496571; }
kbd { font: 9px Consolas, monospace; color: #a4bdc7; border: 1px solid #92b2c02e; border-radius: 4px; padding: 2px 4px; margin-right: 4px; }
.build-button { position: absolute; bottom: var(--bottom); right: var(--right); height: 66px; padding: 0 23px; min-width: 181px; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(155deg, #c6f8a8, #90e6a6); color: #1a3d2d; border: 1px solid #d8ffd0; border-radius: 22px; box-shadow: 0 5px 0 #457e55, 0 10px 30px #081c2259, inset 0 1px 0 #efffe2; font-size: 15px; font-weight: 800; letter-spacing: .6px; }
.build-button>svg { width: 26px; height: 26px; stroke-width: 2; }
.build-button kbd { border-color: #366c4340; color: #356b49; margin: 0 0 0 4px; }
.build-button:hover { background: linear-gradient(155deg, #deffc7, #a8f1b8); }
.objective { position: absolute; bottom: calc(var(--bottom) + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(420px, calc(100vw - 460px)); padding: 11px 12px 11px 17px; border-radius: 19px; }
.objective-icon { color: #d8ce93; width: 25px; height: 25px; }
.objective-copy { flex: 1; min-width: 0; }
.eyebrow { display: block; color: #93abb4; font-size: 8px; font-weight: 600; letter-spacing: 1.2px; }
.objective .eyebrow { display: flex; justify-content: space-between; color: #baaf83; font-size: 8px; letter-spacing: .8px; gap: 8px; }
#goal-progress-label { font: 9px Consolas, monospace; color: #d9e5d6; letter-spacing: 0; }
#goal-title { font-size: 12px; font-weight: 600; display: block; margin: 5px 0 7px; line-height: 1.3; }
.objective-track { display: block; background: #e5efd514; border-radius: 3px; height: 3px; overflow: hidden; }
#goal-meter { display: block; height: 100%; background: #dacb8a; border-radius: 3px; transition: width .25s; }
.reward-button { min-height: 46px; min-width: 69px; padding: 7px 9px; border: 1px solid #dae7ab25; border-radius: 12px; background: #adb58313; text-align: center; }
.reward-button small { font-size: 7px; letter-spacing: 1px; color: #b8c4a2; display: block; margin-bottom: 4px; }
.reward-button strong { font: 600 13px Consolas, monospace; color: #d1dcac; }
.reward-button:enabled { background: var(--green); border-color: #dbffce; box-shadow: 0 0 18px #a7fcb52b; }
.reward-button:enabled strong, .reward-button:enabled small { color: #225533; }
.floating-panel { position: absolute; z-index: 4; border-radius: 24px; background: linear-gradient(145deg, #243944f5, #152831f5); animation: panel-in .2s ease-out; }
:is(#build-sheet, #jobs-sheet) { width: 376px; max-height: calc(100dvh - 150px); right: var(--right); bottom: calc(var(--bottom) + 85px); display: flex; flex-direction: column; padding: 18px; }
.sheet-grip { display: none; }
.overlay-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; flex-shrink: 0; }
.overlay-heading h1 { font-size: 20px; letter-spacing: -.4px; font-weight: 650; margin-top: 5px; }
.overlay-heading .eyebrow { font-size: 8px; }
.overlay-heading .icon-button { border: 0; background: #bddbdc0b; }
.shop-tabs { display: flex; gap: 4px; background: #0a182763; border: 1px solid #a0c3c11c; padding: 3px; border-radius: 13px; margin-bottom: 12px; flex-shrink: 0; }
.shop-tabs button { flex: 1; min-height: 44px; background: transparent; border: 0; border-radius: 10px; font-size: 12px; font-weight: 600; color: #92aab5; }
.shop-tabs [aria-selected=true] { background: #425b6275; color: #d9f0e7; box-shadow: 0 2px 5px #0002; }
#shop-content { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #647d81 transparent; padding: 1px; }
.equipment-card { position: relative; display: flex; align-items: center; flex-direction: column; text-align: center; min-height: 151px; border: 1px solid #adc8d128; border-radius: 16px; padding: 10px; background: #91bac70a; overflow: hidden; }
.equipment-card:hover:enabled { border-color: #9bf3b295; background: #9bf3b20f; }
.equipment-card:disabled { opacity: .5; }
.equipment-art { height: 63px; width: 75px; display: flex; align-items: center; justify-content: center; background: radial-gradient(#86bdb51a, transparent 70%); }
.equipment-art img { height: 64px; max-width: 75px; object-fit: contain;  }
.equipment-copy { width: 100%; }
.equipment-copy strong { display: block; font-size: 11px; margin: 6px 0; font-weight: 600; }
.equipment-detail { font-size: 9px; color: #96aeb7; line-height: 1.4; display: block; }
.equipment-spec { display: flex; align-items: center; justify-content: center; gap: 8px; font: 10px Consolas, monospace; color: var(--green); margin-top: 9px; }
.equipment-spec .cost { display: inline-flex; gap: 4px; align-items: center; border-radius: 5px; padding: 3px 6px; background: #bdd9c912; color: #edffe8; font-weight: bold; }
.equipment-spec svg { width: 11px; height: 11px; }
.lock-text { font: 9px 'Segoe UI', sans-serif; color: #acbfcb !important; }
.shop-note { font-size: 10px; color: #8da8b4; text-align: center; margin-top: 13px; line-height: 1.5; flex-shrink: 0; }
#shop-content[data-category=staff] { grid-template-columns: 1fr; }
.staff-card { padding: 14px; border: 1px solid #abcbd035; border-radius: 16px; background: #8dafbd09; }
.staff-card header { display: flex; align-items: center; gap: 8px; }
.staff-card h2 { font-size: 13px; flex: 1; }
.staff-level { font: 9px Consolas,monospace; color: #b7d2d5; white-space: nowrap; }
.staff-dot { width: 12px; height: 12px; flex-shrink: 0; border-radius: 4px; background: #62c4e1; }
.staff-dot.facilitiesTechnician { background: #e4ae55; }
.staff-dot.dispatcher { background: #b69cd9; }
.staff-card p { margin: 9px 0; color: #b3cad0; font-size: 11px; line-height: 1.5; }
.staff-pay { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: #d7dfc7; }
.staff-pay small { width: 100%; font-size: 10px; color: #aac2c4; }
.staff-card .staff-status { font-size: 10px; color: #afdcc9; min-height: 15px; }
.staff-buttons { display: grid; gap: 7px; }
.staff-buttons button { min-height: 44px; font-size: 11px; padding: 10px; }
.staff-buttons button[aria-pressed=true] { border-color: #8fd6b681; }
.staff-lock { display: block; padding: 10px 0; color: #e3c79a; font-size: 10px; line-height: 1.5; }
.placement-bar { position: absolute; z-index: 4; bottom: var(--bottom); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 21px; width: max-content; max-width: calc(100% - 32px); border-color: #a1edb77d; }
.placement-bar>img { width: 32px; height: 43px; object-fit: contain;  }
.placement-bar strong { font-size: 12px; display: block; }
.placement-bar div>span { display: block; color: #a9c2ba; font-size: 10px; margin-top: 5px; }
.primary-button, .secondary-button, .danger-button { min-height: 44px; padding: 11px 15px; border-radius: 12px; border: 1px solid #c1e8ca; background: linear-gradient(145deg, #bdf5b0, #8cdda8); color: #1d4b31; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary-button svg { width: 16px; height: 16px; }
.primary-button:hover:enabled { background: #d1ffc6; }
.primary-button:disabled { opacity: .5; }
.secondary-button { background: #bccbd00b; border-color: #c7dce82b; color: #b7cbd4; }
.secondary-button:hover { background: #a9c3c520; }
.danger-button { background: #76403c40; border-color: #e2958055; color: #f1b9a5; }
#server-actions { bottom: var(--bottom); left: 50%; transform: translateX(-50%); width: min(470px, calc(100% - 32px)); padding: 17px 19px; display: grid; grid-template-columns: 60px 1fr; gap: 10px 15px; }
.panel-close { position: absolute; right: 5px; top: 5px; border: 0; background: transparent; }
#selected-image { width: 55px; height: 76px; object-fit: contain;  }
.server-summary { align-self: center; padding-right: 25px; }
.server-summary .eyebrow { color: #c4dd9d; font-size: 9px; }
.server-summary h2 { font-size: 16px; margin: 4px 0 8px; letter-spacing: -.3px; }
.server-summary p { font-size: 11px; color: #a0bcc5; line-height: 1.6; }
.server-summary p strong { color: var(--green); font-weight: 600; }
.server-buttons { display: flex; gap: 9px; grid-column: 1/-1; }
.server-buttons .primary-button { flex: 1; }
.server-buttons .secondary-button { font-size: 10px; }
#game-shell:not([data-mode=playing]) #objective-hud, #game-shell:not([data-mode=playing]) .desktop-hint { display: none; }
#game-shell[data-mode=placing] #build-button { display: none; }
#game-shell[data-mode=shop] #build-button { background: #a2bdb3; box-shadow: 0 3px 0 #4c6b60; }
.toast { position: absolute; top: calc(var(--top) + 140px); left: 50%; transform: translate(-50%, -8px); z-index: 9; padding: 11px 17px; width: max-content; max-width: min(430px, calc(100% - 28px)); background: #193b31f2; border: 1px solid #90dca663; border-radius: 16px; box-shadow: 0 8px 30px #0003; color: #d7f6df; font-size: 12px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #552e2bf2; color: #ffd1b9; border-color: #e29c8066; }
.danger { color: #ffa99a !important; }
dialog { width: 410px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); margin: auto; padding: 30px; border: 1px solid #99bdbe52; border-radius: 26px; background: linear-gradient(145deg, #263d47, #142730); color: var(--text); box-shadow: 0 24px 90px #0007; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
dialog::backdrop { background: #06121b9c; backdrop-filter: blur(5px); }
.modal-close { position: absolute; top: 7px; right: 7px; border: 0; background: transparent; }
.modal-heading { font-size: 24px; letter-spacing: -.6px; margin: 8px 25px 13px 0; }
.modal-intro { font-size: 12px; line-height: 1.7; color: #b6cbd2; }
.settings-note { font-size: 10px; line-height: 1.7; color: #8eabb7; margin: 12px 0; }
.modal-buttons { display: grid; gap: 9px; margin-top: 20px; }
dialog ul { padding-left: 18px; font-size: 12px; color: #b6ccd5; line-height: 1.7; }
dialog li { margin: 12px 0; }
dialog>.primary-button, #start-playing { width: 100%; margin-top: 18px; }
.stats-list { margin: 18px 0 0; }
.stats-list div { display: flex; justify-content: space-between; padding: 9px 0; gap: 14px; font-size: 11px; border-bottom: 1px solid #9fc3cd18; }
.stats-list dt { color: #99b5c1; }
.stats-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.server-picker-label { display: block; font-size: 11px; color: #aac4cd; margin: 18px 0 8px; }
#server-picker { width: 100%; min-height: 44px; padding: 10px; border-radius: 10px; background: #1c303a; border: 1px solid #678e8e7d; font-size: 12px; }
.pause-dialog { text-align: center; padding: 34px; }
.pause-dialog h2 { font-size: 24px; letter-spacing: -.5px; margin: 11px 0; }
.pause-dialog p { font-size: 12px; color: #a8c1cd; }
.pause-emblem { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; background: #c2e7cb14; color: var(--green); border: 1px solid #b8f1ce38; border-radius: 20px; }
@keyframes panel-in { from { opacity: 0; margin-bottom: -8px; } to { opacity: 1; margin-bottom: 0; } }

@media (max-width: 1000px) {
  :root { --gutter: 18px; }
  .facility-badge { top: calc(var(--top) + 2px); padding: 9px 12px; gap: 9px; }
  .objective { width: 340px; }
  .build-button { min-width: 142px; padding: 0 17px; }
  .build-button kbd { display: none; }
}
@media (max-width: 700px) and (min-height: 541px) {
  :root { --gutter: 14px; }
  .wallet { min-width: 144px; padding: 10px 15px 10px 10px; gap: 10px; border-radius: 20px; }
  .coin { width: 32px; height: 32px; font-size: 21px; border-width: 2px; }
  #cash { font-size: 23px; }
  #income { font-size: 10px; margin-top: 4px; }
  #hud-top-right { gap: 5px; }
  .resource-row { gap: 6px; margin-top: 7px; }
  .resource-pill { padding: 0 10px; font-size: 11px; border-radius: 14px; }
  .facility-badge { top: calc(var(--top) + 67px); right: var(--right); left: auto; transform: none; min-height: 44px; padding: 6px 9px; border-radius: 14px; gap: 7px; }
  .facility-badge:active:enabled { transform: translateY(2px); }
  .facility-icon { width: 24px; height: 28px; border-radius: 7px; }
  .facility-icon svg { width: 16px; height: 16px; }
  #facility-name { font-size: 9px; letter-spacing: 1px; }
  .facility-meta { font-size: 7px; gap: 5px; margin-top: 4px; }
  .world-label { left: 50%; bottom: calc(var(--bottom) + 177px); transform: translateX(-50%); text-align: center; font-size: 7px; opacity: .5; }
  .world-label strong { font-size: 12px; }
  .objective { bottom: calc(var(--bottom) + 81px); width: min(365px, calc(100% - 28px)); padding: 10px 11px 10px 14px; gap: 10px; border-radius: 18px; }
  .build-button { height: 60px; min-width: 158px; border-radius: 20px; font-size: 14px; }
  :is(#build-sheet, #jobs-sheet) { right: 8px; left: 8px; width: auto; bottom: max(8px, env(safe-area-inset-bottom)); max-height: 51dvh; padding: 12px 14px; border-radius: 25px; }
  .sheet-grip { display: block; flex-shrink: 0; height: 3px; width: 34px; border-radius: 5px; background: #8ca4ae66; margin: 0 auto 9px; }
  .overlay-heading { padding-bottom: 10px; }
  .overlay-heading h1 { font-size: 19px; }
  .shop-tabs { margin-bottom: 9px; }
  .equipment-card { min-height: 126px; padding: 8px; }
  .equipment-art { height: 45px; }
  .equipment-art img { height: 47px; }
  .equipment-copy strong { font-size: 10px; margin: 4px 0; }
  .equipment-detail { font-size: 8px; }
  .equipment-spec { margin-top: 6px; font-size: 9px; }
  .shop-note { margin-top: 9px; font-size: 9px; }
  #game-shell[data-mode=shop] #build-button, #game-shell[data-mode=selected] #build-button { visibility: hidden; pointer-events: none; }
  #game-shell:not([data-mode=playing]) .world-label { display: none; }
  .placement-bar { bottom: var(--bottom); gap: 9px; padding: 12px; width: calc(100% - 28px); max-width: 410px; display: grid; grid-template-columns: 32px 1fr 44px; }
  .placement-bar div { min-width: 0; }
  .placement-bar strong { font-size: 11px; }
  .placement-bar div>span { font-size: 9px; }
  #cancel-build { grid-column: 3; grid-row: 1; }
  #place-next { grid-column: 1/-1; grid-row: 2; }
  #server-actions { padding: 13px 14px; width: calc(100% - 28px); border-radius: 22px; gap: 8px 12px; }
  .server-summary h2 { font-size: 14px; }
  .server-summary p { font-size: 10px; }
  .server-buttons { gap: 8px; }
  .server-buttons .primary-button { font-size: 11px; padding: 10px; }
  .warning-pill { top: calc(var(--top) + 120px); width: max-content; max-width: calc(100% - 28px); font-size: 10px; }
  .toast { top: calc(var(--top) + 171px); font-size: 11px; }
  .desktop-hint, .desktop-only, kbd { display: none; }
}
@media (max-height: 540px) and (orientation: landscape) {
  :root { --gutter: 12px; }
  .wallet { min-width: 146px; padding: 8px 12px 8px 9px; gap: 9px; border-radius: 17px; }
  .coin { width: 31px; height: 31px; border-width: 2px; font-size: 20px; }
  #cash { font-size: 23px; }
  #income { font-size: 9px; margin-top: 3px; }
  .resource-row { flex-direction: column; width: max-content; margin-top: 6px; gap: 6px; }
  .resource-pill { padding: 0 10px; font-size: 10px; }
  .facility-badge { min-height: 44px; top: var(--top); padding: 5px 12px; }
  .facility-icon { display: none; }
  #facility-name { font-size: 10px; }
  .facility-meta { font-size: 8px; margin-top: 3px; }
  #hud-top-right { gap: 5px; }
  .build-button { height: 54px; min-width: 137px; font-size: 12px; border-radius: 18px; gap: 8px; }
  .build-button>svg { width: 23px; }
  .objective { width: min(330px, calc(100% - 326px)); bottom: var(--bottom); padding: 8px 10px; gap: 8px; border-radius: 16px; }
  .objective-icon { display: none; }
  #goal-title { font-size: 10px; }
  .objective .eyebrow { font-size: 7px; }
  .reward-button { min-width: 60px; padding: 5px 7px; }
  .reward-button strong { font-size: 11px; }
  :is(#build-sheet, #jobs-sheet) { top: var(--top); bottom: calc(var(--bottom) + 66px); max-height: none; width: 322px; padding: 12px; border-radius: 19px; }
  .overlay-heading { padding-bottom: 8px; }
  .overlay-heading h1 { font-size: 16px; }
  .overlay-heading .eyebrow { font-size: 7px; }
  .shop-tabs { margin-bottom: 8px; }
  .equipment-card { min-height: 118px; padding: 7px; }
  .equipment-art, .equipment-art img { height: 43px; }
  .equipment-detail { font-size: 8px; }
  .equipment-copy strong { font-size: 10px; }
  .shop-note { display: none; }
  .world-label, .desktop-hint, .desktop-only, kbd { display: none; }
  .warning-pill { top: calc(var(--top) + 54px); max-width: 280px; font-size: 10px; }
  .toast { top: auto; bottom: calc(var(--bottom) + 90px); font-size: 10px; }
  #server-actions { padding: 11px 16px; width: 410px; grid-template-columns: 43px 1fr; gap: 7px 12px; }
  #selected-image { height: 55px; width: 40px; }
  .server-summary h2 { font-size: 13px; margin-bottom: 3px; }
  .server-summary p { font-size: 10px; }
  .server-summary .eyebrow { font-size: 8px; }
  .placement-bar { max-width: calc(100% - 28px); gap: 9px; }
}
@media (pointer: coarse) { .desktop-hint, .desktop-only, kbd { display: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jobs-button { position: absolute; left: var(--left); bottom: var(--bottom); height: 62px; min-width: 148px; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 21px; color: #c7f0e6; font-size: 13px; font-weight: 750; }
#jobs-count { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 6px; border-radius: 9px; background: #b8f3ca; color: #254b39; font: bold 13px Consolas, monospace; }
.jobs-button.new-offer { animation: offer-pulse 1.5s ease-in-out 3; border-color: #ade8ba; }
.world-label { bottom: calc(var(--bottom) + 144px); }
#jobs-sheet { left: var(--left); right: auto; max-height: min(560px, calc(100dvh - 280px)); }
#contracts-list { display: grid; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
.contract-card { position: relative; padding: 14px; border: 1px solid #b9d5cd26; border-radius: 17px; background: #90b5c10a; }
.contract-card>.eyebrow { color: #a4d7d0; font-size: 9px; margin-right: 28px; }
.contract-card h2 { font-size: 15px; font-weight: 650; margin: 6px 28px 5px 0; }
.contract-card p { color: #9cb6c0; font-size: 10px; line-height: 1.5; margin-bottom: 10px; }
.capacity-badges { display: flex; flex-wrap: wrap; gap: 5px; grid-column: 1/-1; }
.capacity-badges>span, #assignment-requirements>span { border: 1px solid #b5d3d623; border-radius: 7px; padding: 5px 7px; font-size: 9px; color: #a5bec9; background: #9bbed30c; white-space: nowrap; }
.capacity-badges b, #assignment-requirements b { font-weight: 650; color: #e1f3ec; margin-left: 3px; }
.gpu-badge { color: #d5b4f3 !important; border-color: #bba0ef66 !important; }
.contract-meta { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 12px 0; font-size: 11px; color: #c9dadd; }
.contract-meta small { font-size: 9px; color: #94afb7; }
.contract-meta strong { color: var(--green); font: bold 17px Consolas, monospace; }
.contract-card>.primary-button { width: 100%; font-size: 10px; letter-spacing: .7px; }
.reject-contract { position: absolute; right: 2px; top: 2px; background: transparent; border: 0; }
.jobs-empty { text-align: center; font-size: 14px; color: #dcf2e9; padding: 32px 10px; }
.jobs-empty span { display: block; font-size: 11px; margin-top: 9px; color: #94afb7; }
#assignment-hint { display: grid; grid-template-columns: 1fr 44px; width: 445px; gap: 10px; padding: 14px; }
#assignment-hint .eyebrow { font-size: 8px; color: #b4e29e; margin: 0 0 5px; letter-spacing: .6px; }
#assignment-name { font-size: 12px; }
#assignment-requirements { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
#assignment-status { line-height: 1.4; }
.assignment-controls { display: flex; gap: 8px; grid-column: 1/-1; min-width: 0; }
#assignment-picker { min-width: 0; width: 100%; min-height: 44px; padding: 8px; border: 1px solid #77998c65; border-radius: 12px; background: #1d343c; font-size: 11px; }
.assignment-copy { min-width: 0; }
.selected-jobs { grid-column: 1/-1; font-size: 10px; color: #9eb9bd; }
.running-job { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-bottom: 8px; color: #d2e8dc; }
.running-job progress { grid-column: 1/-1; width: 100%; height: 4px; border: 0; border-radius: 3px; overflow: hidden; accent-color: #9bf3b2; }
.running-job progress::-webkit-progress-bar { background: #486058; }
.running-job progress::-webkit-progress-value { background: #9bf3b2; }
.selected-jobs small { font-size: 9px; }
#server-actions { max-height: min(380px, 52dvh); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.secondary-button:disabled { opacity: .5; }
#game-shell:is([data-mode=placing], [data-mode=assigning]) :is(#jobs-button) { display: none; }
#game-shell[data-mode=assigning] #build-button { display: none; }
#game-shell[data-mode=jobs] #jobs-button { background: #34524e; }
@keyframes offer-pulse { 50% { box-shadow: 0 0 0 6px #a9f6c51a, 0 0 28px #a9f6c544; } }
@media (max-width: 700px) and (min-height: 541px) {
  .jobs-button { min-width: 116px; height: 60px; padding: 9px 12px; gap: 7px; font-size: 12px; }
  .jobs-button>svg { width: 20px; }
  .build-button { min-width: 140px; padding: 0 14px; font-size: 13px; gap: 7px; }
  .world-label { bottom: calc(var(--bottom) + 184px); }
  #jobs-sheet { left: 8px; right: 8px; width: auto; max-height: 46dvh; }
  .contract-card { padding: 12px; }
  .contract-card p { display: none; }
  .contract-card h2 { font-size: 14px; margin-bottom: 9px; }
  .contract-meta { margin: 9px 0; }
  #game-shell:is([data-mode=shop], [data-mode=jobs], [data-mode=selected]) :is(#jobs-button, #build-button) { visibility: hidden; pointer-events: none; }
  #assignment-hint { width: calc(100% - 28px); padding: 12px; gap: 8px; }
  #assignment-name { font-size: 11px; }
  #assignment-status { font-size: 9px; }
  #selected-capacity>span { font-size: 8px; padding: 5px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .jobs-button { min-width: 136px; height: 54px; padding: 8px 12px; font-size: 11px; gap: 8px; }
  #jobs-sheet { left: var(--left); right: auto; max-height: none; }
  .contract-card { padding: 11px; }
  .contract-card p { display: none; }
  #jobs-note { display: block; margin-top: 6px; }
  #assignment-hint { width: 410px; padding: 10px; gap: 6px; }
  #server-actions { max-height: calc(100dvh - 84px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Equipment cards stay compact; all thumbnails come from the world renderer. */
.equipment-tier { display: block; color: #a5c7bc; font: 8px Consolas, monospace; letter-spacing: 1px; }
.equipment-art img { width: 75px; height: 75px; max-width: none; }
.equipment-card:disabled { opacity: .65; }
.equipment-spec { flex-wrap: wrap; }
.lock-text { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 7px; font-size: 8px; line-height: 1.4; }
.lock-text svg { width: 11px; height: 11px; }
.facility-card { grid-column: 1/-1; text-align: left; padding: 15px; border-radius: 16px; background: linear-gradient(125deg,#42695b66,#56788926); border: 1px solid #bce8be65; display: grid; gap: 7px; }
.facility-card strong { font-size: 17px; color: #e0f8db; }
.facility-card>span:not(.eyebrow) { font-size: 11px; color: #c1d5d5; }
.facility-card small { font-size: 10px; color: #aac1c9; }
.facility-card b { justify-self: end; color: #bef2bb; font-size: 13px; }
.facility-card:disabled { opacity: .65; }
#facility-celebration { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); padding: 15px 25px; border: 1px solid #ceffe08c; border-radius: 18px; background: #173644e8; color: #e5ffda; font-size: clamp(16px,3vw,28px); font-weight: 700; text-align: center; pointer-events: none; z-index: 5; animation: panel-in .25s; }
#facility-name { max-width: 190px; }
@media(max-width:700px) and (min-height:541px) {
  #facility-name { max-width: 94px; font-size: 8px; letter-spacing: .5px; }
  .facility-icon { display: none; }
  .equipment-art img { height: 62px; width: 62px; }
  .facility-card { padding: 12px; gap: 5px; }
  .facility-card strong { font-size: 15px; }
}

#preview-label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 10; font: 8px Consolas; letter-spacing: 1px; color: #d8ddad; background: #183343; padding: 3px 8px; pointer-events: none; white-space: nowrap; }

/* Founder operations live beside equipment and appear only when relevant. */
:is(#operation-marker,#incident-marker) { position: absolute; z-index: 3; transform: translate(-50%,-100%); min-height: 44px; min-width: 72px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 9px; border-radius: 12px; background: #314c3aeb; border: 1px solid #d9e794; color: #f0f7c7; box-shadow: 0 4px 12px #101f3a44; animation: founder-pulse 2.6s ease-in-out infinite; }
:is(#operation-marker,#incident-marker):active { transform: translate(-50%,calc(-100% + 2px)); }
:is(#operation-marker,#incident-marker)>span:first-child { font-size: 18px; }
:is(#operation-marker-label,#incident-marker-label) { font-size: 8px; font-weight: 700; letter-spacing: .7px; }
:is(#operation-marker,#incident-marker)::after { content: ''; position: absolute; bottom: -6px; left: calc(50% - 5px); border: 5px solid transparent; border-bottom: 0; border-top-color: #d9e794; }
#operation-action { position: absolute; z-index: 4; bottom: var(--bottom); left: 50%; transform: translateX(-50%); min-height: 60px; width: min(310px,calc(100% - 32px)); overflow: hidden; padding: 10px 17px; border: 1px solid #d6e9a1a0; border-radius: 18px; color: #e4f6c2; }
#operation-action::before { content: ''; position: absolute; bottom: 0; left: 0; width: var(--progress,0%); height: 4px; background: #d8f8a1; }
#operation-action:active { transform: translate(-50%,2px); }
#operation-action strong { font-size: 12px; letter-spacing: .5px; }
#operation-action small { display: block; font-size: 9px; color: #bbd5ad; margin-top: 6px; }
#game-shell[data-operation-near=true] #objective-hud { visibility: hidden; pointer-events: none; }
@keyframes founder-pulse { 50% { box-shadow: 0 0 0 4px #d5f7aa14,0 4px 12px #101f3a44; } }
@media(max-width:700px) and (min-height:541px) { #operation-action { bottom: calc(var(--bottom) + 82px); } }
@media(max-height:540px) { #operation-action { min-height: 54px; width: min(300px,calc(100% - 330px)); } }
@media(prefers-reduced-motion:reduce) { :is(#operation-marker,#incident-marker) { animation: none; } }

/* Reliability stays in the world and the existing workload controls. */
#reputation { color: #efd294; font-weight: bold; }
#incident-marker { background: #653a2def; border-color: #ffb785; color: #ffe0b1; z-index: 4; }
#incident-marker::after { border-top-color: #ffb785; }
#operation-action.repair-action { border-color: #ffb785a0; color: #ffe0b1; }
#operation-action.repair-action::before { background: #ffb785; }
#operation-action.repair-action small { color: #e5be9d; }
.priority-contract { border-color: #e0b85988; }
.priority-badge { display: inline-block; color: #ffdc8b; background: #c9a45218; padding: 5px 7px; border-radius: 6px; font-size: 9px; margin-bottom: 7px; }
.offer-sla { color: #b4cabd; font-size: 10px; margin-top: 8px; }
.running-job { align-items: center; padding: 8px 0; border-bottom: 1px solid #a6cbc31a; }
.running-job .sla-status { color: #b4e5bf; font-size: 10px; }
.running-job[data-sla=risk] .sla-status { color: #ffd081; }
.running-job[data-sla=breached] .sla-status { color: #ffa99a; }
.migrate-button { min-height: 44px; font-size: 10px; padding: 8px 12px; }
#game-shell[data-mode=migrating] :is(#jobs-button,#build-button) { display: none; }
@media(max-width:700px) and (min-height:541px) { .facility-meta { gap: 5px; font-size: 8px; } }
/* Company progression lives inside the existing game dialog. */
.company-value { margin: 20px 0; padding: 21px 18px; border: 1px solid #d8bc7966; border-radius: 18px; background: linear-gradient(135deg,#cfa85a18,#91ceb20b); display: grid; gap: 9px; }
.company-value>span { font-size: 10px; letter-spacing: 1.5px; color: #e7cc92; }
.company-value>strong { font-size: clamp(27px,6vw,38px); letter-spacing: -1px; color: #f5dfab; overflow-wrap: anywhere; }
.company-value>small { color: #a9c7cb; font-size: 11px; line-height: 1.5; }
.company-details { border-bottom: 1px solid #b1c8c82b; margin: 12px 0; }
.company-details>summary,.wipe-zone>summary { min-height: 44px; padding: 15px 0; cursor: pointer; font-size: 10px; letter-spacing: .7px; color: #b7cdd1; }
.company-details .stats-list { margin-top: 0; padding-bottom: 15px; }
.acquisition-card { padding: 17px; margin: 17px 0; border: 1px solid #a0bbb32b; border-radius: 16px; }
.acquisition-card.ready { border-color: #e8c57899; background: #cfac5a0a; }
.acquisition-card .stats-list { margin-top: 8px; }
.acquisition-card p,.technology-card p,.sale-summary p,.acquired p,.offline-return p { color: #aec5cc; font-size: 12px; line-height: 1.65; }
.gold-button { background: linear-gradient(115deg,#f2dfa4,#d9ba72); color: #283832; }
.acquisition-card>button,.technology-card>button,.launch-company,.offline-return>button { width: 100%; min-height: 44px; }
.technology-lab { margin: 25px 0 18px; }
.technology-lab h3 { color: #ecd39a; font-size: 19px; margin: 9px 0 15px; }
.technology-card { border: 1px solid #9bbab435; padding: 15px; border-radius: 15px; margin: 10px 0; background: #9ed8b307; }
.technology-card>div { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.technology-card strong { font-size: 13px; }
.technology-card span { font-size: 10px; white-space: nowrap; color: #d1c697; }
.sale-summary h3 { color: #e7cf9b; font-size: 11px; margin-bottom: 6px; }
.wipe-zone { margin-top: 32px; border-top: 1px solid #bf706743; }
.wipe-zone p { font-size: 11px; color: #c99f98; line-height: 1.6; }
.wipe-zone button { min-height: 44px; width: 100%; }
.acquisition-ready { border-color: #f1d18e; box-shadow: 0 0 15px #ebc87222; }
.acquisition-ready::after { content: ''; width: 7px; height: 7px; background: #f8d98d; border-radius: 50%; position: absolute; right: 5px; top: 5px; }
.acquired { text-align: center; animation: company-arrival 1.2s ease-out both; padding-top: 10px; }
.acquired>strong { display: block; font-size: 24px; color: #f0d08a; margin: 18px 0; }
.offline-return { text-align: center; padding-top: 10px; }
.offline-return>strong { display: block; color: #b6edbb; font-size: 36px; margin: 25px 0; overflow-wrap: anywhere; }
@keyframes company-arrival { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.acquired.still { animation: none; }
@media(prefers-reduced-motion:reduce) { .acquired { animation: none; } }
@media(max-width:700px) { .acquisition-card { padding: 13px; } .acquisition-card .stats-list div { flex-wrap: wrap; gap: 5px; } .company-value { padding: 18px 14px; } }

/* Price is a first-row sibling, never part of the clipped specification footer. */
.equipment-card { padding-top: 38px; flex-shrink: 0; min-width: 0; }
.equipment-card:disabled { opacity: 1; color: #adbdc7; }
.equipment-card:disabled .equipment-art { opacity: .5; }
.price-badge { position: absolute; top: 7px; right: 7px; z-index: 1; padding: 5px 7px; border: 1px solid #a7f3c15c; border-radius: 7px; background: #163d33; color: #d6ffe2; font: 700 12px Consolas, monospace; white-space: nowrap; }
.unaffordable .price-badge { background: #3c3328; border-color: #e0bd795c; color: #ffe1a7; }
.price-deficit { display: block; margin-top: 5px; color: #e1c994; font-size: 10px; }

#loading-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: #101d27; color: #ebf7ef; text-align: center; }
#loading-screen>div { max-width: 380px; }
#loading-screen p { line-height: 1.6; color: #bdd0cf; }
[hidden] { display: none !important; }

#shop-content { grid-auto-rows: max-content; align-content: start; }
.equipment-card { height: max-content; min-height: 230px; overflow: visible; }