/* ============================================================
   styles.css  —  Elder Obscurities theme
   Loaded AFTER core-styles.css. Aged papyrus & candlelit ink.
   ============================================================ */

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

:root {
    /* Palette — parchment / sepia / aged gold leaf */
    --color-bg:              #1c1712;
    --color-bg-card:         #2a2119;
    --color-bg-card-deep:    #201a14;
    --color-bg-card-hover:   #362c22;
    --color-border:          #5c4a35;
    --color-border-strong:   #7a6248;
    --color-border-active:   #c9a961;
    --color-text:            #ece0c8;   /* parchment white */
    --color-text-muted:      #9c8b6a;
    --color-text-subtle:     #5c4a35;
    --color-accent:          #c9a961;   /* aged gold leaf */
    --color-accent-light:    #f0e6c8;   /* parchment white-gold — NOT gold, keeps Elder distinct from Modern/TPW */
    --color-accent-glow:     #d4af6a;
    --color-runtime:         #c9a961;
    --color-arcane-idle:     #2a2119;
    --color-arcane-hover:    #f0e6c8;
    --shadow-active-glow:    0 0 12px rgba(240, 230, 200, 0.4);

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

/* ----------------------
   Page-specific overrides
---------------------- */
h1 {
    color: var(--color-text);
}

.subtitle {
    color: var(--color-text-subtle);
}

/* Jukebox reads as a bound tome */
#jukebox {
    background-color: #241c15;
    border: 1px solid var(--color-border-strong);
}

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

#jukebox-controls button:hover {
    box-shadow: 0 0 8px rgba(240, 230, 200, 0.5);
}

#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; }
}