/* ===========================================================
   DonatGo — дизайн-система (тёмная, неон-циан + зелёный)
   Вдохновлено Playerok (UX), KupiKod (скидки), Donatov (каталог)
   =========================================================== */
:root{
  --bg:#0A0D14; --bg-2:#0B0F18; --surface:#121826; --surface-2:#18202F; --surface-3:#202A3C;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12);
  --accent:#22D3EE; --accent-2:#34D399; --accent-3:#0EA5C4;
  --grad:linear-gradient(135deg,#22D3EE 0%,#34D399 100%);
  --grad-soft:linear-gradient(135deg,rgba(34,211,238,.18),rgba(52,211,153,.14));
  --success:#34D399; --danger:#FF3B5C; --warn:#FBBF24;
  /* Плашка скидки — белым по красному. Основной --danger для этого слишком светлый:
     белое на #FF3B5C даёт контраст 3.6 при норме 4.5, надпись мелкая и жирная. */
  --sale:#E11D48;
  --text:#EAF1FB; --text-soft:#C4CBD6; --text-muted:#8A97AD; --text-dim:#5E6B81;
  --on-accent:#04222a;            /* текст поверх акцентного градиента */
  --overlay:rgba(4,8,14,.72);     /* затемнение под модальными окнами */
  --header-bg:rgba(10,13,20,.82); /* шапка со стеклом — свой тон, не --bg */
  --star:#FBBF24; --star-off:#3a4356;
  --radius:18px; --radius-sm:12px; --radius-lg:24px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --glow:0 0 0 1px rgba(34,211,238,.4), 0 8px 30px rgba(34,211,238,.25);
  --maxw:1200px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  /* Переходы: свойства перечисляются ЯВНО. Сокращение "transition:.15s" — это
     "transition:all", а в all попадают и CSS-переменные: при смене темы Chrome
     начинает переход самой переменной, и цвет элемента замирает на старом
     значении НАВСЕГДА (ловилось на ссылках футера). Краткую форму не возвращать. */
  --tr1:color .1s,background-color .1s,border-color .1s,box-shadow .1s,transform .1s,opacity .1s,filter .1s;
  --tr15:color .15s,background-color .15s,border-color .15s,box-shadow .15s,transform .15s,opacity .15s,filter .15s;
  --tr16:color .16s,background-color .16s,border-color .16s,box-shadow .16s,transform .16s,opacity .16s,filter .16s;
  --tr18:color .18s,background-color .18s,border-color .18s,box-shadow .18s,transform .18s,opacity .18s,filter .18s;
  --tr2:color .2s,background-color .2s,border-color .2s,box-shadow .2s,transform .2s,opacity .2s,filter .2s;
}

/* ===================== светлая тема =====================
   Переопределяем только палитру — вся вёрстка уже на переменных.
   Акцент и статусные цвета не трогаем: они одинаково читаются на обоих фонах.
   Тени и подложки светлее, иначе на белом получается грязь. */
:root[data-theme="light"]{
  --bg:#F2F5FA; --bg-2:#E9EEF6; --surface:#FFFFFF; --surface-2:#F4F7FC; --surface-3:#E8EEF7;
  --border:rgba(15,23,42,.10); --border-2:rgba(15,23,42,.16);
  --text:#0F172A; --text-soft:#3F4A5C; --text-muted:#5C6879; --text-dim:#8A94A6;
  --overlay:rgba(15,23,42,.45);
  --shadow:0 10px 28px rgba(15,23,42,.10);
  --glow:0 0 0 1px rgba(14,165,196,.35), 0 8px 26px rgba(14,165,196,.18);
  --grad-soft:linear-gradient(135deg,rgba(34,211,238,.16),rgba(52,211,153,.12));
  --header-bg:rgba(255,255,255,.86);
  /* золото на белом нечитаемо (контраст 1.7) — берём тон темнее */
  --star:#C77800; --star-off:#C9D2DE;
  --text-dim:#6E7A8C;
  color-scheme:light;
}
/* На светлом фоне бирюза слишком светлая для мелкого текста — берём тон темнее. */
:root[data-theme="light"] .grad,
:root[data-theme="light"] a:not(.btn){ --accent:#0E8FA8 }
:root[data-theme="light"] .muted{color:var(--text-muted)}
:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
}
/* Фоновое свечение вынесено в отдельный фиксированный слой.
   Раньше это был background-attachment:fixed прямо на body — браузер
   перерисовывал фон на КАЖДОМ кадре прокрутки и не мог отдать скролл
   композитору. Отдельный fixed-слой даёт ту же картинку почти даром.
   Не возвращать background-attachment:fixed. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(900px 500px at 85% -8%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 500px at 5% 0%, rgba(52,211,153,.08), transparent 55%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--text-muted)}
.hidden{display:none!important}

/* scrollbar */
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ===================== buttons ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:15px;
  transition:.18s transform,.18s box-shadow,.18s background,.18s border-color;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-accent{background:var(--grad);color:#04222a;box-shadow:0 6px 22px rgba(34,211,238,.35)}
.btn-accent:hover{box-shadow:0 10px 30px rgba(34,211,238,.5);transform:translateY(-1px)}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border-2)}
.btn-ghost:hover{background:var(--surface-3);border-color:var(--accent)}
.btn-danger{background:rgba(255,59,92,.12);color:#ff8198;border:1px solid rgba(255,59,92,.3)}
.btn-danger:hover{background:rgba(255,59,92,.2)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ===================== badges ===================== */
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.2px}
.tag-accent{background:var(--grad);color:#04222a}
.tag-soft{background:var(--surface-3);color:var(--text-muted);border:1px solid var(--border)}
.tag-auto{background:rgba(52,211,153,.14);color:#5ee7a8;border:1px solid rgba(52,211,153,.3)}
.discount{display:inline-flex;align-items:center;padding:3px 8px;border-radius:8px;background:var(--danger);color:#fff;font-weight:800;font-size:12px}
.oldprice{color:var(--text-dim);text-decoration:line-through;font-size:13px;font-weight:600}

/* ===================== header ===================== */
.header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.header-row{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;letter-spacing:-.5px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;
  font-size:18px;box-shadow:0 4px 16px rgba(34,211,238,.4);overflow:hidden}
.brand .logo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.brand .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.search{flex:1;position:relative;max-width:560px}
.search input{width:100%;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border-2);
  color:var(--text);padding:0 16px 0 42px;font-size:15px;outline:none;transition:var(--tr15)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.search-results{position:absolute;top:52px;left:0;right:0;background:var(--surface);border:1px solid var(--border-2);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;z-index:60;max-height:60vh;overflow-y:auto}
.sr-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border)}
.sr-item:hover{background:var(--surface-2)}
.sr-item:last-child{border-bottom:none}
/* настоящая иконка игры в выдаче: contain, чтобы не срезало неквадратный логотип */
.sr-ic{width:38px;height:38px;border-radius:11px;object-fit:contain;background:var(--surface-2);display:block;flex-shrink:0}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.icon-btn{position:relative;width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border-2);
  display:grid;place-items:center;font-size:18px;transition:var(--tr15)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{display:block}
.cart-btn{color:var(--accent);border-color:rgba(34,211,238,.32)}
.cart-btn:hover{background:var(--grad);border-color:transparent;color:#04222a;box-shadow:0 6px 18px rgba(34,211,238,.4)}
.cart-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}

/* ===================== hero ===================== */
.hero{margin:18px 0;border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:linear-gradient(120deg,#0d2530,#0c1f2a 40%,#0e2622);border:1px solid var(--border)}
.hero-inner{position:relative;z-index:2;padding:28px 34px;max-width:600px}
.hero h1{font-size:29px;line-height:1.12;margin:0 0 9px;font-weight:900;letter-spacing:-.6px}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:14.5px;color:#bcd4dc;margin:0 0 16px;max-width:540px;line-height:1.5}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-glow{position:absolute;right:-60px;top:-50px;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.30),transparent 65%);filter:blur(20px);z-index:1}
.hero-emojis{position:absolute;right:28px;bottom:-6px;font-size:88px;opacity:.16;z-index:1;transform:rotate(-8deg)}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.trust-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
  display:flex;align-items:center;gap:13px}
.trust-card .ic{width:42px;height:42px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;font-size:21px;flex-shrink:0}
.trust-card b{display:block;font-size:14.5px}
.trust-card span{font-size:12.5px;color:var(--text-muted)}

/* category chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.chip{padding:9px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border-2);
  font-weight:700;font-size:14px;color:var(--text-muted);transition:var(--tr15)}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.active{background:var(--grad);color:#04222a;border-color:transparent}

/* section header */
.section{margin:34px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-head h2{font-size:24px;font-weight:900;margin:0;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}
.section-head .link{color:var(--accent);font-weight:700;font-size:14px}
/* Плитка раздела. Фон и форма рисуются внутри SVG (см. hicon в icons.js) —
   здесь только размер и подсветка. Тень берёт цвет самой плитки из --hic-sh:
   единый бирюзовый ореол под фиолетовой или оранжевой иконкой выглядел бы
   приклеенным. box-shadow, а не filter:drop-shadow — дешевле при прокрутке. */
.dg-hicon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:31%;
  box-shadow:0 5px 14px -3px var(--hic-sh,rgba(34,211,238,.42));flex-shrink:0}
.dg-hicon svg{display:block}
/* На светлом фоне тот же ореол читается грязным пятном — убираем размах. */
:root[data-theme="light"] .dg-hicon{box-shadow:0 4px 10px -4px var(--hic-sh,rgba(34,211,238,.42))}

/* ===================== game grid ===================== */
.games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.game-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);transition:.2s transform,.2s box-shadow,.2s border-color}
.game-card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.game-cover{height:150px;position:relative;display:grid;place-items:center;overflow:hidden}
.game-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.25),transparent 55%);mix-blend-mode:overlay}
/* ленивый фон карточки (картинка из админки) — под градиентом-подложкой и иконкой */
.game-cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;transition:.3s transform}
.game-cover::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,15,24,.08),rgba(10,15,24,.42));pointer-events:none}
.game-cover-img{position:relative;z-index:2;width:96px;height:96px;object-fit:cover;border-radius:24px;display:block;
  box-shadow:0 0 0 7px rgba(12,16,26,.30),0 0 26px 14px rgba(8,11,18,.38),0 14px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14);transition:.25s transform}
.game-card:hover .game-cover-img{transform:scale(1.07)}
/* подложка под иконку и для эмодзи/вектора (чтобы иконка не терялась на фоне) */
.game-cover .emoji{filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(8,11,18,.5))}
.game-card:hover .game-cover-bg{transform:scale(1.06)}
.game-cover.has-cover-bg::before{background:linear-gradient(180deg,rgba(10,15,24,.12),rgba(10,15,24,.5))}
.game-cover .emoji{font-size:64px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));transition:.25s transform}
.game-card:hover .game-cover .emoji{transform:scale(1.12) rotate(-4deg)}
.game-tag{position:absolute;top:12px;left:12px;z-index:2}
.game-fav{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:9px;
  background:rgba(0,0,0,.32);display:grid;place-items:center;font-size:15px;backdrop-filter:blur(4px)}
.game-body{padding:14px 16px 16px}
.game-body h3{margin:0 0 3px;font-size:16.5px;font-weight:800}
.game-body .sub{font-size:12.5px;color:var(--text-muted);margin-bottom:9px;min-height:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-rating{display:flex;align-items:center;gap:6px;margin-bottom:11px;font-size:12.5px}
.game-rating .gr-stars{display:inline-flex;gap:1px;font-size:12px;line-height:1}
.game-rating .grs{color:var(--star-off)}
.game-rating .grs.on{color:var(--star)}
.game-rating b{font-weight:800;font-size:13px;color:var(--text)}
.game-rating .gr-count{color:var(--text-muted)}
.game-meta{display:flex;align-items:center;justify-content:space-between}
.price-from{font-size:12px;color:var(--text-muted)}
.price-from b{display:block;font-size:17px;color:var(--text);font-weight:800}

/* ===================== product / discount cards (hot) ===================== */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;gap:10px;transition:var(--tr18);cursor:pointer}
.prod-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.prod-top{display:flex;align-items:center;gap:11px}
.prod-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px;flex-shrink:0}
.prod-card .pname{font-weight:800;font-size:15px;line-height:1.25}
.prod-card .pgame{font-size:12px;color:var(--text-muted)}
.price-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:auto}
.price-now{font-size:21px;font-weight:900}
.price-row .discount{align-self:center}

/* ===================== featured / Хиты продаж ===================== */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.feat-grid-full{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.feat-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:9px 11px;transition:.16s transform,.16s border-color}
.feat-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.feat-card:hover .feat-go{background:var(--grad);color:#04222a}
.feat-img{flex-shrink:0;line-height:0}
.feat-img svg,.feat-img img{border-radius:11px;display:block}
.feat-body{flex:1;min-width:0}
.feat-name{font-weight:800;font-size:13.5px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat-game{font-size:11.5px;color:var(--text-muted);margin:1px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat-price{display:flex;align-items:center;gap:6px;white-space:nowrap}
.feat-price .now{font-size:15px;font-weight:900}
.feat-price .discount{font-size:10.5px;padding:2px 6px}
.feat-go{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--surface-2);color:var(--text-muted);display:grid;place-items:center;transition:var(--tr16)}

/* ===================== game page ===================== */
.gp-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:34px;margin:22px 0 26px;
  display:flex;align-items:center;gap:26px;border:1px solid var(--border)}
.gp-hero .cover{width:108px;height:108px;border-radius:22px;display:grid;place-items:center;font-size:60px;flex-shrink:0;
  box-shadow:0 12px 30px rgba(0,0,0,.4)}
.gp-hero h1{margin:0 0 6px;font-size:32px;font-weight:900;letter-spacing:-.6px}
.gp-hero .sub{color:var(--text-soft);font-size:15.5px;margin-bottom:14px}
.gp-badges{display:flex;gap:9px;flex-wrap:wrap}
.gp-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cat-tab{padding:9px 16px;border-radius:11px;background:var(--surface);border:1px solid var(--border-2);font-weight:700;font-size:14px;color:var(--text-muted)}
.cat-tab.active{background:var(--surface-3);color:var(--text);border-color:var(--accent)}
.denoms{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.denom{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;
  cursor:pointer;transition:var(--tr15);display:flex;flex-direction:row;align-items:center;gap:14px}
.denom:hover{border-color:var(--border-2);transform:translateY(-2px)}
.denom.selected{border-color:var(--accent);background:linear-gradient(180deg,rgba(34,211,238,.10),rgba(34,211,238,.02));box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.denom-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.denom .dn{font-weight:800;font-size:15px;line-height:1.2}
.denom .dprice{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.denom .dprice .now{font-size:18px;font-weight:900}
.denom .auto{position:absolute;top:10px;right:10px}
.denom .check{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;background:var(--grad);
  display:none;place-items:center;color:#04222a;font-size:13px;font-weight:900;z-index:2}
.denom.selected .check{display:grid}
.denom.selected .auto{display:none}
/* кнопка «в корзину» на плитке товара (в стиле маркетплейсов) */
.denom-cart{flex:none;width:44px;height:44px;border-radius:13px;background:var(--grad);color:#04222a;
  display:grid;place-items:center;position:relative;cursor:pointer;border:none;
  box-shadow:0 6px 16px rgba(34,211,238,.34);transition:.15s transform,.15s box-shadow}
.denom-cart:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 24px rgba(34,211,238,.5)}
.denom-cart:active{transform:scale(.94)}
.denom-cart svg{width:21px;height:21px;stroke:#04222a;stroke-width:2}
.denom-cart .dc-plus{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;
  background:#062028;color:#5ef0c6;font-size:13px;font-weight:900;line-height:1;display:grid;place-items:center;
  border:2px solid var(--surface)}
.denom.selected .denom-cart{background:#062028;color:#5ef0c6}
.denom.selected .denom-cart svg{stroke:#5ef0c6}
.denom.selected .denom-cart .dc-plus{background:var(--grad);color:#04222a;border-color:var(--surface)}

/* Super Sale Store — вкладка-магазин, баннер, под-вкладки, бонусы */
.cat-tab.store-tab{background:linear-gradient(120deg,rgba(255,138,42,.16),rgba(255,72,110,.14));border-color:rgba(255,120,60,.55);color:#ffcaa0}
.cat-tab.store-tab.active{background:linear-gradient(120deg,rgba(255,138,42,.30),rgba(255,72,110,.26));border-color:#ff8a2a;color:#fff}
.store-banner{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(120deg,rgba(255,138,42,.14),rgba(255,72,110,.10));border:1px solid rgba(255,120,60,.42)}
.store-banner .sb-ic{font-size:24px;line-height:1;margin-top:1px;filter:drop-shadow(0 2px 6px rgba(255,120,40,.5))}
.store-banner .sb-txt{display:flex;flex-direction:column;gap:4px}
.store-banner .sb-txt b{font-size:15px;font-weight:900;color:#ffd9bd}
.store-banner .sb-txt .sb-line{font-size:12.5px;line-height:1.45;color:var(--text-muted)}
.store-banner .sb-txt .sb-warn{color:#ffb27a;font-weight:600}
.subcat-tabs{margin-bottom:16px}
.subcat-tab.active{border-color:#ff8a2a;background:rgba(255,138,42,.14);color:#fff}
.denom-bonus{position:absolute;top:8px;right:8px;z-index:2;padding:3px 8px;border-radius:9px;font-size:11px;font-weight:800;
  background:linear-gradient(120deg,#ff8a2a,#ff486e);color:#fff;box-shadow:0 3px 10px rgba(255,90,60,.4)}
.denom.has-bonus{border-color:rgba(255,120,60,.4)}
.denom.has-bonus.selected{border-color:var(--accent)}
.dn-bonus{font-size:12px;font-weight:700;color:#ffb27a;line-height:1.25}
/* Пояснение к товару в карточке оформления: регион, что нужно для выдачи. */
.bb-prod-desc{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--text-muted)}
.bb-bonus{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:11px 13px;border-radius:12px;
  background:linear-gradient(120deg,rgba(255,138,42,.14),rgba(255,72,110,.10));border:1px solid rgba(255,120,60,.4)}
.bb-bonus-ic{font-size:20px;line-height:1}
.bb-bonus div{display:flex;flex-direction:column;gap:2px}
.bb-bonus b{font-size:13px;font-weight:900;color:#ffd9bd}
.bb-bonus div span{font-size:12.5px;color:var(--text-muted)}

/* buy box */
.buybox{position:sticky;top:88px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);padding:20px}
.buybox h3{margin:0 0 14px;font-size:17px;font-weight:800}
.bb-selected{background:var(--surface-2);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.bb-selected .row{display:flex;justify-content:space-between;align-items:center}
.bb-selected .big{font-size:22px;font-weight:900}
.bb-prod{display:flex;align-items:center;gap:14px;margin-top:12px}
.bb-prod-img{flex-shrink:0;line-height:0}
.bb-prod-img img,.bb-prod-img svg{border-radius:16px}
.bb-prod-info{min-width:0}
.bb-prod-info b{display:block;font-size:15.5px;margin-bottom:5px;line-height:1.2}
.bb-prod-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field .hint{font-size:11.5px;color:var(--text-muted);margin-top:5px}
.input{width:100%;height:46px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border-2);
  color:var(--text);padding:0 14px;font-size:15px;outline:none;transition:var(--tr15)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,211,238,.15)}
textarea.input{height:auto;padding:12px 14px;resize:vertical}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--border-2);border-radius:12px;overflow:hidden;width:fit-content}
.qty button{width:42px;height:42px;font-size:20px;background:var(--surface-2)}
.qty button:hover{background:var(--surface-3);color:var(--accent)}
.qty span{width:48px;text-align:center;font-weight:800}
.bb-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.secure-note{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-top:12px;justify-content:center}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.review .stars{color:var(--star);font-size:14px;margin-bottom:8px}
.review p{margin:0 0 12px;font-size:14px;color:var(--text-soft)}
.review .who{display:flex;align-items:center;gap:10px}
.review .av{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#04222a;font-weight:900}
.review .who b{font-size:13.5px}.review .who span{font-size:11.5px;color:var(--text-muted)}

/* ===================== cart / checkout ===================== */
.page-title{font-size:28px;font-weight:900;margin:22px 0 18px;letter-spacing:-.5px;display:flex;align-items:center;gap:11px}
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.cart-item{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.cart-item .ic{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:26px;flex-shrink:0}
.cart-item .grow{flex:1;min-width:0}
.cart-item .pname{font-weight:800;font-size:15px}
.cart-item .pacc{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-controls{display:flex;align-items:center;gap:14px;flex-shrink:0}
.ci-price{text-align:right;min-width:84px}
.ci-del{width:38px;height:38px;flex-shrink:0;color:var(--text-muted)}
.ci-del:hover{color:var(--danger);border-color:var(--danger)}
.ci-del svg{display:block}
.summary{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);padding:20px;position:sticky;top:88px}
.summary h3{margin:0 0 16px;font-size:18px;font-weight:900}
.sum-row{display:flex;justify-content:space-between;margin-bottom:11px;font-size:14.5px;color:var(--text-muted)}
.sum-row.save{color:var(--success);font-weight:700}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);
  margin-top:14px;padding-top:14px;font-weight:900}
.sum-total .big{font-size:26px}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.pay-opt{border:1.5px solid var(--border-2);border-radius:12px;padding:13px;text-align:center;font-weight:700;font-size:13.5px;cursor:pointer;transition:var(--tr15)}
.pay-opt:hover{border-color:var(--border-2)}
.pay-opt.selected{border-color:var(--accent);background:rgba(34,211,238,.08)}
.pay-opt .pm-ic{font-size:22px;display:block;margin-bottom:4px}
.empty{text-align:center;padding:70px 20px;color:var(--text-muted)}
.empty .e-ic{font-size:64px;margin-bottom:14px}

/* order success */
/* Карточка заказа. Была на 620px с отступами 38px и «галкой» 84px — на телефоне
   занимала полтора экрана. Ужата и разбита на блоки: шапка, номер со статусом,
   позиции, данные заказа, действия. */
.order-ok{max-width:520px;margin:24px auto;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:26px 22px;text-align:center}
.order-ok .check-big{width:56px;height:56px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:27px;margin:0 auto 12px;color:#04222a;box-shadow:0 8px 22px rgba(34,211,238,.32)}
.order-ok h1{font-size:21px;margin:0 0 6px;letter-spacing:-.4px}
.order-ok > .muted{font-size:13.5px;line-height:1.45;margin:0}
/* Номер заказа — в заголовке, статус — обычной строкой ниже.
   Большой «галки» тут нет: она занимала 84px и ничего не сообщала. */
.ord-title{font-size:22px;font-weight:900;margin:0 0 14px;letter-spacing:-.3px;text-align:center}
/* плашка-уведомление: иконка + жирное начало и продолжение обычным текстом */
.ord-note{display:flex;gap:11px;text-align:left;background:var(--grad-soft);
  border:1px solid rgba(34,211,238,.22);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.ord-note .ic{font-size:17px;line-height:1.3;flex-shrink:0}
.ord-note p{margin:0;font-size:13px;line-height:1.45;color:var(--text-muted)}
.ord-note b{color:var(--text);font-weight:800}
/* подзаголовок группы («Состав заказа») */
.ord-sub{text-align:left;font-size:14.5px;font-weight:800;margin:16px 0 6px}
/* строки «подпись слева — значение справа» */
.ord-rows{text-align:left}
.ord-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px}
.ord-rows > div + div{border-top:1px solid var(--border)}
.ord-rows span{color:var(--text-muted);flex-shrink:0}
.ord-rows b{text-align:right;word-break:break-word;font-weight:700}
/* итоговый блок отделён линией, сумма — акцентом */
.ord-sum{border-top:1px solid var(--border);margin-top:10px;padding-top:4px}
/* Блок отзыва после выдачи — главный элемент экрана, поэтому выделен
   акцентной рамкой и подсветкой. Раньше он был последним и терялся между
   деталями заказа и кнопками, а строчка про модерацию отбивала желание писать. */
.rev-cta{text-align:center;margin-top:16px;padding:16px 14px;border-radius:16px;
  background:var(--grad-soft);border:1px solid rgba(34,211,238,.3)}
.rev-cta h3{margin:0 0 4px;font-size:17px;font-weight:900}
.rev-cta p{margin:0 0 12px;font-size:13px;color:var(--text-muted);line-height:1.4}
.rev-cta{padding:14px 13px}
.rev-cta .rev-stars{justify-content:center;margin:0 auto 12px}
.rev-cta .input{margin-bottom:10px}
/* крупные звёзды: главное действие должно быть заметным и удобным пальцу */
.rev-stars.big{font-size:34px;gap:8px}
.rev-stars.big .rs{cursor:pointer;line-height:1}
.rev-stars.big .rs:hover{transform:scale(1.12)}
/* детали заказа после выдачи — свёрнуты, чтобы не оттягивать внимание */
.ord-more{margin-top:14px;border:1px solid var(--border);border-radius:12px;text-align:left}
.ord-more > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;cursor:pointer;font-size:13.5px;font-weight:700;list-style:none}
.ord-more > summary::-webkit-details-marker{display:none}
.ord-more > summary span{color:var(--text-muted);font-weight:600}
.ord-more > summary::after{content:"⌄";margin-left:4px;color:var(--text-muted);font-size:15px}
.ord-more[open] > summary::after{content:"⌃"}
.ord-more[open] > summary{border-bottom:1px solid var(--border)}
.ord-more .ord-rows,.ord-more .ord-sub{padding:0 14px}
.ord-more .ord-sub{margin-top:10px}
.ord-more .ord-rows:last-child{padding-bottom:10px}
.ord-total{color:var(--accent);font-size:15.5px;font-weight:900}
/* На белом фоне циановый акцент даёт контраст 1.81 — сумму невозможно прочитать.
   Берём затемнённый тон (5.63). Тот, что стоит у ссылок в светлой теме (#0E8FA8),
   тоже не проходит: 3.81 при норме 4.5 для текста такого размера. */
:root[data-theme="light"] .ord-total{color:#0A7188}
.order-ok .btn-block{margin-top:14px}
.order-ok .btn-block + .btn-block{margin-top:8px}
.ord-rows span{color:var(--text-muted);flex-shrink:0}
.ord-rows b{text-align:right;word-break:break-word;font-weight:700}
.order-items{text-align:left;margin:22px 0;border-top:1px solid var(--border);padding-top:18px}

/* ===================== footer ===================== */
.footer{margin-top:60px;border-top:1px solid var(--border);background:var(--bg-2);padding:42px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-bottom:30px}
.footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:0 0 14px}
.footer a{display:block;color:var(--text-soft);font-size:14px;margin-bottom:9px;transition:var(--tr15)}
.footer a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--text-muted)}
.seller-link{color:var(--text-dim);font-size:12.5px}
.seller-link:hover{color:var(--accent)}

/* ===================== toast ===================== */
.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{background:var(--surface-3);border:1px solid var(--border-2);border-radius:12px;padding:13px 20px;font-weight:700;font-size:14px;
  box-shadow:var(--shadow);animation:tin .25s ease;display:flex;align-items:center;gap:10px}
.toast.ok{border-color:rgba(52,211,153,.4)}
.toast.err{border-color:rgba(255,59,92,.4)}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* заметное уведомление (напр. запрет смешивать Supercell Store с обычными) — в стиле сайта, не системное */
.cart-notice{position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;z-index:400;
  display:flex;align-items:center;gap:14px;width:max-content;max-width:min(560px,calc(100vw - 28px));
  background:#fff;color:#0e1422;border-radius:20px;padding:16px 22px 16px 18px;
  box-shadow:0 20px 54px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.6) inset;
  font-weight:600;font-size:15.5px;line-height:1.32;
  opacity:0;transform:translate(-50%,-22px);transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.3,1)}
.cart-notice.show{opacity:1;transform:translate(-50%,0)}
.cart-notice .cn-ic{flex:none;width:36px;height:36px;border-radius:50%;background:#ff3b30;color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(255,59,48,.4)}
.cart-notice .cn-text{padding-right:2px}
@media(max-width:560px){.cart-notice{font-size:14.5px;padding:14px 18px 14px 15px;gap:12px;border-radius:18px}.cart-notice .cn-ic{width:32px;height:32px}}

/* skeleton / loader */
.loader{display:grid;place-items:center;padding:80px;color:var(--text-muted)}
.spin{width:34px;height:34px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===================== install (PWA) ===================== */
/* Спокойная карточка, как остальные блоки страницы. Раньше здесь были
   акцентный градиент и голубая рамка — плашка кричала громче товаров,
   хотя это второстепенное предложение. */
.install-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 22px;margin-bottom:24px}
.install-cta-text{display:flex;align-items:center;gap:11px;min-width:0}
.install-cta-ic{flex-shrink:0;color:var(--text-muted)}
.install-cta-text b{display:block;font-size:15px;font-weight:800}
.install-cta-text span{font-size:13px;color:var(--text-muted)}
.im-overlay{position:fixed;inset:0;z-index:300;background:var(--overlay);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;padding:14px;animation:imf .2s ease}
@keyframes imf{from{opacity:0}to{opacity:1}}
.im-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border-2);
  border-radius:22px;padding:20px;margin-bottom:6px;box-shadow:var(--shadow);animation:imup .25s ease}
@keyframes imup{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}
.im-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.im-head b{font-size:18px;font-weight:900}
.im-x{width:30px;height:30px;border-radius:9px;background:var(--surface-2);font-size:14px;color:var(--text-muted)}
.im-x:hover{background:var(--surface-3);color:var(--text)}
.im-app{display:flex;align-items:center;gap:14px;background:var(--surface-2);border-radius:16px;padding:12px 14px;margin-bottom:18px}
.im-ic{width:54px;height:54px;border-radius:14px;flex-shrink:0}
.im-app b{display:block;font-size:16px}
.im-app span{font-size:13px;color:var(--text-muted)}
.im-steps{display:flex;flex-direction:column;gap:13px}
.im-step{display:flex;gap:12px;align-items:flex-start}
.im-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#04222a;font-weight:900;font-size:14px;display:grid;place-items:center}
.im-st b{display:block;font-size:14.5px;font-weight:700}
.im-st span{font-size:13px;color:var(--text-muted)}
.im-note{margin-top:16px;font-size:12.5px;color:var(--text-muted);background:var(--surface-2);padding:10px 12px;border-radius:10px}

/* ===================== game info / FAQ ===================== */
.gp-info{margin-top:30px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.info-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.info-h{font-size:16px;font-weight:800;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.info-col .info-h + .info-h,.how-list + .info-h,.info-desc + .info-h{margin-top:20px}
.info-desc{font-size:14px;color:var(--text-soft);line-height:1.6;margin:0}
.how-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.how-list li{font-size:14px;color:var(--text-soft);line-height:1.45;padding-left:4px}
.how-list li::marker{color:var(--accent);font-weight:800}
.guar-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.faq{display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:0 14px}
.faq-item summary{cursor:pointer;font-weight:700;font-size:14px;padding:13px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-size:19px;font-weight:800;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:0 0 14px;font-size:13.5px;color:var(--text-muted);line-height:1.55}

/* ===================== content pages ===================== */
.page-doc{max-width:760px;margin:0 auto;padding:6px 0 44px;line-height:1.65}
.page-doc .back-link{display:inline-block;color:var(--text-muted);font-size:13.5px;margin-bottom:12px;text-decoration:none}
.page-doc .back-link:hover{color:var(--accent)}
.page-doc h1.page-title{margin-bottom:14px}
.page-doc h3{font-size:16.5px;font-weight:800;color:var(--text);margin:22px 0 8px}
.page-doc p{color:var(--text-soft);margin:0 0 12px;font-size:14.5px}
.page-doc ul,.page-doc ol{margin:0 0 14px;padding-left:22px;color:var(--text-soft);font-size:14.5px}
.page-doc li{margin-bottom:7px}
.page-doc li b,.page-doc p b{color:var(--text)}
/* :not(.btn) обязателен — иначе ссылка-кнопка перекрашивалась в цвет акцента
   и текст сливался с градиентным фоном до полной нечитаемости */
.page-doc a:not(.btn){color:var(--accent);text-decoration:none}
.page-doc a:not(.btn):hover{text-decoration:underline}
/* Реквизиты продавца: «подпись → значение», строками. Таблицу не используем —
   на телефоне она либо режется, либо требует горизонтальной прокрутки. */
.legal-req{margin:10px 0 0;padding:0}
.legal-req > div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.legal-req > div:last-child{border-bottom:0}
.legal-req dt{flex:0 0 150px;margin:0;font-size:13.5px;color:var(--text-muted)}
.legal-req dd{margin:0;font-size:14px;color:var(--text);word-break:break-word}
@media(max-width:560px){
  .legal-req > div{flex-direction:column;gap:2px}
  .legal-req dt{flex:none}
}
.page-doc .doc-note{background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.28);color:#e7c15f;border-radius:12px;padding:11px 14px;font-size:13px;margin:0 0 18px}
.page-doc .contact-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}

/* ===================== промо-карусель (анимированная) ===================== */
.promo-carousel{margin-top:22px;border-radius:18px;overflow:hidden;position:relative}
.promo-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.promo-slide{position:relative;overflow:hidden;flex:0 0 100%;min-width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 34px;text-decoration:none;color:#fff;min-height:190px;
  background:radial-gradient(130% 150% at 82% 50%, rgba(255,255,255,.22), rgba(255,255,255,0) 46%), linear-gradient(120deg,var(--c1),var(--c2))}
.promo-txt{position:relative;z-index:3;display:flex;flex-direction:column;gap:6px;max-width:58%}
.promo-badge{align-self:flex-start;background:rgba(0,0,0,.30);color:#fff;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px}
.promo-slide h3{margin:2px 0 0;font-size:26px;font-weight:900;letter-spacing:-.5px;line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.20)}
.promo-game{font-size:14px;opacity:.9;font-weight:600}
.promo-price{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.promo-price .now{font-size:23px;font-weight:900}
.promo-price .oldprice{opacity:.75;text-decoration:line-through;font-size:14px}
.promo-cta{align-self:flex-start;margin-top:10px;background:#fff;color:#0a0d14;font-weight:800;font-size:14px;padding:9px 17px;border-radius:11px;box-shadow:0 6px 16px rgba(0,0,0,.18);transition:var(--tr15)}
.promo-slide:hover .promo-cta{transform:translateY(-2px)}
/* декоративные слои */
.promo-deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.promo-deco i{position:absolute;display:block}
/* Слайдов в карусели шесть, видно всегда один — остальные срезаны overflow:hidden.
   Но их декор всё равно рисовался: ~85 элементов, из них 25 с filter:blur(),
   плюс их анимации тикали каждый кадр. Это и была основная просадка FPS.
   Класс .on снимается с уходящего слайда только ПОСЛЕ перехода (см. startCarousel),
   поэтому во время пролистывания декор виден у обоих слайдов и смена плавная. */
.promo-slide:not(.on) .promo-scene,
.promo-slide:not(.on) .promo-deco{display:none}
.promo-slide:not(.on) .promo-art,
.promo-slide:not(.on) .promo-burst{animation-play-state:paused}
.pd-shape{background:rgba(255,255,255,.10)}
.pd-shape.s1{width:72px;height:72px;border-radius:22px;left:40%;top:-20px;animation:pdFloatA 7s ease-in-out infinite}
.pd-shape.s2{width:46px;height:46px;border-radius:13px;left:53%;bottom:-16px;animation:pdFloatB 9s ease-in-out infinite}
.pd-shape.s3{width:130px;height:130px;border-radius:50%;left:66%;top:14%;background:rgba(255,255,255,.06);animation:pdFloatA 12s ease-in-out infinite}
.pd-shape.s4{width:30px;height:30px;border-radius:9px;left:31%;bottom:20%;animation:pdFloatB 6s ease-in-out infinite}
.pd-spark{width:18px;height:18px;background:#fff;opacity:.85;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 3.2s ease-in-out infinite}
.pd-spark.k1{left:19%;top:22%}
.pd-spark.k2{left:47%;top:64%;animation-delay:1.1s}
.pd-spark.k3{left:72%;top:16%;width:13px;height:13px;animation-delay:.5s}
.pd-spark.k4{left:33%;top:74%;width:12px;height:12px;animation-delay:1.7s}
.pd-shape.s5{width:26px;height:26px;left:24%;top:26%;background:rgba(255,255,255,.13);transform:rotate(45deg);animation:pdFloatB 8s ease-in-out infinite}
.pd-shape.s6{width:96px;height:96px;border-radius:50%;left:11%;bottom:-34px;background:rgba(255,255,255,.06);filter:blur(3px);animation:pdFloatA 15s ease-in-out infinite}
.pd-glow{width:230px;height:230px;border-radius:50%;left:6%;top:-46%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%);filter:blur(6px);animation:pdFloatA 14s ease-in-out infinite}
.promo-slide::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.6px);background-size:24px 24px;opacity:.55}
.promo-art-wrap::after{content:"";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:150px;height:24px;z-index:1;background:radial-gradient(ellipse,rgba(0,0,0,.30),transparent 70%);filter:blur(2px)}
/* оригинальный «рассветный» пейзаж-фон (нарисован с нуля) */
/* container-type нужен, чтобы облака ездили в cqw (1% ширины слайда) —
   без него пришлось бы анимировать left, а это пересчёт layout каждый кадр. */
.promo-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;container-type:inline-size}
.promo-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to top,rgba(255,255,255,.15),transparent)}
.ps-sun{position:absolute;left:50%;bottom:-60px;transform:translateX(-50%);width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 50% 46%,#fff 0%,rgba(255,255,255,.9) 32%,rgba(255,255,255,.32) 54%,transparent 72%);animation:sunPulse 6s ease-in-out infinite}
.ps-cloud{position:absolute;height:26px;width:120px;background:rgba(255,255,255,.16);border-radius:30px;filter:blur(1px)}
.ps-cloud::before,.ps-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.ps-cloud::before{width:44px;height:44px;left:16px;top:-20px}
.ps-cloud::after{width:32px;height:32px;right:18px;top:-12px}
.ps-cloud.c1{top:24%;left:0;animation:drift 30s linear infinite}
.ps-cloud.c2{top:42%;left:0;width:92px;opacity:.6;animation:drift 40s linear infinite;animation-delay:-12s}
.ps-cloud.c3{top:15%;left:0;width:74px;opacity:.45;filter:blur(2px);animation:drift 52s linear infinite;animation-delay:-28s}
/* Едем transform-ом, а НЕ left: left анимирует layout — браузер пересчитывал
   геометрию документа 60 раз в секунду, постоянно, даже когда карусель не видна.
   cqw = 1% ширины .promo-scene, поэтому движение осталось тем же. */
@keyframes drift{from{transform:translateX(-22cqw)}to{transform:translateX(120cqw)}}
/* filter:brightness перерисовывал 210px градиент каждый кадр — заменён на scale */
@keyframes sunPulse{0%,100%{opacity:.92;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}
/* анимированный пин-маскот (видео с прозрачностью) */
.promo-pin{position:absolute;right:270px;bottom:12px;width:98px;height:98px;object-fit:contain;z-index:6;pointer-events:none;filter:drop-shadow(0 9px 16px rgba(0,0,0,.40));animation:promoFloat 4.5s ease-in-out infinite}
@media(max-width:960px){.promo-pin{display:none}}
/* товар с сиянием */
.promo-art-wrap{position:relative;z-index:2;flex-shrink:0;width:210px;height:180px;display:grid;place-items:center}
.promo-burst{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 34%,transparent 68%);mask:radial-gradient(circle,#000 34%,transparent 68%);
  animation:spinSlow 22s linear infinite}
.promo-art{position:relative;z-index:2;width:150px;height:150px;display:grid;place-items:center;filter:drop-shadow(0 12px 22px rgba(0,0,0,.32));animation:promoFloat 4.5s ease-in-out infinite}
.promo-art img,.promo-art svg{width:100%;height:100%;object-fit:contain}
.promo-art img{border-radius:16px}
.promo-dots{position:absolute;bottom:12px;left:0;right:0;z-index:4;display:flex;gap:7px;justify-content:center}
.promo-dots .pd{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:var(--tr2)}
.promo-dots .pd.on{background:#fff;width:22px;border-radius:5px}
@keyframes promoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes spinSlow{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pdFloatA{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-16px) rotate(22deg)}}
@keyframes pdFloatB{0%,100%{transform:translate(0,0) rotate(45deg)}50%{transform:translate(-16px,12px) rotate(20deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.promo-art,.promo-burst,.pd-shape,.pd-spark,.pd-glow,.ps-cloud,.ps-sun,.promo-pin{animation:none!important}}
/* ===================== живая лента ===================== */
.live-strip{display:flex;align-items:center;gap:10px;margin-top:14px;padding:9px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.live-dot{width:9px;height:9px;border-radius:50%;background:#34D399;animation:pulse 1.8s infinite;flex-shrink:0}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.live-track{display:flex;gap:26px;white-space:nowrap;animation:marquee 34s linear infinite}
.live-strip:hover .live-track{animation-play-state:paused}
.lt-chip{font-size:13px;color:var(--text-muted);font-weight:600}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ===================== заявка «нет игры» ===================== */
/* полёт товара в корзину */
.fly-ghost{position:fixed;z-index:120;pointer-events:none;border-radius:14px;overflow:hidden;
  transition:transform .52s cubic-bezier(.5,-0.25,.5,1), opacity .52s ease-in;will-change:transform,opacity}
.fly-ghost img,.fly-ghost svg{width:100%;height:100%;object-fit:cover;display:block}
@keyframes cartBump{0%{transform:scale(1)}35%{transform:scale(1.22)}60%{transform:scale(.93)}100%{transform:scale(1)}}
.cart-btn.bump{animation:cartBump .42s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){.fly-ghost{display:none}.cart-btn.bump{animation:none}}

/* предупреждение у поля — заметнее обычной подсказки */
/* Поле-переключатель («через что вы входите в игру»). Два-три равных варианта,
   один всегда выбран. Переход — через готовый список --tr15: краткая форма
   означала бы transition:all, а в all попадают и CSS-переменные. */
.seg{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.seg-b{flex:1;min-width:0;padding:10px 8px;border:0;border-radius:9px;background:transparent;
  color:var(--text-muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:var(--tr15);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg-b:hover{color:var(--text)}
.seg-b.on{background:var(--grad);color:#04222a}
.fwarn{display:flex;align-items:flex-start;gap:8px;margin-top:7px;padding:9px 11px;border-radius:10px;
  background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.32);color:#f0cd72;font-size:12.5px;line-height:1.5}
.fw-ic{flex-shrink:0;width:17px;height:17px;border-radius:50%;background:#fbbf24;color:#3a2a00;
  font-weight:900;font-size:12px;display:grid;place-items:center;margin-top:1px}
/* группа полей аккаунта на чекауте: одна игра = один блок */
.co-group{border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--bg-2)}
.co-group:last-child{margin-bottom:0}
.co-gtitle{font-size:13px;font-weight:800;color:var(--text-muted);margin-bottom:10px}
.co-group .field:last-child{margin-bottom:0}
/* подписи у полей чекаута */
.field .req{color:var(--accent);font-weight:700}
.field .opt{color:var(--text-dim);font-weight:600}
.field-hint{display:block;font-size:12px;line-height:1.45;color:var(--text-dim);margin-top:6px}
.req-box{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 22px}
.req-txt b{display:block;font-size:16px}
.req-txt span{font-size:13.5px;color:var(--text-muted)}
/* ===================== избранное ===================== */
.game-fav{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border:none;border-radius:50%;background:rgba(4,8,14,.5);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:var(--tr15)}
.game-fav:hover{background:rgba(4,8,14,.78);transform:scale(1.1)}
.game-fav.on{color:#ff5c7a}
/* ===================== форма отзыва ===================== */
.rev-form{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
.rev-form>b{display:block;margin-bottom:10px;font-size:15px}
.rev-stars{display:flex;gap:4px;margin-bottom:10px;font-size:26px;cursor:pointer;width:max-content}
.rev-stars .rs{color:var(--star-off);transition:var(--tr1)}
.rev-stars .rs.on{color:var(--star)}
.rev-form .input{width:100%;margin-bottom:10px;background:var(--bg-2);border:1px solid var(--border-2);border-radius:11px;color:var(--text);padding:11px 13px;font-size:14px;font-family:inherit;outline:none}
.rev-form .input:focus{border-color:var(--accent)}
.rev-form textarea.input{resize:vertical}
/* промокод */
.promo-row{display:flex;gap:8px}
.promo-row .input{flex:1}
/* ===================== соцсети ===================== */
.socials{display:flex;gap:8px;margin-top:14px}
.soc{width:34px;height:34px;border-radius:9px;background:var(--surface-2,#141a26);border:1px solid var(--border);display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--text-muted);text-decoration:none;transition:var(--tr15)}
.soc:hover{border-color:var(--accent);color:var(--accent)}
/* ===================== профиль + авторизация ===================== */
.profile-btn{display:flex;align-items:center;gap:8px;width:auto;padding:0 14px}
.profile-btn .pf-label{font-size:13.5px;font-weight:700}
.profile-btn.authed{padding:0 12px 0 6px}
.profile-btn .pf-av{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#04222a;display:grid;place-items:center;font-weight:900;font-size:14px;flex-shrink:0}
.profile-btn .pf-name{font-size:13.5px;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-overlay{position:fixed;inset:0;z-index:120;background:var(--overlay);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;animation:aFade .18s ease}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border-2);border-radius:20px;padding:26px 24px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:aPop .22s cubic-bezier(.2,.9,.3,1.2)}
.auth-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;border-radius:9px;background:var(--surface-2,#141a26);color:var(--text-muted);font-size:15px;cursor:pointer}
.auth-x:hover{color:var(--text)}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;font-size:21px;font-weight:900}
.auth-brand .logo{width:34px;height:34px;border-radius:9px;overflow:hidden;display:block}
.auth-brand .logo img{width:100%;height:100%;object-fit:cover}
.auth-sub{text-align:center;color:var(--text-muted);font-size:13px;margin:6px 0 16px}
.auth-hint{font-size:13px;line-height:1.55;color:var(--text-muted);margin:0 0 14px;text-align:center}
.auth-hint b{color:var(--text)}
.auth-alt{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.auth-link{border:none;background:none;color:var(--text-muted);font-size:12.5px;font-weight:700;cursor:pointer;padding:4px;transition:var(--tr15)}
.auth-link:hover{color:var(--accent)}
.auth-link:disabled{opacity:.5;cursor:default}
.afield{margin-bottom:12px}
.afield label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--text-muted)}
.auth-card .input{width:100%;background:var(--bg-2);border:1px solid var(--border-2);border-radius:11px;color:var(--text);padding:12px 13px;font-size:14.5px;outline:none;font-family:inherit}
.auth-card .input:focus{border-color:var(--accent)}
.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--text-dim);font-size:12.5px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-provs{display:flex;flex-direction:column;gap:9px}
.prov{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px;border-radius:12px;border:1px solid var(--border-2);background:var(--bg-2);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;transition:var(--tr15)}
.prov:hover{transform:translateY(-1px);border-color:var(--accent)}
.prov-ic{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff}
.prov.vk .prov-ic{background:#07F}
.prov.gg .prov-ic{background:#fff;color:#4285F4}
.prov.tg .prov-ic{background:#2AABEE}
.auth-agree{text-align:center;color:var(--text-dim);font-size:11.5px;line-height:1.5;margin:16px 0 0}
.auth-agree a{color:var(--text-muted)}
@keyframes aFade{from{opacity:0}to{opacity:1}}
@keyframes aPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* личный кабинет */
.cab{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start;margin-bottom:40px}
.cab-side{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;position:sticky;top:88px}
.cab-user{display:flex;align-items:center;gap:12px}
.cab-av{width:52px;height:52px;border-radius:50%;background:var(--grad);color:#04222a;display:grid;place-items:center;font-weight:900;font-size:22px;flex-shrink:0}
.cab-uinfo b{display:block;font-size:16px}
.cab-nrow{display:flex;align-items:center;gap:4px;min-height:26px}
.cab-edit{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:12px;line-height:1;padding:4px 5px;border-radius:7px;opacity:.65;transition:var(--tr15)}
.cab-edit:hover{opacity:1;color:var(--accent);background:var(--bg-2)}
.cab-name-input{height:34px;font-size:15px;font-weight:800;padding:0 10px;min-width:0;flex:1}
.cab-uinfo span{font-size:12.5px;color:var(--text-muted);word-break:break-all}
.cab-meta{margin-top:14px;font-size:12px;color:var(--text-dim);line-height:1.5}
/* ===================== чат с поддержкой ===================== */
/* Приглашение войти на месте чата поддержки. Тот же размер, что и у самого
   чата, чтобы страница не прыгала после входа. */
.sup-guest{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin:14px 0 18px}
.sup-guest b{font-size:15.5px}
.sup-guest span{font-size:13.5px;color:var(--text-muted);line-height:1.55}
.sup-guest .btn{margin-top:4px}
/* Чат поддержки идёт внутри текстовой страницы — отбиваем его от абзацев. */
.page-doc .chat-sec{margin:14px 0 22px}
.chat-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
/* без scroll-behavior:smooth — он ломает программную прокрутку вниз сразу
   после перерисовки ленты */
.chat-log{max-height:420px;min-height:160px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.cday{align-self:center;font-size:11.5px;font-weight:700;color:var(--text-dim);background:var(--bg-2);border:1px solid var(--border);
  padding:3px 12px;border-radius:999px;margin:6px 0 2px}
.cmsg{max-width:78%;padding:9px 13px 7px;border-radius:15px;display:flex;flex-direction:column;gap:4px;word-break:break-word}
.cmsg-t{font-size:14.5px;line-height:1.45;white-space:pre-wrap}
.cmsg.their{align-self:flex-start;background:var(--bg-2);border:1px solid var(--border);border-bottom-left-radius:5px}
.cmsg.mine{align-self:flex-end;background:var(--grad);color:#04222a;border-bottom-right-radius:5px}
.cmsg.sys{align-self:center;max-width:92%;background:rgba(34,211,238,.09);border:1px dashed rgba(34,211,238,.35);
  border-radius:13px;text-align:center;color:var(--text-muted)}
.cmsg.sys .cmsg-t{font-size:13px}
.cmsg-meta{display:flex;align-items:center;gap:5px;align-self:flex-end;font-size:10.5px;opacity:.7;line-height:1}
.cmsg.mine .cmsg-meta{color:#04222a}
.cmsg-read{font-size:11px;letter-spacing:-2px}
.cmsg-read.on{color:#0a6b5a;font-weight:900}
.cmsg-imgw{display:block;border-radius:11px;overflow:hidden;max-width:240px}
.cmsg-img{display:block;width:100%;height:auto}
.chat-bar{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--border);background:var(--bg-2)}
.chat-bar textarea{flex:1;resize:none;min-height:42px;max-height:120px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border-2);color:var(--text);padding:11px 13px;font:inherit;font-size:16px;outline:none;line-height:1.4}   /* 16px: меньше — и iOS зумит страницу при фокусе */
.chat-bar textarea:focus{border-color:var(--accent)}
.chat-att,.chat-send{width:42px;height:42px;flex-shrink:0;border-radius:12px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--text-muted);font-size:17px;cursor:pointer;transition:var(--tr15);display:grid;place-items:center}
.chat-att:hover{border-color:var(--accent);color:var(--accent)}
.chat-send{background:var(--grad);color:#04222a;border-color:transparent;font-weight:900}
.chat-send:hover{transform:translateY(-1px)}
@media(max-width:600px){
  .chat-log{max-height:340px;padding:12px}
  .cmsg{max-width:88%}
  .cmsg-imgw{max-width:190px}
}

/* ===================== кошелёк ===================== */
.wallet-card{margin-top:14px;padding:14px;border-radius:14px;background:linear-gradient(150deg,rgba(34,211,238,.13),rgba(52,211,153,.07));border:1px solid rgba(34,211,238,.28)}
.wc-label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);letter-spacing:.2px}
.wc-sum{display:block;font-size:24px;font-weight:900;letter-spacing:-.5px;margin:2px 0 12px}
.wc-pending{display:block;font-size:11.5px;line-height:1.45;color:#fcd34d;margin:-6px 0 10px}
.wallet-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:10px 0 6px;
  padding:20px 22px;border-radius:18px;background:linear-gradient(150deg,rgba(34,211,238,.14),rgba(52,211,153,.07));border:1px solid rgba(34,211,238,.28)}
.wh-label{display:block;font-size:13px;font-weight:700;color:var(--text-muted)}
.wh-sum{display:block;font-size:32px;font-weight:900;letter-spacing:-1px;margin-top:2px}
.wops{display:flex;flex-direction:column;gap:8px}
.wop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 15px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:var(--tr15);font:inherit}
.wop:hover{border-color:var(--accent);transform:translateY(-1px)}
.wop.static{cursor:default}
.wop.static:hover{border-color:var(--border);transform:none}
.wop-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:16px;font-weight:800;flex-shrink:0;
  background:var(--bg-2);border:1px solid var(--border)}
.wop-ic.plus{color:#5ee7a8;border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.12)}
.wop-ic.minus{color:#ff8198;border-color:rgba(255,59,92,.3);background:rgba(255,59,92,.1)}
.wop-ic.neutral{color:var(--text-muted)}
.wop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wop-txt b{font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wop-txt span{font-size:12px;color:var(--text-muted)}
.wop-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.wop-r b{font-size:15px;font-weight:900;white-space:nowrap}
.wop-r b.plus{color:#5ee7a8}
.wop-r b.minus{color:#ff8198}
.wop-r span{font-size:11.5px;color:var(--text-dim);white-space:nowrap}
/* окно операции / пополнения */
.modal-card{text-align:left}
.modal-h{font-size:20px;font-weight:900;margin:0 0 14px;letter-spacing:-.3px}
.op-rows{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.op-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 14px;background:var(--surface)}
.op-row span{font-size:12.5px;color:var(--text-muted);flex-shrink:0}
.op-row b{font-size:13.5px;font-weight:700;text-align:right;word-break:break-word}
.topup-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tq{flex:1;min-width:72px;padding:10px 8px;border-radius:11px;background:var(--bg-2);border:1px solid var(--border-2);
  color:var(--text);font-weight:800;font-size:13.5px;cursor:pointer;transition:var(--tr15);font-family:inherit}
.tq:hover{border-color:var(--accent);color:var(--accent)}
.pay-opt.disabled{opacity:.45;cursor:not-allowed}
.pm-sub{display:block;width:100%;font-size:11px;font-weight:700;color:var(--text-dim);margin-top:2px}
@media(max-width:600px){
  .wallet-hero{padding:16px 18px}
  .wh-sum{font-size:27px}
  .wop{padding:11px 12px;gap:10px}
  .wop-txt b{font-size:13.5px}
  .wop-r b{font-size:14px}
}
.cab-orders{display:flex;flex-direction:column;gap:10px}
.cab-order{display:grid;grid-template-columns:160px 1fr auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px 16px;text-decoration:none;color:var(--text);transition:var(--tr15)}
.cab-order:hover{border-color:var(--accent)}
.co-l b{display:block;font-size:14px}
.co-l span{font-size:11.5px;color:var(--text-muted)}
.co-items{font-size:13px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-r{display:flex;align-items:center;gap:12px;white-space:nowrap}
@media(max-width:820px){.cab{grid-template-columns:1fr}.cab-side{position:static}.cab-order{grid-template-columns:1fr auto}.co-items{display:none}}
@media(max-width:560px){.profile-btn .pf-label,.profile-btn .pf-name{display:none}.profile-btn{padding:0;width:44px;justify-content:center}.profile-btn.authed{padding:0}}
/* страница отзывов (игра + купленный товар) */
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:14px}
.rv-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.rv-top{display:flex;align-items:center;gap:11px}
.rv-av{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#04222a;display:grid;place-items:center;font-weight:900;font-size:17px;flex-shrink:0}
.rv-who{flex:1;min-width:0}
.rv-who b{display:block;font-size:14.5px}
/* Дата теперь несёт смысл («Сегодня в 00:53»), а не служит фоном, поэтому
   --text-muted вместо --text-dim: у последнего контраст 3.3 при норме 4.5. */
.rv-date{font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.rv-stars{color:var(--star);font-size:16px;letter-spacing:2px;line-height:1}
.rv-stars .rv-empty{color:var(--star-off)}
.rv-text{margin:0;font-size:14px;line-height:1.55;color:var(--text-soft)}
.rv-item{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--bg-2);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--text-muted);text-decoration:none;transition:var(--tr15)}
.rv-item:hover{border-color:var(--accent);color:var(--accent)}
.rv-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}

/* ---- товар, о котором отзыв ---- */
/* Плашка внизу карточки: картинка товара, название и цена. Ровно то, чего не
   хватало раньше, — по голому тексту непонятно, что человек вообще покупал. */
.rv-prod{display:flex;align-items:center;gap:11px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:12px;padding:9px 12px 9px 9px;text-decoration:none;transition:var(--tr15)}
.rv-prod:hover{border-color:var(--border-2)}
.rv-pimg{width:44px;height:44px;border-radius:9px;background:var(--surface-2);flex-shrink:0;
  display:grid;place-items:center;overflow:hidden}
/* contain, а не cover: картинки товаров не квадратные, cover срезает края */
.rv-pimg img{width:100%;height:100%;object-fit:contain;display:block}
.rv-pinfo{min-width:0;display:flex;flex-direction:column;gap:3px}
.rv-pinfo b{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-price{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-style:normal}
.rv-price i{font-style:normal;font-weight:900;font-size:15px;color:var(--text)}
.rv-price em{font-style:normal;font-weight:800;font-size:11.5px;color:#fff;background:var(--sale);
  border-radius:999px;padding:2px 7px;line-height:1.35}
.rv-price s{font-size:12px;color:var(--text-muted)}
.rv-more{font-size:11.5px;color:var(--text-muted);font-weight:700}

/* ---- скриншот от покупателя ---- */
/* Миниатюра намеренно небольшая (112px): отзыв — это прежде всего текст, а
   снимок к нему приложение. По клику открывается полный размер. */
.rv-shot{position:relative;width:112px;height:112px;padding:0;border:1px solid var(--border);
  border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:zoom-in;align-self:flex-start;
  transition:var(--tr15)}
.rv-shot:hover{border-color:var(--accent)}
.rv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.rv-zoom{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:8px;
  background:rgba(6,14,22,.72);color:#fff;display:grid;place-items:center;backdrop-filter:blur(3px)}

/* ---- выбор фото в форме отзыва ---- */
.rev-photo{margin:0 0 10px}
.rev-photo.busy{opacity:.55;pointer-events:none}
.rev-add{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px dashed var(--border-2);
  border-radius:11px;padding:10px 14px;font:inherit;font-size:13.5px;font-weight:700;color:var(--text-muted);
  cursor:pointer;transition:var(--tr15)}
.rev-add:hover{border-color:var(--accent);color:var(--accent)}
.rev-prev{position:relative;width:96px;height:96px;border-radius:11px;overflow:hidden;border:1px solid var(--border)}
.rev-prev img{width:100%;height:100%;object-fit:cover;display:block}
.rev-del{position:absolute;top:5px;right:5px;width:26px;height:26px;border:0;border-radius:8px;
  background:rgba(6,14,22,.78);color:#ff9d9d;display:grid;place-items:center;cursor:pointer;padding:0}

/* ---- просмотр скриншота во весь экран ---- */
.img-view{position:fixed;inset:0;z-index:120;background:rgba(4,8,14,.92);display:grid;place-items:center;
  padding:24px;cursor:zoom-out;animation:ivIn .16s ease}
@keyframes ivIn{from{opacity:0}to{opacity:1}}
.img-view img{max-width:100%;max-height:100%;border-radius:12px;display:block;cursor:default}
.iv-close{position:fixed;top:16px;right:18px;width:40px;height:40px;border:0;border-radius:12px;
  background:rgba(255,255,255,.12);color:#fff;font-size:19px;cursor:pointer;display:grid;place-items:center}
.iv-close:hover{background:rgba(255,255,255,.2)}
.rv-check{text-align:center;margin:22px 0 42px;color:var(--text-muted);font-size:13.5px}
.rv-check a{color:var(--accent);text-decoration:none;font-weight:700}
.how-guide li{color:var(--text-muted)}
.guide-img{width:100%;height:auto;border-radius:14px;margin-top:6px;display:block;border:1px solid var(--border)}
.guide-sub{font-size:14.5px;font-weight:800;margin:2px 0 10px;color:var(--text);line-height:1.4}
/* фирменные фоны шапок игр (оригинальные, без лого игр) */
.gp-hero{position:relative;overflow:hidden}
.gp-hero>*{position:relative;z-index:1}
.gp-hero .hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.gp-hero .hero-fx svg{width:100%;height:100%;display:block}
.gp-hero.hero-brawl{background:linear-gradient(115deg,#0a1730 0%,#0b1c38 52%,#10305f 100%)!important;border:1px solid rgba(60,150,255,.22)}
.gp-hero.hero-coc{background:linear-gradient(115deg,#0e1508 0%,#141c0a 50%,#2a380f 100%)!important;border:1px solid rgba(150,170,50,.2)}
.gp-hero.hero-hayday{background:linear-gradient(115deg,#08170f 0%,#0c2018 48%,#1e3a1a 100%)!important;border:1px solid rgba(120,190,60,.2)}
.gp-hero.hero-cr{background:linear-gradient(115deg,#081428 0%,#0a1b36 52%,#0f2c58 100%)!important;border:1px solid rgba(60,140,255,.2)}
.gp-hero .hero-fx .hspk use{animation:heroTwinkle 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.gp-hero .hero-fx .hspk use:nth-child(2){animation-delay:.7s}
.gp-hero .hero-fx .hspk use:nth-child(3){animation-delay:1.4s}
.gp-hero .hero-fx .hspk use:nth-child(4){animation-delay:.4s}
.gp-hero .hero-fx .hspk use:nth-child(5){animation-delay:1.1s}
@keyframes heroTwinkle{0%,100%{opacity:.2;transform:scale(.72)}50%{opacity:.95;transform:scale(1)}}
/* Телефон: баннер занимал 261px при экране 812px — треть первого экрана,
   и каталог уходил под сгиб. Ужимаем отступы, типографику и арт.
   Отдельно `white-space:nowrap` у бейджа: в узкой колонке «−17% · Горячее
   предложение» переносилось на две строки и давало 46px вместо 22 —
   это была самая большая потеря высоты. Ширину текста поэтому увеличиваем. */
@media(max-width:600px){
  .promo-carousel{margin-top:14px}
  .promo-slide{padding:13px 15px;min-height:104px;gap:10px}
  .promo-txt{max-width:64%;gap:3px}
  /* nowrap без страховки опасен: длинная скидка («−100% · …») вылезла бы
     поверх картинки. max-width+ellipsis обрезают вместо того, чтобы ломать вёрстку. */
  .promo-badge{font-size:10px;padding:3px 9px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .promo-slide h3{font-size:17px;margin:1px 0 0}
  .promo-game{font-size:11.5px}
  .promo-price{margin-top:2px;gap:8px}
  .promo-price .now{font-size:18px}
  .promo-price .oldprice{font-size:12px}
  .promo-cta{margin-top:7px;font-size:12.5px;padding:7px 13px;border-radius:9px}
  .promo-art-wrap{width:96px;height:96px}
  .promo-art{width:78px;height:78px}
  .promo-art-wrap::after{width:84px;height:16px;bottom:4px}
  .promo-burst{width:140px;height:140px}
  .promo-dots{bottom:7px;gap:5px}
  .promo-dots .pd{width:6px;height:6px}
  .promo-dots .pd.on{width:16px;border-radius:4px}
  .promo-pin{width:50px;height:50px;right:6px;bottom:2px}
}

/* ===================== icons / art ===================== */
.game-cover svg, .prod-ic svg, .cart-item .ic svg, .denom-art svg{display:block}
.denom-art{flex-shrink:0;line-height:0}
.prod-ic{background:none;overflow:hidden}
.cart-item .ic{background:none}
.sr-item .prod-ic{overflow:hidden}

/* ===================== responsive ===================== */
@media(max-width:980px){
  .games-grid,.prod-grid{grid-template-columns:repeat(3,1fr)}
  .gp-layout,.cart-layout,.info-grid{grid-template-columns:1fr}
  .feat-grid:not(.feat-grid-full){grid-template-columns:repeat(2,1fr)}
  .buybox,.summary{position:static}
  .trust{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* Карточка заказа на телефоне — ещё компактнее */
  .order-ok{margin:14px auto;padding:20px 16px;border-radius:18px}
  .ord-title{font-size:19px;margin-bottom:12px}
  .ord-note{padding:11px 12px;gap:9px}
  .ord-note p{font-size:12.5px}
  .ord-rows > div{font-size:13px;padding:5px 0}
  .header-row{height:60px;gap:10px}
  .brand span.txt{display:none}
  .hero-inner{padding:30px 22px}.hero h1{font-size:28px}
  .games-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .denoms,.feat-grid:not(.feat-grid-full){grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .section-head h2{font-size:20px}
}

/* ============ мобильная витрина игры: компактнее + шторка оформления ============ */
/* «Описание и как пополнить» внутри окна оформления */
.bb-how{margin-top:14px;border-top:1px solid var(--border);padding-top:2px}
.bb-how summary{cursor:pointer;font-weight:800;font-size:13.5px;color:var(--text-muted);padding:9px 0;list-style:none;display:flex;align-items:center;gap:8px}
.bb-how summary::-webkit-details-marker{display:none}
.bb-how summary::after{content:"⌄";margin-left:auto;font-size:15px;transition:var(--tr2)}
.bb-how[open] summary{color:var(--text)}
.bb-how[open] summary::after{transform:rotate(180deg)}
.bb-how-desc{font-size:13px;color:var(--text-muted);line-height:1.55;margin:2px 0 10px}
.bb-how-steps{margin:0 0 10px;padding-left:18px;font-size:13px;color:var(--text-muted);line-height:1.7}
.bb-how-guar{display:flex;gap:6px;flex-wrap:wrap}
.bb-how-guar .tag{font-size:11px;padding:5px 9px}

/* нижняя «пилюля-корзина» (быстрый путь к оплате) — только на телефоне */
.cart-pill{display:none}

/* элементы шторки скрыты на десктопе */
.sheet-head,.sheet-backdrop{display:none}

@media(max-width:980px){
  /* шапка игры компактнее */
  .gp-hero{padding:18px;gap:14px;margin:14px 0 16px;border-radius:16px}
  .gp-hero .cover{width:66px;height:66px;border-radius:15px;font-size:34px}
  .gp-hero h1{font-size:22px;margin-bottom:3px}
  .gp-hero .sub{font-size:12.5px;margin-bottom:9px}
  .gp-badges{gap:6px}
  .gp-badges .tag{font-size:11px;padding:5px 9px}
  /* категории — перенос в несколько строк, чтобы все были видны (в т.ч. Supercell Store) */
  .cat-tabs{gap:7px;margin-bottom:14px;flex-wrap:wrap;overflow:visible}
  .cat-tab{flex:0 1 auto;max-width:100%;padding:8px 13px;font-size:13px;white-space:normal;text-align:center}
  /* «Supercell Store» — на всю ширину строки, заметный акцент, всегда виден */
  .cat-tabs .cat-tab.store-tab{flex:1 1 100%;justify-content:center;font-weight:800}
  /* карточки товаров плотнее */
  .denoms{gap:9px}
  .denom{padding:10px 12px;border-radius:12px;gap:11px}
  .denom-art svg,.denom-art img{width:52px!important;height:52px!important}
  .denom .dn{font-size:13.5px}
  .denom .dprice .now{font-size:15.5px}
  .denom.selected{box-shadow:0 0 0 2px rgba(34,211,238,.18)}

  /* окно «Оформление» превращается в шторку снизу */
  #buyPane.buy-pane{position:fixed;left:0;right:0;bottom:0;z-index:130;
    background:var(--surface);border-top:1px solid var(--border-2);border-radius:20px 20px 0 0;
    max-height:90vh;overflow-y:auto;transform:translateY(106%);
    transition:transform .32s cubic-bezier(.25,.9,.3,1);box-shadow:0 -14px 44px rgba(0,0,0,.55);
    padding:0 0 calc(18px + env(safe-area-inset-bottom))}
  #buyPane.buy-pane.open{transform:translateY(0)}
  #buyPane .sheet-head{display:block;position:sticky;top:0;background:var(--surface);padding:10px 0 6px;z-index:2}
  #buyPane .sheet-grab{display:block;width:42px;height:5px;border-radius:3px;background:var(--border-2);margin:0 auto}
  #buyPane .sheet-close{display:grid;place-items:center;position:absolute;top:8px;right:14px;width:32px;height:32px;border-radius:9px;background:var(--surface-2,#141a26);color:var(--text-muted);font-size:14px}
  #buyPane .buybox{border:none;padding:2px 18px 8px;background:transparent;border-radius:0}
  .sheet-backdrop{display:block;position:fixed;inset:0;z-index:129;background:var(--overlay);opacity:0;pointer-events:none;transition:opacity .3s}
  .sheet-backdrop.open{opacity:1;pointer-events:auto}
  body.sheet-lock{overflow:hidden}

  /* пилюля-корзина */
  .cart-pill{display:flex;position:fixed;left:12px;right:12px;bottom:14px;z-index:70;
    align-items:center;justify-content:space-between;gap:12px;background:var(--grad);color:#04222a;
    font-weight:900;font-size:15px;padding:13px 18px;border-radius:15px;text-decoration:none;
    box-shadow:0 10px 30px rgba(34,211,238,.32);margin-bottom:env(safe-area-inset-bottom)}
  .cart-pill .cp-l{display:flex;align-items:center;gap:8px}
  body[data-route="cart"] .cart-pill,body[data-route="checkout"] .cart-pill,body[data-route="order"] .cart-pill,body.sheet-lock .cart-pill{display:none}
}

/* =====================================================================
   ПОЛНАЯ АДАПТАЦИЯ: телефон + планшет + ландшафт + оптимизация
   ===================================================================== */
/* 1) Никакого горизонтального «разделения экрана» — жёсткий предохранитель.
   overflow-x:clip не ломает sticky-шапку (в отличие от hidden) */
html,body{overflow-x:clip}
img,svg,video,canvas{max-width:100%}
.container{width:100%}
/* карусель и горизонтальные ленты сами клипаются своим контейнером */
.promo-carousel,.live-strip{max-width:100%}

/* 2) Оптимизация: лишние анимации — только на десктопе.
   Фиксированного фона на body больше нет, он живёт в body::before. */
@media(max-width:1024px){
  .header{backdrop-filter:blur(8px)}
  /* декоративные бесконечные анимации гасим на тач-устройствах — меньше нагрузка, нет лагов */
  .promo-burst,.pd-shape,.pd-spark,.pd-glow,.ps-cloud,.ps-sun,.promo-pin,.hero-glow{animation:none!important}
  .promo-art{animation:none!important}
  .gp-hero .hero-fx .hspk use{animation:none!important}
}

/* 3) ПЛАНШЕТ (641–980) */
@media(max-width:980px) and (min-width:641px){
  .games-grid,.prod-grid{grid-template-columns:repeat(3,1fr)!important}
  .feat-grid:not(.feat-grid-full){grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px}
}

/* 4) ТЕЛЕФОН (≤640) — размеры под палец, без «несуразных» карточек */
@media(max-width:640px){
  .container{padding:0 14px}
  .page-title{font-size:23px;margin:16px 0 14px}
  /* каталог: 2 колонки ровных карточек */
  .games-grid,.prod-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .game-cover{height:118px}
  .game-cover-img{width:72px;height:72px;border-radius:18px}
  .game-cover .emoji{font-size:48px}
  .game-body{padding:11px 12px 13px}
  .game-body h3{font-size:15px}
  .prod-card{padding:13px}
  .price-now{font-size:19px}
  /* главный экран-баннер */
  .hero-inner{padding:22px 18px;max-width:100%}
  .hero h1{font-size:23px}
  .hero p{font-size:13px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .hero-emojis{font-size:60px;right:12px}
  /* доверие/чипы */
  .chips{gap:8px}
  .chip{padding:8px 13px;font-size:13px}
  /* хиты/лента карточек — одной колонкой, читаемо */
  .feat-grid:not(.feat-grid-full){grid-template-columns:1fr}
  .feat-grid-full{grid-template-columns:1fr;gap:10px}
  /* КОРЗИНА: строка в 2 ряда — иконка+название сверху, управление снизу (убирает overflow) */
  .cart-item{flex-wrap:wrap;padding:12px 14px}
  .cart-item .grow{flex:1 1 auto}
  .ci-controls{width:100%;justify-content:space-between;gap:10px;margin-top:10px;padding-top:11px;border-top:1px solid var(--border)}
  .ci-price{min-width:0;flex:1;text-align:left}
  .sum-total .big{font-size:23px}
  /* отзывы — одна колонка */
  .rv-grid{grid-template-columns:1fr}
  /* инфо-блок игры */
  .info-col{padding:16px 16px}
  /* футер — 2 колонки, читаемо */
  .footer{padding:32px 0 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px 18px}
  /* Плашка установки раскладывается ниже, в блоке max-width:1024px (строка в один
     ряд). Здесь раньше стояли flex-direction:column и .btn{width:100%} — более
     поздний блок отменял направление, но НЕ ширину, и кнопка при flex-wrap:nowrap
     требовала все 100% и вылезала за карточку. Не возвращать. */
  /* модалки/шторки по ширине экрана */
  .auth-card,.im-card{max-width:100%}
  /* заголовки секций не разъезжаются */
  .section-head{flex-wrap:wrap;gap:6px}
}

/* очень узкие телефоны (≤360) */
@media(max-width:360px){
  .games-grid,.prod-grid,.feat-grid-full{grid-template-columns:1fr}
  .cat-tab{font-size:12.5px}
}

/* 5) ЛАНДШАФТ телефона — низкая высота, чтобы баннеры не занимали весь экран */
@media(max-height:520px) and (orientation:landscape){
  .promo-carousel{max-height:190px}
  .promo-slide{min-height:120px;padding:14px 20px}
  .promo-slide h3{font-size:18px}
  .gp-hero{padding:14px;margin:10px 0 12px}
  .gp-hero .cover{width:56px;height:56px}
  #buyPane.buy-pane{max-height:96vh}
  .hero-inner{padding:16px 18px}
}

/* 6) отступ снизу под пилюлю-корзину, чтобы она не перекрывала футер/контент */
@media(max-width:980px){
  .footer{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  body[data-route="home"] .footer,body[data-route="game"] .footer,body[data-route="hits"] .footer,body[data-route="reviews"] .footer{margin-bottom:64px}
}

/* 7) уважать системную настройку «уменьшить движение» */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===== плашка установки приложения: только телефон/планшет, компактно ===== */
.install-cta{display:none}
@media(max-width:1024px){
  .install-cta{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;
    gap:12px;padding:11px 14px;margin-bottom:16px;border-radius:14px}
  .install-cta-text b{font-size:13.5px;display:block}
  .install-cta-text span{font-size:11.5px;line-height:1.35;color:var(--text-muted)}
  .install-cta .btn{flex-shrink:0;padding:9px 15px;font-size:13px;border-radius:11px}
}
@media(max-width:430px){
  .install-cta-text span{display:none}   /* совсем компактно на узких телефонах */
  .install-cta{padding:10px 12px}
}

/* Виджет выбора количества Звёзд Telegram */
.star-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
@media(max-width:560px){.star-chips{justify-content:flex-start}}
.star-chip{padding:7px 14px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.12));background:rgba(255,255,255,.03);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;transition:var(--tr15)}
.star-chip:hover{border-color:var(--accent,#38e1c4);background:rgba(56,225,196,.08)}
.star-chip:active{transform:scale(.96)}

/* Playerok-стиль: большая плашка пополнения звёзд */
.gp-layout.star-mode{grid-template-columns:1fr}
.gp-layout.star-mode .buy-pane{display:none}
.star-card{background:var(--surface);border:1px solid var(--line,rgba(255,255,255,.09));border-radius:18px;padding:20px 20px 16px;margin-top:4px}
.star-card-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.star-card-ic{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(56,225,196,.08);border-radius:14px}
.star-card-ttl h3{margin:0;font-size:19px;font-weight:800;line-height:1.2}
.star-rate{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-size:16px;font-weight:700;color:var(--text,#e8ecf3);margin-top:7px}
.star-rate-pill{display:inline-block;background:linear-gradient(135deg,#37bbfe,#1c93e3);color:#fff;font-weight:900;font-size:19px;line-height:1;padding:7px 15px;border-radius:12px;box-shadow:0 5px 16px rgba(28,147,227,.42);letter-spacing:.2px;white-space:nowrap}
.star-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.star-grid.star-grid-one{grid-template-columns:1fr}
.star-fld label{display:block;font-size:13px;font-weight:700;color:#aeb7ca;margin-bottom:7px;letter-spacing:.1px}
.star-fld .input{font-size:17px;font-weight:600;height:54px;padding:0 16px;background:rgba(255,255,255,.02);transition:border-color .15s,box-shadow .15s}
.star-fld .input::placeholder{font-weight:500;color:#5a6478}
.star-fld .input:focus{border-color:var(--accent,#38e1c4);box-shadow:0 0 0 3px rgba(56,225,196,.16);background:rgba(56,225,196,.03)}
.star-fld .input.warn,.star-fld .input.warn:focus{border-color:#ff8a5c;box-shadow:0 0 0 3px rgba(255,138,92,.16)}
.star-hint{font-size:12.5px;color:var(--muted,#8b93a7);margin-top:7px;opacity:.9}
.star-hint.warn{color:#ff8a5c;font-weight:700;opacity:1}
.star-actions{display:flex;gap:10px;margin-top:6px}
.star-buy{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:800;padding:14px 18px}
.star-buy b{font-weight:900}
.star-cart{flex:none;width:54px;padding:0;display:flex;align-items:center;justify-content:center}
.star-note{display:flex;align-items:center;gap:6px;color:var(--muted,#8b93a7);font-size:12px;margin-top:13px;line-height:1.35}
@media(max-width:560px){.star-grid{grid-template-columns:1fr}}

/* Фирменный бейдж мгновенной автовыдачи DonatGo */
.dg-instant{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#3aa2ff,#1f7ceb);box-shadow:0 5px 16px rgba(31,124,235,.42);position:relative;overflow:hidden;white-space:nowrap}
.dg-instant::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg) translateX(-134%);animation:dgShine 2.8s ease-in-out infinite}
/* Блик едет transform-ом, а не left: анимация left — это пересчёт layout каждый кадр.
   Значения в % от ширины САМОГО блика (45% ширины бейджа), поэтому -60%/140%
   ширины бейджа = -134%/312% ширины блика — движение то же.
   ВНИМАНИЕ: сейчас блик выключен более поздним правилом (.dg-instant::after
   content:none) — правка на будущее, если бейдж вернут. */
@keyframes dgShine{0%{transform:skewX(-20deg) translateX(-134%)}55%,100%{transform:skewX(-20deg) translateX(312%)}}
.star-card-top{flex-wrap:wrap}
.star-instant-top{margin-left:auto}
.game-instant{margin:2px 0 8px}
.game-instant .dg-instant{font-size:11.5px;padding:4px 9px}
@media(max-width:560px){.star-instant-top{margin-left:0;margin-top:10px;width:100%}}
@media(prefers-reduced-motion:reduce){.dg-instant::after{animation:none;display:none}}

.star-instant-row{margin-top:11px}

.gp-instant{margin:14px 0 14px}

/* Элегантный минималистичный бейдж автовыдачи (переопределяет предыдущий) */
.dg-instant{background:rgba(45,212,191,.07) !important;border:1px solid rgba(45,212,191,.30);color:var(--text-soft) !important;font-weight:700;font-size:12.5px;box-shadow:none !important;overflow:visible}
.dg-instant svg{color:#2fddc4}
.dg-instant::after{content:none !important;display:none !important;animation:none !important}

/* ===================== переключатель темы =====================
   Живёт в КАБИНЕТЕ (#/profile), строкой настройки. В шапке телефона он отбирал
   место у поиска, а плавающий у края экрана — перекрывал контент.
   Иконки видны обе, ползунок ездит между ними: понятно, что это
   переключатель, а не кнопка «включить тёмную тему». */
.cab-theme{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-top:12px}
.cab-theme .ct-txt b{display:block;font-size:14.5px;font-weight:800}
.cab-theme .ct-txt span{font-size:12.5px;color:var(--text-muted)}
.theme-tog{position:relative;flex-shrink:0;
  display:inline-flex;align-items:center;gap:3px;padding:4px;
  width:66px;height:36px;border-radius:999px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border-2);
  transition:border-color .18s,background-color .18s}
.theme-tog:hover{border-color:var(--accent)}
.theme-tog:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-tog .tt-knob{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;
  background:var(--grad);box-shadow:0 2px 8px rgba(34,211,238,.4);
  transition:transform .32s cubic-bezier(.34,1.4,.64,1)}
:root[data-theme="light"] .theme-tog .tt-knob{transform:translateX(29px)}
.theme-tog .tt-ic{position:relative;z-index:1;width:26px;height:26px;display:grid;place-items:center;
  font-size:13px;line-height:1;transition:opacity .2s;user-select:none}
.theme-tog .tt-moon{opacity:1}
.theme-tog .tt-sun{opacity:.45}
:root[data-theme="light"] .theme-tog .tt-moon{opacity:.45}
:root[data-theme="light"] .theme-tog .tt-sun{opacity:1}
@media(prefers-reduced-motion:reduce){.theme-tog,.theme-tog .tt-knob{transition:none}}

/* На время смены темы гасим ВСЕ переходы. Две причины:
   1) при transition:all Chrome не перезапускает анимацию цвета, когда меняется
      переменная на :root — элемент застревает на цвете прошлой темы;
   2) без этого сотня элементов медленно расползается по цветам вместо
      мгновенного переключения. */
:root.theme-switching, :root.theme-switching *,
:root.theme-switching *::before, :root.theme-switching *::after{
  transition:none !important; animation:none !important;
}

/* Фото к возврату: продавец прикладывает его из Telegram, покупатель видит
   рядом с причиной. Кликом открывается в полный размер. */
.ord-photo{display:block;margin-top:10px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.ord-photo img{display:block;width:100%;max-height:260px;object-fit:cover}

/* ---------- ввод кода из 6 цифр ----------
   Одно поле поверх шести нарисованных ячеек: работает вставка из буфера и
   автоподстановка, и не нужно перекидывать фокус между шестью инпутами —
   на iOS это стабильный источник залипаний. Само поле прозрачное. */
.code-box{position:relative}
.code-inp{position:relative;z-index:2;background:transparent;border-color:transparent;
  color:transparent;caret-color:transparent;letter-spacing:0;height:56px;padding:0;
  font-size:16px}                       /* 16px: меньше — и iOS зумит страницу при фокусе */
.code-inp:focus{border-color:transparent;box-shadow:none}
/* В окне входа поле перебивалось правилом `.auth-card .input` — оно вешало на
   него фон и рамку (фон закрывал нарисованные ячейки) и ставило 14.5px, из-за
   чего iOS зумил страницу при фокусе. Специфичность там выше, поэтому нужен
   такой же составной селектор, а не !important. */
.auth-card .code-inp{background:transparent;border-color:transparent;padding:0;height:56px;font-size:16px}
.auth-card .code-inp:focus{border-color:transparent;box-shadow:none}
.code-cells{position:absolute;inset:0;z-index:1;display:flex;gap:8px;pointer-events:none}
/* БЕЗ transition. Свойство берёт значение из CSS-переменной, а Chrome в такой
   связке не перезапускает переход при смене класса: подсветка залипала на той
   ячейке, которая была активной раньше, и «ехала» за курсором с отставанием.
   Та же болезнь была у ссылок футера при смене темы. Здесь анимация и не нужна:
   ввод кода быстрый, подсветка должна успевать за пальцем. */
.code-cells span{flex:1;display:grid;place-items:center;border-radius:14px;
  background:var(--surface-2);border:1.5px solid var(--border-2);
  font-size:22px;font-weight:800;color:var(--text)}
.code-cells span.filled{border-color:var(--border-2);background:var(--surface-3)}
.code-cells span.on{border-color:var(--accent);background:var(--surface-3);box-shadow:var(--glow)}
@media(max-width:400px){
  .code-cells{gap:6px}
  .code-cells span{font-size:19px;border-radius:12px}
  .code-inp{height:50px}
}
/* ---------- подсказка по адресу почты ---------- */
.mail-hint{display:none}
.mail-hint.on{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:7px;font-size:12.5px;color:var(--text-muted)}
.mh-btn{border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);
  border-radius:9px;padding:5px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:border-color .15s,background-color .15s}
.mh-btn:hover{border-color:var(--accent);background:var(--surface-3)}

/* ---------- ввод данных аккаунта в два шага ---------- */
.co-gtitle{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.co-step{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 9px}
/* пройденный шаг: галка, поле со значением и кнопка «Изменить» */
.acc-done{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.acc-ok{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--grad);color:#04222a;
  display:grid;place-items:center;font-size:13px;font-weight:900}
.acc-dtxt{flex:1;min-width:0}
.acc-dtxt span{display:block;font-size:11.5px;color:var(--text-muted)}
.acc-dtxt b{display:block;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-edit{flex-shrink:0;border:1px solid var(--border-2);background:none;color:var(--text-muted);
  border-radius:9px;padding:5px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.acc-edit:hover{border-color:var(--accent);color:var(--text)}
.acc-next{margin-top:14px}

/* Коды из автовыдачи на странице заказа. Заметный блок, а не строка в списке:
   покупатель открывает страницу именно ради них. Моноширинный шрифт — чтобы
   не путались похожие знаки (0 и O, 1 и l), их в кодах хватает. */
.ord-pins { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ord-pin-group { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.ord-pin-name { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.ord-pin { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ord-pin + .ord-pin { margin-top: 8px; }
.ord-pin code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; letter-spacing: .04em; color: var(--text);
  user-select: all; word-break: break-all;
}
.ord-pin .btn { padding: 6px 12px; font-size: 12.5px; }