:root{
  --bg:#10151e; --bg2:#161d29; --panel:#1b2330; --panel2:#222c3c;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --ink:#eef2f7; --sub:#9fb0c8; --accent:#4a90d9; --gold:#ffd23f;
  --good:#3fbf7f; --bad:#e8584f; --topbar:54px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",system-ui,sans-serif;
  user-select:none; -webkit-user-select:none; touch-action:none;
}
button{font-family:inherit; cursor:pointer; color:inherit}

/* ── 상단 바 ── */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar); z-index:30;
  display:flex; align-items:center; gap:10px; padding:0 max(12px,env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-left));
  padding-top:env(safe-area-inset-top);
  background:rgba(16,21,30,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
#topbar .back{ color:var(--sub); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap }
#topbar .back:hover{ color:var(--ink) }
#topbar .brand{ font-weight:800; letter-spacing:-.01em; font-size:16px; display:flex; align-items:center; gap:6px }
#topbar .brand .ic{ font-size:18px }
#topbar .spacer{ flex:1 }
#topbar .goal{
  font-size:13px; font-weight:700; color:var(--gold);
  background:rgba(255,210,63,.12); border:1px solid rgba(255,210,63,.35);
  padding:5px 10px; border-radius:999px; white-space:nowrap;
}
#topbar button{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line2);
  background:var(--panel2); font-size:17px; line-height:1; display:grid; place-items:center;
}
#topbar button:hover{ background:#2c3850 }

/* ── 스테이지 ── */
#app{ position:fixed; inset:0; padding-top:var(--topbar) }
#stage{ position:absolute; inset:0; top:var(--topbar) }
#game{ display:block; width:100%; height:100%; background:var(--bg); cursor:crosshair }

/* ── 인벤토리 바 ── */
#invbar{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:14;
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  max-width:calc(100% - 16px); padding:6px 8px;
  background:rgba(22,29,41,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:14px;
}
#invbar .inv{
  display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700;
  padding:3px 8px; border-radius:9px; background:rgba(255,255,255,.05); white-space:nowrap;
}
#invbar .inv .ic{ font-size:15px }
#invbar .inv .n{ font-variant-numeric:tabular-nums; color:var(--ink) }
#invbar .inv.dim{ opacity:.45 }

/* ── 우측 버튼 ── */
#sideBtns{
  position:absolute; right:max(10px,env(safe-area-inset-right)); top:50%; transform:translateY(-50%); z-index:14;
  display:flex; flex-direction:column; gap:8px;
}
#sideBtns button{
  min-width:46px; height:42px; padding:0 10px; border-radius:12px; border:1px solid var(--line2);
  background:rgba(27,35,48,.9); color:var(--ink); font-size:18px; font-weight:800;
}
#sideBtns button:active{ transform:scale(.94) }
#btnSpeed{ font-size:13px }

/* ── 하단 툴바 ── */
#toolbar{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:max(10px,env(safe-area-inset-bottom)); z-index:16;
  display:flex; gap:6px; padding:8px; max-width:calc(100% - 12px); overflow-x:auto;
  background:rgba(22,29,41,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:16px; scrollbar-width:none;
}
#toolbar::-webkit-scrollbar{ display:none }
.tool{
  position:relative; flex:0 0 auto; width:62px; height:62px; border-radius:13px;
  border:1px solid var(--line2); background:var(--panel2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11px; font-weight:700; color:var(--sub);
}
.tool .ti{ font-size:24px; line-height:1 }
.tool .tn{ font-size:10.5px; letter-spacing:-.02em }
.tool.sel{ border-color:var(--accent); background:#243650; color:var(--ink); box-shadow:0 0 0 2px rgba(74,144,217,.35) inset }
.tool.locked{ opacity:.4 }
.tool .cnt{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 4px;
  border-radius:999px; background:var(--accent); color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--bg2);
}
.tool .cnt.zero{ background:#54607a }
.tool .key{ position:absolute; top:2px; left:4px; font-size:9px; color:rgba(255,255,255,.4); font-weight:700 }

/* ── 힌트 ── */
#hint{
  position:absolute; left:50%; transform:translateX(-50%); bottom:84px; z-index:14;
  font-size:12.5px; color:var(--sub); background:rgba(16,21,30,.78);
  padding:5px 12px; border-radius:999px; border:1px solid var(--line); white-space:nowrap;
  max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}

/* ── 토스트 ── */
#toast{
  position:absolute; left:50%; top:64px; transform:translateX(-50%) translateY(-8px);
  z-index:25; background:rgba(16,21,30,.94); border:1px solid var(--line2); color:var(--ink);
  padding:9px 16px; border-radius:12px; font-size:14px; font-weight:600;
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; max-width:88%; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ── 모달 ── */
.overlay{
  position:fixed; inset:0; z-index:40; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.overlay.show{ display:flex }
.sheet{
  width:100%; max-width:440px; max-height:86vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line2); border-radius:20px;
  padding:18px 16px 20px; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.sheet h2{ font-size:19px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:4px }
.sheet h2 .x{ margin-left:auto; background:none; border:0; color:var(--sub); font-size:24px; line-height:1 }
.sheet p.lead{ color:var(--sub); font-size:13.5px; line-height:1.55; margin:6px 0 12px }
.sheet h3{ font-size:13px; color:var(--sub); margin:14px 2px 6px; font-weight:700; text-transform:none }

/* 기계 패널 슬롯 */
.mslots{ display:flex; flex-direction:column; gap:10px; margin:8px 0 4px }
.mslot{ display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 12px }
.mslot .lab{ font-size:13px; color:var(--sub); width:64px; flex:0 0 auto }
.mslot .body{ flex:1; display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:14px; font-weight:700 }
.mslot .pill{ display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.06); border-radius:8px; padding:3px 8px }
.mslot .mbtn{ padding:6px 10px; border-radius:9px; border:1px solid var(--line2); background:#2c3850; font-size:12.5px; font-weight:700 }
.mslot .mbtn:disabled{ opacity:.4 }
.progbar{ height:7px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; margin-top:2px }
.progbar > i{ display:block; height:100%; background:var(--accent); width:0 }

/* 레시피 / 연구 그리드 */
.rgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.rcard{
  text-align:left; background:var(--panel2); border:1px solid var(--line2); border-radius:13px;
  padding:10px 11px; display:flex; flex-direction:column; gap:5px;
}
.rcard:hover{ border-color:var(--accent) }
.rcard.sel{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(74,144,217,.3) inset }
.rcard.done{ opacity:.55 }
.rcard.locked{ opacity:.4 }
.rcard .rt{ font-size:13.5px; font-weight:800; display:flex; align-items:center; gap:6px }
.rcard .rd{ font-size:11.5px; color:var(--sub); line-height:1.45 }
.rcard .cost{ font-size:11.5px; color:var(--gold); font-weight:700 }
.rcard .io{ font-size:11.5px; color:var(--sub) }
.rcard .io b{ color:var(--ink) }

.btnrow{ display:flex; gap:8px; margin-top:14px }
.btnrow button{
  flex:1; padding:11px; border-radius:12px; border:1px solid var(--line2);
  background:var(--panel2); font-size:14px; font-weight:700;
}
.btnrow button.prim{ background:var(--accent); border-color:var(--accent); color:#fff }
.btnrow button.danger{ color:var(--bad); border-color:rgba(232,88,79,.4) }

.helplist{ font-size:13.5px; line-height:1.7; color:var(--ink) }
.helplist li{ margin:0 0 4px 18px }
.kbd{ display:inline-block; background:var(--panel2); border:1px solid var(--line2); border-radius:6px; padding:1px 6px; font-size:12px; font-weight:700 }

/* 승리 화면 */
.winwrap{ text-align:center }
.winwrap .big{ font-size:54px; margin:6px 0 }
.winwrap .stat{ font-size:14px; color:var(--sub); margin:4px 0 }
.winwrap .stat b{ color:var(--gold); font-size:18px }