/* ── Demo Page Styles ── */
body {
    font-family: "Nunito", sans-serif;
    min-height: 100vh;
    height: auto;
}

.display-brand {
    font-family: "Fredoka One", cursive;
    color: var(--pf-pink);
    text-shadow: 3px 3px 0 var(--pf-tan-dark);
    letter-spacing: 0.03em;
}

.swatch-box {
    width: 100%;
    height: 80px;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
}
.swatch-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pf-tan-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.swatch-hex {
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--pf-brown);
}

.section-title {
    font-family: "Fredoka One", cursive;
    color: var(--pf-tan-dark);
    border-bottom: 2px dashed var(--pf-tan);
    padding-bottom: 6px;
    margin-bottom: 1.2rem;
}

/* Feather pillow decorative bg */
.hero-band {
    background: linear-gradient(
        135deg,
        var(--pf-cream) 0%,
        var(--pf-tan-light) 60%,
        #f0d9c0 100%
    );
    border-bottom: 3px solid var(--pf-tan);
}

h1, h2 {
    color: var(--pf-tan-dark);
    font-family: "Fredoka One", cursive;
}

/* Hide the navbar on landscape mobile when the game is active */
@media (pointer: coarse) and (orientation: landscape) {
    body.demo-active .navbar {
        display: none;
    }
}
.ai-name {
    color: #55c434;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.ai-name.mystery {
    color: #efb338;
    text-shadow: 0 0 10px rgba(241, 194, 46, 0.5);
}