:root {
    color-scheme: light dark;
}

* {
    box-sizing: border-box;
}

html,
body,
#app {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    z-index: 1;
}

body {
    color: #0b2942;
}

/* Animated background container */
#bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    inset: -15%;
    opacity: 0.9;
    will-change: background-position, opacity;
}

/* Two cross-fading gradient layers */
.layerA {
    animation: bgPanA 45s linear infinite, bgFadeA 42s ease-in-out infinite;
}

.layerB {
    animation: bgPanB 44s linear infinite, bgFadeB 42s ease-in-out infinite;
}

/* Gradient definitions: vertical base + two soft blue blobs */
.bg-layer {
    background-image:
        radial-gradient(45% 35% at 20% 25%, rgba(231, 242, 255, 0.5), rgba(231, 242, 255, 0) 60%),
        radial-gradient(55% 45% at 85% 80%, rgba(215, 233, 255, 0.45), rgba(215, 233, 255, 0) 65%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 60%, #eef6ff 100%);
    background-size: 140% 140%, 160% 160%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 0% 0%;
}

@keyframes bgPanA {
    0% {
        background-position: 0% 0%, 100% 100%, 0% 0%;
    }

    50% {
        background-position: 20% 10%, 80% 90%, 0% 0%;
    }

    100% {
        background-position: 0% 0%, 100% 100%, 0% 0%;
    }
}

@keyframes bgPanB {
    0% {
        background-position: 80% 90%, 0% 0%, 0% 0%;
    }

    50% {
        background-position: 100% 100%, 20% 10%, 0% 0%;
    }

    100% {
        background-position: 80% 90%, 0% 0%, 0% 0%;
    }
}

@keyframes bgFadeA {

    0%,
    100% {
        opacity: 0.95;
    }

    50% {
        opacity: 0.65;
    }
}

@keyframes bgFadeB {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.9;
    }
}

/* Subtle 2% film grain to reduce banding */
.bg-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.02;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="128" height="128" filter="url(%23n)" opacity="1"/></svg>');
    background-size: 320px 320px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .layerA,
    .layerB {
        animation: none;
    }
}

.idle {
    max-width: 560px;
    margin: 10vh auto;
    padding: 16px;
    text-align: center;
}

.idle h1 {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #0b2942;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    margin: 0 0 12px;
}

.subtitle {
    opacity: 0.75;
    margin-top: -8px;
}

.controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 16px 0;
}

button {
    padding: 10px 16px;
    font-size: 16px;
    border-radius: 14px;
    border: 1px solid rgba(9, 105, 218, 0.25);
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    color: #0b2942;
    box-shadow: 0 8px 24px rgba(13, 71, 161, 0.08);
    appearance: none;
    -webkit-appearance: none;
}

button:active {
    transform: translateY(1px);
}

.hint {
    font-size: 14px;
    opacity: 0.7;
}

.banner {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff3cd;
    color: #7a5d00;
    border: 1px solid #ffe69c;
}

.hidden {
    display: none;
}

.hud {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
}

#exhaleDot {
    color: #1e88e5;
    opacity: 0.25;
    transition: opacity 120ms ease;
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
}

dialog {
    border: none;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Bigger Start button */
#start {
    font-size: 22px;
    padding: 16px 32px;
    border-radius: 18px;
    color: #0b2942 !important;
    background: linear-gradient(180deg, #ffffff, #f4f9ff);
    border: 1px solid rgba(9, 105, 218, 0.25);
    box-shadow: 0 10px 30px rgba(13, 71, 161, 0.10);
}

#start:hover {
    filter: brightness(1.02);
}

#start:active {
    transform: translateY(1px);
}

#start:disabled {
    opacity: 0.85;
    color: #0b2942 !important;
}

#end,
#restart {
    color: #0b2942;
}