/* Daily practice renewal layer
   Wire from app/index.html after the base app stylesheet. */

:root {
  --tam-night: #15120c;
  --tam-ember: #241a12;
  --tam-cedar: #332319;
  --tam-paper: #fbf0dd;
  --tam-sand: rgba(251, 240, 221, 0.68);
  --tam-clay: #d46f45;
  --tam-amber: #d8a447;
  --tam-wine: #7b2432;
  --tam-script: 'Lora', Georgia, serif;
}

html,
body {
  background: var(--tam-night);
}

.screen {
  background:
    radial-gradient(circle at 50% -18%, rgba(216, 164, 71, 0.18), transparent 36%),
    linear-gradient(180deg, #17130d 0%, #0f0e0c 100%);
}

#screen-practice-welcome {
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(216, 164, 71, 0.24), transparent 31%),
    linear-gradient(180deg, #1d160e 0%, #0d0d0b 100%) !important;
}

#screen-practice-welcome::before {
  content: "";
  position: absolute;
  width: min(72vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(216, 164, 71, 0.2);
  border-radius: 50%;
  top: 13%;
  pointer-events: none;
}

.practice-welcome-greeting,
.practice-welcome-day,
.practice-welcome-letter,
.practice-welcome-rule,
.practice-welcome-copy,
.practice-welcome-start {
  position: relative;
  z-index: 1;
}

.practice-welcome-greeting {
  color: rgba(251, 240, 221, 0.68);
  font-size: 15px;
  margin-bottom: 40px;
}

.practice-welcome-day {
  color: var(--tam-amber);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.practice-welcome-letter {
  color: var(--tam-paper);
  font-family: var(--tam-script);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0;
  max-width: 340px;
}

.practice-welcome-rule {
  width: 36px;
  height: 2px;
  background: var(--tam-clay);
  margin: 24px auto 20px;
}

.practice-welcome-copy {
  color: rgba(251, 240, 221, 0.72);
  font-size: 15px;
  line-height: 1.65;
  max-width: 310px;
}

.practice-welcome-start {
  margin-top: 38px;
  width: min(100%, 320px);
}

#screen-practice-welcome.active .practice-welcome-greeting,
#screen-practice-welcome.active .practice-welcome-day,
#screen-practice-welcome.active .practice-welcome-letter,
#screen-practice-welcome.active .practice-welcome-rule,
#screen-practice-welcome.active .practice-welcome-copy,
#screen-practice-welcome.active .practice-welcome-start {
  animation: tamRise 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#screen-practice-welcome.active .practice-welcome-day { animation-delay: 80ms; }
#screen-practice-welcome.active .practice-welcome-letter { animation-delay: 140ms; }
#screen-practice-welcome.active .practice-welcome-rule { animation-delay: 200ms; }
#screen-practice-welcome.active .practice-welcome-copy { animation-delay: 260ms; }
#screen-practice-welcome.active .practice-welcome-start { animation-delay: 340ms; }

html[data-tam-practice-flow="active"] #bottom-nav {
  display: none !important;
}

html[data-tam-practice-flow="active"] .screen.active {
  animation: tamPracticeEnter 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#screen-home {
  background:
    radial-gradient(circle at 28% 0%, rgba(212, 111, 69, 0.16), transparent 34%),
    linear-gradient(180deg, #1b150e 0%, #100f0c 100%) !important;
}

#screen-home .home-greeting,
#screen-home .home-streak,
#screen-home .home-grace,
.workout-meta,
.abc-def,
.abc-prompt {
  color: var(--tam-sand) !important;
}

.home-heading,
.abc-word,
.workout-title,
.workout-player-title,
.journal-word {
  color: var(--tam-paper) !important;
  font-family: var(--tam-script);
  letter-spacing: 0;
}

.tracker-card,
.abc-card,
.workout-card {
  background: linear-gradient(180deg, rgba(51, 35, 25, 0.96), rgba(36, 26, 18, 0.96)) !important;
  border: 1px solid rgba(216, 164, 71, 0.24) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

.abc-tag,
.workout-tag,
.tracker-label {
  color: var(--tam-amber) !important;
}

.abc-rule {
  background: var(--tam-clay) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--tam-clay), var(--tam-wine)) !important;
  color: #fff8ed !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 24px rgba(123, 36, 50, 0.24);
}

.btn-secondary,
.btn-ghost {
  border-radius: 8px !important;
}

#screen-workout,
#screen-journal {
  background:
    radial-gradient(circle at 72% 0%, rgba(216, 164, 71, 0.13), transparent 34%),
    linear-gradient(180deg, #17130d 0%, #0f0e0c 100%) !important;
}

.video-wrap,
.journal-textarea {
  background: rgba(36, 26, 18, 0.92) !important;
  border: 1px solid rgba(216, 164, 71, 0.2) !important;
  border-radius: 8px !important;
}

.journal-reflection {
  color: rgba(251, 240, 221, 0.78) !important;
}

.journal-prompt-text {
  color: rgba(251, 240, 221, 0.58) !important;
}

#screen-showed-up {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(216, 164, 71, 0.23), transparent 32%),
    linear-gradient(180deg, #1a140c 0%, #0d0d0b 100%) !important;
}

#screen-showed-up::before {
  content: "";
  position: absolute;
  top: 72px;
  left: 50%;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(216, 164, 71, 0.18);
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Ring breathes gently in sync with the fire it holds, instead of sitting
   as a static frame around it. Deliberately not tightly phase-locked to
   the flame layers below (3200ms vs 1500-2400ms), a slower, separate
   rhythm reads as ambient light in the room, not a mechanical tie. */
#screen-showed-up.active::before {
  animation: su2RingGlow 3200ms ease-in-out infinite;
}
@keyframes su2RingGlow {
  0%, 100% { box-shadow: none; border-color: rgba(216, 164, 71, 0.18); }
  50%      { box-shadow: 0 0 34px rgba(216, 164, 71, 0.14); border-color: rgba(216, 164, 71, 0.34); }
}

/* Ambient fire at the ring's center, 72px top + 260px/2 = 202px.
   Continuous while the screen is shown; scoped to .active so the loop
   actually stops the instant the class is removed on navigation (.screen
   itself stays in the DOM at opacity:0 when inactive, not display:none, 
   an unscoped `infinite` animation would keep running off-screen).

   Built from layered blurred blobs (screen blend mode, so overlapping
   warm tones add brightness like real light rather than stacking as flat
   shapes) instead of a single flame glyph, three tongues (outer red-
   orange, mid orange, hot core) plus rising embers. Each tongue flickers
   on its own un-synced duration (2400/1900/1500ms, none a clean multiple
   of another) so the combined silhouette drifts unevenly over time
   instead of breathing in unison, which is what reads as "alive" rather
   than mechanical at this size. */
.su2-fire {
  position: absolute;
  top: 202px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 160px;
  pointer-events: none;
  z-index: 0;
}
.su2-fire-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 32, 60, 0.30) 0%, rgba(216, 164, 71, 0.16) 45%, transparent 74%);
}
.su2-fire-tongue {
  position: absolute;
  bottom: 8px;
  left: 50%;
  border-radius: 50% 50% 48% 48% / 65% 65% 35% 35%;
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
}
.su2-fire-tongue--outer {
  width: 92px; height: 128px; margin-left: -46px;
  background: radial-gradient(ellipse at 50% 70%, rgba(238, 90, 40, 0.85) 0%, rgba(200, 40, 30, 0.55) 55%, transparent 85%);
  filter: blur(9px);
}
.su2-fire-tongue--mid {
  width: 60px; height: 92px; margin-left: -30px;
  background: radial-gradient(ellipse at 50% 68%, rgba(250, 160, 40, 0.9) 0%, rgba(230, 100, 20, 0.6) 55%, transparent 85%);
  filter: blur(5px);
}
.su2-fire-tongue--core {
  width: 30px; height: 54px; margin-left: -15px; bottom: 10px;
  background: radial-gradient(ellipse at 50% 75%, rgba(255, 245, 200, 0.95) 0%, rgba(255, 190, 90, 0.7) 60%, transparent 88%);
  filter: blur(3px);
}
#screen-showed-up.active .su2-fire-tongue--outer { animation: su2FlameOuter 2400ms ease-in-out infinite; }
#screen-showed-up.active .su2-fire-tongue--mid    { animation: su2FlameMid   1900ms ease-in-out infinite; }
#screen-showed-up.active .su2-fire-tongue--core   { animation: su2FlameCore  1500ms ease-in-out infinite; }
@keyframes su2FlameOuter {
  0%   { transform: scaleY(1) scaleX(1) skewX(0deg); opacity: 0.85; }
  30%  { transform: scaleY(1.08) scaleX(0.94) skewX(-3deg); opacity: 1; }
  55%  { transform: scaleY(0.92) scaleX(1.05) skewX(2deg); opacity: 0.8; }
  80%  { transform: scaleY(1.05) scaleX(0.97) skewX(-1deg); opacity: 0.95; }
  100% { transform: scaleY(1) scaleX(1) skewX(0deg); opacity: 0.85; }
}
@keyframes su2FlameMid {
  0%   { transform: scaleY(1) scaleX(1) skewX(0deg) translateY(0); }
  25%  { transform: scaleY(1.12) scaleX(0.9) skewX(3deg) translateY(-2px); }
  50%  { transform: scaleY(0.9) scaleX(1.08) skewX(-2deg) translateY(1px); }
  75%  { transform: scaleY(1.1) scaleX(0.93) skewX(2deg) translateY(-1px); }
  100% { transform: scaleY(1) scaleX(1) skewX(0deg) translateY(0); }
}
@keyframes su2FlameCore {
  0%   { transform: scaleY(1) scaleX(1) translateY(0); }
  20%  { transform: scaleY(1.15) scaleX(0.9) translateY(-3px); }
  45%  { transform: scaleY(0.88) scaleX(1.1) translateY(1px); }
  70%  { transform: scaleY(1.1) scaleX(0.94) translateY(-2px); }
  100% { transform: scaleY(1) scaleX(1) translateY(0); }
}

.su2-ember {
  position: absolute;
  bottom: 26px; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 130, 0.95), rgba(216, 111, 69, 0.2) 70%, transparent 100%);
  opacity: 0;
}
#screen-showed-up.active .su2-ember { animation: su2EmberRise 2700ms ease-out infinite; }
@keyframes su2EmberRise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  10%  { opacity: 1; }
  82%  { opacity: 0.35; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ember-dx, 0px)), -130px) scale(1.15); }
}

#screen-showed-up.active #su2-glyph,
#screen-showed-up.active #su2-headline,
#screen-showed-up.active #su2-subline,
#screen-showed-up.active #su2-streak-row,
#screen-showed-up.active #su2-grace-line,
#screen-showed-up.active #su2-cta {
  animation: tamRise 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#screen-showed-up.active #su2-glyph { animation-delay: 70ms; }
#screen-showed-up.active #su2-headline { animation-delay: 120ms; }
#screen-showed-up.active #su2-subline { animation-delay: 180ms; }
#screen-showed-up.active #su2-streak-row { animation-delay: 240ms; }
#screen-showed-up.active #su2-grace-line { animation-delay: 290ms; }
#screen-showed-up.active #su2-cta { animation-delay: 340ms; }

#su2-headline {
  position: relative;
  z-index: 1;
  color: var(--tam-paper) !important;
  font-family: var(--tam-script);
  font-size: 34px !important;
  letter-spacing: 0 !important;
}

#su2-glyph,
#su2-streak-row {
  color: var(--tam-amber) !important;
  text-shadow: 0 0 24px rgba(216, 164, 71, 0.25);
}

#screen-showed-up.tam-streak-transition #su2-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(216, 164, 71, 0.22), rgba(216, 164, 71, 0.04) 62%, transparent 64%);
  font-size: 36px !important;
  animation: tamStreakGlyph 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#screen-showed-up.tam-streak-transition #su2-glyph::before,
#screen-showed-up.tam-streak-transition #su2-glyph::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(216, 164, 71, 0.28);
  border-radius: inherit;
  pointer-events: none;
  animation: tamStreakRing 1800ms ease-out both;
}

#screen-showed-up.tam-streak-transition #su2-glyph::after {
  inset: -22px;
  border-color: rgba(251, 240, 221, 0.14);
  animation-delay: 220ms;
}

#su2-subline {
  color: rgba(251, 240, 221, 0.72) !important;
  font-style: normal !important;
}

#su2-cta {
  color: rgba(216, 164, 71, 0.82) !important;
}

#screen-journal-closure.tam-tomorrow-card {
  background:
    radial-gradient(circle at 50% 24%, rgba(216, 164, 71, 0.2), transparent 34%),
    linear-gradient(180deg, #16120c 0%, #0b0b0a 100%) !important;
}

#screen-journal-closure.tam-tomorrow-card #closure-dots {
  width: 220px !important;
  height: 220px !important;
  margin-bottom: 20px !important;
}

#screen-journal-closure.tam-tomorrow-card .closure-quote {
  color: var(--tam-paper) !important;
  font-family: var(--tam-script);
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.16 !important;
}

#screen-journal-closure.tam-tomorrow-card .closure-tagline,
#screen-journal-closure.tam-tomorrow-card .closure-joe-line,
#screen-journal-closure.tam-tomorrow-card .closure-streak-line {
  color: rgba(251, 240, 221, 0.7) !important;
}

/* ── Streak beat ──────────────────────────────────────────────
   The celebration of the number, moved here when the post-workout
   screen left the daily loop (2026-07-31). */
.closure-streak-line .tam-streak-flame {
  margin-right: 6px;
  display: inline-block;
}
.closure-streak-line .tam-streak-count {
  font-weight: 700;
  color: var(--tam-amber, #C8973A);
  font-variant-numeric: tabular-nums;
}
#screen-journal-closure.tam-tomorrow-card .closure-streak-line .tam-streak-count {
  color: var(--tam-amber, #C8973A) !important;
}
.closure-streak-line.tam-streak-landed .tam-streak-flame {
  animation: tamStreakFlare 900ms ease-out;
}
@keyframes tamStreakFlare {
  0%   { transform: scale(1);    filter: brightness(1); }
  35%  { transform: scale(1.35); filter: brightness(1.5); }
  100% { transform: scale(1);    filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .closure-streak-line.tam-streak-landed .tam-streak-flame { animation: none; }
}

#screen-journal-closure.tam-tomorrow-card .closure-word {
  color: var(--tam-amber) !important;
  letter-spacing: 0.1em !important;
}

#bottom-nav {
  background: rgba(15, 14, 12, 0.94) !important;
  border-top: 1px solid rgba(216, 164, 71, 0.18) !important;
}

#bottom-nav .nav-item.active .nav-label {
  color: var(--tam-clay) !important;
}

#bottom-nav .nav-item.active .nav-icon {
  filter: drop-shadow(0 0 10px rgba(216, 164, 71, 0.35));
}

@keyframes tamRise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes tamStreakGlyph {
  0% { opacity: 0; transform: translateY(8px) scale(0.72); }
  58% { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tamStreakRing {
  0% { opacity: 0; transform: scale(0.62); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.38); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tam-practice-flow="active"] .screen.active,
  #screen-practice-welcome.active .practice-welcome-greeting,
  #screen-practice-welcome.active .practice-welcome-day,
  #screen-practice-welcome.active .practice-welcome-letter,
  #screen-practice-welcome.active .practice-welcome-rule,
  #screen-practice-welcome.active .practice-welcome-copy,
  #screen-practice-welcome.active .practice-welcome-start,
  #screen-showed-up.tam-streak-transition #su2-glyph,
  #screen-showed-up.tam-streak-transition #su2-glyph::before,
  #screen-showed-up.tam-streak-transition #su2-glyph::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  #screen-showed-up.active::before,
  #screen-showed-up.active .su2-fire-tongue--outer,
  #screen-showed-up.active .su2-fire-tongue--mid,
  #screen-showed-up.active .su2-fire-tongue--core,
  #screen-showed-up.active .su2-ember {
    animation: none !important;
  }
  .su2-ember { opacity: 0.7 !important; }
}

/* ── October 2026: iron sharpens iron ─────────────────────────────
   html.m-forge is set in <head> only in October, so September keeps its
   warm bark to the last day. Charcoal and steel replace the umber washes;
   the clay-to-wine buttons, red and gold stay as the brand carries them. */
html.m-forge {
  --tam-night: #111215;
  --tam-ember: #1b1d21;
  --tam-cedar: #26292e;
  --tam-paper: #f2f3f5;
  --tam-sand: rgba(236, 238, 242, 0.68);
  --tam-amber: #e0a24a;
}
html.m-forge .screen {
  background:
    radial-gradient(circle at 50% -18%, rgba(224, 122, 46, 0.14), transparent 36%),
    linear-gradient(180deg, #16171a 0%, #0e0f11 100%);
}
html.m-forge #screen-home {
  background:
    radial-gradient(circle at 28% 0%, rgba(224, 122, 46, 0.14), transparent 34%),
    linear-gradient(180deg, #17181c 0%, #0e0f11 100%) !important;
}
html.m-forge #screen-workout,
html.m-forge #screen-journal {
  background:
    radial-gradient(circle at 72% 0%, rgba(224, 122, 46, 0.11), transparent 34%),
    linear-gradient(180deg, #16171a 0%, #0e0f11 100%) !important;
}
html.m-forge .tracker-card,
html.m-forge .abc-card,
html.m-forge .workout-card {
  background: linear-gradient(180deg, rgba(40, 43, 49, 0.96), rgba(27, 29, 33, 0.96)) !important;
  border: 1px solid rgba(185, 190, 198, 0.18) !important;
}
html.m-forge #screen-practice-welcome {
  background:
    radial-gradient(circle at 50% 20%, rgba(224, 122, 46, 0.18), transparent 31%),
    linear-gradient(180deg, #18191d 0%, #0d0e10 100%) !important;
}

/* ── November 2026: the month of thanks ───────────────────────────
   html.m-thanks is set in <head> only in November, so October keeps its
   steel through the 31st. Candlelight: a plum-brown night with the warm
   wash rising from below, like a light set on the table. Red, gold and the
   clay-to-wine buttons stay as the brand carries them. */
html.m-thanks {
  --tam-night: #140b0d;
  --tam-ember: #211517;
  --tam-cedar: #312124;
  --tam-paper: #fbf1e4;
  --tam-sand: rgba(251, 236, 214, 0.70);
  --tam-amber: #f0b45a;
}
html.m-thanks .screen {
  background:
    radial-gradient(circle at 50% 112%, rgba(255, 178, 92, 0.18), transparent 48%),
    linear-gradient(180deg, #1d1214 0%, #110a0b 100%);
}
html.m-thanks #screen-home {
  background:
    radial-gradient(circle at 50% 104%, rgba(255, 178, 92, 0.16), transparent 44%),
    radial-gradient(circle at 24% 0%, rgba(240, 180, 90, 0.08), transparent 32%),
    linear-gradient(180deg, #1e1315 0%, #110a0b 100%) !important;
}
html.m-thanks #screen-workout,
html.m-thanks #screen-journal {
  background:
    radial-gradient(circle at 50% 110%, rgba(255, 178, 92, 0.14), transparent 44%),
    linear-gradient(180deg, #1d1214 0%, #110a0b 100%) !important;
}
html.m-thanks .tracker-card,
html.m-thanks .abc-card,
html.m-thanks .workout-card {
  background: linear-gradient(180deg, rgba(48, 32, 34, 0.96), rgba(32, 21, 23, 0.96)) !important;
  border: 1px solid rgba(240, 190, 130, 0.16) !important;
}
html.m-thanks #screen-practice-welcome {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 186, 96, 0.20), transparent 31%),
    linear-gradient(180deg, #1f1416 0%, #0f090a 100%) !important;
}

/* ── Palette previews (2026-11-03, Drake): behind the dev gate only ──
   html.m-hearth / html.m-dusk are added in <head> by ?palette=hearth|dusk
   &dev=tam2026, on top of the month class, so these blocks sit after the
   month blocks and win. Tokens live in index.html; the washes live here. */

/* Harvest Hearth: warm, home, belonging. A rust glow from below. */
html.m-hearth {
  --tam-night: #1C140D;
  --tam-ember: #271C13;
  --tam-cedar: #3B2B1E;
  --tam-paper: #F6EBD9;
  --tam-sand: rgba(246, 235, 217, 0.70);
  --tam-amber: #D9A54A;
  --tam-clay: #B4462F;
}
html.m-hearth .screen {
  background:
    radial-gradient(circle at 50% 112%, rgba(180, 70, 47, 0.16), transparent 48%),
    linear-gradient(180deg, #1F160E 0%, #17100A 100%);
}
html.m-hearth #screen-home {
  background:
    radial-gradient(circle at 50% 104%, rgba(180, 70, 47, 0.15), transparent 44%),
    linear-gradient(180deg, #1F160E 0%, #17100A 100%) !important;
}
html.m-hearth #screen-workout,
html.m-hearth #screen-journal {
  background:
    radial-gradient(circle at 50% 110%, rgba(180, 70, 47, 0.13), transparent 44%),
    linear-gradient(180deg, #1F160E 0%, #17100A 100%) !important;
}
html.m-hearth .tracker-card,
html.m-hearth .abc-card,
html.m-hearth .workout-card {
  background: linear-gradient(180deg, rgba(42, 30, 20, 0.97), rgba(36, 26, 17, 0.97)) !important;
  border: 1px solid #3B2B1E !important;
}
html.m-hearth #screen-practice-welcome {
  background:
    radial-gradient(circle at 50% 108%, rgba(180, 70, 47, 0.18), transparent 40%),
    linear-gradient(180deg, #20170F 0%, #15100A 100%) !important;
}
/* In both previews Begin is the one red thing on the screen (PMS 185),
   so the clay-to-wine gradient above yields to it on Begin alone: Home's
   today and finale buttons, practice-welcome's Begin, Return Practice's
   Begin. Every other primary button keeps the clay-to-wine gradient. */
html.m-hearth #home-today-btn, html.m-dusk #home-today-btn,
html.m-hearth #home-finale-btn, html.m-dusk #home-finale-btn,
html.m-hearth .practice-welcome-start, html.m-dusk .practice-welcome-start,
html.m-hearth .rp-start, html.m-dusk .rp-start {
  background: linear-gradient(135deg, #EE203C, #C8182F) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(238, 32, 60, 0.22);
}

/* Clear Dusk: peace and clarity. A soft gold wash from the top. */
html.m-dusk {
  --tam-night: #1E1712;
  --tam-ember: #2A211A;
  --tam-cedar: #3D3128;
  --tam-paper: #FBF3E6;
  --tam-sand: rgba(251, 243, 230, 0.70);
  --tam-amber: #E3C27A;
  --tam-clay: #C0704F;
}
html.m-dusk .screen {
  background:
    radial-gradient(circle at 50% -12%, rgba(227, 194, 122, 0.13), transparent 42%),
    linear-gradient(180deg, #221A14 0%, #1A1410 100%);
}
html.m-dusk #screen-home {
  background:
    radial-gradient(circle at 50% -8%, rgba(227, 194, 122, 0.14), transparent 40%),
    linear-gradient(180deg, #221A14 0%, #1A1410 100%) !important;
}
html.m-dusk #screen-workout,
html.m-dusk #screen-journal {
  background:
    radial-gradient(circle at 50% -10%, rgba(227, 194, 122, 0.11), transparent 40%),
    linear-gradient(180deg, #221A14 0%, #1A1410 100%) !important;
}
html.m-dusk .tracker-card,
html.m-dusk .abc-card,
html.m-dusk .workout-card {
  background: linear-gradient(180deg, rgba(45, 36, 28, 0.97), rgba(40, 32, 25, 0.97)) !important;
  border: 1px solid #3D3128 !important;
}
html.m-dusk #screen-practice-welcome {
  background:
    radial-gradient(circle at 50% -6%, rgba(227, 194, 122, 0.16), transparent 36%),
    linear-gradient(180deg, #231B15 0%, #191310 100%) !important;
}