.map-hud-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.map-tool-square {
  min-width: 0;
  width: 100%;
  min-height: 66px;
  border-radius: 18px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,238,250,0.92));
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 10px 20px rgba(93, 30, 76, 0.18), inset 0 2px 0 rgba(255,255,255,0.8);
}

.map-tool-square .map-tool-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(180deg, rgba(255,120,203,0.28), rgba(203,100,255,0.18));
  color: #7a2357;
  flex: 0 0 auto;
}

.map-tool-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 2px;
}

.map-tool-copy strong,
.map-tool-square > strong {
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #6d2250;
}

.map-tool-copy small,
.map-tool-square > small {
  font-size: 10px;
  line-height: 1.15;
  color: rgba(86, 30, 65, 0.76);
}

.map-tool-maker {
  grid-column: 1 / -1;
}

.map-tool-profile .map-tool-icon { background: linear-gradient(180deg, rgba(125,185,255,0.35), rgba(101,126,255,0.18)); }
.map-tool-challenges .map-tool-icon { background: linear-gradient(180deg, rgba(255,212,102,0.42), rgba(255,146,67,0.20)); }
.map-tool-settings .map-tool-icon { background: linear-gradient(180deg, rgba(186,197,216,0.50), rgba(120,134,156,0.22)); }
.map-tool-guide .map-tool-icon { background: linear-gradient(180deg, rgba(147,227,255,0.42), rgba(97,165,255,0.20)); }
.map-tool-maker .map-tool-icon { background: linear-gradient(180deg, rgba(173,255,153,0.42), rgba(83,191,122,0.20)); }

.blocker-infernoToffee .blocker-art {
  background-image: url('../assets/blockers/individual/inferno_toffee/inferno_toffee_layer_3.png');
}
.blocker-infernoToffee[data-hp="2"] .blocker-art { background-image: url('../assets/blockers/individual/inferno_toffee/inferno_toffee_layer_2.png'); }
.blocker-infernoToffee[data-hp="1"] .blocker-art { background-image: url('../assets/blockers/individual/inferno_toffee/inferno_toffee_layer_1.png'); }

.blocker-cursedPrism .blocker-art {
  background-image: url('../assets/blockers/individual/cursed_prism/cursed_prism_layer_3.png');
}
.blocker-cursedPrism[data-hp="2"] .blocker-art { background-image: url('../assets/blockers/individual/cursed_prism/cursed_prism_layer_2.png'); }
.blocker-cursedPrism[data-hp="1"] .blocker-art { background-image: url('../assets/blockers/individual/cursed_prism/cursed_prism_layer_1.png'); }

.blocker-obsidianSeal .blocker-art {
  background-image: url('../assets/blockers/individual/obsidian_seal/obsidian_seal_layer_2.png');
}
.blocker-obsidianSeal[data-hp="1"] .blocker-art { background-image: url('../assets/blockers/individual/obsidian_seal/obsidian_seal_layer_1.png'); }

.mini-blocker-infernoToffee {
  background-image: url('../assets/blockers/individual/inferno_toffee/inferno_toffee_layer_3.png');
}
.mini-blocker-cursedPrism {
  background-image: url('../assets/blockers/individual/cursed_prism/cursed_prism_layer_3.png');
}
.mini-blocker-obsidianSeal {
  background-image: url('../assets/blockers/individual/obsidian_seal/obsidian_seal_layer_2.png');
}

.demon-chest-summary-wrap {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.demon-chest-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #7c184f, #d12ca3);
  box-shadow: 0 8px 18px rgba(140, 22, 95, 0.24);
}

.demon-chest-card {
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 245, 250, 0.98), rgba(255, 230, 244, 0.95));
  border: 1px solid rgba(221, 106, 173, 0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.demon-chest-heading {
  font-weight: 900;
  color: #7a194e;
  margin-bottom: 4px;
}

.demon-chest-copy {
  font-size: 11px;
  color: rgba(99, 28, 72, 0.82);
  margin-bottom: 8px;
}

.demon-reward-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demon-reward-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #72214e;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(223, 130, 185, 0.36);
}

.demon-chest-visual {
  position: relative;
  width: 104px;
  height: 84px;
  margin: 0 auto 8px;
}
.demon-chest-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(94, 15, 66, 0.20));
}
.demon-chest-closed { animation: demonChestClosedFade 1.15s ease forwards; }
.demon-chest-open { opacity: 0; animation: demonChestOpenReveal 1.15s ease forwards; }
@keyframes demonChestClosedFade {
  0%, 38% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.92); }
}
@keyframes demonChestOpenReveal {
  0%, 34% { opacity: 0; transform: scale(.9); }
  66% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}


/* v4.3.0.3 — Demon Chest cinematic reward reveal */
.demon-chest-summary-wrap.cinematic {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}
.demon-chest-summary-wrap.cinematic .demon-chest-banner {
  justify-self: center;
}
.demon-chest-showcase {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 14px 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,248,252,.98), rgba(255,232,245,.96));
  border: 1px solid rgba(215,103,171,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 22px rgba(108,23,82,.10);
}
.demon-chest-showcase:not(.is-active) {
  opacity: .72;
}
.demon-chest-stage {
  position: relative;
  width: min(240px, 64vw);
  height: min(220px, 54vw);
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.demon-chest-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 68%;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208,55,150,.34), rgba(208,55,150,0) 70%);
  filter: blur(6px);
}
.demon-chest-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(90,16,70,.24));
  transform-origin: 50% 78%;
  will-change: transform, opacity;
}
.demon-chest-img.open { opacity: 0; transform: scale(.92); }
.demon-chest-showcase.is-shaking .demon-chest-img.closed {
  animation: demonChestShake .68s ease-in-out 1;
}
.demon-chest-showcase.is-open .demon-chest-img.closed {
  opacity: 0;
  transform: scale(.88);
}
.demon-chest-showcase.is-open .demon-chest-img.open {
  opacity: 1;
  transform: scale(1);
  animation: demonChestOpenPop .34s ease-out 1;
}
.demon-bam-burst {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) scale(.7);
  font-size: 1.25rem;
  font-weight: 1000;
  letter-spacing: .04em;
  color: #fff8b0;
  text-shadow: 0 2px 0 #7e1a59, 0 0 14px rgba(255,120,228,.55);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.demon-bam-burst.animate {
  animation: demonChestBam .42s ease-out 1;
}
.demon-reward-stack {
  width: min(420px, 100%);
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.demon-reward-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(215,103,171,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,245,250,.92));
  box-shadow: 0 8px 16px rgba(114,35,88,.08);
  opacity: 0;
  transform: translateY(16px) scale(.92);
}
.demon-reward-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: demonRewardPop .36s ease-out 1;
}
.demon-reward-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 1000;
  background: linear-gradient(180deg,#ff76c7,#c22d95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 8px rgba(104,25,85,.16);
}
.demon-reward-card.sugar .demon-reward-icon {
  background: linear-gradient(180deg,#ffd766,#f5a623);
  color: #7a4213;
}
.demon-reward-main { display: grid; gap: 2px; }
.demon-reward-main strong {
  color: #7a194e;
  font-size: .95rem;
  line-height: 1.05;
}
.demon-reward-main small {
  color: rgba(103,36,77,.78);
  font-size: .72rem;
}
@keyframes demonChestShake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  18% { transform: translateX(-6px) rotate(-2deg); }
  36% { transform: translateX(7px) rotate(2deg); }
  54% { transform: translateX(-6px) rotate(-1.5deg); }
  72% { transform: translateX(5px) rotate(1.5deg); }
}
@keyframes demonChestOpenPop {
  0% { transform: scale(.84); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes demonChestBam {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(1.08); }
}
@keyframes demonRewardPop {
  0% { opacity: 0; transform: translateY(16px) scale(.92); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}