/* ============================================== */
/* 1. Global Theme Variables (Modernized) */
/* ============================================== */

:root { 
    --color-bg-primary: #ffeacf; 
    --color-bg-secondary: #ffffff; 
    --color-text-primary: #333333; 
    --color-text-link: #007bff;
    --color-link-hover: #0056b3;
    --color-shadow-primary: rgba(0, 0, 0, 0.5); 
    --color-shadow-container: rgba(0,0,0,0.15); 
    --color-modal-overlay: rgba(8, 13, 56, 0.6); 
    --base-spacing: 1.5rem; 
}

.dark-theme {
    --color-bg-primary: #48509b; 
    --color-bg-secondary: #333333; 
    --color-text-primary: #eeeeee; 
    --color-text-link: #00ccff; 
    --color-link-hover: #0099ff;
    --color-shadow-primary: rgba(0, 255, 255, 0.4); 
    --color-shadow-container: rgba(0, 255, 255, 0.25); 
    --color-modal-overlay: rgba(0, 0, 0, 0.85); 
}

/* ============================================== */
/* 2. Base Layout and Theme Application (Fixed) */
/* ============================================== */

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: var(--base-spacing) 0;
    
    background-color: var(--color-bg-primary); 
    color: var(--color-text-primary);
    transition: background-color 0.5s ease, color 0.5s ease;
    box-sizing: border-box;
}

.container {
    position: relative; 
    width: 90%; 
    max-width: 1290px; 
    height: 0; 
    
    /* NEW Aspect Ratio: Approximately 1.40 (Tall/Portrait scene) */
    padding-top: 140%; 
    
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 0 20px var(--color-shadow-container); 
    border-radius: 10px;
    transition: box-shadow 0.5s ease;
}

/* Hard-coded dimensions for large screens (to match the 1.40 aspect ratio) */
@media (min-width: 1290px) {
    .container {
        height: 1800px; /* 1290px * 1.40 ≈ 1800px */
        padding-top: 0;
    }
}

.background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    
    /* 🔑 FIX: Background Sizing to cover complete space */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

/* Avatar Image Positioning is integrated into the background/scene in the new image,
   so we are removing the separate .avatar-image rule if it's no longer a distinct element. 
   If it's still a separate interactive element, adjust its VW position accordingly. */
.avatar-image {
    position:absolute;
    top: 17vw;
    left: 30vw;
    width: 30vw;
    height: 30vw;
    z-index: 10;
}
@media (min-width: 1290px){
    .avatar-image {
        top: 245px;
        left: 390px;
        width: 390px;
        height: 390px;
    }
}

/* ============================================== */
/* 3. Theme Switch (Fixed Positioning) */
/* ============================================== */

.theme-switch-wrapper {
    position: fixed; 
    top: var(--base-spacing);
    right: var(--base-spacing);
    z-index: 50; 
}

.theme-switch input {
    display: none;
}

.mode-slider {
    position: relative;
    cursor: pointer;
    background-color: #f2f7ad;
    transition: 0.4s;
    width: 60px; 
    height: 30px; 
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.mode-slider.round {
    border-radius: 34px;
}

.mode-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

.day-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #df9a07; 
    font-size: 16px;
    transition: opacity 0.4s ease;
}

.night-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #eeeeee; 
    font-size: 16px;
    opacity: 0; 
    transition: opacity 0.4s ease;
}

/* Dark Mode State */
input:checked + .mode-slider {
    background-color: #5d67bd;
}

input:checked + .mode-slider:before {
    transform: translateX(26px);
    background-color: #df9a07; 
}

input:checked + .mode-slider .day-icon {
    opacity: 0; 
}
input:checked + .mode-slider .night-icon {
    opacity: 1; 
}

/* Mobile Tapping Improvement */
@media (max-width: 600px) {
    .theme-switch-wrapper {
        top: 1rem; 
        right: 1rem;
    }
}


/* ============================================== */
/* 4. Interactive Items and Signature (REPOSITIONED) */
/* ============================================== */

/* Signature box position corrected for the new portrait ratio */
.signature-box {
    position: absolute;
    bottom: 50vw; /* Anchor near the bottom */
    width: 100%;
    text-align: center;
    padding: 10px 0;
    z-index: 5; 
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

@media (min-width: 1290px) {
    .signature-box {
        bottom: 780px; 
    }
}

.signature-box p {
    font-size: clamp(1em, 2vw, 1.4em); 
    font-style: italic;
    color: var(--color-text-primary); 
    margin: 5px 10%; 
}

#signature {
    display: block;
    margin: 5px auto 0;
    width: 12vw; 
    max-width: 150px; 
    height: auto;
    transition: filter 0.5s ease; 
}

.dark-theme #signature {
    filter: invert(1);
}

/* Interactive Item Base Styles */
.interactive-item {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-in-out, filter 0.3s ease; 
}

.interactive-item:hover {
    transform: scale(1.03) translateY(-2px); 
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.dark-theme .interactive-item {
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.3)); 
}
.dark-theme .interactive-item:hover {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
    transform: scale(1.05) translateY(-2px); 
}


/* --- Interactive Item Positioning (RECALCULATED FOR NEW IMAGE LAYOUT) --- */
/* Positioning is based on placing items near the desk edge/items from the image */
/* Note: Since the content changed (now there is a signature box in HTML), 
   the 'notice' and 'frame' elements have been remapped to the actual items shown: */

/* Assuming 'notice' is the cork board on the left */
#notice {
    top: -7vw;/* Positioned near the top */
    left: 1vw;
    width: 30vw;
    height: 40vw;
    max-width: 120vw;
    max-height: 120vw;
    background-image: url('notice1.png'); /* Assuming image update */
}

/* Assuming 'frame' is the portrait on the right */
#frame {
    top: 3vw; 
    right: 5vw;
    width: 38vw;
    height: 18vw;
   
    background-image: url('frame\ 1.png'); 
    /* Ensure it stays right-aligned */
}

/* Items on the table, from left to right: */

/* Robot (left stack) */
#robot {
    top: 41.5vw; 
    left: 5vw;
    width: 10vw;
    height: 10vw;
    background-image: url('robot.png');
}

/* Books/Camera stack (next to robot) */
#books {
    top: 38vw; 
    left: 15vw;
    width: 12vw;
    height: 16vw;
    background-image: url('books.png');
}

/* Camera (on top of books) - separate element for interaction */
#camera {
    top: 38vw; 
    left: 17.5vw;
    width: 6vw;
    height: 6vw;
    background-image: url('camera1.png');
}

/* Phone (on the far right of the laptop) */
#phone {
    top: 45.5vw; 
    left: 30vw;
    width: 5vw;
    height: 5vw;
    background-image: url('phone1.png');
}

/* Laptop (on the center table) */
#laptop {
    top: 28.5vw;
    left: 36vw;
    width: 23vw;
    height: 28vw;
    background-image: url('laptop1.png');
}

/* Blue Creature (small item next to globe) */
#bluecreature {
    top: 44vw;
    right: 8vw;
    left: auto; /* Right-aligned */
    width: 8vw;
    height: 8vw;
    background-image: url('bluecreature1.png');
}

/* Headphone (below the globe/right) */
#headphone {
    top: 48vw;
    right: 7vw;
    left: auto;
    width: 8vw;
    height: 10vw;
    background-image: url('headphone.png');
}

/* Globe (right of the laptop) */
#globe {
    top: 35vw;
    right: 15vw;
    left: auto;
    width: 10vw;
    height: 15vw;
    background-image: url('globe1.png');
}

/* Gitcat (far right of the table) */
#gitcat {
    top: 43vw;
    right: 24vw;
    left: auto;
    width: 7vw;
    height: 7vw;
    background-image: url('gitcat.png');
}


/* ============================================== */
/* 5. Modal Styles */
/* ============================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-modal-overlay); 
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px);
}

.modal-content {
    background-color: var(--color-bg-secondary); 
    color: var(--color-text-primary);
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 8px 30px var(--color-shadow-primary);
    animation: fadeIn 0.4s ease-out;
    transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-30px) scale(0.9);}
    to {opacity: 1; transform: translateY(0) scale(1);}
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

.dark-theme .close-button {
    color: #ccc; 
}

/* ============================================== */
/* 6. Analog Clock Styles (Responsive & Numbered) */
/* ============================================== */

#analog-clock {
    /* ... (Existing positioning and sizing) ... */
    position: absolute;
    top: 5vw;   
    right: 40vw;  
    width: 10vw; 
    height: 10vw;
    max-width: 130px; 
    max-height: 130px;
    
    border: 3px solid var(--color-text-primary);
    border-radius: 50%;
    background-color: var(--color-bg-secondary);
    box-shadow: 0 0 10px var(--color-shadow-container);
    z-index: 15;
    
    /* 👇 NEW: Good Font for Numbers and Hands */
    font-family: Arial, sans-serif; 
    font-weight: bold;
    font-size: 1.5vw; /* Fluid font size */
}

/* Clock Hand Base Style */
#analog-clock .hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: center bottom;
    border-radius: 50% 50% 0 0;
    transition: all 0.05s cubic-bezier(0, 0, 0, 1);
}

/* Second Hand (Responsive Width) */
#analog-clock .second-hand {
    /* 🔑 FIX: Responsive Width using % of clock size */
    width: 1.5%; /* 1.5% of the clock width */
    height: 45%; 
    background: #e74c3c; 
    z-index: 3;
}

/* Minute Hand (Responsive Width) */
#analog-clock .minute-hand {
    /* 🔑 FIX: Responsive Width using % of clock size */
    width: 3%;
    height: 40%;
    background: var(--color-text-primary);
    z-index: 2;
}

/* Hour Hand (Responsive Width) */
#analog-clock .hour-hand {
    /* 🔑 FIX: Responsive Width using % of clock size */
    width: 4.5%;
    height: 30%;
    background: var(--color-text-primary);
    z-index: 1;
}

/* Center Pin (Responsive Size) */
#analog-clock .center-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 🔑 FIX: Responsive Size using % of clock size */
    width: 6%; 
    height: 6%; 
    
    background: var(--color-text-primary);
    border-radius: 50%;
    z-index: 4;
}

/* ----------------------------------------------------- */
/* Clock Number Styling (The New Addition) */
/* ----------------------------------------------------- */

.clock-number {
    position: absolute;
    width: 20%; /* Space for the number */
    height: 20%;
    text-align: center;
    line-height: 200%; /* Vertically center the text */
    color: var(--color-text-primary);
    
    /* 🔑 FIX: Fluid font size that scales with the clock */
    font-size: 1.2vw;
}

/* Positioning the Numbers (Requires 12 unique rules) */

.num-12 { top: 5%; left: 40%; }
.num-1 { top: 12%; right: 20%; left: auto; }
.num-2 { top: 30%; right: 5%; left: auto; }
.num-3 { top: 45%; right: 0%; left: auto; }
.num-4 { bottom: 30%; right: 5%; top: auto; left: auto; }
.num-5 { bottom: 12%; right: 20%; top: auto; left: auto; }
.num-6 { bottom: 5%; left: 40%; top: auto; }
.num-7 { bottom: 12%; left: 20%; top: auto; }
.num-8 { bottom: 30%; left: 5%; top: auto; }
.num-9 { top: 45%; left: 0%; }
.num-10 { top: 30%; left: 5%; }
.num-11 { top: 12%; left: 20%; }
/* ----------------------------------------------------- */
/* Clock Number Styling (The New, Accurate Positioning) */
/* ----------------------------------------------------- */

.clock-number {
    position: absolute;
    /* 🔑 Key to correct radial positioning: */
    /* Move to center, then translate out, then rotate back */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Start centered */
    
    font-size: 1.2vw; /* Fluid font size for most numbers */
    pointer-events: none; /* Prevent numbers from blocking clicks on clock body */
    z-index: 5; /* Above hands, below center pin */
    
    /* 🔑 IMPROVEMENT: Ensure text doesn't wrap oddly */
    white-space: nowrap; 
}

/* 🔑 PRECISE NUMBER POSITIONING USING TRANSFORM */
/* Each number is rotated, then translated outward from the center */
/* The final `translateY` moves it back towards the edge from the center of the number */

/* 12 o'clock */
.num-12 {
    transform: translate(-50%, -50%) translateY(-4.2vw); /* Pull up from center */
    font-size: 2vw; /* Bigger */
    font-weight: bold; /* Bolder */
}

/* 1 o'clock */
.num-1 {
    transform: translate(-50%, -50%) rotate(30deg) translateY(-4.2vw) rotate(-30deg);
}
/* 2 o'clock */
.num-2 {
    transform: translate(-50%, -50%) rotate(60deg) translateY(-4.2vw) rotate(-60deg);
}

/* 3 o'clock */
.num-3 {
    transform: translate(-50%, -50%) translateX(4vw) translateY(-1vw); /* Pull right from center */
    font-size: 2vw; /* Bigger */
    font-weight: bold; /* Bolder */
}

/* 4 o'clock */
.num-4 {
    transform: translate(-50%, -50%) rotate(120deg) translateY(-4.2vw) rotate(-120deg);
}
/* 5 o'clock */
.num-5 {
    transform: translate(-50%, -50%) rotate(150deg) translateY(-4.2vw) rotate(-150deg);
}

/* 6 o'clock */
.num-6 {
    transform: translate(-50%, -50%) translateY(3vw); /* Pull down from center */
    font-size: 2vw; /* Bigger */
    font-weight: bold; /* Bolder */
}

/* 7 o'clock */
.num-7 {
    transform: translate(-50%, -50%) rotate(210deg) translateY(-4.2vw) rotate(-210deg);
}
/* 8 o'clock */
.num-8 {
    transform: translate(-50%, -50%) rotate(240deg) translateY(-4.2vw) rotate(-240deg);
}

/* 9 o'clock */
.num-9 {
    transform: translate(-50%, -50%) translateX(-4vw) translateY(-1vw); /* Pull left from center */
    font-size: 2vw; /* Bigger */
    font-weight: bold; /* Bolder */
}

/* 10 o'clock */
.num-10 {
    transform: translate(-50%, -50%) rotate(300deg) translateY(-4.2vw) rotate(-300deg);
}
/* 11 o'clock */
.num-11 {
    transform: translate(-50%, -50%) rotate(330deg) translateY(-4.2vw) rotate(-330deg);
}

/* Ensure the clock scales down gracefully on very small screens */
@media (max-width: 600px) {
    #analog-clock {
        /* Slightly larger for better tap target */
        width: 15vw; 
        height: 15vw;
    }
    .clock-number {
        font-size: 1.8vw; /* Adjust font for smaller screens */
    }
    .num-12, .num-3, .num-6, .num-9 {
        font-size: 2.1vw; /* Bolder numbers adjust */
    }
    /* Adjust translateY values slightly if needed for very small screens */
    .num-12 { transform: translate(-50%, -50%) translateY(-6vw); }
    /* ... and similar for other numbers if they start to overlap again */
}