*{box-sizing:border-box}body{margin:0;color:#334b6a;font-family:Arial,"Microsoft JhengHei",sans-serif}.login-page{min-height:100svh;background:linear-gradient(#c4e7ff26,#183a5655),url('assets/backgrounds/towns/prontera.webp') center/cover fixed}.login-scene{min-height:calc(100svh - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 16px;gap:24px}.login-brand{text-align:center;color:#fff;text-shadow:0 2px 4px #2a4b69,0 0 20px #244c69}.login-brand>span{font-size:12px;letter-spacing:.3em}.login-brand h1{font:bold clamp(40px,7vw,70px)/1.2 "Noto Serif TC","PMingLiU",serif;letter-spacing:.12em;margin:12px 0}.login-brand p{font-size:13px;letter-spacing:.2em}.login-window{width:min(450px,100%);background:linear-gradient(135deg,#fbfdfff5,#d9e7f6f5);border:1px solid #526f92;border-radius:7px;box-shadow:inset 0 0 0 2px #fff9,0 8px 30px #13365066;padding:3px}.login-titlebar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(#f4f8ff,#afc5e2);border-bottom:1px solid #8b9fbc;border-radius:4px 4px 0 0}.login-titlebar h2{font-size:13px;margin:0}.login-content{display:flex;align-items:center;gap:18px;padding:20px 22px}.login-portrait{width:80px;height:120px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}.login-content h3{font-size:16px;margin:0 0 12px}.login-content p{font-size:12px;line-height:1.8;margin:6px 0}.local-save-note{color:#657b96}.login-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px}.login-actions button,.login-actions a{font-size:12px;font-weight:bold;text-decoration:none;text-align:center;padding:12px 6px;border:1px solid #7e98b6;background:linear-gradient(#fff,#dce7f6);border-radius:3px;color:#365071;cursor:pointer}.login-actions .login-primary{background:linear-gradient(#b6d5f7,#7fa7d7);border-color:#4a72a4;color:#19385c}.login-actions a:hover{filter:brightness(1.08)}.login-actions button:disabled{color:#78889a;cursor:default;background:#edf1f6}.login-actions b{font:bold 16px Arial;margin-right:5px}.login-small{font-size:10px;text-align:center;padding:4px 15px 10px;color:#627792}.login-sources{width:min(450px,100%);padding:10px 15px;background:#f3f8ffe6;font-size:11px;border-radius:4px;line-height:1.7}.login-sources summary{cursor:pointer}.login-sources a{color:#365c8b}footer{min-height:40px;display:flex;justify-content:space-between;gap:12px;padding:12px 20px;font-size:10px;background:#e4eef5d9;color:#536c89}@media(max-width:440px){.login-actions{grid-template-columns:1fr}.login-content{padding:15px;gap:10px}.login-scene{padding:24px 12px;gap:16px}.login-brand>span{font-size:10px}}
.login-reference{position:fixed;top:15px;right:18px;padding:7px 14px;border:1px solid #879db9;border-radius:3px;background:#eff5fbee;color:#365477;font-size:12px;z-index:3}
/* Classic account/character windows; all three slots stay in one selection screen. */
.login-page{background:linear-gradient(#83b8e322,#1b3a5b66),url('assets/backgrounds/towns/prontera.webp') center/cover fixed}.login-brand{margin-bottom:8px}.login-window{width:min(470px,100%)}.login-titlebar{background:linear-gradient(#fff,#b7cbe7);padding:8px 12px}.login-content{background:linear-gradient(115deg,#ffffff77,#d1e1f466);margin:8px;border:1px solid #bdcde2;border-radius:3px}.login-content h3{letter-spacing:.1em}.login-actions .login-primary{box-shadow:inset 0 1px #e9f4ff,0 1px 2px #7893b366}
.character-select-page{display:grid;place-items:center;min-height:100svh;margin:0;padding:20px;background:linear-gradient(#83b8e333,#1b3a5b77),url('assets/backgrounds/towns/prontera.webp') center/cover fixed;color:#334b6a}.character-select-shell{width:min(900px,100%);max-width:900px;margin:0;padding:6px 18px 16px;background:linear-gradient(#f4f8fff5,#dbe8f8f5);border:1px solid #6e89ae;border-radius:6px;box-shadow:inset 0 0 0 2px #fff9,0 15px 60px #17385477}.character-select-shell>header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;margin:0 -12px;padding:8px 12px;background:linear-gradient(#fff,#b9cce6);border-bottom:1px solid #8ca3c3}.character-select-shell>header>div{grid-column:1/-1;text-align:center}.character-select-shell header h1{font:700 24px/1.4 serif;color:#334e73;margin:2px 0}.character-select-shell header small{font-size:9px;letter-spacing:.2em;color:#657d9b}.character-select-shell a{color:#395b85;font-size:11px}.character-select-shell #referenceButton{justify-self:end;border:1px solid #9badc7;background:#edf4ff;color:#395b85;padding:4px 7px;font-size:10px}.account-caption{text-align:center;font-size:11px;margin:12px 0;color:#526c8d}.character-select-shell #characterSlot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0;min-height:0}.character-card{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:300px;padding:12px 6px;border:1px solid #a2b8d4;border-radius:4px;background:linear-gradient(#eef5ff,#d0dff2);color:#3b5577;cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff70}.character-card.selected{border:2px solid #6089bd;padding:11px 5px;background:linear-gradient(#f8fbff,#c6ddf6);box-shadow:0 0 0 2px #b3cdec,inset 0 0 0 2px #fff8}.slot-number{font:9px Arial;letter-spacing:.12em;color:#6c85a6}.slot-stage{display:flex;align-items:flex-end;justify-content:center;width:100%;height:170px;border-bottom:1px solid #aec0da;background:radial-gradient(ellipse at 50% 96%,#5c7ba544 0 18%,transparent 20%)}.slot-stage img{width:100px;height:150px;object-fit:contain;image-rendering:pixelated}.empty-stage{font:48px serif;color:#a6bad4;align-items:center;background:none}.character-card strong{font-size:15px;overflow-wrap:anywhere}.character-card small{font-size:11px}.character-card>span:last-child{font-size:10px}.select-toolbar{display:flex;justify-content:center;gap:10px;margin:14px 0 8px}.select-toolbar button,.character-create button{padding:8px 20px;border:1px solid #8aabc8;border-radius:3px;background:linear-gradient(#fff,#d3e1f4);color:#395778;font-size:12px}.select-toolbar .select-primary{background:linear-gradient(#bad9fa,#80a7d5);color:#23456f}.character-select-status{text-align:center;color:#8a483a;font-size:11px;min-height:18px;margin:5px}.character-create{grid-template-columns:130px 1fr;background:#eff5ff;border:1px solid #adc2dc;color:#3b5577;padding:18px;margin:16px 0}.character-create form{color:#3b5577}.character-create h2,.character-create p,.character-create small{color:#3b5577}.character-create input{background:white;color:#334b6a;border:1px solid #a3b7d1;padding:8px}.character-create img{max-height:200px}.character-create fieldset{border-color:#adc2dc}.character-create fieldset button[aria-pressed=true]{background:#9bbfe9}.character-select-shell [hidden],#deleteDialog[hidden]{display:none!important}#deleteDialog{width:min(360px,calc(100vw - 24px));padding:20px;border:1px solid #839dbf;border-radius:4px;background:#edf4ff;color:#385475}#deleteDialog h2{font-size:18px}#deleteDialog label{display:grid;gap:6px;font-size:12px}#deleteCode{padding:8px;border:1px solid #a5b9d4;background:#fff;color:#334e73}#deleteDialog button{padding:7px 15px;border:1px solid #93accd;background:#dce9fa;color:#395576}#deleteDialog form>div{display:flex;justify-content:flex-end;gap:8px}#deleteError{font-size:11px;min-height:18px;color:#a14b3d}#deleteDialog::backdrop{background:#172e4b77}
@media(max-width:600px){.character-select-page{padding:10px}.character-select-shell{padding:5px 10px 12px}.character-select-shell #characterSlot{gap:5px}.character-card{min-height:240px;padding:8px 3px;gap:5px}.character-card.selected{padding:7px 2px}.slot-stage{height:128px}.slot-stage img{width:70px;height:120px}.character-card strong{font-size:12px}.character-card small{font-size:9px}.character-card>span:last-child{font-size:8px}.slot-number{font-size:7px}.select-toolbar{gap:5px}.select-toolbar button{padding:7px 10px;font-size:11px}.character-create{grid-template-columns:1fr;padding:10px}.character-create .create-character-visual{display:none}}
.character-select-shell #characterSlot{background:transparent;border:0;box-shadow:none;padding:10px}.character-select-shell header>a{color:#385b88}
