@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    overscroll-behavior: none;
  }
}

/* ==================== THEMATIC SCROLLBAR (SUBTLE / REDUCED OPACITY) ==================== */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(204, 255, 0, 0.3) rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(204, 255, 0, 0.3);
  border: 2px solid #0b0b0e;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(204, 255, 0, 0.55);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Utility: keep horizontal strips free of scrollbars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Dropdown Open State */
.dropdown-open {
  display: block !important;
}

/* Pure Black Background */
.dark-asphalt-bg {
  background-color: #000000 !important;
  background-image: none !important;
}

/* ==================== HYPER-REALISTIC SCOTCH TAPE ==================== */
/* Serrated dispenser cut ends (horizontal & vertical cuts), glossy sheen, slight yellow frosted tint & wrinkle bubbles */
.real-scotch-tape {
  position: absolute;
  pointer-events: none;
  z-index: 35;
  background: linear-gradient(105deg,
      rgba(255, 248, 220, 0.42) 0%,
      rgba(255, 255, 255, 0.68) 22%,
      rgba(250, 240, 210, 0.35) 45%,
      rgba(255, 255, 255, 0.6) 72%,
      rgba(255, 245, 200, 0.42) 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.38),
    0 1px 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  /* Jagged dispenser teeth on left and right edges */
  clip-path: polygon(0% 0%, 2% 20%, 0% 40%, 2% 60%, 0% 80%, 2% 100%,
      98% 100%, 100% 80%, 98% 60%, 100% 40%, 98% 20%, 100% 0%);
}

/* Scotch tape micro-wrinkle and air bubble pseudo-elements */
.real-scotch-tape::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.45) 32%, transparent 34%, transparent 68%, rgba(255, 255, 255, 0.4) 70%, transparent 72%);
  pointer-events: none;
}

.real-scotch-tape::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 45%;
  width: 6px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Preset tape sizes */
.tape-standard {
  width: 84px;
  height: 26px;
}

.tape-wide {
  width: 110px;
  height: 28px;
}

.tape-small {
  width: 62px;
  height: 22px;
}

.tape-vertical {
  clip-path: polygon(0% 0%, 20% 2%, 40% 0%, 60% 2%, 80% 0%, 100% 2%,
      100% 98%, 80% 100%, 60% 98%, 40% 100%, 20% 98%, 0% 100%);
}

/* ==================== AUTHENTIC PHYSICAL NEWSPAPER CUTOUTS ==================== */
.newsprint-clipping {
  background-color: #f4eedb;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.7),
    0 3px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(160, 140, 100, 0.25);
  border: 1px solid rgba(180, 165, 130, 0.7);
  color: #1a1916;
  position: relative;
  user-select: none;
}

/* Torn, ragged fibrous edge styling */
.torn-edge {
  clip-path: polygon(0% 0.5%, 3% 0%, 7% 0.8%, 12% 0.1%, 18% 0.9%, 24% 0.2%, 31% 0.7%, 38% 0%, 45% 0.8%, 52% 0.1%, 59% 0.7%, 66% 0.2%, 73% 0.9%, 80% 0.1%, 87% 0.8%, 94% 0.2%, 100% 0.7%,
      99.3% 8%, 100% 17%, 99.1% 25%, 99.8% 34%, 99.2% 43%, 100% 53%, 99.1% 62%, 99.7% 71%, 99.2% 82%, 100% 91%, 99.4% 100%,
      95% 99.2%, 89% 100%, 82% 99.3%, 75% 99.9%, 68% 99.1%, 60% 99.8%, 52% 99.2%, 44% 100%, 36% 99.3%, 28% 99.8%, 20% 99.1%, 13% 99.9%, 6% 99.2%, 0% 100%,
      0.8% 91%, 0% 81%, 0.7% 72%, 0.1% 61%, 0.9% 51%, 0.2% 41%, 0.8% 31%, 0.1% 21%, 0.7% 11%, 0% 0.5%);
}

.newsprint-aging {
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(215, 195, 150, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(180, 150, 100, 0.25) 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 3px);
}

.paper-shadow {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.card-shadow {
  box-shadow: 6px 7px 0px #000;
}

/* Column formatting for newspaper broadsheet */
.zine-columns {
  column-count: 1;
}

@media (min-width: 768px) {
  .zine-columns {
    column-count: 2;
    column-gap: 2.25rem;
  }
}

/* ==================== DOODLE LAYOUT EDITOR STYLES ==================== */
body.editing-doodles-mode #bg-doodles-container {
  pointer-events: auto !important;
  z-index: 45 !important;
}

body.editing-doodles-mode .bg-doodle {
  pointer-events: all !important;
  cursor: grab !important;
  transition: filter 0.15s ease;
}

body.editing-doodles-mode .bg-doodle:hover {
  filter: drop-shadow(0 0 6px #ccff00) drop-shadow(0 0 12px rgba(204, 255, 0, 0.7)) !important;
}

body.editing-doodles-mode .bg-doodle.is-dragging {
  cursor: grabbing !important;
  filter: drop-shadow(0 0 10px #ffbe1a) drop-shadow(0 0 20px #ffbe1a) !important;
}

body.editing-doodles-mode .bg-doodle.is-selected {
  filter: drop-shadow(0 0 8px #ccff00) drop-shadow(0 0 18px #ccff00) !important;
}

#doodle-selection-box {
  stroke: #ccff00;
  stroke-width: 2;
  stroke-dasharray: 6 4;
  fill: rgba(204, 255, 0, 0.06);
  pointer-events: none;
}

#doodle-top-banner {
  display: none;
}

body.editing-doodles-mode #doodle-top-banner {
  display: flex;
}

/* ==================== AUTH POPUP & DROPDOWN STYLES ==================== */
@keyframes authFadeIn {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.auth-modal-content {
  animation: authFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-dropdown-animate {
  animation: dropdownFade 0.15s ease-out forwards;
}