/* ============================================================
   DUNGEONS — page-specific flourishes only.
   Loaded AFTER site.css. Every selector is prefixed .dg- so it
   cannot leak into any other page's markup. No new components,
   no overrides of shared classes.
   ============================================================ */

/* the three-way spelling war, side by side */
.dg-spell{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin:0 0 8px;
}
.dg-card{
  border:1px solid rgba(109,95,131,.42);
  border-top:3px solid #ff2d95;
  border-radius:0 0 3px 3px;
  padding:16px 18px;
  background:rgba(255,45,149,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.dg-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.45) }
.dg-card.dg-b{ border-top-color:#4cff3c; background:rgba(76,255,60,.05) }
.dg-card.dg-c{ border-top-color:#ffb24d; background:rgba(255,178,77,.06) }

.dg-word{
  font-family:'Bungee',sans-serif; font-weight:400;
  font-size:clamp(.98rem,3.2vw,1.32rem); line-height:1.14;
  letter-spacing:.02em; color:#fff; margin:0 0 6px;
  overflow-wrap:anywhere;
  text-shadow:0 0 10px #ff2d95, 0 0 26px rgba(255,45,149,.4);
}
.dg-card.dg-b .dg-word{ text-shadow:0 0 10px #4cff3c, 0 0 26px rgba(76,255,60,.4) }
.dg-card.dg-c .dg-word{ text-shadow:0 0 10px #ffb24d, 0 0 26px rgba(255,178,77,.4) }

.dg-who{
  font-family:'Bungee',sans-serif; font-size:.50rem; letter-spacing:.18em;
  text-transform:uppercase; color:#6d5f83; margin:0 0 9px;
}
.dg-why{ margin:0; font-size:.82rem; line-height:1.6; color:#cbb9d6 }

/* region rule above each block of listings */
.dg-region{
  font-family:'Bungee',sans-serif; font-size:.60rem; letter-spacing:.20em;
  text-transform:uppercase; color:#ffb24d; margin:0 0 18px;
  padding-bottom:9px; border-bottom:1px solid rgba(255,178,77,.28);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.dg-region span{ color:#6d5f83; letter-spacing:.12em }

/* spacing between stacked listing grids */
.dg-block + .dg-block{ margin-top:clamp(34px,6vw,58px) }

/* a small ballpoint aside dropped under a paper block */
.dg-aside{
  font-family:'Caveat',cursive; font-size:1.24rem; line-height:1.45;
  color:#dfffd9; text-align:center; max-width:64ch;
  margin:20px auto 0;
}

@media (prefers-reduced-motion:reduce){
  .dg-card{ transition:none }
  .dg-card:hover{ transform:none }
}