/* cause of death — acid lime, cream stones, heavy outlines, chunky shadows.
   Archivo Black (display, its own single weight — never synthesised) and
   Atkinson Hyperlegible (text). Self-hosted, OFL.
   Cards keep their cream faces and dark ink in BOTH themes: dark mode changes
   the canvas, never the stickers. 4.5:1 contrast both themes, 44px controls,
   no 320px overflow, no card-inside-card. */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ArchivoBlack-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/AtkinsonHyperlegible-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/AtkinsonHyperlegible-400-Italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/AtkinsonHyperlegible-700.woff2) format('woff2');
}

:root {
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-text: 'Atkinson Hyperlegible', 'Helvetica Neue', Arial, sans-serif;
  --lime: #b3fb18;
  /* The stickers are theme-invariant: cream face, dark ink, dark-green links. */
  --card-bg: #fffdf2;
  --card-ink: #101208;
  --card-muted: #3c4030;
  --card-link: #2e5f41;
  --card-line: #101208;
}
:root[data-theme='light'] {
  --bg: var(--lime);
  --ink: #101208;
  --muted: #3c4030;
  --line: #101208;
  --shadow: #101208;
  --canvas-link: #101208;
}
:root[data-theme='dark'] {
  --bg: #15180d;
  --ink: #f2f6df;
  --muted: #c0c6a4;
  --line: #f2f6df;
  --shadow: #b3fb18;
  --canvas-link: #b3fb18;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='system'], :root:not([data-theme]) {
    --bg: #15180d; --ink: #f2f6df; --muted: #c0c6a4;
    --line: #f2f6df; --shadow: #b3fb18; --canvas-link: #b3fb18;
  }
}
@media (prefers-color-scheme: light) {
  :root[data-theme='system'], :root:not([data-theme]) {
    --bg: #b3fb18; --ink: #101208; --muted: #3c4030;
    --line: #101208; --shadow: #101208; --canvas-link: #101208;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.5;
}
.shell { max-width: 960px; margin: 0 auto; padding: 0 16px; }

a { color: var(--canvas-link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--line);
  outline-offset: 2px;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; background: var(--card-bg); color: var(--card-ink); padding: 8px; z-index: 2; }

/* ----------------------------------------------- header: two quiet rows */
.site-header {
  padding: 8px 0 0;
  border-bottom: 3px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  text-transform: lowercase;
}
.brand img { width: 40px; height: 40px; }
.main-nav { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 -12px; }
.main-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  color: var(--ink); font-weight: 700; text-decoration: none; font-size: 17px;
}
.main-nav a:hover { text-decoration: underline; }

main { min-height: 60vh; padding: 26px 0 48px; }

/* ---------------------------------------------------------------- hero */
.page-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero-mascot { width: clamp(96px, 20vw, 160px); height: auto; flex-shrink: 0; }
.heading-copy { flex: 1; min-width: min(100%, 340px); }
.page-heading h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.02;
  text-transform: lowercase;
}
.lede { margin: 0; max-width: 60ch; font-size: 19px; color: var(--ink); }
.note, .status-note { color: var(--muted); font-size: 16px; max-width: 62ch; }
.status-note.error { color: var(--ink); font-weight: 700; }
.years { font-weight: 700; font-variant-numeric: tabular-nums; }
.hint { margin: 2px 0 0; color: var(--card-muted); font-size: 16px; }

a.button-random {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px; margin-top: 16px;
  font-weight: 700; text-decoration: none;
  background: var(--card-bg); color: var(--card-ink);
  border: 3px solid var(--card-line); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--shadow);
}
a.button-random:hover { text-decoration: underline; }

/* ------------------------------------------- home: one composed layout */
.home-main { display: block; }
@media (min-width: 761px) {
  .home-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: 'featured aside' 'catalogue aside';
    column-gap: 32px;
  }
  .featured { grid-area: featured; }
  .home-aside { grid-area: aside; }
  .catalogue { grid-area: catalogue; }
}
@media (max-width: 760px) {
  /* 320px order: hero (above), featured, catalogue, then the aside extras. */
  .home-main { display: flex; flex-direction: column; }
  .featured { order: 1; }
  .catalogue { order: 2; }
  .home-aside { order: 3; }
}
.featured { margin: 0 0 32px; }
.featured h2, .board h2, .shortest h2, .catalogue .filter-row label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 12px;
  text-transform: lowercase;
}
.grave-featured { max-width: 560px; }

/* ----------------------------------------------- the board + shortest */
.board, .shortest { margin: 0 0 32px; }
.board-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* One complete control per cause: no counter box inside a chip box. */
.board-list a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  background: var(--card-bg); color: var(--card-ink);
  border: 3px solid var(--card-line); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--shadow);
  font-weight: 700; text-decoration: none; font-size: 16px;
}
.board-list a:hover { text-decoration: underline; }
.board-count { color: var(--card-muted); }
.shortest-list { margin: 0; padding-left: 1.3em; }
.shortest-list li { margin-bottom: 8px; font-size: 16px; }
.shortest-list a { font-weight: 700; }

/* -------------------------------------------------------- the cemetery */
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
select, input, textarea {
  font: inherit; font-size: 17px;
  color: var(--card-ink); background: var(--card-bg);
  border: 3px solid var(--card-line); border-radius: 8px;
  min-height: 44px; padding: 8px 12px;
}
::placeholder { color: #595f52; opacity: 1; }
textarea { line-height: 1.5; }
.graves {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 22px;
  align-items: start;                 /* intrinsic heights, not template blocks */
}
.grave {
  background: var(--card-bg);
  color: var(--card-ink);
  border: 3px solid var(--card-line);
  border-radius: 110px 110px 10px 10px;
  box-shadow: 5px 5px 0 var(--shadow);
  padding: 36px 20px 20px;
  text-align: center;
}
.grave a { color: var(--card-link); }
.grave-name {
  margin: 0;
  padding-inline: 10%;                /* keep long names inside the arch */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.grave-name a {
  display: inline-block;
  padding-block: 8px;                 /* a 44px target without shrinking text */
  color: var(--card-ink);
  text-decoration: none;
}
.grave-name a:hover { color: var(--card-link); text-decoration: underline; }
.grave-meta { margin: 2px 0 10px; color: var(--card-muted); font-size: 16px; font-weight: 700; }
.grave-epitaph {
  margin: 0;
  max-width: 44ch;
  margin-inline: auto;
  font-style: normal;                 /* upright, readable — not a quotation */
  text-align: left;
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
button.more {
  display: block;
  margin: 22px auto 0;
  min-height: 48px; padding: 0 22px;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--card-bg); color: var(--card-ink);
  border: 3px solid var(--card-line); border-radius: 10px;
  box-shadow: 4px 4px 0 var(--shadow);
}

/* ----------------------------------------------------------- the stone */
.stone {
  max-width: 560px;
  margin: 10px auto;
  padding: 44px 24px 26px;
  background: var(--card-bg);
  color: var(--card-ink);
  border: 4px solid var(--card-line);
  border-radius: 150px 150px 12px 12px;
  box-shadow: 7px 7px 0 var(--shadow);
  text-align: center;
}
.stone a { color: var(--card-link); }
.stone-top { margin: 0; font-weight: 700; color: var(--card-muted); text-transform: lowercase; }
.stone-name {
  margin: 6px 0 2px;
  padding-inline: 6%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.stone-years { margin: 2px 0 14px; color: var(--card-muted); }
.stone-cause { margin: 0 0 16px; font-weight: 700; }
.grave-note, .stone-epitaph {
  margin: 0 auto 16px;
  max-width: 42ch;
  font-style: normal;
  text-align: left;
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.grave-note { color: var(--card-muted); }
.grave-link { margin: 0 0 8px; font-size: 16px; overflow-wrap: anywhere; }
.grave-actions { margin: 0; font-size: 16px; }
.grave-actions a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.back-link { max-width: 560px; margin: 18px auto 0; font-weight: 700; }
.back-link a { display: inline-flex; align-items: center; min-height: 44px; }
.error-back { margin: 18px 0 0; max-width: none; }   /* the 404 stays aligned */

/* --------------------------------------------------------------- forms */
.rules, .prose { max-width: 62ch; }
.rules { margin: 24px 0; }
.rules h2, .prose h2, .bury-form h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  margin: 32px 0 12px;
  text-transform: lowercase;
}
.rules h2:first-child, .prose h2:first-child { margin-top: 0; }
.rules ul, .prose ul { margin: 0; padding-left: 1.2em; }
.rules li, .prose li { margin-bottom: 8px; }
.prose p { margin: 0 0 1em; max-width: 62ch; }
.bury-form {
  max-width: 560px;
  margin-top: 14px;
  padding: 24px 20px;
  background: var(--card-bg);
  color: var(--card-ink);
  border: 3px solid var(--card-line);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--shadow);
}
.bury-form a { color: var(--card-link); }
.bury-form .rules { margin: 24px 0; }
.bury-form .note, .bury-form .status-note { color: var(--card-muted); }
.bury-form .status-note.error { color: var(--card-ink); }
.field { display: grid; gap: 4px; margin-bottom: 24px; }
.field label { font-weight: 700; }
.optional { color: var(--card-muted); font-weight: 400; font-size: 16px; }
.field input, .field select, .field textarea { width: 100%; }
.field-error { margin: 2px 0 0; color: var(--card-ink); font-weight: 700; font-size: 16px; }
.form-errors {
  margin: 0 0 24px; padding: 12px 14px;
  border: 3px solid var(--card-line); border-radius: 8px;
  font-size: 16px;
}
.form-errors p { margin: 0 0 6px; font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.form-errors a { color: var(--card-link); }
/* The honeypot: absent for people, present for scripts. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.primary {
  min-height: 50px; padding: 0 26px;
  font-family: var(--font-display); font-weight: 400; font-size: 17px; cursor: pointer;
  background: var(--lime); color: #101208;
  border: 3px solid #101208; border-radius: 10px;
  box-shadow: 4px 4px 0 var(--shadow);
  text-transform: lowercase;
}
button.primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
button.primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
button.primary:disabled { opacity: 0.7; transform: none; cursor: default; }

/* ------------------------------------------- footer, now with the theme */
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 16px 0 30px; border-top: 3px solid var(--line);
  color: var(--muted); font-size: 16px; font-weight: 700;
}
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.theme-switch {
  display: inline-flex;
  margin-left: auto;
  border: 3px solid var(--card-line);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.theme-switch button {
  min-height: 44px; min-width: 44px; padding: 0 10px;
  border: 0; background: transparent; border-radius: 7px;
  color: var(--card-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.theme-switch button[aria-pressed='true'] { background: var(--lime); color: #101208; }

@media (max-width: 480px) {
  .graves { grid-template-columns: 1fr; }
  .stone { padding: 34px 16px 22px; }
  .bury-form { padding: 16px 14px; }
  .theme-switch { margin-left: 0; }
}

/* ------------------------------------------------- the pump.fun wing */
.digger-log { font-style: italic; margin: 0 0 20px; }
.wing-mint { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.wing-mint .years { overflow-wrap: anywhere; font-size: 14px; }
button.copy-mint {
  min-height: 44px; padding: 0 14px;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--card-bg); color: var(--card-ink);
  border: 3px solid var(--card-line); border-radius: 8px;
}

/* ------------------------------- trading cards ------------------------- */
/* Foil, shimmer and glow are written here from scratch: gradients layered
   by pseudo-elements, animated with transform and opacity ONLY. Rarity is
   a frame treatment; the card art underneath never changes with it. */

.rip-start { margin: 2rem 0; }
.rip-button {
  font-family: var(--font-display);
  font-size: 1.25rem;
  padding: 0.9rem 2.2rem;
  min-height: 44px;
  background: var(--lime);
  color: #101208;
  border: 3px solid var(--line);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
  cursor: pointer;
}
.rip-button:hover { transform: translate(-1px, -1px); }
.rip-button:active { transform: translate(2px, 2px); }
.rip-button:disabled { opacity: 0.6; cursor: wait; }

.reveal-controls { display: flex; gap: 0.75rem; justify-content: flex-end; margin: 0.5rem 0; }
.reveal-skip, .reveal-sound {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  color: var(--card-ink);
  border: 2px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.pack-wrap { display: grid; justify-items: center; gap: 1rem; margin: 2.5rem 0; }
.pack-pouch {
  width: min(320px, 80vw);
  aspect-ratio: 5 / 7;
  background: var(--card-ink);
  color: var(--card-bg);
  border: 3px solid var(--line);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--shadow);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 1rem;
}
.pack-set {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-align: center;
  color: var(--lime);
}
.pack-strip {
  width: 100%;
  min-height: 56px;
  border-top: 3px dashed var(--lime);
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
  user-select: none;
  --tear: 0;
}
.pack-strip-hint {
  font-family: var(--font-text);
  font-weight: 700;
  transform: translateX(calc(var(--tear) * 48px));
  opacity: calc(1 - var(--tear) * 0.6);
}

.spread-head h1 { margin-bottom: 0.25rem; }
.god-line { font-family: var(--font-display); color: var(--ink); }
.odds-line { font-size: 0.95rem; }

.spread-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 1.25rem;
  margin: 1.5rem 0 2.5rem;
  max-width: 1080px;
}

.tcard { margin: 0; perspective: 900px; }
.tcard-inner {
  position: relative;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform 300ms ease;
}
.tcard.flipped .tcard-inner { transform: rotateY(180deg); }
.tcard-back, .tcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
}
.tcard-back {
  background: var(--card-ink);
  border: 3px solid var(--line);
  display: grid;
  place-items: center;
}
.tcard-back-mark { font-family: var(--font-display); font-size: 2rem; color: var(--lime); }
.tcard-face { transform: rotateY(180deg); background: var(--card-bg); }
.tcard-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcard-removed {
  font-family: var(--font-text);
  font-weight: 700;
  color: var(--card-muted);
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
}
.tcard-rarity {
  text-align: center;
  font-family: var(--font-text);
  font-weight: 700;
  margin-top: 0.4rem;
  color: var(--muted);
}

/* The frames. Facts never change with these — only this chrome does. */
.r-common .tcard-face { border: 3px solid var(--line); }
.r-uncommon .tcard-face { border: 5px solid #8d937f; }
.r-rare .tcard-face { border: 5px solid var(--card-ink); outline: 3px dashed var(--lime); outline-offset: -8px; }
.r-legendary .tcard-face {
  border: 6px solid transparent;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(130deg, var(--lime), #fffdf2 45%, var(--lime) 80%) border-box;
}
/* The foil sweep: one gradient layer, moved with transform, faded with
   opacity. Runs only on a revealed legendary; reduced motion stops it. */
.r-legendary .tcard-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 253, 242, 0.5) 50%, transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
.r-legendary.flipped .tcard-face::after { animation: foil-sweep 2.8s ease-in-out infinite; }
@keyframes foil-sweep {
  0% { transform: translateX(-120%); opacity: 0; }
  18% { opacity: 1; }
  40% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* The hold glow before the last flip: keyed to TRUE rarity, opacity only.
   There is deliberately no .hold-glow-common. */
.tcard { position: relative; }
.tcard::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
}
.hold-glow-uncommon::before { background: radial-gradient(closest-side, rgba(141, 147, 127, 0.55), transparent); animation: hold-pulse 700ms ease-in-out; }
.hold-glow-rare::before { background: radial-gradient(closest-side, rgba(179, 251, 24, 0.5), transparent); animation: hold-pulse 700ms ease-in-out; }
.hold-glow-legendary::before { background: radial-gradient(closest-side, rgba(179, 251, 24, 0.85), transparent); animation: hold-pulse 700ms ease-in-out 2; }
@keyframes hold-pulse {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .tcard-inner { transition: none; }
  .r-legendary.flipped .tcard-face::after,
  .hold-glow-uncommon::before, .hold-glow-rare::before, .hold-glow-legendary::before { animation: none; }
  .rip-button:hover, .rip-button:active { transform: none; }
}

@media (max-width: 480px) {
  .spread-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.75rem; }
  .reveal-controls { justify-content: stretch; }
  .reveal-skip, .reveal-sound { flex: 1; }
}