:root {
    --deep-purple: #1a1a2e;
    --sunset-pink: #ff007f;
    --midnight: #2d1b4e;
    --neon-purple: #bc13fe;
}

body {
    background: linear-gradient(135deg, var(--deep-purple) 0%, var(--midnight) 50%, var(--sunset-pink) 100%);
    margin: 0; font-family: 'Segoe UI', sans-serif; color: white; height: 100vh; overflow: hidden;
}

.page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.hidden { display: none !important; }

/* Privacy & Interaction Fixes */
img {
    -webkit-user-drag: none; /* Webkit drag prevention */
    -webkit-user-select: none; /* Required for Safari - Fixes red error */
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

#main-photo, #target, button, .cake-container {
    pointer-events: auto !important;
}

/* Glassmorphism Fix for Safari */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px); /* Fixes Safari glass effect */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 25px; text-align: center; width: 85%; max-width: 400px;
}

.neon-text { text-shadow: 0 0 10px var(--sunset-pink), 0 0 20px var(--neon-purple); }
.profile-img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 15px; border: 3px solid var(--sunset-pink); margin: 20px 0; cursor: pointer; }

button { background: linear-gradient(45deg, var(--sunset-pink), var(--neon-purple)); color: white; border: none; padding: 14px 32px; border-radius: 50px; font-weight: bold; cursor: pointer; margin-top: 10px; }

/* Cake & Stats Styling */
.cake-container { position: relative; width: 200px; height: 150px; margin: 40px auto; display: flex; cursor: pointer; }
.cake-half { width: 100px; height: 100px; background: #ff69b4; border: 3px solid white; position: relative; transition: transform 0.8s ease; }
.left { border-radius: 100px 0 0 100px; }
.right { border-radius: 0 100px 100px 0; }
.topping.cherry { width: 20px; height: 20px; background: red; border-radius: 50%; position: absolute; top: -10px; left: 40px; border: 2px solid white; }
.sprinkles { width: 100%; height: 100%; position: absolute; background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(#ffff00 1px, transparent 1px); background-size: 15px 15px; }
.knife { position: absolute; top: -50px; left: 45%; font-size: 2.5rem; transition: 0.5s; opacity: 0; z-index: 20; }
.knife::after { content: '🔪'; }

.terminal-box { font-family: 'Courier New', monospace; color: var(--sunset-pink); text-align: left; line-height: 1.6; }
#game-area { width: 100%; height: 250px; background: rgba(0,0,0,0.4); border-radius: 15px; position: relative; border: 2px solid var(--sunset-pink); overflow: hidden; }
#target { width: 50px; position: absolute; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }
.stat-item { background: rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 10px; border: 1px solid var(--sunset-pink); }
.stat-label { font-size: 0.7rem; color: #ffcae3; display: block; }
.stat-value { font-size: 1.2rem; font-weight: bold; color: var(--sunset-pink); }