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

:root {
  --bg0: #140d0a;
  --bg1: #241712;
  --amber: #ffb23e;
  --amber2: #ffd98a;
  --teal: #4fe0c8;
  --red: #ff5a5a;
  --ink: #ffe9cf;
  --sub: #c19a78;
  --line: rgba(255,178,62,.18);
}

html, body {
  height: 100%;
  background: #0c0806;
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(12,8,6,.9), rgba(12,8,6,0));
  font-size: 13px; letter-spacing: .3px; font-weight: 700;
}
.topbar .back { color: var(--amber2); text-decoration: none; opacity: .92; }
.topbar .back:hover { opacity: 1; }
.topbar .brand { color: var(--ink); opacity: .9; font-size: 13px; }
.topbar .hs { color: var(--amber); font-size: 12px; }
.topbar .hs b { color: var(--amber2); }

#stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

canvas#game {
  display: block;
  background: #1a1410;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,178,62,.14);
  image-rendering: pixelated;
  touch-action: none;
}

.hint {
  position: fixed; bottom: 10px; left: 0; right: 0; text-align: center;
  font-size: 12px; color: var(--sub); z-index: 12; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); transition: opacity 1s;
  padding: 0 18px; font-weight: 600;
}

/* ── 모바일 컨트롤 ── */
#pad {
  position: fixed; bottom: 16px; left: 0; right: 0; z-index: 20;
  display: none; align-items: center; justify-content: center; gap: 14px;
  pointer-events: none;
}
#pad.show { display: flex; }
.pcol { display: flex; flex-direction: column; gap: 10px; }
.pb {
  pointer-events: auto;
  width: 60px; height: 60px; border-radius: 16px;
  border: 1px solid rgba(255,178,62,.35);
  background: rgba(36,23,18,.72);
  color: var(--amber2); font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.pb.up { background: rgba(44,28,60,.72); color: var(--teal); border-color: rgba(79,224,200,.4); }
.pb:active { transform: translateY(2px); filter: brightness(1.4); }

/* ── 기지 / 상점 오버레이 ── */
#base {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(36,23,18,.86), rgba(8,5,4,.94));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 18px;
}
#base.hidden { display: none; }
.panel {
  width: min(440px, 96vw); max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #241712, #19100c);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: rgba(255,178,62,.25); border-radius: 8px; }
.panel h2 {
  font-size: 19px; letter-spacing: .2px; color: var(--amber2);
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.panel .sublabel { font-size: 12px; color: var(--sub); margin-bottom: 12px; }
.panel .result { font-size: 13px; color: var(--teal); font-weight: 700; margin: 2px 0 12px; }
.panel .result.bad { color: var(--red); }

.stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-bottom: 14px;
}
.stat {
  background: rgba(255,178,62,.06); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 10px; text-align: center;
}
.stat .k { font-size: 10px; color: var(--sub); letter-spacing: .4px; text-transform: uppercase; }
.stat .v { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.stat .v.money { color: var(--amber2); }

.sect { margin-bottom: 14px; }
.sect > .title {
  font-size: 12px; color: var(--amber); letter-spacing: .5px; text-transform: uppercase;
  font-weight: 800; margin-bottom: 8px; display: flex; justify-content: space-between;
}
.row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 9px 11px; margin-bottom: 7px;
}
.row .info { flex: 1; min-width: 0; }
.row .nm { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.row .ds { font-size: 11px; color: var(--sub); margin-top: 2px; }
.bar { height: 7px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; border-radius: 6px; }
.lvdots { display: flex; gap: 3px; margin-top: 5px; }
.lvdots i { width: 13px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.13); }
.lvdots i.on { background: var(--amber); }

button.act {
  flex: 0 0 auto; min-width: 84px;
  border: none; border-radius: 10px; padding: 9px 12px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  background: linear-gradient(180deg, #ffc664, #f59a2e); color: #2a1503;
  box-shadow: 0 3px 0 #b96c12;
}
button.act:active { transform: translateY(2px); box-shadow: 0 1px 0 #b96c12; }
button.act:disabled { background: #3a2a20; color: #7a6450; box-shadow: none; cursor: default; }
button.act.ghost { background: #2c1d15; color: var(--amber2); box-shadow: 0 3px 0 #1a110b; border: 1px solid var(--line); }
button.act.free { background: linear-gradient(180deg,#62e0c0,#33b79a); color:#04241c; box-shadow:0 3px 0 #1c6e5c; }

button.dive {
  width: 100%; margin-top: 6px; border: none; border-radius: 14px; padding: 15px;
  font-size: 17px; font-weight: 900; letter-spacing: .5px; cursor: pointer;
  background: linear-gradient(180deg, #5fe0c8, #2bb59a); color: #04241c;
  box-shadow: 0 4px 0 #1a7a66;
}
button.dive:active { transform: translateY(2px); box-shadow: 0 2px 0 #1a7a66; }
.cargoList { font-size: 12px; color: var(--sub); margin-top: 2px; line-height: 1.7; }
.cargoList b { color: var(--amber2); }

@media (max-width: 640px) {
  .topbar .brand { display: none; }
}