/* ============================================================
   styles.css  —  Algorithmic Obscurities theme
   Loaded AFTER core-styles.css. Neon cyberpunk / matrix.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');

:root {
    /* Palette — cyan / magenta on void black */
    --color-bg:              #05080a;
    --color-bg-card:         #0d1418;
    --color-bg-card-deep:    #080c0e;
    --color-bg-card-hover:   #12242a;
    --color-border:          #1a3a3f;
    --color-border-strong:   #235a5f;
    --color-border-active:   #00fff2;
    --color-text:            #c8f0ec;
    --color-text-muted:      #6fa8a3;
    --color-text-subtle:     #2a4a4a;
    --color-accent:          #00fff2;   /* electric cyan */
    --color-accent-light:    #7fffd4;   /* aquamarine */
    --color-accent-glow:     #ff00ea;   /* magenta glow */
    --color-runtime:         #00fff2;
    --color-arcane-idle:     #0d1418;
    --color-arcane-hover:    #ff00ea;
    --shadow-active-glow:    0 0 12px rgba(0, 255, 242, 0.5);

    /* Typography */
    --font-display:  'Orbitron', sans-serif;
    --font-primary:  'Share Tech Mono', monospace;
}

/* ----------------------
   Page-specific overrides
---------------------- */
h1 {
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 242, 0.6);
}

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

/* Jukebox reads as a terminal/HUD panel */
#jukebox {
    background-color: #0a1214;
    border: 1px solid var(--color-border-active);
    box-shadow: 0 0 20px rgba(0, 255, 242, 0.15);
}

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

#jukebox-controls button:hover {
    box-shadow: 0 0 12px rgba(255, 0, 234, 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; }
}