/* Native artwork supplies the frames; browser controls remain readable and usable. */
.appearance-editor{display:grid;grid-template-columns:160px 1fr;gap:18px;margin:14px 0;color:#eadfbc}
.appearance-preview{background:radial-gradient(ellipse at 50% 65%,#66553a44,#11130e);border:3px ridge #8c7854;box-shadow:inset 0 0 15px #000;text-align:center;padding:6px}
.appearance-preview canvas{display:block;image-rendering:pixelated;width:140px;height:150px;margin:auto}
.preview-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:7px}
.preview-tools button{padding:3px 9px!important;min-height:28px}
.appearance-preview label,.appearance-controls>label{display:flex;flex-direction:column;gap:6px;font-size:12px;margin-bottom:12px}
.appearance-editor select{width:100%;min-height:34px;padding:6px 9px;border:1px solid #9c875c;background:#191c15;color:#efe4c6;font:12px var(--font);border-radius:0}
.appearance-controls fieldset{border:1px solid #8c7954;padding:12px;margin:0 0 14px;display:flex;gap:24px}
.appearance-controls fieldset label{display:flex;align-items:center;gap:7px;cursor:pointer}
.appearance-controls input{accent-color:#c1a16d}.appearance-status{font-size:11px;line-height:1.7;color:#c9c3a7;min-height:35px}
.appearance-picker{min-width:0;margin-bottom:12px}
.picker-label{display:block;font-size:12px;margin-bottom:6px}
.appearance-cycle{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:3px;align-items:stretch;min-width:0}
.appearance-cycle button{min-width:0;min-height:44px;padding:4px!important;border:1px solid #9c875c;background:linear-gradient(#574831,#29251a);color:#f3e1b5;font-size:14px;touch-action:manipulation}
.appearance-cycle button:focus-visible{outline:2px solid #f8dfa0;outline-offset:2px}
.appearance-cycle button:disabled{opacity:.4;cursor:default}
.appearance-cycle output{display:flex;align-items:center;justify-content:center;min-width:0;padding:5px 2px;text-align:center;font-size:11px;line-height:1.5;overflow-wrap:anywhere;border:1px solid #6b5e42;background:#171b13;color:#efe4c6}
.preview-class{display:block;color:#f4dfad;font-size:15px;line-height:1.5;margin:7px 0 2px}
.preview-only{display:block;font-size:11px;color:#c2b99b;letter-spacing:2px;margin-bottom:6px}
.native-character-board{position:relative;width:291px;height:438px;margin:auto;background:url('/assets/ui/character-0-0.png') no-repeat;color:#eee2bf;font:11px var(--font);text-shadow:1px 1px #000}
.native-character-value{position:absolute;left:151px;width:122px;font-weight:400;line-height:14px;text-align:left}
.native-character-name{position:absolute;left:126px;top:59px;width:140px;text-align:center;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.native-character-class{position:absolute;left:148px;top:101px;width:125px;font-size:11px}
.character-face{position:absolute;left:16px;top:0;width:82px;height:90px;image-rendering:pixelated;pointer-events:none}
#window-character{width:323px;min-width:306px;background:#1a1713ed;border-color:#887553}
#window-character .window-body{padding:6px 8px}#window-character .window-header{background:linear-gradient(#66523b,#201b15);border-bottom-color:#80684a}
.character-extras{display:flex;flex-direction:column;gap:5px;padding:8px 10px;color:#dbcba4}.character-extras small{color:#b9b297;font-size:10px}
.desktop-client .welcome{width:860px;max-width:94vw;max-height:94dvh;overflow:auto;background:#1e2119;color:#ded2ae;border:4px ridge #a48d65;border-radius:0;box-shadow:0 16px 80px #000c}
.desktop-client .welcome-art{background:radial-gradient(ellipse at 50% 30%,#73604366,#131910 75%);border-right:2px ridge #998561;min-height:460px;color:#ebd6a3}
.desktop-client .welcome-art h1{color:#e9d19a}.desktop-client .welcome-art p,.desktop-client .welcome-art span{color:#b2b294}
.desktop-client .welcome form{padding:28px;color:#ddd1b1}.desktop-client .welcome h2{font-size:20px;color:#e9d6ab;letter-spacing:2px}
.desktop-client .welcome form>p,.desktop-client .welcome-note{color:#acb197}.desktop-client .welcome label{color:#d6c89f}
.desktop-client .welcome #character-name{background:#11170f;border:1px solid #8c7850;color:#f5e9c8;border-radius:0}
.desktop-client .welcome .class-choice{background:#302f23;border:1px solid #7d7052;border-radius:0;color:#d2c19a}
.desktop-client .welcome .class-choice:has(input:checked){background:#625034;border-color:#c4a66b;color:#fff0c9}
.desktop-client .welcome .class-description{display:block;background:#171e13;border:1px solid #6f7354;padding:10px 12px;margin-bottom:5px}
.desktop-client .welcome .class-description strong{color:#e5cf9b}.desktop-client .welcome .class-description p{color:#b8bd9e;margin:5px 0;font-size:11px}
.desktop-client .welcome #create-button{border:2px ridge #c5aa76;background:linear-gradient(#75613e,#3a3522);border-radius:0;color:#f8e7b4;font-size:14px;min-height:43px}
.desktop-client .welcome .create-error{color:#efad94}.desktop-client .welcome .appearance-preview{padding:4px}
.desktop-client .client-window,.desktop-client #panel{background-color:#231f19;color:#e3d5b7;border-color:#98805a}
.desktop-client .window-header,.desktop-client .dialog-head{background:linear-gradient(#645239,#282219);color:#e3ca95;border-color:#9b8053}
.desktop-client .window-body button,.desktop-client #panel button{background:linear-gradient(#534732,#30291c);border:1px solid #a0895c;color:#efdfb7}
.function-rail{background:url('/assets/ui/rail-1-0.png') repeat-y center!important;background-color:transparent!important;border:0;right:0;width:40px}
.rail-orb{background:url('/assets/ui/rail-6-0.png') center/40px 41px no-repeat;border:0;box-shadow:none;width:40px;height:41px}
.hud-orb{background:url('/assets/ui/shortcut-20-0.png') center/52px 52px no-repeat!important;border:0!important;box-shadow:none!important;width:52px!important;height:52px!important}
.desktop-client .meter.hp span{background:#a14454 url('/assets/ui/top-1-0.png') left center/100% 100% no-repeat}
.desktop-client .meter.mp span{background:#407993 url('/assets/ui/top-2-0.png') left center/100% 100% no-repeat}
.sp-readout{left:465px;top:5px;padding:0;border:0;background:none}.meter.sp{width:128px;height:11px;background:#14120d;border:1px solid #958369;position:relative;overflow:hidden}
.meter.sp span{display:block;height:100%;background:#b19342 url('/assets/ui/top-3-0.png') left center/100% 100% no-repeat}.meter.sp b{position:absolute;inset:0;text-align:center;color:#fff7cc;font-size:9px;line-height:10px;text-shadow:1px 1px #000}
.desktop-client .player-card{gap:5px;padding-right:143px}.desktop-client .meter.hp,.desktop-client .meter.mp{width:128px}
@media(max-width:760px){
 .desktop-client .player-card{padding-right:5px;height:27px;align-items:flex-start;padding-top:4px}.desktop-client .meter.hp,.desktop-client .meter.mp{width:calc((100vw - 48px)/2)}
 .sp-readout{left:30px;top:19px}.meter.sp{width:calc(100vw - 44px);height:6px}.meter.sp b{font-size:7px;line-height:6px}
 .desktop-client .welcome{width:94vw;max-height:94dvh}.desktop-client .welcome-art{display:none}.desktop-client .welcome form{padding:18px}
 .appearance-editor{grid-template-columns:145px 1fr;gap:10px}.appearance-preview{padding:0}.appearance-controls fieldset{gap:12px;padding:9px}
 .function-rail{width:32px;background-size:32px 437px!important}.desktop-client #panel{padding:0;max-height:90dvh}.desktop-client #panel-body{padding:12px}
 .client-network{top:31px}.map-card{top:50px}.native-character-board{margin:0 auto}
}
@media(max-width:360px){.appearance-editor{grid-template-columns:1fr}.appearance-preview{width:158px;margin:auto}.appearance-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.appearance-controls fieldset,.appearance-status{grid-column:1/-1}}

.native-opening{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% center;opacity:.72;pointer-events:none}
.desktop-client .welcome-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 24px;isolation:isolate}
.welcome-art:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,#10170bec);z-index:-1}.native-opening{z-index:-2}
.desktop-client .welcome-art h1{font-size:32px;letter-spacing:3px;line-height:1.4}.desktop-client .welcome-art .section-eyebrow{letter-spacing:7px}
.desktop-client .map-card{background:transparent url('/assets/ui/rail-0-0.png') center/111px 116px no-repeat;border:0;box-shadow:none;width:111px;height:116px;top:33px;left:9px;padding:14px 10px 16px 8px}
.desktop-client .map-card canvas{width:90px;height:68px;margin:0}.desktop-client .map-card strong{font-size:9px;width:90px;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.function-rail>button{font-size:0;border:0;border-radius:0;background-size:contain;background-repeat:no-repeat;background-position:center;width:29px;height:32px;flex-basis:32px;box-shadow:none}
.function-rail>button span{font-size:12px}.function-rail button[data-panel=titles]{background-image:url('/assets/ui/rail-5-0-full.png')}.function-rail button[data-panel=quests]{background-image:url('/assets/ui/rail-8-0-full.png')}.function-rail button[data-panel=world]{background-image:url('/assets/ui/rail-9-0-full.png')}.function-rail button[data-panel=nearby]{background-image:url('/assets/ui/rail-10-0-full.png')}.function-rail button[data-panel=codex]{background-image:url('/assets/ui/rail-2-0-full.png')}.function-rail #chat-toggle{background-image:url('/assets/ui/rail-10-0-full.png')}.function-rail button[data-panel=journal]{background-image:url('/assets/ui/rail-8-0-full.png')}.function-rail button[data-panel=settings]{background-image:url('/assets/ui/rail-6-0.png')}
.desktop-client .actionbar{width:809px}.desktop-client .actionbar .hud-orb{left:583px;bottom:8px}.desktop-client .actionbar #coordinates{left:643px;bottom:20px}.desktop-client .scene-label{background:#13140fbe;border-color:#8a7954}
@media(max-width:760px){.desktop-client .welcome-art{display:none}.desktop-client .actionbar{width:100%}.desktop-client .actionbar #coordinates{left:auto;right:9px;bottom:7px}.desktop-client .map-card{top:44px;left:5px}.function-rail>button{width:27px;height:29px;flex-basis:29px}.function-rail{gap:2px}}

/* PANEL0100 definition 0 is the right-hand ornament, not the minimap frame. */
.desktop-client .map-card{background:#090b08dc;border:2px ridge #7e7055;box-shadow:1px 2px 6px #0008;padding:4px;width:111px;height:auto;top:36px}.desktop-client .map-card canvas{width:99px;height:74px}.desktop-client .map-card strong{width:99px;margin:3px 0}
.rail-orb{background:url('/assets/ui/rail-0-0.png') right top/111px 116px no-repeat;width:111px;height:116px;right:0;top:0;pointer-events:none}.function-rail{padding-top:114px}
.desktop-client .actionbar{width:740px}.desktop-client .actionbar .hud-orb{background:url('/assets/ui/rail-0-0.png') right top/111px 116px no-repeat!important;width:54px!important;height:57px!important;left:582px;bottom:6px}
.landscape-prompt{display:none}.client-option-group{border:1px solid #8b7752;background:#151811;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.client-option-group h3{grid-column:1/-1;color:#deca98;font-size:12px;margin:0 0 3px}.client-option-group label{display:flex;align-items:center;gap:7px;font-size:11px}.client-option-group input{accent-color:#b59b61}
@media not all{/* 2026-10-14 停用「請將手機轉為橫向」 */.landscape-prompt{position:fixed;inset:0;z-index:1000;background:radial-gradient(#433926,#11150e);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#e8d8ad;gap:14px;text-align:center;padding:24px}.rotate-device{font:80px Georgia;color:#c8ac72}.landscape-prompt strong{font-size:22px}.landscape-prompt p{font-size:13px;color:#b9b397}}
@media(orientation:landscape) and (max-height:540px){
 .desktop-client .client-network{top:2px;right:40px}.desktop-client .player-card{height:24px;width:auto;padding:3px 136px 4px 5px}.desktop-client .identity{display:flex;min-width:90px}.desktop-client .meter.hp,.desktop-client .meter.mp{width:105px;height:10px}.sp-readout{left:406px;top:5px}.meter.sp{width:105px;height:10px}.meter.sp b{font-size:8px;line-height:9px}
 .desktop-client .map-card{top:31px;left:6px;width:104px;padding:3px}.desktop-client .map-card canvas{width:94px;height:60px}.desktop-client .map-card strong{width:94px;font-size:8px}
 .desktop-client .function-rail{right:0;top:0;bottom:81px;width:32px;padding-top:48px;gap:1px;overflow:auto;background-size:26px 355px!important}.desktop-client .rail-orb{display:block;position:fixed;width:46px;height:49px;background-size:90px 94px;top:0;right:0}.desktop-client .function-rail>button{flex:0 0 24px;width:24px;height:24px;font-size:0}.desktop-client .function-rail>button span{font-size:10px;right:27px}
 .desktop-client .actionbar{width:740px;max-width:none;height:98px;left:0;bottom:0;transform:scale(.76);transform-origin:left bottom;background:url('/assets/ui/shortcut-0-0.png') left bottom no-repeat;border:0}
 .desktop-client .action-group{left:135px;right:auto;bottom:9px;gap:4px;justify-content:flex-start}.desktop-client .actionbar button.action{flex:0 0 34px;width:34px;height:34px;min-width:34px;border:0}.desktop-client .actionbar .experience{left:135px;right:auto;bottom:49px;width:367px}.desktop-client .actionbar .bottom-nav{left:8px;bottom:12px;width:115px;display:block}.desktop-client .actionbar .hud-orb{display:block}.desktop-client .actionbar #coordinates{left:643px;right:auto;bottom:20px;width:92px;font-size:10px}
 .desktop-client .client-windows{inset:25px 0 80px}.desktop-client .client-window{transform:scale(.78);transform-origin:top left;max-width:calc((100vw - 42px)/.78);max-height:calc((100dvh - 105px)/.78)}.desktop-client .window-header{min-height:30px}.desktop-client .window-header button{width:29px;height:29px}.desktop-client .window-body button{min-height:31px}
 .desktop-client .chat-box{left:6px;right:auto;width:300px;bottom:76px}.desktop-client .chat-box:not(.mobile-open){display:block}.desktop-client .chat-messages{height:44px}.desktop-client .chat-box .chat-tabs button{font-size:9px;padding:2px 7px}.desktop-client .chat-box form{padding:2px}.desktop-client .chat-box input{font-size:10px}.desktop-client .system-box{display:block;right:33px;bottom:0;width:160px;height:73px}.desktop-client .system-box>div{height:57px;font-size:8px}.desktop-client .quest-tracker{display:none}
 .desktop-client .touch-pad{display:none}.desktop-client .scene-bottom{bottom:80px;left:315px;max-width:calc(100vw - 365px)}.desktop-client .scene-label{font-size:8px;padding:3px 5px}.desktop-client #toast{bottom:100px;width:auto;max-width:70vw;font-size:11px}
 .desktop-client #panel{max-height:calc(100dvh - 35px);max-width:560px;width:72vw}.desktop-client #panel-body{padding:12px}.appearance-editor{grid-template-columns:160px 1fr}.desktop-client .welcome{width:790px;max-width:96vw;max-height:94dvh}.desktop-client .welcome-art{display:none}.desktop-client .welcome form{padding:16px;display:grid;grid-template-columns:1fr 320px;gap:7px 18px}.desktop-client .welcome form>.section-eyebrow,.desktop-client .welcome h2,.desktop-client .welcome form>p,.desktop-client .welcome form>label,.desktop-client .welcome form>input,.desktop-client .welcome form>fieldset,.desktop-client .welcome .class-description{grid-column:1}.desktop-client .welcome .appearance-editor{grid-column:2;grid-row:2/9;margin:0;grid-template-columns:150px 1fr;gap:8px}.desktop-client .welcome .welcome-note{grid-column:1/-1}.desktop-client .welcome #create-button{grid-column:2;grid-row:9}.desktop-client .welcome .class-description{margin:0}.desktop-client .welcome h2{font-size:18px;margin:0}.desktop-client .welcome form>p{margin:0;font-size:11px}.desktop-client .welcome .appearance-controls fieldset{padding:8px;margin-bottom:10px}.desktop-client .welcome .appearance-controls>label{margin-bottom:8px}
}

.desktop-client .welcome[data-mode=login]{width:680px}.desktop-client .character-login{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.character-login h2{font-size:17px!important;margin:0;color:#e9d4a6}.character-login small{font-size:10px;color:#bcb395;line-height:1.7;text-align:center}
.native-login-board{position:relative;width:241px;height:220px;background:url('/assets/ui/creation/jp2851-PANEL0000-0.png') no-repeat;flex-shrink:0}
.native-login-board label{position:absolute;left:25px;width:67px;background:#121510;font-size:11px;line-height:19px;color:#d9cda6}.login-name-label{top:50px}.login-password-label{top:72px}.native-login-board input{position:absolute;left:97px;width:103px;height:19px;padding:1px 4px;border:0;border-radius:10px;background:#030803;color:#eee5c9;font-size:11px}.native-login-board #login-character-name{top:51px}.native-login-board #login-character-password{top:73px}.native-login-board #login-character-button{position:absolute;left:23px;top:154px;width:193px;height:36px;color:#f6e8bf;background:#54421766;border:1px solid #977744;font-size:13px}.character-login>button,#back-to-login{border:1px solid #a58b5d;background:#473923;color:#eadbb4;padding:8px 14px;font-size:12px}.desktop-client .welcome #character-password{background:#11170f;border:1px solid #8c7850;color:#f5e9c8;border-radius:0;padding:10px 12px;width:100%}.welcome .error{color:#eda48c;min-height:15px;font-size:12px;line-height:1.5}
.desktop-client .welcome[data-mode=create]{background:#161912 url('/assets/ui/creation-room.png') center/cover no-repeat}.welcome[data-mode=create] .welcome-art{background:#10140999}.welcome[data-mode=create] #create-form{background:#13170edb}.welcome[data-mode=create] .native-opening{display:none}
.appearance-controls fieldset label{position:relative;min-height:40px;padding-left:31px}.appearance-controls fieldset label:before{content:"";position:absolute;left:0;top:0;width:29px;height:42px;background:url('/assets/ui/creation/jp2851-ManShape-0.png') center/contain no-repeat}.appearance-controls fieldset label:last-child:before{background-image:url('/assets/ui/creation/jp2851-WomShape-0.png')}.appearance-controls fieldset{gap:12px;padding:7px}
@media(orientation:landscape) and (max-height:540px){.desktop-client .welcome[data-mode=login]{width:540px}.desktop-client .welcome .character-login{display:flex;gap:8px;padding:12px}.desktop-client .welcome .character-login h2{font-size:15px!important}.desktop-client .welcome .character-login p{grid-column:auto}.desktop-client .welcome .character-login small{display:none}.desktop-client .welcome[data-mode=create]{width:790px}.desktop-client .welcome #create-form{grid-template-columns:1fr 325px;gap:5px 14px;padding:12px}.desktop-client .welcome #create-form .appearance-editor{grid-row:2/12}.desktop-client .welcome #create-button{grid-row:12}.desktop-client .welcome #back-to-login{grid-column:1;grid-row:12}.desktop-client .welcome #character-password{padding:6px 10px}.desktop-client .welcome #character-name{padding:6px 10px}.desktop-client .welcome form>fieldset{padding:7px;margin:0}.desktop-client .welcome .class-choice{padding:5px 8px}.desktop-client .welcome #create-error{grid-column:2;grid-row:13}}

#register-old-character{display:flex;flex-direction:column;gap:12px}#register-old-character label{display:flex;flex-direction:column;gap:6px}#old-character-password{padding:10px;background:#171a13;border:1px solid #8e7953;color:#eee0bd}