/* Warm Honey Breath — Styles */

:root {
   --color-bg-dark: #1e1628;
   --color-amber: #f7a948;
   --color-honey-gold: #f0c25e;
   --color-lavender: #c4a6d9;
   --color-soft-white: #f4efe7;
   --color-muted: #9a8ea0;
   --font-rounded: 'Nunito', 'Quicksand', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: var(--color-bg-dark);
   font-family: var(--font-rounded);
   color: var(--color-soft-white);
}

#app {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

#canvas {
   display: block;
   width: 100%;
   height: 100%;
}

/* Onboarding Overlay */

#onboarding-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(30, 22, 40, 0.92);
   z-index: 10;
   opacity: 1;
   transition: opacity 0.8s ease;
   cursor: pointer;
}

#onboarding-overlay.hidden {
   opacity: 0;
   pointer-events: none;
}

#onboarding-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 1.1rem;
   padding: 2.4rem 2rem;
   max-width: 340px;
}

#onboarding-tagline {
   font-size: 1.35rem;
   letter-spacing: 0.04em;
   font-weight: 700;
   color: var(--color-honey-gold);
   line-height: 1.35;
}

.divider {
   width: 48%;
   border: none;
   border-top: 1px solid rgba(196, 166, 217, 0.3);
   margin: 0.2rem 0;
}

#onboarding-step-inhale,
#onboarding-step-freeze,
#onboarding-step-exhale {
   font-size: 1.05rem;
   line-height: 1.5;
   color: var(--color-soft-white);
   opacity: 0.85;
}

#onboarding-hint-dismiss {
   margin-top: 0.5rem;
   font-size: 0.85rem;
   color: var(--color-muted);
   opacity: 0.7;
   letter-spacing: 0.05em;
}