/* ============================================
   Shadow Garden — Loom Experience Styles
   ============================================ */

:root {
    /* Loom base */
    --bg-base: #1e1b4b;
    --bg-glow: #1e1b4b;

    /* Shape palette — bold high-contrast pastels */
    --shape-coral:    #fca5a5;
    --shape-sky:      #7dd3fc;
    --shape-lavender: #c4b5fd;
    --shape-mint:     #6ee7b7;
    --shape-butter:   #fde68a;
    --shape-peach:    #fdba74;

    /* Shadow palette — darker tints of each shape color */
    --shadow-coral:    #d97070;
    --shadow-sky:      #4aa8d4;
    --shadow-lavender: #8b7fcf;
    --shadow-mint:     #3bba8a;
    --shadow-butter:   #d4b85a;
    --shadow-peach:    #d48f4a;

    /* UI */
    --text-hint: #e0f2fe;
}

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

body {
    background-color: var(--bg-base);
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Background gradient overlay that shifts as garden grows */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transition: background 3s ease;
    background: radial-gradient(
        ellipse at 50% 120%,
        transparent 0%,
        var(--bg-base) 100%
    );
}

#garden-canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100vw;
    height: 100dvh;
    cursor: crosshair;
}

/* Particle canvas (behind shapes, above bg) */
#particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Instruction hint */
.hint {
    position: fixed;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cabinet Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(0.875rem, 2vw, 1rem);
    color: var(--text-hint);
    opacity: 0;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 10;
}

.hint.visible {
    animation: hintPulse 3s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.6; }
}

.hint.hidden {
    animation: none;
    opacity: 0;
    transition: opacity 1s ease;
}

/* Back nav */
.back-link {
    position: fixed;
    top: max(1.5rem, env(safe-area-inset-top, 1.5rem));
    left: max(1.5rem, env(safe-area-inset-left, 1.5rem));
    z-index: 30;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(224, 242, 254, 0.45);
    text-decoration: none;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    transition: color 0.2s ease, opacity 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.back-link:hover,
.back-link:active {
    color: #e0f2fe;
}

/* Reduced motion: signal to JS */
@media (prefers-reduced-motion: reduce) {
    /* JS reads this via matchMedia and adapts behavior */
}