:root {
  --black: #0a0a08;
  --black-soft: #12120f;
  --paper: #e7e0d2;
  --paper-dim: #a49e92;
  --rule: #3a3933;
  --blood: #d2242c;
  --moss: #9ab765;
  --ink: var(--paper);
  --muted: var(--paper-dim);
  --night: var(--black);
  --panel: var(--black-soft);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--paper);
  background: var(--black);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--black); }
body { margin: 0; min-height: 100vh; background: var(--black); }
button, input { font: inherit; }
a { color: inherit; }
::selection { color: var(--black); background: var(--paper); }

.site { position: relative; overflow-x: hidden; }
.site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.landing,
.page {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 72px;
}

.landing { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.landing-composition {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(260px, .72fr);
  gap: clamp(32px, 8vw, 120px);
  align-items: center;
  padding: 7vh 0 5vh;
}
.title-block { position: relative; }
.project-mark { margin: 0 0 24px; color: var(--paper-dim); font: 700 11px/1.4 "Courier New", monospace; }

.brand {
  color: var(--paper);
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: -.02em;
  text-decoration: none;
}
.brand::before { content: "["; color: var(--blood); margin-right: 5px; }
.brand::after { content: "]"; color: var(--blood); margin-left: 5px; }

.eyebrow {
  margin: 32px 0 10px;
  color: var(--blood);
  font: 700 12px/1.25 "Courier New", monospace;
}
h1, h2, h3, h4 { font-family: "Arial Black", Arial, sans-serif; }
h1 {
  margin: 0;
  font-size: clamp(64px, 13vw, 170px);
  font-weight: 900;
  line-height: .72;
  letter-spacing: -.095em;
  text-transform: uppercase;
}
h1 i { color: var(--paper); font-style: normal; -webkit-text-stroke: 1px var(--paper); }
.landing h1 span { display: block; }
.landing h1 span:last-child { margin-left: .19em; color: transparent; -webkit-text-stroke: 1px var(--paper); }

.lead {
  max-width: 520px;
  margin: 30px 0 0;
  color: var(--paper-dim);
  font: 400 clamp(16px, 2vw, 21px)/1.55 Georgia, serif;
}
code {
  padding: 1px 3px;
  color: var(--paper);
  background: transparent;
  border-bottom: 2px solid var(--blood);
  font-family: "Courier New", monospace;
}

.egg-stage { position: relative; min-height: 380px; display: grid; place-items: center; border-left: 1px solid var(--rule); }
.egg-stage::before,
.egg-stage::after { position: absolute; left: 16px; color: var(--paper-dim); font: 10px/1 "Courier New", monospace; }
.egg-stage::before { content: "SPECIMEN / 001"; top: 12px; }
.egg-stage::after { content: "STATUS: UNHATCHED"; bottom: 12px; }
.hero-egg { width: min(100%, 340px); height: auto; object-fit: contain; filter: drop-shadow(18px 22px 0 rgba(0,0,0,.28)); animation: egg-wait 2.3s steps(2, end) infinite; }
.egg {
  position: relative;
  width: 104px;
  height: 132px;
  display: grid;
  place-items: center;
  transform: rotate(-7deg);
  border: 3px solid var(--paper);
  border-radius: 52% 48% 46% 54% / 61% 60% 40% 39%;
  background: var(--moss);
  box-shadow: inset -18px -15px 0 rgba(10,10,8,.24);
  animation: egg-wait 2.3s steps(2, end) infinite;
}
.egg::before,
.egg::after { content: ""; position: absolute; border-radius: 50%; background: rgba(10,10,8,.19); }
.egg::before { width: 22%; height: 17%; left: 18%; top: 25%; }
.egg::after { width: 16%; height: 12%; right: 18%; bottom: 24%; }
.egg span { position: relative; z-index: 1; color: var(--black); font: 700 48px/1 Georgia, serif; transform: rotate(7deg); }
.landing .egg { width: clamp(150px, 20vw, 230px); height: clamp(190px, 26vw, 290px); }
.landing .egg span { font-size: clamp(64px, 8vw, 94px); }
@keyframes egg-wait { 50% { transform: rotate(4deg) translateY(-4px); } }

.landing-rail { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding: 22px 0 2px; border-top: 1px solid var(--rule); }
.actions, .admin-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.showcase-actions { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; }
.showcase-panel #showcase-state { color: var(--paper); font-weight: 700; }
.button {
  position: relative;
  display: inline-block;
  min-height: 42px;
  padding: 11px 4px 8px;
  border: 0;
  border-bottom: 2px solid var(--blood);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font: 700 12px/1.3 "Courier New", monospace;
  text-decoration: none;
  text-align: left;
}
.button::before { content: "["; margin-right: 7px; color: var(--blood); }
.button::after { content: "]"; margin-left: 7px; color: var(--blood); }
.button:hover, .button:focus-visible { color: var(--black); background: var(--paper); outline: 0; }
.button.ghost { border-bottom-color: var(--rule); color: var(--paper-dim); }
.button.ghost:hover, .button.ghost:focus-visible { color: var(--paper); background: var(--black-soft); }
.button.danger { color: #ff777c; border-bottom-color: var(--blood); }
.button:disabled { cursor: wait; opacity: .45; }

.hint { margin: 18px 0 0; color: var(--paper-dim); font: 12px/1.55 "Courier New", monospace; }
.landing-rail .hint { max-width: 390px; margin: 0; text-align: right; }
.page { padding-top: 28px; }
.stats-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 12vh; padding-bottom: 28px; border-bottom: 1px solid var(--paper); }
.stats-hero .eyebrow { align-self: start; margin-top: 0; }
.stats-hero h1 { grid-column: 1 / -1; font-size: clamp(68px, 13vw, 158px); }
.stats-hero h1 i { color: transparent; }

.search { margin-top: 36px; }
.search label { display: block; margin-bottom: 8px; color: var(--paper-dim); font: 12px/1.3 "Courier New", monospace; }
.search input {
  min-height: 46px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--paper-dim);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--paper);
}
.search input:focus { border-bottom-color: var(--blood); }
.search input::placeholder { color: #69665e; }

.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 22px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.slot { min-height: 270px; padding: 15px; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: transparent; display: flex; flex-direction: column; justify-content: space-between; }
.slot.locked { opacity: .3; }
.slot .number { color: var(--paper-dim); font: 10px/1.3 "Courier New", monospace; }
.slot-art-shell { position: relative; display: block; width: 100%; height: 132px; }
.slot-art { display: block; width: 100%; height: 132px; object-fit: contain; }
.slot-art-placeholder { display: grid; place-items: center; height: 132px; color: var(--rule); font: 900 70px/1 "Arial Black", Arial, sans-serif; }
.slot h2, .slot h4 { margin: 10px 0; font-size: 16px; line-height: 1.05; }
.rarity { font: 700 10px/1.3 "Courier New", monospace; }
.counts { font: 11px/1.65 "Courier New", monospace; }

.stats { margin-top: 56px; border-top: 1px solid var(--paper); counter-reset: stat; }
.stat { counter-increment: stat; display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); background: transparent; }
.stat::before { content: "0" counter(stat); color: var(--blood); font: 11px/1 "Courier New", monospace; }
.stat b { grid-column: 3; display: block; color: var(--paper); font: 900 clamp(38px, 7vw, 82px)/.8 "Arial Black", Arial, sans-serif; letter-spacing: -.07em; }
.stat span { grid-column: 2; grid-row: 1; color: var(--paper-dim); font: 12px/1.4 "Courier New", monospace; }

html.overlay-document,
html.overlay-document body { background: transparent !important; }
.overlay { min-height: 100vh; background: transparent !important; overflow: hidden; }
.overlay::before { display: none; }
.egg-banner {
  position: fixed;
  top: 50%;
  right: 40px;
  width: min(260px, calc(100vw - 80px));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 8px;
  border: 2px solid var(--paper);
  background: rgba(10,10,8,.94);
  opacity: 0;
  transform: translate(36px, -50%);
  transition: opacity .28s, transform .42s cubic-bezier(.2,.8,.2,1);
}
.egg-banner::before { display: none; }
.egg-banner.show { opacity: 1; transform: translate(0, -50%); }
.overlay-egg-art { flex: 0 0 76px; width: 76px; height: 76px; object-fit: contain; transform-origin: 50% 82%; animation: overlay-egg-wiggle 2.35s ease-in-out infinite; }
.egg-banner > div { min-width: 0; flex: 1; }
.egg-banner .eyebrow { position: absolute; top: -30px; left: -2px; margin: 0; color: var(--blood); font: 900 18px/1 "Arial Black", Arial, sans-serif; letter-spacing: -.025em; white-space: nowrap; }
.egg-banner strong { display: block; font-size: 12px; line-height: 1.28; }
.egg-banner time { display: block; width: 100%; margin-top: 7px; color: var(--paper); text-align: center; font: 900 22px/1 "Arial Black", Arial, sans-serif; }
@keyframes overlay-egg-wiggle {
  0%, 100% { transform: translateX(-5px) rotate(-3.5deg); }
  50% { transform: translateX(5px) rotate(3.5deg); }
}
.reveal { position: fixed; top: 50%; right: 40px; width: min(640px, calc(100vw - 80px)); padding: 20px 26px 20px 20px; border: 2px solid var(--paper); border-left: 7px solid var(--blood); background: rgba(10,10,8,.94); color: var(--paper); display: flex; align-items: center; justify-content: flex-start; gap: 24px; text-align: left; font: 900 24px/1.1 "Arial Black", Arial, sans-serif; opacity: 0; transform: translate(36px, -50%); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.reveal.show { opacity: 1; transform: translate(0, -50%); }
.reveal .secret { color: var(--blood); font-size: 42px; }
.reveal-art-shell { position: relative; flex: 0 0 170px; display: block; width: 170px; height: 170px; }
.reveal-art { display: block; width: 170px; height: 170px; object-fit: contain; }
.result-copy { min-width: 0; }
.result-copy strong { display: block; font-size: 27px; }
.result-copy small { display: block; margin-top: 10px; color: var(--paper-dim); font: 700 13px/1.45 "Courier New", monospace; }
.result-placement { display: block; margin-bottom: 8px; color: var(--blood); font: 700 11px/1.2 "Courier New", monospace; letter-spacing: .08em; }
.reveal.secret-reveal { top: 50%; right: 40px; width: min(820px, calc(100vw - 80px)); max-width: none; padding: 28px 34px 28px 24px; border: 3px solid var(--paper); border-left: 9px solid var(--blood); justify-content: flex-start; gap: 34px; text-align: left; opacity: 0; transform: translate(36px, -50%) scale(.96); }
.reveal.secret-reveal.show { opacity: 1; transform: translate(0, -50%) scale(1); }
.secret-reveal .reveal-art-shell { flex-basis: 320px; width: 320px; height: 320px; }
.secret-reveal .reveal-art { width: 320px; height: 320px; }
.secret-copy { min-width: 0; max-width: 410px; }
.secret-copy .result-name { margin-top: 6px; font-size: 27px; }
.secret-winner { margin-top: 18px; color: var(--paper); font: 900 22px/1.15 "Arial Black", Arial, sans-serif; }
.secret-prize { margin-top: 13px; color: #ffe681; font: 900 21px/1.18 "Arial Black", Arial, sans-serif; }
.junk-emoji { flex: 0 0 120px; text-align: center; font-size: 82px; }
.junk-message { color: var(--paper) !important; font-size: 16px !important; }

/* Shiny reuses the normal silhouette: the filtered duplicate becomes a moving gold band. */
.shiny-art { position: relative; isolation: isolate; overflow: hidden; }
.shiny-art > img:first-child { position: relative; z-index: 1; }
.shiny-art .shiny-layer { position: absolute; inset: 0; z-index: 2; margin: auto; opacity: .72; filter: sepia(1) saturate(7) hue-rotate(350deg) brightness(1.7) contrast(1.1); mix-blend-mode: screen; clip-path: polygon(-36% 0, -8% 0, 20% 100%, -8% 100%); animation: shiny-sweep 2.7s ease-in-out infinite; pointer-events: none; }
.shiny-sparkles { position: absolute; inset: 8%; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; color: #ffe681; font: 900 clamp(11px, 2vw, 22px)/1 Georgia, serif; letter-spacing: .18em; text-shadow: 0 0 4px #fff, 0 0 10px #ffc83d; animation: shiny-glitter 1.45s steps(2, end) infinite; pointer-events: none; }
@keyframes shiny-sweep {
  0%, 12% { clip-path: polygon(-36% 0, -8% 0, 20% 100%, -8% 100%); }
  70%, 100% { clip-path: polygon(80% 0, 108% 0, 136% 100%, 108% 100%); }
}
@keyframes shiny-glitter {
  0%, 100% { opacity: .2; transform: translateY(12%) scale(.86); }
  50% { opacity: 1; transform: translateY(-5%) scale(1.08); }
}

@media (max-width: 760px) {
  .landing, .page { width: min(100% - 28px, 1180px); padding-top: 18px; }
  .landing-composition { grid-template-columns: 1fr; padding: 10vh 0 6vh; }
  .landing h1 { font-size: clamp(66px, 25vw, 120px); }
  .egg-stage { min-height: 270px; border-left: 0; border-top: 1px solid var(--rule); }
  .landing .egg { width: 140px; height: 178px; }
  .landing-rail { grid-template-columns: 1fr; }
  .landing-rail .hint { text-align: left; }
  .stat { grid-template-columns: 38px 1fr; }
  .stat b { grid-column: 2; grid-row: 2; }
  .stat span { grid-column: 2; }
  .stats-hero { margin-top: 9vh; }
  .egg-banner { right: 12px; width: min(260px, calc(100vw - 24px)); }
  .overlay-egg-art { flex-basis: 70px; width: 70px; height: 70px; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .reveal { right: 12px; width: calc(100vw - 24px); }
  .reveal.secret-reveal { right: 12px; width: calc(100vw - 24px); padding: 20px; gap: 12px; }
  .secret-reveal .reveal-art-shell { flex-basis: 160px; width: 160px; height: 160px; }
  .secret-reveal .reveal-art { width: 160px; height: 160px; }
  .reveal.secret-reveal .secret { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* --------------------------------------------------------------------------
   ORGANIC ARCHIVE SKIN
   Uneven silhouettes and layered surfaces keep the public pages from reading
   like a rigid dashboard. OBS uses <body class="overlay"> and stays untouched.
   -------------------------------------------------------------------------- */

.site {
  --surface: #11110e;
  --surface-raised: #171712;
  --surface-moss: #171b12;
  --edge-soft: #34342d;
  --curve-a: 30px 12px 34px 15px / 16px 31px 13px 27px;
  --curve-b: 12px 32px 14px 28px / 30px 14px 27px 12px;
  --curve-c: 42% 58% 51% 49% / 55% 43% 57% 45%;
  background: var(--black);
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.site::before { opacity: .055; }
.site::after {
  content: "";
  position: fixed;
  z-index: -1;
  right: -16vw;
  bottom: -24vw;
  width: min(720px, 68vw);
  aspect-ratio: 1;
  border: 1px solid rgba(154,183,101,.1);
  border-radius: 44% 56% 61% 39% / 48% 38% 62% 52%;
  box-shadow:
    0 0 0 34px rgba(154,183,101,.025),
    0 0 0 70px rgba(154,183,101,.02),
    0 0 0 118px rgba(154,183,101,.012);
  transform: rotate(-16deg);
  pointer-events: none;
}

.site h1,
.site h2,
.site h3,
.site h4 { font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif; }

.site .page,
.site .landing { isolation: isolate; }

.site .brand {
  position: relative;
  padding: 6px 10px 7px;
  transform: rotate(-1deg);
  border: 1px solid var(--edge-soft);
  border-radius: 13px 5px 11px 4px / 6px 12px 5px 10px;
  background: rgba(10,10,8,.75);
}
.site .brand::before { content: "●"; margin-right: 7px; font-size: 8px; }
.site .brand::after { content: none; }
.site .brand:hover,
.site .brand:focus-visible { border-color: var(--moss); outline: none; transform: rotate(0); }

.site .eyebrow {
  display: inline-block;
  padding: 4px 8px 3px;
  border-left: 3px solid var(--blood);
  background: rgba(210,36,44,.055);
  transform: rotate(-.6deg);
  letter-spacing: .015em;
}

.site .button {
  min-height: 43px;
  padding: 11px 16px 10px;
  border: 1px solid var(--edge-soft);
  border-bottom-color: var(--paper-dim);
  border-radius: var(--curve-a);
  background: var(--surface);
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background-color .16s ease;
}
.site .button::before { content: "↳"; margin-right: 9px; color: var(--blood); }
.site .button::after { content: none; }
.site .button:hover,
.site .button:focus-visible {
  color: var(--paper);
  border-color: var(--moss);
  background: var(--surface-moss);
  transform: translateY(-2px) rotate(-.35deg);
}
.site .button.ghost { border-color: var(--edge-soft); background: transparent; }
.site .button.ghost:hover,
.site .button.ghost:focus-visible { color: var(--paper); border-color: var(--paper-dim); background: var(--surface); }
.site .button.danger { border-color: #672226; background: rgba(210,36,44,.055); }
.site .button.danger::before { content: "×"; }

.site .landing-composition {
  grid-template-columns: minmax(0, 1.08fr) minmax(310px, .92fr);
  gap: clamp(26px, 6vw, 90px);
}
.site .title-block { z-index: 2; }
.site .project-mark { transform: rotate(-1.2deg); }
.site .landing h1 {
  position: relative;
  max-width: 760px;
  font-size: clamp(68px, 12vw, 164px);
  text-shadow: 7px 8px 0 #181813;
}
.site .landing h1 span:first-child { transform: rotate(-1.2deg); transform-origin: left bottom; }
.site .landing h1 span:last-child { transform: translateX(.03em) rotate(1.1deg); transform-origin: left top; }
.site .lead { color: #bbb4a7; }

.site .egg-stage {
  min-height: 430px;
  border: 0;
  isolation: isolate;
}
.site .egg-stage::before {
  content: "";
  z-index: -1;
  top: 9%;
  left: 8%;
  width: 84%;
  height: 82%;
  border: 1px solid rgba(154,183,101,.34);
  border-radius: 43% 57% 47% 53% / 59% 40% 60% 41%;
  background: rgba(154,183,101,.035);
  box-shadow: inset 0 0 60px rgba(154,183,101,.035), 18px 24px 0 rgba(0,0,0,.18);
  transform: rotate(7deg);
}
.site .egg-stage::after {
  content: "NEST / WAITING";
  left: auto;
  right: 2%;
  bottom: 8%;
  padding: 5px 8px;
  border: 1px solid var(--edge-soft);
  border-radius: 9px 4px 8px 3px;
  background: var(--black);
  transform: rotate(2deg);
}
.site .hero-egg {
  width: min(88%, 350px);
  filter: drop-shadow(20px 28px 0 rgba(0,0,0,.27));
  animation: egg-drift 4.8s ease-in-out infinite;
}
@keyframes egg-drift {
  0%, 100% { transform: translate(-3px, 2px) rotate(-2.4deg); }
  50% { transform: translate(4px, -5px) rotate(2.2deg); }
}

.site .landing-rail {
  position: relative;
  border: 0;
  padding-top: 20px;
}

.site .stats-hero {
  position: relative;
  border: 0;
  padding-bottom: 25px;
}
.site .stats-hero h1 { transform: rotate(-.6deg); transform-origin: left bottom; }
.site .stats {
  display: grid;
  gap: 12px;
  border: 0;
}
.site .stats > .stat {
  position: relative;
  padding: 22px 26px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--curve-a);
  background: rgba(17,17,14,.78);
  overflow: hidden;
}
.site .stats > .stat:nth-child(even) {
  margin-left: clamp(0px, 3vw, 42px);
  border-radius: var(--curve-b);
}
.site .stats > .stat::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -54px;
  width: 130px;
  height: 94px;
  border: 1px solid rgba(154,183,101,.12);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.site .search input {
  padding: 12px 15px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--curve-b);
  background: rgba(17,17,14,.72);
  transition: border-color .16s ease, background-color .16s ease;
}
.site .search input:focus { border-color: var(--moss); background: var(--surface-moss); }

.site .collection-grid {
  gap: 12px;
  border: 0;
}
.site .slot {
  position: relative;
  min-height: 282px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--curve-a);
  background: rgba(17,17,14,.82);
  overflow: hidden;
  transition: transform .17s ease, border-color .17s ease, background-color .17s ease;
}
.site .slot:nth-child(3n+2) { border-radius: var(--curve-b); transform: translateY(6px); }
.site .slot:nth-child(4n) { border-radius: 24px 9px 29px 18px / 12px 26px 15px 30px; }
.site .slot:not(.locked):hover { z-index: 2; border-color: #626554; background: var(--surface-raised); transform: translateY(-4px) rotate(-.35deg); }
.site .slot:nth-child(3n+2):not(.locked):hover { transform: translateY(2px) rotate(.35deg); }
.site .slot::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 24px;
  left: 12%;
  width: 76%;
  height: 138px;
  border: 1px solid rgba(154,183,101,.09);
  border-radius: var(--curve-c);
}
.site .slot.locked { opacity: .38; filter: saturate(.3); }

@media (max-width: 760px) {
  .site .landing-composition { grid-template-columns: 1fr; }
  .site .landing h1 { font-size: clamp(64px, 24vw, 112px); }
  .site .egg-stage { min-height: 300px; border: 0; }
  .site .egg-stage::before { left: 13%; width: 74%; }
  .site .landing-rail { gap: 24px; }
  .site .stats > .stat:nth-child(even) { margin-left: 12px; }
  .site .collection-grid { gap: 9px; }
  .site .slot { min-height: 260px; padding: 12px; }
}

/* --------------------------------------------------------------------------
   MODERN HATCH LAB
   Straight geometry, a quiet technical grid and crisp hierarchy replace the
   former hand-drawn archive treatment. OBS remains isolated from this skin.
   -------------------------------------------------------------------------- */

.site {
  --surface: #10110f;
  --surface-raised: #171915;
  --surface-moss: #151a12;
  --edge-soft: #34372f;
  --edge-strong: #585c50;
  --curve-a: 0;
  --curve-b: 0;
  --curve-c: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 280px),
    var(--black);
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.site * { border-radius: 0 !important; }
.site::before { opacity: .035; }
.site::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
  transform: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(154,183,101,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,183,101,.032) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(135deg, transparent 12%, #000 62%, transparent 100%);
  mask-image: linear-gradient(135deg, transparent 12%, #000 62%, transparent 100%);
  pointer-events: none;
}

.site .landing,
.site .page { width: min(1240px, calc(100% - 56px)); }

.site .landing:has(.stream-widget) { grid-template-rows: auto auto auto auto; align-content: start; }
.site .landing:has(.stream-widget) .landing-composition { padding-top: clamp(28px, 5vh, 62px); padding-bottom: 20px; }
.site .landing:has(.stream-widget) .egg-stage { min-height: 340px; }

.site .brand {
  padding: 9px 12px;
  border: 1px solid var(--edge-strong);
  background: rgba(10,10,8,.9);
  transform: none;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.site .brand::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  background: var(--blood);
}
.site .brand:hover,
.site .brand:focus-visible {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--black);
  transform: none;
}

.site .eyebrow {
  padding: 5px 9px 5px 10px;
  border: 0;
  border-left: 3px solid var(--blood);
  background: linear-gradient(90deg, rgba(210,36,44,.12), transparent);
  transform: none;
  letter-spacing: .08em;
}

.site .button {
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--blood);
  border-bottom-color: var(--blood);
  background: var(--blood);
  color: #fff;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}
.site .button::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  margin: 0 9px 3px 0;
  background: currentColor;
}
.site .button::after { content: none; }
.site .button:hover,
.site .button:focus-visible {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--black);
  transform: translateY(-2px);
}
.site .button.ghost {
  border-color: var(--edge-strong);
  background: rgba(10,10,8,.62);
  color: var(--paper);
}
.site .button.ghost:hover,
.site .button.ghost:focus-visible {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--black);
}
.site .button.danger { border-color: #792c31; background: #40161a; color: #ffb0b3; }
.site .button.danger::before { content: ""; }

.site .project-mark,
.site .landing h1 span:first-child,
.site .landing h1 span:last-child,
.site .stats-hero h1 { transform: none; }
.site .landing h1 {
  max-width: 820px;
  text-shadow: none;
  letter-spacing: -.085em;
}
.site .landing h1 span:last-child { margin-left: .12em; }
.site .lead { color: #c2bbaf; }

.site .landing-composition {
  grid-template-columns: minmax(0, 1.08fr) minmax(310px, .72fr);
  gap: clamp(40px, 7vw, 100px);
}
.site .egg-stage {
  min-height: 430px;
  border: 1px solid var(--edge-soft);
  background:
    linear-gradient(var(--moss), var(--moss)) 18px 18px / 34px 1px no-repeat,
    linear-gradient(var(--moss), var(--moss)) 18px 18px / 1px 34px no-repeat,
    linear-gradient(var(--moss), var(--moss)) calc(100% - 18px) calc(100% - 18px) / 34px 1px no-repeat,
    linear-gradient(var(--moss), var(--moss)) calc(100% - 18px) calc(100% - 18px) / 1px 34px no-repeat,
    rgba(17,17,14,.7);
  isolation: isolate;
}
.site .egg-stage::before {
  content: "";
  z-index: -1;
  inset: 13%;
  width: auto;
  height: auto;
  border: 1px solid rgba(154,183,101,.18);
  background: rgba(154,183,101,.025);
  box-shadow: inset 0 0 60px rgba(154,183,101,.025);
  transform: none;
}
.site .egg-stage::after {
  content: "NEST / WAITING";
  right: 17px;
  bottom: 16px;
  padding: 6px 8px;
  border: 1px solid var(--edge-soft);
  background: var(--black);
  transform: none;
}
.site .hero-egg { width: min(84%, 350px); filter: drop-shadow(18px 24px 0 rgba(0,0,0,.3)); }

.site .landing-rail {
  border-top: 1px solid var(--edge-strong);
  padding-top: 22px;
}
.site .stats-hero {
  border-bottom: 1px solid var(--edge-strong);
  padding-bottom: 28px;
}
.site .stats {
  gap: 0;
  border-top: 1px solid var(--edge-soft);
  border-left: 1px solid var(--edge-soft);
}
.site .stats > .stat,
.site .stats > .stat:nth-child(even) {
  margin-left: 0;
  padding: 24px 26px;
  border: 0;
  border-right: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
  background: rgba(16,17,15,.8);
}
.site .stats > .stat:hover { background: var(--surface-raised); }
.site .stats > .stat::after { display: none; }

.site .search input {
  padding: 13px 14px;
  border: 1px solid var(--edge-strong);
  background: rgba(10,10,8,.7);
}
.site .search input:focus {
  border-color: var(--paper);
  background: var(--surface-raised);
  box-shadow: inset 3px 0 0 var(--blood);
}

.site .collection-grid {
  gap: 0;
  border-top: 1px solid var(--edge-soft);
  border-left: 1px solid var(--edge-soft);
}
.site .slot,
.site .slot:nth-child(3n+2),
.site .slot:nth-child(4n) {
  min-height: 282px;
  border: 0;
  border-right: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
  background: rgba(16,17,15,.82);
  transform: none;
}
.site .slot:not(.locked):hover,
.site .slot:nth-child(3n+2):not(.locked):hover {
  z-index: 2;
  border-color: var(--edge-soft);
  background: var(--surface-raised);
  box-shadow: inset 0 3px 0 var(--moss);
  transform: translateY(-3px);
}
.site .slot::after {
  top: 22px;
  left: 12%;
  width: 76%;
  height: 138px;
  border: 1px solid rgba(154,183,101,.08);
  background: linear-gradient(135deg, transparent 49.5%, rgba(154,183,101,.07) 50%, transparent 50.5%);
}

@media (max-width: 760px) {
  .site .landing,
  .site .page { width: min(100% - 28px, 1240px); }
  .site .landing-composition { grid-template-columns: 1fr; }
  .site .egg-stage { min-height: 300px; }
  .site .egg-stage::before { inset: 12%; width: auto; }
  .site .landing h1 { font-size: clamp(64px, 24vw, 112px); }
}

/* IAMBL00D GOTH PALETTE --------------------------------------------------- */
.site {
  --black: #050506;
  --black-soft: #0b0b0d;
  --paper: #f4f4f5;
  --paper-dim: #9b9ba3;
  --rule: #29292f;
  --blood: #c90f29;
  --moss: #e12a42;
  --surface: #0b0b0e;
  --surface-raised: #151519;
  --surface-moss: #200a10;
  --edge-soft: #2d2d34;
  --edge-strong: #51515b;
  color: var(--paper);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 250px),
    #050506;
}
.site::after {
  opacity: .5;
  background-image:
    linear-gradient(rgba(201,15,41,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,15,41,.042) 1px, transparent 1px);
}
.site .brand::before { background: var(--blood); }
.site .brand:hover,
.site .brand:focus-visible { border-color: var(--blood); background: var(--blood); color: #fff; }
.site .eyebrow { color: #ff3f57; background: linear-gradient(90deg, rgba(201,15,41,.17), transparent); }
.site .landing h1 span:last-child { color: transparent; -webkit-text-stroke: 1px #e72a42; }
.site .stats-hero h1 i,
.site .pairing-hero h1 i { color: transparent; -webkit-text-stroke-color: #e72a42; }

.site .egg-stage {
  border-color: #3b1b22;
  background:
    linear-gradient(var(--blood), var(--blood)) 18px 18px / 34px 1px no-repeat,
    linear-gradient(var(--blood), var(--blood)) 18px 18px / 1px 34px no-repeat,
    linear-gradient(var(--blood), var(--blood)) calc(100% - 18px) calc(100% - 18px) / 34px 1px no-repeat,
    linear-gradient(var(--blood), var(--blood)) calc(100% - 18px) calc(100% - 18px) / 1px 34px no-repeat,
    linear-gradient(145deg, rgba(201,15,41,.07), rgba(11,11,14,.92) 52%);
}
.site .egg-stage::before {
  border-color: rgba(225,42,66,.22);
  background: rgba(201,15,41,.025);
  box-shadow: inset 0 0 70px rgba(201,15,41,.035);
}
.site .egg-stage::after { border-color: #56202b; color: #f4f4f5; }

.site .button { border-color: var(--blood); background: var(--blood); }
.site .button:hover,
.site .button:focus-visible { border-color: #fff; background: #fff; color: #050506; }
.site .button.ghost { border-color: #4a4a53; background: rgba(5,5,6,.7); }
.site .button.danger { border-color: #8b1428; background: #31070f; color: #ff9caa; }
.site .search input:focus { border-color: #e12a42; box-shadow: inset 3px 0 0 var(--blood); }
.site .stats > .stat:hover { box-shadow: inset 3px 0 0 var(--blood); }

/* The visible artwork gets a real safe stage. Assets use contain + centered
   object placement, and Shiny layers may glow beyond the image without being
   clipped by the old 132px window. */
.site .slot { min-height: 318px; overflow: visible; }
.site .slot::after { display: none; }
.site .slot-art-shell {
  display: grid;
  place-items: center;
  width: 100%;
  height: 168px;
  padding: 10px;
  border: 1px solid #28282e;
  background:
    linear-gradient(135deg, rgba(201,15,41,.055), transparent 48%),
    #08080a;
  overflow: visible;
}
.site .slot-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
.site .slot-art-placeholder {
  height: 168px;
  border: 1px solid #28282e;
  background: #08080a;
}
.site .shiny-art { overflow: visible; }
.site .slot:not(.locked):hover,
.site .slot:nth-child(3n+2):not(.locked):hover { box-shadow: inset 0 3px 0 var(--blood), 0 14px 28px rgba(0,0,0,.32); }

@media (max-width: 760px) {
  .site .slot { min-height: 292px; }
  .site .slot-art-shell,
  .site .slot-art-placeholder { height: 146px; }
}

/* Configurable OBS overlay -------------------------------------------------
   A fixed 1920x1080 coordinate system is scaled by JavaScript. The same
   variables are used by the protected editor preview and the OBS page. */
.overlay-stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--overlay-stage-scale, 1));
  transform-origin: center;
  overflow: visible;
}

.hatch-flyby-zone {
  --flyby-x: 1060px;
  --flyby-y: 120px;
  --flyby-width: 780px;
  --flyby-height: 760px;
  --flyby-egg-size: 118px;
  position: absolute;
  z-index: 3;
  left: var(--flyby-x);
  top: var(--flyby-y);
  width: var(--flyby-width);
  height: var(--flyby-height);
  overflow: hidden;
  pointer-events: none;
}
.hatch-flyby-zone[hidden] { display: none !important; }
.hatch-flyby {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: var(--flyby-egg-size);
  height: var(--flyby-egg-size);
  will-change: transform, opacity;
}
.hatch-flyby img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 70%;
}
.hatch-flyby.motion-wobble img { animation: hatch-flyby-wobble .48s ease-in-out infinite alternate; }
.hatch-flyby.motion-spin img { animation: hatch-flyby-spin .82s linear infinite; }
.hatch-flyby.rarity-glow img { filter: drop-shadow(0 0 12px var(--flyby-rarity-color, #f4f4f5)) drop-shadow(0 0 24px color-mix(in srgb, var(--flyby-rarity-color, #f4f4f5), transparent 35%)); }
.hatch-flyby.rarity-common { --flyby-rarity-color: #75db8b; }
.hatch-flyby.rarity-rare { --flyby-rarity-color: #57b7ff; }
.hatch-flyby.rarity-epic { --flyby-rarity-color: #b56cff; }
.hatch-flyby.rarity-mythic { --flyby-rarity-color: #ff9a38; }
.hatch-flyby.rarity-secret { --flyby-rarity-color: #ff4fea; }
@keyframes hatch-flyby-wobble {
  from { transform: translateX(-7px) rotate(-9deg) scale(.97); }
  to { transform: translateX(7px) rotate(9deg) scale(1.03); }
}
@keyframes hatch-flyby-spin {
  to { transform: rotate(360deg); }
}

.egg-banner {
  --egg-x: 1600px;
  --egg-y: 455px;
  --egg-width: 280px;
  --egg-height: 150px;
  --egg-border-width: 2px;
  --egg-border-color: #f4f4f5;
  --egg-background: rgba(5,5,6,.94);
  position: absolute;
  left: var(--egg-x);
  top: var(--egg-y);
  right: auto;
  width: var(--egg-width);
  height: var(--egg-height);
  min-height: 0;
  display: block;
  padding: 0;
  border: var(--egg-border-width) solid var(--egg-border-color);
  background: var(--egg-background);
  opacity: 0;
  transform: translateX(36px);
  transition: opacity .28s, transform .42s cubic-bezier(.2,.8,.2,1);
  box-sizing: border-box;
  overflow: visible;
}
.egg-banner.show { opacity: 1; transform: none; }
.egg-banner.effect-glow { box-shadow: 0 0 26px var(--egg-border-color); }
.egg-banner.effect-pulse { --overlay-effect-color: var(--egg-border-color); animation: overlay-border-pulse 2.2s ease-in-out infinite; }
.overlay-egg-art {
  position: absolute;
  left: var(--egg-image-x, 58px);
  top: var(--egg-image-y, 77px);
  width: var(--egg-image-size, 92px);
  height: var(--egg-image-size, 92px);
  object-fit: contain;
  transform: translate(-50%, -50%);
  transform-origin: 50% 82%;
  animation: overlay-egg-wiggle-positioned 2.35s ease-in-out infinite;
}
.overlay-egg-title,
.egg-banner .overlay-egg-title {
  position: absolute;
  left: var(--egg-title-x, 140px);
  top: var(--egg-title-y, -22px);
  width: max-content;
  max-width: 900px;
  margin: 0;
  color: var(--egg-title-color, #e12a42);
  font: 900 var(--egg-title-size, 20px)/1 "Arial Black", Arial, sans-serif;
  letter-spacing: -.025em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.overlay-egg-join,
.egg-banner .overlay-egg-join {
  position: absolute;
  left: var(--egg-join-x, 190px);
  top: var(--egg-join-y, 55px);
  width: var(--egg-join-width, 155px);
  display: block;
  color: var(--egg-join-color, #f4f4f5);
  font: 900 var(--egg-join-size, 14px)/1.24 "Arial Black", Arial, sans-serif;
  text-align: center;
  transform: translate(-50%, -50%);
}
.egg-banner time {
  position: absolute;
  left: var(--egg-timer-x, 190px);
  top: var(--egg-timer-y, 108px);
  width: max-content;
  margin: 0;
  color: var(--egg-timer-color, #f4f4f5);
  font: 900 var(--egg-timer-size, 24px)/1 "Arial Black", Arial, sans-serif;
  text-align: center;
  transform: translate(-50%, -50%);
}
.egg-banner.timer-hidden time { display: none; }

.reveal {
  --hatch-x: 1160px;
  --hatch-y: 385px;
  --hatch-width: 720px;
  --hatch-height: 310px;
  --hatch-border-width: 3px;
  --hatch-border-color: #f4f4f5;
  --hatch-background: rgba(5,5,6,.94);
  --hatch-accent-size: 13px;
  position: absolute;
  left: var(--hatch-x);
  top: var(--hatch-y);
  right: auto;
  width: var(--hatch-width);
  height: var(--hatch-height);
  min-height: 0;
  padding: 0;
  border: var(--hatch-border-width) solid var(--hatch-border-color);
  border-left: var(--hatch-border-width) solid var(--hatch-border-color);
  background: var(--hatch-background);
  display: block;
  text-align: left;
  opacity: 0;
  transform: translateX(36px);
  transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
  box-sizing: border-box;
  overflow: visible;
}
.reveal.show { opacity: 1; transform: none; }
.reveal.effect-glow { box-shadow: 0 0 30px var(--hatch-border-color); }
.reveal.effect-pulse { --overlay-effect-color: var(--hatch-border-color); animation: overlay-border-pulse 2.2s ease-in-out infinite; }
.reveal.secret-reveal {
  --secret-x: 830px;
  --secret-y: 280px;
  --secret-width: 1010px;
  --secret-height: 520px;
  --secret-border-width: 4px;
  --secret-border-color: #ffe681;
  --secret-background: rgba(8,4,13,.96);
  --secret-image-x: 275px;
  --secret-image-y: 260px;
  --secret-image-size: 430px;
  --secret-text-x: 750px;
  --secret-text-y: 260px;
  --secret-text-width: 430px;
  --secret-title-size: 34px;
  --secret-detail-size: 21px;
  --secret-prize-size: 24px;
  --secret-text-color: #f4f4f5;
  --secret-detail-color: #f0dff5;
  --secret-accent-color: #d94cff;
  --secret-accent-size: 46px;
  left: var(--secret-x);
  top: var(--secret-y);
  right: auto;
  width: var(--secret-width);
  height: var(--secret-height);
  max-width: none;
  padding: 0;
  border: var(--secret-border-width) solid var(--secret-border-color);
  background: var(--secret-background);
  opacity: 0;
  transform: translateX(36px);
  z-index: 6;
}
.reveal.secret-reveal.show { opacity: 1; transform: none; }
.reveal.secret-reveal.effect-glow { box-shadow: 0 0 52px var(--secret-border-color); }
.reveal.secret-reveal.effect-pulse { --overlay-effect-color: var(--secret-border-color); }
.reveal.secret-reveal.entrance-zoom { transform: scale(.7); }
.reveal.secret-reveal.entrance-impact { transform: scale(1.28); filter: blur(10px) brightness(1.8); }
.reveal.secret-reveal.entrance-zoom.show,
.reveal.secret-reveal.entrance-impact.show { transform: scale(1); filter: none; }
.reveal-art-shell,
.secret-reveal .reveal-art-shell {
  position: absolute;
  left: var(--hatch-image-x, 175px);
  top: var(--hatch-image-y, 155px);
  width: var(--hatch-image-size, 245px);
  height: var(--hatch-image-size, 245px);
  display: block;
  transform: translate(-50%, -50%);
}
.reveal-art,
.secret-reveal .reveal-art { width: 100%; height: 100%; object-fit: contain; }
.result-copy,
.secret-copy {
  position: absolute;
  left: var(--hatch-text-x, 500px);
  top: var(--hatch-text-y, 155px);
  width: var(--hatch-text-width, 390px);
  max-width: none;
  color: var(--hatch-text-color, #f4f4f5);
  text-align: left;
  transform: translate(-50%, -50%);
}
.result-copy strong,
.secret-copy .result-name { color: var(--hatch-text-color, #f4f4f5); font-size: var(--hatch-title-size, 31px); line-height: 1.08; }
.result-copy small,
.secret-winner,
.secret-prize,
.junk-message { color: var(--hatch-detail-color, #b3b3bb) !important; font-size: var(--hatch-detail-size, 17px) !important; line-height: 1.35; }
.result-placement,
.reveal .secret { color: var(--hatch-accent-color, #e12a42); }
.result-placement { font-size: var(--hatch-accent-size, 13px); }
.reveal .secret { font-size: calc(var(--hatch-title-size, 31px) * 1.15); }
.secret-reveal .reveal-art-shell {
  left: var(--secret-image-x);
  top: var(--secret-image-y);
  width: var(--secret-image-size);
  height: var(--secret-image-size);
}
.secret-reveal .secret-copy {
  left: var(--secret-text-x);
  top: var(--secret-text-y);
  width: var(--secret-text-width);
  color: var(--secret-text-color);
}
.secret-reveal .secret-copy .result-name { color: var(--secret-text-color); font-size: var(--secret-title-size); }
.secret-reveal .secret-winner { color: var(--secret-detail-color) !important; font-size: var(--secret-detail-size) !important; }
.secret-reveal .secret-prize { color: var(--secret-border-color) !important; font-size: var(--secret-prize-size) !important; }
.secret-reveal .result-placement { color: var(--secret-accent-color); font-size: var(--secret-detail-size); }
.secret-reveal .secret { color: var(--secret-accent-color); font-size: var(--secret-accent-size); }
.overlay-egg-title,
.overlay-egg-join,
.result-copy,
.secret-copy { overflow-wrap: anywhere; }
.overlay-egg-title, .egg-banner .overlay-egg-title { white-space: normal; text-align: center; }
.result-copy strong,
.secret-copy .result-name,
.secret-copy .secret,
.secret-prize { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.reveal.level-up-reveal {
  border-color: #d5924a;
  background: linear-gradient(132deg, rgba(29,14,22,.97), rgba(5,7,12,.97));
  box-shadow: 0 0 30px rgba(213,146,74,.26);
  overflow: hidden;
}
.reveal.level-up-reveal::before,
.reveal.level-up-reveal::after { content: ""; position: absolute; width: 75px; height: 75px; pointer-events: none; }
.reveal.level-up-reveal::before { top: 11px; left: 11px; border-top: 2px solid #e9ae69; border-left: 2px solid #e9ae69; clip-path: polygon(0 0,100% 0,0 100%); }
.reveal.level-up-reveal::after { right: 11px; bottom: 11px; border-right: 2px solid #e9ae69; border-bottom: 2px solid #e9ae69; clip-path: polygon(100% 0,100% 100%,0 100%); }
.reveal.level-up-reveal .result-placement { display: block; margin-bottom: 12px; color: #e9ae69; letter-spacing: .12em; }
.reveal.level-up-reveal .result-copy strong { color: #fff8eb; }
.reveal.level-up-reveal .reveal-art-shell { filter: drop-shadow(0 0 18px rgba(227,139,58,.4)); }
.reveal.over-9000-reveal { border-color: #ffe070; box-shadow: 0 0 55px rgba(255,190,64,.55), inset 0 0 65px rgba(183,45,42,.17); }
.reveal.over-9000-reveal .result-copy strong { color: #ffe070; text-shadow: 0 0 20px rgba(255,174,45,.55); }
.reveal.over-9000-reveal .reveal-art-shell { filter: drop-shadow(0 0 28px rgba(255,213,70,.8)); }
@media (prefers-reduced-motion: reduce) {
  .reveal.level-up-reveal, .reveal.over-9000-reveal { animation: none !important; }
}

.secret-effects {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.secret-effects.screen-flash::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: rgba(255,255,255,.72);
  background: radial-gradient(circle, rgba(255,255,255,.92), color-mix(in srgb, var(--particle-color, #ffe681), transparent 28%) 28%, transparent 68%);
  animation: secret-screen-flash .85s ease-out both;
}
.secret-particle {
  position: absolute;
  left: var(--particle-x);
  top: -12%;
  color: var(--particle-color, #ffe681);
  font-size: var(--particle-size, 24px);
  line-height: 1;
  text-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
  opacity: var(--particle-opacity, .9);
  animation: secret-particle-fall var(--particle-duration, 6s) linear var(--particle-delay, 0s) infinite;
}
.secret-effects.effect-embers .secret-particle { filter: blur(.6px); }
.secret-effects.effect-blood .secret-particle { text-shadow: 0 0 8px #ff1838; }
.secret-effects.effect-cosmic .secret-particle { filter: hue-rotate(var(--particle-hue, 0deg)); }
@keyframes secret-particle-fall {
  0% { transform: translate3d(0,-80px,0) rotate(0deg) scale(.7); opacity: 0; }
  10% { opacity: var(--particle-opacity, .9); }
  100% { transform: translate3d(var(--particle-drift, 40px), 1280px, 0) rotate(540deg) scale(1.15); opacity: .08; }
}
@keyframes secret-screen-flash {
  0% { opacity: 0; }
  14% { opacity: 1; }
  100% { opacity: 0; }
}
.junk-emoji {
  position: absolute;
  left: var(--hatch-image-x, 175px);
  top: var(--hatch-image-y, 155px);
  width: var(--hatch-image-size, 245px);
  font-size: calc(var(--hatch-image-size, 245px) * .52);
  text-align: center;
  transform: translate(-50%, -50%);
}
@keyframes overlay-border-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--overlay-effect-color); }
  50% { box-shadow: 0 0 34px var(--overlay-effect-color); }
}
@keyframes overlay-egg-wiggle-positioned {
  0%, 100% { transform: translate(-50%, -50%) translateX(-5px) rotate(-3.5deg); }
  50% { transform: translate(-50%, -50%) translateX(5px) rotate(3.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hatch-flyby.motion-wobble img,
  .hatch-flyby.motion-spin img { animation: none; }
}

@media (max-width: 760px) {
  .egg-banner { right: auto; width: var(--egg-width, 280px); }
  .reveal,
  .reveal.secret-reveal { right: auto; padding: 0; gap: 0; }
  .reveal { width: var(--hatch-width, 720px); }
  .reveal.secret-reveal { width: var(--secret-width, 1010px); }
  .secret-reveal .reveal-art-shell { width: var(--secret-image-size, 430px); height: var(--secret-image-size, 430px); }
  .secret-reveal .reveal-art { width: 100%; height: 100%; }
  .reveal.secret-reveal .secret { font-size: var(--secret-accent-size, 46px); }
}

/* Nessie Collector wordmark ---------------------------------------------- */
.site .collector-wordmark {
  width: min(100%, 820px);
  max-width: none;
  font-size: clamp(76px, 10.8vw, 160px);
  line-height: .72;
  letter-spacing: -.09em;
}
.site .collector-wordmark span:first-child {
  position: relative;
  z-index: 2;
  color: #f4f4f5;
  -webkit-text-stroke: 0;
  text-shadow: 5px 5px 0 #141416;
  white-space: nowrap;
}
.site .landing h1.collector-wordmark span:last-child {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: .01em 0 0 .58em;
  color: #050506;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: .65em;
  font-style: italic;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.045em;
  white-space: nowrap;
  transform: skewX(-14deg) scaleX(.98);
  transform-origin: left center;
  -webkit-text-stroke: 2px #a90019;
  text-shadow:
    0 0 1px #ee1735,
    0 0 7px rgba(205, 0, 31, .42);
}
.site .landing h1.collector-wordmark span:last-child::after {
  content: none;
}

.site .stats-hero h1 { line-height: .8; }
.site .stats-hero h1 i {
  display: inline-block;
  margin: .07em 0 0 .48em;
  color: #050506;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: .7em;
  font-style: italic;
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
  white-space: nowrap;
  transform: skewX(-14deg) scaleX(.98);
  transform-origin: left center;
  -webkit-text-stroke: 2px #a90019;
  text-shadow: 0 0 1px #ee1735, 0 0 7px rgba(205, 0, 31, .42);
}

.site .odds-note {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) 1fr;
  gap: 10px 28px;
  align-items: baseline;
  margin: 42px 0 0;
  padding: 22px 0;
  border-top: 1px solid var(--blood);
  border-bottom: 1px solid var(--rule);
}
.site .odds-note span { color: var(--blood-bright); font: 700 11px/1.4 "Courier New", monospace; letter-spacing: .08em; }
.site .odds-note strong { color: var(--paper); font: 900 clamp(22px, 3vw, 38px)/1 "Arial Black", Arial, sans-serif; letter-spacing: -.045em; }
.site .odds-note p { grid-column: 2; max-width: 760px; margin: 0; color: var(--paper-dim); font: 12px/1.6 "Courier New", monospace; }

/* Shared public footer + legal pages ------------------------------------ */
.site-footer {
  width: min(1180px, calc(100% - 48px));
  margin: 10px auto 0;
  padding: 24px 0 34px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--rule);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer a,
.site-footer p {
  margin: 0;
  color: var(--paper-dim);
  font: 700 10px/1.4 "Courier New", monospace;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-footer a { padding: 5px 0; border-bottom: 1px solid transparent; }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--paper); border-bottom-color: var(--blood); outline: 0; }

.legal-page { width: min(980px, calc(100% - 48px)); }
.legal-hero {
  margin: clamp(58px, 10vh, 112px) 0 42px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--blood);
}
.legal-hero h1 {
  max-width: 900px;
  font-size: clamp(48px, 9vw, 116px);
  line-height: .82;
}
.legal-hero .lead { max-width: 680px; }
.legal-content { display: grid; gap: 0; }
.legal-content section {
  display: grid;
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr);
  gap: 22px 42px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.legal-content section:first-child { border-top: 0; }
.legal-content h2 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(18px, 2.5vw, 25px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.legal-content p,
.legal-content li {
  color: var(--paper-dim);
  font: 15px/1.7 Georgia, serif;
}
.legal-content p { margin: 0 0 12px; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content ul { margin: 0; padding-left: 20px; }
.changelog-content time { display: block; margin-bottom: 10px; color: var(--blood-bright); font: 800 12px/1.4 "Courier New", monospace; }
.changelog-content li + li { margin-top: 8px; }
.changelog-note { color: var(--paper-dim); font: 11px/1.5 "Courier New", monospace; max-width: 680px; }
.legal-content a { color: var(--paper); text-decoration-color: var(--blood); text-underline-offset: 3px; }
.legal-content address { font-style: normal; }
.legal-page .language-switch a[aria-current="page"] {
  color: var(--paper);
  border-bottom-color: var(--blood);
}
@media (max-width: 760px) {
  .site .collector-wordmark { font-size: clamp(62px, 23vw, 105px); }
  .site .landing h1.collector-wordmark span:last-child {
    margin: .01em 0 0 .05em;
    font-size: .50em;
    letter-spacing: -.055em;
    transform: skewX(-13deg) scaleX(.96);
    -webkit-text-stroke-width: 1.5px;
  }
  .site .odds-note { grid-template-columns: 1fr; }
  .site .odds-note p { grid-column: 1; }
  .site-footer { width: min(100% - 32px, 1180px); align-items: flex-start; flex-direction: column; }
  .legal-page { width: min(100% - 32px, 980px); }
  .legal-content section { grid-template-columns: 1fr; gap: 12px; }
}

/* Keep the primary route visible before the decorative egg and stream player. */
.site .mobile-primary-actions { display: none; }
@media (max-width: 760px) {
  .site .mobile-primary-actions { display: flex; margin-top: 24px; gap: 10px 18px; }
  .site .landing-rail .actions { display: none; }
  .site .landing-composition { padding-top: 28px; }
  .site .egg-stage { min-height: min(40vh, 280px); }
  .site .hero-egg { width: min(65%, 220px); }
  .site .stats-hero h1 { font-size: clamp(46px, 14vw, 92px); }
  .site .stats-hero h1 i { margin-left: .16em; font-size: .66em; }
}
@media (max-width: 350px) {
  .site .stats-hero h1 { font-size: 44px; }
  .site .stats-hero h1 i { font-size: .63em; }
}

/* Crisp shared backdrop for Nessie pages; the OBS overlay keeps its own
   transparent body and is intentionally not part of this theme. */
.site {
  --site-backdrop:
    radial-gradient(ellipse 90% 54% at 50% 0%, rgba(91, 8, 27, .38), transparent 72%),
    linear-gradient(125deg, #050506 0%, #0d080b 52%, #050506 100%);
  background: var(--site-backdrop);
  background-attachment: fixed;
}

.site::before,
.site::after { content: none; }

/* Public accessibility: preserve the dark/red theme, increase text contrast. */
.site { --blood-text:#ff7087; --paper-dim:#b9b4bf; }
.site .eyebrow,.site .rank,.site .odds-note>span,.site .changelog-content time { color:var(--blood-text); }
.site .site-footer a,.site .site-footer p,.site .site-footer button,
.site .filter-chip,.site .filter-count,.site .live-updated,.site .player-foot,
.site .recent-time,.site .rarity-filter,.site .profile-summary span { font-size:11px; }
.site :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:3px solid #fff!important;outline-offset:4px!important;
}
.site :is(input,select,textarea) { border-color:#756a78; }
.site :is(button,.button,.filter-chip) { min-height:44px; }
.site .site-footer button { padding:5px 0;border:0;border-bottom:1px solid #756a78;background:none;color:var(--paper-dim);font:700 11px/1.4 "Courier New",monospace;cursor:pointer; }
.site .site-footer { padding-bottom:90px; }
.skip-link { position:absolute;top:10px;left:16px;z-index:100000;transform:translateY(-160%);padding:12px 18px;background:#f4f4f5;color:#09090a;font:700 14px/1.4 Arial,sans-serif; }
.skip-link:focus { transform:translateY(0); }
.site .legal-hero h1 { font-size:clamp(34px,7vw,86px);line-height:1.05;overflow-wrap:anywhere; }
.site .legal-content code { overflow-wrap:anywhere; }
.site.motion-paused *, .site.motion-paused *::before, .site.motion-paused *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) {
  .site *,.site *::before,.site *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}