:root {
    --bg-color: #000000;
    --old-white: #F5F5DC;
    --dim: rgba(245, 245, 220, 0.15);
}

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background-color: var(--bg-color);
    color: var(--old-white);
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
}

/* Navigering */
.time-travel {
    position: absolute; top: 30px; left: 40px;
    z-index: 200; display: flex; align-items: center; gap: 15px;
}
.nav-btn {
    background: transparent;
    border: 1px solid var(--dim);
    color: var(--old-white);
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: 0.3s;
    min-width: 85px;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1px;
}
.nav-btn:hover { background: var(--old-white); color: #000; }

/* Klocka */
#clock-face { 
    position: relative; 
    width: 78vmin; 
    height: 78vmin; 
}

/* Gemensam bas för visare */
.hand { 
    position: absolute; 
    bottom: 50%; 
    left: 50%; 
    background-color: var(--old-white); 
    /* Viktigt: Ändrad till bottom center för perfekt rotation */
    transform-origin: bottom center; 
    border-radius: 10px; 
    z-index: 50; 
}
.hour-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    
    /* Visarens bredd och höjd */
    width: 0.8vmin;
    height: 22vmin;
    
    /* CENTRERING: Istället för transform, använd negativ margin */
    /* Hälften av bredden (0.8 / 2 = 0.4) */
    margin-left: -0.4vmin; 
    
    background: var(--old-white);
    border-radius: 4px 4px 0 0;
    
    /* Rotationspunkt i botten */
    transform-origin: bottom center;
    
    z-index: 50;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#clock-face::after {
    /* Denna skapar pricken i mitten */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 2vmin; height: 2vmin;
    background-color: var(--old-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* Se till att pricken ligger ÖVER visaren */
}
.point-wrapper { 
    position: absolute; 
    left: 50%; 
    top: 0; 
    height: 39vmin; 
    transform-origin: bottom; 
    width: 1.8vmin; 
    margin-left: -0.9vmin; 
}

.data-point {
    width: 1.5vmin;
    height: 1.5vmin;
    border-radius: 50%;
    
    /* Bakgrunden sköts helt från JS, så vi sätter inget här */
    
    transition: 
        background 0.8s ease, 
        transform 0.5s ease, 
        opacity 0.8s ease,    /* Lade till denna för mjuk blekning */
        box-shadow 0.8s ease;

    background-origin: border-box;
    /* Säkerställer att gradienten inte upprepas om pricken ändrar storlek */
    background-repeat: no-repeat; 
}
.marker { 
    position: absolute; 
    width: 0.4vmin; 
    background-color: var(--old-white); 
    left: 50%; 
    top: 4vmin; 
    transform-origin: 50% 35vmin; 
}

.hour-label { 
    position: absolute; 
    width: 6vmin; 
    height: 6vmin; 
    text-align: center; 
    line-height: 6vmin; 
    font-size: 1.4rem; 
    transform: translate(-50%, -50%); 
    z-index: 15; 
    font-weight: 200; 
}

/* Info & Overlay */
.info-overlay { position: absolute; bottom: 40px; left: 40px; z-index: 100; }
#digital-clock { font-size: 3.5rem; font-weight: 200; margin: 0; letter-spacing: 2px; }
.price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#current-price { font-size: 2.4rem; font-weight: 700; }

.ball-group { display: flex; gap: 10px; }
.info-ball {
    width: 38px; height: 38px; border: 2px solid white; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    cursor: help; font-weight: 900; background: #111; position: relative;
}

.area-selector { display: flex; gap: 8px; margin-top: 15px; }
.area-btn { background: transparent; border: 1px solid var(--dim); color: var(--old-white); padding: 8px 15px; cursor: pointer; border-radius: 4px; font-size: 0.8rem; }
.area-btn.active { background: var(--old-white); color: #000; }
#status-text { font-size: 0.75rem; opacity: 0.4; margin-top: 10px; text-transform: uppercase; }

#btn-TEST {
    background: #ff0000;
    color: #fff;
    border: 1px solid #fff;
    font-weight: 900;
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

/* DYR PULS */
@keyframes nuclearPulse {
    0% { transform: scale(var(--current-scale, 1)); box-shadow: 0 0 0px rgba(255, 255, 255, 0); }
    50% { 
        /* Här sker magin - vi multiplicerar basen med faktorn från JS */
        transform: scale(calc(var(--current-scale, 1) * var(--zoom-factor, 1.15)));
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
        outline: 2px solid rgba(255, 255, 255, 0.8);
        outline-offset: 3px;
    }
    100% { transform: scale(var(--current-scale, 1)); }
}

/* BILLIG PULS */
@keyframes cheapPulse {
    0% { transform: scale(var(--current-scale, 1)); box-shadow: 0 0 0px rgba(0, 255, 100, 0); }
    50% { 
        /* Samma här - variabeln styr hur mycket den växer */
        transform: scale(calc(var(--current-scale, 1) * var(--zoom-factor, 1.15)));
        box-shadow: 0 0 25px rgba(0, 255, 150, 0.8);
        outline: 2px solid rgba(0, 255, 200, 0.6);
        outline-offset: 3px;
    }
    100% { transform: scale(var(--current-scale, 1)); }
}

.active-pulse { animation: nuclearPulse var(--pulse-speed, 2s) infinite ease-in-out !important; }
.cheap-pulse { animation: cheapPulse var(--pulse-speed, 2s) infinite ease-in-out !important; }

/* Ta bort 'animation: none' från .is-past om den finns kvar */
.is-past {
    opacity: 0.35 !important;
    box-shadow: none !important;
}

#btn-TEST {
    border-color: #ff0000;
    color: #ff0000;
    font-weight: 900;
    box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.2);
}
#btn-TEST.active {
    background: #ff0000;
    color: #fff;
}