/* ==========================================================================
   AVATAR: ECLIPSE — the design, ported verbatim from the reference prototype
   --------------------------------------------------------------------------
   This file is generated by .freebuff/port-eclipse.py from avatar_eclipse.html.
   It is the ONLY stylesheet of the theme: the page structure, class names and
   rules below are exactly the ones the design was drawn with, so editing the
   design means editing this file (or the reference and re-running the script).

   MyAAC's own widgets (forms, tables, messages, popups, the account box and
   the admin bar) are not part of the prototype: they are dressed separately in
   css/eclipse-myaac.css, which loads right after this file.
   ========================================================================== */

:root{
  --gold: #65bce8;
  --gold-bright: #bdeeff;
  --gold-dim: #789aaa;
  --bg-black: #071019;
  --bg-panel: #0d1821;
  --border-gold: rgba(101,188,232,0.30);
  --text-muted: #b9c9d4;
  --text-dim: #718692;
  --bg-castle: linear-gradient(145deg, #07131f 0%, #102c40 45%, #091019 100%);
  --bg-map: radial-gradient(circle at 50% 42%, rgba(112,212,235,.20), transparent 22%), radial-gradient(circle at 35% 28%, rgba(109,226,211,.15), transparent 20%), radial-gradient(circle at 68% 65%, rgba(121,157,255,.15), transparent 26%), linear-gradient(145deg,#0a1823,#102a38 55%,#08121a);
  --bg-forest: radial-gradient(circle at 25% 40%, rgba(104,211,203,.18), transparent 24%), radial-gradient(circle at 72% 55%, rgba(99,174,228,.16), transparent 28%), linear-gradient(145deg,#0a1a22,#102b32 55%,#09141a);
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  background:#070b12;
  color:var(--text-muted);
  font-family:'EB Garamond', serif;
  min-height:100%;
  overflow-x:hidden;
}

::selection{background:var(--gold-dim); color:#000;}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#071019;}
::-webkit-scrollbar-thumb{background:#3a2f1a; border-radius:5px;}

/* ================= INTRO / LOADING SCREEN ================= */
#intro{
  position:fixed; inset:0; z-index:9999;
  background:#070b12;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
#intro::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,4,3,.28), rgba(5,4,3,.82)),
    radial-gradient(ellipse at 50% 42%, transparent 20%, rgba(0,0,0,.78) 100%),
    var(--bg-castle) center/cover no-repeat;
  filter:saturate(.55) sepia(.18) brightness(.62);
  transform:scale(1.03);
  z-index:-3;
}
#intro::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(4,3,2,.8), transparent 25%, transparent 75%, rgba(4,3,2,.8)),
    var(--bg-map) center/cover no-repeat;
  opacity:.075;
  mix-blend-mode:screen;
  z-index:-2;
  pointer-events:none;
}
#intro.hidden{opacity:1; visibility:visible; pointer-events:none;}

.castle-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(189,238,255,.08), transparent 28%),
    linear-gradient(180deg, transparent 0 55%, rgba(0,0,0,.55));
  z-index:-1;
}
.castle-silhouette{display:none;}
.intro-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 18%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
  z-index:3;
}
.intro-divider-line{
  position:absolute; top:0; bottom:0; left:50%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(101,188,232,.3), transparent);
  pointer-events:none;
  z-index:4;
}

.intro-door{
  position:absolute;
  top:0; bottom:0;
  width:50.2%;
  z-index:5;
  background:
    linear-gradient(180deg, rgba(9,7,5,.9), rgba(3,2,2,.97)),
    var(--bg-map) center/cover no-repeat;
  background-blend-mode:normal, soft-light;
  border-color:rgba(101,188,232,.18);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1), box-shadow 1.15s ease;
  will-change:transform;
}
.intro-door::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.75), transparent 28%, transparent 72%, rgba(0,0,0,.75)),
    repeating-linear-gradient(0deg, transparent 0 56px, rgba(101,188,232,.035) 57px, transparent 58px);
  opacity:.9;
}
.intro-door.left{
  left:0;
  border-right:1px solid rgba(101,188,232,.2);
  box-shadow:inset -24px 0 45px rgba(0,0,0,.7);
}
.intro-door.right{
  right:0;
  border-left:1px solid rgba(101,188,232,.2);
  box-shadow:inset 24px 0 45px rgba(0,0,0,.7);
}
#intro.opening .intro-door.left{
  transform:translateX(-105%);
  box-shadow:inset -24px 0 45px rgba(0,0,0,.35), 22px 0 50px rgba(0,0,0,.45);
}
#intro.opening .intro-door.right{
  transform:translateX(105%);
  box-shadow:inset 24px 0 45px rgba(0,0,0,.35), -22px 0 50px rgba(0,0,0,.45);
}
#intro.opening .intro-content{
  opacity:0;
  transform:scale(.96);
  transition:opacity .45s ease, transform .9s ease;
}
#intro.opening .intro-divider-line{opacity:0; transition:opacity .45s ease;}
#intro.opening .intro-vignette{opacity:.2; transition:opacity 1s ease;}

.stars{
  position:absolute; inset:0; pointer-events:none;
  contain:layout paint;
}
.star{
  position:absolute;
  width:2px; height:2px;
  background:var(--gold);
  border-radius:50%;
  opacity:0.6;
  animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:0.15;}
  50%{opacity:0.9;}
}

.intro-content{
  position:relative; z-index:7;
  padding:20px;
  animation:fadeInUp 1.4s ease;
}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}

.intro-title{
  font-family:'Cinzel Decorative', serif;
  font-weight:700;
  font-size:clamp(3rem, 10vw, 5.5rem);
  color:var(--gold-bright);
  text-shadow:0 0 25px rgba(189,238,255,0.55), 0 0 60px rgba(101,188,232,0.25);
  letter-spacing:2px;
  animation:glow 3.5s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{text-shadow:0 0 20px rgba(189,238,255,0.4), 0 0 45px rgba(101,188,232,0.2);}
  50%{text-shadow:0 0 35px rgba(189,238,255,0.75), 0 0 80px rgba(101,188,232,0.4);}
}

.intro-sub{
  font-family:'Cinzel', serif;
  letter-spacing:10px;
  font-size:1.1rem;
  color:var(--gold);
  margin-top:6px;
}
.intro-sub .dash{color:var(--text-dim); margin:0 10px;}

.intro-tagline{
  margin-top:26px;
  font-style:italic;
  letter-spacing:4px;
  font-size:0.95rem;
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap;
}
.intro-tagline:empty{
  min-height:1.2em;
}

.intro-tagline .diamond{
  color:var(--gold);
  font-size:0.8rem;
  transform:rotate(45deg);
  display:inline-block;
  border:1px solid var(--gold);
  width:8px; height:8px;
}

.enter-btn{
  margin-top:42px;
  display:inline-block;
  background:linear-gradient(180deg, #9fe2f5, #4e9abb);
  color:#071521;
  border:1px solid #477d9b;
  font-family:'Cinzel', serif;
  font-weight:700;
  letter-spacing:4px;
  font-size:0.95rem;
  padding:16px 40px;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 4px 20px rgba(101,188,232,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.enter-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(101,188,232,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
}

.press-enter{
  margin-top:22px;
  font-family:'Cinzel', serif;
  letter-spacing:5px;
  font-size:0.75rem;
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; gap:14px;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.4;}
  50%{opacity:1;}
}


/* ============ CINEMATIC SITE ASSEMBLY ============ */
.build-item{
  opacity:0;
}
#site.site-building .build-item{
  will-change:transform,opacity,filter;
  animation:avatarAssemble .72s cubic-bezier(.2,.78,.25,1) forwards;
  animation-delay:var(--build-delay,0s);
  will-change:auto;
}
@keyframes avatarAssemble{
  0%{opacity:0;transform:translate3d(var(--build-x,0),var(--build-y,28px),0) scale(.965) rotate(var(--build-r,0deg));filter:blur(7px);}
  58%{opacity:1;filter:blur(0);}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:blur(0);}
}
@media (prefers-reduced-motion:reduce){
  .build-item,#site.site-building .build-item{opacity:1!important;animation:none!important;filter:none!important;transform:none!important;will-change:auto!important;}
}

/* Performance: let the browser skip paint work for off-screen cards without changing their layout. */
.news-item,.guild-card,.voc-card,.shop-card{
  content-visibility:auto;
  contain-intrinsic-size:auto 160px;
}

/* ================= MAIN SITE ================= */
#site{
  position:relative;
  min-height:100vh;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(8,6,4,.80), rgba(8,6,4,.94)),
    radial-gradient(ellipse at 50% 0%, rgba(40,32,18,.35), transparent 55%),
    var(--bg-castle) center top/cover fixed no-repeat;
}
#site::before{
  content:'';
  position:fixed; inset:0;
  background:
    linear-gradient(90deg, rgba(6,4,2,.78), transparent 25%, transparent 75%, rgba(6,4,2,.78)),
    var(--bg-map) center/cover fixed no-repeat;
  opacity:.075;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
#site::after{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 50% 35%, transparent 15%, rgba(0,0,0,.35) 72%, rgba(0,0,0,.78) 100%);
  pointer-events:none;
  z-index:0;
}
.parchment-overlay{
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,100,60,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120,100,60,0.04), transparent 40%);
  pointer-events:none;
  z-index:0;
}

/* Top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 30px;
  font-family:'Cinzel', serif;
  font-size:0.72rem;
  letter-spacing:2px;
  color:var(--text-dim);
  border-bottom:1px solid rgba(101,188,232,0.12);
  position:relative; z-index:20;
  flex-wrap:wrap;
  gap:10px;
}
.topbar .infinity{color:var(--gold-dim); margin-right:8px;}

.lang-select{
  position:relative;
}
.lang-btn{
  display:flex; align-items:center; gap:8px;
  background:transparent;
  border:1px solid var(--border-gold);
  color:var(--gold);
  font-family:'Cinzel', serif;
  letter-spacing:2px;
  font-size:0.72rem;
  padding:8px 14px;
  cursor:pointer;
  transition:background 0.2s ease;
}
.lang-btn:hover{background:rgba(101,188,232,0.08);}
.lang-btn .flag{font-size:1rem;}
.lang-btn .arrow{transition:transform 0.2s ease; margin-left:4px;}
.lang-btn.open .arrow{transform:rotate(180deg);}

.lang-dropdown{
  position:absolute; top:110%; right:0;
  background:#0b151d;
  border:1px solid var(--border-gold);
  min-width:170px;
  display:none;
  flex-direction:column;
  z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
}
.lang-dropdown.show{display:flex;}
.lang-dropdown div{
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  font-size:0.72rem;
  letter-spacing:2px;
  cursor:pointer;
  color:var(--text-muted);
  transition:background 0.2s ease, color 0.2s ease;
}
.lang-dropdown div:hover{background:rgba(101,188,232,0.1); color:var(--gold-bright);}
.lang-dropdown div.active{background:rgba(101,188,232,0.15); color:var(--gold-bright);}

/* Hero header */
.hero{
  text-align:center;
  padding:60px 20px 30px;
  position:relative; z-index:5;
}
.logo-title{
  font-family:'Cinzel Decorative', serif;
  font-weight:700;
  font-size:clamp(2.6rem, 7vw, 4.2rem);
  color:var(--gold-bright);
  text-shadow:0 0 30px rgba(189,238,255,0.35);
  letter-spacing:1px;
  cursor:pointer;
}
.logo-sub{
  font-family:'Cinzel', serif;
  letter-spacing:12px;
  color:var(--gold);
  font-size:1rem;
  margin-top:4px;
}
.logo-sub .dash{color:var(--text-dim); margin:0 10px;}
.logo-tagline{
  margin-top:16px;
  font-style:italic;
  color:var(--text-dim);
  letter-spacing:3px;
  font-size:0.85rem;
  position:relative;
  display:inline-block;
}
.logo-tagline:empty{
  min-height:1em;
  width:1px;
}
.logo-tagline:empty::before,
.logo-tagline:empty::after{
  display:none;
}
.logo-tagline::before, .logo-tagline::after{
  content:'';
  position:absolute;
  top:50%;
  width:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-dim));
}
.logo-tagline::before{right:100%; margin-right:16px;}
.logo-tagline::after{left:100%; margin-left:16px; background:linear-gradient(90deg, var(--gold-dim), transparent);}

/* Nav */
.navbar{
  display:flex; justify-content:center; gap:40px;
  padding:18px 20px;
  border-top:1px solid rgba(101,188,232,0.15);
  border-bottom:1px solid rgba(101,188,232,0.15);
  flex-wrap:wrap;
  position:relative; z-index:10;
  background:rgba(10,8,6,0.4);
}
.navbar a{
  font-family:'Cinzel', serif;
  font-size:0.78rem;
  letter-spacing:3px;
  color:var(--text-muted);
  text-decoration:none;
  padding-bottom:6px;
  position:relative;
  transition:color 0.25s ease;
  white-space:nowrap;
}
.navbar a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width 0.3s ease;
}
.navbar a:hover, .navbar a.active{color:var(--gold-bright);}
.navbar a:hover::after, .navbar a.active::after{width:100%;}

 
.mobile-nav-toggle{
  display:none;
  width:100%;
  justify-content:space-between;
  align-items:center;
  background:transparent;
  color:var(--gold);
  border:0;
  font-family:'Cinzel',serif;
  letter-spacing:3px;
  font-size:.7rem;
  padding:12px 14px;
  cursor:pointer;
}
.mobile-nav-toggle .hamburger{font-size:1.25rem; line-height:1;}
@media (max-width:700px){
  .navbar{
    display:block;
    padding:0;
    margin:0 16px;
  }
  .mobile-nav-toggle{display:flex;}
  .navbar a{
    display:none;
    padding:14px 16px;
    border-top:1px solid rgba(101,188,232,.08);
  }
  .navbar.mobile-open a{display:block;}
  .navbar a::after{display:none;}
}


/* Page container */
.page{
  max-width:1200px;
  margin:0 auto;
  padding:50px 24px 100px;
  position:relative; z-index:5;
  display:none;
  animation:pageFade 0.5s ease;
}
.page::before{
  content:'';
  position:absolute;
  inset:20px 0 auto;
  height:180px;
  background:
    linear-gradient(180deg, rgba(8,6,4,.08), rgba(8,6,4,.95)),
    var(--bg-forest) center/cover no-repeat;
  opacity:.075;
  filter:sepia(.3) saturate(.65);
  pointer-events:none;
  z-index:-1;
  mask-image:linear-gradient(180deg, black, transparent);
}
.page.active{display:block;}
@keyframes pageFade{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

.page-title{
  text-align:center;
  font-family:'Cinzel Decorative', serif;
  font-size:2.4rem;
  color:var(--gold-bright);
  margin-bottom:8px;
}
.page-subtitle{
  text-align:center;
  font-family:'Cinzel', serif;
  letter-spacing:4px;
  font-size:0.75rem;
  color:var(--text-dim);
  margin-bottom:50px;
  position:relative;
  display:block;
}
.page-subtitle::before, .page-subtitle::after{
  content:'———————';
  color:var(--gold-dim);
  opacity:0.5;
  margin:0 14px;
  letter-spacing:2px;
}


/* ============ HOME EXPLORATION MODULES ============ */
.minimap-panel{padding-bottom:18px;}
.minimap-frame{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid rgba(101,188,232,.26);
  background:#10202a;
  box-shadow:inset 0 0 35px rgba(0,0,0,.65);
}
.minimap-frame img{
  width:100%; height:100%; display:block; object-fit:cover;
  filter:sepia(.62) saturate(.72) brightness(.68) contrast(1.12);
  transform:scale(1.02);
}
.minimap-vignette{position:absolute;inset:0;background:radial-gradient(circle,transparent 42%,rgba(5,4,2,.68) 100%),linear-gradient(180deg,rgba(101,188,232,.08),rgba(0,0,0,.22));pointer-events:none;}
.map-marker{position:absolute;width:10px;height:10px;border:1px solid #c8f3ff;background:#4d9ab4;border-radius:50%;box-shadow:0 0 0 5px rgba(101,188,232,.12),0 0 14px rgba(101,188,232,.8);}
.marker-a{left:58%;top:47%;}.marker-b{left:72%;top:58%;}
.map-compass{position:absolute;right:10px;top:10px;width:27px;height:27px;border:1px solid rgba(101,188,232,.45);display:flex;align-items:center;justify-content:center;font:700 .65rem 'Cinzel',serif;color:var(--gold-bright);background:rgba(12,8,4,.62);}
.minimap-caption{display:flex;justify-content:space-between;gap:10px;padding:12px 2px 4px;font: .61rem 'Cinzel',serif;letter-spacing:1.5px;color:var(--text-dim);}
.map-status{color:var(--gold);}.map-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6dd6c4;box-shadow:0 0 8px rgba(140,170,97,.8);margin-right:4px;}
.map-credit{font-size:.58rem;color:rgba(158,181,193,.5);font-style:italic;margin-top:8px;}
.location-card{padding:14px 0 4px;border-left:2px solid rgba(101,188,232,.4);padding-left:14px;}
.location-name{font-family:'Cinzel',serif;color:var(--gold-bright);font-size:.9rem;letter-spacing:1.5px;}.location-meta{margin-top:7px;font-size:.62rem;color:var(--text-dim);letter-spacing:1.5px;}
.streamer-panel{padding-bottom:16px;}
.live-count{float:right;font-size:.58rem;letter-spacing:1px;color:#7abedc;}
.streamer-stage{position:relative;height:235px;overflow:hidden;border:1px solid rgba(101,188,232,.24);background:#08131b;}
.streamer-slide{position:absolute;inset:0;opacity:0;transform:translateX(18px);transition:opacity .55s ease,transform .55s ease;pointer-events:none;}
.streamer-slide.active{opacity:1;transform:translateX(0);}
.streamer-art{position:absolute;inset:0;background-size:cover;background-position:center;filter:sepia(.35) saturate(.72) brightness(.62);}
.art-one{background-image:linear-gradient(135deg,rgba(24,18,11,.1),rgba(4,3,2,.6));}
.art-two{background-image:linear-gradient(135deg,rgba(24,18,11,.12),rgba(4,3,2,.62));}
.art-three{background-image:linear-gradient(135deg,rgba(24,18,11,.12),rgba(4,3,2,.68));}
.streamer-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(5,3,2,.9) 100%);}
.streamer-info{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;}.streamer-live{font:700 .62rem 'Cinzel',serif;letter-spacing:2px;color:#8bcfe8;}.streamer-live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6ec6df;box-shadow:0 0 8px rgba(182,95,76,.8);margin-right:5px;}
.streamer-info h3{font-family:'Cinzel Decorative',serif;color:#b9edff;font-size:1.15rem;margin:7px 0 4px;}.streamer-info p{font-size:.72rem;color:#c0d2dc;margin:0 0 10px;}.streamer-stats{display:flex;gap:15px;font-size:.61rem;letter-spacing:1px;color:#849ca8;}
.streamer-dots{display:flex;justify-content:center;gap:7px;margin-top:11px;}.streamer-dots button{width:7px;height:7px;padding:0;border:1px solid var(--gold-dim);border-radius:50%;background:transparent;cursor:pointer;}.streamer-dots button.active{background:var(--gold);box-shadow:0 0 8px rgba(101,188,232,.45);}
@media(max-width:900px){.minimap-frame{aspect-ratio:16/9}.streamer-stage{height:220px;}}

/* ============ HOME ============ */
.home-grid{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:24px;
}
@media (max-width:900px){
  .home-grid{grid-template-columns:1fr;}
}
.panel{
  border:1px solid var(--border-gold);
  /* Os blocos agora têm uma textura própria e discreta; o mapa fica apenas no fundo do site. */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(101,188,232,.055), transparent 58%),
    linear-gradient(135deg, rgba(28,22,15,.94), rgba(10,8,6,.97)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  background-blend-mode:screen, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(101,188,232,.055),
    inset 0 -18px 35px rgba(0,0,0,.20),
    0 10px 28px rgba(0,0,0,.18);
  padding:24px;
  margin-bottom:24px;
}
.panel-title{
  text-align:center;
  font-family:'Cinzel', serif;
  letter-spacing:3px;
  font-size:0.85rem;
  color:var(--gold);
  margin-bottom:20px;
  position:relative;
  padding-bottom:14px;
  border-bottom:1px solid rgba(101,188,232,0.15);
}
.panel-title .icon{margin-right:8px;}
.panel-list{list-style:none;}
.panel-list li{
  padding:10px 0;
  border-bottom:1px dotted rgba(101,188,232,0.08);
}
.panel-list li:last-child{border-bottom:none;}
.panel-list a{
  color:var(--text-muted);
  text-decoration:none;
  font-size:0.92rem;
  transition:color 0.2s ease, padding-left 0.2s ease;
  display:block;
}
.panel-list a::before{content:'›  '; color:var(--gold-dim);}
.panel-list a:hover{color:var(--gold-bright); padding-left:4px;}

.center-col .welcome-box{
  border:1px solid var(--border-gold);
  padding:36px 28px;
  text-align:center;
  margin-bottom:24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(101,188,232,0.06), transparent 70%),
    rgba(15,12,9,0.6);
}
.eyebrow{
  font-family:'Cinzel', serif;
  letter-spacing:5px;
  font-size:0.72rem;
  color:var(--gold-dim);
  margin-bottom:14px;
}
.welcome-box h2{
  font-family:'Cinzel Decorative', serif;
  color:var(--gold-bright);
  font-size:1.7rem;
  margin-bottom:16px;
}
.welcome-box p{
  font-style:italic;
  font-size:0.95rem;
  line-height:1.7;
  color:var(--text-muted);
  max-width:520px;
  margin:0 auto 26px;
}
.btn-gold{
  display:inline-block;
  background:linear-gradient(180deg, #9fe2f5, #4e9abb);
  color:#071521;
  border:1px solid #477d9b;
  font-family:'Cinzel', serif;
  font-weight:700;
  letter-spacing:3px;
  font-size:0.82rem;
  padding:14px 32px;
  cursor:pointer;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(101,188,232,0.4);}

.news-item{
  border:1px solid var(--border-gold);
  padding:22px;
  margin-bottom:20px;
  background:rgba(15,12,9,0.5);
}
.news-meta{
  font-family:'Cinzel', serif;
  font-size:0.68rem;
  letter-spacing:2px;
  color:var(--gold-dim);
  margin-bottom:10px;
}
.news-meta .tag{
  background:rgba(101,188,232,0.12);
  padding:3px 10px;
  margin-left:8px;
  border:1px solid var(--border-gold);
}
.news-item h3{
  font-family:'Cinzel', serif;
  color:var(--gold-bright);
  font-size:1.15rem;
  margin-bottom:10px;
}
.news-item p{
  font-size:0.9rem;
  line-height:1.6;
  color:var(--text-muted);
  margin-bottom:12px;
}
.news-footer{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.82rem;
  font-style:italic;
  color:var(--text-dim);
}
.news-footer a{color:var(--gold); text-decoration:none; font-style:normal; letter-spacing:1px;}

/* login panel */
.login-box input{
  width:100%;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--border-gold);
  color:var(--text-muted);
  padding:12px 14px;
  font-family:'EB Garamond', serif;
  font-style:italic;
  margin-bottom:14px;
  font-size:0.9rem;
}
.login-box input:focus{outline:none; border-color:var(--gold);}
.login-box .btn-gold{width:100%; text-align:center; margin-bottom:14px;}
.login-box .forgot{
  display:block; text-align:center;
  font-size:0.78rem; color:var(--text-dim); text-decoration:none;
}

.stats-row{
  display:flex; justify-content:space-around; text-align:center; margin-bottom:6px;
}
.stats-row div h4{
  font-family:'Cinzel', serif; color:var(--gold-bright); font-size:1.6rem;
}
.stats-row div p{
  font-size:0.62rem; letter-spacing:1px; color:var(--text-dim); margin-top:6px;
}

.top-player{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0;
  border-bottom:1px dotted rgba(101,188,232,0.08);
  font-size:0.85rem;
}
.top-player:last-child{border-bottom:none;}
.top-player .rank{color:var(--gold-dim); margin-right:8px;}
.top-player .name{color:var(--text-muted);}
.top-player .voc{color:var(--text-dim); font-style:italic; font-size:0.78rem;}
.top-player .lvl{color:var(--gold); font-family:'Cinzel', serif; font-size:0.78rem;}

/* ============ RANKING ============ */
.filter-row{
  display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap;
}
.filter-btn{
  font-family:'Cinzel', serif;
  font-size:0.72rem;
  letter-spacing:2px;
  padding:9px 20px;
  border:1px solid var(--border-gold);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  transition:all 0.2s ease;
}
.filter-btn.active, .filter-btn:hover{
  background:linear-gradient(180deg, #9fe2f5, #4e9abb);
  color:#071521;
  border-color:#477d9b;
}
.rank-table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border-gold);
}
.rank-table th{
  font-family:'Cinzel', serif;
  font-size:0.7rem;
  letter-spacing:2px;
  color:var(--gold-dim);
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--border-gold);
  background:rgba(101,188,232,0.05);
}
.rank-table td{
  padding:14px 16px;
  font-size:0.88rem;
  border-bottom:1px solid rgba(101,188,232,0.08);
  color:var(--text-muted);
}
.rank-table tr:hover td{background:rgba(101,188,232,0.04); color:var(--gold-bright);}
.rank-table td:first-child{color:var(--gold); font-family:'Cinzel', serif;}

/* ============ GUILDAS ============ */
.guild-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){.guild-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.guild-grid{grid-template-columns:1fr;}}
.guild-card{
  border:1px solid var(--border-gold);
  padding:22px;
  background:rgba(15,12,9,0.5);
}
.guild-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;}
.guild-icon{
  width:48px; height:48px;
  border:1px solid var(--border-gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--gold);
  background:rgba(101,188,232,0.06);
  flex-shrink:0;
}
.guild-head h3{font-family:'Cinzel', serif; color:var(--gold-bright); font-size:1.05rem; margin-bottom:6px;}
.guild-meta{font-size:0.75rem; color:var(--text-dim); display:flex; gap:14px; flex-wrap:wrap;}
.guild-card p.desc{font-size:0.85rem; font-style:italic; color:var(--text-muted); margin-bottom:18px; min-height:40px;}
.guild-footer{display:flex; justify-content:space-between; align-items:center;}
.guild-footer .world{font-size:0.7rem; letter-spacing:2px; color:var(--text-dim); font-family:'Cinzel', serif;}
.btn-outline{
  border:1px solid var(--border-gold);
  color:var(--gold);
  background:transparent;
  font-family:'Cinzel', serif;
  font-size:0.68rem;
  letter-spacing:2px;
  padding:9px 16px;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.2s ease;
}
.btn-outline:hover{background:rgba(101,188,232,0.1); color:var(--gold-bright);}

/* ============ WIKI ============ */
.wiki-toggle{display:flex; justify-content:center; gap:14px; margin-bottom:40px;}
.wiki-toggle button{
  font-family:'Cinzel', serif; letter-spacing:2px; font-size:0.75rem;
  padding:12px 26px; cursor:pointer; border:1px solid var(--border-gold);
  background:transparent; color:var(--text-muted); transition:all 0.2s ease;
}
.wiki-toggle button.active{
  background:linear-gradient(180deg, #9fe2f5, #4e9abb); color:#071521; border-color:#477d9b;
}
.voc-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
@media (max-width:900px){.voc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.voc-grid{grid-template-columns:1fr;}}
.voc-card{
  border:1px solid var(--border-gold);
  padding:22px;
  background:rgba(15,12,9,0.5);
}
.voc-card h3{font-family:'Cinzel Decorative', serif; color:var(--gold-bright); font-size:1.2rem; margin-bottom:6px;}
.voc-card .role{font-family:'Cinzel', serif; font-size:0.65rem; letter-spacing:2px; color:var(--gold-dim); margin-bottom:14px;}
.voc-card p{font-size:0.85rem; font-style:italic; color:var(--text-muted); line-height:1.6;}

/* ============ LOJA ============ */
.shop-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
@media (max-width:1000px){.shop-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.shop-grid{grid-template-columns:1fr;}}
.shop-card{
  border:1px solid var(--border-gold);
  padding:24px;
  background:rgba(15,12,9,0.5);
  display:flex; flex-direction:column;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.shop-card:hover{border-color:var(--gold); transform:translateY(-3px);}
.shop-icon{
  width:52px; height:52px;
  border:1px solid var(--border-gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1.5rem;
  margin-bottom:16px;
  background:rgba(101,188,232,0.06);
}
.shop-card h3{font-family:'Cinzel', serif; color:var(--gold-bright); font-size:1rem; margin-bottom:10px;}
.shop-card p{font-size:0.82rem; font-style:italic; color:var(--text-muted); margin-bottom:20px; flex-grow:1;}
.shop-footer{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.price{
  color:var(--gold); font-family:'Cinzel', serif; font-size:0.82rem; display:flex; align-items:center; gap:5px;
}
.price .coin{color:var(--gold-dim);}
.btn-buy{
  background:linear-gradient(180deg, #9fe2f5, #4e9abb);
  color:#071521;
  border:1px solid #477d9b;
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:0.68rem;
  letter-spacing:1px;
  padding:9px 16px;
  cursor:pointer;
  text-transform:uppercase;
}
.btn-buy:hover{filter:brightness(1.1);}

/* ============ DOWNLOAD / PERSONAGENS (simple pages) ============ */
.simple-panel{
  border:1px solid var(--border-gold);
  padding:50px;
  text-align:center;
  background:rgba(15,12,9,0.5);
  max-width:700px;
  margin:0 auto;
}
.simple-panel h3{font-family:'Cinzel Decorative', serif; color:var(--gold-bright); margin-bottom:16px; font-size:1.4rem;}
.simple-panel p{font-style:italic; color:var(--text-muted); margin-bottom:26px; line-height:1.7;}

/* ============ FOOTER ============ */
.site-footer{
  text-align:center;
  padding:30px 20px;
  border-top:1px solid rgba(101,188,232,0.12);
  font-size:0.75rem;
  letter-spacing:2px;
  color:var(--text-dim);
  font-family:'Cinzel', serif;
}

/* Background decorative particles */
.particles{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  contain:layout paint;
}
.particle{
  position:absolute;
  width:2px; height:2px;
  background:var(--gold-dim);
  border-radius:50%;
  opacity:0.4;
  animation:float 8s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0); opacity:0.2;}
  50%{transform:translateY(-30px); opacity:0.6;}
}

@media (max-width:640px){
  .topbar{padding:12px 16px; font-size:0.62rem;}
  .navbar{gap:16px 22px; padding:14px 12px;}
  .navbar a{font-size:0.68rem;}
  .page{padding:36px 16px 70px;}
}
.site-credit{position:relative;z-index:5;text-align:center;padding:0 20px 22px;font-size:.55rem;letter-spacing:1px;color:rgba(158,181,193,.35)}.site-credit a{color:inherit}

/* ============================================================
   RESPONSIVIDADE MOBILE — layout prioritário + menu compacto
   ============================================================ */
.mobile-nav-toggle{display:none;}

@media (max-width: 700px){
  html,body{width:100%; min-width:0; overflow-x:hidden;}
  body{-webkit-text-size-adjust:100%;}

  /* Cabeçalho compacto */
  .topbar{
    min-height:46px;
    padding:10px 14px;
    font-size:.58rem;
    letter-spacing:1.5px;
  }
  .topbar > div:first-child{
    max-width:calc(100% - 52px);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .lang-btn{padding:7px 9px; font-size:.58rem; letter-spacing:1px;}
  .lang-btn .flag{font-size:.85rem;}
  .lang-dropdown{right:0; min-width:150px;}

  .hero{
    padding:34px 16px 22px;
  }
  .logo-title{
    font-size:clamp(2.25rem, 15vw, 3.35rem);
    line-height:1;
  }
  .logo-sub{
    font-size:.72rem;
    letter-spacing:7px;
  }
  .logo-tagline{
    max-width:90%;
    font-size:.62rem;
    letter-spacing:2px;
    line-height:1.5;
  }
  .logo-tagline::before,.logo-tagline::after{width:28px;}

  /* Menu: somente o ícone fica visível; links aparecem num painel suspenso */
  .navbar{
    position:sticky;
    top:0;
    z-index:100;
    display:block;
    width:100%;
    margin:0;
    padding:0;
    min-height:50px;
    border-top:1px solid rgba(101,188,232,.16);
    border-bottom:1px solid rgba(101,188,232,.18);
    background:rgba(7,5,3,.92);
    backdrop-filter:blur(10px);
  }
  .mobile-nav-toggle{
    display:flex;
    position:absolute;
    right:10px;
    top:7px;
    width:42px;
    height:36px;
    padding:0;
    align-items:center;
    justify-content:center;
    background:rgba(20,15,9,.88);
    border:1px solid rgba(101,188,232,.42);
    color:var(--gold-bright);
    cursor:pointer;
    z-index:4;
  }
  .mobile-nav-toggle:active{transform:scale(.96);}
  .hamburger{display:flex; width:18px; flex-direction:column; gap:4px;}
  .hamburger span{
    display:block;
    width:18px;
    height:1px;
    background:var(--gold-bright);
    transition:transform .25s ease, opacity .2s ease;
  }
  .navbar.mobile-open .hamburger span:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .navbar.mobile-open .hamburger span:nth-child(2){opacity:0;}
  .navbar.mobile-open .hamburger span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

  .navbar a{
    display:none;
    margin:0;
    padding:14px 18px;
    min-height:46px;
    border:0;
    border-bottom:1px solid rgba(101,188,232,.09);
    background:rgba(13,10,7,.98);
    font-size:.67rem;
    letter-spacing:2px;
  }
  .navbar.mobile-open a{display:block;}
  .navbar a:first-of-type{border-top:1px solid rgba(101,188,232,.12);}
  .navbar a.active{color:var(--gold-bright); background:rgba(101,188,232,.08);}
  .navbar a::after{display:none;}
  .navbar.mobile-open::after{
    content:'';
    position:fixed;
    inset:50px 0 0;
    background:rgba(0,0,0,.42);
    z-index:-1;
    pointer-events:none;
  }

  /* O conteúdo principal começa pelo que realmente importa no celular:
     boas-vindas → notícias → acesso/jogadores → atalhos secundários. */
  .page{
    width:100%;
    max-width:none;
    padding:30px 14px 58px;
  }
  .page-title{font-size:clamp(1.8rem,9vw,2.45rem); line-height:1.1;}
  .page-subtitle{
    font-size:.58rem;
    letter-spacing:2px;
    line-height:1.6;
    margin-bottom:30px;
  }
  .page-subtitle::before,.page-subtitle::after{display:none;}

  .home-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  .home-grid > .center-col{order:1;}
  .home-grid > .right-col{order:2;}
  .home-grid > .left-col{order:3;}

  .center-col .welcome-box{
    padding:27px 18px;
    margin-bottom:24px;
  }
  .welcome-box h2{font-size:1.28rem; line-height:1.35;}
  .welcome-box p{font-size:.9rem; line-height:1.65;}

  .btn-gold,.enter-btn{max-width:100%; min-height:46px; padding:13px 18px;}
  .btn-gold{font-size:.68rem; letter-spacing:2px;}

  .news-item{padding:17px 15px; margin-bottom:14px;}
  .news-meta{font-size:.58rem; line-height:1.7;}
  .news-meta .tag{display:inline-block; margin:4px 0 0 4px;}
  .news-item h3{font-size:1rem; line-height:1.35;}
  .news-item p{font-size:.84rem; line-height:1.55;}
  .news-footer{gap:12px; align-items:flex-end; font-size:.72rem;}

  /* Ordem interna do painel direito */
  .right-col{display:flex; flex-direction:column;}
  .right-col .streamer-panel{order:3;}
  .right-col .login-box{order:1;}
  .right-col > .panel:nth-of-type(3){order:2;}
  .right-col > .panel:nth-of-type(4){order:4;}

  .panel{padding:18px 15px; margin-bottom:14px;}
  .panel-title{font-size:.72rem; letter-spacing:2px; margin-bottom:15px; padding-bottom:11px;}
  .panel-list a{font-size:.86rem;}
  .panel-list li{padding:9px 0;}

  .login-box input{font-size:.86rem; min-height:46px; padding:11px 12px;}
  .stats-row{margin-bottom:8px;}
  .stats-row div h4{font-size:1.35rem;}
  .top-player{font-size:.78rem; gap:8px;}
  .top-player .voc{display:block; margin-top:2px;}

  .streamer-stage{height:205px;}
  .streamer-info{left:13px; right:13px; bottom:13px;}
  .streamer-info h3{font-size:1rem;}
  .streamer-info p{font-size:.68rem; line-height:1.4;}
  .streamer-stats{gap:10px; font-size:.56rem;}

  /* Páginas em grade */
  .guild-grid,.voc-grid,.shop-grid{grid-template-columns:1fr; gap:14px;}
  .guild-card,.voc-card,.shop-card{padding:17px 15px;}
  .guild-head{gap:10px;}
  .guild-head h3{font-size:.91rem; line-height:1.35;}
  .guild-meta{font-size:.68rem; gap:8px;}
  .guild-card p.desc{min-height:0; font-size:.8rem; line-height:1.55;}
  .guild-footer,.shop-footer{flex-wrap:wrap;}
  .btn-outline{padding:9px 12px; font-size:.62rem;}
  .shop-card p{font-size:.8rem;}
  .shop-footer .price{font-size:.72rem;}
  .btn-buy{padding:10px 13px;}

  .wiki-toggle{gap:8px; margin-bottom:25px;}
  .wiki-toggle button{padding:10px 13px; font-size:.62rem; letter-spacing:1.3px; flex:1;}
  .voc-card h3{font-size:1.05rem;}
  .voc-card p{font-size:.8rem;}

  .simple-panel{width:100%; padding:27px 17px;}
  .simple-panel h3{font-size:1.15rem; line-height:1.35;}
  .simple-panel p{font-size:.86rem; line-height:1.6;}
  .simple-panel .btn-gold{width:100%; text-align:center;}

  /* Ranking vira cartões, evitando tabela esmagada/scroll horizontal */
  .rank-table{display:block; width:100%; border:0;}
  .rank-table thead{display:none;}
  .rank-table tbody{display:block; width:100%;}
  .rank-table tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 12px;
    margin-bottom:12px;
    padding:12px;
    border:1px solid var(--border-gold);
    background:rgba(15,12,9,.55);
  }
  .rank-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px dotted rgba(101,188,232,.09);
    font-size:.76rem;
    min-width:0;
  }
  .rank-table td::before{
    color:var(--gold-dim);
    font:600 .55rem 'Cinzel',serif;
    letter-spacing:1px;
    flex:0 0 auto;
  }
  .rank-table td:nth-child(1)::before{content:'POS.';}
  .rank-table td:nth-child(2)::before{content:'NOME';}
  .rank-table td:nth-child(3)::before{content:'NÍVEL';}
  .rank-table td:nth-child(4)::before{content:'EXP.';}
  .rank-table td:nth-child(5)::before{content:'VOCAÇÃO';}
  .rank-table td:nth-child(6)::before{content:'MUNDO';}
  .rank-table td:nth-child(5),.rank-table td:nth-child(6){grid-column:1 / -1;}
  .rank-table td:last-child{border-bottom:0;}
  .rank-table td > *{min-width:0; overflow-wrap:anywhere;}

  .filter-row{gap:7px; margin-bottom:22px;}
  .filter-btn{padding:8px 10px; font-size:.58rem; letter-spacing:1px;}

  .site-footer{padding:23px 14px; font-size:.57rem; line-height:1.7; letter-spacing:1.2px;}
  .site-credit{padding:0 14px 18px; line-height:1.6;}

  /* Intro no celular */
  #intro::before{background-position:center;}
  .intro-content{padding:18px; max-width:100%;}
  .intro-title{font-size:clamp(2.7rem,18vw,4.5rem);}
  .intro-sub{font-size:.78rem; letter-spacing:7px;}
  .intro-tagline{font-size:.7rem; letter-spacing:2px; margin-top:20px; gap:9px;}
  .enter-btn{margin-top:32px; width:min(92vw,330px); font-size:.72rem; letter-spacing:2.5px;}
  .press-enter{font-size:.62rem; letter-spacing:3px; margin-top:16px;}

  /* Portas ficam ligeiramente mais largas para evitar uma fresta durante o gesto */
  .intro-door{width:50.5%;}
}

@media (max-width:380px){
  .topbar > div:first-child{display:none;}
  .topbar{justify-content:flex-end;}
  .hero{padding-top:28px;}
  .logo-tagline::before,.logo-tagline::after{display:none;}
  .page{padding-left:11px; padding-right:11px;}
  .filter-btn{padding:7px 8px; font-size:.54rem;}
  .rank-table tr{grid-template-columns:1fr;}
  .rank-table td:nth-child(5),.rank-table td:nth-child(6){grid-column:auto;}
}


/* ===== DEEP SCROLL PERFORMANCE =====
   Mantém o desenho intacto, mas evita que o navegador pinte
   conteúdo que está muito longe da área visível. */
.panel,.news-item,.guild-card,.voc-card,.shop-card,.simple-panel,.welcome-box{
  content-visibility:auto;
  contain-intrinsic-size:auto 220px;
}
.guild-grid,.voc-grid,.shop-grid{
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}

/* Camadas decorativas não precisam participar do cálculo de layout. */

/* Acelera a rolagem sem alterar a aparência final dos elementos. */
img{
  content-visibility:auto;
}



/* ============================================================
   AVATAR ECLIPSE — visual theme overrides
   ============================================================ */
:root{
  --avatar-blue:#65bce8;
  --avatar-blue-bright:#bdeeff;
  --avatar-cyan:#70d4d4;
  --avatar-sand:#b8aa91;
  --avatar-ink:#071019;
  --avatar-panel:#0d1821;
  --avatar-border:rgba(101,188,232,.30);
}

body{background:var(--avatar-ink);}
::selection{background:rgba(101,188,232,.35);color:#eefbff;}
::-webkit-scrollbar-track{background:#071019;}
::-webkit-scrollbar-thumb{background:#2b4f60;border-radius:5px;}

/* Vertical entrance doors: the gates slide upward and downward. */
.intro-divider-line{
  left:0; right:0; top:50%; bottom:auto;
  width:auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(101,188,232,.36),transparent);
}
.intro-door{
  left:0; right:0;
  width:100%; height:50.2%;
  top:auto; bottom:auto;
  background:
    radial-gradient(circle at 50% 50%,rgba(101,188,232,.10),transparent 30%),
    linear-gradient(180deg,rgba(8,20,30,.94),rgba(4,10,16,.98)),
    var(--bg-map) center/cover no-repeat;
  border-color:rgba(101,188,232,.22);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1),box-shadow 1.15s ease;
}
.intro-door::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.70),transparent 28%,transparent 72%,rgba(0,0,0,.70)),
    repeating-linear-gradient(90deg,transparent 0 56px,rgba(112,212,212,.028) 57px,transparent 58px);
}
.intro-door.top{top:0;border-bottom:1px solid rgba(101,188,232,.22);box-shadow:inset 0 -24px 45px rgba(0,0,0,.70);}
.intro-door.bottom{bottom:0;border-top:1px solid rgba(101,188,232,.22);box-shadow:inset 0 24px 45px rgba(0,0,0,.70);}
#intro.opening .intro-door.top{transform:translateY(-105%);box-shadow:inset 0 -24px 45px rgba(0,0,0,.35),0 22px 50px rgba(0,0,0,.45);}
#intro.opening .intro-door.bottom{transform:translateY(105%);box-shadow:inset 0 24px 45px rgba(0,0,0,.35),0 -22px 50px rgba(0,0,0,.45);}

.avatar-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 44%,rgba(101,188,232,.12),transparent 22%),
  radial-gradient(circle at 30% 25%,rgba(112,212,212,.11),transparent 24%),
  linear-gradient(180deg,rgba(7,11,18,0),rgba(0,0,0,.58));z-index:-1;}
.avatar-eclipse-glow{position:absolute;left:50%;top:50%;width:min(46vw,500px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(189,238,255,.12) 0 28%,transparent 29%),radial-gradient(circle,rgba(101,188,232,.18) 0 46%,transparent 47%);box-shadow:0 0 90px rgba(101,188,232,.15);z-index:-1;}

.intro-title,.logo-title{color:var(--avatar-blue-bright);text-shadow:0 0 25px rgba(101,188,232,.50),0 0 60px rgba(112,212,212,.20);}
.intro-sub,.logo-sub{color:var(--avatar-blue);}
.intro-tagline .diamond{color:var(--avatar-cyan);border-color:var(--avatar-cyan);}
.enter-btn,.btn-gold,.btn-buy,.filter-btn.active,.wiki-toggle button.active{
  background:linear-gradient(180deg,#b9efff,#64b6da);
  color:#071521;
  border-color:#4d8eaa;
  box-shadow:0 4px 20px rgba(101,188,232,.25),inset 0 1px 0 rgba(255,255,255,.45);
}
.enter-btn:hover,.btn-gold:hover{box-shadow:0 8px 28px rgba(101,188,232,.38),inset 0 1px 0 rgba(255,255,255,.5);}

#site{background:
  linear-gradient(180deg,rgba(7,11,18,.78),rgba(7,11,18,.95)),
  radial-gradient(ellipse at 50% 0%,rgba(71,150,184,.20),transparent 55%),
  var(--bg-castle) center top/cover fixed no-repeat;}
#site::before{background:
  linear-gradient(90deg,rgba(5,12,18,.80),transparent 25%,transparent 75%,rgba(5,12,18,.80)),
  var(--bg-map) center/cover fixed no-repeat;opacity:.18;mix-blend-mode:screen;}
.parchment-overlay{background-image:
  radial-gradient(circle at 20% 30%,rgba(112,212,212,.035),transparent 40%),
  radial-gradient(circle at 80% 70%,rgba(101,188,232,.04),transparent 40%);}

.panel,.welcome-box,.news-item,.guild-card,.voc-card,.shop-card,.simple-panel{background:
  radial-gradient(ellipse at 50% 0%,rgba(101,188,232,.045),transparent 58%),
  linear-gradient(135deg,rgba(17,32,42,.94),rgba(8,16,22,.97));}
.panel-title,.news-meta,.guild-meta,.price,.shop-icon,.guild-icon{color:var(--avatar-blue);}
.news-item h3,.guild-head h3,.shop-card h3,.voc-card h3,.simple-panel h3,.welcome-box h2,.page-title{color:var(--avatar-blue-bright);}
.panel-list a:hover,.navbar a:hover,.navbar a.active{color:var(--avatar-blue-bright);}
.navbar a::after{background:var(--avatar-blue);}

.minimap-frame{background:#0d202b;border-color:rgba(101,188,232,.30);}
.minimap-art{position:absolute;inset:0;background:
  radial-gradient(ellipse at 28% 30%,rgba(112,212,212,.42) 0 7%,transparent 7.5%),
  radial-gradient(ellipse at 68% 58%,rgba(101,188,232,.34) 0 11%,transparent 11.5%),
  radial-gradient(ellipse at 46% 74%,rgba(177,157,105,.28) 0 8%,transparent 8.5%),
  radial-gradient(ellipse at 77% 22%,rgba(157,212,236,.24) 0 6%,transparent 6.5%),
  linear-gradient(145deg,#102b38,#0a1821 58%,#09131a);
  filter:saturate(.95) brightness(.92);
}
.minimap-art::after{content:'';position:absolute;inset:10%;border:1px solid rgba(189,238,255,.12);border-radius:48% 52% 44% 56%;box-shadow:0 0 0 22px rgba(101,188,232,.025),inset 0 0 35px rgba(101,188,232,.08);}
.map-status i{background:var(--avatar-cyan);box-shadow:0 0 8px rgba(112,212,212,.75);}

.streamer-art{filter:saturate(.55) brightness(.58) hue-rotate(155deg);}
.streamer-overlay{background:linear-gradient(180deg,rgba(0,0,0,.08) 25%,rgba(4,11,16,.92) 100%);}
.streamer-live{color:#8ed8ee;}.streamer-live i{background:#61bdd8;box-shadow:0 0 8px rgba(97,189,216,.75);}
.streamer-info h3{color:#b9edff;}.streamer-info p{color:#c0d2dc;}.streamer-dots button.active{background:var(--avatar-blue);box-shadow:0 0 8px rgba(101,188,232,.45);}

@media(max-width:700px){
  .intro-door{width:100%;height:50.5%;}
  .intro-door.top{top:0;bottom:auto;}
  .intro-door.bottom{top:auto;bottom:0;}
  .mobile-nav-toggle{border-color:rgba(101,188,232,.42);color:var(--avatar-blue-bright);background:rgba(11,24,32,.92);}
  .hamburger span{background:var(--avatar-blue-bright);}
  .navbar{background:rgba(6,14,20,.94);border-top-color:rgba(101,188,232,.16);border-bottom-color:rgba(101,188,232,.18);}
  .navbar a{background:rgba(10,20,28,.98);border-bottom-color:rgba(101,188,232,.09);}
}


/* ============================================================
   AVATAR ECLIPSE — HYBRID HOMEPAGE / LAYOUT V2
   Combines the existing blue/cyan identity with the requested
   compact portal-style composition: top navigation, centered
   identity, featured area, utility rail, ticker and news feed.
   ============================================================ */
:root{
  --ae-blue:#65bce8;
  --ae-blue-soft:#9fdff4;
  --ae-cyan:#70d4d4;
  --ae-ice:#d9f5ff;
  --ae-muted:#9ab1bc;
  --ae-sand:#b8aa91;
  --ae-bg:#071019;
  --ae-bg2:#0a151d;
  --ae-card:rgba(11,24,32,.88);
  --ae-card-2:rgba(8,18,25,.92);
  --ae-line:rgba(101,188,232,.24);
}

/* Main backdrop: subtle elemental atmosphere rather than medieval imagery. */
#site{
  background:
    radial-gradient(circle at 50% 10%,rgba(101,188,232,.12),transparent 25%),
    radial-gradient(circle at 90% 78%,rgba(112,212,212,.07),transparent 25%),
    linear-gradient(180deg,#071019 0%,#08131b 44%,#050c12 100%);
}
#site::before{
  background:
    radial-gradient(circle at 18% 20%,rgba(112,212,212,.055) 0 1px,transparent 1.5px),
    radial-gradient(circle at 76% 32%,rgba(101,188,232,.05) 0 1px,transparent 1.5px),
    linear-gradient(90deg,rgba(5,12,18,.7),transparent 30%,transparent 70%,rgba(5,12,18,.7));
  background-size:auto,auto,100% 100%;
  opacity:.75;
  mix-blend-mode:screen;
}

/* Top navigation becomes the compact portal bar seen in the reference. */
.topbar{
  max-width:1180px;
  margin:14px auto 0;
  padding:0 8px;
  border:0;
  min-height:0;
  color:var(--ae-muted);
}
.topbar > div:first-child{display:none;}
.lang-select{margin-left:auto;}
.lang-btn{
  border-color:var(--ae-line);
  color:var(--ae-blue-soft);
  background:rgba(7,17,24,.65);
  border-radius:20px;
}
.lang-btn:hover{background:rgba(101,188,232,.08);}
.lang-dropdown{background:#09151d;border-color:var(--ae-line);}
.lang-dropdown div:hover,.lang-dropdown div.active{background:rgba(101,188,232,.10);color:var(--ae-blue-soft);}

.hero{
  padding:42px 20px 30px;
}
.logo-title{
  font-size:clamp(2.8rem,6vw,4.5rem);
  letter-spacing:2px;
}
.logo-sub{letter-spacing:10px;color:var(--ae-blue-soft);}

/* The nav sits directly below the identity and uses a capsule frame. */
.navbar{
  max-width:1180px;
  margin:0 auto;
  padding:11px 16px;
  gap:8px;
  border:1px solid var(--ae-line);
  border-radius:28px;
  background:rgba(6,15,21,.78);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 35px rgba(0,0,0,.25),inset 0 1px 0 rgba(189,238,255,.04);
}
.navbar a{
  padding:9px 13px 8px;
  border-radius:18px;
  letter-spacing:2px;
  color:#9eb0b9;
}
.navbar a::after{display:none;}
.navbar a:hover,.navbar a.active{
  color:var(--ae-ice);
  background:rgba(101,188,232,.08);
}

.page{max-width:1180px;padding:34px 18px 90px;}
.page::before{display:none;}

/* Homepage composition: large editorial column + utility rail. */
.home-grid{
  grid-template-columns:minmax(0,2.12fr) minmax(300px,.88fr);
  grid-template-areas:'main rail';
  gap:24px;
  align-items:start;
}
.home-grid > .left-col{grid-area:rail;display:flex;flex-direction:column;}
.home-grid > .center-col{grid-area:main;display:flex;flex-direction:column;}
.home-grid > .right-col{display:none;}

/* Existing minimap remains, but becomes part of the utility rail. */
.home-grid > .left-col .minimap-panel{order:1;}
.home-grid > .left-col > .panel:nth-child(2){order:2;}
.home-grid > .left-col > #account-register{order:5;}
.home-grid > .left-col > .panel:nth-child(4){order:6;}
.home-grid > .left-col > .panel:nth-child(5){order:7;}

.panel,.welcome-box,.news-item,.guild-card,.voc-card,.shop-card,.simple-panel{
  border-color:var(--ae-line);
  border-radius:12px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(101,188,232,.055),transparent 58%),
    linear-gradient(145deg,rgba(14,29,39,.94),rgba(6,15,21,.97));
  box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(189,238,255,.035);
}
.panel{padding:20px;}
.panel-title{color:var(--ae-blue-soft);}

/* Welcome becomes a compact game portal header rather than a large box. */
.center-col .welcome-box{
  margin-bottom:16px;
  padding:28px 30px 25px;
  text-align:left;
  position:relative;
  overflow:hidden;
}
.center-col .welcome-box::after{
  content:'AE';
  position:absolute;
  right:24px;top:50%;transform:translateY(-50%);
  font:900 7rem 'Cinzel Decorative',serif;
  color:rgba(101,188,232,.035);
  pointer-events:none;
}
.welcome-box .eyebrow{color:var(--ae-blue);}
.welcome-box h2{font-size:1.8rem;}
.welcome-box p{max-width:650px;margin-left:0;}

/* Featured media / stream area — deliberately larger like the reference. */
.featured-panel{padding:12px;margin-bottom:18px;}
.featured-stage{
  position:relative;
  min-height:310px;
  border:1px solid rgba(101,188,232,.22);
  border-radius:8px;
  overflow:hidden;
  background:
    radial-gradient(circle at 55% 45%,rgba(101,188,232,.13),transparent 28%),
    linear-gradient(145deg,#0d2530,#071018 70%);
}
.featured-stage::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,10,15,.72),transparent 45%,rgba(4,10,15,.25)),
    linear-gradient(180deg,transparent 50%,rgba(3,8,12,.88));
  z-index:1;pointer-events:none;
}
.featured-symbol{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:94px;height:94px;border:1px solid rgba(189,238,255,.42);
  border-radius:50%;display:grid;place-items:center;
  color:var(--ae-blue-soft);font:700 2rem 'Cinzel',serif;
  box-shadow:0 0 0 14px rgba(101,188,232,.035),0 0 50px rgba(101,188,232,.13);
}
.featured-copy{position:absolute;left:28px;right:28px;bottom:24px;z-index:2;}
.featured-kicker{font:700 .63rem 'Cinzel',serif;letter-spacing:3px;color:var(--ae-blue);}
.featured-copy h3{font:700 1.7rem 'Cinzel Decorative',serif;color:var(--ae-ice);margin:7px 0;}
.featured-copy p{max-width:600px;font-size:.82rem;color:#b7cbd4;}
.featured-dots{display:flex;justify-content:center;gap:8px;padding:10px 0 2px;}
.featured-dots span{width:7px;height:7px;border-radius:50%;border:1px solid var(--ae-blue);}
.featured-dots span.active{background:var(--ae-blue);box-shadow:0 0 9px rgba(101,188,232,.55);}

/* Ticker inspired by the reference, recolored to the site's blue palette. */
.ae-ticker{
  display:grid;grid-template-columns:auto 1fr;
  margin:0 0 20px;border:1px solid var(--ae-line);border-radius:5px;overflow:hidden;
  background:rgba(7,16,22,.9);
}
.ae-ticker-label{padding:8px 12px;font:700 .62rem 'Cinzel',serif;letter-spacing:2px;color:var(--ae-blue-soft);background:rgba(101,188,232,.08);}
.ae-ticker-track{padding:8px 12px;font-size:.72rem;color:#9fb6c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ae-ticker-track strong{color:var(--ae-blue);margin-right:8px;}

/* News follows the reference: horizontal article headers and clean separators. */
.center-col > .panel-title{margin-top:4px;}
.news-item{
  padding:19px 12px 18px;
  margin-bottom:0;
  border:0;
  border-bottom:1px solid rgba(101,188,232,.13);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.news-meta{color:#7193a2;}
.news-meta .tag{background:rgba(101,188,232,.07);border-color:rgba(101,188,232,.18);color:var(--ae-blue);}
.news-item h3{font-size:1.22rem;}
.news-footer a{color:var(--ae-blue);}

/* Right-rail quick actions: Download / Discord / Donate. */
.quick-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.quick-action{
  min-height:70px;padding:13px 15px;display:flex;align-items:center;gap:13px;
  border:1px solid var(--ae-line);border-radius:12px;text-decoration:none;
  background:linear-gradient(135deg,rgba(14,29,39,.94),rgba(7,16,22,.97));
  color:var(--ae-ice);transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.quick-action:hover{transform:translateY(-2px);border-color:rgba(101,188,232,.48);background:linear-gradient(135deg,rgba(16,37,49,.98),rgba(7,17,24,.98));}
.quick-action .qa-icon{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(101,188,232,.28);border-radius:50%;display:grid;place-items:center;color:var(--ae-blue);background:rgba(101,188,232,.055);font-size:1rem;}
.quick-action strong{display:block;font:700 .82rem 'Cinzel',serif;letter-spacing:2px;}
.quick-action small{display:block;margin-top:3px;color:#718b97;font:500 .58rem 'Cinzel',serif;letter-spacing:1.5px;}

.rail-divider{height:18px;position:relative;margin:0 5px;display:flex;align-items:center;justify-content:center;gap:7px;}
.rail-divider::before,.rail-divider::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(101,188,232,.2));}
.rail-divider::after{transform:scaleX(-1);}
.rail-divider i{width:7px;height:7px;border:1px solid var(--ae-blue);transform:rotate(45deg);opacity:.75;}

.server-status .status-line{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#a9bdc5;margin-bottom:12px;}
.status-pill{font:700 .58rem 'Cinzel',serif;letter-spacing:1.5px;padding:5px 9px;border-radius:15px;color:#7be0d0;background:rgba(112,212,212,.08);border:1px solid rgba(112,212,212,.2);}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ae-cyan);box-shadow:0 0 8px rgba(112,212,212,.8);margin-right:5px;}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.status-grid div{padding-top:10px;border-top:1px solid rgba(101,188,232,.08);}
.status-grid span{display:block;font:500 .55rem 'Cinzel',serif;letter-spacing:1px;color:#657d88;}
.status-grid strong{display:block;margin-top:3px;color:#b9d5df;font:600 .76rem 'Cinzel',serif;}

/* Compact top-five list mirrors the reference without losing the existing data. */
.top-five .top-player{padding:11px 0;border-bottom-color:rgba(101,188,232,.08);}
.top-five .rank{color:#7294a1;}
.top-five .name{color:#b9ccd4;}
.top-five .lvl{color:var(--ae-blue);padding:5px 9px;border:1px solid rgba(101,188,232,.18);border-radius:14px;background:rgba(101,188,232,.055);}

/* Move the existing minimap into a visually distinct compact module. */
.left-col .minimap-panel{padding:15px;}
.left-col .minimap-panel .panel-title{margin-bottom:13px;}
.left-col .minimap-frame{aspect-ratio:1.18 / 1;border-radius:8px;}
.left-col .location-card{border-left-color:rgba(101,188,232,.35);}

@media(max-width:900px){
  .home-grid{grid-template-columns:1fr;grid-template-areas:'main' 'rail';}
  .home-grid > .left-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .home-grid > .left-col > .panel{margin-bottom:0;}
  .home-grid > .left-col .minimap-panel{grid-column:1 / -1;}
  .home-grid > .left-col > #account-register{order:3;}
  .home-grid > .left-col > .panel:nth-child(4){order:4;}
  .home-grid > .left-col > .panel:nth-child(5){order:5;}
}
@media(max-width:700px){
  .topbar{margin-top:8px;padding:0 10px;}
  .hero{padding:28px 16px 20px;}
  .navbar{border-radius:12px;margin:0 10px;}
  .page{padding:25px 12px 65px;}
  .home-grid > .left-col{display:flex;}
  .center-col .welcome-box{text-align:center;padding:24px 18px;}
  .welcome-box p{margin-left:auto;}
  .featured-stage{min-height:245px;}
  .featured-copy{left:18px;right:18px;bottom:18px;}
  .featured-copy h3{font-size:1.25rem;}
  .ae-ticker{grid-template-columns:1fr;}
  .ae-ticker-label{text-align:center;}
}

@media(max-width:900px){
  .home-grid{grid-template-columns:1fr!important;grid-template-areas:'main' 'rail'!important;}
  .home-grid > .left-col{display:flex!important;}
  .home-grid > .right-col{display:none!important;}
}
@media(max-width:700px){
  .home-grid{gap:16px!important;}
  .home-grid > .left-col{display:flex!important;}
  .navbar{margin-left:10px!important;margin-right:10px!important;}
}