/* BlockHeroes lobby (2026-09-30, the owner's UI mockups and the design system in bh-ui.css): where the
   menu's pieces sit and the few places the older sheets need overriding. Every rule is scoped under
   #m.bh (the menu root) except the overlays that live outside it (settings, the boards in a match).
   Layout: each layer is laid out at the 1920 x 1080 reference and scaled by --bh-k
   (main.js: min(width / 1920, height / 1080)), anchored to the screen's edges, so wider screens give
   the extra room to the champion's stage. The design system's HomeLayout card has the numbers. */

/* ---- shell ---------------------------------------------------------------------------------- */
#m.nm.bh{background:var(--surface-0);color:var(--ink);font-family:var(--font-ui);font-weight:600;-webkit-font-smoothing:antialiased}
#m.bh button,#m.bh input,#m.bh select{font-family:var(--font-ui)}
#m.bh :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#m.bh #mstage{position:absolute;inset:0;width:100%;height:100%;visibility:visible;display:block;border:0;border-radius:0;z-index:0;cursor:grab}
#m.bh #mstage:active{cursor:grabbing}
/* the layers: full screen in reference pixels, scaled to the screen */
#m.bh #mtop,#m.bh #mmain{position:absolute;left:0;top:0;right:auto;bottom:auto;width:calc(100vw / var(--bh-k));height:calc(100vh / var(--bh-k));
 transform:scale(var(--bh-k));transform-origin:0 0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;pointer-events:none;display:block}
#m.bh #mtop{z-index:5}
#m.bh #mmain{z-index:3}
#m.bh #mtop>*,#m.bh #mmain>section{pointer-events:auto}
/* content boxes that sit beside #mmain (the old operator step, the coming-soon card) */
#m.bh #mstep2,#m.bh #msoon{position:absolute;left:0;top:0;right:auto;bottom:auto;z-index:4;
 width:calc(100vw / var(--bh-k) - 308px);height:calc(100vh / var(--bh-k) - 212px);
 transform:scale(var(--bh-k)) translate(272px,176px);transform-origin:0 0;max-width:none}

/* ---- top bar: logo, profile card, wallet, icon buttons ---------------------------------------- */
#m.bh #mbrand{position:absolute;left:40px;top:17px;width:264px;margin:0;display:block}
#m.bh #bhLogo{display:block;width:264px;height:auto;pointer-events:none;user-select:none}
#m.bh #mplayer{position:absolute;left:327px;top:55px;margin:0;width:420px;height:var(--topbar-height);min-width:0;
 display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);background:var(--surface-1);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);box-shadow:none;clip-path:none}
#m.bh .lbav{display:block;overflow:hidden;background:var(--pink)}
#m.bh .lbav img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
#m.bh .lbav img:not([src]),#m.bh .lbav img[src=""]{visibility:hidden}
#m.bh .pcmain{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;row-gap:2px;align-items:baseline;gap:0 var(--space-2)}
#m.bh .pcname{grid-column:1/-1;display:flex;align-items:baseline;gap:2px;min-width:0}
#m.bh #netname{background:none;border:0;outline:none;padding:0;margin:0;width:auto;min-width:60px;max-width:230px;field-sizing:content;
 color:var(--ink);font:800 26px/1.15 var(--font-ui);letter-spacing:.01em;text-transform:none}
#m.bh #netname::placeholder{color:var(--ink-2)}
/* B474: the card's name is not a field (the name changes in the profile): no pointer, no caret, no focus line; a click goes to the card, which opens the profile */
#netname{pointer-events:none;user-select:none;caret-color:transparent}
#m.bh #pcTag{font:700 18px/1 var(--font-ui);color:var(--ink-2);letter-spacing:.02em}
#m.bh .pclvl{display:block;font:700 20px/1.1 var(--font-ui);letter-spacing:0;color:var(--ink)}
#m.bh .pclvl b{font-weight:700}
#m.bh #lbXpT{font:600 17px/1 var(--font-ui);color:var(--ink-2)}
#m.bh .lbxp{grid-column:1/-1;height:14px;margin-top:var(--space-2)}
#m.bh .lbxp>i{transition:width .5s ease-out}
#m.bh #acctBtn{grid-column:1/-1;justify-self:start;margin-top:4px;padding:0;background:none;border:0;cursor:pointer;
 font:800 13px/1 var(--font-ui);letter-spacing:.08em;color:var(--ink-2)}
#m.bh #acctBtn:hover{color:var(--ink)}
#m.bh #acctBtn b{color:var(--pink-bright)}
#m.bh #lbTopR{position:absolute;right:var(--gutter);top:57px;margin:0;display:flex;align-items:center;gap:var(--space-4)}
#m.bh #lbWallet{height:64px;clip-path:none}
#m.bh #lbWallet .bh-currency-amount{min-width:18px}
#m.bh .bh-iconbtn{position:relative}
#m.bh .frbadge{position:absolute;top:-8px;right:-8px;min-width:28px;height:28px;padding:0 var(--space-2);font:800 17px/28px var(--font-ui);
 border-radius:var(--radius-pill);background:var(--pink-bright);color:var(--ink);text-align:center;pointer-events:none;z-index:2}
#m.bh .frbadge[hidden]{display:none}

/* ---- the rail ------------------------------------------------------------------------------------- */
/* the tiles share the column from 212 px to 96 px over the bottom (772 px at 1080: seven tiles of 100 px), so
   six (LOADOUT hidden, lobby.js SHOW_LOADOUT) grow to ~119 px and end where seven did: no gap under the
   menu; a short window shrinks them, a tall one stops at 120 px a tile */
#m.bh #mnav{position:absolute;left:0;top:0;right:auto;bottom:auto;z-index:5;width:var(--rail-width);height:calc(100vh / var(--bh-k) - 308px);
 transform:scale(var(--bh-k)) translate(37px,212px);transform-origin:0 0;
 display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
#m.bh #mnav .bh-nav{position:relative;flex:1 1 0;height:auto;min-height:64px;max-height:120px}
#m.bh #mnav .bh-nav[hidden]{display:none}
#m.bh #mnav .bh-nav .nt{display:block;text-align:center;line-height:1}
/* the one on screen: the design system's is-active (main.js toggles .on) */
#m.bh #mnav .bh-nav.on{background-color:var(--pink);border-color:var(--button-border);box-shadow:var(--button-shadow)}
#m.bh #mnav .bh-nav.on:hover{filter:brightness(.94)}

/* ---- home ------------------------------------------------------------------------------------------- */
#m.bh #mstep1{position:absolute;inset:0;width:auto;max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;overflow:visible;pointer-events:none;display:block}
#m.bh #mstep1[style*="display: none"]{display:none!important}
#m.bh #mstep1>.pht,#m.bh #mstep1>.pcards,#m.bh #mstep1>.play-setup,#m.bh #mstep1>#flow1{display:none!important}
#m.bh #mstep1>*{pointer-events:auto}
#m.bh #mstep1>#lbParty{pointer-events:none}
/* the champion stands with the body's centre at 48.4 % of the width, feet at 80.6 %, head at 28.1 %
   (lobby3d.js frames the camera so): the name tag sits over the head, the party slots either side */
#m.bh #lbTag{position:absolute;left:48.4%;top:calc(28.1% - 22px);transform:translate(-50%,-100%);white-space:nowrap;pointer-events:auto}
#m.bh #lbTag .bh-level{width:64px;height:68px}
#m.bh #lbTag .bh-nametag-body{padding:var(--space-2) var(--space-3)}
#m.bh #lbTagTag{font:700 20px/1 var(--font-ui);font-style:normal;color:var(--ink-2);margin-left:2px}
#m.bh #lbTagEdit{display:inline-flex;align-items:center;margin-left:var(--space-2);padding:0;background:none;border:0;color:var(--yellow);cursor:pointer}
#m.bh #lbTagEdit .bh-i{font-size:22px}
#m.bh #lbTagSub{text-transform:uppercase;letter-spacing:.04em;font-size:18px}
#m.bh #lbParty{position:absolute;inset:0}
#m.bh .lbslot{position:absolute;top:43.8%;pointer-events:auto;cursor:pointer;color:var(--ink);padding:0;min-height:0;max-height:none}
#m.bh .lbslot.l1{left:calc(48.4% - 369px)}
#m.bh .lbslot.r1{left:calc(48.4% + 153px)}
#m.bh .lbslot>span{text-align:center}
/* a friend in the party (friendsui.js renderSeats) */
#m.bh .lbslot.filled{gap:var(--space-2);border-color:var(--green);background:rgba(12,16,22,.72);padding:var(--space-3) var(--space-2);text-align:center}
#m.bh .lbslot.filled .av{width:64px;height:64px;display:grid;place-items:center;background:var(--surface-3);border-radius:var(--radius-sm);font:900 32px/1 var(--font-ui);color:var(--ink)}
#m.bh .lbslot.filled .av.pic{width:76px;height:88px;background:var(--surface-3) center 12%/cover no-repeat}
#m.bh .lbslot.filled b{font:800 22px/1 var(--font-ui);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m.bh .lbslot.filled small{font:700 15px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
#m.bh .lbslot.filled.lead{border-color:var(--yellow)}
#m.bh .lbslot.invited{border-style:dashed;border-color:var(--yellow)}
/* daily quests */
#m.bh #lbQuests{position:absolute;right:var(--gutter);top:178px;width:486px;margin:0;clip-path:none}
#m.bh #lbQuests .bh-panel-meta b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
#m.bh .bh-quest.claimed{opacity:.62}
#m.bh .bh-quest .done{justify-self:end;font:800 17px/1 var(--font-ui);letter-spacing:.06em;color:var(--green);text-transform:uppercase}
/* the play column: region, mode picker, private, PLAY */
#m.bh #lbPlayBox{position:absolute;right:var(--gutter);bottom:55px;width:var(--cta-width);display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3)}
#m.bh #lbModeWrap{position:relative}
#m.bh #lbMode{width:100%;clip-path:none;color:var(--ink);cursor:pointer}
#m.bh #lbMode .bh-mode-name{display:flex;flex-direction:column;gap:3px;min-width:0}
#m.bh #lbMode b{font:800 24px/1 var(--font-ui);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m.bh #lbMode small{font:700 15px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
#m.bh #lbMode .lbcaret{transition:transform .12s}
#m.bh #lbMode[aria-expanded=true] .lbcaret{transform:rotate(180deg)}
#m.bh #lbModeList{position:absolute;left:0;right:0;bottom:calc(100% + var(--space-2));z-index:3;display:flex;flex-direction:column;gap:2px;padding:var(--space-2);
 background:var(--surface-1);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-panel)}
#m.bh #lbModeList[hidden]{display:none}
#m.bh .lbmo{width:100%;display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-2) var(--space-3);border:0;border-radius:var(--radius-sm);
 background:none;color:var(--ink);cursor:pointer;text-align:left}
#m.bh .lbmo .bh-i{font-size:28px;flex:none}
#m.bh .lbmo span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#m.bh .lbmo b{font:800 20px/1 var(--font-ui);letter-spacing:.04em}
#m.bh .lbmo small{font:700 14px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
#m.bh .lbmo:hover{background:var(--surface-2)}
#m.bh .lbmo.sel{background:var(--surface-2);box-shadow:inset 0 0 0 var(--border-strong) var(--pink-bright)}
#m.bh .lbmo .lbmo-check{font-size:22px;color:var(--pink-bright);visibility:hidden}
#m.bh .lbmo.sel .lbmo-check{visibility:visible}
#m.bh #lbPrivate{width:100%;height:52px;clip-path:none}
#m.bh #lbPlay{width:100%;clip-path:none;isolation:auto;padding:0}
#m.bh #lbPlay::before,#m.bh #lbPlay::after{content:none}
#m.bh #lbPlay span{font:inherit;transform:none;display:inline}
/* the class's two abilities, over the skins row. The key and the name start the description's first line
   (2026-10-18: a line each made the panel too tall to read bigger text at 1280 x 720 under the party seat).
   The text never goes under ~14 px on the screen: max(the 1920 size, 14 px / --bh-k), so 1920 keeps its
   17 px and 1280 x 720 draws 21 reference px (14 px) */
#m.bh #lbAbilities{--abd:max(17px,calc(14px / var(--bh-k)));--abn:max(20px,calc(15px / var(--bh-k)));--abh:max(15px,calc(11.5px / var(--bh-k)));--abk:max(24px,calc(18px / var(--bh-k)));
 position:absolute;left:235px;bottom:191px;width:560px;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-5);clip-path:none}
#m.bh #lbAbilities:empty{display:none}
#m.bh #lbAbilities .lbabh{font:800 var(--abh)/1 var(--font-ui);letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase}
#m.bh #lbAbilities .lbab{display:flex;gap:var(--space-3);align-items:flex-start}
#m.bh #lbAbilities .lbabi{flex:none;width:36px;height:calc(var(--abd) * 1.3);display:grid;place-items:center;color:var(--ink)}
#m.bh #lbAbilities .lbab>div{min-width:0;font:600 var(--abd)/1.3 var(--font-ui);color:var(--ink-2)}
#m.bh #lbAbilities b{display:inline;margin-right:.3em;font:800 var(--abn)/1 var(--font-ui);letter-spacing:.04em;color:var(--ink);white-space:nowrap}
#m.bh #lbAbilities kbd{display:inline-block;vertical-align:.12em;min-width:var(--abk);height:var(--abk);margin-right:.3em;padding:0 6px;border-radius:4px;box-sizing:border-box;
 background:var(--ink);color:var(--on-yellow);font:900 calc(var(--abk) * .62)/var(--abk) var(--font-ui);text-align:center}
#m.bh #lbAbilities .lbab span:not(.lbabi){display:inline}
/* the skins strip: the champions, with their portraits */
#m.bh #lbSkins{position:absolute;left:235px;bottom:47px;padding:0;background:none;clip-path:none}
#m.bh #lbSkinRow{display:flex}
#m.bh .bh-skin{position:relative;overflow:hidden;cursor:pointer;padding:0;background-color:var(--sk,var(--surface-3));background-clip:padding-box;width:100px;height:120px}
#m.bh .bh-skin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
#m.bh .bh-skin img:not([src]){display:none}
#m.bh .bh-skin span{position:absolute;left:0;right:0;bottom:0;padding:var(--space-1) 0;background:rgba(12,16,22,.78);
 font:800 14px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink);text-align:center;text-transform:uppercase}
#m.bh .bh-skin-more{width:100px;height:120px;cursor:pointer}

/* ---- the views: one content panel right of the rail, under the top bar ------------------------------------ */
#m.bh #mmain>section:not(#mstep1){position:absolute;left:272px;top:176px;right:var(--gutter);bottom:var(--gutter);width:auto;height:auto;max-width:none;margin:0;
 flex-direction:column;gap:var(--space-4);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);color:var(--ink);overflow:hidden;clip-path:none}
#m.bh #mstep2{padding:var(--space-5);background:var(--surface-1);border:var(--border-hair) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);color:var(--ink)}
#m.bh #msoon{align-items:center;justify-content:center;background:none;border:0;padding:0}
#m.bh #msoonCard{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:48px 64px;background:var(--surface-1);border:var(--border-hair) solid var(--line);
 border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);color:var(--ink);text-align:center;clip-path:none}
#m.bh #msoonCard b{font:900 60px/1 var(--font-ui);letter-spacing:.01em;text-transform:uppercase}
#m.bh #msoonCard b::after{content:none}
#m.bh #msoonCard span{font:700 20px/1.3 var(--font-ui);letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
/* the view heads: BACK and the screen title */
#m.bh .vhead{flex:none;display:flex;align-items:center;gap:var(--space-6);padding:0 0 var(--space-4);border-bottom:var(--border-hair) solid var(--line)}
#m.bh .vtt{display:flex;flex-direction:column;gap:var(--space-1)}
#m.bh .vtt b{font:900 48px/1 var(--font-ui);letter-spacing:.01em;color:var(--ink);text-transform:uppercase}
#m.bh .vtt span{font:700 17px/1.2 var(--font-ui);letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
#m.bh .vback{display:inline-flex;align-items:center;gap:var(--space-2);height:44px;padding:0 var(--space-5);background:var(--surface-1);
 border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink);font:800 18px/1 var(--font-ui);letter-spacing:.04em;cursor:pointer}
#m.bh .vback:hover{border-color:var(--ink)}
/* panels and rows inside the views */
#m.bh .vpanel{background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);color:var(--ink)}
#m.bh .vpt{font:800 24px/1.1 var(--font-ui);letter-spacing:.02em;color:var(--ink);background:none;border-color:var(--line);text-transform:uppercase}
#m.bh .vcrow{border-color:var(--line);color:var(--ink-2);font:700 18px/1 var(--font-ui);letter-spacing:.04em}
#m.bh .vcrow b{color:var(--ink)}
#m.bh .vcrow select,#m.bh #vcreate .vcrow select{height:36px;padding:0 var(--space-3);background:var(--surface-0);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);
 font:700 17px/1 var(--font-ui);letter-spacing:.04em}
#m.bh .vteam{background:var(--surface-2);border-color:var(--line);border-radius:var(--radius-md)}
#m.bh .vteam .vth{font:800 18px/1 var(--font-ui);letter-spacing:.06em}
#m.bh .vteam.atk .vth{background:var(--magenta-tint);color:var(--magenta)}
#m.bh .vteam.def .vth{background:var(--cyan-tint);color:var(--cyan)}
#m.bh .vteam.spec .vth{background:var(--surface-3);color:var(--ink)}
#m.bh .vrow{background:var(--surface-2);border-color:var(--line);border-radius:var(--radius-sm);color:var(--ink);font:700 20px/1 var(--font-ui)}
#m.bh .vrow.me{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
#m.bh .vrow.empty{color:var(--ink-3)}
#m.bh .vrow .vname{color:var(--ink);font:700 20px/1 var(--font-ui)}
#m.bh .vrow .vtag,#m.bh .vtag{background:var(--yellow);color:var(--on-yellow);border:0;border-radius:4px;font:800 13px/1 var(--font-ui)}
#m.bh .vsw{background:var(--surface-0);border-color:var(--line-strong);color:var(--ink);border-radius:var(--radius-sm)}
#m.bh .vhint,#m.bh .vfn,#m.bh .vstatus,#m.bh #netstatus{color:var(--ink-2);font:700 16px/1.3 var(--font-ui);letter-spacing:.04em}
#m.bh .vfn b{color:var(--ink)}
#m.bh #vreset,#m.bh .wchip,#m.bh #vcopy{height:44px;padding:0 var(--space-5);background:var(--surface-1);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-md);
 font:800 18px/1 var(--font-ui);letter-spacing:.04em;cursor:pointer}
#m.bh #vcode{color:var(--yellow);font:900 36px/1 var(--font-ui);letter-spacing:.12em}
#m.bh .vclab{color:var(--ink-2);font:800 15px/1 var(--font-ui);letter-spacing:.08em}
#m.bh #netcode{height:52px;padding:0 var(--space-4);background:var(--surface-0);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-md);
 font:800 26px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;width:200px;outline:none}
#m.bh #netcode:focus{border-color:var(--pink-bright)}
/* the yellow calls to action of the views */
#m.bh #vhost,#m.bh #mnext,#m.bh #pb,#m.bh #netjoin,#m.bh #nethost{height:var(--control-height);padding:0 var(--space-6);background:var(--yellow);color:var(--on-yellow);
 border:0;border-radius:var(--radius-md);clip-path:none;font:800 22px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
#m.bh #vhost:hover,#m.bh #mnext:hover,#m.bh #netjoin:hover,#m.bh #nethost:hover{filter:brightness(.94)}

/* ---- the friends view (friendsui.js; social.css keeps its rows, here in the design system's look) ---------- */
#m.bh #vfriends .vbody.frbody{flex:1;display:flex;gap:var(--space-6);min-height:0}
#m.bh #vfriends .frcol{flex:0 0 560px;display:flex;flex-direction:column;gap:var(--space-4);min-height:0;overflow-y:auto}
#m.bh #vfriends .frcol.wide{flex:1;min-width:0}
#m.bh #vfriends .vpanel{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);background:var(--surface-2)}
#m.bh #vfriends .vpt{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:var(--border-hair) solid var(--line);font:800 28px/1 var(--font-ui)}
#m.bh #vfriends .frcount{color:var(--ink-2);font:700 18px/1 var(--font-ui);letter-spacing:.04em}
#m.bh .frnote,#m.bh .frempty{color:var(--ink-2);font:600 18px/1.35 var(--font-ui);letter-spacing:.02em}
#m.bh .frhandle b{font:800 32px/1 var(--font-ui);color:var(--ink)}
#m.bh .frhandle span{font:700 22px/1 var(--font-ui);color:var(--ink-2)}
#m.bh #frAddInput{height:52px;padding:0 var(--space-4);background:var(--surface-0);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-md);
 font:700 22px/1 var(--font-ui);letter-spacing:.04em}
#m.bh #frAddInput:focus{border-color:var(--pink-bright)}
#m.bh .frmsg{color:var(--green);font:700 17px/1.3 var(--font-ui)}
#m.bh .frmsg.err{color:var(--red)}
#m.bh .frbtn{height:44px;padding:0 var(--space-4);background:var(--surface-1);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);
 font:800 17px/1 var(--font-ui);letter-spacing:.04em}
#m.bh .frbtn:hover{border-color:var(--ink)}
#m.bh .frbtn.go{background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow)}
#m.bh .frbtn.go:hover{filter:brightness(.94)}
#m.bh .frbtn.big{height:68px;font-size:24px;background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow)}
#m.bh .frbtn.x{width:44px;padding:0;color:var(--ink-2)}
#m.bh .frbtn.x:hover,#m.bh .frbtn.danger:hover{border-color:var(--red);color:var(--red)}
#m.bh .frbtn.done{background:none;border-color:transparent;color:var(--ink-2)}
#m.bh .frp{min-height:84px;gap:var(--space-4);padding:0 var(--space-4) 0 var(--space-5);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-sm)}
#m.bh .frp.off{opacity:1}
#m.bh .frp .dot{width:16px;height:16px;background:var(--ink-3);box-shadow:none}
#m.bh .frp .dot.on,#m.bh .frp .dot.play{background:var(--green);box-shadow:none}
#m.bh .frp .who b{font:700 26px/1.1 var(--font-ui);color:var(--ink)}
#m.bh .frp .who b small{font:700 18px/1 var(--font-ui);color:var(--ink-2)}
#m.bh .frp .who span{font:600 18px/1.2 var(--font-ui);letter-spacing:.02em;color:var(--ink-3)}
#m.bh .frp .who span.on,#m.bh .frp .who span.play{color:var(--green)}
/* B192: the name ends in an ellipsis, #1234 and the clan's tag stay whole after it (12 wide letters and WWWW) */
#m.bh .frp .who b{display:flex;align-items:baseline;min-width:0}
#m.bh .frp .who b .nm{unicode-bidi:isolate;flex:0 1 auto;min-width:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;letter-spacing:inherit;color:inherit}
#m.bh .frp .who b :is(small,.bh-tag-clan,.crown,.cl-off){flex:none}

/* ---- MATCH HISTORY, BATTLE PASS, STORE (screens.js): the section is only a frame, its .bh-panel are the screen ---- */
/* (bh-ui.css «Menu screens»: opaque panels, the scene only in the gutters) */
#m.bh #mmain>section.bhscreen:not(#mstep1){background:none;border:0;box-shadow:none;padding:0;gap:var(--space-6);flex-direction:row;align-items:stretch;overflow:visible}
#m.bh .bhscreen .bh-screen-title{flex:none}
#m.bh .bhs-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);height:100%;min-height:200px;text-align:center;color:var(--ink-2);font:600 20px/1.3 var(--font-ui)}
#m.bh .bhs-empty b{font:800 32px/1 var(--font-ui);color:var(--ink);text-transform:uppercase}
/* match history: the list, the selected match */
#m.bh #vhistory .mh-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6)}
#m.bh #vhistory .mh-rows{flex:1;min-height:0;overflow-y:auto;padding-right:var(--space-2)}
#m.bh #vhistory .bh-match{width:100%;color:var(--ink);text-align:left;cursor:pointer}
#m.bh #vhistory .bh-match>span:nth-child(3){line-height:1.25}
#m.bh #vhistory .mh-detail{flex:0 0 586px;display:flex;flex-direction:column;min-height:0;box-shadow:var(--shadow-panel)}
#m.bh #vhistory .mh-boards{flex:1;min-height:0;overflow-y:auto}
#m.bh #vhistory .mh-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* B221b: the clan's tag of that match after the name; the name ends in … first */
#m.bh #vhistory .mh-name{display:flex;align-items:center;min-width:0}
#m.bh #vhistory .mh-name .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate}
#m.bh #vhistory .mh-name .bh-tag-clan{flex:none}
#m.bh #vhistory .mh-ffa{--team:var(--line-strong)}
/* battle pass: the track and the showcase over the two challenge panels */
#m.bh .bp-grid{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr);gap:var(--space-6)}
#m.bh .bp-main{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
#m.bh .bp-main .bh-season{width:auto;grid-template-areas:"meta meta . buy" "level bar count buy"}   /* B117: no title row */
#m.bh .bh-season .bp-soon{grid-area:buy;align-self:end;justify-self:end;font-size:20px;padding:6px 14px}   /* B129: the premium pass coming soon */
#m.bh .bp-main .bh-track{width:auto}
#m.bh .bp-show{width:auto;height:auto;min-height:0}
#m.bh .bp-show .bh-art{background-color:var(--surface-2);background-size:contain;background-position:center bottom}
#m.bh .bp-chs{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);min-height:0}
#m.bh .bp-ch{min-height:0;overflow:hidden;padding:var(--space-3) var(--space-5) var(--space-4)}
#m.bh .bp-ch .bh-panel-head{margin-bottom:var(--space-2)}
#m.bh .bp-ch .bh-panel-title{font-size:26px}
#m.bh .bh-rtile{color:var(--ink);cursor:default;overflow:hidden}
#m.bh .bh-rtile.can-claim{cursor:pointer;border-color:var(--yellow)}
#m.bh .bh-rtile.can-claim:hover{filter:brightness(1.12)}
#m.bh .bp-claim{position:absolute;left:0;right:0;bottom:0;padding:3px 0;background:var(--yellow);color:var(--on-yellow);font:800 14px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
#m.bh .bp-skin{position:absolute;inset:0 0 22px;background-color:transparent;background-size:cover;background-position:50% 0}
#m.bh .bp-skin-name{position:absolute;left:0;right:0;bottom:4px;font:800 14px/1 var(--font-ui);letter-spacing:.04em;text-align:center}
/* store: one scrolling panel */
#m.bh .st-main{flex:1;min-width:0;overflow-y:auto;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
#m.bh .st-main>*{flex:none}
#m.bh .st-main .bh-featured{width:auto}
#m.bh .st-featart{background-color:var(--surface-2);background-size:contain;background-position:center bottom}
#m.bh .st-row{display:flex;gap:var(--space-4);flex-wrap:wrap}
#m.bh .st-row .bh-skincard{flex:1 1 270px;width:auto}
#m.bh .st-skinart{position:absolute;right:8px;top:8px;bottom:56px;width:150px;background-color:transparent;background-size:contain;background-position:right bottom}
#m.bh .st-row .bh-pack{flex:1 1 300px;width:auto}
#m.bh .st-sub{font:600 20px/1.2 var(--font-ui);color:var(--ink-2)}
#m.bh .bhscreen .bh-price,#m.bh .bhscreen .bh-chip,#m.bh .bhscreen .bh-tab{cursor:pointer}

/* ---- FRIENDS (friendsui.js): the list, the invite link, the referral rewards ------------------------------------ */
#m.bh #vfriends .fr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6)}
#m.bh #vfriends .fr-head{display:flex;align-items:flex-end;gap:var(--space-6)}
#m.bh #vfriends .fr-head .bh-tabs{flex:1}
#m.bh #vfriends .fr-head .bh-panel-meta{padding-bottom:var(--space-3);font-size:20px}
#m.bh #vfriends .fr-add{display:flex;gap:var(--space-2)}
#m.bh #vfriends .fr-add #frAddInput{flex:1}
#m.bh #vfriends .frmsg:empty{display:none}
#m.bh #vfriends .fr-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2);padding-right:var(--space-2)}
#m.bh #vfriends .fr-list[hidden]{display:none}
#m.bh #vfriends #frList{display:flex;flex-direction:column;gap:var(--space-2)}
#m.bh #vfriends #frPartyBox{padding:var(--space-4);gap:var(--space-2)}
#m.bh #vfriends #frPartyBox .vpt{font-size:22px;padding-bottom:var(--space-2)}
#m.bh #vfriends .fr-side{flex:0 0 640px;display:flex;flex-direction:column;gap:var(--space-6);min-height:0}
#m.bh #vfriends .fr-side .bh-panel{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6)}
#m.bh #vfriends .fr-invite .bh-field{height:72px}
#m.bh #vfriends .fr-invite .bh-field-body{overflow:hidden;text-overflow:ellipsis}
#m.bh #vfriends .fr-invite-btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
#m.bh #vfriends .fr-invite-btns .bh-btn{width:100%}
#m.bh #vfriends .fr-invite-btns:has(> #frShare[hidden]){grid-template-columns:1fr}
#m.bh #vfriends .frhandle{display:flex;align-items:baseline;gap:var(--space-2)}
#m.bh #vfriends .frhandle .fr-you{font:700 17px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
#m.bh #vfriends .frhandle b{font:800 24px/1 var(--font-ui)}
#m.bh #vfriends .frhandle #frMyTag{font:700 20px/1 var(--font-ui);color:var(--ink-2);margin-right:auto}
#m.bh #vfriends .fr-sub{margin:calc(-1 * var(--space-3)) 0 0;font:600 22px/1.2 var(--font-ui);color:var(--ink-2)}
/* B391m: the (i) right of REFERRAL REWARDS (bh-ui.css .bh-info; its popover, the steps, src/friendsui.js) */
#m.bh #vfriends .fr-ref-head{display:flex;align-items:center;gap:var(--space-3)}
#m.bh #vfriends .bh-steps{width:100%}
#m.bh #vfriends .fr-reward{display:grid;place-items:center;background:var(--surface-2)}
#m.bh #vfriends .fr-reward .bh-i{font-size:48px}
#m.bh #vfriends .fr-reward svg{width:60px;height:50px}
#m.bh #vfriends .fr-reward.skin .bh-i{color:var(--yellow)}
#m.bh #vfriends .bh-goal{width:100%}
#m.bh #vfriends .fr-goal-art{display:flex;align-items:flex-end;justify-content:center;background:var(--surface-3)}
#m.bh #vfriends .fr-goal-art i{width:56px;height:62px;margin:0 -8px;background:center 20%/cover no-repeat}
#m.bh .fr-av{flex:none;width:56px;height:56px;display:grid;place-items:center;background:var(--surface-3);border-radius:var(--radius-sm);font:900 28px/1 var(--font-ui);color:var(--ink)}
#m.bh #frParty .frp,#m.bh #frReqs .frp,#m.bh #frInvites .frp{min-height:68px}
/* the friends list's rows (owner's mockup, 2026-10): champion, name and level, status, INVITE / JOIN, the more menu */
#m.bh .fr-av.pic{background:var(--surface-3) center 18%/cover no-repeat}
#m.bh #vfriends .fr-row .who{flex:0 1 260px}
#m.bh #vfriends .fr-row .who .fr-lv{font:600 18px/1.2 var(--font-ui);color:var(--ink-2)}
#m.bh #vfriends .fr-status{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#m.bh #vfriends .fr-status b{font:700 22px/1.1 var(--font-ui);color:var(--ink-3)}
#m.bh #vfriends .fr-status.on b{color:var(--green)}
#m.bh #vfriends .fr-status small{font:600 15px/1.2 var(--font-ui);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m.bh #vfriends .fr-row .acts{position:relative;align-items:center}
#m.bh .frbtn.more{width:52px;padding:0;display:grid;place-items:center;font-size:22px}
#m.bh .fr-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);
 background:var(--surface-1);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:0 12px 28px rgba(0,0,0,.45)}
#m.bh .fr-menu .frbtn{width:100%;white-space:nowrap}
#m.bh .fr-menu .frbtn.armed{border-color:var(--red);color:var(--red)}
#m.bh #vfriends .fr-filter{position:relative;height:48px;min-width:150px;margin-bottom:var(--space-2)}
/* ---- clans (B192, src/clanui.js, docs/CLAN.md A6): FRIENDS → CLAN, the clan invites, a guest's line ---- */
#m.bh #vfriends :is(.fr-add,.fr-filter,.fr-guest,.bh-panel-meta)[hidden]{display:none}
/* B496 (the owner 07/11: «quando clicco clan si alza la grafica»): the three tabs' content starts on the same line. ADD A FRIEND
   lives in FRIENDS itself (index.html); off FRIENDS the count and the filter stay in place, unseen, so the tabs do not move */
#m.bh #vfriends:is([data-tab="requests"],[data-tab="clan"]) :is(#frOnline,#frFilterBox){visibility:hidden}
#m.bh #vfriends #frTabFriends>.fr-add{flex:none}
/* the tabs' icons: the home's own (bh-i), a step smaller than the words */
#m.bh #vfriends #frTabs .bh-tab>.bh-i{font-size:.85em}
/* B496: the empty states: the design system's bhs-empty (MATCH HISTORY's) with an icon and, where it leads on, one button */
#m.bh #vfriends .fr-es{flex:1 0 auto;min-height:260px;height:auto;gap:var(--space-3);padding:var(--space-6) var(--space-5);max-width:none}
#m.bh #vfriends .fr-es>.bh-i{font-size:72px;color:var(--ink-3)}
#m.bh #vfriends .fr-es>span{max-width:620px}
#m.bh #vfriends .fr-es>.bh-btn{margin-top:var(--space-3)}
#m.bh #vfriends .fr-es[hidden]{display:none}
/* (INVITE A FRIEND: only where the invite link is out of view, under the list on a phone; beside it on a wider screen) */
html:not(.bh-phone) #m.bh #vfriends .fr-es-invite{display:none}
/* (B496, no clan: FIND A CLAN and CREATE A CLAN one under the other, full width: the owner's option B of 08/11) */
#m.bh #vfriends .fr-guest{flex:none;flex-direction:row;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-sm);font-size:22px;text-align:left;color:var(--ink)}
#m.bh #vfriends .cl-create,#m.bh #vfriends .cl-form{flex:none;gap:var(--space-4)}
#m.bh .cl-sub{margin:0;font:600 20px/1.3 var(--font-ui);color:var(--ink-2)}
#m.bh .cl-create .cl-short{font-weight:700;letter-spacing:.04em;color:var(--ink)}   /* B221b: what is missing to create one */
#m.bh .cl-tagrow,#m.bh .cl-btns{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
#m.bh :is(#clTagIn,#clDisbandIn){width:170px;height:64px;padding:0 var(--space-4);background:var(--surface-0);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);color:var(--ink);font:900 36px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;outline:none}
#m.bh #clDisbandIn{height:48px;font-size:26px;width:130px}
#m.bh :is(#clTagIn,#clDisbandIn):focus{border-color:var(--line-strong)}
#m.bh .cl-state{font:700 20px/1.2 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#m.bh .cl-state.ok{color:var(--green)}
#m.bh .cl-state.bad{color:var(--red)}
#m.bh .cl-needs{display:flex;gap:var(--space-6)}
#m.bh .cl-need{display:inline-flex;align-items:center;gap:var(--space-2);font:700 20px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#m.bh .cl-need .bh-i{font-size:22px}
#m.bh .cl-need.ok{color:var(--ink)}
#m.bh .cl-need.ok .bh-i{color:var(--green)}
#m.bh .cl-buy{align-self:flex-start;min-width:240px;height:56px}
#m.bh .cl-buy[disabled]{background:var(--surface-3);color:var(--ink-3);cursor:default;filter:none}
#m.bh .cl-head{flex:none;display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-sm)}
#m.bh .cl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#m.bh .cl-info b{font:800 26px/1.1 var(--font-ui)}
#m.bh .cl-info span{font:600 18px/1.2 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#m.bh :is(.cl-head,.cl-member) .acts{position:relative;align-items:center}
#m.bh .cl-members{display:flex;flex-direction:column;gap:var(--space-2)}
#m.bh .frp .cl-off{margin-right:6px;font-size:18px;color:var(--ink-2);vertical-align:1px}
#m.bh .cl-invhead{flex:none}
#m.bh #vfriends .cl-invhead .frbtn{margin:0 var(--space-3) 0 0}
/* B221b (clans v2, docs/CLAN-V2.md): FIND A CLAN, the clan's requests, CLAN SETTINGS, the LOG; the same rows (.frp), panels
   (.vpanel), buttons (.frbtn, .bh-btn) and tags (.bh-tag-clan) as the rest of FRIENDS; no colour of their own */
#m.bh #vfriends .cl-find{flex:none;gap:var(--space-3)}
#m.bh .cl-findhead{display:flex;align-items:center;gap:var(--space-4)}
#m.bh .cl-findhead .vpt{flex:1;margin:0}
#m.bh #vfriends .cl-findin{width:160px;height:52px;padding:0 var(--space-3);background:var(--surface-0);border:var(--border-hair) solid var(--line-strong);
 border-radius:var(--radius-sm);color:var(--ink);font:800 26px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
#m.bh .cl-rows{display:flex;flex-direction:column;gap:var(--space-2)}
#m.bh .cl-row{cursor:pointer}
#m.bh .cl-row>.bh-tag-clan{flex:none;min-width:84px;justify-content:center;height:44px;margin:0;font-size:24px;font-weight:900;color:var(--ink)}
#m.bh .cl-row .who b .nm{font-size:18px;letter-spacing:.06em;color:var(--ink-2)}
#m.bh .cl-row:hover{border-color:var(--line-strong)}
#m.bh .cl-more{align-self:center}
#m.bh .cl-guest{padding:var(--space-3);gap:var(--space-2);font-size:20px}
#m.bh .cl-requests{flex:none;display:flex;flex-direction:column;gap:var(--space-2)}
/* B500 (the owner's layout A, 08/11: «testata + bacheca»): under the clan's head the MEMBERS beside the BOARD (its events, the
   join requests as cards, the chat). A wider screen shows both (no sub-tabs); a phone one at a time (bh-phone.css) */
#m.bh #vfriends .cl-cols{flex:1 1 0;min-height:400px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-4)}
#m.bh #vfriends .cl-col{min-height:0;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-4);background:var(--surface-1);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md)}
#m.bh #vfriends .cl-colhead{flex:none;display:flex;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:var(--border-hair) solid var(--line);font:800 24px/1 var(--font-ui);letter-spacing:.04em}
#m.bh #vfriends .cl-colhead small{font:700 17px/1 var(--font-ui);color:var(--ink-2);letter-spacing:.06em}
#m.bh #vfriends .cl-memcol .cl-members{flex:1 1 0;min-height:0;overflow-y:auto;scrollbar-width:thin}
#m.bh #vfriends .cl-events{flex:none;display:flex;flex-direction:column;gap:var(--space-2)}
#m.bh #vfriends .cl-event{display:flex;align-items:center;gap:var(--space-2);font:700 17px/1.2 var(--font-ui);color:var(--ink-2);letter-spacing:.03em}
#m.bh #vfriends .cl-event .bh-i{flex:none;color:var(--yellow)}
#m.bh #vfriends .cl-event small{margin-left:auto;font:600 15px/1 var(--font-ui);color:var(--ink-3);white-space:nowrap}
#m.bh #vfriends .cl-board .cl-requests .frp{background:var(--surface-2);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm)}
#m.bh #vfriends .cl-board .cl-chat{flex:1 1 0;min-height:160px;display:flex}
#m.bh #vfriends .cl-board .bh-chat-lines{flex:1 1 0;min-height:0;overflow-y:auto}
html:not(.bh-phone) #m.bh #vfriends #clSub{display:none}
/* (a small window, CrazyGames' 821 x 462: the words' floor, --f11d, leaves two columns too narrow for the names: one under the other) */
@media (max-width: 1100px){html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .cl-cols{grid-template-columns:minmax(0,1fr);flex:none;min-height:0}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .cl-memcol .cl-members{flex:none;overflow:visible}
 html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .cl-board .cl-chat{flex:none;height:320px}}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends :is(.cl-colhead small,.cl-event,.cl-event small){font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .cl-colhead{font-size:max(24px,var(--f11d))}
#m.bh .cl-requests .vpt{margin:var(--space-2) 0 0}
#m.bh .frbtn.cl-ico{min-width:48px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#m.bh .frbtn.cl-ico .bh-i{font-size:24px}
#m.bh .frp .cl-mvp{flex:none;margin-left:6px;font-size:18px;color:var(--yellow);vertical-align:1px}
#m.bh .frp.is-me{border-color:var(--line-strong)}
#m.bh #vfriends .cl-set{flex:none;gap:var(--space-3)}
#m.bh .cl-seg{flex:none;align-self:flex-start;display:inline-flex;padding:var(--space-1);background:var(--surface-0);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md)}
#m.bh .cl-seg button{display:inline-flex;align-items:center;height:44px;padding:0 var(--space-5);background:none;border:0;border-radius:var(--radius-sm);
 font:800 20px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
#m.bh .cl-seg button.is-active{background:var(--surface-3);color:var(--ink)}
#m.bh .cl-step{width:260px;height:52px}
#m.bh .cl-step span{font:800 22px/1 var(--font-ui)}
#m.bh .cl-set>.frbtn,#m.bh .cl-set>.bh-btn{align-self:flex-start}
#m.bh .cl-log{display:flex;flex-direction:column;gap:var(--space-1)}
#m.bh .cl-logline{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) var(--space-4);
 background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-sm);font:700 20px/1.25 var(--font-ui);letter-spacing:.04em}
#m.bh .cl-logline small{flex:none;font-size:16px;color:var(--ink-2)}
/* a clan's public page (clanui.js openClan): a panel over the menu, laid out at 1920 x 1080 and scaled by --bh-k like the
   profile (bh-profile.css); the head (the tag, size, entry, level, points, founder), the members, one action at the foot */
#clanPage{position:fixed;inset:0;z-index:15;overflow:hidden;background:var(--scrim)}
#clanPage[hidden]{display:none}
#clanPage .cl-page{position:absolute;left:50%;top:50%;width:960px;height:780px;transform:translate(-50%,-50%) scale(var(--bh-k,1));
 display:flex;flex-direction:column;gap:var(--space-4);font-family:var(--font-ui);color:var(--ink)}
#clanPage .cl-page-head{flex:none;display:flex;align-items:center;gap:var(--space-5)}
#clanPage .bh-tag-clan-lg{flex:none}
#clanPage .cl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
#clanPage .cl-info b{font:800 28px/1.15 var(--font-ui);letter-spacing:.02em}
#clanPage .cl-info span{font:700 20px/1.2 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#clanPage .bh-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--surface-2);
 border:var(--border-hair) solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-size:28px}
#clanPage .cl-members{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;overscroll-behavior:contain}
#clanPage .cl-prow{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:56px;padding:0 var(--space-4);
 background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-sm);color:var(--ink);text-align:left}
#clanPage .cl-prow:hover{border-color:var(--line-strong)}
#clanPage .cl-prow b{min-width:0;display:flex;align-items:center;gap:6px;font:800 24px/1 var(--font-ui)}
#clanPage .cl-prow b .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate}
#clanPage .cl-prow b small{flex:none;font-size:18px;color:var(--ink-2)}
#clanPage .cl-prow b .crown{flex:none}
#clanPage .cl-prow b .cl-off{flex:none;font-size:18px;color:var(--ink-2)}
#clanPage .cl-prow>span{flex:none;font:700 18px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#clanPage .cl-page-foot{flex:none;display:flex;justify-content:center;align-items:center;min-height:64px}
#clanPage .cl-page-go{min-width:320px}
#clanPage .cl-sub{font:700 20px/1.2 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#clanPage .cl-guest{padding:var(--space-3);font-size:20px}
#m.bh #vfriends .fr-filter select{appearance:none;border:0;background:none;color:var(--ink);font:inherit;letter-spacing:inherit;cursor:pointer;flex:1;outline:none}
#m.bh #vfriends .fr-filter select option{background:var(--surface-1);color:var(--ink)}
#m.bh #vfriends .fr-filter .bh-i{pointer-events:none}
#m.bh #vfriends button:disabled,#m.bh #vfriends input:disabled{opacity:.45;cursor:not-allowed}
#m.bh #frParty .fr-av,#m.bh #frReqs .fr-av,#m.bh #frInvites .fr-av{width:44px;height:44px;font-size:22px}

/* ---- SETTINGS (settings.js): a screen in the content area over the menu, a panel over the game in a match --------- */
#settings.bh-ui{background:var(--scrim);color:var(--ink);font-family:var(--font-ui)}
#settings.in-menu{background:none;pointer-events:none;align-items:flex-start;justify-content:flex-start}
#settings #setPanel{pointer-events:auto;display:flex;flex-direction:column;gap:var(--space-4);width:1400px;height:900px;max-width:none;max-height:none;
 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);
 color:var(--ink);font-family:var(--font-ui);transform:scale(var(--bh-k))}
#settings.in-menu #setPanel{position:absolute;left:0;top:0;width:calc(100vw / var(--bh-k) - 308px);height:calc(100vh / var(--bh-k) - 212px);
 transform:scale(var(--bh-k)) translate(272px,176px);transform-origin:0 0}
#settings #setPanel button{font-family:var(--font-ui)}
#settings #setHead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:0;border:0}
#settings #setHead .bh-screen-title{margin:0}
#settings #setClose{background:var(--surface-1);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink);font:800 20px/1 var(--font-ui);letter-spacing:.04em;padding:0 var(--space-5)}
#settings #setClose:hover{border-color:var(--ink)}
#settings.in-menu #setClose{display:none}
#settings.in-menu #setHead{display:none}                 /* B117: the menu's settings go without SETTINGS: the tabs on top */
#settings #setTabs{flex:none;display:flex;gap:var(--space-2);justify-content:stretch}
#settings #setTabs button.bh-cattab{flex:1;height:64px;padding:0 var(--space-4);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);
 color:var(--ink);font:800 22px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
#settings #setTabs button.bh-cattab:hover{border-color:var(--line-strong);color:var(--ink)}
#settings #setTabs button.bh-cattab.on{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
#settings #setBody{flex:1;min-height:0;overflow-y:auto;padding:0 var(--space-2) 0 0;display:flex;flex-direction:column;gap:2px}
#settings #setFoot{flex:none;display:flex;justify-content:space-between;gap:var(--space-4);padding:0;border:0}
#settings #setFoot .bh-btn{height:var(--control-height)}
#settings .sethead{margin:var(--space-5) 0 var(--space-2);font:800 17px/1 var(--font-ui);letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase}
#settings .sethead:first-child{margin-top:0}
/* the crosshair preview: never squeezed by the page's column, and pinned under the tabs while the knobs scroll */
#settings .xstick{position:sticky;top:0;z-index:2;flex:none;padding:0 0 var(--space-3);background:var(--surface-1);box-shadow:0 10px 14px -10px rgba(0,0,0,.6)}
#settings .xstick .sethead{margin-top:var(--space-3)}
#settings .xprev{flex:none;height:150px;border-color:var(--line-strong);border-radius:var(--radius-sm)}
#settings .setrow{flex:none;display:flex;align-items:center;gap:var(--space-5);min-height:44px;padding:var(--space-1) var(--space-5);margin:0;background:var(--surface-2);border:0;border-radius:4px}
/* B354-r2 (owner 01/11, set «Testi · uno stile solo», row t-settings): the rows in capitals too, as every small label
   (Design System rule 14); only the case changes, the words and their size stay */
#settings .setlabel{flex:1;width:auto;font:600 22px/1.2 var(--font-ui);letter-spacing:0;color:var(--ink);text-transform:uppercase}
#settings .setread{flex:none;width:72px;text-align:right;font:600 22px/1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
#settings .setrow input.bh-slider{flex:none;width:350px;height:12px;background:linear-gradient(to right,var(--yellow) var(--p,50%),var(--surface-0) var(--p,50%));
 border:var(--border-hair) solid var(--line);border-radius:var(--radius-pill)}
#settings .setrow input.bh-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--ink);border:0;cursor:pointer}
#settings .setrow input.bh-slider::-moz-range-thumb{width:24px;height:24px;border-radius:var(--radius-pill);background:var(--ink);border:0;cursor:pointer}
/* the switch */
/* the switch: the knob fills most of the track, a thin ring of colour round it (owner 18-19/10, the same on touch: bh-phone.css) */
#settings .setrow .stoggle{position:relative;flex:none;width:56px;height:32px;padding:0;margin:0 0 0 auto;background:var(--surface-3);border:var(--border-hair) solid var(--line-strong);
 border-radius:var(--radius-pill);font-size:0;color:transparent;cursor:pointer}
#settings .setrow .stoggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--ink);transition:left .12s}
#settings .setrow .stoggle.on{background:var(--yellow);border-color:var(--yellow)}
#settings .setrow .stoggle.on::after{left:27px;background:var(--on-yellow)}
/* the stepper */
#settings .schoice.bh-stepper{flex:none;display:inline-grid;grid-template-columns:40px 1fr 40px;width:350px;height:36px;gap:0;background:var(--surface-0);
 border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm)}
#settings .schoice.bh-stepper button{height:100%;display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;border:0;border-radius:0;color:var(--ink);font-size:18px;cursor:pointer}
#settings .schoice.bh-stepper button:hover{color:var(--yellow)}
#settings .schoice.bh-stepper span{align-self:center;text-align:center;font:600 20px/1 var(--font-ui);color:var(--ink)}
/* key bindings, the page buttons, the crosshair's pieces */
#settings .kbind{min-width:140px;height:36px;padding:0 var(--space-4);background:var(--surface-0);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);
 color:var(--ink);font:700 18px/1 var(--font-ui);letter-spacing:.04em}
#settings .kbind:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
#settings .kbind:disabled{color:var(--ink-3)}
#settings .sbtn{flex:none;align-self:flex-start;height:44px;margin:var(--space-3) 0 0;padding:0 var(--space-5);background:var(--surface-1);border:var(--border-hair) solid var(--line-strong);
 border-radius:var(--radius-sm);color:var(--ink);font:800 17px/1 var(--font-ui);letter-spacing:.04em}
#settings .setrow .sbtn{margin:0}
#settings .sbtn:hover{border-color:var(--ink);color:var(--ink)}
#settings .xpre{background:var(--surface-2);border:var(--border-strong) solid var(--line);border-radius:var(--radius-md);color:var(--ink)}
#settings .xpre.on{border-color:var(--yellow);box-shadow:none}
#settings .xpre span{font:800 15px/1 var(--font-ui);letter-spacing:.04em}
#settings .xcode{height:36px;background:var(--surface-0);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);font:600 17px/1 var(--font-ui)}
#settings .xmsg{color:var(--yellow);font:800 17px/1 var(--font-ui)}
#settings .xsw{border-radius:var(--radius-sm)}

/* ---- the toast over the menu ------------------------------------------------------------------------------ */
#frToast{background:var(--surface-1);border:var(--border-strong) solid var(--pink-bright);border-radius:var(--radius-md);box-shadow:var(--shadow-panel);
 color:var(--ink);font:700 20px/1.2 var(--font-ui);letter-spacing:.02em}
#frToast b{color:var(--yellow)}
/* scaled with the top bar and centred in the room between the profile card (ends 747px) and the wallet, so
   a long line (a streak lost, an invite) covers neither on a laptop (2026-10-17: it hid the XP at 1280 x 720) */
#m.bh #frToast{left:calc(1078px * var(--bh-k));top:calc(24px * var(--bh-k));transform:translateX(-50%) scale(var(--bh-k));transform-origin:50% 0;
 width:max-content;max-width:560px;box-sizing:border-box}
/* B397b: the «graphics acceleration is off» note (a long line, 15 s): under the top bar, not over the navigation it would hide
   at 1366 x 768 (STORE, LEADERBOARD, FRIENDS); the phone and the tablet keep their own place (their rules come later) */
#m.bh #frToast.is-note{top:calc((var(--topbar-height) + var(--space-3)) * var(--bh-k))}
/* B421: text only, no button: on a PC under 912 px the tabs are 56 px tall and the note covered their last 6 px for its
   15 s, so clicks there hit the note; they now reach the tab. The mouse only (giro 2): a finger on a phone or a tablet
   keeps landing on the note, as before; the invites keep their JOIN / DECLINE everywhere */
html:not(.bh-touch) #m.bh #frToast.is-note{pointer-events:none}

/* ---- smaller screens: the layers scale, so only very narrow windows need anything ---------------------------- */
@media (max-aspect-ratio:4/3){
 #m.bh #lbAbilities{display:none}
}
@media (prefers-reduced-motion:reduce){#m.bh .lbxp>i{transition:none}}

/* ---- the boards in a match (hud.js board): TAB and the end of the match --------------------------------------------
   Laid out at 1920 x 1080 like the menu and scaled by --bh-k; the rows are grids over the table's cells (the table
   stays a table: the tests and the actions read its rows and cells). */
#sb.bhboard{top:0;left:50%;width:1240px;padding:24px 0 0;background:none;border:0;border-radius:0;box-shadow:none;
 transform:translateX(-50%) scale(var(--bh-k));transform-origin:50% 0;color:var(--ink);font-family:var(--font-ui);min-width:0}
#sb.bhboard .sbhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-6);margin:0 0 var(--space-5)}
#sb.bhboard .sblogo{justify-self:end;width:250px;height:auto;display:block}
#sb.bhboard .bh-banner{justify-self:center}
#sb.bhboard .bh-timer{justify-self:start;height:88px}
.bhboard .sbboards{display:flex;flex-direction:column;gap:var(--space-5)}
.bhboard .bh-board{width:auto;padding:var(--space-3) var(--space-4) var(--space-4)}
.bhboard .bh-team{width:auto}
/* B502 (regia 09/11, urgent: on the owner's phone the TAB board stood in one column, the headings stacked in the middle): no
   subgrid, no display: contents (B492's grid of the table with its rows as subgrids: a phone's TAB, a block table, and Safari
   before 16, display: contents on a tbody, left every row a grid of one column). Every row is a grid of its own with the
   table's columns, fixed: --sb-cols (the numbers' columns, per screen) and --sb-acts (the four action slots, PROFILE / the
   friendship / MUTE / REPORT, at the longest words' width: ACCEPT FRIEND, UNMUTE, REPORTED, in the buttons' size --sbbf).
   The same columns on the heading and on every row: they line up on iOS 14+ and Chrome 80+ too */
.bhboard table.sbt{--sb-cols:56px 52px minmax(0,1fr) 110px 130px 110px 120px 130px;--sbbf:15px;
 --sb-acts:calc(var(--sbbf) * 5) calc(var(--sbbf) * 7.2) calc(var(--sbbf) * 4.8) calc(var(--sbbf) * 5.3);display:block;width:100%;border-collapse:separate}
.bhboard table.sbt tbody{display:block}
.bhboard table.sbt tr{display:grid;grid-template-columns:var(--sb-cols) var(--sb-acts);align-items:center;column-gap:var(--space-3);
 height:56px;margin-top:6px;padding:0 var(--space-3);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-sm);
 font:800 26px/1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.bhboard table.sbt tr.hd{height:44px;margin-top:0;background:none;border-color:transparent;font:700 20px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
.bhboard table.sbt td{display:block;padding:0;color:inherit;text-align:center;white-space:nowrap;min-width:0}
.bhboard table.sbt td.n{text-align:left;font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* B192: the name ends in an ellipsis, DEAD, #1234 and the clan's tag stay whole after it (12 wide letters and WWWW) */
.bhboard table.sbt td.n{display:flex;align-items:center}
.bhboard table.sbt td.n .nm{unicode-bidi:isolate;flex:0 1 auto;min-width:1.5em;overflow:hidden;text-overflow:ellipsis}
.bhboard table.sbt td.n small,.bhboard table.sbt td.n i.dd,.bhboard table.sbt td.n .bh-tag-clan{flex:none}
/* with the buttons (TAB with the mouse, the end board) the number columns narrow: the name keeps room for #1234 and the tag */
#sb.mouse.bhboard table.sbt,#endBoard.bhboard table.sbt{--sb-cols:56px 52px minmax(0,1fr) 84px 100px 84px 90px 100px}
/* (the TAB without the mouse shows no buttons: its rows the numbers' columns only) */
#sb.bhboard:not(.mouse) table.sbt tr{grid-template-columns:var(--sb-cols)}
/* a name cell too narrow for everything (the smallest phone with the buttons): #1234 goes first, the name and the tag stay */
.bhboard table.sbt td.n{container-type:inline-size}
@container (max-width: 170px){.bhboard table.sbt td.n small{display:none}}
.bhboard table.sbt tr.hd td:nth-child(3){text-align:left}
/* the name's small words (mobile M5 audit: DEAD read 6.7 px on a 1280 x 720 screen, social.css's #sb rule at 10 px): 18 px, ~12 px there */
.bhboard table.sbt td.n small,#sb.bhboard table.sbt td.n small{margin-left:4px;font:700 18px/1 var(--font-ui);color:var(--ink-2)}
.bhboard table.sbt td.n i.dd,#sb.bhboard table.sbt td.n i.dd{margin-left:var(--space-2);font:800 18px/1 var(--font-ui);font-style:normal;letter-spacing:.08em;color:var(--ink-3)}
/* a bot (B473, as before B141b): the design system's small tag, cyan on the dark board */
.bhboard table.sbt td.n i.bt,#sb.bhboard table.sbt td.n i.bt{margin-left:var(--space-2);padding:2px 6px;border-radius:var(--radius-sm);font:800 17px/1 var(--font-ui);font-style:normal;letter-spacing:.1em;color:var(--on-yellow);background:var(--cyan);vertical-align:2px}
/* B498 (the owner 07/11): the same tag on the final board, never under 12 px on the glass (the board is drawn scaled: 2/3 at 1280 x 720 and at 667 x 375, 0.72 at 844 x 390); the phone too (an id: over bh-phone.css's rule) */
#endBoard.bhboard table.sbt td.n i.bt{font-size:19px}
/* a room's bot on our servers: the design system's small tag, cyan on the dark board */
.bhboard table.sbt td.lv{font:600 20px/1 var(--font-ui);color:var(--ink-2)}
.bhboard table.sbt td.av .bh-avatar{width:48px;height:48px;background-color:var(--surface-3)}
.bhboard table.sbt td.pg{justify-self:center}
.bhboard table.sbt .bh-ping{font-size:24px}
.bhboard table.sbt .bh-ping.is-none .bh-i{color:var(--ink-3)}
.bhboard table.sbt tr.dead td:not(.act){opacity:.45}
/* the player's own row: magenta in the free for all, a yellow outline and score in the team boards */
.bhboard.ffa table.sbt tr.me{background:var(--pink-tint);border:var(--border-select) solid var(--magenta);color:var(--magenta)}
.bhboard.ffa table.sbt tr.me td.lv,.bhboard.ffa table.sbt tr.me td.n small{color:var(--magenta)}
.bhboard:not(.ffa) table.sbt tr.me{border:var(--border-select) solid var(--yellow)}
.bhboard:not(.ffa) table.sbt tr.me td.sc{color:var(--yellow)}
.bhboard .bh-team .bh-team-body{padding-top:0}
/* the actions (ADD FRIEND, REPORT): TAB shows them with the mouse, the final board always */
#sb.bhboard td.act{display:none}
#sb.bhboard.mouse td.act{display:flex}
.bhboard table.sbt td.act{justify-content:flex-end;gap:var(--space-2)}
#endBoard.bhboard td.act{display:flex}
/* B492, B502: the actions' four slots: the cell spans the row's four last columns and is a grid of the same four (--sb-acts);
   PROFILE, the friendship, MUTE and REPORT each in its column on every row, and the heading's cell over all four */
.bhboard table.sbt td.act{grid-column:span 4}
#sb.mouse.bhboard table.sbt td.act,#endBoard.bhboard table.sbt td.act{display:grid;grid-template-columns:var(--sb-acts);column-gap:var(--space-3);align-items:center;justify-items:stretch}
.bhboard table.sbt td.act .ap{grid-column:1}
.bhboard table.sbt td.act .af{grid-column:2}
.bhboard table.sbt td.act .am{grid-column:3}
.bhboard table.sbt td.act .ar{grid-column:4}
.bhboard table.sbt td.act .sbdone{margin:0;text-align:center}
/* REPORT open: its reasons and ✕ in a row across the four slots */
#sb.mouse.bhboard table.sbt tr.asking td.act,#endBoard.bhboard table.sbt tr.asking td.act{display:flex}
.bhboard .sbb{height:36px;margin:0;padding:0 var(--space-3);background:var(--surface-1);color:var(--ink);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);
 font:800 15px/1 var(--font-ui);letter-spacing:.04em;cursor:pointer}
.bhboard .sbb:hover{border-color:var(--ink)}
.bhboard .sbb.bad:hover{border-color:var(--red);color:var(--red)}
.bhboard .sbdone{margin-left:var(--space-2);font:800 15px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
.bhboard .sbhint{margin-top:var(--space-4);text-align:center;font:800 17px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
.bhboard .sbhint:empty{display:none}
/* the end of the match: the verdict over the same boards */
#endwin{background:var(--scrim)}
#endwin #endPanel{width:1240px;max-width:none;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:0;background:none;border:0;border-radius:0;
 box-shadow:none;transform:scale(var(--bh-k));font-family:var(--font-ui)}
#endwin #endTitle{font:900 72px/1 var(--font-ui);letter-spacing:.01em;text-indent:0;text-transform:uppercase}
#endwin #endTitle.win{color:var(--yellow)}#endwin #endTitle.lose{color:var(--red)}#endwin #endTitle.draw{color:var(--ink)}
#endwin #endSub{font:700 22px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink-2);text-transform:uppercase}
#endwin #endBoard{width:100%;margin-top:var(--space-3);padding:0;background:none;border:0;border-radius:0;font:inherit}
/* the line under the verdict only when it says something (FFA: the kill target and the top); the HUD (and the phone's
   touch layer) hidden behind the final board, as behind the summary (bh-summary.css; owner 26/10, review B117) */
#endwin #endSub:empty{display:none}
body:has(> #endwin[style*="flex"]) :is(#hud,#bhTouch){visibility:hidden}
#endwin #endBoard .t0 td,#endwin #endBoard .t1 td{color:inherit}
/* BACK TO THE MENU is a .bh-btn-primary (B413, B409 row 7: the filled control's colour, edge and press from bh-ui.css): its place here */
/* B481: BACK TO THE MENU (secondary) and PLAY AGAIN (primary, on the right) on one row */
#endwin #endBtns{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}
#endwin :is(#endBack,#endAgain){padding:0 var(--space-8);cursor:pointer}
/* the older board rules are id-scoped: the same weight here, later */
#sb.bhboard table.sbt td,#endBoard.bhboard table.sbt td{padding:0;width:auto;color:inherit;text-align:center}
#sb.bhboard table.sbt td.n,#endBoard.bhboard table.sbt td.n{text-align:left}
#sb.bhboard table.sbt tr.hd td,#endBoard.bhboard table.sbt tr.hd td{font:inherit;color:inherit;letter-spacing:inherit}
#sb.bhboard table.sbt tr.hd td:nth-child(3),#endBoard.bhboard table.sbt tr.hd td:nth-child(3){text-align:left}
#sb.bhboard td.n,#endBoard.bhboard td.n{min-width:0}
/* the settings screen over the home: the home's widgets that reach past the content area stay under it */
body:has(#settings.in-menu[style*="flex"]) #m.bh #mstep1{visibility:hidden}
/* the HUD: the BlockHeroes logo in its corner; the match chip steps aside while the TAB board (it has its own clock) shows */
#hud #hudBrand{width:170px;height:auto}
body:has(#sb.bhboard[style*="block"]) #mchip{visibility:hidden}
/* hidden means hidden, whatever a component's display says */
#m.bh [hidden],#settings [hidden]{display:none!important}

/* ---- progression (2026-10-11): the daily streak over the quests, DAILY / WEEKLY, the first win, the champions not
   unlocked yet (lobby.js) ---- */
/* the left column under the logo, level with the rail's first tile (2026-10-17: it sat under the logo's
   corner): the day's card. It ends by ~406px, over the party chat (top 418px) */
#m.bh #lbLeftCol{position:absolute;left:235px;top:212px;width:486px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;pointer-events:none}
#m.bh #lbLeftCol>*{pointer-events:auto}
#m.bh #lbLeftCol>[hidden]{display:none}
/* the day's card: opaque, so it reads over any background (owner 2026-10-17: "the streak isn't clearly visible") */
#m.bh .lbdaycard{width:100%;box-sizing:border-box;overflow:hidden;background:var(--surface-1);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-panel)}
#m.bh .lbstreak{display:flex;align-items:center;gap:var(--space-3);margin:0;padding:var(--space-3) var(--space-4);
 background:linear-gradient(90deg,rgba(255,122,16,.14),rgba(255,122,16,0) 62%);box-shadow:inset 4px 0 0 var(--line-strong)}
#m.bh .lbstreak:is(.is-safe,.is-risk){box-shadow:inset 4px 0 0 #ff7a10}
#m.bh .lbstreak[hidden]{display:none}
#m.bh .lbs-badge{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-3);color:var(--ink-3)}
#m.bh .lbstreak:is(.is-safe,.is-risk) .lbs-badge{background:linear-gradient(165deg,#ffb52e,#ff6a00 58%,#e2410b);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
#m.bh .lbs-flame{width:36px;height:36px;flex:none}
#m.bh .lbstreak.is-risk .lbs-flame{animation:lbflame 1.2s ease-in-out infinite}
@keyframes lbflame{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.88)}}
#m.bh .lbs-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
#m.bh .lbs-count{font:900 28px/1 var(--font-ui);letter-spacing:.02em;color:var(--ink);white-space:nowrap}
#m.bh .lbstreak:is(.is-safe,.is-risk) .lbs-count .bh-num{color:#ffa040}
#m.bh .lbs-sub{display:flex;align-items:center;gap:var(--space-3);min-width:0;white-space:nowrap}
#m.bh .lbs-state{flex:none;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--radius-sm);
 background:var(--surface-3);color:var(--ink);font:800 16px/1 var(--font-ui);letter-spacing:.05em}
#m.bh .lbs-state .bh-i{font-size:16px}
#m.bh .lbstreak.is-safe .lbs-state{background:rgba(76,244,92,.16);color:var(--green)}
#m.bh .lbstreak.is-risk .lbs-state{background:rgba(255,122,16,.22);color:#ffb26b}
#m.bh .lbs-next{min-width:0;display:flex;align-items:center;gap:var(--space-2);overflow:hidden}
#m.bh .lbs-next small{font:800 15px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
#m.bh .lbs-rw{flex:none;display:inline-flex;align-items:center;gap:4px;font:800 18px/1 var(--font-ui);color:var(--ink)}
#m.bh .lbs-rw .bh-i{font-size:19px}
#m.bh .lbs-rw .bh-i-shield{color:var(--cyan)}
#m.bh .lbs-rw-item{font-size:15px;letter-spacing:.05em}
#m.bh .lbs-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}
#m.bh .lbs-shields{display:flex;align-items:center;gap:4px;flex:none}
#m.bh .lbs-shields .bh-i{font-size:22px;color:var(--ink-3);opacity:.45}
#m.bh .lbs-shields .bh-i.on{color:var(--cyan);opacity:1}
#m.bh .lbs-buy{width:24px;height:24px;padding:0;border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-3);
 color:var(--ink);font:900 18px/1 var(--font-ui);cursor:pointer}
#m.bh .lbs-buy:hover{border-color:var(--yellow);color:var(--yellow)}
#m.bh .lbs-claim{flex:none;height:34px;padding:0 var(--space-4);font-size:18px}
#m.bh #lbQuests .bh-panel-title{display:flex;gap:var(--space-2)}
#m.bh .lbqtab{padding:2px var(--space-2);border:0;border-bottom:3px solid transparent;background:none;color:var(--ink-3);font:inherit;cursor:pointer}
#m.bh .lbqtab.is-on{color:var(--ink);border-bottom-color:var(--yellow)}
/* the first win of the day: the card's bottom line */
#m.bh .lbfirstwin{display:flex;align-items:center;gap:var(--space-2);height:42px;box-sizing:border-box;margin:0;padding:0 var(--space-4);
 background:var(--surface-2);border-top:var(--border-hair) solid var(--line);font:800 17px/1 var(--font-ui);letter-spacing:.04em;color:var(--ink)}
#m.bh .lbstreak[hidden]+.lbfirstwin{border-top:0}
#m.bh .lbfirstwin .lbfw-ico{font-size:20px;color:var(--yellow)}
#m.bh .lbfirstwin span{flex:1;min-width:0}
#m.bh .lbfirstwin b{color:var(--yellow);white-space:nowrap}
#m.bh .lbfirstwin .bh-i-coin{font-size:20px}
#m.bh .lbfirstwin.is-done{color:var(--ink-2)}
#m.bh .lbfirstwin.is-done .lbfw-ico,#m.bh .lbfirstwin.is-done b{color:var(--green)}
#m.bh .lbfirstwin[hidden]{display:none}
/* the quests (owner 2026-10-17: "completed quests become huge and cover the others"): one size in every
   state. Name and count on top (a long name ends in …, the whole of it in the tooltip), the bar, then
   the rewards and a 34px action slot (CLAIM / CLAIMED / empty): the panel ends ~650px, over the play column */
#m.bh #lbQuestList .lbq{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 14px 34px;grid-template-areas:"text count" "bar bar" "rw act";
 row-gap:10px;column-gap:var(--space-4);padding:var(--space-3) var(--space-4)}
#m.bh #lbQuestList .lbq .bh-quest-text{grid-area:text;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2}
#m.bh #lbQuestList .lbq .bh-quest-count{grid-area:count;font-size:20px;line-height:1.2;white-space:nowrap}
#m.bh #lbQuestList .lbq .bh-bar{grid-area:bar;align-self:center}
#m.bh #lbQuestList .lbq .bh-rewards{grid-area:rw;min-width:0;overflow:hidden;gap:var(--space-5)}
#m.bh #lbQuestList .lbq .bh-reward{flex:none}
#m.bh #lbQuestList .lbq :is(.claim,.done){grid-area:act;justify-self:end;align-self:center}
#m.bh #lbQuestList .lbq .claim{height:34px;padding:0 var(--space-4);font-size:18px}
#m.bh #lbQuestList .lbq .done{display:inline-flex;align-items:center;gap:4px}
#m.bh #lbQuestList .lbq .done .bh-i{font-size:18px}
#m.bh #lbQuestList .lbq.is-ready{border-color:rgba(255,208,0,.55);background:linear-gradient(90deg,rgba(255,208,0,.10),rgba(255,208,0,0) 70%),var(--surface-2)}
#m.bh .bh-skin.is-locked img{filter:grayscale(1) brightness(.45)}
#m.bh .bh-skin.is-locked{cursor:not-allowed}
#m.bh .lbskin-lock,#m.bh .lbskin-free{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;
 padding:3px 8px;border-radius:var(--radius-sm);background:rgba(12,16,22,.85);color:var(--ink);font:900 15px/1 var(--font-ui);font-style:normal;letter-spacing:.04em;white-space:nowrap}
#m.bh .lbskin-free{top:12px;transform:translateX(-50%);background:var(--yellow);color:var(--on-yellow)}
@media (prefers-reduced-motion:reduce){#m.bh .lbstreak.is-risk .lbs-flame{animation:none}}

/* the collection (screens.js, 2026-10-11) */
#m.bh .st-cos-grid{display:flex;flex-direction:column;gap:var(--space-4)}
#m.bh .st-cos-kind h4{margin:0 0 var(--space-2);font:800 18px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
#m.bh .st-cos-kind h4 span{color:var(--ink-3);margin-left:var(--space-2)}
#m.bh .st-cos-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
#m.bh .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:var(--border-hair) solid var(--rarity,var(--line));border-radius:var(--radius-md);color:var(--ink);cursor:pointer}
#m.bh .st-cos small{font:700 12px/1.1 var(--font-ui);letter-spacing:.03em;text-transform:uppercase;text-align:center;color:var(--ink-2)}
#m.bh .st-cos.is-locked{cursor:default;border-color:color-mix(in srgb,var(--rarity,var(--line)) 30%,var(--line))}
#m.bh .st-cos.is-locked > :not(small){opacity:.38}
#m.bh .st-cos.is-locked small{color:var(--ink-3)}   /* (the profile's COLLECTION's locked card, MIG-ui-store-1: one look) */
#m.bh .st-cos:disabled,#m.bh .st-cos[aria-disabled="true"]{cursor:default}   /* (B390: aria-disabled, so a long press still reaches it for INSPECT) */
#m.bh .st-cos.is-on{box-shadow:0 0 0 3px var(--yellow);border-color:var(--yellow)}
#m.bh .st-cos.is-on::after{content:"WORN";position:absolute;top:-9px;right:-6px;padding:2px 6px;border-radius:var(--radius-sm);background:var(--yellow);color:var(--on-yellow);font:900 11px/1 var(--font-ui)}
#m.bh .st-cos-icon{width:64px;height:64px;border-radius:var(--radius-sm);background:var(--surface-3) center 10% / cover no-repeat}
#m.bh .st-cos-frame{width:60px;height:60px;border-radius:var(--radius-sm);background:var(--surface-3)}
#m.bh .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))}
/* the frames round a profile icon (cosmetics.js frame:*) */
.st-frame-none{box-shadow:inset 0 0 0 2px #3a4152}
.st-frame-rare{box-shadow:inset 0 0 0 5px #2f6dff,0 0 10px rgba(47,109,255,.6)}
.st-frame-epic{box-shadow:inset 0 0 0 5px #8a3cff,0 0 12px rgba(138,60,255,.65)}
.st-frame-neon{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #fc25c3,0 0 16px #fc25c3}
.st-frame-legendary{box-shadow:inset 0 0 0 4px #ffe27a,inset 0 0 0 7px #ffb81c,0 0 18px rgba(255,184,28,.8)}
.st-frame-recruiter{box-shadow:inset 0 0 0 3px var(--pink-bright),inset 0 0 0 6px var(--rarity-epic),0 0 14px rgba(192,102,224,.7)}   /* B391: the invite ladder's frame, epic */
.st-frame-streak30{box-shadow:inset 0 0 0 5px #ff7a10,0 0 16px rgba(255,122,16,.85)}
/* the party's chat on the home (src/chat.js), left, under the streak and the first win (from
   212px to ~406px, #lbLeftCol), over the champion's abilities, while I am in a party of two or more (narrow: the
   party's left seat starts at 48.4% - 369px) */
#m.bh #lbChat{position:absolute;left:235px;top:418px;width:312px;max-height:220px;margin:0;padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);clip-path:none}
#m.bh #lbChat[hidden]{display:none}
#m.bh #lbChat .bh-panel-head{margin-bottom:0;flex-wrap:wrap;row-gap:4px}
#m.bh #lbChat .bh-panel-title{font-size:20px}
#m.bh #lbChat .bh-panel-meta{display:none}
#m.bh #lbChat .bh-chat-lines{flex:1 1 100px;min-height:56px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;
 font:600 19px/1.3 var(--font-ui);color:var(--ink)}
#m.bh #lbChat .bh-chat-line{overflow-wrap:anywhere}
#m.bh #lbChat .bh-chat-who{margin-right:6px;font-weight:900;color:var(--yellow);white-space:nowrap}
#m.bh #lbChat .bh-chat-who .nm{display:inline-block;unicode-bidi:isolate;max-width:60%;overflow:hidden;text-overflow:ellipsis;vertical-align:top}   /* B192: a long name, then the tag */
#m.bh #lbChat .bh-chat-who.is-me{color:var(--cyan)}
#m.bh #lbChat .bh-chat-tag{display:none}
#m.bh #lbChat .bh-chat-line.is-system{color:var(--ink-2);font-style:italic;font-size:15px;text-transform:uppercase;letter-spacing:.03em}
#m.bh #lbChat .bh-chat-line.is-bad{color:var(--yellow)}
#m.bh #lbChat .bh-chat-row{display:flex;gap:var(--space-2)}
/* B277: a guest reads; one line in place of the field (on CrazyGames with their sign-in's button) */
#m.bh #lbChat .bh-chat-row[hidden],#m.bh #lbChat .bh-chat-signin[hidden]{display:none}
#m.bh #lbChat .bh-chat-signin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);min-height:44px;padding:var(--space-2) var(--space-4);
 background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);font:800 16px/1.2 var(--font-ui);letter-spacing:.04em;color:var(--ink-2)}
#m.bh #lbChat .bh-chat-signin span{white-space:nowrap}   /* (a narrow panel: the button goes under the words, never the words one a line) */
#m.bh #lbChat .bh-chat-input{flex:1;min-width:0;height:44px;padding:0 var(--space-4);background:var(--surface-0);border:var(--border-hair) solid var(--line);
 border-radius:var(--radius-md);color:var(--ink);font:600 18px/1 var(--font-ui);outline:0}
#m.bh #lbChat .bh-chat-input:focus{border-color:var(--line-strong)}
#m.bh #lbChat .bh-chat-send{height:44px;padding:0 var(--space-4);font-size:17px}
#m.bh #lbChat .bh-chat-hint{font:800 13px/1.25 var(--font-ui);letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
#m.bh #lbChat .bh-chat-hint[hidden]{display:none}
#m.bh #lbChat .bh-chat-row.is-masked .bh-chat-input{border-color:var(--yellow)}
#m.bh #lbChat .bh-chat-row.is-masked~.bh-chat-hint{color:var(--yellow)}
#m.bh #lbChat .bh-chat-row.is-blocked .bh-chat-input{border-color:var(--red)}
#m.bh #lbChat .bh-chat-row.is-blocked~.bh-chat-hint{color:var(--red)}
#m.bh #lbChat .bh-chat-line.is-pending{opacity:.75}
/* B259: its tabs PARTY · CLAN in place of the title, one tab's lines at a time; the clan's names green */
#m.bh #lbChat .bh-chat-tabs{gap:var(--space-5);margin:0}
#m.bh #lbChat .bh-chat-tabs .bh-tab{font-size:20px}
#m.bh #lbChat .bh-chat-tabs .bh-count{min-width:22px;height:22px;margin:-2px 0;padding:0 5px;font-size:14px}   /* (no taller than the label: the last line stays in sight) */
#m.bh #lbChat .bh-chat-who.is-clan{color:var(--green)}
#m.bh #lbChat[data-tab=party] .bh-chat-line:not([data-tab=party]),#m.bh #lbChat[data-tab=clan] .bh-chat-line:not([data-tab=clan]){display:none}
/* B259: FRIENDS → CLAN → CHAT (src/chat.js mountClan): the clan's chat in its page; the role before the name; the leader's
   and the MODs' ⋯ on a line (REMOVE LINE, MUTE 1 H, MUTE 24 H) */
#m.bh .cl-subtabs{margin:var(--space-3) 0 var(--space-2)}
#m.bh .cl-subtabs .bh-count{min-width:24px;height:24px;margin:-2px 0;padding:0 6px;font-size:15px}
#m.bh .cl-subtabs .bh-count.is-quiet{background:var(--surface-3);color:var(--ink-2)}
#m.bh .bh-chat-clan{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--space-2)}
#m.bh .bh-chat-clan .bh-chat-note{font:800 13px var(--font-ui);letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
#m.bh .bh-chat-clan .bh-chat-lines{flex:1 1 auto;min-height:120px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;font:600 19px/1.3 var(--font-ui);color:var(--ink)}
#m.bh .bh-chat-clan .bh-chat-line{position:relative;overflow-wrap:anywhere}
#m.bh .bh-chat-clan .bh-chat-line.is-system{color:var(--ink-2);font-style:italic;font-size:15px;text-transform:uppercase;letter-spacing:.03em}
#m.bh .bh-chat-clan .bh-chat-line.is-bad{color:var(--yellow)}
#m.bh .bh-chat-clan .bh-chat-role{margin-right:6px;font:800 13px var(--font-ui);letter-spacing:.06em;color:var(--ink-3)}
#m.bh .bh-chat-clan .bh-chat-who{margin-right:6px;font-weight:900;color:var(--green);white-space:nowrap}
#m.bh .bh-chat-clan .bh-chat-who.is-me{color:var(--cyan)}
#m.bh .bh-chat-clan .bh-chat-more{margin-left:var(--space-2);padding:0 var(--space-2);background:none;border:0;color:var(--ink-3);font:900 18px/1 var(--font-ui);cursor:pointer}
#m.bh .bh-chat-clan .bh-chat-more:hover,#m.bh .bh-chat-clan .bh-chat-more:focus-visible{color:var(--ink)}
#m.bh .bh-chat-clan .bh-chat-menu{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:4px 0 2px;padding:var(--space-2);background:var(--surface-2);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm)}
#m.bh .bh-chat-clan .bh-chat-menu .bh-btn{height:36px;padding:0 var(--space-3);font-size:15px}
#m.bh .bh-chat-clan .bh-chat-row{display:flex;gap:var(--space-2)}
#m.bh .bh-chat-clan .bh-chat-input{flex:1;min-width:0;height:44px;padding:0 var(--space-4);background:var(--surface-0);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);color:var(--ink);font:600 18px/1 var(--font-ui);outline:0}
#m.bh .bh-chat-clan .bh-chat-input:focus{border-color:var(--line-strong)}
#m.bh .bh-chat-clan .bh-chat-send{height:44px;padding:0 var(--space-4);font-size:17px}
#m.bh .bh-chat-clan .bh-chat-hint{font:800 13px/1.25 var(--font-ui);letter-spacing:.03em;text-transform:uppercase}
#m.bh .bh-chat-clan .bh-chat-hint[hidden]{display:none}
#m.bh .bh-chat-clan .bh-chat-row.is-masked .bh-chat-input{border-color:var(--yellow)}
#m.bh .bh-chat-clan .bh-chat-row.is-masked~.bh-chat-hint{color:var(--yellow)}
#m.bh .bh-chat-clan .bh-chat-row.is-blocked .bh-chat-input{border-color:var(--red)}
#m.bh .bh-chat-clan .bh-chat-row.is-blocked~.bh-chat-hint{color:var(--red)}

/* B273 · CrazyGames' small desktop windows (821×462, 907×510): the match scoreboard's small texts never under ~11 px real
   (--f11d, bh-ui.css); 1920 and touch screens unchanged */
html:not(.bh-touch,.bh-phone,.bh-tablet) #sb :is(.bh-timer-label,.bhboard table.sbt tr.hd,.bhboard table.sbt td.lv){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #sb .bh-team-label{font-size:max(22px,var(--f11d))}
/* B310b (owner 31/10): the end-of-match board's heads and levels too, on the same floor (they read 10 px at 821 x 462) */
html:not(.bh-touch,.bh-phone,.bh-tablet) #endBoard.bhboard :is(table.sbt tr.hd,table.sbt td.lv){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #endBoard .bh-team-label{font-size:max(22px,var(--f11d))}
/* MIG-ui-desktop-4 · the end of the match on a small desktop window: the panel (a flex item of #endwin) shrank to the window
   before its scale, so at 821 x 462 verdict, board and BACK took 411 px real of 821 and the player's own name was cut. Now it
   keeps its 1240 px of layout (620 px real at the 0.5 floor, as the phone's panel, bh-phone.css), never wider than the window
   less 16 px; 1366 and 1920 unchanged. The score line and BACK on the B273 floor too */
html:not(.bh-touch,.bh-phone,.bh-tablet) #endwin #endPanel{flex:none;max-width:calc((100vw - 16px) / var(--bh-k,1))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #endwin :is(#endSub,#endBack,#endAgain){font-size:max(22px,var(--f11d))}

/* B273b · the chats under B273's rule (CrazyGames' small desktop windows, 821×462 and 907×510: --bh-k at its 0.5 floor): the
   home's chat panel and FRIENDS → CLAN → CHAT never under ~11 px real (--f11d, bh-ui.css), their counts' pills growing
   with their number. 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 :is(#lbChat,.bh-chat-clan) :is(.bh-chat-hint,.bh-chat-note,.bh-chat-role){font-size:max(13px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbChat,.bh-chat-clan) .bh-chat-line.is-system{font-size:max(15px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .bh-chat-clan .bh-chat-menu .bh-btn{font-size:max(15px,var(--f11d))}
/* MIG-ui-desktop-1 · FRIENDS and its CLAN tab on the same floor (B273: never under ~11 px real on a small desktop window): at
   821 x 462 ADD, COPY, YOU ARE, the rows' status, the referral steps and the clan's lines read 7.5-10 px. Each keeps its 1920
   size (max); the ⋯ and the big yellow buttons (.frbtn.more 22 px, .frbtn.big 24 px) and the touch screens untouched */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .fr-status small{font-size:max(15px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends :is(.frbtn:not(.more,.big,.x),.frmsg,.fr-you,.bh-step-label small){font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends :is(.frempty,.frnote,.frcount,.fr-row .who .fr-lv,.frp .who>span,.frp .who b small){font-size:max(18px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .bh-step-node{font-size:max(19px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends :is(.bh-goal-title,.bh-goal-sub,.cl-sub,.cl-state,.cl-need){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends :is(#frPartyBox .vpt,#frLinkText,.fr-sub,.bh-step-label){font-size:max(22px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbChat,.bh-chat-clan) .bh-chat-send{font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbChat,.bh-chat-clan) :is(.bh-chat-input,.bh-chat-more){font-size:max(18px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbChat,.bh-chat-clan) .bh-chat-lines{font-size:max(19px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh :is(#lbChat,.bh-chat-clan) .bh-chat-who .bh-tag-clan{font-size:max(12px,.72em,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #lbChat .bh-chat-tabs .bh-tab{font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .cl-subtabs .bh-tab{font-size:max(22px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #lbChat .bh-chat-tabs .bh-count{font-size:max(14px,var(--f11d));min-width:max(22px,calc(var(--f11d) + 8px));height:max(22px,calc(var(--f11d) + 8px))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh .cl-subtabs .bh-count{font-size:max(15px,var(--f11d));min-width:max(24px,calc(var(--f11d) + 8px));height:max(24px,calc(var(--f11d) + 8px))}

/* B333 · «Sign up to keep …» (src/signupnudge.js): the bubble hanging from the player card's GUEST · SIGN IN, drawn on the
   design system as the toast (the owner's pick of round 2, 01/11): #frToast's panel (--surface-1, --border-strong
   --pink-bright, --radius-md, --shadow-panel), the things in --yellow, words and × only, its arrow on GUEST · SIGN IN.
   On the page (real px, outside the home's scale), under the streak's moment. */
.sn-bubble{position:fixed;z-index:50;display:flex;align-items:center;gap:10px;max-width:min(400px,calc(100vw - 16px));padding:10px 6px 10px 16px;
	background:var(--surface-1);color:var(--ink);border:var(--border-strong) solid var(--pink-bright);border-radius:var(--radius-md);box-shadow:var(--shadow-panel);font-family:var(--font-ui)}
.sn-bubble[hidden]{display:none}
.sn-bubble::before{content:"";position:absolute;top:-10px;left:calc(var(--arrow,40px) - 9px);border:9px solid transparent;border-top:0;border-bottom:9px solid var(--pink-bright)}
.sn-text{margin:0;flex:1;font-size:16px;line-height:1.25;font-weight:700}
.sn-text b{color:var(--yellow);font-weight:800}
.sn-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;color:var(--ink-2);cursor:pointer;font-size:20px}
.sn-x:hover{color:var(--ink)}
html.bh-touch .sn-text{font-size:max(15px,var(--f12,15px))}

/* B334 round 3 · ACCOUNT NEEDED (src/accountneed.js): a window like italianbrawls.it's when a guest opens FRIENDS (friends for
   accounts) or CLAN, or taps JOIN on a clan's page: .bh-modal (the design system's), the tab's name, the ACCOUNT NEEDED card
   (--surface-2, --yellow tag), CREATE ACCOUNT (.bh-btn-primary .bh-btn-lg) and NOT NOW (.bh-btn-secondary); nothing else
   (no invites). As #acctPending: fixed over the page on --scrim, the box at the home's scale (--bh-k), z 16 over the menu */
#acctNeed{position:fixed;inset:0;z-index:16;background:var(--scrim)}
#acctNeed[hidden]{display:none}
#acctNeed .an-box{position:absolute;left:50%;top:50%;width:820px;max-width:calc(100vw - 32px);transform:translate(-50%,-50%) scale(clamp(.6,var(--bh-k,1),1.4));border-color:var(--yellow)}
#acctNeed .an-body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6) var(--space-8) var(--space-8)}
#acctNeed .an-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) var(--space-6);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md)}
#acctNeed .an-tag{font-size:24px;font-weight:900;letter-spacing:.12em;color:var(--yellow)}
#acctNeed .an-text{margin:0;font-size:28px;line-height:1.3;font-weight:700;color:var(--ink)}
#acctNeed .an-go,#acctNeed .an-later{width:100%}
html.bh-touch #acctNeed .an-box{width:min(560px,calc(100vw - 32px));transform:translate(-50%,-50%)}
html.bh-touch #acctNeed .bh-modal-head{height:56px}
html.bh-touch #acctNeed .bh-modal-title{font-size:28px}
html.bh-touch #acctNeed .bh-close{width:44px;height:44px;font-size:26px}
html.bh-touch #acctNeed .an-body{gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4)}
html.bh-touch #acctNeed .an-card{padding:var(--space-3) var(--space-4);gap:var(--space-1)}
html.bh-touch #acctNeed .an-tag{font-size:max(14px,var(--f12))}
html.bh-touch #acctNeed .an-text{font-size:max(16px,var(--f12))}
html.bh-touch #acctNeed .bh-btn{height:var(--t44,44px);min-height:var(--t44,44px);font-size:max(16px,var(--f12))}

/* CrazyGames (the owner, 01/11: «se l'azione è fare il login con CrazyGames, mostrare solo quello»): a guest's FRIENDS / CLAN
   has their LOG IN alone over the tabs, one button, no words around it */
#m.bh #vfriends .fr-cgonly{flex:none;display:flex}
#m.bh #vfriends .fr-cgonly[hidden]{display:none}
#m.bh #vfriends .fr-cgonly .fr-cglogin{width:100%}
html.bh-touch #m.bh #vfriends .fr-cgonly .fr-cglogin{height:var(--t44);min-height:var(--t44);font-size:max(16px,var(--f12))}

/* B372 · STORE and BATTLE PASS · COMING SOON (owner 01/11): the window of B334 (#acctNeed: .bh-modal, the scrim, the yellow
   edge), words only (round 2: no champion's picture); OK, and SIGN IN first for a guest who can sign up */
#soonPop{position:fixed;inset:0;z-index:16;background:var(--scrim)}
#soonPop[hidden]{display:none}
#soonPop .sp-box{position:absolute;left:50%;top:50%;width:760px;max-width:calc(100vw - 32px);transform:translate(-50%,-50%) scale(clamp(.6,var(--bh-k,1),1.4));border-color:var(--yellow)}
#soonPop .sp-body{display:flex;gap:var(--space-6);padding:var(--space-6) var(--space-8) var(--space-8)}
#soonPop .sp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
#soonPop .sp-text{margin:0;font-size:28px;line-height:1.3;font-weight:700;color:var(--ink)}
#soonPop .sp-guest{margin:0;font-size:24px;line-height:1.3;font-weight:700;color:var(--ink-2)}
#soonPop .sp-guest[hidden],#soonPop .sp-sign[hidden]{display:none}
#soonPop .sp-acts{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-3)}
#soonPop .sp-acts .bh-btn{width:100%}
html:not(.bh-touch,.bh-phone,.bh-tablet) #soonPop .sp-guest{font-size:max(24px,var(--f11d))}
html.bh-touch #soonPop .sp-box{width:min(520px,calc(100vw - 32px));transform:translate(-50%,-50%)}
html.bh-touch #soonPop .bh-modal-head{height:56px}
html.bh-touch #soonPop .bh-modal-title{font-size:28px}
html.bh-touch #soonPop .bh-close{width:44px;height:44px;font-size:26px}
html.bh-touch #soonPop .sp-body{gap:var(--space-4);padding:var(--space-3) var(--space-4) var(--space-4)}
html.bh-touch #soonPop .sp-main{gap:var(--space-2)}
html.bh-touch #soonPop .sp-acts{gap:var(--space-2)}
html.bh-touch #soonPop :is(.sp-text,.sp-guest){font-size:max(16px,var(--f12))}
html.bh-touch #soonPop .bh-btn{height:var(--t44,44px);min-height:var(--t44,44px);font-size:max(16px,var(--f12))}
/* B383 (owner 02/11, tests/responsive.mjs): FRIENDS and CLAN at every size. The tabs, the online count and the filter wrap to a
   second line where they do not fit (a tablet: ALL ▾ covered INVITE FRIENDS), one line as before where they do; the
   desktop's small windows keep their words 11.2 px real or more (--f11d, B273); on a touch screen a friend's #1234 is 12 px
   or more (Design System «Clan sul telefono»), the filter and COPY LINK 44 px, the party chat's field and SEND too */
#m.bh #vfriends .fr-head{flex-wrap:wrap;row-gap:var(--space-2)}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends :is(#frOnline,#frMyTag,#clInvite){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .frp>.acts>.frbtn.x{font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .cl-head>.cl-info>span{font-size:max(18px,var(--f11d))}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends .frp .who b small{font-size:max(18px,var(--f12))}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends #frFilter{min-width:var(--t44)}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vfriends #frCopyLink{min-height:var(--t44)}
html.bh-touch #m.bh #lbChat :is(.bh-chat-input,.bh-chat-row .bh-btn){height:max(44px,var(--t44))}

/* B501 (owner 09/11, live 2026.11.8-2: on a phone in a browser with its address bar, BATTLE PASS · COMING SOON ran off the
   screen, its title cut, its buttons huge, no way to scroll): the windows that stand on the page itself (#soonPop, #acctNeed:
   .bh-modal on --scrim, outside the home's scaled layer). On a touch screen they had the phone's sizes (--t44, --f12: meant
   for a layer scaled by --bh-k, 46 and 12 px once scaled) with no scale: 60-70 px tall buttons. Now:
   - on a touch screen the box takes the home's scale (--bh-k) as on a PC: 46 px buttons, text 12 px and up on the glass;
   - the scrim is the visible viewport (100dvh: the browser's bars out; 100vh where dvh is unknown);
   - the box is never taller than it (16 px of air): its body scrolls */
:is(#soonPop,#acctNeed){bottom:auto;height:100vh;height:100dvh}
:is(#soonPop .sp-box,#acctNeed .an-box){display:flex;flex-direction:column;
 max-height:calc((100vh - 16px) / clamp(.6,var(--bh-k,1),1.4));max-height:calc((100dvh - 16px) / clamp(.6,var(--bh-k,1),1.4))}
:is(#soonPop .sp-body,#acctNeed .an-body){min-height:0;overflow-y:auto;overscroll-behavior:contain}
html.bh-touch :is(#soonPop .sp-box,#acctNeed .an-box){transform:translate(-50%,-50%) scale(var(--bh-k,1));max-width:none;
 max-height:calc((100vh - 16px) / var(--bh-k,1));max-height:calc((100dvh - 16px) / var(--bh-k,1))}
html.bh-touch #soonPop .sp-box{width:min(calc(520px / var(--bh-k,1)),calc((100vw - 32px) / var(--bh-k,1)))}
html.bh-touch #acctNeed .an-box{width:min(calc(560px / var(--bh-k,1)),calc((100vw - 32px) / var(--bh-k,1)))}
html.bh-touch :is(#soonPop,#acctNeed) .bh-modal-head{height:calc(var(--t44,44px) + 12px)}
html.bh-touch :is(#soonPop,#acctNeed) .bh-modal-title{font-size:max(28px,calc(var(--f12) * 1.6))}
html.bh-touch #acctNeed .bh-close{width:var(--t44,44px);height:var(--t44,44px);font-size:calc(var(--t44,44px) * .55)}