@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-400.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-600.woff2") format("woff2"); font-weight: 600 650; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geologica"; src: url("/assets/fonts/geologica-var.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; }
:root {
color-scheme: dark;
--bg: #121315;
--bg-2: #1b1d20;
--surface: #1b1d20;
--surface-2: #25282c;
--surface-3: #303338;
--surface-sunken: #0e0f11;
--text: #F4EFE4;
--muted: #B3AA98;
--muted-2: #a39c8c;
--gold: #E9C87C;
--gold-fill: #E9C87C;
--gold-text: #E9C87C;
--gold-strong: #D9B45E;
--gold-ink: #171310;
--blue: #5B8FE8;
--paint-cobalt: #5B8FE8;
--paint-patina: #3FA08B;
--paint-plum: #9C7BD4;
--paint-master: #F4EFE4;
--green: #93BE9D;
--red: #F26D5E;
--line: #282b2f;
--line-strong: #36393e;
--shadow: none;
--shadow-soft: none;
--sheet-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
--surface-highlight: rgba(255, 255, 255, .03);
--max: 1200px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--radius-input: 14px;
--radius-button: 16px;
--radius-card: 20px;
--radius-panel: 24px;
--radius: var(--radius-card);
--text-primary: var(--text);
--text-secondary: var(--muted);
--text-tertiary: var(--muted-2);
--color-success: var(--green);
--color-error: var(--red);
--color-disabled: #8A8272;
--body: "Golos Text", "Segoe UI", sans-serif;
--display: "Geologica", "Segoe UI", sans-serif;
--accent-wash: rgba(255, 255, 255, .08);
--accent-wash-strong: rgba(255, 255, 255, .10);
--accent-border-soft: #36393e;
--gold-line: rgba(233, 200, 124, .45);
--hairline: rgba(255, 255, 255, .06);
--hairline-strong: rgba(255, 255, 255, .10);
--glass: rgba(18, 19, 21, .62);
--glass-2: rgba(18, 19, 21, .78);
--glass-blur: 18px;
--sheen: inset 0 1px 0 rgba(255, 255, 255, .08);
--glass-edge: rgba(255, 255, 255, .09);
--spring: cubic-bezier(0.34, 1.30, 0.42, 1);
--t-press: 120ms;
--t-move: 200ms;
--t-sheet: 320ms;
--canvas: var(--bg);
--canvas-raised: var(--surface);
--panel: var(--surface);
--panel-raised: var(--surface-2);
--panel-hover: var(--surface-3);
--ink: var(--text);
--ink-secondary: var(--muted);
--ink-tertiary: var(--muted-2);
--edge: var(--line);
--edge-strong: var(--line-strong);
--intent: var(--gold);
--intent-hover: var(--gold-strong);
--intent-wash: rgba(255, 255, 255, .08);
--ui-bg: var(--bg);
--ui-surface: var(--surface);
--ui-surface-hover: var(--surface-2);
--ui-control: var(--surface-2);
--ui-line: var(--line);
--ui-line-strong: var(--line-strong);
--ui-text: var(--text);
--ui-muted: var(--muted);
--ui-gold: var(--gold);
--ui-radius-panel: var(--radius-panel);
;--focus-ring:#F4EFE4}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { max-width: 100%; scroll-behavior: smooth; }
@view-transition { navigation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
min-width: 0;
max-width: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(244, 239, 228, .22); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
a, button, input, select, summary, [role="button"], [role="tab"] { -webkit-tap-highlight-color: transparent; }
button, select, summary, [role="button"], [role="tab"] { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
button:disabled, [aria-disabled="true"] { color: var(--color-disabled); cursor: not-allowed; }
.motion-ready .reveal-item { opacity: 0; transform: translate3d(0,14px,0); filter: blur(2px); transition: opacity .42s ease, transform .42s cubic-bezier(.2,.75,.25,1), filter .42s ease; transition-delay: var(--reveal-delay,0ms); will-change: opacity,transform; }
.motion-ready .reveal-item.reveal-card { transform: translate3d(0,14px,0) scale(.985); }
.motion-ready .reveal-item.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
.motion-ready .gold { background: none; color: var(--gold-text); animation: none; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 12px; min-height: 44px; display: inline-flex; align-items: center; transform: translateY(-150%); border-radius: 5px; padding: 8px 14px; background: var(--gold-fill); color: #171811; font-size: 12px; font-weight: 800; transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 40px), var(--max)); min-width: 0; margin-inline: auto; }
.page { min-height: 0; }
.page, main, section, article, aside, nav, form, .container > *, .workspace > *, .checkout-layout > *, .profile-dashboard-grid > * { min-width: 0; }
.section { padding: 72px 0; border-bottom: 1px solid var(--line); }
.section.compact { padding: 30px 0; }
.section-banner { position: relative; height: 148px; overflow: hidden; margin-bottom: 16px; border: 1px solid rgba(237,207,121,.16); border-radius: 20px; background: var(--bg); box-shadow: 0 16px 38px rgba(0,0,0,.2); }
.section-banner img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center right; }
.section-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,8,.84) 0%, rgba(8,9,8,.38) 35%, rgba(8,9,8,.04) 68%); pointer-events: none; }
.section-banner h1 { position: absolute; z-index: 1; left: 28px; top: 50%; margin: 0; transform: translateY(-50%); color: var(--text); font: 800 28px/1 var(--display); letter-spacing: -.03em; text-transform: none; text-shadow: 0 2px 18px rgba(0,0,0,.32); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.section-head > div { max-width: 780px; }
.section-head p { max-width: 470px; margin: 0; color: var(--muted); }
.eyebrow { color: var(--gold-text); font-size: 11px; font-weight: 800; text-transform: uppercase; }
h1, h2, h3, p {
overflow-wrap: break-word;
word-break: normal;
hyphens: manual;
}
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
h1 { margin: 14px 0 0; font-size: clamp(34px, 9vw, 52px); line-height: 1.0; }
h2 { margin: 10px 0 0; font-size: clamp(26px, 5vw, 34px); line-height: 1.05; }
h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.muted { color: var(--muted); }
.gold { color: var(--gold-text); }
.blue { color: var(--blue); }
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
border-bottom: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
transform: none;
animation: none;
}
.checkout-header { position: relative; }
.checkout-header-main { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.checkout-header-main .icon-button { justify-self: end; }
.checkout-header-title { color: var(--muted); font-size: 12px; font-weight: 800; }
.header-main { height: 72px; display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; gap: 24px; }
.brand { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: var(--text); }
.brand-mark { height: 20px; width: auto; flex: none; color: var(--gold-text); transition: transform var(--t-move) var(--spring); }
.brand-word { height: 16px; width: 68px; display: block; flex: none; }
.brand:hover .brand-mark { transform: rotate(-7deg) scale(1.08); }
.site-search { position: relative; max-width: 650px; width: 100%; margin-inline: auto; }
.site-search svg { position: absolute; left: 15px; top: 50%; width: 18px; transform: translateY(-50%); color: var(--muted-2); }
.site-search input {
width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 6px; outline: none;
background: var(--surface-2); color: var(--text); padding: 0 44px; transition: border-color .18s ease, background .18s ease;
}
.site-search input:focus { border-color: var(--line-strong); background: var(--surface-2); }
.site-search kbd { position: absolute; right: 12px; top: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; color: var(--muted-2); font-size: 10px; }
.search-suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 100; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 7px; background: #1b1d20; box-shadow: var(--shadow); }
.search-suggestions:not([hidden]) { transform-origin: top center; animation: menu-pop .2s cubic-bezier(.2,.75,.25,1) both; }
.search-suggestions a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.search-suggestions a:last-child { border-bottom: 0; }
.search-suggestions a:hover, .search-suggestions a.active { background: var(--accent-wash); }
.search-suggestions a.active { box-shadow: inset 2px 0 var(--gold); }
.search-suggestions b { font-size: 12px; }
.search-suggestions small, .search-suggestions p { margin: 0; color: var(--muted); font-size: 10px; }
.search-suggestions p { padding: 13px 14px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button {
position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px;
background: var(--hairline); cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.icon-button:hover { border-color: var(--line-strong); background: var(--accent-wash); }
.icon-button svg { width: 19px; height: 19px; transition: transform .2s cubic-bezier(.2,.75,.25,1); }
.icon-button:hover svg { transform: scale(1.08); }
.icon-button:active, .button:active, .quick:active, .filter:active, .package:active, .order-filters button:active { transform: translateY(0) scale(.97); }
.menu-button { display: none; }
.header-nav { border-top: 0; }
.nav-row {
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--muted);
font-size: 13px;
font-weight: 750;
}
.nav-row a {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 12px;
padding: 0 14px;
transition: color .18s ease, background .18s ease, transform .18s ease;
}
.nav-row-icon {
width: 20px;
height: 20px;
display: grid;
flex: 0 0 20px;
place-items: center;
color: var(--muted-2);
transition: color .18s ease, transform .18s ease;
}
.nav-row-icon svg { width: 19px; height: 19px; }
.nav-row a:hover {
color: var(--text);
background: var(--hairline);
}
.nav-row a:hover .nav-row-icon { color: var(--text); transform: translateY(-1px); }
.nav-row a.active {
color: var(--gold-text); background: transparent;
}
.nav-row a.active .nav-row-icon { color: var(--gold-text); }
.nav-row a:active { transform: scale(.98); }
.nav-spacer { flex: 1; }
.nav-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 11px; }
.nav-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.nav-status i, .status-chip i { animation: status-pulse 2.1s ease-in-out infinite; }
.mobile-support-link { display: none !important; }
.mobile-menu-panel { display: none; }
.button {
min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px;
position: relative; overflow: hidden; isolation: isolate; padding: 0 18px; background: var(--gold-fill); color: var(--gold-ink); font-weight: 800; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button::after { content: ""; position: absolute; inset: -40% -30%; z-index: 0; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg,transparent,var(--hairline),transparent); transition: transform .5s ease; pointer-events: none; }
.button:hover { transform: translateY(-2px); background: #f7e5a9; box-shadow: 0 10px 28px var(--accent-wash); }
.button:hover::after { transform: translateX(120%) skewX(-18deg); }
.button.secondary { border-color: var(--line); background: transparent; color: var(--text); }
.button.secondary:hover { border-color: var(--line-strong); background: var(--accent-wash); }
.button.blue { background: var(--blue); color: #0b1d2b; }
.button.full { width: 100%; }
.button svg { width: 18px; height: 18px; }
.button[disabled] { cursor: not-allowed; transform: none; }
.mini-button[disabled] { cursor: default; }
.home-hero { padding: 48px 0 34px; border-bottom: 1px solid var(--line); }
.hero-copy { max-width: 980px; margin-bottom: 28px; }
.hero-copy p { max-width: 650px; margin: 18px 0 0; color: var(--muted); font-size: 18px; }
.store-hero { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.store-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: end; gap: 24px; margin-bottom: 18px; }
.store-hero-top h1 { margin-bottom: 0; }
.home-title-mobile { display: none; }
.store-hero-top > p { margin: 0 0 7px; color: var(--muted); font-size: 16px; }
.home-showcase { margin-top: 24px; }
.home-showcase-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.home-showcase-head span { display: block; margin-bottom: 4px; color: var(--gold-text); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-showcase-head h2 { margin: 0; font: 800 25px/1.05 var(--display); letter-spacing: -.025em; }
.home-showcase-head > a { position: relative; top: 5px; align-self: flex-end; color: var(--muted); font-size: 12px; font-weight: 700; }
.home-showcase-head > a:hover { color: var(--gold-text); }
.home-showcase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-showcase-card { min-width: 0; overflow: hidden; display: grid; grid-template-rows: 108px auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 12px 28px rgba(0,0,0,.14); transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.home-showcase-card:hover, .home-showcase-card:focus-visible { border-color: var(--accent-border-soft); background: #1f2124; transform: translateY(-2px); }
.home-showcase-art { position: relative; min-width: 0; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); }
.home-showcase-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(9,10,12,.35)); pointer-events: none; }
.home-showcase-art img { width: 100%; height: 100%; display: block; object-fit: cover; transition: filter .18s ease; }
.home-showcase-card:hover .home-showcase-art img { filter: brightness(1.06); }
.home-showcase-card.stars .home-showcase-art { background: radial-gradient(circle at 50% 45%, rgba(255,207,54,.18), transparent 58%), var(--surface-2); }
.home-showcase-card.premium .home-showcase-art { background: radial-gradient(circle at 50% 45%, rgba(131,76,255,.22), transparent 60%), #111214; }
.home-showcase-card.stars .home-showcase-art img, .home-showcase-card.premium .home-showcase-art img, .home-showcase-card.service .home-showcase-art img { width: 58px; height: 58px; object-fit: contain; }
.home-showcase-card.service.playstation .home-showcase-art { background: radial-gradient(circle at 50% 40%, rgba(52,136,205,.18), transparent 62%), var(--surface-2); }
.home-showcase-card.service.app-store .home-showcase-art { background: radial-gradient(circle at 50% 40%, var(--hairline), transparent 62%), var(--surface-2); }
.home-showcase-card.service.xbox .home-showcase-art { background: radial-gradient(circle at 50% 40%, rgba(33,169,62,.2), transparent 62%), var(--surface-2); }
.home-showcase-copy { min-width: 0; display: grid; gap: 3px; padding: 13px 14px 15px; }
.home-showcase-copy small { color: var(--gold-text); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.home-showcase-copy b { overflow: hidden; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.home-showcase-copy em { overflow: hidden; color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.site-verification { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.steam-flow { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.steam-flow-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.steam-flow-brand { display: inline-flex; align-items: center; gap: 16px; }
.steam-flow-brand img { width: 42px; height: 42px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 8px; }
.steam-flow-brand span { color: var(--muted); font-size: 12px; font-weight: 700; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 11px; font-weight: 800; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.steam-flow-grid { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(300px, 1.08fr) 284px; }
.steam-step { position: relative; min-height: 214px; padding: 28px; border-right: 1px solid var(--line); }
.step-number { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 16px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.steam-step .field { gap: 7px; }
.steam-step .field label { color: var(--text); font-size: 14px; }
.steam-step .input-wrap input { height: 54px; font-size: 14px; }
.amount-input { position: relative; }
.amount-input input { width: 100%; height: 62px; border: 1px solid var(--line-strong); border-radius: 12px; outline: 0; background: var(--bg); color: var(--text); padding: 0 56px 0 18px; font-family: var(--display); font-size: 22px; font-weight: 600; }
.amount-input input:focus { border-color: var(--text); }
.amount-input input.invalid { border-color: var(--red); }
.amount-input span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--gold-text); font-family: var(--display); font-size: 18px; }
.amount-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 17px; }
.amount-presets .quick { width: 100%; min-width: 0; min-height: 44px; }
.steam-order { display: flex; flex-direction: column; justify-content: space-between; min-height: 214px; padding: 28px; background: var(--accent-wash); }
.order-kicker { color: var(--gold-text); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.order-amount { margin-top: 7px; color: var(--gold-text); font-family: var(--display); font-size: 34px; line-height: 1; }
.steam-order p { margin: 10px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.45; }
.steam-order .button { margin-top: 20px; }
.flow-proofs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: var(--hairline); }
.flow-proofs span, .flow-proofs a { min-height: 48px; display: flex; align-items: center; gap: 5px; padding: 0 18px; color: var(--muted-2); font-size: 10px; }
.flow-proofs span + span, .flow-proofs a { border-left: 1px solid var(--line); }
.flow-proofs b { color: var(--text); }
.flow-proofs a:hover { color: var(--gold-text); }
.storefront-section { padding-top: 64px; }
.storefront-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 12px; }
.featured-service { min-height: 210px; display: grid; grid-template-columns: auto 1fr; align-content: space-between; column-gap: 18px; row-gap: 22px; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--surface); transition: border-color .24s ease, transform .24s cubic-bezier(.2,.75,.25,1), background .24s ease, box-shadow .24s ease; }
.featured-service:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--surface-2); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.featured-service > img, .service-spark { width: 46px; height: 46px; align-self: start; object-fit: contain; }
.featured-service > img { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.service-spark { display: grid; place-items: center; border-radius: 8px; background: var(--bg); color: var(--gold-text); font-size: 24px; }
.featured-service > div > span { color: var(--muted-2); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.featured-service h3 { margin-top: 4px; font-family: var(--display); font-size: 19px; text-transform: uppercase; }
.featured-service p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.featured-service > b { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--gold-text); font-size: 12px; }
.telegram-service { border-color: var(--line-strong); }
.telegram-service > b { color: var(--blue); }
.game-showcase { background: var(--hairline); }
.commerce-board { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; min-height: 226px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); }
.board-brand, .board-fields, .board-summary { padding: 26px; }
.board-brand { display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); background: var(--bg-2); }
.board-brand img { width: 142px; height: auto; }
.board-brand small { color: var(--muted-2); font-size: 11px; text-transform: uppercase; }
.board-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; border-right: 1px solid var(--line); }
.board-summary { display: flex; flex-direction: column; justify-content: space-between; }
.field { display: grid; gap: 8px; }
.field label { color: var(--muted); font-size: 12px; font-weight: 700; }
.input-wrap { position: relative; transition: transform .18s ease; }
.input-wrap:focus-within { transform: translateY(-1px); }
.input-wrap input, .field select {
width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--bg); color: var(--text); padding: 0 42px 0 14px;
}
.input-wrap input:focus, .field select:focus { border-color: var(--text); }
.input-wrap > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--gold-text); font-weight: 800; }
.quick-row { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.quick {
height: 40px; min-width: 70px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); padding: 0 10px; font-size: 11px; font-weight: 800; cursor: pointer;
}
.quick:hover, .quick.active { border-color: var(--accent-border-soft); color: var(--gold-text); background: var(--accent-wash); }
.summary-label { color: var(--muted); font-size: 12px; }
.summary-value { margin-top: 5px; color: var(--gold-text); font-family: var(--display); font-size: 34px; line-height: 1; }
.summary-note { margin: 10px 0 0; color: var(--muted-2); font-size: 10px; }
.assurance-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-top: 0; background: var(--hairline); }
.assurance-row span { padding: 11px 16px; color: var(--muted-2); font-size: 10px; }
.assurance-row span + span { border-left: 1px solid var(--line); }
.assurance-row b { color: var(--text); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.service-card { min-height: 188px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface); transition: transform .24s cubic-bezier(.2,.75,.25,1), border-color .24s ease, background .24s ease, box-shadow .24s ease; }
.service-card:hover { transform: translateY(-5px); border-color: var(--line-strong); background: var(--surface-2); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.service-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); }
.service-icon img { width: 36px; max-height: 36px; object-fit: contain; }
.service-icon.star { color: var(--gold-text); font-size: 30px; }
.service-card p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.service-link { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--gold-text); font-size: 12px; font-weight: 800; }
.game-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.game-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .24s cubic-bezier(.2,.75,.25,1), border-color .24s ease, box-shadow .24s ease; }
.game-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.game-cover { position: relative; aspect-ratio: 460 / 215; overflow: hidden; background: var(--bg-2); }
.game-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.game-card:hover .game-cover img { transform: scale(1.04); }
.game-cover span { position: absolute; left: 8px; bottom: 8px; border-radius: 5px; padding: 4px 7px; background: rgba(14,15,17,.88); color: var(--gold-text); font-size: 9px; font-weight: 800; }
.game-info { padding: 12px; }
.game-info h3 { min-height: 42px; font-size: 14px; }
.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted-2); font-size: 10px; }
.page-hero { padding: 46px 0 30px; border-bottom: 1px solid var(--line); }
.page-hero-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 36px; }
.page-hero-row > *, .workspace > * { min-width: 0; }
.page-hero p { max-width: 650px; margin: 16px 0 0; color: var(--muted); font-size: 17px; }
.page-badge { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; background: linear-gradient(145deg, var(--surface-highlight), transparent 46%), var(--surface); box-shadow: var(--shadow-soft); }
.page-badge img { width: 46px; height: 46px; max-height: none; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 9px; }
.page-badge b { display: block; font-size: 13px; }
.page-badge small { color: var(--muted-2); font-size: 10px; }
.breadcrumbs { margin-bottom: 14px; color: var(--muted-2); font-size: 11px; }
.breadcrumbs a:hover { color: var(--gold-text); }
.workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) 380px; gap: 18px; }
.workspace-main, .workspace-side { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-highlight), transparent 38%), var(--surface); box-shadow: var(--shadow-soft); }
.workspace-main { padding: 28px; }
.workspace-side { position: sticky; top: 136px; height: fit-content; padding: 26px; }
.steam-workspace, .telegram-workspace { grid-template-columns: minmax(0, 1fr) 260px; }
.workspace-side.action-only, .home-order-summary.action-only { display: flex; align-items: center; justify-content: center; padding: 18px; }
.workspace-side.action-only .button, .home-order-summary.action-only .button { width: 100%; min-height: 52px; margin: 0; }
.workspace-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.workspace-title > img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 9px; }
.workspace-title span { color: var(--green); font-size: 11px; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.helper { margin: 7px 0 0; color: var(--muted-2); font-size: 10px; }
.field-error { margin: 7px 0 0; color: var(--red); font-size: 11px; font-weight: 700; }
.input-wrap input.invalid { border-color: var(--red); }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.method {
min-height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer;
}
.method.active { border-color: var(--gold); color: var(--gold-text); background: var(--accent-wash); }
.payment-placeholder { display: grid; gap: 4px; min-height: 58px; align-content: center; border: 1px dashed var(--line-strong); border-radius: 6px; padding: 12px 14px; background: var(--accent-wash); }
.payment-placeholder b { color: var(--gold-text); font-size: 12px; }
.payment-placeholder span { color: var(--muted); font-size: 11px; }
.order-lines { display: grid; gap: 0; margin: 18px 0; border-top: 1px solid var(--line); }
.order-line { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.order-line b { color: var(--text); }
.order-total { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 24px 0; }
.order-total span { color: var(--muted); font-size: 12px; }
.order-total b { color: var(--gold-text); font-family: var(--display); font-size: 30px; }
.package-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.package {
min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(145deg, var(--hairline), transparent 48%), var(--bg-2); padding: 18px; cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.package:hover, .package.active { transform: translateY(-2px); border-color: var(--accent-border-soft); background: var(--intent-wash); box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.package b { font-family: var(--display); font-size: 19px; }
.package span { color: var(--muted-2); font-size: 10px; }
.telegram-panel[hidden] { display: none; }
.telegram-recipient-field { margin-bottom: 22px; }
.catalog-tools { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 14px; }
.catalog-search { position: relative; }
.catalog-search > svg { position: absolute; z-index: 1; left: 17px; top: 50%; width: 21px; height: 21px; transform: translateY(-50%); fill: none; stroke: var(--muted-2); stroke-width: 2; }
.catalog-search input { width: 100%; height: 54px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--hairline), transparent), var(--surface); color: var(--text); outline: 0; padding: 0 52px; font-size: 14px; }
.catalog-search input:focus { border-color: var(--text); box-shadow: none; }
.catalog-search button { position: absolute; right: 10px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); border: 0; border-radius: 8px; background: var(--hairline); color: var(--muted); font-size: 19px; cursor: pointer; }
.catalog-search button:hover { background: var(--accent-wash); color: var(--gold-text); }
.catalog-tools select { height: 50px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); padding: 0 40px 0 14px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--muted); padding: 0 15px; font-size: 11px; font-weight: 800; cursor: pointer; }
.filter.active, .filter:hover { border-color: var(--accent-border-soft); color: var(--gold-text); background: var(--accent-wash); }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.catalog-result { min-height: 18px; margin: -4px 0 14px; color: var(--muted-2); font-size: 11px; }
.live-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 0; border: 1px solid rgba(159,211,155,.16); border-radius: 7px; padding: 11px 14px; background: rgba(159,211,155,.025); color: var(--muted); font-size: 10px; }
.catalog-category-tabs { margin: 0 0 18px; }
.catalog-category-tabs .filter { display: inline-flex; align-items: center; white-space: nowrap; }
.game-cover-generated { isolation: isolate; display: block; background: radial-gradient(circle at 78% 22%, hsl(var(--cover-hue-2) 68% 48% / .38), transparent 38%), radial-gradient(circle at 12% 110%, hsl(var(--cover-hue) 78% 54% / .3), transparent 48%), linear-gradient(145deg, hsl(var(--cover-hue) 26% 18%), var(--surface-2) 72%); }
.game-cover-generated::before { content: ""; position: absolute; inset: -40% -12% 8% 42%; z-index: -1; border: 1px solid hsl(var(--cover-hue-2) 72% 76% / .18); border-radius: 42% 58% 52% 48%; transform: rotate(-18deg); box-shadow: 0 0 80px hsl(var(--cover-hue) 75% 48% / .14); }
.game-cover-generated::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(hsl(var(--cover-hue) 60% 78% / .045) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--cover-hue) 60% 78% / .045) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(110deg, #000, transparent 72%); }
.game-cover-generated b { position: absolute; right: 18px; top: 11px; color: hsl(var(--cover-hue-2) 78% 78% / .72); font-family: var(--display); font-size: clamp(44px, 5vw, 66px); letter-spacing: -.08em; line-height: 1; text-shadow: 0 12px 34px rgba(0,0,0,.25); }
.game-cover-generated .cover-name { position: absolute; left: 18px; right: 82px; bottom: 18px; color: #f4f1e8; font-family: var(--display); font-size: 17px; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.game-cover-generated span { left: 14px; top: 13px; bottom: auto; background: rgba(8,9,11,.78); color: hsl(var(--cover-hue-2) 78% 78%); }
.game-checkout-panel { scroll-margin-top: 110px; margin: 18px 0 24px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px; background: linear-gradient(145deg, var(--accent-wash), transparent 38%), var(--surface); box-shadow: var(--shadow-soft); }
.game-checkout-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.game-checkout-heading span { color: var(--gold-text); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.game-checkout-heading h2 { margin-top: 5px; font-size: 22px; }
.game-checkout-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 14px; }
.game-checkout-dynamic { display: contents; }
.game-checkout-form .button { min-height: 48px; }
.catalog-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .24s cubic-bezier(.2,.75,.25,1), border-color .24s ease, box-shadow .24s ease; }
.catalog-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.catalog-card .game-cover img { transition: transform .32s cubic-bezier(.2,.75,.25,1); }
.catalog-card:hover .game-cover img { transform: scale(1.035); }
.catalog-card[hidden] { display: none; }
.catalog-card .game-cover { aspect-ratio: 460 / 215; }
.catalog-card-body { padding: 18px; }
.catalog-card h3 { font-size: 18px; line-height: 1.2; }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 19px 12px; }
.game-logo-card { min-width: 0; display: grid; align-content: start; justify-items: center; gap: 8px; border-radius: 14px; color: var(--text); padding: 5px; text-align: center; cursor: pointer; outline: 0; }
.game-logo-icon { position: relative; width: 100%; aspect-ratio: 1; overflow: visible; border: 1px solid var(--hairline); border-radius: 22%; background: var(--surface); box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.game-logo-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.game-logo-icon img[src*="apex-legends-tile"] { object-fit: contain; background: #b72d2d; padding: 17%; }
.game-logo-icon i { position: absolute; top: -7px; right: -5px; min-height: 20px; display: inline-flex; align-items: center; border: 2px solid var(--bg); border-radius: 999px; background: #2ca95b; color: #fff; padding: 0 7px; font-size: 8px; font-style: normal; font-weight: 800; }
.game-logo-card h3 { width: 100%; min-height: 30px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--body); font-size: 10px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; }
.game-logo-card:hover .game-logo-icon, .game-logo-card:focus-visible .game-logo-icon { transform: translateY(-3px) scale(1.025); border-color: var(--accent-border-soft); box-shadow: 0 15px 30px rgba(0,0,0,.28); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.chip { border-radius: 5px; padding: 4px 7px; background: var(--bg); color: var(--muted); font-size: 9px; font-weight: 800; }
.card-bottom { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.card-bottom span { color: var(--muted-2); font-size: 10px; }
.mini-button { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: transparent; cursor: pointer; }
.mini-button:hover { border-color: var(--gold); color: var(--gold-text); }
.mini-button.coming { width: auto; min-width: 62px; padding: 0 10px; color: var(--gold-text); font-size: 10px; font-weight: 800; }
.mini-button.coming:hover { background: var(--accent-wash); }
.mini-button.choose-product { width: auto; min-width: 78px; padding: 0 12px; border-color: var(--accent-border-soft); color: var(--gold-text); font-size: 10px; font-weight: 800; }
.mini-button.choose-product:hover { background: var(--accent-wash); }
.region-chip { color: var(--gold-text); }
.service-launchpad { width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; margin: 14px auto 16px; }
.launch-service { min-width: 0; display: grid; align-content: start; justify-items: center; gap: 8px; border: 0; border-radius: 14px; background: transparent; color: var(--text); padding: 5px; text-align: center; cursor: pointer; outline: 0; }
.launch-service::after { display: none; }
.launch-service > span:nth-child(2) { width: 100%; min-width: 0; }
.launch-service b { width: 100%; min-height: 31px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; }
.launch-service small, .launch-service > i { display: none; }
.launch-icon { width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: 23%; background: linear-gradient(145deg, var(--hairline), transparent 48%), var(--surface-2); box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.launch-icon img { width: 54%; height: 54%; object-fit: contain; }
.launch-service.telegram-stars .launch-icon img { width: 60%; height: 60%; }
.launch-service.telegram-premium .launch-icon img { width: 58%; height: 58%; }
.launch-service.games .launch-icon img { width: 78%; height: 78%; border-radius: 22%; object-fit: cover; }
.launch-service:hover .launch-icon, .launch-service:focus-visible .launch-icon { transform: translateY(-3px) scale(1.025); border-color: var(--accent-border-soft); box-shadow: 0 15px 30px rgba(0,0,0,.28); }
.launch-covers { width: 62px; height: 54px; position: relative; }
.launch-covers img { position: absolute; top: 5px; width: 42px; height: 42px; border: 2px solid var(--surface); border-radius: 11px; object-fit: cover; }
.launch-covers img:nth-child(1) { left: 0; z-index: 3; }.launch-covers img:nth-child(2) { left: 11px; z-index: 2; }.launch-covers img:nth-child(3) { left: 22px; z-index: 1; }
.launch-service.telegram-stars { --launch-glow: rgba(255,197,54,.2); border-color: rgba(255,200,61,.22); }
.launch-service.telegram-premium { --launch-glow: rgba(142,94,255,.2); border-color: rgba(151,106,255,.24); }
.launch-service.spotify { --launch-glow: rgba(30,215,96,.14); }.launch-service.playstation { --launch-glow: rgba(0,112,209,.15); }.launch-service.xbox { --launch-glow: rgba(16,124,16,.15); }
.launch-service:not(.active) { color: var(--muted); }
.launch-service.selected .launch-icon { border-color: var(--accent-border-soft); background: linear-gradient(145deg, var(--accent-wash), transparent 54%), var(--surface-2); box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 0 0 1px var(--accent-wash); }
.launch-service.selected b { color: var(--gold-text); }
.home-quick-order { width: 100%; margin: 0 auto; }
.home-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: stretch; gap: 12px; }
.home-order-layout > * { min-width: 0; }
.home-order-card, .home-order-summary { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--hairline), transparent 54%), var(--surface); box-shadow: 0 18px 44px rgba(0,0,0,.16); }
.home-order-card { padding: 0 22px 20px; }
.home-order-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); margin: 0 -22px 18px; padding: 0 22px; }
.home-order-head .steam-flow-brand img { width: 38px; height: 38px; border-radius: 11px; padding: 7px; }
.home-order-fields { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; }
.home-order-fields .field { min-width: 0; }
.home-order-fields .field label { font-size: 11px; }
.home-order-fields .input-wrap input { height: 54px; border-radius: 12px; }
.home-order-fields .input-wrap > span { color: var(--gold-text); font-weight: 800; }
.home-presets { grid-column: 1 / -1; }
.home-presets .quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-presets .quick { min-width: 0; min-height: 42px; border-radius: 11px; }
.home-order-summary { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; background: linear-gradient(145deg, var(--accent-wash), transparent 56%), var(--surface); }
.home-order-summary .order-total { display: grid; gap: 7px; }
.home-order-summary .order-total span { color: var(--muted); font-size: 11px; }
.home-order-summary .order-total b { color: var(--gold-text); font-family: var(--display); font-size: 30px; line-height: 1.1; }
.home-order-summary .button { min-height: 52px; margin-top: auto; }
.telegram-home-fields .home-recipient { grid-column: 1 / -1; }
.home-stars-input { grid-template-columns: 36px minmax(0, 1fr) auto; }
.home-stars-input img { width: 34px; height: 34px; border-radius: 8px; padding: 5px; }
.stars-home-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-premium-packages { grid-column: 1 / -1; }
.home-premium-packages .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-premium-packages .telegram-package { min-height: 96px; padding: 12px; }
.home-premium-packages .telegram-package img { width: 28px; height: 28px; margin-bottom: 6px; }
.home-premium-packages .telegram-package b { font-size: 14px; }
.home-order-summary.telegram-home-summary { justify-content: flex-start; }
.telegram-home-summary .telegram-summary-icon { width: 48px; height: 48px; margin-bottom: 0; border-radius: 12px; }
.telegram-home-summary .telegram-summary-icon img { width: 36px; height: 36px; }
.telegram-home-summary h3 { font-size: 15px; }
.telegram-home-summary .order-total b { font-family: var(--body); font-size: 17px; }
.home-price { color: var(--muted-2); font-size: 10px; }
.telegram-product-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.telegram-product-card { min-height: 112px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 16px; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.telegram-product-card:hover, .telegram-product-card.active { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.telegram-product-card.stars.active { border-color: var(--accent-border-soft); background: linear-gradient(145deg, rgba(255,200,61,.1), transparent 48%), var(--surface); }
.telegram-product-card.premium.active { border-color: rgba(151,106,255,.52); background: linear-gradient(145deg, rgba(151,106,255,.1), transparent 48%), var(--surface); }
.telegram-product-card > img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-2); padding: 10px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.22)); }
.telegram-product-card small, .telegram-product-card em { display: block; color: var(--muted-2); font-size: 10px; font-style: normal; }
.telegram-product-card b { display: block; margin: 0 0 5px; font-family: var(--display); font-size: 18px; }
.telegram-product-card > i { color: var(--muted-2); font-size: 22px; font-style: normal; }
.telegram-product-card.stars.active > i { color: #ffca43; }.telegram-product-card.premium.active > i { color: #a77cff; }
.telegram-workspace { align-items: start; }
.telegram-package { min-height: 136px; align-items: flex-start; }
.telegram-package img { width: 38px; height: 38px; margin-bottom: 10px; }
.telegram-package.stars:hover, .telegram-package.stars.active { border-color: var(--accent-border-soft); background: rgba(255,200,61,.08); }
.telegram-package.premium:hover, .telegram-package.premium.active { border-color: #9a6cff; background: rgba(151,106,255,.09); }
.telegram-package b { font-size: 20px; }.telegram-package span { font-size: 11px; }
.stars-quantity { display: grid; grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); gap: 12px; align-items: stretch; }
.stars-quantity-input { min-height: 82px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-input); background: var(--surface-2); padding: 12px 16px; }
.stars-quantity-input:focus-within { border-color: var(--text); box-shadow: none; }
.stars-quantity-input img { width: 44px; height: 44px; object-fit: contain; border-radius: 11px; background: var(--surface-2); padding: 7px; filter: drop-shadow(0 8px 14px rgba(246,184,35,.18)); }
.stars-quantity-input input { width: 100%; min-width: 0; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--display); font-size: 30px; font-weight: 800; }
.stars-quantity-input input::-webkit-inner-spin-button { appearance: none; }
.stars-quantity-input span { color: #f6c843; font-size: 12px; font-weight: 800; }
.stars-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.stars-presets button { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.stars-presets button:hover, .stars-presets button.active { border-color: var(--accent-border-soft); background: var(--accent-wash); color: #ffe38a; transform: translateY(-1px); }
.telegram-summary-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface-2); }
.telegram-summary-icon img { width: 46px; height: 46px; object-fit: contain; }.telegram-summary-icon.stars { box-shadow: inset 0 0 24px rgba(255,200,61,.05); }.telegram-summary-icon.premium { box-shadow: inset 0 0 24px rgba(151,106,255,.06); }
.telegram-submit.stars { border-color: var(--gold-strong); background: var(--gold-fill); color: var(--gold-ink); }.telegram-submit.stars:hover { background: var(--gold-strong); }
.telegram-submit.premium { border-color: #8b59ee; background: #8053dd; color: #fff; }.telegram-submit.premium:hover { background: #9569ee; }
.package-loading { grid-column: 1 / -1; min-height: 110px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; }.package-loading.error { color: var(--red); }
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.live-game-card { cursor: pointer; outline: 0; }
.live-game-card:focus-visible { border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.catalog-card .game-cover-real { aspect-ratio: 16 / 9; background: var(--surface-2); }
.game-cover-real::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(7,8,7,.48)); pointer-events: none; }
.game-cover-real img { width: 100%; height: 100%; object-fit: cover; }
.game-cover-real span { z-index: 1; top: 12px; bottom: auto; left: 12px; border: 1px solid var(--hairline); background: rgba(8,9,8,.82); color: #f4edda; }
.catalog-card-body { padding: 18px 19px 17px; }
.catalog-card h3 { font-size: 20px; }
.catalog-card-detail { min-height: 18px; margin: 8px 0 14px; color: var(--muted-2); font-size: 11px; }
.card-open-arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--accent-wash-strong); border-radius: 50%; color: var(--gold-text); font-size: 15px; transition: transform .18s ease, background .18s ease; }
.catalog-card:hover .card-open-arrow { transform: translateX(3px); background: var(--accent-wash); }
.game-checkout-panel { padding: 0; overflow: hidden; border-color: var(--accent-border-soft); }
.game-configurator { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(0, 1.65fr); min-height: 610px; }
.game-configurator-visual { position: relative; min-height: 100%; overflow: hidden; background: var(--surface-sunken, #0e0f11); }
.game-configurator-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, rgba(7,8,7,.94)); }
.game-configurator-visual > img { width: 100%; height: 100%; min-height: 610px; object-fit: cover; }
.game-configurator-visual > div { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 28px; }
.game-configurator-visual span { color: var(--gold-text); font-size: 10px; font-weight: 800; text-transform: uppercase; }.game-configurator-visual h2 { margin-top: 8px; font-size: clamp(30px, 3vw, 44px); line-height: .98; }.game-configurator-visual p { margin: 12px 0 0; color: var(--hairline-strong); font-size: 11px; }
.game-configurator-main { min-width: 0; padding: 25px 28px 28px; }
.game-checkout-heading { align-items: center; margin-bottom: 8px; }.game-checkout-heading h3 { margin-top: 5px; font-size: 22px; }
.config-step { padding: 18px 0; border-top: 1px solid var(--line); }
.config-step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.config-step-title > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.config-step-title b, .config-step-title small { display: block; }.config-step-title b { font-size: 13px; }.config-step-title small { margin-top: 3px; color: var(--muted-2); font-size: 9px; }
.region-choice-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.region-choice { min-width: 132px; min-height: 52px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 9px 12px; text-align: left; cursor: pointer; }
.region-choice:hover, .region-choice.active { border-color: var(--accent-border-soft); background: var(--accent-wash); }.region-choice b { font-size: 11px; }.region-choice small { color: var(--muted-2); font-size: 9px; }
.region-choice img, .voucher-region img { width: 28px; height: 21px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--hairline); border-radius: 5px; box-shadow: 0 3px 8px rgba(0,0,0,.22); }
.product-choice-search { width: 100%; height: 42px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--bg); color: var(--text); padding: 0 13px; }.product-choice-search:focus { border-color: var(--text); }
.product-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 276px; overflow-y: auto; padding-right: 4px; scrollbar-color: var(--line-strong) transparent; }
.product-choice { width: 100%; min-width: 0; min-height: 76px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 22px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 10px; text-align: left; cursor: pointer; }
.product-choice:hover, .product-choice.active { border-color: var(--accent-border-soft); background: var(--accent-wash); }.product-choice img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; filter: none; }.product-choice b, .product-choice small { display: block; }.product-choice b { overflow: hidden; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; }.product-choice small { margin-top: 5px; color: var(--gold-text); font-size: 11px; }.product-choice i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 10px; font-style: normal; }.product-choice.active i { border-color: var(--gold); background: var(--gold-fill); color: var(--gold-ink); }
.account-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.account-fields .field > span { color: var(--muted); font-size: 11px; font-weight: 700; }.account-fields input, .account-fields select { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: var(--bg); color: var(--text); padding: 0 13px; }.account-fields select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 21px, calc(100% - 12px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }.account-fields input:focus, .account-fields select:focus { border-color: var(--text); }.account-fields input[aria-invalid="true"], .account-fields select[aria-invalid="true"] { border-color: var(--red); }.account-fields small { color: var(--muted-2); font-size: 9px; }.field-example { min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--hairline); padding: 13px; }.field-example span { color: var(--muted-2); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.field-example b { color: var(--muted); font-size: 11px; line-height: 1.45; }
.configurator-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }.configurator-footer > div { min-width: 0; }.configurator-footer span, .configurator-footer b { display: block; }.configurator-footer span { color: var(--muted-2); font-size: 9px; text-transform: uppercase; }.configurator-footer b { max-width: 300px; margin-top: 5px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.configurator-action { min-width: 220px; }
.catalog-badge-mark { color: var(--gold-text); font-size: 30px; }
.voucher-badge-stack { position: relative; width: 72px; height: 44px; flex: 0 0 auto; }.voucher-badge-stack img { position: absolute; top: 4px; width: 36px; height: 36px; border: 2px solid var(--surface); border-radius: 11px; background: var(--surface-2); padding: 6px; }.voucher-badge-stack img:nth-child(1) { left: 0; z-index: 3; }.voucher-badge-stack img:nth-child(2) { left: 18px; z-index: 2; }.voucher-badge-stack img:nth-child(3) { left: 36px; z-index: 1; }
.voucher-service-switch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.voucher-service-card { min-width: 0; display: grid; align-content: start; justify-items: center; gap: 8px; border: 0; border-radius: 14px; background: transparent; color: var(--text); padding: 5px; text-align: center; cursor: pointer; outline: 0; }
.voucher-service-card > span { width: min(100%, 92px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 22%; background: var(--surface-2); box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.voucher-service-card img { width: 52%; height: 52%; object-fit: contain; }.voucher-service-card b { width: 100%; min-height: 31px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: normal; }.voucher-service-card small, .voucher-service-card i { display: none; }
.voucher-service-card:hover > span, .voucher-service-card.active > span { transform: translateY(-3px) scale(1.025); border-color: var(--accent-border-soft); box-shadow: 0 15px 30px rgba(0,0,0,.28); }.voucher-service-card[disabled] { display: none; }
.voucher-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; gap: 16px; }.voucher-main, .voucher-summary, .voucher-main .config-step { min-width: 0; }.voucher-main { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-highlight), transparent 38%), var(--surface); padding: 26px 28px; box-shadow: var(--shadow-soft); }
.voucher-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; }.voucher-flow-head > div { display: flex; align-items: center; gap: 13px; }.voucher-flow-head img { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface-2); padding: 9px; }.voucher-flow-head small, .voucher-flow-head b { display: block; }.voucher-flow-head small { color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }.voucher-flow-head b { margin-top: 4px; font-size: 16px; }
.choice-search { width: 100%; height: 44px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--bg); color: var(--text); padding: 0 14px; font-size: 13px; }.choice-search:focus { border-color: var(--text); box-shadow: none; }
.voucher-region-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 184px; overflow-y: auto; padding-right: 3px; scrollbar-color: var(--line-strong) transparent; }.voucher-region { min-width: 132px; min-height: 52px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 9px 12px; cursor: pointer; text-align: left; }.voucher-region:hover, .voucher-region.active { border-color: var(--accent-border-soft); background: var(--accent-wash); }.voucher-region b { font-size: 11px; }
.voucher-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 390px; overflow-y: auto; padding-right: 4px; scrollbar-color: var(--line-strong) transparent; }.voucher-product { min-width: 0; min-height: 70px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 11px; cursor: pointer; text-align: left; }.voucher-product:hover, .voucher-product.active { border-color: var(--accent-border-soft); background: var(--accent-wash); }.voucher-product > img { width: 42px; height: 42px; object-fit: contain; padding: 7px; border-radius: 11px; background: var(--hairline); }.voucher-product b, .voucher-product em { display: block; }.voucher-product b { overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; }.voucher-product em { margin-top: 5px; color: var(--gold-text); font-size: 11px; font-style: normal; font-weight: 800; }.voucher-product > i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 10px; font-style: normal; }.voucher-product.active > i { border-color: var(--gold); background: var(--gold-fill); color: var(--gold-ink); }
.voucher-summary-icon { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }.voucher-summary-icon img { width: 43px; height: 43px; object-fit: contain; }.voucher-summary .order-line b { max-width: 175px; text-align: right; overflow-wrap: anywhere; }
.voucher-delivery { margin-top: 14px; border: 1px solid rgba(159,211,155,.25); border-radius: 8px; background: rgba(159,211,155,.04); padding: 16px; }.voucher-delivery > span { color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; }.voucher-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; }.voucher-code-row code { overflow-wrap: anywhere; color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }.voucher-code-row button { min-height: 34px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--gold-text); padding: 0 10px; font-size: 9px; font-weight: 800; cursor: pointer; }
.store-order-delivery { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 4px; }.store-order-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid rgba(159,211,155,.2); border-radius: 7px; background: rgba(159,211,155,.035); padding: 9px 11px; }.store-order-code code { overflow-wrap: anywhere; font-size: 11px; }.store-order-code button { border: 0; background: transparent; color: var(--gold-text); font-size: 9px; font-weight: 800; cursor: pointer; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.info-item { min-height: 150px; border-top: 1px solid var(--line); padding: 20px 18px 0 0; }
.info-item + .info-item { padding-left: 18px; border-left: 1px solid var(--line); }
.info-item b { display: block; margin-bottom: 10px; font-family: var(--display); font-size: 16px; text-transform: uppercase; }
.info-item p { margin: 0; color: var(--muted); font-size: 13px; }
.site-footer { border-top: 1px solid var(--hairline); background: linear-gradient(180deg, var(--hairline), transparent 68%); padding: 20px 0 14px; }
.footer-compact { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 16px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.footer-links a { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; }
.footer-links a:hover { color: var(--gold-text); }
.footer-main { display: grid; grid-template-columns: 1.3fr repeat(4, .7fr); gap: 42px; padding-bottom: 42px; }
.footer-about p { max-width: 380px; color: var(--muted); font-size: 13px; }
.footer-column { display: grid; align-content: start; gap: 10px; }
.footer-column b { margin-bottom: 4px; font-size: 12px; }
.footer-column a { min-height: 28px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; }
.footer-column a:hover { color: var(--gold-text); }
.footer-legal a { line-height: 1.35; }
.trademark { max-width: 760px; margin: 10px 0 0; color: var(--muted-2); font-size: 9px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted-2); font-size: 10px; }
.footer-legal-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.footer-legal-links a { min-height: 28px; display: inline-flex; align-items: center; color: var(--muted); }
.footer-legal-links a:hover { color: var(--gold-text); }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 160; width: min(calc(100% - 28px), 520px); transform: translate(-50%, 22px); border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface-3); padding: 13px 16px; text-align: center; font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-dock { display: none; }
.checkout-page { padding: 32px 0 40px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; }
.checkout-main h1 { margin-bottom: 0; }
.checkout-intro { max-width: 560px; margin: 15px 0 26px; color: var(--muted); }
.checkout-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; border: 1px solid var(--line); }
.checkout-steps span { min-height: 48px; display: flex; align-items: center; padding: 11px 14px; color: var(--muted-2); font-size: 11px; font-weight: 800; }
.checkout-steps span + span { border-left: 1px solid var(--line); }
.checkout-steps .active { color: var(--gold-text); background: var(--accent-wash); }
.checkout-items { border-top: 1px solid var(--line); }
.checkout-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 118px; border-bottom: 1px solid var(--line); padding: 20px 0; }
.checkout-item span { color: var(--muted-2); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.checkout-item h3 { margin-top: 5px; font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.checkout-item p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.checkout-side { position: sticky; top: 105px; align-self: start; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 26px; background: linear-gradient(145deg, var(--accent-wash), transparent 42%), var(--surface); box-shadow: var(--shadow-soft); }
.checkout-seller { margin: 14px 0 8px; color: var(--muted-2); font-size: 11px; line-height: 1.45; }
.checkout-seller a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.checkout-legal { margin: 0 0 14px; color: var(--muted-2); font-size: 10px; line-height: 1.55; }
.checkout-legal a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-page { padding: 62px 0 88px; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 760px) 220px; justify-content: space-between; gap: 56px; }
.legal-copy { color: var(--muted); font-size: 14px; line-height: 1.72; }
.legal-copy .legal-title {
max-width: 760px;
margin: 12px 0 20px;
color: var(--text);
font-family: var(--body);
font-size: clamp(32px, 3.5vw, 46px);
font-weight: 800;
line-height: 1.06;
text-transform: uppercase;
}
.legal-title > span { display: block; }
.legal-title .gold { font-size: .88em; }
.legal-copy h2 { margin: 42px 0 12px; color: var(--text); font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.legal-copy p { margin: 0 0 14px; }
.legal-copy ul { display: grid; gap: 8px; margin: 0 0 16px; padding-left: 20px; }
.legal-copy a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { position: sticky; top: 104px; align-self: start; border-top: 1px solid var(--line-strong); padding-top: 16px; color: var(--muted-2); font-size: 11px; line-height: 1.55; }
.legal-meta b { display: block; margin-bottom: 5px; color: var(--text); font-size: 11px; }
.identity-hero { padding: 24px 0 18px; border-bottom: 1px solid var(--line); }
.identity-hero h1 { margin: 0; font-size: clamp(34px, 4vw, 48px); }
.identity-hero p { max-width: 670px; margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.identity-grid { display: grid; grid-template-columns: minmax(0, 1180px); justify-content: center; gap: 20px; align-items: start; }
.identity-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-highlight), transparent 42%), var(--surface); box-shadow: var(--shadow-soft); }
.identity-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--hairline); }
.identity-panel-head h2 { margin: 0; font-size: 23px; }
.identity-panel-body { padding: 28px; }
.identity-head-note { color: var(--muted); font-size: 11px; }
.login-methods { display: grid; gap: 10px; }
.login-method-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.login-method { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-2); padding: 0 16px; color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.login-method:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-2); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.login-method > span:last-child { transition: transform .2s cubic-bezier(.2,.75,.25,1); }
.login-method:hover > span:last-child { transform: translateX(3px); }
.login-method[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.login-method-primary { min-height: 64px; border-color: var(--line-strong); background: linear-gradient(100deg, var(--accent-wash), var(--accent-wash)); }
.login-method-primary:hover { background: var(--accent-wash-strong); }
.login-method .login-method-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; margin-right: 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--gold-text); font-family: var(--display); font-size: 11px; font-style: normal; vertical-align: middle; }
.login-method .login-method-icon img { width: 18px; height: 18px; object-fit: contain; }
.login-method span:last-child { color: var(--muted); font-size: 11px; font-weight: 700; }
.login-method.telegram .login-method-icon { color: #69b8f6; }
.login-method.google .login-method-icon { color: #f2f1ed; }
.email-login-form { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.email-login-form[hidden] { display: none; }
.identity-status { min-height: 20px; margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.identity-status.error { color: var(--red); }
.identity-status.ok { color: var(--green); }
.identity-loading { min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.identity-loading[hidden] { display: none; }
.identity-loading b { font-family: var(--display); font-size: 14px; text-transform: uppercase; }
.identity-loading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.identity-loader { width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: identity-spin .8s linear infinite; }
@keyframes identity-spin { to { transform: rotate(360deg); } }
.referral-field { margin-top: 16px; color: var(--muted-2); font-size: 11px; }
.referral-field summary { width: fit-content; cursor: pointer; color: var(--muted); font-weight: 700; }
.referral-field .input-wrap { margin-top: 10px; }
.profile-card { display: grid; gap: 20px; }
.profile-card[hidden], .profile-dashboard[hidden], .login-card[hidden] { display: none; }
.profile-summary { display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center; }
.profile-summary h3 { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.profile-summary p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.rank-crest { width: 74px; aspect-ratio: 1; user-select: none; clip-path: polygon(50% 0, 88% 18%, 84% 68%, 50% 100%, 16% 68%, 12% 18%); background: linear-gradient(145deg, #9d7544, #423127); box-shadow: 0 10px 24px rgba(0,0,0,.26); transition: transform .28s cubic-bezier(.2,.75,.25,1), filter .28s ease; }
.rank-crest.silver { background: linear-gradient(145deg, #bec8cf, #52616d); }
.rank-crest.gold { background: linear-gradient(145deg, #ffe38b, #a97422); }
.rank-crest.platinum { background: linear-gradient(145deg, #9ce6db, #277a86); }
.rank-crest.diamond { background: linear-gradient(145deg, #c8b8ff, #5949bd); }
.rank-card:hover .rank-crest, .profile-overview:hover .profile-rank-crest { transform: translateY(-4px) rotate(-2deg); filter: saturate(1.08) brightness(1.05); }
.rank-progress { display: grid; gap: 9px; }
.rank-progress-head { display: flex; align-items: center; justify-content: flex-end; color: var(--muted); font-size: 11px; }
.rank-progress-head b { color: var(--text); }
.rank-track { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg); }
.rank-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold-fill); transition: width .45s ease; }
.profile-lines { display: grid; gap: 0; border-top: 1px solid var(--line); }
.profile-line { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.profile-line b { max-width: 62%; overflow-wrap: anywhere; color: var(--text); text-align: right; }
.referral-link { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.referral-link input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--muted); padding: 0 11px; font-size: 11px; }
.referral-copy { flex: 0 0 auto; height: 44px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--accent-wash); color: var(--gold-text); padding: 0 13px; font-size: 11px; font-weight: 800; cursor: pointer; }
.rank-board { border-top: 1px solid var(--line); }
.rank-board-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.rank-board-head p { max-width: 330px; margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.rank-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.rank-card { min-height: 188px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 24px 20px; border-right: 1px solid var(--line); transition: background .22s ease, box-shadow .22s ease; }
.rank-card:last-child { border-right: 0; }
.rank-card:hover { background: var(--hairline); }
.rank-card .rank-crest { width: 62px; }
.rank-card h3 { font-family: var(--display); font-size: 15px; text-transform: uppercase; }
.rank-card strong { color: var(--gold-text); font-family: var(--display); font-size: 12px; }
.rank-card.active { background: var(--accent-wash); box-shadow: inset 0 3px 0 var(--gold); }
.rank-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.identity-entry-grid { display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; gap: 20px; max-width: 1120px; margin-inline: auto; }
.identity-entry-copy { max-width: 640px; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.identity-benefits { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, var(--accent-wash), transparent 55%), var(--hairline); box-shadow: var(--shadow-soft); }
.identity-benefits > div { display: grid; grid-template-columns: 36px 1fr; align-content: center; gap: 6px 13px; min-height: 146px; padding: 23px; border-bottom: 1px solid var(--line); transition: background .2s ease; }
.identity-benefits > div:hover { background: var(--accent-wash); }
.identity-benefits > div:last-child { border-bottom: 0; }
.identity-benefits span { grid-row: span 2; color: var(--gold-text); font-family: var(--display); font-size: 11px; }
.identity-benefits b { font-size: 14px; }
.identity-benefits p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.profile-dashboard { display: grid; gap: 18px; }
.profile-overview, .profile-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .24s ease, box-shadow .24s ease; }
.profile-section:hover { border-color: var(--accent-wash-strong); box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.profile-overview { overflow: hidden; border-color: var(--line-strong); background: linear-gradient(135deg, var(--accent-wash), transparent 46%), var(--surface); }
.profile-overview-main { min-height: 154px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 26px 28px; }
.profile-rank-crest { width: 92px; }
.profile-identity h2 { margin-top: 7px; font-size: 31px; }
.profile-identity p { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.profile-identity p b { color: var(--gold-text); text-transform: uppercase; }
.profile-identity p span::before { content: "·"; margin-right: 9px; color: var(--muted-2); }
.profile-logout { align-self: start; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-stat { min-height: 116px; display: grid; align-content: center; gap: 5px; padding: 20px 28px; }
.profile-stat + .profile-stat { border-left: 1px solid var(--line); }
.profile-stat span { color: var(--muted); font-size: 11px; }
.profile-stat b { color: var(--text); font-family: var(--display); font-size: 25px; }
.profile-stat small { color: var(--muted-2); font-size: 9px; }
.profile-progress-block { display: grid; gap: 10px; padding: 20px 28px 24px; }
.profile-progress-block .rank-progress-head { justify-content: space-between; }
.profile-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(300px, .78fr); gap: 18px; align-items: start; }
.profile-section { padding: 26px; }
.profile-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.profile-section h2 { margin-top: 6px; font-size: 25px; }
.order-filters { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.order-filters button { min-height: 44px; border: 0; border-radius: 5px; padding: 0 13px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; }
.order-filters button.active { background: var(--accent-wash); color: var(--gold-text); }
.order-list { display: grid; }
.store-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.store-order[hidden] { display: none; }
.store-order-main { min-width: 0; }
.store-order-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.store-order h3 { font-size: 14px; }
.order-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 8px; background: var(--hairline); color: var(--muted); font-size: 9px; font-weight: 800; }
.order-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.order-status.paid { color: var(--gold-text); }
.order-status.completed { color: var(--green); }
.order-status.refunded { color: var(--blue); }
.order-meta { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 8px; color: var(--muted-2); font-size: 10px; }
.order-status-copy { max-width: 620px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.order-amount { align-self: center; font-family: var(--display); font-size: 16px; }
.orders-empty { min-height: 290px; display: grid; place-items: start; align-content: center; gap: 10px; border-top: 1px solid var(--line); }
.orders-empty[hidden] { display: none; }
.orders-empty > span { color: var(--gold-text); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.orders-empty h3 { font-family: var(--display); font-size: 20px; text-transform: uppercase; }
.orders-empty p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.orders-empty .button { margin-top: 5px; }
.profile-sidebar { display: grid; gap: 18px; }
.profile-sidebar .profile-section { padding: 22px; }
.profile-sidebar h2 { font-size: 20px; }
.referral-card > p { margin: 11px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.referral-metrics { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--line); }
.referral-metrics > div { display: grid; gap: 5px; padding-top: 16px; }
.referral-metrics > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.referral-metrics span { color: var(--muted); font-size: 10px; }
.referral-metrics b { font-family: var(--display); font-size: 18px; }
.account-lines { display: grid; margin-top: 16px; border-top: 1px solid var(--line); }
.account-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.account-lines b { max-width: 62%; overflow-wrap: anywhere; color: var(--text); text-align: right; }
.account-support { min-height: 44px; display: inline-flex; align-items: center; margin-top: 10px; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.checkout-counter { display: flex; align-items: baseline; gap: 9px; margin: 14px 0 24px; }
.checkout-counter b { color: var(--gold-text); font-family: var(--display); font-size: 38px; }
.checkout-counter span { color: var(--muted); font-size: 12px; }
.checkout-counter [data-checkout-total] { font-size: clamp(28px, 3vw, 38px); }
.checkout-summary-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -10px 0 20px; border-radius: 7px; padding: 12px 14px; background: var(--accent-wash); }
.checkout-summary-line span { color: var(--muted); font-size: 11px; }
.checkout-summary-line b { color: var(--gold-text); font-size: 13px; }
.checkout-state { position: relative; margin-top: 18px; border: 1px solid var(--line); border-radius: 7px; padding: 13px 15px 13px 39px; color: var(--muted); font-size: 11px; font-weight: 750; line-height: 1.45; }
.checkout-state::before { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid currentColor; border-radius: 50%; opacity: .8; }
.checkout-state.loading::before { border-right-color: transparent; animation: spin .75s linear infinite; }
.checkout-state.success { border-color: rgba(159,211,155,.24); color: var(--green); background: rgba(159,211,155,.035); }
.checkout-state.success::before { width: 7px; height: 4px; margin-top: -4px; border-width: 0 0 2px 2px; border-radius: 0; transform: rotate(-45deg); }
.checkout-state.warning { border-color: var(--gold-line); color: var(--gold-text); background: var(--accent-wash); }
.checkout-state.error { border-color: rgba(235,121,121,.26); color: var(--red); background: rgba(235,121,121,.035); }
.checkout-note { display: grid; gap: 7px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.checkout-note b { font-size: 12px; }
.checkout-note span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.checkout-side .button { margin-top: 20px; }
.checkout-help { display: block; margin-top: 18px; color: var(--gold-text); font-size: 11px; font-weight: 800; }
.checkout-empty { display: grid; justify-items: start; gap: 12px; margin-top: 22px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 30px; background: var(--hairline); }
.checkout-empty h2 { font-size: 25px; }
.checkout-empty p { max-width: 430px; margin: 0; color: var(--muted); }
.faq-layout { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 44px; }
.faq-layout h2 { font-size: 34px; }
.faq-list { display: grid; gap: 8px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 17px 32px 17px 0; cursor: pointer; font-weight: 800; font-size: 14px; list-style: none; transition: color .18s ease, padding-left .18s ease; }
.faq-list summary:hover { color: var(--gold-text); padding-left: 4px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--gold-text); font-size: 22px; font-weight: 400; transition: transform .22s cubic-bezier(.2,.75,.25,1); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details[open] > p { animation: details-reveal .24s ease both; }
.faq-list p { max-width: 760px; margin: 0 0 17px; color: var(--muted); font-size: 13px; }
.faq-list p a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.help-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 52px; }
.help-head { border-bottom: 1px solid var(--line); padding: 24px 0 18px; }
.help-head .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.help-head h1 { margin: 0; font-size: clamp(34px, 4vw, 48px); }
.help-nav { position: sticky; top: 140px; display: grid; align-content: start; gap: 4px; height: fit-content; border-left: 1px solid var(--line); }
.help-nav a { padding: 8px 0 8px 14px; color: var(--muted); font-size: 13px; }
.help-nav a:hover { color: var(--gold-text); }
.help-faq { gap: 42px; }
.help-faq > div { scroll-margin-top: 150px; }
.help-faq h2 { margin: 8px 0 16px; font-size: 28px; }
@media (max-width: 1060px) {
h1 { font-size: 52px; }
.commerce-board { grid-template-columns: 220px 1fr; }
.board-brand { grid-row: span 2; }
.board-fields { border-right: 0; }
.board-summary { grid-column: 2; border-top: 1px solid var(--line); }
.service-grid { grid-template-columns: repeat(2, 1fr); }
.game-row { grid-template-columns: repeat(3, 1fr); }
.catalog-grid { grid-template-columns: repeat(2, 1fr); }
.service-launchpad { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.game-configurator { grid-template-columns: minmax(260px, .65fr) minmax(0, 1.5fr); }
.workspace { grid-template-columns: 1fr 330px; }
.steam-flow-grid { grid-template-columns: 1fr 1fr; }
.steam-order { grid-column: 1 / -1; min-height: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 22px; }
.steam-order .button { min-width: 230px; margin: 0; }
.storefront-grid { grid-template-columns: repeat(2, 1fr); }
.featured-service:first-child { grid-column: 1 / -1; }
.checkout-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.profile-dashboard-grid { grid-template-columns: minmax(0, 1fr) 300px; }
.profile-stat { padding-inline: 22px; }
.voucher-service-switch { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.voucher-layout { grid-template-columns: minmax(0, 1fr) 310px; }
.home-order-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 780px) {
body { padding-bottom: 88px; }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-dock { opacity: 0; pointer-events: none; }
.site-header { background: rgba(18,19,21,.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
.mobile-dock { position: fixed; z-index: 150; left: 50%; bottom: 10px; width: min(calc(100% - 20px), 560px); min-height: 66px; display: grid; grid-template-columns: repeat(5, 1fr); transform: translateX(-50%); border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface); padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.44); backdrop-filter: blur(18px); }
.mobile-dock a { min-width: 0; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 14px; color: var(--muted-2); font-size: 9px; font-weight: 700; }
.mobile-dock a.active { background: var(--accent-wash); color: var(--gold-text); }
.mobile-dock svg { width: 21px; height: 21px; }
.mobile-dock .dock-telegram { width: 23px; height: 23px; }
.container { width: min(calc(100% - 28px), var(--max)); }
.header-main { grid-template-columns: auto 1fr auto; gap: 12px; }
.site-search { max-width: none; }
.site-search kbd { display: none; }
.header-actions .support-button { display: none; }
.menu-button { display: grid; }
.header-nav { position: fixed; inset: 0; z-index: 190; display: block; visibility: hidden; overflow: hidden; background: rgba(3,4,3,.72); opacity: 0; transition: opacity .18s ease, visibility .18s ease; }
.header-nav.open { visibility: visible; opacity: 1; }
.desktop-nav { display: none; }
.mobile-menu-panel { position: absolute; top: 0; right: 0; width: min(100%, 420px); height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); border-left: 1px solid var(--line); background: var(--bg); padding: max(16px, env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: -24px 0 70px rgba(0,0,0,.5); transition: transform .22s cubic-bezier(.2,.75,.25,1); }
.header-nav.open .mobile-menu-panel { transform: translateX(0); }
.mobile-menu-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 14px; border-bottom: 1px solid var(--line); }
.mobile-menu-list { display: grid; gap: 6px; padding: 18px 0; }
.mobile-menu-list a { min-height: 58px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 14px; color: var(--muted); padding: 7px 12px; font-size: 16px; }
.mobile-menu-list a > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--hairline); }
.mobile-menu-list svg { width: 21px; height: 21px; }
.mobile-menu-list a.active { border-color: var(--accent-border-soft); background: var(--accent-wash); color: var(--text); }
.mobile-menu-list a.active > span { border-color: var(--accent-border-soft); color: var(--gold-text); background: var(--accent-wash); }
.mobile-menu-bottom { display: grid; gap: 14px; margin-top: auto; }
.mobile-menu-support { min-height: 68px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid var(--accent-border-soft); border-radius: 16px; background: linear-gradient(135deg, var(--accent-wash), var(--accent-wash)); padding: 11px 12px; }
.mobile-menu-support > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--gold-fill); color: var(--gold-ink); }
.mobile-menu-support svg { width: 21px; height: 21px; }
.mobile-menu-support b, .mobile-menu-support small { display: block; }
.mobile-menu-support b { font-size: 14px; }
.mobile-menu-support small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.mobile-menu-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 4px; }
.mobile-menu-legal a { min-height: 36px; display: inline-flex; align-items: center; color: var(--muted-2); font-size: 11px; }
.nav-spacer, .nav-status { display: none; }
.section { padding: 52px 0; }
.section-head, .page-hero-row { display: grid; grid-template-columns: 1fr; align-items: start; }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
.hero-copy p { font-size: 16px; }
.commerce-board { grid-template-columns: 1fr; }
.board-brand { min-height: 130px; grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line); }
.board-fields { grid-template-columns: 1fr; }
.quick-row { grid-column: auto; }
.board-summary { grid-column: auto; }
.workspace { grid-template-columns: 1fr; }
.workspace-side { position: static; }
.form-grid { grid-template-columns: 1fr; }
.form-grid .wide { grid-column: auto; }
.catalog-grid { grid-template-columns: repeat(2, 1fr); }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 10px; }
.service-launchpad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.game-configurator { grid-template-columns: 1fr; }
.game-configurator-visual { min-height: 300px; }
.game-configurator-visual > img { min-height: 300px; max-height: 380px; }
.telegram-product-card { grid-template-columns: 58px minmax(0, 1fr) auto; padding: 18px; }
.telegram-product-card > img { width: 56px; height: 56px; }
.package-grid { grid-template-columns: repeat(2, 1fr); }
.footer-main { grid-template-columns: 1fr 1fr; }
.footer-about { grid-column: 1 / -1; }
.assurance-row { grid-template-columns: 1fr; }
.assurance-row span + span { border-left: 0; border-top: 1px solid var(--line); }
.faq-layout, .help-grid { grid-template-columns: 1fr; gap: 28px; }
.help-nav { position: static; display: flex; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.help-nav a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; }
.store-hero-top { grid-template-columns: 1fr; gap: 18px; }
.store-hero-top > p { max-width: 590px; margin: 0; }
.steam-flow-grid { grid-template-columns: 1fr; }
.steam-step { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
.steam-order { grid-column: auto; display: flex; min-height: 190px; }
.steam-order .button { min-width: 0; margin-top: 20px; }
.flow-proofs { grid-template-columns: 1fr; }
.flow-proofs span + span, .flow-proofs a { border-left: 0; border-top: 1px solid var(--line); }
.checkout-layout { grid-template-columns: 1fr; }
.game-checkout-form { grid-template-columns: 1fr; }
.checkout-side { position: static; }
.legal-layout { grid-template-columns: 1fr; gap: 30px; }
.legal-meta { position: static; order: -1; }
.legal-copy .legal-title { font-size: clamp(30px, 7vw, 42px); }
.identity-grid { grid-template-columns: 1fr; }
.identity-entry-grid, .profile-dashboard-grid { grid-template-columns: 1fr; }
.identity-benefits { grid-template-columns: repeat(3, 1fr); }
.identity-benefits > div { min-height: 150px; grid-template-columns: 1fr; align-content: start; border-right: 1px solid var(--line); border-bottom: 0; }
.identity-benefits > div:last-child { border-right: 0; }
.identity-benefits span { grid-row: auto; }
.profile-sidebar { grid-template-columns: 1fr 1fr; }
.rank-grid { grid-template-columns: repeat(2, 1fr); }
.rank-card:nth-child(2n) { border-right: 0; }
.rank-card:nth-child(n+3) { border-top: 1px solid var(--line); }
.login-methods { grid-template-columns: 1fr; }
.voucher-layout { grid-template-columns: 1fr; }
.voucher-summary { position: static; }
.checkout-layout { grid-template-columns: minmax(0, 1fr); }
.checkout-main, .checkout-side { width: 100%; }
.voucher-service-switch { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
body[data-checkout] { padding-bottom: 0; }
.header-main { height: 64px; grid-template-columns: auto 1fr auto; }
.brand-word { height: 14px; width: 59px; }
.brand-mark { height: 18px; }
.site-search input { height: 40px; padding-right: 12px; }
.site-search input::placeholder { color: transparent; }
.section, .section.compact { padding: 28px 0; }
h1 { font-size: 31px; }
.page-hero { padding: 20px 0 16px; }
.page-hero h1 { max-width: 100%; margin-top: 8px; font-size: clamp(27px, 8.1vw, 32px); line-height: 1.02; overflow-wrap: anywhere; }
.page-hero p { display: none; }
.page-badge { display: none; }
.breadcrumbs { margin-bottom: 8px; }
.workspace-main, .workspace-side { padding: 20px; }
.field label { font-size: 12px; }
.workspace-title { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
h2 { font-size: 28px; }
.identity-hero, .help-head { padding: 14px 0 10px; }
.identity-hero h1, .help-head h1 { font-size: 26px; }
.help-head .button { min-height: 44px; padding-inline: 14px; }
.identity-hero p { display: none; }
.identity-panel-head { min-height: 58px; padding: 0 18px; }
.identity-panel-body { padding: 18px; }
.identity-head-note { display: none; }
.login-method-secondary { grid-template-columns: 1fr; }
.login-method { min-height: 48px; }
.identity-benefits { grid-template-columns: 1fr; }
.identity-benefits > div { min-height: auto; grid-template-columns: 34px 1fr; border-right: 0; border-bottom: 1px solid var(--line); }
.identity-benefits > div:last-child { border-bottom: 0; }
.identity-benefits span { grid-row: span 2; }
.profile-overview-main { grid-template-columns: auto 1fr; gap: 16px; padding: 22px 20px; }
.profile-rank-crest { width: 72px; }
.profile-identity h2 { font-size: 23px; }
.profile-logout { grid-column: 1 / -1; width: 100%; }
.profile-stat-grid { grid-template-columns: 1fr; }
.profile-stat { min-height: 88px; padding: 16px 20px; }
.profile-stat + .profile-stat { border-left: 0; border-top: 1px solid var(--line); }
.profile-progress-block { padding: 18px 20px 21px; }
.profile-sidebar { grid-template-columns: 1fr; }
.profile-section { padding: 19px; }
.profile-section-head { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.order-filters { width: 100%; justify-self: stretch; }
.order-filters button { flex: 1; }
.store-order { grid-template-columns: 1fr; gap: 9px; }
.order-amount { justify-self: start; }
.rank-board-head p { display: none; }
.home-hero { padding-top: 34px; }
.store-hero { padding: 20px 0 26px; }
.store-hero-top { gap: 8px; margin-bottom: 16px; }
.store-hero-top h1 { margin-top: 8px; font-size: 31px; }
.home-title-desktop { display: none; }
.home-title-mobile { display: inline; white-space: nowrap; }
.store-hero-top > p { display: none; }
.home-showcase { margin-top: 18px; }
.home-showcase-head { margin-bottom: 11px; }
.home-showcase-head h2 { font-size: 20px; }
.home-showcase-head > a { font-size: 11px; }
.home-showcase-grid { display: grid; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 164px; gap: 10px; overflow-x: auto; margin-inline: -14px; padding: 0 14px 8px; scroll-padding-inline: 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-showcase-grid::-webkit-scrollbar { display: none; }
.home-showcase-card { width: 164px; min-width: 164px; grid-template-rows: 92px auto; border-radius: 14px; scroll-snap-align: start; }
.home-showcase-card:hover, .home-showcase-card:focus-visible { transform: none; }
.home-showcase-card.stars .home-showcase-art img, .home-showcase-card.premium .home-showcase-art img, .home-showcase-card.service .home-showcase-art img { width: 52px; height: 52px; }
.home-showcase-copy { padding: 11px 12px 13px; }
.home-showcase-copy b { font-size: 13px; }
.home-showcase-copy em { font-size: 10px; }
.board-brand, .board-fields, .board-summary { padding: 20px; }
.service-grid, .game-row, .catalog-grid, .info-grid { grid-template-columns: 1fr; }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 9px; }
.service-launchpad { display: flex; gap: 11px; margin: 0 0 16px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.service-launchpad::-webkit-scrollbar { display: none; }
.launch-service { width: 74px; min-width: 74px; align-content: start; justify-items: center; gap: 7px; padding: 2px; scroll-snap-align: start; }
.launch-service b { min-height: 30px; font-size: 11px; line-height: 1.3; }
.launch-icon { width: 64px; height: 64px; }
.home-order-layout { grid-template-columns: 1fr; gap: 10px; }
.home-order-layout.compact-action, .workspace.compact-action { gap: 0; }
.home-order-layout.compact-action .home-order-card, .workspace.compact-action .workspace-main { border-radius: 16px 16px 0 0; }
.home-order-layout.compact-action .action-only, .workspace.compact-action .action-only { position: static; border-top: 0; border-radius: 0 0 16px 16px; background: var(--surface); padding: 10px 14px 14px; }
.home-order-card { padding: 0 14px 14px; border-radius: 16px; }
.home-order-head { min-height: 56px; margin: 0 -14px 13px; padding: 0 14px; }
.home-order-head .steam-flow-brand img { width: 34px; height: 34px; padding: 6px; }
.home-order-head .status-chip { font-size: 10px; }
.home-order-fields { grid-template-columns: minmax(0, 1fr) 118px; gap: 9px; }
.home-order-fields .input-wrap input { height: 50px; padding-inline: 12px 34px; font-size: 14px; }
.home-order-fields .field label { font-size: 10px; }
.home-presets { grid-column: 1 / -1; }
.home-presets .quick-row { gap: 6px; }
.home-presets .quick { min-height: 44px; padding-inline: 4px; font-size: 10px; }
.home-order-summary { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(142px, auto); align-items: center; gap: 10px; border-radius: 16px; padding: 14px; }
.home-order-summary .order-total { gap: 3px; }
.home-order-summary .order-total b { font-size: 23px; }
.home-order-summary .button { min-height: 50px; margin: 0; }
.home-order-summary .button { min-width: 0; padding-inline: 12px; }
.home-order-summary.action-only { display: flex; border-top: 0; border-radius: 0 0 16px 16px; padding: 10px 14px 14px; }
.telegram-home-fields .home-recipient { grid-column: 1; }
.home-stars-input { grid-template-columns: minmax(0, 1fr) auto; }
.home-stars-input img { display: none; }
.home-stars-input input { font-size: 20px; }
.home-stars-input span { font-size: 9px; }
.home-premium-packages { grid-column: 1 / -1; }
.home-premium-packages .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.home-premium-packages .telegram-package { min-height: 82px; padding: 9px; }
.home-premium-packages .telegram-package img { width: 24px; height: 24px; }
.home-order-summary.telegram-home-summary { grid-template-columns: 1fr; gap: 10px; }
.telegram-home-summary .telegram-summary-icon { width: 42px; height: 42px; }
.telegram-home-summary .telegram-summary-icon img { width: 31px; height: 31px; }
.telegram-home-summary h3, .telegram-home-summary .home-price { display: none; }
.telegram-home-summary .order-total b { font-size: 14px; }
.telegram-product-switch { grid-template-columns: 1fr; }
.telegram-product-card { min-height: 100px; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 13px; padding: 15px; }
.telegram-product-card > img { width: 48px; height: 48px; border-radius: 12px; padding: 8px; }
.telegram-product-card b { font-size: 18px; }
.stars-quantity { grid-template-columns: 1fr; gap: 8px; }
.stars-quantity-input { min-height: 60px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; padding: 8px 11px; }
.stars-quantity-input img { width: 36px; height: 36px; padding: 6px; }
.stars-quantity-input input { font-size: 25px; }
.stars-quantity-input span { font-size: 10px; }
.stars-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; overflow: visible; }
.stars-presets button { min-width: 0; min-height: 44px; padding: 0 2px; font-size: 9.5px; }
.product-choice-grid, .account-fields { grid-template-columns: 1fr; }
.product-choice-grid { max-height: 340px; }
.config-step-title b { font-size: 14px; }
.config-step-title small { font-size: 10.5px; line-height: 1.35; }
.region-choice b { font-size: 12px; }
.region-choice small { font-size: 10px; }
.account-fields .field > span { font-size: 12px; }
.account-fields input, .account-fields select { height: 50px; border-radius: 11px; font-size: 14px; }
.account-fields small { font-size: 10px; line-height: 1.35; }
.voucher-product { border-radius: 12px; }
.voucher-product b { font-size: 12px; }
.voucher-product small { font-size: 10px; }
.voucher-product em { font-size: 11px; }
.game-configurator-main { padding: 20px; }
.game-configurator-visual > div { left: 20px; right: 20px; bottom: 20px; }
.configurator-footer { align-items: stretch; flex-direction: column; }
.configurator-action { width: 100%; min-width: 0; }
.catalog-tools { grid-template-columns: 1fr; }
.catalog-tools select { display: none; }
.catalog-search input { height: 50px; }
.catalog-category-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: 0; padding: 0 0 8px; scrollbar-width: none; }
.catalog-category-tabs .filter { min-height: 44px; padding-inline: 12px; }
.live-catalog-head { display: none; }
.catalog-result { margin-bottom: 10px; }
.game-logo-card { padding: 2px; }
.game-logo-card h3 { min-height: 30px; font-size: 10.5px; }
.catalog-category-tabs::-webkit-scrollbar { display: none; }
.game-cover-generated .cover-name { right: 96px; font-size: 19px; }
.method-grid { grid-template-columns: 1fr; }
.info-item, .info-item + .info-item { min-height: auto; padding: 18px 0; border-left: 0; }
.site-footer { border-top-color: var(--hairline); background: none; padding: 7px 0 82px; }
.footer-compact { display: none; }
.footer-bottom { border-top: 0; flex-direction: column; gap: 0; padding-top: 0; }
.footer-bottom > span:first-child { display: none; }
.footer-legal-links { justify-content: center; gap: 0 10px; }
.footer-legal-links a { min-height: 24px; font-size: 9px; font-weight: 600; }
.trademark { display: none; }
.rank-grid { grid-template-columns: 1fr; }
.rank-card, .rank-card:nth-child(2n) { min-height: 0; display: grid; grid-template-columns: 58px 1fr; align-items: center; border-right: 0; border-top: 1px solid var(--line); }
.rank-card:first-child { border-top: 0; }
.steam-flow-head { min-height: auto; align-items: center; flex-direction: row; gap: 11px; padding: 12px 14px; }
.steam-flow-head .status-chip { display: none; }
.steam-flow-brand { gap: 12px; }
.steam-flow-brand img { width: 38px; height: 38px; padding: 7px; }
.steam-flow-brand span { font-size: 11px; }
.store-hero .steam-flow-grid { grid-template-columns: minmax(0, 1fr) 120px; }
.store-hero .steam-step { min-height: 0; padding: 13px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.store-hero .steam-step:nth-child(2) { border-right: 0; }
.store-hero .steam-step .step-number, .store-hero .steam-step .helper, .store-hero .amount-presets { display: none; }
.store-hero .steam-step .field { gap: 5px; }
.store-hero .steam-step .field label { font-size: 11px; }
.store-hero .steam-step .input-wrap input, .store-hero .amount-input input { height: 48px; border-radius: 11px; padding-inline: 12px 34px; font-size: 14px; }
.store-hero .amount-input input { padding: 0 28px 0 10px; font-size: 17px; }
.store-hero .amount-input span { right: 10px; }
.store-hero .steam-order { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(126px, auto); align-items: center; gap: 10px; padding: 12px 14px; }
.store-hero .steam-order .order-kicker, .store-hero .steam-order p { display: none; }
.store-hero .steam-order .order-amount { margin: 0; font-size: 21px; white-space: nowrap; }
.store-hero .steam-order .button { min-width: 112px; min-height: 46px; margin: 0; font-size: 0; }
.store-hero .steam-order .button::before { content: "Далее →"; position: relative; z-index: 1; font-size: 13px; }
.store-hero .flow-proofs { display: none; }
.steam-step, .steam-order { padding: 18px; }
.amount-presets { grid-template-columns: repeat(2, 1fr); }
.storefront-grid { grid-template-columns: 1fr; }
.featured-service:first-child { grid-column: auto; }
.featured-service { min-height: 176px; }
.checkout-page { padding: 14px 0 20px; }
.checkout-header-main { height: 64px; }
.checkout-header-title { font-size: 11px; }
.checkout-layout { gap: 10px; }
.checkout-main > .breadcrumbs, .checkout-main > .eyebrow, .checkout-main > h1, .checkout-intro, .checkout-steps { display: none; }
.checkout-items { border-top: 0; }
.checkout-item { min-height: 70px; align-items: flex-start; gap: 10px; padding: 10px 0; }
.checkout-item span { font-size: 10px; }
.checkout-item h3 { margin-top: 3px; font-size: 14px; }
.checkout-item p { margin-top: 3px; font-size: 11px; line-height: 1.35; }
.checkout-state { margin-top: 8px; border-radius: 12px; padding: 10px 12px 10px 34px; font-size: 11px; }
.checkout-state::before { left: 13px; }
.checkout-side { border-radius: 16px; padding: 15px; }
.checkout-side > .helper,
.checkout-help { display: none; }
.checkout-counter { justify-content: space-between; margin: 0 0 10px; }
.checkout-counter b { font-size: 27px; }
.checkout-counter span { font-size: 11px; }
.checkout-summary-line { margin: 0 0 10px; border-radius: 11px; padding: 9px 11px; }
.checkout-note { padding: 9px 0; }
.checkout-note span { display: none; }
.checkout-side .button { min-height: 50px; margin-top: 10px; }
.checkout-legal { margin-top: 9px; font-size: 9.5px; line-height: 1.4; }
.steam-page .page-hero { display: none; }
.steam-page main > .section:nth-of-type(n+3) { display: none; }
.steam-page .section.compact { padding: 14px 0 18px; }
.section-banner { height: 86px; margin-bottom: 12px; border-radius: 14px; }
.section-banner h1 { left: 16px; font-size: 18px; }
.steam-page .workspace { gap: 0; }
.steam-page .workspace-main { border-radius: 16px 16px 0 0; padding: 14px; }
.steam-page .workspace-side { border-radius: 0 0 16px 16px; padding: 14px; }
.steam-page .workspace-title { align-items: center; flex-wrap: nowrap; gap: 10px; margin-bottom: 11px; }
.steam-page .workspace-title > img { width: 40px; height: 40px; padding: 8px; }
.steam-page .form-grid { grid-template-columns: minmax(0, 1fr) 118px; gap: 9px; }
.steam-page .form-grid > .field { min-width: 0; }
.steam-page .form-grid > .field:nth-child(1) { grid-column: 1; }
.steam-page .form-grid > .field:nth-child(2) { grid-column: 2; }
.steam-page .form-grid > .field:nth-child(3) { grid-column: 1 / -1; }
.steam-page .form-grid > .field:nth-child(4) { display: none; }
.steam-page .field label { font-size: 11px; }
.steam-page .field .helper { display: none; }
.steam-page .input-wrap input { height: 48px; padding-inline: 12px 32px; font-size: 14px; }
.steam-page .quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.steam-page .quick { min-width: 0; min-height: 42px; padding: 0 4px; font-size: 10px; }
.steam-page .workspace-side h3 { display: none; }
.steam-page .workspace-side .order-lines, .steam-page .workspace-side .helper { display: none; }
.steam-page .workspace-side.action-only { padding-top: 10px; }
.telegram-page .page-hero, .games-page .page-hero, .services-page .page-hero { display: none; }
.telegram-page main > .section:nth-of-type(n+3), .games-page main > .section:nth-of-type(n+3), .services-page main > .section:nth-of-type(n+3) { display: none; }
.telegram-page .section.compact, .games-page .section.compact, .services-page .section.compact { padding-top: 14px; }
.telegram-page .section-banner { height: 72px; }
.telegram-page .telegram-product-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 9px; }
.telegram-page .telegram-product-card { width: 100%; min-width: 0; min-height: 64px; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 14px; }
.telegram-page .telegram-product-card > img { width: 38px; height: 38px; border-radius: 11px; padding: 6px; }
.telegram-page .telegram-product-card small, .telegram-page .telegram-product-card em, .telegram-page .telegram-product-card > i { display: none; }
.telegram-page .telegram-product-card b { min-width: 0; margin: 0; font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; }
.telegram-page .telegram-workspace { gap: 0; }
.telegram-page .workspace-main { padding: 15px; }
.telegram-page .telegram-recipient-field { margin-bottom: 13px; }
.telegram-page .field label { margin-bottom: 6px; font-size: 10px; }
.telegram-page .input-wrap input { height: 48px; }
.telegram-page .telegram-summary { padding: 10px 14px 14px; }
.telegram-page .telegram-summary-icon, .telegram-page .telegram-summary h3, .telegram-page .telegram-summary .order-lines, .telegram-page .telegram-summary .helper { display: none; }
.telegram-page .telegram-submit { min-height: 50px; margin: 0; }
.voucher-service-switch { display: flex; gap: 11px; margin: 0 0 12px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }.voucher-service-switch::-webkit-scrollbar { display: none; }.voucher-service-card { width: 74px; min-width: 74px; padding: 2px; scroll-snap-align: start; }.voucher-service-card > span { width: 64px; }.voucher-service-card b { min-height: 30px; font-size: 11px; }
.voucher-main { padding: 16px; }.voucher-product-grid { grid-template-columns: 1fr; max-height: 360px; }.voucher-flow-head { align-items: flex-start; padding-bottom: 12px; }
.voucher-region-grid, .region-choice-grid { width: 100%; max-width: 100%; flex-wrap: nowrap; margin-inline: 0; padding: 0 0 6px; overflow-x: auto; overflow-y: hidden; max-height: none; scrollbar-width: none; }.voucher-region-grid::-webkit-scrollbar, .region-choice-grid::-webkit-scrollbar { display: none; }
.voucher-region, .region-choice { min-width: 148px; scroll-snap-align: start; }
}
.site-verification {
display: none !important;
}
html.catalog-sheet-open,
html.catalog-sheet-open body {
overflow: hidden;
}
.games-page .section.compact,
.services-page .section.compact {
padding-top: 22px;
}
.games-page .catalog-tools {
grid-template-columns: minmax(0, 1fr) 156px;
gap: 8px;
margin-bottom: 10px;
}
.games-page .catalog-search,
.games-page .catalog-tools select {
height: 48px;
border: 0;
border-radius: 14px;
background-color: var(--ui-control);
}
.games-page .catalog-category-tabs {
gap: 6px;
margin-bottom: 22px;
}
.games-page .catalog-category-tabs .filter {
min-height: 44px;
border: 0;
border-radius: 12px;
padding: 0 14px;
background: var(--hairline);
}
.games-page .catalog-category-tabs .filter.active {
background: var(--accent-wash);
box-shadow: none;
}
.games-page .catalog-result {
min-height: 0;
margin: 0;
}
.catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
align-items: start;
gap: 20px 12px;
margin: 0;
padding: 0;
overflow: visible;
mask-image: none;
}
.game-logo-card,
.services-page .voucher-service-card {
width: auto;
min-width: 0;
display: grid;
grid-template-rows: auto minmax(32px, auto);
justify-items: center;
gap: 8px;
border: 0;
border-radius: 16px;
padding: 6px;
background: transparent;
color: var(--ui-text);
scroll-snap-align: none;
}
.game-logo-card > span,
.services-page .voucher-service-card > span {
width: min(100%, 92px);
height: auto;
aspect-ratio: 1;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--surface-2);
transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.game-logo-card > span img,
.services-page .voucher-service-card > span img {
width: 100%;
height: 100%;
object-fit: cover;
}
.services-page .voucher-service-card > span img {
padding: 19%;
object-fit: contain;
}
.game-logo-card:hover > span,
.game-logo-card:focus-visible > span,
.services-page .voucher-service-card:hover > span,
.services-page .voucher-service-card:focus-visible > span {
transform: translateY(-2px);
border-color: var(--accent-border-soft);
background: #16181b;
box-shadow: none;
}
.game-logo-card:focus-visible,
.services-page .voucher-service-card:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.game-logo-card h3,
.services-page .voucher-service-card b {
width: 100%;
min-height: 32px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--ui-text);
font-family: var(--body);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
text-align: center;
overflow-wrap: anywhere;
}
.game-logo-icon > i {
top: -4px;
right: -4px;
min-height: 22px;
border: 2px solid var(--ui-bg);
border-radius: 999px;
padding: 3px 7px;
font-size: 10px;
}
.services-page .voucher-service-card.active {
background: transparent;
box-shadow: none;
}
.services-page .voucher-service-card.active > span {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}
.services-page .voucher-service-card.active b {
color: var(--gold-text);
}
.games-page .game-checkout-panel,
.services-page .voucher-layout {
position: fixed;
inset: 0;
z-index: 220;
width: 100%;
height: 100dvh;
margin: 0;
border: 0;
border-radius: 0;
padding: 20px;
background: rgba(5, 6, 5, .72);
backdrop-filter: blur(10px);
box-shadow: none;
}
.games-page .game-checkout-panel {
display: grid;
place-items: center;
}
.games-page .game-checkout-panel[hidden],
.services-page .voucher-layout[hidden] {
display: none !important;
}
.games-page .game-configurator {
width: min(1040px, 100%);
max-height: min(780px, calc(100dvh - 40px));
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--ui-line);
border-radius: 24px;
background: var(--ui-surface);
box-shadow: 0 20px 70px rgba(0, 0, 0, .42);
}
.games-page .game-configurator-visual {
position: relative;
min-height: 100%;
overflow: hidden;
background: #0b0d0b;
}
.games-page .game-configurator-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 8, 7, .12) 12%, rgba(7, 8, 7, .92) 88%);
}
.games-page .game-configurator-visual > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.games-page .game-configurator-visual > div {
position: absolute;
inset: auto 22px 24px;
z-index: 1;
}
.games-page .game-configurator-badge {
display: none;
}
.games-page .game-configurator-visual span {
color: var(--gold-text);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.games-page .game-configurator-visual h2 {
margin: 7px 0 4px;
font-size: clamp(25px, 3vw, 38px);
line-height: 1;
}
.games-page .game-configurator-visual p {
margin: 0;
color: var(--ui-muted);
font-size: 13px;
}
.games-page .game-configurator-main {
min-width: 0;
max-height: inherit;
overflow: auto;
overscroll-behavior: contain;
padding: 0 22px;
scrollbar-width: thin;
scrollbar-color: var(--ui-line-strong) transparent;
}
.games-page .game-checkout-heading {
position: sticky;
top: 0;
z-index: 4;
min-height: 68px;
align-items: center;
margin: 0;
padding: 12px 0;
border-bottom: 1px solid var(--ui-line);
background: var(--ui-surface);
}
.games-page .game-checkout-heading h3 {
font-family: var(--body);
font-size: 18px;
}
.games-page .config-step,
.services-page .config-step {
margin: 0;
padding: 18px 0;
border: 0;
border-bottom: 1px solid var(--ui-line);
background: transparent;
}
.games-page .config-step-title,
.services-page .config-step-title {
margin-bottom: 12px;
}
.games-page .config-step-title > span,
.services-page .config-step-title > span {
width: 24px;
height: 24px;
border: 0;
background: var(--accent-wash);
color: var(--gold-text);
font-size: 11px;
}
.games-page .region-choice-grid,
.services-page .voucher-region-grid {
display: flex;
flex-wrap: wrap;
gap: 7px;
max-height: none;
overflow: visible;
padding: 0;
mask-image: none;
}
.games-page .region-choice,
.services-page .voucher-region {
min-width: 0;
min-height: 44px;
border: 1px solid transparent;
border-radius: 12px;
background: var(--ui-control);
padding: 8px 11px;
}
.games-page .region-choice.active,
.services-page .voucher-region.active {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
box-shadow: inset 0 0 0 1px var(--accent-wash);
}
.games-page .product-choice-grid,
.services-page .voucher-product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
max-height: none;
overflow: visible;
padding: 0;
}
.games-page .product-choice,
.services-page .voucher-product {
min-height: 64px;
grid-template-columns: 40px minmax(0, 1fr) 18px;
gap: 10px;
border: 1px solid transparent;
border-radius: 12px;
background: var(--ui-control);
padding: 10px;
}
.games-page .product-choice.active,
.services-page .voucher-product.active {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
}
.games-page .product-choice > img,
.services-page .voucher-product > img {
width: 40px;
height: 40px;
border-radius: 11px;
}
.games-page .product-choice b,
.services-page .voucher-product b {
font-size: 12px;
line-height: 1.25;
}
.games-page .product-choice small,
.services-page .voucher-product em {
color: var(--gold-text);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.games-page .account-fields {
gap: 10px;
}
.games-page .account-fields input,
.games-page .account-fields select,
.games-page .product-choice-search,
.services-page .choice-search {
min-height: 48px;
border: 0;
border-radius: 12px;
background: var(--ui-control);
}
.games-page .configurator-footer {
position: sticky;
bottom: 0;
z-index: 4;
margin: 0 -22px;
padding: 12px 22px;
border-top: 1px solid var(--ui-line);
background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
backdrop-filter: blur(14px);
}
.games-page .configurator-footer > div {
min-width: 0;
}
.games-page .configurator-footer b {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.services-page .voucher-layout {
display: grid;
grid-template-columns: minmax(0, 720px) 300px;
place-content: center;
align-items: stretch;
gap: 1px;
}
.services-page .voucher-main,
.services-page .voucher-summary {
max-height: min(780px, calc(100dvh - 40px));
border: 1px solid var(--ui-line);
background: var(--ui-surface);
box-shadow: 0 20px 70px rgba(0, 0, 0, .42);
}
.services-page .voucher-main {
position: relative;
overflow: auto;
overscroll-behavior: contain;
border-radius: 24px 0 0 24px;
padding: 22px;
}
.services-page .voucher-summary {
position: static;
display: flex;
flex-direction: column;
border-radius: 0 24px 24px 0;
padding: 22px;
}
.services-page .voucher-sheet-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 5;
}
.services-page .voucher-sheet-close svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
}
.choice-search[hidden],
.product-choice-search[hidden] {
display: none !important;
}
.services-page .voucher-flow-head {
min-height: 58px;
padding: 0 58px 14px 0;
border-bottom: 1px solid var(--ui-line);
}
.services-page .voucher-flow-head img {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--surface-2);
padding: 8px;
}
.services-page .voucher-summary .button {
margin-top: auto;
}
@media (max-width: 780px) {
.games-page .section.compact,
.services-page .section.compact {
padding-top: 10px;
}
.games-page .catalog-tools {
grid-template-columns: minmax(0, 1fr) 112px;
}
.games-page .catalog-tools select {
display: block;
width: 112px;
padding: 0 28px 0 10px;
font-size: 11px;
}
.games-page .catalog-category-tabs {
margin-inline: -12px;
padding-inline: 12px 26px;
}
.catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px 7px;
}
.game-logo-card,
.services-page .voucher-service-card {
padding: 2px;
}
.game-logo-card > span,
.services-page .voucher-service-card > span {
width: min(100%, 72px);
border-radius: 18px;
}
.game-logo-card h3,
.services-page .voucher-service-card b {
min-height: 31px;
font-size: 10.5px;
}
.games-page .game-checkout-panel,
.services-page .voucher-layout {
align-items: end;
align-content: end;
padding: 0;
background: var(--surface);
backdrop-filter: blur(7px);
}
.games-page .game-configurator {
width: 100%;
max-height: 91dvh;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 92px minmax(0, 1fr);
border-width: 1px 0 0;
border-radius: 24px 24px 0 0;
}
.games-page .game-configurator-visual {
min-height: 92px;
background: var(--ui-surface);
}
.games-page .game-configurator-visual::after {
display: none;
}
.games-page .game-configurator-visual > img:not(.game-configurator-badge) {
display: none;
}
.games-page .game-configurator-visual > div {
inset: 14px 72px 14px 16px;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
grid-template-rows: auto auto;
align-content: center;
column-gap: 12px;
}
.games-page .game-configurator-badge {
width: 54px;
height: 54px;
display: block;
grid-row: 1 / 3;
border-radius: 14px;
object-fit: cover;
}
.games-page .game-configurator-visual span,
.games-page .game-configurator-visual h2 {
grid-column: 2;
}
.games-page .game-configurator-visual h2 {
margin: 2px 0 0;
font-size: 21px;
line-height: 1.05;
}
.games-page .game-configurator-visual p {
display: none;
}
.games-page .game-configurator-main {
padding-inline: 14px;
}
.games-page .game-checkout-heading {
min-height: 58px;
padding: 8px 0;
}
.games-page .game-checkout-heading h3 {
font-size: 16px;
}
.games-page .config-step,
.services-page .config-step {
padding: 14px 0;
}
.games-page .region-choice-grid,
.services-page .voucher-region-grid {
flex-wrap: nowrap;
margin-inline: -14px;
padding: 0 22px 3px 14px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.games-page .region-choice,
.services-page .voucher-region {
flex: 0 0 auto;
scroll-snap-align: start;
}
.games-page .product-choice-grid,
.services-page .voucher-product-grid {
grid-template-columns: minmax(0, 1fr);
}
.games-page .configurator-footer {
margin-inline: -14px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.services-page .voucher-layout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
place-content: end stretch;
gap: 0;
}
.services-page .voucher-main {
max-height: calc(91dvh - 86px);
border-width: 1px 0 0;
border-radius: 24px 24px 0 0;
padding: 16px 14px;
}
.services-page .voucher-summary {
max-height: none;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr);
align-items: center;
gap: 10px;
border-width: 1px 0 0;
border-radius: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
box-shadow: 0 -12px 30px rgba(0, 0, 0, .22);
}
.services-page .voucher-summary-icon,
.services-page .voucher-summary > h3,
.services-page .voucher-summary .order-line:not(:last-child) {
display: none;
}
.services-page .voucher-summary .order-lines,
.services-page .voucher-summary .button {
margin: 0;
}
.services-page .voucher-summary .order-line {
min-height: 44px;
border: 0;
padding: 0;
}
}
@media (max-width: 350px) {
.catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.services-page .voucher-summary {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.game-logo-card > span,
.services-page .voucher-service-card > span {
transition: none;
}
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) { color-scheme: light; }
}
[data-theme="light"] {
color-scheme: light;
--bg: #F2F2F1;
--bg-2: #FAFAF9;
--surface: #FFFFFF;
--surface-2: #FAFAF9;
--surface-3: #F2F2F1;
--text: #191918;
--muted: #66665F;
--muted-2:#63625B;
--text-primary: #191918;
--text-secondary: #66665F;
--text-tertiary: #706F68;
--gold: #AF831D;
--gold-fill:#DCB45C;
--gold-text:#7A5B12;
--gold-strong: #7E5116;
--gold-ink:#241C12;
--paint-cobalt: #2F4DA8;
--paint-patina: #1F6B57;
--paint-plum: #5E3E96;
--paint-master: #221E18;
--line: #E7E7E4;
--line-strong: #D8D8D5;
--surface-highlight: rgba(255, 255, 255, .82);
--color-success: #2E6B44;
--color-error: #A8271B;
--color-disabled: #706F68;
--shadow: 0 1px 2px rgba(34, 30, 24, .06), 0 4px 16px rgba(34, 30, 24, .05);
--shadow-soft: 0 1px 2px rgba(34, 30, 24, .06), 0 4px 16px rgba(34, 30, 24, .05);
--sheet-shadow: 0 -8px 32px rgba(34, 30, 24, .14);
--red: #A8271B;
--green: #2E6B44;
--intent-wash: rgba(143, 87, 20, .10);
--accent-wash: rgba(143, 87, 20, .07);
--accent-wash-strong: rgba(143, 87, 20, .13);
--accent-border-soft: rgba(143, 87, 20, .42);
--hairline: rgba(25, 25, 24, .07);
--hairline-strong: rgba(25, 25, 24, .12);
--glass: rgba(255, 255, 255, .78);
--glass-2: rgba(255, 255, 255, .92);
--sheen: inset 0 1px 0 rgba(255, 255, 255, .72);
--glass-edge: rgba(25, 25, 24, .08);
;--focus-ring:#7E5116}
[data-theme="light"] .site-header {
border-color: var(--line);
background: var(--surface);
box-shadow: 0 8px 24px rgba(55, 45, 21, .07);
}
[data-theme="light"] .site-search input,
[data-theme="light"] .catalog-search input,
[data-theme="light"] .choice-search,
[data-theme="light"] .input-wrap,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
border-color: var(--line);
background: var(--surface);
color: var(--text);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
color: var(--muted-2);
opacity: 1;
}
[data-theme="light"] .site-search svg,
[data-theme="light"] .catalog-search svg {
color: var(--muted-2);
}
[data-theme="light"] .site-search input:focus,
[data-theme="light"] .catalog-search:focus-within,
[data-theme="light"] .input-wrap:focus-within {
border-color: var(--gold);
background: var(--surface);
box-shadow: 0 0 0 3px var(--intent-wash);
}
[data-theme="light"] .icon-button {
border-color: var(--line);
background: var(--surface);
color: var(--text);
}
[data-theme="light"] .icon-button:hover {
border-color: var(--line-strong);
background: var(--intent-wash);
color: var(--gold-text);
}
[data-theme="light"] .nav-row {
color: var(--muted);
}
[data-theme="light"] .nav-row-icon {
color: var(--muted-2);
}
[data-theme="light"] .nav-row a:hover {
background: var(--intent-wash);
color: var(--text);
}
[data-theme="light"] .nav-row a.active { background: transparent;
color: var(--gold-text);
}
[data-theme="light"] .nav-row a.active .nav-row-icon {
color: var(--gold-text);
}
.telegram-nav-icon {
width: 20px;
height: 20px;
display: block;
flex: 0 0 20px;
}
.mobile-menu-list .telegram-nav-icon {
width: 21px;
height: 21px;
}
.mobile-dock .telegram-nav-icon {
width: 21px;
height: 21px;
}
[data-theme="light"] .search-suggestions,
[data-theme="light"] .catalog-sort-menu {
border-color: var(--line);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow);
}
[data-theme="light"] .search-suggestions a:hover,
[data-theme="light"] .search-suggestions a.active,
[data-theme="light"] .catalog-sort-menu button:hover,
[data-theme="light"] .catalog-sort-menu button[aria-selected="true"] {
background: var(--intent-wash);
color: var(--gold-text);
}
[data-theme="light"] .home-order-layout.compact-action,
[data-theme="light"] .home-order-layout[data-home-panel="telegram"],
[data-theme="light"] .telegram-page .telegram-workspace,
[data-theme="light"] .voucher-main,
[data-theme="light"] .voucher-summary,
[data-theme="light"] .game-checkout-panel,
[data-theme="light"] .identity-panel,
[data-theme="light"] .profile-overview,
[data-theme="light"] .profile-section,
[data-theme="light"] .brand-asset,
[data-theme="light"] .brand-colors article,
[data-theme="light"] .brand-guide-grid > div {
border-color: var(--line);
background: var(--surface);
box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
[data-theme="light"] .service-launchpad,
[data-theme="light"] .telegram-product-tabs,
[data-theme="light"] .voucher-service-switch {
border-color: var(--line);
background: var(--surface);
}
[data-theme="light"] .service-launchpad .launch-service,
[data-theme="light"] .telegram-product-card,
[data-theme="light"] .voucher-service-card {
color: var(--muted);
}
[data-theme="light"] .service-launchpad .launch-service:hover,
[data-theme="light"] .telegram-product-card:hover,
[data-theme="light"] .voucher-service-card:hover {
background: var(--intent-wash);
color: var(--text);
}
[data-theme="light"] .service-launchpad .launch-service.selected,
[data-theme="light"] .telegram-product-card.active,
[data-theme="light"] .voucher-service-card.active {
border-color: var(--line-strong);
background: var(--intent-wash);
color: var(--gold-text);
box-shadow: inset 0 0 0 1px var(--intent-wash);
}
[data-theme="light"] .service-launchpad .launch-icon,
[data-theme="light"] .service-launchpad .launch-all-services .launch-icon,
[data-theme="light"] .service-launchpad .launch-service.selected .launch-icon,
[data-theme="light"] .telegram-product-card > img,
[data-theme="light"] .game-logo-card > span,
[data-theme="light"] .voucher-service-card > span {
border-color: var(--line);
background: var(--surface-2);
}
[data-theme="light"] .quick,
[data-theme="light"] .package,
[data-theme="light"] .filter,
[data-theme="light"] .stars-presets button {
border-color: var(--line);
background: var(--surface-2);
color: var(--muted);
}
[data-theme="light"] .quick.active,
[data-theme="light"] .quick[aria-pressed="true"],
[data-theme="light"] .package.active,
[data-theme="light"] .package[aria-selected="true"],
[data-theme="light"] .filter.active,
[data-theme="light"] .filter[aria-pressed="true"],
[data-theme="light"] .stars-presets button.active,
[data-theme="light"] .stars-presets button[aria-pressed="true"] {
border-color: var(--gold);
background: var(--intent-wash);
color: var(--gold-text);
box-shadow: inset 0 0 0 1px var(--intent-wash);
}
[data-theme="light"] .mobile-menu-panel {
border-color: var(--line);
background: var(--surface);
color: var(--text);
box-shadow: -18px 0 46px rgba(31, 27, 17, .13);
}
[data-theme="light"] .mobile-menu-head {
border-color: var(--line);
}
[data-theme="light"] .mobile-menu-list {
gap: 5px;
}
[data-theme="light"] .mobile-menu-list a {
min-height: 58px;
color: var(--muted);
}
[data-theme="light"] .mobile-menu-list a > span {
width: 42px;
height: 42px;
border-color: var(--line);
background: var(--surface);
color: var(--muted);
}
[data-theme="light"] .mobile-menu-list a:hover {
background: var(--surface-2);
color: var(--text);
}
[data-theme="light"] .mobile-menu-list a.active {
border-color: var(--line-strong);
background: var(--intent-wash);
color: var(--text);
}
[data-theme="light"] .mobile-menu-list a.active > span {
border-color: var(--line-strong);
background: var(--intent-wash);
color: var(--gold-text);
}
[data-theme="light"] .mobile-menu-theme {
min-height: 52px;
border-color: var(--line);
background: var(--surface);
color: var(--muted);
}
[data-theme="light"] .mobile-menu-theme:hover {
border-color: var(--line-strong);
background: var(--intent-wash);
color: var(--gold-text);
}
.mobile-menu-theme .theme-moon,
.theme-button .theme-moon {
width: 21px;
height: 21px;
}
[data-theme="light"] .mobile-menu-support {
border-color: var(--line-strong);
background: var(--intent-wash);
}
[data-theme="light"] .mobile-menu-support > span:first-child {
background: var(--gold-fill);
color: var(--surface);
}
[data-theme="light"] .mobile-menu-support b {
color: var(--text);
}
[data-theme="light"] .mobile-menu-support small,
[data-theme="light"] .mobile-menu-legal a {
color: var(--muted-2);
}
[data-theme="light"] .mobile-dock {
border-color: var(--line);
background: var(--surface);
box-shadow: 0 14px 34px rgba(36, 31, 19, .15);
}
[data-theme="light"] .mobile-dock a {
color: var(--muted-2);
}
[data-theme="light"] .mobile-dock a.active {
color: var(--gold-text);
}
[data-theme="light"] .mobile-dock-indicator {
border-color: var(--line-strong);
background: var(--intent-wash);
box-shadow: none;
}
[data-theme="light"] .site-footer {
border-color: var(--line);
background: var(--surface);
}
@media (max-width: 780px) {
[data-theme="light"] .site-header {
background: var(--surface);
}
.mobile-menu-head .icon-button {
width: 44px;
height: 44px;
flex: 0 0 44px;
}
.mobile-menu-list a > span,
.mobile-menu-support > span:first-child {
flex: 0 0 42px;
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
.motion-ready .reveal-item, .motion-ready .reveal-item.reveal-card { opacity: 1; transform: none; filter: none; }
.motion-ready .gold { background: none; color: var(--gold-text); }
}
@keyframes header-arrival { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-out { to { opacity: 0; transform: scale(.995); } }
@keyframes page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes status-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(159,211,155,0); } 50% { box-shadow: 0 0 0 4px rgba(159,211,155,.12); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gold-arrival { from { background-position: 120% 0; } to { background-position: -70% 0; } }
@keyframes details-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.site-search input { padding-right: 76px; }
.field label,
.home-order-fields .field label,
.account-fields .field > span,
.telegram-page .field label { color: var(--text-secondary); font-size: 13px; }
.helper,
.field-error,
.account-fields small,
.config-step-title small,
.checkout-legal,
.identity-status { font-size: 12px; }
.field-error { min-height: 18px; margin-top: var(--space-1); }
.field-error[hidden] { display: block !important; visibility: hidden; }
.input-wrap input,
.field select,
.catalog-search input,
.choice-search,
.product-choice-search,
.account-fields input,
.account-fields select { max-width: 100%; border-radius: var(--radius-input); }
.input-wrap input { padding-right: 52px; }
.button, .quick, .filter, .icon-button, .login-method, .referral-copy { border-radius: var(--radius-button); }
.button:is(:disabled, [disabled], [aria-disabled="true"]) { opacity: 1; border-color: transparent; background: var(--surface-3); color: var(--color-disabled); box-shadow: none; transform: none; cursor: not-allowed; }
.button:is(.secondary, .ghost):is(:disabled, [disabled], [aria-disabled="true"]) { border-color: var(--line); background: var(--hairline); }
.quick.active,
.filter.active,
.order-filters button.active,
.launch-service.selected .launch-icon,
.voucher-service-card[aria-selected="true"] > span,
.telegram-product-card[aria-selected="true"],
.region-choice[aria-pressed="true"],
.voucher-region[aria-pressed="true"],
.product-choice[aria-pressed="true"],
.voucher-product[aria-pressed="true"] { box-shadow: none; }
.quick.active::after,
.filter.active::after,
.order-filters button.active::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: currentColor; }
.launch-service.selected .launch-icon::after,
.voucher-service-card[aria-selected="true"] > span::after { content: ""; position: absolute; right: 8px; bottom: 8px; border: 3px solid var(--surface-2); border-radius: 50%; background: var(--gold-fill); box-shadow: 0 0 0 1px var(--gold); }
.telegram-product-card,
.package { position: relative; }
.telegram-product-card[aria-selected="true"]::after,
.package[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; top: 12px; width: 8px; height: 8px; border: 3px solid var(--surface); border-radius: 50%; background: var(--gold-fill); box-shadow: 0 0 0 1px var(--gold); }
.telegram-product-card[aria-selected="true"] > i { visibility: hidden; }
.launch-icon,
.voucher-service-card > span { position: relative; }
.region-choice,
.voucher-region { position: relative; padding-right: 34px; }
.region-choice[aria-pressed="true"]::after,
.voucher-region[aria-pressed="true"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%; background: var(--gold-fill); }
.launch-service b,
.voucher-service-card b,
.game-logo-card h3,
.home-showcase-copy b,
.home-showcase-copy em,
.product-choice b,
.voucher-product b,
.configurator-footer b,
.profile-identity h2,
.account-lines b,
.store-order h3 { overflow-wrap: anywhere; }
.home-showcase-copy b,
.home-showcase-copy em { white-space: normal; }
.home-showcase-copy b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-showcase-copy em { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; }
.home-showcase-copy small,
.home-showcase-head span,
.game-logo-icon i,
.order-status,
.order-meta,
.profile-stat small,
.account-lines > div,
.referral-metrics span { font-size: 12px; }
.home-order-layout.compact-action { position: relative; grid-template-columns: minmax(0, 1fr); }
.home-order-layout.compact-action .action-only { position: absolute; right: 0; bottom: 0; width: 262px; border: 0; background: transparent; box-shadow: none; padding: 10px 22px 20px; }
.home-order-layout.compact-action .home-presets { padding-right: 240px; }
.home-order-layout.compact-action .home-order-fields { grid-template-columns: minmax(0, 1fr) minmax(150px, 180px); }
.service-launchpad,
.home-showcase-grid,
.catalog-category-tabs,
.voucher-service-switch,
.voucher-region-grid,
.region-choice-grid,
.rank-grid { scroll-padding-inline: var(--space-4); }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(10, minmax(82px, 1fr)); gap: 22px 14px; }
.game-logo-card h3 { min-height: 34px; font-size: 12px; line-height: 1.35; }
.game-logo-card:focus-visible { outline-offset: 1px; }
.game-logo-icon i { min-height: 22px; padding-inline: 8px; }
.game-checkout-panel { scroll-margin-top: 126px; scroll-margin-bottom: 110px; }
.product-choice-grid,
.voucher-region-grid,
.voucher-product-grid { max-height: none; overflow-y: visible; padding-right: 0; }
.product-choice b,
.voucher-product b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.product-choice,
.voucher-product { min-height: 78px; }
.configurator-footer b { max-width: min(100%, 420px); white-space: normal; }
.voucher-summary { top: 136px; }
.voucher-code-row button,
.store-order-code button { min-height: 44px; }
.checkout-layout { grid-template-columns: minmax(0, 760px) minmax(300px, 360px); justify-content: center; gap: var(--space-8); }
.checkout-main h1 { max-width: 720px; font-size: clamp(34px, 5vw, 58px); }
.checkout-item > div { min-width: 0; }
.checkout-item h3 { overflow-wrap: anywhere; }
.checkout-state { min-height: 48px; display: flex; align-items: center; font-size: 13px; }
.checkout-state.loading { border-style: dashed; }
.checkout-state.warning { box-shadow: inset 3px 0 var(--gold); }
.checkout-state.error { box-shadow: inset 3px 0 var(--red); }
.checkout-state.success { box-shadow: inset 3px 0 var(--green); }
.checkout-counter [data-checkout-total]:empty::after,
.checkout-counter [data-checkout-total][data-empty="true"]::after { content: "Цена уточняется"; color: var(--text-secondary); font-family: var(--body); font-size: 14px; }
.profile-identity { min-width: 0; }
.profile-identity h2 { max-width: 100%; font-family: var(--body); font-size: clamp(18px, 3vw, 31px); line-height: 1.15; text-transform: none; }
.profile-identity p b { text-transform: none; }
.profile-logout { color: var(--red); }
.referral-link input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-copy[aria-live] { min-width: 110px; }
.account-lines b { font-size: 12px; }
.referral-field summary { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
.referral-field summary::after { content: "+"; margin-left: 8px; color: var(--gold-text); font-size: 18px; }
.referral-field[open] summary::after { content: "−"; }
@media (max-width: 1060px) {
.catalog-grid.game-logo-grid { grid-template-columns: repeat(8, minmax(74px, 1fr)); }
}
@media (max-width: 780px) {
body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
main { padding-bottom: var(--space-3); }
.mobile-dock { bottom: max(8px, env(safe-area-inset-bottom)); min-height: 68px; padding-bottom: calc(6px + env(safe-area-inset-bottom) * .15); }
.mobile-dock a { position: relative; min-height: 54px; font-size: 11px; }
.mobile-dock a.active { box-shadow: inset 0 0 0 1px var(--accent-border-soft); }
.mobile-dock a.active::before { content: none; }
.toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
input, select, button, a, summary, [role="button"], [role="tab"] { scroll-margin-bottom: calc(104px + env(safe-area-inset-bottom)); }
.home-order-layout.compact-action .action-only { position: static; justify-self: stretch; width: 100%; }
.home-order-layout.compact-action .home-presets { padding-right: 0; }
.home-order-layout.compact-action .home-order-fields { grid-template-columns: minmax(0, 1fr) 160px; }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(6, minmax(72px, 1fr)); }
.game-configurator { min-height: 0; }
.game-configurator-visual { min-height: 200px; }
.game-configurator-visual > img { min-height: 200px; max-height: 230px; }
.voucher-summary { position: static; }
.checkout-layout { grid-template-columns: minmax(0, 1fr); }
.checkout-main, .checkout-side { width: 100%; }
.profile-dashboard-grid { grid-template-columns: 1fr; }
.rank-grid { display: flex; gap: var(--space-3); overflow-x: auto; border: 0; border-radius: 0; background: transparent; padding: 3px 20px var(--space-3) 0; margin-inline: 0; scroll-padding-inline: 0 20px; scroll-snap-type: x proximity; scrollbar-width: none; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); }
.rank-grid::-webkit-scrollbar { display: none; }
.rank-card, .rank-card:nth-child(2n), .rank-card:nth-child(n+3) { width: 210px; min-width: 210px; min-height: 132px; display: grid; grid-template-columns: 58px 1fr; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-4); scroll-snap-align: start; }
}
@media (max-width: 520px) {
.container { width: min(calc(100% - 24px), var(--max)); }
.header-main { gap: var(--space-2); }
.header-actions { gap: var(--space-2); }
.icon-button { width: 44px; height: 44px; }
.site-search input { height: 44px; padding-left: 42px; padding-right: 44px; }
.site-search svg { left: 13px; }
.section-banner { height: clamp(82px, 24vw, 106px); }
.service-launchpad,
.voucher-service-switch { gap: var(--space-3); margin-inline: -12px; padding: 3px 12px 12px; scroll-padding-inline: 12px; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
.launch-service,
.voucher-service-card { width: 82px; min-width: 82px; }
.launch-icon,
.voucher-service-card > span { width: 70px; height: 70px; }
.launch-service b,
.voucher-service-card b { min-height: 34px; font-size: 12px; }
.home-showcase-grid { margin-inline: -12px; padding-inline: 12px 30px; scroll-padding-inline: 12px; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
.home-order-layout.compact-action .home-order-fields { grid-template-columns: minmax(0, 1fr) minmax(104px, 34%); }
.home-order-fields .field label { font-size: 12px; }
.home-presets .quick { min-height: 44px; font-size: 11px; }
.stars-presets button { min-height: 44px; }
.catalog-tools select { display: block; width: 100%; height: 46px; }
.catalog-category-tabs { flex-wrap: nowrap; gap: var(--space-2); margin-inline: -12px; padding: 3px 30px 10px 12px; scroll-padding-inline: 12px; scroll-snap-type: x proximity; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
.catalog-category-tabs .filter { min-height: 44px; scroll-snap-align: start; font-size: 12px; }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; }
.game-logo-card h3 { min-height: 34px; font-size: 11.5px; }
.game-logo-icon i { top: -8px; right: -6px; font-size: 10px; }
.game-configurator-main { padding: var(--space-4); }
.game-configurator-visual > div { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
.region-choice-grid,
.voucher-region-grid { gap: var(--space-2); margin-inline: -16px; padding: 3px 32px 10px 16px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
.region-choice,
.voucher-region { min-width: min(78vw, 250px); min-height: 56px; scroll-snap-align: start; font-size: 12px; }
.product-choice-grid,
.voucher-product-grid { grid-template-columns: 1fr; }
.voucher-main { padding: var(--space-4); }
.voucher-summary { padding: var(--space-4); }
.checkout-page { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
body[data-checkout] { padding-bottom: 0; }
.checkout-layout { gap: var(--space-3); }
.checkout-main h1 { font-size: clamp(27px, 8vw, 34px); }
.checkout-side { padding: var(--space-4); }
.profile-overview-main { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-4); }
.profile-rank-crest { width: 64px; }
.profile-logout { grid-column: auto; align-self: center; width: auto; min-width: 72px; min-height: 44px; padding: 0 14px; color: var(--red); }
.profile-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-stat { min-height: 92px; padding: var(--space-3); }
.profile-stat + .profile-stat { border-top: 0; border-left: 1px solid var(--line); }
.profile-stat span { font-size: 12px; }
.profile-stat b { font-size: clamp(16px, 5vw, 21px); overflow-wrap: anywhere; }
.profile-progress-block { padding: var(--space-4); }
.profile-section-head { gap: var(--space-3); }
.order-filters { overflow-x: auto; scroll-snap-type: x proximity; }
.order-filters button { min-width: max-content; min-height: 44px; scroll-snap-align: start; font-size: 12px; }
.referral-link { align-items: stretch; }
.referral-link input, .referral-copy { height: 46px; font-size: 12px; }
.site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.footer-legal-links a { min-height: 44px; font-size: 11px; }
}
@media (max-width: 380px) {
.home-order-layout.compact-action .home-order-fields,
.home-order-fields { grid-template-columns: 1fr; }
.telegram-home-fields .home-recipient,
.home-presets { grid-column: 1; }
.home-presets .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-grid.game-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-overview-main { grid-template-columns: 56px minmax(0, 1fr); }
.profile-rank-crest { width: 56px; }
.profile-logout { grid-column: 1 / -1; width: 100%; color: var(--red); }
.profile-stat-grid { grid-template-columns: 1fr; }
.profile-stat + .profile-stat { border-left: 0; border-top: 1px solid var(--line); }
.referral-link { flex-direction: column; }
.referral-copy { width: 100%; }
}
.home-order-layout.compact-action .home-order-fields > .field:not(.home-presets) > label {
height: 34px;
min-height: 34px;
display: flex;
align-items: center;
}
.catalog-tools select {
width: 100%;
height: 54px;
appearance: none;
border-radius: 12px;
background-color: var(--surface);
background-image:
linear-gradient(45deg, transparent 50%, var(--muted) 50%),
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position:
calc(100% - 19px) 24px,
calc(100% - 14px) 24px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding: 0 42px 0 16px;
font: 700 14px/1 var(--body);
cursor: pointer;
}
.catalog-tools select:hover,
.catalog-tools select:focus-visible {
border-color: var(--line-strong);
box-shadow: none;
}
@media (max-width: 780px) {
.home-order-layout.compact-action .home-order-fields > .field:not(.home-presets) > label { min-height: 34px; }
.catalog-tools select { height: 50px; background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px; }
}
.launch-service:not(.games) .launch-icon img,
.voucher-service-card > span img {
width: 54%;
height: 54%;
filter: brightness(0) saturate(100%) invert(88%) sepia(35%) saturate(718%) hue-rotate(355deg) brightness(104%) contrast(92%);
}
.launch-service.telegram-stars .launch-icon img,
.launch-service.telegram-premium .launch-icon img { width: 58%; height: 58%; }
.launch-service:not(.games) .launch-icon,
.voucher-service-card > span {
border-color: var(--accent-wash-strong);
background: linear-gradient(145deg, var(--accent-wash), transparent 54%), var(--surface-2);
}
.home-showcase-card:not(.game) .home-showcase-art img {
filter: brightness(0) saturate(100%) invert(88%) sepia(35%) saturate(718%) hue-rotate(355deg) brightness(104%) contrast(92%);
}
.telegram-product-card > img,
.telegram-package img,
.steam-flow-brand img,
.stars-quantity-input img {
border: 0;
background: transparent;
box-shadow: none;
padding: 3px;
}
.telegram-product-card > img { filter: none; }
.telegram-product-card.stars > img { filter: drop-shadow(0 7px 14px rgba(246,184,35,.18)); }
.telegram-product-card.premium > img { filter: drop-shadow(0 7px 14px rgba(154,108,255,.17)); }
.telegram-page .stars-quantity { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.telegram-page .stars-quantity-input {
min-height: 68px;
grid-template-columns: 48px minmax(76px, 1fr) auto 48px;
gap: 10px;
border-color: var(--line-strong);
border-radius: var(--radius-input);
background: var(--bg);
padding: 8px 10px;
}
.telegram-page .stars-quantity-input:focus-within {
border-color: var(--text);
}
.telegram-page .stars-quantity-input input { font-size: clamp(27px, 4vw, 34px); }
.telegram-page .stars-quantity-input span { color: var(--gold-text); font-size: 13px; }
.stars-adjust {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--line-strong);
border-radius: 12px;
background: var(--surface);
color: var(--gold-text);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.stars-adjust:hover { border-color: var(--accent-border-soft); background: var(--accent-wash); }
.stars-adjust:active { transform: scale(.96); }
.telegram-page .stars-range { margin: 8px 0 0; color: var(--text-tertiary); }
.telegram-page .stars-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.telegram-page .stars-presets button {
min-height: 48px;
border-radius: var(--radius-button);
background: var(--surface);
color: var(--text-secondary);
font-size: 13px;
}
.telegram-page .stars-presets button:hover,
.telegram-page .stars-presets button.active {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
color: var(--gold-text);
transform: none;
}
.telegram-package.premium {
--term-accent: #b997f4;
--term-wash: rgba(185,151,244,.09);
}
.telegram-package.premium.term-3,
.telegram-package.premium.term-option-1 { --term-accent: #d8bcff; --term-wash: rgba(216,188,255,.08); }
.telegram-package.premium.term-6,
.telegram-package.premium.term-option-2 { --term-accent: #ad87f3; --term-wash: rgba(173,135,243,.09); }
.telegram-package.premium.term-12,
.telegram-package.premium.term-option-3 { --term-accent: #e4c66c; --term-wash: rgba(228,198,108,.08); }
.telegram-package.premium { border-top: 3px solid var(--term-accent); background: linear-gradient(145deg, var(--term-wash), transparent 54%), var(--bg-2); }
.telegram-package.premium:hover,
.telegram-package.premium.active,
.telegram-package.premium[aria-pressed="true"] { border-color: var(--accent-border-soft); border-top-color: var(--term-accent); background: linear-gradient(145deg, var(--term-wash), transparent 68%), var(--surface); }
.telegram-package.premium b { color: var(--term-accent); }
.telegram-package.premium[aria-pressed="true"]::after { background: var(--term-accent); color: #15120d; }
@media (max-width: 520px) {
.telegram-page .workspace-main { padding: 16px; }
.telegram-page .field label { font-size: 13px; }
.telegram-page .stars-quantity-input { min-height: 70px; grid-template-columns: 46px minmax(70px, 1fr) auto 46px; gap: 8px; padding: 9px; }
.stars-adjust { width: 46px; height: 46px; }
.telegram-page .stars-quantity-input input { font-size: 28px; }
.telegram-page .stars-quantity-input span { font-size: 12px; }
.telegram-page .stars-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.telegram-page .stars-presets button { min-height: 48px; font-size: 13px; }
.premium-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.premium-package-grid .telegram-package { min-height: 106px; padding: 12px 10px; }
.premium-package-grid .telegram-package img { width: 28px; height: 28px; }
.premium-package-grid .telegram-package b { font-size: 14px; }
}
@media (max-width: 360px) {
.telegram-page .stars-quantity-input { grid-template-columns: 44px minmax(58px, 1fr) 44px; }
.telegram-page .stars-quantity-input span { display: none; }
.stars-adjust { width: 44px; height: 44px; }
.telegram-page .stars-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.premium-package-grid { grid-template-columns: 1fr; }
.premium-package-grid .telegram-package { min-height: 82px; }
}
@media (max-width: 520px) {
.identity-hero { padding: 12px 0 10px; }
.identity-hero h1 { font-size: clamp(24px, 8vw, 29px); letter-spacing: -.025em; }
.identity-grid { gap: 12px; }
.identity-entry-grid { width: 100%; }
.identity-panel { border-radius: 18px; }
.identity-panel-head { min-height: 54px; padding-inline: 18px; }
.identity-panel-head h2 { font-size: 23px; }
.identity-panel-body { padding: 16px 18px 18px; }
.identity-entry-copy { margin-bottom: 14px; font-size: 13px; line-height: 1.45; }
.login-methods { gap: 8px; }
.login-method,
.login-method-primary { min-height: 52px; padding-inline: 14px; font-size: 14px; }
.login-method .login-method-icon { width: 30px; height: 30px; margin-right: 8px; border-radius: 8px; }
.login-method .login-method-icon img { width: 20px; height: 20px; }
.identity-status { margin-top: 10px; }
.referral-field { margin-top: 10px; }
.rank-board { padding-top: 22px; }
.rank-board-head { margin-bottom: 12px; }
.rank-board-head h2 { font-size: 26px; }
.rank-grid { gap: 10px; padding: 2px 20px 10px 0; scroll-padding-inline: 0 20px; outline-offset: 3px; }
.rank-card,
.rank-card:nth-child(2n),
.rank-card:nth-child(n+3) {
width: 176px;
min-width: 176px;
min-height: 108px;
grid-template-columns: 46px minmax(0, 1fr);
gap: 10px;
border-radius: 14px;
padding: 13px;
}
.rank-card .rank-crest { width: 46px; }
.rank-card h3 { font-size: 14px; }
.rank-card strong { font-size: 12px; }
.rank-card p { font-size: 11px; }
.telegram-page .telegram-product-card { padding-right: 27px; }
.telegram-page .telegram-product-card > span { min-width: 0; }
.telegram-page .telegram-product-card b { display: -webkit-box; overflow: hidden; overflow-wrap: normal; word-break: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.telegram-page .telegram-product-card[aria-selected="true"]::after { right: 6px; top: 6px; width: 18px; height: 18px; font-size: 10px; }
}
.service-launchpad {
display: flex;
gap: 4px;
overflow-x: auto;
padding: 8px;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--surface-2);
box-shadow: 0 16px 38px rgba(0,0,0,.18);
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.service-launchpad::-webkit-scrollbar { display: none; }
.launch-service {
flex: 1 1 96px;
width: 96px;
min-width: 96px;
max-width: 144px;
min-height: 92px;
align-content: center;
gap: 5px;
padding: 7px 5px;
border-radius: 14px;
font: inherit;
scroll-snap-align: start;
}
.launch-service:hover,
.launch-service:focus-visible { background: var(--hairline); }
.launch-service.selected {
background: linear-gradient(145deg, var(--accent-wash-strong), var(--accent-wash));
box-shadow: inset 0 0 0 1px var(--accent-border-soft);
}
.launch-service .launch-icon { width: 54px; height: 54px; border-radius: 14px; }
.launch-service b { min-height: 28px; font-size: 11px; }
.launch-service.selected .launch-icon::after { right: -2px; bottom: -2px; }
.home-quick-order { scroll-margin-top: 90px; }
.home-order-card,
.home-voucher-layout .voucher-main,
.home-voucher-layout .voucher-summary { background: var(--surface); }
.home-order-fields .field > label:first-child,
.field > label:has(.field-help) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-help {
min-height: 32px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
padding: 0 10px;
font: 700 12px/1 var(--body);
cursor: pointer;
}
.field-help:hover,
.field-help:focus-visible { background: transparent; color: var(--text); }
.home-quick-order .field-error[hidden],
.telegram-page .field-error[hidden] { display: none !important; }
.home-voucher-order { display: block; }
.home-voucher-status { min-height: 126px; display: grid; place-items: center; }
.home-voucher-status[hidden],
.home-voucher-layout[hidden] { display: none; }
.home-voucher-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.home-voucher-layout .voucher-main,
.home-voucher-layout .voucher-summary { border-radius: 18px; }
.home-voucher-layout .voucher-main { padding: 18px; }
.home-voucher-layout .voucher-flow-head { padding-bottom: 12px; }
.home-voucher-layout .config-step { padding: 14px 0; }
.home-voucher-layout .voucher-region-grid { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.home-voucher-layout .voucher-region-grid::-webkit-scrollbar { display: none; }
.home-voucher-layout .voucher-region { min-width: 150px; }
.home-voucher-layout .voucher-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.steam-help-dialog {
width: min(620px, calc(100% - 28px));
max-height: min(760px, calc(100dvh - 28px));
overflow: auto;
border: 1px solid var(--line-strong);
border-radius: 24px;
background: #1b1d20;
color: var(--text);
padding: 0;
box-shadow: 0 30px 100px rgba(0,0,0,.65);
}
.steam-help-dialog::backdrop { background: rgba(5,6,5,.76); backdrop-filter: blur(8px); }
.steam-help-head { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.steam-help-head span { color: #82b8ff; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.steam-help-head h2 { margin: 3px 0 0; font-size: clamp(23px,5vw,31px); }
.steam-help-head .icon-button { flex: 0 0 44px; font-size: 28px; }
.steam-help-dialog > p { margin: 20px 22px 14px; color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
.steam-account-link { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 22px 18px; border-radius: 14px; background: linear-gradient(135deg,#2672e8,#289de1); color: #fff; padding: 0 18px; font-weight: 800; }
.steam-country-block { padding: 18px 22px 24px; border-top: 1px solid var(--line); }
.steam-country-block h3 { margin: 0 0 12px; font-size: 15px; }
.steam-country-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.steam-country-grid span { min-width: 0; min-height: 42px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); padding: 7px 9px; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.steam-country-grid img { width: 25px; height: 19px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; }
.home-showcase { margin-top: 18px; }
.home-showcase-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.home-showcase-card { min-height: 88px; grid-template-columns: 76px minmax(0,1fr); grid-template-rows: 1fr; border-radius: 14px; box-shadow: none; }
.home-showcase-art { min-height: 88px; }
.home-showcase-card.stars .home-showcase-art img,
.home-showcase-card.premium .home-showcase-art img,
.home-showcase-card.service .home-showcase-art img { width: 42px; height: 42px; }
.home-showcase-copy { align-content: center; padding: 10px 11px; }
.home-showcase-copy b { font-size: 13px; }
.home-showcase-copy em { font-size: 11px; }
.telegram-page .workspace-main { display: grid; gap: 18px; }
.telegram-page .telegram-recipient-field { margin-bottom: 0; }
.telegram-page .telegram-panel .field { gap: 8px; }
.telegram-page .stars-quantity-input input {
font-family: var(--body);
font-variant-numeric: tabular-nums;
font-weight: 850;
letter-spacing: -.025em;
}
.telegram-page .stars-presets { grid-template-columns: repeat(5,minmax(0,1fr)); }
.telegram-page .stars-presets button {
padding-inline: 4px;
font-family: var(--body);
font-variant-numeric: tabular-nums;
font-weight: 800;
}
.telegram-page .telegram-product-card[aria-selected="true"]::after {
right: auto;
top: auto;
left: 43px;
bottom: 8px;
}
.premium-package-grid .telegram-package {
font-family: var(--body);
font-variant-numeric: tabular-nums;
}
.login-method .login-method-icon {
flex: 0 0 32px;
min-width: 32px;
aspect-ratio: 1;
}
.identity-status:empty { display: none; }
.checkout-layout { width: min(960px, calc(100% - 32px)); grid-template-columns: minmax(0,1fr) 320px; gap: 14px; }
.checkout-main { align-self: start; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 22px; }
.checkout-main h1 { font-size: clamp(30px,4vw,42px); }
.checkout-side { top: 92px; border-radius: 20px; padding: 22px; }
@media (max-width: 780px) {
.account-button { display: none; }
.header-actions { flex: 0 0 44px; }
.service-launchpad { margin-inline: 0; padding: 7px; mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 20px),transparent 100%); }
.launch-service { width: 78px; min-width: 78px; min-height: 82px; padding: 5px 3px; }
.launch-service .launch-icon { width: 50px; height: 50px; border-radius: 14px; }
.launch-service b { min-height: 27px; font-size: 10.5px; line-height: 1.25; }
.home-voucher-layout { grid-template-columns: 1fr; }
.home-voucher-layout .voucher-summary { padding: 14px; }
.home-voucher-layout .voucher-summary-icon,
.home-voucher-layout .voucher-summary h3, .voucher-summary h2,
.home-voucher-layout .order-lines { display: none; }
.home-voucher-layout .voucher-summary .button { margin: 0; }
.home-showcase-grid {
display: flex;
grid-template: none;
gap: 9px;
overflow-x: auto;
margin-inline: -12px;
padding: 0 30px 6px 12px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.home-showcase-grid::-webkit-scrollbar { display: none; }
.home-showcase-card { width: 214px; min-width: 214px; min-height: 88px; grid-template-columns: 70px minmax(0,1fr); scroll-snap-align: start; }
.checkout-layout { width: min(calc(100% - 24px),560px); grid-template-columns: 1fr; gap: 8px; }
.checkout-main { border-radius: 16px; padding: 14px; }
.checkout-side { border-radius: 16px; padding: 14px; }
}
@media (max-width: 520px) {
.store-hero .container { width: min(calc(100% - 20px),var(--max)); }
.service-launchpad { gap: 2px; }
.launch-service { flex: 0 0 72px; width: 72px; min-width: 72px; max-width: 72px; }
.launch-service .launch-icon { width: 48px; height: 48px; }
.home-order-card { padding: 0; }
.home-order-head { padding: 10px 12px; }
.home-order-fields { padding: 12px; }
.home-order-layout.compact-action .action-only { padding: 9px 12px 12px; }
.home-quick-order .input-wrap input { height: 50px; }
.home-voucher-layout .voucher-main { padding: 13px; }
.home-voucher-layout .voucher-product-grid { grid-template-columns: 1fr; }
.home-voucher-layout .voucher-region { min-width: min(70vw,220px); }
.field-help { min-height: 30px; font-size: 11px; }
.steam-help-head { min-height: 72px; padding: 14px 16px; }
.steam-help-dialog > p { margin: 16px 16px 12px; font-size: 14px; }
.steam-account-link { min-height: 54px; margin: 0 16px 14px; padding-inline: 15px; }
.steam-country-block { padding: 15px 16px 18px; }
.steam-country-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.steam-country-grid span { font-size: 11px; }
.home-showcase-head { align-items: center; }
.home-showcase-head h2 { font-size: 21px; }
.telegram-page .section.compact { padding-top: 10px; }
.telegram-page .section-banner { height: 66px; margin-bottom: 8px; }
.telegram-page .telegram-product-switch { margin-bottom: 8px; }
.telegram-page .telegram-product-card { min-height: 66px; padding: 8px 24px 8px 8px; }
.telegram-page .telegram-product-card b { font-size: 11px; }
.telegram-page .workspace-main { gap: 14px; padding: 13px; }
.telegram-page .stars-quantity-input { min-height: 64px; }
.telegram-page .stars-presets { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.telegram-page .stars-presets button { min-height: 44px; font-size: 11px; }
.telegram-page .stars-range { margin-top: 4px; font-size: 11px; }
.telegram-page .telegram-summary { padding: 8px 12px 12px; }
.identity-hero h1,
.identity-panel-head h2,
.rank-board-head h2 { text-align: center; }
.identity-panel-head { justify-content: center; min-height: 50px; }
.identity-panel-body { padding: 13px 14px 14px; }
.identity-entry-copy { margin: 0 0 10px; text-align: center; }
.login-method,
.login-method-primary { min-height: 50px; }
.referral-field { margin-top: 7px; }
.referral-field summary { min-height: 44px; margin-inline: auto; }
.rank-board-head { justify-content: center; margin-bottom: 10px; }
.rank-board { padding-top: 18px; }
}
@media (max-width: 340px) {
.telegram-page .stars-quantity-input { grid-template-columns: 42px minmax(54px,1fr) 42px; }
.telegram-page .stars-quantity-input span { display: none; }
.telegram-page .stars-presets { grid-template-columns: repeat(5,minmax(44px,1fr)); overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
}
.services-page .voucher-service-switch {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 3px 2px 12px;
scroll-padding-inline: 2px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.services-page .voucher-service-switch::-webkit-scrollbar { display: none; }
.services-page .voucher-service-card { width: 92px; min-width: 92px; scroll-snap-align: start; text-decoration: none; }
.services-page .voucher-service-card > span { width: 76px; }
.services-page .voucher-service-card img {
filter: brightness(0) saturate(100%) invert(88%) sepia(31%) saturate(716%) hue-rotate(358deg) brightness(105%) contrast(91%);
}
.services-page .voucher-steam-card > span { border-color: var(--accent-border-soft); background: var(--accent-wash); }
.quick.active::after,
.filter.active::after,
.order-filters button.active::after,
.launch-service.selected .launch-icon::after,
.voucher-service-card[aria-selected="true"] > span::after,
.telegram-product-card[aria-selected="true"]::after,
.package[aria-pressed="true"]::after,
.region-choice[aria-pressed="true"]::after,
.voucher-region[aria-pressed="true"]::after { display: none !important; content: none !important; }
.telegram-product-card[aria-selected="true"] > i { visibility: visible; }
.region-choice,
.voucher-region { padding-right: 12px; }
.voucher-product { grid-template-columns: 42px minmax(0,1fr); }
.voucher-product > i { display: none; }
@media (max-width: 520px) {
.services-page .voucher-service-switch {
margin-inline: -10px;
padding-inline: 10px 28px;
scroll-padding-inline: 10px;
mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%);
}
.services-page .voucher-service-card { width: 78px; min-width: 78px; }
.services-page .voucher-service-card > span { width: 64px; }
.services-page .voucher-service-card b { font-size: 11px; }
}
@media (max-width: 380px) {
.home-order-layout.compact-action .home-order-fields,
.home-order-fields { grid-template-columns: minmax(0,1fr) 86px; }
.home-presets { grid-column: 1 / -1; }
.home-presets .quick-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
.telegram-home-fields .home-recipient,
.telegram-home-fields [data-telegram-panel="stars"],
.home-premium-packages { grid-column: 1 / -1; }
}
.launch-all-services { display: none; }
.home-order-layout.compact-action {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
overflow: hidden;
border: 1px solid var(--accent-wash-strong);
border-radius: 20px;
background: linear-gradient(145deg, var(--accent-wash), transparent 42%), var(--surface);
box-shadow: 0 18px 44px rgba(0,0,0,.17);
}
.home-order-layout.compact-action .home-order-card {
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0 18px 4px;
}
.home-order-layout.compact-action .home-order-head {
min-height: 58px;
margin: 0;
border: 0;
padding: 0;
}
.home-order-layout.compact-action .home-order-fields {
grid-template-columns: minmax(0, 1fr) minmax(132px, 170px);
gap: 12px;
padding: 0;
}
.home-order-layout.compact-action .home-presets { padding-right: 0; }
.home-order-layout.compact-action .action-only {
position: static;
right: auto;
bottom: auto;
width: auto;
min-width: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 10px 18px 18px;
}
.home-order-layout.compact-action .action-only .button {
min-height: 54px;
border-radius: 14px;
font-size: 16px;
}
.home-order-layout.compact-action .field-help {
min-height: 34px;
padding-inline: 11px;
}
.home-order-layout.compact-action .quick-row { gap: 7px; }
.home-order-layout.compact-action .quick {
min-height: 46px;
border-radius: 12px;
font-size: 12px;
}
.services-page .voucher-service-switch {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
gap: 16px 10px;
overflow: visible;
margin: 0 0 18px;
padding: 2px 0 8px;
mask-image: none;
}
.services-page .voucher-service-card {
width: auto;
min-width: 0;
min-height: 108px;
align-content: start;
gap: 8px;
padding: 4px;
border-radius: 14px;
scroll-snap-align: none;
}
.services-page .voucher-service-card > span {
width: min(100%, 72px);
height: auto;
margin-inline: auto;
}
.services-page .voucher-service-card b {
min-height: 34px;
font-size: 12px;
line-height: 1.3;
}
@media (max-width: 780px) {
.store-hero .container { width: min(calc(100% - 20px), var(--max)); }
.service-launchpad {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
overflow: visible;
margin: 0 0 10px;
padding: 8px;
border-radius: 18px;
mask-image: none;
}
.service-launchpad .launch-service {
width: auto;
min-width: 0;
max-width: none;
min-height: 78px;
gap: 5px;
padding: 5px 2px;
border-radius: 12px;
scroll-snap-align: none;
}
.service-launchpad .launch-service[data-voucher-service] { display: none; }
.service-launchpad .launch-icon {
width: 48px;
height: 48px;
margin-inline: auto;
border-radius: 14px;
}
.service-launchpad .launch-service b {
min-height: 30px;
font-size: 11px;
line-height: 1.25;
}
.service-launchpad .launch-all-services {
grid-column: auto;
min-height: 78px;
display: grid;
align-content: center;
justify-items: center;
gap: 5px;
border: 0;
background: transparent;
padding: 5px 2px;
}
.service-launchpad .launch-all-services .launch-icon {
width: 48px;
height: 48px;
border: 1px solid var(--accent-wash-strong);
background: linear-gradient(145deg, var(--accent-wash), transparent 54%), var(--surface-2);
box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.service-launchpad .launch-all-services .launch-icon img { width: 54%; height: 54%; }
.service-launchpad .launch-all-services > span:nth-child(2) { width: 100%; }
.service-launchpad .launch-all-services b {
min-height: 30px;
display: -webkit-box;
overflow: hidden;
font-size: 11px;
-webkit-line-clamp: 2;
}
.home-order-layout.compact-action { border-radius: 18px; }
.home-order-layout.compact-action .home-order-card { padding: 0 12px 2px; }
.home-order-layout.compact-action .home-order-head { display: none; }
.home-order-layout.compact-action .home-order-head .steam-flow-brand img { width: 34px; height: 34px; }
.home-order-layout.compact-action .home-order-fields {
grid-template-columns: minmax(0, 1fr) 118px;
gap: 10px;
padding-top: 12px;
}
.home-order-layout.compact-action .home-order-fields .field label { min-height: 34px; font-size: 12px; }
.home-order-layout.compact-action .input-wrap input { height: 52px; font-size: 15px; }
.home-order-layout.compact-action .home-presets { grid-column: 1 / -1; }
.home-order-layout.compact-action .action-only { padding: 9px 12px 12px; }
.home-order-layout.compact-action .action-only .button { min-height: 52px; }
.telegram-home-fields > .field { grid-column: 1 / -1; }
.telegram-home-fields .home-stars-input { min-height: 58px; }
.telegram-home-fields .home-stars-input input { font-size: 25px; }
.home-showcase-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-flow: row;
grid-auto-columns: auto;
gap: 9px;
overflow: visible;
margin: 0;
padding: 0;
mask-image: none;
}
.home-showcase-card {
width: auto;
min-width: 0;
min-height: 92px;
grid-template-columns: 58px minmax(0, 1fr);
border-radius: 14px;
scroll-snap-align: none;
}
.home-showcase-art { min-height: 92px; }
.home-showcase-card:nth-child(n+5) { display: none; }
.home-showcase-copy { padding: 9px 8px; }
.home-showcase-copy b { font-size: 12px; }
.home-showcase-copy em { font-size: 11px; -webkit-line-clamp: 1; }
.home-showcase-card.stars .home-showcase-art img,
.home-showcase-card.premium .home-showcase-art img,
.home-showcase-card.service .home-showcase-art img { width: 36px; height: 36px; }
.services-page .voucher-service-switch {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px 8px;
overflow: visible;
margin: 0 0 14px;
padding: 2px 0 6px;
mask-image: none;
}
.services-page .voucher-service-card {
width: auto;
min-width: 0;
min-height: 98px;
padding: 3px 1px;
}
.services-page .voucher-service-card > span { width: min(100%, 64px); }
.services-page .voucher-service-card b { min-height: 32px; font-size: 11px; }
}
@media (max-width: 380px) {
.service-launchpad { gap: 5px; padding: 7px; }
.service-launchpad .launch-service { min-height: 74px; }
.service-launchpad .launch-icon { width: 44px; height: 44px; }
.service-launchpad .launch-all-services { min-height: 74px; }
.service-launchpad .launch-all-services .launch-icon { width: 44px; height: 44px; }
.home-order-layout.compact-action .home-order-fields,
.home-order-fields { grid-template-columns: minmax(0, 1fr) 96px; }
.home-order-layout.compact-action .home-presets { grid-column: 1 / -1; }
.home-order-layout.compact-action .home-presets .quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-order-layout.compact-action .quick { padding-inline: 2px; font-size: 10.5px; }
.services-page .voucher-service-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-showcase-grid { gap: 7px; }
.home-showcase-card { grid-template-columns: 52px minmax(0, 1fr); }
.home-showcase-copy small { font-size: 10px; }
.home-showcase-copy b { font-size: 11px; }
.home-showcase-copy em { display: none; }
}
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.input-wrap.recipient-confirmed input { color: transparent; caret-color: transparent; }
.input-wrap.recipient-confirmed:focus-within input { color: var(--text); caret-color: var(--text); }
.recipient-identity {
position: absolute;
z-index: 1;
left: 12px;
right: 48px;
top: 50%;
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
transform: translateY(-50%);
pointer-events: none;
}
.input-wrap.recipient-confirmed:focus-within .recipient-identity { opacity: 0; }
.recipient-identity > span { min-width: 0; display: grid; gap: 1px; }
.recipient-identity b,
.recipient-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-identity b { color: var(--text); font-size: 14px; line-height: 1.15; }
.recipient-identity small { color: var(--text-secondary); font-size: 11px; line-height: 1.15; }
.recipient-avatar {
position: static;
flex: 0 0 auto;
width: 30px;
height: 30px;
margin: 0;
border: 1px solid var(--accent-border-soft);
border-radius: 50%;
object-fit: cover;
}
.recipient-avatar[hidden] { display: none; }
.telegram-submit.stars,
.telegram-submit.stars:hover {
border-color: var(--gold);
background: var(--gold-fill);
color: var(--gold-ink);
}
.telegram-page .stars-quantity {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.telegram-page .stars-quantity-input {
width: min(100%, 420px);
min-height: 58px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
border-color: var(--line-strong);
border-radius: 12px;
background: var(--bg);
padding: 7px 14px;
}
.telegram-page .stars-quantity-input:focus-within {
border-color: var(--text);
background: var(--bg);
box-shadow: none;
}
.telegram-page .stars-quantity-input input {
font-family: var(--body);
font-size: 24px;
font-weight: 850;
font-variant-numeric: tabular-nums;
}
.telegram-page .stars-quantity-input span { color: var(--gold-text); font-size: 12px; }
.telegram-page .stars-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.telegram-page .stars-presets button {
min-height: 44px;
border-radius: 11px;
font-size: 12px;
transform: none;
}
.telegram-page .stars-presets button:hover { transform: none; }
.telegram-page .stars-presets button.active {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
color: var(--gold-text);
}
.telegram-page .stars-range { margin: 3px 0 0; }
.premium-package-grid .telegram-package,
.home-premium-packages .telegram-package {
min-height: 78px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
grid-template-rows: auto auto;
align-content: center;
column-gap: 9px;
row-gap: 2px;
padding: 10px;
border-top-width: 1px;
}
.premium-package-grid .telegram-package img,
.home-premium-packages .telegram-package img {
grid-row: 1 / 3;
width: 24px;
height: 24px;
align-self: center;
margin: 0;
}
.premium-package-grid .telegram-package b,
.home-premium-packages .telegram-package b { font-size: 13px; line-height: 1.2; }
.premium-package-grid .telegram-package span,
.home-premium-packages .telegram-package span { font-size: 11px; }
.game-region-search { width: 100%; margin: 0 0 10px; }
@media (min-width: 781px) {
.service-launchpad { align-items: center; padding-block: 10px; }
.service-launchpad .launch-service { height: 96px; min-height: 96px; align-content: center; }
}
@media (max-width: 520px) {
.telegram-page .workspace-main { gap: 11px; padding: 12px; }
.telegram-page .telegram-recipient-field { margin: 0; }
.telegram-page .stars-quantity-input { width: 100%; min-height: 56px; padding: 6px 12px; }
.telegram-page .stars-quantity-input input { font-size: 23px; }
.telegram-page .stars-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.telegram-page .stars-presets button { min-height: 42px; padding-inline: 2px; font-size: 11px; }
.premium-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.premium-package-grid .telegram-package { min-height: 76px; grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: start; padding: 9px; }
.premium-package-grid .telegram-package img { display: none; }
.premium-package-grid .telegram-package b { font-size: 12px; }
.premium-package-grid .telegram-package span { font-size: 10px; }
}
@media (max-width: 360px) {
.telegram-page .stars-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.premium-package-grid { grid-template-columns: 1fr; }
.premium-package-grid .telegram-package { min-height: 64px; }
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
clip-path: inset(50%);
}
.launch-service:not(.games) .launch-icon img,
.voucher-service-card > span img,
.home-showcase-card:not(.game) .home-showcase-art img { filter: none; }
.services-page .voucher-service-card > span img { filter: none; }
.launch-service.playstation .launch-icon img,
.voucher-service-card[data-voucher-service="playstation"] > span img,
.home-showcase-card.playstation .home-showcase-art img {
filter: brightness(0) saturate(100%) invert(35%) sepia(91%) saturate(1500%) hue-rotate(183deg) brightness(91%) contrast(101%);
}
.launch-service.app-store .launch-icon img,
.voucher-service-card[data-voucher-service="app-store"] > span img,
.home-showcase-card.app-store .home-showcase-art img {
filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(2352%) hue-rotate(176deg) brightness(101%) contrast(94%);
}
.services-page .voucher-service-card[data-voucher-service="battle-net"] > span img {
filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(4218%) hue-rotate(195deg) brightness(101%) contrast(102%);
}
.services-page .voucher-service-card[data-voucher-service="ea"] > span img {
filter: brightness(0) saturate(100%) invert(38%) sepia(99%) saturate(3112%) hue-rotate(337deg) brightness(104%) contrast(101%);
}
.services-page .voucher-service-card[data-voucher-service="meta-quest"] > span img {
filter: brightness(0) saturate(100%) invert(31%) sepia(91%) saturate(1747%) hue-rotate(195deg) brightness(95%) contrast(106%);
}
.services-page .voucher-service-card[data-voucher-service="nintendo"] > span img {
filter: brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(6484%) hue-rotate(352deg) brightness(94%) contrast(105%);
}
.services-page .voucher-service-card[data-voucher-service="twitch"] > span img {
filter: brightness(0) saturate(100%) invert(38%) sepia(98%) saturate(2534%) hue-rotate(245deg) brightness(101%) contrast(102%);
}
.telegram-product-card > img {
width: 48px;
height: 48px;
border: 1px solid var(--hairline);
border-radius: 12px;
background: var(--surface-2);
padding: 8px;
}
.telegram-product-card:hover,
.telegram-product-card.active { transform: none; }
.package-loading.retry {
width: 100%;
background: transparent;
cursor: pointer;
}
.package-loading.retry:hover,
.package-loading.retry:focus-visible { border-color: rgba(255, 255, 255, .22); color: var(--gold-text); }
@media (min-width: 781px) {
.service-launchpad .launch-service {
grid-template-rows: 54px 28px;
gap: 5px;
align-content: center;
}
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
display: none;
-webkit-appearance: none;
}
.catalog-search button[data-catalog-clear] {
right: 4px;
width: 44px;
height: 44px;
min-height: 44px;
display: grid;
place-items: center;
padding: 0;
border-radius: 11px;
}
.catalog-search button[data-catalog-clear] svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.catalog-sort {
position: relative;
min-width: 0;
}
.catalog-sort > select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.catalog-sort-trigger {
width: 100%;
height: 48px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 13px;
border: 1px solid var(--edge);
border-radius: var(--radius-input);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.catalog-sort-trigger svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
transition: transform .16s ease;
}
.catalog-sort-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.catalog-sort-menu {
position: absolute;
z-index: 35;
top: calc(100% + 6px);
right: 0;
width: max(100%, 190px);
padding: 6px;
border: 1px solid var(--line-strong);
border-radius: 14px;
background: var(--surface-2);
box-shadow: var(--shadow);
}
.catalog-sort-menu button {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
border: 0;
border-radius: 11px;
padding: 0 11px;
background: transparent;
color: var(--text-secondary);
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.catalog-sort-menu button:hover,
.catalog-sort-menu button[aria-selected="true"] {
background: var(--accent-wash);
color: var(--gold-text);
}
.telegram-official-icon {
width: 100%;
height: 100%;
object-fit: contain;
}
.theme-button .theme-moon,
[data-theme="light"] .theme-button .theme-sun,
.mobile-menu-theme .theme-moon,
[data-theme="light"] .mobile-menu-theme .theme-sun { display: none; }
[data-theme="light"] .theme-button .theme-moon,
[data-theme="light"] .mobile-menu-theme .theme-moon { display: block; }
.mobile-menu-theme {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--line);
border-radius: 14px;
padding: 0 14px;
background: transparent;
color: var(--text-secondary);
font-weight: 700;
}
.mobile-menu-theme svg { width: 22px; height: 22px; }
[data-theme="light"] .site-header {
border-color: var(--line);
background: var(--surface);
box-shadow: 0 8px 28px rgba(48,42,25,.08);
}
[data-theme="light"] .site-search input,
[data-theme="light"] .catalog-search input,
[data-theme="light"] .choice-search,
[data-theme="light"] .input-wrap,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .game-logo-card > span,
[data-theme="light"] .voucher-service-card > span {
background-color: var(--surface);
color: var(--text);
}
[data-theme="light"] .site-search input:focus { background: var(--surface); }
[data-theme="light"] .mobile-dock,
[data-theme="light"] .mobile-menu-panel,
[data-theme="light"] .catalog-sort-menu { background: var(--surface); }
@media (max-width: 780px) {
.theme-button { display: none !important; }
.service-launchpad {
margin: 0 0 10px;
padding-block: 5px;
align-items: stretch;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
align-self: stretch;
margin: 0;
}
.catalog-tools {
grid-template-columns: minmax(0, 1fr) minmax(118px, 138px);
align-items: start;
gap: 7px;
}
.catalog-sort-trigger {
padding-inline: 11px;
font-size: 12px;
}
.catalog-sort-menu { width: 176px; }
.catalog-category-tabs {
max-width: 100%;
padding: 0 2px 5px;
scroll-padding-inline: 2px;
}
.game-logo-icon i {
top: 4px;
right: 4px;
min-height: 19px;
border: 0;
padding-inline: 6px;
font-size: 8px;
}
}
@media (max-width: 360px) {
.catalog-tools {
grid-template-columns: minmax(0, 1fr) 112px;
}
.catalog-sort-trigger { padding-inline: 9px; font-size: 11px; }
.service-launchpad { gap: 2px; }
}
.checkout-layout:has(.checkout-empty) {
width: min(420px, 100%);
}
.checkout-layout:has(.checkout-empty) .checkout-main {
padding: 20px;
}
.checkout-layout:has(.checkout-empty) .checkout-empty {
margin: 0;
border: 0;
padding: 8px 0 2px;
background: transparent;
}
.checkout-layout:has(.checkout-empty) .checkout-empty h2 {
font-size: clamp(22px, 6vw, 28px);
}
.checkout-layout:has(.checkout-empty) .checkout-side {
display: none;
}
.nav-row-icon img {
width: 19px;
height: 19px;
display: block;
object-fit: contain;
}
.catalog-loading {
margin-top: var(--space-5);
}
.catalog-loading[hidden] { display: none; }
.catalog-loading-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: var(--space-4);
}
.catalog-loading-grid i {
aspect-ratio: 1;
border-radius: 20px;
background: linear-gradient(110deg, var(--hairline) 25%, var(--hairline-strong) 42%, var(--hairline) 60%);
background-size: 220% 100%;
animation: loading-sheen 1.5s ease-in-out infinite;
}
.services-loading-panel {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
max-width: 920px;
}
.services-loading-panel i {
min-height: 74px;
border-radius: var(--radius-input);
background: linear-gradient(110deg, var(--hairline) 25%, var(--hairline-strong) 42%, var(--hairline) 60%);
background-size: 220% 100%;
animation: loading-sheen 1.5s ease-in-out infinite;
}
.identity-loading {
min-height: 92px;
justify-content: stretch;
padding: var(--space-4);
}
.profile-loading-skeleton {
width: 100%;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 112px;
align-items: center;
gap: var(--space-4);
}
.profile-loading-skeleton i,
.profile-loading-skeleton b,
.profile-loading-skeleton em {
display: block;
border-radius: 999px;
background: linear-gradient(110deg, var(--hairline) 25%, var(--hairline-strong) 42%, var(--hairline) 60%);
background-size: 220% 100%;
animation: loading-sheen 1.5s ease-in-out infinite;
}
.profile-loading-skeleton i { width: 52px; height: 52px; }
.profile-loading-skeleton span { display: grid; gap: 10px; }
.profile-loading-skeleton b { width: min(220px, 70%); height: 13px; }
.profile-loading-skeleton b + b { width: min(150px, 48%); height: 10px; }
.profile-loading-skeleton em { width: 112px; height: 44px; border-radius: var(--radius-input); }
@keyframes loading-sheen {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
@media (max-width: 780px) {
.catalog-loading-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.catalog-loading-grid i { border-radius: 16px; }
.services-loading-panel { grid-template-columns: 1fr; }
.profile-loading-skeleton { grid-template-columns: 46px minmax(0, 1fr); }
.profile-loading-skeleton i { width: 46px; height: 46px; }
.profile-loading-skeleton em { display: none; }
}
@media (min-width: 400px) and (max-width: 780px) {
.games-page .catalog-tools {
grid-template-columns: minmax(0, 1fr) 164px;
align-items: stretch;
}
.games-page .catalog-tools select {
min-width: 0;
padding-left: 13px;
font-size: 12px;
}
}
.games-page .checkout-empty,
.services-page .checkout-empty {
justify-items: start;
gap: 4px;
margin-top: var(--space-5);
border-style: solid;
padding: var(--space-5);
background: var(--hairline);
}
.games-page .checkout-empty h2,
.services-page .checkout-empty h2 {
font-size: clamp(18px, 3vw, 22px);
text-transform: none;
}
.games-page .checkout-empty p,
.services-page .checkout-empty p {
font-size: 13px;
}
@media (max-width: 520px) {
.site-search input::placeholder { color: var(--text-tertiary); }
.games-page .checkout-empty,
.services-page .checkout-empty { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
.catalog-loading-grid i,
.services-loading-panel i,
.profile-loading-skeleton i,
.profile-loading-skeleton b,
.profile-loading-skeleton em {
animation: none;
background: var(--hairline);
}}
.home-showcase-head > a,
.help-nav a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.field-help { min-height: 44px !important; }
.stars-quantity-input input,
.home-stars-input input { min-height: 44px; }
.telegram-page .stars-presets button { min-height: 44px; }
@media (max-width: 780px) {
.section.compact { padding-top: 12px; }
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
grid-template-rows: 48px 30px;
gap: 5px;
align-content: center;
}
}
@media (max-width: 380px) {
.service-launchpad .launch-service,
.service-launchpad .launch-all-services { grid-template-rows: 44px 30px; }
}
.telegram-product-switch {
gap: 8px;
padding: 6px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface);
}
.telegram-product-card {
min-height: 66px;
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
border-color: transparent;
border-radius: 12px;
padding: 10px 12px;
box-shadow: none;
}
.telegram-product-card > img {
width: 40px;
height: 40px;
border-radius: 11px;
padding: 7px;
}
.telegram-product-card b {
margin: 0;
font-family: var(--body);
font-size: 14px;
line-height: 1.2;
}
.telegram-product-card em,
.telegram-product-card > i,
.telegram-product-card::after { display: none !important; }
.telegram-product-card.active,
.telegram-product-card[aria-selected="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.premium-package-grid .telegram-package,
.home-premium-packages .telegram-package {
min-height: 66px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
place-content: center;
justify-items: center;
gap: 3px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg);
padding: 9px 6px;
text-align: center;
}
.premium-package-grid .telegram-package img,
.home-premium-packages .telegram-package img { display: none; }
.premium-package-grid .telegram-package b,
.home-premium-packages .telegram-package b {
color: var(--text);
font-size: 13px;
line-height: 1.15;
}
.premium-package-grid .telegram-package span,
.home-premium-packages .telegram-package span { color: var(--text-secondary); font-size: 11px; }
.premium-package-grid .telegram-package:hover,
.home-premium-packages .telegram-package:hover { border-color: var(--line-strong); background: var(--surface); }
.premium-package-grid .telegram-package[aria-pressed="true"],
.home-premium-packages .telegram-package[aria-pressed="true"] {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}
.premium-package-grid .telegram-package[aria-pressed="true"] b,
.home-premium-packages .telegram-package[aria-pressed="true"] b { color: var(--gold-text); }
.stars-home-presets { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-order-layout.compact-action .home-presets .stars-home-presets {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.telegram-home-fields [data-telegram-panel="stars"] {
grid-column: 1 / -1;
}
.telegram-home-fields .stars-range { margin: 5px 0 0; color: var(--text-tertiary); font-size: 11px; }
@media (max-width: 520px) {
.telegram-product-switch { margin-bottom: 8px; padding: 5px; }
.telegram-page .telegram-product-card {
min-height: 62px;
grid-template-columns: 38px minmax(0, 1fr);
gap: 8px;
padding: 8px 9px;
}
.telegram-page .telegram-product-card > img { width: 36px; height: 36px; padding: 6px; }
.telegram-page .telegram-product-card b { font-size: 13px; }
.premium-package-grid .telegram-package,
.home-premium-packages .telegram-package { min-height: 64px; padding: 8px 4px; }
.premium-package-grid .telegram-package b,
.home-premium-packages .telegram-package b { font-size: 12px; }
.stars-home-presets { gap: 5px; }
.stars-home-presets .quick { min-height: 42px; padding-inline: 2px; font-size: 11px; }
}
@media (max-width: 360px) {
.premium-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
.telegram-home-fields { gap: 8px; }
.telegram-home-fields > .field > label {
min-height: 0 !important;
margin-bottom: 2px;
}
.telegram-home-fields .home-presets > label { display: none; }
.telegram-home-fields .home-presets { margin-top: -2px; }
.telegram-home-fields .home-presets .stars-home-presets {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
}
.telegram-home-fields .stars-home-presets .quick {
min-width: 0;
min-height: 44px;
padding-inline: 2px;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.telegram-home-fields .stars-range { margin-top: 0; }
.telegram-page .telegram-product-card b {
line-height: 1.35;
padding-block: 1px 2px;
}
}
.home-showcase,
.site-footer,
.rank-board,
.profile-section,
.game-checkout-panel {
content-visibility: auto;
contain-intrinsic-size: 1px 420px;
}
.home-showcase-card.game .home-showcase-art {
background: radial-gradient(circle at 50% 44%, var(--accent-wash), transparent 62%), var(--surface-2);
}
.home-showcase-card.game .home-showcase-art img {
width: 52px;
height: 52px;
border-radius: 14px;
object-fit: cover;
}
.home-order-layout[data-home-panel="telegram"] {
border-color: var(--line);
background: var(--surface);
box-shadow: 0 16px 36px rgba(0,0,0,.14);
}
.stars-quantity-input .stars-unit {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--accent-wash);
}
.stars-quantity-input .stars-unit img {
width: 22px;
height: 22px;
object-fit: contain;
padding: 0;
filter: none;
}
.telegram-page .stars-quantity-input,
.telegram-home-fields .stars-quantity-input {
grid-template-columns: minmax(0, 1fr) auto;
}
.telegram-page .stars-quantity-input .stars-unit,
.telegram-home-fields .stars-quantity-input .stars-unit {
display: grid !important;
}
.telegram-page .stars-quantity-input .stars-unit img,
.telegram-home-fields .stars-quantity-input .stars-unit img {
display: block !important;
}
.home-order-layout[data-home-panel="telegram"] {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.home-order-layout[data-home-panel="telegram"] .home-order-card,
.home-order-layout[data-home-panel="telegram"] .action-only {
background: var(--surface);
}
.home-order-layout[data-home-panel="telegram"] .home-order-card {
border: 1px solid var(--line);
border-bottom: 0;
border-radius: 18px 18px 0 0;
}
.home-order-layout[data-home-panel="telegram"] .action-only {
border: 1px solid var(--line);
border-top: 0;
border-radius: 0 0 18px 18px;
}
@media (max-width: 780px) {
.store-hero { padding-top: 10px; }
.store-hero > .container { gap: 0; }
.service-launchpad {
position: relative;
z-index: 2;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
margin: 0 0 8px;
padding: 6px;
overflow: visible;
border-color: var(--hairline);
border-radius: 18px;
background: var(--surface-2);
mask-image: none;
box-shadow: none;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
width: auto;
min-width: 0;
max-width: none;
min-height: 76px;
height: 76px;
grid-template-rows: 44px 25px;
gap: 3px;
padding: 4px 2px;
border: 0;
border-radius: 12px;
background: transparent;
}
.service-launchpad .launch-service:hover,
.service-launchpad .launch-service:focus-visible {
background: var(--hairline);
}
.service-launchpad .launch-service.selected {
background: var(--accent-wash);
box-shadow: inset 0 0 0 1px var(--accent-border-soft);
}
.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon {
width: 42px;
height: 42px;
border: 0;
border-radius: 12px;
background: var(--surface-2);
box-shadow: none;
}
.service-launchpad .launch-service.selected .launch-icon {
border: 1px solid var(--accent-border-soft);
box-shadow: none;
}
.service-launchpad .launch-service b,
.service-launchpad .launch-all-services b {
min-height: 25px;
font-size: 10.5px;
line-height: 1.15;
}
.home-order-layout.compact-action,
.home-order-layout[data-home-panel="telegram"] {
overflow: hidden;
border: 1px solid var(--hairline);
border-radius: 18px;
background: var(--surface);
box-shadow: none;
}
.home-order-layout.compact-action .home-order-card,
.home-order-layout[data-home-panel="telegram"] .home-order-card {
padding: 12px 12px 2px;
border: 0;
border-radius: 0;
background: transparent;
}
.home-order-layout.compact-action .action-only,
.home-order-layout[data-home-panel="telegram"] .action-only {
padding: 8px 12px 12px;
border: 0;
border-radius: 0;
background: transparent;
}
.home-order-layout.compact-action .home-order-fields { gap: 9px 8px; }
.home-order-layout.compact-action .home-order-fields .field label {
min-height: 28px;
margin-bottom: 3px;
align-items: center;
}
.home-order-layout.compact-action .input-wrap input,
.telegram-home-fields .stars-quantity-input { height: 50px; }
.home-order-layout.compact-action .quick { min-height: 44px; }
.home-order-layout.compact-action .action-only .button { min-height: 52px; }
}
@media (max-width: 360px) {
.service-launchpad { padding-inline: 4px; }
.service-launchpad .launch-service,
.service-launchpad .launch-all-services { min-height: 72px; height: 72px; }
.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon { width: 40px; height: 40px; }
.service-launchpad .launch-service b,
.service-launchpad .launch-all-services b { font-size: 11px; }
}
body.sheet-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.checkout-sheet {
position: fixed;
z-index: 180;
inset: 0;
min-height: 0;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
padding: 24px 24px 0;
background: transparent;
isolation: isolate;
}
.checkout-dismiss {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
background: rgba(4,5,4,.46);
cursor: pointer;
}
.checkout-layout {
position: relative;
z-index: 2;
}
.checkout-gate {
min-height: 220px;
display: grid;
place-items: center;
align-content: center;
gap: 14px;
padding: 32px;
color: var(--text-secondary);
text-align: center;
}
.checkout-gate p {
margin: 0;
font-size: 14px;
font-weight: 750;
}
.checkout-gate .button {
min-width: 190px;
}
.checkout-spinner {
width: 34px;
height: 34px;
border: 3px solid var(--line-strong);
border-top-color: var(--gold);
border-radius: 50%;
animation: checkout-spin .72s linear infinite;
}
.checkout-gate.error .checkout-spinner { display: none; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
.checkout-layout {
width: min(680px, 100%);
max-height: calc(100dvh - 24px);
display: grid;
grid-template-columns: minmax(0,1fr);
gap: 0;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--line-strong);
border-bottom: 0;
border-radius: 24px 24px 0 0;
background: linear-gradient(145deg, var(--accent-wash), transparent 42%), var(--surface);
box-shadow: 0 -24px 80px rgba(0,0,0,.48);
animation: checkout-sheet-in .24s cubic-bezier(.2,.75,.25,1) both;
}
.checkout-main,
.checkout-side {
position: static;
width: 100%;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.checkout-main { padding: 22px 24px 12px; }
.checkout-main h1 { display: none; }
.checkout-items { border: 0; }
.checkout-item {
min-height: 0;
align-items: flex-start;
border-bottom: 0;
padding: 0;
}
.checkout-item span { font-size: 10px; }
.checkout-item h3 { margin-top: 5px; font-size: clamp(17px,3vw,21px); }
.checkout-item p { margin-top: 5px; font-size: 12px; }
.checkout-state {
min-height: 46px;
margin-top: 14px;
border-radius: 12px;
padding: 11px 13px 11px 38px;
font-size: 12px;
}
.checkout-state.success { display: none; }
.checkout-side {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: end;
gap: 8px 18px;
border-top: 1px solid var(--line);
padding: 16px 24px max(22px, env(safe-area-inset-bottom));
}
.checkout-side .order-kicker { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 11px; }
.checkout-counter { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.checkout-counter [data-checkout-total] { font-size: clamp(28px,5vw,38px); }
.checkout-summary-line {
grid-column: 1;
grid-row: 2;
justify-content: flex-start;
gap: 7px;
margin: 0;
background: transparent;
padding: 0;
}
.checkout-summary-line span::after { content: ":"; }
.checkout-note { display: none; }
.checkout-payment-methods {
grid-column: 1 / -1;
display: grid;
gap: 9px;
margin-top: 8px;
}
.checkout-payment-methods[hidden] { display: none; }
.checkout-payment-methods > span {
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
}
.checkout-payment-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.checkout-payment-method {
min-width: 0;
min-height: 58px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 10px;
border: 1px solid transparent;
border-radius: 14px;
background: var(--fill-rest, rgba(255, 255, 255, .035));
color: var(--text);
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.checkout-payment-method:hover { background: var(--fill-hover, rgba(255, 255, 255, .06)); }
.checkout-payment-method.selected {
border-color: transparent;
background: var(--fill-selected, rgba(255, 255, 255, .08));
box-shadow: none;
}
.checkout-payment-method.selected:hover { background: var(--fill-selected-hover, rgba(255, 255, 255, .10)); }
.checkout-payment-method.selected b { color: var(--gold-text); }
.checkout-payment-method:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.checkout-payment-method > span:last-child {
min-width: 0;
display: grid;
gap: 2px;
}
.checkout-payment-method b {
overflow-wrap: normal;
hyphens: auto;
font-size: 13px;
line-height: 1.15;
}
.checkout-payment-method small {
color: var(--text-secondary);
font-size: 11px;
}
.checkout-payment-mark {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--surface-sunken, #0e0f11);
}
.checkout-payment-mark.sbp {
background: #fff;
}
.checkout-payment-mark.sbp img {
width: 25px;
height: 25px;
display: block;
object-fit: contain;
}
.checkout-payment-mark.crypto {
background: #16181b;
}
.checkout-payment-mark.crypto img {
width: 34px;
height: 34px;
display: block;
}
.checkout-payment-mark.stars {
background: #121315 url("/img/store/telegram-stars.svg?v=8") center/22px 22px no-repeat;
}
.service-launchpad {
gap: 6px;
margin-block: 10px 14px;
padding: 0;
overflow-x: auto;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.launch-service {
min-height: 86px;
border: 0;
border-radius: 16px;
background: transparent;
box-shadow: none;
transition: color .16s ease, background-color .16s ease;
}
.launch-service .launch-icon,
.launch-service.selected .launch-icon {
border: 0;
background: transparent;
box-shadow: none;
}
.launch-service:hover,
.launch-service:focus-visible {
background: var(--hairline);
}
.launch-service:hover .launch-icon,
.launch-service:focus-visible .launch-icon {
transform: translateY(-2px);
border: 0;
box-shadow: none;
}
.launch-service.selected {
background: var(--accent-wash);
box-shadow: none;
}
.launch-service.selected b { color: var(--gold-text); }
.home-order-layout.compact-action {
border: 0;
background: rgba(30,32,36,.92);
box-shadow: none;
}
.home-order-layout.compact-action .home-order-head { display: none; }
.home-order-layout.compact-action .home-order-card {
padding-top: 18px;
}
.home-order-layout.compact-action .quick {
border-color: transparent;
background: var(--hairline);
}
.home-order-layout.compact-action .quick:hover,
.home-order-layout.compact-action .quick:focus-visible {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
}
.home-order-layout.compact-action .quick.active {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
box-shadow: none;
}
.home-showcase-card {
border: 0;
background: var(--hairline);
box-shadow: none;
}
.home-showcase-card .home-showcase-art {
background: transparent !important;
}
.home-showcase-card:hover,
.home-showcase-card:focus-visible {
border-color: transparent;
background: var(--hairline-strong);
box-shadow: none;
}
@media (max-width: 780px) {
.service-launchpad {
gap: 2px;
margin-bottom: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
min-height: 74px;
height: 74px;
border-radius: 14px;
}
.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon,
.service-launchpad .launch-service.selected .launch-icon {
border: 0;
background: transparent;
}
.service-launchpad .launch-service.selected {
background: var(--accent-wash);
box-shadow: none;
}
.home-order-layout.compact-action,
.home-order-layout[data-home-panel="telegram"] {
border: 0;
background: rgba(30,32,36,.92);
}
.home-order-layout.compact-action .home-order-card {
padding-top: 12px;
}
}
.checkout-side .button {
grid-column: 1 / -1;
min-height: 56px;
margin-top: 8px;
border-radius: 14px;
font-size: 16px;
}
.checkout-legal {
grid-column: 1 / -1;
margin: 2px 0 0;
text-align: center;
}
@keyframes checkout-sheet-in {
from { opacity: 0; transform: translateY(42px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 780px) {
.checkout-page { padding: 12px 0 0; }
.checkout-layout {
width: 100%;
max-height: calc(100dvh - 12px);
border-inline: 0;
border-radius: 22px 22px 0 0;
}
.checkout-main { padding: 18px 18px 10px; }
.checkout-side { padding: 14px 18px max(18px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
.checkout-layout { animation: none; }
.checkout-spinner { animation-duration: 1.4s; }
}
.telegram-submit.premium,
.telegram-submit.premium:hover {
border-color: var(--gold);
background: var(--gold-fill);
color: var(--gold-ink);
}
@keyframes checkout-modal-in {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width: 781px) {
.checkout-sheet {
align-items: center;
padding: 24px;
}
.checkout-layout {
max-height: calc(100dvh - 48px);
border: 1px solid var(--line-strong);
border-radius: 24px;
box-shadow: 0 24px 90px rgba(0,0,0,.58);
animation-name: checkout-modal-in;
}
}
.site-search,
.header-actions,
.header-main > *,
.legal-layout > *,
.help-grid > *,
.identity-grid > *,
.profile-dashboard-grid > *,
.voucher-layout > *,
.game-configurator > * {
min-width: 0;
max-width: 100%;
}
.section.compact {
padding-block: 24px 40px;
}
.workspace,
.voucher-main,
.game-checkout-panel,
.identity-panel,
.profile-overview,
.profile-section {
border-color: rgba(245,241,232,.10);
border-radius: var(--radius-panel);
background: var(--surface);
box-shadow: none;
}
.workspace-main,
.voucher-main,
.game-configurator-main,
.profile-section,
.identity-panel-body {
padding: clamp(18px, 2.25vw, 28px);
}
.field label,
.config-step-title b,
.profile-section .eyebrow,
.checkout-item span {
color: var(--text-secondary);
font-size: 12px;
}
.field input,
.field select,
.choice-search,
.input-wrap,
.amount-input,
.catalog-search input {
max-width: 100%;
border-radius: var(--radius-input);
}
.quick,
.filter,
.order-filters button,
.stars-presets button,
.package,
.telegram-package,
.voucher-region,
.voucher-product,
.region-choice,
.product-choice {
border-radius: var(--radius-button);
}
.help-head {
padding: 22px 0 12px;
border-bottom: 0;
}
.help-head .container {
align-items: center;
}
.help-head h1 {
font-size: clamp(28px, 3vw, 40px);
}
.help-grid {
grid-template-columns: 190px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.help-nav {
top: 110px;
gap: 4px;
border: 0;
border-radius: var(--radius-card);
padding: 7px;
background: var(--hairline);
}
.help-nav a {
min-height: 44px;
border-radius: 11px;
padding: 0 12px;
font-weight: 700;
}
.help-nav a:hover,
.help-nav a:focus-visible {
color: var(--text);
background: var(--accent-wash);
}
.help-faq {
gap: 26px;
border: 1px solid rgba(245,241,232,.10);
border-radius: var(--radius-panel);
padding: clamp(20px, 2.5vw, 32px);
background: var(--surface);
}
.help-faq h2 {
margin: 0 0 12px;
font-size: clamp(21px, 2.2vw, 28px);
}
.help-faq details:first-of-type {
border-top-color: transparent;
}
.help-faq summary {
min-height: 50px;
display: flex;
align-items: center;
padding-block: 12px;
font-size: 14px;
}
.help-faq p {
font-size: 13px;
line-height: 1.6;
}
.legal-page {
padding: 32px 0 64px;
}
.legal-layout {
grid-template-columns: minmax(0, 820px) minmax(190px, 230px);
gap: 24px;
}
.legal-copy {
overflow: hidden;
border: 1px solid rgba(245,241,232,.10);
border-radius: var(--radius-panel);
padding: clamp(24px, 3.5vw, 44px);
background: var(--surface);
font-size: 14px;
}
.legal-copy .legal-title {
max-width: 100%;
margin: 8px 0 18px;
font-size: clamp(30px, 3.4vw, 46px);
overflow-wrap: anywhere;
}
.legal-copy h2 {
max-width: 100%;
margin: 34px 0 12px;
font-family: var(--body);
font-size: clamp(17px, 1.5vw, 20px);
font-weight: 800;
line-height: 1.25;
overflow-wrap: anywhere;
}
.legal-copy p,
.legal-copy li,
.legal-copy a {
overflow-wrap: anywhere;
}
.legal-meta {
top: 112px;
border: 1px solid rgba(245,241,232,.10);
border-radius: var(--radius-card);
padding: 18px;
background: var(--hairline);
font-size: 12px;
}
.identity-grid {
width: min(100%, 1120px);
}
.identity-entry-grid {
width: min(100%, 540px);
}
.identity-panel {
width: 100%;
}
.identity-panel-head {
min-height: 64px;
padding-inline: clamp(18px, 2.5vw, 28px);
}
.login-method {
border-radius: var(--radius-button);
}
.rank-board {
border-top: 0;
padding-top: 22px;
}
.rank-board-head {
margin-bottom: 16px;
}
.rank-board-head h2 {
font-size: clamp(26px, 3vw, 36px);
}
.rank-grid {
border-radius: var(--radius-panel);
}
.payment-result-page .container {
width: min(calc(100% - 40px), 720px);
}
.payment-result-card {
border-radius: var(--radius-panel);
box-shadow: none;
}
@media (max-width: 780px) {
.container,
.store-hero .container,
.payment-result-page .container {
width: min(calc(100% - 24px), var(--max));
}
.header-main {
width: 100%;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 8px;
}
.brand {
min-width: 44px;
justify-content: flex-start;
}
.brand-word {
height: 14px;
width: 59px;
}
.brand-mark {
height: 18px;
}
.mobile-menu-head .brand {
width: auto;
min-width: 0;
max-width: calc(100% - 64px);
justify-content: flex-start;
gap: 10px;
}
.site-search {
width: 100%;
min-width: 0;
}
.site-search input {
width: 100%;
min-width: 0;
}
.header-actions {
flex: 0 0 auto;
}
.header-actions .account-button {
display: none;
}
.section,
.section.compact {
padding-block: 12px 24px;
}
.workspace-main,
.voucher-main,
.game-configurator-main,
.profile-section,
.identity-panel-body {
padding: 16px;
}
.help-head {
padding: 12px 0 8px;
}
.help-head .container {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.help-head h1 {
font-size: 27px;
}
.help-head .button {
min-width: 44px;
max-width: 128px;
white-space: nowrap;
}
.help-grid {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.help-nav {
position: static;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
overflow: visible;
border: 0;
padding: 5px;
}
.help-nav a {
min-width: 0;
justify-content: center;
border: 0;
padding: 0 6px;
text-align: center;
font-size: 12px;
}
.help-faq {
gap: 22px;
border-radius: 18px;
padding: 18px 16px;
}
.help-faq h2 {
font-size: 21px;
}
.legal-page {
padding: 12px 0 24px;
}
.legal-layout {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.legal-meta {
position: static;
order: -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 14px;
border-radius: 16px;
padding: 14px 16px;
}
.legal-meta br {
display: none;
}
.legal-copy {
border-radius: 18px;
padding: 20px 16px 24px;
font-size: 13px;
line-height: 1.65;
}
.legal-copy .breadcrumbs {
font-size: 11px;
}
.legal-copy .legal-title {
font-size: clamp(27px, 9vw, 36px);
line-height: 1.08;
}
.legal-copy h2 {
margin-top: 28px;
font-size: clamp(16px, 4.8vw, 19px);
}
.identity-entry-grid,
.identity-panel,
.profile-overview,
.profile-section,
.rank-board,
.rank-grid {
max-width: 100%;
}
.identity-panel-head {
min-height: 56px;
padding-inline: 16px;
}
.identity-panel-head h2 {
font-size: 22px;
}
.identity-panel-body {
padding: 14px 16px 16px;
}
.identity-entry-copy {
margin-bottom: 12px;
}
.rank-board {
padding-top: 16px;
}
.rank-board-head {
justify-content: flex-start;
margin-bottom: 10px;
}
.rank-board-head h2 {
font-size: 25px;
text-align: left;
}
.rank-grid {
width: 100%;
max-width: 100%;
margin-inline: 0;
padding-left: 0;
}
.site-footer {
margin-top: 12px;
padding-bottom: 18px;
}
.footer-main {
gap: 10px;
}
.footer-brand,
.footer-note {
display: none;
}
.footer-links {
justify-content: center;
}
}
@media (max-width: 360px) {
.container,
.store-hero .container,
.payment-result-page .container {
width: min(calc(100% - 18px), var(--max));
}
.header-main {
gap: 6px;
}
.help-head .button {
padding-inline: 11px;
font-size: 12px;
}
.legal-copy {
padding-inline: 14px;
}
.legal-copy .legal-title {
font-size: 26px;
}
.login-method {
padding-inline: 12px;
}
.catalog-category-tabs {
width: calc(100% + 18px);
max-width: calc(100% + 18px);
margin-inline: -9px;
padding-left: 9px;
padding-right: 27px;
scroll-padding-inline: 9px;
}
}
:root {
--ease-ui: cubic-bezier(.25, 1, .5, 1);
}
body {
background: var(--canvas);
font-size: 14px;
}
body::before {
opacity: .52;
background-size: 72px 72px;
}
.container {
width: min(calc(100% - 32px), var(--max));
}
.page {
padding-bottom: 12px;
}
.site-header {
border-bottom-color: var(--edge);
background: rgba(20, 21, 24, .92);
box-shadow: none;
}
.header-main {
height: 68px;
gap: 20px;
}
.brand {
gap: 10px;
}
.brand:hover img {
transform: none;
filter: none;
opacity: .86;
}
.site-search {
max-width: 620px;
}
.site-search input {
height: 46px;
border-color: var(--edge);
border-radius: var(--radius-input);
background: var(--surface-sunken, #0e0f11);
padding-right: 70px;
}
.site-search input:hover {
border-color: var(--edge-strong);
}
.site-search input:focus {
border-color: var(--accent-border-soft);
background: var(--surface-2);
}
.icon-button {
border-color: var(--edge);
background: var(--canvas-raised);
transition: border-color .16s ease, background-color .16s ease;
}
.icon-button:hover {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
}
.icon-button:hover svg {
transform: none;
}
.nav-row {
min-height: 48px;
justify-content: flex-start;
gap: 2px;
}
.nav-row a {
min-height: 44px;
padding-inline: 12px;
font-size: 13px;
}
.nav-row a.active {
box-shadow: inset 0 -2px var(--intent);
border-radius: 0; background: transparent;
}
.button {
border-radius: var(--radius-button);
box-shadow: none;
transition: background-color .16s ease, transform .16s var(--ease-ui);
}
.button::after {
display: none;
}
.button:hover {
transform: none;
background: var(--intent-hover);
box-shadow: none;
}
.store-hero {
padding-top: 16px;
}
.service-launchpad {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 4px;
margin: 8px 0 12px;
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
width: auto;
min-width: 0;
max-width: none;
min-height: 82px;
height: auto;
display: grid;
grid-template-rows: 44px minmax(26px, auto);
align-content: center;
justify-items: center;
gap: 5px;
border: 0;
border-radius: var(--radius-card);
padding: 6px 4px;
background: transparent;
}
.service-launchpad .launch-service:hover,
.service-launchpad .launch-service:focus-visible {
background: var(--hairline);
}
.service-launchpad .launch-service.selected {
background: var(--intent-wash);
box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}
.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon,
.service-launchpad .launch-service.selected .launch-icon {
border: 0;
border-radius: 12px;
background: var(--surface-sunken, #0e0f11);
box-shadow: none;
}
.service-launchpad .launch-service b,
.service-launchpad .launch-all-services b {
min-height: 26px;
display: -webkit-box;
overflow: hidden;
color: var(--ink-secondary);
font-size: 11px;
line-height: 1.18;
text-align: center;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.service-launchpad .launch-service.selected b {
color: var(--gold-text);
}
.home-order-layout.compact-action,
.home-order-layout[data-home-panel="telegram"],
.telegram-page .telegram-workspace {
overflow: hidden;
border: 1px solid var(--edge);
border-radius: var(--radius-panel);
background: var(--panel);
box-shadow: none;
}
.home-order-layout.compact-action .home-order-card,
.home-order-layout[data-home-panel="telegram"] .home-order-card {
padding: 18px 18px 4px;
background: transparent;
}
.home-order-layout.compact-action .home-order-fields {
gap: 10px 12px;
}
.field label,
.home-order-layout.compact-action .home-order-fields .field label {
min-height: 28px;
margin: 0 0 5px;
color: var(--ink-secondary);
font-size: 12px;
font-weight: 700;
}
.input-wrap,
.stars-quantity-input,
.choice-search,
.catalog-search {
border-color: var(--edge);
background: var(--surface-2);
}
.input-wrap:focus-within,
.stars-quantity-input:focus-within,
.choice-search:focus,
.catalog-search:focus-within {
border-color: var(--text);
box-shadow: none;
}
.home-order-layout.compact-action .input-wrap input,
.telegram-home-fields .stars-quantity-input,
.telegram-page .input-wrap input {
height: 52px;
}
.home-order-layout.compact-action .quick,
.stars-presets button {
min-height: 44px;
border-color: transparent;
background: var(--hairline);
}
.home-order-layout.compact-action .quick.active,
.stars-presets button.active,
.stars-presets button[aria-pressed="true"] {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
box-shadow: inset 0 0 0 1px var(--accent-wash);
}
.home-order-layout.compact-action .action-only,
.home-order-layout[data-home-panel="telegram"] .action-only {
padding: 10px 18px 18px;
}
.home-order-layout.compact-action .action-only .button,
.home-order-layout[data-home-panel="telegram"] .action-only .button {
min-height: 54px;
}
.field-help {
min-height: 32px;
border-radius: 11px;
background: transparent;
color: var(--muted);
}
.home-showcase {
margin-top: 20px;
}
.home-showcase-head {
align-items: end;
margin-bottom: 10px;
}
.home-showcase-head h2 {
margin-top: 2px;
font-size: clamp(22px, 2.5vw, 30px);
}
.home-showcase-head > a {
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--ink-secondary);
font-size: 12px;
font-weight: 700;
}
.home-showcase-grid {
gap: 8px;
}
.home-showcase-card {
min-height: 86px;
grid-template-columns: 68px minmax(0, 1fr);
border: 0;
border-radius: var(--radius-card);
background: var(--panel);
}
.home-showcase-card:hover,
.home-showcase-card:focus-visible {
background: var(--panel-hover);
}
.home-showcase-art {
min-height: 86px;
background: var(--surface-2) !important;
}
.home-showcase-art img {
max-width: 44px;
max-height: 44px;
object-fit: contain;
}
.home-showcase-card.game .home-showcase-art img {
width: 44px;
height: 44px;
border-radius: 12px;
}
.home-showcase-copy {
padding: 10px 11px;
}
.home-showcase-copy small {
color: var(--gold-text);
font-size: 10px;
}
.home-showcase-copy b {
color: var(--ink);
font-size: 13px;
}
.home-showcase-copy em {
color: var(--ink-tertiary);
font-size: 11px;
}
.telegram-page .section.compact {
padding-top: 16px;
}
.telegram-product-switch {
gap: 8px;
margin-bottom: 10px;
}
.telegram-product-card {
min-height: 70px;
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
border-color: transparent;
border-radius: var(--radius-card);
background: var(--panel);
padding: 10px 14px;
}
.telegram-product-card > img {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--surface-2);
padding: 8px;
}
.telegram-product-card > span {
min-width: 0;
}
.telegram-product-card b {
overflow: visible;
font-size: 14px;
line-height: 1.2;
}
.telegram-product-card em {
margin-top: 2px;
color: var(--ink-tertiary);
font-size: 11px;
}
.telegram-product-card > i {
display: none;
}
.telegram-product-card[aria-selected="true"] {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
box-shadow: inset 0 0 0 1px var(--accent-wash);
}
.telegram-page .workspace-main {
gap: 14px;
padding: 16px;
}
.telegram-page .stars-quantity-input {
min-height: 58px;
}
.telegram-page .stars-quantity-input input {
min-width: 0;
font-size: 25px;
}
.telegram-page .stars-presets {
gap: 6px;
}
.telegram-page .telegram-summary {
padding: 10px 16px 16px;
}
.premium-package-grid {
gap: 7px;
}
.premium-package-grid .telegram-package {
min-height: 78px;
border-color: transparent;
background: var(--hairline);
padding: 12px;
}
.premium-package-grid .telegram-package:hover,
.premium-package-grid .telegram-package:focus-visible {
border-color: var(--accent-border-soft);
}
.premium-package-grid .telegram-package[aria-pressed="true"] {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
}
.games-page .section.compact,
.services-page .section.compact {
padding-top: 16px;
}
.catalog-tools {
grid-template-columns: minmax(0, 1fr) 190px;
gap: 8px;
margin-bottom: 10px;
}
.catalog-search input,
.catalog-tools select,
.choice-search {
height: 48px;
border-color: var(--edge);
border-radius: var(--radius-input);
background-color: var(--surface-2);
}
.catalog-tools select {
padding-inline: 14px 38px;
}
.catalog-category-tabs {
gap: 6px;
margin-bottom: 16px;
}
.filter {
min-height: 44px;
border-color: transparent;
background: var(--hairline);
padding-inline: 14px;
}
.filter.active {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
}
.catalog-grid.game-logo-grid {
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 20px 12px;
}
.game-logo-card {
min-width: 0;
}
.game-logo-card > span,
.voucher-service-card > span {
border-color: transparent;
background: var(--surface-2);
box-shadow: none;
}
.game-logo-card:hover > span,
.game-logo-card:focus-visible > span,
.voucher-service-card:hover > span,
.voucher-service-card:focus-visible > span {
border-color: var(--accent-border-soft);
transform: translateY(-2px);
}
.game-logo-card b,
.voucher-service-card b {
color: var(--ink-secondary);
line-height: 1.25;
}
.services-page .voucher-service-switch {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 18px 12px;
margin-bottom: 20px;
}
.services-page .voucher-service-card {
min-height: 104px;
padding: 2px;
}
.services-page .voucher-service-card > span {
width: 68px;
height: 68px;
}
.services-page .voucher-service-card img {
filter: none;
}
.voucher-layout,
.game-configurator {
gap: 10px;
}
.voucher-main,
.game-checkout-panel,
.voucher-summary,
.game-configurator-main {
border-color: var(--edge);
background: var(--panel);
}
.voucher-summary,
.game-configurator-side {
top: 92px;
}
.config-step {
border-color: var(--edge);
}
.config-step-title > span {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
}
.voucher-region,
.voucher-product,
.region-choice,
.product-choice,
.package {
border-color: transparent;
background: var(--hairline);
}
.voucher-region:hover,
.voucher-product:hover,
.region-choice:hover,
.product-choice:hover,
.package:hover {
border-color: var(--accent-border-soft);
}
[aria-pressed="true"].voucher-region,
[aria-pressed="true"].voucher-product,
[aria-pressed="true"].region-choice,
[aria-pressed="true"].product-choice,
[aria-pressed="true"].package {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
}
.identity-hero {
padding: 16px 0 8px;
border: 0;
}
.identity-hero h1 {
font-size: clamp(28px, 3vw, 38px);
}
.identity-entry-grid {
width: min(100%, 500px);
}
.identity-panel,
.profile-overview,
.profile-section {
border-color: var(--edge);
background: var(--panel);
}
.identity-panel-head {
min-height: 58px;
border-bottom-color: var(--edge);
background: transparent;
}
.identity-panel-head h2 {
font-size: 22px;
}
.identity-panel-body {
padding: 18px 20px 20px;
}
.identity-entry-copy {
margin-bottom: 12px;
}
.login-method {
min-height: 54px;
border-color: transparent;
background: var(--hairline);
}
.login-method:hover,
.login-method:focus-visible {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
}
.profile-overview-main,
.profile-stat-grid,
.profile-progress-block,
.profile-section-head {
border-color: var(--edge);
}
.profile-stat {
background: var(--hairline);
}
.rank-grid {
border-color: var(--edge);
background: var(--panel);
}
.rank-card {
border-color: var(--edge);
}
.site-footer {
margin-top: 20px;
border-top-color: var(--edge);
color: var(--ink-tertiary);
}
.footer-links a:hover,
.footer-legal a:hover {
color: var(--ink);
}
@media (max-width: 1024px) {
.service-launchpad {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.service-launchpad .launch-service:nth-child(n+8) {
display: none;
}
.catalog-grid.game-logo-grid {
grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
}
}
@media (max-width: 780px) {
body {
font-size: 14px;
}
.container,
.store-hero .container,
.payment-result-page .container {
width: min(calc(100% - 20px), var(--max));
}
.page {
padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
.header-main {
height: 64px;
grid-template-columns: auto minmax(0, 1fr) 44px;
gap: 8px;
}
.site-search input {
height: 44px;
padding-right: 44px;
}
.site-search kbd {
display: none;
}
.header-nav {
display: none;
}
.store-hero {
padding-top: 10px;
}
.service-launchpad {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2px;
margin: 6px 0 8px;
padding: 0;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
min-height: 76px;
height: 76px;
grid-template-rows: 42px 26px;
border-radius: 12px;
padding: 4px 2px;
}
.service-launchpad .launch-service:nth-child(n+6):not(.launch-all-services) {
display: none;
}
.service-launchpad .launch-all-services {
display: grid;
}
.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon {
width: 42px;
height: 42px;
}
.service-launchpad .launch-service b,
.service-launchpad .launch-all-services b {
font-size: 10.5px;
}
.home-order-layout.compact-action,
.home-order-layout[data-home-panel="telegram"] {
border-radius: 16px;
}
.home-order-layout.compact-action .home-order-card,
.home-order-layout[data-home-panel="telegram"] .home-order-card {
padding: 12px 12px 2px;
}
.home-order-layout.compact-action .home-order-fields {
grid-template-columns: minmax(0, 1fr) minmax(102px, 34%);
gap: 8px;
padding-top: 0;
}
.home-order-layout.compact-action .home-order-fields .field label {
min-height: 32px;
margin-bottom: 3px;
}
.home-order-layout.compact-action .input-wrap input,
.telegram-home-fields .stars-quantity-input {
height: 50px;
}
.home-order-layout.compact-action .home-presets {
grid-column: 1 / -1;
}
.home-order-layout.compact-action .quick-row {
gap: 5px;
}
.home-order-layout.compact-action .quick {
min-height: 44px;
font-size: 11px;
}
.home-order-layout.compact-action .action-only,
.home-order-layout[data-home-panel="telegram"] .action-only {
padding: 8px 12px 12px;
}
.home-showcase {
margin-top: 16px;
}
.home-showcase-head h2 {
font-size: clamp(21px, 6vw, 25px);
}
.home-showcase-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.home-showcase-card {
min-height: 84px;
grid-template-columns: 56px minmax(0, 1fr);
}
.home-showcase-art {
min-height: 84px;
}
.home-showcase-copy {
padding: 8px;
}
.home-showcase-copy em {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.telegram-page .section.compact,
.games-page .section.compact,
.services-page .section.compact {
padding-top: 10px;
}
.telegram-product-switch {
gap: 6px;
}
.telegram-product-card {
min-height: 64px;
grid-template-columns: 38px minmax(0, 1fr);
padding: 8px;
}
.telegram-product-card > img {
width: 38px;
height: 38px;
padding: 7px;
}
.telegram-product-card b {
font-size: 12px;
}
.telegram-product-card em {
display: none;
}
.telegram-page .workspace-main {
gap: 12px;
padding: 12px;
}
.telegram-page .stars-presets {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
}
.premium-package-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.premium-package-grid .telegram-package {
min-height: 70px;
padding: 9px 7px;
}
.catalog-tools {
grid-template-columns: minmax(0, 1fr);
}
.catalog-tools select {
display: block;
width: 100%;
}
.catalog-category-tabs {
width: calc(100% + 20px);
max-width: calc(100% + 20px);
margin-inline: -10px;
overflow-x: auto;
padding: 0 24px 6px 10px;
scroll-padding-inline: 10px;
scroll-snap-type: x proximity;
scrollbar-width: none;
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.catalog-category-tabs::-webkit-scrollbar {
display: none;
}
.catalog-category-tabs .filter {
flex: 0 0 auto;
scroll-snap-align: start;
}
.catalog-grid.game-logo-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px 8px;
}
.services-page .voucher-service-switch {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 15px 8px;
}
.services-page .voucher-service-card {
min-height: 96px;
}
.services-page .voucher-service-card > span {
width: 60px;
height: 60px;
}
.voucher-layout,
.game-configurator {
grid-template-columns: minmax(0, 1fr);
}
.voucher-summary,
.game-configurator-side {
position: static;
}
.voucher-main,
.game-checkout-panel,
.identity-panel,
.profile-overview,
.profile-section {
border-radius: 16px;
}
.identity-hero {
display: none;
}
.identity-grid {
gap: 10px;
}
.identity-panel-head {
min-height: 54px;
justify-content: center;
padding-inline: 16px;
}
.identity-panel-body {
padding: 14px;
}
.identity-entry-copy {
text-align: center;
}
.rank-board {
padding-top: 12px;
}
.rank-board-head {
justify-content: flex-start;
}
.rank-board-head h2 {
font-size: 24px;
text-align: left;
}
.site-footer {
margin-top: 10px;
padding-bottom: 8px;
}
.footer-main {
min-height: 0;
padding-block: 10px;
}
}
@media (max-width: 360px) {
.container,
.store-hero .container,
.payment-result-page .container {
width: min(calc(100% - 16px), var(--max));
}
.home-order-layout.compact-action .home-order-fields {
grid-template-columns: minmax(0, 1fr) 92px;
}
.home-order-layout.compact-action .quick {
font-size: 10px;
}
.home-showcase-card {
grid-template-columns: 50px minmax(0, 1fr);
}
.home-showcase-copy b {
font-size: 11px;
}
.home-showcase-copy em {
display: none;
}
.catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media (min-width: 1025px) {
.service-launchpad {
grid-template-columns: repeat(10, minmax(0, 1fr));
}}
@media (max-width: 360px) {
.catalog-category-tabs {
width: calc(100% + 16px);
max-width: calc(100% + 16px);
margin-inline: -8px;
padding-inline: 8px;
}
}
.home-showcase-head h2 {
font-size: clamp(22px, 3vw, 34px);
}
.home-showcase-head > a {
min-height: 44px;
align-self: end;
display: inline-flex;
align-items: center;
}
input,
select,
textarea,
button,
[role="button"],
[role="tab"],
[role="option"] {
scroll-margin-block: 90px;
}
@media (max-width: 780px) {
body {
padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
.page {
padding-bottom: 12px;
}
.home-showcase-head h2 {
font-size: clamp(20px, 6vw, 24px);
line-height: 1;
}
.site-footer {
padding-bottom: 8px;
}
}
.brandbook-page {
--brandbook-rule: var(--accent-border-soft);
}
.brandbook-page .page {
overflow: clip;
}
.brandbook-hero {
position: relative;
border-bottom: 1px solid var(--line);
padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 7vw, 88px);
}
.brandbook-hero::before {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 78% 32%, var(--accent-wash), transparent 28%),
linear-gradient(115deg, transparent 0 59%, var(--hairline) 59% 60%, transparent 60%);
content: "";
}
.brandbook-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
align-items: center;
gap: clamp(40px, 8vw, 112px);
}
.brandbook-kicker,
.brandbook-section-head > span,
.brandbook-component-label,
.brandbook-download span {
color: var(--gold-text);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.brandbook-intro h1 {
max-width: 780px;
margin: 20px 0 0;
font-size: clamp(42px, 6vw, 82px);
line-height: .98;
}
.brandbook-intro h1 span {
color: var(--gold-text);
}
.brandbook-intro > p {
max-width: 610px;
margin: 24px 0 0;
color: var(--text-secondary);
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.7;
}
.brandbook-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.brandbook-signal {
position: relative;
min-height: 390px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
border: 1px solid var(--brandbook-rule);
border-radius: var(--radius-panel);
padding: clamp(24px, 4vw, 48px);
background: var(--bg);
}
.brandbook-signal::before,
.brandbook-signal::after {
position: absolute;
border: 1px solid var(--accent-wash-strong);
border-radius: 50%;
content: "";
}
.brandbook-signal::before {
width: 310px;
height: 310px;
top: -120px;
right: -80px;
}
.brandbook-signal::after {
width: 160px;
height: 160px;
top: -45px;
right: -5px;
}
.brandbook-lockup {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 18px;
}
.brandbook-lockup img {
width: clamp(58px, 6vw, 88px);
height: auto;
}
.brandbook-lockup strong {
font: 700 clamp(30px, 4vw, 52px)/1 var(--display);
}
.brandbook-lockup.large img {
width: clamp(68px, 8vw, 108px);
}
.brandbook-lockup.large strong {
font-size: clamp(36px, 6vw, 74px);
}
.brandbook-signal-line {
position: relative;
display: grid;
grid-template-columns: 1fr 2fr 4fr 2fr 1fr;
align-items: center;
gap: 6px;
}
.brandbook-signal-line::after {
position: absolute;
inset: 50% 0 auto;
height: 1px;
background: var(--accent-wash-strong);
content: "";
}
.brandbook-signal-line i {
z-index: 1;
height: 4px;
border-radius: 999px;
background: var(--gold-fill);
}
.brandbook-signal-line i:nth-child(2),
.brandbook-signal-line i:nth-child(4) {
opacity: .62;
}
.brandbook-signal-line i:first-child,
.brandbook-signal-line i:last-child {
opacity: .28;
}
.brandbook-signal-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
color: var(--text-tertiary);
font-size: 12px;
font-weight: 700;
}
.brandbook-index {
position: sticky;
top: 126px;
z-index: 20;
border-bottom: 1px solid var(--line);
background: rgba(20, 22, 25, .88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.brandbook-index .container {
display: flex;
overflow-x: auto;
gap: 4px;
padding-block: 8px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.brandbook-index .container::-webkit-scrollbar {
display: none;
}
.brandbook-index a {
min-height: 44px;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
border-radius: var(--radius-input);
padding: 0 14px;
color: var(--text-secondary);
font-size: 13px;
font-weight: 700;
scroll-snap-align: start;
}
.brandbook-index a:hover {
background: var(--accent-wash);
color: var(--text-primary);
}
.brandbook-section {
padding: clamp(64px, 8vw, 112px) 0;
border-bottom: 1px solid var(--line);
scroll-margin-top: 190px;
}
.brandbook-section-head {
display: grid;
grid-template-columns: minmax(240px, .72fr) minmax(280px, 1fr);
gap: 12px clamp(32px, 6vw, 96px);
margin-bottom: clamp(32px, 5vw, 64px);
}
.brandbook-section-head > span {
grid-column: 1 / -1;
}
.brandbook-section-head h2 {
margin: 0;
font-size: clamp(30px, 4.5vw, 58px);
line-height: 1;
}
.brandbook-section-head p {
max-width: 620px;
margin: 0;
color: var(--text-secondary);
font-size: 16px;
line-height: 1.7;
}
.brandbook-principles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-block: 1px solid var(--line);
}
.brandbook-principles article {
min-height: 190px;
padding: 28px 24px;
border-right: 1px solid var(--line);
}
.brandbook-principles article:last-child {
border-right: 0;
}
.brandbook-principles b {
font: 600 20px/1.2 var(--display);
}
.brandbook-principles p {
margin: 22px 0 0;
color: var(--text-secondary);
font-size: 14px;
}
.brandbook-do-dont {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 24px;
}
.brandbook-rule {
border-radius: var(--radius-card);
padding: 22px;
background: var(--surface);
}
.brandbook-rule > span {
color: var(--text-tertiary);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.brandbook-rule.good > span {
color: var(--color-success);
}
.brandbook-rule.bad > span {
color: var(--color-error);
}
.brandbook-rule strong {
display: block;
margin-top: 12px;
font-size: 17px;
}
.brandbook-rule p {
margin: 8px 0 0;
color: var(--text-secondary);
font-size: 13px;
}
.brandbook-logo-grid {
display: grid;
grid-template-columns: 1.55fr .75fr 1fr;
gap: 12px;
}
.brandbook-logo-grid figure {
min-height: 310px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0;
overflow: hidden;
border-radius: var(--radius-panel);
padding: 28px;
background: var(--surface);
}
.brandbook-logo-stage.primary {
align-items: center;
justify-content: center;
background: var(--surface-sunken, #0e0f11);
}
.brandbook-logo-stage.mark {
align-items: center;
justify-content: center;
background: var(--gold-fill);
}
.brandbook-logo-stage.mark > img {
width: 116px;
filter: brightness(0);
}
.brandbook-logo-grid figcaption {
width: 100%;
margin-top: 24px;
color: var(--text-tertiary);
font-size: 12px;
}
.brandbook-logo-stage.primary figcaption {
position: static;
align-self: center;
width: 100%;
margin-top: 32px;
padding-inline: 24px;
text-align: center;
}
.brandbook-logo-stage.mark figcaption {
color: rgba(37, 32, 21, .68);
}
.brandbook-clearspace {
position: relative;
}
.brandbook-clearspace-mark {
position: relative;
width: 150px;
height: 150px;
display: grid;
place-items: center;
align-self: center;
border: 1px dashed var(--line-strong);
}
.brandbook-clearspace-mark img {
width: 72px;
}
.brandbook-clearspace-mark span {
position: absolute;
top: 5px;
left: 8px;
color: var(--gold-text);
font-size: 12px;
}
.brandbook-clearspace-mark i {
position: absolute;
inset: 25%;
border: 1px solid var(--accent-wash-strong);
}
.brandbook-usage-list,
.brandbook-type-rules {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.brandbook-usage-list p,
.brandbook-type-rules p {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
}
.brandbook-usage-list b {
color: var(--text-primary);
}
.brandbook-palette {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
overflow: hidden;
border-radius: var(--radius-panel);
}
.brandbook-palette article {
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
}
.brandbook-palette span {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.brandbook-palette strong {
margin-top: 5px;
font-size: 13px;
}
.brandbook-palette code {
margin-top: 16px;
font: 600 12px/1 var(--body);
opacity: .68;
}
.brandbook-palette .ink { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.brandbook-palette .panel { background: var(--surface); color: var(--text); }
.brandbook-palette .paper { background: var(--text); color: var(--gold-ink); }
.brandbook-palette .gold { background: var(--gold-fill); color: var(--gold-ink); }
.brandbook-palette .blue { background: #58a8ee; color: #102433; }
.brandbook-palette .green { background: #9fd39b; color: #183119; }
.brandbook-palette .red { background: #e49a8f; color: #3a1714; }
.brandbook-color-note {
display: grid;
grid-template-columns: minmax(160px, .3fr) minmax(0, 1fr);
gap: 24px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.brandbook-color-note p {
max-width: 720px;
margin: 0;
color: var(--text-secondary);
}
.brandbook-type-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-panel);
}
.brandbook-display-sample,
.brandbook-body-sample {
min-height: 400px;
padding: clamp(24px, 4vw, 48px);
}
.brandbook-display-sample {
border-right: 1px solid var(--line);
background: var(--bg);
}
.brandbook-display-sample > span,
.brandbook-body-sample > span {
color: var(--text-tertiary);
font-size: 12px;
font-weight: 700;
}
.brandbook-display-sample strong {
display: block;
margin-top: 74px;
font: 700 clamp(38px, 5vw, 72px)/.98 var(--display);
}
.brandbook-display-sample p,
.brandbook-body-sample p {
margin: 24px 0 0;
color: var(--text-secondary);
}
.brandbook-body-sample strong {
display: block;
margin-top: 74px;
font-size: clamp(28px, 3.8vw, 50px);
line-height: 1.15;
}
.brandbook-type-scale {
display: flex;
align-items: end;
gap: 12px;
margin-top: 42px;
}
.brandbook-type-scale i {
display: grid;
width: 54px;
place-items: end center;
border-bottom: 2px solid var(--gold);
color: var(--text-tertiary);
font-size: 12px;
font-style: normal;
}
.brandbook-type-scale i:nth-child(1) { height: 24px; }
.brandbook-type-scale i:nth-child(2) { height: 34px; }
.brandbook-type-scale i:nth-child(3) { height: 46px; }
.brandbook-type-scale i:nth-child(4) { height: 70px; }
.brandbook-type-scale i:nth-child(5) { height: 106px; }
.brandbook-ui-stage {
display: grid;
grid-template-columns: 1fr 1.25fr .85fr;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-panel);
background: var(--surface);
}
.brandbook-component {
min-width: 0;
padding: 28px;
border-right: 1px solid var(--line);
}
.brandbook-component:last-child {
border-right: 0;
}
.brandbook-component-label {
display: block;
margin-bottom: 24px;
}
.brandbook-button-row {
display: grid;
gap: 8px;
}
.brandbook-field {
display: grid;
gap: 8px;
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
}
.brandbook-field .input-wrap input {
width: 100%;
}
.brandbook-field .input-wrap b {
position: absolute;
right: 16px;
top: 50%;
color: var(--gold-text);
transform: translateY(-50%);
}
.brandbook-choice-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: 12px;
}
.brandbook-choice-row button {
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: transparent;
color: var(--text-secondary);
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.brandbook-choice-row button.selected {
border-color: var(--gold);
background: var(--accent-wash);
color: var(--gold-text);
box-shadow: inset 0 0 0 1px var(--accent-wash-strong);
}
.brandbook-status-row {
display: grid;
gap: 8px;
}
.brandbook-status-row span {
min-height: 44px;
display: flex;
align-items: center;
gap: 8px;
border-radius: var(--radius-input);
padding: 0 12px;
background: var(--hairline);
font-size: 12px;
font-weight: 800;
}
.brandbook-status-row span::before {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
content: "";
}
.brandbook-status-row .ready { color: var(--color-success); }
.brandbook-status-row .pending { color: var(--gold-text); }
.brandbook-status-row .error { color: var(--color-error); }
.brandbook-measure {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
align-items: end;
gap: 8px;
margin-top: 32px;
}
.brandbook-measure span {
min-width: 0;
display: grid;
place-items: end center;
border-bottom: 3px solid var(--gold);
color: var(--text-tertiary);
font-size: 12px;
}
.brandbook-measure span:nth-child(1) { height: 20px; }
.brandbook-measure span:nth-child(2) { height: 28px; }
.brandbook-measure span:nth-child(3) { height: 36px; }
.brandbook-measure span:nth-child(4) { height: 44px; }
.brandbook-measure span:nth-child(5) { height: 52px; }
.brandbook-measure span:nth-child(6) { height: 60px; }
.brandbook-measure span:nth-child(7) { height: 76px; }
.brandbook-measure span:nth-child(8) { height: 92px; }
.brandbook-caption {
margin: 14px 0 0;
color: var(--text-tertiary);
font-size: 12px;
}
.brandbook-imagery-grid {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
gap: 12px;
}
.brandbook-imagery-grid figure {
margin: 0;
overflow: hidden;
border-radius: var(--radius-panel);
background: var(--surface);
}
.brandbook-banner-sample img {
width: 100%;
aspect-ratio: 5 / 1;
object-fit: cover;
}
.brandbook-imagery-grid figcaption {
padding: 16px 20px;
color: var(--text-secondary);
font-size: 12px;
}
.brandbook-icon-sample {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.brandbook-icon-sample > div {
display: grid;
grid-template-columns: repeat(2, 72px);
justify-content: center;
gap: 18px;
padding: 40px 20px 20px;
}
.brandbook-icon-sample img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 18px;
padding: 12px;
background: var(--surface-2);
}
.brandbook-icon-sample img:last-child {
padding: 0;
}
.brandbook-copy-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-block: 1px solid var(--line);
}
.brandbook-copy-grid article {
min-height: 190px;
padding: 24px;
border-right: 1px solid var(--line);
}
.brandbook-copy-grid article:last-child {
border-right: 0;
}
.brandbook-copy-grid span {
color: var(--text-tertiary);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.brandbook-copy-grid b {
display: block;
margin-top: 22px;
font-size: 16px;
}
.brandbook-copy-grid p {
margin: 8px 0 0;
color: var(--text-secondary);
font-size: 13px;
}
.brandbook-language-rule {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 24px;
color: var(--text-secondary);
font-size: 13px;
}
.brandbook-language-rule strong {
color: var(--color-error);
}
.brandbook-access-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.brandbook-access-grid article {
min-height: 190px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: var(--radius-card);
padding: 24px;
background: var(--surface);
}
.brandbook-access-grid strong {
color: var(--gold-text);
font: 600 clamp(28px, 3.5vw, 46px)/1 var(--display);
}
.brandbook-access-grid p {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
}
.brandbook-checklist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 32px;
margin: 32px 0 0;
padding: 0;
list-style: none;
}
.brandbook-checklist li {
position: relative;
min-height: 44px;
display: flex;
align-items: center;
padding-left: 28px;
color: var(--text-secondary);
font-size: 14px;
}
.brandbook-checklist li::before {
position: absolute;
left: 0;
width: 14px;
height: 14px;
border: 1px solid var(--gold);
border-radius: 50%;
content: "";
}
.brandbook-download {
padding: clamp(56px, 7vw, 88px) 0;
}
.brandbook-download .container {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 32px;
border-radius: var(--radius-panel);
padding: clamp(28px, 5vw, 56px);
background: var(--gold-fill);
color: var(--gold-ink);
}
.brandbook-download h2 {
max-width: 760px;
margin: 16px 0 0;
font-size: clamp(28px, 4vw, 48px);
}
.brandbook-download p {
max-width: 680px;
margin: 16px 0 0;
color: rgba(37, 32, 21, .72);
}
.brandbook-download span {
color: rgba(37, 32, 21, .66);
}
.brandbook-download .brandbook-actions {
justify-content: flex-end;
margin-top: 0;
}
.brandbook-download .button {
background: var(--gold-ink);
color: var(--gold-text);
}
.brandbook-download .button.secondary {
border-color: rgba(37, 32, 21, .3);
background: transparent;
color: var(--gold-ink);
}
@media (max-width: 1024px) {
.brandbook-index {
top: 72px;
}
.brandbook-hero-grid {
grid-template-columns: minmax(0, 1fr);
}
.brandbook-signal {
min-height: 320px;
}
.brandbook-palette {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.brandbook-palette article {
min-height: 190px;
}
.brandbook-ui-stage {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brandbook-component:last-child {
grid-column: 1 / -1;
border-top: 1px solid var(--line);
}
.brandbook-status-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.brandbook-imagery-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 780px) {
.brandbook-hero {
padding: 40px 0 44px;
}
.brandbook-intro h1 {
font-size: clamp(34px, 11vw, 52px);
}
.brandbook-intro > p {
margin-top: 18px;
font-size: 15px;
}
.brandbook-signal {
min-height: 250px;
padding: 24px;
}
.brandbook-signal::before {
width: 220px;
height: 220px;
}
.brandbook-signal::after {
width: 110px;
height: 110px;
}
.brandbook-lockup {
gap: 12px;
}
.brandbook-index {
top: 64px;
}
.brandbook-index .container {
width: 100%;
padding-inline: 12px 28px;
scroll-padding-inline: 12px;
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.brandbook-section {
padding: 56px 0;
scroll-margin-top: 128px;
}
.brandbook-section-head {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin-bottom: 28px;
}
.brandbook-section-head h2 {
font-size: clamp(28px, 9vw, 40px);
}
.brandbook-section-head p {
margin-top: 6px;
font-size: 14px;
}
.brandbook-principles,
.brandbook-copy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brandbook-principles article,
.brandbook-copy-grid article {
min-height: 170px;
padding: 20px 16px;
border-bottom: 1px solid var(--line);
}
.brandbook-principles article:nth-child(2n),
.brandbook-copy-grid article:nth-child(2n) {
border-right: 0;
}
.brandbook-principles article:nth-last-child(-n+2),
.brandbook-copy-grid article:nth-last-child(-n+2) {
border-bottom: 0;
}
.brandbook-do-dont,
.brandbook-logo-grid,
.brandbook-type-grid,
.brandbook-ui-stage,
.brandbook-access-grid {
grid-template-columns: minmax(0, 1fr);
}
.brandbook-logo-grid figure {
min-height: 250px;
}
.brandbook-logo-stage.primary figcaption {
position: static;
align-self: center;
margin-top: 32px;
text-align: center;
}
.brandbook-usage-list,
.brandbook-type-rules,
.brandbook-checklist {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.brandbook-palette {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brandbook-palette article {
min-height: 150px;
}
.brandbook-palette article:last-child {
grid-column: 1 / -1;
}
.brandbook-color-note {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.brandbook-display-sample,
.brandbook-body-sample {
min-height: 320px;
padding: 24px;
}
.brandbook-display-sample {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.brandbook-display-sample strong,
.brandbook-body-sample strong {
margin-top: 48px;
}
.brandbook-component {
padding: 22px 18px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.brandbook-component:last-child {
grid-column: auto;
border-top: 0;
border-bottom: 0;
}
.brandbook-status-row {
grid-template-columns: minmax(0, 1fr);
}
.brandbook-measure {
gap: 4px;
}
.brandbook-imagery-grid figcaption {
padding: 14px 16px;
}
.brandbook-banner-sample img {
aspect-ratio: 2.2 / 1;
}
.brandbook-access-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brandbook-access-grid article {
min-height: 150px;
padding: 18px;
}
.brandbook-download .container {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.brandbook-download .brandbook-actions {
justify-content: flex-start;
}
}
@media (max-width: 380px) {
.brandbook-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.brandbook-principles,
.brandbook-copy-grid {
grid-template-columns: minmax(0, 1fr);
}
.brandbook-principles article,
.brandbook-copy-grid article,
.brandbook-principles article:nth-last-child(-n+2),
.brandbook-copy-grid article:nth-last-child(-n+2) {
min-height: 0;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.brandbook-principles article:last-child,
.brandbook-copy-grid article:last-child {
border-bottom: 0;
}
.brandbook-access-grid {
grid-template-columns: minmax(0, 1fr);
}
.brandbook-access-grid article {
min-height: 130px;
}
}
:root {
--ui-radius-control: var(--radius-input);
--ui-radius-card: var(--radius-card);
}
html,
body {
background-color: var(--ui-bg);
}
.page,
.store-hero,
.section,
.section.compact {
min-width: 0;
}
.service-launchpad {
align-items: stretch;
border: 0;
background: transparent;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
position: relative;
border-radius: 14px;
background: transparent;
}
.service-launchpad .launch-service.selected {
background: var(--accent-wash);
box-shadow: none;
}
.service-launchpad .launch-service.selected::after {
position: absolute;
right: 26%;
bottom: 0;
left: 26%;
height: 2px;
border-radius: 999px;
background: var(--ui-gold);
content: "";
}
.service-launchpad .launch-icon,
.service-launchpad .launch-all-services .launch-icon,
.service-launchpad .launch-service.selected .launch-icon {
border: 0;
background: var(--surface-2);
}
.home-order-layout.compact-action,
.home-order-layout[data-home-panel="telegram"],
.telegram-page .telegram-workspace,
.voucher-main,
.game-checkout-panel,
.identity-panel,
.profile-overview,
.profile-section {
border-color: var(--ui-line);
border-radius: var(--ui-radius-panel);
background: var(--ui-surface);
}
.home-order-layout.compact-action .home-order-card,
.home-order-layout[data-home-panel="telegram"] .home-order-card,
.telegram-page .workspace-main {
background: transparent;
}
.input-wrap,
.stars-quantity-input,
.choice-search,
.catalog-search,
.catalog-tools select {
border-color: transparent;
border-radius: var(--ui-radius-control);
background: var(--ui-control);
}
.home-order-layout.compact-action .input-wrap input,
.telegram-home-fields .input-wrap input,
.telegram-page .input-wrap input,
.telegram-home-fields .stars-quantity-input,
.telegram-page .stars-quantity-input {
height: 52px;
min-height: 52px;
}
.telegram-home-fields .stars-quantity-input,
.telegram-page .stars-quantity-input {
grid-template-columns: minmax(0, 1fr) 36px;
gap: 8px;
padding: 5px 8px 5px 14px;
}
.telegram-home-fields .stars-quantity-input input,
.telegram-page .stars-quantity-input input {
height: 42px;
min-height: 42px;
font-size: 24px;
line-height: 1;
}
.stars-quantity-input .stars-unit {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--accent-wash);
}
.stars-quantity-input .stars-unit img {
width: 22px;
height: 22px;
}
.telegram-home-fields .stars-presets,
.telegram-page .stars-presets {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.telegram-home-fields .stars-presets button,
.telegram-page .stars-presets button,
.home-order-layout.compact-action .quick {
min-width: 0;
min-height: 44px;
border: 1px solid transparent;
border-radius: 12px;
background: var(--hairline);
}
.telegram-product-switch {
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 0;
border-radius: 0;
background: transparent;
}
.telegram-product-card {
border: 0;
background: var(--ui-surface);
}
.telegram-product-card[aria-selected="true"] {
border: 0;
background: var(--accent-wash);
box-shadow: none;
}
.telegram-product-card > img {
background: var(--surface-2);
}
.premium-package-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.premium-package-grid .telegram-package {
min-height: 68px;
border: 1px solid transparent;
border-radius: 12px;
}
.catalog-tools,
.catalog-category-tabs,
.voucher-service-switch {
min-width: 0;
}
.catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
align-items: start;
}
.game-logo-card > span,
.voucher-service-card > span {
border: 0;
background: var(--surface-2);
}
.site-footer {
border-top-color: var(--ui-line);
background: transparent;
}
.brandbook-page .page,
.brand-page {
padding-top: 0;
}
.brand-hero {
padding: clamp(52px, 8vw, 104px) 0 48px;
border-bottom: 1px solid var(--ui-line);
background:
radial-gradient(circle at 75% 24%, var(--accent-wash-strong), transparent 34%),
linear-gradient(180deg, var(--surface-2), var(--ui-bg));
}
.brand-hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
align-items: center;
gap: 48px;
}
.brand-kicker,
.brand-section-head > span {
color: var(--gold-text);
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.brand-hero h1 {
margin: 14px 0 16px;
font-size: clamp(38px, 6vw, 76px);
line-height: .98;
}
.brand-hero p {
margin: 0;
color: var(--ui-muted);
font-size: clamp(15px, 1.5vw, 19px);
}
.brand-lockup {
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
border: 1px solid var(--ui-line);
border-radius: 24px;
background: var(--hairline);
}
.brand-lockup img {
width: 104px;
}
.brand-lockup strong {
font-family: var(--display);
font-size: clamp(28px, 4vw, 48px);
}
.brand-section {
padding: 56px 0;
border-bottom: 1px solid var(--ui-line);
}
.brand-section-head {
margin-bottom: 22px;
}
.brand-section-head h2 {
margin: 7px 0 0;
font-size: clamp(26px, 3.5vw, 40px);
}
.brand-assets {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: 12px;
}
.brand-asset {
min-width: 0;
display: grid;
grid-template-columns: 82px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
border: 1px solid var(--ui-line);
border-radius: var(--ui-radius-panel);
padding: 16px;
background: var(--ui-surface);
}
.brand-asset > img {
width: 82px;
height: 62px;
object-fit: contain;
border-radius: 12px;
}
.brand-asset-og > img {
background: #090b09;
}
.brand-asset div {
min-width: 0;
display: grid;
gap: 3px;
}
.brand-asset small {
color: var(--ui-muted);
}
.brand-colors {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.brand-colors article {
min-width: 0;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 4px 12px;
border-radius: var(--ui-radius-card);
padding: 12px;
background: var(--ui-surface);
}
.brand-colors i {
width: 44px;
height: 44px;
grid-row: 1 / 3;
border: 1px solid var(--ui-line);
border-radius: 50%;
background: var(--swatch);
}
.brand-colors code {
color: var(--ui-muted);
font-size: 11px;
}
.brand-guide-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.brand-guide-grid > div {
border-radius: var(--ui-radius-panel);
padding: 24px;
background: var(--ui-surface);
}
.brand-type {
display: grid;
gap: 5px;
}
.brand-type strong {
margin-top: 10px;
font-family: var(--display);
font-size: 26px;
}
.brand-type .body-font {
font-family: var(--body);
}
.brand-type p {
margin: 0;
color: var(--ui-muted);
}
.brand-rules {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.brand-rules li {
display: grid;
gap: 3px;
padding: 13px 0;
border-top: 1px solid var(--ui-line);
}
.brand-rules span {
color: var(--ui-muted);
}
@media (max-width: 780px) {
.header-nav {
position: fixed;
inset: 0;
z-index: 190;
display: block !important;
visibility: hidden;
overflow: hidden;
pointer-events: none;
background: rgba(3, 4, 3, .62);
opacity: 0;
transition: opacity .18s ease, visibility .18s ease;
}
.header-nav.open {
visibility: visible;
pointer-events: auto;
opacity: 1;
}
.mobile-menu-panel {
position: absolute;
inset: 0 0 0 auto;
width: min(88vw, 390px);
height: 100dvh;
display: flex !important;
flex-direction: column;
overflow-y: auto;
transform: translateX(100%);
border-left: 1px solid var(--ui-line);
background: var(--surface-2);
padding: max(14px, env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
transition: transform .22s cubic-bezier(.2, .75, .25, 1);
}
.header-nav.open .mobile-menu-panel {
transform: translateX(0);
}
.menu-button {
display: grid !important;
}
.mobile-menu-head .brand {
width: auto;
justify-content: flex-start;
}
.service-launchpad {
margin-block: 4px 8px;
}
.service-launchpad .launch-service,
.service-launchpad .launch-all-services {
min-height: 72px;
height: 72px;
}
.home-order-layout.compact-action .home-order-card,
.home-order-layout[data-home-panel="telegram"] .home-order-card,
.telegram-page .workspace-main {
padding: 12px 12px 2px;
}
.home-order-layout.compact-action .action-only,
.home-order-layout[data-home-panel="telegram"] .action-only,
.telegram-page .telegram-summary {
padding: 8px 12px 12px;
}
.telegram-product-switch {
margin-bottom: 8px;
}
.telegram-product-card {
min-height: 58px;
grid-template-columns: 36px minmax(0, 1fr);
padding: 7px 9px;
}
.telegram-product-card > img {
width: 36px;
height: 36px;
}
.telegram-page .stars-quantity-input,
.telegram-home-fields .stars-quantity-input {
height: 50px;
min-height: 50px;
}
.telegram-page .stars-quantity-input input,
.telegram-home-fields .stars-quantity-input input {
height: 44px;
min-height: 44px;
font-size: 23px;
}
.telegram-page .stars-presets,
.telegram-home-fields .stars-presets {
gap: 5px;
}
.premium-package-grid .telegram-package {
min-height: 64px;
padding: 9px;
}
.brand-hero {
padding: 36px 0 28px;
}
.brand-hero-inner,
.brand-guide-grid {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.brand-lockup {
min-height: 150px;
}
.brand-lockup img {
width: 72px;
}
.brand-section {
padding: 36px 0;
}
.brand-assets {
grid-template-columns: minmax(0, 1fr);
}
.brand-asset {
grid-template-columns: 64px minmax(0, 1fr);
}
.brand-asset > img {
width: 64px;
height: 54px;
}
.brand-asset .button {
grid-column: 1 / -1;
}
.brand-colors {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brand-guide-grid > div {
padding: 18px;
}
}
@media (max-width: 360px) {
.telegram-home-fields .stars-presets,
.telegram-page .stars-presets {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.brand-colors {
grid-template-columns: minmax(0, 1fr);
}
}
html {
scrollbar-color: var(--accent-border-soft) var(--hairline);
scrollbar-width: thin;
}
* {
scrollbar-color: var(--accent-border-soft) var(--hairline);
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
border-radius: 999px;
background: var(--hairline);
}
*::-webkit-scrollbar-thumb {
min-height: 42px;
border: 2px solid transparent;
border-radius: 999px;
background: var(--accent-border-soft);
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-border-soft);
}
*::-webkit-scrollbar-corner {
background: transparent;
}
.games-page .game-configurator-main,
.services-page .voucher-main {
scrollbar-gutter: stable;
}
@media (min-width: 781px) {
.games-page .game-configurator {
width: min(780px, 100%);
grid-template-columns: minmax(0, 1fr);
}
.games-page .game-configurator-visual {
display: none;
}
.games-page .game-configurator-main {
width: 100%;
}
}
[data-theme="light"] body,
[data-theme="light"] .page,
[data-theme="light"] .store-hero,
[data-theme="light"] .section {
color: var(--ui-text);
}
[data-theme="light"] .home-order-layout.compact-action,
[data-theme="light"] .home-order-layout[data-home-panel="telegram"],
[data-theme="light"] .telegram-page .telegram-workspace,
[data-theme="light"] .voucher-main,
[data-theme="light"] .game-checkout-panel,
[data-theme="light"] .identity-panel,
[data-theme="light"] .profile-overview,
[data-theme="light"] .profile-section,
[data-theme="light"] .brand-asset,
[data-theme="light"] .brand-colors article,
[data-theme="light"] .brand-guide-grid > div {
background: var(--ui-surface);
}
[data-theme="light"] .service-launchpad .launch-icon,
[data-theme="light"] .service-launchpad .launch-all-services .launch-icon,
[data-theme="light"] .service-launchpad .launch-service.selected .launch-icon,
[data-theme="light"] .telegram-product-card > img,
[data-theme="light"] .game-logo-card > span,
[data-theme="light"] .voucher-service-card > span {
background: var(--surface-2);
}
[data-theme="light"] .input-wrap,
[data-theme="light"] .stars-quantity-input,
[data-theme="light"] .choice-search,
[data-theme="light"] .catalog-search,
[data-theme="light"] .catalog-tools select {
background: var(--ui-control);
}
[data-theme="light"] .telegram-home-fields .stars-presets button,
[data-theme="light"] .telegram-page .stars-presets button,
[data-theme="light"] .home-order-layout.compact-action .quick {
background: rgba(25, 26, 23, .045);
}
[data-theme="light"] .mobile-menu-panel {
background: var(--surface);
}
[data-theme="light"] .icon-button {
border-color: var(--edge);
background: var(--surface);
color: var(--ink);
}
[data-theme="light"] .site-search input {
border-color: var(--edge);
background: var(--surface);
color: var(--ink);
}
[data-theme="light"] .service-launchpad .launch-service b,
[data-theme="light"] .service-launchpad .launch-all-services b,
[data-theme="light"] .field label,
[data-theme="light"] .home-showcase-copy b {
color: var(--ink-secondary);
opacity: 1;
}
[data-theme="light"] .service-launchpad .launch-service.selected b,
[data-theme="light"] .home-showcase-copy small {
color: var(--gold-text);
}
[data-theme="light"] .home-showcase-copy em,
[data-theme="light"] .helper,
[data-theme="light"] .stars-range {
color: var(--ink-tertiary);
opacity: 1;
}
[data-theme="light"] .brand-hero {
background:
radial-gradient(circle at 75% 24%, var(--intent-wash), transparent 34%),
linear-gradient(180deg, var(--surface), var(--ui-bg));
}
:root {
--motion-fast: var(--t-press);
--motion-panel: var(--t-sheet);
--motion-spring: var(--spring);
}
.games-page .game-checkout-panel:not([hidden]) .game-configurator,
.services-page .voucher-layout:not([hidden]) .voucher-main,
.services-page .voucher-layout:not([hidden]) .voucher-summary {
animation: slarp-panel-pop var(--motion-panel) var(--motion-spring) both;
}
.mobile-menu-panel {
transition:
transform var(--motion-panel) var(--motion-spring),
opacity var(--motion-fast) ease,
visibility var(--motion-fast) linear;
}
.mobile-dock {
isolation: isolate;
}
.mobile-dock-indicator {
position: absolute;
z-index: 0;
top: 6px;
bottom: 6px;
left: 0;
width: var(--dock-w, 20%);
transform: translate3d(var(--dock-x, 0), 0, 0);
border: 1px solid var(--accent-border-soft);
border-radius: 14px;
background:
linear-gradient(180deg, var(--accent-wash-strong), var(--accent-wash)),
var(--hairline);
box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
transition:
transform 280ms var(--motion-spring),
width 280ms var(--motion-spring),
border-radius 280ms var(--motion-spring);
pointer-events: none;
}
.mobile-dock-indicator.no-motion {
transition: none;
}
.mobile-dock a {
position: relative;
z-index: 1;
}
.mobile-dock a.active { background: var(--accent-wash) !important; box-shadow: none !important; }
@keyframes slarp-panel-pop {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (max-width: 780px) {
.games-page .game-checkout-panel:not([hidden]) .game-configurator,
.services-page .voucher-layout:not([hidden]) .voucher-main,
.services-page .voucher-layout:not([hidden]) .voucher-summary {
animation-name: slarp-sheet-rise;
}
@keyframes slarp-sheet-rise {
from {
opacity: .72;
transform: translate3d(0, 24px, 0) scale(.99);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
}
@media (prefers-reduced-motion: reduce) {
.games-page .game-checkout-panel:not([hidden]) .game-configurator,
.services-page .voucher-layout:not([hidden]) .voucher-main,
.services-page .voucher-layout:not([hidden]) .voucher-summary {
animation: none !important;
}
.mobile-menu-panel,
.mobile-dock-indicator {
transition: none !important;
}
}
@media (max-width: 780px) {
.services-page .voucher-summary {
grid-template-columns: minmax(88px, .55fr) minmax(160px, 1fr);
gap: 12px;
border: 0;
border-radius: 0;
background:
linear-gradient(180deg, var(--accent-wash), transparent 72%),
var(--ui-surface);
padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
box-shadow: 0 -10px 26px rgba(0, 0, 0, .12);
}
.services-page .voucher-summary .order-lines {
min-width: 0;
}
.services-page .voucher-summary .order-line:last-child {
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 2px;
border: 0;
background: transparent;
}
.services-page .voucher-summary .order-line:last-child span {
color: var(--ui-muted);
font-size: 12px;
font-weight: 650;
}
.services-page .voucher-summary .order-line:last-child b {
max-width: none;
color: var(--ui-text);
font-size: clamp(18px, 5vw, 22px);
font-variant-numeric: tabular-nums;
line-height: 1;
white-space: nowrap;
}
.services-page .voucher-summary .button {
min-height: 52px;
border: 0;
border-radius: 14px;
box-shadow: none;
}
}
[data-theme="light"] .services-page .voucher-summary {
background:
linear-gradient(180deg, rgba(140, 108, 24, .055), transparent 72%),
var(--ui-surface);
}
.services-page .voucher-service-switch {
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
align-items: start;
gap: 20px 14px;
}
.services-page .voucher-service-card,
.services-page .voucher-family-toggle {
width: 100%;
min-width: 0;
min-height: 122px;
display: grid;
grid-template-rows: 86px minmax(32px, auto);
place-items: center;
align-content: start;
gap: 9px;
border: 0;
border-radius: 18px;
background: transparent;
color: var(--ui-text);
padding: 5px;
cursor: pointer;
}
.services-page .voucher-service-card > span,
.services-page .voucher-family-toggle > span:first-child {
width: 86px;
height: 86px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--accent-wash);
border-radius: 22px;
background: var(--surface-2);
transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.services-page .voucher-service-card > span img,
.services-page .voucher-family-toggle > span:first-child img {
width: 100%;
height: 100%;
padding: 18%;
object-fit: contain;
}
.services-page .voucher-service-card > b,
.services-page .voucher-family-toggle > span:nth-child(2) {
width: 100%;
min-width: 0;
color: var(--ui-text);
font-size: 12px;
font-weight: 750;
line-height: 1.25;
text-align: center;
overflow-wrap: anywhere;
}
.services-page .voucher-family-toggle > span:nth-child(2) {
display: grid;
gap: 2px;
}
.services-page .voucher-family-toggle small {
color: var(--ui-muted);
font-size: 10px;
font-weight: 650;
}
.services-page .voucher-service-card:hover > span,
.services-page .voucher-service-card:focus-visible > span,
.services-page .voucher-family-toggle:hover > span:first-child,
.services-page .voucher-family-toggle:focus-visible > span:first-child,
.services-page .voucher-family-toggle[aria-expanded="true"] > span:first-child {
transform: translateY(-2px);
border-color: var(--accent-border-soft);
background: var(--accent-wash);
}
.services-page .voucher-service-card:focus-visible,
.services-page .voucher-family-toggle:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.services-page .voucher-family-toggle[aria-expanded="true"] > span:nth-child(2) {
color: var(--gold-text);
}
.services-page .voucher-service-family {
display: contents;
}
.services-page .voucher-family-options {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 220px));
justify-content: start;
gap: 8px;
margin: -6px 0 4px;
border: 1px solid var(--ui-line);
border-radius: 16px;
background: var(--ui-surface);
padding: 10px;
box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
}
.services-page .voucher-family-options[hidden] {
display: none;
}
.services-page .voucher-family-option {
min-height: 58px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
grid-template-rows: 1fr;
align-items: center;
justify-items: start;
gap: 10px;
border: 0;
border-radius: 12px;
background: var(--ui-control);
color: var(--ui-text);
padding: 8px 10px;
text-align: left;
}
.services-page .voucher-family-option > span {
width: 42px;
height: 42px;
border: 0;
border-radius: 11px;
background: var(--hairline);
}
.services-page .voucher-family-option > span img {
padding: 18%;
}
.services-page .voucher-family-option > b {
min-height: 0;
display: block;
font-size: 13px;
line-height: 1.25;
text-align: left;
}
.services-page .voucher-family-option:hover,
.services-page .voucher-family-option:focus-visible {
background: var(--accent-wash);
}
.store-hero,
.games-page .section.compact,
.services-page .section.compact,
.telegram-page .section.compact,
.profile-page .section.compact,
.brand-page .section.compact {
padding-top: clamp(14px, 2vw, 24px);
}
.site-footer {
margin-top: clamp(28px, 5vw, 56px);
}
@media (max-width: 780px) {
.services-page .voucher-service-switch {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px 8px;
}
.services-page .voucher-service-card,
.services-page .voucher-family-toggle {
min-height: 114px;
grid-template-rows: 76px minmax(30px, auto);
gap: 7px;
border-radius: 14px;
padding: 3px;
}
.services-page .voucher-service-card > span,
.services-page .voucher-family-toggle > span:first-child {
width: 76px;
height: 76px;
border-radius: 20px;
}
.services-page .voucher-service-card > b,
.services-page .voucher-family-toggle > span:nth-child(2) {
font-size: 11px;
}
.services-page .voucher-family-toggle small {
display: none;
}
.services-page .voucher-family-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
margin: -2px 0 2px;
padding: 8px;
}
.services-page .voucher-family-option {
min-height: 56px;
}
.store-hero,
.games-page .section.compact,
.services-page .section.compact,
.telegram-page .section.compact,
.profile-page .section.compact,
.brand-page .section.compact {
padding-top: 12px;
}
.site-footer {
margin-top: 24px;
}
}
@media (max-width: 350px) {
.services-page .voucher-service-switch {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.home-hero { margin: 2px 0 14px; }
.home-hero-panel { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--bg); }
.home-hero-art {
width: 100%;
height: clamp(210px, 34vh, 320px);
display: block;
margin-left: auto;
width: auto;
max-width: 46%;
object-fit: contain;
object-position: right center;
}
.home-hero-copy { position: absolute; left: clamp(18px, 4.5vw, 48px); top: 50%; transform: translateY(-50%); max-width: min(54%, 520px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1.2vw, 12px); }
.home-hero-copy h1 { margin: 0; color: var(--text); font-size: clamp(26px, 4.2vw, 44px); line-height: 1.0; }
.home-hero-copy p { margin: 0; color: var(--muted); font-size: clamp(12px, 1.5vw, 15px); line-height: 1.45; }
.home-hero-cta { margin-top: clamp(2px, 0.8vw, 8px); }
@media (max-width: 640px) {
.home-hero-art { height: clamp(170px, 26vh, 220px); max-width: 42%; }
.home-hero-copy { max-width: 58%; }
.home-hero-copy p { font-size: 12px; }
.home-hero-cta { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
}
.launch-icon-3d { border: 1px solid var(--line); border-radius: 23%; background: var(--surface); box-shadow: none; }
.launch-icon-3d img,
.launch-service.telegram-stars .launch-icon-3d img,
.launch-service.telegram-premium .launch-icon-3d img,
.launch-service.games .launch-icon-3d img {
width: 72%;
height: 72%;
border-radius: 0;
object-fit: contain;
}
.button, .quick { transition: transform var(--t-press) var(--spring), background-color var(--t-move) ease, border-color var(--t-move) ease; }
.button:active, .quick:active, .launch-service:active .launch-icon { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
.button, .quick, .brand-mark, .launch-icon, .mobile-dock-indicator { transition: none !important; }
}
.checkout-sheet .checkout-dismiss {
position: absolute;
z-index: 1;
inset: 0;
background: rgba(4, 5, 4, .46);
opacity: 0;
transition: opacity var(--t-sheet) ease;
}
.checkout-sheet.is-open .checkout-dismiss { opacity: 1; }
.checkout-sheet .checkout-layout {
transform: translateY(12%);
opacity: 0;
transition: transform var(--t-sheet) var(--spring), opacity var(--t-move) ease;
animation: none;
}
.checkout-sheet.is-open .checkout-layout { transform: translateY(0); opacity: 1; }
.sheet-grip {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 8px;
padding: 10px 10px 6px;
touch-action: none;
}
.sheet-grip-bar {
position: absolute;
left: 50%;
top: 7px;
width: 40px;
height: 4px;
transform: translateX(-50%);
border-radius: 5px;
background: var(--line-strong);
}
.sheet-grip-title {
grid-column: 2;
padding-top: 6px;
color: var(--text-secondary);
font-size: 13.5px;
font-weight: 600;
text-align: center;
}
.sheet-close { grid-column: 3; }
.checkout-standalone .sheet-grip { display: none; }
@media (prefers-reduced-motion: reduce) {
.checkout-sheet .checkout-layout,
.checkout-sheet .checkout-dismiss { transition: none; }
.checkout-sheet .checkout-layout { transform: none; opacity: 1; }
}
.nav-row-icon .cat-mark { width: 20px; height: 20px; display: block; }
.nav-row a .nav-row-icon.cat-steam { color: var(--gold-text); }
.nav-row a .nav-row-icon.cat-stars { color: var(--paint-plum); }
.nav-row a .nav-row-icon.cat-games { color: var(--paint-cobalt); }
.nav-row a .nav-row-icon.cat-services { color: var(--paint-patina); }
.nav-row a.active { position: relative; }
.nav-row a.active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
border-radius: 2px; background: transparent;
}
.brand-lockup-word { width: auto; height: clamp(22px, 4vw, 34px); color: var(--text); }
.brand-asset:has(.brand-asset-word) { grid-template-columns: minmax(0, 1fr) auto; }
.brand-asset-word { width: 100%; max-width: 190px; height: auto; color: var(--text); }
@media (max-width: 640px) {
.brand-asset:has(.brand-asset-word) { grid-template-columns: minmax(0, 1fr); }
.brand-asset-word { max-width: 150px; }
}
.footer-links a,
.footer-legal-links a,
.mobile-menu-legal a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.nav-row a,
.filters .filter,
.catalog-sort select,
.stars-quantity-input input { min-height: 44px; }
.catalog-sort select { min-width: 44px; }
body > main,
body > .page { flex: 1 0 auto; }
body > footer,
body > .site-footer { flex: none; }
body.sheet-open { display: block; }
.checkout-standalone .checkout-layout {
max-height: none;
overflow: visible;
border-radius: var(--radius-card);
box-shadow: none;
animation: none;
}
.checkout-standalone .checkout-main h1 { display: block; }
.help-nav a[aria-current="true"],
.help-nav a.active {
border-color: var(--accent-border-soft);
background: var(--intent-wash);
color: var(--text);
font-weight: 700;
}
.help-nav a { color: var(--text-secondary); }
.button,
.quick,
.filter,
.package,
.telegram-package,
.icon-button,
.launch-service,
.launch-icon,
.launch-icon-3d,
.home-showcase-card,
.catalog-card,
.voucher-service-card,
.voucher-product,
.voucher-region,
.product-choice,
.region-choice,
.login-method,
.mobile-menu-list a,
.mobile-dock a,
.nav-row a,
.stars-presets button,
.order-filters button,
.help-nav a,
.brand-asset .button {
transition:
transform var(--t-press) var(--spring),
background-color var(--t-move) ease,
border-color var(--t-move) ease,
color var(--t-move) ease,
box-shadow var(--t-move) ease;
}
.button:active,
.quick:active,
.filter:active,
.package:active,
.telegram-package:active,
.icon-button:active,
.stars-presets button:active,
.order-filters button:active,
.help-nav a:active,
.login-method:active,
.mobile-menu-list a:active { transform: scale(.965); }
.launch-service:active,
.voucher-service-card:active > span,
.product-choice:active,
.region-choice:active,
.voucher-product:active,
.voucher-region:active { transform: scale(.94); }
.home-showcase-card:active,
.catalog-card:active { transform: scale(.985); }
.mobile-dock a:active { transform: scale(.9); }
@media (hover: hover) {
.launch-service:hover .launch-icon,
.voucher-service-card:hover > span { transform: translateY(-2px) scale(1.04); }
.home-showcase-card:hover,
.catalog-card:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
.button, .quick, .filter, .package, .telegram-package, .icon-button,
.launch-service, .launch-icon, .launch-icon-3d, .home-showcase-card,
.catalog-card, .voucher-service-card, .voucher-product, .voucher-region,
.product-choice, .region-choice, .login-method, .mobile-menu-list a,
.mobile-dock a, .nav-row a, .stars-presets button, .order-filters button,
.help-nav a { transition: none !important; }
.button:active, .quick:active, .filter:active, .icon-button:active,
.launch-service:active .launch-icon-3d, .mobile-dock a:active,
.home-showcase-card:active, .catalog-card:active { transform: none !important; }
}
.login-method-icon-mail svg { width: 22px; height: 22px; display: block; color: var(--text-secondary); }
.login-method-icon-mail { display: grid; place-items: center; }
.site-footer { border-top: 1px solid var(--line); }
.page > .section:last-of-type,
main > section:last-of-type { border-bottom: 0; }
.mobile-dock a { border: 1px solid transparent; border-radius: 14px; background: transparent; }
.mobile-dock a.active { border-color: var(--accent-border-soft); background: var(--accent-wash); color: var(--gold-text); }
.mobile-dock a svg,
.mobile-dock a .telegram-nav-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mobile-dock a .telegram-nav-icon path { fill: none; stroke: currentColor; }
.service-launchpad.product-switch {
--tile: 68px;
--tile-pad: 13px;
display: flex;
gap: 10px;
align-items: stretch;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.service-launchpad.product-switch::-webkit-scrollbar { display: none; }
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services {
flex: 0 0 auto;
width: calc(var(--tile) + var(--tile-pad) * 2);
min-width: calc(var(--tile) + var(--tile-pad) * 2);
min-height: auto;
height: auto;
margin: 0;
display: grid;
grid-template-rows: var(--tile) auto;
justify-items: center;
align-content: center;
gap: 8px;
padding: var(--tile-pad);
border: 1px solid transparent;
border-radius: var(--radius-card);
background: transparent;
scroll-snap-align: start;
text-align: center;
}
.service-launchpad.product-switch .launch-icon,
.service-launchpad.product-switch .launch-all-services .launch-icon {
width: var(--tile);
height: var(--tile);
aspect-ratio: 1;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 22%;
background: var(--surface-2);
box-shadow: none;
overflow: hidden;
}
.service-launchpad.product-switch .launch-icon img {
width: 78%;
height: 78%;
object-fit: contain;
}
.service-launchpad.product-switch .launch-service b,
.service-launchpad.product-switch .launch-all-services b {
max-width: 100%;
min-height: 0;
height: auto;
margin: 0;
overflow: hidden;
color: var(--text-secondary);
font-family: var(--body);
font-size: 11.5px;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
text-overflow: ellipsis;
}
.service-launchpad.product-switch .launch-service small,
.service-launchpad.product-switch .launch-all-services small,
.service-launchpad.product-switch .launch-service i,
.service-launchpad.product-switch .launch-all-services i { display: none; }
.service-launchpad.product-switch .launch-service.selected,
.service-launchpad.product-switch .launch-service.active[aria-current="true"] {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
}
.service-launchpad.product-switch .launch-service.selected b { color: var(--gold-text); }
.service-launchpad.product-switch .launch-service.selected .launch-icon { border-color: var(--accent-border-soft); }
@media (min-width: 781px) {
.service-launchpad.product-switch { --tile: 64px; --tile-pad: 11px; gap: 6px; justify-content: flex-start; }
}
@media (max-height: 730px) {
.home-hero-art { height: clamp(120px, 17vh, 150px); }
.home-hero { margin: 0 0 8px; }
.home-hero-copy { gap: 5px; }
.home-hero-copy h1 { font-size: clamp(21px, 6.4vw, 28px); }
.home-hero-copy p { font-size: 11.5px; }
.service-launchpad.product-switch { --tile: 60px; --tile-pad: 10px; padding: 7px; gap: 7px; }
.home-order-card { padding: 12px; }
.home-order-fields { gap: 8px; }
}
.state-note {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
gap: 12px;
margin: 12px 0 0;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface-2);
text-align: left;
}
.state-note p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.45; }
.state-note-stop { border-inline-start: 3px solid var(--color-error); }
.state-note-success { border-inline-start: 3px solid var(--color-success); }
.state-note-art { display: grid; place-items: center; }
.state-object { width: 100%; height: auto; max-height: 62px; object-fit: contain; }
[data-theme="light"] .state-object {
filter: drop-shadow(0 6px 10px rgba(25, 25, 24, .16));
}
.identity-status:has(.state-note) { min-height: 0; font-size: inherit; }
.identity-status.error:has(.state-note),
.identity-status.ok:has(.state-note) { color: inherit; }
@media (max-width: 380px) {
.state-note { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
.state-object { max-height: 52px; }
}
.launch-icon .icon-loop {
position: absolute;
inset: 11%;
width: 78%;
height: 78%;
object-fit: contain;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-move) ease;
}
.product-switch .launch-icon { position: relative; }
.launch-icon.is-playing .icon-loop { opacity: 1; }
.launch-icon.is-playing img { opacity: 0; }
.launch-icon img { transition: opacity var(--t-move) ease; }
@media (prefers-reduced-motion: reduce) {
.launch-icon .icon-loop { display: none; }
.launch-icon.is-playing img { opacity: 1; }
}
.product-switch .launch-icon { position: relative; overflow: hidden; }
.product-switch .launch-icon .icon-loop {
position: absolute;
left: 50%;
top: 50%;
width: 78%;
height: 78%;
transform: translate(-50%, -50%);
object-fit: contain;
opacity: 0;
pointer-events: none;
transition: opacity 90ms linear;
}
.product-switch .launch-icon.is-playing .icon-loop { opacity: 1; }
.product-switch .launch-icon.is-playing img { opacity: 0; }
.product-switch .launch-icon img { transition: opacity 90ms linear; }
@keyframes slarp-icon-welcome {
0%   { transform: scale(.86); }
55%  { transform: scale(1.06); }
100% { transform: scale(1); }
}
.product-switch .launch-service.is-welcome .launch-icon {
animation: slarp-icon-welcome 620ms var(--spring) both;
}
@keyframes slarp-icon-idle {
0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
50%      { transform: translateY(calc(-5px * var(--idle-lift, 1)))
scale(calc(1 + .028 * var(--idle-lift, 1)))
rotate(calc(.8deg * var(--idle-tilt, 1))); }
}
.product-switch .launch-service { --idle-phase: 0s; --idle-tilt: 1; --idle-lift: 1; }
.product-switch .launch-service.is-idle .launch-icon {
animation: slarp-icon-idle 4.4s ease-in-out infinite;
animation-delay: var(--idle-phase, 0s);
}
.product-switch .launch-service.selected.is-idle .launch-icon { --idle-lift: 1.6; }
.product-switch .launch-service:hover .launch-icon,
.product-switch .launch-service:focus-within .launch-icon { animation: none; }
.product-switch.motion-off .launch-icon,
.product-switch.motion-off .launch-service .launch-icon { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
.product-switch .launch-icon .icon-loop { display: none; }
.product-switch .launch-icon.is-playing img { opacity: 1; }
.product-switch .launch-service.is-welcome .launch-icon,
.product-switch .launch-service.is-idle .launch-icon { animation: none; }
}
.stars-quantity-input {
min-height: 56px;
align-items: center;
padding-block: 0;
}
.stars-quantity-input input {
height: 100%;
min-height: 0;
padding: 0;
line-height: 1;
display: flex;
align-items: center;
}
.stars-quantity-input .stars-unit,
.stars-quantity-input img {
align-self: center;
margin: 0;
}
.stars-quantity-input .stars-unit {
display: grid;
place-items: center;
width: 44px;
height: 44px;
}
.stars-quantity-input .stars-unit img { width: 30px; height: 30px; padding: 0; background: none; filter: none; }
.telegram-home-fields .stars-presets,
.stars-home-presets {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 6px;
overflow: visible;
}
.stars-home-presets button,
.telegram-home-fields .stars-presets button { padding-inline: 2px; font-size: 11px; }
.helper.stars-range { margin-top: 4px; font-size: 11px; }
.telegram-home-fields { gap: 10px; }
.telegram-home-fields .field { gap: 6px; }
@media (max-width: 380px) {
.stars-home-presets button,
.telegram-home-fields .stars-presets button { font-size: 10px; }
}
.telegram-page .stars-quantity-input,
.telegram-home-fields .stars-quantity-input {
align-items: stretch;
padding-block: 0;
}
.telegram-page .stars-quantity-input input,
.telegram-home-fields .stars-quantity-input input {
height: 100%;
min-height: 0;
align-self: stretch;
margin: 0;
padding: 0;
line-height: 1;
display: flex;
align-items: center;
}
.telegram-page .stars-quantity-input .stars-unit,
.telegram-home-fields .stars-quantity-input .stars-unit {
align-self: center;
width: 44px;
height: 44px;
display: grid;
place-items: center;
}
.telegram-home-fields {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(136px, 168px);
align-items: start;
gap: 10px;
}
.telegram-home-fields .stars-quantity-input { grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; padding-inline: 12px 6px; }
.telegram-home-fields .stars-quantity-input input { font-size: 21px; }
.telegram-home-fields .field > label { font-size: 12.5px; }
.telegram-home-fields .home-recipient { grid-column: 1; }
.telegram-home-fields [data-telegram-panel="stars"]:not(.home-presets) { grid-column: 2; }
.telegram-home-fields .home-presets,
.telegram-home-fields .home-premium-packages { grid-column: 1 / -1; }
.telegram-home-fields .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telegram-home-fields .helper.stars-range { margin-top: 4px; font-size: 11px; }
@media (max-width: 360px) {
.telegram-home-fields { grid-template-columns: minmax(0, 1fr) 132px; gap: 8px; }
.telegram-home-fields .stars-quantity-input { grid-template-columns: minmax(0, 1fr) 30px; gap: 4px; padding-inline: 10px 5px; }
.telegram-home-fields .stars-quantity-input input { font-size: 18px; }
.telegram-home-fields .stars-quantity-input .stars-unit { width: 30px; height: 30px; }
.telegram-home-fields .stars-quantity-input .stars-unit img { width: 20px; height: 20px; }
.telegram-home-fields .field > label { font-size: 11.5px; }
}
.site-header {
border-bottom: 1px solid var(--line);
box-shadow: none;
background: var(--surface);
}
[data-theme="light"] .site-header { box-shadow: none; background: var(--surface); }
.header-nav { border-top: 0; border-bottom: 0; }
.nav-row a.active,
.nav-row a[aria-current="true"] { background: transparent;
border-radius: var(--radius-button) var(--radius-button) 0 0;
}
.nav-row a.active::after { left: 10px; right: 10px; bottom: -1px; height: 2px; }
.site-header .site-search input,
.site-header .icon-button { border-radius: var(--radius-button); }
.site-search input { border-radius: var(--radius-button); }
@media (min-width: 781px) {
.service-launchpad.product-switch {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(var(--tile) + var(--tile-pad) * 2), 1fr));
gap: 8px;
overflow: visible;
}
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services { width: auto; min-width: 0; }
}
@media (max-width: 780px) {
.service-launchpad.product-switch {
position: relative;
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.service-launchpad.product-switch:not([data-scroll-end]) { --fade: 1; }
}
.rank-crest,
.rank-crest.silver,
.rank-crest.gold,
.rank-crest.platinum,
.rank-crest.diamond{
width:56px;height:56px;flex:none;
border:0;border-radius:0;background:none;box-shadow:none;
clip-path:none;-webkit-clip-path:none;mask:none;-webkit-mask:none;
transform:none;
background-image:url("/img/store/ranks/shield-bronze.a82a23cd.webp");
background-size:contain;background-repeat:no-repeat;background-position:center;
}
.rank-crest.silver{background-image:url("/img/store/ranks/shield-silver.4c0d66c4.webp")}
.rank-crest.gold{background-image:url("/img/store/ranks/shield-gold.ddd9b42c.webp")}
.rank-crest.platinum{background-image:url("/img/store/ranks/shield-platinum.73dd2a05.webp")}
.rank-crest.diamond{background-image:url("/img/store/ranks/shield-diamond.0be69ec5.webp")}
.profile-rank-crest{width:64px;height:64px}
.rank-grid,
.home-showcase-grid.is-scroll,
.quick-row.is-scroll,
.catalog-category-tabs,
.voucher-service-switch {
padding-block: 2px var(--space-1);
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.rank-grid::-webkit-scrollbar,
.catalog-category-tabs::-webkit-scrollbar,
.voucher-service-switch::-webkit-scrollbar,
.service-launchpad.product-switch::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rank-grid { align-items: stretch; }
.rank-grid > * { align-self: stretch; }
@keyframes slarp-hero-float { 0%,100%{transform:translate3d(0,2px,0)} 50%{transform:translate3d(0,-5px,0)} }
@keyframes slarp-hero-shadow {
0%, 100% { transform: translate3d(-50%, 0, 0) scale(1); opacity: .30; }
50%      { transform: translate3d(-50%, 0, 0) scale(.88); opacity: .18; }
}
.home-hero-panel { perspective: 900px; --hero-rx: 0deg; --hero-ry: 0deg; }
.home-hero-art {
animation: slarp-hero-float 5.2s ease-in-out infinite;
will-change: transform;
}
.home-hero-panel::after {
content: "";
position: absolute;
left: 74%;
bottom: 8%;
width: 26%;
height: 10px;
transform: translate3d(-50%, 0, 0);
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
filter: blur(6px);
opacity: .3;
pointer-events: none;
animation: slarp-hero-shadow 5.2s ease-in-out infinite;
}
[data-theme="light"] .home-hero-panel::after {
background: radial-gradient(ellipse at center, rgba(34, 30, 24, .38), transparent 70%);
}
@media (hover: hover) and (min-width: 781px) {
.home-hero-art {
transform: rotateX(var(--hero-rx, 0deg)) rotateY(var(--hero-ry, 0deg));
transition: transform var(--t-sheet) var(--spring);
}
.home-hero-panel.is-tilting .home-hero-art { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
.home-hero-art, .home-hero-panel::after { animation: none; }
.home-hero-panel::after { opacity: .24; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.site-header, .mobile-dock, .site-footer { view-transition-name: none; }
:root { --identity-slot: 382px; }
@media (min-width: 781px) { :root { --identity-slot: 413px; } }
.identity-loading { min-height: var(--identity-slot); align-items: center; }
.mobile-dock a .telegram-nav-icon,
.mobile-menu-list .telegram-nav-icon { color: inherit; }
@media (max-width: 780px) {
.service-launchpad.product-switch {
--tile-pad: 6px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
padding: 8px;
overflow-x: visible;
}
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services {
width: auto;
min-width: 0;
grid-template-rows: auto auto;
gap: 6px;
}
.service-launchpad.product-switch .launch-icon,
.service-launchpad.product-switch .launch-all-services .launch-icon {
width: 100%;
height: auto;
aspect-ratio: 1;
}
.service-launchpad.product-switch .launch-service b {
font-size: 11px;
letter-spacing: -.015em;
}
}
@media (max-width: 340px) {
.service-launchpad.product-switch { gap: 3px; padding: 6px; --tile-pad: 4px; }
.service-launchpad.product-switch .launch-service b { font-size: 9.5px; }
}
@media (min-width: 781px) {
.service-launchpad.product-switch {
--tile: 76px;
--tile-pad: 0px;
display: grid;
grid-template-columns: repeat(4, var(--tile));
justify-content: start;
gap: 52px;
width: auto;
margin: 48px 0 20px;
padding: 0;
border: 0;
background: none;
overflow: visible;
}
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services {
width: var(--tile);
min-width: 0;
gap: 10px;
padding: 0;
border: 0;
background: none;
border-radius: var(--radius-card);
}
.service-launchpad.product-switch .launch-icon,
.service-launchpad.product-switch .launch-all-services .launch-icon {
width: var(--tile);
height: var(--tile);
border: 1px solid var(--line);
border-radius: 22%;
background: var(--surface-2);
}
.service-launchpad.product-switch .launch-service b { font-size: 12.5px; }
.service-launchpad.product-switch .launch-service.selected { transform: none; }
.service-launchpad.product-switch .launch-service.selected .launch-icon {
width: var(--tile);
height: var(--tile);
margin-block: 0;
border-color: var(--accent-border-soft);
}
.service-launchpad.product-switch .launch-service.selected b { color: var(--gold-text); }
.service-launchpad.product-switch .launch-service:hover .launch-icon { background: var(--surface-3); }
.service-launchpad.product-switch .launch-service:hover b { color: var(--text); }
.service-launchpad.product-switch .launch-service:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-card);
}
.home-hero { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
.service-launchpad.product-switch .launch-service.selected { transform: none; }
}
@media (min-width: 600px) and (max-width: 780px) {
.service-launchpad.product-switch {
grid-template-columns: repeat(4, minmax(0, 96px));
justify-content: start;
gap: 20px; padding: 12px 0; --tile-pad: 0px;
border: 0; background: none;
}
.service-launchpad.product-switch .launch-service b { font-size: 12.5px; }
}
:root {
--hero-art: clamp(150px, 19vh, 232px);
--hero-pad: clamp(10px, 1.8vh, 22px);
}
.home-hero { padding: var(--hero-pad) 0; margin: 2px 0 12px; }
.home-hero-panel img.home-hero-art {
height: var(--hero-art);
width: auto;
max-width: 46%;
object-fit: contain;
object-position: right center;
margin-left: auto;
}
@media (max-width: 780px) {
:root { --hero-art: clamp(126px, 17vh, 168px); }
.home-hero-panel img.home-hero-art { max-width: 42%; }
}
@media (max-width: 380px) {
:root { --hero-art: clamp(112px, 15vh, 140px); }
}
.empty-state {
display: grid;
justify-items: center;
gap: 10px;
padding: clamp(28px, 6vw, 56px) 20px;
text-align: center;
}
.empty-state .state-object {
width: clamp(96px, 22vw, 132px);
height: auto;
max-height: none;
margin-bottom: 2px;
}
.empty-state h1,
.empty-state h2 { font-size: clamp(19px, 2.6vw, 26px); line-height: 1.12; }
.empty-state p {
max-width: 42ch;
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.empty-state .button { margin-top: 6px; }
[data-theme="light"] .empty-state .state-object {
filter: drop-shadow(0 10px 16px rgba(25, 25, 24, .14));
}
.amount-field,
.stars-quantity-input {
min-height: 82px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-input);
background: var(--surface-2);
padding: 12px 16px;
}
.amount-field:focus-within,
.stars-quantity-input:focus-within {
border-color: var(--text);
box-shadow: none;
}
.amount-field input,
.stars-quantity-input input {
width: 100%;
min-width: 0;
min-height: 44px;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
font-family: var(--display);
font-size: 30px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.amount-field input::-webkit-inner-spin-button,
.amount-field input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.amount-mark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--surface-3);
color: var(--gold-text);
}
.amount-mark svg { width: 24px; height: 24px; display: block; }
@media (max-width: 780px) {
.amount-field,
.stars-quantity-input { min-height: 64px; gap: 9px; padding: 8px 11px; }
.amount-field input,
.stars-quantity-input input { font-size: 25px; }
.amount-mark { width: 38px; height: 38px; }
.amount-mark svg { width: 21px; height: 21px; }
}
.preset-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.preset-row .quick {
flex: 1 1 auto;
min-width: 84px;
height: 44px;
min-height: 44px;
padding-inline: 14px;
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: var(--surface-2);
color: var(--muted);
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.preset-row .quick:hover { border-color: var(--line-strong); color: var(--text); }
.preset-row .quick.active {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
color: var(--gold-text);
}
.preset-row .quick:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 380px) {
.preset-row .quick { min-width: 72px; padding-inline: 10px; font-size: 12.5px; }
}
.telegram-home-fields .stars-quantity-input,
.home-order-fields .amount-field {
height: auto;
min-height: 82px;
padding: 12px 16px;
border-radius: var(--radius-input);
}
.telegram-home-fields .stars-quantity-input input,
.home-order-fields .amount-field input {
height: auto;
min-height: 44px;
font-size: 30px;
font-family: var(--display);
font-weight: 800;
}
@media (max-width: 780px) {
.telegram-home-fields .stars-quantity-input,
.home-order-fields .amount-field { min-height: 64px; padding: 8px 12px; }
.telegram-home-fields .stars-quantity-input input,
.home-order-fields .amount-field input { font-size: 25px; }
}
:root { --color-disabled: #8A8272; }
[data-theme="light"] { --color-disabled: #6B6559; }
:root { --radius-panel: 24px; --radius-chip: 8px; }
.site-search kbd { border-radius: var(--radius-chip); }
.field-help,
.stars-unit { border-radius: var(--radius-chip); }
.launch-icon-3d { border-radius: 22%; }
.home-order-layout.compact-action,
.legal-copy,
.payment-result-card,
.workspace.telegram-workspace { border-radius: var(--radius-panel); }
.footer-links a,
.footer-legal-links a,
.mobile-menu-support,
.mobile-menu-legal a { min-height: 44px; display: inline-flex; align-items: center; }
.trademark { font-size: 11px; line-height: 1.5; }
.footer-bottom { font-size: 11.5px; }
.footer-legal-links a,
.footer-links a { font-size: 12px; }
.site-search kbd { font-size: 11px; }
.eyebrow { font-size: 11.5px; letter-spacing: .06em; }
.home-showcase-copy small,
.checkout-header-title { font-size: 12.5px; }
.home-hero-loop {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: var(--hero-art);
width: auto;
max-width: 46%;
object-fit: contain;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.home-hero-panel.hero-live .home-hero-loop { opacity: 1; }
.home-hero-panel.hero-live .home-hero-art { opacity: 0; }
.home-hero-art { transition: opacity 220ms ease; }
@media (max-width: 780px) { .home-hero-loop { max-width: 42%; } }
@media (prefers-reduced-motion: reduce) { .home-hero-loop { display: none; } }
.home-hero-panel { padding: var(--hero-air, 10px) var(--hero-air, 10px) var(--hero-air, 10px) 0; }
.home-hero-panel img.home-hero-art,
.home-hero-loop {
height: calc(var(--hero-art) - var(--hero-air, 10px) * 2);
max-height: calc(100% - var(--hero-air, 10px) * 2);
}
.home-hero-panel img.home-hero-art,
.home-hero-loop { margin-right: 0; }
@media (min-width: 781px) { :root { --hero-air: 14px; } }
@media (min-width: 781px) {
:root { --hero-art: clamp(190px, 26vh, 240px); --hero-air: 16px; }
.home-hero-panel img.home-hero-art,
.home-hero-loop { max-width: 42%; }
}
@media (min-width: 1200px) {
:root { --hero-art: clamp(200px, 27vh, 248px); }
}
@media (min-width: 781px) {
.site-header .header-nav { display: none; }
.header-main { height: var(--header-h, 68px); }
}
:root { --header-h: 64px; }
@media (min-width: 781px) { :root { --header-h: 68px; } }
@media (min-width: 781px) {
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services {
padding: 0 0 var(--space-1, 8px);
gap: 12px;
}
.service-launchpad.product-switch .launch-service b {
display: block;
padding-block: 2px;
line-height: 1.2;
}
.service-launchpad.product-switch .launch-service.selected .launch-icon img {
transform: translateY(-2px) scale(1.03);
}
.service-launchpad.product-switch .launch-icon img { transition: transform var(--t-move) var(--spring); }
}
@media (max-width: 780px) {
.service-launchpad.product-switch .launch-service b { padding-block: 2px 4px; }
}
:root { --field-h: 52px; --field-num: 22px; }
@media (max-width: 780px) { :root { --field-h: 64px; --field-num: 25px; } }
.telegram-home-fields .stars-quantity-input,
.home-order-fields .amount-field,
.amount-field,
.stars-quantity-input {
min-height: var(--field-h);
height: var(--field-h);
padding: 0 14px;
}
.telegram-home-fields .stars-quantity-input input,
.home-order-fields .amount-field input,
.amount-field input,
.stars-quantity-input input {
height: 100%;
min-height: 0;
font-size: var(--field-num);
line-height: 1;
}
.amount-mark,
.stars-quantity-input .stars-unit {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex: none;
border-radius: var(--radius-chip, 8px);
background: var(--surface-3);
color: var(--gold-text);
}
.amount-mark svg,
.stars-quantity-input .stars-unit svg { width: 20px; height: 20px; display: block; }
.stars-quantity-input .stars-unit img,
.amount-mark img { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; filter: none; }
@media (max-width: 780px) {
.amount-mark,
.stars-quantity-input .stars-unit { width: 38px; height: 38px; }
.amount-mark svg,
.stars-quantity-input .stars-unit svg,
.stars-quantity-input .stars-unit img,
.amount-mark img { width: 22px; height: 22px; }
}
.home-order-fields { align-items: start; }
.home-order-fields > .field { align-self: start; }
@media (min-width: 1200px) {
:root { --hero-art: clamp(210px, 30vh, 266px); --hero-pad: 16px; }
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-chip, 8px);
}
.site-search input:focus-visible,
.input-wrap input:focus-visible,
.amount-field input:focus-visible,
.stars-quantity-input input:focus-visible {
outline-offset: 2px;
border-radius: var(--radius-input);
}
.input-wrap input:focus-visible,
.amount-field input:focus-visible,
.stars-quantity-input input:focus-visible,
.site-search input:focus-visible,
.choice-search:focus-visible,
input[type="search"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="number"]:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
@media (max-width: 380px) {
.service-launchpad.product-switch .launch-service b { font-size: 11px; }
.preset-row .quick { font-size: 11.5px; min-width: 64px; padding-inline: 8px; }
}
.brand-lockup { border-radius: var(--radius-panel); }
.voucher-service-card,
.voucher-service-card.voucher-steam-card { border-radius: var(--radius-input); }
.mobile-menu-list a,
.mobile-menu-legal a { border-radius: var(--radius-chip); }
.mobile-menu-support,
.footer-links a[href*="t.me"],
.footer-legal-links a[href*="t.me"] {
min-height: 44px;
display: inline-flex;
align-items: center;
}
@media (max-width: 380px) {
.home-presets .quick-row .quick,
.quick-row.preset-row .quick,
.preset-row .quick { font-size: 11.5px; min-width: 62px; padding-inline: 8px; }
.service-launchpad.product-switch .launch-service b { font-size: 11px; }
}
@media (max-width: 780px) {
.home-hero-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: var(--hero-art);
height: auto;
overflow: visible;
}
.home-hero-copy {
position: static;
transform: none;
max-width: none;
min-width: 0;
}
.home-hero-panel img.home-hero-art,
.home-hero-loop {
position: static;
transform: none;
max-width: 38vw;
height: auto;
max-height: var(--hero-art);
margin: 0;
}
.home-hero-loop { position: absolute; }
.home-hero-cta { align-self: start; }
}
@media (max-width: 780px) {
.home-order-fields {
grid-template-columns: minmax(0, 1fr);
}
.home-order-fields > .field { width: 100%; }
.amount-field,
.stars-quantity-input {
width: 100%;
grid-template-columns: minmax(0, 1fr) auto;
}
.amount-field input,
.stars-quantity-input input { min-width: 6ch; }
}
@media (max-width: 780px) {
.page { padding-bottom: 0; }
.site-footer {
padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
}
@media (max-width: 780px) {
body { padding-bottom: 0; }
}
.home-hero-copy h1 {
font-size: clamp(30px, 5.2vw, 56px);
line-height: 1.06;
}
@media (max-width: 780px) { .home-hero-copy h1 { font-size: clamp(24px, 7.4vw, 34px); } }
.home-showcase-head h2,
.section h2 { font-size: clamp(20px, 2vw, 28px); }
:root { --control-sm: 40px; --control-md: 48px; --control-lg: 56px; }
.site-search input,
.icon-button { height: var(--control-md); min-height: var(--control-md); }
.icon-button { width: var(--control-md); }
.button,
.home-hero-cta { min-height: var(--control-lg); }
.preset-row .quick { height: var(--control-md); min-height: var(--control-md); }
@media (max-width: 780px) {
.site-search input,
.icon-button { height: 44px; min-height: 44px; }
.icon-button { width: 44px; }
.button, .home-hero-cta { min-height: var(--control-md); }
}
.home-hero-panel {
min-height: var(--hero-art);
height: auto;
overflow: visible;
}
@media (min-width: 781px) {
.home-hero-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; gap: clamp(16px, 3vw, 48px); }
.home-hero-copy { position: static; transform: none; max-width: none; min-width: 0; }
.home-hero-panel img.home-hero-art,
.home-hero-loop { position: static; transform: none; margin: 0;
height: auto; max-height: var(--hero-art); max-width: 42%; }
.home-hero-loop { position: absolute; right: var(--hero-air); }
}
.home-hero-copy h1 { line-height: 1.12; }
@media (min-width: 781px) {
.home-hero-panel { display: block; position: relative; }
.home-hero-copy {
position: static;
transform: none;
max-width: min(54%, 620px);
padding-block: 6px;
}
.home-hero-panel img.home-hero-art,
.home-hero-loop {
position: absolute;
right: var(--hero-air);
top: 50%;
transform: translateY(-50%);
height: var(--hero-art);
max-height: none;
max-width: 42%;
width: auto;
margin: 0;
}
}
.home-hero-copy h1 { font-size: clamp(26px, 3.4vw, 46px); }
@media (max-width: 780px) { .home-hero-copy h1 { font-size: clamp(23px, 6.6vw, 30px); } }
.home-showcase-head h2,
.section h2 { font-size: clamp(17px, 1.6vw, 22px); }
@media (min-width: 781px) and (max-width: 1199px) {
:root { --hero-art: clamp(170px, 24vh, 210px); }
}
@media (min-width: 781px) {
.home-hero-panel img.home-hero-art,
.home-hero-loop {
top: 0;
bottom: 0;
margin-block: auto;
transform: none;
}
}
@media (min-width: 781px) {
.home-hero-panel img.home-hero-art,
.home-hero-loop { height: calc(var(--hero-art) - var(--hero-air) * 2); }
}
:root {
--hero-h: 176px;
--hero-air: 12px;
--hero-gap: 16px;
--hero-slot: calc(var(--hero-h) - var(--hero-air) * 2);
}
@media (min-width: 781px) { :root { --hero-h: 216px; --hero-air: 16px; --hero-gap: 32px; } }
@media (min-width: 1200px) { :root { --hero-h: min(266px, calc(33vh - 28px)); --hero-gap: 48px; } }
.home-hero { padding: var(--hero-pad) 0; }
.home-hero-panel {
position: relative;
display: block;
min-height: var(--hero-h);
height: auto;
overflow: visible;
padding: var(--hero-air);
border-radius: var(--radius-card);
}
.home-hero-copy {
position: static;
transform: none;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: clamp(6px, 1.2vw, 12px);
min-height: var(--hero-slot);
max-width: none;
padding-right: calc(var(--hero-slot) + var(--hero-gap));
}
.home-hero-panel img.home-hero-art,
.home-hero-panel .home-hero-loop {
position: absolute;
right: var(--hero-air);
top: var(--hero-air);
bottom: var(--hero-air);
margin-block: auto;
width: var(--hero-slot);
height: var(--hero-slot);
max-width: none;
max-height: none;
object-fit: contain;
object-position: center;
}
@media (max-width: 380px) {
:root { --hero-h: 160px; --hero-gap: 12px; }
.home-hero-copy { padding-right: calc(var(--hero-slot) + var(--hero-gap)); }
}
@media (max-width: 380px) {
.home-hero-copy { gap: 5px; }
.home-hero-copy p { font-size: 11.5px; line-height: 1.4; }
}
:root { --hero-h: min(248px, calc(33vh - 28px)); }
@media (min-width: 781px) { :root { --hero-h: min(232px, calc(33vh - 28px)); } }
@media (min-width: 1200px) { :root { --hero-h: min(266px, calc(33vh - 28px)); } }
@media (max-width: 380px) { :root { --hero-h: min(232px, calc(33vh - 28px)); } }
.home-hero-panel { height: var(--hero-h); min-height: var(--hero-h); }
.home-hero-copy { min-height: 0; height: 100%; }
@media (max-width: 480px) {
.home-hero-copy > * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.home-hero-copy h1 { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.1; }
.home-hero-copy p { font-size: 11.5px; line-height: 1.35; }
.home-hero-cta { min-height: 42px; padding-inline: 14px; font-size: 13px; }
}
@media (max-width: 400px) {
.home-hero-copy p { display: none; }
}
@media (max-width: 380px) { :root { --hero-h: 196px; } }
@media (max-width: 480px) {
.home-hero-copy > * {
overflow-wrap: break-word;
hyphens: manual;
}
:root { --hero-slot: calc((var(--hero-h) - var(--hero-air) * 2) * 0.78); }
.home-hero-copy { padding-right: calc(var(--hero-slot) + var(--hero-gap)); }
}
.orders-section { scroll-margin-top: calc(var(--header-h, 64px) + 20px); }
.order-status { font-size: 11px; padding: 5px 9px; }
.order-status.active { color: var(--gold-text); }
.order-status.attention { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.order-status.completed { color: var(--green); }
.order-status.refunded { color: var(--blue); }
.store-order-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: 12px; }
.order-action { min-height: var(--control-md, 44px); padding-inline: 18px; font-size: 13.5px; }
.order-action.ghost { border-color: var(--line-strong); background: transparent; color: var(--text); }
.home-showcase-card:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [role="tab"]:focus-visible,
.home-showcase-card:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.referral-link { flex-wrap: wrap; }
.referral-link input { min-height: var(--control-md, 44px); }
@media (max-width: 360px) {
.referral-link input,
.referral-copy { flex: 1 1 100%; }
}
.service-launchpad.category-switch { display: none; }
@media (min-width: 781px) {
.service-launchpad.category-switch { display: grid; margin: 0 0 var(--space-5, 22px); }
}
[data-theme="light"] { --blue: #2B5EA8; }
.rank-track { background: rgba(244, 239, 228, .38); }
[data-theme="light"] .rank-track { background: rgba(25, 25, 24, .48); }
:root { --num-size: 24px; --num-suffix: 44px; }
@media (max-width: 780px) { :root { --num-size: 23px; --num-suffix: 40px; } }
.amount-field { position: relative; }
.amount-field > input {
width: 100%;
font-size: var(--num-size);
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
padding-right: calc(var(--num-suffix) + 8px);
}
.amount-field > .amount-mark {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: var(--num-suffix);
height: var(--num-suffix);
display: grid;
place-items: center;
color: var(--muted);
pointer-events: none;
}
.amount-field > .amount-mark svg,
.amount-field > .amount-mark img { width: 24px; height: 24px; display: block; }
.helper.steam-range, .helper.stars-range {
margin: 8px 0 0;
color: var(--muted-2);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
@media (max-width: 780px) {
.home-order-fields.home-order-fields:has(.amount-field) {
grid-template-columns: minmax(0, 1fr);
}
}
.amount-field > input[data-steam-amount],
.amount-field > input[data-stars-count] { font-size: var(--num-size); }
@media (max-width: 780px) {
.home-order-fields.telegram-home-fields { grid-template-columns: minmax(0, 1fr); }
.home-order-fields.telegram-home-fields > * { grid-column: 1 / -1; min-width: 0; }
}
.home-order-fields .field,
.home-order-fields .amount-field,
.home-order-fields .amount-field > input { min-width: 0; }
.home-order-fields .amount-field > input { width: 100%; }
@media (max-width: 780px) {
.home-order-layout .telegram-home-fields > .field { grid-column: 1 / -1; min-width: 0; }
}
.amount-field > .amount-mark.stars-unit {
width: var(--num-suffix);
height: var(--num-suffix);
}
.amount-field:focus-within {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-input, 14px);
}
.amount-field > input:focus,
.amount-field > input:focus-visible { outline: none; }
@media (min-width: 781px) {
.home-order-layout .home-order-fields:has(.amount-field) {
grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
}
}
.home-order-card .field { gap: var(--form-row-gap, 8px); }
.home-order-card .field > label {
display: block;
margin: 0 0 3px;
min-height: 18px;
font-size: 12px;
line-height: 18px;
}
.home-order-card .field > .helper {
margin: 8px 0 0;
font-size: 12px;
line-height: 18px;
}
.home-order-card .field.home-presets > label { min-height: 18px; }
.home-order-card [data-home-panel] { row-gap: 8px; }
@media (max-width: 780px) {
.home-order-layout.compact-action .home-order-fields .field.home-presets > label {
min-height: 18px;
}
.home-order-layout.compact-action .home-order-fields { row-gap: 8px; }
}
.home-order-layout.compact-action .home-order-fields { row-gap: 8px; }
.home-order-card .field.home-presets { margin-top: 0; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
box-shadow: 0 0 0 1000px var(--surface-2) inset;
-webkit-text-fill-color: var(--text);
caret-color: var(--text);
transition: background-color 100000s ease 0s;
}
:root { --form-row-gap: 8px; }
.checkout-empty { display: grid; place-items: center; }
.checkout-empty > .empty-state,
.empty-state { margin-inline: auto; }
.filters .filter.active,
.games-page .filters .filter.active,
.services-page .filters .filter.active {
border: 0;
border-radius: 12px;
background: var(--accent-wash);
box-shadow: none;
color: var(--gold-text);
}
.filters .filter,
.games-page .filters .filter,
.services-page .filters .filter {
border: 0;
border-radius: 12px;
background: var(--hairline);
}
.filters .filter:hover,
.services-page .filters .filter:hover {
background: var(--accent-wash);
border: 0;
}
.filters .filter,
.games-page .filters .filter,
.services-page .filters .filter {
border: 0;
border-radius: 12px;
background: var(--hairline);
color: var(--muted);
}
.filters .filter:hover,
.games-page .filters .filter:hover,
.services-page .filters .filter:hover {
background: var(--accent-wash);
color: var(--text);
}
.launch-service.selected .launch-icon,
.services-page .launch-service.selected .launch-icon,
.launch-service.launch-all-services.selected .launch-icon { border: 0; }
.input-wrap:has(> input[data-telegram-recipient]) > span {
right: auto;
left: 14px;
color: var(--muted-2);
pointer-events: none;
}
.input-wrap > input[data-telegram-recipient] {
padding-left: 42px;
padding-right: 12px;
}
@media (min-width: 781px) {
.catalog-grid.game-logo-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 22px 16px;
}
}
@media (min-width: 1200px) {
.catalog-grid.game-logo-grid {
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
}
.gate-order {
display: grid;
gap: 4px;
margin: 0 0 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface-2);
text-align: left;
}
.gate-order b { color: var(--text); font-size: 14px; }
.gate-order span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.profile-section,
.profile-overview,
.identity-panel { border-radius: var(--radius-card); }
@media (max-width: 780px) {
.profile-section,
.profile-overview,
.identity-panel { border-radius: 16px; }
}
.profile-section,
.profile-sidebar .profile-section { padding: var(--space-4, 16px); }
@media (min-width: 781px) {
.profile-section,
.profile-sidebar .profile-section { padding: var(--space-6, 24px); }
}
.referral-link input {
height: var(--control-md, 48px);
min-height: var(--control-md, 48px);
border-radius: var(--radius-input, 14px);
background: var(--surface-2);
font-size: 13px;
}
.referral-copy {
height: var(--control-md, 48px);
min-height: var(--control-md, 48px);
border-radius: var(--radius-input, 14px);
font-size: 12px;
}
.order-filters { border-radius: 14px; padding: 4px; }
.order-filters button { border-radius: 11px; }
.profile-identity .eyebrow,
.profile-section .eyebrow { font-size: 11.5px; }
.orders-empty {
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface-2);
}
@media (max-width: 780px) { .orders-empty { border-radius: 16px; } }
.orders-empty > span,
.rank-card p { font-size: 11px; }
.profile-logout { color: var(--muted); }
.profile-logout:hover,
.profile-logout:focus-visible { color: var(--red); }
.profile-identity h2 {
font-family: var(--display);
font-size: 26px;
letter-spacing: .01em;
}
@media (max-width: 780px) { .profile-identity h2 { font-size: 21px; } }
.order-list { min-height: 240px; }
.store-order-code button,
.orders-empty button,
.profile-dashboard button { font-size: max(11px, 1em); }
.store-order-code button { font-size: 11px; }
.profile-dashboard { display: grid; }
.profile-overview { display: contents; }
.profile-overview-main { order: 1; }
.profile-dashboard-grid { order: 2; }
.profile-stat-grid { order: 3; }
.profile-progress-block { order: 4; }
.profile-overview-main,
.profile-stat-grid,
.profile-progress-block {
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
}
@media (max-width: 780px) {
.profile-overview-main,
.profile-stat-grid,
.profile-progress-block { border-radius: 16px; }
}
.profile-dashboard { row-gap: var(--space-4, 16px); }
.profile-overview-main {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 14px;
}
.profile-overview-main .rank-crest { width: 36px; height: 36px; }
.profile-overview-main .profile-identity { display: grid; gap: 0; }
.profile-overview-main .profile-identity .eyebrow { display: none; }
.profile-overview-main .profile-identity h2 { font-size: 17px; line-height: 1.2; }
.profile-overview-main .profile-identity p { font-size: 11.5px; line-height: 1.3; margin: 0; }
@media (min-width: 781px) {
.profile-overview-main { padding: 12px 18px; }
.profile-overview-main .rank-crest { width: 40px; height: 40px; }
.profile-overview-main .profile-identity h2 { font-size: 19px; }
}
.profile-overview-main { min-height: 0; grid-auto-rows: min-content; }
.account-fields input,
.account-fields select {
border-radius: var(--radius-input, 14px);
min-height: var(--control-md, 48px);
}
@media (max-width: 780px) {
main.page:not(:has(~ .site-footer)) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
.game-checkout-heading h3 { line-height: 1.12; }
.game-checkout-sub { margin: 4px 0 0; color: var(--ui-muted); font-size: 13px; }
@media (max-width: 780px) {
.games-page .game-checkout-heading h3 { display: none; }
.games-page .game-checkout-sub { margin: 0; }
}
@media (min-width: 781px) {
.games-page .game-configurator { min-height: 0; }
}
.bolt-art {
position: relative;
display: block;
width: var(--bolt-size, 132px);
margin-inline: auto;
}
.bolt-art > img[width][height],
.bolt-art > img {
display: block;
width: 100%;
height: auto;
}
.bolt-art > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.bolt-art > img,
.bolt-art > video {
transition: opacity .3s ease;
}
.bolt-art > video { opacity: 0; pointer-events: none; }
.bolt-art.bolt-live > video { opacity: 1; }
.bolt-art.bolt-live > img { opacity: 0; }
.payment-result-icon.bolt-art {
width: 148px;
height: auto;
border: 0;
background: none;
border-radius: 0;
margin: 0 auto 14px;
}
@media (max-width: 520px) {
.payment-result-icon.bolt-art { width: 124px; }
.empty-state-art.bolt-art { --bolt-size: 116px; }
}
.brand-lockup.bolt-art {
width: min(100%, 420px);
place-self: center;
}
.checkout-spinner.bolt-art {
width: 96px;
border: 0;
border-radius: 0;
animation: none;
}
@media (max-width: 520px) {
.checkout-spinner.bolt-art { width: 78px; }
}
.funnel-quote {
margin: 0 0 var(--space-2, 10px);
color: var(--text-secondary, var(--muted));
font-size: 13px;
font-weight: 700;
}
.funnel-quote[hidden] { display: none; }
[data-theme="light"] .games-page .game-checkout-panel,
[data-theme="light"] .services-page .voucher-layout,
[data-theme="light"] .games-page .game-checkout-panel[hidden="false"] {
background: rgba(20, 22, 26, .42);
backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .games-page .game-checkout-panel,
:root:not([data-theme="dark"]) .services-page .voucher-layout {
background: rgba(20, 22, 26, .42);
backdrop-filter: blur(10px);
}
}
@media (max-width: 780px) {
.games-page .game-checkout-panel,
.services-page .voucher-layout {
background: rgba(6, 7, 9, .58);
}
[data-theme="light"] .games-page .game-checkout-panel,
[data-theme="light"] .services-page .voucher-layout {
background: rgba(20, 22, 26, .42);
}
}
[data-theme="light"] .home-showcase-card .home-showcase-art {
background-color: var(--surface);
}
[data-theme="light"] .home-showcase-art::after {
background: linear-gradient(180deg, transparent 55%, rgba(28, 26, 22, .07));
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .home-showcase-card .home-showcase-art {
background-color: var(--surface);
}
:root:not([data-theme="dark"]) .home-showcase-art::after {
background: linear-gradient(180deg, transparent 55%, rgba(28, 26, 22, .07));
}
}
.catalog-card-price {
display: block;
margin-top: 2px;
color: var(--text-secondary, var(--muted));
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.brand-guard-grid {
display: grid;
gap: var(--space-4, 18px);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.brand-guard {
display: grid;
gap: 8px;
align-content: start;
padding: var(--space-4, 18px);
border: 1px solid var(--line);
border-radius: var(--radius-card, 18px);
background: var(--surface);
}
.brand-guard b { font-size: 15px; }
.brand-guard > span { color: var(--text-secondary, var(--muted)); font-size: 13px; }
.brand-guard-demo {
display: grid;
place-items: center;
gap: 12px;
min-height: 132px;
border-radius: var(--radius-input, 14px);
background: var(--surface-2, rgba(127, 127, 127, .08));
color: var(--gold);
}
.brand-guard-sizes {
grid-auto-flow: column;
justify-content: center;
align-items: end;
gap: 20px;
}
.brand-guard-field {
display: grid;
place-items: center;
padding: 22px;
border: 1px dashed var(--line-strong);
border-radius: 11px;
}
.brand-guard-no { position: relative; }
.brand-guard-no::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
top: 50%;
height: 2px;
background: var(--red, #d24b4b);
transform: rotate(-18deg);
}
.brand-volume { width: min(100%, 360px); margin-inline: 0; }
.brand-note { margin: 12px 0 0; color: var(--text-secondary, var(--muted)); font-size: 13px; }
.breadcrumbs a {
display: inline-flex;
align-items: center;
min-height: 24px;
padding-block: 6px;
margin-block: -6px;
}
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 6px;
min-height: 40px;
}
.breadcrumbs a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding-block: 0;
margin-block: 0;
}
@media (max-width: 780px) {
.telegram-page .telegram-summary .telegram-submit,
.telegram-page .telegram-summary [data-telegram-add] {
position: fixed;
left: var(--space-4, 16px);
right: var(--space-4, 16px);
bottom: calc(76px + env(safe-area-inset-bottom));
z-index: 40;
width: auto;
margin: 0;
box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
}
.telegram-page main.page {
padding-bottom: calc(160px + env(safe-area-inset-bottom));
}
}
.recipient-missing {
margin: 8px 0 0;
color: var(--red, #d24b4b);
font-size: 12px;
font-weight: 700;
}
.recipient-missing[hidden] { display: none; }
.home-hero-copy > *,
.home-showcase-copy *,
.section-head *,
h1, h2, h3 { hyphens: manual; }
.game-logo-card { row-gap: 6px; }
.game-logo-card .catalog-card-price { margin-top: 0; line-height: 1.2; }
@media (max-width: 520px) {
.game-logo-card,
.services-page .voucher-service-card { gap: 6px; }
}
.orders-empty {
place-items: center;
text-align: center;
}
.launch-service,
.launch-all-services,
.mobile-dock a,
.mobile-menu-list a,
[data-game-card],
[data-home-mode],
.filter,
.catalog-sort-trigger { touch-action: manipulation; }
.funnel-quote-warn { color: var(--red, #d24b4b); }
.numeric-note { margin: 6px 0 0; color: var(--text-secondary, var(--muted)); font-size: 12px; font-weight: 700; }
.numeric-note[hidden] { display: none; }
.configurator-error { margin: 8px 0 0; color: var(--red, #d24b4b); font-size: 13px; font-weight: 700; grid-column: 1 / -1; }
.configurator-error[hidden] { display: none; }
.choice-copy { min-width: 0; display: grid; gap: 2px; }
.choice-price {
color: var(--gold-text);
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.choice-hint {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--accent-wash);
color: var(--gold-text);
padding: 0 15px;
font-size: 11px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.choice-hint:hover { border-color: var(--accent-border-soft); }
.choice-hint[hidden] { display: none; }
.gate-order-price {
display: block;
margin-top: 8px;
color: var(--gold-text);
font-family: var(--display, inherit);
font-size: 20px;
font-variant-numeric: tabular-nums;
}
.gate-order-price[hidden] { display: none; }
.premium-owned-note {
margin-top: 12px;
max-width: 52ch;
color: var(--muted);
font-size: 11.5px;
line-height: 1.55;
}
.launch-service.selected:not(:focus-visible),
.service-launchpad .launch-service.selected:not(:focus-visible),
.service-launchpad.product-switch .launch-service.selected:not(:focus-visible),
[data-theme="light"] .service-launchpad .launch-service.selected:not(:focus-visible),
[data-theme="dark"] .service-launchpad .launch-service.selected:not(:focus-visible) {
border-color: transparent;
box-shadow: none;
}
.launch-service.selected::after,
.service-launchpad .launch-service.selected::after,
.service-launchpad.product-switch .launch-service.selected::after,
[data-theme="light"] .service-launchpad .launch-service.selected::after {
content: none;
}
.launch-service.selected .launch-icon,
.service-launchpad .launch-service.selected .launch-icon,
.service-launchpad.product-switch .launch-service.selected .launch-icon,
[data-theme="light"] .service-launchpad .launch-service.selected .launch-icon {
border-color: transparent;
}
.launch-service.selected .launch-icon::after,
.service-launchpad .launch-service.selected .launch-icon::after {
content: none;
}
.telegram-product-card[aria-selected="true"]:not(:focus-visible),
.telegram-product-card.active:not(:focus-visible),
[data-theme="light"] .telegram-product-card[aria-selected="true"]:not(:focus-visible),
[data-theme="light"] .telegram-product-card.active:not(:focus-visible) {
box-shadow: none;
border-color: transparent;
}
.telegram-product-card[aria-selected="true"]::after,
.telegram-product-card.active::after {
content: none;
}
.telegram-product-card[aria-selected="true"] {
background-image: linear-gradient(0deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
}
[data-theme="light"] .telegram-product-card[aria-selected="true"] {
background-image: linear-gradient(0deg, rgba(25, 25, 24, .05), rgba(25, 25, 24, .05));
}
.telegram-product-card:not([aria-selected="true"]) b {
color: var(--muted);
}
.mobile-dock a.active:not(:focus-visible) {
border-color: transparent;
box-shadow: none;
}
.mobile-dock-indicator {
border-color: transparent;
}
.mobile-menu-list a.active:not(:focus-visible),
.mobile-menu-list a.active > span {
border-color: transparent;
}
.filters .filter.active,
.games-page .filters .filter.active,
.services-page .filters .filter.active,
.games-page .catalog-category-tabs .filter.active,
.catalog-category-tabs .filter.active {
box-shadow: none;
}
.mobile-dock a.active:not(:focus-visible),
.mobile-menu-list a.active:not(:focus-visible),
.filters .filter.active:not(:focus-visible),
.catalog-category-tabs .filter.active:not(:focus-visible),
.quick.active:not(:focus-visible),
[data-stars-preset].active:not(:focus-visible),
.stars-presets button.active:not(:focus-visible),
.telegram-product-card[aria-selected="true"]:not(:focus-visible) {
border-color: transparent;
box-shadow: none;
background-color: var(--accent-wash);
background-image: none;
color: var(--gold-text);
}
.mobile-dock a.active svg,
.mobile-menu-list a.active svg { color: var(--gold-text); }
.mobile-dock a.active > span,
.mobile-menu-list a.active > span { border-color: transparent; background: transparent; }
.telegram-product-card[aria-selected="true"] b { color: var(--gold-text); }
.telegram-page .field label,
.telegram-page .telegram-recipient-field label { font-size: 12px; }
.telegram-page .input-wrap input { border-radius: 12px; font-size: 15px; }
.telegram-page .button.telegram-submit,
.button.telegram-submit {
min-height: 54px;
border: 0;
border-radius: 14px;
padding-inline: 12px;
font-size: 16px;
}
.home-order-layout.compact-action .quick.active:not(:focus-visible),
.preset-row .quick.active:not(:focus-visible),
.stars-presets button.active:not(:focus-visible),
.stars-presets button[aria-pressed="true"]:not(:focus-visible),
.telegram-page .stars-presets button.active:not(:focus-visible),
[data-theme="light"] .quick.active:not(:focus-visible),
[data-theme="light"] .filter.active:not(:focus-visible),
[data-theme="light"] .telegram-product-card[aria-selected="true"]:not(:focus-visible) {
border-color: transparent;
box-shadow: none;
background-color: var(--accent-wash);
background-image: none;
color: var(--gold-text);
}
@media (max-width: 780px) {
.telegram-page .telegram-summary .telegram-submit,
.telegram-page .telegram-summary [data-telegram-add] {
position: static;
left: auto;
right: auto;
bottom: auto;
width: 100%;
box-shadow: none;
}
.telegram-page .workspace-side.action-only {
border: 0;
background: transparent;
padding: 8px 12px 12px;
}
.telegram-page main.page {
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
}
.mobile-dock,
.mobile-menu-panel,
.catalog-sort-menu {
isolation: isolate;
background: var(--glass);
border-color: var(--glass-edge);
box-shadow: var(--sheen);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
.mobile-dock,
.catalog-sort-menu {
transform: translateZ(0);
}
.mobile-menu-panel {
background: var(--glass-2);
}
[data-theme="light"] .mobile-dock,
[data-theme="light"] .catalog-sort-menu {
background: var(--glass);
border-color: var(--glass-edge);
box-shadow: var(--sheen), 0 8px 24px rgba(55, 45, 21, .07);
}
[data-theme="light"] .mobile-menu-panel {
background: var(--glass-2);
border-color: var(--glass-edge);
}
@media (max-width: 780px) {
}
.launch-icon,
.launch-icon-3d,
.home-hero-art,
.home-hero-panel,
.home-showcase-art,
.rank-crest {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.quiet-lead {
margin: 0 0 18px;
max-width: 42em;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
.quiet-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 8px 0 0;
}
.quiet-actions .button.ghost {
background: transparent;
border: 1px solid var(--line-strong);
color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
.site-header,
.mobile-dock,
.mobile-menu-panel,
.checkout-header,
.catalog-sort-menu {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--glass-2);
}
}
.eco-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 8px 0 28px;
}
.eco-card {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
min-height: 220px;
border: 1px solid var(--line);
border-radius: var(--radius-panel);
background: var(--surface);
padding: 22px 22px 18px;
}
.eco-card img {
width: 72px;
height: 72px;
object-fit: contain;
}
.eco-card h2 { font-size: 22px; }
.eco-card p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.45;
}
.eco-card .button { justify-self: start; }
.eco-card .button.ghost {
background: transparent;
border: 1px solid var(--line-strong);
color: var(--text);
}
.eco-kicker {
margin: 0 0 8px;
color: var(--gold-text);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.host-panel {
border: 1px solid var(--glass-edge);
border-radius: var(--radius-panel);
background: var(--glass);
box-shadow: var(--sheen);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
padding: 22px;
}
.host-panel + .host-panel { margin-top: 12px; }
.host-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--line);
font-size: 14px;
}
.host-row:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 780px) {
.eco-grid { grid-template-columns: 1fr; }
.eco-card { min-height: 0; }
}
.chip-rail {
display: flex;
flex-wrap: wrap;
gap: 8px;
overflow: visible;
margin: 8px 0 14px;
padding: 8px 4px 12px;
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip {
flex: none;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-2);
color: var(--muted);
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
display: inline-flex;
align-items: center;
}
a.chip:hover { color: var(--text); border-color: var(--line-strong); }
a.chip:focus-visible,
a.mode-card:focus-visible,
a.help-topic:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.chip.is-on {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
color: var(--gold-text);
}
.mode-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0 0 22px;
}
.mode-card {
position: relative;
aspect-ratio: 3 / 4;
isolation: isolate;
overflow: visible;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--bg-2);
color: var(--text);
}
.mode-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 17px;
transition: transform 320ms var(--spring);
}
.mode-card:hover img,
.mode-card:focus-visible img { transform: scale(1.045); }
.mode-card-meta {
position: absolute;
z-index: 1;
inset: auto 0 0;
padding: 64px 14px 14px;
box-shadow: inset 0 -92px 54px -18px rgba(18, 19, 21, .94);
display: grid;
gap: 2px;
pointer-events: none;
border-radius: 0 0 17px 17px;
}
.mode-card-meta i {
font-style: normal;
color: var(--gold-text);
font-size: 11px;
font-weight: 800;
}
.mode-card-meta b {
font-family: var(--display);
font-size: clamp(15px, 1.6vw, 18px);
letter-spacing: .04em;
text-transform: uppercase;
}
.mode-card-meta small {
color: var(--muted);
font-size: 12px;
}
.mode-card.is-empty { cursor: default; }
.play-stage {
position: relative;
min-height: clamp(280px, 46vh, 440px);
overflow: hidden;
border-radius: var(--radius-card);
background: var(--surface-sunken, #0e0f11);
margin: 8px 0 16px;
box-shadow: inset 240px 0 90px -24px rgba(10, 11, 13, .92);
}
@keyframes slarp-stage-drift {
0%, 100% { transform: scale(1.04) translate3d(0, 0, 0); }
50% { transform: scale(1.09) translate3d(-1.4%, 1.2%, 0); }
}
.play-stage-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
pointer-events: none;
animation: slarp-stage-drift 14s ease-in-out infinite;
}
.play-stage-copy {
position: relative;
z-index: 1;
max-width: min(58%, 560px);
min-height: inherit;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
padding: clamp(18px, 4vw, 40px);
}
.play-stage-copy h1 { font-size: clamp(28px, 4.4vw, 48px); }
.play-stage-copy p { margin: 0; color: var(--muted); max-width: 38em; }
.play-stage-compact {
min-height: 220px;
background: var(--bg);
}
.play-stage-compact .play-stage-copy { max-width: none; }
.page-hero-3d {
width: 72px;
height: 72px;
object-fit: contain;
animation: slarp-hero-float 5.2s ease-in-out infinite;
}
.legal-copy .page-hero-3d { margin: 8px 0 16px; }
.help-topic-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0 0 18px;
}
.help-topic {
min-height: 44px;
border: 1px solid var(--glass-edge);
border-radius: var(--radius-panel);
background: var(--glass);
box-shadow: var(--sheen);
padding: 16px;
display: grid;
gap: 8px;
color: var(--text);
}
.help-topic img {
width: 56px;
height: 56px;
object-fit: contain;
animation: slarp-hero-float 5.2s ease-in-out infinite;
}
.help-topic b {
font-family: var(--display);
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
}
.help-topic small { color: var(--muted); font-size: 13px; }
.help-head-lead,
.page-lead {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.page-lead {
justify-content: space-between;
margin: 8px 0 14px;
}
.device-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.device-chip {
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface-2);
color: var(--muted);
font-size: 13px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
}
.device-chip img {
width: 28px;
height: 28px;
object-fit: contain;
}
.device-chip.is-on {
border-color: var(--accent-border-soft);
background: var(--accent-wash);
color: var(--gold-text);
}
.device-chip.is-off { opacity: .55; }
.route-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 12px 0 22px;
}
.tariff-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 12px 0 22px;
}
.tariff-card {
border: 1px solid var(--line);
border-radius: var(--radius-panel);
background: var(--surface);
padding: 22px 20px;
display: grid;
gap: 8px;
}
.tariff-card span {
color: var(--muted);
font-size: 13px;
font-weight: 700;
}
.tariff-card b {
font-family: var(--display);
font-size: 20px;
letter-spacing: .03em;
text-transform: uppercase;
}
.home-quick-order .home-order-layout.compact-action {
background: var(--glass);
border: 1px solid var(--glass-edge);
box-shadow: var(--sheen);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
.launch-icon,
.launch-icon-3d,
.home-hero-art,
.home-hero-panel,
.home-showcase-art,
.rank-crest,
.mode-card img,
.play-stage-art,
.page-hero-3d,
.help-topic img,
.device-chip img {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media (max-width: 900px) {
.mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
.mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mode-grid-desktop { display: none; }
.play-stage { min-height: 320px; box-shadow: inset 0 -150px 70px -24px rgba(10, 11, 13, .9); }
.play-stage-art { object-position: 72% center; }
.play-stage-copy { max-width: 92%; padding: 18px 16px; }
.route-compare,
.tariff-grid,
.help-topic-grid { grid-template-columns: 1fr; }
.host-panel {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--glass-2);
}
.home-quick-order .home-order-layout.compact-action {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--glass-2);
}
}
@media (prefers-reduced-motion: reduce) {
.mode-card img { transition: none; }
.mode-card:hover img,
.mode-card:focus-visible img { transform: none; }
.page-hero-3d,
.help-topic img,
.play-stage-art { animation: none; }
.host-panel,
.help-topic {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--glass-2);
}
.home-quick-order .home-order-layout.compact-action {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--glass-2);
}
}
[data-theme="light"] .home-hero-art {
background: #131110;
border-radius: 26%;
}
.home-hero-copy .quiet-actions { margin-top: 2px; }
.home-hero-copy .quiet-actions .button {
min-height: 44px;
height: 44px;
padding-inline: 16px;
}
.service-launchpad.product-switch.eco-switch {
border: 0;
background: transparent;
box-shadow: none;
padding: 4px 0 8px;
margin: 4px 0 10px;
}
.service-launchpad.product-switch.eco-switch .launch-icon,
.service-launchpad.product-switch.eco-switch .launch-service.selected .launch-icon {
background: transparent;
border-color: transparent;
}
.service-launchpad.product-switch.eco-switch .launch-service.selected .launch-icon {
border-color: var(--accent-border-soft);
}
.stage-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: clamp(20px, 4vh, 40px) 0 8px;
}
.stage-hero h1 {
max-width: 16ch;
font-size: clamp(30px, 5.6vw, 52px);
}
.stage-hero > p {
margin: 0;
max-width: 36em;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}
.stage-hero .quiet-actions { justify-content: center; }
.stage-hero .page-hero-3d {
width: 96px;
height: 96px;
}
.forum-preview {
margin: 18px 0 8px;
padding: 6px;
border: 1px solid var(--glass-edge);
border-radius: var(--radius-panel);
background: var(--glass);
box-shadow: var(--sheen);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
.thread-row {
min-height: 64px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 16px;
color: var(--text);
}
.thread-row + .thread-row { border-top: 1px solid var(--hairline); }
.thread-row b {
display: block;
font-family: var(--display);
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
}
.thread-row small {
color: var(--muted);
font-size: 13px;
}
.thread-row i {
font-style: normal;
color: var(--muted-2);
font-size: 12px;
font-weight: 700;
}
a.thread-row:hover { background: var(--accent-wash); }
a.thread-row:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.help-topic-grid { gap: 14px; }
.help-topic { padding: 20px 18px; }
.play-stage { margin: 12px 0 20px; }
@media (max-width: 780px) {
.forum-preview {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--glass-2);
}
.stage-hero h1 { max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) {
.forum-preview {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--glass-2);
}
}
:focus-visible {
outline: 2px solid var(--text, #F4EFE4) !important;
outline-offset: 2px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
outline: 2px solid var(--text, #F4EFE4) !important;
outline-offset: 2px;
}
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
outline: none !important;
}
input:is(:focus, :focus-visible),
textarea:is(:focus, :focus-visible),
select:is(:focus, :focus-visible),
.site-search input:is(:focus, :focus-visible),
.input-wrap input:is(:focus, :focus-visible),
.input-wrap:focus-within input,
.amount-input input:is(:focus, :focus-visible),
.field select:is(:focus, :focus-visible),
.catalog-search input:is(:focus, :focus-visible),
.league-toolbar-search input:is(:focus, :focus-visible),
.product-choice-search:is(:focus, :focus-visible),
.choice-search:is(:focus, :focus-visible),
input[type="search"]:is(:focus, :focus-visible),
input[type="text"]:is(:focus, :focus-visible),
input[type="number"]:is(:focus, :focus-visible),
input[type="email"]:is(:focus, :focus-visible),
input[type="password"]:is(:focus, :focus-visible),
.slarp-join-field input:is(:focus, :focus-visible),
.find input:is(:focus, :focus-visible),
.compose input:is(:focus, :focus-visible),
.compose textarea:is(:focus, :focus-visible) {
box-shadow: none !important;
border-color: var(--text, #F4EFE4) !important;
}
.amount-field:focus-within,
.stars-quantity-input:focus-within {
outline: none !important;
box-shadow: none !important;
border-color: var(--text, #F4EFE4) !important;
}
.amount-field:has(> input:focus-visible),
.stars-quantity-input:has(> input:focus-visible) { outline: 2px solid var(--text, #F4EFE4) !important; outline-offset: 2px !important; }
.amount-field > input:focus-visible,
.stars-quantity-input > input:focus-visible { outline: none !important; }
.amount-field:focus-within > input,
.stars-quantity-input:focus-within > input {
background: transparent !important;
}
.store-page .home-order-card .input-wrap:focus-within input,
.store-page .home-order-card .amount-field:focus-within {
border-color: transparent !important;
}
.store-page .home-order-card .amount-field:focus-within > input {
background: transparent !important;
}
.slarp-play-choice:has(input:focus-visible),
.slarp-play-pay-choice:has(input:focus-visible),
.slarp-prices-term:has(input:focus-visible),
.slarp-prices-pay-row:has(input:focus-visible),
.slarp-prices-switch-opt:has(input:focus-visible) { outline: 2px solid var(--text, #F4EFE4) !important; outline-offset: 2px !important; }
.slarp-join-field,
.slarp-join-field:focus-within,
.catalog-search,
.catalog-search:focus-within,
.league-toolbar-search,
.league-toolbar-search:focus-within,
.site-search,
.site-search:focus-within,
.input-wrap,
.input-wrap:focus-within,
.find,
.find:focus-within {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.amount-field,
.stars-quantity-input,
.slarp-play-choice,
.slarp-play-pay-choice {
overflow: hidden;
}
.profile-page .profile-dashboard-grid {
align-items: stretch !important;
}
.profile-page .orders-section {
min-height: 100%;
display: flex !important;
flex-direction: column;
}
.profile-page .orders-empty {
flex: 1 1 auto;
min-height: 0 !important;
margin-top: 8px;
padding: 28px 22px;
border: 0 !important;
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
align-content: center;
}
.profile-page .orders-empty-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.profile-page .orders-empty .button.ghost {
border: 1px solid rgba(255, 255, 255, 0.14);
background: transparent;
color: var(--m3-on-surface, #e7e2da);
}
.profile-page .order-filters {
border: 0 !important;
background: rgba(255, 255, 255, 0.04);
border-radius: 12px !important;
padding: 4px !important;
gap: 4px !important;
}
.profile-page .order-filters button {
border: 0 !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.profile-page .order-filters button.active,
.profile-page .order-filters button.active::after {
box-shadow: none !important;
}
.profile-page .order-filters button.active {
background: rgba(255, 255, 255, .10) !important;
color: var(--m3-primary, #f0c866) !important;
}
.profile-page .order-filters button.active::after {
display: none !important;
}
.profile-page .rank-grid {
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
border: 0 !important;
border-radius: 16px !important;
overflow: hidden;
background: rgba(255, 255, 255, 0.035) !important;
}
.profile-page .rank-card,
.profile-page .rank-card:nth-child(2n),
.profile-page .rank-card:nth-child(n+3) {
width: auto !important;
min-width: 0 !important;
border: 0 !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
}
.profile-page .rank-card:last-child {
border-right: 0 !important;
}
.profile-page .rank-card.active {
background: rgba(255, 255, 255, .08) !important;
box-shadow: none !important;
outline: none !important;
}
.profile-page .rank-card:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
.profile-page .rank-card.active:hover {
background: rgba(255, 255, 255, .10) !important;
}
.profile-page .referral-copy,
.profile-page .profile-logout,
.profile-page .button.secondary {
border: 0 !important;
border-radius: 12px !important;
}
.profile-page .referral-copy,
.profile-page .button:not(.ghost) {
background: var(--m3-primary, #f0c866) !important;
color: var(--m3-on-primary, #171310) !important;
}
.profile-page .button.secondary.full,
.profile-page a.button.secondary {
background: rgba(255, 255, 255, .06) !important;
color: var(--m3-on-surface, #e7e2da) !important;
}
.profile-page .referral-link input {
border: 0 !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.06) !important;
}
.profile-page .profile-overview,
.profile-page .profile-section {
border-color: rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
.profile-page .login-method {
border: 0 !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.05) !important;
}
.profile-page .login-method.login-method-primary,
.profile-page .login-method.telegram {
background: rgba(255, 255, 255, .08) !important;
}
@media (max-width: 900px) {
.profile-page .rank-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.profile-page .rank-card:nth-child(2n) {
border-right: 0 !important;
}
.profile-page .rank-card:nth-child(n+3) {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
}
@media (max-width: 560px) {
.profile-page .rank-grid {
grid-template-columns: 1fr !important;
}
.profile-page .rank-card,
.profile-page .rank-card:nth-child(2n),
.profile-page .rank-card:nth-child(n+3) {
border-right: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.profile-page .rank-card:first-child {
border-top: 0 !important;
}
}
:root {
--m3-primary: #f0c866;
--m3-on-primary: #352100;
--m3-surface: #121315;
--m3-surface-container: #1b1d20;
--m3-surface-container-high: #25282c;
--m3-surface-container-highest: #303338;
--surface-sunken: #0e0f11;
--overlay: rgba(20, 21, 24, .98);
--scrim: rgba(8, 9, 12, .58);
--fill-rest: rgba(255, 255, 255, .035);
--fill-hover: rgba(255, 255, 255, .06);
--fill-selected: rgba(255, 255, 255, .08);
--fill-selected-hover: rgba(255, 255, 255, .10);
--gold-line: rgba(233, 200, 124, .45);
--m3-on-surface: #e7e2da;
--m3-on-surface-variant: #c9c0b1;
--shell-header-h: 88px;
--shell-gutter: 48px;
--shell-rail-max: 1320px;
--shell-rail: min(calc(100% - var(--shell-gutter)), var(--shell-rail-max));
--shell-header-top: 14px;
--shell-content-gap: 24px;
--m3-outline: #938a7b;
--m3-outline-variant: rgba(231, 226, 218, .16);
--m3-error: #ffb4ab;
--m3-success: #a6d5a7;
--m3-radius-xs: 8px;
--m3-radius-sm: 12px;
--m3-radius-md: 16px;
--m3-radius-lg: 24px;
--m3-radius-xl: 32px;
--glass-surface: rgba(24, 26, 30, .68);
--glass-surface-strong: rgba(24, 26, 30, .84);
--glass-border: rgba(255, 255, 255, .12);
--glass-highlight: rgba(255, 255, 255, .10);
--glass-shadow: 0 18px 55px rgba(0, 0, 0, .28), inset 0 1px 0 var(--glass-highlight);
--product-hero-min-h: 300px;
--product-hero-pad-y: 28px;
--product-hero-pad-x: 32px;
--product-hero-radius: 20px;
--product-hero-gap: 20px 28px;
--product-hero-bg:
linear-gradient(100deg, rgba(27, 29, 32, 0) 38%, rgba(37, 40, 44, 0.6)),
radial-gradient(ellipse 48% 90% at 78% 55%, rgba(233, 200, 124, 0.06), transparent 70%),
#1b1d20;
--sh-hero-min-h: 200px;
--sh-art-box: 180px;
--art-fit: 1;
--art-dx: 0%;
--art-dy: 0%;
--sh-art-inset: 56px;
--sh-art-gap: 32px;
--sh-hero-pad-y: 32px;
--sh-hero-pad-x: 40px;
--sh-hero-gap: 12px;
--sh-hero-actions-gap: 20px;
--sh-hero-title-xl: clamp(28px, 3.2vw, 44px);
--sh-hero-title-md: clamp(24px, 2.6vw, 36px);
--sh-hero-title-sm: clamp(26px, 2.4vw, 32px);
--sh-hero-lead-size: 15px;
--sh-hero-cta-h: 52px;
--sh-hero-cta2-h: 52px;
--sh-hero-showcase-min-h: 280px;
--sh-hero-band-min-h: 168px;
--sh-hero-art-xl: 240px;
--sh-hero-art-md: 150px;
--sh-hero-art-sm: 120px;
--sh-hero-art-m: 96px;
--cyan: #73cdb9;
--page-gutter: clamp(16px, 3.2vw, 40px);
--sec-gap: 48px;
}
@media (max-width: 1024px) {
:root { --shell-gutter: 28px; }
}
@media (max-width: 1023px) {
:root { --sh-hero-min-h: 180px; --sh-art-box: 140px; --sh-art-inset: 40px; --sh-art-gap: 24px; }
}
@media (max-width: 780px) {
:root {
--shell-gutter: 32px;
--sh-hero-min-h: 0px; --sh-art-box: 88px; --sh-art-inset: 16px; --sh-art-gap: 16px;
--sh-hero-pad-y: 20px; --sh-hero-pad-x: 16px;
--sh-hero-lead-size: 14px; --sh-hero-cta2-h: 48px;
--sh-hero-art-md: 96px; --sh-hero-art-sm: 96px;
--sec-gap: 32px;
}
}
@media (max-width: 360px) {
:root { --shell-gutter: 24px; }
}
html { background: var(--m3-surface); }
body {
display: block !important;
padding-top: 0 !important;
background: var(--m3-surface) !important;
color: var(--m3-on-surface);
}
.site-header,
.checkout-header {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
isolation: auto !important;
transform: none !important;
}
.mobile-menu-panel,
.mobile-dock,
.catalog-sort-menu {
background: rgba(27, 29, 32, .92) !important;
border-color: transparent !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, .38) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
backdrop-filter: blur(18px) saturate(1.1) !important;
}
.site-header {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
z-index: 20 !important;
height: var(--shell-header-h, 88px) !important;
margin: var(--shell-header-top, 14px) 0 0 !important;
border: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
transform: none !important;
}
.header-main {
width: var(--shell-rail, min(calc(100% - 48px), 1320px)) !important;
margin-inline: auto !important;
height: 100% !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: auto 1fr auto !important;
gap: clamp(18px, 3vw, 40px) !important;
padding-inline: 0 !important;
}
.container {
width: var(--shell-rail, min(calc(100% - 48px), 1320px)) !important;
}
.next-primary-nav {
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(4px, 1vw, 10px);
}
.next-primary-nav a {
min-height: 48px;
display: inline-flex;
align-items: center;
border: 0 !important;
border-bottom: 0 !important;
border-radius: 12px;
padding: 0 clamp(12px, 1.4vw, 20px);
color: var(--text, #F4EFE4) !important;
font-family: var(--display) !important;
font-size: clamp(15px, 1.35vw, 18px) !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
opacity: .88;
transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
}
.next-primary-nav a:hover,
.next-primary-nav a.active {
border-bottom-color: transparent !important;
background: rgba(255, 255, 255, .07) !important;
color: var(--m3-primary, var(--gold)) !important;
opacity: 1;
}
.header-main .site-search,
.site-search,
.shell-search-space { display: none !important; }
.brand-mark, .nav-row a.active, .mobile-dock a.active { color: var(--m3-primary) !important; }
.header-login {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 22px;
border: 1px solid var(--line, rgba(255, 255, 255, .14));
border-radius: 12px;
background: rgba(255, 255, 255, .06) !important;
color: var(--text, #F4EFE4) !important;
font-family: var(--display) !important;
font-size: clamp(14px, 1.2vw, 16px) !important;
font-weight: 850 !important;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.lang-switch {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
border: 1px solid var(--line, rgba(255, 255, 255, .14));
border-radius: 12px;
background: rgba(255, 255, 255, .04);
color: var(--muted, #B3AA98) !important;
font-family: var(--display) !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
@media (max-width: 780px) {
html:not(.prices-bar-on) body:has(.mobile-dock) .header-login { display: none; }
html:not(.prices-bar-on) body:has(.mobile-dock) .lang-switch { display: none; }
}
.header-account {
min-height: 48px !important;
max-width: min(240px, 42vw);
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 0 12px 0 8px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.05) !important;
color: var(--m3-on-surface, #F4EFE4) !important;
font-family: var(--display) !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
}
.header-account:hover,
.header-account:focus-visible {
background: rgba(255, 255, 255, 0.09) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: var(--m3-on-surface, #F4EFE4) !important;
filter: none !important;
}
.header-account-avatar {
width: 32px !important;
height: 32px !important;
flex: none !important;
display: grid !important;
place-items: center !important;
border-radius: 10px !important;
background: rgba(255, 255, 255, .14) !important;
color: var(--text, #F4EFE4) !important;
font-size: 13px !important;
font-weight: 850 !important;
line-height: 1 !important;
text-transform: uppercase !important;
}
.header-account-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon-button,
.site-header .icon-button {
background: rgba(255, 255, 255, .04) !important;
border-color: rgba(255,255,255,.12) !important;
color: var(--text, #F4EFE4) !important;
}
.icon-button:hover { background: rgba(255, 255, 255, .09) !important; }
.site-header .icon-button {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
padding: 0 !important;
aspect-ratio: 1 !important;
border-radius: 12px !important;
}
.icon-button[aria-label="Закрыть"],
.icon-button[aria-label="Close"],
.icon-button[data-steam-help-close],
.icon-button[data-close-auth],
.icon-button[data-close-create],
.icon-button[data-close-password],
.icon-button[data-menu-close],
.modal-close,
button.modal-close,
button[data-modal-close]:not(.modal-backdrop) {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 12px !important;
background: rgba(32, 34, 38, 0.98) !important;
color: #f4efe4 !important;
display: grid !important;
place-items: center !important;
aspect-ratio: 1 !important;
box-shadow: none !important;
flex: none !important;
line-height: 1 !important;
font-size: 22px !important;
font-weight: 500 !important;
}
.icon-button[aria-label="Закрыть"]:hover,
.icon-button[aria-label="Close"]:hover,
.icon-button[data-steam-help-close]:hover,
.icon-button[data-close-auth]:hover,
.icon-button[data-close-create]:hover,
.icon-button[data-close-password]:hover,
.icon-button[data-menu-close]:hover,
.modal-close:hover,
button.modal-close:hover,
button[data-modal-close]:not(.modal-backdrop):hover {
background: rgba(48, 50, 56, 0.98) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
.icon-button[aria-label="Закрыть"] svg,
.icon-button[aria-label="Close"] svg,
.icon-button[data-close-auth] svg,
.icon-button[data-close-create] svg,
.icon-button[data-close-password] svg,
.icon-button[data-menu-close] svg {
width: 18px !important;
height: 18px !important;
display: block !important;
}
.brand:hover img,
.brand:focus-visible img {
opacity: 1 !important;
transform: none !important;
}
.brand-word {
filter: brightness(0) invert(96%) sepia(8%) saturate(320%) hue-rotate(358deg) !important;
}
.brand:hover .brand-word,
.brand:focus-visible .brand-word {
filter: brightness(0) invert(96%) sepia(8%) saturate(320%) hue-rotate(358deg) !important;
}
.menu-button, .header-nav { display: none !important; }
.home-hero { margin: var(--shell-content-gap, 24px) 0 16px !important; padding: 0 !important; }
.home-hero-panel {
position: relative !important;
min-height: var(--product-hero-min-h) !important;
height: auto !important;
overflow: hidden !important;
border: 0 !important;
border-radius: var(--product-hero-radius) !important;
padding: var(--product-hero-pad-y) var(--product-hero-pad-x) !important;
background: var(--product-hero-bg) !important;
box-shadow: none !important;
}
.home-hero-panel::after { display: none !important; }
.store-page .home-hero-panel::after { display: none !important; }
.home-hero-copy {
position: relative !important;
z-index: 2 !important;
padding: 0 !important;
max-width: 34em !important;
display: grid !important;
gap: 8px !important;
align-content: center !important;
min-height: calc(var(--product-hero-min-h) - var(--product-hero-pad-y) * 2) !important;
padding-right: min(42%, 280px) !important;
}
.home-hero-copy h1 {
max-width: 16ch;
margin: 0 !important;
font-family: var(--display) !important;
font-size: clamp(28px, 4vw, 44px) !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
line-height: 1.05 !important;
text-transform: uppercase !important;
}
.home-hero-copy p {
max-width: 42em;
margin: 0 !important;
color: var(--m3-on-surface-variant) !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
.home-hero-copy .button,
.home-hero-cta {
width: fit-content;
min-height: 56px !important;
margin-top: 4px !important;
padding: 0 28px !important;
font-family: var(--display) !important;
font-size: 15px !important;
font-weight: 850 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
border-radius: 14px !important;
}
.home-hero-panel img.home-hero-art,
.home-hero-art {
background: transparent !important;
border-radius: 0 !important;
top: var(--product-hero-pad-y) !important;
right: 12px !important;
bottom: 0 !important;
width: min(40%, 280px) !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
object-position: right bottom !important;
}
[data-theme="light"] .home-hero-art { background: transparent !important; }
.home-hero-panel img.home-hero-art { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45)); }
.button {
border-radius: var(--m3-radius-md) !important;
background: var(--m3-primary) !important;
color: var(--m3-on-primary) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.32) !important;
transition: transform 180ms cubic-bezier(.2,.8,.2,1), filter 180ms ease, box-shadow 180ms ease !important;
}
.button:hover { transform: translateY(-2px) !important; filter: brightness(1.08) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.38) !important; }
.button:active { transform: translateY(0) scale(.98) !important; }
.button:not(.ghost):not(.secondary):is(:disabled, [aria-disabled="true"]) {
background: var(--m3-surface-container-highest, #303338) !important;
color: var(--color-disabled, #8A8272) !important;
box-shadow: none !important; filter: none !important; transform: none !important;
opacity: 1 !important; cursor: not-allowed;
}
.button.secondary, .button.ghost { background: transparent !important; color: var(--m3-on-surface) !important; border-color: var(--m3-outline-variant) !important; box-shadow: none !important; }
.home-hero-panel .button:not(.ghost):focus-visible { outline-color: var(--m3-on-primary) !important; outline-offset: -5px !important; }
.home-order-layout .button:not(.ghost):not(.secondary):focus-visible { outline-color: var(--m3-on-primary) !important; outline-offset: -5px !important; }
.sh-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--product-hero-radius); background: var(--product-hero-bg); }
.sh-hero--showcase,
.sh-hero--band {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "copy" "actions";
align-content: center;
min-height: var(--sh-hero-min-h);
padding: var(--sh-hero-pad-y) calc(var(--sh-art-inset) + var(--sh-art-box) + var(--sh-art-gap)) var(--sh-hero-pad-y) var(--sh-hero-pad-x);
}
.sh-hero-copy { grid-area: copy; position: relative; z-index: 1; display: grid; justify-items: start; align-content: center; gap: var(--sh-hero-gap); min-width: 0; }
.sh-hero-actions { grid-area: actions; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--sh-hero-actions-gap); }
.sh-hero-actions:not(:has(> :not(:empty):not([hidden]))) { display: none; }
.sh-hero .sh-hero-title,
.sh-hero--step .sh-hero-title {
max-width: none;
margin: 0;
color: var(--m3-on-surface);
font-family: var(--display);
font-size: var(--sh-hero-title-xl);
font-weight: 800;
letter-spacing: .01em;
line-height: 1.05;
text-transform: uppercase;
text-wrap: balance;
}
.sh-hero--step .sh-hero-title { font-size: var(--sh-hero-title-sm); }
.sh-hero .sh-hero-lead { max-width: 60em; margin: 0; color: var(--m3-on-surface-variant); font-size: var(--sh-hero-lead-size); line-height: 1.5; }
.sh-hero-actions .button {
min-height: var(--sh-hero-cta-h);
padding: 0 28px;
border-radius: 14px !important;
font-family: var(--display);
font-size: 15px;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
.sh-hero-actions .button:is(.ghost, .secondary) { min-height: var(--sh-hero-cta2-h); }
.sh-hero-actions [data-download-panel] .button {
min-height: 44px;
padding: 0 10px;
border-radius: 16px !important;
font-family: var(--body);
font-size: 14px;
font-weight: 800;
letter-spacing: normal;
text-transform: none;
}
main [data-download-panel] .button {
padding-inline: 10px;
text-wrap: balance;
}
.sh-hero--showcase .sh-hero-art,
.sh-hero--band .sh-hero-art {
position: absolute;
z-index: 0;
top: 50%;
right: var(--sh-art-inset);
width: var(--sh-art-box);
height: var(--sh-art-box);
margin: calc(var(--sh-art-box) / -2) 0 0;
pointer-events: none;
}
.sh-hero--showcase .sh-hero-art img,
.sh-hero--band .sh-hero-art img {
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--sh-art-box) * var(--art-fit, .867));
max-width: none;
height: calc(var(--sh-art-box) * var(--art-fit, .867));
object-fit: contain;
transform: translate(calc(-50% + var(--art-dx, 0%)), calc(-50% + var(--art-dy, 0%)));
filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .42));
}
.sh-hero--step { display: grid; justify-items: center; gap: 12px; overflow: visible; border-radius: 0; background: none; text-align: center; }
.sh-hero--step .sh-hero-art { display: grid; place-items: center; margin: 0; pointer-events: none; }
.sh-hero--step .sh-hero-art img { width: var(--sh-hero-art-sm); height: var(--sh-hero-art-sm); object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .4)); }
@media (max-width: 780px) {
.sh-hero--showcase,
.sh-hero--band { align-content: start; padding: var(--sh-hero-pad-y) var(--sh-hero-pad-x); }
.sh-hero--showcase .sh-hero-copy,
.sh-hero--band .sh-hero-copy { align-content: start; min-height: calc(var(--sh-art-inset) + var(--sh-art-box) - var(--sh-hero-pad-y)); }
.sh-hero .sh-hero-title { font-size: clamp(19px, 6vw, 24px); }
.sh-hero .sh-hero-title,
.sh-hero .sh-hero-lead { max-width: calc(100% - var(--sh-art-box) - var(--sh-art-gap)); }
.sh-hero--showcase .sh-hero-art,
.sh-hero--band .sh-hero-art { top: var(--sh-art-inset); margin: 0; }
.sh-hero-actions { margin-top: 16px; }
.sh-hero-actions .button { width: 100%; }
}
@media (min-width: 781px) and (max-width: 1100px) {
.header-account .header-account-name { display: none !important; }
.header-account { min-width: 44px; gap: 0 !important; padding: 0 6px !important; }
}
@media (min-width: 781px) and (max-width: 900px) {
.header-main { gap: 16px !important; }
.next-primary-nav { gap: 2px; }
.next-primary-nav a { padding: 0 8px; font-size: 13px !important; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
.header-account { max-width: 180px; }
}
.sh-hero.sh-hero--slim {
--sh-art-box: 112px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "copy actions art";
align-items: center;
align-content: start;
column-gap: 24px;
min-height: 0;
margin: 0 0 24px;
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.sh-hero.sh-hero--slim .sh-hero-copy { grid-area: copy; align-content: center; gap: 6px; min-height: 0; }
.sh-hero.sh-hero--slim .sh-hero-title { max-width: none; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; }
.sh-hero.sh-hero--slim .sh-hero-lead { max-width: 60em; }
.sh-hero.sh-hero--slim .sh-hero-actions { grid-area: actions; margin: 0; }
.sh-hero.sh-hero--slim .sh-hero-art {
grid-area: art;
position: relative;
top: auto;
right: auto;
width: var(--sh-art-box);
height: var(--sh-art-box);
margin: 0;
pointer-events: none;
}
.sh-hero.sh-hero--slim .sh-hero-art img {
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--sh-art-box) * var(--art-fit, .867));
max-width: none;
height: calc(var(--sh-art-box) * var(--art-fit, .867));
object-fit: contain;
transform: translate(calc(-50% + var(--art-dx, 0%)), calc(-50% + var(--art-dy, 0%)));
filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4));
}
@media (max-width: 780px) {
.sh-hero.sh-hero--slim {
--sh-art-box: 56px;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "copy art" "actions actions";
column-gap: 16px;
margin-bottom: 16px;
}
.sh-hero.sh-hero--slim .sh-hero-title,
.sh-hero.sh-hero--slim .sh-hero-lead { max-width: none; }
.sh-hero.sh-hero--slim .sh-hero-title { font-size: 26px; }
.sh-hero.sh-hero--slim .sh-hero-actions { margin-top: 12px; }
.sh-hero.sh-hero--slim:has(> .sh-hero-actions) {
grid-template-areas: "copy art" "actions art";
row-gap: 6px;
}
.sh-hero.sh-hero--slim:has(> .sh-hero-actions) :where(.sh-hero-title) { line-height: 1; }
.sh-hero.sh-hero--slim:has(> .sh-hero-actions) > :where(.sh-hero-actions) { margin-top: 0; }
}
@media (max-width: 720px) {
.sh-hero.sh-hero--slim .sh-hero-lead:not(.sh-hero-lead--always) { display: none; }
}
.service-launchpad.product-switch,
.service-launchpad.category-switch,
.mj-category-row {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 12px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
overflow: visible !important;
}
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services,
.service-launchpad.category-switch .launch-service,
.mj-category-pill {
width: auto !important;
min-width: 0 !important;
min-height: 78px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
grid-template-rows: none !important;
justify-items: stretch !important;
padding: 14px 16px !important;
border: 1px solid var(--m3-outline-variant) !important;
border-radius: 16px !important;
background: var(--m3-surface-container) !important;
color: var(--m3-on-surface) !important;
text-align: left !important;
box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}
.service-launchpad.product-switch .launch-service:hover,
.service-launchpad.category-switch .launch-service:hover,
.mj-category-pill:hover {
background: var(--fill-hover) !important;
border-color: rgba(255, 255, 255, .22) !important;
color: var(--m3-on-surface) !important;
transform: translateY(-2px);
}
.service-launchpad.product-switch .launch-service.selected,
.service-launchpad.category-switch .launch-service.selected {
background: var(--fill-selected) !important;
border-color: transparent !important;
color: var(--m3-on-surface) !important;
transform: translateY(-2px);
}
.service-launchpad.product-switch .launch-service > span:not(.launch-icon),
.service-launchpad.category-switch .launch-service > span:not(.launch-icon),
.mj-category-copy {
min-width: 0;
display: grid !important;
gap: 3px;
order: 0;
flex: 1;
}
.service-launchpad.product-switch .launch-service b,
.service-launchpad.category-switch .launch-service b,
.mj-category-copy b {
max-width: none !important;
overflow: hidden;
color: var(--m3-on-surface) !important;
font-family: var(--display) !important;
font-size: 12px !important;
font-weight: 850 !important;
letter-spacing: .07em !important;
line-height: 1.15 !important;
text-transform: uppercase !important;
white-space: nowrap;
text-overflow: ellipsis;
}
.service-launchpad.product-switch .launch-service small,
.service-launchpad.category-switch .launch-service small,
.mj-category-copy small {
display: block !important;
overflow: hidden;
color: var(--m3-on-surface-variant) !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
white-space: nowrap;
text-overflow: ellipsis;
}
.service-launchpad.product-switch .launch-icon,
.service-launchpad.category-switch .launch-icon,
.mj-category-icon {
width: 48px !important;
height: 48px !important;
order: 2;
flex: none;
display: grid !important;
place-items: center !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--m3-primary) !important;
color: var(--m3-on-primary) !important;
overflow: hidden;
}
.service-launchpad.product-switch .launch-icon img,
.service-launchpad.category-switch .launch-icon img {
width: 72% !important;
height: 72% !important;
object-fit: contain;
filter: brightness(0) saturate(100%);
}
.mj-category-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
}
.service-launchpad.product-switch .launch-service i,
.service-launchpad.category-switch .launch-service i { display: none !important; }
.home-order-card,
.home-order-layout,
.identity-panel,
.profile-section,
.tariff-card,
.forum-preview,
.play-stage,
.legal-copy,
.payment-result-card {
border-color: var(--m3-outline-variant) !important;
border-radius: var(--m3-radius-lg) !important;
box-shadow: var(--glass-shadow) !important;
}
.home-order-card,
.home-order-layout,
.identity-panel,
.profile-section,
.tariff-card,
.legal-copy,
.payment-result-card { background: rgba(255,255,255,.045) !important; }
.legal-page { padding: var(--shell-content-gap, 24px) 0 64px !important; }
.legal-layout {
display: grid !important;
grid-template-columns: minmax(0, 720px) minmax(200px, 240px) !important;
grid-template-areas: "head toc" "copy toc";
justify-content: start !important;
align-items: start;
column-gap: clamp(48px, 6vw, 96px) !important;
row-gap: 0 !important;
}
.legal-copy { font-size: 16px !important; line-height: 1.6 !important; }
.legal-copy h3 { margin: 26px 0 10px; color: var(--m3-on-surface); font-size: 15px; font-weight: 700; line-height: 1.4; }
.legal-copy li > p { margin: 8px 0 0; }
.legal-copy li > ul { margin: 8px 0 4px; }
.legal-table-wrap { max-width: 100%; margin: 0 0 18px; overflow-x: auto; }
.legal-copy table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legal-copy th, .legal-copy td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--m3-outline-variant); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.legal-copy th { color: var(--m3-on-surface); font-weight: 600; }
.legal-copy td:first-child { width: 36%; color: var(--m3-on-surface); }
@media (max-width: 560px) {
.legal-copy table, .legal-copy tbody, .legal-copy tr, .legal-copy td { display: block; width: auto; }
.legal-copy thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.legal-copy tr { padding: 10px 0; border-bottom: 1px solid var(--m3-outline-variant); }
.legal-copy td { padding: 0; border: 0; }
.legal-copy td:first-child { width: auto; margin-bottom: 4px; font-weight: 600; }
}
@media (max-width: 1023px) {
.legal-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "head" "toc" "copy"; }
}
.games-page .catalog-grid.game-logo-grid,
.services-page .catalog-grid.game-logo-grid,
.services-page .voucher-service-switch {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
}
.catalog-search input,
.input-wrap input,
.field select,
.home-order-card input,
.home-order-card select {
border-color: var(--m3-outline-variant) !important;
border-radius: var(--m3-radius-sm) !important;
background: rgba(255,255,255,.055) !important;
}
.mode-card,
.catalog-card,
.home-showcase-card {
border-color: var(--m3-outline-variant) !important;
border-radius: var(--m3-radius-md) !important;
background: var(--m3-surface-container) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.14) !important;
}
.mode-card:hover,
.catalog-card:hover,
.home-showcase-card:hover { border-color: rgba(255, 255, 255, .22) !important; }
.service-launchpad.category-switch:not(.store-switch) { display: grid !important; }
@media (max-width: 780px) {
.service-launchpad.category-switch:not(.store-switch) { display: none !important; }
}
.games-page .home-hero,
.services-page .home-hero,
.telegram-page .home-hero {
margin: var(--shell-content-gap, 24px) 0 clamp(20px, 2.5vw, 28px) !important;
}
.games-page .game-logo-card,
.services-page .voucher-service-card {
--tile-fill-hot: rgba(255, 255, 255, .08);
border: 0 !important;
border-radius: 14px !important;
background: transparent !important;
box-shadow: none !important;
padding: 4px 4px 6px !important;
transition:
background 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.games-page .game-logo-card:hover,
.games-page .game-logo-card:focus-visible,
.games-page .game-logo-card.active,
.games-page .game-logo-card[aria-pressed="true"],
.games-page .game-logo-card.active:hover,
.games-page .game-logo-card[aria-pressed="true"]:hover {
background: transparent !important;
border-color: transparent !important;
transform: none !important;
box-shadow: none !important;
}
.services-page .voucher-service-card:hover,
.services-page .voucher-service-card:focus-visible {
background: var(--fill-hover) !important;
border-color: transparent !important;
transform: translateY(-1px) !important;
}
.services-page .voucher-service-card.active,
.services-page .voucher-service-card[aria-pressed="true"] {
background: var(--tile-fill-hot) !important;
border-color: transparent !important;
transform: none !important;
}
.services-page .voucher-service-card.active:hover,
.services-page .voucher-service-card[aria-pressed="true"]:hover {
background: var(--fill-selected-hover) !important;
transform: translateY(-1px) !important;
}
.games-page .catalog-grid.game-logo-grid {
width: 100% !important;
justify-items: stretch !important;
}
@media (min-width: 781px) {
.games-page .catalog-grid.game-logo-grid,
.services-page .catalog-grid.game-logo-grid {
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
gap: 12px 14px !important;
}
}
@media (max-width: 780px) {
:is(.games-page, .services-page) .catalog-grid.game-logo-grid { row-gap: 12px !important; }
}
.games-page .game-logo-card > span,
.games-page .game-logo-icon,
.services-page .voucher-service-card > span {
position: relative !important;
overflow: visible !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.games-page .game-logo-icon img,
.games-page .game-logo-card > span img,
.services-page .voucher-service-card > span img {
display: block !important;
border-radius: 18px !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}
.games-page .game-logo-card:hover .game-logo-icon,
.games-page .game-logo-card:focus-visible .game-logo-icon,
.games-page .game-logo-card.active .game-logo-icon,
.services-page .voucher-service-card:hover > span,
.services-page .voucher-service-card:focus-visible > span,
.services-page .voucher-service-card.active > span {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
.services-page .voucher-service-card:hover > span,
.services-page .voucher-service-card:focus-visible > span,
.services-page .voucher-service-card.active > span {
transform: none !important;
}
.games-page .game-logo-icon > i {
position: absolute !important;
top: -7px !important;
right: -8px !important;
z-index: 4 !important;
min-height: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 4px 8px !important;
border: 0 !important;
border-radius: 7px !important;
background: var(--surface-3, #303338) !important;
color: var(--text, #F4EFE4) !important;
font-family: var(--display) !important;
font-size: 10px !important;
font-style: normal !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
line-height: 1 !important;
text-transform: uppercase !important;
box-shadow: none !important;
pointer-events: none !important;
}
.games-page .game-logo-card:hover h3,
.services-page .voucher-service-card:hover b {
color: #f4efe4 !important;
}
.games-page .game-logo-card.active h3,
.services-page .voucher-service-card.active b {
color: var(--m3-primary) !important;
}
.store-page .header-main,
.store-page .store-rail {
width: var(--shell-rail, min(calc(100% - 48px), 1320px)) !important;
margin-inline: auto !important;
max-width: none !important;
padding-inline: 0 !important;
box-sizing: border-box !important;
}
.store-page .store-rail {
display: grid !important;
gap: 14px !important;
padding: 16px 0 clamp(28px, 4vw, 40px) !important;
}
.store-page .store-opening {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-content: center !important;
gap: 0 !important;
height: auto !important;
min-height: var(--sh-hero-min-h) !important;
max-height: none !important;
margin: 0 !important;
padding: var(--sh-hero-pad-y) calc(var(--sh-art-inset) + var(--sh-art-box) + var(--sh-art-gap)) var(--sh-hero-pad-y) var(--sh-hero-pad-x) !important;
overflow: hidden !important;
border: 0 !important;
border-radius: var(--product-hero-radius) !important;
background: var(--product-hero-bg) !important;
box-shadow: none !important;
}
.store-page .store-opening-copy {
position: relative !important;
z-index: 2 !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
display: grid !important;
justify-items: start !important;
align-content: center !important;
gap: 12px !important;
max-width: none !important;
}
.store-page .store-opening-copy h1 {
margin: 0 !important;
max-width: none !important;
color: var(--m3-on-surface) !important;
font-family: var(--display) !important;
font-size: var(--sh-hero-title-xl) !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
line-height: 1.05 !important;
text-transform: uppercase !important;
text-wrap: balance;
}
.store-page .store-opening-copy p {
margin: 0 !important;
max-width: 60em !important;
color: var(--m3-on-surface-variant) !important;
font-family: var(--body) !important;
font-size: var(--sh-hero-lead-size) !important;
line-height: 1.5 !important;
}
.store-page .store-opening-copy .button {
width: fit-content;
min-height: 52px !important;
margin-top: 8px !important;
padding: 0 28px !important;
font-family: var(--display) !important;
font-size: 15px !important;
font-weight: 850 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
border-radius: 14px !important;
}
.store-page .store-opening-visual {
position: absolute !important;
z-index: 1 !important;
display: block !important;
top: 50% !important;
right: var(--sh-art-inset) !important;
width: var(--sh-art-box) !important;
min-width: 0 !important;
height: var(--sh-art-box) !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: calc(var(--sh-art-box) / -2) 0 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
pointer-events: none !important;
}
.store-page .store-opening-visual .store-opening-poster,
.store-page .store-opening-visual .store-3d-loop {
position: absolute !important;
inset: 50% auto auto 50% !important;
width: calc(var(--sh-art-box) * var(--art-fit, .867)) !important;
height: calc(var(--sh-art-box) * var(--art-fit, .867)) !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
object-fit: contain !important;
object-position: center !important;
background: transparent !important;
border: 0 !important;
filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .42)) !important;
animation: none !important;
transform: translate(calc(-50% + var(--art-dx, 0%)), calc(-50% + var(--art-dy, 0%))) !important;
opacity: 1 !important;
}
.store-page .store-opening-visual .store-opening-poster { z-index: 1; }
.store-page .store-opening-visual .store-3d-loop { z-index: 2; }
.store-page .store-opening-visual.is-live .store-opening-poster {
display: none !important;
}
.store-page .store-opening-visual.is-static .store-3d-loop { display: none !important; }
.store-page .store-opening-visual.is-static .store-opening-poster {
display: block !important;
z-index: 2;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch,
:is(.store-page, .games-page, .services-page, .telegram-page) .service-launchpad.product-switch {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
justify-content: stretch !important;
align-items: stretch !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch .launch-service,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch .launch-all-services {
--store-tile-fill: rgba(255, 255, 255, 0.035);
--store-tile-fill-hot: rgba(255, 255, 255, .08);
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: 1 1 0 !important;
min-height: 52px !important;
height: auto !important;
display: grid !important;
grid-template-columns: 32px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
align-content: center !important;
align-items: center !important;
justify-items: start !important;
justify-self: stretch !important;
justify-content: start !important;
gap: 10px !important;
margin: 0 !important;
padding: 8px 14px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background: var(--store-tile-fill) !important;
box-shadow: none !important;
text-align: left !important;
overflow: hidden !important;
isolation: isolate !important;
box-sizing: border-box !important;
transition:
background 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
transform: none !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile:hover,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile:focus-visible {
background: var(--fill-hover) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: translateY(-1px) !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile.selected,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile.active.selected {
background: var(--store-tile-fill-hot) !important;
border-color: transparent !important;
box-shadow: none !important;
transform: none !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile.selected:hover,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile.active.selected:hover {
background: var(--fill-selected-hover) !important;
transform: translateY(-1px) !important;
box-shadow: none !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d {
position: relative !important;
width: 32px !important;
height: 32px !important;
aspect-ratio: 1 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
overflow: visible !important;
display: block !important;
animation: none !important;
flex: none !important;
order: 0 !important;
align-self: center !important;
justify-self: start !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d .store-tile-poster,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d .store-3d-loop {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
background: transparent !important;
border: 0 !important;
filter: none !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d .store-tile-poster { z-index: 1; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d .store-3d-loop { z-index: 2; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d.is-live .store-tile-poster {
display: none !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d.is-static .store-3d-loop,
:is(.store-page, .games-page, .services-page, .telegram-page) .motion-off .store-3d-loop { display: none !important; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d.is-static .store-tile-poster,
:is(.store-page, .games-page, .services-page, .telegram-page) .motion-off .store-tile-poster {
display: block !important;
z-index: 2;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-copy {
display: grid !important;
gap: 2px !important;
width: 100% !important;
min-width: 0 !important;
align-content: center !important;
justify-items: start !important;
order: 1 !important;
flex: none !important;
align-self: center !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-copy b,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile b {
margin: 0 !important;
min-height: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
color: var(--m3-on-surface) !important;
font-family: var(--display) !important;
font-size: 13px !important;
font-weight: 850 !important;
letter-spacing: 0.04em !important;
line-height: 1.15 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile:hover .store-tile-copy b {
color: #f4efe4 !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile.selected .store-tile-copy b,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile.selected b {
color: var(--m3-primary) !important;
}
.games-page .store-switch.product-switch,
.services-page .store-switch.product-switch,
.telegram-page .store-switch.product-switch {
margin: 0 0 12px !important;
}
.store-page .home-hero,
.store-page .home-hero-panel,
.store-page .home-hero-copy,
.store-page .store-hero {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.store-page .home-quick-order {
display: grid;
gap: 10px;
}
.store-page .home-order-layout {
gap: 10px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.store-page .home-order-card {
border: 0 !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.035) !important;
box-shadow: none !important;
padding: 14px 14px 12px !important;
}
.store-page .home-order-head,
.store-page .steam-flow-brand span {
font-family: var(--display) !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.store-page .field > label {
font-family: var(--body) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--m3-on-surface-variant) !important;
}
.store-page .home-order-summary {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.store-page .home-order-summary .button {
min-height: 48px !important;
font-family: var(--display) !important;
font-weight: 850 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.store-page .quick {
border: 0 !important;
border-radius: 10px !important;
background: var(--fill-rest) !important;
font-family: var(--display) !important;
font-weight: 750 !important;
transition: background 180ms ease !important;
}
.store-page .quick.active {
background: var(--fill-selected) !important;
color: var(--m3-primary) !important;
}
.store-page .quick:hover:not(.active) {
background: var(--fill-hover) !important;
color: var(--m3-on-surface) !important;
}
.store-page .home-order-fields {
display: grid !important;
gap: 8px !important;
}
.store-page .telegram-home-fields {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
}
.store-page .telegram-home-fields .home-recipient,
.store-page .telegram-home-fields .home-premium-packages,
.store-page .telegram-home-fields .home-presets {
grid-column: 1 / -1 !important;
min-width: 0 !important;
width: 100% !important;
}
.store-page .telegram-home-fields .home-recipient .input-wrap,
.store-page .telegram-home-fields .home-recipient .input-wrap input {
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}
.store-page .telegram-home-fields:has([data-telegram-panel="stars"]:not([hidden])) {
grid-template-columns: minmax(0, 1fr) minmax(136px, 168px) !important;
}
.store-page .telegram-home-fields:has([data-telegram-panel="stars"]:not([hidden])) .home-recipient {
grid-column: 1 !important;
}
.store-page .telegram-home-fields:has([data-telegram-panel="stars"]:not([hidden])) [data-telegram-panel="stars"]:not(.home-presets) {
grid-column: 2 !important;
}
.store-page .home-steam-fields {
grid-template-columns: minmax(0, 1fr) minmax(118px, 168px) !important;
grid-template-areas:
"labelrow labelrow"
"login amount"
"err-login err-amount"
"presets presets" !important;
align-items: stretch !important;
column-gap: 12px !important;
row-gap: 8px !important;
}
.store-page .home-steam-labelrow {
grid-area: labelrow !important;
display: flex !important;
align-items: baseline !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 8px 12px !important;
min-width: 0 !important;
}
.store-page .home-steam-labelrow label {
margin: 0 !important;
font-family: var(--body) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--m3-on-surface-variant) !important;
}
.store-page .home-steam-labelrow .field-help,
.store-page .home-order-layout.compact-action .home-steam-labelrow .field-help {
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #fff !important;
font-family: var(--body) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
text-transform: none !important;
text-decoration: underline !important;
text-decoration-color: var(--m3-on-surface-variant) !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
cursor: pointer !important;
transition: color 160ms ease, text-decoration-color 160ms ease !important;
}
.store-page .home-steam-labelrow .field-help:hover,
.store-page .home-steam-labelrow .field-help:focus-visible {
color: #e9c87c !important;
text-decoration-color: #e9c87c !important;
background: transparent !important;
}
.store-page .home-steam-login {
grid-area: login !important;
min-width: 0 !important;
}
.store-page .home-steam-amount {
grid-area: amount !important;
align-self: stretch !important;
height: 100% !important;
min-height: 48px !important;
}
.store-page .home-steam-login-error {
grid-area: err-login !important;
}
.store-page .home-steam-amount-error {
grid-area: err-amount !important;
}
.store-page .home-steam-fields > .home-presets {
grid-area: presets !important;
grid-column: 1 / -1 !important;
}
.store-page .home-order-card .input-wrap,
.store-page .home-order-card .input-wrap input,
.store-page .home-order-card .amount-field,
.store-page .home-order-card .amount-field > input {
border: none !important;
border-width: 0 !important;
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.store-page .home-order-card .input-wrap input,
.store-page .home-order-card .amount-field {
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.05) !important;
transition: background 180ms ease !important;
}
.store-page .home-order-card .input-wrap {
background: transparent !important;
}
.store-page .home-order-card .input-wrap input {
height: 48px !important;
padding-inline: 12px !important;
}
.store-page input::placeholder,
.store-page textarea::placeholder {
color: var(--muted-2, #a39c8c);
opacity: 1;
}
.store-page .home-order-card .input-wrap > input[data-telegram-recipient] {
padding-left: 42px !important;
padding-right: 12px !important;
}
.store-page .home-order-card .amount-field {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 6px !important;
min-height: 48px !important;
margin: 0 !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
.store-page .home-order-card .amount-field > input {
background: transparent !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
width: 100% !important;
color: var(--m3-on-surface) !important;
font-family: var(--display) !important;
font-size: clamp(18px, 1.8vw, 22px) !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: 0.01em !important;
}
.store-page .home-order-card .amount-field > input::-webkit-outer-spin-button,
.store-page .home-order-card .amount-field > input::-webkit-inner-spin-button {
appearance: none !important;
margin: 0 !important;
}
.store-page .home-order-card .amount-field > input[type="number"] {
appearance: textfield !important;
-moz-appearance: textfield !important;
}
.store-page .home-order-card .amount-mark {
position: static !important;
transform: none !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--m3-on-surface-variant) !important;
font-family: var(--display) !important;
font-size: clamp(22px, 2.2vw, 28px) !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
line-height: 1 !important;
pointer-events: none !important;
}
.store-page .home-order-card .amount-field > input:focus,
.store-page .home-order-card .amount-field > input:focus-visible {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.store-page .home-order-card .input-wrap input:focus-visible { outline: 2px solid var(--text, #F4EFE4) !important; outline-offset: 2px !important; }
.store-page .home-order-card .amount-field:has(> input:focus-visible) { outline: 2px solid var(--text, #F4EFE4) !important; outline-offset: 2px !important; }
.store-page .home-order-card .steam-range,
.store-page .home-order-card .helper.steam-range {
margin: 8px 0 0 !important;
color: var(--m3-on-surface-variant) !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.store-page .home-order-head {
border: 0 !important;
border-bottom: 0 !important;
margin: 0 0 10px !important;
padding: 0 !important;
min-height: 0 !important;
}
@media (max-width: 780px) {
.store-page .home-steam-fields {
grid-template-columns: minmax(0, 1fr) minmax(100px, 128px) !important;
}
.store-page .home-order-card .input-wrap input,
.store-page .home-steam-amount,
.store-page .home-order-card .amount-field {
min-height: 50px !important;
height: 50px !important;
}
.store-page .home-order-card .amount-field > input,
.store-page .home-order-card .amount-mark {
font-size: 22px !important;
}
}
.store-page .field > label {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.store-page .home-presets .quick-row,
.store-page .package-grid,
.store-page [data-premium-packages],
.store-page .voucher-product-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
gap: 10px !important;
}
.store-page [data-premium-packages] {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
gap: 8px !important;
}
@media (max-width: 360px) {
.store-page [data-premium-packages] .telegram-package { padding-inline: 4px !important; }
.store-page [data-premium-packages] .telegram-package b {
font-size: 13px !important;
white-space: nowrap !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
}
.store-page .voucher-region-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
gap: 10px !important;
overflow: visible !important;
padding: 0 !important;
margin-inline: 0 !important;
mask-image: none !important;
}
.store-page .package,
.store-page .telegram-package,
.store-page .voucher-region,
.store-page .voucher-product,
.store-page .region-choice,
.store-page .product-choice {
min-width: 0 !important;
min-height: 88px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
place-content: center !important;
justify-items: center !important;
gap: 4px !important;
padding: 14px 10px !important;
border: 0 !important;
border-top: 0 !important;
border-radius: 14px !important;
background: var(--fill-rest) !important;
box-shadow: none !important;
text-align: center !important;
color: var(--m3-on-surface) !important;
font-family: var(--display) !important;
transition: background 180ms ease, transform 180ms ease !important;
box-sizing: border-box !important;
}
.store-page .package img,
.store-page .telegram-package img {
display: none !important;
}
.store-page .package b,
.store-page .telegram-package b,
.store-page .voucher-region b,
.store-page .voucher-product b,
.store-page .region-choice b,
.store-page .product-choice b {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
color: var(--m3-on-surface) !important;
font-family: var(--body) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
text-transform: none !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
text-wrap: balance !important;
}
.store-page .package span,
.store-page .telegram-package span,
.store-page .voucher-region span,
.store-page .voucher-product span {
color: var(--m3-on-surface-variant) !important;
font-family: var(--body) !important;
font-size: 13px !important;
font-weight: 600 !important;
}
.store-page .package:hover,
.store-page .telegram-package:hover,
.store-page .voucher-region:hover,
.store-page .voucher-product:hover,
.store-page .region-choice:hover,
.store-page .product-choice:hover {
background: var(--fill-hover) !important;
border-color: transparent !important;
transform: translateY(-1px) !important;
}
.store-page .package.active,
.store-page .telegram-package.active,
.store-page .package[aria-pressed="true"],
.store-page .telegram-package[aria-pressed="true"],
.store-page :is(.voucher-region, .voucher-product, .region-choice, .product-choice):is(.is-on, .active, [aria-pressed="true"]) {
background: var(--fill-selected) !important;
border-color: transparent !important;
transform: translateY(-1px) !important;
}
.store-page .package.active b,
.store-page .telegram-package.active b,
.store-page .package[aria-pressed="true"] b,
.store-page .telegram-package[aria-pressed="true"] b {
color: var(--m3-primary) !important;
}
.store-page :is(.voucher-region, .region-choice, .voucher-product, .product-choice):is(.is-on, .active, [aria-pressed="true"]) b { color: var(--m3-primary) !important; }
.store-page :is(.package, .telegram-package, .voucher-region, .region-choice, .voucher-product, .product-choice),
.slarp-play-choice,
.slarp-play-pay-choice,
.checkout-payment-method { position: relative; }
.checkout-payment-method:is(.selected, [aria-pressed="true"])::before,
.store-page :is(.package, .telegram-package):is(.active, [aria-pressed="true"])::before,
.store-page :is(.voucher-region, .region-choice, .voucher-product, .product-choice):is(.is-on, .active, [aria-pressed="true"])::before,
.slarp-play-choice:is(.is-on, :has(input:checked))::before,
.slarp-play-pay-choice:is(.is-on, :has(input:checked))::before {
content: "";
position: absolute;
top: 12px;
right: 12px;
width: 10px;
height: 5px;
border-left: 2px solid var(--gold, #E9C87C);
border-bottom: 2px solid var(--gold, #E9C87C);
transform: rotate(-45deg);
pointer-events: none;
}
.checkout-payment-method:is(.selected, [aria-pressed="true"])::before { top: 8px; right: 10px; }
.store-page :is(.voucher-region, .region-choice):is(.is-on, .active, [aria-pressed="true"])::before,
.slarp-play-choice:has(> .slarp-play-badge):is(.is-on, :has(input:checked))::before { content: none; }
.store-page :is(.voucher-region, .region-choice):is(.is-on, .active, [aria-pressed="true"]) b::after,
.slarp-play-choice:has(> .slarp-play-badge):is(.is-on, :has(input:checked)) > b::after {
content: "";
display: inline-block;
width: 10px;
height: 5px;
margin-left: 8px;
border-left: 2px solid var(--gold, #E9C87C);
border-bottom: 2px solid var(--gold, #E9C87C);
transform: translateY(-3px) rotate(-45deg);
vertical-align: middle;
}
.store-page :is(.voucher-region, .region-choice):is(.is-on, .active, [aria-pressed="true"]) b::after { margin-right: -18px; }
.store-page .product-choice > i { display: none !important; }
.store-page .package::after,
.store-page .telegram-package::after {
display: none !important;
}
.store-page .home-showcase {
display: grid;
gap: 12px;
margin-top: 8px;
}
.store-page .home-showcase-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.store-page .home-showcase-head h2 {
margin: 0;
font-family: var(--display) !important;
font-size: clamp(20px, 2.4vw, 25px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.05 !important;
text-transform: uppercase !important;
}
.store-page .home-showcase-head a {
position: relative;
top: 1px;
flex: none;
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--m3-on-surface-variant);
font-family: var(--body);
font-size: 14px;
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--line-strong, #36393e);
text-underline-offset: 3px;
transition: color 160ms ease;
}
.store-page .home-showcase-head a:hover,
.store-page .home-showcase-head a:focus-visible {
color: var(--gold-text);
}
.store-page .home-showcase-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.store-page .home-showcase-card,
.store-page a.home-showcase-card {
--showcase-fill: rgba(255, 255, 255, 0.035);
--showcase-fill-hot: rgba(255, 255, 255, .06);
min-height: 78px !important;
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
align-items: center !important;
justify-items: start !important;
column-gap: 14px !important;
row-gap: 0 !important;
gap: 14px !important;
margin: 0 !important;
padding: 12px 14px !important;
border: 1px solid transparent !important;
border-radius: 14px !important;
background: var(--showcase-fill) !important;
box-shadow: none !important;
overflow: hidden !important;
text-align: left !important;
text-decoration: none !important;
color: inherit !important;
transition:
background 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.store-page .home-showcase-card:hover,
.store-page .home-showcase-card:focus-visible {
background: var(--showcase-fill-hot) !important;
border-color: transparent !important;
transform: translateY(-1px) !important;
}
.store-page .home-showcase-art {
position: relative !important;
width: 56px !important;
height: 56px !important;
min-height: 0 !important;
aspect-ratio: 1 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 14px !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
display: grid !important;
place-items: center !important;
align-self: center !important;
justify-self: start !important;
flex: none !important;
}
.store-page .home-showcase-art::before,
.store-page .home-showcase-art::after {
content: none !important;
display: none !important;
}
.store-page .home-showcase-art img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
border-radius: 14px !important;
object-fit: cover !important;
object-position: center !important;
background: transparent !important;
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.24)) !important;
transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.store-page .home-showcase-card:hover .home-showcase-art img,
.store-page .home-showcase-card:focus-visible .home-showcase-art img {
transform: scale(1.04) !important;
filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3)) !important;
}
.store-page .home-showcase-card.service .home-showcase-art,
.store-page .home-showcase-card.stars .home-showcase-art,
.store-page .home-showcase-card.premium .home-showcase-art {
width: 56px !important;
height: 56px !important;
}
.store-page .home-showcase-card.service .home-showcase-art img,
.store-page .home-showcase-card.stars .home-showcase-art img,
.store-page .home-showcase-card.premium .home-showcase-art img {
object-fit: contain !important;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2)) !important;
}
.store-page .home-showcase-card.game .home-showcase-art img {
object-fit: cover !important;
}
.store-page .home-showcase-copy {
display: grid !important;
gap: 3px !important;
width: 100% !important;
min-width: 0 !important;
justify-items: start !important;
align-self: center !important;
padding: 0 !important;
}
.store-page .home-showcase-copy b {
max-width: 100% !important;
overflow: hidden !important;
color: var(--m3-on-surface) !important;
font-family: var(--display) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.store-page .home-showcase-copy em {
display: none !important;
}
@media (max-width: 980px) {
.store-page .home-showcase-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 780px) {
.store-page .home-showcase-head h2 {
font-size: 20px !important;
}
.store-page .home-showcase-card,
.store-page a.home-showcase-card {
min-height: 70px !important;
grid-template-columns: 48px minmax(0, 1fr) !important;
padding: 10px 12px !important;
gap: 12px !important;
}
.store-page .home-showcase-art,
.store-page .home-showcase-card.service .home-showcase-art,
.store-page .home-showcase-card.stars .home-showcase-art,
.store-page .home-showcase-card.premium .home-showcase-art {
width: 48px !important;
height: 48px !important;
border-radius: 12px !important;
}
.store-page .home-showcase-art img {
border-radius: 12px !important;
}
.store-page .home-showcase-copy b {
font-size: 14px !important;
white-space: normal !important;
text-overflow: clip !important;
overflow-wrap: normal !important;
}
}
@media (max-width: 360px) {
.store-page .home-showcase-card,
.store-page a.home-showcase-card {
grid-template-columns: minmax(0, 1fr) !important;
justify-items: center !important;
row-gap: 8px !important;
padding: 12px 10px !important;
text-align: center !important;
}
.store-page .home-showcase-copy { justify-items: center !important; }
.store-page .home-showcase-art { justify-self: center !important; }
}
@media (max-width: 780px) {
.store-page .store-opening { align-content: start !important; padding: var(--sh-hero-pad-y) var(--sh-hero-pad-x) !important; }
.store-page .store-opening-copy {
align-content: start !important;
gap: 6px !important;
min-height: calc(var(--sh-art-inset) + var(--sh-art-box) - var(--sh-hero-pad-y)) !important;
}
.store-page .store-opening-copy h1 { font-size: clamp(19px, 6vw, 24px) !important; }
.store-page .store-opening-copy h1,
.store-page .store-opening-copy p { max-width: calc(100% - var(--sh-art-box) - var(--sh-art-gap)) !important; }
.store-page .store-opening-copy .button { min-height: 48px !important; }
.store-page .store-opening-visual { top: var(--sh-art-inset) !important; margin: 0 !important; }
.store-page .store-opening-visual .store-opening-poster,
.store-page .store-opening-visual .store-3d-loop { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)) !important; }
.store-page:not(.games-page):not(.services-page):not(.telegram-page) .store-opening-copy p { display: none !important; }
.store-page .home-presets .quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
.store-page .home-presets .quick { min-width: 0 !important; padding-inline: 4px !important; }
.store-page .catalog-category-tabs {
width: calc(100% + var(--shell-gutter)) !important;
max-width: none !important;
margin-inline: calc(var(--shell-gutter) / -2) !important;
padding: 0 32px 6px calc(var(--shell-gutter) / 2) !important;
scroll-padding-inline: calc(var(--shell-gutter) / 2);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%) !important;
}
}
@media (max-width: 360px) {
:is(.games-page, .services-page, .telegram-page) .store-opening-copy p { display: none !important; }
}
.catalog-search input:placeholder-shown { padding-right: 14px; }
@media (max-width: 780px) {
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch,
:is(.store-page, .games-page, .services-page, .telegram-page) .service-launchpad.product-switch {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch .launch-service {
min-height: 64px !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 28px auto !important;
justify-items: center !important;
align-content: center !important;
padding: 7px 4px 6px !important;
gap: 4px !important;
text-align: center !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d {
width: 28px !important;
height: 28px !important;
justify-self: center !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-copy {
justify-items: center !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-copy b {
font-size: 11px !important;
letter-spacing: 0.02em !important;
}
.store-page .home-showcase-grid {
grid-template-columns: 1fr 1fr !important;
}
}
@media (prefers-reduced-motion: reduce) {
.store-page .home-hero-loop,
.store-page .launch-icon .icon-loop { display: none !important; }
.store-page .home-hero-panel.hero-live .home-hero-art,
.store-page .launch-icon.is-playing img { opacity: 1 !important; }
}
.mobile-dock {
left: 50% !important;
width: min(calc(100% - 24px), 560px) !important;
transform: translateX(-50%) !important;
border: 0 !important;
border-radius: 22px !important;
}
.mobile-dock a { border: 0 !important; border-radius: 14px !important; }
.mobile-dock a.active {
background: var(--fill-selected) !important;
border-color: transparent !important;
color: var(--m3-primary, #f0c866) !important;
box-shadow: none !important;
}
.site-footer { border-color: transparent !important; background: var(--m3-surface) !important; }
.footer-links a:hover, .footer-legal-links a:hover { color: var(--m3-primary) !important; }
.next-home-stage { overflow: hidden; }
.next-home-hero {
min-height: min(720px, calc(100dvh - 66px));
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
align-items: center;
gap: clamp(38px, 6vw, 90px);
padding: clamp(64px, 9vh, 110px) 0;
}
.next-home-copy { min-width: 0; }
.next-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color: var(--m3-primary);
font-size: 12px;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.next-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; }
.next-home-copy h1 {
max-width: 10ch;
margin: 0;
color: var(--m3-on-surface);
font: 850 clamp(52px, 6.2vw, 88px)/.93 var(--display);
letter-spacing: -.055em;
text-transform: uppercase;
}
.next-home-copy > p { max-width: 620px; margin: 26px 0 0; color: var(--m3-on-surface-variant); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
.next-home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.next-home-actions .button { min-height: 58px !important; padding-inline: 24px !important; }
.next-home-signals { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 38px; }
.next-home-signals span { min-width: 0; display: grid; gap: 3px; border-left: 1px solid var(--m3-outline-variant); padding-left: 13px; }
.next-home-signals b { font-size: 12px; }
.next-home-signals small { color: var(--m3-on-surface-variant); font-size: 10px; line-height: 1.35; }
.next-route-visual {
position: relative;
min-height: 480px;
overflow: hidden;
border: 1px solid var(--glass-border);
border-radius: var(--m3-radius-xl);
background: var(--glass-surface);
box-shadow: 0 30px 80px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);
-webkit-backdrop-filter: blur(28px) saturate(1.16);
backdrop-filter: blur(28px) saturate(1.16);
}
.next-route-visual::before { content: none; }
.route-visual-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--glass-border); padding: 0 20px; }
.route-visual-head span { font-size: 12px; font-weight: 800; }
.route-map { position: relative; height: 292px; }
.route-map img { position: absolute; z-index: 2; top: 50%; left: 50%; width: 178px; height: 178px; transform: translate(-50%,-50%); object-fit: contain; filter: drop-shadow(0 24px 26px rgba(0,0,0,.34)); }
.route-node { position: absolute; z-index: 3; min-width: 52px; height: 34px; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 11px; background: var(--glass-surface-strong); color: var(--m3-on-surface); font-size: 10px; font-weight: 800; box-shadow: var(--glass-shadow); }
.route-node-player { left: 24px; top: 129px; }
.route-node-relay { left: 50%; top: 32px; transform: translateX(-50%); color: var(--m3-primary); }
.route-node-game { right: 24px; top: 129px; }
.route-line { position: absolute; z-index: 1; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(255,255,255,.18), var(--m3-primary)); box-shadow: 0 0 12px rgba(240,200,102,.38); }
.route-line-direct { left: 70px; right: 70px; top: 146px; }
.route-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.route-choices > span { min-width: 0; display: grid; grid-template-columns: 9px minmax(0,1fr); gap: 2px 9px; border: 1px solid var(--glass-border); border-radius: var(--m3-radius-md); padding: 13px; }
.route-choices i { grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--m3-outline); }
.route-choices b { font-size: 11px; }
.route-choices small { color: var(--m3-on-surface-variant); font-size: 9px; }
.route-choices .is-selected { border-color: var(--line-strong, #36393e); background: var(--fill-selected); }
.route-choices .is-selected i { background: var(--m3-primary); box-shadow: 0 0 12px var(--m3-primary); }
.next-play-site { overflow: hidden; }
.next-play-hero {
min-height: min(760px, calc(100dvh - 66px));
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
align-items: center;
gap: clamp(42px, 7vw, 100px);
padding: clamp(66px, 10vh, 116px) 0;
}
.next-play-copy h1 {
max-width: 11ch;
margin: 0;
font: 850 clamp(48px, 5.4vw, 76px)/.95 var(--display);
letter-spacing: -.05em;
text-transform: uppercase;
}
.next-play-copy > p { max-width: 610px; margin: 24px 0 0; color: var(--m3-on-surface-variant); font-size: clamp(16px,1.4vw,18px); line-height: 1.62; }
.next-app-preview {
position: relative;
min-height: 500px;
overflow: hidden;
border: 1px solid var(--glass-border);
border-radius: var(--m3-radius-xl);
background: var(--glass-surface);
box-shadow: 0 34px 90px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.12);
-webkit-backdrop-filter: blur(30px) saturate(1.2);
backdrop-filter: blur(30px) saturate(1.2);
}
.next-app-preview > img { position: absolute; right: -22px; bottom: -24px; width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 20px 24px rgba(0,0,0,.35)); transform: rotate(-8deg); }
.app-preview-top { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--glass-border); padding: 0 20px; font-size: 11px; }
.app-preview-top span { display: flex; align-items: center; gap: 8px; font-weight: 850; }
.app-preview-top span i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.app-preview-top b { color: var(--m3-on-surface-variant); }
.app-preview-body { padding: 20px; }
.app-power { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(115,205,185,.22); border-radius: var(--m3-radius-lg); background: rgba(115,205,185,.08); padding: 18px; }
.app-power span { color: var(--cyan); font-size: 12px; font-weight: 800; }
.app-power b { min-width: 110px; min-height: 52px; display: grid; place-items: center; border-radius: 17px; background: var(--m3-primary); color: var(--m3-on-primary); font-size: 13px; }
.app-game-list { display: grid; gap: 8px; margin-top: 14px; }
.app-game-list > span { min-height: 62px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--glass-border); border-radius: var(--m3-radius-md); background: rgba(255,255,255,.025); padding: 8px 12px; }
.app-game-list i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant); font-size: 9px; font-style: normal; font-weight: 850; }
.app-game-list b { font-size: 12px; }
.app-game-list small { color: var(--m3-on-surface-variant); font-size: 10px; }
.app-game-list .is-on { border-color: var(--line-strong, #36393e); }
.app-game-list .is-on i { background: var(--fill-selected); color: var(--m3-primary); }
.app-route-strip { max-width: calc(100% - 126px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 14px; border-top: 1px solid var(--glass-border); padding-top: 14px; }
.app-route-strip span { display: grid; gap: 2px; }
.app-route-strip small { color: var(--m3-on-surface-variant); font-size: 9px; }
.app-route-strip b { font-size: 10px; }
.app-route-strip > i { color: var(--m3-primary); font-style: normal; }
.next-steps-section, .next-modes-section { padding: clamp(50px,8vw,104px) 0; }
.next-steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--m3-outline-variant); }
.next-steps-grid article { min-height: 260px; border-right: 1px solid var(--m3-outline-variant); padding: 30px clamp(20px,3vw,38px) 28px 0; }
.next-steps-grid article + article { padding-left: clamp(20px,3vw,38px); }
.next-steps-grid article:last-child { border-right: 0; }
.next-steps-grid span { color: var(--m3-primary); font: 800 12px/1 var(--display); }
.next-steps-grid h3, .next-mode-panel h3 { margin: 72px 0 10px; font: 780 clamp(23px,2.5vw,34px)/1.05 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.next-steps-grid p, .next-mode-panel p { margin: 0; color: var(--m3-on-surface-variant); font-size: 14px; line-height: 1.58; }
.next-mode-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.next-mode-panel { --card-accent: 86,136,232; min-height: 430px; overflow: hidden; border: 1px solid var(--m3-outline-variant); border-radius: var(--m3-radius-lg); background: var(--m3-surface-container); padding: clamp(24px,4vw,44px); box-shadow: var(--glass-shadow); }
.next-mode-label { color: rgb(var(--card-accent)); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.next-mode-panel h3 { max-width: 14ch; margin-top: 110px; }
.next-mode-panel ul { display: grid; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.next-mode-panel li { position: relative; padding-left: 18px; color: var(--m3-on-surface-variant); font-size: 12px; }
.next-mode-panel li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--card-accent)); box-shadow: 0 0 10px rgba(var(--card-accent),.5); }
.next-games-band { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(34px,7vw,90px); align-items: center; margin: clamp(54px,8vw,100px) 0; border-block: 1px solid var(--m3-outline-variant); padding: clamp(42px,7vw,80px) 0; }
.next-games-band h2, .next-final-cta h2 { margin: 0; font: 800 clamp(31px,4.3vw,54px)/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.next-games-band p, .next-final-cta p { color: var(--m3-on-surface-variant); line-height: 1.6; }
.next-game-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.next-game-chips span { min-height: 50px; display: inline-flex; align-items: center; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-surface); padding: 0 17px; font-size: 12px; font-weight: 800; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.next-final-cta { margin: clamp(60px,9vw,120px) 0 36px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--m3-radius-xl); background: var(--m3-surface-container); padding: clamp(32px,6vw,72px); box-shadow: var(--glass-shadow); }
.next-final-cta > span { color: var(--m3-primary); font-size: 12px; font-weight: 800; }
.next-final-cta h2 { max-width: 16ch; margin-top: 14px; }
.next-final-cta p { max-width: 50em; }
.next-final-cta .button { margin-top: 12px; }
.next-ecosystem,
.next-feature-section { padding: clamp(42px, 7vw, 92px) 0; }
.next-section-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 24px;
margin-bottom: clamp(20px, 3vw, 32px);
}
.next-section-head > div { display: grid; gap: 7px; min-width: 0; }
.next-section-head > span,
.next-section-head .next-section-kicker {
color: var(--m3-primary);
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.next-section-head h2 {
max-width: 18ch;
margin: 0;
color: var(--m3-on-surface);
font: 800 clamp(28px, 4.4vw, 54px)/1.02 var(--display);
letter-spacing: -.035em;
text-transform: uppercase;
}
.next-section-all {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--m3-on-surface-variant);
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.next-section-all:hover { color: var(--m3-primary); }
.next-section-all svg { width: 16px; height: 16px; }
.next-bento-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.next-bento-card,
.next-feature-card {
--card-accent: 240, 200, 102;
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--m3-outline-variant);
border-radius: var(--m3-radius-lg);
background: var(--m3-surface-container);
box-shadow: 0 18px 45px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.next-accent-blue { --card-accent: 86, 136, 232; }
.next-accent-violet { --card-accent: 156, 123, 212; }
.next-accent-cyan { --card-accent: 63, 160, 139; }
.next-accent-gold { --card-accent: 240, 200, 102; }
.next-bento-card {
min-height: 260px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(22px, 3vw, 34px);
transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms ease, filter 240ms ease;
}
.next-bento-card-wide { grid-column: span 2; }
.next-bento-card:hover { transform: translateY(-4px); border-color: rgba(var(--card-accent), .48); filter: saturate(1.08); }
.next-bento-kicker {
margin-bottom: auto;
color: rgb(var(--card-accent));
font-size: 11px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.next-bento-card h3,
.next-feature-card h3 {
margin: 24px 0 8px;
color: var(--m3-on-surface);
font: 750 clamp(21px, 2.2vw, 30px)/1.08 var(--display);
letter-spacing: -.025em;
text-transform: uppercase;
}
.next-bento-card p,
.next-feature-card p { max-width: 45ch; margin: 0; color: var(--m3-on-surface-variant); font-size: 14px; line-height: 1.55; }
h1, h2, h3, .next-home-copy h1, .next-play-copy h1 { text-wrap: balance; overflow-wrap: normal; word-break: normal; }
p, .next-bento-card p, .next-feature-card p { text-wrap: pretty; }
.next-bento-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--m3-on-surface); font-size: 13px; font-weight: 800; }
.next-bento-action b { color: rgb(var(--card-accent)); font-size: 18px; transition: transform 180ms ease; }
.next-bento-card:hover .next-bento-action b { transform: translateX(4px); }
.next-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.next-feature-card { min-height: 230px; padding: clamp(22px, 3vw, 32px); }
.next-feature-index { color: rgb(var(--card-accent)); font: 700 13px/1 var(--display); letter-spacing: .08em; }
.next-feature-card h3 { margin-top: 54px; }
.help-faq {
margin-top: 18px;
padding: clamp(20px, 3vw, 32px) !important;
border: 1px solid var(--m3-outline-variant) !important;
border-radius: var(--m3-radius-lg) !important;
background: rgba(255,255,255,.035) !important;
box-shadow: var(--glass-shadow) !important;
}
.help-faq details { border-color: var(--m3-outline-variant) !important; }
.help-head { padding: var(--shell-content-gap, 24px) 0 0 !important; border: 0 !important; }
.help-head .container { display: block !important; }
.help-head .sh-hero-actions .button { max-width: none !important; white-space: nowrap; }
.help-page .section.compact { padding: 16px 0 32px; border: 0; }
.help-page .help-grid { display: block; max-width: none; margin-top: 8px; }
@media (min-width: 1100px) {
.help-page .help-faq {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto 1fr;
grid-template-areas: "play store" "play orders" "play rules";
column-gap: clamp(32px, 4vw, 56px);
row-gap: 40px;
align-items: start;
}
.help-page .help-faq > #store { grid-area: store; }
.help-page .help-faq > #orders { grid-area: orders; }
.help-page .help-faq > #play { grid-area: play; }
.help-page .help-faq > #rules { grid-area: rules; }
.help-page .help-faq details p { max-width: 68ch; }
}
.help-page .help-faq h2 { font-size: clamp(20px, 2vw, 28px); }
@media (max-width: 780px) {
.header-main { height: 100% !important; display: flex !important; gap: 10px !important; }
.brand { flex: none !important; }
.next-primary-nav, .header-main .site-search { display: none !important; }
.header-actions { margin-left: auto; }
.header-actions .theme-button, .header-actions .account-button { display: grid !important; }
.header-actions .support-button, .header-actions .menu-button { display: none !important; }
.header-account { display: none !important; }
.site-header .icon-button {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
.home-hero { margin: var(--shell-content-gap, 24px) 0 14px !important; }
.home-hero-panel {
min-height: 0 !important;
height: auto !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 22px 18px 140px !important;
border-radius: var(--product-hero-radius) !important;
background: var(--product-hero-bg) !important;
}
.home-hero-copy {
position: relative !important;
z-index: 2 !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
padding-right: 0 !important;
gap: 8px !important;
}
.home-hero-copy h1 { max-width: none !important; font-size: clamp(25px, 7vw, 36px) !important; overflow-wrap: normal !important; word-break: normal !important; }
.home-hero-copy p { display: block !important; }
.home-hero-panel img.home-hero-art {
position: absolute !important;
right: 8px !important;
bottom: 0 !important;
top: auto !important;
width: min(52%, 200px) !important;
max-width: none !important;
height: auto !important;
max-height: 140px !important;
margin: 0 !important;
}
.service-launchpad.product-switch,
.service-launchpad.category-switch,
.mj-category-row {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.service-launchpad.product-switch .launch-service,
.service-launchpad.product-switch .launch-all-services,
.service-launchpad.category-switch .launch-service,
.mj-category-pill {
min-height: 68px !important;
padding: 12px !important;
}
.service-launchpad.product-switch .launch-icon,
.service-launchpad.category-switch .launch-icon,
.mj-category-icon {
width: 42px !important;
height: 42px !important;
border-radius: 12px !important;
}
.service-launchpad.product-switch .launch-service b,
.service-launchpad.category-switch .launch-service b,
.mj-category-copy b { font-size: 10px !important; }
.service-launchpad.product-switch .launch-service small,
.service-launchpad.category-switch .launch-service small,
.mj-category-copy small { font-size: 10px !important; }
.mobile-dock { bottom: max(8px, env(safe-area-inset-bottom)) !important; }
.next-ecosystem, .next-feature-section { padding: 42px 0; }
.next-bento-grid, .next-feature-grid { grid-template-columns: 1fr; }
.next-bento-card-wide { grid-column: auto; }
.next-bento-card { min-height: 220px; }
.next-feature-card { min-height: 190px; }
.next-feature-card h3 { margin-top: 34px; }
.next-home-hero { min-height: auto; grid-template-columns: 1fr; gap: 22px; padding: 34px 0 38px; }
.next-home-copy h1 { max-width: 9ch; font-size: clamp(39px, 12vw, 54px); }
.next-home-copy > p { margin-top: 16px; font-size: 14px; line-height: 1.5; }
.next-home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.next-home-actions .button { min-width: 0; min-height: 50px !important; padding-inline: 8px !important; font-size: 11px; text-align: center; }
.next-home-signals { display: none; }
.next-route-visual { min-height: 194px; border-radius: var(--m3-radius-lg); }
.route-visual-head { min-height: 46px; padding-inline: 14px; }
.route-map { height: 146px; }
.route-map img { width: 92px; height: 92px; }
.route-node { min-width: 44px; height: 28px; font-size: 8px; }
.route-node-player, .route-node-game { top: 59px; }
.route-node-player { left: 12px; }
.route-node-game { right: 12px; }
.route-line-direct { left: 48px; right: 48px; top: 73px; }
.route-node-relay { top: 8px; }
.route-choices { display: none; }
.next-play-hero { min-height: auto; grid-template-columns: 1fr; gap: 36px; padding: 50px 0 58px; }
.next-play-copy h1 { font-size: clamp(40px,12vw,60px); }
.next-app-preview { min-height: 470px; border-radius: var(--m3-radius-lg); }
.next-steps-grid, .next-mode-panels, .next-games-band { grid-template-columns: 1fr; }
.next-steps-grid article, .next-steps-grid article + article { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--m3-outline-variant); padding: 24px 0; }
.next-steps-grid article:last-child { border-bottom: 0; }
.next-steps-grid h3 { margin-top: 42px; }
.next-mode-panel { min-height: 360px; }
.next-mode-panel h3 { margin-top: 70px; }
.next-games-band { gap: 24px; }
.next-game-chips { justify-content: flex-start; }
.next-final-cta { border-radius: var(--m3-radius-lg); }
}
@media (max-width: 380px) {
.next-home-hero { gap: 14px; padding: 22px 0 26px; }
.next-home-copy h1 { font-size: 37px; }
.next-home-copy > p { font-size: 13px; }
.home-hero { margin: var(--shell-content-gap, 24px) 0 10px !important; }
.home-hero-panel { min-height: 0 !important; height: auto !important; padding: 18px 14px 120px !important; }
.home-hero-copy { padding: 0 !important; gap: 6px !important; }
.home-hero-copy h1 { font-size: 22px !important; }
.home-hero-copy .button { min-height: 48px !important; height: auto !important; padding-inline: 20px !important; }
.home-hero-panel img.home-hero-art { max-height: 120px !important; width: min(52%, 180px) !important; }
}
@media (prefers-reduced-motion: reduce) {
.site-header, .mobile-menu-panel, .mobile-dock, .checkout-header, .catalog-sort-menu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
.legal-head { grid-area: head; margin: 0 0 24px; }
.legal-head .legal-title {
max-width: none;
margin: 0;
color: var(--m3-on-surface);
font-family: var(--display);
font-size: clamp(26px, 2.8vw, 40px);
font-weight: 800;
letter-spacing: .01em;
line-height: 1.08;
text-transform: uppercase;
text-wrap: balance;
overflow-wrap: normal;
hyphens: manual;
}
.legal-meta-line { margin: 8px 0 0; color: var(--m3-on-surface-variant); font-size: 14px; line-height: 1.5; }
.legal-meta-line a,
.legal-copy a {
color: var(--m3-on-surface) !important;
text-decoration: underline;
text-decoration-color: rgba(244, 239, 228, .35);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.legal-meta-line a:hover,
.legal-copy a:hover { text-decoration-color: currentColor; }
.legal-copy .legal-updated { margin: 32px 0 0; color: var(--m3-on-surface-variant); font-size: 14px; }
.legal-meta-line a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.legal-copy {
grid-area: copy;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
color: var(--m3-on-surface-variant);
}
.legal-copy h2 {
margin: 40px 0 12px !important;
color: var(--m3-on-surface);
font-family: var(--display) !important;
font-size: 20px !important;
font-weight: 800;
line-height: 1.25;
text-transform: uppercase;
scroll-margin-top: 16px;
}
.legal-copy h3 { font-size: 16px; }
.legal-toc ul { display: grid; margin: 0; padding: 0; list-style: none; }
.legal-toc a { color: var(--m3-on-surface-variant); font-size: 14px; line-height: 1.35; text-decoration: none; }
.legal-toc a:hover { color: var(--m3-on-surface); }
.legal-toc--side { grid-area: toc; position: sticky; top: 24px; padding-left: 16px; border-left: 1px solid var(--m3-outline-variant); }
.legal-toc-title { margin: 0 0 8px; color: var(--m3-on-surface); font-size: 14px; font-weight: 700; }
.legal-toc--side a { display: block; padding: 6px 0; }
.legal-toc--phone { display: none; }
@media (max-width: 1023px) {
.legal-toc--side { display: none; }
.legal-toc--phone { display: block; grid-area: toc; margin: 0 0 24px; border-block: 1px solid var(--m3-outline-variant); }
.legal-toc--phone summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
color: var(--m3-on-surface);
font-size: 14px;
font-weight: 600;
list-style: none;
cursor: pointer;
}
.legal-toc--phone summary::-webkit-details-marker { display: none; }
.legal-toc--phone summary::after { content: "+"; color: var(--m3-on-surface-variant); font-size: 20px; font-weight: 400; line-height: 1; }
.legal-toc--phone[open] summary::after { content: "−"; }
.legal-toc--phone ul { padding-bottom: 8px; }
.legal-toc--phone a { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 780px) {
.legal-head { margin-bottom: 16px; }
.legal-toc--phone { margin-bottom: 20px; }
.legal-copy { font-size: 15px !important; line-height: 1.6 !important; }
.legal-copy h2 { margin-top: 32px !important; font-size: 17px !important; }
.legal-copy h3 { font-size: 15px; }
}
@media (max-width: 560px) {
.legal-copy ul { padding-left: 18px; }
.legal-copy li > ul { padding-left: 14px; }
}
.help-page .help-hero.sh-hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto 112px;
grid-template-areas: "copy actions art";
align-items: center;
column-gap: 32px;
min-height: 0 !important;
padding: 0 !important;
overflow: visible;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
.help-page .help-hero .sh-hero-copy { gap: 8px; align-content: center; min-height: 0; }
.help-page .help-hero .sh-hero-title { max-width: none; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; }
.help-page .help-hero .sh-hero-lead { max-width: none; font-size: 16px; }
.help-page .help-hero .sh-hero-actions { margin: 0; }
.help-page .help-hero .sh-hero-art {
grid-area: art;
position: relative;
top: auto;
right: auto;
width: 112px;
height: 112px;
margin: 0;
pointer-events: none;
}
.help-page .help-hero .sh-hero-art img {
position: absolute;
top: 50%;
left: 50%;
width: calc(112px * var(--art-fit, .867));
max-width: none;
height: calc(112px * var(--art-fit, .867));
object-fit: contain;
transform: translate(-50%, -50%);
filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4));
}
.help-chips { display: flex; gap: 8px; margin: -4px -4px 20px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.help-chips::-webkit-scrollbar { display: none; }
.help-chips a {
flex: none;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 18px;
border: 1px solid var(--m3-outline-variant);
border-radius: 999px;
background: rgba(255, 255, 255, .04);
color: var(--m3-on-surface);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.help-chips a:hover { background: rgba(255, 255, 255, .08); }
.help-page .help-faq {
gap: 40px;
margin-top: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
.help-page .help-faq > div { scroll-margin-top: 16px; }
.help-page .help-faq h2 { margin: 0 0 8px; }
.help-page .help-faq details { border-top: 1px solid var(--m3-outline-variant) !important; }
.help-page .help-faq details:last-child { border-bottom: 1px solid var(--m3-outline-variant) !important; }
.help-page .help-faq summary {
display: block;
min-height: 48px;
padding: 12px 36px 12px 0;
color: var(--m3-on-surface);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
text-transform: none;
}
.help-page .help-faq summary:hover { padding-left: 0; color: var(--m3-on-surface); }
.help-page .help-faq summary::after { top: 50%; color: var(--m3-on-surface-variant); transform: translateY(-50%); }
.help-page .help-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.help-page .help-faq summary:hover::after { color: var(--m3-on-surface); }
.help-page .help-faq details p { margin: 0 0 16px; color: var(--m3-on-surface-variant); font-size: 14px; line-height: 1.6; }
.help-page .help-faq details p a {
color: var(--m3-on-surface);
text-decoration: underline;
text-decoration-color: rgba(244, 239, 228, .35);
text-underline-offset: 3px;
}
@media (max-width: 780px) {
.help-page .help-hero.sh-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "actions"; row-gap: 10px; }
.help-page .help-hero .sh-hero-lead,
.help-page .help-hero .sh-hero-art { display: none; }
.help-page .help-hero .sh-hero-actions .button { width: 100%; min-height: 48px; }
.help-chips {
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50%) calc(50vw - 50% + 32px);
scroll-padding-inline: 16px 48px;
}
.help-chips a { padding: 0 14px; }
.help-page .help-faq { gap: 32px; }
.help-page .help-faq h2 { font-size: 20px; }
}
@media (max-width: 459px) {
.help-chips {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.help-chips:has(a:focus-visible) { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 360px) {
.help-chips { gap: 6px; }
.help-chips a { padding: 0 12px; }
}
.slarp-hero {
position: relative;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: var(--shell-content-gap, 24px) 0 0;
overflow: hidden;
background: var(--m3-surface, #121315);
}
.slarp-hero-stage {
position: relative;
z-index: 2;
width: var(--shell-rail, min(calc(100% - 48px), 1320px));
display: grid;
place-items: center;
}
.slarp-hero-columns {
position: relative;
z-index: 2;
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2.2vw, 32px);
align-items: end;
}
.slarp-hero-column {
--column-accent: #4f8cff;
--column-accent-ink: #071018;
position: relative;
aspect-ratio: 9 / 16;
max-height: min(68vh, 620px);
overflow: hidden;
border-radius: clamp(16px, 1.8vw, 24px);
background: #14161b;
box-shadow:
0 18px 40px rgba(0, 0, 0, .38),
0 0 0 1px rgba(0, 0, 0, .45);
border: 2.5px solid rgba(255,255,255,.18);
transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, border-color 200ms ease;
}
.slarp-hero-poster,
.slarp-hero-media {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
pointer-events: none;
filter: grayscale(1) contrast(1.06) brightness(.9);
transform: scale(1.01);
transform-origin: center center;
transition:
filter 320ms ease,
transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 380ms ease;
background: #121418;
}
.slarp-hero-poster {
z-index: 0;
}
.slarp-hero-media {
z-index: 1;
opacity: 0;
transition: opacity 320ms ease;
}
.slarp-hero-column.is-live .slarp-hero-media {
opacity: 1;
}
.slarp-hero-column::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(8, 8, 10, .0);
box-shadow: inset 0 -120px 80px -40px rgba(8, 8, 10, .82);
transition: box-shadow 200ms ease;
pointer-events: none;
}
.slarp-hero-column:hover,
.slarp-hero-column:focus-visible {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--column-accent) 72%, #fff 12%);
box-shadow:
0 26px 54px rgba(0, 0, 0, .46),
0 0 0 1px rgba(0, 0, 0, .4),
inset 0 0 0 1px color-mix(in srgb, var(--column-accent) 45%, transparent);
}
.slarp-hero-column:hover .slarp-hero-poster,
.slarp-hero-column:hover .slarp-hero-media,
.slarp-hero-column:focus-visible .slarp-hero-poster,
.slarp-hero-column:focus-visible .slarp-hero-media {
filter: grayscale(0) contrast(1.02) brightness(1);
transform: scale(1.06);
}
.slarp-hero-column:hover::after,
.slarp-hero-column:focus-visible::after {
box-shadow: inset 0 -110px 72px -36px rgba(8, 8, 10, .7);
}
.slarp-hero-column-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
flex-direction: column;
gap: 6px;
padding: clamp(14px, 2vw, 22px);
}
.slarp-hero-column-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(255, 255, 255, .1);
color: rgba(255, 255, 255, .72);
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.slarp-hero-column-icon svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
}
.slarp-hero-column:hover .slarp-hero-column-icon,
.slarp-hero-column:focus-visible .slarp-hero-column-icon {
background: var(--column-accent);
color: var(--column-accent-ink);
transform: translateY(-2px);
}
.slarp-hero-column-label {
font-family: var(--display);
font-size: clamp(12px, 1.3vw, 14px);
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
transition: color 180ms ease;
}
.slarp-hero-column:hover .slarp-hero-column-label,
.slarp-hero-column:focus-visible .slarp-hero-column-label {
color: rgba(255, 255, 255, .92);
}
.slarp-hero-column-title {
margin: 0;
font-family: var(--display);
font-size: clamp(22px, 2.8vw, 34px);
font-weight: 900;
letter-spacing: -.04em;
line-height: 1.02;
color: #fff;
text-transform: uppercase;
}
.slarp-hero-column-desc {
margin: 0;
min-height: calc(2em * 1.35);
max-width: 34ch;
color: rgba(255, 255, 255, .68);
font-size: clamp(12px, 1.2vw, 13.5px);
line-height: 1.35;
}
@media (min-width: 901px) and (max-width: 1279px) {
.slarp-hero-column-desc { min-height: calc(3em * 1.35); }
}
@media (min-width: 901px) and (max-width: 979px) {
.slarp-hero-column-desc { min-height: calc(4em * 1.35); }
}
.slarp-hero-column[data-product="accelerator"] {
--column-accent: #3d8bff;
--column-accent-ink: #061018;
}
.slarp-hero-column[data-product="store"] {
--column-accent: #ff3b4a;
--column-accent-ink: #140408;
}
.slarp-hero-column[data-product="neuro"] {
--column-accent: #c44dff;
--column-accent-ink: #100418;
}
.slarp-hero-column[data-product="forum"] {
--column-accent: #2fd67b;
--column-accent-ink: #04140c;
}
.slarp-hero-tagline {
position: relative;
z-index: 2;
width: max-content;
max-width: var(--shell-rail, min(calc(100% - 48px), 1320px));
margin: clamp(28px, 5vh, 44px) auto clamp(24px, 3.5vh, 40px);
display: flex;
align-items: center;
justify-content: center;
gap: clamp(22px, 3.2vw, 44px);
padding: clamp(12px, 1.8vw, 20px) 0;
text-align: center;
}
.slarp-hero-tagline-laurel {
display: block;
width: clamp(48px, 6vw, 76px);
height: auto;
flex: none;
opacity: 1;
filter: none;
pointer-events: none;
user-select: none;
}
.slarp-hero-tagline-laurel.is-left {
transform: scaleX(-1);
}
.slarp-hero-tagline-laurel.is-right {
transform: none;
}
.slarp-hero-tagline-text {
margin: 0;
max-width: 18em;
color: rgba(244, 239, 228, .9);
font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
font-size: clamp(16px, 1.85vw, 22px);
font-weight: 650;
letter-spacing: -.01em;
line-height: 1.35;
text-wrap: balance;
}
@media (max-width: 900px) {
.slarp-hero-stage { width: var(--shell-rail); }
.slarp-hero-tagline { max-width: var(--shell-rail); }
.slarp-hero-columns {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.slarp-hero-column { aspect-ratio: 3 / 4; max-height: none; }
}
@media (max-width: 520px) {
.slarp-hero { min-height: 0; padding: var(--shell-content-gap, 24px) 0 0; }
.slarp-hero-stage { width: var(--shell-rail); }
.slarp-hero-tagline { max-width: var(--shell-rail); gap: 16px; }
.slarp-hero-columns { gap: 10px; }
.slarp-hero-column { aspect-ratio: 3 / 4; }
.slarp-hero-column-desc { display: none; }
.slarp-hero-column-title { font-size: min(22px, 5.2vw); }
.slarp-hero-tagline-laurel { width: 36px; }
.slarp-hero-tagline-text { font-size: 14px; max-width: 14em; }
}
@media (prefers-reduced-motion: reduce) {
.slarp-hero-column,
.slarp-hero-column-icon,
.slarp-hero-column-label,
.slarp-hero-column::after,
.slarp-hero-media {
transition-duration: .01ms !important;
}
.slarp-hero-column:hover,
.slarp-hero-column:focus-visible { transform: none; }
.slarp-hero-column:hover .slarp-hero-poster,
.slarp-hero-column:hover .slarp-hero-media,
.slarp-hero-column:focus-visible .slarp-hero-poster,
.slarp-hero-column:focus-visible .slarp-hero-media {
transform: none;
}
.slarp-hero-media { display: none; }
.slarp-social-tile { transition: none; }
.slarp-social-tile {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(24, 26, 30, .88);
}
}
@media (max-width: 780px) {
.hub-page { --shell-gutter: 20px; --shell-rail: min(calc(100% - var(--shell-gutter)), var(--shell-rail-max, 1320px)); }
}
@media (max-width: 360px) {
.hub-page { --shell-gutter: 12px; }
}
.slarp-about {
position: relative;
overflow: visible;
background: transparent;
padding: 32px 0 48px;
}
.slarp-about-inner {
position: relative;
z-index: 1;
width: var(--shell-rail, min(calc(100% - 48px), 1320px));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.slarp-about-title,
.slarp-about-social-title {
margin: 0;
color: #fff;
font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 900;
letter-spacing: -.03em;
line-height: 1.05;
text-transform: uppercase;
}
.slarp-about-sub,
.slarp-about-social-sub {
margin: 10px 0 0;
max-width: 40em;
color: rgba(231, 226, 218, .72);
font-size: clamp(14px, 1.3vw, 16px);
line-height: 1.5;
}
.slarp-about-social { display: grid; align-content: start; }
.slarp-social-grid {
margin: 16px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.slarp-social-tile {
--tile-hover: #2aabee;
box-sizing: border-box;
width: 100%;
min-height: 56px;
height: 100%;
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
background: rgba(18, 19, 21, .42);
box-shadow: none;
color: #fff;
text-decoration: none;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1), -webkit-backdrop-filter 180ms ease, backdrop-filter 180ms ease;
}
.slarp-social-grid > li {
display: flex;
min-width: 0;
}
.slarp-social-tile img,
.slarp-social-tile > svg {
width: 24px;
height: 24px;
flex: none;
display: block;
filter: brightness(0) invert(1);
}
.slarp-social-tile > svg { filter: none; color: #fff; }
.slarp-social-tile b {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
font-size: 15px;
font-weight: 800;
letter-spacing: -.01em;
line-height: 1.15;
}
.slarp-social-tile.is-telegram { --tile-hover: #2aabee; }
.slarp-social-tile.is-discord { --tile-hover: #5865f2; }
.slarp-social-tile.is-support { --tile-hover: rgba(255, 255, 255, .10); }
.slarp-social-tile:hover,
.slarp-social-tile:focus-visible {
background: var(--tile-hover);
border-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: translateY(-2px);
}
@media (max-width: 1279px) {
.slarp-about-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
.slarp-about-inner { width: var(--shell-rail); }
.slarp-social-grid { grid-template-columns: 1fr; }
}
.slarp-play {
--play-rail: var(--shell-rail, min(calc(100% - 48px), 1320px));
--play-gap-sm: 12px;
--play-col: clamp(28px, 4vw, 56px);
--play-radius: 16px;
--play-line: rgba(255, 255, 255, 0.12);
--play-mat: var(--m3-surface-container, #1b1d20);
--play-mat-2: var(--m3-surface-container-high, #25282c);
--play-ink: #f4efe4;
--play-muted: #b3aa98;
--play-gold: #e9c87c;
--play-gold-ink: #171310;
color: var(--play-ink);
}
.slarp-play-rail {
width: var(--play-rail);
margin-inline: auto;
padding: var(--shell-content-gap, 24px) 0 8px;
}
@media (max-width: 1024px) {
.slarp-play { --play-rail: var(--shell-rail); }
}
@media (max-width: 780px) {
.slarp-play { --play-rail: var(--shell-rail); }
}
.slarp-play-section + .slarp-play-section {
margin-top: var(--sec-gap, 48px);
}
.slarp-play-section h2 {
margin: 0;
max-width: 18ch;
font: 800 clamp(22px, 2.4vw, 32px)/1.05 var(--display);
letter-spacing: 0.01em;
text-transform: uppercase;
}
.slarp-play-lead {
margin: 10px 0 0;
max-width: 38em;
color: var(--play-muted);
font-size: 16px;
line-height: 1.5;
}
.slarp-play-opening {
display: grid;
gap: var(--sec-gap, 48px);
}
.slarp-play-actions .button.ghost {
border: 1px solid var(--play-line);
background: transparent;
color: var(--play-ink);
}
.slarp-play-steps,
.slarp-play-showcase { display: grid; gap: 16px; }
.slarp-play-steps-list,
.slarp-play-features { list-style: none; margin: 0; padding: 0; }
.slarp-play-feature-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
color: var(--play-gold);
}
.slarp-play-feature-icon svg { width: 22px; height: 22px; display: block; }
.slarp-play-step-copy p,
.slarp-play-features p {
margin: 0;
color: var(--play-muted);
font-size: 14px;
line-height: 1.5;
}
.slarp-play-steps-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--play-line);
border-radius: 20px;
background: var(--play-mat);
}
.slarp-play-step {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
gap: 14px;
padding: 20px 22px;
}
.slarp-play-step-num {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--play-ink);
font: 800 18px/1 var(--display);
}
.slarp-play-step-copy h3 {
margin: 0 0 4px;
color: var(--play-ink);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.slarp-play-showcase {
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas: "shot head" "shot list";
column-gap: var(--play-col);
row-gap: 20px;
align-items: start;
}
.slarp-play-app-shot { grid-area: shot; align-self: center; margin: 0; }
.slarp-play-app-shot img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--play-line);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.slarp-play-features { grid-area: list; display: grid; gap: 14px; }
.slarp-play-features li {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
align-items: center;
}
.slarp-play-features h3 {
margin: 0 0 2px;
color: var(--play-ink);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
@media (max-width: 900px) {
.slarp-play-showcase {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-template-areas: "head" "shot" "list";
row-gap: 16px;
}
.slarp-play-steps-list { grid-template-columns: 1fr; }
.slarp-play-step { align-items: center; padding: 14px 16px; }
}
.slarp-play-store {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 0.9fr);
gap: var(--play-col);
align-items: start;
}
.slarp-play-store-head {
grid-column: 1 / -1;
}
.slarp-play-configure {
display: grid;
gap: 18px;
min-width: 0;
}
.slarp-play-field {
display: grid;
gap: 10px;
min-width: 0;
border: 0;
margin: 0;
padding: 0;
}
.slarp-play-field-label {
color: var(--play-muted);
font-size: 12px;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.slarp-play-plans,
.slarp-play-terms {
display: grid;
gap: var(--play-gap-sm);
}
.slarp-play-plans {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.slarp-play-terms {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.slarp-play-choice {
position: relative;
min-height: 68px;
display: grid;
gap: 4px;
align-content: center;
border: 1px solid var(--play-line);
border-radius: var(--play-radius);
background: var(--play-mat);
padding: 14px 16px;
cursor: pointer;
color: inherit;
text-align: left;
}
.slarp-play-choice:has(input:checked),
.slarp-play-choice.is-on {
background: var(--fill-selected);
box-shadow: none;
}
.slarp-play-choice:is(.is-on, :has(input:checked)) > b { color: var(--play-gold); }
.slarp-play-choice input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.slarp-play-choice b {
font-size: 15px;
font-weight: 780;
}
.slarp-play-choice small {
color: var(--play-muted);
font-size: 12px;
line-height: 1.35;
}
.slarp-play-choice .slarp-play-badge {
position: absolute;
top: 10px;
right: 10px;
min-height: 22px;
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0 8px;
background: var(--play-gold);
color: var(--play-gold-ink);
font-size: 10px;
font-weight: 800;
}
.slarp-play-team {
display: none;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--play-line);
border-radius: var(--play-radius);
background: var(--play-mat);
padding: 12px 14px;
}
.slarp-play-team.is-visible { display: flex; }
.slarp-play-team-label {
display: grid;
gap: 2px;
min-width: 0;
}
.slarp-play-team-label b { font-size: 13px; }
.slarp-play-team-label span { color: var(--play-muted); font-size: 12px; }
.slarp-play-stepper {
display: inline-flex;
align-items: center;
gap: 4px;
}
.slarp-play-stepper button {
width: 44px;
height: 44px;
border: 1px solid var(--play-line);
border-radius: 12px;
background: var(--play-mat-2);
color: var(--play-ink);
font-size: 20px;
cursor: pointer;
}
.slarp-play-stepper button:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.slarp-play-stepper output {
min-width: 2.4ch;
text-align: center;
font: 800 18px/1 var(--display);
}
.slarp-play-pay {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.slarp-play-pay-choice {
position: relative;
min-height: 64px;
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 12px;
align-items: center;
border: 1px solid var(--play-line);
border-radius: var(--play-radius);
background: var(--play-mat);
padding: 12px 14px;
cursor: pointer;
color: inherit;
}
.slarp-play-pay-choice:has(input:checked),
.slarp-play-pay-choice.is-on {
background: var(--fill-selected);
}
.slarp-play-pay-choice:is(.is-on, :has(input:checked)) .slarp-play-pay-copy b { color: var(--play-gold); }
.slarp-play-pay-choice input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.slarp-play-pay-mark {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--surface-sunken, #0e0f11);
overflow: hidden;
}
.slarp-play-pay-mark img {
display: block;
max-width: 28px;
max-height: 28px;
object-fit: contain;
}
.slarp-play-pay-mark.is-sbp { background: #fff; }
.slarp-play-pay-mark.is-sbp img { max-width: 26px; max-height: 26px; }
.slarp-play-pay-mark.is-card img { max-width: 52px; max-height: 18px; }
.slarp-play-pay-mark.is-crypto img { max-width: 44px; max-height: 22px; }
.slarp-play-pay-mark.is-stars {
background: #121315 url("/img/store/telegram-stars.svg?v=8") center / 22px 22px no-repeat;
}
.slarp-play-pay-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.slarp-play-pay-copy b { font-size: 14px; font-weight: 780; }
.slarp-play-pay-copy small {
color: var(--play-muted);
font-size: 11px;
line-height: 1.3;
}
.slarp-play-summary {
border: 1px solid var(--play-line);
border-radius: 20px;
background: rgba(18, 19, 21, 0.62);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
padding: 20px 18px;
}
.slarp-play-summary h3 {
margin: 0 0 14px;
font: 800 13px/1 var(--display);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--play-gold);
}
.slarp-play-summary-rows {
display: grid;
gap: 8px;
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.slarp-play-summary-rows li {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--play-muted);
font-size: 13px;
}
.slarp-play-summary-rows strong {
color: var(--play-ink);
font-weight: 700;
text-align: right;
}
.slarp-play-total {
display: grid;
gap: 4px;
margin: 0 0 16px;
padding-top: 14px;
border-top: 1px solid var(--play-line);
}
.slarp-play-total b {
font: 800 clamp(28px, 3vw, 36px)/1 var(--display);
letter-spacing: -0.02em;
}
.slarp-play-total span {
color: var(--play-muted);
font-size: 12px;
}
.slarp-play-summary .button { width: 100%; }
.slarp-play-legal {
margin: 12px 0 0;
color: var(--play-muted);
font-size: 11px;
line-height: 1.45;
}
.slarp-play-legal a {
color: var(--play-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.slarp-play-copy-btn {
width: 100%;
min-height: 44px;
border: 1px solid var(--play-line);
border-radius: var(--radius-button, 16px);
background: transparent;
color: var(--play-ink);
font: inherit;
font-weight: 750;
cursor: pointer;
}
.slarp-play-live {
min-height: 1.2em;
margin: 8px 0 0;
color: var(--play-gold);
font-size: 12px;
}
.slarp-play-store[data-state="loading"] .slarp-play-price,
.slarp-play-store[data-state="error"] .slarp-play-price,
.slarp-play-store[data-state="empty"] .slarp-play-price {
visibility: hidden;
}
.slarp-play-skeleton {
display: none;
height: 18px;
border-radius: 8px;
background: linear-gradient(90deg, #25282c, #303338, #25282c);
background-size: 200% 100%;
animation: slarp-play-shimmer 1.2s linear infinite;
}
.slarp-play-store[data-state="loading"] .slarp-play-skeleton { display: block; }
@keyframes slarp-play-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.slarp-play-covers-viewport {
margin: 22px -12px 0;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.slarp-play-covers-track {
display: flex;
gap: 18px;
width: max-content;
padding: 6px 6px 14px 12px;
animation: slarp-play-marquee 55s linear infinite;
will-change: transform;
}
.slarp-play-covers-viewport:hover .slarp-play-covers-track,
.slarp-play-covers-viewport:focus-within .slarp-play-covers-track {
animation-play-state: paused;
}
@keyframes slarp-play-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.slarp-play-cover {
flex: 0 0 188px;
width: 188px;
display: grid;
gap: 10px;
min-width: 0;
}
.slarp-play-cover img {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 14px;
border: 1px solid var(--play-line);
background: var(--surface-sunken, #0e0f11);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}
.slarp-play-cover b {
font-size: 14px;
font-weight: 750;
line-height: 1.25;
}
.slarp-play-cover span {
min-width: 0;
overflow: hidden;
color: var(--play-muted);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
}
.slarp-play-ip-note {
margin: 14px 0 0;
max-width: 62em;
color: var(--play-muted);
font-size: 12px;
line-height: 1.5;
}
.slarp-play-cover.is-text {
display: grid;
place-content: center;
padding: 16px;
background: var(--play-mat);
}
.slarp-play-cover.is-text b {
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.slarp-play-skeleton { animation: none; }
.slarp-play-summary {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--play-mat-2);
}
.slarp-play-covers-track { animation: none; padding-right: 12px; }
.slarp-play-covers-viewport {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 12px;
scrollbar-width: none;
}
.slarp-play-covers-viewport::-webkit-scrollbar { display: none; }
.slarp-play-cover { scroll-snap-align: start; }
.slarp-play-cover[data-marquee-copy] { display: none; }
}
@media (max-width: 1100px) {
.slarp-play-store {
grid-template-columns: 1fr;
}
}
@media (max-width: 780px) {
.slarp-play-plans,
.slarp-play-terms,
.slarp-play-pay {
grid-template-columns: 1fr;
}
.slarp-play-cover {
flex-basis: 152px;
width: 152px;
}
}
.slarp-about-start .slarp-about-sub { margin-top: 12px; }
.slarp-play-showcase-head { grid-area: head; align-self: end; }
.slarp-play-step + .slarp-play-step { border-left: 1px solid var(--play-line); }
@media (max-width: 900px) {
.slarp-play-step + .slarp-play-step { border-left: 0; border-top: 1px solid var(--play-line); }
}
.slarp-play-faq-list {
margin-top: 12px;
max-width: 880px;
border-bottom: 1px solid var(--play-line);
}
.slarp-play-faq-item { border-top: 1px solid var(--play-line); }
.slarp-play-faq-item[hidden] { display: none; }
.slarp-play-faq-item > summary {
position: relative;
display: block;
min-height: 52px;
padding: 14px 40px 14px 0;
color: var(--play-ink);
font-size: 16px;
font-weight: 600;
line-height: 1.35;
list-style: none;
cursor: pointer;
}
.slarp-play-faq-item > summary::-webkit-details-marker { display: none; }
.slarp-play-faq-item > summary::after {
content: "+";
position: absolute;
right: 8px;
top: 50%;
margin-top: -12px;
color: var(--play-muted);
font-size: 22px;
font-weight: 400;
line-height: 24px;
transition: transform 180ms ease;
}
.slarp-play-faq-item[open] > summary::after { transform: rotate(45deg); }
.slarp-play-faq-item > summary:hover { color: #fff; }
.slarp-play-faq-item > p {
margin: 0;
padding: 0 40px 16px 0;
max-width: 68ch;
color: var(--play-muted);
font-size: 14px;
line-height: 1.55;
}
.slarp-play-faq-end {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
margin-top: 24px;
}
.slarp-play-faq-end .button {
min-height: var(--sh-hero-cta-h, 52px);
padding: 0 28px;
border-radius: 14px;
font-family: var(--display);
font-size: 15px;
font-weight: 850;
letter-spacing: .04em;
text-transform: uppercase;
}
@media (max-width: 780px) {
.slarp-play-faq-end { display: grid; gap: 4px; }
.slarp-play-faq-end .button { width: 100%; }
.slarp-play-faq-more { text-align: center; }
}
.slarp-play-faq-more {
margin: 0;
color: var(--play-muted);
font-size: 14px;
}
.slarp-play-faq-more a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--play-ink);
text-decoration: underline;
text-decoration-color: var(--play-line);
text-underline-offset: 3px;
}
.slarp-play-faq-more a:hover,
.slarp-play-faq-more a:focus-visible { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
.slarp-play-faq-item > summary::after { transition: none; }
}
@media (max-width: 520px) {
.slarp-hero-column-desc {
display: block;
max-width: none;
min-height: calc(2em * 1.3);
color: rgba(255, 255, 255, .68);
font-size: 12px;
line-height: 1.3;
}
.slarp-hero-column-desc .desc-wide { display: none; }
.slarp-hero-column-desc .desc-narrow[hidden] { display: inline !important; }
}
@media (max-width: 340px) {
.slarp-hero-column-desc { font-size: 11.5px; }
}
.store-page .home-order-summary .store-pay-note {
margin: 8px 0 0;
color: var(--m3-on-surface-variant, var(--muted, #B3AA98));
font-size: 12px;
line-height: 1.4;
text-align: center;
}
.checkout-gate [data-checkout-gate-text] {
max-width: 34em;
text-wrap: pretty;
}
.checkout-gate p.checkout-gate-seller {
margin: -4px 0 0;
color: var(--muted, #B3AA98);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
.game-region-plain,
.game-code-note {
margin: 0;
color: var(--muted, #B3AA98);
font-size: 13px;
line-height: 1.45;
}
.voucher-country-note {
margin: 0 0 10px;
color: var(--muted, #B3AA98);
font-size: 12px;
line-height: 1.45;
}
.choice-hint.is-quiet {
border-color: var(--line);
background: transparent;
color: var(--muted, #B3AA98);
font-weight: 600;
}
.choice-hint.is-quiet:hover {
border-color: var(--line-strong);
color: var(--text, #F4EFE4);
}
.voucher-steam-topup {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--muted, #B3AA98);
font-size: 13px;
line-height: 1.35;
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 3px;
}
.voucher-steam-topup:hover { color: var(--text, #F4EFE4); }
.empty-state .empty-state-links { margin-top: 2px; }
.empty-state-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 4px;
color: var(--text, #F4EFE4);
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 3px;
}
.slarp-play-join {
min-height: 70vh;
background: transparent;
}
.slarp-play-join .slarp-play-rail {
padding-top: var(--shell-content-gap, 24px);
padding-bottom: 48px;
}
.slarp-join {
width: min(100%, 480px);
margin-inline: auto;
display: grid;
gap: 22px;
}
.slarp-join:has(.slarp-join-card-wide:not([hidden])) {
width: min(100%, 480px);
}
.slarp-join.is-auth-only .slarp-join-progress,
.slarp-join.is-auth-only [data-join-continue] {
display: none;
}
.slarp-join.is-auth-only .slarp-join-actions {
grid-template-columns: 1fr;
}
.slarp-join-progress {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
align-items: start;
position: relative;
}
.slarp-join-progress::before {
content: "";
position: absolute;
top: 22px;
left: 16%;
right: 16%;
height: 1px;
background: rgba(255, 255, 255, 0.12);
pointer-events: none;
}
.slarp-join-progress li {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: 8px;
color: var(--play-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.slarp-join-dot {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
background: #141518;
color: #8a8272;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.slarp-join-dot svg {
width: 20px;
height: 20px;
}
.slarp-join-progress li.is-active .slarp-join-dot {
border-color: var(--gold-line);
background: #25282c;
color: var(--play-gold);
}
.slarp-join-progress li.is-done .slarp-join-dot {
border-color: transparent;
background: var(--fill-selected);
color: var(--play-gold);
}
.slarp-join-progress li.is-active {
color: var(--play-ink);
}
.slarp-join-card {
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 20px;
background: #1b1d20;
padding: clamp(20px, 4vw, 32px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.slarp-join-brand {
display: flex;
justify-content: center;
margin-bottom: 18px;
}
.slarp-join-brand img {
width: 28px;
height: auto;
display: block;
opacity: 0.95;
}
.slarp-join-brand.slarp-join-art { margin-bottom: 12px; }
.slarp-join-art img { width: 96px; height: 96px; object-fit: contain; opacity: 1; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .4)); }
.slarp-join .slarp-join-card h1 { font: 800 var(--sh-hero-title-sm, clamp(26px, 2.4vw, 32px))/1.05 var(--display); letter-spacing: .01em; text-wrap: balance; }
.slarp-join-card h1,
.slarp-join-card h2 {
margin: 0;
text-align: center;
font: 780 clamp(22px, 3.6vw, 28px)/1.1 var(--display);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.slarp-join-lead {
margin: 10px 0 0;
text-align: center;
color: var(--play-muted);
font-size: 14px;
line-height: 1.5;
}
.slarp-join-email {
display: grid;
gap: 10px;
margin-top: 22px;
}
.slarp-join-email-submit {
margin-top: 4px;
min-height: 52px;
border-radius: 14px;
font: 850 15px/1 var(--display);
letter-spacing: .04em;
text-transform: uppercase;
}
.slarp-join-divider {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
margin: 18px 0 12px;
color: rgba(179, 170, 152, 0.55);
font-size: 12px;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.slarp-join-divider::before,
.slarp-join-divider::after {
content: "";
height: 1px;
background: rgba(255, 255, 255, 0.08);
}
.slarp-join-method {
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 0 16px;
border: 1px solid transparent;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
color: var(--play-ink);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease;
}
.slarp-join-method:hover,
.slarp-join-method:focus-visible {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.08);
}
.slarp-join-method.is-telegram:hover,
.slarp-join-method.is-telegram:focus-visible {
background: rgba(42, 171, 238, 0.12);
border-color: rgba(42, 171, 238, 0.28);
}
.slarp-join-method i {
width: 22px;
height: 22px;
display: grid;
place-items: center;
flex: none;
}
.slarp-join-method i img,
.slarp-join-method i svg {
width: 22px;
height: 22px;
display: block;
}
.slarp-join-field {
position: relative;
display: block;
margin-top: 0;
}
.slarp-join-promo {
margin-top: 14px;
}
.slarp-join-field-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: rgba(179, 170, 152, 0.72);
display: grid;
place-items: center;
pointer-events: none;
transition: color 160ms ease;
}
.slarp-join-field-icon svg {
width: 18px;
height: 18px;
}
.slarp-join-field input {
width: 100%;
height: 52px;
border: 1px solid transparent;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
color: var(--play-ink);
padding: 0 14px 0 44px;
font-size: 15px;
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.slarp-join-field input::placeholder {
color: #a39c8c;
}
.slarp-join-field input:hover {
background: rgba(255, 255, 255, 0.07);
}
.slarp-join-field:focus-within .slarp-join-field-icon {
color: var(--play-gold);
}
.slarp-join-field input:focus {
border-color: var(--text, #F4EFE4);
box-shadow: none;
}
.slarp-join-promo input:not(:placeholder-shown) {
border-color: var(--line-strong, #36393e);
}
.slarp-join-promo-toggle,
.slarp-join-actions .button[data-join-toggle-mode] {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin: 8px auto 0;
padding: 0 8px;
border: 0 !important;
background: none !important;
box-shadow: none !important;
color: var(--play-muted);
font: 600 13px/1.3 var(--body);
letter-spacing: 0;
text-transform: none;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .24);
text-underline-offset: 3px;
cursor: pointer;
}
.slarp-join-actions .button[data-join-toggle-mode] { width: auto; margin: 0 auto; color: var(--play-ink); }
.slarp-join-promo-toggle:hover,
.slarp-join-actions .button[data-join-toggle-mode]:hover { transform: none !important; filter: none !important; color: var(--play-ink); text-decoration-color: currentColor; }
.slarp-join-promo-toggle[aria-expanded="true"] { display: none; }
.slarp-join-resend { display: inline; padding: 0; border: 0; background: none; color: var(--play-ink); font: inherit;
text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.slarp-join-email-submit:disabled { opacity: .6; cursor: progress; }
.slarp-join-actions [data-join-continue]:disabled { display: none; }
.slarp-join-actions:has([data-join-continue]:disabled) { grid-template-columns: 1fr; }
.slarp-join-email .slarp-join-legal { margin: 4px 0 2px; }
.slarp-join-email + .slarp-join-status { margin-top: 10px; }
.slarp-join-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 16px;
}
.slarp-join-actions .button {
width: 100%;
min-height: 48px;
border-radius: 14px;
}
.slarp-join-actions .button.ghost {
border-color: transparent;
background: rgba(255, 255, 255, 0.045);
color: var(--play-ink);
}
.slarp-join-actions .button.ghost:hover,
.slarp-join-actions .button.ghost:focus-visible {
background: rgba(255, 255, 255, 0.09);
}
.slarp-join-actions [data-join-return-app] {
grid-column: 1 / -1;
}
.slarp-join-legal {
display: grid;
gap: 10px;
margin-top: 18px;
}
.slarp-join-legal label {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--play-muted);
font-size: 12.5px;
line-height: 1.4;
}
.slarp-join-legal input {
margin-top: 2px;
flex: none;
width: 16px;
height: 16px;
accent-color: var(--play-gold);
}
.slarp-join-legal a {
color: rgba(244, 239, 228, 0.88);
text-decoration: underline;
text-underline-offset: 2px;
}
.slarp-join-status {
min-height: 1.3em;
margin: 14px 0 0;
text-align: center;
color: var(--play-muted);
font-size: 13px;
}
.slarp-join-status.is-ok {
color: #8fd49a;
}
.slarp-join-status.is-err {
color: #e8a090;
}
.slarp-join-card :is(h1, h2)[tabindex="-1"]:focus {
outline: none;
}
.slarp-join:has(.slarp-join-card-choice:not([hidden])) {
width: min(100%, 480px);
}
.slarp-join-progress {
width: min(100%, 440px);
justify-self: center;
}
.slarp-join-choice {
display: grid;
gap: 20px;
margin-top: 20px;
}
.slarp-join-offer {
display: grid;
gap: 14px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--play-ink, #f4efe4);
font: inherit;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.slarp-join-offer-head {
display: grid;
gap: 4px;
}
.slarp-join-offer-head b {
font: 800 20px/1.2 var(--display);
letter-spacing: 0.01em;
}
.slarp-join-offer-head small {
color: var(--play-muted, #b3aa98);
font-size: 14px;
line-height: 1.4;
}
.slarp-join-offer-cta {
min-height: 52px;
display: grid;
place-items: center;
padding: 0 16px;
border-radius: 14px;
background: var(--play-gold, #e9c87c);
color: var(--play-gold-ink, #171310);
font: 850 15px/1.2 var(--display);
letter-spacing: 0.04em;
text-transform: uppercase;
transition: filter 180ms ease, transform 180ms ease;
}
.slarp-join-offer:hover .slarp-join-offer-cta { filter: brightness(1.06); }
.slarp-join-offer:active .slarp-join-offer-cta { transform: scale(.98); }
.slarp-join-offer:focus-visible { outline: none; }
.slarp-join-offer:focus-visible .slarp-join-offer-cta { outline: 2px solid var(--focus-ring, #f4efe4); outline-offset: 2px; }
.slarp-join-offer[aria-busy="true"] { cursor: progress; }
.slarp-join-offer[aria-busy="true"] .slarp-join-offer-cta { filter: saturate(.7); }
.slarp-join.is-pc .slarp-join-offer-head b {
color: var(--play-muted, #b3aa98);
font: 600 14px/1.4 var(--body);
letter-spacing: 0;
}
.slarp-join-alt {
display: grid;
gap: 10px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.slarp-join-alt[hidden] { display: none; }
.slarp-join-alt-line {
margin: 0;
color: var(--play-muted, #b3aa98);
font-size: 14px;
line-height: 1.45;
text-align: center;
}
.slarp-join-alt .slarp-join-buy {
width: 100%;
min-height: 48px;
border-radius: 14px;
font: 850 14px/1.2 var(--display);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.slarp-join-alt .slarp-join-buy:not(.secondary):not(.is-link) {
min-height: 52px;
font-size: 15px;
}
.slarp-join-alt:has(.slarp-join-buy:not(.secondary):not(.is-link)) {
padding-top: 0;
border-top: 0;
}
.slarp-join-alt .slarp-join-buy.is-link {
min-height: 44px;
margin: 0 auto;
width: auto;
padding: 0 8px;
border: 0 !important;
background: none !important;
box-shadow: none !important;
color: var(--play-ink, #f4efe4) !important;
font: 600 14px/1.3 var(--body);
letter-spacing: 0;
text-transform: none;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .3);
text-underline-offset: 3px;
}
.slarp-join-alt:has(.slarp-join-buy.is-link) {
padding-top: 0;
border-top: 0;
}
.slarp-join-alt .slarp-join-buy.is-link:hover { transform: none !important; filter: none !important; text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
.slarp-join-offer-cta { transition: none; }
}
.slarp-join-key {
display: grid;
gap: 10px;
margin: 18px 0 0;
padding: 14px;
border: 1px solid var(--line-strong, #36393e);
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
}
.slarp-join-key code {
font-family: ui-monospace, Consolas, monospace;
font-size: 15px;
word-break: break-all;
color: var(--play-gold);
}
.slarp-join-card-wide .slarp-play-store {
margin-top: 18px;
}
@media (max-width: 720px) {
.slarp-join-actions,
.slarp-join-choice {
grid-template-columns: 1fr;
}
.slarp-join-progress::before {
left: 18%;
right: 18%;
}
}
@media (max-width: 780px) {
.slarp-join { gap: 16px; }
.slarp-join-progress::before { top: 16px; }
.slarp-join-progress li > span:not(.slarp-join-dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.slarp-join-dot { width: 32px; height: 32px; }
.slarp-join-dot svg { width: 16px; height: 16px; }
.slarp-join-art img { width: 72px; height: 72px; }
}
.slarp-prices {
display: grid;
gap: clamp(56px, 9vw, 96px);
padding-bottom: 28px;
}
.slarp-prices-step {
display: grid;
justify-items: center;
gap: 18px;
text-align: center;
}
.slarp-prices-badge {
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 12px;
border: 1px solid var(--play-line, rgba(255, 255, 255, 0.12));
border-radius: 6px;
background: var(--play-mat, #1b1d20);
color: var(--play-gold, #e9c87c);
font: 800 11px/1 var(--display);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.slarp-prices-step h1,
.slarp-prices-step h2 {
margin: 0;
max-width: 18ch;
font: 800 clamp(20px, 2vw, 28px)/1.05 var(--display);
letter-spacing: 0.01em;
text-transform: uppercase;
}
.slarp-prices-lead {
margin: 0;
max-width: 42em;
color: var(--play-muted, #b3aa98);
font-size: 15px;
line-height: 1.55;
}
.slarp-prices-switch {
display: inline-grid;
grid-auto-flow: column;
grid-auto-columns: minmax(96px, 1fr);
gap: 4px;
margin-top: 8px;
padding: 5px;
border: 1px solid var(--play-line, rgba(255, 255, 255, 0.12));
border-radius: 14px;
background: #16181b;
}
.slarp-prices-switch-opt {
position: relative;
min-height: 44px;
display: grid;
place-items: center;
padding: 0 18px;
border-radius: 10px;
cursor: pointer;
color: var(--play-muted, #b3aa98);
font: 800 14px/1 var(--display);
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background 220ms ease, color 220ms ease;
}
.slarp-prices-switch-opt input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.slarp-prices-switch-opt.is-on,
.slarp-prices-switch-opt:has(input:checked) {
background: var(--fill-selected);
color: var(--m3-primary, #e9c87c);
}
.slarp-prices-switch-opt:not(.is-on):not(:has(input:checked)):hover {
background: var(--fill-hover, rgba(255, 255, 255, .06));
}
.slarp-prices-hero { justify-self: stretch; text-align: left; }
.slarp-prices-hero .slarp-prices-switch { margin-top: 0; }
[data-play-plans]:empty,
.slarp-prices-hero .sh-hero-actions:has([data-play-plans]:empty) { display: none; }
.slarp-prices-features-line { margin: 2px 0 0; max-width: 64em; color: var(--play-muted, #b3aa98); font-size: 13px; line-height: 1.5; }
.slarp-prices-team {
width: min(100%, 420px);
margin-top: 4px;
}
.slarp-prices-terms {
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 10px;
text-align: left;
}
.slarp-prices-term {
position: relative;
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
padding: 16px 18px;
border: 1px solid transparent;
border-radius: 16px;
background: var(--fill-rest, rgba(255, 255, 255, .035));
cursor: pointer;
color: inherit;
transition: background 200ms ease;
}
.slarp-prices-term input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.slarp-prices-term:not(.is-on):not(:has(input:checked)):hover {
background: var(--fill-hover, rgba(255, 255, 255, .06));
}
.slarp-prices-term.is-on,
.slarp-prices-term:has(input:checked) {
border-color: transparent;
background: var(--fill-selected);
box-shadow: none;
}
.slarp-prices-term:has(input:focus-visible) {
outline: 2px solid var(--focus-ring, #f4efe4);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.slarp-prices-term,
.slarp-prices-pay-row,
.slarp-prices-switch-opt {
transition: none;
}
}
.slarp-prices-term-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 8px;
min-width: 0;
}
.slarp-prices-term-head b {
font: 700 16px/1.2 var(--body);
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}
.slarp-prices-term:is(.is-on, :has(input:checked)) .slarp-prices-term-head b {
color: var(--play-gold, #e9c87c);
}
.slarp-prices-term:is(.is-on, :has(input:checked)) .slarp-prices-term-head b::after {
content: "";
display: inline-block;
width: 5px;
height: 10px;
margin: 0 2px 3px 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(40deg);
vertical-align: middle;
}
.slarp-prices-term-off {
flex: none;
padding: 3px 7px;
border-radius: 8px;
background: rgba(255, 255, 255, .08);
color: var(--play-ink, #f4efe4);
font: 700 12px/1.1 var(--body);
letter-spacing: 0;
}
.slarp-prices-term-price {
display: grid;
gap: 2px;
align-content: start;
}
.slarp-prices-term-price b {
font: 800 28px/1.05 var(--display);
letter-spacing: -0.01em;
white-space: nowrap;
}
.slarp-prices-term-price b small {
margin-left: 2px;
color: var(--play-muted, #b3aa98);
font: 600 14px/1 var(--body);
letter-spacing: 0;
}
.slarp-prices-term-total {
color: var(--play-muted, #b3aa98);
font-size: 13px;
font-weight: 400;
line-height: 1.35;
white-space: nowrap;
}
.slarp-prices-term-total strong {
color: var(--play-ink, #f4efe4);
font-weight: 700;
}
.slarp-prices-status {
margin: 0;
min-height: 1.2em;
color: var(--play-muted, #b3aa98);
font-size: 13px;
}
.slarp-prices-account {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 6px;
}
.slarp-prices-account .button {
min-width: 180px;
}
.slarp-prices-checkout {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
gap: clamp(18px, 3vw, 28px);
align-items: start;
text-align: left;
margin-top: 8px;
}
.slarp-prices-pay-panel {
border: 0;
border-radius: 18px;
background: transparent;
overflow: visible;
}
.slarp-prices-pay-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
padding: 14px 16px;
border: 0;
border-radius: 14px;
background: rgba(255, 255, 255, .04);
color: rgba(244, 239, 228, 0.86);
font-size: 13px;
line-height: 1.45;
}
.slarp-prices-pay-note span {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--play-gold, #e9c87c);
color: var(--play-gold-ink, #171310);
font: 800 11px/1 var(--display);
}
.slarp-prices-pay {
display: grid;
gap: 10px;
}
.slarp-prices-pay-row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
min-height: 56px;
padding: 8px 14px;
border: 1px solid transparent;
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
cursor: pointer;
transition: background 240ms cubic-bezier(.2, .8, .2, 1);
}
.slarp-prices-pay-row:first-child {
border-top: 0;
}
.slarp-prices-pay-row input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.slarp-prices-pay-row.is-on,
.slarp-prices-pay-row:has(input:checked) {
background: var(--fill-selected);
box-shadow: none;
}
.slarp-prices-pay-row:is(.is-on, :has(input:checked)) .slarp-prices-pay-label b { color: var(--play-gold, #e9c87c); }
.slarp-prices-pay-label {
display: grid;
gap: 2px;
}
.slarp-prices-pay-label b {
font-size: 14px;
font-weight: 700;
}
.slarp-prices-pay-label small {
color: var(--play-muted, #b3aa98);
font-size: 12px;
}
.slarp-prices-pay-marks {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
max-width: min(100%, 280px);
}
.slarp-prices-pay-chip {
display: grid;
place-items: center;
min-height: 32px;
padding: 4px 8px;
border-radius: 9px;
background: #fff;
box-shadow: none;
}
.slarp-prices-pay-chip img {
display: block;
width: auto;
height: auto;
max-height: 24px;
object-fit: contain;
}
.slarp-prices-pay-chip.is-sbp {
width: 40px;
height: 40px;
padding: 0;
}
.slarp-prices-pay-chip.is-sbp img {
width: 26px;
height: 26px;
}
.slarp-prices-pay-chip.is-card {
min-width: 88px;
padding-inline: 12px;
}
.slarp-prices-pay-chip.is-card img {
width: 72px;
max-height: 20px;
}
.slarp-prices-pay-chip.is-crypto {
min-width: 72px;
background: linear-gradient(180deg, #1d1f22, #121315);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.slarp-prices-pay-chip.is-crypto img {
max-height: 22px;
}
.slarp-prices-pay-chip.is-stars {
width: 40px;
height: 40px;
padding: 0;
background:
#121315
url("/img/store/telegram-stars.svg?v=8")
center / 22px 22px no-repeat;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.slarp-prices-pay-row.is-on .slarp-prices-pay-chip,
.slarp-prices-pay-row:has(input:checked) .slarp-prices-pay-chip {
background: #fff;
box-shadow: none;
}
.slarp-prices-pay-row.is-on .slarp-prices-pay-chip.is-stars,
.slarp-prices-pay-row:has(input:checked) .slarp-prices-pay-chip.is-stars {
background:
#fff
url("/img/store/telegram-stars.svg?v=8")
center / 22px 22px no-repeat;
}
.slarp-prices-pay-row:not(.is-on):not(:has(input:checked)) .slarp-prices-pay-chip {
background: #1b1d20;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.slarp-prices-pay-row:not(.is-on):not(:has(input:checked)) .slarp-prices-pay-chip.is-stars {
background:
#121315
url("/img/store/telegram-stars.svg?v=8")
center / 22px 22px no-repeat;
}
.slarp-prices-summary {
display: grid;
gap: 14px;
align-content: start;
}
.slarp-prices-summary h3 {
margin: 0;
font: 800 16px/1.1 var(--display);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.slarp-prices-summary-card {
display: grid;
gap: 10px;
padding: 16px 18px;
border: 1px solid transparent;
border-radius: 16px;
background: var(--play-mat, #1b1d20);
box-shadow: none;
}
.slarp-prices-summary-plan {
margin: 0;
color: var(--play-muted, #b3aa98);
font: 600 14px/1.4 var(--body);
letter-spacing: 0;
text-transform: none;
}
.slarp-prices-summary-pay {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 14px;
}
.slarp-prices-summary-pay b {
color: var(--play-ink, #f4efe4);
font: 800 28px/1 var(--display);
white-space: nowrap;
}
.slarp-prices-method {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: var(--play-muted, #b3aa98);
font-size: 13px;
line-height: 1.35;
}
.slarp-prices-method[hidden] { display: none; }
.slarp-prices-method b { color: var(--play-ink, #f4efe4); font-weight: 700; }
.slarp-prices-method .slarp-prices-pay-marks { flex: none; flex-wrap: nowrap; gap: 6px; }
.slarp-prices-summary .slarp-prices-method .slarp-prices-pay-chip { min-height: 0; width: 28px; height: 28px; padding: 0; border-radius: 8px; }
.slarp-prices-summary .slarp-prices-method .slarp-prices-pay-chip img { width: 18px; height: 18px; max-height: none; }
.slarp-prices-summary .slarp-prices-method .slarp-prices-pay-chip.is-mir { width: 40px; }
.slarp-prices-summary .slarp-prices-method .slarp-prices-pay-chip.is-mir img { width: 28px; height: 17px; }
.slarp-prices-perks-line {
margin: 0;
color: var(--play-muted, #b3aa98);
font-size: 13px;
line-height: 1.5;
}
.slarp-prices-summary .button {
width: 100%;
}
.slarp-prices-switch-opt input:focus,
.slarp-prices-switch-opt input:focus-visible,
.slarp-prices-term input:focus,
.slarp-prices-term input:focus-visible,
.slarp-prices-pay-row input:focus,
.slarp-prices-pay-row input:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.slarp-prices[data-state="loading"] [data-play-total] {
opacity: 0.45;
}
.slarp-prices[data-state="loading"] .slarp-prices-term-price { color: transparent; font-size: 0; }
.slarp-prices[data-state="loading"] .slarp-prices-term-price > * { display: none; }
.slarp-prices[data-state="loading"] .slarp-prices-term-price::before { content: ""; width: 96px; height: 30px; border-radius: 8px; background: var(--fill-hover); }
.slarp-prices[data-state="error"] .slarp-prices-summary-card { opacity: .45; }
.slarp-prices[data-state="error"] [data-play-support] { opacity: .5; pointer-events: none; }
@media (max-width: 780px) {
.slarp-prices[data-state="loading"] .slarp-prices-term-price::before { width: 72px; height: 20px; }
.slarp-prices-switch {
width: 100%;
grid-auto-flow: row;
grid-auto-columns: unset;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.slarp-prices-terms { gap: 8px; margin-top: 0; }
.slarp-prices-term { grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 14px; }
.slarp-prices-term-head { justify-content: flex-start; }
.slarp-prices-term-price { justify-items: end; gap: 0; text-align: right; }
.slarp-prices-term-price b { font-size: 19px; }
.slarp-prices-term-price b small { font-size: 12px; }
.slarp-prices-term-total { font-size: 12px; }
.slarp-prices-terms,
.slarp-prices-checkout {
grid-template-columns: 1fr;
}
.slarp-prices-account {
width: 100%;
}
.slarp-prices-account .button {
width: 100%;
}
}
.slarp-prices-hero.sh-hero--slim .sh-hero-copy { gap: 4px; }
@media (max-width: 720px) {
.slarp-prices-summary-title { display: none; }
}
@media (max-width: 780px) {
.slarp-prices-hero.sh-hero--slim .sh-hero-actions { display: block; }
html.prices-bar-on .mobile-dock { transform: translate(-50%, calc(100% + 24px)) !important; }
body:has([data-play-bar]) .mobile-dock { transition: transform 200ms ease; }
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
body:has([data-play-bar]) .mobile-dock { transition: none; }
}
@media (min-width: 781px) {
.slarp-prices-term { padding: 16px; }
.slarp-prices-term-head { flex-wrap: nowrap; gap: 6px; }
.slarp-prices-term:is(.is-on, :has(input:checked)) .slarp-prices-term-head b::after { content: none; }
.slarp-prices-term:is(.is-on, :has(input:checked))::after {
content: "";
position: absolute;
right: 20px;
bottom: 20px;
width: 5px;
height: 10px;
border-right: 2px solid var(--play-gold, #e9c87c);
border-bottom: 2px solid var(--play-gold, #e9c87c);
transform: rotate(40deg);
pointer-events: none;
}
}
@media (max-width: 780px) {
.slarp-prices-team.slarp-play-team { min-height: 0; margin-top: 0; padding: 3px 3px 3px 14px; }
.slarp-prices-team .slarp-play-team-label { gap: 0; line-height: 1.25; }
.slarp-prices-step { gap: 16px; }
.slarp-prices-hero.sh-hero--slim { margin-bottom: 0; }
.slarp-prices-layout .slarp-prices-main { gap: 8px; }
}
@media (max-width: 360px) {
.slarp-prices-term { padding-block: 6px; }
}
.slarp-join.is-code-sent :is(label.slarp-join-field:has(#join-email), [data-join-legal-block], .slarp-join-divider, [data-join-telegram], .slarp-join-promo-toggle, .slarp-join-promo, [data-join-panel="1"] > .slarp-join-actions),
.slarp-join.is-telegram :is([data-join-email], [data-join-auth-lead], .slarp-join-divider, [data-join-telegram], .slarp-join-promo-toggle, .slarp-join-promo),
.slarp-join.is-telegram:not(.is-login) [data-join-panel="1"] > .slarp-join-actions,
.slarp-join.is-login :is(.slarp-join-promo-toggle, .slarp-join-promo) {
display: none !important;
}
.slarp-join.is-telegram [data-join-telegram-panel] { margin-top: 20px !important; }
.slarp-join.is-code-sent [data-join-status]:not(.is-err),
.slarp-join.is-telegram [data-join-status]:not(.is-err) { color: var(--play-muted, #b3aa98); }
.slarp-join [data-join-auth-lead] .slarp-join-resend,
.slarp-join [data-join-status] .slarp-join-resend { min-height: 32px; color: var(--play-ink, #f4efe4); font-weight: 600; }
.slarp-join [data-join-auth-lead] [data-join-change-email],
.slarp-join [data-join-status] [data-join-back-email] { display: block; margin: 2px auto 0; }
@media (max-width: 720px) {
.slarp-join [data-join-auth-lead] .slarp-join-resend,
.slarp-join [data-join-status] .slarp-join-resend { min-height: 44px; padding-block: 12px; margin-block: -12px; line-height: 20px; }
.slarp-join [data-join-auth-lead] [data-join-change-email],
.slarp-join [data-join-status] [data-join-back-email] { margin-block: -8px -12px; }
}
.slarp-join [data-join-choice-status]:empty { min-height: 0; margin: 0; }
@media (min-width: 721px) {
.slarp-join-art img { width: 64px; height: 64px; }
.slarp-join-brand.slarp-join-art { margin-bottom: 8px; }
.slarp-join-divider { margin: 14px 0 8px; }
[data-join-panel="1"] > .slarp-join-actions { margin-top: 0; }
.slarp-play-join .slarp-play-rail { padding-bottom: 24px; }
.slarp-join { gap: 16px; }
.slarp-join-card[data-join-panel="1"] { padding: 28px 32px 22px; }
.slarp-join-email { margin-top: 18px; }
}
@media (min-width: 721px) and (pointer: fine) {
.slarp-join-promo-toggle,
.slarp-join-actions .button[data-join-toggle-mode] { min-height: 36px; }
.slarp-join-legal label { padding-block: 2px; }
}
.slarp-join-consent .slarp-join-consent-actions { grid-template-columns: 1fr; justify-items: center; gap: 4px; margin-top: 20px; }
.slarp-join-consent .slarp-join-lead a { color: var(--play-ink, #f4efe4); text-decoration: underline; text-underline-offset: 3px; }
.slarp-join-text-link {
min-height: 44px;
padding: 0 12px;
border: 0;
background: none;
color: var(--play-muted, #b3aa98);
font: 600 14px/1.3 var(--body);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .24);
text-underline-offset: 3px;
cursor: pointer;
}
.slarp-join-text-link:hover { color: var(--play-ink, #f4efe4); text-decoration-color: currentColor; }
[data-join-trial-result] .slarp-join-actions:not(:has(> :not([hidden]))) { display: none !important; }
@media (max-width: 720px) {
.slarp-join-progress,
.slarp-join-brand,
.slarp-join-art { display: none !important; }
.slarp-join-card {
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.slarp-play-join .slarp-play-rail { padding-top: 8px; }
}
.checkout-standalone .checkout-layout { max-width: 640px !important; margin-inline: auto !important; grid-template-columns: minmax(0, 1fr) !important; }
.checkout-standalone .checkout-main h1 { margin: 0 0 8px; font: 800 var(--sh-hero-title-sm, clamp(26px, 2.4vw, 32px))/1.05 var(--display) !important; letter-spacing: .01em; text-align: center; text-transform: uppercase; text-wrap: balance; }
.checkout-standalone .checkout-gate,
.checkout-standalone .checkout-empty { justify-items: center; text-align: center; }
.checkout-standalone .checkout-side { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 10px 16px; }
.checkout-standalone .checkout-side > * { grid-column: 1 / -1; }
.checkout-standalone .checkout-side > .order-kicker { grid-area: 1 / 1; }
.checkout-standalone .checkout-side > .checkout-counter { grid-area: 1 / 2; justify-self: end; margin: 0; }
.checkout-sheet .checkout-layout {
background: var(--surface) !important;
border: 1px solid var(--glass-edge) !important;
box-shadow: var(--sheen), 0 28px 80px rgba(0, 0, 0, .55) !important;
}
.checkout-sheet .sheet-grip {
padding: 16px 16px 0;
}
.checkout-sheet .sheet-grip-title {
padding-top: 0;
color: var(--text);
font-family: var(--display);
font-size: 13px;
font-weight: 750;
letter-spacing: .12em;
text-transform: uppercase;
}
@media (min-width: 781px) {
.checkout-sheet .sheet-grip-bar { display: none; }
}
.checkout-sheet .checkout-main { padding: 8px 22px 4px; }
.checkout-sheet .checkout-item h3 {
font-size: clamp(18px, 2.4vw, 22px);
line-height: 1.15;
letter-spacing: .01em;
}
.checkout-sheet .checkout-item p {
margin-top: 6px;
color: var(--muted);
font-size: 13px;
}
.checkout-sheet .checkout-state {
min-height: 0;
margin-top: 16px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface-2);
padding: 14px 16px;
color: var(--text);
font-size: 14px;
font-weight: 600;
line-height: 1.45;
box-shadow: none;
}
.checkout-sheet .checkout-state.loading::before { content: none; }
.checkout-sheet .checkout-state.warning {
border-color: var(--line);
background: var(--surface-2);
color: var(--text);
box-shadow: inset 3px 0 var(--gold);
}
.checkout-sheet .checkout-state.error {
border-color: rgba(242, 109, 94, .28);
background: rgba(242, 109, 94, .08);
color: var(--text);
box-shadow: inset 3px 0 var(--red);
}
.checkout-sheet .checkout-side {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
gap: 10px 16px;
padding: 16px 22px 22px;
}
.checkout-sheet .checkout-side .order-kicker {
grid-column: 1;
grid-row: 1;
color: var(--muted-2);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
}
.checkout-sheet .checkout-counter {
grid-column: 2;
grid-row: 1;
display: block;
min-width: max-content;
margin: 0;
justify-self: end;
text-align: right;
white-space: nowrap;
}
.checkout-sheet .checkout-counter [data-checkout-total] {
display: inline;
color: var(--text);
font-size: 28px;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.checkout-sheet .checkout-payment-list {
grid-template-columns: 1fr;
}
.checkout-sheet .checkout-payment-list:has(> :nth-child(2)) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 420px) {
.checkout-payment-list,
.checkout-sheet .checkout-payment-list:has(> :nth-child(2)) {
grid-template-columns: minmax(0, 1fr);
}
}
.checkout-sheet .checkout-payment-method > span:last-child {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.checkout-sheet .checkout-payment-method small {
white-space: nowrap;
color: var(--muted);
font-size: 14px;
font-weight: 700;
}
.checkout-sheet .checkout-counter [data-checkout-total]:empty,
.checkout-sheet .checkout-counter [data-checkout-total]:empty::after {
font-family: var(--body);
font-size: 14px;
font-weight: 650;
color: var(--muted);
}
.checkout-sheet .checkout-summary-line,
.checkout-sheet .checkout-payment-methods,
.checkout-sheet .checkout-seller,
.checkout-sheet .checkout-legal,
.checkout-sheet .checkout-side .button {
grid-column: 1 / -1;
}
.checkout-sheet .checkout-seller {
margin: 2px 0 0;
padding-top: 0;
border-top: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
text-align: left;
}
.checkout-sheet .checkout-legal {
margin: 0;
color: var(--muted);
font-size: 13px;
text-align: left;
line-height: 1.45;
}
.checkout-sheet .checkout-state {
display: flex;
align-items: flex-start;
gap: 10px;
}
.checkout-sheet .checkout-state::before {
content: "";
position: static;
left: auto;
top: auto;
flex: none;
width: 16px;
height: 16px;
margin-top: 1px;
border: 0;
border-radius: 0;
opacity: 1;
background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9C87C' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}
.checkout-sheet .checkout-state.success { display: none; }
.checkout-sheet .checkout-side .button {
min-height: 52px;
margin-top: 4px;
letter-spacing: .06em;
text-transform: uppercase;
}
.checkout-sheet .checkout-side .button:disabled,
.checkout-sheet .checkout-side .button[disabled],
.checkout-sheet .checkout-side .button:disabled:hover,
.checkout-sheet .checkout-side .button[disabled]:hover {
background: var(--surface-3) !important;
color: var(--color-disabled, #8A8272) !important;
border: 1px solid var(--line) !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
opacity: 1 !important;
cursor: not-allowed;
}
.checkout-sheet .checkout-item h3,
.checkout-sheet .checkout-seller,
.checkout-sheet .checkout-legal,
.checkout-sheet .checkout-state {
overflow-wrap: anywhere;
}
@media (max-width: 780px) {
.checkout-sheet { padding-inline: 0; }
.checkout-sheet .checkout-layout.container {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
.checkout-sheet .checkout-main { padding: 6px 16px 4px; }
.checkout-sheet .checkout-side { padding: 14px 16px max(16px, env(safe-area-inset-bottom)); }
.checkout-sheet .sheet-grip-bar { display: block; }
}
.store-page .store-opening.sh-hero--slim {
--sh-art-box: 112px;
--sh-art-inset: 0px;
--sh-art-gap: 24px;
--sh-hero-pad-y: 0px;
--sh-hero-pad-x: 0px;
--sh-hero-min-h: 112px;
--sh-hero-title-xl: 40px;
overflow: visible !important;
border-radius: 0 !important;
background: none !important;
}
.store-page .store-opening.sh-hero--slim .store-opening-copy { gap: 6px !important; }
@media (max-width: 780px) {
.store-page .store-opening.sh-hero--slim { --sh-art-box: 56px; --sh-art-gap: 16px; --sh-hero-min-h: 56px; }
.store-page .store-opening.sh-hero--slim .store-opening-copy { min-height: 56px !important; align-content: center !important; }
.store-page .store-opening.sh-hero--slim .store-opening-copy h1 { font-size: clamp(22px, 6.9vw, 26px) !important; }
.store-page .store-opening.sh-hero--slim .store-opening-copy p { display: none !important; }
.store-page .store-opening.sh-hero--slim .store-opening-visual { top: 50% !important; margin: calc(var(--sh-art-box) / -2) 0 0 !important; }
.store-page .store-rail { gap: 10px !important; padding-top: 6px !important; }
.store-page .home-order-card { padding: 12px !important; }
}
@media (max-width: 360px) {
.store-page .store-opening.sh-hero--slim .store-opening-copy h1 { font-size: 21px !important; }
.store-page .home-presets .quick { height: 44px !important; min-height: 44px !important; }
.store-page .home-order-card .input-wrap input,
.store-page .home-steam-amount,
.store-page .home-order-card .amount-field { height: 48px !important; min-height: 48px !important; }
.store-page .home-order-card .helper.steam-range { margin-top: 4px !important; }
}
.store-page .store-home-rail .home-showcase { margin-top: calc(var(--sec-gap, 48px) - 14px) !important; }
@media (min-width: 1024px) {
.store-page .store-home-rail > .home-quick-order,
.telegram-page .home-quick-order { width: 100%; max-width: 680px; margin-inline: 0 !important; }
}
@media (min-width: 1100px) {
.store-page .store-home-rail { grid-template-columns: minmax(0, 680px) minmax(0, 1fr) !important; column-gap: 24px !important; align-items: start !important; }
.store-page .store-home-rail > * { grid-column: 1 / -1; }
.store-page .store-home-rail > .home-quick-order { grid-column: 1; }
.store-page .store-home-rail > .home-showcase { grid-column: 2; margin-top: 0 !important; }
.store-page .store-home-rail .home-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
.store-page .store-home-rail .home-showcase { gap: 8px !important; }
.store-page .store-home-rail .home-showcase-card { min-height: 60px !important; padding: 8px 12px !important; grid-template-columns: 44px minmax(0, 1fr) !important; gap: 12px !important; }
.store-page .store-home-rail .home-showcase-art,
.store-page .store-home-rail .home-showcase-card.service .home-showcase-art { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
.store-page .store-home-rail .home-showcase-head h2 { font-size: 20px !important; }
.store-page .store-home-rail .home-showcase-copy b { white-space: normal !important; text-overflow: clip !important; overflow-wrap: normal !important; }
}
@media (min-width: 781px) {
.store-page .store-rail { padding-bottom: 24px !important; }
}
.store-page .home-order-fields > .field > label { height: auto !important; min-height: 0 !important; }
.store-page .home-recipient .premium-owned-note {
margin: 6px 0 0 !important;
color: var(--m3-on-surface-variant) !important;
font-size: 13px !important;
line-height: 1.4 !important;
}
@media (max-width: 780px) {
.store-page .home-recipient .premium-owned-note { font-size: 12px !important; }
}
.input-wrap.recipient-confirmed > span:not(.recipient-identity) { display: none !important; }
.catalog-result:empty { display: none !important; }
.games-page .catalog-tools { grid-template-columns: minmax(0, 1fr) !important; }
.games-page .catalog-category-tabs { margin-block: 0 !important; }
@media (min-width: 781px) {
.games-page .catalog-category-tabs { margin-inline: 0 !important; }
}
@media (min-width: 1024px) {
.games-page .store-rail { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) !important; column-gap: 16px !important; }
.games-page .store-rail > * { grid-column: 1 / -1; }
.games-page .store-rail > .catalog-tools { grid-column: 1; }
.games-page .store-rail > .catalog-category-tabs { grid-column: 2; align-self: center; }
}
@media (min-width: 781px) {
:is(.games-page, .services-page) .game-logo-card { grid-template-rows: auto auto !important; row-gap: 4px !important; }
:is(.games-page, .services-page) .catalog-grid.game-logo-grid { row-gap: 10px !important; }
:is(.games-page, .services-page) .game-logo-card h3 { min-height: 0 !important; }
:is(.games-page, .services-page) .game-logo-card .catalog-card-price { margin-top: 2px !important; }
}
.store-page .config-step-title > span { display: none !important; }
.store-page .config-step:has(+ :is(.configurator-footer, .voucher-footer)) { border-bottom: 0 !important; }
.games-page .game-configurator.is-compact { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
.games-page .game-configurator.is-compact .game-checkout-heading { justify-content: flex-start !important; gap: 12px !important; }
.games-page .game-checkout-badge { width: 40px; height: 40px; flex: none; border-radius: 10px; object-fit: cover; }
.games-page .game-configurator.is-compact .game-checkout-heading h3 {
display: block !important;
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
font-family: var(--body);
font-size: 18px;
font-weight: 800;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.games-page .game-configurator.is-compact .game-checkout-heading .icon-button { flex: none; margin-left: auto; }
.store-page :is(.region-choice-grid, .voucher-region-grid) {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-inline: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.store-page :is(.voucher-region, .region-choice) {
width: auto !important;
min-width: 0 !important;
min-height: 44px !important;
flex: 0 0 auto !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 0 14px 0 12px !important;
border-radius: 999px !important;
text-align: left !important;
}
.store-page :is(.voucher-region, .region-choice)::after { content: none !important; }
.store-page :is(.voucher-region, .region-choice) img { width: 20px !important; height: 14px !important; border-radius: 3px !important; box-shadow: none !important; }
.store-page :is(.voucher-region, .region-choice) .choice-copy { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; }
.store-page :is(.voucher-region, .region-choice) b { width: auto !important; white-space: nowrap !important; }
.store-page :is(.voucher-region, .region-choice):is(.is-on, .active, [aria-pressed="true"]) b::after { margin-right: 0 !important; }
.store-page :is(.product-choice-grid, .voucher-product-grid) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.store-page .voucher-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (min-width: 781px) {
.store-page .product-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.store-page .voucher-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
.store-page :is(.product-choice, .voucher-product) {
min-height: 56px !important;
gap: 2px !important;
justify-items: start !important;
text-align: left !important;
padding: 8px 26px 8px 12px !important;
}
.store-page :is(.product-choice, .voucher-product):is(.active, [aria-pressed="true"])::before { top: 8px !important; right: 8px !important; }
.store-page .telegram-package {
min-height: 56px !important;
padding: 8px 8px 8px 12px !important;
gap: 2px !important;
justify-items: start !important;
text-align: left !important;
}
.store-page .telegram-package:is(.active, [aria-pressed="true"])::before { top: auto !important; bottom: 10px !important; right: 8px !important; }
@media (max-width: 360px) {
.store-page [data-premium-packages] .telegram-package { padding: 8px 4px 8px 6px !important; }
}
.store-page :is(.product-choice small, .voucher-product em, .choice-price) {
display: block;
margin: 0 !important;
color: var(--m3-on-surface-variant) !important;
font-family: var(--body) !important;
font-size: 13px !important;
font-style: normal !important;
font-weight: 400 !important;
}
.store-page :is(.voucher-region, .region-choice) .choice-price { display: inline !important; }
.store-page .config-step-title b { font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; }
.store-page .account-fields .field > span,
.store-page .account-fields label > span { font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
.games-page .configurator-footer span { font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--m3-on-surface-variant) !important; }
.games-page .configurator-footer b { font-size: 14px !important; font-weight: 700 !important; }
:is(.games-page, .services-page) .game-logo-card h3 { font-size: 12px !important; }
:is(.games-page, .services-page) .game-logo-card .catalog-card-price { font-size: 12px !important; font-weight: 400 !important; color: var(--m3-on-surface-variant) !important; }
.store-page .quick { font-size: 12px !important; font-weight: 700 !important; }
.store-page .home-steam-labelrow .field-help { font-size: 14px !important; }
.store-page .home-order-summary .button { font-weight: 800 !important; }
.store-page .home-showcase-copy b { font-size: 14px !important; }
.store-page .store-opening.sh-hero--slim { --sh-hero-lead-size: 16px; }
.checkout-sheet .checkout-side .order-kicker { font-size: 12px; }
.checkout-page .checkout-summary-line span { font-size: 12px !important; }
.checkout-page .checkout-summary-line b { font-size: 14px !important; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-copy b { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.02em !important; }
@media (max-width: 360px) {
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-copy b { font-size: 11px !important; letter-spacing: 0 !important; }
}
.services-page .voucher-layout { grid-template-columns: minmax(0, 760px) !important; grid-template-rows: auto !important; }
.services-page .voucher-main { border-radius: 24px !important; padding-bottom: 0 !important; max-height: min(780px, calc(100dvh - 40px)) !important; }
.services-page .voucher-footer {
position: sticky;
bottom: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 8px -22px 0;
padding: 12px 22px;
border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.services-page .voucher-footer > div { min-width: 0; }
.services-page .voucher-footer span { display: block; color: var(--m3-on-surface-variant); font-size: 12px; }
.services-page .voucher-footer b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.services-page .voucher-footer .button { min-width: 220px; min-height: 48px; }
@media (max-width: 780px) {
.services-page .voucher-layout { grid-template-rows: minmax(0, 1fr) !important; }
.services-page .voucher-main { max-height: 91dvh !important; border-radius: 24px 24px 0 0 !important; }
.services-page .voucher-footer { margin: 8px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.services-page .voucher-footer .button { flex: 1 1 auto; min-width: 0; }
}
.checkout-page .checkout-counter [data-checkout-total] { color: var(--text) !important; }
.checkout-page .checkout-summary-line span { color: var(--m3-on-surface-variant) !important; }
.checkout-page .checkout-summary-line b { color: var(--text) !important; font-weight: 700 !important; }
.checkout-page :is(.checkout-legal, .checkout-seller) a { color: var(--text) !important; text-decoration-color: var(--m3-on-surface-variant) !important; }
.checkout-sheet .checkout-dismiss { background: rgba(4, 5, 4, .72) !important; }
@media (min-width: 781px) {
.checkout-sheet .checkout-layout.container { width: min(560px, 100%) !important; max-width: 560px !important; margin-inline: auto !important; }
}
.checkout-payment-methods.is-single > span:first-child { display: none !important; }
.checkout-payment-methods.is-single .checkout-payment-list { display: block !important; }
.checkout-payment-single { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--m3-on-surface-variant); font-size: 13px; line-height: 1.4; }
.checkout-payment-single .checkout-payment-mark { width: 22px; height: 22px; flex: none; border-radius: 6px; }
.checkout-payment-single .checkout-payment-mark.sbp img { width: 16px; height: 16px; }
.checkout-standalone .checkout-seller,
.checkout-standalone .checkout-legal { text-align: left; }
.steam-help-dialog .steam-help-head { min-height: 56px; padding: 10px 16px 10px 22px; }
.steam-help-dialog .steam-help-head h2 { margin: 0; font-size: clamp(20px, 5vw, 26px); }
.steam-help-dialog > p { margin: 16px 22px 12px; font-size: 14px; }
.steam-help-dialog .steam-account-link { min-height: 48px; margin: 0 22px 14px; border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--text); }
.steam-help-dialog > p.steam-country-line { margin: 0 22px 16px; color: var(--m3-on-surface-variant); font-size: 13px; line-height: 1.5; }
@media (max-width: 780px) {
.steam-help-dialog .steam-help-head { padding-left: 16px; }
.steam-help-dialog > p,
.steam-help-dialog > p.steam-country-line { margin-inline: 16px; }
.steam-help-dialog .steam-account-link { margin-inline: 16px; }
}
.store-page .home-steam-labelrow .field-help,
.store-page .home-order-layout.compact-action .home-steam-labelrow .field-help {
position: relative !important;
min-height: 24px !important;
display: inline-flex !important;
align-items: center !important;
}
.store-page .home-steam-labelrow .field-help::after {
content: "";
position: absolute;
inset: -12px -8px -8px;
}
.slarp-join-divider {
color: var(--play-muted, #b3aa98);
}
.slarp-join-legal label {
align-items: center;
padding-block: 4px;
}
.slarp-join-legal input {
width: 20px;
height: 20px;
margin-top: 0;
}
.slarp-play-legal {
font-size: 12px;
line-height: 2;
}
.slarp-join-actions .button.ghost:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.slarp-prices-badge {
border: 1px solid var(--play-line, rgba(255, 255, 255, 0.12));
background: var(--play-mat, #1b1d20);
color: var(--play-muted, #b3aa98);
}
.slarp-prices-access {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap: 0;
max-width: none;
margin: 0 0 0 -16px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--play-muted, #b3aa98);
font-size: 14px;
line-height: 1.45;
clip-path: inset(-16px -16px -16px 12px);
}
.slarp-prices-access-text { padding-left: 16px; }
.slarp-prices-access-go { display: inline-flex; align-items: baseline; white-space: nowrap; }
.slarp-prices-access-sep { display: inline-block; width: 16px; color: var(--play-muted, #b3aa98); text-align: center; }
.slarp-prices-access[hidden] { display: none; }
.slarp-prices-access b {
color: var(--play-ink, #f4efe4);
font-weight: 700;
}
.slarp-prices-access a {
padding-block: 12px;
margin-block: -12px;
color: var(--play-ink, #f4efe4);
font-weight: 700;
text-decoration: underline;
text-decoration-color: rgba(244, 239, 228, 0.35);
text-underline-offset: 4px;
}
.slarp-prices-access a:hover { text-decoration-color: currentColor; }
.slarp-prices-access a:focus-visible {
outline: 2px solid var(--play-ink, #f4efe4);
outline-offset: 0;
border-radius: 4px;
}
@media (max-width: 780px) {
.slarp-prices-access { line-height: 1.35; }
}
.slarp-prices-renewal {
margin: 0;
padding: 0;
border: 0;
color: var(--play-ink, #f4efe4);
font-size: 13px;
line-height: 1.5;
text-align: left;
}
.slarp-prices-renewal[hidden] { display: none; }
.store-page .home-order-card .field > label { margin-bottom: 3px !important; }
.uninstall-page {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: calc(100dvh - 72px);
padding: clamp(24px, 6vh, 56px) 0 32px;
}
.uninstall-card {
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 28px 24px;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--surface);
text-align: left;
}
.uninstall-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; }
.uninstall-head img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); }
.uninstall-card h1 { font-size: clamp(22px, 4vw, 28px); line-height: 1.15; text-wrap: balance; }
.uninstall-lead { margin: 8px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.uninstall-reasons { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; }
.uninstall-choice {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--line);
border-radius: var(--radius-input);
background: var(--surface-2);
color: var(--text);
font-size: 14px;
text-align: left;
cursor: pointer;
}
.uninstall-choice:has(input:checked) {
border-color: var(--m3-outline-variant);
background: rgba(255, 255, 255, .08);
color: var(--gold-text);
}
.uninstall-choice:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.uninstall-choice input { width: 18px; height: 18px; flex: none; margin: 0; border: 1.5px solid var(--muted-2); border-radius: 50%; background: transparent; appearance: none; -webkit-appearance: none; }
.uninstall-choice input:checked { border: 5px solid var(--gold); }
.uninstall-form:not(:has(input:checked)) .button { background: var(--m3-surface-container-highest) !important; color: var(--m3-on-surface-variant) !important; box-shadow: none !important; }
.uninstall-skip { text-align: center; }
.uninstall-error { margin: 0 0 12px; color: var(--red); font-size: 13px; font-weight: 700; }
.uninstall-thanks p { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; }
.uninstall-skip { margin: 16px 0 0; }
@media (max-width: 420px) { .uninstall-card { padding: 24px 16px; } }
.uninstall-skip a {
color: var(--muted);
font-size: 13px;
text-decoration: underline;
text-decoration-color: rgba(244, 239, 228, .3);
text-underline-offset: 3px;
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: 8px;
}
.uninstall-skip { margin-top: 6px; }
.uninstall-skip a:hover { color: var(--text); }
.uninstall-page { min-height: 0; }
.uninstall-skip a { display: inline-block; padding: 12px 8px; line-height: 20px; }
@media (max-width: 720px) {
.uninstall-page { padding-top: 16px; }
.uninstall-head { display: block; }
.uninstall-head img { display: none; }
}
@media (max-width: 560px) {
.uninstall-card { padding: 0; border: 0; border-radius: 0; background: none; }
}
.slarp-prices-layout {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
gap: clamp(18px, 2.4vw, 28px);
align-items: start;
text-align: left;
}
.slarp-prices-main { display: grid; gap: 16px; min-width: 0; }
.slarp-prices-main .slarp-prices-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
.slarp-prices-layout .slarp-prices-summary { position: sticky; top: 96px; }
.slarp-prices-summary-title {
margin: 0;
font: 800 16px/1.1 var(--display);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.slarp-prices-summary-method {
display: grid;
gap: 8px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.slarp-prices-summary-method[hidden] { display: none; }
.slarp-prices-summary-label { color: var(--play-muted); font-size: 13px; }
.slarp-prices[data-state="ready"] .slarp-prices-status,
.slarp-prices[data-state="loading"] .slarp-prices-status {
position: absolute;
width: 1px;
height: 1px;
min-height: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (max-width: 1199px) {
.slarp-prices-layout { grid-template-columns: 1fr; }
.slarp-prices-layout .slarp-prices-summary { position: static; }
}
.slarp-prices:is([data-state="error"], [data-catalog-empty]) :is(.slarp-prices-terms, .slarp-prices-team, .slarp-prices-summary, .slarp-prices-switch) {
display: none !important;
}
.slarp-prices:is([data-state="error"], [data-catalog-empty]) .slarp-prices-layout { grid-template-columns: minmax(0, 1fr); }
.slarp-prices:is([data-state="error"], [data-catalog-empty]) .slarp-prices-status {
position: absolute;
width: 1px;
height: 1px;
min-height: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.slarp-prices .state-block { margin: 0; }
.checkout-empty.state-block {
display: grid;
justify-items: stretch;
gap: 0;
margin: var(--space-5, 20px) 0 0;
padding: 0;
border: 1px solid var(--line, rgba(255, 255, 255, .1));
border-radius: 16px;
background: rgba(255, 255, 255, .035);
text-align: center;
}
.checkout-empty.state-block[hidden] { display: none; }
.state-block .empty-state { gap: 8px; padding: clamp(22px, 4vw, 32px) 20px; }
.state-block .empty-state h2 {
max-width: none;
margin: 0;
font-size: clamp(18px, 2.2vw, 22px);
line-height: 1.2;
text-transform: none;
text-wrap: balance;
}
.state-block .empty-state p { max-width: 46ch; font-size: 13.5px; text-wrap: pretty; }
.state-block .empty-state .button { min-width: min(100%, 220px); margin-top: 8px; }
.home-order-card .checkout-empty.state-block,
.package-grid > .checkout-empty.state-block {
grid-column: 1 / -1;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.home-order-card .state-block .empty-state { padding: 18px 8px; }
:is(.state-block, .checkout-gate) p a:not(.button) {
padding-block: 14px;
color: var(--gold-text, #e9c87c);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
:is(.state-block, .checkout-gate) p a:not(.button):hover { color: var(--text, #f4efe4); }
@media (max-width: 780px) {
.slarp-prices-main .slarp-prices-terms { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
.slarp-prices-term-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.slarp-prices-incl { display: none; }
@media (min-width: 1200px) {
.slarp-prices-hero { --sh-hero-lead-size: 16px; }
.slarp-prices-hero.sh-hero--slim { margin-bottom: 0; }
.slarp-prices-switch { grid-auto-columns: 112px; gap: 4px; padding: 4px; border-radius: 14px; }
.slarp-prices-switch-opt { min-height: 44px; padding: 0 16px; font: 700 16px/1 var(--body); letter-spacing: 0; text-transform: none; }
.slarp-prices-access { font-size: 13px; }
.slarp-prices-step { gap: var(--sec-gap, 48px); }
.slarp-prices-layout { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; }
.slarp-prices-main { gap: 16px; }
.slarp-prices-main .slarp-prices-terms { gap: 16px; }
.slarp-prices-term {
min-height: 196px;
grid-template-rows: auto 1fr;
gap: 0;
padding: 22px 20px 20px;
border-radius: 18px;
}
.slarp-prices-term-head { flex-wrap: wrap; row-gap: 6px; }
.slarp-prices-term-head b { font-size: 16px; }
.slarp-prices-term-off { padding: 3px 7px; font-size: 13px; }
.slarp-prices-term-price { align-self: end; grid-template-rows: auto 20px; gap: 8px; }
.slarp-prices-term-price b { font-size: 32px; white-space: nowrap; }
.slarp-prices-term-price b small { margin-left: 4px; font-size: 16px; }
.slarp-prices-term-total { font-size: 13px; line-height: 20px; }
.slarp-prices-term:is(.is-on, :has(input:checked))::after { right: 22px; bottom: 25px; }
.slarp-prices[data-state="loading"] .slarp-prices-term-price::before { width: 104px; height: 32px; }
.slarp-prices-team.slarp-play-team { width: auto; min-height: 48px; margin: 0; padding: 0; justify-content: flex-start; gap: 24px; border: 0; background: none; }
.slarp-prices-team .slarp-play-team-label b { font-size: 16px; font-weight: 600; }
.slarp-prices-team .slarp-play-team-label span { font-size: 13px; }
.slarp-prices-team .slarp-play-stepper output { font-size: 16px; }
.slarp-prices-incl {
display: grid;
gap: 16px;
margin-top: calc(var(--sec-gap, 48px) - 16px);
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.slarp-prices-incl-label { margin: 0; color: var(--play-muted, #b3aa98); font: 600 13px/1.3 var(--body); }
.slarp-prices-incl-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.slarp-prices-incl-list li { display: grid; align-content: start; gap: 4px; min-width: 0; }
.slarp-prices-incl-list b { color: var(--play-ink, #f4efe4); font: 600 16px/1.35 var(--body); }
.slarp-prices-incl-list span { color: var(--play-muted, #b3aa98); font-size: 13px; line-height: 1.45; }
.slarp-prices-incl-list a { color: var(--play-ink, #f4efe4); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.slarp-prices-incl-list a:hover { text-decoration-color: currentColor; }
.slarp-prices-summary .slarp-prices-perks-line { display: none; }
.slarp-prices:is([data-state="error"], [data-catalog-empty]) .slarp-prices-incl { display: none; }
.slarp-prices-layout:has([data-play-pay-error]:not([hidden])) .slarp-prices-incl-list li:last-child span { visibility: hidden; }
.slarp-prices-summary { gap: 16px; }
.slarp-prices-summary-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.slarp-prices-summary-card { gap: 12px; padding: 22px 24px 20px; border-radius: 18px; }
.slarp-prices-summary-plan,
.slarp-prices-summary-pay { font-size: 16px; }
.slarp-prices-summary-pay b { font-size: 32px; line-height: 36px; }
.slarp-prices-summary .button { min-height: 56px; font-size: 16px; }
.slarp-prices-summary :is(.slarp-prices-oneoff, .slarp-prices-renewal, .slarp-prices-method, .slarp-prices-guest, .slarp-play-legal, .slarp-prices-alert-text, .slarp-prices-alert-line) { font-size: 13px; }
.slarp-prices-renewal { text-wrap: balance; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
.slarp-prices-term-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.slarp-prices-term-price b { font-size: 26px; }
.slarp-prices-summary-pay b { font-size: 26px; }
.slarp-prices-incl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1366px) {
.slarp-prices-layout { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; }
.slarp-prices-term { padding-inline: 24px; }
.slarp-prices-term:is(.is-on, :has(input:checked))::after { right: 26px; }
}
@media (min-width: 781px) {
.slarp-prices-main .slarp-prices-summary-method { gap: 10px; padding-top: 0; border-top: 0; }
.slarp-prices-main .slarp-prices-summary-label { color: var(--play-muted, #b3aa98); font: 600 13px/1.3 var(--body); }
.slarp-prices-main .slarp-prices-pay { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.slarp-prices-main .slarp-prices-pay-row {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 1fr auto;
gap: 12px;
align-items: start;
min-height: 0;
padding: 16px;
border-radius: 16px;
background: var(--fill-rest, rgba(255, 255, 255, .035));
}
.slarp-prices-main .slarp-prices-pay-label { align-content: start; gap: 2px; }
.slarp-prices-main .slarp-prices-pay-label b { font-size: 16px; line-height: 1.35; }
.slarp-prices-main .slarp-prices-pay-label small { font-size: 13px; line-height: 1.4; }
.slarp-prices-main .slarp-prices-pay-marks { justify-content: flex-start; max-width: none; padding-right: 28px; }
.slarp-prices-main .slarp-prices-pay-row:is(.is-on, :has(input:checked))::after {
content: "";
position: absolute;
right: 20px;
bottom: 20px;
width: 5px;
height: 10px;
border-right: 2px solid var(--play-gold, #e9c87c);
border-bottom: 2px solid var(--play-gold, #e9c87c);
transform: rotate(40deg);
pointer-events: none;
}
}
@media (min-width: 1200px) {
.slarp-prices-main .slarp-prices-summary-method { gap: 12px; margin-top: 8px; }
.slarp-prices-main .slarp-prices-pay { gap: 16px; }
.slarp-prices-main .slarp-prices-pay-row { padding: 22px 20px 20px; border-radius: 18px; }
.slarp-prices-main .slarp-prices-pay-row:is(.is-on, :has(input:checked))::after { right: 22px; bottom: 25px; }
}
@media (min-width: 1366px) {
.slarp-prices-main .slarp-prices-pay-row { padding-inline: 24px; }
.slarp-prices-main .slarp-prices-pay-row:is(.is-on, :has(input:checked))::after { right: 26px; }
}
.slarp-prices-faq { display: none; }
@media (min-width: 1200px) {
.slarp-prices[data-state="ready"] .slarp-prices-main:has([data-play-methods][hidden]) .slarp-prices-faq { display: grid; gap: 4px; margin-top: 8px; }
.slarp-prices-faq .slarp-prices-faq-label { margin: 0; }
.slarp-prices-faq .slarp-play-faq-list { max-width: none; margin-top: 0; }
.slarp-prices-faq .slarp-play-faq-item > summary { min-height: 48px; padding: 12px 40px 12px 0; font-size: 15px; }
.slarp-prices-faq .slarp-play-faq-item > p { font-size: 13px; line-height: 1.5; }
.slarp-prices-faq .slarp-play-faq-item > p a { color: var(--play-ink, #f4efe4); text-decoration: underline; text-decoration-color: rgba(244, 239, 228, .35); text-underline-offset: 3px; }
}
.slarp-prices:is([data-state="error"], [data-catalog-empty]) :is(.slarp-prices-summary-method, .slarp-prices-faq) { display: none !important; }
.slarp-prices-pay-chip.is-sbp { width: 32px; height: 32px; }
.slarp-prices-pay-chip.is-sbp img { width: 20px; height: 20px; }
.slarp-prices-pay-chip.is-mir { width: 44px; height: 32px; padding: 0; }
.slarp-prices-pay-chip.is-mir img { width: 30px; height: 18px; }
.slarp-prices-pay-chip.is-coin { width: 32px; height: 32px; padding: 0; }
.slarp-prices-pay-chip.is-coin img { width: 22px; height: 22px; max-height: none; }
.slarp-prices-pay-chip.is-star { width: 32px; height: 32px; padding: 0; }
.slarp-prices-pay-chip.is-star img { width: 22px; height: 22px; max-height: none; }
.slarp-stars-mark { display: inline-block; width: .82em; height: .82em; margin-left: .18em; vertical-align: -.06em; }
.slarp-prices-pay-row[hidden] { display: none; }
.slarp-prices-pay { display: grid; gap: 8px; }
:where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
.nobr { white-space: nowrap; }
.slarp-game-crumbs { margin: 0 0 8px; font-size: 13px; color: var(--play-muted); }
.slarp-game-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; list-style: none; }
.slarp-game-crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.slarp-game-crumbs li + li::before { content: "›"; margin-right: 6px; }
.slarp-game-crumbs a { text-decoration: underline; text-decoration-color: var(--play-line); text-underline-offset: 3px; }
.slarp-game-crumbs [aria-current] { color: var(--play-ink); }
.sh-hero.sh-hero--slim.slarp-game-hero { --sh-art-box: 96px; }
.sh-hero.sh-hero--slim.slarp-game-hero .sh-hero-art { height: calc(var(--sh-art-box) * 1.5); }
.sh-hero.sh-hero--slim.slarp-game-hero .sh-hero-art img,
.sh-hero.sh-hero--slim.slarp-game-hero .sh-hero-art .slarp-game-tile {
position: static; width: 100%; height: 100%; transform: none; object-fit: cover;
border: 1px solid var(--play-line); border-radius: 12px; background: var(--surface-sunken, #0e0f11);
filter: none; box-shadow: 0 12px 24px rgba(0, 0, 0, .4); }
.sh-hero.sh-hero--slim:is(.slarp-game-hero, .slarp-games-hero) .sh-hero-actions {
display: grid; grid-template-columns: repeat(2, auto); justify-content: start; align-items: center; gap: 8px 12px; }
.sh-hero.sh-hero--slim.slarp-games-hero .sh-hero-actions { grid-template-columns: auto; justify-items: start; }
.slarp-play:is(.slarp-game, .slarp-games) .slarp-play-section h2 { max-width: 30ch; }
.slarp-game-tile { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 1px solid var(--play-line);
border-radius: 12px; background: linear-gradient(160deg, var(--play-mat-2), var(--play-mat)); color: var(--play-ink);
font: 800 40px/1 var(--display); text-align: center; text-transform: uppercase; letter-spacing: -.02em;
user-select: none; overflow: hidden; }
.slarp-game-offer { grid-column: 1 / -1; margin: 0; color: var(--play-muted); font-size: 14px; line-height: 1.45; }
.slarp-game-offer a { text-decoration: underline; text-decoration-color: var(--play-line); text-underline-offset: 3px;
white-space: nowrap; }
.slarp-game-end .slarp-game-offer { flex-basis: 100%; }
.slarp-game-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px;
margin: 0 0 var(--sec-gap, 48px); padding: 14px 0; border-block: 1px solid var(--play-line); }
.slarp-game-facts dt { color: var(--play-muted); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.slarp-game-facts dd { margin: 2px 0 0; color: var(--play-ink); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.slarp-game-prose { max-width: 68ch; margin: 12px 0 0; color: var(--m3-on-surface, #e7e2da); font-size: 16px; line-height: 1.6; }
.slarp-game-note { max-width: 68ch; margin: 8px 0 0; color: var(--play-muted); font-size: 14px; line-height: 1.5; }
.slarp-game-ref { margin-left: 2px; font-size: 11px; line-height: 0; vertical-align: super; }
.slarp-game-ref a { color: var(--play-muted); text-decoration: none; }
.slarp-game-ref a:hover, .slarp-game-ref a:focus-visible { color: var(--play-ink); }
.slarp-game-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; margin-top: 20px; }
.slarp-game-split h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.slarp-game-split .slarp-play-features { gap: 10px; }
.slarp-game-split .slarp-play-features p { color: var(--m3-on-surface, #e7e2da); font-size: 15px; line-height: 1.45; }
.slarp-game-no .slarp-play-feature-icon { color: var(--play-muted); }
.slarp-game-howto { margin: 12px 0 0; padding-left: 1.4em; max-width: 68ch; color: var(--m3-on-surface, #e7e2da); line-height: 1.6; }
.slarp-game-howto li + li { margin-top: 6px; }
.slarp-game-path { padding: 1px 8px; border-radius: 8px; background: var(--play-mat-2); color: var(--play-ink); font-size: 14px;
white-space: nowrap; }
.slarp-game-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.slarp-game-chips li { padding: 6px 12px; border: 1px solid var(--play-line); border-radius: 999px; font-size: 14px; }
.slarp-game-lag { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 40px; margin-top: 16px; }
.slarp-game-lag h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.slarp-game-lag p { margin: 0; color: var(--m3-on-surface, #e7e2da); font-size: 15px; line-height: 1.55; }
.slarp-game-related { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.slarp-game-related a, .slarp-games-tile { display: grid; gap: 8px; min-width: 0; color: var(--play-ink); }
.slarp-game-related img, .slarp-games-tile img,
.slarp-game-related .slarp-game-tile, .slarp-games-tile .slarp-game-tile { width: 100%; height: auto; aspect-ratio: 2 / 3;
object-fit: cover; border: 1px solid var(--play-line); border-radius: 14px; background: var(--surface-sunken, #0e0f11); }
.slarp-game-related b, .slarp-games-tile b { font-size: 14px; font-weight: 700; line-height: 1.25; }
.slarp-games-tile span { color: var(--play-muted); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.slarp-game-related .slarp-game-tile, .slarp-games-tile .slarp-game-tile { font-size: 48px; }
.slarp-game-sources { font-size: 13px; color: var(--play-muted); }
.slarp-game-sources h2 { font-size: 16px; }
.slarp-game-sources ol { margin: 8px 0 0; padding-left: 1.4em; line-height: 1.55; }
.slarp-game-sources p { margin: 8px 0 0; max-width: 90ch; }
.slarp-game-sources a { color: var(--play-ink); text-decoration: underline; text-decoration-color: var(--play-line); overflow-wrap: anywhere; }
.slarp-game-more { margin-top: 12px; }
:is(.slarp-game-crumbs, .slarp-game-related, .slarp-games-grid, .slarp-game-sources, .slarp-game-ref) a:focus-visible {
outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
.slarp-games-search { position: relative; max-width: 480px; margin: 16px 0 12px; }
.slarp-games-search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--play-line);
border-radius: var(--radius-input, 14px); background: var(--play-mat); color: var(--play-ink); }
.slarp-games-search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--play-muted); }
.slarp-games-count { margin: 12px 0; color: var(--play-muted); font-size: 14px; }
.slarp-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 20px; margin: 0; padding: 0; list-style: none; }
.slarp-games-grid li { min-width: 0; }
.slarp-games-empty { margin: 12px 0 0; color: var(--play-muted); font-size: 15px; }
.slarp-games-empty a { color: var(--play-ink); text-decoration: underline; text-decoration-color: var(--play-line); }
.slarp-games-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; margin: 16px 0 0; }
.slarp-games-terms dt { font-weight: 700; color: var(--play-ink); }
.slarp-games-terms dd { margin: 4px 0 0; color: var(--m3-on-surface, #e7e2da); font-size: 15px; line-height: 1.55; }
.slarp-games-causes { max-width: 68ch; margin: 12px 0 0; padding-left: 1.2em; color: var(--m3-on-surface, #e7e2da); line-height: 1.6; }
.slarp-games-causes li + li { margin-top: 6px; }
@media (max-width: 900px) {
.slarp-game-split, .slarp-games-terms { grid-template-columns: 1fr; }
.slarp-game-related { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slarp-game-related::-webkit-scrollbar { display: none; }
.slarp-game-related li { flex: 0 0 120px; scroll-snap-align: start; }
.slarp-game-related .slarp-game-tile { font-size: 36px; }
}
@media (max-width: 780px) {
.sh-hero.sh-hero--slim:is(.slarp-game-hero, .slarp-games-hero) { grid-template-areas: "copy art" "actions actions"; row-gap: 12px; }
.sh-hero.sh-hero--slim.slarp-game-hero { --sh-art-box: 56px; }
.sh-hero.sh-hero--slim.slarp-game-hero .sh-hero-art .slarp-game-tile { font-size: 26px; }
.sh-hero.sh-hero--slim:is(.slarp-game-hero, .slarp-games-hero) .sh-hero-title { font-size: 24px; line-height: 1.05; }
.sh-hero.sh-hero--slim:is(.slarp-game-hero, .slarp-games-hero) .sh-hero-lead { font-size: 14px; line-height: 1.45; }
.sh-hero.sh-hero--slim:is(.slarp-game-hero, .slarp-games-hero) .sh-hero-actions { grid-template-columns: 1fr; justify-items: stretch; }
.slarp-game-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slarp-games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.slarp-games-tile b { font-size: 13px; }
.slarp-game-offer { text-align: center; }
}
.slarp-guide-meta { margin: 8px 0 0; color: var(--play-muted); font-size: 13px; }
.slarp-guide-toc { max-width: 68ch; margin: 16px 0 0; padding: 14px 18px; border: 1px solid var(--play-line); border-radius: 14px; }
.slarp-guide-toc ol { margin: 0; padding-left: 1.3em; font-size: 14px; line-height: 1.6; }
.slarp-guide-toc a, .slarp-guide-links a, .slarp-guides-list a { color: var(--play-ink); text-decoration: underline;
text-decoration-color: var(--play-line); text-underline-offset: 3px; }
.slarp-guide-h3 { max-width: 68ch; margin: 18px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.slarp-guide-section .slarp-games-causes li + li { margin-top: 8px; }
.slarp-guide-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slarp-guide-code { max-width: 68ch; margin: 10px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--play-mat-2);
color: var(--play-ink); font-size: 14px; line-height: 1.5; overflow-x: auto; }
.slarp-guide-code code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.slarp-guide-box { padding: 20px 22px; border: 1px solid var(--play-line); border-radius: 18px; background: var(--play-mat-2); }
.slarp-guides-grid, .slarp-guides-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 0;
padding: 0; list-style: none; }
.slarp-guides-grid li, .slarp-guides-list li { min-width: 0; }
.slarp-guides-card, .slarp-guides-list li { display: grid; gap: 6px; height: 100%; padding: 16px 18px; border: 1px solid var(--play-line);
border-radius: 14px; color: var(--play-ink); box-sizing: border-box; }
.slarp-guides-card b, .slarp-guides-list a { font-size: 16px; font-weight: 700; line-height: 1.3; }
.slarp-guides-card span, .slarp-guides-list span { color: var(--play-muted); font-size: 14px; line-height: 1.45; }
.slarp-guides-card:hover b, .slarp-guides-card:focus-visible b { text-decoration: underline; text-decoration-color: var(--play-line);
text-underline-offset: 3px; }
.slarp-guides-card:focus-visible { outline: 2px solid var(--play-ink); outline-offset: 2px; }
@media (max-width: 780px) {
.slarp-guides-grid, .slarp-guides-list, .slarp-guide-terms { grid-template-columns: 1fr; }
}
:root { --dock-top: 16px; }
@media (min-width: 1024px) {
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch,
:is(.store-page, .games-page, .services-page, .telegram-page) .service-launchpad.product-switch { gap: 12px !important; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch .launch-service,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch .launch-all-services {
min-height: 84px !important;
grid-template-columns: 64px minmax(0, 1fr) !important;
gap: 16px !important;
padding: 10px 18px !important;
border-radius: 16px !important;
}
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d { width: 64px !important; height: 64px !important; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d .store-tile-poster,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d .store-3d-loop { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)) !important; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-copy b { font-size: 15px !important; letter-spacing: 0.04em !important; }
}
@media (max-width: 780px) {
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile,
:is(.store-page, .games-page, .services-page, .telegram-page) .store-switch .launch-service { min-height: 70px !important; grid-template-rows: 34px auto !important; }
:is(.store-page, .games-page, .services-page, .telegram-page) .store-tile-3d { width: 34px !important; height: 34px !important; }
}
@media (max-width: 1023px) {
.services-page :is(.catalog-tools, .catalog-category-tabs, .catalog-result) { display: none !important; }
}
@media (max-width: 1099px) {
.telegram-page .home-showcase { display: none !important; }
.store-page .home-showcase-copy .catalog-card-price { display: none !important; }
.store-page .home-showcase-grid > .home-showcase-card:nth-child(n + 7) { display: none !important; }
}
.services-page .catalog-tools { grid-template-columns: minmax(0, 1fr) !important; }
.services-page .catalog-category-tabs { margin-block: 0 !important; }
@media (min-width: 781px) { .services-page .catalog-category-tabs { margin-inline: 0 !important; } }
@media (min-width: 1024px) and (max-width: 1099px) {
.services-page .store-rail { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) !important; column-gap: 16px !important; }
.services-page .store-rail > * { grid-column: 1 / -1; }
.services-page .store-rail > .catalog-tools { grid-column: 1; }
.services-page .store-rail > .catalog-category-tabs { grid-column: 2; align-self: center; }
}
.services-page .catalog-loading-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px 14px; }
.services-page .catalog-loading-grid i { border-radius: 18px; }
.services-page .game-logo-card.active,
.services-page .game-logo-card[aria-pressed="true"],
.services-page .game-logo-card.active:hover,
.services-page .game-logo-card[aria-pressed="true"]:hover {
background: transparent !important;
border-color: transparent !important;
transform: none !important;
box-shadow: none !important;
}
.services-page .game-logo-card.active h3 { color: var(--m3-primary) !important; }
@media (min-width: 1100px) {
:is(.games-page, .services-page) .store-rail {
grid-template-columns: 400px minmax(0, 1fr) !important;
column-gap: 24px !important;
align-items: start !important;
}
:is(.games-page, .services-page) .store-rail > * { grid-column: 1 / -1; }
:is(.games-page, .services-page) .store-rail > .catalog-tools { grid-column: 2; max-width: 420px; }
:is(.games-page, .services-page) .store-rail > .catalog-category-tabs { grid-column: 2; align-self: start; margin-top: -2px !important; }
:is(.games-page, .services-page) .store-rail > :is(.game-checkout-panel, .voucher-layout) { grid-column: 1; grid-row: 3 / span 4; align-self: start; }
:is(.games-page, .services-page) .store-rail > :is(.catalog-grid, .catalog-loading, .catalog-result) { grid-column: 2; }
html.catalog-sheet-open, html.catalog-sheet-open body { overflow: auto !important; }
.services-page .voucher-layout,
.games-page .game-checkout-panel {
position: sticky !important; inset: auto !important; top: 16px !important; z-index: auto !important;
width: 100% !important; height: auto !important; min-height: 0 !important;
display: block !important; place-items: initial !important; place-content: initial !important;
margin: 0 !important; padding: 0 !important; border: 0 !important;
background: none !important; box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.games-page .game-configurator.is-compact,
.services-page .voucher-main {
width: 100% !important; max-width: none !important;
max-height: calc(100dvh - var(--dock-top, 16px) - 16px) !important;
border: 1px solid var(--line) !important;
border-radius: 20px !important;
background: var(--m3-surface-container, var(--surface)) !important;
box-shadow: none !important;
}
.services-page .voucher-main { padding: 0 22px !important; }
.games-page .game-checkout-heading,
.services-page .voucher-flow-head {
position: sticky; top: 0; z-index: 4;
min-height: 60px !important; display: flex !important; align-items: center !important; gap: 12px !important;
margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--line) !important;
background: var(--m3-surface-container, var(--surface)) !important;
}
.services-page .voucher-flow-head > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.services-page .voucher-flow-head img,
.games-page .game-checkout-badge { width: 40px !important; height: 40px !important; border-radius: 10px !important; padding: 0 !important; background: var(--surface-2) !important; }
.services-page .voucher-flow-head b { font-family: var(--body); font-size: 18px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.services-page .voucher-sheet-close,
.games-page .game-checkout-heading .icon-button { display: none !important; }
.games-page .configurator-footer,
.services-page .voucher-footer {
position: sticky; bottom: 0; z-index: 4;
display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
margin: 8px -22px 0 !important; padding: 12px 22px !important; border-top: 1px solid var(--line) !important;
background: color-mix(in srgb, var(--m3-surface-container, var(--surface)) 94%, transparent) !important;
}
.games-page .configurator-footer > div, .services-page .voucher-footer > div { flex: 0 0 auto; }
.games-page .configurator-footer span, .services-page .voucher-footer span { display: block; color: var(--m3-on-surface-variant); font-size: 12px; }
.games-page .configurator-footer b, .services-page .voucher-footer b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.games-page .configurator-footer .button, .services-page .voucher-footer .button { min-width: 0 !important; flex: 1 1 auto !important; min-height: 48px !important; }
.store-page .voucher-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.store-page .product-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.services-page .voucher-layout[hidden],
.games-page .game-checkout-panel[hidden] { display: none !important; }
}
@media (min-width: 1100px) {
.store-page .store-home-rail .home-showcase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px 14px !important; }
.store-page .store-home-rail .home-showcase { gap: 12px !important; }
.store-page .store-home-rail .home-showcase-card {
min-height: 0 !important; padding: 4px 4px 6px !important;
grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important;
justify-items: center !important; align-content: start !important; row-gap: 4px !important; gap: 4px !important;
background: transparent !important; border: 0 !important; border-radius: 14px !important; text-align: center !important;
}
.store-page .store-home-rail .home-showcase-art,
.store-page .store-home-rail .home-showcase-card.service .home-showcase-art {
width: 100% !important; height: auto !important; aspect-ratio: 1 !important; border-radius: 18px !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important; overflow: hidden !important; background: var(--surface-2) !important;
}
.store-page .store-home-rail .home-showcase-art img,
.store-page .store-home-rail .home-showcase-card.service .home-showcase-art img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.store-page .store-home-rail .home-showcase-copy { justify-items: center !important; gap: 2px !important; }
.store-page .store-home-rail .home-showcase-copy b { font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: center !important; }
.store-page .store-home-rail .home-showcase-copy .catalog-card-price { display: block; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--m3-on-surface-variant) !important; }
.store-page .store-home-rail .home-showcase-copy .catalog-card-price:empty { display: none; }
.store-page .store-home-rail .home-showcase-head h2 { font-size: 20px !important; }
.store-page .store-home-rail .home-showcase-card[data-showcase-service="playstation"] { order: 1; }
.store-page .store-home-rail .home-showcase-card[data-showcase-service="app-store"] { order: 2; }
.store-page .store-home-rail .home-showcase-card[data-showcase-service="google-play"] { order: 3; }
.store-page .store-home-rail .home-showcase-card[data-showcase-service="xbox-game-pass"] { order: 4; }
.store-page .store-home-rail .home-showcase-card[data-showcase-game="Roblox"] { order: 5; }
.store-page .store-home-rail .home-showcase-card[data-showcase-game="Valorant"] { order: 6; }
.store-page .store-home-rail .home-showcase-card[data-showcase-game="Free Fire"] { order: 7; }
.store-page .store-home-rail .home-showcase-card[data-showcase-game="PUBG Mobile"] { order: 8; }
}