/* Основной контейнер */
.gp-pasjansy {
    margin: 20px auto;
    padding: 0;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
/* Кнопки */
.gp-btn {
    /* Размеры для retina (470x130 / 2) */
    width: 235px;
    height: 65px;
    /* Центрирование */
    display: flex;
    margin: 0 auto;
    /* Фон-картинка */
    background-color: #f1e7d4;
    background-image: url('/wp-content/themes/gadanie-online/assets/images/knopka.webp');
    background-size: cover;
    background-position: center;
    /* Текст */
    color: #4a3828;
    font-size: 17px;
    font-weight: 400;
    /* Сброс */
    border: none;
    border-radius: 0;
    padding: 0 0 4px 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    align-items: center;
    justify-content: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.gp-btn:hover {
    transform: translateY(-2px);
}
.gp-btn:active {
    background-image: url('/wp-content/themes/gadanie-online/assets/images/knopka-1.webp');
    transform: translateY(2px);
}
#gp-restart {
    margin-top: 10px;
}
/* Краткое описание */
.gp-description {
    display: none;
    margin: 20px 0;
}
/* Контейнер с полем карт и переключателем */
.gp-wrap {
    display: none;
    max-width: 550px;
    margin: 20px auto;
    overflow: hidden;
}
/* Текст загрузки карт (ниже переключателя) */
.gp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #4a3828;
    font-size: 19px;
}
.gp-loading--hidden {
    display: none;
}
.gp-loading__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #d4c8b8;
    border-top-color: #4a3828;
    border-radius: 50%;
    animation: gp-spin 0.8s linear infinite;
}
@keyframes gp-spin {
    to { transform: rotate(360deg); }
}
/* поле с картами (оно же подложка) */
.gp-field {
    position: relative;
    max-width: 550px;
    margin: 0 auto;
    opacity: 0;
    overflow: hidden;
}
/* Фон-подложка растягивается точно под карты */
.gp-field::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gp-bg);
    background-size: 100% 100%;
    z-index: 0;
}
.gp-field--visible {
    opacity: 1;
    transition: opacity 0.5s linear;
}
.gp-row {
    display: flex;
    position: relative;
    z-index: 1;
}
/* Карта занимает 20% ширины (5 колонок), квадратная */
.gp-card {
    position: relative;
    width: 20%;
    aspect-ratio: 1;
}
/* Для сетки 4 колонки — 25% ширины */
.gp-field--cols-4 .gp-card {
    width: 25%;
}
/* это для дебага матриц */
.test {
    width: 50px;
    padding: 10px;
}
/* здесь сама картинка карты */
.gp-card__img {
    position: absolute;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin-top: 0;
    opacity: 1;
    transition: margin-top 0.5s ease, opacity 0.3s ease;
}
/* Скрытое состояние карты до раздачи */
.gp-card__img--start {
    margin-top: -20px;
    opacity: 0;
    display: none;
}
.gp-rotate {
    display: none;
    height: 100%;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 20;
    visibility: hidden;
}
.gp-rotate--left {
    left: 0;
    background: var(--gp-rotate-left) no-repeat scroll left top transparent;
}
.gp-rotate--right {
    right: 0;
    background: var(--gp-rotate-right) no-repeat scroll right top transparent;
}
/* блок с толкованиями */
.gp-result {
    display: none;
}
/* карточка результата (совпавшие / разорванные) */
.gp-result__card {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    margin-top: 15px;
    box-shadow: 0 2px 8px rgba(74, 56, 40, 0.1);
    transition: background 0.2s ease;
}
.gp-result__card:hover {
    background: rgba(255, 255, 255, 0.5);
}
/* заголовок карточки с акцентной полосой */
.gp-result__title {
    font-weight: 600;
    font-size: 18px;
    color: #6b4423;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gp-result__title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: #a67c52;
    border-radius: 2px;
    flex-shrink: 0;
}
/* контент карточки */
.gp-result__content {
    padding-left: 12px;
}
/* подсказка внизу карточки */
.gp-result__tip {
    color: #8a7a6a;
    font-size: 15px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0d6c8;
}
/* толкование */
.gp-interpr {
    display: none;
    padding: 10px;
}
/* заголовок толкования */
.gp-interpr__title {
    font-weight: 600;
}
/* индикатор нового толкования — зелёная полоса слева */
.gp-interpr--new {
    position: relative;
}
.gp-interpr--new::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background: #37c730;
    animation: gp-bar-fade 4s ease-out forwards;
}
@keyframes gp-bar-fade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
/* Переключатель автоскролла */
.gp-toggle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.gp-toggle span {
    font-size: 15px;
    color: #4a3828;
}
.gp-toggle input {
    position: absolute;
    opacity: 0;
}
.gp-toggle label {
    display: block;
    width: 40px;
    height: 22px;
    background: #f5ebe0;
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #d4c8b8;
}
.gp-toggle label:before {
    content: '\2715';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 1px;
    top: 1px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #c9baa8;
    line-height: 18px;
    text-align: center;
}
.gp-toggle input:checked + label:before {
    content: '\2713';
    left: calc(100% - 19px);
    color: #3a9a3a;
    font-weight: bold;
}
.gp-card--rotating {
    transition: transform 0.3s linear;
}
@media (min-width:650px) {
    .gp-card:hover>.gp-rotate {
        display: block;
    }
}
/* Десктоп 700px+ — внешняя подложка-градиент */
@media (min-width:700px) {
    /* Родительский контейнер тоже должен показывать тень */
    .gp-wrap {
        overflow: visible;
        max-width: 570px; /* 550px карты + 10px padding с каждой стороны */
    }
    .gp-field {
        background: linear-gradient(135deg, #d4c4a8 0%, #e8dcc8 50%, #d4c4a8 100%);
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        overflow: visible;
        max-width: 570px; /* 550px карты + 10px padding с каждой стороны */
    }
    /* Картинка-подложка не заходит на padding (рамку) */
    .gp-field::before {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }
}
@media only screen and (max-width:650px) {
    /* размер стрелок поворота */
    .gp-rotate {
        background-size: 20px;
        display: block;
        opacity: 0;
        transition: opacity 2s linear;
    }
    .gp-card--is-rotating>.gp-rotate {
        transition: opacity 0.1s linear;
        opacity: 1;
    }
}
/* Мобильные до 440px — компактные отступы */
@media only screen and (max-width:440px) {
    .gp-result__card {
        padding: 10px 12px;
    }
    /* Убираем доп. отступ контента: итого 12px от края до текста */
    .gp-result__content {
        padding-left: 0;
    }
    /* Убираем полоску у заголовков */
    .gp-result__title::before {
        display: none;
    }
}