/* ============================================
   АТОМИКС — ОКНО ВЫБОРА ИГРЫ (v7.34)
   Стили общего окна с двумя режимами.

   ⚠️ ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ. Раньше эти стили лежали в
   landing.css. Окно открывается и на лендинге, и в кабинете,
   но кабинет landing.css НЕ подключает — поэтому в кабинете
   окно появлялось БЕЗ стилей и было невидимым: кнопка «Играть»
   выглядела нерабочей (владелец: «ничего не происходит»).
   Теперь файл общий для обеих страниц.
   ============================================ */
/* ============================================================
   ВЫБОР ИГРЫ (v7.32)
   Модальное окно с двумя режимами. Лежит ВНЕ #landing
   (прямой ребёнок body), поэтому pointer-events: none его
   не касается — события работают как обычно.
   ============================================================ */
.mode-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 12, 20, 0.9);
    backdrop-filter: blur(7px);
    overflow-y: auto;
    animation: modeFade 0.22s ease;
}
.mode-modal[hidden] { display: none; }
@keyframes modeFade { from { opacity: 0; } to { opacity: 1; } }

.mode-modal-box {
    position: relative;
    width: 100%;
    /* Расширено под третью карточку (v7.40): было 780px на две.
       При 780px три карточки в ряд стали бы по ~240px — текст
       описания в них начал бы рваться по слогам. */
    max-width: 1060px;
    max-height: 94vh;
    overflow-y: auto;
    padding: 30px 32px 32px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(10, 34, 44, 0.99), rgba(6, 22, 30, 0.99));
    border: 1px solid rgba(120, 220, 255, 0.3);
    box-shadow: 0 0 80px rgba(77, 255, 204, 0.16);
    text-align: center;
    animation: modePop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modePop {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.mode-modal-close {
    position: absolute;
    top: 14px; right: 16px;
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(120, 220, 255, 0.25);
    background: rgba(10, 30, 42, 0.85);
    color: rgba(200, 230, 255, 0.85);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}
.mode-modal-close:hover {
    color: #fff;
    border-color: rgba(77, 255, 204, 0.7);
    background: rgba(20, 50, 68, 0.95);
}

.mode-modal-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 900;
    letter-spacing: 1px;
    color: #4dffcc;
    text-shadow: 0 0 26px rgba(77, 255, 204, 0.55);
    margin-bottom: 6px;
}
.mode-modal-sub {
    font-size: 13px;
    color: rgba(180, 220, 240, 0.7);
    margin-bottom: 24px;
}

.mode-cards {
    display: grid;
    /* Три режима в ряд (v7.40): было два. Карточки узкие,
       поэтому минимальная ширина ограничена — иначе на ноутбуке
       они станут нечитаемыми и сетка сама перенесёт третью вниз. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
}

/* -------- Карточка режима -------- */
.mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px 20px;
    border-radius: 16px;
    background: rgba(8, 28, 36, 0.7);
    border: 1px solid rgba(120, 220, 255, 0.18);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.mode-card:hover {
    transform: translateY(-4px);
    border-color: var(--mode-color, #4dffcc);
    box-shadow: 0 10px 36px color-mix(in srgb, var(--mode-color, #4dffcc) 28%, transparent);
}
/* Мягкое свечение в углу — цвет режима */
.mode-card-glow {
    position: absolute;
    top: -50%; right: -30%;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mode-glow, rgba(77,255,204,0.28)), transparent 70%);
    pointer-events: none;
}

.mode-card-arcade {
    --mode-color: #4dffcc;
    --mode-glow: rgba(77, 255, 204, 0.3);
}
.mode-card-memory {
    --mode-color: #cc88ff;
    --mode-glow: rgba(204, 136, 255, 0.32);
}
/* Квизы (v7.40) — третья карточка. Цвет янтарный: он не занят
   двумя другими режимами и читается как «вопрос/внимание». */
.mode-card-quiz {
    --mode-color: #ffb84d;
    --mode-glow: rgba(255, 184, 77, 0.32);
}

/* Картинка режима (v7.40) — вместо эмодзи.
   Владелец: «размеры отображения сделай примерно такими же
   как сейчас у тебя там иконки» — прежнее эмодзи было 40px.
   Картинки разной ориентации: mozg.png и kviz.png вертикальные
   (3:4), «6 (1).png» горизонтальная. Поэтому НЕ задаём жёстко
   и ширину, и высоту — иначе одну из них сплющит.
   Задаём высоту и max-width, а размер считает браузер. */
.mode-card-img {
    display: block;
    /* v7.41: увеличено на 50% (было 56px). Просьба владельца:
       «сделай изображения в модальном окне выбора режима игры
       на 50 процентов крупнее».
       56 × 1.5 = 84.
       Задаём ВЫСОТУ, ширину считает браузер: картинки разной
       ориентации, жёсткая ширина сплющила бы одну из них. */
    height: 84px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Картинки — крупные PNG на светлом фоне, поэтому в тёмной
       карточке им нужна лёгкая тень, чтобы не сливались */
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

.mode-card-icon {
    font-size: 40px;
    line-height: 1;
}

/* ⚠️ ИКОНКА «НАЙДИ ПАРУ» КРУПНЕЕ ОСТАЛЬНЫХ НА 15% (v7.79).
   Владелец: «в модальном окне выбора режима игры увеличить иконку
   найди пару на 15 процентов».

   ⚠️ ПОЧЕМУ ОТДЕЛЬНЫМ ПРАВИЛОМ, А НЕ ПРАВКОЙ .mode-card-img.
   .mode-card-img — общий класс для ВСЕХ трёх карточек (аркада,
   память, квизы). Если поднять высоту там, увеличатся все три
   иконки, а просили только «Найди пару». Поэтому целимся в карточку:
   .mode-card-memory.

   Расчёт: базовая высота 84px × 1.15 = 96.6 → округляем до 97px.
   ⚠️ Округление ВВЕРХ (97, а не 96): при 96 прирост 14.3%, при 97 —
   15.5%. Ближе к 15% именно 97.
   ⚠️ Ширину НЕ задаём: картинки режимов разной ориентации
   (mozg.png вертикальная 3:4), жёсткая ширина сплющила бы её. */
.mode-card-memory .mode-card-img {
    height: 97px;
}
.mode-card-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #eaf4fb;
}
.mode-card-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mode-color, #4dffcc);
    border: 1px solid color-mix(in srgb, var(--mode-color, #4dffcc) 45%, transparent);
    background: color-mix(in srgb, var(--mode-color, #4dffcc) 12%, transparent);
}
.mode-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(200, 230, 255, 0.78);
    /* Описания разной длины — выравниваем кнопки по низу */
    flex: 1 1 auto;
}
.mode-card-feats {
    list-style: none;
    padding: 0;
    margin: 2px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mode-card-feats li {
    font-size: 12px;
    color: rgba(170, 215, 240, 0.72);
    padding-left: 18px;
    position: relative;
}
.mode-card-feats li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--mode-color, #4dffcc);
    font-weight: 700;
}

/* -------- Плашка «Скоро» (v7.40) --------
   У режима, которого ещё нет, вместо кнопки «Играть» стоит эта
   плашка. Она занимает ТУ ЖЕ высоту, что кнопка (padding 13px),
   иначе карточки в ряду оказались бы разной высоты и ряд выглядел
   бы сломанным.
   Специально НЕ похожа на кнопку: приглушённый фон, пунктирная
   рамка и курсор по умолчанию. Игрок не должен пытаться нажать. */
.mode-soon {
    margin-top: 6px;
    padding: 13px 0;
    width: 100%;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--mode-color, #4dffcc) 55%, transparent);
    border: 1px dashed rgba(255, 184, 77, 0.5);
    background: color-mix(in srgb, var(--mode-color, #4dffcc) 10%, transparent);
    background: rgba(255, 184, 77, 0.08);
    color: var(--mode-color, #ffb84d);
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: center;
    cursor: default;
}
.mode-soon-icon { margin-right: 6px; }

/* Карточка будущего режима: чуть приглушена, но НЕ серая —
   игрок должен видеть, что это полноценный будущий режим,
   а не отключённая заглушка. */
.mode-card.is-soon .mode-card-img,
.mode-card.is-soon .mode-card-icon {
    opacity: 0.85;
}
.mode-card.is-soon .mode-card-tag {
    border-color: rgba(255, 184, 77, 0.45);
    background: rgba(255, 184, 77, 0.1);
}
/* Наведение на будущую карточку не должно обещать клик:
   подсветка мягче, без подъёма */
.mode-card.is-soon:hover {
    transform: none;
}

/* -------- Красивая кнопка «Играть» --------
   Градиент цвета режима, свечение и «проезд» блика при наведении. */
.mode-play {
    position: relative;
    margin-top: 6px;
    padding: 13px 0;
    width: 100%;
    border: none;
    border-radius: 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #04141a;
    background: linear-gradient(135deg,
        var(--mode-color, #4dffcc),
        color-mix(in srgb, var(--mode-color, #4dffcc) 55%, #ffffff));
    box-shadow: 0 4px 20px color-mix(in srgb, var(--mode-color, #4dffcc) 40%, transparent);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.mode-play:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--mode-color, #4dffcc) 62%, transparent);
}
.mode-play:active { transform: translateY(0) scale(0.99); }

/* Блик, проезжающий по кнопке */
.mode-play::after {
    content: '';
    position: absolute;
    top: 0; left: -70%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
}
.mode-play:hover::after { left: 115%; }

.mode-play-icon { margin-right: 6px; }

/* -------- Адаптив окна выбора --------
   Три карточки в ряд помещаются только на широком экране.
   На планшете — две в ряд (третья переносится), на телефоне —
   в столбик. Так каждая карточка остаётся читаемой. */
@media (max-width: 1000px) {
    .mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .mode-modal { padding: 12px; }
    .mode-modal-box { padding: 24px 18px 22px; border-radius: 18px; }
    /* Одна колонка: рядом карточки станут слишком узкими */
    .mode-cards { grid-template-columns: 1fr; gap: 14px; }
    .mode-card { padding: 18px 16px 16px; }
    .mode-card-icon { font-size: 32px; }
    /* Тоже +50% (было 44px). Владелец просил увеличить картинки
       в модалке — на телефоне они уменьшаются, но остаются
       крупнее прежних: иначе на большом экране картинки
       выросли бы, а на маленьком остались мелкими. */
    .mode-card-img { height: 66px; }
    .mode-card-name { font-size: 18px; }
    .mode-card-desc { font-size: 12px; }
    .mode-play { font-size: 14px; padding: 12px 0; }
    /* Плашка «Скоро» держит ту же высоту, что кнопка */
    .mode-soon { font-size: 13px; padding: 12px 0; }
}

/* color-mix поддержан только с 2023 года: запасные цвета для
   свечения и кнопок, иначе в старом браузере они пропадут. */
.mode-card:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 36px color-mix(in srgb, var(--mode-color, #4dffcc) 28%, transparent);
}
.mode-play {
    background: var(--mode-color, #4dffcc);
    background: linear-gradient(135deg,
        var(--mode-color, #4dffcc),
        color-mix(in srgb, var(--mode-color, #4dffcc) 55%, #ffffff));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--mode-color, #4dffcc) 40%, transparent);
}
.mode-play:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--mode-color, #4dffcc) 62%, transparent);
}
.mode-card-tag { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); }