/* app.css */
:root{color-scheme:dark;--bg:#0b0e0c;--panel:#171d19;--line:#2a352d;--lime:#ccf432;--muted:#9ba69e}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#f6f5ec;font:15px/1.5 system-ui,sans-serif}
button,
input,
select{font:inherit}
button,
a,
input,
select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:1px solid var(--line);color:inherit;background:var(--panel);border-radius:14px;padding:12px 17px;min-height:46px}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
header{display:flex;justify-content:space-between;align-items:center;max-width:940px;margin:auto;padding:22px 20px}
header a{color:#f5f4e9;font-size:28px;font-weight:900;letter-spacing:-2px;text-decoration:none}
header a span{color:var(--lime);padding-left:5px}
.tag,
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--lime)}
main{max-width:940px;margin:auto;padding:0 20px 110px}
.hero{background:linear-gradient(90deg,rgba(5,9,5,.9),rgba(5,9,5,.25)),url('/art/catalog.png') center/cover;border:1px solid #3a4827;border-radius:24px;min-height:225px;padding:30px;display:flex;align-items:center}
.hero h1{font-size:clamp(32px,6vw,54px);line-height:1.05;letter-spacing:-1.8px;margin:12px 0}
.hero p{max-width:260px;color:#d7dfd1;font-size:13px}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
h2{font-size:23px;letter-spacing:-.5px}
h3{font-size:19px}
.pill{font-size:10px;text-transform:uppercase;letter-spacing:1px;border:1px solid var(--line);border-radius:20px;padding:5px 9px;color:var(--muted)}
.tabs{display:flex;overflow:auto;gap:8px;padding-bottom:10px}
.tabs button{white-space:nowrap;font-size:13px}
.tabs .selected{background:var(--lime);color:#10150a;border-color:var(--lime)}
form#search{display:flex;gap:8px;margin-top:12px}
input,
select{width:100%;background:#111713;border:1px solid #354039;border-radius:12px;padding:13px;color:#fff;min-width:0}
.accent{background:var(--lime);color:#11170a;border-color:var(--lime);font-weight:700}
.hint{color:var(--muted);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.card{min-height:125px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;padding:17px;border-radius:18px;overflow-wrap:anywhere}
.card .icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:#273321;border-radius:10px;color:var(--lime);font-weight:700}
.card small{color:var(--muted);font-size:11px}
.card strong{margin-top:12px;font-size:14px}
.pages{display:flex;gap:8px;justify-content:center;margin-top:20px}
.pages span{align-self:center;color:var(--muted)}
#notice{margin:15px 0;color:var(--lime);font-size:13px;min-height:20px}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:#141a16f5;border-top:1px solid var(--line);padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;font-size:21px;color:var(--muted);padding:4px 25px}
nav span{font-size:10px}
nav .active{color:var(--lime)}
dialog{width:min(590px,100%);max-height:90dvh;border:1px solid #3d4c36;border-radius:22px;background:#101612;color:inherit;padding:20px}
dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}
.modal-head{display:flex;justify-content:space-between}
.quiet{background:none;border:0;padding:5px 10px}
.offer{width:100%;display:flex;justify-content:space-between;gap:12px;text-align:left;margin:8px 0}
.offer strong{white-space:nowrap;color:var(--lime)}
#facts{white-space:pre-line;font-size:13px;color:#c6d0c8}
#price{font-size:25px;color:var(--lime)}
label{display:block;margin:15px 0 5px}
label small{display:block;color:var(--muted);font-size:12px;margin:5px 0}
.wide{width:100%;margin-top:12px}
#form-error{color:#ff9c9c}
.panel{padding:18px;background:var(--panel);border-radius:15px;margin:12px 0;overflow-wrap:anywhere}
.panel strong{display:block;font-size:22px}
.panel small{display:block;color:var(--muted)}
#total{font-size:24px;font-weight:700;margin-top:20px}
footer{display:flex;gap:15px;flex-wrap:wrap;margin-top:32px}
footer a{color:var(--muted);font-size:11px}
[hidden]{display:none!important}@media(min-width:650px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{min-height:280px}}@media(prefers-reduced-motion:no-preference){button{transition:border-color .15s,transform .15s}button:active{transform:scale(.98)}}
.empty{grid-column:1/-1;text-align:center;padding:30px 16px;background:var(--panel);border:1px dashed var(--line);border-radius:18px;color:var(--muted)}
.quantity{display:flex;align-items:center;gap:8px;margin:14px 0}
.quantity button{min-width:46px}
.quantity .quiet{margin-left:auto;font-size:12px;color:var(--muted)}
summary{cursor:pointer;padding:8px 0}
details.panel summary{font-weight:650}
details .save-account{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
details .save-account label{flex:1;min-width:170px}
details .save-account small{width:100%}
#favorite{color:var(--lime);font-size:30px;flex-shrink:0}
#region-filter{margin-bottom:12px}
#saved-picker{border:1px solid var(--line);border-radius:14px;padding:0 12px;margin:15px 0;background:#1c271c}
#review-total{display:block;font-size:26px;color:var(--lime);padding-top:15px}
.offer span{overflow-wrap:anywhere}
.section-title h2{overflow-wrap:anywhere;min-width:0}
.panel p{font-size:13px}
.pages{align-items:center}
#reset-search{padding:8px 12px}
#shelves{margin-top:10px}
.card{padding:0;overflow:hidden;justify-content:flex-start;gap:0}
.card-image{width:100%;aspect-ratio:16/10;object-fit:cover;background:#141c11;display:block}
.card strong{padding:0 13px;margin-top:12px}
.card small{padding:5px 13px 14px}
.product-image{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:14px;margin-top:12px}
.basket-image{width:100%;max-height:145px;object-fit:cover;border-radius:12px;margin-bottom:12px}
.task-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.task-grid button{text-align:left;padding:18px;background:linear-gradient(110deg,#10170ef2,#111b10c9),url('/art/category.png') center/cover}
.task-grid strong,
.task-grid small{display:block}
.task-grid small{color:var(--muted);font-size:11px;margin-top:7px}
#coupon-form{display:flex;gap:6px;flex-wrap:wrap}
#coupon-form input{flex:1;min-width:130px}
#order-body code{display:block;overflow-wrap:anywhere;padding:12px;background:#081008;border:1px solid var(--line);border-radius:10px;user-select:all}
#order-body details p{white-space:pre-line}
#review-error{color:#ffadad}
.skeleton{height:195px;border:0;background:linear-gradient(110deg,#171e18 20%,#293128 45%,#171e18 70%);background-size:220% 100%;animation:shimmer 1.7s infinite}
@keyframes shimmer{to{background-position:-220% 0}}@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}
#service-price{font-size:28px;color:var(--lime)}
#service-facts{white-space:pre-line;font-size:13px}
#service-error{color:#ffadad}
#last-orders h3{margin-bottom:10px}
.card.skeleton{padding:0}
/* Compact mobile storefront and full product route. */
header{padding:14px 18px}
main{padding-left:16px;padding-right:16px}
.hero{min-height:100px;padding:18px 20px;border-radius:18px;background-position:70% 45%}
.hero h1{font-size:clamp(25px,5.5vw,36px);line-height:1.12;max-width:290px;margin:8px 0 0;letter-spacing:-1px}
.hero .eyebrow{font-size:8px;letter-spacing:1.2px}
#quick-tasks{margin:12px 0}
#quick-tasks>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.task-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.task-grid button{padding:8px 5px;min-height:54px;border-radius:12px}
.task-grid strong{font-size:11px;line-height:1.3}
.task-grid small{display:none}
#notice:empty{display:none}
#notice{margin:10px 0;font-size:12px}
#catalog>.section-title{margin-top:12px}
#catalog>.section-title h2{margin:8px 0;font-size:21px}
.catalog-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}
#category-menu{position:relative;min-width:0}
#category-menu>summary{list-style:none;padding:8px 2px;font-size:13px;cursor:pointer}
#category-menu>summary::-webkit-details-marker{display:none}
#sections{position:absolute;top:42px;left:0;z-index:5;width:240px;background:#182119;border:1px solid var(--line);border-radius:14px;padding:7px;box-shadow:0 12px 25px #0008}
#sections button{display:block;width:100%;text-align:left;margin:3px 0;background:none;border:0}
#sections .selected{background:#2a352a}
#shelves{display:flex;gap:5px}
#shelves button{padding:7px 12px;min-height:38px;color:var(--muted);border:0;background:none}
#shelves .selected{color:#f5f4e9;background:#253025}
#all-products{font-size:12px}
#search{margin-top:7px}
#search-hint{margin:7px 0;font-size:11px}
#suggestions{gap:5px;padding-bottom:0}
#suggestions button{font-size:11px;padding:6px 12px;min-height:32px;border-radius:20px}
.tabs .selected{background:var(--panel);color:#f5f4e9;border-color:#536b30;box-shadow:inset 0 -2px #667d36}
#coupon-form .accent{background:var(--panel);color:#f5f4e9;border-color:var(--line);font-weight:500}
.card{height:100%;min-height:0}
.card strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;height:38px;font-size:14px;margin-top:10px}
.card small{display:block;height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
.card-image{aspect-ratio:16/10;object-fit:cover;object-position:center}
.collection-strip{display:flex;overflow:auto;gap:10px;padding:0 0 8px;scroll-snap-type:x proximity}
.collection-strip .card{flex:0 0 140px;scroll-snap-align:start}
.collection-strip .card strong{font-size:12px;height:34px}
.collection-strip .card small{font-size:9px}
.collection-strip .card-image{aspect-ratio:16/10}
#collection-previews h3{font-size:17px;margin:10px 0}
.product-open{overflow:hidden}
.product-open>header,
.product-open>nav{visibility:hidden}
.product-screen{position:fixed;inset:0;background:var(--bg);overflow-y:auto;z-index:100;overscroll-behavior:contain;padding-bottom:calc(116px + env(safe-area-inset-bottom));scroll-padding-top:75px}
.product-shell{max-width:680px;margin:auto;padding:0 18px}
.product-screen .modal-head{position:sticky;top:0;z-index:2;background:#0b0e0cf5;padding:10px 0;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.product-image{aspect-ratio:16/8;object-position:center;border-radius:16px}
.product-screen .section-title{margin-top:10px}
.product-screen h2{font-size:24px;line-height:1.2}
.product-screen #price{font-size:20px;color:#e9eddf}
.region-chip{display:inline-block;border:1px solid #435532;border-radius:20px;padding:5px 10px;font-size:12px;color:#e8efdd;background:#1a2617;margin:2px 0 14px}
.product-action{position:fixed;bottom:0;left:0;right:0;z-index:105;background:#172017f8;border-top:1px solid #3b4c32;padding:12px max(16px,calc((100vw - 644px)/2)) calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;backdrop-filter:blur(12px)}
.product-action>div{flex:0 0 auto;min-width:90px}
.product-action small,
.product-action strong{display:block}
.product-action small{font-size:10px;color:var(--muted)}
.product-action strong{font-size:20px;white-space:nowrap}
.product-action button{flex:1;font-size:13px;padding:12px 10px}
.product-screen #buyer{padding-bottom:15px}
nav button{position:relative}
#cart-badge{position:absolute;top:0;right:13px;background:var(--lime);color:#142006;border:2px solid var(--bg);border-radius:20px;min-width:20px;height:20px;padding:0 4px;font-size:10px;line-height:16px}
#toast{position:fixed;bottom:calc(92px + env(safe-area-inset-bottom));left:12px;right:12px;max-width:650px;margin:auto;z-index:120;display:flex;align-items:center;gap:8px;background:#253420;border:1px solid #526d3e;border-radius:16px;box-shadow:0 8px 35px #0009;padding:10px 12px;font-size:12px}
#toast>span{flex:1}
#toast button{background:none;border:0;padding:6px;min-height:34px;font-size:11px}
#toast-cart{color:var(--lime)}
.review-block{border-top:1px solid var(--line);padding-top:6px;margin-top:10px}
.review-block .section-title{margin-top:0}
.review-block h3{font-size:18px}
.review-block .panel{padding:12px;margin:8px 0}
.review-block .basket-image{max-height:95px}
.review-block .section-title button{font-size:12px}
.recipient-card{padding:12px;background:#1c241d;border-radius:12px;margin:8px 0}
.recipient-card b,
.recipient-card small{display:block}
.recipient-card small{font-size:12px;color:#bcc9bd;white-space:pre-line}
.review-jump{outline:2px solid #526d3e;outline-offset:5px}@media(min-width:650px){.hero{min-height:110px}.task-grid button{padding:10px 15px}.task-grid strong{font-size:13px}.product-action{gap:25px}.card-image{aspect-ratio:16/10}}@media(max-width:360px){.product-action{gap:7px}.product-action strong{font-size:17px}.product-action button{font-size:11px}.card strong{font-size:12px}#toast{font-size:11px}}
.product-action>div{max-width:145px}
.product-action small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#action-region{color:#c0d6ac;margin-top:2px}
.product-screen .region-chip{max-width:100%}
.card.skeleton{height:190px;min-height:190px}
/* Shared visual language: quiet surfaces,
outlined controls and clear values. */
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:12px}
nav button .icon{width:23px;height:23px}
nav button.active .icon{stroke:var(--lime)}
#shelves button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.is-favorite .icon{fill:#b7db6326;stroke:var(--lime)}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
button,
input,
select{font-family:inherit}
h1,
h2,
h3,
strong{letter-spacing:-.025em}
h2{line-height:1.2}
p.hint,
small{line-height:1.5}
#total,
#balance,
#price,
#action-price,
.tile-price{font-variant-numeric:tabular-nums;letter-spacing:-.035em}
#facts{font-size:13px;line-height:1.65;color:#c5cec5;white-space:pre-line}
.card{background:#131a15;border-color:#263128;box-shadow:none;text-align:left}
.card-image{border-radius:10px;filter:saturate(.76);aspect-ratio:16/9}
.card strong{height:auto;min-height:38px;margin-bottom:6px}
.card small.type-chip{display:inline-block;height:auto;max-width:100%;font-size:10px;padding:3px 7px;margin:0 0 3px;border-radius:6px;color:#aab7aa;background:#202a22;border:0}
.card:hover .card-image{filter:saturate(.95)}
.product-image{max-height:210px;aspect-ratio:16/7;object-fit:cover;filter:saturate(.8);box-shadow:none}
.product-shell>.section-title{align-items:flex-start;flex-wrap:wrap;gap:8px}
.product-screen h2{font-size:25px;margin-bottom:6px;overflow-wrap:anywhere;flex:1 1 180px}
.product-tools{display:flex;gap:4px;align-items:center}
.product-tools button{min-height:44px;padding:8px;display:inline-flex;gap:6px;align-items:center;justify-content:center}
.product-tools #share{font-size:11px}
.product-tools #favorite{width:44px}
.type-chip{display:inline-block;padding:4px 9px;font-size:11px;font-weight:500;line-height:1.4;border:1px solid #344236;border-radius:7px;color:#bac9bb;background:#1a241c}
.type-chip[data-type="topups"]{color:#b6cbd6;border-color:#34454e}
.type-chip[data-type="steam_gifts"]{color:#cdc1db;border-color:#493e53}
.product-shell>#product-step{margin:14px 0}
#offers.offer-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
#offers.offer-tiles>.empty{grid-column:1/-1}
.offer-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:6px;min-width:0;min-height:125px;padding:14px 12px;border:1px solid #344137;background:#172019;border-radius:13px;box-shadow:none}
.offer-tile strong{font-size:17px;line-height:1.25;padding-right:15px;overflow-wrap:anywhere}
.offer-tile small{font-size:10px;color:#9ba99e}
.offer-tile .tile-price{margin-top:auto;font-size:15px;font-weight:600;color:#e8edde}
.offer-tile>.icon{position:absolute;top:12px;right:10px;width:16px;height:16px;opacity:0}
.offer-tile.selected{border-color:var(--lime);background:#222c1b;box-shadow:inset 0 0 0 1px var(--lime)}
.offer-tile.selected>.icon{opacity:1;color:var(--lime)}
#buyer{scroll-margin-top:85px;border-top:1px solid #303c32;margin-top:20px;padding-top:12px}
#buyer h3{font-size:19px;line-height:1.3}
.profile-head{display:flex;align-items:center;gap:13px;margin:15px 0 20px}
.profile-head h2{font-size:25px;margin:4px 0}
.profile-head .eyebrow{font-size:9px;letter-spacing:1.2px;color:var(--muted)}
#profile-avatar{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:17px;background:#273320;border:1px solid #485b37;color:#d9edb2;font-size:24px;font-weight:600}
.profile-balance{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-top:1px solid #2a362d;border-bottom:1px solid #2a362d}
.profile-balance>span{font-size:13px;color:var(--muted)}
.profile-balance strong{font-size:26px}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 24px}
.profile-actions button{font-size:12px;min-height:46px}
#profile-tabs{margin-top:18px}
#profile .panel{box-shadow:none;border-color:#2c382f}
#profile-note{font-size:12px}
button,
a,
input,
select{-webkit-tap-highlight-color:transparent}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
button{transition:background-color .15s,border-color .15s,transform .15s}
button:active:not(:disabled){transform:scale(.98)}
@keyframes enter-surface{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
#catalog:not([hidden]),
#basket:not([hidden]),
#profile:not([hidden]),
.product-screen:not([hidden]) .product-shell,
dialog[open]{animation:enter-surface .16s ease-out}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:360px){.offer-tile strong{font-size:15px}.product-tools #share span{display:none}.product-tools #share{width:44px}.profile-actions button{font-size:11px}}
#offers .offer-tile strong{white-space:normal;color:#eef0e6}
.offer-tile{margin:0}
#favorite:not(.is-favorite){color:var(--muted)}
/* Distinguishable artwork and a persistent compact list view. */
.catalog-display{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0}
.catalog-display>.hint{font-size:11px}
#layout-toggle{display:flex;gap:3px;background:#131b16;padding:3px;border:1px solid var(--line);border-radius:11px}
#layout-toggle button{padding:7px 12px;min-height:36px;font-size:11px;border-radius:8px;background:none;border-color:transparent;color:var(--muted)}
#layout-toggle button[aria-pressed="true"]{background:#2b3926;color:#edf2df;border-color:#475d37}
.card{padding:10px;justify-content:flex-start;gap:0}
.card-image{width:100%;height:auto;flex:none;aspect-ratio:16/9;object-fit:cover;filter:none;border-radius:10px;background:#1d291f}
.card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:1px 3px 4px;width:100%}
.card .card-body>strong{font-size:15px;line-height:1.3;font-weight:650;letter-spacing:-.02em;white-space:normal;margin:9px 0 0;min-height:39px;height:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:4px;max-width:100%}
.card .card-meta small.type-chip{height:auto;max-width:100%;margin:0;font-size:10px;color:#bccbb8;background:#253022;padding:3px 7px}
.card-detail{font-size:10px;line-height:1.4;color:#b0bcae;text-align:left}
.card:hover .card-image{filter:none}
.collection-strip .card{padding:8px}
.collection-strip .card .card-body>strong{font-size:12px;min-height:32px}
.collection-strip .card-detail{font-size:9px}
.product-image[src*="/art/product.svg"]{aspect-ratio:16/9;max-height:none;height:auto;object-fit:contain;filter:none}
.basket-image[src*="/art/product.svg"]{object-fit:contain;background:#1d291f}
@media(max-width:360px){.card .card-body>strong{font-size:13px}.catalog-display{margin-top:12px}}
/* Preserve official mobile app icons without cropping their logos. */
img[src*="/art/games/mobile-"]{object-fit:contain;background:#101814}
.card-image[src*="/art/games/mobile-"]{padding:8px}
.product-image[src*="/art/games/mobile-"]{height:200px;aspect-ratio:16/9;object-fit:contain;padding:12px}
/* Registered brand images remain fully visible; never crop logos. */
img[src*="/art/games/brand-"]{object-fit:contain;background:#101814}
.card-image[src*="/art/games/brand-"]{padding:6px}
.product-image[src*="/art/games/brand-"]{height:200px;aspect-ratio:16/9;object-fit:contain}
.level-panel{display:grid;gap:10px;margin:14px 0}
.level-panel progress{width:100%;height:10px;accent-color:var(--accent,#c5f62c)}
.level-panel details small{display:block;margin-top:8px}
.level-panel summary{cursor:pointer}
.level-panel p{font-size:13px;line-height:1.5}
#support-form{display:grid;gap:12px}
#support-text{width:100%;box-sizing:border-box;resize:vertical;font:inherit;color:inherit;background:var(--panel,#202720);border:1px solid #58614c;border-radius:12px;padding:12px}
#support-result{white-space:pre-wrap}
.support-messages{display:flex;flex-direction:column;gap:10px;max-height:45vh;overflow:auto;margin:16px 0;padding:4px}
.support-message{max-width:90%;padding:12px 15px;border:1px solid #394638;border-radius:14px;background:#171d18;align-self:flex-start;overflow-wrap:anywhere}
.support-message.admin{background:#283524;align-self:flex-end}
.support-message p{white-space:pre-wrap;margin:6px 0}
.support-message small{color:#9eaa9f;font-size:10px}
tr[data-support]{cursor:pointer}
tr[data-support]:hover{background:#222c21}

/* storefront.css */
/* UNLOQD storefront: game-first navigation and quiet product surfaces. */
:root{--bg:#0d100e;--panel:#191e1a;--line:#2c342d;--muted:#a6b0a8;--lime:#ccf432}
body{background:radial-gradient(ellipse at 100% 0,#27381733,transparent 480px),var(--bg)}
header{padding:18px 18px 10px;max-width:1040px}
header a{font-size:27px;letter-spacing:-1.7px}
header .tag{font-size:9px;letter-spacing:1.5px;color:var(--muted)}
main{max-width:1040px;padding:0 18px calc(110px + env(safe-area-inset-bottom))}
.store-hero{position:relative;isolation:isolate;min-height:230px;margin:14px 0 32px;padding:30px;display:flex;align-items:center;overflow:hidden;border:1px solid #3b4a31;border-radius:24px;background:linear-gradient(90deg,#0b110bea 0%,#10180dce 48%,#10180d38 100%),url('/art/catalog.png') 72% 50%/cover no-repeat;box-shadow:0 22px 60px #0003}
.store-hero>div{position:relative;z-index:2;max-width:510px}
.store-hero h1{margin:10px 0 12px;font-size:clamp(32px,6vw,52px);line-height:1.02;letter-spacing:-2px}
.store-hero p{max-width:430px;margin:0;color:#c5d0c3;font-size:13px;line-height:1.6}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.hero-actions button{min-height:44px;padding:10px 15px}
.hero-spark{position:absolute;right:7%;top:15%;z-index:1;color:var(--lime);font-size:80px;line-height:1;filter:drop-shadow(0 0 22px #ccf43288);transform:rotate(9deg)}
#catalog>.section-title{margin-top:12px}
#catalog>.section-title h2{font-size:25px;letter-spacing:-.8px;margin:10px 0 14px}
#catalog>.section-title .pill{border:0;color:#839578;font-size:9px}
form#search{margin:0;background:#1c241c;border:1px solid #465239;border-radius:15px;gap:0;padding:5px;align-items:center}
#query{background:transparent;border:0;padding:11px 10px;font-size:14px}
#query:focus-visible{outline:0}
#search button[type=submit]{background:var(--lime);border:0;color:#162008;font-size:12px;font-weight:700;min-height:40px;padding:9px 13px;border-radius:10px}
#reset-search{background:transparent;border:0;color:var(--muted);min-width:36px;min-height:40px;padding:5px}
#search-hint{font-size:11px;margin:8px 2px 20px;line-height:1.5}
#discover .section-title{margin-top:12px;gap:8px}
#discover h2{font-size:18px;margin:0 0 14px}
#discover .section-title>.hint{font-size:10px;margin:0 0 14px}
.discovery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;align-items:start}
.game-tile{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;width:100%;height:auto;align-self:start;border-radius:14px}
.game-cover{width:100%;height:auto;aspect-ratio:1 / 1;flex:0 0 auto;object-fit:cover;border-radius:18px;background:#20291f;border:1px solid #35402e;display:block;padding:0}
.game-tile .game-cover[src*="brand-"],
.game-tile .game-cover[src*="mobile-"]{padding:8px;object-fit:contain}
.game-tile strong{font-size:11px;line-height:1.3;font-weight:600;text-align:center;min-height:29px;overflow-wrap:anywhere}
#quick-tasks{margin:26px 0;padding:18px;background:linear-gradient(135deg,#182019,#121713);border:1px solid #33402e;border-radius:18px}
.quick-tasks-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.quick-tasks-head h3{font-size:17px;margin:0 0 4px}
.quick-tasks-head p{font-size:11px;line-height:1.45;color:var(--muted);margin:0}
.quick-tasks-head>span{flex:0 0 auto;padding:5px 8px;border-radius:20px;background:#293621;color:#cceca4;font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.task-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.task-grid button{position:relative;background:#1d261d;border:1px solid #3a4933;border-radius:14px;padding:12px;min-height:82px;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:10px;text-align:left;transition:border-color .18s,background .18s,transform .18s}
.task-grid button:hover{background:#243023;border-color:#5c7647;transform:translateY(-1px)}
.task-grid button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.task-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#314126;color:#d8fa73;font-size:16px;font-weight:750}
.task-icon-telegram{background:#229ed9;color:#fff}
.task-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.task-grid strong{font-size:13px;font-weight:650;line-height:1.25}
.task-grid small{display:block;font-size:10px;line-height:1.35;margin:0;color:var(--muted)}
.task-arrow{color:var(--lime);font-size:17px;justify-self:end}
.catalog-tools{border-top:1px solid var(--line);padding-top:10px;margin-top:22px}
#shelves{margin:0}
#shelves button{background:#192019;border:1px solid #2a3529;border-radius:11px;min-height:42px;padding:8px}
#suggestions{margin:5px 0 0}
#suggestions button{border-color:#354032;background:transparent}
.catalog-display{margin:15px 0 0;gap:10px;flex-wrap:wrap}
#catalog-count{margin-right:auto;font-size:11px}
.catalog-region{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin:0}
.catalog-region select{width:auto;max-width:132px;font-size:11px;padding:7px 9px;border-radius:9px;background:#171e17}
#layout-toggle{border:0;background:#1b231b}
#layout-toggle button{min-height:34px;padding:6px 9px}
.grid{margin-top:14px;gap:12px}
.card{background:#171d18;border:1px solid #2c362c;border-radius:16px;padding:8px;box-shadow:0 3px 12px #0001}
.card-media{display:block;width:100%;overflow:hidden;border-radius:11px;background:#131a15}
.card-price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin-top:auto;font-variant-numeric:tabular-nums}
.card-price small{height:auto!important;margin:0!important;padding:0!important;color:#92a08f;font-size:9px!important}
.card-price b{color:#f2f7e8;font-size:15px}
.card-price em{flex-basis:100%;color:#9eac9d;font-size:9px;font-style:normal;line-height:1.35}
.card .card-cta{margin-top:0}
.card-image{border-radius:11px;aspect-ratio:4/3}
.card .card-body{padding:2px 5px 7px;gap:8px}
.card .card-body>strong{font-size:14px;line-height:1.4;padding:0;margin:9px 0 0;min-height:39px}
.card .card-meta small.type-chip{background:#273124;color:#c8d4c1;border-radius:5px;padding:3px 6px;font-size:10px}
.card-detail{color:#a6b4a3;font-size:11px}
.card-cta{font-size:11px;color:#d8e9b2;margin-top:auto;font-weight:600}
.pages button{background:#1c261b;border:1px solid #3a4932;font-size:12px;min-height:42px}
.pages span{font-size:12px}
#game-hub{padding:0 0 10px}
#hub-back{font-size:12px;color:var(--muted);padding-left:0;min-height:42px}
.hub-heading h2{font-size:30px;margin:4px 0;letter-spacing:-1px}
.hub-heading p{margin:6px 0 16px}
#hub-tabs{gap:6px;padding:0 0 10px}
#hub-tabs button{border-radius:22px;font-size:12px;padding:8px 13px;min-height:39px;background:transparent}
#hub-tabs .selected{color:#19240b;background:var(--lime);border-color:var(--lime);box-shadow:none}
#hub-steam-topup{border-color:#4b6234;background:#24331b;color:#def4b5;font-size:13px;margin-top:5px}
#product-breadcrumb{padding:12px 0 0;margin:0;font-size:11px;overflow-wrap:anywhere}
.product-screen .product-image{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;margin-top:16px;border-radius:18px;object-fit:contain;background:transparent}
.product-screen #facts{background:#192219;border:1px solid #2f3f2b;border-radius:13px;padding:14px}
.product-screen #facts{display:flex;flex-direction:column;gap:0;padding:4px 14px;white-space:normal;background:#151d17}
.fact-row{display:grid;grid-template-columns:minmax(125px,.65fr) minmax(0,1.35fr);gap:14px;min-width:0;padding:12px 0;border-bottom:1px solid #283229}
.fact-row:last-child{border-bottom:0}
.fact-row small{color:#9eaa9d;font-size:11px;font-weight:500;letter-spacing:0}
.fact-row strong{color:#eef2e9;font-size:12px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.fact-row.fact-region strong{color:#d8ff45;font-size:14px;font-weight:800}
.fact-row.fact-important small{color:#d8ff45}
.fact-row.fact-note{display:block;color:#aebaae}
.fact-row.fact-note strong{font-weight:500}
#to-bot.needs-minimum{border-color:#d4a629;background:#d4a629;color:#171307;box-shadow:0 8px 24px #d4a62920}
#country-checker{margin:12px 0;padding:15px;border:1px solid #35452f;border-radius:14px;background:#121914}
#country-checker h4{margin:0 0 3px;font-size:14px}
#country-checker .hint{margin:0 0 11px}
.country-check-row{display:flex;gap:8px}
.country-check-row input{min-width:0}
.country-check-row button{flex:0 0 auto}
#country-result{min-height:22px;margin:10px 0 0;font-size:13px;font-weight:700}
#country-result.supported{color:var(--lime)}
#country-result.unsupported{color:#ff8f8f}
#country-result.unknown{color:#d9c893}
#product-action{box-shadow:0 -10px 30px #0004}
nav{z-index:20;background:#141b15ed;backdrop-filter:blur(18px);border-color:#35412d}
nav button{min-width:70px;min-height:52px;padding:5px 15px}
nav button.active{color:#d3eea7}
.product-open>nav{visibility:hidden}
.site-footer{display:block;margin-top:52px;padding:30px 0 0;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.footer-brand{grid-column:1/-1;max-width:380px}
.footer-logo{display:inline-block;color:#f5f4e9;font-size:21px;font-weight:900;letter-spacing:-1.3px;text-decoration:none}
.footer-logo span{color:var(--lime);padding-left:4px}
.footer-brand p{max-width:360px;margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.footer-grid h3{margin:0 0 11px;font-size:12px;color:#f5f4e9}
.footer-grid section:not(.footer-brand){display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.footer-grid section:not(.footer-brand) a,
.footer-grid section:not(.footer-brand) button{min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:11px;line-height:1.45;text-align:left;text-decoration:none}
.footer-grid section:not(.footer-brand) a:hover,
.footer-grid section:not(.footer-brand) button:hover{color:var(--lime)}
.footer-bottom{display:flex;flex-direction:column;gap:9px;margin-top:28px;padding:16px 0 4px;border-top:1px solid #212922;color:#77837a;font-size:10px}
.footer-bottom>div{display:flex;gap:16px;flex-wrap:wrap}
.footer-bottom>div span:last-child{color:#9dbd73}
.trust-strip{display:grid;grid-template-columns:1fr;gap:8px;margin:42px 0 0}
.trust-strip article{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #2e3a2d;border-radius:14px;background:#151c17}
.trust-strip article>span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:#2c3b23;color:var(--lime);font-weight:800}
.trust-strip article div{display:flex;min-width:0;flex-direction:column;gap:2px}
.trust-strip strong{font-size:12px}
.trust-strip small{color:var(--muted);font-size:10px;line-height:1.4}
@media(min-width:650px){.discovery-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:13px}
.game-tile strong{font-size:12px}
.task-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card .card-body>strong{font-size:16px}
#search{max-width:720px}
.product-screen .product-image{max-height:310px}}
@media(min-width:950px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:360px){main{padding-left:12px;padding-right:12px}
.discovery-grid{gap:12px 8px}
.game-cover{border-radius:13px}
.game-tile strong{font-size:10px}
.catalog-display{gap:7px}
.catalog-region{font-size:10px}
#layout-toggle button{font-size:10px;padding:5px 7px}
.card .card-body>strong{font-size:12px}}
/* Dedicated discovery icons: full square app art,
platform glyphs on brand colour. */
.discovery-grid{gap:18px 12px}
.game-tile{gap:7px;border:0;box-shadow:none}
.game-art{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:22%;background:#202720;isolation:isolate}
.game-tile .game-art .game-cover{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border:0;border-radius:0;padding:0;background:transparent}
.game-art[data-platform="steam"]{background:linear-gradient(145deg,#176493,#0c264a)}
.game-art[data-platform="playstation"]{background:linear-gradient(145deg,#087bc7,#003087)}
.game-art[data-platform="xbox"]{background:linear-gradient(145deg,#209c27,#107c10)}
.game-art[data-platform="discord"]{background:linear-gradient(145deg,#7884ff,#5865f2)}
.game-tile .game-art .game-cover[src$=".svg"]{padding:19%;object-fit:contain}
.game-tile strong{display:block;width:100%;min-height:0;font-size:11px;line-height:1.35;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
@media(min-width:650px){.discovery-grid{gap:18px 16px}
.game-tile strong{font-size:12px}}
@media(max-width:360px){.discovery-grid{gap:16px 10px}
.game-tile strong{font-size:10px}}
.browser-entry{max-width:540px;margin:30px auto;padding:25px 22px}
.browser-entry h1{font-size:clamp(35px,8vw,54px);line-height:1.08;letter-spacing:-1.7px;margin:22px 0}
.browser-entry>p{line-height:1.7}
.browser-entry .hint{font-size:13px;color:#b6c1b3}
.entry-link{display:block;margin:24px 0;padding:16px 18px;background:var(--lime);color:#162008;border-radius:14px;text-decoration:none;text-align:center;font-weight:700}
#account-login{font-size:12px;color:#dfedc6;border:1px solid #3b4c30;border-radius:12px;padding:8px 12px}
#account-login.account-shortcut{display:flex;align-items:center;gap:9px;min-width:144px;padding:7px 11px;text-align:left}
.account-shortcut-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#314126;color:var(--lime);font-size:12px}
.account-shortcut-copy{display:flex;flex-direction:column;line-height:1.1}
.account-shortcut-copy small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.account-shortcut-copy strong{margin-top:3px;color:#f5f4e9;font-size:12px;font-variant-numeric:tabular-nums}
#login-code{display:block;font-size:36px;text-align:center;letter-spacing:9px;font-variant-numeric:tabular-nums;margin:24px 0;color:var(--lime)}
#login-screen{z-index:220}
#login-screen p{font-size:13px;line-height:1.6}
.notification-button{position:relative;display:grid;place-items:center;width:42px;min-width:42px;height:42px;min-height:42px;padding:0;border-radius:12px;font-size:23px;color:#dce7d4;background:#161d17}
.notification-button:hover{color:var(--lime);border-color:#647c3f}
.notification-button span{position:absolute;right:-5px;top:-6px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:20px;background:var(--lime);border:2px solid var(--bg);color:#11170a;font-size:10px;font-weight:800}
.notification-list{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.notification-item{padding:14px;border:1px solid var(--line);border-radius:14px;background:#171f18}
.notification-item.unread{border-color:#60783c;background:#1d291a}
.notification-item header{position:static;min-height:0;padding:0;border:0;background:none;display:flex;gap:10px}
.notification-item b{font-size:14px}
.notification-item time{margin-left:auto;color:var(--muted);font-size:10px}
.notification-item p{margin:7px 0 0;color:#c8d3c4;font-size:12px;white-space:pre-line}
.notification-item a{display:inline-block;margin-top:9px;color:var(--lime);font-size:11px}
.notification-empty{padding:32px;text-align:center;color:var(--muted)}
@media(hover:hover) and (pointer:fine){button:not(:disabled):hover{color:var(--lime);border-color:#90b922;box-shadow:0 0 0 1px #ccf4322b,0 0 18px #a9d51d20}
button.accent:not(:disabled):hover,
.tabs .selected:not(:disabled):hover,
#hub-tabs .selected:not(:disabled):hover,
.pages .page-number[aria-current="page"]:hover{color:#11170a;background:#d9ff46;border-color:#d9ff46;box-shadow:0 0 20px #ccf43235}
.account-shortcut:hover .account-shortcut-copy strong{color:var(--lime)}
.footer-grid section:not(.footer-brand) button:hover{border-color:transparent;box-shadow:none}}
/* Website layout: full rows,
desktop navigation and readable product pages. */
.product-body{display:contents}
.pages{flex-wrap:wrap;gap:6px}
.pages .page-number{min-width:38px;padding:8px 10px}
.pages .page-number[aria-current="page"]{opacity:1;background:var(--lime);color:#162008;border-color:var(--lime);cursor:default}
.card .card-body>strong{min-height:0}
.card-body{flex:1}
.card-cta{padding-top:3px}
@media(min-width:650px){
  header,main{max-width:1160px}
header{position:sticky;top:0;z-index:30;min-height:82px;background:#0d100ef5;border-bottom:1px solid var(--line);padding:16px 24px;backdrop-filter:blur(16px)}
main{padding:8px 24px 40px}
body>nav{top:16px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:320px;z-index:40;padding:3px;background:#1b241b;border:1px solid #35412d;border-radius:14px;backdrop-filter:none}
body>nav button{flex:1;flex-direction:row;gap:7px;min-width:0;min-height:42px;padding:8px;font-size:12px;border-radius:10px}
body>nav button span{font-size:12px}
body>nav button .icon{width:19px;height:19px}
body>nav button.active{background:#2b3825;color:#e4f4d1}
#cart-badge{top:-5px;right:-4px}
#catalog-heading{scroll-margin-top:100px}
#catalog>.section-title{margin-top:18px}
#catalog>.section-title h2{font-size:30px}
#search{max-width:none}
#search-hint{margin-bottom:24px}
.discovery-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:20px}
.game-tile{max-width:102px;justify-self:center}
.game-tile strong{font-size:12px}
#quick-tasks{margin:28px 0 32px;padding:20px}
.task-grid button{padding:14px;min-height:88px}
.catalog-tools{margin-top:26px}
.card{padding:9px;border-radius:15px}
.card-image{aspect-ratio:16/10}
.card .card-body{padding:3px 4px 6px;gap:7px}
.card .card-body>strong{font-size:14px;min-height:0;margin:8px 0 3px;line-height:1.4}
.card .card-meta small.type-chip{font-size:10px}
.card-cta{font-size:11px}
#cards{align-items:stretch}
.catalog-display{margin:18px 0}
.pages{margin:25px 0 35px}
#basket,
#profile{max-width:780px;margin:24px auto}
#basket>.section-title h2,
#profile .profile-head h2{font-size:30px}
#collection-previews{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}
.collection-strip .card{flex-basis:145px}
#toast{bottom:24px;max-width:520px}
.product-screen{padding-bottom:125px}
.product-shell{max-width:1100px;padding:0 28px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:36px;align-items:start}
#product-breadcrumb,
.product-shell>.modal-head{grid-column:1/-1}
.product-screen .modal-head{top:0;margin-bottom:18px}
.product-screen .product-image{grid-column:1;position:sticky;top:82px;width:100%;max-height:none;height:auto;margin-top:0;aspect-ratio:auto;object-fit:contain;background:transparent}
.product-body{display:block;grid-column:2;min-width:0}
.product-body>.section-title{margin-top:0;align-items:flex-start;gap:8px;flex-wrap:wrap}
.product-body h2{margin-top:0;font-size:27px}
.product-action{left:24px;right:24px;bottom:18px;max-width:1044px;margin:auto;border:1px solid #465a36;border-radius:17px;padding:14px 20px;gap:30px}
.product-action>div{max-width:240px;min-width:180px}
.product-action button{flex:0 1 360px;margin-left:auto;font-size:14px}
dialog{padding:28px;border-radius:20px}
.site-footer{margin-top:64px;padding-top:34px}
.footer-grid{grid-template-columns:minmax(280px,1.6fr) minmax(150px,.75fr) minmax(190px,.9fr);gap:46px}
.footer-brand{grid-column:auto}
.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;margin-top:34px}
}
@media(min-width:950px){#cards[data-layout="grid"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:650px) and (max-width:949px){
  #cards[data-layout="grid"]{grid-template-columns:repeat(3,minmax(0,1fr))}
body>nav{width:260px}
body>nav button{font-size:11px}
body>nav button span{font-size:11px}
#account-login{max-width:150px;font-size:11px}
.discovery-grid{gap:12px}
.game-tile strong{font-size:10px}
.product-shell{column-gap:22px;padding:0 22px}
.product-body h2{font-size:23px}
#collection-previews{grid-template-columns:1fr}
}
/* Each personal collection uses the available width,
even without a neighbour. */
@media(min-width:650px){
  #collection-previews{grid-template-columns:minmax(0,1fr);gap:24px}
#collection-previews>section{min-width:0}
.collection-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;overflow:visible;align-items:stretch}
.collection-strip .card{width:100%;height:100%;min-width:0;padding:9px}
.collection-strip .card-image{aspect-ratio:16/10}
.collection-strip .card .card-body>strong{font-size:13px;min-height:0}
.collection-strip .card-cta{font-size:11px}
}
@media(min-width:650px) and (max-width:949px){.collection-strip .card:nth-child(n+5){display:none}}
@media(max-width:480px){#quick-tasks{padding:14px;margin:22px 0}
.quick-tasks-head>span{display:none}
.task-grid{grid-template-columns:1fr}
.task-grid button{min-height:68px}
.quick-tasks-head p{max-width:280px}}
#active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0}
.filter-chip{padding:7px 11px;min-height:36px;border-radius:20px;font-size:12px;background:#273421;border-color:#536c38;color:#e1efce}
#active-filters .quiet{font-size:12px;min-height:36px}
/* Compact cart summary; no oversized decorative banner above a subscription. */
.cart-product-head{display:flex;align-items:flex-start;gap:16px}
.cart-product-head>.basket-image{display:block;flex:0 0 88px;width:88px;height:88px;max-height:none;aspect-ratio:1;object-fit:cover;border-radius:17px;margin:0;background:#172019}
.cart-product-head>.basket-image[src$=".svg"]{object-fit:contain;background:transparent}
.cart-product-info{min-width:0;flex:1}
.cart-product-info>b{display:block;font-size:16px;line-height:1.4;margin:0 0 4px}
.cart-product-info>strong{font-size:20px;margin:8px 0 5px}
.cart-product-info>small{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.cart-product .quantity{margin:10px 0 4px}
.cart-product>details{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.cart-product>details summary{font-size:13px}
@media(max-width:400px){.cart-product-head{gap:12px}
.cart-product-head>.basket-image{flex-basis:66px;width:66px;height:66px;border-radius:13px}
.cart-product-info>b{font-size:14px}
.cart-product-info>strong{font-size:18px}}
.cart-product-head>.basket-image[src*="brand-"],
.cart-product-head>.basket-image[src*="mobile-"]{object-fit:contain}
#login-yandex{background:#fc3f1d;color:#fff;border-color:#fc3f1d;font-weight:650}
#identity-settings{margin-top:16px}
#identity-settings h3{margin:0 0 6px;font-size:16px}
#account-identity{font-size:11px}
.identity-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.identity-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-weight:800;color:#fff}
.identity-yandex{background:#fc3f1d}
.identity-telegram{background:#229ed9}
.identity-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.identity-copy b{font-size:14px}
.identity-copy small{font-size:12px;color:var(--muted)}
.identity-copy small.is-linked{color:#bff52c}
.identity-row button{font-size:12px;min-height:38px;padding:8px 12px}
.identity-note{margin:8px 0 0}
.danger-subtle{color:#ff9d99;border-color:#70413e}
.danger{background:#b83d36;color:#fff;border-color:#d55a53}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
#unlink-screen{max-width:430px}
#unlink-screen h2{margin-top:0}
#unlink-error{color:#ff9d99;min-height:1.2em}@media(max-width:400px){.identity-row{grid-template-columns:34px minmax(0,1fr) auto;gap:9px}
.identity-logo{width:34px;height:34px;border-radius:10px}
.identity-row button{padding:7px 9px}}
.admin-entry{display:block;text-align:center;text-decoration:none;background:#293820;border:1px solid #50663d;color:#e4f6c9;padding:12px;border-radius:12px;margin:10px 0 16px;font-weight:650}
/* Premium storefront polish: truthful pricing,
carousels and responsive product facts. */
.collection-actions{display:flex;align-items:center;gap:5px}
.collection-actions button{min-width:36px;min-height:36px;padding:6px 9px;border-radius:10px}
.collection-actions .quiet{font-size:11px}
.card.skeleton{position:relative;overflow:hidden;background:#151c17}
.card.skeleton::after{content:"✦";position:absolute;left:50%;top:50%;color:#ccf43255;font-size:22px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px #ccf43244)}
.card-media .card-image{display:block}
@media(hover:hover) and (pointer:fine){.card:not(.skeleton):hover{transform:translateY(-4px);border-color:#789b43;box-shadow:0 15px 34px #0005,0 0 0 1px #ccf43220}
.card:not(.skeleton):hover .card-image{transform:scale(1.025);filter:saturate(1.05)}
.card-image{transition:transform .22s ease,filter .22s ease}
.game-tile:hover .game-art{box-shadow:0 0 0 2px #ccf43266,0 12px 28px #0005;transform:translateY(-2px)}
.game-art{transition:transform .18s,box-shadow .18s}}
@media(min-width:650px){.trust-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.collection-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#475c36 transparent;padding:2px 2px 10px;align-items:stretch}
.collection-strip .card{display:flex!important;flex:0 0 clamp(155px,18vw,190px);width:auto;height:auto;min-width:0;padding:9px;scroll-snap-align:start}}
@media(max-width:649px){.store-hero{min-height:205px;margin:8px 0 25px;padding:24px 20px;background-position:64% 50%;border-radius:20px}
.store-hero::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#0b110bf2 0%,#0b110bcd 72%,#0b110b66)}
.store-hero>div{z-index:2}
.store-hero h1{font-size:33px;letter-spacing:-1.3px}
.store-hero p{max-width:290px;font-size:12px}
.hero-spark{right:4%;font-size:54px}
.hero-actions button{font-size:11px;padding:9px 12px}
.fact-row{grid-template-columns:1fr;gap:3px}
.trust-strip{margin-top:30px}
.collection-actions button[data-scroll-target]{display:none}}
/* 2026 premium storefront system: restrained gaming surfaces and fast discovery. */
:root{--bg:#0b0e0b;--panel:#182018;--panel-raised:#1d271d;--line:#303b31;--line-strong:#465543;--lime:#d1ff29;--text:#f5f6f0;--muted:#a0aa9c;--space:8px}
body{color:var(--text);background:radial-gradient(circle at 86% -8%,#26351b55 0,transparent 34rem),radial-gradient(circle at 8% 32%,#17201666 0,transparent 30rem),var(--bg)}
header{gap:22px}
.header-categories{display:flex;align-items:center;gap:4px;margin-left:auto}
.header-categories button{min-height:38px;padding:8px 11px;border-color:transparent;background:transparent;color:var(--muted);font-size:11px;border-radius:10px}
.header-categories button:hover{background:#1c251c;color:var(--lime)}
.store-hero{min-height:340px;padding:46px 48px;border-color:#3b4935;border-radius:28px;background:linear-gradient(90deg,#090d09fa 0%,#0d140de8 42%,#0d140d70 66%,#0d140d18 100%),url('/art/catalog.png') 76% 50%/cover no-repeat;box-shadow:0 28px 80px #0006,inset 0 1px #ffffff08}
.store-hero::before{content:"";position:absolute;inset:auto -12% -70% 40%;height:115%;border-radius:50%;background:radial-gradient(circle,#d1ff2915 0,transparent 67%);pointer-events:none}
.hero-copy{max-width:590px}
.store-hero h1{max-width:590px;margin:13px 0 16px;font-size:clamp(42px,5.5vw,68px);line-height:.98;letter-spacing:-3.2px;text-wrap:balance}
.store-hero p{max-width:510px;font-size:15px;line-height:1.65;color:#cbd4c8}
.hero-actions{margin-top:25px;gap:11px}
.hero-actions button{min-height:50px;padding:12px 19px;border-radius:13px;font-weight:700}
.hero-actions button:not(.accent){background:#151c16dd;border-color:#4a5946}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;color:#9eaa9c;font-size:10px}
.hero-proof span::before{content:"✓";margin-right:6px;color:var(--lime);font-weight:800}
.hero-visual{position:absolute;inset:0 0 0 55%;pointer-events:none}
.hero-orbit{position:absolute;right:8%;top:14%;width:190px;aspect-ratio:1;border:1px solid #d1ff2929;border-radius:50%;box-shadow:0 0 70px #d1ff2914,inset 0 0 45px #d1ff290d}
.hero-orbit::before,
.hero-orbit::after{content:"";position:absolute;border:1px solid #d1ff291b;border-radius:50%}
.hero-orbit::before{inset:17%}
.hero-orbit::after{inset:36%}
.hero-spark{right:13%;top:28%;font-size:70px}
#catalog>.section-title h2{font-size:clamp(27px,4vw,38px);letter-spacing:-1.5px}
.search-shell{position:relative;z-index:12}
form#search{min-height:60px;padding:6px 6px 6px 14px;border-color:#465442;border-radius:17px;background:#192219;box-shadow:0 13px 35px #0002;transition:border-color .18s,box-shadow .18s,outline-color .18s}
form#search:focus-within{border-color:#799840;outline:2px solid var(--lime);outline-offset:2px;box-shadow:0 0 0 3px #d1ff2910,0 15px 38px #0003}
.search-icon{flex:0 0 auto;color:#a9b6a5;font-size:25px;line-height:1;transform:rotate(-20deg)}
#query{font-size:15px}
#search button[type=submit]{min-height:46px;padding:10px 18px;border-radius:12px}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;max-height:430px;overflow:auto;padding:7px;border:1px solid #3d4b3a;border-radius:17px;background:#111712f7;box-shadow:0 24px 70px #000b;backdrop-filter:blur(18px)}
.search-result{display:grid;width:100%;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:72px;padding:7px;border:0;border-radius:12px;background:transparent;text-align:left}
.search-result:hover,
.search-result.selected{background:#222e20;color:inherit;box-shadow:none}
.search-result-image{display:block;width:58px;height:58px;object-fit:cover;border-radius:10px;background:#1c261c}
.search-result-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.search-result-copy strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.search-result-copy small{color:var(--muted);font-size:10px}
.search-result-copy b{color:var(--lime);font-size:11px;font-variant-numeric:tabular-nums}
.search-result-arrow{padding:0 8px;color:var(--lime)}
.search-result-status{display:block;padding:18px;color:var(--muted);font-size:12px;text-align:center}
#discover>.section-title{margin-top:34px}
.discovery-grid{gap:20px 16px}
.game-tile{padding:5px;border-radius:19px;transition:transform .18s,background .18s}
.game-tile:hover{background:#192119;transform:translateY(-3px);box-shadow:none}
.game-art{border:1px solid #364337;box-shadow:0 10px 25px #0003}
.game-tile strong{font-size:12px;color:#e9ede5}
#quick-tasks{margin:34px 0;padding:23px;border-color:#354333;border-radius:21px;background:linear-gradient(145deg,#1a231a,#111712);box-shadow:inset 0 1px #ffffff08}
.quick-tasks-head h3{font-size:21px}
.quick-tasks-head p{font-size:12px}
.task-grid{gap:12px}
.task-grid button{min-height:92px;padding:15px;border-color:#384637;border-radius:16px;background:#1a231b}
.task-grid button:hover{border-color:#749442;background:#202c20;box-shadow:0 12px 28px #0003}
.task-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#35472a,#25331f)}
.catalog-tools{margin-top:30px;padding-top:18px}
.card{border-color:#2e3a2f;background:linear-gradient(180deg,#192119,#151c16);box-shadow:0 8px 24px #0002}
.card-media{background:#0f1510}
.card-image{transition:transform .22s ease,filter .22s ease}
.card .card-body>strong{color:#f4f6ef}
.card-price b{color:var(--lime);font-size:16px}
.card-cta{color:#cce78e}
.trust-strip article{min-height:78px;background:linear-gradient(145deg,#182019,#121713);box-shadow:inset 0 1px #ffffff06}
button{transition:color .18s,background-color .18s,border-color .18s,box-shadow .18s,transform .18s}
input::placeholder{color:#7f8c7e;opacity:1}
@media(min-width:1280px){header,main{max-width:1280px}
.store-hero{min-height:385px}
.grid{gap:18px}
#cards[data-layout="grid"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{padding:10px}}
@media(min-width:650px) and (max-width:1024px){.store-hero{min-height:300px;padding:38px 34px;background-position:68% 50%}
.store-hero h1{font-size:48px}
.hero-copy{max-width:480px}
.header-categories{display:none}
.discovery-grid{overflow-x:auto;grid-template-columns:repeat(8,84px);padding:2px 2px 12px;scroll-snap-type:x proximity}
.game-tile{scroll-snap-align:start}
.task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:649px){header{min-height:66px;padding:12px 16px}
.header-categories{display:none}
.store-hero{min-height:310px;margin-top:4px;padding:30px 22px;background-position:70% 50%;border-radius:22px}
.store-hero::after{background:linear-gradient(90deg,#090d09fa 0%,#090d09ea 68%,#090d0988)}
.store-hero h1{max-width:330px;font-size:39px;line-height:1.01;letter-spacing:-2px}
.store-hero p{max-width:315px;font-size:13px}
.hero-visual{inset:0}
.hero-orbit{right:-10%;top:6%;width:150px;opacity:.55}
.hero-spark{right:3%;top:15%;font-size:47px}
.hero-proof{gap:7px 12px;margin-top:18px}
.hero-proof span:nth-child(3){display:none}
.hero-actions{display:grid;grid-template-columns:1fr 1fr}
.hero-actions button{min-height:47px;padding:10px;font-size:11px}
#catalog>.section-title h2{font-size:29px}
.search-shell{z-index:25}
form#search{min-height:56px;padding-left:11px}
.search-icon{font-size:21px}
#query{padding-left:7px;font-size:13px}
#search button[type=submit]{padding:9px 13px}
.search-results{position:fixed;top:74px;left:10px;right:10px;max-height:min(62dvh,460px)}
#discover>.section-title{margin-top:28px}
.discovery-grid{display:flex;gap:12px;overflow-x:auto;margin-right:-16px;padding:3px 16px 13px 0;scroll-snap-type:x mandatory}
.game-tile{flex:0 0 76px;scroll-snap-align:start}
.game-tile strong{font-size:10px}
.game-art{border-radius:19px}
#quick-tasks{margin:26px 0;padding:15px}
.quick-tasks-head h3{font-size:18px}
.task-grid{grid-template-columns:1fr}
.task-grid button{min-height:70px;padding:12px}
.task-icon{width:38px;height:38px}
.catalog-tools{margin-top:24px}
.fact-row{grid-template-columns:1fr;gap:4px}
.fact-row small{font-size:10px}
.fact-row strong{font-size:13px}}
@media(max-width:360px){.store-hero{min-height:295px;padding:25px 17px}
.store-hero h1{font-size:34px}
.hero-actions{grid-template-columns:1fr}
.hero-actions button{min-height:44px}
.hero-proof{display:none}
form#search{padding-left:9px}
#search button[type=submit]{padding:8px 10px}
.search-icon{display:none}}
/* Telegram viewport insets: controls remain clear of the system header and gesture area. */
header{padding-top:calc(16px + env(safe-area-inset-top,0px))}
.product-screen .modal-head{padding-top:calc(10px + env(safe-area-inset-top,0px))}
@media(max-width:649px){header{padding-top:calc(12px + env(safe-area-inset-top,0px))}
.search-results{top:calc(74px + env(safe-area-inset-top,0px))}}
/* Compact purchase history: one accessible button per order. */
#profile-items .purchase-row{display:grid;grid-template-columns:minmax(0,1fr) auto 12px;align-items:center;gap:14px;width:100%;margin:8px 0;padding:13px 16px;text-align:left;border:1px solid var(--line);border-radius:13px;background:var(--panel);line-height:1.4}
.purchase-row-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.purchase-row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.purchase-row-top b{font-size:14px}
.purchase-row-status{font-size:11px;color:#bccab9}
.purchase-row-description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#e4e9df}
.purchase-row-date{font-size:10px;color:var(--muted)}
.purchase-row-price{white-space:nowrap;font-size:17px;font-variant-numeric:tabular-nums}
.purchase-row-arrow{font-size:24px;color:var(--muted)}@media(max-width:480px){#profile-items .purchase-row{gap:9px;padding:12px}
.purchase-row-top{gap:5px 9px}
.purchase-row-price{font-size:15px}
.purchase-row-description{font-size:11px}
.purchase-row-status{font-size:10px}}
.balance-controls{display:flex;align-items:center;gap:15px}
.balance-controls #balance-topup{min-height:38px;padding:8px 13px;font-size:12px}
.balance-presets{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.balance-presets button{min-height:38px;padding:7px 13px;font-size:12px}
.balance-history-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}
.balance-history-row strong{white-space:nowrap}
#balance-error{font-size:12px;color:#ffb8a8}
#balance-history{font-size:12px;color:var(--muted)}@media(max-width:400px){.balance-controls{gap:8px}
.balance-controls #balance-topup{padding:8px;font-size:11px}}

/* Site-wide testing notice, in document flow so it cannot cover controls. */
#maintenance-banner{box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:16px max(24px,calc((100% - 1644px)/2));background:linear-gradient(110deg,#263315,#172218);border-bottom:1px solid #53682d;color:#f2f7ee;line-height:1.5}
#maintenance-banner[hidden]{display:none!important}
#maintenance-banner strong{font-size:15px}
#maintenance-banner p{margin:3px 0 0;color:#bdcbb1;font-size:13px}
#maintenance-banner .maintenance-symbol{display:grid;place-items:center;flex:0 0 32px;height:32px;border:1px solid #778f38;border-radius:50%;color:#cdff28;font-weight:800}
@media(max-width:600px){#maintenance-banner{padding:12px 16px;align-items:flex-start;gap:10px}#maintenance-banner strong{font-size:14px}#maintenance-banner p{font-size:12px}}

/* customer-journey.css */
.product-at-glance{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1.4fr);gap:10px 16px;margin:16px 0;padding:16px;border:1px solid #3c492b;border-radius:14px;background:#192213}
.product-at-glance dt{font-size:12px;color:var(--muted)}
.product-at-glance dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.inline-help{margin:10px 0;font-size:13px}
.inline-help summary{cursor:pointer;color:var(--lime);padding:5px 0}
.inline-help p{color:#c8d2c5;line-height:1.6}
.order-summary,
.order-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.order-summary>strong{font-size:26px}
.order-status{font-size:12px;color:var(--lime)}
.order-toolbar small{color:var(--muted)}
.order-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:24px 0}
.order-progress li{border-top:3px solid #354039;padding-top:10px;display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--muted)}
.order-progress li.done{border-color:var(--lime);color:#f5f5ec}
.order-progress li[aria-current=step] small{color:var(--lime)}
.order-progress li>span{width:25px;height:25px;border:1px solid #46513c;border-radius:50%;display:grid;place-items:center;font-size:12px}
.order-progress li.done>span{background:var(--lime);color:#11170b}
.order-progress small{font-size:11px;overflow-wrap:anywhere}
.order-explanation{color:#cbd4c7;font-size:14px}
.order-product-heading{display:flex;align-items:center;gap:12px}
.order-product-heading img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex-shrink:0}
.order-product{margin:14px 0}
.order-product>small{display:block;margin:4px 0}
.received-code{display:grid;gap:10px;margin:16px 0;padding:14px;border:1px solid #46522d;border-radius:12px}
.received-code code{display:block;user-select:all;overflow-wrap:anywhere;white-space:pre-wrap;font-size:16px}
.received-code small{color:var(--lime)}
.activation-guide p{white-space:pre-line;font-size:13px;color:#cbd4c7}
.activation-guide summary,
.order-history summary{cursor:pointer;padding:8px 0}
.order-history p{font-size:12px;color:var(--muted)}
.wallet-entry{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0}
.wallet-entry small{color:var(--muted)}
.wallet-entry button{align-self:flex-start}
.account-connection>strong{color:var(--lime)}
.account-connection p{font-size:13px;color:#cbd4c7}
.account-connection details{margin-top:12px;font-size:13px}
#account-filter-wrap{display:block;margin-bottom:14px}
#account-filter-wrap[hidden]{display:none}
#profile-items form{display:grid;gap:8px;margin:10px 0}
#profile-items [data-account-search]>details{margin:10px 0}
#order-result:empty{display:none}
.order-pay-actions{margin:16px 0}
.order-pay-actions small{display:block;margin:8px 0}@media(max-width:420px){.product-at-glance{grid-template-columns:1fr;gap:3px;padding:12px}
.product-at-glance dd{margin-bottom:9px}
.order-progress{gap:5px}
.order-toolbar button{font-size:12px;padding:8px 12px}
.order-summary>strong{font-size:23px}}
.catalog-card-shell{position:relative;min-width:0;display:flex}
.catalog-card-shell>.card{width:100%;height:100%}
.quick-favorite{position:absolute;top:9px;right:9px;min-width:40px;min-height:40px;padding:8px;display:grid;place-items:center;background:#101912eb;border-radius:50%;z-index:1}
.collection-strip>.catalog-card-shell{flex:0 0 230px}
.collection-strip>.catalog-card-shell>.card{flex:1;min-width:0}
.catalog-card-shell .card-body{padding-right:12px}

/* ---------- the order screen, re-stated once ----------
   The page used to say the same thing three times — a gift-box banner
   ("Покупка у тебя"), the explanation under it, and the sealed envelope over
   the code — and hid behind them the one thing the buyer opened it for. */
.order-strip{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:14px 16px;
  background:var(--panel,#111a14);border:1px solid #253127;border-radius:16px;
}
.order-strip-mark{
  flex:none;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:700;
}
.order-strip-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.order-strip-what b{font-size:15px;font-weight:700}
.order-strip-what small{font-size:11.5px;color:var(--muted,#a3b2a0)}
.order-strip-cost{flex:none;text-align:right;display:flex;flex-direction:column;gap:2px}
.order-strip-cost small{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted,#a3b2a0);font-weight:700}
.order-strip-cost b{font-size:17px;font-weight:800;letter-spacing:-.5px}
.order-strip-ok .order-strip-mark{background:rgba(205,255,40,.14);border:1px solid rgba(205,255,40,.4);color:#cdff28}
.order-strip-wait .order-strip-mark{background:rgba(240,220,166,.12);border:1px solid rgba(240,220,166,.38);color:#f0dca6}
.order-strip-bad{border-color:rgba(221,95,88,.45);background:rgba(221,95,88,.08)}
.order-strip-bad .order-strip-mark{background:rgba(221,95,88,.16);border:1px solid rgba(221,95,88,.45);color:#ff9b95}
.order-strip-bad .order-strip-what b{color:#ffb7b2}
.order-strip-off .order-strip-mark{background:#1d2720;border:1px solid #31402f;color:#a3b2a0}

/* The code is the point of the page, so it is labelled and shown. */
.order-code-label{
  margin:16px 0 7px;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted,#a3b2a0);font-weight:700;
}
#order-body .received-code{
  margin:0 0 10px;border:1px solid rgba(205,255,40,.35);background:rgba(205,255,40,.06);border-radius:13px;
}
#order-body .received-code code{
  background:transparent;border:0;padding:0;
  font:700 18px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.5px;color:#e9ffb0;
}
#order-body .received-code button{min-height:46px}


/* Copying the code is the one thing to do on a finished order. */
#order-body .received-code>button:not(.quiet){
  background:var(--lime,#cdff28);border-color:var(--lime,#cdff28);color:#16210a;font-weight:700;
}
#order-body .received-code>button:not(.quiet):hover{filter:brightness(1.07)}

/* Links inside the activation guide: the site's own colour, and long help
   URLs break instead of pushing the card sideways. */
#order-body .activation-guide a{
  color:var(--lime,#cdff28);text-decoration:underline;overflow-wrap:anywhere;
}
#order-body .activation-guide a:hover{color:#e2ff7a}

/* The status line is always in the DOM for screen readers; empty it takes no room. */
#order-result:empty{display:none}

/* A help link inside running text is read, not tapped at arm's length, so it
   keeps the line height of the text around it but gets a comfortable hit box. */
#order-body .activation-guide a{display:inline-block;padding:3px 0}

/* compact-store.css */
/* Approved compact storefront. The header,
hero,
search and discovery stay independent. */
#cards{--compact-radius:21px;gap:16px;margin-top:18px}
#cards .catalog-card-shell{height:100%;min-width:0}
#cards .card{border:1px solid #2c362d;border-radius:var(--compact-radius);background:#151b16;box-shadow:none;padding:0;overflow:hidden;gap:0;transition:border-color .18s,transform .18s}
#cards .card:hover{border-color:#647541;background:#181f18;transform:translateY(-2px)}
#cards .card-media{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1.7;background:#101713;overflow:hidden;border-radius:0}
#cards .card-image{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;filter:none;padding:0;transform:none}
#cards .card-image[src*="/art/games/mobile-"],
#cards .card-image[src*="/art/games/brand-"],
#cards .card-image[src*="/art/product.svg"]{object-fit:contain;padding:12px;background:#101713}
#cards .card-body{padding:15px 16px 17px;gap:7px;flex:1}
#cards .card .card-body>strong{margin:0;min-height:0;font-size:15px;font-weight:650;line-height:1.35;-webkit-line-clamp:2;color:#f4f6ee}
#cards .card-meta{margin:0}
#cards .card .card-meta .type-chip{padding:0;background:none;border:0;font-size:11px;color:#a4afa2;line-height:1.5;min-height:0}
#cards .card-detail{font-size:11px;color:#a4afa2;line-height:1.45}
#cards .card-price{display:flex;align-items:baseline;gap:5px;width:100%;margin-top:auto;padding-top:12px}
#cards .card-price small{height:auto;font-size:11px;color:#a4afa2}
#cards .card-price b{color:#f4f6ee;font-size:19px;font-weight:650}
#cards .card-cta{font-size:11px;color:#bdcba6;margin-top:2px}
#cards .quick-favorite{width:38px;height:38px;min-height:38px;top:10px;right:10px;padding:9px;border-radius:50%;background:#101710e8;border:1px solid #ffffff1a;box-shadow:none}
#cards .quick-favorite:hover{background:#263324}
#cards .card.skeleton{min-height:280px}
.collection-strip>.catalog-card-shell{flex-basis:190px}
.collection-strip>.catalog-card-shell>.card{border-radius:21px;background:#151b16;border-color:#2c362d;box-shadow:none}
/* Product content: concise summary,
compact denomination picker,
full conditions retained. */
#detail{--compact-radius:21px;background:#0c100d;padding-bottom:calc(110px + env(safe-area-inset-bottom));scroll-padding-top:80px}
#detail .product-shell{max-width:1020px;padding:0 26px 28px}
#detail #product-breadcrumb{font-size:11px;color:#a4afa2;margin:15px 0 6px}
#detail .modal-head{background:#0c100df5;margin-bottom:24px;border-color:#2c362d}
#detail #product-image{display:block;max-width:100%;width:100%;height:260px;max-height:260px;aspect-ratio:auto;object-fit:contain;filter:none;padding:18px;background:#111713;border:1px solid #2c362d;border-radius:21px;box-shadow:none;margin:0 0 20px}
#detail .product-body{min-width:0}
#detail .product-body>.section-title{align-items:flex-start;margin:0 0 8px;gap:12px}
#detail #product-title{font-size:30px;line-height:1.15;letter-spacing:-.8px;margin:0;flex:1 1 160px}
#detail .product-tools{flex-shrink:0}
#detail .product-tools button{border-radius:12px;color:#a4afa2}
#detail #product-type{background:none;border:0;color:#a4afa2;padding:0;font-size:12px;margin:4px 0}
#detail #product-step{font-size:12px;color:#bdcba6;margin:14px 0 12px}
#detail #selected-region{border:0;padding:0;background:none;font-size:12px;color:#c7d5b4;margin:0 0 12px}
#detail .product-at-glance{background:transparent;border:0;border-top:1px solid #2c362d;border-bottom:1px solid #2c362d;border-radius:0;padding:15px 0;margin:14px 0 8px;grid-template-columns:105px minmax(0,1fr);gap:10px 16px}
#detail .product-at-glance dt{font-size:12px;color:#a4afa2}
#detail .product-at-glance dd{font-size:12px;line-height:1.55;color:#e8eee1;margin:0}
#detail .inline-help{font-size:12px;margin:8px 0}
#detail .inline-help summary{padding:8px 0;min-height:32px;color:#cbd5bf}
#detail .inline-help p{font-size:12px;line-height:1.6}
#detail #product-brief>.hint{font-size:12px;margin:12px 0}
#detail #offers.offer-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}
#detail #offer-picker-title{font-size:13px;line-height:1.5;font-weight:600;margin:20px 0 10px;color:#e8eee1}
#detail #offers.region-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
#detail .region-choice{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;min-height:82px;border:1px solid #2c362d;border-radius:16px;background:#151b16;margin:0;min-width:0;box-shadow:none}
#detail .region-choice:hover{border-color:#647541;background:#1b2519}
#detail .region-choice-code{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:10px;background:#25321f;color:#cbeaa4;font-size:11px;font-weight:650}
#detail .region-choice-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
#detail .region-choice-copy strong{font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;white-space:normal}
#detail .region-choice-copy small{font-size:11px;color:#a4afa2;line-height:1.4}
#detail .region-choice-arrow{margin-left:auto;flex-shrink:0;color:#b9d288}
@media(max-width:420px){#detail .region-choice{padding:12px;gap:9px}
#detail .region-choice-code{flex-basis:28px;height:30px;font-size:10px}
#detail .region-choice-arrow{display:none}
#detail .region-choice-copy strong{font-size:12px}}
@media(max-width:350px){#detail #offers.region-tiles{grid-template-columns:1fr}}
#detail .offer-tile{min-height:82px;padding:12px;border-radius:13px;gap:5px;background:#151b16;border:1px solid #2c362d;box-shadow:none}
#detail #offers .offer-tile strong{font-size:14px;line-height:1.35;font-weight:600;padding-right:18px;color:#f4f6ee}
#detail .offer-tile small{font-size:11px;color:#a4afa2}
#detail .offer-tile .tile-price{font-size:13px;color:#bfcab9;margin-top:3px}
#detail .offer-tile.selected{border-color:var(--lime);background:#202a16;box-shadow:none}
#detail #offers .offer-tile.selected strong{color:var(--lime)}
#detail .offer-tile>.icon{top:12px;right:10px;width:14px;height:14px}
#detail #buyer{border:0;margin:20px 0 0;padding:0;scroll-margin-top:85px}
#detail #offer-title,
#detail #price{display:none}
#detail #facts{padding:0;background:transparent;border:0;border-radius:0;margin:0 0 18px;gap:0}
#detail .fact-row{padding:10px 0;border-color:#2c362d;grid-template-columns:105px minmax(0,1fr);gap:16px}
#detail .fact-row strong{font-size:12px;font-weight:500}
#detail .fact-row small{font-size:11px;color:#a4afa2}
#detail #fields label{display:block;font-size:13px;margin:14px 0}
#detail #fields label>small{display:block;margin:5px 0;color:#a4afa2;font-size:11px}
#detail #fields input,
#detail #fields select,
#detail #saved-account{min-height:46px;border-radius:12px;background:#151b16;border-color:#354039;font-size:16px}
#detail #buyer>.hint{font-size:11px;color:#a4afa2}
#detail #form-error{font-size:12px;line-height:1.6}
#detail .product-action{border-color:#2c362d;background:#151b16f5;box-shadow:none}
#detail #action-price{font-size:27px;font-weight:700;color:#f4f6ee}
#detail #action-caption{font-size:11px;color:#a4afa2}
#detail #add{border-radius:13px;min-height:48px;font-size:13px;font-weight:650}
#detail #add[aria-busy="true"]{cursor:wait}
@media(min-width:650px){#cards[data-layout="grid"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){#cards[data-layout="grid"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px){
 #detail{padding-bottom:32px}
#detail .product-shell{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);gap:0 34px}
#detail #product-breadcrumb,
#detail .modal-head{grid-column:1/-1}
#detail #product-image{grid-column:1;grid-row:3;align-self:start;height:280px;max-height:280px;margin:0;position:sticky;top:90px}
#detail .product-body{grid-column:2;grid-row:3}
#detail .product-action{position:static;inset:auto;max-width:none;margin:24px 0 0;padding:20px 0 0;border:0;border-top:1px solid #2c362d;border-radius:0;background:transparent;backdrop-filter:none;gap:22px}
#detail .product-action>div{max-width:170px;min-width:110px}
#detail .product-action button{min-width:0}
}
@media(max-width:649px){
 #cards{gap:12px;margin-top:14px}
#cards[data-layout="grid"]{grid-template-columns:repeat(2,minmax(0,1fr))}
#cards .card-media{aspect-ratio:1.35}
#cards .card-body{padding:12px;gap:6px}
#cards .card .card-body>strong{font-size:13px;line-height:1.4;min-height:36px}
#cards .card-price{padding-top:6px;gap:4px}
#cards .card-price b{font-size:17px}
#cards .card-cta{font-size:11px}
#cards .quick-favorite{width:36px;height:36px;min-height:36px;top:8px;right:8px;padding:8px}
#detail .product-shell{padding:0 16px 15px}
#detail .modal-head{margin-bottom:16px}
#detail #product-image{width:100%;height:135px;max-height:135px;padding:8px;margin:0 0 18px;border-radius:21px}
#detail #product-title{font-size:25px}
#detail .product-at-glance{grid-template-columns:85px minmax(0,1fr);gap:8px 12px}
#detail .fact-row{grid-template-columns:85px minmax(0,1fr);gap:12px}
#detail #offers.offer-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#detail .offer-tile{min-height:80px;padding:11px}
#detail .product-action{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:14px}
#detail #action-price{font-size:23px}
#detail #add{font-size:12px;padding:11px;min-height:48px}
}
@media(max-width:360px){#cards .card-body{padding:10px}
#cards .card-price{flex-wrap:wrap}
#cards .card-price b{font-size:16px}
#detail .product-tools #share span{display:none}
#detail .product-at-glance{grid-template-columns:1fr;gap:3px}
#detail .product-at-glance dd{margin-bottom:8px}
#detail .fact-row{grid-template-columns:1fr;gap:4px}
#detail #action-price{font-size:21px}}
@media(prefers-reduced-motion:reduce){#cards .card{transition:none}
#cards .card:hover{transform:none}}

/* unified-navigation.css */
/* Unified navigation replaces the quick-action cards and category dropdown. */
#quick-tasks{margin:30px 0 24px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#quick-tasks .unified-heading{margin-bottom:16px}
#quick-tasks .unified-heading h3{margin:0 0 6px;font-size:23px;line-height:1.25;letter-spacing:-.6px}
#quick-tasks .unified-heading p{margin:0;color:var(--muted);font-size:12px}
#quick-tasks .unified-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);gap:0;margin-bottom:20px}
#quick-tasks .unified-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:64px;padding:14px 8px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;box-shadow:none}
#quick-tasks .unified-tabs button:hover{background:#182018;color:#eef4e7;transform:none}
#quick-tasks .unified-tabs button[aria-pressed="true"]{border-bottom-color:var(--lime);color:var(--lime);background:#192315}
#quick-tasks .unified-tab-icon{font-size:18px;line-height:1;flex:0 0 22px;color:inherit;text-align:center}
#quick-tasks .unified-content{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #303c2d;background:#171f18;border-radius:21px;padding:22px;min-height:138px}
#quick-tasks .unified-copy{min-width:0}
#quick-tasks #unified-title{font-size:19px;line-height:1.3;margin:0 0 7px;letter-spacing:-.4px}
#quick-tasks #unified-description{font-size:12px;color:var(--muted);margin:0;line-height:1.6;max-width:560px}
#quick-tasks #unified-go{min-height:46px;padding:12px 18px;border-radius:12px;font-size:12px;white-space:nowrap;flex-shrink:0;font-weight:650}
#quick-tasks #unified-choices{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
#quick-tasks #unified-choices button{min-height:36px;padding:7px 11px;border:1px solid #415139;border-radius:10px;background:transparent;font-size:11px;color:#d9e2d1;box-shadow:none}
#quick-tasks #unified-choices button[aria-pressed="true"]{border-color:#78954a;color:var(--lime);background:#27351e}
#quick-tasks .unified-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
#quick-tasks #suggestions{gap:6px;margin:0;padding:0;flex-wrap:wrap;overflow:visible}
#quick-tasks #suggestions button{min-height:35px;font-size:11px;padding:7px 12px;background:transparent;border-color:#34412e}
#quick-tasks #shelves{display:flex;gap:4px;flex-wrap:wrap}
#quick-tasks #shelves button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 10px;border-radius:11px;font-size:11px;color:var(--muted);background:transparent;border:1px solid transparent}
#quick-tasks #shelves button[aria-pressed="true"]{background:#27351e;color:var(--lime);border-color:#425435}
#quick-tasks #shelves .icon{width:16px;height:16px}
.catalog-tools{display:none!important}
#quick-tasks.unified-limited>.unified-heading,#quick-tasks.unified-limited>.unified-tabs,#quick-tasks.unified-limited>.unified-content{display:none}
#quick-tasks.unified-limited .unified-footer{margin-top:0;padding-top:0;border:0}
#catalog-display-anchor{scroll-margin-top:30px}
@media(max-width:649px){
 #quick-tasks{margin:25px 0 20px}
 #quick-tasks .unified-heading h3{font-size:21px}
 #quick-tasks .unified-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border:0;margin-bottom:14px}
 #quick-tasks .unified-tabs button{border:1px solid #303c2d;border-radius:12px;min-height:54px;padding:10px 8px;font-size:12px;line-height:1.4;text-align:center}
 #quick-tasks .unified-tabs button[aria-pressed="true"]{border-color:#7b9b42;background:#25331b}
 #quick-tasks .unified-content{flex-direction:column;align-items:stretch;gap:17px;padding:18px;min-height:0}
 #quick-tasks #unified-title{font-size:18px}
 #quick-tasks #unified-go{width:100%;min-height:46px}
 #quick-tasks .unified-footer{align-items:flex-start;gap:13px}
 #quick-tasks #shelves{gap:4px}
 #quick-tasks #shelves button{min-height:44px;padding:8px 11px;border-color:#303c2d}
 #quick-tasks #suggestions button{min-height:38px}
}
@media(max-width:360px){#quick-tasks .unified-tabs button{gap:5px;font-size:11px}#quick-tasks .unified-tab-icon{flex-basis:18px;font-size:16px}}

/* hero-collections.css */
/* Collections hero: one main banner and two direct service entries. */
#store-hero.hero-collections{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;min-height:0;margin:14px 0 32px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
#store-hero.hero-collections::before,#store-hero.hero-collections::after{display:none}
#store-hero.hero-collections>div{max-width:none;min-width:0}
.hero-collections .hero-feature{display:flex;align-items:center;min-height:340px;padding:34px;border:1px solid #3b4935;border-radius:21px;background:linear-gradient(90deg,#090f09f5 0%,#0c140ce0 45%,#0c140c40 100%),url('/art/catalog.png') 66% 50%/cover no-repeat;overflow:hidden}
.hero-collections .hero-copy{max-width:390px}
#store-hero.hero-collections h1{max-width:390px;font-size:clamp(34px,3.7vw,49px);line-height:1.04;letter-spacing:-1.7px;margin:14px 0 18px}
#store-hero.hero-collections p{font-size:14px;line-height:1.6;max-width:340px}
.hero-collections .hero-actions{display:flex;margin-top:22px}
.hero-collections .hero-actions button{min-height:48px;padding:12px 18px}
.hero-collection-links{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.hero-collection{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;overflow:hidden;padding:24px;border:1px solid #3b4935;border-radius:21px;background:#1b2918}
.hero-collection--steam{background:#18251f}
.hero-collection h2{position:relative;z-index:1;margin:0 0 7px;font-size:24px;line-height:1.2;letter-spacing:-.5px;max-width:75%}
#store-hero .hero-collection p{position:relative;z-index:1;max-width:72%;font-size:12px;color:#bac8b2;margin:0 0 12px}
.hero-collection img{position:absolute;z-index:-1;right:-12px;bottom:12px;width:112px;height:112px;object-fit:cover;border-radius:23px;transform:rotate(-14deg);opacity:.7;pointer-events:none}
.hero-collection button{position:relative;z-index:1;min-height:40px;padding:6px 0;border:0;border-radius:0;background:transparent;color:var(--lime);font-size:13px;font-weight:650;text-align:left}
.hero-collection button:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
@media(min-width:1280px){.hero-collections .hero-feature{min-height:360px}}
@media(min-width:650px) and (max-width:900px){#store-hero.hero-collections{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.hero-collections .hero-feature{padding:26px}.hero-collection{padding:20px}.hero-collection h2{font-size:21px}.hero-collection img{width:88px;height:88px;opacity:.35}}
@media(max-width:649px){#store-hero.hero-collections{grid-template-columns:1fr;gap:12px;margin:4px 0 25px}.hero-collections .hero-feature{min-height:265px;padding:26px 22px;background-position:70% 50%}#store-hero.hero-collections h1{font-size:35px;letter-spacing:-1.5px;max-width:320px}#store-hero.hero-collections p{font-size:13px}.hero-collections .hero-actions{display:flex;margin-top:19px}.hero-collections .hero-actions button{font-size:12px;padding:12px 16px}.hero-collection-links{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:12px}.hero-collection{padding:17px;min-height:164px}.hero-collection h2{font-size:19px;max-width:100%}#store-hero .hero-collection p{max-width:100%;font-size:12px}.hero-collection img{width:78px;height:78px;opacity:.18;right:-8px;bottom:8px}.hero-collection button{font-size:12px;min-height:44px}}
@media(max-width:360px){.hero-collections .hero-feature{padding:23px 18px}#store-hero.hero-collections h1{font-size:31px}.hero-collection{padding:14px}.hero-collection h2{font-size:17px}.hero-collection-links{gap:10px}}

/* cart-summary.css */
/* Approved cart layout: emphasize the total, keep products editable alongside it. */
#basket{max-width:1100px;margin:26px auto}
#basket>.section-title{gap:16px;align-items:center;margin:0 0 24px}
#basket>.section-title h2{font-size:32px;margin:0 0 8px;line-height:1.15}
#basket>.section-title p{margin:0}
.basket-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
.basket-summary{min-width:0;padding:30px;border:1px solid #465436;border-radius:21px;background:linear-gradient(140deg,#25341c,#131e13)}
.basket-summary h3{margin:0 0 14px;font-size:20px}
.basket-summary #total{font-size:clamp(32px,4.7vw,56px);line-height:1.15;font-weight:750;color:var(--lime);margin:0 0 24px;overflow-wrap:anywhere}
.basket-summary #total.total-message{font-size:23px;line-height:1.4}
.basket-summary #basket-count{margin:0 0 16px;color:#bac8ad;font-size:13px}
.basket-promo{border-top:1px solid #3a4831;padding-top:13px;margin:0 0 18px}
.basket-promo>summary{font-size:13px;color:#d2ddc5;cursor:pointer;padding:7px 0;min-height:36px}
#basket #coupon-form{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
#basket #coupon-code{flex:1 1 150px;min-width:0;width:auto;font-size:16px}
#basket #coupon-form button{padding:10px 13px;font-size:12px}
#basket #discount-note:empty{display:none}
#basket #discount-note{overflow-wrap:anywhere}
#basket #to-bot{display:block;width:100%;margin:0;min-height:52px;font-size:14px;border-radius:13px}
.basket-payment-note{font-size:12px;line-height:1.65;color:#b2c0a8;margin:15px 0 0}
.basket-products{min-width:0}
#basket #cart-items{display:grid;gap:13px}
#basket .cart-product{margin:0;padding:18px;border-radius:21px;border:1px solid #33402f;background:#172018;min-width:0}
#basket .cart-product-head{gap:13px}
#basket .cart-product-head>.basket-image{flex:0 0 58px;width:58px;height:58px;border-radius:13px}
#basket .cart-product-info>b{font-size:15px;line-height:1.4}
#basket .cart-product-info>strong{font-size:19px;margin:10px 0 6px}
#basket .cart-product-info>small{font-size:12px;line-height:1.6}
#basket .cart-product .quantity{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:13px 0 0}
#basket .cart-product .quantity button{min-height:40px;padding:7px 13px;border-radius:10px;font-size:12px}
#basket .cart-product .quantity button.quiet{color:#b4c0aa;background:transparent;border-color:transparent}
#basket .cart-product>details{margin-top:13px;padding-top:10px}
#basket .cart-product>details summary{min-height:36px;padding:5px 0;cursor:pointer}
#basket .cart-product>details form{padding-top:8px}
#basket .cart-product>button.wide{width:auto;min-height:40px;padding:8px 0;margin:8px 0 0;background:transparent;border-color:transparent;font-size:12px;color:#c7d8ae}
#basket #continue-shopping{display:block;width:auto;margin:16px 0 0;padding:10px 0;border-color:transparent;background:transparent;font-size:13px;color:#bdcaaa;text-align:left}
#basket .empty{margin:0}
@media(max-width:749px){#basket{margin:20px 0}#basket>.section-title h2{font-size:28px}#basket>.section-title .pill{max-width:110px;text-align:center}.basket-layout{grid-template-columns:1fr;gap:20px}.basket-summary{order:2;padding:24px}.basket-products{order:1}.basket-summary #total{font-size:44px}.basket-summary #total.total-message{font-size:22px}#basket .cart-product-head>.basket-image{flex-basis:54px;width:54px;height:54px}#basket .cart-product .quantity button{min-height:44px}#basket .cart-product>details summary{min-height:44px}#basket .cart-product>button.wide{min-height:44px}}
@media(max-width:360px){.basket-summary{padding:20px}.basket-summary #total{font-size:38px}#basket .cart-product{padding:15px}#basket .cart-product-head{gap:10px}}

/* profile-overview.css */
/* Profile overview: balance and purchases alongside level and sign-in services. */
#profile{max-width:1100px;margin:26px auto}
#profile .profile-head{margin:0 0 26px;gap:15px;align-items:center}
#profile #profile-avatar{flex:0 0 56px;width:56px;height:56px;border-radius:17px;background:#293a1c;color:var(--lime)}
#profile .profile-head h2{font-size:30px;margin:5px 0 6px;line-height:1.15}
#profile #account-identity{margin:0;font-size:12px;overflow-wrap:anywhere}
.profile-overview{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start}
.profile-main,.profile-sidebar{min-width:0}
.profile-sidebar{display:grid;gap:16px}
#profile .profile-balance{display:block;border:1px solid #4b5d35;border-radius:21px;padding:26px;background:linear-gradient(130deg,#293b1d,#141f14)}
#profile .profile-balance>span{font-size:13px;color:#c1cdb6}
#profile .balance-controls{display:flex;align-items:flex-start;flex-direction:column;gap:20px;margin-top:15px}
#profile .profile-balance #balance{font-size:clamp(35px,4.4vw,49px);font-weight:750;line-height:1.15;letter-spacing:-1.8px;overflow-wrap:anywhere}
#profile #balance-topup{min-height:46px;min-width:155px;padding:11px 18px;border-radius:12px;font-size:14px}
#profile .profile-actions{margin:20px 0 12px;gap:10px}
#profile .profile-actions button{font-size:12px;border-radius:12px}
#profile #profile-tabs{margin:16px 0 8px;gap:8px}
#profile #profile-tabs button{font-size:13px;min-height:44px}
#profile #profile-note{font-size:12px;line-height:1.6;margin:10px 0 15px}
#profile #profile-items .purchase-row{border-radius:15px;padding:15px 13px;gap:10px}
#profile #profile-items .purchase-row-description{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#profile #profile-items .purchase-row-date{font-size:11px}
#profile #profile-items .purchase-row-price{font-size:16px}
#profile .profile-sidebar>.panel{margin:0;padding:22px;border-radius:21px;border:1px solid #33402f;background:#172018}
#profile .level-panel{gap:12px}
#profile .level-panel>b{color:var(--lime);font-size:18px}
#profile .level-panel>small{font-size:12px;color:#b6c3ab;line-height:1.6}
#profile .level-panel progress{height:7px;accent-color:var(--lime)}
#profile .level-panel details{margin-top:0;font-size:12px}
#profile .level-panel summary{min-height:40px;padding:10px 0;color:#d1dfbe}
#profile .level-panel details h4{font-size:13px;margin:17px 0 7px}
#profile .level-panel details small{font-size:12px;color:#b8c6ad;line-height:1.6}
#profile .level-panel details p{font-size:12px;color:#aaba9e}
#profile #identity-settings h3{font-size:17px;margin-bottom:9px}
#profile #identity-settings>p{font-size:12px;line-height:1.6}
#profile .identity-row{grid-template-columns:34px minmax(0,1fr);gap:9px;padding:14px 0}
#profile .identity-logo{width:34px;height:34px;border-radius:10px}
#profile .identity-copy b{font-size:13px}
#profile .identity-copy small{font-size:11px;line-height:1.6;overflow-wrap:anywhere}
#profile .identity-row button{grid-column:2;justify-self:start;font-size:11px;min-height:36px;padding:6px 10px;margin-top:2px}
#profile #account-connection>strong{font-size:16px;line-height:1.4;display:block}
#profile #account-connection p{font-size:12px;line-height:1.65;margin:10px 0 12px}
#profile #account-connection>.wide{width:auto;font-size:12px;min-height:42px;padding:8px 12px}
#profile #support{font-size:13px;border-radius:12px;margin-top:17px}
#profile .profile-footer{margin-top:22px;padding-top:15px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#profile .profile-footer .wide{width:auto;margin:0;font-size:12px;padding:10px 14px;min-height:42px;background:transparent;border:1px solid #35432d;border-radius:11px;color:#bbcbaa}
@media(max-width:749px){#profile{margin:20px 0}#profile .profile-head h2{font-size:26px}.profile-overview{grid-template-columns:1fr;gap:24px}#profile .profile-balance{padding:23px}#profile .balance-controls{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}#profile .profile-balance #balance{font-size:35px}#profile #balance-topup{min-width:0;font-size:12px;padding:11px 13px}#profile .identity-row{grid-template-columns:34px minmax(0,1fr) auto}#profile .identity-row button{grid-column:auto;min-height:44px}#profile .profile-sidebar>.panel{padding:21px}#profile .profile-footer .wide{min-height:44px}#profile .level-panel summary{min-height:44px}}
@media(max-width:360px){#profile .profile-head h2{font-size:23px}#profile .profile-balance #balance{font-size:30px}#profile .balance-controls{flex-wrap:wrap}#profile #profile-items .purchase-row{gap:8px;padding:13px 11px}#profile #profile-items .purchase-row-price{font-size:14px}#profile .identity-row{grid-template-columns:30px minmax(0,1fr)}#profile .identity-row button{grid-column:2}}

/* portal.css */
/* Approved portal landing and service list,
using the live shop's data and actions. */
:root{--portal-accent:#caff25;--lime:#caff25;--bg:#090f12;--panel:#152019;--line:#30402d;--muted:#a4b39e}
body{background:radial-gradient(ellipse at 100% 0,#6e8b2412,transparent 600px),#090f12}
body>header,
body>main{max-width:1280px}
body>header{padding:23px 5%;gap:20px}
body>main{padding:0 5% 45px}
#store-hero,
#quick-tasks,
#suggestions,
#layout-toggle,
.trust-strip{display:none!important}
body.portal-home>main>#catalog,
body.portal-home>main>#basket,
body.portal-home>main>#profile,
body.portal-home>main>#last-orders,
body.portal-home>nav{display:none!important}
#portal-landing{position:relative;isolation:isolate;min-height:670px;margin:0 calc(-5% - 1px);padding:90px 7% 180px;overflow:hidden;background:#070d10}
#portal-landing[hidden]{display:none}
#portal-landing .portal-copy{position:relative;z-index:3;max-width:610px}
#portal-landing .portal-eyebrow{font-size:10px;letter-spacing:3px;color:#baccaa;font-weight:650}
#portal-landing h1{font-size:clamp(40px,5.8vw,68px);line-height:1.08;letter-spacing:-2.8px;margin:22px 0 25px;font-weight:800;color:#f3f6ed}
#portal-landing h1 span{color:var(--portal-accent);display:block}
#portal-landing .portal-copy>p{font-size:14px;line-height:1.85;color:#b8c7ba;max-width:460px;margin:0 0 30px}
#portal-landing .portal-actions{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:25px;align-items:flex-start}
#portal-landing .portal-actions button{width:190px;height:54px;min-height:54px;margin:0;padding:0 20px;display:flex;align-items:center;justify-content:center;border-radius:40px;font-size:13px;font-weight:700;border:1px solid #ffffff20;background:#273035;color:#f2f5ee;line-height:1.2;position:relative;overflow:visible}
#portal-landing .portal-actions .accent{background:linear-gradient(155deg,#e6ff9b,#caff25 55%,#92ce25);color:#142100;border-color:#dcff83;box-shadow:0 0 30px #caff252a,inset 0 2px 0 #f2ffb3}
#portal-landing .portal-bottom{position:absolute;z-index:3;bottom:30px;left:7%;display:flex;gap:25px;font-size:11px;color:#b1c3a7;flex-wrap:wrap}
#portal-landing .portal-bottom span:before{content:'✓';color:var(--portal-accent);margin-right:7px}
.portal-scene{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 85% 48%,#a3d73c23,transparent 46%),#080e0f}
.portal-ribbon{position:absolute;left:48%;bottom:-60px;width:750px;height:650px;border-radius:50%;border:42px solid #8acc2720;border-top-color:#caff2560;transform:rotate(-25deg) rotateX(45deg);box-shadow:0 -18px 60px #caff2510;animation:portal-breathe 8s ease-in-out infinite alternate}
.portal-float{position:absolute;right:15%;top:120px;transform:translate(calc(var(--mx,0px)*-1),calc(var(--my,0px)*-1));transition:transform .6s ease-out}
.portal-float.two{right:5%;top:305px}
.portal-float.three{right:32%;top:390px;scale:.7}
.portal-object{width:130px;height:166px;border-radius:25px;background:linear-gradient(135deg,#efffb150,#73992744 25%,#101b16 70%);border:1px solid #d7ff7455;box-shadow:inset 3px 3px 10px #e1ff7970,inset -8px -8px 18px #0008,0 20px 50px #0009;display:grid;place-items:center;animation:portal-float 7s ease-in-out infinite;rotate:-18deg}
.portal-object img{width:75px;height:75px;border-radius:18px}
.portal-float.two .portal-object{animation-delay:-3s;rotate:18deg}
.portal-float.three .portal-object{animation-delay:-1s}
.portal-castle,
.portal-ghost,
.portal-moon,
.portal-flame{display:none}
.portal-fog{position:absolute;bottom:55px;left:-25%;width:150%;height:140px;background:radial-gradient(ellipse,#b1cfd42b,transparent 65%);filter:blur(18px);animation:portal-fog 13s ease-in-out infinite alternate}
.portal-fog.second{bottom:0;animation-delay:-6s;opacity:.5}
.portal-particles{position:absolute;inset:0;background-image:radial-gradient(circle,#caff2580 1px,transparent 2px);background-size:137px 119px;opacity:.25;mask-image:linear-gradient(90deg,transparent 35%,#000);animation:portal-particles 12s ease-in-out infinite alternate}
body[data-season=halloween] #portal-landing{min-height:690px;padding-top:95px}
body[data-season=halloween] #portal-landing .portal-copy{margin:auto;text-align:center;max-width:650px;text-shadow:0 3px 22px #000}
body[data-season=halloween] #portal-landing .portal-copy>p{margin-left:auto;margin-right:auto}
body[data-season=halloween] #portal-landing .portal-actions{justify-content:center}
body[data-season=halloween] #portal-landing .portal-bottom{left:0;width:100%;justify-content:center;text-shadow:0 2px 8px #000}
body[data-season=halloween] .portal-float,
body[data-season=halloween] .portal-ribbon{display:none}
body[data-season=halloween] .portal-castle{display:block;position:absolute;inset:-15px;background:linear-gradient(0deg,#080d0e,transparent 18%),url('/static/seasonal/halloween-castle.webp') center/cover;transform:translate(calc(var(--mx,0px)*.35),calc(var(--my,0px)*.35)) scale(1.03);transition:transform 1s ease-out}
body[data-season=halloween] .portal-ghost{display:block;position:absolute;left:1%;top:170px;width:200px;transform:translate(calc(var(--mx,0px)*-1),calc(var(--my,0px)*-1));transition:transform .8s ease-out;filter:drop-shadow(0 0 15px #baff2518)}
.portal-ghost img{display:block;width:100%;height:auto;animation:portal-haunt 7s ease-in-out infinite}
body[data-season=halloween] .portal-ghost.right{left:auto;right:-2%;top:315px;width:145px;scale:-1 1}
.portal-ghost.right img{animation-delay:-3s;animation-duration:9s}
body[data-season=halloween] .portal-moon{display:block;position:absolute;right:3%;top:0;width:200px;height:200px;border-radius:50%;background:radial-gradient(ellipse,#d9ff2515,transparent 65%);mix-blend-mode:screen;animation:portal-glow 8s ease-in-out infinite alternate}
body[data-season=halloween] .portal-flame{display:block;position:absolute;left:5%;bottom:65px;width:100px;height:100px;background:radial-gradient(ellipse,#d9ff7040,transparent 65%);mix-blend-mode:screen;animation:portal-flame 2.7s ease-in-out infinite}
body[data-season=halloween] .portal-flame.right{left:auto;right:2%;bottom:34px;width:140px;height:140px;animation-delay:-1.3s}
.portal-slime{display:none}
body[data-season=halloween] .portal-slime{display:block;position:absolute;left:13px;right:13px;bottom:-1px;height:5px;border-radius:0 0 50% 50%;background:#caff25;filter:blur(.35px) drop-shadow(0 3px 5px #b6ff2520);transform:translateZ(0);pointer-events:none}
.portal-slime i{position:absolute;top:1px;width:8px;height:17px;left:8%;border-radius:0 0 50% 50%;background:linear-gradient(90deg,#bce82c,#ceff43 65%,#caff25);transform-origin:top;animation:portal-slime 4.5s ease-in-out infinite;will-change:transform}
.portal-slime i:nth-child(2){left:24%;width:5px;height:10px;animation-delay:-3s}
.portal-slime i:nth-child(3){left:48%;width:9px;height:22px;animation-delay:-2s;animation-duration:5.5s}
.portal-slime i:nth-child(4){left:65%;width:6px;height:13px;animation-delay:-.5s}
.portal-slime i:nth-child(5){left:86%;width:7px;height:18px;animation-delay:-4s}
.portal-slime b{position:absolute;left:63%;top:12px;width:6px;height:8px;border-radius:50%;background:#ceff3c;animation:portal-drop 5s ease-in infinite 1.8s;opacity:0;filter:blur(.25px)}
#catalog>.section-title h2{font-size:38px;letter-spacing:-1.4px;margin:30px 0 20px}
#catalog .search-shell{max-width:none}
#search{border-radius:40px;padding:6px 7px 6px 22px;background:#15201b;border-color:#364531}
#search button[type=submit]{border-radius:30px;padding:12px 25px}
#search input{font-size:16px}
.portal-steam{display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(110deg,#24351c,#111c17);border:1px solid #485d30;border-radius:23px;padding:25px 30px;margin:25px 0 35px}
.portal-steam h2{font-size:26px;letter-spacing:-.8px;margin:7px 0 9px}
.portal-steam p{font-size:12px;color:#afc1a3;margin:0;line-height:1.7}
.portal-steam small{font-size:9px;color:var(--lime);letter-spacing:2px}
.portal-steam button{margin-top:19px;border-radius:30px}
.portal-steam img{width:102px;height:102px;border-radius:23px;rotate:12deg}
#discover{margin:35px 0 38px}
#discover .discovery-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
#discover .game-cover{width:76px;height:76px;border-radius:19px}
#discover .game-tile{border:0;background:none;padding:0;min-width:0}
#discover .game-tile strong{font-size:11px}
#portal-catalog-board{display:grid;grid-template-columns:175px minmax(0,1fr);gap:30px;margin-top:30px;border-top:1px solid #30402e;padding-top:28px}
.portal-section-menu{display:flex;flex-direction:column;gap:7px}
.portal-section-menu>small{color:#8eaa89;font-size:10px;letter-spacing:1.5px;margin-bottom:12px}
.portal-section-menu button{text-align:left;font-size:12px;line-height:1.5;padding:12px;border-radius:11px;background:transparent;border:1px solid transparent;color:#afc0a7}
.portal-section-menu button[aria-pressed=true]{color:var(--lime);border-color:#728c3c;background:#25341c}
#portal-catalog-results{min-width:0}
#category-menu,
#portal-catalog-results>.catalog-tools{display:none!important}
#catalog-display-anchor{margin:0 0 10px;padding:0}
#catalog-count{font-size:13px}
#cards{display:flex!important;flex-direction:column;gap:0;margin:0}
#cards>.catalog-card-shell{width:100%;height:auto}
#cards .card{display:flex!important;flex-direction:row!important;align-items:center;gap:18px;padding:20px 40px 20px 0!important;border-radius:0;border:0;border-bottom:1px solid #2d3c2b;background:transparent!important;transform:none;width:100%;min-height:108px;box-shadow:none}
#cards .card:hover{background:#caff2505!important}
#cards .card-media{width:57px!important;height:76px!important;min-width:57px;flex:0 0 57px;aspect-ratio:auto;background:transparent;border:0;border-radius:8px}
#cards .card-image{width:100%;height:100%;object-fit:cover;border-radius:8px;padding:0!important;background:transparent!important}
#cards .card-body{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:6px 20px;padding:0!important;flex:1;min-width:0}
#cards .card .card-body>strong{font-size:16px;grid-column:1;line-height:1.5;font-weight:650}
#cards .card-meta{grid-column:1}
#cards .card-detail{grid-column:1;font-size:11px}
#cards .card-price{grid-column:2;grid-row:1 / span 2;padding:0;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#cards .card-price b{font-size:14px}
#cards .card-cta{grid-column:2;font-size:11px;color:#d6edb9;margin:0;padding:8px 12px;border:1px solid #4b6534;background:#1c2c1a;border-radius:10px;text-align:center;align-self:center}
#cards .quick-favorite{right:0;top:16px;bottom:auto;width:29px;height:29px;min-height:29px;padding:5px}
#cards .skeleton{height:100px;border-radius:0}
#cards .empty{width:100%}
.site-footer{border-top:1px solid #3a4a31;margin-top:45px;padding-top:38px;background:radial-gradient(ellipse at 0 100%,#8aaf2010,transparent 60%)}
.site-footer .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:35px}
.site-footer .footer-logo{font-size:26px}
.site-footer p{line-height:1.8}
.site-footer .footer-bottom{margin-top:30px;padding-top:23px}
.footer-bottom>div>span{padding:8px 12px;background:#142017;border:1px solid #3a4c2f;border-radius:8px;color:#c4d5b9;font-size:10px}
.portal-paused #portal-landing *{animation-play-state:paused!important}
.portal-paused #portal-landing{--mx:0px!important;--my:0px!important}
body:not(.portal-home) #portal-landing{display:none}
@keyframes portal-float{0%,100%{translate:0 0;rotate:-8deg}50%{translate:0 -24px;rotate:3deg}}
@keyframes portal-breathe{from{translate:0 10px;filter:brightness(.7)}to{translate:25px -18px;filter:brightness(1.3)}}
@keyframes portal-fog{from{translate:-6% 0;opacity:.4}to{translate:6% -15px;opacity:.9}}
@keyframes portal-particles{from{translate:0 10px}to{translate:10px -20px}}
@keyframes portal-haunt{0%,100%{translate:0 0;rotate:-7deg}50%{translate:10px -26px;rotate:5deg}}
@keyframes portal-glow{from{opacity:.4;scale:.95}to{opacity:1;scale:1.12}}
@keyframes portal-flame{0%,100%{opacity:.4;scale:1}23%{opacity:.8;scale:1.07}48%{opacity:.5;scale:.96}77%{opacity:1;scale:1.13}}
@keyframes portal-slime{0%,100%{transform:translateZ(0) scaleY(.75)}45%{transform:translateZ(0) scaleY(1.08)}70%{transform:translateZ(0) scaleY(.9)}}
@keyframes portal-drop{0%,52%{translate:0 0;opacity:0}56%{opacity:1}78%{translate:0 33px;opacity:.8}86%,100%{translate:0 45px;opacity:0}}
@media(max-width:700px){body>main{padding:0 5% 110px}body>header{padding:20px 5%;flex-wrap:wrap}#portal-landing{padding:55px 6% 255px;min-height:730px}#portal-landing h1{font-size:40px;letter-spacing:-1.7px}#portal-landing .portal-copy>p{font-size:12px}#portal-landing .portal-actions{gap:12px}#portal-landing .portal-actions button{width:160px;height:52px;min-height:52px;padding:0 14px;font-size:12px}#portal-landing .portal-bottom{font-size:10px;gap:12px;padding-right:10px}.portal-float{top:auto;bottom:90px;right:32%;scale:.8}.portal-float.two{top:auto;bottom:80px;right:3%;scale:.8}.portal-float.three{top:auto;bottom:50px;right:67%;scale:.5}.portal-ribbon{left:20%;bottom:-150px;width:500px;height:500px}body[data-season=halloween] #portal-landing{padding:65px 22px 230px;min-height:740px}body[data-season=halloween] .portal-castle{background-position:62% center;opacity:.8}body[data-season=halloween] .portal-ghost{top:auto;bottom:60px;width:145px;left:-18px}body[data-season=halloween] .portal-ghost.right{top:auto;bottom:75px;width:110px;right:-12px}body[data-season=halloween] .portal-moon{width:130px;height:130px;top:90px}#catalog>.section-title h2{font-size:31px}#discover .discovery-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 14px}#discover .game-cover{width:64px;height:64px;border-radius:17px}.portal-steam{padding:22px 19px;gap:15px}.portal-steam h2{font-size:23px}.portal-steam img{width:65px;height:65px;border-radius:17px}#portal-catalog-board{grid-template-columns:1fr;gap:20px}.portal-section-menu{flex-direction:row;flex-wrap:wrap;gap:6px}.portal-section-menu>small{display:none}.portal-section-menu button{font-size:11px;padding:10px 12px;border-color:#35482c}#cards .card{gap:12px;padding:18px 33px 18px 0!important}#cards .card-media{width:44px!important;height:62px!important;min-width:44px;flex-basis:44px}#cards .card-body{grid-template-columns:minmax(0,1fr) 83px;gap:6px 9px}#cards .card .card-body>strong{font-size:14px}#cards .card-cta{font-size:10px;padding:8px}#cards .card-price b{font-size:12px}#cards .quick-favorite{width:25px;height:25px;padding:4px}.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:25px}.site-footer .footer-brand{grid-column:1 / -1}.site-footer .footer-bottom{gap:18px;flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){#portal-landing *{animation:none!important;transition:none!important}.portal-slime b{display:none}}
#discover .game-art{width:auto;height:auto;background:none;border:0;padding:0}
#discover .game-cover{padding:0;object-fit:cover}


/* portal-fullscreen.css */
/* The entrance is a viewport-sized scene; shop pages retain their content width. */
body.portal-home>main{width:100%;max-width:none;padding:0;margin:0}
body.portal-home>header{position:absolute;inset:0 0 auto;z-index:20;width:100%;max-width:none;padding:25px max(5%,calc((100% - 1440px)/2));border:0;background:transparent;box-shadow:none;backdrop-filter:none;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
body.portal-home>header #home{justify-self:start;font-size:29px;white-space:nowrap}
body.portal-home>header .header-categories,body.portal-home>header #notifications-button,body.portal-home>header #account-login{display:none!important}
#portal-header-nav,#portal-header-login{display:none}
body.portal-home #portal-header-nav{display:flex;align-items:center;justify-content:center;gap:38px}
body.portal-home #portal-header-nav button{background:transparent;border:0;padding:8px 0;min-height:44px;font-size:13px;color:#b5bfbb;white-space:nowrap}
body.portal-home #portal-header-nav button:hover{color:#e5f2cf}
body.portal-home #portal-header-login{display:block;justify-self:end;padding:13px 30px;min-height:48px;min-width:120px;border:1px solid #ffffff15;border-radius:40px;background:#273035;color:#f3f6ed;font-size:13px;font-weight:700;box-shadow:none}
body.portal-home #portal-landing,body.portal-home[data-season=halloween] #portal-landing{width:100%;margin:0;border-radius:0;min-height:max(720px,100vh);min-height:max(720px,100svh);padding:145px max(6%,calc((100% - 1440px)/2)) 150px;display:flex;align-items:center;justify-content:flex-start}
body.portal-home[data-season=halloween] #portal-landing{justify-content:center}
body.portal-home #portal-landing .portal-copy{width:100%;max-width:690px}
body.portal-home #portal-landing h1{font-size:clamp(44px,4.8vw,82px);letter-spacing:-3px}
body.portal-home #portal-landing .portal-copy>p{font-size:clamp(14px,1.05vw,17px);max-width:570px;margin-top:0;margin-bottom:32px}
body.portal-home #portal-landing .portal-eyebrow{font-size:11px;letter-spacing:3px}
body.portal-home #portal-landing .portal-bottom{bottom:40px;font-size:12px}
body.portal-home .portal-scene{inset:0}
body.portal-home[data-season=halloween] .portal-castle{background-position:center;background-size:cover}
body.portal-home[data-season=halloween] .portal-ghost{width:clamp(180px,17vw,310px);top:27%;left:2%}
body.portal-home[data-season=halloween] .portal-ghost.right{width:clamp(140px,13vw,230px);top:48%;right:1%;left:auto}
body.portal-home[data-season=halloween] .portal-moon{width:17vw;height:17vw;right:1%;top:2%}
body.portal-home .portal-float{right:17%;top:23%}
body.portal-home .portal-float.two{right:7%;top:51%}
body.portal-home .portal-float.three{right:33%;top:64%}
body.portal-home .portal-object{width:clamp(130px,10vw,190px);height:clamp(166px,13vw,245px)}
body.portal-home .portal-object img{width:56%;height:auto;aspect-ratio:1;border-radius:22%}
body.portal-home .portal-ribbon{left:50%;bottom:-12%;width:70vw;height:80%;border-width:4vw}
body.portal-home .site-footer{width:100%;max-width:none;margin:0;padding:42px max(5%,calc((100% - 1440px)/2)) 25px;border-top:0;background:radial-gradient(ellipse at 0 100%,#8aaf2010,transparent 60%),#080f11}
body.portal-home #notice:empty{display:none}
@media(min-width:1800px){body.portal-home #portal-landing .portal-copy{max-width:850px}body.portal-home #portal-landing .portal-actions button{width:210px;height:58px;min-height:58px;font-size:14px}body.portal-home #portal-landing .portal-copy>p{max-width:640px}}
@media(max-width:700px){body.portal-home>header{padding:19px 6%;grid-template-columns:1fr auto;gap:10px 20px}body.portal-home>header #home{font-size:25px}body.portal-home #portal-header-login{grid-column:2;grid-row:1;min-width:100px;min-height:44px;padding:10px 20px;font-size:12px}body.portal-home #portal-header-nav{grid-column:1 / -1;grid-row:2;gap:29px}body.portal-home #portal-header-nav button{font-size:12px;min-height:40px}body.portal-home #portal-landing,body.portal-home[data-season=halloween] #portal-landing{padding:160px 6% 220px;min-height:max(800px,100svh);align-items:center}body.portal-home #portal-landing h1{font-size:clamp(36px,9vw,48px);letter-spacing:-1.7px}body.portal-home #portal-landing .portal-copy>p{font-size:13px}body.portal-home #portal-landing .portal-eyebrow{font-size:9px;letter-spacing:2px}body.portal-home #portal-landing .portal-bottom{bottom:30px;font-size:10px;padding:0 15px}body.portal-home[data-season=halloween] .portal-castle{background-position:62% center;opacity:.85}body.portal-home[data-season=halloween] .portal-ghost{top:auto;bottom:70px;left:-15px;width:145px}body.portal-home[data-season=halloween] .portal-ghost.right{top:auto;bottom:85px;right:-12px;width:110px}body.portal-home[data-season=halloween] .portal-moon{width:150px;height:150px;top:12%;right:-20px}body.portal-home .portal-float{top:auto;bottom:100px;right:32%}body.portal-home .portal-float.two{top:auto;bottom:80px;right:3%}body.portal-home .portal-float.three{top:auto;bottom:50px;right:67%}body.portal-home .portal-ribbon{left:20%;bottom:-150px;width:500px;height:500px;border-width:42px}}

/* portal-catalog-responsive.css */
/* Shop layout owns its dimensions instead of inheriting old compact tiles. */
body:not(.portal-home)>main{width:100%;max-width:none;margin:0;padding:0 max(4%,calc((100% - 1640px)/2)) 55px}
body:not(.portal-home)>header{width:100%;max-width:none;margin:0;padding:22px max(4%,calc((100% - 1640px)/2));min-height:90px;gap:22px}
body:not(.portal-home)>header #home{margin-right:auto;flex-shrink:0}
body:not(.portal-home)>header .header-categories{display:none}
body:not(.portal-home)>header #account-login{flex-shrink:0}
body:not(.portal-home)>nav{top:20px;width:340px;max-width:40%;padding:4px}
#catalog{width:100%;min-width:0;padding-top:24px}
#catalog>.section-title h2{font-size:clamp(30px,2.6vw,44px)}
#catalog .search-shell,
form#search{width:100%;max-width:none}
#catalog #discover .discovery-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:22px;overflow:visible;margin:0;padding:0;align-items:start}
#catalog #discover .game-tile{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none;width:100%;min-width:0;padding:0;border:0;background:transparent;height:auto}
#catalog #discover .game-art{position:relative;display:block;width:clamp(68px,5.6vw,104px);height:clamp(68px,5.6vw,104px);min-height:68px;flex:0 0 auto;aspect-ratio:1;border-radius:23%;overflow:hidden;isolation:isolate;box-shadow:none}
#catalog #discover .game-art .game-cover{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;aspect-ratio:1;border:0;border-radius:0;padding:0;object-fit:cover;background:transparent}
#catalog #discover .game-art .game-cover[src$=".svg"]{padding:19%;object-fit:contain}
#catalog #discover .game-art[data-platform="steam"]{background:linear-gradient(145deg,#176493,#0c264a)}
#catalog #discover .game-art[data-platform="playstation"]{background:linear-gradient(145deg,#087bc7,#003087)}
#catalog #discover .game-art[data-platform="xbox"]{background:linear-gradient(145deg,#209c27,#107c10)}
#catalog #discover .game-art[data-platform="discord"]{background:linear-gradient(145deg,#7884ff,#5865f2)}
#catalog #discover .game-tile strong{font-size:12px;line-height:1.5;min-height:0;height:auto;overflow-wrap:anywhere}
#portal-catalog-board{grid-template-columns:210px minmax(0,1fr);gap:38px}
.portal-section-menu button{font-size:13px;padding:14px 15px}
#portal-catalog-results{min-width:0;width:100%}
#catalog-display-anchor{gap:18px;flex-wrap:wrap;align-items:center}
body:not(.portal-home) .site-footer{width:100%;max-width:none}
@media(max-width:1100px){#portal-catalog-board{grid-template-columns:180px minmax(0,1fr);gap:25px}#catalog #discover .discovery-grid{gap:13px}#catalog #discover .game-art{width:72px;height:72px}.portal-section-menu button{font-size:12px;padding:12px}}
@media(max-width:900px){body:not(.portal-home)>header{padding:18px 5%;min-height:76px;gap:16px}body:not(.portal-home)>nav{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:none;border-radius:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#141b15ed;backdrop-filter:blur(18px)}body:not(.portal-home)>main{padding-bottom:115px}}
@media(max-width:700px){body:not(.portal-home)>main{padding-left:5%;padding-right:5%}#catalog{padding-top:12px}#catalog #discover .discovery-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:23px 12px}#catalog #discover .game-art{width:clamp(56px,16vw,78px);height:clamp(56px,16vw,78px);min-height:56px}#catalog #discover .game-tile{gap:9px}#catalog #discover .game-tile strong{font-size:10px}#portal-catalog-board{grid-template-columns:minmax(0,1fr);gap:22px}.portal-section-menu{display:flex;flex-direction:row;flex-wrap:wrap;gap:7px}.portal-section-menu button{padding:10px 12px;font-size:11px}#catalog-display-anchor{gap:10px}}
@media(max-width:380px){body:not(.portal-home)>header{gap:10px}body:not(.portal-home)>header #home{font-size:24px}body:not(.portal-home)>header #account-login{max-width:140px}}


/* portal-footer.css */
body.portal-home>.site-footer,body:not(.portal-home)>.site-footer{display:block;box-sizing:border-box;position:relative;left:auto;right:auto;width:100%;max-width:none;margin:0;padding:42px max(5%,calc((100% - 1440px)/2)) 28px;background:radial-gradient(ellipse at 0 100%,#8aaf2010,transparent 70%),radial-gradient(ellipse at 100% 100%,#8aaf2010,transparent 70%),#080f11;border-top:1px solid #29382b;overflow:visible}
body>.site-footer .footer-grid,body>.site-footer .footer-bottom{width:100%;max-width:none;min-width:0}
body>.site-footer .footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
body>.site-footer .footer-grid>section{min-width:0}
body>.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px;padding-top:23px}
body>.site-footer .footer-bottom>div{display:flex;gap:12px;flex-wrap:wrap}
body.product-open>.site-footer{visibility:hidden}
@media(max-width:900px){body:not(.portal-home)>.site-footer{padding-bottom:calc(105px + env(safe-area-inset-bottom))}}
@media(max-width:700px){body.portal-home>.site-footer,body:not(.portal-home)>.site-footer{padding-left:5%;padding-right:5%}body>.site-footer .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px}body>.site-footer .footer-brand{grid-column:1 / -1}body>.site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}}

/* portal-account-responsive.css */
/* Cart and profile share the catalog's outer grid on every screen. */
body:not(.portal-home) #basket,body:not(.portal-home) #profile{width:100%;max-width:none;min-width:0;margin:32px 0 45px}
#basket>.section-title{align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:28px}
#basket>.section-title h2,#profile .profile-head h2{font-size:clamp(29px,2.5vw,42px);line-height:1.2;letter-spacing:-1px}
#basket>.section-title p,#profile #account-identity{font-size:13px;line-height:1.7}
#basket .basket-layout{width:100%;grid-template-columns:minmax(300px,.8fr) minmax(0,1.4fr);gap:32px;align-items:start}
#basket .basket-summary{padding:32px;min-width:0;width:100%}
#basket .basket-summary #total{font-size:clamp(38px,3.5vw,58px)}
#basket .basket-summary #total.total-message{font-size:24px}
#basket .basket-products,#basket #cart-items{width:100%;min-width:0}
#basket .cart-product{padding:24px;width:100%;min-width:0}
#basket .cart-product-head{gap:18px;align-items:flex-start}
#basket .cart-product-head>.basket-image{width:100px;height:68px;flex:0 0 100px;object-fit:contain;border-radius:8px;background:#111a16}
#basket .cart-product-info{min-width:0;flex:1;overflow-wrap:anywhere}
#basket .cart-product-info>b{font-size:17px;line-height:1.5}
#basket .cart-product-info>strong{font-size:22px}
#basket .cart-product-info>small{font-size:13px;white-space:normal}
#basket .cart-product .quantity{gap:10px;margin-top:20px}
#basket .cart-product .quantity button{min-height:44px;font-size:13px}
#basket .cart-product>button.wide,#basket #continue-shopping{font-size:13px;min-height:44px}
#profile .profile-overview{width:100%;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:32px;align-items:start}
#profile .profile-main,#profile .profile-sidebar{min-width:0;width:100%}
#profile .profile-balance{padding:32px}
#profile .balance-controls{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
#profile .profile-balance #balance{font-size:clamp(36px,3.5vw,54px);letter-spacing:-1.6px}
#profile #balance-topup{flex-shrink:0;min-height:48px;font-size:14px}
#profile .profile-actions{display:flex;flex-wrap:wrap;gap:12px}
#profile .profile-actions button{font-size:13px;min-height:44px}
#profile .profile-sidebar>.panel{padding:26px}
#profile .identity-row{grid-template-columns:38px minmax(0,1fr) auto;gap:12px}
#profile .identity-row button{grid-column:auto;min-height:40px;max-width:100%;margin:0}
#profile .identity-copy{min-width:0}
#profile .identity-copy b{font-size:14px}
#profile .identity-copy small{font-size:12px;overflow-wrap:anywhere}
#profile #profile-items .purchase-row{grid-template-columns:minmax(0,1fr) auto 12px;padding:18px;gap:16px}
#profile #profile-items .purchase-row-description{font-size:13px}
#profile #profile-items .purchase-row-price{font-size:18px}
#profile #profile-items input,#profile #profile-items select,#profile #profile-items textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#profile .profile-footer{gap:14px;flex-wrap:wrap}
@media(max-width:1100px){#basket .basket-layout{grid-template-columns:minmax(280px,.9fr) minmax(0,1.25fr);gap:24px}#basket .basket-summary,#basket .cart-product{padding:23px}#profile .profile-overview{grid-template-columns:minmax(0,1.3fr) minmax(290px,1fr);gap:24px}#profile .profile-balance,#profile .profile-sidebar>.panel{padding:23px}#profile .identity-row{grid-template-columns:34px minmax(0,1fr)}#profile .identity-row button{grid-column:2;justify-self:start}}
@media(max-width:800px){#basket .basket-layout,#profile .profile-overview{grid-template-columns:minmax(0,1fr);gap:24px}#basket .basket-products{order:1}#basket .basket-summary{order:2}#profile .profile-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#profile #user-level{grid-column:1 / -1}#profile .profile-head h2{font-size:30px}#basket>.section-title h2{font-size:30px}#profile #profile-avatar{flex-shrink:0}}
@media(max-width:550px){body:not(.portal-home) #basket,body:not(.portal-home) #profile{margin:22px 0 30px}#basket>.section-title{align-items:flex-start;gap:12px}#basket>.section-title h2{font-size:28px}#basket .basket-summary,#basket .cart-product{padding:20px}#basket .cart-product-head{gap:12px}#basket .cart-product-head>.basket-image{width:82px;height:58px;flex-basis:82px}#basket .cart-product-info>b{font-size:15px}#basket .cart-product-info>small{font-size:12px}#basket .cart-product-info>strong{font-size:20px}#basket .basket-summary #total{font-size:40px}#basket .basket-summary #total.total-message{font-size:22px}#basket #coupon-form{display:flex;flex-wrap:wrap}#basket #coupon-code{width:100%;flex-basis:100%}#profile .profile-sidebar{grid-template-columns:minmax(0,1fr);gap:18px}#profile .profile-balance,#profile .profile-sidebar>.panel{padding:22px}#profile .profile-balance #balance{font-size:36px}#profile .profile-head h2{font-size:27px;overflow-wrap:anywhere}#profile .profile-head>div{min-width:0}#profile .balance-controls{gap:15px}#profile #balance-topup{font-size:12px;padding:11px 14px;min-width:0}#profile #profile-items .purchase-row{grid-template-columns:minmax(0,1fr) auto;padding:14px;gap:10px}#profile .purchase-row-arrow{display:none}#profile #profile-items .purchase-row-description{font-size:12px}#profile #profile-items .purchase-row-price{font-size:15px}#profile .profile-footer .wide{width:100%;text-align:center;white-space:normal}#profile .profile-actions button{flex:1 1 130px}}
@media(max-width:360px){#basket .cart-product-head{flex-wrap:wrap}#profile .profile-balance #balance{font-size:31px}#profile .balance-controls{align-items:flex-start;flex-direction:column}}

/* living-design.css */
/* UNLOQD visual layer. All transactional values and controls remain live. */
:root{--life-border:#415537;--life-glass:#15201be8;--life-radius:20px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.life-eyebrow{font-size:10px!important;letter-spacing:2px;text-transform:uppercase;color:var(--lime)!important}
.life-illustration{object-fit:contain;filter:drop-shadow(0 12px 25px #0005);pointer-events:none}
.life-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:35px 20px!important;gap:12px;width:100%}
.life-empty>img{width:135px;height:115px;margin:0 auto}
.life-empty p{max-width:420px;line-height:1.8;color:#b9c9ae}
.life-empty button{min-height:44px;padding:11px 22px;border-radius:13px}
.life-scene-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;position:relative;isolation:isolate}
.life-scene-heading .life-heading-art{width:100px;height:100px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 25px #caff2518)}
#portal-catalog-board{position:relative}
#portal-catalog-board:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#caff2540,transparent);pointer-events:none}
#cards .card{transition:background .22s,border-color .22s!important;position:relative;isolation:isolate}
#cards .card:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 5% 50%,var(--art-glow,#a4d52a18),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}
@media(hover:hover) and (pointer:fine){#cards .card:hover:before{opacity:1}#cards .card-media{transition:transform .3s,box-shadow .3s!important}#cards .card:hover .card-media{transform:translateY(-3px);box-shadow:0 12px 25px #0004}#discover .game-art{transform:perspective(500px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .3s,box-shadow .3s}#discover .game-tile:hover .game-art{box-shadow:0 0 25px #caff2520}}
.life-section-banner{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:125px;padding:22px 26px;margin:0 0 25px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #3b5030;border-radius:20px;background:linear-gradient(105deg,#203019,#101c17)}
.life-section-banner h3{font-size:23px;letter-spacing:-.5px;line-height:1.3;margin:7px 0}
.life-section-banner p{font-size:12px;color:#a8bda0;line-height:1.8;margin:0;max-width:470px}
.life-posters{display:flex;align-items:center;gap:9px;flex-shrink:0;perspective:800px;padding:5px 15px}
.life-posters img{width:65px;height:85px;object-fit:cover;border:1px solid #bddd6c35;border-radius:8px;box-shadow:0 12px 25px #0006;rotate:-9deg;transform:rotateY(-12deg)}
.life-posters img:nth-child(2){height:105px;width:78px;rotate:3deg;transform:translateY(-2px)}
.life-posters img:nth-child(3){rotate:12deg}
.life-curated{margin:27px 0 30px}
.life-curated>h3{font-size:18px;letter-spacing:-.4px;margin:0 0 16px}
.life-curated-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:center}
.life-curated-grid button{position:relative;display:flex;align-items:flex-end;text-align:left;isolation:isolate;min-height:170px;padding:20px;border:1px solid #61783b55;border-radius:19px;overflow:hidden;background:#111b15;min-width:0}
.life-curated-grid button:nth-child(2){min-height:200px}
.life-curated-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .4s,filter .4s;filter:brightness(.85)}
.life-curated-grid button:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071009f5,transparent 100%);z-index:-1}
.life-curated-grid strong{font-size:16px;line-height:1.5;letter-spacing:-.3px;text-shadow:0 2px 9px #000;overflow-wrap:anywhere}
@media(hover:hover){.life-curated-grid button:hover img{transform:scale(1.04);filter:brightness(1)}}
@media(max-width:700px){.life-curated-grid{grid-template-columns:1fr;gap:12px}.life-curated-grid button,.life-curated-grid button:nth-child(2){min-height:130px;padding:19px}.life-curated-grid img{object-position:center 35%}.life-curated-grid strong{font-size:17px}}
.life-skeleton{position:relative;overflow:hidden;min-height:95px;background:#152019!important;border-bottom:1px solid #2c3c29!important}
.life-skeleton:before{content:'';position:absolute;top:19px;left:0;width:150px;height:62px;border-radius:8px;background:#263125}
.life-skeleton:after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent,#caff2508,transparent);animation:life-shimmer 1.6s linear infinite}
.life-view{animation:life-enter .35s ease-out both}
.life-flying-art{position:fixed;z-index:1000;pointer-events:none;object-fit:contain;border-radius:10px;filter:drop-shadow(0 0 14px #caff2550)}
.life-pulse{animation:life-pulse .5s ease-out}
dialog{border:1px solid #405333!important;border-radius:24px!important;background:linear-gradient(145deg,#18241c,#0c1511)!important;box-shadow:0 35px 110px #0009,inset 0 1px 0 #d3ff7215!important;padding:28px!important;max-width:min(700px,calc(100% - 28px));color:#eff4e9}
dialog::backdrop{background:#020605b8;backdrop-filter:blur(8px)}
dialog .modal-head{position:relative;background:transparent}
dialog h2{font-size:27px;letter-spacing:-.7px;line-height:1.25;margin:18px 0}
dialog button,dialog input,dialog select,dialog textarea{border-radius:12px}
dialog input,dialog select,dialog textarea{min-width:0;max-width:100%;box-sizing:border-box}
dialog input:focus,dialog select:focus,dialog textarea:focus{border-color:#a4cf4d}
dialog .hint{font-size:12px;line-height:1.8;color:#a7ba9c}
.life-dialog-art{width:95px;height:85px;object-fit:contain;float:right;margin:0 0 12px 18px;filter:drop-shadow(0 0 28px #caff2515)}
.life-dialog-opening{animation:life-dialog .28s ease-out}
.life-field-error{color:#ffd0a7;font-size:12px;line-height:1.7;margin:8px 0;display:block}
[aria-invalid=true]{border-color:#eaaa73!important;box-shadow:0 0 0 2px #eaaa7310}
.life-error-note:not(:empty){padding:12px 15px;border:1px solid #ad7b3b70;border-radius:12px;background:#5b3c191a;line-height:1.7;color:#ffdab0;font-size:12px}
#detail .product-shell{position:relative;isolation:isolate}
#detail .life-backdrop{position:absolute;z-index:-1;top:0;left:0;right:0;height:420px;overflow:hidden;pointer-events:none;border-radius:0 0 28px 28px}
#detail .life-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(5px) brightness(.3) saturate(.75);scale:1.05}
#detail .life-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 90%)}
#detail .product-image{box-shadow:0 16px 55px #0006;border:1px solid #e3ff9b20;border-radius:15px;object-fit:contain!important;background:#0b1310;position:relative}
#detail .product-body{min-width:0}
#detail .product-screen .modal-head{background:#0c1511e8}
.life-checkout-steps{display:flex;gap:9px;list-style:none;margin:18px 0;padding:0}
.life-checkout-steps li{display:flex;align-items:center;gap:8px;flex:1;font-size:11px;color:#8ba181;border-top:2px solid #34462d;padding-top:10px}
.life-checkout-steps li b{display:grid;place-items:center;width:22px;height:22px;border:1px solid #435b35;border-radius:50%;font-size:10px;font-weight:500}
.life-checkout-steps li[aria-current=step]{border-color:var(--lime);color:#dcf5b9}
.life-checkout-steps li[aria-current=step] b{background:var(--lime);color:#15220d}
#detail .offer-tile{background:linear-gradient(145deg,#1b291e,#111b15);border:1px solid #3c5130;border-radius:17px;padding:18px;min-height:105px;transition:transform .2s,border-color .2s,background .2s}
#detail .offer-tile>strong{font-size:17px;line-height:1.5}
#detail .offer-tile .tile-price{font-size:16px;color:#daecb8}
#detail .offer-tile[aria-pressed=true]{border-color:#b5db50;background:linear-gradient(145deg,#31451e,#1a2916);box-shadow:0 0 0 1px #b5db5020,0 8px 25px #b5db5008}
#detail .region-choice{border-radius:15px;background:#142018;border-color:#3a4e30;min-height:75px;padding:16px;gap:15px}
#detail .region-choice-code{min-width:44px;min-height:44px;display:grid;place-items:center;background:#29391f;border:1px solid #496236;border-radius:13px;font-size:25px}
.life-guide{margin:18px 0;border-top:1px solid #30452b;padding-top:16px}
.life-guide summary{color:var(--lime);font-size:12px;min-height:40px;padding:10px 0}
.life-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.life-guide-step{padding:15px;border-radius:15px;background:#17241b;border:1px solid #33472c;min-width:0}
.life-guide-step b{display:grid;place-items:center;width:29px;height:29px;border:1px solid #6f8f3b;border-radius:9px;color:#caff25;font-size:12px;margin-bottom:12px}
.life-guide-step strong{display:block;font-size:12px;margin-bottom:8px}
.life-guide-step p{color:#a0b394;font-size:11px;line-height:1.8;margin:0}
.life-guide-art{width:52px;height:45px;object-fit:contain;float:right;margin:-39px 0 9px 10px;filter:drop-shadow(0 0 15px #caff2510)}
.life-error-note[data-life-state=working]:not(:empty){color:#c6dfa9;background:#29421b15;border-color:#526c3250}
.life-section-banner:after{content:'';position:absolute;right:5%;bottom:-120px;width:240px;height:200px;border:25px solid #b9e12a0c;border-top-color:#b9e12a25;border-radius:50%;rotate:-25deg;z-index:-1;pointer-events:none}
.life-section-banner[data-kind=gamekeys]{background:radial-gradient(ellipse at 95% 0%,#9cb93a18,transparent 70%),#101e18}
.life-section-banner[data-kind=steam_gifts]{background:radial-gradient(ellipse at 95% 100%,#92c83022,transparent 70%),#142017}
.life-section-banner[data-kind=topups]:after{border-radius:25%;rotate:35deg}
body[data-rank="1"] #profile{--rank-color:#b9c7ae}
body[data-rank="2"] #profile{--rank-color:#b9e244}
body[data-rank="3"] #profile{--rank-color:#78b7d8}
body[data-rank="4"] #profile{--rank-color:#be94d4}
body[data-rank="5"] #profile{--rank-color:#e3d278}
body[data-rank="5"] .life-profile-cover:before{background:conic-gradient(from 180deg,transparent 0 40%,#e3d27818 46%,transparent 53%)}
.life-balance-highlight{animation:life-balance-light .8s ease-out}
@keyframes life-balance-light{0%,100%{box-shadow:none}45%{box-shadow:0 0 38px #b8eb2530,inset 0 0 25px #caff250a}}
.life-card-preview{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid #718e3d;border-radius:19px;padding:22px;margin:20px 0;background:radial-gradient(ellipse at 100% 0%,#9ec62d25,transparent 80%),#17231a;box-shadow:0 15px 35px #0003}
.life-card-preview small{display:block;letter-spacing:1.5px;font-size:9px;color:#a9c18d}
.life-card-preview strong{display:block;font-size:26px;letter-spacing:-.7px;line-height:1.3;margin-top:10px;overflow-wrap:anywhere}
.life-card-preview img{width:65px;height:65px;border-radius:15px;object-fit:contain}
.life-gallery{margin:24px 0}
.life-gallery h3{font-size:17px;letter-spacing:-.3px}
.life-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.life-gallery-grid button{padding:0;border-radius:12px;overflow:hidden;border:1px solid #3b5031;background:#0d1711;aspect-ratio:16/9;min-width:0}
.life-gallery-grid img{width:100%;height:100%;object-fit:cover;display:block}
#life-lightbox{max-width:min(1250px,calc(100% - 24px));width:100%;padding:18px!important}
#life-lightbox img{display:block;width:100%;max-height:72dvh;object-fit:contain;border-radius:12px;margin:15px 0}
.life-lightbox-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.life-lightbox-actions button{min-height:44px}
.life-saved-recipients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:15px 0}
.life-saved-recipients button{padding:13px 15px;border:1px solid #405a32;background:#19291b;border-radius:12px;text-align:left;font-size:12px;min-width:0;overflow-wrap:anywhere}
.life-saved-recipients button[aria-pressed=true]{color:var(--lime);border-color:#a3c749;background:#2b3c1e}
.life-account-tile{padding:20px!important;background:linear-gradient(145deg,#19271d,#121c16)!important;border:1px solid #3c5131;border-radius:18px!important;margin:14px 0}
.life-account-tile>.life-account-heading{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.life-account-heading img{width:43px;height:43px;border-radius:11px;object-fit:contain}
.life-wallet-visual{display:flex;align-items:center;gap:18px;padding:18px;margin:20px 0;border-radius:19px;background:radial-gradient(ellipse at 0 50%,#b5dc251b,transparent 75%),#142117;border:1px solid #3e5830}
.life-wallet-visual img{width:85px;height:85px;object-fit:contain}
.life-wallet-visual strong{font-size:23px;letter-spacing:-.6px;display:block}
.life-wallet-visual small{font-size:11px;color:#a5b79b;line-height:1.7;display:block;margin-top:7px}
.life-energy{height:5px;border-radius:3px;background:#253321;margin-top:12px;overflow:hidden}
.life-energy i{display:block;height:100%;background:linear-gradient(90deg,#7ba821,#dbff57);width:var(--fill,0%);transition:width .3s;border-radius:3px}
.life-profile-cover{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 85% 20%,color-mix(in srgb,var(--rank-color,#b9e244) 15%,transparent),transparent 70%),linear-gradient(120deg,#1d2f1c,#101b16);border:1px solid #536b3655;border-radius:23px;padding:25px!important;margin-bottom:25px!important}
.life-profile-cover:before{content:'';position:absolute;inset:-100%;z-index:-1;background:conic-gradient(from 180deg,transparent 0 40%,#bfe7450c 46%,transparent 53%);animation:life-profile-wave 22s linear infinite}
.life-profile-cover .life-rank-emblem{width:85px;height:85px;object-fit:contain;margin-left:auto;filter:drop-shadow(0 0 20px #caff251c);flex-shrink:0}
#profile .life-profile-cover #profile-avatar{border:1px solid #a7c85150;box-shadow:inset 0 1px 0 #e4ff9f30,0 10px 30px #0003}
.life-rank-medal{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.life-rank-medal img{width:58px;height:58px;object-fit:contain;filter:hue-rotate(var(--rank-hue,0deg)) drop-shadow(0 5px 12px #caff2515)}
.life-rank-medal strong{font-size:18px;letter-spacing:.3px}
.life-rank-medal small{display:block;font-size:10px;color:#a8ba99;margin-top:4px;letter-spacing:1.2px}
.life-tier-medals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:20px 0}
.life-tier-medals span{text-align:center;font-size:9px;color:#b8caa5;line-height:1.6}
.life-tier-medals img{width:36px;height:36px;display:block;margin:0 auto 7px;object-fit:contain;filter:hue-rotate(var(--tier-hue,0deg));opacity:.65}
.life-tier-medals .life-current img{opacity:1;filter:hue-rotate(var(--tier-hue,0deg)) drop-shadow(0 0 12px #caff2540)}
.life-player-card{border:1px solid #607f35;border-radius:22px;padding:25px;margin:23px 0;background:radial-gradient(ellipse at 100% 0%,#96c22825,transparent 80%),#111e16;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden}
.life-player-card>img{width:70px;height:70px;object-fit:contain}
.life-player-card strong{font-size:20px;display:block;letter-spacing:-.5px;overflow-wrap:anywhere}
.life-player-card small{display:block;font-size:10px;color:#a3b38f;line-height:1.8;letter-spacing:1px;margin-top:5px}
.life-effects-setting{padding:18px;border:1px solid #3b5130;border-radius:17px;background:#132017;margin:20px 0}
.life-effects-setting label{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px}
.life-effects-setting select{width:auto;max-width:100%;font-size:12px;margin:0;min-height:42px}
.life-effects-setting p{font-size:11px;line-height:1.8;color:#94a989;margin:10px 0 0}
.life-notification-group{font-size:11px;letter-spacing:1.5px;color:#98b17f;margin:25px 0 10px}
.notification-item{border-radius:16px;padding:18px!important;background:#15221a!important;border:1px solid #34492d!important;position:relative}
.notification-item.unread{border-color:#8aa943!important;background:linear-gradient(120deg,#24361b,#15221a)!important}
.notification-item header{padding:0;max-width:none;gap:14px;display:flex;justify-content:space-between;align-items:flex-start}
.notification-item header b{font-size:14px;line-height:1.5}
.notification-item p{font-size:13px;line-height:1.8;color:#b8c8ad;overflow-wrap:anywhere}
.notification-item time{font-size:10px;color:#98ac8c;white-space:nowrap}
.life-notification-symbol{display:grid;place-items:center;width:34px;height:34px;border:1px solid #5e7d3850;background:#2a3c20;border-radius:10px;color:var(--lime);font-size:17px;margin-bottom:13px}
.life-order-success{padding:24px;border-radius:20px;border:1px solid #5d7c36;background:radial-gradient(ellipse at 50% 0%,#a3d72a1c,transparent 85%),#16231a;text-align:center;margin:20px 0}
.life-order-success img{width:105px;height:95px;object-fit:contain;display:block;margin:0 auto 15px}
.life-order-success strong{font-size:23px;letter-spacing:-.7px;display:block}
.life-order-success p{font-size:12px;line-height:1.8;color:#a5bc96}
.life-order-success button{margin-top:10px}
.order-progress{gap:13px;padding:10px 0}
.order-progress li{border-top-width:2px;position:relative}
.order-progress li.done{color:#d9efb4}
.order-progress li[aria-current=step]>span{box-shadow:0 0 20px #caff2520}
.received-code{position:relative;background:linear-gradient(140deg,#21331c,#122016);border:1px solid #65843b;border-radius:17px;padding:18px}
.received-code.life-sealed{background:linear-gradient(160deg,#283e20,#162119);min-height:125px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.life-envelope img{width:74px;height:74px;object-fit:contain}
.life-envelope-copy strong{display:block;font-size:15px;margin-bottom:8px}
.life-envelope-copy small{font-size:11px;color:#a7bc98;line-height:1.7;display:block}
.life-envelope button{flex-shrink:0;font-size:12px}
.received-code code{padding:16px;border:1px dashed #77984c;background:#0e190f;border-radius:11px;color:#e2f8c4;font-size:16px;line-height:1.8;letter-spacing:1px}
.life-delivery-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid #547334;background:#263a1d;border-radius:9px;padding:7px 11px;font-size:11px;color:#c4e59f;margin:10px 0}
.life-gift-options{margin:22px 0;padding:18px;border:1px solid #486334;border-radius:17px;background:#142117}
.life-gift-options summary{font-size:13px;color:#d5ebb4;min-height:35px}
.life-gift-options label{font-size:12px;display:grid;gap:6px;margin-top:14px}
.life-gift-options input,.life-gift-options select,.life-gift-options textarea{font-size:16px;width:100%}
.life-greeting{padding:25px;border:1px solid #809c49;border-radius:20px;background:radial-gradient(ellipse at 100% 0%,#bded2830,transparent 70%),#16251a;margin:20px 0;text-align:center}
.life-greeting img{width:90px;height:85px;object-fit:contain;display:block;margin:auto}
.life-greeting strong{font-size:24px;line-height:1.5;display:block;margin:12px 0;overflow-wrap:anywhere}
.life-greeting p{font-size:14px;line-height:1.9;color:#c3d8ac;white-space:pre-wrap;overflow-wrap:anywhere}
.life-greeting small{font-size:10px;letter-spacing:2px;color:#8fa779}
.life-greeting[data-wrap=birthday]{background:radial-gradient(ellipse at 90% 0%,#9072f22b,transparent 70%),#182019}
.life-greeting[data-wrap=seasonal]{background:radial-gradient(ellipse at 50% 0%,#d3e89730,transparent 70%),#12221d}
.life-support-banner{display:flex;align-items:center;gap:20px;border:1px solid #3a542f;border-radius:18px;padding:18px;background:radial-gradient(ellipse at 0 50%,#b0d53e16,transparent 80%),#132017;margin:20px 0}
.life-support-banner img{width:85px;height:75px;object-fit:contain}
.life-support-banner strong{font-size:15px;display:block}
.life-support-banner small{font-size:11px;color:#a3b598;line-height:1.8;display:block;margin-top:7px}
.life-favorites-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.life-favorites-filters button{border-radius:11px;font-size:11px;padding:10px 14px;background:#15221a;border:1px solid #3d542e}
.life-favorites-filters button[aria-pressed=true]{color:var(--lime);background:#293b1e;border-color:#85a346}
.life-favorite-saved{animation:life-pulse .4s ease-out}
body[data-shelf=favorites] #cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body[data-shelf=favorites] #cards .card{padding:0 0 17px!important;flex-direction:column!important;align-items:stretch;border:1px solid #3e5330;border-radius:18px!important;overflow:hidden;background:#142018!important;gap:0}
body[data-shelf=favorites] #cards .card-media{width:100%!important;height:155px!important;flex-basis:auto!important;min-width:0;border-radius:0!important;margin:0}
body[data-shelf=favorites] #cards .card-body{padding:17px!important;display:flex;flex-direction:column;gap:9px}
body[data-shelf=favorites] #cards .quick-favorite{right:9px;top:9px;background:#0d180fe8}
body>.site-footer{isolation:isolate}
body>.site-footer:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 0% 100%,#b5db2510,transparent 65%),radial-gradient(ellipse at 100% 100%,#b5db2510,transparent 65%);animation:life-footer 12s ease-in-out infinite alternate;pointer-events:none}
body>.site-footer .footer-bottom{border-image:linear-gradient(90deg,transparent,#7e9b3c45,transparent) 1}
body[data-season=winter] .portal-scene{background:#070e12}
body[data-season=winter] .portal-castle{display:block;position:absolute;inset:-15px;background:linear-gradient(0deg,#080d0e,transparent 22%),url('/static/seasonal/winter-scene.webp') center/cover;transform:translate(calc(var(--mx,0px)*.35),calc(var(--my,0px)*.35)) scale(1.03);transition:transform 1s ease-out}
body[data-season=summer] .portal-castle{display:block;position:absolute;inset:-15px;background:linear-gradient(0deg,#080d0e,transparent 22%),url('/static/seasonal/summer-scene.webp') center/cover;transform:translate(calc(var(--mx,0px)*.35),calc(var(--my,0px)*.35)) scale(1.03);transition:transform 1s ease-out}
body[data-season=winter] .portal-float,body[data-season=winter] .portal-ribbon,body[data-season=summer] .portal-float,body[data-season=summer] .portal-ribbon{display:none}
body[data-season=winter] .portal-particles{mask-image:none;background-image:radial-gradient(circle,#e5f2cebb 1px,transparent 2px),radial-gradient(circle,#cde5c880 1px,transparent 2px);background-size:131px 119px,177px 151px;opacity:.5;animation:life-snow 20s linear infinite}
body[data-season=summer] .portal-fog{background:radial-gradient(ellipse,#d2b86315,transparent 65%)}
.life-season-details{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.life-season-bat{display:none;position:absolute;top:15%;right:-80px;color:#92b35e;opacity:.4;animation:life-bat 30s linear infinite}
body[data-season=halloween]:not(.portal-home) .life-season-bat{display:block}
.life-season-bat i{display:block;width:32px;height:15px;border-radius:50%;background:#789742;clip-path:polygon(0 0,22% 35%,40% 0,50% 55%,60% 0,78% 35%,100% 0,80% 100%,50% 70%,20% 100%)}
.life-season-details .life-season-glint{position:absolute;right:0;top:10px;width:100px;height:100px;background:radial-gradient(circle,#caff2510,transparent 70%);animation:life-footer 8s ease-in-out infinite alternate}
.life-design-divider{height:1px;background:linear-gradient(90deg,transparent,#b1d63b40,transparent);margin:22px 0}
.life-static-art{filter:drop-shadow(0 15px 25px #0006)}
@keyframes life-enter{from{transform:translateY(12px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes life-dialog{from{transform:translateY(18px) scale(.985);opacity:.5}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes life-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.08);filter:brightness(1.15)}}
@keyframes life-shimmer{to{transform:translateX(100%)}}
@keyframes life-profile-wave{to{rotate:360deg}}
@keyframes life-footer{from{opacity:.3}to{opacity:1}}
@keyframes life-snow{to{background-position:65px 238px,-80px 302px}}
@keyframes life-bat{0%,75%{translate:0 0;opacity:0}78%{opacity:.4}96%{opacity:.4}100%{translate:-110vw 40px;opacity:0}}
@media(min-width:901px){#life-dialogs dialog{backdrop-filter:blur(12px)}#detail .life-product-masthead{min-height:250px}}
@media(max-width:900px){.life-section-banner{padding:20px;gap:18px}.life-posters img{width:50px;height:68px}.life-posters img:nth-child(2){width:60px;height:82px}.life-posters img:nth-child(3){display:none}}
@media(max-width:700px){.life-section-banner{align-items:flex-start;gap:15px}.life-section-banner h3{font-size:21px}.life-posters{padding:0;gap:0}.life-posters img{display:none}.life-posters img:nth-child(2){display:block;width:60px;height:85px}.life-section-banner p{font-size:11px}.life-profile-cover{padding:20px!important;gap:12px!important}.life-profile-cover .life-rank-emblem{width:55px;height:55px}.life-player-card{padding:19px;gap:12px}.life-player-card>img{width:53px;height:53px}.life-player-card strong{font-size:17px}.life-guide-grid{grid-template-columns:1fr}.life-guide-step{display:grid;grid-template-columns:29px minmax(0,1fr);gap:5px 12px}.life-guide-step b{grid-row:span 2;margin:0}.life-guide-step strong{margin:0}.life-guide-step p{grid-column:2}.life-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.life-saved-recipients{grid-template-columns:1fr}.life-card-preview{padding:18px}.life-card-preview strong{font-size:23px}.life-card-preview img{width:50px;height:50px}.life-scene-heading .life-heading-art{width:70px;height:70px}.life-wallet-visual{padding:15px;gap:13px}.life-wallet-visual img{width:65px;height:65px}.life-wallet-visual strong{font-size:21px}.life-checkout-steps{gap:7px}.life-checkout-steps li{font-size:10px;gap:6px}.life-support-banner{padding:15px;gap:12px}.life-support-banner img{width:60px;height:60px}.notification-item header{flex-wrap:wrap;gap:5px}.notification-item header b{font-size:13px}.notification-item p{font-size:12px}.life-envelope img{width:50px;height:50px}.received-code.life-sealed{flex-wrap:wrap}.life-envelope-copy{flex:1;min-width:125px}.life-envelope button{width:100%}body[data-shelf=favorites] #cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}body[data-shelf=favorites] #cards .card-media{height:115px!important}body[data-shelf=favorites] #cards .card-body{padding:12px!important}.life-effects-setting label{align-items:flex-start;flex-direction:column}.life-effects-setting select{width:100%}}
@media(max-width:550px){dialog:not(#life-lightbox):not(#support-screen):not(#notifications-screen){position:fixed;inset:auto 0 0!important;width:100%!important;max-width:100%!important;max-height:90dvh;min-width:0;margin:0!important;border-radius:24px 24px 0 0!important;padding:24px 20px calc(25px + env(safe-area-inset-bottom))!important;overflow-y:auto;box-sizing:border-box}dialog:not(#life-lightbox):not(#support-screen):not(#notifications-screen):before{content:'';display:block;width:38px;height:4px;border-radius:3px;background:#627a4a;margin:0 auto 19px}dialog h2{font-size:25px}.life-dialog-art{width:75px;height:70px}.life-order-success strong{font-size:21px}.life-greeting{padding:20px}.life-greeting strong{font-size:21px}.life-greeting p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.life-view,.life-dialog-opening,.life-pulse,.life-profile-cover:before,body>.site-footer:before,.life-season-details *,.life-skeleton:after{animation:none!important}body[data-season=winter] .portal-particles{animation:none!important}#cards .card-media,#cards .card:before,#discover .game-art{transition:none!important;transform:none!important}}
body[data-motion=off] *,body[data-motion=off] *:before,body[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body[data-motion=light] .life-profile-cover:before,body[data-motion=light] .life-season-details *,body[data-motion=light]>.site-footer:before{animation:none!important}
body[data-motion=light] #discover .game-art,body[data-motion=off] #discover .game-art{transform:none!important}
body[data-motion=off] .portal-slime b{display:none}

.order-progress li{transition:border-color .4s,color .4s}.life-player-card{flex-wrap:wrap}.life-player-card>button{margin-left:auto;font-size:11px;min-height:40px}.life-player-card>div{min-width:0;flex:1}.life-profile-cover .profile-head>div{min-width:0}
@media(max-width:700px){.life-guide-art{grid-column:1;grid-row:2;width:30px;height:30px;margin:0;float:none}.life-guide-step p{grid-column:2}.life-player-card>button{width:100%;margin:0}}

/* In the order card the delivery kind is a label on the product, not a block
   of its own under the name. */
.order-product .life-delivery-badge{margin:8px 0 0;padding:4px 10px;font-size:10.5px;border-radius:999px}

/* catalog-panorama.css */
/* Left artwork panorama. The original image is always contained,
never cropped. */
.card-art-atmosphere{display:none}
.collection-strip .card-media{position:relative;display:block;width:100%;height:112px;min-height:112px;flex:0 0 auto;overflow:hidden;border-radius:10px}
.collection-strip .card-media .card-image{display:block;width:100%;height:112px;min-height:0;max-height:112px;object-fit:contain;aspect-ratio:auto}
.collection-strip .card{flex-direction:column!important;justify-content:flex-start;height:auto;align-self:stretch}
.collection-strip .card-body{flex:1}
#catalog #discover .discovery-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
#catalog #discover .game-art{width:clamp(58px,5.2vw,96px);height:clamp(58px,5.2vw,96px);min-height:58px}
@media(min-width:701px) and (max-width:1150px){#catalog #discover .discovery-grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:24px}}
@media(max-width:700px){#catalog #discover .discovery-grid{display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;padding:4px 4px 14px;scrollbar-width:thin;scrollbar-color:#6c852d #172219}#catalog #discover .game-tile{flex:0 0 82px;width:82px;scroll-snap-align:start}#catalog #discover .game-art{width:74px;height:74px;min-height:74px}#catalog #discover .game-tile strong{font-size:11px;white-space:normal}}


/* catalog-console.css */
/* Approved console catalog. Scope all rules to the catalog, preserving checkout. */
#console-menu-toggle{display:none}
body.console-catalog{background:#090f0c}
body.console-catalog>header{position:relative;display:flex;align-items:center;gap:18px;min-height:78px;padding:16px 28px;background:#111a15;border-bottom:1px solid #29332b;box-shadow:none;max-width:none}
body.console-catalog>header #home{width:190px;margin:0;flex:0 0 190px;font-size:26px}
body.console-catalog>header .search-shell{flex:1;min-width:0;margin:0;max-width:800px;position:relative}
body.console-catalog #search{display:flex;gap:8px;background:#0b120e;border:1px solid #29332b;border-radius:8px;min-height:44px;padding:5px 9px;margin:0}
body.console-catalog #query{width:100%;min-width:0;padding:5px;font-size:14px;background:transparent;border:0}
body.console-catalog #search button{min-height:32px;padding:6px 12px;font-size:12px;border-radius:6px}
body.console-catalog #search-results{z-index:80;width:100%;max-width:none}
body.console-catalog>nav{display:none!important}
body.console-catalog>main{width:100%;max-width:1700px;margin:0 auto;padding:0 28px 35px}
body.console-catalog #catalog{padding:0}
body.console-catalog #search-hint,body.console-catalog #discover,body.console-catalog #portal-steam,body.console-catalog #quick-tasks,body.console-catalog #life-section-banner,body.console-catalog #layout-toggle,body.console-catalog #collection-previews{display:none!important}
body.console-catalog #portal-catalog-board{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0;margin:0;padding:0;border:0;min-height:760px}
body.console-catalog .portal-section-menu{display:flex;flex-direction:column;gap:5px;align-items:stretch;background:linear-gradient(155deg,#111b14,#0b120e);border-right:1px solid #29332b;padding:28px 13px 25px 0}
body.console-catalog .portal-section-menu>small,body.console-catalog .console-personal>small{display:block;font-size:10px;letter-spacing:1.8px;color:#8e9c85;margin:0 12px 14px}
body.console-catalog .portal-section-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 10px;font-size:13px;border:1px solid transparent;border-radius:7px;line-height:1.5;background:transparent;color:#b2bdad;white-space:normal}
body.console-catalog .portal-section-menu button svg{width:17px;height:17px;flex:0 0 17px}
body.console-catalog .portal-section-menu button[aria-pressed=true]{background:#cdff28;color:#18210a;font-weight:750;border-color:#cdff28}
body.console-catalog .portal-section-menu button:hover{filter:brightness(1.12);background:#26331d}
body.console-catalog .portal-section-menu button[aria-pressed=true]:hover{background:#cdff28}
body.console-catalog .console-personal{margin-top:26px}
body.console-catalog .console-help{margin-top:auto;padding-top:35px}
body.console-catalog .console-help p{font-size:12px;color:#9ba698;padding:0 10px}
body.console-catalog #portal-catalog-results{padding:30px;min-width:0;background-image:radial-gradient(ellipse at 70% 0%,#b5e83108,transparent 45%),linear-gradient(#a1b08d05 1px,transparent 1px),linear-gradient(90deg,#a1b08d05 1px,transparent 1px);background-size:auto,38px 38px,38px 38px}
body.console-catalog #portal-catalog-results>.section-title{margin:0 0 9px;padding:0}
body.console-catalog #catalog-heading{font-size:32px;line-height:1.2;letter-spacing:-1px;font-weight:800;margin:0}
body.console-catalog #portal-catalog-results>.section-title .pill{display:none}
body.console-catalog .console-subtitle{font-size:13px;color:#9ba698;margin:0 0 23px;line-height:1.6}
body.console-catalog #suggestions{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
body.console-catalog #suggestions button{padding:8px 13px;border:1px solid #33402e;border-radius:6px;background:#172219;font-size:12px;min-height:36px}
body.console-catalog #catalog-display-anchor{border-bottom:1px solid #29332b;margin:0 0 23px;padding:0 0 16px}
body.console-catalog #cards,body.console-catalog #cards[data-layout]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;align-items:stretch}
body.console-catalog #cards .catalog-card-shell{min-width:0;width:100%;height:100%;position:relative;border-radius:12px;overflow:hidden;background:#131e16;border:1px solid #2b382c;box-shadow:none}
body.console-catalog #cards .card{display:flex!important;flex-direction:column!important;align-items:stretch;gap:0;width:100%;height:100%;min-height:0;padding:0!important;border:0;border-radius:12px;background:linear-gradient(145deg,#19231a,#111a14)!important;box-shadow:none;transform:none;container-type:normal;overflow:hidden}
body.console-catalog #cards .card:hover{background:#1b291b!important;transform:none;box-shadow:inset 0 0 0 1px #6a8131}
body.console-catalog #cards .card-media{display:block;position:relative;width:100%!important;height:auto!important;min-height:0!important;min-width:0;flex:0 0 auto!important;aspect-ratio:1.65;border:0;border-radius:0;overflow:hidden;padding:0;background:#16221a}
body.console-catalog #cards .card-art-atmosphere{display:none!important}
body.console-catalog #cards .card-media .card-image{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain;border-radius:0;padding:0!important;transform:none;background:#142018!important}
body.console-catalog #cards .card[data-panorama-art=true] .card-image{object-fit:cover}
body.console-catalog #cards .card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;gap:8px 10px;padding:17px!important;min-width:0;width:100%;flex:1}
body.console-catalog #cards .card .card-body>strong{grid-column:1/-1;grid-row:auto;display:block;font-size:18px;line-height:1.35;letter-spacing:-.4px;font-weight:750;min-height:0;height:auto;margin:0;white-space:normal;-webkit-line-clamp:unset}
body.console-catalog #cards .card-meta{grid-column:1/-1;grid-row:auto;margin:0}
body.console-catalog #cards .type-chip{font-size:11px;background:transparent;padding:0;color:#9ba698}
body.console-catalog #cards .card-detail{grid-column:1/-1;grid-row:auto;display:block;font-size:12px;line-height:1.5;color:#b1bdab;min-height:18px;white-space:normal}
body.console-catalog #cards .card-price{grid-column:1;grid-row:4;display:flex;align-items:baseline;flex-direction:row;gap:5px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid #ffffff0a}
body.console-catalog #cards .card-price small{font-size:10px}
body.console-catalog #cards .card-price b{font-size:20px;white-space:normal}
body.console-catalog #cards .card-cta{grid-column:2;grid-row:4;align-self:end;font-size:12px;color:#cdff28;line-height:1.4;padding:0;margin:0;border:0;background:none;white-space:normal;text-align:right}
body.console-catalog #cards .quick-favorite{position:absolute;right:10px;top:10px;bottom:auto;width:34px;height:34px;min-height:34px;padding:7px;border-radius:7px;background:#0c140fe8;border:1px solid #ffffff25}
body.console-catalog #cards .empty{grid-column:1/-1}
body.console-catalog #cards .skeleton{height:310px;border-radius:12px}
body.console-catalog #pages{margin-top:28px}
@media(min-width:1500px){body.console-catalog #cards[data-layout]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1050px){body.console-catalog #portal-catalog-board{grid-template-columns:185px minmax(0,1fr)}body.console-catalog #portal-catalog-results{padding:24px}body.console-catalog #cards[data-layout]{grid-template-columns:repeat(2,minmax(0,1fr))}body.console-catalog>header #home{width:165px;flex-basis:165px}body.console-catalog #cards .card-body{padding:14px!important}body.console-catalog #cards .card-price b{font-size:18px}}
@media(max-width:700px){body.console-catalog>header{padding:14px 16px;gap:10px;flex-wrap:wrap;min-height:0}body.console-catalog>header #home{width:auto;flex:1;font-size:24px}body.console-catalog #console-menu-toggle{display:block;padding:8px;font-size:12px;min-height:40px}body.console-catalog>header .search-shell{order:10;flex-basis:100%;max-width:none}body.console-catalog #query{font-size:16px}body.console-catalog>main{padding:0 16px 25px}body.console-catalog #portal-catalog-board{display:block;min-height:0}body.console-catalog .portal-section-menu{display:none;padding:20px 10px;border:1px solid #29332b;border-radius:10px;margin:14px 0}body.console-catalog.console-menu-open .portal-section-menu{display:flex}body.console-catalog #portal-catalog-results{padding:24px 0}body.console-catalog #catalog-heading{font-size:27px}body.console-catalog #cards[data-layout]{gap:12px}body.console-catalog #cards .card .card-body>strong{font-size:16px}body.console-catalog #cards .card-media{aspect-ratio:1.4}body.console-catalog #cards .card-body{display:flex;flex-direction:column;padding:12px!important;gap:7px}body.console-catalog #cards .card-price{margin-top:auto;padding-top:12px}body.console-catalog #cards .card-cta{align-self:start}body.console-catalog #cards .card-detail{font-size:11px}body.console-catalog .console-help{padding-top:15px}}
@media(max-width:360px){body.console-catalog #cards[data-layout]{grid-template-columns:1fr}}

/* catalog-redesign.css */
/* Catalog visual layer. Loads last, restyles the console catalog only.
   The DOM, the markup and every handler stay untouched: this file changes
   appearance, never structure. Scoped to body.console-catalog so checkout,
   the landing and the product screen keep their own styles. */

body.console-catalog{
  --cat-ink:#f4f7f2;
  --cat-mute:#7e8a7f;
  --cat-line:#1e241f;
  --cat-surface:#0f1211;
  --cat-accent:#cbff4d;
  --cat-accent-ink:#101706;
  --cat-radius:0px;
  background:#0b0d0c;
}

/* ---------- Header: one calm bar instead of two competing ones ---------- */
body.console-catalog>header{
  min-height:72px;padding:14px 30px;gap:22px;
  background:#0d100e;border-bottom:1px solid var(--cat-line);
  justify-content:flex-start;
}
/* Keep account actions beside search instead of distributing spare space between them. */
body.console-catalog>header #notifications-button,
body.console-catalog>header #account-login{margin-left:0;margin-right:0;flex-shrink:0}
body.console-catalog>header #account-login{align-self:center}
@media(min-width:701px){
  /* Match main's 1700px container and 28px gutters; keep the background full width. */
  body.console-catalog>header{
    padding-left:max(28px,calc((100% - 1700px)/2 + 28px));
    padding-right:max(28px,calc((100% - 1700px)/2 + 28px));
    gap:16px;
  }
  /* Sidebar + results inset minus the header gap aligns search with the products. */
  body.console-catalog>header #home{width:228px;flex:0 0 228px}
  body.console-catalog>header .search-shell{flex:1;max-width:none}
  body.console-catalog>header #account-login{max-width:160px}
}
@media(min-width:701px) and (max-width:1050px){
  body.console-catalog>header #home{width:193px;flex-basis:193px}
  body.console-catalog>header{gap:12px}
}
body.console-catalog #search{
  background:#0b0d0c;border:1px solid #2a332b;border-radius:0;
  min-height:46px;padding:5px 7px 5px 14px;transition:border-color .18s;
}
body.console-catalog .search-shell:focus-within #search{border-color:var(--cat-accent)}
body.console-catalog #search button{border-radius:0;min-height:38px;font-size:12px;letter-spacing:.6px}
body.console-catalog #search button[type=submit]{
  background:var(--cat-accent);color:var(--cat-accent-ink);border-color:var(--cat-accent);font-weight:700;
}

/* ---------- Sidebar: quieter, with a clear active state ---------- */
body.console-catalog .portal-section-menu{
  background:#0b0d0c;
  border-right:1px solid var(--cat-line);padding:22px 16px 24px 0;
}
body.console-catalog .portal-section-menu button{
  border-radius:0;padding:12px 13px;min-height:46px;transition:background .14s,color .14s;
}
body.console-catalog .portal-section-menu button[aria-pressed=true]{
  background:var(--cat-accent);color:var(--cat-accent-ink);border-color:var(--cat-accent);
}
body.console-catalog .portal-section-menu button:not([aria-pressed=true]):hover{
  background:#11150f;color:var(--cat-ink);filter:none;
}

/* ---------- Results area: drop the busy grid wallpaper ---------- */
body.console-catalog #portal-catalog-results{
  padding:30px 32px 46px;
  background-image:none;
}
body.console-catalog #catalog-heading{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-1.5px}
body.console-catalog .console-subtitle{margin:0 0 20px}

body.console-catalog #suggestions button{
  border-radius:0;padding:9px 14px;background:transparent;border-color:var(--cat-line);
  color:var(--cat-mute);transition:border-color .16s,color .16s;
}
body.console-catalog #suggestions button:hover{border-color:#3c4a3d;color:var(--cat-ink)}
body.console-catalog #catalog-display-anchor{
  border-bottom:1px solid var(--cat-line);margin:0 0 22px;padding:0 0 15px;
}

/* ---------- Cards ----------
   The old card was art on top and a tall, mostly empty dark block below.
   The artwork now carries the card: it fills the frame, fades into the body
   so there is no hard seam, and the text block is packed tight underneath. */
body.console-catalog #cards,
body.console-catalog #cards[data-layout]{gap:18px}

body.console-catalog #cards .catalog-card-shell{
  border-radius:var(--cat-radius);border:1px solid var(--cat-line);
  background:var(--cat-surface);overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
body.console-catalog #cards .catalog-card-shell:hover{
  transform:translateY(-3px);border-color:#3c4a3d;
  box-shadow:0 18px 38px rgba(0,0,0,.45);
}
body.console-catalog #cards .card{
  border-radius:var(--cat-radius);background:transparent!important;
}
body.console-catalog #cards .card:hover{background:transparent!important;box-shadow:none}

/* Taller artwork, no dark plate, and a gradient that blends it into the body. */
body.console-catalog #cards .card-media{
  aspect-ratio:1/1;background:#0d100f;
}
body.console-catalog #cards .card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 34%,rgba(17,26,20,.72) 82%,var(--cat-surface) 100%);
}
body.console-catalog #cards .card-media .card-image{
  object-fit:contain;padding:11%!important;background:transparent!important;
  transition:transform .5s ease;
}
body.console-catalog #cards .card[data-panorama-art=true] .card-media .card-image{
  object-fit:cover;padding:0!important;
}
body.console-catalog #cards .catalog-card-shell:hover .card-image{transform:scale(1.06)}

/* The body overlaps the art slightly, so the two read as one surface. */
body.console-catalog #cards .card-body{
  position:relative;z-index:1;margin-top:-26px;
  padding:0 16px 15px!important;gap:5px 10px;
}
body.console-catalog #cards .card .card-body>strong{
  font-size:17px;line-height:1.2;letter-spacing:-.5px;font-weight:800;color:var(--cat-ink);
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

/* Type becomes a real tag; regions read as one quiet line of metadata. */
body.console-catalog #cards .card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
body.console-catalog #cards .type-chip{
  display:inline-block;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  color:#b8c4b9;background:transparent;border:1px solid var(--cat-line);
  border-radius:0;padding:3px 9px;
}
body.console-catalog #cards .card-detail{
  font-size:11.5px;color:var(--cat-mute);letter-spacing:.2px;min-height:0;
}

/* Price is the anchor; the CTA is a filled button, not a hint. */
body.console-catalog #cards .card-price{
  align-items:baseline;gap:6px;margin:12px 0 0;padding:12px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
}
body.console-catalog #cards .card-price small{
  font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--cat-mute);
}
body.console-catalog #cards .card-price b{
  font-size:21px;letter-spacing:-.7px;color:var(--cat-ink);font-weight:700;
  font-variant-numeric:tabular-nums;
}
body.console-catalog #cards .card-cta{
  align-self:center;margin-top:12px;padding:10px 15px;border-radius:0;min-height:42px;
  display:inline-flex;align-items:center;
  background:transparent;border:1px solid #2a332b;
  color:var(--cat-ink);font-size:12px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;
}
body.console-catalog #cards .catalog-card-shell:hover .card-cta{
  background:var(--cat-accent);color:var(--cat-accent-ink);border-color:var(--cat-accent);
}

body.console-catalog #cards .quick-favorite{
  right:11px;top:11px;width:34px;height:34px;border-radius:0;
  background:rgba(8,13,10,.65);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

body.console-catalog #cards .skeleton{
  height:auto;min-height:320px;border-radius:0;
  background:linear-gradient(100deg,var(--cat-surface) 30%,#1c231d 50%,var(--cat-surface) 70%);
  background-size:220% 100%;animation:cat-shimmer 1.4s linear infinite;
}
@keyframes cat-shimmer{to{background-position:-220% 0}}

body.console-catalog #pages{margin-top:30px}

@media(max-width:1050px){
  body.console-catalog #portal-catalog-results{padding:24px}
  body.console-catalog #cards .card-body{padding:0 13px 13px!important}
  body.console-catalog #cards .card .card-body>strong{font-size:17px}
  body.console-catalog #cards .card-price b{font-size:20px}
}
@media(max-width:700px){
  body.console-catalog #portal-catalog-results{padding:22px 0 30px}
  body.console-catalog #catalog-heading{font-size:26px}
  body.console-catalog #cards,
  body.console-catalog #cards[data-layout]{gap:12px}
  body.console-catalog #cards .card-media{aspect-ratio:1/1}
  body.console-catalog #cards .card-body{padding:0 12px 12px!important}
  body.console-catalog #cards .card .card-body>strong{font-size:15px}
  body.console-catalog #cards .card-price b{font-size:18px}
  body.console-catalog #cards .card-cta{align-self:stretch;text-align:center;margin-top:10px}
  body.console-catalog #cards .skeleton{min-height:230px}
}

@media(prefers-reduced-motion:reduce){
  body.console-catalog #cards .catalog-card-shell,
  body.console-catalog #cards .card-image{transition:none}
  body.console-catalog #cards .catalog-card-shell:hover{transform:none}
  body.console-catalog #cards .catalog-card-shell:hover .card-image{transform:none}
  body.console-catalog #cards .skeleton{animation:none}
}

/* ---------- Filters row: region and sort read as one pair ---------- */
body.console-catalog .catalog-region,
body.console-catalog .catalog-sort{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--cat-mute);
}
body.console-catalog .catalog-region select,
body.console-catalog .catalog-sort select{
  width:auto;min-width:150px;background:#131d16;border:1px solid var(--cat-line);
  border-radius:10px;padding:9px 12px;font-size:13px;letter-spacing:0;text-transform:none;color:var(--cat-ink);
}
body.console-catalog .catalog-region select:hover,
body.console-catalog .catalog-sort select:hover{border-color:#4d6136}
body.console-catalog #catalog-display-anchor{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
body.console-catalog #catalog-count{margin-right:auto}

/* ---------- Global editions ----------
   A global card carries the same artwork as its regional twin, so the pair
   reads as a duplicate in the grid. Tint the art and label the scope. */
body.console-catalog #cards .card[data-scope=global] .card-media{
  background:#0d100f;
}
/* Обложку не перекрашиваем: цвет игры — часть её узнавания.
   Глобальную версию отличает метка, а не искажённая картинка. */
body.console-catalog #cards .card[data-scope=global] .card-media::before{
  content:"GLOBAL";position:absolute;left:11px;top:11px;z-index:2;
  font-size:9.5px;font-weight:800;letter-spacing:1.4px;
  color:#c6d2c7;background:rgba(6,8,7,.78);border:1px solid rgba(255,255,255,.14);
  border-radius:0;padding:4px 9px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}


/* ---------- Mobile ---------- */
@media(max-width:700px){
  body.console-catalog #catalog-display-anchor{gap:9px;padding-bottom:13px}
  body.console-catalog #catalog-count{flex-basis:100%;margin:0 0 2px}
  body.console-catalog .catalog-region,
  body.console-catalog .catalog-sort{flex:1;min-width:0;flex-direction:column;align-items:stretch;gap:4px;font-size:9.5px}
  body.console-catalog .catalog-region select,
  body.console-catalog .catalog-sort select{width:100%;min-width:0;padding:10px;font-size:14px}
  body.console-catalog #suggestions{gap:6px;margin-bottom:14px}
  body.console-catalog #suggestions button{padding:7px 13px;font-size:11.5px;min-height:38px}
  body.console-catalog #cards .card[data-scope=global] .card-media::before{
    left:8px;top:8px;font-size:8.5px;padding:3px 8px;
  }
  body.console-catalog #cards .quick-favorite{right:8px;top:8px;width:30px;height:30px;min-height:30px}
  body.console-catalog #cards .card-detail{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  body.console-catalog #pages{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap}
  body.console-catalog #pages button{min-height:44px}
}
@media(max-width:420px){
  body.console-catalog #cards,
  body.console-catalog #cards[data-layout]{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.console-catalog #cards .card-body{padding:0 10px 11px!important;margin-top:-22px}
  body.console-catalog #cards .card .card-body>strong{font-size:14px;line-height:1.2}
  body.console-catalog #cards .card-price{margin-top:9px;padding-top:9px}
  body.console-catalog #cards .card-price b{font-size:16px}
  body.console-catalog #cards .card-price small{font-size:8.5px}
  body.console-catalog #cards .card-cta{padding:8px 10px;font-size:11px;margin-top:8px}
  body.console-catalog #cards .type-chip{font-size:9px;padding:2px 8px}
}


/* ---------- Игры: обложка во всю карточку ----------
   В assets/games обложки игр лежат в формате Steam header — 460x215, то есть
   горизонтальные. Вертикальный постер 3:4 из них не собрать: кадрирование
   срезает половину названия на самой картинке. Поэтому для ключей и подарков
   кадр повторяет пропорции исходника, а градиент снизу держит подпись
   читаемой на любой обложке. Если в каталоге появятся вертикальные обложки
   600x900, этот блок — единственное место, где нужно поменять aspect-ratio. */
body.console-catalog #cards .card[data-section=gamekeys] .card-media,
body.console-catalog #cards .card[data-section=steam_gifts] .card-media{aspect-ratio:1.9}
body.console-catalog #cards .card[data-section=gamekeys][data-panorama-art=true] .card-media .card-image,
body.console-catalog #cards .card[data-section=steam_gifts][data-panorama-art=true] .card-media .card-image{
  object-fit:cover;padding:0!important;
}

/* Логотип сервиса не растягиваем: он стоит по центру своего поля. */
body.console-catalog #cards .card-media[data-art-fit=logo] .card-image{
  object-fit:contain;padding:17%!important;
}

/* Четвёртая колонка появляется раньше: карточки стали ниже. */
@media(min-width:1360px){
  body.console-catalog #cards[data-layout]{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* shop-redesign.css */
/* Product screen and basket, in the same system as the catalog layer.
   Appearance only: the markup, the ids and every handler stay untouched.
   The catalog layer is scoped to body.console-catalog; these two screens
   live outside it, so they carry their own scopes (#detail, #basket). */

:root{
  --shop-ink:#f2f7ee;
  --shop-mute:#8e9d8c;
  --shop-line:#263228;
  --shop-surface:#111a14;
  --shop-surface-2:#16211a;
  --shop-accent:#cdff28;
  --shop-accent-ink:#16210a;
}

/* ================= Product screen ================= */
#detail.product-screen{background:#080c0a}
#detail .product-shell{max-width:1000px}
#detail #product-breadcrumb{
  font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--shop-mute);
}
#detail .modal-head button{
  border-radius:11px;border:1px solid var(--shop-line);background:#131d16;
  font-size:13px;min-height:42px;
}
#detail .modal-head button:hover{border-color:#4d6136}

/* The artwork gets the same frame and fade as a catalog card. */
#detail .product-image{
  width:100%;aspect-ratio:21/9;object-fit:cover;
  border-radius:20px;border:1px solid var(--shop-line);background:#0c1310;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 100%);
  mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.55) 100%);
}
#detail #product-title{
  font-size:30px;line-height:1.15;letter-spacing:-1px;font-weight:800;color:#fff;
}
#detail .product-tools button{
  border-radius:999px;border:1px solid var(--shop-line);background:#131d16;min-height:42px;
}
#detail #product-type{
  display:inline-block;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  color:var(--shop-accent);background:rgba(205,255,40,.12);border:1px solid rgba(205,255,40,.3);
  border-radius:999px;padding:3px 10px;
}

/* The step hints read as numbered stages, not as stray grey text. */
#detail #product-step,
#detail #offer-picker-title{margin-top:22px}
#detail #product-step{
  font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--shop-accent);
}
#detail #offer-picker-title{font-size:19px;letter-spacing:-.4px;font-weight:750}

/* Offer and region tiles: pick targets, so give them real weight. */
#detail #offers.offer-tiles,
#detail #offers.region-tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;
}
#detail #offers .offer,
#detail #offers button{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--shop-surface-2);border:1.5px solid var(--shop-line);border-radius:14px;
  padding:14px;min-height:84px;text-align:left;
  transition:border-color .16s,background .16s,transform .16s;
}
#detail #offers button:hover{border-color:#5d7a33;background:#1b2619;transform:translateY(-2px)}
#detail #offers button[aria-pressed=true]{
  border-color:var(--shop-accent);background:rgba(205,255,40,.1);
}
#detail #offers button strong{font-size:16px;font-weight:750;color:var(--shop-ink)}
#detail #offers button small{font-size:12px;color:var(--shop-mute)}
#detail #offers .tile-price{
  margin-top:7px;font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--shop-accent);
}
#detail #offers button svg{position:absolute;right:12px;top:12px;opacity:0}
#detail #offers button[aria-pressed=true] svg{opacity:1;color:var(--shop-accent)}
#detail #offers button{position:relative}

/* Recipient form. */
#detail #buyer{
  margin-top:22px;background:var(--shop-surface);border:1px solid var(--shop-line);
  border-radius:18px;padding:20px;
}
#detail #buyer h3{font-size:17px;margin:0 0 4px}
#detail #buyer #price{font-size:24px;letter-spacing:-.6px;color:var(--shop-accent);font-weight:800}
#detail #buyer input,
#detail #buyer select{
  background:#0b120e;border:1px solid var(--shop-line);border-radius:11px;padding:12px 13px;
}
#detail #buyer input:focus,
#detail #buyer select:focus{border-color:var(--shop-accent);outline:none}
#detail #form-error:not(:empty){
  margin-top:10px;color:#ff9b9b;background:rgba(255,107,107,.08);
  border:1px solid rgba(255,107,107,.28);border-radius:11px;padding:10px 12px;font-size:13px;
}

/* The action bar is the commitment point: make the price and button obvious. */
#detail .product-action{
  background:rgba(10,15,12,.92);border-top:1px solid var(--shop-line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
#detail .product-action small{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--shop-mute)}
#detail .product-action strong{font-size:24px;letter-spacing:-.7px;color:var(--shop-ink);font-weight:800}
#detail .product-action #add{
  background:var(--shop-accent);color:var(--shop-accent-ink);border-color:var(--shop-accent);
  font-weight:800;border-radius:13px;min-height:50px;padding:13px 24px;
}
#detail .product-action #add:not(:disabled):hover{filter:brightness(1.07)}

/* ================= Basket ================= */
#basket .section-title h2{font-size:27px;letter-spacing:-.8px;font-weight:800}
#basket .basket-summary{
  background:var(--shop-surface);border:1px solid var(--shop-line);border-radius:18px;padding:20px;
}
#basket .basket-summary h3{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--shop-mute);margin:0 0 8px;
}
#basket #total{font-size:30px;letter-spacing:-1px;font-weight:800;color:var(--shop-accent)}
#basket #total.total-message{font-size:15px;letter-spacing:0;color:var(--shop-mute);font-weight:500}
#basket #basket-count{font-size:13px;color:var(--shop-mute);margin:6px 0 0}
#basket .basket-promo{
  margin-top:16px;border-top:1px solid var(--shop-line);padding-top:14px;
  background:transparent;border-left:0;border-right:0;border-bottom:0;border-radius:0;
}
#basket .basket-promo summary{font-size:13px;color:var(--shop-mute)}
#basket #coupon-code{
  background:#0b120e;border:1px solid var(--shop-line);border-radius:11px;padding:11px 12px;
}
#basket #to-bot{
  margin-top:16px;background:var(--shop-accent);color:var(--shop-accent-ink);
  border-color:var(--shop-accent);font-weight:800;border-radius:13px;min-height:52px;
}
#basket #to-bot:not(:disabled):hover{filter:brightness(1.07)}
#basket #to-bot.needs-minimum{
  background:rgba(205,255,40,.12);color:var(--shop-accent);border-color:rgba(205,255,40,.35);
}

/* Each line reads as one product: artwork, what it is, what it costs. */
#basket .cart-product{
  background:var(--shop-surface);border:1px solid var(--shop-line);border-radius:18px;padding:18px;
}
#basket .cart-product+.cart-product{margin-top:12px}
#basket .cart-product-head strong{font-size:17px;font-weight:750;color:var(--shop-ink)}
#basket .cart-product-info small{color:var(--shop-mute)}
#basket .cart-product .quiet{color:var(--shop-mute);text-decoration:underline}
#basket .cart-product .quiet:hover{color:var(--shop-ink)}
#basket .review-jump{
  animation:shop-jump 2.4s ease-out;
}
@keyframes shop-jump{
  0%,100%{box-shadow:none}
  12%,60%{box-shadow:0 0 0 2px var(--shop-accent)}
}

#basket .empty,
#detail .empty{
  background:var(--shop-surface);border:1px dashed var(--shop-line);border-radius:18px;
  padding:34px 20px;text-align:center;color:var(--shop-mute);
}

@media(max-width:700px){
  #detail .product-image{aspect-ratio:16/9;border-radius:16px}
  #detail #product-title{font-size:23px}
  #detail #offers.offer-tiles,
  #detail #offers.region-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #detail #offers button{padding:12px;min-height:76px}
  #detail #offers button strong{font-size:15px}
  #detail #offers .tile-price{font-size:16px}
  #detail #buyer{padding:16px;border-radius:16px}
  #detail .product-action strong{font-size:20px}
  #detail .product-action #add{min-height:48px;padding:12px 18px}
  #basket .section-title h2{font-size:22px}
  #basket #total{font-size:25px}
  #basket .cart-product{padding:15px;border-radius:16px}
}

@media(prefers-reduced-motion:reduce){
  #detail #offers button{transition:none}
  #detail #offers button:hover{transform:none}
  #basket .review-jump{animation:none;box-shadow:0 0 0 2px var(--shop-accent)}
}

/* ---------- the add-to-cart button ----------
   .product-action button carries flex:0 1 360px from when the panel was a
   horizontal bar, where 360px was its width. The panel is a column now, so
   that basis became the button's HEIGHT: a 360px tall lime block. Reset the
   basis here rather than touching the shared rule, which the mobile bar at the
   bottom of the screen still relies on. */
#detail .product-action button{flex:0 0 auto;margin-left:0}
#detail .product-action #add{height:auto}

/* ---------- the product title on a phone ----------
   #product-title carries flex:1 1 160px, so it shares its line with the share
   and favourite buttons. At 390px that leaves it about 200px and a name like
   "Roblox (Бразилия · BR)" breaks over three lines against the buttons. Give
   the title the whole line and let the buttons fall underneath it. */
@media(max-width:700px){
  #detail .product-body .section-title{flex-wrap:wrap;align-items:flex-start;gap:10px}
  #detail #product-title{flex:1 1 100%;font-size:22px;line-height:1.2}
  #detail .product-tools{margin-left:auto}
}

/* account-redesign.css */
/* Account screen, focus states and the Telegram Mini App, in the same system
   as the catalog and shop layers. Appearance only: markup and handlers are
   untouched. Scoped to #profile, plus global focus rules and a Mini App scope. */

/* ================= Focus and labels =================
   Every control must show where the keyboard is, in one consistent way. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--shop-accent,#cdff28);
  outline-offset:3px;
  border-radius:8px;
}
body.console-catalog #cards .catalog-card-shell:focus-within{
  border-color:var(--shop-accent,#cdff28);
}
/* The star and bell are icon-only controls: give them a visible hit area. */
#cards .quick-favorite:focus-visible,
#favorite:focus-visible,
#notifications-button:focus-visible{outline-offset:2px}

/* Screen-reader users hear the control; sighted keyboard users must see it. */
.skip-to-content:focus-visible{
  position:fixed;left:16px;top:16px;z-index:999;
  background:var(--shop-accent,#cdff28);color:var(--shop-accent-ink,#16210a);
  padding:10px 16px;border-radius:10px;font-weight:700;
}

/* Contrast: the old muted grey fell below 4.5:1 on the dark background. */
body.console-catalog .console-subtitle,
body.console-catalog #cards .card-detail,
#basket .cart-product-info small,
#profile #profile-items>.panel small,
#profile .identity-copy small{color:#a3b2a0}
.hint{color:#a3b2a0}

/* ================= Telegram Mini App =================
   Same page inside the bot: shorter viewport, native back button, and the
   bot's own bottom bar. Give the fixed bars room and drop the site chrome. */
body.telegram-app>header{position:static}
body.telegram-app #detail .product-action{
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
body.telegram-app #basket .basket-summary{position:static}
body.telegram-app main{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
body.telegram-app .portal-section-menu{padding-top:16px}
/* Telegram supplies its own back control, so the in-page one is redundant. */
body.telegram-app #detail .modal-head #close{display:none}

@media(max-width:700px){
  /* Touch targets stay at 44px, the usual minimum for a thumb. */
  #profile button,
  #basket button,
  #detail button{min-height:44px}
}

/* ---------- touch targets for text-style controls ----------
   Footer links and the inline buttons ("скопировать", "История операций")
   render 16-19px tall, well under the 44px a thumb needs. Pad them on touch
   screens without changing how they look on a desktop. */
@media(hover:none),(max-width:700px){
  .site-footer a,
  .site-footer button,
  #profile .pf-copy,
  #profile .pf-link{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* The footer's own rule (.footer-grid section:not(.footer-brand) a) sets
   min-height:0 and outranks a plainer selector, so the links stayed 16px tall
   on a phone however this file was ordered. Match its shape and go one class
   deeper, keeping the link look: the taller box is the tap area. */
@media(hover:none),(max-width:700px){
  .site-footer .footer-grid section:not(.footer-brand) a,
  .site-footer .footer-grid section:not(.footer-brand) button{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* profile-redesign.css */
/* Account screen. Identity strip, metric row, five tabs, and a content area
   that changes with the tab. Scoped to #profile and the order dialog. */

#profile{--pf-line:#253127;--pf-surface:#111a14;--pf-surface2:#16211a;--pf-mute:#a3b2a0;--pf-dim:#8a9888;
  --pf-accent:#cdff28;--pf-ink:#f2f7ee;--pf-ok:#7ee081;--pf-warn:#ffc46b;--pf-bad:#ff8f8f;--pf-r:16px}

/* ---------- unpaid banner: the one thing here that is money ---------- */
#profile .pf-unpaid{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;
  background:linear-gradient(135deg,rgba(255,196,107,.13),rgba(255,196,107,.04));
  border:1px solid rgba(255,196,107,.34);border-radius:var(--pf-r);padding:14px 17px;
}
#profile .pf-bang{
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:rgba(255,196,107,.16);color:var(--pf-warn);font-weight:800;
}
#profile .pf-unpaid b{display:block;font-size:14.5px}
#profile .pf-unpaid small{color:var(--pf-mute);font-size:12.5px}
#profile .pf-pay{
  margin-left:auto;background:var(--pf-warn);color:#2a1c05;border:0;border-radius:11px;
  padding:11px 18px;font-weight:750;font-size:13.5px;
}
#profile .pf-pay:hover{filter:brightness(1.07)}

/* ---------- identity ---------- */
#profile .profile-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px}
#profile #profile-avatar{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,#1f3320,#101a13);border:1px solid #38512c;
  color:var(--pf-accent);font-size:22px;font-weight:800;
}
#profile .pf-who{min-width:0}
#profile .pf-who .eyebrow{font-size:9.5px;letter-spacing:1.6px;color:var(--pf-dim)}
#profile #greeting{font-size:25px;letter-spacing:-.8px;font-weight:800;margin:1px 0 0}
#profile #account-identity{margin:2px 0 0;font-size:12.5px}
#profile .pf-rank{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px;
  background:rgba(205,255,40,.1);border:1px solid rgba(205,255,40,.28);color:var(--pf-accent);
  font-size:11px;font-weight:700;letter-spacing:.5px;
}

/* ---------- metrics ---------- */
#profile .pf-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px;align-items:stretch}
#profile .pf-m,
#profile .profile-balance{
  display:flex;flex-direction:column;background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:var(--pf-r);padding:16px 18px;margin:0;min-width:0;min-height:124px;
}
/* The note sits on the floor of every tile, so the rows line up across them. */
#profile .pf-note,
#profile .pf-link{margin-top:auto;padding-top:8px}
#profile .profile-balance{background:linear-gradient(150deg,#1b2a18,#111a14);border-color:#3c5527}
#profile .pf-lab{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--pf-dim)}
#profile .balance-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
#profile #balance{font-size:27px;font-weight:800;letter-spacing:-1px;color:var(--pf-accent)}
#profile #pf-spent{display:block;font-size:27px;font-weight:800;letter-spacing:-1px;margin-top:5px}
#profile .pf-note{display:block;font-size:11.5px;color:var(--pf-dim);margin-top:6px}
#profile #balance-topup{
  background:var(--pf-accent);color:#16210a;border-color:var(--pf-accent);
  font-weight:750;border-radius:11px;min-height:42px;padding:10px 16px;
}
#profile #balance-topup:hover{filter:brightness(1.07)}
#profile .pf-link{
  background:none;border:0;padding:0;margin-top:9px;color:var(--pf-mute);font-size:12px;
  text-decoration:underline dotted;min-height:0;
}
#profile .pf-link:hover{color:var(--pf-ink)}

/* The level panel sits in the metric row as a compact tile. */
#profile #user-level{display:block}
#profile #user-level b,
#profile #user-level .life-rank-medal{margin:5px 0 0}
#profile #user-level .life-rank-medal{display:flex;align-items:center;gap:10px}

#profile #user-level .life-rank-medal strong{font-size:16px;letter-spacing:-.3px}
#profile #user-level .life-rank-medal small{display:block;font-size:9.5px;letter-spacing:1.2px;color:var(--pf-dim)}
#profile #user-level progress{
  display:block;width:100%;height:6px;appearance:none;border:0;background:#0b120e;
  border-radius:99px;overflow:hidden;margin:10px 0 7px;
}
#profile #user-level progress::-webkit-progress-bar{background:#0b120e}
#profile #user-level progress::-webkit-progress-value{background:var(--pf-accent);border-radius:99px}
#profile #user-level progress::-moz-progress-bar{background:var(--pf-accent)}
#profile #user-level>small{font-size:11.5px;color:var(--pf-dim)}
/* The tier table rides along with this panel; it belongs in the settings tab. */
#profile #user-level details{display:none}

/* ---------- tabs ---------- */
#profile #profile-tabs{
  display:flex;gap:6px;border-bottom:1px solid var(--pf-line);margin:0 0 18px;
  padding:0;overflow-x:auto;scrollbar-width:none;
}
#profile #profile-tabs::-webkit-scrollbar{display:none}
#profile #profile-tabs button{
  background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:11px 14px;color:var(--pf-mute);font-size:14px;white-space:nowrap;margin-bottom:-1px;min-height:44px;
}
#profile #profile-tabs button:hover{color:var(--pf-ink)}
#profile #profile-tabs .selected{color:var(--pf-ink);font-weight:650;border-bottom-color:var(--pf-accent);background:none}

/* A horizontal scroller must not become a second vertical scroll surface on
   iOS. Keep every tab in one fixed-height row, including its underline. */
@media(max-width:700px){
  #profile #profile-tabs{
    height:52px;min-height:52px;box-sizing:border-box;align-items:stretch;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  }
  #profile #profile-tabs button{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    height:100%;min-height:0;margin:0;padding:12px 14px;line-height:20px;
    box-sizing:border-box;transform:none;
  }
  #profile #profile-tabs button:active:not(:disabled){transform:none}
}

/* ---------- filters ---------- */
#profile .pf-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
#profile .pf-chip{
  background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:999px;
  padding:8px 15px;font-size:13px;color:var(--pf-mute);min-height:40px;
}
#profile .pf-chip[aria-pressed=true]{background:var(--pf-accent);color:#16210a;border-color:var(--pf-accent);font-weight:700}
#profile #profile-note{font-size:12px;color:var(--pf-dim);margin:0 0 12px}

/* ---------- layout ---------- */
#profile .profile-overview{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start}
#profile .profile-sidebar{display:grid;gap:12px;position:sticky;top:16px;align-content:start}
#profile .pf-tile{background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:16px}
#profile .pf-tile h3{margin:0 0 4px;font-size:14px}
#profile .pf-tile p{margin:0;font-size:12.5px;line-height:1.5}
#profile .pf-actions{display:grid;gap:8px;margin-top:12px}
#profile .pf-actions button{
  background:var(--pf-surface2);border:1px solid var(--pf-line);border-radius:10px;
  padding:11px;font-size:13px;text-align:left;min-height:44px;
}
#profile .pf-actions button:hover{border-color:#4d6136}

/* ---------- order rows ----------
   Reading order: what it is, which order and when, how it stands, what it cost. */
#profile .pf-dayhead{
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--pf-dim);
  margin:16px 0 8px;padding-left:2px;
}
#profile .pf-dayhead:first-child{margin-top:0}
#profile #profile-items>.purchase-row{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto auto auto;align-items:center;gap:13px;
  width:100%;text-align:left;background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:var(--pf-r);padding:12px 14px;transition:border-color .15s,transform .15s;
}
#profile #profile-items>.purchase-row+.purchase-row{margin-top:7px}
#profile #profile-items>.purchase-row:hover{border-color:#4d6136;transform:translateX(2px)}
#profile .purchase-row-mark{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  color:#fff;font-weight:800;font-size:15px;
}
#profile .purchase-row-copy{display:grid;gap:2px;min-width:0}
#profile .purchase-row-title{
  font-size:14.5px;font-weight:650;color:var(--pf-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#profile .purchase-row-date{font-size:12px;color:var(--pf-dim)}
#profile .purchase-row-status{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
#profile .purchase-row-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#profile [data-tone=ok] .purchase-row-status{color:var(--pf-ok);background:rgba(126,224,129,.1);border:1px solid rgba(126,224,129,.25)}
#profile [data-tone=wait] .purchase-row-status{color:var(--pf-warn);background:rgba(255,196,107,.1);border:1px solid rgba(255,196,107,.25)}
#profile [data-tone=bad] .purchase-row-status{color:var(--pf-bad);background:rgba(255,143,143,.09);border:1px solid rgba(255,143,143,.22)}
#profile .purchase-row-price{display:grid;justify-items:end;gap:1px;white-space:nowrap}
#profile .purchase-row-price b{font-size:15.5px;font-weight:800;letter-spacing:-.3px}
#profile .purchase-row-price small{font-size:11px;color:var(--pf-dim)}
#profile .purchase-row-arrow{color:var(--pf-dim);font-size:19px}

/* ---------- search beside the filters ---------- */
#profile .pf-filters{align-items:center}
#profile .pf-search{
  display:flex;align-items:center;gap:7px;margin-left:auto;min-width:210px;
  background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:11px;padding:0 12px;
}
#profile .pf-search input{background:none;border:0;outline:0;padding:9px 0;width:100%;font-size:13.5px}
#profile .pf-search:focus-within{border-color:var(--pf-accent)}

/* ---------- identity line ---------- */
#profile .pf-idline{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:3px 0 0;font-size:12.5px;color:var(--pf-dim);
}
#profile .pf-copy{
  background:none;border:0;padding:0;min-height:0;color:var(--pf-dim);
  font:inherit;text-decoration:underline dotted;
}
#profile .pf-copy:hover{color:var(--pf-ink)}
/* The eyebrow repeated the page title; the name carries it. */
#profile .pf-who .eyebrow{display:none}
#profile #account-identity:empty{display:none}

/* ---------- tab counters ---------- */
#profile #profile-tabs button b{margin-left:7px;font-size:12px;font-weight:600;color:var(--pf-dim)}
#profile #profile-tabs .selected b{color:var(--pf-accent)}

/* ---------- unpaid banner ---------- */
#profile .pf-unpaid-copy{min-width:0;flex:1}
#profile .pf-later{
  background:none;border:0;min-height:0;padding:0;color:var(--pf-dim);
  font-size:12.5px;text-decoration:underline dotted;
}
#profile .pf-later:hover{color:var(--pf-ink)}

/* ---------- wallet rows ---------- */
#profile .pf-tx{
  display:flex;align-items:center;gap:13px;background:var(--pf-surface);
  border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:13px 15px;
}
#profile .pf-tx+.pf-tx{margin-top:8px}
#profile .pf-tx-icon{
  font-size:15px;line-height:1;
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:rgba(255,196,107,.12);color:var(--pf-warn);font-weight:800;
}
#profile .pf-tx[data-state=paid] .pf-tx-icon{background:rgba(126,224,129,.12);color:var(--pf-ok)}
#profile .pf-tx-copy{display:grid;gap:2px;min-width:0}
#profile .pf-tx-copy b{font-size:14px}
#profile .pf-tx-copy small{font-size:12px;color:var(--pf-dim)}
#profile .pf-tx-amount{margin-left:auto;font-weight:800;font-size:15px;white-space:nowrap}
#profile .pf-tx[data-state=paid] .pf-tx-amount{color:var(--pf-ok)}
#profile .pf-tx-pay{border-radius:10px;font-size:12px;padding:8px 12px;min-height:40px}

/* ---------- favourites ---------- */
#profile .pf-favs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}

/* ---------- saved recipients ---------- */
#profile #profile-items>.panel{
  background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:15px 16px;
}
#profile #profile-items>.panel+.panel{margin-top:8px}
#profile #profile-items>.panel b{font-size:14.5px}
#profile #profile-items>.panel small{display:block;color:var(--pf-mute);font-size:12.5px}

/* ---------- settings tab ---------- */
#profile .pf-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;align-items:start}
#profile .pf-settings>.panel{
  background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:17px;margin:0;
}
#profile .pf-settings h3{font-size:14px;margin:0 0 3px}
#profile .pf-settings .hint{font-size:12.5px;line-height:1.5}
#profile .identity-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
#profile .identity-logo{
  width:32px;height:32px;border-radius:999px;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff;flex:none;
}
#profile .identity-yandex{background:#e4352b}
#profile .identity-telegram{background:#2a9bd1}
#profile .identity-copy{min-width:0}
#profile .identity-copy b{display:block;font-size:13.5px}
#profile .identity-copy small{color:var(--pf-dim);font-size:11.5px}
#profile .identity-row button{margin-left:auto;border-radius:9px;min-height:40px;font-size:12px;padding:8px 12px}
#profile .danger-subtle{color:var(--pf-bad);border-color:rgba(255,143,143,.3);background:rgba(255,143,143,.07)}
#profile .profile-footer{display:grid;gap:9px;margin:0}
#profile .profile-footer>*{width:100%;border-radius:12px;min-height:46px;margin:0;text-align:center;line-height:26px;font-size:13.5px}
#profile #support{border:1px solid rgba(205,255,40,.3);background:rgba(205,255,40,.1);color:var(--pf-accent);font-weight:700}
#profile .admin-entry{border:1px solid var(--pf-line);background:var(--pf-surface);color:var(--pf-mute);text-decoration:none}
#profile #account-logout{border:1px solid var(--pf-line);background:transparent;color:var(--pf-mute)}
#profile #account-logout:hover{color:var(--pf-bad);border-color:rgba(255,143,143,.3)}

#profile .empty{
  background:var(--pf-surface);border:1px dashed var(--pf-line);border-radius:var(--pf-r);
  padding:38px 22px;text-align:center;color:var(--pf-mute);
}

/* ---------- order dialog, as a side panel ---------- */
#order-screen{
  margin:0 0 0 auto;max-width:440px;width:100%;height:100%;max-height:100%;
  border:0;border-left:1px solid #253127;border-radius:0;background:#0d1510;padding:22px;
}
#order-screen::backdrop{background:rgba(4,7,5,.62)}
#order-screen #order-close{margin-bottom:14px;border-radius:10px}
#order-screen #order-title{font-size:21px;letter-spacing:-.6px;margin:0 0 14px}

@media(max-width:980px){
  #profile .pf-metrics{grid-template-columns:1fr 1fr}
  #profile .profile-balance{grid-column:1/-1}
  #profile .profile-overview{grid-template-columns:minmax(0,1fr)}
  #profile .profile-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  #profile .profile-head{gap:13px}
  #profile #profile-avatar{width:48px;height:48px;font-size:19px;border-radius:14px}
  #profile #greeting{font-size:21px}
  #profile .pf-rank{order:3;flex-basis:100%}
  #profile .pf-metrics{gap:9px}
  #profile .pf-m,#profile .profile-balance{padding:13px 14px}
  #profile #balance{font-size:24px}
  #profile #pf-spent{font-size:21px}
  #profile .profile-sidebar{grid-template-columns:1fr}
  #profile .pf-unpaid{padding:13px;gap:11px}
  #profile .pf-pay{margin-left:0;flex-basis:100%;text-align:center}
  #profile #profile-items>.purchase-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:13px}
  #profile .purchase-row-description{white-space:normal}
  #profile .purchase-row-arrow{display:none}
  #profile .pf-favs{grid-template-columns:1fr 1fr;gap:9px}
  #profile .identity-row{flex-wrap:wrap}
  #profile .identity-row button{margin-left:0;flex-basis:100%}
  #profile button{min-height:44px}
  #order-screen{
    margin:auto 0 0;max-width:100%;height:92%;border-left:0;border-top:1px solid #253127;
    border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));
  }
}
@media(prefers-reduced-motion:reduce){
  #profile #profile-items>.purchase-row{transition:none}
  #profile #profile-items>.purchase-row:hover{transform:none}
}

/* The keepsake download, all that remains of the player-pass card. */
#profile .pf-settings>.life-card-panel button{
  margin-top:11px;width:100%;border-radius:11px;min-height:44px;
  background:var(--pf-surface2);border:1px solid var(--pf-line);font-size:13px;
}
#profile .pf-settings>.life-card-panel button:hover{border-color:#4d6136}

/* ---------- Against living-design's own profile decoration ----------
   It turns .profile-head into a tall card with its own background and parks a
   large emblem on the right, which reads as a card inside a card with an empty
   band through the middle. Inside this layout the strip stays flat. */
#profile .profile-head.life-profile-cover{
  background:none!important;border:0!important;border-radius:0!important;
  padding:0!important;margin:0 0 20px!important;min-height:0!important;
  /* Its ::before is an animated sweep; without this it widens the document. */
  overflow:clip;
}
#profile .profile-head .life-rank-emblem{
  width:46px;height:46px;margin-left:0;order:-1;filter:none;flex:none;
}
/* The emblem replaces the letter avatar it duplicates. */
#profile .profile-head:has(.life-rank-emblem) #profile-avatar{display:none}

/* Tiles size to their content instead of stretching to the tallest one. */
#profile .pf-m,
#profile .profile-balance{align-self:stretch}

/* Order rows: keep the parts close together rather than spread across the row. */
#profile #profile-items>.purchase-row{gap:12px;padding:13px 15px}
#profile .purchase-row-price{margin-left:0}
#profile .purchase-row-arrow{margin-left:2px}
#profile #profile-items>.purchase-row+.purchase-row{margin-top:7px}

/* ---------- the level tile ----------
   living-design swaps the panel's title for a medal with its own emblem. In a
   metric tile that competes with the number beside it, so keep it small and
   put the tier name where the other tiles put their value. */
#profile #user-level .life-rank-medal{gap:9px;margin:4px 0 0}
#profile #user-level .life-rank-medal .level-mark{width:30px;height:30px;flex:none}
#profile #user-level .life-rank-medal strong{font-size:19px;font-weight:800;letter-spacing:-.5px}

/* On a phone the row drops the arrow and the status moves under the title. */
@media(max-width:700px){
  #profile #profile-items>.purchase-row{
    grid-template-columns:36px minmax(0,1fr) auto;gap:11px;padding:11px 12px;
  }
  #profile .purchase-row-mark{width:36px;height:36px;font-size:14px;border-radius:10px}
  #profile .purchase-row-title{white-space:normal;line-height:1.3}
  #profile .purchase-row-status{grid-column:2;justify-self:start;margin-top:3px}
  #profile .purchase-row-price{grid-column:3;grid-row:1}
  #profile .purchase-row-arrow{display:none}
  #profile .pf-search{margin-left:0;width:100%;min-width:0}
  #profile .pf-idline{gap:8px;font-size:12px}
}

/* The level tile carries a medal instead of a plain value; keep its first line
   on the same baseline as the numbers in the tiles beside it. */
#profile #user-level{padding-top:16px}
#profile #user-level .life-rank-medal{margin-top:2px}
#profile #user-level>small{margin-top:auto;padding-top:8px}

/* ---------- level marks ---------- */
#profile .level-mark{flex:none;display:block}
#profile .pf-rank{gap:8px}
#profile .pf-rank .level-mark{width:18px;height:18px}
/* The tier list in settings: one row per tier, the current one highlighted. */
#profile .life-tier-medals{display:grid;gap:7px;margin:0 0 12px}
#profile .life-tier-medals span{
  display:flex;align-items:center;gap:10px;font-size:13px;color:var(--pf-mute);
  background:var(--pf-surface2);border:1px solid var(--pf-line);border-radius:11px;padding:9px 12px;
}
#profile .life-tier-medals .life-current{
  color:var(--pf-ink);border-color:rgba(205,255,40,.35);background:rgba(205,255,40,.07);font-weight:650;
}

/* Real product thumbnails in purchase history. */
#profile img.purchase-row-mark{display:block;object-fit:cover;object-position:center;width:42px;height:42px;min-width:42px;padding:0;border-radius:9px;background:#142018}

/* ---------- fixes found by looking at the live page ---------- */

/* The seasonal bat is positioned at right:-80px on the header, which pushed
   the document 80px wider than the viewport and gave every page a horizontal
   scrollbar. Clip it where it lives; `clip` does not create a scroll port, so
   sticky positioning inside the header keeps working. */
body>header{overflow-x:clip}

/* "Отвязать" was wrapping mid-word in the 63px the row left it. */
#profile .identity-row button{white-space:nowrap;flex:none}
#profile .identity-copy{flex:1;min-width:0}

/* The tier table, once re-homed into its settings panel. */
#profile #level-details-slot>details{margin-top:12px}
#profile #level-details-slot summary{font-size:13.5px;font-weight:600;cursor:pointer}
#profile #level-details-slot small{display:block;color:var(--pf-mute);font-size:12px;margin-top:5px}
#profile #level-details-slot h4{margin:13px 0 7px;font-size:12.5px}
#profile #level-details-slot p{color:var(--pf-mute);font-size:12px;line-height:1.55;margin:10px 0 0}

/* ---------- settings, regrouped ----------
   Column flow (columns:3) put unrelated panels in an unpredictable reading
   order and left ragged gaps under the short ones. A two-track grid keeps the
   order and aligns every card to the top of its row; the level table and the
   service block span both tracks. */
#profile .pf-settings{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;columns:auto;
}
#profile .pf-settings>*{margin:0}
#profile .pf-settings>.pf-wide,
#profile .pf-settings>.pf-service{grid-column:1/-1}
@media(max-width:860px){#profile .pf-settings{grid-template-columns:minmax(0,1fr)}}

/* One row pattern for every setting: name and note on the left, the control on
   the right, at a thumb-sized height. The identity rows already follow it. */
#profile .pf-srow{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px solid rgba(255,255,255,.06);min-height:56px;
}
#profile .pf-scopy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#profile .pf-scopy b{font-size:13.5px;font-weight:600}
#profile .pf-scopy small{color:var(--pf-mute);font-size:12px;line-height:1.45}
#profile .pf-srow>button,
#profile .pf-srow>.pf-sgo{
  flex:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;
  padding:0 14px;border-radius:11px;border:1px solid var(--pf-line);
  background:var(--pf-surface2);color:var(--pf-ink);font-size:13px;font-weight:600;text-decoration:none;
}
#profile .pf-srow>button:hover,
#profile .pf-srow>.pf-sgo:hover{border-color:#4d6136}
#profile .pf-sgo{color:var(--pf-mute);border-color:transparent;background:transparent}
#profile .pf-sgo:hover{color:var(--pf-ink)}

/* Support asked for the loudest button on the page; it is one row among the
   rest now, marked by its border rather than a lime slab. */
#profile .pf-help #support{
  width:auto;background:transparent;border-color:rgba(205,255,40,.45);color:var(--pf-accent);
  margin:0;line-height:normal;text-align:center;
}
#profile .pf-help #support:hover{background:rgba(205,255,40,.1);border-color:var(--pf-accent)}

/* Signing out belongs with the ways of signing in, not in the name strip. */
#profile .pf-signout{border-top:1px solid var(--pf-line);margin-top:4px}
#profile .pf-signout b{color:var(--pf-bad)}
#profile .pf-srow>#account-logout{border-color:rgba(255,143,143,.32);color:var(--pf-bad);background:transparent}
#profile .pf-srow>#account-logout:hover{border-color:var(--pf-bad);background:rgba(255,143,143,.08)}

/* The admin entry is not a user setting: it sits apart, and only staff see it. */
#profile .pf-service{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  border:1px dashed var(--pf-line);border-radius:var(--pf-r);padding:13px 16px;background:var(--pf-surface2);
}
#profile .pf-service-tag{
  font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--pf-mute);font-weight:700;
}
#profile .pf-service .admin-entry{
  margin-left:auto;width:auto;min-height:44px;display:inline-flex;align-items:center;
  padding:0 14px;border-radius:11px;line-height:normal;text-align:left;
}

/* The tier table runs across both tracks, so the tiers read as a scale. */
#profile #level-details-slot>details{margin-top:10px}
#profile #level-details-slot>details[open] summary{margin-bottom:4px}

/* The visual-effects control is its own card in the grid. */
#profile .pf-settings>#life-effects-profile{
  background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:var(--pf-r);padding:17px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;
}
#profile #life-effects-profile label{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;
  font-size:13.5px;font-weight:600;
}
#profile #life-effects-profile select{
  margin-left:auto;min-height:44px;border-radius:11px;border:1px solid var(--pf-line);
  background:var(--pf-surface2);color:var(--pf-ink);font-size:13px;font-weight:600;padding:0 12px;
}
#profile #life-effects-profile p{margin:0;color:var(--pf-mute);font-size:12px;line-height:1.45}

@media(max-width:620px){
  #profile .pf-srow{flex-wrap:wrap}
  #profile .pf-srow>button,
  #profile .pf-srow>.pf-sgo{flex-basis:100%;justify-content:center}
  #profile .pf-sgo{justify-content:flex-start;padding-left:0}
  #profile .pf-service .admin-entry{margin-left:0;flex-basis:100%;justify-content:center}
}

/* Order rows left ~700px of air between the title and the status on a wide
   screen. Keep the parts together and let the gap sit before the amount. */
#profile #profile-items>.purchase-row{
  grid-template-columns:40px minmax(0,auto) auto minmax(0,1fr) auto;
}
#profile #profile-items>.purchase-row .purchase-row-price{justify-self:end}
@media(max-width:700px){
  #profile #profile-items>.purchase-row{grid-template-columns:36px minmax(0,1fr) auto}
  #profile #profile-items>.purchase-row .purchase-row-price{grid-column:3;grid-row:1}
}

/* ---------- order progress for an order that ended early ----------
   A cancelled or failed order kept showing the remaining steps as if it were
   still on its way. They are now marked unreachable, and the state the order
   actually ended in closes the ladder. */
.order-progress .ended span{background:rgba(255,143,143,.15);border-color:rgba(255,143,143,.4);color:#ff8f8f}
.order-progress .ended small{color:#ff8f8f;font-weight:600}

/* Keep sign-out visible on every profile tab, including on phones. */
#profile .profile-head #account-logout{margin-left:auto;flex:0 0 auto;min-height:44px;padding:10px 16px;border-radius:11px;font-size:13px;white-space:nowrap}
#profile .profile-head #account-logout[hidden]{display:none!important}

/* ---------- touch targets, settled last ----------
   account-redesign.css pads these to 44px on a touch screen, but this file
   loads after it and its min-height:0 was winning. Restate the padding here,
   where nothing overrides it. The controls keep their text-link look: the
   taller box is the tap area, not a visible button. */
@media(hover:none),(max-width:700px){
  #profile .pf-copy,
  #profile .pf-link{min-height:44px;display:inline-flex;align-items:center}
  /* Status filters sat at 40px, just under the thumb-sized minimum. */
  #profile .pf-chip{min-height:44px}
}

/* ---------- the last of the small tap targets in settings ----------
   The identity "Привязать"/"Отвязать" buttons and the bot link render 40-42px
   tall, under the 44px a thumb needs; the earlier rules set them at a time
   when the rows were denser. */
#profile .identity-row button,
#profile #account-connection a,
#profile #account-connection button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* The bot link arrives as a full-width `.wide` slab; in this panel it is one
   control among the rows, so give it its own width. */
#profile #account-connection button.wide{
  width:auto;min-height:44px;margin:12px 0 0;padding:0 14px;border-radius:11px;font-size:13px;font-weight:600;
  border:1px solid var(--pf-line);background:var(--pf-surface2);color:var(--pf-ink);
}
#profile #account-connection button.wide:hover{border-color:#4d6136}

/* living-design appends its keepsake panel last, which landed it under the
   service block. Keep the service block at the bottom whatever is added. */
#profile .pf-settings>.pf-service{order:9}

/* The bot panel's heading rendered lime while every other card heading is
   white, which read as a status badge rather than a title. */
#profile #account-connection>strong{color:var(--pf-ink);font-weight:700}

/* The tier table shows the levels twice: the emblem row, then the same five
   names as a text list under "Все уровни". Keep the emblems. */
#profile #level-details-slot details>h4,
#profile #level-details-slot details>small{display:none}

/* living-design lays the tiers out in five fixed columns, which on a phone
   left each name set one letter per line. Let them wrap into as many as fit. */
#profile .life-tier-medals{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}

/* Keep all four order statuses together; search occupies its own row. */
@media(max-width:700px){
  #profile #profile-filters{display:grid;grid-template-columns:repeat(4,auto);gap:8px 6px}
  #profile #profile-filters .pf-chip{min-width:0;min-height:44px;padding:8px clamp(5px,2vw,12px);font-size:clamp(11px,3.1vw,13px);white-space:nowrap}
  #profile #profile-filters .pf-search{grid-column:1/-1;width:100%;box-sizing:border-box;margin:4px 0 0}
}

/* ---------- the profile header, said once ----------
   The level was stated three times above the fold — a chip under the name, a
   "Потрачено · учтено для уровня" tile, and the level panel — and between them
   they filled the whole first screen of a phone, so neither the tabs nor a
   single purchase were visible. Two tiles now: the balance, and one level
   strip that carries the spend and the progress. */
#profile .pf-metrics{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
#profile .profile-balance,
#profile .level-panel{min-height:0;text-align:left;align-items:stretch}

#profile .level-panel{gap:0;justify-content:center}
#profile .lv-row{display:flex;align-items:center;gap:11px}
#profile .lv-mark{flex:none;display:flex;align-items:center}
#profile .lv-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#profile .lv-who b{font-size:14.5px;font-weight:700}
#profile .lv-who small{font-size:11.5px;color:var(--pf-mute)}
#profile .lv-cost{flex:none;text-align:right;display:flex;flex-direction:column;gap:1px}
#profile .lv-cost b{font-size:14px;font-weight:700;white-space:nowrap}
#profile .lv-cost small{font-size:10.5px;color:var(--pf-mute)}
#profile .lv-bar{height:4px;border-radius:999px;background:#1d2720;margin-top:11px;overflow:hidden}
#profile .lv-bar>i{display:block;height:100%;background:var(--pf-accent);border-radius:999px}

/* The balance was the one centred block on a left-aligned page. */
#profile .profile-balance{padding:14px 16px}
#profile .profile-balance .balance-controls{margin-top:4px}
#profile #balance{font-size:26px}
#profile #balance-topup{min-width:0;min-height:44px;white-space:nowrap}

@media(max-width:700px){
  /* One column, so the balance keeps its button on the same line as the sum
     and the level strip stays one line of its own. */
  #profile .pf-metrics{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:16px}
  #profile .profile-head{align-items:center;padding:0 0 2px;margin-bottom:12px}
  #profile #greeting{font-size:20px;margin:0}
  #profile .pf-idline{margin-top:2px}
  #profile .level-panel,
  #profile .profile-balance{padding:13px 15px}
  #profile .lv-who b{font-size:14px}
}

/* The header carries a balance chip; on the profile screen the balance card
   sits right beneath it saying the same number. */
body.view-profile>header .account-shortcut{display:none}

@media(max-width:700px){
  #profile #profile-note{font-size:11.5px;line-height:1.45}
}

/* The header's chip is a sibling of the nav inside the page header. */
body.view-profile #account-login.account-shortcut{display:none}

/* seasonal-scene.css */
/* Seasonal decoration for the catalog and the basket. Behind the content, in
   the margins, and clipped: a decoration that overflowed the viewport is what
   put a horizontal scrollbar on every page before this. */

#catalog,#basket{position:relative;z-index:0}
.season-scene{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip;border-radius:22px;
}
.season-backdrop{
  position:absolute;inset:0 0 auto;height:min(620px,70%);
  background-position:center top;background-size:cover;opacity:.16;
  /* Fades out above the cards, so prices and buttons keep their contrast. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 94%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 48%,transparent 94%);
}
.season-glow{
  position:absolute;inset:0;
  background:radial-gradient(680px 320px at 84% 0%,rgba(205,255,40,.09),transparent 64%),
             radial-gradient(560px 280px at 4% 8%,rgba(42,111,151,.13),transparent 68%);
}

/* ---------- ghosts: the landing's, drifting down the two margins ---------- */
.season-ghost{
  position:absolute;width:clamp(92px,9vw,168px);opacity:.26;
  filter:drop-shadow(0 0 16px rgba(186,255,37,.12));
}
.season-ghost img{display:block;width:100%;height:auto;animation:portal-haunt 9s ease-in-out infinite}
.season-ghost.left{left:-14px;top:120px}
.season-ghost.right{right:-10px;top:420px;scale:-1 1}
.season-ghost.right img{animation-duration:11s;animation-delay:-5s}

/* ---------- spiders: hanging from the top edge on their thread ---------- */
.season-critter{position:absolute;color:#8fae57;opacity:.4}
.season-critter svg{display:block;width:100%;height:auto}
.season-critter.spider{right:46px;top:-6px;width:40px;animation:season-drop 14s ease-in-out infinite}
.season-critter.spider-small{left:34px;top:-6px;width:26px;opacity:.3;animation:season-drop 19s ease-in-out infinite;animation-delay:-7s}
@keyframes season-drop{
  0%,100%{transform:translateY(-14px)}
  45%{transform:translateY(96px)}
  60%{transform:translateY(74px)}
}

/* ---------- a bat crossing the upper edge ---------- */
.season-critter.bat{right:-60px;top:9%;width:32px;opacity:.38;animation:season-cross 26s linear infinite}
.season-critter.bat i{
  display:block;width:32px;height:15px;border-radius:50%;background:currentColor;
  clip-path:polygon(0 0,22% 35%,40% 0,50% 55%,60% 0,78% 35%,100% 0,80% 100%,50% 70%,20% 100%);
  animation:season-flap 1.1s ease-in-out infinite;
}
@keyframes season-cross{
  0%,70%{translate:0 0;opacity:0}
  73%{opacity:.38}
  96%{opacity:.38}
  100%{translate:-112vw 60px;opacity:0}
}
@keyframes season-flap{50%{transform:scaleY(.6)}}

/* The sidebar column sits over the scene's left edge on the catalog board. */
body.console-catalog #catalog-scene .season-ghost.left{left:auto;right:calc(100% - 196px)}
body.console-catalog #catalog-scene .season-critter.spider-small{left:232px}

@media(max-width:1050px){
  .season-ghost{width:clamp(80px,10vw,120px);opacity:.2}
  .season-ghost.right{top:320px}
  body.console-catalog #catalog-scene .season-ghost.left{display:none}
}
/* On a phone the margins are gone: keep the backdrop, drop the figures. */
@media(max-width:700px){
  .season-ghost,.season-critter{display:none}
  .season-backdrop{height:min(320px,46%);opacity:.12}
}

/* "Animation off" in the appearance settings, and the viewer's own setting. */
body.portal-paused .season-ghost img,
body.portal-paused .season-critter,
body.portal-paused .season-critter i{animation:none}
@media(prefers-reduced-motion:reduce){
  .season-ghost img,.season-critter,.season-critter i{animation:none}
}

/* ---------- the product screen ----------
   A fixed overlay with its own scroll, holding a 1020px shell in the middle.
   On a wide screen that leaves deep margins, which is where the figures go. */
#detail-scene{border-radius:0}
#detail-scene .season-backdrop{height:min(520px,54%);opacity:.14}
/* Keep the figures outside the shell: its half-width plus a little air. */
#detail-scene .season-ghost.left{left:max(10px,calc(50% - 700px));top:150px}
#detail-scene .season-ghost.right{right:max(8px,calc(50% - 690px));top:430px}
#detail-scene .season-critter.spider{right:max(44px,calc(50% - 640px));top:-4px}
#detail-scene .season-critter.spider-small{left:max(30px,calc(50% - 620px));top:-4px}
/* The third figure fills the empty space under the artwork. */
#detail-scene .season-ghost.lower{
  left:max(16px,calc(50% - 560px));top:720px;width:clamp(84px,7vw,128px);opacity:.2;
}
#detail-scene .season-ghost.lower img{animation-duration:13s;animation-delay:-2s}
@media(max-width:1320px){
  #detail-scene .season-ghost.left,#detail-scene .season-ghost.right,
  #detail-scene .season-critter.spider-small{display:none}
}
@media(max-width:1020px){#detail-scene .season-ghost.lower{display:none}}

/* ---------- the catalog's scene ----------
   The catalog board is covered by its sidebar and results panel, both opaque,
   so a scene inside it is never seen. This one is anchored to the page: the
   figures sit in the margins either side of the 1700px shell, and the panels
   simply cover the rest. Shown only while the catalog is the open view. */
.season-scene-fixed{position:fixed;inset:0;border-radius:0;z-index:-1}
body:not(.console-catalog) .season-scene-fixed{display:none}
.season-scene-fixed .season-backdrop{height:min(560px,62%);opacity:.2}
/* Margins are dark and empty, so the figures can be read properly there. */
.season-scene-fixed .season-ghost{opacity:.4;width:clamp(72px,6.4vw,124px)}
.season-scene-fixed .season-ghost.left{left:6px;top:21%}
.season-scene-fixed .season-ghost.right{right:4px;top:52%}
.season-scene-fixed .season-critter{opacity:.5}
.season-scene-fixed .season-critter.spider{right:30px;top:-4px;width:34px}
.season-scene-fixed .season-critter.spider-small{left:24px;top:-4px;width:24px}
.season-scene-fixed .season-critter.bat{top:13%}
/* Below this the shell fills the window and the margins disappear. */
@media(max-width:1480px){
  .season-scene-fixed .season-ghost,.season-scene-fixed .season-critter{display:none}
}

/* fonts.css */
/* Onest, served from our own domain.
   Self-hosted on purpose: the page's Content-Security-Policy allows styles and
   fonts from 'self' only, and a third-party font request would also add a
   round trip to another host before text can be painted.

   One variable file covers every weight from 100 to 900, so there is a single
   request instead of four. Subset to Latin, Cyrillic, punctuation and the
   currency marks the shop uses; icon glyphs such as ✦ or ☆ are not in Onest at
   all, in this copy or the original, so the stack below lets the system font
   draw them. Licence: webapp/static/fonts/Onest-OFL.txt (SIL OFL 1.1). */
@font-face{
  font-family:'Onest';
  src:url('/static/fonts/onest-var.woff') format('woff-variations'),
      url('/static/fonts/onest-var.woff') format('woff');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-ui:'Onest',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body,button,input,select,textarea,optgroup{font-family:var(--font-ui)}
/* seo-pages.css sets `font` on body too; this file is loaded after it. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-ui)}

/* support-chat.css */
/* Chat owns a stable viewport; only the message history scrolls. */
html.support-chat-open{overflow:hidden;overscroll-behavior:none}
#support-screen[open]{display:flex;flex-direction:column;position:fixed;inset:auto;left:var(--chat-left,12px);top:var(--chat-top,20px);transform:none!important;translate:none!important;width:var(--chat-width,min(640px,calc(100% - 24px)));height:var(--chat-height,calc(100dvh - 40px));max-height:none!important;max-width:calc(100vw - 12px)!important;margin:0;padding:0!important;overflow:hidden;border-radius:18px!important;animation:none!important;box-sizing:border-box}
#support-screen .support-chat-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #33442e;background:#142019}
#support-screen .support-chat-head h2{font-size:19px;line-height:1.3;margin:0;flex:1;min-width:0}
#support-screen .support-chat-head button{min-width:44px;min-height:44px;margin:0;padding:8px;font-size:12px}
#support-screen #support-close{font-size:23px;color:#e8efdf}
#support-screen #support-messages{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;margin:0;padding:20px;scroll-behavior:auto;-webkit-overflow-scrolling:touch}
#support-screen .support-message{flex:0 0 auto;max-width:85%;background:#263820;align-self:flex-end;border-color:#435835}
#support-screen .support-message.admin{background:#18251d;align-self:flex-start;border-color:#334736}
#support-screen .support-message p{font-size:14px;line-height:1.6}
#support-screen .support-message small{font-size:11px}
#support-screen #support-context{flex:0 0 auto;padding:7px 20px;margin:0;background:#1d2b1c;font-size:12px}
#support-screen #support-context:empty{display:none}
#support-screen #support-form{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:14px 20px 10px;margin:0;border-top:1px solid #33442e;background:#142019}
#support-screen #support-form>label{grid-column:1/-1;font-size:12px;margin:0}
#support-screen #support-text{grid-column:1;grid-row:2;resize:none;min-height:72px;max-height:120px;height:72px;overflow-y:auto;font-size:16px;line-height:1.5;margin:0;padding:10px 12px}
#support-screen #support-send{grid-column:2;grid-row:2;width:auto;align-self:end;min-height:44px;padding:12px 16px;font-size:13px;margin:0}
#support-screen #support-count{grid-column:1/-1;font-size:11px;color:#a5b49c}
#support-screen #support-result{flex:0 0 auto;margin:0!important;padding:0 20px 12px!important;font-size:12px;max-height:65px;overflow:auto;background:#142019;border:0!important;min-height:0}
#support-screen #support-result:empty{padding-bottom:8px!important}
#support-screen>.hint:not(#support-context),#support-screen .life-support-banner{display:none!important}
@media(max-width:600px){#support-screen[open]{width:var(--chat-width,calc(100% - 12px));border-radius:12px!important}#support-screen .support-chat-head{padding:10px 12px;gap:6px}#support-screen .support-chat-head h2{font-size:16px}#support-screen #support-messages{padding:14px}#support-screen #support-form{padding:10px 12px 6px;gap:6px}#support-screen #support-send{padding:10px;font-size:12px}#support-screen #support-result{padding-left:12px!important;padding-right:12px!important}#support-screen #support-text{height:64px;min-height:64px}#support-screen .support-message{max-width:92%}}
@media(max-height:450px){#support-screen #support-form>label,#support-screen #support-count{display:none}#support-screen .support-chat-head{padding-top:4px;padding-bottom:4px}#support-screen #support-text{height:48px;min-height:48px}#support-screen #support-form{padding-top:6px}}

.notification-item .notification-chat-button{display:block;margin-top:14px;min-height:44px;padding:11px 20px;font-size:14px;font-weight:700;border-radius:10px}
@media(max-width:700px){.notification-item .notification-chat-button{width:100%}}

#support-screen .support-hours{flex:0 0 auto;margin:0;padding:8px 20px;color:#91a08b;background:#142019;font-size:12px;line-height:1.5}
@media(max-width:600px){#support-screen .support-hours{padding:6px 12px;font-size:11px}}

/* product-polish.css */
/* Catalog refinement: retain the approved artwork, align content and actions. */
body.console-catalog #cards .card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(2.5em,auto) auto minmax(2.8em,1fr) auto;align-content:start}
body.console-catalog #cards>.card{border:1px solid var(--cat-line);background:var(--cat-surface)!important;border-radius:var(--cat-radius)}
body.console-catalog #cards .card .card-body>strong{min-height:2.5em;grid-row:1;align-self:start}
body.console-catalog #cards .card-meta{grid-row:2}
body.console-catalog #cards .card-detail{grid-row:3;min-height:2.8em;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
body.console-catalog #cards .card-price{grid-row:4;align-self:end;margin-top:10px;min-height:42px}
body.console-catalog #cards .card-price b{white-space:nowrap}
body.console-catalog #cards .card-cta{grid-row:4;align-self:end;margin-top:10px;white-space:normal}
body.console-catalog #cards .card[data-scope=global] .card-media .card-image{filter:none}
body.console-catalog #cards .card[data-scope=global] .card-media::before{background:#122017e8;color:#dcefc6;border-color:#90aa5c80;border-radius:6px}
/* Глобальную версию отличает метка на обложке, а не подсвеченный тип товара. */

/* The existing controls keep their handlers and form associations. */
#detail .product-shell{max-width:1140px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0 32px;padding:0 28px 35px}
#detail{overflow-anchor:none}
#detail #life-product-backdrop{display:none}
#detail #product-breadcrumb,#detail .modal-head{grid-column:1/-1}
#detail .product-visual{grid-column:1;grid-row:3;min-width:0;align-self:start}
#detail .product-body{grid-column:2;grid-row:3;min-width:0}
#detail .product-visual #product-image{position:static;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1.25;object-fit:contain!important;padding:0;margin:0;border-radius:16px;mask-image:none;-webkit-mask-image:none;background:#111b14}
#detail .product-visual.has-panorama #product-image{object-fit:cover!important}
#detail #product-title{font-size:32px;letter-spacing:-1px;line-height:1.2}
#detail .product-options{background:#111d14;border:1px solid #2e3e2c;border-radius:16px;padding:22px;margin-top:20px;min-width:0}
#detail .product-region-label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#a5b39c;margin:0 0 15px}
#detail .product-region-label select,#detail #region-filter{padding:12px;border-radius:9px;border:1px solid #3a4b32;background:#0c150e;font-size:15px;min-height:45px}
#detail #region-filter{width:100%;margin-bottom:15px}
#detail #product-step{font-size:11px;line-height:1.6;letter-spacing:.3px;margin:0 0 14px}
#detail #offer-picker-title{font-size:15px;margin:15px 0 12px}
#detail #offers.offer-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#detail #offers.offer-tiles button{min-height:72px;padding:12px;border-radius:9px;border-width:1px;transform:none}
#detail #offers.offer-tiles button strong{font-size:14px;line-height:1.5;padding-right:14px}
#detail #offers.offer-tiles button small{font-size:11px}
#detail #offers.offer-tiles .tile-price{font-size:15px;margin-top:4px}
#detail #offers.offer-tiles button[aria-pressed=true]{border-color:#cdff28;background:#2b391c}
#detail #offers.offer-tiles button[aria-pressed=true] strong{color:#edfacd}
#detail .product-options.choosing-region #offers.region-tiles,#detail .product-options.choosing-region #offer-picker-title{display:none}
#detail #buyer{padding:16px 0 0;margin:18px 0 0;border:0;border-top:1px solid #2e3e2c;border-radius:0;background:none}
#detail #offer-title,#detail #price{display:none}
#detail #buyer #facts{margin-top:0}
#detail .product-action{position:static;display:flex;flex-direction:column;align-items:stretch;gap:16px;margin:20px 0 0;padding:17px 0 0;border:0;border-top:1px solid #35482d;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;max-width:none;inset:auto}
#detail .product-action>div{display:flex;flex-direction:column;gap:5px;min-width:0;max-width:none}
#detail .product-action #action-price{font-size:30px;color:#cdff28;line-height:1.25}
#detail .product-action #action-region{display:none}
#detail .product-selection-summary{display:block;font-size:12px;line-height:1.6;color:#c9d9bb;overflow-wrap:anywhere}
#detail .product-action #add{width:100%;min-height:48px;font-size:14px;border-radius:10px}
#detail .product-compatibility-note{font-size:12px;line-height:1.8;padding:15px 17px;background:#1b2918;border:1px solid #384d28;border-radius:10px;color:#b9cbaa;margin:18px 0 0}
#detail #product-brief{margin:20px 0 0;padding:0;background:none;border:0}
#detail #product-brief .product-at-glance{font-size:12px;line-height:1.7}
#detail #product-brief dd{overflow-wrap:anywhere}
#detail #life-card-preview,#detail #life-mobile-picker,#detail .life-checkout-steps{display:none!important}
@media(max-width:800px){#detail .product-shell{grid-template-columns:minmax(0,1fr);gap:20px;padding:0 20px 25px}#detail .product-visual{grid-column:1;grid-row:3}#detail .product-body{grid-column:1;grid-row:4}#detail .product-visual #product-image{aspect-ratio:1.9;max-height:280px}#detail .product-options{margin-top:16px;padding:18px}#detail #product-title{font-size:27px}#detail .product-compatibility-note{margin-top:12px}#detail #product-brief:not([hidden]){margin-top:15px}}
@media(max-width:700px){body.console-catalog #cards .card-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(2.5em,auto) auto minmax(2.8em,1fr) auto auto}body.console-catalog #cards .card-price{grid-column:1;grid-row:4;min-height:35px}body.console-catalog #cards .card-cta{grid-column:1;grid-row:5;margin-top:5px}body.console-catalog #cards .card-detail{min-height:2.8em;white-space:normal}}
@media(min-width:701px) and (max-width:1250px){body.console-catalog #cards .card-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(2.5em,auto) auto minmax(2.8em,1fr) auto auto}body.console-catalog #cards .card-price{grid-column:1;grid-row:4}body.console-catalog #cards .card-cta{grid-column:1;grid-row:5;text-align:center;margin-top:8px}}
@media(max-width:450px){#detail .product-shell{padding:0 15px 20px}#detail .product-options{padding:15px}#detail #offers.offer-tiles button{padding:10px}#detail #product-region-switch,#detail #region-filter,#detail #fields input,#detail #fields select{font-size:16px}#detail .product-visual #product-image{aspect-ratio:1.6}}

/* Full-bleed catalog covers; square logos use their own colors as a backdrop. */
body.console-catalog #cards .card .card-media{aspect-ratio:3/2;background:#122019;isolation:isolate}
body.console-catalog #cards .card .card-media .card-image{object-fit:cover;padding:0!important;background:transparent!important;z-index:1}
body.console-catalog #cards .card .card-media .card-art-atmosphere{display:block!important;position:absolute;inset:-12%;width:124%;height:124%;max-height:none;object-fit:cover;filter:blur(24px) saturate(1.25);opacity:.7;pointer-events:none;z-index:0}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit=logo] .card-image{object-fit:contain;padding:5% 8% 10%!important;filter:drop-shadow(0 10px 16px #0005)}
body.console-catalog #cards .card .card-media::after{z-index:2;background:linear-gradient(180deg,transparent 52%,#111a1440 72%,var(--cat-surface) 100%)}
@media(max-width:700px){body.console-catalog #cards .card .card-media{aspect-ratio:3/2}body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit=logo] .card-image{padding:4% 7% 10%!important}}

/* The official Adidas packshot includes a white studio margin; frame the card itself. */
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit=logo] .card-image[src$="/brand-adidas.jpg"]{object-fit:cover;padding:0!important;transform:scale(1.48)}

/* Frame the actual gift card inside studio packshots, keeping original source files. */
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-garena-shells.webp"]{object-fit:cover;padding:0!important;transform:translate(0.00%,0.00%) scale(1.053)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-h-m.jpg"]{object-fit:cover;padding:0!important;transform:translate(0.00%,0.00%) scale(1.164)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-hush-puppies.webp"]{object-fit:cover;padding:0!important;transform:translate(0.89%,0.67%) scale(1.600)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-marks-and-spencer.webp"]{object-fit:cover;padding:0!important;transform:translate(-0.52%,-9.18%) scale(1.884)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-primark.jpg"]{object-fit:cover;padding:0!important;transform:translate(-0.46%,22.62%) scale(1.643)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-ps-plus.webp"]{object-fit:cover;padding:0!important;transform:translate(-0.32%,1.92%) scale(1.154)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-sephora.jpg"]{object-fit:cover;padding:0!important;transform:translate(0.00%,-0.56%) scale(1.348)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-swarovski.jpg"]{object-fit:cover;padding:0!important;transform:translate(0.68%,-3.08%) scale(1.233)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-target.jpg"]{object-fit:cover;padding:0!important;transform:translate(0.61%,-0.30%) scale(1.065)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-ticketmaster.webp"]{object-fit:cover;padding:0!important;transform:translate(0.76%,1.14%) scale(1.364)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-uber.webp"]{object-fit:cover;padding:0!important;transform:translate(0.00%,0.00%) scale(1.463)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-decathlon.webp"]{object-fit:cover;padding:0!important;transform:translate(0.00%,0.00%) scale(1.053)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-costa-coffee.webp"]{object-fit:cover;padding:0!important;transform:translate(0.00%,0.00%) scale(1.132)}
body.console-catalog #cards .card:not([data-panorama-art=true]) .card-media[data-art-fit] .card-image[src$="/brand-retail-nike.jpg"]{object-fit:cover;padding:0!important;transform:translate(0.00%,-4.55%) scale(1.329)}

#detail .product-dlc-notice{padding:13px 15px;border:1px solid #8e7738;border-radius:10px;background:#493b182b;color:#f2df9e;font-size:13px;line-height:1.65;margin:14px 0}
body.console-catalog #cards [data-dlc=true] .type-chip{color:#f2df9e;font-weight:700}

/* steam-section.css */
/* Steam is a catalog route using the existing service form and live quote. */
body.steam-section-open #portal-catalog-results>:not(#steam-section){display:none!important}
body.steam-section-open #steam-section{display:block}
body.steam-section-open #notice{margin:0}
#steam-section{color:#f0f5e9;min-width:0}
.steam-breadcrumb{font-size:11px;color:#92a089;margin:0 0 14px}
.steam-section-heading{margin-bottom:27px}
.steam-section-heading h1{font-size:32px;letter-spacing:-1px;line-height:1.2;margin:0}
.steam-section-heading p{font-size:13px;color:#a2b09b;margin:10px 0 0;line-height:1.7}
.steam-section-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);gap:24px;align-items:start}
.steam-section-inputs{min-width:0}
.steam-section-panel,.steam-section-summary{background:#121d15;border:1px solid #2e3b2b;border-radius:15px;padding:26px;min-width:0}
.steam-section-panel h2,.steam-section-summary h2{font-size:20px;letter-spacing:-.4px;line-height:1.3;margin:0 0 21px}
#steam-section #service-form{margin:0;display:flex;flex-direction:column;gap:0}
#steam-section #service-form>label,#steam-section #steam-inputs>label,#steam-section #premium-inputs>label{display:flex;flex-direction:column;gap:8px;margin:0 0 19px;font-size:13px;color:#d8e3ce}
#steam-section #service-form input,#steam-section #service-form select{width:100%;min-width:0;min-height:47px;padding:12px;border-radius:9px;border:1px solid #3a4a32;background:#0b140e;color:#f0f5e9;font-size:16px}
#steam-section #service-help{margin:-7px 0 14px;font-size:12px;line-height:1.7;color:#a2b09b}
#steam-section #service-recipient-details{order:5;margin:9px 0 0;font-size:12px}
#steam-section #service-recipient-details summary{color:#c3dc8e;padding:8px 0}
#steam-section #service-recipient-details p{font-size:12px;line-height:1.8;color:#a2b09b}
#steam-section #steam-inputs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;margin-top:5px}
#steam-section #life-steam-guide,#steam-section #life-steam-energy,#steam-section #service-form .life-saved-recipients{display:none!important}
#steam-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:3px}
#steam-presets button{flex:1;min-width:60px;padding:10px 9px;border:1px solid #38492f;background:#152113;border-radius:8px;font-size:13px;text-align:center;min-height:43px}
#steam-presets button[aria-pressed=true]{background:#2a381b;color:#cdff28;border-color:#789633}
.steam-section-note{font-size:12px;color:#a2b09b;line-height:1.8;margin:20px 0 0}
.steam-section-summary{background:linear-gradient(145deg,#213018,#111c14)}
.steam-section-kicker{display:block;font-size:10px;letter-spacing:1.8px;color:#b0c18d;margin-bottom:18px}
.steam-section-lines{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:13px;font-size:13px;line-height:1.6;margin:0}
.steam-section-lines dt{color:#a2b09b}.steam-section-lines dd{margin:0;text-align:right;color:#e2edda;overflow-wrap:anywhere}
#steam-estimate{padding-top:20px;border-top:1px solid #425032;margin:20px 0}
#steam-estimate small{font-size:12px;color:#b4c39f}
#steam-estimate strong{display:block;font-size:27px;font-weight:750;letter-spacing:-.8px;margin-top:7px;line-height:1.3;color:#cdff28}
#steam-estimate p{font-size:12px;color:#a2b09b;line-height:1.7;margin:9px 0 0}
#steam-section #quote-button,#steam-section #service-confirm{width:100%;min-height:48px;font-size:14px;font-weight:750;text-align:center;padding:13px;border-radius:10px;background:#cdff28;color:#152008;border:1px solid #cdff28;margin:0}
#steam-section #service-result{padding-top:20px;border-top:1px solid #425032;margin-top:20px}
#steam-section #service-label{font-size:12px;color:#b4c39f;font-weight:500;margin:0 0 8px;line-height:1.6}
#steam-section #service-price{display:block;color:#cdff28;font-size:32px;letter-spacing:-1px;line-height:1.3}
#steam-section #service-facts{font-size:12px;line-height:1.8;white-space:pre-line;overflow-wrap:anywhere;color:#bfceb2;margin:15px 0 20px}
#steam-section #service-error{font-size:12px;line-height:1.7;white-space:pre-wrap;color:#ffbc9e;margin:12px 0;padding:0;background:none;border:0}
#steam-section #service-error:empty{display:none}
#steam-added{padding:16px 18px;border:1px solid #708a35;background:#27371a;color:#e0f1c0;border-radius:11px;font-size:13px;line-height:1.7;margin-bottom:21px}
@media(min-width:1500px){.steam-section-layout{grid-template-columns:minmax(0,1.4fr) minmax(320px,.85fr);gap:28px}.steam-section-panel,.steam-section-summary{padding:28px}}
@media(max-width:1000px){.steam-section-layout{grid-template-columns:minmax(0,1fr);gap:21px}.steam-section-summary{max-width:none}.steam-section-panel,.steam-section-summary{padding:22px}}
@media(max-width:700px){.steam-section-heading h1{font-size:28px}.steam-section-heading{margin-bottom:21px}.steam-section-panel,.steam-section-summary{padding:19px;border-radius:13px}#steam-section #steam-inputs{gap:10px}#steam-presets{gap:6px}#steam-presets button{font-size:12px;min-width:50px;padding:10px 6px}}

/* Shared full-page service layout: Premium uses the same controls and summary. */
#steam-section #steam-inputs[hidden],#steam-section #premium-inputs[hidden],#steam-presets[hidden]{display:none!important}
#steam-section[data-kind=premium] #steam-inputs,#steam-section[data-kind=premium] #steam-presets{display:none!important}
#steam-section[data-kind=premium] #premium-inputs{margin-top:5px}

/* email-auth.css */
#login-screen .email-auth[hidden],#login-screen .email-auth label[hidden],#login-screen .email-auth-field[hidden]{display:none!important}
#login-screen .email-auth{display:grid;gap:12px;margin:20px 0}
#login-screen .email-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#login-screen .email-auth-tabs [aria-pressed=true]{background:var(--accent,#caff20);color:#101800}
#login-screen #email-auth-form{display:grid;gap:14px}
#login-screen #email-auth-form label{display:grid;gap:7px}
#login-screen #email-auth-form input{width:100%;min-width:0;font-size:16px}
#login-screen .email-auth-divider{font-size:12px;text-align:center;opacity:.7;margin-top:8px}
#login-screen #email-auth-status{margin:0;overflow-wrap:anywhere}
#login-screen #email-auth-submit{min-height:46px}
#login-screen .email-password-control{display:flex;align-items:stretch;gap:8px;min-width:0}
#login-screen .email-password-control input{flex:1 1 0;min-width:0}
#login-screen .email-password-control button{flex:0 0 auto;min-width:88px;min-height:44px;padding:8px 12px;font-size:12px;border-radius:10px;white-space:nowrap}

#login-screen .email-auth-field{display:grid;gap:7px}
#login-screen .email-auth-tabs[hidden],#login-screen .email-auth-divider[hidden]{display:none!important}

/* mobile-navigation.css */
/* The desktop header and sidebar retain their existing layout. */
#mobile-bottom-nav{display:none}
#mobile-sections-sheet{color:#f4f7ed;background:#111c15;border:1px solid #35442d;border-bottom:0;border-radius:24px 24px 0 0;width:100%;max-width:100%;max-height:85dvh;margin:auto 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
#mobile-sections-sheet::backdrop{background:#0009;backdrop-filter:blur(4px)}
#mobile-sections-sheet .mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#mobile-sections-sheet h2{font-size:21px;margin:0}
#mobile-sections-sheet button{min-height:48px}
.mobile-section-list{display:grid;gap:8px}
.mobile-section-list button{display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border-radius:12px;background:#19251b;border:1px solid #33432c;font-size:15px;color:#e8efde}
.mobile-section-list button svg{width:22px;height:22px;flex-shrink:0}
.mobile-section-list button[aria-pressed=true]{background:#cdff28;color:#18210a;border-color:#cdff28}
@media(max-width:700px){
 body.mobile-shop-navigation{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
 body.mobile-shop-navigation>nav:not(#mobile-bottom-nav){display:none!important}
 body.mobile-shop-navigation>#mobile-bottom-nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;inset:auto 0 0;transform:none;width:100%;max-width:none;margin:0;border:0;border-top:1px solid #35442d;border-radius:0;background:#101a14f5;backdrop-filter:blur(16px);padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));gap:4px;z-index:90;visibility:visible}
 #mobile-bottom-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;min-width:0;padding:7px 2px;border:0;border-radius:12px;background:transparent;color:#9fab98;font-size:11px;line-height:1.2}
 #mobile-bottom-nav button .icon{width:22px;height:22px}
 #mobile-bottom-nav button.active{color:#cdff28;background:#cdff2810}
 #mobile-cart-badge{position:absolute;top:2px;left:calc(50% + 7px);background:#cdff28;color:#142008;border-radius:10px;min-width:17px;padding:2px 4px;font-size:10px}
 body.mobile-shop-navigation.product-open>#mobile-bottom-nav{display:none!important}
 body.mobile-shop-navigation #console-menu-toggle,body.mobile-shop-navigation>header #account-login{display:none!important}
 body.mobile-shop-navigation.console-catalog .portal-section-menu{display:none!important}
 body.mobile-shop-navigation>header{display:flex!important;align-items:center;flex-wrap:wrap;gap:12px!important;padding:14px 18px!important;min-height:0!important}
 body.mobile-shop-navigation>header #home{flex:1!important;width:auto!important;margin:0!important;font-size:25px!important}
 body.mobile-shop-navigation>header #notifications-button{margin:0!important;flex:0 0 44px;width:44px;min-height:44px}
 body.mobile-shop-navigation>header .header-categories{display:none!important}
 body.mobile-shop-navigation>header .search-shell{order:10;flex:1 0 100%!important;max-width:none!important;margin:0!important}
 body.mobile-shop-navigation .site-footer{padding-bottom:24px}
}

/* support-toast.css */
.support-toast{position:fixed;right:24px;bottom:24px;z-index:110;width:min(400px,calc(100vw - 32px));display:flex;align-items:flex-start;gap:4px;padding:12px;border:1px solid #637b3c;border-radius:16px;background:#19251df5;color:#edf5e7;box-shadow:0 8px 30px #0004;transform:translateX(var(--toast-drag,0px));touch-action:pan-y}
.support-toast[hidden]{display:none!important}
.support-toast .support-toast-action{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;text-align:left;padding:6px;background:none;border:0;color:inherit;min-height:44px;white-space:normal;transform:none}
.support-toast-action strong{font-size:14px;line-height:1.45;color:#e9f9d5}
.support-toast-action span{font-size:12px;line-height:1.5;color:#bbcbb2}
.support-toast .support-toast-close{flex:0 0 44px;width:44px;min-height:44px;padding:0;border:0;background:none;font-size:24px;color:#bbcbb2;transform:none}
@media(max-width:700px){.support-toast{right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0px));width:calc(100vw - 24px);padding:10px;border-radius:14px}.support-toast-action strong{font-size:13px}}
@media(prefers-reduced-motion:no-preference){.support-toast:not([hidden]){animation:support-toast-enter .18s ease-out}@keyframes support-toast-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}}

/* notifications-panel.css */
html.notifications-open{overflow:hidden!important;overscroll-behavior:none}
html.notifications-open body{position:fixed!important;top:var(--notice-scroll-top);left:0;right:0;width:100%;overflow:hidden!important}
#notifications-screen[open]{display:flex!important;flex-direction:column;position:fixed!important;inset:auto!important;left:var(--notice-left,16px)!important;top:var(--notice-top,80px)!important;width:var(--notice-width,400px)!important;height:var(--notice-height,600px)!important;max-width:none!important;max-height:none!important;min-width:0!important;box-sizing:border-box;margin:0!important;padding:0!important;transform:none!important;translate:none!important;overflow:hidden!important;border:1px solid #40552e!important;border-radius:20px!important;background:#142017!important;color:#edf1e7;box-shadow:0 20px 60px #0006}
#notifications-screen:before{display:none!important}
#notifications-screen::backdrop{background:#0008;backdrop-filter:blur(3px)}
#notifications-screen .modal-head{flex:none;display:flex;align-items:center;gap:12px;padding:20px;margin:0;border:0}
#notifications-screen .modal-head>div{display:flex;flex-direction:column-reverse;gap:6px;min-width:0}
#notifications-screen h2{font-size:23px;margin:0}
#notifications-screen .eyebrow{font-size:12px;letter-spacing:0;color:#a6b49d}
#notifications-close{width:44px;min-height:44px;flex:none;margin-left:auto;font-size:22px;padding:0}
#notifications-screen .notifications-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px 12px;border-bottom:1px solid #34432f;flex:none}
#notifications-screen .notifications-toolbar span{font-size:12px;color:#a6b49d}
#notifications-screen .notifications-toolbar button{font-size:12px;min-height:44px;color:#caff1f;white-space:nowrap}
#notifications-list{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 16px 16px;display:block;touch-action:pan-y}
#notifications-screen .notification-item{padding:16px 8px!important;margin:0;border:0!important;border-bottom:1px solid #34432f!important;border-radius:0;background:transparent!important;box-shadow:none}
#notifications-screen .notification-item.unread{background:#caff1f06!important}
#notifications-screen .notification-item.unread:after{content:'';position:absolute;right:4px;top:19px;width:7px;height:7px;border-radius:50%;background:#caff1f}
#notifications-screen .notification-item header{padding-right:14px;display:flex;flex-direction:column;gap:4px}
#notifications-screen .notification-item time{font-size:11px}
#notifications-screen .notification-item p{margin:10px 0;color:#c1cdb9;font-size:13px;line-height:1.6}
#notifications-screen .life-notification-symbol{display:none}
#notifications-screen .life-notification-group{margin:18px 8px 4px;font-size:11px;letter-spacing:.5px}
#notifications-screen .notification-chat-button{width:100%;min-height:44px}
#notifications-screen .notification-item a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid #536b2e;border-radius:10px;color:#d5e9b0;font-size:13px}
#notifications-screen .notifications-footer{padding:12px 20px calc(12px + env(safe-area-inset-bottom));text-align:center;font-size:11px;color:#9aa98c;border-top:1px solid #34432f;flex:none}
#notifications-screen .notifications-grip{display:none}
@media(max-width:700px){#notifications-screen[open]{border-radius:24px 24px 0 0!important}#notifications-screen .notifications-grip{display:block;flex:none;align-self:center;min-height:24px;width:80px;padding:0;border:0;background:transparent;box-shadow:none}#notifications-screen .notifications-grip:after{content:'';display:block;margin:auto;width:36px;height:4px;background:#536548;border-radius:4px}#notifications-screen .modal-head{padding-top:4px}}

/* new-style.css */
/* Новый визуальный язык за пределами каталога: главная, карточка товара,
   экраны пополнения Steam и Telegram Premium.

   Каталог уже переведён в catalog-redesign.css. Этот файл продолжает ту же
   линию на остальных экранах и ничего не меняет в разметке: только внешний
   вид. Общее правило языка — прямые углы, один акцент на экран, цифры
   табличные, микроподписи заглавными с большим трекингом. */

:root{
  --ns-ink:#f4f7f2;
  --ns-mute:#7e8a7f;
  --ns-line:#1e241f;
  --ns-surface:#0f1211;
  --ns-accent:#cbff4d;
  --ns-accent-ink:#101706;
}

/* ---------- Главная: заголовок несёт экран ---------- */
#portal-landing .portal-eyebrow,
#store-hero .eyebrow{
  font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ns-mute);
}
#portal-landing h1,
#store-hero.hero-collections h1{
  font-weight:800;letter-spacing:-2.2px;line-height:1.04;text-transform:uppercase;
  color:var(--ns-ink);
}
/* Цветом выделена только последняя строка: обещание, ради которого пришли. */
#portal-landing h1 span{color:var(--ns-accent)}
#portal-landing .portal-copy>p,
#store-hero.hero-collections p{color:#b8c4b9}

#portal-landing .portal-actions button,
#store-hero .hero-actions button{
  border-radius:0;min-height:48px;padding:0 22px;
  font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
}
#portal-landing .portal-actions button.accent,
#store-hero .hero-actions button.accent{
  background:var(--ns-accent);color:var(--ns-accent-ink);border-color:var(--ns-accent);
}
#portal-landing .portal-actions button:not(.accent){
  background:transparent;border:1px solid #2a332b;color:var(--ns-ink);
}
#portal-landing .portal-bottom{
  font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ns-mute);
}

/* Плитки входа в разделы: плоские, с прямым углом и одной рамкой. */
#store-hero .hero-feature,
#store-hero .hero-collection{
  border-radius:0;border:1px solid var(--ns-line);background:var(--ns-surface);
  transition:border-color .18s,transform .18s;
}
#store-hero .hero-collection:hover{border-color:#3c4a3d;transform:translateY(-3px)}
#store-hero .hero-collection h2{
  font-weight:800;letter-spacing:-.8px;color:var(--ns-ink);
}
#store-hero .hero-collection p{color:var(--ns-mute);font-size:12.5px}
#store-hero .hero-collection button{
  border-radius:0;min-height:44px;background:transparent;border:1px solid #2a332b;
  color:var(--ns-ink);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
}
#store-hero .hero-collection:hover button{
  background:var(--ns-accent);border-color:var(--ns-accent);color:var(--ns-accent-ink);
}

/* ---------- Карточка товара ----------
   Имена классов взяты из живого экрана, а не из догадок: панель выбора
   называется .product-options, номинал — .offer.offer-tile. */
#detail #back,
#detail #close,
#detail #product-image,
#detail .product-options,
#detail .product-compatibility-note,
#detail .offer,
#detail #product-action button,
#detail #buyer input,
#detail #buyer select{border-radius:0}

#detail #product-title{font-weight:800;letter-spacing:-1.2px}
#detail #product-breadcrumb{
  font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ns-mute);
}
#detail .product-options{
  border:1px solid var(--ns-line);background:var(--ns-surface);
}
#detail #product-step{
  font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ns-mute);
}
#detail .offer{
  border:1px solid var(--ns-line);background:transparent;transition:border-color .15s,background .15s;
}
#detail .offer:hover{border-color:#3c4a3d;background:#11150f}
#detail .offer[aria-pressed=true]{border-color:var(--ns-accent);background:#11150f}
/* Цена — якорь выбора: табличные цифры держат столбец номиналов ровным. */
#detail .offer b,
#detail .offer strong,
#detail #product-action b{font-variant-numeric:tabular-nums;color:var(--ns-ink)}
#detail .product-compatibility-note{
  border:1px solid var(--ns-line);background:var(--ns-surface);color:#b8c4b9;
}
#detail #product-action .accent,
#detail #product-action button.accent{
  background:var(--ns-accent);color:var(--ns-accent-ink);border-color:var(--ns-accent);
  font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
}
#detail #back,
#detail #close{
  background:transparent;border:1px solid #2a332b;color:var(--ns-ink);
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
}

/* ---------- Пополнение Steam и Telegram Premium ---------- */
#steam-section .steam-section-panel,
#steam-section .steam-section-summary,
#steam-section #steam-added{border-radius:0;border:1px solid var(--ns-line);background:var(--ns-surface)}
#steam-section .steam-breadcrumb{
  font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ns-mute);
}
#steam-section .steam-section-heading h1{font-weight:800;letter-spacing:-1.5px}
#steam-section .steam-section-kicker{
  font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ns-mute);
}
#steam-section input,
#steam-section select,
#steam-section button{border-radius:0}
#steam-section input{min-height:46px;border:1px solid #2a332b;background:transparent}
#steam-section #steam-presets button{
  min-height:38px;background:transparent;border:1px solid var(--ns-line);color:#b8c4b9;
}
#steam-section #steam-presets button:hover{border-color:#3c4a3d;color:var(--ns-ink)}
#steam-section #quote-button,
#steam-section .accent{
  background:var(--ns-accent);color:var(--ns-accent-ink);border-color:var(--ns-accent);
  font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
}

/* ---------- Шапка главной ---------- */
#portal-header-nav button{
  background:transparent;border:0;border-radius:0;padding:10px 2px;
  font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ns-mute);
  transition:color .15s;
}
#portal-header-nav button:hover{color:var(--ns-ink)}
body.portal-home #portal-header-login,
#portal-header-login{
  border-radius:0;min-height:44px;padding:0 18px;background:transparent;border:1px solid #2a332b;
  color:var(--ns-ink);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
}
body.portal-home #portal-header-login:hover,
#portal-header-login:hover{border-color:var(--ns-accent);color:var(--ns-accent)}

/* Номиналы: плоские плитки, цена белая. Акцент на этом экране один —
   кнопка покупки, поэтому цена не спорит с ней цветом. */
/* Селекторы сильные намеренно: предыдущие слои задают плитку через
   #detail #offers.offer-tiles button, и более слабое правило до неё не дойдёт. */
#detail #offers.offer-tiles button,
#detail #offers .offer-tile{
  border-radius:0;border:1px solid var(--ns-line);background:#0f1211;box-shadow:none;
}
#detail #offers.offer-tiles button:hover,
#detail #offers .offer-tile:hover{border-color:#3c4a3d;background:#11150f;transform:none}
#detail #offers.offer-tiles button[aria-pressed=true],
#detail #offers .offer-tile[aria-pressed=true]{
  border-color:var(--ns-accent);background:#11150f;box-shadow:none;
}
#detail #offers .offer-tile .tile-price{color:var(--ns-ink);font-variant-numeric:tabular-nums}
#detail #product-type{
  border-radius:0;color:#b8c4b9;background:transparent;border:1px solid var(--ns-line);
}
#detail .product-tools #share,
#detail .product-tools #favorite{border-radius:0}

/* Сумма к оплате — белая: акцентный цвет на этом экране занят кнопкой,
   и две салатовые точки спорили бы друг с другом. */
#steam-estimate strong{color:var(--ns-ink);font-variant-numeric:tabular-nums}
#steam-estimate{border-top-color:var(--ns-line)}
#steam-section .steam-section-lines dt{color:var(--ns-mute)}
#steam-section .steam-section-lines{border-color:var(--ns-line)}

/* robux-studio.css */
/* Roblox only: the existing selection, region and checkout controls stay live. */
@font-face{font-family:RobuxDisplay;src:url('/static/fonts/unbounded-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-024F}
@font-face{font-family:RobuxDisplay;src:url('/static/fonts/unbounded-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-052F}
#detail .robux-hero-copy,#detail .robux-region-link{display:none}
#detail .robux-show-all{display:none}
#detail.robux-studio .product-shell{display:block;max-width:1120px}
#detail.robux-studio .product-visual{position:relative;isolation:isolate;overflow:hidden;min-height:250px;border:1px solid #364b38;border-radius:12px;background:#15261b}
#detail.robux-studio .product-visual #product-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover!important;object-position:center 42%;border-radius:0;z-index:-2}
#detail.robux-studio .product-visual:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0c1a12fa,#102316df 35%,#0b170e20 80%),linear-gradient(0deg,#0b130ec9,transparent 65%)}
#detail.robux-studio .robux-hero-copy{display:block;position:relative;padding:30px;max-width:560px;color:#f3f5ed}
#detail.robux-studio .robux-hero-copy small{font-size:11px;letter-spacing:2px;color:#d1ff52;font-weight:650}
#detail.robux-studio .robux-hero-copy h2{font-family:RobuxDisplay,var(--font-ui);font-size:54px;letter-spacing:-2px;font-weight:800;line-height:1.2;margin:15px 0}
#detail.robux-studio .robux-hero-copy p{font-family:var(--font-ui);font-size:14px;line-height:1.7;white-space:pre-line;color:#d7e3d3;margin:0}
#detail.robux-studio .robux-region-link{display:inline-flex;margin-top:18px;padding:9px 14px;font-family:var(--font-ui);font-size:12px;min-height:40px;background:#101b15e6;border:1px solid #bddba34d;border-radius:22px;color:#f3f5ed}
#detail.robux-studio .product-visual #product-brief,#detail.robux-studio .product-compatibility-note{display:none!important}
#detail.robux-studio .product-body{min-width:0}
#detail.robux-studio #product-title,#detail.robux-studio #product-type{display:none}
#detail.robux-studio .product-body>.section-title{justify-content:flex-end;margin:12px 0 0;min-height:0}
#detail.robux-studio .product-options{background:transparent;border:0;padding:0;margin-top:14px}
#detail.robux-studio .product-region-label{max-width:360px;margin-bottom:16px}
#detail.robux-studio #region-filter,#detail.robux-studio #product-region-switch{background:#101b14;border-color:#637c47;border-radius:6px;color:#f2f4ed;font-family:var(--font-ui);font-size:16px;min-height:47px}
#detail.robux-studio #product-step{display:none}
#detail.robux-studio #offer-picker-title{font-family:var(--font-ui);font-size:24px;font-weight:800;letter-spacing:-.6px;margin:23px 0 17px}
#detail.robux-studio #offers.offer-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
#detail.robux-studio #offers.offer-tiles button.robux-pack{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:157px;padding:18px 14px;border:1px solid #35443a;border-radius:9px;background:linear-gradient(145deg,#243128,#172019 46%,#101611);box-shadow:inset 0 1px #c7f6b817,0 5px 14px #0003;color:#f3f5ed;text-align:left;transition:transform .18s,border-color .18s}
#detail.robux-studio #offers button.robux-pack:before{content:'';position:absolute;z-index:-1;right:-16px;top:17px;width:73px;height:73px;border:17px solid #c9eadc06;transform:rotate(28deg);border-radius:7px;pointer-events:none}
#detail.robux-studio #offers button.robux-pack strong{font-family:RobuxDisplay,var(--font-ui);font-size:28px;font-weight:750;letter-spacing:-1.4px;line-height:1.25;padding:0;color:#f3f5ed}
#detail.robux-studio #offers button.robux-pack small{font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;color:#a5b4aa;margin-top:6px}
#detail.robux-studio #offers button.robux-pack .tile-price{font-family:var(--font-ui);font-size:18px;font-weight:750;letter-spacing:-.4px;color:#f3f5ed;margin-top:22px}
#detail.robux-studio #offers button.robux-pack .robux-best-label{font-family:var(--font-ui);font-size:11px;line-height:1.4;color:#ebd79c;font-weight:650;margin-top:10px}
#detail.robux-studio #offers button.robux-pack[aria-pressed=true]{border-color:#d1ff52;background:linear-gradient(145deg,#3d5028,#202e1c 70%);box-shadow:inset 0 1px #edffb755,0 0 22px #bbff3411;transform:translateY(-2px)}
#detail.robux-studio .robux-value-foot{font-family:var(--font-ui);font-size:12px;line-height:1.7;color:#a5b4aa;margin-top:16px}
#detail .robux-value-advice:empty{display:none}
#detail.robux-studio .robux-value-advice:not(:empty){display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(100deg,#25321e,#172018);border:1px solid #5c7539;border-radius:8px;padding:17px 20px;margin-top:20px}
#detail.robux-studio .robux-value-advice strong{font-family:var(--font-ui);font-size:15px;font-weight:750;color:#e2f5cb;letter-spacing:-.2px}
#detail.robux-studio .robux-value-advice p{font-family:var(--font-ui);font-size:13px;line-height:1.65;font-weight:400;color:#b7c6ae;margin:6px 0 0}
#detail.robux-studio .robux-value-switch{font-family:var(--font-ui);font-size:12px;font-weight:650;background:#cfff5012;border:1px solid #93b356;border-radius:6px;color:#d1ff52;min-height:44px;padding:11px 15px;flex-shrink:0}
#detail.robux-studio .product-action{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;border:1px solid #3b4b3d;border-radius:10px;background:linear-gradient(115deg,#1e2920,#111913);padding:20px 22px;margin-top:20px}
#detail.robux-studio .product-action #action-price{color:#f3f5ed;font-family:var(--font-ui);font-size:28px;font-weight:850}
#detail.robux-studio .product-action #add{width:auto;min-width:190px;font-family:var(--font-ui);font-size:14px;font-weight:800;border:1px solid #ecffb0;border-radius:7px;background:linear-gradient(120deg,#e3ff9a,#c9ff3d);color:#17240c;box-shadow:inset 0 1px #fff8,0 5px 20px #b5f4301c;padding:14px 22px}
@media(hover:hover){#detail.robux-studio #offers button.robux-pack:hover{transform:translateY(-3px);border-color:#9aaf87}}
@media(max-width:800px){#detail.robux-studio #offers.offer-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}#detail.robux-studio .robux-hero-copy h2{font-size:44px}}
@media(max-width:580px){#detail.robux-studio #offers.offer-tiles{gap:8px}#detail.robux-studio #offers.offer-tiles button.robux-pack{padding:15px 10px;min-height:136px}#detail.robux-studio #offers button.robux-pack strong{font-size:23px}#detail.robux-studio #offers button.robux-pack .tile-price{font-size:16px;margin-top:18px}#detail.robux-studio #offers button.robux-pack .robux-best-label{font-size:11px}#detail.robux-studio .robux-hero-copy{padding:24px 20px}#detail.robux-studio .robux-hero-copy h2{font-size:38px}#detail.robux-studio .robux-value-advice:not(:empty){flex-direction:column;align-items:stretch}#detail.robux-studio .product-action{flex-wrap:wrap;padding:18px}#detail.robux-studio .product-action #add{flex:1;min-width:150px}}
@media(max-width:359px){#detail.robux-studio #offers.offer-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){#detail.robux-studio:not(.robux-expanded) #offers .robux-pack:nth-child(n+10){display:none}#detail.robux-studio .robux-show-all:not([hidden]){display:block;width:100%;min-height:46px;margin-top:12px;padding:12px;font-family:var(--font-ui);font-size:13px;border:1px solid #526642;border-radius:6px;background:#162019;color:#d1ff52}}
@media(max-width:359px){#detail.robux-studio:not(.robux-expanded) #offers .robux-pack:nth-child(n+7){display:none}}
@media(prefers-reduced-motion:reduce){#detail.robux-studio #offers.offer-tiles button.robux-pack{transition:none}}
#detail.robux-studio .package-long-title h2{font-size:clamp(25px,4vw,40px);overflow-wrap:anywhere;letter-spacing:-1px}
#detail.robux-studio .robux-hero-copy h2{overflow-wrap:anywhere;max-width:100%}
#detail.robux-studio #offers .package-offer-group{grid-column:1/-1;min-width:0;margin:0 0 22px}
#detail.robux-studio .package-group-title{font-family:var(--font-ui);font-size:16px;line-height:1.5;font-weight:750;margin:0 0 13px;padding:0 0 10px;border-bottom:1px solid #35443a;color:#d8e8cc}
#detail.robux-studio .package-group-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
#detail.robux-studio .package-duration-name{font-family:var(--font-ui);font-size:11px;line-height:1.5;color:#bdcbb3;margin-top:10px;overflow-wrap:anywhere}
@media(max-width:800px){#detail.robux-studio .package-group-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:580px){#detail.robux-studio .package-group-grid{gap:8px}}
@media(max-width:359px){#detail.robux-studio .package-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#detail.robux-studio #offers button.robux-pack.package-named strong{font-family:var(--font-ui);font-size:14px;line-height:1.5;letter-spacing:0;overflow-wrap:anywhere}
#detail.robux-studio #offers button.robux-pack.package-named small{letter-spacing:0}
.package-duration-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.package-duration-picker[hidden]{display:none}
#steam-section[data-kind=premium] .package-duration-option{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:100px;padding:18px;border:1px solid #35443a;border-radius:9px;background:linear-gradient(145deg,#243128,#172019 46%,#101611);box-shadow:inset 0 1px #c7f6b817;color:#f3f5ed;font-family:var(--font-ui)}
#steam-section[data-kind=premium] .package-duration-option strong{font-family:RobuxDisplay,var(--font-ui);font-size:28px;line-height:1.2}
#steam-section[data-kind=premium] .package-duration-option small{font-size:12px;color:#b5c4ab}
#steam-section[data-kind=premium] .package-duration-option[aria-pressed=true]{border-color:#d1ff52;background:linear-gradient(145deg,#3d5028,#202e1c 70%)}