/* Header, logo, and header button styles (extracted) */

.site-header{
  position:fixed;
  top:10px;
  left:12px;
  right:12px;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  pointer-events:auto;
  background: transparent;
  padding:6px 10px; /* slightly smaller header height */
  border-radius:12px;
  border: none;
  backdrop-filter: blur(6px);
  max-width:calc(100% - 24px);
}

/* top-left brand image (uses provided transparent asset) */
.top-left-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:8px;
  display:block;
  flex:0 0 48px;
  -webkit-font-smoothing:antialiased;
}

/* match the main card button's Old-English display style and size */
.site-header .header-title{
  margin:0;
  margin-left:8px;
  font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
  font-size:26px; /* larger to match main page button */
  font-weight:700;
  padding:6px 12px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  color:var(--green-2);
  transition: transform .18s ease, text-shadow .18s ease, color .12s ease;
  box-shadow: none;
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.45);
}
.site-header .header-title:hover{ transform: translateY(-2px); text-shadow: 0 18px 44px rgba(57,255,20,0.12); }

/* ensure header is unobtrusive on small screens */
@media (max-width:640px){
  .site-header{ top:8px; left:8px; right:8px; padding:6px 10px; gap:10px; }
  .top-left-logo{ width:44px; height:44px; flex:0 0 44px; }
  .site-header .header-title{ font-size:16px; padding:6px 10px; }
}

/* Old English header title in the header (fraktur display) */
.header-title{
  font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
  font-size:20px;
  color:var(--green-2);
  margin:0;
  cursor:pointer;
  transition: transform .28s ease, text-shadow .28s ease, color .18s ease;
  user-select: none;
  will-change: transform, text-shadow;
  text-shadow: 0 6px 20px rgba(57,255,20,0.06);
}
.header-title:active { transform: translateY(2px) scale(0.995); }

/* Saint Monti header button variant: box is solid black with subtle border for contrast */
.header-title.nav-btn {
  background: #000; /* solid black box */
  color: var(--green-2);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.45);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.header-title.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(57,255,20,0.08);
}

/* subtle interactive wobble for the header when toggled */
.header-animate {
  animation: header-wobble 900ms cubic-bezier(.17,.67,.35,1.02);
}
@keyframes header-wobble{
  0% { transform: translateY(0) rotate(-1deg) scale(1); text-shadow: 0 6px 20px rgba(57,255,20,0.06); }
  40% { transform: translateY(-6px) rotate(2deg) scale(1.02); text-shadow: 0 18px 48px rgba(57,255,20,0.18); }
  100% { transform: translateY(0) rotate(0deg) scale(1); text-shadow: 0 6px 20px rgba(57,255,20,0.06); }
}

/* small responsive header tweaks */
@media (max-width:640px){
  .site-header{ top:8px; left:8px; right:8px; padding:6px 10px; gap:10px; }
}