/* ==========================================================================
   TakeAMindbreak.com - Interactive Activities & Mini-Apps Styles
   ========================================================================== */

/* Activity Detail Page Layout */
.activity-page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .main-wrapper:has(.activity-page-layout) {
    padding: 0.65rem clamp(1.25rem, 2.5vw, 2.5rem) 3.5rem clamp(1.25rem, 2.5vw, 2.5rem);
    gap: 0.35rem;
    max-width: min(98%, 1600px);
  }

  .activity-page-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
  }
}

@media (min-width: 1400px) {
  .main-wrapper:has(.activity-page-layout) {
    padding: 0.75rem clamp(1.5rem, 2.5vw, 3rem) 4rem clamp(1.5rem, 2.5vw, 3rem);
    gap: 0.4rem;
    max-width: min(98%, 1750px);
  }

  .activity-page-layout {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 1.5rem;
  }
}

.activity-main-column {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.activity-detail-header {
  margin-bottom: 0.4rem;
}

@media (min-width: 1024px) {
  .activity-detail-header {
    margin-bottom: 0.18rem;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
  }
}

.activity-header-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .activity-header-meta {
    margin-bottom: 0.05rem;
  }

  .activity-header-meta .hero-pill,
  .activity-header-meta .card-pill-duration {
    font-size: 0.68rem;
    padding: 0.12rem 0.5rem;
    line-height: 1.1;
  }
}

.activity-detail-title {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
  margin-bottom: 0.15rem;
  text-align: left;
}

@media (min-width: 1024px) {
  .activity-detail-title {
    font-size: 1.25rem;
    margin-bottom: 0.05rem;
    line-height: 1.15;
    gap: 0.35rem;
  }
}

.activity-header-icon {
  font-family: 'Outfit', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  font-size: 1.1em;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
}

.activity-detail-desc {
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  line-height: 1.35;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

@media (min-width: 1024px) {
  .activity-detail-desc {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-bottom: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1000px;
  }
}

.pill-bubble-symbol {
  font-family: 'Outfit', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  font-size: 1.1em;
  display: inline-block;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .breadcrumbs {
    margin-bottom: 0.12rem;
    font-size: 0.72rem;
    line-height: 1.1;
  }
}

.breadcrumbs a:hover {
  color: var(--accent-primary);
}

.breadcrumbs span {
  opacity: 0.5;
}

/* Interactive Canvas / Stage Container */
.interactive-stage {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  padding: clamp(0.75rem, 1.75vw, 1.35rem);
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .interactive-stage {
    min-height: 620px;
    padding: 0.65rem 0.9rem;
  }
}

@media (min-width: 1400px) {
  .interactive-stage {
    min-height: 700px;
    padding: 0.75rem 1rem;
  }
}

.stage-controls-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  z-index: 10;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .stage-controls-top {
    margin-bottom: 0.45rem;
  }
}

.stage-counter-pill {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Nunito', 'Outfit', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
}

.stage-action-btns {
  display: flex;
  gap: 0.5rem;
}

.stage-btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  color: var(--text-main);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.stage-btn-sm:hover {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* -------------------------------------------------------------
   0. THE PRESSURE RELEASE VALVE (Mental Pressure Tank)
   ------------------------------------------------------------- */
.pressure-sanctuary {
  position: relative;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 0;
  box-sizing: border-box;
}

.steam-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.pressure-level-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  transition: color 0.3s ease;
}

.pressure-level-val.high {
  color: #E06A55 !important;
}

.pressure-level-val.medium {
  color: #E2B86B !important;
}

.pressure-level-val.calm {
  color: #6B9E82 !important;
}

/* Tank Housing & Flanking Nozzles */
.tank-housing {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tank-exhaust-nozzle {
  position: absolute;
  top: 24%;
  width: 28px;
  height: 14px;
  background: linear-gradient(180deg, #A8BEB2 0%, #768F81 100%);
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 8px rgba(28, 45, 36, 0.1);
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

.nozzle-left {
  left: clamp(10px, 12vw, 75px);
  transform: rotate(-35deg);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.nozzle-right {
  right: clamp(10px, 12vw, 75px);
  transform: rotate(35deg);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.nozzle-steam-jet {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 245, 238, 0.8), transparent 70%);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.nozzle-left .nozzle-steam-jet {
  left: -8px;
}

.nozzle-right .nozzle-steam-jet {
  right: -8px;
}

.tank-housing.is-venting .nozzle-steam-jet {
  opacity: 1;
  animation: steamNozzleFlicker 0.15s infinite alternate ease-in-out;
}

@keyframes steamNozzleFlicker {
  0% { transform: translateY(-50%) scale(0.85); opacity: 0.6; }
  100% { transform: translateY(-50%) scale(1.35); opacity: 1; }
}

/* Central Gauge Dial Housing */
.gauge-card-dial {
  position: relative;
  width: clamp(230px, 56vw, 276px);
  height: clamp(230px, 56vw, 276px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  overflow: visible;
}

.pressure-gauge-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 10px 25px rgba(28, 45, 36, 0.08));
}

[data-theme="dark"] .pressure-gauge-svg {
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4));
}

/* Digital Readout Center Badge - Centered absolutely inside the gauge dial card */
.gauge-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-card);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 12px rgba(28, 45, 36, 0.08);
  pointer-events: none;
  min-width: 110px;
  white-space: nowrap;
  z-index: 10;
}

.gauge-status-tag {
  font-family: 'Nunito', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.15rem;
  transition: all 0.3s ease;
}

.gauge-status-tag.high {
  background: rgba(224, 106, 85, 0.12);
  color: #E06A55;
  border: 1px solid rgba(224, 106, 85, 0.3);
}

.gauge-status-tag.medium {
  background: rgba(226, 184, 107, 0.15);
  color: #B58428;
  border: 1px solid rgba(226, 184, 107, 0.35);
}

[data-theme="dark"] .gauge-status-tag.medium {
  color: #E2B86B;
}

.gauge-status-tag.calm {
  background: rgba(107, 158, 130, 0.15);
  color: #4A7A61;
  border: 1px solid rgba(107, 158, 130, 0.35);
}

[data-theme="dark"] .gauge-status-tag.calm {
  color: #84A98C;
}

.gauge-status-tag.complete {
  animation: pulseGlowGreen 2s infinite ease-in-out;
}

@keyframes pulseGlowGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107, 158, 130, 0.4); }
  50% { box-shadow: 0 0 12px 3px rgba(107, 158, 130, 0.5); }
}

.gauge-psi-row {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  line-height: 1;
}

.gauge-psi-val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.gauge-psi-unit {
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Tactile Lever Section */
.pressure-lever-section {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.pressure-lever-btn {
  width: 100%;
  min-height: 64px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #6B9E82 0%, #4D7E64 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(77, 126, 100, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.45), inset 0 -4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1.6rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--ease-smooth), box-shadow 0.15s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.pressure-lever-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(77, 126, 100, 0.42), inset 0 2px 5px rgba(255, 255, 255, 0.55);
}

.pressure-lever-btn:active,
.pressure-lever-btn.active-pressing {
  transform: translateY(4px) scale(0.985);
  box-shadow: 0 2px 8px rgba(77, 126, 100, 0.25), inset 0 3px 8px rgba(0, 0, 0, 0.32);
  background: linear-gradient(180deg, #48785E 0%, #39614B 100%) !important;
}

.lever-icon-bubble {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transition: transform 0.15s ease;
}

.pressure-lever-btn.active-pressing .lever-icon-bubble {
  transform: translateY(2px) scale(0.92);
  background: rgba(255, 255, 255, 0.15);
}

.lever-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.lever-action-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.lever-action-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.9;
  line-height: 1.2;
}

.lever-hint-msg {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 1.4rem;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E06A55;
  display: inline-block;
  animation: pulseDotWarn 1.5s infinite ease-in-out;
  flex-shrink: 0;
}

.pulse-dot.zen {
  background: var(--accent-primary);
  animation: pulseDotZen 1.5s infinite ease-in-out;
}

@keyframes pulseDotWarn {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes pulseDotZen {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Restored Zen Sanctuary State (Golden Bloom) */
.pressure-sanctuary.restored-zen .gauge-card-dial {
  animation: zenAuraBloom 3s ease-in-out infinite alternate;
}

@keyframes zenAuraBloom {
  0% { filter: drop-shadow(0 0 10px rgba(107, 158, 130, 0.2)); }
  100% { filter: drop-shadow(0 0 35px rgba(226, 184, 107, 0.45)); }
}

/* =============================================================
   3. "DESTROY YOUR WORRY" SHREDDER
   ============================================================= */

/* When shredder is inside the interactive-stage, make stage flex-start + clip */
.interactive-stage:has(.shredder-sanctuary) {
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

/* Pressure release: allow lever button to overflow the card boundary */
.interactive-stage:has(.pressure-sanctuary) {
  overflow: visible;
}

.shredder-sanctuary {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
}

/* ── Write Phase ──────────────────────────────────────────── */
.shredder-write-phase {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.shredder-prompt-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.shredder-prompt-icon {
  display: flex;
  align-items: center;
  color: var(--accent-secondary);
  flex-shrink: 0;
}

/* ── Input Wrapper + Canvas ────────────────────────────────── */
.shredder-input-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-soft);
  box-shadow: 0 4px 16px rgba(28, 45, 36, 0.06), inset 0 1px 3px rgba(255, 255, 255, 0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shredder-input-wrapper:focus-within {
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 3px rgba(226, 184, 107, 0.18), 0 6px 20px rgba(28, 45, 36, 0.08);
}

[data-theme="dark"] .shredder-input-wrapper {
  background: var(--bg-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .shredder-input-wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(226, 184, 107, 0.15), 0 6px 24px rgba(0, 0, 0, 0.25);
}

.shredder-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 160px;
  padding: 1.2rem 1.4rem 2.5rem;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  resize: none;
  font-family: 'Outfit', Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--text-main) !important;
  caret-color: var(--accent-secondary);
  display: block;
  position: relative;
  z-index: 2;
  user-select: text;
  -webkit-user-select: text;
  letter-spacing: 0.01em;
}

.shredder-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.65;
  font-style: italic;
  font-weight: 400;
  font-family: Georgia, 'Times New Roman', serif;
}

/* Particle canvas overlaid on top of the input wrapper */
.shredder-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  border-radius: 16px;
}

.shredder-char-counter {
  position: absolute;
  bottom: 0.6rem;
  right: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.55;
  z-index: 3;
  font-family: 'Nunito', sans-serif;
  pointer-events: none;
}

/* ── Action Button Row ────────────────────────────────────── */
.shredder-btn-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.shredder-release-btn {
  width: 100%;
  min-height: 58px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #E2B86B 0%, #C89A3E 100%) !important;
  color: #1C1208 !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 24px rgba(200, 154, 62, 0.38), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.8rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--ease-smooth), box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.shredder-release-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  pointer-events: none;
}

.shredder-release-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(200, 154, 62, 0.45), inset 0 2px 5px rgba(255, 255, 255, 0.55);
}

.shredder-release-btn:active {
  transform: translateY(3px) scale(0.98);
  box-shadow: 0 2px 8px rgba(200, 154, 62, 0.25), inset 0 3px 8px rgba(0, 0, 0, 0.15);
}

.shredder-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shredder-btn-label {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shredder-micro-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  margin: 0;
  line-height: 1.5;
  opacity: 0.75;
}

/* ── Shake Animation for empty submit ─────────────────────── */
@keyframes shredderShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.shredder-shake {
  animation: shredderShake 0.45s var(--ease-smooth);
}

/* ── Cleared / Released Phase ─────────────────────────────── */
.shredder-cleared-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  position: relative;
  transition: opacity 0.5s ease;
}

.shredder-cleared-phase[hidden] {
  display: none !important;
}

.shredder-cleared-aura {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.18) 0%, transparent 70%);
  animation: shredderAuraBreath 3s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes shredderAuraBreath {
  0%   { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 1; }
}

.shredder-cleared-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 1.5rem 1rem;
}

.shredder-cleared-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary-light), var(--accent-secondary-light));
  border: 2px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  box-shadow: 0 8px 24px rgba(107, 158, 130, 0.2);
  animation: shredderIconPop 0.5s var(--ease-smooth) both;
}

@keyframes shredderIconPop {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.shredder-cleared-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 0;
}

.shredder-cleared-msg {
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.65;
  margin: 0;
}

.shredder-write-again-btn {
  margin-top: 0.5rem;
  padding: 0.65rem 1.6rem;
  min-height: 48px;
  border-radius: var(--radius-full);
  background: var(--accent-primary-light) !important;
  color: var(--accent-primary) !important;
  border: 1.5px solid rgba(107, 158, 130, 0.4) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
}

.shredder-write-again-btn:hover {
  background: rgba(107, 158, 130, 0.22) !important;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------
/* =============================================================
   1. VIRTUAL BUBBLE WRAP POPPER
   ============================================================= */
.bubble-sanctuary {
  position: relative;
  width: 100%;
  max-width: 680px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  box-sizing: border-box;
}

.bubble-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.bubble-grid-wrap {
  width: 100%;
  max-width: 640px;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 14px;
  perspective: 700px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary-light) transparent;
  box-sizing: border-box;
  justify-items: center;
  align-content: start;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Bubble cells: cycling through 5 distinct vibrant colors for a colorful sheet */
.bubble-cell {
  width: 100%;
  max-width: 92px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 15%, rgba(107, 200, 155, 0.72) 48%, rgba(52, 148, 100, 0.55) 82%, rgba(28, 90, 60, 0.4) 100%);
  box-shadow: 0 8px 22px rgba(28, 45, 36, 0.12), inset 0 3px 8px rgba(255, 255, 255, 0.92), inset 0 -4px 8px rgba(52, 148, 100, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease, filter 0.15s ease;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center center;
}

/* Color variation per position using nth-child */
.bubble-cell:nth-child(5n+1) {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 15%, rgba(107, 200, 155, 0.75) 48%, rgba(52, 148, 100, 0.55) 82%, rgba(28, 90, 60, 0.4) 100%);
  box-shadow: 0 8px 22px rgba(52, 148, 100, 0.2), inset 0 3px 8px rgba(255,255,255,0.92), inset 0 -4px 8px rgba(52,148,100,0.3);
}
.bubble-cell:nth-child(5n+2) {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 15%, rgba(226, 140, 107, 0.75) 48%, rgba(200, 90, 50, 0.55) 82%, rgba(140, 50, 20, 0.4) 100%);
  box-shadow: 0 8px 22px rgba(200, 90, 50, 0.2), inset 0 3px 8px rgba(255,255,255,0.92), inset 0 -4px 8px rgba(200,90,50,0.3);
}
.bubble-cell:nth-child(5n+3) {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 15%, rgba(140, 155, 230, 0.75) 48%, rgba(90, 100, 200, 0.55) 82%, rgba(50, 60, 150, 0.4) 100%);
  box-shadow: 0 8px 22px rgba(90, 100, 200, 0.2), inset 0 3px 8px rgba(255,255,255,0.92), inset 0 -4px 8px rgba(90,100,200,0.3);
}
.bubble-cell:nth-child(5n+4) {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 15%, rgba(226, 200, 107, 0.75) 48%, rgba(200, 160, 50, 0.55) 82%, rgba(140, 100, 20, 0.4) 100%);
  box-shadow: 0 8px 22px rgba(200, 160, 50, 0.2), inset 0 3px 8px rgba(255,255,255,0.92), inset 0 -4px 8px rgba(200,160,50,0.3);
}
.bubble-cell:nth-child(5n+5) {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 15%, rgba(200, 140, 226, 0.75) 48%, rgba(160, 80, 200, 0.55) 82%, rgba(100, 40, 140, 0.4) 100%);
  box-shadow: 0 8px 22px rgba(160, 80, 200, 0.2), inset 0 3px 8px rgba(255,255,255,0.92), inset 0 -4px 8px rgba(160,80,200,0.3);
}

[data-theme="dark"] .bubble-cell {
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.35) 20%, rgba(74, 170, 120, 0.55) 50%, rgba(27, 70, 50, 0.85) 85%, rgba(14, 40, 28, 0.95) 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 3px 6px rgba(255, 255, 255, 0.35), inset 0 -4px 8px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.28);
}

.bubble-cell:hover:not(.popped) {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 14px 30px rgba(107, 158, 130, 0.3), inset 0 3px 8px rgba(255, 255, 255, 0.95);
  filter: brightness(1.08);
}

.bubble-cell:active:not(.popped) {
  transform: scale(0.9);
}

/* Pop: flash color then flatten with ripple ring */
.bubble-cell.popped {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), rgba(107,158,130,0.06));
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(255, 255, 255, 0.3);
  border-color: rgba(107, 158, 130, 0.12);
  transform: scale(0.82);
  opacity: 0.45;
  cursor: default;
  animation: bubblePopBurst 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .bubble-cell.popped {
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.05);
  opacity: 0.38;
}

.bubble-cell.popped::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: bubbleRippleRing 0.4s ease-out forwards;
  pointer-events: none;
}

.bubble-cell.popped::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
}

@keyframes bubblePopBurst {
  0% { transform: scale(1.22); filter: brightness(1.5) saturate(1.6); }
  35% { transform: scale(0.75); filter: brightness(1.2); }
  100% { transform: scale(0.82); filter: brightness(1); }
}

@keyframes bubbleRippleRing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

.pop-streak-badge {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(226, 184, 107, 0.2), rgba(107, 158, 130, 0.2));
  color: var(--accent-secondary);
  border: 1px solid rgba(226, 184, 107, 0.4);
  animation: popBadgePulse 0.3s ease;
}

@keyframes popBadgePulse {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.bubble-hint-pill,
.breath-hint-pill,
.zen-hint-pill,
.rain-hint-pill,
.fluid-hint-pill {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 0.84rem;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(28, 45, 36, 0.05);
  text-align: center;
}

/* =============================================================
   2. 4-7-8 & BOX GUIDED BREATHING SANCTUARY
   ============================================================= */
.breath-sanctuary {
  position: relative;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 0;
  box-sizing: border-box;
}

.breath-pattern-selector {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.breath-mode-btn {
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.breath-mode-btn:hover {
  color: var(--text-main);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.breath-mode-btn.active {
  background: var(--accent-primary);
  color: #FFFFFF;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 14px rgba(107, 158, 130, 0.35);
}

.breath-orb-container {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.breath-ambient-aura {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.breath-ambient-aura.aura-outer {
  width: 270px;
  height: 270px;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.18) 0%, rgba(226, 184, 107, 0.08) 50%, transparent 75%);
  animation: breathHaloPulse 6s infinite alternate ease-in-out;
}

.breath-ambient-aura.aura-inner {
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.25) 0%, transparent 70%);
}

@keyframes breathHaloPulse {
  0% { transform: scale(0.88); opacity: 0.4; }
  100% { transform: scale(1.15); opacity: 0.85; }
}

.breath-progress-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 2;
}

.breath-track-bg {
  stroke: var(--border-soft);
  opacity: 0.6;
}

.breath-track-fill {
  stroke: var(--accent-secondary);
  stroke-dasharray: 753.98;
  stroke-dashoffset: 0;
  transition: stroke 0.4s ease;
}

.breath-orb {
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #BFE4D1 0%, var(--accent-primary) 55%, #3B6B52 100%);
  box-shadow: 0 0 50px rgba(107, 158, 130, 0.45), inset 0 2px 10px rgba(255, 255, 255, 0.75), inset 0 -6px 14px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-align: center;
  z-index: 3;
  transform-origin: center center;
  will-change: transform;
}

[data-theme="dark"] .breath-orb {
  background: radial-gradient(circle at 35% 30%, #86B89E 0%, #4D7E64 55%, #1F382B 100%);
  box-shadow: 0 0 50px rgba(107, 158, 130, 0.35), inset 0 2px 8px rgba(255, 255, 255, 0.5), inset 0 -6px 14px rgba(0, 0, 0, 0.4);
}

.breath-inner-light {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 35%;
  height: 25%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.6) 0%, transparent 80%);
  border-radius: 50%;
  pointer-events: none;
}

.breath-text-phase {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  line-height: 1.1;
}

.breath-text-timer {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  opacity: 0.95;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  margin-top: 0.15rem;
}

.breath-instruction-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1.4rem;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(28, 45, 36, 0.04);
}

.breath-prompt-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-main);
  line-height: 1.5;
  font-weight: 500;
}

/* =============================================================
   4. ZEN SAND GARDEN & RIPPLE MAKER
   ============================================================= */
.zen-sanctuary {
  position: relative;
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
}

.zen-tool-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(28, 45, 36, 0.04);
}

.zen-tool-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-right: 0.2rem;
}

.zen-tool-btn {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  background: transparent;
  color: var(--text-main);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.zen-tool-btn:hover {
  background: var(--bg-card);
  border-color: var(--border-soft);
}

.zen-tool-btn.active {
  background: var(--accent-secondary);
  color: #1C1208;
  border-color: var(--accent-secondary);
  box-shadow: 0 2px 8px rgba(226, 184, 107, 0.35);
}

.zen-frame-wrapper {
  position: relative;
  width: 100%;
  height: clamp(360px, 60vh, 440px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Thick wooden frame - top/bottom thicker to create tray illusion */
  border: 5px solid #7B5330;
  border-top: 8px solid #8D6238;
  border-bottom: 10px solid #5C3D1A;
  box-shadow: 0 14px 40px rgba(28, 45, 36, 0.2),
              inset 0 0 30px rgba(110, 78, 45, 0.4),
              inset 3px 3px 12px rgba(0,0,0,0.15),
              0 3px 0 #3D2008;
  background: #E8D5A8;
  touch-action: none;
  cursor: crosshair;
}

[data-theme="dark"] .zen-frame-wrapper {
  border-color: #4A3018;
  border-top-color: #5C3D1F;
  border-bottom-color: #2E1C08;
  background: #2E2416;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 35px rgba(0, 0, 0, 0.7), inset 3px 3px 12px rgba(0,0,0,0.3);
}

.zen-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.zen-stones-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.zen-stone-item {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 46% 54% 50% 48%;
  box-shadow: 0 6px 14px rgba(28, 45, 36, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  animation: stoneDropPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stoneDropPop {
  0% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* =============================================================
   5. MISTY RAIN WINDOW & WIPE CANVAS
   ============================================================= */
.rain-sanctuary {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: clamp(380px, 62vh, 460px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Window frame: thick cream-colored frame with inner shadow depth */
  border: 12px solid #D8C8A8;
  border-top: 10px solid #E0D0B0;
  border-bottom: 14px solid #BCA888;
  box-shadow: 0 16px 40px rgba(28, 45, 36, 0.2),
              inset 0 0 0 2px rgba(255, 255, 255, 0.4),
              inset 0 2px 8px rgba(0,0,0,0.12),
              0 4px 0 #A89070;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-sizing: border-box;
}

/* Cross-bar window divider overlay */
.rain-sanctuary::before {
  content: '';
  position: absolute;
  z-index: 10;
  pointer-events: none;
  /* Vertical center bar */
  background:
    linear-gradient(to right,
      transparent calc(50% - 6px),
      rgba(200, 180, 150, 0.7) calc(50% - 6px),
      rgba(220, 200, 170, 0.9) calc(50%),
      rgba(200, 180, 150, 0.7) calc(50% + 6px),
      transparent calc(50% + 6px)
    ),
    linear-gradient(to bottom,
      transparent calc(42% - 5px),
      rgba(200, 180, 150, 0.7) calc(42% - 5px),
      rgba(220, 200, 170, 0.9) calc(42%),
      rgba(200, 180, 150, 0.7) calc(42% + 5px),
      transparent calc(42% + 5px)
    );
  inset: 0;
}

.rain-garden-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.45s ease-in-out;
}

.rain-garden-backdrop[style*="url"] .rain-garden-flora,
.rain-garden-backdrop[style*="url"] .rain-bokeh-halo,
.rain-garden-backdrop.has-scenery .rain-garden-flora,
.rain-garden-backdrop.has-scenery .rain-bokeh-halo {
  display: none !important;
}

.rain-sky-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(59, 107, 84, 0.4) 0%, rgba(38, 74, 56, 0.55) 50%, rgba(21, 43, 32, 0.7) 100%);
}

[data-theme="dark"] .rain-sky-gradient {
  background: radial-gradient(ellipse at 50% 30%, rgba(29, 58, 44, 0.6) 0%, rgba(18, 36, 28, 0.75) 50%, rgba(10, 20, 15, 0.85) 100%);
}

.rain-bokeh-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.45;
  animation: bokehFloat 8s infinite alternate ease-in-out;
}

.rain-bokeh-halo.bokeh-1 {
  width: 180px;
  height: 180px;
  top: 15%;
  left: 20%;
  background: radial-gradient(circle, #E2B86B 0%, transparent 70%);
}

.rain-bokeh-halo.bokeh-2 {
  width: 220px;
  height: 220px;
  bottom: 10%;
  right: 15%;
  background: radial-gradient(circle, #86B89E 0%, transparent 70%);
  animation-delay: 4s;
}

@keyframes bokehFloat {
  0% { transform: translateY(0) scale(0.9); }
  100% { transform: translateY(-20px) scale(1.15); }
}

.rain-garden-flora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rain-garden-flora.flora-layer-back {
  background: radial-gradient(circle at 18% 85%, #2D543F 0%, transparent 55%),
              radial-gradient(circle at 82% 80%, #224231 0%, transparent 60%);
  opacity: 0.75;
}

.rain-garden-flora.flora-layer-front {
  background: radial-gradient(circle at 35% 95%, #407559 0%, transparent 50%),
              radial-gradient(circle at 65% 92%, #326048 0%, transparent 55%);
}

.rain-mist-ambient-veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.rain-window-pane {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
  cursor: grab;
}

.rain-window-pane:active {
  cursor: grabbing;
}

.rain-drops-canvas,
.rain-mist-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.rain-drops-canvas {
  z-index: 1;
  pointer-events: none;
}

.rain-mist-canvas {
  z-index: 2;
  touch-action: none;
}

.rain-glass-glint {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 160%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
  z-index: 3;
}

/* Architectural Window Frame & Mullion Overlay for Rain Window */
.rain-window-frame-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.rain-frame-border {
  position: absolute;
  inset: 0;
  border: 12px solid #384A3E;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 -3px 8px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(18, 29, 23, 0.2);
}

[data-theme="dark"] .rain-frame-border {
  border-color: #1E2E25;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.rain-mullion-v {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #44594B 0%, #2D3D33 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.rain-mullion-h {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #44594B 0%, #2D3D33 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.rain-window-sill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(180deg, #4D6454 0%, #35463A 100%);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25), inset 0 2px 3px rgba(255, 255, 255, 0.2);
}

/* =============================================================
   6. BOTANICAL FLOW & KINETIC SWIRLS
   ============================================================= */
.fluid-sanctuary {
  position: relative;
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
}

.fluid-palette-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(28, 45, 36, 0.04);
}

.palette-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-right: 0.2rem;
}

.palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  background: transparent;
  color: var(--text-main);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.palette-chip:hover {
  background: var(--bg-card);
  border-color: var(--border-soft);
}

.palette-chip.active {
  background: var(--accent-primary);
  color: #FFFFFF;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 10px rgba(107, 158, 130, 0.35);
}

.palette-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-dew { background: #6B9E82; box-shadow: 0 0 6px #6B9E82; }
.dot-blossom { background: #E06A55; box-shadow: 0 0 6px #E06A55; }
.dot-forest { background: #4ECCA3; box-shadow: 0 0 6px #4ECCA3; }

.fluid-canvas-container {
  position: relative;
  width: 100%;
  height: clamp(380px, 62vh, 460px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1.5px solid rgba(107, 158, 130, 0.3);
  box-shadow: 0 12px 32px rgba(28, 45, 36, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  background: #111E18;
  touch-action: none;
  cursor: crosshair;
}

[data-theme="light"] .fluid-canvas-container {
  background: #F4F8F5;
  box-shadow: 0 12px 32px rgba(28, 45, 36, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.fluid-ambient-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(107, 158, 130, 0.06) 0%, transparent 70%);
}

@media (max-width: 600px) {
  .bubble-grid-wrap {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 8px;
    padding: 0.4rem;
  }
  .bubble-cell {
    max-width: 58px;
  }
  .breath-orb-container {
    width: 240px;
    height: 240px;
  }
  .breath-orb {
    width: 150px;
    height: 150px;
  }
  .breath-text-phase {
    font-size: 1.25rem;
  }
  .breath-text-timer {
    font-size: 1.4rem;
  }
}

/* -------------------------------------------------------------
   6. AMBIENT SOUNDSCAPE MIXER PAGE
   ------------------------------------------------------------- */
.mixer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.sound-track-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all var(--transition-normal);
}

.sound-track-card.active {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
  background: var(--bg-card-hover);
}

.track-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.track-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.track-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.track-title {
  font-size: 1rem;
  font-weight: 700;
}

.track-toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
}

.track-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border-soft);
  transition: .3s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .toggle-slider {
  background-color: var(--accent-primary);
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.volume-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.volume-range-input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--bg-surface);
  border-radius: 3px;
  outline: none;
}

.volume-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.volume-val-display {
  font-size: 0.8rem;
  font-weight: 700;
  width: 32px;
  text-align: right;
  color: var(--text-muted);
}

/* Master Mixer Bar */
.master-mixer-bar {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.master-controls-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.master-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb), 0.35);
  transition: transform var(--transition-normal);
}

.master-play-btn:hover {
  transform: scale(1.08);
}

/* -------------------------------------------------------------
   7. ACTIVITY INFO & SCIENCE SIDEBAR / SECTIONS
   ------------------------------------------------------------- */
.activity-sidebar {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.activity-meta-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 1.25rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  overflow: hidden;
}

.science-callout-box {
  background: var(--accent-primary-light);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}

.science-callout-box h4 {
  color: var(--accent-primary);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.science-callout-box p {
  font-size: 0.88rem;
  margin-bottom: 0;
  color: var(--text-main);
  line-height: 1.5;
}

.instruction-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.instruction-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-secondary-light);
  color: var(--accent-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* =============================================================
   7. CPU STRESS TASK MANAGER (Digital Reset & Focus Tool)
   ============================================================= */
.cpu-sanctuary {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-sizing: border-box;
}

.cpu-status-pill-val.high {
  color: #E06A55 !important;
}

.cpu-status-pill-val.medium {
  color: #E2B86B !important;
}

.cpu-status-pill-val.calm {
  color: #6B9E82 !important;
}

/* Digital CPU Chip System Monitor HUD */
.cpu-hud-card {
  position: relative;
  background: linear-gradient(135deg, #182820 0%, #0F1C16 100%);
  border: 2px solid rgba(107, 158, 130, 0.4);
  border-radius: 20px;
  padding: 1.4rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

[data-theme="light"] .cpu-hud-card {
  background: linear-gradient(135deg, #F0F6F2 0%, #E3EEE7 100%);
  border-color: rgba(107, 158, 130, 0.5);
  box-shadow: 0 8px 30px rgba(28, 45, 36, 0.08), inset 0 1px 3px rgba(255, 255, 255, 0.8);
}

.cpu-chip-pins {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
}

.cpu-chip-pins.pins-top,
.cpu-chip-pins.pins-bottom {
  left: 20px;
  right: 20px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #E2B86B 0px, #E2B86B 6px, transparent 6px, transparent 12px);
}
.cpu-chip-pins.pins-top { top: 2px; }
.cpu-chip-pins.pins-bottom { bottom: 2px; }

.cpu-chip-pins.pins-left,
.cpu-chip-pins.pins-right {
  top: 20px;
  bottom: 20px;
  width: 5px;
  background: repeating-linear-gradient(180deg, #E2B86B 0px, #E2B86B 6px, transparent 6px, transparent 12px);
}
.cpu-chip-pins.pins-left { left: 2px; }
.cpu-chip-pins.pins-right { right: 2px; }

.cpu-hud-main {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.15rem;
  align-items: stretch;
}

/* Left: Digital CPU Silicon Chip & Core Load Monitor */
.cpu-chip-socket {
  background: rgba(18, 30, 24, 0.7);
  border: 1.5px solid rgba(107, 158, 130, 0.35);
  border-radius: 16px;
  padding: 0.9rem;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .cpu-chip-socket {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(28, 45, 36, 0.05);
}

.cpu-chip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(107, 158, 130, 0.3);
}

.cpu-chip-brand {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
}

.cpu-chip-model {
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-secondary);
  background: rgba(226, 184, 107, 0.15);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.cpu-chip-core-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.cpu-digital-meter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpu-radial-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpu-radial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}

.cpu-radial-bg {
  stroke: var(--border-soft);
  opacity: 0.35;
}

.cpu-radial-bar {
  stroke: #E06A55;
  transition: stroke-dashoffset 0.35s ease, stroke 0.35s ease;
  filter: drop-shadow(0 0 6px currentColor);
}

.cpu-radial-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.cpu-percent-number {
  font-family: 'Outfit', monospace;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.cpu-percent-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Live Core Activity Sparkline Box */
.cpu-graph-container {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  box-sizing: border-box;
}

.cpu-graph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.cpu-graph-title {
  letter-spacing: 0.05em;
}

.cpu-graph-freq {
  font-family: 'Outfit', sans-serif;
  color: var(--text-main);
  font-weight: 800;
}

.cpu-sparkline-canvas {
  width: 100%;
  height: 42px;
  display: block;
}

/* Right: Telemetry Grid */
.cpu-telemetry-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-content: space-between;
}

.cpu-tele-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  box-shadow: 0 2px 6px rgba(28, 45, 36, 0.03);
  transition: border-color 0.2s ease;
}

.cpu-tele-icon {
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cpu-fan-blade-icon svg {
  color: var(--text-muted);
}

@keyframes cpuFanSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cpu-tele-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cpu-tele-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.cpu-tele-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.cpu-tele-value.high {
  color: #E06A55;
}

.cpu-tele-value.medium {
  color: #E2B86B;
}

.cpu-tele-value.calm {
  color: #6B9E82;
}

.cpu-tele-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active Tasks List Section */
.cpu-task-manager-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.cpu-task-list-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cpu-list-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cpu-pulse-warning {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cpu-pulse-warning.high {
  background: #E06A55;
  animation: pulseDotWarn 1.2s infinite ease-in-out;
}

.cpu-pulse-warning.medium {
  background: #E2B86B;
  animation: pulseDotWarn 1.6s infinite ease-in-out;
}

.cpu-pulse-warning.calm {
  background: #6B9E82;
  animation: pulseDotZen 2s infinite ease-in-out;
}

.cpu-list-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.cpu-list-instruction {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.cpu-task-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}

.cpu-task-item {
  background: var(--bg-card);
  border: 1.5px solid var(--border-soft);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  box-shadow: 0 2px 8px rgba(28, 45, 36, 0.04);
  transition: transform 0.22s var(--ease-smooth), opacity 0.22s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: cpuTaskSlideIn 0.35s var(--ease-smooth) both;
}

@keyframes cpuTaskSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cpu-task-item:hover {
  border-color: rgba(107, 158, 130, 0.4);
  box-shadow: 0 6px 16px rgba(28, 45, 36, 0.08);
  transform: translateY(-1px);
}

.cpu-task-item.terminating {
  transform: scale(0.94) translateX(25px);
  opacity: 0;
  pointer-events: none;
  filter: blur(1.5px);
}

.cpu-task-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cpu-task-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.cpu-task-top-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cpu-task-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.cpu-task-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}

.cpu-task-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.35;
}

.cpu-task-meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.cpu-meta-metric strong {
  color: var(--text-main);
}

/* Touch-friendly End Task Button (Minimum 48px height) */
.cpu-end-task-btn {
  min-height: 48px;
  min-width: 112px;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(224, 106, 85, 0.12) 0%, rgba(224, 106, 85, 0.05) 100%) !important;
  color: #E06A55 !important;
  border: 1.5px solid rgba(224, 106, 85, 0.35) !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(224, 106, 85, 0.12);
}

.cpu-end-task-btn:hover {
  background: #E06A55 !important;
  color: #FFFFFF !important;
  border-color: #E06A55 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(224, 106, 85, 0.38);
}

.cpu-end-task-btn:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 2px 6px rgba(224, 106, 85, 0.2);
}

.cpu-end-btn-icon {
  font-size: 0.85rem;
  font-weight: 900;
}

/* Complete Restored State Card */
.cpu-restored-card {
  position: relative;
  width: 100%;
  background: var(--bg-card);
  border: 2px solid var(--accent-primary);
  border-radius: 20px;
  padding: 2rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(107, 158, 130, 0.18);
  overflow: hidden;
}

.cpu-restored-card[hidden] {
  display: none !important;
}

.cpu-restored-aura {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.22) 0%, transparent 70%);
  animation: cpuRestoredAura 3s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes cpuRestoredAura {
  0% { transform: scale(0.8); opacity: 0.4; }
  100% { transform: scale(1.2); opacity: 0.9; }
}

.cpu-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 480px;
}

.cpu-restored-icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary-light), rgba(107, 158, 130, 0.3));
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(107, 158, 130, 0.25);
  animation: cpuRestoredPop 0.5s var(--ease-smooth) both;
}

@keyframes cpuRestoredPop {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.cpu-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.cpu-restored-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.cpu-restored-stats-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.35rem;
}

.cpu-mini-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border: 1px solid rgba(107, 158, 130, 0.3);
}

.cpu-reboot-btn {
  margin-top: 0.75rem;
  min-height: 52px;
  padding: 0.75rem 1.8rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #6B9E82 0%, #4D7E64 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(77, 126, 100, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.cpu-reboot-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(77, 126, 100, 0.45);
}

.cpu-reboot-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* =============================================================
   7. THE LOST CUB TRAIL (Nature Reconnection Sanctuary)
   ============================================================= */
.cub-trail-sanctuary {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 480px;
  background: radial-gradient(ellipse at 50% 25%, #EFF7F2 0%, #DFEEE5 55%, #CDE3D6 100%);
  border-radius: var(--radius-xl);
  border: 1.5px solid rgba(107, 158, 130, 0.3);
  box-shadow: inset 0 2px 10px rgba(28, 45, 36, 0.06), 0 10px 30px rgba(107, 158, 130, 0.12);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-sizing: border-box;
}

[data-theme="dark"] .cub-trail-sanctuary {
  background: radial-gradient(ellipse at 50% 25%, #182C22 0%, #112019 55%, #0A140F 100%);
  border-color: rgba(107, 158, 130, 0.25);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Forest Glade Ambient Backdrop */
.cub-forest-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.88;
  mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, black 50%, rgba(0,0,0,0.5) 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, black 50%, rgba(0,0,0,0.5) 80%, transparent 100%);
  filter: contrast(0.96) saturate(1.08) brightness(0.98);
  transition: background-image 0.45s ease-in-out;
}

[data-theme="dark"] .cub-forest-backdrop {
  opacity: 0.65;
  filter: contrast(1.05) saturate(1.1) brightness(0.8);
}

.forest-sunbeam {
  position: absolute;
  top: -20%;
  width: 120px;
  height: 140%;
  background: linear-gradient(180deg, rgba(255, 248, 220, 0.32) 0%, rgba(226, 184, 107, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(24deg);
  filter: blur(14px);
  pointer-events: none;
  animation: sunbeamPulse 7s infinite alternate ease-in-out;
}

.forest-sunbeam.beam-1 {
  left: 20%;
  animation-delay: 0s;
}

.forest-sunbeam.beam-2 {
  left: 60%;
  animation-delay: 3.5s;
}

@keyframes sunbeamPulse {
  0% { opacity: 0.35; transform: rotate(22deg) translateX(0); }
  100% { opacity: 0.75; transform: rotate(26deg) translateX(15px); }
}

[data-theme="dark"] .forest-sunbeam {
  background: linear-gradient(180deg, rgba(107, 158, 130, 0.2) 0%, rgba(226, 184, 107, 0.08) 50%, rgba(0, 0, 0, 0) 100%);
}

.forest-canopy-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: radial-gradient(ellipse at 50% -20%, rgba(45, 82, 60, 0.25) 0%, transparent 80%);
  pointer-events: none;
}

[data-theme="dark"] .forest-canopy-top {
  background: radial-gradient(ellipse at 50% -20%, rgba(75, 125, 95, 0.2) 0%, transparent 80%);
}

.forest-mossy-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(0deg, rgba(74, 110, 89, 0.18) 0%, transparent 100%);
  pointer-events: none;
}

/* Tree Silhouettes in background */
.forest-tree-silhouette {
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 280px;
  pointer-events: none;
  opacity: 0.15;
}

.forest-tree-silhouette.tree-left {
  left: -20px;
  background: radial-gradient(circle at 40% 40%, #2D523C 0%, transparent 70%);
}

.forest-tree-silhouette.tree-right {
  right: -20px;
  background: radial-gradient(circle at 60% 30%, #2D523C 0%, transparent 70%);
}

[data-theme="dark"] .forest-tree-silhouette {
  opacity: 0.25;
}

/* Interactive Leaf & Trail Canvas */
.cub-trail-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
  cursor: grab;
  cursor: -webkit-grab;
}

.cub-trail-canvas:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* Characters & Actors Layer */
.cub-actors-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Baby Cub Actor */
.actor-cub-wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: left, top, transform;
}

.cub-actor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cubIdleBreath 2.8s infinite ease-in-out;
  transform-origin: center bottom;
}

.cub-actor.trotting {
  animation: cubTrotMotion 0.32s infinite alternate ease-in-out !important;
}

.cub-actor.reunited {
  animation: cubJoyBounce 0.5s infinite alternate ease-in-out !important;
}

@keyframes cubIdleBreath {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.03, 0.97) translateY(-2px); }
}

@keyframes cubTrotMotion {
  0% { transform: rotate(-4deg) translateY(-4px) scale(1.02); }
  100% { transform: rotate(4deg) translateY(0px) scale(0.98); }
}

@keyframes cubJoyBounce {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.12) translateY(-10px); }
}

.cub-svg {
  filter: drop-shadow(0 6px 12px rgba(18, 29, 23, 0.2));
  transition: filter 0.3s ease;
}

/* Speech bubbles */
.cub-speech-bubble,
.parent-speech-bubble {
  position: absolute;
  top: -24px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  opacity: 0.92;
  animation: bubbleFloat 2.4s infinite alternate ease-in-out;
  pointer-events: none;
}

.cub-speech-bubble {
  left: 50%;
  transform: translateX(-50%);
}

.parent-speech-bubble {
  right: 10%;
  transform: translateY(0);
}

@keyframes bubbleFloat {
  0% { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, -4px); }
}

/* Parent Bear Actor */
.actor-parent-wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.parent-bear-actor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: parentCalmSway 4s infinite ease-in-out;
  transform-origin: center bottom;
}

@keyframes parentCalmSway {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.02, 0.99) rotate(1.2deg); }
}

.parent-bear-actor.embracing {
  animation: parentEmbrace 0.8s infinite alternate ease-in-out !important;
}

@keyframes parentEmbrace {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.05) translateY(-3px); }
}

.parent-bear-svg {
  filter: drop-shadow(0 8px 18px rgba(18, 29, 23, 0.22));
}

.parent-welcoming-arm {
  transform-origin: 55px 75px;
  animation: welcomingWave 3s infinite alternate ease-in-out;
}

.parent-welcoming-arm.arm-left {
  animation-delay: 0s;
}

.parent-welcoming-arm.arm-right {
  animation-delay: 1.5s;
}

@keyframes welcomingWave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-6deg); }
}

/* Reunion Radial Light Bloom & Sparkles */
.cub-reunion-bloom {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cub-reunion-bloom.active {
  opacity: 1;
  visibility: visible;
}

.bloom-inner-radiance {
  position: absolute;
  width: 320px;
  height: 320px;
  right: 0%;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.45) 0%, rgba(107, 158, 130, 0.25) 45%, transparent 75%);
  animation: bloomPulse 2.2s infinite alternate ease-in-out;
}

@keyframes bloomPulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.35); opacity: 1; }
}

/* Floating Heart / Sparkle Particles */
.floating-sparkle {
  position: absolute;
  font-size: 1.25rem;
  pointer-events: none;
  animation: sparkleRise 2.4s ease-out forwards;
}

@keyframes sparkleRise {
  0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
  25% { opacity: 1; transform: translate(var(--dx, 0px), -25px) scale(1.15) rotate(15deg); }
  100% { opacity: 0; transform: translate(calc(var(--dx, 0px) * 1.8), -90px) scale(0.7) rotate(35deg); }
}

/* Progress Pill Value */
.cub-progress-val {
  font-family: 'Outfit', sans-serif;
  color: var(--accent-primary);
  font-weight: 800;
  transition: color 0.3s ease;
}

.cub-progress-val.complete {
  color: #E2B86B !important;
}

/* Interactive Hint Overlay */
.cub-trail-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: 0 4px 14px rgba(18, 29, 23, 0.08);
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  max-width: 90%;
}

.cub-trail-hint.hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
}

/* Reunited Safe Celebration Card */
.cub-reunited-card {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  animation: reunitedCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-theme="dark"] .cub-reunited-card {
  background: rgba(18, 29, 23, 0.94);
}

.cub-reunited-card[hidden] {
  display: none !important;
}

@keyframes reunitedCardIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

.cub-reunited-aura {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.28) 0%, transparent 70%);
  animation: cubRestoredAura 3s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes cubRestoredAura {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 0.9; }
}

.cub-reunited-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 480px;
}

.cub-reunited-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(226, 184, 107, 0.25), rgba(107, 158, 130, 0.3));
  border: 2px solid #E2B86B;
  color: #E2B86B;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.35);
  animation: cubIconPop 0.55s var(--ease-smooth) both;
}

@keyframes cubIconPop {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.cub-reunited-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.cub-reunited-msg {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.cub-reunited-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}

.cub-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border: 1px solid rgba(107, 158, 130, 0.3);
}

.cub-replay-btn {
  margin-top: 0.75rem;
  min-height: 50px;
  padding: 0.75rem 1.8rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #6B9E82 0%, #4D7E64 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(77, 126, 100, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.cub-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(77, 126, 100, 0.45);
}

.cub-replay-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* =============================================================
   8. THE GENTLE BLOOM (Nurturing Botanical Sanctuary)
   ============================================================= */
.bloom-sanctuary {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 500px;
  background: radial-gradient(ellipse at 50% 28%, #FAF6ED 0%, #EEF4EE 50%, #DDECE3 100%);
  border-radius: var(--radius-xl);
  border: 1.5px solid rgba(226, 184, 107, 0.3);
  box-shadow: inset 0 2px 10px rgba(28, 45, 36, 0.05), 0 10px 30px rgba(107, 158, 130, 0.12);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .bloom-sanctuary {
  background: radial-gradient(ellipse at 50% 28%, #1E2B20 0%, #131E15 50%, #0C150E 100%);
  border-color: rgba(226, 184, 107, 0.25);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Ambient Greenhouse Backdrop */
.bloom-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.82;
  mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, black 50%, rgba(0,0,0,0.45) 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, black 50%, rgba(0,0,0,0.45) 80%, transparent 100%);
  filter: contrast(0.96) saturate(1.1) brightness(0.98);
}

[data-theme="dark"] .bloom-backdrop {
  opacity: 0.62;
  filter: contrast(1.05) saturate(1.1) brightness(0.78);
}

.bloom-sunbeam {
  position: absolute;
  top: -25%;
  height: 150%;
  background: linear-gradient(180deg, rgba(255, 248, 220, 0.4) 0%, rgba(226, 184, 107, 0.15) 45%, rgba(255, 255, 255, 0) 100%);
  filter: blur(18px);
  pointer-events: none;
  animation: bloomSunbeamSway 8s infinite alternate ease-in-out;
}

.bloom-sunbeam.beam-center {
  left: 35%;
  width: 140px;
  transform: rotate(12deg);
}

.bloom-sunbeam.beam-left {
  left: 10%;
  width: 100px;
  transform: rotate(24deg);
  animation-delay: 2s;
}

.bloom-sunbeam.beam-right {
  left: 65%;
  width: 110px;
  transform: rotate(-10deg);
  animation-delay: 4s;
}

@keyframes bloomSunbeamSway {
  0% { opacity: 0.35; transform: rotate(10deg) translateX(-10px); }
  100% { opacity: 0.75; transform: rotate(16deg) translateX(10px); }
}

[data-theme="dark"] .bloom-sunbeam {
  background: linear-gradient(180deg, rgba(226, 184, 107, 0.18) 0%, rgba(107, 158, 130, 0.1) 45%, rgba(0, 0, 0, 0) 100%);
}

.bloom-canopy-halo {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.45) 0%, rgba(226, 184, 107, 0.15) 50%, transparent 80%);
  pointer-events: none;
}

.bloom-garden-mist {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(0deg, rgba(107, 158, 130, 0.14) 0%, transparent 100%);
  pointer-events: none;
}

/* Glowing Pollen Canvas */
.bloom-pollen-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Flower Stage Layout */
.bloom-flower-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Unified Botanical Plant Assembly (Stem + Flower Head) */
.bloom-plant-assembly {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 3;
}

/* Natural Botanical Stem & Leaves attached right below the flower base */
.bloom-stem-svg {
  position: absolute;
  top: 155px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 285px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  filter: drop-shadow(0 4px 8px rgba(18, 29, 23, 0.1));
}

.bloom-leaf.leaf-left {
  transform-origin: 48px 120px;
  animation: leafBreezeLeft 4.5s infinite alternate ease-in-out;
}

.bloom-leaf.leaf-right {
  transform-origin: 49px 155px;
  animation: leafBreezeRight 5s infinite alternate ease-in-out;
}

@keyframes leafBreezeLeft {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-5deg); }
}

@keyframes leafBreezeRight {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(6deg); }
}

/* Flower Head Assembly positioned right at the top of the stem */
.flower-head-wrapper {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 4;
}

/* Flower Radial Warmth Aura */
.flower-aura-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.45) 0%, rgba(226, 184, 107, 0.15) 50%, transparent 75%);
  filter: blur(12px);
  pointer-events: none;
  opacity: 0.4;
  transform: scale(0.9);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Circular Progress Ring */
.bloom-progress-svg {
  position: absolute;
  width: 170px;
  height: 170px;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 6;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.bloom-ring-fill {
  stroke-dasharray: 452.38; /* 2 * PI * 72 */
  stroke-dashoffset: 452.38;
  transition: stroke-dashoffset 0.08s linear, stroke 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(226, 184, 107, 0.6));
}

/* Petal Tiers & Transforms */
.flower-petals-cluster {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  perspective: 600px;
}

.petal-tier {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.petal {
  position: absolute;
  width: 52px;
  height: 105px;
  transform-origin: 50% 100%;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.petal-leaf {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  box-shadow: 0 4px 12px rgba(18, 29, 23, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* Tier Specific Coloring & Gradients */
.tier-outer .petal-leaf {
  background: linear-gradient(180deg, #FFF6E5 0%, #F5DCA8 55%, #E2B86B 100%);
  filter: drop-shadow(0 4px 10px rgba(226, 184, 107, 0.25));
}

.tier-mid .petal-leaf {
  width: 46px;
  height: 90px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBEADB 50%, #E8A882 100%);
  filter: drop-shadow(0 3px 8px rgba(232, 168, 130, 0.2));
}

.tier-inner .petal-leaf {
  width: 38px;
  height: 72px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF0D6 60%, #E2B86B 100%);
}

[data-theme="dark"] .tier-outer .petal-leaf {
  background: linear-gradient(180deg, #FFF0D4 0%, #E2B86B 60%, #9C6B38 100%);
}

[data-theme="dark"] .tier-mid .petal-leaf {
  background: linear-gradient(180deg, #FFEFE0 0%, #D48B6A 60%, #7E4226 100%);
}

/* Golden Pistil & Stamen Center Core */
.flower-golden-core {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: transform 0.2s ease;
}

.core-radial-glow {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE49E 0%, #E2B86B 65%, transparent 100%);
  filter: blur(6px);
  animation: corePulse 3s infinite alternate ease-in-out;
}

@keyframes corePulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

.core-pistil-center {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFF5D6 0%, #E2B86B 65%, #9E7428 100%);
  box-shadow: 0 2px 8px rgba(158, 116, 40, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  z-index: 2;
}

.core-stamen-cluster {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: scale(0.5);
}

.stamen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 18px;
  background: #E2B86B;
  transform-origin: 50% 100%;
}

.stamen::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -2.5px;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: #FFEAA7;
  box-shadow: 0 0 5px #FFEAA7;
}

.st-1 { transform: translate(-50%, -100%) rotate(0deg); }
.st-2 { transform: translate(-50%, -100%) rotate(45deg); }
.st-3 { transform: translate(-50%, -100%) rotate(90deg); }
.st-4 { transform: translate(-50%, -100%) rotate(135deg); }
.st-5 { transform: translate(-50%, -100%) rotate(180deg); }
.st-6 { transform: translate(-50%, -100%) rotate(225deg); }
.st-7 { transform: translate(-50%, -100%) rotate(270deg); }
.st-8 { transform: translate(-50%, -100%) rotate(315deg); }

/* Touch Target Button */
.flower-bud-target {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.flower-bud-target:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-primary);
}

.bud-touch-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px dashed rgba(226, 184, 107, 0.4);
  animation: budRippleSpin 12s infinite linear;
  pointer-events: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

@keyframes budRippleSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

.flower-bud-target:hover .bud-touch-ripple {
  border-color: rgba(226, 184, 107, 0.8);
  transform: scale(1.12);
}

.bud-touch-prompt {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Status Pill Descriptor */
.bloom-status-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  transition: color 0.3s ease;
}

.bloom-status-val.bud {
  color: var(--text-muted) !important;
}

.bloom-status-val.blooming {
  color: #6B9E82 !important;
}

.bloom-status-val.full {
  color: #E2B86B !important;
}

/* Hint Pill */
.bloom-hint-pill {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: 0 4px 14px rgba(18, 29, 23, 0.08);
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  max-width: 90%;
}

.bloom-hint-pill.hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
}

/* Full Bloom Restored State Modal Card */
.bloom-restored-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  animation: bloomCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-theme="dark"] .bloom-restored-card {
  background: rgba(18, 29, 23, 0.94);
}

.bloom-restored-card[hidden] {
  display: none !important;
}

@keyframes bloomCardIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

.bloom-restored-aura {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.32) 0%, transparent 70%);
  animation: bloomRestoredAura 3s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes bloomRestoredAura {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 0.95; }
}

.bloom-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 480px;
}

.bloom-restored-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(226, 184, 107, 0.3), rgba(107, 158, 130, 0.3));
  border: 2px solid #E2B86B;
  color: #E2B86B;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.35);
  animation: bloomIconPop 0.55s var(--ease-smooth) both;
}

@keyframes bloomIconPop {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.bloom-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.bloom-restored-msg {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.bloom-restored-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}

.bloom-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(226, 184, 107, 0.15);
  color: #B58428;
  border: 1px solid rgba(226, 184, 107, 0.35);
}

[data-theme="dark"] .bloom-badge {
  color: #E2B86B;
}

.bloom-replay-btn {
  margin-top: 0.75rem;
  min-height: 50px;
  padding: 0.75rem 1.8rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #E2B86B 0%, #C29845 100%) !important;
  color: #1C2D24 !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.bloom-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(226, 184, 107, 0.55);
}

.bloom-replay-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* -------------------------------------------------------------
   7. THE HILL CLIMB CARGO TRUCK SANCTUARY
   ------------------------------------------------------------- */
.truck-sanctuary {
  position: relative;
  width: 100%;
  height: clamp(400px, 80vw, 480px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #E6F0EA 0%, #D4E6DC 40%, #C4DDD0 70%, #ABC9B9 100%);
  border: 1px solid rgba(107, 158, 130, 0.25);
  box-shadow: inset 0 2px 10px rgba(18, 29, 23, 0.05), 0 8px 30px rgba(107, 158, 130, 0.12);
  user-select: none;
  touch-action: pan-y;
}

[data-theme="dark"] .truck-sanctuary {
  background: linear-gradient(180deg, #13221B 0%, #192D23 40%, #1E382C 70%, #182C22 100%);
  border-color: rgba(107, 158, 130, 0.35);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Mountain Panorama Backdrop */
.truck-panorama-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.45s ease-in-out;
}

.truck-panorama-backdrop[style*="url"] .mountain-ridge,
.truck-panorama-backdrop[style*="url"] .mountain-pines,
.truck-panorama-backdrop[style*="url"] .mountain-sun,
.truck-panorama-backdrop[style*="url"] .mountain-sunbeam,
.truck-panorama-backdrop[style*="url"] .valley-meadow-right,
.truck-panorama-backdrop.has-scenery .mountain-ridge,
.truck-panorama-backdrop.has-scenery .mountain-pines,
.truck-panorama-backdrop.has-scenery .mountain-sun,
.truck-panorama-backdrop.has-scenery .mountain-sunbeam,
.truck-panorama-backdrop.has-scenery .valley-meadow-right {
  display: none !important;
}

.mountain-sun {
  position: absolute;
  top: 15%;
  right: 18%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFEAA7 20%, rgba(226, 184, 107, 0.6) 60%, rgba(226, 184, 107, 0) 100%);
  filter: blur(2px);
  animation: mountainSunPulse 4s infinite alternate ease-in-out;
}

@keyframes mountainSunPulse {
  0% { transform: scale(0.95); opacity: 0.85; }
  100% { transform: scale(1.08); opacity: 1; }
}

.mountain-sunbeam {
  position: absolute;
  top: -10%;
  width: 140px;
  height: 120%;
  background: linear-gradient(135deg, rgba(255, 245, 210, 0.25) 0%, rgba(255, 245, 210, 0) 80%);
  transform: rotate(-25deg);
  pointer-events: none;
}

.mountain-sunbeam.beam-1 {
  right: 25%;
}

.mountain-sunbeam.beam-2 {
  right: 45%;
  width: 180px;
  opacity: 0.5;
}

.mountain-ridge {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.mountain-ridge.ridge-far {
  height: 60%;
  background: linear-gradient(180deg, rgba(162, 194, 178, 0.45) 0%, rgba(134, 173, 153, 0.6) 100%);
  clip-path: polygon(0% 65%, 25% 42%, 48% 55%, 72% 35%, 100% 60%, 100% 100%, 0% 100%);
}

[data-theme="dark"] .mountain-ridge.ridge-far {
  background: linear-gradient(180deg, rgba(30, 52, 42, 0.6) 0%, rgba(22, 40, 32, 0.8) 100%);
}

.mountain-ridge.ridge-mid {
  height: 48%;
  background: linear-gradient(180deg, rgba(124, 169, 145, 0.7) 0%, rgba(95, 140, 116, 0.85) 100%);
  clip-path: polygon(0% 80%, 30% 50%, 60% 70%, 85% 45%, 100% 75%, 100% 100%, 0% 100%);
}

[data-theme="dark"] .mountain-ridge.ridge-mid {
  background: linear-gradient(180deg, rgba(25, 45, 36, 0.8) 0%, rgba(18, 34, 27, 0.95) 100%);
}

/* Winding Mountain Road Slope */
.hill-road-slope {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 52%;
  background: linear-gradient(180deg, #A88665 0%, #8C6A48 40%, #6E4F32 100%);
  clip-path: polygon(0% 72%, 28% 52%, 58% 38%, 82% 52%, 100% 66%, 100% 100%, 0% 100%);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .hill-road-slope {
  background: linear-gradient(180deg, #5C4430 0%, #443222 40%, #2E2116 100%);
}

/* Valley Rolling Meadow on Right */
.valley-meadow-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 42%;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.85) 0%, rgba(82, 130, 104, 0.95) 100%);
  clip-path: polygon(15% 100%, 35% 65%, 65% 58%, 100% 70%, 100% 100%);
}

[data-theme="dark"] .valley-meadow-right {
  background: linear-gradient(135deg, rgba(35, 65, 50, 0.85) 0%, rgba(22, 48, 36, 0.95) 100%);
}

/* Canvas Particle Layer */
.truck-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Truck Actor Wrapper */
.truck-actor-wrapper {
  position: absolute;
  z-index: 4;
  transform-origin: 50% 90%;
  transition: transform 0.12s ease-out, left 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), bottom 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform, left, bottom;
}

.truck-vehicle-body {
  position: relative;
  display: flex;
  align-items: flex-end;
  transform: translateY(calc(var(--suspension-rise, 0px) * -1));
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.truck-svg {
  display: block;
  filter: drop-shadow(0 8px 16px rgba(18, 29, 23, 0.3));
}

.truck-wheel {
  pointer-events: none;
}

/* Interactive Stack of Crates on Flatbed */
.truck-crates-stack {
  position: absolute;
  left: 20px;
  bottom: 58px;
  width: 134px;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  z-index: 5;
  pointer-events: auto;
}

.truck-crate-item {
  position: relative;
  height: 28px;
  background: var(--crate-bg, #9C6B38);
  border: 1.5px solid rgba(18, 29, 23, 0.45);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.45rem;
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  user-select: none;
  touch-action: manipulation;
  min-height: 28px;
}

.truck-crate-item::after {
  content: '';
  position: absolute;
  inset: -8px; /* Expand touch target area for mobile tap */
}

.truck-crate-item:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 0 2px #E2B86B;
  z-index: 10;
}

.truck-crate-item:active {
  transform: scale(0.96);
}

.crate-content-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.3rem;
  pointer-events: none;
}

.crate-emoji-badge {
  font-size: 0.85rem;
}

.crate-label-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.crate-toss-hint {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Status Pill Modifiers */
.truck-load-val.heavy {
  color: #E06A55;
}
.truck-load-val.medium {
  color: #E2B86B;
}
.truck-load-val.low {
  color: #6B9E82;
}
.truck-load-val.serene {
  color: #6B9E82;
  font-weight: 800;
}

/* Guidance Hint Pill */
.truck-hint-pill {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(107, 158, 130, 0.3);
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: 0 4px 16px rgba(18, 29, 23, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

[data-theme="dark"] .truck-hint-pill {
  background: rgba(25, 42, 34, 0.94);
  border-color: rgba(107, 158, 130, 0.4);
}

.truck-hint-pill.hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
}

/* Tactical Action Bar */
.truck-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.truck-toss-btn {
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #6B9E82 0%, #4A7A60 100%) !important;
  color: #FAF9F5 !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 6px 20px rgba(107, 158, 130, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.2s ease;
  touch-action: manipulation;
}

.truck-toss-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107, 158, 130, 0.5);
}

.truck-toss-btn:active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
}

.truck-toss-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.truck-drop-all-btn {
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1.5px solid var(--border-soft);
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.truck-drop-all-btn:hover {
  background: rgba(226, 184, 107, 0.15);
  color: var(--text-main);
  border-color: #E2B86B;
  transform: translateY(-2px);
}

.truck-drop-all-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* Success / Restored Card */
.truck-restored-card {
  position: absolute;
  inset: 1.25rem;
  margin: auto;
  max-width: 480px;
  max-height: 380px;
  background: var(--bg-card);
  border: 2px solid var(--accent-primary);
  border-radius: 20px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(18, 29, 23, 0.28);
  overflow: hidden;
  z-index: 10;
}

.truck-restored-card[hidden] {
  display: none !important;
}

.truck-restored-aura {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.25) 0%, transparent 70%);
  animation: truckRestoredAura 3s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes truckRestoredAura {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1.15); opacity: 0.85; }
}

.truck-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.truck-restored-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.2), rgba(226, 184, 107, 0.25));
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(107, 158, 130, 0.25);
  animation: truckRestoredPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes truckRestoredPop {
  0% { transform: scale(0.4) rotate(-10deg); opacity: 0; }
  70% { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.truck-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.truck-restored-desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0;
}

.truck-restored-stats-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.2rem;
}

.truck-mini-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(107, 158, 130, 0.12);
  color: var(--accent-primary);
  border: 1px solid rgba(107, 158, 130, 0.25);
}

.truck-replay-btn {
  margin-top: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #6B9E82 0%, #4A7A60 100%) !important;
  color: #FAF9F5 !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(107, 158, 130, 0.35);
  font-family: 'Outfit', sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.truck-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(107, 158, 130, 0.45);
}

.truck-replay-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* -------------------------------------------------------------
   8. MOBILE RESPONSIVE & OVERFLOW FIXES (max-width: 640px)
   ------------------------------------------------------------- */
@media (max-width: 640px) {
  .activity-page-layout {
    gap: 1.5rem;
  }

  .interactive-stage {
    padding: 1rem 0.65rem;
    min-height: 380px;
    border-radius: var(--radius-lg);
  }

  .cpu-hud-main {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .cpu-task-item {
    padding: 0.75rem 0.85rem;
    gap: 0.65rem;
  }

  .cpu-end-task-btn {
    min-height: 48px;
    min-width: 96px;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
  }

  .bubble-grid-wrap {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 0.25rem;
    max-height: 380px;
  }

  .bubble-cell {
    max-width: 44px;
  }

  .stage-controls-top {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .stage-counter-pill {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
  }

  .stage-btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
  }

  .breath-orb-container {
    width: clamp(190px, 55vw, 220px);
    height: clamp(190px, 55vw, 220px);
  }

  .breath-orb {
    width: clamp(125px, 36vw, 150px);
    height: clamp(125px, 36vw, 150px);
  }

  .breath-text-phase {
    font-size: 1.05rem;
  }

  .breath-text-timer {
    font-size: 1.45rem;
  }

  .breath-pattern-selector {
    gap: 0.35rem;
  }

  .breath-mode-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
  }

  .worry-parchment {
    padding: 0.85rem;
  }

  .worry-textarea {
    font-size: 0.95rem;
    min-height: 100px;
  }

  .worry-release-btn {
    width: 100%;
    max-width: 260px;
    padding: 0.75rem 1.25rem;
    font-size: 0.92rem;
  }

  .zen-canvas-wrap,
  .rain-window-container {
    height: 300px;
    border-radius: var(--radius-md);
  }

  .master-mixer-bar {
    padding: 1.15rem 1rem;
    gap: 1rem;
    border-radius: var(--radius-lg);
  }

  .cub-trail-sanctuary {
    height: clamp(360px, 72vw, 440px);
  }

  .actor-parent-wrapper svg {
    width: 82px;
    height: 92px;
  }

  .actor-cub-wrapper svg {
    width: 54px;
    height: 54px;
  }

  .cub-trail-hint {
    font-size: 0.75rem;
    padding: 0.35rem 0.8rem;
    bottom: 0.65rem;
  }

  .cub-reunited-title {
    font-size: 1.25rem;
  }

  .cub-reunited-msg {
    font-size: 0.84rem;
  }

  .bloom-sanctuary {
    height: clamp(380px, 78vw, 460px);
  }

  .flower-head-wrapper {
    top: 165px;
    width: 260px;
    height: 260px;
  }

  .flower-petals-cluster {
    width: 230px;
    height: 230px;
  }

  .bloom-hint-pill {
    font-size: 0.75rem;
    padding: 0.35rem 0.8rem;
    bottom: 0.65rem;
  }

  .bloom-restored-title {
    font-size: 1.25rem;
  }

  .bloom-restored-msg {
    font-size: 0.84rem;
  }

  .truck-sanctuary {
    height: clamp(380px, 78vw, 440px);
  }

  .truck-svg {
    width: 175px;
    height: 95px;
  }

  .truck-crates-stack {
    left: 14px;
    bottom: 46px;
    width: 104px;
  }

  .truck-crate-item {
    height: 24px;
    font-size: 0.68rem;
    padding: 0 0.35rem;
  }

  .truck-hint-pill {
    font-size: 0.74rem;
    padding: 0.35rem 0.8rem;
    bottom: 0.65rem;
  }

  .truck-restored-title {
    font-size: 1.25rem;
  }

  .truck-restored-desc {
    font-size: 0.84rem;
  }
}

@media (max-width: 380px) {
  .cpu-task-item {
    flex-wrap: wrap;
  }

  .cpu-end-task-btn {
    width: 100%;
  }

  .bubble-grid-wrap {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }

  .bubble-cell {
    max-width: 40px;
  }

  .truck-action-bar {
    flex-direction: column;
    width: 100%;
  }

  .truck-toss-btn,
  .truck-drop-all-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================
   10. THE MUDDY WINDOW WIPE (Sensory Clarity Sanctuary)
   ============================================================= */
.muddy-window-sanctuary {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(420px, 52vh, 580px);
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1.5px solid rgba(107, 158, 130, 0.3);
  box-shadow: inset 0 2px 10px rgba(28, 45, 36, 0.06), 0 10px 30px rgba(107, 158, 130, 0.12);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .muddy-window-sanctuary {
    height: clamp(480px, 60vh, 680px);
  }
}

@media (min-width: 1400px) {
  .muddy-window-sanctuary {
    height: clamp(520px, 62vh, 720px);
  }
}

[data-theme="dark"] .muddy-window-sanctuary {
  border-color: rgba(107, 158, 130, 0.25);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Sunlit Panoramic Vista Backdrop */
.window-landscape-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Background image applied via client-side JS scenery randomizer */
  transition: background-image 0.45s ease-in-out;
}

.window-landscape-backdrop[style*="url"] .window-ridge,
.window-landscape-backdrop[style*="url"] .window-pines,
.window-landscape-backdrop[style*="url"] .window-sun-core,
.window-landscape-backdrop[style*="url"] .window-sun-glow,
.window-landscape-backdrop[style*="url"] .window-sunbeam,
.window-landscape-backdrop[style*="url"] .window-meadow-horizon,
.window-landscape-backdrop[style*="url"] .window-sky-gradient,
.window-landscape-backdrop.has-scenery .window-ridge,
.window-landscape-backdrop.has-scenery .window-pines,
.window-landscape-backdrop.has-scenery .window-sun-core,
.window-landscape-backdrop.has-scenery .window-sun-glow,
.window-landscape-backdrop.has-scenery .window-sunbeam,
.window-landscape-backdrop.has-scenery .window-meadow-horizon,
.window-landscape-backdrop.has-scenery .window-sky-gradient {
  display: none !important;
}

.window-sky-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(226, 184, 107, 0.06) 50%, rgba(107, 158, 130, 0.08) 100%);
  pointer-events: none;
}

[data-theme="dark"] .window-sky-gradient {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* Radiant Soft Ambient Sun Aura */
.window-sun-glow {
  position: absolute;
  top: 10%;
  right: 18%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 200, 0.35) 0%, rgba(226, 184, 107, 0.15) 50%, transparent 75%);
  filter: blur(20px);
  animation: sunGlowBreath 6s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes sunGlowBreath {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}

.window-sun-core {
  position: absolute;
  top: calc(15% + 70px);
  right: calc(22% + 70px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #FFF4D0 40%, #FFE082 75%, #F4B846 100%);
  box-shadow: 0 0 35px rgba(255, 230, 140, 0.85);
}

.window-sunbeam {
  position: absolute;
  top: -20%;
  width: 140px;
  height: 140%;
  background: linear-gradient(180deg, rgba(255, 245, 200, 0.35) 0%, rgba(226, 184, 107, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(28deg);
  filter: blur(12px);
  pointer-events: none;
  animation: windowSunbeamPulse 8s infinite alternate ease-in-out;
}

.window-sunbeam.beam-1 {
  right: 35%;
  animation-delay: 0s;
}

.window-sunbeam.beam-2 {
  right: 15%;
  animation-delay: 2.5s;
}

.window-sunbeam.beam-3 {
  right: 55%;
  animation-delay: 5s;
}

@keyframes windowSunbeamPulse {
  0% { opacity: 0.35; transform: rotate(26deg) translateX(0); }
  100% { opacity: 0.75; transform: rotate(30deg) translateX(12px); }
}

/* Mountain Ridges */
.window-ridge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.window-ridge.ridge-far {
  height: 180px;
  background: radial-gradient(ellipse at 70% 100%, #C48E66 0%, #B87C54 50%, transparent 85%);
  clip-path: polygon(0 65%, 25% 45%, 55% 58%, 80% 32%, 100% 50%, 100% 100%, 0 100%);
  opacity: 0.75;
}

.window-ridge.ridge-mid {
  height: 140px;
  background: radial-gradient(ellipse at 30% 100%, #7E9C88 0%, #60856E 60%, transparent 90%);
  clip-path: polygon(0 40%, 30% 65%, 60% 35%, 85% 60%, 100% 45%, 100% 100%, 0 100%);
  opacity: 0.85;
}

.window-ridge.ridge-near {
  height: 95px;
  background: linear-gradient(180deg, #4A7A5D 0%, #355C44 100%);
  clip-path: polygon(0 30%, 20% 50%, 45% 25%, 75% 45%, 100% 20%, 100% 100%, 0 100%);
}

[data-theme="dark"] .window-ridge.ridge-far {
  background: radial-gradient(ellipse at 70% 100%, #5E3D2A 0%, #462A1B 50%, transparent 85%);
}

[data-theme="dark"] .window-ridge.ridge-mid {
  background: radial-gradient(ellipse at 30% 100%, #3B5746 0%, #283F32 60%, transparent 90%);
}

[data-theme="dark"] .window-ridge.ridge-near {
  background: linear-gradient(180deg, #244230 0%, #152A1E 100%);
}

/* Pine Trees & Botanical Silhouettes */
.window-pines {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  width: 160px;
  height: 120px;
}

.window-pines.pines-left {
  left: 0;
  background: radial-gradient(ellipse at 20% 100%, #244533 0%, transparent 75%);
  clip-path: polygon(5% 100%, 12% 40%, 20% 60%, 28% 25%, 36% 55%, 44% 15%, 52% 50%, 60% 30%, 70% 100%);
}

.window-pines.pines-right {
  right: 0;
  background: radial-gradient(ellipse at 80% 100%, #244533 0%, transparent 75%);
  clip-path: polygon(25% 100%, 35% 35%, 45% 55%, 55% 20%, 65% 50%, 75% 15%, 85% 45%, 95% 25%, 100% 100%);
}

[data-theme="dark"] .window-pines {
  filter: brightness(0.65);
}

/* Meadow Reflection Horizon */
.window-meadow-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  background: linear-gradient(0deg, rgba(226, 184, 107, 0.4) 0%, rgba(107, 158, 130, 0.2) 60%, transparent 100%);
  pointer-events: none;
}

/* Ambient Sunlight Motes */
.window-ambient-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.window-sun-mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 220, 0.9) 0%, rgba(226, 184, 107, 0.5) 60%, transparent 100%);
  animation: sunMoteDrift linear infinite;
  pointer-events: none;
}

@keyframes sunMoteDrift {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.85; }
  80% { opacity: 0.85; }
  100% { transform: translate(-30px, -60px) scale(1.2); opacity: 0; }
}

/* Architectural Window Frame & Glass Container */
.window-frame-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: crosshair;
  touch-action: none;
}

.window-glass-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 22%, transparent 45%, rgba(255, 255, 255, 0.14) 70%, transparent 90%);
  pointer-events: none;
  z-index: 4;
}

/* Mud & Spray Canvases */
.window-mud-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
  transition: opacity 0.4s ease;
}

.window-spray-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* Architectural Window Mullion Grid & Frame Trim */
.window-mullions-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.window-beveled-border {
  position: absolute;
  inset: 0;
  border: 12px solid #5A432F;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 -2px 6px rgba(255, 255, 255, 0.15), 0 4px 15px rgba(18, 29, 23, 0.18);
}

[data-theme="dark"] .window-beveled-border {
  border-color: #38281C;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.4);
}

.mullion-bar {
  position: absolute;
  background: linear-gradient(180deg, #6B523B 0%, #523D2A 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .mullion-bar {
  background: linear-gradient(180deg, #443224 0%, #302217 100%);
}

.mullion-bar.bar-vertical {
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
}

.mullion-bar.bar-horizontal {
  left: 12px;
  right: 12px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
}

/* Virtual Squeegee Tool Indicator */
.window-squeegee-tool {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  width: 70px;
  height: 24px;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.08s ease;
  will-change: transform, left, top;
}

.window-squeegee-tool.active {
  opacity: 1;
}

.squeegee-blade-head {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.squeegee-rubber-edge {
  width: 64px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3C4E43 0%, #1A241F 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.squeegee-handle-neck {
  width: 10px;
  height: 14px;
  background: linear-gradient(90deg, #E2B86B 0%, #C49845 100%);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Clarity HUD Pill Text */
.window-clarity-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  transition: color 0.3s ease;
}

.window-clarity-val.hazy {
  color: #E06A55;
}

.window-clarity-val.wiping {
  color: #E2B86B;
}

.window-clarity-val.clearing {
  color: #86B89E;
}

.window-clarity-val.complete {
  color: #6B9E82 !important;
}

/* Guidance Hint Pill */
.window-hint-pill {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  box-shadow: 0 4px 14px rgba(18, 29, 23, 0.08);
  z-index: 7;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  max-width: 90%;
}

.window-hint-pill.hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
}

/* 5-Second Clarity Countdown Pill Floating Over Scenery */
.window-countdown-pill {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(250, 249, 245, 0.88);
  border: 1.5px solid rgba(107, 158, 130, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.5rem 1rem 0.5rem 1.15rem;
  border-radius: var(--radius-full, 100px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main, #1C2D24);
  box-shadow: 0 6px 20px rgba(18, 29, 23, 0.12), 0 0 16px rgba(107, 158, 130, 0.2);
  z-index: 10;
  transition: opacity 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
  animation: countdownPillPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-theme="dark"] .window-countdown-pill {
  background: rgba(18, 29, 23, 0.88);
  border-color: rgba(107, 158, 130, 0.45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(107, 158, 130, 0.25);
  color: var(--text-main, #E0EBE4);
}

.window-countdown-pill[hidden] {
  display: none !important;
}

@keyframes countdownPillPopIn {
  0% { opacity: 0; transform: translate(-50%, -12px) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.window-countdown-sparkle {
  font-size: 1.05rem;
  animation: sparkleTwinkle 2s infinite ease-in-out;
}

@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50% { transform: scale(1.25) rotate(12deg); opacity: 1; }
}

.window-countdown-text {
  font-size: 0.84rem;
  color: var(--text-muted, #6B7C72);
}

[data-theme="dark"] .window-countdown-text {
  color: var(--text-muted, #93A89D);
}

.window-countdown-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-primary, #6B9E82);
  min-width: 1.2ch;
  text-align: center;
  display: inline-block;
  line-height: 1;
}

.window-countdown-track {
  width: 75px;
  height: 6px;
  background: rgba(107, 158, 130, 0.2);
  border-radius: 99px;
  overflow: hidden;
  display: flex;
}

.window-countdown-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary, #6B9E82), var(--accent-secondary, #E2B86B));
  border-radius: 99px;
  transition: width 0.95s linear;
}

.window-countdown-replay-btn {
  background: var(--accent-primary, #6B9E82);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-full, 100px);
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.35rem;
  box-shadow: 0 2px 6px rgba(107, 158, 130, 0.3);
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.window-countdown-replay-btn:hover {
  background: #5A8A70;
  transform: scale(1.04);
  box-shadow: 0 3px 8px rgba(107, 158, 130, 0.45);
}

.window-countdown-replay-btn:active {
  transform: scale(0.96);
}

@media (max-width: 600px) {
  .window-countdown-pill {
    top: 0.75rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    gap: 0.35rem;
  }
  .window-countdown-track {
    width: 48px;
    height: 5px;
  }
  .window-countdown-replay-btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
  }
}

/* Crystal Clarity Restored State Modal Card */
.window-restored-card {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  animation: windowRestoredIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-theme="dark"] .window-restored-card {
  background: rgba(18, 29, 23, 0.94);
}

.window-restored-card[hidden] {
  display: none !important;
}

@keyframes windowRestoredIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

.window-restored-aura {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.35) 0%, rgba(107, 158, 130, 0.18) 50%, transparent 70%);
  animation: windowAuraPulse 3s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes windowAuraPulse {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 0.95; }
}

.window-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 480px;
}

.window-restored-icon-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(226, 184, 107, 0.25), rgba(107, 158, 130, 0.3));
  border: 2px solid #E2B86B;
  color: #E2B86B;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.35);
  animation: windowIconPop 0.55s var(--ease-smooth) both;
}

@keyframes windowIconPop {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  70% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.window-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.window-restored-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.window-restored-stats-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.35rem;
}

.window-mini-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(226, 184, 107, 0.15);
  color: #B88528;
  border: 1px solid rgba(226, 184, 107, 0.35);
}

[data-theme="dark"] .window-mini-badge {
  background: rgba(226, 184, 107, 0.18);
  color: #FFE082;
}

.window-replay-btn {
  margin-top: 0.75rem;
  min-height: 52px;
  padding: 0.75rem 1.8rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #E2B86B 0%, #C49845 100%) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.window-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(226, 184, 107, 0.45);
}

.window-replay-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* Responsive Scaling for Muddy Window */
@media (max-width: 768px) {
  .muddy-window-sanctuary {
    height: clamp(380px, 78vw, 440px);
  }

  .window-beveled-border {
    border-width: 8px;
  }

  .mullion-bar.bar-vertical {
    top: 8px;
    bottom: 8px;
    width: 4px;
  }

  .mullion-bar.bar-horizontal {
    left: 8px;
    right: 8px;
    height: 4px;
  }

  .window-hint-pill {
    font-size: 0.75rem;
    padding: 0.35rem 0.8rem;
    bottom: 0.65rem;
  }

  .window-restored-title {
    font-size: 1.25rem;
  }

  .window-restored-desc {
    font-size: 0.84rem;
  }
}


/* =============================================================
   11. THE FLOATING LANTERN RELEASE
   ============================================================= */

/* Sanctuary root container */
.lantern-sanctuary {
  position: relative;
  width: 100%;
  height: clamp(540px, 80vw, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 1.5rem;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* ── Twilight Backdrop Layer ─────────────────────────────────── */
.lantern-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.45s ease-in-out;
}

.lantern-backdrop[style*="url"] .lantern-ridge,
.lantern-backdrop[style*="url"] .lantern-shore-pines,
.lantern-backdrop[style*="url"] .lantern-moon-crescent,
.lantern-backdrop[style*="url"] .lantern-moon-glow,
.lantern-backdrop.has-scenery .lantern-ridge,
.lantern-backdrop.has-scenery .lantern-shore-pines,
.lantern-backdrop.has-scenery .lantern-moon-crescent,
.lantern-backdrop.has-scenery .lantern-moon-glow {
  display: none !important;
}

.lantern-twilight-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(26, 14, 46, 0.35) 0%, rgba(39, 23, 64, 0.4) 30%, rgba(28, 42, 74, 0.45) 60%, rgba(18, 29, 23, 0.6) 100%);
}

[data-theme="dark"] .lantern-twilight-sky {
  background: radial-gradient(ellipse at 50% 0%, rgba(13, 8, 25, 0.55) 0%, rgba(22, 15, 42, 0.5) 30%, rgba(14, 26, 46, 0.55) 60%, rgba(10, 16, 13, 0.7) 100%);
}

/* Moon Glow Halo */
.lantern-moon-glow {
  position: absolute;
  top: 6%;
  right: 14%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.35) 0%, rgba(226, 184, 107, 0.12) 50%, transparent 75%);
  animation: moonGlowBreath 5s ease-in-out infinite alternate;
}

.lantern-moon-crescent {
  position: absolute;
  top: 7.5%;
  right: 15%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 45%, #FFF8D6 0%, #FFE9A0 60%, #ECCA55 100%);
  box-shadow: 0 0 28px 8px rgba(255, 240, 140, 0.3), 0 0 60px 20px rgba(226, 184, 107, 0.12);
  animation: moonGlowBreath 5s ease-in-out infinite alternate;
}

@keyframes moonGlowBreath {
  0%   { opacity: 0.85; transform: scale(0.97); }
  100% { opacity: 1;    transform: scale(1.04); }
}

/* Mountain Ridge Silhouettes */
.lantern-ridge {
  position: absolute;
  bottom: 28%;
  left: 0;
  right: 0;
  pointer-events: none;
}

.lantern-ridge.ridge-far {
  height: 110px;
  bottom: 30%;
  background: linear-gradient(180deg, rgba(22, 18, 45, 0.0) 0%, #1B1535 55%, #130E27 100%);
  clip-path: polygon(0 60%, 10% 30%, 22% 50%, 35% 18%, 50% 40%, 65% 12%, 80% 38%, 92% 22%, 100% 42%, 100% 100%, 0 100%);
  opacity: 0.85;
}

.lantern-ridge.ridge-near {
  height: 90px;
  bottom: 26%;
  background: linear-gradient(180deg, rgba(18, 29, 23, 0) 0%, #131824 60%, #0D1219 100%);
  clip-path: polygon(0 55%, 12% 35%, 28% 55%, 45% 20%, 58% 45%, 72% 18%, 88% 40%, 100% 25%, 100% 100%, 0 100%);
}

/* Shore Pines */
.lantern-shore-pines {
  position: absolute;
  bottom: 27%;
  left: 0;
  right: 0;
  height: 80px;
  background: radial-gradient(ellipse at 15% 100%, #0D1A12 0%, transparent 55%),
              radial-gradient(ellipse at 85% 100%, #0D1A12 0%, transparent 55%);
  clip-path: polygon(
    0 100%, 4% 35%, 8% 55%, 13% 18%, 18% 45%, 22% 28%, 26% 100%,
    74% 100%, 78% 25%, 82% 48%, 87% 14%, 92% 42%, 96% 30%, 100% 100%
  );
  pointer-events: none;
}

/* Reflective Water Surface */
.lantern-water-surface {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(180deg,
    #1A2030 0%,
    #21293E 30%,
    #252E42 70%,
    #1B2235 100%
  );
  overflow: hidden;
}

[data-theme="dark"] .lantern-water-surface {
  background: linear-gradient(180deg, #0F1620 0%, #141C2A 30%, #181F30 70%, #0E1219 100%);
}

.water-reflection-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 200px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(226, 184, 107, 0.28) 0%, rgba(226, 184, 107, 0.08) 60%, transparent 100%);
  animation: waterReflectSway 6s ease-in-out infinite alternate;
}

@keyframes waterReflectSway {
  0%   { transform: translateX(-50%) scaleX(0.8); opacity: 0.6; }
  100% { transform: translateX(-50%) scaleX(1.3); opacity: 1; }
}

.water-shimmer-ripples {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 10px,
    rgba(255, 255, 255, 0.04) 10px,
    rgba(255, 255, 255, 0.04) 11px
  );
  animation: shimmerRipple 8s linear infinite;
}

@keyframes shimmerRipple {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -120px; }
}

/* ── Sky Canvas ─────────────────────────────────────────────── */
.lantern-sky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ── Lantern Actor Wrapper ──────────────────────────────────── */
.lantern-actor-wrapper {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 420px;
}

/* Warm Amber Flame Aura behind lantern */
.lantern-flame-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(160px, 42vw, 220px);
  height: clamp(160px, 42vw, 220px);
  transform: translate(-50%, -44%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 120, 0.55) 0%, rgba(226, 184, 107, 0.22) 45%, transparent 70%);
  pointer-events: none;
  animation: lanternFlameAuraPulse 2.8s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes lanternFlameAuraPulse {
  0%   { transform: translate(-50%, -44%) scale(0.88); opacity: 0.65; }
  100% { transform: translate(-50%, -44%) scale(1.12); opacity: 1; }
}

/* ── Paper Lantern Vessel ──────────────────────────────────── */
.lantern-vessel {
  position: relative;
  width: clamp(150px, 38vw, 210px);
  height: clamp(204px, 52vw, 285px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  animation: lanternHoverFloat 4s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes lanternHoverFloat {
  0%   { transform: translateY(0)    rotate(-0.6deg); }
  50%  { transform: translateY(-8px) rotate(0deg); }
  100% { transform: translateY(-4px) rotate(0.6deg); }
}

.lantern-vessel.is-lit .lantern-svg {
  filter: drop-shadow(0 0 20px rgba(255, 200, 60, 0.75));
}

.lantern-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter 0.6s ease;
}

/* Flame flicker animation */
.lantern-flame-flicker {
  transform-origin: 50% 100%;
  animation: flameFlicker 1.8s ease-in-out infinite alternate;
}

@keyframes flameFlicker {
  0%   { transform: scaleX(0.8) scaleY(0.9) rotate(-3deg); opacity: 0.8; }
  40%  { transform: scaleX(1.1) scaleY(1.1) rotate(2deg);  opacity: 1; }
  100% { transform: scaleX(0.9) scaleY(1.0) rotate(-1deg); opacity: 0.85; }
}

/* ── Textarea overlay centered within lantern body ──────────── */
.lantern-text-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lantern-thought-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  padding: 0.6rem 0.65rem 1.6rem;
  background: rgba(255, 248, 210, 0.42) !important;
  border: 1.5px solid rgba(226, 184, 107, 0.7) !important;
  border-radius: 10px !important;
  outline: none !important;
  resize: none;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: #1C1208 !important;
  caret-color: #C49238;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15), inset 0 1px 3px rgba(255, 255, 255, 0.5);
  transition: border-color 0.25s ease, background 0.25s ease;
  user-select: text;
  -webkit-user-select: text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.lantern-thought-textarea::placeholder {
  color: rgba(80, 55, 15, 0.65);
  font-style: italic;
  font-size: 0.78rem;
}

.lantern-thought-textarea:focus {
  background: rgba(255, 248, 220, 0.48) !important;
  border-color: rgba(226, 184, 107, 0.9) !important;
  box-shadow: 0 0 0 3px rgba(226, 184, 107, 0.2), 0 4px 14px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .lantern-thought-textarea {
  color: #F5E9C4 !important;
  background: rgba(255, 220, 100, 0.18) !important;
}

[data-theme="dark"] .lantern-thought-textarea::placeholder {
  color: rgba(200, 160, 70, 0.6);
}

.lantern-char-counter {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(90, 60, 15, 0.55);
  font-family: 'Nunito', sans-serif;
  text-align: right;
  width: 100%;
  pointer-events: none;
}

[data-theme="dark"] .lantern-char-counter {
  color: rgba(200, 160, 70, 0.5);
}

/* ── Prompt Chips Bar ───────────────────────────────────────── */
.lantern-prompts-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 0.5rem;
  z-index: 5;
}

.prompts-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(220, 195, 140, 0.9);
  font-family: 'Nunito', sans-serif;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.prompt-chip {
  padding: 0.28rem 0.7rem;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: rgba(226, 184, 107, 0.18);
  border: 1px solid rgba(226, 184, 107, 0.45);
  color: #FFE08A;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: 'Nunito', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
}

.prompt-chip:hover,
.prompt-chip:focus-visible {
  background: rgba(226, 184, 107, 0.38);
  border-color: rgba(226, 184, 107, 0.85);
  color: #FFF5D0;
  transform: translateY(-1px);
}

.prompt-chip:active {
  transform: translateY(1px);
}

/* ── Release Lantern Action Row ─────────────────────────────── */
.lantern-action-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 5;
  width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.lantern-release-btn {
  width: 100%;
  max-width: 360px;
  min-height: 58px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #E2B86B 0%, #C89A3E 50%, #D4A040 100%) !important;
  color: #1C1208 !important;
  border: 2px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 8px 28px rgba(200, 154, 62, 0.5), 0 0 0 0 rgba(226, 184, 107, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.85rem 1.8rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s var(--ease-smooth, ease), box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.lantern-release-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 60%);
  pointer-events: none;
}

.lantern-release-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(200, 154, 62, 0.58), 0 0 0 6px rgba(226, 184, 107, 0.18), inset 0 2px 5px rgba(255, 255, 255, 0.55);
}

.lantern-release-btn:active {
  transform: translateY(3px) scale(0.98);
  box-shadow: 0 3px 10px rgba(200, 154, 62, 0.35), inset 0 3px 8px rgba(0, 0, 0, 0.14);
}

.lantern-release-btn.is-launching {
  animation: lanternReleasePulse 1s ease-out forwards;
  pointer-events: none;
}

@keyframes lanternReleasePulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(226, 184, 107, 0.6); }
  50%  { transform: scale(1.04); box-shadow: 0 0 0 16px rgba(226, 184, 107, 0); }
  100% { transform: scale(0.96); opacity: 0.6; }
}

.lantern-btn-flame-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lantern-btn-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.lantern-sub-hint {
  font-size: 0.78rem;
  color: rgba(200, 180, 120, 0.85);
  font-style: italic;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  margin: 0;
}

/* Status Val in HUD */
.lantern-status-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  transition: color 0.3s ease;
}

.lantern-status-val.resting   { color: #86B89E; }
.lantern-status-val.releasing { color: #E2B86B; }
.lantern-status-val.ascending { color: #C49238; }
.lantern-status-val.complete  { color: #6B9E82 !important; }

/* ── Hint Pill ──────────────────────────────────────────────── */
.lantern-hint-pill {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 13, 35, 0.75);
  border: 1px solid rgba(226, 184, 107, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(220, 200, 140, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 7;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
  max-width: 92%;
}

.lantern-hint-pill.hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
}

/* ── Ascension Ascending State ─────────────────────────────── */
.lantern-sanctuary.is-ascending .lantern-vessel {
  animation: lanternAscend 3.5s cubic-bezier(0.22, 0.88, 0.46, 1.0) forwards;
  pointer-events: none;
}

@keyframes lanternAscend {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  15%  { transform: translateY(-20px) rotate(-2deg) scale(1.03); opacity: 1; }
  40%  { transform: translateY(-80px) rotate(1.5deg) scale(0.97); opacity: 0.95; }
  70%  { transform: translateY(-200px) rotate(-1deg) scale(0.88); opacity: 0.7; }
  100% { transform: translateY(-420px) rotate(2deg) scale(0.7); opacity: 0; }
}

.lantern-sanctuary.is-ascending .lantern-flame-aura {
  animation: lanternAuraAscend 3.5s ease-in forwards;
}

@keyframes lanternAuraAscend {
  0%   { transform: translate(-50%, -44%) scale(1.0); opacity: 1; }
  60%  { transform: translate(-50%, -200%) scale(1.4); opacity: 0.6; }
  100% { transform: translate(-50%, -500%) scale(1.8); opacity: 0; }
}

/* ── Restored / Released State Card ─────────────────────────── */
.lantern-restored-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(10, 8, 22, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.25rem;
  text-align: center;
  border-radius: inherit;
  animation: lanternRestoredIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.lantern-restored-card[hidden] {
  display: none !important;
}

@keyframes lanternRestoredIn {
  0%   { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}

.lantern-restored-aura {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.35) 0%, rgba(107, 158, 130, 0.12) 50%, transparent 72%);
  animation: lanternAuraPulse 4s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes lanternAuraPulse {
  0%   { transform: scale(0.78); opacity: 0.45; }
  100% { transform: scale(1.22); opacity: 0.95; }
}

.lantern-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 480px;
  color: #FAF9F5;
}

.lantern-restored-icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(226, 184, 107, 0.28), rgba(107, 158, 130, 0.25));
  border: 2px solid rgba(226, 184, 107, 0.7);
  color: #FFD970;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px 8px rgba(226, 184, 107, 0.35);
  animation: lanternIconPop 0.55s var(--ease-smooth, ease) both;
}

@keyframes lanternIconPop {
  0%   { transform: scale(0.35) rotate(-12deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.lantern-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: #FAF9F5;
  margin: 0;
  letter-spacing: -0.02em;
}

.lantern-restored-desc {
  font-size: 0.9rem;
  color: rgba(210, 190, 145, 0.9);
  line-height: 1.65;
  margin: 0;
  max-width: 380px;
}

.lantern-restored-stats-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}

.lantern-mini-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
  background: rgba(226, 184, 107, 0.18);
  color: #FFD970;
  border: 1px solid rgba(226, 184, 107, 0.4);
}

.lantern-replay-btn {
  margin-top: 0.75rem;
  min-height: 52px;
  padding: 0.75rem 1.8rem;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #E2B86B 0%, #C49845 100%) !important;
  color: #1C1208 !important;
  border: 2px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.42), inset 0 2px 4px rgba(255, 255, 255, 0.42);
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lantern-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(226, 184, 107, 0.55);
}

.lantern-replay-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* visually-hidden helper (accessibility) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Responsive Scaling ─────────────────────────────────────── */
@media (max-width: 768px) {
  .lantern-sanctuary {
    height: clamp(520px, 90vw, 600px);
    padding-bottom: 1.1rem;
  }

  .lantern-vessel {
    width: clamp(130px, 34vw, 185px);
    height: clamp(177px, 46vw, 250px);
  }

  .lantern-btn-text {
    font-size: 0.95rem;
  }

  .lantern-release-btn {
    min-height: 52px;
    padding: 0.75rem 1.4rem;
  }

  .lantern-restored-title {
    font-size: 1.3rem;
  }

  .lantern-restored-desc {
    font-size: 0.84rem;
  }

  .lantern-prompts-bar {
    gap: 0.35rem;
  }

  .prompt-chip {
    font-size: 0.68rem;
    padding: 0.24rem 0.55rem;
  }

  .lantern-hint-pill {
    font-size: 0.74rem;
    bottom: 0.6rem;
  }
}

@media (max-width: 420px) {
  .lantern-sanctuary {
    height: clamp(500px, 95vw, 580px);
  }

  .lantern-vessel {
    width: 120px;
    height: 163px;
  }

  .lantern-thought-textarea {
    font-size: 0.75rem;
    min-height: 68px;
  }

  .lantern-prompts-bar {
    display: none;
  }

  .lantern-restored-stats-row {
    gap: 0.35rem;
  }
}

/* ============================================================
   13. THE WHISPERING WIND CHIME
   ============================================================ */
.chime-sanctuary {
  position: relative;
  width: 100%;
  height: clamp(480px, 70vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(107, 158, 130, 0.25);
  box-shadow: 0 16px 40px -10px rgba(18, 29, 23, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  user-select: none;
  touch-action: none;
}

.chime-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.chime-sky-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, #2a4837 0%, #182e23 55%, #0f1c16 100%);
}

.chime-breeze-particle {
  position: absolute;
  top: calc(25% + var(--delay, 0s) * 20px);
  left: var(--x, 50%);
  width: 3px;
  height: 3px;
  background: rgba(226, 184, 107, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(226, 184, 107, 0.8);
  animation: chime-breeze-drift 7s calc(var(--delay, 0s)) ease-in-out infinite alternate;
}

@keyframes chime-breeze-drift {
  0% { transform: translateX(-40px) translateY(0) scale(0.6); opacity: 0; }
  30% { opacity: 0.9; }
  70% { opacity: 0.8; }
  100% { transform: translateX(40px) translateY(-30px) scale(1.2); opacity: 0; }
}

.chime-ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.chime-suspension-bar {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 500px;
  margin-top: 1.75rem;
  height: 20px;
}

.chime-bar-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(90deg, #3d2b19, #7a5528, #c49a50, #7a5528, #3d2b19);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.chime-string {
  position: absolute;
  top: 12px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(226, 184, 107, 0.9), rgba(226, 184, 107, 0.25));
}

.chime-string-1 { left: 8%; height: 180px; }
.chime-string-2 { left: 22%; height: 210px; }
.chime-string-3 { left: 36%; height: 155px; }
.chime-string-4 { left: 50%; height: 235px; }
.chime-string-5 { left: 64%; height: 195px; }
.chime-string-6 { left: 78%; height: 170px; }
.chime-string-7 { left: 92%; height: 220px; }

.chime-tubes-container {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.4rem, 2.2vw, 1.4rem);
  width: 86%;
  max-width: 500px;
  margin-top: 12px;
  padding-bottom: 2rem;
  touch-action: none;
}

.chime-tube {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  transform-origin: top center;
  animation: chime-sway-idle 3.6s calc(var(--tube-delay, 0s) * 2.5) ease-in-out infinite alternate;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chime-sway-idle {
  0% { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}

.chime-tube:focus-visible .chime-tube-body {
  box-shadow: 0 0 0 3px var(--accent-secondary), 0 0 20px rgba(226, 184, 107, 0.7);
}

.chime-tube-body {
  width: clamp(24px, 4.8vw, 38px);
  height: var(--tube-height, 180px);
  border-radius: 4px 4px 8px 8px;
  position: relative;
  overflow: hidden;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.chime-tube-body.crystal {
  background: linear-gradient(160deg, rgba(200, 235, 255, 0.85) 0%, rgba(120, 190, 210, 0.65) 45%, rgba(70, 140, 170, 0.8) 100%);
  box-shadow: inset -2px 0 6px rgba(255, 255, 255, 0.4), 0 6px 20px rgba(80, 160, 180, 0.3), inset 2px 0 5px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(220, 245, 255, 0.6);
  backdrop-filter: blur(4px);
}

.chime-tube-body.bamboo {
  background: linear-gradient(160deg, #d8b878 0%, #a47c3c 40%, #6e4e20 100%);
  box-shadow: inset -2px 0 6px rgba(255, 255, 255, 0.2), 0 6px 20px rgba(120, 85, 35, 0.4), inset 2px 0 5px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(230, 195, 130, 0.5);
}

.chime-tube-shine {
  position: absolute;
  top: 0;
  left: 18%;
  width: 22%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 2px;
}

.chime-tube-cap {
  width: clamp(28px, 5.6vw, 44px);
  height: 10px;
  background: linear-gradient(90deg, #422d17, #8e622b, #c49a50, #8e622b, #422d17);
  border-radius: 5px;
  margin-top: -2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.chime-tube.striking {
  transform: rotate(5deg) scale(1.05);
}

.chime-tube.striking .chime-tube-body {
  filter: brightness(1.7) saturate(1.5);
  box-shadow: 0 0 25px rgba(226, 184, 107, 0.9), inset 0 0 10px rgba(255, 255, 255, 0.8);
}

.chime-hint-pill,
.pond-hint-pill {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(18, 29, 23, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(250, 249, 245, 0.9);
  font-size: 0.82rem;
  font-weight: 450;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 4;
  white-space: nowrap;
  max-width: 90%;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   14. THE RIPPLE STONE POND
   ============================================================ */
.pond-sanctuary {
  position: relative;
  width: 100%;
  height: clamp(480px, 70vh, 580px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(107, 158, 130, 0.28);
  box-shadow: 0 16px 40px -10px rgba(18, 29, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  user-select: none;
  touch-action: none;
  cursor: crosshair;
}

.pond-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pond-water-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, #18382d 0%, #10261f 45%, #0a1713 85%, #050d0a 100%);
}

.pond-ambient-glow {
  position: absolute;
  top: 25%;
  left: 30%;
  width: 40%;
  height: 40%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.18) 0%, rgba(226, 184, 107, 0.08) 40%, transparent 70%);
  filter: blur(30px);
  animation: pond-glow-breathe 8s ease-in-out infinite alternate;
}

@keyframes pond-glow-breathe {
  0% { transform: scale(0.9) translate(-10px, -10px); opacity: 0.6; }
  100% { transform: scale(1.15) translate(10px, 10px); opacity: 0.9; }
}

/* Decorative Water Lilies */
.pond-lily {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
  transition: transform 0.6s ease;
}

.pond-lily-1 {
  top: 14%;
  left: 10%;
  transform: rotate(-12deg);
}

.pond-lily-2 {
  bottom: 16%;
  right: 12%;
  transform: rotate(24deg) scale(0.85);
}

.pond-lily-pad {
  width: 52px;
  height: 48px;
  background: radial-gradient(circle at 40% 40%, #466e54 0%, #294634 80%, #1a3022 100%);
  border-radius: 50% 50% 50% 45%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(107, 158, 130, 0.3);
}

.pond-lily-flower {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #ffe6d4 15%, #fca5a5 60%, #e2b86b 100%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(252, 165, 165, 0.7);
}

/* Peripheral Zen Stones */
.pond-smooth-stone-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 45% 55% 50% 48%;
  background: radial-gradient(circle at 35% 30%, #40554b 0%, #24352e 60%, #15221c 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pond-stone-decor-1 {
  bottom: 12%;
  left: 8%;
  width: 42px;
  height: 32px;
  transform: rotate(-25deg);
}

.pond-stone-decor-2 {
  top: 16%;
  right: 8%;
  width: 34px;
  height: 26px;
  transform: rotate(35deg);
}

.pond-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
  display: block;
}

@media (max-width: 600px) {
  .chime-sanctuary,
  .pond-sanctuary {
    height: clamp(440px, 85vw, 520px);
  }

  .chime-suspension-bar,
  .chime-tubes-container {
    width: 94%;
    gap: 0.35rem;
  }

  .chime-tube-body {
    width: clamp(22px, 7.2vw, 32px);
  }

  .chime-hint-pill,
  .pond-hint-pill {
    font-size: 0.74rem;
    padding: 0.38rem 0.85rem;
    bottom: 0.8rem;
  }
}

/* ==========================================================================
   16. THE OVERFILLED SUITCASE DECLUTTER
   ========================================================================== */

.suitcase-sanctuary {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}

/* Ambient room-brightening glow on suitcase close */
.suitcase-room-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(226, 184, 107, 0.0) 30%, transparent 80%);
  pointer-events: none;
  z-index: 1;
  transition: background 1.2s ease;
  border-radius: 50%;
}
.suitcase-room-glow.active {
  background: radial-gradient(ellipse at 50% 50%, rgba(226, 184, 107, 0.22) 30%, rgba(107, 158, 130, 0.12) 70%, transparent 100%);
}

/* Scene — suitcase + basket side by side */
.suitcase-scene {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  width: 100%;
  position: relative;
  z-index: 2;
}

.suitcase-left-col,
.suitcase-right-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 0;
}

.suitcase-label-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.8;
  text-align: center;
  margin-bottom: 0.2rem;
}

/* --- Suitcase Shell --- */
.suitcase-shell-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.suitcase-body-graphic {
  position: relative;
  width: min(280px, 100%);
  cursor: default;
}

.suitcase-svg {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.6s ease;
}

/* SVG lid animation: open state */
.suitcase-svg.lid-open #sc-lid {
  transform: translateY(-20px);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Tension shake — overpacked state */
.suitcase-shell-wrapper.overpacked {
  animation: suitcase-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

@keyframes suitcase-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15%       { transform: translateX(-3px) rotate(-0.8deg); }
  30%       { transform: translateX(3px)  rotate(0.8deg); }
  45%       { transform: translateX(-2px) rotate(-0.5deg); }
  60%       { transform: translateX(2px)  rotate(0.5deg); }
  75%       { transform: translateX(-1px) rotate(-0.3deg); }
}

/* Relaxed suitcase state — smooth sides */
.suitcase-shell-wrapper.relaxing .suitcase-svg {
  filter: drop-shadow(0 8px 24px rgba(107, 158, 130, 0.35));
  transition: filter 0.8s ease;
}

/* Suitcase tension indicator badge */
.suitcase-tension-indicator {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  background: rgba(224, 106, 85, 0.15);
  border: 1px solid rgba(224, 106, 85, 0.35);
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
  color: #E06A55;
  letter-spacing: 0.04em;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.suitcase-tension-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}
.tension-bolt {
  animation: tension-pulse 0.7s ease-in-out infinite alternate;
  display: inline-block;
}
@keyframes tension-pulse {
  from { transform: scale(0.9); }
  to   { transform: scale(1.15); }
}

/* --- Overflow items zone (sits inside the suitcase graphic area) --- */
.suitcase-overflow-zone {
  position: absolute;
  top: 10%;
  left: 5%;
  right: 5%;
  bottom: 8%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  overflow: visible;
  pointer-events: all;
  z-index: 4;
}

/* Individual clutter item chips */
.suitcase-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.75rem;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(226, 184, 107, 0.15) 100%);
  border: 1.5px solid var(--accent-secondary);
  border-radius: 12px;
  font-size: clamp(0.65rem, 2vw, 0.78rem);
  font-weight: 700;
  color: var(--text-main);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(28, 45, 36, 0.14);
  transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.18s ease,
              opacity 0.35s ease;
  will-change: transform;
  min-width: 56px;
  min-height: 36px;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
  z-index: 5;
}
.suitcase-item:active,
.suitcase-item.dragging {
  cursor: grabbing;
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 8px 28px rgba(28, 45, 36, 0.22);
  z-index: 100;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(226, 184, 107, 0.28) 100%);
}
.suitcase-item.removing {
  animation: item-fly-out 0.42s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes item-fly-out {
  0%   { transform: scale(1) translateX(0); opacity: 1; }
  60%  { transform: scale(1.12) translateX(30px); opacity: 0.7; }
  100% { transform: scale(0.6) translateX(80px) translateY(-20px); opacity: 0; }
}
.suitcase-item .item-emoji {
  font-size: 1em;
  line-height: 1;
}

/* Overflow spill effect — items sticking out */
.suitcase-item.spill-left  { transform: translate(-8px, -4px) rotate(-10deg); }
.suitcase-item.spill-right { transform: translate(8px, -6px) rotate(8deg); }
.suitcase-item.spill-top   { transform: translate(0px, -12px) rotate(-4deg); }

/* --- Basket (drop target) --- */
.suitcase-basket-wrapper {
  width: min(240px, 100%);
  position: relative;
}

.basket-graphic {
  position: relative;
  width: 100%;
  cursor: default;
}

.basket-svg {
  width: 100%;
  height: auto;
  display: block;
}

.basket-items-zone {
  position: absolute;
  top: 22%;
  left: 14%;
  right: 14%;
  bottom: 10%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

/* Miniature organized items in basket */
.basket-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.18) 0%, rgba(107, 158, 130, 0.08) 100%);
  border: 1px solid rgba(107, 158, 130, 0.45);
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  animation: chip-land 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes chip-land {
  0%   { transform: scale(0.5) translateY(-10px); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Basket drag-over highlight ring */
.basket-drop-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50% / 40%;
  border: 2.5px dashed transparent;
  pointer-events: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  z-index: 6;
}
.basket-graphic.drag-over .basket-drop-ring {
  border-color: var(--accent-primary);
  box-shadow: inset 0 0 20px rgba(107, 158, 130, 0.15);
}

/* --- Action Bar --- */
.suitcase-action-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 3;
}

.suitcase-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #52806B 100%);
  color: #FAF9F5;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(107, 158, 130, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
  min-height: 48px;
  font-family: 'Outfit', sans-serif;
}
.suitcase-remove-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(107, 158, 130, 0.45);
}
.suitcase-remove-btn:active:not(:disabled) {
  transform: translateY(0px);
}
.suitcase-remove-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.suitcase-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  background: transparent;
  color: var(--accent-secondary);
  border: 2px solid var(--accent-secondary);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
  min-height: 48px;
  font-family: 'Outfit', sans-serif;
}
.suitcase-close-btn:hover:not(:disabled) {
  background: var(--accent-secondary);
  color: #1C2D24;
  transform: scale(1.04);
}
.suitcase-close-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
/* Animate close button when enabled */
.suitcase-close-btn:not(:disabled) {
  animation: btn-invite-pulse 2s ease-in-out infinite;
}
@keyframes btn-invite-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 184, 107, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(226, 184, 107, 0.25); }
}

.suitcase-btn-icon { font-size: 1.1em; }

/* --- Hint Pill --- */
.suitcase-hint-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1rem;
  background: rgba(var(--bg-card-rgb, 250, 249, 245), 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.4s ease;
}

/* --- Restored / Success Card --- */
.suitcase-restored-card {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 20;
  background: rgba(var(--bg-card-rgb, 250, 249, 245), 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  animation: suitcase-reveal 0.55s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Only flex when the hidden attribute is NOT present */
.suitcase-restored-card:not([hidden]) {
  display: flex;
}
@keyframes suitcase-reveal {
  0%   { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

.suitcase-restored-aura {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at 50% 50%, rgba(226, 184, 107, 0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: aura-breathe 3s ease-in-out infinite alternate;
}
@keyframes aura-breathe {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.suitcase-restored-content {
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 380px;
}

.suitcase-restored-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.18) 0%, rgba(226, 184, 107, 0.15) 100%);
  border: 1.5px solid rgba(107, 158, 130, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.suitcase-restored-title {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  font-family: 'Nunito', sans-serif;
}

.suitcase-restored-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.suitcase-restored-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.suitcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.12) 0%, rgba(226, 184, 107, 0.10) 100%);
  border: 1px solid rgba(107, 158, 130, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
}

.suitcase-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #52806B 100%);
  color: #FAF9F5;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(107, 158, 130, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: 'Outfit', sans-serif;
  margin-top: 0.25rem;
}
.suitcase-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(107, 158, 130, 0.45);
}

/* --- Responsive: stack columns on small viewports --- */
@media (max-width: 520px) {
  .suitcase-scene {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }

  .suitcase-left-col,
  .suitcase-right-col {
    width: 100%;
    max-width: 300px;
  }

  .suitcase-body-graphic,
  .suitcase-basket-wrapper {
    width: min(260px, 92vw);
  }

  .suitcase-action-bar {
    flex-direction: column;
    gap: 0.6rem;
  }

  .suitcase-remove-btn,
  .suitcase-close-btn {
    width: 100%;
    justify-content: center;
  }
}




/* =======================================================================
   17. OVERWORKED HEART TO HAPPY HEART STYLES
   ======================================================================= */

.happy-heart-sanctuary {
  position: relative;
  width: 100%;
  min-height: 520px;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 1.25rem 1.5rem;
  background: var(--bg-card, #FAF9F5);
  box-shadow: inset 0 2px 14px rgba(18, 29, 23, 0.04);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* --- Backdrop & Ambient Scenery --- */
.happy-heart-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.25;
  transition: opacity 0.8s ease;
}

[data-theme="dark"] .happy-heart-backdrop {
  opacity: 0.18;
}

.happy-heart-ambient-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 82, 82, 0.12) 0%, rgba(107, 158, 130, 0.08) 50%, transparent 80%);
  transition: background 0.8s ease;
}

.happy-heart-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(226, 184, 107, 0.6);
  box-shadow: 0 0 10px rgba(226, 184, 107, 0.8);
  animation: heartSparkleFloat 4s infinite ease-in-out;
}

.sparkle-1 { top: 20%; left: 15%; animation-delay: 0s; }
.sparkle-2 { top: 35%; right: 18%; animation-delay: 1.4s; }
.sparkle-3 { top: 60%; left: 22%; animation-delay: 2.7s; }

@keyframes heartSparkleFloat {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.2; }
  50% { transform: translateY(-16px) scale(1.2); opacity: 0.85; }
}

/* --- Water Particle Canvas --- */
.heart-splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* --- Metric Status & Counter Pills --- */
.heart-pulse-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  transition: color 0.4s ease;
}
.heart-pulse-val.stressed { color: #FF3D00; }
.heart-pulse-val.warm     { color: #E2B86B; }
.heart-pulse-val.calm     { color: var(--accent-primary, #6B9E82); }

.heart-metric-divider {
  margin: 0 0.35rem;
  opacity: 0.4;
}

.heart-temp-val {
  font-size: 0.82rem;
  font-weight: 700;
  transition: color 0.4s ease;
}
.heart-temp-val.hot  { color: #FF5252; }
.heart-temp-val.warm { color: #FFA726; }
.heart-temp-val.cool { color: var(--accent-primary, #6B9E82); }

/* --- Central Interactive Heart Arena --- */
.heart-arena {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.75rem 0 0.5rem;
  min-height: 270px;
}

/* Heat Shimmer Waves */
.heart-heat-waves {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.5s ease;
}

.heat-stream {
  width: 4px;
  height: 38px;
  background: linear-gradient(to top, rgba(255, 82, 82, 0.7), rgba(255, 167, 38, 0.3), transparent);
  border-radius: 4px;
  filter: blur(1.5px);
  animation: heatStreamWiggle 1.5s infinite ease-in-out;
}

.stream-1 { animation-delay: 0s; height: 32px; }
.stream-2 { animation-delay: 0.4s; height: 44px; }
.stream-3 { animation-delay: 0.8s; height: 36px; }

@keyframes heatStreamWiggle {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.2; }
  50% { transform: translateY(-18px) scaleX(1.6); opacity: 0.85; }
}

/* Cool Mist Aura */
.heart-cool-aura {
  position: absolute;
  width: 280px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.28) 0%, rgba(168, 213, 186, 0.15) 45%, transparent 72%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
  filter: blur(8px);
}

/* Character Wrap & Shockwave Ring */
.heart-character-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 235px;
}

.heart-pulse-ring {
  position: absolute;
  width: 170px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid rgba(255, 82, 82, 0.4);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.heart-pulse-ring.pulse-expand {
  animation: shockwaveRing 0.55s ease-out forwards;
}

@keyframes shockwaveRing {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* SVG Character Sizing & Pulse Animation */
.heart-svg {
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 235px;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
  cursor: pointer;
  z-index: 2;
}

.heart-svg.beat-pulse {
  animation: heartLubDub 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes heartLubDub {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.09, 1.07); }
  45%  { transform: scale(0.98, 0.99); }
  65%  { transform: scale(1.05, 1.04); }
  100% { transform: scale(1); }
}

.heart-body-path {
  transition: fill 0.5s ease, stroke 0.5s ease;
}

/* Facial Expressions */
.heart-face {
  transition: opacity 0.4s ease;
}

/* Sweat Drops Dripping */
.heart-sweat-group {
  transition: opacity 0.5s ease;
}

.sweat-drop {
  animation: sweatDrip 1.6s infinite ease-in;
}
.drop-1 { animation-delay: 0.1s; }
.drop-2 { animation-delay: 0.7s; }
.drop-3 { animation-delay: 1.2s; }

@keyframes sweatDrip {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 0.95; }
  85% { transform: translateY(14px); opacity: 0.8; }
  100% { transform: translateY(22px); opacity: 0; }
}

/* Sunglasses Slide */
.heart-sunglasses-group {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Temperature & Serenity Progress Meter --- */
.heart-progress-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  margin-bottom: 1rem;
}

.heart-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted, #6B7C72);
  margin-bottom: 0.35rem;
}

.progress-status-text {
  font-family: 'Outfit', sans-serif;
  color: var(--accent-primary, #6B9E82);
  font-weight: 800;
}

.heart-progress-track {
  width: 100%;
  height: 9px;
  border-radius: var(--radius-full, 100px);
  background: rgba(18, 29, 23, 0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .heart-progress-track {
  background: rgba(255, 255, 255, 0.08);
}

.heart-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full, 100px);
  background: linear-gradient(90deg, #FF5252 0%, #FFA07A 40%, var(--accent-primary, #6B9E82) 100%);
  transition: width 0.15s ease-out;
}

/* --- Action Controls & Squishy Splash Button --- */
.heart-action-dock {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  max-width: 360px;
}

.heart-splash-btn {
  position: relative;
  min-height: 58px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #64B5F6 0%, #42A5F5 45%, var(--accent-primary, #6B9E82) 100%);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-full, 100px);
  padding: 0.75rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(66, 165, 245, 0.38), inset 0 2px 4px rgba(255, 255, 255, 0.35);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, filter 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.heart-splash-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(66, 165, 245, 0.48), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}

.heart-splash-btn:active,
.heart-splash-btn.pressing {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 3px 12px rgba(66, 165, 245, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.2);
  filter: brightness(1.06);
}

.splash-btn-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.splash-icon {
  font-size: 1.4rem;
  animation: waterDropBounce 1.8s infinite ease-in-out;
}

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

.splash-label {
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
}

.splash-badge {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.28);
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

.splash-hint-caption {
  font-size: 0.76rem;
  color: var(--text-muted, #6B7C72);
  text-align: center;
  margin: 0;
  line-height: 1.35;
}

/* --- Guidance Hint Pill --- */
.heart-hint-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full, 100px);
  background: var(--bg-surface, #EEF4F0);
  border: 1px solid var(--border-soft, rgba(18, 29, 23, 0.08));
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #6B7C72);
  text-align: center;
  max-width: 95%;
  line-height: 1.4;
}

/* --- Restored Success Card Modal --- */
.heart-restored-card {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 29, 23, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.heart-restored-card.visible {
  opacity: 1;
  pointer-events: auto;
}

.heart-restored-content {
  background: var(--bg-card, #FAF9F5);
  border: 1.5px solid var(--accent-primary, #6B9E82);
  border-radius: 20px;
  padding: 2rem 1.6rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 16px 40px rgba(18, 29, 23, 0.35);
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardPopIn {
  0% { transform: scale(0.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.heart-restored-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.22) 0%, rgba(226, 184, 107, 0.18) 100%);
  border: 1.5px solid rgba(107, 158, 130, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.heart-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.15rem, 3.2vw, 1.4rem);
  font-weight: 800;
  color: var(--text-main, #1C2D24);
  margin: 0;
}

.heart-restored-desc {
  font-size: 0.88rem;
  color: var(--text-muted, #6B7C72);
  line-height: 1.5;
  margin: 0;
}

.heart-restored-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.2rem;
}

.heart-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  background: rgba(107, 158, 130, 0.12);
  border: 1px solid rgba(107, 158, 130, 0.28);
  border-radius: var(--radius-full, 100px);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted, #6B7C72);
}

.heart-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: linear-gradient(135deg, var(--accent-primary, #6B9E82) 0%, #52806B 100%);
  color: #FAF9F5;
  border: none;
  border-radius: var(--radius-full, 100px);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(107, 158, 130, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: 'Outfit', sans-serif;
  margin-top: 0.3rem;
}

.heart-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 158, 130, 0.45);
}

/* --- Mobile Responsiveness (down to 360px viewport) --- */
@media (max-width: 480px) {
  .happy-heart-sanctuary {
    padding: 1.25rem 0.85rem 1.2rem;
    min-height: 480px;
  }

  .heart-character-wrap {
    width: 210px;
    height: 195px;
  }

  .heart-svg {
    max-width: 210px;
    max-height: 195px;
  }

  .heart-splash-btn {
    min-height: 56px;
    font-size: 0.98rem;
  }

  .heart-restored-content {
    padding: 1.5rem 1.1rem;
  }
}




/* =======================================================================
   18. POP THE WORRY BALLOONS STYLES
   ======================================================================= */

.worry-balloons-sanctuary {
  position: relative;
  width: 100%;
  min-height: 570px;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--bg-card, #FAF9F5);
  box-shadow: inset 0 2px 14px rgba(18, 29, 23, 0.04);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* --- Ambient Sky Backdrop with Scenery Support --- */
.worry-balloons-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.32;
  transition: opacity 0.8s ease;
}

[data-theme="dark"] .worry-balloons-backdrop {
  opacity: 0.22;
}

.worry-sky-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(168, 213, 186, 0.22) 0%, rgba(226, 184, 107, 0.12) 60%, rgba(250, 249, 245, 0.5) 100%);
}

[data-theme="dark"] .worry-sky-gradient {
  background: linear-gradient(180deg, rgba(27, 42, 34, 0.6) 0%, rgba(18, 29, 23, 0.85) 100%);
}

.worry-cloud-drift {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: cloudDriftSlow 32s infinite linear;
}

.drift-1 { width: 340px; height: 160px; top: 12%; left: -80px; }
.drift-2 { width: 420px; height: 180px; top: 38%; right: -120px; animation-duration: 45s; }
.drift-3 { width: 300px; height: 140px; top: 62%; left: 15%; animation-duration: 38s; }

@keyframes cloudDriftSlow {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(80px); }
  100% { transform: translateX(0); }
}

/* --- Sky Transformation Canvas --- */
.balloon-sky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* --- Floating Balloons Playfield --- */
.balloon-fleet-playfield {
  position: absolute;
  inset: 0;
  bottom: 110px;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

/* Individual Balloon */
.worry-balloon {
  position: absolute;
  top: 0;
  left: 0;
  width: 82px;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s ease, opacity 0.2s ease;
  will-change: transform;
}

.worry-balloon:hover {
  filter: brightness(1.15) drop-shadow(0 8px 22px rgba(18, 29, 23, 0.28));
}

.worry-balloon:active {
  transform: scale(0.95);
}

/* Balloon 3D Sphere */
.balloon-sphere {
  position: relative;
  width: 80px;
  height: 94px;
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  background: radial-gradient(circle at 35% 30%, #37474F 0%, #263238 55%, #1C2D24 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset -4px -6px 12px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(18, 29, 23, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  transition: transform 0.15s ease;
}

/* Custom worry balloon gets a warm gold highlight sheen */
.worry-balloon.custom-worry .balloon-sphere {
  background: radial-gradient(circle at 35% 30%, #455A64 0%, #2D3A34 55%, #1C2D24 100%);
  border: 1.5px solid var(--accent-secondary, #E2B86B);
  box-shadow: inset -4px -6px 12px rgba(0, 0, 0, 0.45), 0 0 16px rgba(226, 184, 107, 0.35);
}

/* Glossy highlight reflection on upper-left curve */
.balloon-shine {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 22px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(-35deg);
  pointer-events: none;
}

/* Worry Text Pill Tag */
.balloon-worry-pill {
  position: relative;
  z-index: 2;
  background: rgba(18, 29, 23, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full, 100px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 90%;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.worry-balloon.custom-worry .balloon-worry-pill {
  border-color: rgba(226, 184, 107, 0.45);
}

.worry-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #FAF9F5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Balloon Knot & Dangling String */
.balloon-knot {
  width: 8px;
  height: 6px;
  background: #1C2D24;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  margin-top: -1px;
}

.balloon-string {
  width: 1.5px;
  height: 38px;
  background: linear-gradient(to bottom, rgba(28, 45, 36, 0.65), rgba(28, 45, 36, 0.15));
  transform-origin: top center;
  animation: stringWave 2.8s infinite alternate ease-in-out;
}

@keyframes stringWave {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}

/* Balloon Pop Burst Animation */
.worry-balloon.popping {
  animation: balloonPopExplode 0.22s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes balloonPopExplode {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.35);
    opacity: 0.9;
    filter: brightness(1.6);
  }
  100% {
    transform: scale(0.2);
    opacity: 0;
  }
}

/* --- Metric Divider --- */
.balloon-metric-divider {
  margin: 0 0.35rem;
  opacity: 0.4;
}

/* --- Bottom Custom Worry Launcher Dock --- */
.worry-launcher-dock {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.custom-worry-form {
  width: 100%;
}

.custom-worry-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-surface, #EEF4F0);
  border: 1.5px solid var(--border-soft, rgba(18, 29, 23, 0.12));
  border-radius: var(--radius-full, 100px);
  padding: 0.3rem 0.35rem 0.3rem 1.1rem;
  box-shadow: 0 4px 14px rgba(18, 29, 23, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-worry-input-wrap:focus-within {
  border-color: var(--accent-primary, #6B9E82);
  box-shadow: 0 0 0 3px rgba(107, 158, 130, 0.18);
}

.custom-worry-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text-main, #1C2D24);
  outline: none;
  min-width: 0;
}

.custom-worry-input::placeholder {
  color: var(--text-muted, #6B7C72);
  opacity: 0.8;
}

.custom-worry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, var(--accent-primary, #6B9E82) 0%, #52806B 100%);
  color: #FAF9F5;
  border: none;
  border-radius: var(--radius-full, 100px);
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(107, 158, 130, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.custom-worry-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(107, 158, 130, 0.4);
}

/* Quick Release Preset Chips */
.preset-worry-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.preset-chips-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #6B7C72);
  margin-right: 0.2rem;
}

.worry-chip {
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full, 100px);
  border: 1px solid var(--border-soft, rgba(18, 29, 23, 0.1));
  background: rgba(255, 255, 255, 0.65);
  color: var(--text-main, #1C2D24);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

[data-theme="dark"] .worry-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #FAF9F5;
}

.worry-chip:hover {
  background: var(--bg-surface, #EEF4F0);
  border-color: var(--accent-primary, #6B9E82);
  transform: translateY(-1px);
}

/* --- Guidance Hint Pill --- */
.balloon-hint-pill {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full, 100px);
  background: var(--bg-surface, #EEF4F0);
  border: 1px solid var(--border-soft, rgba(18, 29, 23, 0.08));
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #6B7C72);
  text-align: center;
  max-width: 95%;
  line-height: 1.4;
}

/* --- Sky Cleared Restored Card Modal --- */
.balloon-restored-card {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 29, 23, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.balloon-restored-card.visible {
  opacity: 1;
  pointer-events: auto;
}

.balloon-restored-content {
  background: var(--bg-card, #FAF9F5);
  border: 1.5px solid var(--accent-primary, #6B9E82);
  border-radius: 20px;
  padding: 2rem 1.6rem;
  max-width: 410px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 16px 40px rgba(18, 29, 23, 0.35);
  animation: balloonCardPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes balloonCardPop {
  0%   { transform: scale(0.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.balloon-restored-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.22) 0%, rgba(226, 184, 107, 0.18) 100%);
  border: 1.5px solid rgba(107, 158, 130, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary, #6B9E82);
}

.balloon-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.15rem, 3.2vw, 1.4rem);
  font-weight: 800;
  color: var(--text-main, #1C2D24);
  margin: 0;
}

.balloon-restored-desc {
  font-size: 0.88rem;
  color: var(--text-muted, #6B7C72);
  line-height: 1.5;
  margin: 0;
}

.balloon-restored-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin-top: 0.2rem;
}

.balloon-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  background: rgba(107, 158, 130, 0.12);
  border: 1px solid rgba(107, 158, 130, 0.28);
  border-radius: var(--radius-full, 100px);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted, #6B7C72);
}

.balloon-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: linear-gradient(135deg, var(--accent-primary, #6B9E82) 0%, #52806B 100%);
  color: #FAF9F5;
  border: none;
  border-radius: var(--radius-full, 100px);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(107, 158, 130, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: 'Outfit', sans-serif;
  margin-top: 0.3rem;
}

.balloon-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 158, 130, 0.45);
}

/* --- Mobile Responsiveness (down to 360px viewport) --- */
@media (max-width: 480px) {
  .worry-balloons-sanctuary {
    padding: 1.25rem 0.85rem 1rem;
    min-height: 520px;
  }

  .balloon-sphere {
    width: 72px;
    height: 84px;
  }

  .worry-text {
    font-size: 0.68rem;
  }

  .custom-worry-input-wrap {
    padding-left: 0.8rem;
  }

  .custom-worry-btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
  }

  .preset-worry-chips {
    gap: 0.25rem;
  }

  .worry-chip {
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
  }
}

/* ==========================================================================
   ACTIVITY 19: DANDELION WISHES (BLOW / RELEASE)
   Warm sunset biophilic relaxation with swaying dandelion, detaching seeds,
   and floating intentions.
   ========================================================================== */
.dandelion-sanctuary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 600px;
  width: 100%;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: linear-gradient(180deg, #FBF4EB 0%, #F6E6D3 42%, #ECD4BC 75%, #DFC6AC 100%);
  border: 1px solid rgba(226, 184, 107, 0.35);
  box-shadow: inset 0 2px 24px rgba(226, 184, 107, 0.12), 0 12px 32px rgba(28, 45, 36, 0.06);
  touch-action: manipulation;
  user-select: none;
  padding: 1.5rem 1.25rem 1.25rem;
}

[data-theme="dark"] .dandelion-sanctuary {
  background: linear-gradient(180deg, #181C1E 0%, #202322 40%, #2B2520 75%, #1C1916 100%);
  border-color: rgba(226, 184, 107, 0.2);
  box-shadow: inset 0 2px 24px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* --- Atmospheric Sunset Meadow Backdrop --- */
.dandelion-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.8s ease;
  overflow: hidden;
}

.dandelion-backdrop.has-scenery {
  opacity: 0.42;
  filter: contrast(1.05) saturate(1.1);
}

[data-theme="dark"] .dandelion-backdrop.has-scenery {
  opacity: 0.28;
  filter: brightness(0.8) contrast(1.1);
}

.dandelion-ambient-glow {
  position: absolute;
  top: 15%;
  left: 30%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.38) 0%, rgba(226, 184, 107, 0.08) 60%, transparent 80%);
  filter: blur(48px);
  pointer-events: none;
}

.dandelion-sunset-sun {
  position: absolute;
  top: 18%;
  right: 18%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 230, 0.95) 0%, rgba(255, 224, 160, 0.75) 45%, rgba(240, 180, 100, 0.25) 75%, transparent 100%);
  filter: blur(12px);
  pointer-events: none;
}

.dandelion-meadow-silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(to top, rgba(38, 55, 42, 0.22) 0%, rgba(38, 55, 42, 0.06) 65%, transparent 100%);
  pointer-events: none;
}

[data-theme="dark"] .dandelion-meadow-silhouette {
  background: linear-gradient(to top, rgba(12, 18, 14, 0.65) 0%, rgba(12, 18, 14, 0.2) 65%, transparent 100%);
}

/* --- Interactive Dandelion Canvas --- */
.dandelion-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

/* --- Floating Attached Intention Badge --- */
.dandelion-attached-badge {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(250, 249, 245, 0.94);
  border: 1.5px solid var(--accent-secondary, #E2B86B);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full, 100px);
  box-shadow: 0 4px 18px rgba(226, 184, 107, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: dandelionBadgeFloat 3s ease-in-out infinite alternate;
}

[data-theme="dark"] .dandelion-attached-badge {
  background: rgba(27, 42, 34, 0.94);
  border-color: rgba(226, 184, 107, 0.6);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

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

.dandelion-badge-sparkle {
  font-size: 1rem;
}

.dandelion-badge-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main, #1C2D24);
  letter-spacing: -0.01em;
}

.dandelion-badge-clear {
  background: none;
  border: none;
  color: var(--text-muted, #6B7C72);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.dandelion-badge-clear:hover {
  color: var(--text-main, #1C2D24);
}

/* --- Top Bar Mic Toggle Active State --- */
.dandelion-mic-toggle.mic-active {
  background: rgba(226, 184, 107, 0.22);
  border-color: var(--accent-secondary, #E2B86B);
  color: var(--text-main, #1C2D24);
  box-shadow: 0 0 12px rgba(226, 184, 107, 0.4);
  animation: micPulseGlow 1.8s infinite alternate ease-in-out;
}

@keyframes micPulseGlow {
  0% { box-shadow: 0 0 6px rgba(226, 184, 107, 0.3); }
  100% { box-shadow: 0 0 16px rgba(226, 184, 107, 0.65); }
}

/* --- Input Dock --- */
.dandelion-input-dock {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: auto;
  margin-bottom: 0.75rem;
}

.dandelion-input-bar {
  display: flex;
  align-items: center;
  background: rgba(250, 249, 245, 0.88);
  border: 1.5px solid rgba(226, 184, 107, 0.45);
  border-radius: var(--radius-full, 100px);
  padding: 0.3rem 0.35rem 0.3rem 1.15rem;
  box-shadow: 0 6px 20px rgba(28, 45, 36, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .dandelion-input-bar {
  background: rgba(27, 42, 34, 0.88);
  border-color: rgba(226, 184, 107, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.dandelion-input-bar:focus-within {
  border-color: var(--accent-secondary, #E2B86B);
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.25);
}

.dandelion-thought-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 0.92rem;
  color: var(--text-main, #1C2D24);
  outline: none;
  font-family: inherit;
}

.dandelion-thought-input::placeholder {
  color: var(--text-muted, #6B7C72);
  opacity: 0.85;
}

.dandelion-attach-btn {
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-full, 100px);
  background: linear-gradient(135deg, var(--accent-secondary, #E2B86B) 0%, #C49845 100%);
  color: #1C2D24;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(226, 184, 107, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dandelion-attach-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(226, 184, 107, 0.45);
}

/* Quick Presets Row */
.dandelion-presets-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 0.5rem;
}

.dandelion-preset-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted, #6B7C72);
  margin-right: 0.2rem;
}

.dandelion-preset-chip {
  background: rgba(250, 249, 245, 0.85);
  border: 1px solid rgba(226, 184, 107, 0.35);
  border-radius: var(--radius-full, 100px);
  padding: 0.25rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-main, #1C2D24);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.15s ease;
}

[data-theme="dark"] .dandelion-preset-chip {
  background: rgba(27, 42, 34, 0.8);
  border-color: rgba(226, 184, 107, 0.25);
}

.dandelion-preset-chip:hover {
  border-color: var(--accent-secondary, #E2B86B);
  background: rgba(226, 184, 107, 0.18);
  transform: translateY(-1px);
}

/* --- Prominent Action Controls Dock (Minimum 56px height target) --- */
.dandelion-action-dock {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}

.dandelion-release-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 56px;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-full, 100px);
  background: linear-gradient(135deg, var(--accent-secondary, #E2B86B) 0%, #D49C3C 100%);
  color: #1A2820;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(212, 156, 60, 0.38), 0 2px 6px rgba(28, 45, 36, 0.1);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  touch-action: manipulation;
}

.dandelion-release-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(212, 156, 60, 0.5);
}

.dandelion-release-btn:active {
  transform: translateY(1px) scale(0.98);
}

.dandelion-regrow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-full, 100px);
  background: linear-gradient(135deg, var(--accent-primary, #6B9E82) 0%, #52806B 100%);
  color: #FAF9F5;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(107, 158, 130, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: regrowPulse 2s infinite alternate ease-in-out;
}

@keyframes regrowPulse {
  0% { transform: scale(1); box-shadow: 0 6px 20px rgba(107, 158, 130, 0.35); }
  100% { transform: scale(1.03); box-shadow: 0 10px 28px rgba(107, 158, 130, 0.55); }
}

/* Guidance Hint Pill */
.dandelion-hint-pill {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(250, 249, 245, 0.85);
  border: 1px solid rgba(226, 184, 107, 0.3);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full, 100px);
  font-size: 0.78rem;
  color: var(--text-muted, #6B7C72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(28, 45, 36, 0.04);
}

[data-theme="dark"] .dandelion-hint-pill {
  background: rgba(27, 42, 34, 0.85);
  border-color: rgba(226, 184, 107, 0.2);
}

/* --- Restored Celebration Modal --- */
.dandelion-restored-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(250, 249, 245, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

[data-theme="dark"] .dandelion-restored-card {
  background: rgba(18, 29, 23, 0.92);
}

.dandelion-restored-card.visible {
  opacity: 1;
  pointer-events: auto;
}

.dandelion-restored-aura {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.25) 0%, transparent 70%);
  filter: blur(36px);
  pointer-events: none;
}

.dandelion-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
  gap: 0.85rem;
}

.dandelion-restored-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(226, 184, 107, 0.15);
  border: 1.5px solid var(--accent-secondary, #E2B86B);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(226, 184, 107, 0.25);
  animation: dandelionRestoredPulse 3s infinite ease-in-out;
}

@keyframes dandelionRestoredPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.dandelion-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main, #1C2D24);
  letter-spacing: -0.02em;
  margin: 0;
}

.dandelion-restored-desc {
  font-size: 0.92rem;
  color: var(--text-muted, #6B7C72);
  line-height: 1.5;
  margin: 0;
}

.dandelion-restored-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.dandelion-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(226, 184, 107, 0.14);
  border: 1px solid rgba(226, 184, 107, 0.4);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full, 100px);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-main, #1C2D24);
}

.dandelion-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.6rem;
  background: linear-gradient(135deg, var(--accent-secondary, #E2B86B) 0%, #D49C3C 100%);
  color: #1A2820;
  border: none;
  border-radius: var(--radius-full, 100px);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(226, 184, 107, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 0.3rem;
}

.dandelion-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.5);
}

/* --- Mobile Responsiveness (down to 360px viewport) --- */
@media (max-width: 480px) {
  .dandelion-sanctuary {
    padding: 1.15rem 0.75rem 1rem;
    min-height: 520px;
  }

  .dandelion-release-btn {
    min-height: 52px;
    padding: 0.65rem 1.4rem;
    font-size: 0.94rem;
  }

  .dandelion-thought-input {
    font-size: 0.84rem;
  }

  .dandelion-attach-btn {
    padding: 0.45rem 0.95rem;
    font-size: 0.78rem;
  }

  .dandelion-preset-chip {
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
  }
}

/* ==========================================================================
   ACTIVITY 20: THE KNOT UNBINDER
   Tactile somatic stress relief: drag glowing touch nodes to loosen a tight
   rope knot until it glides open into a smooth, flowing strand of calm.
   ========================================================================== */
.knot-sanctuary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 600px;
  width: 100%;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #F8FAF7 0%, #EEF4F0 55%, #E2ECE5 100%);
  border: 1px solid rgba(107, 158, 130, 0.35);
  box-shadow: inset 0 2px 28px rgba(107, 158, 130, 0.1), 0 12px 32px rgba(28, 45, 36, 0.06);
  touch-action: manipulation;
  user-select: none;
  padding: 1.5rem 1.25rem 1.25rem;
}

[data-theme="dark"] .knot-sanctuary {
  background: radial-gradient(circle at 50% 40%, #1A2820 0%, #121D17 60%, #0D1611 100%);
  border-color: rgba(107, 158, 130, 0.22);
  box-shadow: inset 0 2px 28px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* --- Atmospheric Zen Backdrop --- */
.knot-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.8s ease;
  overflow: hidden;
}

.knot-backdrop.has-scenery {
  opacity: 0.38;
  filter: contrast(1.04) saturate(1.08);
}

[data-theme="dark"] .knot-backdrop.has-scenery {
  opacity: 0.24;
  filter: brightness(0.8) contrast(1.1);
}

.knot-ambient-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.28) 0%, rgba(226, 184, 107, 0.12) 45%, transparent 70%);
  filter: blur(48px);
  pointer-events: none;
}

.knot-zen-rings {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px dashed rgba(107, 158, 130, 0.18);
  pointer-events: none;
}

.knot-zen-rings::before {
  content: '';
  position: absolute;
  inset: 50px;
  border-radius: 50%;
  border: 1px solid rgba(107, 158, 130, 0.1);
}

/* --- Interactive Canvas (touch-action: none mandatory for drag) --- */
.knot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
  touch-action: none !important;
  cursor: grab;
}

.knot-canvas:active {
  cursor: grabbing;
}

/* --- Tension Gauge Dock at Bottom --- */
.knot-tension-dock {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: rgba(250, 249, 245, 0.88);
  border: 1.5px solid rgba(107, 158, 130, 0.35);
  border-radius: var(--radius-lg, 16px);
  padding: 0.85rem 1.25rem;
  box-shadow: 0 6px 20px rgba(28, 45, 36, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: auto;
  margin-bottom: 0.5rem;
}

[data-theme="dark"] .knot-tension-dock {
  background: rgba(27, 42, 34, 0.88);
  border-color: rgba(107, 158, 130, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.knot-tension-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.knot-tension-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted, #6B7C72);
  white-space: nowrap;
}

.knot-tension-track {
  flex: 1;
  height: 10px;
  background: rgba(28, 45, 36, 0.08);
  border-radius: var(--radius-full, 100px);
  overflow: hidden;
  position: relative;
}

[data-theme="dark"] .knot-tension-track {
  background: rgba(255, 255, 255, 0.1);
}

.knot-tension-fill {
  height: 100%;
  border-radius: var(--radius-full, 100px);
  background: linear-gradient(90deg, #6B9E82 0%, #E2B86B 100%);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.knot-tension-pct {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-main, #1C2D24);
  min-width: 42px;
  text-align: right;
}

/* Dots and Status Row */
.knot-loops-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(107, 158, 130, 0.15);
}

.knot-dots-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.knot-loop-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(28, 45, 36, 0.15);
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
}

.knot-loop-dot.active {
  background: var(--accent-secondary, #E2B86B);
  border-color: #C49A45;
  box-shadow: 0 0 8px rgba(226, 184, 107, 0.6);
  animation: dotPulse 1.8s infinite alternate ease-in-out;
}

@keyframes dotPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}

.knot-loop-dot.loosened {
  background: var(--accent-primary, #6B9E82);
  border-color: #52806B;
  box-shadow: 0 0 6px rgba(107, 158, 130, 0.5);
}

.knot-loops-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #6B7C72);
}

/* Guidance Hint Pill */
.knot-hint-pill {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(250, 249, 245, 0.85);
  border: 1px solid rgba(107, 158, 130, 0.3);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full, 100px);
  font-size: 0.78rem;
  color: var(--text-muted, #6B7C72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(28, 45, 36, 0.04);
}

[data-theme="dark"] .knot-hint-pill {
  background: rgba(27, 42, 34, 0.85);
  border-color: rgba(107, 158, 130, 0.2);
}

/* --- Restored Celebration Modal --- */
.knot-restored-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(250, 249, 245, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

[data-theme="dark"] .knot-restored-card {
  background: rgba(18, 29, 23, 0.92);
}

.knot-restored-card.visible {
  opacity: 1;
  pointer-events: auto;
}

.knot-restored-aura {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.3) 0%, transparent 70%);
  filter: blur(36px);
  pointer-events: none;
}

.knot-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
  gap: 0.85rem;
}

.knot-restored-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(107, 158, 130, 0.15);
  border: 1.5px solid var(--accent-primary, #6B9E82);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(107, 158, 130, 0.28);
  animation: knotRestoredPulse 3s infinite ease-in-out;
}

@keyframes knotRestoredPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.knot-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main, #1C2D24);
  letter-spacing: -0.02em;
  margin: 0;
}

.knot-restored-desc {
  font-size: 0.92rem;
  color: var(--text-muted, #6B7C72);
  line-height: 1.5;
  margin: 0;
}

.knot-restored-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.knot-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(107, 158, 130, 0.14);
  border: 1px solid rgba(107, 158, 130, 0.4);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full, 100px);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-main, #1C2D24);
}

.knot-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.6rem;
  background: linear-gradient(135deg, var(--accent-primary, #6B9E82) 0%, #52806B 100%);
  color: #FAF9F5;
  border: none;
  border-radius: var(--radius-full, 100px);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(107, 158, 130, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 0.3rem;
}

.knot-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 158, 130, 0.5);
}

/* --- Mobile Responsiveness (down to 360px viewport) --- */
@media (max-width: 480px) {
  .knot-sanctuary {
    padding: 1.15rem 0.75rem 1rem;
    min-height: 520px;
  }

  .knot-tension-dock {
    padding: 0.75rem 0.95rem;
  }

  .knot-tension-label {
    font-size: 0.72rem;
  }

  .knot-tension-pct {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   ACTIVITY 21: HEAVY BACKPACK DROP
   Tactile somatic stress relief: unpack heavy labeled mental burden stones
   from a bulging backpack and toss them into a tranquil river.
   ========================================================================== */
.backpack-sanctuary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 620px;
  width: 100%;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: linear-gradient(135deg, #F8F5EF 0%, #EEF4F0 45%, #DCEBE2 100%);
  border: 1px solid rgba(196, 124, 93, 0.35);
  box-shadow: inset 0 2px 28px rgba(196, 124, 93, 0.08), 0 12px 32px rgba(28, 45, 36, 0.06);
  touch-action: manipulation;
  user-select: none;
  padding: 1.5rem 1.25rem 1.25rem;
}

[data-theme="dark"] .backpack-sanctuary {
  background: linear-gradient(135deg, #1C1917 0%, #15221B 45%, #0E1A14 100%);
  border-color: rgba(196, 124, 93, 0.25);
  box-shadow: inset 0 2px 28px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* --- Atmospheric River & Shore Backdrop --- */
.backpack-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.8s ease;
  overflow: hidden;
}

.backpack-backdrop.has-scenery {
  opacity: 0.40;
  filter: contrast(1.05) saturate(1.1);
}

[data-theme="dark"] .backpack-backdrop.has-scenery {
  opacity: 0.25;
  filter: brightness(0.8) contrast(1.1);
}

.backpack-ambient-glow {
  position: absolute;
  top: 20%;
  right: 25%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.35) 0%, rgba(226, 184, 107, 0.1) 50%, transparent 75%);
  filter: blur(48px);
  pointer-events: none;
}

.backpack-river-water {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  background: linear-gradient(135deg, rgba(107, 158, 130, 0.18) 0%, rgba(68, 118, 98, 0.28) 60%, rgba(42, 85, 70, 0.38) 100%);
  border-left: 2px dashed rgba(107, 158, 130, 0.25);
  pointer-events: none;
}

[data-theme="dark"] .backpack-river-water {
  background: linear-gradient(135deg, rgba(20, 50, 40, 0.35) 0%, rgba(15, 40, 32, 0.5) 60%, rgba(10, 30, 24, 0.65) 100%);
}

.backpack-river-shore {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48%;
  height: 60px;
  background: radial-gradient(ellipse at bottom left, rgba(196, 124, 93, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Interactive River Canvas (Splashes & Ripples) --- */
.backpack-river-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* --- Dual-Zone Playfield --- */
.backpack-playfield {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex: 1;
  gap: 1.5rem;
  padding: 0.5rem 0.5rem 1rem;
}

/* Backpack Unit Visual */
.backpack-unit {
  position: relative;
  width: 320px;
  max-width: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.35s ease;
}

.backpack-straps {
  position: absolute;
  top: -12px;
  width: 140px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.backpack-strap {
  width: 22px;
  height: 28px;
  background: #6B4031;
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.backpack-body {
  position: relative;
  width: 100%;
  min-height: 280px;
  background: linear-gradient(180deg, #C47C5D 0%, #A86043 45%, #8C472C 100%);
  border: 2px solid #6E3621;
  border-radius: 28px 28px 20px 20px;
  box-shadow: 0 16px 36px rgba(45, 25, 18, 0.28), inset 0 2px 8px rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.85rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

[data-theme="dark"] .backpack-body {
  background: linear-gradient(180deg, #9C5E45 0%, #824730 45%, #66331E 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.backpack-top-flap {
  width: 90%;
  height: 38px;
  background: #804028;
  border-radius: 12px;
  border: 1.5px solid #5A2B18;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  margin-bottom: 0.65rem;
}

.backpack-brand-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FAF9F5;
  text-transform: uppercase;
  opacity: 0.88;
}

.backpack-pocket {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.65rem;
}

.backpack-strain-indicator {
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full, 100px);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
}

.backpack-strain-indicator.strain-high {
  background: rgba(224, 106, 85, 0.25);
  color: #FFE6E0;
  border: 1px solid rgba(224, 106, 85, 0.6);
  animation: strainWobble 2s infinite ease-in-out;
}

.backpack-strain-indicator.strain-medium {
  background: rgba(226, 184, 107, 0.25);
  color: #FFF2D6;
  border: 1px solid rgba(226, 184, 107, 0.6);
}

.backpack-strain-indicator.strain-low {
  background: rgba(107, 158, 130, 0.25);
  color: #E2F2E9;
  border: 1px solid rgba(107, 158, 130, 0.6);
}

.backpack-strain-indicator.strain-zero {
  background: rgba(107, 158, 130, 0.45);
  color: #FFFFFF;
  border: 1.5px solid #6B9E82;
  box-shadow: 0 0 14px rgba(107, 158, 130, 0.65);
}

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

/* Stones Dock Inside Backpack */
.backpack-stones-dock {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  min-height: 140px;
}

/* Heavy Stone Touch Item (Min 56px height, rounded 12px) */
.heavy-stone-item {
  position: relative;
  min-height: 56px;
  width: 100%;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 2px 6px rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  padding: 0.65rem 1rem;
  cursor: grab;
  touch-action: none !important;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.18s ease;
  z-index: 5;
}

.heavy-stone-item:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border-color: var(--accent-secondary, #E2B86B);
}

.heavy-stone-item.is-dragging {
  cursor: grabbing;
  z-index: 100;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  border-color: #FAF9F5;
}

.stone-texture-grain {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
}

.stone-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.stone-icon {
  font-size: 1.25rem;
}

.stone-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  color: #FAF9F5;
  letter-spacing: -0.01em;
  flex: 1;
}

.stone-weight-tag {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full, 100px);
  background: rgba(0, 0, 0, 0.35);
  color: var(--accent-secondary, #E2B86B);
  border: 1px solid rgba(226, 184, 107, 0.3);
}

.backpack-shadow {
  width: 90%;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0%, transparent 70%);
  margin-top: 6px;
}

/* River Drop Target Zone */
.river-target-zone {
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--radius-lg, 16px);
  background: rgba(107, 158, 130, 0.12);
  border: 2px dashed rgba(107, 158, 130, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.river-zone-wave {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1.5px solid rgba(107, 158, 130, 0.3);
  pointer-events: none;
  animation: riverWavePulse 4s infinite linear;
}

.river-zone-wave.wave-2 {
  animation-delay: 2s;
}

@keyframes riverWavePulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.river-zone-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main, #1C2D24);
  pointer-events: none;
}

.river-zone-icon {
  font-size: 2rem;
  animation: riverBob 3s infinite ease-in-out;
}

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

/* Custom Input Dock at Bottom */
.backpack-input-dock {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 540px;
  margin-top: auto;
  margin-bottom: 0.65rem;
}

.backpack-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(250, 249, 245, 0.88);
  border: 1.5px solid rgba(196, 124, 93, 0.4);
  border-radius: var(--radius-full, 100px);
  padding: 0.3rem 0.35rem 0.3rem 1.15rem;
  box-shadow: 0 6px 20px rgba(28, 45, 36, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .backpack-input-wrap {
  background: rgba(27, 42, 34, 0.88);
  border-color: rgba(196, 124, 93, 0.28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.backpack-input-wrap:focus-within {
  border-color: #C47C5D;
  box-shadow: 0 8px 24px rgba(196, 124, 93, 0.25);
}

.backpack-custom-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  color: var(--text-main, #1C2D24);
  outline: none;
  font-family: inherit;
}

.backpack-custom-input::placeholder {
  color: var(--text-muted, #6B7C72);
  opacity: 0.85;
}

.backpack-add-stone-btn {
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-full, 100px);
  background: linear-gradient(135deg, #C47C5D 0%, #A86043 100%);
  color: #FAF9F5;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(196, 124, 93, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.backpack-add-stone-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(196, 124, 93, 0.45);
}

/* Guidance Hint Pill */
.backpack-hint-pill {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(250, 249, 245, 0.85);
  border: 1px solid rgba(196, 124, 93, 0.3);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full, 100px);
  font-size: 0.78rem;
  color: var(--text-muted, #6B7C72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(28, 45, 36, 0.04);
}

[data-theme="dark"] .backpack-hint-pill {
  background: rgba(27, 42, 34, 0.85);
  border-color: rgba(196, 124, 93, 0.2);
}

/* --- Restored Celebration Modal --- */
.backpack-restored-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(250, 249, 245, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

[data-theme="dark"] .backpack-restored-card {
  background: rgba(18, 29, 23, 0.92);
}

.backpack-restored-card.visible {
  opacity: 1;
  pointer-events: auto;
}

.backpack-restored-aura {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 124, 93, 0.28) 0%, rgba(107, 158, 130, 0.15) 50%, transparent 70%);
  filter: blur(36px);
  pointer-events: none;
}

.backpack-restored-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
  gap: 0.85rem;
}

.backpack-restored-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(196, 124, 93, 0.15);
  border: 1.5px solid #C47C5D;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(196, 124, 93, 0.28);
  animation: backpackRestoredPulse 3s infinite ease-in-out;
}

@keyframes backpackRestoredPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.backpack-restored-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main, #1C2D24);
  letter-spacing: -0.02em;
  margin: 0;
}

.backpack-restored-desc {
  font-size: 0.92rem;
  color: var(--text-muted, #6B7C72);
  line-height: 1.5;
  margin: 0;
}

.backpack-restored-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.backpack-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(196, 124, 93, 0.14);
  border: 1px solid rgba(196, 124, 93, 0.4);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full, 100px);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-main, #1C2D24);
}

.backpack-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.6rem;
  background: linear-gradient(135deg, #C47C5D 0%, #A86043 100%);
  color: #FAF9F5;
  border: none;
  border-radius: var(--radius-full, 100px);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(196, 124, 93, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: 0.3rem;
}

.backpack-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 124, 93, 0.5);
}

/* --- Mobile Responsiveness (down to 360px viewport) --- */
@media (max-width: 600px) {
  .backpack-sanctuary {
    padding: 1.15rem 0.75rem 1rem;
    min-height: 560px;
  }

  .backpack-playfield {
    flex-direction: column-reverse;
    gap: 0.85rem;
  }

  .backpack-unit {
    width: 100%;
    max-width: 100%;
  }

  .river-target-zone {
    width: 100%;
    min-height: 120px;
  }

  .heavy-stone-item {
    min-height: 52px;
    padding: 0.5rem 0.85rem;
  }

  .stone-label {
    font-size: 0.86rem;
  }
}




/* ============================================================================
   ACTIVITY 22: THE BURNING CANDLE / ICE CUBE MELT — Thermal Reset Styles
   ============================================================================ */

.candle-ice-sanctuary {
  position: relative;
  width: 100%;
  min-height: 580px;
  background: linear-gradient(160deg, #1C2D24 0%, #121D17 40%, #1A1206 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem 1.5rem;
  gap: 1rem;
}

.candle-ice-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.8s ease;
}

.candle-ice-backdrop.has-scenery {
  opacity: 0.22;
}

.thermal-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Mode Tab Switcher */
.thermal-mode-tabs {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 0.5rem;
  background: rgba(28, 45, 36, 0.7);
  border: 1px solid rgba(107, 158, 130, 0.2);
  border-radius: var(--radius-full);
  padding: 0.35rem;
  margin-top: 0.75rem;
  backdrop-filter: blur(8px);
}

.thermal-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  min-height: 40px;
}

.thermal-tab-btn .tab-icon {
  font-size: 1.1rem;
}

.thermal-tab-btn:hover {
  background: rgba(107, 158, 130, 0.15);
  color: var(--accent-primary);
}

.thermal-tab-btn.active {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 2px 12px rgba(107, 158, 130, 0.4);
}

/* Central Thermal Core Stage */
.thermal-core-stage {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 240px;
}

.thermal-element-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 230px;
}

.thermal-element-wrap[hidden] {
  display: none !important;
}

/* ─── ICE CUBE 3D CSS ─── */
.ice-aura {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.6s ease, transform 0.6s ease;
  z-index: 1;
}

.ice-cube-unit {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ice-cube-mesh {
  width: 130px;
  height: 130px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(22deg);
  transition: transform 0.5s ease, opacity 0.5s ease;
  cursor: default;
}

.ice-face {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 2px solid rgba(170, 220, 255, 0.55);
  background: linear-gradient(135deg, rgba(180, 230, 255, 0.22) 0%, rgba(140, 200, 240, 0.12) 100%);
  backdrop-filter: blur(6px);
  border-radius: 6px;
  box-shadow: inset 0 0 18px rgba(100, 200, 255, 0.15);
}

.face-front  { transform: translateZ(65px); }
.face-back   { transform: rotateY(180deg) translateZ(65px); }
.face-top    { transform: rotateX(90deg) translateZ(65px); background: rgba(200, 240, 255, 0.2); }
.face-bottom { transform: rotateX(-90deg) translateZ(65px); }
.face-left   { transform: rotateY(-90deg) translateZ(65px); }
.face-right  { transform: rotateY(90deg) translateZ(65px); }

.ice-crack {
  position: absolute;
  background: rgba(100, 200, 255, 0.5);
  border-radius: 2px;
  pointer-events: none;
}

.ice-crack.c1 {
  width: 2px;
  height: 55px;
  top: 28%;
  left: 35%;
  transform: rotate(18deg);
}

.ice-crack.c2 {
  width: 2px;
  height: 38px;
  top: 48%;
  left: 55%;
  transform: rotate(-12deg);
}

.ice-water-shine {
  display: block;
  width: 60%;
  height: 30%;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  position: absolute;
  top: 20%;
  left: 20%;
  filter: blur(4px);
}

/* Ice Melt Pool */
.ice-melt-pool {
  width: 160px;
  height: 30px;
  position: relative;
  margin-top: -8px;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.ice-pool-water {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(107, 158, 130, 0.5) 0%, rgba(107, 158, 130, 0.1) 70%, transparent 100%);
  border-radius: 50%;
  filter: blur(3px);
}

.ice-pool-ripple {
  position: absolute;
  border: 1.5px solid rgba(107, 158, 130, 0.4);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.ice-pool-ripple.r1 {
  width: 80px;
  height: 18px;
  animation: iceRipple 2.5s ease-out infinite;
}

.ice-pool-ripple.r2 {
  width: 120px;
  height: 22px;
  animation: iceRipple 2.5s ease-out 1.25s infinite;
}

@keyframes iceRipple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* ─── CANDLE CSS ─── */
.candle-aura {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.5s ease, transform 0.5s ease;
  z-index: 1;
  filter: blur(20px);
}

.candle-unit {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.candle-wax-body {
  position: relative;
  width: 62px;
  background: linear-gradient(to bottom, #FAF0DC 0%, #E8D5A8 60%, #D4C08A 100%);
  height: 110px;
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset -4px 0 10px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.2);
  margin-top: 30px;
}

.candle-wax-top {
  width: 100%;
  height: 12px;
  background: linear-gradient(to bottom, #FFF8E8 0%, #F5E4B8 100%);
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  position: relative;
  display: flex;
  justify-content: center;
}

.candle-wick {
  width: 3px;
  height: 14px;
  background: linear-gradient(to bottom, #2D1A0A, #5C3A1E);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  transform: translateY(-4px);
}

.candle-wax-drip {
  position: absolute;
  width: 12px;
  height: 22px;
  background: linear-gradient(to bottom, #FAF0DC, #E8D5A8);
  border-radius: 0 0 8px 8px;
}

.candle-wax-drip.drip-1 { top: 8px; left: -4px; transform: rotate(-8deg); }
.candle-wax-drip.drip-2 { top: 16px; right: -3px; transform: rotate(5deg); }

.candle-flame-wrap {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.flame-outer {
  position: absolute;
  bottom: 0;
  width: 36px;
  height: 50px;
  background: radial-gradient(ellipse at 50% 80%, #FF6B2B 0%, #E2B86B 35%, rgba(226, 184, 107, 0) 75%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  filter: blur(2px);
  animation: flameDance 0.18s ease-in-out infinite alternate;
}

.flame-inner {
  position: absolute;
  bottom: 4px;
  width: 20px;
  height: 30px;
  background: radial-gradient(ellipse at 50% 80%, #FFF5CC 0%, #FFD700 40%, rgba(255, 215, 0, 0) 80%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
}

@keyframes flameDance {
  from { transform: scaleX(1) skewX(-2deg); }
  to   { transform: scaleX(1.1) skewX(2deg); }
}

.flame-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FFD700;
  animation: sparkFloat 0.6s ease-out infinite;
  pointer-events: none;
}

.flame-spark.s1 { left: 30%; animation-delay: 0s;    animation-duration: 0.55s; }
.flame-spark.s2 { left: 60%; animation-delay: 0.2s;  animation-duration: 0.7s; }
.flame-spark.s3 { left: 48%; animation-delay: 0.4s;  animation-duration: 0.5s; }

@keyframes sparkFloat {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-30px) scale(0.2) translateX(calc((var(--drift, 1) - 0.5) * 20px)); opacity: 0; }
}

.candle-stand-dish {
  width: 85px;
  height: 14px;
  background: linear-gradient(to bottom, #C0A060, #8B7040);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  margin-top: -3px;
}

/* Status Badges */
.thermal-gauge-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.4s ease;
}

.thermal-gauge-badge.high-heat {
  background: rgba(196, 75, 50, 0.25);
  border: 1px solid rgba(196, 75, 50, 0.45);
  color: #FF8C78;
}

.thermal-gauge-badge.warm-heat {
  background: rgba(226, 184, 107, 0.22);
  border: 1px solid rgba(226, 184, 107, 0.4);
  color: #E2B86B;
}

.thermal-gauge-badge.calm-mint {
  background: rgba(107, 158, 130, 0.2);
  border: 1px solid rgba(107, 158, 130, 0.4);
  color: var(--accent-primary);
}

/* Controls Deck */
.thermal-controls-deck {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 520px;
}

/* Squishy Mist Button */
.thermal-mist-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, #6B9E82 0%, #4D8A6A 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 20px rgba(107, 158, 130, 0.45);
  min-height: 64px;
  touch-action: none;
  user-select: none;
}

.thermal-mist-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 28px rgba(107, 158, 130, 0.6);
}

.thermal-mist-btn.misting-active {
  transform: scale(0.96);
  box-shadow: 0 2px 10px rgba(107, 158, 130, 0.35);
  background: linear-gradient(135deg, #4D8A6A 0%, #3A6E55 100%);
}

.mist-btn-spray-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.thermal-mist-btn.misting-active .mist-btn-spray-ripple {
  opacity: 1;
  animation: mistPulse 0.4s ease-in-out infinite alternate;
}

@keyframes mistPulse {
  from { opacity: 0.3; }
  to   { opacity: 0.7; }
}

.mist-btn-icon { font-size: 1.6rem; }

.mist-btn-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.mist-btn-label strong { font-size: 1rem; }
.mist-btn-label small  { font-size: 0.78rem; opacity: 0.85; font-weight: 400; }

/* Temperature Slider */
.thermal-slider-container {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.thermal-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.slider-temp-current {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-secondary);
  min-width: 58px;
  text-align: center;
}

.thermal-slider-track-wrap {
  width: 100%;
}

.thermal-temp-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, #6B9E82, #E2B86B, #C44B32);
  outline: none;
  cursor: pointer;
  touch-action: none;
}

.thermal-temp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FAF9F5;
  border: 3px solid var(--accent-secondary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.thermal-temp-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

.thermal-temp-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FAF9F5;
  border: 3px solid var(--accent-secondary);
  cursor: pointer;
}

/* Hint Pill */
.thermal-hint-pill {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(28, 45, 36, 0.75);
  border: 1px solid rgba(107, 158, 130, 0.25);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  color: var(--text-muted);
  backdrop-filter: blur(6px);
}

/* Pulse Dot — Hot & Warm States */
.pulse-dot.hot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6B4A;
  box-shadow: 0 0 0 0 rgba(255, 107, 74, 0.5);
  animation: pulseHot 1.1s ease-in-out infinite;
}

@keyframes pulseHot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 107, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0); }
}

.pulse-dot.warm {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E2B86B;
  box-shadow: 0 0 0 0 rgba(226, 184, 107, 0.5);
  animation: pulseWarm 1.4s ease-in-out infinite;
}

@keyframes pulseWarm {
  0%   { box-shadow: 0 0 0 0 rgba(226, 184, 107, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(226, 184, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 184, 107, 0); }
}

/* Restored Card */
.thermal-restored-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 29, 23, 0.88);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  animation: fadeInRestored 0.4s ease;
}

.thermal-restored-card[hidden] { display: none; }

.thermal-restored-aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(107, 158, 130, 0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: auraBreath 3s ease-in-out infinite;
}

.thermal-restored-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.thermal-restored-title {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--accent-primary);
  margin: 0;
}

.thermal-restored-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.thermal-restored-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.thermal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: rgba(107, 158, 130, 0.18);
  border: 1px solid rgba(107, 158, 130, 0.35);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  color: var(--accent-primary);
  font-weight: 500;
}

.thermal-replay-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--accent-primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 18px rgba(107, 158, 130, 0.4);
}

.thermal-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 158, 130, 0.55);
}

/* Mobile */
@media (max-width: 600px) {
  .candle-ice-sanctuary { min-height: 520px; padding: 0 0.75rem 1.25rem; }
  .thermal-mode-tabs { flex-wrap: wrap; justify-content: center; }
  .thermal-tab-btn { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
  .thermal-mist-btn { padding: 0.85rem 1.25rem; min-height: 58px; }
  .thermal-slider-container { max-width: 100%; }
  .ice-cube-mesh { width: 100px; height: 100px; }
  .ice-face { width: 100px; height: 100px; }
}


/* ============================================================================
   ACTIVITY 23: PET-A-PET / HUG-A-TREE — Comfort Connection Styles
   ============================================================================ */

.pet-sanctuary {
  position: relative;
  width: 100%;
  min-height: 580px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem 1.5rem;
  gap: 0.85rem;
  background: linear-gradient(160deg, #2A1F12 0%, #1A2A1C 50%, #12180E 100%);
}

/* Backdrop */
.pet-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.8s ease;
}

.pet-backdrop.has-scenery { opacity: 0.18; }

/* Particle Canvas */
.pet-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Mode Tabs */
.pet-mode-tabs {
  position: relative;
  z-index: 4;
  display: flex;
  gap: 0.5rem;
  background: rgba(18, 24, 14, 0.75);
  border: 1px solid rgba(107, 158, 130, 0.2);
  border-radius: var(--radius-full);
  padding: 0.35rem;
  margin-top: 0.75rem;
  backdrop-filter: blur(8px);
}

.pet-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  min-height: 40px;
}

.pet-tab-btn:hover {
  background: rgba(226, 184, 107, 0.15);
  color: var(--accent-secondary);
}

.pet-tab-btn.active {
  background: var(--accent-secondary);
  color: #1C2D24;
  box-shadow: 0 2px 12px rgba(226, 184, 107, 0.4);
}

/* Core Stage */
.pet-core-stage {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: 260px;
}

.pet-element-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 240px;
}

.pet-element-wrap[hidden] {
  display: none !important;
}

/* ─── PET MODE ─── */
.pet-aura {
  position: absolute;
  width: 280px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(226, 184, 107, 0.08) 0%, transparent 70%);
  transition: background 0.5s ease, transform 0.5s ease;
  z-index: 1;
  filter: blur(16px);
}

.pet-cushion-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}

.pet-cushion {
  width: 220px;
  height: 60px;
  background: radial-gradient(ellipse at 50% 30%, #D4956A 0%, #A0622E 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 -6px 16px rgba(0,0,0,0.15);
  position: relative;
  margin-top: 110px;
}

/* Sleeping Pet (Cat) — pure CSS illustration */
.pet-body {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 64px;
  background: radial-gradient(ellipse at 50% 40%, #E8C480 0%, #C9A040 100%);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  cursor: crosshair;
  transition: transform 0.12s ease;
}

.pet-body.being-pet {
  animation: petPurrBounce 0.35s ease-in-out infinite alternate;
}

@keyframes petPurrBounce {
  from { transform: translateX(-50%) scaleY(1.0); }
  to   { transform: translateX(-50%) scaleY(1.04) scaleX(0.98); }
}

.pet-head {
  position: absolute;
  width: 68px;
  height: 60px;
  background: radial-gradient(ellipse at 45% 40%, #E8C480 0%, #C9A040 100%);
  border-radius: 50%;
  top: -50px;
  right: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

/* Ears */
.pet-head::before,
.pet-head::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 20px solid #C9A040;
  top: -12px;
}

.pet-head::before { left: 4px; transform: rotate(-10deg); }
.pet-head::after  { right: 4px; transform: rotate(10deg); }

/* Sleeping eyes (closed arcs) */
.pet-eyes {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.pet-eye {
  width: 14px;
  height: 7px;
  border-bottom: 3px solid #5C3A10;
  border-radius: 0 0 50% 50%;
}

/* Tail curling */
.pet-tail {
  position: absolute;
  width: 60px;
  height: 20px;
  border: 5px solid #C9A040;
  border-color: #C9A040 transparent transparent transparent;
  border-radius: 50% 50% 0 0;
  bottom: -12px;
  left: -30px;
  transform: rotate(-18deg);
}

/* Heart glow on pet */
.pet-heart-burst {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  animation: heartRise 1.2s ease-out forwards;
  z-index: 6;
  font-size: 1.2rem;
  text-align: center;
  line-height: 22px;
}

@keyframes heartRise {
  0%   { transform: translateY(0) scale(0.7); opacity: 1; }
  60%  { transform: translateY(-55px) scale(1.1); opacity: 0.9; }
  100% { transform: translateY(-90px) scale(0.4); opacity: 0; }
}

/* Purr Indicator */
.pet-purr-indicator {
  position: absolute;
  z-index: 4;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: var(--accent-secondary);
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
}

.pet-purr-indicator.active {
  opacity: 1;
  animation: purrPulse 0.5s ease-in-out infinite alternate;
}

@keyframes purrPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* ─── TREE MODE ─── */
.tree-aura {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(107, 158, 130, 0.06) 0%, transparent 70%);
  z-index: 1;
  filter: blur(24px);
  transition: background 0.6s ease, transform 0.6s ease;
}

.tree-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

/* AI-Generated Majestic Ancient Tree Illustration & Hugging Ring */
.tree-ai-illustration-wrap {
  position: relative;
  width: 250px;
  max-width: 88vw;
  height: 250px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 0 24px rgba(107, 158, 130, 0.2);
  border: 1.5px solid rgba(107, 158, 130, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111A13;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.tree-ai-illustration-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}

.tree-wrap.hugging .tree-ai-illustration-wrap,
.tree-wrap:active .tree-ai-illustration-wrap {
  transform: scale(0.97);
  filter: brightness(1.15) saturate(1.2);
  box-shadow: 0 16px 44px rgba(107, 158, 130, 0.45), inset 0 0 32px rgba(107, 158, 130, 0.4);
}

.tree-trunk-hug-target {
  position: absolute;
  bottom: 0;
  width: 90px;
  height: 130px;
  pointer-events: none;
}

/* Sap glow veins on hug */
.tree-sap-vein {
  position: absolute;
  background: linear-gradient(to bottom, rgba(107, 158, 130, 0), rgba(226, 184, 107, 0.65), rgba(107, 158, 130, 0));
  width: 3.5px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  animation: sapFlow 1.6s ease-in-out infinite;
}

.tree-trunk-hug-target.hugging .tree-sap-vein,
.tree-wrap.hugging .tree-sap-vein {
  opacity: 1;
}

.tree-sap-vein:nth-child(1) { left: 25%; top: 15%; height: 75%; animation-delay: 0s; }
.tree-sap-vein:nth-child(2) { left: 50%; top: 10%; height: 85%; animation-delay: 0.35s; }
.tree-sap-vein:nth-child(3) { left: 75%; top: 20%; height: 70%; animation-delay: 0.7s; }

@keyframes sapFlow {
  0%   { transform: translateY(-10%); opacity: 0.3; }
  50%  { opacity: 0.85; }
  100% { transform: translateY(10%); opacity: 0.3; }
}

/* Hug Press Indicator Ring */
.tree-hug-ring {
  position: absolute;
  width: 140px;
  height: 180px;
  border: 3px solid rgba(226, 184, 107, 0.55);
  border-radius: 50% 50% 48% 48% / 35% 35% 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
  z-index: 3;
}

.tree-trunk-hug-target.hugging .tree-hug-ring,
.tree-wrap.hugging .tree-hug-ring {
  transform: translate(-50%, -50%) scale(1.05);
  opacity: 1;
}

/* Grounding Depth Meter */
.pet-depth-meter {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 440px;
}

.pet-depth-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 72px;
}

.pet-depth-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.pet-depth-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.pet-depth-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-secondary);
  min-width: 38px;
  text-align: right;
}

/* Hint pill */
.pet-hint-pill {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(18, 24, 14, 0.75);
  border: 1px solid rgba(107, 158, 130, 0.2);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  color: var(--text-muted);
  backdrop-filter: blur(6px);
}

/* Connection Restored Card */
.pet-restored-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 18, 10, 0.88);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  animation: fadeInRestored 0.4s ease;
}

.pet-restored-card[hidden] { display: none; }

.pet-restored-aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(226, 184, 107, 0.14) 0%, transparent 70%);
  pointer-events: none;
  animation: auraBreath 3s ease-in-out infinite;
}

.pet-restored-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.pet-restored-title {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--accent-secondary);
  margin: 0;
}

.pet-restored-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.pet-restored-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.pet-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: rgba(226, 184, 107, 0.15);
  border: 1px solid rgba(226, 184, 107, 0.32);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  color: var(--accent-secondary);
  font-weight: 500;
}

.pet-replay-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--accent-secondary);
  color: #1C2D24;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 18px rgba(226, 184, 107, 0.4);
}

.pet-replay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(226, 184, 107, 0.55);
}

/* Mobile */
@media (max-width: 600px) {
  .pet-sanctuary { min-height: 520px; padding: 0 0.75rem 1.25rem; }
  .pet-mode-tabs { flex-wrap: wrap; justify-content: center; }
  .pet-tab-btn { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
  .pet-cushion { width: 180px; }
  .pet-body { width: 110px; }
  .tree-trunk { width: 68px; height: 120px; }
  .tree-canopy-layer:nth-child(2) { width: 160px; }
}