/* ================================
   Global layout (shared across pages)
   ================================ */

:root{
  --spellbound-purple-mystic:#30195e;
  --spellbound-purple-mystic-alpha:rgba(48,25,94,0.85);
  --spellbound-lavender-1:#e6d6ff;
  --spellbound-lavender-2:#dac9f9;
  --spellbound-glow-active:0 0 6px #ffffff, 0 0 12px #dac9f9, 0 0 20px #dac9f9;
  --spellbound-glow-hover:0 0 4px #ffffff, 0 0 8px #dac9f9;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: url('background-forest.png') no-repeat center center fixed;
  background-size: cover;
  font-family: sans-serif;
  color: #2c1b47;
  cursor: url('wand.cur'), auto;
  overflow-x: hidden; /* prevent mascot’s right overhang from making a scrollbar */
}

/* ----------------
   Header row (top)
   ---------------- */
.header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  width:950px;
  margin:20px auto 5px;
}

.header-row .top-link{
  font-family:'IM Fell English SC', serif;
  font-size:18px;
  color:var(--spellbound-lavender-2);
  text-decoration:none;
  font-weight:bold;
  white-space:nowrap;
}
.header-row .top-link:hover{
  text-shadow:var(--spellbound-glow-hover);
  color:var(--spellbound-lavender-1);
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'IM Fell English SC', serif;
  font-size:56px;
  color:var(--spellbound-lavender-1);
  text-shadow:3px 3px 6px #000000aa;
  white-space:nowrap;
}
.site-header .star{
  font-size:28px;
  color:#bfaeff;
  text-shadow:1px 1px 3px #00000066;
  margin:0 10px;
}

/* --------------
   Sticky Nav Bar
   -------------- */
#global-nav-wrapper{
  position: sticky;
  top: 0;
  z-index: 100;
  width: 950px;
  margin: 0 auto;
}
#global-nav{
  background: var(--spellbound-purple-mystic-alpha);
  padding: 4px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  border-radius:6px;
  box-shadow:0 0 10px rgba(0,0,0,0.5);
  font-family:'IM Fell English SC', serif;
  font-size:22px;
}
#global-nav a{
  color:var(--spellbound-lavender-2);
  text-decoration:none;
  transition:color .15s, text-shadow .15s;
}
#global-nav a:hover{ color:var(--spellbound-lavender-1); text-shadow:var(--spellbound-glow-hover); }
#global-nav a.active{ color:var(--spellbound-lavender-1); text-shadow:var(--spellbound-glow-active); }

/* ------------------------
   Main stack + content box
   ------------------------ */
.content-stack{
  width:950px;
  margin:12px auto 0;
  position: relative;   /* this makes the mascot position relative to this box */
  overflow: visible;
}

.content-box{
  width: 100%;
  overflow: auto;
  overflow-x: hidden;
  background-color: rgba(244, 239, 255, 0.65);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  /* height is set inline by layout.js so its bottom ends 50px above the viewport */
}

.content-box::-webkit-scrollbar{ width: 8px; }
.content-box::-webkit-scrollbar-thumb{
  background-color:#bda0ff;
  border-radius:6px;
  border:2px solid #f4efff;
}

/* -------
   Mascot
   ------- */
/*
 The mascot is ONLY controlled here.
 It is absolutely positioned relative to `.content-stack`.
 Change bottom/right to move it.
*/
.content-stack .mascot{
  position: absolute;
  right: -90px;             /* horizontal overhang */
  bottom: -30px;            /* vertical offset from bottom of the box */
  width: 160px;
  height: auto;
  pointer-events: none;
  z-index: 50;
}

/* ---------------
   Mobile tweaks
   --------------- */
@media (max-width:1024px){
  #global-nav-wrapper{ width:100%; }
  #global-nav{ flex-wrap:wrap; font-size:20px; }

  .header-row, .content-stack{ width:90%; }
  .content-stack .mascot{ display:none; }
}