/* === Theme Pop === */
:root {
    /* Palette Pop */
    --violet-block: #6b3cf5;
    --rose-pop: #FF4FA3;
    --rose-light: #f8d4d6;
    --yellow-pop: #FFD438;
    --blue-daily: #3A4BFF;
    --aqua-water: #8DE9E3;
    --black-pop: #1A1A1A;
    --white-soft: #FFF7EE;
    --peach-pop: #fdf2e0;

    /* Semantic Overrides */
    --primary-color: var(--yellow-pop);
    --secondary-color: var(--rose-pop);
    --bg-color: var(--violet-block);
    --text-color: var(--white-soft);
    --text-color-dark: var(--black-pop);
    --bg-color-light: var(--white-soft);
    --border-color: var(--black-pop);
}

/* === Specific Overrides === */

html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Main Background */
main {
    background-color: var(--rose-light) !important;
}

/* Logo Background */
.logo {
    background-color: var(--yellow-pop) !important;
    height: 100%;
    /* Ensure it fills height */
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* HEADER */
header {
    background-color: var(--violet-block) !important;
    border-bottom: 6px solid var(--black-pop) !important;
    /* Removed box-sizing: border-box to let border sit outside content (if content-box is default or permitted)
       actually typically we want border-box. But user says it causes the overlap.
       If border-box, the border is IN the height. If content is 100% height, it covers border?
       Let's try removing it. If global reset makes it border-box, we might need content-box.
    */
    box-sizing: content-box !important;
    position: relative;
    z-index: 10;
}

/* Header Text - Black on Yellow Pop */
header h1 {
    font-family: var(--font-main);
    font-weight: 900;
    /* Standard sizes via Media Queries */
    font-size: 1.8rem !important;
    line-height: normal;
    background-color: transparent !important;
    color: var(--black-pop) !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0;
}

@media (min-width: 576px) {
    header h1 {
        font-size: 2.2rem !important;
    }
}

@media (min-width: 768px) {
    header h1 {
        font-size: 3rem !important;
    }
}

@media (min-width: 1200px) {
    header h1 {
        font-size: 3.5rem !important;
    }
}

header h1 a {
    color: var(--black-pop) !important;
    text-decoration: none;
}

/* Ko-fi Button - Blend with Header (Violet) */
.btn-container {
    background-color: transparent !important;
    color: var(--white-soft) !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    /* Remove outline */
}

/* Target potential inner span/button from widget */
.btn-container span.kofitext {
    color: var(--white-soft) !important;
}

/* Ensure no border on images inside if any */
.btn-container img {
    border: none !important;
    box-shadow: none !important;
}

.btn-container:hover {
    background-color: var(--violet-block) !important;
    opacity: 1;
    /* Keep opacity full */
}

/* Ko-fi link tweaks - Agressive shadow removal */
a.kofitext,
.btn-container,
.btn-container iframe,
.btn-container img,
a.kofi-button {
    box-shadow: none !important;
    filter: drop-shadow(0 0 0 transparent) !important;
    /* Remove any drop shadow filters */
    -webkit-filter: drop-shadow(0 0 0 transparent) !important;
    border: none !important;
}

/* Add underline on hover for ko-fi button text */
.btn-container:hover span.kofitext {
    text-decoration: underline !important;
}

.kofitext {
    color: var(--white-soft) !important;
}


/* MAP BORDER */
#map-wrapper {
    border-top: 3px solid var(--black-pop);
    border-bottom: 3px solid var(--black-pop);
    border-left: none;
    border-right: none;
    box-sizing: border-box;
}


/* Utility Class for Pop Shadow (Requested harmonization) */
.pop-shadow {
    box-shadow: 6px 6px 0px var(--black-pop) !important;
}

/* Controls Row Spacing */
#controls {
    margin-top: 15px;
}

/* Buttons */
.btn-primary,
.btn-daily,
.btn-success {
    background-color: var(--yellow-pop) !important;
    color: var(--black-pop) !important;
    border: 3px solid var(--black-pop) !important;
    font-weight: 900;
    font-family: var(--font-main);
    text-transform: uppercase;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Practice Button specific styling overrides */
#playBtn {
    background: transparent !important;
    border: none !important;
    color: var(--blue-daily) !important;
    font-style: italic;
    font-weight: normal;
    /* Regular */
    box-shadow: none !important;
    text-decoration: underline;
    /* Suggest interactiveness? Optional. User just said regular white italic. I'll stick to basic. */
    text-decoration: none;
}

#playBtn:hover {
    text-decoration: underline;
}

.btn-primary:active,
.btn-daily:active {
    box-shadow: none !important;
    transform: translate(2px, 2px);
}

/* .btn-success removed - now shares primary style */

/* Timer */
#timer {
    border-radius: 0 !important;
    border: 3px solid var(--black-pop);
    background-color: var(--yellow-pop);
    color: var(--black-pop);
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 2rem;
    padding: 5px 15px;
    box-shadow: 6px 6px 0px var(--black-pop) !important;
}

/* Round Tracker Bullets */
#round-tracker {
    margin-top: 10px;
    /* Adjust vertical center */
    white-space: nowrap;
    /* Prevent wrapping (5 -> 3 bug) */
    overflow: visible;
    /* Allow bullets to show */
}

/* Regarding robustness: 
   The parent .col-4 has 'align-items: center'. 
   If it looks too high, it might be due to line-height or font metrics. 
   Margin-top is a safe visual fix here. */

.round-bullet {
    display: inline-block;
    width: 20px;
    /* Increased size */
    height: 20px;
    /* Increased size */
    border-radius: 50%;
    margin: 0 6px;
    /* Slightly more space */
    border: 2px solid var(--black-pop);
}

.round-bullet.past {
    background-color: var(--aqua-water);
}

.round-bullet.current {
    background-color: var(--rose-pop);
    transform: scale(1.3);
}

.round-bullet.future {
    background-color: var(--white-soft);
    opacity: 0.5;
}

/* Rules Pop-in */
.rules-popin {
    width: 90%;
    max-width: 500px;
    /* Harmonious size */
    background-color: var(--peach-pop) !important;
    color: var(--black-pop) !important;
    color: var(--black-pop) !important;
    border: 3px solid var(--black-pop);
    box-shadow: 6px 6px 0px var(--black-pop) !important;
    padding: 2rem;
    border-radius: 0px;
    /* Sharp edges for pop theme */
}

.rules-popin .rules-content {
    background-color: transparent !important;
    border: none;
}

.rules-popin h2 {
    text-transform: uppercase;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 1.5rem;
    /* Match Daily Button approx */
    margin-bottom: 1.5rem;
}

.rules-popin .highlight {
    background-color: var(--rose-pop);
    color: var(--black-pop);
    padding: 0 5px;
}

/* Audio Indicators (SVG) */
#audio-indicator-left svg,
#audio-indicator-right svg,
#loader svg {
    fill: var(--rose-pop) !important;
}

/* Cards (Song Info, Score Info) */
.card {
    background-color: var(--white-soft) !important;
    color: var(--black-pop) !important;
    border: 3px solid var(--black-pop);
    border-radius: 0px !important;
    box-shadow: none;
    /* Default no shadow */
}

/* Disable hover effects on cards for this theme */
.card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Apply shadow specifically to Song Info if needed via class later, 
   but user said "make a class". I will add the class to the HTML element. */

/* === RESULT SCREEN STRUCTURE === */

#result-screen {
    background-color: var(--rose-light) !important;
    color: var(--black-pop) !important;
    border: none !important;
    padding: 0 !important;
    /* Batch 31: Full Width */
    margin: 0 auto;
}

/* Batch 33: FOUC Fix */
#score-info,
#song-info,
#game-interface-row {
    display: none;
}

/* 1. HEADER (Title) */
#result-screen h3 {
    background-color: transparent !important;
    color: var(--blue-daily) !important;
    font-weight: 900;
    text-transform: uppercase;
    padding: 1.5rem 1rem;
    margin: 0;
    border: none !important;
    font-size: 2rem;
    box-shadow: none !important;
}

/* 2. TIME ROW */
#result-screen .result-summary.time {
    background-color: var(--aqua-water) !important;
    margin: 0;
    /* Remove margin to stack */
    padding: 1rem;
    border-top: 3px solid var(--black-pop) !important;
    border-bottom: 3px solid var(--black-pop) !important;
    border-left: none !important;
    border-right: none !important;
    width: 100%;
    align-items: center;
    box-shadow: none !important;
    --bs-gutter-x: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* 3. DISTANCE ROW */
#result-screen .result-summary.distance {
    background-color: var(--peach-pop) !important;
    margin: 0;
    /* Remove margin */
    padding: 1rem;
    border-top: none !important;
    border-bottom: 3px solid var(--black-pop) !important;
    border-left: none !important;
    border-right: none !important;
    width: 100%;
    align-items: center;
    box-shadow: none !important;
    --bs-gutter-x: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#result-screen .result-summary.distance #total-distance {
    color: #EB4D3D;
    font-weight: 900;
    font-size: 1.5rem;
}

/* 4. PTS ROW */
#result-screen .result-summary.points {
    background-color: var(--yellow-pop) !important;
    color: var(--blue-daily) !important;
    margin: 0;
    /* Remove margin */
    padding: 1rem;
    border-top: none !important;
    border-bottom: 3px solid var(--black-pop) !important;
    border-left: none !important;
    border-right: none !important;
    width: 100%;
    align-items: center;
    box-shadow: none !important;
    --bs-gutter-x: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#result-screen .result-summary.points #total-points {
    color: var(--blue-daily) !important;
    font-weight: 900;
    font-size: 3rem;
}

/* 5. LEADERBOARD */
#leaderboard-section {
    background-color: var(--white-soft);
    margin: 0 0 1rem 0;
    padding: 1.5rem;
    border: 3px solid var(--black-pop);
    box-shadow: none !important;
    /* Removed shadow */
}

/* Icons fix */
#result-screen svg {
    stroke: var(--black-pop);
    stroke-width: 3;
}

#result-screen .points svg {
    stroke: var(--rose-pop);
    /* Use Rose to match text */
}

/* End Buttons */
#endbuttons {
    background-color: transparent !important;
    /* Let background show through or transparent */
    padding: 1rem;
    margin: 0;
    border: none;
    display: flex;
    justify-content: center;
}

#play-again {
    background-color: var(--rose-pop) !important;
    color: var(--white-soft) !important;
    border: 3px solid var(--black-pop) !important;
    box-shadow: none !important;
    /* Removed shadow */
    font-weight: 900;
    padding: 10px 30px;
    font-size: 1.5rem;
    opacity: 1 !important;
}


/* Highlights & Text Primary */
.highlight,
.text-primary,
.points-display {
    color: var(--blue-daily) !important;
    background-color: var(--yellow-pop) !important;
    padding: 2px 5px;
    border-radius: 4px;
}

/* Footer Global */
footer {
    background-color: var(--violet-block) !important;
    /* Update footer background */
    color: var(--white-soft) !important;
    border-top: 3px solid var(--black-pop) !important;
}

footer a {
    color: var(--white-soft) !important;
    font-weight: bold;
}

/* Progress Bar Colors */
.progress {
    background-color: var(--aqua-water) !important;
}

.progress-bar {
    background-color: var(--blue-daily) !important;
}

/* Mobile Footer adjustments */
@media (max-width: 768px) {

    footer p,
    footer a {
        font-size: 0.65rem !important;
        /* Even smaller text */
        line-height: 1.1;
    }

    footer .text-right {
        text-align: right !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
        /* Restrict width slightly to force truncation if needed */
    }

    /* Batch 11: Spacing for Score/Song Info on Mobile to prevent overlap with Actions */
    .score,
    #song-info {
        margin-top: 80px !important;
        margin-bottom: -60px !important;
    }

    /* Batch 42: Compact Mobile Song List */
    .song-summary .song-card {
        margin-bottom: 0px !important;
        /* Remove space */
        margin-top: -3px;
        /* Overlap borders */
        width: 100%;
        /* Ensure full width stack */
    }

    /* Ensure first card doesn't have negative top margin if needed, 
       but standard stacking usually tolerates it or we target first-child. 
       Let's stick to simple negative margin for border collapse. */
}

/* Share Buttons High Contrast */
#share-buttons a {
    background-color: var(--yellow-pop) !important;
    color: var(--blue-daily) !important;
    border: 3px solid var(--black-pop) !important;
    padding: 10px 15px;
    font-weight: 900;
    font-family: var(--font-main);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
}

#share-buttons a:hover {
    background-color: var(--blue-daily) !important;
    color: var(--yellow-pop) !important;
    border: 3px solid var(--black-pop) !important;
}

/* Song Summary Cards Styling */
.song-summary .song-card {
    background-color: var(--white-soft) !important;
    /* Context: white text */
    color: var(--black-pop) !important;
    border: 3px solid var(--black-pop) !important;
    box-shadow: none !important;
    margin-bottom: 10px;
    padding: 10px;
    /* song-card usually needs padding if it was a card */
}

.song-summary .song-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--white-soft) !important;
}

.song-summary .song-card p,
.song-summary .song-card h5 {
    color: var(--black-pop) !important;
    /* Force text white */
}

/* Leaderboard */
#leaderboard-section {
    background-color: var(--peach-pop);
    margin: 0;
    padding: 1.5rem;
    border: 3px solid var(--black-pop);
    box-shadow: 6px 6px 0px var(--black-pop) !important;
}

/* Batch 18: Cookie Consent Banner - Flexible Flow Position */
#consent-banner {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100%;

    z-index: 999;
}

#pin-instruction {
    color: var(--blue-daily) !important;
}

/* About Page Specifics */
.about-title {
    font-family: var(--font-main);
    font-weight: 900;
    color: var(--rose-pop);
    font-size: 2rem !important;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.about-subtitle {
    font-family: var(--font-main);
    font-weight: 900;
    color: var(--violet-block) !important;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}


/* Batch 38 Refinements */

/* 1. Ko-fi Button Spacing */
.btn-container {
    margin-right: 20px !important;
}

/* 2. active round bullet size */
.round-bullet.current {
    transform: scale(1.1) !important;
}

/* 3. SVG Alignment */
#loader,
#audio-indicator-left,
#audio-indicator-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 4. Footer Spacing */
footer a.me-3 {
    margin-right: 0.5rem !important;
    /* was 1rem (3) */
}

footer a.ms-3 {
    margin-left: 0.5rem !important;
    /* was 1rem (3) */
}

/* 5. Map Background (Avoid Grey Strip) */
#map-wrapper {
    background-color: var(--rose-light) !important;
    /* Match main bg */
}