/* Scoped login redesign; original world artwork and city styles are preserved. */
.login-panel.realm-panel{width:460px;min-height:710px;margin:0;padding:94px 44px 65px;border:0;outline:0;border-radius:16px;background:#ead8ad url('./assets/login-ui/realm-parchment.png') center/100% 100% no-repeat;box-shadow:0 18px 38px #152f3a60;color:#493924;isolation:isolate}
.realm-panel .welcome-kicker{margin:0 0 3px;color:#8b6732;font-size:9px;letter-spacing:3px}
.realm-panel h2{margin:0;color:#4c351e;font-size:32px;line-height:1.2;letter-spacing:5px;text-shadow:0 1px #fff5d7}
.realm-panel .panel-intro{margin:9px 0 18px;color:#7c6240;font-size:12px;letter-spacing:1px}
.realm-panel .race-fieldset legend{margin-bottom:10px;color:#624a2c;font-size:13px;font-weight:700}
.realm-panel .race-fieldset legend span{color:#8b734d;font-family:var(--font);font-size:10px;letter-spacing:1px;font-weight:400}
.realm-panel .race-options{gap:10px}
.realm-panel .race-option{min-height:0;padding:5px 5px 7px;border:1px solid #b79b64;border-radius:7px;background:#dec99d;box-shadow:0 2px 3px #70522328;overflow:visible;color:#655033;transition:transform .18s,box-shadow .18s,border-color .18s}
.realm-panel .race-portrait{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:4px;filter:saturate(.75);transition:filter .18s}
.realm-panel .race-option strong{font:700 17px/1.35 var(--display);margin-top:5px;letter-spacing:2px}
.realm-panel .race-english{font-size:8px;letter-spacing:1.5px;margin:0;opacity:.8}
.realm-panel .race-option:hover{transform:translateY(-3px);background:#eddaad;border-color:#927132;box-shadow:0 5px 12px #805b3033}
.realm-panel .race-option.selected{background:#245747;border:1px solid #d9b862;box-shadow:0 0 0 2px #306b54,0 4px 10px #254b4133;color:#fff0b8;transform:translateY(-3px)}
.realm-panel .race-option.selected .race-portrait{filter:saturate(1.1)}
.realm-panel .race-picked{display:none;position:absolute;right:-5px;top:-7px;width:22px;height:22px;border:1px solid #f1d88c;border-radius:50%;background:#275b46;color:#fff1b9;align-items:center;justify-content:center;box-shadow:0 2px 4px #0004}
.realm-panel .selected .race-picked{display:flex}.realm-panel .race-picked .icon{width:14px;height:14px}
.realm-panel .race-description{margin:12px 0 13px;padding:0 0 11px;min-height:80px;border-bottom:1px solid #bfa16a80}
.realm-panel .race-description h3{font-size:17px;color:#385744;letter-spacing:1px;margin:0 0 4px;line-height:1.4}
.realm-panel .race-description p{font-size:11px;line-height:1.6;color:#796143}
.realm-panel .race-trait{color:#8d7349;font-size:10px;letter-spacing:3px;margin-top:5px}
.realm-panel .field-label{color:#60492c;font-size:13px;margin-bottom:7px;font-weight:700}.realm-panel .field-label span{color:#8a7454;font-size:10px;font-weight:400}
.realm-panel .name-field{height:44px;border:1px solid #b79a62;border-radius:5px;background:#fff2d2;box-shadow:inset 0 2px 4px #805d2320,0 1px 0 #fff6df}
.realm-panel .name-field:focus-within{border-color:#396e51;box-shadow:0 0 0 2px #396e5125}
.realm-panel .name-field input{font-size:14px;color:#4c3a25}.realm-panel .name-field input::placeholder{color:#9a8562}.realm-panel .input-icon{color:#8d7040}
.realm-panel .random-name{color:#796036;border-left-color:#bca575}.realm-panel .random-name:hover{color:#275b46}
.realm-panel .field-error{min-height:17px;padding-top:2px;color:#a43626;font-size:11px}
.realm-panel .remember-control{margin:0 0 15px;color:#715b3d;font-size:11px;gap:7px}.realm-panel .local-label{color:#89714e;font-size:10px}
.realm-panel .checkbox-mark{background:#fff2d1;border-color:#aa8b55;border-radius:3px;box-shadow:inset 0 1px 2px #70522320;color:#2f6047}
.realm-panel .enter-button{height:54px;border:2px solid #e8c985;border-radius:8px;background:#2c7055;box-shadow:inset 0 2px 0 #8dac70,inset 0 -5px 0 #174937,0 0 0 1px #745c32,0 5px 9px #68492833;color:#fff0c1;font-size:25px;letter-spacing:5px;text-shadow:0 2px 2px #163c2c;gap:12px}
.realm-panel .enter-button:hover{background:#368464;filter:none;box-shadow:inset 0 2px 0 #b0c183,inset 0 -5px 0 #1d503b,0 0 0 1px #745c32,0 7px 13px #47613c44;transform:translateY(-2px)}
.realm-panel .enter-button:active{transform:translateY(1px)}
.realm-panel .panel-footer{font-size:10px;color:#8a7149;letter-spacing:2px;margin-top:13px;gap:8px}.realm-panel .panel-footer .icon{width:13px;height:13px;color:#52734e}
.realm-panel button:focus-visible{outline:3px solid #31654e;outline-offset:4px}
@media(min-width:1800px){.login-panel.realm-panel{width:490px;padding-inline:48px}.realm-panel .race-portrait{max-height:96px}.realm-panel .panel-intro{font-size:13px}}
@media(max-height:850px) and (min-width:951px){.game-shell:has(.realm-panel){min-height:760px;height:auto}.screen:has(.realm-panel){padding-top:67px;padding-bottom:54px}.login-composition:has(.realm-panel){min-height:0}.login-panel.realm-panel{width:420px;min-height:0;padding:76px 39px 57px}.realm-panel h2{font-size:29px}.realm-panel .panel-intro{margin:7px 0 13px}.realm-panel .race-portrait{max-height:76px}.realm-panel .race-description{margin-top:10px;margin-bottom:10px;min-height:77px}.realm-panel .race-option strong{font-size:16px}.realm-panel .enter-button{height:50px}.realm-panel .remember-control{margin-bottom:12px}}
@media(max-width:950px){.login-panel.realm-panel{width:460px;max-width:100%;min-height:0;padding:90px 42px 65px}.realm-panel .race-description p{font-size:11px}.realm-panel .race-portrait{max-height:98px}}
@media(max-width:560px){.login-panel.realm-panel{padding:76px 30px 58px;border-radius:12px}.realm-panel h2{font-size:29px;letter-spacing:3px}.realm-panel .panel-intro{font-size:11px;margin-bottom:17px}.realm-panel .race-options{gap:7px}.realm-panel .race-option{padding:4px 4px 6px}.realm-panel .race-option strong{font-size:16px;letter-spacing:1px}.realm-panel .race-english{font-size:7px}.realm-panel .race-description h3{font-size:16px}.realm-panel .race-description p{font-size:11px}.realm-panel .enter-button{font-size:23px;letter-spacing:3px}.realm-panel .race-fieldset legend span{font-size:9px;letter-spacing:0}}

/* Same cover geometry as the original still; native looping, no overlay controls. */
.login-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.login-background-video[hidden]{display:none}
@media(max-width:950px){.login-background-video{height:800px;object-position:28% top}}
@media(max-width:560px){.login-background-video{height:650px;object-position:31% top}}