/*
 * TheVegasLab Roulette — touch.css
 * Touch-device-specific styles
 */

/* ═══════════════════════════════════════════════════════
   1. CHIP SIZE DIFFERENTIATION
═══════════════════════════════════════════════════════ */

.touch-device #chip-rack { overflow: visible !important; }
.touch-device #bottom-inner { overflow: visible !important; }
.touch-device #bottom-bar { overflow: visible !important; }

.touch-device .chip-btn.touch-chip-deselected {
  transform: scale(0.82) !important;
  opacity: 0.65;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.touch-device .chip-btn.touch-chip-selected {
  transform: scale(1.25) !important;
  opacity: 1;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
  z-index: 10;
  position: relative;
}

.touch-device .chip-btn.disabled.touch-chip-selected,
.touch-device .chip-btn.disabled.touch-chip-deselected {
  transform: scale(0.75) !important;
  opacity: 0.3;
}

.touch-device .chip-btn.touch-chip-selected .chip-ring { display: block; }

.touch-device .chip-btn:not(.disabled):hover { transform: none; }
.touch-device .chip-btn.touch-chip-selected:hover,
.touch-device .chip-btn.touch-chip-selected:not(.disabled):hover { transform: scale(1.25) !important; }
.touch-device .chip-btn.touch-chip-deselected:hover,
.touch-device .chip-btn.touch-chip-deselected:not(.disabled):hover { transform: scale(0.82) !important; }

@media (max-height: 520px) and (orientation: landscape) {
  .touch-device #chip-rack {
    overflow: visible !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   2. SWIPE FLASH
═══════════════════════════════════════════════════════ */

@keyframes swipeSpinFlash {
  0%   { box-shadow: inset 0 0 0 0 rgba(212, 168, 67, 0); }
  30%  { box-shadow: inset 0 0 60px 10px rgba(212, 168, 67, 0.15); }
  100% { box-shadow: inset 0 0 0 0 rgba(212, 168, 67, 0); }
}

#roulette-table.swipe-spin-flash {
  animation: swipeSpinFlash 0.35s ease-out;
}


/* ═══════════════════════════════════════════════════════
   3. ZONE TOOLTIP
═══════════════════════════════════════════════════════ */

#touch-zone-tooltip {
  position: fixed;
  top: clamp(10px, 2vh, 20px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: linear-gradient(135deg, #1e1e2a, #16162a);
  color: #e8c46a;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 500;
  letter-spacing: 1.2px;
  padding: clamp(8px, 1vh, 14px) clamp(16px, 2vw, 28px);
  border-radius: 12px;
  border: 1px solid rgba(212, 168, 67, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 10000;
  pointer-events: none;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#touch-zone-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════════════
   4. TOUCH-SPECIFIC OVERRIDES
═══════════════════════════════════════════════════════ */

.touch-device #rt-body-tip { display: none !important; }

.touch-device .bet-zone:active {
  filter: brightness(1.2);
  transition: filter 0.05s;
}

@media (max-height: 520px) and (orientation: landscape) {
  .touch-device .bet-zone { min-height: 16px; min-width: 16px; }
  .touch-device .rt-cell { min-width: clamp(28px, 2.5vw, 44px); min-height: clamp(28px, 2.5vw, 44px); }
}

/* ═══════════════════════════════════════════════════════
   5. MOBILE PERFORMANCE — disable heavy animations
═══════════════════════════════════════════════════════ */

.touch-device #roulette-table::after { animation: none !important; opacity: 0 !important; }