/*
 * Craps Royale — touch.css
 * Phase 1: Touch-device-specific styles + universal tooltip styles
 */

/* ═══════════════════════════════════════════════════════════
   1. CHIP SIZE DIFFERENTIATION
   
   The chip rack lives inside a deep overflow:hidden chain:
     #right-column (overflow:hidden) → #bottom-bar → #bottom-inner → #chip-rack
   
   To let the selected chip visually "pop above" without breaking
   the layout, we override overflow to visible on the entire chain
   for touch devices and add clip-path or containment only where
   truly needed.
═══════════════════════════════════════════════════════════ */

/* ── Allow chips to overflow the rack and its containers ── */
.touch-device #chip-rack {
  overflow: visible !important;
}

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

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

/* Deselected: shrink and dim */
.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;
}

/* Selected: enlarge with bounce, float above siblings */
.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;
}

/* Disabled chips stay small */
.touch-device .chip-btn.disabled.touch-chip-selected,
.touch-device .chip-btn.disabled.touch-chip-deselected {
  transform: scale(0.75) !important;
  opacity: 0.3;
}

/* Ring visible on selected */
.touch-device .chip-btn.touch-chip-selected .chip-ring {
  display: block;
}

/* ── Suppress sticky :hover transforms on touch ──
   On touch, :hover persists after tap. Override with !important. */
.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;
}

/* ── Mobile landscape: chip rack is a vertical column ── */
@media (max-height: 520px) and (orientation: landscape) {
  /* The chip rack column needs visible overflow too */
  .touch-device #chip-rack {
    overflow: visible !important;
    /* Add a bit of horizontal padding so the scaled chip doesn't
       get cut by the adjacent table or controls column */
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   2. SWIPE-TO-ROLL VISUAL FEEDBACK
═══════════════════════════════════════════════════════════ */

@keyframes swipeRollFlash {
  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); }
}

#craps-table.swipe-roll-flash {
  animation: swipeRollFlash 0.35s ease-out;
}


/* ═══════════════════════════════════════════════════════════
   3. ZONE TOOLTIP (universal — works on touch + desktop)
   Shows bet zone info on long-press (touch) or right-click (desktop).
═══════════════════════════════════════════════════════════ */

#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),
    0 0 0 1px rgba(212, 168, 67, 0.08),
    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);
}

#touch-zone-tooltip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.4), transparent);
}


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

/* Hide hover tooltips on touch — they flicker unpredictably */
.touch-device #vt-body-tip,
.touch-device #vt-chip-tip {
  display: none !important;
}

/* Larger tap targets for small zones on phone landscape */
@media (max-height: 520px) and (orientation: landscape) {
  .touch-device .bet-zone {
    min-height: 18px;
    min-width: 18px;
  }
  .touch-device .vt-hw,
  .touch-device .vt-hop,
  .touch-device .vt-horn-cell {
    min-height: 22px;
  }
}

/* Active-state feedback on bet zones (replaces hover) */
.touch-device .bet-zone:active {
  filter: brightness(1.2);
  transition: filter 0.05s;
}


/* ═══════════════════════════════════════════════════════════
   5. DRAG-TO-REMOVE (Phase 2)
   Visual states for the drag-to-remove gesture.
═══════════════════════════════════════════════════════════ */

/* Zone being actively dragged from — dim the chips */
.drag-zone-active .bet-chip {
  opacity: 0.35 !important;
  transition: opacity 0.15s ease;
}

/* Zone turns red-ish when finger is outside (about to remove) */
.drag-zone-removing {
  box-shadow: inset 0 0 12px 2px rgba(248, 113, 113, 0.3) !important;
  transition: box-shadow 0.1s ease;
}

/* Ghost chip color shift when outside zone (removal pending) */
.drag-ghost-chip.drag-chip-outside {
  box-shadow: 0 8px 30px rgba(248, 113, 113, 0.5),
              0 0 25px rgba(248, 113, 113, 0.3) !important;
  filter: hue-rotate(-20deg) brightness(0.9);
}

/* Ghost chip inner elements: hide overlay artifacts */
.drag-ghost-chip img {
  opacity: 0.5;
  pointer-events: none;
}
.drag-ghost-chip span {
  font-family: 'Oswald', sans-serif;
  font-size: 11px !important;
  font-weight: 700;
  pointer-events: none;
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}


/* ═══════════════════════════════════════════════════════════
   5b. DRAG-TO-PLACE (Phase 3)
   Visual states for the drag-to-place gesture from chip rack.
═══════════════════════════════════════════════════════════ */

/* Ghost chip floating under finger */
.drag-place-ghost {
  border-radius: 50%;
  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.65),
    0 0 25px rgba(212, 168, 67, 0.35);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  will-change: transform, left, top;
}

.drag-place-ghost .chip-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.drag-place-ghost .chip-label {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.drag-place-ghost .chip-label.chip-label-sm {
  font-size: 10px;
}

/* Ghost turns red-ish when over a disallowed zone */
.drag-place-ghost.drag-place-invalid {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5))
          hue-rotate(-30deg) brightness(0.7);
}

/* Bet zone highlight when ghost hovers over it */
.drag-place-hover {
  box-shadow:
    inset 0 0 16px 3px rgba(212, 168, 67, 0.35),
    0 0 8px rgba(212, 168, 67, 0.2) !important;
  transition: box-shadow 0.1s ease !important;
}

/* Pulsing border on hover target */
@keyframes dragPlacePulse {
  0%, 100% { border-color: rgba(212, 168, 67, 0.45); }
  50%      { border-color: rgba(212, 168, 67, 0.8); }
}

.drag-place-hover {
  animation: dragPlacePulse 0.8s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════
   6. PINCH-TO-ZOOM (Phase 2)
   Smooth transitions and zoom indicator styling.
═══════════════════════════════════════════════════════════ */

/* During pinch, ensure the scaler doesn't fight with CSS transitions */
.touch-device #table-scaler {
  transform-origin: center center;
  will-change: transform;
}

/* Table container needs to clip the zoomed content */
.touch-device #table-container {
  overflow: hidden;
}