/* ===== ASK A DATE GAME ===== */
/* File: /games/ask-a-date-game/styles-ask-a-date-game.css */

/* ---------- Design Tokens ---------- */
.ask-a-date-game-wrapper {
  --ask-a-date-game-pink-deep:   #d63384;
  --ask-a-date-game-pink-mid:    #e91e8c;
  --ask-a-date-game-pink-soft:   #ff6eb4;
  --ask-a-date-game-pink-pale:   #ffe4f0;
  --ask-a-date-game-pink-ghost:  #fff0f7;
  --ask-a-date-game-red-love:    #ff3366;
  --ask-a-date-game-cream:       #fffaf9;
  --ask-a-date-game-ink:         #1a0a12;
  --ask-a-date-game-ink-light:   #5c3047;
  --ask-a-date-game-border:      rgba(214, 51, 132, 0.18);
  --ask-a-date-game-radius-small:  10px;
  --ask-a-date-game-radius-medium: 18px;
  --ask-a-date-game-radius-large:  28px;
  --ask-a-date-game-radius-pill:   999px;
  --ask-a-date-game-shadow-card:   0 8px 40px rgba(214, 51, 132, 0.13), 0 2px 8px rgba(0,0,0,0.06);
  --ask-a-date-game-shadow-button: 0 4px 18px rgba(214, 51, 132, 0.35);
  --ask-a-date-game-font-display:  'Playfair Display', Georgia, serif;
  --ask-a-date-game-font-body:     'DM Sans', system-ui, sans-serif;
  --ask-a-date-game-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ask-a-date-game-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Wrapper ---------- */
.ask-a-date-game-wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: var(--ask-a-date-game-cream);
  font-family: var(--ask-a-date-game-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ---------- Screen Base ---------- */
.ask-a-date-game-screen {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
  position: relative;
  box-sizing: border-box;
  animation: ask-a-date-game-screen-in 0.45s var(--ask-a-date-game-ease-out) both;
}

@keyframes ask-a-date-game-screen-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Floating Hearts Background ---------- */
.ask-a-date-game-hearts-background {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ask-a-date-game-heart-particle {
  position: absolute;
  bottom: -2rem;
  animation: ask-a-date-game-float-up linear forwards;
  user-select: none;
}

@keyframes ask-a-date-game-float-up {
  0%   { transform: translateY(0) rotate(-8deg) scale(0.8); opacity: 0; }
  10%  { opacity: 0.75; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) rotate(12deg) scale(1.1); opacity: 0; }
}

/* ---------- Ask Screen ---------- */
.ask-a-date-game-screen-ask {
  background: linear-gradient(160deg, #fff0f7 0%, #ffe4f0 50%, #ffd6e8 100%);
}

.ask-a-date-game-ask-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 460px;
  width: 100%;
}

.ask-a-date-game-bear-emoji {
  font-size: 3.5rem;
  animation: ask-a-date-game-bear-bounce 2s ease-in-out infinite;
}

@keyframes ask-a-date-game-bear-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.ask-a-date-game-question {
  font-family: var(--ask-a-date-game-font-display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  color: #8a0e46;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8), 0 0 14px rgba(255,255,255,0.6);
  text-align: center;
  line-height: 1.3;
  min-height: 2.8em;
  transition: opacity 0.2s;
  position: relative;
  z-index: 1;
}

/* ---------- Gameboard ---------- */
.ask-a-date-game-gameboard {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(255,255,255,0.5);
  border: 1.5px dashed var(--ask-a-date-game-border);
  border-radius: var(--ask-a-date-game-radius-large);
  padding: 28px 24px;
  overflow: hidden;
  box-sizing: border-box;
}

/* ---------- Shared Button ---------- */
.ask-a-date-game-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border: none;
  border-radius: var(--ask-a-date-game-radius-pill);
  font-family: var(--ask-a-date-game-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ask-a-date-game-ease-spring), box-shadow 0.18s;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.ask-a-date-game-button-yes {
  background: linear-gradient(135deg, var(--ask-a-date-game-pink-mid), var(--ask-a-date-game-red-love));
  color: #fff;
  border: 2px solid #1a1a1a;
  box-shadow: var(--ask-a-date-game-shadow-button);
}

.ask-a-date-game-button-yes:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 24px rgba(214, 51, 132, 0.5);
}

.ask-a-date-game-button-yes:active { transform: scale(0.97); }

.ask-a-date-game-button-no {
  background: #f3f3f3;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.12s var(--ask-a-date-game-ease-out),
              left 0.22s var(--ask-a-date-game-ease-spring),
              top 0.22s var(--ask-a-date-game-ease-spring),
              box-shadow 0.12s;
  user-select: none;
}

.ask-a-date-game-button-no:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ---------- Try Counter ---------- */
.ask-a-date-game-try-counter {
  font-size: 0.82rem;
  color: var(--ask-a-date-game-ink-light);
  transition: opacity 0.4s;
}

.ask-a-date-game-try-counter strong {
  color: var(--ask-a-date-game-pink-deep);
}

/* ---------- Congrats Screen ---------- */
.ask-a-date-game-screen-congrats {
  background: linear-gradient(160deg, #fff0f7, #ffe4f0, #ffd6e8);
}

.ask-a-date-game-congrats-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 420px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--ask-a-date-game-border);
  border-radius: var(--ask-a-date-game-radius-large);
  padding: 40px 32px;
  box-shadow: var(--ask-a-date-game-shadow-card);
  animation: ask-a-date-game-pop-in 0.5s var(--ask-a-date-game-ease-spring) both;
}

@keyframes ask-a-date-game-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.ask-a-date-game-confetti-row {
  font-size: 1.8rem;
  letter-spacing: 4px;
  animation: ask-a-date-game-wiggle 1s ease-in-out infinite alternate;
}

@keyframes ask-a-date-game-wiggle {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}

.ask-a-date-game-congrats-headline {
  font-family: var(--ask-a-date-game-font-display);
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  color: #8a0e46;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
  line-height: 1.25;
}

.ask-a-date-game-tries-line {
  font-size: 0.88rem;
  color: var(--ask-a-date-game-ink-light);
  background: var(--ask-a-date-game-pink-pale);
  border-radius: var(--ask-a-date-game-radius-pill);
  padding: 6px 16px;
}

.ask-a-date-game-tries-line strong { color: var(--ask-a-date-game-pink-deep); }

.ask-a-date-game-congrats-body {
  font-size: 0.97rem;
  color: var(--ask-a-date-game-ink-light);
  line-height: 1.6;
}

/* ---------- Picker Screens ---------- */
.ask-a-date-game-screen-picker {
  background: var(--ask-a-date-game-cream);
  gap: 24px;
}

.ask-a-date-game-picker-title {
  font-family: var(--ask-a-date-game-font-display);
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  color: #8a0e46;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
  text-align: center;
}

/* ---------- Progress Dots ---------- */
.ask-a-date-game-progress-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ask-a-date-game-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  transition: background 0.3s, transform 0.3s var(--ask-a-date-game-ease-spring);
}

.ask-a-date-game-dot.ask-a-date-game-dot-done   { background: var(--ask-a-date-game-pink-soft); transform: scale(1.1); }
.ask-a-date-game-dot.ask-a-date-game-dot-active { background: var(--ask-a-date-game-pink-deep); transform: scale(1.3); }

/* ---------- Chip Grid ---------- */
.ask-a-date-game-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 480px;
}

.ask-a-date-game-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: #fff;
  border: 1.5px solid var(--ask-a-date-game-border);
  border-radius: var(--ask-a-date-game-radius-medium);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ask-a-date-game-ease-spring), border-color 0.18s, box-shadow 0.18s;
  font-family: var(--ask-a-date-game-font-body);
  text-align: center;
}

.ask-a-date-game-chip:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--ask-a-date-game-pink-soft);
  box-shadow: 0 6px 20px rgba(214, 51, 132, 0.15);
}

.ask-a-date-game-chip:active { transform: scale(0.97); }

.ask-a-date-game-chip-emoji { font-size: 1.8rem; }
.ask-a-date-game-chip-label { font-size: 0.9rem; font-weight: 600; color: var(--ask-a-date-game-ink); }
.ask-a-date-game-chip-description { font-size: 0.75rem; color: var(--ask-a-date-game-ink-light); line-height: 1.3; }

/* ---------- Summary Screen ---------- */
.ask-a-date-game-screen-summary {
  background: linear-gradient(160deg, #fff0f7, #ffe4f0, #ffd6e8);
}

.ask-a-date-game-summary-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 440px;
  width: 100%;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(14px);
  border: 1.5px solid var(--ask-a-date-game-border);
  border-radius: var(--ask-a-date-game-radius-large);
  padding: 36px 28px;
  box-shadow: var(--ask-a-date-game-shadow-card);
  animation: ask-a-date-game-pop-in 0.5s var(--ask-a-date-game-ease-spring) both;
  box-sizing: border-box;
}

.ask-a-date-game-summary-hero { font-size: 2.5rem; }

.ask-a-date-game-summary-title {
  font-family: var(--ask-a-date-game-font-display);
  font-size: 1.8rem;
  color: #8a0e46;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}

.ask-a-date-game-summary-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ask-a-date-game-pink-ghost);
  border-radius: var(--ask-a-date-game-radius-medium);
  padding: 16px;
  box-sizing: border-box;
}

.ask-a-date-game-detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ask-a-date-game-ink);
}

.ask-a-date-game-detail-icon { font-size: 1.1rem; flex-shrink: 0; }

.ask-a-date-game-message-box {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--ask-a-date-game-border);
  border-radius: var(--ask-a-date-game-radius-medium);
  padding: 14px 16px;
  box-sizing: border-box;
}

.ask-a-date-game-message-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ask-a-date-game-pink-mid);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ask-a-date-game-message-text {
  font-family: var(--ask-a-date-game-font-body);
  font-size: 0.88rem;
  color: var(--ask-a-date-game-ink);
  white-space: pre-wrap;
  line-height: 1.6;
}

.ask-a-date-game-button-restart {
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--ask-a-date-game-ink-light);
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--ask-a-date-game-font-body);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.ask-a-date-game-button-restart:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 400px) {
  .ask-a-date-game-gameboard { padding: 20px 14px; min-height: 120px; }
  .ask-a-date-game-button    { padding: 12px 24px; font-size: 0.95rem; }
  .ask-a-date-game-chip-grid { grid-template-columns: 1fr 1fr; }
}

/* Force-dark override — all Ask a Date Game text was rendering washed-out/
   low-contrast against its light pink backgrounds regardless of the
   individual color variables set above. Applied as a hard override at the
   end of the block (wins the cascade) rather than chasing the exact source
   rule, since the requirement is simply that every piece of text in this
   game reads as solid dark text. */
/* Force-dark override — every element inside this game was found to
   render washed-out/low-contrast text against its light pink
   backgrounds. FIX (audit §ask-a-date-phantom-selector): every previous
   attempt at this fix targeted .ask-a-date-game-wrapper, a class that is
   never actually applied to any element in the real DOM — the game's
   real root container is #ask-a-date-game-container (set in
   _setContainerContent() in script-ask-a-date-game.js). That mismatch is
   why the override never took effect across multiple rounds of reports.
   Using the genuine container ID with a universal `*` descendant
   selector now. */
#ask-a-date-game-container,
#ask-a-date-game-container * {
  color: #1a1a1a !important;
  text-shadow: none !important;
}
.ask-a-date-game-button-yes,
.ask-a-date-game-button-yes * {
  color: #fff !important;
}
.ask-a-date-game-button-no,
.ask-a-date-game-button-no * {
  color: #1a1a1a !important;
}