/* 2026-10-23（使用者：創角頁直式橫式都不要擠在一起）：創角獨立自適應格線，取消舊固定列與跨欄，短螢幕可捲動。 */
html body.desktop-client #welcome[data-mode="create"][open]{position:fixed!important;inset:0!important;transform:none!important;display:block!important;box-sizing:border-box;width:min(900px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;height:auto!important;max-height:calc(100dvh - 20px)!important;margin:auto!important;padding:0!important;overflow:auto!important;overscroll-behavior:contain;mask-image:none!important}
html body.desktop-client #welcome[data-mode="create"]>.welcome-art{display:none!important}
html body.desktop-client #welcome[data-mode="create"] #create-form{position:static!important;inset:auto!important;transform:none!important;display:grid!important;box-sizing:border-box;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;max-height:none!important;padding:20px!important;gap:12px 24px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:none!important;grid-template-areas:"title title" "name-label appearance" "name appearance" "classes appearance" "description appearance" "error error" "back submit" "note note"!important;align-items:start!important;overflow:visible!important}
html body.desktop-client #welcome[data-mode="create"] #create-form>*{grid-area:auto!important;min-width:0!important;margin:0!important;max-width:100%!important}
html body.desktop-client #welcome[data-mode="create"] #create-form>.section-eyebrow,html body.desktop-client #welcome[data-mode="create"] #create-form>p:not(.error){display:none!important}
html body.desktop-client #welcome[data-mode="create"] #create-form>h2{grid-area:title!important;font-size:22px!important;line-height:1.4!important}
html body.desktop-client #welcome[data-mode="create"] #create-form>label{grid-area:name-label!important;line-height:1.5!important;font-size:14px!important}
html body.desktop-client #welcome[data-mode="create"] #character-name{grid-area:name!important;box-sizing:border-box;width:100%!important;min-height:42px!important;height:auto!important;padding:8px 12px!important;font-size:16px!important}
html body.desktop-client #welcome[data-mode="create"] #create-form>fieldset{grid-area:classes!important;box-sizing:border-box;padding:0!important;border:0!important}
html body.desktop-client #welcome[data-mode="create"] #class-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
html body.desktop-client #welcome[data-mode="create"] #class-options .class-choice{box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;gap:4px!important;min-height:40px!important;padding:6px!important;font-size:13px!important;line-height:1.4!important;white-space:normal!important;border:1px solid #756443!important;border-radius:5px;background:#151a12!important}
html body.desktop-client #welcome[data-mode="create"] #create-form>.class-description{grid-area:description!important;overflow:visible!important;padding:10px!important;font-size:13px!important;line-height:1.6!important}
html body.desktop-client #welcome[data-mode="create"] .class-description p{margin:6px 0!important;font-size:12px!important;line-height:1.6!important;overflow-wrap:anywhere}
html body.desktop-client #welcome[data-mode="create"] #create-appearance{grid-area:appearance!important;display:grid!important;grid-template-columns:minmax(100px,140px) minmax(0,1fr)!important;gap:12px!important;align-items:start!important;padding:12px!important;box-sizing:border-box;border:1px solid #756443!important;border-radius:6px;background:#10160dbf!important}
html body.desktop-client #welcome[data-mode="create"] .appearance-preview{min-width:0!important;padding:0!important;text-align:center}
html body.desktop-client #welcome[data-mode="create"] .appearance-preview canvas{width:120px!important;max-width:100%!important;height:auto!important}
html body.desktop-client #welcome[data-mode="create"] .appearance-controls{min-width:0!important}
html body.desktop-client #welcome[data-mode="create"] .appearance-controls fieldset{display:flex!important;flex-wrap:wrap;gap:10px!important;margin:0 0 12px!important;padding:4px!important;border:0!important}
html body.desktop-client #welcome[data-mode="create"] .appearance-picker{margin:0 0 12px!important}
html body.desktop-client #welcome[data-mode="create"] .appearance-cycle{display:grid!important;grid-template-columns:36px minmax(0,1fr) 36px!important;gap:4px!important;align-items:center}
html body.desktop-client #welcome[data-mode="create"] .appearance-cycle button{width:36px!important;min-width:0!important;min-height:36px!important;padding:0!important}
html body.desktop-client #welcome[data-mode="create"] .appearance-cycle output{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere;font-size:12px!important;line-height:1.5!important}
html body.desktop-client #welcome[data-mode="create"] .appearance-status{font-size:11px!important;line-height:1.5!important;overflow-wrap:anywhere}
html body.desktop-client #welcome[data-mode="create"] #create-error{grid-area:error!important;position:static!important;align-self:auto!important;padding:8px!important;line-height:1.5!important}
html body.desktop-client #welcome[data-mode="create"] #create-error:empty{display:none!important}
html body.desktop-client #welcome[data-mode="create"] #back-to-login{grid-area:back!important}
html body.desktop-client #welcome[data-mode="create"] #create-button{grid-area:submit!important}
html body.desktop-client #welcome[data-mode="create"] :is(#back-to-login,#create-button){box-sizing:border-box;width:100%!important;min-height:44px!important;height:auto!important;justify-self:stretch!important;align-self:stretch!important;padding:10px 12px!important;font-size:14px!important;line-height:1.5!important;white-space:normal!important;background-image:none!important}
html body.desktop-client #welcome[data-mode="create"] #create-form>.welcome-note{grid-area:note!important;font-size:11px!important;line-height:1.5!important;text-align:center!important}
/* 包含 data-portrait，避免 portrait-mode.js 將本段直式規則停用。 */
@media(max-width:600px){html[data-portrait] body.desktop-client #welcome[data-mode="create"] #create-form,html:not([data-portrait]) body.desktop-client #welcome[data-mode="create"] #create-form{padding:14px!important;gap:12px!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"title" "name-label" "name" "classes" "description" "appearance" "error" "submit" "back" "note"!important}html body.desktop-client #welcome[data-mode="create"] #create-appearance{grid-template-columns:110px minmax(0,1fr)!important;padding:10px!important;gap:10px!important}}
@media(max-width:360px){html body.desktop-client #welcome[data-mode="create"] #create-appearance{grid-template-columns:minmax(0,1fr)!important}html body.desktop-client #welcome[data-mode="create"] .appearance-preview{display:flex;flex-direction:column;align-items:center}html body.desktop-client #welcome[data-mode="create"] #class-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}}