/* index.php */
/* «Увидь разницу»: слайдер + текст в две колонки */
.hw-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 40px; align-items: center; }
.hw-media { position: relative; min-width: 0; }
.hw-split .hw-corners { position: absolute; inset: 0; }
.hw-aside {
    /* Тест: полупрозрачный паттерн из иконки «глаз» за текстом, без рамки
       (тот же приём, что у карточек «Создано, чтобы доверять»). */
    min-width: 0; position: relative; padding: 8px 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate%28200 -10%29 rotate%2810%29 scale%284.6%29' stroke='rgba%28167,139,250,0.08%29'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3Cg transform='translate%2830 250%29 rotate%28-8%29 scale%281.5%29' stroke='rgba%28167,139,250,0.12%29'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3Cg transform='translate%28215 300%29 rotate%28-14%29 scale%282.2%29' stroke='rgba%28167,139,250,0.11%29'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3Cg transform='translate%28120 150%29 rotate%286%29 scale%281.1%29' stroke='rgba%28167,139,250,0.09%29'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#howworks .hw-split .hw-header { text-align: left; margin: 0 0 26px; max-width: none; }
.hw-split .hw-kicker::before, .hw-split .hw-kicker::after { display: none; }
.hw-split .hw-title { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.hw-split .hw-sub { margin-left: 0; font-size: .95rem; }
.hw-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hw-points b { display: block; font-size: .98rem; font-weight: 700; color: #f1f5f9; margin: 0 0 4px; letter-spacing: -.01em; }
.hw-points p { margin: 0; font-size: .86rem; line-height: 1.55; color: rgba(241,245,249,.55); }
@media (max-width: 900px) {
    .hw-split { grid-template-columns: 1fr; gap: 26px; }
    .hw-aside { order: -1; }
    #howworks .hw-split .hw-header { text-align: center; max-width: 720px; margin: 0 auto 0; }
    .hw-split .hw-kicker::before, .hw-split .hw-kicker::after { display: inline-block; }
    .hw-split .hw-sub { margin-left: auto; }
    .hw-points { display: none; } /* на телефоне — только заголовок и слайдер, без простыни */
}

/* index.php */
/* ═══ Лента каталога на главной: карточки игр как в /catalog, одной бегущей строкой ═══ */
.cg-gcm { overflow: hidden; width: 100%; position: relative; contain: layout paint;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    padding: 6px 0 14px; }
.cg-gcm__row { display: flex; gap: 14px; width: max-content; animation: cg-gcm-scroll 60s linear infinite; backface-visibility: hidden; }
.cg-gcm:hover .cg-gcm__row, .cg-gcm.is-off .cg-gcm__row { animation-play-state: paused; }
@keyframes cg-gcm-scroll { to { transform: translate3d(calc(-50% - 7px), 0, 0); } }
.cg-gcm .game-card { width: 320px; min-height: 192px; flex: none; }
.cg-gcm .game-card-title { font-size: 1.15rem; }
.cg-gcm__cta { display: flex; justify-content: center; margin-top: 22px; }
/* кнопка = тот же .store-btn-primary, что «Выбрать игру» в hero; здесь только отступ иконки */
.cg-gcm__btn svg { margin-left: 2px; }
@media (max-width: 640px) { .cg-gcm .game-card { width: min(280px, calc(100vw - 64px)); min-height: 170px; } .cg-gcm__btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .cg-gcm { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
    .cg-gcm__row { animation: none; width: auto; }
    .cg-gcm [aria-hidden="true"].game-card { display: none; }
}

/* index.php */
.cg-faq-list{display:flex;flex-direction:column;gap:10px}.cg-faq{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03);padding:0 16px;transition:border-color .2s,background .2s}.cg-faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;color:var(--text-1);display:flex;align-items:center;justify-content:space-between;gap:12px}.cg-faq summary::-webkit-details-marker{display:none}
/* индикатор раскрытия — тот же паттерн «+/×», что в FAQ категории */
.cg-faq summary::after{content:'+';width:26px;height:26px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25);color:#a78bfa;font-size:1rem;font-weight:600;transition:transform .25s,background .2s,color .2s}
.cg-faq[open]{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.045)}
.cg-faq[open] summary::after{transform:rotate(45deg);background:#7c3aed;color:#fff}
.cg-faq summary:hover{color:#fff}
.cg-faq p{margin:0 0 14px;font-size:.88rem;line-height:1.6;color:rgba(241,245,249,.55)}

/* index.php */
/* Pulsing green dot (used by the online counter / live ticker) */
.cg-hud-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: dot-pulse 2s ease-in-out infinite; flex-shrink: 0; display: inline-block; }
/* «Online now» item in the stats bar — the gradient must live on the inner
   <b>: background-clip:text breaks on the inline-flex wrapper itself */
.cg-stat-online { display: inline-flex; align-items: center; gap: 8px; background: none !important; -webkit-text-fill-color: initial; }
.cg-stat-online b {
    font-weight: 800;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ═══ Hero global search ═══ */
.cg-hsearch { position: relative; width: 100%; max-width: 520px; margin: 26px auto 0; text-align: left; }
.cg-hsearch__box {
    display: flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 16px;
    background: rgba(10,12,20,.6);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: rgba(241,245,249,.4);
    transition: border-color .2s, box-shadow .2s;
}
.cg-hsearch__box:focus-within {
    border-color: rgba(139,92,246,.55);
    box-shadow: 0 0 0 3px rgba(124,58,237,.14), 0 18px 50px rgba(0,0,0,.4);
}
.cg-hsearch__box svg { color: #a78bfa; flex-shrink: 0; }
.cg-hsearch__box input {
    flex: 1; min-width: 0; background: none; border: none; outline: none; height: 100%;
    color: #f1f5f9; font-size: .95rem; font-family: inherit; caret-color: #a78bfa;
}
.cg-hsearch__box input::placeholder { color: rgba(241,245,249,.38); }
.cg-hsearch__kbd {
    flex-shrink: 0; font-size: .68rem; font-weight: 700; color: rgba(241,245,249,.3);
    border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 2px 7px;
}
.cg-hsearch__box:focus-within .cg-hsearch__kbd { display: none; }
.cg-hsearch__drop {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: rgba(13,15,24,.97);
    border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(124,58,237,.12);
    max-height: 420px; overflow-y: auto; padding: 4px; text-align: left;
}
.cg-hs-h { display: block; padding: 10px 14px 5px; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a78bfa; text-decoration: none; }
a.cg-hs-h:hover { color: #c4b5fd; }
a.cg-hs-h::after { content: " →"; opacity: 0; transition: opacity .15s; }
a.cg-hs-h:hover::after { opacity: 1; }
.cg-hs-h--fn { color: rgba(241,245,249,.32); }
.cg-hs-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 9px;
    text-decoration: none; color: inherit; cursor: pointer;
    transition: background .12s;
}
.cg-hs-row:hover { background: rgba(124,58,237,.14); }
.cg-hs-row__th {
    width: 44px; height: 30px; border-radius: 6px; flex-shrink: 0;
    background: linear-gradient(135deg, #3a2b52, #141826);
    background-size: cover; background-position: center;
}
.cg-hs-row__ic {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25);
    display: flex; align-items: center; justify-content: center; color: #c4b5fd;
}
.cg-hs-row__body { flex: 1; min-width: 0; }
.cg-hs-row__t { font-size: .88rem; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hs-row__t b { color: #22d3ee; font-weight: 800; }
.cg-hs-row__s { font-size: .72rem; color: rgba(241,245,249,.4); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hs-row__aside { margin-left: auto; flex-shrink: 0; font-size: .8rem; font-weight: 800; color: #a78bfa; white-space: nowrap; }
.cg-hs-row__fn { margin-left: auto; flex-shrink: 0; font-size: .68rem; color: rgba(241,245,249,.35); background: rgba(255,255,255,.05); padding: 3px 9px; border-radius: 50px; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.cg-hs-empty { padding: 18px 14px; font-size: .85rem; color: rgba(241,245,249,.45); text-align: center; }
/* #12: empty state — escape hatch to the catalog + «Popular» fallback */
.cg-hs-allgames {
    display: block; margin: 2px 8px 6px; padding: 10px 14px; border-radius: 9px;
    background: rgba(124,58,237,.1); color: #c4b5fd;
    font-size: .82rem; font-weight: 600; text-decoration: none; text-align: center;
    transition: background .15s;
}
.cg-hs-allgames:hover { background: rgba(124,58,237,.18); }
.cg-hs-h--pop { color: rgba(241,245,249,.35); }
/* C3: keyboard navigation — active row highlight */
.cg-hs-row.is-active {
    background: rgba(124,58,237,.16);
    outline: 1px solid rgba(124,58,237,.4); outline-offset: -1px;
}
/* C3: keys hint at the bottom of the dropdown (hidden on touch widths) */
.cg-hs-hint {
    position: sticky; bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 4px; padding: 8px 12px;
    background: rgba(13,15,24,.97); border-top: 1px solid rgba(255,255,255,.06);
    font-size: .66rem; color: rgba(241,245,249,.4);
}
.cg-hs-hint span { display: inline-flex; align-items: center; gap: 5px; }
.cg-hs-hint kbd {
    font-family: inherit; font-size: .62rem; line-height: 1;
    padding: 3px 5px; border-radius: 5px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    color: rgba(241,245,249,.6);
}
@media (max-width: 768px) { .cg-hs-hint { display: none; } }

/* ═══ Live ticker ═══ */
.cg-ticker { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 22px 20px 0; }
.cg-tick {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 50px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    font-size: .78rem; font-weight: 600; color: rgba(241,245,249,.6);
}
.cg-tick b { color: #f1f5f9; }
.cg-tick__zap { color: #22d3ee; }

/* ═══ Games marquee ═══ */
.cg-marquee {
    overflow: hidden; position: relative; margin-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.028);
    padding: 13px 0;
    contain: layout paint;
}
.cg-marquee.is-off .cg-marquee__track { animation-play-state: paused; }
.cg-marquee__track {
    display: inline-flex; align-items: center; gap: 28px; white-space: nowrap;
    animation: cg-marquee-scroll 36s linear infinite;
    backface-visibility: hidden;
}
@keyframes cg-marquee-scroll { to { transform: translate3d(-50%, 0, 0); } }
.cg-marquee__track a {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(241,245,249,.28);
    text-decoration: none;
    transition: color .2s;
}
.cg-marquee__track a:hover { color: #c4b5fd; }
.cg-marquee:hover .cg-marquee__track { animation-play-state: paused; }
.cg-marquee__track i { font-style: normal; font-size: .6rem; color: rgba(139,92,246,.5); }
@media (prefers-reduced-motion: reduce) { .cg-marquee__track { animation: none; } }

/* Trust grid: exactly 5 items → 5 columns on desktop (no 4+1 orphan) */
@media (min-width: 1000px) { .store-features-grid { grid-template-columns: repeat(5, 1fr); } }

/* Product card: «Trial 0 ₽» tag + explicit «Подробнее» button (affordance) */
.spc-trial-tag {
    margin-left: 8px; font-size: .62rem; font-weight: 700;
    padding: 3px 8px; border-radius: 50px;
    background: rgba(34,211,238,.12); color: #22d3ee; border: 1px solid rgba(34,211,238,.3);
    white-space: nowrap;
}
.spc-more {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 13px; border-radius: 9px;
    background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.28);
    color: #c4b5fd; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    transition: background .2s, border-color .2s, transform .2s;
}
.store-product-card:hover .spc-more { background: rgba(124,58,237,.22); border-color: rgba(124,58,237,.45); transform: translateX(2px); }

/* ═══ Aggregate rating above reviews ═══ */
.cg-agg { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -34px 0 40px; flex-wrap: wrap; }
.cg-agg b {
    font-size: 1.6rem; font-weight: 800;
    background: linear-gradient(135deg, #43f72f, #2ec91f);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* дробная заливка: серый низ + зелёный верх шириной rating/5 — 4.8 читается как 4.8, а не 5/5 */
.cg-agg__stars { position: relative; display: inline-block; color: rgba(241,245,249,.22); font-size: 1rem; letter-spacing: 2px; }
.cg-agg__stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #43f72f; text-shadow: 0 0 14px rgba(67,247,47,.4); }
.cg-agg__sub { font-size: .82rem; color: rgba(241,245,249,.45); }

/* ═══ Отзывы: две бегущие ленты навстречу друг другу ═══ */
.cg-rvm { display: grid; gap: 14px; overflow: hidden; width: 100%; position: relative; contain: layout paint; }
/* Фейд по краям как на winlend.cc. Через mask-image, а не тёмные оверлеи:
   фон под секцией — живой шейдер, любой цветной градиент поверх него читается
   как грязная полоса, а маска даёт честную прозрачность. */
.cg-rvm { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cg-rvm__row { display: flex; gap: 14px; width: max-content; animation: cg-rvm-scroll 48s linear infinite; backface-visibility: hidden; }
.cg-rvm__row--rev { animation-direction: reverse; }
.cg-rvm:hover .cg-rvm__row, .cg-rvm.is-off .cg-rvm__row { animation-play-state: paused; }
@keyframes cg-rvm-scroll { to { transform: translate3d(calc(-50% - 7px), 0, 0); } }
.cg-rv { width: 310px; flex: none; padding: 14px 16px; border-radius: 14px; contain: layout paint;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: border-color .2s, background .2s; }
.cg-rv:hover { border-color: rgba(124,58,237,.35); background: rgba(124,58,237,.06); }
.cg-rv__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cg-rv__ava { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-weight: 700; font-size: .72rem; color: #fff; letter-spacing: .02em; }
.cg-rv__head b { font-size: .86rem; color: var(--text-1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-rv__stars { margin-left: auto; display: flex; gap: 1px; flex: none; }
.cg-rv__prod { display: inline-block; font-size: .7rem; color: rgba(167,139,250,.85); text-decoration: none; margin-bottom: 8px; }
.cg-rv__prod:hover { color: #c4b5fd; }
.cg-rv p { margin: 0; font-size: .82rem; line-height: 1.5; color: rgba(241,245,249,.6);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .cg-rv { width: min(280px, calc(100vw - 64px)); } }
@media (prefers-reduced-motion: reduce) {
    .cg-rvm { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
    .cg-rvm__row { animation: none; width: auto; }
    .cg-rv--dup { display: none; }
}

/* index.php */
/* #21: SEO block framed as a deliberate section — thin top divider, content in a
   card, container width matches the other sections' grid (1410px − 20px gutters).
   H2/H3 markup and texts untouched (SEO), wrapper + styles only. */
.cg-seo-guide{padding-top:40px;padding-bottom:80px;border-top:1px solid rgba(255,255,255,.07)}
.cg-seo-inner{max-width:1370px;width:calc(100% - 40px);margin:0 auto;box-sizing:border-box;text-align:left;background:rgba(16,18,27,.4);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:26px 28px}
.cg-seo-h2{font-size:1.05rem;font-weight:700;color:#f1f5f9;margin:28px 0 12px;line-height:1.35}
.cg-seo-h2:first-child{margin-top:0}
.cg-seo-p{font-size:.92rem;color:rgba(241,245,249,.55);line-height:1.85;margin:0 0 14px}
.cg-seo-ul{margin:8px 0 18px 18px;color:rgba(241,245,249,.5);font-size:.88rem;line-height:1.75}
.cg-seo-ul li{margin-bottom:6px}
@media(max-width:640px){.cg-seo-inner{padding:20px 16px}}

/* index.php */
@media(max-width:768px) {

    /* #5: «Все продукты» — compact horizontal rows instead of full-size cards.
       Thumb ~104px on the left; category kicker, name, price + «Подробнее» on
       the right. Desc/tiers/status and thumb overlays are visual-only hidden. */
    .store-product-card {
        display:grid;
        grid-template-columns:104px minmax(0,1fr);
        grid-template-rows:auto auto;
    }
    .spc-thumb { grid-row:1 / 3; height:100%; min-height:108px; }
    .spc-thumb img { transform:none; }
    .spc-thumb-overlay, .spc-thumb::after,
    .spc-hover-btn, .spc-featured-badge, .spc-trial-chip { display:none; }
    .spc-body {
        margin-top:0; padding:12px 14px 4px;
        background:none; border-top:none; border-radius:0;
        -webkit-backdrop-filter:none; backdrop-filter:none;
    }
    .spc-desc, .spc-tiers, .spc-status, .spc-trial-tag, .spc-price-original { display:none; }
    .spc-price { flex-wrap:nowrap; white-space:nowrap; }
    .spc-meta { margin-bottom:4px; }
    .spc-name { font-size:.98rem; margin-bottom:0; }
    .spc-footer {
        padding:6px 14px 12px; border-top:none;
        background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    }
    .spc-price-amount { font-size:1rem; }
    .spc-more { height:30px; padding:0 11px; }

    /* #5b: only first 4 cards visible while collapsed (all stay in the DOM) */
    .spg-collapsed .store-product-card:nth-child(n+5) { display:none; }
    .spg-collapsed + .spg-show-all {
        display:flex; align-items:center; justify-content:center; gap:8px;
        width:100%; margin-top:16px; height:46px; border-radius:12px;
        background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.28);
        color:#c4b5fd; font-family:inherit; font-size:.82rem; font-weight:700;
        cursor:pointer; transition:background .2s, border-color .2s;
    }
    .spg-collapsed + .spg-show-all:hover { background:rgba(124,58,237,.2); border-color:rgba(124,58,237,.45); }
}
/* Desktop / while expanded: button not rendered visually */
.spg-show-all { display:none; }
.spg-show-all[hidden] { display:none !important; }

/* #38: stats bar — no more 4+1 / 2+1+1+1 breakage.
   481-880px: all 5 in one row, stacked number-over-label, tighter paddings. */
@media(min-width:481px) and (max-width:880px) {
    .store-stats-inner { display:flex; flex-wrap:nowrap; justify-content:center; padding:0 10px; }
    .store-stat-item {
        flex:1 1 0; min-width:0;
        flex-direction:column; gap:2px; text-align:center;
        padding:14px 6px; justify-content:center;
    }
    .store-stat-num { font-size:1.1rem; }
    .store-stat-label { font-size:.68rem; white-space:nowrap; }
    .store-stat-divider { display:none; }
}
/* ≤480px: 2-column grid, 5th item full-width centered */
@media(max-width:480px) {
    .store-stats-inner { display:grid; grid-template-columns:1fr 1fr; padding:6px 14px; }
    .store-stat-item {
        flex-direction:column; gap:2px; text-align:center;
        padding:12px 6px; justify-content:center;
    }
    .store-stat-num { font-size:1.15rem; }
    .store-stat-label { font-size:.68rem; white-space:nowrap; }
    .store-stat-divider { display:none; }
    .store-stat-item:last-child { grid-column:1 / -1; }
}

/* Trial chip on product listing cards */
.spc-trial-chip {
    position:absolute; top:8px; right:8px; z-index:3;
    display:inline-flex; align-items:center; gap:4px;
    padding:5px 10px; border-radius:20px;
    background:linear-gradient(135deg,rgba(34,211,238,.85),rgba(124,58,237,.85));
    border:1px solid rgba(165,243,252,.5);
    color:#fff; font-size:.72rem; font-weight:700;
    cursor:pointer; backdrop-filter:blur(8px);
    box-shadow:0 4px 12px rgba(34,211,238,.25);
    transition:transform .15s, box-shadow .15s;
}
.spc-trial-chip:hover {
    transform:translateY(-1px) scale(1.04);
    box-shadow:0 6px 16px rgba(34,211,238,.4);
}
.spc-trial-chip:disabled { opacity:.6; cursor:wait; }

/* Safari can drop text from cards inside the continuously transformed,
   masked catalog rail until a hover forces a repaint.  Keep the visual
   layers independently composited so labels remain painted while moving. */
.cg-gcm__row {
    will-change: transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.cg-gcm .game-card-title,
.cg-gcm .game-card-badge {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
}
.cg-gcm .game-card-title {
    display: block;
    opacity: 1;
    visibility: visible;
    color: #f1f5f9;
}