/* Standalone first-purchase coach. The app and goddess remain in their own layers. */
.ct-active .app { transition: opacity .65s ease; }
.ct-intro .app {
  opacity: 0;
  animation: ct-world-arrives var(--ct-creation-duration) ease both;
}
.ct-intro .app > * {
  animation: ct-interface-arrives var(--ct-creation-duration) ease both;
}
.ct-intro .app > :nth-child(2) { animation-name: ct-interface-second; }
.ct-intro .app > :nth-child(n+3) { animation-name: ct-interface-last; }
/* Opacity/filter only: the goddess keeps her native position and transform. */
.ct-intro .goddess {
  animation: ct-apparition var(--ct-creation-duration) cubic-bezier(.22,.61,.36,1) both;
}
.creator-tutorial {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  color: #f5eedb;
  font-family: inherit;
}
.creator-tutorial [hidden] { display: none !important; }
.ct-creation-scene, .ct-void, .ct-stardust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ct-creation-scene { overflow: hidden; isolation: isolate; }
.ct-void {
  background: #000;
  animation: ct-veil-parts var(--ct-creation-duration) ease both;
}
.ct-firmament {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(96vw, 86vh, 840px);
  height: min(96vw, 86vh, 840px);
  overflow: visible;
  opacity: 0;
  filter: drop-shadow(0 0 5px #d7c08c44);
  animation: ct-heavens var(--ct-creation-duration) cubic-bezier(.2,.65,.3,1) both;
}
.ct-wavefront {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(70vw, 64vh, 620px);
  aspect-ratio: 1;
  border: 1px solid #edd39b55;
  border-radius: 50%;
  box-shadow: 0 0 26px #c1c99912, inset 0 0 22px #89d3c812;
  animation: ct-first-breath var(--ct-creation-duration) ease-out both;
}
.creator-tutorial button {
  pointer-events: auto;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #c6b37d;
  border-radius: 8px;
  background: #102d31;
  color: #ffe6ad;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.creator-tutorial button:hover { background: #204b4a; border-color: #ffe6ad; }
.creator-tutorial button:focus-visible { outline: 3px solid #9ae5d5; outline-offset: 4px; }
.ct-skip {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 3;
  box-shadow: 0 3px 16px #0008;
}
.ct-spot {
  position: fixed;
  box-sizing: border-box;
  border: 2px solid #f0d292;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px #020f1640, 0 0 22px #ebd29199, inset 0 0 14px #8fdcc52b;
  pointer-events: none;
}
.ct-target { outline: 2px solid #f0d292; outline-offset: 3px; }
.ct-connector { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ct-connector marker path { fill: #f0d292; }
.ct-arrow-line { fill: none; stroke: #f0d292; stroke-width: 2; stroke-dasharray: 5 6; }
.ct-coach {
  position: fixed;
  left: 16px;
  top: 72px;
  width: min(380px, calc(100% - 32px));
  max-height: calc(100dvh - 100px);
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #afab76;
  border-radius: 14px;
  background: linear-gradient(140deg, #123438fa, #061d25fc);
  box-shadow: 0 12px 42px #0009, inset 0 1px #e9d6a322;
  /* The card can scroll; its adjacent target and connector stay unobstructed. */
  pointer-events: auto;
}
.ct-step { margin: 0 0 7px; color: #a4d7c7; font-size: 12px; letter-spacing: .04em; }
.ct-title { margin: 0 0 10px; color: #ffe6ad; font-size: 21px; line-height: 1.35; }
.ct-description, .ct-live { margin: 0; font-size: 14px; line-height: 1.75; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.ct-live { margin-top: 10px; color: #a6e5cf; font-variant-numeric: tabular-nums; }
.ct-live:empty { display: none; }
.ct-next { margin-top: 16px; width: 100%; }
.ct-automation[data-stage="automation-ready"] .ct-spot {
  border-color: #a6e5cf;
  box-shadow: 0 0 0 9999px #020f1640, 0 0 22px #8fdcc599;
}
/* Never cover a native game dialog with a coach card or its spotlight. */
body:has(dialog[open]) .ct-coach,
body:has(dialog[open]) .ct-connector,
body:has(dialog[open]) .ct-spot { visibility: hidden; }
@keyframes ct-veil-parts {
  0%, 40% { opacity: 1; }
  64% { opacity: .42; }
  85%, 100% { opacity: 0; }
}
@keyframes ct-heavens {
  0%, 27% { opacity: 0; transform: translate(-50%, -50%) scale(.64) rotate(-9deg); }
  46% { opacity: .7; }
  65% { opacity: .48; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06) rotate(5deg); }
}
@keyframes ct-first-breath {
  0%, 29% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
  39% { opacity: .55; }
  76%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
}
@keyframes ct-apparition {
  0%, 37% { opacity: 0; filter: brightness(1.3) saturate(.55) blur(12px); }
  60% { opacity: .65; filter: brightness(1.12) saturate(.85) blur(3px); }
  86%, 100% { opacity: 1; filter: none; }
}
@keyframes ct-world-arrives {
  0%, 83% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ct-interface-arrives {
  0%, 83% { opacity: 0; }
  96%, 100% { opacity: 1; }
}
@keyframes ct-interface-second {
  0%, 86% { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes ct-interface-last {
  0%, 89% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-height: 540px) {
  .ct-coach { padding: 12px 16px; max-height: calc(100dvh - 90px); }
  .ct-title { font-size: 18px; margin-bottom: 5px; }
  .ct-description, .ct-live { font-size: 12px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-active .app, .ct-active .goddess { transition: none; animation: none; }
  .creator-tutorial .ct-creation-scene { display: none !important; }
  .ct-intro .app, .ct-intro .app > * { opacity: 1; animation: none; }
  .ct-intro .goddess { opacity: 1; filter: none; }
}