:root{
  --bg:#070b12;
  --accent:#00d9c0;
  --accent2:#ffb020;
  --accent3:#ff5470;
  --panel:rgba(14,20,32,.82);
  --panel-solid:#101826;
  --panel-border:rgba(255,255,255,.08);
  --text:#eef3fb;
  --text-dim:#93a3bd;
  --res:#4fd1a5;
  --com:#4fa8ff;
  --ind:#ffcf4f;
  --radius:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  touch-action:none;overscroll-behavior:none;user-select:none;
}
#game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;}
/* subtle cinematic vignette over the 3D view — pure CSS, zero GPU cost */
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse 120% 105% at 50% 42%, transparent 62%, rgba(4,8,16,.28) 100%);
}

/* ---------------- overlays / modals ---------------- */
.overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 20%, rgba(0,217,192,.08), transparent 60%), rgba(4,7,13,.72);
  backdrop-filter:blur(10px) saturate(120%);
  padding:20px;
  animation:fadeIn .25s ease both;
}
.overlay.hidden{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
  width:100%;max-width:420px;
  background:linear-gradient(180deg, rgba(22,30,46,.96), rgba(14,20,32,.96));
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:22px 20px calc(20px + var(--safe-b));
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  max-height:88vh;overflow-y:auto;
  animation:popIn .3s cubic-bezier(.2,1,.3,1) both;
}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal h2{margin:0 0 6px;font-size:1.4rem;letter-spacing:.2px;}
.modal-sub{color:var(--text-dim);font-size:.88rem;line-height:1.4;margin:0 0 16px;}

/* boot screen */
.boot-inner{text-align:center;}
.boot-logo{display:flex;gap:6px;align-items:flex-end;justify-content:center;height:52px;margin-bottom:10px;}
.boot-bar{width:14px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent2));animation:boot-pulse 1.1s ease-in-out infinite;}
.b1{height:26px;animation-delay:0s;background:linear-gradient(180deg,#4fd1a5,#00b3a4);}
.b2{height:44px;animation-delay:.15s;background:linear-gradient(180deg,#00d9c0,#0aa89a);}
.b3{height:34px;animation-delay:.3s;background:linear-gradient(180deg,#ffb020,#ff8a3d);}
@keyframes boot-pulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
.boot-inner h1{margin:6px 0 2px;font-size:2rem;letter-spacing:1px;background:linear-gradient(90deg,#00d9c0,#ffb020);-webkit-background-clip:text;background-clip:text;color:transparent;}
.boot-sub{color:var(--text-dim);margin:0 0 20px;font-size:.85rem;}
.boot-progress{width:220px;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 auto;}
.boot-progress-fill{height:100%;width:8%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .25s ease;}
.boot-status{margin-top:12px;font-size:.78rem;color:var(--text-dim);}

/* mode select */
.mode-modal{max-width:460px;}
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px;}
.mode-card{
  background:rgba(255,255,255,.03);border:1px solid var(--panel-border);border-radius:14px;
  padding:16px 12px;text-align:center;color:var(--text);cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.mode-card:active{transform:scale(.96);}
.mode-card:hover{border-color:var(--accent);background:rgba(0,217,192,.06);}
.mode-icon{font-size:2rem;margin-bottom:6px;}
.mode-card h3{margin:0 0 4px;font-size:1.05rem;}
.mode-card p{margin:0;font-size:.76rem;color:var(--text-dim);line-height:1.35;}
.divider{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:.75rem;margin:14px 0 10px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--panel-border);}
.continue-row.hidden{display:none;}

/* buttons */
.btn{
  font:inherit;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;
  font-weight:600;font-size:.9rem;color:var(--text);
  transition:transform .12s ease, filter .15s ease;
}
.btn:active{transform:scale(.96);}
.btn-wide{width:100%;margin-top:8px;}
.btn-primary{background:linear-gradient(90deg,var(--accent),#00b3a4);color:#04211d;}
.btn-secondary{background:rgba(255,255,255,.07);border:1px solid var(--panel-border);}
.btn-ghost{background:transparent;border:1px solid var(--panel-border);color:var(--text-dim);}
.btn-ghost:hover{color:var(--text);}
.file-btn{display:inline-flex;align-items:center;justify-content:center;}

.menu-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;}

/* ---------------- HUD top ---------------- */
.hud-top{
  position:fixed;top:calc(10px + var(--safe-t));left:10px;right:10px;z-index:20;
  display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;
}
.hud-top.hidden{display:none;}
.hud-pill{
  pointer-events:auto;
  display:flex;align-items:center;gap:5px;
  background:var(--panel);border:1px solid var(--panel-border);
  padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:600;
  backdrop-filter:blur(8px);white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.hud-icon{font-size:.95rem;}
.hud-time{margin-left:auto;}
.hud-btn{font-size:1rem;padding:7px 11px;cursor:pointer;border:1px solid var(--panel-border);}
.hud-btn:active{transform:scale(.92);}
#hud-budget-val.neg{color:var(--accent3);}

/* demand meter */
.demand-meter{
  position:fixed;top:calc(56px + var(--safe-t));right:10px;z-index:19;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;
  padding:8px 10px;display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(8px);
}
.demand-meter.hidden{display:none;}
.demand-row{display:flex;align-items:center;gap:6px;}
.demand-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.demand-dot.res{background:var(--res);} .demand-dot.com{background:var(--com);} .demand-dot.ind{background:var(--ind);}
.demand-track{width:64px;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}
.demand-fill{height:100%;width:50%;border-radius:4px;transition:width .4s ease;}
.demand-fill.res{background:var(--res);} .demand-fill.com{background:var(--com);} .demand-fill.ind{background:var(--ind);}

/* ---------------- toolbar ---------------- */
.toolbar{
  position:fixed;left:8px;right:8px;bottom:calc(8px + var(--safe-b));z-index:20;
  display:flex;gap:5px;
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:18px;padding:6px;backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.toolbar.hidden{display:none;}
.tool-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:transparent;border:none;color:var(--text-dim);
  padding:8px 2px 7px;border-radius:13px;font-size:.62rem;font-weight:600;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .1s ease;
}
.tool-btn .tool-ico{font-size:1.25rem;line-height:1;}
.tool-btn.active{background:linear-gradient(180deg,rgba(0,217,192,.22),rgba(0,217,192,.08));color:var(--accent);}
.tool-btn:active{transform:scale(.92);}

/* ---------------- tool options bar ---------------- */
.tool-options{
  position:fixed;left:8px;right:8px;bottom:calc(76px + var(--safe-b));z-index:19;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;
  padding:10px 12px;backdrop-filter:blur(10px);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  animation:slideUp .18s ease both;
}
.tool-options.hidden{display:none;}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.opt-label{font-size:.7rem;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.4px;width:100%;}
.opt-btn{
  background:rgba(255,255,255,.06);border:1px solid var(--panel-border);color:var(--text);
  border-radius:10px;padding:7px 11px;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;
}
.opt-btn.active{background:var(--accent);color:#04211d;border-color:var(--accent);}
.opt-slider-row{display:flex;align-items:center;gap:8px;width:100%;font-size:.75rem;color:var(--text-dim);}
.opt-slider-row input[type=range]{flex:1;}

/* ---------------- building drawer ---------------- */
.building-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:21;
  background:var(--panel-solid);border-top:1px solid var(--panel-border);
  border-radius:20px 20px 0 0;
  padding:6px 12px calc(14px + var(--safe-b));
  transform:translateY(0);
  max-height:46vh;overflow-y:auto;
  box-shadow:0 -12px 30px rgba(0,0,0,.4);
  animation:slideUp .2s ease both;
}
.building-drawer.hidden{display:none;}
.drawer-handle{width:36px;height:4px;border-radius:3px;background:rgba(255,255,255,.2);margin:8px auto 10px;}
.drawer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;}
.build-item{
  background:rgba(255,255,255,.05);border:1px solid var(--panel-border);border-radius:12px;
  padding:10px 6px;text-align:center;cursor:pointer;color:var(--text);
}
.build-item.active{border-color:var(--accent);background:rgba(0,217,192,.12);}
.build-item .bi-ico{font-size:1.4rem;display:block;margin-bottom:4px;}
.build-item .bi-name{font-size:.65rem;font-weight:600;color:var(--text-dim);display:block;}
.build-item .bi-cost{font-size:.6rem;color:var(--accent2);display:block;margin-top:2px;}

/* ---------------- settings / save ---------------- */
.settings-list{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.settings-row strong{font-size:.86rem;}
.settings-hint{font-size:.72rem;color:var(--text-dim);}
.select{
  background:rgba(255,255,255,.07);color:var(--text);border:1px solid var(--panel-border);
  border-radius:8px;padding:7px 8px;font:inherit;font-size:.8rem;
}
.range{width:120px;}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:999px;transition:.2s;cursor:pointer;}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider::before{transform:translateX(18px);}

.save-modal{max-width:440px;}
.save-slots{display:flex;flex-direction:column;gap:8px;max-height:40vh;overflow-y:auto;margin-bottom:10px;}
.save-slot{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--panel-border);border-radius:12px;padding:8px;cursor:pointer;
}
.save-slot:hover{border-color:var(--accent);}
.save-thumb{width:56px;height:40px;border-radius:8px;background:#0d1420;object-fit:cover;flex:none;border:1px solid var(--panel-border);}
.save-slot-info{flex:1;min-width:0;}
.save-slot-name{font-size:.84rem;font-weight:700;}
.save-slot-meta{font-size:.68rem;color:var(--text-dim);}
.save-slot-del{background:none;border:none;color:var(--accent3);font-size:1rem;cursor:pointer;padding:4px 6px;}
.save-actions{display:flex;gap:8px;margin-bottom:6px;}
.save-actions .btn{flex:1;font-size:.76rem;padding:9px 8px;}

/* ---------------- toast ---------------- */
.toast-container{position:fixed;top:calc(56px + var(--safe-t));left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;}
.toast{
  background:rgba(16,24,38,.94);border:1px solid var(--panel-border);color:var(--text);
  padding:9px 16px;border-radius:999px;font-size:.8rem;font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.4);animation:toastIn .2s ease both, toastOut .3s ease 2.4s forwards;
  white-space:nowrap;
}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}

.fps-counter{
  position:fixed;bottom:calc(4px + var(--safe-b));left:4px;z-index:5;
  font-size:.6rem;color:rgba(255,255,255,.35);font-family:monospace;pointer-events:none;
}
.back-home{
  position:fixed;top:calc(10px + var(--safe-t));left:10px;z-index:6;
  font-size:.65rem;color:rgba(255,255,255,.3);text-decoration:none;font-family:monospace;
  opacity:0;pointer-events:none;
}
body.pre-game .back-home{opacity:1;pointer-events:auto;}

/* radial build cursor hint */
.crosshair-ring{position:fixed;width:1px;height:1px;pointer-events:none;}

@media (min-width:820px){
  .toolbar{max-width:560px;left:50%;right:auto;transform:translateX(-50%);}
  .tool-options{max-width:560px;left:50%;right:auto;transform:translateX(-50%);}
  .hud-top{left:16px;right:16px;}
}

/* Narrow phones: hud-top pills wrap to two rows, so push the demand meter
   (and anything else pinned near the top) down to clear the wrapped row. */
@media (max-width:400px){
  .demand-meter{top:calc(96px + var(--safe-t));}
}