* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --gold: #ffd23c;
  --blue: #4ea8ff;
  --red: #ff5b5b;
  --green: #7fe06a;
  --ink: #eaf2ff;
  --panel: #121a26;
}
html, body { height: 100%; }
body {
  background: #070b12;
  color: var(--ink);
  font-family: 'Trebuchet MS', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ===== 상단 바 ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 30;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: linear-gradient(#101824, #0a121c);
  border-bottom: 2px solid #1d2c40;
  font-size: 14px;
}
.topbar .back { color: #8fb6ff; text-decoration: none; font-weight: 700; }
.topbar .brand { font-weight: 800; letter-spacing: .4px; }
.topbar .hs { margin-left: auto; color: #9fb4d8; font-size: 12px; }
.topbar .hs b { color: var(--gold); }

#stage {
  position: fixed; top: 42px; left: 0; right: 0; bottom: 0;
  overflow: hidden; background: #0a0f18;
}
#game { display: block; width: 100%; height: 100%; touch-action: none; }

/* ===== 상단 HUD ===== */
#hud {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 12;
  display: flex; align-items: flex-start; gap: 6px; pointer-events: none;
  font-size: 12px; flex-wrap: wrap;
}
.chip {
  background: rgba(10, 16, 26, .72); border: 1px solid #25364d; border-radius: 8px;
  padding: 4px 9px; font-weight: 700; white-space: nowrap; line-height: 1.25;
}
.chip small { color: #8aa0bd; font-weight: 600; font-size: 10px; display: block; }
.chip b { color: var(--gold); font-size: 15px; }
.chip.pop b { color: var(--blue); }
.chip.age b { color: var(--green); }
.chip.score b { color: #fff; }
.chip.stage b { color: var(--red); }
.spacer { flex: 1 1 auto; }

/* ===== 하단 명령 패널 ===== */
#cmd {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 14;
  padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(8,12,20,0), rgba(8,12,20,.92) 38%);
  display: flex; flex-direction: column; gap: 6px;
}
#abilities { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.abtn {
  position: relative; overflow: hidden;
  width: 56px; height: 40px; border-radius: 9px; cursor: pointer;
  border: 1px solid #2c4060;
  background: #16202e; color: #eaf2ff; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; transition: transform .08s, border-color .12s;
}
.abtn .ic { font-size: 17px; line-height: 1; }
.abtn .nm { font-size: 8.5px; color: #9fb4d8; font-weight: 700; }
.abtn:active { transform: scale(.94); }
.abtn.ready { border-color: #3f7fd0; box-shadow: 0 0 0 1px rgba(78,168,255,.35) inset; }
.abtn.arm { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,210,60,.6); }
.abtn .cd {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  background: rgba(6,10,16,.74); color: #cfe0ff; font-size: 13px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
}
.abtn.cooling .cd { display: flex; }

#deploy {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
#deploy::-webkit-scrollbar { display: none; }
.ubtn {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 72px; border-radius: 10px; cursor: pointer;
  border: 1px solid #2c4060; background: #14202e; color: #eaf2ff;
  font-family: inherit; padding: 5px 4px 6px; text-align: center;
  transition: transform .08s, border-color .12s, opacity .12s;
}
.ubtn:active { transform: scale(.95); }
.ubtn .uic { font-size: 20px; line-height: 1.1; }
.ubtn .unm { font-size: 10px; font-weight: 800; margin-top: 1px; }
.ubtn .ucost { font-size: 11px; font-weight: 800; color: var(--gold); }
.ubtn .ucost::before { content: '🪙'; font-size: 9px; margin-right: 1px; }
.ubtn .upop { font-size: 8.5px; color: #8aa0bd; }
.ubtn.ok { border-color: #356a9e; }
.ubtn.cant { opacity: .42; }
.ubtn.locked { opacity: .3; filter: grayscale(.6); }
.ubtn .lock { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 18px; background: rgba(6,10,16,.5); }
.ubtn.locked .lock { display: flex; }
.ubtn .cdfill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: rgba(78,168,255,.28); pointer-events: none;
}

#botrow { display: flex; gap: 6px; justify-content: center; }
.sbtn {
  cursor: pointer; border: 1px solid #2c4060; background: #16202e; color: #cfe0ff;
  font-family: inherit; font-weight: 800; font-size: 12px; border-radius: 9px;
  padding: 7px 12px; transition: transform .08s, border-color .12s;
}
.sbtn:active { transform: scale(.95); }
.sbtn.age { border-color: #3a7a45; color: #bff0b0; }
.sbtn.age.ready { box-shadow: 0 0 10px rgba(127,224,106,.45); }
.sbtn b { color: var(--gold); }

/* ===== 오버레이 / 패널 ===== */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 9, 16, .86); backdrop-filter: blur(2px);
  padding: 16px;
}
.overlay.hidden { display: none; }
.panel {
  width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto;
  background: linear-gradient(#13202f, #0d1622);
  border: 2px solid #294060; border-radius: 14px;
  padding: 22px 20px; text-align: center;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .55);
}
.panel h1 { font-size: 28px; letter-spacing: .4px; margin-bottom: 4px; text-shadow: 0 2px 0 #000; }
.panel h1 .em { font-size: 30px; }
.panel h2 { font-size: 22px; margin-bottom: 6px; }
.panel .sub { color: #a9c2e6; font-size: 13px; line-height: 1.65; margin: 8px 0 16px; }
.panel .ctrl { color: #7e94b4; font-size: 12px; margin-top: 14px; line-height: 1.65; }
.panel .ctrl b { color: #cfe0ff; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 12px 0 4px; text-align: left; }
.legend .lg { font-size: 11.5px; color: #b7cae6; line-height: 1.4; }
.legend .lg b { color: #fff; }
.legend .lg .e { font-size: 14px; }

.btn {
  display: inline-block; cursor: pointer; border: none;
  font-family: inherit; font-weight: 800; font-size: 16px;
  color: #07121e; background: linear-gradient(#ffe06a, #ffc02c);
  padding: 12px 30px; border-radius: 10px; margin-top: 6px;
  box-shadow: 0 4px 0 #b8851a; transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8851a; }
.btn.alt { background: linear-gradient(#5ea0ff, #2f74e0); color: #fff; box-shadow: 0 4px 0 #1d4a96; }
.btn.alt:active { box-shadow: 0 1px 0 #1d4a96; }

/* 업그레이드 패널 */
.upgGrid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 16px; }
@media (min-width: 400px) { .upgGrid { grid-template-columns: 1fr 1fr; } }
.upgItem {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: #182636; border: 1px solid #294060; border-radius: 10px;
  padding: 9px 10px; cursor: pointer; font-family: inherit; color: inherit;
  transition: transform .08s, border-color .1s;
}
.upgItem:active { transform: scale(.97); }
.upgItem:hover { border-color: var(--gold); }
.upgItem.cant { opacity: .5; }
.upgItem.maxed { opacity: .8; border-color: #3a7a45; cursor: default; }
.upgItem .ui-ic { font-size: 22px; width: 28px; text-align: center; flex-shrink: 0; }
.upgItem .ui-body { flex: 1; min-width: 0; }
.upgItem .ui-name { font-size: 13px; font-weight: 800; }
.upgItem .ui-name .ui-lv { font-size: 10px; color: var(--blue); font-weight: 700; margin-left: 4px; }
.upgItem .ui-desc { font-size: 11px; color: #9db4d4; line-height: 1.3; }
.upgItem .ui-cost { font-size: 13px; font-weight: 800; color: var(--gold); flex-shrink: 0; white-space: nowrap; }
.upgItem.maxed .ui-cost { color: var(--green); }

.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.statgrid .cell { background: #182636; border: 1px solid #294060; border-radius: 10px; padding: 10px; }
.statgrid .cell .k { font-size: 11px; color: #9db4d4; }
.statgrid .cell .v { font-size: 20px; font-weight: 800; color: #fff; }
.statgrid .cell .v.gold { color: var(--gold); }

.toast {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) scale(.8);
  z-index: 18; pointer-events: none; opacity: 0;
  font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 3px 0 #000, 0 0 18px rgba(255,210,60,.6);
  text-align: center; white-space: nowrap;
}
.toast.show { animation: toastpop 1.7s ease forwards; }
@keyframes toastpop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  15% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  78% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-60%) scale(1); }
}