* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; font-family: 'Cairo', system-ui, sans-serif;
  overflow: hidden; background: #0a1a18; color: #fff;
  user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; position: fixed; width: 100%;
}

#scene { position: fixed; inset: 0; z-index: 0; }

/* ===== Boot ===== */
.boot-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(ellipse at 50% 30%, #0c2a24 0%, #050d0c 70%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s, transform 0.6s;
}
.boot-screen.hidden { opacity: 0; pointer-events: none; transform: scale(1.05); }
.boot-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 40%, rgba(20,163,150,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(232,120,61,0.1) 0%, transparent 50%);
  animation: bgPulse 8s ease-in-out infinite;
}
@keyframes bgPulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.boot-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px;
}
.boot-logo { font-size: 90px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(20,163,150,.6)); }
@keyframes float { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-20px) rotate(5deg)} }
.boot-title {
  font-size: 64px; font-weight: 900; letter-spacing: 10px;
  background: linear-gradient(135deg, #14a396, #ffd166, #e8783d);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.boot-sub { color: #8aa89a; font-size: 14px; letter-spacing: 2px; }
.boot-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; width: 240px; }
.btn-primary, .btn-secondary {
  padding: 16px 24px; border-radius: 14px; border: 0;
  font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; transition: all .25s;
}
.btn-primary { background: linear-gradient(135deg,#0c7b72,#14a396); color:#fff; box-shadow:0 8px 30px rgba(12,123,114,.5); }
.btn-secondary { background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.1); }
.btn-primary:disabled,.btn-secondary:disabled { opacity:.35; }
.btn-primary:active,.btn-secondary:active { transform:scale(.97); }
.boot-version { color:#4a5a58; font-size:11px; letter-spacing:1px; }

/* ===== HUD ===== */
.hud {
  position: fixed; top: calc(env(safe-area-inset-top,0px) + 10px);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 10;
  background: rgba(8,18,16,.88); backdrop-filter: blur(20px);
  padding: 5px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.hud-item {
  padding: 6px 14px; display: flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: 13px; border-radius: 11px;
  background: rgba(255,255,255,.04);
}
.hud-item span { font-size: 15px; }
.hud-item b { font-family:'Space Grotesk',monospace; color:#ffd166; font-size:13px; }

/* ===== Interact Prompt ===== */
.interact-prompt {
  position: fixed; bottom: calc(env(safe-area-inset-bottom,0px) + 190px);
  left: 50%; transform: translateX(-50%);
  background: rgba(8,18,16,.96); backdrop-filter: blur(20px);
  padding: 12px 22px; border-radius: 18px;
  border: 2px solid rgba(20,163,150,.6);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 20; box-shadow: 0 8px 30px rgba(20,163,150,.35);
  min-width: 180px; transition: all .25s;
}
.interact-prompt.hidden { opacity:0; transform:translate(-50%,20px); pointer-events:none; }
.interact-icon { font-size: 28px; }
.interact-text { font-size: 14px; font-weight: 700; color: #bde1c8; }
.interact-progress { width:100%; height:5px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; margin-top:4px; }
.interact-progress span { display:block; height:100%; background:linear-gradient(90deg,#0c7b72,#14a396); transition:width .2s; width:0; }

/* ===== Touch Controls ===== */
.touch-controls { position:fixed; inset:0; z-index:15; pointer-events:none; }
.touch-controls.hidden { display:none; }

.joystick {
  position: absolute; bottom: calc(env(safe-area-inset-bottom,0px) + 30px); left: 25px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(8,18,16,.45); backdrop-filter: blur(12px);
  border: 2px solid rgba(20,163,150,.35); pointer-events: auto; touch-action: none;
  box-shadow: 0 0 0 6px rgba(20,163,150,.07), 0 4px 20px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.joystick-ring {
  position: absolute; width: 80px; height: 80px; border-radius: 50%;
  border: 1px dashed rgba(20,163,150,.25); pointer-events: none;
}
.joystick-stick {
  position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1ec9bb, #0c7b72);
  box-shadow: 0 4px 20px rgba(20,163,150,.8), inset 0 1px 0 rgba(255,255,255,.3);
  pointer-events: none;
}

.big-btn {
  position: absolute; bottom: calc(env(safe-area-inset-bottom,0px) + 35px); right: 25px;
  width: 95px; height: 95px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  background: radial-gradient(circle at 40% 35%, #c4623a, #8b3f2e);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; pointer-events: auto;
  box-shadow: 0 8px 30px rgba(232,120,61,.6), inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .15s; font-family: inherit; cursor: pointer; touch-action: manipulation;
}
.big-btn:active { transform:scale(.88); }
.big-btn span { font-size: 34px; }
.big-btn small { font-size: 11px; font-weight: 700; }
.interact-btn.active {
  background: radial-gradient(circle at 40% 35%, #1ec9bb, #0c7b72);
  box-shadow: 0 0 35px rgba(20,163,150,.9), inset 0 1px 0 rgba(255,255,255,.2);
}

.mobile-side-btns {
  position: absolute; bottom: calc(env(safe-area-inset-bottom,0px) + 145px); right: 25px;
  display: flex; flex-direction: column; gap: 10px; pointer-events: auto;
}
.side-btn {
  width: 62px; height: 62px; border-radius: 18px;
  background: rgba(8,18,16,.78); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.12); color: #fff; font-size: 20px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: all .15s;
  touch-action: manipulation; font-family: inherit;
}
.side-btn small { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.7); }
.side-btn:active { background:#0c7b72; transform:scale(.9); }

.top-btns {
  position: absolute; top: calc(env(safe-area-inset-top,0px) + 10px); right: 10px;
  display: flex; gap: 6px; pointer-events: auto;
}
.mini-btn {
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(8,18,16,.82); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.5); transition: all .2s; touch-action: manipulation;
}
.mini-btn:active { background:#0c7b72; transform:scale(.88); }

/* ===== PC UI ===== */
.pc-ui { position:fixed; inset:0; z-index:15; pointer-events:none; }
.pc-ui.hidden { display:none; }

.crosshair { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:22px; }
.crosshair::before,.crosshair::after { content:''; position:absolute; background:rgba(255,255,255,.9); border-radius:2px; }
.crosshair::before { width:2px; height:100%; left:50%; transform:translateX(-50%); }
.crosshair::after  { width:100%; height:2px; top:50%; transform:translateY(-50%); }

.pc-keys { position:absolute; bottom:30px; left:30px; display:flex; flex-direction:column; gap:5px; }
.key-row { display:flex; gap:5px; }
.key-cap {
  width:42px; height:42px; border-radius:9px;
  background:rgba(8,18,16,.82); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15); border-bottom:3px solid rgba(0,0,0,.4);
  color:#fff; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',monospace; transition:all .1s;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.key-cap.empty { background:transparent; border-color:transparent; box-shadow:none; }
.key-cap.pressed { background:#0c7b72; border-bottom-width:1px; transform:translateY(2px); }

.pc-hints {
  position:absolute; bottom:30px; right:30px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
}
.pc-hints span {
  background:rgba(8,18,16,.78); backdrop-filter:blur(12px);
  padding:5px 12px; border-radius:8px; font-size:12px; color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.07);
}
.pc-hints b { color:#ffd166; }

.pc-action-bar {
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 10px); right:10px;
  display:flex; gap:6px; pointer-events:auto;
}
.pc-action-btn {
  padding:9px 16px; border-radius:11px;
  background:rgba(8,18,16,.85); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1); color:#fff;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4); transition:all .2s;
}
.pc-action-btn:hover { background:#0c7b72; border-color:#14a396; }
.pc-action-btn:active { transform:scale(.95); }

/* ===== Build Menu ===== */
.build-menu {
  position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  transition:opacity .3s;
}
.build-menu.hidden { opacity:0; pointer-events:none; }
.build-menu-inner {
  background:#0e1e1b; border-radius:22px; width:min(440px,100%);
  max-height:85vh; overflow-y:auto;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.build-menu-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.07); position:sticky; top:0;
  background:#0e1e1b; border-radius:22px 22px 0 0;
}
.build-menu-header h3 { font-size:17px; color:#bde1c8; }
.build-menu-header button {
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.08); border:0; color:#fff; font-size:16px; cursor:pointer;
}
.build-parts { padding:14px; display:flex; flex-direction:column; gap:10px; }
.build-part {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:rgba(255,255,255,.04); border-radius:16px;
  border:1px solid rgba(255,255,255,.07); transition:border-color .2s;
}
.build-part.built { border-color:rgba(20,163,150,.4); background:rgba(20,163,150,.06); }
.build-part-icon { font-size:34px; min-width:40px; text-align:center; }
.build-part-info { flex:1; }
.build-part-info h4 { font-size:14px; margin-bottom:3px; }
.build-part-info .cost { font-size:11px; color:#8aa89a; }
.build-part-info .cost b { color:#ffd166; font-family:'Space Grotesk',monospace; }
.build-part-info .built-label { font-size:11px; color:#14a396; font-weight:700; }
.build-btn {
  padding:10px 18px; border-radius:11px; border:0;
  background:linear-gradient(135deg,#0c7b72,#14a396);
  color:#fff; font:inherit; font-weight:700; font-size:13px;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.build-btn:disabled { background:#1a2a28; color:#4a5a58; cursor:default; }
.build-btn:active:not(:disabled) { transform:scale(.95); }
.build-btn.done { background:rgba(20,163,150,.2); color:#14a396; cursor:default; }

/* ===== Main Menu ===== */
.main-menu {
  position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  transition:opacity .3s;
}
.main-menu.hidden { opacity:0; pointer-events:none; }
.main-menu-inner {
  background:#0e1e1b; border-radius:22px; width:min(360px,100%);
  padding:22px; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.main-menu-inner h3 { font-size:18px; color:#bde1c8; margin-bottom:16px; text-align:center; }
.main-menu-inner button {
  width:100%; padding:14px; border-radius:13px; border:0;
  background:rgba(255,255,255,.06); color:#fff; font:inherit; font-weight:700; font-size:14px;
  cursor:pointer; margin-bottom:8px; transition:all .2s;
}
.main-menu-inner button:active { background:#0c7b72; transform:scale(.98); }
.main-menu-inner button:last-child { background:rgba(232,120,61,.2); margin-bottom:0; }

/* ===== Help ===== */
.help-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  transition:opacity .3s;
}
.help-modal.hidden { opacity:0; pointer-events:none; }
.help-inner {
  background:#0e1e1b; border-radius:22px; width:min(360px,100%);
  padding:22px; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.help-inner h3 { text-align:center; font-size:18px; color:#bde1c8; margin-bottom:16px; }
.help-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.help-row {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:rgba(255,255,255,.04); border-radius:12px; font-size:13px; color:#bde1c8;
}
.help-row span { font-size:22px; }
.help-inner button {
  width:100%; padding:14px; border-radius:13px; border:0;
  background:linear-gradient(135deg,#0c7b72,#14a396);
  color:#fff; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
}

/* ===== Toast ===== */
.toast {
  position:fixed; bottom:45%; left:50%; transform:translate(-50%,20px);
  background:linear-gradient(135deg,#0c7b72,#14a396);
  color:#fff; padding:12px 24px; border-radius:14px;
  font-weight:700; font-size:13px; opacity:0; pointer-events:none;
  transition:all .3s; z-index:200;
  box-shadow:0 10px 40px rgba(12,123,114,.6); text-align:center; max-width:80vw;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.save-toast {
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 120px);
  left:50%; transform:translateX(-50%) translateY(-20px);
  background:rgba(12,123,114,.95); padding:8px 16px; border-radius:10px;
  font-size:12px; font-weight:700; opacity:0; transition:all .3s; z-index:200; pointer-events:none;
}
.save-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Sell bar ===== */
.sell-bar {
  position:fixed; bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  left:50%; transform:translateX(-50%);
  background:rgba(8,18,16,.88); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.07); border-radius:16px;
  padding:8px 14px; display:flex; gap:8px; z-index:10;
}
.sell-btn {
  padding:8px 14px; border-radius:10px; border:0;
  background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s; touch-action:manipulation;
}
.sell-btn:disabled { opacity:.4; cursor:not-allowed; }
.sell-btn:active { background:#0c7b72; transform:scale(.95); }

@media (max-width:700px) {
  .sell-bar { top:calc(env(safe-area-inset-top,0px) + 66px); bottom:auto; padding:5px; gap:4px; }
  .sell-btn { padding:7px 9px; font-size:10px; }
}

@media (max-width:400px) {
  .hud { padding:4px; gap:4px; }
  .hud-item { padding:5px 8px; font-size:11px; }
  .joystick { width:110px; height:110px; left:15px; }
  .joystick-stick { width:46px; height:46px; }
  .big-btn { width:82px; height:82px; right:15px; }
  .big-btn span { font-size:28px; }
  .mini-btn { width:40px; height:40px; font-size:18px; }
}