:root {
  --black:#020102;
  --pink:#d63286;
  --acid:#b8d93a;
  --paper:#c9b681;
  --bone:#eadab2;
  --dim:#776b4d;
}

* { box-sizing:border-box; }

html, body {
  margin:0;
  min-height:100%;
  background:#020102;
  color:var(--bone);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.045em;
}

body { overflow-x:hidden; }

.home {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,460px);
  align-items:center;
  gap:clamp(1.5rem,5vw,5rem);
  padding:clamp(1.5rem,6vw,6rem);
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.76), rgba(0,0,0,.28)),
    var(--cover) center/cover no-repeat;
}

.kicker {
  display:inline-block;
  color:#111;
  background:var(--paper);
  border:4px solid #000;
  padding:.55rem .75rem;
  margin-bottom:1rem;
  font-size:clamp(1rem,2vw,1.35rem);
  box-shadow:6px 6px 0 var(--pink);
  transform:rotate(-2deg);
}

h1 {
  margin:0;
  font-size:clamp(4.5rem,13vw,12rem);
  line-height:.74;
  color:var(--pink);
  text-shadow:5px 5px 0 #000, -2px -2px 0 #000;
  transform:rotate(-2deg);
}

.subtitle {
  margin-top:1rem;
  color:var(--acid);
  font-size:clamp(2rem,5vw,5rem);
  line-height:.85;
  text-shadow:4px 4px 0 #000;
}

.logline {
  margin-top:1.5rem;
  max-width:720px;
  padding:1rem 1.1rem;
  color:#15100b;
  background:var(--paper);
  border:4px solid #000;
  font-family:"Courier New", monospace;
  font-size:clamp(1rem,2vw,1.2rem);
  font-weight:900;
  letter-spacing:0;
  line-height:1.35;
  box-shadow:10px 10px 0 rgba(184,217,58,.38);
}

.start {
  display:inline-block;
  margin-top:1.35rem;
  margin-right:.8rem;
  color:#080608;
  background:var(--acid);
  border:4px solid #000;
  padding:.85rem 1.15rem;
  text-decoration:none;
  font-size:1.8rem;
  box-shadow:8px 8px 0 var(--pink);
}

.cover-img {
  border:5px solid #000;
  box-shadow:0 0 0 4px var(--paper), 18px 18px 0 rgba(214,50,134,.45);
  transform:rotate(2deg);
  background:#000;
}

.cover-img img {
  display:block;
  width:100%;
}

.marquee {
  border-block:5px solid #000;
  background:var(--acid);
  color:#080608;
  padding:.7rem 0;
  overflow:hidden;
  white-space:nowrap;
  font-size:clamp(1.25rem,3.4vw,3rem);
  text-shadow:2px 2px 0 rgba(214,50,134,.55);
}

.marquee span {
  display:inline-block;
  animation:crawl 22s linear infinite;
}

@keyframes crawl {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

.reader {
  min-height:100vh;
  height:100svh;
  background:#020102;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(.5rem,2vw,1.5rem);
  position:relative;
}

.comic-frame {
  position:relative;
  width:min(100vw, 920px);
  height:calc(100svh - 74px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#020102;
}

.comic-page {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border:4px solid #080808;
  box-shadow:0 0 0 3px var(--paper), 0 0 36px rgba(0,0,0,.9);
  background:#000;
}

.tap-zone {
  position:absolute;
  top:0;
  bottom:0;
  width:42%;
  z-index:4;
  text-decoration:none;
  color:transparent;
  -webkit-tap-highlight-color: transparent;
}

.tap-zone.prev { left:0; }
.tap-zone.next { right:0; }

.tap-zone::after {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:rgba(234,218,178,.0);
  font-size:5rem;
  text-shadow:4px 4px 0 #000;
  transition:color .15s ease;
}

.tap-zone.prev::after { content:"‹"; left:1rem; }
.tap-zone.next::after { content:"›"; right:1rem; }

.tap-zone:hover::after { color:rgba(234,218,178,.72); }

.topbar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:6;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.6rem .8rem;
  pointer-events:none;
}

.badge, .page-count {
  pointer-events:auto;
  color:#111;
  background:rgba(201,182,129,.94);
  border:3px solid #000;
  padding:.35rem .55rem;
  box-shadow:4px 4px 0 rgba(214,50,134,.75);
  text-decoration:none;
  font-size:clamp(.9rem,2.5vw,1.25rem);
}

.bottomnav {
  height:64px;
  width:min(100vw, 920px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.6rem;
  margin-top:.5rem;
}

.navbtn {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  color:#080608;
  background:var(--acid);
  border:3px solid #000;
  text-decoration:none;
  box-shadow:5px 5px 0 var(--pink);
  font-size:clamp(1rem,3vw,1.5rem);
}

.navbtn.disabled,
.tap-zone.disabled {
  opacity:.28;
  pointer-events:none;
  filter:grayscale(1);
}

.current {
  color:#111;
  background:var(--paper);
  border:3px solid #000;
  padding:.7rem .9rem;
  min-width:135px;
  text-align:center;
  font-size:clamp(1rem,3vw,1.35rem);
}

.index {
  min-height:100vh;
  padding:clamp(2rem,5vw,5rem);
  background:#020102;
}

.index h2, .extras h2 {
  color:var(--pink);
  font-size:clamp(3rem,8vw,7rem);
  line-height:.8;
  margin:0 0 2rem;
  text-shadow:5px 5px 0 #000;
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1rem;
}

.thumb {
  display:block;
  text-decoration:none;
  color:var(--bone);
  border:3px solid #000;
  box-shadow:0 0 0 2px var(--paper);
  background:#070607;
  padding:.4rem;
}

.thumb img {
  display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  filter:brightness(.82) contrast(1.1);
}

.thumb span {
  display:block;
  padding:.35rem 0 .1rem;
  text-align:center;
}

.extras {
  background:#050205;
  border-top:7px solid #000;
  padding:clamp(2rem,5vw,5rem);
}

.quote-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-bottom:3rem;
}

.quote-card {
  background:#0b070b;
  border:3px solid var(--paper);
  box-shadow:8px 8px 0 #000;
  padding:1rem;
  min-height:150px;
}

.quote-card strong {
  display:block;
  color:var(--acid);
  font-size:1.7rem;
  margin-bottom:.5rem;
}

.quote-card p {
  margin:0;
  color:var(--bone);
  font-family:"Courier New", monospace;
  font-weight:900;
  letter-spacing:0;
  line-height:1.35;
}

.legal {
  border-top:3px solid var(--paper);
  padding-top:2rem;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1.5rem;
  color:var(--dim);
  font-family:"Courier New", monospace;
  font-size:.85rem;
  letter-spacing:0;
  line-height:1.45;
}

.legal h3 {
  color:var(--paper);
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.045em;
  font-size:1.6rem;
  margin:.3rem 0;
}

.legal a {
  color:var(--acid);
}

.footer-mark {
  color:var(--pink);
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.045em;
  font-size:clamp(2rem,6vw,5rem);
  line-height:.85;
  text-shadow:4px 4px 0 #000;
}

@media (max-width:800px) {
  .home {
    grid-template-columns:1fr;
    background:
      linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.72)),
      var(--cover) center/cover no-repeat;
  }
  .cover-img { transform:none; }
  .comic-frame { height:calc(100svh - 70px); }
  .comic-page {
    border:2px solid #080808;
    box-shadow:0 0 0 2px var(--paper);
  }
  .tap-zone::after { display:none; }
  .legal { grid-template-columns:1fr; }
}


.cover-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.cover-link .cover-img{
  transition:transform .18s ease, filter .18s ease;
}

.cover-link:hover .cover-img{
  transform:rotate(2deg) scale(1.02);
  filter:brightness(1.05);
}

.cover-link::after{
  content:"CLICK COVER TO ENTER JUNKWORLD";
  display:block;
  text-align:center;
  margin-top:1rem;
  color:var(--acid);
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing:.08em;
}

.comic-frame,
.comic-page {
  touch-action: pan-y;
}


/* Dora chews reality: subtle homepage cover glitch */
.cover-link {
  position: relative;
}

.cover-link .cover-img {
  position: relative;
  overflow: hidden;
}

.cover-link .cover-img::before,
.cover-link .cover-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 3;
}

.cover-link .cover-img::before {
  background: rgba(214, 50, 134, .28);
  animation: doraGlitchPink 24s infinite;
}

.cover-link .cover-img::after {
  background: rgba(184, 217, 58, .22);
  animation: doraGlitchAcid 24s infinite;
}

.cover-link img {
  animation: doraCoverTwitch 24s infinite;
}

@keyframes doraCoverTwitch {
  0%, 88%, 100% { transform: translate(0,0) skew(0deg); filter: none; }
  89% { transform: translate(2px,-1px) skew(.4deg); filter: contrast(1.25) saturate(1.15); }
  89.5% { transform: translate(-3px,1px) skew(-.4deg); filter: contrast(1.35) saturate(1.25); }
  90% { transform: translate(0,0) skew(0deg); filter: none; }
  96% { transform: translate(0,0); filter: none; }
  96.5% { transform: translate(4px,0); filter: hue-rotate(25deg) contrast(1.35); }
  97% { transform: translate(-2px,0); filter: hue-rotate(-15deg) contrast(1.25); }
  97.5%, 100% { transform: translate(0,0); filter: none; }
}

@keyframes doraGlitchPink {
  0%, 88%, 90.5%, 96%, 98%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
  89% { opacity: .8; transform: translate(7px,-2px); clip-path: inset(12% 0 65% 0); }
  89.45% { opacity: .65; transform: translate(-6px,2px); clip-path: inset(55% 0 24% 0); }
  96.6% { opacity: .7; transform: translate(8px,0); clip-path: inset(35% 0 42% 0); }
  97.15% { opacity: .55; transform: translate(-5px,0); clip-path: inset(72% 0 8% 0); }
}

@keyframes doraGlitchAcid {
  0%, 88.2%, 90.5%, 96.2%, 98%, 100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
  89.2% { opacity: .7; transform: translate(-8px,2px); clip-path: inset(28% 0 52% 0); }
  89.7% { opacity: .55; transform: translate(5px,-2px); clip-path: inset(70% 0 10% 0); }
  96.75% { opacity: .7; transform: translate(-7px,0); clip-path: inset(18% 0 64% 0); }
  97.25% { opacity: .55; transform: translate(6px,0); clip-path: inset(50% 0 30% 0); }
}


/* Reader-page micro-glitch: occasional, subtle, and not constant */
.comic-page {
  animation: readerPageTwitch 31s infinite;
}

.comic-frame::before,
.comic-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}

.comic-frame::before {
  background: rgba(214, 50, 134, .24);
  animation: readerGlitchPink 31s infinite;
}

.comic-frame::after {
  background: rgba(184, 217, 58, .2);
  animation: readerGlitchAcid 31s infinite;
}

@keyframes readerPageTwitch {
  0%, 82%, 84%, 93%, 95%, 100% {
    transform: translate(0,0);
    filter: none;
  }
  82.4% {
    transform: translate(2px,-1px);
    filter: contrast(1.22) saturate(1.14);
  }
  82.8% {
    transform: translate(-3px,1px);
    filter: hue-rotate(18deg) contrast(1.25);
  }
  83.2% {
    transform: translate(1px,0);
    filter: none;
  }
  93.5% {
    transform: translate(-2px,0);
    filter: contrast(1.2);
  }
  94% {
    transform: translate(3px,0);
    filter: hue-rotate(-14deg) contrast(1.25);
  }
}

@keyframes readerGlitchPink {
  0%, 82%, 84%, 93%, 95%, 100% {
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
  82.35% {
    opacity: .55;
    transform: translate(7px,-2px);
    clip-path: inset(16% 0 68% 0);
  }
  82.75% {
    opacity: .42;
    transform: translate(-6px,2px);
    clip-path: inset(58% 0 25% 0);
  }
  93.65% {
    opacity: .42;
    transform: translate(6px,0);
    clip-path: inset(38% 0 43% 0);
  }
}

@keyframes readerGlitchAcid {
  0%, 82.2%, 84.1%, 93.2%, 95%, 100% {
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
  82.55% {
    opacity: .5;
    transform: translate(-8px,2px);
    clip-path: inset(31% 0 53% 0);
  }
  82.95% {
    opacity: .36;
    transform: translate(5px,-2px);
    clip-path: inset(72% 0 12% 0);
  }
  93.85% {
    opacity: .4;
    transform: translate(-7px,0);
    clip-path: inset(20% 0 66% 0);
  }
}


/* Page arrival glitch: fires immediately when each comic page loads */
.reader .comic-page {
  animation:
    pageEntryGlitch .38s ease-out,
    readerPageTwitch 31s infinite;
}

.reader .comic-frame::before {
  animation:
    pageEntryOverlayPink .38s ease-out,
    readerGlitchPink 31s infinite;
}

.reader .comic-frame::after {
  animation:
    pageEntryOverlayAcid .38s ease-out,
    readerGlitchAcid 31s infinite;
}

@keyframes pageEntryGlitch {
  0% {
    opacity: 0;
    transform: scale(1.018) translate(0,0);
    filter: hue-rotate(24deg) contrast(1.55) saturate(1.35);
  }
  12% {
    opacity: 1;
    transform: scale(1.012) translate(6px,-2px);
    filter: hue-rotate(-18deg) contrast(1.45) saturate(1.25);
  }
  24% {
    transform: scale(1.008) translate(-7px,2px);
    filter: hue-rotate(32deg) contrast(1.38) saturate(1.28);
  }
  38% {
    transform: scale(1.004) translate(3px,0);
    filter: contrast(1.25);
  }
  58% {
    opacity: 1;
    transform: translate(0,0);
    filter: hue-rotate(-8deg) contrast(1.18);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
    filter: none;
  }
}

@keyframes pageEntryOverlayPink {
  0% {
    opacity: .78;
    transform: translate(9px,-2px);
    clip-path: inset(10% 0 68% 0);
  }
  18% {
    opacity: .62;
    transform: translate(-8px,2px);
    clip-path: inset(52% 0 28% 0);
  }
  36% {
    opacity: .42;
    transform: translate(6px,0);
    clip-path: inset(72% 0 10% 0);
  }
  62% {
    opacity: .18;
    transform: translate(-3px,0);
    clip-path: inset(30% 0 48% 0);
  }
  100% {
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes pageEntryOverlayAcid {
  0% {
    opacity: .7;
    transform: translate(-10px,2px);
    clip-path: inset(28% 0 54% 0);
  }
  20% {
    opacity: .54;
    transform: translate(7px,-2px);
    clip-path: inset(66% 0 14% 0);
  }
  42% {
    opacity: .35;
    transform: translate(-6px,0);
    clip-path: inset(18% 0 66% 0);
  }
  66% {
    opacity: .15;
    transform: translate(3px,0);
    clip-path: inset(44% 0 36% 0);
  }
  100% {
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
}


body.wormhole-transition::before{
 content:"";
 position:fixed;
 inset:0;
 z-index:9999;
 pointer-events:none;
 background:
 radial-gradient(circle, rgba(184,217,58,.9) 0%, rgba(214,50,134,.8) 35%, rgba(0,0,0,.95) 70%);
 animation: wormholeFlash .26s ease-out forwards;
}

body.wormhole-transition .comic-page{
 animation: wormholeRip .26s ease-out forwards !important;
}

@keyframes wormholeRip{
 0%{transform:translate(0,0);filter:none;}
 25%{transform:translate(8px,-2px);filter:hue-rotate(35deg) contrast(1.5);}
 50%{transform:translate(-10px,2px);filter:hue-rotate(-35deg) contrast(1.8);}
 100%{transform:scale(.96);opacity:0;}
}

@keyframes wormholeFlash{
 0%{opacity:0;}
 30%{opacity:1;}
 100%{opacity:0;}
}