/* Entry UI uses the original JP login/password panels at their native aspect
   ratio. All labels are live Traditional Chinese; no title/button bitmap text. */
@media(orientation:landscape){
.desktop-client #welcome{width:590px;max-width:calc(100vw - 20px);max-height:calc(100dvh - 16px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:auto;color:#efdfb9}
.desktop-client #welcome[open]{grid-template-columns:220px minmax(0,1fr);align-items:center;gap:12px}
.desktop-client #welcome .welcome-art{height:320px;min-height:0;padding:22px 18px;border:0;background:none;overflow:hidden;mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.desktop-client #welcome .welcome-art:after{inset:0;background:linear-gradient(transparent 28%,#10130ac9);border:0;z-index:-1}
.desktop-client #welcome .welcome-art h1{font-size:25px;letter-spacing:3px;text-shadow:1px 2px #000}
.desktop-client #welcome .welcome-art p,.desktop-client #welcome .welcome-art>span{font-size:12px;color:#eddfbf;text-shadow:1px 1px #000}
.desktop-client #welcome .welcome-art .native-opening{object-fit:cover;opacity:.9}
.desktop-client #welcome #character-login{position:relative;width:337px;height:337px;min-width:0;padding:0;display:block}
.desktop-client #welcome #character-login>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.desktop-client #welcome .native-login-board{position:relative;display:block;width:313px;height:286px;padding:0;margin:0 auto;background:url('/assets/ui/creation/jp2851-PANEL0000-0.png') 0 0/313px 286px no-repeat}
.desktop-client #welcome .native-login-board:before,.desktop-client #welcome .native-login-board:after{content:none}
.desktop-client #welcome .login-board-title{position:absolute;left:50px;top:9px;width:150px;height:25px;margin:0;background:none;isolation:isolate;display:flex;align-items:center;justify-content:center;line-height:25px;font-size:15px;text-align:center;letter-spacing:2px;text-shadow:0 1px #302318,0 -1px #b69b6b40}
/* Cover the baked Japanese caption with adjacent grain from this same frame.
   Keep the metal rim, gear and gold ornament exposed; no flat title plate. */
.desktop-client #welcome .login-board-title::before,.desktop-client #welcome .login-board-title::after{content:"";position:absolute;z-index:-1;left:0;top:0;width:48px;height:25px;background:url('/assets/ui/creation/jp2851-PANEL0000-0.png') -142px -9px/313px 286px no-repeat;mask-image:linear-gradient(to right,transparent,#000 3px,#000 calc(100% - 3px),transparent);pointer-events:none}
.desktop-client #welcome .login-board-title::after{left:44px}
.desktop-client #welcome .login-field{position:absolute;left:32px;width:226px;height:29px;grid-template-columns:79px 139px;gap:8px}
.desktop-client #welcome .login-field:nth-of-type(1){top:65px}
.desktop-client #welcome .login-field:nth-of-type(2){top:94px}
.desktop-client #welcome .native-login-board label{position:relative;isolation:isolate;display:grid;place-items:center;height:29px;padding:0;border:0;background:transparent;box-shadow:none;line-height:29px;text-align:center;font-size:13px;color:#e6d3a6;text-shadow:0 1px 2px #0009}
/* Replace the baked caption with blank interior from this same source frame.
   Extend through the former caption's rightmost strokes, then feather the
   patch into the well. The live label keeps its centered, unchanged box. */
.desktop-client #welcome .native-login-board .login-field label{inset:auto;margin:0}
.desktop-client #welcome .native-login-board .login-field label::before{content:"";position:absolute;z-index:-1;inset:0 -8px 0 -2px;background:#101410 url('/assets/ui/creation/jp2851-PANEL0000-0.png') -30px -126px/313px 286px no-repeat;mask-image:linear-gradient(to right,transparent,#000 3px,#000 calc(100% - 3px),transparent),linear-gradient(to bottom,transparent,#000 3px,#000 calc(100% - 3px),transparent);mask-composite:intersect;pointer-events:none}
.desktop-client #welcome .native-login-board input{box-sizing:border-box;width:139px;height:27px;min-height:27px;padding:0 8px;border:1px solid #8a7750;border-radius:14px;background:#030803;color:#fff0cf;font-size:16px;text-align:center;box-shadow:inset 0 1px 2px #000c,0 1px 0 #dcc68e20;outline:0}
.desktop-client #welcome :is(.native-login-board,.register-field) input:is(:focus,:focus-visible){outline:0;outline-offset:0;border-color:#cfb575;box-shadow:inset 0 0 0 1px #cfb57530,0 1px 0 #dcc68e20}
.desktop-client #welcome .login-hint{position:absolute;top:146px;left:24px;width:265px;font-size:11px;line-height:18px;text-align:center}
.desktop-client #welcome .native-login-board #login-character-button{position:absolute;box-sizing:border-box;left:25px;top:205px;width:260px;height:42px;min-height:42px;margin:0;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse at center,#30200870 0%,#30200825 45%,transparent 73%);box-shadow:none;color:#fff0c8;text-shadow:0 1px 1px #160d02,0 2px 4px #241506,0 0 6px #241506;font-size:20px;font-weight:600;letter-spacing:.2em;text-indent:.2em;text-align:center;cursor:pointer;transition:color .15s,filter .15s}
.desktop-client #welcome .native-login-board #login-character-button:hover:not(:disabled){background:radial-gradient(ellipse at center,#3020088c 0%,#30200830 45%,transparent 73%);color:#fff7df;filter:brightness(1.12)}
.desktop-client #welcome .native-login-board #login-character-button:focus-visible{outline:2px solid #ffe3a5;outline-offset:3px}
.desktop-client #welcome .native-login-board #login-character-button:active:not(:disabled){background:radial-gradient(ellipse at center,#241708a6 0%,#24170840 45%,transparent 73%);box-shadow:none;transform:translateY(1px)}
.desktop-client #welcome .native-login-board #login-character-button:disabled{color:#c9b993;border-color:#8e7444;opacity:.65;cursor:wait}
.desktop-client #welcome .login-actions{position:absolute;left:0;top:287px;width:100%;display:flex;justify-content:center;gap:14px}
.desktop-client #welcome .login-actions button{min-height:28px;padding:3px 0 3px 23px;border:0;background:transparent url('/assets/ui/script-button-12-0.png') left center/18px 18px no-repeat;color:#e9d5a1;font-size:11px;text-shadow:1px 1px #000}
.desktop-client #welcome #character-login>small{position:absolute;top:321px;width:100%;font-size:10px;text-align:center;line-height:14px;color:#d8cead}
.desktop-client #welcome #login-error{position:absolute;left:35px;top:171px;width:265px;font-size:11px;text-align:center}
.desktop-client #welcome[data-mode=register]{width:590px}
.desktop-client #welcome #account-register{position:relative;display:block;width:337px;height:340px;min-width:0;padding:0;gap:0;background:url('/assets/ui/creation/jp2851-PANEL0001-0.png') left top/337px 308px no-repeat}
.desktop-client #welcome #account-register h2{position:absolute;top:8px;left:47px;width:222px;height:29px;margin:0;padding:0;background:#514735;font-size:16px;line-height:29px;text-align:left}
.desktop-client #welcome #account-register>p:not(.error){display:none}
.desktop-client #welcome .register-fields{position:absolute;inset:0;display:block}
.desktop-client #welcome .register-field{position:absolute;left:28px;display:grid;grid-template-columns:96px 143px;gap:7px;width:246px;height:29px}
.desktop-client #welcome .register-field:nth-child(1){top:70px}
.desktop-client #welcome .register-field:nth-child(2){top:100px}
.desktop-client #welcome .register-field:nth-child(3){top:130px}
.desktop-client #welcome .register-field label{position:static;display:grid;place-items:center;height:28px;padding:0;text-align:center;background:#101410;font-size:13px;line-height:28px;white-space:nowrap}
.desktop-client #welcome .register-field input{box-sizing:border-box;height:28px;min-height:28px;width:143px;padding:0 8px;margin:0;border:1px solid #8a7750;border-radius:15px;background:#030803;font-size:16px;text-align:center;box-shadow:inset 0 1px 2px #000c,0 1px 0 #dcc68e20;outline:0}
.desktop-client #welcome .register-field small{position:absolute;left:-1px;top:94px;width:278px;height:29px;padding:4px 2px;background:#101410;line-height:18px;text-align:center;font-size:10px}
.desktop-client #welcome .registration-actions{display:contents}
.desktop-client #welcome .registration-actions #account-register-button{position:absolute;left:22px;top:223px;width:291px;height:41px;min-height:41px;padding:0;border:0;background:none;color:#281c0c;text-shadow:0 1px #dcc081;font-size:15px;font-weight:600}
.desktop-client #welcome .registration-actions #account-register-back{position:absolute;top:310px;left:105px;height:28px;min-height:28px;padding:3px 8px 3px 25px;border:0;background:transparent url('/assets/ui/script-button-11-0.png') left center/18px 18px no-repeat;color:#ead8ad;font-size:12px}
.desktop-client #welcome #account-error{position:absolute;top:198px;left:24px;width:287px;font-size:11px;line-height:16px;text-align:center}
/* Characters stand on the source creation-room floor, not five nested cards. */
.desktop-client #welcome[data-mode=select],.desktop-client #welcome[data-mode=create]{width:940px;background:#13130e url('/assets/ui/creation-room.png') center/cover no-repeat;mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.desktop-client #welcome[data-mode=select]{display:block}
.desktop-client #welcome[data-mode=select] .welcome-art,.desktop-client #welcome[data-mode=create] .welcome-art{display:none}
.desktop-client #welcome #character-select{padding:15px 18px;background:none;text-shadow:1px 1px #000}
.desktop-client #welcome #character-select h2{font-size:20px;margin:0 0 3px}
.desktop-client #welcome #account-caption{margin:3px 0;font-size:11px}
.desktop-client #welcome #character-slots{gap:8px;margin:9px 0 8px}
.desktop-client #welcome .character-slot{position:relative;isolation:isolate;min-height:222px;padding:4px 0 8px;border:0;background:none;box-shadow:none;gap:4px;justify-content:flex-start;overflow:hidden}
.desktop-client #welcome .character-slot:before{content:"";position:absolute;z-index:-1;bottom:42px;left:50%;width:140px;height:52px;transform:translateX(-50%);background:url('/assets/ui/native-selection-plinth.png') center/contain no-repeat;mask-image:radial-gradient(ellipse,#000 45%,transparent 73%)}
.desktop-client #welcome .character-slot canvas{width:140px;height:150px;max-width:100%;margin-bottom:2px}
.desktop-client #welcome .character-slot strong{font-size:13px;white-space:nowrap;max-width:100%;text-shadow:1px 1px #000}
.desktop-client #welcome .character-slot span,.desktop-client #welcome .character-slot small{font-size:10px;color:#e8d5a8}
.desktop-client #welcome .character-slot.empty{padding-top:153px;font-size:12px;color:#cfbb85}
.desktop-client #welcome .character-slot.empty:after{content:"";position:absolute;top:98px;left:50%;width:43px;height:28px;transform:translateX(-50%);background:url('/assets/ui/native-account-create.png') center no-repeat}
.desktop-client #welcome .character-slot:hover,.desktop-client #welcome .character-slot:focus-visible{outline:0;filter:brightness(1.2);background:none}
.desktop-client #welcome .selection-actions{gap:25px}
.desktop-client #welcome .selection-actions button{padding:5px 6px 5px 25px;border:0;background:transparent url('/assets/ui/script-button-12-0.png') left center/18px 18px no-repeat;min-height:30px;font-size:12px;color:#efdfb6}
/* Creation is a stage plus a compact profession ledger and native input wells. */
.desktop-client #welcome[data-mode=create]{display:block;width:840px}
.desktop-client #welcome #create-form{box-sizing:border-box;display:grid;grid-template-columns:minmax(220px,.9fr) minmax(355px,1.3fr);grid-template-rows:24px 16px 30px 82px minmax(30px,1fr) 40px 14px;gap:4px 18px;height:min(360px,calc(100dvh - 28px));min-width:0;padding:12px 20px;background:#10120b45}
.desktop-client #welcome #create-form>.section-eyebrow,.desktop-client #welcome #create-form>p:not(.error){display:none}
.desktop-client #welcome #create-form>h2{grid-column:1;grid-row:1;font-size:20px;line-height:24px;margin:0}
.desktop-client #welcome #create-form>label{grid-column:1;grid-row:2;font-size:12px;line-height:16px;margin:0}
.desktop-client #welcome #character-name{grid-column:1;grid-row:3;width:100%;height:30px;min-height:30px;margin:0;padding:3px 10px;border:0;border-radius:14px;background:#030803;color:#f5e9c4;font-size:16px}
.desktop-client #welcome #create-form>fieldset{grid-column:1;grid-row:4;margin:0;padding:0;border:0}
.desktop-client #welcome #create-form>fieldset>legend{font-size:11px;margin:0 0 3px;line-height:14px}
.desktop-client #welcome #class-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 8px}
.desktop-client #welcome #class-options .class-choice{position:relative;display:flex;align-items:center;padding:3px 2px 3px 15px;min-height:19px;line-height:17px;border:0;background:none;font-size:12px;color:#d6c69e;white-space:nowrap}
.desktop-client #welcome #class-options .class-choice:has(input:checked){color:#ffe3a0;background:url('/assets/ui/script-button-10-0.png') left center/9px 8px no-repeat;text-shadow:0 0 4px #dcb068}
.desktop-client #welcome #create-form>.class-description{grid-column:1;grid-row:5;min-height:0;margin:0;padding:5px 8px;border:0;background:#101410bb;font-size:11px;overflow:auto}
.desktop-client #welcome #create-form>.class-description p{font-size:11px;line-height:1.4;margin:2px 0}
.desktop-client #welcome #create-form>.class-description small{display:none}
.desktop-client #welcome #create-form>.appearance-editor{grid-column:2;grid-row:1/6;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:10px;margin:0}
.desktop-client #welcome #create-form .appearance-preview{position:relative;border:0;padding:0;box-shadow:none;background:none}
.desktop-client #welcome #create-form .appearance-preview:after{content:"";position:absolute;z-index:0;bottom:0;left:0;width:140px;height:52px;background:url('/assets/ui/native-selection-plinth.png') center/contain no-repeat;mask-image:radial-gradient(ellipse,#000 45%,transparent 73%);pointer-events:none}
.desktop-client #welcome #create-form .appearance-preview canvas{position:relative;z-index:1;width:140px;height:150px}
.desktop-client #welcome #create-form .preview-class{font-size:17px;margin:0 0 3px;text-shadow:1px 1px #000}
.desktop-client #welcome #create-form .preview-only{font-size:10px;margin:0;color:#bcae85}
.desktop-client #welcome #create-form .appearance-controls fieldset{gap:13px;border:0;padding:6px 4px;margin:0 0 10px;background:#101410a8;font-size:12px}
.desktop-client #welcome #create-form .appearance-controls legend{font-size:12px}
.desktop-client #welcome #create-form .appearance-picker{margin-bottom:10px}
.desktop-client #welcome #create-form .appearance-cycle{grid-template-columns:30px minmax(0,1fr) 30px;gap:2px}
.desktop-client #welcome #create-form .appearance-cycle button{width:30px;min-height:34px;padding:0!important;border:0;background-color:transparent;background-position:center;background-size:18px 18px;background-repeat:no-repeat;font-size:0;box-shadow:none}
.desktop-client #welcome #create-form .appearance-cycle button:first-child{background-image:url('/assets/ui/script-button-11-0.png')}
.desktop-client #welcome #create-form .appearance-cycle button:last-child{background-image:url('/assets/ui/script-button-12-0.png')}
.desktop-client #welcome #create-form .appearance-cycle output{padding:3px 0;border:0;border-radius:14px;background:#030803;font-size:11px;white-space:nowrap}
.desktop-client #welcome #create-form .appearance-status{margin:0;padding:4px;font-size:10px;line-height:1.4;min-height:20px;background:#10141099}
.desktop-client #welcome #create-button{grid-column:2;grid-row:6;justify-self:center;align-self:center;width:213px;height:40px;min-height:40px;padding:4px 20px;border:0;background:url('/assets/ui/native-entry-action.png') center/213px 40px no-repeat;color:#33210d;text-align:center;font-size:14px;text-shadow:0 1px #dfc385}
.desktop-client #welcome #create-button span{display:none}
.desktop-client #welcome #back-to-login{grid-column:1;grid-row:6;justify-self:start;min-height:30px;padding:4px 8px 4px 24px;border:0;background:transparent url('/assets/ui/script-button-11-0.png') left center/18px 18px no-repeat;font-size:12px}
.desktop-client #welcome #create-form>.welcome-note{grid-column:1/-1;grid-row:7;margin:0;font-size:9px;line-height:14px;color:#bdb38f}
.desktop-client #welcome #create-error{grid-column:1/-1;grid-row:5;align-self:end;z-index:2;background:#29180c;font-size:11px;line-height:16px}
}
@media(orientation:landscape) and (max-height:420px){
 .desktop-client #welcome #character-select{padding:9px 16px}
 .desktop-client #welcome .character-slot{min-height:204px}
 .desktop-client #welcome .character-slot canvas{width:125px;height:134px}
 .desktop-client #welcome .character-slot.empty{padding-top:140px}
 .desktop-client #welcome #create-form{padding:9px 16px;gap:3px 12px;grid-template-columns:minmax(210px,.85fr) minmax(345px,1.3fr)}
}
@media(orientation:landscape){.desktop-client #welcome .register-field small{grid-column:auto;grid-row:auto;left:-1px}}
@media(orientation:landscape){
 .desktop-client #welcome .welcome-art{mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
 .desktop-client #welcome #character-name,.desktop-client #welcome #create-form .appearance-cycle output{background-image:url('/assets/ui/native-entry-input.png');background-position:center;background-size:100% 100%;background-repeat:no-repeat}
 .desktop-client #welcome .character-slot:focus-visible{outline:1px solid #e5c780;outline-offset:-3px}
}