/* Artwork and live HTML share one surface; no text is baked into the images. */
.store-shell{isolation:isolate;position:relative}
.store-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s ease;overflow:hidden;contain:strict}
.store-ambient.active{opacity:1}
.store-ambient i{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;background:radial-gradient(ellipse at 12% 28%,color-mix(in srgb,var(--ambient-color) 25%,transparent),transparent 65%),radial-gradient(ellipse at 95% 75%,color-mix(in srgb,var(--ambient-color) 17%,transparent),transparent 65%)}
.store-light .store-ambient{filter:saturate(.7);opacity:0}
.store-light .store-ambient.active{opacity:.55}
.campaign{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--catalog-line);border-radius:20px;background:#0c1422;color:#f6f8ff;min-width:0}
.campaign-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 52%;z-index:-2;pointer-events:none}
.campaign-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,13,27,.94) 0%,rgba(6,13,27,.84) 27%,rgba(6,13,27,.35) 55%,rgba(6,13,27,.02) 78%);pointer-events:none}
.campaign-copy{position:relative;width:52%;min-width:0;max-width:700px}
.campaign .catalog-kicker{color:#b8d2f9;font-size:11px;letter-spacing:.12em;font-weight:700}
.campaign h1,.campaign h2{color:#f8faff!important;text-wrap:balance;line-height:1.12;margin:15px 0;font-weight:750;letter-spacing:-.035em}
.campaign p{color:#c3cedf!important;line-height:1.65;max-width:410px;font-size:14px}
.store-body .store-hero.catalog-hero.campaign{display:flex;min-height:360px;height:clamp(360px,26vw,540px);padding:42px clamp(28px,4vw,88px);background:#0c1422!important;margin-bottom:40px}
.store-body .store-hero.catalog-hero.campaign h1{font-size:clamp(32px,3.1vw,64px);max-width:600px}
.campaign .store-btn{margin-top:15px;background:#f2f6ff;color:#17243d;border-color:transparent;font-weight:700;box-shadow:0 3px 16px #0002}
.campaign .store-btn:hover{background:#fff;box-shadow:0 6px 24px #b3d4ff25}
.campaign-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:6px 0 40px}
.campaign-pair .campaign{padding:32px;min-height:230px;display:flex;align-items:center}
.campaign-pair .campaign-copy{width:58%}
.campaign-pair h2{font-size:clamp(24px,2vw,38px)}
.campaign-pair p{font-size:12px}
.campaign-link{display:inline-flex;align-items:center;gap:10px;padding:8px 0;margin-top:8px;font-weight:650;color:#e4edff;border:0;background:none;cursor:pointer;text-align:start;line-height:1.4}
.campaign-link svg{width:18px;height:18px;flex-shrink:0;transition:transform .2s}
.campaign-link:hover svg{transform:translateX(4px)}
.market-campaign{padding:38px clamp(26px,3.5vw,76px);min-height:300px;display:flex;align-items:center;margin-bottom:28px}
.market-campaign h1{font-size:clamp(30px,3vw,54px)}
.market-campaign .campaign-art{object-position:70% 48%}
.cover-campaign .campaign-art{inset-inline-start:45%;width:55%;object-position:center 35%}
.cover-campaign .campaign-shade{background:linear-gradient(90deg,#0c1422 36%,#0c1422db 49%,#0c14224d 69%,#0c142226)}
.campaign-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.campaign-filters button{color:#eef4ff;background:#ffffff12;border:1px solid #ffffff40;border-radius:8px;padding:10px 14px;cursor:pointer;font-size:12px;line-height:1.4}
.campaign-filters button:hover,.campaign-filters button[aria-pressed=true]{background:#f1f6ff;color:#122139;border-color:#f1f6ff}
.campaign :focus-visible,.listing-control button:focus-visible{outline:3px solid #a1d8ff;outline-offset:4px}
/* Controls retain standard named inputs and native form validation. */
.listing-control{min-width:0;border:1px solid var(--s-line);background:var(--s-bg);border-radius:14px;padding:18px}
.listing-control>label{display:block;font-size:13px;font-weight:650;color:var(--s-text);margin-bottom:14px}
.town-hall-control{grid-column:1 / -1}
.town-hall-choices{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px;margin-bottom:20px}
.town-hall-choices button{color:hsl(var(--hall-hue) 60% 72%);background:var(--s-surface);border:1px solid var(--s-line);border-radius:11px;display:flex;align-items:center;justify-content:center;gap:9px;min-height:64px;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
.town-hall-choices button svg{width:32px;height:32px;flex-shrink:0}
.town-hall-choices button b{font-size:16px;font-variant-numeric:tabular-nums}
.town-hall-choices button:hover{border-color:hsl(var(--hall-hue) 55% 65%);transform:translateY(-2px)}
.town-hall-choices button[aria-pressed=true]{background:hsl(var(--hall-hue) 35% 24%);border-color:hsl(var(--hall-hue) 65% 70%);box-shadow:0 0 0 1px hsl(var(--hall-hue) 65% 70%)}
.number-control{display:flex;gap:8px;align-items:stretch;max-width:280px}
.number-control input{min-width:0;width:100%;text-align:center;font-size:18px!important;font-weight:650;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
.number-control input::-webkit-inner-spin-button{appearance:none}
.number-control button{width:46px;min-height:46px;flex-shrink:0;background:var(--s-elevated);color:var(--s-text);border:1px solid var(--s-line);border-radius:8px;font-size:22px;cursor:pointer}
.number-control button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--s-elevated))}
.listing-control input:not([type=range]){border:1px solid var(--s-line);border-radius:8px;background:var(--s-surface);color:var(--s-text);padding:12px;width:100%}
.control-choices{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.control-choices button{min-height:36px;border:1px solid var(--s-line);background:var(--s-surface);color:var(--s-muted);padding:7px 12px;border-radius:7px;cursor:pointer;font-size:12px}
.control-choices button:hover,.control-choices button[aria-pressed=true]{color:var(--s-text);background:color-mix(in srgb,var(--accent) 22%,var(--s-surface));border-color:var(--accent)}
.listing-control input.control-range{display:block;width:100%;height:36px;padding:0!important;margin:12px 0 -4px;border:0;background:transparent;accent-color:var(--accent);cursor:pointer;box-shadow:none}
[dir=rtl] .campaign:not(.cover-campaign) .campaign-art{transform:scaleX(-1)}
[dir=rtl] .campaign-shade{background:linear-gradient(270deg,rgba(6,13,27,.94),rgba(6,13,27,.84) 27%,rgba(6,13,27,.35) 55%,rgba(6,13,27,.02) 78%)}
[dir=rtl] .cover-campaign .campaign-shade{background:linear-gradient(270deg,#0c1422 36%,#0c1422db 49%,#0c14224d 69%,#0c142226)}
[dir=rtl] .campaign-link svg{transform:rotate(180deg)}
@media(min-width:2000px){.campaign-pair .campaign{min-height:290px;padding:42px}.market-campaign{min-height:380px}}
@media(max-width:1050px){.town-hall-choices{grid-template-columns:repeat(6,minmax(0,1fr))}.campaign-pair .campaign{padding:24px}.campaign-copy{width:58%}.campaign-pair .campaign-copy{width:65%}}
@media(max-width:640px){
 .store-body .store-hero.catalog-hero.campaign{height:auto;min-height:400px;padding:30px 23px;align-items:flex-start;border-radius:15px;margin-bottom:28px}
 .store-body .store-hero.catalog-hero.campaign h1{font-size:32px;max-width:290px;margin-top:10px}
 .campaign-copy,.campaign-pair .campaign-copy{width:100%;max-width:330px}
 .campaign-art{object-position:65% 50%}
 .campaign-shade,[dir=rtl] .campaign-shade{background:linear-gradient(180deg,#080f20f5 0%,#080f20cb 40%,#080f2045 75%)}
 .campaign p{font-size:12px!important;max-width:270px!important}
 .campaign-pair{grid-template-columns:1fr;gap:14px;margin-bottom:28px}
 .campaign-pair .campaign{min-height:205px;padding:24px;align-items:flex-start}
 .campaign-pair .campaign-copy{width:65%}.campaign-pair h2{font-size:25px}
 .campaign-pair .campaign-shade{background:linear-gradient(90deg,#080f20ed,#080f20b0 40%,#080f200a)}
 [dir=rtl] .campaign-pair .campaign-shade{background:linear-gradient(270deg,#080f20ed,#080f20b0 40%,#080f200a)}
 .market-campaign{min-height:295px;padding:25px 22px;align-items:flex-start;border-radius:15px}
 .market-campaign h1{font-size:29px;max-width:270px}.campaign-filters{margin-top:18px;gap:6px}.campaign-filters button{padding:9px 11px}
 .cover-campaign .campaign-art{inset-inline-start:25%;width:75%}
 .cover-campaign .campaign-shade,[dir=rtl] .cover-campaign .campaign-shade{background:linear-gradient(180deg,#0c1422eb,#0c1422ba 45%,#0c142222)}
 .wizard-fields:has(.listing-control){grid-template-columns:1fr}
 .listing-control{padding:14px}.town-hall-choices{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
 .town-hall-choices button{flex-direction:column;gap:2px;min-height:66px}.town-hall-choices button svg{width:25px;height:25px}.town-hall-choices button b{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.store-ambient,.store-ambient i,.campaign-link svg,.town-hall-choices button{transition:none!important}.town-hall-choices button:hover{transform:none}}

/* Flat illustrations sit beside the copy, on a calm solid surface. */
.flat-campaign{--art-surface:linear-gradient(110deg,#172132,#17232c);--art-ink:#f3f5f9;background:var(--art-surface);color:var(--art-ink);border-color:#354354}
.flat-campaign.art-gift{--art-surface:linear-gradient(110deg,#252331,#302932)}
.flat-campaign.art-support{--art-surface:linear-gradient(110deg,#182b2c,#203235)}
.flat-campaign.art-clash{--art-surface:linear-gradient(110deg,#282b29,#333127)}
.flat-campaign.art-counter-strike{--art-surface:linear-gradient(110deg,#1c2837,#233340)}
.store-body .store-hero.catalog-hero.flat-campaign{background:var(--art-surface)!important;height:clamp(320px,23vw,410px);min-height:320px}
.flat-campaign .campaign-art{inset:0;inset-inline-start:50%;width:50%;height:100%;object-fit:contain;object-position:center;z-index:-1}
.flat-campaign .campaign-shade{display:none}
.flat-campaign .campaign-copy{width:49%}
.flat-campaign h1,.flat-campaign h2{color:var(--art-ink)!important;letter-spacing:-.035em}
.flat-campaign p{color:var(--art-ink)!important;opacity:.82}
.flat-campaign .catalog-kicker{color:var(--art-ink);opacity:.8;letter-spacing:.08em}
.flat-campaign .store-btn{background:#dce8fd;color:#19283d;border:1px solid #dce8fd;box-shadow:none}
.flat-campaign .store-btn:hover{background:color-mix(in srgb,var(--art-ink) 85%,#000);box-shadow:none}
.flat-campaign .campaign-link{color:var(--art-ink)}
.campaign-pair .flat-campaign .campaign-copy{width:57%}
.campaign-pair .flat-campaign .campaign-art{inset-inline-start:53%;width:48%}
.flat-campaign .campaign-filters button{color:var(--art-ink);background:#ffffff0c;border-color:color-mix(in srgb,var(--art-ink) 25%,transparent)}
.flat-campaign .campaign-filters button:hover,.flat-campaign .campaign-filters button[aria-pressed=true]{background:var(--art-ink);color:#19283d;border-color:var(--art-ink)}
.flat-campaign :focus-visible{outline-color:var(--art-ink)}
@media(max-width:1050px){
 .flat-campaign .campaign-copy{width:55%}
 .flat-campaign .campaign-art{inset-inline-start:54%;width:46%}
 .campaign-pair .flat-campaign .campaign-copy{width:57%}
}
@media(max-width:640px){
 .store-body .store-hero.catalog-hero.flat-campaign{height:auto;min-height:0;padding:28px 24px 195px}
 .flat-campaign .campaign-copy{width:100%;max-width:none}
 .flat-campaign .campaign-art{inset:auto;inset-block-end:0;inset-inline-start:10%;width:80%;height:190px}
 .store-body .store-hero.catalog-hero.flat-campaign h1{font-size:30px;max-width:350px}
 .flat-campaign p{max-width:350px!important}
 .campaign-pair .flat-campaign{min-height:190px;padding:24px 20px}
 .campaign-pair .flat-campaign .campaign-copy{width:58%}
 .campaign-pair .flat-campaign .campaign-art{inset-block:0;inset-inline-start:57%;width:43%;height:100%}
 .campaign-pair .flat-campaign h2{font-size:23px}
 .market-campaign.flat-campaign{min-height:0;padding:26px 22px 180px}
 .market-campaign.flat-campaign .campaign-art{height:170px}
}