/* ============================================
   WALL OF FAME — styles.css
   Mobile-first · DM Sans · Figma-accurate
   ============================================ */

:root {
    /* Colors */
    --bg: #ffffff;
    --bg-board: #D9D9D9;
    --bg-soft: #f9f9f9;
    --nav-pill-border: #B0B0B0;
    --nav-active: #ebdff7;
    --action-pill-bg: #f8f5fb;
    --text-primary: #1A1A1A;
    --text-secondary: #555555;
    --text-muted: #999999;
    --dashed-line: #D4D4D4;
    --border-light: #EBEBEB;

    /* Scrapbook palette */
    --tape: #E8DCC5;
    --tape-dark: #D4C8AA;
    --sticky-yellow: #FFF9A0;
    --sticky-pink: #FFD0E0;
    --sticky-blue: #C8EEFF;
    --sticky-green: #D4FFCB;

    /* Typography */
    --font-ui: 'DM Sans', -apple-system, sans-serif;
    --font-sans: var(--font-ui);
    --font-hand: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    --font-serif: 'Instrument Serif', serif;

    /* Radii */
    --r-pill: 999px;
    --r-card: 12px;
    --r-sm: 8px;

    /* Shadows */
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.14);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.18);

    /* Transitions */
    --t: 0.2s ease;

    /* Wall layout */
    --wall-frame-width: min(calc(100% - 32px), 430px);
}

/* =====================
   RESET & BASE
   ===================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
}

body {
    font-family: var(--font-ui);
    background: #EBEBEB;
    color: var(--text-primary);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

@media (pointer: coarse) {
    html,
    body,
    #app {
        touch-action: pan-y;
    }

    body.board-editing-mode .top-nav {
        display: none !important;
    }

    .board-canvas:not(.edit-active) {
        --wall-content-scale: 1;
    }

    .board-canvas.edit-active {
        --wall-content-scale: 1;
    }

    .layer-palette.hidden {
        display: none !important;
    }

    .layer-palette:not(.hidden),
    body.mobile-layer-reordering .layer-palette {
        display: block !important;
        left: 12px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }

    .board-canvas-wrap.has-active-layer {
        transform: none;
    }
}

#app {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 431px) {
    #app {
        border-radius: 40px;
        margin: 20px auto;
        width: calc(100% - 40px);
        max-width: 430px;
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
        box-shadow: var(--shadow-xl);
        overflow: hidden;
    }

    body {
        align-items: center;
        justify-content: center;
    }

    .layer-palette {
        left: 19px;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hidden {
    display: none !important;
}

body.is-premium-user .premium-star-badge,
body.is-premium-user .premium-choice-note {
    display: none !important;
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* 1. Spin (Cyber Lime) */
.animated-ring-spin {
    animation: spinGradient 2.5s linear infinite;
}
@keyframes spinGradient {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}

/* 2. Pulse (Pink Jelly) */
.animated-ring-pulse {
    background-size: 300% 300% !important;
    animation: pulseGradient 4s ease-in-out infinite alternate;
}
@keyframes pulseGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* 3. Disco (Y2K Rainbow) */
.animated-ring-disco {
    background-size: 400% 400% !important;
    animation: discoGradient 1s steps(4, end) infinite;
}
@keyframes discoGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* 4. Radar (Blue Yellow) */
.animated-ring-radar {
    animation: radarGradient 1.5s ease-in-out infinite alternate;
}
@keyframes radarGradient {
    0% { --gradient-angle: -60deg; }
    100% { --gradient-angle: 60deg; }
}

/* 5. Glitch (Red Black) */
.animated-ring-glitch {
    background-size: 200% 200% !important;
    animation: glitchGradient 3s infinite;
}
@keyframes glitchGradient {
    0%, 15% { background-position: 0% 0%; }
    16%, 20% { background-position: 100% 100%; }
    21%, 50% { background-position: 0% 100%; }
    51%, 55% { background-position: 100% 0%; }
    56%, 100% { background-position: 0% 0%; }
}

/* 6. Flow (Purple Peach) */
.animated-ring-flow {
    background-size: 200% 200% !important;
    animation: flowGradient 6s linear infinite;
}
@keyframes flowGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}