* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

/* Animated starry background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow:
        100px 200px white, 200px 100px white, 300px 300px white,
        400px 150px white, 500px 250px white, 150px 400px white,
        250px 500px white, 350px 50px white, 450px 350px white,
        50px 150px white, 550px 450px white, 650px 200px white,
        750px 350px white, 850px 100px white, 950px 400px white,
        1050px 250px white, 1150px 150px white, 1250px 350px white,
        100px 450px white, 300px 150px white, 500px 350px white,
        700px 250px white, 900px 450px white, 1100px 50px white,
        75px 75px white, 175px 325px white, 425px 275px white,
        625px 125px white, 825px 475px white, 1025px 325px white,
        1225px 175px white, 125px 525px white, 525px 175px white,
        925px 225px white, 225px 375px white, 725px 75px white,
        325px 425px white, 1325px 275px white, 25px 325px white,
        575px 525px white, 875px 325px white, 1175px 425px white,
        375px 225px white, 675px 375px white, 975px 125px white;
    animation: twinkle 3s infinite alternate;
}

.stars::after {
    box-shadow:
        150px 250px white, 250px 150px white, 350px 350px white,
        450px 200px white, 550px 300px white, 200px 450px white,
        300px 550px white, 400px 100px white, 500px 400px white,
        100px 200px white, 600px 500px white, 700px 250px white,
        800px 400px white, 900px 150px white, 1000px 450px white,
        1100px 300px white, 1200px 200px white, 1300px 400px white,
        50px 275px white, 275px 425px white, 475px 125px white,
        775px 325px white, 1075px 175px white, 1275px 475px white,
        175px 125px white, 375px 525px white, 675px 225px white,
        875px 75px white, 1175px 375px white, 125px 350px white,
        425px 450px white, 825px 250px white, 1025px 100px white,
        325px 275px white, 625px 475px white, 925px 375px white;
    animation: twinkle 3s infinite alternate-reverse;
}

@keyframes twinkle {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

.container {
    z-index: 1;
    padding: 20px;
}

.room-card {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border-radius: 30px;
    padding: 40px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 8px rgba(255, 255, 255, 0.1);
    max-width: 500px;
    text-align: center;
    position: relative;
    border: 4px solid #333;
    image-rendering: pixelated;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Header */
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.pixel-heart {
    color: #ff6b9d;
    font-size: 24px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
}

.title {
    font-size: 24px;
    color: #333;
    text-shadow: 3px 3px 0 #ffd700;
    letter-spacing: 2px;
}

/* Room illustration */
.room-illustration {
    background: linear-gradient(180deg, #87ceeb 0%, #e0f6ff 100%);
    border: 4px solid #333;
    border-radius: 20px;
    padding: 40px;
    margin: 20px 0;
    position: relative;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.door {
    width: 120px;
    height: 160px;
    background: #8b4513;
    border: 4px solid #333;
    border-radius: 10px;
    position: relative;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.door:hover {
    transform: scale(1.05);
}

.door-window {
    width: 40px;
    height: 50px;
    background: #87ceeb;
    border: 3px solid #333;
    border-radius: 5px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.door-handle {
    width: 12px;
    height: 12px;
    background: #ffd700;
    border: 2px solid #333;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.door-sign {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 3px solid #333;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 10px;
    white-space: nowrap;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.door.busy {
    background: #c41e3a;
}

.door.busy .door-sign {
    background: #ffcccc;
}

/* Toggle switch */
.toggle-container {
    margin: 30px 0;
}

.toggle-label {
    display: inline-block;
    cursor: pointer;
}

.toggle-input {
    display: none;
}

.toggle-slider {
    display: block;
    width: 200px;
    height: 60px;
    background: #4ade80;
    border: 4px solid #333;
    border-radius: 30px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.2), 0 4px 0 rgba(0, 0, 0, 0.1);
}

.toggle-input:checked + .toggle-slider {
    background: #ff6b6b;
}

.toggle-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6px;
    width: 44px;
    height: 44px;
    background: white;
    border: 4px solid #333;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.toggle-button::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #4ade80;
}

.toggle-input:checked + .toggle-slider .toggle-button {
    left: calc(100% - 54px);
}

.toggle-input:checked + .toggle-slider .toggle-button::before {
    content: '✕';
    color: #ff6b6b;
}

.toggle-labels {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    font-size: 10px;
    color: #666;
}

.person-label {
    padding: 8px 15px;
    border: 3px solid #333;
    border-radius: 10px;
    background: white;
    transition: background 0.2s ease, transform 0.2s ease;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    min-width: 90px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.person-label:hover {
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.person-label:active {
    transform: translateY(0);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.person-label.studying {
    background: linear-gradient(145deg, #a8edea, #fed6e3);
}

.person-label.studying::after {
    content: ' 📚';
}

.person-label.onTheWay {
    background: linear-gradient(145deg, #ffd700, #ffed4e);
}

.person-label.onTheWay::after {
    content: ' 🚶';
}

/* Message */
.message {
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border: 3px solid #333;
    border-radius: 15px;
    font-size: 12px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.pixel-star {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Dual Scene Container */
.dual-scene {
    margin-top: 25px;
    border: 4px solid #333;
    border-radius: 15px;
    overflow: hidden;
    height: 140px;
    position: relative;
    display: flex;
}

.scene-half {
    flex: 1;
    position: relative;
    height: 100%;
}


.scene-divider {
    width: 4px;
    background: #333;
}

/* On the Way Scene */
.on-the-way-scene {
    background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 87%, #8B4513 87%);
    overflow: hidden;
}

.sky {
    height: 120px;
    position: relative;
    z-index: 1;
    transition: background 1s ease;
}

.sky.day {
    background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 100%);
}

.sky.sunrise {
    background: linear-gradient(180deg, #FFB347 0%, #FFCC99 50%, #87CEEB 100%);
}

.sky.sunset {
    background: linear-gradient(180deg, #FF6B6B 0%, #FFB347 50%, #4A90E2 100%);
}

.sky.night {
    background: linear-gradient(180deg, #0C1445 0%, #1A2B5E 100%);
}

/* Weather modifier classes - blend with time-of-day */
.sky.cloudy {
    filter: brightness(0.8) saturate(0.7);
}

.sky.overcast {
    filter: brightness(0.6) saturate(0.5);
}

.sky.light-rain,
.sky.rain,
.sky.heavy-rain,
.sky.storm {
    filter: brightness(0.65) saturate(0.6);
}

.sky.light-snow,
.sky.snow,
.sky.heavy-snow {
    filter: brightness(0.85) saturate(0.7);
}

/* Rain animations - individual droplets using box-shadow */
.sky.light-rain::after,
.sky.rain::after,
.sky.heavy-rain::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 8px;
    top: -10px;
    left: 0;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    animation: rain-drops linear infinite;
}

.sky.light-rain::after {
    box-shadow:
        10px 0 0 0 rgba(174, 194, 224, 0.4),
        30px -5px 0 0 rgba(174, 194, 224, 0.4),
        55px 3px 0 0 rgba(174, 194, 224, 0.4),
        80px -2px 0 0 rgba(174, 194, 224, 0.4),
        110px 5px 0 0 rgba(174, 194, 224, 0.4),
        135px -8px 0 0 rgba(174, 194, 224, 0.4),
        165px 2px 0 0 rgba(174, 194, 224, 0.4),
        190px -4px 0 0 rgba(174, 194, 224, 0.4),
        220px 6px 0 0 rgba(174, 194, 224, 0.4),
        245px -1px 0 0 rgba(174, 194, 224, 0.4);
    animation-duration: 1.2s;
}

.sky.rain::after {
    box-shadow:
        8px 0 0 0 rgba(174, 194, 224, 0.5),
        22px -5px 0 0 rgba(174, 194, 224, 0.5),
        38px 3px 0 0 rgba(174, 194, 224, 0.5),
        54px -2px 0 0 rgba(174, 194, 224, 0.5),
        72px 5px 0 0 rgba(174, 194, 224, 0.5),
        88px -8px 0 0 rgba(174, 194, 224, 0.5),
        105px 2px 0 0 rgba(174, 194, 224, 0.5),
        122px -4px 0 0 rgba(174, 194, 224, 0.5),
        140px 6px 0 0 rgba(174, 194, 224, 0.5),
        156px -1px 0 0 rgba(174, 194, 224, 0.5),
        174px 4px 0 0 rgba(174, 194, 224, 0.5),
        192px -6px 0 0 rgba(174, 194, 224, 0.5),
        210px 1px 0 0 rgba(174, 194, 224, 0.5),
        228px -3px 0 0 rgba(174, 194, 224, 0.5),
        246px 7px 0 0 rgba(174, 194, 224, 0.5);
    animation-duration: 1s;
}

.sky.heavy-rain::after {
    height: 12px;
    box-shadow:
        5px 0 0 0 rgba(174, 194, 224, 0.6),
        15px -5px 0 0 rgba(174, 194, 224, 0.6),
        26px 3px 0 0 rgba(174, 194, 224, 0.6),
        37px -2px 0 0 rgba(174, 194, 224, 0.6),
        48px 5px 0 0 rgba(174, 194, 224, 0.6),
        60px -8px 0 0 rgba(174, 194, 224, 0.6),
        71px 2px 0 0 rgba(174, 194, 224, 0.6),
        82px -4px 0 0 rgba(174, 194, 224, 0.6),
        94px 6px 0 0 rgba(174, 194, 224, 0.6),
        105px -1px 0 0 rgba(174, 194, 224, 0.6),
        117px 4px 0 0 rgba(174, 194, 224, 0.6),
        128px -6px 0 0 rgba(174, 194, 224, 0.6),
        140px 1px 0 0 rgba(174, 194, 224, 0.6),
        151px -3px 0 0 rgba(174, 194, 224, 0.6),
        163px 7px 0 0 rgba(174, 194, 224, 0.6),
        174px -5px 0 0 rgba(174, 194, 224, 0.6),
        186px 2px 0 0 rgba(174, 194, 224, 0.6),
        197px -7px 0 0 rgba(174, 194, 224, 0.6),
        209px 4px 0 0 rgba(174, 194, 224, 0.6),
        220px -2px 0 0 rgba(174, 194, 224, 0.6),
        232px 6px 0 0 rgba(174, 194, 224, 0.6),
        243px -4px 0 0 rgba(174, 194, 224, 0.6),
        255px 3px 0 0 rgba(174, 194, 224, 0.6);
    animation-duration: 0.8s;
}

@keyframes rain-drops {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(120px);
        opacity: 0;
    }
}

/* Storm effects - very heavy rain with darker sky */
.sky.storm::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 14px;
    top: -10px;
    left: 0;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    box-shadow:
        3px 0 0 0 rgba(174, 194, 224, 0.7),
        10px -5px 0 0 rgba(174, 194, 224, 0.7),
        18px 3px 0 0 rgba(174, 194, 224, 0.7),
        26px -2px 0 0 rgba(174, 194, 224, 0.7),
        34px 5px 0 0 rgba(174, 194, 224, 0.7),
        42px -8px 0 0 rgba(174, 194, 224, 0.7),
        50px 2px 0 0 rgba(174, 194, 224, 0.7),
        58px -4px 0 0 rgba(174, 194, 224, 0.7),
        66px 6px 0 0 rgba(174, 194, 224, 0.7),
        74px -1px 0 0 rgba(174, 194, 224, 0.7),
        82px 4px 0 0 rgba(174, 194, 224, 0.7),
        90px -6px 0 0 rgba(174, 194, 224, 0.7),
        98px 1px 0 0 rgba(174, 194, 224, 0.7),
        106px -3px 0 0 rgba(174, 194, 224, 0.7),
        114px 7px 0 0 rgba(174, 194, 224, 0.7),
        122px -5px 0 0 rgba(174, 194, 224, 0.7),
        130px 2px 0 0 rgba(174, 194, 224, 0.7),
        138px -7px 0 0 rgba(174, 194, 224, 0.7),
        146px 4px 0 0 rgba(174, 194, 224, 0.7),
        154px -2px 0 0 rgba(174, 194, 224, 0.7),
        162px 6px 0 0 rgba(174, 194, 224, 0.7),
        170px -4px 0 0 rgba(174, 194, 224, 0.7),
        178px 3px 0 0 rgba(174, 194, 224, 0.7),
        186px -6px 0 0 rgba(174, 194, 224, 0.7),
        194px 5px 0 0 rgba(174, 194, 224, 0.7),
        202px -3px 0 0 rgba(174, 194, 224, 0.7),
        210px 1px 0 0 rgba(174, 194, 224, 0.7),
        218px -5px 0 0 rgba(174, 194, 224, 0.7),
        226px 4px 0 0 rgba(174, 194, 224, 0.7),
        234px -1px 0 0 rgba(174, 194, 224, 0.7),
        242px 6px 0 0 rgba(174, 194, 224, 0.7),
        250px -7px 0 0 rgba(174, 194, 224, 0.7);
    animation: rain-drops 0.6s linear infinite;
}

/* Snow animations */
.sky.light-snow::after,
.sky.snow::after,
.sky.heavy-snow::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 200%;
    background-image:
        radial-gradient(circle, white 10%, transparent 10%),
        radial-gradient(circle, white 10%, transparent 10%),
        radial-gradient(circle, white 10%, transparent 10%);
    background-size: 30px 30px, 25px 25px, 20px 20px;
    background-position: 0 0, 10px 15px, 5px 25px;
    animation: snow linear infinite;
    pointer-events: none;
    z-index: 2;
}

.sky.light-snow::after {
    opacity: 0.25;
    animation-duration: 5s;
}

.sky.snow::after {
    opacity: 0.45;
    animation-duration: 4s;
}

.sky.heavy-snow::after {
    opacity: 0.65;
    animation-duration: 3s;
}

.sky.heavy-snow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 220, 235, 0.2);
    pointer-events: none;
    z-index: 1;
}

@keyframes snow {
    0% {
        transform: translateY(0) translateX(0);
    }
    100% {
        transform: translateY(50%) translateX(20px);
    }
}

.celestial {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 15px;
    right: 30px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.celestial.sun {
    background: radial-gradient(circle, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8),
                0 0 30px rgba(255, 165, 0, 0.4);
}

.celestial.moon {
    background: radial-gradient(circle, #F4F4F4 0%, #D3D3D3 100%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Moon phases for outdoor scene - clean radial gradients */
.celestial.moon.new-moon {
    background: radial-gradient(circle, #4A4A4A 0%, #2A2A2A 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.celestial.moon.waxing-crescent {
    background: radial-gradient(ellipse 140% 100% at 80% 50%, #F4F4F4 0%, #D3D3D3 45%, transparent 50%);
    transform: rotate(15deg);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

.celestial.moon.waning-crescent {
    background: radial-gradient(ellipse 140% 100% at 20% 50%, #F4F4F4 0%, #D3D3D3 45%, transparent 50%);
    transform: rotate(-15deg);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

.celestial.moon.first-quarter {
    background: linear-gradient(105deg, transparent 0%, transparent 50%, #F4F4F4 50%, #F4F4F4 100%);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}

.celestial.moon.last-quarter {
    background: linear-gradient(75deg, #F4F4F4 0%, #F4F4F4 50%, transparent 50%, transparent 100%);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}

.celestial.moon.waxing-gibbous {
    background: radial-gradient(ellipse 140% 100% at 20% 50%, transparent 0%, transparent 45%, #F4F4F4 50%, #D3D3D3 100%);
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.55));
}

.celestial.moon.waning-gibbous {
    background: radial-gradient(ellipse 140% 100% at 80% 50%, transparent 0%, transparent 45%, #F4F4F4 50%, #D3D3D3 100%);
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.55));
}

.clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.cloud {
    position: absolute;
    background: white;
    border-radius: 100px;
    opacity: 0.7;
    animation: float-cloud 20s linear infinite;
    transition: opacity 1s ease;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 100px;
}

.cloud-1 {
    width: 50px;
    height: 15px;
    top: 10px;
    left: 20%;
}

.cloud-1::before {
    width: 25px;
    height: 15px;
    top: -7px;
    left: 10px;
}

.cloud-1::after {
    width: 20px;
    height: 12px;
    top: -5px;
    right: 10px;
}

.cloud-2 {
    width: 40px;
    height: 12px;
    top: 40px;
    left: 60%;
    animation-delay: -10s;
    animation-duration: 25s;
}

.cloud-2::before {
    width: 20px;
    height: 12px;
    top: -6px;
    left: 8px;
}

.cloud-2::after {
    width: 18px;
    height: 10px;
    top: -4px;
    right: 8px;
}

.cloud-3 {
    width: 35px;
    height: 10px;
    top: 25px;
    left: 80%;
    animation-delay: -15s;
    animation-duration: 30s;
}

.cloud-3::before {
    width: 18px;
    height: 10px;
    top: -5px;
    left: 6px;
}

.cloud-3::after {
    width: 15px;
    height: 8px;
    top: -3px;
    right: 6px;
}

@keyframes float-cloud {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-150%);
    }
}

.ground {
    height: 12px;
    background: #8B4513;
    position: relative;
    overflow: visible;
    z-index: 2;
}

.grass-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    animation: scroll-grass 8s linear infinite;
    z-index: 1;
}

.grass-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        #2ECC40 0px,
        #2ECC40 3px,
        #27AE34 3px,
        #27AE34 6px,
        #2ECC40 6px,
        #2ECC40 9px,
        #3FD850 9px,
        #3FD850 12px
    );
}

.grass-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 8px,
        #27AE34 8px,
        #27AE34 10px,
        transparent 10px,
        transparent 20px,
        #3FD850 20px,
        #3FD850 22px
    );
}

@keyframes scroll-grass {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* People Container */
.people-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    overflow: visible;
}

/* Base Person Styling */
.person {
    position: absolute;
    bottom: 4px;
    width: 16px;
    height: 28px;
    animation: walk 12s linear infinite;
    transition: left 0.5s ease, bottom 0.5s ease;
}

.person.studying {
    animation: none;
    left: 50%;
    transform: translateX(-50%);
}

/* Person: Umar (brown, medium height) */
.person.umar {
    height: 24px;
}

.person.umar .person-head {
    width: 10px;
    height: 10px;
    background: #8B4513;
    border: 2px solid #5D2E0F;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 3px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.person.umar .person-body {
    width: 12px;
    height: 10px;
    background: #4A90E2;
    border: 2px solid #2E5C8A;
    position: absolute;
    top: 10px;
    left: 2px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.person.umar .person-legs {
    width: 4px;
    height: 6px;
    background: #4A90E2;
    border: 1px solid #2E5C8A;
    position: absolute;
    top: 18px;
}

.person.umar .person-legs.left {
    left: 4px;
}

.person.umar .person-legs.right {
    left: 10px;
}

/* Person: Andreas (tan, tallest) */
.person.andreas {
    height: 28px;
}

.person.andreas .person-head {
    width: 10px;
    height: 10px;
    background: #D4A574;
    border: 2px solid #B8956A;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 3px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.person.andreas .person-body {
    width: 12px;
    height: 12px;
    background: #50C878;
    border: 2px solid #3A9B5C;
    position: absolute;
    top: 10px;
    left: 2px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.person.andreas .person-legs {
    width: 4px;
    height: 8px;
    background: #2C3E50;
    border: 1px solid #1A252F;
    position: absolute;
    top: 20px;
}

.person.andreas .person-legs.left {
    left: 4px;
}

.person.andreas .person-legs.right {
    left: 10px;
}

/* Person: Isa (white, girl with dress) */
.person.isa {
    height: 26px;
}

.person.isa .person-head {
    width: 10px;
    height: 10px;
    background: #FFE4C4;
    border: 2px solid #DEB887;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 3px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.person.isa .person-body {
    width: 14px;
    height: 12px;
    background: #FF69B4;
    border: 2px solid #E91E8C;
    position: absolute;
    top: 10px;
    left: 1px;
    border-radius: 0 0 6px 6px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* Little bow on dress */
.person.isa .person-body::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 3px;
    background: #FFD700;
    border: 1px solid #FFA500;
    top: 2px;
    left: 3px;
}

.person.isa .person-legs {
    width: 3px;
    height: 6px;
    background: #FFE4C4;
    border: 1px solid #DEB887;
    position: absolute;
    top: 20px;
}

.person.isa .person-legs.left {
    left: 4px;
}

.person.isa .person-legs.right {
    left: 11px;
}

/* Person: Irati (more tan, yellow clothing) */
.person.irati {
    height: 26px;
}

.person.irati .person-head {
    width: 10px;
    height: 10px;
    background: #C19A6B;
    border: 2px solid #A67C52;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 3px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.person.irati .person-body {
    width: 12px;
    height: 12px;
    background: #FFD700;
    border: 2px solid #FFA500;
    position: absolute;
    top: 10px;
    left: 2px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.person.irati .person-legs {
    width: 4px;
    height: 6px;
    background: #C19A6B;
    border: 1px solid #A67C52;
    position: absolute;
    top: 20px;
}

.person.irati .person-legs.left {
    left: 4px;
}

.person.irati .person-legs.right {
    left: 10px;
}

/* Walking Animation */
@keyframes walk {
    0% {
        left: -20px;
    }
    100% {
        left: calc(100% + 20px);
    }
}

/* Studying variations - sitting position */
.person.studying .person-body {
    transform: translateY(4px);
}

.person.studying .person-legs {
    transform: rotate(90deg);
    transform-origin: top left;
}

/* Book for studying status */
.person.studying::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 6px;
    background: #8B4513;
    border: 2px solid #654321;
    bottom: 8px;
    left: 10px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
}

/* Leg animation for walking */
.person:not(.studying) .person-legs.left {
    animation: leg-walk-left 0.6s infinite;
}

.person:not(.studying) .person-legs.right {
    animation: leg-walk-right 0.6s infinite;
}

@keyframes leg-walk-left {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-2px) rotate(-10deg);
    }
}

@keyframes leg-walk-right {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-2px) rotate(10deg);
    }
}

/* Studying Scene */
.study-room {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(180deg, #F5DEB3 0%, #D2B48C 100%);
}

.room-wall {
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 16px,
            rgba(139, 90, 43, 0.1) 16px,
            rgba(139, 90, 43, 0.1) 17px
        ),
        linear-gradient(180deg, #F5DEB3 0%, #E8D4A8 100%);
}

/* Window */
.window {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 35px;
    background: #87CEEB;
    border: 3px solid #8B4513;
    border-radius: 3px;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    transition: background 1s ease;
    overflow: hidden;
}

.window.day {
    background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 100%);
}

.window.sunrise {
    background: linear-gradient(180deg, #FFB347 0%, #FFCC99 100%);
}

.window.sunset {
    background: linear-gradient(180deg, #FF6B6B 0%, #FFB347 100%);
}

.window.night {
    background: linear-gradient(180deg, #0C1445 0%, #1A2B5E 100%);
}

/* Window weather modifier classes */
.window.cloudy {
    filter: brightness(0.8) saturate(0.7);
}

.window.overcast {
    filter: brightness(0.6) saturate(0.5);
}

.window.light-rain,
.window.rain,
.window.heavy-rain,
.window.storm {
    filter: brightness(0.65) saturate(0.6);
}

.window.light-snow,
.window.snow,
.window.heavy-snow {
    filter: brightness(0.85) saturate(0.7);
}

/* Window celestial body */
.window-celestial {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 4px;
    right: 4px;
    border-radius: 50%;
    z-index: 1;
}

.window-celestial.sun {
    background: radial-gradient(circle, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.window-celestial.moon {
    background: radial-gradient(circle, #F4F4F4 0%, #D3D3D3 100%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Window moon phases - clean radial gradients */
.window-celestial.moon.new-moon {
    background: radial-gradient(circle, #4A4A4A 0%, #2A2A2A 100%);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}

.window-celestial.moon.waxing-crescent {
    background: radial-gradient(ellipse 140% 100% at 80% 50%, #F4F4F4 0%, #D3D3D3 45%, transparent 50%);
    transform: rotate(15deg);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}

.window-celestial.moon.waning-crescent {
    background: radial-gradient(ellipse 140% 100% at 20% 50%, #F4F4F4 0%, #D3D3D3 45%, transparent 50%);
    transform: rotate(-15deg);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}

.window-celestial.moon.first-quarter {
    background: linear-gradient(105deg, transparent 0%, transparent 50%, #F4F4F4 50%, #F4F4F4 100%);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.window-celestial.moon.last-quarter {
    background: linear-gradient(75deg, #F4F4F4 0%, #F4F4F4 50%, transparent 50%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.window-celestial.moon.waxing-gibbous {
    background: radial-gradient(ellipse 140% 100% at 20% 50%, transparent 0%, transparent 45%, #F4F4F4 50%, #D3D3D3 100%);
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.55));
}

.window-celestial.moon.waning-gibbous {
    background: radial-gradient(ellipse 140% 100% at 80% 50%, transparent 0%, transparent 45%, #F4F4F4 50%, #D3D3D3 100%);
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.55));
}

.window-pane {
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(0deg, #8B4513 0%, #8B4513 100%),
        linear-gradient(90deg, #8B4513 0%, #8B4513 100%);
    background-size: 2px 100%, 100% 2px;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 3;
}

.curtain {
    position: absolute;
    width: 12px;
    height: 30px;
    background: repeating-linear-gradient(
        0deg,
        #b7b6c7 0px,
        #ffffff 3px,
        #afb1c2 3px,
        #ffffff 6px
    );
    border: 2px solid #ceb8b8;
    top: -3px;
    z-index: 4;
}

.curtain-left {
    left: -8px;
    border-radius: 0 0 0 3px;
}

.curtain-right {
    right: -8px;
    border-radius: 0 0 3px 0;
}

/* Window rain animations - scaled down for small window */
.window.light-rain::before,
.window.rain::before,
.window.heavy-rain::before,
.window.storm::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 3px;
    top: -5px;
    left: 0;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    animation: window-rain-drops linear infinite;
}

.window.light-rain::before {
    box-shadow:
        8px 0 0 0 rgba(174, 194, 224, 0.4),
        18px -2px 0 0 rgba(174, 194, 224, 0.4),
        30px 1px 0 0 rgba(174, 194, 224, 0.4);
    animation-duration: 1s;
}

.window.rain::before {
    box-shadow:
        6px 0 0 0 rgba(174, 194, 224, 0.5),
        14px -2px 0 0 rgba(174, 194, 224, 0.5),
        22px 1px 0 0 rgba(174, 194, 224, 0.5),
        32px -1px 0 0 rgba(174, 194, 224, 0.5);
    animation-duration: 0.8s;
}

.window.heavy-rain::before {
    height: 4px;
    box-shadow:
        4px 0 0 0 rgba(174, 194, 224, 0.6),
        10px -2px 0 0 rgba(174, 194, 224, 0.6),
        16px 1px 0 0 rgba(174, 194, 224, 0.6),
        22px -1px 0 0 rgba(174, 194, 224, 0.6),
        28px 2px 0 0 rgba(174, 194, 224, 0.6),
        34px -2px 0 0 rgba(174, 194, 224, 0.6);
    animation-duration: 0.6s;
}

.window.storm::before {
    height: 4px;
    box-shadow:
        3px 0 0 0 rgba(174, 194, 224, 0.7),
        8px -2px 0 0 rgba(174, 194, 224, 0.7),
        13px 1px 0 0 rgba(174, 194, 224, 0.7),
        18px -1px 0 0 rgba(174, 194, 224, 0.7),
        23px 2px 0 0 rgba(174, 194, 224, 0.7),
        28px -2px 0 0 rgba(174, 194, 224, 0.7),
        33px 1px 0 0 rgba(174, 194, 224, 0.7),
        38px -1px 0 0 rgba(174, 194, 224, 0.7);
    animation-duration: 0.5s;
}

@keyframes window-rain-drops {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(40px);
        opacity: 0;
    }
}

/* Poster with tomato */
.poster {
    position: absolute;
    top: 20px;
    right: 115px;
    width: 30px;
    height: 35px;
    background: white;
    border: 2px solid #333;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tomato {
    width: 14px;
    height: 18px;
    position: relative;
}

/* Tomato body */
.tomato-highlight {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #FF6347, #E53935);
    border-radius: 50%;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.tomato-highlight::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

/* Green fuzz hair peeking out from sides of hat */
.tomato-highlight::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: #2E7D32;
    border-radius: 50%;
    top: -1px;
    left: -1px;
    z-index: 4;
    box-shadow:
        2px 1px 0 0.5px #2E7D32,
        3px 1px 0 0.5px #2E7D32,
        4px 1px 0 0.5px #2E7D32,
        5px 1px 0 0.5px #2E7D32,
        10px 1px 0 0.5px #2E7D32,
        11px 1px 0 0.5px #2E7D32,
        12px 1px 0 0.5px #2E7D32,
        1px 2px 0 0.5px #2E7D32,
        13px 2px 0 0.5px #2E7D32;
}

/* Top hat brim - sits ON the tomato */
.tomato::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background: #333;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* Top hat top */
.tomato::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    background: #333;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px 1px 0 0;
    z-index: 4;
}

/* Bookshelf */
.bookshelf {
    position: absolute;
    top: 20px;
    right: 80px;
    width: 30px;
    height: 40px;
    background: #8B4513;
    border: 3px solid #654321;
    border-radius: 2px;
}

.book {
    position: absolute;
    width: 6px;
    height: 12px;
    border: 2px solid #333;
    border-radius: 1px;
}

.book-1 {
    background: #FF6B6B;
    top: 5px;
    left: 3px;
}

.book-2 {
    background: #4ECDC4;
    top: 5px;
    left: 11px;
}

.book-3 {
    background: #FFD93D;
    top: 5px;
    left: 19px;
}

.book-4 {
    background: #95E1D3;
    top: 20px;
    left: 7px;
}

.book-5 {
    background: #AA96DA;
    top: 20px;
    left: 14px;
}

.book-6 {
    background: #FCBAD3;
    top: 20px;
    left: 21px;
}

/* Plant Pot */
.plant-pot {
    position: absolute;
    top: 48px;
    right: 62px;
    width: 12px;
    height: 8px;
    background: #D2691E;
    border: 2px solid #8B4513;
    border-radius: 0 0 2px 2px;
}

/* Clock on the wall */
.clock {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 20px;
    height: 20px;
}

.clock-face {
    width: 100%;
    height: 100%;
    background: white;
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Clock tick marks */
.clock-face::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 3px;
    background: #333;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
}

.clock-face::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 3px;
    background: #333;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
}

.clock-mark {
    position: absolute;
    width: 3px;
    height: 1px;
    background: #333;
    top: 50%;
}

.clock-mark.mark-3 {
    right: 1px;
    transform: translateY(-50%);
}

.clock-mark.mark-9 {
    left: 1px;
    transform: translateY(-50%);
}

/* Smaller hour marks */
.clock-mark-small {
    position: absolute;
    width: 1px;
    height: 2px;
    background: #666;
}

.clock-mark-small.mark-1 {
    top: 2px;
    right: 3px;
    transform: rotate(30deg);
}

.clock-mark-small.mark-2 {
    top: 3px;
    right: 1px;
    transform: rotate(60deg);
}

.clock-mark-small.mark-4 {
    bottom: 3px;
    right: 1px;
    transform: rotate(-60deg);
}

.clock-mark-small.mark-5 {
    bottom: 2px;
    right: 3px;
    transform: rotate(-30deg);
}

.clock-mark-small.mark-7 {
    bottom: 2px;
    left: 3px;
    transform: rotate(30deg);
}

.clock-mark-small.mark-8 {
    bottom: 3px;
    left: 1px;
    transform: rotate(60deg);
}

.clock-mark-small.mark-10 {
    top: 3px;
    left: 1px;
    transform: rotate(-60deg);
}

.clock-mark-small.mark-11 {
    top: 2px;
    left: 3px;
    transform: rotate(-30deg);
}

.clock-hand {
    position: absolute;
    background: #333;
    transform-origin: bottom center;
    left: 50%;
    bottom: 50%;
}

.hour-hand {
    width: 2px;
    height: 6px;
    margin-left: -1px;
}

.minute-hand {
    width: 1px;
    height: 7px;
    margin-left: -0.5px;
}

.clock-center {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.plant-leaves {
    position: absolute;
    width: 16px;
    height: 10px;
    top: -8px;
    left: -4px;
    background:
        radial-gradient(circle at 3px 8px, #2ECC40 4px, transparent 4px),
        radial-gradient(circle at 8px 6px, #27AE34 5px, transparent 5px),
        radial-gradient(circle at 13px 8px, #2ECC40 4px, transparent 4px);
}

/* Persian Carpet */
.carpet {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 50px;
    background:
        repeating-linear-gradient(
            0deg,
            #8B0000 0px,
            #8B0000 8px,
            #A52A2A 8px,
            #A52A2A 16px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 10px,
            rgba(139, 69, 19, 0.3) 10px,
            rgba(139, 69, 19, 0.3) 12px
        );
    border: 3px solid #654321;
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.3),
        inset 0 0 0 2px #A0522D,
        inset 0 0 0 4px #8B4513;
    z-index: 0;
}

/* Carpet fringe */
.carpet::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: repeating-linear-gradient(
        90deg,
        #654321 0px,
        #654321 3px,
        transparent 3px,
        transparent 6px
    );
}

.carpet::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: repeating-linear-gradient(
        90deg,
        #654321 0px,
        #654321 3px,
        transparent 3px,
        transparent 6px
    );
}

/* Desk - will be created dynamically per person */
.person-desk {
    position: absolute;
    width: 35px;
    height: 6px;
    background: #8B4513;
    border: 2px solid #654321;
    transition: left 0.5s ease, bottom 0.5s ease;
    border-radius: 2px;
    box-shadow: 0 2px 0 #654321;
    z-index: 2;
}

/* Coffee Cup - will be created dynamically per person */
.person-coffee {
    position: absolute;
    top: -8px;
    right: 3px;
    width: 8px;
    height: 6px;
    background: #FFFFFF;
    border: 2px solid #333;
    border-radius: 0 0 2px 2px;
}

.person-coffee::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #6F4E37;
    border-radius: 0 0 1px 1px;
}

.person-coffee::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 1px;
    width: 4px;
    height: 4px;
    border: 2px solid #333;
    border-left: none;
    border-radius: 0 2px 2px 0;
}

/* Steam Animation */
.steam {
    position: absolute;
    bottom: 10px;
    left: 3px;
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: steam-rise 2s infinite;
}

.steam-2 {
    left: 5px;
    animation-delay: 0.5s;
}

.steam-3 {
    left: 7px;
    animation-delay: 1s;
}

@keyframes steam-rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-15px) scale(1.5);
        opacity: 0;
    }
}

/* People in studying scene */
.studying-scene .people-container {
    bottom: 38px;
    z-index: 5;
}

.studying-scene .person.studying {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

/* Person lying on carpet */
.person.on-carpet {
    transform: translateX(-50%) rotate(90deg) !important;
}

.person.on-carpet .person-body {
    transform: translateY(2px);
}

.person.on-carpet .person-legs {
    transform: none !important;
}

/* Position desks to be centered under person */
.person-desk {
    transform: translateX(-50%);
}

/* Leaderboard Button */
.leaderboard-button-container {
    margin: 10px 0;
    text-align: center;
}

.leaderboard-button {
    background: white;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 8px;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
    color: #666;
    opacity: 0.7;
}

.leaderboard-button:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, #FFD700, #FFA500);
    color: #333;
}

.leaderboard-button:active {
    transform: translateY(0);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* Leaderboard Modal */
.leaderboard-modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    animation: fadeIn 0.3s ease;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.leaderboard-modal.show {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.leaderboard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.leaderboard-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: 4px solid #333;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease;
}

.leaderboard-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: #ff6b6b;
    border: 3px solid #333;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.leaderboard-close:hover {
    transform: scale(1.1);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.leaderboard-header {
    text-align: center;
    margin-bottom: 25px;
}

.leaderboard-trophy {
    font-size: 48px;
    margin-bottom: 10px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Fade in/out animations for people */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInWalk {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.person.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.person.fade-in-walk {
    animation: fadeInWalk 0.5s ease-out forwards;
}

.person.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.leaderboard-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.leaderboard-subtitle {
    font-size: 10px;
    color: #666;
    font-family: 'Press Start 2P', cursive;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: white;
    border: 3px solid #333;
    border-radius: 10px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.leaderboard-item:hover {
    transform: translateX(5px);
}

.leaderboard-item.rank-1 {
    background: linear-gradient(145deg, #FFD700, #FFA500);
}

.leaderboard-item.rank-2 {
    background: linear-gradient(145deg, #C0C0C0, #A8A8A8);
}

.leaderboard-item.rank-3 {
    background: linear-gradient(145deg, #CD7F32, #B8860B);
}

.leaderboard-rank {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    min-width: 30px;
    font-family: 'Press Start 2P', cursive;
}

.leaderboard-medal {
    font-size: 24px;
}

.leaderboard-name {
    flex: 1;
    font-size: 12px;
    color: #333;
    font-family: 'Press Start 2P', cursive;
}

.leaderboard-time {
    font-size: 14px;
    font-weight: bold;
    color: #4ade80;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* Responsive design */
@media (max-width: 600px) {
    .room-card {
        padding: 15px;
    }

    .header {
        margin-bottom: 20px;
    }

    .title {
        font-size: 16px;
    }

    .room-illustration {
        padding: 25px;
        margin: 15px 0;
        min-height: 150px;
    }

    .door {
        width: 90px;
        height: 120px;
    }

    .door-window {
        width: 30px;
        height: 40px;
        top: 15px;
    }

    .door-sign {
        bottom: -40px;
        font-size: 8px;
        padding: 6px 10px;
    }

    .toggle-container {
        margin: 20px 0;
    }

    .toggle-slider {
        width: 150px;
        height: 50px;
    }

    .toggle-button {
        width: 36px;
        height: 36px;
    }

    .toggle-input:checked + .toggle-slider .toggle-button {
        left: calc(100% - 46px);
    }

    .message {
        margin: 15px 0;
        padding: 12px;
        font-size: 10px;
    }

    .pixel-heart {
        font-size: 20px;
    }
}

/* PIN Numpad Modal */
.pin-modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.pin-modal.show {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.pin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.pin-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: 4px solid #333;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 350px;
    width: 90%;
    animation: slideIn 0.3s ease;
}

.pin-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #ff6b6b, #ff5252);
    border: 3px solid #333;
    border-radius: 50%;
    font-size: 20px;
    font-family: 'Press Start 2P', cursive;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.pin-close:hover {
    background: linear-gradient(145deg, #ff5252, #ff6b6b);
    transform: scale(1.1);
}

.pin-close:active {
    transform: scale(0.95);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translate(-50%, -60%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% { transform: translate(-50%, -50%); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-48%, -50%); }
    20%, 40%, 60%, 80% { transform: translate(-52%, -50%); }
}

.pin-container.shake {
    animation: shake 0.5s ease;
}

.pin-header {
    text-align: center;
    margin-bottom: 20px;
}

.pixel-lock {
    font-size: 40px;
    animation: heartbeat 2s ease-in-out infinite;
}

.pin-title {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    text-shadow: 2px 2px 0 #ffd700;
}

.pin-display {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 4px solid #333;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
    font-size: 32px;
    letter-spacing: 15px;
    color: white;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    font-family: 'Press Start 2P', cursive;
}

.pin-message {
    text-align: center;
    min-height: 20px;
    font-size: 10px;
    color: #ff6b6b;
    margin-bottom: 15px;
}

.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.numpad-btn:nth-child(10) {
    grid-column: 2;
}

.numpad-btn {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border: 3px solid #333;
    border-radius: 10px;
    padding: 20px;
    font-size: 20px;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    color: #333;
}

.numpad-btn:hover {
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.numpad-btn:active {
    transform: translateY(0);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}


/* Status Selection Modal */
.status-modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.status-modal.show {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.status-modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: 4px solid #333;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 350px;
    width: 90%;
    animation: slideIn 0.3s ease;
}

.status-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #ff6b6b, #ff5252);
    border: 3px solid #333;
    border-radius: 50%;
    font-size: 20px;
    font-family: 'Press Start 2P', cursive;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.status-close:hover {
    background: linear-gradient(145deg, #ff5252, #ff6b6b);
    transform: scale(1.1);
}

.status-close:active {
    transform: scale(0.95);
}

.status-header {
    text-align: center;
    margin-bottom: 20px;
}

.status-title {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    text-shadow: 2px 2px 0 #ffd700;
}

.status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-btn {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border: 3px solid #333;
    border-radius: 15px;
    padding: 18px;
    font-size: 14px;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.status-btn:hover {
    background: linear-gradient(145deg, #ffd700, #ffed4e);
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.status-btn:active {
    transform: translateY(0);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.status-emoji {
    font-size: 20px;
}

@media (max-width: 600px) {
    .pin-container {
        padding: 20px;
        max-width: 90%;
        width: auto;
    }

    .pin-title {
        font-size: 12px;
    }

    .pin-display {
        font-size: 20px;
        letter-spacing: 8px;
        padding: 12px;
    }

    .numpad-btn {
        padding: 12px;
        font-size: 14px;
    }

    .numpad {
        gap: 8px;
    }

    .pixel-lock {
        font-size: 32px;
    }

    .status-modal-container {
        padding: 30px 25px;
        max-width: 95%;
        width: auto;
        min-width: 320px;
    }

    .status-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .status-list {
        gap: 15px;
    }

    .status-btn {
        padding: 20px 16px;
        font-size: 12px;
        gap: 12px;
    }

    .status-emoji {
        font-size: 28px;
    }

    .status-close {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .person-label {
        font-size: 8px;
        padding: 6px 12px;
    }
}

/* ============================================
   ADMIN MODE PANEL - Secret testing interface
   ============================================ */
.admin-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00ff00;
    border-radius: 8px;
    padding: 15px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #00ff00;
    z-index: 10000;
    min-width: 220px;
    box-shadow: 0 4px 20px rgba(0, 255, 0, 0.3);
    animation: adminFadeIn 0.3s ease;
}

@keyframes adminFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #00ff00;
}

.admin-close {
    background: transparent;
    border: 1px solid #00ff00;
    color: #00ff00;
    cursor: pointer;
    padding: 2px 6px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    transition: all 0.2s ease;
}

.admin-close:hover {
    background: #00ff00;
    color: #000;
}

.admin-section {
    margin-bottom: 12px;
}

.admin-section label {
    display: block;
    margin-bottom: 5px;
    font-size: 7px;
}

.admin-section select {
    width: 100%;
    background: #000;
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 6px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-section select:hover {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.admin-section select:focus {
    outline: none;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

.admin-reset {
    width: 100%;
    background: #000;
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 8px;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    margin-top: 10px;
    transition: all 0.2s ease;
}

.admin-reset:hover {
    background: #00ff00;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

@media (max-width: 600px) {
    body {
        min-height: 100dvh;
        overflow-y: hidden;
    }

    .container {
        padding: 10px;
    }

    .room-card {
        margin: 0 16px;
        animation: none;
    }

    .header {
        margin-bottom: 16px;
        gap: 10px;
    }

    .title {
        letter-spacing: 1px;
    }

    .pixel-heart {
        font-size: 18px;
    }

    .room-illustration {
        padding: 20px;
        margin: 12px 0;
        min-height: 130px;
    }

    .door {
        width: 85px;
        height: 110px;
    }

    .door-window {
        width: 28px;
        height: 36px;
        top: 12px;
    }

    .door-sign {
        bottom: -36px;
        font-size: 8px;
        padding: 5px 8px;
    }

    .toggle-container {
        margin: 16px 0;
    }

    .toggle-slider {
        width: 140px;
        height: 46px;
    }

    .toggle-button {
        width: 32px;
        height: 32px;
    }

    .toggle-input:checked + .toggle-slider .toggle-button {
        left: calc(100% - 42px);
    }

    .toggle-labels {
        gap: 8px;
        margin-top: 12px;
        font-size: 9px;
    }

    .person-label {
        min-width: 80px;
        height: 34px;
        font-size: 8px;
        padding: 6px 10px;
    }

    .message {
        margin: 12px 0;
        padding: 10px;
        font-size: 10px;
    }

    .dual-scene {
        margin-top: 16px;
    }

    .leaderboard-button {
        font-size: 8px;
        padding: 6px 10px;
    }
}

@media (max-width: 600px) and (max-height: 700px) {
    .container {
        padding: 8px;
    }

    .title {
        font-size: 14px;
    }

    .room-illustration {
        min-height: 110px;
        padding: 16px;
    }

    .door {
        width: 78px;
        height: 100px;
    }

    .door-window {
        width: 24px;
        height: 32px;
        top: 10px;
    }

    .door-sign {
        bottom: -32px;
        font-size: 7px;
        padding: 4px 6px;
    }

    .toggle-slider {
        width: 128px;
        height: 42px;
    }

    .toggle-button {
        width: 28px;
        height: 28px;
    }

    .toggle-input:checked + .toggle-slider .toggle-button {
        left: calc(100% - 38px);
    }

    .person-label {
        min-width: 72px;
        height: 32px;
        font-size: 7px;
        padding: 5px 8px;
    }

    

    .message {
        font-size: 9px;
        padding: 8px;
    }
}