/* INDUSTRIUM interface: charcoal, warm paper, mint signals, restrained brass. */
:root { --bg:#111a1b; --panel:#182326; --line:#344348; --muted:#a3b2b6; --ink:#eef1e9; --accent:#a5e4be; --amber:#e8c18d; --red:#ff9b89; font-family:"Segoe UI",sans-serif; }
body { background:#0c1416; }
button { border-radius:9px; border-color:#435252; background:#253336; transition:background .15s,border-color .15s,box-shadow .15s; }
button:hover { background:#344548; border-color:#9bcbb1; }
button.primary { color:#163125; background:#b7ebca; border-color:#c5f4d6; box-shadow:0 3px 14px #081c1833; }
button.primary:hover { background:#cff6dc; }
button:disabled { opacity:.52; }
button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button.selected { color:#c6f2d5; background:#365347; border-color:#85c29c; }
input,select { background:#101c1f; border-color:#415255; border-radius:9px; padding:12px 13px; }
input::placeholder { color:#91a2a6; }
label { font-size:12px; font-weight:600; color:#c1cdcc; letter-spacing:0; }
input[type=range] { min-height:30px; }
small { line-height:1.5; }
h2 { font-size:29px; font-weight:650; letter-spacing:-.8px; }
h3 { font-weight:650; }
.eyebrow { color:#a5c8b4; font-size:10px; letter-spacing:.16em; }
.ui-icon { width:21px; height:21px; flex:none; vertical-align:middle; }
button .ui-icon { pointer-events:none; }
kbd { border-color:#52635f; color:#bacbc3; border-radius:4px; font-family:inherit; font-size:10px; }
.panel { background:linear-gradient(140deg,#1b292bf5,#131f23f5); border-color:#4b5c5d99; border-radius:13px; box-shadow:0 9px 30px #030a1040,inset 0 1px #ffffff06; }
.pill { border:1px solid #4d5e57; background:#263b32; color:#bbd4c5; border-radius:30px; }
.progress { height:5px; background:#354344; border-radius:8px; }
.progress i { background:linear-gradient(90deg,#68977e,#b9e6b9); }
.row { flex-wrap:wrap; }
.menu { padding:6vw; background:linear-gradient(90deg,#101b1cf7 0%,#101b1cf2 35%,#10232640 78%,#10232615); }
.menu-topline { position:absolute; top:32px; left:6vw; right:6vw; display:flex; justify-content:space-between; font-size:10px; letter-spacing:.19em; color:#abc2b9; }
.menu-topline>span:first-child { display:flex; gap:11px; align-items:center; color:#edf2df; font-weight:700; letter-spacing:.15em; }
.menu-content { width:520px; gap:23px; }
.menu h1 { font-size:clamp(44px,5.4vw,78px); line-height:1.04; letter-spacing:-3.7px; font-weight:650; }
.menu h1 em { color:#b5dfbd; font-style:normal; }
.menu-content>p { max-width:410px; font-size:15px; line-height:1.8; color:#b3c2bf; }
.menu-actions { width:390px; gap:10px; }
.menu-actions button { padding:17px 20px; align-items:center; border-radius:11px; }
.menu-actions b { display:block; font-size:16px; font-weight:650; }
.menu-actions small { display:block; font-size:12px; margin-top:4px; }
.menu-actions .primary small { color:#355c46; }
.menu-secondary { display:flex; flex-wrap:wrap; gap:12px; }
.menu-secondary button[data-action="account"] { flex-basis:100%; min-height:48px; padding:10px 16px; border:1px solid #536b61; border-radius:10px; background:#192b24; color:#dcf6e8; text-align:left; font-size:15px; }
#account-form input { min-height:48px; font-size:16px; }
#account-form button { min-height:48px; }
#account-error:empty { display:none; }
.menu-secondary button { background:transparent; border:0; padding:8px 0; font-size:12px; color:#bbc9c4; }
.menu-secondary .ui-icon { width:16px; margin-right:6px; }
.menu-art-label { display:block; border:0; right:5vw; bottom:90px; padding:19px 23px; background:#172727c7; border-radius:12px; backdrop-filter:blur(12px); }
.journey { display:flex; align-items:center; gap:13px; margin-top:15px; color:#7d9c8b; font-size:10px; }
.journey b { display:block; margin-top:5px; font-size:12px; color:#d4ded1; font-weight:500; }
.journey i { width:25px; height:1px; background:#627d6e; }
.menu-footer { left:6vw; right:6vw; display:flex; align-items:center; gap:9px; letter-spacing:.03em; color:#a1b3ac; }
.menu-footer>span:last-child { margin-left:auto; font-size:9px; letter-spacing:.13em; }
.modal-backdrop { background:#070e14b0; backdrop-filter:blur(12px); padding:20px; }
.modal { border:1px solid #5b6b6670; border-radius:18px; background:linear-gradient(140deg,#20302f,#142126 70%); box-shadow:0 40px 120px #0009; width:min(620px,95vw); padding:28px; max-height:90vh; scrollbar-width:thin; scrollbar-color:#526960 transparent; }
.modal.wide { width:min(1020px,95vw); }
.modal-header { margin-bottom:24px; align-items:start; gap:20px; }
.modal-header h2 { margin-top:7px; }
.modal-header button { display:grid; place-items:center; width:34px; height:34px; padding:7px; background:#ffffff07; }
.modal-header .ui-icon { width:17px; height:17px; }
.dialog-intro { margin-bottom:24px; max-width:730px; line-height:1.7; }
.hud-top { top:14px; left:16px; right:16px; height:74px; display:grid; grid-template-columns:170px minmax(0,1fr) 205px; align-items:center; gap:0; pointer-events:auto!important; padding:9px 14px; }
.hud-brand { display:flex; gap:10px; align-items:center; font-size:13px; font-weight:700; letter-spacing:.06em; }
.hud-brand>.ui-icon { color:#b2d8b7; width:30px; height:30px; }
.hud-brand small { display:block; font-size:8px; letter-spacing:.17em; font-weight:500; margin-top:5px; }
.resource-bar { border:0; padding:0 14px; max-width:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.resource { padding:1px 7px; gap:4px; font-weight:600; font-size:19px; font-variant-numeric:tabular-nums; }
.resource small { text-transform:none; font-size:10px; letter-spacing:0; white-space:nowrap; overflow:visible; }
.resource .item-icon { width:5px; height:5px; margin-right:5px; }
.power { display:grid; padding:0 0 0 17px; min-width:0; border:0; border-radius:0; background:transparent; text-align:left; gap:1px; box-shadow:none; }
.power:hover { background:#263a3460; border:0; }
.power>.eyebrow { display:flex; justify-content:space-between; align-items:center; font-size:8px; }
.power .eyebrow .ui-icon { width:12px; height:12px; }
.power>small { font-size:9px; }
.energy-reading { font-size:19px; font-weight:600; }
.energy-reading>.ui-icon { width:15px; height:15px; }
.energy-reading small { font-weight:400; font-size:11px; }
.left-tools { top:103px; left:16px; width:124px; padding:7px; gap:4px; }
.left-tools button { width:100%; height:44px; padding:0 9px; display:flex; gap:9px; align-items:center; font-size:11px; border:1px solid transparent; background:transparent; border-radius:7px; color:#c5d1ce; text-align:left; }
.left-tools button>.ui-icon { width:18px; height:18px; color:#a5c6b2; }
.left-tools kbd { border:0; margin-left:auto; padding:0; font-size:8px; color:#91a69c; }
.left-tools button:hover { background:#2b4038; border-color:#5b7869; }
.left-tools button.selected { background:#345346; color:#d7f3dd; border-color:#628b73; }
.left-tools button:nth-last-child(2) { margin-top:8px; border-top-color:#3c5049; }
.objective { position:absolute; top:103px; right:16px; width:280px; min-width:0; max-width:none; padding:17px 18px; }
.objective h3 { font-size:17px; line-height:1.3; margin-top:12px!important; }
.objective p { font-size:12px; line-height:1.65; color:#bbcbc6; }
.objective-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.objective-footer small { font-size:10px; }
.objective-footer button { border:0; background:none; padding:0; font-size:11px; color:var(--accent); }
#app:has(.inspector) .objective { display:none; }
.quickbar { bottom:24px; padding:7px; gap:3px; border-radius:14px; }
.quickbar button { width:57px; height:62px; display:grid; align-content:center; gap:4px; border:1px solid transparent; background:#263735; border-radius:8px; font-size:9px; }
.quickbar button b { font-size:23px; margin:0; color:#b9d9be; font-weight:400; }
.quickbar button kbd { left:5px; top:4px; color:#acc0b2; }
.quickbar button.selected { border-color:#b0ddb9; background:#41664c; box-shadow:inset 0 -2px #b0ddb9; }
.quickbar button:hover:not(:disabled) { border-color:#7da88e; }
.quickbar button:disabled { opacity:.38; }
.hint { bottom:110px; border-radius:30px; background:#152123d9; color:#c9d4cd; font-size:11px; padding:9px 17px; white-space:normal; text-align:center; max-width:calc(100vw - 340px); width:max-content; line-height:1.5; }
.hint span { margin:0 8px; color:#81968b; }
.map-panel { right:16px; bottom:24px; padding:10px; width:152px; border-radius:13px; }
.map-panel canvas { width:130px; height:130px; border-radius:6px; opacity:.9; }
.map-heading { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:.10em; margin-bottom:8px; color:#afc5b8; }
.map-caption { font-size:8px; padding-top:8px; }
.statusbar { bottom:6px; left:18px; font-size:9px; color:#a7b9ae; max-width:calc(100vw - 30px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.build-panel { left:153px; top:103px; bottom:109px; width:380px; padding:19px; border-radius:14px; scrollbar-width:thin; scrollbar-color:#536f61 transparent; }
.build-panel h3 { font-size:21px; margin-top:5px; }
.build-panel>.between button { padding:5px; border:0; background:transparent; }
.categories { gap:5px!important; }
.categories button { font-size:10px; padding:6px 9px; border-radius:20px; background:#233632; border-color:#40574d; }
.build-explainer { font-size:11px; margin:10px 0 15px; line-height:1.6; }
.build-list { gap:9px; }
.build-card { padding:0; display:block; overflow:hidden; border-color:#405750; background:#1d302c; border-radius:10px; }
.build-preview { height:92px; position:relative; background:radial-gradient(ellipse at center,#435b4f,#1d302c 75%); display:grid; place-items:center; }
.model-image { width:100%; height:100%; object-fit:contain; }
.build-preview>.ui-icon { width:36px; height:36px; }
.tier-badge { position:absolute; top:7px; right:7px; font-size:8px; letter-spacing:.08em; color:#c8d8cb; background:#101e1cb0; padding:3px 5px; border-radius:4px; }
.build-card-body { padding:10px; display:grid; gap:6px; }
.build-card-body>b { font-size:12px; color:#e8f0df; font-weight:600; }
.build-card-body>small { font-size:10px; min-height:30px; line-height:1.5; color:#b1c1b5; }
.build-state { font-size:9px; font-weight:600; color:#aed3ad; }
.build-cost { font-size:9px; color:#bec9bb; border-top:1px solid #40574c; padding-top:7px; line-height:1.5; }
.build-card.locked { opacity:.5; filter:saturate(.5); }
.build-card.selected { border-color:#bbe4bd; }
.inspector { top:103px; right:16px; bottom:195px; max-height:none; width:320px; padding:20px; gap:15px; border-radius:14px; scrollbar-color:#526f61 transparent; }
.inspector>.between { align-items:start; }
.inspector>.between button { padding:5px; border:0; background:transparent; }
.inspector h3 { font-size:21px; }
.machine-hero { display:flex; align-items:center; gap:14px; background:radial-gradient(ellipse at 30% 50%,#3a5146,#1d302c00 75%); border-bottom:1px solid #40574c; padding-bottom:9px; }
.machine-hero img { width:85px; height:85px; }
.machine-hero p { font-size:12px; }
.machine-state { border:1px solid #55765e; background:#2a4032; padding:12px; border-radius:9px; }
.machine-state>b { display:flex; align-items:center; gap:8px; font-size:12px; color:#d4efcf; }
.machine-state p { margin-top:6px; font-size:11px; color:#bcd1be; line-height:1.6; }
.state-input,.state-blocked,.state-empty { background:#423b29; border-color:#85724b; }
.state-input .dot,.state-blocked .dot,.state-empty .dot { background:#e5bd7d; }
.state-power,.state-disabled,.state-territory { background:#482f2d; border-color:#8e6255; }
.state-power .dot,.state-disabled .dot,.state-territory .dot { background:#f6a18b; }
.machine-facts { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:17px 0; }
.machine-facts small { display:block; font-size:10px; margin-bottom:3px; }
.machine-facts strong { font-size:13px; font-weight:600; }
.port-legend { display:flex; flex-wrap:wrap; gap:7px; font-size:10px; color:#b7c4c5; }
.cycle-label { display:flex; justify-content:space-between; font-size:11px; margin-top:16px; }
.power-detail { background:#1e302c; border-color:#486556; }
.power-detail small { font-size:11px; }
.inventory-toolbar { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:0 0 24px; }
.inventory-toolbar label { flex:1; max-width:470px; }
.inventory-toolbar .pill { white-space:nowrap; margin-bottom:6px; }
.inventory-grid { gap:11px; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); padding-top:10px; }
.inventory-slot { min-height:128px; background:radial-gradient(ellipse at 50% 30%,#41574c,#1b2d2b 80%); border-color:#496251; border-radius:12px; }
.inventory-slot img { height:110px; }
.inventory-slot strong { bottom:8px; right:9px; color:#edfae5; background:#13251de8; border:1px solid #52725a; border-radius:6px; font-size:14px; }
.inventory-slot:hover,.inventory-slot:focus-visible { border-color:#b5dfa7; box-shadow:0 0 0 2px #a5e4be18; }
.inventory-name { background:#253b30; border-color:#b0cf99; border-radius:7px; color:#edf4e2; }
.inventory-help { font-size:11px; margin-top:24px; color:#b0c3b2; }
.inventory-grid.compact { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; }
.inventory-grid.compact .inventory-slot { min-height:85px; border-radius:8px; }
.inventory-grid.compact img { height:76px; }
.inventory-grid.compact .inventory-slot strong { font-size:11px; padding:1px 5px; bottom:4px; right:4px; }
.empty-state { grid-column:1/-1; padding:32px 20px; border:1px dashed #587163; border-radius:10px; color:#d3ddcf; text-align:center; }
.empty-state small { display:block; margin-top:7px; }
.tech { position:relative; padding:20px; border-radius:13px; border-color:#44594e; background:#192a28; gap:13px; }
.tech.current { background:linear-gradient(140deg,#304936,#1c2e2a); border-color:#a3c99d; box-shadow:inset 0 3px #a3c99d; }
.tech.done { opacity:.72; }
.tech h3 { font-size:21px; font-weight:600; }
.tech p { font-size:12px; }
.tech .unlocks { font-size:11px; color:#bed0bd; line-height:1.6; }
.tech summary { cursor:pointer; padding:4px 0; }
.tech .unlocks p { margin-top:8px; font-size:11px; }
.tech button { align-self:end; font-size:12px; }
.cost-chips { display:flex; flex-wrap:wrap; gap:5px; }
.cost-chip { font-size:10px; border:1px solid #4c6652; padding:5px 7px; border-radius:5px; color:#bed4b9; background:#22382b; }
.cost-chip b { font-variant-numeric:tabular-nums; margin-left:5px; }
.cost-chip.missing { color:#edc09c; background:#42382b; border-color:#7a654a; }
.recipe-card { border-color:#42594f; border-radius:12px; padding:17px; background:#1a2b28; }
.recipe-card p { line-height:1.9; color:#b6c7bc; margin:12px 0; }
.recipe-card button { padding:8px 12px; }
.recipe-card h3 { font-size:15px; }
.metric { padding:21px; border:1px solid #455f50; border-radius:12px; background:linear-gradient(135deg,#2b4234,#1b2d29); }
.metric b { font-size:30px; margin:12px 0 5px; color:#d8edc6; font-weight:600; }
.metric em { font-style:normal; font-size:13px; color:#adc1a9; }
.metric p { font-size:11px; }
.energy-cards { margin:18px 0; }
.info-card { border:1px solid #41564c; border-radius:12px; padding:20px; background:#192b28; }
.info-card h3 { display:flex; align-items:center; gap:10px; }
.info-card p { margin-top:12px; font-size:12px; }
.callout { border-left:3px solid #b5cf96; padding:15px 18px; background:#30412e; border-radius:0 8px 8px 0; color:#d1dec1; font-size:12px; line-height:1.7; }
.save,.lobby-player { border-radius:10px; background:#192a29; border-color:#445b50; }
.overlay-label { top:103px; left:153px; border-color:#67866f; background:#213d30e8; color:#bde3b3; }
#notifications { top:99px; max-width:min(460px,80vw); }
.toast { background:#263d30f5; border-color:#789c76; color:#e4efda; border-radius:10px; padding:13px 18px; line-height:1.5; }
.toast.error { background:#4c3329; border-color:#b7896a; }
#tooltip { background:#1d302cf7; border-color:#71856c; color:#d3dfcb; border-radius:9px; }
@media (max-width:1150px) {
  .hud-top { grid-template-columns:138px minmax(0,1fr) 170px; padding:9px 11px; }
  .hud-brand { font-size:11px; gap:6px; }.hud-brand>.ui-icon { width:23px; }
  .resource-bar { padding:0 8px; gap:3px; }.resource { padding:0 3px; font-size:17px; }.resource small { font-size:9px; }
  .resource .item-icon { display:none; }.power { padding-left:11px; }.energy-reading { font-size:17px; }
  .objective { width:260px; }.inspector { width:295px; }.build-panel { width:344px; }
  .quickbar { left:48%; }.quickbar button { width:49px; }
  .menu-art-label { display:none; }
}
@media (max-width:850px) {
  .hud-top { grid-template-columns:1fr 160px; }.hud-brand { display:none; }.resource-bar { border-left:0; }
  .left-tools { width:101px; left:10px; }.left-tools button { padding:0 6px; gap:6px; font-size:10px; }.left-tools kbd { display:none; }
  .objective { right:10px; width:235px; }.build-panel { left:121px; width:320px; }.inspector { right:10px; width:285px; bottom:110px; }
  #app:has(.inspector) .map-panel { display:none; }.quickbar { left:45%; }.quickbar button { width:42px; font-size:8px; }
  .map-panel { width:124px; right:10px; }.map-panel canvas { width:102px; height:102px; }.map-heading { font-size:7px; }
  .hint { max-width:calc(100vw - 250px); font-size:10px; }.metrics { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .hud-top { left:8px; right:8px; top:8px; grid-template-columns:1fr; height:104px; padding:9px; }.resource-bar { border:0; padding:0; }.resource small { font-size:8px; }.resource { font-size:15px; }
  .power { margin-top:8px; padding:6px 2px 0; border-top:1px solid var(--line); grid-template-columns:auto auto auto; align-items:center; }.power>.eyebrow { font-size:8px; }.power .eyebrow .ui-icon { display:none; }.energy-reading { font-size:13px; }
  .left-tools { top:123px; width:43px; padding:3px; }.left-tools button { padding:0; justify-content:center; height:38px; }.left-tools button>span { display:none; }
  .objective { top:123px; width:220px; padding:13px; }.build-panel { top:123px; left:63px; right:10px; width:auto; bottom:112px; }.inspector { top:123px; left:63px; right:10px; width:auto; }
  .quickbar { left:8px; right:8px; transform:none; bottom:23px; justify-content:center; padding:5px; }.quickbar button { flex:1; min-width:0; width:auto; height:55px; font-size:7px; }.quickbar button b { font-size:19px; }
  .map-panel { display:none; }.hint { left:50%; bottom:91px; max-width:calc(100vw - 24px); font-size:9px; padding:6px 11px; }
  .grid2 { grid-template-columns:1fr; }.modal { padding:20px; max-height:94vh; }.modal-backdrop { padding:8px; }.modal-header h2 { font-size:25px; }
  .inventory-toolbar { align-items:stretch; flex-direction:column; gap:9px; }.inventory-toolbar .pill { align-self:start; }.inventory-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
  .menu-content { width:100%; }.menu h1 { font-size:49px; letter-spacing:-2px; }.menu-actions { width:100%; }.menu-topline>span:last-child,.menu-footer>span:last-child { display:none; }.menu-content>p { font-size:13px; }
}
@media (max-height:650px) and (min-width:621px) { .left-tools button { height:35px; }.inspector { bottom:112px; }#app:has(.inspector) .map-panel { display:none; }.menu-content { gap:13px; }.menu h1 { font-size:49px; }.menu-topline { top:20px; }.menu-footer { bottom:18px; }.menu-actions button { padding:11px 17px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }