:root { color-scheme: dark; --ink:#f5efe1; --muted:#a8acb7; --night:#070b14; --panel:#101723; --line:rgba(255,255,255,.12); --gold:#e9b75d; --teal:#68d3c1; --danger:#ff7f7f; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--night); }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 75% 8%,rgba(81,110,147,.22),transparent 32rem),linear-gradient(155deg,#070b14 0%,#0b101b 55%,#0b0e12 100%); }
.stars { position:fixed; inset:0; pointer-events:none; opacity:.26; background-image:radial-gradient(circle,white 0 1px,transparent 1.5px); background-size:53px 53px; mask-image:linear-gradient(to bottom,black,transparent 70%); }
.masthead { position:relative; z-index:2; max-width:1180px; margin:auto; padding:28px 28px 0; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(233,183,93,.6); transform:rotate(45deg); color:var(--gold); font-family:Georgia,serif; }
.brand-mark::first-line { transform:rotate(-45deg); }
.brand span:last-child { display:grid; gap:2px; }
.brand strong { font:600 19px/1 Georgia,serif; letter-spacing:.04em; }
.brand small { color:var(--muted); font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
main { position:relative; z-index:1; width:min(1124px,calc(100% - 40px)); margin:0 auto; padding:88px 0 70px; }
.hero { max-width:800px; margin-bottom:50px; }
.eyebrow { margin:0 0 10px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; }
h1 { margin:0; max-width:760px; font-size:clamp(48px,8vw,92px); line-height:.95; letter-spacing:-.045em; }
.hero-copy { max-width:650px; margin:28px 0 0; color:var(--muted); font-size:18px; line-height:1.7; }
.auth-shell { display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:rgba(16,23,35,.88); box-shadow:0 28px 80px rgba(0,0,0,.28); backdrop-filter:blur(18px); }
.auth-copy,.auth-forms { padding:42px; }
.auth-copy { background:linear-gradient(145deg,rgba(233,183,93,.11),rgba(104,211,193,.06)); border-right:1px solid var(--line); }
.auth-copy h2,.account-panel h2 { margin:0 0 14px; font-size:36px; }
.auth-copy>p:not(.eyebrow) { color:var(--muted); line-height:1.65; }
.tabs { display:flex; gap:6px; margin-bottom:28px; padding:5px; border-radius:12px; background:rgba(0,0,0,.25); }
.tab { flex:1; padding:11px; border:0; border-radius:8px; color:var(--muted); background:transparent; cursor:pointer; font:600 14px inherit; }
.tab.active { color:var(--ink); background:#202a39; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.auth-form { display:grid; gap:18px; }
label { display:grid; gap:8px; color:#d8d4c9; font-size:13px; font-weight:650; }
input { width:100%; padding:14px 15px; color:var(--ink); background:#080d16; border:1px solid var(--line); border-radius:10px; outline:none; font:16px inherit; }
input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(104,211,193,.12); }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#172130; font:700 13px inherit; letter-spacing:.025em; text-decoration:none; cursor:pointer; }
.button:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.28); }
.button.primary { color:#15100a; background:var(--gold); border-color:var(--gold); }
.button.wallet { width:100%; margin-top:18px; background:#263044; }
.button.quiet { background:transparent; }
.button:disabled { opacity:.55; cursor:wait; transform:none; }
.fine-print { margin:10px 0 0; color:#7f8795!important; font-size:12px; }
.status { margin-top:18px; padding:12px 14px; border:1px solid rgba(255,127,127,.35); border-radius:9px; color:#ffb0b0; background:rgba(255,83,83,.08); font-size:13px; }
.account-chip { padding:10px 14px; border:1px solid var(--line); border-radius:999px; color:var(--teal); background:rgba(16,23,35,.8); font-size:13px; }
.games { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.game-card { position:relative; min-height:380px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#121a27; }
.game-card::before { content:""; position:absolute; inset:0; opacity:.48; background:radial-gradient(circle at 80% 15%,var(--accent),transparent 45%); }
.game-card>* { position:relative; }
.game-card.loopdash { --accent:#7b5cff; }
.game-card.sealedger { --accent:#1c9eae; }
.game-card.dungeons { --accent:#b85346; }
.game-number { align-self:flex-end; color:rgba(255,255,255,.28); font:42px/1 Georgia,serif; }
.game-card h2 { margin:0 0 12px; font-size:38px; }
.game-card p:not(.eyebrow) { min-height:72px; color:var(--muted); line-height:1.55; }
.account-panel { margin-top:24px; padding:28px; display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid var(--line); border-radius:18px; background:rgba(16,23,35,.7); }
.account-panel h2 { margin-bottom:7px; }
.account-panel p { margin:0; color:var(--muted); }
.account-actions { display:flex; gap:10px; }
footer { position:relative; padding:30px; text-align:center; color:#687180; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
[hidden] { display:none!important; }
@media (max-width:800px) { main{padding-top:60px}.masthead{padding-inline:20px}.brand small{display:none}.auth-shell{grid-template-columns:1fr}.auth-copy{border-right:0;border-bottom:1px solid var(--line)}.auth-copy,.auth-forms{padding:28px}.games{grid-template-columns:1fr}.game-card{min-height:300px}.account-panel{align-items:flex-start;flex-direction:column}.account-actions{width:100%}.account-actions .button{flex:1} }