:root { color-scheme:dark; font-family:'Courier New',Courier,monospace; color:#eee9db; background:#182026; font-synthesis:none; }
/* World names (players with their guild line, NPCs, monsters) grow by this many px over the classic sizes.
   1px by default (user request, 2026-10-23); the Name size option in Settings changes it (hud.js). */
:root { --world-name-size:1px; }
* { box-sizing:border-box; }
/* The whole game uses Courier New (user request, 2026-10-18): this overrides every per-element family; sizes are unchanged. */
*,*::before,*::after { font-family:'Courier New',Courier,monospace!important; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input,textarea,[contenteditable] { -webkit-user-select:text; user-select:text; }
[hidden] { display:none!important; }
button,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:wait; opacity:.6; }
*:focus,*:focus-visible { outline:none; }
:is(input,textarea,[contenteditable="true"]):is(:focus,:focus-visible) { outline:none!important; box-shadow:none!important; }
#game { position:relative; width:100%; height:100dvh; overflow:hidden; isolation:isolate; }
#world { display:block; width:100%; height:100%; touch-action:none; outline:none; }
#names { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.player-name { position:absolute; width:256px; height:calc(40px + 2 * var(--world-name-size)); white-space:nowrap; text-align:center; font:calc(12px + var(--world-name-size)) Arial,sans-serif; color:white; transform:translate(-50%,-100%); transform-origin:center top; text-shadow:0 2px 3px #000,1px 0 #000,-1px 0 #000; }
.player-name.self { color:#c6f4b1; }
.guild-line { height:calc(13px + var(--world-name-size)); line-height:calc(13px + var(--world-name-size)); }.guild-name { color:#ffffff; }.guild-rank { color:#91b9ff; }.name-line { height:calc(15px + var(--world-name-size)); line-height:calc(15px + var(--world-name-size)); }
/* Overhead health: a borderless red fill over the grey of lost health, as in the classic client. */
.native-health { width:52px; height:6px; margin:0 auto; background:#7d7d7d; text-align:left; }.native-health i { display:block; height:6px; background:#c81414; }
.toast { position:absolute; z-index:7; top:max(20px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); width:max-content; padding:10px 15px; border:1px solid #a28c55; background:#13212cef; color:#f4e8c7; font-size:12px; line-height:1.5; text-align:center; pointer-events:none; }
.join-screen,.fatal { position:absolute; inset:0; z-index:10; display:grid; place-items:center; overflow:auto; padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background:#0b111983; }
.account-panel { width:min(360px,100%); margin:auto; padding:26px; border:1px solid #9d8958; border-radius:2px; background:#182834f2; box-shadow:0 8px 32px #0009; }
.brand { margin:0 0 12px; color:#e1c77f; font:25px/1.2 Georgia,serif; }
h1,h2 { margin:0 0 22px; color:#f0e4c3; font-size:17px; font-weight:400; }
.account-panel label { display:block; margin:0 0 7px; font-size:12px; color:#e0d9c9; }
.account-panel input { display:block; width:100%; min-height:44px; padding:9px 11px; border:1px solid #73818b; border-radius:2px; background:#0c1b26; color:#fff9e8; font-size:16px; }
.account-panel input::placeholder { color:#8a9aa6; }
.login-row { position:relative; width:304px; height:33px; background:url('/ui/role/account-box.png?v=de50e6258d2b45fd') no-repeat; }
.password-row { background-image:url('/ui/role/password-box.png?v=e06e60afb74e6a6a'); }
.login-row + .login-row { margin-top:12px; }
/* The 5165 client has no email field and no painted Email box, so on desktop it is the panel's plain labelled field. */
body:not(.mobile-ui) .account-panel .email-row { width:304px; height:auto; background:none; }
body:not(.mobile-ui) .account-panel .email-row label { position:static; width:auto; height:auto; margin:0 0 6px; overflow:visible; clip-path:none; }
body:not(.mobile-ui) .account-panel .email-row input { position:static; width:100%; height:33px; padding:0 10px; border:1px solid #73818b; background:#0c1b26; }
.account-panel .login-row label { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); }
.account-panel .login-row input { position:absolute; left:87px; top:0; width:217px; height:33px; min-height:0; padding:0 10px; border:0; background:none; font-size:14px; }
.login-buttons { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:18px; }
.art-button { display:block; width:var(--width); height:var(--height); padding:0; border:0; background:var(--art) no-repeat; font-size:0; color:transparent; }
.art-button:active:enabled { background-image:var(--pressed); }
.enter-button { --width:93px; --height:35px; --art:url('/ui/role/enter.png?v=9dd139954ace0ea5'); --pressed:url('/ui/role/enter-pressed.png?v=250739e340641b66'); }
.new-account-button { --width:104px; --height:31px; --art:url('/ui/role/new-account.png?v=a5e1c8db83846d2c'); --pressed:url('/ui/role/new-account-pressed.png?v=bb9a0733ab2d7192'); }
.ok-button { --width:78px; --height:35px; --art:url('/ui/role/ok.png?v=181e52c5c80d5a75'); --pressed:url('/ui/role/ok-pressed.png?v=2189d6bd065f654d'); }
.back-button { --width:78px; --height:35px; --art:url('/ui/role/back.png?v=af47dba22073d016'); --pressed:url('/ui/role/back-pressed.png?v=83b41c72cde53c69'); }
.guidance,.loading-status,.credits { margin:12px 0 0; color:#bac5cb; font-size:11px; line-height:1.6; }
.account-panel button:not(.art-button) { display:block; width:100%; min-height:44px; margin-top:18px; padding:9px 14px; border:1px solid #c1a86b; border-radius:2px; color:#f4e5be; background:#294458; font-size:14px; }
.account-panel button:not(.art-button):hover:enabled { background:#365a70; }
.loading-status { min-height:34px; }
/* Startup: the progress bar (CO mobile kit prgbg/prg, the XP bar's track) shows until the game is ready; the account form after. */
.loading-bar { position:relative; width:304px; max-width:100%; height:18px; margin-top:18px; }
.loading-bar > img { position:absolute; inset:0; width:100%; height:100%; }
.loading-bar-lane { position:absolute; left:4.58%; width:90.85%; top:22%; height:56%; }
#loading-fill { display:block; width:0; height:100%; transition:width .2s linear; }
.account-panel:not(.preparing) .loading-bar,.preparing .login-row,.preparing .guidance,.preparing .login-buttons { display:none; }
.credits { font-size:10px; }.credits a { color:#d7c38b; text-underline-offset:2px; }
.fatal { z-index:30; background:#0c141df2; }.fatal p { font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
@media(max-height:520px) and (min-width:601px) { .join-screen,.fatal { padding:12px; }.account-panel { width:510px; padding:18px 24px; }.brand { font-size:22px; margin-bottom:6px; }h1 { margin-bottom:12px; }.account-panel label { margin-bottom:4px; }.account-panel input { min-height:40px; }.login-row + .login-row { margin-top:8px; }.guidance,.credits { margin-top:8px; }.login-buttons { margin-top:8px; }.loading-status { margin-top:6px; min-height:20px; } }
/* Short desktop windows put the title beside the form. Phones keep the one-column stack (user request 2026-10-20). */
@media(max-height:520px) and (min-width:601px) {
  body:not(.mobile-ui) .join-screen .account-panel { width:560px; display:grid; grid-template-columns:180px minmax(0,1fr); column-gap:24px; row-gap:4px; padding:18px 24px; }
  body:not(.mobile-ui) .account-panel > * { grid-column:2; }
  body:not(.mobile-ui) .brand { grid-column:1; grid-row:1/3; margin:0; align-self:start; }
  body:not(.mobile-ui) .account-panel h1 { grid-column:1; grid-row:3; margin:0; align-self:start; font-size:15px; line-height:1.5; }
  body:not(.mobile-ui) .account-panel .guidance { margin:0; }
  body:not(.mobile-ui) .account-panel .login-buttons { margin-top:3px; }
  body:not(.mobile-ui) .account-panel .loading-status { margin-top:2px; min-height:34px; }
  body.mobile-ui .join-screen .account-panel { width:360px; max-width:100%; }
}
@media(max-width:600px) {
  .join-screen { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .join-screen .account-panel { min-width:0; padding:20px 12px; }
  .login-row { max-width:100%; background-size:100% 100%; }
  .account-panel .login-row input { left:28.618421%; width:71.381579%; }
}

/* Original Common.Ani KO label and Num digits, independently visible while an XP buff is active. */
#xp-ko-counters { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.xp-ko { position:absolute; display:flex; align-items:center; height:43px; gap:2px; transform-origin:center bottom; pointer-events:none; }
.xp-ko-label { width:43px; height:43px; }
.xp-ko-number { display:flex; align-items:center; height:28px; }
.xp-ko-digit { display:block; width:13px; height:28px; background:#00ff00; mask:var(--digit) center/100% 100% no-repeat; -webkit-mask:var(--digit) center/100% 100% no-repeat; }
/* Common.Ani XpBlock pixels. The authoritative deadline is the fill's only clock. */
#xp-reset-bar { position:absolute; left:100px; right:10px; bottom:142px; height:10px; pointer-events:none; z-index:4; }
.xp-reset-fill { height:100%; mask:url('/ui/xp-counter/bar-green.png?v=27d39722ff7f7270') center/100% 100% no-repeat; -webkit-mask:url('/ui/xp-counter/bar-green.png?v=27d39722ff7f7270') center/100% 100% no-repeat; }
body.mobile-ui #xp-reset-bar { display:none; }

/* Login recovery is available even while the main client is preparing. */
.client-update-control{margin-top:8px;text-align:center}
#update-client{display:inline-block;width:160px;min-height:32px;margin:0;padding:3px 12px;border:0;border-radius:0;background:url(/ui/chat/broadcast.png?v=4843c8bfbacf912e) center/100% 100% no-repeat;color:#e6d5a8;font-size:12px}
#update-client:hover:enabled{background:url(/ui/chat/broadcast.png?v=4843c8bfbacf912e) center/100% 100% no-repeat}
#update-client:active:enabled{background-image:url(/ui/chat/broadcast-pressed.png?v=1835ca1b03778e5c)}
.client-update-status{margin:6px 0 0;font-size:12px;line-height:1.4;color:#d8cfb8}