/* Phone and tablet log in, new account and character creator (js/windows/account-ui.js, js/windows/mobile-role.js).
   Art: the CO mobile kit in /ui/mobile and the map loading wallpaper; desktop keeps styles.css and role.css. */
body.mobile-ui .join-screen{--gold:#e2c47c;--gold2:#a8894a;--ink:#efe6cf;--mute:#b3ab98;--serif:Palatino,"Book Antiqua",Georgia,serif;
 --safe-t:max(6px,env(safe-area-inset-top));--safe-l:max(10px,env(safe-area-inset-left));--safe-r:max(10px,env(safe-area-inset-right));--safe-b:max(8px,env(safe-area-inset-bottom))}
/* The game forces Courier New on every element; the mobile layer uses its own faces, as the HUD does. */
body.mobile-ui .join-screen *{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
body.mobile-ui .join-screen :is(.brand,.m-account-tab,#enter,#register-ok,.m-role-title,.m-role-vocation,.m-role-tab,.m-role-size,.m-role-create){font-family:var(--serif)!important}
body.mobile-ui .join-screen:not(.role-active){background:linear-gradient(180deg,#05070a4d,#05070ad9),url(/ui/map-loading/twin-city.webp?v=b40a51cdcdf64dab) center/cover #0b0f13}

/* Log in and new account */
body.mobile-ui .join-screen .account-panel{width:min(380px,100%);padding:20px 22px 14px;border:0;border-radius:6px;background:url(/ui/mobile/popbg.png?v=3add4e59f44b5c98) 0 0/100% 100%;box-shadow:0 12px 36px #000c}
body.mobile-ui .join-screen .brand{margin:0 0 14px;color:var(--gold);font-size:24px;font-weight:600;text-align:center;letter-spacing:.5px;text-shadow:0 2px 4px #000}
body.mobile-ui .join-screen h1,body.mobile-ui #name-guidance,body.mobile-ui :is(#new-account,#register-back){display:none}
.m-account-tabs{display:flex;gap:6px;margin-bottom:14px}
/* An id outranks styles.css's .account-panel button rules, including the :hover one iOS keeps after a tap. */
body.mobile-ui #join-screen .m-account-tab{flex:1;width:auto;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:url(/ui/mobile/tab.png?v=3b5f3f0e7e8c4f3a) 0 0/100% 100%;color:#1d2b3b;font-size:14px;font-weight:600;text-shadow:0 1px 0 #ffffff70}
body.mobile-ui #join-screen .m-account-tab[aria-selected="true"]{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6);color:#2b1d05;text-shadow:0 1px 0 #fff6;cursor:default}
.preparing .m-account-tabs,#join-form:has(#new-account[hidden]) .m-account-tabs{display:none}
body.mobile-ui .join-screen .login-row{width:100%;height:44px;border-radius:4px;background:url(/ui/mobile/input.png?v=12bd0780715989da) 0 0/100% 100%;box-shadow:inset 0 0 0 1px #a8894a59}
body.mobile-ui .join-screen .login-row + .login-row{margin-top:10px}
body.mobile-ui .join-screen .login-row:focus-within{box-shadow:inset 0 0 0 1px var(--gold)}
/* 16px keeps iOS from zooming into a focused field. */
body.mobile-ui .join-screen .account-panel .login-row input{left:0;width:100%;height:100%;padding:0 14px;color:#fff9e8;font-size:16px}
body.mobile-ui .join-screen .account-panel .login-row input::placeholder{color:#8d8778}
body.mobile-ui .join-screen .guidance{margin:8px 0 0;color:var(--mute);font-size:12px;line-height:1.45}
body.mobile-ui .join-screen :not(.preparing) > .login-buttons{display:block;margin-top:14px}
body.mobile-ui .join-screen :is(#enter,#register-ok){width:100%;height:44px;background:url(/ui/mobile/btnY.png?v=be065432cc957cb3) 0 0/100% 100%;color:#3a2604;font-size:16px;font-weight:700;text-shadow:0 1px 0 #fff7}
body.mobile-ui .join-screen :is(#enter,#register-ok):active:enabled{background-image:url(/ui/mobile/btnY.png?v=be065432cc957cb3);filter:brightness(.88)}
body.mobile-ui .join-screen :is(#enter,#register-ok):disabled{opacity:1;filter:grayscale(1) brightness(.6)}
body.mobile-ui .join-screen .loading-bar{width:100%;margin-top:4px}
body.mobile-ui .join-screen .loading-status{min-height:18px;margin-top:10px;color:#d8cfb8;font-size:12px;line-height:1.45;text-align:center}
@media (max-height:430px){
 body.mobile-ui .join-screen .account-panel{padding:14px 20px 10px}
 body.mobile-ui .join-screen .brand{margin-bottom:10px;font-size:20px}
 .m-account-tabs{margin-bottom:10px}
 body.mobile-ui .join-screen .login-row{height:40px}
 body.mobile-ui .join-screen .login-row + .login-row{margin-top:8px}
 body.mobile-ui #register-guidance{display:none}
 body.mobile-ui .join-screen .login-buttons{margin-top:10px}
 body.mobile-ui .join-screen :is(#enter,#register-ok){height:42px}
 body.mobile-ui .join-screen .loading-status{margin-top:6px}
}

/* Character creator: the engine draws the backdrop and the two bodies under this layer; the stage stays clear. */
.m-role{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(240px,290px);grid-template-rows:38px minmax(0,1fr);gap:8px 14px;
 padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);color:var(--ink)}
.m-role-head{grid-column:1/3;display:flex;align-items:center;gap:10px;min-width:0}
.m-role-back{flex:none;width:36px;height:36px;padding:0;border:0;background:none}
.m-role-back img{display:block;width:36px;height:36px}
.m-role-title{margin:0;color:var(--gold);font-size:18px;font-weight:600;letter-spacing:.3px;text-shadow:0 2px 4px #000;white-space:nowrap}
/* Each portrait is cut from the original choose art (ui/role/choose.png) by the offsets mobile-role.js sets. */
.m-role-classes{grid-row:2;display:flex;flex-direction:column;gap:6px;min-height:0}
.m-role-class{flex:none;width:clamp(104px,calc((var(--app-height,100dvh) - 90px) / 4 * 1.75),190px);aspect-ratio:175/100;padding:0;border:0;border-radius:4px;
 background:url(/ui/role/choose.png?v=dc8441c4a1b3504f) var(--x) var(--y)/var(--size) auto no-repeat #1a1510;box-shadow:0 0 0 1px #a8894a80,0 3px 8px #000c;filter:brightness(.62) saturate(.8)}
.m-role-class[aria-checked="true"]{filter:none;box-shadow:0 0 0 2px var(--gold),0 0 14px #e2c47c80,0 3px 8px #000c}
.m-role-stage{grid-row:2;display:flex;gap:8px;min-height:0}
.m-role-body{position:relative;flex:1;min-width:0;padding:0;border:0;border-radius:6px;background:none}
.m-role-body[aria-pressed="true"]{background:radial-gradient(ellipse 46% 9% at 50% 86%,#e2c47c3d,#e2c47c00 80%);box-shadow:inset 0 0 0 1px #e2c47c4d}
.m-role-figure{position:absolute;inset:6px 6px 44px}
.m-role-size{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:grid;place-items:center;width:84px;height:30px;background:url(/ui/mobile/tab.png?v=3b5f3f0e7e8c4f3a) 0 0/100% 100%;
 color:#1d2b3b;font-size:13px;font-weight:600;text-shadow:0 1px 0 #ffffff70}
.m-role-body[aria-pressed="true"] .m-role-size{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6);color:#2b1d05}
.m-role-loading{position:absolute;left:0;right:0;top:45%;color:#e8d9ae;font-size:13px;text-align:center;text-shadow:0 1px 2px #000;visibility:hidden}
.m-role-stage.pending .m-role-loading{visibility:visible}
.m-role-panel{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;padding:22px 14px 12px;border-radius:4px;background:url(/ui/mobile/card.png?v=ea1529f9c8e23a06) 0 0/100% 100%;box-shadow:0 10px 30px #000b}
.m-role-vocation{margin:0;color:var(--gold);font-size:18px;font-weight:600;text-shadow:0 1px 0 #000}
.m-role-info{flex:0 1 auto;min-height:0;margin:0;overflow:auto;color:var(--mute);font-size:12.5px;line-height:1.5}
.m-role-genders{display:flex;gap:6px}
.m-role-tab{flex:1;height:34px;padding:0;border:0;background:url(/ui/mobile/tab.png?v=3b5f3f0e7e8c4f3a) 0 0/100% 100%;color:#1d2b3b;font-size:14px;font-weight:600;text-shadow:0 1px 0 #ffffff70}
.m-role-tab[aria-pressed="true"]{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6);color:#2b1d05;text-shadow:0 1px 0 #fff6}
.m-role-name{flex:none;height:42px;margin-top:auto;padding:0 12px;border:0;border-radius:4px;background:url(/ui/mobile/input.png?v=12bd0780715989da) 0 0/100% 100%;box-shadow:inset 0 0 0 1px #a8894a59;color:#fff9e8;font-size:16px}
.m-role-name:focus{box-shadow:inset 0 0 0 1px var(--gold)!important}
.m-role-name::placeholder{color:#8d8778}
.m-role-create{flex:none;height:44px;padding:0;border:0;background:url(/ui/mobile/btnY.png?v=be065432cc957cb3) 0 0/100% 100%;color:#3a2604;font-size:16px;font-weight:700;text-shadow:0 1px 0 #fff7}
.m-role-create:active:enabled{filter:brightness(.88)}
.m-role-create:disabled{opacity:1;filter:grayscale(1) brightness(.6)}
.m-role-status{min-height:16px;margin:0;color:#d8cfb8;font-size:12px;line-height:1.4}
.m-role-status.error{color:#ff8a66}
/* Narrow phones stay stacked when the keyboard makes the viewport wider than it is tall. */
@media (max-width:600px),(orientation:portrait){
 .m-role{grid-template-columns:minmax(0,1fr);grid-template-rows:38px minmax(180px,1fr) auto auto}
 .m-role-head{grid-column:1}
 .m-role-stage{grid-row:2}
 .m-role-classes{grid-row:3;flex-direction:row}
 .m-role-class{flex:1;width:auto;min-width:0}
 .m-role-panel{grid-column:1;grid-row:4;overflow:visible}
 .m-role-name{margin-top:0}
}

body.mobile-ui #update-client{min-height:40px;background:url(/ui/mobile/btnB.png?v=6985addbe008ac4c) center/100% 100% no-repeat;color:#f4f8ff}
body.mobile-ui #update-client:hover:enabled{background:url(/ui/mobile/btnB.png?v=6985addbe008ac4c) center/100% 100% no-repeat}
body.mobile-ui #update-client:active:enabled{filter:brightness(.85)}