body {
    font-family: 'Fredoka One', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a2e, #2e2e48, #4a4a6e);
    overflow-x: hidden;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container {
    text-align: center;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(12px);
    padding: 4vw;
    border-radius: 2vw;
    box-shadow: 0 6vw 15vw rgba(0, 0, 20, 0.5), inset 0 0 8vw rgba(74, 74, 110, 0.4);
    width: 90%;
    max-width: 480px;
    position: relative;
    border: 0.4vw solid #3e4a5b;
    transition: all 0.3s ease;
}

.container:hover {
    box-shadow: 0 7vw 18vw rgba(0, 0, 20, 0.6), inset 0 0 10vw rgba(74, 74, 110, 0.5);
}

h1 {
    color: #f0f2ff;
    margin-bottom: 3vw;
    font-size: 7vw;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8vw;
    text-shadow: 0 0 4vw #a0a5c0, 0 0 6vw #5c6480;
    animation: glowTitle 2s ease-in-out infinite alternate;
}

@keyframes glowTitle {
    from { text-shadow: 0 0 4vw #a0a5c0, 0 0 6vw #5c6480; }
    to { text-shadow: 0 0 6vw #a0a5c0, 0 0 8vw #5c6480; }
}

.player-info {
    color: #b0c0e5;
    font-size: 3.5vw;
    margin-bottom: 2vw;
    padding: 2vw;
    background: rgba(26, 26, 46, 0.85);
    border-radius: 1.5vw;
    display: none;
    font-weight: 700;
    box-shadow: inset 0 0 3vw #3e4a5b;
    border: 0.25vw solid #5c6480;
    transition: all 0.3s ease;
}

button {
    background: linear-gradient(45deg, #3e4a5b, #2e3848);
    color: #f0f2ff;
    padding: 2.5vw 4.5vw;
    margin: 1.5vw 1vw;
    border: none;
    border-radius: 1.5vw;
    cursor: pointer;
    font-size: 3.5vw;
    font-weight: 800;
    transition: all 0.3s ease-out;
    box-shadow: 0 0 3vw #a0a5c0, inset 0 0 1.5vw #3e4a5b;
    text-transform: uppercase;
}

button:hover {
    transform: translateY(-0.8vw);
    box-shadow: 0 0 4vw #a0a5c0, inset 0 0 2vw #3e4a5b;
    background: linear-gradient(45deg, #5c6480, #3e4a5b);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 0 2vw #a0a5c0, inset 0 0 1vw #3e4a5b;
}

.nav-button {
    background: linear-gradient(45deg, #6b788f, #4a5666);
}

.nav-button:hover {
    background: linear-gradient(45deg, #8a95a5, #6b788f);
    box-shadow: 0 0 4vw #8a95a5, inset 0 0 2vw #3e4a5b;
}

.gear-button {
    position: absolute;
    top: 2vw;
    right: 2vw;
    background: linear-gradient(45deg, #6b788f, #4a5666);
    padding: 1.5vw 2vw;
    border-radius: 1.5vw;
    font-size: 4.5vw;
    width: 8vw;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1002;
}

.gear-button:hover {
    transform: rotate(45deg) translateY(-0.8vw);
    box-shadow: 0 0 4vw #8a95a5, inset 0 0 2vw #3e4a5b;
}

#gameArea {
    width: 90vw;
    height: 70vh;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 26, 46, 0.95);
    border: 0.4vw solid #5c6480;
    border-radius: 2vw;
    overflow: hidden;
    display: none;
    z-index: 1000;
    box-shadow: 0 3vw 9vw rgba(0, 0, 20, 0.6), inset 0 0 5vw #3e4a5b;
}

.game-title {
    color: #f0f2ff;
    font-size: 4.5vw;
    font-weight: 900;
    margin-bottom: 1.5vw;
    text-shadow: 0 0 3vw #a0a5c0, 0 0 5vw #5c6480;
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.emoji {
    position: absolute;
    font-size: 6.5vh;
    will-change: transform, opacity;
    pointer-events: none;
    opacity: 1;
    transition: top 0.1s linear, opacity 0.1s ease;
    text-shadow: 0 0 2vw rgba(255, 255, 255, 0.3);
    transform-origin: center;
}

.emoji.active {
    opacity: 1;
}

.player {
    position: absolute;
    width: 12vh;
    height: 12vh;
    background: none;
    border-radius: 50%;
    bottom: 2vh;
    will-change: transform;
    text-align: center;
    line-height: 12vh;
    font-size: 6.5vh;
    color: #b0c0e5;
    pointer-events: none;
    transition: transform 0.05s linear;
    text-shadow: 0 0 2vw #b0c0e5, 0 0 3vw #5c6480;
    box-shadow: inset 0 0 3vw #5c6480;
    animation: glowPlayer 2s infinite alternate;
}

@keyframes glowPlayer {
    from { box-shadow: inset 0 0 3vw #5c6480; }
    to { box-shadow: inset 0 0 4vw #8a95a5; }
}

.bigger-player {
    width: 18vh;
    height: 18vh;
    line-height: 18vh;
    font-size: 9vh;
}

.second-player {
    position: absolute;
    width: 12vh;
    height: 12vh;
    background: none;
    border-radius: 50%;
    bottom: 2vh;
    will-change: transform;
    text-align: center;
    line-height: 12vh;
    font-size: 6.5vh;
    color: #b0c0e5;
    pointer-events: none;
    transition: transform 0.05s linear;
    text-shadow: 0 0 2vw #b0c0e5, 0 0 3vw #5c6480;
    box-shadow: inset 0 0 3vw #5c6480;
    animation: glowPlayer 2s infinite alternate;
}

.mini-player {
    width: 6vh;
    height: 6vh;
    line-height: 6vh;
    font-size: 3.5vh;
}

#loginSection {
    text-align: center;
    display: block;
    padding: 3vw;
    background: rgba(26, 26, 46, 0.95);
    border-radius: 2vw;
    width: 90%;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 6vw 15vw rgba(0, 0, 20, 0.5), inset 0 0 8vw rgba(74, 74, 110, 0.4);
    border: 0.4vw solid #3e4a5b;
}

.login-input {
    margin: 2.5vw 0;
    padding: 2.5vw;
    border: 0.4vw solid #5c6480;
    border-radius: 1.5vw;
    width: 85%;
    max-width: 340px;
    font-size: 3.5vw;
    transition: all 0.3s ease-out;
    background: rgba(26, 26, 46, 0.85);
    color: #f0f2ff;
    box-sizing: border-box;
    box-shadow: inset 0 0 3vw #3e4a5b;
}

.login-input:focus {
    border-color: #8a95a5;
    box-shadow: 0 0 5vw #8a95a5, inset 0 0 3vw #3e4a5b;
    outline: none;
}

.password-toggle {
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4.5vw;
    cursor: pointer;
    color: #b0c0e5;
    transition: color 0.3s ease-out;
    text-shadow: 0 0 2vw #b0c0e5;
}

.password-toggle:hover {
    color: #8a95a5;
    text-shadow: 0 0 3vw #8a95a5;
}

label {
    color: #b0c0e5;
    font-size: 3.2vw;
    margin-top: 2vw;
    display: block;
}

.game-stats {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1002;
    background: rgba(26, 26, 46, 0.9);
    padding: 1.5vw;
    border-radius: 0;
    border-bottom: 0.25vw solid #5c6480;
    box-shadow: 0 0 4vw #a0a5c0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-top {
    display: flex;
    justify-content: center;
    gap: 4vw;
    flex-grow: 1;
}

.stats-mode {
    text-align: center;
    width: 40%;
    margin: 0 2vw;
}

.stat-item {
    display: inline-block;
    margin: 0 1vw;
    font-size: 4vw;
    color: #f0f2ff;
    font-weight: 800;
    text-shadow: 0 0 3vw #a0a5c0, 0 0 5vw #5c6480;
    animation: blink 1.5s infinite alternate;
}

#gameModeInfo {
    font-size: 2.5vw;
    color: #b0c0e5;
    text-shadow: 0 0 2vw #5c6480;
}

#themeInfo {
    font-size: 2.5vw;
    color: #b0c0e5;
    text-shadow: 0 0 2vw #5c6480;
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.8; }
}

#stopButton {
    background: linear-gradient(45deg, #ef4444, #dc2626);
    color: #f0f2ff;
    padding: 1.5vw 3vw;
    border: none;
    border-radius: 1.5vw;
    cursor: pointer;
    font-size: 3.2vw;
    font-weight: 800;
    transition: all 0.3s ease-out;
    box-shadow: 0 0 3vw #ef4444, inset 0 0 1.5vw #3e4a5b;
    margin-left: 2vw;
    display: none;
}

#stopButton:hover {
    transform: translateY(-0.8vw);
    box-shadow: 0 0 4vw #ef4444, inset 0 0 2vw #3e4a5b;
    background: linear-gradient(45deg, #f87171, #ef4444);
}

#stopButton:active {
    transform: translateY(0);
    box-shadow: 0 0 2vw #ef4444, inset 0 0 1vw #3e4a5b;
}

#modesTab, #indexTab {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

#modesContent, #indexContent {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(12px);
    padding: 3vw;
    border-radius: 2vw;
    width: 90%;
    max-width: 650px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
}

.index-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2vw;
    background: rgba(26, 26, 46, 0.85);
    border-radius: 1.5vw;
    box-shadow: inset 0 0 3vw #3e4a5b;
    border: 0.25vw solid #5c6480;
}

.index-table th, .index-table td {
    border: 0.4vw solid #5c6480;
    padding: 1.5vw;
    text-align: center;
    font-size: 3.2vw;
    text-shadow: 0 0 2vw #b0c0e5;
    border-radius: 0.5vw;
}

.index-table th {
    background: linear-gradient(45deg, #6b788f, #4a5666);
    color: #f0f2ff;
    font-weight: 900;
    box-shadow: inset 0 0 3vw #3e4a5b;
}

.index-table tr:nth-child(even) {
    background: rgba(26, 26, 46, 0.9);
}

.index-table tr:hover {
    background: rgba(92, 100, 128, 0.3);
    box-shadow: inset 0 0 4vw #8a95a5;
}

.modes-tab-button {
    padding: 1.5vw 3vw;
    margin: 0.5vw;
    border: none;
    border-radius: 1.2vw;
    cursor: pointer;
    color: #f0f2ff;
    font-size: 3vw;
    font-weight: 800;
    transition: all 0.3s ease-out;
    box-shadow: 0 0 3vw #f87171, inset 0 0 1.5vw #3e4a5b;
}

.modes-tab-button:hover {
    transform: translateY(-0.8vw);
    box-shadow: 0 0 4vw #f87171, inset 0 0 2vw #3e4a5b;
}

.modes-tab-button.active {
    background: linear-gradient(45deg, #22c55e, #16a34a);
    box-shadow: 0 0 4vw #22c55e, inset 0 0 2vw #3e4a5b;
}

.modes-tab-button:not(.active) {
    background: linear-gradient(45deg, #ef4444, #dc2626);
}

.mode-section {
    margin-bottom: 3vw;
}

.mode-section h3 {
    color: #f0f2ff;
    font-size: 4vw;
    margin-bottom: 1.5vw;
    text-shadow: 0 0 2vw #a0a5c0;
}

.index-tab-button {
    padding: 1.5vw 3vw;
    margin: 0.5vw;
    border: none;
    border-radius: 1.2vw;
    cursor: pointer;
    color: #f0f2ff;
    font-size: 3vw;
    font-weight: 800;
    transition: all 0.3s ease-out;
    box-shadow: 0 0 3vw #f87171, inset 0 0 1.5vw #3e4a5b;
}

.index-tab-button:hover {
    transform: translateY(-0.8vw);
    box-shadow: 0 0 4vw #f87171, inset 0 0 2vw #3e4a5b;
}

.index-tab-button.active {
    background: linear-gradient(45deg, #22c55e, #16a34a);
    box-shadow: 0 0 4vw #22c55e, inset 0 0 2vw #3e4a5b;
}

.index-tab-button:not(.active) {
    background: linear-gradient(45deg, #ef4444, #dc2626);
}

.language-selector {
    margin: 2vw 0;
    color: #b0c0e5;
    font-size: 3.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-selector label {
    margin-right: 1.5vw;
}

.language-selector select {
    padding: 1.5vw 3vw;
    border: 0.4vw solid #5c6480;
    border-radius: 1.5vw;
    background: rgba(26, 26, 46, 0.85);
    color: #f0f2ff;
    font-size: 3.2vw;
    font-family: 'Fredoka One', sans-serif;
    box-shadow: inset 0 0 3vw #3e4a5b;
    transition: all 0.3s ease-out;
    cursor: pointer;
}

.language-selector select:hover {
    border-color: #8a95a5;
    box-shadow: 0 0 5vw #8a95a5, inset 0 0 3vw #3e4a5b;
}

.language-selector select:focus {
    outline: none;
    border-color: #8a95a5;
    box-shadow: 0 0 5vw #8a95a5, inset 0 0 3vw #3e4a5b;
}

.retro-mode {
    background: linear-gradient(135deg, #5c4033, #8b6f47, #d4a17d);
}
.retro-mode .container { background: rgba(92, 64, 51, 0.95); }
.retro-mode .game-title { color: #d4a17d; text-shadow: 0 0 4vw #5c4033, 0 0 6vw #8b6f47; }
.retro-mode .player { color: #d4a17d; text-shadow: 0 0 2vw #5c4033, 0 0 3vw #8b6f47; }
.retro-mode .emoji { text-shadow: 0 0 2vw #5c4033, 0 0 3vw #8b6f47; }

.ocean-mode {
    background: linear-gradient(135deg, #00334a, #006d9c, #1a87a0);
}
.ocean-mode .container { background: rgba(0, 51, 74, 0.95); }
.ocean-mode .game-title { color: #1a87a0; text-shadow: 0 0 4vw #00334a, 0 0 6vw #006d9c; }
.ocean-mode .player { color: #006d9c; text-shadow: 0 0 2vw #00334a, 0 0 3vw #1a87a0; }
.ocean-mode .emoji { text-shadow: 0 0 2vw #00334a, 0 0 3vw #006d9c; }

.winter-mode {
    background: linear-gradient(135deg, #3b82f6, #ffffff, #6ee7b7);
}
.winter-mode .container { background: rgba(59, 130, 246, 0.95); }
.winter-mode .game-title { color: #ffffff; text-shadow: 0 0 4vw #3b82f6, 0 0 6vw #6ee7b7; }
.winter-mode .player { color: #6ee7b7; text-shadow: 0 0 2vw #3b82f6, 0 0 3vw #ffffff; }
.winter-mode .emoji { text-shadow: 0 0 2vw #3b82f6, 0 0 3vw #6ee7b7; }

.summer-mode {
    background: linear-gradient(135deg, #f59e0b, #f97316, #f472b6);
}
.summer-mode .container { background: rgba(245, 158, 11, 0.95); }
.summer-mode .game-title { color: #f97316; text-shadow: 0 0 4vw #f59e0b, 0 0 6vw #f472b6; }
.summer-mode .player { color: #f472b6; text-shadow: 0 0 2vw #f59e0b, 0 0 3vw #f97316; }
.summer-mode .emoji { text-shadow: 0 0 2vw #f59e0b, 0 0 3vw #f472b6; }

.color-mode {
    background: linear-gradient(135deg, #ec4899, #34d399, #3b82f6);
}
.color-mode .container { background: rgba(236, 72, 153, 0.95); }
.color-mode .game-title { color: #34d399; text-shadow: 0 0 4vw #ec4899, 0 0 6vw #3b82f6; }
.color-mode .player { color: #3b82f6; text-shadow: 0 0 2vw #ec4899, 0 0 3vw #34d399; }
.color-mode .emoji { text-shadow: 0 0 2vw #ec4899, 0 0 3vw #3b82f6; }

.evening-mode {
    background: linear-gradient(135deg, #1e293b, #4c1d95, #7c3aed);
}
.evening-mode .container { background: rgba(30, 41, 59, 0.95); }
.evening-mode .game-title { color: #a78bfa; text-shadow: 0 0 4vw #4c1d95, 0 0 6vw #7c3aed; }
.evening-mode .player { color: #a78bfa; text-shadow: 0 0 2vw #4c1d95, 0 0 3vw #7c3aed; }
.evening-mode .emoji { text-shadow: 0 0 2vw #4c1d95, 0 0 3vw #7c3aed; }

.halloween-mode {
    background: linear-gradient(135deg, #000000, #991b1b, #f97316);
}
.halloween-mode .container { background: rgba(0, 0, 0, 0.95); }
.halloween-mode .game-title { color: #f97316; text-shadow: 0 0 4vw #991b1b, 0 0 6vw #000000; }
.halloween-mode .player { color: #f97316; text-shadow: 0 0 2vw #991b1b, 0 0 3vw #000000; }
.halloween-mode .emoji { text-shadow: 0 0 2vw #991b1b, 0 0 3vw #f97316; }

.neon-mode {
    background: linear-gradient(135deg, #0f0f0f, #00ffcc, #ff00ff);
}
.neon-mode .container { background: rgba(15, 15, 15, 0.95); }
.neon-mode .game-title { color: #00ffcc; text-shadow: 0 0 6vw #00ffcc, 0 0 8vw #ff00ff; }
.neon-mode .player { color: #ff00ff; text-shadow: 0 0 3vw #00ffcc, 0 0 5vw #ff00ff; }
.neon-mode .emoji { text-shadow: 0 0 3vw #00ffcc, 0 0 5vw #ff00ff; }

.time-mode {
    background: linear-gradient(135deg, #1a1a1a, #ffd700, #ff4500);
}
.time-mode .container { background: rgba(26, 26, 26, 0.95); }
.time-mode .game-title { color: #ffd700; text-shadow: 0 0 6vw #ffd700, 0 0 8vw #ff4500; }
.time-mode .player { color: #ff4500; text-shadow: 0 0 3vw #ffd700, 0 0 5vw #ff4500; }
.time-mode .emoji { text-shadow: 0 0 3vw #ffd700, 0 0 5vw #ff4500; }

.food-mode {
    background: linear-gradient(135deg, #ff6f61, #d94a4a, #8c2f39);
}
.food-mode .container { background: rgba(255, 111, 97, 0.95); }
.food-mode .game-title { color: #d94a4a; text-shadow: 0 0 4vw #ff6f61, 0 0 6vw #8c2f39; }
.food-mode .player { color: #8c2f39; text-shadow: 0 0 2vw #ff6f61, 0 0 3vw #d94a4a; }
.food-mode .emoji { text-shadow: 0 0 2vw #ff6f61, 0 0 3vw #8c2f39; }

.animals-mode {
    background: linear-gradient(135deg, #4a90e2, #50e3c2, #b8e986);
}
.animals-mode .container { background: rgba(74, 144, 226, 0.95); }
.animals-mode .game-title { color: #50e3c2; text-shadow: 0 0 4vw #4a90e2, 0 0 6vw #b8e986; }
.animals-mode .player { color: #b8e986; text-shadow: 0 0 2vw #4a90e2, 0 0 3vw #50e3c2; }
.animals-mode .emoji { text-shadow: 0 0 2vw #4a90e2, 0 0 3vw #b8e986; }

.vehicles-mode {
    background: linear-gradient(135deg, #2e3192, #1bffff, #ff00d4);
}
.vehicles-mode .container { background: rgba(46, 49, 146, 0.95); }
.vehicles-mode .game-title { color: #1bffff; text-shadow: 0 0 4vw #2e3192, 0 0 6vw #ff00d4; }
.vehicles-mode .player { color: #ff00d4; text-shadow: 0 0 2vw #2e3192, 0 0 3vw #1bffff; }
.vehicles-mode .emoji { text-shadow: 0 0 2vw #2e3192, 0 0 3vw #ff00d4; }

.faces-mode {
    background: linear-gradient(135deg, #ffcccb, #ffebcd, #e6e6fa);
}
.faces-mode .container { background: rgba(255, 204, 203, 0.95); }
.faces-mode .game-title { color: #ffebcd; text-shadow: 0 0 4vw #ffcccb, 0 0 6vw #e6e6fa; }
.faces-mode .player { color: #e6e6fa; text-shadow: 0 0 2vw #ffcccb, 0 0 3vw #ffebcd; }
.faces-mode .emoji { text-shadow: 0 0 2vw #ffcccb, 0 0 3vw #e6e6fa; }

@media (min-width: 1024px) {
    body {
        display: none;
    }
    body:after {
        content: 'This page is only available on mobile devices!';
        display: block;
        color: #f0f2ff;
        text-align: center;
        font-size: 5vw;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 480px) {
    .container { padding: 5vw; }
    h1 { font-size: 8vw; }
    button { font-size: 4vw; padding: 3vw 5vw; }
    .nav-button { font-size: 4vw; padding: 3vw 5vw; }
    .login-input { font-size: 4vw; padding: 2.5vw; }
    .password-toggle { font-size: 4.5vw; right: 3.5vw; }
    .player { width: 12vw; height: 12vw; line-height: 12vw; font-size: 7vw; bottom: 3vw; }
    .bigger-player { width: 18vw; height: 18vw; line-height: 18vw; font-size: 10vw; }
    .second-player { width: 12vw; height: 12vw; line-height: 12vw; font-size: 7vw; bottom: 3vw; }
    .mini-player { width: 6vw; height: 6vw; line-height: 6vw; font-size: 3.5vw; bottom: 3vw; }
    .emoji { font-size: 7vw; }
    .game-title { font-size: 4.5vw; }
    .stat-item { font-size: 3.5vw; margin: 0 1.5vw; }
    .index-table th, .index-table td { font-size: 3.5vw; padding: 1.5vw; }
    .modes-tab-button { font-size: 3vw; padding: 1.5vw 3vw; }
    .index-tab-button { font-size: 3vw; padding: 1.5vw 3vw; }
    .language-selector { font-size: 3.5vw; }
    .language-selector select { font-size: 3.2vw; padding: 1.5vw 3vw; }
}