body{

    margin:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

    overscroll-behavior:none;

    background:#050505;

    color:#fff;

    font-family:Arial,Helvetica,sans-serif;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;
    
    padding:6px 0;

}

.grid{

    display:flex;
    flex-wrap:wrap;

   width:min(94vw,76vh,560px);

    height:min(94vw,76vh,560px);

    aspect-ratio:1;

    background:#000;

    border:4px solid #ffcc00;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 0 8px rgba(255,204,0,.6),
        0 0 16px rgba(255,204,0,.5),
        inset 0 0 25px rgba(255,204,0,.20);

}

.grid div{

    width:calc(100% / 28);

    height:calc(100% / 28);

    box-sizing:border-box;
    
    position:relative;

}

/* ===========================
   WALL
=========================== */

.wall{

    background-image:url("/wp-content/uploads/2026/07/wall.webp");

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    z-index:1;

}

/* ===========================
   DOT
=========================== */

.pac-dot{

    position:relative;

    background:#000;

    z-index:2;

}

.pac-dot::after{

    content:"";

    position:absolute;

    inset:0;

    background:url("/wp-content/uploads/2026/07/pearl.webp") center center;

    background-size:95%;

    background-repeat:no-repeat;

    filter:
        brightness(1.25)
        drop-shadow(0 0 2px rgba(255,220,80,.5));

    pointer-events:none;

    z-index:2;

}


/* ===========================
   POWER
=========================== */

.power-pellet{

    position:relative;

    background:#000;

    z-index:3;

}

.power-pellet::after{

    content:"";

    position:absolute;

    inset:-1px;

    background:url("/wp-content/uploads/2026/07/gold-tea.webp") center center;

    background-size:125%;

    background-repeat:no-repeat;

    filter:
        brightness(1.4)
        saturate(1.15)
        drop-shadow(0 0 6px rgba(255,220,0,.7));

    pointer-events:none;

    z-index:3;

}

/* ===========================
   PACMAN
=========================== */

.pac-man{

    background-image:url("/wp-content/uploads/2026/07/bear.webp");

    background-repeat:no-repeat;

    background-position:center;

    background-size:165%;
    
    animation:bearGlow 1.5s ease-in-out infinite;

    z-index:20;

}

/* ===========================
   GHOST
=========================== */

.ghost{

    background-size:125%;

    background-position:center;

    background-repeat:no-repeat;

    border:none;

    box-shadow:none;

    z-index:15;

    filter:
        brightness(1.15)
        drop-shadow(0 0 4px rgba(255,220,0,.55));

}

/* ===========================
   BEE DIRECTION
=========================== */

.dir-right{

    background-image:url("https://cdn.satulisting.com/2026/07/bee.webp");

}

.dir-left{

    background-image:url("https://cdn.satulisting.com/2026/07/10-300x300.webp");

}

.dir-up{

    background-image:url("https://tianlalatea.com/wp-content/uploads/2026/07/bee-back.webp");

}

.dir-down{

    background-image:url("https://cdn.satulisting.com/2026/07/11-300x300.webp");

}

/* ===========================
   SCARED GHOST
=========================== */

.scared-ghost{

    filter:
        brightness(1.6)
        saturate(.3);

    opacity:.75;

}

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

h3{

    color:#ffcc00;

    font-size:24px;

}

/* ===========================================
   TIANLALA UI
=========================================== */

.game-header{

    text-align:center;

    margin:10px 0 8px;


}

.game-header h1{

    margin:0;

    color:#ffcc00;

    font-size:32px;


    text-shadow:
        0 0 10px #ffcc00,
        0 0 20px #ffcc00;

}

.game-header h2{

    margin:6px 0 0;

    color:#fff;

    font-size:16px;

    letter-spacing:6px;

}

.top-info{

    width:min(94vw,560px);

    display:flex;

    gap:10px;

    margin:10px auto;

}

.bottom-info{

    width:min(94vw,560px);

    margin:10px auto 0;

}

.card{

    flex:1;

    margin:0;

    background:#111;

    border:2px solid #ffcc00;

    border-radius:18px;

    padding:10px;

    text-align:center;

    box-shadow:
        0 0 10px rgba(255,204,0,.35);

}

.label{

    color:#888;

    font-size:14px;

}

.value{

    margin-top:8px;

    color:#ffcc00;

    font-size:26px;

    font-weight:bold;

}

.bottom-info .card{

    margin:0;

    padding:6px;

}

.bottom-info .label{

    font-size:12px;

}

.bottom-info .value{

    font-size:22px;

    margin-top:4px;

}

/* ===========================
   BEAR DIRECTION
=========================== */
.bear-up{

    background-image:url("/wp-content/uploads/2026/07/bear-up.webp");

    background-size:165%;

    background-position:center;

    background-repeat:no-repeat;
    
    animation:bearGlow 1.5s ease-in-out infinite;
    


}

.bear-down{

    background-image:url("/wp-content/uploads/2026/07/bear-down.webp");

    background-size:165%;

    background-position:center;

    background-repeat:no-repeat;
    
    animation:bearGlow 1.5s ease-in-out infinite;
    
}

.bear-left{

    background-image:url("/wp-content/uploads/2026/07/bear-left.webp");

    background-size:165%;

    background-position:center;

    background-repeat:no-repeat;
    
    animation:bearGlow 1.5s ease-in-out infinite;

}

.bear-right{

    background-image:url("/wp-content/uploads/2026/07/bear-right.webp");

    background-size:165%;

    background-position:center;

    background-repeat:no-repeat;
    
    animation:bearGlow 1.5s ease-in-out infinite;

}

@media (max-height:700px){

    .game-header{
        margin:4px 0;
    }

    .game-header h1{
        font-size:28px;
    }

    .game-header h2{
        font-size:14px;
        letter-spacing:4px;
        margin-top:2px;
    }

    .top-info{
        margin-bottom:6px;
    }

    .bottom-info{
        margin-top:4px;
    }

    .top-info .card{
        padding:8px;
    }

    .label{
        font-size:12px;
    }

    .value{
        font-size:22px;
    }

}


#bonusPopup{

    position:fixed;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.8);

    background:rgba(0,0,0,.9);

    border:3px solid #ffcc00;

    border-radius:18px;

    padding:20px 36px;

    color:#ffcc00;

    font-size:34px;

    font-weight:bold;

    text-align:center;

    text-shadow:0 0 12px #ffcc00;

    box-shadow:0 0 25px rgba(255,204,0,.7);

    opacity:0;

    pointer-events:none;

    transition:.25s;

    z-index:9999;

}

#bonusPopup.show{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

@media (max-width:480px){

    #bonusPopup{

        font-size:24px;

        padding:16px 24px;

    }

}


#gamePopup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:.25s;

    z-index:10000;

}

#gamePopup.show{

    opacity:1;

    pointer-events:auto;

}

.popup-box{

    width:300px;

    max-width:86vw;

    background:#111;

    border:3px solid #ffcc00;

    border-radius:20px;

    padding:22px;

    text-align:center;

    box-shadow:
        0 0 25px rgba(255,204,0,.6);

}

#popupIcon{

    font-size:48px;

}

#popupTitle{

    margin-top:12px;

    color:#ffcc00;

    font-size:24px;

    font-weight:bold;

}

#popupText{

    margin-top:16px;

    color:#fff;

    font-size:18px;

}

#popupBtn{

    margin-top:18px;

    width:100%;

    padding:12px;

    border:none;

    border-radius:14px;

    background:#ffcc00;

    color:#000;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

#popupBtn2{

    margin-top:12px;

    width:100%;

    padding:12px;

    border:none;

    border-radius:14px;

    background:#4CAF50;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

/* ===========================================
   POPUP SCORE PANEL
=========================================== */

.popup-score{

    margin-top:20px;

    text-align:left;

}

.popup-row,
.popup-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:10px 0;

}

.popup-row span:first-child,
.popup-total-label{

    color:#bbb;

    font-size:16px;

}

.popup-number{

    color:#fff;

    font-size:24px;

    font-weight:bold;

}

.popup-bonus{

    color:#00ff66;

    font-size:24px;

    font-weight:bold;

}

.popup-divider{

    height:2px;

    background:rgba(255,255,255,.18);

    margin:16px 0;

}

.popup-total{

    margin-top:12px;

}

.popup-total-label{

    color:#ffcc00;

    font-size:20px;

    font-weight:bold;

}

.popup-total-number{

    color:#ffcc00;

    font-size:34px;

    font-weight:bold;

    text-shadow:
        0 0 8px rgba(255,204,0,.8);

}

#popupScorePanel{

    display:none;

}

.timer-danger{

    color:#ff3b3b !important;

    text-shadow:
        0 0 8px #ff0000,
        0 0 16px #ff0000,
        0 0 26px #ff0000;

    animation:timerBlink .7s infinite;

}

@keyframes timerBlink{

    0%{

        opacity:1;

    }

    50%{

        opacity:.35;

    }

    100%{

        opacity:1;

    }

}



/* ===========================================
   FLOATING SCORE
=========================================== */

.floating-score{

    position:fixed;

    left:0;

    top:0;

    transform:translate(-50%,-50%);

    color:#ffcc00;

    font-size:20px;

    font-weight:bold;

    text-shadow:
        0 0 8px rgba(255,204,0,.9);

    pointer-events:none;

    z-index:99999;

    opacity:1;

    transition:
        transform .6s ease-out,
        opacity .6s ease-out;

}

.floating-score.show{

    transform:
        translate(-50%,-170%)
        scale(1.15);

    opacity:0;

}


/* ===========================================
   RUNNING LEADERBOARD
=========================================== */

.ticker-wrap{

    width:min(94vw,560px);

    margin:10px auto;

    overflow:hidden;

    border:2px solid #ffcc00;

    border-radius:18px;

    background:#111;

    box-shadow:
        0 0 10px rgba(255,204,0,.35);

}

.ticker{

    display:inline-block;

    white-space:nowrap;

    padding:8px 40px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    will-change:transform;

    transform:translate3d(0,0,0);

    backface-visibility:hidden;

    animation:tickerMove 28s linear infinite;

}

@keyframes tickerMove{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(-100%);

    }

}


/* ===========================================
   SUBMIT SCORE FORM
=========================================== */

#popupSubmitPanel{

    display:none;

    margin-top:18px;

    text-align:left;

}

#popupSubmitPanel .popup-row{

    margin:0 0 8px;

}

#popupSubmitPanel span{

    color:#ffcc00;

    font-size:14px;

    font-weight:bold;

    letter-spacing:.5px;

}

#playerName,
#playerPhone{

    width:100%;

    box-sizing:border-box;

    margin-top:6px;

    padding:12px 14px;

    border:2px solid #ffcc00;

    border-radius:12px;

    background:#1a1a1a;

    color:#fff;

    font-size:16px;

    outline:none;

    transition:.2s;

}

#playerName::placeholder,
#playerPhone::placeholder{

    color:#888;

}

#playerName:focus,
#playerPhone:focus{

    border-color:#ffd84d;

    box-shadow:
        0 0 8px rgba(255,204,0,.45);

}

#submitScoreBtn{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:14px;

    background:#ffcc00;

    color:#000;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

#submitScoreBtn:hover{

    transform:scale(1.02);

}

#submitScoreBtn:disabled{

    opacity:.6;

    cursor:not-allowed;

}


@keyframes bearGlow{

    0%,100%{

        filter:
            brightness(1.15)
            drop-shadow(0 0 5px rgba(255,220,0,.55));

    }

    50%{

        filter:
            brightness(1.3)
            drop-shadow(0 0 12px rgba(255,220,0,1));

    }

}