/* Classic Reimagined | 20261001-compact-login-v12
 * Homepage login/account presentation only.
 * Original panel, fields and band dimensions are preserved.
 * All frame ornaments and monster artwork are outside normal document flow.
 * No center crest: decorations cannot increase the login panel height.
 * Versioned filename prevents old CSS from being reused with the new partial.
 */
.cr-home .cr-login-band {
    position:relative;
    z-index:4;
    padding:6px 16px 10px;
}
.cr-home .cr-login-panel {
    position:relative;
    top:calc(-1 * clamp(14px,1.25vw,24px));
    isolation:isolate;
    width:100%;
    max-width:840px;
    margin:0 auto;
    padding:12px 18px;
    border:1px solid #bfa064;
    border-radius:9px;
    background:
        radial-gradient(ellipse at 0 0,#53bbd84a,transparent 45%),
        radial-gradient(ellipse at 100% 100%,#57adbf30,transparent 42%),
        linear-gradient(110deg,#145879 0%,#0a3f64 36%,#0a3557 65%,#164f6c 100%);
    box-shadow:
        inset 0 0 0 2px #092d46,
        inset 0 0 0 3px #f5dba05c,
        inset 0 1px 0 #fff8db,
        0 0 0 3px #fff6df,
        0 0 0 4px #be9857,
        0 6px 0 1px #b9985c40,
        0 12px 22px -10px #24485966;
    color:#fff6df;
    font:14px/1.35 var(--cr-serif);
}
/* A pearl rim and fine gold inlay; no overlay catches clicks or focus. */
.cr-home .cr-login-panel::before {
    content:'';
    position:absolute;
    pointer-events:none;
    z-index:-1;
    inset:-7px;
    border:1px solid #dfc693;
    border-radius:14px;
    box-shadow:inset 0 0 0 1px #fffdf0bf,0 0 16px 1px #fff4d685;
    opacity:1;
}
.cr-home .cr-login-panel::after {
    content:'';
    position:absolute;
    pointer-events:none;
    inset:5px;
    border:1px solid #ebd5a03b;
    border-radius:5px;
    background:
        linear-gradient(90deg,transparent,#fff4d1aa 24%,#a8e0ed 50%,#fff4d1aa 76%,transparent) center top / 86% 1px no-repeat,
        linear-gradient(90deg,transparent,#cbb27666,transparent) center bottom / 86% 1px no-repeat;
}
.cr-home .cr-login-panel > .cr-corner {
    width:10px;
    height:10px;
    pointer-events:none;
    border-color:#bb8e45;
    border-radius:2px;
    background:linear-gradient(135deg,#fffcdf,#d3ad61 46%,#fff2c5 50%,#b08236);
    box-shadow:0 0 0 2px #fff3d6,0 1px 4px #87663940;
}
.cr-home .cr-login-panel > .cr-corner:after {
    inset:2px;
    border:1px solid #f8f4d9;
    background:#5399b5;
}
.cr-home .cr-login-filigree {
    position:absolute;
    z-index:2;
    top:50%;
    width:92px;
    height:116px;
    margin-top:-58px;
    pointer-events:none;
    filter:drop-shadow(0 2px 1px #785b3529);
}
.cr-home .cr-login-filigree svg,
.cr-home .cr-login-seal svg {
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}
.cr-home .cr-login-filigree-left { right:calc(100% - 14px); }
.cr-home .cr-login-filigree-right { left:calc(100% - 14px); transform:scaleX(-1); }
.cr-home .cr-login-seal {
    position:absolute;
    z-index:3;
    pointer-events:none;
    bottom:-12px;
    left:50%;
    width:192px;
    height:18px;
    margin-left:-96px;
    filter:drop-shadow(0 1px 1px #82643b33);
}
.cr-home .cr-login-form { position:relative; z-index:1; margin:0; padding:0; }
.cr-home .cr-login-fields {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 146px;
    gap:12px;
    align-items:center;
}
.cr-home .cr-login-field {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    height:48px;
    margin:0;
    padding:0 12px;
    border:1px solid #c9dfe8;
    border-radius:4px;
    background:linear-gradient(180deg,#fffefa 0%,#f8fcff 54%,#e9f3f8 100%);
    box-shadow:inset 0 1px 0 #fff,0 1px 2px #011f3652;
    transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.cr-home .cr-login-field > .cr-icon {
    width:28px;
    height:28px;
    padding:5px;
    flex-shrink:0;
    border:1px solid #d4c49c;
    border-radius:50%;
    color:#245b7d;
    background:linear-gradient(135deg,#fffdf5,#e6f1f8);
    box-shadow:inset 0 0 0 1px #ffffffb3;
}
.cr-home .cr-login-field input {
    display:block;
    width:100%;
    min-width:0;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#123451;
    font:14px/normal Arial,Helvetica,sans-serif;
    outline:none;
}
.cr-home .cr-login-field input::placeholder { color:#496077; opacity:1; }
.cr-home .cr-login-field:hover { border-color:#dec287; }
.cr-home .cr-login-field:focus-within {
    border-color:#f4d38b;
    box-shadow:0 0 0 2px #f8d88b80,0 0 16px #86d8f047;
}
.cr-home .cr-login-field:focus-within > .cr-icon { color:#0e5079; border-color:#c2923f; }
.cr-home .cr-login-button {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:auto;
    min-width:0;
    height:48px;
    margin:0;
    padding:0 20px;
    overflow:hidden;
    border:1px solid #ffefba;
    border-radius:4px;
    background:linear-gradient(112deg,#b1853a 0%,#ebc978 23%,#ffecb7 48%,#e6c06c 72%,#b48536 100%);
    box-shadow:inset 0 0 0 2px #79531733,inset 0 2px 0 #fff6d5c7,0 2px 6px #001d354d;
    color:#092e4d;
    font:700 16px/1 var(--cr-serif);
    letter-spacing:.3px;
    text-shadow:0 1px 0 #fff5d4ba;
    cursor:pointer;
    text-decoration:none;
    transition:box-shadow .2s,filter .2s;
}
.cr-home .cr-login-button > span,
.cr-home .cr-login-button > .cr-icon { position:relative; z-index:1; }
.cr-home .cr-login-button > .cr-icon { width:20px; height:20px; }
.cr-home .cr-login-button::before {
    content:'';
    position:absolute;
    inset:-10px auto -10px 0;
    width:45%;
    background:linear-gradient(90deg,transparent,#fffbe6b3,transparent);
    transform:translateX(-250%) skewX(-22deg);
    opacity:0;
    pointer-events:none;
}
.cr-home .cr-login-button::after {
    content:'';
    position:absolute;
    pointer-events:none;
    inset:3px;
    border:1px solid #fff0c066;
    border-radius:2px;
}
.cr-home .cr-login-button:hover {
    filter:brightness(1.075);
    box-shadow:inset 0 0 0 2px #79531729,inset 0 2px 0 #fff6d5,0 0 16px #f3cd7873;
}
.cr-home .cr-login-button:active { filter:brightness(.97); }
.cr-home .cr-login-button:focus-visible,
.cr-home .cr-login-logout:focus-visible,
.cr-home .cr-login-options input:focus-visible,
.cr-home .cr-login-options select:focus-visible,
.cr-home .cr-login-refresh:focus-visible { outline:2px solid #fff1b0; outline-offset:4px; }
.cr-home .cr-login-account {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:20px;
    align-items:center;
}
.cr-home .cr-login-welcome { display:flex; align-items:center; gap:11px; min-width:0; margin:0; }
.cr-home .cr-login-welcome > .cr-icon { width:25px; height:25px; color:#efcd86; }
.cr-home .cr-login-welcome span { min-width:0; overflow-wrap:anywhere; }
.cr-home .cr-login-logout { padding:10px 3px; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
.cr-home .cr-login-logout:hover { color:#ffdf87; }
.cr-home .cr-login-options {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px 20px;
    flex-wrap:wrap;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #e0c48045;
    font:13px/1.35 Arial,Helvetica,sans-serif;
}
.cr-home .cr-login-server,
.cr-home .cr-login-captcha { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
.cr-home .cr-login-options input,
.cr-home .cr-login-options select {
    min-width:0;
    max-width:100%;
    height:40px;
    border:1px solid #dab566;
    border-radius:3px;
    padding:0 10px;
    background:#f8fbfd;
    color:#143b5f;
    font-size:14px;
}
.cr-home .cr-login-server select { width:210px; }
.cr-home .cr-login-captcha input { width:140px; }
.cr-home .cr-login-captcha img { max-width:150px; max-height:48px; }
.cr-home .cr-login-refresh { padding:8px 0; border:0; background:transparent; color:#fff1c5; text-decoration:underline; }
.cr-home .cr-login-recaptcha { max-width:100%; }
.cr-home.cr-effects .cr-login-button::before { animation:cr-login-shine-v8 7s ease-in-out 1.2s infinite; }
@keyframes cr-login-shine-v8 {
    0%,71% { opacity:0; transform:translateX(-250%) skewX(-22deg); }
    77% { opacity:.82; }
    94%,100% { opacity:0; transform:translateX(500%) skewX(-22deg); }
}
.cr-paused .cr-login-panel::before,
.cr-paused .cr-login-button::before { animation-play-state:paused!important; }
@media (max-width:1023px) {
    .cr-home .cr-login-panel { top:-14px; }
    .cr-home .cr-login-filigree { display:none; }
}
@media (max-width:600px) {
    .cr-home .cr-login-band { padding-bottom:9px; }
    .cr-home .cr-login-panel { top:-8px; padding:12px; }
    .cr-home .cr-login-fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
    .cr-home .cr-login-field { padding:0 8px; gap:7px; }
    .cr-home .cr-login-field > .cr-icon { width:24px; height:24px; padding:4px; }
    .cr-home .cr-login-field input { font-size:16px; }
    .cr-home .cr-login-fields > .cr-login-button { grid-column:1/-1; }
    .cr-home .cr-login-account { grid-template-columns:1fr auto; gap:10px; }
    .cr-home .cr-login-welcome { grid-column:1/-1; padding:2px 0 4px; }
    .cr-home .cr-login-options { justify-content:flex-start; }
    .cr-home .cr-login-recaptcha { overflow-x:auto; }
    .cr-home .cr-login-options input,
    .cr-home .cr-login-options select { font-size:16px; }
}
@media (max-width:360px) {
    .cr-home .cr-login-field { padding:0 7px; gap:6px; }
    .cr-home .cr-login-field > .cr-icon { width:18px; height:18px; padding:0; border:0; background:none; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce) {
    .cr-home .cr-login-panel::before,
    .cr-home .cr-login-button::before { animation:none!important; }
    .cr-home .cr-login-field,
    .cr-home .cr-login-button { transition:none; }
}

/* Native transparent Ragnarok: Monster World artwork, served locally. */
.cr-home .cr-login-mascot {
    position:absolute;
    z-index:3;
    bottom:calc(12px + clamp(10px,1vw,18px));
    width:128px;
    pointer-events:none;
    user-select:none;
}
.cr-home .cr-login-mascot::before {
    content:'';
    position:absolute;
    z-index:-1;
    left:10%;
    right:10%;
    bottom:-5px;
    height:16px;
    border-radius:50%;
    background:radial-gradient(ellipse,#3d6a7947 0%,#a7b4941f 45%,transparent 72%);
}
.cr-home .cr-login-mascot img {
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    filter:drop-shadow(0 3px 2px #173b4529);
}
.cr-home .cr-login-mascot-left { left:calc(50% - 563px); }
.cr-home .cr-login-mascot-right { right:calc(50% - 577px); width:142px; }
@media (min-width:1024px) and (max-width:1200px) {
    .cr-home .cr-login-filigree { width:64px; height:100px; margin-top:-50px; }
    .cr-home .cr-login-filigree-left { right:calc(100% - 12px); }
    .cr-home .cr-login-filigree-right { left:calc(100% - 12px); }
    .cr-home .cr-login-mascot { width:82px; }
    .cr-home .cr-login-mascot-left { left:max(8px,calc(50% - 510px)); }
    .cr-home .cr-login-mascot-right { right:max(8px,calc(50% - 510px)); }
}
@media (max-width:1023px) {
    .cr-home .cr-login-mascot { width:68px; bottom:calc(100% + 6px); }
    .cr-home .cr-login-mascot-left { left:max(22px,calc(50% - 436px)); }
    .cr-home .cr-login-mascot-right { right:max(22px,calc(50% - 436px)); width:76px; }
}
@media (max-width:600px) {
    .cr-home .cr-login-mascot { width:48px; bottom:calc(100% + 1px); }
    .cr-home .cr-login-mascot-left { left:22px; }
    .cr-home .cr-login-mascot-right { right:22px; width:55px; }
    .cr-home .cr-login-seal { width:152px; height:16px; margin-left:-76px; bottom:-10px; }
}