/* ============================================================
   styles.css  —  Ancient Obscurities theme
   Loaded AFTER core-styles.css. Sun-baked stone, torchlit temple.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');

:root {
    /* Palette — sandstone / ochre / torch-fire */
    --color-bg:              #1a1410;
    --color-bg-card:         #2b2118;
    --color-bg-card-deep:    #221a13;
    --color-bg-card-hover:   #3a2c1e;
    --color-border:          #6b5641;
    --color-border-strong:   #8a6f4f;
    --color-border-active:   #d4af37;
    --color-text:            #e6d8b8;
    --color-text-muted:      #a08a63;
    --color-text-subtle:     #6b5641;
    --color-accent:          #c9a13b;   /* weathered gold/ochre */
    --color-accent-light:    #ff8c42;   /* torch-fire orange */
    --color-accent-glow:     #ff8c42;
    --color-runtime:         #c9a13b;
    --color-arcane-idle:     #2b2118;
    --color-arcane-hover:    #ff8c42;
    --shadow-active-glow:    0 0 12px rgba(255, 140, 66, 0.4);

    /* Typography */
    --font-display:  'Cinzel', serif;
    --font-primary:  Arial, sans-serif;
}

/* ----------------------
   Page-specific overrides
---------------------- */
h1 {
    letter-spacing: 2px;
    color: var(--color-accent);
}

.subtitle {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Jukebox reads as a stone tablet set into the page */
#jukebox {
    background-color: #221a13;
    border: 2px solid var(--color-border-strong);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.7);
}

#jukebox h3:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Controls glow like torchlight on hover */
#jukebox-controls button:hover {
    box-shadow: 0 0 10px rgba(255, 140, 66, 0.6);
}

#jukebox-lyrics {
    display: block;
}

/* ----------------------
   Responsive overrides
---------------------- */
@media (max-width: 768px) {
    .arcane-phrase {
        display: none;
    }
}

@media (max-width: 480px) {
    h1        { font-size: 1.5em; }
    .subtitle { font-size: 0.9em; }

    .song-item h3 { font-size: 1em;   }
    #jukebox h3   { font-size: 1.2em; }
}