/*
 * File: moonbook_clock.css
 * Version: 2.2 (Cleaned)
 */

/*
 * File: moonbook_clock.css
 * Version: 1.0
 */

.clock-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: var(--clock-size);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 20px auto;
    isolation: isolate;
}

.clock-face, .moon-dial {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.clock-container::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 85%;
    height: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.3;
    transition: background 1.5s ease-in-out;
    /* background: conic-gradient(...) is applied by JS */
}

.outer-day-ring, .gradient-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* background is applied by JS */
}

.outer-day-ring {
    width: 680px;
    height: 680px;
    z-index: 5;
    mask: radial-gradient(transparent 310px, black 340px);
    -webkit-mask: radial-gradient(transparent 310px, black 340px);
}

.gradient-ring {
    width: 450px;
    height: 450px;
    z-index: 2;
}


#moonHand, #sunHand {
    position: absolute;
    bottom: 50%; left: 50%;
    transform-origin: bottom;
    z-index: 35;
}

#moonHand { width: 2px; height: 44%; background: linear-gradient(to top, transparent, #f9e91c); border-radius: 2px; }
#sunHand  { width: 2px; height: 30%; background: linear-gradient(to top, transparent, #f9d71c); border-radius: 2px; }

#moonHand img, #sunHand img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    position: absolute;
    top: 28px; left: 50%;
    transform: translateX(-50%);
}


.hour {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin-left: -20px; margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14pt;
    color: #fff;
    z-index: 55;
    transform: rotate(calc(var(--h) * 30deg)) translateY(calc(var(--hour-marker-radius) * -1)) rotate(calc(var(--h) * -30deg));
}


.phase {
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -40px;
    width: 80px; height: 80px;
    border-radius: 50%;
    z-index: 10;
    transform: rotate(var(--angle)) translateY(calc(var(--phase-marker-radius) * -1)) rotate(calc(var(--angle) * -1));
}
.phase img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.phase-text {
    position: absolute;
    top: 50%; left: 50%;
    /* white-space: nowrap; */
    z-index: 20;

    font-size: 10pt;
    color: #fffff0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    
    /* margin-left can be used for fine-tuning */
    margin-left: -40px;
    margin-top: -10px;
}

.moonhour-line {
    position: absolute;
    bottom: 50%; left: 50%;
    margin-left: -1px;
    width: 1px;
    height: 45%;
    background-color: rgba(255, 255, 255, 0.7);
    transform-origin: bottom center;
    z-index: 20;
}

.moonhour {
    position: absolute;
    font-size: 12pt;
    color: #ff0000;
    z-index: 55;
}
/*
 * moonbook_clock.css
 * Version: 2.1 (Unified & Corrected)
*/

:root {
    --clock-size: 700px;
    --background-color: #1a1a1a;
    --text-color: #f0f0f0;
    --glow-color: #aaccff;

    --hour-marker-radius: 156px;

    --phase-marker-radius: 303px;

    --central-display-size: 280px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: "Gadugi", sans-serif;
    background-color: #1a1a1a;
    color: #f0f0f0;
}

.clock-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--clock-size);
    height: var(--clock-size);
    isolation: isolate;
}

.clock-face, .moon-dial {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.moon-dial {
    border: 4px double #b99a7b;
}

#currentMoonDisplay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--central-display-size);
    height: var(--central-display-size);
    z-index: 30;
}

#currentMoonImage {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

#currentMoonName, #currentMoonPhase,.digital-clock, .digital-phase {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
#currentMoonName { top: 54%; font-size:  16pt;}
#currentMoonPhase{ top: 60%; font-size: 12pt; }

.digital-clock    { top: 28%; font-size: 20pt; }
.digital-phase    { top: 72%; font-size: 18pt; font-weight: bold; color: #aaaaaa; }

#moonHand, #sunHand {
    position: absolute;
    bottom: 50%; left: 50%;
    transform-origin: bottom;
    z-index: 35;
}

#moonHand { width: 5px; height: 44%; background: linear-gradient(to top, transparent, #f9e91c); }
#sunHand  { width: 5px; height: 34%; background: linear-gradient(to top, transparent, #f9d71c); }

.hour {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin-left: -20px; margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14pt;
    color: #fff;
    z-index: 25;
    transform: rotate(calc(var(--h) * 30deg)) translateY(calc(var(--hour-marker-radius) * -1)) rotate(calc(var(--h) * -30deg));
}

.hour-line {
    position: absolute;
    top: 50%; left: 50%;
    height: 1px;
    width: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transform-origin: 0 50%;
    z-index: 1;
}

.phase {
    position: absolute;
    top: 365px;
    left: 364px;
    width: 62px;
    height: 62px;
    /*
    margin: -0px 0 0 -0px;
    */
    border-radius: 50%;
    z-index: 10;
    transform: rotate(var(--angle)) translateY(calc(var(--phase-marker-radius) * -1)) rotate(calc(var(--angle) * -1));
}
.phase img { width: 82%; height: 82%; object-fit: cover; border-radius: 50%; }

.moonhour-line {
    position: absolute;
    bottom: 50%; left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 45%;
    background-color: rgba(255, 255, 255, 0.7);
    transform-origin: bottom center;
    z-index: 20;
}

.moonhour {
    position: absolute;
    font-size: 12pt;
    color: #ff0000;
    z-index: 55;

}

.conic-gradient-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    height: 640px;
    border-radius: 50%;
    z-index: 4;
    opacity: 0.9;
    mask: radial-gradient(transparent 290px, black 310px);
    -webkit-mask: radial-gradient(transparent 275px, black 210px);

}

#currentMoonName,
.digital-clock,
.digital-phase {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;


    text-align: center;

    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.three-sixty-one {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 2px;
    height: 50%;
    margin-left: -1px;

    transform-origin: bottom center;

    z-index: 6;
}


*/

.conic-gradient-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    height: 640px;
    border-radius: 50%;
    z-index: 0;

    /*
    background-image: conic-gradient(#ddb760 0deg 6.1deg, #e0afa0 6.1deg 82.9deg, #e08d69 82.9deg 96.1deg, #bfcbc8 96.1deg 172.9deg, #8da9a0 172.9deg 186.1deg, #ab9fbf 186.1deg 262.9deg, #aa33aa 262.9deg 276.9deg, #e8cb7d 276.9deg 352.9deg, #ddb760 352.9deg 360deg);
    background-image: conic-gradient(#ddb760 6deg, #e0afa0 83deg, #e08d69 96deg, #bfcbc8 173deg, #8da9a0 186deg, #ab9fbf 263deg, #aa33aa 277deg, #e8cb7d 353deg, #ddb760 360deg);
    background-image:
    conic-gradient(
        #ddb760 0deg 6deg,
        #ddb760 6deg 83deg,
        #e0afa0 83deg, 96deg,
        #e08d69 96deg,173deg,
        #bfcbc8 173deg, 186deg,
        #8da9a0 186deg, 263deg,
        #ab9fbf 263deg, 277deg,
        #aa33aa 277deg, 353deg,
        #e8cb7d 353deg, 360deg
        */
    background-image: conic-gradient(#ddb760 0deg 6.1deg, #e0afa0 6.1deg 82.9deg, #e08d69 82.9deg 96.1deg, #bfcbc8 96.1deg 172.9deg, #8da9a0 172.9deg 186.1deg, #ab9fbf 186.1deg 262.9deg, #aa33aa 262.9deg 276.9deg, #e8cb7d 276.9deg 352.9deg, #ddb760 352.9deg 360deg);
    background-image: conic-gradient(#ddb760 0deg 6deg, #e0afa0 6deg 83deg, #e08d69 83deg 96deg, #bfcbc8 96deg 173deg, #8da9a0 173deg 186deg, #ab9fbf 186deg 263deg, #aa33aa 263deg 277deg, #e8cb7d 277deg 353deg, #ddb760 354deg 360deg);

    opacity: 0.9;

    mask: radial-gradient(transparent 290px, black 310px);
    /* --- FIX: Made -webkit-mask match the standard 'mask' property --- */
    -webkit-mask: radial-gradient(transparent 290px, black 310px);

}


.three-sixty-one {
    position: absolute;
    top: 25%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
   /* This is the key for rotating text labels from the center */
    transform-origin: 0 50%;

    font-size: 10pt;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
    z-index: 0;
}

.outer-day-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 560px;
    height: 560px;

    border-radius: 50%;
    z-index: 5;
    mask: radial-gradient(transparent 110px, black 340px);
    -webkit-mask: radial-gradient(transparent 110px, black 340px);

    /* --- THE FIX --- */
    /* This is the same day/night gradient used for the main clock background */
    background: conic-gradient(
        from 180deg,
        #0d1a2f 0%, #0d1a2f var(--p-night-end, 22%),
        #2c3e50 var(--p-astro-end, 25%),
        #e67e22 calc(var(--p-day-start, 29%) - .5%),
        #FFD700 calc(var(--p-day-start, 29%) - .2%),
        #FFD700 var(--p-day-start, 29%),
        #1E90FF var(--p-day-start, 29%),
        #1E90FF calc(var(--p-day-end, 77%) - .2%),
        #FFD700 calc(var(--p-day-end, 77%) - .2%),
        #FFD700 var(--p-day-end, 77%),
        #e67e22 var(--p-sunset-end, 80%),
        #2c3e50 var(--p-civil-end, 82%),
        #0d1a2f var(--p-night-start, 85%),
        #0d1a2f 100%
    );
    opacity: 0.5; /* Adjust opacity as needed */


}

.hour-line-text {
    position: absolute;
    top: 50%;
    left: 50%;

    /* Defines a box for the number and centers it on its pivot point */
    width: 30px;
    height: 20px;
    margin-left: -15px;
    margin-top: -10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8pt;
    color: #ffffff;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
    z-index: 44;

    /* Rotates the box, pushes it out, then un-rotates the text to keep it upright */
    transform: rotate(var(--hour-angle))
             translateY(var(--hour-line-text-radius))
             rotate(calc(var(--hour-angle) * -1));
}

.hour-line {
    position: absolute;
    top: 50%; left: 50%;
    height: 1px;
    width: 40%;
    background-color: rgba(255, 255, 255, 0.8);
    transform-origin: 0 50%;
    z-index: 1;
}


.clockhour-line {
    position: absolute;
    top: 50%; left: 50%;
    height: 3px;
    width: 22%;
    background-color: rgba(235, 235, 85, 0.8);
    transform-origin: 0 50%;
    z-index: 1;
}

.clockhour-line-text {
    position: absolute;
    top: 50%;
    left: 50%;

    /* Defines a box for the number and centers it on its pivot point */
    width: 30px;
    height: 20px;
    margin-left: -15px;
    margin-top: -10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8pt;
    color: #ffffff;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
    z-index: 44;

    /* Rotates the box, pushes it out, then un-rotates the text to keep it upright */
    transform: rotate(var(--hour-angle))
             translateY(var(--clockhour-line-text-radius))
             rotate(calc(var(--hour-angle) * -1));
}


#currentMoonImage {

    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    z-index: 1;
}
#currentMoonDisplay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--central-display-size);
    height: var(--central-display-size);
    text-align: center;
    z-index: 5;
}


#currentMoonName {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.digital-clock, .digital-phase {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #fff;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
    z-index: 5;
}


#currentMoonName { top: 47%; font-size: 18pt; font-weight: 600; }

.digital-clock    { top: 28%; font-size: 20pt; }
.digital-phase    { top: 72%; font-size: 14pt; }


#currentMoonName {
    visibility: hidden;
}

#calendar-container .table td {
    min-width: 90px;
    height: 120px; /* Using height instead of min-height often works better for table cells */
    vertical-align: top; /* Aligns the date number to the top */
    padding-top: 0.5rem; /* Adds some space above the date number */
}

.moons13-line {
    position: absolute;
    top: 50%; left: 50%;
    height: 3px;
    width: 22%;
    background-color: rgba(235, 235, 85, 0.8);
    transform-origin: 0 50%;
    z-index: 1;
}

.moons13-line-text {
    position: absolute;
    top: 50.2%;
    left: 53%;

    /* Defines a box for the number and centers it on its pivot point */
    width: 30px;
    height: 20px;
    margin-left: -25px;
    margin-top: -10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8pt;
    color: #ffffaf;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
    z-index: 44;

    /* Rotates the box, pushes it out, then un-rotates the text to keep it upright */
    transform: rotate(var(--hour-angle))
             translateY(var(--moons13-line-text-radius))
             rotate(calc(var(--hour-angle) * -1));

    /* --- FIX: Changed invalid 'wrap' to 'normal' --- */
    white-space: normal;


            }

.moons13-phase-icon {

    position: absolute;

    top: 48.6%;
    left: 48.6%;

    align-items: center;
    justify-content: center;

    /* Defines a box for the number and centers it on its pivot point */
    width: 20px;
    height: 20px;
    transform-origin: 0 50%;


    z-index: 14;

    /* Rotates the box, pushes it out, then un-rotates the text to keep it upright */
    transform: rotate(var(--hour-angle))
             translateY(var(--moons13-phase-icon-radius))
             rotate(calc(var(--hour-angle) * -1));
    border-radius: 50%;


}

.roundicon_micro{

    width: 32px;
    height: 32px;
    transform-origin: 0 50%;
    z-index: 54;
    border-radius: 50%;
    align-items: center;
    justify-content: center;


}
.roundicon_36{

    width: 32px;
    height: 32px;
    transform-origin: 0 50%;
    z-index: 54;
    border-radius: 50%;
    align-items: center;
    justify-content: center;


}

.moonphase-icon {
    position: absolute;
    top: 0px;
    left: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform-origin: 50% 50%;

}

#newmoon_line        { width: 2px; height:128%; background: linear-gradient(to top, transparent, #f9e91c); }
#fullmoon_line       { width: 2px; height:128%; background: linear-gradient(to top, transparent, #f9e91c); }
#firstquarter_line   { width: 2px; height:128%; background: linear-gradient(to top, transparent, #f9e91c); }
#lastquarter_line    { width: 2px; height:128%; background: linear-gradient(to top, transparent, #f9e91c); }

.newmoon_line        {
    font-size: 10pt;
  }
.fullmoon_line       {
    font-size: 10pt;
    }

.firstquarter_line{
        font-size: 10pt;
    }

.lastquarter_line    {
        font-size: 10pt;
    }


/*
 * File: moonbook_clock.css
 * ... (other styles)
 */

/* --- FIX: Added positioning to center the cardinal phase lines --- */
#newmoon_line,
#fullmoon_line,
#firstquarter_line,
#lastquarter_line {
    /* Positioning properties to anchor the line to the center */
    position: absolute;
    bottom: 49.5%;
    left: 50%;
    margin-left: -1px; /* Half of the 'width' to center it */
    transform-origin: bottom center; /* Rotates from the base at the center */
    z-index: 1; /* Ensures it's visible above other lines */

    color: #efffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);

    /* Your existing styles */
    width: 0px;
    height: 432px;
    /* background: linear-gradient(to top, transparent, #555555); */
}

.newmoon_line {
    font-size: 10pt;
}
.fullmoon_line {
    font-size: 10pt;
}
.firstquarter_line {
    font-size: 10pt;
}
.lastquarter_line {
    font-size: 10pt;
}

.four-main-phases {
    position: absolute;
    transform-origin: 50%,50%;

    /*
    bottom: 50%; left: 50%;
    width: 2px;
    height: 300px;
    margin-left: -1px;
    transform-origin: bottom center;
    z-index: 6;
    */
    /* background-color and transform set by JS */
}

.three-sixty-one {

    position: relative;
    z-index: -1;
    transform-origin: top center;
    height: 1px;
    width: 20px;

    /*

    bottom: 50%; left: 50%;
    margin-left: -1px;
    transform-origin: bottom center;
    width: 2px;
    height: 2px;

    background-color and transform set by JS */

}

.three-sixty-line {
    position: absolute;
    top: 50%; left: 50%;
    height: 1px;
    width: 330px;
    width: 330px;
    background-color: rgba(235, 235, 85, 0.8);
    transform-origin: 0 50%;
    z-index: 3;
}

/*
.phase-text {
    position: absolute;
    top: 50%; left: 50%;
    white-space: nowrap;
    z-index: 26;
    color: #ffffe0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-size: 10pt;
}
*/
/* Add this to moonbook_clock.css */
.phase-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px; /* Width prevents text wrapping awkwardly */
    text-align: center;
    pointer-events: none; /* Lets clicks pass through to the map/images */
    font-weight: bold;
    color: #333; /* Adjust based on your background */

    color: #0fffe0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-size: 10pt;
    z-index: 54;
}




.phase_newmoon {
    top: 50%;
    left: 50%;

    font-weight: bold;
    font-size: 187pt;
    text-align: center;
    color: white;
    line-height: 1.2;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);

    z-index: 50; /* Ensure it sits on top of the map/lines */
    
}


/* 1. The Container that holds Name + Date */
.phase-label-container {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Flexbox creates the column stack and centers the Date under the Name */
    display: flex;
    flex-direction: column;
    align-items: center;      /* Centers items horizontally */
    justify-content: center;  /* Centers items vertically */
    
    /* Crucial: 'max-content' makes the box exactly as wide as the text. 
       This allows translate(-50%) to find the true center. */
    width: max-content;
    white-space: nowrap;
    
    pointer-events: none; /* Allows clicks to pass through to the map */
    z-index: 60; /* Higher than lines and images */
}

/* 2. The Phase Name Styling */
.phase-label-name {
    font-family: "Gadugi", sans-serif;
    font-size: 14pt;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

/* 3. The Phase Date Styling */
.phase-label-date {
    font-family: "Gadugi", sans-serif;
    font-size: 11pt;
    color: #cccccc; /* Slightly gray */
    text-align: center;
    line-height: 1;
    margin-top: 2px; /* Small gap between name and date */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

#newmoon_line,#fullmoon_line,#firstquarter_line,#lastquarter_line
{
    z-index: 50; /* Higher than lines and images */
}

#newmoon_line_text
{
    white-space: nowrap;
	 font-size: 9pt;
    font: bold;
    color: #fffffe; /* Slightly gray */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

#fullmoon_line_text
{
    white-space: nowrap;
	 font-size: 9pt;
    font: bold;
    color: #fffffe; /* Slightly gray */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

#firstquarter_line_text
{
    white-space: nowrap;
	 font-size: 9pt;
    font: bold;
    color: #fffffe; /* Slightly gray */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

#lastquarter_line_text
{
    white-space: nowrap;
	 font-size: 9pt;
    font: bold;
    color: #fffffe; /* Slightly gray */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}




.month-line {
    position: absolute;
    top: 50%; left: 50%;
    height: 3px;
    width: 62%;
    background-color: rgba(235, 235, 85, 0.8);
    transform-origin: 0 50%;
    z-index: 1;
}

.month-line-text {
    position: absolute;
    top: 50%;
    left: 50%;

    /* Defines a box for the number and centers it on its pivot point */
    width: 30px;
    height: 20px;
    margin-left: -15px;
    margin-top: -10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8pt;
    color: #ffffff;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
    z-index: 44;

    /* Rotates the box, pushes it out, then un-rotates the text to keep it upright */
    transform: rotate(var(--hour-angle))
             translateY(var(--month-line-text-radius))
             rotate(calc(var(--hour-angle) * -1));
}


#btn-intro {
    background-color: #6A5ACD; /* Example: SlateBlue */
    border-color: #6A5ACD;     /* Match the border to the background */
    color: white;              /* Text color */
}

/* Optional: Change color on mouse hover */
#btn-intro:hover {
    background-color: #483D8B; /* Darker shade */
    border-color: #483D8B;
}

#moonHand img, 
#sunHand img {
    position: absolute;
    
    /* 1. Rigid Size Constraint */
    width: 22px;  /* Was 20px or unbounded */
    height: 22px; 
    
    /* 2. Positioning on the hand stick */
    top: 28px; /* Distance from the center pivot */
    left: 50%;
    
    /* 3. Center align the icon on the stick */
    transform: translateX(-50%);
    
    /* 4. Display Logic */
    object-fit: contain;
    z-index: 40; /* Above the stick */
    pointer-events: none;
}

/* Dynamic Phase Label (JS Transform) */
.phase-label {
    position: absolute;
    top: 50%; left: 50%;
    font-family: 'Gadugi', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #fffffe;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    padding: 2px 4px;
    border-radius: 3px;
    will-change: transform; 
    z-index: 60;
}