ark-stronghold-protocol/public/css/screens/game-shop.css

/* ==========================================================================================
   screens/game-shop.css — bottom shop bar (js/ui/shopBar.js) + merge reward overlay (rewardOverlay.js).
   Research 06 §11.2: LEVEL card, operator cards (tier chip, price hexagon, half-body art, bond & class
   rows, icy frozen overlay), item card, funds card with ✕ 收起; 冻结 (ice) / 刷新 (amber) above.
   ========================================================================================== */

.shopbar {
  position: absolute; right: .26rem; bottom: .2rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  animation: shop-up var(--t-slow) var(--ease-out);
}
@keyframes shop-up { from { opacity: 0; transform: translateY(.3rem); } }
/* Official layout (research 06 §11.2 / D3): "剩余可放置角色: N" on its own line, right-aligned ABOVE [冻结] [刷新]. On one
   line the block reached over the bench's last pads (整备区 slot 9 at 16:9 under the official shop camera). Only the
   bar's parts take the pointer: its box spans the empty space left of the tools, which used to swallow drags and taps
   on bench slots 5–9. */
.gm__hud > .shopbar { pointer-events: none; }
.shopbar__row, .shopbar__tools > button { pointer-events: auto; }
.shopbar__tools { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: .06rem .12rem; }
.shopbar__remain {
  grid-column: 1 / -1; justify-self: end; pointer-events: none;
  font-size: .16rem; color: var(--text-md); padding: .04rem .14rem; background: rgba(8, 11, 10, .78);
  border-left: 3px solid var(--mint-500);
}
.shopbar__remain b { color: var(--mint-400); font-size: .2rem; margin-left: .04rem; }
.toolbtn {
  --tb: var(--ice);
  display: flex; align-items: center; gap: .08rem; height: .48rem; padding: 0 .14rem 0 .08rem;
  background: rgba(8, 11, 10, .9); border: 2px solid var(--tb); color: var(--tb); font-size: .19rem; font-weight: 700; letter-spacing: .1em;
  box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .45);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.toolbtn:hover:not(:disabled) { background: rgba(8, 11, 10, .9); background: color-mix(in srgb, var(--tb) 16%, rgba(8, 11, 10, .9)); box-shadow: 0 0 .18rem transparent; box-shadow: 0 0 .18rem color-mix(in srgb, var(--tb) 40%, transparent); }
.toolbtn:active:not(:disabled) { transform: translateY(1px); }
.toolbtn:disabled { --tb: var(--line-3); color: var(--text-dim); cursor: not-allowed; }
.toolbtn__img { width: .34rem; height: .34rem; object-fit: contain; }
.toolbtn .icon { width: .24rem; height: .24rem; }
.toolbtn--amber { --tb: var(--amber); }
.toolbtn--ice.is-on { background: var(--ice); color: #0b1822; }
.toolbtn--ice.is-on kbd { color: #28435a; border-color: #5d88aa; }
.toolbtn--ice.is-on:hover:not(:disabled) { background: #c2e5ff; color: #0b1822; box-shadow: 0 0 .22rem rgba(159, 212, 255, .6); }
.toolbtn--ice.is-on kbd { background: rgba(255, 255, 255, .35) !important; }
.toolbtn__free { font-size: .13rem; padding: .01rem .06rem; background: var(--mint-500); color: var(--text-on-mint); letter-spacing: 0; }
.toolbtn .hex { --hex-h: .26rem; }

.shopbar__row {
  position: relative; display: flex; align-items: stretch; gap: .08rem; padding: .1rem;
  background: linear-gradient(180deg, rgba(14, 19, 17, .94), rgba(8, 11, 10, .97));
  border: 1px solid var(--line-2); border-top: 2px solid var(--mint-700);
  box-shadow: 0 -.04rem .3rem rgba(0, 0, 0, .55);
}
.shopbar__row::before {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, var(--mint-400), transparent 30%, transparent 70%, var(--mint-400));
}
.shopbar__cards { display: flex; gap: .08rem; }
.shopbar__item { display: flex; gap: .08rem; padding-left: .08rem; border-left: 1px dashed var(--line-2); }
.shopbar.is-frozen .shopbar__row { border-color: rgba(159, 212, 255, .5); border-top-color: var(--ice); }
.shopbar.is-locked .scard:not(.scard--sold) { filter: saturate(.55) brightness(.8); }

/* ---- level card ---- */
.lvcard {
  position: relative; width: 1.24rem; height: 2.24rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem;
  padding: .2rem .1rem .1rem; background: linear-gradient(180deg, #5fe0b9, #36b690); border: 0; color: var(--text-on-mint);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .14rem), calc(100% - .14rem) 100%, 0 100%);
  transition: filter var(--t-fast), transform var(--t-fast);
}
.lvcard:hover:not(.is-disabled) { filter: brightness(1.08); }
.lvcard:active:not(.is-disabled) { transform: translateY(1px); }
.lvcard__price { position: absolute; top: .08rem; left: 50%; transform: translateX(-50%); }
.lvcard__frame { position: relative; display: flex; flex-direction: column; align-items: center; padding: .04rem .16rem .02rem; border: 2px solid rgba(6, 17, 13, .75); }
.lvcard__frame::before, .lvcard__frame::after { content: ''; position: absolute; width: .1rem; height: .1rem; border: 2px solid var(--text-on-mint); }
.lvcard__frame::before { left: -.06rem; top: -.06rem; border-right: 0; border-bottom: 0; }
.lvcard__frame::after { right: -.06rem; bottom: -.06rem; border-left: 0; border-top: 0; }
.lvcard__micro { font-family: var(--font-display); font-size: .12rem; letter-spacing: .24em; font-weight: 700; }
.lvcard__num { font-size: .66rem; line-height: .9; font-weight: 700; }
.lvcard__label { font-size: .2rem; font-weight: 900; letter-spacing: .3em; padding-left: .3em; }
.lvcard__key { position: absolute; right: .08rem; bottom: .06rem; color: var(--mint-900) !important; border-color: rgba(6, 17, 13, .35) !important; background: transparent !important; }
.lvcard.is-disabled { background: linear-gradient(180deg, #3a4a44, #2a3531); color: #8fa59c; cursor: not-allowed; }
.lvcard.is-disabled .lvcard__frame { border-color: rgba(143, 165, 156, .5); }
.lvcard.is-disabled .lvcard__frame::before, .lvcard.is-disabled .lvcard__frame::after { border-color: #8fa59c; }
.lvcard.is-max { background: linear-gradient(180deg, #d9b24a, #a07a1c); color: #1d1400; cursor: default; filter: none; }

/* ---- operator / item card ---- */
.scard-wrap { display: flex; }
.scard {
  --tc: var(--tier-1);
  position: relative; width: 1.56rem; height: 2.24rem; padding: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #151a18; border: 1px solid rgba(78, 216, 175, .35);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
}
.scard--t1 { --tc: var(--tier-1); } .scard--t2 { --tc: var(--tier-2); } .scard--t3 { --tc: var(--tier-3); }
.scard--t4 { --tc: var(--tier-4); } .scard--t5 { --tc: var(--tier-5); } .scard--t6 { --tc: var(--tier-6); }
.scard__bg { position: absolute; inset: 0;
  background: linear-gradient(180deg, #1c2320, #0f1311); /* fallback: no color-mix() (Safari < 16.2) */
  background:
  radial-gradient(120% 70% at 80% 30%, color-mix(in srgb, var(--tc) 28%, transparent), transparent 70%),
  linear-gradient(180deg, #1c2320, #0f1311); }
.scard__water { position: absolute; left: -.2rem; top: .34rem; width: 1.1rem; height: 1.1rem; opacity: .1; }
.scard__water .bglyph { width: 100%; height: 100%; }
.scard__art { position: absolute; right: -.14rem; top: 0; height: 100%; width: auto; max-width: none; object-fit: cover; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 88%); mask-image: linear-gradient(180deg, #000 55%, transparent 88%); }
.scard__top { position: absolute; left: .06rem; right: .06rem; top: .06rem; display: flex; align-items: flex-start; justify-content: space-between; z-index: 2; }
.scard__price { position: absolute; left: 50%; top: 0; transform: translateX(-50%); filter: drop-shadow(0 1px 3px #000); }
.scard__free { position: absolute; left: 50%; top: .02rem; transform: translateX(-50%); font-family: var(--font-num); font-weight: 700; font-size: .16rem; letter-spacing: .1em; color: var(--text-on-mint); background: var(--mint-400); padding: 0 .1rem; clip-path: polygon(.08rem 0, calc(100% - .08rem) 0, 100% 50%, calc(100% - .08rem) 100%, .08rem 100%, 0 50%); }
.scard__pips { display: flex; gap: .03rem; padding: .03rem .04rem; background: rgba(0, 0, 0, .6); }
.scard__pips i { width: .07rem; height: .07rem; border: 1px solid var(--gold); transform: rotate(45deg); }
.scard__pips i.on { background: var(--gold); }
.scard__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .03rem; padding: .3rem .08rem .08rem; background: linear-gradient(0deg, rgba(8, 11, 10, .98) 60%, transparent); }
/* the loadout's skill (DESIGN §16) above the name; mint frame = not the default skill */
.scard__skill { position: absolute; right: .07rem; top: -.02rem; width: .3rem; height: .3rem; display: grid; place-items: center;
  background: #0a0d0c; border: 1px solid var(--line-3); box-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.scard__skill img { width: 100%; height: 100%; object-fit: cover; }
.scard__skill .icon { width: .18rem; height: .18rem; color: var(--gold); }
/* a chosen skill without an icon in the asset manifest: its slot letter */
.scard__sglyph { font-family: var(--font-display); font-size: .13rem; font-weight: 700; letter-spacing: .02em; color: var(--mint-400); }
.scard__skill.is-custom { border-color: var(--mint-400); box-shadow: 0 0 0 1px var(--mint-500), 0 0 .08rem rgba(23, 249, 183, .5); }
.scard__skill.is-custom::after { content: ''; position: absolute; right: -.04rem; top: -.04rem; width: .08rem; height: .08rem; background: var(--mint-400); transform: rotate(45deg); }
.scard__mod { position: absolute; right: 100%; bottom: 0; margin-right: .03rem; display: flex; align-items: center; gap: .02rem; font-family: var(--font-display); font-size: .1rem; line-height: 1.4; padding: 0 .04rem; background: rgba(0, 0, 0, .75); color: var(--gold-2); white-space: nowrap; }
/* the official module type icon (local-client art, DESIGN §13); the type text stays beside it */
.scard__skill .scard__modicon { flex: none; width: .14rem; height: .14rem; object-fit: contain; }
.scard__name { font-size: .19rem; font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard__bonds { display: flex; flex-wrap: wrap; gap: .02rem .08rem; }
.scard__bond { display: inline-flex; align-items: center; gap: .03rem; font-size: .13rem; color: var(--mint-400); }
.scard__bond .bglyph { width: .18rem; height: .18rem; }
.scard__class { display: flex; align-items: center; gap: .05rem; font-size: .13rem; color: var(--text-lo); }
.scard__prof { width: .18rem; height: .18rem; object-fit: contain; opacity: .85; }
.scard__detail { position: absolute; right: .04rem; bottom: .04rem; z-index: 3; width: .24rem; height: .24rem; display: grid; place-items: center; color: var(--text-dim); opacity: 0; transition: opacity var(--t-fast), color var(--t-fast); cursor: help; }
.scard__detail .icon { width: .18rem; height: .18rem; }
.scard:hover .scard__detail { opacity: 1; }
.scard__detail:hover { color: var(--mint-400); }
.scard__mergetag { position: absolute; z-index: 3; right: 0; top: .38rem; font-size: .12rem; font-weight: 700; padding: .01rem .06rem; background: var(--gold); color: #1d1400; letter-spacing: .08em; }
.scard:not(.is-disabled):not(.scard--sold):hover { transform: translateY(-.08rem); border-color: var(--mint-400); box-shadow: 0 0 0 1px var(--mint-400), 0 .1rem .24rem rgba(23, 249, 183, .22); }
.scard:not(.is-disabled):not(.scard--sold):active { transform: translateY(-.04rem); }
.scard.is-disabled { cursor: not-allowed; }
.scard.is-disabled .scard__art, .scard.is-disabled .scard__itemart { filter: grayscale(.7) brightness(.6); }
.scard.is-merge { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 198, 0, .6), 0 0 .2rem rgba(255, 198, 0, .3); }
.scard.is-frozen::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(159, 212, 255, .28), rgba(159, 212, 255, .12) 50%, rgba(159, 212, 255, .34));
  box-shadow: inset 0 0 0 2px rgba(159, 212, 255, .8), inset 0 0 .3rem rgba(159, 212, 255, .5); }
.scard__ice { position: absolute; left: 50%; bottom: .06rem; transform: translateX(-50%); z-index: 4; width: .3rem; height: .3rem; display: grid; place-items: center; background: #0c1a26; border: 1px solid var(--ice); color: var(--ice); }
.scard__ice .icon { width: .2rem; height: .2rem; }
.scard--item { --tc: var(--gold-2); }
.scard__itemart { position: absolute; left: 50%; top: .38rem; transform: translateX(-50%); width: 1rem; height: 1rem; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(255, 198, 0, .16), transparent 70%); }
.scard__itemart img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .04rem .08rem #000); }
.scard__itemart .icon { width: .6rem; height: .6rem; color: var(--gold-2); }
.scard__idesc { font-size: .12rem; line-height: 1.45; color: var(--text-lo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scard--sold { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 .08rem, transparent .08rem .16rem), rgba(8, 11, 10, .75); border: 1px dashed var(--line-2); justify-content: center; align-items: center; }
.scard__soldtxt { display: flex; flex-direction: column; align-items: center; gap: .02rem; font-size: .16rem; color: var(--text-dim); }

/* ---- funds card ---- */
.funds { width: 1.18rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; padding: .06rem; border-left: 1px solid var(--line); }
.funds__hex {
  position: relative; width: 1rem; height: .9rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #2b2410, #16120a); color: var(--gold);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.funds__hex::before { content: ''; position: absolute; inset: 2px; clip-path: inherit; border: 0; background: transparent; box-shadow: inset 0 0 0 2px var(--gold); }
.funds__coin { width: .34rem; height: .34rem; fill: var(--gold); filter: drop-shadow(0 0 .06rem rgba(255, 198, 0, .6)); }
.funds__num { font-size: .36rem; line-height: 1; font-weight: 700; color: #fff; }
.funds__label { font-size: .14rem; color: var(--text-lo); letter-spacing: .1em; }
.funds__collapse { display: flex; align-items: center; gap: .04rem; font-size: .15rem; background: none; border: 1px solid var(--line-2); color: var(--text-lo); padding: .02rem .1rem; }
.funds__collapse .icon { width: .14rem; height: .14rem; }
.funds__collapse:hover { color: var(--text-hi); border-color: var(--line-3); }
.coin-glyph { fill: var(--gold); }

/* collapsed tab */
.shopbar-tab { position: absolute; right: .26rem; bottom: .2rem; display: flex; align-items: center; gap: .1rem; padding: .08rem; background: rgba(8, 11, 10, .92); border: 1px solid var(--line-2); border-top: 2px solid var(--mint-700); }
.shopbar-tab__funds { display: flex; align-items: center; gap: .06rem; padding: 0 .1rem; }
.shopbar-tab__funds .coin-glyph { width: .26rem; height: .26rem; }
.shopbar-tab__funds b { font-size: .28rem; }
.shopbar-tab__btn { display: flex; align-items: center; gap: .04rem; height: .44rem; padding: 0 .16rem; background: var(--mint-500); color: var(--text-on-mint); border: 0; font-size: .17rem; font-weight: 700; letter-spacing: .1em; }
.shopbar-tab__btn .icon { width: .18rem; height: .18rem; transform: rotate(90deg); }

/* (no drag-to-sell zone: selling is the underframe's 出售 +N button — research 09 §5) */

/* ---- merge reward (inline: replaces the operator cards) ---- */
.shopbar__reward { display: flex; gap: .08rem; padding: 0 .08rem 0 0; position: relative; animation: pop-in var(--t-slow) var(--ease-out); }
.shopbar__reward::before { content: ''; position: absolute; inset: -.06rem -.04rem; border: 1px solid rgba(255, 198, 0, .55);
  box-shadow: 0 0 .24rem rgba(255, 198, 0, .18), inset 0 0 .3rem rgba(255, 198, 0, .08); pointer-events: none; }
.rwtag {
  width: .92rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; padding: .08rem .04rem;
  background: linear-gradient(180deg, rgba(255, 198, 0, .22), rgba(255, 198, 0, .06)); color: var(--gold); text-align: center;
}
.rwtag__icon { width: .34rem; height: .34rem; filter: drop-shadow(0 0 .08rem rgba(255, 198, 0, .6)); }
.rwtag__title { writing-mode: vertical-rl; font-size: .22rem; font-weight: 900; letter-spacing: .2em; line-height: 1; }
.rwtag__micro { font-family: var(--font-display); font-size: .09rem; letter-spacing: .14em; opacity: .75; }
.rwtag__sub { font-size: .12rem; color: var(--text-md); line-height: 1.3; }
.rwtag__later { display: flex; align-items: center; gap: .02rem; margin-top: .04rem; padding: .02rem .08rem; font-size: .13rem; color: var(--text-lo);
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); }
.rwtag__later .icon { width: .12rem; height: .12rem; }
.rwtag__later:hover { color: var(--text-hi); border-color: var(--line-3); }
.shopbar__rwcards { display: flex; gap: .08rem; }
.shopbar__rwcards .scard { border-color: rgba(255, 198, 0, .5); }
.shopbar.has-reward .shopbar__row { border-top-color: var(--gold); }
.rewardpill {
  position: absolute; right: .26rem; bottom: 3.26rem; z-index: 6; display: flex; align-items: center; gap: .08rem; padding: .08rem .16rem;
  background: rgba(24, 18, 4, .95); border: 1px solid var(--gold); color: var(--gold); font-size: .17rem; font-weight: 700;
  animation: pulse-gold 1.6s ease-in-out infinite;
}
.rewardpill .icon { width: .2rem; height: .2rem; }
@keyframes pulse-gold { 50% { box-shadow: 0 0 .24rem rgba(255, 198, 0, .5); } }

/* ---- two-tap buy / upgrade (research 09 §5): the first tap lifts + enlarges the card and shows 确认购买 ---- */
.scard.is-armed {
  z-index: 3; transform: translateY(-.16rem) scale(1.08) !important; border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 .14rem .32rem rgba(0, 0, 0, .65), 0 0 .3rem rgba(255, 198, 0, .35) !important;
}
.scard.is-armed.is-disabled { border-color: var(--red-premium); box-shadow: 0 0 0 2px var(--red-premium), 0 .14rem .32rem rgba(0, 0, 0, .65) !important; }
.scard__confirm {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: .05rem 0 .04rem; background: linear-gradient(0deg, var(--gold), #e0a800); color: #1d1400; pointer-events: none;
  animation: confirm-in var(--t-fast) var(--ease-out);
}
@keyframes confirm-in { from { transform: translateY(100%); } }
.scard__confirm b { font-size: .18rem; font-weight: 900; letter-spacing: .22em; padding-left: .22em; }
.scard__confirm small { font-size: .11rem; letter-spacing: .1em; opacity: .75; }
.scard__confirm.is-no { background: linear-gradient(0deg, #54150f, #34100c); color: var(--red-premium); }
.scard__confirm.is-no small { opacity: 1; color: #ffb0a6; max-width: 100%; padding: 0 .06rem; text-align: center; white-space: normal; }
.shopbar.has-armed .scard:not(.is-armed):not(.scard--sold) { filter: brightness(.72); }
.lvcard.is-armed { background: linear-gradient(180deg, #ffd65a, #e0a800); color: #1d1400; box-shadow: 0 0 0 2px #fff4c2, 0 0 .3rem rgba(255, 198, 0, .5); animation: pulse-gold 1.1s var(--ease-in-out) infinite; }
.lvcard.is-armed .lvcard__label { letter-spacing: .12em; padding-left: .12em; }