:root { 
    --bg-color: #0a0a0a; 
    --accent-color: #00f2ff; 
    --text-color: #ffffff; 
}

/* Globaler Reset & iPad-Fixes */
* {
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: var(--bg-color); 
    transition: background-color 0.8s; 
    font-family: 'Inter', system-ui, sans-serif; 
}

canvas { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
}

.content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
    color: var(--text-color); 
    pointer-events: none; 
    z-index: 10; 
    transition: opacity 1s ease-in-out, transform 0.3s ease; 
}

.hidden-ui { opacity: 0; visibility: hidden; }

h1 { 
    font-size: clamp(2rem, 8vw, 4rem); 
    font-weight: 200; 
    letter-spacing: 10px; 
    margin: 0; 
    text-transform: uppercase; 
}
#ui-container h1, 
#ui-container p {
    color: var(--text-color) !important;
    transition: color 0.5s ease;
}

p { 
    font-size: 1rem; 
    letter-spacing: 3px; 
    color: var(--accent-color); 
    margin-top: 10px; 
}

#year-display {
    font-size: 0.7rem; 
    letter-spacing: 4px; 
    opacity: 0.4; 
    margin-top: 8px;
}

.selectable {
    -webkit-user-select: text;
    user-select: text;
}