/* /shop/ — collections, cards, inspect view, loadout, exchange. Builds on tokens.css, home.css (header, sheets, chips,
   buttons) and flair.css (collection colours --c1/--c2/--c3, rarity colour --rar). */

main.page.shoppage { max-width: calc(var(--by-max-w) + 2 * var(--gutter)); gap: 0; padding-top: 16px; }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.view > section { min-width: 0; }
.shop .sitenav a[aria-current="true"] { color: var(--by-text); }
.shopnav { display: flex !important; gap: 4px; }
.shopnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--by-r-pill); font-weight: 700; color: var(--by-text-muted); }
.shopnav a[aria-current="true"] { background: var(--by-glass-lite); box-shadow: var(--by-glass-inner); }
@media (max-width: 767px) { .shop header.site { flex-wrap: wrap; row-gap: 6px; } .shopnav { order: 3; flex: 1 1 100%; justify-content: center; } }

/* wallet */
.pill.gemwallet { border: 0; cursor: pointer; padding: 0 6px 0 4px; color: #e2d6ff; background: color-mix(in srgb, #b69cff 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #b69cff 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14); }
.pill.gemwallet .plus { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 50%; font: 700 17px/1 var(--by-font-ui); color: #1c1040; background: var(--by-gummy-violet); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6); }
.pill.wallet .gem-ic, .pill.wallet .coin-ic { width: 28px; height: 28px; }
.coins { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .coins .ic { width: 1.25em; height: 1.25em; }
.was { margin-right: 6px; font-size: .86em; font-weight: 600; color: var(--by-text-muted); text-decoration-thickness: 1.5px; }
.own-tag, .lvl-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; color: var(--by-success-text, #5ff2c0); } .own-tag .ic, .lvl-tag .ic { width: 15px; height: 15px; }
.lvl-tag { color: var(--by-gold); }
.rar-dot { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--rar); box-shadow: 0 0 6px var(--rar); }

/* ---------- collection banner ---------- */
.colhero { position: relative; isolation: isolate; display: grid; overflow: hidden; border-radius: var(--by-r-2xl); min-height: 300px;
  background: radial-gradient(70% 120% at 82% 30%, color-mix(in srgb, var(--c2) 46%, transparent), transparent 62%), radial-gradient(60% 100% at 100% 100%, color-mix(in srgb, var(--c3) 40%, transparent), transparent 60%), linear-gradient(120deg, #11142b 20%, color-mix(in srgb, var(--c-ink) 70%, #11142b));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c1) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 60px -28px var(--c2); }
.colhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--by-stars); opacity: .5; mix-blend-mode: screen; }
/* the sheen moves with a transform (composited) instead of background-position, which repainted the whole banner every frame */
.colhero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 250%; pointer-events: none; background: var(--by-sheen); animation: ch-sheen 7s ease-in-out infinite; opacity: .7; transform: translateX(-78%); }
@keyframes ch-sheen { 0%, 30% { transform: translateX(-78%); } 80%, 100% { transform: translateX(54%); } }
.colhero-art { position: relative; height: 230px; }
.colhero-art span { position: absolute; bottom: -8%; width: 58%; aspect-ratio: 1; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); }
.colhero-art img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; } .colhero-art img.in { opacity: 1; }
.colhero-art .ch-0 { left: 21%; z-index: 2; width: 62%; } .colhero-art .ch-1 { left: -6%; transform: scale(.82); transform-origin: bottom; } .colhero-art .ch-2 { right: -6%; transform: scale(.82); transform-origin: bottom; }
.colhero-body { position: relative; z-index: 3; display: grid; gap: 10px; align-content: end; padding: 0 20px 22px; background: linear-gradient(0deg, rgba(11, 13, 26, .86) 55%, transparent); }
.colhero .kicker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--by-text-muted); }
.colhero-title { font: 400 clamp(2.1rem, 1.4rem + 3.4vw, 4rem)/1 var(--by-font-display); background: linear-gradient(100deg, var(--c1), var(--c2) 55%, var(--c3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--c2) 50%, transparent)); padding-bottom: .08em; }
.colhero-tag { font: 700 clamp(1rem, .9rem + .5vw, 1.25rem)/1.3 var(--by-font-ui); }
.colhero-blurb { max-width: 54ch; color: var(--by-text-muted); font-size: 15px; }
.colhero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 4px; }
.colhero-count { font-weight: 700; font-size: 13px; color: var(--by-text-muted); font-variant-numeric: tabular-nums; }
.colhero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--by-text-muted); }
@media (min-width: 860px) {
  .colhero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 400px; }
  .colhero-art { order: 2; height: auto; } .colhero-art span { width: 52%; bottom: -4%; } .colhero-art .ch-0 { left: 24%; width: 56%; }
  .colhero-body { padding: 40px 0 40px 44px; align-content: center; background: none; }
}

/* ---------- cards ---------- */
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 620px) { .sgrid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; } }
.sc { position: relative; display: flex; flex-direction: column; padding: 7px; border-radius: var(--by-r-xl); background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 12%, #151935), #11142b 70%);
  box-shadow: var(--by-glass-inner), inset 0 0 0 1px color-mix(in srgb, var(--rar) 34%, transparent), var(--by-shadow-1); transition: transform var(--by-dur-base) var(--by-ease-gummy), box-shadow var(--by-dur-base); }
@media (hover: hover) { .sc:hover { transform: translateY(-5px); box-shadow: var(--by-glass-inner), inset 0 0 0 1.5px color-mix(in srgb, var(--rar) 70%, transparent), 0 18px 34px -16px var(--rar); } }
.sc.equipped { box-shadow: var(--by-glass-inner), inset 0 0 0 1.5px var(--by-mint), 0 0 22px -8px var(--by-mint); }
.sc-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; color: inherit;
  background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--c2, var(--rar)) 52%, #20264a), #151935 72%, #0e1024); }
.sc-art::after { content: ""; position: absolute; inset: 0; background: var(--by-sheen); background-size: 250% 100%; background-position: 130% 0; transition: background-position .9s var(--by-ease-out); pointer-events: none; }
.sc:hover .sc-art::after, .sc-art:focus-visible::after { background-position: -90% 0; }
.sc-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s, transform .4s var(--by-ease-out); } .sc-art > img.in { opacity: 1; }
.sc:hover .sc-art > img { transform: scale(1.08) translateY(-2%); }
.sc-art.k-weapons > img { transform: scale(1.25); } .sc:hover .sc-art.k-weapons > img { transform: scale(1.35); }
.sc-peek { position: absolute; left: 50%; bottom: 10px; display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--by-r-pill); background: rgba(11, 13, 26, .78); font: 700 12px/1 var(--by-font-ui); opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s; white-space: nowrap; } .sc-peek .ic { width: 15px; height: 15px; }
@media (hover: hover) { .sc-peek { display: inline-flex; } .sc:hover .sc-peek, .sc-art:focus-visible .sc-peek { opacity: 1; transform: translate(-50%, 0); } }
.sc-flag { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--by-r-pill); font: 700 11px/1 var(--by-font-ui); letter-spacing: .04em; color: var(--by-gold-ink); background: var(--by-gummy-gold); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6); }
.sc-flag.on { color: var(--by-mint-ink); background: var(--by-gummy-mint); } .sc-flag .ic { width: 13px; height: 13px; }
.sc-body { display: grid; gap: 4px; padding: 11px 6px 6px; min-width: 0; }
.sc-name { font-size: 16px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-kind { font-size: 12px; font-weight: 500; color: var(--by-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-foot { display: flex; align-items: center; min-height: 26px; margin-top: 4px; font-size: 15px; }

/* card art for things that are not 3D */
.art-name { font: 700 clamp(15px, 4.6vw, 22px)/1 var(--by-font-display); padding: 0 8px; text-align: center; overflow-wrap: anywhere; }
.art-badge { font-size: clamp(40px, 12vw, 64px); } .art-badge .fl-badge { margin: 0; }
.art-bubble .chat-bubble, .flair-chat .chat-bubble { display: inline-block; max-width: 100%; padding: 9px 13px; border-radius: 16px 16px 16px 6px; font: 500 14px/1.3 var(--by-font-ui); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.art-frame .fl-frame { display: grid; place-items: center; width: clamp(64px, 46%, 96px); aspect-ratio: 1; margin: auto; background: #151935; overflow: hidden; } .art-frame .blip { width: 62% !important; height: auto; }
.art-frame { display: grid; width: 100%; }
.art-banner { display: grid; align-content: center; gap: 3px; width: 88%; min-height: 46%; padding: 10px 14px; border-radius: 14px; text-align: left; } .art-banner b { font: 400 17px/1.1 var(--by-font-display); } .art-banner small { font-size: 11px; font-weight: 600; opacity: .8; }
.art-blip { width: 58%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); animation: by-bob 3.6s ease-in-out infinite; } .art-blip svg { display: block; width: 100%; height: auto; }
.art-fx { position: relative; width: 78%; aspect-ratio: 1; }
.art-fx i { position: absolute; border-radius: 50%; }
.art-auras i:nth-child(1) { inset: 22%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 80%, transparent), transparent 68%); animation: fx-pulse 2.4s ease-in-out infinite; }
.art-auras i:nth-child(2) { inset: 8%; border: 2px solid color-mix(in srgb, var(--c1) 70%, transparent); border-left-color: transparent; border-bottom-color: transparent; animation: fx-spin 5s linear infinite; }
.art-auras i:nth-child(3) { inset: 0; border: 2px dotted color-mix(in srgb, var(--c3) 80%, transparent); animation: fx-spin 9s linear infinite reverse; }
.art-auras i:nth-child(4) { left: 14%; top: 22%; width: 9%; height: 9%; background: var(--c1); box-shadow: 0 0 12px 3px var(--c1); animation: fx-pulse 1.7s ease-in-out infinite; }
.art-auras i:nth-child(5) { right: 16%; bottom: 20%; width: 7%; height: 7%; background: var(--c3); box-shadow: 0 0 12px 3px var(--c3); animation: fx-pulse 2.1s ease-in-out .5s infinite; }
.art-trails i { height: 9%; left: 8%; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--c2) 55%, var(--c1)); transform-origin: right; animation: fx-streak 1.6s ease-in-out infinite; }
.art-trails i:nth-child(1) { top: 26%; width: 62%; } .art-trails i:nth-child(2) { top: 44%; width: 84%; height: 12%; animation-delay: .15s; background: linear-gradient(90deg, transparent, var(--c3) 50%, #fff); }
.art-trails i:nth-child(3) { top: 64%; width: 54%; animation-delay: .3s; } .art-trails i:nth-child(4) { top: 14%; left: 44%; width: 7%; height: 7%; background: var(--c1); box-shadow: 0 0 10px 2px var(--c1); animation: fx-pulse 1.3s infinite; } .art-trails i:nth-child(5) { top: 80%; left: 30%; width: 6%; height: 6%; background: var(--c3); box-shadow: 0 0 10px 2px var(--c3); animation: fx-pulse 1.5s .4s infinite; }
.art-emotes { --c1: var(--rar); --c2: var(--rar); --c3: #fff; }
.art-emotes[class*="fl-c-"] { --c1: initial; } .art-emotes.fl-c-deep { --c1: #7df9ff; --c2: #8d6cf0; --c3: #ff8fd1; } .art-emotes.fl-c-kiln { --c1: #ffd36b; --c2: #ff6a2b; --c3: #c81e05; } .art-emotes.fl-c-token { --c1: #fff3c4; --c2: #ffc94d; --c3: #f08a10; }
.art-emotes i:nth-child(1) { inset: 30%; background: radial-gradient(circle, #fff, var(--c1) 40%, transparent 70%); animation: fx-pulse 1.4s ease-in-out infinite; }
.art-emotes i:nth-child(n+2) { left: 46%; top: 6%; width: 8%; height: 44%; border-radius: 99px; background: linear-gradient(0deg, transparent, var(--c2)); transform-origin: 50% 100%; animation: fx-pulse 1.4s ease-in-out infinite; }
.art-emotes i:nth-child(2) { transform: rotate(0deg); } .art-emotes i:nth-child(3) { transform: rotate(72deg); background: linear-gradient(0deg, transparent, var(--c3)); } .art-emotes i:nth-child(4) { transform: rotate(144deg); } .art-emotes i:nth-child(5) { transform: rotate(216deg); background: linear-gradient(0deg, transparent, var(--c1)); }
.art-emotes::after { content: ""; position: absolute; left: 46%; top: 6%; width: 8%; height: 44%; border-radius: 99px; background: linear-gradient(0deg, transparent, var(--c3)); transform-origin: 50% 100%; transform: rotate(288deg); }
@keyframes fx-pulse { 50% { opacity: .45; scale: .86; } } @keyframes fx-spin { to { rotate: 360deg; } } @keyframes fx-streak { 0%, 100% { scale: 1 1; opacity: 1; } 50% { scale: .6 1; opacity: .6; } }

/* ---------- picks, collections, bundle ---------- */
@media (min-width: 900px) { .picks-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.picks .head-note { max-width: 60ch; font-size: 13px; }
.colgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .colgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } }
.colcard { position: relative; display: grid; overflow: hidden; padding: 0; border: 0; border-radius: var(--by-r-xl); text-align: left; color: inherit; cursor: pointer; min-height: 168px;
  background: radial-gradient(90% 120% at 90% 0%, color-mix(in srgb, var(--c2) 50%, transparent), transparent 62%), radial-gradient(70% 100% at 0% 100%, color-mix(in srgb, var(--c3) 30%, transparent), transparent 60%), #151935;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c1) 34%, transparent), var(--by-shadow-1); transition: transform var(--by-dur-base) var(--by-ease-gummy), box-shadow var(--by-dur-base); }
@media (hover: hover) { .colcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--c1), 0 18px 34px -16px var(--c2); } }
.colcard-art { position: absolute; inset: 0; } .colcard-art img { position: absolute; bottom: -12%; width: 62%; aspect-ratio: 1; object-fit: contain; opacity: 0; transition: opacity .4s, transform .4s var(--by-ease-out); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); } .colcard-art img.in { opacity: 1; }
.colcard-art img:first-child { right: -4%; z-index: 1; } .colcard-art img:last-child { right: 30%; scale: .8; transform-origin: bottom; opacity: 0; } .colcard-art img:last-child.in { opacity: .9; }
.colcard:hover .colcard-art img:first-child { transform: scale(1.06); }
.colcard-body { position: relative; z-index: 2; display: grid; gap: 4px; align-content: end; padding: 14px 16px; max-width: 64%; background: linear-gradient(90deg, rgba(11, 13, 26, .72) 60%, transparent); }
.colcard-body b { font: 400 clamp(1.15rem, 1rem + 1vw, 1.6rem)/1.05 var(--by-font-display); background: linear-gradient(100deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* phones: two cards per row left ~70px for the text beside the art; stack art above the text instead */
@media (max-width: 559px) {
  .colcard { min-height: 214px; }
  .colcard-art img { bottom: auto; top: -4%; width: 58%; }
  .colcard-body { max-width: none; padding: 12px; background: linear-gradient(0deg, rgba(11, 13, 26, .9) 55%, rgba(11, 13, 26, .6) 80%, transparent); }
  .colcard-body .rar-tag { flex-wrap: wrap; }
}
.colcard-body small { font-size: 12.5px; color: var(--by-text-muted); } .colcard-body i { font: 700 12px/1 var(--by-font-ui); font-style: normal; color: var(--by-text-muted); margin-top: 4px; }
.bundle { display: grid; gap: 16px; align-items: center; padding: 20px; border-radius: var(--by-r-xl); background: linear-gradient(120deg, color-mix(in srgb, var(--c2) 18%, #151935), #11142b); box-shadow: var(--by-glass-inner), inset 0 0 0 1px color-mix(in srgb, var(--c1) 36%, transparent); }
.bundle h3 { font-size: var(--by-fs-h3); margin: 4px 0; } .bundle p.muted { font-size: 14px; max-width: 62ch; }
.bundle-buy { display: grid; gap: 10px; justify-items: stretch; } .bundle-price { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 700; } .bundle-price i { font-style: normal; color: var(--by-text-muted); font-size: 18px; }
@media (min-width: 760px) { .bundle { grid-template-columns: minmax(0, 1fr) auto; padding: 24px 28px; } .bundle-buy { justify-items: end; } }
.bundle-done { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--by-text-muted); }
.crumbs { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--by-text-muted); margin-bottom: -20px; } .crumbs .linkbtn { display: inline-flex; align-items: center; gap: 4px; min-height: var(--by-tap); color: var(--by-text); font-weight: 700; cursor: pointer; } .crumbs .ic { width: 18px; height: 18px; } .crumbs span::before { content: "/"; margin-right: 10px; opacity: .5; }
.chips.sub { margin-top: 8px; } .chips.sub .chipbtn { min-height: 36px; font-size: 13px; padding: 0 12px; } .chip-gap { flex: 0 0 12px; }
.chips { margin-bottom: 4px; } #browse .sgrid { margin-top: 16px; } .kind-note { margin-top: 12px; font-size: 14px; }
.sortbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--by-text-muted); }
.sortbox select { height: 40px; padding: 0 12px; border-radius: var(--by-r-pill); border: 0; color: var(--by-text); background: var(--by-navy600); font: 600 14px/1 var(--by-font-ui); box-shadow: var(--by-glass-inner); }
.shop-fine { margin-top: 20px; } .fine { font-size: 13px; }
.btn.locked { opacity: .7; } .btn.confirm { background: var(--by-gummy-gold); color: var(--by-gold-ink); animation: by-jelly var(--by-dur-gummy) var(--by-ease-out); }

/* ---------- viewer ---------- */
.viewer-slot { position: absolute; inset: 0; } .viewer-slot.offstage { position: fixed; left: -9999px; top: 0; width: 320px; height: 320px; inset: auto; visibility: hidden; }
#viewer { display: block; width: 100%; height: 100%; cursor: grab; opacity: 0; transition: opacity .4s; outline: 0; } #viewer.ready { opacity: 1; } #viewer.grabbing { cursor: grabbing; }
.viewer-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--by-text-muted); font-size: 14px; font-weight: 500; text-align: center; padding: 20px; pointer-events: none; } .viewer-wait .by-loader { width: 64px; height: 72px; }
.vtools, .heropick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .vgap { flex: 0 0 6px; }
.vbtn { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--by-r-pill); font: 700 12.5px/1 var(--by-font-ui); color: var(--by-text); background: rgba(11, 13, 26, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vbtn[aria-pressed="true"] { color: var(--by-mint-ink); background: var(--by-gummy-mint); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55); }
.vbtn:active { transform: scale(.94); }

/* ---------- inspect ---------- */
dialog.inspect .sheet-scroll { max-height: 94dvh; }
.insp { display: grid; }
.insp-stage { position: relative; height: min(46dvh, 420px); overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--c2, var(--rar)) 36%, transparent), transparent 70%), #0b0d1a; border-bottom: 1px solid var(--by-glass-border); }
.insp-tools { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: grid; gap: 6px; padding: 0 10px; pointer-events: none; } .insp-tools > * { pointer-events: auto; }
.insp-body { display: grid; gap: 12px; padding: 20px 20px 8px; align-content: start; touch-action: pan-y; }
.insp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 44px; } .insp-top .linkbtn { font-weight: 700; font-size: 13px; color: var(--c1, var(--by-text)); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.insp-body h2 { font: 400 clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem)/1.05 var(--by-font-display); background: linear-gradient(100deg, var(--by-text), var(--c1, var(--rar)) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feats { display: grid; gap: 8px; padding: 0; list-style: none; font-size: 14.5px; font-weight: 500; } .feats li { display: flex; gap: 8px; align-items: flex-start; } .feats .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--c1, var(--rar)); }
.tryrow { display: flex; align-items: center; gap: 10px; min-height: var(--by-tap); font-weight: 600; font-size: 14px; cursor: pointer; } .tryrow input { width: 20px; height: 20px; accent-color: var(--by-mint); }
.insp .facts { margin: 0; } .insp .facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.insp-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--by-r-md); font-size: 13.5px; line-height: 1.45; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .insp-note .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--by-gold); }
.insp-note.pick { background: color-mix(in srgb, var(--by-gold) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--by-gold) 34%, transparent); }
.insp-cta .btn.big { flex: 1 1 auto; }
.insp-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 16px; font: 700 13px/1 var(--by-font-ui); color: var(--by-text-muted); font-variant-numeric: tabular-nums; } .insp-nav .ic { width: 16px; height: 16px; } .insp-nav .next .ic { transform: scaleX(-1); }
.flairstage { display: grid; place-items: center; height: 100%; padding: 24px 18px; background: var(--by-stars); }
.flaircard { display: grid; gap: 14px; width: min(100%, 420px); padding: 16px; border-radius: var(--by-r-lg); background: #151935; box-shadow: var(--by-glass-inner), var(--by-shadow-2); }
.flair-top { display: flex; align-items: center; gap: 14px; min-width: 0; } .flair-top small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--by-text-muted); }
.flair-name { font: 400 22px/1.1 var(--by-font-display); overflow-wrap: anywhere; } .flaircard.big .flair-name { font-size: 26px; }
.flaircard .av { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .blipav { display: grid; place-items: center; background: #0b0d1a; overflow: hidden; } .blipav svg { width: 66%; height: auto; } .blipav.big { width: 76px; height: 76px; }
.flair-chat { display: grid; gap: 6px; justify-items: start; } .flair-chat .chat-bubble b { margin-right: 6px; font-size: 13px; } .flair-chat .chat-bubble.other { justify-self: end; border-radius: 16px 16px 6px 16px; opacity: .8; }
@media (min-width: 900px) {
  dialog.sheet.inspect { width: min(1080px, calc(100vw - 48px)); }
  dialog.inspect .sheet-scroll { max-height: calc(100dvh - 64px); }
  .insp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: min(640px, calc(100dvh - 80px)); }
  .insp-stage { height: auto; border-bottom: 0; border-right: 1px solid var(--by-glass-border); }
  .insp-body { padding: 36px 32px 12px; }
}

/* ---------- loadout ---------- */
.loadout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lo-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; } .lo-tools { min-width: 0; } .lo-stage .viewer-slot { position: relative; inset: auto; height: min(46dvh, 400px); border-radius: var(--by-r-xl); overflow: hidden; background: #0b0d1a; box-shadow: inset 0 0 0 1px var(--by-glass-border); }
.lo-side h1 { font-size: var(--by-fs-h1); margin-top: 4px; } .lo-group { margin: 16px 0 8px; font: 700 12px/1.2 var(--by-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--by-text-muted); }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.slot { display: grid; gap: 3px; padding: 11px 14px; min-height: 68px; text-align: left; border: 0; border-radius: var(--by-r-md); color: inherit; cursor: pointer; background: linear-gradient(120deg, color-mix(in srgb, var(--rar) 12%, #151935), #151935); box-shadow: var(--by-glass-inner), inset 3px 0 0 var(--rar); transition: transform var(--by-dur-fast); }
.slot.on { box-shadow: var(--by-glass-inner), inset 3px 0 0 var(--rar), inset 0 0 0 1.5px var(--by-mint); } .slot:active { transform: scale(.97); }
.slot-kind { font: 700 11px/1 var(--by-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--by-text-muted); } .slot b { font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot small { font-size: 11.5px; color: var(--by-text-muted); font-weight: 500; }
.lo-pick h2 { font-size: var(--by-fs-h2); margin-top: 4px; } .lo-pick .kicker { color: var(--by-text-muted); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.opt { display: grid; gap: 4px; padding: 6px 6px 10px; border: 0; border-radius: var(--by-r-md); color: inherit; text-align: center; cursor: pointer; background: #151935; box-shadow: var(--by-glass-inner), inset 0 0 0 1px color-mix(in srgb, var(--rar) 34%, transparent); }
.opt.on { box-shadow: var(--by-glass-inner), inset 0 0 0 2px var(--by-mint), 0 0 18px -6px var(--by-mint); } .opt.locked .opt-art { filter: saturate(.5) brightness(.75); }
.opt-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--c2, var(--rar)) 46%, #20264a), #11142b 75%); }
.opt-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; } .opt-art > img.in { opacity: 1; } .opt-art.k-weapons > img { transform: scale(1.25); }
.opt-art .art-name { font-size: 13px; } .opt-art .art-badge { font-size: 34px; } .opt-art .art-banner b { font-size: 11px; } .opt-art .art-banner small { display: none; } .opt-art .chat-bubble { font-size: 10px; padding: 5px 7px; }
.opt-none { display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%; color: var(--by-text-muted); box-shadow: inset 0 0 0 2px currentColor; opacity: .6; } .opt-none .ic { width: 50%; height: 50%; }
.opt b { font-size: 12.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; } .opt small { font-size: 11px; color: var(--by-text-muted); font-weight: 600; } .opt.on small { color: var(--by-mint); }
@media (min-width: 900px) {
  .loadout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .lo-stage { position: sticky; top: calc(var(--by-header-h) + 16px); } .lo-stage .viewer-slot { height: min(56dvh, 520px); }
  .lo-pick { grid-column: 1 / -1; } .opts { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}

/* ---------- exchange ---------- */
.ex-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 16px; border-radius: var(--by-r-lg); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ex-side { display: grid; gap: 6px; justify-items: center; text-align: center; } .ex-side > span { font: 700 11px/1 var(--by-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--by-text-muted); } .ex-side b { font-size: clamp(20px, 6vw, 28px); } .ex-side small { font-size: 12px; color: var(--by-text-muted); font-variant-numeric: tabular-nums; }
.ex-arrow { color: var(--by-text-muted); } .ex-arrow .ic { width: 26px; height: 26px; transform: scaleX(-1); }
.ex-step { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .ex-step output { min-width: 84px; text-align: center; font: 700 18px/1 var(--by-font-ui); font-variant-numeric: tabular-nums; } .ex-step .iconbtn { font: 700 22px/1 var(--by-font-ui); }
.ex-none { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--by-text-muted); }
.ex .sheet-cta .btn.big { flex: 1 1 auto; }

/* ---------- the purchase moment ---------- */
.moment { position: fixed; inset: 0; z-index: var(--by-z-tooltip); display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c2, var(--rar)) 34%, transparent), rgba(7, 8, 15, .78) 62%); animation: by-fade .25s both; cursor: pointer; }
.moment.out { opacity: 0; transition: opacity .4s; }
.moment-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 36px 26px; text-align: center; border-radius: var(--by-r-2xl); background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 22%, #1a1f44), #11142b); box-shadow: inset 0 0 0 2px var(--rar), inset 0 2px 0 rgba(255, 255, 255, .3), 0 30px 80px -20px var(--rar); animation: moment-pop .7s var(--by-ease-gummy) both; max-width: min(88vw, 420px); }
.moment-card b { font: 400 clamp(1.6rem, 1.2rem + 2vw, 2.3rem)/1.05 var(--by-font-display); } .moment-card small { color: var(--by-text-muted); font-weight: 600; }
.moment-blip { margin-top: -64px; animation: moment-hop .9s var(--by-ease-gummy) .15s both; }
.moment-ring { position: absolute; inset: -30px; z-index: -1; border-radius: 50%; background: var(--by-prism-conic); filter: blur(34px); opacity: .55; animation: fx-spin 6s linear infinite; }
@keyframes moment-pop { from { opacity: 0; transform: scale(.6, .5); } 60% { transform: scale(1.06, 1.1); } } @keyframes moment-hop { from { transform: translateY(40px) scale(.6); opacity: 0; } 55% { transform: translateY(-16px) scale(1.1, .94); } }

@media (prefers-reduced-motion: reduce) { .colhero::after, .art-fx i, .art-blip, .moment-ring, .moment-card, .moment-blip { animation: none !important; } }

/* phones: preview controls are single swipeable rows so they never cover the model */
@media (max-width: 899px) {
  .insp-tools { gap: 5px; padding: 0; }
  .insp-tools .vtools, .insp-tools .heropick, .lo-tools .vtools { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 10px; -webkit-overflow-scrolling: touch; }
  .insp-tools .vtools::-webkit-scrollbar, .insp-tools .heropick::-webkit-scrollbar, .lo-tools .vtools::-webkit-scrollbar { display: none; }
  .vbtn { flex: none; min-height: 34px; padding: 0 11px; }
  .insp-cta { gap: 8px; } .insp-cta .btn.big { min-height: 48px; padding: 0 14px; font-size: 15px; }
  .insp-body { padding-bottom: 4px; }
}