/* 原色ポップな陽気UI */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", system-ui, sans-serif;
  background: #8fd3ff;
  user-select: none;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game {
  position: fixed;
  inset: 0;
  height: 100dvh;
}
#game canvas { display: block; }

#hud, #controls {
  position: fixed;
  z-index: 10;
  pointer-events: none;
}

/* 上中央のステータス（人数・武器Lv・距離） */
#hud {
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#hud .chips {
  display: flex;
  gap: 10px;
  justify-content: center;
}
#hud .chip {
  padding: 7px 20px;
  font-size: 27px;
  font-weight: 700;
  color: #1b3a6b;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}
#hud .distance {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1b3a6b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.85);
}

/* 数値が変わった瞬間にチップを弾ませる */
#hud .chip.pop { animation: chip-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
#hud .chip.pop.up   { border-color: #27c93f; }
#hud .chip.pop.down { border-color: #ff3b30; }

@keyframes chip-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* 増減を知らせる飛び出し表示（+20 / -5 / Lv+1） */
#popup {
  position: relative;
  height: 0;
}
#popup .delta {
  position: absolute;
  top: 4px;
  left: 50%;
  font-size: 30px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.8);
  animation: delta-float 0.9s ease-out forwards;
}
#popup .delta.plus  { color: #17a52f; }
#popup .delta.minus { color: #e01b10; }

@keyframes delta-float {
  0%   { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, 6px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, 62px) scale(1); opacity: 0; }
}

/* 操作ヒント（下中央） */
#controls {
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
}