/* ElysianCO 5207 | Copyright 2026 _DreadNought_ (elite*pvpers) | Source ID 9d79c584f2fadd8019343760
https://github.com/JohnElysian/ElysianCO-5207-Web-Client | ElysianCO Free Source License 1.0 */
:root {
  color-scheme:dark; font-family:system-ui,"Segoe UI",Arial,sans-serif; color:#efe3c8; background:#0a0705; font-synthesis:none;
  --gold:#e3b75f; --gold-deep:#b9822a; --gold-soft:#f6dca0; --ink:#0a0705; --panel:rgba(16,11,7,.8); --line:#5b4421;
  --muted:#b3a083; --teal:#26b9c6; --serif:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); }
[hidden] { display:none !important; }
#elysian-canvas { position:fixed; inset:0; width:100%; height:100%; outline:none; }
.shell { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; min-width:280px; overflow:auto; background:var(--ink); isolation:isolate; }
.shell[data-phase=world],.shell[data-phase=character],.shell[data-phase=native] { display:none; }

/* ---- Scene: ink-wash landscape, mist, embers and the client's own frame strips ---- */
.scene { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(120% 90% at 50% 40%,#2a1d0e 0%,#0e0905 60%,#060403 100%); }
.scene-layer { position:absolute; will-change:transform; }
.ink { inset:-6% -22%; background:url("/assets/ui/login/ink_landscape.jpg") center/cover no-repeat; opacity:.66; filter:sepia(.75) saturate(1.25) brightness(.62) contrast(1.2); animation:ink-pan 160s ease-in-out infinite alternate; transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-8px),0); }
.mist { inset:-20%; opacity:.5; mix-blend-mode:screen; }
.mist-a { background:radial-gradient(40% 30% at 25% 60%,rgba(227,183,95,.2),transparent 70%),radial-gradient(35% 25% at 70% 35%,rgba(180,140,80,.16),transparent 70%); animation:mist-drift 70s linear infinite alternate; }
.mist-b { background:radial-gradient(45% 28% at 60% 75%,rgba(38,185,198,.1),transparent 70%),radial-gradient(30% 22% at 15% 25%,rgba(227,183,95,.14),transparent 70%); animation:mist-drift 95s linear infinite alternate-reverse; }
#scene-embers { position:absolute; inset:0; width:100%; height:100%; }
.vignette { inset:0; background:radial-gradient(85% 75% at 50% 48%,transparent 30%,rgba(4,3,2,.7) 80%,rgba(2,1,1,.95) 100%); }
.frame { position:absolute; left:0; right:0; height:140px; background-repeat:repeat-x; }
.frame-top { top:0; background-image:url("/assets/ui/login/top_strip.png"); background-position:center top; opacity:.95; }
.frame-bottom { bottom:0; background-image:url("/assets/ui/login/bottom_strip.png"); background-position:center bottom; opacity:.95; }
.frame::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 35%,rgba(246,220,160,.35) 50%,transparent 65%); background-size:250% 100%; mix-blend-mode:screen; animation:frame-sheen 9s ease-in-out infinite; opacity:.7 }
.frame-top::after { clip-path:inset(30px 0 106px 0); } .frame-bottom::after { clip-path:inset(108px 0 28px 0); }

/* ---- Masthead ---- */
.masthead { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:54px 24px 0; text-align:center; }
.wordmark { font-family:var(--serif); font-size:clamp(34px,6vw,58px); font-weight:700; letter-spacing:.16em; text-indent:.16em; text-transform:uppercase; background:linear-gradient(100deg,#9a6a1f 0%,#e3b75f 28%,#fff1c4 46%,#e3b75f 62%,#9a6a1f 100%) 0 0/260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 10px rgba(227,183,95,.35)); animation:title-shine 7s ease-in-out infinite,rise .9s cubic-bezier(.2,.7,.2,1) both; }
.version { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.42em; text-indent:.42em; animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both; }
.version::before,.version::after { content:""; display:inline-block; width:34px; height:1px; margin:0 12px 3px; background:linear-gradient(90deg,transparent,var(--gold-deep)); }
.version::after { transform:scaleX(-1); }
.shell-content { position:relative; flex:1; display:grid; place-items:center; padding:30px 20px 64px; }

/* ---- Card ---- */
.client-card { position:relative; width:100%; max-width:430px; padding:32px 32px 28px; border:1px solid var(--line); border-radius:6px; background:linear-gradient(180deg,rgba(28,19,10,.82),var(--panel)); backdrop-filter:blur(7px) saturate(1.2); -webkit-backdrop-filter:blur(7px) saturate(1.2); box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.65),0 0 60px rgba(227,183,95,.07),inset 0 1px 0 rgba(246,220,160,.14); animation:card-in .8s .15s cubic-bezier(.2,.7,.2,1) both; }
.client-card::before,.client-card::after { content:""; position:absolute; width:18px; height:18px; border:2px solid var(--gold); pointer-events:none; filter:drop-shadow(0 0 5px rgba(227,183,95,.6)); }
.client-card::before { left:-1px; top:-1px; border-right:0; border-bottom:0; border-top-left-radius:6px; }
.client-card::after { right:-1px; bottom:-1px; border-left:0; border-top:0; border-bottom-right-radius:6px; }
.card-dragon { position:absolute; top:-58px; width:152px; height:100px; background:url("/assets/ui/login/dragons_panel.png") no-repeat; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(227,183,95,.25)); animation:dragon-float 6s ease-in-out infinite; }
.card-dragon-left { left:-84px; background-position:0 0; }
.card-dragon-right { right:-84px; background-position:0 0; scale:-1 1; animation-delay:-3s; }
.server-status { display:flex; align-items:center; gap:11px; padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,var(--line) 20%,var(--gold-deep) 50%,var(--line) 80%,transparent) 1; }
.server-status strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; color:var(--gold-soft); }
#players-label { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.status-dot { flex:none; width:8px; height:8px; border-radius:50%; background:#8b7d66; }
.server-status[data-state=online] .status-dot { background:#7de0a8; box-shadow:0 0 0 0 rgba(125,224,168,.6); animation:pulse 2.4s ease-out infinite; }
.server-status[data-state=starting] .status-dot,.server-status[data-state=maintenance] .status-dot { background:#f2b94b; box-shadow:0 0 0 0 rgba(242,185,75,.6); animation:pulse-amber 2.4s ease-out infinite; }
.server-status[data-state=offline] .status-dot { background:#e5655c; box-shadow:0 0 8px rgba(229,101,92,.55); }
h1 { font-family:var(--serif); font-size:28px; line-height:1.2; letter-spacing:.04em; margin:0 0 10px; color:var(--gold-soft); text-shadow:0 2px 14px rgba(227,183,95,.25); }
.intro { color:var(--muted); font-size:14px; line-height:1.65; margin:0 0 24px; overflow-wrap:anywhere; }
label { display:block; margin:18px 0 8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#cdb98f; }
/* Keep form decoration off eframe's sibling input used for canvas text/IME. */
.shell input,.shell select { width:100%; min-height:46px; padding:11px 13px; border:1px solid var(--line); border-radius:4px; background:rgba(6,4,2,.7); color:#fbf2dc; font:inherit; font-size:15px; transition:border-color .2s,box-shadow .25s,background .2s; }
.shell input:hover,.shell select:hover { border-color:#7d5f2d; }
.shell input:focus,.shell select:focus { border-color:var(--gold); background:rgba(14,9,4,.85); box-shadow:0 0 0 3px rgba(227,183,95,.16),0 0 22px rgba(227,183,95,.18); }
.shell select:focus-visible,.shell input:focus-visible,.shell button:focus-visible,.shell a:focus-visible { outline:2px solid var(--gold-soft); outline-offset:3px; }
#create-message[data-error=true] { color:#ffb4a0; }
.password-field { position:relative; }
.password-field input { padding-right:65px; }
button { font:inherit; cursor:pointer; }
.reveal { position:absolute; right:6px; top:6px; bottom:6px; width:52px; border:0; border-radius:3px; background:transparent; color:var(--gold); font-size:12px; letter-spacing:.06em; }
.reveal:hover { background:rgba(227,183,95,.12); }
.primary-button { position:relative; overflow:hidden; display:block; width:100%; min-height:48px; margin-top:26px; padding:11px 16px; border:1px solid #f0cd7a; border-radius:4px; background:linear-gradient(180deg,#f2d083 0%,#d9a244 48%,#b57b22 100%); color:#2a1805; font-family:var(--serif); font-size:15px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; text-shadow:0 1px 0 rgba(255,236,190,.5); box-shadow:0 6px 20px rgba(185,130,42,.28),inset 0 1px 0 rgba(255,246,214,.7); transition:transform .15s,box-shadow .25s,filter .2s; animation:button-glow 3.6s ease-in-out infinite; }
.primary-button::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,250,230,.75),transparent); transform:skewX(-20deg); transition:left .55s ease; }
.primary-button:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(227,183,95,.42),inset 0 1px 0 rgba(255,246,214,.8); filter:brightness(1.06); }
.primary-button:hover::after { left:130%; }
.primary-button:active { transform:translateY(1px); filter:brightness(.96); }
button:disabled { opacity:.5; cursor:default; animation:none; }
.local-note { margin:20px 0 0; color:var(--muted); text-align:center; font-size:12px; letter-spacing:.1em; }
footer { position:relative; padding:12px 24px 56px; text-align:center; color:var(--muted); font-size:12px; line-height:1.8; }
footer span { margin:0 7px; }
a { color:var(--gold); text-underline-offset:3px; }
a:hover { color:var(--gold-soft); }
.eyebrow { font-size:10px; letter-spacing:.2em; font-weight:700; color:var(--gold-deep); margin:0 0 10px; }
.loading-stage-row { display:flex; flex-direction:column; gap:7px; margin:22px 0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.loading-stage-row .eyebrow { margin:0; }
.progress-label { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:10px; font-size:12px; color:var(--muted); }
.percentage { color:var(--gold-soft); font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#loading-track { height:8px; overflow:hidden; border:1px solid var(--line); border-radius:4px; background:rgba(6,4,2,.8); box-shadow:inset 0 1px 3px rgba(0,0,0,.8); }
#loading-fill { display:block; width:0; height:100%; background:linear-gradient(90deg,#0f6b75,var(--teal) 55%,#7ef0fb); background-size:200% 100%; box-shadow:0 0 12px rgba(38,185,198,.7); animation:fill-flow 2.2s linear infinite; transition:width .3s ease-out; }
#loading-meter[data-mode=waiting] #loading-track { opacity:.55; }
.loading-error { padding:12px; margin:20px 0 0; border:1px solid #8c5a3c; border-radius:4px; color:#ffd8c2; background:rgba(60,28,16,.7); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.no-script { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:var(--ink); }

/* ---- Class portrait (character creation) ---- */
.class-portrait { display:none; position:absolute; left:-192px; top:-6px; width:152px; height:456px; padding:6px; border:1px solid var(--line); border-radius:6px; background:rgba(14,9,4,.85); box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 40px rgba(227,183,95,.1); overflow:hidden; }
.client-card:has(#create-card:not([hidden])) .class-portrait { display:block; animation:portrait-in .6s cubic-bezier(.2,.7,.2,1) both; }
.portrait-art { position:absolute; inset:6px; background:url("/assets/ui/login/class_portraits.jpg") no-repeat; background-size:1178px 518px; border-radius:3px; transition:opacity .35s,transform .5s; }
.portrait-art.swap { opacity:0; transform:scale(1.04); }
.portrait-glyph { position:absolute; inset:0; display:none; place-items:center; font-size:110px; color:var(--gold); text-shadow:0 0 30px rgba(227,183,95,.6); }
.class-portrait[data-art=none] .portrait-art { display:none; }
.class-portrait[data-art=none] .portrait-glyph { display:grid; animation:pulse-text 3s ease-in-out infinite; }
.class-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(8,5,2,.55)); pointer-events:none; }

/* ---- Motion ---- */
@keyframes ink-pan { from { translate:-3% 0; } to { translate:3% 0; } }
@keyframes mist-drift { from { transform:translate3d(-4%,0,0) scale(1); } to { transform:translate3d(5%,-3%,0) scale(1.12); } }
@keyframes frame-sheen { 0%,100% { background-position:120% 0; } 50% { background-position:-20% 0; } }
@keyframes title-shine { 0%,100% { background-position:0 0; } 50% { background-position:100% 0; } }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes card-in { from { opacity:0; transform:translateY(24px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes portrait-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
@keyframes dragon-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(125,224,168,.55); } 80%,100% { box-shadow:0 0 0 9px rgba(125,224,168,0); } }
@keyframes pulse-amber { 0% { box-shadow:0 0 0 0 rgba(242,185,75,.55); } 80%,100% { box-shadow:0 0 0 9px rgba(242,185,75,0); } }
@keyframes pulse-text { 0%,100% { opacity:.65; } 50% { opacity:1; } }
@keyframes button-glow { 0%,100% { box-shadow:0 6px 20px rgba(185,130,42,.26),inset 0 1px 0 rgba(255,246,214,.7); } 50% { box-shadow:0 6px 30px rgba(227,183,95,.5),inset 0 1px 0 rgba(255,246,214,.7); } }
@keyframes fill-flow { from { background-position:0 0; } to { background-position:-200% 0; } }

/* ---- Responsive ---- */
@media(max-width:900px) { .card-dragon-left { left:-60px; } .card-dragon-right { right:-60px; } .class-portrait { display:none !important; } }
@media(max-width:560px) { .card-dragon { display:none; } .masthead { padding-top:38px; } .client-card { padding:24px 22px; } .version::before,.version::after { display:none; } footer span { display:none; } footer a { display:block; } .frame { height:96px; background-size:auto 96px; } }
@media(max-height:620px) { .masthead { padding-top:26px; } .shell-content { padding:16px 20px 50px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } #scene-embers { display:none; } }

/* ---- Create account ---- */
#register-card { display:none; }
.client-card[data-view=register] #register-card { display:block; animation:rise .45s cubic-bezier(.2,.7,.2,1) both; }
.client-card[data-view=register] #login-card { display:none !important; }
.shell:not([data-phase=login]) #register-card { display:none !important; }
.register-prompt { margin:18px 0 0; text-align:center; color:var(--muted); font-size:13px; }
.link-button { padding:0; border:0; background:none; color:var(--gold); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.link-button:hover { color:var(--gold-soft); }
.register-message { min-height:20px; margin:14px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.register-message[data-kind=error] { color:#ffb4a0; }
.local-note[data-kind=success] { color:#8fe3b4; }

/* Shown while this page is older than the client the server now publishes. */
.update-notice { position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:40; display:flex; align-items:center; gap:14px; max-width:calc(100vw - 24px); padding:10px 14px; border:1px solid var(--gold-deep); border-radius:6px; background:rgba(14,9,5,.94); color:var(--gold-soft); font-size:14px; box-shadow:0 6px 24px rgba(0,0,0,.55); }
.update-notice[hidden] { display:none; }
.update-notice button { flex:none; padding:6px 14px; border:1px solid var(--gold-deep); border-radius:4px; background:linear-gradient(180deg,#e9c46a,#b8862b); color:#1a1006; font:inherit; font-weight:600; cursor:pointer; }
.update-notice button:hover { filter:brightness(1.1); }