@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');

body { 
    margin: 0; overflow: hidden; background: #0b1026; 
    font-family: 'Mountains of Christmas', cursive; color: white;
}

.hidden { display: none !important; }

/* Snow */
.snowflake {
    position: absolute; top: -10px; background: white;
    border-radius: 50%; opacity: 0.8; animation: fall linear infinite; pointer-events: none; z-index: 5;
}
@keyframes fall { to { transform: translateY(105vh); } }

/* Start Screen */
#start-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, #1a2b4c 0%, #0b1026 100%); z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: auto; text-align: center;
}
.title { font-size: 80px; color: #FFD700; margin: 0; text-shadow: 0 0 20px #ff0000; }
.sub-text { font-size: 1.5em; margin: 10px 0; color: #aaddff; }
.instructions-box {
    background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px;
    margin: 30px 0; text-align: left; font-family: 'Roboto Mono', monospace; font-size: 14px;
}
.instructions-box p { margin: 10px 0; }

.btn {
    background: linear-gradient(to bottom, #cc0000, #990000);
    color: white; border: 2px solid #FFD700; padding: 15px 50px;
    font-size: 24px; border-radius: 50px; cursor: pointer;
    font-family: 'Mountains of Christmas', cursive; box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    transition: transform 0.2s;
}
.btn:hover { transform: scale(1.1); box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }

/* HUD */
#ui-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; display: flex; flex-direction: column; 
    justify-content: space-between; z-index: 10; padding: 20px; box-sizing: border-box;
}
.hud-top { text-align: center; }
#level-name { margin: 0; font-size: 3em; color: #FFD700; text-shadow: 0 0 10px #ff0000; }
.timer-box { 
    font-family: 'Roboto Mono', monospace; font-size: 24px; color: #00ffaa; 
    background: rgba(0,0,0,0.5); display: inline-block; padding: 5px 15px; border-radius: 10px;
}
.hud-bottom { text-align: center; }
.status-box { font-size: 1.5em; text-shadow: 0 0 5px black; }

/* Calibration */
#calibration-ui {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 90;
    display: flex; align-items: center; justify-content: center;
}
#cal-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 91; }
.cal-inner {
    z-index: 92; text-align: center; background: rgba(0, 20, 0, 0.9);
    padding: 30px; border-radius: 20px; border: 2px solid #00ffaa;
}
.scan-frame {
    width: 220px; height: 220px; border: 3px dashed #555; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; margin: 20px auto;
}
.scan-frame.scanning { border-color: #00ffaa; box-shadow: 0 0 30px rgba(0,255,170,0.4); }
#scan-text { font-size: 1.5em; color: #aaa; }
#progress-bar { width: 100%; height: 10px; background: #222; border-radius: 5px; overflow: hidden; margin-top: 10px; }
#progress-fill { width: 0%; height: 100%; background: #00ffaa; transition: width 0.1s; }

/* Popup */
#popup {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.95); color: #990000;
    padding: 40px; border-radius: 20px; text-align: center;
    border: 5px solid #006400; z-index: 50;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 50px rgba(255,255,255,0.5); min-width: 300px;
}
#popup.visible { transform: translate(-50%, -50%) scale(1); }

/* Finale */
#finale-screen {
    display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: auto; z-index: 40;
    flex-direction: column; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3);
}
#finale-screen h1 { font-size: 5em; color: #FFD700; text-shadow: 0 0 30px red; }
#santa-img {
    width: 200px; border-radius: 50%; border: 5px solid white;
    box-shadow: 0 0 30px #FFD700; animation: float 3s ease-in-out infinite; margin: 20px;
}
.finale-text { font-size: 2em; color: gold; text-shadow: 0 0 10px black; margin-bottom: 20px;}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }