/* The STORE (src/store.js; owner 2026-10-19, layout A of the Workspace card «Negozio campioni e skin»): FEATURED, CHAMPIONS
   and the champion's page, DIAMONDS. Laid out at the 1920 x 1080 reference in #vstore (1612 x 868 right of the rail),
   scaled by --bh-k; a phone (html.bh-phone, bh-phone.css conventions: --t44 the smallest thumb target, --f12 the
   smallest text) and a tablet (html.bh-touch) at the bottom. */
#m.bh #vstore{flex-direction:column}
#m.bh:has(#vstore[style*="flex"]) #lbShop{display:none}          /* the wallet's + is DIAMONDS again: one place */
/* one opaque panel holds the whole screen, the tabs on top (B117: no STORE title, the rail's lit tab says it) (owner 22/10, F1; bh-ui.css «Menu screens») */
#m.bh .sto{display:flex;flex-direction:column;gap:var(--space-5);box-sizing:border-box;width:100%;height:100%;min-height:0;padding:var(--space-6);overflow:hidden}
#m.bh .sto-head{flex:none;display:flex;align-items:center;gap:var(--space-8);min-height:72px}
#m.bh .sto-tabs{border-bottom:0;gap:var(--space-2)}
#m.bh .sto-tabs .bh-tab{padding:var(--space-2) var(--space-4) var(--space-3)}
#m.bh .sto-body{flex:1;min-height:0;display:flex}
#m.bh .sto-body>*{flex:1;min-width:0;min-height:0}
#m.bh .sto-sec{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin:0 0 var(--space-3)}
#m.bh .sto-sec h3{margin:0;font:800 22px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-sec>span:not(.bh-tag){display:inline-flex;align-items:center;gap:6px;font:800 18px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-owned{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;font:800 22px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--green)}

/* ---- FEATURED: the bundle, the skin of the week, the day's deals --------------------------------------------- */
#m.bh .sto[data-view="featured"] .sto-body{overflow-y:auto;overscroll-behavior:contain}
/* ---- COMING SOON (B129, the store shut at launch): the bundle's key art on the right, the words on the left ---- */
#m.bh .sto-soon{position:relative;flex:1;min-height:0;display:flex;align-items:center;overflow:hidden;border-radius:var(--radius-lg);
 background:linear-gradient(90deg,var(--surface-2) 30%,color-mix(in srgb,var(--tint,var(--pink)) 26%,var(--surface-1)));border:var(--border-hair) solid var(--line)}
#m.bh .sto-soon-art{position:absolute;inset:0 0 0 38%;background-size:cover;background-position:62% center;opacity:.55;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
/* the battle pass's (B129c): a champion's portrait, whole, in a column on the right */
#m.bh .sto-soon.is-portrait .sto-soon-art{inset:0 0 0 auto;width:44%;background-position:center 18%;opacity:.8;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
#m.bh .sto-soon-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-8) var(--space-12);max-width:62%}
#m.bh .sto-soon-title{margin:0;font:italic 900 96px/.92 var(--font-ui);text-transform:uppercase;color:var(--ink);-webkit-text-stroke:3px var(--button-border);paint-order:stroke fill}
#m.bh .sto-soon-sub{margin:0;font:700 24px/1.3 var(--font-ui);letter-spacing:.03em;color:var(--ink-2);max-width:640px}
#m.bh .sto-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto minmax(300px,1fr);gap:var(--space-5);align-content:start}
/* the bundle (owner 19/10, like Valorant's): full-bleed key art, the collection's name big over its left, the time left,
   the items with their own prices and the bundle's price on the right. The placeholder (no key art yet): the champion's
   outline in fire on the game's pink and yellow rays */
#m.bh .sto-bundle{position:relative;grid-column:1/-1;grid-row:1;display:flex;align-items:stretch;justify-content:space-between;gap:var(--space-5);min-height:300px;overflow:hidden;cursor:pointer;
 border-radius:var(--radius-lg);border:3px solid var(--button-border);box-shadow:var(--shadow-panel);
 background:radial-gradient(circle at 46% 72%,color-mix(in srgb,var(--yellow) 55%,transparent),transparent 40%),radial-gradient(circle at 40% 28%,color-mix(in srgb,var(--pink-bright) 62%,transparent),transparent 58%),
  repeating-conic-gradient(from 0deg at 44% 62%,color-mix(in srgb,var(--ink) 6%,transparent) 0 8deg,transparent 8deg 20deg),linear-gradient(100deg,var(--surface-0),var(--pink-tint) 60%,var(--surface-0))}
#m.bh .sto-bundle::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--surface-0) 70%,transparent),transparent 34%,transparent 58%,color-mix(in srgb,var(--surface-0) 80%,transparent))}
/* the key art (16:9 without words, the figure right of centre, its head in the top third): in the short card a close-up
   of the head between the name and the items; in the bundle's page all of it, the wings in */
#m.bh .sto-bundle:not(.is-soon) .sto-bundle-art{inset:0;width:auto;background-size:120% auto;background-position:100% 21%}
#m.bh .sto-bundle-hero:not(.is-soon) .sto-bundle-art{background-size:cover;background-position:62% center}
#m.bh .sto-bundle-art{position:absolute;left:30%;top:-6%;bottom:-34%;width:30%;background-color:transparent;background-size:contain;background-position:center top}
#m.bh .sto-bundle.is-soon .sto-bundle-art{filter:brightness(0) drop-shadow(0 0 3px var(--yellow)) drop-shadow(0 0 28px var(--pink-bright));opacity:.92}
#m.bh .sto-bundle-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-6)}
#m.bh .sto-bundle-kicker{font:800 20px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-bundle-name{margin:0;font:italic 900 96px/.88 var(--font-ui);text-transform:uppercase;-webkit-text-stroke:3px var(--button-border);paint-order:stroke fill;max-width:9ch}
#m.bh .sto-bundle-left{margin-top:auto}
#m.bh .sto-bundle-side{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:var(--space-3);padding:var(--space-5)}
#m.bh .sto-parts{display:grid;grid-template-columns:repeat(4,128px);gap:var(--space-2)}
#m.bh .sto-part{display:flex;flex-direction:column;align-items:flex-start;gap:2px;height:150px;padding:var(--space-2);overflow:hidden;
 background:linear-gradient(180deg,color-mix(in srgb,var(--rarity) 45%,var(--surface-2)),var(--surface-1));border:2px solid color-mix(in srgb,var(--rarity) 70%,var(--button-border));border-radius:var(--radius-md)}
#m.bh .sto-part-art{flex:1;align-self:stretch;min-height:0;display:grid;place-items:center;background-color:transparent;background-size:contain;background-position:center bottom;font-size:52px}
#m.bh .sto-part-name{font:800 17px/1 var(--font-ui);letter-spacing:.05em;text-transform:uppercase}
#m.bh .sto-part-price{display:inline-flex;align-items:center;gap:4px;font:800 17px/1 var(--font-ui);color:var(--ink-2)}
#m.bh .sto-bundle-price{display:flex;align-items:center;gap:var(--space-3)}
#m.bh .sto-bundle-full{display:inline-grid;place-items:center;height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);background:var(--scrim);font:800 26px/1 var(--font-ui);color:var(--ink-2)}
#m.bh .sto-bundle-off{display:inline-grid;place-items:center;height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);background:var(--yellow);color:var(--on-yellow);font:900 26px/1 var(--font-ui)}
#m.bh .sto-bundle-buy:disabled{opacity:.6;cursor:default}
/* its page: the art big on the left, the items and the one button on the right */
#m.bh .sto-bundle-hero{grid-row:auto;cursor:default;min-height:0;padding:0;
 background:radial-gradient(circle at 50% 74%,color-mix(in srgb,var(--yellow) 50%,transparent),transparent 38%),radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--pink-bright) 60%,transparent),transparent 58%),
  repeating-conic-gradient(from 0deg at 50% 60%,color-mix(in srgb,var(--ink) 6%,transparent) 0 8deg,transparent 8deg 20deg),linear-gradient(180deg,var(--surface-0),var(--pink-tint))}
#m.bh .sto-bundle-hero .sto-bundle-art{left:22%;width:56%;top:4%;bottom:-20%}
#m.bh .sto-bundle-hero .sto-bundle-name{font-size:120px}
#m.bh .sto-bparts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
#m.bh .sto-bparts .sto-part{height:190px}
#m.bh .sto-week{position:relative;grid-row:2;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-6);
 background:radial-gradient(circle at 72% 60%, color-mix(in srgb,var(--tint) 40%,transparent), transparent 62%),linear-gradient(160deg,var(--surface-2),var(--surface-0) 80%);
 border:var(--border-hair) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel)}
#m.bh .sto-week-tag{position:relative;z-index:1}
#m.bh .sto-week-name{position:relative;z-index:1;margin:var(--space-2) 0 0;font:italic 900 84px/.9 var(--font-ui);text-transform:uppercase;-webkit-text-stroke:3px var(--button-border);paint-order:stroke fill;max-width:55%}
#m.bh .sto-week-sub{position:relative;z-index:1;font:800 22px/1.1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-week-art{position:absolute;right:-2%;top:6%;bottom:-2%;width:52%;background-color:transparent;background-size:contain;background-position:center bottom}
#m.bh .sto-week.is-soon .sto-week-art{filter:brightness(0) drop-shadow(0 0 2px var(--tint)) drop-shadow(0 0 22px color-mix(in srgb,var(--tint) 70%,transparent));opacity:.95}
#m.bh .sto-seeit{position:relative;z-index:1;margin-top:auto}
#m.bh .sto-deals{grid-row:2;display:flex;flex-direction:column;min-height:0}
#m.bh .sto-deal-row{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
#m.bh .sto-deal{position:relative;display:flex;flex-direction:column;gap:var(--space-1);min-height:0;padding:var(--space-3);overflow:hidden;
 background:linear-gradient(180deg,color-mix(in srgb,var(--rarity) 55%,var(--surface-2)),color-mix(in srgb,var(--rarity) 18%,var(--surface-0)) 85%);
 border:3px solid color-mix(in srgb,var(--rarity) 70%,var(--button-border));border-radius:var(--radius-lg);box-shadow:inset 0 -5px 0 rgba(0,0,0,.3)}
#m.bh .sto-deal-art{flex:1;min-height:90px;display:grid;place-items:center}
#m.bh .sto-deal-art .st-cos-frame{display:block;width:110px;height:110px;border-radius:var(--radius-md);background:rgba(0,0,0,.25)}
#m.bh .sto-art-icon{background:center 15% / 76% no-repeat;border-radius:var(--radius-md)}
#m.bh .sto-art-pic{align-self:stretch;background-size:contain;background-position:center;background-repeat:no-repeat}
#m.bh .sto-art-ico,.sto-pop-item .sto-art-ico{font-size:64px;color:var(--ink-2)}
#m.bh .sto-art-title{padding:0 var(--space-2);font:italic 900 34px/1 var(--font-ui);text-transform:uppercase;text-align:center;-webkit-text-stroke:2px var(--button-border);paint-order:stroke fill}
#m.bh .sto-deal-name{font:800 22px/1.05 var(--font-ui);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m.bh .sto-deal-kind{font:700 15px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-deal .sto-buy{min-width:0;width:100%;margin-top:var(--space-2);height:50px}
#m.bh .sto-deal .sto-owned{margin-top:var(--space-2);height:50px;background:rgba(0,0,0,.35);border-radius:var(--radius-sm)}

/* ---- CHAMPIONS: the champions big; one opens its page --------------------------------------------------------- */
#m.bh .sto-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4);min-height:0}
#m.bh .sto-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:var(--space-4) var(--space-4) 0;overflow:hidden;text-align:left;
 background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 78%,var(--button-border)),color-mix(in srgb,var(--tint) 34%,var(--button-border)) 88%);border:3px solid var(--button-border);border-radius:var(--radius-lg);
 box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 6px 0 rgba(0,0,0,.35);transition:transform 120ms,filter 120ms}
#m.bh .sto-card:hover{transform:translateY(-3px);filter:brightness(1.06)}
#m.bh .sto-card-name{position:relative;z-index:1;font:italic 900 48px/.95 var(--font-ui);text-transform:uppercase;-webkit-text-stroke:3px var(--button-border);paint-order:stroke fill}
#m.bh .sto-card-role{position:relative;z-index:1;margin-top:6px;font:800 17px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-card-art{flex:1;align-self:stretch;min-height:0;margin:var(--space-3) calc(-1 * var(--space-4)) 0;background-color:transparent;background-size:contain;background-position:center bottom}
#m.bh .sto-lock{position:absolute;top:var(--space-4);right:var(--space-4);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--button-border);font-size:24px}
#m.bh .sto-card-foot{align-self:stretch;display:flex;align-items:center;justify-content:center;height:84px;margin:0 calc(-1 * var(--space-4));background:color-mix(in srgb,var(--button-border) 90%,transparent)}
/* B477b (owner 07/11: «fai partire l'immagine dei personaggi nella parte bassa e poi va bene la v1»): on a phone the
   portrait fills the card from its foot (no gap of the card's colour under the bar), the price bar over the portrait's foot;
   a PC keeps its card (the portrait already stands on the bar there: a portrait from the card's foot left the top empty) */
html.bh-phone #m.bh .sto-grid .sto-card-art{position:absolute;inset:0;margin:0;background-size:100% auto;background-position:center bottom}
html.bh-phone #m.bh .sto-grid :is(.sto-card-name,.sto-card-role){position:relative;z-index:1}
html.bh-phone #m.bh .sto-grid .sto-card-foot{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:1;gap:var(--space-2);background:color-mix(in srgb,var(--button-border) 82%,transparent)}
#m.bh .sto-card-foot{gap:var(--space-2)}
#m.bh .sto-cprice{display:inline-flex;align-items:center;gap:var(--space-2);font:900 34px/1 var(--font-ui);font-variant-numeric:tabular-nums}

/* the champion's page: the figure on the left, its things and the one button on the right */
#m.bh .sto-head.is-champ{gap:var(--space-5)}
#m.bh .sto-back{height:64px;font-size:24px;gap:var(--space-2)}
#m.bh .sto-picks{display:flex;gap:var(--space-2)}
#m.bh .sto-pick{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-md);border:3px solid var(--button-border);background:var(--tint) center 12% / cover no-repeat;font-size:26px;color:var(--ink);
 box-shadow:0 3px 0 rgba(0,0,0,.4)}
#m.bh .sto-pick .bh-i{filter:drop-shadow(0 2px 0 var(--button-border))}
#m.bh .sto-pick.is-on{outline:3px solid var(--ink);outline-offset:2px}
#m.bh .sto-champ{display:flex;gap:var(--space-5)}
#m.bh .sto-stage{position:relative;flex:1;min-width:0;overflow:hidden;padding:var(--space-6);border-radius:var(--radius-lg);
 background:radial-gradient(ellipse at 50% 62%, color-mix(in srgb,var(--tint) 45%,transparent), transparent 64%),linear-gradient(180deg,var(--surface-2),var(--surface-0))}
#m.bh .sto-cname{position:relative;z-index:1;margin:0;font:italic 900 96px/.9 var(--font-ui);text-transform:uppercase;-webkit-text-stroke:3px var(--button-border);paint-order:stroke fill}
#m.bh .sto-crole{position:relative;z-index:1;display:block;margin-top:var(--space-2);font:800 24px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* B477b (owner 07/11, set «B477 · Revisione UI/UX con taste-skill»): the champion's page. Left, the champion big — its
   full-body picture standing on the stage's foot (from the bottom: no gap under it), name, role, weapons, the buy bar;
   right, ABILITIES always on view: the picked one's clip big, each ability a row with its key, cooldown and text; the
   store's things under them (shut: one line, COMING SOON) */
#m.bh .sto-cpage .sto-stage{display:flex;flex-direction:column;align-items:flex-start;background:radial-gradient(ellipse at 70% 72%, color-mix(in srgb,var(--tint) 55%,transparent), transparent 62%),linear-gradient(180deg,var(--surface-2),var(--surface-0))}
#m.bh .sto-hero{position:absolute;right:2%;bottom:0;height:100%;aspect-ratio:3/4;max-width:70%;background-color:transparent;background-size:contain;background-position:center bottom;background-repeat:no-repeat;pointer-events:none}
#m.bh .sto-cpage .sto-stage>:not(.sto-hero){position:relative;z-index:1}
#m.bh .sto-guns-l{display:block;margin-top:var(--space-5);font:800 17px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-guns{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2);max-width:52%}
#m.bh .sto-guns .bh-chip{background:color-mix(in srgb,var(--surface-0) 80%,transparent)}
#m.bh .sto-cpage .sto-stage .sto-bar{align-self:stretch;margin-top:auto;max-width:58%;padding:var(--space-4);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-0) 88%,transparent)}
#m.bh .sto-cpage .sto-side{width:46%;gap:var(--space-3)}
#m.bh .sto-absec{margin:0}
#m.bh .sto-absec h3{color:var(--ink)}
#m.bh .sto-abmain{flex:1 1 0;min-height:0;display:flex}
#m.bh .sto-clipbox{flex:1;min-width:0;min-height:120px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-0) center / cover no-repeat}   /* the clip's still under it while it loads */
#m.bh .sto-clip{display:block;width:100%;height:100%;object-fit:cover}
#m.bh .sto-abtext{display:none}
#m.bh .sto-abs{flex:none;display:flex;flex-direction:column;gap:var(--space-2)}
#m.bh .sto-abi{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:center;width:100%;padding:var(--space-3);text-align:left;cursor:pointer;color:var(--ink);
 background:var(--surface-1);border:var(--border-strong) solid var(--line);border-radius:var(--radius-md)}
#m.bh .sto-abi:hover{border-color:var(--line-strong)}
#m.bh .sto-abi.is-on{border-color:var(--yellow)}
#m.bh .sto-abi-ico{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-md);background:var(--surface-2);border:var(--border-strong) solid var(--line-strong)}
#m.bh .sto-abi-ico svg,#m.bh .sto-abi-ico .bh-i{width:36px;height:36px;font-size:36px}
#m.bh .sto-abi kbd{position:absolute;right:-8px;bottom:-8px;min-width:26px;height:24px;padding:0 6px;display:grid;place-items:center;font:900 16px/1 var(--font-ui);
 background:var(--surface-3);color:var(--ink);border:2px solid var(--button-border);border-radius:var(--radius-sm)}
#m.bh .sto-abi.is-on kbd{background:var(--yellow);color:var(--on-yellow)}
#m.bh .sto-abi-txt{min-width:0}
#m.bh .sto-abi-head{display:flex;align-items:center;gap:var(--space-3)}
#m.bh .sto-abi-head b,#m.bh .sto-abtext b{font:900 26px/1 var(--font-ui);letter-spacing:.02em;text-transform:uppercase}
#m.bh .sto-abcd{display:inline-flex;align-items:center;gap:var(--space-1);font:800 18px/1 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-abi-blurb{display:block;margin-top:var(--space-1);font:600 19px/1.25 var(--font-ui);color:var(--ink-2)}
#m.bh .sto-soonrow{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-3);border-top:var(--border-hair) solid var(--line)}
#m.bh .sto-soonrow h3{margin:0;font:800 22px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-cpage .sto-cats{border-top:var(--border-hair) solid var(--line);padding-top:var(--space-3)}
#m.bh .sto-side{flex:none;width:560px;display:flex;flex-direction:column;min-height:0;padding:var(--space-5);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-lg)}
#m.bh .sto-cats{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-5)}
#m.bh .sto-cat .sto-sec h3{color:var(--ink)}
#m.bh .sto-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
#m.bh .sto-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:150px;padding:var(--space-2) var(--space-3);overflow:hidden;text-align:left;
 background:linear-gradient(180deg,color-mix(in srgb,var(--rarity,var(--line-strong)) 45%,var(--surface-2)),var(--surface-1));border:3px solid transparent;border-radius:var(--radius-md)}
#m.bh .sto-tile.is-on{border-color:var(--ink)}
#m.bh .sto-tile-art{position:absolute;inset:6px 6px 58px;background-color:transparent;background-size:contain;background-position:center bottom;background-repeat:no-repeat}
#m.bh .sto-tile-ico{display:grid;place-items:center;font-size:48px;color:var(--ink-2)}
#m.bh .sto-tile:has(.sto-tile-gun) .sto-tile-art{top:28px}                 /* under the gun's name */
#m.bh .sto-tile-gun{position:absolute;top:var(--space-2);left:var(--space-3);font:800 14px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-shadow:0 2px 0 var(--button-border)}
#m.bh .sto-tile-name{position:relative;font:800 19px/1.05 var(--font-ui);text-transform:uppercase}
#m.bh .sto-tile-price{position:relative;display:inline-flex;align-items:center;gap:4px;font:700 16px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-tile-soon{border:2px dashed var(--line-strong);background:transparent;justify-content:center;align-items:center;text-align:center}
#m.bh .sto-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4);margin-top:var(--space-4);border-top:var(--border-hair) solid var(--line)}
#m.bh .sto-bar b{display:block;font:900 30px/1 var(--font-ui);text-transform:uppercase}
#m.bh .sto-bar small{display:block;margin-top:4px;font:800 17px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-cta{flex:none;min-width:240px;height:68px;font-size:30px}
#m.bh .sto-cta .bh-i{font-size:30px}

/* ---- DIAMONDS ----------------------------------------------------------------------------------------------- */
#m.bh .sto-gems{display:flex;flex-direction:column}
#m.bh .sto-gems .sto-sec{justify-content:flex-start}
#m.bh .sto-pack-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
#m.bh .sto-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4) var(--space-4);overflow:hidden;
 background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--gem) 35%,transparent), transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--gem) 22%,var(--surface-1)),var(--surface-0) 85%);border:3px solid color-mix(in srgb,var(--gem) 55%,var(--surface-0));border-radius:var(--radius-lg)}
#m.bh .sto-pack-art .bh-i{font-size:120px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.4))}
#m.bh .sto-pack-n{font:900 44px/1 var(--font-ui)}
#m.bh .sto-pack-buy{width:100%;min-width:0;height:56px}
#m.bh .sto-pack-buy:disabled{opacity:.55}
#m.bh .sto-bonus{position:absolute;top:var(--space-3);right:var(--space-3)}
#m.bh .sto-note{margin:var(--space-5) 0 0;font:700 20px/1.2 var(--font-ui);color:var(--ink-2)}
#m.bh .sto-head .sto-soon-note{margin:0;display:flex;align-items:center;gap:var(--space-3)}

/* ---- the popup: a purchase to confirm --------------------------------------------------------- */
.sto-pop{position:fixed;inset:0;z-index:60;display:grid;place-items:center}
.sto-pop-scrim{position:absolute;inset:0;background:var(--scrim)}
.sto-pop-box{position:relative;width:calc(620px * var(--bh-k));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column}
.sto-pop .bh-modal-head{height:auto;min-height:calc(72px * var(--bh-k));padding:calc(8px * var(--bh-k)) calc(8px * var(--bh-k)) calc(8px * var(--bh-k)) calc(24px * var(--bh-k))}
.sto-pop .bh-modal-title{font-size:calc(40px * var(--bh-k))}
.sto-pop .bh-close{width:max(44px,calc(56px * var(--bh-k)));height:max(44px,calc(56px * var(--bh-k)));font-size:calc(32px * var(--bh-k))}
.sto-pop-body{display:flex;flex-direction:column;align-items:center;gap:calc(20px * var(--bh-k));padding:calc(24px * var(--bh-k))}
.sto-pop-art{width:calc(220px * var(--bh-k));height:calc(260px * var(--bh-k));border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--tint) 60%,transparent),transparent 70%) ,var(--surface-0);
 background-size:contain,auto;background-position:center bottom;background-repeat:no-repeat}
.sto-pop-art[style*="url("]{background-size:contain}
.sto-pop-item{display:grid;place-items:center;width:calc(220px * var(--bh-k));height:calc(160px * var(--bh-k));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--rarity) 40%,var(--surface-1))}
.sto-pop-item .sto-deal-art{min-height:0}
.sto-pop-item:has(.sto-art-pic){height:calc(260px * var(--bh-k))}
.sto-pop-item .sto-art-pic{width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat}
.sto-pop-item .st-cos-frame{display:block;width:calc(110px * var(--bh-k));height:calc(110px * var(--bh-k));border-radius:var(--radius-md)}
.sto-pop-item .sto-art-icon{width:calc(140px * var(--bh-k));height:calc(140px * var(--bh-k));background:center 15% / cover no-repeat}
.sto-pop-item .sto-art-title{font:italic 900 calc(36px * var(--bh-k))/1 var(--font-ui);text-transform:uppercase;-webkit-text-stroke:2px var(--button-border);paint-order:stroke fill}
.sto-pop .sto-pop-buy{width:100%;min-width:0;height:max(48px,calc(72px * var(--bh-k)));font-size:calc(40px * var(--bh-k))}
.sto-pop .sto-pop-buy .bh-i{font-size:calc(40px * var(--bh-k))}

/* the PROFILE's COLLECTION tab (profileui.js): the cards bh-lobby.css draws for #m, in the profile's modal */
#profile .sto-coll{display:flex;flex-direction:column;gap:var(--space-4)}
#profile .sto-coll .st-cos-kind h4{margin:0 0 var(--space-2);font:800 18px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
#profile .sto-coll .st-cos-kind h4 span{color:var(--ink-3);margin-left:var(--space-2)}
#profile .sto-coll .st-cos-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
#profile .sto-coll .st-cos{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:120px;min-height:120px;padding:var(--space-2);
 background:var(--surface-2);border:2px solid color-mix(in srgb,var(--rarity,var(--line)) 60%,var(--line));border-radius:var(--radius-md)}
#profile .sto-coll .st-cos small{font:700 12px/1.1 var(--font-ui);letter-spacing:.03em;text-transform:uppercase;text-align:center;color:var(--ink-2)}
#profile .sto-coll .st-cos.is-locked{cursor:default;border-color:color-mix(in srgb,var(--rarity,var(--line)) 30%,var(--line))}
/* MIG-ui-store-1 (31/10): a locked card dims its picture only and keeps its rarity's border, dimmed (all of it was at 38 %);
   its name stays readable in --ink-3, and on a PC the names never under the desktop's labels' floor (--f11d, B273: 8.5 px real at 1366 before) */
#profile .sto-coll .st-cos.is-locked > :not(small){opacity:.38}
#profile .sto-coll .st-cos.is-locked small{color:var(--ink-3)}
html:not(.bh-touch) #profile .sto-coll .st-cos small{font-size:max(12px,var(--f11d))}
#profile .sto-coll .st-cos.is-on{box-shadow:0 0 0 3px var(--yellow);border-color:var(--yellow)}
#profile .sto-coll .st-cos-icon{width:64px;height:64px;border-radius:var(--radius-sm);background:var(--surface-3) center 10% / cover no-repeat}
#profile .sto-coll .st-cos-frame{width:60px;height:60px;border-radius:var(--radius-sm);background:var(--surface-3)}
#profile .sto-coll .st-cos-pic{width:96px;height:96px;background:center bottom / contain no-repeat}
#profile .sto-coll .st-cos-ico{display:grid;place-items:center;font-size:44px;color:var(--ink-2)}
#profile .sto-coll .st-cos-title{min-height:64px;display:grid;place-items:center;font:900 16px/1.1 var(--font-ui);text-transform:uppercase;text-align:center;color:var(--rarity,var(--ink))}

/* ---- tablet: the desktop's layout a little tighter; touch targets 44 CSS px ----------------------------------------- */
html.bh-touch #m.bh :is(.sto-deal-kind,.sto-left,.sto-tile-price,.sto-tile-gun,.sto-sec>span,.sto-card-role){font-size:max(14px,var(--f12))}
html.bh-touch #m.bh :is(.sto-pick,.sto-tile,.sto-seeit){min-height:var(--t44)}
html.bh-touch #m.bh .sto-abi kbd{display:none}
html.bh-touch #m.bh .sto-pick{min-width:var(--t44)}
html.bh-touch:not(.bh-phone) #m.bh .sto-side{width:500px}
html.bh-touch:not(.bh-phone) #m.bh .sto-grid .sto-card-name{font-size:40px}

/* ---- phone: one column that scrolls (bh-phone.css), each block full width ------------------------------------------ */
html.bh-phone #m.bh .sto{height:auto;gap:var(--space-3);padding:var(--space-4)}
html.bh-phone #m.bh .sto-head{gap:var(--space-4);min-height:0;flex-wrap:wrap}
html.bh-phone #m.bh .sto-tabs .bh-tab{font-size:26px}
html.bh-phone #m.bh .sto-body{display:block}
html.bh-phone #m.bh .sto[data-view="soon"]{height:100%}
html.bh-phone #m.bh [data-view="soon"] .sto-body{display:flex}
html.bh-phone #m.bh .sto-soon-main{max-width:78%;padding:var(--space-6)}
html.bh-phone #m.bh .sto-soon-title{font-size:56px}
html.bh-phone #m.bh .sto-soon-sub{font-size:max(18px,var(--f12))}
/* the deals in the first screen beside the skin of the week */
html.bh-phone #m.bh .sto-feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);grid-template-rows:auto auto}
html.bh-phone #m.bh .sto-bundle{min-height:250px}
html.bh-phone #m.bh .sto-bundle-name{font-size:58px}
html.bh-phone #m.bh .sto-bundle-kicker{font-size:max(16px,var(--f12))}
html.bh-phone #m.bh .sto-parts{grid-template-columns:repeat(4,96px)}
html.bh-phone #m.bh .sto-part{height:120px}
html.bh-phone #m.bh .sto-part-name,html.bh-phone #m.bh .sto-part-price{font-size:max(15px,var(--f12))}
html.bh-phone #m.bh .sto-bundle-buy{height:max(52px,var(--t44))}
html.bh-phone #m.bh .sto-bundle-hero .sto-bundle-name{font-size:64px}
html.bh-phone #m.bh .sto-bparts .sto-part{height:130px}
html.bh-phone #m.bh .sto-week{grid-column:1;grid-row:2;min-height:340px;padding:var(--space-4)}
html.bh-phone #m.bh .sto-week-name{font-size:52px;max-width:none}
html.bh-phone #m.bh .sto-week-sub{font-size:max(18px,var(--f12))}
html.bh-phone #m.bh .sto-week-art{width:70%;top:30%}
html.bh-phone #m.bh .sto-deals{grid-column:2;grid-row:2}
html.bh-phone #m.bh .sto-deal-row{grid-template-columns:repeat(4,minmax(0,1fr))}
html.bh-phone #m.bh .sto-deal{min-height:250px}
html.bh-phone #m.bh .sto-deal-name{font-size:max(19px,var(--f12))}
html.bh-phone #m.bh .sto-deal .sto-buy,html.bh-phone #m.bh .sto-deal .sto-owned{height:max(48px,var(--t44))}
html.bh-phone #m.bh .sto-sec h3{font-size:max(20px,var(--f12))}
/* B477b (owner 07/11): the grid in one screen, the cards as today — the portrait the whole card, standing on its foot (from
   the bottom: no gap under the bar) — with the price bar of the PC over its foot: OWNED, or the lock and the coins to unlock */
html.bh-phone #m.bh .sto[data-view="champions"]{height:100%}
html.bh-phone #m.bh .sto[data-view="champions"] .sto-body{display:flex}
html.bh-phone #m.bh .sto-grid{flex:1;min-height:0;display:flex;gap:var(--space-3)}
html.bh-phone #m.bh .sto-card{flex:1;min-width:0;height:auto;padding:var(--space-3) var(--space-3) 0}
#m.bh .sto-card-foot .sto-lock{position:static;width:auto;height:auto;background:none;font-size:28px;color:var(--ink-2)}
html.bh-phone #m.bh .sto-card-foot .sto-lock{font-size:22px}
html.bh-phone #m.bh .sto-card-name{font-size:30px}
html.bh-phone #m.bh .sto-card-role{display:none}
html.bh-phone #m.bh .sto-card-foot{height:64px;margin:0 calc(-1 * var(--space-3))}
html.bh-phone #m.bh .sto-cprice{font-size:24px}
html.bh-phone #m.bh .sto-back{height:max(52px,var(--t44));font-size:22px}
html.bh-phone #m.bh .sto-pick{width:max(52px,var(--t44));height:max(52px,var(--t44))}
/* B477b: the champion's page in one screen — CHAMPIONS and the picks a rail on the left, the picture, then the clip with
   the picked ability's words beside it and the abilities as two tabs under them */
html.bh-phone #m.bh .sto[data-view="champion"]{height:100%;flex-direction:row}
html.bh-phone #m.bh .sto[data-view="champion"] .sto-head{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:space-between;gap:var(--space-1)}
html.bh-phone #m.bh .sto[data-view="champion"] .sto-head>*{flex:none}
/* the back button an arrow only: its word stays (its name for a screen reader) but out of the box, past the arrow */
html.bh-phone #m.bh .sto[data-view="champion"] .sto-back{width:max(52px,var(--t44));height:max(52px,var(--t44));padding:0 0 0 calc((max(52px,var(--t44)) - 28px) / 2 - 3px);justify-content:flex-start;gap:60px;overflow:hidden;white-space:nowrap}
html.bh-phone #m.bh .sto[data-view="champion"] .sto-back .bh-i{flex:none;font-size:28px}
html.bh-phone #m.bh .sto[data-view="champion"] .sto-picks{flex-direction:column;gap:var(--space-1)}
html.bh-phone #m.bh .sto[data-view="champion"] .sto-pick{width:max(48px,var(--t44));height:max(48px,var(--t44))}
html.bh-phone #m.bh .sto[data-view="champion"] .sto-body{display:flex;flex:1;min-width:0}
html.bh-phone #m.bh .sto-cpage{flex:1;min-width:0;gap:var(--space-3)}
html.bh-phone #m.bh .sto-cpage .sto-stage{flex:0 0 34%;padding:var(--space-3)}
html.bh-phone #m.bh .sto-cname{font-size:54px}
html.bh-phone #m.bh .sto-crole{font-size:max(16px,var(--f12))}
html.bh-phone #m.bh .sto-hero{right:-6%;height:92%;max-width:none}
html.bh-phone #m.bh :is(.sto-guns-l,.sto-guns){display:none}
html.bh-phone #m.bh .sto-cpage .sto-stage .sto-bar{max-width:none;padding:var(--space-2) var(--space-3)}
html.bh-phone #m.bh .sto-cpage .sto-stage .sto-cta{min-width:0;padding:0 var(--space-3)}
html.bh-phone #m.bh .sto-cpage .sto-side{flex:1;width:auto;padding:var(--space-3);gap:var(--space-3);overflow:hidden}
html.bh-phone #m.bh .sto-absec{display:none}
html.bh-phone #m.bh .sto-abmain{display:grid;grid-template-columns:58% 1fr;gap:var(--space-3);align-items:stretch}
html.bh-phone #m.bh .sto-clipbox{min-height:0}
html.bh-phone #m.bh .sto-abtext{display:block;min-width:0;overflow:hidden}
html.bh-phone #m.bh .sto-abtext header{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1)}
html.bh-phone #m.bh .sto-abcd{font-size:max(16px,var(--f12))}
html.bh-phone #m.bh .sto-abtext p{margin:var(--space-2) 0 0;font:600 max(17px,var(--f12))/1.25 var(--font-ui);color:var(--ink-2)}
html.bh-phone #m.bh .sto-abs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
html.bh-phone #m.bh .sto-abi{height:max(60px,var(--t44));padding:0 var(--space-3);gap:var(--space-3)}
html.bh-phone #m.bh .sto-abi-ico{width:44px;height:44px;border:0;background:none}
html.bh-phone #m.bh .sto-abi-ico svg{width:30px;height:30px}
html.bh-phone #m.bh :is(.sto-abi-blurb,.sto-abi .sto-abcd){display:none}
html.bh-phone #m.bh .sto-abi-head b{font-size:24px}
html.bh-phone #m.bh .sto-soonrow{padding-top:var(--space-2)}
html.bh-phone #m.bh .sto-soonrow h3{font-size:max(18px,var(--f12))}
html.bh-phone #m.bh .sto-bpage .sto-side{flex:1;width:auto;padding:var(--space-3)}
html.bh-phone #m.bh .sto-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
html.bh-phone #m.bh .sto-tile{height:120px}
html.bh-phone #m.bh .sto-tile-name{font-size:max(17px,var(--f12))}
html.bh-phone #m.bh .sto-bar b{font-size:26px}
html.bh-phone #m.bh .sto-bar small{font-size:max(14px,var(--f12))}
html.bh-phone #m.bh .sto-cta{min-width:200px;height:max(60px,var(--t44));font-size:26px}
html.bh-phone #m.bh .sto-pack-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
html.bh-phone #m.bh .sto-pack-art .bh-i{font-size:80px}
html.bh-phone #m.bh .sto-pack-n{font-size:36px}
html.bh-phone #m.bh .sto-pack-buy{height:max(52px,var(--t44))}
html.bh-phone #m.bh .sto-note{font-size:max(18px,var(--f12))}
#profile .pf-coll{flex:1;min-height:0;overflow-y:auto}
/* the tablet's thumbs: the tabs and the price buttons at 44 CSS px at least (the reference layout draws them at 41) */
html.bh-touch #m.bh .sto-tabs .bh-tab{min-height:var(--t44)}
html.bh-touch #m.bh :is(.sto-deal .sto-buy,.sto-deal .sto-owned,.sto-pack-buy,.sto-bundle-buy){height:auto;min-height:max(50px,var(--t44))}
/* the profile's COLLECTION on a phone or a tablet: the labels at 12 CSS px, and six tabs that fit (mobile_menus) */
html:is(.bh-touch,.bh-tablet) #profile .sto-coll .st-cos small{font-size:max(12px,var(--f12))}   /* B346: also a tablet with a mouse (11.2 px) */
html.bh-touch #profile .sto-coll .st-cos{width:max(120px,calc(96px / var(--bh-k)))}
html.bh-touch:not(.bh-phone) #profile .pf-tabs{gap:4px}
html.bh-touch:not(.bh-phone) #profile .pf-tabs .bh-cattab{flex:1 1 auto;min-width:0;padding:0 6px;gap:6px;letter-spacing:.01em;font-size:max(16px,var(--f12))}
/* the profile's name change (owner 20/10): one button, FREE or the price in diamonds, then CONFIRM */
#profile #pfNameGo{flex:none;height:44px;min-width:0;margin-left:var(--space-2);padding:0 var(--space-3);font-size:20px}
#profile #pfNameGo.is-confirm{background:var(--pink-bright);color:var(--ink)}

/* B273 · CrazyGames' small desktop windows (821×462, 907×510: --bh-k at its 0.5 floor): this screen's small texts never under
   ~11 px real, as B269b did for the home (--f11d, bh-ui.css). Each keeps its own size where that is already more: 1920 and
   touch screens are unchanged */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .sto-head .bh-tag{font-size:max(19px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .sto-sec .bh-tag{font-size:max(18px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .sto-note{font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(.sto-card-role,.sto-abi kbd,.sto-bar small){font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(.sto-owned,.sto-sec h3){font-size:max(22px,var(--f11d))}
/* MIG-ui-desktop-3 (B273; with the click areas of MIG-ui-desktop-2 on the board): the coming-soon page's tag (the BATTLE PASS screen and the shut store, soonPage) read 9.5 px real at 821 x 462;
   the skin of the week's tag likewise, once the store opens */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(.sto-soon-tag,.sto-week-tag){font-size:max(19px,var(--f11d))}
/* MIG-ui-store-3 (regia 01/11) · the same small desktop windows (its FREE THIS WEEK tag gone with B372 round 4)
   too (9.5 px at 821×462; the BATTLE PASS page's tag is MIG-ui-desktop-3's, above). 1920 and touch screens are unchanged */
/* the COMING SOON by SKINS AND ITEMS (and the diamonds'): .sto-sec>span (the sections' grey labels) took the .bh-tag too
   and painted its word --ink-2 on the yellow (contrast 1.6:1, measured); now it is the Design System's .bh-tag-yellow
   (--on-yellow, letters .04em, icon gap --space-1), at the 18 px it had (a tablet with a mouse would otherwise get 19) */
#m.bh .sto-sec>.bh-tag{font-size:18px}
/* the BATTLE PASS page on a phone: its words stop where the champion's art begins (the art takes the right 44%) */
html.bh-phone #m.bh .sto-soon.is-portrait .sto-soon-main{max-width:58%}
/* MIG-ui-store-4 (regia 01/11) · a champion card's role under its name (PC and tablet; phones hide it): --ink-2 straight on
   the card's tint read 1.0:1 on KESTREL's green, 1.3:1 on RIVET's yellow, 3.0:1 at best (BRICK). Now the name's own
   treatment: --ink with the dark --button-border outline, a little thinner for the small text */
#m.bh .sto-card-role{color:var(--ink);-webkit-text-stroke:2px var(--button-border);paint-order:stroke fill}
/* MIG-ui-store-4 r2 (owner 01/11, set «Migliorie · ui-store · giro 4»: «Togli l'ombra che c'è nella parte alta delle immagini»):
   the card's gradient darkened toward the portrait, a dark band above its bright background. The card is the champion's own
   colour, flat: the upper part continues the portrait (and the 3D render stands on the same colour). (The FREE THIS WEEK tag, gone since B372 round 4)
   keeps its edge on the yellow and green cards with the dark outline of the name */
#m.bh .sto-card{background:var(--tint)}
/* MIG-ui-store-4 r3 (owner 01/11, set «Migliorie · ui-store · giro 4» giro 2: «Puoi utilizzare l'esatto sfondo che hanno i
   personaggi»): the card is the exact background of its portrait (assets/ui/portrait-*.webp, PORTRAIT_ART in src/lobby.js;
   the most frequent colour of each image's edges), not CLASS_TINT, which stays for the rest of the game. Registered in the
   Design System card (Fondo dei ritratti, 01/11) */
#m.bh .sto-card[data-champ=SOLDATO]{--portrait-bg:#fa2442}
#m.bh .sto-card[data-champ=TANK]{--portrait-bg:#0367fd}
#m.bh .sto-card[data-champ=MARKSMAN]{--portrait-bg:#78fa54}
#m.bh .sto-card[data-champ=LEGGERO]{--portrait-bg:#f31bc8}
#m.bh .sto-card[data-champ=TECHNICIAN]{--portrait-bg:#fdbe1b}
#m.bh .sto-card{background:var(--portrait-bg,var(--tint))}
/* B372 round 4 (owner 02/11, from B383's «negozio-lucchetto»: «li farei in grigio quelli da sbloccare … togliamo il concetto di FREE THIS
   WEEK»): a locked champion's card is grey (the portrait and its colour desaturated, as the lobby's picker), the lock where it was */
#m.bh .sto-card.is-locked{filter:grayscale(1) brightness(.7)}
#m.bh .sto-card.is-locked:hover{filter:grayscale(.6) brightness(.85)}
/* (round 5: the champion page's row of portraits too; the one shown keeps its colour) */
#m.bh .sto-pick.is-locked:not(.is-on){filter:grayscale(1) brightness(.7)}
/* B372 round 4: the store's COMING SOON tags open the SKINS · COMING SOON window (soonpop.js): a bare button around the tag (the
   tag looks the same), as tall as a thumb on a touch screen */
#m.bh .sto-soonbtn{display:inline-flex;align-items:center;padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
#m.bh .sto-soonbtn:hover .bh-tag{filter:brightness(1.08)}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh .sto-soonbtn{min-height:var(--t44)}
/* (its tag keeps the sizes it had as the section's own child: 18 px, the touch screens' max(14px, --f12)) */
#m.bh .sto-sec .sto-soonbtn>.bh-tag{font-size:18px}
html.bh-touch #m.bh .sto-sec .sto-soonbtn>.bh-tag{font-size:max(14px,var(--f12))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .sto-sec .sto-soonbtn>.bh-tag{font-size:max(18px,var(--f11d))}
/* B497 (owner 07/11: «uno slot con un punto di domanda e in grigio come per far vedere che c'è altro in arrivo»): the champions'
   grid ends with a sixth card, a champion on the way (store.js nextCard): the cards' own size and parts (name, role, the
   picture standing on the foot), grey — --surface-2, a dashed --line-strong edge, the names in --ink-3 — a dark outline of a
   champion's place, a big «?» in the cards' own lettering, COMING SOON where the price stands. No price, no lock;
   a tap shows NEW HEROES ON THE WAY over the foot (a hover and a focus too). Variant B, the owner's (07/11, set
   2026-11-07_b497-coming-soon): the grey card with the «?» alone, pulsing slowly (still with Reduce flashing / reduced motion) */
#m.bh .sto-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
#m.bh .sto-next{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:var(--space-4) var(--space-4) 0;overflow:hidden;text-align:left;
 background:var(--surface-2);border:3px dashed var(--line-strong);border-radius:var(--radius-lg);box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 6px 0 rgba(0,0,0,.35);cursor:help;outline:none}
#m.bh .sto-next .sto-card-name{color:var(--ink-3)}
#m.bh .sto-next .sto-card-role{color:var(--ink-3)}
#m.bh .sto-next-q{position:absolute;left:0;right:0;top:24%;z-index:1;text-align:center;font:italic 900 200px/1 var(--font-ui);color:var(--ink-3);
 -webkit-text-stroke:4px var(--button-border);paint-order:stroke fill;pointer-events:none;animation:bhNextQ 2.4s ease-in-out infinite}
@keyframes bhNextQ{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
body.reduce-flash #m.bh .sto-next-q{animation:none}
@media (prefers-reduced-motion:reduce){#m.bh .sto-next-q{animation:none}}
#m.bh .sto-next .sto-card-foot{position:relative;z-index:1}
#m.bh .sto-next-soon{font:900 22px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .sto-next-tip{position:absolute;left:var(--space-2);right:var(--space-2);bottom:calc(84px + var(--space-2));z-index:2;padding:6px 10px;border-left:4px solid var(--yellow);
 background:color-mix(in srgb,var(--surface-0) 92%,transparent);font:800 17px/1.15 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
 opacity:0;transform:translateY(4px);transition:opacity 150ms,transform 150ms;pointer-events:none}
#m.bh .sto-next:is(:hover,:focus-visible,.is-tip) .sto-next-tip{opacity:1;transform:none}
#m.bh .sto-next:focus-visible{border-color:var(--yellow)}
html.bh-phone #m.bh .sto-next{flex:1;min-width:0;height:auto;padding:var(--space-3) var(--space-3) 0}
html.bh-phone #m.bh .sto-next-q{font-size:120px;top:24%}
html.bh-phone #m.bh .sto-next-soon{font-size:max(14px,var(--f12))}
html.bh-phone #m.bh .sto-next-tip{bottom:calc(64px + var(--space-2));font-size:max(14px,var(--f12))}
html.bh-touch:not(.bh-phone) #m.bh .sto-next-q{font-size:160px}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .sto-next-tip{font-size:max(18px,var(--f11d))}