:root,
[data-theme="yellow"] {
  --bg-main: #F4F0EA;
  --card-bg: #FFFFFF;
  --header-bg: #FFE600;
  --header-text: #000000;
  --text-main: #000000;
  --text-muted: #4B5563;
  --input-bg: #FFFFFF;
  --item-unpaid-bg: #FFFFFF;
  --item-paid-bg: #D9F99D;
  --filter-bg: #F3F4F6;
}

[data-theme="dark"] {
  --bg-main: #0F172A;
  --card-bg: #1E293B;
  --header-bg: #FFE600;
  --header-text: #000000;
  --text-main: #FFFFFF;
  --text-muted: #CBD5E1;
  --input-bg: #0F172A;
  --item-unpaid-bg: #334155;
  --item-paid-bg: #15803D;
  --filter-bg: #0F172A;
}

[data-theme="y2k"] {
  --bg-main: #FAF5FF;
  --card-bg: #FFFFFF;
  --header-bg: #F472B6;
  --header-text: #000000;
  --text-main: #2E1065;
  --text-muted: #6B21A8;
  --input-bg: #FFFFFF;
  --item-unpaid-bg: #F3E8FF;
  --item-paid-bg: #A7F3D0;
  --filter-bg: #F3E8FF;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.theme-card {
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
}

.theme-input {
  background-color: var(--input-bg) !important;
  color: var(--text-main) !important;
}

.theme-muted {
  color: var(--text-muted) !important;
}

.theme-filter-box {
  background-color: var(--filter-bg) !important;
  color: var(--text-main) !important;
}

/* Neo-Brutalism Utilities */
.neo-box {
  border: 3.5px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.neo-box-sm {
  border: 2.5px solid #000000;
  box-shadow: 3px 3px 0px #000000;
}

.neo-btn {
  border: 3px solid #000000;
  box-shadow: 3.5px 3.5px 0px #000000;
  font-weight: 800;
  transition: all 0.15s ease;
  user-select: none;
}

.neo-btn:hover:not(:disabled) {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 5px 5px 0px #000000;
}

.neo-btn:active:not(:disabled) {
  transform: translate(1.5px, 1.5px);
  box-shadow: 1.5px 1.5px 0px #000000;
}

.neo-input {
  border: 2.5px solid #000000;
  box-shadow: 2.5px 2.5px 0px #000000;
}

.neo-input:focus {
  outline: none;
  box-shadow: 4px 4px 0px #000000;
  border-color: #000000;
}

/* Animation effects */
.slot-spin {
  animation: slotShake 0.08s infinite linear;
}

@keyframes slotShake {
  0% {
    transform: translateY(-2px) rotate(-1deg);
  }

  50% {
    transform: translateY(2px) rotate(1deg);
  }

  100% {
    transform: translateY(-2px) rotate(-1deg);
  }
}

.vs-bounce {
  animation: vsPulse 0.4s infinite alternate ease-in-out;
}

@keyframes vsPulse {
  0% {
    transform: scale(0.95) rotate(-3deg);
  }

  100% {
    transform: scale(1.1) rotate(3deg);
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-left: 1.5px solid #000;
}

::-webkit-scrollbar-thumb {
  background: #FFE600;
  border: 1.5px solid #000;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #FF007A;
}

/* Hide scrollbar utility */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Score Input utility */
.score-input {
  border: 2px solid #000000;
  border-radius: 6px;
  width: 34px;
  height: 24px;
  text-align: center;
  font-weight: 900;
  font-size: 11px;
  background-color: #ffffff;
  color: #000000;
}
.score-input:focus {
  outline: none;
  border-color: #A855F7;
  box-shadow: 2px 2px 0px #000000;
}

/* ==========================================================================
   Comprehensive Device Responsiveness (PC, Laptop, iPad, Tablet, Mobile)
   ========================================================================== */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow-x: hidden;
  touch-action: manipulation;
}

/* Responsive Touch Scrolling */
.smooth-touch-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Board Grid Scaling for Smartphones & Small Devices (< 640px) */
@media (max-width: 640px) {
  #snakesBoardGrid {
    gap: 2px !important;
    padding: 4px !important;
  }

  .neo-box {
    border-width: 2.5px !important;
    box-shadow: 3px 3px 0px #000000 !important;
  }

  .neo-box-sm {
    border-width: 2px !important;
    box-shadow: 2px 2px 0px #000000 !important;
  }

  .neo-btn {
    border-width: 2px !important;
    box-shadow: 2.5px 2.5px 0px #000000 !important;
  }

  .neo-input {
    border-width: 2px !important;
    box-shadow: 2px 2px 0px #000000 !important;
  }
}

/* Ultra Small Screens (< 380px: iPhone SE, Galaxy Fold) */
@media (max-width: 380px) {
  .text-xs {
    font-size: 0.65rem !important;
  }
  .px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* iPad & Tablet Landscape / Portrait Adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .neo-box {
    box-shadow: 3.5px 3.5px 0px #000000;
  }
}