.depth-game-card {
  width: 100%;
  border-radius: 26px !important;
  box-shadow: 0 28px 75px #0008, 0 0 0 1px #ffffff21, inset 0 1px #ffffff26 !important;
  perspective: 1200px;
}
.depth-game-hero { position: relative !important; isolation: isolate; overflow: hidden !important; min-height: 260px; }
.depth-game-hero > :not(.depth-game-art) { z-index: 2; }
.depth-game-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 50% 18%, #b5eaff23, transparent 45%); }
.depth-game-grid { position: absolute; left: -35%; right: -35%; bottom: -75%; height: 135%; transform: rotateX(68deg); transform-origin: 50% 100%; background: repeating-linear-gradient(90deg, #ffffff20 0 2px, transparent 2px 62px), repeating-linear-gradient(0deg, #ffffff20 0 2px, transparent 2px 62px); box-shadow: 0 -15px 55px #8eeaff23; }
.depth-game-cube { position: absolute; left: 50%; top: 48%; width: 152px; height: 152px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(12deg) rotateY(-18deg); opacity: .28; filter: drop-shadow(0 25px 25px #0009); animation: depthFloat 5s ease-in-out infinite alternate; }
.depth-game-cube::before { content: ''; position: absolute; inset: 0; transform: translateZ(-22px) rotateY(180deg); border-radius: 20px; background: #18324b; box-shadow: 0 0 40px #9feaff64; }
.depth-game-cube::after { content: ''; position: absolute; top: 0; right: -42px; width: 44px; height: 100%; transform: rotateY(90deg); transform-origin: left; background: linear-gradient(90deg, #406488, #19283f); }
.depth-game-cube img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; border: 2px solid #ffffff6b; border-radius: 20px; transform: translateZ(22px); }
.depth-game-card #game-layer:not(.hidden), .depth-game-card #quiz-layer:not(.hidden) { min-height: 400px; }
.depth-game-card button { box-shadow: 0 5px 0 #0008; }
.depth-game-card button:active { box-shadow: 0 1px 0 #0008; }
@keyframes depthFloat { from { transform: translate(-50%, -53%) rotateX(10deg) rotateY(-17deg); } to { transform: translate(-50%, -46%) rotateX(16deg) rotateY(17deg); } }
@media (max-width: 760px) {
  .depth-game-hero { min-height: 235px; }
  .depth-game-cube { width: 118px; height: 118px; opacity: .21; }
  .depth-game-grid { background-size: 48px 48px; }
}
@media (prefers-reduced-motion: reduce) { .depth-game-cube { animation: none; } }