/* css/game-jalan.css — baris gambar game berjalan (marquee) di bawah banner depan
 * Dipakai oleh library/game-jalan.php. Gambar: images/game-jalan/ (diolah tools/siapkan-game-jalan.py).
 * Cara kerja: pita berisi 2 salinan daftar yang sama, digeser -50% lalu ulang -> mulus tanpa JS.
 */

.gj-blok {
    margin: 0 0 20px;
    padding: 10px 0 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(30, 22, 65, .55) 0%, rgba(10, 5, 25, .8) 100%);
    border: 1px solid rgba(145, 158, 248, .18);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.gj-kepala {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 9px;
    color: #ffde00;
    font-family: 'Montserrat', 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 222, 0, .35);
}

.gj-titik {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2bff88;
    box-shadow: 0 0 9px #2bff88;
    animation: gj-kedip 1.2s ease-in-out infinite;
}

.gj-garis {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 222, 0, .45), rgba(255, 222, 0, 0));
}

.gj-geser { color: rgba(255, 255, 255, .45); font-size: 10px; letter-spacing: 1px; }

/* tepi kiri/kanan dilembutkan seperti nanas */
.gj-luar {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.gj-pita {
    display: flex;
    gap: 10px;
    width: max-content;
    padding: 2px 6px;
    animation: gj-jalan 38s linear infinite;
    will-change: transform;
}

.gj-luar:active .gj-pita,
.gj-blok:hover .gj-pita { animation-play-state: paused; }

.gj-kartu {
    flex: 0 0 auto;
    width: 112px;
    text-decoration: none;
    background: #0f0a20;
    border: 1px solid rgba(255, 222, 0, .22);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.gj-kartu:hover {
    transform: translateY(-4px);
    border-color: #ffde00;
    box-shadow: 0 8px 20px rgba(255, 222, 0, .35);
}

.gj-kartu img {
    display: block;
    width: 100%;
    height: auto;
    background: #0f0a20;
}

.gj-nama {
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* nama panjang (GATES OF OLYMPUS) tetap terbaca */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 24px;
    padding: 5px 6px 6px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
}

@keyframes gj-jalan {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - 5px), 0, 0); } /* -5px = setengah jarak antar pita */
}

@keyframes gj-kedip {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

@media (max-width: 480px) {
    .gj-kartu { width: 104px; }
    .gj-pita  { animation-duration: 30s; }
}

@media (prefers-reduced-motion: reduce) {
    .gj-pita { animation: none; overflow-x: auto; }
}