:root {
  --red: #E63946;
  --yellow: #FFD60A;
  --cyan: #00B4D8;
  --black: #1D1D1D;
  --white: #FAFAFA;
  --magenta: #FF006E;
  --panel-border: 4px solid var(--black);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  background-color: #F0E68C;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 12px 12px;
  min-height: 100vh;
  overflow-x: hidden;
}

.font-bangers { font-family: 'Bangers', cursive; }

/* Halftone pattern overlay */
.halftone-bg {
  background-image:
    radial-gradient(circle, rgba(0,180,216,0.15) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
}

.halftone-bg-magenta {
  background-image:
    radial-gradient(circle, rgba(255,0,110,0.1) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
}

/* Comic panel borders */
.comic-panel {
  border: var(--panel-border);
  box-shadow: 6px 6px 0 var(--black);
  background: var(--white);
  position: relative;
}

.comic-panel-left {
  transform: rotate(-0.5deg);
}
.comic-panel-right {
  transform: rotate(0.5deg);
}

/* Speech bubble */
.speech-bubble {
  position: relative;
  border: 3px solid var(--black);
  border-radius: 20px;
  background: white;
  box-shadow: 3px 3px 0 var(--black);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--black);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 32px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 13px solid white;
  z-index: 1;
}

/* Thought bubble */
.thought-bubble {
  position: relative;
  border: 3px solid var(--black);
  border-radius: 50%;
  background: white;
  box-shadow: 3px 3px 0 var(--black);
}

/* Action burst button */
.action-burst {
  position: relative;
  display: inline-block;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.action-burst:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

.action-burst:active {
  transform: scale(0.96);
}

/* Starburst shape */
.starburst {
  clip-path: polygon(
    50% 0%, 61% 11%, 75% 3%, 78% 19%, 95% 20%, 88% 35%,
    100% 47%, 88% 57%, 97% 72%, 82% 74%, 80% 92%, 65% 83%,
    53% 100%, 44% 85%, 28% 95%, 27% 78%, 8% 80%, 17% 64%,
    0% 50%, 15% 39%, 5% 24%, 22% 22%, 22% 5%, 37% 14%
  );
}

/* Toast animation */
@keyframes toastPop {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes toastOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8) translateY(-20px); opacity: 0; }
}

.toast-in { animation: toastPop 0.3s ease-out forwards; }
.toast-out { animation: toastOut 0.3s ease-in forwards; }

/* Panel entrance */
@keyframes slideInLeft {
  from { transform: translateX(-40px) rotate(-2deg); opacity: 0; }
  to { transform: translateX(0) rotate(-0.5deg); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(40px) rotate(2deg); opacity: 0; }
  to { transform: translateX(0) rotate(0.5deg); opacity: 1; }
}

.slide-left { animation: slideInLeft 0.5s ease-out forwards; }
.slide-right { animation: slideInRight 0.5s ease-out forwards; animation-delay: 0.15s; opacity: 0; }

/* Pulsing dots */
@keyframes pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.pulse-dot { animation: pulse 1.4s infinite ease-in-out; display: inline-block; }
.pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.pulse-dot:nth-child(3) { animation-delay: 0.4s; }

/* Combo toggle */
.combo-track {
  transition: background-color 0.3s ease;
}
.combo-knob {
  transition: transform 0.3s ease;
}

/* Header title effect */
.title-shadow {
  text-shadow:
    3px 3px 0 var(--black),
    -1px -1px 0 var(--black),
    1px -1px 0 var(--black),
    -1px 1px 0 var(--black),
    1px 1px 0 var(--black);
}

/* Scrollbar styling */
.meme-gallery::-webkit-scrollbar {
  height: 8px;
}
.meme-gallery::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}
.meme-gallery::-webkit-scrollbar-thumb {
  background: var(--black);
  border-radius: 4px;
}

/* Tweet card */
.tweet-card {
  border: 3px solid var(--black);
  border-radius: 16px;
  background: white;
  box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.2s ease;
}
.tweet-card:hover {
  transform: translateY(-2px);
}

/* Input styling */
.comic-input {
  border: 3px solid var(--black);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--black);
  font-family: 'Poppins', sans-serif;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.comic-input:focus {
  outline: none;
  box-shadow: 5px 5px 0 var(--cyan);
  transform: translate(-1px, -1px);
}

/* Tone chip */
.tone-chip {
  border: 2px solid var(--black);
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 2px 2px 0 var(--black);
  user-select: none;
}
.tone-chip:hover {
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--black);
}
.tone-chip.active {
  background: var(--yellow);
  transform: translateY(1px);
  box-shadow: 1px 1px 0 var(--black);
}

/* History drawer */
@keyframes drawerSlide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.drawer-enter { animation: drawerSlide 0.3s ease-out forwards; }

/* Image frame */
.meme-frame {
  border: 5px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  background: #ddd;
  position: relative;
  overflow: hidden;
}

.meme-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Responsive */
@media (max-width: 768px) {
  .comic-panel-left, .comic-panel-right {
    transform: rotate(0deg) !important;
  }
  .slide-left, .slide-right {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* History modal overlay */
.history-overlay {
  backdrop-filter: blur(4px);
}