/* ── Level label ─────────────────────────────────────────────────────────── */

#sb-level {
  font-size: calc(18 * var(--scale));
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffe566;
  text-align: center;
  padding-bottom: 2px;
}

/* ── Top row: mugshot (col 1) + counters (col 2) ─────────────────────────── */

#sb-top-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: calc(8 * var(--scale));
}

#mugshot-box {
  flex-shrink: 0;
  background: #0a1428;
  border: 2px solid #ffe566;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4px;
  cursor: default;
}

#mugshot-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent calc(14 * var(--scale)), rgba(0,80,160,0.18) calc(14 * var(--scale)), rgba(0,80,160,0.18) calc(15 * var(--scale))),
    repeating-linear-gradient(90deg, transparent, transparent calc(14 * var(--scale)), rgba(0,80,160,0.18) calc(14 * var(--scale)), rgba(0,80,160,0.18) calc(15 * var(--scale)));
  pointer-events: none;
}

#mugshot-img {
  width: calc(128 * var(--scale));
  height: calc(128 * var(--scale));
  border-radius: 2px;
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.04);
  image-rendering: pixelated;
}

/* ── Counters column ─────────────────────────────────────────────────────── */

#sb-counters {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0;
  padding: 4px 2px;
}

.sb-counter {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--scale));
  font-size: calc(22 * var(--scale));
  font-weight: bold;
  color: rgba(255,255,255,0.85);
  cursor: default;
  padding: 2px 4px;
  border-radius: 3px;
}

.sb-counter:hover {
  background: rgba(255,255,255,0.05);
}

/* Armor flash on mine hit */
#sb-armor.armor-hit {
  animation: armor-hit-flash 1.2s ease-out forwards;
}

@keyframes armor-hit-flash {
  0%   { color: #ff3a3a; background: rgba(255, 50, 50, 0.25); }
  40%  { color: #ff3a3a; background: rgba(255, 50, 50, 0.15); }
  100% { color: inherit;  background: transparent; }
}

/* Divider */
.sb-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 2px 0;
}

/* ── Ability cards — two columns: image left, info right ─────────────────── */

#sb-abilities {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--scale));
}

.ability-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, opacity 0.2s;
  overflow: hidden;
}

.ability-row:hover:not(.abi-disabled):not(.abi-depleted) {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
}

/* Left col: image with hotkey badge overlaid in bottom-right */
.abi-img-wrap {
  position: relative;
  flex-shrink: 0;
  width: calc(96 * var(--scale));
  height: calc(96 * var(--scale));
}

.abi-img {
  width: calc(96 * var(--scale));
  height: calc(96 * var(--scale));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.08);
}

.abi-img.placeholder-abi {
  background-image: none;
}

/* Hotkey badge — bottom-right corner of image */
.abi-key {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* Right col: name on top, uses count below */
.abi-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(6 * var(--scale));
  padding: calc(8 * var(--scale)) calc(10 * var(--scale));
}

.abi-name {
  font-size: calc(18 * var(--scale));
  font-weight: bold;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.abi-uses {
  font-size: calc(36 * var(--scale));
  font-weight: bold;
  color: rgba(255,220,80,0.9);
  line-height: 1;
}

/* ── Ability states ──────────────────────────────────────────────────────── */
/* Disabled and depleted rows still take clicks, so they can answer with denied. */

.ability-row.abi-disabled {
  opacity: 0.4;
  cursor: default;
}

.ability-row.abi-depleted .abi-img {
  filter: grayscale(1) brightness(0.5);
}
.ability-row.abi-depleted .abi-name,
.ability-row.abi-depleted .abi-uses {
  color: rgba(255,255,255,0.25);
}
.ability-row.abi-depleted {
  cursor: default;
}

.ability-row.abi-flash .abi-img {
  filter: brightness(1.6);
  transition: filter 1.5s ease;
}
.ability-row.abi-flash {
  background: rgba(255,220,80,0.12);
  border-color: rgba(255,220,80,0.3);
}

.ability-row.abi-active {
  background: rgba(255,200,0,0.14);
  border-color: rgba(255,200,0,0.45);
}

/* ── Counters animate (uiFx.bounce), so they need a box ─────────────────── */

#mine-display, #flag-display, #armor-display, .abi-uses {
  display: inline-block;
}

/* ── Juice elements (uiFx / boardFx) ─────────────────────────────────────── */

/* Dust specks off a pressed ability button */
.fx-speck {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 11;
}

/* Soft round ability glow over the field (below the level popup) */
.fx-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 11;
}

/* Level-clear snapshot flash over the board */
.fx-snap {
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
  z-index: 3;
}

/* ── Floating tooltip ────────────────────────────────────────────────────── */

#game-tooltip {
  display: none;
  position: absolute;
  z-index: 200;
  background: #0b1a30;
  border: 1px solid rgba(255, 229, 102, 0.6);
  border-top: 2px solid #ffe566;
  border-radius: 6px;
  padding: calc(9 * var(--scale)) calc(13 * var(--scale));
  font-size: calc(13 * var(--scale));
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: calc(280 * var(--scale));
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255,229,102,0.08);
}

#game-tooltip.visible {
  display: block;
}

/* ── Theme / weather label at bottom of sidebar ─────────────────────────── */

#sb-theme-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--scale));
  padding: calc(4 * var(--scale)) calc(6 * var(--scale));
  text-align: center;
  margin-top: auto;
}

#sb-biome-time {
  font-size: calc(13 * var(--scale));
  color: var(--theme-label-color);
  opacity: 0.7;
  letter-spacing: 0.4px;
  line-height: 1.3;
  text-transform: capitalize;
}

#sb-weather-name {
  font-size: calc(15 * var(--scale));
  font-weight: bold;
  color: #ffe566;
  opacity: 0.85;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* ── Dictator harassment (js/dictator/harass.js, uiFx.reward) ────────────── */

/* He flies over everything in the screen, popup included; the options modal (150) and the
   tooltip (200) stay above him, and mine blasts (a fixed canvas on body) draw over him. */
.harass-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}
#gameplay-screen.harass-over,
#gameplay-screen.harass-over * {
  cursor: pointer !important;
}

/* "+N" floating up off an ability's uses count, and the +3 ring */
.fx-reward {
  position: absolute;
  pointer-events: none;
  z-index: 120;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 1px 0 #000;
}
.fx-ring {
  position: absolute;
  border: 2px solid;
  border-radius: 50%;
  pointer-events: none;
  z-index: 120;
}