* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: #05070f; overflow: hidden;
  font-family: system-ui, sans-serif; color: #fff; user-select: none; }

/* 9:16 스테이지, 화면 안에 레터박스로 맞춤 */
#stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#game {
  aspect-ratio: 9 / 16; height: 100%; max-width: 100%;
  background: #0a0e1a; touch-action: none; display: block;
}

#hud {
  position: absolute; top: 6px; left: 0; right: 0; text-align: center;
  font-size: 14px; font-variant-numeric: tabular-nums; pointer-events: none;
  text-shadow: 0 1px 2px #000;
}

/* 봄 버튼 — 엄지가 닿는 우측 하단. 캔버스 위에 얹어 조작(손가락 이동)과 분리한다. */
#bombBtn {
  position: absolute; right: 10px; bottom: 14px; z-index: 6;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 138, 61, 0.22); border: 2px solid #ff8a3d; color: #ffd9bf;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  text-shadow: 0 1px 3px #000; touch-action: manipulation; user-select: none;
}
#bombBtn[hidden] { display: none; }
#bombBtn:active { background: rgba(255, 138, 61, 0.45); transform: scale(0.94); }
#bombBtn[disabled] { opacity: 0.3; border-color: #6b7280; }
#bombBtn span { font-size: 14px; font-weight: 700; }

#mute {
  position: absolute; top: 4px; right: 6px; z-index: 5;
  background: rgba(0,0,0,0.35); border: 0; border-radius: 8px;
  font-size: 18px; padding: 4px 8px; cursor: pointer; line-height: 1;
}

#banner {
  position: absolute; top: 38%; left: 0; right: 0; text-align: center;
  font-size: 30px; font-weight: 800; letter-spacing: 2px; color: #fff;
  text-shadow: 0 2px 12px #06b6ff, 0 0 4px #000; pointer-events: none;
  opacity: 0;
}
#banner.show { animation: bannerpop 2s ease forwards; }
@keyframes bannerpop {
  0% { opacity: 0; transform: scale(1.4); }
  15% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

#overlay {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(3, 6, 15, 0.82); text-align: center; padding: 20px;
}
#overlay h1 { font-size: 34px; letter-spacing: 2px; }
#overlay p { opacity: 0.85; font-size: 15px; }
#overlay button {
  font-size: 16px; padding: 12px 22px; border: 0; border-radius: 10px;
  background: #223; color: #fff; cursor: pointer; min-width: 200px;
}
#overlay button.primary { background: #2a6cf0; font-weight: 700; }
#overlay button.card {
  background: linear-gradient(135deg, #2b3a66, #1a2444); border: 1px solid #4a6cf0;
  min-width: 240px; padding: 14px 18px; font-weight: 600; text-align: left;
}
#overlay button:disabled { opacity: 0.4; cursor: default; }
#overlay .btnrow { display: flex; gap: 10px; }
#overlay .btnrow button { min-width: 0; flex: 1; }
#overlay .shoprow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 260px; font-size: 15px;
}
#overlay .shoprow button { min-width: 90px; padding: 8px 12px; }

#overlay .stages { display: flex; flex-direction: column; gap: 6px; }
#overlay .stagerow { display: flex; gap: 6px; justify-content: center; }
#overlay .stage {
  min-width: 60px; padding: 6px 4px; font-size: 13px; line-height: 1.2;
  background: #223; border-radius: 8px;
}
#overlay .stage.done { background: #274; }
#overlay .stage.open { background: #2a6cf0; font-weight: 700; }
#overlay .stage.lock { background: #222; opacity: 0.45; }
#overlay .stage small { font-size: 11px; }

#overlay .legend { display: flex; flex-direction: column; gap: 5px; max-width: 300px; }
#overlay .legendrow { display: flex; align-items: center; gap: 8px; font-size: 13px; text-align: left; }
#overlay .legendrow b { min-width: 62px; }
#overlay .legendrow .ldesc { opacity: 0.7; font-size: 12px; }
#overlay .orb {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  display: flex; align-items: center; justify-content: center;
  color: #000; font-weight: 800; font-size: 12px;
}