html {
    overflow: hidden; /* Ensure no scroll on html */
    height: 100%;
    width: 100%; /* Ensure html takes full width */
    /* position: fixed; Removed as it can cause issues on Safari */
}

body {
    /* position: fixed; Removed */
    position: relative; /* Added to establish a containing block if needed */
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    /* Removed font-weight: 300 to prevent FOIT on mobile */
    overflow: hidden; /* Ensure no scroll on body */
}

#circle {
  background-color: rgba(255, 255, 255);
  /* Responsive sizing: target 35vh, but ensure scaled size (1.4x) is max 90vw */
  /* So, base size should be max (90vw / 1.4) = ~64.2857vw */
  width: min(35vh, 64.2857vw);
  height: min(35vh, 64.2857vw);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0); /* GPU-accelerated 3D transform */
  cursor: pointer;
  z-index: 3; /* Above the wipe SVG and stars */
  will-change: transform; /* GPU acceleration hint for smooth scaling */
  /* transition for transform is now set by JS in script.js */
}

.controls {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate3d(-50%, 0, 0); /* GPU acceleration */
    background-color: rgb(230, 230, 230);
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
    display: flex;
    gap: 15px;
    align-items: center;
}

.controls label {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light weight */
    font-size: 14px;
}

.controls input[type="number"] {
    width: 45px; /* Adjusted width for ~2 digits + padding */
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    text-align: center; /* Center the number */
    -moz-appearance: textfield; /* Firefox - hide spinners */
}

/* Hide spinners for WebKit browsers (Chrome, Safari, Edge) */
.controls input[type="number"]::-webkit-outer-spin-button,
.controls input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#cycle-counter-container {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate3d(-50%, 0, 0); /* GPU acceleration */
    text-align: center;
    z-index: 5;
    cursor: pointer; /* Make it appear clickable */
    user-select: none; /* Prevent text selection when clicking */
    will-change: contents; /* Hint for text content changes */
}

#cycle-counter-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light weight */
    font-size: clamp(2rem, 0.5vw + 1.5rem, 3.5rem);
    color: rgb(230, 230, 230);
    margin: 0;
}

#duration-display-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; /* Light weight */
    font-size: clamp(1.5rem, 0.5vw + 1rem, 2.5rem);
    color: rgb(230, 230, 230);
    margin-top: 5px; /* Space below the cycle counter */
}

#settings-icon-container {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1001;
    padding: 5px; /* Add some padding around the image container */
    cursor: pointer;
}

#settings-icon-img {
    width: 28px; /* Adjust size as needed */
    height: 28px; /* Adjust size as needed */
    display: block; /* Remove extra space below inline images */
}

#modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Use viewport width units */
    height: 100vh; /* Use viewport height units */
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
    z-index: 999; /* Below modal, above everything else */
    overflow: hidden; /* Prevent overlay itself from scrolling */
}

#settings-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0); /* GPU acceleration */
    background-color: #f0f0f0; /* Light background for modal */
    padding: 25px;
    padding-top: 40px; /* More space for close button */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    min-width: 300px; /* Ensure it's not too narrow */
    max-width: 90vw; /* Max width relative to viewport */
    max-height: 90vh; /* Max height relative to viewport */
    overflow-y: auto; /* Allow internal scrolling if content exceeds max-height */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    will-change: transform, opacity; /* GPU acceleration hints for modal animations */
}

/* Style for the .controls div when it's inside the modal */
#settings-modal .controls {
    position: static; /* Override absolute positioning */
    transform: none;  /* Override transform */
    background-color: transparent; /* Transparent as modal has background */
    box-shadow: none; /* No shadow as modal has shadow */
    padding: 0; /* Reset padding if any specific to top placement */
    flex-direction: column; /* Stack controls vertically */
    gap: 20px; /* Space between rows of controls */
    align-items: stretch; /* Make labels and inputs take full width within modal */
}

#settings-modal .controls > label {
    display: block; /* Make labels take full width */
    margin-bottom: 5px; /* Space between label and input */
    text-align: left;
}

/* New styles for settings modal controls */
#settings-modal .controls {
    font-family: 'Roboto', sans-serif; /* Consistent font */
    gap: 25px; /* Increased gap between control rows */
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Label on left, input/control on right */
    width: 100%;
}

.control-row label {
    margin-bottom: 0; /* Override general label style */
    color: #333;
    font-size: 15px;
}

/* Cycles Row */
.cycles-row #total-cycles {
    width: 55px; /* Enough for ~2-3 digits + padding/border */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    font-size: 16px; /* Changed from 15px to 16px */
    -moz-appearance: textfield;
}
.cycles-row #total-cycles::-webkit-outer-spin-button,
.cycles-row #total-cycles::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Duration Row */
.duration-row .duration-label {
    flex-shrink: 0; 
    margin-right: 0; /* No longer needed as it's above */
    margin-bottom: 8px; /* Space between label and inputs block */
    text-align: left; /* Ensure label is left-aligned */
    width: 100%; /* Make label take full width */
}
.duration-row {
    flex-direction: column; /* Stack label and inputs-container vertically */
    align-items: flex-start; /* Align items to the start of the cross axis (left) */
}

.duration-row .duration-inputs {
    display: flex;
    flex-direction: row; /* Stack inputs horizontally */
    align-items: center; /* Align items vertically in the center */
    justify-content: space-between; /* Distribute space between inputs */
    gap: 10px; /* Gap between duration inputs */
    width: 100%; /* Make the inputs container take full width */
}
.duration-row .duration-inputs input[type="number"] {
    width: calc(33.333% - 10px); /* Distribute width, accounting for gap. Adjust if padding/border affects this. */
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    font-size: 16px; /* Changed from 15px to 16px */
    -moz-appearance: textfield;
}
.duration-row .duration-inputs input[type="number"]::-webkit-outer-spin-button,
.duration-row .duration-inputs input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* .duration-row .duration-inputs span { */ /* No longer needed */
    /* color: #888; */
/* } */

/* Audio Row - Custom Checkbox */
.audio-row .custom-checkbox-wrapper {
    position: relative;
    display: inline-block;
}

.audio-row #audio-toggle {
    opacity: 0; /* Hide original checkbox */
    width: 0;
    height: 0;
    position: absolute;
}

.audio-row .custom-checkbox-label {
    position: relative;
    display: inline-block;
    width: 44px; /* Width of the toggle switch */
    height: 24px; /* Height of the toggle switch */
    background-color: #ccc;
    border-radius: 12px; /* Make it pill-shaped */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.audio-row .custom-checkbox-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; /* Size of the inner circle */
    height: 20px; /* Size of the inner circle */
    background-color: rgb(230, 230, 230);
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

.audio-row #audio-toggle:checked + .custom-checkbox-label {
    background-color: #4CAF50; /* Green when checked */
}

.audio-row #audio-toggle:checked + .custom-checkbox-label::after {
    transform: translate3d(20px, 0, 0); /* GPU-accelerated movement */
}

/* Focus style for accessibility if desired - can be added later */
/*
.audio-row #audio-toggle:focus + .custom-checkbox-label {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
}
*/

#close-modal-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #555;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

#close-modal-btn:hover {
    color: #000;
}

/* Active states */
#modal-overlay.active,
#settings-modal.active {
    display: block;
}

#settings-modal.active .controls {
    display: flex; /* Ensure controls are visible when modal is active */
}

#hold-wipe-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 105%; /* Slightly larger than the parent circle */
    height: 105%;
    transform: translate3d(-50%, -50%, 0) rotate(-90deg); /* GPU acceleration + rotate */
    overflow: visible; /* Allow stroke to exceed viewbox if needed, though r=48 in 0 0 100 100 is fine */
    z-index: 2; /* Behind the circle but above stars */
    will-change: transform; /* GPU acceleration hint */
}

#hold-wipe-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.4); /* White, more translucent than circle */
    stroke-width: 5; /* Adjust for desired thickness */
    transform-origin: center center;
    will-change: stroke-dashoffset, stroke-opacity; /* GPU acceleration hints */
}

/* Apply wipe animation when main circle is breathing */
#circle.breathing #hold-wipe-path {
    /* animation-name: radial-hold-wipe; REMOVED - JS will control this */
    /* animation-duration and animation-delay set by JS */
    animation-timing-function: linear; /* Wipe should be linear over the hold time */
    /* Opacity is handled by the keyframes of radial-hold-wipe */
}

@keyframes radial-hold-wipe {
    0% {
        stroke-dashoffset: var(--wipe-circumference); /* Start empty */
        stroke-opacity: 0.2; /* Become visible at start of animation (after delay) */
    }
    99% { /* Stay visible for almost the entire duration */
        stroke-dashoffset: 0; /* End full */
        stroke-opacity: 0.2;
    }
    100% { /* Fade out at the very end */
        stroke-dashoffset: 0;
        stroke-opacity: 0;
    }
}

/* Minimalist Accountability Table */
#accountability-container {
    position: fixed;
    bottom: 8%;
    left: 50%;
    transform: translate3d(-50%, 0, 0); /* GPU acceleration */
    z-index: 100;
}

.accountability-section {
    /* No background, no styling */
}

.accountability-table {
    border-collapse: collapse;
    /* No backgrounds, borders, or styling */
}

.accountability-table th {
    padding: 8px 12px;
    border: none;
    background: none;
    /* No styling */
}

.accountability-table td {
    padding: 8px 12px;
    border: none;
    background: none;
    /* No styling */
}

.period-icon {
    width: 24px;
    height: 24px;
}

.name-cell {
    color: rgb(230, 230, 230);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300; /* Light weight */
    text-align: left;
}

.period-cell {
    color: rgb(230, 230, 230);
    font-size: 18px;
    text-align: center;
}

/* Remove all hover effects and special styling */
.accountability-table tbody tr:hover {
    background: none;
}

.accountability-table tbody tr.current-user {
    background: none;
}

.accountability-table tbody tr.current-user:hover {
    background: none;
}

/* Mobile-first performance optimizations */
@media (max-width: 768px) {
    /* Stars are now handled by individual duration in JS, no override needed */
    
    /* Optimize circle transforms */
    #circle {
        will-change: transform; /* Ensure GPU acceleration */
    }
    
    /* Simplify period icons on mobile */
    .period-icon {
        box-shadow: none; /* Remove shadow on mobile for performance */
        opacity: 1; /* Increase opacity to compensate */
    }
}

/* Responsive adjustments for minimalist table */
@media (max-width: 480px) {
    .period-icon {
        width: 20px;
        height: 20px;
    }
    
    .name-cell {
        font-size: 12px;
    }
    
    .period-cell {
        font-size: 16px;
    }
    
    .accountability-table th,
    .accountability-table td {
        padding: 6px 8px;
    }
    
    /* Stars duration handled individually by JS for organic variation */
}

/* Starry Night Effect */
.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Lowest positive z-index - behind everything else */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    contain: layout style paint; /* Performance isolation */
    will-change: opacity; /* GPU acceleration hint */
}

.star-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle-enhanced 4s infinite ease-in-out;
    will-change: opacity; /* GPU acceleration hint */
}

/* Different star sizes - restored variety with performance optimizations */
.star-size-1 {
    width: 1px;
    height: 1px;
    opacity: 0.5;
}

.star-size-2 {
    width: 2px;
    height: 2px;
    opacity: 0.7;
}

.star-size-3 {
    width: 3px;
    height: 3px;
    opacity: 0.9;
    /* Size variety restored - box-shadow removed for performance */
}

/* Add a fourth size for even more variety */
.star-size-4 {
    width: 4px;
    height: 4px;
    opacity: 1.0;
    /* Subtle glow effect for brightest stars only - performance safe now */
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Enhanced layered animations with more variety and depth */
.star-layer-1 .star {
    animation-name: twinkle-gentle;
    opacity: 0.4;
    animation-timing-function: ease-in-out;
}

.star-layer-2 .star {
    animation-name: twinkle-medium;
    opacity: 0.6;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

.star-layer-3 .star {
    animation-name: twinkle-bright;
    opacity: 0.8;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced twinkling animations with natural variation */
@keyframes twinkle-gentle {
    0% { opacity: 0.2; }
    25% { opacity: 0.6; }
    50% { opacity: 0.4; }
    75% { opacity: 0.8; }
    100% { opacity: 0.2; }
}

@keyframes twinkle-medium {
    0% { opacity: 0.3; }
    20% { opacity: 0.7; }
    40% { opacity: 0.5; }
    60% { opacity: 1.0; }
    80% { opacity: 0.6; }
    100% { opacity: 0.3; }
}

@keyframes twinkle-bright {
    0% { opacity: 0.4; }
    15% { opacity: 0.9; }
    30% { opacity: 0.6; }
    45% { opacity: 1.0; }
    60% { opacity: 0.7; }
    75% { opacity: 1.0; }
    90% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

@keyframes twinkle-enhanced {
    0% { opacity: 0.3; }
    33% { opacity: 0.8; }
    66% { opacity: 0.5; }
    100% { opacity: 0.3; }
}

/* Legacy animation for reference - REMOVED expensive transforms */
/* @keyframes twinkle {
    0% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.3; transform: scale(1); }
} */