/* STORE (shop3). Left category rail, FEATURED hero, value tiles, daily/weekly tall cards, right preview pane.
   Reuses premium.css tokens (--champ, --line, --f-mono, --f-disp, --f-hud, --spring). Sizes use clamp() so 1280x720 .. 1920x1080 and 21:9 all hold. */
#shop.screen { padding: 0; }
.sh3 { --rail: clamp(84px, 6.4vw, 118px); --pane: clamp(300px, 23vw, 470px); --gut: clamp(18px, 2.2vw, 44px); --ink: #05070e;
  position: absolute; inset: 0; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--pane); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top top" "rail main pane" "foot foot foot";
  gap: 0 clamp(14px, 1.6vw, 28px); padding: clamp(12px, 2vh, 26px) var(--gut) clamp(8px, 1.4vh, 16px);
  background: radial-gradient(70% 60% at 85% 0%, rgba(167, 139, 250, .16), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(255, 196, 107, .08), transparent 70%), linear-gradient(180deg, rgba(5, 7, 14, .9), rgba(5, 7, 14, .96)); color: #fff; font-family: var(--f-hud); }
.sh3 button { font: inherit; color: inherit; cursor: pointer; }
.sh3-top { grid-area: top; display: flex; align-items: center; gap: 18px; padding-bottom: clamp(8px, 1.4vh, 16px); border-bottom: 1px solid var(--line2); margin-bottom: clamp(10px, 1.6vh, 18px); }
.sh3-top h2 { font: 700 clamp(20px, 2.2vw, 30px) var(--f-disp); letter-spacing: .26em; margin: 0; }
.sh3-reset { font: 500 10px var(--f-mono); letter-spacing: .2em; color: var(--dim); white-space: nowrap; }
.sh3-wallet { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 24px); white-space: nowrap; }
.w-lvl { display: flex; flex-direction: column; font: 500 9px var(--f-mono); letter-spacing: .18em; color: var(--dim); line-height: 1.5; text-align: right; } .w-lvl b { color: #fff; font-weight: 600; } .w-lvl i { font-style: normal; }
.w-cur { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.w-cur svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.w-cur.cr { color: var(--champ); } .w-cur.lm { color: var(--ice); }
.w-cur em { font: 600 clamp(13px, 1.1vw, 17px) var(--f-mono); font-style: normal; color: #fff; font-variant-numeric: tabular-nums; display: inline-block; }
.w-cur small { font: 500 9px var(--f-mono); letter-spacing: .16em; opacity: .8; }
.w-cur em.pop { animation: shPop .7s var(--spring); }
@keyframes shPop { 0% { transform: scale(1.4); color: var(--champ); } 100% { transform: none; } }

/* buttons: one look for every action in the store */
.b3 { border: 1px solid var(--line); background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 11px 18px; font: 700 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: transform .25s var(--spring), background .2s, box-shadow .2s, border-color .2s; }
.b3:hover, .b3:focus-visible { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .5); transform: translateY(-1px); outline: none; }
.b3.primary { background: var(--champ); color: #090a10; border-color: transparent; box-shadow: 0 8px 26px -10px var(--champ2); }
.b3.primary:hover, .b3.primary:focus-visible { background: #fff; box-shadow: 0 10px 30px -8px var(--champ2); }
.b3.primary.confirm { background: #7be08a; box-shadow: 0 8px 26px -8px #7be08a; }
.b3.primary.equip { background: var(--ice); }
.b3.primary.poor { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.b3.primary.locked, .b3.primary.done { background: rgba(255, 255, 255, .08); color: #b9b9c4; box-shadow: none; border-color: var(--line); cursor: default; }
.b3.more { padding: 9px 14px; border-color: color-mix(in srgb, var(--ice) 60%, transparent); color: var(--ice); font-size: 10px; }

/* category rail */
.sh3-rail { grid-area: rail; display: flex; flex-direction: column; gap: clamp(4px, .8vh, 10px); overflow-y: auto; scrollbar-width: none; padding: 4px 2px; min-height: 0; }
.rt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: clamp(7px, 1.1vh, 12px) 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 12px; flex: 0 0 auto; transition: background .2s, border-color .2s, transform .3s var(--spring); }
.rt:hover { background: rgba(255, 255, 255, .1); transform: translateX(2px); }
.rt-i { display: grid; place-items: center; width: clamp(28px, 2.3vw, 38px); height: clamp(28px, 2.3vw, 38px); color: #cfcfd8; }
.rt-i .ii, .rt-i .rt-svg { width: 100%; height: 100%; } .rt-svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rt-i .ii .nuico { width: 100%; height: 100%; filter: none; }
.rt-n { font: 600 clamp(7px, .62vw, 9px) var(--f-mono); letter-spacing: .1em; color: var(--dim); text-align: center; line-height: 1.25; }
.rt.on { background: linear-gradient(160deg, rgba(255, 226, 168, .28), rgba(255, 226, 168, .08)); border-color: var(--champ); } .rt.on .rt-n, .rt.on .rt-i { color: #fff; }
.sh3-rail.focus .rt.on { box-shadow: 0 0 0 3px rgba(167, 139, 250, .6); }

/* main column */
.sh3-main { grid-area: main; overflow-y: auto; scrollbar-width: none; min-height: 0; padding: 4px 6px 60px 4px; scroll-padding: 8px 8px 70px; }
.sh3-main::-webkit-scrollbar { display: none; }
.sh3-main.focus .sel { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 3px; }
.sec-h { display: flex; align-items: baseline; gap: 14px; margin: clamp(14px, 2.4vh, 26px) 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line2); }
.sec-h:first-child, #shopHero + #shopRest > .sec-h:first-child { margin-top: 12px; }
.sec-h h4 { margin: 0; font: 700 clamp(13px, 1.1vw, 17px) var(--f-disp); letter-spacing: .24em; }
.sec-s { font: 400 11px var(--f-hud); color: var(--dim); }
.sec-t { margin-left: auto; font: 500 10px var(--f-mono); letter-spacing: .2em; color: var(--champ); font-style: normal; font-variant-numeric: tabular-nums; }

/* hero */
#shop .hero { position: relative; height: clamp(190px, 30vh, 300px); border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 120% at 82% 40%, color-mix(in srgb, var(--rc, #fff) 38%, transparent), transparent 70%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px), linear-gradient(120deg, #0d1020, #141026);
  border: 1px solid color-mix(in srgb, var(--rc, #fff) 50%, transparent); box-shadow: 0 24px 60px -30px var(--rc, #000); }
#shop .hero[hidden] { display: none; }
#shop .hero.swap { animation: heroIn .55s var(--spring); } @keyframes heroIn { from { opacity: .3; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.hero-art { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; display: grid; place-items: center; z-index: -1; overflow: hidden; }
.hero-art .a-op { position: absolute; right: 6%; bottom: -4%; height: 124%; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .6)); }
.hero-art .a-skin { width: 84%; max-height: 80%; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .6)); }
.hero-art .a-bun { display: contents; }
.hero-art .a-bun .a-pcs, .p3-art .a-bun .a-pcs { display: none; }
.hero-art .a-emb { transform: scale(1); } .hero-art .ii.a-ico { width: clamp(120px, 18vh, 200px); height: clamp(120px, 18vh, 200px); }
.hero-glow { position: absolute; inset: 0; background: linear-gradient(90deg, #0b0d18 0%, rgba(11, 13, 24, .75) 34%, transparent 62%); pointer-events: none; }
.hero-txt { position: absolute; left: clamp(18px, 2.4vw, 40px); top: 0; bottom: 0; width: min(52%, 520px); display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.2vh, 12px); }
.kick { display: flex; flex-wrap: wrap; row-gap: 4px; align-items: center; gap: 8px; font: 600 10px var(--f-mono); letter-spacing: .26em; color: var(--rc); }
.hero-txt h3 { margin: 0; font: 800 clamp(24px, 3.2vw, 48px) var(--f-disp); letter-spacing: .04em; line-height: 1.02; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.hero-txt p { margin: 0; font: 400 clamp(12px, 1vw, 15px)/1.45 var(--f-hud); color: #d6d6de; max-width: 42ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-inc { display: flex; align-items: center; gap: 6px; } .hero-inc > span { width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.hero-inc small { font: 500 9px var(--f-mono); letter-spacing: .18em; color: var(--dim); margin-left: 6px; }
.hero-pr { display: flex; align-items: baseline; gap: 10px; } .hero-pr b { font: 700 clamp(18px, 1.8vw, 28px) var(--f-mono); color: var(--champ); } .hero-pr s { color: var(--dim); font: 400 13px var(--f-mono); }
.hero-btns { display: flex; gap: 10px; margin-top: 2px; }
.hero-ar { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0, 0, 0, .45); font-size: 24px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .2s; padding: 0 0 3px; }
#shop .hero:hover .hero-ar, .hero-ar:focus-visible { opacity: 1; } .hero-ar.l { left: 8px; } .hero-ar.r { right: 8px; }
.dots { position: absolute; right: 18px; top: 14px; display: flex; gap: 6px; }
.dots button { width: 26px; height: 5px; border: 0; padding: 0; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: background .2s, width .3s var(--spring); } .dots button.on { background: var(--champ); width: 40px; }

/* tags */
.tag { font: 700 8px var(--f-mono); letter-spacing: .14em; font-style: normal; background: rgba(255, 255, 255, .92); color: #05060a; padding: 3px 6px; border-radius: 4px; white-space: nowrap; }
.tag.new { background: #ff5b8a; color: #fff; } .tag.first { background: #7be08a; }
.c3-off { font: 700 9px var(--f-mono); font-style: normal; background: #7be08a; color: #04110a; padding: 2px 5px; border-radius: 4px; letter-spacing: .06em; }

/* grids and cards */
.row-t { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 14vw, 250px), 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 11.4vw, 215px), 1fr)); gap: clamp(8px, .9vw, 14px); }
.grid-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 24vw, 460px), 1fr)); gap: 14px; }
.c3, .t3 { position: relative; display: flex; text-align: left; color: #fff; overflow: hidden; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--rc) 35%, rgba(255, 255, 255, .08));
  background: linear-gradient(170deg, color-mix(in srgb, var(--rc) 18%, #0b0d16), #0a0c14 70%); transition: transform .35s var(--spring), border-color .2s, box-shadow .3s; }
.c3 { flex-direction: column; aspect-ratio: 4 / 4.6; border-top: 3px solid var(--rc); }
.c3::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 38%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 75%), repeating-linear-gradient(120deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 18px); pointer-events: none; }
.c3:hover, .t3:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rc) 80%, #fff); box-shadow: 0 16px 36px -16px var(--rc); }
.c3.sel, .t3.sel { transform: translateY(-5px) scale(1.015); border-color: #fff; box-shadow: 0 18px 44px -14px var(--rc), 0 0 0 1px #fff; z-index: 2; }
.c3-art { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.c3-art .a-op { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; transition: transform .6s var(--ease, ease); }
.c3:hover .a-op, .c3.sel .a-op { transform: scale(1.06); }
.a-skin { display: block; width: 92%; } .a-skin img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
/* a glyph on bare card art reads as a missing image. Give every icon a defined plate so the frame is always deliberate. */
.c3 .ii.a-ico { width: 58%; height: auto; aspect-ratio: 1; padding: 12%; border-radius: 14px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 26%, rgba(255, 255, 255, .05)), rgba(0, 0, 0, .22) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent), 0 10px 26px -12px var(--rc); }
.c3 .ii.a-ico svg { width: 100%; height: 100%; }
.c3 .ii.a-ico.wide { width: 86%; aspect-ratio: auto; padding: 8% 6%; }
.ii .nuico { width: 100%; height: auto; }
.a-emb .emb { filter: drop-shadow(0 0 14px var(--tc)); }
.c3-tags { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; z-index: 2; max-width: 80%; }
.c3 .lk { position: absolute; right: 9px; top: 9px; width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.7; z-index: 2; }
.c3 .ck, .t3 .ck { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #7be08a; stroke: #04110a; stroke-width: 3; fill: none; z-index: 2; }
.c3-info { position: relative; z-index: 1; padding: 22px 12px 11px; background: linear-gradient(0deg, rgba(5, 6, 12, .96) 60%, transparent); display: flex; flex-direction: column; gap: 3px; }
/* two lines instead of one: STORM CALL… / NU LIGHT RO… were being cut at the first ellipsis, which made half the stock unreadable */
.c3-n { font: 700 clamp(11px, .95vw, 14px)/1.18 var(--f-disp); letter-spacing: .07em; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.t3 .c3-n { -webkit-line-clamp: 2; }
.c3-t { font: 500 8px var(--f-mono); letter-spacing: .16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c3-p { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; font: 500 12px var(--f-mono); min-height: 18px; }
.c3-p b { color: var(--champ); font-weight: 700; font-size: clamp(13px, 1.05vw, 16px); font-variant-numeric: tabular-nums; } .c3-p b small { font-size: 8px; margin-left: 3px; opacity: .8; letter-spacing: .12em; }
.c3-p s { color: #8a8a96; font-size: 10px; }
.c3-st { color: var(--dim); font-size: 9px; letter-spacing: .16em; } .c3-st.own { color: #7be08a; font-weight: 700; } .c3-soon { color: var(--vio); font-size: 9px; letter-spacing: .2em; }
.c3.locked .c3-art, .c3.out .c3-art, .c3.soon .c3-art { filter: grayscale(.85) brightness(.7); } .c3.owned .c3-art { opacity: .85; }
.c3.eq { border-color: #fff; }
.c3.wide { aspect-ratio: auto; height: clamp(150px, 22vh, 220px); flex-direction: row; border-top-width: 1px; border-left: 3px solid var(--rc); }
.c3.wide .c3-art { flex: 0 0 52%; } .c3.wide .c3-info { flex: 1; justify-content: flex-end; background: linear-gradient(90deg, transparent, rgba(5, 6, 12, .9) 22%); padding-left: 22px; }
.c3.wide .a-bun { display: block; position: absolute; inset: 0; } .c3.wide .a-bun > .a-op { object-position: 50% 0; }
.a-bun .a-pcs { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 5px; z-index: 3; align-items: center; } .a-pcs > span { width: 34px; height: 34px; border-radius: 8px; background: rgba(5, 6, 12, .75); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .a-pcs b { font: 600 10px var(--f-mono); color: #fff; }
.a-pcs .a-op { position: static; width: 100%; height: 100%; object-fit: cover; } .a-pcs .ii { width: 24px; height: 24px; } .a-pcs .emb { width: 24px !important; height: 24px !important; }
.hero-inc .ii, .p3-ic .ii { width: 100%; height: 100%; } .hero-inc .a-op, .p3-ic .a-op { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .hero-inc .emb, .p3-ic .emb { width: 26px !important; height: 26px !important; } .hero-inc .a-skin, .p3-ic .a-skin { width: 100%; }
/* value tiles */
.t3 { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; height: clamp(66px, 9vh, 84px); border-left: 3px solid var(--rc); }
.t3 .c3-art { flex: 0 0 clamp(44px, 3.6vw, 60px); height: 100%; border-radius: 9px; background: rgba(255, 255, 255, .05); } .t3 .c3-art .ii { width: 100%; height: 100%; } .t3 .c3-art .a-op { object-position: 50% 10%; } .t3 .a-skin { width: 100%; } .t3 .a-emb .emb { width: 36px !important; height: 36px !important; }
.t3 .c3-info { background: none; padding: 0; justify-content: center; min-width: 0; flex: 1; } .t3 .c3-n { font-size: 11px; } .t3 .c3-p { margin-top: 2px; }
.t3 .c3-tags { top: 5px; left: auto; right: 6px; } .t3 .lk { top: 6px; right: 6px; width: 13px; height: 13px; }
.t3.rec { grid-column: span 2; background: linear-gradient(110deg, color-mix(in srgb, var(--rc) 28%, #101326), #0a0c14); border-color: color-mix(in srgb, var(--rc) 60%, transparent); }
.c3-why { font: 700 8px var(--f-mono); letter-spacing: .14em; color: var(--champ); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t3.firstpick { box-shadow: 0 0 0 2px #7be08a, 0 0 24px -4px #7be08a; }
.c3.bought, .t3.bought { animation: shBought .8s var(--spring); } @keyframes shBought { 0% { transform: scale(1.12); filter: brightness(2); } 100% { transform: none; filter: none; } }

/* preview pane */
.sh3-pane { grid-area: pane; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: none; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--rc, #fff) 40%, rgba(255, 255, 255, .1)); background: linear-gradient(180deg, rgba(14, 16, 28, .92), rgba(8, 9, 16, .96)); position: relative; }
.p3-stage { position: relative; flex: 0 0 clamp(190px, 33vh, 330px); display: grid; place-items: center; overflow: hidden; border-top: 3px solid var(--rc); background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 75%), repeating-linear-gradient(120deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 20px); }
.p3-stage.swap { animation: pvIn .45s var(--spring); } @keyframes pvIn { from { opacity: .2; transform: scale(.97); } to { opacity: 1; transform: none; } }
.p3-art { position: absolute; inset: 0; display: grid; place-items: center; }
.p3-art .a-op { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.p3-art .a-skin { width: 86%; } .p3-art .ii.a-ico { width: auto; height: 62%; aspect-ratio: 1; } .p3-art .ii.a-ico.wide { width: 80%; height: auto; aspect-ratio: auto; }
.p3-art .a-bun { display: contents; } .p3-art .emb { filter: drop-shadow(0 0 22px var(--tc)); }
.p3-tags { position: absolute; left: 10px; top: 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.p3-body { padding: clamp(12px, 1.6vh, 20px) clamp(14px, 1.3vw, 22px) clamp(14px, 1.8vh, 22px); display: flex; flex-direction: column; gap: clamp(7px, 1.1vh, 12px); }
.p3-kind { font: 600 9px var(--f-mono); letter-spacing: .26em; }
.p3-body h3 { margin: 0; font: 800 clamp(18px, 1.6vw, 26px) var(--f-disp); letter-spacing: .05em; line-height: 1.1; overflow-wrap: anywhere; }
.p3-body p { margin: 0; font: 400 clamp(12px, .92vw, 14px)/1.5 var(--f-hud); color: #cfcfd8; }
.p3-kv { display: grid; gap: 1px; } .p3-kv > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line2); font: 500 10px var(--f-mono); letter-spacing: .14em; color: var(--dim); } .p3-kv b { color: #fff; }
.p3-inc { display: grid; gap: 5px; } .p3-inc-h { font: 600 9px var(--f-mono); letter-spacing: .22em; color: var(--champ); }
.p3-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; background: rgba(255, 255, 255, .045); border-radius: 9px; }
.p3-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, .06); }
.p3-nm { flex: 1; min-width: 0; font: 700 11px var(--f-disp); letter-spacing: .06em; display: flex; flex-direction: column; gap: 2px; text-transform: uppercase; } .p3-nm small { font: 500 8px var(--f-mono); letter-spacing: .14em; }
.p3-row b { font: 600 10px var(--f-mono); letter-spacing: .08em; color: #fff; white-space: nowrap; } .p3-row.own b { color: #7be08a; } .p3-row.own { opacity: .7; }
.p3-save { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px; border-radius: 9px; background: rgba(123, 224, 138, .1); border: 1px solid rgba(123, 224, 138, .35); font: 500 10px var(--f-mono); letter-spacing: .12em; color: #b9c9bd; } .p3-save b { color: #7be08a; }
.p3-pr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .p3-pr b { font: 700 clamp(22px, 2vw, 32px) var(--f-mono); color: var(--champ); } .p3-pr s { color: var(--dim); font: 400 14px var(--f-mono); }
.p3-bal { flex-basis: 100%; font: 500 9px var(--f-mono); letter-spacing: .16em; color: var(--dim); }
.p3-first { font: 600 9px/1.5 var(--f-mono); letter-spacing: .12em; color: #7be08a; padding: 7px 10px; border: 1px dashed rgba(123, 224, 138, .5); border-radius: 8px; }
.p3-act { width: 100%; padding: clamp(12px, 1.8vh, 17px) 10px; font-size: clamp(11px, .9vw, 13px); }
.p3-hint { font: 400 11px/1.5 var(--f-hud); color: var(--dim); }
.sh-burst { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, var(--rc), transparent 60%); }
.sh-burst.go { animation: shBurst .9s ease-out; } @keyframes shBurst { 0% { opacity: .85; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }

/* footer, modal, immersive preview */
.sh3-foot { grid-area: foot; display: flex; align-items: center; gap: 24px; padding-top: clamp(6px, 1vh, 12px); }
.sh3-foot .prompts { position: static; margin: 0; }
.sh3-foot .btn.focus, .sh3-foot .btn:focus-visible { box-shadow: 0 0 0 3px rgba(167, 139, 250, .6); }
.sh3-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(3, 4, 9, .72); backdrop-filter: blur(6px); } .sh3-modal[hidden] { display: none; }
.mdl { width: min(440px, 88vw); padding: 26px; border-radius: 18px; background: #0d1020; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.mdl h3 { margin: 0; font: 800 20px var(--f-disp); letter-spacing: .08em; } .mdl p { margin: 0; font: 400 13px/1.55 var(--f-hud); color: #cfcfd8; } .mdl-k { font: 700 9px var(--f-mono); letter-spacing: .26em; color: #ff9a3c; }
.sh3.imm { background: linear-gradient(90deg, rgba(5, 7, 14, .94) 0, rgba(5, 7, 14, .88) 34%, rgba(5, 7, 14, 0) 62%); }
.sh3.imm .sh3-main, .sh3.imm .sh3-rail { display: none; } .sh3.imm .sh3-pane { grid-column: 1 / 3; width: var(--pane); }

@media (max-width: 1100px) { .sh3 { --pane: 290px; } .hero-txt { width: 60%; } }
@media (max-height: 760px) { .hero { height: clamp(190px, 33vh, 300px); } .p3-stage { flex-basis: clamp(150px, 28vh, 260px); } }
@media (min-aspect-ratio: 21/10) { .sh3 { --gut: 6vw; } }
@media (prefers-reduced-motion: reduce) { .c3, .t3, .rt, .b3, .hero.swap, .p3-stage.swap, .sh-burst.go, .bought, .w-cur em.pop, .dots button, .c3-art .a-op { animation: none !important; transition: none !important; } .c3.sel, .t3.sel, .c3:hover { transform: none; } }

.a-skin.tint { position: relative; display: block; width: 88%; } .a-skin.tint img { width: 100%; display: block; filter: grayscale(1) brightness(var(--bl, 1.2)); }   /* --bl from the tint's luminance so ONYX previews dark and GILT previews bright */
.a-skin.tint u { position: absolute; inset: 0; background: var(--c); mix-blend-mode: color; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.c3-art .a-op { object-position: 50% 30%; }
.hero-art .a-op { height: 100%; bottom: 0; right: 2%; }

/* Rarity (owner ruling 2026-10-10): card backgrounds are neutral. Rarity is the thin edge bar plus the tag text. */
.c3, .t3, .t3.rec { background: linear-gradient(170deg, #11152400, #0a0c14 70%), #0e111c; border-color: rgba(255, 255, 255, .1); }
.c3::before { background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 18px); }
.c3:hover, .t3:hover { border-color: rgba(255, 255, 255, .5); box-shadow: 0 16px 36px -18px #000; }
.c3.sel, .t3.sel { box-shadow: 0 18px 44px -16px #000, 0 0 0 1px #fff; }
.p3-stage { background: radial-gradient(60% 70% at 50% 45%, rgba(255, 255, 255, .07), transparent 75%); }
.sh3-pane { border-color: rgba(255, 255, 255, .12); }

/* Celestial collection: neutral surfaces, restrained rarity accents, clear selection. */
.sh3 { background: radial-gradient(ellipse at 76% 0, rgba(66, 88, 123, .18), transparent 48%), linear-gradient(160deg, #0b111e, #060a12 70%); color: #f2f3f2; }
.sh3-top { border-color: rgba(211, 226, 245, .18); }
.sh3-top h2 { font-weight: 600; letter-spacing: .18em; }
.w-cur { border-radius: 4px; background: rgba(219, 229, 242, .04); border-color: rgba(219, 229, 242, .18); }
.sh3-rail { gap: 6px; }
.rt { border-radius: 4px; background: transparent; border-color: transparent; }
.rt:hover, .rt:focus-visible { background: rgba(220, 231, 245, .07); border-color: rgba(220, 231, 245, .26); transform: none; }
.rt.on { background: rgba(222, 233, 247, .09); border-color: rgba(222, 233, 247, .48); }
.rt-i { width: 28px; height: 28px; }
#shop .hero { border-radius: 6px; background: radial-gradient(ellipse at 80% 50%, rgba(130, 161, 199, .18), transparent 65%), #101725; border-color: rgba(220, 230, 244, .2); box-shadow: none; }
.hero-glow { background: linear-gradient(90deg, #101725 0%, rgba(16, 23, 37, .86) 35%, transparent 70%); }
.c3, .t3, .t3.rec { border-radius: 5px; background: #101724; border-color: rgba(220, 230, 244, .14); }
.c3::before { background: radial-gradient(ellipse at 50% 28%, rgba(177, 203, 235, .09), transparent 65%); }
.c3:hover, .t3:hover { transform: translateY(-2px); border-color: rgba(224, 235, 249, .5); box-shadow: 0 12px 25px rgba(0, 0, 0, .2); }
.c3.sel, .t3.sel { transform: none; border-color: #e7e1d2; box-shadow: inset 0 0 0 1px #e7e1d2; }
.c3:focus-visible, .t3:focus-visible, .b3:focus-visible, .rt:focus-visible { outline: 2px solid #e7e1d2; outline-offset: 3px; }
.c3 .ii.a-ico { background: none; box-shadow: none; padding: 5%; }
.c3-info { background: linear-gradient(0deg, #0b111c 60%, transparent); }
.sh3-pane { border-radius: 6px; border-color: rgba(220, 230, 244, .17); background: #0d1420; }
.p3-stage { background: radial-gradient(ellipse at 50% 45%, rgba(171, 199, 232, .11), transparent 70%); }
.b3 { border-radius: 4px; background: rgba(219, 229, 242, .06); }
.b3.primary { background: #e5ddc9; color: #0a111b; box-shadow: none; }
.mdl { border-radius: 6px; background: #101725; }
@media (max-width: 900px) {
  .sh3 { --rail: 70px; --pane: minmax(180px, 32vw); --gut: 12px; gap: 0 10px; }
  .sh3-reset { display: none; }
  .grid-b { grid-template-columns: minmax(0, 1fr); }
  .row-t { grid-template-columns: minmax(0, 1fr); }
  .t3.rec { grid-column: auto; }
}
@media (max-width: 600px) {
  .sh3 { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) minmax(120px, 32vh) auto; grid-template-areas: "top" "rail" "main" "pane" "foot"; }
  .sh3-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .rt { min-width: 70px; }
  .sh3-main { padding-bottom: 12px; }
  .sh3-pane { flex-direction: row; }
  .p3-stage { flex: 0 0 36%; }
  .p3-body { flex: 1; }
  .sh3-wallet { gap: 5px; }
  .w-cur { padding: 5px; }
  .w-cur small, .w-lvl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .c3:hover, .t3:hover { transform: none; } }

/* Cohesive portrait plate for weapons/skins: same navy + rarity glow as operator busts (NYX/AIKO). */
.a-wtile { position: relative; display: block; width: 92%; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--rc, #9ab) 26%, #1b2538), #0a0e19 74%);
  box-shadow: inset 0 0 0 1px rgba(231,223,202,.22), 0 10px 26px -12px var(--rc, transparent);
}
.a-wtile img { position: relative; z-index: 1; width: 100%; height: auto; display: block; padding: 6% 5%;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px color-mix(in srgb, var(--rc, #fff) 25%, transparent)); }
.a-wtile .wt-frame { position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--rc, #fff) 45%, transparent); border-radius: 8px; opacity: .55; pointer-events: none; }
.a-wtile.tint u { z-index: 1; }
.a-wtile.tint img { position: relative; z-index: 2; }

/* Shared store spacing: keep artwork clear of card edges and status labels. */
#shop .row-t, #shop .grid3, #shop .grid-b { gap: clamp(12px, 1vw, 18px); }
#shop .c3-art { padding: 10px; }
#shop .c3-art .a-op { inset: 8% 8% 5%; width: 84%; height: 87%; object-fit: contain; object-position: center; }
#shop .c3:hover .c3-art .a-op, #shop .c3.sel .c3-art .a-op { transform: scale(1.025); }
#shop .c3-art .a-wtile { width: auto; height: min(82%, 150px); max-width: 84%; aspect-ratio: 1; }
#shop .c3-art .a-wtile img { width: 100%; height: 100%; object-fit: contain; }
#shop .c3-art .a-emb { max-width: 80%; max-height: 80%; display: grid; place-items: center; }
#shop .c3-art .a-emb .emb { max-width: 100%; max-height: 100%; }
#shop .c3-info { padding: 18px 14px 13px; gap: 5px; min-width: 0; }
#shop .c3-tags { left: 10px; top: 10px; max-width: calc(100% - 40px); }
#shop .c3.wide .c3-info { padding: 12px 14px 12px 20px; }
#shop .t3 { gap: 12px; padding: 9px 12px; }
#shop .t3 .c3-art { padding: 4px; }
#shop .t3 .c3-art .a-op { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: cover; }
#shop .t3 .c3-art .a-wtile { width: 100%; height: auto; max-width: 100%; }
#shop .t3 .c3-info { padding: 0; gap: 3px; }
#shop .a-pcs > span, #shop .hero-inc > span, #shop .p3-ic { padding: 3px; }
#shop .a-pcs .a-op { position: static; width: 100%; height: 100%; }
#shop .a-pcs .a-wtile { width: 100%; height: auto; max-width: 100%; }
#shop .a-pcs .ii { width: 100%; height: 100%; padding: 0; }
#shop .hero-art .a-wtile { width: min(80%, 220px); max-height: 80%; aspect-ratio: 1; }
#shop .hero-art .a-wtile img { width: 100%; height: 100%; object-fit: contain; }
#shop .a-skin.tint u { inset: 6% 5%; }
#shop .p3-art .a-op { inset: 8%; width: 84%; height: 84%; }
#shop .p3-art .a-wtile { width: auto; height: 78%; max-width: 82%; aspect-ratio: 1; }
#shop .p3-art .a-wtile img { width: 100%; height: 100%; object-fit: contain; }
#shop .p3-body { gap: clamp(9px, 1.2vh, 14px); }
@media (max-width: 600px) {
  #shop .p3-art .a-wtile { height: auto; width: 78%; max-height: 84%; }
  #shop .p3-body { min-width: 0; }
}