@font-face {
  font-family: 'Press Start 2P';
  src: url('/assets/fonts/PressStart2P.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --lime: #b9ff00;
  --pink: #ff2d78;
  --yellow: #ffe000;
  --bg-dark: #0a0a0f;
  --bg-card: #0d0d14;
  --border: #1e1e2e;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg-dark); color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; }

.font-pixel { font-family: 'Press Start 2P', 'Courier New', monospace !important; }

/* ── Header ── */
#site-header { background: transparent; transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s; }
#site-header.scrolled { background: rgba(10,10,15,0.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(30,30,46,0.6); }

/* ── Pixel grid ── */
.pixel-grid-bg {
  background-image: linear-gradient(rgba(185,255,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(185,255,0,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--lime); color: #000;
  font-family: 'Press Start 2P', monospace; font-size: 0.55rem;
  padding: 0.75rem 1.5rem;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  text-decoration: none; cursor: pointer; border: none;
  transition: background 0.2s, transform 0.1s;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.btn-primary:hover { background: #d4ff33; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: transparent; color: var(--lime);
  font-family: 'Press Start 2P', monospace; font-size: 0.55rem;
  padding: 0.75rem 1.5rem; border: 1px solid var(--lime);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  text-decoration: none; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.btn-secondary:hover { background: var(--lime); color: #000; transform: translateY(-1px); }

/* ── Card / Input / Tags ── */
.card-dark { background: var(--bg-card); border: 1px solid var(--border); }
.input-pixel { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: #fff; padding: 0.625rem 0.875rem; font-size: 0.875rem; outline: none; transition: border-color 0.2s; }
.input-pixel:focus { border-color: var(--lime); }
.input-pixel::placeholder { color: rgba(255,255,255,0.2); }
.pixel-tag { display: inline-block; background: rgba(185,255,0,0.1); color: var(--lime); border: 1px solid rgba(185,255,0,0.3); font-family: 'Press Start 2P', monospace; font-size: 0.45rem; padding: 0.25rem 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Glow ── */
.text-glow-green { text-shadow: 0 0 20px rgba(185,255,0,0.5), 0 0 40px rgba(185,255,0,0.3); }
.text-glow-pink  { text-shadow: 0 0 20px rgba(255,45,120,0.5); }

/* ════════════════════════════════════════
   TRASH CAN HERO ANIMATIONS
   ════════════════════════════════════════ */

/* Float up/down */
@keyframes trash-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25%       { transform: translateY(-18px) rotate(-1.5deg); }
  75%       { transform: translateY(-10px) rotate(1.5deg); }
}

/* Lid bounce — applied to the whole image for a secondary wobble */
@keyframes trash-wobble {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  20%       { transform: skewX(-1.5deg) scaleY(1.01); }
  40%       { transform: skewX(1.5deg) scaleY(0.99); }
  60%       { transform: skewX(-0.8deg) scaleY(1.005); }
  80%       { transform: skewX(0.5deg) scaleY(1); }
}

/* Pulsing outer glow ring */
@keyframes glow-ring {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.08); }
}

/* Inner shimmer */
@keyframes glow-inner {
  0%, 100% { opacity: 0.12; transform: scale(0.95); }
  50%       { opacity: 0.28; transform: scale(1); }
}

/* Spinning scanline sweep */
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  92%  { opacity: 1; }
  93%  { opacity: 0.82; }
  94%  { opacity: 1; }
  97%  { opacity: 0.9; }
  98%  { opacity: 1; }
}

/* Particle sparkle */
@keyframes spark-1 { 0%,100%{transform:translate(0,0) scale(1);opacity:0} 20%{opacity:1} 60%{transform:translate(30px,-50px) scale(0.5);opacity:0.7} }
@keyframes spark-2 { 0%,100%{transform:translate(0,0) scale(1);opacity:0} 20%{opacity:1} 60%{transform:translate(-40px,-35px) scale(0.4);opacity:0.6} }
@keyframes spark-3 { 0%,100%{transform:translate(0,0) scale(1);opacity:0} 20%{opacity:1} 60%{transform:translate(20px,40px) scale(0.6);opacity:0.8} }
@keyframes spark-4 { 0%,100%{transform:translate(0,0) scale(1);opacity:0} 25%{opacity:1} 70%{transform:translate(-25px,30px) scale(0.3);opacity:0.5} }
@keyframes spark-5 { 0%,100%{transform:translate(0,0) scale(1);opacity:0} 15%{opacity:1} 55%{transform:translate(50px,10px) scale(0.5);opacity:0.6} }
@keyframes spark-6 { 0%,100%{transform:translate(0,0) scale(1);opacity:0} 30%{opacity:1} 65%{transform:translate(-15px,-55px) scale(0.4);opacity:0.7} }

/* Coin sparkle rotate */
@keyframes coin-spin { 0%{transform:rotateY(0deg) translateY(0)} 50%{transform:rotateY(180deg) translateY(-8px)} 100%{transform:rotateY(360deg) translateY(0)} }

/* Hero trash can wrapper */
.hero-trash-scene {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-trash-scene .glow-outer {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,255,0,0.18) 0%, rgba(185,255,0,0.05) 50%, transparent 70%);
  animation: glow-ring 2.5s ease-in-out infinite;
  pointer-events: none;
}

.hero-trash-scene .glow-inner {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,255,0,0.25) 0%, transparent 70%);
  animation: glow-inner 2s ease-in-out infinite 0.5s;
  pointer-events: none;
}

.hero-trash-scene .trash-img {
  position: relative;
  z-index: 2;
  animation: trash-float 4s ease-in-out infinite, crt-flicker 7s infinite;
  filter: drop-shadow(0 0 20px rgba(185,255,0,0.3)) drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

.hero-trash-scene .trash-img:hover {
  animation: trash-float 4s ease-in-out infinite, trash-wobble 0.6s ease-in-out, crt-flicker 7s infinite;
  filter: drop-shadow(0 0 35px rgba(185,255,0,0.5)) drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

/* Pixel particles */
.spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 1px;
  z-index: 3;
  pointer-events: none;
}
.spark-1 { background:#b9ff00; top:20%; left:10%; animation: spark-1 3.2s ease-in-out infinite 0s; }
.spark-2 { background:#ff2d78; top:60%; left:5%;  animation: spark-2 2.8s ease-in-out infinite 0.4s; }
.spark-3 { background:#ffe000; top:75%; left:80%; animation: spark-3 3.5s ease-in-out infinite 0.8s; }
.spark-4 { background:#b9ff00; top:15%; left:85%; animation: spark-4 2.6s ease-in-out infinite 1.2s; }
.spark-5 { background:#ff2d78; top:50%; left:90%; animation: spark-5 3.8s ease-in-out infinite 0.2s; }
.spark-6 { background:#ffe000; top:85%; left:30%; animation: spark-6 3.0s ease-in-out infinite 1.6s; }

/* ── Legacy animation classes ── */
@keyframes pixel-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes neon-pulse  { 0%,100%{box-shadow:0 0 5px rgba(185,255,0,0.3),0 0 10px rgba(185,255,0,0.2)} 50%{box-shadow:0 0 15px rgba(185,255,0,0.6),0 0 30px rgba(185,255,0,0.4)} }
@keyframes shine       { 0%{left:-100%} 100%{left:200%} }
@keyframes spin        { to{transform:rotate(360deg)} }

.animate-pixel-float  { animation: pixel-float 3s ease-in-out infinite; }
.animate-crt-flicker  { animation: crt-flicker 8s infinite; }
.animate-neon-pulse   { animation: neon-pulse 2s ease-in-out infinite; }
.animate-spin         { animation: spin 1s linear infinite; }

/* ── Misc components ── */
.upload-zone { border: 2px dashed var(--border); padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--lime); background: rgba(185,255,0,0.03); }
.payment-option { border: 1px solid var(--border); padding: 1rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.payment-option:hover    { border-color: rgba(185,255,0,0.4); }
.payment-option.selected { border-color: var(--lime); background: rgba(185,255,0,0.05); }
.payment-option.disabled { opacity: 0.4; cursor: not-allowed; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { font-family: 'Press Start 2P',monospace; font-size:0.4rem; color:rgba(255,255,255,0.3); text-transform:uppercase; padding:0.75rem 1rem; text-align:left; border-bottom:1px solid var(--border); }
.admin-table td { padding:0.875rem 1rem; border-bottom:1px solid rgba(30,30,46,0.5); color:rgba(255,255,255,0.7); font-size:0.8rem; }
.admin-table tr:hover td { background:rgba(255,255,255,0.02); }
.spinner { display:inline-block; width:1rem; height:1rem; border:2px solid rgba(255,255,255,0.2); border-top-color:var(--lime); border-radius:50%; animation:spin 0.7s linear infinite; }
.block-tooltip { position:absolute; background:rgba(13,13,20,0.95); border:1px solid var(--border); padding:0.5rem 0.75rem; font-size:0.7rem; pointer-events:none; z-index:100; min-width:120px; }
.prose-invert a  { color:var(--lime); }
.prose-invert ul { list-style:disc; padding-left:1.5rem; }
.prose-invert li { margin-bottom:0.5rem; }