html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  -webkit-overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (min-width: 1024px) {
  html, body {
    overflow: hidden;
  }
  main {
    height: 100vh;
    overflow: hidden;
  }
}

#gridCanvas {
  display: block;
  max-width: 100%;
  aspect-ratio: 1/1; 
  width: auto;
  height: auto;
  touch-action: pan-x pan-y; 
  background-image: url('assets/grid.png'); 
  background-size: 100% 100%; 
  background-color: #333; 
}

canvas {
  border: 2px solid #333;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  cursor: crosshair;
  display: block;
  margin: 0;
  -webkit-transform: translateZ(0); 
  transform: translateZ(0);
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
}

button:disabled {
    cursor: not-allowed;
}
  
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
  
#newsTicker {
    background-color: #A8FFDA;
    color: #1E3A8A;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.25rem 1rem;
}
  
#tickerContent {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: tickerScroll 60s linear infinite;
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a8a;
}

#purchaseModal > div {
  max-height: 90vh;
  overflow-y: auto;
}
  
@keyframes tickerScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes eb-heartbeat { 
  0% { transform: scale(1); } 
  10% { transform: scale(1.12); } 
  20% { transform: scale(0.98); } 
  30% { transform: scale(1.15); } 
  40% { transform: scale(1.02); } 
  100% { transform: scale(1); } 
}
.heartbeat-cta {
  animation: eb-heartbeat 900ms ease-in-out infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.animate-shine {
  animation: shine 2s ease-in-out infinite;
}

/* Logo Slayt Stilleri */
.logo-slide.active {
  display: block;
  animation: fadeInOut 2.5s ease-in-out forwards; 
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: scale(0.9); }
    15% { opacity: 1; transform: scale(1); }
    85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); }
}