/* ============================================================
   ONE STOP SHOP — stylesheet
   ============================================================
   HOW TO CUSTOMIZE COLORS:
   Change the six values below and the whole site updates.
   ============================================================ */
:root {
  --wall:       #93813c;   /* main wallpaper colour */
  --wall-dark:  #5f5326;   /* darker wallpaper stripe */
  --wall-damp:  #332c14;   /* deep shadow / damp patch colour */
  --text:       #e7dfb8;   /* main text colour (sickly fluorescent cream) */
  --glow:       #ecdd8c;   /* flicker / highlight glow colour */
  --warn:       #8a2f2f;   /* danger / wrong-answer accent (dried blood) */
  --panel:      rgba(20, 18, 9, 0.6); /* translucent "clipboard" panel behind text */
}

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap');

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 17px;
  line-height: 1.6;
  background-color: var(--wall-dark);

  /* ★ IMAGE: rename your wallpaper picture to "wallpaper.png" and put
     it in the same folder as this file. It repeats (tiles) across the
     whole page by default, like real wallpaper. A darkening vignette
     sits on top of it automatically so the text stays readable.

     Want one big photo instead of a repeating tile? Change the two
     lines below marked "TILE MODE" to the "COVER MODE" versions
     shown right after them (delete whichever pair you're not using,
     or just leave both and make sure only one pair is uncommented). */

  background-image:
    /* damp corner vignette, drawn on top of the wallpaper photo */
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 30%, var(--wall-damp) 150%),
    url("wallpaper.png");

  /* TILE MODE (default) — repeats your picture like a wallpaper pattern */
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;

  /* COVER MODE — comment out the two lines above and un-comment these
     two instead, to stretch a single photo across the whole page:
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  */

  background-attachment: fixed, fixed;
  position: relative;
}

/* flat CRT scanline texture over everything, purely decorative + static */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.12) 0px,
    rgba(0,0,0,0.12) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
}

/* slow drifting grain layer, subtle and looping (ambient, not attention-grabbing) */
body::after {
  content: "";
  position: fixed;
  inset: -50px;
  pointer-events: none;
  z-index: 499;
  opacity: 0.05;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 3px 3px;
  animation: grain-drift 9s steps(6) infinite;
}

@keyframes grain-drift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-8px, 4px); }
  40%  { transform: translate(6px, -10px); }
  60%  { transform: translate(-4px, 8px); }
  80%  { transform: translate(9px, 2px); }
  100% { transform: translate(0,0); }
}

/* ============================================================
   NAVIGATION — styled like a row of hallway exit signs
   ============================================================ */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--wall-damp);
  border-bottom: 3px solid var(--ink, #14120a);
  box-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

nav.site-nav a {
  flex: 1 1 auto;
  text-align: center;
  padding: 14px 10px;
  color: var(--text);
  text-decoration: none;
  font-family: 'Special Elite', 'Courier New', monospace;
  letter-spacing: 0.04em;
  border-right: 1px solid rgba(0,0,0,0.35);
  transition: background-color 0.2s ease, color 0.2s ease;
}

nav.site-nav a:last-child { border-right: none; }

nav.site-nav a:hover,
nav.site-nav a:focus-visible {
  background-color: var(--glow);
  color: #1a1608;
}

nav.site-nav a.current {
  background-color: rgba(0,0,0,0.35);
  box-shadow: inset 0 -4px 0 var(--glow);
}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--glow);
  outline-offset: 2px;
}

/* ============================================================
   PAGE / PANEL LAYOUT
   ============================================================ */
main {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.panel {
  background: var(--panel);
  border: 1px solid rgba(236, 221, 140, 0.25);
  padding: 32px clamp(20px, 5vw, 44px);
  margin-bottom: 28px;
  box-shadow: 0 0 40px rgba(0,0,0,0.4);
}

h1, h2, h3 {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-weight: normal;
  line-height: 1.25;
  margin-top: 0;
}

h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); border-bottom: 1px solid rgba(236,221,140,0.25); padding-bottom: 10px; }

p { max-width: 68ch; }

a { color: var(--glow); }

/* ============================================================
   HERO / TITLE — the one orchestrated moment on load
   ============================================================ */
.hero {
  text-align: center;
  padding: 72px 24px 56px;
}

.hero h1 {
  color: var(--text);
  text-shadow:
    0 0 6px var(--glow),
    0 0 22px rgba(236, 221, 140, 0.55),
    0 0 1px #000;
  animation: light-on 1.6s ease-out both, hum 5s ease-in-out 1.6s infinite;
}

.hero .slogan {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 1.05rem;
  opacity: 0;
  color: var(--glow);
  animation: fade-in 1s ease-out 1.5s forwards;
}

/* fluorescent tube "power on" stutter, plays once */
@keyframes light-on {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  8%   { opacity: 0.2; }
  12%  { opacity: 1; }
  18%  { opacity: 0.3; }
  22%  { opacity: 1; }
  100% { opacity: 1; }
}

/* gentle continuous hum/flicker on the glow after power-on */
@keyframes hum {
  0%, 96%, 100% { text-shadow: 0 0 6px var(--glow), 0 0 22px rgba(236,221,140,0.55), 0 0 1px #000; }
  97% { text-shadow: 0 0 2px var(--glow), 0 0 8px rgba(236,221,140,0.3), 0 0 1px #000; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ============================================================
   FRAMED PHOTO BOX — used on the Location page
   ============================================================ */
.photo-box {
  max-width: 420px;
  margin: 24px auto;
  padding: 14px;
  background: #1a1710;
  border: 2px solid rgba(236,221,140,0.3);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 30px rgba(0,0,0,0.6);
  position: relative;
}

.photo-box::before {
  content: "REC ●";
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  color: #d94b4b;
  text-shadow: 0 0 6px rgba(217,75,75,0.8);
  letter-spacing: 0.05em;
}

.photo-box img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.25) contrast(1.05) saturate(0.8);
  border: 1px solid rgba(0,0,0,0.5);
}

.photo-box figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.75;
  text-align: center;
}

/* ============================================================
   STAFF GRID
   ============================================================ */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

.staff-card {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(236,221,140,0.2);
  padding: 18px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.staff-card:hover,
.staff-card:focus-within {
  border-color: var(--glow);
  box-shadow: 0 0 22px rgba(236,221,140,0.25);
}

.staff-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(0.35) sepia(0.15);
  border: 1px solid rgba(0,0,0,0.5);
  margin-bottom: 14px;
}

.staff-card h3 {
  margin-bottom: 2px;
  font-size: 1.1rem;
}

.staff-card .role {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--glow);
  margin-bottom: 10px;
}

.staff-card p { font-size: 0.92rem; margin: 0; }

/* ============================================================
   QUIZ PAGE
   ============================================================ */
.quiz-wrap { text-align: center; }

.quiz-question {
  display: none;
}
.quiz-question.active { display: block; }

.quiz-question img {
  max-width: 320px;
  width: 100%;
  border: 2px solid rgba(236,221,140,0.3);
  margin: 6px auto 22px;
  display: block;
  filter: sepia(0.2) contrast(1.05);
}

.quiz-choices {
  display: grid;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}

.quiz-choices button {
  font-family: 'Courier Prime', monospace;
  font-size: 1rem;
  padding: 14px 16px;
  background: rgba(0,0,0,0.3);
  color: var(--text);
  border: 1px solid rgba(236,221,140,0.3);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.quiz-choices button:hover,
.quiz-choices button:focus-visible {
  border-color: var(--glow);
  background: rgba(236,221,140,0.12);
}

.quiz-choices button.correct {
  background: rgba(80, 130, 70, 0.35);
  border-color: #7fbf6a;
}

.quiz-choices button.incorrect {
  background: rgba(138, 47, 47, 0.4);
  border-color: var(--warn);
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.quiz-progress {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 8px;
}

.quiz-next {
  margin-top: 22px;
  display: none;
}
.quiz-next.show { display: inline-block; }

.quiz-result { display: none; text-align: center; }
.quiz-result.active { display: block; }

.quiz-result .score {
  font-family: 'Special Elite', monospace;
  font-size: 2.2rem;
  color: var(--glow);
  text-shadow: 0 0 12px rgba(236,221,140,0.5);
}

/* simple button style reused for "next" / "play again" */
.btn {
  display: inline-block;
  font-family: 'Special Elite', monospace;
  color: var(--text);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--glow);
  padding: 12px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--glow); color: #1a1608; }

footer {
  text-align: center;
  padding: 28px 16px 60px;
  font-size: 0.8rem;
  opacity: 0.55;
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero h1, body::after { animation: none !important; }
}