/* ==========================================================================
   QuadFuse — Cyber Synth Arcade Stylesheet
   Design system: Cyber Synth Arcade (OBSIDIAN #0F131D / NEON CYAN #00F5FF)
   ========================================================================== */

@layer base {
  html, body {
    margin: 0;
    padding: 0;
    background-color: #0f131d;
    color: #dfe2f1;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  body {
    overscroll-behavior: none;
  }
}

::-webkit-scrollbar {
  display: none;
}
* {
  scrollbar-width: none;
}

/* Background Cyber Grid */
.cyber-grid {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(0, 245, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 245, 255, 0.04) 1px, transparent 1px);
}

/* Ambient Radial Glows */
.neon-glow-primary {
  box-shadow: 0 0 25px -4px rgba(0, 245, 255, 0.45);
}

.neon-glow-secondary {
  box-shadow: 0 0 25px -4px rgba(208, 188, 255, 0.4);
}

/* 2048 Legendary Pulsing Glow */
.tile-glow-2048 {
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.6);
  animation: pulse-glow-2048 2s infinite alternate ease-in-out;
}

@keyframes pulse-glow-2048 {
  0% { 
    box-shadow: 0 0 25px rgba(0, 245, 255, 0.7), 0 0 45px rgba(208, 188, 255, 0.4); 
  }
  100% { 
    box-shadow: 0 0 42px rgba(255, 215, 0, 0.85), 0 0 65px rgba(0, 245, 255, 0.7); 
  }
}

/* Beyond 2048 Cosmic Glow */
.tile-glow-beyond {
  animation: pulse-glow-beyond 2.5s infinite alternate ease-in-out;
}

@keyframes pulse-glow-beyond {
  0% { 
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.8), 0 0 55px rgba(236, 72, 153, 0.5); 
  }
  100% { 
    box-shadow: 0 0 50px rgba(139, 92, 246, 0.9), 0 0 75px rgba(0, 245, 255, 0.8); 
  }
}

/* ==========================================================================
   Board & Tile Coordinate Positioning Matrix
   Strict 4x4 matrix with responsive gap spacing (8px mobile / 12px desktop)
   ========================================================================== */

#board-container {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#tile-layer {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  right: 0.625rem;
  bottom: 0.625rem;
  --board-gap: 8px;
  pointer-events: none;
}

@media (min-width: 640px) {
  #tile-layer {
    top: 0.875rem;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 0.875rem;
    --board-gap: 12px;
  }
}

/* Positioning classes */
.tile-item {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100% - 3 * var(--board-gap)) / 4);
  height: calc((100% - 3 * var(--board-gap)) / 4);
  transition: transform 125ms cubic-bezier(0.2, 0.85, 0.25, 1);
  will-change: transform;
  pointer-events: none;
}

/* Coordinate definitions */
.pos-r-0 { --pos-y: 0px; }
.pos-r-1 { --pos-y: calc(100% + var(--board-gap)); }
.pos-r-2 { --pos-y: calc(2 * (100% + var(--board-gap))); }
.pos-r-3 { --pos-y: calc(3 * (100% + var(--board-gap))); }

.pos-c-0 { --pos-x: 0px; }
.pos-c-1 { --pos-x: calc(100% + var(--board-gap)); }
.pos-c-2 { --pos-x: calc(2 * (100% + var(--board-gap))); }
.pos-c-3 { --pos-x: calc(3 * (100% + var(--board-gap))); }

.tile-item {
  transform: translate3d(var(--pos-x, 0px), var(--pos-y, 0px), 0);
}

/* Inner Tile Animations (scale pop / appear) */
.tile-inner {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem; /* rounded-xl */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  user-select: none;
  transition: transform 120ms ease;
}

/* Spawn / Appear Animation */
.tile-spawn .tile-inner {
  animation: tile-spawn-anim 180ms cubic-bezier(0.18, 0.89, 0.32, 1.28) backwards;
}

@keyframes tile-spawn-anim {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pop / Merge Animation */
.tile-merged .tile-inner {
  animation: tile-pop-anim 220ms cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
}

@keyframes tile-pop-anim {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.18);
    filter: brightness(1.35);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Score Floater Animation */
@keyframes floater-rise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-8px);
  }
  80% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

.animate-floater {
  animation: floater-rise 700ms ease-out forwards;
}

/* Modal and Backdrop Transitions */
.modal-backdrop {
  transition: opacity 250ms ease, visibility 250ms ease;
}

.modal-backdrop.hidden-modal {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.modal-backdrop.visible-modal {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.modal-card {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease;
}

.modal-backdrop.hidden-modal .modal-card {
  transform: scale(0.94);
  opacity: 0;
}

.modal-backdrop.visible-modal .modal-card {
  transform: scale(1);
  opacity: 1;
}

/* Direction Button Ripple / Press Effect */
.dir-btn:active {
  transform: translateY(2px);
}

/* Tabular Monospace Data Format */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}