/* The settings that act on the page (src/settings.js applyPageFlags: body classes + --hud-user) and the
   settings screen's newer pieces (2026-10-11: the channel mutes, the sample buttons, the notes, eight tabs),
   plus the champions' subtitles (src/voice.js). Loaded after bh-hud.css so its rules win. */

/* eight tabs on one row */
#settings #setTabs button.bh-cattab{font-size:18px;padding:0 var(--space-2);gap:8px;min-width:0}
#settings #setTabs button.bh-cattab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#settings .setnote{flex:none;margin:2px 0 6px;padding:0 var(--space-5);font:500 16px/1.3 var(--font-ui);color:var(--ink-2)}
/* a row the platform turned off (CrazyGames' disableChat, B265): seen, not changed; its .setnote says why */
#settings .setrow.is-off .setlabel,#settings .setrow.is-off .schoice span,#settings .setrow.is-off .kbind{color:var(--ink-3)}
#settings .setrow .smute{flex:none;width:96px;height:36px;background:var(--surface-0);border:var(--border-hair) solid var(--line-strong);
 border-radius:var(--radius-sm);color:var(--ink-2);font:800 15px/1 var(--font-ui);letter-spacing:.04em;cursor:pointer}
#settings .setrow .smute:hover{border-color:var(--ink);color:var(--ink)}
#settings .setrow .smute.on{background:var(--magenta,#ff40db);border-color:var(--magenta,#ff40db);color:#fff}
#settings .setrow .stest{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:none;
 border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink);cursor:pointer}
#settings .setrow .stest:hover{border-color:var(--yellow);color:var(--yellow)}
#settings .sbtn:disabled{opacity:.45;cursor:default}
#settings .enemyswatch{flex:none;width:350px;height:28px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35)}

/* the HUD's size: the player's factor on top of the screen's own (bh-hud.css --hk) */
#hud{--hk:clamp(.58,calc(clamp(.72,var(--bh-k,1),1.4) * var(--hud-user,1)),1.82)}

/* what the GAMEPLAY page turns off */
body.no-killfeed #hud #hFeed{display:none}
body.no-hitmarkers #hud #hm{display:none}
body.no-dmgdir #hud #ddir{display:none}
body.no-abhints #hud #abHint{display:none!important}

/* reduce flashing effects: the hurt edge glows softer, the stun's vignette stops swimming */
body.reduce-flash #dmg{transition:box-shadow .6s;opacity:.45}
body.reduce-flash #stunfx.on{animation:none;opacity:.55}

/* the champions' lines (voice.js): bottom centre, over the HUD, under the menus */
#subs{position:fixed;left:50%;bottom:28vh;transform:translateX(-50%);z-index:12;display:flex;flex-direction:column;align-items:center;
 gap:6px;pointer-events:none;width:min(80vw,1100px);font-family:var(--font-ui,system-ui)}
#subs .sub{max-width:100%;padding:6px 14px;border-radius:6px;background:rgba(10,10,14,.72);color:#fff;font-weight:600;
 font-size:calc(22px * var(--sub-k,1));line-height:1.25;text-align:center;text-shadow:0 1px 2px #000;opacity:1;transition:opacity .25s}
#subs .sub b{font-weight:800;margin-right:.35em;letter-spacing:.03em}
#subs .sub.out{opacity:0}
#subs .sub.is-team b::after{content:" (team)";font-weight:600;opacity:.7;font-size:.8em}
body.sub-s #subs{--sub-k:.8} body.sub-m #subs{--sub-k:1} body.sub-l #subs{--sub-k:1.35}
body.sub-plain #subs .sub{background:none;text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px #000}
body.no-subtitles #subs{display:none}

/* the reward flashes go entirely */
body.reduce-flash .rfx-flash{visibility:hidden}

/* B273 · CrazyGames' small desktop windows (821×462, 907×510: --bh-k at its 0.5 floor): this screen's small texts never under
   ~11 px real, as B269b did for the home (--f11d, bh-ui.css). Each keeps its own size where that is already more: 1920 and
   touch screens are unchanged */
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings :is(.xpre span,.setrow .smute){font-size:max(15px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings .setnote{font-size:max(16px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings :is(.sethead,.sbtn){font-size:max(17px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings :is(#setTabs button.bh-cattab,.kbind){font-size:max(18px,var(--f11d))}
/* where the tabs' labels grow (--f11d over 18 px: under 1195 x 672), each tab as wide as its label, so ACCESSIBILITY is whole */
@media (max-width:1194px),(max-height:671px){html:not(.bh-touch,.bh-phone,.bh-tablet) #settings #setTabs button.bh-cattab{flex:1 1 auto}}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings :is(.schoice.bh-stepper span,#setTutorial){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings :is(.setlabel,.setread,#setFoot .bh-btn){font-size:max(22px,var(--f11d))}
/* the GPU line under the preset (settings.js, 11 px inline at every size): 11 px real here too */
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings #setBody>div:is([style*="font-size: 11px"],[style*="font-size:11px"]){font-size:max(11px,calc(11px / var(--bh-k,1)))!important}

/* MIG-ui-desktop-2 · a 24 px real click area on small desktop windows (portal frames down to --bh-k 0.5): the toggles read
   28 × 16 px real at 821 × 462, the stepper arrows 20 × 17, the profile's rename pencil 14 × 14. An invisible ::before
   centred on the control grows only what is under 24 px (the phone's toggle does the same, bh-phone.css); the look is the
   same at every size and at 1920 the area is the control itself. Desktop only: never a phone or tablet with a mouse */
html:not(.bh-touch,.bh-phone,.bh-tablet) :is(#settings .bh-stepper button,#profile .pf-name button){position:relative}
html:not(.bh-touch,.bh-phone,.bh-tablet) :is(#settings .setrow .stoggle,#profile .pf-name button)::before{content:"";position:absolute;left:50%;top:50%;
 width:max(100%,calc(24px / var(--bh-k,1)));height:max(100%,calc(24px / var(--bh-k,1)));transform:translate(-50%,-50%)}
html:not(.bh-touch,.bh-phone,.bh-tablet) #settings .bh-stepper button::before{content:"";position:absolute;left:0;top:50%;width:100%;
 height:max(100%,calc(24px / var(--bh-k,1)));transform:translateY(-50%)}