/* ============================================================
   dd-ui — shared component classes for Called Out! ("Purple Play")
   Companion to /css/dd-tokens.css (vars + keyframes) and /js/dd-ui.js.
   Visual values lifted from the design_handoff prototypes.
   ============================================================ */

/* ---------- candy capsule button ----------
   The "Host a Game" treatment is the reference for every button/bubble:
   a Higgsfield capsule PNG as the body, live Fredoka text overlaid,
   springy lift on hover, squash on press. Markup:
     <a class="dd-capsule dd-pressable" href="…">
       <img src="/assets/capsule-primary-clean.png" alt="">
       <span class="dd-capsule-label">Host a Game</span>
     </a> */
.dd-capsule {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .34s var(--dd-ease-cta);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dd-capsule > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 16px 22px rgba(10, 2, 30, .55));
}
.dd-capsule .dd-capsule-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--dd-font-display);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  pointer-events: none;
}
.dd-capsule:hover { transform: translateY(-4px) scale(1.04); }
.dd-capsule:active {
  transform: translateY(4px) scale(1.07, .86);
  transform-origin: bottom center;
}

/* ---------- glossy pink vinyl button (modal confirms, chips) ---------- */
.dd-btn-pink {
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 13px 26px;
  border-radius: var(--dd-radius-pill);
  background: linear-gradient(180deg, var(--dd-pink-soft), var(--dd-pink));
  box-shadow: 0 8px 16px -7px rgba(255, 77, 157, .7),
              inset 0 1.5px 1px rgba(255, 255, 255, .4);
  transition: transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.dd-btn-pink:hover { transform: translateY(-2px); }
.dd-btn-pink:active { transform: translateY(1px) scale(.98); }

/* ---------- pills ---------- */
.dd-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--dd-radius-pill);
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 13px;
}
.dd-pill-18 { /* the "18+ Only" pill */
  background: rgba(255, 77, 157, .14);
  border: 1.5px solid rgba(255, 77, 157, .45);
  color: var(--dd-pink-tint);
}
.dd-pill-18::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dd-pink);
}

/* pulsing green "room live" dot */
.dd-livedot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dd-mint);
  display: inline-block;
  animation: ddlivedot 1.6s ease-in-out infinite;
}

/* ---------- soft round glow blob (the only allowed "decoration") ---------- */
.dd-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  pointer-events: none;
  animation: ddglow 6s ease-in-out infinite;
}

/* ---------- card surface ---------- */
.dd-card {
  background: var(--dd-card-bg);
  border: var(--dd-card-border);
  border-radius: var(--dd-radius-card);
  box-shadow: var(--dd-shadow-card);
}

/* ---------- branded modal (DD.confirmModal) ---------- */
.dd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: var(--dd-overlay);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.dd-modal-card {
  width: 100%;
  max-width: 410px;
  border-radius: var(--dd-radius-modal);
  background: radial-gradient(120% 120% at 50% 0%, #3A1D6E 0%, #2A1650 60%, #241245 100%);
  border: 1.5px solid rgba(255, 255, 255, .12);
  box-shadow: var(--dd-shadow-card);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  animation: ddpop .3s var(--dd-ease-wobble) both;
}
.dd-modal-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dd-font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--dd-pink-tint);
  background: rgba(255, 77, 157, .14);
  border: 2px solid rgba(255, 77, 157, .45);
}
.dd-modal-title {
  font-family: var(--dd-font-display);
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  text-shadow: var(--dd-title-shadow-sm);
}
.dd-modal-body {
  font-family: var(--dd-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dd-text-soft);
}
.dd-modal-card .dd-btn-pink { margin-top: 6px; min-width: 200px; }
.dd-modal-ghost {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--dd-font-body);
  font-weight: 800;
  font-size: 14px;
  color: var(--dd-text-link);
  padding: 6px 10px;
}
.dd-modal-ghost:hover { color: #fff; }

/* ---------- staggered entrance reveals (DD.installReveals) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(.93);
  transition: opacity .55s ease, transform .72s var(--dd-ease-spring);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dd-glow, .dd-livedot { animation: none; }
}