/* ============ SUPER GOBLINS — comic zine system ============ */
@import url('https://fonts.googleapis.com/css2?family=Rampart+One&family=Bungee&family=Bowlby+One&family=Bowlby+One+SC&family=Black+Ops+One&family=Special+Elite&family=Public+Sans:wght@400;500;700;900&display=swap');

:root {
  /* newsprint paper */
  --paper:        #efe6cf;
  --paper-2:      #e6dab9;
  --paper-edge:   #1a1410;

  /* ink */
  --ink:          #0d0a0a;
  --ink-soft:     #221b18;

  /* the goblin palette */
  --grape:        #6b2d8f;
  --grape-dark:   #3f1858;
  --slime:        #a8d62c;
  --slime-dark:   #6e9012;
  --blood:        #d8201a;
  --blood-dark:   #8a0f0c;
  --cyan:         #25b4c7;
  --cyan-dark:    #0e7783;
  --sun:          #f4c41c;
  --sun-dark:     #b8900a;
  --tang:         #ee7a1e;
  --hot-pink:     #e64585;
  --bone:         #f4ecd6;
  --shadow:       rgba(13,10,10,0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  font-weight: 500;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============ paper texture + halftone ============ */
.paper {
  position: relative;
  flex: 1 0 auto;
  background:
    radial-gradient(ellipse 1400px 900px at 30% 0%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(ellipse 1200px 800px at 80% 100%, rgba(110,80,40,0.10), transparent 60%),
    var(--paper);
}
.paper::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20,15,10,0.10) 1px, transparent 1.6px);
  background-size: 6px 6px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* keep page content above the textures */
.paper > * { position: relative; z-index: 1; }

/* ============ ink shapes ============ */
.ink-panel {
  background: var(--bone);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  position: relative;
}
.ink-panel--tilt-l { transform: rotate(-1.2deg); }
.ink-panel--tilt-r { transform: rotate(1.4deg); }

.halftone-fill {
  background-image:
    radial-gradient(circle at 1px 1px, currentColor 1.5px, transparent 1.6px);
  background-size: 7px 7px;
  color: rgba(0,0,0,0.55);
}

/* ============ jagged comic burst button ============ */
.burst {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Bungee', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 16px 40px;
  border: none;
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 120ms ease;
  transform: rotate(var(--tilt, 0deg));
}
.burst:hover  { transform: translate(-2px,-2px) rotate(calc(var(--tilt, 0deg) - 0.5deg)); }
.burst:active { transform: translate(1px,1px) rotate(var(--tilt, 0deg)); }
.burst > .burst-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.burst > .burst-label { position: relative; z-index: 1; white-space: nowrap; }

/* ============ display type ============ */
.masthead {
  font-family: 'Rampart One', 'Bungee', sans-serif;
  -webkit-text-stroke: 4px var(--ink);
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 0.85;
  text-transform: none;
}
.heading {
  font-family: 'Bowlby One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
.heading-sc {
  font-family: 'Bowlby One SC', sans-serif;
  letter-spacing: 0.02em;
}
.typewriter { font-family: 'Special Elite', monospace; }

/* ============ misc ============ */
.scribble-underline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M2 5 Q 12 1 22 4 T 42 4 T 62 4 T 82 4 T 98 4' stroke='%230d0a0a' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 8px;
  padding-bottom: 6px;
}

/* ============ link-as-stamp util ============ */
.stamp-link {
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease;
  transform: rotate(var(--tilt, 0deg));
}
.stamp-link:hover  { transform: translate(-2px,-2px) rotate(calc(var(--tilt, 0deg) - 0.5deg)); }
.stamp-link:active { transform: translate(1px,1px) rotate(var(--tilt, 0deg)); }

/* ============ scrollbars ============ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--paper-2); }

/* ============ admin shell ============ */
.admin-shell {
  max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px;
  font-family: 'Public Sans', system-ui, sans-serif;
}
.admin-nav {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--ink); color: var(--bone);
  padding: 14px 24px; border-bottom: 4px solid var(--ink);
}
.admin-nav a { color: var(--bone); text-decoration: none; font-family: 'Bowlby One', sans-serif; letter-spacing: 0.04em; }
.admin-nav a:hover { color: var(--sun); }
.admin-nav .spacer { flex: 1; }
.admin-card {
  background: var(--bone); border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink); padding: 24px 28px;
  margin-bottom: 28px;
}
.admin-card h2 { font-family: 'Bowlby One', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 18px; font-size: 24px; }
.admin-card label { display: block; font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 14px 0 6px; }
.admin-card input[type=text],
.admin-card input[type=email],
.admin-card input[type=password],
.admin-card input[type=url],
.admin-card input[type=datetime-local],
.admin-card input[type=number],
.admin-card select,
.admin-card textarea {
  width: 100%; padding: 10px 12px; border: 2px solid var(--ink);
  background: var(--paper); font-family: 'Public Sans', sans-serif; font-size: 15px;
  border-radius: 0;
}
.admin-card textarea { min-height: 140px; resize: vertical; }
.admin-card .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.admin-card button, .admin-card .btn {
  display: inline-block; background: var(--sun); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 20px; font-family: 'Bowlby One', sans-serif; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 16px; cursor: pointer; text-decoration: none;
  margin-top: 18px;
}
.admin-card button, .admin-card .btn { transition: transform 120ms ease; }
.admin-card button:hover, .admin-card .btn:hover { transform: translate(-2px,-2px) rotate(-0.5deg); }
.admin-card button:active, .admin-card .btn:active { transform: translate(1px,1px); }
.admin-card .btn-secondary { background: var(--paper-2); }
.admin-card .btn-danger { background: var(--blood); color: var(--bone); }
.admin-card .field-row { margin-bottom: 18px; }
.admin-flash {
  border: 3px solid var(--ink); padding: 10px 16px; margin-bottom: 20px;
  font-family: 'Special Elite', monospace; background: var(--slime);
}
.admin-flash.error { background: var(--blood); color: var(--bone); }
.admin-color-swatch { display: inline-block; width: 28px; height: 28px; border: 2px solid var(--ink); vertical-align: middle; margin-right: 8px; }
.admin-list { list-style: none; padding: 0; margin: 0; }
.admin-list li { padding: 10px 0; border-bottom: 1px dashed var(--ink); display: flex; align-items: center; gap: 14px; }
.admin-list li:last-child { border-bottom: none; }
.admin-thumb { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--ink); }

/* ============ comic cover ============ */
.comic-cover {
  width: 280px;
  height: 433px;
}

/* ============ countdown ============ */
.countdown-cells {
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
}
.countdown-digit {
  font-family: 'Bowlby One', sans-serif;
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
}
.countdown-sep {
  font-family: 'Bowlby One', sans-serif;
  font-size: 56px;
  color: var(--blood);
  transform: translateY(-6px);
}
.countdown-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 4px;
}

/* ============ countdown LIVE badge ============ */
.countdown-live {
  font-family: 'Bowlby One', sans-serif;
  font-size: 80px;
  color: var(--blood);
  text-shadow:
    3px 3px 0 var(--ink),
    -1px -1px 0 var(--ink),
    1px -1px 0 var(--ink),
    -1px 1px 0 var(--ink);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1;
  padding: 4px 0 8px;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

/* ============ fave-comics carousel ============ */
.fave-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 8px;
}
.fave-track {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  flex: 1;
  padding: 14px 4px 18px;
  scrollbar-width: none;
}
.fave-track::-webkit-scrollbar { display: none; }
.fave-track > * { scroll-snap-align: start; }
.fave-arrow {
  flex: none;
  width: 52px; height: 52px;
  background: var(--bone);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: 'Bowlby One', sans-serif;
  font-size: 28px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms ease, opacity 120ms ease;
  user-select: none;
}
.fave-arrow:hover { transform: translate(-2px, -2px) rotate(-0.5deg); }
.fave-arrow:active { transform: translate(1px, 1px); }
.fave-arrow[disabled] { opacity: 0.3; cursor: not-allowed; transform: none; }
.fave-tile-link { text-decoration: none; color: inherit; display: block; }

/* ============ responsive layout helpers ============ */
.masthead-wrap         { position: relative; overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--paper); }
.masthead-inner        { position: relative; height: 220px; }
.masthead-logo-link    { position: absolute; left: 3%; top: 50%; transform: translateY(-50%) rotate(-6deg); height: 170px; z-index: 2; }
.masthead-logo         { height: 170px; filter: drop-shadow(5px 5px 0 var(--ink)); }
.masthead-title-img    { position: absolute; left: calc(3% + 200px); top: 50%;
                          transform: translateY(-50%) rotate(-2deg); transform-origin: left center;
                          max-height: 78%; z-index: 1; filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.25)); }
.masthead-tape         { position: absolute; left: 0; right: 0; bottom: -2px; height: 8px; background: var(--ink); }

.botm-panel {
  background: var(--paper-2); padding: 40px 56px;
  display: grid; grid-template-columns: 320px 1fr; gap: 56px;
  align-items: center;
}
.botm-title { font-size: 56px; line-height: 0.95; margin: 4px 0 4px; }

.hero-name { font-size: 96px; line-height: 0.9; margin: 0; color: var(--ink); }

.about-grid {
  margin-top: 36px;
  display: grid; grid-template-columns: 320px 1fr; gap: 40px;
  align-items: flex-start;
}

.user-topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4vw; border-bottom: 3px solid var(--ink);
  background: var(--ink); color: var(--bone); flex-wrap: wrap; gap: 10px;
}

.user-banner-wrap { width: 100%; height: 280px; border: 4px solid var(--ink);
                     box-shadow: 8px 8px 0 var(--ink); position: relative; overflow: hidden; }

@media (max-width: 760px) {
  .masthead-inner       { height: 160px; }
  .masthead-logo-link   { height: 110px; left: 4%; }
  .masthead-logo        { height: 110px; }
  .masthead-title-img   { left: calc(4% + 130px); right: 4%; max-height: 70%; }

  .botm-panel           { grid-template-columns: 1fr; padding: 24px 20px; gap: 22px; }
  .botm-title           { font-size: 36px; }

  .comic-cover          { width: 200px; height: 309px; box-shadow: 6px 6px 0 var(--ink); }

  .countdown-cell       { padding: 0 6px; }
  .countdown-digit      { font-size: 36px; }
  .countdown-sep        { font-size: 30px; transform: translateY(-3px); }
  .countdown-label      { font-size: 10px; letter-spacing: 0.1em; }
  .countdown-live       { font-size: 56px; }

  .hero-name            { font-size: 56px; }

  .about-grid           { grid-template-columns: 1fr; gap: 22px; }

  .user-topnav          { padding: 12px 4vw; }
  .user-banner-wrap     { height: 180px; }

  .fave-carousel        { gap: 8px; padding: 0 4px; }
  .fave-arrow           { width: 44px; height: 44px; font-size: 22px; }

  /* keep paper section paddings sensible on phones */
  .paper section        { padding-left: 4vw !important; padding-right: 4vw !important; }
}

@media (max-width: 400px) {
  .hero-name            { font-size: 44px; }
  .botm-title           { font-size: 30px; }
  .masthead-inner       { height: 130px; }
  .masthead-logo-link   { height: 90px; }
  .masthead-logo        { height: 90px; }
  .masthead-title-img   { left: calc(4% + 105px); }

  .comic-cover          { width: 168px; height: 260px; }

  .countdown-cell       { padding: 0 4px; }
  .countdown-digit      { font-size: 28px; }
  .countdown-sep        { font-size: 22px; transform: translateY(-2px); }
  .countdown-label      { font-size: 9px; letter-spacing: 0.06em; }
  .countdown-live       { font-size: 44px; }
}