/* HOPPA SHOP (src/ui/menus-shop.js, src/social/shopWar.js, src/social/shopCosmetics.js) — Settings' look: one ink panel,
   Settings' tab bar, calm paper / sand neutrals, the picked thing in plain white (no yellow, no glows). Prices in the
   coin's own gold (the reward colour, like the wallet's). */


/* ---- the SHOP page (v2): a sibling of SETTINGS — the same header, the same ink panel (Settings' tab bar, rows, foot),
   the same type, radii, borders and plain white highlight — but FULL WIDTH: the Settings panel holds the tabs, the
   filters and the tiles, flowing to the width (more columns on a wide screen); the right-hand column is the 3D stage
   window (your kid on the pedestal) over the details panel. Phones held upright / narrow: stacked (tabs → tiles →
   details); phones held sideways: the details as a narrow right column (no stage). Tiers: a thin stripe in the tier's
   colour (common grey · rare cyan · epic magenta · legendary white). Gold only on coins. */
.sh { --tier: #9aa0ad; --sh-l: calc(var(--u) * 3.6 + var(--sal, 0px)); --sh-r: calc(var(--u) * 3.6 + var(--sar, 0px)); --sh-side: clamp(320px, 31vw, calc(var(--u) * 44)); }
.sh .tier-common { --tier: #9aa0ad; } .sh .tier-rare { --tier: #3df0ff; } .sh .tier-epic { --tier: #ff2d8a; } .sh .tier-legendary { --tier: #ffffff; }
.sh-page { position: absolute; left: var(--sh-l); right: var(--sh-r); top: calc(var(--u) * 8.6); bottom: calc(var(--u) * 4.8); display: grid; grid-template-columns: minmax(0, 1fr) var(--sh-side); gap: calc(var(--u) * 1.2); pointer-events: none; }
.sh-page > * { pointer-events: auto; }
.hs-set.sh .hs-panel { position: relative; left: auto; top: auto; translate: none; width: auto; max-height: none; min-height: 0; }
.hs-set.sh .sh-panel { height: 100%; }
/* the wallet: in the header row, right */
.sh-wallet { position: absolute; right: var(--sh-r); top: calc(var(--u) * 2.4); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .45em; padding: .5em 1em .45em .7em;
  border-radius: calc(var(--u) * 1.2); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1.5px rgba(243, 236, 224, .12); color: var(--coin-gold, #e9b64a); }
.sh-wallet .sh-coin { grid-row: span 2; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); min-width: 26px; min-height: 26px; }
.sh-wallet b { font: 800 max(20px, calc(var(--u) * 1.7)) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; }
.sh-wallet small { font: 500 max(12px, calc(var(--u) * .85)) / 1.1 'Rubik', sans-serif; color: rgba(243, 236, 224, .6); }
.sh-wallet.is-tick b { color: #fff; }
.sh-wallet.is-short { animation: sh-shake .35s; }
@keyframes sh-shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
/* six tabs (Settings' bar): they share the row; the icon goes first when space runs out */
.sh-tabs .hs-tab { flex: 1 1 0; min-width: 0; gap: .5em; padding: 0 .5em; }
.sh-tabs .hs-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1300px) { .sh-tabs .hs-tab i { display: none; } }
/* filters: small Settings tiles */
.sh-filters { display: flex; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * .7); flex: none; }
.sh-chip { display: inline-flex; align-items: center; gap: .55em; height: max(36px, calc(var(--u) * 2.8)); padding: 0 1em; border: 0; border-radius: calc(var(--u) * .9); background: rgba(243, 236, 224, .07); color: var(--hp-paper);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); font: 700 max(14px, calc(var(--u) * 1.05)) / 1 'Rubik', sans-serif; letter-spacing: .04em; cursor: pointer; pointer-events: auto; outline: none; }
.sh-chip b { font-weight: 600; color: rgba(243, 236, 224, .55); }
.sh-chip:hover, .sh-chip.is-focus { background: rgba(243, 236, 224, .12); }
.sh-chip.is-sel { background: var(--hp-hi); color: var(--hp-ink); box-shadow: inset 0 0 0 2px var(--hp-ink); }
.sh-chip.is-sel b { color: rgba(30, 33, 48, .55); }
/* the rows: Settings' scroll area, sections like the Locker's (a label head, then the tiles) */
.sh .sh-rows { display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.sh-sec[hidden] { display: none; }
/* the featured banner: one wide tile */
.sh-hero { position: relative; display: grid; grid-template-columns: minmax(0, 30%) 1fr; align-items: center; gap: calc(var(--u) * 1.4); width: 100%; padding: calc(var(--u) * .9) calc(var(--u) * 1.4);
  border: 0; border-radius: calc(var(--u) * 1.1); text-align: left; color: var(--hp-paper); font: inherit; cursor: pointer; pointer-events: auto; outline: none;
  background: rgba(243, 236, 224, .06); box-shadow: inset 4px 0 0 var(--tier), inset 0 0 0 1px rgba(243, 236, 224, .08); transition: background .15s, box-shadow .15s; }
.sh-hero:hover, .sh-hero.is-focus { background: rgba(243, 236, 224, .11); }
.sh-hero.is-focus, .sh-hero.is-on { box-shadow: inset 4px 0 0 var(--tier), inset 0 0 0 2px #fff; }
.sh-hero__art { display: block; aspect-ratio: 1; max-height: calc(var(--u) * 10); justify-self: center; }
.sh-hero__txt { display: flex; flex-direction: column; gap: calc(var(--u) * .35); min-width: 0; }
.sh-hero__kick { display: flex; align-items: center; gap: .6em; }
.sh-hero__kick > b { font: 800 max(12px, calc(var(--u) * .85)) / 1 'Rubik', sans-serif; letter-spacing: .14em; color: var(--tier); }
.sh-hero__name { font: 400 max(20px, calc(var(--u) * 1.9)) / 1.05 'Titan One', 'Rubik', sans-serif; color: #fff; }
.sh-hero__blurb { font: 500 max(14px, calc(var(--u) * 1.05)) / 1.25 'Rubik', sans-serif; color: rgba(243, 236, 224, .66); }
.sh-hero .sh-card__buy { justify-content: flex-start; margin-top: .3em; }
/* the tiles (the Locker's tile look): art, name, tagline, bars, prices */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(var(--u) * 12.5)), 1fr)); gap: calc(var(--u) * .6); }
.sh-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * .3); min-width: 0; margin: 0; padding: calc(var(--u) * .7) calc(var(--u) * .65) calc(var(--u) * .65);
  border: 0; border-radius: calc(var(--u) * 1); color: var(--hp-paper); font: inherit; text-align: center; cursor: pointer; pointer-events: auto; outline: none; overflow: hidden; -webkit-tap-highlight-color: transparent;
  background: rgba(243, 236, 224, .06); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .07); transition: background .15s, box-shadow .15s; }
.sh-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tier); opacity: .9; }
.sh-card:hover, .sh-card.is-focus { background: rgba(243, 236, 224, .11); }
.sh-card.is-focus { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.sh-card.is-on { background: rgba(243, 236, 224, .13); box-shadow: inset 0 0 0 2px #fff; }
@media (prefers-reduced-motion: reduce) { .sh-card, .sh-hero { transition: none; } }
.sh-card__art { display: block; width: 70%; aspect-ratio: 1; margin: calc(var(--u) * .2) auto 0; }
.sh-img, .sh-svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.sh-svg svg { display: block; width: 100%; height: 100%; }
.sh-card__name { display: block; font: 700 max(15px, calc(var(--u) * 1.1)) / 1.15 'Rubik', sans-serif; color: var(--hp-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-card.is-on .sh-card__name { color: #fff; }
.sh-card__tag { display: block; min-height: 1.2em; font: 500 max(13px, calc(var(--u) * .92)) / 1.2 'Rubik', sans-serif; color: rgba(243, 236, 224, .66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-card__badges, .sh-hero__badges { display: flex; gap: .3em; }
.sh-card__badges { position: absolute; left: calc(var(--u) * .5); top: calc(var(--u) * .6); z-index: 1; }
.sh-card__badges em, .sh-hero__badges em { font: 800 max(10px, calc(var(--u) * .72)) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .08em; padding: .35em .5em; border-radius: .4em; }
.sh-card__badges .is-new, .sh-hero__badges .is-new { background: #ff2d8a; color: #fff; }
.sh-card__badges .is-own, .sh-hero__badges .is-own { background: #fff; color: var(--hp-ink); }
.sh-card__eq { position: absolute; top: calc(var(--u) * .5); right: calc(var(--u) * .5); display: grid; place-items: center; width: max(20px, calc(var(--u) * 1.6)); height: max(20px, calc(var(--u) * 1.6));
  border-radius: 50%; background: #fff; color: var(--hp-ink); opacity: 0; scale: .6; transition: opacity .15s, scale .15s; }
.sh-card__eq svg { width: 62%; height: 62%; }
.sh-card.is-on .sh-card__eq { opacity: 1; scale: 1; }
.sh-card.is-pick { animation: lk-pick .28s var(--out, ease-out); }
/* stat bars (weapons) */
.sh-bars { display: grid; gap: .25em; text-align: left; }
.sh-bar { display: grid; grid-template-columns: 5.4em 1fr; align-items: center; gap: .45em; }
.sh-bars--big .sh-bar { grid-template-columns: 7em 1fr 3.8em; }
.sh-bar em { font: 600 max(10px, calc(var(--u) * .7)) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .06em; color: rgba(243, 236, 224, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-bars--big .sh-bar em { font-size: max(12px, calc(var(--u) * .85)); }
.sh-bar i { display: block; height: 4px; border-radius: 2px; background: rgba(243, 236, 224, .12); overflow: hidden; }
.sh-bars--big .sh-bar i { height: 6px; border-radius: 3px; }
.sh-bar i b { display: block; height: 100%; border-radius: inherit; background: #3df0ff; }
.sh-bar.is-dps i b { background: #fff; }
.sh-bar small { font: 600 max(12px, calc(var(--u) * .85)) / 1 'Rubik', sans-serif; color: var(--hp-paper); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* price buttons on a tile: Settings' small tiles */
.sh-card__buy { display: flex; justify-content: center; gap: .35em; margin-top: auto; }
.sh-pb { flex: 1 1 0; min-width: 0; display: inline-flex; flex-direction: column; align-items: center; gap: .2em; padding: .4em .3em .45em; border-radius: calc(var(--u) * .7); background: rgba(243, 236, 224, .07);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); color: var(--coin-gold, #e9b64a); cursor: pointer; transition: background .12s; }
.sh-hero .sh-pb { flex: 0 0 auto; min-width: 9em; }
.sh-pb em { font: 700 max(10px, calc(var(--u) * .72)) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .06em; color: rgba(243, 236, 224, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sh-pb b { font: 800 max(13px, calc(var(--u) * .95)) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; }
.sh-pb__p { display: inline-flex; align-items: center; gap: .3em; }
.sh-pb:hover { background: rgba(243, 236, 224, .14); }
.sh-pb.is-own { background: rgba(243, 236, 224, .12); }
.sh-pb.is-own em { color: #fff; }
.sh-pb.is-short { opacity: .45; }
.sh-pb.is-done { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); cursor: default; }
.sh-pb.is-done em { color: #fff; }
.sh-coin { display: inline-block; width: 1.1em; height: 1.1em; flex: none; }
.sh-coin svg { display: block; width: 100%; height: 100%; }
/* empty state */
.sh-empty { display: flex; flex-direction: column; align-items: center; gap: .4em; padding: calc(var(--u) * 3) calc(var(--u) * 2); text-align: center; }
.sh-empty[hidden] { display: none; }
.sh-empty i { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); opacity: .4; color: var(--hp-paper); }
.sh-empty i svg { width: 100%; height: 100%; }
.sh-empty b { font: 700 max(17px, calc(var(--u) * 1.35)) / 1.15 'Rubik', sans-serif; color: var(--hp-paper); }
.sh-empty small { font: 500 max(14px, calc(var(--u) * 1.05)) / 1.25 'Rubik', sans-serif; color: rgba(243, 236, 224, .66); }
/* the foot: Settings' — the message left, the dock (main gun · bag) right */
.sh .sh-foot { gap: calc(var(--u) * 1.2); }
.sh-foot .hs-saved { min-width: 0; } .sh-foot .hs-saved span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-dock { flex: none; display: flex; align-items: center; gap: calc(var(--u) * .5); }
.sh-dock__lbl { font: 700 max(11px, calc(var(--u) * .78)) / 1 'Rubik', sans-serif; letter-spacing: .1em; color: rgba(243, 236, 224, .55); }
.sh-dock__lbl + .sh-slot { margin-right: calc(var(--u) * .5); }
.sh-slot { position: relative; display: grid; place-items: center; width: max(40px, calc(var(--u) * 3.4)); height: max(40px, calc(var(--u) * 3.4)); border-radius: calc(var(--u) * .8); background: rgba(243, 236, 224, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); }
.sh-slot .sh-img, .sh-slot .sh-svg { width: 82%; height: 82%; }
.sh-slot em { display: none; }
.sh-slot.is-empty em { display: block; font: 500 max(10px, calc(var(--u) * .7)) / 1 'Rubik', sans-serif; font-style: normal; color: rgba(243, 236, 224, .45); }
.sh-slot b { position: absolute; right: -3px; bottom: -3px; font: 800 max(11px, calc(var(--u) * .78)) / 1 'Rubik', sans-serif; color: #fff; -webkit-text-stroke: 2.5px var(--hp-ink, #1e2130); paint-order: stroke fill; }
.sh-slot.is-land { animation: sh-pop .32s ease-out; }
.sh-dock.is-shake { animation: sh-shake .35s; }
@keyframes sh-pop { 50% { scale: 1.12; } }
.sh-fly { position: fixed; z-index: 50; pointer-events: none; }
/* the right-hand column: the stage window (see-through: the kid is drawn on the canvas behind) over the details panel */
.sh-side { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); min-height: 0; }
.sh-stage { position: relative; flex: 1 1 44%; min-height: 160px; border-radius: calc(var(--u) * 1.6); box-shadow: inset 0 0 0 2px rgba(243, 236, 224, .1); pointer-events: none; }
.sh-spin { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * .7); display: flex; justify-content: center; align-items: center; gap: .45em; font: 600 max(13px, calc(var(--u) * .95)) / 1 'Rubik', sans-serif; color: rgba(243, 236, 224, .7); }
.sh-spin i { width: 1.2em; height: 1.2em; } .sh-spin i svg { width: 100%; height: 100%; }
.hs-set.sh .sh-dpanel { flex: 1 1 56%; overflow: hidden; }
.sh:not(.has-stage) .sh-dpanel { flex: 1 1 auto; }
/* the details (Settings' rows type) */
.sh-d { --tier: #9aa0ad; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(var(--u) * .65); padding: 2px 4px; scrollbar-width: thin; scrollbar-color: rgba(243, 236, 224, .25) transparent; }
.sh-d__tier { font: 700 max(12px, calc(var(--u) * .85)) / 1 'Rubik', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tier); padding-bottom: .55em; box-shadow: inset 0 -2px 0 var(--tier); }
.sh-d__top { display: flex; align-items: center; gap: calc(var(--u) * .9); }
.sh-d__art { flex: none; width: max(72px, calc(var(--u) * 7)); aspect-ratio: 1; }
.sh-d__name { font: 700 max(19px, calc(var(--u) * 1.6)) / 1.1 'Rubik', sans-serif; color: #fff; }
.sh-d__tag { margin-top: .3em; font: 500 max(14px, calc(var(--u) * 1.05)) / 1.25 'Rubik', sans-serif; color: rgba(243, 236, 224, .66); }
.sh-d__blurb { margin: 0; font: 500 max(14px, calc(var(--u) * 1.05)) / 1.3 'Rubik', sans-serif; color: var(--hp-paper); }
.sh-d__note { margin: .45em 0 0; font: 500 max(12px, calc(var(--u) * .88)) / 1.3 'Rubik', sans-serif; color: rgba(243, 236, 224, .58); }
.sh-d__stats { display: grid; grid-template-columns: auto 1fr; gap: .4em .9em; margin: 0; font: 500 max(13.5px, calc(var(--u) * 1)) / 1.28 'Rubik', sans-serif; }
.sh-d__stats dt { color: rgba(243, 236, 224, .55); white-space: nowrap; }
.sh-d__stats dd { margin: 0; color: var(--hp-paper); }
.sh-d__own { font: 600 max(14px, calc(var(--u) * 1)) / 1.3 'Rubik', sans-serif; color: #fff; }
.sh-d__acts { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); margin-top: auto; padding-top: calc(var(--u) * .4); }
.hs-set.sh .sh-act, .hs-set.sh .sh-buy { font-size: max(15px, calc(var(--u) * 1.1)); }
.sh-d__acts .iw-btn { min-width: 0; }
.sh-d__acts .iw-btn__label, .sh-d__acts .iw-btn__sub { white-space: normal; }
.sh-buy .iw-btn__icon svg { filter: none; }
.sh-buy__p { color: var(--coin-gold, #e9b64a); font-variant-numeric: tabular-nums; }
.iw-btn--primary .sh-buy__p { color: inherit; }
.sh-buy.is-off { opacity: .5; }
.sh-d__pv { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.sh-d__pv:empty { display: none; }
.sh-pvnote { display: inline-flex; align-items: center; gap: .45em; font: 600 max(13px, calc(var(--u) * .92)) / 1.25 'Rubik', sans-serif; color: #3df0ff; }
.sh-pvnote svg { width: 1.2em; height: 1.2em; flex: none; }
.sh-closed { padding: calc(var(--u) * 2); }
/* previews: a name tag with its frame, a cloth swatch, stickers, a trail */
.sh-tagpv { position: relative; display: inline-flex; transform: none; }
.sh-tagpv .pz-tag__name { display: inline-block; font-size: max(13px, calc(var(--u) * 1)); }
.sh-clothpv { display: inline-block; width: 8em; height: 3.4em; border-radius: .4em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.sh-cloth--batik { background: repeating-radial-gradient(circle at 20% 120%, #1d1940 0 .5em, #2fe0ff .5em .7em, #efe8dc .7em .9em); }
.sh-cloth--tartan { background: repeating-linear-gradient(90deg, transparent 0 .9em, rgba(214, 31, 63, .85) .9em 1.2em), repeating-linear-gradient(0deg, #1b3a2c 0 .9em, rgba(214, 31, 63, .85) .9em 1.2em); }
.sh-cloth--bojagi { background: conic-gradient(from 0deg at 33% 50%, #f2d4dc 0 25%, #b9e3d2 0 50%, #f4f0e6 0 75%, #c9d6f2 0) 0 0 / 3.5em 3.2em; }
.sh-stk { display: inline-block; width: 2.6em; height: 2.6em; }
.sh-stk--big { width: 4em; height: 4em; }
.sh-stk svg { width: 100%; height: 100%; }
.sh-trailpv { display: inline-block; width: 9em; height: .8em; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--c) 70%, #fff); }
/* narrow / upright (tablets upright, phones upright): stacked — tabs → tiles → details sheet (no stage) */
@media (max-width: 1000px) and (min-height: 521px), (max-aspect-ratio: 6/5) {
  .sh-page { left: max(10px, var(--sal, 0px)); right: max(10px, var(--sar, 0px)); top: calc(var(--u) * 7.6); bottom: calc(var(--u) * 4.6); grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }
  .sh-wallet { top: calc(var(--u) * 1.6); right: max(10px, var(--sar, 0px)); }
  .sh-hero { grid-template-columns: 96px 1fr; }
  .sh-hero__blurb { display: none; }
  .sh-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sh-foot .hs-saved { display: none; }
}
/* phones held sideways (short): the tiles left, the details a right column (a sheet under 375 px of tiles would leave one
   row); the header shrinks, no key hints */
@media (max-height: 520px) and (min-aspect-ratio: 6/5) {
  .sh { --sh-side: 40vw; }
  .sh-page { left: max(8px, var(--sal, 0px)); right: max(8px, var(--sar, 0px)); top: 50px; bottom: 8px; gap: 8px; }
  .hs-set.sh .hs-panel { padding: 8px; }
  .sh .iw-head { transform-origin: 0 0; scale: .74; }
  .sh .iw-prompts { display: none; }
  .sh-wallet { top: 6px; right: max(8px, var(--sar, 0px)); padding: .3em .7em; }
  .sh-wallet small { display: none; }
  .sh-tabs { padding: 4px; } .sh-tabs .hs-tab { height: 36px; } .sh-tabs .hs-tab i { display: none; } .sh-tabs .hs-tabs__key { display: none; }
  .sh-tabs .hs-tab span { font-size: 12px; }
  .sh-filters { margin-top: 6px; } .sh-chip { height: 30px; padding: 0 .7em; font-size: 12px; }
  .sh-sec--hero { display: none; }
  .sh .lk-sec { padding: 6px; }
  .sh-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
  .sh-card__bars, .sh-card__tag { display: none; }
  .sh-card__name { font-size: 12.5px; }
  .sh-foot { display: none; }
  .sh-d__art { width: 48px; } .sh-d__name { font-size: 16px; } .sh-d__blurb, .sh-d__tag, .sh-d__stats, .sh-d__own { font-size: 12px; }
  .sh-bars--big .sh-bar { grid-template-columns: 5.6em 1fr 3.2em; }
  .hs-set.sh .sh-act, .hs-set.sh .sh-buy { font-size: 12.5px; }
}

/* ---- the Locker: a shop outfit you don't own (a lock; picking it previews it for free) --------------------------- */
.lk-tile.is-locked .lk-tile__pic { opacity: .72; }
.lk-tile__lock { position: absolute; top: calc(var(--u) * .45); left: calc(var(--u) * .45); display: grid; place-items: center; width: max(20px, calc(var(--u) * 1.5)); height: max(20px, calc(var(--u) * 1.5));
  border-radius: 50%; background: rgba(20, 22, 32, .8); color: var(--hp-paper); }
.lk-tile__lock svg { width: 60%; height: 60%; }

/* ---- the war: the weak-point brackets (a flare / your camera's flash) ------------------------------------------------ */
.pz-shop-reveal { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.pz-shop-mark { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; animation: sh-mark .5s ease-in-out infinite alternate; }
.pz-shop-mark::before, .pz-shop-mark::after { content: ''; position: absolute; inset: 0; border: 3px solid #fff; border-radius: 4px; clip-path: polygon(0 0, 35% 0, 35% 12%, 12% 12%, 12% 35%, 0 35%, 0 0, 65% 0, 100% 0, 100% 35%, 88% 35%, 88% 12%, 65% 12%, 65% 0, 100% 65%, 100% 100%, 65% 100%, 65% 88%, 88% 88%, 88% 65%, 100% 65%, 0 65%, 12% 65%, 12% 88%, 35% 88%, 35% 100%, 0 100%); }
.pz-shop-mark::after { inset: 9px; border: 0; border-radius: 50%; background: #3df0ff; clip-path: none; }
@keyframes sh-mark { from { scale: .9; } to { scale: 1.12; } }

/* ---- the results card: the REWARD is coins only (a coin, the count-up, the payout's lines, what it buys); the shop gear a
   fighter used is a small grey USED line — a stat, never styled like a reward ---------------------------------------- */
.pz-shop-reward { margin-top: calc(var(--u) * .8); padding: calc(var(--u) * .8) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1); background: rgba(243, 236, 224, .06); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .12); }
.pz-shop-reward__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.pz-shop-reward__hd b { font: 800 calc(var(--u) * 1.05) / 1 'Rubik', sans-serif; letter-spacing: .12em; color: #fff; }
.pz-shop-reward__hd small { font: 500 calc(var(--u) * .95) / 1.2 'Rubik', sans-serif; color: rgba(243, 236, 224, .6); text-align: right; }
.pz-shop-reward__total { display: flex; align-items: center; gap: .5em; margin-top: .45em; }
.pz-shop-reward__total i { display: block; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); min-width: 28px; min-height: 28px; }
.pz-shop-reward__total i svg { width: 100%; height: 100%; }
.pz-shop-reward__total b { font: 400 calc(var(--u) * 2.6) / 1 'Titan One', 'Rubik', sans-serif; color: var(--coin-gold, #e9b64a); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.pz-shop-reward__total b.is-done { animation: sh-pop .3s ease-out; }
.pz-shop-reward__total small { font: 600 calc(var(--u) * .95) / 1.2 'Rubik', sans-serif; color: rgba(243, 236, 224, .7); }
.pz-shop-reward__lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 13), 1fr)); gap: .2em 1.2em; margin: .5em 0 0; padding: 0; list-style: none; }
.pz-shop-reward__lines li { display: flex; justify-content: space-between; gap: .6em; font: 500 calc(var(--u) * .95) / 1.3 'Rubik', sans-serif; color: rgba(243, 236, 224, .78); }
.pz-shop-reward__lines b { color: var(--coin-gold, #e9b64a); font-variant-numeric: tabular-nums; }
.pz-shop-reward__buys, .pz-shop-reward__rec { margin: .45em 0 0; font: 500 calc(var(--u) * .9) / 1.3 'Rubik', sans-serif; color: rgba(243, 236, 224, .6); }
.pz-shop-reward__none { margin-top: .4em; font: 600 calc(var(--u) * 1.05) / 1.2 'Rubik', sans-serif; color: rgba(243, 236, 224, .72); }
@keyframes sh-pop { 50% { scale: 1.12; } }
.pz-shop-used { display: flex; align-items: center; gap: .3em; margin: .15em 0 0 2.4em; opacity: .75; flex-basis: 100%; }
.pz-war-res__list li .pz-shop-used { margin-left: 0; }
.pz-shop-used em { font: 700 .62em/1 'Rubik', sans-serif; font-style: normal; letter-spacing: .12em; color: rgba(243, 236, 224, .55); padding: .25em .45em; border-radius: .4em; box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .25); }
.pz-shop-used i { position: relative; display: inline-flex; width: 1.25em; height: 1.25em; filter: grayscale(1) brightness(1.2); }
.pz-shop-used i svg, .pz-shop-used i img { width: 100%; height: 100%; }
.pz-shop-used b { position: absolute; right: -.4em; bottom: -.35em; font: 800 .58em/1 'Rubik', sans-serif; color: rgba(243, 236, 224, .8); }
.pz-war-res__list li { flex-wrap: wrap; }
.pz-shop-used__you { display: flex; align-items: center; justify-content: center; gap: .4em; margin-top: .3em; font: 600 calc(var(--u) * .9) / 1 'Rubik', sans-serif; color: rgba(243, 236, 224, .6); }

/* ---- the city: name-tag frames (seen by everyone), chat stickers, emote flair --------------------------------------- */
.pz-tag[data-frame="neon"] .pz-tag__name { box-shadow: inset 0 0 0 2px #3df0ff, inset 0 0 0 3.5px #ff2d8a, 0 1px 4px rgba(0, 0, 0, .28); }
.pz-tag[data-frame="lantern"] .pz-tag__name { background: radial-gradient(circle at .78em 50%, var(--c) 0 .28em, transparent .34em), #8f1d24; box-shadow: inset 0 0 0 2px #2a0f12, inset 0 3px 0 rgba(255, 255, 255, .18), 0 1px 4px rgba(0, 0, 0, .3); }
.pz-tag[data-frame="punk"] .pz-tag__name { background: radial-gradient(circle at .78em 50%, var(--c) 0 .28em, transparent .34em), #121215; box-shadow: inset 0 0 0 2px #c9ced6, 0 1px 4px rgba(0, 0, 0, .3);
  background-image: radial-gradient(circle at .78em 50%, var(--c) 0 .28em, transparent .34em), radial-gradient(circle, #c9ced6 0 1.4px, transparent 1.8px); background-size: auto, .9em .9em; }
.pz-stk { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: -.45em; margin: 0 .08em; }
.pz-stk svg { width: 100%; height: 100%; }
.pz-tag__say .pz-stk { width: 1.9em; height: 1.9em; }
.pz-flair { position: absolute; left: 50%; bottom: 100%; width: 2.6em; height: 2.6em; margin-left: -1.3em; animation: sh-flair 1.6s ease-out forwards; pointer-events: none; }
.pz-flair svg { width: 100%; height: 100%; }
@keyframes sh-flair { 0% { opacity: 0; translate: 0 .8em; scale: .4; } 18% { opacity: 1; translate: 0 0; scale: 1.15; } 30% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -1.6em; } }

/* ---- the phone: the quick-item button (the bag's first item: the HP bottle first), left of FIRE, under the context button */
.tc .tc-btn--item { right: calc(var(--s) * 1.34); bottom: calc(var(--s) * .02); width: calc(var(--s) * .72); height: calc(var(--s) * .72); }
.tc .tc-btn--item .tc-btn__ico { width: 64%; height: 64%; }
.tc .tc-btn--item .tc-btn__n { position: absolute; right: -2px; top: -4px; min-width: 1.5em; padding: .15em .3em; border-radius: 999px; background: #fff; color: var(--ink, #1e2130); font: 800 11px/1 'Rubik', sans-serif; }
.tc .tc-btn--item.is-cd { opacity: .55; }
.tc:not(.is-war) .tc-btn--item { display: none; }

.sh-pb__p { display: inline-flex; align-items: center; gap: .3em; }

/* the results card, centred on every device (the box sizes to the card, so translate -50% centres it) */
.pz-war-res { width: max-content; max-width: calc(100vw - 16px); }
.pz-shop-reward__total { position: relative; }
.pz-shop-reward__total b.is-counting { color: transparent; }
.pz-shop-reward__cu { position: absolute; left: calc(var(--u) * 2.6 + .5em); font: 400 calc(var(--u) * 2.6) / 1 'Titan One', 'Rubik', sans-serif; color: var(--coin-gold, #e9b64a); font-variant-numeric: tabular-nums; pointer-events: none; }
@media (max-width: 30px) { .pz-shop-reward__cu { left: 34px; } }
/* [ui-audit] a keyboard screen: the shop's caps micro-labels at the 10 px desktop floor (9.5 px at 1280×720) */
html:not(.is-touch) :is(.sh-bar em, .sh-pb em, .sh-dock__lbl) { font-size: max(10px, calc(var(--u) * .66)); }
html:not(.is-touch) .sh-slot em { font-size: max(10px, calc(var(--u) * .62)); }

/* the REWARD block, compact: the card keeps its old height (it must fit and stay centred on a phone) */
.pz-shop-reward { margin-top: calc(var(--u) * .4); padding: calc(var(--u) * .55) calc(var(--u) * .9); }
.pz-shop-reward__total { margin-top: .25em; }
.pz-shop-reward__total i { width: calc(var(--u) * 2); height: calc(var(--u) * 2); min-width: 22px; min-height: 22px; }
.pz-shop-reward__total b, .pz-shop-reward__cu { font-size: calc(var(--u) * 2); }
.pz-shop-reward__lines { display: flex; flex-wrap: wrap; gap: 0 .9em; margin-top: .3em; }
.pz-shop-reward__lines li { font-size: calc(var(--u) * .85); gap: .3em; }
.pz-shop-reward__buys, .pz-shop-reward__rec { margin-top: .25em; font-size: calc(var(--u) * .82); }

/* USED inside a results row: inline, after the damage; its label never takes the YOU / CPU badge style */
.pz-war-res__card .pz-shop-used em, .pz-war-res__list li .pz-shop-used em { background: none; color: rgba(243, 236, 224, .5); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .22); font: 700 .58em/1 'Rubik', sans-serif; letter-spacing: .12em; padding: .25em .4em; border-radius: .35em; text-transform: none; }
.pz-war-res__list li .pz-shop-used { flex-basis: 100%; margin: .1em 0 0 2.2em; order: 9; font-size: .9em; }
.pz-war-res__list li { flex-wrap: wrap; }
.pz-war-res__mvp + .pz-shop-used { margin: -.3em 0 0 1.1em; }
/* [ui-audit] a price box's label wraps instead of being cut (fr POSSÉDER POUR TOUJOURS in the featured card) */
.sh-pb em { white-space: normal; text-overflow: clip; text-align: center; line-height: 1.1; }
/* [ui-audit] keyboard screens: the dock's "empty" and the CJK micro labels (no caps to lean on) at 11 px */
html:not(.is-touch) .sh-slot em { font-size: max(11px, calc(var(--u) * .62)); }
html:not(.is-touch):is(:lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(ko)) :is(.sh-bar em, .sh-pb em, .sh-dock__lbl, .sh-card__badges em, .sh-hero__badges em) { font-size: max(11px, calc(var(--u) * .7)); }

/* ---- the SHOP page (v2) on a touch screen: mobile.css's touch Settings frame (.hs-set .hs-panel absolute, 12 px sides) and
   its v1 shop split (.sh-panel / .sh-side widths) would place the v2 panels as boxes again — v2's panels are grid cells of
   .sh-page, which takes the touch Settings frame itself (12 px sides, 58 px under the header, 8 px from the bottom) */
html.is-touch .iw-shop.hs-set.sh .hs-panel { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; min-width: 0; height: auto; max-height: none; translate: none; }
html.is-touch .iw-shop.hs-set.sh .sh-panel { height: 100%; }
html.is-touch .iw-shop .sh-side { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; }
.sh-page { grid-template-rows: minmax(0, 1fr); }
html.is-touch:not(.is-tablet) .iw-shop .sh-page { left: max(12px, var(--sal, 0px)); right: max(12px, var(--sar, 0px)); top: 58px; bottom: 8px; }
html.is-touch:not(.is-tablet) .iw-shop .sh-wallet { top: 8px; right: max(12px, var(--sar, 0px)); }
@media (max-height: 520px) and (min-aspect-ratio: 6/5) { html.is-touch:not(.is-tablet) .iw-shop .sh-page { grid-template-columns: minmax(0, 1fr) 40%; } }
@media (max-width: 1000px) and (min-height: 521px), (max-aspect-ratio: 6/5) { .sh-page { grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* v2 tuning: more columns on a wide screen (the tiles a little smaller), the tabs' words fit, the details' actions in a foot */
.sh-grid { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(var(--u) * 10.6)), 1fr)); }
.sh-card__art { width: 58%; }
@media (max-width: 1700px) { .sh-tabs .hs-tab i { display: none; } }
.sh-stage { flex: 0 1 40%; }
.hs-set.sh .sh-dpanel { flex: 1 1 60%; }
.sh-dfoot { justify-content: flex-start; flex-wrap: wrap; gap: calc(var(--u) * .5); }
.sh-dfoot .sh-d__acts { margin-top: 0; padding-top: 0; }
.sh-dfoot:has(.sh-d__acts:empty) { display: none; }

.sh-tabs .hs-tab i { display: none; }
.sh-grid { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(var(--u) * 9.4)), 1fr)); }
.sh-dfoot { flex-wrap: nowrap; }
.sh-dfoot .sh-d__acts { flex-wrap: wrap; width: 100%; }
.sh-dfoot .iw-btn { flex: 1 1 auto; min-width: 0; font-size: max(13px, calc(var(--u) * .9)); padding-left: calc(var(--u) * .7); padding-right: calc(var(--u) * .7); }
.sh-dfoot .iw-btn__sub { font-size: .78em; }
@media (max-height: 520px) and (min-aspect-ratio: 6/5) { .sh-dfoot .sh-d__acts { flex-wrap: wrap; } .sh-dfoot .iw-btn { flex: 1 1 100%; } }
@media (max-width: 1000px) and (min-height: 521px), (max-aspect-ratio: 6/5) { .sh-dfoot .sh-d__acts { flex-wrap: wrap; } }
/* a price button's words wrap (fr POSSÉDER POUR TOUJOURS, es TUYO PARA SIEMPRE) instead of being cut */
.sh .sh-pb em, html.is-touch .sh .sh-pb em { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.12; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-height: 520px) and (min-aspect-ratio: 6/5) { .sh-dfoot .iw-btn__icon { display: none; } .sh-dfoot .iw-btn { padding-left: 8px; padding-right: 8px; } }
.sh-dfoot .iw-btn, .sh-dfoot .iw-btn * { white-space: normal; }
.sh-dfoot .iw-btn__text { min-width: 0; flex: 1 1 auto; }
.sh-dfoot .sh-buy__p { white-space: nowrap; }

/* (the kit's button label rule keeps one line: the shop's details buttons wrap their words; tile prices shrink, never split a word) */
#ui-root .iw-shop .sh-dfoot .iw-btn .iw-btn__label, #ui-root .iw-shop .sh-dfoot .iw-btn .iw-btn__sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
.iw-ui .iw-shop .sh-dfoot .iw-btn { height: auto; min-height: max(44px, calc(var(--u) * 3.2)); }
html.is-touch:not(.is-tablet) .iw-shop .sh-card .sh-pb em { font-size: 10px; letter-spacing: .02em; }
/* a tile's two prices: stacked full-width rows (label left, price right) — every language's words fit the tile */
.sh-card .sh-card__buy { flex-direction: column; gap: .3em; }
.sh-card .sh-pb { flex: none; flex-direction: row; justify-content: space-between; align-items: center; gap: .5em; padding: .45em .65em; }
.sh .sh-card .sh-pb em, html.is-touch .sh .sh-card .sh-pb em { text-align: left; max-width: none; flex: 1 1 auto; min-width: 0; }
.sh-card .sh-pb__p { flex: none; }