/* ============================================================
   styles.css  —  Modern Obscurities theme
   Loaded AFTER core-styles.css. Overrides CSS variables and
   adds any page-specific rules not covered by the core.
   ============================================================ */

/* Google Font import for MedievalSharp — shared with Two Parts Whiskey
   but kept local so each page is self-contained */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp:wght@400&display=swap');

:root {
    /* Palette — dark purple/amethyst theme */
    --color-bg:              #121212;
    --color-bg-card:         #1e1e1e;
    --color-bg-card-deep:    #282828;
    --color-bg-card-hover:   #333333;
    --color-border:          #444444;
    --color-border-strong:   #444444;
    --color-border-active:   #bb86fc;
    --color-text:            #e0e0e0;
    --color-text-muted:      #888888;
    --color-text-subtle:     #444444;
    --color-accent:          #bb86fc;   /* Amethyst purple */
    --color-accent-light:    #ffd700;   /* Gold highlight */
    --color-accent-glow:     #ffd700;
    --color-runtime:         #bb86fc;
    --color-arcane-idle:     #222222;
    --color-arcane-hover:    #ffd700;
    --shadow-active-glow:    0 0 12px rgba(187, 134, 252, 0.4);

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

/* ----------------------
   Page-specific overrides
---------------------- */

/* h1 is lowercase on this page */
h1 {
    text-transform: lowercase;
    color: var(--color-text);
}

/* Subtitle is very dark on this page */
.subtitle {
    color: var(--color-text-subtle);
}

/* Jukebox has a deep purple card instead of matching --color-bg-card */
#jukebox {
    background-color: #3c2f5e;
    border: none;
}

/* Jukebox h3 (song title) is clickable/underline on this page */
#jukebox h3:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Controls use semi-transparent white buttons on this page */
#jukebox-controls button {
    background-color: rgba(255, 255, 255, 0.5);
    color: #121212;
}

#jukebox-controls button img {
    width:      100%;
    height:     100%;
    object-fit: fill;
    display:    block;
}

#jukebox-controls button:hover {
    background-color: transparent;
    border: 2px solid #018786;
}

/* Lyrics button is block-level on this page */
#jukebox-lyrics {
    display: block;
}

/* Extended arcane phrase positions — this page has 18 phrases vs 2 in core */
.phrase-3  { top: 30%;    left: 10%;  }
.phrase-4  { bottom: 25%; left: 15%;  }
.phrase-5  { bottom: 15%; right: 10%; }
.phrase-6  { top: 50%;    left: 8%;   }
.phrase-7  { bottom: 30%; right: 12%; }
.phrase-8  { top: 40%;    left: 20%;  }
.phrase-9  { top: 60%;    right: 18%; }
.phrase-10 { bottom: 40%; left: 22%;  }
.phrase-11 { top: 70%;    left: 7%;   }
.phrase-12 { bottom: 50%; right: 25%; }
.phrase-13 { top: 15%;    left: 30%;  }
.phrase-14 { bottom: 10%; right: 8%;  }
.phrase-15 { top: 80%;    left: 12%;  }
.phrase-16 { bottom: 20%; right: 30%; }
.phrase-17 { top: 25%;    left: 25%;  }
.phrase-18 { bottom: 35%; right: 20%; }

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

    .tag-filter label {
        flex:      1 0 45%;
        min-width: 100px;
        max-width: 150px;
    }
}

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

    #jukebox-controls button {
        background-color: rgba(255, 255, 255, 0.5);
    }

    #jukebox-controls button img {
        width:      100%;
        height:     100%;
        object-fit: fill;
        display:    block;
    }

    .tag-filter label {
        flex:      1 0 100%;
        min-width: 0;
        max-width: none;
    }
}