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

:root {
    /* Colors */
    --bg: #ffffff;
    --bg-board: #D9D9D9;
    --bg-soft: #f9f9f9;
    --nav-pill-border: #DEDEDE;
    --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;
    }

    body.board-editing-mode .board-header {
        display: none;
    }

    body.board-editing-mode .board-canvas-wrap {
        margin-top: 16px;
    }

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

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

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

    body.mobile-layer-reordering .layer-palette {
        display: block !important;
        left: 16px;
        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;
}