/* Tale-World Epic Header V1 */
.topbar.epic-header{
  position:sticky;
  top:0;
  z-index:150;
  background:
    radial-gradient(circle at 50% -180%, rgba(64,133,255,.20), transparent 38%),
    linear-gradient(180deg, rgba(3,8,18,.96), rgba(4,10,22,.88));
  border-bottom:1px solid rgba(246,200,95,.22);
  box-shadow:0 14px 38px rgba(0,0,0,.34), inset 0 -1px 0 rgba(255,255,255,.02);
  backdrop-filter:blur(18px);
}
.topbar.epic-header:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,200,95,.55), rgba(95,170,255,.45), transparent);
  pointer-events:none;
}
.topbar.epic-header:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  transform:translateX(-50%);
  width:92px;height:12px;
  background:
    radial-gradient(circle at 50% 100%, rgba(246,200,95,.65), transparent 58%),
    linear-gradient(90deg, transparent, rgba(246,200,95,.75), transparent);
  clip-path:polygon(0 50%, 44% 50%, 50% 0, 56% 50%, 100% 50%, 56% 50%, 50% 100%, 44% 50%);
  opacity:.9;
  pointer-events:none;
}
.epic-header .nav{position:relative;height:82px;gap:18px}
.epic-header .brand img{filter:drop-shadow(0 0 18px rgba(92,152,255,.35)) drop-shadow(0 0 8px rgba(246,200,95,.08));}
.epic-header .brand-copy strong{color:#f7f6f2;letter-spacing:.05em}
.epic-header .brand-copy span{color:#9fb1cb;letter-spacing:.22em}
.epic-header .menu{gap:16px;flex-wrap:nowrap}
.epic-header .menu a{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:10px 2px;
  color:#d7e1f3;
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:0 0 8px rgba(0,0,0,.2);
}
.epic-header .menu a:hover{color:#fff9e7}
.epic-header .menu a:after{
  bottom:-14px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(246,200,95,.0), rgba(246,200,95,.95), rgba(99,194,255,.75), rgba(246,200,95,.0));
  box-shadow:0 0 12px rgba(246,200,95,.22);
}
.epic-header .menu a.active{color:#fff4cd}
.epic-header .menu a.active:before,
.epic-header .menu a.nav-tower:before,
.epic-header .menu a.nav-schatzkammer:before{
  content:"";
  position:absolute;
  inset:4px -8px;
  border-radius:14px;
  border:1px solid rgba(246,200,95,.12);
  background:linear-gradient(180deg, rgba(246,200,95,.08), rgba(89,112,190,.05));
  opacity:0;
  z-index:-1;
  transition:.22s ease;
}
.epic-header .menu a.active:before{opacity:1}
.epic-header .menu a.nav-tower,
.epic-header .menu a.nav-schatzkammer{
  color:#f5e4a9 !important;
}
.epic-header .menu a.nav-tower:after,
.epic-header .menu a.nav-schatzkammer:after{transform:scaleX(1);opacity:.85}
.epic-header .menu a.nav-tower:before,
.epic-header .menu a.nav-schatzkammer:before{opacity:1}
.epic-header .menu a.nav-tower{
  text-shadow:0 0 14px rgba(246,200,95,.26), 0 0 22px rgba(91,132,255,.10);
}
.epic-header .menu a.nav-tower:hover,
.epic-header .menu a.nav-tower.active{color:#fff1bd !important}
.epic-header .menu a.nav-tower.active:before{
  border-color:rgba(246,200,95,.26);
  box-shadow:0 0 0 1px rgba(246,200,95,.10), 0 8px 20px rgba(61,95,187,.12), inset 0 0 0 1px rgba(255,255,255,.03);
}
.epic-header .menu a.nav-schatzkammer.active:before,
.epic-header .menu a.nav-schatzkammer:hover:before{
  border-color:rgba(246,200,95,.18);
}
.epic-header .nav-actions{gap:10px}
.epic-header .nav-btn{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.epic-header .mobile-toggle{border-color:rgba(255,255,255,.08)}

@media(max-width:1260px){
  .epic-header .menu .nav-dashboard,
  .epic-header .menu .nav-news,
  .epic-header .menu .nav-clips{display:none !important}
}
@media(max-width:1120px){
  .epic-header .menu .nav-wiki,
  .epic-header .menu .nav-classes{display:none !important}
}
@media(max-width:980px){
  .epic-header .menu .nav-community{display:none !important}
}
@media(max-width:820px){
  .topbar.epic-header:after{display:none}
  .epic-header .nav{height:76px}
  .epic-header .menu{
    display:none;
    position:absolute;
    top:76px;left:0;right:0;
    padding:16px 18px 20px;
    background:linear-gradient(180deg, rgba(4,10,22,.98), rgba(4,10,22,.98));
    border-bottom:1px solid rgba(246,200,95,.15);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .epic-header .menu.open{display:flex}
  .epic-header .menu a{display:flex !important;padding:12px 0}
  .epic-header .menu a:after{bottom:4px}
  .epic-header .menu .nav-dashboard,
  .epic-header .menu .nav-news,
  .epic-header .menu .nav-clips,
  .epic-header .menu .nav-wiki,
  .epic-header .menu .nav-classes,
  .epic-header .menu .nav-community{display:flex !important}
}
@media(max-width:560px){
  .epic-header .nav{height:68px}
  .epic-header .menu{top:68px}
}