Spaces:
Running
Running
| :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 ; } | |
| /* 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 ; | |
| } | |
| /* 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); } |