/* Pay2Play! — Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0d0d1a; font-family: 'IBM Plex Mono', monospace; }

/* Animations */
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }
@keyframes spin { from { transform:rotate(0) } to { transform:rotate(360deg) } }
@keyframes marquee { 0% { transform:translateX(100%) } 100% { transform:translateX(-100%) } }
@keyframes modalIn { from { opacity:0; transform:scale(0.9) } to { opacity:1; transform:scale(1) } }
@keyframes balFlash { 0% { color:#00ee44 } 20% { color:#e74c3c } 50% { color:#ff6b6b } 100% { color:#00ee44 } }
@keyframes countPulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.1) } }
@keyframes successPop { 0% { transform:scale(0.5);opacity:0 } 50% { transform:scale(1.2) } 100% { transform:scale(1);opacity:1 } }

/* Range input — larger thumb for touch targets */
input[type=range] { -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; outline:none; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
  background:#00ee44; cursor:pointer; box-shadow:0 0 8px rgba(0,238,68,0.3);
}

/* Interactive states for all buttons */
button { transition: opacity 0.15s ease, transform 0.1s ease; }
button:hover { opacity: 0.85 !important; }
button:active { transform: scale(0.96) !important; }
:focus-visible { outline: 2px solid #00ee44; outline-offset: 2px; }

/* Queue item hover */
.q-item { transition: background 0.15s ease; }
.q-item:hover { background: rgba(255,255,255,0.04) !important; }