/*
 * File: moonbook_clock.css
 * Version: 2.5 (Consolidated)
 */

:root {
    --clock-size: 700px;
    --central-display-size: 280px;
    
    /* Markers & Radii */
    --hour-marker-radius: 156px;
    --hour-line-text-radius: -180px;
    
    --phase-marker-radius: 230px; 
    --phase-label-radius: 225px;
        
    --clockhour-marker-radius: 156px;
    --clockhour-line-text-radius: -160px;

    --moons13-marker-radius: 340px;
    --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;
}

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

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

.conic-gradient-ring {

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 640px; 
    height: 640px;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    
/* Precision mask: Increased width to 40px (expanding inward) */
mask: radial-gradient(transparent 250px, black 251px, black 280px, transparent 281px);
-webkit-mask: radial-gradient(transparent 250px, black 251px, black 280px, transparent 281px);
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: 3;
    opacity: 0.5;
    pointer-events: none;
    
    mask: radial-gradient(transparent 10px, black 340px);
    -webkit-mask: radial-gradient(transparent 90px, black 340px);
    
    /* Day/Night Gradient */
    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: 34%; background: linear-gradient(to top, transparent, #f9e91c); }
#sunHand  { width: 2px; height: 23%; background: linear-gradient(to top, transparent, #f9d71c); }

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

/* --- Moon Phase Images --- */

.phase {
    position: absolute;
    top: 50%; left: 50%;
    width: 62px; height: 62px;
    margin: -31px 0 0 -31px; 
    border-radius: 50%;
    z-index: 10;
    /* Rotation handled via JS + CSS Var */
    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;
    
    /* THE ORBIT: Rotate, Push out, Un-rotate */
    transform: rotate(var(--angle)) translateX(370px) rotate(calc(var(--angle) * -1));
    transition: transform 0.5s ease-out;
}

/* --- Interactive Lines (The Fix) --- */

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

/* Re-enable pointer events for the button inside the line */
#newmoon_line button, #fullmoon_line button, 
#firstquarter_line button, #lastquarter_line button {
    pointer-events: auto;
    cursor: pointer;
    margin-top: 5px;
}

/* The Text Label (Counter-Rotated) */
.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: -9px;
    width: 18px; height: 18px;
    border-radius: 50%;
}

/* --- 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: 40;
    pointer-events: none;
}

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

#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: 12pt;
    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: #aaaaaa;
    font-size: 12pt;
    font-weight: bold;
}

/* Center Text Layout */
.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: 10pt;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    white-space: normal;
}

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

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

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

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

.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: 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));
    
    
}
.phase-text {
    /* ... existing styles ... */
    
    /* Now uses the variable defined at the top */
    transform: rotate(var(--angle)) translateX(var(--phase-label-radius)) rotate(calc(var(--angle) * -1));
    
    transition: transform 0.5s ease-out;
}