@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
            :root {
                --board-size: min(90vw, 480px);
                --cell-gap: calc(var(--board-size) / 13);
                --stone-size: calc(var(--cell-gap) * 0.7);
            }

            body {
                font-family: "Noto Sans", sans-serif;
                text-align: center;
                background: #f0ece3;
                margin: 0;
                padding: 0;
            }

            h1 {
                margin-bottom: 1rem;
                margin-top: 1rem;
                font-size: 1.8rem;
                color: #2c2c2c;
            }

            #board {
                position: relative;
                width: var(--board-size);
                height: var(--board-size);
                background-image: radial-gradient(#b88a44 20%, #deb887 80%);
                border: 4px solid #333;
                margin: 0 auto;
                touch-action: manipulation;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
                border-radius: 10px;
            }

            .grid-line {
                position: absolute;
                background: #000;
                pointer-events: none;
            }

            .h-line {
                height: 2px;
                width: 100%;
                opacity: 0.75;
            }

            .v-line {
                width: 2px;
                height: 100%;
                opacity: 0.75;
            }

            .cell {
                position: absolute;
                width: var(--cell-gap);
                height: var(--cell-gap);
                transform: translate(-50%, -50%);
                cursor: pointer;
            }

            .stone {
                width: var(--stone-size);
                height: var(--stone-size);
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow:
                    inset -2px -2px 4px rgba(0, 0, 0, 0.5),
                    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
                    0 0 4px rgba(0, 0, 0, 0.4);
                transition: transform 0.15s ease;
            }

            .stone:hover {
                transform: translate(-50%, -50%) scale(1.1);
            }

            .black {
                background: radial-gradient(circle at 30% 30%, #444, #000);
            }

            .white {
                background: radial-gradient(circle at 30% 30%, #fff, #ccc);
                border: 1px solid #999;
            }

            .highlight {
                box-shadow:
                    0 0 10px 4px gold,
                    0 0 10px 4px gold;
                z-index: 2;
            }

            #message {
                margin-top: 1rem;
                font-size: 1.1rem;
                color: #444;
            }

            button {
                margin-top: 1rem;
                padding: 10px 20px;
                font-size: 1rem;
                margin-right: 0.5rem;
                border: none;
                border-radius: 8px;
                background: #444;
                color: white;
                cursor: pointer;
                transition: background 0.2s ease;
            }

            button:hover {
                background: #222;
            }