/* ===========================
   Atomic FlyFF – Global Styles
   Theme: Warm / Amber
   =========================== */

/* ---------- CSS Vars ---------- */
:root{
  --amber-100:#FFEBD1;
  --amber-200:#FFD9A2;
  --amber-300:#F7C56F;
  --amber-400:#EF8A3B;
  --text:#F3F2EE;
  --text-dim:#D9D5CC;
  --bg-900:#0B0A08;           /* near-black */
  --bg-800:#171310;           /* dark warm */
  --panel:#120E0B;            /* glass panel base */
  --border:rgba(255,255,255,.12);
}

/* prevent scroll when mobile menu is open */
body.no-scroll { overflow: hidden; }

/* ---------- Header scroll shrink ---------- */
#site-header nav{
  transition: padding .22s ease, background .22s ease, box-shadow .22s ease;
}
#site-header.scrolled nav{
  background: rgba(11,10,8,.95);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  padding-top:.35rem;
  padding-bottom:.35rem;
}
.logo-img{ height: 2.5rem; transition: height .2s ease, transform .2s ease, filter .2s ease; }
#site-header.scrolled .logo-img{ height:2rem; filter: drop-shadow(0 0 6px rgba(255,190,120,.18)); }

/* ---------- Progress bar (top) ---------- */
#scroll-progress{
  position:fixed; left:0; top:0; height:3px; width:0%;
  background: linear-gradient(90deg,var(--amber-300),var(--amber-400),var(--amber-300));
  background-size:200% 100%;
  animation: flow 5s linear infinite;
  box-shadow:0 0 12px rgba(239,138,59,.55);
  z-index:1500;
  transition: width .25s ease-out;
}
@keyframes flow{
  0%{ background-position:0% 50% }
  100%{ background-position:200% 50% }
}

/* ---------- Underline nav links (desktop + mobile) ---------- */
.nav-link{
  position:relative;
  color: var(--text-dim);
  font-weight:600;
  letter-spacing:.25px;
  transition: color .2s ease;
}
.nav-link:hover{ color:#fff; }
.nav-link::after{
  content:"";
  position:absolute; left:50%; bottom:-6px;
  width:0; height:3px; border-radius:999px;
  background: linear-gradient(90deg,var(--amber-300),var(--amber-400));
  box-shadow:0 0 10px rgba(239,138,59,.4);
  transform: translateX(-50%);
  transition: width .15s ease;
}
.nav-link:hover::after{ width:56%; }
.nav-link.active{ color:#fff; }
.nav-link.active::after{ width:56%; }

/* ---------- animated border below navbar ---------- */
.navbar-border{
  height:2px;
  background: linear-gradient(90deg,var(--amber-300),var(--amber-400),var(--amber-300));
  background-size:200% 100%;
  animation: flow 5s linear infinite;
  box-shadow:0 0 12px rgba(239,138,59,.5);
}

/* ---------- Amber CTA buttons ---------- */
.btn-amber{
  background: linear-gradient(90deg,var(--amber-300),var(--amber-400));
  color:#0a0704;
  padding:.7rem 1.25rem;
  border-radius: .85rem;
  font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(239,138,59,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-amber:hover{ transform: translateY(-1px) scale(1.01); filter:brightness(1.04); box-shadow:0 14px 34px rgba(239,138,59,.35) }

.btn-ghost{
  color: var(--amber-100);
  background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:.85rem;
  padding:.7rem 1.25rem;
  font-weight:800;
  transition: background .2s ease,border-color .2s ease,transform .2s ease;
}
.btn-ghost:hover{ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); border-color:rgba(255,255,255,.16); transform:translateY(-1px) }

/* ======================================================
   Mobile Drawer (full height, scrollable, not overlapped)
   ====================================================== */
#mobile-menu{
  position:fixed;
  left:0; right:0;
  top: var(--header-h, 64px);
  height: calc(100vh - var(--header-h, 64px));
  background: rgba(11,10,8,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  z-index:1101;
  display:none;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem .75rem 1.25rem;
}
#mobile-menu.open{ display:block; animation: slideDown .18s ease-out; }
@keyframes slideDown{ from{ transform:translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } }

/* mobile link items */
#mobile-menu a{
  display:block;
  margin:.45rem .5rem;
  padding:.9rem 1rem;
  border-radius:.8rem;
  border:1px solid var(--border);
  color:#eee;
  background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
}
#mobile-menu a.active{
  outline:2px solid rgba(255,165,90,.35);
  box-shadow: inset 0 0 0 1px rgba(255,165,90,.2), 0 8px 18px rgba(255,165,90,.12);
}

/* Account panel headings inside mobile */
.mobile-section-title{
  font-size:.8rem; letter-spacing:.25rem; text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin:.75rem 1rem .35rem;
}

/* full-width logout button (never cut off) */
.mobile-logout{
  margin: .8rem .5rem 1.25rem;
  display:block; text-align:center;
  padding: .9rem 1rem;
  border-radius:.9rem;
  color:#0a0704;
  font-weight:900;
  background: linear-gradient(90deg,var(--amber-300),var(--amber-400));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(239,138,59,.25);
}

/* ---------- Hamburger ---------- */
.hamburger,
.hamburger::before,
.hamburger::after{
  content:"";
  display:block;
  width:26px; height:2px;
  background: linear-gradient(90deg,var(--amber-300),var(--amber-400));
  border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.hamburger{ position:relative; }
.hamburger::before{ position:absolute; top:-8px; }
.hamburger::after{ position:absolute; top:8px; }
.hamburger.active{ background:transparent; }
.hamburger.active::before{ transform: translateY(8px) rotate(45deg); }
.hamburger.active::after{ transform: translateY(-8px) rotate(-45deg); }

/* Overlay (click to dismiss) */
#mobile-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.6);
  display:none;
  z-index:1100;
}
#mobile-overlay.show{ display:block; }

/* helper */
.text-amber-300{ color: var(--amber-300); }
.text-amber-200{ color: var(--amber-200); }