/* simple casino theme */
body { background: radial-gradient(circle at 10% 10%, #0b0b0b, #060606); color: #f8f8f8; }
.header { padding: 10px 20px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-bottom: 1px solid rgba(255,255,255,0.03); }
.logo { font-family: 'Segoe UI', Roboto, sans-serif; font-weight:700; letter-spacing:2px; color:#ffd700; }
.card-casino { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.93); color:#fff; }
.card .controls .btn { min-width:64px; }
.card-canvas { display:flex; gap:12px; justify-content:center; align-items:center; padding:16px; }
.card-slot { width:96px; height:140px; border-radius:8px; background:#0f0f0f; border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:36px; }
.small-muted { color: rgba(255,255,255,0.6); font-size:0.9rem; }
.footer-note { color: rgba(255,255,255,0.5); font-size:0.85rem; }
.card-slot {
  width: 96px;
  height: 140px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1b1b1b, #0f0f0f);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
  padding: 8px;
  position: relative;
}

.card-slot:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(255,215,0,0.5);
}

.card-slot.held {
  border: 2px solid #ffd700;
  box-shadow: 0 0 15px #ffd700;
}

.card-slot .corner {
  font-size: 14px;
  position: absolute;
}

.card-slot .corner.top-left {
  top: 4px;
  left: 6px;
}

.card-slot .corner.bottom-right {
  bottom: 4px;
  right: 6px;
  transform: rotate(180deg);
}

.card-slot .center {
  font-size: 36px;
  display: flex;
  justify-content: center;  
  align-items: center;      
  flex: 1;                   
}
.card-slot .back {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(135deg, #222 0%, #111 100%);
  border: 2px solid #ff0000ff; 
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2), 0 4px 8px rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: #ff0000ff;
  font-size: 48px;  
}


.card-slot .back::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,215,0,0.05) 0,
    rgba(255,215,0,0.05) 2px,
    transparent 2px,
    transparent 6px
  );
  border-radius: 12px;
}
.modal-content {
  background: #1a1a1adf !important;  
  color: #fff;                    
  border: 2px solid gold;         
  border-radius: 10px;            
  opacity: 1 !important;           
  box-shadow: 0 0 25px rgba(255, 217, 0, 0.1); 
}
#recentGamesBody,
.table-sm th,
.table-sm td {
  font-size: 12px;
  padding: 3px 6px;
}

.table-dark {
  font-size: 12px;
}

.table-dark th {
  color: gold;
  font-weight: 500;
}

#recentGamesBody tr:nth-child(even) {
  background-color: #222;
}

#recentGamesBody tr:hover {
  background-color: #333;
}