:root {
  --cardboard: #c7a06b;
  --cardboard-dark: #b08a57;
  --cardboard-shadow: rgba(90, 60, 20, 0.35);
  --ink: #1c1712;
  --red: #b5312a;
  --bg: #2a2622;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: "Marker Felt", "Comic Sans MS", "Segoe Print", system-ui, sans-serif;
}

/* Vertical swipe deck: one full-screen slide per slogan */
#deck {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
#deck::-webkit-scrollbar { display: none; }

.slide {
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

/* The cardboard sign */
.cardboard {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  max-height: 76dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 6% 7%;
  border-radius: 6px;
  color: var(--ink);
  background-color: var(--cardboard);
  /* fibrous cardboard texture from layered gradients */
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 7px),
    radial-gradient(120% 120% at 30% 20%, rgba(255,240,215,0.25), transparent 55%),
    radial-gradient(100% 100% at 80% 90%, rgba(90,55,20,0.22), transparent 60%);
  box-shadow:
    0 18px 40px var(--cardboard-shadow),
    inset 0 0 60px rgba(120, 80, 35, 0.25);
  /* subtle irregular tear on edges */
  clip-path: polygon(
    0.5% 1%, 99% 0.3%, 99.6% 99%, 1% 99.4%
  );
}

/* faint horizontal fold line, like folded cardboard */
.cardboard::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  background: linear-gradient(rgba(70,45,15,0.18), rgba(255,255,255,0.06));
  transform: translateY(-50%);
  pointer-events: none;
}

.line {
  font-weight: 700;
  line-height: 1.02;
  text-align: center;
  letter-spacing: 0.01em;
  font-size: clamp(1.4rem, 7vw, 3.4rem);
  text-transform: uppercase;
  word-break: break-word;
}

.line .hl,
.line .trail {
  color: var(--red);
}
.line .trail { margin-left: 0.25em; }
.line .hl { margin: 0 0.15em; }

/* Site title — small, minimal, top center */
.site-title {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.6);
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Submit link — bottom center, minimal text link */
.submit-link {
  position: fixed;
  left: 50%;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 28px);
  transform: translateX(-50%);
  z-index: 10;
  padding: 8px 6px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.submit-link:hover {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.submit-link:active { color: #fff; }

/* Footer — very small, bottom center */
.site-footer {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.35);
  font-family: system-ui, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

/* Swipe hint — animated, centered on the right edge */
.swipe-hint {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-family: system-ui, sans-serif;
  pointer-events: none;
  transition: opacity 0.6s ease;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.swipe-hint.gone { opacity: 0; }

.swipe-hint .chev {
  font-size: 1.4rem;
  line-height: 0.6;
  opacity: 0.9;
}
.swipe-hint .swipe-hand {
  font-size: 1.6rem;
  animation: swipe-bob 1.8s ease-in-out infinite;
}
.swipe-hint .swipe-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  margin: 2px 0;
  opacity: 0.8;
}
.swipe-hint .chev-up { animation: chev-up 1.8s ease-in-out infinite; }
.swipe-hint .chev-down { animation: chev-down 1.8s ease-in-out infinite; }

/* Hand bobs up and down to signal vertical swipe */
@keyframes swipe-bob {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}
@keyframes chev-up {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-4px); opacity: 1; }
}
@keyframes chev-down {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint .swipe-hand,
  .swipe-hint .chev-up,
  .swipe-hint .chev-down { animation: none; }
}

.error {
  color: #f4efe6;
  font-family: system-ui, sans-serif;
  text-align: center;
  padding: 2rem;
}