:root{color-scheme:dark;font-family:Inter,Segoe UI,sans-serif;background:#101820;color:#e1e9eb}*{box-sizing:border-box}body{margin:0;display:flex;height:100vh;overflow:hidden}aside{width:314px;min-width:260px;background:#111a21;border-right:1px solid #28343d;display:flex;flex-direction:column;padding:26px 22px 18px;z-index:2}header{display:flex;align-items:center;gap:12px;margin-bottom:29px}.mark{font:32px Georgia,serif;color:#ebcc8b;width:45px;height:45px;display:grid;place-items:center;border:1px solid #7c704f}h1{font:25px Georgia,serif;letter-spacing:1px;margin:0 0 3px}.eyebrow{font-size:9px;letter-spacing:2px;color:#8499a5}.status{font-size:9px;letter-spacing:1.3px;color:#91c8b7;margin-bottom:28px}.status i{display:inline-block;width:5px;height:5px;background:#9bd6bf;border-radius:50%;margin-right:7px}label{font-size:11px;color:#adbdc7;margin-bottom:9px}input{font:12px Segoe UI,sans-serif;border:1px solid #34414b;border-radius:5px;background:#1b262f;padding:12px;color:#ecf1f4;outline:none}input:focus{border-color:#bda97a}#assets{margin:13px -8px 20px;min-height:80px;max-height:36vh;overflow:auto;flex:1}#assets button{display:block;border:0;border-radius:4px;background:transparent;text-align:left;color:#96acb9;padding:9px 8px;width:100%;font:10px/1.45 Consolas,monospace;overflow-wrap:anywhere}#assets button:hover,#assets button.active{background:#25333d;color:#edce91}.details{border-top:1px solid #29363f;padding-top:19px}#assetName{font:11px/1.6 Consolas,monospace;overflow-wrap:anywhere;margin:10px 0 15px;color:#d5e1e7}#stats{font-size:11px;color:#b9cad4;line-height:1.8;white-space:pre-line}#notes{font-size:10px;line-height:1.6;color:#baab8a;max-height:130px;overflow:auto;margin-top:16px}#notes p{margin:0 0 8px}footer{margin-top:auto;padding-top:22px;font-size:9px;line-height:1.8;color:#667e8d}main{position:relative;flex:1;min-width:0}canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}.toolbar{position:absolute;top:24px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:10px}#sceneLabel{font-size:9px;letter-spacing:2px;color:#a9bbc7}.toolbar button{border:1px solid #3c4b58;border-radius:4px;background:#1b2934cc;color:#b8cad5;padding:8px 12px;font-size:10px;cursor:pointer}.toolbar button:hover,.toolbar button[aria-pressed=true]{border-color:#b8a378;color:#efd59b}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:75%;font-size:12px;line-height:1.7;background:#111c27e8;padding:16px 24px;border:1px solid #46545d;border-radius:5px;text-align:center;overflow-wrap:anywhere}.controls{position:absolute;bottom:24px;left:28px;font-size:8px;letter-spacing:1px;color:#8196a4}.controls b{font-weight:400;color:#b4c7d4;font-size:10px;letter-spacing:0;margin-left:4px}.controls span{margin:0 12px;color:#677b87}.orientation{position:absolute;right:28px;bottom:24px;font-size:12px;color:#c0d9cd;text-align:right}.orientation span{font-size:20px;margin-left:3px}.orientation small{display:block;font-size:8px;letter-spacing:1px;color:#687e8b;margin-top:6px}@media(max-width:750px){aside{width:235px;min-width:200px;padding:18px 14px}.toolbar{left:15px;right:15px}#sceneLabel{display:none}.controls{left:15px;font-size:7px;max-width:200px;line-height:2}.controls span{margin:0 4px}.orientation{display:none}}

aside{overflow-y:auto}header{margin-bottom:15px}.status{margin-bottom:18px}#sessionPanel{border-top:1px solid #29363f;border-bottom:1px solid #29363f;padding:14px 0;margin-bottom:18px;font-size:11px}#sessionState{color:#edce91}.sessionActions{display:flex;gap:8px;margin:8px 0}#sessionPanel button,#sessionPanel select{border:1px solid #3c4b58;border-radius:4px;background:#1b2934;color:#c7d6de;padding:7px 9px;font-size:11px}#sessionPanel select{width:100%;margin:6px 0}#sessionPanel button:disabled,.toolbar button:disabled{opacity:.4;cursor:default}.sessionHint{font-size:9px;line-height:1.5;color:#8196a4}.movement{display:flex;align-items:center;gap:8px;margin:10px 0 0}.movement input{margin:0}#sessionError{color:#edb5a1;line-height:1.5;overflow-wrap:anywhere}#playerHUD{white-space:pre-line;font:10px/1.7 Consolas,monospace;color:#d5e1e7;margin-top:10px}#viewKind{position:absolute;left:28px;top:72px;font:9px/1.5 Segoe UI,sans-serif;letter-spacing:1px;color:#c0ad7c;max-width:70%}#assets{flex-shrink:0;min-height:80px;max-height:22vh}footer{padding-top:12px}.toolbar>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.toolbar button{padding:7px 9px}.toolbar{align-items:flex-start}#sceneLabel{max-width:30%;overflow-wrap:anywhere}

#playerVisualStatus{font-size:10px;line-height:1.5;color:#c5d7ce}#playerVisualWarnings{font-size:9px;line-height:1.5;color:#baab8a;max-height:110px;overflow:auto;margin-top:8px}#playerVisualWarnings p{margin:0 0 7px}

/* Game view: the HUD is painted on #hudCanvas over the WebGL view (see
   paintHUD in client.js); the asset toolbar moves to the top centre. */
#hudCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
main.game .controls,main.game .orientation,main.game #viewKind,main.game #sceneLabel{display:none}
main.game .toolbar{left:50%;right:auto;transform:translateX(-50%);opacity:.7}

body.game aside{display:none}
.presetIcons{display:flex;flex-wrap:wrap;gap:4px;max-height:160px;overflow-y:auto;margin:4px 0 8px}
.presetIcons .presetIcon{width:40px;height:40px;padding:0;background:#1d1915;border:1px solid #4e4432;cursor:pointer;overflow:hidden}
.presetIcons .presetIcon img{width:100%;height:100%;object-fit:cover;display:block}
.presetIcons .presetIcon.active{border-color:#f0c850;box-shadow:0 0 0 1px #f0c850}
#chatInput[hidden]{display:none}
#chatInput{position:absolute;left:10px;bottom:120px;width:420px;z-index:13;font:14px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#f4efe2;background:#0a0a0acc;border:1px solid #6b5a2a;border-radius:2px;padding:6px 8px;outline:none}
#chatInput:focus{border-color:#c9a85a}
#partyInvite[hidden]{display:none}
#partyInvite{position:absolute;left:50%;top:120px;transform:translateX(-50%);z-index:16}
#partyInvite .inviteBox{display:grid;gap:8px;min-width:280px;padding:14px 18px;background:#0d0b09ee;border:1px solid #9c8a4a;box-shadow:0 0 24px #000c;color:#f4efe2;text-align:center}
#partyInvite .eyebrow{color:#8fd0ff;font-size:11px;letter-spacing:3px}
#partyInvite p{margin:0;font-size:13px;color:#dfe9ee}
#partyInvite button{font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;padding:8px 12px;background:#1d1915;color:#f4efe2;border:1px solid #4e4432;cursor:pointer}
#partyInvite button:hover{background:#2c2519;border-color:#c9a85a}
#deathOverlay[hidden]{display:none}
#deathOverlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#20000055;z-index:16;pointer-events:none}
/* Loading curtain on world entry (the original's loading screen): the
   world is shown only once the ground, the objects, the own body and the
   units in view are in, so nothing pops in piece by piece. */
#loadCurtain{position:fixed;inset:0;display:block;background:#000 center/cover no-repeat;z-index:40;color:#e9dfc4;font-family:ArcAgeSub,ArcAgeFriz,Georgia,serif;transition:opacity .6s}
#loadCurtain[hidden]{display:none}
#loadCurtain.fading{opacity:0;pointer-events:none}
/* The original's world loading screen: one of the main_world/loading
   paintings (loading_first_time for a new character) edge to edge, the
   zone's name and the loading line at the bottom left, the eight-frame
   spinner of ui/tutorials/loading.dds at the bottom right. */
#loadCurtain b{position:absolute;left:48px;bottom:160px;font-size:34px;letter-spacing:1px;color:#f0c850;text-shadow:0 2px 6px #000,0 0 12px #000}
#loadCurtain span{position:absolute;left:50px;bottom:136px;font:14px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#e9dfc4;text-shadow:0 1px 3px #000}
/* The loading bar: game/ui/gauge.g (gauge_bg 796x20 under, gauge_orange
   785x6 as the fill, gauge_top 793x14 over), centred at the bottom as the
   original's loading progress. */
/* globalui/loading/loading_view.alb: black_bg over the bottom 157 px, the
   gaugeWindow 798x22 centred 61 px above the bottom, the notice label
   (LARGE) 4 px under it, the percent (XLARGE, loading_percent) 3 px right
   of it, the tip textbox (XLARGE, loading_tip, full width) 6 px above it;
   colours from game/ui/setting/font_color.g. */
#loadCurtain #loadShade{position:absolute;left:0;right:0;bottom:0;height:157px;background:#0009 center/100% 100% no-repeat}
#loadCurtain #loadBar{position:absolute;left:50%;bottom:61px;width:798px;max-width:calc(100vw - 120px);height:22px;transform:translateX(-50%);background:center/100% 100% no-repeat}
#loadCurtain #loadBarFill{position:absolute;left:5px;top:7px;height:6px;width:0;background:left/100% 100% no-repeat;transition:width .3s}
#loadCurtain #loadBarTop{position:absolute;left:2px;top:3px;width:calc(100% - 4px);height:14px;background:center/100% 100% no-repeat}
#loadCurtain strong{position:absolute;left:calc(50% + min(399px, 50vw - 60px) + 3px);bottom:64px;height:18px;line-height:18px;text-align:left;font:18px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:rgb(179,103,19);text-shadow:0 1px 2px #000}
#loadCurtain #loadNotice{position:absolute;left:0;right:0;bottom:42px;height:15px;margin:0;text-align:center;font:15px/15px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
#loadCurtain i{position:absolute;right:48px;bottom:40px;width:32px;height:32px;background:url("api/texture?asset=game%2Fui%2Ftutorials%2Floading.dds") 0 0/256px 48px no-repeat;animation:loadSpin .8s steps(8) infinite}
@keyframes loadSpin{from{background-position:0 0}to{background-position:-256px 0}}
#deathOverlay .deathBox{pointer-events:auto;display:grid;gap:10px;min-width:300px;padding:18px 22px;background:#0d0b09ee;border:1px solid #9c3a2a;box-shadow:0 0 30px #000c;color:#f4efe2;text-align:center}
#deathOverlay .eyebrow{color:#f0a999;font-size:12px;letter-spacing:3px}
#deathOverlay p{margin:0;font-size:13px;color:#cfc4b0}
#deathOverlay button{font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;padding:9px 12px;background:#1d1915;color:#f4efe2;border:1px solid #4e4432;cursor:pointer}
#deathOverlay button:hover{background:#2c2519;border-color:#c9a85a}
#escMenu[hidden]{display:none}
#escMenu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000066;z-index:20}
#escMenu .escBox{display:grid;gap:8px;min-width:240px;padding:18px;background:#0d0b09ee;border:1px solid #9c8a4a}
#escMenu button{font:600 14px Segoe UI,sans-serif;padding:9px 12px;background:#1d1915;color:#f4efe2;border:1px solid #4e4432;cursor:pointer}
#escMenu button:hover{background:#2c2519;border-color:#c9a85a}
/* The game's own cursor (game/textures/gui/mouse.dds, the white-and-blue
   arrow of the original) in the game view; the arrow's tip is the hot spot. */
body.game #view{cursor:url("api/texture?asset=game%2Ftextures%2Fgui%2Fmouse.dds") 1 1,auto}
/* The asset viewer's status line ("Opening resource tree") belongs to the
   debug asset manager, not to the login page (user 2026-10-18). */
body:not(.debug) #loading{display:none}
/* Debug details: the asset manager (resource tree, search, mesh stats,
   warnings, view tools) is a developer aid. Admin accounts can switch it on
   with the "Debug details" box; everyone else only ever sees the game. */
body:not(.admin) .debugToggle{display:none}
body:not(.debug) .status,body:not(.debug) label[for=search],body:not(.debug) #search,body:not(.debug) #assets,body:not(.debug) .details,body:not(.debug) #notes,body:not(.debug) .debugOnly,body:not(.debug) .toolbar,body:not(.debug) #viewKind,body:not(.debug) .controls,body:not(.debug) .orientation,body:not(.debug) #playerVisualStatus,body:not(.debug) #playerVisualWarnings,body:not(.debug) #retryAppearance,body:not(.debug) .movement:not(.debugToggle){display:none}
/* Lobby look: the original login stage is dark slate with glowing teal
   accents (login_stage/btn, play_btn, page); the panel and buttons follow
   it, with the key art (login_bg) behind the panel and the stage. */
:root{background:#0a1014;color:#dfe9ee}
aside{background:linear-gradient(180deg,#0e171dd9 0%,#0e171df5 40%,#0e171d 100%),url("api/texture?asset=game%2Fui%2Flogin_stage%2Flogin_bg.dds") center top/cover no-repeat #0e171d;border-right:1px solid #2b3f4a;padding:22px 20px 16px}
.mark{width:52px;height:52px;border:0;filter:drop-shadow(0 0 6px #6fd3e866) drop-shadow(0 1px 2px #000)}
h1{font:30px Georgia,"Times New Roman",serif;color:#eef6f8;letter-spacing:3px;text-shadow:0 0 10px #6fd3e855,0 2px 6px #000;margin:0}
header{gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #2b3f4a}
.eyebrow{color:#7fb6c6;font-size:10px;letter-spacing:2px;text-transform:uppercase}
label{color:#a9c3cd}
input{background:#101b22;border:1px solid #2f4753;color:#eef6f8;border-radius:3px;padding:10px 12px}input:focus{border-color:#6fd3e8;box-shadow:0 0 0 1px #6fd3e855,0 0 10px #6fd3e833}
#sessionPanel{border:0;padding:4px 0 10px;margin-bottom:10px}#sessionState{display:none}
#loginWho{color:#cfe3ea;margin:4px 0 10px}
#sessionPanel button,#sessionPanel select,#escMenu button,#creatorForm button{font:600 12px Segoe UI,sans-serif;letter-spacing:.5px;color:#e6f2f6;background:linear-gradient(180deg,#2b3f4a,#1a2830);border:1px solid #3e5663;border-radius:3px;padding:9px 12px;box-shadow:inset 0 1px 0 #ffffff14,0 1px 2px #000a;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
#sessionPanel button:hover:not(:disabled),#escMenu button:hover,#creatorForm button:hover{border-color:#6fd3e8;background:linear-gradient(180deg,#34505e,#1f3039);box-shadow:inset 0 1px 0 #ffffff1a,0 0 10px #6fd3e855}
#sessionPanel button:active:not(:disabled),#escMenu button:active{background:#162229;box-shadow:inset 0 2px 4px #0008}
#sessionPanel button:disabled{opacity:.35;cursor:default}
#sessionPanel select{width:100%;margin:6px 0;background:#101b22;font-weight:500}
#enter,#loginButton,#creatorSubmit{background:linear-gradient(180deg,#3fb3cc,#1d7f96);border-color:#7fdcee;color:#f4fdff;text-shadow:0 1px 1px #0008;letter-spacing:1px}
#enter:hover:not(:disabled),#loginButton:hover,#creatorSubmit:hover{background:linear-gradient(180deg,#5ccbe2,#2593ac);box-shadow:0 0 14px #6fd3e888}
#enter{width:100%;margin:8px 0 6px;padding:11px;font-size:13px}
#sessionError{color:#f0a999}
#playerHUD{color:#dfe9ee}
.movement{color:#a9c3cd;font-size:11px}
#loading{background:#0e171def;border-color:#3e5663;color:#dfe9ee;box-shadow:0 0 20px #0008}
#escMenu .escBox{background:#0e171df2;border:1px solid #3e5663;box-shadow:0 0 30px #000c,0 0 12px #6fd3e822}
#escMenu .eyebrow{text-align:center}
.presetIcons .presetIcon{background:#101b22;border-color:#2f4753}.presetIcons .presetIcon.active{border-color:#6fd3e8;box-shadow:0 0 0 1px #6fd3e8,0 0 8px #6fd3e866}
/* Lobby stage: the login key art, slowly drifting, behind the transparent
   preview canvas (the creator's character draws over it); off in the game. */
#lobbyArt{position:absolute;inset:0;background:url("api/texture?asset=game%2Fui%2Flogin_stage%2Flogin_bg.dds") center/cover no-repeat #0a1014;animation:lobbyDrift 60s ease-in-out infinite alternate;transform-origin:60% 40%}
#lobbyArt::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1014cc,#0a101400 30%),linear-gradient(0deg,#0a1014 0,#0a101400 25%)}
@keyframes lobbyDrift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,1.5%)}}
main.game #lobbyArt{display:none}
canvas#view{position:relative}
@media(prefers-reduced-motion:reduce){#lobbyArt{animation:none}}
/* No preview until a character exists and is chosen (or one is being
   made): the key art alone fills the stage. */
main.noPreview #view{visibility:hidden}
#creatorForm .eyebrow{display:block;margin:12px 0 8px;padding-top:10px;border-top:1px solid #2b3f4a}
body:not(.debug) #connect{display:none}
label[for=characters]{margin-top:6px}
body:not(.debug) #disconnect{display:none}
/* Character select: the original's slot cards (login_stage/04_character.g)
   with the race symbol, name and level; an open slot offers the creator;
   the start button wears game_start_btn. */
#charSlots[hidden]{display:none}
#charSlots{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px}
#charSlots .charSlotCard{position:relative;height:60px;border:0;border-radius:0;padding:0 10px 0 74px;text-align:left;background:#101b22 center/100% 100% no-repeat;color:#eef6f8;cursor:pointer;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;box-shadow:none}
#charSlots .charSlotCard i{position:absolute;left:4px;top:0;width:70px;height:60px;background:center/contain no-repeat}
#charSlots .charSlotCard b{display:block;font:15px ArcAgeSub,ArcAgeFriz,Georgia,serif;letter-spacing:.5px;text-shadow:0 1px 2px #000}
#charSlots .charSlotCard span{font-size:11px;color:#9fd3e3}
#charSlots .charSlotCard.empty{padding-left:16px}#charSlots .charSlotCard.empty b{font-size:13px;color:#b8d2db}
#charSlots .charSlotCard:disabled{opacity:.6;cursor:default}
body:not(.debug) #characters,body:not(.debug) label[for=characters],body:not(.debug) #createToggle{display:none}
#enter.art{background:center/100% 100% no-repeat;border:0;box-shadow:none;height:46px;padding:0;font-size:15px;letter-spacing:2px;color:#f4fdff;text-shadow:0 1px 2px #000}
#enter.art:hover:not(:disabled){filter:brightness(1.15);box-shadow:none;background-image:inherit}
/* Creator race and gender pickers from the race screen art (login_stage/01_race.g). */
.racePick{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 8px}
.racePick:empty{display:none}
/* #creatorForm button sets padding, a border and the background shorthand,
   which drew the 86 x 104 race art uncropped in a 52 x 63 box (the clipped
   race icons, user 2026-10-17): the picker's rules win by specificity. */
#creatorForm .racePick button{width:52px;height:63px;padding:0;border:0;border-radius:0;background:transparent center/100% 100% no-repeat;cursor:pointer;opacity:.7;box-shadow:none}
#creatorForm .racePick button.active,#creatorForm .racePick button:hover{opacity:1;background-color:transparent}
#creatorForm .racePick.genders button{width:32px;height:42px}
#sessionPanel select.hiddenPick{display:none}
/* Login form (user 2026-10-18 "fix the login page"): labels above full
   width fields, two wide buttons. */
#loginForm{display:flex;flex-direction:column;gap:6px;margin-top:18px}
#loginForm[hidden]{display:none}
#loginForm label{font:600 11px/1 Segoe UI,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#8fb2c2;margin-top:10px}
#loginForm input{width:100%;box-sizing:border-box;font:14px Segoe UI,sans-serif;padding:10px 12px;background:#101b22;border:1px solid #3e5663;border-radius:3px;color:#eef6f8}
#loginForm input:focus{outline:none;border-color:#6fd3e8;box-shadow:0 0 8px #6fd3e855}
#loginForm .sessionActions{display:flex;gap:8px;margin-top:16px}
#loginForm .sessionActions button{flex:1;padding:11px 12px;font-size:13px}
/* The original's UI faces (game/fonts/fonts.g en_us, served from the pak by
   /api/font): font_main Flareserif 821 for text and buttons (button styles
   set sizes only, so they keep FONT_PATH.DEFAULT), font_sub LibreBaskerville
   Bold for window titles (window_view: FONT_PATH.SUB, XLARGE) and headings;
   FrizQuadrata covers Cyrillic only. */
@font-face{font-family:ArcAgeSub;src:url("api/font?asset=game%2Fui%2Ffont%2Flibrebaskerville-bold.ttf") format("truetype")}@font-face{font-family:ArcAgeFriz;src:url("api/font?asset=game%2Fui%2Ffont%2Ffrizquadratactt-mod.ttf") format("truetype")}
@font-face{font-family:ArcAgeMain;src:url("api/font?asset=game%2Fui%2Ffont%2Fflareserif_821_roman.ttf") format("truetype")}
h1,.eyebrow{font-family:ArcAgeSub,ArcAgeFriz,Georgia,serif}
#sessionPanel button,#escMenu button,#creatorForm button,#enter{font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif}
body,input,select,label,#playerHUD,.sessionHint{font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif}
/* NPC quest dialogue: a parchment-dark panel at the right of the view. */
#questDialog[hidden]{display:none}
#questDialog{position:absolute;right:28px;top:90px;width:360px;max-height:70%;overflow:auto;z-index:15;background:#0e171df0;border:1px solid #3e5663;box-shadow:0 0 24px #000c,0 0 10px #6fd3e822;color:#dfe9ee;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif}
#questDialog .questHead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #2b3f4a}
#questDialog .questHead b{flex:1;font:16px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#f1e3c0}
#questDialog .questHead button,#questDialog .questEntry button{font:12px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#e6f2f6;background:linear-gradient(180deg,#2b3f4a,#1a2830);border:1px solid #3e5663;border-radius:3px;padding:6px 10px;cursor:pointer}
#questDialog .questEntry button{background:linear-gradient(180deg,#3fb3cc,#1d7f96);border-color:#7fdcee;margin-top:6px}
#questDialog .questEntry{padding:10px 12px;border-bottom:1px solid #1f2d36}
#questDialog .questEntry b{display:block;font:15px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#f0c850;margin-bottom:4px}
#questDialog .questEntry p{margin:2px 0;font-size:12px;color:#cfe3ea}
/* Inventory window on the original's parchment frame. */
#invWindow[hidden]{display:none}
/* The original anchors its bag 30 px from the right edge, centred
   vertically (x2ui/inventory/sort_bag.alb: newbag:AddAnchor('RIGHT', -30, 0)). */
#invWindow{position:absolute;right:30px;top:50%;transform:translateY(-50%);z-index:14;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
/* Geometry from the original's bag at 1080p (client-host trial 20261011T013912Z,
   frame 021): 507 x 414, title centred, the count under it at the right, the
   tab row with the search field at y 51, a 10 x 5 grid of 42 px slots at a
   47 px pitch in two blocks of five from (19, 86), the money row, then the
   tool buttons left and the sort button right. */
#invWindow .winFrame{position:relative;box-sizing:border-box;width:507px;min-height:414px;padding:0 19px 20px;background:#e8dcb8 center/100% 100% no-repeat;box-shadow:0 6px 24px #0008}
#invWindow #invFrame .winTitle{position:relative;justify-content:center;height:48px;margin:0}
#invWindow #invFrame .winTitle b{font-size:20px}
#invWindow #invCount{position:absolute;right:28px;top:34px;font-size:12px}
#invWindow #invClose{position:absolute;right:-12px;top:6px;margin:0}
#invWindow #invSearch{position:absolute;right:0;top:51px;width:225px;height:24px;margin:0;box-sizing:border-box}
#invWindow .invTabs{height:28px;margin:3px 0 7px}
#invWindow .invSlot:nth-child(10n+6){margin-left:5px}
#invMoney{margin:6px 0 0 auto;width:226px;height:22px;box-sizing:border-box;padding:2px 8px;text-align:right;font-size:13px;color:#3a2c12;background:#00000014;border:1px solid #0000001f}
#invWindow .winTitle,#charWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
/* Window title bars drag their window (the original's interface_move
   cursor from game/ui/cursor over them); a dragged window keeps its place
   for the session's browser. */
.winTitle{cursor:url("api/texture?asset=game%2Fui%2Fcursor%2Finterface_move_cursor.dds") 16 16,move;user-select:none}
.winTitle button{cursor:pointer}
.winDragging{opacity:.92}
#invWindow .winTitle b,#charWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#invWindow .winTitle span,#charWindow .winTitle span{font-size:12px;color:#5a4a2a}
#invWindow .winTitle button,#charWindow .winTitle button{margin-left:auto;width:22px;height:22px;border:0;background:#b53a2a center/100% 100% no-repeat;cursor:pointer;border-radius:3px}
#invWindow .invBody{display:flex;gap:14px}
/* The bag's button row (game/ui/inventory/inventory_button.g + default.g
   'reload' for sort): repair, strengthen, lock, convert, item book, open
   box, pin, sort. */
#invWindow .invButtons{display:flex;gap:6px;justify-content:flex-start;margin-top:10px}
#invWindow .invButtons button:last-child{margin-left:auto;width:70px}
#invWindow .invButtons button{width:34px;height:34px;padding:0;border:0;background:center/100% 100% no-repeat transparent;cursor:pointer}
#invWindow .invButtons button:hover{filter:brightness(1.15)}
#invWindow .invEquip{width:220px;display:flex;flex-direction:column;gap:4px}
#invWindow .eqRow{display:flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px;background:#0000000f;border:1px solid #0000001a}
#invWindow .eqRow img{width:22px;height:22px}
#invWindow .eqRow span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#invWindow .eqRow i{font-style:normal;font-size:10px;color:#6a5a3a}
#invWindow .invGrid{display:grid;grid-template-columns:repeat(10,42px);gap:5px;align-content:start}
/* Warehouse (the banker's bank, container 3): the bag's slots, left of the
   bag window. */
/* Mailbox: inbox / sent / write tabs, the list on the left, the opened mail
   or the write form on the right. */
/* Family: the household's members (name, level, online, title), invite by
   name, leave. */
/* ArchePass: category tabs, the passes on the left, the chosen pass's tiers
   (points, normal and premium rewards, claim) on the right. */
/* Settings (the ESC menu's Settings): video, sound and interface options. */
#settingsWindow[hidden]{display:none}
#settingsWindow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:17;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#settingsWindow .winFrame{width:440px;max-width:calc(100vw - 32px);padding:14px 18px 18px;background:#e8dcb8;box-shadow:0 6px 24px #0008}
#settingsWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#settingsWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#settingsWindow .winTitle>button{margin-left:auto;width:22px;height:22px;border:0;background:#b53a2a;cursor:pointer;border-radius:3px}
#settingsWindow h4{margin:10px 0 4px;font:14px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#settingsWindow .setRow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;padding:3px 0}
#settingsWindow .setRow input[type=range]{width:180px}
#settingsWindow #settingsNote{margin:10px 0 0;font-size:11px;color:#6a5a3a}
#passWindow[hidden]{display:none}
#passWindow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:16;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#passWindow .winFrame{width:760px;max-width:calc(100vw - 32px);height:80vh;display:flex;flex-direction:column;padding:14px 18px 18px;background:#e8dcb8;box-shadow:0 6px 24px #0008}
#passWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#passWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#passWindow .winTitle span{font-size:12px;color:#5a4a2a}
#passWindow #passTabs{margin-left:auto;display:flex;gap:4px}
#passWindow button{padding:4px 10px;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;background:#0000000f;border:1px solid #0000002a;border-radius:3px;cursor:pointer}
#passWindow button.active,#passWindow .passBtns button,#passWindow .claim{background:#3a2c12;color:#f1e3c0}
#passWindow button:disabled{opacity:.45;cursor:default}
#passWindow #passClose{width:22px;height:22px;padding:0;border:0;background:#b53a2a}
#passWindow .passBody{flex:1;min-height:0;display:flex;gap:10px}
#passWindow #passList{width:200px;overflow:auto;display:flex;flex-direction:column;gap:3px}
#passWindow #passList button{text-align:left}
#passWindow #passDetail{flex:1;overflow:auto;font-size:12px}
#passWindow .tierRow{display:grid;grid-template-columns:44px 70px 1fr 1fr;gap:6px;align-items:center;padding:3px 6px;border-bottom:1px solid #0000001a}
#passWindow .tierRow.reached{background:#f0c85033}
#passWindow .reward{display:flex;align-items:center;gap:5px}
#passWindow .reward img{width:28px;height:28px;background:#1d1915}
#passWindow .passBtns{display:flex;gap:6px;margin:8px 0}
#passWindow #passNote{margin:8px 0 0;font-size:11px;color:#6a5a3a}
#familyWindow[hidden]{display:none}
#familyWindow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:16;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#familyWindow .winFrame{width:420px;max-width:calc(100vw - 32px);padding:14px 18px 18px;background:#e8dcb8;box-shadow:0 6px 24px #0008}
#familyWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#familyWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#familyWindow .winTitle span{font-size:12px;color:#5a4a2a}
#familyWindow .winTitle>button{margin-left:auto;width:22px;height:22px;border:0;background:#b53a2a;cursor:pointer;border-radius:3px}
#familyWindow #familyList{display:flex;flex-direction:column;gap:3px;max-height:50vh;overflow:auto;font-size:12px}
#familyWindow .familyRow{display:flex;gap:8px;align-items:center;padding:4px 8px;background:#0000000f;border:1px solid #0000001a}
#familyWindow .familyRow .off{color:#8a7a5a}
#familyWindow .familyRow button,#familyWindow .familyInvite button{padding:3px 9px;font:12px ArcAgeMain,Segoe UI,sans-serif;color:#f1e3c0;background:#3a2c12;border:0;border-radius:3px;cursor:pointer}
#familyWindow .familyInvite{display:flex;gap:6px;margin-top:10px}
#familyWindow .familyInvite input{flex:1;min-width:0;font:12px ArcAgeMain,Segoe UI,sans-serif;padding:4px;border:1px solid #0000003a;background:#fffaf0}
#familyWindow #familyNote{margin:8px 0 0;font-size:11px;color:#6a5a3a}
#mailWindow[hidden]{display:none}
#mailWindow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:16;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#mailWindow .winFrame{width:640px;max-width:calc(100vw - 32px);min-height:380px;max-height:80vh;display:flex;flex-direction:column;padding:14px 18px 18px;background:#e8dcb8;box-shadow:0 6px 24px #0008}
#mailWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#mailWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#mailWindow .winTitle span{font-size:12px;color:#5a4a2a}
#mailWindow #mailTabs{margin-left:auto;display:flex;gap:4px}
#mailWindow #mailTabs button,#mailWindow .mailBtns button{padding:4px 10px;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;background:#0000000f;border:1px solid #0000002a;border-radius:3px;cursor:pointer}
#mailWindow #mailTabs button.active,#mailWindow .mailBtns button{background:#3a2c12;color:#f1e3c0}
#mailWindow .winTitle>button#mailClose{width:22px;height:22px;border:0;background:#b53a2a;cursor:pointer;border-radius:3px}
#mailWindow .mailBody{flex:1;min-height:0;display:flex;gap:10px}
#mailWindow #mailList{flex:1;overflow:auto;display:flex;flex-direction:column;gap:3px}
#mailWindow .mailRow{display:block;width:100%;text-align:left;padding:5px 8px;background:#0000000f;border:1px solid #0000001a;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;cursor:pointer}
#mailWindow .mailRow.picked{background:#3a2c1222;border-color:#3a2c12}
#mailWindow .mailRow.unread b{font-weight:700}
#mailWindow #mailDetail{flex:1.3;overflow:auto;font-size:12px;display:flex;flex-direction:column;gap:6px}
#mailWindow #mailDetail input,#mailWindow #mailDetail textarea{font:12px ArcAgeMain,Segoe UI,sans-serif;padding:4px;border:1px solid #0000003a;background:#fffaf0}
#mailWindow #mailDetail textarea{min-height:120px;resize:vertical}
#mailWindow .mailItem{display:flex;align-items:center;gap:6px}
#mailWindow .mailItem img{width:32px;height:32px;background:#1d1915}
#mailWindow .mailBtns{display:flex;gap:6px;margin-top:6px}
#mailWindow #mailNote{margin:8px 0 0;font-size:11px;color:#6a5a3a}
#bankWindow[hidden]{display:none}
#bankWindow{position:absolute;left:40px;top:50%;transform:translateY(-50%);z-index:14;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#bankWindow .winFrame{padding:14px 18px 18px;background:#e8dcb8;box-shadow:0 6px 24px #0008;max-width:calc(100vw - 32px)}
#bankWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#bankWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#bankWindow .winTitle span{font-size:12px;color:#5a4a2a}
#bankWindow .winTitle>button{margin-left:auto;width:22px;height:22px;border:0;background:#b53a2a;cursor:pointer;border-radius:3px}
#bankWindow .invGrid{display:grid;grid-template-columns:repeat(10,44px);gap:2px;align-content:start;max-height:60vh;overflow:auto}
#bankWindow .invSlot{position:relative;width:44px;height:44px;background:#1d1915 center/100% 100% no-repeat}
#bankWindow .invSlot img{position:absolute;inset:3px;width:38px;height:38px}
#bankWindow .invSlot.dropHere{outline:2px solid #f0c850;outline-offset:-2px}
#bankWindow .invSlot span{position:absolute;right:3px;bottom:1px;font:11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
#bankWindow #bankNote{margin:8px 0 0;font-size:11px;color:#6a5a3a}
#invWindow .invSlot{position:relative;width:42px;height:42px;background:#1d1915 center/100% 100% no-repeat}
#invWindow .invSlot img{position:absolute;inset:3px;width:36px;height:36px}
#invWindow .invSlot.dropHere,#charWindow .charSlot.dropHere{outline:2px solid #f0c850;outline-offset:-2px}
#invWindow .invSlot[draggable=true],#charWindow .charSlot[draggable=true]{cursor:grab}
#invWindow .invSlot span{position:absolute;right:3px;bottom:1px;font:11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
/* Character window: the paper doll with the original's empty-slot art
   (character/character_info.dds, 52 px icons on a 56 px pitch). */
#charWindow[hidden]{display:none}
#charWindow{position:absolute;left:40px;top:110px;z-index:14;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#charWindow .winFrame{width:520px;min-height:540px;padding:14px 18px 18px;background:#e8dcb8 center/100% 100% no-repeat;box-shadow:0 6px 24px #0008}
#charWindow .charBody{display:flex;gap:12px;justify-content:space-between}
#charWindow .charCol{display:flex;flex-direction:column;gap:4px}
#charWindow .charRow{display:flex;gap:4px;justify-content:center;margin-top:8px}
#charWindow .charSlot{position:relative;width:52px;height:52px;background:url(api/texture?asset=game%2Fui%2Fcharacter%2Fcharacter_info.dds) no-repeat;cursor:default}
#charWindow .charSlot img{position:absolute;inset:4px;width:44px;height:44px}
#charWindow .charSlot.worn::after{content:'';position:absolute;inset:0;border:1px solid #c9a24a99;pointer-events:none}
#charWindow .charMid{flex:1;display:flex;flex-direction:column;gap:10px}
#charWindow #charDoll{flex:1;min-height:280px;background:#00000014 center/44% no-repeat;border:1px solid #0000001f}
#charWindow .charStat{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px;background:#0000000f;border:1px solid #0000001a}
#charWindow .charStat b{font-weight:600;color:#3a2c12}
/* World map window (M): the continent map art (map_resources/<land>/en_us/world.dds)
   placed by the world_groups rectangle, the player marker on it. */
#mapWindow[hidden]{display:none}
#mapWindow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:14;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#mapWindow .winFrame{width:min(980px,calc(100vw - 60px));padding:14px 18px 14px;background:#e8dcb8 center/100% 100% no-repeat;box-shadow:0 6px 24px #0008}
#mapWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#mapWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#mapWindow .winTitle span{font-size:12px;color:#5a4a2a}
#mapWindow .winTitle button{width:22px;height:22px;border:0;background:#b53a2a center/100% 100% no-repeat;cursor:pointer;border-radius:3px}
#mapWindow #mapTabs{margin-left:auto;display:flex;gap:4px}
#mapWindow #mapTabs button{width:auto;height:auto;padding:4px 10px;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;background:#0000000f;border:1px solid #0000002a;border-radius:3px}
#mapWindow #mapTabs button.active{background:#3a2c12;color:#f1e3c0}
#mapWindow #mapCanvas{display:block;width:100%;height:auto;background:#d8ccaa;border:1px solid #0000002a}
/* Quest journal (L): the active quests on the parchment frame; the
   selected quest's objectives with progress, reward and turn-in NPC. */
#questJournal[hidden]{display:none}
/* The original's quest list (x2ui/questcontext/quest_list: CreateWindow 680x515
   centred, titled "Quest"; a 260 px tab column, "Basic" (in progress) and
   "Race" (main story, quest detail 2), over the list on a brown content
   background; a 371x418 journal frame on the right with its buttons). */
#questJournal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:14;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#questJournal .winFrame{width:680px;height:515px;box-sizing:border-box;padding:12px 15px 15px;background:#e8dcb8 center/100% 100% no-repeat;box-shadow:0 6px 24px #0008;display:flex;flex-direction:column}
#questJournal .winTitle{position:relative;display:flex;align-items:center;justify-content:center;height:30px;margin-bottom:12px}
#questJournal .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#questJournal .winTitle button{position:absolute;right:0;top:3px;width:22px;height:22px;border:0;background:#b53a2a center/100% 100% no-repeat;cursor:pointer;border-radius:3px}
#questJournal .qjBody{display:flex;gap:19px;flex:1;min-height:0}
#questJournal .qjLeft{width:260px;display:flex;flex-direction:column;min-height:0}
#questJournal .qjTabs{display:flex;gap:2px;height:28px}
#questJournal .qjTabs button{flex:1;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#5a4a2a;background:#0000001a;border:1px solid #00000026;border-bottom:0;border-radius:4px 4px 0 0;cursor:pointer}
#questJournal .qjTabs button.active{background:#4a3a20e6;color:#f1e3c0}
#questJournal .qjList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:6px;background:#5a42221f;border:1px solid #3a2c1233}
#questJournal .qjList button{text-align:left;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418;padding:5px 7px;background:transparent;border:1px solid transparent;cursor:pointer}
#questJournal .qjList button:hover{background:#00000012}
#questJournal .qjList button.active{background:#3a2c12;color:#f1e3c0}
#questJournal .qjList button.ready{color:#8a5a08}#questJournal .qjList button.active.ready{color:#f0c850}
#questJournal .qjList .qjEmpty{color:#6a5a3a;padding:8px;font-size:12px}
#questJournal .qjCount{height:20px;line-height:20px;font-size:12px;color:#5a4a2a;text-align:right;margin-top:4px}
#questJournal .qjRight{width:371px;height:418px;display:flex;flex-direction:column}
#questJournal .qjDetail{flex:1;overflow-y:auto;font-size:12px;line-height:1.5;padding:10px 12px;background:#5a42221f;border:1px solid #3a2c1233}
#questJournal .qjDetail h3{margin:0 0 2px;font:17px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#questJournal .qjDetail .qjLevel{color:#6a5a3a;font-size:11px;margin-bottom:8px}
#questJournal .qjDetail .qjHead{font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;margin:10px 0 3px;letter-spacing:.5px}
#questJournal .qjDetail ul{margin:0;padding-left:18px}#questJournal .qjDetail li.done{color:#4a7a2a}
#questJournal .qjDetail .qjEmpty{color:#6a5a3a}
#questJournal .qjButtons{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
#questJournal .qjButtons button{min-width:96px;height:26px;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#f1e3c0;background:#4a3a20;border:1px solid #2a2010;border-radius:3px;cursor:pointer}
#questJournal .qjButtons button:disabled{opacity:.45;cursor:default}
/* Skill window (K): the character's skillsets as tabs, each tree by level;
   learned skills lit, the rest offer Learn (the server decides). */
#skillWindow[hidden]{display:none}
#skillWindow{position:absolute;left:40px;top:110px;z-index:14;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#skillWindow .winFrame{width:640px;min-height:420px;padding:14px 18px 18px;background:#e8dcb8 center/100% 100% no-repeat;box-shadow:0 6px 24px #0008}
#skillWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#skillWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#skillWindow .winTitle span{font-size:12px;color:#5a4a2a}
#skillWindow .winTitle button{width:22px;height:22px;border:0;background:#b53a2a center/100% 100% no-repeat;cursor:pointer;border-radius:3px}
#skillWindow #skTabs{margin-left:auto;display:flex;gap:4px}
#skillWindow #skTabs button{width:auto;height:auto;padding:4px 10px;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;background:#0000000f;border:1px solid #0000002a;border-radius:3px}
#skillWindow #skTabs button.active{background:#3a2c12;color:#f1e3c0}
#skillWindow .skGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
#skillWindow .skRow{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#0000000f;border:1px solid #0000001a;font-size:12px}
#skillWindow .skRow img{width:36px;height:36px;flex:none}
#skillWindow .skRow .skIcon{width:36px;height:36px;flex:none;background:#1d1915}
#skillWindow .skRow:not(.learned) img{filter:grayscale(1) brightness(.7)}
#skillWindow .skRow .skText{flex:1;min-width:0}
#skillWindow .skRow b{display:block;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#skillWindow .skRow:not(.learned) b{color:#6a5a3a}
#skillWindow .skRow i{font-style:normal;font-size:10px;color:#6a5a3a}
#skillWindow .skRow button{width:auto;height:auto;padding:4px 8px;font:11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#f1e3c0;background:#3a2c12;border:0;border-radius:3px;cursor:pointer}
#skillWindow .skRow button:disabled{opacity:.5;cursor:default}
#skillWindow .skGroup{grid-column:1/-1;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;border-bottom:1px solid #3a2c1240;padding:6px 2px 2px}
#skillWindow .skGrid.emotes{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
#skillWindow .skEmote{display:flex;flex-direction:column;align-items:center;gap:3px;width:auto;height:auto;padding:5px 2px;background:#0000000f;border:1px solid #0000001a;border-radius:3px;cursor:pointer;font:10px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12}
#skillWindow .skEmote img,#skillWindow .skEmote .skIcon{width:36px;height:36px}
#skillWindow .skEmote:not(.learned){cursor:default;color:#6a5a3a}
#skillWindow .skEmote:not(.learned) img{filter:grayscale(1) brightness(.7)}
#skillWindow .skEmote.learned:hover{background:#3a2c1222}
#skillWindow .skEmote span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#skillWindow #skNote{margin:10px 0 0;font-size:11px;color:#6a5a3a}
/* Shop window: a merchant's wares (buy) and the bag (sell) on the parchment. */
#shopWindow[hidden]{display:none}
#shopWindow{position:absolute;left:40px;top:110px;z-index:15;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#shopWindow .winFrame{width:560px;min-height:420px;max-height:80vh;display:flex;flex-direction:column;padding:14px 18px 18px;background:#e8dcb8 center/100% 100% no-repeat;box-shadow:0 6px 24px #0008}
#shopWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#shopWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#shopWindow .winTitle span{font-size:12px;color:#5a4a2a}
#shopWindow .winTitle>button{width:22px;height:22px;border:0;background:#b53a2a center/100% 100% no-repeat;cursor:pointer;border-radius:3px}
#shopWindow #shopTabs{margin-left:auto;display:flex;gap:4px}
#shopWindow #shopTabs button{width:auto;height:auto;padding:4px 10px;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;background:#0000000f;border:1px solid #0000002a;border-radius:3px;cursor:pointer}
#shopWindow #shopTabs button.active{background:#3a2c12;color:#f1e3c0}
#shopWindow .shopList{flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px}
#shopWindow .shopRow{display:flex;align-items:center;gap:8px;padding:4px 8px;background:#0000000f;border:1px solid #0000001a;font-size:12px}
#shopWindow .shopRow img,#shopWindow .shopRow .skIcon{width:32px;height:32px;flex:none;background:#1d1915}
#shopWindow .shopRow .shopText{flex:1;min-width:0}
#shopWindow .shopRow b{display:block;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#shopWindow .shopRow i{font-style:normal;font-size:11px;color:#6a5a3a}
#shopWindow .shopRow button{width:auto;height:auto;padding:4px 10px;font:11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#f1e3c0;background:#3a2c12;border:0;border-radius:3px;cursor:pointer}
#shopWindow .shopRow button:disabled{opacity:.5;cursor:default}
#shopWindow #shopNote{margin:8px 0 0;font-size:11px;color:#6a5a3a}
/* Crafting window (a station's recipes): the shop window's frame, the
   recipe list on the left and the chosen recipe on the right. */
#craftWindow[hidden]{display:none}
#craftWindow{position:absolute;left:40px;top:110px;z-index:15;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#2a2418}
#craftWindow .winFrame{width:680px;max-width:calc(100vw - 32px);min-height:420px;max-height:80vh;display:flex;flex-direction:column;padding:14px 18px 18px;background:#e8dcb8;box-shadow:0 6px 24px #0008}
#craftWindow .winTitle{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#craftWindow .winTitle b{font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#craftWindow .winTitle span{font-size:12px;color:#5a4a2a}
#craftWindow .winTitle>button{margin-left:auto;width:22px;height:22px;border:0;background:#b53a2a;cursor:pointer;border-radius:3px}
#craftWindow .craftBody{flex:1;min-height:0;display:flex;gap:10px}
#craftWindow #craftList{flex:1;overflow:auto;display:flex;flex-direction:column;gap:3px}
#craftWindow .craftRow{display:flex;align-items:center;gap:8px;padding:4px 8px;background:#0000000f;border:1px solid #0000001a;font-size:12px;cursor:pointer;text-align:left;color:#3a2c12;font-family:inherit}
#craftWindow .craftRow.picked{background:#3a2c1222;border-color:#3a2c12}
#craftWindow .craftRow.none{color:#8a7a5a}
#craftWindow .craftRow img{width:28px;height:28px;flex:none;background:#1d1915}
#craftWindow .craftRow span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#craftWindow #craftDetail{flex:1;overflow:auto;font-size:12px}
#craftWindow #craftDetail h4{margin:0 0 6px;font:15px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#3a2c12}
#craftWindow .craftItem{display:flex;align-items:center;gap:8px;margin:3px 0}
#craftWindow .craftItem img{width:32px;height:32px;background:#1d1915}
#craftWindow .craftItem .short{color:#b53a2a}
#craftWindow .craftBtns{display:flex;gap:6px;margin-top:10px}
#craftWindow .craftBtns button{padding:5px 12px;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#f1e3c0;background:#3a2c12;border:0;border-radius:3px;cursor:pointer}
#craftWindow .craftBtns button:disabled{opacity:.5;cursor:default}
#craftWindow #craftNote{margin:8px 0 0;font-size:11px;color:#6a5a3a}
.money{white-space:nowrap}.money b{font-weight:600}.money .g{color:#b8860b}.money .s{color:#7a7a7a}.money .c{color:#8b5a2b}
#mapWindow #mapFoot{margin:8px 0 0;font-size:12px;color:#5a4a2a;display:flex;justify-content:space-between}
/* Item tooltip (hover on bag and worn items): name in the grade colour,
   grade, equipment points, the original tooltip lines. */
#itemTipBox{position:fixed;z-index:60;min-width:250px;max-width:320px;box-sizing:border-box;padding:9px 11px;background:#0e0c0aee;border:1px solid #9c8a4a;box-shadow:0 4px 14px #000a;font:12px/1.45 ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#e9e2cc;pointer-events:none}
#itemTipBox[hidden]{display:none}
#itemTipBox.framed{background:none;box-shadow:none;border-style:solid;border-width:7px 7px 6px 7px;border-image:var(--tipFrame) 7 7 6 7 fill / 7px 7px 6px 7px stretch;padding:3px 5px}
#itemTipBox b{display:block;font:15px ArcAgeSub,ArcAgeFriz,Georgia,serif}
#itemTipBox i{display:block;font-style:normal;font-size:11px;margin-bottom:5px}
#itemTipBox em{display:block;font-style:normal;color:#f0c850;margin-bottom:4px}
#itemTipBox small{display:block;margin-top:6px;color:#a89c80}
/* The original's item tooltip sections (tooltip.alb item_impl): icon and name, two-column rows, description, shop price. */
#itemTipBox .tipHead{display:flex;gap:8px;align-items:flex-start;margin-bottom:5px}
#itemTipBox .tipHead img{width:40px;height:40px;flex:none;border:1px solid #9c8a4a;box-sizing:border-box}
#itemTipBox .tipHead>div{flex:1;min-width:0}
#itemTipBox .tipRow{display:flex;justify-content:space-between;gap:12px}
#itemTipBox .tipBind{color:#f0c850}
#itemTipBox .tipDesc{margin-top:6px;color:#d8cfb4}
#itemTipBox .tipSep{border-top:1px solid #9c8a4a55;margin:7px 0 4px}
#itemTipBox .tipNoSell span{color:#d05a4a}
.money{white-space:nowrap}
.money img.coin{width:15px;height:15px;vertical-align:-3px;margin:0 4px 0 2px}
.money img.coin:last-child{margin-right:0}

/* Paged creator (U51): the form is a panel on the stage's right while
   creating (body.creating); pages Race, Skillset, Appearance, Name. */
body.creating #creatorForm{position:fixed;right:16px;top:56px;width:320px;max-height:calc(100vh - 110px);overflow-y:auto;z-index:30;padding:14px 16px 16px;background:linear-gradient(180deg,#0f1a20f2,#0a1216f2);border:1px solid #2f4753;border-radius:6px;box-shadow:0 10px 40px #000a}
#creatorHead{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
#creatorTitle{min-height:34px;font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#f0e3b8}
#creatorTitle img{height:34px;display:block}
#creatorSteps{display:flex;gap:4px;flex-wrap:wrap}
#creatorForm .creatorStep{flex:1;min-width:72px;height:auto;padding:5px 4px;font:11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#9fb4bd;background:#0d171c center/100% 100% no-repeat;border:1px solid #2f4753;border-radius:3px}
#creatorForm .creatorStep.active{color:#f4fdff;border-color:#6fd3e8;box-shadow:0 0 8px #6fd3e855}
#creatorForm .creatorStep.done{color:#cfe3e8}
.creatorPage[hidden]{display:none}
#creatorNav{display:flex;gap:8px;margin:12px 0 4px}
#creatorNav button{flex:1}
.abilityCards{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0}
#creatorForm .abilityCard{display:flex;flex-direction:column;align-items:center;gap:3px;height:auto;padding:8px 4px;background:#101b22;border:1px solid #2f4753;border-radius:4px;cursor:pointer}
#creatorForm .abilityCard.active{border-color:#6fd3e8;box-shadow:0 0 0 1px #6fd3e8,0 0 10px #6fd3e866}
.abilityCard .abilityIcon{width:40px;height:40px;background:#0b1317 center/100% 100% no-repeat;border:1px solid #2f4753}
.abilityCard b{font:13px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#e6f2f6}
.abilityCard i{font-style:normal;font-size:10px;color:#8fa6ae;text-align:center}
.hiddenPick{display:none!important}

/* Outside the paged creator the page parts stay out of the form. */
body:not(.creating) #creatorHead,body:not(.creating) #creatorNav{display:none}
/* The creator replaces the select screen: no slots or Enter World under it. */
body.creating #charSlots,body.creating #enter{display:none!important}

/* Bag search (U16). */
#invSearch{margin-left:auto;margin-right:8px;width:120px;height:20px;padding:1px 6px;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12;background:#f4ead0cc;border:1px solid #8a7a52;border-radius:3px}
.invSlot.dim{opacity:.28}

body.creating #creatorForm label{display:block;margin:8px 0 4px}
body.creating #creatorName{width:100%;box-sizing:border-box}
#creatorTitle img{max-width:100%;height:auto;max-height:34px}

/* Hair colour swatches (creator). */
.hairSwatches{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.hairSwatches:empty{display:none}
/* Face detail pickers (eyes, eyebrows, facial hair, makeup, tattoo). */
.decalPicks details{margin:4px 0}
.decalGrid{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
#creatorForm .decalPick{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;font:9px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#9fb4bd;background:#0d171c;border:1px solid #2f4753;border-radius:3px}
#creatorForm .decalPick img{width:36px;height:36px;display:block}
#creatorForm .decalPick.active{border-color:#6fd3e8;box-shadow:0 0 8px #6fd3e855}
/* Creator outfit choices. */
.outfitPicks{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
#creatorForm .outfitPicks button{flex:0 0 auto;min-width:34px;height:26px;padding:2px 8px;font:11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#9fb4bd;background:#0d171c;border:1px solid #2f4753;border-radius:3px}
#creatorForm .outfitPicks button.active{color:#f4fdff;border-color:#6fd3e8;box-shadow:0 0 8px #6fd3e855}
#creatorForm .hairSwatch{width:24px;height:24px;padding:0;border:1px solid #2f4753;border-radius:3px;cursor:pointer}
#creatorForm .hairSwatch.active{border-color:#f4fdff;box-shadow:0 0 0 2px #6fd3e8}

/* Preview skills on the skillset cards (login_stage_abilities). */
.abilityPreview{display:flex;gap:3px;margin-top:2px}
.abilityPreview span{width:22px;height:22px;background:#0b1317 center/100% 100% no-repeat;border:1px solid #2f4753}

/* Loading tip (loading_view.lua's loading_tip). */
#loadTip{position:absolute;left:0;right:0;bottom:89px;margin:0;padding:0 5%;text-align:center;font:18px/18px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#fff;text-shadow:0 1px 3px #000,0 0 8px #000}
#loadTip:empty{display:none}

/* Cutscene overlay (U39). */
#cinemaOverlay{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center}
#cinemaOverlay[hidden]{display:none}
#cinemaVideo{width:100%;height:100%;object-fit:contain;background:#000}
#cinemaInfo{position:absolute;bottom:60px;left:0;right:0;text-align:center;color:#f0e6c8;font:15px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif}
/* Skip: the original's close button (ui/common/default.dds btn_close_*, 35x35
   at 718,0) tinted with its "cinema" colours (default.g: normal 251,249,249,
   highlighted 191,226,239, pushed 141,167,176). */
#cinemaSkip{position:absolute;right:18px;top:18px;width:35px;height:35px;padding:0;border:0;cursor:pointer;background:url("api/texture?asset=game%2Fui%2Fcommon%2Fdefault.dds") -718px 0/1024px 256px no-repeat,rgb(251,249,249);background-blend-mode:multiply;-webkit-mask:url("api/texture?asset=game%2Fui%2Fcommon%2Fdefault.dds") -718px 0/1024px 256px no-repeat;mask:url("api/texture?asset=game%2Fui%2Fcommon%2Fdefault.dds") -718px 0/1024px 256px no-repeat}
#cinemaSkip:hover{background-color:rgb(191,226,239)}
#cinemaSkip:active{background-color:rgb(141,167,176)}
/* Cutscene subtitles: font_cinema_subtitle (fonts.g en_us: LibreBaskerville
   Bold) at FONT_SIZE.CINEMA 26 per 1080 px. Measured on
   desiree-peak-foxes-village-1080p: "Gods, what a night, I feel like I'll
   never wash" is 592 px wide (26 px Baskerville: 593), lines 48 px apart,
   the last baseline at y 1005, wrapped before 669 px. */
#cinemaCaption{position:absolute;bottom:5.56vh;left:50%;transform:translateX(-50%);width:57.4vh;max-width:96vw;margin:0;text-align:center;white-space:pre-line;color:#fff;font:2.407vh/1.846 ArcAgeSub,ArcAgeFriz,Georgia,serif;text-shadow:0 0 3px #000,1px 1px 2px #000,-1px -1px 2px #000;pointer-events:none}
/* Camera cutscenes play over the live world: no black backdrop, no video. */
#cinemaOverlay.live{background:transparent;pointer-events:none}
#cinemaOverlay.live #cinemaVideo{display:none}
#cinemaOverlay.live #cinemaSkip{pointer-events:auto}
body.cinemaNoHud #stage>:not(#view):not(#cinemaOverlay),body.cinemaNoHud aside{visibility:hidden}
/* U62: the middle column may shrink (long stat rows pushed the right slot
   column out of the frame); the doll canvas fills its box. */
#charWindow .charMid{min-width:0}
#charWindow #charDoll{position:relative;overflow:hidden}
#charWindow #charDoll canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
/* Mid-screen notices (failed casts), as the original's red system text. */
#centerNotice{position:absolute;left:0;right:0;top:24%;text-align:center;z-index:20;pointer-events:none;color:#ff5a3c;font:18px ArcAgeSub,ArcAgeFriz,Georgia,serif;text-shadow:0 0 3px #000,1px 1px 2px #000;transition:opacity .4s}
#centerNotice[hidden]{display:none}
/* Quest dialogue directing (U88): full-width bottom panel, HUD hidden. */
body.questDirecting #stage>:not(#view):not(#questDialog):not(#qd):not(#centerNotice){visibility:hidden}
body.questDirecting #questDialog{left:0;right:0;top:auto;bottom:0;width:auto;max-height:34%;min-height:22%;background:rgba(0,0,0,.8);border:0;border-top:1px solid #5a4a2a;box-shadow:none;padding:0 14%}
body.questDirecting #questDialog .questHead{border:0;justify-content:center}
body.questDirecting #questDialog .questHead b{flex:0 1 auto;text-align:center;color:#f0c850;font-size:20px}
body.questDirecting #questDialog .questHead .eyebrow{display:none}
body.questDirecting #questDialog .questEntry{border-bottom:1px solid #ffffff14}
body.questDirecting #questDialog .questEntry p{font-size:14px;line-height:1.5}
#invEquip[hidden]{display:none}
/* Game menu (U88, esc_menu.g). */
#escMenu .escBox{display:block;min-width:0;width:420px;max-height:90%;overflow:auto;padding:14px 16px;background:#0d0b09ee;border:1px solid #6b5a33}
#escSections{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
#escMenu .escTitle{display:flex;align-items:center;gap:6px;font:13px ArcAgeSub,ArcAgeFriz,Georgia,serif;color:#f0c850;margin:2px 0 4px;border-bottom:1px solid #5a4a2a;padding-bottom:3px}
#escMenu .escTitle img{width:24px;height:24px}
#escMenu button.escItem{display:flex;align-items:center;gap:6px;width:100%;height:26px;padding:0 6px;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:#f4efe2;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;text-align:left}
#escMenu button.escItem:hover:not(:disabled){background:var(--hi) center/100% 100% no-repeat}
#escMenu button.escItem img{width:22px;height:22px}
#escMenu button.escItem:disabled{color:#646464;cursor:default}
#escMenu button.escItem:disabled img{filter:grayscale(1) brightness(.45)}
#escBig{display:flex;justify-content:center;gap:26px;margin-top:14px;border-top:1px solid #5a4a2a;padding-top:12px}
#escMenu button.escBigBtn{width:84px;padding:0;background:transparent;border:0;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:#f4efe2;font:11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif}
#escMenu button.escBigBtn::before{content:'';width:54px;height:54px;background:var(--n) center/100% no-repeat}
#escMenu button.escBigBtn:hover:not(:disabled)::before{background-image:var(--h)}
#escMenu button.escBigBtn:active:not(:disabled)::before{background-image:var(--p)}
#escMenu button.escBigBtn:disabled{color:#646464;cursor:default}
#escMenu button.escBigBtn:disabled::before{background-image:var(--d)}
#escExitChoice{display:grid;gap:6px;margin-top:12px}
#escExitChoice[hidden]{display:none}
#escExitChoice #escResume,#escExitChoice #escPanel,#escExitChoice #escSelect{display:none}
/* Bag tabs (U83). */
.invTabs{display:flex;gap:4px;margin:0 0 6px}
.invTabs button{height:32px;min-width:32px;padding:2px 6px;display:flex;align-items:center;justify-content:center;background:#00000022;border:1px solid #0000002a;border-radius:3px;cursor:pointer;font:600 11px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#3a2c12}
.invTabs button.on{background:#f0c85055;border-color:#9c7a2a}
.invTabs button img{width:26px;height:26px}
/* Skills window layout (U81, ability.g / skill.g art). */
#skillWindow .skBody{display:flex;gap:10px;align-items:flex-start}
#skillWindow #skSide #skTabs{margin:0;display:flex;flex-direction:column;gap:3px;width:171px}
#skillWindow #skSide #skTabs button{width:171px;height:25px;padding:0 10px;border:0;border-radius:0;text-align:left;background:var(--df,#0000000f) center/100% 100% no-repeat;color:#f1e3c0;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;text-shadow:0 1px 1px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#skillWindow #skSide #skTabs button:hover{background-image:var(--ov,none)}
#skillWindow #skSide #skTabs button.active{background-image:var(--on,none);color:#fff4d0}
#skillWindow #skSide #skTabs button br{display:none}
#skillWindow .skGrid{flex:1}
#skillWindow .skExp{position:relative;height:11px;margin:-4px 0 8px;background:var(--bar,#0003) center/100% 100% no-repeat}
#skillWindow .skExp[hidden]{display:none}
#skillWindow .skExp i{position:absolute;left:3px;top:2px;bottom:2px;max-width:calc(100% - 6px);background:rgb(212,181,106)}
#skillWindow .winFrame{width:760px}
#skillWindow #skSide #skTabs button{color:#3a2c12;text-shadow:none}
#skillWindow #skSide #skTabs button.active{color:#1e1408;font-weight:800}
/* Login stage (U31). */
#loginLogo{display:none}
body.loginStage #loginLogo{display:block;position:absolute;left:50%;top:6%;width:206px;height:202px;transform:translateX(-50%);z-index:3;background:url("api/texture?asset=game%2Fui%2Flogin_stage%2F000_login.dds") 0 0 no-repeat;pointer-events:none;filter:drop-shadow(0 4px 12px #000a)}
body.loginStage aside{position:fixed;left:50%;bottom:7%;top:auto;transform:translateX(-50%);width:320px;max-height:none;height:auto;z-index:5;background:rgba(8,6,4,.72);border:1px solid #8c7238;border-radius:4px;box-shadow:0 8px 30px #000c;padding:16px 20px 14px}
body.loginStage aside>header,body.loginStage aside>.status{display:none}
body.loginStage aside label{color:#f0d79a}
body.loginStage #loginButton,body.loginStage #signupButton{background:linear-gradient(180deg,#6b5222,#3c2c10);border:1px solid #c9a24a;color:#fff4d6}
body.loginStage #loginButton:hover,body.loginStage #signupButton:hover{background:linear-gradient(180deg,#8a6a2c,#4e3a14)}
body.loginStage #loginForm{gap:6px}
body.loginStage #loginForm input{height:34px;padding:0 10px}
body.loginStage #loginLogo{top:3vh;height:clamp(0px,calc(100vh - 300px),202px);width:clamp(0px,calc((100vh - 300px)*1.02),206px);background-size:auto 100%;background-size:contain}
/* 000_login.dds is a 256x256 sheet with the logo in its top-left 206x202. */
body.loginStage #loginLogo{background-size:124.27% 126.73%;background-position:0 0}
/* ArcAge logo built from the original's glyphs (larger on the login page). */
body.loginStage #loginLogo{top:4vh;height:clamp(0px,calc(100vh - 300px),360px);width:auto;aspect-ratio:158/134;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 3px 10px #000c) drop-shadow(0 0 2px #000)}
body.loginStage #loginLogo:not(.built){visibility:hidden}
/* Logo above the account box, never under it. */
body.loginStage #loginLogo{height:clamp(0px,calc(100vh - 420px),360px)}
body.loginStage aside{top:calc(4vh + clamp(0px,calc(100vh - 420px),360px) + 12px);bottom:auto}

/* Accounts (2026-10-17): registration, resend, closed-alpha survey, terms
   modal and the Discord button share the login box's look. */
#registerForm,#resendForm,#applyForm{display:flex;flex-direction:column;gap:6px;margin-top:12px}
#registerForm[hidden],#resendForm[hidden],#applyForm[hidden]{display:none}
#registerForm label,#resendForm label,#applyForm>label{font:600 11px/1 Segoe UI,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#f0d79a;margin-top:8px}
#registerForm input:not([type=checkbox]),#resendForm input,#applyForm input:not([type=checkbox]):not([type=radio]),#applyForm textarea{width:100%;box-sizing:border-box;font:14px Segoe UI,sans-serif;height:34px;padding:0 10px;background:#101b22;border:1px solid #3e5663;border-radius:3px;color:#eef6f8}
#applyForm textarea{height:auto;padding:8px 10px;resize:vertical;min-height:72px}
#registerForm input:focus,#resendForm input:focus,#applyForm input:focus,#applyForm textarea:focus{outline:none;border-color:#e2b95a;box-shadow:0 0 8px #e2b95a44}
#registerForm .sessionActions,#resendForm .sessionActions,#applyForm .sessionActions{display:flex;gap:8px;margin-top:14px}
#registerForm .sessionActions button,#resendForm .sessionActions button,#applyForm .sessionActions button{flex:1;padding:10px 12px;font-size:13px}
#registerButton,#resendButton,#applyButton{background:linear-gradient(180deg,#6b5222,#3c2c10);border:1px solid #c9a24a;color:#fff4d6}
#registerButton:hover,#resendButton:hover,#applyButton:hover{background:linear-gradient(180deg,#8a6a2c,#4e3a14)}
.eyebrow+label{margin-top:4px}
#registerForm .termsCheck{display:flex;gap:8px;align-items:flex-start;text-transform:none;letter-spacing:0;font:13px/1.4 Segoe UI,sans-serif;color:#e8dcc0;margin-top:10px}
#registerForm .termsCheck input{margin-top:2px;flex:none}
.linkButton{background:none;border:0;padding:0;color:#f0c463;text-decoration:underline;cursor:pointer;font:inherit}
.linkButton:hover{color:#ffe2a0;background:none}
#loginForm>.linkButton{align-self:center;margin-top:8px;font-size:12px;color:#c9b88f}
.alphaButton{margin-top:10px;padding:9px 12px;background:linear-gradient(180deg,#1d4a57,#0f2a33);border:1px solid #6fd3e8;color:#e6fbff;font-weight:600;letter-spacing:.3px}
.alphaButton:hover{background:linear-gradient(180deg,#27616f,#143742)}
#captchaBox,#applyCaptcha{min-height:65px;margin-top:10px;display:flex;justify-content:center}
#accountNotice{margin:12px 0 0;padding:8px 10px;border-radius:3px;font:13px/1.45 Segoe UI,sans-serif;background:#3a1810cc;border:1px solid #a4563a;color:#ffd9cc}
#accountNotice.ok{background:#10302acc;border-color:#3f9d7f;color:#d6fff0}
#accountNotice[hidden]{display:none}
.formIntro{margin:2px 0 4px;font:13px/1.45 Segoe UI,sans-serif;color:#e8dcc0}
.surveySection{margin-top:16px;padding-bottom:4px;border-bottom:1px solid #8c723866;font:600 12px Segoe UI,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#e2b95a}
.surveyQ{border:0;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.surveyQ legend{padding:0 0 4px;font:13px/1.4 Segoe UI,sans-serif;color:#f4ead2}
.surveyQ label{display:flex;gap:8px;align-items:center;font:13px/1.3 Segoe UI,sans-serif;color:#d9ccae;cursor:pointer}
.surveyQ label:hover{color:#fff4d6}
.discordButton{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:9px 12px;border-radius:3px;background:#5865f2;color:#fff;font:600 13px Segoe UI,sans-serif;text-decoration:none;border:1px solid #7c86ff}
.discordButton:hover{background:#4752c4}
.discordButton[hidden]{display:none}
.discordButton svg{width:20px;height:20px;fill:currentColor}
/* Long panels (registration, survey) scroll inside the box; the survey
   widens the box and gives the logo's room to the questions. */
body.loginStage aside{max-height:calc(100vh - (4vh + clamp(0px,calc(100vh - 420px),360px) + 12px) - 12px);overflow:auto}
body.loginStage[data-panel=register] #loginLogo,body.loginStage[data-panel=apply] #loginLogo{height:clamp(0px,calc(100vh - 640px),200px)}
body.loginStage[data-panel=register] aside{top:calc(4vh + clamp(0px,calc(100vh - 640px),200px) + 12px);max-height:calc(100vh - (4vh + clamp(0px,calc(100vh - 640px),200px) + 12px) - 12px);width:360px}
body.loginStage[data-panel=apply] aside{top:calc(4vh + clamp(0px,calc(100vh - 640px),200px) + 12px);max-height:calc(100vh - (4vh + clamp(0px,calc(100vh - 640px),200px) + 12px) - 12px);width:min(560px,calc(100vw - 32px))}
/* Terms of Service modal. */
.modalBackdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000a;padding:16px}
.modalBackdrop[hidden]{display:none}
.modalBox{width:min(760px,100%);max-height:min(86vh,900px);display:flex;flex-direction:column;background:#0d0a06f2;border:1px solid #8c7238;border-radius:4px;box-shadow:0 12px 40px #000;color:#e8dcc0}
.modalBox header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #8c723866}
.modalBox header h2{margin:0;font:600 18px Segoe UI,sans-serif;color:#f0d79a}
.modalClose{background:none;border:0;color:#e8dcc0;font-size:24px;line-height:1;padding:0 4px;cursor:pointer}
.modalBody{overflow:auto;padding:4px 22px 16px;font:14px/1.6 Segoe UI,sans-serif}
.modalBody h2{font:600 15px Segoe UI,sans-serif;color:#e2b95a;margin:20px 0 6px}
.modalBody h3{font:600 13px Segoe UI,sans-serif;color:#f0d79a;margin:14px 0 4px}
.modalBody p,.modalBody li{color:#e0d5bc}
.modalBody a{color:#f0c463}
.modalBox footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid #8c723866}
.modalBox footer button{padding:9px 18px}
#termsAgree{background:linear-gradient(180deg,#6b5222,#3c2c10);border:1px solid #c9a24a;color:#fff4d6}
.termsMeta{color:#bfae86;font-size:13px}
.termsTable{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.termsTable th,.termsTable td{border:1px solid #8c723866;padding:6px 8px;text-align:left;vertical-align:top}
.termsTable th{color:#f0d79a;background:#ffffff08}
/* The standalone /terms page. */
body.termsPage{margin:0;background:#0b0907;color:#e0d5bc;font:15px/1.65 Segoe UI,sans-serif;overflow:auto}
body.termsPage #termsDoc{max-width:820px;margin:0 auto;padding:32px 20px 64px}
body.termsPage h1{color:#f0d79a;font-size:26px}
body.termsPage h2{color:#e2b95a;font-size:18px;margin-top:28px}
body.termsPage h3{color:#f0d79a;font-size:15px}
body.termsPage a{color:#f0c463}
@media (max-width:520px){body.loginStage aside{width:calc(100vw - 32px)!important}}
#phaseBadge{align-self:center;margin:0 0 6px;padding:4px 12px;border-radius:12px;background:#10302acc;border:1px solid #3f9d7f;color:#d6fff0;font:600 12px Segoe UI,sans-serif;letter-spacing:.3px;text-align:center}
#phaseBadge.closed{background:#3a1810cc;border-color:#a4563a;color:#ffd9cc}
#phaseBadge[hidden],#regInvite[hidden],#regInviteLabel[hidden]{display:none}
/* The login box grew (alpha, resend, Discord): the logo gives up height. */
body.loginStage #loginLogo{height:clamp(0px,calc(100vh - 560px),300px)}
body.loginStage aside{top:calc(4vh + clamp(0px,calc(100vh - 560px),300px) + 12px);max-height:calc(100vh - (4vh + clamp(0px,calc(100vh - 560px),300px) + 12px) - 12px)}
aside .linkButton,aside .linkButton:hover{background:none;border:0;box-shadow:none;padding:0;min-height:0;width:auto;flex:none}
aside #loginForm>.linkButton{align-self:center}
#sessionPanel .linkButton,#sessionPanel .linkButton:hover{background:none;background-image:none;border:0;box-shadow:none;padding:0;min-height:0;width:auto;flex:none;color:#f0c463;text-decoration:underline;font:inherit;letter-spacing:0;text-transform:none}
#sessionPanel #loginForm>.linkButton{color:#c9b88f;font-size:12px}
#sessionPanel .alphaButton{background:linear-gradient(180deg,#1d4a57,#0f2a33);border:1px solid #6fd3e8;color:#e6fbff}
.storeBox{width:min(620px,100%)}
.storeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:10px 0}
.storeItem{display:flex;flex-direction:column;gap:6px;align-items:center;padding:12px;border:1px solid #8c723866;border-radius:4px;background:#ffffff06;text-align:center}
.storeName{font:600 13px Segoe UI,sans-serif;color:#f0d79a}
.storePrice{font:600 18px Segoe UI,sans-serif;color:#fff4d6}
.storeItem button{width:100%;padding:7px;background:linear-gradient(180deg,#6b5222,#3c2c10);border:1px solid #c9a24a;color:#fff4d6}
.storeItem button:disabled{opacity:.45;cursor:default}
.storeFine{font-size:12px;color:#bfae86}
#storeNote{color:#f0d79a}

/* The lobby stage (login2's select stage): near-black with the faint blue
   band and the star field of the original's backdrop. */
body.lobbyStage #lobbyArt{background:url("api/texture?asset=game%2Ftextures%2Fp_effects%2Fksw_effect%2Fgraphic_renew_bg_00.dds") center 58%/140% 90% no-repeat,url("api/texture?asset=game%2Ftextures%2Fp_effects%2Fksw_effect%2Fgraphic_renew_bg_01.dds") center/cover no-repeat,radial-gradient(ellipse at 50% 62%,#0d1a2e 0,#04070d 55%,#010203 100%);animation:none}
body.lobbyStage #lobbyArt::after{background:linear-gradient(90deg,#010203aa,#01020300 26%)}

/* Character select as the original's stage page: the character cards on
   the right, the Start Game bar (04_character.g game_start_btn, 338x52)
   centred at the bottom, the character in the middle. */
body.lobbyStage:not(.loginStage){flex-direction:row-reverse}
body.lobbyStage:not(.loginStage) aside{border-left:1px solid #2a3a44;border-right:0}
body.lobbyStage:not(.loginStage) #enter{position:fixed;left:calc((100vw - 314px)/2);bottom:5vh;transform:translateX(-50%);width:min(338px,calc(100vw - 346px));height:52px;z-index:6;font-size:17px;letter-spacing:.5px}
.faceControls:empty{display:none}
.faceControls details{border-top:1px solid #2f4753;padding:6px 0}
.faceControls summary{cursor:pointer;color:#d8e7eb;font-size:13px}
body.creating #creatorForm .faceControls label{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:11px;color:#bfd0d6}
.faceControls input[type=range]{grid-column:1/-1;width:100%;height:22px;padding:0;accent-color:#6fd3e8}
.faceControls output{color:#e5cf95;font-variant-numeric:tabular-nums}
#creatorForm .faceControls .faceReset{height:auto;padding:5px 9px;margin:4px 0 8px;font-size:11px}

/* Quest directing (quest_context_directing.alb layout; sizes set in qdLayout). */
#qd{position:absolute;inset:0;z-index:16;pointer-events:none;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#fff}
#qd[hidden],#qd [hidden]{display:none!important}
#qd>*{pointer-events:auto}
#qd .qdUnder{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.8)}
#qd .qdUpper{position:absolute;display:flex;align-items:center;justify-content:center;background-size:100% 100%;background-repeat:no-repeat}
#qd .qdTitle{font-family:ArcAgeSub,ArcAgeFriz,Georgia,serif;white-space:nowrap;text-shadow:1px 1px 1px #000,0 0 3px #000}
#qd .qdClose{position:absolute;top:5px;right:5px;width:35px;height:35px;border:0;padding:0;background:transparent no-repeat center/100% 100%;cursor:pointer}
#qd .qdFrame{position:absolute}
#qd .qdAuthor,#qd .qdMsg,#qd .qdSelect,#qd .qdReward,#qd .qdSelTitle,#qd .qdRows{position:absolute;left:0;right:0}
#qd .qdAuthor{color:rgb(195,239,255);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
#qd .qdMsg{overflow:auto;text-align:left;padding-top:3px;scrollbar-width:thin}
#qd .qdMsg .qdTag{color:rgb(245,203,101)}
#qd .qdSelect{top:0}
#qd .qdSelTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#qd .qdRow{position:absolute;display:flex;align-items:center;gap:0;padding:0 12px 0 6px;border:0;background:transparent no-repeat left center/100% 100%;color:#fff;font:inherit;text-align:left;cursor:pointer;white-space:nowrap}
#qd .qdRow .qdMark{position:absolute;right:calc(100% + 3px);width:35px;height:35px;background:no-repeat center/100% 100%}
#qd .qdBtn{position:absolute;width:80px;height:65px;border:0;padding:0;background:transparent;color:#fff;font:15px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:pointer;text-shadow:1px 1px 1px #000}
#qd .qdBtn i{display:block;width:48px;height:43px;margin-left:-1px;background:no-repeat center/100% 100%}
#qd .qdBtn span{white-space:nowrap}
#qd .qdPage{position:absolute;width:48px;height:43px;border:0;padding:0;background:transparent;cursor:pointer}
#qd .qdPage i{display:block;width:48px;height:43px;background:no-repeat center/100% 100%}
#qd .qdPageLabel{position:absolute;width:120px;text-align:right;color:#fff}
#qd .qdReward{overflow:auto}
#qd .qdRwHead{color:rgb(183,247,255);margin:2px 0 4px}
#qd .qdRwLine{margin-bottom:6px}
#qd .qdRwRow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
#qd .qdRwItem{position:relative;display:flex;align-items:center;gap:6px;padding:2px 8px 2px 2px;border:1px solid transparent;background:rgba(255,255,255,.04);color:#fff;font:inherit}
#qd button.qdRwItem{cursor:pointer}
#qd .qdRwItem.picked{border-color:rgb(245,203,101);background:rgba(245,203,101,.15)}
#qd .qdRwItem img{width:36px;height:36px}
#qd .qdRwItem b{position:absolute;left:4px;top:24px;font:11px ArcAgeMain,ArcAgeFriz,sans-serif;text-shadow:1px 1px 1px #000}
canvas.steerHide{cursor:none!important}

/* The original customizer has no face-mesh choice (x2ui/customizing_new/common.alb: recommend, head style, face detail, face adornment, body shape, outfits): every character wears the model's native default face (characters.face_item_id), listed first. */
#creatorFace,label[for=creatorFace]{display:none!important}

#createToggle:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1)}
#createToggle:disabled::after{content:attr(title);display:block;font-size:11px;color:#d9a08a;margin-top:2px}

.charSlotCard.empty:disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed}
.charSlotCard .slotWhy{display:block;font-size:11px;color:#d9a08a;margin-top:2px}

.hairDye{display:flex;align-items:center;gap:8px;font-size:12px;margin:4px 0}
.hairDye[hidden]{display:none}
.hairDye input{width:42px;height:24px;border:0;padding:0;background:none}
/* The original's colour palette (x2ui/components/palette.alb, the engine's
   paintcolorpicker on ui/login_stage/color_palette.g): a 285 x 95 spectrum
   with the 12 px color_picker marker, a 20 px luminance bar (0-100, 50
   at start) with the saturation_picker thumb, and R/G/B boxes on rgb_bg. */
.hairDye.paletted{flex-wrap:wrap}
.hairDye.paletted input[type=color]{display:none}
.hairDye .palSwatch{width:22px;height:22px;border:1px solid #2f4753;border-radius:3px;cursor:pointer;padding:0}
.palWidget{position:relative;width:315px;height:135px;flex-basis:100%;margin:2px 0 6px;background:center/100% 100% no-repeat}
.palWidget[hidden]{display:none}
.palWidget canvas.palSpectrum{position:absolute;left:4px;top:4px;width:285px;height:95px;cursor:crosshair}
.palWidget canvas.palLum{position:absolute;left:293px;top:4px;width:18px;height:95px;cursor:ns-resize}
.palWidget .palMark,.palWidget .palThumb{position:absolute;width:12px;height:12px;pointer-events:none;background:center/100% 100% no-repeat}
.palWidget .palRGB{position:absolute;left:4px;right:4px;bottom:4px;height:26px;display:flex;align-items:center;gap:6px;padding:0 6px;background:center/100% 100% no-repeat;font-size:12px}
.palWidget .palRGB input{width:44px;height:18px;padding:0 3px;border:0;color:#f0e6c8;background:center/100% 100% no-repeat;font:12px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif}

/* Dynamic action bar (x2ui/hud/dynamic_action_bar). */
#dynBar{position:absolute;z-index:14;display:flex;gap:2px}
#dynBar[hidden]{display:none}
#dynBar .dynBtn{position:relative;border:0;padding:0;background:none;cursor:pointer}
#dynBar .dynBtn img{width:100%;height:100%;display:block}
#dynBar .dynKey{position:absolute;left:0;right:0;bottom:-3px;text-align:center;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:rgb(238,148,42);text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
body.questDirecting #stage>#dynBar{visibility:hidden}

.deleteDialog{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:60;min-width:320px;padding:18px 20px;background:#0e171df5;border:1px solid #5a4a2a;box-shadow:0 0 24px #000c;color:#eef6f8;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif}
.deleteDialog[hidden]{display:none}
.deleteDialog input{width:100%;box-sizing:border-box;margin:8px 0;padding:6px 8px;background:#081015;border:1px solid #3e5663;color:#fff}
.deleteDialog .deleteActions{display:flex;gap:8px;justify-content:flex-end}
.deleteDialog .deleteError{color:#ff9a86;min-height:1em;margin:6px 0 0}
/* Skillset detail (character_create_ability.alb): right of the screen, 445 x
   580 at 1680 x 1050; sizes from font_size.g (large 15, xlarge 18, xxlarge
   22), light_gray (172,172,172) from font_color.g. */
/* The original puts the skillset list left (81) and this panel right (77);
   our creator form is docked right for every page, so the panel takes the
   left until the UI rework moves the form (ARCAGE-TODO UI rework). */
/* character_create_ability: the skillset list LEFT +81, the detail RIGHT -77. */
body.creating.creatorSkillset #creatorForm{right:auto;left:81px}
#abilityDetail{position:fixed;right:77px;top:50%;transform:translateY(-50%);width:445px;max-width:40vw;color:#fff;font-family:ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;text-shadow:0 1px 2px #000;pointer-events:auto;z-index:5}
#abilityDetail[hidden]{display:none}
#abilityDetail .adName{font:22px ArcAgeSub,ArcAgeFriz,Georgia,serif;line-height:22px}
#abilityDetail .adDesc{margin-top:16px;width:450px;max-width:100%;font-size:15px;line-height:1.45;color:rgb(172,172,172)}
#abilityDetail .adSkills{display:flex;gap:5px;margin-top:16px}
#abilityDetail .adSkills span{width:40px;height:40px;background:#0b1317 center/100% 100% no-repeat;border:1px solid #3a5260}
#abilityDetail .adDiagram{position:relative;width:150px;height:150px;margin:96px auto 0}
#abilityDetail .adDiagram canvas{position:absolute;left:0;top:0}
#abilityDetail .adDiagramBg{position:absolute;left:-6px;top:-6px;width:160px;height:160px}
#abilityDetail .adAxis{position:absolute;white-space:nowrap;font-size:18px;padding:5px 10px 15px 10px;line-height:18px;cursor:default}
#abilityDetail .adAxis-bottom{transform:translate(-50%,-100%)}
#abilityDetail .adAxis-left{transform:translate(0,-50%)}
#abilityDetail .adAxis-topleft{transform:translate(0,0)}
#abilityDetail .adAxis-topright{transform:translate(-100%,0)}
#abilityDetail .adAxis-right{transform:translate(-100%,-50%)}
#abilityDetail .adDiff{display:flex;align-items:center;margin-top:50px;font-size:18px}
#abilityDetail .adDiffLabel{margin-right:13px;color:rgb(172,172,172)}
#abilityDetail .adStar{width:20px;height:20px}
#abilityDetail .adDiffDesc{margin-top:20px;width:420px;max-width:100%;font-size:15px;line-height:1.45;color:rgb(172,172,172);white-space:pre-line}
.abilityCard .abilityIcon.atlasIcon{width:70px;height:72px;border:0;background-color:transparent}

/* stage_login.alb versionLabel: the build at TOPLEFT +10,+10, FONT_SIZE.MIDDLE,
   font_color.g version_info (91,104,103). */
#loginVersion{display:none}
body.loginStage #loginVersion{display:block;position:fixed;left:10px;top:10px;color:rgb(91,104,103);font:13px ArcAgeMain,serif;z-index:5;pointer-events:none}
/* The side panel carries the login page's logo (arcage-logo.svg: circle-A
   and wordmark), centred, in place of the old gold mark and Georgia title. */
aside>header{justify-content:center}
aside>header .brand{display:block;width:118px;height:auto;filter:drop-shadow(0 3px 10px #000c) drop-shadow(0 0 2px #000)}
/* Character creator: the side menu is hidden until Cancel or Create (user
   2026-10-18: the skillset texts bled into it, and the creator is left only
   through its own buttons). Only the creator form stays; it is fixed. */
body.creating aside{background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;overflow:visible}
body.creating aside>*:not(#sessionPanel){display:none!important}
body.creating #sessionPanel>*:not(#creatorForm){display:none!important}
body.creating #creatorForm{pointer-events:auto}
/* Loading screen: no spinner; the % bar shows the progress (user 2026-10-18). */
#loadCurtain>i{display:none!important}
/* Creator layout (user 2026-10-18): the creator pane stays in one place on
   the left for every step (the side menu is hidden while creating), and the
   right side is left to the skillset detail. */
body.creating #creatorForm,body.creating.creatorSkillset #creatorForm{left:16px;right:auto}
/* ...and the emptied side panel takes no room: the stage spans the window
   (it kept its 314 px column, a dark band on the right). */
body.creating aside{position:fixed!important;width:0!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important}

/* Player popup menu (right-click a player; x2ui popup_menu.alb): hud.g
   tooltip_bg window with a 10 px inset, 20 px rows, 105 px minimum width,
   font_color.g context_menu_df / _ov / _on / _dis text. */
#unitMenu{position:fixed;z-index:70;min-width:105px;padding:10px;box-sizing:border-box;background:#0e0c0aee center/100% 100% no-repeat;border:1px solid #6b5a3a;box-shadow:0 4px 14px #000a;display:flex;flex-direction:column}
#unitMenu.art{border:0;background-color:transparent}
#unitMenu[hidden]{display:none}
#unitMenu button{all:unset;height:20px;line-height:20px;padding:0 4px;white-space:nowrap;cursor:pointer;font:13px ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:rgb(209,192,172)}
#unitMenu button:hover{color:rgb(233,197,155)}
#unitMenu button:active{color:rgb(200,168,129)}
#unitMenu button:disabled{color:rgb(120,120,120);cursor:default}
/* Equipment Info (View Equipped Gear on another player). */
#targetGear{position:fixed;z-index:65;left:50%;top:120px;transform:translateX(-50%);width:300px;max-height:60vh;overflow:auto;background:#0e0c0aee;border:1px solid #9c8a4a;box-shadow:0 4px 14px #000a;font:12px/1.4 ArcAgeMain,ArcAgeFriz,Segoe UI,sans-serif;color:#e9e2cc}
#targetGear[hidden]{display:none}
#targetGear header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #4a3f28}
#targetGear header b{font:14px ArcAgeSub,ArcAgeFriz,Georgia,serif}
#targetGear header button{all:unset;cursor:pointer;font-size:16px;padding:0 4px}
#targetGear ul{list-style:none;margin:0;padding:6px 10px}
#targetGear li{display:flex;align-items:center;gap:8px;padding:3px 0}
#targetGear li img{width:28px;height:28px}