/* Login + character selection: painted-town backdrop, framed cards, richer character cards. */
html body #kheldraLogin,html body #kheldraCharacters{z-index:100010!important;background:radial-gradient(ellipse at 50% 38%,#1c2c25cc 0%,#0a130fe6 62%,#04080a 100%),url(/assets/generated/ai-art/ground/cobble.png) center/360px repeat,#060d0c!important;overflow:auto}
html body .k-backdrop{position:absolute;inset:auto 0 0 0;height:46vh;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;gap:2vw;opacity:.55;filter:saturate(.8) brightness(.7);-webkit-mask-image:linear-gradient(0deg,#000 40%,transparent);mask-image:linear-gradient(0deg,#000 40%,transparent)}
html body .k-backdrop img{height:clamp(110px,26vh,260px);width:auto;max-width:24vw;object-fit:contain}
html body #kheldraLogin>*:not(.k-backdrop),html body #kheldraCharacters>*:not(.k-backdrop){position:relative;z-index:1}
html body #kheldraLogin>.k-backdrop,html body #kheldraCharacters>.k-backdrop{position:fixed;z-index:0}
html body #kheldraLogin .login-card{width:min(430px,100%);padding:clamp(22px,4vw,38px);background:linear-gradient(180deg,#14231cf2,#0a120ef5);border:1px solid #b9954f;border-radius:14px;box-shadow:0 25px 90px #000c,inset 0 0 0 1px #000,inset 0 0 0 3px #ebd39122}
html body #kheldraLogin .login-card h1{font:700 clamp(32px,6.2vw,52px) Grenze Gotisch,Georgia,serif;letter-spacing:.08em;color:#f2d399;text-shadow:0 2px 0 #000,0 0 22px #b9954f55;margin:0 0 4px;white-space:nowrap}
html body #kheldraLogin .k-rule{height:14px;margin:0 auto 12px;width:70%;background:linear-gradient(90deg,transparent,#b9954f,transparent) center/100% 1px no-repeat;position:relative}
html body #kheldraLogin .k-rule::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 8px;background:#101a15;color:#d7b36a;font-size:13px}
html body #kheldraLogin .login-card p{color:#c9c1a6;margin:0 0 14px;font-style:italic}
html body #kheldraLogin .login-card input{background:#0d1712;border:1px solid #5b6b4f;border-radius:8px;color:#fff1cf}
html body #kheldraLogin .login-card input:focus{outline:2px solid #d7b36a88;border-color:#d7b36a}
html body #kheldraLogin .login-card button[type=submit]{background:linear-gradient(#d7b36a,#a9803f);color:#1a1208;border:1px solid #6e5a35;border-radius:8px;font-weight:800;letter-spacing:.04em}
html body #kheldraLogin .login-card button[type=submit]:hover{filter:brightness(1.1)}
html body #kheldraLogin .login-card button.secondary{background:transparent;color:#e8d3a7;border:1px solid #786b50}
html body #kheldraLogin .k-pw-wrap{position:relative}
html body #kheldraLogin .k-pw-toggle{position:absolute;right:6px;top:6px;width:auto!important;min-height:36px!important;margin:0!important;padding:0 10px!important;background:transparent!important;color:#b9b19a!important;border:0!important;font:600 13px Grenze Gotisch,Georgia,serif}
html body #kheldraLogin .k-remember{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:#c9c1a6;font-size:14.5px}
html body #kheldraLogin .k-remember input{width:auto;min-height:0}
html body #kheldraLogin .k-tip{margin-top:18px;padding-top:12px;border-top:1px solid #ffffff14;color:#9d9680;font-size:13px}
/* Character select: every slot (filled or empty) is one card with the same fixed height in every row. */
html body #kheldraCharacters{--slot-h:252px;--slot-art:84px;--slot-gap:14px}
html body #kheldraCharacters .character-card{box-sizing:border-box;width:min(720px,100%);padding:clamp(20px,3vw,32px);background:linear-gradient(180deg,#14231cf2,#0a120ef5);border:1px solid #b9954f;border-radius:14px;box-shadow:0 25px 90px #000c,inset 0 0 0 1px #000,inset 0 0 0 3px #ebd39122;color:#e6d9b6}
html body #kheldraCharacters h2{margin:0 0 6px;font:700 clamp(26px,4.4vw,37.5px)/1.15 Grenze Gotisch,Georgia,serif;color:#f2d399;letter-spacing:.04em;text-shadow:0 2px 0 #000}
html body #kheldraCharacters .character-card>p{margin:0 0 18px;color:#c9c1a6;font-style:italic}
html body #kheldraCharacters .character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:var(--slot-h);align-items:stretch;gap:var(--slot-gap);margin:0 0 18px}
html body #kheldraCharacters .character-grid>button.k-char{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;height:var(--slot-h);min-height:var(--slot-h);margin:0;padding:12px 10px;border:1px solid #5b6b4f;border-radius:12px;background:linear-gradient(180deg,#1a2c24,#0f1a15);color:#f6e7c0;font-family:Grenze Gotisch,Georgia,serif;font-size:16.5px;line-height:1.25;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s}
html body #kheldraCharacters .character-grid>button.k-char:hover:not(:disabled){transform:translateY(-3px);border-color:#d7b36a;box-shadow:0 8px 20px #000a,0 0 0 1px #d7b36a55}
html body #kheldraCharacters .character-grid>button.k-char:active:not(:disabled){transform:scale(.985);box-shadow:inset 0 2px 8px #000a}
html body #kheldraCharacters .character-grid>button.k-char:focus-visible{outline:3px solid #f2d399;outline-offset:3px;border-color:#f2d399}
html body #kheldraCharacters .character-grid>button.k-char:disabled{opacity:.6;cursor:wait}
html body #kheldraCharacters .k-char-art{width:var(--slot-art);height:var(--slot-art);flex:none;object-fit:contain;border-radius:50%;background:radial-gradient(circle,#2c4237,#0b140f);border:2px solid #b9954f;padding:4px;box-sizing:border-box}
html body #kheldraCharacters .k-char-name{font:700 19.5px/1.2 Grenze Gotisch,Georgia,serif;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
html body #kheldraCharacters .k-char-badge{padding:1px 10px;border-radius:10px;background:#b9954f33;border:1px solid #6e5a35;color:#ebd391;font:700 13.5px/1.5 Grenze Gotisch,Georgia,serif;letter-spacing:.06em;text-transform:uppercase}
html body #kheldraCharacters .k-char-perm{display:block;font-size:14.5px;letter-spacing:.04em;color:#e0c48a;line-height:1.2}
html body #kheldraCharacters .k-char-play{color:#a89f84;font-size:14.5px;line-height:1.2}
html body #kheldraCharacters .character-grid>button.k-char-empty{opacity:1;border-style:dashed;border-color:#7d8c6a;background:linear-gradient(180deg,#152620,#0c1612);color:#c9c1a6}
html body #kheldraCharacters .k-char-plus{display:grid;place-items:center;flex:none;box-sizing:border-box;width:52px;height:52px;margin-bottom:4px;border:2px solid #b9954f;border-radius:50%;color:#e9c77f;font:700 33px/1 Grenze Gotisch,Georgia,serif}
html body #kheldraCharacters .k-char-empty .k-char-name{color:#e6d9b6}
html body #kheldraCharacters .k-char-hint{color:#a89f84;font-size:14.5px;line-height:1.25;text-align:center}
html body #kheldraCharacters label{display:block;margin:0 0 6px;color:#d9c79b;font-size:16px;line-height:1.3}
html body #kheldraCharacters input{box-sizing:border-box;width:100%;min-height:44px;background:#0d1712;border:1px solid #5b6b4f;border-radius:8px;color:#fff1cf;padding:10px 12px;font-size:19.5px}
html body #kheldraCharacters input:focus{outline:2px solid #d7b36a88;border-color:#d7b36a}
html body #kheldraCharacters .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
html body #kheldraCharacters .actions button{flex:1 1 150px;min-height:44px;padding:0 12px;border-radius:8px;border:1px solid #6e5a35;font-size:16.5px;font-weight:800;cursor:pointer}
html body #kheldraCharacters #kheldraCreateCharacter{background:linear-gradient(#d7b36a,#a9803f);color:#1a1208}
html body #kheldraCharacters #kheldraCharacterLogout{background:transparent;color:#e8d3a7;border-color:#786b50}
html body #kheldraCharacters .site-links{margin:16px 0 0;font-size:16.5px;line-height:1.4}
html body #kheldraCharacters #kheldraCharacterStatus{margin:14px 0 0;color:#f3bc91;min-height:22px;font-size:16.5px;line-height:1.4}
@media (max-width:820px){html body #kheldraCharacters .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){html body #kheldraCharacters .character-grid{grid-template-columns:minmax(0,1fr)}}
/* Creation dialog: the card is a flex column capped at the viewport. Its title, step tabs and name field stay fixed; only the step body (.kc-body) scrolls. */
html body #kheldraCharacters .character-card{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);overflow:hidden}
html body #kheldraCharacters .character-card>*{flex:none}
html body #kheldraCharacters .character-card>.kc{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html body #kheldraCharacters .kc-tabs,html body #kheldraCharacters .kc-name{flex:none}
html body #kheldraCharacters .kc-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media (orientation:landscape) and (max-height:500px){html body #kheldraCharacters{--slot-h:172px;--slot-art:56px;--slot-gap:10px}html body #kheldraCharacters .character-card{padding:14px 20px}html body #kheldraCharacters h2{font-size:26px}html body #kheldraCharacters .character-card>p{margin-bottom:10px}html body #kheldraCharacters .character-grid{margin-bottom:12px}html body #kheldraCharacters .character-grid>button.k-char{gap:3px;padding:8px 10px}html body #kheldraCharacters .k-char-plus{width:40px;height:40px;margin-bottom:0;font-size:26px}html body #kheldraCharacters .actions{margin-top:10px}}

/* Account recovery */
html body .k-rec-link{background:none!important;border:0!important;color:#d7b36a!important;text-decoration:underline;cursor:pointer;margin:10px 0 0!important;padding:6px 0!important;min-height:0!important;width:auto!important;font:600 14.5px Grenze Gotisch,Georgia,serif}
html body .k-rec-email{margin-top:12px}
html body .k-rec-email small{display:block;margin-top:4px;color:#9d9680;font-size:13px;line-height:1.35}
html body .k-rec-overlay{position:fixed;inset:0;z-index:100020;display:grid;place-items:center;padding:24px;background:#04080acc;overflow:auto}
html body .k-rec-card{width:min(430px,100%);padding:26px;background:linear-gradient(180deg,#14231cf2,#0a120ef5);border:1px solid #b9954f;border-radius:14px;box-shadow:0 25px 90px #000c;color:#e6d9b6}
html body .k-rec-card h2{margin:0 0 8px;font:700 26.5px Grenze Gotisch,Georgia,serif;color:#f2d399}
html body .k-rec-card label{display:block;margin:12px 0 4px}
html body .k-rec-card input{width:100%;box-sizing:border-box;min-height:44px;padding:0 10px;background:#0d1712;border:1px solid #5b6b4f;border-radius:8px;color:#fff1cf}
html body .k-rec-card button[type=submit]{width:100%;min-height:44px;margin-top:16px;background:linear-gradient(#d7b36a,#a9803f);color:#1a1208;border:1px solid #6e5a35;border-radius:8px;font-weight:800}
html body .k-rec-status{min-height:22px;margin-top:12px;color:#f3bc91;font-size:15.5px}
html body .k-verify-banner{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:18;max-width:min(560px,calc(100vw - 24px));display:flex;gap:10px;align-items:center;padding:8px 12px;background:#2a2312f2;border:1px solid #b9954f;border-radius:10px;color:#f2e5ca;font:15.5px Grenze Gotisch,Georgia,serif;box-shadow:0 8px 30px #000a}
html body .k-verify-banner button{min-height:36px;padding:0 12px;background:#d7b36a;color:#1a1208;border:0;border-radius:6px;font-weight:700;cursor:pointer}
html body .k-verify-banner button[aria-label=Dismiss]{background:transparent;color:#f2e5ca;font-size:22px;padding:0 8px}
#mmorpgSettings .k-rec-settings{margin-top:24px;padding-top:12px;border-top:1px solid #ffffff22}
#mmorpgSettings .k-rec-settings input{display:block;width:min(100%,360px);min-height:40px}

.k-rec-overlay[hidden]{display:none}

/* K1-001: the login card must never be taller than the screen. It scrolls inside itself, so the password field and the buttons stay reachable on a 390px-high landscape phone. */
html body #kheldraLogin{padding:8px;box-sizing:border-box}
html body #kheldraLogin .login-card{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-height:700px){
 html body #kheldraLogin .login-card{padding:14px 20px}
 html body #kheldraLogin .login-card h1{font-size:clamp(28.5px,5vw,37.5px);margin:0 0 2px}
 html body #kheldraLogin .login-card p{margin:0 0 6px}
 html body #kheldraLogin .login-card label{margin:8px 0 4px}
 html body #kheldraLogin .login-card input,html body #kheldraLogin .login-card button{min-height:44px}
 html body #kheldraLogin .login-card button{margin-top:8px}
 html body #kheldraLogin .login-card .player-count{margin:8px 0 0;min-height:0}
}