/* === Tiled background system === */
:root {
  --russian-violet: #231942;
  --ultra-violet: #5e548e;
  --african-violet: #9f86c0;
  --lilac: #be95c4;
  --pink-lavender: #e0b1cb;
  --black-red: #250902;
  --dark-maroon: #38040e;

  /* tweakable light/shadow */
  --highlight: var(--pink-lavender);
  --midtone: var(--african-violet);
  --shadow: var(--russian-violet);

  --divider-gap: 6px;

  --sword-scale: 0.55; /* desktop size: 2× the shell width of the seam */
  --sword-y: -125%; /* how much it overlaps upward; tweak to taste */

  /* match your site-shell width so the board hugs its right edge */
  --shell-max: 900px; /* MUST match .site-shell max-width */
  --cork-gap: 16px; /* space between shell and board */
  --cork-top: 160px; /* vertical offset from top of page */
  --cork-border-color: var(--ultra-violet); /* matches panel borders */
  --cork-radius: var(--radius, 12px); /* use site radius if set */
  --cork-tint-top: rgba(224, 177, 203, 0.1); /* pink-lavender wash */
  --cork-tint-bottom: rgba(35, 25, 66, 0.16); /* russian-violet wash */
}

/* tiled GIF background */
body.tiled-bg {
  will-change: background-position;
  background-image: var(--tile-url);
  background-repeat: repeat;
  background-size: var(--tile-size) var(--tile-size);
  background-position: 0 0;
  background-attachment: scroll;
  image-rendering: pixelated;
}

/* dim overlay */
.tiled-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.35)
  );
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tile-url: url('./assets/large-sword.gif');
  }
}

/* ==== Shared shell so header + columns are same width & centered ========= */
.site-shell {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* === Title styles === */
.title-banner {
  text-align: center;
  margin: 2rem auto 2rem;
  margin-bottom: 0; /* remove extra space from banner wrapper */
}

.title-banner h1 {
  margin: 0; /* remove default h1 margin */
  padding: 10px 0; /* optional: add smaller padding instead */
  position: relative; /* create stacking context */
  z-index: 5; /* ensures it sits above sword */
}

/* === Pixelated Fantasy Title Upgrade === */
.fantasy-title {
  font-family: 'UnifrakturCook', cursive !important;
  font-weight: 700;
  font-size: clamp(60px, 10.5vw, 14px);
  line-height: 1;
  display: inline-block;

  /* extra spacing so letters don’t collide */
  letter-spacing: 0.08em;
  font-kerning: none;
  font-feature-settings: 'kern' 0;

  /* gradient fill */
  background-image: linear-gradient(
    180deg,
    var(--pink-lavender) 0%,
    var(--african-violet) 55%,
    var(--ultra-violet) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* thick outline */
  -webkit-text-stroke: 3px var(--lilac);
  paint-order: stroke fill;

  /* shadow “extrusion” in blocky steps */
  text-shadow: -2px -2px 0 var(--pink-lavender),
    -3px -3px 0 var(--african-violet), 2px 2px 0 var(--ultra-violet),
    3px 3px 0 var(--ultra-violet), 4px 4px 0 var(--russian-violet),
    5px 5px 0 var(--russian-violet), 6px 6px 0 var(--russian-violet);
}

/* ===== Pixelation effect ===== */
.fantasy-title.pixelated {
  image-rendering: pixelated; /* force pixel rendering */
  -webkit-font-smoothing: none; /* stop smoothing in WebKit */
  -moz-osx-font-smoothing: none; /* stop smoothing in Firefox/macOS */
  font-smooth: never; /* legacy */
  filter: contrast(1.3) saturate(1.1) brightness(0.95);
}
.title-banner {
  text-align: center;
  margin: 2.5rem auto;
}

.title-pixel {
  /* Start with a small source image (200–300px wide export works best) */
  width: 800px; /* scale up larger than original */
  height: auto;

  /* Force pixelation */
  image-rendering: pixelated; /* Chrome, Firefox */
  image-rendering: crisp-edges; /* Safari/Edge fallback */
  image-rendering: -moz-crisp-edges; /* legacy Firefox */

  display: inline-block;
}

/* ==== Header row (chunky / Y2K gloss) ==================================== */
.header-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(180deg, #0b0f1e 0%, var(--ink) 60%);
  border: var(--border) solid var(--russian-violet);
  border-bottom: 0;
  margin-bottom: 0;
  text-align: center;
  padding: 14px 10px; /* reduced height */
  min-height: 60px;
}

.header-tab {
  flex: 1;
  margin: 0 5px;
  padding: 10px 12px;
  height: 30px;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(0, 0, 0, 0.25)
    ),
    var(--ink);
  border: 1px solid var(--african-violet);
  border-radius: 8px;
  color: #ccc4e4;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-shadow: 0 1px 0 #000;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.header-tab:hover {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      rgba(0, 0, 0, 0.25)
    ),
    #0f1030;
  box-shadow: 0 0 0 2px var(--ultra-violet) inset,
    0 0 12px rgba(159, 134, 192, 0.35);
}

.header-tab.active {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(0, 0, 0, 0.3)
    ),
    var(--russian-violet);
  color: #fff;
  box-shadow: 0 0 0 2px var(--lilac) inset, 0 0 18px rgba(190, 149, 196, 0.4);
}

/* ==== Menu columns (same width as header, no vertical gap) =============== */

/* ==== Menu columns (boxed & even with gaps) =============================== */
.menu-columns {
  display: flex;
  gap: var(--col-gap, 10px); /* use a var so it's easy to tweak */
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03),
      rgba(0, 0, 0, 0.35)
    ),
    #0a0e1a;
  border: var(--border) solid var(--russian-violet);
  border-top: 0;
  margin-top: 0;
  padding: 10px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Let flex do the math; min-width:0 prevents content from forcing overflow */
.menu-column {
  flex: 1 1 0;
  min-width: 0;
}

/* Weights instead of fixed percentages, so gaps don’t push you past 100% */
.left-menu-column {
  flex: 1 1 0;
} /* ~25% of available space */
.middle-menu-column {
  flex: 2 1 0;
} /* ~50% */
.right-menu-column {
  flex: 1 1 0;
} /* ~25% */

/* Panels inside columns (chunky border + subtle plastic gloss) */
.panel {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(0, 0, 0, 0.25)
    ),
    #0d1326;
  border: 2px solid var(--ultra-violet);
  border-radius: var(--radius);
  padding: 12px;
  color: #e5e0f1;
  margin-bottom: 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(94, 84, 142, 0.25) inset;
}

/* Utility: pixel-ish crisp edges for images/icons */
img.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Small screens: keep the vibe but stack cleanly */
@media (max-width: 700px) {
  :root {
    --shell-width: 100%;
    --sword-scale: 1.1; /* keep it readable but contained */
    --sword-y: -150%; /* adjust vertical overlap on small screens */
  }
  .header-tab {
    font-size: 0.9rem;
    padding: 10px 8px;
  }
  .menu-columns {
    flex-direction: column;
  }
}

/* Optional: hide on narrow screens so it never overlaps content */
@media (max-width: 1100px) {
  .corkboard-rail {
    display: none;
  }
}

/* Sword divider — absolute overlay */
.sword-divider {
  position: relative; /* becomes the positioning context */
  height: 0; /* no extra vertical space */
  z-index: 10;
  z-index: -1; /* put sword behind title */

  pointer-events: none; /* purely decorative */
}

.sword-divider .sword-img {
  position: absolute;
  top: 0; /* align to the seam */
  left: 50%;
  transform: translate(-50%, var(--sword-y));
  width: clamp(260px, calc(100% * var(--sword-scale)), 1400px);
  max-width: none;
  height: auto;
  image-rendering: pixelated;
}

.corkboard-rail {
  position: fixed;
  top: var(--cork-top);
  left: calc(50% + (var(--shell-max) / 2) + var(--cork-gap));
  width: 150px;
  height: 600px;

  background-image: url('./assets/CorkboardTexture150x600.jpg');
  background-size: cover; /* image is 150x600, so this fits perfectly */
  background-repeat: no-repeat;
  background-position: center;

  z-index: 1; /* above the star bg, under your title/sword */
  pointer-events: none; /* doesn’t capture clicks; remove when pins are interactive */
  border: 2px solid var(--cork-border-color);
  border-radius: var(--cork-radius);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6),
    /* same drop as .panel */ 0 0 0 2px rgba(94, 84, 142, 0.25) inset; /* inner ring like .panel */
  overflow: hidden; /* clip the tint to rounded edges */
  z-index: 2; /* above bg, below title/sword if needed */
}
/* Soft tint overlay */
.corkboard-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--cork-tint-top),
    var(--cork-tint-bottom)
  );
  pointer-events: none;
}