:root { color-scheme:dark; --ink:#07090b; --panel:#0a0b0de9; --gold:#efc879; --gold-bright:#fdd990; --line:#89683288; --paper:#f5e7c8; --muted:#c5b6a0; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; font-family: 'Trebuchet MS',Arial,sans-serif; }
body { background:var(--ink); color:var(--paper); }
.scene,.shade { position:fixed; inset:0; }
.scene { background: url('./assets/obsidian_conquest_splash_background.png') center center / cover no-repeat; transform:scale(1.03); }
.shade { background: linear-gradient(90deg,rgba(3,6,8,.73) 0%, rgba(6,9,10,.34) 51%, rgba(3,4,6,.72) 100%),linear-gradient(0deg,#010204cf 0%,transparent 25%,transparent 67%,#02030377 100%); }
.shell { z-index:1; position:relative; min-height:100vh; max-width:1440px; padding:5.4vh 5vw 6vh; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,420px); align-items:center; column-gap:6vw; }
.brand { align-self:center; padding-bottom:40px; max-width:700px; text-shadow:0 3px 15px #050300da; }
.wordmark { display:block; width:min(490px,94%); margin-left:-18px; margin-bottom:3px; filter: drop-shadow(0 6px 16px #000c); }
.brand-rule{width:80px;height:2px; background:linear-gradient(90deg,var(--gold),transparent);margin:3px 0 26px;}
.eyebrow,.panel-label { text-transform:uppercase; letter-spacing:.25em; font-weight:700; color:#f4d99b; font-size:11px; }
h1 { margin:14px 0 18px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(35px,4vw,58px); font-weight:600; line-height:1.12; }
h1 em { color:var(--gold-bright); font-weight:500; font-style:normal; }
.brand-blurb { font-size:clamp(14px,1.4vw,17px); line-height:1.7; max-width:490px; color:#e8ddcc; }
.beta-label { display:inline-flex; margin-top:20px; align-items:center; gap:11px; background:#060606ba; border:1px solid #ae8848a1; padding:11px 16px; text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--gold-bright); }
.pulse { width:8px;height:8px; border-radius:99px;background:#e5b761;box-shadow:0 0 10px #ffcb5d; }
.auth-panel { background:linear-gradient(155deg,#16191cf2,#090b0eec); border:1px solid #9b6f318f; border-radius:8px; box-shadow:0 32px 110px #000e,inset 0 0 0 1px #dfb56923; padding:36px 35px 20px; position:relative; max-height:88vh; overflow-y:auto; }
.auth-panel:before{content:"";position:absolute;inset:7px;border:1px solid #8c67253d;border-radius:4px;pointer-events:none}
.panel-ornament { width:30px; margin:0 auto 7px; font-size:21px; color:var(--gold); text-align:center; }
.panel-label{ text-align:center; margin-bottom:28px; }
.tabs{ display:flex; margin-bottom:23px; border-bottom:1px solid #8a642f79; }
.tab { flex:1;border:0;background:transparent;color:#b5a388;cursor:pointer;padding:11px 0 14px; font-weight:700;font-size:13px;letter-spacing:.03em;border-bottom:2px solid transparent; }
.tab.active{color:var(--gold-bright);border-bottom-color:var(--gold);}
.tab:hover { color:white; }
h2{font:600 27px Georgia,'Times New Roman',serif;margin:3px 0 7px;color:#fff0ce;}
.helper{color:#bcb09f;font-size:13px;line-height:1.6;margin:0 0 22px;}
form { display:flex;flex-direction:column; }
label{font-size:11px;font-weight:700;color:#efd9ad;letter-spacing:.03em;margin-bottom:8px;}
input,select{ font:14px 'Trebuchet MS',Arial,sans-serif;background:#07090cba;border:1px solid #856c478a;border-radius:4px;color:#f4e8d3;outline:none;padding:13px 14px;margin-bottom:18px;width:100%;min-height:46px; }
input:focus,select:focus{border-color:#e2b86c;box-shadow:0 0 0 3px #b48b3f30;}
input::placeholder{color:#86796b;}
select { appearance:auto; }
.primary{ color:#211504;border:1px solid #f4d394; background:linear-gradient(160deg,#ffdf9d,#c5923f);padding:14px 16px;min-height:48px;cursor:pointer;border-radius:4px;text-align:center;letter-spacing:.07em;font-weight:800;font-size:12px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px; }
.primary span{font-size:19px;line-height:1;}
.primary:focus-visible,.tab:focus-visible,.quiet:focus-visible{outline:3px solid #f7d17f;outline-offset:2px;}
.primary:hover{filter:brightness(1.12)}
.primary:disabled{opacity:.55;cursor:wait;}
.micro{line-height:1.5;color:#a99a82;font-size:11px;text-align:center;margin:15px 0 24px;}
.quiet { margin:14px auto;display:block;color:var(--gold);background:none;border:0;cursor:pointer; }
.status{font-size:12px;line-height:1.6;margin-top:11px;}
.status:not(:empty){padding:11px;border:1px solid #7c6b4b6b;border-radius:4px;background:#151a1e;}
.status.error{color:#ffd0ba;border-color:#ae685d99;}
.status.ok{color:#e4efd4;border-color:#63956a99;}
.panel-footer{margin-top:28px;border-top:1px solid #886f4162;display:flex;gap:10px;align-items:center;justify-content:center;padding:15px 0 0;color:#ac9472;text-align:center;letter-spacing:.09em;text-transform:uppercase;font-size:9px;line-height:1.5;}
.panel-footer img{width:32px;height:32px;object-fit:contain;}
.footer{position:absolute;left:5vw;bottom:26px;color:#dfc99c;font-size:10px;letter-spacing:.17em;text-shadow:0 2px 5px black;}.footer span{color:#8e784f;margin:0 7px;}
[hidden]{display:none!important;}
@media(max-width:900px) { .shell{grid-template-columns:1fr;gap:25px;padding:20px 16px 70px;align-items:start;justify-items:center;} .brand{align-self:start;text-align:center;padding:0;margin:0;}.wordmark{width:min(390px,90vw);margin:auto;}.brand-rule{margin:0 auto 15px}.brand h1{font-size:29px;margin:10px 0}.brand-blurb{font-size:13px;margin:0 auto 8px}.beta-label{margin-top:8px}.auth-panel{width:min(100%,440px);padding:25px 28px;max-height:none}.footer{left:0;right:0;text-align:center;bottom:18px;letter-spacing:.05em;font-size:9px}.scene{background-position:40% center}.shade{background:#020304b5}}
@media(max-width:440px){.brand h1{font-size:25px}.brand-blurb{display:none}.eyebrow{font-size:9px}.auth-panel{padding:21px}.wordmark{width:290px}.panel-label{margin-bottom:12px}.tabs{margin-bottom:15px}h2{font-size:23px}.footer{font-size:8px}}