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

body {
background: #0a0e1a;
overflow: hidden;
font-family: ‘Georgia’, serif;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}

canvas {
display: block;
width: 100vw;
height: 100vh;
}

#ui {
position: fixed;
top: 0; left: 0; right: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px 20px;
pointer-events: none;
z-index: 10;
}

.score-box {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 8px 16px;
color: #e8f4ff;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-shadow: 0 0 12px rgba(150,210,255,0.6);
}

.score-box span {
display: block;
font-size: 22px;
font-weight: bold;
color: #c8eaff;
letter-spacing: 0;
text-shadow: 0 0 20px rgba(150,210,255,0.9);
}

#tutorial {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: rgba(200,230,255,0.5);
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
pointer-events: none;
transition: opacity 1s ease;
z-index: 10;
}

#intro-screen {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at 50% 40%, #0e1a2e 0%, #050810 100%);
z-index: 100;
transition: opacity 0.8s ease;
}

#intro-screen h1 {
font-size: clamp(36px, 10vw, 72px);
color: #d4eeff;
letter-spacing: 10px;
text-transform: uppercase;
text-shadow: 0 0 40px rgba(150,220,255,0.8), 0 0 80px rgba(100,180,255,0.4);
margin-bottom: 12px;
animation: pulse 2.5s ease-in-out infinite;
}

#intro-screen p {
color: rgba(180,220,255,0.6);
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 40px;
}

#start-btn {
background: rgba(150,210,255,0.1);
border: 1px solid rgba(150,210,255,0.4);
color: #c8eaff;
font-family: ‘Georgia’, serif;
font-size: 15px;
letter-spacing: 4px;
text-transform: uppercase;
padding: 14px 36px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 0 30px rgba(150,210,255,0.15);
}

#start-btn:hover, #start-btn:active {
background: rgba(150,210,255,0.2);
box-shadow: 0 0 50px rgba(150,210,255,0.35);
transform: scale(1.05);
}

.snowflake-deco {
font-size: 28px;
margin-bottom: 16px;
animation: spin 8s linear infinite;
display: inline-block;
opacity: 0.7;
}

@keyframes pulse {
0%, 100% { text-shadow: 0 0 40px rgba(150,220,255,0.8), 0 0 80px rgba(100,180,255,0.4); }
50% { text-shadow: 0 0 60px rgba(180,230,255,1), 0 0 120px rgba(130,200,255,0.7); }
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

#mute-btn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 20;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(8px);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
transition: all 0.2s ease;
box-shadow: 0 0 16px rgba(150,210,255,0.1);
color: #c8eaff;
pointer-events: all;
}
#mute-btn:hover, #mute-btn:active {
background: rgba(150,210,255,0.15);
box-shadow: 0 0 24px rgba(150,210,255,0.25);
transform: scale(1.1);
}