/* ==========================================================================
   APPLE MINIMALIST ANIMATED GAME COVERS
   High-performance vector animations for 26 Aptitude Training Modules
   ========================================================================== */

.gsc-cover {
    width: 100%;
    height: 140px;
    border-radius: 14px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(244, 247, 252, 0.95) 0%, rgba(232, 239, 250, 0.9) 100%);
    border: 1px solid var(--apple-card-border);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

[data-theme="night"] .gsc-cover {
    background: linear-gradient(135deg, rgba(22, 28, 40, 0.95) 0%, rgba(14, 18, 28, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Subtle background aerospace grid inside cover */
.gsc-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 113, 227, 0.04) 0%, transparent 70%),
        linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
    pointer-events: none;
}

[data-theme="night"] .gsc-cover::before {
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 242, 254, 0.07) 0%, transparent 70%),
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Hover Interaction: micro-zoom and depth enhancement */
.game-select-card:hover .gsc-cover {
    transform: translateY(-2px);
    border-color: var(--apple-accent);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.12), inset 0 1px 3px rgba(255, 255, 255, 0.9);
}

[data-theme="night"] .game-select-card:hover .gsc-cover {
    box-shadow: 0 8px 24px rgba(0, 242, 254, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.gsc-cover svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-select-card:hover .gsc-cover svg {
    transform: scale(1.05);
}

/* Category Badge Chip inside Cover */
.gsc-cover .gsc-cover-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 980px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2;
}

.gsc-cover[data-category="spatial"] .gsc-cover-chip {
    background: rgba(0, 113, 227, 0.1);
    color: #0071e3;
    border: 1px solid rgba(0, 113, 227, 0.2);
}

.gsc-cover[data-category="attention"] .gsc-cover-chip {
    background: rgba(48, 209, 88, 0.1);
    color: #30d158;
    border: 1px solid rgba(48, 209, 88, 0.2);
}

.gsc-cover[data-category="logic"] .gsc-cover-chip {
    background: rgba(175, 82, 222, 0.1);
    color: #af52de;
    border: 1px solid rgba(175, 82, 222, 0.2);
}

/* ══════════════════════════════════════════════════════
   ANIMATION KEYFRAMES (60 FPS GPU-ACCELERATED)
   ══════════════════════════════════════════════════════ */

/* 1. SKY ASSEMBLE */
@keyframes skyAssemblePiece1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-8px, -6px); }
}
@keyframes skyAssemblePiece2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -4px); }
}
@keyframes skyAssemblePiece3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0px, 8px); }
}
.anim-sky-p1 { animation: skyAssemblePiece1 3s ease-in-out infinite; }
.anim-sky-p2 { animation: skyAssemblePiece2 3s ease-in-out infinite 0.2s; }
.anim-sky-p3 { animation: skyAssemblePiece3 3s ease-in-out infinite 0.4s; }

/* 2. SKY DISASSEMBLE */
@keyframes skyDisassemble {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15) translate(4px, -3px); }
}
.anim-sky-dis { animation: skyDisassemble 3.5s ease-in-out infinite; }

/* 3. OBLIQUE VIEW */
@keyframes obliqueRotate {
    0%, 100% { transform: rotate(0deg) skewX(0deg); }
    50% { transform: rotate(4deg) skewX(-3deg); }
}
@keyframes obliqueRay {
    0% { stroke-dashoffset: 40; opacity: 0.3; }
    50% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -40; opacity: 0.3; }
}
.anim-oblique-box { animation: obliqueRotate 5s ease-in-out infinite; transform-origin: center; }
.anim-oblique-ray { stroke-dasharray: 6 4; animation: obliqueRay 3s linear infinite; }

/* 4. ROTATING VIEW (Continuous Gimbal Orbit) */
@keyframes gimbalSpin1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes gimbalSpin2 {
    0% { transform: rotate(360deg) rotateX(60deg); }
    100% { transform: rotate(0deg) rotateX(60deg); }
}
.anim-gimbal-1 { animation: gimbalSpin1 12s linear infinite; transform-origin: center; }
.anim-gimbal-2 { animation: gimbalSpin2 8s linear infinite; transform-origin: center; }

/* 5. BOX FOLDING */
@keyframes foldFlapTop {
    0%, 100% { transform: scaleY(1); opacity: 0.9; }
    50% { transform: scaleY(0.2) skewX(20deg); opacity: 0.6; }
}
@keyframes foldFlapSide {
    0%, 100% { transform: scaleX(1); opacity: 0.9; }
    50% { transform: scaleX(0.2) skewY(20deg); opacity: 0.6; }
}
.anim-fold-top { animation: foldFlapTop 3s ease-in-out infinite; transform-origin: bottom; }
.anim-fold-side { animation: foldFlapSide 3s ease-in-out infinite 0.3s; transform-origin: left; }

/* 6. BOX UNFOLDING */
@keyframes unfoldPanel {
    0%, 100% { transform: scale(1); }
    50% { transform: translate(12px, -8px) scale(0.9); }
}
.anim-unfold-p { animation: unfoldPanel 3.5s ease-in-out infinite; transform-origin: center; }

/* 7. SPATIAL FOLDING */
@keyframes foldPaper {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-45deg) scaleX(0.7); }
}
@keyframes punchPulse {
    0%, 100% { r: 3; opacity: 0.7; }
    50% { r: 5; opacity: 1; }
}
.anim-spatial-paper { animation: foldPaper 4s ease-in-out infinite; transform-origin: 50% 50%; }
.anim-spatial-punch { animation: punchPulse 2s ease-in-out infinite; }

/* 8. 2D PUZZLE */
@keyframes puzzleSlide1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-10px, -6px); }
}
@keyframes puzzleSlide2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, 6px); }
}
.anim-tangram-1 { animation: puzzleSlide1 3s ease-in-out infinite; }
.anim-tangram-2 { animation: puzzleSlide2 3s ease-in-out infinite 0.2s; }

/* 9. CUBE ASSEMBLY */
@keyframes voxelDescend {
    0%, 100% { transform: translate(0, 0); }
    40% { transform: translate(0, -18px); }
    60% { transform: translate(0, -18px); }
}
@keyframes voxelGlow {
    0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 4px #0071e3); }
    50% { opacity: 0.4; filter: none; }
}
.anim-voxel-key { animation: voxelDescend 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.anim-voxel-glow { animation: voxelGlow 3.5s ease-in-out infinite; }

/* 10. KEY FITTING */
@keyframes keySlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-16px); }
}
@keyframes tumblerPin {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.anim-key-shaft { animation: keySlide 3s ease-in-out infinite; }
.anim-pin-1 { animation: tumblerPin 3s ease-in-out infinite 0.2s; }
.anim-pin-2 { animation: tumblerPin 3s ease-in-out infinite 0.4s; }

/* 11. AIRCRAFT ROTATION (Roll Pitch Yaw) */
@keyframes planePitch {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-8deg) translateY(-4px); }
    75% { transform: rotate(8deg) translateY(4px); }
}
@keyframes planeRollRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.anim-plane-pitch { animation: planePitch 4s ease-in-out infinite; transform-origin: center; }
.anim-roll-ring { animation: planeRollRing 10s linear infinite; transform-origin: center; }

/* 12. FLIP BOX */
@keyframes flipBoxTumble {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(16px, -8px) rotate(90deg); }
    50% { transform: translate(32px, 0) rotate(180deg); }
    75% { transform: translate(16px, 8px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}
.anim-flipbox-cube { animation: flipBoxTumble 6s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center; }

/* 13. N-BACK */
@keyframes nbackPing {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.6); opacity: 0.9; }
}
@keyframes nbackCell {
    0%, 70%, 100% { fill: rgba(0, 113, 227, 0.15); }
    20%, 50% { fill: #0071e3; }
}
.anim-nback-ring { animation: nbackPing 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; transform-origin: center; }
.anim-nback-c1 { animation: nbackCell 3s ease-in-out infinite; }
.anim-nback-c2 { animation: nbackCell 3s ease-in-out infinite 1s; }

/* 14. HIDDEN IMAGE */
@keyframes radarSweepCircle {
    0% { transform: translate(-20px, -10px); }
    50% { transform: translate(20px, 10px); }
    100% { transform: translate(-20px, -10px); }
}
@keyframes targetReveal {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; filter: drop-shadow(0 0 6px #0071e3); }
}
.anim-radar-lens { animation: radarSweepCircle 4s ease-in-out infinite; }
.anim-hidden-target { animation: targetReveal 4s ease-in-out infinite; }

/* 15. SIMILARITY */
@keyframes twinOrbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.anim-twin-left { animation: twinOrbit 8s linear infinite; transform-origin: 35% 50%; }
.anim-twin-right { animation: twinOrbit 8s linear infinite reverse; transform-origin: 65% 50%; }

/* 16. COMPUTER CHECKING */
@keyframes dataStreamScan {
    0% { transform: translateY(-30px); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(30px); opacity: 0; }
}
@keyframes checkmarkPop {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}
.anim-data-scan { animation: dataStreamScan 2.5s linear infinite; }
.anim-check-pop { animation: checkmarkPop 2s ease-in-out infinite; transform-origin: center; }

/* 17. SHAPE SCANNING */
@keyframes sonarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes targetLockBlink {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.1); stroke: #ff3b30; }
}
.anim-sonar-beam { animation: sonarSweep 4s linear infinite; transform-origin: 50% 50%; }
.anim-lock-reticle { animation: targetLockBlink 1.8s ease-in-out infinite; transform-origin: center; }

/* 18. DEVIATION (Artificial Horizon ADI) */
@keyframes gyroHorizon {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-10deg) translateY(-6px); }
    50% { transform: rotate(0deg) translateY(2px); }
    75% { transform: rotate(10deg) translateY(6px); }
}
.anim-gyro-horizon { animation: gyroHorizon 6s ease-in-out infinite; transform-origin: 50% 50%; }

/* 19. SHORT MEMORY */
@keyframes memoryPulseNode {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 5px #30d158); }
}
.anim-memory-node1 { animation: memoryPulseNode 2s ease-in-out infinite; transform-origin: center; }
.anim-memory-node2 { animation: memoryPulseNode 2s ease-in-out infinite 0.5s; transform-origin: center; }
.anim-memory-node3 { animation: memoryPulseNode 2s ease-in-out infinite 1s; transform-origin: center; }

/* 20. STM GRID */
@keyframes stmCoordTrace {
    0% { stroke-dashoffset: 120; opacity: 0.2; }
    50% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -120; opacity: 0.2; }
}
.anim-stm-path { stroke-dasharray: 60 120; animation: stmCoordTrace 3s linear infinite; }

/* 21. FIGURAL REASONING */
@keyframes figuralMorph {
    0%, 100% { transform: rotate(0deg) scale(1); }
    33% { transform: rotate(45deg) scale(0.9); }
    66% { transform: rotate(90deg) scale(1.08); }
}
.anim-figural-shape { animation: figuralMorph 5s cubic-bezier(0.16, 1, 0.3, 1) infinite; transform-origin: center; }

/* 22. SERIES NUMBER */
@keyframes seriesWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}
@keyframes nodeHop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.anim-series-curve { animation: seriesWave 4s linear infinite; }
.anim-num-hop { animation: nodeHop 2s ease-in-out infinite; }

/* 23. GRID NUMBER */
@keyframes gridBeamH {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(32px); }
}
@keyframes gridBeamV {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(40px); }
}
.anim-grid-beam-h { animation: gridBeamH 3s ease-in-out infinite; }
.anim-grid-beam-v { animation: gridBeamV 3s ease-in-out infinite 0.5s; }

/* 24. NUMBER ESTIMATION */
@keyframes needleOscillate {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(35deg); }
}
@keyframes barFluctuate {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(0.85); }
}
.anim-gauge-needle { animation: needleOscillate 3s ease-in-out infinite; transform-origin: bottom center; }
.anim-gauge-bar { animation: barFluctuate 2.5s ease-in-out infinite; transform-origin: bottom; }

/* 25. BALANCE SCALE */
@keyframes balanceTilt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(7deg); }
}
@keyframes panLeft {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(7px); }
    75% { transform: translateY(-7px); }
}
@keyframes panRight {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-7px); }
    75% { transform: translateY(7px); }
}
.anim-scale-beam { animation: balanceTilt 4s ease-in-out infinite; transform-origin: 50% 25%; }
.anim-pan-left { animation: panLeft 4s ease-in-out infinite; }
.anim-pan-right { animation: panRight 4s ease-in-out infinite; }

/* 26. ELECTRICAL MAZE */
@keyframes electricPulse {
    0% { stroke-dashoffset: 160; opacity: 0.3; }
    50% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 6px #00f2fe); }
    100% { stroke-dashoffset: -160; opacity: 0.3; }
}
@keyframes corePulse {
    0%, 100% { transform: scale(1); opacity: 0.7; filter: drop-shadow(0 0 4px #0071e3); }
    50% { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 12px #00f2fe); }
}
.anim-circuit-pulse { stroke-dasharray: 40 120; animation: electricPulse 2.5s linear infinite; }
.anim-core-glow { animation: corePulse 2s ease-in-out infinite; transform-origin: center; }