/* 3D Depth Effects for iLotto */

/* Raised Cards */
.game-card, .card-type, .winner-card, .balance-card {
  transform: translateZ(0);
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.3),
    0 10px 20px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.game-card:hover, .card-type:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 8px 15px rgba(0,0,0,0.4),
    0 20px 40px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.game-card:active, .card-type:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(0,0,0,0.2);
}

/* 3D Buttons - Push Effect */
.btn, button, .stake-btn, .currency-btn, .play-again-btn {
  transform: translateZ(0);
  box-shadow: 
    0 4px 0 rgba(0,0,0,0.3),
    0 6px 10px rgba(0,0,0,0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:active, button:active, .stake-btn:active, .currency-btn:active {
  transform: translateY(3px);
  box-shadow: 
    0 1px 0 rgba(0,0,0,0.3),
    0 2px 4px rgba(0,0,0,0.2);
}

/* Number Grid - Floating */
.number-grid, .num-grid {
  background: rgba(0,0,0,0.4);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 
    inset 0 2px 10px rgba(0,0,0,0.5),
    0 0 30px rgba(0,0,0,0.3);
}

/* Number Buttons - 3D Pills */
.num-btn {
  box-shadow: 
    0 3px 0 rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.1s, box-shadow 0.1s;
}
.num-btn:active {
  transform: translateY(2px);
  box-shadow: 
    0 1px 0 rgba(0,0,0,0.4),
    inset 0 1px 2px rgba(0,0,0,0.3);
}
.num-btn.selected {
  box-shadow: 
    0 0 15px currentColor,
    0 3px 0 rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

/* 3D Lottery Balls - depth only, no color override */
.selected-ball, .ball, .floating-ball {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.4),
    inset 0 -3px 6px rgba(0,0,0,0.15),
    inset 0 3px 6px rgba(255,255,255,0.15);
}

/* Scratch Card 3D */
#scratchCardContainer {
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.5),
    0 5px 15px rgba(0,0,0,0.3);
  border-radius: 15px;
}

/* Spin Wheel 3D */
#wheel {
  box-shadow: 
    0 0 0 8px rgba(255,215,0,0.3),
    0 0 0 15px rgba(0,0,0,0.3),
    0 20px 60px rgba(0,0,0,0.5);
}

/* Result Overlays - Floating Panel */
.result-overlay .result-content,
.result-section {
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.6),
    0 10px 30px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
}