/* Aetherbrawl website. Colours from the game UI: deep navy panels, gold, element accents. */
:root { --ink:#0e1328; --panel:#18203f; --line:#3a4a8c; --text:#fff; --dim:#aeb8e6; --gold:#ffc531; --fire:#ff6a3d; --ice:#4fc3ff; --nature:#6bd66b; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--text); font:17px/1.6 "Nunito", system-ui, sans-serif; }
a { color:var(--gold); }
h1,h2,h3 { font-family:"Lilita One", system-ui, sans-serif; font-weight:400; line-height:1.1; margin:0 0 .4em; letter-spacing:.5px; }
img { display:block; max-width:100%; }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }
.bar { position:absolute; inset:0 0 auto; z-index:2; }
.bar .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none; font-family:"Lilita One",sans-serif; font-size:22px; }
.brand img { width:36px; height:36px; border-radius:9px; }
nav { display:flex; gap:20px; font-size:15px; } nav a { color:var(--text); text-decoration:none; opacity:.85; } nav a:hover { color:var(--gold); opacity:1; }
.hero { position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:url(img/key-art.jpg) center/cover; z-index:-2; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,19,40,.92) 0%, rgba(14,19,40,.55) 55%, rgba(14,19,40,.15)); z-index:-1; }
.hero h1 { font-size:clamp(48px,9vw,96px); color:var(--gold); text-shadow:0 4px 0 #0e1328; }
.hero p { max-width:560px; font-size:20px; color:#e8ecff; }
.pill { display:inline-block; margin-top:22px; padding:12px 22px; border-radius:999px; background:var(--panel); border:2px solid var(--line); color:var(--dim); font-weight:700; }
section { padding:64px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.card { background:var(--panel); border:2px solid var(--line); border-radius:20px; padding:22px; }
.card h3 { font-size:24px; } .card p { color:var(--dim); margin:0; }
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.shots img { border-radius:16px; border:2px solid var(--line); }
.doc { padding:100px 0 60px; } .doc h2 { margin-top:1.4em; font-size:28px; } .doc p, .doc li { color:#dfe4ff; }
table { width:100%; border-collapse:collapse; margin:12px 0; } td,th { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--gold); }
footer { border-top:1px solid var(--line); padding:26px 0 40px; color:var(--dim); font-size:14px; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
nav a { white-space:nowrap; }
@media (max-width:520px) { nav { gap:14px; font-size:14px; } nav a[href="/#game"] { display:none; } .brand { font-size:19px; } .hero { min-height:78vh; } }