/* === RESET & GLOBALS === */
:root{
  --bg:#0b0f14; --card:#fffaf1; --ink:#0a0f14;
  --neon:#00ffa5; --neon-dim: #00ffa588; --accent:#ffb400;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body { 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0b0f14; 
  color: #e8f7f0;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* === BACKGROUND LAYERS === */
#pixelomo-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
}

#sparkle-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* === MAGICAL CURSOR === */
.sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #FFD700 0%, #FF6B9D 50%, transparent 70%);
  border-radius: 50%;
  animation: sparkleFloat 1.5s ease-out forwards;
}

@keyframes sparkleFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.3);
  }
}

/* === TYPOGRAPHY === */
.neon {
  color: #7BFFB7;
  text-shadow: 
    0 0 5px #7BFFB7,
    0 0 10px #7BFFB7,
    0 0 15px #7BFFB7,
    0 0 20px #7BFFB7;
  animation: neonFlicker 2s infinite alternate;
}

@keyframes neonFlicker {
  0%, 100% { 
    text-shadow: 
      0 0 5px #7BFFB7,
      0 0 10px #7BFFB7,
      0 0 15px #7BFFB7,
      0 0 20px #7BFFB7;
  }
  50% { 
    text-shadow: 
      0 0 2px #7BFFB7,
      0 0 5px #7BFFB7,
      0 0 8px #7BFFB7,
      0 0 12px #7BFFB7;
  }
}

/* === HEADER === */
.site-header {
  text-align: center;
  padding: 2rem 1rem;
  position: relative;
  z-index: 10;
}

.title {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.title.neon{ 
  text-shadow:0 0 12px var(--neon), 0 0 28px var(--neon); 
}

.tagline {
  font-size: 1.1rem;
  color: #9FA9B5;
  margin-bottom: 1rem;
  font-style: italic;
}

/* === BUTTONS === */
.btn-print, .btn-ghost {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.btn-print{
  font-family:"Gloria Hallelujah",cursive; font-size:1.4rem;
  background: radial-gradient(80% 120% at 50% 20%, #22ffbf, #0be39e);
  color:#041810; border:4px solid #042a1b; border-radius:16px; padding:12px 26px;
  box-shadow:0 8px 0 #042a1b, 0 0 24px #00ffa566; cursor:pointer;
}

.btn-print:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 8px 25px rgba(255, 180, 0, 0.4),
    0 0 30px rgba(255, 107, 157, 0.3);
}

.btn-print:active{ 
  transform:translateY(3px); box-shadow:0 3px 0 #042a1b; 
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 
      0 4px 15px rgba(255, 180, 0, 0.3),
      0 0 20px rgba(255, 107, 157, 0.2);
  }
  50% {
    box-shadow: 
      0 4px 20px rgba(255, 180, 0, 0.5),
      0 0 30px rgba(255, 107, 157, 0.4);
  }
}

.btn-ghost {
  background: transparent;
  color: #7BFFB7;
  border: 2px solid #7BFFB7;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.btn-ghost:hover {
  background: #7BFFB7;
  color: #0A0A0A;
  box-shadow: 0 0 20px rgba(123, 255, 183, 0.3);
}

#fxToggle {
  position: absolute;
  top: 2rem;
  right: 2rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* === HERO SECTION === */
.hero{ 
  max-width:1100px; margin:0 auto; padding:16px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.hero.center-hero{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  background:none; box-shadow:none; border:none; 
}

#printerWrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#printerImage {
  width: 400px; /* scale to fit */
  height: auto;
  display: block;
  filter: drop-shadow(0 0 20px var(--neon)) drop-shadow(0 0 40px color-mix(in oklab, var(--neon), transparent 60%));
}

#billLayer {
  position: absolute;
  bottom: 60px; /* adjust until it matches the printer slot */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.flying-bill {
  position: absolute; 
  will-change: transform, opacity;
  filter: drop-shadow(0 0 12px var(--neon)) drop-shadow(0 0 26px color-mix(in oklab,var(--neon),transparent 40%));
}

#eject-layer{ 
  position:absolute; inset:0; pointer-events:none;
}

.neon-bill{
  position:absolute;
  font-family:"Gloria Hallelujah",cursive;
  color:#00ffa5; font-size:22px; font-weight:700;
  text-shadow:0 0 12px #00ffa5,0 0 24px #00ffa5;
  will-change: transform, opacity;
}

.cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.counter{ 
  color:#9ff2d0; font-weight:800; 
  font-size: 1.1rem;
}

#printCount {
  color: #7BFFB7;
  font-weight: 800;
  font-size: 1.3em;
}

.share {
  margin-top: 0.5rem;
}

/* === PANELS === */
.panel {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 20px;
  border: 1px solid rgba(123, 255, 183, 0.2);
  backdrop-filter: blur(10px);
}

.panel h2 {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Neon $100 doodle vibe */
.bill-preview{
  padding:18px; border-radius:16px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(0,255,165,.10), transparent 60%);
}
#billCanvas{
  width:min(1000px,92vw); height:auto; display:block; border-radius:14px;
  filter: drop-shadow(0 0 14px #00ffa5) drop-shadow(0 0 34px rgba(0,255,165,.45));
}

/* little corner labels for the canvas overlay (optional) */
.badge{
  position:absolute; inset:auto auto 14px 14px; padding:6px 10px;
  border:2px solid #00ffa5; border-radius:10px; color:#00ffa5;
  text-shadow:0 0 12px #00ffa5; font-weight:700;
}

.zoom-controls{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; flex-wrap:wrap;
}
#zoomRange{
  width:220px; accent-color:#00ffa5; height:6px; border-radius:999px;
  background:linear-gradient(90deg,#00ffa5 0%,rgba(0,255,165,.25) 100%);
}
.zoom-controls .btn-ghost{ padding:6px 10px; }
.zoom-controls #zoomLabel{ color:#9ff2d0; font-weight:700; letter-spacing:.2px; }

.contract-pill {
  margin: 24px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border: 2px solid #00ffa5;
  border-radius: 999px;
  background: rgba(0,255,165,0.05);
  color: #dbfff3;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  box-shadow: 0 0 12px rgba(0,255,165,0.35);
}

.contract-pill span {
  font-weight: 600;
  color: #00ffa5;
  letter-spacing: .5px;
}

.contract-pill code {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #dbfff3;
}

.contract-pill button {
  background: #00ffa5;
  color: #0b1216;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .2s ease;
}

.contract-pill button:hover {
  background: #12ffb0;
  box-shadow: 0 0 16px rgba(0,255,165,.6);
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.btn-pill {
  padding: 12px 22px;
  border: 2px solid #00ffa5;
  border-radius: 999px;
  font-weight: 600;
  color: #00ffa5;
  text-decoration: none;
  transition: all 0.25s ease;
  background: rgba(0,255,165,0.05);
  box-shadow: 0 0 10px rgba(0,255,165,0.25);
}

.btn-pill:hover {
  background: #00ffa5;
  color: #0b1216;
  box-shadow: 0 0 20px rgba(0,255,165,0.7);
}

/* === LEADERBOARD === */
#leaderboard {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#leaderboard li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border-left: 4px solid #7BFFB7;
}

#leaderboard .rank {
  font-weight: 800;
  color: #FFB400;
  min-width: 2rem;
}

#leaderboard .name {
  flex: 1;
  margin-left: 1rem;
  color: #FFFDF7;
}

#leaderboard .count {
  color: #7BFFB7;
  font-weight: 600;
}

/* === SPELLBOOK === */
.spellbook {
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem;
}

.spellbook h2 {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.book {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.page {
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.1) 0%, rgba(255, 107, 157, 0.1) 100%);
  border-radius: 16px;
  padding: 2rem;
  border: 2px solid rgba(255, 180, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.page::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 180, 0, 0.1) 0%, transparent 70%);
  animation: pageShimmer 4s infinite ease-in-out;
}

@keyframes pageShimmer {
  0%, 100% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(-50%) rotate(180deg); }
}

.page h3 {
  font-family: 'Gloria Hallelujah', cursive;
  color: #FFB400;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.page p {
  color: #FFFDF7;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

/* === BILL GENERATOR === */
.bill-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.input {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 2px solid rgba(123, 255, 183, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #FFFDF7;
  font-size: 1rem;
  min-width: 200px;
}

.input:focus {
  outline: none;
  border-color: #7BFFB7;
  box-shadow: 0 0 10px rgba(123, 255, 183, 0.3);
}

.input::placeholder {
  color: #9FA9B5;
}

#billCanvas {
  max-width: 100%;
  border-radius: 12px;
  border: 2px solid rgba(123, 255, 183, 0.3);
  margin: 1rem auto;
  display: block;
}

/* === EJECTED BILL ANIMATION === */
.ejected-bill{
  position:absolute; border:4px solid #042a1b; border-radius:10px; background:#fff;
  filter: drop-shadow(0 10px 0 #0007) drop-shadow(0 0 18px #00ffa566);
  pointer-events: none;
  z-index: 10;
}

@keyframes ejectBill {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  70% {
    transform: translateY(-100px) rotate(15deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-150px) rotate(25deg);
    opacity: 0;
  }
}

/* === FOOTER === */
.site-footer {
  text-align: center;
  padding: 2rem;
  margin-top: 4rem;
  color: #9FA9B5;
  border-top: 1px solid rgba(123, 255, 183, 0.2);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .hero {
    padding: 1rem;
  }
  
  .panel {
    margin: 2rem 1rem;
    padding: 1.5rem;
  }
  
  .spellbook {
    margin: 2rem 1rem;
    padding: 1.5rem;
  }
  
  .book {
    grid-template-columns: 1fr;
  }
  
  .bill-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .input {
    min-width: auto;
  }
  
  #fxToggle {
    position: static;
    margin-top: 1rem;
  }
  
  .site-header {
    padding: 1rem;
  }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .sparkle {
    display: none;
  }
  
  #pixelomo-bg {
    display: none;
  }
}

/* === PRINT STYLES === */
@media print {
  #pixelomo-bg,
  #sparkle-layer,
  .sparkle {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .neon {
    color: #00AA55 !important;
    text-shadow: none !important;
  }
}