/* The new home (owner 19/10: variant 3 of the workspace card «Home nuova», rounds 2-4; mockup/home.css there is the target).
   Laid out like the rest of the menu at the 1920 x 1080 reference and scaled by --bh-k (bh-lobby.css); loaded after it,
   so the rules here take the home's pieces over. Design system: bh-ui.css tokens (--pink, --pink-bright, --yellow, --ink,
   --on-yellow, --surface-*, --line, --green, --cyan, --magenta) and components (bh-nav, bh-profile, bh-currency,
   bh-iconbtn, bh-panel, bh-quest, bh-mode, bh-play, bh-chip, bh-party-slot); one font, Barlow Condensed; no coloured
   accent borders on the cards. Phones and tablets: bh-phone.css. */

/* ---- the top bar: the logo (bigger: 124 px), the menu's five slanted tabs, the card, the wallet, the gear ------------- */
#m.bh #mtop::before{content:"";position:absolute;left:0;right:0;top:0;height:132px;background:linear-gradient(180deg,rgba(7,8,26,.85),rgba(7,8,26,0));pointer-events:none}
#m.bh #mbrand{left:32px;top:6px;width:auto;height:124px}
#m.bh #bhLogo{width:auto;height:124px}
#m.bh #mnav{left:0;top:0;width:auto;height:auto;transform:scale(var(--bh-k)) translate(244px,22px);flex-direction:row;align-items:center;gap:10px}
#m.bh #mnav .bh-nav{flex:none;flex-direction:row;gap:12px;width:auto;height:60px;min-height:0;max-height:none;padding:0 26px;background:rgba(17,22,31,.9);border:0;border-radius:6px;
 transform:skewX(-14deg);box-shadow:none;font:800 23px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink)}
#m.bh #mnav .bh-nav>*{transform:skewX(14deg)}
#m.bh #mnav .bh-nav .bh-i{font-size:28px}
#m.bh #mnav .bh-nav .nt{text-align:left;white-space:nowrap}
/* a tab's short word (PASS, RANKS: the phone's, bh-phone.css) never beside the whole one off a phone (B185: «BATTLE PASSPASS») */
#m.bh #mnav .lb-nt-ph{display:none}
#m.bh #mnav .bh-nav:hover{background:rgba(34,40,55,.95)}
#m.bh #mnav .bh-nav.on{background:var(--pink);box-shadow:none}
#m.bh #mnav .bh-nav.on:hover{filter:none;background:var(--pink)}
#m.bh #mnav .frbadge{top:-10px;right:-6px}
/* the right of the bar: the card (compact), the wallet, the gear */
#m.bh #lbTopR{right:32px;top:20px;gap:14px}
#m.bh #mplayer{position:relative;left:auto;top:auto;width:auto;min-width:300px;max-width:420px;height:64px;padding:6px 14px 6px 6px;gap:12px;background:rgba(17,22,31,.92);cursor:pointer}
#m.bh #mplayer .lbav{width:52px;height:52px;flex:none}
#m.bh #mplayer .pcmain{grid-template-columns:auto 1fr auto;row-gap:2px;column-gap:10px;align-items:center}
#m.bh #mplayer .pcname{grid-column:1/3}
#m.bh #netname{font-size:22px;max-width:190px;text-overflow:ellipsis}
/* B496 round 2 (the owner 08/11: «per facilitare la condivisione… il nome con il "#" e i numeri anche in alto a destra»): the
   #tag after the name, words only (copying it is FRIENDS' COPY, on its screen: not twice); a phone's card shows no name */
#m.bh #mplayer .pcname{display:flex;align-items:baseline;min-width:0}
#m.bh #pcTag{display:inline;flex:none;margin-left:2px;font:700 18px/1 var(--font-ui);color:var(--ink-2);letter-spacing:.02em;white-space:nowrap}
#m.bh #pcTag:empty{display:none}
#m.bh #mplayer .pclvl{grid-column:1;font-size:17px}
#m.bh #lbXpT{display:none}
#m.bh #mplayer .lbxp{grid-column:2;grid-row:2;height:8px;margin-top:0}
#m.bh #acctBtn{grid-column:3;grid-row:1/3;margin:0;align-self:center;font-size:14px;line-height:1.15;text-align:right}
#m.bh #lbWallet{height:64px;background:rgba(12,16,22,.92)}
#m.bh #lbTopR .bh-iconbtn{background:rgba(12,16,22,.92)}

/* ---- the stage's tags: under each champion's feet (lobby.js places them from the stage's anchors) --------------------- */
#m.bh #mstep1:not(.has-anchors) #lbStageTags,#m.bh #mstep1:not(.has-anchors) #lbParty{visibility:hidden}
#m.bh #lbStageTags{position:absolute;inset:0;pointer-events:none}
#m.bh #lbStageTags>*{pointer-events:auto}
#m.bh .lbtag{position:absolute;transform:translate(-50%,10px);display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:6px;
 background:rgba(12,16,22,.78);color:var(--ink);font:800 20px/1 var(--font-ui);letter-spacing:.04em;white-space:nowrap;cursor:pointer}
#m.bh .lbtag span{color:var(--ink-2);font-weight:700}
#m.bh .lbtag .bh-i{font-size:18px;color:var(--ink-2);margin-left:2px}
#m.bh .lbtag:hover,#m.bh .lbtag[aria-expanded=true]{background:rgba(24,31,42,.95)}
#m.bh .lbtag:hover .bh-i{color:var(--ink)}
/* the pencil's picker, over the champion's legs */
#m.bh #lbPicker{position:absolute;transform:translate(-50%,calc(-100% - 6px));z-index:6;width:560px;padding:16px 18px;border:0;border-radius:12px;background:rgba(12,16,22,.96)}
#m.bh #lbPicker[hidden]{display:none}
#m.bh .pk-h{margin:2px 0 8px;font:800 16px/1 var(--font-ui);letter-spacing:.1em;color:var(--ink-2)}
#m.bh .pk-row{display:flex;gap:10px;margin-bottom:14px}
#m.bh .pk-c{position:relative;flex:1;height:110px;padding:0 0 4px;border:0;border-radius:8px;background:var(--sk,var(--surface-3)) center 20%/cover no-repeat;
 display:flex;align-items:flex-end;justify-content:center;color:var(--ink);font:800 17px/1 var(--font-ui);cursor:pointer}
#m.bh .pk-c span{padding:2px 6px;border-radius:4px;background:rgba(12,16,22,.8)}
#m.bh .pk-c.is-on{outline:3px solid var(--yellow);outline-offset:-3px}
#m.bh .pk-c.is-locked{filter:grayscale(1) brightness(.55)}
#m.bh .pk-c .bh-i{position:absolute;top:8px;right:8px;font-size:20px}
#m.bh .pk-s{position:relative;flex:0 1 180px;height:64px;padding:0 0 8px 10px;border:0;border-radius:8px;background:linear-gradient(135deg,var(--c),rgba(12,16,22,.9) 75%);
 display:flex;align-items:flex-end;color:var(--ink);font:800 17px/1 var(--font-ui);cursor:pointer}
#m.bh .pk-s.is-on{outline:3px solid var(--yellow);outline-offset:-3px}
#m.bh .pk-foot{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink-2);font:700 15px/1 var(--font-ui);letter-spacing:.06em;cursor:pointer}
#m.bh .pk-foot:hover{color:var(--ink)}
#m.bh .pk-foot.is-note{margin:0;cursor:default}
/* the store shut (B129): coins only in the wallet */
#lbWallet.no-gems :is(.bh-i-gem,#lbGems){display:none}
#m.bh .pk-foot.is-note:hover{color:var(--ink-2)}
/* the party: an open seat is ADD PARTY at the spot's middle, a friend is a tag under the feet (friendsui.js fills it) */
#m.bh #lbParty{position:absolute;inset:0;pointer-events:none}
#m.bh .lbslot{position:absolute;top:0;left:0;transform:translate(-50%,-50%);pointer-events:auto}
#m.bh .lbslot.l1,#m.bh .lbslot.r1{left:0}
#m.bh .lbslot.filled{transform:translate(-50%,10px);flex-direction:row;gap:8px;width:auto;height:40px;min-height:0;padding:0 14px;border:0;border-radius:6px;background:rgba(12,16,22,.78)}
#m.bh .lbslot.filled .av,#m.bh .lbslot.filled small{display:none}
#m.bh .lbslot.filled b{font:800 20px/1 var(--font-ui);letter-spacing:.04em}
/* lobby.js placeTags may narrow a friend's tag to the room beside my champion's: the name ends in an ellipsis (B86) */
#m.bh .lbslot.filled b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m.bh .lbslot.filled small{flex:none}
/* B221b (B199 defect 6): the clan's tag after a friend's name in a seat; the name gives way first (ellipsis), never the tag */
#m.bh .lbslot.filled .bh-tag-clan{flex:none;margin-left:0;font-size:16px}
html:is(.bh-touch,.bh-tablet,.bh-phone) #m.bh .lbslot.filled .bh-tag-clan{font-size:max(16px,var(--f12))}   /* a phone: 12 px or more on screen */
#m.bh .lbslot.filled.lead b::before{content:"";display:inline-block;width:20px;height:20px;margin-right:6px;vertical-align:-3px;background:var(--yellow);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 6.5 7.4 11 12 3.8 16.6 11l4.9-4.5-1.7 11.2H4.2Z'/%3E%3Crect x='4.2' y='19' width='15.6' height='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 6.5 7.4 11 12 3.8 16.6 11l4.9-4.5-1.7 11.2H4.2Z'/%3E%3Crect x='4.2' y='19' width='15.6' height='2.4'/%3E%3C/svg%3E") center/contain no-repeat}
#m.bh .lbslot.invited{border:var(--border-strong) dashed var(--ink-2);background:rgba(12,16,22,.6)}
/* B107 (variant A, approved 26/10): in a party, the plate over each champion's head (lobby.js renderBadges): the level, and a
   friend's days in a row with the day's card's flame (lobbystreak.js voxFlame); --surface-0 at 86 % like the tags */
#m.bh .lbplate{position:absolute;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);
 border-radius:var(--radius-sm);background:rgba(12,16,22,.86);font:900 22px/1 var(--font-ui);letter-spacing:.02em;color:var(--ink);white-space:nowrap;pointer-events:none}
#m.bh .lbplate[hidden]{display:none}
#m.bh .lbplate b{color:var(--yellow);font-weight:900}
#m.bh .lbplate .lbp-st{display:inline-flex;align-items:center;gap:var(--space-1);padding-left:var(--space-2);border-left:var(--border-hair) solid var(--line-strong)}
#m.bh .lbplate svg{width:14px;height:19px}
#m.bh .lbslot.invited small:last-child{display:inline;font:700 15px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}

/* ---- the quests on the right, with their rewards and the clock ------------------------------------------------------ */
#m.bh #lbQuests{right:32px;top:116px;width:440px;max-height:calc(100% - 116px - 32px - 250px - 24px);overflow:hidden;display:flex;flex-direction:column;background:rgba(17,22,31,.94)}
#m.bh #lbQuests .bh-panel-head{flex:none}
#m.bh #lbQuests .bh-panel-title{font-size:28px}
#m.bh #lbQuests .bh-panel-meta{gap:8px}
#m.bh #lbQuests .bh-panel-meta .bh-i{font-size:20px;color:var(--ink)}
#m.bh #lbQuestList{min-height:0;overflow-y:auto;scrollbar-width:thin}
#m.bh #lbQuests .bh-quest{padding:12px 16px;row-gap:8px}
#m.bh #lbQuests .bh-quest-text{font-size:19px}
#m.bh #lbQuests .bh-rewards{grid-column:1/-1;gap:24px}

/* ---- the play column: the mode card (with the server's tiny line), the first win's label, PLAY --------------------- */
#m.bh #lbPlayBox{right:32px;bottom:32px;width:420px;gap:16px}
#m.bh #lbMode{height:72px;padding:0 22px;gap:16px;background:rgba(12,16,22,.92)}
#m.bh #lbMode b{font-size:26px;letter-spacing:.03em}
#m.bh #lbMode small{display:flex;align-items:center;gap:0;font-size:15px;letter-spacing:.08em}
#m.bh #lbModeList .lbmo-private{border-top:var(--border-hair) solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm)}
#m.bh .lbfwtag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:32px;margin:0 0 -8px -4px;padding:0 12px;border-radius:6px;background:var(--surface-0);
 color:var(--yellow);font:italic 800 17px/1 var(--font-ui);letter-spacing:.04em}
#m.bh .lbfwtag[hidden]{display:none}
#m.bh .lbfwtag .bh-i{font-size:18px}
#m.bh #lbPlay{height:126px;transform:skewX(-8deg);font-size:78px}
#m.bh #lbPlay>*{transform:skewX(8deg)}

/* ---- the bottom left: the daily streak (lobbystreak.js), the party's chat over it ------------------------------- */
#m.bh .lbstreak2{position:absolute;left:32px;bottom:32px;display:flex;flex-direction:column;gap:6px;padding:8px 14px 9px 10px;background:rgba(17,22,31,.94);
 border:var(--border-hair) solid var(--line);border-radius:12px;box-shadow:var(--shadow-panel);color:var(--ink);text-align:left;cursor:pointer}
#m.bh .lbstreak2[hidden]{display:none}
#m.bh .lbstreak2:hover{border-color:var(--line-strong)}
#m.bh .ls-top{display:flex;align-items:center;gap:8px}
#m.bh .ls-flame{width:40px;height:54px;filter:drop-shadow(0 0 8px rgba(252,37,195,.55))}
#m.bh .ls-n{font:900 56px/.9 var(--font-ui);color:var(--yellow);-webkit-text-stroke:2.5px var(--on-yellow);paint-order:stroke fill;text-shadow:0 4px 0 rgba(0,0,0,.4)}
#m.bh .ls-lab{margin-left:2px;font:900 17px/1 var(--font-ui);letter-spacing:.04em}
#m.bh .ls-ok{display:grid;place-items:center;width:26px;height:26px;margin:2px 0 0 8px;align-self:flex-start;border-radius:50%;background:var(--green);color:var(--on-yellow);font-size:17px}
#m.bh .ls-claim{align-self:center;margin-left:10px;padding:6px 10px;border-radius:6px;background:var(--yellow);color:var(--on-yellow);font:900 17px/1 var(--font-ui);letter-spacing:.04em;
 animation:ls-pulse 1.4s ease-in-out infinite}
@keyframes ls-pulse{50%{transform:scale(1.08)}}
/* the week as seven small blocks (B161): done in yellow, the next outlined, the 7th bigger with its coins (the moment's blocks in small) */
#m.bh .ls-week{display:flex;align-items:center;gap:4px;margin-left:4px}
#m.bh .ls-week > i{display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:var(--surface-3);border:var(--border-hair) solid var(--line)}
#m.bh .ls-week > i.on{background:var(--yellow);border-color:var(--yellow)}
#m.bh .ls-week > i.is-next{border:var(--border-strong) solid var(--yellow)}
#m.bh .ls-week > i.ls-7{width:26px;height:26px;background:var(--premium-tint);border-color:var(--premium-line)}
#m.bh .ls-week > i.ls-7.on{background:var(--yellow);border-color:var(--yellow)}
#m.bh .ls-week > i.ls-7.is-next{border:var(--border-strong) solid var(--yellow)}
#m.bh .ls-week .bh-i-coin{font-size:20px}
#m.bh #lbChat{left:32px;top:150px;bottom:auto;width:300px}
/* the old home's pieces that the new one does not show (their code paths stay: the tests' legacy cards) */
#m.bh #lbTag,#m.bh #lbAbilities,#m.bh #lbSkins,#m.bh #lbPrivate,#m.bh #lbLeftCol,#m.bh #lbDayCard{display:none!important}

/* ---- the screens under the bar: one content area from the left edge (no rail on the left any more) ----------------- */
#m.bh #mmain>section:not(#mstep1){left:32px;top:136px;right:32px;bottom:32px}
#m.bh #mstep2,#m.bh #msoon{width:calc(100vw / var(--bh-k) - 64px);height:calc(100vh / var(--bh-k) - 168px);transform:scale(var(--bh-k)) translate(32px,136px)}
#settings.in-menu #setPanel{width:calc(100vw / var(--bh-k) - 64px);height:calc(100vh / var(--bh-k) - 168px);transform:scale(var(--bh-k)) translate(32px,136px)}
#m.bh #frToast{left:50%}

/* ---- PRIVATE MATCH (lobbyroom.js): the entry, then the room (option A) -------------------------------------------- */
#m.bh #mmain>section.vroom:not(#mstep1){background:none;border:0;box-shadow:none;padding:0;overflow:visible}
/* the entry is one opaque panel, the title in it (owner 22/10, F1; bh-ui.css «Menu screens»), centred in the content area;
   no BACK: the rail's HOME is the way back (one action once on a screen) */
#m.bh #mmain>section.vroom-entry:not(#mstep1){width:fit-content;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;margin:auto;padding:var(--space-6);background:var(--surface-1);border:var(--border-hair) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);overflow:visible}
#m.bh #mmain .vroom-entry{flex-direction:column;align-items:center}
#m.bh #mmain .vroom>.vback{position:absolute;left:0;top:-16px}
#m.bh #mmain .vroom-entry>.vback{display:none}
#m.bh #mmain .vroom .vback .bh-i,#m.bh #mmain .vroom-entry .vback .bh-i{font-size:22px}
#m.bh #mmain .vpe-title{margin:0 0 30px;font:900 64px/1 var(--font-ui)}
#m.bh #mmain .vpe-cards{display:flex;gap:24px}
#m.bh #mmain .vpe-card{width:520px;min-height:330px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:30px;
 background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-lg);color:var(--ink);text-align:left}
#m.bh #mmain .vpe-card>.bh-i{font-size:56px}
#m.bh #mmain .vpe-card>b{font:900 44px/1 var(--font-ui)}
#m.bh #mmain .vpe-card>span,#m.bh #mmain .vpe-note{margin-top:auto;font:700 19px/1.3 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#m.bh button.vpe-create{background:var(--pink);border-color:var(--pink);cursor:pointer}
#m.bh button.vpe-create>span{color:#ffe1f3}
#m.bh button.vpe-create:hover{filter:brightness(1.06)}
#m.bh #mmain .vpe-card[hidden]{display:none}
#m.bh #mmain .vpe-row{display:flex;gap:10px;width:100%;margin:6px 0 0}
#m.bh #pvCode{flex:1;min-width:0;height:56px;padding:0 18px;background:var(--surface-0);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:8px;
 font:800 24px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase}
#m.bh #pvCode::placeholder{color:var(--ink-3)}
#m.bh #pvCode:focus{border-color:var(--pink-bright);outline:none}
#m.bh #pvJoin{height:56px;padding:0 24px;font-size:22px}
/* the room: settings left, teams right, START / READY at the bottom right */
#m.bh #mmain .vroom{display:block}
#m.bh #mmain .vroom .bh-panel{position:absolute;background:var(--surface-1);display:flex;flex-direction:column}
#m.bh #mmain .vroom .bh-panel[hidden],#m.bh #mmain .vroom .vr-code[hidden]{display:none}
#m.bh #mmain .vr-set{left:0;top:44px;bottom:0;width:640px}
#m.bh #mmain .vr-teams{left:668px;right:0;top:44px;bottom:158px}
#m.bh #mmain .vr-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
#m.bh #mmain .vr-head h2{margin:0;font:800 30px/1.1 var(--font-ui);text-transform:uppercase}
#m.bh #mmain .vr-lock,#m.bh #mmain .vr-count{display:inline-flex;align-items:center;gap:6px;font:800 16px/1 var(--font-ui);letter-spacing:.08em;color:var(--ink-2)}
#m.bh #mmain .vr-code{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface-0);border-radius:8px}
#m.bh #mmain .vr-code .vclab{font:800 16px/1 var(--font-ui);letter-spacing:.1em;color:var(--ink-2)}
#m.bh #mmain .vr-code b,#m.bh #vcode{flex:1;color:var(--ink);font:900 40px/1 var(--font-ui);letter-spacing:.18em;font-variant-numeric:tabular-nums}
#m.bh #vcopy{height:44px;gap:8px}
#m.bh #mmain .vr-label{margin:18px 0 8px;font:800 16px/1 var(--font-ui);letter-spacing:.12em;color:var(--ink-2)}
#m.bh #mmain .vr-chips{display:flex;flex-wrap:wrap;gap:8px}
#m.bh #mmain .vr-chip{cursor:pointer}
#m.bh #mmain .vr-chip:disabled:not(.is-active),#m.bh #mmain .vr-map:disabled:not(.is-on){opacity:.35}
#m.bh #mmain .vr-chip:disabled,#m.bh #mmain .vr-map:disabled{cursor:default}
#m.bh #mmain .vr-maps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#m.bh #mmain .vr-map{position:relative;aspect-ratio:16/9;padding:0;border:0;border-radius:8px;background:var(--surface-3) center/cover no-repeat;display:flex;align-items:flex-end;overflow:hidden;color:var(--ink);cursor:pointer}
#m.bh #mmain .vr-map span{width:100%;padding:6px 10px;background:linear-gradient(0deg,rgba(8,11,16,.9),rgba(8,11,16,0));font:800 17px/1 var(--font-ui);letter-spacing:.04em;text-align:left}
#m.bh #mmain .vr-map.is-on{outline:4px solid var(--yellow);outline-offset:-4px}
/* B339: BOTS, OFF to the free seats, in the place FRIENDLY FIRE had (the servers' matches have none); the design system's stepper */
#m.bh #mmain .vr-bots{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:10px 16px;background:var(--surface-2);border-radius:8px;font:700 20px/1 var(--font-ui)}
#m.bh #mmain .vr-bots[hidden]{display:none}
#m.bh #mmain .vr-stepper{width:180px;height:44px;grid-template-columns:44px 1fr 44px;font:800 20px/1 var(--font-ui)}
#m.bh #mmain .vr-stepper button{height:100%;font:800 24px/1 var(--font-ui);color:var(--ink)}
#m.bh #mmain .vr-stepper button:disabled{opacity:.35}
#m.bh #mmain .vr-botrow .vname{color:var(--ink-2)}
#m.bh #mmain .vcols.vr-dm .vsw,#m.bh #mmain .vcols.vr-dm .vteam.atk .vth{display:none}
#m.bh #mmain .vcols.vr-dm .vteam[hidden]{display:none}
#m.bh #mmain .vcols.vr-dm .vteam.atk{grid-column:1/-1}
#m.bh #mmain .vcols.vr-dm .vteam.atk .vrows{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:16px}
#m.bh #mmain .vroom .vr-av.vr-av-bot{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-2)}
/* a guest or a phone cannot create: the card stays, spent, and says why (one note, on the card) */
#m.bh #mmain .vpe-card:disabled{cursor:default}
#m.bh #mmain .vpe-card:disabled>:is(b,.bh-i){color:var(--ink-3)}
#m.bh #mmain .vpe-card:disabled>span{color:var(--ink-2)}
#m.bh #mmain .vr-hidden{display:none}
/* the teams: ALPHA magenta, BRAVO cyan (the match's names and colours), the portraits, HOST, LV, the switch */
#m.bh #mmain .vroom .vcols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:16px;overflow:visible}
#m.bh #mmain .vroom .vteam{display:flex;flex-direction:column;gap:8px;min-width:0;padding:0;background:none;border:0}
#m.bh #mmain .vroom .vteam .vth{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;border-radius:6px}
#m.bh #mmain .vroom .vteam .vth .bh-team-name{font-size:28px}
#m.bh #mmain .vroom .vteam .vtn{font:800 24px/1 var(--font-ui)}
#m.bh #mmain .vroom .vteam.atk .vth{background:var(--magenta-tint);color:var(--magenta)}
#m.bh #mmain .vroom .vteam.def .vth{background:var(--cyan-tint);color:var(--cyan)}
#m.bh #mmain .vroom .vrows{display:flex;flex-direction:column;gap:8px}
#m.bh #mmain .vroom .vrow{display:flex;align-items:center;gap:12px;height:76px;padding:0 12px;background:var(--surface-2);border:0;border-radius:8px;box-shadow:none}
#m.bh #mmain .vroom .vrow.me{background:var(--surface-3);box-shadow:none}
#m.bh #mmain .vroom .vrow.empty{height:56px;justify-content:center;color:var(--ink-3);font:700 16px/1 var(--font-ui);letter-spacing:.08em;background:rgba(24,31,42,.5)}
#m.bh #mmain .vroom .vr-av{width:58px;height:58px;flex:none;border-radius:6px;background:var(--surface-3) center 15%/cover no-repeat}
#m.bh #mmain .vroom .vrow .vname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 23px/1 var(--font-ui)}
#m.bh #mmain .vroom .vrow .vname small{font:700 18px/1 var(--font-ui);color:var(--ink-2)}
#m.bh #mmain .vroom .vr-meta{display:inline-flex;align-items:center;gap:12px}
#m.bh #mmain .vroom .vr-host{display:inline-flex;align-items:center;gap:4px;font:800 16px/1 var(--font-ui);letter-spacing:.06em;color:var(--yellow)}
#m.bh #mmain .vroom .vr-lv{font:700 17px/1 var(--font-ui);color:var(--ink-2)}
#m.bh #mmain .vroom .vsw{width:40px;height:40px;flex:none;border-radius:6px;background:var(--surface-0);border:var(--border-hair) solid var(--line-strong);color:var(--ink);font:900 22px/1 var(--font-ui);cursor:pointer}
/* SPECTATORS: one line under the teams */
#m.bh #mmain .vroom .vteam.spec{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
#m.bh #mmain .vroom .vteam.spec .vth{padding:0;background:none;color:var(--ink-2);gap:8px}
#m.bh #mmain .vroom .vteam.spec .vth .bh-team-name{flex:none;font:800 17px/1 var(--font-ui);letter-spacing:.08em}
#m.bh #mmain .vroom .vteam.spec .vtn{font:800 17px/1 var(--font-ui)}
#m.bh #mmain .vroom .vteam.spec .vth .bh-team-name::before{content:"";display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-2px;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.6' r='4.4'/%3E%3Cpath d='M3.4 20.6c0-4.2 3.8-7.3 8.6-7.3s8.6 3.1 8.6 7.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.6' r='4.4'/%3E%3Cpath d='M3.4 20.6c0-4.2 3.8-7.3 8.6-7.3s8.6 3.1 8.6 7.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
#m.bh #mmain .vroom .vteam.spec .vth .bh-team-name::after{content:" ·"}
#m.bh #mmain .vroom .vteam.spec .vrows{flex-direction:row;flex-wrap:wrap;gap:8px}
#m.bh #mmain .vroom .vteam.spec .vrow{height:44px}
#m.bh #mmain .vroom .vteam.spec .vrow.empty{display:none}
#m.bh #mmain .vroom .vteam.spec .vr-av{width:32px;height:32px}
#m.bh #mmain .vroom .vteam.spec .vrow .vname{font-size:18px}
/* the foot: the status line, CREATE ROOM / START / READY (the home's PLAY) */
#m.bh #mmain .vr-foot{position:absolute;right:0;bottom:0;width:420px;display:flex;flex-direction:column;align-items:stretch;gap:10px}
#m.bh #mmain .vroom .vstatus,#m.bh #mmain .vr-wait{text-align:center;font:800 18px/1.3 var(--font-ui);letter-spacing:.08em;color:var(--ink-2)}
#m.bh #mmain .vroom .vstatus:empty,#m.bh #mmain .vr-wait:empty{display:none}
#m.bh #mmain .vroom #vhost,#m.bh #mmain .vroom #mnext{width:100%;height:126px;padding:0;transform:skewX(-8deg);font:900 72px/1 var(--font-ui);border-radius:8px}
#m.bh #mmain .vroom #vhost>*,#m.bh #mmain .vroom #mnext>*{transform:skewX(8deg)}
#m.bh #mmain .vroom #mnext{display:flex;align-items:center;justify-content:center;gap:26px}
#m.bh #mmain .vroom #mnext .bh-i{font-size:52px}
#m.bh #mmain .vroom #vhost{font-size:56px;gap:20px}
#m.bh #mmain .vroom #mnext.vr-ready{background:var(--green)}
#m.bh #mmain .vroom #vhost:disabled{opacity:.5}
#m.bh #mmain .vroom .ctaslot:empty{display:none}
/* a guest's code form before joining */
#m.bh #vjoinForm .vjrow{display:flex;gap:10px;align-items:flex-end}
#m.bh #vjoinForm .vjcode{flex:1;display:flex;flex-direction:column;gap:8px}
#m.bh #vjoinForm #netcode{width:100%;height:56px;font:800 24px/1 var(--font-ui);letter-spacing:.18em}
#m.bh #vjoinForm #netjoin{height:56px}
#m.bh #vjoinForm .vstatus{margin-top:14px;text-align:left}

/* ---- SETTINGS → GENERAL → SERVER (lobby.js draws it) --------------------------------------------------------------- */
#settings .setserver{display:flex;flex-direction:column;gap:2px}
#settings .setsrv-lead{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--premium-tint);border-radius:6px;font:800 16px/1.2 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
#settings .setsrv-lead b{color:var(--ink)}
#settings .setsrv-lead .bh-i{color:var(--yellow);font-size:18px}
#settings .setsrv-list{display:flex;flex-direction:column;gap:2px}
#settings .setsrv{display:flex;align-items:center;gap:14px;min-height:42px;padding:0 16px;background:var(--surface-2);border:0;border-radius:6px;color:var(--ink);text-align:left;cursor:pointer}
#settings .setsrv:hover:not(:disabled){background:var(--surface-3)}
#settings .setsrv b{font:800 20px/1 var(--font-ui);letter-spacing:.02em}
#settings .setsrv small{font:700 14px/1 var(--font-ui);letter-spacing:.08em;color:var(--ink-3)}
#settings .setsrv-dot{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line-strong)}
#settings .setsrv.is-on .setsrv-dot{border-color:var(--yellow);box-shadow:inset 0 0 0 4px var(--surface-2);background:var(--yellow)}
#settings .setsrv:disabled{cursor:default;opacity:.55}
#settings .setsrv:disabled.is-on{opacity:.8}
/* a phone or a tablet (bh-phone.css's --t44 / --f12): thumb-sized rows, the line under AUTO 12 CSS px on the glass (B86) */
html.bh-touch #settings .setsrv{min-height:var(--t44)}
/* the words also on a tablet played with a mouse (B346: the server's «THE CLOSEST» read 11.2-11.5 px); the 44 px row stays for the fingers */
html:is(.bh-touch,.bh-tablet) #settings .setsrv small{font-size:max(14px,var(--f12))}
html:is(.bh-touch,.bh-tablet) #settings .setsrv-lead{font-size:max(16px,var(--f12))}

/* ---- the first open of the day (lobbystreak.js): the streak's moment over the home ------------------------------- */
#lbDaily.bhd{--c1:#1d2a5c;--c2:#070a12;--ray:#fc25c3;position:fixed;inset:0;z-index:58;overflow:hidden;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
 color:var(--ink);font-family:var(--font-ui);background:var(--c2)}
#lbDaily .bhd-bg{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 52%,var(--c1),var(--c2) 100%)}
#lbDaily .bhd-pattern{position:absolute;inset:-160px;opacity:.07;transform:rotate(-12deg);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M18 32l14 12 12-19 12 19 14-12-5 30H23z'/%3E%3Cpath d='M98 112l14 12 12-19 12 19 14-12-5 30h-42z'/%3E%3C/g%3E%3C/svg%3E");
 background-size:calc(160px * var(--k)) calc(160px * var(--k))}
#lbDaily .bhd-rays{position:absolute;left:50%;top:44%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);pointer-events:none;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--ray) 34%,transparent) 0deg 8deg,transparent 8deg 22deg);
 -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 16%,transparent 44%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.55) 16%,transparent 44%);animation:bhd-spin 26s linear infinite}
@keyframes bhd-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#lbDaily .bhd-wallet{position:absolute;right:calc(24px * var(--k));top:calc(24px * var(--k));display:flex;gap:.6em;font-size:max(calc(28px * var(--k)),12.2px);pointer-events:none}
#lbDaily .bhd-w{display:inline-flex;align-items:center;gap:.4em;min-height:1.9em;padding:0 .7em;background:rgba(8,11,16,.82);border:1px solid rgba(255,255,255,.14);border-radius:8px;font-weight:900;opacity:.7}
#lbDaily .bhd-w.is-on{opacity:1;border-color:rgba(253,224,43,.6)}
#lbDaily .bhd-w .bh-i{font-size:1.15em}
#lbDaily .bhd-sk{position:absolute;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;
 top:min(44%,calc(84% - 182px * var(--kb) - 252px * var(--k)))}   /* (B161: over the week's blocks, never under them) */
#lbDaily .bhd-flame{width:calc(210px * var(--k));height:calc(280px * var(--k))}
#lbDaily .bhd-num{position:relative;height:calc(190px * var(--k));min-width:calc(320px * var(--k));margin-top:calc(-40px * var(--k));overflow:hidden;text-align:center}
#lbDaily .bhd-num b{position:absolute;left:0;right:0;top:0;font:900 calc(190px * var(--k))/1 var(--font-ui);color:var(--yellow);-webkit-text-stroke:calc(7px * var(--k)) var(--on-yellow);paint-order:stroke fill;
 text-shadow:0 calc(9px * var(--k)) 0 rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
#lbDaily .bhd-lab{font:900 calc(44px * var(--k))/1 var(--font-ui);letter-spacing:.06em;-webkit-text-stroke:calc(3px * var(--k)) var(--on-yellow);paint-order:stroke fill}
#lbDaily .bhd-plus{position:absolute;right:calc(-90px * var(--k));top:calc(10px * var(--k));font:900 calc(90px * var(--k))/1 var(--font-ui);color:var(--ink);-webkit-text-stroke:calc(3px * var(--k)) var(--on-yellow);paint-order:stroke fill;opacity:0}
#lbDaily .bhd-sparks i{position:absolute;width:calc(14px * var(--k));height:calc(14px * var(--k));background:var(--pink-bright);transform:rotate(45deg);border:2px solid var(--on-yellow)}
/* the week's seven blocks (B161): the battle pass's reward tile (.bh-rtile: --surface-2, --line, --radius-md; today --yellow
   strong, ticked with the green badge), the 7th in the premium lane's colours; sized by --kb (--k, never under 12.2 px of text) */
#lbDaily .bhd-wk{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);display:flex;flex-direction:column;gap:calc(10px * var(--kb));
 padding:calc(14px * var(--kb)) calc(18px * var(--kb));background:var(--surface-1);border:var(--border-hair) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);opacity:0;white-space:nowrap}
#lbDaily .bhd-wk-head{display:flex;align-items:center;justify-content:space-between;gap:calc(16px * var(--kb));height:calc(18px * var(--kb))}
#lbDaily .bhd-wk small{font:800 calc(16px * var(--kb))/1 var(--font-ui);letter-spacing:.1em;color:var(--ink-2)}
#lbDaily .bhd-rw{display:flex;align-items:center;gap:calc(5px * var(--kb));font:900 calc(22px * var(--kb))/1 var(--font-ui);opacity:0}
#lbDaily .bhd-rw .bh-i{font-size:calc(22px * var(--kb))}
#lbDaily .bhd-days{display:grid;grid-template-columns:repeat(6,calc(100px * var(--kb))) calc(130px * var(--kb));gap:calc(12px * var(--kb))}
#lbDaily .bhd-day{height:calc(120px * var(--kb));gap:calc(4px * var(--kb));padding-top:calc(6px * var(--kb));overflow:hidden;font-size:calc(16px * var(--kb));opacity:0}
#lbDaily .bhd-day.is-current{border-width:calc(3px * var(--kb))}
#lbDaily .bhd-day.is-big{background-color:var(--premium-tint);border-color:var(--premium-line)}
#lbDaily .bhd-day.is-big.is-current{border-color:var(--yellow)}
#lbDaily .bhd-day.is-next{border:var(--border-strong) dashed var(--yellow)}
#lbDaily .bhd-day-lab{position:relative;font:800 calc(16px * var(--kb))/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
#lbDaily .bhd-day.is-current .bhd-day-lab{padding:calc(2px * var(--kb)) calc(6px * var(--kb));border-radius:var(--radius-sm);background:var(--yellow);color:var(--on-yellow)}
#lbDaily .bhd-day.is-next .bhd-day-lab{color:var(--yellow)}
#lbDaily .bhd-day-art{position:relative;display:flex;align-items:center;gap:calc(2px * var(--kb))}
#lbDaily .bhd-day-art .bh-i{font-size:calc(44px * var(--kb))}
#lbDaily .bhd-day-art .bh-i-shield{font-size:calc(34px * var(--kb));color:var(--cyan)}
#lbDaily .bhd-day-n{position:relative;font:900 calc(22px * var(--kb))/1 var(--font-ui);color:var(--ink)}
#lbDaily .bhd-day.is-ahead :is(.bhd-day-art,.bhd-day-n){opacity:.6}
#lbDaily .bhd-day.is-claimed :is(.bhd-day-art,.bhd-day-n){opacity:.45}
#lbDaily .bhd-fill{position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--yellow) 42%,transparent),color-mix(in srgb,var(--yellow) 12%,transparent));transform:scaleY(0);transform-origin:50% 100%;pointer-events:none}
#lbDaily .bhd-day:not(.is-fill) .bhd-fill{display:none}
#lbDaily .bhd-day .bh-rtile-badge{width:calc(34px * var(--kb));height:calc(34px * var(--kb));top:calc(50% - 17px * var(--kb));right:calc(50% - 17px * var(--kb));font-size:calc(20px * var(--kb));display:none}   /* the tick over the coin */
#lbDaily .bhd-day.is-claimed .bh-rtile-badge{display:inline-flex}
#lbDaily .bhd-shields{position:absolute;left:50%;bottom:calc(16% - 64px * var(--k));transform:translateX(-50%);display:flex;align-items:center;gap:calc(8px * var(--k));font-size:calc(22px * var(--k));opacity:0}
#lbDaily .bhd-shields .bh-i{color:rgba(255,255,255,.2)}
#lbDaily .bhd-shields .bh-i.on{color:var(--cyan)}
#lbDaily .bhd-buy{gap:6px;margin-left:calc(10px * var(--k))}
#lbDaily .bhd-buy .bh-i{color:var(--ink)}
#lbDaily .bhd-hint{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);font:800 max(calc(24px * var(--k)),12.2px)/1 var(--font-ui);letter-spacing:.16em;color:rgba(255,255,255,.75);opacity:0;transition:opacity .25s}
#lbDaily .bhd-hint.is-on{opacity:1;animation:bhd-blink 1.2s ease-in-out infinite}
@keyframes bhd-blink{50%{opacity:.45}}
#lbDaily .bhd-fly{position:fixed;font-size:calc(44px * var(--k));pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
@media (prefers-reduced-motion:reduce){#lbDaily .bhd-rays,#lbDaily .bhd-hint.is-on,#m.bh .ls-claim{animation:none}}
/* B269b · the small desktop windows CrazyGames' visual QA looks at (821×462, 907×510: --bh-k at its 0.5 floor): the home's
   small labels never under ~11 px real (the labels' floor of tests/mobile_lib.mjs audit, as --f11 on touch screens,
   bh-phone.css). Each keeps its own size where that is already more: from ~1700 px wide nothing changes, nor on touch */
html:not(.bh-touch){--f11d:calc(11.2px / var(--bh-k))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mplayer #acctBtn b{font-size:max(14px,var(--f11d))}
/* MIG-ui-desktop-1: the whole account link on the floor, not only its bold half («GUEST ·», «ACCOUNT · COMING SOON» read 7 px at 821 x 462) */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mplayer #acctBtn{font-size:max(14px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #lbMode small{font-size:max(15px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#pcTag,#mplayer .pclvl,#lbQuests .bh-panel-meta,#lbQuestList .lbq .bh-reward,#lbFirstWinTag){font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #lbQuests .bh-quest-text{font-size:max(19px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbQuestList .lbq .bh-quest-count,#lbPickName,#lbParty .bh-party-slot span){font-size:max(20px,var(--f11d))}
/* B282b · GamePix's smallest frame (640×480) and the desktop windows up to 908 px wide (--bh-k at its 0.5 floor, under
   1818 px of layout; CrazyGames' QA windows 821×462 and 907×510 among them): the five tabs ran over the player's card
   (a guest with a 12-letter name and SIGN IN: covered up to 908 px, clear from 909, measured). Here the tabs take the
   phone's shape (B179, the owner's top bar B): the icon over a short word (PASS, RANKS), the word at the labels' floor
   (--f11d), the phone's padding and gap. Only the tabs change: the logo, the card, the wallet and the gear stay as they
   are. From 909 px wide nothing changes, nor on touch */
/* MIG-ui-desktop-5 · just above B282b (909-920 px wide, --bh-k at its floor) a 12-letter wide name made the card 4 px wider than the
   room left by the full-size tabs: their side padding 26 → 23 px there (15 px real gained, each tab 3 px narrower, words whole; measured with the FRIENDS badge on);
   the owner keeps the full tabs here (31/10: no compact tabs above 908 px). Desktop only */
@media (min-width:909px) and (max-width:920px){html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav{padding:0 23px}}
@media (max-width:908px){
 html:not(.bh-touch) #m.bh #mnav{gap:4px}
 html:not(.bh-touch) #m.bh #mnav .bh-nav{flex-direction:column;justify-content:center;gap:2px;height:64px;padding:0 var(--space-2);transform:skewX(-12deg)}
 html:not(.bh-touch) #m.bh #mnav .bh-nav>*{transform:skewX(12deg)}
 html:not(.bh-touch) #m.bh #mnav .bh-nav .bh-i{font-size:24px}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .nt{font-size:max(17px,var(--f11d))}
 html:not(.bh-touch) #m.bh #mnav .lb-nt{display:none}
 html:not(.bh-touch) #m.bh #mnav .lb-nt-ph{display:inline}
}
/* MIG-ui-nav-1 · the top bar's tabs big enough to read and to click on a PC (owner 01/11: "le icone a menu ... sono
   piccolissime ed è difficile anche cliccarle"; set «Migliorie · barra in alto (icone)», B chosen, then "in una riga
   sola, come da desktop"). Every tab at least 44 px real (calc(44px / --bh-k)), the icon at least 20 px real; the whole
   tab clicks. From 909 px the wide bar stays as it is (row, whole words); between 909 and 1000 px the sides take
   --space-4 so the bigger icon fits (tabs still wider than before, the card clear by 8 px or more). Up to 908 px (CrazyGames'
   821×462 and 907×510) the tabs stay on one row too: icon beside the short word, 56 px real, icon 24, word 13, sides
   --space-2 (the card clear by 18 px at 821). From 750 to 820 px a smaller row (44 px real, icon 20, word at the 11.2 px
   floor, sides --space-1); under 750 px a row of five no longer fits beside the card (measured: it touches it at 745 px),
   so there the icon goes over the word, 44 px real (GamePix's 640×480 among them). Only on a PC: phones and tablets
   are bh-phone.css */
@media (min-width:909px){
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav{height:max(60px,calc(44px / var(--bh-k,1)))}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .bh-i{font-size:max(28px,calc(20px / var(--bh-k,1)))}
}
@media (min-width:909px) and (max-width:1000px){
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav{padding:0 var(--space-4)}
}
@media (max-width:908px){
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav{gap:var(--space-2)}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav{flex-direction:row;height:112px;padding:0 var(--space-2);gap:var(--space-1)}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .bh-i{font-size:48px}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .nt{font-size:26px}
}
@media (max-width:820px){
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav{gap:var(--space-1)}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav{height:88px;padding:0 var(--space-1)}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .bh-i{font-size:40px}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .nt{font-size:max(23px,var(--f11d))}
}
@media (max-width:749px){
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav{gap:2px}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav{flex-direction:column;gap:2px;padding:0 var(--space-2)}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .bh-i{font-size:32px}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mnav .bh-nav .nt{font-size:var(--f11d)}
}
/* B339: the private room's new labels at the desktop's floor (11.2 px real in CrazyGames' small iframes; B273) */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mmain :is(.vr-bots,.vr-stepper){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mmain .vpe-card>span{font-size:max(19px,var(--f11d))}
/* B372 (owner 02/11): a locked champion is unlocked in this picker — tapped, it stands out (lit, the yellow edge) and the
   yellow UNLOCK <NAME> · 30,000 takes the foot's place; the store's pages are closed */
#m.bh .pk-c.is-locked.is-picked{filter:grayscale(.3) brightness(.85);outline:3px solid var(--yellow);outline-offset:-3px}
#m.bh .pk-unlock{width:100%;height:48px;gap:8px;font-size:20px}
/* round 3: the first tap asks — CONFIRM · 30,000 for 3 s, the button lit (the second tap buys) */
#m.bh .pk-unlock.is-confirm{box-shadow:0 0 0 3px var(--ink),var(--button-shadow)}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh .pk-unlock{height:var(--t44);min-height:var(--t44);font-size:max(16px,var(--f12))}

/* B383 (owner 02/11: «la UI del gioco deve essere responsive»; tests/responsive.mjs): the home's other layers in the desktop's
   small windows (CrazyGames 821 × 462, 1024 × 768: --bh-k 0.5-0.53) keep every word 11.2 px real or more, the rule B269b
   made for the home (--f11d, Design System «la soglia di 11,2 px vale in ogni schermata degli iframe piccoli»); each keeps
   its size where that is already more, so 1920 × 1080 is unchanged. The party's slots, the day's streak, the modes' list,
   the champion picker, SETTINGS → SERVER */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbParty .lbslot>b,#lbModeList .lbmo>span>b){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbParty .lbslot>small,#lbPicker .pk-foot){font-size:max(15px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #lbModeList .lbmo>span>small{font-size:max(14px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbStreak .ls-top .ls-lab,#lbStreak .ls-top .ls-claim,#lbPicker .pk-row>button>span){font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #lbPicker .pk-h{font-size:max(16px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings .setsrv-list .setsrv>b{font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings .setsrv-list .setsrv>small{font-size:max(14px,var(--f11d))}