[hidden]{display:none!important}
dialog:not([open]){display:none!important}
.desktop-client .welcome[data-mode=register]{width:700px}
.desktop-client .welcome .account-form{display:flex;flex-direction:column;gap:9px;min-width:300px}
.account-form h2,.character-select h2{margin:0 0 12px;color:#ebd9ac}
.account-form p,.account-form small{font-size:12px;line-height:1.7;margin:0}
.account-form input{width:100%;padding:8px 10px;background:#0d130c;border:1px solid #96825c;color:#f4e7c6}
.account-form button,.character-select button{border:2px ridge #a58c61;color:#f0dfb6;background:linear-gradient(#685237,#2b281a);padding:8px 12px}
.desktop-client .welcome[data-mode=select]{display:block;width:960px;background:#141a10 url('/assets/ui/creation-room.png') center/cover no-repeat}
.welcome[data-mode=select]>.welcome-art{display:none}
.character-select{padding:30px;background:#15180bd6;text-align:center}
#account-caption{font-size:13px;color:#ddd0aa}
#character-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}
.character-select .character-slot{min-width:0;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;min-height:250px;background:radial-gradient(ellipse at 50% 55%,#6c704033,#171b11);box-shadow:inset 0 0 15px #0007;padding:10px 2px}
.character-slot canvas{width:140px;height:150px;image-rendering:pixelated;max-width:100%}
.character-slot strong{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.character-slot span,.character-slot small{font-size:11px;color:#c2c69d}
.character-slot:hover,.character-slot:focus-visible{outline:2px solid #e1c47f;background-color:#4c4b24}
.character-select .character-slot.empty{font-size:13px;border-style:dashed;color:#b4af8b}
.selection-actions{display:flex;justify-content:center;gap:16px}
.native-login-board:before{content:"神之領域";position:absolute;inset:14px 18px 26px;background:linear-gradient(#151a10,#25271b);border:1px solid #524c32;text-align:center;padding-top:9px;color:#cbb683;font-size:12px;letter-spacing:4px}
.native-login-board:after{content:"密碼至少八個字元";position:absolute;top:113px;left:23px;width:193px;text-align:center;color:#aaa789;font-size:10px;pointer-events:none}
.native-login-board #login-character-button{background:linear-gradient(#715c38,#312919)}
.native-character-label{position:absolute;left:104px;width:43px;line-height:14px;font-size:9px;background:#1d1a13;color:#d3c698;white-space:nowrap}
.native-character-label.wide{left:44px;width:102px;text-align:right;padding-right:9px;background:#222118}
.native-character-board .native-caption-cover{position:absolute;left:79px;width:64px;background-image:url('/assets/ui/character-0-0.png');background-repeat:no-repeat;z-index:0}
.native-character-board .native-character-label,.native-character-board .native-character-label.wide{left:80px;width:63px;text-align:left;padding:0 0 0 3px;background:transparent;color:#f1e6cc;font-size:10px;line-height:14px;text-shadow:1px 1px #000;z-index:1}
.inv-label{position:absolute;left:25px;min-width:40px;background:#1a1b12;color:#d4c09a;font-size:9px;line-height:12px;text-align:center;pointer-events:none}
.native-board .inv-label{left:63px;width:38px;min-width:0;height:13px;text-align:left;padding-left:3px;background-color:#b69e78;background-image:url('/assets/ui/inventory-0-0.png');background-repeat:no-repeat;color:#f1e6cc;font-size:9px;line-height:13px;text-shadow:1px 1px #000;z-index:1}
.native-inventory-title{position:absolute;left:32px;top:9px;width:285px;background:#1b1b13;color:#d9c094;text-align:center;font-size:11px}
.function-rail{overflow-x:hidden;scrollbar-width:none}.function-rail::-webkit-scrollbar{display:none}
.desktop-client .welcome #create-form>.class-description{min-height:0}
.welcome .error:empty{display:none}
.desktop-client .welcome[data-mode=create]{width:1080px;display:grid;grid-template-columns:210px 1fr}
.desktop-client .welcome[data-mode=create] .welcome-art{min-height:0}
.desktop-client .welcome #create-form{display:grid;grid-template-columns:1fr 325px;gap:8px 18px;padding:22px}
.desktop-client .welcome #create-form>.section-eyebrow,.desktop-client .welcome #create-form>h2,.desktop-client .welcome #create-form>p,.desktop-client .welcome #create-form>label,.desktop-client .welcome #create-form>input,.desktop-client .welcome #create-form>fieldset,.desktop-client .welcome #create-form>.class-description{grid-column:1;margin:0}
.desktop-client .welcome #create-form>.appearance-editor{grid-column:2;grid-row:2/9;margin:0;grid-template-columns:150px 1fr;gap:8px}
.desktop-client .welcome #create-button{grid-column:2;grid-row:9}.desktop-client .welcome #back-to-login{grid-column:1;grid-row:9}.desktop-client .welcome #create-error{grid-column:1/-1;grid-row:10}.desktop-client .welcome #create-form>.welcome-note{grid-column:1/-1;line-height:1.5}
@media(orientation:landscape) and (max-height:540px){
 .desktop-client .welcome[data-mode=register]{width:610px}.desktop-client .welcome .account-form{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;padding:16px 24px}.account-form h2,.account-form>p,.account-form>small{grid-column:1/-1!important}.account-form label{grid-column:1!important;align-self:center}.account-form input{grid-column:2!important}.account-form #account-register-button{grid-column:2}.account-form #account-register-back{grid-column:1;grid-row:9}
 .desktop-client .welcome[data-mode=select]{width:96vw}.character-select{padding:12px 18px}.character-select h2{margin:0 0 4px;font-size:18px}#account-caption{margin:5px 0;font-size:11px}#character-slots{margin:10px 0;gap:8px}.character-select .character-slot{min-height:206px;padding:6px 0;gap:5px}.character-slot canvas{height:125px;width:117px}.selection-actions button{min-height:32px;font-size:12px}
 .desktop-client .welcome .character-login{gap:5px}.character-login>button{padding:5px 10px}.desktop-client .welcome[data-mode=create]{display:block;width:790px}.desktop-client .welcome #create-form{grid-template-columns:1fr 325px;gap:5px 14px;padding:10px}.desktop-client .welcome #create-form .appearance-editor{grid-row:2/9}.desktop-client .welcome #create-button{grid-row:9}.desktop-client .welcome #back-to-login{grid-row:9}.desktop-client .welcome #create-error{grid-row:10}.desktop-client .welcome #create-form>.test-mode-note{display:none}.desktop-client .welcome #create-form>.class-description{padding:6px 10px}
 .desktop-client .welcome #create-form{grid-template-columns:minmax(0,1fr) minmax(290px,325px)}.desktop-client .welcome #create-form>.class-description{min-height:0}.desktop-client .welcome #create-form .appearance-preview canvas{width:120px;height:128px}.desktop-client .welcome #create-form .appearance-editor{grid-template-columns:140px minmax(0,1fr)}.desktop-client .welcome #create-button,.desktop-client .welcome #back-to-login{min-height:32px;padding:6px 10px}.desktop-client .welcome #create-form>.section-eyebrow{display:none}.desktop-client .welcome #create-form .appearance-status{min-height:18px;margin:0}.desktop-client .welcome #create-form .appearance-preview label{margin-bottom:4px}
}

@media(orientation:landscape) and (max-height:540px){.desktop-client .welcome #create-form .appearance-controls>label{gap:3px;margin-bottom:6px;font-size:11px}.desktop-client .welcome #create-form .appearance-controls select{min-height:28px;padding:3px 6px}.desktop-client .welcome #create-form .appearance-controls fieldset{margin-bottom:6px;padding:5px}}
@media(orientation:landscape) and (max-height:540px){.desktop-client .welcome #create-form>.class-description{font-size:11px;padding:4px 7px}.desktop-client .welcome #create-form>.class-description p{line-height:1.3;margin:3px 0}.desktop-client .welcome #create-form>.class-description small{display:none}.desktop-client .welcome #class-options{gap:4px}.desktop-client .welcome .class-choice{padding:4px 6px;font-size:10px}.desktop-client .welcome #create-form .appearance-editor{grid-row:2/7}.desktop-client .welcome #create-button,.desktop-client .welcome #back-to-login{grid-row:7}.desktop-client .welcome #create-error{grid-row:8}.desktop-client .welcome #create-form>.welcome-note{font-size:9px;margin:0}}

/* Nine JP professions: compact rows preserve the landscape create controls. */
#class-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;}#class-options .class-choice{padding:2px 3px;font-size:12px;min-height:20px;}

/* 2026-10-12 人物刪除／復原 */
#character-slots{position:relative}
#character-slots .character-slot-action{display:inline-block;position:relative;z-index:3;margin:3px 0 0;padding:2px 9px;min-height:0;font-size:11px;line-height:18px;color:#e9d9b0;background:#2a2014cc;border:1px solid #98794399;border-radius:3px;cursor:pointer}
#character-slots .character-slot-action:hover,#character-slots .character-slot-action:focus-visible{border-color:#e1c47f;color:#fff}
#character-slots .character-slot-action:not(.restore):hover{background:#5a1d14}
#character-slots .character-slot-action.restore{background:#2d4a24;border-color:#8fbf6f}
.character-slot.pending-delete canvas{opacity:.45;filter:grayscale(1)}
.character-slot.pending-delete small{color:#f0a37f}
.character-delete-panel{display:grid;gap:8px;margin:0 0 10px;padding:10px 12px;border:1px solid #98794399;background:#1d170fe6;font-size:12px;color:#e9d9b0}
.character-delete-panel[hidden]{display:none}
.character-delete-panel p{margin:0;line-height:1.5}
.character-delete-panel input{margin-left:6px;padding:3px 6px;font:inherit}
.character-delete-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.character-delete-buttons button{padding:4px 14px;font:inherit;cursor:pointer}
.character-delete-buttons .danger{background:#7a2a1c;color:#fff;border:1px solid #c0583f}
.character-delete-error{color:#ff9d84;min-height:1em}

/* 2026-10-12 時裝衣櫥／阿巴坦：卡片按鈕文字不換行，背包工具列的時裝按鈕 */
.costume-card button{white-space:nowrap;word-break:keep-all}
.native-context-toolbar .bag-wardrobe{white-space:nowrap}
.costume-card button,.native-context-toolbar .bag-wardrobe{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.gear-wardrobe{position:absolute;z-index:3;padding:3px 8px;font-size:12px;line-height:1.2;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;color:#f0dfb4;background:#3a2a17e6;border:1px solid #b8914f;border-radius:4px;cursor:pointer}
.gear-wardrobe:hover,.gear-wardrobe:focus-visible{border-color:#f0d08a;color:#fff}

/* 2026-10-12 時裝卡片：小預覽、置中、按鈕樣式 */
.costume-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.costume-card canvas[data-costume-preview]{width:56px;height:72px;image-rendering:pixelated}
.costume-card b,.costume-card small{display:block;width:100%;text-align:center}
.costume-actions{display:flex;gap:6px;justify-content:center;width:100%}
.costume-btn{flex:1 1 0;min-width:0;padding:5px 8px;border-radius:5px;border:1px solid #9c7a44;background:linear-gradient(#5a4224,#3a2a17);color:#f3e2b8;font-weight:700;font-size:13px;line-height:1.2;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff22}
.costume-btn:hover:not(:disabled),.costume-btn:focus-visible{border-color:#f0d08a;color:#fff}
.costume-btn.on{background:linear-gradient(#3f6a2c,#284a1b);border-color:#8fbf6f}
.costume-btn.off{background:linear-gradient(#6a3226,#4a2119);border-color:#c0583f}
.costume-btn.try{background:linear-gradient(#3b3f52,#262938);border-color:#7d87a8}
.costume-btn:disabled{opacity:.45;cursor:default}
/* 穿上／脫下：仿「配置」鈕的深棕圓角橫式按鈕；預覽置中 */
.costume-card canvas[data-costume-preview]{display:block;margin:2px auto 0}
.costume-shop .costume-stage{display:block;margin:0 auto}
.costume-actions{flex-direction:row;flex-wrap:nowrap}
.costume-btn{flex:0 1 auto;padding:4px 14px;border-radius:999px;background:#4a3218;border:1px solid #c49a55;color:#f2d79c;font-size:13px;box-shadow:0 1px 2px #0008}
.costume-btn.on{background:#4a3218;border-color:#c49a55;color:#f2d79c}
.costume-btn.off{background:#4a2119;border-color:#c0805f;color:#f5c9b0}
.costume-btn.try{background:#2e2b26;border-color:#9a8a6a;color:#e6dcc4}
/* 衣櫥：手機上整窗放大，卡片改四欄、預覽縮小，按鈕不被切掉 */
.costume-wardrobe .costume-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.costume-wardrobe .costume-card canvas[data-costume-preview]{width:46px;height:60px}
.costume-wardrobe .costume-stage{width:72px;height:90px}
.costume-wardrobe .costume-card b{font-size:12px}
/* 背包「上排／下排」：清楚的圓角按鈕 */
.native-context-toolbar [data-bag-scroll]{padding:3px 12px;border-radius:999px;background:#4a3218;border:1px solid #c49a55;color:#f2d79c;font-weight:700;font-size:12px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0008}
.native-context-toolbar [data-bag-scroll]:disabled{opacity:.4}
.native-context-toolbar [data-bag-scroll]::before{content:none}