@import "tailwindcss";

:root {
  --bg: #050914;
  --panel: #0a1424;
  --panel-2: #0e1b2d;
  --line: rgba(146, 177, 206, .18);
  --text: #f2f7fb;
  --muted: #8ea1b5;
  --cyan: #00d6dd;
  --purple: #8c5cff;
  --orange: #ff9e42;
  --pink: #e54fff;
  --ui-font: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; overflow: hidden; color: var(--text); font-family: var(--ui-font); background: var(--bg); }
button, a { font: inherit; color: inherit; }
button { border: 0; }

.app-shell { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #050914; }
.background-media { position: absolute; inset: 0; z-index: -5; overflow: hidden; }
.background-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.05) brightness(.72) hue-rotate(155deg); transform: scale(1.025); }
.background-grid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(74,121,158,.22) 1px, transparent 1px), linear-gradient(90deg,rgba(74,121,158,.22) 1px,transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg,#000,transparent 76%); }
.background-shade { position: absolute; inset: 0; background: radial-gradient(circle at 52% 40%,rgba(0,214,221,.045),transparent 34%),linear-gradient(90deg,rgba(3,7,17,.72) 0%,rgba(5,10,21,.34) 47%,rgba(5,10,21,.52) 100%),linear-gradient(180deg,rgba(4,8,17,.48),transparent 27%,rgba(4,8,17,.42)); }
.aura { position: absolute; left: 50%; top: 15%; width: min(52vw,760px); height: min(70vh,780px); transform: translateX(-50%); background: radial-gradient(ellipse,rgba(0,214,221,.1),transparent 62%); filter: blur(22px); animation: aura 5s ease-in-out infinite alternate; }

.topbar { position: relative; z-index: 30; height: 88px; padding: 0 18px 0 clamp(24px,4.6vw,82px); display: grid; grid-template-columns: 220px minmax(0,1fr) auto; align-items: center; background: rgba(5,10,21,.8); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { position: relative; justify-self: start; display: flex; align-items: center; width: 220px; height: 64px; padding: 0; background: transparent; cursor: pointer; overflow: hidden; }
.brand::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:url("/assets/custom-logo.png") left center/contain no-repeat; }
.fallback-logo { display: flex; align-items: center; gap: 13px; font-size: 18px; letter-spacing: .13em; }
.fallback-logo i { display: grid; place-items: center; width: 38px; height: 38px; color: var(--cyan); border: 1px solid var(--cyan); border-radius: 8px; font-style: normal; font-weight: 900; box-shadow: 0 0 20px rgba(0,214,221,.22), inset 0 0 15px rgba(0,214,221,.08); }
.fallback-logo b { font-weight: 850; }
.nav { display: flex; align-self: stretch; justify-content:center; min-width:0; gap: clamp(14px,2.2vw,40px); }
.nav button { position: relative; padding: 0; background: transparent; color: #94a7ba; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; transition: color .25s ease,text-shadow .25s ease; }
.nav button::after { content:""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); transition: left .3s ease,right .3s ease; }
.nav button:hover,.nav button.active { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.24); }
.nav button.active::after { left: 0; right: 0; }
.header-discord { justify-self:end; margin-left:auto; white-space:nowrap; display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-size:12px; font-weight:900; letter-spacing:.16em; transition:transform .25s ease,text-shadow .25s ease; }
.header-discord i { width:45px; height:34px; display:block; background:#fff; -webkit-mask:url("https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/discord.svg") center/contain no-repeat; mask:url("https://cdn.jsdelivr.net/npm/simple-icons@v13/icons/discord.svg") center/contain no-repeat; filter:drop-shadow(0 0 13px rgba(140,92,255,.78)); }
.header-discord:hover { transform:translateY(-2px); text-shadow:0 0 16px rgba(255,255,255,.6); }
.menu-button { display:none; background:transparent; cursor:pointer; }

.stage { position: relative; height: calc(100svh - 88px); }
.panel { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(24px) scale(.992); pointer-events:none; transition:opacity .55s ease,transform .7s cubic-bezier(.2,.75,.2,1),visibility .55s; }
.panel.active { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:.1s; }
.eyebrow { display:inline-flex; align-items:center; gap:12px; color:var(--cyan); font-size:10px; font-weight:900; letter-spacing:.25em; text-transform:uppercase; }
.eyebrow::before { content:""; width:34px; height:2px; background:currentColor; box-shadow:0 0 10px currentColor; }
.eyebrow.purple { color:var(--purple); }.eyebrow.orange { color:var(--orange); }.eyebrow.cyan { color:var(--cyan); }

.home-panel>* { min-width:0; }
.home-panel { display:grid; overflow:auto; grid-template-columns:minmax(350px,1fr) minmax(330px,.88fr) minmax(350px,1fr); align-items:center; gap:clamp(16px,1.8vw,34px); padding:0 clamp(34px,5vw,92px) 2vh; }
.hero-copy { position:relative; z-index:5; max-width:690px; }
.hero-copy h1,.section-copy h2,.downloads-head h2,.how-heading h2 { margin:18px 0; font-size:clamp(50px,6.25vw,100px); line-height:.88; letter-spacing:-.055em; font-weight:850; text-transform:uppercase; }
.hero-copy h1,.hero-right-copy h2 { font-size:clamp(42px,4.2vw,76px); }
.hero-copy h1 em,.section-copy h2 em { color:transparent; -webkit-text-stroke:1px rgba(225,245,255,.8); font-style:normal; }
.hero-copy p { max-width:590px; margin:22px 0 28px; color:#aab8c5; font-size:clamp(14px,1.05vw,17px); line-height:1.7; }
.hero-banners { display:flex; flex-wrap:wrap; gap:18px; }
.media-button { position:relative; flex:0 1 300px; width:min(300px,100%); height:auto; aspect-ratio:300/102; padding:0; overflow:hidden; border:1px solid rgba(0,214,221,.48); border-radius:9px; cursor:pointer; background-size:cover; background-position:center; box-shadow:0 13px 28px rgba(0,0,0,.35),inset 0 0 20px rgba(0,214,221,.06); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.media-button:hover { transform:translateY(-4px); border-color:var(--cyan); box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 26px rgba(0,214,221,.25); }
.download-media { background-image:url("/assets/download-banner.png"),url("https://gpstatic.com/acache/46/83/11/us/s1-f3426df33a0ebf0dc64647b656594378.jpg"); }
.discord-media { display:block; border-color:rgba(140,92,255,.46); background-image:url("/assets/discord-banner.png"),url("https://gaming-cdn.com/images/news/articles/179/cover/age-of-empires-ii-definitive-edition-is-finally-playable-on-xbox-cover63da3897ebdcb.jpg"); }
.discord-media:hover { border-color:var(--purple); box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 26px rgba(140,92,255,.25); }
.virustotal-link { display:block; width:fit-content; margin:14px 0 0; opacity:.82; transition:transform .25s ease,opacity .25s ease,filter .25s ease; }
.virustotal-link img { display:block; width:clamp(86px,7vw,125px); height:auto; object-fit:contain; }
.virustotal-link:hover { transform:translateY(-2px); opacity:1; filter:drop-shadow(0 0 13px rgba(0,214,221,.28)); }
.mascot-stage { position:absolute; z-index:2; left:50%; bottom:0; width:min(37vw,570px); height:min(78vh,800px); margin:0; transform:translateX(-50%); pointer-events:none; }
.mascot-fallback,.custom-mascot { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 25px 36px rgba(0,0,0,.7)); transition:opacity .2s ease; }
.mascot-fallback { background:url("https://www.ageofempires.com/wp-content/uploads/2023/10/TMR-key-art-titled-hero-art-1920x1080-1.png") 51% 43%/auto 112% no-repeat; clip-path:polygon(19% 0,82% 0,94% 100%,6% 100%); filter:saturate(.68) contrast(1.08) drop-shadow(0 30px 35px rgba(0,0,0,.75)); mask-image:linear-gradient(#000 0 84%,transparent 100%); }
.custom-mascot { z-index:2; }
.hero-right-copy { position:relative; z-index:5; grid-column:3; justify-self:end; width:min(100%,560px); padding-left:clamp(8px,1.5vw,24px); text-align:left; }
.hero-right-copy h2 { margin:18px 0 24px; line-height:.88; letter-spacing:-.055em; font-weight:850; text-transform:uppercase; }
.hero-right-copy h2 em { color:transparent; -webkit-text-stroke:1px rgba(225,245,255,.78); font-style:normal; }
.hero-points { display:grid; gap:11px; }
.hero-point { display:grid; grid-template-columns:38px 1fr; align-items:center; gap:13px; }
.hero-point>p { margin:0; color:#d8e3ed; font-size:clamp(12px,1vw,15px); font-weight:750; letter-spacing:.035em; }
.point-icon { position:relative; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(140,92,255,.3); border-radius:9px; background:rgba(140,92,255,.1); box-shadow:0 0 15px rgba(140,92,255,.12); }
.point-icon b { color:#b99fff; font-size:13px; }
.point-icon::after { content:""; position:absolute; inset:2px; z-index:2; background-position:center; background-size:32px 32px; background-repeat:no-repeat; }
.point-icon-1::after{background-image:url("/assets/home-point-1.png")}.point-icon-2::after{background-image:url("/assets/home-point-2.png")}.point-icon-3::after{background-image:url("/assets/home-point-3.png")}.point-icon-4::after{background-image:url("/assets/home-point-4.png")}

.builds-panel { display:grid; overflow:auto; grid-template-columns:minmax(180px,.55fr) minmax(380px,.88fr) minmax(500px,1.18fr); align-items:center; gap:clamp(22px,2.4vw,46px); padding:2vh 5.5vw; background:linear-gradient(90deg,rgba(5,10,22,.95),rgba(5,10,22,.46),rgba(5,10,22,.82)); }
.section-copy { max-width:590px; justify-self:end; }.section-copy h2 { font-size:clamp(52px,4.6vw,82px); }.section-copy p { color:#aabccb; font-size:clamp(15px,1.1vw,18px); line-height:1.85; }
.rewards-side-art { position:relative; justify-self:end; width:min(23vw,350px); height:min(69vh,670px); margin:0 -18px 0 0; background:linear-gradient(180deg,transparent 70%,rgba(4,9,20,.85)),url("https://i0.wp.com/drawyourweapon.com/wp-content/uploads/2021/07/CraigMullins1.jpg?resize=864%2C486&ssl=1") 50% center/auto 120% no-repeat; filter:saturate(.72) contrast(1.08) drop-shadow(0 25px 34px rgba(0,0,0,.65)); mask-image:linear-gradient(90deg,transparent,#000 15% 90%,transparent),linear-gradient(180deg,transparent,#000 9% 91%,transparent); mask-composite:intersect; }
.rewards-side-custom { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.feature-pills { display:flex; flex-wrap:wrap; gap:9px; margin:28px 0; }.feature-pills span { padding:10px 13px; color:#8be8eb; border:1px solid rgba(0,214,221,.22); border-radius:6px; background:rgba(0,214,221,.06); font-size:8px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.cyan-action { min-width:208px; height:52px; padding:0 22px; color:#031114; background:linear-gradient(110deg,#00edf2,#00a4b3); border-radius:7px; cursor:pointer; font-size:10px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 0 30px rgba(0,214,221,.2); transition:.25s ease; }.cyan-action:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(0,214,221,.36)}.cyan-action b{margin-left:20px;font-size:18px}
.app-preview-card { align-self:center; padding:20px; border:1px solid rgba(0,214,221,.3); border-radius:14px; background:linear-gradient(145deg,rgba(15,31,51,.94),rgba(7,16,30,.96)); box-shadow:0 30px 70px rgba(0,0,0,.46),0 0 50px rgba(0,214,221,.08); transform:perspective(1300px) rotateY(-5deg); }
.preview-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:0 5px 18px; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.09em; }.preview-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:#031116;background:var(--cyan);font-weight:950}.preview-top small{color:#29ff9c;font-size:7px;font-weight:900}
.build-step { display:grid; grid-template-columns:40px 20px 1fr auto; align-items:center; gap:15px; min-height:70px; padding:0 12px; border-bottom:1px solid rgba(138,169,196,.12); }.build-step>span{color:#5c7187;font-size:11px;font-weight:900}.build-step i{width:10px;height:10px;border-radius:50%;border:2px solid #4e6174}.build-step i.done{border-color:#29ff9c;background:#29ff9c;box-shadow:0 0 12px rgba(41,255,156,.6)}.build-step b{font-size:11px}.build-step small{color:#61768b;font-size:7px;font-weight:900;letter-spacing:.1em}
.rewards-art { position:relative; justify-self:start; width:min(40vw,680px); aspect-ratio:16/9; margin:0; overflow:visible; border:1px solid rgba(0,214,221,.38); border-radius:16px; background:linear-gradient(145deg,rgba(0,214,221,.12),rgba(4,9,20,.22)),url("https://www.ageofempires.com/wp-content/uploads/2023/10/TMR-key-art-titled-hero-art-1920x1080-1.png") center/cover no-repeat; box-shadow:0 34px 75px rgba(0,0,0,.52),0 0 46px rgba(0,214,221,.12); transform:perspective(1200px) rotateY(-7deg) rotateZ(-1.2deg); }
.rewards-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 23%,transparent 70%,rgba(0,214,221,.12)); }
.rewards-custom-image { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .2s ease; }
.rewards-coins { position:absolute; z-index:5; left:-12%; top:-28%; width:124%; height:150%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 12px 16px rgba(255,190,44,.35)); animation:coinsFloat 4.2s ease-in-out infinite alternate; }

.downloads-panel { padding:2vh 3vw 2vh; background:rgba(4,9,20,.9); overflow:auto; }.downloads-head { text-align:center; }.downloads-head h2 { margin:8px 0 6px; font-size:clamp(42px,5vw,72px); }.downloads-head p { margin:0;color:#8599ad;font-size:12px; }.downloads-content { display:grid; grid-template-columns:minmax(90px,140px) minmax(760px,1020px) minmax(90px,140px); justify-content:center; align-items:center; gap:clamp(10px,1.35vw,22px); margin:1.7vh auto 0; max-width:1580px; }
.platform-list{display:grid;gap:11px;align-content:start}.platform-card{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:14px;min-height:86px;padding:12px 16px;text-align:left;border:1px solid var(--line);border-radius:10px;background:linear-gradient(115deg,rgba(16,30,49,.94),rgba(8,17,31,.9));cursor:pointer;transition:.25s ease}.platform-card:hover{transform:translateX(4px);border-color:rgba(140,92,255,.55)}.platform-card.primary-platform{border-color:rgba(0,214,221,.55);box-shadow:0 0 26px rgba(0,214,221,.1)}.platform-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:9px;color:#c5d2dd;background:#16263a;font-size:24px}.primary-platform .platform-icon{color:#021115;background:var(--cyan);box-shadow:0 0 16px rgba(0,214,221,.38)}.platform-card>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.platform-card small{color:#6e8498;font-size:7px;font-weight:900;letter-spacing:.13em}.platform-card b{font-size:12px;letter-spacing:.07em}.platform-card em{color:#73889b;font-size:8px;font-style:normal}.platform-card strong{color:#718499;font-size:8px;letter-spacing:.11em}.primary-platform strong{color:var(--cyan)}
.downloads-side-image{position:relative;width:100%;height:min(56vh,550px);margin:0;background-position:center;background-size:cover;background-repeat:no-repeat;filter:saturate(.66) contrast(1.08) drop-shadow(0 24px 32px rgba(0,0,0,.62));mask-image:linear-gradient(180deg,transparent,#000 12% 88%,transparent)}.downloads-side-left{background-image:url("https://gpstatic.com/acache/46/83/11/us/s1-f3426df33a0ebf0dc64647b656594378.jpg")}.downloads-side-right{background-image:url("https://gaming-cdn.com/images/news/articles/179/cover/age-of-empires-ii-definitive-edition-is-finally-playable-on-xbox-cover63da3897ebdcb.jpg")}.downloads-side-custom{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.card-deck{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));align-items:start;gap:clamp(14px,1.15vw,20px);perspective:1200px}.download-card{--accent:var(--cyan);display:grid;grid-template-rows:auto 48px;gap:14px;min-width:0}.civ-card{position:relative;width:100%;height:auto;aspect-ratio:3/5;padding:0;overflow:hidden;cursor:pointer;border:1px solid rgba(117,146,171,.26);border-radius:13px;background:#111 var(--card-image) center/cover;filter:saturate(.62) brightness(.68);transition:transform .3s ease,filter .35s ease,border-color .35s ease,box-shadow .35s ease;box-shadow:0 24px 48px rgba(0,0,0,.46)}.civ-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,19,.06),transparent 54%,rgba(3,9,19,.4))}.civ-card:hover,.civ-card.selected{transform:translateY(-4px);filter:saturate(.96) brightness(.9);border-color:var(--accent);box-shadow:0 26px 52px rgba(0,0,0,.54),0 0 26px color-mix(in srgb,var(--accent) 34%,transparent)}
.civ-custom-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.civ-card.selected { box-shadow:0 26px 54px rgba(0,0,0,.58),0 0 24px 5px color-mix(in srgb,var(--accent) 62%,transparent),inset 0 0 10px 2px color-mix(in srgb,var(--accent) 60%,transparent); }
.download-button-civ { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; text-decoration:none; padding:0 24px; color:#02080c; border:1px solid var(--accent); border-radius:8px; background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 100%,#fff 0%),color-mix(in srgb,var(--accent) 72%,#07111f 28%)); box-shadow:0 10px 26px rgba(0,0,0,.34),0 0 22px color-mix(in srgb,var(--accent) 38%,transparent); cursor:pointer; font-size:11px; font-weight:950; letter-spacing:.13em; text-transform:uppercase; transition:transform .22s ease,filter .22s ease,box-shadow .22s ease; }
.download-button-civ:hover { transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 13px 30px rgba(0,0,0,.42),0 0 32px color-mix(in srgb,var(--accent) 58%,transparent); }
.download-button-civ:focus-visible,.civ-card:focus-visible,.virustotal-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.platform-label{display:block;margin-top:.5rem;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-align:center}

.points-panel { overflow:auto; padding:4vh clamp(24px,7vw,110px) 12vh; background:rgba(5,10,22,.9); }
.points-heading { max-width:1200px; margin:0 auto 3vh; }
.points-heading h2 { margin:12px 0 0; font-size:clamp(42px,5vw,76px); line-height:.95; letter-spacing:-.045em; text-transform:uppercase; }
.points-list { display:grid; gap:clamp(24px,4vh,48px); max-width:1200px; margin:0 auto; }
.points-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,500px); align-items:center; gap:clamp(28px,6vw,90px); padding:clamp(18px,2.4vw,32px); border:1px solid rgba(146,177,206,.16); border-radius:16px; background:linear-gradient(120deg,rgba(14,27,45,.9),rgba(7,15,28,.82)); box-shadow:0 24px 58px rgba(0,0,0,.28); }
.points-copy { min-width:0; }
.points-number { color:var(--cyan); font-size:11px; font-weight:950; letter-spacing:.2em; }
.points-copy h3 { margin:12px 0 14px; font-size:clamp(24px,2.3vw,36px); text-transform:uppercase; }
.points-copy p { margin:0; max-width:680px; color:#a8b7c5; font-size:clamp(14px,1.05vw,17px); line-height:1.85; text-align:justify; text-wrap:pretty; }
.points-image-wrap { width:100%; max-width:500px; aspect-ratio:1; margin:0; justify-self:end; overflow:hidden; border-radius:14px; border:1px solid rgba(0,214,221,.24); background:rgba(4,10,20,.6); box-shadow:0 18px 42px rgba(0,0,0,.38); }
.points-image { width:100%; height:100%; object-fit:cover; transition:opacity .2s ease; }

.how-panel { display:grid; align-content:center; padding:1vh 8vw 9vh; background:rgba(5,10,22,.86); }.how-heading{text-align:center;margin-bottom:4vh}.how-heading h2{font-size:clamp(43px,5.5vw,82px);margin:12px 0}.how-heading p{color:#8da0b3;font-size:13px}.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto}.how-card{position:relative;min-height:255px;padding:28px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,rgba(16,31,50,.92),rgba(7,16,29,.94));box-shadow:0 22px 48px rgba(0,0,0,.33);overflow:hidden}.how-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--purple));box-shadow:0 0 18px var(--cyan)}.how-card>span{position:absolute;right:20px;top:14px;color:rgba(134,158,181,.12);font-size:72px;font-weight:950}.how-card>i{display:grid;place-items:center;width:52px;height:52px;border-radius:11px;color:#031116;background:var(--cyan);font-size:25px;font-style:normal;font-weight:900;box-shadow:0 0 24px rgba(0,214,221,.25)}.how-card:nth-child(2)>i{color:#fff;background:var(--purple);box-shadow:0 0 24px rgba(140,92,255,.25)}.how-card:nth-child(3)>i{background:var(--orange);box-shadow:0 0 24px rgba(255,158,66,.25)}.how-card h3{position:relative;margin:27px 0 10px;font-size:18px;text-transform:uppercase}.how-card p{position:relative;color:#8498ab;font-size:12px;line-height:1.7}.cyan-action.centered{display:block;margin:4vh auto 0}

.civilization-marquee { position:absolute; z-index:24; left:0; right:0; bottom:0; height:60px; display:flex; align-items:center; overflow:hidden; pointer-events:none; opacity:1; background:transparent; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.crest-track { display:flex; width:max-content; animation:crestScroll 58s linear infinite; will-change:transform; }
.crest-group { display:flex; align-items:center; flex:none; gap:26px; padding-right:26px; }
.crest-slot { position:relative; flex:0 0 42px; width:42px; height:46px; display:grid; place-items:center; filter:drop-shadow(0 6px 7px rgba(0,0,0,.68)); }
.crest-slot img { position:relative; max-width:42px; max-height:46px; object-fit:contain; opacity:1; transition:opacity .25s ease; }

@keyframes aura{from{opacity:.55;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1.06)}}
@keyframes coinsFloat{from{transform:translate3d(-1%,2%,0) rotate(-1deg)}to{transform:translate3d(2%,-2%,0) rotate(1deg)}}
@keyframes crestScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width: 1180px) {
  .topbar{grid-template-columns:200px minmax(0,1fr) auto;padding:0 16px 0 24px}.nav{justify-content:center;gap:20px}.nav button{font-size:10px}.home-panel{grid-template-columns:1fr .8fr 1fr;padding-left:4vw;padding-right:4vw}.mascot-stage{width:min(36vw,510px)}.hero-copy h1,.hero-right-copy h2{font-size:clamp(40px,4vw,58px)}.hero-banners{gap:12px}.media-button{flex-basis:190px;width:190px;height:64px}.builds-panel{grid-template-columns:150px minmax(350px,.9fr) minmax(430px,1.1fr);gap:20px;padding-left:4vw;padding-right:4vw}.rewards-side-art{width:min(22vw,270px);height:min(64vh,620px);margin-right:-12px}.section-copy h2{font-size:clamp(48px,4.5vw,66px)}.downloads-content{grid-template-columns:70px minmax(0,1fr) 70px;gap:10px}.card-deck{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.downloads-side-image{height:min(54vh,520px)}
}

@media (max-width: 900px) {
  body{overflow:auto}.topbar{height:72px;grid-template-columns:1fr auto auto;padding:0 12px 0 20px}.brand{width:180px;height:52px}.header-discord span{display:none}.header-discord i{width:40px;height:30px}.menu-button{display:grid;gap:7px;padding:13px 0 13px 15px}.menu-button i{display:block;width:28px;height:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.nav{position:absolute;top:72px;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 22px 20px;background:rgba(5,11,23,.98);transform:translateY(-125%);opacity:0;transition:.35s ease;z-index:-1}.nav.open{transform:none;opacity:1}.nav button{padding:16px;text-align:left}.nav button::after{display:none}.stage{height:calc(100svh - 72px)}.home-panel{display:flex;align-items:center;padding:2vh 24px 10vh}.hero-copy{width:100%;max-width:590px}.hero-copy h1{font-size:clamp(46px,12vw,72px)}.mascot-stage{left:auto;right:-18%;width:72vw;opacity:.38;transform:none}.hero-copy p{max-width:450px}.hero-right-copy{display:none}.media-button{flex:1;min-width:0;max-width:240px;height:auto;aspect-ratio:260/88}.builds-panel{grid-template-columns:1fr;padding:5vh 24px 10vh;overflow:auto}.rewards-side-art{display:none}.section-copy{justify-self:start}.rewards-art{width:min(82vw,680px);transform:rotateZ(-1.2deg)}.downloads-panel{padding:4vh 18px 10vh}.downloads-content{display:grid;grid-template-columns:1fr;min-width:0;width:100%;gap:18px}.downloads-side-image{display:none}.card-deck{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.download-card{grid-template-rows:auto 46px;gap:12px}.points-panel,.how-panel{align-content:start;padding:5vh 24px 10vh;overflow:auto}.points-row{grid-template-columns:minmax(0,1fr) minmax(220px,340px);gap:26px}.how-steps{grid-template-columns:1fr}.how-card{min-height:190px}.civilization-marquee{position:fixed;height:52px}.crest-slot{flex-basis:34px;width:34px;height:38px}.crest-slot img{max-width:34px;max-height:38px}.crest-group{gap:20px;padding-right:20px}
}

@media (max-width: 560px) {
  .fallback-logo b{font-size:14px}.hero-copy p{font-size:13px}.hero-banners{flex-direction:column}.media-button{width:min(240px,100%);flex:auto}.virustotal-link img{width:92px}.mascot-stage{right:-35%;width:100vw}.downloads-head{text-align:left}.downloads-head h2{font-size:42px}.card-deck{grid-template-columns:1fr;max-width:320px;margin:0 auto}.points-heading h2,.how-heading h2{font-size:42px}.points-row{grid-template-columns:1fr;padding:18px}.points-image-wrap{justify-self:center;max-width:360px}.points-copy p{text-align:left}.how-heading{text-align:left}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; } }


/* AOEUP 2026-08-22 layout refinement */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) #07111f;
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: linear-gradient(180deg,#050b16,#091528); border-left:1px solid rgba(0,214,221,.08); }
*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid #07111f;
  border-radius: 999px;
  background: linear-gradient(180deg,var(--cyan),var(--purple));
  box-shadow: 0 0 13px rgba(0,214,221,.38);
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#66fbff,#a98cff); }

/* Header: brand at left, categories immediately after it, Discord with breathing room at right. */
.topbar {
  padding-left: clamp(24px,4.6vw,82px);
  padding-right: clamp(28px,3vw,52px);
  grid-template-columns: 220px minmax(0,1fr) auto;
  column-gap: 0;
}
.nav {
  justify-content: flex-start;
  padding-left: clamp(28px,3.2vw,58px);
  gap: clamp(18px,2vw,36px);
}
.header-discord { margin-right: 0; padding-right: 8px; }

/* Separate verified/VirusTotal artwork. It is intentionally NOT the header logo. */
.virustotal-link { margin-top: 14px; width: fit-content; max-width: 100%; }
.virustotal-link img {
  display:block;
  width: clamp(280px,22vw,360px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Rewards left artwork must have no fallback/background picture behind the custom PNG. */
.rewards-side-art {
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Coin earning section: 3 clean frameless items per row, 6 total. */
.points-panel {
  align-content: start;
  padding: clamp(30px,4vh,52px) clamp(24px,5vw,78px) 12vh;
}
.points-heading { max-width: 1500px; margin: 0 auto clamp(24px,3vh,38px); }
.points-title-line { display:flex; align-items:center; gap:18px; min-width:0; }
.points-title-line h2 { margin: 10px 0 0; }
.points-title-coin {
  flex: 0 0 auto;
  width: clamp(54px,4.5vw,76px);
  height: clamp(54px,4.5vw,76px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 14px rgba(255,190,44,.34));
}
.points-list {
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(34px,3.5vw,58px) clamp(28px,3.2vw,52px);
  max-width: 1500px;
  margin: 0 auto;
}
.points-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  min-width:0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.points-copy {
  width:100%;
  text-align:center;
}
.points-copy h3 {
  margin:0 0 10px;
  font-size:clamp(20px,1.45vw,26px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:.01em;
}
.points-copy p {
  margin:0;
  font-size:clamp(13px,.95vw,15px);
  line-height:1.58;
  text-align:center;
  font-weight:700;
}
.points-image-wrap {
  width:min(100%,300px);
  height:300px;
  max-width:300px;
  flex:0 0 300px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden;
}
.points-image {
  width:100%;
  height:100%;
  max-width:300px;
  max-height:300px;
  object-fit:contain;
  object-position:center;
}

@media (max-width: 1180px) {
  .topbar{padding-left:24px;padding-right:28px;grid-template-columns:200px minmax(0,1fr) auto}
  .nav{padding-left:26px;gap:18px}
  .virustotal-link img{width:300px}
  .points-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 900px) {
  .topbar{padding:0 20px;grid-template-columns:1fr auto auto}
  .nav{padding:12px 22px 20px}
  .header-discord{padding-right:4px;margin-right:8px}
  .virustotal-link img{width:260px}
  .points-panel{padding:5vh 24px 10vh}
  .points-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px}
}

@media (max-width: 680px) {
  .points-list{grid-template-columns:1fr}
  .points-title-line{gap:12px}
  .points-title-coin{width:56px;height:56px}
}

@media (max-width: 560px) {
  .header-discord{margin-right:4px;padding-right:0}
  .virustotal-link img{width:240px}
  .points-heading h2{font-size:38px}
  .points-copy p{text-align:center}
}

@media (max-width: 680px) {
  .points-image-wrap{width:min(100%,300px);height:auto;aspect-ratio:1;flex:0 0 auto}
  .points-image{width:100%;height:100%}
}