/* === Базовые стили === */
    * {
        box-sizing: border-box;
    }
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        font-family: Verdana, Arial, sans-serif;
        background: #fff;
        color: #414b55;
        transition: background 0.3s, color 0.3s;
    }
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
    }
    .center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        max-width: 600px;
    }
    /* === Круг / Игровое поле === */
    .circle {
        /* Единый размер: шрифт «404» считается от него и всегда влезает */
        --size: min(260px, 70vmin);
        position: relative;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: #c0c6cc;
        cursor: pointer;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
        overflow: hidden;
        flex-shrink: 0;
        touch-action: none;
    }
    .circle.square {
        --size: min(400px, 92vmin);
        border-radius: 0;
        background: #050505;
    }
    .circle_text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--size) * 0.36);
        font-weight: 700;
        white-space: nowrap;
        color: #fff;
        transition: opacity 0.3s ease;
        pointer-events: none;
        line-height: 1;
        text-shadow: none;
    }
    /* === Игровой контейнер === */
    #game-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        background: #4ec0ca;
        overflow: hidden;
    }
    #game-container canvas {
        display: block;
        width: 100%;
        height: 100%;
        background: #4ec0ca;
        image-rendering: pixelated;
    }
    #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.55);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
        cursor: pointer;
    }
    .overlay-text {
        font-size: 24px;
        text-align: center;
        color: #fff;
        text-shadow: 0 0 10px #ffcc00;
        font-family: 'Courier New', monospace;
        user-select: none;
        padding: 10px;
        line-height: 1.5;
    }
    .overlay-text .highlight {
        color: #ffcc00;
        text-shadow: 0 0 15px #ffcc00;
    }
    .score-container {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 26px;
        color: #fff;
        font-family: 'Courier New', monospace;
        text-shadow: 0 0 10px #000, 2px 2px 0 #000;
        z-index: 20;
        pointer-events: none;
        display: none;
    }
    .score-container .high-score {
        color: #ffcc00;
        text-shadow: 0 0 15px #ffcc00;
        margin-left: 15px;
        font-size: 20px;
    }
    /* === Текст под кругом === */
    .text {
        margin-top: 20px;
        font-size: 26px;
        line-height: 40px;
        padding: 0 10px;
        white-space: nowrap;
    }

    /* === ТЁМНАЯ ТЕМА === */
    @media (prefers-color-scheme: dark) {
        body {
            background: #1a1a1a;
            color: #ccc;
        }
        .circle {
            background: #555;
        }
        .text {
            color: #ddd;
        }
    }

    /* === АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ === */
    @media (max-width: 768px) {
        body {
            padding: 10px;
        }
        .center {
            max-width: 100%;
        }
        .circle {
            --size: min(300px, 60vmin);
        }
        .circle.square {
            --size: min(400px, 90vmin);
        }
        .overlay-text {
            font-size: 4vmin;
        }
        .score-container {
            font-size: 4vmin;
            top: 5%;
        }
        .score-container .high-score {
            font-size: 3.5vmin;
            margin-left: 10px;
        }
        .text {
            font-size: 3.5vmin;
            line-height: 1.4;
            margin-top: 15px;
            white-space: normal;
        }
    }
    @media (max-width: 400px) {
        .circle {
            --size: min(260px, 75vmin);
        }
        .circle.square {
            --size: min(360px, 94vmin);
        }
    }