/* lolo-cards.app - стили только главной (стиль «Stickers», 10.10.2026). Общее - в styles.css:
   там токены, кнопки, бирки, колода (она же на подборках), финал, подвал. Главная грузит оба
   файла, остальные страницы - только styles.css: так юридические страницы не тянут
   стили мастера Smart Session и игр. */

/* --- Секции главной ------------------------------------------------------------------ */

.who,
.session,
.voice,
.games,
.faq {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.who,
.session,
.voice,
.games,
.faq,
.motto {
    margin-top: 88px;
}

.section-head > p,
.session-copy > p:not(.session-try),
.voice-copy > p {
    margin: 12px 0 0;
    max-width: 36em;
    color: var(--ink-2);
    font-size: 17px;
    font-weight: 600;
}

/* --- Первый экран ------------------------------------------------------------------ */

.hero {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 28px var(--gutter) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.hero h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1;
    letter-spacing: -0.005em;
}

.hero-lede {
    margin: 16px 0 0;
    max-width: 30em;
    color: var(--ink-2);
    font-size: 17px;
    font-weight: 600;
}

.hero-get {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


/* Бирка «5,200+ cards» у колоды главной - текст CSS, не страницы. */
/* В окне «дальше - в приложении» бирка повторяла бы «5,200+ more cards in the app». */
.hero .deck-stack:has(.is-gate)::after {
    display: none;
}

.hero .deck-stack::after {
    content: "5,200+ cards";
    content: "5,200+ cards" / "";
    position: absolute;
    z-index: 3;
    left: -8px;
    bottom: -18px;
    padding: 4px 12px;
    border: 2.5px solid var(--white);
    border-radius: var(--r-pill);
    background: var(--yellow);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    transform: rotate(3deg);
    box-shadow: var(--sh-tag);
}

/* На ru/uk текст бирки - из словаря, в data-tag (src/pages/[lang]/index.astro). */
.hero .deck-stack[data-tag]::after {
    content: attr(data-tag);
    content: attr(data-tag) / "";
}

/* --- Кому: четыре категории ---------------------------------------------------------- */

.who-grid {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.who-tile {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
        "img h3"
        "img count"
        "line line"
        "decks decks"
        "btn btn";
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-content: start;
    padding: 20px;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--sh-card);
}

.who-tile img {
    grid-area: img;
    align-self: center;
    width: 84px;
    height: 84px;
    object-fit: contain;
}

.who-tile h3 {
    grid-area: h3;
    align-self: end;
    font-size: 25px;
}

.who-count {
    grid-area: count;
    justify-self: start;
    align-self: start;
    margin: 6px 0 0;
    padding: 3px 10px;
    border: 2.5px solid var(--white);
    border-radius: var(--r-pill);
    background: var(--pink-deep);
    color: var(--white);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    transform: rotate(-3deg);
    box-shadow: var(--sh-tag);
}

.who-friends .who-count {
    background: var(--mint);
    color: var(--ink);
    transform: rotate(2deg);
}

.who-family .who-count {
    background: var(--yellow);
    color: var(--ink);
}

.who-me .who-count {
    background: var(--sky);
    color: var(--ink);
    transform: rotate(2deg);
}

.who-line {
    grid-area: line;
    margin: 14px 0 0;
    color: var(--ink-2);
    font-size: 15.5px;
    font-weight: 600;
}

.who-decks {
    grid-area: decks;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.who-decks li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--soft);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}

.who-try,
.ready-actions button {
    grid-area: btn;
    min-height: 48px;
    margin-top: 16px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--white);
    color: var(--blue);
    font-size: 15.5px;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--edge);
    cursor: pointer;
    transition: background-color 0.2s var(--ease);
}

.who-try:hover,
.ready-actions button:hover {
    background: var(--soft);
}

/* --- Smart Session ---------------------------------------------------------------------- */

.session {
    display: grid;
    gap: 28px;
}

/* Нумерация здесь честная: это порядок, в котором карточки идут в вечере.
   Не grid: текст пункта - анонимный узел, в сетке он уехал бы в колонку номера. */
.session-arc {
    counter-reset: arc;
    display: grid;
    gap: 14px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.session-arc > li {
    position: relative;
    min-height: 34px;
    padding: 4px 0 0 50px;
    counter-increment: arc;
    color: var(--ink-2);
    font-size: 16px;
    font-weight: 600;
}

.session-arc > li::before {
    content: counter(arc);
    left: 0;
    top: 0;
}

.session-arc b {
    color: var(--ink);
    font-weight: 800;
}

.session-try {
    margin: 22px 0 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
}

.wizard {
    padding: 22px 20px;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--sh-lift);
}

.wizard-form {
    display: grid;
    gap: 20px;
}

.wizard fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.wizard legend {
    margin: 0 0 10px;
    padding: 0;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
}

.opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opt {
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--soft);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.opt:hover {
    box-shadow: inset 0 0 0 2px var(--edge);
}

.opt[aria-pressed="true"] {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 6px 14px -8px rgba(61, 79, 245, 0.9);
}

.opts-row .opt {
    min-width: 58px;
}

.wizard-build,
.wizard-play {
    width: 100%;
}

.wizard-building {
    padding: 28px 0 18px;
    text-align: center;
}

.wizard-building img {
    width: 84px;
    margin: 0 auto;
    filter: var(--stk);
}

.wizard-building p {
    margin: 6px 0 0;
    color: var(--ink-2);
    font-weight: 600;
}

.wizard-building .wizard-building-title {
    margin-top: 14px;
    font-family: var(--display);
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
}

.bar {
    width: 220px;
    height: 8px;
    margin: 20px auto 0;
    border-radius: 4px;
    background: var(--soft);
    overflow: hidden;
}

.bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: var(--blue);
}

.wizard-building:not([hidden]) .bar span {
    animation: bar-fill 0.9s var(--ease) forwards;
}

@keyframes bar-fill {
    to {
        width: 100%;
    }
}

.ready-eyebrow {
    display: inline-block;
    margin: 0;
    padding: 3px 12px;
    border: 2.5px solid var(--white);
    border-radius: var(--r-pill);
    background: var(--mint);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    transform: rotate(-2deg);
    box-shadow: var(--sh-tag);
}

.ready-name {
    margin: 12px 0 0;
    font-family: var(--display);
    font-size: 29px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--ink);
}

.ready-mix {
    margin: 6px 0 18px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

/* Шкала вечера: доли фаз - по числу карточек, как в приложении. */
.timeline {
    display: flex;
    gap: 3px;
    height: 14px;
    margin: 0 0 12px;
    padding: 2px;
    border-radius: 9px;
    background: var(--soft);
}

.seg {
    flex-basis: 0;
    min-width: 6px;
    border-radius: 6px;
}

.seg-q0 { background: var(--sky); }
.seg-q1 { background: #7E8BFF; }
.seg-q2 { background: var(--blue); }
.seg-q3 { background: var(--pink); }
.seg-games { background: var(--yellow); }

.timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
}

.timeline-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-legend i {
    width: 12px;
    height: 12px;
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(28, 22, 56, 0.1);
}

/* Напор после сборки: сессия - главная фишка, прямой призыв сыграть сегодня.
   Без выдуманных отзывов - их у приложения пока нет. */
.ready-push {
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 3px dashed var(--edge);
    border-radius: 22px;
    background: var(--soft-2);
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.ready-push p {
    margin: 0;
}

.ready-push .ready-push-title {
    margin-bottom: 6px;
    font-family: var(--display);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
}

.ready-free {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.ready-actions {
    display: flex;
    justify-content: center;
}

.ready-actions button {
    margin-top: 12px;
}

/* --- Девиз --------------------------------------------------------------------------- */

.motto {
    max-width: 920px;
    margin-inline: auto;
    padding: 0 var(--gutter);
}

.motto p {
    margin: 0;
    padding: 32px 24px;
    border-radius: 30px;
    background: var(--ink);
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
    transform: rotate(-1.5deg);
    box-shadow: 0 22px 40px -22px rgba(28, 22, 56, 0.7);
}

.motto mark {
    color: var(--ink);
    transform: rotate(2deg);
}

/* --- Голос ---------------------------------------------------------------------------- */

.voice {
    display: grid;
    gap: 16px;
}

.voice-visual {
    position: relative;
    height: 340px;
    max-width: 380px;
}

.phone {
    position: absolute;
    width: 156px;
    border: 5px solid var(--white);
    border-radius: 28px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 20px 36px -18px rgba(28, 22, 56, 0.55);
}

.phone img {
    width: 100%;
}

.phone-back {
    left: 8px;
    top: 10px;
    transform: rotate(-7deg);
}

.phone-front {
    left: 142px;
    top: 26px;
    transform: rotate(5deg);
}

.voice-peng {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100px;
    transform: rotate(8deg);
}

.voice-points {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.voice-points li {
    padding: 15px 18px;
    border-radius: 20px;
    background: var(--white);
    color: var(--ink-2);
    font-size: 15.5px;
    font-weight: 600;
    box-shadow: var(--sh-item);
}

.voice-points b {
    color: var(--ink);
    font-weight: 800;
}

/* --- Мини-игры -------------------------------------------------------------------------- */

.games .section-head {
    text-align: center;
}

.games .section-head > p {
    margin-inline: auto;
}

.games-peng {
    width: 92px;
    margin: 0 auto 10px;
}

.games-grid {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.game {
    padding: 20px;
    border-radius: 26px;
    background: var(--white);
    box-shadow: var(--sh-card);
}

.game h3 {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Иконка игры: эмодзи остаётся в разметке, на экране - нарисованный значок на цветной
   плашке (SVG в data:, CSP пускает data: в img-src). */
.game-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border: 3px solid var(--white);
    border-radius: 14px;
    background-color: var(--pink-deep);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    box-shadow: 0 6px 12px -6px rgba(28, 22, 56, 0.45);
    font-size: 0;
    line-height: 0;
    color: transparent;
    transform: rotate(-4deg);
}

.game:nth-child(1) .game-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round' d='M5 4.5h14a2.5 2.5 0 0 1 2.5 2.5v8a2.5 2.5 0 0 1-2.5 2.5h-7l-5 4v-4H5A2.5 2.5 0 0 1 2.5 15V7A2.5 2.5 0 0 1 5 4.5Z'/%3E%3Ccircle cx='8' cy='11' r='1.4' fill='%23fff'/%3E%3Ccircle cx='12' cy='11' r='1.4' fill='%23fff'/%3E%3Ccircle cx='16' cy='11' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
}

.game:nth-child(2) .game-icon {
    background-color: var(--yellow);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%231C1638' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%231C1638' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%231C1638'/%3E%3C/svg%3E");
    transform: rotate(4deg);
}

.game:nth-child(3) .game-icon {
    background-color: var(--mint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.5' cy='12' r='6' fill='%231C1638'/%3E%3Ccircle cx='15.5' cy='12' r='6' fill='none' stroke='%231C1638' stroke-width='2.2'/%3E%3C/svg%3E");
}

.game:nth-child(4) .game-icon {
    background-color: var(--sky);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='3' fill='none' stroke='%231C1638' stroke-width='2.2'/%3E%3Cpath d='M6 16.5l4-4.5 3 3 2-2 3 3.5' fill='none' stroke='%231C1638' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='9.2' r='1.5' fill='%231C1638'/%3E%3C/svg%3E");
    transform: rotate(3deg);
}

.game-what {
    margin: 12px 0 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
}

.game-facts {
    margin: 10px 0 0;
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 600;
}

.game-facts dt {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-facts dd {
    margin: 2px 0 0;
}

/* --- FAQ ---------------------------------------------------------------------------------- */

.faq {
    max-width: 860px;
}

.faq-list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.faq details {
    padding: 0 18px;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 10px 20px -16px rgba(28, 22, 56, 0.4);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    list-style: none;
    color: var(--ink);
    font-size: 16.5px;
    font-weight: 800;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2.5px solid var(--white);
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    font-family: var(--display);
    font-size: 19px;
    line-height: 1;
    box-shadow: 0 3px 8px -4px rgba(28, 22, 56, 0.45);
}

.faq details[open] summary::after {
    content: "–";
    background: var(--mint);
}

.faq details p {
    margin: 0;
    padding: 0 0 18px;
    color: var(--ink-2);
    font-size: 15.5px;
    font-weight: 600;
}

@media (min-width: 700px) {
    .who-grid,
    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 960px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
        grid-template-areas:
            "copy deck"
            "get  deck";
        column-gap: 72px;
        padding-top: 56px;
        align-items: start;
    }

    .hero-copy {
        grid-area: copy;
        align-self: end;
    }

    .deck {
        grid-area: deck;
        margin-top: 0;
    }

    /* Пингвин на углу карты выше и крупнее, чем на телефоне: место под него над картой. */
    .hero .deck-stack {
        margin-top: 104px;
    }

    .hero-get {
        grid-area: get;
        align-items: flex-start;
        margin-top: 30px;
    }

    .hero-lede {
        font-size: 19px;
    }

    .who,
    .session,
    .voice,
    .games,
    .faq,
    .motto {
        margin-top: 130px;
    }

    .who .section-head {
        text-align: center;
    }

    .who .section-head > p {
        margin-inline: auto;
    }

    .who-grid {
        margin-top: 36px;
    }

    .session {
        grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
        align-items: start;
        gap: 64px;
    }

    .wizard {
        padding: 28px 26px;
    }

    .voice {
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
        align-items: center;
        gap: 56px;
    }

    .voice-visual {
        height: 440px;
        max-width: 440px;
    }

    .phone {
        width: 200px;
        border-radius: 34px;
    }

    .phone-back {
        left: 10px;
    }

    .phone-front {
        left: 196px;
        top: 34px;
    }

    .voice-peng {
        width: 124px;
        right: -18px;
    }

    .games-grid {
        margin-top: 32px;
    }
}

/* --- Подборки языка: лёгкая главная ru/uk (src/pages/[lang]/index.astro) ------------- */

.home-hubs {
    max-width: var(--wrap);
    margin: 88px auto 0;
    padding: 0 var(--gutter);
}

.home-hubs ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.home-hubs a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--sh-card);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.2s var(--ease);
}

.home-hubs a:hover {
    transform: translateY(-2px);
}

.home-hubs-name {
    display: block;
    font-family: var(--display);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.12;
}

.home-hubs-intro {
    display: block;
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 600;
}