@font-face { font-family: 'Bangers'; src: url('/assets/fonts/bangers-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Comic Neue'; src: url('/assets/fonts/comic-neue-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Comic Neue'; src: url('/assets/fonts/comic-neue-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url('/assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* ===== design tokens ===== */
:root {
  --bg: #1A0B2E;
  --bg-tile: #220E3D;
  --neon-green: #39FF14;
  --hot-pink: #FF2DAA;
  --electric-yellow: #FFF200;
  --cyan: #00F0FF;
  --ink: #0D0015;
  --paper: #FFF5FA;

  --font-display: 'Bangers', cursive;
  --font-body: 'Comic Neue', sans-serif;
  --font-pixel: 'Press Start 2P', monospace;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;

  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.tile-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-conic-gradient(var(--bg) 0% 25%, var(--bg-tile) 0% 50%);
  background-size: 40px 40px;
}

/* ===== marquee ===== */
.marquee-bar {
  background: var(--hot-pink);
  color: var(--ink);
  border-bottom: 4px solid var(--electric-yellow);
  overflow: hidden;
  white-space: nowrap;
  padding: var(--sp-1) 0;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 22s linear infinite;
}
.marquee-track span {
  font-family: var(--font-pixel);
  font-size: 12px;
  padding-right: 60px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== banner strip ===== */
.banner-strip {
  text-align: center;
  padding: var(--sp-2) var(--sp-2) 0;
}
.banner-strip-img {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border: 4px solid var(--electric-yellow);
  box-shadow: 6px 6px 0 var(--hot-pink);
}
.banner-strip-caption {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--cyan);
  margin: var(--sp-1) 0 0;
}

/* ===== hero ===== */
.hero { padding: var(--sp-4) var(--sp-2) var(--sp-3); text-align: center; }
.hero-frame { max-width: 780px; margin: 0 auto; }

.hero-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.badge-gif {
  font-family: var(--font-pixel);
  font-size: 11px;
  background: var(--electric-yellow);
  color: var(--ink);
  padding: 6px 10px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  animation: blink-hard 1s steps(1) infinite;
}
.badge-gif--alt { background: var(--cyan); animation-delay: .5s; }
.hit-counter {
  font-family: var(--font-pixel);
  font-size: 11px;
  background: var(--ink);
  color: var(--neon-green);
  padding: 6px 10px;
  border: 2px solid var(--neon-green);
}
@keyframes blink-hard {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(64px, 14vw, 130px);
  line-height: 0.95;
  margin: var(--sp-2) 0;
  letter-spacing: 2px;
  color: var(--neon-green);
  text-shadow:
    3px 3px 0 var(--hot-pink),
    6px 6px 0 var(--ink);
}
.wobble { display: inline-block; animation: wobble 2.4s ease-in-out infinite; }
.wobble--2 { color: var(--electric-yellow); text-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--ink); animation-delay: .3s; }
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wobble, .marquee-track, .badge-gif { animation: none; }
}

.hero-sub {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--cyan);
  margin-bottom: var(--sp-3);
}
.blink { animation: blink-hard 1.2s steps(1) infinite; }

.hero-photo-wrap {
  display: inline-block;
  background: var(--paper);
  padding: var(--sp-1);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--hot-pink);
  transform: rotate(-1.5deg);
  margin-bottom: var(--sp-3);
}
.hero-photo {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border: 2px solid var(--ink);
}
.hero-photo-caption {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink);
  margin: var(--sp-1) 0 0;
  max-width: 320px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* ===== buttons ===== */
.btn {
  font-family: var(--font-pixel);
  font-size: 13px;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: var(--radius);
  border: 3px solid var(--ink);
  display: inline-block;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .08s ease;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--neon-green); color: var(--ink); }
.btn-outline { background: var(--electric-yellow); color: var(--ink); }
.btn-cough {
  background: var(--hot-pink);
  color: var(--paper);
  font-size: 22px;
  padding: 22px 48px;
}

/* ===== section shell ===== */
section { padding: var(--sp-5) var(--sp-2); }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 56px);
  text-align: center;
  color: var(--electric-yellow);
  text-shadow: 3px 3px 0 var(--ink);
  margin: 0 0 var(--sp-1);
}
.section-sub {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--cyan);
  text-align: center;
  margin: 0 0 var(--sp-4);
}

/* ===== cough section ===== */
.cough-section { background: var(--ink); border-top: 4px dashed var(--hot-pink); border-bottom: 4px dashed var(--hot-pink); }
.cough-rig {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.cough-canvas {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 5px solid var(--neon-green);
  box-shadow: 0 0 0 5px var(--ink), 8px 8px 0 var(--hot-pink);
  image-rendering: pixelated;
}
.cough-controls { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.pixel-readout {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: var(--sp-1) var(--sp-3);
  text-align: center;
  box-shadow: 4px 4px 0 var(--cyan);
}
.pixel-readout-label { display: block; font-family: var(--font-pixel); font-size: 10px; margin-bottom: 4px; }
.pixel-readout-value { display: block; font-family: var(--font-pixel); font-size: 26px; letter-spacing: 2px; color: var(--hot-pink); }
.cough-rank { font-family: var(--font-pixel); font-size: 12px; color: var(--electric-yellow); }

.cough-shake { animation: cough-shake .35s ease; }
@keyframes cough-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 4px) rotate(-1deg); }
  40% { transform: translate(8px, -4px) rotate(1deg); }
  60% { transform: translate(-6px, 2px) rotate(-1deg); }
  80% { transform: translate(6px, -2px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cough-shake { animation: none; }
}

/* ===== guestbook ===== */
.guestbook-section { background: var(--bg); }
.guestbook-list {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.guestbook-entry {
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: var(--sp-2);
  box-shadow: 5px 5px 0 var(--neon-green);
}
.guestbook-entry:nth-child(even) { box-shadow: 5px 5px 0 var(--electric-yellow); transform: rotate(0.6deg); }
.guestbook-entry:nth-child(odd) { transform: rotate(-0.6deg); }
.guestbook-name { font-family: var(--font-pixel); font-size: 11px; color: var(--hot-pink); margin: 0 0 6px; }
.guestbook-msg { margin: 0; font-weight: 700; }

/* ===== buy / construction ===== */
.buy-section { background: var(--ink); }
.construction-banner {
  max-width: 640px;
  margin: 0 auto;
  border: 4px solid var(--ink);
}
.construction-stripe {
  height: 18px;
  background: repeating-linear-gradient(45deg, var(--electric-yellow) 0 20px, var(--ink) 20px 40px);
}
.construction-content {
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
}
.construction-label { font-family: var(--font-pixel); font-size: 15px; color: var(--hot-pink); margin: 0 0 var(--sp-1); }
.construction-sub { font-family: var(--font-body); font-weight: 700; margin: 0 0 var(--sp-2); }

.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  color: var(--electric-yellow);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-pixel);
  font-size: 11px;
  cursor: pointer;
  margin-bottom: var(--sp-2);
  box-shadow: 3px 3px 0 var(--hot-pink);
}
.ca-chip-label { color: var(--neon-green); }
.ca-chip-copy { color: var(--cyan); }

.buy-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-2); }
.chain-tag { font-family: var(--font-pixel); font-size: 10px; color: var(--hot-pink); }

/* ===== footer ===== */
.site-footer {
  background: var(--bg-tile);
  border-top: 4px solid var(--neon-green);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
}
.footer-webring-label { font-family: var(--font-pixel); font-size: 12px; color: var(--electric-yellow); margin: 0 0 var(--sp-3); }
.webring-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.webring-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 14px;
  width: 88px;
  box-shadow: 3px 3px 0 var(--hot-pink);
}
.webring-btn img { width: 44px; height: 44px; }
.webring-btn span { font-family: var(--font-pixel); font-size: 9px; color: var(--ink); }
.footer-fineprint { font-family: var(--font-body); font-size: 12px; color: var(--cyan); max-width: 520px; margin: 0 auto; opacity: .8; }

/* ===== responsive ===== */
@media (min-width: 920px) {
  .cough-rig { flex-direction: row; align-items: flex-start; }
}
@media (max-width: 400px) {
  body { font-size: 16px; }
  .btn-cough { font-size: 18px; padding: 18px 32px; }
  .hero-photo { width: 240px; height: 240px; }
}