/* Layout styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
}

[data-theme="dark"] html {
    background: #0a0a12;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    color: var(--text-primary);
}

/* Lava blobs container */
.lava-lamp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.lava-lamp .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    -webkit-filter: blur(60px);
}

/* Light theme blobs */
.lava-lamp .blob-1 {
    width: 70vmax;
    height: 70vmax;
    background: rgba(102, 126, 234, 0.4);
    top: -20%;
    left: -20%;
    animation: lavaMove1 15s ease-in-out infinite;
}

.lava-lamp .blob-2 {
    width: 60vmax;
    height: 60vmax;
    background: rgba(240, 147, 251, 0.35);
    bottom: -20%;
    right: -20%;
    animation: lavaMove2 18s ease-in-out infinite;
}

.lava-lamp .blob-3 {
    width: 50vmax;
    height: 50vmax;
    background: rgba(245, 87, 108, 0.3);
    top: 40%;
    left: 30%;
    animation: lavaMove3 20s ease-in-out infinite;
}

.lava-lamp .blob-4 {
    width: 55vmax;
    height: 55vmax;
    background: rgba(16, 185, 129, 0.3);
    bottom: 0%;
    left: -10%;
    animation: lavaMove4 22s ease-in-out infinite;
}

/* Dark theme blobs - более яркие */
[data-theme="dark"] .lava-lamp .blob-1 {
    background: rgba(139, 92, 246, 0.5);
}

[data-theme="dark"] .lava-lamp .blob-2 {
    background: rgba(6, 182, 212, 0.45);
}

[data-theme="dark"] .lava-lamp .blob-3 {
    background: rgba(236, 72, 153, 0.4);
}

[data-theme="dark"] .lava-lamp .blob-4 {
    background: rgba(16, 185, 129, 0.4);
}

@keyframes lavaMove1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30%, 20%) scale(1.1); }
    50% { transform: translate(10%, 40%) scale(0.9); }
    75% { transform: translate(-10%, 20%) scale(1.05); }
}

@keyframes lavaMove2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-25%, -15%) scale(0.95); }
    50% { transform: translate(-40%, 10%) scale(1.15); }
    75% { transform: translate(-15%, -25%) scale(1); }
}

@keyframes lavaMove3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    33% { transform: translate(-30%, -70%) scale(1.2); }
    66% { transform: translate(-70%, -30%) scale(0.85); }
}

@keyframes lavaMove4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(50%, -30%) scale(1.1); }
    40% { transform: translate(80%, 20%) scale(0.9); }
    60% { transform: translate(40%, 50%) scale(1.15); }
    80% { transform: translate(10%, 30%) scale(0.95); }
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* Screens */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.screen.active {
    display: flex;
    opacity: 1;
}

/* Fingers overlay */
#fingers-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* Participants area */
.participants-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
}

/* Confetti container */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 200;
}