/* PROFILE (src/profileui.js): the modal over the home, laid out at 1920 x 1080 like the menu and scaled by --bh-k round its centre. Components from the design system (bh-ui.css: .bh-modal, .bh-stat, .bh-champcard, .bh-champrow, .bh-cattab, .bh-level); this file only places them. */ #profile{position:fixed;inset:0;z-index:14;overflow:hidden;background:var(--scrim)} #profile[hidden]{display:none} #profile [hidden]{display:none!important} #profile .pf-box{position:absolute;left:50%;top:50%;width:1372px;height:868px;transform:translate(-50%,-50%) scale(var(--bh-k,1))} /* B499b (the owner 07/11, set 2026-11-07_b499-storia-profilo row 4, option a): no champion art on the left; who and the level are a band over the tabs, and the tabs take the whole width */ #profile .pf-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--space-4);padding:var(--space-4)} /* the band: who, the level */ #profile .pf-side{display:flex;flex-direction:row;align-items:center;gap:var(--space-12);min-height:0;padding:var(--space-4);overflow:hidden; background:linear-gradient(180deg,var(--surface-2),var(--surface-1) 55%)} #profile .pf-who{display:flex;align-items:center;gap:var(--space-5)} #profile .pf-avatar{width:128px;height:128px;border:var(--border-select) solid var(--pink-bright);border-radius:var(--radius-sm)} #profile .pf-names{min-width:0;display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start} #profile .pf-name{display:flex;align-items:center;gap:var(--space-3);font-size:42px;line-height:1.05;font-weight:800;max-width:min(290px,100%)} #profile .pf-name span{unicode-bidi:isolate;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #profile .pf-name button{display:inline-flex;font-size:28px;color:var(--yellow)} #profile .pf-name input{width:250px;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:inherit;font-size:34px} /* B330: the rename's check under the name while it is typed (namecheck.js): asking in --ink-3, free in --green, taken or not allowed in --red (the sign-up's USERNAME line, account.css .au-err) */ #profile .pf-name-msg{margin:0;min-height:1.2em;font:700 18px/1.2 var(--font-ui);color:var(--ink-3)} #profile .pf-name-msg[data-state=free]{color:var(--green)} #profile .pf-name-msg:is([data-state=shape],[data-state=taken],[data-state=invalid],[data-state=locked]){color:var(--red)} #profile .pf-tag{font-size:28px;font-weight:700;color:var(--ink-2);letter-spacing:.02em} #profile .pf-clan bdi{unicode-bidi:isolate} #profile .pf-clan{font-size:18px;font-weight:700;color:var(--ink-2);letter-spacing:.04em} /* B192: the clan's size and leader */ #profile .pf-clan{max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* B221b (B199 defect 7): one line, a long leader ends in … */ #profile .pf-clan[hidden]{display:none} #profile .pf-clan.is-link{cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px} /* B221b: opens the clan's page */ #profile .pf-clan.is-link:hover{color:var(--ink)} #profile .pf-guest{height:26px;font-size:16px} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-guest{font-size:max(16px,var(--f11d));height:auto;min-height:26px} /* (B499b: GUEST was 8 px at 821) */ html:not(.bh-touch,.bh-phone,.bh-tablet) #profile :is(.pf-fav .bh-champcard-role,.pf-match .bh-tag-mode,.pf-match .bh-match-mode){font-size:max(22px,var(--f11d))} /* (B499b: 11.0 px at 821) */ #profile .pf-lvl{display:flex;align-items:center;gap:var(--space-4);flex:0 1 520px;min-width:0} #profile .pf-lvl .bh-level{width:72px;height:64px;font-size:44px} #profile .pf-xp{flex:1;display:flex;flex-direction:column;gap:var(--space-2)} #profile .pf-xpline{display:flex;justify-content:space-between;align-items:baseline;font-size:24px;font-weight:800;text-transform:uppercase} #profile .pf-xpline .bh-num{font-size:19px;font-weight:700;color:var(--ink-2)} #profile .pf-xp .bh-bar{height:18px} /* the right column: tabs, then the tab */ #profile .pf-main{min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--space-3)} /* six tabs in the column on a PC (the row does not scroll there): MATCH HISTORY was cut at the right edge at 24 px (B117e) */ #profile .pf-tabs .bh-cattab{flex:1 1 auto;min-width:0;height:60px;padding:0 var(--space-3);font-size:20px;white-space:nowrap} #profile .pf-tabs .bh-cattab:last-child{flex-grow:1.4} #profile .pf-tabs .bh-cattab .bh-i{display:none} /* B179: the tabs' icons on a phone only (bh-phone.css) */ #profile .pf-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--space-3)} #profile .bh-panel{padding:var(--space-4);box-shadow:none} #profile .bh-panel-title{font-size:30px;margin-bottom:var(--space-3);display:flex;align-items:baseline;gap:var(--space-4)} #profile .bh-panel-title .bh-panel-meta{font-size:16px} #profile .pf-stats .bh-stat{height:92px;grid-template-columns:48px 1fr;column-gap:var(--space-3);padding:0 var(--space-3)} #profile .pf-stats .bh-stat-label{letter-spacing:.02em} #profile .pf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)} #profile .pf-recent .bh-stat-center{height:124px} #profile .pf-fav .bh-champcard{grid-template-columns:112px 1fr} #profile .pf-fav .bh-champcard .bh-art{width:112px;height:124px} #profile .pf-fav .bh-champcard-name{font-size:36px} #profile .pf-fav .bh-champcard-text{font-size:17px} #profile .pf-notep{flex:1;display:flex;align-items:center;justify-content:center} #profile .pf-champs,#profile .pf-hist{flex:1;min-height:0;display:flex;flex-direction:column} #profile .pf-champlist,#profile .pf-histlist{flex:1;min-height:0;overflow-y:auto;padding-right:var(--space-2)} /* the online match history: a row a match, its board under it when picked */ #profile .pf-match{display:grid;grid-template-columns:48px 60px minmax(0,1fr) 112px 128px 92px 88px;align-items:center;column-gap:var(--space-3);width:100%;height:84px; padding:0 var(--space-4) 0 var(--space-3);margin-bottom:var(--space-2);background:var(--surface-2);border:var(--border-hair) solid var(--line);border-radius:var(--radius-md);text-align:left} #profile .pf-match.is-selected{border-color:var(--yellow)} #profile .pf-match .bh-match-mode{font-size:22px;font-weight:800;white-space:nowrap} #profile .pf-match > span:nth-child(3){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #profile .pf-match .bh-avatar{width:48px!important;height:48px!important} #profile .pf-match .bh-match-when{font-size:16px;text-align:right;white-space:nowrap} #profile .pf-match .bh-result-word{font-size:24px} #profile .pf-match .bh-kda-value{font-size:24px;white-space:nowrap} #profile .pf-match .bh-match-map{font-size:18px;color:var(--ink-2)} #profile .pf-mscore{display:flex;flex-direction:column;align-items:center;gap:2px} #profile .pf-mscore b{font-size:28px;line-height:1;font-weight:800} #profile .pf-mscore small{font-size:15px;font-weight:700;color:var(--ink-2)} #profile .pf-mscore .bh-tag{height:22px;font-size:15px} #profile .pf-board{margin:-2px 0 var(--space-3);padding:var(--space-3);background:var(--surface-0);border-radius:var(--radius-md);display:grid;gap:var(--space-3)} #profile .pf-mextra{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)} #profile .pf-mextra .bh-stat{height:72px} #profile .pf-mextra .bh-stat > .bh-i{font-size:34px} #profile .pf-mextra .bh-stat-value{font-size:28px} #profile .pf-more{align-self:center;margin:var(--space-2) auto} /* B221b · CHOOSE A NEW NAME (renameui.js): a name with a staff sign changes before anything else; laid out at 1920 x 1080 and scaled by --bh-k like the clan's page; no close of any kind. Tokens: --scrim, .bh-panel, --surface-0, --line-strong, --pink-bright (focus), --red (the field's refusal), .bh-btn-primary */ .rn-scrim{position:fixed;inset:0;z-index:65;background:var(--scrim);touch-action:none} /* B221c: over every layer of the home and its popups (the clan's page 15, the daily and level ones 58-60), under the startup screen (70: it lifts before this opens), the ban screen and ROTATE YOUR PHONE */ body:has(.rn-scrim:not([hidden])) #bhHomeHint{display:none} /* (the phone's PLAY FULL SCREEN hint, 9999, waits till the name is changed) */ .rn-scrim[hidden]{display:none} .rn-box{position:absolute;left:50%;top:50%;width:720px;transform:translate(-50%,-50%) scale(var(--bh-k,1));display:flex;flex-direction:column; align-items:stretch;gap:var(--space-4);padding:var(--space-8);font-family:var(--font-ui);color:var(--ink)} .rn-title{margin:0;font:900 44px/1 var(--font-ui);letter-spacing:.04em} .rn-why{margin:0;font:600 24px/1.3 var(--font-ui);color:var(--ink-2)} .rn-in{height:68px;padding:0 var(--space-4);background:var(--surface-0);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-md); color:var(--ink);font:800 32px/1 var(--font-ui);letter-spacing:.02em;outline:none} .rn-in:focus{border-color:var(--pink-bright)} .rn-msg{margin:0;min-height:1.3em;font:700 20px/1.3 var(--font-ui);color:var(--red)} .rn-go{height:72px;font-size:28px} /* a phone: the window in the safe area, its words 12 px or more, the field and CONFIRM thumb-sized */ html.bh-phone .rn-box{width:min(calc(var(--ph-w) - 48px),900px);padding:var(--space-6)} html.bh-phone .rn-title{font-size:max(44px,calc(var(--f13) * 1.6))} html.bh-phone .rn-why,html.bh-phone .rn-msg{font-size:max(24px,var(--f13))} /* B330 · CHOOSE YOUR NAME (nameui.js): renameui.js's window, with the field's check (namecheck.js) under it and LATER beside CONFIRM. Tokens: the window's above; the check's line --ink-3 while asking, --green when free, --red when taken or not allowed (the sign-up's USERNAME line, account.css .au-err); LATER .bh-btn-secondary, CONFIRM .bh-btn-primary */ .nm-msg{color:var(--ink-3)} .nm-msg[data-state=free]{color:var(--green)} .nm-msg:is([data-state=shape],[data-state=taken],[data-state=invalid],[data-state=locked]){color:var(--red)} .nm-actions{display:flex;gap:var(--space-4)} .nm-actions .bh-btn{flex:1;height:72px;font-size:28px} html.bh-phone .rn-in{height:max(68px,var(--t44));font-size:max(32px,calc(var(--f13) * 1.3))} html.bh-phone .rn-go{height:max(72px,var(--t44));font-size:max(28px,var(--f13))} /* B221b: MATCH HISTORY's boards, the clan's tag of that match after a name; the name ends in … first */ #profile .pf-board .mh-name{display:flex;align-items:center;min-width:0;white-space:nowrap} #profile .pf-board .mh-name .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate} #profile .pf-board .mh-name .bh-tag-clan{flex:none} /* B499: the whole lobby in a match's board. Tokens: #tag and Lv. --ink-3 (the TAB's small #1234), BOT the TAB's tag (B473: --cyan with --on-yellow, --radius-sm), a skin's portrait its store art (the head, not the whole body), the old match's line --ink-3 with the info icon; on a phone every small word 12 px or more on screen (--f12) */ #profile .pf-board .mh-name{gap:var(--space-2)} #profile .pf-board .mh-name > :not(.nm){flex:none} #profile .pf-board .mh-name .bh-tag-clan{margin-left:0} #profile .pf-board :is(.mh-tg,.mh-lv){font-size:16px;font-weight:700;color:var(--ink-3)} #profile .pf-board .mh-lv{margin-left:auto;padding-left:var(--space-2);color:var(--ink-2)} #profile .pf-board .mh-bot{padding:2px 6px;border-radius:var(--radius-sm);font:800 15px/1 var(--font-ui);font-style:normal;letter-spacing:.1em;color:var(--on-yellow);background:var(--cyan)} #profile .pf-board .bh-avatar.is-skin{background-size:190% auto;background-position:50% 6%;background-color:var(--surface-3)} #profile .pf-partial{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:18px;font-weight:700;color:var(--ink-3)} #profile .pf-partial .bh-i{flex:none;font-size:22px} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-board :is(.mh-tg,.mh-lv,.mh-bot,.pf-partial){font-size:max(15px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-board .bh-mini-row{font-size:max(22px,var(--f11d))} /* (the names and numbers: 10.9 px at 821 before B499) */ html:is(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-board :is(.mh-tg,.mh-lv,.mh-bot,.bh-tag-clan,.bh-mini-head span,.pf-partial){font-size:max(15px,var(--f12))} html:is(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-board .bh-mini-row{font-size:max(22px,var(--f12))} /* 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) #profile .pf-xpline .bh-num{font-size:max(19px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-tabs .bh-cattab{font-size:max(20px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-notep .bh-note{font-size:max(22px,var(--f11d))} /* B383 (owner 02/11, iPhone Safari: «100%» → «100'», «30.0» → «30.0(», the labels out of their cards): a value that does not fit its card is fitted by profileui.js fitValues after each drawing: smaller down to the design system's floor (--f12 on a touch screen, --f11d on a PC), then on two lines at its space; a value that fits is not touched (regia's counter-check of round 1: 1920 and 1366 identical with common values). In CHAMPIONS a long value goes on two lines first («10 H» / «0 M»). Tokens: bh-ui.css .bh-stat, .bh-champrow */ #profile .pf-champlist.is-tight .bh-champrow{column-gap:var(--space-2)} #profile .pf-champlist.is-tight .bh-champrow-cell{min-width:0} /* (fitValues: a row that overflowed; its values then fitted to their cells) */ /* the level's figures beside its crown: 1-2 figures as before (44 px), 3 smaller and clear of the crown */ #profile .pf-lvl .bh-level.is-wide{padding-right:30px} #profile .pf-lvl .bh-level.is-wide #pfLv{font-size:27px} /* the tiles: --n columns where they fit (a PC: 4 and 3, as before), fewer on a narrow phone (568 × 320: 2), never narrower than --tmin; FAVORITE CHAMPION and RECENT PERFORMANCE side by side down to 420 px each, then one over the other */ #profile .bh-stats{--tmin:190px;grid-template-columns:repeat(auto-fit,minmax(max(min(var(--tmin),100%),calc((100% - (var(--n,4) - 1) * var(--space-3)) / var(--n,4))),1fr))} #profile .pf-recent .bh-stats{--tmin:112px} #profile .pf-row{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))} html:is(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-clan{font-size:max(18px,var(--f11))} html:is(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-match .bh-match-map{font-size:max(18px,var(--f12))} /* MATCH HISTORY: when a result, a K / D / A or a score is wider than its column (profileui.js fitValues: .is-roomy), those columns take the room their words need (as wide as before at least) and the mode and map give it (their names end in …, as before); a phone the same with its five columns. A list whose words fit keeps the columns it had */ #profile .pf-histlist.is-roomy .pf-match.bh-match{grid-template-columns:48px 60px minmax(0,1fr) minmax(112px,auto) minmax(128px,auto) minmax(92px,auto) minmax(88px,auto)} #profile .pf-histlist.is-roomy .pf-match :is(.bh-result-word,.bh-kda-value,.bh-result-score){white-space:nowrap} html.bh-phone #profile .pf-histlist.is-roomy .pf-match.bh-match{grid-template-columns:44px minmax(0,1fr) minmax(96px,auto) minmax(110px,auto) minmax(80px,auto)} html.bh-phone #profile .pf-match :is(.bh-result-word,.bh-kda-value){font-size:max(24px,var(--f12))} html.bh-phone #profile .pf-mscore b{font-size:max(28px,var(--f12))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile :is(.pf-more,.pf-device){font-size:max(20px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-match .bh-result-score{font-size:max(22px,var(--f11d))} html:is(.bh-touch,.bh-phone,.bh-tablet) #profile .bh-kda-label{font-size:max(15px,var(--f11))} html.bh-phone #profile .pf-more{min-height:var(--t44)} /* CHAMPIONS on a list narrower than a row's eight columns (568 × 320, B354-r2's 667 × 375 with 6-figure values): the picture and the name on a line, the six numbers under them in six equal columns; wider lists as before */ #profile .pf-champlist{container-type:inline-size} @container (max-width: 620px) { html #profile .pf-champlist .bh-champrow.bh-champrow{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;height:auto;row-gap:var(--space-2);column-gap:var(--space-2);padding:var(--space-2) var(--space-3)} html #profile .pf-champlist .bh-champrow.bh-champrow .bh-art{grid-column:1;width:64px;height:64px} html #profile .pf-champlist .bh-champrow > span:nth-child(2){grid-column:2 / -1} } html:is(.bh-touch,.bh-phone,.bh-tablet) #profile .sto-coll .st-cos-kind h4{font-size:max(18px,var(--f11))} html.bh-phone #profile .sto-coll .st-cos-kind h4{font-size:max(18px,var(--f12))} /* B501: «WEAPON SKINS 0 / 5» is a line, not a label: 12 px at 874 x 330 */ /* the tabs on a phone narrower than six tabs and a name (568 × 320: MATCH HISTORY went past the window): the open tab an icon as well, in its yellow, the panel's title naming it (set B383, row «schede strette»); wider: as before */ #profile .pf-main{container-type:inline-size} @container (max-width: 600px) { html.bh-phone #profile .pf-tabs .bh-cattab.is-active{width:var(--t44);padding:0;justify-content:center} html.bh-phone #profile .pf-tabs .bh-cattab.is-active span{display:none} } /* the desktop's small windows (1024 × 768, 821 × 462, 1280 × 720: --bh-k 0.5-0.67): every small text of the profile 11.2 px real or more (--f11d, the rule of B273 for every screen of the small iframes); each keeps its size where that is already more, so 1920 × 1080 is unchanged; there (the floor at work: --bh-k under 0.66, a window under 1265 × 711) a long label goes on two lines instead of an ellipsis; a bigger window keeps the label on its line as before */ html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .bh-stat-label{font-size:max(17px,var(--f11d))} @media (max-width: 1264px), (max-height: 710px) { html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .bh-stat-label{white-space:normal;line-height:1} } html:not(.bh-touch,.bh-phone,.bh-tablet) #profile :is(.bh-panel-title .bh-panel-meta,.bh-champrow-cell small,.pf-match .bh-match-when){font-size:max(16px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile :is(.bh-champrow-role,.pf-fav .bh-champcard-text){font-size:max(17px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile :is(.pf-clan,.sto-coll .st-cos-kind h4,.pf-match .bh-match-map){font-size:max(18px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile :is(.bh-kda-label,.pf-mscore small,.pf-mscore .bh-tag){font-size:max(15px,var(--f11d))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-tag .bh-tag-clan{font-size:max(.72em,var(--f11d))} /* the board under an open match: its four tiles in 2 columns where 4 would cut HEADSHOTS; its heads and clan tags ≥ 11.2 px real on the desktop's small windows; FAVORITE CHAMPION's text ≥ 12 px on a tablet with a mouse too */ #profile .pf-mextra{grid-template-columns:repeat(auto-fit,minmax(max(min(var(--mx,180px),100%),calc((100% - 3 * var(--space-2)) / 4)),1fr))} html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-mextra{--mx:calc(var(--f11d) * 6.2 + 100px)} /* (HEADSHOTS whole at the floor's size: 169 px at 1920, 4 columns as before) */ html:not(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-board :is(.bh-mini-head span,.bh-tag-clan){font-size:max(15px,var(--f11d))} html:is(.bh-touch,.bh-phone,.bh-tablet) #profile .pf-fav .bh-champcard-text{font-size:max(17px,var(--f12))}