#accountHome{position:fixed;top:max(14px,env(safe-area-inset-top));right:16px;z-index:40;border:2px solid #dbc6ee;border-radius:24px;padding:12px 18px;background:#fff8ff;color:#583176;font-weight:800;box-shadow:0 4px 16px #51246a15}#accountStudio{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 30px);box-sizing:border-box;overflow:auto;border:2px solid #dec4ed;border-radius:26px;padding:26px;background:#fffaff;color:#493253;box-shadow:0 24px 80px #291d4e50;font-family:inherit}#accountStudio::backdrop{background:#26163d88}#accountStudio h2{margin:0;font-size:27px}#accountStudio h3{font-size:19px;margin:22px 0 10px}#accountStudio p{line-height:1.5}#accountStudio button,#accountStudio input{font:inherit;min-height:46px;border:2px solid #e1cbed;border-radius:13px;padding:10px 14px;box-sizing:border-box}#accountStudio input:not([type=radio]){width:100%;background:white;color:#382349;font-size:16px}#accountStudio label{display:block;margin:12px 0 6px;font-weight:700}#accountStudio button{cursor:pointer;background:#f0e1fa;color:#56326e;font-weight:800}#accountStudio button.primary{background:#8750b0;color:white;border-color:#8750b0}#accountStudio button:disabled{opacity:.55;cursor:default}#accountStudio .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}#accountStudio .head{justify-content:space-between}#accountStudio .head button{border:0;background:transparent;font-size:24px}#accountStudio .choice{padding:12px;border:1px solid #e4d2ee;border-radius:14px;display:flex;gap:10px;align-items:center;font-weight:500;background:white}#accountStudio input[type=radio]{accent-color:#8750b0;min-height:auto}#accountStudio small{display:block;color:#795e89;line-height:1.5}#accountStatus{padding:12px;background:#f2e7fa;border-radius:14px;min-height:24px}#accountStudio .friend-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #eadcef}#accountStudio .friend-actions{display:flex;gap:6px;flex-wrap:wrap}#accountStudio .friend-row button{padding:8px 10px;font-size:14px}#accountStudio .online{color:#287954}#accountStudio .offline{color:#89758f}#accountStudio [hidden]{display:none!important}#accountBusy{position:fixed;inset:0;display:grid;place-items:center;background:#fff5ff;z-index:100000;font:700 19px system-ui;color:#78459a}#accountBusy[hidden]{display:none}#accountStudio button:focus-visible,#accountStudio input:focus-visible{outline:3px solid #19a6ac;outline-offset:2px}

body:has(#play:not([hidden])) #accountHome{top:auto;bottom:max(14px,env(safe-area-inset-bottom))}

/* The dialog is the screen cutout. The case is aligned using the artwork's
   493 × 1082 opening at (121, 241) on the 1127 × 1536 canvas. */
#accountStudio{
 --phone-screen-width:min(450px,36vw,38dvh);
 width:var(--phone-screen-width);height:calc(var(--phone-screen-width) * 2.194726);
 max-height:none;overflow:visible;padding:0;border:0;border-radius:15% / 6.8%;
 background:transparent;color:#401c35;box-shadow:none;isolation:isolate;
}
#accountStudio::backdrop{background:#220e21d9}
.stylez-phone-case{
 position:absolute;left:-24.54%;top:-22.27%;width:228.6%;height:auto;max-width:none;
 z-index:2;pointer-events:none;user-select:none;
}
.stylez-phone-shell{
 display:flex;flex-direction:column;height:100%;min-height:0;
 border-radius:inherit;background:#fff4fa;overflow:hidden;
}
.stylez-phone-top{position:relative;display:flex;justify-content:space-between;align-items:center;padding:8px 18px 0;min-height:31px;font-size:9px;font-weight:900;letter-spacing:.1em}
.stylez-phone-top i{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:clamp(58px,19vw,103px);height:19px;border-radius:999px;background:#160e16;box-shadow:inset -7px 0 #211b29}
#accountStudio .head{flex-wrap:nowrap;padding:8px 15px 12px;border-bottom:1px solid #f6bfdb;background:#fff4fa}
#accountStudio h2{font-size:clamp(21px,6vw,32px);line-height:1.05;letter-spacing:-.04em}
.stylez-phone-label{display:block;margin-bottom:4px;color:#9c2264;font-size:9px;font-weight:900;letter-spacing:.18em}
#accountStudio .head button{flex:0 0 44px;padding:0;background:#ffdaed;color:#632349;border-radius:50%;line-height:1}
.stylez-phone-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 15px 14px;touch-action:pan-y}
.stylez-phone-content:focus-visible{outline:2px solid #d83082;outline-offset:-2px}
.stylez-phone-home{flex:0 0 15px;background:linear-gradient(#472839,#472839) center / 29% 4px no-repeat}
#accountStudio #accountStatus{background:#ffe2f1}
#accountStudio button{background:#ffe0f0;color:#652447;border-color:#f2b4d3}
#accountStudio button.primary{background:#a92268;border-color:#a92268;color:white}
@media(max-width:560px){
 #accountStudio{--phone-screen-width:min(47vw,38dvh);transform:translateX(-32%)}
 #accountStudio .head{padding:5px 7px 7px;gap:4px}
 #accountStudio h2{font-size:clamp(14px,4.4vw,23px)}
 #accountStudio .head button{flex-basis:32px;min-height:32px;font-size:20px}
 #accountStudio .stylez-phone-top{padding-inline:10px;font-size:7px}
 #accountStudio .stylez-phone-top i{width:32%;height:14px}
}

/* Stylez Connect app, inside the existing handset. */
#accountStudio .stylez-phone-content{
 background:radial-gradient(ellipse at 100% 10%,#5a124b 0%,transparent 56%),#201421;
 color:#fff5fd;padding:0 12px 15px;
}
#accountStudio #accountStatus{
 background:#36233a;color:#fbd6ec;border:1px solid #704368;border-radius:13px;
 font-size:12px;margin:10px 0;padding:8px 10px;min-height:0;
}
.stylez-connect-hero{
 position:relative;overflow:hidden;display:grid;gap:5px;margin:12px 0;padding:14px;
 border:1px solid #fd89c4;border-radius:19px;background:
 repeating-linear-gradient(135deg,#fff1 0 1px,transparent 1px 12px),
 linear-gradient(110deg,#ff5db2,#ffadce);color:#321126;box-shadow:0 4px 0 #802a65;
}
.stylez-connect-hero>span{font-size:10px;font-weight:900;letter-spacing:.2em}
.stylez-connect-hero>strong{font-size:clamp(23px,6.5vw,34px);font-weight:900;line-height:1;letter-spacing:-.07em}
.stylez-connect-hero b{position:absolute;right:8px;top:0;font-size:40px;color:#f5ff92;text-shadow:2px 2px #69264f}
#accountStudio .stylez-connect-hero small{color:#54213e;font-weight:700}
.stylez-profile-hero{background:linear-gradient(115deg,#d9f96a,#f8ffb3);border-color:#ecffad}
.stylez-profile-hero b{color:#a43775;text-shadow:none}
.stylez-app-card,#accountStudio .friend-row{border:1px solid #61425d;background:#302135;border-radius:17px;padding:10px;margin:10px 0}
.stylez-app-card:has(#accountGuest[hidden]){display:none}
#accountStudio .stylez-app-card h3{margin:3px 0 8px;font-size:16px}
#accountStudio .stylez-app-card p{font-size:13px}
#accountStudio .stylez-app-card small,#accountStudio .friend-row small{color:#f6cade}
#accountStudio .choice{color:#40213d}
#accountStudio .choice small{color:#79526d}
#accountStudio #accountFriendForm label{margin:0 0 6px;font-size:13px}
#accountStudio #accountFriendForm .row{flex-wrap:nowrap}
#accountStudio #accountFriendForm input{min-width:0}
#accountStudio #accountFriendForm button{flex:none;padding-inline:7px;font-size:12px}
#accountStudio .friend-row{flex-wrap:wrap;gap:8px;padding:10px}
.stylez-friend-identity{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 8px;align-items:center;overflow-wrap:anywhere}
.stylez-friend-avatar{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#fc83be;color:#2c1525;font-size:12px;font-weight:900}
#accountStudio .friend-row .online{color:#e5ff82}
#accountStudio .friend-row button{min-height:38px}
.stylez-phone-tabs{position:static;pointer-events:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:6px 10px;background:#2a1a2c;border-top:1px solid #744164}
#accountStudio .stylez-phone-tabs button{
 display:flex;align-items:center;justify-content:center;gap:5px;min-height:39px;padding:4px;
 border:1px solid transparent;background:transparent;color:#ffcce9;font-size:12px;
}
#accountStudio .stylez-phone-tabs button span{font-size:18px;line-height:1}
#accountStudio .stylez-phone-tabs button[aria-pressed=true]{background:#f783c0;color:#34162b;border-color:#ffabd5}
.stylez-phone-home{background:linear-gradient(#e3b6d7,#e3b6d7) center / 29% 4px no-repeat,#2a1a2c}

@media(max-width:440px){
 #accountStudio .stylez-phone-content{padding-inline:7px}
 #accountStudio .stylez-phone-tabs{padding-inline:5px;gap:3px}
 #accountStudio .stylez-phone-tabs button{font-size:10px}
 #accountStudio #accountFriendForm .row{flex-wrap:wrap}
 #accountStudio #accountFriendForm input{flex-basis:100%!important}
}


/* Keep the home artwork visible while account data loads. */
#accountBusy.boot-loading{background:transparent;place-items:end center;padding:0 16px max(18px,env(safe-area-inset-bottom));color:#742052;font-size:14px;text-shadow:0 1px 3px #fff}