/* ==========================================================================
   Gamarium · Shop (SPEC 20): the Shop tab's segments, the spendable / stake power header, group tabs,
   upgrade sticker cards (ok · can't afford · locked · MAX), the confirm sheet and the level-up pop.
   ========================================================================== */

/* ---------- segments: Upgrades · My cards ------------------------------------------ */
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 50px; padding: 4px; margin-bottom: 14px; border-radius: 18px;
  background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.seg-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 13px; background: var(--g-gold);
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); transition: transform .42s cubic-bezier(.34, 1.45, .5, 1); }
.seg-pill::before { content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 36%; border-radius: 9px; background: rgba(255, 255, 255, .45); }
.seg-pill.is-r { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  font: 400 17px/1 var(--f-d); letter-spacing: .01em; color: var(--ink-2); transition: color .2s; }
.seg button svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; color: var(--ink-3); }
.seg button.is-on { color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.seg button.is-on svg { color: #fff; stroke: var(--ink); stroke-width: 1.4; }
.seg em { font: 900 11px/18px var(--f-ui); font-style: normal; height: 19px; padding: 0 6px; border-radius: 7px; background: var(--lilac);
  border: 1.5px solid var(--ink); color: var(--ink); -webkit-text-stroke: 0; }
.seg button.is-on em { background: #fff; }

/* ---------- group colours (cards, chips, sheet) ------------------------------------- */
.uc--vault, .ubx--vault, .ug--vault { --ug: linear-gradient(180deg, #FFE27A, #FFB20C); --ugd: #E08A00; }
.uc--tap, .ubx--tap, .ug--tap { --ug: linear-gradient(180deg, #FF9CC8, #F2478E); --ugd: #D02C72; }
.uc--games, .ubx--games, .ug--games { --ug: linear-gradient(180deg, #82D2FF, #2D8DEB); --ugd: #1C6FC4; }
.uc--network, .ubx--network, .ug--network { --ug: linear-gradient(180deg, #AE92FF, #6A3CF5); --ugd: #4E22CF; }

/* ---------- header: spendable + stake power ---------------------------------------- */
.shp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px 14px 13px; }
.shp .cap { display: flex; align-items: center; gap: 2px; height: 18px; }
.shp .cap .qh { width: 18px; height: 18px; font-size: 12px; margin-left: 3px; }
.shp-b b, .shp-p b { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 25px; line-height: 1; white-space: nowrap; color: var(--ink); }
.shp-b .gmc { width: 30px; height: 30px; margin-left: -2px; }
.shp-p { padding-left: 12px; border-left: 2px dashed #E6DDF5; }
.shp-p b { gap: 2px; color: var(--green-d); }
.shp-z { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: 5px; border-radius: 9px; background: var(--g-gold);
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.shp-z svg { width: 16px; height: 16px; color: #fff; filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)) drop-shadow(1px -1px 0 var(--ink)) drop-shadow(-1px 1px 0 var(--ink)); }
.shp-p small { align-self: flex-end; margin: 0 0 2px 4px; font: 900 11px/1 var(--f-ui); color: var(--ink-3); }
.shp-p b.pulse, .shp-b b.pulse { transform-origin: left center; }
.shp-b b.is-long, .shp-p b.is-long { font-size: 20px; }
.shp-p b.is-long small { font-size: 10px; margin-left: 3px; }
.shp-p b.is-long .shp-z { width: 24px; height: 24px; margin-right: 3px; }

/* ---------- group tabs ------------------------------------------------------------- */
.ugroups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ugt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 64px; padding: 6px 2px 5px; border-radius: 16px;
  background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); text-align: center;
  transition: transform .34s cubic-bezier(.34, 1.7, .5, 1), box-shadow .22s ease, background-color .2s; }
.ugt:active { transform: translateY(2px) scale(.94); box-shadow: 0 1px 0 var(--ink); transition-duration: .07s; }
.ugt > span { font: 400 14px/1 var(--f-d); letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.ugt em { position: absolute; top: -8px; right: -5px; height: 19px; padding: 0 5px; border-radius: 7px; background: #fff; border: 2px solid var(--ink);
  font: 900 10.5px/15px var(--f-ui); font-style: normal; color: var(--ink); }
.ugt.is-on { background: var(--ug); box-shadow: 0 3px 0 var(--ink), inset 0 -3px 0 rgba(42, 22, 82, .18); }
.ugt.is-on > span { color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ugt.is-on .ug-ic { background: #fff; }
.ugt.is-on .ug-ic svg { color: var(--ugd); filter: none; }
.ug-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ug); border: 2px solid var(--ink); }
.ug-ic svg { width: 15px; height: 15px; color: #fff; stroke-width: 2.6;
  filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)) drop-shadow(1px -1px 0 var(--ink)) drop-shadow(-1px 1px 0 var(--ink)); }

/* ---------- upgrade cards ---------------------------------------------------------- */
.ugrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.uc { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 6px 6px 8px; border-radius: 21px; background: #fff;
  border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .4s cubic-bezier(.34, 1.6, .5, 1); }
.uc:active { transform: translateY(-4px) scale(1.03) rotate(-1deg); transition: transform .12s ease-out; }
.uc-art { position: relative; height: 122px; border-radius: 15px; overflow: hidden; background: var(--ug); border: 2px solid var(--ink); isolation: isolate; }
.uc-art::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 58%); }
.uc-rays { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; z-index: 0; border-radius: 50%; background: var(--corona-w); }
.uc-art img { position: absolute; z-index: 1; left: 50%; top: 50%; height: 132px; width: 132px; max-width: none; margin: -66px 0 0 -66px; object-fit: contain; }
.uc-lv { position: absolute; z-index: 2; left: 5px; top: 5px; height: 21px; padding: 0 7px; border-radius: 8px; background: var(--ink); color: #fff;
  font: 900 11px/21px var(--f-ui); letter-spacing: .02em; }
.uc-name { margin-top: 8px; padding: 0 2px; font-size: 16.5px; line-height: 1.05; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-gain { display: inline-flex; align-self: center; align-items: center; gap: 3px; max-width: 100%; margin-top: 6px; height: 23px; padding: 0 8px; border-radius: 8px;
  background: #DFFBEA; border: 2px solid var(--green-d); color: #0E7A40; font: 900 11.5px/1 var(--f-ui); white-space: nowrap; }
.uc-gain svg { flex: none; width: 13px; height: 13px; stroke-width: 3; }
.uc-foot { display: flex; height: 46px; margin-top: 9px; }
.uc-buy { flex: 1; min-width: 0; height: 44px; padding: 0 6px; flex-direction: column; gap: 2px; }
.uc-cost { display: inline-flex; align-items: center; gap: 5px; }
.uc-cost .gmc { width: 21px; height: 21px; filter: none; }
.uc-buy .uc-cost { font-size: 18px; }
.uc-buy.is-poor { background: #F1ECF8; color: var(--ink-2); -webkit-text-stroke: 0; border-color: var(--ink-4); box-shadow: 0 3px 0 var(--ink-4); }
.uc-buy.is-poor::before { display: none; }
.uc-buy.is-poor .uc-cost { font-size: 16px; }
.uc-buy.is-poor .gmc { filter: grayscale(.7); opacity: .65; width: 18px; height: 18px; }
.uc-buy small { font: 900 10px/1 var(--f-ui); color: #E0364A; letter-spacing: 0; -webkit-text-stroke: 0; }
/* MAX */
.uc-max { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 14px; position: relative; overflow: hidden;
  background: var(--g-gold); border: var(--bw) solid var(--ink); box-shadow: inset 0 -4px 0 rgba(200, 110, 0, .35);
  font-size: 21px; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.uc-max::before { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 38%; border-radius: 10px; background: rgba(255, 255, 255, .42); }
.uc-max::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  animation: uc-shine 3.2s ease-in-out infinite; }
.uc-max > * { position: relative; z-index: 1; }
.uc-max svg { width: 18px; height: 18px; color: #fff; -webkit-text-stroke: 0; stroke-width: 2.6;
  filter: drop-shadow(1.2px 1.2px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)) drop-shadow(1px -1px 0 var(--ink)) drop-shadow(-1px 1px 0 var(--ink)); }
.uc.is-max { background: #FFFBEA; }
.uc.is-max .uc-gain { background: #FFF1C2; border-color: var(--gold-d); color: #8A4E00; }
.uc.is-max .uc-lv { background: var(--g-gold); color: var(--ink); border: 1.5px solid var(--ink); line-height: 18px; }
@keyframes uc-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
/* locked */
.uc.is-locked { background: #F7F4FC; }
.uc.is-locked .uc-art { background: linear-gradient(180deg, #D8D0EA, #ADA1CC); }
.uc.is-locked .uc-art img { filter: grayscale(.9) brightness(.82) contrast(.92); opacity: .75; }
.uc.is-locked .uc-rays { opacity: .5; animation: none; }
.uc-lock { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 14px;
  background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.uc-lock svg { width: 20px; height: 20px; stroke-width: 2.6; }
.uc.is-locked .uc-name { color: var(--ink-2); }
.uc.is-locked .uc-gain { background: var(--lilac); border-color: var(--ink-4); color: var(--ink-2); }
.uc-req { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 44px; padding: 0 7px; border-radius: 13px;
  background: #fff; border: 2px dashed var(--ink-4); }
.uc-rt { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; font: 900 11px/1.1 var(--f-ui); color: var(--ink); }
.uc-rt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-rt svg { flex: none; width: 12px; height: 12px; stroke-width: 2.8; color: var(--violet); }
.uc-rp { display: flex; align-items: center; gap: 5px; }
.uc-rp .bar { flex: 1; height: 10px; border-width: 1.5px; }
.uc-rp .bar > i { left: 1.5px; top: 1.5px; bottom: 1.5px; }
.uc-rp em { flex: none; font: 900 10px/1 var(--f-ui); font-style: normal; color: var(--ink-2); }
.shp-note { margin-top: 14px; }

/* the odd cell: the next group's upgrades */
.uc-nx { background: #fff; }
.uc-nx-fan { position: absolute; z-index: 1; inset: 0; }
.uc-art .uc-nx-fan img { position: absolute; width: 84px; height: 84px; margin: 0; filter: drop-shadow(0 3px 0 rgba(42, 22, 82, .28)); }
.uc-art .uc-nx-fan img:nth-child(1) { left: -8px; top: 30px; transform: rotate(-10deg); }
.uc-art .uc-nx-fan img:nth-child(2) { left: 50%; top: 8px; margin-left: -48px; width: 96px; height: 96px; z-index: 2; }
.uc-art .uc-nx-fan img:nth-child(3) { left: auto; right: -8px; top: 30px; transform: rotate(10deg); }
.uc-nx-s { background: var(--lilac); border-color: var(--ink-4); color: var(--ink-2); }
.uc-nx-go { flex: 1; height: 44px; }
.uc-nx-go svg { width: 16px; height: 16px; }

/* ---------- the level-up pop ------------------------------------------------------- */
.uc.is-pop { z-index: 3; animation: uc-pop .75s cubic-bezier(.3, 1.5, .5, 1); }
.uc.is-pop .uc-art::after { content: ""; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; z-index: 3; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .95) 66%, rgba(255, 236, 170, .5) 76%, rgba(255, 236, 170, 0) 100%);
  animation: uc-flash .7s ease-out forwards; }
.uc.is-pop .uc-lv { animation: uc-lv .6s .18s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.uc.is-pop .uc-art img { animation: uc-art .75s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes uc-pop { 0% { transform: scale(1); } 16% { transform: scale(.9) rotate(-2deg); } 46% { transform: scale(1.09) rotate(2deg); } 72% { transform: scale(.98) rotate(-.5deg); } 100% { transform: none; } }
@keyframes uc-flash { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
@keyframes uc-lv { from { transform: scale(2.2); background: var(--green); } }
@keyframes uc-art { 0% { transform: scale(1); } 30% { transform: scale(.82) translateY(6px); } 62% { transform: scale(1.14) translateY(-6px); } 100% { transform: none; } }
.uc-fly { position: fixed; z-index: 520; display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 13px; pointer-events: none;
  background: var(--g-green); border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); transform: translate(-50%, -50%);
  font-size: 18px; line-height: 1; color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.uc-fly svg { width: 16px; height: 16px; color: #fff; -webkit-text-stroke: 0;
  filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)) drop-shadow(1px -1px 0 var(--ink)) drop-shadow(-1px 1px 0 var(--ink)); }

/* ---------- confirm sheet ---------------------------------------------------------- */
.ubx { text-align: center; }
.ubx-stage { position: relative; height: 196px; margin-top: 4px; border-radius: 24px; overflow: hidden; background: var(--ug); border: var(--bw) solid var(--ink);
  box-shadow: 0 4px 0 var(--ink); isolation: isolate; }
.ubx-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%); }
.ubx-rays { position: absolute; left: 50%; top: 50%; width: 290px; height: 290px; margin: -145px 0 0 -145px; z-index: 0; border-radius: 50%; background: var(--corona-w); animation: cr-breathe 5s ease-in-out infinite; }
.ubx-stage img { position: absolute; z-index: 1; left: 50%; top: 50%; width: 226px; height: 226px; margin: -113px 0 0 -113px; animation: ubx-float 3.4s ease-in-out infinite; }
@keyframes ubx-float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.ubx-name { margin-top: 14px; font-size: 29px; line-height: 1; color: var(--ink); }
.ubx-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 9px; }
.ubx-tags .t svg { color: var(--violet); }
.ubx-tags .t--gold svg, .ubx-tags .t--violet svg { color: inherit; }
.ubx-rows { margin-top: 16px; padding: 2px 14px; text-align: left; }
.ubx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; font: 800 13px/1.2 var(--f-ui); color: var(--ink-2); }
.ubx-row > span { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.ubx-row > span svg { width: 17px; height: 17px; color: var(--violet); stroke-width: 2.4; }
.ubx-row b { display: flex; align-items: center; gap: 5px; font: 400 17px/1 var(--f-d); letter-spacing: .01em; color: var(--ink); text-align: right; white-space: nowrap; }
.ubx-row b i { font-style: normal; color: var(--ink-3); margin: 0 2px; }
.ubx-row b.pos { color: var(--green-d); }
.ubx-row b.neg { color: #E0364A; }
.ubx-row--cost b { font-size: 21px; }
.ubx-row--cost .gmc { width: 24px; height: 24px; }
.ubx-note { margin-top: 12px; font: 800 11.5px/1.45 var(--f-ui); color: var(--ink-3); }
.ubx-act { display: grid; gap: 12px; margin-top: 16px; }
.ubx-act .uc-cost .gmc { width: 26px; height: 26px; }
.ubx-req { margin-top: 12px; padding: 13px 14px; text-align: left; background: #F7F4FC; }
.ubx-req-top { display: flex; align-items: center; gap: 7px; }
.ubx-req-top svg { width: 18px; height: 18px; color: var(--violet); stroke-width: 2.6; }
.ubx-req-top b { font-size: 18px; }
.ubx-req > span { display: block; margin: 6px 0 9px; font: 900 14px/1.3 var(--f-ui); color: var(--ink); }
.ubx-req em { display: block; margin-top: 6px; font: 900 12px/1 var(--f-ui); font-style: normal; color: var(--ink-2); text-align: right; }
.ubx-max { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; text-align: left; background: #FFF6D8; font: 800 13.5px/1.4 var(--f-ui); color: var(--ink-2); }
.ubx-max svg { flex: none; width: 30px; height: 30px; color: var(--gold-d); stroke-width: 2.2; }
.ubx-max b { color: var(--ink); }

/* ---------- Vault: Shop power + Get more power ------------------------------------- */
.vb-shop { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 9px 9px 10px; border-radius: 16px; background: #FFF4F9;
  border: 2px solid var(--ink); }
.vb-shop-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--g-pink); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.vb-shop-ic svg { width: 19px; height: 19px; color: #fff; stroke-width: 2.4;
  filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)) drop-shadow(1px -1px 0 var(--ink)) drop-shadow(-1px 1px 0 var(--ink)); }
.vb-shop-m { flex: 1; min-width: 0; }
.vb-shop-m em { display: block; font: 900 10.5px/1 var(--f-ui); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.vb-shop-m b { display: block; margin-top: 4px; font: 400 17px/1 var(--f-d); color: #C42A6E; white-space: nowrap; }
.vb-shop .cb--sm { font-size: 13.5px; padding: 0 10px; }
.vb-shop .cb { padding: 0 11px; }

@media (max-width: 370px) {
  .vb-shop { gap: 8px; padding: 8px; }
  .vb-shop-m b { font-size: 15px; }
  .vb-shop .cb--sm { font-size: 12.5px; padding: 0 8px; }
  .ubx-row b { font-size: 15.5px; }
  .ubx-row--cost b { font-size: 19px; }
  .ubx-row > span { gap: 6px; }
  .uc-art { height: 112px; }
  .uc-art img { height: 122px; width: 122px; margin: -61px 0 0 -61px; }
  .uc-name { font-size: 15px; }
  .uc-buy .uc-cost { font-size: 16.5px; }
  .shp-b b, .shp-p b { font-size: 21px; }
  .shp-b .gmc { width: 26px; height: 26px; }
  .shp-z { width: 24px; height: 24px; margin-right: 3px; }
  .seg button { font-size: 15.5px; }
  .ugroups { gap: 6px; }
  .ugt > span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-rays, .ubx-rays, .uc-max::after, .ubx-stage img { animation: none; }
  .uc.is-pop, .uc.is-pop .uc-art img, .uc.is-pop .uc-lv { animation: none; }
}

/* ==========================================================================
   One Collect (SPEC 22): the pending amount (Vault rewards + card power + Shop stake power), Earning per hour,
   the fill bar to the 24 h cap and the Collect button; on Home's Airdrop card ('side'), the Vault ('wide')
   and the Shop tab ('strip')
   ========================================================================== */
.oc-rate { font: 800 11px/1.1 var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.oc-rate b { font-weight: 900; color: var(--green-d); }
.oc-pend { color: var(--green-d); white-space: nowrap; line-height: 1; }
.oc-bar.bar { height: 10px; border-width: 1.5px; }
.oc-bar.bar > i { left: 1.5px; top: 1.5px; bottom: 1.5px; }
.oc-cap { font: 800 10.5px/1.2 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-cap b { color: var(--ink); font-weight: 900; }
.oc-cap b.pos { color: var(--green-d); }
.oc-cap .oc-full { color: var(--gold-d); }
.oc-btn svg { width: 17px; height: 17px; }
/* Home: under the Collect button */
.oc--side { flex: 0 0 132px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.oc--side .oc-btn { width: 100%; padding: 0 10px; }
.oc--side .oc-rate { margin-top: 9px; }
.oc--side .oc-pend { margin-top: 4px; font-size: 17px; }
.oc--side .oc-bar { margin-top: 6px; height: 9px; }
.oc--side .oc-cap { margin-top: 4px; }
/* Vault */
.oc--wide { margin-top: 12px; padding: 12px 12px 12px; border-radius: 18px; background: #F2FDF6; border: 2px solid var(--ink); }
.oc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-top .cap { display: flex; align-items: center; gap: 2px; }
.oc-top .cap .qh { width: 18px; height: 18px; font-size: 12px; margin-left: 3px; }
.oc--wide .oc-pend { margin-top: 6px; font-size: 30px; }
.oc--wide .oc-bar { margin-top: 9px; height: 12px; }
.oc-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.oc-row .oc-cap { font-size: 11.5px; }
.oc-max { flex: none; font: 900 11px/1.2 var(--f-ui); color: var(--ink-3); }
.oc-parts { margin-top: 8px; padding-top: 8px; border-top: 2px dashed #CDEFD9; font: 800 11.5px/1.3 var(--f-ui); color: var(--ink-2); }
.oc--wide .oc-btn { margin-top: 12px; }
/* Shop tab */
.oc--strip { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 11px 12px 11px 14px; background: #F2FDF6; }
.oc--strip .oc-m { flex: 1; min-width: 0; }
.oc--strip .oc-pend { margin-top: 5px; font-size: 23px; }
.oc--strip .oc-bar { margin-top: 7px; }
.oc--strip .oc-cap { margin-top: 5px; }
.oc--strip .oc-btn { flex: none; height: 50px; padding: 0 14px; }
.cpw-note { display: flex; align-items: center; gap: 7px; margin: -2px 2px 0; font: 800 12px/1.35 var(--f-ui); color: var(--ink-2); }
.cpw-note svg { flex: none; width: 15px; height: 15px; color: var(--gold-d); }
.cpw-note b { color: var(--ink); }
/* Home: the Airdrop card's left side */
.wv { display: inline-flex; align-items: center; gap: 4px; height: 26px; margin-top: 8px; padding: 0 6px 0 8px; border-radius: 9px; background: var(--lilac);
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 400 13px/1 var(--f-d); letter-spacing: .02em; color: var(--ink); }
.wv svg { width: 14px; height: 14px; color: var(--violet); stroke-width: 2.6; }
.wv svg:last-child { width: 13px; height: 13px; color: var(--ink-3); }
.wv:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.wal .wrow { align-items: flex-start; }
.wal .wtok { flex-basis: 46px; height: 46px; margin: 2px -2px 0 -4px; }
.wal .wm .n { font-size: 26px; }
.wal .wm .n.is-long { font-size: 21px; }
.wal .wm .l .qh { width: 17px; height: 17px; font-size: 11px; margin-left: -2px; }
@media (max-width: 370px) {
  .oc--side { flex-basis: 118px; }
  .wal .wtok { display: none; }
  .wal .wm .n { font-size: 24px; }
  .oc--strip .oc-pend { font-size: 20px; }
}