/* Datacenter Tycoon HUD — Obelinf zinc theme (Inter + JetBrains Mono).
   Site global CSS already loads both fonts; fall back to system stacks. */

:root{
  --bg:#0e0f11;
  --panel:#141617;
  --panel-2:#141617;
  --panel-3:#1d2023;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --text:#fafafa;
  --muted:#a1a1aa;
  --muted-strong:#d4d4d8;
  --dim:#71717a;
  --teal:#00cbaa;
  --amber:#f59e0b;
  --red:#f87171;
  --radius:10px;
  --radius-sm:8px;
  --font-body:"Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Scope game vars to .app to avoid collision with site tokens */
.app{
  --bg:#0e0f11;
  --panel:#141617;
  --panel-2:#141617;
  --panel-3:#1d2023;
  --border:rgba(255,255,255,0.08);
  --text:#fafafa;
  --muted:#a1a1aa;
  --muted-strong:#d4d4d8;
  --dim:#71717a;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body)}
button{font:inherit}

/* Layout: full-width viewport, no sidebar. Management lives in header modals. */
.app{display:grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; height:calc(100svh - 72px); min-height:600px; gap:0; position:relative; background:var(--bg)}
/* Fullscreen mode: game root fills the screen */
#dc-game-root:fullscreen{width:100vw; height:100vh; height:100svh; background:var(--bg); padding:0}
#dc-game-root:fullscreen .app{height:100vh; height:100svh; min-height:0}

/* ============ COMMAND DECK TOP BAR ============ */
.topbar{grid-column:1 / -1; display:flex; align-items:center; gap:12px; padding:8px 14px; min-height:62px; background:#0e0f11; border-bottom:1px solid var(--border); position:relative; z-index:10; flex-wrap:wrap}
.topbar .brand{display:flex; align-items:center; gap:10px; flex-shrink:0; padding-right:12px; border-right:1px solid var(--border)}
.dc-brand-text{display:flex; flex-direction:column; line-height:1.2; gap:2px}
.dc-brand-title{font-weight:650; font-size:13px; letter-spacing:0.08em; color:#fafafa}
.dc-brand-sub{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; color:var(--muted)}
.dc-live-dot{width:7px; height:7px; border-radius:999px; background:var(--teal); animation:dcBlink 2s infinite}
@keyframes dcBlink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ============ HUD MODULES ============ */
.hud{flex:0 1 auto; display:flex; gap:8px; align-items:stretch; min-width:0; margin:0 auto}
.hud-card{flex:0 1 184px; width:184px; min-width:0; background:#141617; border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; display:flex; flex-direction:column; gap:5px; justify-content:center}
.hud-card:first-child, .hud-card:last-child{flex-basis:208px; width:208px}
.hud-label{font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; line-height:1.2; white-space:nowrap}
.hud-row{display:flex; align-items:baseline; gap:6px; flex-wrap:nowrap; min-width:0}
.hud-value{font-weight:700; font-size:16px; letter-spacing:-0.01em; line-height:1.2; white-space:nowrap; color:#fafafa; font-variant-numeric:tabular-nums}
.hud-value.pos{color:var(--teal)} .hud-value.neg{color:var(--red)}
.hud-sub{font-family:var(--font-mono); font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; font-variant-numeric:tabular-nums}
.hud-sub.pos{color:var(--teal)} .hud-sub.neg{color:var(--red)}
.bar{height:4px; background:#1d2023; border-radius:999px; overflow:hidden; flex-shrink:0}
.bar-fill{height:100%; border-radius:999px; transition: width 420ms cubic-bezier(.22,1,.36,1), background 220ms}
.bar-fill.good{background:var(--teal)}
.bar-fill.warn{background:var(--amber)}
.bar-fill.bad{background:var(--red); animation:dcPulse 1.2s infinite}
.bar-fill.cool{background:var(--teal)}
@keyframes dcPulse{0%,100%{opacity:1}50%{opacity:0.55}}

.top-actions{display:flex; gap:8px; align-items:center; padding-left:12px; border-left:1px solid var(--border)}

/* ============ BUTTONS (shadcn-like) ============ */
.btn{appearance:none; border:1px solid var(--border-strong); background:#1d2023; color:#fafafa; padding:7px 12px; border-radius:var(--radius-sm); cursor:pointer; font-weight:600; font-size:12.5px; letter-spacing:0.02em; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; box-sizing:border-box; transition: background 140ms, border-color 140ms, transform 120ms}
.btn:active{transform:translateY(1px)}
.btn:hover{border-color:rgba(255,255,255,0.25); background:#26292e}
.btn:focus-visible{outline:2px solid rgba(255,255,255,0.4); outline-offset:2px}
.btn-primary{background:#fafafa; color:#0e0f11; border-color:#fafafa; font-weight:650}
.btn-primary:hover{background:#e4e4e7; border-color:#e4e4e7}
.btn-danger{background:rgba(248,113,113,0.1); border-color:rgba(248,113,113,0.4); color:#fca5a5}
.btn-danger:hover{background:rgba(248,113,113,0.18); border-color:rgba(248,113,113,0.6)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:#1d2023}
.btn-crisis{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; height:auto; min-height:52px; padding:10px 12px; background:#1d2023; border-color:var(--border-strong); width:100%; text-align:left; line-height:1.4; white-space:normal}
.btn-crisis:hover{border-color:var(--amber)}
.btn-crisis span{display:block; width:100%; overflow-wrap:anywhere; font-weight:600}
.btn-crisis small{color:var(--muted); font-weight:500; display:block; width:100%; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:11px}
.pill{font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:#1d2023; color:var(--muted-strong)}
.pill.live{color:var(--teal); border-color:rgba(0,203,170,0.4); background:rgba(0,203,170,0.08)}

/* Left sidebar — build menu */
.sidebar{border-right:1px solid var(--border); background:#0e0f11; display:flex; flex-direction:column; min-height:0}
.build-grid{padding:12px; display:grid; grid-template-columns:1fr; gap:10px; overflow:auto}
.build-card{appearance:none; text-align:left; background:#141617; border:1px solid var(--border); border-radius:var(--radius); padding:12px; cursor:pointer; transition: border-color 160ms, background 160ms; display:flex; flex-direction:column; gap:0}
.build-card:hover{border-color:var(--border-strong); background:#191b1e}
.build-card.selected{border-color:rgba(255,255,255,0.35); background:#1d2023}
.build-card.disabled{opacity:0.52; cursor:not-allowed}
.build-head{display:flex; align-items:center; gap:8px}
.build-icon{width:30px;height:30px; border-radius:8px; display:grid; place-items:center; background:#1d2023; border:1px solid var(--border-strong); color:#fafafa; font-weight:700; font-size:14px}
.build-name{font-weight:600; font-size:14px; flex:1; color:#fafafa; letter-spacing:-0.01em}
.build-cost{font-family:var(--font-mono); font-weight:600; font-size:12px; background:#0e0f11; border:1px solid var(--border-strong); color:#fafafa; padding:4px 8px; border-radius:999px; font-variant-numeric:tabular-nums}
.build-stats{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.chip{font-family:var(--font-mono); font-size:11px; font-weight:500; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:#1d2023; color:var(--muted-strong)}
.chip-power{color:#fcd34d} .chip-heat{color:#fca5a5} .chip-cool{color:#5eead4} .chip-money{color:#6ee7b7} .chip-good{color:#d4d4d8}
.build-desc{color:var(--muted); font-size:13.5px; line-height:1.55; margin-top:8px}
.build-foot{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--dim)}
.build-foot .count{font-weight:700; color:var(--text); background:var(--panel-3); padding:2px 7px; border-radius:999px; border:1px solid var(--border)}
.legend{margin-top:auto; border-top:1px solid var(--border); padding:12px; background:var(--panel-2); display:grid; gap:8px}

/* Center — canvas */
.viewport{position:relative; background:radial-gradient(1200px 700px at 50% 0%, #17191d 0%, #0e0f11 62%); overflow:hidden; display:flex; grid-column:1}
.viewport::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:5; background:radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.5) 100%)}
#c{width:100%; height:100%; display:block; outline:none}

/* Brightness tweaks: ensure small text is AAA readable on dark */
.pill{color:var(--muted-strong)}
.build-desc, .crisis-desc, .crisis-target{color:var(--muted)}

/* Tutorial — mission briefing */
.tutorial-overlay{position:absolute; inset:0; background:rgba(14,15,17,0.8); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:18px; z-index:30}
.tutorial-overlay.open{display:flex}
.tutorial-card{width:min(640px,100%); max-height:min(88vh, 680px); background:#141617; border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 32px 80px rgba(0,0,0,0.6); overflow:hidden; animation:tutorialIn 200ms cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column}
.tutorial-card::before{content:"MISSION BRIEFING"; display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.22em; color:var(--muted); border-bottom:1px solid var(--border); background:#1d2023; padding:10px 18px; font-weight:600}
@keyframes tutorialIn{from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1; transform:none}}
.tutorial-head{padding:12px 18px 0; display:flex; align-items:center; justify-content:flex-end; gap:12px}
.tutorial-close{width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#1d2023; color:var(--muted-strong); cursor:pointer; display:grid; place-items:center}
.tutorial-close:hover{border-color:var(--border-strong); color:#fafafa}
.tutorial-body{padding:18px; display:grid; gap:16px; overflow:auto; min-height:0; flex:1}
.tutorial-visual{height:96px; border-radius:var(--radius); background:#0e0f11; border:1px solid var(--border); display:grid; place-items:center; font-size:34px; position:relative; overflow:hidden}
.tutorial-visual small{position:absolute; bottom:8px; right:10px; font-size:10px; color:var(--dim); letter-spacing:0.12em; text-transform:uppercase; font-family:var(--font-mono)}
.tutorial-title{margin:0; font-size:19px; font-weight:650; letter-spacing:-0.02em; line-height:1.25; color:#fafafa}
.tutorial-copy{margin:0; color:var(--muted-strong); font-size:14.5px; line-height:1.6}
.tutorial-copy b{color:#fafafa}
.tutorial-bullets{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.tutorial-bullets li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.55; color:var(--muted-strong); background:#1d2023; border:1px solid var(--border); padding:10px 12px; border-radius:var(--radius)}
.tutorial-bullets li > span:first-child{min-width:24px; height:24px; padding:0 6px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; background:#0e0f11; border:1px solid var(--border); font-size:11px; line-height:1; flex:0 0 auto; white-space:nowrap}
.tutorial-bullets li > span:last-child{flex:1; min-width:0; word-break:break-word}
.tutorial-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-top:1px solid var(--border); background:#141617; flex-shrink:0}
.tutorial-dots{display:flex; gap:6px; align-items:center}
.tutorial-dots i{width:8px; height:8px; border-radius:999px; background:#1d2023; border:1px solid var(--border-strong); display:block; transition:all 180ms}
.tutorial-dots i.active{background:#fafafa; border-color:#fafafa; width:22px}
.tutorial-actions{display:flex; gap:8px; align-items:center}
.btn-help{width:34px; height:34px; box-sizing:border-box; border-radius:8px; border:1px solid var(--border-strong); background:#1d2023; color:#fafafa; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700; font-size:13px; flex-shrink:0}
.btn-help:hover{background:#26292e}

/* Persistent problem strip */
.alert-strip{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 14px; background:#141210; border-bottom:1px solid rgba(248,113,113,0.4); font-size:12.5px; line-height:1.4; font-family:var(--font-mono)}
.alert-strip[hidden]{display:none}
.alert-strip.good{background:#0c1512; border-bottom:1px solid rgba(0,203,170,0.4)}
.alert-pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; border:1px solid rgba(248,113,113,0.5); background:rgba(248,113,113,0.08); color:#fecaca; font-weight:600; letter-spacing:0.01em}
.alert-pill.warn{border-color:rgba(245,158,11,0.5); background:rgba(245,158,11,0.08); color:#fde68a; animation:none}
.alert-pill.good{border-color:rgba(0,203,170,0.5); background:rgba(0,203,170,0.08); color:#a7f3d0; animation:none}
.alert-pill.good a{color:#5eead4; font-weight:700; text-decoration:underline; text-underline-offset:2px}

/* ============ MODALS ============ */
.modal{position:absolute; inset:0; background:rgba(14,15,17,0.72); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:18px; z-index:20}
.modal-card{width:min(560px, 100%); background:#141617; border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 24px 64px rgba(0,0,0,0.6); overflow:hidden; animation:modalBoot 180ms cubic-bezier(.22,1,.36,1); position:relative}
@keyframes modalBoot{from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1; transform:none}}
.modal-head{padding:12px 12px 12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; border-bottom:1px solid var(--border)}
.dc-modal-title{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:650; letter-spacing:-0.01em; color:#fafafa}
.dc-modal-title .dc-kicker{font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-strong); background:#1d2023; border:1px solid var(--border); padding:3px 8px; border-radius:999px; font-weight:600}
#crisis-modal .dc-kicker{color:#fca5a5; border-color:rgba(248,113,113,0.4); background:rgba(248,113,113,0.08)}
#market-modal .dc-kicker{color:#5eead4; border-color:rgba(0,203,170,0.4); background:rgba(0,203,170,0.08)}
.modal-head .btn{height:30px}
.modal-head strong{letter-spacing:-0.02em}
.crisis-body{padding:14px; display:grid; gap:12px}
.crisis-head{display:flex; gap:14px; align-items:flex-start; background:rgba(248,113,113,0.05); border:1px solid rgba(248,113,113,0.25); border-radius:var(--radius); padding:12px}
.crisis-icon{width:48px;height:48px; border-radius:10px; display:grid; place-items:center; font-size:22px; background:#1d2023; border:1px solid var(--border-strong); color:#fafafa; flex:0 0 48px}
.crisis-title{font-weight:650; font-size:16px; letter-spacing:-0.01em; color:#fafafa}
.crisis-desc{color:var(--muted); font-size:14px; line-height:1.55; margin-top:4px}
.crisis-extra{margin-top:8px; font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fde68a; background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.35); padding:6px 8px; border-radius:8px}
.crisis-target{margin-top:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted-strong); background:#0e0f11; border:1px solid var(--border); padding:6px 8px; border-radius:8px}
.crisis-timer{height:6px; background:#1d2023; border-radius:999px; overflow:hidden}
.crisis-timer-fill{height:100%; width:100%; background:var(--red)}
.crisis-actions{display:grid; gap:8px}

/* v0.3 — manager panels */
.section-title{font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:4px 2px 0}
.market-row{display:flex; align-items:center; gap:8px; margin-top:10px}
.market-row .count{font-family:var(--font-mono); font-size:11px; color:var(--muted); border:1px solid var(--border); background:#0e0f11; padding:5px 8px; border-radius:999px; font-variant-numeric:tabular-nums}
.btn-sm{padding:6px 10px; font-size:12px; border-radius:8px; height:30px}
.rooms-list, .contracts-list{display:grid; gap:10px}
.room-card, .contract-card{background:#1d2023; border:1px solid var(--border); border-radius:var(--radius); padding:12px; display:grid; gap:8px}
.room-card.unlocked{border-color:rgba(0,203,170,0.35)}
.room-head, .contract-head{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; font-weight:600; letter-spacing:-0.01em}
.room-desc, .contract-desc, .contract-client{color:var(--muted); font-size:13.5px; line-height:1.55}
.room-caps, .contract-req{font-family:var(--font-mono); font-size:11.5px; color:var(--muted)}
.contract-pay{font-family:var(--font-mono); font-weight:600; color:#5eead4; font-size:13.5px; font-variant-numeric:tabular-nums}
.contract-card.active-ok{border-color:rgba(0,203,170,0.35)}
.contract-card.active-bad{border-color:rgba(248,113,113,0.5)}
.contract-status{font-size:13.5px; font-weight:600}
.contract-locked{font-family:var(--font-mono); font-size:12px; color:var(--amber)}
.fleet-row{display:flex; justify-content:space-between; font-size:12px; font-family:var(--font-mono); background:#0e0f11; border:1px solid var(--border); border-radius:8px; padding:8px}

/* v0.3 — colo choice, cage expansions */
.tier-list{display:grid; gap:8px}
.tier-card{background:#0e0f11; border:1px solid var(--border); border-radius:var(--radius); padding:10px; display:grid; gap:6px}
.tier-card:not(.poor):hover{border-color:var(--border-strong)}
.tier-card.poor{opacity:0.65}
.tier-head{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:600}
.tier-price{font-family:var(--font-mono); font-weight:600; color:#5eead4; font-size:13px}
.cage-row{display:grid; gap:8px; background:#0e0f11; border:1px solid var(--border); border-radius:var(--radius); padding:10px}
.cage-pips{display:inline-flex; gap:4px; margin:0 4px}
.cage-pips i{width:16px; height:8px; border-radius:999px; background:#1d2023; border:1px solid var(--border-strong); display:block}
.cage-pips i.on{background:#fafafa; border-color:#fafafa}

/* v0.4 — market modal, offer modal, toasts */
#contracts-modal{z-index:32}
#facilities-modal{z-index:33}
#offer-modal{z-index:35}
#market-modal{z-index:40}
#wipe-modal{z-index:60}
.modal-card{max-height:min(88vh, 720px); display:flex; flex-direction:column}
.crisis-body{overflow:auto; min-height:0}
.crisis-body::-webkit-scrollbar, .tutorial-body::-webkit-scrollbar{width:8px}
.crisis-body::-webkit-scrollbar-thumb, .tutorial-body::-webkit-scrollbar-thumb{background:#2a2d32; border-radius:4px}
.badge-count{font-family:var(--font-mono); font-size:10px; font-weight:600; background:#1d2023; border:1px solid var(--border-strong); color:#d4d4d8; padding:2px 8px; border-radius:999px; white-space:nowrap}
.badge-count.hot{background:rgba(0,203,170,0.1); border-color:rgba(0,203,170,0.5); color:#5eead4}
.modal-wide{width:min(720px, 100%)}
.modal-sm{width:min(400px, 100%)}
.alert-title{font-size:17px; font-weight:600; letter-spacing:-0.01em; color:#fafafa}
.alert-desc{margin:0; font-size:13.5px; line-height:1.55; color:var(--muted)}
.alert-footer{display:flex; justify-content:flex-end; gap:8px; padding-top:2px}
.btn-destructive{background:rgba(248,113,113,0.12); border-color:rgba(248,113,113,0.4); color:#fca5a5}
.btn-destructive:hover{background:rgba(248,113,113,0.22); border-color:rgba(248,113,113,0.6)}
.market-grid{grid-template-columns:1fr 1fr}
.market-grid .build-card{margin:0; background:#1d2023}
.blocked-box{font-family:var(--font-mono); font-size:12px; font-weight:600; color:#fde68a; background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.35); padding:8px; border-radius:8px; line-height:1.5}
.toast-wrap{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:grid; gap:8px; z-index:50; width:min(460px, calc(100% - 32px))}
.toast{background:#1d2023; border:1px solid var(--border-strong); border-radius:var(--radius); padding:10px 12px; font-size:13px; line-height:1.5; box-shadow:0 12px 32px rgba(0,0,0,0.5); opacity:1; transition:opacity 400ms; animation:toastIn 180ms cubic-bezier(.22,1,.36,1)}
@keyframes toastIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.toast.good{border-color:rgba(0,203,170,0.5)}
.toast.bad{border-color:rgba(248,113,113,0.5)}
.toast.warn{border-color:rgba(245,158,11,0.5)}
.toast.out{opacity:0}
@media (max-width: 640px){ .market-grid{grid-template-columns:1fr} }

/* responsive */
@media (max-width: 720px){
  .app{grid-template-columns:1fr; grid-template-rows: auto auto}
  .topbar{flex-wrap:wrap; height:auto; padding:10px}
  .topbar .brand{border-right:none}
  .top-actions{border-left:none; padding-left:0; flex-wrap:wrap}
  .hud{order:3; width:100%; flex-wrap:wrap}
  .hud-card, .hud-card:first-child, .hud-card:last-child{flex:1 1 45%; width:auto}
  .viewport{min-height:420px}
}