/* CODISH storefront — mobile-first. Breakpoints: phone <600, tablet 600–1023, desktop ≥1024, wide ≥1280. */
:root {
  color-scheme: light;
  --bg: #f3f5fa; --surface: #fff; --surface-2: #eef1f7; --surface-3: #e3e8f1;
  --text: #0f1830; --muted: #556079; --faint: #8a93a8;
  --line: #e1e6ef; --line-strong: #cbd3e1;
  --brand: #2453f5; --brand-hover: #1a43dc; --brand-text: #1f48e0; --brand-soft: #eaf0ff; --brand-line: #c5d4ff; --on-brand: #fff;
  --ok: #0d7550; --ok-soft: #e1f5eb; --warn: #8a5300; --warn-soft: #fff2d6; --danger: #b42342; --danger-soft: #fdecef;
  --star: #f5a30b;
  --hero-a: #1834c4; --hero-b: #2a5cff; --hero-glow: rgba(150, 220, 255, .55);
  --nav-bg: rgba(255, 255, 255, .94); --backdrop: rgba(10, 16, 35, .5);
  --shadow-sm: 0 1px 2px rgba(16, 30, 70, .05), 0 3px 10px rgba(16, 30, 70, .05);
  --shadow-md: 0 12px 32px rgba(16, 30, 70, .13);
  --shadow-lg: 0 24px 70px rgba(10, 20, 50, .24);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
  --gutter: 16px;
  --safe-top: 0px; --safe-bottom: 0px;
  font-family: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-synthesis: none; font-weight: 500; color: var(--text); background: var(--bg);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f1d; --surface: #131a2c; --surface-2: #1a2237; --surface-3: #242d46;
  --text: #ebf0fa; --muted: #9ca8c0; --faint: #6f7a93;
  --line: #222b42; --line-strong: #34405e;
  --brand: #2f5bff; --brand-hover: #4570ff; --brand-text: #93acff; --brand-soft: #18224a; --brand-line: #2c3f86; --on-brand: #fff;
  --ok: #62d9a3; --ok-soft: #10291f; --warn: #ffc163; --warn-soft: #33250f; --danger: #ff8da1; --danger-soft: #3a1822;
  --star: #f7b52a;
  --hero-a: #10206a; --hero-b: #2148e0; --hero-glow: rgba(110, 190, 255, .42);
  --nav-bg: rgba(19, 26, 44, .94); --backdrop: rgba(0, 0, 0, .62);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 12px 32px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0f1d; --surface: #131a2c; --surface-2: #1a2237; --surface-3: #242d46;
    --text: #ebf0fa; --muted: #9ca8c0; --faint: #6f7a93;
    --line: #222b42; --line-strong: #34405e;
    --brand: #2f5bff; --brand-hover: #4570ff; --brand-text: #93acff; --brand-soft: #18224a; --brand-line: #2c3f86; --on-brand: #fff;
    --ok: #62d9a3; --ok-soft: #10291f; --warn: #ffc163; --warn-soft: #33250f; --danger: #ff8da1; --danger-soft: #3a1822;
    --star: #f7b52a;
    --hero-a: #10206a; --hero-b: #2148e0; --hero-glow: rgba(110, 190, 255, .42);
    --nav-bg: rgba(19, 26, 44, .94); --backdrop: rgba(0, 0, 0, .62);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 12px 32px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
  }
}

/* Base */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); line-height: 1.5 }
button, input, select { font: inherit; color: inherit }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent }
button { border: 0; background: none; cursor: pointer; padding: 0 }
button:disabled { opacity: .5; cursor: not-allowed }
a { color: inherit; text-decoration: none }
:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 2px }
h1, h2, h3, p { margin: 0 }
svg { width: 20px; height: 20px; display: block; flex-shrink: 0 }
img { display: block; max-width: 100% }
[hidden] { display: none !important }
.muted { color: var(--muted) }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip-link { position: fixed; top: -80px; left: 8px; z-index: 100; padding: 12px 16px; border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); font-weight: 700 }
.skip-link:focus { top: 8px }

/* Shell */
.app-shell { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: calc(60px + var(--safe-top)); padding-top: var(--safe-top) }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; border-radius: var(--r-sm) }
.brand-mark { width: 32px; height: 32px; border-radius: 9px }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: .02em; line-height: 1 }
.desktop-nav { display: none }
.topbar-actions { display: flex; align-items: center; gap: 8px }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 13px; font-weight: 700 }
.demo-pill svg { width: 16px; height: 16px; color: var(--brand-text) }
.demo-pill span { display: contents }
.demo-pill:hover { color: var(--text) }
.icon-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); flex-shrink: 0 }
.icon-button:hover { color: var(--brand-text) }
#cart-count { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 2px solid var(--bg); background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 800; line-height: 1 }
.cart-toggle.bump { animation: bump .35s ease }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-size: 16px; font-weight: 800 }
.top-avatar.active { box-shadow: inset 0 0 0 2px var(--brand) }
.top-avatar { display: none }
main { padding-bottom: calc(92px + var(--safe-bottom)) }
main:focus { outline: none }
.section-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25 }

/* Hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(108px, 33vw, 170px); align-items: center; gap: 4px; margin: 2px 0 20px; padding: 16px 6px 16px 16px; border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(48% 70% at 84% 52%, var(--hero-glow), transparent 72%), linear-gradient(128deg, var(--hero-a) 0%, var(--hero-b) 100%) }
.hero h1 { font-size: 23px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance }
.hero-lead { display: none }
.hero-facts { display: grid; gap: 5px; margin: 10px 0 14px; padding: 0; list-style: none; font-size: 13px; font-weight: 650; line-height: 1.3; color: rgba(255, 255, 255, .92) }
.hero-facts li { display: flex; align-items: center; gap: 8px }
.hero-facts svg { width: 16px; height: 16px; color: #ffd45c }
.hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; background: #fff; color: #1636c8; font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px rgba(5, 15, 70, .25); transition: transform .15s }
.hero-cta svg { width: 18px; height: 18px }
.hero-cta:hover { transform: translateY(-1px) }
.hero-cta:active { transform: scale(.98) }
.hero-cta:focus-visible { outline-color: #fff }
.hero-art { width: calc(100% + 14px); max-width: none; height: auto; margin: 0 0 0 -14px; filter: drop-shadow(0 12px 18px rgba(5, 15, 70, .35)) }

/* Games */
.games-section { margin-bottom: 20px; scroll-margin-top: 12px }
.games-section .section-title { margin-bottom: 10px }
.games-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.game-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 4px 9px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; transition: box-shadow .15s, background .15s, transform .15s }
.game-card img { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0 }
.game-text { display: block; min-width: 0 }
.game-card strong { display: block; font-size: 12px; font-weight: 750; line-height: 1.25 }
.game-card small { display: none }
.game-card:hover { box-shadow: inset 0 0 0 1px var(--brand-line) }
.game-card:active { transform: scale(.98) }
.game-card.active { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand) }
.game-selected { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: var(--on-brand) }
.game-selected svg { width: 11px; height: 11px; stroke-width: 3 }

/* Catalog bar */
.catalog { scroll-margin-top: 12px }
.catalog-bar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "title title" "search search" "tabs sort"; align-items: center; gap: 10px }
#catalog-title { grid-area: title; display: flex; align-items: center; gap: 10px; min-width: 0 }
.catalog:not(.is-search) .catalog-bar { grid-template-areas: "search search" "tabs sort" }
.catalog:not(.is-search) #catalog-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
#catalog-title img { width: 30px; height: 30px; border-radius: 8px }
.title-count { font-size: 15px; font-weight: 700; color: var(--muted) }
.filter-tabs { grid-area: tabs; display: flex; gap: 2px; min-width: 0; padding: 3px; border-radius: 12px; background: var(--surface-2) }
.filter { flex: 1; min-height: 38px; padding: 6px 8px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap }
.filter.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16, 30, 70, .12) }
.filter:hover:not(.active) { color: var(--text) }
/* On phones the native select stays tappable but is drawn as an icon button. */
.sort-label { grid-area: sort; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text) }
.sort-label select { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; cursor: pointer }
.sort-label select option { background: var(--surface); color: var(--text) }
.sort-chevron { display: none }
.sort-label.sorted::after { content: ''; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand) }
.search-box { grid-area: search; position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted) }
.search-box svg { width: 18px; height: 18px }
.search-box input { flex: 1; width: 100%; min-width: 0; min-height: 42px; border: 0; background: transparent; color: var(--text); font-size: 16px; outline: none }
.search-box input::placeholder { color: var(--muted) }
.search-box input::-webkit-search-cancel-button { display: none }
.search-box:focus-within { box-shadow: inset 0 0 0 2px var(--brand) }
.search-clear { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--muted) }
.search-clear:hover { background: var(--surface-2); color: var(--text) }
.search-clear svg { width: 16px; height: 16px }
.catalog-note { display: flex; align-items: center; gap: 6px; margin: 12px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.4 }
.catalog-note svg { width: 15px; height: 15px; color: var(--brand-text) }
.catalog-note span { display: contents }

/* Product grid + cards */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; container-type: inline-size; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s }
/* The outline sits on an overlay above the banner, so the in-cart ring wraps the whole card. */
.product-card::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line) }
.product-card.in-cart::after { box-shadow: inset 0 0 0 2px var(--brand) }
.product-main { display: flex; flex-direction: column; flex: 1; width: 100%; text-align: left; border-radius: var(--r-lg) var(--r-lg) 0 0 }
.product-main:focus-visible { outline-offset: -3px }
.product-info { display: block; padding: 10px 12px 0 }
.product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere }
.product-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600 }
.product-buy { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 12px 12px }
@container (min-width: 280px) {
  .product-buy { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px }
}
.price { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums }
.price .star { width: .85em; height: .85em; color: var(--star) }
.add-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-size: 14px; font-weight: 750; white-space: nowrap; transition: background .15s, transform .15s }
.add-button svg { width: 18px; height: 18px; stroke-width: 2.2 }
.add-button:hover { background: var(--brand-hover) }
.add-button:active { transform: scale(.97) }
.product-card.in-cart .add-button { background: var(--brand-soft); color: var(--brand-text); box-shadow: inset 0 0 0 1.5px var(--brand-line) }
.add-button[data-qty]::after { content: attr(data-qty); position: absolute; top: -8px; right: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; border: 2px solid var(--surface); background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 800; line-height: 1 }

/* Product banners: game-coloured stage + the product art. Colours are fixed, so they read the same in both themes. */
[data-banner] { --c1: #4b78ff; --c2: #1c34a8; --glow: rgba(150, 200, 255, .6) }
[data-banner="brawl"] { --c1: #9a5cff; --c2: #4a1fb8; --glow: rgba(255, 196, 46, .78) }
[data-banner="clash-royale"] { --c1: #3c78ff; --c2: #13298a; --glow: rgba(255, 210, 90, .72) }
[data-banner="clash-clans"] { --c1: #f2862c; --c2: #9a330c; --glow: rgba(255, 216, 92, .78) }
[data-banner="hay-day"] { --c1: #58c25a; --c2: #1d7434; --glow: rgba(150, 225, 255, .8) }
.banner, .art-thumb { background: radial-gradient(60% 75% at 66% 46%, rgba(255, 255, 255, .26), transparent 70%), radial-gradient(85% 80% at 100% 0%, var(--glow), transparent 64%), linear-gradient(155deg, var(--c1) 0%, var(--c2) 100%) }
.banner { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; isolation: isolate }
.banner::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .13) 42%, transparent 52%), linear-gradient(to top, rgba(8, 12, 40, .32), transparent 46%) }
.banner-art { position: absolute; z-index: 1; top: 4%; right: 0; width: 84%; height: 92%; max-width: none; object-fit: contain; transition: transform .25s ease }
.banner-pass .banner-art { top: 6%; right: 4%; width: 92%; height: 90% }
.banner-game { position: absolute; z-index: 3; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 3px 8px rgba(0, 0, 0, .28) }
.banner-amount { position: absolute; z-index: 3; left: 8px; bottom: 8px; padding: 2px 8px 3px; border-radius: 10px; background: rgba(8, 12, 40, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .3) }
.banner-amount.is-long { font-size: 21px }
.product-card:hover .banner-art { transform: scale(1.04) }
.banner-large { aspect-ratio: 16 / 9; border-radius: var(--r-lg) }
.banner-large .banner-art { top: 5%; right: 6%; width: 70%; height: 90% }
.banner-large.banner-pass .banner-art { right: 12%; width: 76% }
.banner-large .banner-game { top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 10px }
.banner-large .banner-amount { left: 14px; bottom: 14px; padding: 3px 12px 5px; border-radius: 14px; font-size: 44px }
.art-thumb { position: relative; display: block; flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; overflow: hidden }
.art-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px }

/* Skeleton */
.skeleton-card { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden }
.skeleton-card span { display: block; margin: 0 12px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite }
.skeleton-card span:nth-child(1) { margin: 0; border-radius: 0; aspect-ratio: 4 / 3 }
.skeleton-card span:nth-child(2) { width: 60%; height: 14px }
.skeleton-card span:nth-child(3) { width: 40%; height: 12px }
.skeleton-card span:nth-child(4) { height: 42px }

/* How to buy */
.how { margin: 40px 0 32px }
.how .section-title { margin-bottom: 12px }
.how-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none }
.how-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line) }
.how-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); flex-shrink: 0 }
.how-steps strong { display: block; font-size: 15px; font-weight: 750 }
.how-steps p { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.5 }

/* Footer */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 20px 0 8px; border-top: 1px solid var(--line) }
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: .02em }
.footer-brand img { width: 26px; height: 26px; border-radius: 7px }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; color: var(--muted); font-size: 13px }
.footer-links button { min-height: 44px; color: var(--muted); font-size: 13px; font-weight: 600 }
.footer-links button:hover { color: var(--text) }
.site-footer > p { flex-basis: 100%; color: var(--muted); font-size: 12px; line-height: 1.6 }

/* Mobile navigation */
.mobile-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px max(6px, env(safe-area-inset-bottom), var(--safe-bottom)); background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line) }
.mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 12px; color: var(--muted); font-size: 12px; font-weight: 700 }
.mobile-nav svg { width: 22px; height: 22px }
.mobile-nav button.active { color: var(--brand-text) }
.mobile-nav button.active svg { stroke-width: 2.2 }

/* Cart bar */
.cart-bar { position: fixed; z-index: 25; left: 50%; bottom: calc(72px + max(6px, env(safe-area-inset-bottom), var(--safe-bottom))); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 10px; width: calc(100vw - 2 * var(--gutter)); max-width: 520px; min-height: 60px; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--brand); color: var(--on-brand); box-shadow: 0 14px 36px rgba(20, 50, 190, .38); text-align: left; animation: rise .25s ease }
.cart-bar-info { display: flex; align-items: center; gap: 10px; min-width: 0 }
.cart-bar-count { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; background: #fff; color: #1636c8; font-size: 14px; font-weight: 800 }
.cart-bar-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25 }
.cart-bar-text strong { font-size: 15px; font-weight: 800 }
.cart-bar-text small { overflow: hidden; font-size: 12px; font-weight: 600; opacity: .88; white-space: nowrap; text-overflow: ellipsis }
.cart-bar-cta { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(5, 15, 70, .28); font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums }
.cart-bar-cta .star { width: 15px; height: 15px; color: #ffd45c }
.cart-bar-cta > svg:last-child { width: 18px; height: 18px }
body.has-cart-bar main { padding-bottom: calc(164px + var(--safe-bottom)) }

/* Pages */
.view { animation: appear .2s ease }
.view:not(#view-shop) { min-height: calc(100dvh - 240px); padding-top: 12px }
.page-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px }
.page-heading h1 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15 }
.page-heading p { margin-top: 6px; font-size: 14px; line-height: 1.6 }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px; font-size: 15px; font-weight: 750; transition: background .15s, box-shadow .15s, transform .15s }
.primary-button { background: var(--brand); color: var(--on-brand) }
.primary-button:hover { background: var(--brand-hover) }
.secondary-button { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong) }
.secondary-button:hover { box-shadow: inset 0 0 0 1px var(--brand) }
.primary-button:active, .secondary-button:active { transform: scale(.98) }
.primary-button svg, .secondary-button svg { width: 18px; height: 18px }
.small-button { min-height: 44px; padding: 8px 14px; font-size: 14px }
.full-width { width: 100% }
.link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--muted); font-size: 14px; font-weight: 700 }
.link-button:hover { color: var(--danger) }
.link-button svg { width: 16px; height: 16px }
.empty-state, .loading-state { grid-column: 1 / -1; padding: 40px 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center }
.empty-state > svg { width: 40px; height: 40px; margin: 0 auto 16px; color: var(--brand-text) }
.empty-state h3 { margin-bottom: 8px; font-size: 19px; font-weight: 800; letter-spacing: -.01em }
.empty-state p { max-width: 380px; margin: 0 auto 18px; color: var(--muted); font-size: 14px; line-height: 1.6 }
.loading-state { color: var(--muted); font-size: 14px }

/* Support */
.support-layout { display: grid; gap: 16px; margin-bottom: 32px }
.faq-list { display: grid; align-content: start; gap: 10px }
.faq-list details { padding: 4px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line) }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-size: 15px; font-weight: 750; cursor: pointer; list-style: none }
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary svg { width: 18px; height: 18px; color: var(--brand-text); transition: transform .2s }
.faq-list details[open] summary svg { transform: rotate(45deg) }
.faq-list details p { padding-bottom: 14px; color: var(--muted); font-size: 14px; line-height: 1.7 }
.help-card { height: max-content; padding: 22px; border-radius: var(--r-lg); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line) }
.help-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: var(--brand); color: var(--on-brand) }
.help-icon svg { width: 24px; height: 24px }
.help-card h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em }
.help-card p { margin: 8px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.65 }
.help-card .primary-button { width: 100% }
.help-card small { display: block; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6 }

/* Profile */
.profile-layout { display: grid; gap: 14px; align-items: start; margin-bottom: 32px }
.profile-panels { display: grid; gap: 14px }
.profile-card, .panel { padding: 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line) }
.profile-card { text-align: center }
.big-avatar { width: 72px; height: 72px; margin: 0 auto 14px; font-size: 28px }
.profile-card h2 { font-size: 22px; font-weight: 800 }
.profile-card .user-caption { margin-top: 4px; font-size: 14px }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.profile-stats > div + div { border-left: 1px solid var(--line) }
.profile-stats strong { display: block; font-size: 24px; font-weight: 800 }
.profile-stats span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px }
.profile-card > p:not(.user-caption) { margin-bottom: 20px; font-size: 14px; line-height: 1.7 }
.panel h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em }
.panel > p { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.6 }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 14px; padding: 3px; border-radius: 12px; background: var(--surface-2) }
.segmented button { min-height: 42px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 700 }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16, 30, 70, .12) }
.saved-tags { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none }
.saved-tag { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line) }
.saved-tag img { width: 32px; height: 32px; border-radius: 8px }
.saved-tag div { flex: 1; min-width: 0 }
.saved-tag strong { display: block; font: 700 15px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em }
.saved-tag small { display: block; color: var(--muted); font-size: 12px }
.saved-tag button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--muted) }
.saved-tag button:hover { background: var(--danger-soft); color: var(--danger) }
.saved-tag button svg { width: 18px; height: 18px }
.saved-empty { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; line-height: 1.6 }

/* Orders */
.orders-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 4px }
.orders-summary span { padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 13px; font-weight: 700 }
.orders-summary strong { color: var(--text) }
#orders-list { display: grid; gap: 12px; align-content: start; margin-bottom: 32px }
.order-card { padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line) }
.order-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.order-id { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 700 14px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; border-radius: 6px }
.order-id svg { width: 15px; height: 15px; color: var(--muted) }
.order-id:hover svg { color: var(--brand-text) }
.order-date { margin-top: 2px; color: var(--muted); font-size: 13px }
.status-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 5px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font-size: 12px; font-weight: 750; line-height: 1.3; text-align: center }
.status-paid, .status-fulfilled { background: var(--ok-soft); color: var(--ok) }
.status-pending, .status-processing { background: var(--warn-soft); color: var(--warn) }
.status-expired, .status-cancelled { background: var(--surface-2); color: var(--muted) }
.status-refunded { background: var(--danger-soft); color: var(--danger) }
.order-lines { display: grid; gap: 8px }
.order-line { display: flex; align-items: center; gap: 12px; min-width: 0 }
.order-line .art-thumb { width: 44px; height: 44px; border-radius: 10px }
.order-line > span:last-child { min-width: 0 }
.order-line strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.35 }
.order-line small { display: block; color: var(--muted); font-size: 12px }
.order-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px }
.order-card-footer strong { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.order-card-footer .price { color: var(--text); font-size: 18px }
.order-card-note { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.6 }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.order-actions > * { flex: 1 }

/* Dialog: bottom sheet on phones, centred card from 600px */
dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; padding: 18px var(--gutter) calc(18px + max(env(safe-area-inset-bottom), var(--safe-bottom))); border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg) }
dialog[open] { animation: sheet .25s ease }
dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px) }
.modal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.modal-top h2 { min-width: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere }
.modal-top .icon-button { box-shadow: none; background: var(--surface-2) }
.dialog-copy { color: var(--muted); font-size: 15px; line-height: 1.7 }
.dialog-copy p { margin-bottom: 12px }
.dialog-copy ol { margin: 0 0 14px; padding-left: 20px }
.dialog-copy li { margin-bottom: 10px; padding-left: 4px }
.dialog-copy strong { color: var(--text) }
.dialog-copy a:not(.primary-button) { color: var(--brand-text); text-decoration: underline }
.dialog-copy .primary-button { margin-top: 6px; color: var(--on-brand) }
.about-cta { margin-top: 16px }
.dialog-notice { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1.6 }
.detail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0 }
.detail-meta span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700 }
.detail-description { margin: 12px 0 14px; color: var(--muted); font-size: 15px; line-height: 1.65 }
.detail-meta + .dialog-notice { margin-top: 14px }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px }
.detail-actions .price { font-size: 26px }
.detail-actions .primary-button { flex: 1 1 200px }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.cart-head span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700 }
.cart-head img { width: 24px; height: 24px; border-radius: 7px }
.cart-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.cart-item-info { flex: 1; min-width: 0 }
.cart-item-info strong { display: block; font-size: 15px; font-weight: 750; line-height: 1.3 }
.cart-item-info small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px }
.cart-line-total { display: none; align-items: center; justify-content: flex-end; gap: 4px; min-width: 72px; font-size: 15px; font-weight: 800; white-space: nowrap }
.cart-line-total .star { width: 13px; height: 13px; color: var(--star) }
.quantity-control { display: flex; align-items: center; flex-shrink: 0; border-radius: 12px; background: var(--surface-2); font-size: 15px; font-weight: 800 }
.quantity-control button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--brand-text) }
.quantity-control button:hover:not(:disabled) { background: var(--surface-3) }
.quantity-control button svg { width: 16px; height: 16px; stroke-width: 2.2 }
.quantity-control span { min-width: 16px; text-align: center }
.button-stack { display: grid; gap: 10px; margin-top: 18px }
.form-field { margin: 18px 0 14px }
.form-field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 750 }
.input-wrap { position: relative }
.form-field input { width: 100%; padding: 13px 46px 13px 14px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--text); font: 700 17px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase }
.form-field input::placeholder { color: var(--muted); opacity: 1 }
.form-field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand) }
.tag-state { position: absolute; top: 50%; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: var(--surface); opacity: 0; transform: translateY(-50%); transition: opacity .15s }
.tag-state svg { width: 14px; height: 14px; stroke-width: 3 }
.form-field.valid input { box-shadow: inset 0 0 0 1.5px var(--ok) }
.form-field.valid .tag-state { opacity: 1 }
.form-field.invalid input { box-shadow: inset 0 0 0 2px var(--danger) }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.tag-chip { min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.tag-chip:hover, .tag-chip[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-text); box-shadow: inset 0 0 0 1.5px var(--brand) }
.tag-help { margin-top: 8px; color: var(--muted); font-size: 14px }
.tag-help summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--brand-text); font-weight: 700; cursor: pointer; list-style: none }
.tag-help summary::-webkit-details-marker { display: none }
.tag-help summary svg { width: 16px; height: 16px }
.tag-help ol { margin: 4px 0 0; padding-left: 20px; line-height: 1.7 }
.form-error { margin: 12px 0; color: var(--danger); font-size: 14px; line-height: 1.6 }
.cart-total { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 14px; font-size: 16px; font-weight: 750 }
.cart-total .price { font-size: 26px }
.terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 14px; line-height: 1.6 }
.terms-check input { min-width: 22px; min-height: 22px; margin-top: 1px; accent-color: var(--brand) }
.terms-check a { color: var(--brand-text); text-decoration: underline }
.success-view { text-align: center }
.success-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 4px auto 16px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); animation: pop .35s ease }
.success-icon svg { width: 30px; height: 30px; stroke-width: 2.6 }
.success-view h3 { margin-bottom: 10px; font-size: 21px; font-weight: 800 }
.success-view > p { color: var(--muted); font-size: 15px; line-height: 1.7 }
.success-view .dialog-notice { margin: 16px 0; text-align: left }

.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(84px + max(env(safe-area-inset-bottom), var(--safe-bottom))); max-width: min(420px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg); box-shadow: var(--shadow-md); font-size: 14px; font-weight: 650; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s }
.toast.show { opacity: 1; transform: translate(-50%, 0) }
body.has-cart-bar .toast { bottom: calc(144px + max(env(safe-area-inset-bottom), var(--safe-bottom))) }

@keyframes appear { from { opacity: .6; transform: translateY(4px) } to { opacity: 1; transform: none } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 16px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes pop { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
@keyframes sheet { from { opacity: .4; transform: translateY(40px) } to { opacity: 1; transform: none } }
@keyframes bump { 50% { transform: scale(1.12) } }
@keyframes shimmer { to { background-position: -200% 0 } }

/* Small phones */
@media (max-width: 374px) {
  :root { --gutter: 12px }
  .brand-name { font-size: 17px }
  .demo-pill { padding: 6px 10px 6px 8px }
  .hero h1 { font-size: 22px }
  .hero-facts { font-size: 12px }
  .games-grid { gap: 6px }
  .game-card { padding: 8px 2px }
  .game-card img { width: 44px; height: 44px }
  .product-grid { gap: 10px }
  .product-info { padding: 10px 10px 0 }
  .product-name { font-size: 14px }
  .product-buy { padding: 8px 10px 10px }
  .add-button { padding: 0 8px; font-size: 13px }
  .banner-amount { font-size: 25px }
  .filter { padding: 6px 4px; font-size: 13px }
}

/* Tablet and up */
@media (min-width: 600px) {
  :root { --gutter: 24px }
  .topbar { height: calc(72px + var(--safe-top)); gap: 16px }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px }
  .brand-name { font-size: 20px }
  .desktop-nav { display: flex; align-items: center; gap: 4px; margin-right: auto }
  .nav-link { min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: 15px; font-weight: 700 }
  .nav-link:hover { color: var(--text); background: var(--surface-2) }
  .nav-link.active { color: var(--brand-text); background: var(--brand-soft) }
  .top-avatar { display: grid }
  .mobile-nav { display: none }
  main { padding-bottom: 40px }
  body.has-cart-bar main { padding-bottom: 120px }
  .cart-bar { bottom: calc(24px + var(--safe-bottom)); width: min(520px, calc(100vw - 48px)) }
  .toast { bottom: calc(28px + var(--safe-bottom)) }
  body.has-cart-bar .toast { bottom: calc(100px + var(--safe-bottom)) }

  .hero { grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; margin: 8px 0 32px; padding: 28px 0 28px 32px; min-height: 260px }
  .hero h1 { font-size: 36px }
  .hero-lead { display: block; max-width: 460px; margin-top: 8px; color: rgba(255, 255, 255, .9); font-size: 16px; line-height: 1.5 }
  .hero-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 20px; font-size: 14px }
  .hero-cta { min-height: 48px; padding: 12px 22px; font-size: 16px }
  .hero-art { width: 270px; margin: -8px -8px -20px -12px }

  .games-section { margin-bottom: 36px }
  .games-section .section-title { margin-bottom: 14px }
  .games-grid { gap: 12px }
  .game-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px; text-align: left }
  .game-card img { width: 48px; height: 48px }
  .game-card strong { font-size: 15px }
  .game-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.35 }
  .game-selected { top: -6px; right: -6px; width: 22px; height: 22px; box-shadow: 0 0 0 3px var(--bg) }
  .game-selected svg { width: 13px; height: 13px }
  .section-title { font-size: 24px }
  #catalog-title img { width: 34px; height: 34px; border-radius: 9px }

  .catalog-bar, .catalog:not(.is-search) .catalog-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title search" "tabs sort"; gap: 14px 16px }
  .sort-label { justify-self: end }
  .catalog:not(.is-search) #catalog-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal }
  .search-box { width: 300px }
  .filter-tabs { justify-self: start }
  .filter { flex: 0 0 auto; padding: 6px 16px }
  .sort-label { width: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--muted) }
  .sort-label select { position: static; opacity: 1; width: auto; min-height: 42px; padding-right: 22px; border: 0; background: transparent; color: var(--text); font-size: 14px; font-weight: 700; -webkit-appearance: none; appearance: none }
  .sort-label .sort-icon svg { width: 18px; height: 18px }
  .sort-chevron { display: block; position: absolute; right: 12px; pointer-events: none }
  .sort-chevron svg { width: 16px; height: 16px }
  .sort-label.sorted::after { display: none }
  .sort-label.sorted { box-shadow: inset 0 0 0 1.5px var(--brand) }
  .catalog-note { margin: 14px 0 16px; font-size: 13px }

  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
  .product-info { padding: 14px 16px 0 }
  .product-name { font-size: 16px }
  .product-sub { font-size: 13px }
  .product-buy { padding: 12px 16px 16px }
  .price { font-size: 20px }
  .add-button { min-height: 44px; padding: 0 14px }
  .banner { aspect-ratio: 16 / 11 }
  .banner-game { top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 9px }
  .banner-amount { left: 12px; bottom: 12px; font-size: 34px }
  .banner-amount.is-long { font-size: 25px }
  .skeleton-card span:nth-child(1) { aspect-ratio: 16 / 11 }

  .how { margin: 56px 0 40px }
  .how .section-title { margin-bottom: 14px }
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
  .how-steps li { flex-direction: column; gap: 12px; padding: 18px }

  .site-footer { padding: 24px 0 8px }

  .view:not(#view-shop) { min-height: calc(100dvh - 200px); padding-top: 24px }
  .page-heading { align-items: center; margin-bottom: 24px }
  .page-heading h1 { font-size: 34px }
  .order-card { padding: 20px }
  .order-actions > * { flex: 0 0 auto }

  dialog { width: min(540px, calc(100vw - 48px)); max-height: min(88dvh, 860px); margin: auto; padding: 24px; border-radius: var(--r-xl); box-shadow: var(--shadow-lg) }
  dialog[open] { animation: pop .2s ease }
  .modal-top h2 { font-size: 22px }
  .cart-line-total { display: inline-flex }
  .art-thumb { width: 56px; height: 56px }
}
@media (min-width: 600px) and (max-width: 767px) {
  .demo-pill { width: 44px; height: 44px; padding: 0; justify-content: center }
  .demo-pill > span:last-child { display: none }
  .demo-pill svg { width: 20px; height: 20px }
  .nav-link { padding: 8px 10px; font-size: 14px }
  .hero { grid-template-columns: minmax(0, 1fr) 220px }
  .hero-art { width: 240px }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .games-grid { gap: 10px }
  .game-card { gap: 10px; padding: 10px }
  .game-card img { width: 44px; height: 44px; border-radius: 11px }
  .game-card strong { font-size: 14px }
  .game-card small { display: none }
}

/* Desktop */
@media (min-width: 1024px) {
  :root { --gutter: 32px }
  .desktop-nav { margin-left: 24px }
  .hero { grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; margin-bottom: 24px; padding: 28px 24px 28px 48px }
  .hero h1 { font-size: 40px }
  .hero-lead { font-size: 18px; max-width: 540px }
  .hero-facts { margin: 16px 0 20px; font-size: 15px; gap: 10px 22px }
  .hero-art { width: 280px; margin: -16px -8px -24px 0 }
  .games-section { margin-bottom: 24px }
  .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .catalog-bar, .catalog:not(.is-search) .catalog-bar { grid-template-columns: minmax(0, 1fr) auto auto minmax(190px, 300px); grid-template-areas: "title tabs sort search" }
  #catalog-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .search-box { width: auto }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
  .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md) }
  .banner-amount.is-long { font-size: 28px }
  .support-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px }
  .profile-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px }
  .help-card { position: sticky; top: 24px; padding: 28px }
  .profile-card, .panel { padding: 28px }
}
@media (min-width: 1280px) {
  :root { --gutter: 40px }
  .app-shell { max-width: 1320px }
  .hero { grid-template-columns: minmax(0, 1fr) 320px; padding-left: 56px }
  .hero h1 { font-size: 44px }
  .hero-art { width: 320px }
  .product-grid { gap: 24px }
}

@media (hover: none) {
  .product-card:hover { transform: none }
  .product-card:hover .banner-art { transform: none }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}