/* themes.css
   Everything that changes per song: accent colours, lyric colours, the aura,
   and the full main-panel skins. background.js sets data-bg-theme on <html>
   ("cup", "shibuya", "euphoria"; no attribute value = the default look in style.css).
   Load this AFTER style.css (background.js will add it automatically if missing). */

/* ---------------------------------------------------------------
   Per-song themes (background.js sets data-bg-theme on <html>)
   --------------------------------------------------------------- */

/* the animated canvas sits behind everything; keep the soft aura subtle on top of it */
#aura-layer {
    opacity: 0.5;
    transition: opacity 0.8s ease;
}

/* "Save That Shit": purple UI + lyrics, no grey-blue aura */
:root[data-bg-theme="cup"] {
    --color-accent-1: #E9D5FF;
    --color-accent-2: #7E22CE;
    --color-accent-1-rgb: 233, 213, 255;
    --color-accent-2-rgb: 126, 34, 206;
    --color-accent-soft: rgba(192, 132, 252, 0.35);
    --lyric-color-1: #FFFFFF;
    --lyric-color-2: #D8B4FE;
}

:root[data-bg-theme="cup"] #aura-layer {
    opacity: 0;
}

/* "Shibuya": hot pink + cyan neon UI + lyrics, no grey-blue aura */
:root[data-bg-theme="shibuya"] {
    --color-accent-1: #00E5FF;
    --color-accent-2: #FF2D95;
    --color-accent-1-rgb: 0, 229, 255;
    --color-accent-2-rgb: 255, 45, 149;
    --color-accent-soft: rgba(255, 45, 149, 0.35);
    --lyric-color-1: #FFFFFF;
    --lyric-color-2: #FF6EB4;
}

:root[data-bg-theme="shibuya"] #aura-layer {
    opacity: 0;
}

/* "EUPHORIA pt 2": blood red + black UI + lyrics, no grey-blue aura */
:root[data-bg-theme="euphoria"] {
    --color-accent-1: #FF4D5E;
    --color-accent-2: #8A0F22;
    --color-accent-1-rgb: 255, 77, 94;
    --color-accent-2-rgb: 138, 15, 34;
    --color-accent-soft: rgba(255, 30, 60, 0.35);
    --lyric-color-1: #FFFFFF;
    --lyric-color-2: #FF5A6A;
}

:root[data-bg-theme="euphoria"] #aura-layer {
    opacity: 0;
}

/* ---------------------------------------------------------------
   Fonts - one lyric face + one title face per theme
   (loaded from Google Fonts in index.html; background.js adds the link if missing)
   --------------------------------------------------------------- */
:root {
    --font-lyrics: 'Orbitron', 'Arial', sans-serif;
    --font-track: 'Michroma', 'Orbitron', sans-serif;
}

#track-name { font-family: var(--font-track, var(--font-lyrics)); }

:root[data-bg-theme="night"] .lyrics-line { font-size: 16px; letter-spacing: 0.03em; }
:root[data-bg-theme="night"] #lyrics-current { font-size: 18px; }
:root[data-bg-theme="night"] .lyrics-side { font-size: 11px; }
:root[data-bg-theme="night"] #track-name { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

/* background.js checks for this marker to confirm this file loaded */
:root { --skin-version: 4; }

/* ===============================================================
   PANEL SKINS - the main frame restyles itself per song
   (background.js sets data-bg-theme on <html>)
   =============================================================== */

.ui-panel.middle {
    transition: opacity 0.6s ease, background-color 0.5s ease, border-color 0.5s ease,
                box-shadow 0.5s ease, border-radius 0.5s ease;
}

/* ---------------------------------------------------------------
   "Save That Shit"  -  chunky purple pixel-art UI
   --------------------------------------------------------------- */
:root[data-bg-theme="cup"] {
    --font-main: 'Silkscreen', 'Courier New', monospace;
    --font-lyrics: 'Jersey 10', 'Silkscreen', monospace;
    --font-track: 'Silkscreen', 'Courier New', monospace;
    --color-border: #8b4be0;
    --color-glow: rgba(196, 160, 255, 0.5);
}

:root[data-bg-theme="cup"] .ui-panel.middle {
    border: none;
    border-radius: 0;
    background-color: rgba(16, 3, 34, 0.6);
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.035) 75%),
        linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.035) 75%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    box-shadow:
        0 -4px 0 0 #c4a0ff, 0 4px 0 0 #c4a0ff, -4px 0 0 0 #c4a0ff, 4px 0 0 0 #c4a0ff,
        0 -8px 0 0 #5b21b6, 0 8px 0 0 #5b21b6, -8px 0 0 0 #5b21b6, 8px 0 0 0 #5b21b6,
        12px 12px 0 0 rgba(0, 0, 0, 0.45),
        0 0 50px rgba(168, 85, 247, 0.4);
}

:root[data-bg-theme="cup"] .music-player {
    border: 3px solid #6d28d9;
    border-radius: 0;
    background: rgba(60, 14, 110, 0.42);
    box-shadow: inset 0 0 0 2px #1a0638, 5px 5px 0 0 rgba(8, 1, 20, 0.7);
}

:root[data-bg-theme="cup"] .image-box {
    border: 3px solid #c4a0ff;
    border-radius: 0;
    background: #1a0638;
    box-shadow: 4px 4px 0 0 #0b0216;
}

:root[data-bg-theme="cup"] .image-box-wrapper::before {
    border: 2px solid #c4a0ff;
    border-radius: 0;
    inset: -8px;
}

:root[data-bg-theme="cup"] button.btn {
    border: 3px solid #c4a0ff;
    border-radius: 0;
    background: #3b0f73;
    color: #fff;
    font-family: var(--font-main);
    font-size: 13px;
    box-shadow: 0 4px 0 0 #14042b, inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

:root[data-bg-theme="cup"] button.btn:hover {
    background: #6d28d9;
    border-color: #ffffff;
    box-shadow: 0 4px 0 0 #14042b, 0 0 20px rgba(168, 85, 247, 0.75), inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

:root[data-bg-theme="cup"] button.btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 0 #14042b;
}

:root[data-bg-theme="cup"] .viz-bar {
    width: 6px;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px);
            mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px);
}

:root[data-bg-theme="cup"] #progress {
    height: 10px;
    border-radius: 0;
    border: 2px solid #c4a0ff;
    box-sizing: border-box;
}

:root[data-bg-theme="cup"] #progress::-webkit-slider-thumb {
    width: 12px;
    height: 16px;
    border-radius: 0;
    background-color: #ffffff;
    border: 2px solid #7e22ce;
    box-shadow: 2px 2px 0 0 #14042b;
}

:root[data-bg-theme="cup"] #progress::-moz-range-thumb {
    width: 12px;
    height: 16px;
    border-radius: 0;
    background-color: #ffffff;
    border: 2px solid #7e22ce;
    box-shadow: 2px 2px 0 0 #14042b;
}

:root[data-bg-theme="cup"] .text-sm { letter-spacing: 0.04em; }

:root[data-bg-theme="cup"] .lyrics-line {
    font-size: 24px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-shadow: 2px 2px 0 #14042b;
}

:root[data-bg-theme="cup"] #lyrics-current { font-size: 30px; }
:root[data-bg-theme="cup"] .lyrics-side { font-size: 18px; }
:root[data-bg-theme="cup"] #track-name { font-size: 13px; letter-spacing: 0.08em; }

:root[data-bg-theme="cup"] .cursor-ring { border-radius: 0; border-width: 2px; }
:root[data-bg-theme="cup"] .cursor-dot { border-radius: 0; }

/* ---------------------------------------------------------------
   "Shibuya"  -  neon sign: pink outer tube, cyan inner tube
   --------------------------------------------------------------- */
:root[data-bg-theme="shibuya"] {
    --font-main: 'DotGothic16', 'Yu Gothic', 'Arial', sans-serif;
    --font-lyrics: 'Zen Dots', 'DotGothic16', 'Yu Gothic', sans-serif;
    --font-track: 'Monoton', 'Zen Dots', sans-serif;
    --color-border: rgba(0, 229, 255, 0.55);
    --color-glow: rgba(255, 45, 149, 0.55);
}

:root[data-bg-theme="shibuya"] .ui-panel.middle {
    border: 2px solid #ff2d95;
    border-radius: 6px;
    background-color: rgba(12, 3, 28, 0.58);
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
    box-shadow:
        0 0 6px #ff2d95,
        0 0 24px rgba(255, 45, 149, 0.55),
        0 0 70px rgba(255, 45, 149, 0.22),
        inset 0 0 0 4px rgba(10, 2, 24, 0.92),
        inset 0 0 0 5px #00e5ff,
        inset 0 0 18px rgba(0, 229, 255, 0.28);
}

:root[data-bg-theme="shibuya"] .ui-panel.middle::before {
    content: "SHIBUYA  渋谷";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 14px;
    background: #0a0214;
    border: 1px solid #ff2d95;
    color: #ff6eb4;
    font-family: var(--font-main);
    font-size: 11px;
    letter-spacing: 0.35em;
    white-space: nowrap;
    text-shadow: 0 0 8px #ff2d95;
    box-shadow: 0 0 10px rgba(255, 45, 149, 0.6);
    z-index: 12;
    animation: neonTagFlicker 7s infinite;
}

:root[data-bg-theme="shibuya"] .ui-panel.middle::after {
    content: "渋谷スクランブル交差点";
    position: absolute;
    bottom: -9px;
    right: 22px;
    padding: 0 8px;
    background: #0a0214;
    color: #00e5ff;
    font-family: var(--font-main);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-shadow: 0 0 6px #00e5ff;
    z-index: 12;
}

@keyframes neonTagFlicker {
    0%, 17%, 19%, 53%, 55%, 100% { opacity: 1; }
    18%, 54% { opacity: 0.25; }
}

:root[data-bg-theme="shibuya"] .music-player {
    border: 1px solid rgba(0, 229, 255, 0.6);
    border-radius: 3px;
    background: rgba(0, 229, 255, 0.04);
    box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.12), 0 0 12px rgba(0, 229, 255, 0.22);
}

:root[data-bg-theme="shibuya"] .image-box {
    border: 2px solid #00e5ff;
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.65);
}

:root[data-bg-theme="shibuya"] .image-box-wrapper::before {
    border: 1px solid #ff2d95;
    border-radius: 3px;
}

:root[data-bg-theme="shibuya"] button.btn {
    border: 1px solid #ff2d95;
    border-radius: 3px;
    background: rgba(255, 45, 149, 0.09);
    color: #ffd6ec;
    font-family: var(--font-main);
    text-shadow: 0 0 6px #ff2d95;
    box-shadow: 0 0 9px rgba(255, 45, 149, 0.45), inset 0 0 9px rgba(255, 45, 149, 0.2);
}

:root[data-bg-theme="shibuya"] #play-pause {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.09);
    color: #d4fbff;
    text-shadow: 0 0 6px #00e5ff;
    box-shadow: 0 0 9px rgba(0, 229, 255, 0.5), inset 0 0 9px rgba(0, 229, 255, 0.2);
}

:root[data-bg-theme="shibuya"] button.btn:hover {
    background: rgba(255, 45, 149, 0.32);
    border-color: #ffffff;
    box-shadow: 0 0 20px #ff2d95, 0 0 40px rgba(255, 45, 149, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.2);
}

:root[data-bg-theme="shibuya"] #play-pause:hover {
    background: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 20px #00e5ff, 0 0 40px rgba(0, 229, 255, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.2);
}

:root[data-bg-theme="shibuya"] .viz-bar {
    width: 5px;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(255, 45, 149, 0.8);
}

:root[data-bg-theme="shibuya"] #progress {
    height: 5px;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

:root[data-bg-theme="shibuya"] #progress::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: #00e5ff;
    box-shadow: 0 0 10px #00e5ff, 0 0 20px #ff2d95;
}

:root[data-bg-theme="shibuya"] #progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: #00e5ff;
    box-shadow: 0 0 10px #00e5ff, 0 0 20px #ff2d95;
}

:root[data-bg-theme="shibuya"] .lyrics-line {
    font-size: 14px;
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.55);
}

:root[data-bg-theme="shibuya"] .lyric-word.active .lyric-letter {
    filter: saturate(1) brightness(1.25) drop-shadow(0 0 5px var(--color-accent-1)) drop-shadow(0 0 12px var(--color-accent-2));
}

/* ---------------------------------------------------------------
   "EUPHORIA pt 2"  -  2003 camcorder viewfinder / car stereo
   --------------------------------------------------------------- */
:root[data-bg-theme="euphoria"] {
    --font-main: 'VT323', 'Courier New', monospace;
    --font-lyrics: 'Jacquard 12', 'VT323', monospace;
    --font-track: 'Jacquard 12', 'VT323', monospace;
    --color-border: rgba(255, 60, 85, 0.5);
    --color-glow: rgba(255, 40, 70, 0.6);
}

:root[data-bg-theme="euphoria"] .ui-panel.middle {
    border: 1px solid rgba(255, 58, 74, 0.4);
    border-radius: 2px;
    background-color: rgba(10, 2, 6, 0.6);
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .15 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow:
        0 0 36px rgba(255, 20, 50, 0.28),
        inset 0 0 50px rgba(0, 0, 0, 0.7);
}

/* viewfinder corner brackets */
:root[data-bg-theme="euphoria"] .ui-panel.middle::after {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    z-index: 12;
    background:
        linear-gradient(#ff3a4a, #ff3a4a) top left / 20px 2px no-repeat,
        linear-gradient(#ff3a4a, #ff3a4a) top left / 2px 20px no-repeat,
        linear-gradient(#ff3a4a, #ff3a4a) top right / 20px 2px no-repeat,
        linear-gradient(#ff3a4a, #ff3a4a) top right / 2px 20px no-repeat,
        linear-gradient(#ff3a4a, #ff3a4a) bottom left / 20px 2px no-repeat,
        linear-gradient(#ff3a4a, #ff3a4a) bottom left / 2px 20px no-repeat,
        linear-gradient(#ff3a4a, #ff3a4a) bottom right / 20px 2px no-repeat,
        linear-gradient(#ff3a4a, #ff3a4a) bottom right / 2px 20px no-repeat;
    animation: eupBracketFlicker 6s infinite;
}

:root[data-bg-theme="euphoria"] .ui-panel.middle::before {
    content: "\25CF CAM 01";
    position: absolute;
    top: 14px;
    left: 18px;
    color: #ff3a4a;
    font-family: var(--font-main);
    font-size: 18px;
    letter-spacing: 0.08em;
    text-shadow: 0 0 6px rgba(255, 40, 70, 0.8);
    z-index: 12;
    animation: eupRecBlink 1.6s steps(1) infinite;
}

@keyframes eupRecBlink {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0.18; }
}

@keyframes eupBracketFlicker {
    0%, 47%, 53%, 100% { opacity: 0.9; }
    50% { opacity: 0.35; }
}

:root[data-bg-theme="euphoria"] .music-player {
    position: relative;
    border: 1px solid rgba(255, 58, 74, 0.5);
    border-radius: 0;
    background: rgba(255, 30, 60, 0.04);
    box-shadow: inset 0 0 22px rgba(255, 20, 50, 0.12);
}

:root[data-bg-theme="euphoria"] .music-player::before {
    content: "\25B6 PLAY";
    position: absolute;
    top: -9px;
    left: 12px;
    padding: 0 8px;
    background: #0a0206;
    color: #ff6a78;
    font-family: var(--font-main);
    font-size: 15px;
    letter-spacing: 0.1em;
}

:root[data-bg-theme="euphoria"] .music-player::after {
    content: "SP  \25AE\25AE\25AF";
    position: absolute;
    top: -9px;
    right: 12px;
    padding: 0 8px;
    background: #0a0206;
    color: #ff6a78;
    font-family: var(--font-main);
    font-size: 15px;
    letter-spacing: 0.1em;
}

:root[data-bg-theme="euphoria"] .image-box {
    border: 1px solid #ff3a4a;
    border-radius: 0;
    box-shadow: 0 0 14px rgba(255, 30, 60, 0.4);
}

:root[data-bg-theme="euphoria"] .image-box img {
    filter: grayscale(0.6) contrast(1.15) saturate(1.3);
}

:root[data-bg-theme="euphoria"] .image-box-wrapper::before {
    border: 1px solid #ff3a4a;
    border-radius: 0;
}

:root[data-bg-theme="euphoria"] .text-sm {
    font-size: 17px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

:root[data-bg-theme="euphoria"] #current-time,
:root[data-bg-theme="euphoria"] #duration {
    color: #ff6a78;
}

:root[data-bg-theme="euphoria"] button.btn {
    border: 1px solid #ff3a4a;
    border-radius: 0;
    background: rgba(255, 30, 60, 0.08);
    color: #ffd9dd;
    font-family: var(--font-main);
    font-size: 19px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 9px rgba(255, 30, 60, 0.3);
}

:root[data-bg-theme="euphoria"] button.btn:hover {
    background: #ff1f3d;
    color: #060104;
    border-color: #ff8a96;
    box-shadow: 0 0 22px rgba(255, 30, 60, 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
    transform: scale(1.03);
}

:root[data-bg-theme="euphoria"] .viz-bar {
    width: 6px;
    border-radius: 0;
    box-shadow: none;
    background: repeating-linear-gradient(0deg, var(--color-accent-1) 0 3px, transparent 3px 5px);
}

:root[data-bg-theme="euphoria"] #progress {
    height: 4px;
    border-radius: 0;
}

:root[data-bg-theme="euphoria"] #progress::-webkit-slider-thumb {
    width: 8px;
    height: 18px;
    border-radius: 0;
    background-color: #ff1f3d;
    box-shadow: 0 0 10px #ff1f3d, 0 0 20px rgba(255, 20, 50, 0.6);
}

:root[data-bg-theme="euphoria"] #progress::-moz-range-thumb {
    width: 8px;
    height: 18px;
    border-radius: 0;
    background-color: #ff1f3d;
    box-shadow: 0 0 10px #ff1f3d, 0 0 20px rgba(255, 20, 50, 0.6);
}

:root[data-bg-theme="euphoria"] .lyrics-line {
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1.05;
    text-shadow: 2px 0 0 rgba(255, 0, 60, 0.4), -2px 0 0 rgba(0, 200, 255, 0.28), 0 0 8px rgba(255, 40, 70, 0.45);
}

:root[data-bg-theme="euphoria"] #lyrics-current { font-size: 32px; }
:root[data-bg-theme="euphoria"] .lyrics-side { font-size: 20px; }
:root[data-bg-theme="euphoria"] #track-name { font-size: 28px; letter-spacing: 0.02em; text-transform: none; }

:root[data-bg-theme="euphoria"] .cursor-ring { border-radius: 0; }
:root[data-bg-theme="euphoria"] .cursor-dot { border-radius: 0; }

:root[data-bg-theme="shibuya"] #lyrics-current { font-size: 16px; }
:root[data-bg-theme="shibuya"] .lyrics-side { font-size: 10px; }
:root[data-bg-theme="shibuya"] #track-name { font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; }