/* Account layout. Components and tokens come from the same bh-ui.css design system as the lobby. */
#acctBtn{align-self:flex-start;background:none;border:none;padding:0;margin-top:3px;cursor:pointer;
 font:800 12px/1 var(--font-ui);letter-spacing:.1em;color:var(--ink-2);text-align:left}
#acctBtn:hover{color:var(--ink)}
#acctBtn b{color:var(--pink-bright)}
#acct{position:fixed;inset:0;z-index:14;display:none;align-items:center;justify-content:center;
 padding:var(--space-4);background:var(--scrim)}
#acct.on{display:flex}
#acctPanel{width:min(640px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:var(--space-6)}
#acctHead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
 padding-bottom:var(--space-5);border-bottom:1px solid var(--line)}
#acctHead .bh-screen-title{font-size:48px}
#acctBody{padding-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}
#acctWho{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-width:0}
#acctName{font-size:32px;line-height:1.1;font-weight:800;overflow-wrap:anywhere}
#acctKind{font-size:17px;line-height:1.2;font-weight:700;letter-spacing:.04em;color:var(--cyan);overflow-wrap:anywhere}
#acctStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
#acctStats div{background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
#acctStats b{display:block;font-size:32px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
#acctStats span{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
#acctSignIn{padding:var(--space-5);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md)}
#acctSignIn .bh-panel-title{font-size:28px}
#acct .acct-help{margin:var(--space-2) 0 var(--space-4);font-size:20px;line-height:1.35;color:var(--ink-2)}
#acct [hidden]{display:none!important}
#acctAuthGo{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)}
#acctMsg{font-size:18px;line-height:1.3;color:var(--green);overflow-wrap:anywhere}
#acctMsg:empty{display:none}
#acctMsg.err{color:var(--red)}
#acctOut{align-self:flex-start}
#acctFoot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
 border-top:1px solid var(--line);padding-top:var(--space-4)}
#acctFoot a,#acctErase{background:none;border:0;padding:var(--space-2) 0;cursor:pointer;font:800 16px var(--font-ui);
 letter-spacing:.04em;color:var(--ink-2);text-decoration:none}
#acctFoot a:hover{color:var(--ink)}
#acctErase:hover,#acctErase.armed{color:var(--red)}
@media(max-width:480px){
 #acctPanel{padding:var(--space-4)}
 #acctHead .bh-screen-title{font-size:36px}
 #acctHead .bh-btn{padding:0 var(--space-3)}
 #acctStats{gap:var(--space-2)}
 #acctStats div{padding:var(--space-3)}
 #acctStats b{font-size:28px}
 #acctSignIn{padding:var(--space-4)}
 #acctFoot{align-items:flex-start;flex-wrap:wrap}
}

/* the ban screen (src/banui.js): over everything, not to be closed; the design system's modal, laid
   out at 1920 x 1080 and scaled by --bh-k round the centre */
#banScreen{position:fixed;inset:0;z-index:1000;background:rgba(8,11,16,.94)}
#banScreen[hidden]{display:none}
#banScreen .ban-box{position:absolute;left:50%;top:50%;width:900px;transform:translate(-50%,-50%) scale(clamp(.6,var(--bh-k,1),1.4));border-color:var(--red)}
#banScreen .bh-modal-head > .bh-i{color:var(--red)}
#banScreen .ban-body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6) var(--space-8) var(--space-6)}
#banScreen .ban-lead{margin:0;font-size:30px;font-weight:800}
#banScreen .ban-row{display:flex;align-items:baseline;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-md);font-size:28px}
#banScreen .ban-k{width:120px;flex:none;font-size:18px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#banScreen .ban-row b{font-weight:800}
#banScreen .ban-left{margin-left:auto;font-size:22px;font-weight:800;color:var(--yellow);font-variant-numeric:tabular-nums}
#banScreen .ban-help{margin:0;font-size:21px;line-height:1.35;color:var(--ink-2)}
#banScreen a{color:var(--cyan)}
#banScreen .ban-foot{margin:0;font-size:17px}

/* an account waiting to be deleted (src/accountui.js showPending): RESTORE or KEEP DELETING, laid out like the ban screen */
#acctPending{position:fixed;inset:0;z-index:16;background:var(--scrim)}
#acctPending[hidden]{display:none}
#acctPending .ap-box{position:absolute;left:50%;top:50%;width:860px;max-width:calc(100vw - 32px);transform:translate(-50%,-50%) scale(clamp(.6,var(--bh-k,1),1.4));border-color:var(--yellow)}
#acctPending .ap-body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6) var(--space-8)}
#acctPending .ap-lead{margin:0;font-size:30px;line-height:1.25;font-weight:800;overflow-wrap:anywhere}
#acctPending .ap-help{margin:0;font-size:21px;line-height:1.35;color:var(--ink-2)}
#acctPending .ap-msg{margin:0;font-size:19px;font-weight:700;color:var(--green)}
#acctPending .ap-msg:empty{display:none}
#acctPending .ap-msg.err{color:var(--red)}
#acctPending .ap-acts{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2)}

/* the sign-in popups (src/accountauth.js; owner's mockup docs/ui-refs/2026-10-17/login-register.webp): CREATE ACCOUNT
   and LOGIN, a champion beside the form. Laid out at the 1920 x 1080 reference and scaled by --bh-k round the centre
   like the ban screen; ids lead every rule because bh-ui.css loads after this file. */
#acctAuth{position:fixed;inset:0;z-index:15;display:none;background:var(--scrim);--au-accent:var(--pink-bright);--au-link:var(--cyan)}
#acctAuth.on{display:block}
#acctAuth[data-mode="login"]{--au-accent:var(--cyan)}
#acctAuth [hidden]{display:none!important}
#acctAuth button,#acctAuth input{font-family:var(--font-ui)}
#acctAuth .au-box{position:absolute;left:50%;top:50%;width:820px;transform:translate(-50%,-50%) scale(clamp(.6,var(--bh-k,1),1.4));
 background:var(--surface-1);border:3px solid #39415a;border-radius:14px;box-shadow:0 0 0 2px #06080c,0 24px 60px rgba(0,0,0,.55);overflow:hidden}
#acctAuth .au-head{position:relative;padding:30px 104px 22px 64px;background:linear-gradient(180deg,#0b0f16,#10151e);border-bottom:1px solid var(--line)}
#acctAuth .au-title{display:flex;align-items:flex-start;gap:14px;margin:0;font-size:84px;line-height:.95;font-weight:900;letter-spacing:.01em;
 text-transform:uppercase;color:var(--ink);text-shadow:0 5px 0 #000,0 0 1px #000}
#acctAuth .au-crown{height:66px;width:auto;margin-top:-6px;transform:rotate(9deg);filter:drop-shadow(0 4px 0 rgba(0,0,0,.6))}
#acctAuth .au-sub{margin:10px 0 0;font-size:31px;line-height:1.1;font-weight:700;color:#e9ecf4}
#acctAuth .au-close{position:absolute;top:22px;right:22px;width:60px;height:60px;font-size:28px;background-color:var(--surface-0)}
/* body (B444): the champion on the left (bleeding to the border), on the right the two ways in, alike (Discord, Google:
   --surface-0 fill, the brand's mark in its colours), the status line and the terms. Nothing to fill in */
#acctAuth .au-body{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:380px;padding:0 40px 30px 0}
#acctAuth .au-art{grid-column:1;grid-row:1;position:relative;pointer-events:none}
#acctAuth .au-art img{position:absolute;left:0;bottom:-30px;height:calc(100% + 18px);width:auto}
#acctAuth .au-main{grid-column:2;grid-row:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding-top:30px}
#acctAuth .au-social{display:flex;flex-direction:column;gap:18px}
#acctAuth .au-soc{width:100%;height:78px;gap:18px;padding:0 24px;border-width:2px;font-size:27px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
 background-color:var(--surface-0)}
#acctAuth .au-soc:not([aria-disabled="true"]):hover{background-color:var(--surface-2)}
#acctAuth .au-soc .au-i,#acctAuth .au-soc .au-g{flex:none;width:36px;height:36px;font-size:36px}
#acctAuth .au-soc[aria-disabled="true"]{cursor:not-allowed}
#acctAuth .au-soc[aria-disabled="true"] > span:not(.au-soon){opacity:.78}
#acctAuth .au-discord{border-color:#3d4590}
#acctAuth .au-discord .au-i{color:#7c86ff}
#acctAuth .au-gbtn{border-color:var(--line-strong)}
#acctAuth.is-busy .au-soc[aria-busy]{filter:saturate(.6) brightness(.9);cursor:progress}
#acctAuth .au-google{min-width:0;display:flex;flex-direction:column;align-items:stretch}
#acctAuth #auGoogle{display:flex;justify-content:center;min-height:44px}
#acctAuth .au-soon{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 7px;border:1px solid var(--line-strong);border-radius:4px;
 font-size:14px;font-weight:800;letter-spacing:.06em;color:var(--yellow)}
#acctAuth .au-msg{min-height:28px;margin:16px 0 0;font-size:21px;line-height:1.25;font-weight:700;color:var(--green);overflow-wrap:anywhere}
#acctAuth .au-msg:empty{min-height:0;margin:0}
#acctAuth .au-msg.info{color:var(--ink-2);font-weight:600}
#acctAuth .au-msg.err{color:var(--red)}
#acctAuth .au-terms{margin:22px 0 0;font-size:19px;line-height:1.35;font-weight:600;color:var(--ink-2)}
#acctAuth .au-link{display:inline;padding:0;background:none;border:0;font:inherit;font-weight:700;color:var(--au-link);text-decoration:none;cursor:pointer}
#acctAuth .au-link:hover{text-decoration:underline}
/* the popup's own icons, on bh-ui.css's mask pattern */
#acctAuth .au-i{display:inline-block;flex:none;width:1em;height:1em;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
#acctAuth .au-i-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.5 4.5h17A1.5 1.5 0 0 1 22 5.4L12 11.6 2 5.4a1.5 1.5 0 0 1 1.5-.9Z'/%3E%3Cpath fill='%23fff' d='M2 7.2 12 13.4l10-6.2V18a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18Z'/%3E%3C/svg%3E")}
#acctAuth .au-i-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 5C6.5 5 2.7 9.2 1.5 12c1.2 2.8 5 7 10.5 7s9.3-4.2 10.5-7C21.3 9.2 17.5 5 12 5Zm0 2.4a4.6 4.6 0 1 1 0 9.2 4.6 4.6 0 0 1 0-9.2Zm0 2.4a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4Z'/%3E%3C/svg%3E")}
#acctAuth .au-i-eye-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 5C6.5 5 2.7 9.2 1.5 12c1.2 2.8 5 7 10.5 7s9.3-4.2 10.5-7C21.3 9.2 17.5 5 12 5Zm0 2.4a4.6 4.6 0 1 1 0 9.2 4.6 4.6 0 0 1 0-9.2Zm0 2.4a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4Z'/%3E%3Cpath fill='%23fff' d='M3.6 2.2 21.8 20.4l-1.6 1.6L2 3.8Z'/%3E%3C/svg%3E")}
#acctAuth .au-i-discord{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.865-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.058a.082.082 0 0 0 .031.056 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.292a.074.074 0 0 1 .078-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03ZM8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418Zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E")}
#acctAuth .au-i-google{-webkit-mask:none;mask:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9Z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 8 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7Z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-2 1.5-4.5 2.4-7.2 2.4-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44Z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9Z'/%3E%3C/svg%3E")}
/* a narrow window (a phone held upright): the buttons alone, unscaled */
@media (max-width:760px){
 #acctAuth{overflow-y:auto}
 #acctAuth .au-box{position:relative;left:auto;top:auto;width:calc(100% - 24px);margin:12px auto;transform:none}
 #acctAuth .au-head{padding:20px 76px 16px 20px}
 #acctAuth .au-title{font-size:44px}
 #acctAuth .au-crown{height:38px}
 #acctAuth .au-sub{font-size:20px}
 #acctAuth .au-close{top:14px;right:14px;width:48px;height:48px}
 #acctAuth .au-body{display:flex;flex-direction:column;min-height:0;padding:0 16px 18px}
 #acctAuth .au-art{display:none}
 #acctAuth .au-main{padding-top:16px}
}
/* B333b (owner 01/11, `tasto` → B): a guest's SIGN IN on the home's player card is a real button: the hairline border
   (--line-strong), the raised fill (--surface-2), the user icon (bh-i-user), SIGN IN. accountui.js puts .acct-signin on it for a
   guest on our own site only (a portal's build keeps a plain GUEST, rule 24); B333's toast still points at it (rules 48/60).
   Sizes: a PC's 13 px real on the zoomed home, never under --f11d (bh-home.css); a phone's or a tablet's --f12 (bh-phone.css) */
#m.bh #mplayer #acctBtn.acct-signin{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--t44,38px);margin:0 0 0 6px;padding:6px 12px 6px 10px;
 border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);
 white-space:nowrap;text-align:left;box-shadow:0 2px 0 rgba(0,0,0,.45);align-self:center;justify-self:end}
#m.bh #mplayer #acctBtn.acct-signin:hover,#m.bh #mplayer #acctBtn.acct-signin:focus-visible{border-color:var(--ink)}
#m.bh #mplayer #acctBtn.acct-signin b{color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
#m.bh #mplayer #acctBtn.acct-signin .bh-i{color:var(--ink-2)}
/* (over bh-home.css's floor for the old link, max(14px, --f11d), which ties on specificity and comes later) */
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mplayer #acctBtn.acct-signin b{font-size:max(15px,calc(13px / var(--bh-k,1)),var(--f11d,0px))}
html:not(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mplayer #acctBtn.acct-signin .bh-i{font-size:max(18px,calc(15px / var(--bh-k,1)))}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mplayer #acctBtn.acct-signin{height:var(--t44);margin:0 0 0 4px;padding:0 12px 0 10px}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mplayer #acctBtn.acct-signin b{font-size:max(15px,var(--f12))}
/* (a tablet, with the fingers or a mouse: the 17 px of bh-phone.css's SIGN IN, as before the button; the phone keeps the mockup's 15) */
html.bh-tablet #m.bh #mplayer #acctBtn.acct-signin b{font-size:max(17px,var(--f12))}
html:is(.bh-touch,.bh-phone,.bh-tablet) #m.bh #mplayer #acctBtn.acct-signin .bh-i{font-size:max(18px,var(--f13,18px))}
/* B333c: a narrow phone (667 × 375, an iPhone SE across): the open view's big tab in the rail met the card by 6 px; the button
   keeps its border, fill, icon and words, with ~12 px less inside it (mobile_menus «the key controls do not overlap») */
@media (max-width: 700px) {
 html.bh-phone #m.bh #mplayer #acctBtn.acct-signin{gap:4px;padding:0 8px 0 6px}
}
/* B333c: under 600 px (568 × 320, iPhone SE 1st gen. across) the button keeps its border, fill and icon, its word read by a
   screen reader only (the bar's words, B439, stay in one row beside it) */
@media (max-width:599px) {
 html.bh-phone #m.bh #mplayer #acctBtn.acct-signin{gap:0;padding:0 calc(10px / var(--bh-k));min-width:var(--t44);justify-content:center}
 html.bh-phone #m.bh #mplayer #acctBtn.acct-signin b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}