@charset "UTF-8";

/* ============================================================
   WORDLEPLAY — REDESIGN LAYER 2026
   Дополнительный слой поверх style.css. Освежает вид «в духе»
   текущего дизайна, ничего не ломая. Легко откатить — убрать
   <link> в elements/headcode.php.
   ============================================================ */

:root {
    /* Акцент (сохраняем текущий зелёный бренд) */
    --wp-green:        #00ac4a;
    --wp-green-600:    #00c853;
    --wp-green-700:    #009a41;
    --wp-green-soft:   rgba(0, 172, 74, 0.10);

    /* Нейтральная палитра */
    --wp-ink:          #14181f;
    --wp-ink-soft:     #55606f;
    --wp-line:         rgba(15, 23, 42, 0.08);
    --wp-surface:      #ffffff;
    --wp-bg:           #f7f8fa;

    /* Радиусы / тени / переходы */
    --wp-r-sm: 10px;
    --wp-r-md: 14px;
    --wp-r-lg: 20px;
    --wp-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
    --wp-shadow-2: 0 10px 30px rgba(15, 23, 42, .10);
    --wp-ease: cubic-bezier(.22, 1, .36, 1);
}

/* === ФON / БАЗА === */
body {
    background-color: var(--wp-bg);
    background-image:
        radial-gradient(1200px 500px at 50% -260px, rgba(0, 172, 74, .07), transparent 70%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--wp-ink);
}

/* Единая ширина «читаемого» контента чуть комфортнее */
.bg-half { padding: 26px 0; }

/* Общий вертикальный ритм секций на главной */
section + section { margin-top: 4px; }

/* ============================================================
   ШАПКА / КРОСС-ПРОМО ИГР — как gamestrip на quordly.org
   Горизонтальная полоса пилюль. На мобилке — свайп, без loop.
   ============================================================ */
header.header {
    background: var(--wp-surface) !important;
    border-bottom: 1px solid var(--wp-line);
    box-shadow: none;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    justify-content: stretch !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.header_menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 15px;
}

.header_menu_link,
.header_menu_link.active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--wp-line) !important;
    background: #f3f5f8 !important;
    background-color: #f3f5f8 !important;
    color: var(--wp-ink) !important;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .1px;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: none !important;
    text-decoration: none !important;
}

.header_menu_link[href="/"],
.header_menu > .header_menu_link:first-child {
    background: #eafaf0 !important;
    background-color: #eafaf0 !important;
    border-color: rgba(0, 172, 74, .28) !important;
}

.header_menu_link:hover,
.header_menu_link.active:hover {
    transform: translateY(-1px);
    background: #dcfce7 !important;
    background-color: #dcfce7 !important;
    color: #16a34a !important;
    box-shadow: none !important;
}

.header_menu_link img {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 4px;
}

@media (max-width: 560px) {
    header.header { overflow: hidden; }
    .header_menu {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px;
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .header_menu::-webkit-scrollbar { display: none; }
    .header_menu_link,
    .header_menu_link.active {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 13.5px !important;
    }
    .header_menu_link img {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ============================================================
   ЗАГОЛОВКИ СЕКЦИЙ
   ============================================================ */
.spcb_head {
    color: var(--wp-ink);
    letter-spacing: -.2px;
}

.spcb-h1 { letter-spacing: -.5px; }
.spcb-h2 { color: var(--wp-ink-soft) !important; font-weight: 600 !important; }

/* Акцентная линия под заголовком — делаем ровнее и «фирменнее» */
.spcb_head::after,
.spcb-h1::after {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wp-green) 0%, var(--wp-green-600) 100%);
}

/* ============================================================
   HERO «WORDLE GAME»
   ============================================================ */
.bg-half .col-lg-8.col-md-8.text-center > div {
    background: linear-gradient(180deg, #ffffff 0%, #f5fdf8 100%);
    padding: 40px 34px;
    border-radius: var(--wp-r-lg);
    border: 1px solid rgba(0, 172, 74, .12);
    box-shadow: var(--wp-shadow-1);
}

/* ============================================================
   КАРТОЧКИ ИГР (.we_but) — «Play Other Games» / «Games like Wordle»
   Сохраняем пастельный дух, но делаем аккуратнее и единообразнее.
   ============================================================ */
.frames_block { gap: 4px; }

.we_but {
    align-items: center;
    min-height: 84px;
    max-height: none;
    margin: 8px;
    padding: 12px 16px;
    border-radius: var(--wp-r-md);
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: var(--wp-shadow-1);
    background-blend-mode: normal;
    position: relative;
    overflow: hidden;
    transition: transform .28s var(--wp-ease), box-shadow .28s var(--wp-ease), border-color .2s ease;
}

/* Мягкий «блик» сверху для объёма поверх пастельной заливки */
.we_but::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 46%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.we_but:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 172, 74, .22);
    box-shadow: var(--wp-shadow-2);
}

.wemage {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 10px;
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .12));
    transition: transform .28s var(--wp-ease);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.we_but:hover .wemage { transform: scale(1.08) rotate(-2deg); }

.we_d { position: relative; z-index: 1; line-height: 1.35; }
.we_d b { font-size: 16px; font-weight: 800; color: var(--wp-ink); }
.we_but { color: var(--wp-ink-soft) !important; font-weight: 600; }

/* ============================================================
   КНОПКИ-ПИЛЮЛИ (.wordle_but) — буквы / языки / генератор
   ============================================================ */
.wordle_but {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 7px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--wp-surface);
    color: var(--wp-ink) !important;
    border: 1px solid var(--wp-line);
    box-shadow: var(--wp-shadow-1);
    font-weight: 700;
    transition: transform .2s var(--wp-ease), box-shadow .2s var(--wp-ease), border-color .2s ease, background .2s ease;
}

.wordle_but:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 172, 74, .28);
    background: #f3fcf6;
    box-shadow: 0 8px 20px rgba(0, 172, 74, .12);
}

.wordle_but .flag {
    width: 20px;
    height: 20px;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    float: none;
    margin: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}

/* Зелёная «сегодня/безлимит» — акцентная заливка сохраняется, но ровнее */
.we_but[style*="background-color:#b7f9b6"] {
    border-color: rgba(0, 172, 74, .18);
}

/* Кнопка Wordle Solver и другие сплошные зелёные CTA */
a.wordle_but[style*="background-color:#00ac4a"] {
    color: #fff !important;
    border: none;
    box-shadow: 0 8px 22px rgba(0, 172, 74, .35);
}
a.wordle_but[style*="background-color:#00ac4a"]:hover {
    background: var(--wp-green-700) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 172, 74, .45);
}

/* «See more games ▶» */
a[href="/wordle-games"],
a[href$="/wordle-games"] {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--wp-green) 0%, var(--wp-green-600) 100%);
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(0, 172, 74, .35);
    transition: transform .2s var(--wp-ease), box-shadow .2s var(--wp-ease);
}
a[href="/wordle-games"]:hover,
a[href$="/wordle-games"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 172, 74, .45);
}

/* ============================================================
   HOW TO PLAY — шаги
   ============================================================ */
.wordle_step {
    align-items: center;
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-left: 4px solid var(--wp-green);
    border-radius: var(--wp-r-md);
    padding: 16px 20px;
    box-shadow: var(--wp-shadow-1);
}
.wordle_step:hover { box-shadow: var(--wp-shadow-2); transform: translateY(-1px); }
.wordle_step .number {
    color: var(--wp-green);
    font-size: 26px !important;
    font-weight: 900 !important;
    min-width: 34px;
    text-align: center;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq_block {
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-left: 4px solid var(--wp-green);
    border-radius: var(--wp-r-md);
    padding: 22px 26px;
    box-shadow: var(--wp-shadow-1);
}
.faq_block:hover { box-shadow: var(--wp-shadow-2); transform: translateY(-2px); }
.wordle_h3 { color: var(--wp-ink); font-size: 18px !important; font-weight: 800; }
.wordle_text { color: var(--wp-ink-soft); font-size: 16px; }

/* ============================================================
   ShareThis — «приручаем» пёструю полосу: контейнер, центрирование,
   ограничение ширины и отступов, чтобы не выбивалась из ритма.
   ============================================================ */
.sharethis-inline-share-buttons,
.sharethis-inline-reaction-buttons {
    max-width: 680px !important;
    margin: 22px auto !important;
    padding: 14px 16px !important;
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-lg);
    box-shadow: var(--wp-shadow-1);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.sharethis-inline-reaction-buttons { margin-top: 14px !important; }

/* ============================================================
   ФУТЕР
   ============================================================ */
.footer { padding: 34px 20px !important; }
.footer-link {
    border-radius: 999px;
    border: 1px solid var(--wp-line);
    background: var(--wp-surface);
    box-shadow: var(--wp-shadow-1);
}
.footer-link:hover {
    background: var(--wp-green);
    color: #fff !important;
    border-color: var(--wp-green);
}

/* ============================================================
   МОБАЙЛ
   ============================================================ */
@media (max-width: 767px) {
    .we_but {
        width: calc(50% - 16px);
        min-height: 76px;
        padding: 10px 12px;
    }
    .wemage { width: 34px; height: 34px; margin-right: 10px; }
    .we_d b { font-size: 15px; }
    .bg-half .col-lg-8.col-md-8.text-center > div { padding: 28px 18px; margin: 0 10px; }
    .sharethis-inline-share-buttons,
    .sharethis-inline-reaction-buttons { margin: 18px 10px !important; }
}

@media (max-width: 400px) {
    .we_but { width: calc(50% - 12px); margin: 6px; }
    .wemage { width: 30px; height: 30px; }
    .we_d b { font-size: 14px; }
}

/* ============================================================
   ТЁМНАЯ ТЕМА (darkmode.js -> body.dark / .darkmode--activated)
   ============================================================ */
body.dark {
    --wp-surface: #1c2029;
    --wp-bg: #12151c;
    --wp-ink: #eef1f6;
    --wp-ink-soft: #9aa4b2;
    --wp-line: rgba(255, 255, 255, .08);
    background-image: radial-gradient(1200px 500px at 50% -260px, rgba(0, 200, 83, .10), transparent 70%);
}
body.dark header.header {
    background: #161b22 !important;
    border-bottom-color: rgba(255, 255, 255, .09);
}
body.dark .header_menu_link,
body.dark .header_menu_link.active {
    background: #1d232c !important;
    background-color: #1d232c !important;
    color: #e6e8ec !important;
    border-color: rgba(255, 255, 255, .09) !important;
}
body.dark .header_menu_link[href="/"],
body.dark .header_menu > .header_menu_link:first-child {
    background: rgba(34, 165, 93, .18) !important;
    background-color: rgba(34, 165, 93, .18) !important;
    border-color: rgba(34, 165, 93, .4) !important;
}
body.dark .header_menu_link:hover,
body.dark .header_menu_link.active:hover {
    background: rgba(34, 165, 93, .22) !important;
    color: #4ade80 !important;
}
body.dark .we_d b,
body.dark .wordle_h3 { color: var(--wp-ink); }
body.dark .wordle_but { background: var(--wp-surface); color: var(--wp-ink) !important; }

/* ============================================================
   КАСТОМНЫЙ ШЕРИНГ (.wp-share) — замена ShareThis
   ============================================================ */
.wp-share {
    max-width: 720px;
    margin: 22px auto;
    padding: 18px 16px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-lg);
    box-shadow: var(--wp-shadow-1);
}
.wp-share__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.wp-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .18);
    transition: transform .2s var(--wp-ease), box-shadow .2s var(--wp-ease), filter .2s ease;
    cursor: pointer;
}
.wp-share__btn svg { display: block; }
.wp-share__btn:hover {
    transform: translateY(-3px);
    filter: saturate(1.15) brightness(1.03);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .22);
}
.wp-share__btn:active { transform: translateY(-1px); }

/* ============================================================
   КАСТОМНЫЕ ЭМОДЗИ-РЕАКЦИИ (.wp-reactions)
   ============================================================ */
.wp-reactions {
    max-width: 560px;
    margin: 16px auto 22px;
    padding: 16px 14px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-r-lg);
    box-shadow: var(--wp-shadow-1);
}
.wp-react__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.wp-react__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 58px;
    padding: 8px 10px 6px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: transform .18s var(--wp-ease), background .18s ease, border-color .18s ease;
}
.wp-react__face {
    font-size: 30px;
    line-height: 1;
    transition: transform .18s var(--wp-ease);
    filter: saturate(1.05);
}
.wp-react__count {
    font-size: 13px;
    font-weight: 800;
    color: var(--wp-ink-soft);
    letter-spacing: .2px;
}
.wp-react__btn:hover { background: #f3f5f8; }
.wp-react__btn:hover .wp-react__face { transform: translateY(-2px) scale(1.18); }
.wp-react__btn.is-active {
    background: var(--wp-green-soft);
    border-color: rgba(0, 172, 74, .35);
}
.wp-react__btn.is-active .wp-react__count { color: var(--wp-green-700); }

/* Тёмная тема */
body.dark .wp-react__btn:hover { background: rgba(255, 255, 255, .06); }
body.dark .wp-react__count { color: var(--wp-ink-soft); }

/* Мобайл */
@media (max-width: 767px) {
    .wp-share, .wp-reactions { margin-left: 10px; margin-right: 10px; }
    .wp-share__btn { width: 46px; height: 46px; border-radius: 12px; }
    .wp-share__btn svg { width: 20px; height: 20px; }
    .wp-react__face { font-size: 26px; }
    .wp-react__btn { min-width: 50px; padding: 7px 7px 5px; }
}

/* ============================================================
   ПОЛНОЦЕННЫЙ ФУТЕР С МЕНЮ (.wp-footer) — замена мини-футера
   ============================================================ */
.wp-footer {
    margin-top: 24px;
    padding: 40px 20px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7f4 100%);
    border-top: 1px solid var(--wp-line);
    box-shadow: 0 -1px 0 rgba(255,255,255,.7) inset;
}
body.dark .wp-footer {
    background: linear-gradient(180deg, #171b23 0%, #12151c 100%);
    border-top-color: rgba(255,255,255,.08);
}
.wp-footer__inner {
    max-width: 1040px;
    margin: 0 auto;
}
.wp-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 28px;
    text-align: left;
}
.wp-footer__col--full { grid-column: 1 / -1; }
.wp-footer__col--full .wp-footer__chips { margin-top: 2px; }
.wp-footer__col h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--wp-ink);
}
.wp-footer__col h4::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin-top: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wp-green), var(--wp-green-600));
}
.wp-footer__col ul { list-style: none; margin: 0; padding: 0; }
.wp-footer__col li { margin: 0 0 3px; }
.wp-footer__col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--wp-ink-soft) !important;
    text-decoration: none;
    border-radius: 8px;
    transition: color .15s ease, transform .12s ease;
}
.wp-footer__col a:hover { color: var(--wp-green-700) !important; transform: translateX(2px); }
/* Нейтрализуем глобальный «зелёный» стиль кнопки /wordle-games внутри футера */
.wp-footer__col a[href$="/wordle-games"] {
    display: inline-flex !important;
    padding: 5px 2px !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--wp-ink-soft) !important;
}
.wp-footer__col a[href$="/wordle-games"]:hover {
    background: none !important;
    box-shadow: none !important;
    color: var(--wp-green-700) !important;
    transform: translateX(2px) !important;
}
.wp-footer__col a img.flag {
    width: 20px;
    height: 20px;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15,23,42,.18);
    flex-shrink: 0;
    float: none;
    margin: 0;
}
.wp-footer__col a img.gicon { width: 18px; height: 18px; border-radius: 5px; }

/* Колонка «Языки» — растянута на всю ширину, авто-раскладка */
.wp-footer__col--langs ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0 18px;
}

/* Буквы — компактные пилюли */
.wp-footer__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wp-footer__chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 6px 10px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-line);
    border-radius: 999px;
    font-size: 13.5px; font-weight: 800;
    color: var(--wp-ink-soft) !important;
    text-decoration: none;
    box-shadow: var(--wp-shadow-1);
    transition: transform .12s var(--wp-ease), border-color .15s ease, background .15s ease, color .15s ease;
}
.wp-footer__chip:hover {
    transform: translateY(-2px);
    border-color: rgba(0,172,74,.30);
    background: #f3fcf6;
    color: var(--wp-green-700) !important;
}
body.dark .wp-footer__chip:hover { background: rgba(255,255,255,.06); }

/* Нижняя полоса футера */
.wp-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--wp-line);
}
.wp-footer__copy { font-weight: 900; font-size: 15px; color: var(--wp-ink); }
.wp-footer__copy a { color: var(--wp-green-700); text-decoration: none; }
.wp-footer__legal { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-footer__legal a {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--wp-line);
    background: var(--wp-surface);
    box-shadow: var(--wp-shadow-1);
    font-weight: 700; font-size: 13.5px;
    color: var(--wp-ink-soft) !important;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wp-footer__legal a:hover { background: var(--wp-green); color: #fff !important; border-color: var(--wp-green); }

/* Мобайл: 2 колонки */
@media (max-width: 767px) {
    .wp-footer { padding: 30px 16px 10px; }
    .wp-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 20px 18px; }
    .wp-footer__col--langs ul { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .wp-footer__bottom { justify-content: center; text-align: center; }
    .wp-footer__legal { justify-content: center; }
}

/* ============================================================
   Убираем лишний «пустой» отступ снизу страницы
   ============================================================ */
html { background: var(--wp-bg); }
html, body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.wp-footer {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
}
.share_s.mt-2 { margin-bottom: 0 !important; padding-bottom: 12px !important; }

/* Пустые рекламные оболочки после футера не должны резервировать высоту */
body > .wp-footer ~ ins.adsbygoogle,
body > .wp-footer ~ iframe,
body > .wp-footer ~ div[id^="ezoic-pub-ad"],
body > .wp-footer ~ div[id*="ez-video"] {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}