/* =====================================================================
   HAWKINS FAN ZONE — shared look for every page
   A fan-made site. Not made by or connected to Netflix.
   ===================================================================== */
:root {
  --ink: #0a0410;
  --ink2: #140a1e;
  --red: #ff2020;
  --red-soft: #ff5a5a;
  --pink: #ff5fc8;
  --blue: #4fd2ff;
  --green: #6fff9c;
  --yellow: #ffd54a;
  --purple: #a66bff;
  --paper: #f3e6cf;
  --text: #ffe9e9;
  --dim: rgba(255, 233, 233, .68);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  min-height: 100%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 32, 32, .16), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(166, 107, 255, .14), transparent 55%),
    linear-gradient(180deg, #0c0514, #0a0410 60%, #06030c);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Nunito", "Trebuchet MS", "Segoe UI", sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- floating spores from the Upside Down ---------- */
#spores { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.spore { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 220, 220, .55);
         box-shadow: 0 0 8px rgba(255, 120, 120, .8); animation: drift linear infinite; }
@keyframes drift {
  from { transform: translate3d(0, 110vh, 0) scale(.6); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .7; }
  to { transform: translate3d(var(--dx, 20px), -10vh, 0) scale(1.1); opacity: 0; }
}

/* ---------- top bar ---------- */
header.bar {
  position: sticky; top: 0; z-index: 30;
  /* the dropdown hangs off this */
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px clamp(12px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(8, 3, 14, .96), rgba(8, 3, 14, .78));
  border-bottom: 1px solid rgba(255, 32, 32, .28);
  backdrop-filter: blur(6px);
}
.brand {
  font-family: "Noto Serif Display", Georgia, serif; font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); letter-spacing: 1px; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 6px var(--red), 0 0 18px rgba(255, 32, 32, .8);
  margin-right: auto; text-decoration: none; white-space: nowrap;
}
/* the menu hides behind an arrow so the top isn't crowded */
#menubtn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-weight: 800;
  font-size: .92rem; padding: 10px 16px; border-radius: 999px; color: var(--text);
  border: 1px solid rgba(255, 90, 90, .45); background: rgba(255, 32, 32, .14);
  box-shadow: none; -webkit-tap-highlight-color: transparent;
}
#menubtn .arrow { transition: transform .25s; font-size: .8em; }
#menubtn[aria-expanded="true"] .arrow { transform: rotate(180deg); }
#menubtn .where { opacity: .75; font-weight: 700; }

nav.links {
  display: flex; gap: 6px; flex-wrap: wrap;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  padding: 14px clamp(12px, 3vw, 28px) 18px;
  background: linear-gradient(180deg, rgba(10, 4, 16, .99), rgba(10, 4, 16, .96));
  border-bottom: 2px solid rgba(255, 32, 32, .45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  transform-origin: top;
  transition: opacity .2s, transform .22s, visibility .22s;
  opacity: 0; visibility: hidden; transform: scaleY(.92) translateY(-8px);
}
nav.links.open { opacity: 1; visibility: visible; transform: none; }
nav.links a {
  color: var(--text); text-decoration: none; font-weight: 800; font-size: .92rem;
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 90, 90, .3);
  background: rgba(255, 32, 32, .08); transition: all .2s;
}
nav.links a:hover, nav.links a.here { background: rgba(255, 32, 32, .3); border-color: var(--red); transform: translateY(-2px); }

/* ---------- headings and layout ---------- */
main { position: relative; z-index: 1; max-width: 1150px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(14px, 4vw, 28px) 80px; }
h1.title {
  font-family: "Noto Serif Display", Georgia, serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 8vw, 5rem); line-height: 1.05; letter-spacing: 2px; text-align: center;
  color: #ffdede; -webkit-text-stroke: 2px var(--red);
  text-shadow: 0 0 10px var(--red), 0 0 34px rgba(255, 32, 32, .85), 0 0 70px rgba(255, 32, 32, .5);
  animation: flicker 7s infinite;
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .35; } 94% { opacity: 1; } 96% { opacity: .5; } 97% { opacity: 1; }
}
h2.section {
  font-family: "Noto Serif Display", Georgia, serif; text-transform: uppercase; letter-spacing: 1.5px;
  font-size: clamp(1.4rem, 4vw, 2.2rem); margin: 48px 0 6px; color: #fff;
  text-shadow: 0 0 10px rgba(255, 32, 32, .8);
}
.sub { text-align: center; color: var(--dim); font-size: clamp(.95rem, 2.4vw, 1.15rem); margin-top: 10px; }
.lead { color: var(--dim); margin-bottom: 18px; max-width: 70ch; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; }
.card {
  position: relative; overflow: hidden; border-radius: 18px; padding: 20px;
  background: linear-gradient(160deg, rgba(32, 12, 40, .9), rgba(14, 6, 22, .9));
  border: 1px solid rgba(255, 90, 90, .25); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.card:hover { transform: translateY(-5px); border-color: var(--red); box-shadow: 0 16px 40px rgba(255, 32, 32, .25); }
.card h3 { font-size: 1.25rem; margin-bottom: 4px; color: #fff; }
.card .tag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: rgba(79, 210, 255, .16); border: 1px solid rgba(79, 210, 255, .45); color: var(--blue);
}
a.card { text-decoration: none; color: inherit; display: block; }
.emoji { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: 8px; }

/* ---------- buttons ---------- */
button, .btn {
  font-family: inherit; font-weight: 800; font-size: 1rem; color: #fff; cursor: pointer;
  border: none; border-radius: 999px; padding: 12px 20px; text-decoration: none; display: inline-block;
  background: linear-gradient(135deg, #ff2020, #a60e2f); box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(255, 32, 32, .4);
  transition: transform .15s, box-shadow .15s;
}
button:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 26px rgba(255, 32, 32, .6); }
button:active, .btn:active { transform: translateY(1px) scale(.98); }
button.ghost { background: rgba(255, 255, 255, .1); box-shadow: none; border: 1px solid rgba(255, 255, 255, .25); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- footer ---------- */
footer {
  position: relative; z-index: 1; text-align: center; padding: 30px 16px 50px;
  color: rgba(255, 233, 233, .5); font-size: .85rem; border-top: 1px solid rgba(255, 32, 32, .2);
}
footer strong { color: var(--red-soft); }

/* ---------- upside down mode ---------- */
body.upside .flip { transform: rotate(180deg); }
body.upside { filter: hue-rotate(-18deg) contrast(1.08); }
body.upside #spores .spore { background: rgba(190, 220, 255, .5); box-shadow: 0 0 10px rgba(120, 160, 255, .8); }

/* ---------- little helpers ---------- */
.center { text-align: center; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.quote { font-style: italic; color: #ffd9d9; border-left: 3px solid var(--red); padding-left: 12px; margin: 10px 0; }
.spoiler {
  background: #2a1030; color: transparent; border-radius: 6px; padding: 0 6px; cursor: pointer; transition: color .25s;
  text-shadow: none; user-select: none;
}
.spoiler.open { color: inherit; background: rgba(255, 32, 32, .12); user-select: text; }