/* ==========================================================================
   Global Variables & Color Theme
   ========================================================================== */
:root {
    --bg-deep-blue: #0b0c12;
    --bg-midnight-navy: #181b26;

    --text-white: #f0f0f5;
    --text-silver: #a1a1aa;

    --glass-bg: rgba(20, 22, 32, 0.45);
    --glass-border: rgba(255, 255, 255, 0.08);
    --btn-border-silver: rgba(255, 255, 255, 0.15);

    --badge-bg-result: #2C2421;
    --badge-text-result: #F8EFEA;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-deep-blue);
    background-image: radial-gradient(ellipse at top center, var(--bg-midnight-navy) 0%, var(--bg-deep-blue) 80%);
    color: var(--text-white);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    /* Allow vertical scroll, hide horizontal scroll */
    overflow-x: hidden;
    position: relative;
}

/* ==========================================================================
   Multi-layered Celestial Background Effects
   ========================================================================== */
.stars-bg, .stars-twinkle, .stars-bokeh {
    /* Fixed position prevents the background from cutting off when scrolling */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    display: block;
    pointer-events: none;
}

/* Layer 0: Static fine grain stars */
.stars-bg {
    z-index: 0;
    background: transparent url('https://www.transparenttextures.com/patterns/dark-dot.png') repeat;
    /* Smaller size makes the texture repeat more, increasing star density */
    background-size: 200px;
    opacity: 0.45;
}

/* Layer 1: Flickering Stardust */
.stars-twinkle {
    z-index: 1;
    background: transparent url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
    background-size: 250px;
    animation: twinkle-glow 8s linear infinite alternate;
    opacity: 0.35;
}

/* Layer 2: Glowing Bokeh / Bright Star Flares */
.stars-bokeh { z-index: 2; }
.stars-bokeh::after {
    content: "";
    position: absolute;
    /* Hide the origin element slightly off-screen */
    top: -10px;
    left: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffffff;

    /* Box Shadow syntax: X | Y | blur | spread | color */
    /* Added 'spread' (4th value) to give stars physical size and prevent them from vanishing */
    box-shadow:
            15vw 10vh 3px 1px rgba(255, 255, 255, 0.95),
            65vw 20vh 5px 2px rgba(255, 255, 255, 0.8),
            40vw 55vh 12px 4px rgba(100, 200, 255, 0.65),
            80vw 65vh 2px 0px rgba(255, 255, 255, 0.6),
            10vw 75vh 8px 2px rgba(255, 255, 255, 0.85),
            50vw 15vh 2px 0px rgba(255, 255, 255, 0.5),
            30vw 35vh 8px 2px rgba(255, 255, 255, 0.7),
            75vw 50vh 4px 1px rgba(255, 255, 255, 0.8),
            90vw 85vh 2px 0px rgba(255, 255, 255, 0.5),

                /* Additional stars to increase density across the screen */
            25vw 85vh 5px 1px rgba(255, 255, 255, 0.75),
            85vw 15vh 7px 2px rgba(255, 255, 255, 0.9),
            55vw 80vh 4px 1px rgba(100, 200, 255, 0.5),
            5vw 40vh 3px 0px rgba(255, 255, 255, 0.6),
            95vw 45vh 6px 2px rgba(255, 255, 255, 0.85),
            45vw 25vh 2px 0px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Layout Containers & Glass Cards
   ========================================================================== */
.app-container {
    width: 100%;
    max-width: 500px;
    padding: 40px 20px;
    margin: auto; /* Centers the container and ensures mobile scrolling works */
    position: relative; /* Required for z-index to work against fixed backgrounds */
    z-index: 10;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    padding: 40px 30px;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.glass-card.active-screen { display: block; opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Typography & Logo
   ========================================================================== */
.heading-serif { font-family: 'Playfair Display', serif; font-weight: 400; line-height: 1.25; margin-bottom: 16px; }
h1.heading-serif { font-size: 34px; }
h2.heading-serif { font-size: 26px; }

.tracking-text { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-silver); margin-bottom: 10px; }
.desc-text { font-size: 15px; line-height: 1.65; color: var(--text-silver); margin-bottom: 30px; }

.combined-logo-container { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 35px; gap: 6px; }
.laufey-image-logo { height: 60px; width: auto; }
.ti-script { font-family: 'Allura', cursive; font-size: 54px; color: var(--text-white); line-height: 1; margin-bottom: 2px; text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2); }

/* ==========================================================================
   UI Components
   ========================================================================== */
.progress-container { height: 2px; background: rgba(255, 255, 255, 0.08); margin-bottom: 30px; }
.progress-fill { height: 100%; background: white; width: 0%; transition: width 0.4s ease; }

.badge-container { margin-bottom: 20px; text-align: center; }
.badge { border: 1px solid var(--btn-border-silver); padding: 7px 16px; border-radius: 20px; font-size: 10px; letter-spacing: 0.12em; background: rgba(255,255,255,0.03); }

.primary-btn { width: 100%; background: var(--text-white); color: var(--bg-deep-blue); border: none; padding: 18px; border-radius: 30px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: opacity 0.3s ease; }
.primary-btn:hover { opacity: 0.9; }

.secondary-btn { width: 100%; background: transparent; color: var(--text-white); border: 1px solid var(--btn-border-silver); padding: 16px; border-radius: 30px; cursor: pointer; transition: background 0.3s ease; }
.secondary-btn:hover { background: rgba(255, 255, 255, 0.05); }

.option-btn { width: 100%; background: transparent; color: var(--text-white); border: 1px solid var(--btn-border-silver); padding: 20px; border-radius: 18px; text-align: left; margin-bottom: 14px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.45; transition: all 0.3s ease; }
.option-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: white; transform: translateX(4px); }

/* ==========================================================================
   Result Screen Layout
   ========================================================================== */
.result-main-title { font-size: 42px; margin-top: -5px; }
.album-text { font-style: italic; font-size: 13px; color: var(--text-silver); margin-top: -12px; margin-bottom: 24px; }
.section-divider { height: 1px; background: var(--glass-border); margin: 24px 0; }

.result-tag { display: inline-block; background: var(--badge-bg-result); color: var(--badge-text-result); padding: 7px 15px; border-radius: 20px; font-size: 12px; margin-right: 8px; margin-bottom: 8px; }

.track-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; }
.track-counter { font-size: 10px; letter-spacing: 0.2em; color: var(--text-silver); text-transform: uppercase; width: 80px; }
.track-name { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--text-white); margin-left: 10px; }
.result-actions { display: flex; gap: 12px; margin-top: 30px; }

/* ==========================================================================
   Secondary Matches Progress Bars
   ========================================================================== */
.match-section { margin-bottom: 30px; }
.match-bar-wrapper { margin-bottom: 15px; }
.match-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-white); margin-bottom: 6px; font-family: 'Inter', sans-serif; font-weight: 500; }
.match-percent { color: var(--text-silver); font-weight: 400; }
.match-track { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; }
.match-fill { height: 100%; background: var(--text-silver); border-radius: 4px; width: 0%; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }

/* ==========================================================================
   Collection / View All Screen
   ========================================================================== */
.all-types-scroll-box { max-height: 420px; overflow-y: auto; padding-right: 10px; }
.all-types-scroll-box::-webkit-scrollbar { width: 6px; }
.all-types-scroll-box::-webkit-scrollbar-track { background: transparent; }
.all-types-scroll-box::-webkit-scrollbar-thumb { background: var(--btn-border-silver); border-radius: 10px; }

.collection-era-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); padding: 18px; border-radius: 16px; margin-bottom: 14px; }
.collection-era-card h3 { font-family: 'Playfair Display', serif; font-size: 21px; margin-bottom: 4px; color: var(--text-white); }
.collection-subtitle { font-size: 12px; color: var(--text-silver); margin-bottom: 10px; font-style: italic; }
.collection-desc { font-size: 13px; line-height: 1.5; color: var(--text-silver); }