/* landing.css — the start page of EndlessCreation around the dial (dial.css): the dial under the
   question, the configured state (the chosen stage and area as a small badge, the wish as the main action, a quiet way back), one
   The frame (aura, π, „Intros“) comes from the shared chrome.css. Reduced motion: all still. Light and dark.
   0.4.0 (owner 2026-11-02, 1018c-Q921 a): the dial replaces the realm tiles; the configured state; aura, π and the top-right
   control moved to the shared chrome.css.
   0.2.0 (1018c-Q920): the three way cards and the line under the question are gone; four realms; the hidden π.
   version: 0.4.0 · created 2026-11-02 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */

/* the dial: as large as the screen allows under the question */
.dial{width:min(100%, 640px, calc(100dvh - 230px)); min-width:min(100%, 300px); display:flex; flex-direction:column; align-items:center; gap:4px}
.dial[hidden]{display:none}

/* the configured state */
.done{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:10px}
.done[hidden]{display:none}
.done-badge{margin:0; display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 8px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-edge); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px -14px rgba(var(--glass-shadow), .4); font-size:.92rem; letter-spacing:.02em}
.done-badge canvas{width:40px; height:40px; display:block}
.done-badge canvas+canvas{margin-left:-14px}
.done-t{margin-left:2px; text-align:left; line-height:1.3}
.done-go{appearance:none; border:0; cursor:pointer; font:inherit; font-size:1.05rem; letter-spacing:.04em; min-height:52px; padding:0 30px;
  border-radius:999px; color:var(--on-action); background:var(--action); box-shadow:0 14px 30px -14px rgba(var(--glass-shadow), .55);
  transition:transform .2s ease, box-shadow .2s ease}
.done-go:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(var(--glass-shadow), .6)}
.done-go:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.done-again{appearance:none; border:0; background:none; font:inherit; font-size:.88rem; color:var(--link); cursor:pointer; min-height:44px; padding:0 14px;
  letter-spacing:.02em; text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)}
.done-again:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:8px}

@media (prefers-reduced-motion: reduce){
  .done-go{transform:none !important; transition:none}
}