* {
                box-sizing: border-box;
                -webkit-tap-highlight-color: transparent;
            }

            html,
            body {
                margin: 0;
                padding: 0;
                background: #f5f7fa;
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
                user-select: none;
                -webkit-user-select: none;
            }

            #wrapper {
                width: 90vw;
                max-width: 400px;
                margin: 24px auto;
                text-align: center;
            }

            h1 {
                margin: 0 0 6px 0;
                font-size: 2rem;
                font-weight: 900;
                letter-spacing: 0.02em;
            }

            .desc {
                font-size: 1.04rem;
                margin-bottom: 12px;
                color: #666;
                white-space: nowrap;
            }

            #modeSel {
                margin-bottom: 10px;
                display: flex;
                gap: 8px;
                justify-content: center;
            }

            .modebtn {
                padding: 0.45em 1.2em;
                border-radius: 1.5em;
                font-size: 1rem;
                font-weight: bold;
                border: none;
                cursor: pointer;
                background: #e4eaf7;
                color: #284c7b;
                transition:
                    background 0.12s,
                    color 0.12s;
            }

            .modebtn.active {
                background: #467be6;
                color: #fff;
            }

            #board {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                grid-template-rows: repeat(6, 1fr);
                gap: 4px;
                background: #3050a0;
                border-radius: 12px;
                padding: 6px;
                width: 100%;
                aspect-ratio: 7/6;
                margin: 0 auto 12px auto;
                touch-action: manipulation;
            }

            .cell {
                background: #e4eaf7;
                border-radius: 50%;
                width: 100%;
                aspect-ratio: 1/1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2rem;
                cursor: pointer;
                transition: background 0.12s;
            }

            .cell.filled {
                cursor: default;
            }

            #turn {
                margin-bottom: 10px;
                font-weight: bold;
                font-size: 1.1rem;
                letter-spacing: 0.02em;
            }

            #overMsg {
                font-size: 1.14rem;
                font-weight: bold;
                color: #e24a4a;
                margin: 18px 0 10px 0;
            }

            .btns {
                display: flex;
                gap: 8px;
                margin: 0 auto 0 auto;
                justify-content: center;
                flex-wrap: wrap;
                width: 100%;
            }

            .btn {
                flex: 1 1 42%;
                min-width: 98px;
                max-width: 180px;
                background: #467be6;
                color: #fff;
                border: none;
                border-radius: 1.5em;
                padding: 0.68em 0;
                font-size: 1rem;
                font-weight: 600;
                box-shadow: 0 2px 8px #17448c12;
                margin-bottom: 8px;
                cursor: pointer;
                transition: background 0.12s;
            }

            .btn:active {
                background: #2856ad;
            }

            #otherGames {
                width: 90%;
                max-width: 400px;
                margin: 20px auto 0 auto;
                background: #e6e8f2;
                border-radius: 1.4em;
                color: #365ca0;
                border: none;
                padding: 0.82em 0;
                font-size: 1rem;
                font-weight: bold;
                text-decoration: none;
                display: block;
                box-shadow: 0 1px 5px #bccbe822;
                letter-spacing: 0.03em;
            }