/* The same village and bronze palette connects bootstrap, accounts and location entry. */
#loading{background-image:url('loading/elderwood-world-v1.png');padding:7vh 24px 5vh}
#loading .load-title>span{letter-spacing:4px;color:#e4d3ad}
#loading .load-title h1{font-weight:400;font-size:clamp(42px,6vw,76px);margin:18px 0 12px}
#loading .cover-shade{background:linear-gradient(180deg,#06100d66,transparent 32%,#07120b66 60%,#050e09f5)}
#loading .load-bottom{width:min(680px,85vw)}
#loading .load-destination h2{font-size:40px;color:#f4dfb2}
#load-progress{height:18px;border-radius:4px;padding:3px;border-color:#b59960;background:#09130ded;box-shadow:0 0 0 2px #08120c,inset 0 1px #eddbb122,0 4px 20px #0005}
#load-progress::-webkit-progress-value{background:linear-gradient(#ffe4a7,#c2a262 55%,#747646)}
#account-screen{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;overflow:auto;padding:30px 20px;box-sizing:border-box;background:#122116 url('loading/tikholesye-v2.png') center/cover;color:#f1e3c5}
#account-screen[hidden]{display:none}.account-shade{position:absolute;inset:0;background:linear-gradient(90deg,#07140b44,#06120b77),linear-gradient(0deg,#07110dbb,transparent 70%)}
.account-panel{position:relative;width:min(420px,100%);box-sizing:border-box;padding:30px 34px 25px;border:1px solid #b59961;border-radius:8px;background:linear-gradient(145deg,#1c3027f5,#0b1913f7);box-shadow:0 0 0 4px #0b180ed9,0 0 0 5px #b5985b44,0 22px 70px #0008,inset 0 0 35px #0002;text-align:center}
.account-mark{color:#dfbf79;font-size:19px;margin-bottom:15px}.account-eyebrow{font:9px Georgia,serif;letter-spacing:2px;color:#cfbe95}.account-panel h1{font:400 30px/1.2 Georgia,serif;margin:20px 0 10px}.account-intro{font:13px/1.5 Georgia,serif;color:#bec7b2;margin-bottom:24px}
.account-tabs{display:flex;border-bottom:1px solid #b59b5b55;margin-bottom:22px}.account-tabs button{flex:1;border:0;border-radius:0;background:none;color:#aeb8a2;padding:12px 4px;font:15px Georgia,serif}.account-tabs button[aria-pressed='true']{color:#ffe4a5;box-shadow:inset 0 -2px #d2b374}
#account-form{text-align:left}#account-form label{display:block;color:#e3d8ba;font:14px Georgia,serif;margin:16px 0 0}#account-form label[hidden]{display:none}
#account-form input{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:12px 13px;border:1px solid #9c875560;border-radius:4px;background:#07130e;color:#f6ecd5;font:16px Georgia,serif;outline:none;user-select:text;-webkit-user-select:text}#account-form input:focus{border-color:#dfbc74;box-shadow:0 0 0 2px #dfbc741c}#account-form input::placeholder{color:#7e927f}
.account-submit{display:block;width:100%;margin-top:24px;padding:14px 10px;border:1px solid #c5a366;border-radius:4px;background:linear-gradient(#304b36,#142c1e);color:#ffebbd;font:17px Georgia,serif;box-shadow:inset 0 0 0 2px #112417,inset 0 1px #e4c58244;transition:filter .18s}.account-submit:hover:enabled{filter:brightness(1.18)}.account-submit:disabled{opacity:.6;cursor:wait}
#account-error{color:#f0b19b;font:13px/1.5 Georgia,serif;margin:16px 0 0}#account-error[hidden]{display:none}.account-note{font:11px/1.5 Georgia,serif;color:#98ac95;margin:20px 0 0}
#account-reconnect{margin-top:16px}.menu-account{position:absolute;right:48px;top:20px;display:flex;align-items:center;gap:15px;color:#e6d4aa;font:13px Georgia,serif;z-index:20}.menu-account button{background:#102218c9;border:1px solid #b2975f77;color:#ddcda6;padding:7px 12px;border-radius:4px;font:12px Georgia,serif}
#account-save-notice{position:fixed;left:16px;bottom:16px;max-width:min(480px,90vw);z-index:1800;border:1px solid #c59660;background:#19291ff5;color:#f0d3ae;padding:12px;font:13px/1.5 Georgia,serif}#account-save-notice[hidden]{display:none}
.account-import{max-width:420px;padding:28px;background:#14271e;color:#eadbb9;border:1px solid #b59c67;border-radius:6px}.account-import button{margin:8px;padding:10px}.account-import::backdrop{background:#0009}
body.account-open #world,body.account-open>header,body.account-open>aside,body.account-open>footer{visibility:hidden}
@media(max-height:650px){.account-panel{padding:18px 30px}.account-mark{margin-bottom:6px}.account-panel h1{margin-top:12px}.account-intro{margin-bottom:12px}.account-tabs{margin-bottom:8px}#account-form label{margin-top:10px}}

/* Quiet environmental motion behind a stable, readable form. */
#account-screen{isolation:isolate;background-image:none;padding:24px 20px;transition:opacity .26s ease}
.account-backdrop{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
.account-backdrop::before{content:'';position:absolute;inset:-3%;z-index:-2;background:#142217 url('loading/tikholesye-v2.png') center/cover;animation:account-landscape 28s ease-in-out infinite alternate;pointer-events:none}
.account-shade{z-index:-1;background:radial-gradient(ellipse at 50% 40%,#24432910,#06120b66 75%),linear-gradient(0deg,#050e0bbb,transparent 75%)}
.account-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.account-motes::before{content:'';position:absolute;left:-15%;right:-15%;bottom:-30%;height:65%;background:radial-gradient(ellipse,#b9ccaa0c,transparent 65%);animation:account-mist 20s ease-in-out infinite alternate}
.account-motes i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#ffe4a1;box-shadow:0 0 7px 1px #edc47566;opacity:0;animation:account-float var(--duration) var(--delay) ease-in-out infinite}
.account-panel{z-index:1;overflow:hidden;border-color:#bfa46b;background:radial-gradient(ellipse at 10% 0%,#41614733,transparent 65%),linear-gradient(145deg,#1a3028f5,#091a13f5);box-shadow:0 0 0 4px #0b180ed9,0 0 0 5px #b5985b44,0 22px 70px #0008,inset 0 1px #e8d6a333,inset 0 0 45px #0002;animation:account-panel-in .75s cubic-bezier(.16,1,.3,1) both}
.account-panel::before,.account-panel::after{content:'';position:absolute;width:28px;height:28px;border-color:#e4c48699;border-style:solid;pointer-events:none}
.account-panel::before{top:9px;left:9px;border-width:1px 0 0 1px;border-top-left-radius:3px}.account-panel::after{bottom:9px;right:9px;border-width:0 1px 1px 0;border-bottom-right-radius:3px}
.account-mark{position:relative;display:grid;place-items:center;width:40px;height:40px;margin:0 auto 16px;font-size:13px;text-shadow:0 0 13px #e7c78588;animation:account-sigil 5s ease-in-out infinite}
.account-mark::before,.account-mark::after{content:'';position:absolute;inset:5px;border:1px solid #ccb17477;transform:rotate(45deg);pointer-events:none}.account-mark::after{inset:0;border-color:#c8b47c33;transform:rotate(45deg)}
.account-tabs{position:relative;isolation:isolate;border:1px solid #b59b5b33;border-radius:5px;padding:3px;background:#08180f66;gap:3px}
.account-tabs::before{content:'';position:absolute;inset:3px auto 3px 3px;width:calc(50% - 4.5px);z-index:-1;border-radius:3px;background:linear-gradient(#3b533344,#a28a4926);box-shadow:inset 0 0 0 1px #d4b67855,0 1px 7px #0003;transition:transform .38s cubic-bezier(.22,1,.36,1)}
#account-screen[data-mode='register'] .account-tabs::before{transform:translateX(calc(100% + 3px))}
.account-tabs button[aria-pressed='true']{box-shadow:none;text-shadow:0 0 12px #e6c38733}.account-tabs button{transition:color .25s,text-shadow .25s;background:none}.account-tabs button:hover:enabled{color:#fff0c9}.account-tabs button:disabled{cursor:wait}
#account-form input{transition:border-color .25s,box-shadow .25s,background-color .25s;box-shadow:inset 0 2px 6px #0002}#account-form input:hover{border-color:#b49b6277}#account-form input:focus{background:#0e2117;border-color:#d8b878;box-shadow:0 0 0 3px #d8b87812,0 0 20px #d8b8780b,inset 0 2px 6px #0002}
.account-submit{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#6f8a4144,transparent 75%),linear-gradient(#34533b,#152f20);transition:filter .2s,box-shadow .25s,transform .2s;isolation:isolate}
.account-submit::before{content:'';position:absolute;inset:-50% auto -50% -70%;width:45%;background:linear-gradient(90deg,transparent,#fff0c72e,transparent);transform:skewX(-22deg);pointer-events:none;z-index:-1;transition:left .65s ease}
.account-submit:hover:enabled{transform:translateY(-1px);box-shadow:inset 0 0 0 2px #112417,inset 0 1px #e4c58266,0 4px 18px #c3a05e22}.account-submit:hover:enabled::before{left:135%}.account-submit:active:enabled{transform:translateY(0)}
.account-submit:disabled{opacity:.85;animation:account-working 1.6s ease-in-out infinite}
.account-tabs button:focus-visible,.account-submit:focus-visible{outline:2px solid #f3d99a;outline-offset:3px}
#account-error:not([hidden]){animation:account-message .25s ease-out}
#account-screen.account-leaving{opacity:0;pointer-events:none}
@keyframes account-panel-in{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes account-landscape{from{transform:scale(1.015) translate(-.4%,0)}to{transform:scale(1.045) translate(.4%,.3%)}}
@keyframes account-float{0%{opacity:0;transform:translate(0,25px)}20%{opacity:.6}75%{opacity:.35}100%{opacity:0;transform:translate(var(--drift),-110px)}}
@keyframes account-mist{from{transform:translateX(-4%);opacity:.4}to{transform:translateX(4%);opacity:.9}}
@keyframes account-sigil{0%,100%{filter:brightness(1) drop-shadow(0 0 7px #d4b46a20);opacity:.85}50%{filter:brightness(1.2) drop-shadow(0 0 10px #d4b46a45);opacity:1}}
@keyframes account-working{0%,100%{filter:brightness(.95)}50%{filter:brightness(1.15)}}
@keyframes account-message{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:650px){.account-mark{width:28px;height:28px;margin-bottom:9px}.account-mark::before{inset:4px}.account-mark::after{inset:0}}
@media(prefers-reduced-motion:reduce){#account-screen,#account-screen *,#account-screen::before,#account-screen *::before,#account-screen *::after{animation:none!important;transition:none!important}.account-motes i{opacity:.3}.account-submit:hover:enabled{transform:none}}

.account-mark{width:60px;height:60px;margin:0 auto 18px;filter:drop-shadow(0 0 10px #d4b46a20)}
.account-mark::before,.account-mark::after{display:none}
.account-mark img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;pointer-events:none}
@media(max-height:800px){.account-panel{padding-top:24px;padding-bottom:22px}.account-panel h1{margin-top:16px}.account-intro{margin-bottom:20px}}
@media(max-height:650px){.account-mark{width:46px;height:46px;margin-bottom:14px}.account-panel{padding-top:18px;padding-bottom:18px}}