/* =========================================================================
   Продающая главная (design_handoff_home_1a) — лендинг вместо каталога на `/`.
   Оформление на токенах --ca-* (ca-theme.css), как и остальные страницы.
   Классы 1:1 с дизайн-референсом (design_handoff_home_1a/home.html), кроме
   топбара (переиспользован реальный HeaderBar.vue вместо копии из мока) и
   неиспользуемых на этом экране блоков мока (.tile/.chip/.stats/.invite/.how —
   остались от сравнения нескольких направлений, в этот экран не входят).
   Все селекторы под .home — страница грузится глобально на каждом роуте.
   ========================================================================= */
.content:has(.home) {
    background: var(--ca-bg);
    min-height: calc(100vh - 120px);
}

.home {
    max-width: 430px;
    margin: 0 auto;
    color: var(--ca-text);
    font-family: var(--ca-font);
}

/* --- Секции (мобильные отступы = как было инлайн; десктоп ниже) --- */
.home__pitch { padding: 8px 20px 22px; text-align: center; }
.home__pitch h1.big { margin: 14px 0 10px; }
.home__pitch h1.big br { display: none; }   /* перенос — только в десктопном макете */
.home__pitch .sub { max-width: 320px; margin: 0 auto; }
.home__board { padding: 0 20px 20px; }
.home__cta { padding: 0 20px 8px; display: flex; flex-direction: column; gap: 10px; }
.home .cta-row { display: flex; flex-direction: column; gap: 10px; }
.home__sec--live { padding: 22px 20px 8px; }
.home__sec--showcase { padding: 22px 20px 6px; }
.home__sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
/* Паддинг добирает hit-target до 44px, отрицательный margin гасит его влияние
   на раскладку (ряд выровнен по baseline, она не съезжает). */
.home__sec-link { font-size: 13px; display: inline-block; padding: 14px 4px; margin: -14px -4px; }
.home__cards { display: flex; flex-direction: column; gap: 9px; }
.home__foot-lead { font-size: 14px; margin-bottom: 14px; }
.home__foot-cta { max-width: 240px; margin: 0 auto; }

/* --- Блоки только для десктопной раскладки (в мобильном макете их нет).
   DOM один на обе раскладки — секции переставляет order, тексты-варианты
   переключает display. --- */
.home .bc-label,
.home .hero-meta,
.home .side-panel,
.home .btn.home__cta-invite,
.home .home__sub--d,
.home .home__foot-h,
.home .home__foot-lead-d { display: none; }
/* Мобильная витрина — 3 карточки из восьми: Реверси, Четыре в ряд, Пятнашки
   (макет home-mobile). Порядок в DOM = десктопный, поэтому прячем 3-ю
   (Гомоку) и всё с 5-й. */
.home__cards .gcard:nth-child(3),
.home__cards .gcard:nth-child(n+5) { display: none; }
/* Лента недоступна и панель скрыта → секция пустая, убираем её отступы. */
@media (max-width: 899px) {
    .home__sec--live:not(:has(.live-card)) { display: none; }
}

.home a { color: var(--ca-accent); text-decoration: none; }
.home a:hover { color: var(--ca-accent-ink); }
.home .lnk { color: var(--ca-accent); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.home .lnk:hover { color: var(--ca-accent-ink); }

/* ------------------------------- hero ----------------------------------- */
.home .eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: var(--ca-muted);
    text-transform: uppercase; letter-spacing: .08em;
}
.home .dot-live {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--ca-live);
    animation: home-pulse-ring 2.2s infinite;
}
/* Кольцо пульса — из самого токена, чтобы в «Ночи» оно совпадало с точкой. */
@keyframes home-pulse-ring {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ca-live) 45%, transparent); }
    70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ca-live) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ca-live) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .home .dot-live { animation: none; }
}

.home h1.big {
    font-size: 33px; line-height: 1.08; letter-spacing: -.025em;
    font-weight: 800; text-wrap: balance;
}
.home .sub { color: var(--ca-muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* -------------------------------- кнопки --------------------------------- */
.home .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; padding: 0 20px; border: 0; border-radius: var(--ca-radius);
    font-size: 15.5px; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: .15s; width: 100%;
}
.home .btn-primary { background: var(--ca-accent); color: #fff; box-shadow: var(--ca-shadow-cta); }
.home .btn-primary:hover { background: var(--ca-accent-ink); color: #fff; transform: translateY(-1px); }
.home .btn-ghost {
    background: var(--ca-surface); color: var(--ca-text);
    border: 1px solid var(--ca-line-soft); box-shadow: var(--ca-raise);
}
.home .btn-ghost:hover { border-color: var(--ca-accent); color: var(--ca-accent); transform: translateY(-1px); }

/* ----------------------------- мини-доска -------------------------------- */
.home .ttt {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: var(--ca-field); border: 2px solid var(--ca-line);
    border-radius: 14px; overflow: hidden; box-shadow: var(--ca-inset);
}
.home .ttt .cell {
    aspect-ratio: 1; border: none; background: transparent; cursor: pointer;
    display: grid; place-items: center; position: relative; padding: 0;
}
.home .ttt .cell.br { border-right: 1px solid var(--ca-field-line); }
.home .ttt .cell.bb { border-bottom: 1px solid var(--ca-field-line); }
.home .ttt .cell:not(.filled):hover { background: var(--ca-cell-hover); }
.home .ttt .cell:disabled { cursor: default; }

.home .mark { width: 58%; height: 58%; display: block; animation: home-pop .22s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes home-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.home .mark.o {
    border-radius: 50%;
    background: var(--ca-piece-gloss), radial-gradient(circle at 35% 28%, #e08a5f, var(--ca-terra) 62%, #8f4a2c);
    box-shadow: var(--ca-piece-shadow);
}
.home .mark.x { position: relative; background: transparent; box-shadow: none; }
.home .mark.x::before, .home .mark.x::after {
    content: ""; position: absolute; top: 46%; left: 5%; width: 90%; height: 15%;
    border-radius: 6px; background: linear-gradient(#4a5f78, var(--ca-accent));
    box-shadow: var(--ca-piece-shadow);
}
.home .mark.x::before { transform: rotate(45deg); }
.home .mark.x::after { transform: rotate(-45deg); }

.home .board-status { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13.5px; }
.home .bs-txt { color: var(--ca-muted); font-weight: 600; }
.home .bs-txt b { color: var(--ca-text); }
.home .bs-reset {
    border: 1px solid var(--ca-line-soft); background: var(--ca-surface); color: var(--ca-muted);
    font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 99px; cursor: pointer;
}
.home .bs-reset:hover { border-color: var(--ca-accent); color: var(--ca-accent); }
.home .win .cell.wc { background: var(--ca-accent-soft); }

/* Пост-игровой блок — В ПОТОКЕ, на месте строки статуса (макет 01-home).
   Раньше был оверлеем поверх заблюренной доски; blur убран намеренно —
   полноэкранные backdrop/filter уже давали jank в Firefox. */
.home .board-wrap { position: relative; }
.home .post-game {
    margin-top: 13px; padding-top: 14px; border-top: 1px solid var(--ca-line-hairline);
    display: flex; flex-direction: column; gap: 9px;
    animation: home-pop .3s cubic-bezier(.2, .9, .3, 1.3);
}
.home .post-game .pg-msg { font-size: 15px; font-weight: 700; line-height: 1.35; text-wrap: pretty; }
.home .post-game .pg-msg span { display: block; font-size: 13px; font-weight: 500; color: var(--ca-muted); margin-top: 3px; }
.home .post-game .pg-again {
    border: 0; background: transparent; color: var(--ca-muted); font-weight: 600; font-size: 13px;
    padding: 4px; cursor: pointer; text-decoration: underline;
    text-decoration-color: var(--ca-line-soft); text-underline-offset: 3px;
}
.home .post-game .pg-again:hover { color: var(--ca-accent); }

/* ---------------------------- живые матчи -------------------------------- */
.home .live-card {
    background: var(--ca-surface); border: 1px solid var(--ca-line-hairline);
    border-radius: 14px; box-shadow: var(--ca-raise); overflow: hidden;
}
.home .live-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--ca-line-hairline);
}
.home .live-head .lh-l { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.home .live-head .lh-c { font-size: 12px; color: var(--ca-muted); font-variant-numeric: tabular-nums; }
.home .live-empty { padding: 16px 14px; font-size: 13px; color: var(--ca-muted); }

.home .match { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--ca-line-hairline); font-size: 13px; }
.home .match:last-child { border-bottom: 0; }
.home .m-ava { display: flex; flex-shrink: 0; }
.home .m-ava span {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #fff; border: 2px solid var(--ca-surface);
}
.home .m-ava span:nth-child(2) { margin-left: -9px; }
.home .m-body { flex: 1; min-width: 0; }
.home .m-body .m-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .m-body .m-s { color: var(--ca-faint); font-size: 11.5px; }
.home .m-move { font-size: 11.5px; color: var(--ca-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------- витрина ---------------------------------- */
.home .sec-title { font-size: 12px; font-weight: 700; color: var(--ca-faint); text-transform: uppercase; letter-spacing: .1em; }

.home .gcard {
    display: flex; align-items: center; gap: 13px; padding: 13px 14px;
    border: 1px solid var(--ca-line-hairline); border-radius: 12px; background: var(--ca-surface);
    box-shadow: var(--ca-raise); cursor: pointer; transition: .15s; text-decoration: none; color: inherit;
}
.home .gcard:hover { border-color: var(--ca-accent); transform: translateY(-2px); box-shadow: var(--ca-raise-hi); }
.home .gcard .g-ic {
    width: 44px; height: 44px; border-radius: 11px; background: var(--ca-surface-2);
    border: 1px solid var(--ca-line-hairline); display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
}
.home .gcard .g-txt { flex: 1; min-width: 0; }
.home .gcard .g-t { display: block; font-weight: 700; font-size: 14.5px; }
.home .gcard .g-d { display: block; color: var(--ca-muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.home .gcard .g-tag {
    font-size: 11px; font-weight: 600; color: var(--ca-muted); background: var(--ca-surface-2);
    border: 1px solid var(--ca-line-hairline); border-radius: 99px; padding: 3px 9px; flex-shrink: 0;
}

/* ===================== Пикер «Быстрая игра с другом» ===================== */
/* CA-токены + dark-mode (в отличие от старого .gp-pick — тот на литералах). */
.qpf-overlay {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(20, 22, 27, 0.5);
    animation: qpf-fade .18s ease;
}
@keyframes qpf-fade { from { opacity: 0; } to { opacity: 1; } }

.qpf-modal {
    width: 420px; max-width: 100%;
    background: var(--ca-surface); color: var(--ca-text);
    border: 1px solid var(--ca-line-soft); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 22, 27, 0.35);
    padding: 20px; font-family: var(--ca-font);
    animation: qpf-pop .2s cubic-bezier(.2, .9, .3, 1.3);
}
@keyframes qpf-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.qpf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qpf-head h3 { font-size: 18px; font-weight: 800; margin: 0; }
.qpf-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ca-faint); cursor: pointer; }
.qpf-x:hover { color: var(--ca-text); }
.qpf-hint { font-size: 13px; color: var(--ca-muted); margin: 6px 0 14px; line-height: 1.45; }
.qpf-error {
    font-size: 13px; color: var(--ca-bad); background: var(--ca-bad-soft);
    border: 1px solid var(--ca-line-soft); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
}

.qpf-search {
    width: 100%; height: 44px; padding: 0 14px; font-size: 15px;
    color: var(--ca-text); background: var(--ca-bg);
    border: 1px solid var(--ca-line-soft); border-radius: 10px; outline: none;
    font-family: var(--ca-font);
}
.qpf-search:focus { border-color: var(--ca-accent); box-shadow: 0 0 0 3px var(--ca-accent-soft); }

.qpf-results { margin-top: 8px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.qpf-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px; text-align: left;
    background: var(--ca-bg); border: 1px solid transparent; border-radius: 9px;
    color: var(--ca-text); font-size: 14px; font-family: var(--ca-font); cursor: pointer; transition: .12s;
}
.qpf-item:hover:not(:disabled) { border-color: var(--ca-accent); background: var(--ca-accent-soft); }
.qpf-item:disabled { cursor: default; opacity: .6; }
.qpf-item.is-busy { opacity: 1; }
.qpf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ca-line); flex-shrink: 0; }
.qpf-dot.is-online { background: var(--ca-good); box-shadow: 0 0 0 2px var(--ca-good-soft); }
.qpf-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qpf-star { color: var(--ca-line); font-size: 13px; flex-shrink: 0; }
.qpf-go { font-size: 12.5px; font-weight: 700; color: var(--ca-accent); flex-shrink: 0; }
.qpf-empty { padding: 14px 12px; font-size: 13px; color: var(--ca-muted); line-height: 1.45; text-align: center; }

.qpf-open {
    width: 100%; height: 46px; margin-top: 14px;
    background: var(--ca-surface); color: var(--ca-text);
    border: 1px solid var(--ca-line-soft); border-radius: 10px;
    font-size: 14px; font-weight: 700; font-family: var(--ca-font); cursor: pointer;
    box-shadow: var(--ca-raise); transition: .12s;
}
.qpf-open:hover:not(:disabled) { border-color: var(--ca-accent); color: var(--ca-accent); }
.qpf-open:disabled { cursor: default; opacity: .6; }

/* -------------------------------- footer ---------------------------------- */
.home .foot { padding: 26px 20px 30px; border-top: 1px solid var(--ca-line-hairline); text-align: center; }
.home .foot .f-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--ca-muted); margin-top: 14px; }
.home .foot .f-links a { color: var(--ca-muted); display: inline-flex; align-items: center; min-height: 44px; }
.home .foot .f-links a:hover { color: var(--ca-accent); }

/* ============================== a11y ====================================
   Видимый фокус на всех интерактивных элементах + hit-target ≥44px там, где
   макетный размер меньше (мелкие пилюли/текстовые кнопки): площадь набирается
   невидимым псевдоэлементом, сама плашка остаётся макетного размера.
   ======================================================================== */
.home a:focus-visible,
.home button:focus-visible,
.home .btn:focus-visible,
.home .cell:focus-visible {
    outline: 2px solid var(--ca-accent);
    outline-offset: 2px;
    border-radius: 8px;
}
.home .bs-reset { position: relative; }
.home .bs-reset::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
}
/* «Ещё раз с ботом» — добираем высоту паддингом (соседи в потоке, псевдо-
   область наехала бы на кнопку выше), визуальный отступ компенсируем margin. */
.home .post-game .pg-again { padding: 11px 4px; margin-top: -7px; }

/* =========================================================================
   ДЕСКТОП (≥900px) — макет handoff/01-home/home-desktop.html.
   DOM один на обе раскладки: секции переставляет `order` внутри .home
   (flex-колонка), а не дубли разметки. Порядок десктопа —
   hero → витрина → полоса активности → футер; мобильный DOM-порядок
   (hero → активность → витрина) остаётся исходным.
   ========================================================================= */
@media (min-width: 900px) {
    .home { max-width: 1180px; padding: 0 32px; display: flex; flex-direction: column; }
    .home__hero { order: 1; }
    .home__sec--showcase { order: 2; }
    .home__sec--live { order: 3; }
    .home .foot { order: 4; }

    /* --- Hero: питч+CTA (левая колонка) | карточка доски (правая). Приём:
       питч прижат к низу своей строки (align-self:end), CTA — к верху
       следующей (align-self:start), поэтому они держатся вместе по центру
       рядом с более высокой доской, без «дыры» между ними. --- */
    .home__hero {
        display: grid;
        grid-template-columns: 1.02fr .98fr;
        grid-template-areas: "pitch board" "cta board";
        column-gap: 56px;
        align-items: center;
        padding: 64px 0 48px;
    }
    .home__pitch { grid-area: pitch; align-self: end; text-align: left; padding: 0; }
    .home__pitch h1.big { font-size: 53px; line-height: 1.02; letter-spacing: -.03em; margin: 18px 0 16px; }
    .home__pitch h1.big br { display: inline; }
    .home .home__sub--m { display: none; }
    .home .home__sub--d { display: block; font-size: 17px; max-width: 466px; margin: 0; }

    .home__board { grid-area: board; align-self: center; width: 100%; padding: 0; }
    .home .board-card {
        background: var(--ca-surface); border: 1px solid var(--ca-line-hairline);
        border-radius: 20px; padding: 24px 24px 22px;
        box-shadow: 0 26px 60px -30px rgba(33, 29, 23, .45);
    }
    .home .bc-label {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; font-weight: 700; color: var(--ca-muted);
        text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
    }
    .home .board-wrap { max-width: 352px; margin: 0 auto; }

    /* --- CTA-ряд: две кнопки в строку + живая подпись под ними. --- */
    .home__cta { grid-area: cta; align-self: start; align-items: flex-start; padding: 22px 0 0; gap: 0; }
    .home .cta-row { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .home .cta-row .btn { width: auto; white-space: nowrap; }
    /* Каталог-кнопка на десктопе — главный CTA (на мобиле по макету ghost). */
    .home .home__cta-catalog {
        background: var(--ca-accent); color: #fff;
        border-color: transparent; box-shadow: var(--ca-shadow-cta);
    }
    .home .home__cta-catalog:hover { background: var(--ca-accent-ink); color: #fff; border-color: transparent; }
    .home .btn.home__cta-invite { display: inline-flex; }
    .home .hero-meta {
        display: inline-flex; align-items: center; gap: 8px;
        margin-top: 22px; font-size: 13.5px; color: var(--ca-muted);
    }
    .home .hero-meta b { color: var(--ca-text); font-variant-numeric: tabular-nums; }

    /* --- Заголовок секции: h2 27px + «Весь каталог →» на волоске. --- */
    .home__sec { padding: 34px 0 10px; }
    .home .sec-hd { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--ca-line-hairline); }
    .home .sec-hd .sec-title {
        font-size: 27px; font-weight: 800; letter-spacing: -.02em;
        text-transform: none; color: var(--ca-text); margin: 0;
    }
    .home .home__sec-link { font-size: 14.5px; }
    .home .home__sec-link::after { content: " →"; }

    /* --- Витрина: 8 вертикальных плиток вместо 3 горизонтальных карточек.
       Разметка та же — меняется только скин. --- */
    .home__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px; }
    .home__cards .gcard:nth-child(3),
    .home__cards .gcard:nth-child(n+5) { display: block; }
    .home .tile {
        position: relative; display: block; padding: 18px;
        border: 1px solid var(--ca-line-hairline); border-radius: 14px;
    }
    .home .tile .g-ic {
        display: block; width: auto; height: auto; line-height: 1;
        background: none; border: 0; border-radius: 0; font-size: 28px;
    }
    .home .tile .g-txt { display: block; }
    .home .tile .g-t { font-size: 15px; font-weight: 700; margin-top: 8px; }
    .home .tile .g-d { font-size: 12px; line-height: 1.4; margin-top: 3px; }
    .home .tile .g-tag {
        position: absolute; top: 12px; right: 12px;
        font-size: 10.5px; padding: 2px 8px; border-radius: 99px;
    }

    /* --- Полоса активности: лента (вертикальные строки) + панель. --- */
    .home__sec--live {
        display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px;
        align-items: stretch; padding: 44px 0 10px;
    }
    .home__sec--live:not(:has(.live-card)) { grid-template-columns: 1fr; }
    /* Пустая лента не должна тянуться на высоту панели: без активных матчей
       (напр. на ненагруженном стенде) растянутая карточка выглядит поломкой.
       С матчами карточки снова выравниваются по высоте, как в макете. */
    .home__sec--live .live-card:has(.live-empty) { align-self: start; }
    .home__sec--live .match { padding: 14px 16px; }
    .home .side-panel {
        display: flex; flex-direction: column; justify-content: center;
        background: var(--ca-accent-soft); border: 1px solid var(--ca-line-soft);
        border-radius: 18px; padding: 26px;
    }
    .home .side-panel h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
    .home .side-panel p { color: var(--ca-muted); font-size: 14.5px; line-height: 1.5; margin: 10px 0 20px; max-width: 340px; }
    .home .side-panel .sp-btns { display: flex; gap: 12px; flex-wrap: wrap; }
    .home .side-panel .btn { width: auto; }

    /* --- Футер-CTA: заголовок + отдельный абзац (мобильный лид скрыт). --- */
    .home .foot { padding: 34px 0 40px; margin-top: 48px; }
    .home .home__foot-h { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
    .home .home__foot-lead { display: none; }
    .home .home__foot-lead-d { display: block; font-size: 15px; margin-bottom: 20px; }
    .home .home__foot-cta { width: auto; min-width: 220px; max-width: none; }
    .home .foot .f-links { gap: 20px; font-size: 13.5px; margin-top: 22px; }
}

/* Промежуточная ширина: колонка hero уже 540px из макета, 53px-заголовок в неё
   не помещается и рассыпается на 4 строки — сбавляем кегль (шаг сверх макета,
   у которого этой ступени нет: он прыгает сразу на мобильные 38px). */
@media (min-width: 900px) and (max-width: 1099px) {
    .home__pitch h1.big { font-size: 42px; }
}