@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Noto+Serif:wght@500;600;700&display=swap');

.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  backdrop-filter:blur(12px);
  background:rgba(6,8,12,.55);
  border-bottom:1px solid rgba(210,178,118,.22);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.header-landing{padding:0}
.header-inner{
  max-width:1240px;margin:0 auto;padding:0 22px;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.header-logo{
  font-family:Cinzel,"Noto Serif",Georgia,serif;font-weight:700;font-size:17px;
  letter-spacing:.22em;color:#e8ca92;border:1px solid rgba(214,178,119,.42);
  padding:7px 12px;border-radius:3px;flex-shrink:0;
}
.header-logo:hover{color:#f5e6c8;border-color:rgba(232,202,146,.55)}
.header-nav{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:22px;flex:1;
}
.header-cta-play{
  flex-shrink:0;padding:9px 20px;border-radius:2px;border:1px solid rgba(207,176,120,.55);
  background:linear-gradient(180deg,rgba(245,230,200,.14),rgba(100,78,48,.4));
  color:#fff8e6;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:filter .2s,transform .2s;
}
.header-cta-play:hover{filter:brightness(1.12);transform:translateY(-1px)}

.header-right{
  display:flex;align-items:center;gap:14px;flex-shrink:0;
}
.header-icons{
  display:flex;align-items:center;gap:10px;
}
.header-icon{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(214,178,119,.38);
  background:rgba(0,0,0,.18);
  color:#e8ca92;
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s, background .2s, border-color .2s, filter .2s;
}
.header-icon:hover{
  transform:translateY(-1px);
  background:rgba(214,178,119,.14);
  border-color:rgba(214,178,119,.65);
  filter:brightness(1.08);
}

.menu-item{
  cursor:pointer;font-weight:600;letter-spacing:.2px;
  color:#d7c59b;font-size:14px;text-transform:none;position:relative;
  display:flex;align-items:center;gap:8px;
}
.menu-item::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:transparent;transition:.25s
}
.menu-item:hover{color:#f1dfb2}
.menu-item:hover::after{background:linear-gradient(90deg,transparent,#d6b277,transparent)}

.menu-community{position:relative;display:flex;align-items:center;gap:8px}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}

.community-drop{
  display:none;position:absolute;top:30px;left:0;min-width:220px;
  background:rgba(18,20,27,.98);border:1px solid rgba(214,178,119,.22);
  border-radius:10px;overflow:hidden
}
.menu-community:hover .community-drop{display:block}
.community-drop a{display:block;padding:11px 12px;color:#e5dbc6}
.community-drop a:hover{background:rgba(214,178,119,.12)}

@media(max-width:900px){
  .header-inner{flex-wrap:wrap;height:auto;min-height:66px;padding-top:10px;padding-bottom:10px}
  .header-nav{order:3;width:100%;justify-content:center;gap:14px}
  .header-icons{display:none}
}
@media(max-width:520px){
  .header-logo{display:none}
  .header-cta-play{padding:8px 14px;font-size:11px}
  .menu-item{font-size:13px}
}