@tailwind base;
@tailwind components;
@tailwind utilities;

/* Y2K Styles */

/* Font definitions (moved from index.html <style>) */
h1,
#timer {
    font-family: 'Orbitron', sans-serif;
}

body,
button,
label,
input,
p,
span,
div:not(#timer):not(h1) {
    font-family: 'Inter', sans-serif;
}

/* Body background (moved from index.html <style>) */
body {
    background: linear-gradient(135deg, #a0c4ff, #e1b3ff);
}

/* Header text shadow */
.text-shadow-lg {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Timer Display Enhancement */
#timer {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* Phase Display Enhancement */
/* Keeping it simple for now - removed empty ruleset */

/* Progress Ring Styles */
.progress-ring-bg {
    stroke: #90cdf4; /* Lighter blue */
    opacity: 0.5;
}

.progress-ring {
    stroke: #4299e1; /* Vibrant blue */
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 3px #60a5fa); /* Add glow effect */
}

/* Y2K Button Styles */
.y2k-button {
    @apply w-14 h-14 flex items-center justify-center rounded-full text-white shadow-lg transition-all duration-200 ease-in-out;
    background: linear-gradient(145deg, #60a5fa, #3b82f6);
    border: 2px solid #93c5fd;
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.4), 
                inset -2px -2px 4px rgba(0, 0, 0, 0.2),
                4px 4px 8px rgba(0, 0, 0, 0.2);
}

.y2k-button:hover {
    transform: translateY(-2px);
    box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.5), 
                inset -2px -2px 6px rgba(0, 0, 0, 0.3),
                6px 6px 12px rgba(0, 0, 0, 0.3);
}

.y2k-button:active {
    transform: translateY(1px);
    background: linear-gradient(145deg, #3b82f6, #60a5fa);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.3), 
                inset -1px -1px 3px rgba(0, 0, 0, 0.3),
                2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Settings & Volume Area Styling */
.settings-box {
    @apply bg-blue-100/50 rounded-xl p-4 mb-4 border border-blue-200 shadow-inner;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1), inset -1px -1px 3px rgba(255, 255, 255, 0.6);
}
.volume-box {
    @apply flex items-center justify-between bg-blue-100/50 rounded-xl p-4 border border-blue-200 shadow-inner;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1), inset -1px -1px 3px rgba(255, 255, 255, 0.6);
}

/* Input field styling */
input[type="number"] {
    /* @apply removed as classes are now directly in HTML */
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

input[type="number"].focus\:ring-2:focus {
    /* Custom focus combined with HTML classes */
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 2px #60a5fa;
}

/* Volume Slider Styling */
input[type="range"] {
    @apply w-24 h-2 bg-gradient-to-r from-blue-200 to-purple-200 rounded-full appearance-none cursor-pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Volume Slider Thumb (Chrome/Safari/Edge) */
input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-5 h-5 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-md border border-blue-700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Volume Slider Thumb (Firefox) */
input[type="range"]::-moz-range-thumb {
    @apply w-5 h-5 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-md border border-blue-700 cursor-pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Y2K Star Decoration */
.y2k-star {
    width: 40px; 
    height: 40px;
    background-color: #facc15; /* Yellow */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transform: rotate(-15deg);
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

/* Animated Paw Background Styles */
#background-paws {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind other content */
    /* Define the paw SVG - Updated shape with curves */
    --paw-svg: url('data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20100%20100"%20fill="rgba(255,%20255,%20255,%200.15)"><path%20d="M50,85%20C30,85%2025,70%2035,60%20S%2065,45%2070,60%20C%2075,70%2070,85%2050,85%20Z%20M30,45%20A%208%2010%200%201%201%2030.1%2045%20Z%20M48,40%20A%208%2010%200%201%201%2048.1%2040%20Z%20M66,40%20A%208%2010%200%201%201%2066.1%2040%20Z%20M84,45%20A%208%2010%200%201%201%2084.1%2045%20Z"/></svg>');
    background-image: var(--paw-svg);
    background-repeat: repeat;
    background-size: 70px 70px; /* Adjust size of paws */
    opacity: 0.6; /* Make them subtle but visible */
    animation: scrollPaws 60s linear infinite;
}

@keyframes scrollPaws {
    0% {
        background-position: 0 0;
    }
    100% {
        /* Move background by a multiple of its size to loop seamlessly */
        background-position: -420px -420px; /* 6 times the size */
    }
}