/*
 * File: moonbook_clock.css
 * Version: 2.7 (Optimized & Consolidated)
 */

:root {
    --clock-size: 700px;
    --central-display-size: 380px;
    
    /* Markers & Radii */
    --hour-marker-radius: 156px;
    --hour-line-text-radius: -180px;
    
    /* Sun/Moon line icons */
    --phase-marker-radius: 220px; 
    --phase-label-radius: 225px;
        
    --clockhour-marker-radius: 156px;
    --clockhour-line-text-radius: -174px;
    
    /* 8 Large Moons */
    --moons13-marker-radius: 200px;
    --moons13-line-text-radius: -370px;
    --moons13-phase-icon-radius: -360px;
    
    --label-diameter: 220px;
}

/* --- Container & Layout --- */

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

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

#clock-face {
    z-index: 5;
}

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

/* --- Background Rings --- */

.conic-gradient-ring {
    position: absolute;
    top: 50%; left: 50%;
    /* Flip horizontally (-1) then rotate back to align 0deg at the top */
    transform: translate(-50%, -50%) scaleX(-1) rotate(0deg);
    width: 640px; 
    height: 640px;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.618;    
    background-color: transparent; 

    mask: radial-gradient(circle, transparent 280px, black 281px, black 319px, transparent 320px);
    -webkit-mask: radial-gradient(circle, transparent 280px, black 281px, black 319px, transparent 320px);
    transition: background-image 0.5s ease-in-out;
}

.conic-gradient-ringz {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 620px; 
    height: 620px;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    background-color: transparent !important;

    mask: radial-gradient(circle, transparent 280px, black 281px, black 319px, transparent 320px);
    -webkit-mask: radial-gradient(circle, transparent 280px, black 281px, black 319px, transparent 320px);
    transition: background-image 0.5s ease-in-out;
}

.outer-day-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    height: 560px;
    border-radius: 50%;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    
    mask: radial-gradient(transparent 10px, black 340px);
    -webkit-mask: radial-gradient(transparent 90px, black 340px);
    
    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%
    );
}

/* --- Hands --- */

#moonHand, #sunHand {
    position: absolute;
    bottom: 50%; left: 50%;
    transform-origin: bottom;
    z-index: 20;
    pointer-events: none;
}

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

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

/* --- Moon Phase Images & Text --- */

.phase {
    position: absolute;
    top: 50%; left: 50%;
    width: 50px; height: 50px;
    /*
    margin: -31px 0 0 -31px; 
    */
    border-radius: 50%;
    z-index: 10;

    margin: -24px 0 0 -24px; 

    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%;
    width: 120px; height: 20px;
    margin-top: -10px;
    margin-left: -60px;
    text-align: center;
    font-weight: bold;
    color: #ffffe0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-size: 10pt;
    pointer-events: none;
    z-index: 25;
    transform: rotate(var(--angle)) translateX(var(--phase-label-radius)) rotate(calc(var(--angle) * -1));
    transition: transform 0.5s ease-out;
}



/* --- Interactive Grid Lines --- */

#newmoon_line, #fullmoon_line, #firstquarter_line, #lastquarter_line {
    position: absolute;
    bottom: 50%; left: 50%;
    width: 2px;
    height: 45.8%;
    margin-left: -1px;
    
    /*background: linear-gradient(to top, transparent, #f9e91c);*/
    background: linear-gradient(to top,  #7c7e777f, transparent);
    
    transform-origin: bottom center;
    z-index: 15;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#newmoon_line_extra, #fullmoon_line_extra, #firstquarter_line_extra, #lastquarter_line_extra {


/*    background: linear-gradient(to top, transparent, transparent); */

/*
    position: absolute;
    bottom: 50%; left: 50%;
    width: 2px;
    height: 50%;
    margin-left: -1px;
    
    background: linear-gradient(to top,  #fcfef77f, #fffef77f);
    
    transform-origin: bottom center;
    z-index: 3;
    pointer-events: none;
    display: flex;sun
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
*/


}

#firstquarter_line_extra { height: 55%; }

/* Explicit Rotations for Primary Axes Dials */
#fullmoon_line, #fullmoon_line_extra         { transform: rotate(0deg); }
#firstquarter_line, #firstquarter_line_extra { transform: rotate(90deg); }
#newmoon_line, #newmoon_line_extra           { transform: rotate(180deg); }
#lastquarter_line, #lastquarter_line_extra   { transform: rotate(270deg); }

#newmoon_line_extra { height: 53%; }
#fullmoon_line_extra { height: 53%; }


#newmoon_line_extra, #fullmoon_line_extra, #firstquarter_line_extra, #lastquarter_line_extra {


    position: absolute;
    bottom: 50%; left: 50%;
    transform-origin: bottom center;
    z-index: 3;
    pointer-events: none;

    height: 58%;

}


/* Re-enable button mouse tracking on primary dial targets */
#newmoon_line button, #fullmoon_line button, 
#firstquarter_line button, #lastquarter_line button {
    pointer-events: auto;
    cursor: pointer;
    margin-top: 5px;
}

.moon-label, .line-label {
    margin-top: -25px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    transform: rotate(var(--current-angle)); 
}

.moonphase-icon {
    position: absolute;
    top: 0px; left: -19px;
    width: 40px; height: 40px;
    opacity: 1.0;    
    background-color: transparent; 
    border-radius: 50%;
}

.moonphase_transparent-icon {
    position: absolute;
    top: 0px; left: -39px;

    width: 80px; height: 80px;

    opacity: 0.318;    
    background-color: transparent; 

    border-radius: 50%;
}



/* --- Midnight Date Marker --- */

.midnight-line1 {
    position: absolute;
    bottom: 50%; left: 50%;
    width: 2px;
    height: 48%; 
    margin-left: -1px;
    background: linear-gradient(to top, transparent, #f9e9fc);
    transform-origin: bottom center;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;sun
    justify-content: flex-start;
    align-items: center;
}

.midnight-line-row1 {
    font-size: 9pt;
    color: #f9e9fc;
    white-space: nowrap;
    transform: rotate(180deg); 
    margin-top: 5px;
}

.midnight-line {
    position: absolute;
    bottom: 50%; left: 50%;
    width: 1px;
    height: 42%; sun
    transform-origin: bottom center;
    z-index: 52;
}

.midnight-line-row {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 20px;
    margin-left: -20px; margin-top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8pt;
    color: #fffff0;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    z-index: 2;
    pointer-events: none;
    transform: rotate(var(--hour-angle)) translateY(var(--clockhour-line-text-radius)) rotate(calc(var(--hour-angle) * -1));
}

/* --- Clock Face Hourly Elements --- */

.three-sixty-line {
    position: absolute;
    top: 10%; left: 50%;
    width: 1px;
    height: 41%;
    background: rgba(255, 255, 255, 0.2);
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 0;
}

.three-sixty-one {
    position: absolute;
    top: -20px; left: 50%;
    transform: translateX(-50%) rotate(calc(var(--current-angle) * -1));
    white-space: nowrap;
    font-size: 10pt;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    z-index: 10;
}

.clockhour-line1 {
    position: absolute;
    top: 50%; left: 27%;
    height: 1px; width: 46%;
    background-color: rgba(235, 235, 235, 0.5);
    transform-origin: 50% 50%;
    z-index: 3;
}

.clockhour-line-text1 {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 20px;
    margin-left: -20px; margin-top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8pt;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    z-index: 34;
    pointer-events: none;
    transform: rotate(var(--hour-angle)) translateY(var(--clockhour-line-text-radius)) rotate(calc(var(--hour-angle) * -1));
}

.clockhour-line {
    position: absolute;
    top: 50%; left: 27%;
    height: 1px; width: 46%;
    background-color: rgba(235, 235, 235, 0.5);
    transform-origin: 50% 50%;
    z-index: 2; 
}

.clockhour-line-text {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 20px;
    margin-left: -20px; margin-top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12pt;
    color: #ffffff;
    /*font-weight: bold;*/
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    z-index: 6; 
    pointer-events: none;
    transform: rotate(var(--hour-angle)) translateY(var(--clockhour-line-text-radius)) rotate(calc(var(--hour-angle) * -1));
}

/* --- Center Display --- */

#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: 4;
    pointer-events: none;
}

#currentMoonImagex {
 
    width: 70%; height: 70%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    z-index: 12;
}

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

    /*background-color: #e67e22;  */
    opacity: 0.40;
    z-index: 1;


}

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

#digital-timedate {
    position: absolute;
    top: 33%; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #fff;
    font-size: 14pt;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.digital-phase {
    position: absolute;
    top: 74%; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #eeeeee;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    font-size: 14pt;
    font-weight: bold;
}

/* Center Dashboard Metrics Labels */
.timezone-text  { top: 52%; }
.latitude-text  { top: 57%; }
.sunrise-text   { top: 62%; }
.sunset-text    { top: 66%; }
.longitude-text { top: 77%; }

.timezone-text, .sunrise-text, .sunset-text, .latitude-text, .longitude-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 12pt;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    white-space: normal;
}

/* --- Logging Outputs --- */

.moonlogmini {
	
   font-family: Gadugi, sans-serif;
    text-align: left;
    font-size: 10pt;
    color: #000000;
    text-shadow: 1px 1px 3px rgba(240, 240, 240, 0.6);
}

.moonlogmini td {
	font-family: 'Gadugi';
    text-align: left;
    color: #000000;
    text-shadow: 1px 1px 3px rgba(240, 240, 240, 0.8);
    font-size: 10pt;
}

.moonlog {
	
   font-family: Gadugi, sans-serif;
    text-align: left;
    font-size: 12pt;
    color: #000000;
    text-shadow: 1px 1px 3px rgba(240, 240, 240, 0.6);
}

.moonlog_day {
    text-align: left;
    font-size: 12pt;
    color: #F4F6F9;
    text-shadow: 1px 1px 3px rgba(240, 240, 240, 0.6);
}

.moonlog_night {
    text-align: left;
    font-size: 12pt;
    color: #2C3E50;
    text-shadow: 1px 1px 3px rgba(240, 240, 240, 0.6);
}

.moonlogrows {
    font-family: Gadugi, sans-serif;
    text-align: left;
    font-size: 12pt;
    color: #000000;
    text-shadow: 1px 1px 3px rgba(240, 240, 240, 0.6);
}

.sprite-mask {
  /* ... your width, height, and background image/color ... */

  width: 320px;
  height: 320px;
  background-color: black; /* Makes the circle solid black */
  border-radius: 50%;      /* Rounds it into a perfect circle (corners become transparent) */


  /*
  background-image: url('moons/phase_waning_gibbous.2403_thumb.jpg');
 */ 

  /* Positioning and Z-Index */
  position: absolute;      /* Required for z-index to take effect */
  z-index: 4;             /* Higher numbers bring the circle closer to the front */


  clip-path: circle(180px at center); 

  /* Black = Visible, Transparent = Hidden. 
     The 50.5px creates a tiny sub-pixel blur for smooth, anti-aliased edges. 
  -webkit-mask-image: radial-gradient(circle at center, black 50px, transparent 50.5px);
  mask-image: radial-gradient(circle at center, black 50px, transparent 50.5px);
     */

     -webkit-mask-image: radial-gradient(circle at center, black 180px, transparent 180.5px);
  mask-image: radial-gradient(circle at center, black 180px, transparent 180.5px);
}


.moonphase-log img {
    width: 44px; 
    height: 44px;
    border-radius: 50%;

    /*opacity: 0.318;*/    

}
.moonphase-log td {

    background-color:red; /* Makes the circle solid black */

}

.moonphase-log td {
	font-family: 'Gadugi';
    text-align: left;
    color: #000000;
    text-shadow: 1px 1px 3px rgba(240, 240, 240, 0.8);
    font-size: 12pt;
}

.moonphase-log-img { 
border-color: #000000;
object-fit: cover; 
border-radius: 2px; }