/* Login, character select, character create and loading screens, laid out like the original Shaiya client:
   login = full picture with a small ID / PW window low in the middle; character select = hero in the scene, slot list and
   Start / Create / Delete on the right; character create = class pictures on the left, look sliders + name on the right.
   Original pictures come from public/ui/login/ (tools/build_loginui.py). Missing ones show as the *_placeholder gradients. */
:root {
  --lui-ink:#e8e2d2; --lui-dim:#a79f8c; --lui-line:#6c5a2e; --lui-gold:#e0b85a; --lui-steel:#7d93b3;
  --lui-ph-login: radial-gradient(ellipse at 50% 38%, #26324a 0%, #121826 55%, #07090f 100%);
  --lui-ph-chars: radial-gradient(ellipse at 40% 45%, #2b2a3a 0%, #14141e 60%, #07070b 100%);
  --lui-ph-create: radial-gradient(ellipse at 45% 45%, #302a35 0%, #17141b 60%, #08070a 100%);
  --lui-ph-loading: radial-gradient(ellipse at 50% 40%, #241c12, #0a0806 72%);
}
/* picture behind the canvas (the 3D hero is drawn on a transparent canvas above it) */
#luiBg { position:fixed; inset:0; z-index:0; pointer-events:none; display:none; background:#07080c center / cover no-repeat; }
body[data-screen=auth] #luiBg, body[data-screen=server] #luiBg, body[data-screen=chars] #luiBg, body[data-screen=create] #luiBg { display:block; }
body[data-screen=auth] #luiBg, body[data-screen=server] #luiBg { background-image:var(--lui-login_bg_main, var(--lui-ph-login)); }
body[data-screen=chars] #luiBg { background-image:var(--lui-select_bg_epi6, var(--lui-ph-chars)); }
body[data-screen=create] #luiBg { background-image:var(--lui-create_bg, var(--lui-ph-create)); }
body[data-screen=auth] canvas#game, body[data-screen=server] canvas#game, body[data-screen=faction] canvas#game { visibility:hidden; }
#luiBg[data-ph]:not([data-ph=""])::after { content:attr(data-ph); position:absolute; left:8px; bottom:6px; font:11px monospace; color:#ff0; opacity:.8; }

.screen.lui { background:none; }
.lui .luiVig { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.lui .luiVig.r { background:linear-gradient(270deg, rgba(3,4,8,.78), rgba(3,4,8,.25) 40%, transparent 62%); }
.lui .luiVig.l { background:linear-gradient(90deg, rgba(3,4,8,.78), rgba(3,4,8,.25) 22%, transparent 40%, transparent 60%, rgba(3,4,8,.78)); }

/* the dialog look shared by the three screens: dark glass, thin gold rule, gold caps title */
.luiWin { position:absolute; background:linear-gradient(rgba(18,22,34,.92), rgba(8,10,16,.94)); border:1px solid var(--lui-line); border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,235,180,.12), 0 8px 28px rgba(0,0,0,.7); padding:0 0 14px; color:var(--lui-ink); }
.luiWin > .luiTitle { margin:0 0 12px; padding:7px 14px; font:700 13px var(--serif); letter-spacing:.24em; text-transform:uppercase; color:var(--lui-gold);
  background:linear-gradient(rgba(224,184,90,.18), rgba(224,184,90,.04)); border-bottom:1px solid var(--lui-line); }
.luiWin > .luiBody { padding:0 16px; }
.luiWin label { display:block; margin:9px 0 4px; font:500 11px var(--serif); letter-spacing:.16em; text-transform:uppercase; color:var(--lui-dim); }
.luiWin input[type=text], .luiWin input[type=password] { width:100%; padding:8px 10px; background:#04060a; border:1px solid #4a4a52; border-radius:2px; color:#fff; font-size:15px; box-shadow:inset 0 2px 5px #000; }
.luiWin input:focus { outline:none; border-color:var(--lui-gold); }
.luiBtn { cursor:pointer; padding:9px 14px; min-height:38px; border:1px solid var(--lui-line); border-radius:2px; color:var(--lui-gold); font:700 13px var(--serif); letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 2px #000;
  background:linear-gradient(#3a3322, #17130b); box-shadow:inset 0 1px 0 rgba(255,235,180,.16), 0 2px 5px rgba(0,0,0,.6); touch-action:manipulation; }
.luiBtn:hover { filter:brightness(1.2); border-color:var(--lui-gold); } .luiBtn:active { transform:translateY(1px); }
.luiBtn.go { color:#ffe9a8; background:linear-gradient(#6a5524, #2c2210); border-color:var(--lui-gold); box-shadow:inset 0 1px 0 rgba(255,235,180,.3), 0 0 14px rgba(224,184,90,.25), 0 2px 5px rgba(0,0,0,.6); }
.luiBtn.bad:hover { color:#ff9a90; border-color:#c4483c; } .luiBtn:disabled { opacity:.4; cursor:default; filter:none; }
.luiBtns { display:flex; gap:8px; margin-top:14px; } .luiBtns > * { flex:1; }
.luiWin .err { color:#ff8a80; min-height:18px; margin-top:8px; font-size:12px; }
.luiLink { display:block; margin:10px auto 0; background:none; border:none; color:var(--lui-dim); font:500 11px var(--serif); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; } .luiLink:hover, .luiLink.on { color:var(--lui-gold); }
.luiChk { display:flex !important; align-items:center; gap:8px; cursor:pointer; margin-top:10px !important; } .luiChk input { width:16px; height:16px; accent-color:#c29c4e; margin:0; }

/* ── login ── */
#auth .luiLogo { position:absolute; left:0; right:0; top:7vh; text-align:center; pointer-events:none; }
#auth .luiLogo b { display:block; font:700 clamp(34px,10vh,78px)/1 var(--serif); letter-spacing:.14em; text-transform:uppercase; color:#f0cf7a; text-shadow:0 3px 0 #5a3f10, 0 0 30px rgba(255,170,60,.45), 0 0 4px #000; }
#auth .luiLogo span { display:block; margin-top:6px; font:600 clamp(11px,2.6vh,18px) var(--serif); letter-spacing:.7em; text-indent:.7em; color:#d7e2f5; text-shadow:0 2px 6px #000; text-transform:uppercase; }
#auth .luiNotice { position:absolute; left:0; right:0; bottom:2.4vh; text-align:center; font:500 11px var(--serif); letter-spacing:.14em; color:#c9c2b0; text-shadow:0 1px 4px #000; padding:0 12px; }
#authFac { flex:1; display:flex; gap:6px; } #authFac button { flex:1; padding:6px 4px; border:1px solid #4a4a52; border-radius:2px; background:#0a0d14; color:var(--lui-dim); font:700 11px var(--serif); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
#authFac button.light.sel { color:#9fd0ff; border-color:#4aa3ff; box-shadow:0 0 10px rgba(74,163,255,.3); } #authFac button.dark.sel { color:#ff9a90; border-color:#e0453a; box-shadow:0 0 10px rgba(224,69,58,.3); }

/* ── character select ── */
#chars .luiTitleTop { position:absolute; left:0; right:0; top:12px; text-align:center; pointer-events:none; font:700 clamp(15px,3.6vh,26px) var(--serif); letter-spacing:.34em; color:#e9dcc0; text-shadow:0 2px 8px #000; text-transform:uppercase; }
.luiInfo { margin:10px 0 0; padding:9px 10px; background:rgba(0,0,0,.4); border:1px solid #2c303c; border-radius:2px; font-size:12.5px; min-height:74px; }
.luiInfo .nm { font:700 17px var(--serif); letter-spacing:.08em; margin-bottom:4px; } .luiInfo dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; } .luiInfo dt { color:var(--lui-dim); } .luiInfo dd { margin:0; text-align:right; }
.luiInfo .none { color:#6d7080; text-align:center; padding:14px 0; }

/* ── character create ── */
#create.stagescr { background:none; padding:0; display:none; }
#create.on { display:block; }
#create .luiTitleTop { position:absolute; left:0; right:0; top:10px; text-align:center; pointer-events:none; font:700 clamp(15px,3.6vh,26px) var(--serif); letter-spacing:.34em; color:#e9dcc0; text-shadow:0 2px 8px #000; text-transform:uppercase; }
#create .luiL { left:max(12px, env(safe-area-inset-left)); top:50%; transform:translateY(-50%); width:min(33vw,300px); max-height:92vh; overflow-y:auto; }
#create .luiR { right:max(12px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); width:min(33vw,300px); max-height:92vh; overflow-y:auto; }
#create .seg button { background:linear-gradient(#1c2130,#0d1018); border-color:#3a3f4c; } #create .seg button.sel { border-color:var(--lui-gold); }
#create .seg button.light.sel { color:#9fd0ff; border-color:#4aa3ff; } #create .seg button.dark.sel { color:#ff9a90; border-color:#e0453a; }
#clsPick.seg.wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
#clsPick button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 3px; min-width:0; }
#clsPick button img { width:100%; max-width:62px; height:58px; object-fit:contain; object-position:center top; pointer-events:none; }
#clsPick button.noart { padding:9px 3px; }
#clsInfo { margin-top:8px; padding:7px 9px; background:rgba(0,0,0,.4); border:1px solid #2c303c; border-radius:2px; font-size:11.5px; color:var(--lui-dim); max-height:24vh; overflow:auto; }
#clsInfo b { color:var(--lui-gold); font-family:var(--serif); }
#clsStats { display:grid; grid-template-columns:1fr auto 1fr auto; gap:2px 8px; margin-top:6px; font-size:11.5px; } #clsStats span { color:var(--lui-dim); } #clsStats em { font-style:normal; color:#fff; text-align:right; }
#lookRows .lr { display:flex; align-items:center; gap:6px; margin:5px 0; } #lookRows .lr span { flex:1; font:500 11px var(--serif); letter-spacing:.12em; text-transform:uppercase; color:var(--lui-dim); }
#lookRows .lr button { width:30px; height:30px; border:1px solid var(--lui-line); border-radius:2px; background:#0b0d13; color:var(--lui-gold); cursor:pointer; font:700 15px system-ui; padding:0; touch-action:manipulation; }
#lookRows .lr em { font-style:normal; width:50px; text-align:center; color:#fff; font-size:12px; }
#cName.bad { border-color:#d8473a; } #cName.ok { border-color:#59b36b; } #nameHint { min-height:16px; margin-top:4px; font-size:11px; color:var(--lui-dim); } #nameHint.bad { color:#ff8a80; } #nameHint.ok { color:#8fdc9c; }

/* ── loading screens: the original picture full screen, bar low in the middle ── */
.luiLoadArt { position:absolute; inset:0; background:var(--lui-ph-loading) center / cover no-repeat; z-index:0; }
.luiLoadArt::before { content:""; position:absolute; left:50%; top:2.5vh; width:min(24vh,170px); aspect-ratio:1398/1085; transform:translateX(-50%); background:url(/ui/logo_s.webp) center / contain no-repeat; filter:drop-shadow(0 2px 8px #000); z-index:2; } /* official logo on every loading picture */
/* the six loading scenes (public/loading_art.js -> scenes): the picture FILLS the screen (cover, centred, never stretched, no bars; ultra-wide crops top/bottom, portrait crops left/right);
   the free space around it (wider / taller phones) is the same picture blurred + darkened, so it blends in. No second logo: the ::before logo of the old pictures is replaced by the blurred layer. */
.luiLoadArt.scene { background:#05070a; overflow:hidden; }
.luiLoadArt.scene::before { display:none; content:""; position:absolute; inset:-6%; left:-6%; top:-6%; width:auto; aspect-ratio:auto; transform:none; filter:blur(22px) brightness(.5) saturate(1.1); background:var(--scene) center / cover no-repeat; z-index:0; }
.luiLoadArt.scene::after { content:""; position:absolute; inset:0; left:0; top:0; font:0; background:var(--scene) center / cover no-repeat; z-index:1; }
/* cover crops top/bottom on wide phones: keep the painted logo in view: logo low (03, 04, 06) -> anchor to the bottom, logo high (01, 02, 05) -> anchor to the top */
.luiLoadArt.scene[data-scene$="03.webp"]::after, .luiLoadArt.scene[data-scene$="04.webp"]::after, .luiLoadArt.scene[data-scene$="06.webp"]::after { background-position:50% 100%; }
.luiLoadArt.scene[data-scene$="01.webp"]::after, .luiLoadArt.scene[data-scene$="02.webp"]::after, .luiLoadArt.scene[data-scene$="05.webp"]::after { background-position:50% 0; }
.luiLoadArt[data-ph]:not([data-ph=""])::after { content:attr(data-ph); position:absolute; left:8px; top:6px; font:11px monospace; color:#ff0; opacity:.8; }
/* the map name block of a map change sits low, just above the bar status line, on a soft scrim: the scenes carry their logo in the upper ~70% (the lowest ~22% is for the bar).
   Portrait: everything fits on the blurred backdrop below the picture. Landscape (short screens): one line, "Now entering" + the map name. */
:is(#travel,#loading).hasArt .trvBox { z-index:2; top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 118px); }
:is(#travel,#loading).hasArt .trvBox::before { content:""; position:absolute; top:-34px; bottom:-18px; left:20%; right:20%; z-index:-1; background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.78),rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 78%); pointer-events:none; }
:is(#travel,#loading).hasArt .trvName { font-size:clamp(22px,min(7.2vh,8.5vw),56px); margin:3px 0 0; } 

@media (orientation:landscape) { :is(#travel,#loading).hasArt .trvBox { bottom:calc(env(safe-area-inset-bottom,0px) + 112px); } :is(#travel,#loading).hasArt .trvName { font-size:clamp(18px,5.2vh,38px); margin:1px 0 0; } :is(#travel,#loading).hasArt .trvBox::before { top:-10px; bottom:-8px; }
  :is(#travel,#loading).hasArt[data-tpos="top"] .trvBox { bottom:auto; top:calc(env(safe-area-inset-top,0px) + 8px); } } /* landscape: the full block (kicker, name, sub title, Safe/PvP badge) centred above the bar; scenes whose logo is low-centre (06) put it at the top (LOADING_ART.textPos) */
.luiLoadBar .pct:not(.err), .luiLoadBar .tip { display:none; } /* mobile only: the single line is "Entering <map>"; no status flavour text, no tips */
#loading.hasArt .ldBox, #travel.hasArt #trvCv, #travel.hasArt .trvVig { display:none; }
#loading.hasArt { background:#000; }
#loading.hasArt .ldBox { display:none; }


/* ============ original art ============ (positions inside each picture were MEASURED from the extracted sheets; where a screen position is a guess it says so)
   Sprite sheets: every button sheet has 4 states stacked 64 px apart: 0 normal, 1 hover, 2 disabled (dim), 3 pressed (the order of 2 and 3 is read from how the
   pictures look, not from the game files). --k scales native pixels (set by loginui.js from the screen size), --ks the character rows. */
:root { --k:1; --ks:1; --kc:1; --kl:1; }
.sbtn { --st:0; --sw:256; --sh:256; --bx:0; --by:0; --bw:76; --bh:38; position:relative; display:block; padding:0; margin:0; border:0; background-color:transparent; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; flex:none;
  width:calc(var(--bw)*var(--k)*1px); height:calc(var(--bh)*var(--k)*1px); background-repeat:no-repeat; background-image:var(--img);
  background-size:calc(var(--sw)*var(--k)*1px) calc(var(--sh)*var(--k)*1px); background-position:calc(var(--bx)*var(--k)*-1px) calc((var(--by) + var(--st)*64)*var(--k)*-1px); }
.sbtn::after { content:""; position:absolute; inset:-7px; } /* touch area bigger than the picture */
@media (hover:hover) { .sbtn:hover:not(:disabled) { --st:1; } }
.sbtn:active:not(:disabled) { --st:3; } .sbtn:disabled { --st:2; cursor:default; } .sbtn:focus-visible { outline:2px solid var(--lui-gold); outline-offset:3px; }
.sOk { --img:var(--lui-login_btn); --sw:256; --sh:256; --bx:52; --by:6; --bw:76; --bh:38; }
.sCancel { --img:var(--lui-login_btn_exit); --sw:128; --sh:256; --bx:23; --by:5; --bw:76; --bh:38; }
.sCreate { --img:var(--lui-select_slot_1); --sw:128; --sh:256; --bx:10; --by:3; --bw:101; --bh:44; }
.sDelete { --img:var(--lui-select_slot_3); --sw:128; --sh:256; --bx:10; --by:1; --bw:101; --bh:44; }
.sExit { --img:var(--lui-select_slot_4); --sw:128; --sh:256; --bx:10; --by:1; --bw:101; --bh:44; }
.sStart { --img:var(--lui-select_btn_start); --sw:256; --sh:256; --bx:58; --by:6; --bw:141; --bh:52; }

/* ── login: panel sheet (login_panel 190x158: User ID label + box at y17, Password label + box at y75, Save ID check box + text at y115, hint text at y140) ── */
body[data-screen=auth] canvas#game { visibility:hidden; }
#auth .luiLogo { display:none; } /* the official logo picture (#lgLogo) is shown instead of the text title */
.lgForm { --k:var(--kl); position:absolute; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); padding:calc(10px*var(--kl)) calc(26px*var(--kl)) 0; background:radial-gradient(ellipse at 50% 55%, rgba(2,2,4,.9) 0%, rgba(2,2,4,.78) 55%, transparent 74%); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:calc(5px*var(--k)); }
.lgRow { display:flex; align-items:center; gap:calc(14px*var(--k)); } /* panel left, OK / Cancel to its right: the arrangement is an approximation, the original one is not known */
.lgPanel { position:relative; width:calc(190px*var(--k)); height:calc(139px*var(--k)); background:var(--lui-login_panel) no-repeat 0 0 / calc(256px*var(--k)) calc(256px*var(--k)); }
.lgIn { position:absolute; left:calc(3px*var(--k)); width:calc(172px*var(--k)); height:calc(27px*var(--k)); padding:0 calc(5px*var(--k)); background:transparent; border:0; border-radius:0; color:#fff; font:500 max(16px, calc(13px*var(--k))) var(--serif, system-ui); box-shadow:none; outline:none; }
.lgIn:focus { background:rgba(224,184,90,.1); }
.lgU { top:calc(20px*var(--k)); } .lgP { top:calc(78px*var(--k)); }
.lgChk { position:absolute; left:0; top:calc(115px*var(--k)); width:calc(72px*var(--k)); height:calc(24px*var(--k)); cursor:pointer; touch-action:manipulation; }
.lgChk::before { content:""; position:absolute; inset:-8px -4px; } .lgChk input { position:absolute; opacity:0; width:0; height:0; }
.lgChk i { position:absolute; left:calc(2px*var(--k)); top:calc(1px*var(--k)); width:calc(22px*var(--k)); height:calc(19px*var(--k)); background:var(--lui-login_check) no-repeat 0 0 / calc(32px*var(--k)) calc(32px*var(--k)); opacity:0; }
.lgChk input:checked + i { opacity:1; } .lgChk input:focus-visible + i { outline:1px solid var(--lui-gold); }
.lgBtns { display:flex; flex-direction:column; gap:calc(10px*var(--k)); }
.lgHint { width:calc(190px*var(--k)); min-height:calc(18px*var(--k)); text-align:center; font:500 max(12px, calc(11px*var(--k))) system-ui; color:#ff8a80; text-shadow:0 1px 3px #000; }
.lgHint a { display:inline-block; padding:7px 2px; margin:-7px 0; color:#ffd56b; text-decoration:underline; text-underline-offset:2px; pointer-events:auto; } /* the game entry gate's "Facebook page" link: finger-sized */
.lgHint:empty { background:var(--lui-login_panel) no-repeat 0 calc(-140px*var(--k)) / calc(256px*var(--k)) calc(256px*var(--k)); } /* the original "Please Enter your ID and Password." line */
/* sign-ups closed until the Open Beta (owner 2026-10-29): the message + the testers' invite code box, only while the server says closed */
.lgInv { display:none; flex-direction:column; align-items:center; gap:3px; max-width:94vw; margin:1px 0 3px; } #auth.regClosed .lgInv { display:flex; }
.lgInvMsg { color:#f0d79a; font:600 11px/1.25 var(--serif, system-ui); letter-spacing:.06em; text-align:center; text-shadow:0 1px 3px #000, 0 0 6px #000; }
.lgIn.lgInvIn { position:static; width:min(calc(190px*var(--k)), 70vw); height:32px; box-sizing:border-box; text-align:center; letter-spacing:.12em; text-transform:uppercase; font-size:14px; background:rgba(8,10,16,.72); border:1px solid #6b5a36; border-radius:3px; }
.lgIn.lgInvIn::placeholder { color:#8f8670; letter-spacing:.06em; text-transform:none; } .lgIn.lgInvIn:focus { border-color:var(--lui-gold); background:rgba(20,16,8,.85); }
.lgInvMsg a { display:inline-block; padding:7px 2px; margin:-7px 0; color:#ffd56b; text-decoration:underline; text-underline-offset:2px; } /* the owner's Facebook page (link 2026-10-30): a finger-sized tap area */
.lgInvMsg.flash { animation:lgInvFlash 1.2s ease-out; } @keyframes lgInvFlash { 0%, 40% { color:#fff; text-shadow:0 0 10px #ffcf6a, 0 1px 3px #000; } 100% { color:#f0d79a; } }
#auth.kbTight .lgInvMsg { display:none; } /* keyboard up on a short screen: keep the box, drop the line */
.lgExtra { display:flex; flex-direction:column; align-items:center; gap:2px; max-width:94vw; color:#cfc7b0; font:500 11px var(--serif, system-ui); letter-spacing:.1em; text-shadow:0 1px 3px #000, 0 0 6px #000; }
#authFacRow { display:flex; align-items:center; gap:8px; } #authFac { display:flex; gap:6px; }
#authFac button { padding:5px 10px; min-height:30px; border:1px solid #4a4a52; background:rgba(8,10,16,.7); color:var(--lui-dim); font:700 11px var(--serif, system-ui); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.lgLinks { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.lgLink { min-height:30px; padding:0 4px; background:none; border:0; color:#d8cfae; font:600 11px var(--serif, system-ui); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-shadow:0 1px 3px #000, 0 0 6px #000; } .lgLink:hover { color:var(--lui-gold); }

/* ── character select: stage picture behind, rows on the right (select_btn graphic: 4 states of a 300x85 three-line row at y 19 / 147 / 275 / 403 of the 512 sheet) ── */
#chars .luiTitleTop { display:none; }
.chLeft { position:absolute; left:max(12px, env(safe-area-inset-left)); bottom:max(12px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:calc(8px*var(--k)); }
.chRight { position:absolute; right:max(12px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:calc(10px*var(--ks)); }
.luiSlot { --st:0; position:relative; display:flex; align-items:center; width:calc(300px*var(--ks)); height:calc(85px*var(--ks)); margin:0 0 calc(4px*var(--ks)); padding:0 calc(18px*var(--ks)) 0 calc(14px*var(--ks)); text-align:left; cursor:pointer; color:var(--lui-ink); border:0; touch-action:manipulation; font:inherit; -webkit-tap-highlight-color:transparent;
  background:var(--lui-select_btn) no-repeat; background-size:calc(512px*var(--ks)) calc(512px*var(--ks)); background-position:0 calc((19 + var(--st)*128)*var(--ks)*-1px); }
@media (hover:hover) { .luiSlot:not(.empty):hover { --st:3; } }
.luiSlot.sel { --st:1; } .luiSlot.empty { --st:2; color:#8a8a98; }
.luiSlot .mk { position:absolute; left:calc(0px*var(--ks)); top:calc(10px*var(--ks)); width:calc(12px*var(--ks)); height:calc(12px*var(--ks)); display:none; } .luiSlot.sel .mk { display:block; }
.luiSlot .tx { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-around; height:calc(81px*var(--ks)); }
.luiSlot .tx b, .luiSlot .tx small { display:block; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 2px #000; }
.luiSlot .tx b { font:700 max(11px, calc(15px*var(--ks))) var(--serif, system-ui); letter-spacing:.05em; } .luiSlot .tx small { font:500 max(10px, calc(12px*var(--ks))) system-ui; color:#d9d0b8; }
.luiSlot.empty .tx b { font-weight:500; }
#charInfo { display:none; }
#charErr { max-width:calc(300px*var(--ks)); text-align:center; color:#ff8a80; font-size:12px; text-shadow:0 1px 3px #000; min-height:0; margin:0; }
#btnStart { margin-top:calc(4px*var(--ks)); }

/* ── character create ── */
.crBtns { --k:var(--kc); display:flex; gap:calc(10px*var(--k)); justify-content:center; margin-top:12px; }
#facPick { display:flex; flex-direction:column; gap:6px; }
#create #facPick button { position:relative; display:block; width:100%; padding:0; border:2px solid #3a3f4c; border-radius:2px; cursor:pointer; background-color:#000; background-repeat:no-repeat; background-position:0 0; background-size:100% auto; aspect-ratio:1328 / 305; font-size:0; overflow:hidden; }
#create #facPick button[data-art=country_dark] { background-image:var(--lui-country_dark); } #create #facPick button[data-art=country_light] { background-image:var(--lui-country_light); }
#create #facPick button.locked { opacity:1; } #create #facPick button:not(.sel) { filter:grayscale(.7) brightness(.55); } #create #facPick button.sel.light { border-color:#4aa3ff; } #create #facPick button.sel.dark { border-color:#e0453a; } #facPick button.locked { cursor:default; }
#clsPick.seg.wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
#clsPick button { display:flex; flex-direction:column; align-items:center; padding:3px 2px; min-width:0; }
#clsPick button img { width:100%; max-width:64px; height:auto; aspect-ratio:462 / 688; object-fit:contain; pointer-events:none; }
#clsPick button.noart { padding:9px 3px; }
#clsPick button { font-size:0; } #clsPick button.noart { font-size:11px; }
@media (max-height:520px) and (orientation:landscape) {
  #create .luiL { width:min(36vw,300px); } #create .luiR { width:min(24vw,215px); } #clsInfo { display:none; } .luiWin > .luiTitle { margin-bottom:6px; padding:4px 10px; }
  #lookRows .lr button { width:28px; height:28px; } #clsPick button img { max-width:46px; } #facPick { flex-direction:row; } #facPick button { aspect-ratio:1328 / 305; }
  #create .luiWin label { margin:5px 0 3px; } #create .luiR .luiBody { padding:0 10px; } #lookRows .lr em { width:40px; }
}
@media (orientation:portrait) {
  #create .luiL { left:8px; right:8px; top:8px; transform:none; width:auto; max-height:40vh; } #create .luiR { left:8px; right:8px; top:auto; bottom:8px; transform:none; width:auto; max-height:38vh; }
  #clsInfo { display:none; } #clsPick.seg.wrap { grid-template-columns:repeat(6,1fr); } #clsPick button img { max-width:40px; } #facPick { flex-direction:row; }
  .chRight { top:auto; bottom:calc(16px + 50px*var(--k)); transform:none; right:50%; margin-right:calc(-150px*var(--ks)); }
  .lgRow { flex-direction:column; } .lgBtns { flex-direction:row; } #auth .luiNotice { display:none; }
  .chLeft { flex-direction:row; left:50%; transform:translateX(-50%); bottom:max(8px, env(safe-area-inset-bottom)); }
}
@media (max-height:480px) and (orientation:landscape) {
  .lgForm { gap:1px; padding-top:4px; } .lgExtra { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:2px 14px; } #auth .luiNotice { display:none; }
  #authFacRow > span { display:none; } #authFac button { min-height:28px; padding:3px 9px; } .lgLink { min-height:28px; }
}

@media (min-height:760px) and (orientation:landscape) { #clsPick.seg.wrap { grid-template-columns:repeat(3,1fr); } #clsPick button img { max-width:84px; } }
#auth .luiNotice { bottom:max(3px, env(safe-area-inset-bottom)); font-size:10px; }


/* ============ original art, second pass: character select stage, server window, create windows, status window ============ */
/* glow disc under the hero on the character select picture (OUR addition, not original art; position and size are set from loginui.js PLACE.select_bg_epi6) */
#luiDisc { display:none; position:fixed; z-index:0; left:var(--dx,50%); top:var(--dy,80%); width:var(--dw,300px); height:var(--dh,70px); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,236,190,.55) 0%, rgba(255,210,140,.28) 38%, rgba(255,190,110,.08) 62%, transparent 72%); box-shadow:0 0 28px 6px rgba(255,214,150,.14); }
body[data-screen=chars] #luiDisc { display:block; }

/* ── server select (TA_2D_server 338x487): zoom = --vk keeps native pixel positions ── */
#server.screen { padding:0; background:none; }
#server.on { align-items:flex-start; padding-top:clamp(6px, calc((100vh - 487px*var(--vk,1))/2 + 4vh), calc(100vh - 487px*var(--vk,1) - 6px)); } /* a little lower than centre so the logo of the login picture stays clear of the title */
.svWin { zoom:var(--vk,1); position:relative; width:338px; height:487px; background:var(--lui-srv_win) 0 0 / 338px 487px no-repeat; flex:none; }
/* positions: the list box of the picture is about x 18-316, y 104-417; the highlight bar (srv_list 273x30) and the two columns are placed by eye in it (GUESS); OK / Cancel side by side under the list (GUESS: the original arrangement is unknown) */
.svRow { position:absolute; left:26px; top:110px; width:273px; height:30px; padding:0; border:0; background:transparent; color:#e9dcc0; cursor:pointer; font:600 13px var(--serif,system-ui); text-align:left; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.svRow.sel { background:var(--lui-srv_list) -8px -8px no-repeat; }
.svRow .n { position:absolute; left:10px; top:0; width:180px; line-height:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 2px #000; }
.svRow .s { position:absolute; left:196px; top:0; width:72px; line-height:30px; text-align:center; color:#8fdc9c; font-size:12px; text-shadow:0 1px 2px #000; }
.svRow::after { content:""; position:absolute; inset:-3px -6px; }
.svBtns { position:absolute; left:0; right:0; top:426px; display:flex; justify-content:center; gap:22px; --k:1; }
.sSvOk { --img:var(--lui-srv_ok); --sw:104; --sh:256; --bx:1; --by:2; --bw:102; --bh:37; }
.sSvCancel { --img:var(--lui-srv_cancel); --sw:104; --sh:256; --bx:1; --by:2; --bw:102; --bh:37; }
#svErr { position:absolute; left:20px; right:20px; top:466px; text-align:center; font-size:11px; color:#ff8a80; min-height:0; margin:0; }

/* ── character create: original wooden windows (cr_left 251x393, cr_right 248x440). zoom = --ck keeps every position in native picture px ── */
#create.on { display:flex; justify-content:space-between; align-items:flex-start; padding:0 max(10px, env(safe-area-inset-left)); }
.crWin { zoom:var(--ck,1); position:relative; flex:none; background:no-repeat 0 0 / 100% 100%; margin-top:calc(50vh - 220px*var(--ck,1)); color:var(--lui-ink); }
.crWin > * { position:absolute; }
.crL { width:251px; height:393px; background-image:var(--lui-cr_left); } .crR { width:248px; height:440px; background-image:var(--lui-cr_right); }
.crTitle { left:64px; top:12px; width:176px; height:24px; line-height:24px; text-align:center; font:700 12px var(--serif,system-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--lui-gold); text-shadow:0 1px 2px #000; pointer-events:none; } /* our own text over the empty title bar of the picture */
.crWin .sbtn { --k:1; }
#create #clsPick.crCls { left:16px; top:84px; width:225px; height:166px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,83px); gap:0; overflow:hidden; }
#create #clsPick.crCls button { position:relative; display:block; min-width:0; padding:0; margin:0; border:1px solid transparent; border-radius:3px; background:transparent; cursor:pointer; opacity:.62; transition:opacity .12s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; font-size:0; }
#create #clsPick.crCls button.noart { font-size:11px; color:var(--lui-ink); } #create #clsPick.crCls button:hover { opacity:.9; }
#create #clsPick.crCls button.sel { opacity:1; border-color:rgba(224,184,90,.8); background:radial-gradient(ellipse at 50% 60%, rgba(224,184,90,.22), transparent 75%); box-shadow:0 0 8px rgba(224,184,90,.35) inset; }
#create #clsPick.crCls button img { display:block; position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; aspect-ratio:auto; object-fit:contain; pointer-events:none; }
#create #facPick.crFac { left:16px; top:281px; display:flex; flex-direction:row; gap:6px; }
#create #facPick.crFac button { width:112px; height:26px; aspect-ratio:auto; background-size:100% 100%; border-width:1px; }
#create .crL #clsInfo { left:16px; top:311px; width:219px; height:78px; margin:0; padding:0; display:block; overflow-y:auto; background:none; border:0; max-height:none; font-size:11px; line-height:1.25; color:#cdbf9f; }
#create .crL #clsInfo > div:nth-child(2) { display:none; } /* the "N skills. First ones..." sentence does not fit the small box: the Skills window (K) lists them */
#create .crL #clsStats { grid-template-columns:auto 1fr auto 1fr; gap:1px 6px; margin-top:3px; font-size:11px; }
.crGen { left:0; top:46px; width:100%; height:56px; }
.crGen .sbtn { position:absolute; top:0; --sw:64; --sh:256; --bx:0; --by:0; --bw:59; --bh:56; } .crGen .sMale { left:52px; --img:var(--lui-cr_sexm); } .crGen .sFemale { left:137px; --img:var(--lui-cr_sexw); }
.crGen .sbtn.sel:not(:disabled) { --st:3; } /* the lit (orange) state of the sheet marks the chosen gender */
#create #lookRows { left:22px; top:110px; width:204px; }
#create #lookRows .lr { height:30px; margin:0; gap:4px; } #create #lookRows .lr span { font-size:11px; color:#d8c89a; letter-spacing:.1em; text-shadow:0 1px 2px #000; }
#create #lookRows .lr button { width:26px; height:26px; border:1px solid #7b6535; border-radius:2px; background:linear-gradient(#2a2118,#0d0a07); color:var(--lui-gold); font-size:16px; box-shadow:inset 0 1px 0 rgba(255,230,170,.18); } /* no arrow art exists in the sheets (missing): plain buttons in the same wood / gold colours */
#create #lookRows .lr em { width:44px; font-size:11.5px; }
.crName { left:35px; top:216px; width:177px; height:56px; background:var(--lui-cr_name) 0 0 / 256px 64px no-repeat; } /* picture: "Name" caption at the top, input groove y 25..54 */
.crName input { position:absolute; left:3px; top:26px; width:172px; height:27px; padding:0 6px; border:0; border-radius:0; background:transparent; color:#fff; box-shadow:none; font:500 calc(16px/var(--ck,1)) system-ui; text-align:center; outline:none; }
.crName input:focus { background:rgba(224,184,90,.1); } .crName input.bad { color:#ff9a90; } .crName input.ok { color:#bdf0c4; }
#create #nameHint { left:14px; top:274px; width:220px; height:13px; margin:0; text-align:center; font-size:10.5px; line-height:13px; text-shadow:0 1px 2px #000; } #create #nameHint.ok { color:#8fdc9c; }
#create #createErr { left:10px; top:288px; width:228px; height:13px; margin:0; text-align:center; font-size:10.5px; line-height:13px; min-height:0; text-shadow:0 1px 2px #000; }
.crPts { left:30px; top:304px; width:161px; height:85px; background:var(--lui-cr_points) 0 0 / 256px 128px no-repeat; }
.crPts b { position:absolute; left:164px; width:44px; text-align:center; font:700 15px var(--serif,system-ui); color:#f0d890; text-shadow:0 1px 2px #000; } .crPts b:first-child { top:15px; } .crPts b:last-child { top:52px; } /* the two numbers sit right of the label picture (GUESS) */
#create .crBtns { left:4px; top:392px; width:240px; margin:0; display:flex; justify-content:space-between; --k:1; }
.sNext { --img:var(--lui-cr_next); --sw:128; --sh:256; --bx:1; --by:2; --bw:120; --bh:43; } .sBack { --img:var(--lui-cr_prev); --sw:128; --sh:256; --bx:1; --by:2; --bw:120; --bh:43; }
.crBtns .sbtn { --k:1; } /* native size: the buttons used to be x0.9 of the art */
@media (orientation:portrait) { #create.on { justify-content:center; padding:0; } .crWin { margin-top:8px; } }

/* ── status window (T): see the rules below */
/* Status window (T): original Shaiya Character Status window, EP4.5 art in /ui/status/ (tools/build_statusui.py). Native size 400x493 (278 wide until the side panel opens); --stk scales it to the screen (services_ui.js stScale) */
.stWin { background:none !important; border:0 !important; box-shadow:none !important; min-width:0; width:auto !important; transform:none !important; }
.stWin::before, .stWin::after { display:none; }
.stWin .wt { position:absolute; z-index:3; left:0; top:0; width:calc(278px*var(--stk,1)); height:calc(42px*var(--stk,1)); padding:0; background:none; border:0; opacity:0; } /* invisible drag strip over the title of the picture */
.stWin .wt .x { display:none; }
#winStatus .wb { padding:0 !important; max-height:none !important; overflow:visible !important; } /* beats .svcw .wb (padding, max-height, scroll) of the other service windows */
.stw { position:relative; zoom:var(--stk,1); width:400px; height:493px; background:url(/ui/status/off.webp) 0 0 / 400px 493px no-repeat; user-select:none; -webkit-user-select:none; font-family:Tahoma,"Segoe UI",system-ui,sans-serif; }
.stw.open { background-image:url(/ui/status/on.webp); }
.stw > *, .stPanel > * { position:absolute; box-sizing:border-box; }
.stPanel { display:none; left:0; top:0; width:400px; height:493px; pointer-events:none; } .stPanel > * { pointer-events:auto; } .stw.open .stPanel { display:block; }
.stw .sf { overflow:hidden; white-space:nowrap; text-overflow:clip; text-align:center; font-size:11px; color:#e8e8e8; text-shadow:0 1px 1px #000; pointer-events:none; }
.stw .sf.num { font-size:11px; } .stw .sf.sm { font-size:10px; letter-spacing:-.4px; }
.stw .num b { font-weight:400; } .stw .num b.p { color:#7fc4ff; } .stw .num b.p.on { color:#3fd0ff; font-weight:700; } .stw .num b.g { color:#ffd84a; } /* base (white) + points (blue) + bonus from gear / lapis / buffs (yellow), as in the tutorial picture */
.stw .sf.pend { color:#8fe89c; font-weight:700; }
.stw .sf.plate { font-weight:700; color:#fff; letter-spacing:.02em; border:1px solid #2a0507; border-radius:4px; background:linear-gradient(#e6414a, #a3121c 55%, #7a0b12); box-shadow:inset 0 0 0 1px rgba(255,190,170,.55), 0 1px 2px #000; text-shadow:0 1px 1px #000; }
.stw .sf.bar { background:rgba(0,0,0,.35); } .stw .sf.bar .fill { position:absolute; left:0; top:0; bottom:0; width:0; background:url(/ui/status/graph.webp) 0 0 / 100% 64px no-repeat; transition:width .25s; } .stw .sf.bar span { position:absolute; left:0; right:0; top:0; z-index:1; font-size:10px; font-weight:700; color:#fff; text-shadow:0 0 2px #000, 0 1px 1px #000; }
.stw .hot { cursor:help; background:transparent; }
.stPT { text-align:center; font-weight:700; font-size:12px; color:#ea9207; text-shadow:0 1px 1px #000; pointer-events:none; }
.stw .stX { left:243px; top:5px; width:19px; height:19px; padding:0; border:1px solid #6d6350; border-radius:50%; background:rgba(14,12,9,.8); color:#ddd2b2; font:700 13px/16px system-ui; cursor:pointer; touch-action:manipulation; } .stX::before { content:"\00d7"; } .stX::after { content:""; position:absolute; inset:-8px; }
.stTab { padding:0; border:0; background:transparent; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .stw.open .stTab { display:none; }
.stw.pulse .stTab { animation:stPulse 1.4s ease-in-out infinite; } @keyframes stPulse { 0%, 100% { box-shadow:0 0 0 0 rgba(234,146,7,0); background:rgba(234,146,7,0); } 50% { box-shadow:0 0 9px 2px rgba(234,146,7,.9); background:rgba(234,146,7,.18); } }
@media (prefers-reduced-motion:reduce) { .stw.pulse .stTab { animation:none; box-shadow:0 0 7px 1px rgba(234,146,7,.8); } }
.stPM { --st:0; width:20px; height:20px; padding:0; border:0; background:url(/ui/status/pm.webp) calc(var(--st)*-32px) 0 / 128px 64px no-repeat; cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent; } .stPM.stM { background-position:calc(var(--st)*-32px) -32px; } .stPM::after { content:""; position:absolute; inset:-1px -1px; }
.stBtn { --st:0; width:44px; height:22px; padding:0; border:0; background:url(/ui/status/ok.webp) calc(var(--st)*-44px) 0 / 176px 44px no-repeat; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; font:700 11px/22px Verdana,Tahoma,sans-serif; color:#ea9207; text-shadow:0 1px 1px #000; } .stBtn::after { content:""; position:absolute; inset:-3px; }
.stNo { background-position:calc(var(--st)*-44px) -22px; }
@media (hover:hover) { .stPM:hover:not(:disabled), .stBtn:hover:not(:disabled) { --st:1; } .stBtn:hover:not(:disabled) { color:#ffb83a; } }
.stPM:active:not(:disabled), .stBtn:active:not(:disabled) { --st:2; } .stBtn:active:not(:disabled) { color:#8a5200; } .stPM:disabled, .stBtn:disabled { --st:3; cursor:default; } .stBtn:disabled { color:#8a8a8a; }
.stAsk { display:none; left:38px; top:196px; width:224px; padding:10px 10px 8px; background:linear-gradient(#1b1812, #0e0c09); border:1px solid #6b5a35; border-radius:3px; box-shadow:0 0 0 2px #000, 0 6px 18px #000; z-index:5; } .stAsk.on { display:block; }
.stAsk p { margin:0 0 8px; font-size:11.5px; line-height:1.4; color:#e8e0cc; white-space:pre-line; text-align:center; } .stAskB { display:flex; justify-content:center; gap:10px; } .stAskB .stBtn { position:relative; }
.stTip { display:none; position:fixed; z-index:99999; max-width:260px; padding:6px 8px; background:rgba(12,10,7,.96); border:1px solid #6b5a35; border-radius:3px; color:#ece4cf; font:12px/1.4 Tahoma,"Segoe UI",system-ui,sans-serif; white-space:pre-line; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.6); }


/* ── Light / Dark choice (original TA_2D_Country_light_select / _fury_select, cut by tools/build_facpick.py) ──
   The stage is a 1920x744 box = rows 322..1066 of the original 1920x1200 picture; --fcs fits it to the screen (loginui.js layout). Banner Light x690..1920 (right), banner Fury x0..1320 (left),
   both share one diagonal (1300,336)-(700,874) MEASURED from the alpha of the pictures; click areas are cut along it. The caption (4 lines baked into the picture, same spot for both sides)
   shows for the side under the pointer. GUESS: the original highlight/hover behaviour is unknown: here the side not looked at is dimmed. */
body[data-screen=faction] #luiBg { display:block; background:radial-gradient(ellipse at 50% 55%, #14161d 0%, #07080c 70%); }
#faction.on { padding:0; }
#fcStage { position:absolute; left:50%; top:50%; width:1920px; height:744px; margin:-372px 0 0 -960px; transform:scale(var(--fcs,1)); transform-origin:50% 50%; }
.fcSide { position:absolute; padding:0; border:0; margin:0; background:transparent no-repeat 0 0 / 100% 100%; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:filter .15s; outline:none; }
.fcSide.light { left:690px; top:6px; width:1230px; height:552px; background-image:var(--lui-fac_light); clip-path:polygon(610px 0, 1230px 0, 1230px 552px, 0 552px); }
.fcSide.dark { left:0; top:0; width:1320px; height:558px; background-image:var(--lui-fac_dark); clip-path:polygon(0 0, 1300px 0, 690px 558px, 0 558px); }
.fcSide:focus-visible { filter:brightness(1.25) drop-shadow(0 0 8px #ffe9a8); }
#fcStage[data-hot=light] .fcSide.dark, #fcStage[data-hot=dark] .fcSide.light { filter:grayscale(.55) brightness(.5); }
#fcStage[data-hot=light] .fcSide.light, #fcStage[data-hot=dark] .fcSide.dark { filter:brightness(1.12); }
.fcTxt { position:absolute; left:630px; top:616px; width:660px; height:128px; background:no-repeat 0 0 / 100% 100%; pointer-events:none; opacity:0; transition:opacity .15s; }
.fcTxt.light { background-image:var(--lui-fac_light_t); } .fcTxt.dark { background-image:var(--lui-fac_dark_t); }
#fcStage[data-hot=light] .fcTxt.light, #fcStage[data-hot=dark] .fcTxt.dark { opacity:1; }
#faction .luiTitleTop { position:absolute; left:0; right:0; top:10px; text-align:center; pointer-events:none; font:700 clamp(13px,3.4vh,24px) var(--serif); letter-spacing:.34em; color:#e9dcc0; text-shadow:0 2px 8px #000; text-transform:uppercase; }
/* confirmation: OUR plain dark panel (no original window art for it is known) with the original OK / Cancel buttons */
#fcConfirm { display:none; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
#fcConfirm.on { display:flex; }
.fcBox { zoom:var(--vk,1); width:300px; padding:18px 16px 16px; text-align:center; background:linear-gradient(#1b1d26,#0e0f15); border:1px solid #6b5a3a; box-shadow:0 0 0 2px #000, 0 8px 30px #000; color:#e9dcc0; font:600 15px var(--serif,system-ui); }
#fcAsk { font-size:16px; text-shadow:0 1px 2px #000; } .fcBox.light #fcAsk { color:#8fc8ff; } .fcBox.dark #fcAsk { color:#ff9a8a; }
.fcSub { margin-top:8px; font:12px system-ui,sans-serif; color:#b9ad92; }
.fcBtns { display:flex; justify-content:center; gap:22px; margin-top:16px; --k:1; }

/* ── login picture (login_bg_main) with the official logo above the ID / Password panel (positions from loginui.js layoutLogin) ── */
/* lgAlign: the panel at the picture's own scale (--kla), its User ID and Password boxes on the two ornamental lines of the picture; OK on the upper line, Cancel on the lower one */
#auth.lgAlign .lgForm { --k:var(--kla); bottom:auto; }
#auth.lgAlign .lgRow { flex-direction:row; align-items:flex-start; }
#auth.lgAlign .lgBtns { flex-direction:column; gap:calc(20px*var(--k)); margin-top:calc(14.5px*var(--k)); }
#auth .luiNotice.hide { display:none; }
/* a login field has focus (keyboard up): form placed by loginui.js inside the visible area */
#auth.kb .lgForm { bottom:auto; max-width:100vw; } #auth.kb #lgLogo { display:none !important; } #auth.kb .lgExtra { gap:0; } #auth.kbTight .lgExtra, #auth.kbTight .lgHint { display:none; }
.lgLogo { position:absolute; left:var(--lgX,50%); top:calc(var(--lgY,40vh) - var(--lgH,0px)); height:var(--lgH,0px); aspect-ratio:1448 / 1086; transform:translateX(-50%); pointer-events:none; z-index:1; }
.lgLogo img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 10px rgba(0,0,0,.85)); }
.lgLogo::before { content:""; position:absolute; inset:-18% -14%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,214,140,.55) 0%, rgba(255,170,80,.22) 38%, transparent 70%); opacity:0; pointer-events:none; }

/* ── intro (once per page load, loginui.js): black, the logo fades in at the centre with a glow, glides to its place while the picture fades in, then the form ──
   opacity / transform only (cheap on phones). introWait = black while the boot loading screen is still up. */
body.introWait, body.intro, body.introRM { background:#000; }
body.introWait #luiBg, body.introWait #auth .luiVig, body.introWait .lgLogo, body.introWait #auth .lgForm, body.introWait #auth .luiNotice { opacity:0; }
body.intro #luiBg { animation:luiBgIn 2.4s cubic-bezier(.4,0,.2,1) 1.6s both; }
body.intro #auth .luiVig { animation:luiFadeIn 1.6s ease 2.2s both; }
body.intro .lgLogo { animation:luiLogoIn 3.1s both; }
body.intro .lgLogo::before { animation:luiGlowIn 3.1s ease-in-out both; }
body.intro #auth .lgForm, body.intro #auth .luiNotice { animation:luiFormIn .9s ease-out 3.1s both; }
@keyframes luiBgIn { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:none; } }
@keyframes luiFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes luiLogoIn {
  0% { opacity:0; transform:translate(calc(-50% + var(--ix,0px)), var(--iy,0px)) scale(1.18); animation-timing-function:ease-out; }
  32% { opacity:1; transform:translate(calc(-50% + var(--ix,0px)), var(--iy,0px)) scale(1.24); animation-timing-function:linear; }
  50% { opacity:1; transform:translate(calc(-50% + var(--ix,0px)), var(--iy,0px)) scale(1.24); animation-timing-function:cubic-bezier(.5,0,.2,1); }
  92%, 100% { opacity:1; transform:translateX(-50%); }
}
@keyframes luiGlowIn { 0% { opacity:0; } 30% { opacity:.9; } 45% { opacity:.55; } 58% { opacity:.85; } 100% { opacity:0; } }
@keyframes luiFormIn { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
/* prefers-reduced-motion: everything in place, one short fade */
body.introRM #luiBg, body.introRM #auth .luiVig, body.introRM .lgLogo, body.introRM #auth .lgForm, body.introRM #auth .luiNotice { animation:luiFadeIn .8s ease both; }

/* ── delete confirmation (original sysmsg 5064), same window feel as the other login-screen boxes ── */
.delAsk { display:none; position:fixed; inset:0; z-index:60; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.delAsk.on { display:flex; }
.delBox { --k:var(--kc); width:min(86vw, 340px); padding:16px 14px 12px; text-align:center; border:1px solid #5a4a30; border-radius:3px; background:linear-gradient(#1c1710,#0d0b08); box-shadow:0 0 0 2px #000, 0 8px 30px #000; }
.delT { font:600 15px var(--serif, system-ui); color:#e9dcc0; text-shadow:0 1px 3px #000; } .delN { margin:8px 0 12px; font:700 17px var(--serif, system-ui); color:#ffb870; }
.delB { display:flex; gap:calc(14px*var(--k)); justify-content:center; }