/* Casino menu — card grid replacing the individual gambling banner buttons.
   Minigames menu reuses .casino-card / .casino-grid for an identical look. */

.casino-modal,
.minigames-modal{
  position:relative;
  max-width:640px;
  width:min(92vw,640px);
  padding:42px 24px 22px;
  border-radius:14px;
}
.casino-modal{
  background:linear-gradient(180deg,#1a0820 0%,#0c0410 100%);
  border:2px solid #5a2060;
  box-shadow:0 0 40px rgba(120,40,160,0.45),inset 0 0 30px rgba(60,20,80,0.5);
}
.minigames-modal{
  background:linear-gradient(180deg,#0a1830 0%,#040810 100%);
  border:2px solid #2060a0;
  box-shadow:0 0 40px rgba(40,120,200,0.45),inset 0 0 30px rgba(20,60,100,0.5);
}
.casino-modal .modal-title,
.minigames-modal .modal-title{
  text-align:center;
  font-size:24px;
  font-weight:800;
  color:#ffd86b;
  text-shadow:0 0 12px rgba(255,180,40,0.55);
  margin-bottom:16px;
  letter-spacing:1.5px;
}
.minigames-empty{
  text-align:center;
  padding:24px 12px;
  color:#9bb0d0;
  font-size:14px;
  font-style:italic;
}
.casino-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:12px;
}
.casino-grid .minigames-divider{
  grid-column:1/-1;
  border:0;
  height:2px;
  margin:6px 0 2px;
  background:linear-gradient(90deg,transparent,#6020a0 20%,#a060d0 50%,#6020a0 80%,transparent);
  box-shadow:0 0 6px rgba(160,80,240,0.4);
}
.casino-card{
  position:relative;
  aspect-ratio:5/7;
  width:100%;
  padding:0;
  border-radius:9px;
  border:2px solid #d4a040;
  background:#0a0410;
  cursor:pointer;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  transition:transform 0.12s ease,box-shadow 0.12s ease,border-color 0.12s ease;
  box-shadow:0 4px 0 rgba(0,0,0,0.4),0 0 12px rgba(212,160,64,0.18);
  font-family:'Exo 2',sans-serif;
}
.casino-card:hover{
  transform:translateY(-3px);
  border-color:#ffd86b;
  box-shadow:0 7px 0 rgba(0,0,0,0.4),0 0 18px rgba(255,216,107,0.55);
}
.casino-card:active{
  transform:translateY(-1px);
  box-shadow:0 2px 0 rgba(0,0,0,0.4),0 0 10px rgba(255,216,107,0.45);
}
.casino-card-locked{
  opacity:0.3;
  cursor:not-allowed;
  filter:grayscale(0.4);
}
.casino-card-locked:hover{
  transform:none;
  border-color:#d4a040;
  box-shadow:0 4px 0 rgba(0,0,0,0.4),0 0 12px rgba(212,160,64,0.18);
}
.casino-card-locked:active{
  transform:none;
  box-shadow:0 4px 0 rgba(0,0,0,0.4),0 0 12px rgba(212,160,64,0.18);
}
/* Work-in-progress cards (some minigames menu entries): grayed out, not
   clickable, with a big diagonal "WIP" stamp. The graying targets the art +
   name so the WIP banner stays crisp on top. */
.casino-card-wip{
  cursor:not-allowed;
}
.casino-card-wip:hover,
.casino-card-wip:active{
  transform:none;
  border-color:#d4a040;
  box-shadow:0 4px 0 rgba(0,0,0,0.4),0 0 12px rgba(212,160,64,0.18);
}
.casino-card-wip .casino-card-bg{
  filter:grayscale(1) brightness(0.55);
  opacity:0.6;
}
.casino-card-wip .casino-card-name{
  filter:grayscale(1);
  opacity:0.75;
}
.casino-card-wip-banner{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-family:'Exo 2',sans-serif;
  font-size:34px;
  font-weight:900;
  letter-spacing:5px;
  color:rgba(255,255,255,0.82);
  text-shadow:0 2px 5px rgba(0,0,0,0.95),0 0 2px rgba(0,0,0,0.8);
  transform:rotate(-30deg);
}
.casino-card-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.casino-card-bg svg{
  width:100%;
  height:100%;
  display:block;
}
.casino-card-name{
  position:relative;
  z-index:1;
  width:100%;
  padding:7px 4px;
  text-align:center;
  font-size:16px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.82) 55%);
  text-shadow:0 1px 2px rgba(0,0,0,0.9);
  letter-spacing:0.3px;
  line-height:1.15;
}

/* "Free play!" corner ribbon on casino cards (plinko, slots, scratch, wheel of fortune). */
.casino-card-freeplay-banner{
  position:absolute;
  top:18px;
  left:-42px;
  width:150px;
  padding:3px 0 3px 16px;
  background:#0a4020;
  color:#fff;
  font-family:'Exo 2',sans-serif;
  font-size:14px;
  font-weight:900;
  letter-spacing:0.4px;
  text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,0.65);
  border-top:1px solid rgba(255,255,255,0.45);
  border-bottom:1px solid rgba(0,0,0,0.45);
  box-shadow:0 1px 4px rgba(0,0,0,0.5);
  transform:rotate(-30deg);
  transform-origin:center;
  pointer-events:none;
  z-index:2;
  animation:casinoFreeplayPulse 1.4s ease-in-out infinite;
}
/* Scale + brightness pulse with a green glow. Card has overflow:hidden so the
   scale-up is auto-clipped within the card border. */
@keyframes casinoFreeplayPulse{
  0%,100%{transform:rotate(-30deg) scale(1);    filter:brightness(1);    box-shadow:0 1px 4px rgba(0,0,0,0.5), 0 0 4px rgba(74,255,140,0.4);}
  50%   {transform:rotate(-30deg) scale(1.12); filter:brightness(1.3); box-shadow:0 1px 6px rgba(0,0,0,0.55), 0 0 16px rgba(74,255,140,0.95);}
}

@media (max-width:520px){
  .casino-grid{
    grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
    gap:9px;
  }
  .casino-card-name{font-size:14px;}
}