/* Store / cosmetics / checkout / invite — extends base.css */
:root{--r-common:#9a9aa6;--r-rare:#4da6ff;--r-epic:#b46bff;--r-legendary:#ffc845}
.coin{display:inline-flex;align-items:center;gap:5px;font:400 1.05rem/1 var(--head);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.coin svg{width:1.05em;height:1.05em}
.coin.gold{color:var(--gold)}.coin.cash{color:var(--green)}.coin.usd{color:var(--text)}
.owned-tag{font:400 .8rem/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.owned-tag::before{content:"✓"}
.ribbon{position:absolute;top:14px;right:-34px;z-index:2;width:140px;padding:6px 0;text-align:center;font:400 .74rem/1 var(--head);letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:#111;transform:rotate(38deg);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.ribbon.red{background:#c81e1e;color:#fff}
.checks{list-style:none;padding:0;margin:0 0 14px;text-align:left;font-size:.92rem;color:var(--muted)}
.checks li{padding:3px 0 3px 22px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}

/* ---------- hero ---------- */
.store-head{padding-bottom:clamp(18px,3vw,30px)}
.store-hero{display:grid;gap:clamp(22px,4vw,48px);align-items:center}
@media(min-width:980px){.store-hero{grid-template-columns:1fr minmax(0,520px)}}
.store-intro h1{margin-bottom:.3em}
.wallet-bar{display:inline-flex;flex-wrap:wrap;align-items:center;gap:14px;margin:18px 0 0;padding:10px 16px;border-radius:12px;background:rgba(0,0,0,.55);border:1px solid var(--line2)}
.wallet-bar .label{margin:0;font-size:.72rem}
.pay-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pay-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.co-ico{display:inline-block;width:22px;height:22px;border-radius:7px;flex:none;background:center/70% no-repeat}
.co-gold{background-color:rgba(255,200,69,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 11l2-6h6l2 6z' fill='%23ffc845'/%3E%3Cpath d='M1 14l2-3h10l2 3z' fill='%23ffc845' opacity='.7'/%3E%3C/svg%3E")}
.co-whop{background-color:rgba(77,166,255,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='2' fill='none' stroke='%239ccdff' stroke-width='1.6'/%3E%3Cpath d='M1 6h14' stroke='%239ccdff' stroke-width='2'/%3E%3C/svg%3E")}
.co-crypto{background-color:rgba(255,138,30,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23ff9f43' stroke-width='1.5'/%3E%3Cpath d='M6 4.5h3a1.7 1.7 0 0 1 0 3.4H6zM6 7.9h3.4a1.8 1.8 0 0 1 0 3.6H6zM6 3.5v9M8 3.5v1M8 11.5v1' stroke='%23ff9f43' stroke-width='1.2' fill='none'/%3E%3C/svg%3E")}

/* featured carousel */
.featured{position:relative;padding:16px;border-radius:var(--radius-lg);background:linear-gradient(160deg,rgba(255,200,69,.08),rgba(0,0,0,.6) 40%);border:1px solid var(--line2);box-shadow:var(--shadow);min-width:0}
.featured-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.featured-nav{display:flex;gap:8px}
.featured-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:14px;outline-offset:4px}
.featured-track::-webkit-scrollbar{display:none}
.feat{flex:0 0 100%;scroll-snap-align:start;display:grid;gap:12px}
@media(min-width:560px){.feat{grid-template-columns:1.1fr 1fr;align-items:center}}
.feat-art{aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rc) 28%,transparent),#0a0a0e 72%);border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);overflow:hidden}
.feat-art svg{width:100%;height:100%;max-height:220px}
.feat-art.k-character svg,.cos-art.k-character svg{border-radius:10px}
.feat-info h3,.feat-info .feat-name{font-size:clamp(1.6rem,4vw,2.2rem);margin:.3em 0 .5em}
.featured-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.featured-dots button{width:26px;height:6px;border-radius:3px;border:0;background:var(--line2);cursor:pointer;padding:0}
.featured-dots button[aria-selected="true"]{background:var(--gold);width:40px}
.r-common{--rc:var(--r-common)}.r-rare{--rc:var(--r-rare)}.r-epic{--rc:var(--r-epic)}.r-legendary{--rc:var(--r-legendary)}
.rarity{display:inline-block;font:400 .72rem/1 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--rc,var(--muted));padding:4px 8px;border-radius:5px;background:color-mix(in srgb,var(--rc,#888) 15%,transparent);border:1px solid color-mix(in srgb,var(--rc,#888) 45%,transparent);margin-right:8px}
.cos-kind{font-size:.8rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}

/* tabs */
.store-tabs{margin:26px 0 30px}
.store-tabs [role=tab]{font-size:1.02rem;padding:11px 20px}

/* ---------- gold packs ---------- */
.packs{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.pack{position:relative;overflow:hidden;text-align:center;padding:22px 20px 20px;border-radius:var(--radius-lg);background:linear-gradient(180deg,#1d1a12,var(--panel) 55%);border:1px solid rgba(255,200,69,.25);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .25s}
.pack:hover{transform:translateY(-5px);border-color:var(--gold)}
.pack.is-best{border-color:var(--gold);box-shadow:var(--shadow),var(--glow-gold)}
.pack.is-starter{background:linear-gradient(180deg,#22100f,var(--panel) 55%);border-color:rgba(255,59,59,.4)}
.pack-art{height:110px;display:grid;place-items:center;margin-bottom:6px}
.gold-art{height:100%;width:auto;filter:drop-shadow(0 8px 18px rgba(255,200,69,.3))}
.pack h3{margin:.2em 0 .1em;font-size:1.4rem}
.pack-gold{font:400 2.6rem/1 var(--head);color:var(--gold);margin:6px 0 10px;text-shadow:0 0 24px rgba(255,200,69,.35)}
.pack-gold small{font-size:.9rem;color:var(--muted)}
.pack-per{font-size:.88rem;flex:1}
.pack .checks{flex:1}
.pack .btn{margin-top:auto}

/* ---------- cosmetics ---------- */
.cos-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.r-opt[aria-pressed="true"]{background:var(--rc,var(--gold));border-color:var(--rc,var(--gold));color:#111}
.r-opt.r-all{--rc:var(--gold)}
.cos-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr))}
.cos-card{position:relative;display:flex;flex-direction:column;padding:12px 12px 14px;border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.cos-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--rc) 70%,transparent);box-shadow:var(--shadow),0 0 30px -6px color-mix(in srgb,var(--rc) 60%,transparent)}
.cos-card::before{content:"";position:absolute;left:12px;right:12px;top:0;height:3px;background:var(--rc);border-radius:0 0 3px 3px}
.r-legendary.cos-card{background:linear-gradient(180deg,#221d10,var(--panel) 60%)}
.cos-art{aspect-ratio:16/11;border-radius:12px;display:grid;place-items:center;padding:12px;margin-bottom:12px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--rc) 22%,transparent),#0a0a0e 75%)}
.cos-art svg{width:100%;height:100%}
.cos-art.k-weapon_skin svg{max-width:92%}
.cos-art.k-outfit,.cos-art.k-character{padding:6px}
.cos-art.k-crew_tag,.cos-art.k-emote{padding:8px}
.cos-art.k-crew_tag svg,.cos-art.k-emote svg{border-radius:8px}
.cos-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.cos-card h3{font-size:1.35rem;margin:.45em 0 .25em}
.cos-desc{font-size:.88rem;color:var(--muted);margin:0 0 12px;flex:1}
.cos-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;flex-wrap:wrap}
.cos-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cos-price .coin.usd{font-size:.88rem;color:var(--muted)}

/* ---------- arsenal ---------- */
#clsOpts{margin-bottom:20px}
.ars-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.ars-card{position:relative;display:flex;flex-direction:column;padding:16px;border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-top:3px solid var(--c);box-shadow:var(--shadow)}
.ars-top{display:flex;justify-content:space-between;align-items:center}
.ars-card h3{margin:.3em 0 .2em}
.ars-art{height:84px;display:grid;place-items:center;margin:4px 0 10px;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--c) 40%,transparent))}
.ars-art svg{height:100%;width:auto;max-width:100%}
.ars-bars{display:grid;gap:5px;margin-bottom:14px}
.ars-bar{display:grid;grid-template-columns:72px 1fr 42px;align-items:center;gap:8px;font-size:.78rem;color:var(--dim)}
.ars-bar b{color:var(--text);text-align:right;font-weight:600}
.ars-bar .bar{height:6px}
.ars-bar .bar-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 50%,#000),var(--c))}
.ars-buy{display:flex;gap:6px}
.cash-btn{--c:var(--green);--t:#03140a;box-shadow:0 4px 0 #1b7a4a}

/* ---------- faq ---------- */
.store-faq{margin-top:40px}
.store-faq .grid-3{margin-bottom:22px}
.faq{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 18px;font:400 1.1rem/1.2 var(--head);letter-spacing:.04em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{padding:0 18px 16px;margin:0;color:var(--muted)}

/* ---------- checkout modal ---------- */
.co-sum{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;background:#0b0b10;border:1px solid var(--line);margin-bottom:18px}
.co-art{width:96px;height:72px;flex:none;display:grid;place-items:center;border-radius:10px;background:#141419;overflow:hidden;padding:4px}
.co-art svg{width:100%;height:100%}
.co-kind{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.co-name{display:block;font:400 1.3rem/1.1 var(--head);text-transform:uppercase;letter-spacing:.03em;margin:2px 0 6px}
.co-prices{display:flex;gap:12px;flex-wrap:wrap}
.co-methods{display:grid;gap:8px}
.co-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;transition:border-color .2s,background .2s}
.co-opt:has(input:checked){border-color:var(--gold);background:rgba(255,200,69,.07)}
.co-opt input{accent-color:var(--gold);width:18px;height:18px;min-height:0;margin:0;flex:none}
.co-opt .co-ico{width:34px;height:34px;border-radius:10px}
.co-opt b{display:block}.co-opt small{display:block;color:var(--dim);font-size:.82rem}
.co-opt.is-off{opacity:.5;cursor:not-allowed}
.co-coins{margin-top:14px}
.co-coins .label{display:block;font:400 .82rem/1.2 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.crypto-row{margin-bottom:12px}
.crypto-row .label{display:block;font:400 .78rem/1.2 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.copy{display:flex;gap:8px;align-items:center}
.copy code{flex:1;min-width:0;padding:10px 12px;border-radius:10px;background:#0b0b10;border:1px solid var(--line2);font-size:.95rem;overflow-wrap:anywhere}
.crypto-status{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(77,166,255,.08);border:1px solid rgba(77,166,255,.35);margin:16px 0}
.crypto-status small{display:block;color:var(--dim)}
.crypto-steps{color:var(--muted);font-size:.9rem;padding-left:1.2em}
.crypto-steps li{margin-bottom:4px}

/* ---------- invite + complete pages ---------- */
.invite-hero{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media(min-width:900px){.invite-hero{grid-template-columns:1fr 440px}}
.invite-card{padding:clamp(20px,3vw,28px);border-radius:var(--radius-lg);background:linear-gradient(180deg,#1d1a12,var(--panel) 50%);border:1px solid rgba(255,200,69,.35);box-shadow:var(--shadow),var(--glow-gold)}
.invite-card .code-input{text-transform:uppercase;letter-spacing:.22em;font-size:1.5rem}
.peek{margin-top:14px;padding:14px;border-radius:12px;background:#0b0b10;border:1px dashed var(--line2)}
.peek-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.reveal-stage{position:relative;display:grid;place-items:center;min-height:320px;margin:10px 0 0}
.crate{width:180px;height:150px;position:relative}
.crate svg{width:100%;height:100%;overflow:visible}
.crate .lid{transform-origin:20% 30%;transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.reveal-stage.open .crate .lid{transform:translate(-14px,-46px) rotate(-28deg)}
.reveal-stage.open .crate{animation:shake .4s 1}
@keyframes shake{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.rewards{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.reward{min-width:130px;padding:16px;text-align:center;border-radius:14px;background:var(--panel2);border:1px solid var(--rc,var(--gold));box-shadow:0 0 24px -6px var(--rc,var(--gold));opacity:0;transform:translateY(20px) scale(.9);animation:pop .55s var(--ease) forwards}
.reward b{display:block;font:400 1.8rem/1 var(--head);color:var(--rc,var(--gold))}
.reward span{font-size:.85rem;color:var(--muted)}
@keyframes pop{to{opacity:1;transform:none}}
.spray{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.spray i{position:absolute;left:50%;top:45%;width:10px;height:10px;border-radius:50%;opacity:0;animation:spray 1.2s ease-out forwards}
@keyframes spray{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.4)}}
.steps{counter-reset:s;display:grid;gap:14px;list-style:none;padding:0}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;padding:20px;border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--line);position:relative}
.steps li::before{content:counter(s);font:400 2.6rem/1 var(--head);color:var(--red);display:block;margin-bottom:8px}
.done-hero{text-align:center;max-width:680px;margin:0 auto}
.done-art{width:min(260px,70vw);margin:0 auto 10px}
.done-art .bar-drop{animation:drop .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes drop{from{transform:translateY(-120px);opacity:0}}
@media (prefers-reduced-motion:reduce){.reward{opacity:1;transform:none;animation:none}.spray{display:none}.reveal-stage.open .crate{animation:none}}
@media(max-width:559px){.feat-art{aspect-ratio:16/9;padding:10px}.feat-info .feat-name{margin:.2em 0 .4em}.pay-strip{gap:6px}.pay-chip{font-size:.78rem;padding:6px 10px}.store-tabs [role=tab]{padding:10px 14px;font-size:.95rem}}
dialog.modal[open]:has(.co-sum),dialog.modal[open]:has(.crypto){display:flex;flex-direction:column}
dialog.modal[open]:has(.co-sum) .modal-body,dialog.modal[open]:has(.crypto) .modal-body{overflow:auto;min-height:0}
@media(max-width:559px){.co-opt{padding:10px 12px}.co-opt .co-ico{width:28px;height:28px}.co-sum{padding:10px;margin-bottom:14px}.co-art{width:76px;height:58px}}
/* phones: two-up grids so the catalog doesn't scroll forever */
@media(max-width:559px){
  .packs{grid-template-columns:1fr 1fr;gap:10px}
  .pack{padding:16px 10px 12px}.pack-art{height:72px}.pack h3{font-size:1.05rem}.pack-gold{font-size:1.8rem}.pack-per{font-size:.74rem}
  .pack .checks{font-size:.76rem}.pack .checks li{padding-left:16px}.pack .btn{font-size:.9rem;padding:10px 8px;min-height:42px}
  .ribbon{top:10px;right:-40px;font-size:.6rem}
  .cos-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cos-card{padding:8px 8px 10px}.cos-art{margin-bottom:8px;padding:6px}
  .cos-meta .cos-kind{display:none}.rarity{font-size:.6rem;padding:3px 6px}
  .cos-card h3{font-size:1.02rem}
  .cos-desc{font-size:.76rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px}
  .cos-foot{flex-direction:column;align-items:stretch;gap:8px}.cos-foot .btn{width:100%}
  .cos-price .coin{font-size:.95rem}
}
.crypto-qr{width:168px;margin:4px auto 14px;padding:8px;background:#fff;border-radius:12px}.crypto-qr svg{width:100%;height:auto;display:block}.crypto-qr svg rect[fill="#ffffff"]{fill:#fff}