/* ============================================================
   CINEMATIC CRICKET BAR (COMPLETELY FIXED)
   ============================================================ */

.cricket-cinematic-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    height: 58px !important;
    z-index: 10000 !important;
    overflow: hidden;
    transform: translateZ(0);
    background: linear-gradient(90deg, #031108 0%, #0a2a18 50%, #031108 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.25);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.cricket-cinematic-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent 50%);
    pointer-events: none;
}

.cricket-cinematic-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.08), transparent);
    animation: shineMove 3.5s linear infinite;
    pointer-events: none;
}

@keyframes shineMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Stadium Lights */
.stadium-lights {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,215,0,0.12), transparent 35%),
        radial-gradient(circle at 80% 50%, rgba(255,215,0,0.12), transparent 35%);
    animation: lightsMove 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lightsMove {
    0%,100% { transform: translateX(-2%); }
    50% { transform: translateX(2%); }
}




/* ========== PLAYER ========== */

.player-wrap {
    position: absolute;
    right: 24%;
    bottom: -4px;
    width: 90px;
    height: 55px;
    z-index: 50;
    transform: perspective(500px) rotateY(-8deg);
}
@media (max-width:768px){

   .player-wrap{

      right:17% !important;
   }
}
.head {
    position: absolute;
    top: 0;
    left: 46px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f5f3ef;
}

.body {
    position: absolute;
    top: 14px;
    left: 52px;
    width: 6px;
    height: 28px;
    background: #ece8e0;
    border-radius: 3px;
}

.leg {
    position: absolute;
    width: 5px;
    height: 24px;
    background: #e3ddd2;
    top: 38px;
    border-radius: 3px;
}

.leg.left {
    left: 46px;
    transform: rotate(18deg);
}

.leg.right {
    left: 58px;
    transform: rotate(-18deg);
}

/* ========== BAT ========== */

.bat {
    position: absolute;
    width: 9px;
    height: 40px;
    background: linear-gradient(to right, #9b6a3a, #f6d365, #9b6a3a);
    border-radius: 10px;
    top: 1px;
    left: 56px;
    transform-origin: bottom center;
    
    box-shadow:
        -2px 0 6px rgba(0,0,0,0.4),
        0 0 10px rgba(255,215,0,0.5);
}

/* ========== SCORE TEXTS ========== */

.score-popup {
    position: absolute;
    right: 290px;
    top: 12px;
    font-size: 24px;
    font-weight: 900;
    color: #ffd966;
    letter-spacing: 3px;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255,200,0,0.9);
    
    font-family: 'Playfair Display', Georgia, serif;
    z-index: 60;
    white-space: nowrap;
}

.six-text {
    position: absolute;
    right: 290px;
    top: 12px;
    font-size: 24px;
    font-weight: 900;
    color: #ffaa33;
    letter-spacing: 3px;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255,170,0,0.9);
    
    font-family: 'Playfair Display', Georgia, serif;
    z-index: 60;
}

/* ========== SPARKS ========== */

.hit-spark {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ffdd77, #ffaa33);
    border-radius: 50%;
    opacity: 0;
    right: 210px;
    top: 26px;
    filter: blur(1px);
    z-index: 55;
}

.spark-1 { animation: spark1 4s ease-in-out infinite; }
.spark-2 { animation: spark2 4s ease-in-out infinite; }
.spark-3 { animation: spark3 4s ease-in-out infinite; }





/* ========== MOBILE RESPONSIVE ========== */

@media (max-width: 768px) {

    .cricket-cinematic-bar {
        height: 48px !important;
    }

    .cricket-ball {
        top: 18px;
        width: 14px;
        height: 14px;
    }

    .player-wrap {
        right: 70px;
        transform: scale(0.7);
        bottom: -8px;
    }

    .score-popup {
        right: 150px;
        font-size: 18px;
        top: 8px;
    }

    .six-text {
        right: 150px;
        font-size: 18px;
        top: 8px;
    }

    .hit-spark {
        right: 130px;
        top: 18px;
    }

    .ball-trail {
        top: 22px;
    }
}

@media (max-width: 480px) {

    .cricket-cinematic-bar {
        height: 42px !important;
    }

    .player-wrap {
        right: 40px;
        transform: scale(0.6);
    }

    .score-popup {
        right: 100px;
        font-size: 16px;
    }

    .six-text {
        right: 100px;
        font-size: 16px;
    }
}

/* =========================
   JS CONTROLLED HIT
========================= */

.bat{
    transform: rotate(10deg);
    transition: transform .18s ease;
}

.bat.hit{
    transform: rotate(-72deg) translateY(-4px) scale(1.05);
}

.score-popup,
.six-text{
    opacity:0;
    transform:scale(.4);
    transition:.25s ease;
}

.score-popup.show,
.six-text.show{
    opacity:1;
    transform:scale(1.35);
}

.hit-spark{
    opacity:0;
    transition:.25s ease;
}

.hit-spark.active{
    opacity:1;
}

/* =========================
   BALL + SHADOW TOGETHER
========================= */

.ball-wrap{

    position:absolute;

    left:-120px;
    top:22px;

    width:120px;
    height:24px;

    z-index:30;

    
}


/* BALL */

.cricket-ball{

    position:absolute;

    right:0;
    top:0;

    width:18px;
    height:18px;

    border-radius:50%;

    background:
    radial-gradient(circle at 35% 35%, #ff8888, #cc0000);

    box-shadow:
    0 0 12px rgba(255,0,0,.8);
}


/* SHADOW / TRAIL */

.ball-trail{

    position:absolute;

    right:14px;
    top:8px;

    width:90px;
    height:3px;

    background:
    linear-gradient(
        90deg,
        transparent,
        #ff6600,
        #ffcc00
    );

    filter:blur(2px);
}


/* =========================
   BIG SIX BACK SIDE
========================= */

@keyframes shotSix{

    0%{
        transform:translate(0,0);
    }

    /* BAT CONTACT */
    52%{
        transform:translate(72vw,0);
    }

    /* GO BACK LEFT + UP */
    100%{
        transform:translate(-40vw,-120px);
    }
}


/* =========================
   STRAIGHT BACK SHOT
========================= */

@keyframes shotFront{

    0%{
        transform:translate(0,0);
    }

    52%{
        transform:translate(72vw,0);
    }

    /* FAST LEFT */
    100%{
        transform:translate(-90vw,0);
    }
}


/* =========================
   COVER STYLE
========================= */

@keyframes shotCover{

    0%{
        transform:translate(0,0);
    }

    52%{
        transform:translate(72vw,0);
    }

    /* LEFT + LITTLE UP */
    100%{
        transform:translate(-70vw,-35px);
    }
}


/* =========================
   LOW SHOT
========================= */

@keyframes shotPull{

    0%{
        transform:translate(0,0);
    }

    52%{
        transform:translate(72vw,0);
    }

    /* LEFT + DOWN */
    100%{
        transform:translate(-85vw,25px);
    }
}