/* L2 Players — visual evolution. Extends the existing page/form styles. */
:root {
  --bg:#070c14; --bg-2:#0b121d; --panel:#101925; --panel-2:#14202e;
  --line:#2e3540; --line-gold:rgba(199,164,103,.4); --bronze:#66543a;
  --gold:#d9b571; --gold-soft:#baa174; --gold-bright:#ffe4ac;
  --text:#e5e5e6; --dim:#a9b2c2; --blue-soft:#b5c3d8;
  --green:#70dc93; --red:#e68d83; --body:"Inter",Arial,sans-serif;
}
html { scroll-padding-top:28px; }
body.evolution { background:#070c14; font-size:14px; line-height:1.65; }
::selection { background:#b49154; color:#07101b; }
.evolution .page { max-width:none; padding:0; overflow:clip; }
.evolution .page::before { display:none; }
.evolution .inner, .home-content, .header-inner, .hero-container, .site-footer { width:calc(100% - 112px); max-width:1400px; margin-inline:auto; padding:0; }
.evolution main { min-height:62vh; outline:none; }
.evolution a, .evolution button { -webkit-tap-highlight-color:transparent; }
.evolution a:focus-visible, .evolution button:focus-visible, summary:focus-visible { outline:2px solid #efd196; outline-offset:5px; }
.ui-icon { width:22px; height:22px; flex-shrink:0; }
.skip-link { position:fixed; left:20px; top:-70px; z-index:100; background:#f6d491; color:#0b1320; padding:12px 20px; }
.skip-link:focus { top:12px; }
.site-header { position:relative; z-index:20; border-bottom:1px solid rgba(208,175,118,.24); background:linear-gradient(180deg,rgba(4,10,19,.98),rgba(6,13,24,.9)); }
.header-inner { min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--gold); flex-shrink:0; }
.brand-emblem { width:42px; height:60px; color:#e0b473; filter:drop-shadow(0 0 8px #b5813530); }
.brand-type { display:flex; flex-direction:column; align-items:center; white-space:nowrap; }
.brand-type strong { font:700 27px/1.2 var(--display); text-transform:uppercase; letter-spacing:.025em; color:#edc582; text-shadow:0 2px 2px #000; }
.brand-type small { font:500 9px/2.4 var(--display); letter-spacing:.3em; color:#ccc7bf; text-transform:uppercase; }
.main-nav { display:flex; align-items:stretch; align-self:stretch; gap:32px; }
.main-nav a { position:relative; display:flex; align-items:center; font:600 11px var(--display); letter-spacing:.08em; text-transform:uppercase; color:#c7c9d0; transition:color .2s,text-shadow .2s; white-space:nowrap; }
.main-nav a:hover, .main-nav a[aria-current] { color:#f7d28c; text-shadow:0 0 15px #e4ac5780; }
.main-nav a[aria-current]::before { content:""; position:absolute; bottom:21px; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#dcb774,transparent); }
.main-nav a[aria-current]::after { content:""; position:absolute; bottom:18px; left:calc(50% - 3px); width:6px; height:6px; background:#f8d58d; transform:rotate(45deg); box-shadow:0 0 10px 3px #b8803550; }
.external-arrow { margin-left:5px; font-family:Arial,sans-serif; }
.nav-logout { display:flex; }
.nav-logout button { background:transparent; color:#c7c9d0; font:600 11px var(--display); letter-spacing:.08em; padding:10px 0; }
.nav-logout button:hover { color:var(--gold-bright); text-shadow:0 0 15px #e4ac5780; }
.header-tools { display:flex; gap:12px; align-items:center; }
.header-account { border:1px solid #6d5e44; padding:9px 14px; display:flex; gap:8px; align-items:center; font:600 10px var(--display); letter-spacing:.08em; white-space:nowrap; min-height:42px; }
.header-account .ui-icon { width:16px; height:16px; }
.sound-toggle { padding:10px; color:#c4b189; background:transparent; border:1px solid transparent; min-height:42px; min-width:42px; }
.sound-toggle:hover { border-color:var(--bronze); color:var(--gold-bright); }
.sound-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.sound-slash { display:none; }
.sound-toggle[aria-pressed="false"] .sound-slash { display:block; }
.sound-toggle[aria-pressed="false"] .sound-waves { display:none; }
.sound-toggle[aria-pressed="false"] { color:#8895a8; }
.menu-toggle { display:none; }
.epic-hero { position:relative; isolation:isolate; min-height:610px; }
.hero-art { position:absolute; z-index:-2; top:0; left:0; right:0; width:calc(100% - 112px); max-width:1400px; margin-inline:auto; aspect-ratio:2.5; background-image:linear-gradient(180deg,rgba(5,10,18,.05) 55%,#070c14 99%),url('/img/evolution/hero-aden.webp'); background-size:cover; background-position:center center; }
.hero-art::before { content:""; position:absolute; inset:-8%; pointer-events:none; opacity:.25; mix-blend-mode:screen; background:radial-gradient(circle at 75% 28%,rgba(109,177,255,.3),transparent 15%),radial-gradient(circle at 54% 52%,rgba(229,184,99,.2),transparent 22%),linear-gradient(115deg,transparent 20%,rgba(87,163,242,.14) 50%,transparent 74%); background-size:100% 100%,100% 100%,190% 190%; animation:hero-aurora 14s ease-in-out infinite alternate; will-change:transform,opacity,background-position; }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,9,17,.68),rgba(4,9,17,.25) 35%,transparent 67%); }
@keyframes hero-drift { 0% { background-position:center center; } 100% { background-position:center center; } }
@keyframes hero-aurora { 0% { transform:translate3d(-2%,1%,0); opacity:.12; background-position:0 0,0 0,0 0; } 100% { transform:translate3d(4%,-2%,0); opacity:.36; background-position:0 0,0 0,100% 25%; } }
.hero-container { position:relative; padding:26px 48px 0; box-sizing:border-box; }
.hero-topline { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.eyebrow { display:block; color:#c3a977; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; line-height:1.6; }
.hero-topline .eyebrow { display:flex; align-items:center; gap:14px; }
.hero-topline .eyebrow i { width:4px; height:4px; background:#c9a769; transform:rotate(45deg); }
.live-status { display:flex; align-items:center; gap:12px; padding:12px 18px; background:linear-gradient(120deg,#070e17ed,#0b1522d6); border:1px solid #75654c; box-shadow:inset 0 0 0 3px #0a1018,0 5px 25px #0005; clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); }
.live-status strong { display:block; font:600 12px/1.5 var(--display); color:#8de7a4; text-transform:uppercase; letter-spacing:.035em; }
.live-status small { display:block; font:12px/1.4 var(--body); color:#b1bbc8; }
.status-orb { width:10px; height:10px; border-radius:50%; background:#a8ffbb; box-shadow:0 0 0 4px #33573c88,0 0 18px 4px #60df72a6; }
.is-offline .status-orb { background:#e8af6c; box-shadow:0 0 0 4px #62462466,0 0 12px #c8974b77; }
.is-offline strong { color:#e8bf8c; }
.hero-copy { max-width:730px; padding-top:25px; }
.hero-copy h1 { font:700 clamp(40px,3.7vw,61px)/1.12 var(--display); letter-spacing:-.045em; text-transform:uppercase; color:#f1ece1; text-shadow:0 3px 12px #0008; }
.hero-copy h1 span { color:#f2ce89; background:linear-gradient(180deg,#fff5c4 20%,#e8b55f 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-copy h2 { font:500 clamp(18px,1.6vw,25px)/1.35 var(--body); font-family:"EB Garamond",Georgia,serif; color:#7fc4ff; text-shadow:0 0 14px #1f8cff66,0 2px 6px #000; margin-top:10px; }
.ornament { width:360px; max-width:85%; position:relative; height:1px; margin:24px 0; background:linear-gradient(90deg,#e5c991,#a38850 55%,transparent); }
.ornament span { position:absolute; left:56%; top:50%; transform:translateY(-52%); color:#f2d490; font-size:15px; background:#101723; line-height:1; }
.hero-copy>p { max-width:435px; font:400 18px/1.4 "EB Garamond",Georgia,serif; color:#c0c6d3; text-shadow:0 2px 5px #000; }
.hero-actions { display:flex; align-items:center; gap:14px; margin-top:29px; }
.epic-button, .epic-secondary { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; min-height:58px; text-transform:uppercase; font-family:var(--display); transition:transform .2s,filter .2s,box-shadow .2s,border-color .2s; }
.epic-button { gap:28px; min-width:265px; padding:13px 24px; font-size:23px; font-weight:700; color:#ffe5a8; background:radial-gradient(ellipse at 50% 105%,#157cd0 0,transparent 66%),linear-gradient(180deg,#123961,#09192e 48%,#0b2242); border:1px solid #efd295; outline:1px solid #6e9eb9; outline-offset:3px; box-shadow:inset 0 0 0 3px #081729,inset 0 0 0 4px #7babc670,inset 0 0 24px #176fae77,0 0 18px #1283e838,0 5px 20px #0008; text-shadow:0 2px 3px #000; }
.epic-button::before { content:""; position:absolute; inset:5px; border:1px solid #80bdeb70; pointer-events:none; }
.epic-button::after { content:""; position:absolute; top:-3px; left:14%; right:14%; height:2px; background:linear-gradient(90deg,transparent,#acdcff,transparent); box-shadow:0 0 12px 3px #249cff70; }
.epic-secondary { gap:20px; font-size:10px; font-weight:600; letter-spacing:.06em; min-height:51px; padding:12px 22px; border:1px solid #887b62; background:linear-gradient(180deg,#26313a9c,#080e18de); color:#e0dfd9; box-shadow:inset 0 0 0 3px #101725; }
.epic-secondary>span { font:22px Georgia,serif; }
.epic-button:hover { color:#fff2c9; box-shadow:inset 0 0 0 3px #081729,inset 0 0 0 4px #92d4ff,inset 0 0 36px #157bb890,0 0 30px #268ef380,0 5px 25px #0008; transform:translateY(-2px); filter:brightness(1.14); }
.epic-secondary:hover { color:#ffe4ac; border-color:#ddbc7f; background-color:#2b3748; transform:translateY(-2px); box-shadow:inset 0 0 0 3px #101725,0 0 20px #c9a66230; }
.hero-notes { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; color:#b4bcc8; }
.hero-notes>span { display:flex; align-items:center; gap:7px; font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.hero-notes .ui-icon { color:#d2b17c; width:14px; height:14px; }
.hero-scroll { display:flex; align-items:center; gap:12px; width:max-content; font-size:8px; text-transform:uppercase; letter-spacing:.2em; margin-top:36px; color:#a9a5a0; }
.hero-scroll>span:last-child { color:#dbbb7a; font-size:22px; line-height:1; }
.side-motto { position:absolute; display:none; top:112px; left:25px; color:#b4a282; font:500 9px/1.6 var(--display); letter-spacing:.13em; text-transform:uppercase; text-align:center; }
.side-motto>span { display:block; font-size:40px; margin-bottom:18px; color:#b08a4d; }
.side-motto i { display:block; height:75px; width:1px; margin:20px auto; background:linear-gradient(#937344,transparent); }
.home-content { position:relative; z-index:2; }
.adventure-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:-29px; scroll-margin-top:30px; }
.adventure-card { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:285px; isolation:isolate; border:1px solid #a08758; background:#07101a; padding:164px 23px 0; box-shadow:inset 0 0 0 3px #070d16,inset 0 0 0 4px #b48e493b,0 12px 36px #0007; transition:transform .25s,border-color .25s,box-shadow .25s; }
.adventure-card::before { content:""; position:absolute; inset:6px; border:1px solid #ceb17030; pointer-events:none; z-index:2; }
.adventure-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 27%,rgba(5,11,19,.7) 49%,#07101b 77%); }
.adventure-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; z-index:-2; transition:filter .3s; }
.adventure-info { display:flex; gap:15px; align-items:flex-start; }
.feature-seal { width:46px; height:52px; flex-shrink:0; margin-top:1px; border:1px solid #ae9260; display:grid; place-items:center; background:linear-gradient(145deg,#2d2f29,#091018); clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px); }
.feature-seal .ui-icon { width:30px; height:30px; color:#f2d191; }
.adventure-card h2 { font:600 clamp(14px,1.3vw,20px)/1.35 var(--display); text-transform:uppercase; color:#ebca89; margin:0 0 6px; letter-spacing:.025em; }
.adventure-card p { font:400 14px/1.35 "EB Garamond",Georgia,serif; color:#c2cbdc; margin:0; }
.adventure-link { display:flex; justify-content:center; gap:15px; align-items:center; margin-top:16px; padding:10px 0 13px; border-top:1px solid #9c805440; color:#d9be87; font:600 9px/1.4 var(--display); text-transform:uppercase; letter-spacing:.08em; }
.adventure-link>span { font-size:20px; line-height:1; }
.adventure-card:hover { transform:translateY(-6px); border-color:#f1ce88; box-shadow:inset 0 0 0 3px #070d16,inset 0 0 0 4px #b48e493b,0 15px 35px #000b,0 0 25px #cfaa5629; }
.adventure-card:hover .adventure-art { filter:brightness(1.18); }
.world-divider { display:flex; align-items:center; justify-content:center; gap:26px; margin:48px 0 68px; }
.world-divider>span { width:140px; height:1px; background:linear-gradient(90deg,transparent,#b79961); }
.world-divider>span:last-child { transform:rotate(180deg); }
.world-divider p { color:#bba67e; font:500 10px var(--display); letter-spacing:.16em; text-transform:uppercase; text-align:center; }
.economy-section { display:grid; grid-template-columns:1fr 1.15fr; gap:95px; align-items:center; padding:0 26px 68px; }
.economy-intro h2 { color:#eee6d6; font:500 34px/1.3 var(--display); margin:16px 0 20px; letter-spacing:-.02em; }
.economy-intro h2 em { color:var(--gold); font-style:normal; }
.economy-intro>p { max-width:440px; color:#aab6c7; font-size:13px; line-height:1.9; }
.text-link { display:inline-flex; align-items:center; gap:20px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-top:26px; padding-bottom:6px; border-bottom:1px solid #5e5139; }
.text-link .ui-icon { width:18px; height:18px; }
.economy-features { display:flex; flex-direction:column; gap:22px; }
.economy-features article { display:flex; align-items:flex-start; gap:20px; padding-bottom:20px; border-bottom:1px solid #26313e; }
.economy-features article:last-child { padding-bottom:0; border:0; }
.economy-icon { display:grid; place-items:center; width:50px; height:54px; border:1px solid #63563e; color:#d9b777; flex-shrink:0; background:linear-gradient(135deg,#27271f70,#0e1722); }
.economy-icon .ui-icon { width:27px; height:27px; }
.economy-features h3 { font:600 15px var(--display); color:#ead7b1; margin-bottom:6px; }
.economy-features p { color:#a7b1c1; font-size:12px; max-width:430px; line-height:1.7; }
.economy-features a { display:inline-block; font-size:10px; margin-top:8px; color:#d7b87c; }
.economy-features a span { margin-left:10px; }
.community-section { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; border-top:1px solid #2c333d; padding:58px 26px 50px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-heading h2 { font:500 29px var(--display); color:#e7d8b9; margin-top:9px; }
.small-diamond { color:#d1ad6a; font-size:28px; }
.news-item { display:flex; align-items:center; gap:20px; border-top:1px solid #2a313c; padding:19px 0; transition:background .2s; }
.news-item:hover { background:#17233250; }
.news-date { min-width:46px; text-align:center; }
.news-date b { display:block; font:500 28px/1 var(--display); color:#d9bd88; }
.news-date small { display:block; margin-top:5px; color:#97a2b4; font-size:8px; letter-spacing:.12em; }
.news-copy { display:flex; flex-direction:column; gap:5px; }
.news-copy strong { color:#d9dfe6; font-size:13px; font-weight:500; }
.news-copy>span { font-size:11px; color:#95a4b7; }
.news-arrow { margin-left:auto; color:#c5aa77; }
.join-panel { position:relative; text-align:center; padding:30px 34px; border:1px solid #67553a; background:radial-gradient(ellipse at 50% 0,#30435b45,transparent 70%),linear-gradient(145deg,#111c2a,#091019); box-shadow:inset 0 0 0 5px #090f1770,inset 0 0 0 6px #8a79552b; }
.join-panel>.brand-emblem { height:38px; width:30px; margin-bottom:10px; }
.join-panel h2 { font:500 23px/1.4 var(--display); color:#e7d7b8; margin:12px 0; }
.join-panel p { color:#a8b4c6; font-size:12px; max-width:325px; margin:0 auto 20px; }
.join-secondary { display:block; color:#a5b1c1; font-size:10px; margin-top:14px; }
.quick-access { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #2b3340; border-bottom:1px solid #2b3340; margin-bottom:50px; }
.quick-access a { display:flex; align-items:center; gap:13px; padding:23px 20px; font-size:11px; color:#c2cad5; border-right:1px solid #2b3340; transition:background .2s; }
.quick-access a:last-child { border:0; }
.quick-access a:hover { background:#152031; color:#ebcb92; }
.quick-access a>span:last-child { margin-left:auto; color:#c8a76e; }
.quick-access img { width:24px; height:24px; object-fit:contain; }
.site-footer { padding-bottom:24px; }
.footer-signature { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 0 34px; }
.footer-signature>span { color:#a7a59f; font:500 9px var(--display); text-transform:uppercase; letter-spacing:.1em; }
.footer-brand { position:relative; }
.footer-brand .brand-emblem { height:45px; width:33px; }
.footer-brand .brand-type strong { font-size:22px; }
.footer-brand .brand-type small { font-size:7px; }
.footer-bottom { display:flex; align-items:center; gap:24px; border-top:1px solid #262e37; padding-top:20px; color:#7f8c9e; font-size:10px; }
.footer-bottom small { font-size:10px; }
.footer-bottom nav { display:flex; gap:24px; margin-left:auto; }
.footer-bottom nav a { color:#9ca8b8; }
.footer-bottom nav a:hover { color:var(--gold); }
.back-top { width:30px; height:30px; border:1px solid #49463a; display:grid; place-items:center; font-size:16px; }
/* Existing forms, rankings, payment screens and admin share the same theme. */
.is-interior { background:linear-gradient(180deg,#070c14aa,#070c14 750px),url('/img/evolution/hero-aden.webp') center 30%/cover fixed !important; }
.is-interior .page { background:linear-gradient(90deg,#070c146b,#070c1444,#070c1488); }
.is-interior main { padding-bottom:45px; }
.evolution .account-bar { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:24px; padding:0; }
.evolution .account-bar .ab-name { margin-right:auto; color:#e7c487; font-size:13px; }
.evolution .account-bar .btn { font-size:9px; padding:8px 12px; min-height:36px; }
.evolution .pagehead { padding:42px 0 18px; }
.evolution .pagehead h1 { font-size:clamp(27px,3vw,43px); color:#f2d9a6; letter-spacing:-.01em; }
.evolution .pagehead>.eyebrow { margin-bottom:12px; }
.evolution .pagehead p { color:#bac5d5; font-size:14px; line-height:1.85; max-width:710px; }
.evolution section.section { padding:32px 0; }
.evolution .section h2 { font-size:21px; letter-spacing:.02em; padding-bottom:16px; border-color:#82653e66; }
.evolution .card, .evolution .panel, .evolution .coinbox, .evolution .feat { background:linear-gradient(140deg,rgba(22,34,49,.95),rgba(8,15,25,.96)); border-color:#766044; box-shadow:inset 0 0 0 3px #0a101855,inset 0 0 0 4px #ab8c4f17,0 10px 30px #0004; }
.evolution .card::before, .evolution .card::after, .evolution .panel::before, .evolution .panel::after { width:5px; height:5px; top:-3px; background:#b5935a; }
.evolution .card p, .evolution .card li { line-height:1.8; font-size:13px; }
.evolution .card h3 { line-height:1.5; }
.evolution .section .lead { font-size:15px; line-height:1.9; }
.evolution .section-intro { max-width:900px; color:#adbcd0; font-size:14px; margin-bottom:25px; }
.evolution .card.feature { align-items:flex-start; text-align:left; padding:28px; }
.evolution .card.feature img { width:38px; height:38px; object-fit:contain; margin-bottom:18px; }
.evolution .grid3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:22px; }
.evolution .rankgrid { grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); }
.evolution .rankgrid .card { overflow:hidden; }
.evolution .card:has(>table), .evolution .card:has(>.rank) { overflow:hidden; }
.evolution .card>table, .evolution .card>.rank { display:block; max-width:100%; overflow-x:auto; }
.evolution .rank td { font-size:12px; border-bottom-color:#263749; padding:14px 10px; }
.evolution .rank th { font-size:9px; }
.evolution .rank .cl { font-size:11px; }
.evolution .rank tr:hover td { background:#41567120; }
.evolution .rank .nm { color:#e1d6bb; }
.evolution .rank .tag { letter-spacing:.05em; }
.evolution .classpick select { max-width:100%; min-width:0; background:#101b29; border-color:#6e5c3f; padding:12px; }
.evolution .btn { position:relative; overflow:hidden; font-family:var(--display); min-height:44px; letter-spacing:.06em; border-radius:0; transition:transform .18s,box-shadow .2s,filter .2s,border-color .2s; }
.evolution .btn-primary { color:#221906; background:linear-gradient(180deg,#f0d298,#d1ab68 65%,#b9904e); border-color:#b89157; font-size:11px; padding:13px 23px; box-shadow:inset 0 1px #fff4c980,0 3px 15px #0005; }
.evolution .btn-primary:hover { color:#181200; filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 0 24px #ddb26440; }
.evolution .btn-ghost { color:#d9c6a1; background:linear-gradient(180deg,#1b2735,#0c1420); border-color:#746245; font-size:10px; padding:12px 20px; }
.evolution .btn-ghost:hover { border-color:#d8b779; color:#f4dfb4; transform:translateY(-2px); box-shadow:0 0 20px #d7b66e25; }
.evolution button:disabled, .evolution .btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; filter:none; transform:none; box-shadow:none; }
.evolution .form-wrap { max-width:485px; margin:65px auto 90px; }
.evolution .form-wrap h1 { font-size:27px; margin-bottom:26px; }
.evolution .form-wrap .card { padding:32px; }
.evolution .field { margin-bottom:20px; }
.evolution .field label { font:600 10px/1.5 var(--body); letter-spacing:.09em; color:#d7c297; margin-bottom:9px; }
.evolution .field input { padding:13px 14px; font:14px var(--body); background:#070f1b; color:#e6eaf0; border-color:#354455; min-height:47px; border-radius:0; }
.evolution .field input:focus { border-color:#c9a566; box-shadow:0 0 0 3px #c3a16d17; }
.evolution input::placeholder { color:#7f8fa4; }
.evolution .hint { font-size:11px; color:#97a8bb; }
.evolution .form-foot { font-size:12px; }
.evolution .charrow { background:#0b1523e8; border-color:#324153; flex-wrap:wrap; }
.evolution .charrow .name { font-size:14px; }
.evolution .charrow .pvp { gap:14px; }
.evolution .charrow .meta { font-size:11px; }
.evolution .coinbox { gap:8px; padding:22px; }
.evolution .coinbox b { font-size:32px; }
.evolution .coinpack b { font-size:36px; }
.evolution .coinpacks { grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.evolution .coinpack span { color:#baa67f; }
.evolution .donate-copiaecola { background:#07101e; border-color:#39495a; }
.evolution .donate-qr img { max-width:100%; height:auto; }
.evolution .donate-values a { background:#111d2b; border-color:#4c4a41; }
.evolution .donate-values a.active { background:#cfac6f20; border-color:#d5b171; }
.evolution .download-banner { max-height:390px; object-fit:cover; object-position:center; border:1px solid #a28555; box-shadow:0 12px 45px #0009; }
.step-number { font:500 35px/1 var(--display); color:#b99c65; display:block; margin-bottom:18px; }
.journey-steps .card { padding:28px; }
.info-economy .card { background:linear-gradient(145deg,#142434ed,#090f19f5); }
/* Press feedback is also used by keyboard activation; audio never blocks navigation. */
.epic-button:active, .epic-secondary:active, .evolution .btn:active, .header-account:active { transform:translateY(1px) scale(.98); }
.fx-active { animation:press-flash .35s ease-out; }
@keyframes press-flash { 0% { filter:brightness(1.5); } 100% { filter:brightness(1); } }
@media (min-width:1650px) { .side-motto { display:block; } .epic-hero { min-height:650px; } .hero-copy { padding-top:38px; } }
@media (max-width:1280px) {
 .evolution .inner,.home-content,.header-inner,.hero-container,.site-footer { width:calc(100% - 64px); }
 .main-nav { gap:22px; } .brand-type strong { font-size:24px; } .header-inner { gap:18px; }
 .adventure-card { padding:148px 18px 0; } .adventure-info { gap:10px; } .feature-seal { width:37px; height:45px; }
 .adventure-card h2 { font-size:15px; } .economy-section { gap:55px; }
}
@media (max-width:1100px) {
 .header-inner { min-height:82px; flex-wrap:wrap; gap:12px; }
 .brand { margin-right:auto; } .brand-emblem { width:34px; height:48px; }
 .menu-toggle { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#111b27; color:#d8bf8f; border:1px solid #776346; font-size:10px; min-height:42px; order:3; }
 .menu-bars { width:15px; height:10px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; position:relative; }
 .menu-bars::after { content:""; position:absolute; left:0; right:0; top:4px; border-top:1px solid currentColor; }
 .main-nav { display:none; order:4; flex-basis:100%; align-self:auto; gap:0; padding:5px 0 18px; border-top:1px solid #3e3b31; }
 .main-nav.is-open { display:flex; flex-wrap:wrap; }
 .nav-logout { flex:1 0 30%; } .nav-logout button { padding:14px 16px; min-height:46px; width:100%; justify-content:flex-start; }
 .main-nav a { min-height:46px; padding:14px 16px; flex:1 0 30%; }
 .main-nav a[aria-current]::before,.main-nav a[aria-current]::after { display:none; }
 .main-nav a[aria-current] { background:#c4a16812; }
 .hero-copy h1 { font-size:47px; } .hero-copy { max-width:630px; } .hero-art { background-position:61% center; }
 .hero-art::after { background:linear-gradient(90deg,#07101ad9,#07101a70 45%,transparent 90%); }
 .hero-copy>p { max-width:405px; } .hero-copy h2 { font-size:24px; }
 .adventure-grid { gap:14px; }
 .adventure-card { padding:142px 16px 0; min-height:312px; }
 .adventure-info { display:block; } .feature-seal { position:absolute; top:91px; width:38px; height:42px; }
 .adventure-card h2 { font-size:15px; min-height:40px; } .adventure-card p { font-size:14px; }
 .economy-section { gap:40px; padding-inline:0; } .economy-intro h2 { font-size:29px; }
 .community-section { gap:35px; padding-inline:0; } .quick-access a { padding:20px 13px; font-size:10px; }
}
@media (max-width:760px) {
 .evolution .inner,.home-content,.header-inner,.hero-container,.site-footer { width:calc(100% - 40px); }
 .header-inner { min-height:76px; gap:8px; } .brand { gap:8px; }
 .brand-type strong { font-size:21px; } .brand-type small { font-size:7px; letter-spacing:.22em; }
 .brand-emblem { width:29px; height:42px; }
 .header-tools { gap:3px; } .header-account { width:40px; min-height:40px; padding:10px; justify-content:center; } .header-account>span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
 .menu-toggle { width:40px; min-height:40px; padding:10px; justify-content:center; } .menu-toggle>span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
 .sound-toggle { min-width:36px; width:36px; padding:8px; } .sound-toggle .ui-icon { width:19px; }
 .hero-container { padding-top:20px; } .epic-hero { min-height:680px; }
 .hero-art { top:-76px; bottom:-70px; background-position:61% top; background-size:auto 690px; background-repeat:no-repeat; background-color:#070c14; opacity:.8; }
 .hero-art { animation-name:hero-drift-mobile; }
 @keyframes hero-drift-mobile { 0% { transform:scale(1.01); background-position:61% top; } 100% { transform:scale(1.06); background-position:58% 8%; } }
 .hero-art::after { background:linear-gradient(180deg,#070c1422,#070c14a8 28%,#070c14b3 62%,#070c14),linear-gradient(90deg,#070c1480,transparent); }
 .hero-topline { align-items:flex-start; flex-direction:column; gap:16px; }
 .hero-topline .eyebrow { font-size:8px; gap:10px; }
 .live-status { padding:8px 13px; gap:10px; }
 .live-status strong { font-size:10px; } .live-status small { display:none; } .status-orb { width:7px; height:7px; }
 .hero-copy { padding-top:115px; }
 .hero-copy h1 { font-size:clamp(30px,6.8vw,49px); letter-spacing:-.055em; line-height:1.15; }
 .hero-copy h2 { font-size:22px; max-width:390px; margin-top:12px; line-height:1.2; }
 .ornament { margin:20px 0; }
 .hero-copy>p { font-size:17px; line-height:1.45; max-width:430px; color:#c1ccdb; }
 .hero-actions { flex-wrap:wrap; gap:15px; margin-top:24px; }
 .epic-button { min-width:0; flex:1 1 220px; font-size:22px; min-height:56px; gap:22px; }
 .epic-secondary { flex:1 1 165px; min-height:50px; font-size:10px; }
 .hero-notes { gap:14px; margin-top:23px; }
 .hero-notes>span { font-size:8px; }
 .hero-scroll { margin:25px 0 48px; font-size:8px; }
 .adventure-grid { grid-template-columns:1fr; gap:22px; margin-top:0; }
 .adventure-card { min-height:305px; padding:175px 24px 0; }
 .adventure-info { display:flex; gap:15px; } .feature-seal { position:static; width:45px; height:51px; }
 .adventure-card h2 { font-size:19px; min-height:0; } .adventure-card p { font-size:15px; }
 .adventure-link { font-size:10px; padding:12px 0 16px; margin-top:20px; }
 .world-divider { gap:14px; margin:40px 0; } .world-divider p { font-size:8px; letter-spacing:.1em; } .world-divider>span { width:45px; }
 .economy-section { grid-template-columns:1fr; gap:32px; padding-bottom:44px; } .economy-intro h2 { font-size:29px; } .economy-intro>p { max-width:none; }
 .economy-features { gap:20px; } .economy-features p { max-width:none; }
 .community-section { grid-template-columns:1fr; padding-top:40px; gap:30px; padding-bottom:35px; }
 .join-panel { padding:28px 22px; } .quick-access { grid-template-columns:1fr 1fr; margin-bottom:30px; }
 .quick-access a { padding:19px 12px; font-size:10px; } .quick-access a:nth-child(2) { border-right:0; } .quick-access a:nth-child(-n+2) { border-bottom:1px solid #2b3340; }
 .quick-access img { width:20px; height:20px; }
 .footer-signature { justify-content:center; padding:10px 0 25px; } .footer-signature>span { display:none; } .footer-brand { margin:0; }
 .footer-bottom { flex-wrap:wrap; gap:16px; justify-content:center; text-align:center; } .footer-bottom small { width:100%; font-size:9px; } .footer-bottom nav { margin:0; gap:15px; font-size:9px; }
 .is-interior { background-attachment:scroll !important; background-size:auto 1000px !important; background-repeat:no-repeat !important; background-color:#070c14 !important; }
 .evolution .account-bar { justify-content:center; gap:8px; margin-top:20px; }
 .evolution .pagehead { padding:32px 0 12px; }
 .evolution .pagehead p { font-size:13px; }
 .evolution .form-wrap { margin:40px auto 65px; padding:0 20px; }
 .evolution .form-wrap .card { padding:24px; }
 .evolution .grid3,.evolution .rankgrid { grid-template-columns:1fr; }
 .evolution .coinhead { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); gap:12px; }
 .evolution .coinhead .coinbox:last-child:nth-child(3) { grid-column:1 / -1; }
 .evolution .coinpacks { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
 .evolution .coinpack { padding:20px 10px; }
 .evolution .coinpack .btn { width:100%; padding:10px 7px; font-size:9px; }
 .evolution .charrow { padding:14px; gap:10px; } .evolution .charrow .pvp { width:100%; margin-left:0; justify-content:space-between; padding-top:8px; border-top:1px solid #334151; }
 .evolution .donate-box { gap:22px; } .evolution .donate-copiaecola { max-width:100%; }
 .evolution .card { min-width:0; padding:20px; }
 .evolution .card:has(>table),.evolution .card:has(>.rank) { overflow:hidden; }
 .evolution form[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
 .evolution .download-banner { margin-top:20px; min-height:180px; }
 .evolution .section h2 { font-size:19px; }
}
@media (max-width:380px) {
 .evolution .inner,.home-content,.header-inner,.hero-container,.site-footer { width:calc(100% - 28px); }
 .brand-type strong { font-size:18px; } .brand-type small { font-size:6px; } .brand-emblem { width:24px; }
 .header-inner { gap:5px; } .sound-toggle { width:30px; min-width:30px; padding:6px; } .header-account,.menu-toggle { width:34px; padding:8px; }
 .hero-copy h1 { font-size:29px; } .hero-actions { flex-direction:column; align-items:stretch; } .epic-button,.epic-secondary { flex-basis:auto; }
 .adventure-card { padding-inline:18px; } .adventure-card h2 { font-size:17px; }
 .quick-access { grid-template-columns:1fr; } .quick-access a { border:0; border-bottom:1px solid #2b3340; }
 .evolution .coinpacks { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
 .adventure-card:hover,.epic-button:hover,.epic-secondary:hover,.evolution .btn:hover { transform:none; }
 .hero-art,.hero-art::before { animation:none !important; }
}


/* ---- Capa animada (opcional): so aparece se o video existir ---- */
.hero-art .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; z-index:-1; }
@media (max-width:768px) { .hero-art .hero-video { display:none; } }
@media (prefers-reduced-motion:reduce) { .hero-art { animation:none; } }

/* Cards com placa: a arte ja traz o titulo, entao aparece inteira, sem corte nem degrade por cima. */
.adventure-card--plaque { padding:0; justify-content:flex-start; background:#0b0b0b; }
.adventure-card--plaque::after { display:none; }
.adventure-card--plaque .adventure-art { position:static; width:100%; height:auto; aspect-ratio:1400/788; object-fit:cover; display:block; }
.adventure-card--plaque .adventure-info { padding:16px 22px 0; }
.adventure-card--plaque p { font-size:15px; line-height:1.45; }
.adventure-card--plaque .adventure-link { margin:auto 22px 0; padding:12px 0 14px; }
@media (max-width:1100px) { .adventure-card--plaque { padding:0; } .adventure-card--plaque .adventure-info { display:block; padding:14px 16px 0; } }
@media (max-width:768px) { .adventure-card--plaque { padding:0; min-height:0; } }
/* Painel lateral da home virou arte inteira ("Tempo e Dinheiro"), sem texto por cima. */
.join-panel--art { display:block; padding:0; background:#050608; overflow:hidden; transition:border-color .25s,box-shadow .25s; }
.join-panel--art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.join-panel--art:hover { border-color:#e6c581; box-shadow:inset 0 0 0 5px #090f1770,inset 0 0 0 6px #8a79552b,0 0 25px #cfaa5629; }
@media (max-width:768px) { .join-panel--art { padding:0; aspect-ratio:1400/788; } }
@media (max-width:768px) { .hero-container { padding-inline:16px; } }
/* Pagina Informacoes: placas dos sistemas, banner da economia e perguntas frequentes. */
.evolution .info-plaque { padding:0; overflow:hidden; align-items:stretch; text-align:left; }
.evolution .info-plaque>img { display:block; width:100%; height:auto; aspect-ratio:1400/788; object-fit:cover; background:#0b0b0b; }
.info-plaque-body { padding:22px 24px 26px; }
.evolution .info-plaque h3 { font:600 20px/1.3 var(--display); text-transform:uppercase; letter-spacing:.03em; color:#ebca89; margin:0 0 6px; }
.info-chamada { font:500 17px/1.4 "EB Garamond",Georgia,serif; color:#e2e2e6; margin:0 0 12px; }
.evolution .info-plaque h4 { font:600 10px/1.6 var(--display); letter-spacing:.18em; text-transform:uppercase; color:#c3a977; margin:18px 0 6px; }
.howto { margin:0; padding-left:20px; color:#c2cbdc; font:400 14px/1.7 "EB Garamond",Georgia,serif; }
.howto li { padding-left:4px; }
.howto li::marker { color:#e8b55f; font-weight:700; }
.info-banner { margin:0 0 28px; border:1px solid #a08758; background:#050608; box-shadow:inset 0 0 0 3px #070d16,inset 0 0 0 4px #b48e493b,0 12px 36px #0007; overflow:hidden; }
.info-banner img { display:block; width:100%; height:auto; }
.info-nota { font:400 13px/1.6 "EB Garamond",Georgia,serif; color:#8d97a8; max-width:760px; margin-top:14px; border-left:2px solid #6d5a3c; padding-left:12px; }
.faq { display:grid; gap:10px; max-width:880px; }
.faq details { border:1px solid #766044; background:linear-gradient(140deg,rgba(22,34,49,.95),rgba(8,15,25,.96)); box-shadow:inset 0 0 0 3px #0a101855; }
.faq summary { cursor:pointer; list-style:none; padding:16px 44px 16px 20px; font:600 15px/1.4 var(--display); color:#e7d7b8; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#e8b55f; font-size:22px; line-height:1; }
.faq details[open] summary::after { content:"‘2"; }
.faq details p { margin:0; padding:0 20px 18px; color:#c2cbdc; font:400 15px/1.65 "EB Garamond",Georgia,serif; }
@media (max-width:768px) { .info-plaque-body { padding:18px 16px 22px; } }
/* Moeda no cabecalho da pagina L2 Coins; grade de 2 colunas e tabela do enchant. */
.pagehead--coin { display:grid; grid-template-columns:150px 1fr; column-gap:28px; align-items:center; text-align:left; }
.pagehead--coin .coin-hero { grid-row:1 / span 2; width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 0 18px #1f8cff80) drop-shadow(0 6px 10px #0009); }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.howto-list { margin:14px 0 0; padding-left:18px; color:#a8b4c6; font:400 14px/1.7 "EB Garamond",Georgia,serif; }
.howto-list li::marker { color:#e8b55f; }
.enchant-table { width:100%; border-collapse:collapse; margin-top:12px; font:400 14px/1.5 "EB Garamond",Georgia,serif; }
.enchant-table th { text-align:left; font:600 10px/1.6 var(--display); letter-spacing:.14em; text-transform:uppercase; color:#c3a977; padding:6px 8px; border-bottom:1px solid #6d5a3c; }
.enchant-table td { padding:7px 8px; color:#e2e2e6; border-bottom:1px solid #2c333d; }
.enchant-table td:last-child, .enchant-table th:last-child { text-align:right; color:#f2ce89; }
@media (max-width:768px) { .grid2 { grid-template-columns:1fr; } .pagehead--coin { grid-template-columns:1fr; text-align:center; } .pagehead--coin .coin-hero { grid-row:auto; margin:0 auto 12px; width:120px; height:120px; } }
.bonus-callout { margin:0 0 18px; padding:12px 16px; border:1px solid #6e9eb9; background:linear-gradient(120deg,#0b1f33,#081320); color:#cfe6ff; font:400 15px/1.5 "EB Garamond",Georgia,serif; box-shadow:inset 0 0 0 3px #081729,0 0 18px #1283e838; }
.bonus-callout b { color:#9fd0ff; font-family:var(--display); font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.tag-ok { color:#8de7a4; font:600 11px var(--display); letter-spacing:.06em; text-transform:uppercase; }
.tag-warn { color:#e8bf8c; font:600 11px var(--display); letter-spacing:.06em; text-transform:uppercase; }
.tag-dq { color:#ff8a8a; font:600 11px var(--display); letter-spacing:.06em; text-transform:uppercase; }
tr.is-dq td { opacity:.55; }