/* Nixie Clock Styles */

/* CSS Variables for Color Schemes */
:root {
    /* Default Vintage Orange Theme */
    --digit-color: #fff88a;
    --glow-color: #fc792c;
    --glow-secondary: #fc9403;
    --background-color: #000000;
    --reflection-color: rgba(255,255,255,0.15);
    --text-shadow: 0 0 8px var(--glow-color), 0 0 16px var(--glow-color), 0 0 24px var(--glow-color), 0 0 32px var(--glow-color), 0 0 40px var(--glow-color), 0 0 48px var(--glow-color), 0 0 56px var(--glow-color), 0 0 64px var(--glow-color);
}

/* Theme Color Schemes */
.theme-vintage {
    --digit-color: #fff88a;
    --glow-color: #fc792c;
    --glow-secondary: #fc9403;
    --background-color: #000000;
    --reflection-color: rgba(255,255,255,0.15);
}

.theme-neon {
    --digit-color: #00ffff;
    --glow-color: #00bfff;
    --glow-secondary: #0080ff;
    --background-color: #000011;
    --reflection-color: rgba(0,255,255,0.2);
}

.theme-green {
    --digit-color: #00ff00;
    --glow-color: #00cc00;
    --glow-secondary: #00aa00;
    --background-color: #000800;
    --reflection-color: rgba(0,255,0,0.15);
}

.theme-purple {
    --digit-color: #ff00ff;
    --glow-color: #cc00cc;
    --glow-secondary: #aa00aa;
    --background-color: #080008;
    --reflection-color: rgba(255,0,255,0.2);
}

.theme-red {
    --digit-color: #ff4444;
    --glow-color: #ff0000;
    --glow-secondary: #cc0000;
    --background-color: #110000;
    --reflection-color: rgba(255,0,0,0.2);
}

.theme-monochrome {
    --digit-color: #ffffff;
    --glow-color: #cccccc;
    --glow-secondary: #999999;
    --background-color: #000000;
    --reflection-color: rgba(255,255,255,0.1);
}

.theme-warm {
    --digit-color: #fff8dc;
    --glow-color: #ffd700;
    --glow-secondary: #ffb347;
    --background-color: #1a1a00;
    --reflection-color: rgba(255,248,220,0.15);
}

.theme-cool {
    --digit-color: #e6f3ff;
    --glow-color: #87ceeb;
    --glow-secondary: #4682b4;
    --background-color: #000811;
    --reflection-color: rgba(230,243,255,0.15);
}

/* Base digit styling */
.digit {
    color: var(--digit-color);
    font-size: 800%;
    padding: 1.5rem;
    text-shadow: var(--text-shadow);
    transition: all 0.3s ease;
}

/* Dot sizes for different clock sizes */
.digit.dot-mini { font-size: 100%; }
.digit.dot-small { font-size: 200%; }
.digit.dot-medium { font-size: 300%; }
.digit.dot-large { font-size: 400%; }

/* Clock display container */
.digit_display {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    margin-bottom: 20px; /* Space for reflection */
}

/* Mirror surface container */
.mirror-surface {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.1) 0%, 
        rgba(255,255,255,0.05) 50%, 
        rgba(0,0,0,0.1) 100%);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 4px 20px rgba(0,0,0,0.3);
}

/* Reflection effect - realistic mirror surface */
.reflect {
    -webkit-box-reflect: below 0px linear-gradient(to bottom, 
        var(--reflection-color) 0%, 
        rgba(255,255,255,0.15) 8%, 
        rgba(255,255,255,0.08) 15%, 
        rgba(255,255,255,0.04) 25%, 
        rgba(0,0,0,0.1) 40%, 
        rgba(0,0,0,0.3) 60%, 
        rgba(0,0,0,0.6) 80%, 
        rgba(0,0,0,0.9) 100%);
    
    /* Additional mirror effects */
    position: relative;
}

/* Enhanced mirror surface with subtle distortion */
.reflect::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.1) 0%, 
        rgba(255,255,255,0.05) 20%, 
        rgba(0,0,0,0.2) 40%, 
        rgba(0,0,0,0.5) 70%, 
        rgba(0,0,0,0.8) 100%);
    transform: scaleY(-1);
    transform-origin: top;
    opacity: 0.8;
    filter: blur(0.5px);
    z-index: -1;
}

/* Mirror surface base with realistic edge highlight */
.reflect::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -2px;
    right: -2px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.3) 20%, 
        rgba(255,255,255,0.6) 50%, 
        rgba(255,255,255,0.3) 80%, 
        transparent 100%);
    z-index: 1;
}

/* Additional mirror surface effects */
.reflect {
    /* Add subtle surface imperfections */
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.02) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.01) 1px, transparent 1px),
        radial-gradient(circle at 40% 60%, rgba(0,0,0,0.01) 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px, 40px 40px;
    background-position: 0 0, 10px 10px, 20px 20px;
}

/* Realistic mirror depth effect */
.reflect::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0.1) 0%, 
        rgba(255,255,255,0.05) 20%, 
        rgba(0,0,0,0.2) 40%, 
        rgba(0,0,0,0.5) 70%, 
        rgba(0,0,0,0.8) 100%);
    transform: scaleY(-1);
    transform-origin: top;
    opacity: 0.8;
    filter: blur(0.5px);
    z-index: -1;
    /* Add subtle surface texture */
    background-image: 
        linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.02) 49%, rgba(255,255,255,0.02) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.01) 49%, rgba(255,255,255,0.01) 51%, transparent 52%);
    background-size: 20px 20px, 20px 20px;
}

/* Nixie tube sizes */
.tube-mini { width: 40px; }
.tube-small { width: 80px; }
.tube-medium { width: 120px; }
.tube-large { width: 160px; }

/* Timezone title */
.timezone-title {
    color: var(--digit-color);
    text-align: center;
    font-size: 2.25rem;
    font-weight: lighter;
    text-shadow: var(--text-shadow);
    transition: all 0.3s ease;
}