/* LEADERBOARD (src/leaderboard.js; owner 2026-10-19: layout 1 of the workspace card "Negozio campioni e skin ·
   Classifiche"; the review's note of the same day: no podium, the top 3 in the list in gold, silver and bronze with a
   crown each). The design system's tokens and parts (bh-ui.css), sizes at the menu's 1920 x 1080 reference (scaled
   by --bh-k like every layer of the menu). Gold and silver are the design system's own (--rarity-legendary,
   --rarity-common), bronze is defined here in the same key; my row is the one yellow thing; no accent borders.
   No title (B117: the rail's lit LEADERBOARD tab says where you are). Tablet: no countdown (mockup); phone (html.bh-phone, the phone layout of bh-phone.css): no reward line,
   the rail tile reads RANKS. */
#navBoard .lb-nt-ph{display:none}
html.bh-phone #navBoard .lb-nt{display:none}
html.bh-phone #navBoard .lb-nt-ph{display:inline}

/* one opaque panel, the boards in it (owner 22/10, F1: no more see-through backdrop; bh-ui.css «Menu screens») */
#m.bh #mmain>section#vboard.bhscreen:not(#mstep1){flex-direction:column;gap:var(--space-6);overflow:hidden;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)}
#vboard button{font-family:var(--font-ui);color:inherit;cursor:pointer}

/* the head: the three boards, the countdown, WEEK · SEASON, GLOBAL · FRIENDS */
#vboard .lb-head{flex:none;display:flex;align-items:center;gap:var(--space-8);min-width:0;height:64px}
#vboard .lb-tabs{border-bottom:0;gap:var(--space-4)}
#vboard .lb-tabs .bh-tab{padding:0 var(--space-3) var(--space-2);background:none;border:0;font-size:30px}
#vboard .lb-when{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);font-size:20px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
#vboard .lb-when .bh-i{font-size:24px}
#vboard .lb-seg{flex:none;display:inline-flex;padding:var(--space-1);background:var(--surface-0);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md)}
#vboard .lb-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-size:20px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
#vboard .lb-seg button.is-active{background:var(--surface-3);color:var(--ink)}
#vboard .lb-seg button:not(.is-active):hover{color:var(--ink)}

/* the body: one list, centred, the reward's line over it */
#vboard{--lb-gold:var(--rarity-legendary);--lb-silver:var(--rarity-common);--lb-bronze:#c8834e}
#vboard .lb-body{flex:1;min-height:0;display:flex;justify-content:center}
#vboard .lb-body.is-loading{opacity:.6}
#vboard .lb-reward{flex:none;display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);padding:10px 20px;background:var(--surface-1);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);white-space:nowrap;overflow:hidden}
#vboard .lb-reward>.bh-i{flex:none;font-size:30px;color:var(--yellow)}
#vboard .lb-reward>span{display:flex;align-items:baseline;gap:var(--space-3);min-width:0}
#vboard .lb-reward b{font-size:22px;font-weight:900;text-transform:uppercase}
#vboard .lb-reward span span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:20px;font-weight:600;color:var(--ink-2)}

/* the list: the columns, the rows (they scroll), my row pinned under them */
#vboard .lb-list{flex:1;max-width:1320px;min-width:0;min-height:0;display:flex;flex-direction:column}
#vboard .lb-cols,#vboard .lb-row{display:grid;grid-template-columns:70px 44px minmax(0,1fr) 140px 160px;align-items:center;column-gap:var(--space-4);padding:0 20px}
#vboard .lb-cols{flex:none;padding-bottom:10px;font-size:18px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
#vboard .lb-cols>:first-child{text-align:center}
#vboard .lb-cols>:nth-child(n+4){text-align:right}
#vboard .lb-rows{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
#vboard .lb-row{flex:none;width:100%;height:60px;background:var(--surface-2);border:0;border-radius:var(--radius-sm);font-size:24px;font-weight:800;text-align:left}
#vboard .lb-row:hover{background:var(--surface-3)}
/* the top 3: their colour in a wash from the left, on the place and on its crown */
#vboard .lb-row.is-gold{--m:var(--lb-gold)}
#vboard .lb-row.is-silver{--m:var(--lb-silver)}
#vboard .lb-row.is-bronze{--m:var(--lb-bronze)}
#vboard .lb-row.is-top{height:66px;background:linear-gradient(90deg,color-mix(in srgb,var(--m) 30%,var(--surface-2)),var(--surface-2) 60%)}
#vboard .lb-row.is-top:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--m) 38%,var(--surface-3)),var(--surface-3) 60%)}
#vboard .lb-row.is-top .lb-rk{color:var(--m)}
#vboard .lb-row.is-top .lb-v{color:var(--m)}
#vboard .lb-medal{flex:none;display:inline-flex;font-size:24px;color:var(--m);font-style:normal}
#vboard .lb-row.is-me{background:var(--pink-tint)}
#vboard .lb-rk{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:26px;font-weight:900;font-style:italic;color:var(--ink-2);font-variant-numeric:tabular-nums}
#vboard .lb-nm{display:flex;align-items:center;gap:var(--space-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
/* a name in its own box (B192b): isolated from the right-to-left (Arabic, Hebrew), it ends in an ellipsis; the tag and LV stay */
#vboard .lb-nm .nm{unicode-bidi:isolate;min-width:1.5em;overflow:hidden;text-overflow:ellipsis}
#vboard .lb-nm :is(.bh-tag-clan,.lb-lv,.lb-crown){flex:none}
/* B221b: the CLANS board: the tag in the name's place (bigger), a shield in the face's, my clan's TOP x% beside its tag */
#vboard .lb-clan .lb-clanav{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-2);font-size:26px}
#vboard .lb-clan .lb-ct{margin:0;height:40px;padding:0 var(--space-3);font-size:24px;font-weight:900;color:var(--ink)}
#vboard .lb-clan .lb-mewhat{flex:none;margin-left:var(--space-3);color:var(--ink-2);text-transform:none}
#vboard .lb-me .lb-mewhat{color:var(--on-yellow)}
#vboard .lb-s{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
#vboard .lb-v{text-align:right;font-size:28px;font-weight:900;font-variant-numeric:tabular-nums}
#vboard .lb-crown{flex:none;display:inline-flex;font-size:22px;color:var(--yellow)}
#vboard .lb-me{margin-top:var(--space-3);background:var(--yellow);color:var(--on-yellow)}
#vboard button.lb-me:hover{background:var(--yellow);filter:brightness(1.06)}
#vboard .lb-me .lb-rk,#vboard .lb-me .lb-s,#vboard .lb-me .lb-crown{color:var(--on-yellow)}
#vboard .lb-empty{padding:var(--space-6);font-size:22px;font-weight:600;color:var(--ink-2);text-align:center}
#vboard .lb-note{flex:1;min-height:0}

/* tablet: the desktop's layout, a little narrower (mockup: no title, no countdown) */
html.bh-touch:not(.bh-phone) #vboard .lb-when{display:none}
html.bh-touch:not(.bh-phone) #vboard .lb-seg:first-of-type{margin-left:auto}
html.bh-touch:not(.bh-phone) #vboard .lb-cols,html.bh-touch:not(.bh-phone) #vboard .lb-row{grid-template-columns:64px 44px minmax(0,1fr) 110px 110px}

/* phone: one screen, no scrolling page: the head in a row, the list under it */
html.bh-phone #m.bh #mmain>section#vboard.bhscreen:not(#mstep1){overflow:hidden;padding:var(--space-3);gap:var(--space-3)}
html.bh-phone #m.bh #mmain>section#vboard>.lb-body{flex:1 1 auto!important;min-height:0}
html.bh-phone #m.bh #mmain>section#vboard>.lb-note{flex:1 1 auto!important}
html.bh-phone #vboard :is(.lb-when,.lb-reward){display:none}
html.bh-phone #vboard .lb-head{height:auto;gap:var(--space-3)}
html.bh-phone #vboard .lb-tabs .bh-tab{font-size:26px;min-height:var(--t44)}
html.bh-phone #vboard .lb-seg:first-of-type{margin-left:auto}
html.bh-phone #vboard .lb-seg button{height:max(44px,var(--t44));padding:0 var(--space-4)}
html.bh-phone #vboard .lb-list{max-width:none}
html.bh-phone #vboard :is(.lb-cols,.lb-row){grid-template-columns:72px 44px minmax(0,1fr) 92px 96px;column-gap:var(--space-3);padding:0 var(--space-4)}
html.bh-phone #vboard .lb-cols{font-size:max(16px,var(--f11))}
html.bh-phone #vboard .lb-row,html.bh-phone #vboard .lb-row.is-top{height:max(56px,var(--t44));font-size:24px}
html.bh-phone #vboard .lb-v{font-size:26px}

/* the profile's MATCH HISTORY tab opens this device's matches (screens.js), off the rail since LEADERBOARD took its tile */
#profile .pf-device{flex:none;align-self:center;margin:var(--space-3) auto 0}
html.bh-touch #profile .pf-device{height:var(--t44)}
/* B107: the account's level by the name (the server's, server/leaderboard.mjs) */
#vboard .lb-lv{margin-left:var(--space-2);font-size:.75em;font-weight:900;color:var(--yellow)}

/* 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) #vboard .lb-seg button{font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #vboard .lb-note{font-size:max(22px,var(--f11d))}

/* MIG-ui-desktop-3 · the 24 px real click area of MIG-ui-desktop-2 (approved 31/10; the store tag beside it is B273) on the board's controls: at 821 x 462 the stat
   tabs (KILLS, WINS, K/D, CLANS) are 19 px real tall, WEEK / SEASON and GLOBAL / FRIENDS 22. An invisible ::before grows only
   their height (the tab's ::after is its underline); the look is the same and at 1366 and 1920 nothing changes. Desktop only */
html:not(.bh-touch,.bh-phone,.bh-tablet) #vboard .lb-seg button{position:relative}
html:not(.bh-touch,.bh-phone,.bh-tablet) :is(#vboard .lb-tabs .bh-tab,#vboard .lb-seg button)::before{content:"";position:absolute;left:0;top:50%;width:100%;
 height:max(100%,calc(24px / var(--bh-k,1)));transform:translateY(-50%)}

/* B383 (owner 02/11, tests/responsive.mjs): the LEADERBOARD's small words 11.2 px real or more in the desktop's small windows
   (--f11d, B273) and on a touch screen (--f11: the clan's tag and LV after a name); 1920 unchanged */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vboard :is(.lb-head .lb-when>span,.lb-reward>span>span){font-size:max(20px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vboard :is(.lb-cols>span,.lb-row .lb-nm .lb-lv){font-size:max(18px,var(--f11d))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vboard .lb-row .lb-nm .bh-tag-clan{font-size:max(17.28px,var(--f11d))}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vboard .lb-row .lb-nm .lb-lv{font-size:max(18px,var(--f11))}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #vboard .lb-row .lb-nm .bh-tag-clan{font-size:max(17.28px,var(--f11))}