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

body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #1a1c20;
  color: #e6e6e6;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  user-select: none;
}

#game {
  width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 20px;
}

/* ---- Stats ---- */
#stats {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
#stats .stat span { color: #ffd166; font-weight: bold; }
#reset-btn {
  background: #333842;
  color: #e6e6e6;
  border: 1px solid #4a505c;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
#reset-btn:hover { background: #3f4550; }

/* ---- Enemy ---- */
#enemy-area {
  height: 180px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#enemy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#enemy-figure {
  width: 90px;
  height: 120px;
  background: #b5453c;
  border: 3px solid #7a2c26;
  border-radius: 10px;
}
#enemy.hit #enemy-figure { animation: shake 0.18s ease; }
#enemy.dead #enemy-figure { background: #555; border-color: #333; opacity: 0.4; }

@keyframes shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6px, 0) rotate(-2deg); }
  50%  { transform: translate(6px, 0) rotate(2deg); }
  75%  { transform: translate(-4px, 0) rotate(-1deg); }
  100% { transform: translate(0, 0); }
}

#enemy-health-bar {
  position: relative;
  width: 160px;
  height: 20px;
  background: #3a2020;
  border: 2px solid #000;
  border-radius: 4px;
  overflow: hidden;
}
#enemy-health-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(#5fc55f, #3a9a3a);
  transition: width 0.12s linear;
}
#enemy-health-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 2px #000;
  font-variant-numeric: tabular-nums;
}
#enemy-label { font-size: 12px; color: #999; }

/* ---- Player ---- */
#player-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#player-figure {
  width: 70px;
  height: 100px;
  background: #4a82c4;
  border: 3px solid #2e588a;
  border-radius: 10px;
}
#player-label { font-size: 12px; color: #999; }

/* ---- Hotbar ---- */
#hotbar {
  display: flex;
  gap: 10px;
}
.ability {
  position: relative;
  width: 84px;
  height: 84px;
  background: #2c313a;
  border: 2px solid #454c58;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.ability:hover { border-color: #6a727f; }
.ability.ready:active { transform: scale(0.96); }

.ability .key {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #ffd166;
}
/* Charge pips: one dot per charge slot of a multi-charge ability, centered along
   the button's bottom edge — filled while the charge is in stock, hollow while it
   recharges. Empty (and invisible) on plain single-charge abilities. */
.ability .charges {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}
.ability .charges .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #7fd0ff;
}
.ability .charges .dot.filled { background: #7fd0ff; }
.ability .name { font-size: 13px; font-weight: bold; }
.ability .dmg { font-size: 11px; color: #ff9d7a; margin-top: 2px; }

/* Cooldown overlays: radial "clock swipes". Each shaded pie sector starts covering
   the whole icon and sweeps away clockwise from 12 o'clock as its cooldown elapses.
   Two stacked layers per button — .cd-gcd tracks the global cooldown, .cd-internal
   the ability's internal/recharge cooldown (--cd-angle set each frame in JS); each
   renders whenever its cooldown is ticking. Both are semi-transparent so where
   both cover the shade stacks darker: one layer reads 0.34, both compound ~0.56. */
.ability .cd-overlay {
  position: absolute;
  inset: 0;
  --cd-shade: rgba(0, 0, 0, 0.34);
  --cd-edge: rgba(255, 255, 255, 0.8);
  /* The sweep's leading edge is a thin white radius line: a ~2deg band on the
     shaded side of the boundary (about 1.5px at the button's rim). Living past
     the boundary angle means it slides off the 360deg end (and out of existence)
     exactly when the cooldown completes — no special-casing needed. */
  background: conic-gradient(
    transparent 0deg var(--cd-angle, 360deg),
    var(--cd-edge) var(--cd-angle, 360deg) calc(var(--cd-angle, 360deg) + 2deg),
    var(--cd-shade) calc(var(--cd-angle, 360deg) + 2deg) 360deg
  );
  pointer-events: none;
}

/* Countdown label: remaining seconds of the internal cooldown, centered over the
   button. Last in the DOM so it paints above the sweep; empty while ready or on a
   plain GCD. Red while far off, yellow (.soon) within two GCDs of ready. */
.ability .cd-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: bold;
  color: #ff5c5c;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ability .cd-text.soon { color: #ffd166; }

/* Bufferable: underline the hotkey letter, shown while pressing this key would queue
   the ability (blocked but within the buffer window). The .key element already paints
   above the cooldown shade (later in DOM, same stacking context), so no z-index needed. */
.ability.bufferable .key {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Queued in the input buffer, waiting to auto-fire */
.ability.buffered {
  border-color: #ffd166;
  box-shadow: 0 0 0 2px #ffd166, 0 0 12px #ffd166;
  animation: buffer-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes buffer-pulse {
  from { box-shadow: 0 0 0 2px #ffd166, 0 0 6px #ffd166; }
  to   { box-shadow: 0 0 0 2px #ffd166, 0 0 16px #ffd166; }
}

#buff-display { font-size: 14px; color: #ffd166; margin-top: 4px; min-height: 18px; }

/* ---- Dev harness panel (only rendered with ?dev) ---- */
#dev-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 240px;
  background: #14161a;
  border: 1px solid #3a4150;
  border-radius: 6px;
  padding: 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
#dev-panel .dev-title {
  font-weight: bold;
  letter-spacing: 1px;
  color: #7fd0ff;
  font-size: 11px;
}
#dev-panel .dev-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#dev-panel button {
  background: #2b313b;
  color: #e6e6e6;
  border: 1px solid #454c58;
  border-radius: 4px;
  padding: 4px 7px;
  cursor: pointer;
  font-size: 11px;
}
#dev-panel button:hover { background: #363d49; }
#dev-panel #dev-step-toggle.active {
  background: #7fd0ff;
  color: #14161a;
  border-color: #7fd0ff;
  font-weight: bold;
}
#dev-panel input {
  width: 70px;
  background: #0e0f12;
  color: #e6e6e6;
  border: 1px solid #454c58;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 11px;
}
#dev-readout {
  margin: 0;
  padding: 6px;
  background: #0e0f12;
  border-radius: 4px;
  font-family: Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #b9c4d0;
  white-space: pre;
}