/* ============================================================
   core-styles.css  —  Shared structural styles
   All pages load this file first.
   Colors and fonts are defined via CSS custom properties,
   which each page's local styles.css overrides.
   ============================================================ */

/* ----------------------
   CSS Variable Defaults
   A page that doesn't override these will get a neutral dark theme.
   Local styles.css should redefine these under :root.
---------------------- */
:root {
    --color-bg:              #1a1a1a;
    --color-bg-card:         #252525;
    --color-bg-card-deep:    #1e1e1e;
    --color-bg-card-hover:   #333333;
    --color-border:          #444444;
    --color-border-strong:   #666666;
    --color-border-active:   #aaaaaa;
    --color-text:            #e0e0e0;
    --color-text-muted:      #aaaaaa;
    --color-text-subtle:     #888888;
    --color-accent:          #cccccc;
    --color-accent-light:    #eeeeee;
    --color-accent-glow:     #cccccc;
    --color-runtime:         #dddddd;
    --color-arcane-idle:     #2a2a2a;
    --color-arcane-hover:    #cccccc;
    --font-primary:          Arial, sans-serif;
    --font-display:          Arial, sans-serif;
    --shadow-active-glow:    0 0 12px rgba(180, 180, 180, 0.4);
}

/* ============================================================
   BASE
   ============================================================ */
body {
    font-family:     var(--font-display);
    background-color: var(--color-bg);
    color:           var(--color-text);
    margin:          0;
    padding:         20px;
    text-align:      center;
    position:        relative;
    overflow-x:      hidden;
    padding-top:     72px;
}

h1 {
    font-size:     2.5em;
    margin-bottom: 10px;
    color:         var(--color-accent);
}

.subtitle {
    font-family:   var(--font-primary);
    font-size:     1.2em;
    color:         var(--color-text-muted);
    margin-bottom: 40px;
    line-height:   1.5;
}

.section {
    margin-bottom: 60px;
}

/* ============================================================
   SONG LIST
   ============================================================ */
.song-list {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             20px;
    max-width:       1200px;
    margin:          0 auto;
}

.song-item {
    background-color: var(--color-bg-card);
    border-radius:    8px;
    padding:          15px;
    width:            250px;
    text-align:       center;
    box-shadow:       0 4px 12px rgba(0, 0, 0, 0.6);
    position:         relative;
    z-index:          1;
    white-space:      pre-line;
    border:           1px solid var(--color-border);
    cursor:           pointer;
}

.song-item img {
    width:         200px;
    height:        auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.song-item h3 {
    font-size: 1.2em;
    margin:    10px 0;
    color:     var(--color-accent-light);
}

.song-item .length {
    font-size:  0.85em;
    color:      var(--color-text-muted);
    font-weight: bold;
    margin:     2px 0;
    text-align: center;
    min-width:  40px;
}

.song-item .view-lyrics {
    color:           var(--color-accent);
    text-decoration: none;
    background:      none;
    border:          none;
    cursor:          pointer;
    font-family:     var(--font-primary);
    font-size:       0.9em;
}

.song-item .view-lyrics:hover {
    color:           var(--color-accent-light);
    text-decoration: underline;
}

.song-item .lyrics {
    text-align:       left;
    white-space:      pre-wrap;
    font-family:      var(--font-primary);
    font-size:        0.9em;
    margin-top:       10px;
    padding:          10px;
    background-color: var(--color-bg-card-deep);
    border-radius:    4px;
    color:            var(--color-text);
    border:           1px solid var(--color-border);
}

.song-item .tags {
    font-size:     0.9em;
    color:         var(--color-accent-light);
    margin-bottom: 10px;
    margin-top:    2px;
}

.song-item.active {
    border-color: var(--color-border-active);
    box-shadow:   var(--shadow-active-glow);
}

/* ============================================================
   JUKEBOX
   ============================================================ */
#jukebox {
    background-color: var(--color-bg-card);
    border-radius:    8px;
    padding:          20px;
    max-width:        400px;
    margin:           0 auto 60px;
    box-shadow:       0 6px 16px rgba(0, 0, 0, 0.7);
    position:         relative;
    z-index:          1;
    border:           2px solid var(--color-border-strong);
}

#jukebox h2 {
    font-size:      1.8em;
    margin:         0 0 15px 0;
    text-transform: uppercase;
    color:          var(--color-text);
}

#jukebox h3 {
    font-size:   1.5em;
    margin:      15px 0 10px;
    color:       var(--color-accent);
    font-family: var(--font-display);
}

/* ----------------------
   Cover image + Ken Burns
---------------------- */
#jukebox-cover-container {
    position:         relative;
    width:            100%;
    margin-bottom:    15px;
    overflow:         hidden;
    border-radius:    8px;
    aspect-ratio:     1 / 1;
    background-color: var(--color-bg-card);
}

#jukebox-cover,
#jukebox-cover-back {
    position:      absolute;
    top:           0;
    left:          0;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 8px;
    will-change:   transform;
    animation:     kenburns 87s ease-in-out infinite alternate;
}

#jukebox-cover      { z-index: 2; opacity: 1; }
#jukebox-cover-back { z-index: 1; opacity: 1; }

@keyframes kenburns 
{
  0%    {    transform: scale(1.0)  translate(0%, 0%);      }
  20%   {    transform: scale(1.05) translate(2%, -1.5%);   }
  45%   {    transform: scale(1.11) translate(-1.5%, 2.5%); }
  70%   {    transform: scale(1.07) translate(3%, 1%);      }
  88%   {    transform: scale(1.12) translate(-2%, -2%);    }
  100%  {    transform: scale(1.04) translate(1.5%, 2%);    }
}


/* ----------------------
   Seek bar & time display
---------------------- */
#jukebox-player {
    margin: 10px 0 5px;
}

#jukebox-time-display {
    display:         flex;
    justify-content: space-between;
    font-family:     var(--font-primary);
    font-size:       0.8em;
    color:           var(--color-text-muted);
    margin-bottom:   4px;
    padding:         0 2px;
}

#jukebox-seek {
    width:            100%;
    height:           6px;
    -webkit-appearance: none;
    appearance:       none;
    background:       var(--color-border);
    border-radius:    3px;
    outline:          none;
    cursor:           pointer;
    margin-bottom:    10px;
    box-sizing:       border-box;
}

#jukebox-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:  none;
    width:       14px;
    height:      14px;
    border-radius: 50%;
    background:  var(--color-accent);
    cursor:      pointer;
    box-shadow:  0 0 4px rgba(0, 0, 0, 0.5);
}

#jukebox-seek::-moz-range-thumb {
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    var(--color-accent);
    cursor:        pointer;
    border:        none;
    box-shadow:    0 0 4px rgba(0, 0, 0, 0.5);
}

/* ----------------------
   Playback controls
---------------------- */
#jukebox-controls {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             15px;
    padding:         5px 10px;
    border-radius:   5px;
}

#jukebox-controls button {
    padding:          0;
    line-height:      0;
    overflow:         hidden;
    border:           none;
    background-color: transparent;
    cursor:           pointer;
    display:          block;
}

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

#jukebox-controls button:hover {
    opacity:   0.8;
    transform: scale(1.1);
}

#prev-btn,
#next-btn {
    width:         50px;
    height:        50px;
    border-radius: 20%;
}

#play-pause-btn {
    width:         70px;
    height:        70px;
    border-radius: 20%;
}

/* ----------------------
   Lyrics (jukebox panel)
---------------------- */
#jukebox-lyrics {
    color:           var(--color-accent);
    text-decoration: none;
    background:      none;
    border:          none;
    cursor:          pointer;
    font-family:     var(--font-primary);
    font-size:       0.9em;
}

#jukebox-lyrics:hover {
    color:           var(--color-accent-light);
    text-decoration: underline;
}

#jukebox-lyrics-content {
    text-align:       left;
    white-space:      pre-wrap;
    font-family:      var(--font-primary);
    font-size:        0.9em;
    margin-top:       10px;
    padding:          10px;
    background-color: var(--color-bg-card-deep);
    border-radius:    4px;
    color:            var(--color-text);
    border:           1px solid var(--color-border);
}

/* ----------------------
   Meta row (runtime + lyrics button)
---------------------- */
#jukebox-meta {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      12px;
    width:           100%;
    box-sizing:      border-box;
}

#jukebox-meta button {
    margin:      0;
    padding:     0;
    line-height: 1;
}

#runtime {
    font-weight: bold;
    color:       var(--color-runtime);
}

/* ============================================================
   TAG FILTER
   ============================================================ */
.tag-filter {
    display:          flex;
    flex-wrap:        wrap;
    justify-content:  left;
    gap:              8px;
    margin-bottom:    40px;
    max-width:        500px;
    margin-left:      auto;
    margin-right:     auto;
    padding:          10px;
    background-color: var(--color-bg-card);
    border-radius:    8px;
    box-shadow:       0 2px 6px rgba(0, 0, 0, 0.5);
    border:           1px solid var(--color-border);
}

.tag-filter label {
    background-color: var(--color-bg-card-deep);
    padding:          8px 12px;
    border-radius:    6px;
    cursor:           pointer;
    color:            var(--color-text);
    flex:             1 0 20%;
    text-align:       left;
    border:           1px solid var(--color-border-strong);
    min-width:        80px;
    max-width:        120px;
    transition:       background-color 0.2s, transform 0.1s;
    font-family:      var(--font-primary);
    font-size:        0.9em;
}

.tag-filter label:hover {
    background-color: var(--color-bg-card-hover);
    transform:        translateY(-1px);
    color:            var(--color-accent-light);
}

.tag-filter input:checked + span {
    color:       var(--color-accent-light);
    font-weight: bold;
}

/* ============================================================
   COPYRIGHT
   ============================================================ */
.copyright {
    font-family: var(--font-primary);
    font-size:   1em;
    color:       var(--color-text-muted);
    margin-top:  40px;
    position:    relative;
    z-index:     1;
}

/* ============================================================
   ARCANE PHRASES
   ============================================================ */
.arcane-phrase {
    position:       absolute;
    color:          var(--color-arcane-idle);
    font-size:      1em;
    font-family:    var(--font-display);
    transition:     color 0.3s ease, z-index 0.3s ease;
    pointer-events: auto;
    user-select:    none;
    z-index:        0;
    max-width:      200px;
    text-align:     left;
}

.arcane-phrase:hover {
    color:       var(--color-arcane-hover);
    text-shadow: 0 0 12px var(--color-accent-glow);
    z-index:     2;
}

.phrase-1 { top: 10%; left: 5%;  }
.phrase-2 { top: 20%; right: 5%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    h1 {
        font-size: 2em;
    }

    .subtitle {
        font-size: 1em;
    }

    .song-item {
        flex: 0 0 100%;
    }

    #jukebox {
        max-width: 100%;
    }

    .arcane-phrase {
        font-size: 0.8em;
        max-width: 150px;
        display:   none;
    }

    .tag-filter {
        max-width: 100%;
        padding:   8px;
    }

    .tag-filter label {
        padding:     8px 12px;
        border-radius: 6px;
        cursor:      pointer;
        flex:        1 0 20%;
        text-align:  left;
        min-width:   80px;
        max-width:   120px;
        transition:  background-color 0.2s, transform 0.1s;
        display:     flex;
        align-items: center;
        gap:         6px;
    }

    #prev-btn,
    #next-btn {
        width:  36px;
        height: 36px;
    }

    #play-pause-btn {
        width:  44px;
        height: 44px;
    }
}