/**
 * Name It · ADHD Games
 * Game 4 — Emotional check-in via affect labelling
 * ─────────────────────────────────────────────────
 * Design tokens pulled from shared/styles/tokens.css (loaded via index).
 * All game-specific tokens defined here as local CSS custom properties.
 */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', 'DM Sans', sans-serif;
  background: hsl(230, 35%, 7%);
  color: hsl(220, 20%, 92%);
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════
   AMBIENT BACKGROUND
═══════════════════════════════════════════════════════ */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: blobFloat 20s ease-in-out infinite;
}

.blob-a {
  width: 480px; height: 480px;
  background: hsl(35, 75%, 55%);   /* warm amber — anxiety colour */
  top: -160px; right: -100px;
  animation-delay: 0s;
  opacity: 0.08;
}

.blob-b {
  width: 360px; height: 360px;
  background: hsl(270, 55%, 62%);  /* lavender — scattered colour */
  bottom: -80px; left: -60px;
  animation-delay: -7s;
  opacity: 0.09;
}

.blob-c {
  width: 260px; height: 260px;
  background: hsl(170, 55%, 50%);  /* teal — calm colour */
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
  opacity: 0.06;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 20px) scale(0.97); }
}

/* ═══════════════════════════════════════════════════════
   SCREEN SYSTEM
═══════════════════════════════════════════════════════ */
.screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.screen.is-active {
  opacity: 1;
  pointer-events: auto;
}

.screen.is-exiting {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

/* ── Shared header ── */
.scr-header {
  display: flex;
  align-items: center;
  padding: max(env(safe-area-inset-top, 1.25rem), 1.25rem) 1.25rem 0.75rem;
  position: relative;
  z-index: 2;
}

.nav-back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: hsla(220, 20%, 20%, 0.4);
  border: 1px solid hsla(220, 20%, 40%, 0.15);
  color: hsl(220, 15%, 65%);
  transition: background 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}@media (hover: hover) and (pointer: fine) {

.nav-back:hover { background: hsla(220, 20%, 28%, 0.6); color: hsl(220, 20%, 88%); transform: scale(1.08); }
}

.nav-back:active { transform: scale(0.94); }

.scr-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: max(env(safe-area-inset-bottom, 1.25rem), 1.25rem);
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════
   SCREEN 1 — INTRO
═══════════════════════════════════════════════════════ */
.intro-inner {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1.5rem;
  gap: 0;
}

/* ── Hero icon ── */
.intro-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 0 1.5rem;
}

.intro-icon-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.intro-icon-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: ringPulse 3s ease-in-out infinite;
}

.ring-outer  { width: 120px; height: 120px; border-color: hsla(35,  70%, 60%, 0.12); animation-delay: -1s; }
.ring-middle { width:  90px; height:  90px; border-color: hsla(270, 55%, 65%, 0.18); animation-delay: -0.5s; }
.ring-inner  { width:  64px; height:  64px; border-color: hsla(170, 55%, 55%, 0.25); animation-delay: 0s; background: hsla(170, 55%, 55%, 0.08); }

@keyframes ringPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.7; }
}

.intro-emoji {
  font-size: 2rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 12px hsla(35, 70%, 60%, 0.4));
}

.intro-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.85rem;
  background: linear-gradient(135deg, hsl(220, 20%, 92%) 0%, hsl(35, 70%, 75%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.intro-sub {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  color: hsl(220, 15%, 58%);
  font-weight: 300;
  line-height: 1.65;
  max-width: 30ch;
}

/* ── Science callout ── */
.intro-science {
  background: hsla(220, 20%, 14%, 0.7);
  border: 1px solid hsla(35, 60%, 60%, 0.12);
  border-radius: 20px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

.science-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.76rem, 2vw, 0.82rem);
  color: hsl(220, 12%, 64%);
  line-height: 1.65;
  text-align: center;
  font-style: italic;
}

.science-citation {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.68rem, 1.8vw, 0.72rem);
  color: hsl(220, 10%, 42%);
  line-height: 1.5;
  text-align: center;
  margin-top: 0.6rem;
}

/* ── Intro footer ── */
.intro-footer {
  display: flex;
  justify-content: center;
  padding-bottom: 0.5rem;
}

.begin-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2.2rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1rem, 3vw, 1.1rem);
  font-weight: 500;
  color: hsl(230, 35%, 8%);
  background: linear-gradient(135deg, hsl(35, 80%, 65%), hsl(270, 60%, 70%));
  box-shadow: 0 0 28px hsla(35, 80%, 65%, 0.3), 0 4px 16px hsla(230, 40%, 3%, 0.4);
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 200ms ease;
  border: none;
  letter-spacing: 0.01em;
}@media (hover: hover) and (pointer: fine) {

.begin-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 40px hsla(35, 80%, 65%, 0.45), 0 8px 24px hsla(230, 40%, 3%, 0.5);
}
}

.begin-btn:active { transform: scale(0.97); }

.btn-icon { font-size: 0.85em; }

/* ═══════════════════════════════════════════════════════
   SCREEN 2 — PLAY
═══════════════════════════════════════════════════════ */
#screen-play {
  z-index: 1;
}

/* ── Play HUD header ── */
.play-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(env(safe-area-inset-top, 1rem), 1rem) 1.25rem 0.75rem;
  background: linear-gradient(to bottom, hsla(230, 35%, 7%, 0.95) 0%, transparent 100%);
  /* pointer-events only re-enabled once the parent screen is actually
     active — otherwise this invisible header still sat on top of other
     screens' controls (e.g. the intro screen's back link) and silently
     ate their clicks, since pointer-events:auto overrides the inherited
     none from the inactive .screen ancestor. */
  pointer-events: none;
}
.screen.is-active .play-header {
  pointer-events: auto;
}

.play-hud {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.selected-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: hsl(220, 15%, 50%);
  font-weight: 400;
  letter-spacing: 0.04em;
  min-width: 6ch;
  text-align: center;
  transition: color 300ms ease;
}

.selected-count.has-selection {
  color: hsl(35, 70%, 68%);
}

/* Timer ring */
.timer-ring {
  position: relative;
  width: 36px; height: 36px;
}

.timer-svg {
  width: 36px; height: 36px;
  transform: rotate(-90deg);
}

.timer-track {
  fill: none;
  stroke: hsla(220, 20%, 20%, 0.4);
  stroke-width: 2.5;
}

.timer-arc {
  fill: none;
  stroke: hsl(35, 70%, 65%);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100.5;  /* 2π × 16 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 2s ease;
}

.timer-arc.is-ending {
  stroke: hsl(350, 65%, 65%);
}

/* Done button */
.done-btn {
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: hsl(230, 35%, 8%);
  background: linear-gradient(135deg, hsl(35, 80%, 65%), hsl(270, 60%, 70%));
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease, opacity 200ms ease;
  box-shadow: 0 0 16px hsla(35, 80%, 65%, 0.25);
  border: none;
  opacity: 0;
  pointer-events: none;
}

.done-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}@media (hover: hover) and (pointer: fine) {


.done-btn:hover { transform: scale(1.06); box-shadow: 0 0 24px hsla(35, 80%, 65%, 0.4); }
}

.done-btn:active { transform: scale(0.96); }

/* ── Emotion field ── */
.emotion-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Emotion word card ── */
.emotion-card {
  position: absolute;
  padding: 0.55rem 1.1rem;
  border-radius: 9999px;
  cursor: pointer;
  border: 1.5px solid;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.82rem, 2.2vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    box-shadow 250ms ease,
    opacity 250ms ease,
    border-color 250ms ease,
    background 250ms ease;
  will-change: transform;
}

/* Family colour mappings — idle state */
.emotion-card[data-family="anxious"] {
  color: hsl(35, 75%, 75%);
  background: hsla(35, 75%, 55%, 0.08);
  border-color: hsla(35, 75%, 55%, 0.2);
}
.emotion-card[data-family="sad"] {
  color: hsl(210, 60%, 72%);
  background: hsla(210, 60%, 50%, 0.08);
  border-color: hsla(210, 60%, 50%, 0.2);
}
.emotion-card[data-family="angry"] {
  color: hsl(350, 65%, 72%);
  background: hsla(350, 65%, 55%, 0.08);
  border-color: hsla(350, 65%, 55%, 0.2);
}
.emotion-card[data-family="scattered"] {
  color: hsl(270, 55%, 75%);
  background: hsla(270, 55%, 60%, 0.08);
  border-color: hsla(270, 55%, 60%, 0.2);
}
.emotion-card[data-family="okay"] {
  color: hsl(170, 55%, 68%);
  background: hsla(170, 55%, 50%, 0.08);
  border-color: hsla(170, 55%, 50%, 0.2);
}
.emotion-card[data-family="joyful"] {
  color: hsl(28, 85%, 72%);
  background: hsla(28, 85%, 60%, 0.08);
  border-color: hsla(28, 85%, 60%, 0.2);
}

/* Card hover — gated to real hover/pointer devices only. On touch screens,
   un-gated :hover makes iOS treat the FIRST tap as a hover (showing the
   highlight) and withhold the click until a SECOND tap — which is exactly the
   "I have to tap the emotion twice" bug. With this guard, touch devices have no
   hover state, so the first tap fires click and selects immediately. */
@media (hover: hover) and (pointer: fine) {
  .emotion-card:hover:not(.is-selected) {
    transform: scale(1.06) translateY(-2px);
  }
  .emotion-card[data-family="anxious"]:hover  { background: hsla(35,  75%, 55%, 0.14); border-color: hsla(35,  75%, 55%, 0.35); }
  .emotion-card[data-family="sad"]:hover      { background: hsla(210, 60%, 50%, 0.14); border-color: hsla(210, 60%, 50%, 0.35); }
  .emotion-card[data-family="angry"]:hover    { background: hsla(350, 65%, 55%, 0.14); border-color: hsla(350, 65%, 55%, 0.35); }
  .emotion-card[data-family="scattered"]:hover{ background: hsla(270, 55%, 60%, 0.14); border-color: hsla(270, 55%, 60%, 0.35); }
  .emotion-card[data-family="okay"]:hover     { background: hsla(170, 55%, 50%, 0.14); border-color: hsla(170, 55%, 50%, 0.35); }
  .emotion-card[data-family="joyful"]:hover   { background: hsla(28, 85%, 60%, 0.14); border-color: hsla(28, 85%, 60%, 0.35); }
}

/* Selected state */
.emotion-card.is-selected {
  font-weight: 500;
}

.emotion-card.is-selected[data-family="anxious"] {
  background: hsla(35, 75%, 55%, 0.22);
  border-color: hsl(35, 75%, 60%);
  box-shadow: 0 0 18px hsla(35, 75%, 55%, 0.3), 0 4px 12px hsla(230, 40%, 3%, 0.4);
  color: hsl(35, 80%, 82%);
  transform: scale(1.08) translateY(-8px);
}
.emotion-card.is-selected[data-family="sad"] {
  background: hsla(210, 60%, 50%, 0.22);
  border-color: hsl(210, 60%, 62%);
  box-shadow: 0 0 18px hsla(210, 60%, 50%, 0.3), 0 4px 12px hsla(230, 40%, 3%, 0.4);
  color: hsl(210, 65%, 82%);
  transform: scale(1.08) translateY(-8px);
}
.emotion-card.is-selected[data-family="angry"] {
  background: hsla(350, 65%, 55%, 0.22);
  border-color: hsl(350, 65%, 62%);
  box-shadow: 0 0 18px hsla(350, 65%, 55%, 0.3), 0 4px 12px hsla(230, 40%, 3%, 0.4);
  color: hsl(350, 70%, 82%);
  transform: scale(1.08) translateY(-8px);
}
.emotion-card.is-selected[data-family="scattered"] {
  background: hsla(270, 55%, 60%, 0.22);
  border-color: hsl(270, 55%, 68%);
  box-shadow: 0 0 18px hsla(270, 55%, 60%, 0.3), 0 4px 12px hsla(230, 40%, 3%, 0.4);
  color: hsl(270, 60%, 84%);
  transform: scale(1.08) translateY(-8px);
}
.emotion-card.is-selected[data-family="okay"] {
  background: hsla(170, 55%, 50%, 0.22);
  border-color: hsl(170, 55%, 58%);
  box-shadow: 0 0 18px hsla(170, 55%, 50%, 0.3), 0 4px 12px hsla(230, 40%, 3%, 0.4);
  color: hsl(170, 60%, 78%);
  transform: scale(1.08) translateY(-8px);
}
.emotion-card.is-selected[data-family="joyful"] {
  background: hsla(28, 85%, 60%, 0.22);
  border-color: hsl(28, 85%, 68%);
  box-shadow: 0 0 18px hsla(28, 85%, 60%, 0.3), 0 4px 12px hsla(230, 40%, 3%, 0.4);
  color: hsl(28, 90%, 82%);
  transform: scale(1.08) translateY(-8px);
}

/* Active press */
.emotion-card:active:not(.is-selected) { transform: scale(0.94); }
.emotion-card.is-selected:active { transform: scale(1.04) translateY(-6px); }

/* Drift animation — applied via JS to the element's style property */
@keyframes cardDrift {
  0%   { transform: translate(calc(-50% + 0px),         calc(-50% + 0px)); }
  100% { transform: translate(calc(-50% + var(--drift-x, 8px)), calc(-50% + var(--drift-y, -10px))); }
}

/* Card entrance animation. The grid layout's cards have transform: none
   !important, so this must not use translate(-50%, -50%) centering or any
   translateY offset — those were left over from the old absolute-positioned
   scatter layout and, if the !important override is ever bypassed by the
   browser's animation/cascade interaction, could read as a card floating
   away from its grid cell. Scale + opacity only is safe in both contexts. */
@keyframes cardEnter {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Gentle nudge banner ── */
.nudge-banner {
  position: absolute;
  bottom: calc(max(env(safe-area-inset-bottom, 1.5rem), 1.5rem) + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: hsla(220, 20%, 14%, 0.85);
  border: 1px solid hsla(35, 60%, 60%, 0.2);
  border-radius: 9999px;
  padding: 0.6rem 1.4rem;
  font-size: 0.82rem;
  color: hsl(35, 70%, 70%);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nudge-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   REFLECTION OVERLAY
═══════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.overlay-bg {
  position: absolute;
  inset: 0;
  background: hsla(230, 35%, 5%, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.overlay-card {
  position: relative;
  z-index: 1;
  background: hsl(230, 28%, 11%);
  border: 1px solid hsla(220, 20%, 35%, 0.18);
  border-radius: 32px 32px 0 0;
  padding: 2rem 1.75rem calc(max(env(safe-area-inset-bottom, 1.75rem), 1.75rem) + 0.5rem);
  width: 100%;
  max-width: 520px;
  text-align: center;
  transform: translateY(40px);
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90dvh;
  overflow-y: auto;
}

.overlay.is-open .overlay-card {
  transform: translateY(0);
}

.overlay-emoji {
  font-size: 2.2rem;
  margin-bottom: 0.85rem;
  display: block;
  animation: emojiFloat 3s ease-in-out infinite;
}

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.overlay-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  color: hsl(220, 20%, 92%);
}

/* ── Reflection tags ── */
.reflection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  min-height: 2rem;
}

.reflection-tag {
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  border: 1.5px solid;
  animation: tagReveal 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tagReveal {
  from { opacity: 0; transform: scale(0.7) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.reflection-tag[data-family="anxious"]  { color: hsl(35,80%,80%);  background: hsla(35,75%,55%,0.18); border-color: hsla(35,75%,55%,0.3); }
.reflection-tag[data-family="sad"]      { color: hsl(210,65%,80%); background: hsla(210,60%,50%,0.18); border-color: hsla(210,60%,50%,0.3); }
.reflection-tag[data-family="angry"]    { color: hsl(350,70%,80%); background: hsla(350,65%,55%,0.18); border-color: hsla(350,65%,55%,0.3); }
.reflection-tag[data-family="scattered"]{ color: hsl(270,60%,82%); background: hsla(270,55%,60%,0.18); border-color: hsla(270,55%,60%,0.3); }
.reflection-tag[data-family="okay"]     { color: hsl(170,60%,76%); background: hsla(170,55%,50%,0.18); border-color: hsla(170,55%,50%,0.3); }

/* Empty state */
.reflection-tags-empty {
  font-size: 0.85rem;
  color: hsl(220, 12%, 42%);
  font-style: italic;
  padding: 0.5rem 0;
}

/* ── Insight ── */
.reflection-insight {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  color: hsl(220, 15%, 70%);
  line-height: 1.65;
  margin-bottom: 0.75rem;
  font-weight: 300;
}

/* ── Affirmation ── */
.reflection-affirmation {
  font-size: clamp(0.78rem, 2vw, 0.85rem);
  color: hsl(220, 12%, 46%);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

/* ── Ponoki's "what to try next" line ── */
.next-suggestion {
  font-size: clamp(0.78rem, 2vw, 0.85rem);
  color: hsl(185, 70%, 55%);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-align: center;
}
.next-suggestion:empty { display: none; }

/* ── Actions ── */
.overlay-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.btn-primary {
  width: 100%;
  max-width: 300px;
  padding: 0.85rem 2rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: hsl(230, 35%, 8%);
  background: linear-gradient(135deg, hsl(35, 80%, 65%), hsl(270, 60%, 70%));
  border: none;
  cursor: pointer;
  box-shadow: 0 0 24px hsla(35, 80%, 65%, 0.25), 0 4px 16px hsla(230, 40%, 3%, 0.4);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
}@media (hover: hover) and (pointer: fine) {

.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 36px hsla(35, 80%, 65%, 0.4), 0 8px 24px hsla(230, 40%, 3%, 0.5); }
}

.btn-primary:active { transform: scale(0.97); }

.btn-ghost {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: hsl(220, 15%, 50%);
  text-decoration: none;
  padding: 0.6rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid hsla(220, 20%, 35%, 0.2);
  background: transparent;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
  display: inline-block;
}@media (hover: hover) and (pointer: fine) {

.btn-ghost:hover {
  color: hsl(220, 20%, 72%);
  border-color: hsla(220, 20%, 50%, 0.3);
  background: hsla(220, 20%, 20%, 0.2);
}
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
═══════════════════════════════════════════════════════ */
@media (min-height: 700px) {
  .intro-hero { padding: 2.5rem 0 2rem; }
}

@media (max-height: 600px) {
  .intro-icon-wrap { width: 80px; height: 80px; margin-bottom: 1rem; }
  .ring-outer  { width: 80px; height: 80px; }
  .ring-middle { width: 60px; height: 60px; }
  .ring-inner  { width: 42px; height: 42px; }
  .intro-emoji { font-size: 1.4rem; }
  .intro-title { font-size: 2rem; }
  .intro-sub   { font-size: 0.88rem; }
  .intro-science { padding: 0.75rem 1rem; }
}

/* ═══════════════════════════════════════════════════════
   MOOD GARDEN STYLES
   ═══════════════════════════════════════════════════════ */

/* Soil pot at bottom of check-in */
.soil-pot-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 25px;
  background: transparent;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out-expo, ease-out);
}
.soil-pot-container.is-visible {
  opacity: 1;
}
.soil-soil {
  width: 110px;
  height: 8px;
  background: #261b17;
  border-radius: 99px 99px 0 0;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.4);
}
.soil-pot-rim {
  width: 120px;
  height: 6px;
  background: #3e2e2b;
  border-radius: 4px;
  border: 1px solid #52403b;
}

/* Falling seed animation */
.mood-seed-particle {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 9;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
  animation: fallToPot 650ms cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes fallToPot {
  0% {
    transform: translate(-50%, -50%) scale(1.6) translate(0, 0);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.6) translate(var(--dx), var(--dy));
    opacity: 0;
  }
}

/* Garden Zone in Reflection Overlay */
.garden-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4, 1rem);
  width: 100%;
  margin-bottom: 0.5rem;
}

.garden-pot-wrap {
  width: 180px;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
}

.garden-svg {
  width: 100%;
  height: 100%;
}

/* Interactive Water Button */
.water-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: rgba(37, 99, 235, 0.15);
  border: 1.5px solid rgba(37, 99, 235, 0.35);
  color: #93c5fd;
  border-radius: var(--radius-full, 9999px);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 150ms var(--ease-bounce), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}@media (hover: hover) and (pointer: fine) {


.water-btn:hover {
  background: rgba(37, 99, 235, 0.25);
  border-color: rgba(37, 99, 235, 0.55);
  transform: translateY(-1px);
}
}

.water-btn:active, .water-btn.is-watering {
  transform: scale(0.96) translateY(0);
  background: rgba(37, 99, 235, 0.35);
  border-color: #60a5fa;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.25);
}

.water-emoji {
  font-size: 1.1rem;
  transition: transform 200ms ease;
}

.water-btn.is-watering .water-emoji {
  animation: tiltShower 400ms ease-in-out infinite alternate;
}

@keyframes tiltShower {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-35deg); }
}

.water-progress-bar {
  width: 150px;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
  margin-top: -0.2rem;
}

.water-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 99px;
  transition: width 100ms linear;
}

/* Flower/Bot Part groups */
.flower-g {
  transform: scale(0);
  transform-origin: 100px 198px;
  opacity: 0;
  transition: transform 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s ease;
}

.flower-g.bloom-active {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* Hide neutral face when custom emotions are bloomed */
.garden-svg:has(.bloom-active) #bot-mouth-neutral,
.garden-svg:has(.bloom-active) #bot-eye-l-neutral,
.garden-svg:has(.bloom-active) #bot-eye-r-neutral {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ── Custom Mood Bot Keyframe Animations ── */

/* Shake animation (Anxious) */
.anim-shaky {
  transform-origin: 70px 140px;
  animation: shaky 0.15s ease-in-out infinite alternate;
}
@keyframes shaky {
  0% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  100% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
}

/* Droop animation (Sad) */
.anim-droop {
  transform-origin: 76px 155px;
  animation: droopSway 3.5s ease-in-out infinite alternate;
}
@keyframes droopSway {
  0% { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(1px) rotate(1deg); }
}

/* Drip animation (Tears) */
.anim-drip {
  animation: drip 1.8s ease-in infinite;
}
@keyframes drip {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(8px) scale(0.8); opacity: 0; }
  100% { opacity: 0; }
}

/* Angry pulse animation (Angry) */
.anim-angry-pulse {
  transform-origin: 130px 145px;
  animation: angryPulse 1.2s ease-in-out infinite alternate;
}
@keyframes angryPulse {
  0% { transform: scale(0.97); }
  100% { transform: scale(1.03); }
}

/* Steam animations */
.anim-steam-l {
  transform-origin: 118px 138px;
  animation: steamL 2s ease-out infinite;
}
@keyframes steamL {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.5; }
  80% { transform: translate(-10px, -10px) scale(1.2); opacity: 0; }
  100% { opacity: 0; }
}

.anim-steam-r {
  transform-origin: 142px 138px;
  animation: steamR 2s ease-out infinite;
}
@keyframes steamR {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.5; }
  80% { transform: translate(10px, -10px) scale(1.2); opacity: 0; }
  100% { opacity: 0; }
}

/* Spin animation (Scattered Propeller) */
.anim-spin {
  animation: spinProp 1.5s linear infinite;
}
@keyframes spinProp {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Wobble animation (Scattered Face) */
.anim-wobble {
  transform-origin: 118px 150px;
  animation: wobbleFace 2.5s ease-in-out infinite alternate;
}
@keyframes wobbleFace {
  0% { transform: translate(-1px, -0.3px) rotate(-1deg); }
  100% { transform: translate(1px, 0.3px) rotate(1deg); }
}

/* Sway animation (Calm/Okay Sprout) */
.anim-okay-sway {
  transform-origin: 100px 145px;
  animation: okaySway 4s ease-in-out infinite alternate;
}
@keyframes okaySway {
  0% { transform: rotate(-2.5deg); }
  100% { transform: rotate(2.5deg); }
}

/* Water drop animation */
.water-droplet-particle {
  position: absolute;
  width: 4px;
  height: 7px;
  background: #60a5fa;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: dripDown 400ms linear forwards;
}

@keyframes dripDown {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  20% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(50px) scale(0.6);
  }
}

/* Glowing spore particle animation */
.spore-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 12;
  animation: riseUp 1.2s ease-out forwards;
}

@keyframes riseUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(0) scale(0.6);
  }
  20% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-60px) scale(1.3);
  }
}

/* Coping Exercise Card styling */
.coping-card {
  background: hsla(230, 20%, 15%, 0.45);
  border: 1px solid hsla(220, 20%, 35%, 0.15);
  border-radius: 20px;
  padding: 1.1rem 1.4rem;
  margin: 1.25rem auto 1.5rem;
  max-width: 380px;
  width: 100%;
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  animation: tagReveal 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 1300ms; /* Reveal right after the insight */
  display: none; /* Injected by JS only when check-in is complete */
}

.coping-card.is-visible {
  display: block;
}

.coping-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(260, 60%, 75%);
  background: hsla(260, 60%, 65%, 0.12);
  border: 1px solid hsla(260, 60%, 65%, 0.2);
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}

.coping-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: hsl(220, 20%, 92%);
  margin-bottom: 0.35rem;
}

.coping-text {
  font-size: 0.85rem;
  color: hsl(220, 15%, 72%);
  line-height: 1.55;
  font-weight: 300;
}

/* Custom border colors matching dominant families */
.coping-card[data-family="anxious"] { border-color: hsla(35, 75%, 55%, 0.3); }
.coping-card[data-family="sad"]     { border-color: hsla(210, 60%, 50%, 0.3); }
.coping-card[data-family="angry"]   { border-color: hsla(350, 65%, 55%, 0.3); }
.coping-card[data-family="scattered"] { border-color: hsla(270, 55%, 60%, 0.3); }
.coping-card[data-family="okay"]    { border-color: hsla(170, 55%, 50%, 0.3); }

.coping-card[data-family="anxious"] .coping-badge { color: hsl(35, 80%, 75%); background: hsla(35, 75%, 55%, 0.12); border-color: hsla(35, 75%, 55%, 0.2); }
.coping-card[data-family="sad"] .coping-badge     { color: hsl(210, 70%, 75%); background: hsla(210, 60%, 50%, 0.12); border-color: hsla(210, 60%, 50%, 0.2); }
.coping-card[data-family="angry"] .coping-badge   { color: hsl(350, 75%, 75%); background: hsla(350, 65%, 55%, 0.12); border-color: hsla(350, 65%, 55%, 0.2); }
.coping-card[data-family="scattered"] .coping-badge { color: hsl(270, 65%, 78%); background: hsla(270, 55%, 60%, 0.12); border-color: hsla(270, 55%, 60%, 0.2); }
.coping-card[data-family="okay"] .coping-badge    { color: hsl(170, 65%, 72%); background: hsla(170, 55%, 50%, 0.12); border-color: hsla(170, 55%, 50%, 0.2); }

/* ═══════════════════════════════════════════════════════
   CATEGORY DRILL-DOWN FLOW
   ═══════════════════════════════════════════════════════ */

.category-selector {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 92%;
  max-width: 480px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  z-index: 10;
  opacity: 1;
  transition: opacity 300ms ease, transform 300ms ease;
  /* Only interactive once its parent screen is active — see .play-header. */
  pointer-events: none;
}
.screen.is-active .category-selector {
  pointer-events: auto;
}

.category-selector.is-hidden,
.screen.is-active .category-selector.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -40%) scale(0.95);
}

.category-seed-btn {
  padding: 1.1rem 1rem;
  border-radius: 20px;
  background: hsla(230, 20%, 14%, 0.45);
  border: 1.5px solid hsla(220, 20%, 35%, 0.15);
  color: hsl(220, 20%, 92%);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 200ms ease, box-shadow 200ms ease, background 250ms ease;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .category-seed-btn:hover {
    transform: translateY(-3px) scale(1.03);
  }
}

@media (hover: hover) and (pointer: fine) {
}

.category-seed-btn:active {
  transform: scale(0.97);
}

.category-seed-btn.is-active {
  background: hsla(230, 20%, 22%, 0.8);
  border-color: currentColor;
  box-shadow: 0 0 12px currentColor;
}

/* Specific glows */
.category-seed-btn[data-family="anxious"] { border-color: hsla(35, 75%, 55%, 0.22); }
.category-seed-btn[data-family="sad"]     { border-color: hsla(210, 60%, 50%, 0.22); }
.category-seed-btn[data-family="angry"]   { border-color: hsla(350, 65%, 55%, 0.22); }
.category-seed-btn[data-family="scattered"] { border-color: hsla(270, 55%, 60%, 0.22); }
.category-seed-btn[data-family="okay"]    { border-color: hsla(170, 55%, 50%, 0.22); }
.category-seed-btn[data-family="joyful"]  { border-color: hsla(28, 85%, 60%, 0.22); }

@media (hover: hover) and (pointer: fine) {
  .category-seed-btn[data-family="anxious"]:hover { background: hsla(35, 75%, 55%, 0.12); border-color: hsl(35, 75%, 60%); box-shadow: 0 0 20px hsla(35, 75%, 55%, 0.25); }
}

@media (hover: hover) and (pointer: fine) {
.category-seed-btn[data-family="sad"]:hover     { background: hsla(210, 60%, 50%, 0.12); border-color: hsl(210, 60%, 55%); box-shadow: 0 0 20px hsla(210, 60%, 50%, 0.25); }
}

@media (hover: hover) and (pointer: fine) {
.category-seed-btn[data-family="angry"]:hover   { background: hsla(350, 65%, 55%, 0.12); border-color: hsl(350, 65%, 60%); box-shadow: 0 0 20px hsla(350, 65%, 55%, 0.25); }
}

@media (hover: hover) and (pointer: fine) {
.category-seed-btn[data-family="scattered"]:hover { background: hsla(270, 55%, 60%, 0.12); border-color: hsl(270, 55%, 65%); box-shadow: 0 0 20px hsla(270, 55%, 60%, 0.25); }
}

@media (hover: hover) and (pointer: fine) {
.category-seed-btn[data-family="okay"]:hover    { background: hsla(170, 55%, 50%, 0.12); border-color: hsl(170, 55%, 55%); box-shadow: 0 0 20px hsla(170, 55%, 50%, 0.25); }
}

@media (hover: hover) and (pointer: fine) {
.category-seed-btn[data-family="joyful"]:hover  { background: hsla(28, 85%, 60%, 0.12); border-color: hsl(28, 85%, 65%); box-shadow: 0 0 20px hsla(28, 85%, 60%, 0.25); }
}

@media (hover: hover) and (pointer: fine) {
}

/* Mood emoji inside each category button, in place of the old colored
   ring/dot indicator. */
.category-seed-emoji {
  font-size: 1.5rem;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .category-seed-btn:hover .category-seed-emoji {
    transform: scale(1.15);
  }
}

@media (hover: hover) and (pointer: fine) {
}

.category-seed-btn[data-family="anxious"]   { color: hsl(45, 90%, 65%); }
.category-seed-btn[data-family="sad"]       { color: hsl(215, 80%, 68%); }
.category-seed-btn[data-family="angry"]     { color: hsl(350, 75%, 68%); }
.category-seed-btn[data-family="scattered"] { color: hsl(270, 65%, 75%); }
.category-seed-btn[data-family="okay"]      { color: hsl(170, 60%, 65%); }
.category-seed-btn[data-family="joyful"]    { color: hsl(28, 85%, 65%); }

.category-seed-btn[data-family="joyful"] { border-color: hsla(28, 85%, 60%, 0.22); }
@media (hover: hover) and (pointer: fine) {
  .category-seed-btn[data-family="joyful"]:hover { background: hsla(28, 85%, 60%, 0.12); border-color: hsl(28, 85%, 65%); box-shadow: 0 0 20px hsla(28, 85%, 60%, 0.25); }
}

@media (hover: hover) and (pointer: fine) {
}

/* Choose other seeds back button */
.back-to-categories {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(220, 15%, 75%);
  background: hsla(220, 20%, 20%, 0.45);
  border: 1px solid hsla(220, 20%, 40%, 0.18);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

.back-to-categories.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}@media (hover: hover) and (pointer: fine) {


.back-to-categories:hover {
  background: hsla(220, 20%, 28%, 0.6);
  color: hsl(220, 20%, 90%);
  transform: scale(1.05);
}
}

.back-to-categories:active {
  transform: scale(0.95);
}

/* Detail view grid layout container. CSS Grid (not flex-wrap) so every row
   shares the same column tracks — flex-wrap centers each row independently
   based on that row's own total width, which made rows drift out of
   alignment with each other as soon as word lengths varied (read as the
   cards "floating" rather than sitting in a tidy cloud). */
.emotion-field {
  position: absolute;
  inset: 218px 24px 130px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  justify-items: center;
  align-content: center;
  gap: 0.75rem;
  max-width: 420px;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  padding: 2rem 1rem;
}

.emotion-field.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Override absolute positioning for grid view */
.emotion-field .emotion-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  animation: cardEnter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ═══════════════════════════════════════════════════════
   SOMATIC BREATHING PAUSE
   ═══════════════════════════════════════════════════════ */
.breath-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  text-align: center;
  gap: clamp(2.5rem, 8vh, 4rem);
  padding: 2.5rem 1.5rem;
}

#breath-done-btn {
  background: hsla(170, 60%, 55%, 0.08) !important;
  border: 1.5px solid hsla(170, 60%, 55%, 0.3) !important;
  color: hsl(170, 60%, 80%) !important;
  box-shadow: 0 0 20px hsla(170, 60%, 55%, 0.1), 0 4px 12px hsla(230, 40%, 3%, 0.4) !important;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.85rem 2.4rem;
  backdrop-filter: blur(8px);
  transition: all 250ms ease;
}@media (hover: hover) and (pointer: fine) {


#breath-done-btn:hover {
  background: hsla(170, 60%, 55%, 0.18) !important;
  border-color: hsla(170, 60%, 55%, 0.6) !important;
  box-shadow: 0 0 30px hsla(170, 60%, 55%, 0.25), 0 6px 16px hsla(230, 40%, 3%, 0.5) !important;
  transform: translateY(-2px) scale(1.02);
}
}

#breath-done-btn:active {
  transform: scale(0.97) translateY(0);
}

.breath-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 500;
  color: hsl(220, 20%, 92%);
  margin-bottom: 0.5rem;
}

.breath-sub {
  font-size: 0.9rem;
  color: hsl(220, 12%, 56%);
  font-weight: 300;
}

.breath-circle-container {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breath-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(170, 60%, 55%, 0.15) 0%, transparent 70%);
  border: 1px solid hsla(170, 60%, 55%, 0.25);
  animation: breathe 5s ease-in-out infinite;
}

.breath-circle.outer  { width: 160px; height: 160px; animation-delay: 0s; }
.breath-circle.middle { width: 120px; height: 120px; animation-delay: 0.5s; opacity: 0.7; }
.breath-circle.inner  { width: 80px; height: 80px; animation-delay: 1s; opacity: 0.4; background: hsla(170, 60%, 55%, 0.08); }

.breath-text {
  position: relative;
  z-index: 5;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  animation: breathTextAnim 5s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.4); opacity: 0.8; box-shadow: 0 0 30px hsla(170, 60%, 55%, 0.3); }
}

@keyframes breathTextAnim {
  0%, 100% { opacity: 0.8; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ── Step HUD Subtitle ── */
.step-hud-sub {
  text-align: center;
  margin-top: 5.8rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: hsl(220, 15%, 60%);
  font-weight: 400;
  letter-spacing: 0.02em;
  animation: tagReveal 400ms ease-out;
  z-index: 2;
  pointer-events: none;
}

/* ── Meditational Withering Release ── */
.flower-g.wither-active {
  transform: scale(0) translateY(18px) rotate(12deg) !important;
  opacity: 0 !important;
  transition: transform 3.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 3.2s ease !important;
}

.flower-g.wither-active .anim-droop {
  transform: rotate(35deg) translateY(6px) !important;
  transition: transform 3.5s ease-in-out !important;
}

.flower-g.wither-active .anim-shaky {
  transform: scale(0.5) rotate(-18deg) !important;
  transition: transform 3.2s ease-in-out !important;
}

.flower-g.wither-active .anim-okay-sway {
  transform: scale(0.6) rotate(15deg) !important;
  transition: transform 3.5s ease-in-out !important;
}

.flower-g.wither-active .anim-angry-pulse {
  transform: scale(0.4) !important;
  transition: transform 3.2s ease-in-out !important;
}

/* Hide done and old back to categories in the header */
#done-btn, #back-to-categories {
  display: none !important;
}

/* Guided Choice Card */
.guided-choice-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 90%;
  max-width: 380px;
  background: hsla(230, 28%, 11%, 0.85);
  border: 1px solid hsla(220, 20%, 35%, 0.2);
  border-radius: 28px;
  padding: 2.2rem 1.8rem;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  pointer-events: auto;
}

.guided-choice-card.is-hidden {
  opacity: 0;
  transform: translate(-50%, -55%) scale(0.95);
  pointer-events: none;
}

.guided-choice-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: #fff;
}

.guided-choice-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: hsl(220, 15%, 70%);
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.guided-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-primary-choice {
  width: 100%;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: hsl(230, 35%, 8%);
  background: linear-gradient(135deg, hsl(35, 80%, 65%), hsl(270, 60%, 70%));
  border: none;
  cursor: pointer;
  box-shadow: 0 0 20px hsla(35, 80%, 65%, 0.2);
  transition: transform 150ms ease, box-shadow 150ms ease;
}@media (hover: hover) and (pointer: fine) {


.btn-primary-choice:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px hsla(35, 80%, 65%, 0.3);
}
}

.btn-primary-choice:active {
  transform: scale(0.98);
}

.btn-secondary-choice {
  width: 100%;
  padding: 0.8rem 1.5rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: hsl(220, 15%, 80%);
  background: hsla(220, 20%, 20%, 0.5);
  border: 1px solid hsla(220, 20%, 35%, 0.25);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}@media (hover: hover) and (pointer: fine) {


.btn-secondary-choice:hover {
  background: hsla(220, 20%, 25%, 0.7);
  border-color: hsla(220, 20%, 50%, 0.35);
  transform: translateY(-1px);
}
}

.btn-secondary-choice:active {
  transform: scale(0.98);
}

/* Play Screen Footer Actions */
.play-footer-actions {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 50;
  padding: 0 1rem;
  width: 90%;
  max-width: 440px;
  /* Only interactive once its parent screen is active — see .play-header. */
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
}
.screen.is-active .play-footer-actions {
  pointer-events: auto;
}

.play-footer-actions.is-hidden,
.screen.is-active .play-footer-actions.is-hidden {
  opacity: 0;
  transform: translate(-50%, 15px);
  pointer-events: none;
}

.plant-selected-btn {
  flex: 1;
  padding: 0.65rem 1.25rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 250ms ease;
  text-align: center;
}

/* Primary choice: Grow bouquet */
#water-bouquet-btn {
  color: hsl(170, 60%, 88%) !important;
  background: hsla(170, 60%, 55%, 0.12) !important;
  border: 1px solid hsla(170, 60%, 55%, 0.35) !important;
  box-shadow: 0 4px 16px hsla(170, 60%, 55%, 0.1) !important;
}@media (hover: hover) and (pointer: fine) {


#water-bouquet-btn:hover {
  background: hsla(170, 60%, 55%, 0.22) !important;
  border-color: hsla(170, 60%, 55%, 0.6) !important;
  box-shadow: 0 4px 20px hsla(170, 60%, 55%, 0.2) !important;
  transform: translateY(-1.5px) !important;
}
}


.plant-selected-btn:active {
  transform: scale(0.97) !important;
}

/* ── screen-loading for snappy check-in transitions ── */
.screen-loading {
  background: hsl(230, 35%, 7%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  z-index: 999;
}

.loading-spinner {
  width: 44px;
  height: 44px;
  border: 3.5px solid hsla(170, 60%, 55%, 0.15);
  border-top-color: hsl(170, 60%, 55%);
  border-radius: 50%;
  animation: spinProp 1s linear infinite;
}

.loading-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: hsl(220, 15%, 65%);
  letter-spacing: 0.02em;
}

/* ── Pot Melt & Soul Orb Rise ── */
.pot-melt-active {
  transform-origin: 100px 212px;
  animation: potMeltAndFly 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#soul-orb {
  transform-origin: 100px 212px;
}

#soul-orb.orb-fly-active {
  animation: orbRiseAndFly 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes potMeltAndFly {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0px);
  }
  30% {
    transform: scale(0.75) translateY(5px);
    opacity: 0.85;
    filter: blur(3px);
  }
  55% {
    transform: scale(0.25) translateY(-10px);
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    transform: scale(0) translateY(-10px);
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes orbRiseAndFly {
  0% {
    transform: scale(0) translateY(0);
    opacity: 0;
    filter: blur(5px);
  }
  30% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(3px);
  }
  50% {
    transform: scale(1.3) translateY(-15px);
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    transform: scale(0.1) translateY(-280px);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   WIDE-VIEWPORT (DESKTOP/TABLET) LAYOUT FIXES
   Everything below is gated behind min-width: 768px so the
   mobile layout stays exactly as it is.
═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* #screen-play is a column flexbox and this button is its only
     unconstrained in-flow child, so the default align-items: stretch
     blew it up into an edge-to-edge bar across the whole viewport,
     pressed flush against the subtitle above it. Shrink it back to
     its content and center it like the category grid below. */
  .back-to-categories {
    align-self: center;
    width: max-content;
    margin-top: 0.75rem;
  }

  /* The reflection overlay is styled as a mobile bottom sheet: pinned
     to the viewport bottom with square bottom corners and a 75%-opacity
     backdrop. On wide viewports that left the card looking cut off at
     the bottom edge while the play screen's header/back bar showed
     through the translucent backdrop. Present it as a centered dialog
     card over a near-opaque backdrop instead. */
  .overlay {
    align-items: center;
  }

  .overlay-bg {
    background: hsla(230, 35%, 5%, 0.92);
  }

  .overlay-card {
    border-radius: 32px;
    padding-bottom: 2rem;
  }
}