/* areniz.com live store + purchases (shop.js). Uses the tokens of style.css. */
.shop .shop-bar{margin-top:24px;padding:18px 20px}
.shop-bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.shop-bar-in h3{font-size:20px;margin-bottom:4px}
.shop-bar-in.linked>div{display:flex;flex-direction:column;gap:2px}
.shop-bar-in.linked .sp-actions{flex-direction:row;align-items:center;gap:14px}
.shop-user,.shop-gold b{font-family:var(--font-display);font-size:22px}
.shop-gold b{color:var(--grey)}
.shop-link{display:grid;gap:12px;width:100%}
.shop-link-fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.shop-link-fields label{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;font-size:14px;color:var(--muted)}
.shop-link-fields input,.shop-redeem input{background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:10px 12px;font:inherit;min-height:44px;box-sizing:border-box;width:100%}
.shop-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:24px;
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.16),rgba(var(--bg-2-rgb),.9));border:1px solid var(--line-2);padding:18px}
.shop-hero-art img{width:100%;height:auto;max-height:320px;object-fit:contain;display:block}
.shop-hero-copy{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.shop-hero-copy h2{font-size:clamp(26px,3.4vw,40px)}
.shop-tabs{display:flex;gap:6px;margin-top:28px;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.shop-tab{white-space:nowrap;padding:10px 14px;font-family:var(--font-display);font-size:16px;color:var(--muted);border:1px solid transparent;border-bottom:0}
.shop-tab[aria-selected="true"]{color:var(--text);border-color:var(--line-2);background:var(--panel);box-shadow:inset 0 2px 0 var(--accent)}
.shop-panel{padding-top:22px}
.shop:not(.tabs-on) .shop-panel{border-top:1px solid var(--line);margin-top:22px}
.shop-panel>.st-h{margin-bottom:6px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:16px}
.shop-card{background:var(--panel);border:1px solid var(--line-2);padding:14px;display:flex;flex-direction:column;gap:8px;position:relative;min-width:0}
.shop-card.white{border-top:2px solid var(--white)}.shop-card.black{border-top:2px solid var(--black)}.shop-card.grey{border-top:2px solid var(--grey)}
.shop-card h3{font-size:18px;overflow-wrap:anywhere}
.shop-card.mini{padding:8px}
.shop-card.wide{flex-direction:row;align-items:center;gap:20px;grid-column:1/-1}
.shop-card.wide .shop-art{flex:0 0 min(46%,520px)}
.shop-card.is-owned{opacity:.8}
.shop-card.is-owned::after{content:"✓";position:absolute;top:10px;inset-inline-end:12px;color:var(--teal);font-weight:700}
.shop-art{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:radial-gradient(circle at 50% 40%,rgba(var(--text-rgb),.06),transparent 70%)}
.shop-card.wide .shop-art{aspect-ratio:16/9}
.shop-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.shop-noart{font-size:40px;color:var(--grey)}
.shop-meta{font-size:13px;color:var(--muted);margin:0}
.shop-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:auto 0 0;font-size:15px}
.shop-price b{font-family:var(--font-display);font-size:20px;color:var(--grey)}
.shop-price s{color:var(--dim);font-size:13px}
.shop-save{color:var(--teal);font-weight:700;font-size:13px}
.shop-save.big{font-size:20px}
.shop-worth{color:var(--muted);font-size:12px}
.shop-count{display:inline-block;font-size:13px;color:var(--ore);font-variant-numeric:tabular-nums}
.shop-limited{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.shop-rarity{align-self:flex-start;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--line-2);color:var(--muted)}
.shop-rarity.epic{color:#c084fc;border-color:#7c3aed}.shop-rarity.legendary{color:var(--grey);border-color:var(--grey)}
.shop-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn.sm{padding:8px 14px;font-size:14px;min-height:38px}
.btn[disabled]{filter:grayscale(.7) brightness(.8);cursor:not-allowed}
.shop-progress{position:relative;margin:0;font-size:13px;color:var(--muted);padding-bottom:8px}
.shop-progress i{position:absolute;inset-inline-start:0;bottom:0;height:4px;background:var(--teal);max-width:100%}
.shop-progress::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--line-2);z-index:-1}
.shop-offer{margin-top:22px}
.shop-oh{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;font-size:20px}
.shop-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.shop-pack{background:var(--panel);border:1px solid var(--line-2);padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.shop-pack.best{border-color:var(--grey);box-shadow:0 0 0 1px rgba(var(--grey-rgb),.35)}
.shop-pack .shop-art{width:100%}
.shop-pack h3{font-size:24px;color:var(--grey)}
.shop-pack .shop-price{justify-content:center;font-family:var(--font-display);font-size:22px;margin:0}
.shop-alert{border:1px solid rgba(var(--ore-rgb),.6);background:rgba(var(--ore-rgb),.08);padding:12px 14px;margin:14px 0 0}
.shop-alert.info{border-color:rgba(var(--crystal-rgb),.5);background:rgba(var(--crystal-rgb),.07)}
.shop-country{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 18px;align-items:start}
.shop-country .shop-ch{grid-column:1/-1}
.shop-country .shop-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.shop-card.elite .btn.sm{font-size:12px;padding:6px 10px;min-height:32px}
.shop-ch{display:flex;align-items:center;gap:10px;font-size:22px}
.shop-tier{margin-top:14px}
.shop-tier h4{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:16px;color:var(--muted)}
.shop-owned{margin:0;font-size:13px;color:var(--teal)}
.shop-coupon{margin-top:40px}
.shop-redeem{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.shop-redeem label{width:100%;font-size:14px;color:var(--muted)}
.shop-redeem input{flex:1 1 200px;width:auto}
.shop-dialog{background:var(--panel);color:var(--text);border:1px solid var(--line-2);max-width:min(440px,calc(100vw - 32px));padding:22px;box-shadow:var(--sh-3)}
.shop-dialog::backdrop{background:rgba(0,0,0,.65)}
.shop-dialog h2{font-size:24px;margin-bottom:12px}
.shop-dart img{max-width:100%;max-height:180px;display:block;margin:0 auto 12px}
.shop-toast{position:fixed;inset-inline:16px;bottom:16px;max-width:520px;margin-inline:auto;z-index:90;background:var(--raise);border:1px solid var(--line-2);
  padding:14px 16px;box-shadow:var(--sh-3);transform:translateY(160%);transition:transform var(--t)}
.shop-toast.show{transform:none}
.shop-toast.good{border-color:var(--teal)}.shop-toast.bad{border-color:var(--accent)}
.shop-account{margin-top:24px;padding:20px}
.shop-account h2{font-size:26px}
.shop-account .shop-bar{margin:16px 0}
.shop-sec{margin-top:26px}
.shop-sec h3{font-size:20px;margin-bottom:10px}
.shop-owned-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.shop-owned-group h4{font-size:15px;color:var(--muted);margin-bottom:8px}
.shop-owned-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.shop-owned-list li{display:flex;align-items:center;gap:10px;min-width:0}
.shop-owned-list li>span:last-child{display:flex;flex-direction:column;min-width:0}
.shop-owned-list small{color:var(--muted);font-size:12px}
.shop-thumb{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-2)}
.shop-thumb img{max-width:44px;max-height:44px;width:auto;height:auto}
.shop-thumb .shop-noart{font-size:18px}
.shop-table td small{display:block;color:var(--muted);font-size:12px}
.shop-table td{vertical-align:top}
.shop-ref{font-family:ui-monospace,Menlo,monospace;direction:ltr;unicode-bidi:isolate}
.shop-plus{color:var(--teal);font-variant-numeric:tabular-nums}
.shop-minus{color:var(--ore);font-variant-numeric:tabular-nums}
.shop-status.completed{color:var(--teal)}.shop-status.refunded,.shop-status.failed,.shop-status.cancelled{color:var(--ore)}
tr.is-refunded td{opacity:.85}
.shop-payment{margin:18px 0}
@media (max-width:720px){
  .shop-hero{grid-template-columns:1fr}
  .shop-card.wide{flex-direction:column}
  .shop-card.wide .shop-art{flex:none;width:100%}
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .shop-bar-in.linked{align-items:flex-start}
}
/* season page art (gen_site.season_page) */
.se-art{margin-top:22px}.se-art img{width:100%;height:auto;max-height:440px;object-fit:contain;display:block}
.se-icon img{max-height:96px;width:auto;height:auto;display:block;margin-bottom:10px}
.se-ranking{display:flex;gap:18px;align-items:center}
/* maps page (maps_page.py) */
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:22px}
.map-card{background:var(--panel);border:1px solid var(--line-2);display:flex;flex-direction:column;min-width:0}
.map-card[hidden]{display:none}
.map-art{aspect-ratio:1/1;background:var(--bg-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.map-art img{width:100%;height:100%;object-fit:cover;display:block}
.map-svg{width:78%;height:78%}.map-svg polygon{fill:#2c4a3a;stroke:var(--line-2);stroke-width:2}.map-svg circle{fill:var(--accent)}
.map-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.map-body h3{font-size:22px}.map-body p{margin:0;color:var(--muted);font-size:14px}
.map-tags{display:flex;flex-wrap:wrap;gap:6px}.map-tags span{font-size:12px;border:1px solid var(--line-2);padding:2px 8px;color:var(--text)}
.map-filter a.on{border-color:var(--accent);color:var(--text)}
/* elite page: the game's elite card art */
.el-art picture img{width:100%;height:auto;max-height:220px;object-fit:contain;display:block}