/* Website composition: shared catalogue, dedicated responsive store layout. */
html[data-website=true] { --red:#f52d57; --red-soft:#ff6482; --bg:#090a0e; --surface:#12141a; --muted:#9498a5; }
html[data-website=true] body { background:#090a0e; }
html[data-website=true] #app.app-shell { max-width:1280px; width:calc(100% - 64px); margin:auto; padding:0; border:0; background:transparent; box-shadow:none; }
html[data-website=true] #app .topbar { display:flex; position:sticky; top:0; align-items:center; gap:18px; height:88px; min-height:88px; padding:16px 0; background:#090a0ef2; border-bottom:1px solid #24262f; backdrop-filter:blur(18px); z-index:100; }
html[data-website=true] #app .topbar .brand { order:0; width:130px; height:44px; margin:0 18px 0 0; flex-shrink:0; }
html[data-website=true] #app .topbar__back { order:-1; flex-shrink:0; }
html[data-website=true] #app .topbar__notifications { order:4; flex-shrink:0; width:38px; height:38px; border:1px solid #2a2c35; background:#13151b; }
html[data-website=true] #app .bottom-nav { position:static; display:flex; order:1; transform:none; width:auto; max-width:none; min-height:44px; height:44px; gap:22px; padding:0; margin:0; background:none; border:0; border-radius:0; backdrop-filter:none; z-index:auto; }
html[data-website=true] #app .bottom-nav .nav-item { position:relative; display:flex; flex-direction:row; gap:0; padding:0; min-height:44px; font-size:13px; white-space:nowrap; color:#969aa8; }
html[data-website=true] #app .bottom-nav .nav-item svg { display:none; }
html[data-website=true] #app .bottom-nav .nav-item.is-active { color:#fff; }
html[data-website=true] #app .bottom-nav .nav-item.is-active::after { display:block; content:''; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--red); border-radius:2px; }
html[data-website=true] #app .website-account { order:5; margin:0; padding:10px 18px; border-color:#353740; background:#181a21; font-size:13px; border-radius:8px; }
html[data-website=true] #app .website-account:hover { background:#28212b; border-color:#f52d5780; }
.website-search { order:3; display:flex; align-items:center; gap:9px; margin-left:auto; width:260px; min-width:130px; height:40px; padding:0 12px; border:1px solid #2a2c35; border-radius:8px; background:#111319; }
.website-search svg { width:17px; height:17px; fill:none; stroke:#969aa8; stroke-width:1.7; flex-shrink:0; }
html[data-website=true] #app .website-search input { width:100%; min-width:0; border:0; outline:none; background:transparent; color:#fff; font-size:12px; }
html[data-website=true] #app .website-search button { border:0; color:#b7bac4; background:none; padding:5px; }
.website-search:focus-within { border-color:#f52d57; }
html[data-website=true] #app .screen { padding:16px 0 56px; }
html[data-website=true] #app .approved-hero { display:grid; grid-template-columns:1.15fr 1fr; min-height:370px; padding:0; border:1px solid #28232d; border-radius:18px; background:radial-gradient(ellipse at 90% 80%,#47142866,transparent 65%),#111117; }
html[data-website=true] #app .approved-hero::before { display:none; }
html[data-website=true] #app .approved-hero__copy { width:auto; max-width:none; padding:46px 0 38px 42px; align-self:center; z-index:2; }
.website-eyebrow { display:block; color:#9393a1; font-size:10px; font-weight:650; letter-spacing:2px; line-height:1.5; }
html[data-website=true] #app .approved-hero__copy h1 { font-size:clamp(34px,3.5vw,49px); line-height:1.14; letter-spacing:-1.8px; margin:17px 0 17px; font-weight:750; text-shadow:none; }
html[data-website=true] #app .approved-hero__copy h1 strong { color:#ff4f76; font-weight:750; }
html[data-website=true] #app .approved-hero__copy p { color:#a5a5b2; font-size:14px; max-width:400px; line-height:1.8; margin:0 0 24px; text-shadow:none; }
.website-hero-actions { display:flex; align-items:center; gap:24px; }
html[data-website=true] #app .approved-hero__copy .primary-button { width:auto; min-height:44px; padding:12px 20px; font-size:13px; background:#ed2c54; border-color:#ed2c54; box-shadow:0 6px 20px #ee2c5420; }
.website-hero-actions a { color:#b6b3c1; font-size:12px; text-decoration:none; }
.website-hero-actions a:hover { color:#fff; }
.website-hero-meta { display:flex; flex-wrap:wrap; gap:0; margin-top:28px; color:#7f8190; font-size:10px; }
.website-hero-meta span+span { margin-left:12px; padding-left:12px; border-left:1px solid #38303c; }
.website-hero-art { position:relative; align-self:stretch; overflow:hidden; min-width:0; }
.website-art-word { position:absolute; top:75px; left:0; font-size:clamp(70px,8vw,105px); font-weight:900; letter-spacing:-6px; color:transparent; -webkit-text-stroke:1px #ad6e8b35; transform:rotate(-12deg); }
html[data-website=true] #app .approved-hero__character { position:absolute; right:28px; bottom:0; width:360px; height:355px; max-width:100%; object-fit:contain; object-position:bottom; z-index:1; filter:drop-shadow(0 8px 35px #06040990); }
.website-art-caption { position:absolute; right:25px; bottom:20px; color:#d8aabd55; font-size:10px; letter-spacing:4px; writing-mode:vertical-rl; z-index:2; }
html[data-website=true] #app .approved-section { margin:36px 0 0; }
html[data-website=true] #app .approved-section__head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:18px; }
html[data-website=true] #app .approved-section__head h2 { font-size:25px; line-height:1.2; letter-spacing:-.6px; margin:7px 0 0; font-weight:700; }
html[data-website=true] #app .approved-section__head button { display:flex; align-items:center; gap:8px; color:#a7a9b6; font-size:12px; }
html[data-website=true] #app .catalog-game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
html[data-website=true] #app .catalog-game { border:1px solid #292b34; border-radius:12px; background:#12141b; transition:transform .2s,border-color .2s; }
html[data-website=true] #app .catalog-game:hover, html[data-website=true] #app .product-card:hover { transform:translateY(-3px); border-color:#864054; }
html[data-website=true] #app .catalog-game__visual { aspect-ratio:1.8; }
html[data-website=true] #app .catalog-game__cover { transition:transform .3s; }
html[data-website=true] #app .catalog-game:hover .catalog-game__cover { transform:scale(1.04); }
html[data-website=true] #app .catalog-game__body { min-height:115px; padding:16px; gap:6px; }
html[data-website=true] #app .catalog-game__body strong { font-size:16px; font-weight:650; }
html[data-website=true] #app .catalog-game__count { font-size:11px; color:#9095a4; }
html[data-website=true] #app .catalog-game__price { margin-top:8px; font-size:15px; }
html[data-website=true] #app .catalog-game__link { right:14px; bottom:15px; background:#23212b; color:#ff7895; border-radius:6px; }
html[data-website=true] #app .product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
html[data-website=true] #app .product-card { display:flex; flex-direction:column; padding:0; text-align:left; border-radius:12px; background:#12141b; border:1px solid #292b34; transition:transform .2s,border-color .2s; }
html[data-website=true] #app .product-art { width:100%; aspect-ratio:1.8; }
html[data-website=true] #app .product-card__body { width:100%; flex:1; padding:16px; gap:10px; }
html[data-website=true] #app .product-card__title { font-size:15px; min-height:38px; }
html[data-website=true] #app .product-card__features span { font-size:10px; background:#20232c; }
html[data-website=true] #app .product-card__footer { margin-top:auto; padding-top:8px; }
html[data-website=true] #app .round-arrow { border-radius:6px; background:#25202a; color:#ff7895; }
html[data-website=true] #app .status-pill { padding:4px 7px; font-size:10px; border-color:#34564c; background:#17332950; color:#7fd4b4; }
html[data-website=true] #app .status-pill--risk { color:#e8ba88; border-color:#66513e; background:#342b2450; }
html[data-website=true] #app .catalog-head:not(.catalog-head--game) { margin-bottom:24px; }
html[data-website=true] #app .catalog-head--game { min-height:190px; border-radius:14px; margin-bottom:24px; }
html[data-website=true] #app .catalog-game-hero__content { padding:28px; }
html[data-website=true] #app .catalog-game-hero__content h1 { font-size:35px; margin-top:18px; }
html[data-website=true] #app .search-wrap { max-width:560px; height:46px; margin-bottom:24px; }
html[data-website=true] #app .catalog-meta { margin-bottom:18px; font-size:12px; }
html[data-website=true] #app .product-page { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:start; gap:32px; padding:10px 0; }
html[data-website=true] #app .product-gallery { grid-column:1; margin:0; position:sticky; top:110px; }
html[data-website=true] #app .product-gallery__stage { aspect-ratio:1.35; border:1px solid #292c38; border-radius:14px; background:#12151d; }
html[data-website=true] #app .product-page__body { grid-column:2; min-width:0; padding:0; }
html[data-website=true] #app .product-heading h1 { font-size:32px; line-height:1.2; letter-spacing:-.7px; }
html[data-website=true] #app .product-heading>p { color:#9198a8; font-size:11px; letter-spacing:.6px; margin-bottom:12px; }
html[data-website=true] #app .product-about { padding:18px 0; }
html[data-website=true] #app .product-about p { color:#a8aebc; font-size:13px; line-height:1.8; }
html[data-website=true] #app .tariff-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
html[data-website=true] #app .tariff-card { padding:14px 8px; border-radius:9px; }
html[data-website=true] #app .tariff-card.is-selected { padding:13px 7px; background:#f52d5710; box-shadow:none; }
html[data-website=true] #app .product-cta { position:static; width:100%; max-width:none; transform:none; margin:20px 0; padding:16px; border:1px solid #30303c; background:#15141b; border-radius:10px; display:flex; align-items:center; gap:18px; min-height:82px; }
html[data-website=true] #app .product-selected-price { flex:1; }
html[data-website=true] #app .product-buy-button { flex:0 0 50%; width:auto; min-height:46px; background:#ed2c54; }
.website-product-details { grid-column:1/-1; max-width:100%; }
.website-help { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px 32px; margin-top:40px; background:#13131a; border:1px solid #2e2734; border-radius:12px; }
html[data-website=true] #app .website-help h2 { font-size:25px; margin:8px 0; letter-spacing:-.5px; }
.website-help p { color:#999bab; font-size:12px; margin:0; }
html[data-website=true] #app .website-help .secondary-button { width:auto; flex-shrink:0; color:#e6dfe8; border-color:#4e3847; text-decoration:none; padding:12px 20px; }
.website-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0 38px; border-top:1px solid #24262e; color:#686e7e; font-size:11px; }
.website-footer b { font-size:20px; letter-spacing:-.8px; color:#dddde6; }.website-footer p { margin:4px 0 0; }
.website-footer>div:nth-child(2) { display:flex; gap:25px; }
html[data-website=true] #app .website-footer button, .website-footer a { color:#9398a7; font-size:12px; background:none; border:0; text-decoration:none; padding:0; }
@media(max-width:1100px) { html[data-website=true] #app .topbar { gap:12px; } html[data-website=true] #app .bottom-nav { gap:16px; } .website-search { width:190px; } html[data-website=true] #app .topbar .brand { margin-right:5px; width:110px; } html[data-website=true] #app .approved-hero__copy { padding-left:30px; } }
@media(max-width:959px) {
html[data-website=true] #app.app-shell { width:calc(100% - 40px); }
html[data-website=true] #app .topbar { flex-wrap:wrap; height:auto; min-height:76px; padding:12px 0; gap:12px; }
html[data-website=true] #app .topbar .brand { margin-right:auto; width:120px; }
html[data-website=true] #app .bottom-nav { order:6; flex-basis:100%; justify-content:center; gap:32px; height:38px; min-height:38px; }
html[data-website=true] #app .bottom-nav .nav-item { min-height:38px; }
.website-search { margin:0; width:220px; }
html[data-website=true] #app .approved-hero { min-height:330px; }
html[data-website=true] #app .approved-hero__copy h1 { font-size:35px; }
html[data-website=true] #app .approved-hero__character { height:300px; right:0; }
.website-hero-actions { gap:12px; flex-wrap:wrap; }
html[data-website=true] #app .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
html[data-website=true] #app .catalog-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
html[data-website=true] #app .screen.screen--product { padding-bottom:40px; }
html[data-website=true] #app .product-heading h1 { font-size:26px; }
html[data-website=true] #app .product-page { gap:22px; }
}
@media(max-width:640px) {
html[data-website=true] #app.app-shell { width:calc(100% - 28px); }
html[data-website=true] #app .topbar { gap:8px; min-height:64px; }
html[data-website=true] #app .topbar .brand { width:105px; height:36px; }
html[data-website=true] #app .website-account { padding:9px 13px; font-size:12px; }
html[data-website=true] #app .bottom-nav { gap:0; justify-content:space-between; }
html[data-website=true] #app .bottom-nav .nav-item { font-size:12px; }
.website-search { order:7; width:100%; height:38px; }
html[data-website=true] #app .screen { padding:16px 0 30px; }
html[data-website=true] #app .approved-hero { grid-template-columns:1fr; min-height:300px; }
html[data-website=true] #app .approved-hero__copy { padding:27px 22px 25px; width:100%; max-width:none; }
html[data-website=true] #app .approved-hero__copy h1 { font-size:32px; letter-spacing:-1px; margin:14px 0; }
html[data-website=true] #app .approved-hero__copy p { font-size:12px; max-width:260px; line-height:1.65; }
.website-eyebrow { font-size:9px; letter-spacing:1.3px; }
.website-hero-art { position:absolute; right:0; top:0; bottom:0; width:42%; opacity:.14; pointer-events:none; }
html[data-website=true] #app .approved-hero__character { height:270px; width:240px; max-width:none; right:-85px; }
.website-art-word,.website-art-caption { display:none; }
.website-hero-meta { font-size:9px; margin-top:20px; }
.website-hero-actions { gap:16px; }
html[data-website=true] #app .approved-hero__copy .primary-button { min-height:42px; font-size:12px; padding:10px 14px; }
.website-hero-actions a { font-size:11px; }
html[data-website=true] #app .approved-section { margin-top:28px; }
html[data-website=true] #app .approved-section__head h2 { font-size:21px; }
html[data-website=true] #app .approved-section__head button { font-size:10px; gap:4px; }
html[data-website=true] #app .catalog-game-grid,html[data-website=true] #app .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
html[data-website=true] #app .catalog-game__body { padding:12px; min-height:105px; }
html[data-website=true] #app .catalog-game__body strong { font-size:14px; }
html[data-website=true] #app .product-card__body { padding:12px; }
html[data-website=true] #app .product-card__title { font-size:13px; }
html[data-website=true] #app .product-card__features span { font-size:9px; }
html[data-website=true] #app .catalog-game-hero__content h1 { font-size:28px; }
html[data-website=true] #app .catalog-game-hero__content { padding:22px; }
html[data-website=true] #app .product-page { display:block; padding:0; }
html[data-website=true] #app .product-gallery { position:static; margin-bottom:24px; }
html[data-website=true] #app .product-gallery__stage { aspect-ratio:1.5; }
html[data-website=true] #app .product-page__body { padding:0; }
.website-product-details { margin-top:25px; }
.website-help { display:block; padding:24px 20px; margin-top:28px; }
html[data-website=true] #app .website-help .secondary-button { margin-top:20px; width:100%; }
.website-footer { flex-wrap:wrap; padding:24px 0; gap:20px; }.website-footer>span { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) { html[data-website=true] #app .catalog-game:hover,html[data-website=true] #app .product-card:hover { transform:none; } }
html[data-website=true] #app .product-guide-card { border-color:#39303d; background:#17141c; }
html[data-website=true] #app .product-reviews-card { border-color:#292c38; background:#13151c; }
html[data-website=true] #app .website-hero-actions .primary-button:hover,html[data-website=true] #app .product-buy-button:hover { background:#ff3f69; }
html[data-website=true] #app .website-footer a:hover,html[data-website=true] #app .website-footer button:hover { color:#f0e8f0; }
/* Screenshot fixes: gallery stays in its grid row; header buttons have no mobile offsets. */
html[data-website=true] #app .product-gallery { position:static; top:auto; align-self:start; min-width:0; }
html[data-website=true] #app .topbar .topbar__notifications { position:relative; inset:auto; margin:0; align-self:center; flex:0 0 38px; }
html[data-website=true] #app .topbar .website-account { align-self:center; margin:0 0 0 4px; }
html[data-website=true] #app .website-product-details { position:relative; min-width:0; clear:both; }