* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Courier New', monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            transition: all 0.3s ease;
            user-select: none;
        }

        .container {
            text-align: center;
            padding: 20px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        }

        .header {
            margin-bottom: 30px;
        }

        .title {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 0 0 20px currentColor;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 20px currentColor; }
            to { text-shadow: 0 0 30px currentColor, 0 0 40px currentColor; }
        }

        .theme-selector {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .theme-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-family: inherit;
            font-weight: bold;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .theme-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }

        .game-info {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .info-box {
            padding: 15px 25px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .info-label {
            font-size: 0.8rem;
            opacity: 0.8;
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 20px;
            border-radius: 15px;
            margin: 20px auto;
            width: 360px;
            height: 360px;
            backdrop-filter: blur(10px);
            box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
            place-items: center;
        }

        .cell {
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4rem;
            font-weight: bold;
            transition: all 0.15s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            width: 100%;
            height: 100%;
            min-height: 100px;
            min-width: 100px;
            cursor: pointer;
            animation: appear 0.2s ease;
        }

        .cell:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        .cell.filled {
            cursor: not-allowed;
        }

        .cell.filled:hover {
            transform: none;
        }

        .cell.winner {
            animation: winner-glow 1s ease-in-out infinite alternate;
        }

        @keyframes appear {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        @keyframes winner-glow {
            from { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
            to { box-shadow: 0 0 30px currentColor, 0 5px 15px rgba(0,0,0,0.2); }
        }

        .controls {
            margin-top: 20px;
        }

        .new-game-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-family: inherit;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .new-game-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        .instructions {
            margin-top: 20px;
            opacity: 0.7;
            font-size: 0.9rem;
        }

        .game-status {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 20px;
            min-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Lofi Theme */
        .lofi {
            background: linear-gradient(135deg, #2c1810, #1a0f08);
            color: #d4a574;
        }

        .lofi .container {
            background: rgba(44, 24, 16, 0.8);
            border: 1px solid #3d2a1c;
        }

        .lofi .theme-btn {
            background: rgba(212, 165, 116, 0.2);
            color: #d4a574;
            border: 1px solid #3d2a1c;
        }

        .lofi .theme-btn.active {
            background: rgba(212, 165, 116, 0.4);
            box-shadow: 0 0 20px rgba(212, 165, 116, 0.3);
        }

        .lofi .info-box {
            background: rgba(61, 42, 28, 0.6);
            border: 1px solid #3d2a1c;
        }

        .lofi .game-board {
            background: rgba(26, 15, 8, 0.8);
            border: 1px solid #3d2a1c;
        }

        .lofi .cell {
            background: rgba(61, 42, 28, 0.8);
            color: #d4a574;
            border: 1px solid #3d2a1c;
        }

        .lofi .new-game-btn {
            background: rgba(212, 165, 116, 0.2);
            color: #d4a574;
            border: 1px solid #3d2a1c;
        }

        /* B&W Theme */
        .bw {
            background: linear-gradient(135deg, #1a1a1a, #000000);
            color: #ffffff;
        }

        .bw .container {
            background: rgba(26, 26, 26, 0.8);
            border: 1px solid #444;
        }

        .bw .theme-btn {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border: 1px solid #444;
        }

        .bw .theme-btn.active {
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        .bw .info-box {
            background: rgba(68, 68, 68, 0.6);
            border: 1px solid #444;
        }

        .bw .game-board {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid #444;
        }

        .bw .cell {
            background: rgba(68, 68, 68, 0.8);
            color: #ffffff;
            border: 1px solid #444;
        }

        .bw .new-game-btn {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border: 1px solid #444;
        }

        /* Cyber Theme */
        .cyber {
            background: linear-gradient(135deg, #0a0a0a, #001122);
            color: #00ddff;
        }

        .cyber .container {
            background: rgba(10, 10, 10, 0.8);
            border: 1px solid #00ddff;
            box-shadow: 0 0 30px rgba(0, 221, 255, 0.2);
        }

        .cyber .theme-btn {
            background: rgba(0, 221, 255, 0.1);
            color: #00ddff;
            border: 1px solid #00ddff;
        }

        .cyber .theme-btn.active {
            background: rgba(0, 221, 255, 0.2);
            box-shadow: 0 0 20px rgba(0, 221, 255, 0.5);
        }

        .cyber .info-box {
            background: rgba(0, 17, 34, 0.6);
            border: 1px solid #00ddff;
            box-shadow: 0 0 15px rgba(0, 221, 255, 0.2);
        }

        .cyber .game-board {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid #00ddff;
            box-shadow: inset 0 0 30px rgba(0, 221, 255, 0.1);
        }

        .cyber .cell {
            background: rgba(0, 17, 34, 0.8);
            color: #00ddff;
            border: 1px solid #00ddff;
            box-shadow: 0 0 10px rgba(0, 221, 255, 0.2);
        }

        .cyber .new-game-btn {
            background: rgba(0, 221, 255, 0.1);
            color: #00ddff;
            border: 1px solid #00ddff;
        }

        @media (max-width: 480px) {
            .game-board {
                width: 300px;
                height: 300px;
            }
            .cell {
                font-size: 3rem;
                min-height: 80px;
                min-width: 80px;
            }
            .title {
                font-size: 2rem;
            }
        }