@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;700;800&family=IM+Fell+English+SC&family=Special+Elite&display=swap');

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

:root {
  --forest-deep: #102419;
  --forest: #1a3324;
  --forest-soft: #31533c;
  --moss: #617456;
  --pine-mist: #d7ddcb;
  --paper: #efe1bf;
  --paper-deep: #dcc79c;
  --paper-shadow: #c9af7b;
  --paper-ink: #2d2115;
  --rust: #7f3520;
  --amber: #d49b2d;
  --gold: #f2c25b;
  --warning: #a9472a;
  --line: rgba(45, 33, 21, 0.18);
  --shadow: rgba(14, 10, 6, 0.24);
  --radius: 10px;
  --radius-lg: 22px;
  --ink-soft: rgba(59, 40, 23, 0.72);
  --ink-mid: #3a2818;
  --gold-dim: #8f6f2f;
  --border: rgba(76, 58, 33, 0.18);
  --parchment-bg: linear-gradient(180deg, #ddc998 0%, #d5bd88 100%);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Alegreya', serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 214, 123, 0.08), transparent 24%),
    radial-gradient(circle at 80% 15%, rgba(66, 104, 76, 0.2), transparent 24%),
    linear-gradient(180deg, #112117 0%, #183222 14%, #274431 22%, #d8c092 22.1%, #d6bb88 100%);
  color: var(--paper-ink);
  min-height: 100vh;
  line-height: 1.65;
  position: relative;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(65, 45, 25, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 45, 25, 0.06) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23251a10' stroke-opacity='.18' stroke-width='1.4'%3E%3Cpath d='M100 20l8 21 21 8-21 8-8 21-8-21-21-8 21-8z'/%3E%3Ccircle cx='155' cy='46' r='14'/%3E%3Cpath d='M30 150l18-18 22 22m54-46l12 12 18-18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px, 80px 80px, 420px 420px;
  mix-blend-mode: multiply;
}

body::after {
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

header,
section,
footer {
  position: relative;
  z-index: 1;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2rem;
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    linear-gradient(180deg, rgba(15, 24, 17, 0.96), rgba(22, 38, 28, 0.96)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 24px, rgba(0,0,0,0.03) 24px 48px);
  border-bottom: 2px solid rgba(212, 155, 45, 0.55);
  box-shadow: 0 14px 28px rgba(10, 10, 8, 0.18);
  backdrop-filter: blur(8px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.logo-text {
  font-family: 'IM Fell English SC', serif;
  font-size: 1.35rem;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #f4e6c5;
}

.logo-text span {
  display: block;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.2em;
}

nav {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav a {
  text-decoration: none;
  color: var(--pine-mist);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

nav a:hover,
nav a.active {
  color: #fff2d3;
  border-color: rgba(212, 155, 45, 0.45);
  background: rgba(212, 155, 45, 0.12);
  transform: translateY(-1px);
}

#cipher {
  padding: 4rem 2rem 4.5rem;
  overflow: hidden;
  background: linear-gradient(180deg, #1a3528 0%, #1e3d2a 100%);
}

#cipher::before,
#cipher::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

#cipher::before {
  width: 340px;
  height: 340px;
  top: -40px;
  right: -70px;
  border: 1px solid rgba(242, 194, 91, 0.18);
  opacity: 0.65;
}

#cipher::after {
  width: 260px;
  height: 260px;
  left: -50px;
  bottom: 20px;
  border: 1px solid rgba(215, 221, 203, 0.2);
  opacity: 0.4;
}

.section-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.hero-compass {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.hero-compass span {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px dashed rgba(255, 240, 204, 0.2);
  color: rgba(244, 230, 197, 0.82);
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
}

.hero-label,
.section-kicker {
  font-family: 'Special Elite', monospace;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-label {
  color: var(--gold);
  margin-bottom: 0.65rem;
}

.hero-title,
.section-title {
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.04em;
}

.hero-title {
  font-size: clamp(2.8rem, 6vw, 5rem);
  color: #f4e6c5;
  line-height: 0.95;
  max-width: 8ch;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}

.hero-sub {
  max-width: 620px;
  margin-top: 1rem;
  color: rgba(244, 230, 197, 0.84);
  font-size: 1.08rem;
}

.hero-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 760px;
  margin: 1.8rem 0 2.25rem;
}

.hero-note {
  position: relative;
  padding: 1rem 1rem 1rem 1.15rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(239, 225, 191, 0.16), rgba(239, 225, 191, 0.08)),
    rgba(8, 13, 10, 0.18);
  border: 1px solid rgba(242, 194, 91, 0.18);
  box-shadow: 0 18px 40px rgba(10, 12, 10, 0.18);
}

.hero-note::before {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), rgba(242, 194, 91, 0.2));
  border-radius: 999px;
}

.hero-note-kicker {
  display: block;
  margin-left: 0.9rem;
  margin-bottom: 0.35rem;
  color: var(--gold);
  font-family: 'Special Elite', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-note strong {
  display: block;
  margin-left: 0.9rem;
  color: #fff1cd;
  font-family: 'IM Fell English SC', serif;
  font-size: 1.15rem;
}

.hero-note p {
  margin-left: 0.9rem;
  color: rgba(244, 230, 197, 0.74);
  font-size: 0.92rem;
}

.cipher-workspace {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr;
  gap: 1.35rem;
  max-width: 980px;
}

.cipher-card,
.paper-panel,
.egg-card,
.char-card {
  position: relative;
  overflow: hidden;
}

.cipher-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(239, 225, 191, 0.12), rgba(239, 225, 191, 0.04)),
    rgba(8, 15, 11, 0.42);
  border: 1px solid rgba(242, 194, 91, 0.22);
  box-shadow: 0 24px 46px rgba(9, 10, 8, 0.22);
}

.cipher-card::before,
.paper-panel::before,
.egg-card::before,
.char-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.08), transparent 36%);
}

.cipher-card h3 {
  font-family: 'IM Fell English SC', serif;
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.field-label,
.filter-label,
.result-area .result-label,
.char-facts h4,
.char-related-eggs h4 {
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-label {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(244, 230, 197, 0.76);
}

.cipher-select,
.cipher-textarea,
.key-input {
  width: 100%;
  border: 1px solid rgba(242, 194, 91, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(252, 236, 205, 0.08), rgba(252, 236, 205, 0.02)),
    rgba(0, 0, 0, 0.22);
  color: #f7eed5;
  font-family: 'Special Elite', monospace;
}

.cipher-select {
  padding: 0.85rem 0.95rem;
  margin-bottom: 1rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M2 2l5 5 5-5' stroke='%23f2c25b' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.cipher-select option { background: #233525; }

.cipher-textarea {
  min-height: 112px;
  padding: 0.9rem 1rem;
  resize: vertical;
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: 0.92rem;
}

.cipher-textarea::placeholder { color: rgba(247, 238, 213, 0.4); }

.key-input {
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
}

.cipher-select:focus,
.cipher-textarea:focus,
.key-input:focus {
  outline: none;
  border-color: rgba(242, 194, 91, 0.54);
  box-shadow: 0 0 0 4px rgba(212, 155, 45, 0.08);
}

.vigenere-key-row {
  display: none;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.vigenere-key-row.visible { display: flex; }

.decode-btn,
.filter-btn,
.tier-btn,
.spoiler-btn,
.try-it-btn,
.char-expand-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.decode-btn {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, #edbf60, #c98f2a);
  color: #2a1d11;
  box-shadow: 0 10px 24px rgba(86, 48, 12, 0.28);
  font-family: 'Special Elite', monospace;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.decode-btn:hover,
.filter-btn:hover,
.tier-btn:hover,
.spoiler-btn:hover,
.try-it-btn:hover,
.char-expand-btn:hover {
  transform: translateY(-1px);
}

.result-area {
  margin-top: 1rem;
  min-height: 68px;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  background: rgba(3, 8, 6, 0.28);
  border: 1px solid rgba(242, 194, 91, 0.14);
}

.result-area .result-label {
  color: rgba(242, 194, 91, 0.82);
  margin-bottom: 0.35rem;
}

.result-area .result-text {
  color: #ffe2a2;
  font-family: 'Special Elite', monospace;
  font-size: 0.95rem;
  word-break: break-word;
}

.result-area .result-empty {
  color: rgba(215, 221, 203, 0.58);
  font-style: italic;
}

.cipher-ref-list { list-style: none; }

.cipher-ref-item {
  padding: 0.9rem 0 1rem;
  border-bottom: 1px dashed rgba(242, 194, 91, 0.18);
  cursor: pointer;
}

.cipher-ref-item:last-child { border-bottom: 0; }

.cipher-ref-name {
  color: #f7ecd1;
  font-family: 'IM Fell English SC', serif;
  font-size: 1.1rem;
}

.cipher-ref-meta {
  color: rgba(242, 194, 91, 0.76);
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cipher-ref-desc {
  display: none;
  margin-top: 0.55rem;
  padding-left: 0.8rem;
  border-left: 2px solid rgba(242, 194, 91, 0.24);
  color: rgba(244, 230, 197, 0.8);
  font-size: 0.92rem;
}

.cipher-ref-item.expanded .cipher-ref-desc { display: block; }

.try-it-btn {
  margin-top: 0.7rem;
  border: 1px solid rgba(242, 194, 91, 0.38);
  background: transparent;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  color: var(--gold);
  cursor: pointer;
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#eggs,
#characters {
  padding: 0 2rem 1.5rem;
}

.paper-panel {
  padding: 2rem;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 247, 224, 0.46), rgba(237, 220, 182, 0.92)),
    var(--paper);
  border: 1px solid rgba(102, 70, 31, 0.2);
  box-shadow:
    0 26px 48px rgba(59, 35, 12, 0.18),
    inset 0 0 0 1px rgba(255, 248, 230, 0.32);
}

.paper-panel::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(107, 76, 37, 0.18);
  border-radius: 22px;
  pointer-events: none;
}

.section-archive {
  background:
    linear-gradient(180deg, rgba(253, 248, 232, 0.84), rgba(232, 214, 174, 0.96)),
    var(--paper);
}

.section-archive::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.08), transparent 36%),
    radial-gradient(circle at top right, rgba(74, 136, 80, 0.08), transparent 28%);
}

.section-shack::after {
  box-shadow: inset 0 0 0 6px rgba(127, 53, 32, 0.04);
}

.section-scrap {
  transform: rotate(-0.35deg);
}

.section-scrap::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.08), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(76, 58, 33, 0.03) 34px 35px);
}

.section-index::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.08), transparent 36%),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(76, 58, 33, 0.035) 64px 65px);
}

.section-journal::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.08), transparent 36%),
    radial-gradient(circle at bottom left, rgba(42, 74, 122, 0.08), transparent 28%);
}

.section-danger::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.08), transparent 36%),
    linear-gradient(125deg, transparent 0 64%, rgba(139, 32, 32, 0.08) 64% 67%, transparent 67% 100%);
}

.section-occult::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.08), transparent 36%),
    radial-gradient(circle at center, rgba(212, 155, 45, 0.08), transparent 42%);
}

.section-caseboard::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), transparent 34%),
    linear-gradient(315deg, rgba(117, 72, 39, 0.06), transparent 36%),
    linear-gradient(35deg, transparent 0 46%, rgba(139, 32, 32, 0.08) 46% 47%, transparent 47% 100%),
    linear-gradient(145deg, transparent 0 56%, rgba(45, 92, 48, 0.08) 56% 57%, transparent 57% 100%);
}

.section-kicker {
  color: var(--rust);
  margin-bottom: 0.6rem;
}

.section-title {
  font-size: clamp(2.1rem, 4vw, 3rem);
  color: #3b2817;
  margin-bottom: 0.35rem;
}

.section-subtitle {
  max-width: 640px;
  color: rgba(59, 40, 23, 0.78);
  font-size: 1rem;
  margin-bottom: 1.7rem;
}

.spoiler-tier-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(127, 53, 32, 0.06);
  border: 1px solid rgba(127, 53, 32, 0.14);
  color: #5e3924;
  font-family: 'Special Elite', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tier-selector,
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.tier-selector { margin-left: auto; }

.filter-bar { margin-bottom: 1.4rem; }

.filter-label {
  color: rgba(78, 56, 32, 0.7);
  margin-right: 0.15rem;
}

.filter-btn,
.tier-btn {
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.filter-btn {
  padding: 0.52rem 0.82rem;
  border: 1px solid rgba(76, 58, 33, 0.2);
  background: rgba(255,255,255,0.28);
  color: #4a3420;
}

.filter-btn.active {
  background: #3b2817;
  border-color: #3b2817;
  color: #f5e5c0;
  box-shadow: 0 8px 18px rgba(59, 40, 23, 0.16);
}

.tier-btn {
  padding: 0.46rem 0.72rem;
  border: 1px solid rgba(127, 53, 32, 0.22);
  background: rgba(255,255,255,0.22);
  color: var(--rust);
}

.tier-btn.active {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff0d7;
}

.eggs-grid,
.char-grid {
  display: grid;
  gap: 1rem;
}

.egg-card {
  padding: 1.15rem 1.2rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 251, 238, 0.86), rgba(239, 225, 191, 0.92));
  border: 1px solid rgba(76, 58, 33, 0.14);
  box-shadow: 0 16px 28px rgba(78, 50, 23, 0.12);
}

.egg-card.hidden { display: none; }

.egg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

.badge {
  padding: 0.24rem 0.52rem;
  border-radius: 999px;
  font-family: 'Special Elite', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-ep { background: #e0d1aa; color: #47311d; }
.badge-bg { background: #ccdcb7; color: #2d4b25; }
.badge-crypt { background: #efcf92; color: #6d4314; }
.badge-jour { background: #d8c0ac; color: #6e3327; }
.badge-tier-safe { background: #d6e1c5; color: #2d4b25; }
.badge-tier-s1 { background: #d8d9ba; color: #4c4c23; }
.badge-tier-s2 { background: #e9c98c; color: #71471c; }
.badge-tier-finale { background: #e7b3a6; color: #742d20; }

.egg-title,
.char-name {
  font-family: 'IM Fell English SC', serif;
  color: #372415;
}

.egg-title {
  font-size: 1.35rem;
  line-height: 1.05;
  margin-bottom: 0.3rem;
}

.egg-hint,
.char-bio,
.char-full-bio,
.char-fact {
  color: rgba(55, 36, 21, 0.8);
}

.egg-hint {
  font-size: 1rem;
}

.spoiler-toggle {
  margin-top: 0.85rem;
}

.spoiler-btn,
.char-expand-btn {
  border: 1px solid rgba(49, 83, 60, 0.28);
  background: rgba(49, 83, 60, 0.06);
  color: #274331;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spoiler-btn { padding: 0.52rem 0.8rem; }

.char-expand-btn {
  margin-top: 0.8rem;
  padding: 0.46rem 0.72rem;
}

.spoiler-btn.revealed {
  color: #6f2418;
  border-color: rgba(127, 53, 32, 0.32);
  background: rgba(127, 53, 32, 0.07);
}

.spoiler-text {
  display: none;
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(255, 247, 223, 0.7);
  border-left: 4px solid rgba(49, 83, 60, 0.55);
  animation: liftIn 0.28s ease;
}

.spoiler-text.open { display: block; }

#characters { padding-bottom: 3rem; }

.char-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.char-card {
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 250, 237, 0.92), rgba(232, 212, 169, 0.94));
  border: 1px solid rgba(76, 58, 33, 0.16);
  box-shadow: 0 18px 30px rgba(78, 50, 23, 0.13);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.char-card:hover {
  transform: translateY(-2px) rotate(-0.2deg);
  box-shadow: 0 24px 38px rgba(78, 50, 23, 0.18);
}

.char-card-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 1.2rem 1rem;
  border-bottom: 1px dashed rgba(76, 58, 33, 0.16);
}

.char-avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IM Fell English SC', serif;
  font-size: 1.45rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32);
}

.char-avatar.blue { background: #bfd3d8; color: #244c5d; }
.char-avatar.pink { background: #e3c1bf; color: #70332d; }
.char-avatar.amber { background: #eccb97; color: #744915; }
.char-avatar.teal { background: #c1ddd2; color: #1f574c; }
.char-avatar.red { background: #dfb4a5; color: #7a2c1f; }
.char-avatar.green { background: #cfd7af; color: #455b21; }

.char-name {
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.char-role {
  color: rgba(55, 36, 21, 0.64);
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.char-card-body,
.char-full-bio,
.char-facts,
.char-related-eggs {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.char-card-body { padding-top: 1rem; padding-bottom: 1rem; }

.char-bio {
  font-size: 0.98rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.char-full { display: none; }
.char-full.open { display: block; }

.char-full-bio {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px dashed rgba(76, 58, 33, 0.16);
  background: rgba(255, 247, 223, 0.36);
}

.char-facts,
.char-related-eggs {
  border-top: 1px dashed rgba(76, 58, 33, 0.16);
}

.char-facts { padding-top: 1rem; padding-bottom: 1rem; }
.char-related-eggs { padding-top: 0.9rem; padding-bottom: 1rem; }

.char-facts h4 { color: #7f3520; margin-bottom: 0.7rem; }
.char-related-eggs h4 { color: #274331; margin-bottom: 0.55rem; }

.char-fact {
  margin-bottom: 0.55rem;
  padding-left: 0.8rem;
  border-left: 3px solid rgba(212, 155, 45, 0.28);
}

.char-fact:last-child { margin-bottom: 0; }

.related-egg-link {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: #274331;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(39, 67, 49, 0.35);
}

.related-egg-link:hover { color: #1a2f22; }

footer {
  padding: 1.8rem 2rem 2.2rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(15, 24, 17, 0), rgba(15, 24, 17, 0.82) 25%, rgba(15, 24, 17, 0.96));
}

.footer-text {
  color: rgba(244, 230, 197, 0.72);
  font-size: 0.88rem;
  line-height: 1.9;
}

.footer-credit {
  font-size: 0.78rem;
  opacity: 0.6;
}

.footer-link {
  color: rgba(244, 230, 197, 0.85);
  text-underline-offset: 3px;
  transition: opacity 0.15s;
}

.footer-link:hover { opacity: 0.6; }

/* Reveal classes — content always visible, animation is enhancement only */
.reveal {
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal-stagger > * {
  /* no hidden state — cards always render */
}

@keyframes liftIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 860px) {
  header {
    height: auto;
    padding: 0.9rem 1rem;
    align-items: flex-start;
    flex-direction: column;
  }

  nav { width: 100%; justify-content: flex-start; }

  #cipher,
  #eggs,
  #characters,
  footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-wrapper { padding: 2rem 0; }
  .cipher-workspace,
  .hero-notes { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero-title { max-width: none; }
  .paper-panel { padding: 1.35rem; border-radius: 22px; }
  .spoiler-tier-notice { align-items: flex-start; }
  .tier-selector { margin-left: 0; }
  .char-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════
   HERO HUB
════════════════════════════════════════ */

#hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 2rem 4rem;
  background: linear-gradient(180deg, #112218 0%, #1a3528 100%);
}

/* Constellation dots */
#hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8%  14%, rgba(245,200,66,0.7) 0%, transparent 100%),
    radial-gradient(1px   1px   at 18% 68%, rgba(245,200,66,0.4) 0%, transparent 100%),
    radial-gradient(2px   2px   at 33% 28%, rgba(168,210,200,0.5) 0%, transparent 100%),
    radial-gradient(1px   1px   at 52% 82%, rgba(245,200,66,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 67% 12%, rgba(168,210,200,0.6) 0%, transparent 100%),
    radial-gradient(1px   1px   at 78% 55%, rgba(245,200,66,0.45) 0%, transparent 100%),
    radial-gradient(2px   2px   at 91% 38%, rgba(168,210,200,0.3) 0%, transparent 100%),
    radial-gradient(1px   1px   at 42% 47%, rgba(245,200,66,0.25) 0%, transparent 100%),
    radial-gradient(1px   1px   at 85% 78%, rgba(245,200,66,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 24% 90%, rgba(168,210,200,0.35) 0%, transparent 100%);
}

/* Large ghost Bill triangle */
#hero::after {
  content: '';
  position: absolute;
  right: -60px; top: 50%;
  transform: translateY(-50%);
  width: 500px; height: 440px;
  opacity: 0.03; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 87'%3E%3Cpolygon points='50,2 98,85 2,85' fill='%23f5c842'/%3E%3Cellipse cx='50' cy='55' rx='14' ry='18' fill='%230d1f2d'/%3E%3Cellipse cx='50' cy='55' rx='7' ry='9' fill='%23f5c842'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hero-inner {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

.hero-copy {
  min-width: 0;
}

.hero-dossier {
  display: grid;
  gap: 1rem;
}

.hero-dossier-card {
  position: relative;
  padding: 1.15rem 1.15rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(245,200,66,0.14);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.88), rgba(231, 213, 168, 0.94));
  color: #3a2818;
  box-shadow: 0 22px 38px rgba(7, 12, 9, 0.18), inset 0 0 0 1px rgba(255,255,255,0.22);
  transform: rotate(-1.2deg);
}

.hero-dossier-card:nth-child(2) {
  transform: rotate(1.35deg);
}

.hero-dossier-card:nth-child(3) {
  transform: rotate(-0.4deg);
}

.hero-dossier-card::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 14px;
  width: 54px;
  height: 18px;
  border-radius: 3px;
  background: rgba(255,255,255,0.28);
  transform: rotate(6deg);
  opacity: 0.8;
}

.dossier-stamp {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.22rem 0.48rem;
  border: 1px solid rgba(122, 53, 33, 0.26);
  color: #7f3520;
  font-family: 'Special Elite', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dossier-title {
  font-family: 'IM Fell English SC', serif;
  font-size: 1.25rem;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.hero-dossier-card p {
  color: rgba(58, 40, 24, 0.82);
  line-height: 1.48;
}

.dossier-journal {
  border-left: 6px solid rgba(42, 74, 122, 0.52);
}

.dossier-casefile {
  border-left: 6px solid rgba(45, 92, 48, 0.52);
}

.dossier-warning {
  border-left: 6px solid rgba(127, 53, 32, 0.52);
}

.hero-archive {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.archive-tool {
  position: relative;
  padding: 1.15rem 1.2rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(245,200,66,0.18);
  background:
    linear-gradient(180deg, rgba(239, 225, 191, 0.18), rgba(239, 225, 191, 0.08)),
    rgba(8, 15, 11, 0.34);
  box-shadow: 0 20px 40px rgba(8, 12, 10, 0.18);
  overflow: hidden;
}

.archive-tool::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,0.03) 34px 35px);
}

.archive-kicker,
.archive-label,
.archive-search-status,
.archive-checklist {
  position: relative;
  z-index: 1;
}

.archive-kicker {
  margin-bottom: 0.5rem;
  color: var(--gold);
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.archive-label {
  display: block;
  margin-bottom: 0.8rem;
  color: rgba(244, 230, 197, 0.86);
  font-family: 'IM Fell English SC', serif;
  font-size: 1.1rem;
}

.archive-search-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
}

.archive-search-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(242, 194, 91, 0.24);
  background: rgba(0, 0, 0, 0.22);
  color: #f7eed5;
  font-family: 'Special Elite', monospace;
}

.archive-search-input::placeholder {
  color: rgba(247, 238, 213, 0.44);
}

.archive-search-input:focus {
  outline: none;
  border-color: rgba(242, 194, 91, 0.54);
  box-shadow: 0 0 0 4px rgba(212, 155, 45, 0.08);
}

.archive-random-btn {
  border: 1px solid rgba(242, 194, 91, 0.32);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  background: rgba(212, 155, 45, 0.12);
  color: #f2d79d;
  cursor: pointer;
  font-family: 'Special Elite', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.archive-random-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 194, 91, 0.52);
  background: rgba(212, 155, 45, 0.18);
}

.archive-search-status {
  margin-top: 0.7rem;
  color: rgba(244, 230, 197, 0.62);
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.archive-search-results {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.65rem;
  margin-top: 0.95rem;
}

.archive-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(242, 194, 91, 0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  color: #f5e6c1;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.archive-result:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 194, 91, 0.34);
  background: rgba(255,255,255,0.08);
}

.archive-result-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(242, 194, 91, 0.24);
  background: rgba(245, 200, 66, 0.08);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
}

.archive-result-body {
  min-width: 0;
}

.archive-result-body > span {
  display: block;
}

.archive-result-type {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: rgba(242, 194, 91, 0.84);
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.archive-result-title {
  font-family: 'IM Fell English SC', serif;
  font-size: 1rem;
  line-height: 1.1;
  color: #f8ecd0;
}

.archive-result-blurb {
  margin-top: 0.28rem;
  color: rgba(244, 230, 197, 0.7);
  font-size: 0.86rem;
  line-height: 1.45;
}

.archive-result-jump {
  color: rgba(242, 194, 91, 0.7);
  font-family: 'Special Elite', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.archive-checklist {
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(244, 230, 197, 0.8);
}

.archive-checklist li + li {
  margin-top: 0.65rem;
}

.archive-checklist a {
  color: #f2d79d;
  text-decoration-color: rgba(242, 194, 91, 0.38);
}
}

/* Bill quote block */
.bill-quote-wrap {
  margin-top: 1.5rem;
  padding: 0.75rem 1.1rem;
  border-left: 3px solid rgba(245,200,66,0.4);
  max-width: 560px;
  min-height: 3.2rem;
}

.bill-quote-attr {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,200,66,0.5);
  margin-right: 0.5rem;
}

.bill-quote-text {
  font-family: 'IM Fell English SC', serif;
  font-size: 1rem;
  color: rgba(244,230,197,0.7);
  font-style: italic;
  line-height: 1.5;
  transition: opacity 0.4s ease;
}

.bill-quote-text.fading { opacity: 0; }

/* Section navigation cards */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.hero-card {
  display: block;
  text-decoration: none;
  padding: 1.25rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(245,200,66,0.15);
  background:
    linear-gradient(180deg, rgba(255, 247, 220, 0.18), rgba(210, 179, 108, 0.04)),
    rgba(255,255,255,0.04);
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  box-shadow: 0 16px 32px rgba(8, 12, 10, 0.16);
  backdrop-filter: blur(4px);
}

.hero-card:hover {
  border-color: rgba(245,200,66,0.4);
  background: rgba(245,200,66,0.06);
  transform: translateY(-2px);
}

.hero-card-glyph {
  width: 42px;
  height: 42px;
  margin-bottom: 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(245,200,66,0.22);
  background-color: rgba(0,0,0,0.14);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.hero-card-name {
  font-family: 'IM Fell English SC', serif;
  font-size: 1rem;
  color: #f4e6c5;
  margin-bottom: 0.3rem;
  line-height: 1.2;
}

.hero-card-desc {
  font-family: 'Special Elite', monospace;
  font-size: 0.7rem;
  color: rgba(244,230,197,0.5);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.symbol-cipher {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6h10M7 12h10M7 18h10'/%3E%3Cpath d='M10 4v16M14 4v16' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-rune {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 9-7 9-7-9z'/%3E%3Cpath d='M12 7v10M8 12h8' opacity='.65'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-bill {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 15H4z'/%3E%3Cellipse cx='12' cy='13' rx='4.4' ry='2.6'/%3E%3Ccircle cx='12' cy='13' r='1.2' fill='%23f2c25b'/%3E%3Cpath d='M12 18v3M9 20h6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-note {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h9l3 3v13H6z'/%3E%3Cpath d='M15 4v4h4M9 12h6M9 16h4' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-map {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l5-2 6 2 5-2v14l-5 2-6-2-5 2z'/%3E%3Cpath d='M9 4v14M15 6v14' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-zodiac {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4v2M12 18v2M4 12h2M18 12h2M6.3 6.3l1.4 1.4M16.3 16.3l1.4 1.4M17.7 6.3l-1.4 1.4M7.7 16.3l-1.4 1.4' opacity='.72'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-journal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4.5h9a3 3 0 0 1 3 3v12H9a3 3 0 0 0-3 3z'/%3E%3Cpath d='M6 4.5v15a3 3 0 0 1 3-3h9' opacity='.72'/%3E%3Cpath d='M12 8.5c1.8 0 2.2 1.6 2.2 2.2S13.8 13 12 13s-2.2-1.6-2.2-2.2S10.2 8.5 12 8.5z'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-question {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 9.2a2.8 2.8 0 1 1 4.3 2.4c-1 .7-1.8 1.2-1.8 2.4'/%3E%3Cpath d='M12.3 18h.01'/%3E%3Ccircle cx='12' cy='12' r='8.5' opacity='.38'/%3E%3C/g%3E%3C/svg%3E");
}

.symbol-pinetree {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l4 5h-2.2l3.2 4H14l3 4H7l3-4H7.1l3.2-4H8z'/%3E%3Cpath d='M12 17v3'/%3E%3C/g%3E%3C/svg%3E");
}

.archive-result[data-type="egg"] .archive-result-mark,
.archive-result[data-type="theory"] .archive-result-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 15H4z'/%3E%3Cellipse cx='12' cy='13' rx='4.4' ry='2.6'/%3E%3Ccircle cx='12' cy='13' r='1.2' fill='%23f2c25b'/%3E%3C/g%3E%3C/svg%3E");
}

.archive-result[data-type="character"] .archive-result-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l4 5h-2.2l3.2 4H14l3 4H7l3-4H7.1l3.2-4H8z'/%3E%3Cpath d='M12 17v3'/%3E%3C/g%3E%3C/svg%3E");
}

.archive-result[data-type="episode"] .archive-result-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l5-2 6 2 5-2v14l-5 2-6-2-5 2z'/%3E%3Cpath d='M9 4v14M15 6v14' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
}

.archive-result[data-type="journal"] .archive-result-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4.5h9a3 3 0 0 1 3 3v12H9a3 3 0 0 0-3 3z'/%3E%3Cpath d='M6 4.5v15a3 3 0 0 1 3-3h9' opacity='.72'/%3E%3C/g%3E%3C/svg%3E");
}

.archive-result[data-type="cipher"] .archive-result-mark,
.archive-result[data-type="marginalia"] .archive-result-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f2c25b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6h10M7 12h10M7 18h10'/%3E%3Cpath d='M10 4v16M14 4v16' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}

/* ════════════════════════════════════════
   McGUCKET'S MARGINALIA
════════════════════════════════════════ */

.marginalia-grid {
  display: grid;
  gap: 14px;
}

.marginalia-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.25);
  position: relative;
}

.marginalia-card::after {
  content: '✎';
  position: absolute;
  bottom: 10px; right: 14px;
  font-size: 0.85rem;
  opacity: 0.08;
  pointer-events: none;
}

.marginalia-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.5rem;
}

.marginalia-location {
  font-family: 'Special Elite', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.marginalia-ep {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  color: var(--gold-dim);
  background: rgba(200,130,10,0.1);
  padding: 1px 7px;
  border-radius: 2px;
}

.marginalia-text {
  font-family: 'IM Fell English SC', serif;
  font-size: 1rem;
  color: var(--ink-mid);
  line-height: 1.45;
  margin-bottom: 0.55rem;
}

.marginalia-note {
  font-family: 'Special Elite', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.6;
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid rgba(122,26,16,0.25);
}

/* ── Responsive additions ── */
@media (max-width: 680px) {
  #hero { padding: 4rem 1rem 3rem; min-height: auto; }
  .hero-top,
  .hero-archive { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-card { padding: 1rem 0.85rem; }
  .hero-card-desc { display: none; }
  .archive-search-row { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card-desc { display: none; }
}

/* ════════════════════════════════════════
   CIPHER HUNT
════════════════════════════════════════ */

#cipherhunt { background: var(--parchment-bg); }

.hunt-progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.hunt-progress-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hunt-progress-track {
  flex: 1;
  min-width: 120px;
  height: 6px;
  background: var(--parchment-xdk, #cfc09a);
  border-radius: 99px;
  overflow: hidden;
}

.hunt-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--pine-mid, #2d5c30);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.hunt-reset-btn {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint, #8a7a60);
  background: transparent;
  border: 1px solid var(--parchment-xdk, #cfc09a);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.hunt-reset-btn:hover { border-color: var(--danger, #8b2020); color: var(--danger, #8b2020); }

.hunt-season-group { margin-bottom: 1.5rem; }

.hunt-season-label {
  font-family: 'IM Fell English SC', serif;
  font-size: 1.1rem;
  color: var(--ink-mid);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--parchment-xdk, #cfc09a);
}

.hunt-grid { display: grid; gap: 8px; }

.hunt-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-left: 4px solid var(--parchment-xdk, #cfc09a);
  border-radius: 0 6px 6px 0;
  background: rgba(255,255,255,0.35);
  transition: border-left-color 0.2s;
}

.hunt-row.solved {
  border-left-color: var(--pine-mid, #2d5c30);
  background: rgba(45,92,48,0.06);
}

.hunt-row.solved .hunt-encoded {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: var(--pine-mid, #2d5c30);
}

.hunt-ep {
  font-family: 'Special Elite', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--teal-mid, #1a3a4a);
  background: var(--teal-mist, #c8dcc8);
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

.hunt-main { min-width: 0; }

.hunt-title {
  font-family: 'IM Fell English SC', serif;
  font-size: 0.9rem;
  color: var(--ink-mid);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hunt-encoded {
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hunt-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.hunt-decode-btn {
  font-family: 'Special Elite', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--pine-light, #4a8850);
  border-radius: 3px;
  color: var(--pine-light, #4a8850);
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}
.hunt-decode-btn:hover { background: var(--pine-light, #4a8850); color: var(--parchment, #f2e8d0); }

.hunt-reveal-btn {
  font-family: 'Special Elite', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--purple-mid, #6a4a8a);
  border-radius: 3px;
  color: var(--purple-mid, #6a4a8a);
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}
.hunt-reveal-btn:hover { background: var(--purple-mid, #6a4a8a); color: #e8d8f8; }

.hunt-check {
  width: 22px; height: 22px;
  border: 2px solid var(--parchment-xdk, #cfc09a);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: all 0.15s;
  flex-shrink: 0;
  color: transparent;
}
.hunt-check:hover { border-color: var(--pine-mid, #2d5c30); }
.hunt-check.checked { background: var(--pine-mid, #2d5c30); border-color: var(--pine-mid, #2d5c30); color: #fff; }

.hunt-answer-row {
  display: none;
  padding: 0.5rem 1rem 0.5rem 3.5rem;
  font-family: 'IM Fell English SC', serif;
  font-size: 0.95rem;
  color: var(--red-ink, #7a1a10);
  font-style: italic;
  border-left: 4px solid rgba(122,26,16,0.25);
  border-right: 1px solid var(--border, rgba(0,0,0,0.1));
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.1));
  background: rgba(122,26,16,0.03);
  border-radius: 0 0 6px 0;
  animation: fadeIn 0.2s ease;
}
.hunt-answer-row.open { display: block; }

.hunt-hint {
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  color: var(--ink-faint, #8a7a60);
  margin-top: 4px;
  font-style: normal;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .hunt-row {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .hunt-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .hunt-check { margin-left: auto; }
  .hunt-title { font-size: 0.85rem; }
}

/* ════════════════════════════════════════
   ZODIAC WHEEL
════════════════════════════════════════ */

#zodiac { background: var(--parchment-bg); }

.zodiac-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 2rem;
  align-items: start;
}

.zodiac-wheel-wrap { position: relative; }

/* Node hover/active states */
.znode { cursor: pointer; }
.znode .znode-ring {
  transition: stroke-width 0.15s, filter 0.15s;
}
.znode:hover .znode-ring,
.znode.selected .znode-ring {
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(245,200,66,0.5));
}
.znode.selected .znode-ring {
  stroke: #f5c842 !important;
}

/* Legend */
.zodiac-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  justify-content: center;
}

.zleg {
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.zleg::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.zleg-active   { color: #4a8850; background: rgba(74,136,80,0.1); }
.zleg-active::before   { background: #4a8850; }
.zleg-inactive { color: var(--ink-faint); background: rgba(0,0,0,0.06); }
.zleg-inactive::before { background: var(--ink-faint); }
.zleg-broken   { color: #8b2020; background: rgba(139,32,32,0.08); }
.zleg-broken::before   { background: #8b2020; }

/* Detail panel */
.zodiac-detail {
  position: sticky;
  top: 80px;
  min-height: 300px;
}

.zodiac-prompt {
  font-family: 'Special Elite', monospace;
  font-size: 0.82rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-top: 2rem;
  opacity: 0.6;
}

.zodiac-detail-inner {
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold-dim, #c8960a);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem;
  background: rgba(255,255,255,0.3);
  animation: fadeIn 0.2s ease;
}

.zodiac-detail-inner.empty {
  border-left-color: var(--parchment-xdk, #cfc09a);
  background: transparent;
  border-color: transparent;
}

.zodiac-detail-symbol {
  font-size: 2rem;
  margin-bottom: 0.3rem;
  line-height: 1;
}

.zodiac-detail-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim, #c8960a);
  margin-bottom: 0.2rem;
}

.zodiac-detail-character {
  font-family: 'IM Fell English SC', serif;
  font-size: 1.35rem;
  color: var(--ink-mid);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.zodiac-detail-desc {
  font-family: 'Special Elite', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.zodiac-finale-block {
  padding: 0.75rem 0.9rem;
  border-radius: 4px;
  border-left: 3px solid;
}

.zodiac-finale-block.active   { background: rgba(45,92,48,0.08);  border-color: #4a8850; }
.zodiac-finale-block.inactive { background: rgba(0,0,0,0.04);     border-color: var(--ink-faint); }
.zodiac-finale-block.broken   { background: rgba(139,32,32,0.06); border-color: #8b2020; }

.zodiac-finale-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.active   .zodiac-finale-label { color: #4a8850; }
.inactive .zodiac-finale-label { color: var(--ink-faint); }
.broken   .zodiac-finale-label { color: #8b2020; }

.zodiac-finale-note {
  font-family: 'Special Elite', monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-style: italic;
}

/* Responsive */
@media (max-width: 760px) {
  .zodiac-layout {
    grid-template-columns: 1fr;
  }
  .zodiac-detail {
    position: static;
    min-height: auto;
  }
  .zodiac-detail-inner {
    margin-top: 0.5rem;
  }
}

/* ════════════════════════════════════════
   EPISODE INDEX
════════════════════════════════════════ */

#episodes { background: var(--parchment-bg); }

.ep-season-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 1.5rem;
}

.ep-tab {
  font-family: 'Special Elite', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 3px;
  border: 1px solid var(--parchment-xdk, #cfc09a);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.ep-tab:hover { border-color: var(--pine-mid); color: var(--pine-mid); }
.ep-tab.active { background: var(--pine, #1e3d20); color: var(--pine-mist, #c8dcc8); border-color: var(--pine); }

.ep-grid { display: grid; gap: 8px; }

.ep-row {
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-left: 4px solid var(--parchment-xdk, #cfc09a);
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  transition: border-left-color 0.15s;
}

.ep-row:hover { border-left-color: var(--pine-mid, #2d5c30); }
.ep-row.open  { border-left-color: var(--pine, #1e3d20); }

.ep-header {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  user-select: none;
}

.ep-header:hover { background: rgba(255,255,255,0.5); }

.ep-num {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--teal-mid, #1a3a4a);
  background: var(--teal-mist, #c8dcc8);
  text-align: center;
  padding: 3px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.ep-title-wrap { min-width: 0; }

.ep-title {
  font-family: 'IM Fell English SC', serif;
  font-size: 0.95rem;
  color: var(--ink-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

.ep-badge-count {
  font-family: 'Special Elite', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.ep-badge-egg   { background: var(--pine-mist, #c8dcc8); color: var(--pine, #1e3d20); }
.ep-badge-cipher{ background: var(--amber-pale, #faefd0); color: var(--amber, #d4820a); }

.ep-chevron {
  font-size: 0.7rem;
  color: var(--ink-faint);
  transition: transform 0.2s;
  margin-left: 4px;
  flex-shrink: 0;
}
.ep-row.open .ep-chevron { transform: rotate(180deg); }

/* Expanded body */
.ep-body {
  display: none;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  background: rgba(255,255,255,0.15);
  animation: fadeIn 0.18s ease;
}
.ep-row.open .ep-body { display: block; }

.ep-desc {
  font-family: 'Special Elite', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.ep-links-section { margin-bottom: 0.75rem; }

.ep-links-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.ep-links-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ep-link-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Special Elite', monospace;
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.45;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.ep-link-item:hover { background: rgba(0,0,0,0.05); color: var(--ink-mid); }

.ep-link-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.ep-link-dot.egg    { background: var(--pine-mid, #2d5c30); }
.ep-link-dot.cipher { background: var(--amber, #d4820a); }

.ep-empty {
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-style: italic;
  letter-spacing: 0.04em;
}

@media (max-width: 520px) {
  .ep-header { grid-template-columns: 44px 1fr; }
  .ep-badges { display: none; }
  .ep-title  { font-size: 0.88rem; }
}

/* ── Hero grid 3×3 override ── */
.hero-grid-3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 680px) {
  .hero-grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .hero-grid-3col {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════
   THE JOURNALS
════════════════════════════════════════ */

.journals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.journal-card.journal-combined {
  grid-column: 1 / -1;
}

.journal-card.journal-combined .journal-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

.journal-card.journal-combined .journal-bio {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .journals-grid {
    grid-template-columns: 1fr;
  }
  .journal-card.journal-combined .journal-card-body {
    grid-template-columns: 1fr;
  }
}

.journal-card {
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
}

.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.journal-card-spine {
  height: 6px;
}

.journal-card-header {
  padding: 1rem 1.1rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.35);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.journal-number-badge {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IM Fell English SC', serif;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.3);
}

.journal-card-meta { min-width: 0; }

.journal-title {
  font-family: 'IM Fell English SC', serif;
  font-size: 1rem;
  color: var(--ink-mid);
  margin-bottom: 2px;
}

.journal-owner {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.journal-card-body {
  padding: 0.9rem 1.1rem;
  background: rgba(255,255,255,0.2);
}

.journal-bio {
  font-family: 'Special Elite', monospace;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 0.9rem;
  letter-spacing: 0.01em;
}

.journal-contents-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.journal-contents-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0.9rem;
}

.journal-contents-list li {
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.45;
  padding-left: 12px;
  position: relative;
  letter-spacing: 0.01em;
}

.journal-contents-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

.journal-hidden-detail {
  padding: 0.65rem 0.85rem;
  background: rgba(122,26,16,0.05);
  border-left: 3px solid rgba(122,26,16,0.3);
  border-radius: 0 4px 4px 0;
  font-family: 'Special Elite', monospace;
  font-size: 0.72rem;
  color: var(--red-ink, #7a1a10);
  line-height: 1.6;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════
   THEORIES & MYSTERIES
════════════════════════════════════════ */

.theories-filter-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 1.5rem;
}

.theories-filter {
  font-family: 'Special Elite', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  border: 1px solid var(--parchment-xdk, #cfc09a);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.theories-filter:hover { border-color: var(--pine-mid); color: var(--pine-mid); }
.theories-filter.active { background: var(--pine, #1e3d20); color: var(--pine-mist, #c8dcc8); border-color: var(--pine); }

.theories-grid { display: grid; gap: 12px; }

.theory-card {
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-left: 4px solid var(--parchment-xdk, #cfc09a);
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  transition: border-left-color 0.15s;
}

.theory-card[data-status="unsolved"]         { border-left-color: #8b2020; }
.theory-card[data-status="partially-solved"] { border-left-color: var(--amber, #d4820a); }

.theory-card.hidden { display: none; }

.theory-header {
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
}
.theory-header:hover { background: rgba(255,255,255,0.5); }

.theory-status-badge {
  font-family: 'Special Elite', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}

.theory-status-badge.unsolved         { background: rgba(139,32,32,0.12); color: #8b2020; }
.theory-status-badge.partially-solved { background: rgba(212,130,10,0.12); color: var(--amber, #d4820a); }

.theory-title {
  font-family: 'IM Fell English SC', serif;
  font-size: 1rem;
  color: var(--ink-mid);
  flex: 1;
  min-width: 0;
}

.theory-chevron {
  font-size: 0.7rem;
  color: var(--ink-faint);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.theory-card.open .theory-chevron { transform: rotate(180deg); }

.theory-body {
  display: none;
  padding: 0.9rem 1.1rem 1rem;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  background: rgba(255,255,255,0.15);
  animation: fadeIn 0.18s ease;
}
.theory-card.open .theory-body { display: block; }

.theory-summary {
  font-family: 'Special Elite', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.theory-evidence-label {
  font-family: 'Special Elite', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.theory-evidence-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 1rem;
}

.theory-evidence-list li {
  font-family: 'Special Elite', monospace;
  font-size: 0.73rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
  letter-spacing: 0.01em;
}

.theory-evidence-list li::before {
  content: '◦';
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

.theory-leading {
  padding: 0.75rem 0.9rem;
  background: rgba(45,92,48,0.07);
  border-left: 3px solid var(--pine-mid, #2d5c30);
  border-radius: 0 4px 4px 0;
  font-family: 'Special Elite', monospace;
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.theory-leading-label {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-light, #4a8850);
  margin-bottom: 4px;
}

/* ════════════════════════════════════════
   HAMBURGER MENU & MOBILE NAV
════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(212,155,45,0.35);
  border-radius: 6px;
  padding: 7px 9px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.nav-toggle:hover { border-color: rgba(212,155,45,0.7); }

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(212,155,45,0.85);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}

/* Animated X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  header {
    flex-wrap: wrap;
    height: auto;
    padding: 0.65rem 1rem;
    gap: 0;
    align-items: center;
  }

  .logo { flex: 1; }

  /* Show logo text on mobile */
  .logo-text {
    display: block;
    font-size: 0.82rem;
    line-height: 1.25;
  }

  /* Show hamburger */
  .nav-toggle { display: flex; }

  /* Nav hidden by default on mobile */
  #main-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid rgba(212,155,45,0.2);
    margin-top: 0.5rem;
    gap: 2px;
  }

  /* Nav open state */
  #main-nav.nav-open { display: flex; }

  #main-nav a {
    padding: 0.55rem 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    border-radius: 4px;
    border: none;
    width: 100%;
    text-align: left;
  }

  #main-nav a:hover,
  #main-nav a.active {
    background: rgba(212,155,45,0.1);
    padding-left: 0.6rem;
  }
}