/* R4X Cockpit Next Dynamics v2200 (Rocket-Layer Positionierungsfix + responsive Ritual-Meilenstein-Easter-Eggs)
   ---
   R4X Cockpit Next Dynamics v2060 (v2060: Eyebrow-Icon, Meilenstein-Leiter)
   ---
   R4X Cockpit Next Dynamics v2059 (v2059: Free/Plus-Sichtbarkeit, Plus-Badge, Tracker-Hinweis, dezente Grafik)
   ---
   R4X Cockpit Next Dynamics v2058 (v2058: Serie-Meilensteine, Wochen-Punkte, Plus-Personalisierungs-Notiz)
   ---
   R4X Cockpit Next Dynamics v2057
   Styles fuer die Dynamik-Schicht der Empfehlungskarte:
   - Delta-Zeile ("Zuletzt hier ...") als Zeitanker unter dem Eyebrow
   - Impuls-Block im ehrlichen Ruhezustand ("Du bist auf Stand")
   - v2057: Tages-Ritual "Verstehen des Tages" als eigenstaendige Karte
     (ritual-mount, ueber der Empfehlungskarte, unter Weitermachen)
   Nur auf der Cockpit-Startseite geladen, dort haengt der rec-mount. */

/* Delta-Zeile: dezenter Zeitanker. Mit is-fresh (neue Fakten seit dem
   letzten Besuch) bekommt sie einen goldenen Punkt als stilles Signal. */
.cockpit-next--hero .cockpit-next__delta{
  margin:calc(-1 * var(--r4x-space-2, 8px)) 0 var(--r4x-space-3, 12px);
  font-size:var(--r4x-size-sm);
  line-height:1.5;
  color:var(--r4x-text-tertiary);
  max-width:52ch;
}
.cockpit-next--hero .cockpit-next__delta.is-fresh{
  color:var(--r4x-text-secondary);
}
.cockpit-next--hero .cockpit-next__delta.is-fresh::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--r4x-gold);
  margin-right:8px;
  vertical-align:2px;
}

/* Impuls-Block im Ruhezustand: ruhiger Kasten mit goldener Kante,
   klar getrennt von reason und Actions. */
.cockpit-next--hero .cockpit-next__impulse{
  margin:0 0 var(--r4x-space-5, 20px);
  padding:14px 16px;
  border:1px solid var(--r4x-border-default);
  border-left:2px solid var(--r4x-gold);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  max-width:56ch;
}
.cockpit-next--hero .cockpit-next__impulse-kicker{
  display:block;
  font-size:var(--r4x-size-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--r4x-gold);
  font-weight:700;
  margin-bottom:6px;
}
.cockpit-next--hero .cockpit-next__impulse-title{
  margin:0 0 6px;
  font-size:var(--r4x-size-base);
  font-weight:600;
  line-height:1.3;
  color:var(--r4x-text-primary);
}
.cockpit-next--hero .cockpit-next__impulse-text{
  margin:0;
  font-size:var(--r4x-size-sm);
  color:var(--r4x-text-secondary);
  line-height:1.6;
}

/* Ruhezustand: der Kompass tritt optisch einen Schritt zurueck,
   die Karte wirkt bewusst ruhiger als eine offene Aufgabe. */
.cockpit-next--steady .cockpit-next__compass{
  opacity:.55;
}

@media (max-width: 640px){
  .cockpit-next--hero .cockpit-next__impulse{
    padding:12px 14px;
  }
}

/* --------------------------------------------------------------------
   v2057 Tages-Ritual: eigenstaendiger taeglicher Verstehen-Moment.
   Klar abgesetzt von der Empfehlungskarte durch goldene Oberkante,
   sichtbare Serie und Punkte-Reihe plus bewusstem Abschluss-Tap.
   Positioniert ueber rec-mount, direkt unter dem Weitermachen-Block. */
.cockpit-ritual{
  position:relative;
  border-top:2px solid var(--r4x-gold);
}
.cockpit-ritual__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.cockpit-ritual__eyebrow{
  font-size:var(--r4x-size-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--r4x-gold);
  font-weight:700;
}
.cockpit-ritual__streak{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.cockpit-ritual__streak-num{
  font-size:var(--r4x-size-lg, 1.25rem);
  font-weight:700;
  color:var(--r4x-text-primary);
  line-height:1;
}
.cockpit-ritual__streak-word{
  font-size:var(--r4x-size-xs);
  color:var(--r4x-text-tertiary);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cockpit-ritual__streak-word--start{
  color:var(--r4x-gold);
}
.cockpit-ritual__dots{
  display:flex;
  gap:6px;
  margin:0 0 14px;
}
.cockpit-ritual__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid var(--r4x-border-default);
  background:transparent;
}
.cockpit-ritual__dot.is-filled{
  background:var(--r4x-gold);
  border-color:var(--r4x-gold);
}
.cockpit-ritual__dot.is-today{
  box-shadow:0 0 0 3px rgba(200,164,92,.22);
}
.cockpit-ritual__title{
  margin:0 0 6px;
  font-size:var(--r4x-size-base);
  font-weight:600;
  line-height:1.3;
  color:var(--r4x-text-primary);
}
.cockpit-ritual__text{
  margin:0 0 var(--r4x-space-4, 16px);
  font-size:var(--r4x-size-sm);
  color:var(--r4x-text-secondary);
  line-height:1.6;
  max-width:56ch;
}
.cockpit-ritual__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.cockpit-ritual__done{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--r4x-size-sm);
  color:var(--r4x-text-tertiary);
}
.cockpit-ritual__done-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--r4x-gold);
  color:#1a1a1a;
  font-size:12px;
  font-weight:700;
}
.cockpit-ritual.is-done{
  border-top-color:var(--r4x-border-default);
}
@media (max-width: 640px){
  .cockpit-ritual__head{ flex-wrap:wrap; }
}

/* --------------------------------------------------------------------
   v2058 Tages-Ritual: Fortschritt (Wochen-Punkte + Meilenstein) und
   Plus-Personalisierungs-Notiz. */
.cockpit-ritual__progress{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.cockpit-ritual__progress .cockpit-ritual__dots{
  margin:0;
}
.cockpit-ritual__milestone-hint{
  font-size:var(--r4x-size-xs);
  color:var(--r4x-text-tertiary);
  letter-spacing:.04em;
  white-space:nowrap;
}
.cockpit-ritual__milestone{
  font-size:var(--r4x-size-xs);
  font-weight:700;
  color:var(--r4x-gold);
  letter-spacing:.02em;
}
.cockpit-ritual__milestone.is-reached{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.cockpit-ritual.is-milestone{
  border-top-width:3px;
}
.cockpit-ritual__personal{
  margin:-4px 0 var(--r4x-space-4, 16px);
  font-size:var(--r4x-size-xs);
  color:var(--r4x-gold);
  letter-spacing:.02em;
}

/* --------------------------------------------------------------------
   v2059 Tages-Ritual: Free/Plus-Sichtbarkeit und dezente Grafik. */
.cockpit-ritual__glyph{
  position:absolute;
  right:16px;
  bottom:14px;
  width:72px;
  height:72px;
  color:var(--r4x-gold);
  opacity:.12;
  pointer-events:none;
}
.cockpit-ritual__lock{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:-4px 0 var(--r4x-space-4, 16px);
  padding:8px 12px;
  border:1px dashed var(--r4x-gold);
  border-radius:8px;
  background:transparent;
  color:var(--r4x-gold);
  font-size:var(--r4x-size-sm);
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:background .15s ease;
}
.cockpit-ritual__lock:hover{
  background:rgba(200,164,92,.08);
}
.cockpit-ritual__lock-icon{
  font-size:.9em;
}
.cockpit-ritual__plus-badge{
  display:inline-block;
  margin-right:8px;
  padding:1px 7px;
  border-radius:999px;
  background:var(--r4x-gold);
  color:#1a1a1a;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
}
.cockpit-ritual__hint{
  display:inline-block;
  margin:-4px 0 var(--r4x-space-4, 16px);
  font-size:var(--r4x-size-xs);
  color:var(--r4x-text-tertiary);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.cockpit-ritual__hint:hover{
  color:var(--r4x-gold);
  border-bottom-color:var(--r4x-gold);
}
@media (max-width: 640px){
  .cockpit-ritual__glyph{ width:56px; height:56px; opacity:.10; }
}

/* --------------------------------------------------------------------
   v2059 Tages-Ritual: Identitaets-Icon im Eyebrow und Meilenstein-Leiter. */
.cockpit-ritual__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.cockpit-ritual__eyebrow-icon{
  width:14px;
  height:14px;
  color:var(--r4x-gold);
  flex:0 0 auto;
}
.cockpit-ritual__ladder{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:var(--r4x-size-xs);
  color:var(--r4x-text-tertiary);
  letter-spacing:.02em;
}
.cockpit-ritual__ladder-step{
  position:relative;
  opacity:.45;
}
.cockpit-ritual__ladder-step:not(:first-child)::before{
  content:'·';
  position:absolute;
  left:-6px;
  opacity:.6;
}
.cockpit-ritual__ladder-step.is-passed{
  opacity:.85;
  color:var(--r4x-gold);
}
.cockpit-ritual__ladder-step.is-next{
  opacity:1;
  color:var(--r4x-gold);
  font-weight:700;
}
.cockpit-ritual__ladder-remaining{
  padding-left:9px;
  border-left:1px solid var(--r4x-border-default);
  opacity:.7;
}


/* --------------------------------------------------------------------
   v2062 Tages-Ritual: dezente Bilduntermalung ohne Textverlust.
   Dunkles Navy/Gold-Motiv sitzt rechts unten und bleibt links ruhig. */
.cockpit-ritual{
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg, rgba(8,9,13,.96), rgba(8,9,13,.98));
}
.cockpit-ritual::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(8,9,13,.98) 0%, rgba(8,9,13,.96) 44%, rgba(8,9,13,.84) 64%, rgba(8,9,13,.30) 100%),
    url('/assets/feature-carousel/ritual-underlay-v2163.webp');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right bottom;
  opacity:.95;
  pointer-events:none;
}
.cockpit-ritual > *{
  position:relative;
  z-index:1;
}
.cockpit-ritual__text{
  max-width:48ch;
}
.cockpit-ritual__glyph{
  opacity:0;
}
@media (max-width: 900px){
  .cockpit-ritual::before{
    background:
      linear-gradient(180deg, rgba(8,9,13,.92) 0%, rgba(8,9,13,.93) 44%, rgba(8,9,13,.70) 72%, rgba(8,9,13,.22) 100%),
      url('/assets/feature-carousel/ritual-underlay-v2163.webp');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:82% bottom;
    opacity:.94;
  }
  .cockpit-ritual__text{
    max-width:34ch;
  }
}
@media (max-width: 640px){
  .cockpit-ritual::before{
    background:
      linear-gradient(180deg, rgba(8,9,13,.90) 0%, rgba(8,9,13,.92) 46%, rgba(8,9,13,.76) 72%, rgba(8,9,13,.24) 100%),
      url('/assets/feature-carousel/ritual-underlay-v2163.webp');
    background-repeat:no-repeat;
    background-size:185% auto;
    background-position:92% 100%;
    opacity:.92;
  }
  .cockpit-ritual__title,
  .cockpit-ritual__text,
  .cockpit-ritual__actions,
  .cockpit-ritual__personal,
  .cockpit-ritual__hint,
  .cockpit-ritual__lock,
  .cockpit-ritual__progress,
  .cockpit-ritual__head{
    position:relative;
    z-index:1;
  }
}


/* --------------------------------------------------------------------
   v2063 Tages-Ritual: Status-unabhaengige Goldkante, CTA-Farbtausch
   und kompakter Plus-Hinweis. */
.cockpit-ritual,
.cockpit-ritual.is-done{
  border-top:2px solid var(--r4x-gold);
  box-shadow:
    inset 0 1px 0 rgba(232,196,96,.22),
    0 -1px 10px rgba(200,164,92,.10);
}
.cockpit-ritual.is-milestone{
  border-top-width:3px;
}
.cockpit-ritual__lock{
  width:max-content;
  max-width:100%;
  justify-self:start;
  align-self:start;
}

/* R4X v2065 · Nur der jeweilige Begriff des Tages erhält einen dezenten Rahmen.
   Das bestehende Ritual-Kartenmotiv und alle übrigen Farben bleiben unverändert. */
body.cockpit[data-page="zentrale"] .cockpit-ritual__title{
  display:block;
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
  margin:0 0 10px;
  padding:7px 10px;
  border:1px solid rgba(237,248,255,.16);
  border-radius:8px;
  background:#000000;
  color:#edf8ff;
}


/* --------------------------------------------------------------------
   v2196 · Zusaetzliche Rocket-Progression fuer das Tages-Ritual.
   Die Rakete steigt pro erreichtem Tag am rechten Bildrand ein kleines
   Stueck Richtung Horizont. Nach jedem Meilenstein beginnt die Route neu,
   wird aber laenger und feiner. Mobile und Desktop nutzen dieselbe vertikale Logik. */
.cockpit-ritual > .cockpit-ritual__rocket-layer{
  position:absolute;
  right:20px;
  bottom:54px;
  left:auto;
  top:auto;
  width:30px;
  height:176px;
  z-index:2;
  display:block;
  pointer-events:none;
  opacity:1;
  --rocket-progress:.02;
}
.cockpit-ritual__rocket-track,
.cockpit-ritual__rocket-horizon{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.cockpit-ritual__rocket-track{
  top:0;
  bottom:10px;
  width:1px;
  background:linear-gradient(180deg, rgba(255,241,181,.22), rgba(232,196,96,.34) 24%, rgba(232,196,96,.14) 70%, rgba(232,196,96,.06));
  box-shadow:0 0 10px rgba(232,196,96,.12);
}
.cockpit-ritual__rocket-track::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -50%);
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid rgba(232,196,96,.42);
  background:radial-gradient(circle, rgba(255,245,201,.30), rgba(232,196,96,.02) 68%);
  box-shadow:0 0 12px rgba(232,196,96,.20);
}
.cockpit-ritual__rocket-horizon{
  top:0;
  width:20px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,196,96,.58), transparent);
  opacity:.85;
}
.cockpit-ritual__rocket-ship{
  position:absolute;
  left:50%;
  bottom:calc(8px + (100% - 28px) * var(--rocket-progress));
  width:22px;
  height:22px;
  transform:translate(-50%, 50%);
  color:#f1d27a;
  filter:drop-shadow(0 0 8px rgba(232,196,96,.24));
}
.cockpit-ritual__rocket-ship::after{
  content:'';
  position:absolute;
  left:50%;
  top:100%;
  width:2px;
  height:12px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,242,195,.76), rgba(232,196,96,.34), rgba(232,196,96,0));
  border-radius:999px;
  opacity:.72;
}
.cockpit-ritual__rocket-svg{ width:100%; height:100%; display:block; }
.cockpit-ritual__rocket-svg path{ fill:currentColor; }
.cockpit-ritual__rocket-svg circle{ fill:rgba(8,9,13,.72); stroke:rgba(255,248,220,.88); stroke-width:.8; }
.cockpit-ritual__rocket-layer.is-stage-7 .cockpit-ritual__rocket-track{ opacity:.92; }
.cockpit-ritual__rocket-layer.is-stage-30 .cockpit-ritual__rocket-track{ opacity:.86; }
.cockpit-ritual__rocket-layer.is-stage-100 .cockpit-ritual__rocket-track{ opacity:.80; }
.cockpit-ritual__rocket-layer.is-stage-365 .cockpit-ritual__rocket-track{ opacity:.76; }
.cockpit-ritual__rocket-layer.is-animating .cockpit-ritual__rocket-ship{
  animation:r4x-ritual-rocket-rise 1.05s cubic-bezier(.25,.72,.22,1) both;
}
.cockpit-ritual__rocket-layer.is-animating .cockpit-ritual__rocket-ship::after{
  animation:r4x-ritual-rocket-flame 1.05s ease-out both;
}
@keyframes r4x-ritual-rocket-rise{
  0%{ transform:translate(-50%, calc(50% + 16px)); opacity:.25; }
  42%{ opacity:1; }
  100%{ transform:translate(-50%, 50%); opacity:1; }
}
@keyframes r4x-ritual-rocket-flame{
  0%{ opacity:0; height:20px; }
  26%{ opacity:1; height:18px; }
  100%{ opacity:.72; height:12px; }
}
@media (max-width: 900px){
  .cockpit-ritual > .cockpit-ritual__rocket-layer{ right:16px; bottom:50px; width:28px; height:156px; }
  .cockpit-ritual__rocket-ship{ width:20px; height:20px; }
}
@media (max-width: 640px){
  /* Mobile nutzt dieselbe lange vertikale Etappe wie Desktop: Start am
     Horizont unten, Ziel oben auf Hoehe der Meilensteinanzeige. */
  .cockpit-ritual > .cockpit-ritual__rocket-layer{ right:12px; bottom:46px; width:24px; height:260px; }
  .cockpit-ritual__rocket-track{ top:0; bottom:8px; }
  .cockpit-ritual__rocket-horizon{ top:0; width:16px; }
  .cockpit-ritual__rocket-ship{ bottom:calc(6px + (100% - 22px) * var(--rocket-progress)); width:18px; height:18px; }
}
@media (prefers-reduced-motion: reduce){
  .cockpit-ritual__rocket-layer.is-animating .cockpit-ritual__rocket-ship,
  .cockpit-ritual__rocket-layer.is-animating .cockpit-ritual__rocket-ship::after{ animation:none !important; }
}

/* --------------------------------------------------------------------
   v2195 · Progressive Easter-Egg-Szene fuer Ritual-Meilensteine.
   Die bestehende Bilduntermalung bleibt unveraendert. Die Szene liegt
   zwischen Bild und Inhalt, blockiert keine Inhalte und besitzt nur am
   sichtbaren Symbol eine ausreichend grosse Klick-/Touchflaeche. */
.cockpit-ritual > .cockpit-ritual__easter-layer{
  position:absolute;
  right:20px;
  bottom:18px;
  z-index:2;
  width:150px;
  height:120px;
  pointer-events:none;
}
.cockpit-ritual > :not(.cockpit-ritual__easter-layer):not(.cockpit-ritual__rocket-layer){
  position:relative;
  z-index:3;
}
.cockpit-ritual.has-easter-egg .cockpit-ritual__actions{
  padding-right:170px;
}
.cockpit-ritual__easter-trigger{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#e8c460;
  cursor:pointer;
  pointer-events:auto;
  opacity:.72;
  filter:drop-shadow(0 0 9px rgba(232,196,96,.18));
  transition:opacity .18s ease, transform .18s ease, filter .18s ease;
}
.cockpit-ritual__easter-trigger:hover,
.cockpit-ritual__easter-trigger:focus-visible{
  opacity:1;
  transform:scale(1.045);
  filter:drop-shadow(0 0 13px rgba(232,196,96,.42));
  outline:none;
}
.cockpit-ritual__easter-trigger:focus-visible{
  box-shadow:0 0 0 2px rgba(8,9,13,.95), 0 0 0 4px rgba(232,196,96,.78);
}
.ritual-easter-svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.ritual-easter-svg__star path{
  fill:currentColor;
  stroke:#fff1b5;
  stroke-width:.8;
}
.ritual-easter-svg__constellation{
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ritual-easter-svg__constellation path{
  fill:none;
  opacity:.64;
}
.ritual-easter-svg__constellation circle{
  stroke:none;
}
.ritual-easter-svg__compass{
  fill:none;
  stroke:currentColor;
  stroke-width:1.15;
  opacity:.72;
}
.ritual-easter-svg__compass path:first-of-type{
  fill:rgba(232,196,96,.22);
}
.ritual-easter-svg__year{
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  opacity:.74;
}
.cockpit-ritual__easter-layer.is-level-7{
  width:76px;
  height:76px;
  right:42px;
  bottom:32px;
}
.cockpit-ritual__easter-layer.is-level-30{
  width:132px;
  height:106px;
}
.cockpit-ritual__easter-layer.is-level-100,
.cockpit-ritual__easter-layer.is-level-365{
  width:158px;
  height:126px;
}
.cockpit-ritual.has-easter-365 .cockpit-ritual__easter-trigger{
  filter:drop-shadow(0 0 16px rgba(232,196,96,.42));
}
.cockpit-ritual__milestone-card{
  position:relative;
  width:min(540px, 100%);
  box-sizing:border-box;
  margin:2px 0 16px;
  padding:15px 44px 15px 16px;
  border:1px solid rgba(232,196,96,.34);
  border-radius:12px;
  background:linear-gradient(135deg, rgba(0,0,0,.94), rgba(14,15,20,.91));
  box-shadow:0 14px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  color:#edf8ff;
}
.cockpit-ritual__milestone-card:focus{
  outline:1px solid rgba(232,196,96,.58);
  outline-offset:2px;
}
.cockpit-ritual__milestone-close{
  position:absolute;
  top:9px;
  right:10px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid rgba(237,248,255,.14);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#edf8ff;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
}
.cockpit-ritual__milestone-close:hover,
.cockpit-ritual__milestone-close:focus-visible{
  border-color:rgba(232,196,96,.62);
  color:var(--r4x-gold);
  outline:none;
}
.cockpit-ritual__milestone-kicker{
  display:block;
  margin-bottom:4px;
  color:var(--r4x-gold);
  font-size:var(--r4x-size-xs);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.cockpit-ritual__milestone-title{
  display:block;
  margin-bottom:5px;
  color:#edf8ff;
  font-size:1.05rem;
}
.cockpit-ritual__milestone-card p{
  max-width:52ch;
  margin:0;
  color:rgba(237,248,255,.82);
  font-size:var(--r4x-size-sm);
  line-height:1.55;
}
.cockpit-ritual__milestone-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}
.cockpit-ritual__milestone-stats span{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:9px 10px;
  border:1px solid rgba(237,248,255,.10);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  color:rgba(237,248,255,.68);
  font-size:.72rem;
  line-height:1.35;
}
.cockpit-ritual__milestone-stats strong{
  color:var(--r4x-gold);
  font-size:1rem;
}
.cockpit-ritual.is-easter-celebrating::after{
  content:'';
  position:absolute;
  inset:-30% -35%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(232,196,96,.16) 49%, rgba(255,243,190,.28) 50%, rgba(232,196,96,.12) 52%, transparent 63%);
  transform:translateX(-65%);
  animation:r4x-ritual-light-sweep 1.45s ease-out both;
}
.cockpit-ritual__easter-layer.is-celebrating .ritual-easter-svg__star{
  transform-box:fill-box;
  transform-origin:center;
  animation:r4x-ritual-star-reveal 1.35s ease-out both;
}
.cockpit-ritual__easter-layer.is-level-30.is-celebrating .ritual-easter-svg__constellation path{
  stroke-dasharray:140;
  stroke-dashoffset:140;
  animation:r4x-ritual-line-draw 1.25s .16s ease-out forwards;
}
.cockpit-ritual__easter-layer.is-level-100.is-celebrating .ritual-easter-svg__compass{
  transform-box:fill-box;
  transform-origin:center;
  animation:r4x-ritual-compass-reveal 1.4s ease-out both;
}
.cockpit-ritual__easter-layer.is-level-365.is-celebrating .ritual-easter-svg__year{
  animation:r4x-ritual-year-glow 1.6s ease-out both;
}
@keyframes r4x-ritual-light-sweep{
  0%{ transform:translateX(-65%); opacity:0; }
  22%{ opacity:1; }
  100%{ transform:translateX(65%); opacity:0; }
}
@keyframes r4x-ritual-star-reveal{
  0%{ transform:scale(.45) rotate(-18deg); opacity:.1; }
  55%{ transform:scale(1.34) rotate(5deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
@keyframes r4x-ritual-line-draw{ to{ stroke-dashoffset:0; } }
@keyframes r4x-ritual-compass-reveal{
  0%{ transform:scale(.72) rotate(-22deg); opacity:0; }
  100%{ transform:scale(1) rotate(0); opacity:.72; }
}
@keyframes r4x-ritual-year-glow{
  0%{ opacity:0; filter:drop-shadow(0 0 0 rgba(232,196,96,0)); }
  65%{ opacity:1; filter:drop-shadow(0 0 12px rgba(232,196,96,.62)); }
  100%{ opacity:.74; filter:drop-shadow(0 0 5px rgba(232,196,96,.22)); }
}
@media (max-width: 900px){
  .cockpit-ritual.has-easter-egg .cockpit-ritual__actions{
    padding-right:140px;
  }
  .cockpit-ritual > .cockpit-ritual__easter-layer{
    right:12px;
    bottom:14px;
    transform:scale(.88);
    transform-origin:right bottom;
  }
  .cockpit-ritual__easter-trigger{
    opacity:.62;
  }
}
@media (max-width: 640px){
  .cockpit-ritual.has-easter-egg{
    padding-bottom:88px;
  }
  .cockpit-ritual.has-easter-egg .cockpit-ritual__actions{
    padding-right:0;
  }
  .cockpit-ritual > .cockpit-ritual__easter-layer,
  .cockpit-ritual__easter-layer.is-level-7,
  .cockpit-ritual__easter-layer.is-level-30,
  .cockpit-ritual__easter-layer.is-level-100,
  .cockpit-ritual__easter-layer.is-level-365{
    right:10px;
    bottom:12px;
    width:82px;
    height:72px;
    transform:none;
  }
  .cockpit-ritual__easter-trigger{
    min-width:48px;
    min-height:48px;
    opacity:.58;
  }
  .cockpit-ritual__milestone-card{
    width:100%;
    padding:14px 42px 14px 14px;
  }
  .cockpit-ritual__milestone-stats{
    grid-template-columns:1fr;
  }
}
@media (prefers-reduced-motion: reduce){
  .cockpit-ritual.is-easter-celebrating::after,
  .cockpit-ritual__easter-layer.is-celebrating .ritual-easter-svg__star,
  .cockpit-ritual__easter-layer.is-celebrating .ritual-easter-svg__constellation path,
  .cockpit-ritual__easter-layer.is-celebrating .ritual-easter-svg__compass,
  .cockpit-ritual__easter-layer.is-celebrating .ritual-easter-svg__year{
    animation:none !important;
  }
}