/* Общая область */
/* //////////////////// */
.rgp-wrapper {
    width: 100%;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    align-items: center;
}

/* Сетка */
.rgp-grid {
    display: grid;
    gap: 6px;
    margin: auto;
    flex: none;
    justify-content: center;
    align-content: center;
    margin-top: 15px;
}

/* Клетка */
.rgp-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition:
        transform .35s,
        background .35s,
        opacity .35s;
    font-size: clamp(12px, 2vw, 34px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.rgp-cell-hide {

    animation: rgpHide .28s ease forwards;

}

@keyframes rgpHide {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    60% {
        transform: scale(.82);
        opacity: 1;
    }

    100% {
        transform: scale(.15);
        opacity: 0;
    }

}

.rgp-cell-error {

    animation: rgpWrong .35s ease;

}

@keyframes rgpWrong {

    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6%);
    }

    40% {
        transform: translateX(6%);
    }

    60% {
        transform: translateX(-4%);
    }

    80% {
        transform: translateX(4%);
    }

    100% {
        transform: translateX(0);
    }

}

.rgp-cell-error-color {
    background: #d93025 !important;
}

.rgp-cell-next {
    box-shadow:
        0 0 10px rgba(255, 255, 255, .9),
        0 0 20px rgba(255, 255, 255, .5);
    animation: rgpPulse 1s infinite;
}

@keyframes rgpPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }

}

/* Анимация */
.rgp-animate {
    transform: scale(.88);
    opacity: .6;
}

/* ---------- Модальное окно ---------- */
.rgp-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.rgp-modal.active {
    display: flex;
}

.rgp-option input[type=range] {
    width: 100%;
}

.rgp-font-scale-value {
    display: block;
    margin-top: 10px;
}

.rgp-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.rgp-modal-actions button {
    flex: 1;
}

/* ===========================
   THEMES
=========================== */

[data-theme="light"] {
    --bg: #f6f6f6;
    --panel: #ffffff;
    --text: #222222;
}

html,
body {
    background: var(--bg) !important;
    color: var(--text);
    transition:
        background .25s,
        color .25s;
}

.wp-site-blocks,
.site,
.site-content {
    background: var(--bg) !important;
    color: var(--text);
    transition:
        background .25s,
        color .25s;
}

.rgp-tool-btn {
    background: var(--panel);
    color: var(--text);
}

.rgp-cell {
    color: var(--text);
}

/* ==========================================
   Theme
========================================== */

:root {
    --bg: #ffffff;
    --panel: #f5f5f5;
    --icon: #444;
    --icon-bg: #f4f4f4;
    --text: #333;
    --modal-bg: #ffffff;
    --modal-border: #d6d6d6;
}

[data-theme="dark"] {
    --bg: #1e1e1e;
    /* --panel: #2b2b2b; */
    --panel: #2b2b2bab;
    --icon: #d9d9d9;
    --icon-bg: #3a3a3a;
    --text: #efefef;
    /* --modal-bg: #2b2b2b; */
    --modal-bg: #2b2b2bba;
    --modal-border: #505050;
}

body {
    background: var(--bg);
    color: var(--text);
}

.rgp-modal-window h2,
.rgp-modal-window label,
.rgp-modal-window span,
.rgp-modal-window p {
    color: var(--text);
    transition: color .25s;
}

.rgp-modal-window input[type="range"] {
    accent-color: #4b8cff;
}

.rgp-modal-window input[type="number"] {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--modal-border);
}

.rgp-outline-width-value {
    display: block;
    margin-top: 8px;
}

.rgp-option input[type="color"] {
    width: 70px;
    height: 40px;
    cursor: pointer;
}

/* ////////// */
/* =====================================
   MODAL
===================================== */

.rgp-modal-window {
    width: min(620px, 95vw);
    max-height: 90vh;
    /* overflow-y: auto;
    overflow-x: hidden; */
    padding: 24px;
    position: relative;
    border-radius: 18px;
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    backdrop-filter: blur(12px);
    animation: modalAppear .22s ease;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .35);
    /* scrollbar-width: thin;
    scrollbar-color: #8b8b8b transparent; */
}

/* Chrome / Edge */

.rgp-modal-window::-webkit-scrollbar-corner {
    background: transparent;
}

.rgp-modal-window h2 {
    margin: 0 0 20px;
    text-align: center;
}

/* список настроек */

.rgp-settings-grid {
    display: grid;
    gap: 18px;
}

/* карточка настройки */

.rgp-option {
    background: var(--panel);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--modal-border);
    transition: .2s;
}

.rgp-option:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.08);
}

.rgp-option label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
}

/* строка с числом справа */

.rgp-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rgp-option-row input[type="range"] {
    flex: 1;
}

/* значения */

.rgp-value {
    min-width: 60px;
    text-align: right;
    font-weight: bold;
}

/* color picker */

.rgp-option input[type="color"] {
    width: 80px;
    height: 42px;
    border: none;
    background: none;
    cursor: pointer;
}

/* checkbox */

.rgp-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* кнопка закрытия */

.rgp-close-modal,
.rgp-save-settings,
.rgp-reset-settings {
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: #4b8cff;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

/* ----- iOS scroll ----- */
@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(15px) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* мобильная версия */

@media (max-width: 600px) {

    .rgp-modal-window {
        padding: 16px;
        border-radius: 14px;
    }

    .rgp-option {
        padding: 12px;
    }

    .rgp-value {
        min-width: 45px;
        font-size: 14px;
    }
}

.simplebar-scrollbar::before {
    border-radius: 999px;
    opacity: .35;
    left: 2px;
    right: 2px;
    border-radius: 999px;
    background: rgba(120, 120, 120, .55);
    transition:
        opacity .2s,
        background .2s,
        transform .2s;
}

.rgp-modal-window:hover .simplebar-scrollbar::before {
    opacity: .5;
}

.simplebar-scrollbar:hover::before {
    background: rgba(90, 90, 90, .9);
    transform: scaleX(1.15);
}

.simplebar-track.simplebar-vertical {
    width: 10px;
    right: -20px;
    top: 2px;
    bottom: 2px;
}

.simplebar-scrollbar {
    width: 10px;
}

.simplebar-track {
    right: 6px;
}

/* ********* */
.rgp-modal-window .simplebar-mask {
    border-radius: 18px;
}

.rgp-modal-window .simplebar-content-wrapper {
    border-radius: 18px;
}

.rgp-modal-window .simplebar-content {
    padding-right: 10px;
}

.rgp-modal-scroll {
    max-height: 80vh;
}

/* Запрет прокрутки страницы при открытом модальном окне */

body.rgp-modal-open {
    overflow: hidden !important;
    touch-action: none;
}

/* ================================ */
/* Particles                        */
/* ================================ */

.rgp-particle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    z-index: 9999;
}

/* ================================= */
/* Finish Screen                     */
/* ================================= */

.rgp-finish-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: rgba(0, 0, 0, .78); */
    background: rgb(128 211 162 / 78%);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .25s ease,
        visibility .25s ease;
    z-index: 30;
}

.rgp-finish-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.rgp-finish-box {
    text-align: center;
    animation: rgpFinishAppear .5s ease;
}

.rgp-finish-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 25px;
    color: white;
}

.rgp-finish-time {
    font-size: 72px;
    font-weight: 800;
    color: #4b8cff;
}

.rgp-game {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

@keyframes rgpFinishAppear {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rgp-wrapper {
    opacity: 0;
    transition: opacity .15s ease;
}

.rgp-wrapper.rgp-ready {
    opacity: 1;
}

/* --- Вращение при перемешивании */