/* =====================================================
   V5 FLASH EFFECTS (WIN / LOSE)
===================================================== */

/* =====================================================
   DICE REWARD 314X V5.8 BASE UI
   RESTORE EDITION PART 1
===================================================== */


/* =========================
   GLOBAL
========================= */

body{

    margin:0;

    background:

    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.75)
    ),

    url("../assets/backgrounds/casino.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    color:white;

    font-family:Arial, sans-serif;

    text-align:center;

}


/* =========================
   START SCREEN
========================= */


#startScreen {

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    color:gold;

    cursor:pointer;

    font-weight:bold;

    letter-spacing:3px;

}



/* =========================
   GAME AREA
========================= */


#game {


    display:none;


    padding-top:20px;


}




/* =========================
   TITLE
========================= */


h1 {


    color:gold;


    text-shadow:

    0 0 15px gold;


    margin-bottom:10px;


}





/* =========================
   CREDIT / MONEY
========================= */









/* =========================
   BET BUTTON
========================= */


.betBox button {


    padding:

    10px 15px;


    margin:5px;


    border-radius:8px;


    border:none;


    font-weight:bold;


    cursor:pointer;


    background:#333;


    color:white;


    transition:

    0.2s;


}




.betBox button:hover {


    transform:scale(1.05);


}





#b100.selected {


    background:

    limegreen !important;


    color:black !important;


}




#b200.selected {


    background:

    gold !important;


    color:black !important;


}





#b500.selected {


    background:

    red !important;


    color:white !important;


}






/* =========================
   SPIN BUTTON
========================= */


/* =====================================================
   V6.3 PREMIUM ROLL BUTTON
===================================================== */

#rollBtn{

    width:280px;

    height:70px;

    margin:25px auto;

    display:block;

    font-size:30px;

    font-weight:bold;

    color:white;

    background:linear-gradient(180deg,#ffd700,#d4af37);

    border:none;

    border-radius:18px;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(212,175,55,0.35);

    transition:all .25s ease;

}

#rollBtn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(212,175,55,0.45);

}

#rollBtn:active{

    transform:scale(0.96);

}

#rollBtn:disabled {


    background:gray;


}





/* =========================
   DICE BOX
========================= */


/* =========================
   V6.4 PREMIUM DICE BOX
========================= */

.diceBox{


    margin-top:20px;


    padding:20px;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:25px;


}


/* INDIVIDUAL DICE */


.diceBox span{


    width:90px;


    height:90px;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:70px;

    transition:0.25s ease;

    background:

    linear-gradient(
        145deg,
        #ffffff,
        #d8d8d8
    );


    color:#111;


    border:

    3px solid #d4af37;


    border-radius:18px;


    box-shadow:

    0 10px 25px rgba(0,0,0,0.6),

    inset 0 0 15px rgba(255,255,255,0.8);


}






/* =========================
   RESULT TEXT
========================= */

.result{

    margin-top:15px;

    font-size:18px;

    color:#ddd;

    padding:10px;

}


/* =========================
   V8.0 RESULT PANEL ENTER
   ========================= */

.resultShow{

    animation:

    resultPanelEnter
    0.6s
    ease-out
    forwards;

}


@keyframes resultPanelEnter{

    from{

        opacity:0;

        transform:
        scale(.85)
        translateY(20px);

    }


    to{

        opacity:1;

        transform:
        scale(1)
        translateY(0);

    }

}

/* =========================
   V8.0 RESULT PANEL ENTER
   ========================= */

.resultShow{

    animation:

    resultPanelEnter
    0.6s
    ease-out
    forwards;

}


@keyframes resultPanelEnter{

    from{

        opacity:0;

        transform:
        scale(.85)
        translateY(20px);

    }


    to{

        opacity:1;

        transform:
        scale(1)
        translateY(0);

    }

}

/* =====================================================
   DICE REWARD 314X V5.8 FUNCTION UI
   PART 2
===================================================== */


/* =========================
   WIN EFFECT
========================= */

.winFlash {

    animation:
    winFlashAnim 0.3s ease;

}


@keyframes winFlashAnim {


    0% {

        background-color:#111;

        box-shadow:
        0 0 0 gold;

        transform:scale(1);

    }


    50% {

        background-color:#2b1f00;

        box-shadow:
        0 0 40px gold;

        transform:scale(1.02);

    }


    100% {

        background-color:#111;

        box-shadow:
        0 0 0 gold;

        transform:scale(1);

    }

}



/* =========================
   LOSE EFFECT
========================= */


.loseFlash {


    animation:
    loseFlashAnim 0.3s ease;


}




@keyframes loseFlashAnim {


    0% {

        background-color:#111;

        filter:brightness(1);

        transform:translateX(0);

    }


    25% {

        transform:translateX(-5px);

    }


    50% {

        background-color:#2a0000;

        filter:brightness(.6);

        transform:translateX(5px);

    }


    100% {

        background-color:#111;

        filter:brightness(1);

        transform:translateX(0);

    }

}



/* =========================
   MARKET PANEL
========================= */


#marketPanel {


    margin:4px auto 4px;


    padding:5px 12px;


    width:260px;

transform:translateY(-22px);

    border:

    2px solid gold;


    border-radius:10px;


    background:

    rgba(
    0,
    0,
    0,
    .45
    );


    color:gold;


    font-weight:bold;


    line-height:1.4;


    box-shadow:

    0 0 12px
    rgba(
    255,
    215,
    0,
    .3
    );


}



#marketPanel div {


    margin-top:4px;


}



#marketMultiplier {


    color:#00ff99;


}



#marketTrend {


    color:#66ccff;


}





/* =========================
   ROUND PANEL
========================= */


#roundPanel {


    margin-top:15px;


    text-align:center;


    color:gold;


    font-size:18px;


    font-weight:bold;


}





/* =========================
   DICE RESULT PANEL
========================= */


.diceResult {


    width:240px;


    margin:15px auto;


    padding:12px;


    border:

    2px solid gold;


    border-radius:10px;


    background:#111;


    color:white;


    text-align:center;


    line-height:2;


    box-shadow:

    0 0 10px
    rgba(
    255,
    215,
    0,
    .4
    );


}



#diceSum {


    color:#00ff99;


    font-size:28px;


    font-weight:bold;


}



#diceMultiplier {


    color:gold;


    font-size:30px;


    font-weight:bold;


}






/* =========================
   PAY TABLE
========================= */


#payTable {


    width:280px;


    margin:20px auto;


    border:

    2px solid gold;


    border-radius:10px;


    background:#111;


    color:white;


    padding:10px;


    box-shadow:

    0 0 10px
    rgba(
    255,
    215,
    0,
    .35
    );


}



#payTable h3 {


    margin:0 0 10px;


    text-align:center;


    color:gold;


}



#payTable table {


    width:100%;


    border-collapse:collapse;


}



#payTable th {


    background:#333;


    color:gold;


    padding:6px;


}



#payTable td {


    text-align:center;


    padding:6px;


    border-top:

    1px solid #444;


}



#payTable tr:hover {


    background:#222;


}





/* =========================
   THEME SYSTEM
========================= */


body.theme-classic {


    background:#111;


    color:white;


}



body.theme-gold {


    background:#1b1200;


    color:#ffd700;


}



body.theme-neon {


    background:#00152b;


    color:#00eaff;


}



body.theme-neon button {


    box-shadow:

    0 0 10px #00eaff;


}



body.theme-emerald {


    background:#001f16;


    color:#00ff99;


}



body.theme-emerald button {


    border-color:#00ff99;


}



body.theme-dark {


    background:#000;


    color:#aaa;


}






/* =====================================================
   HELP CENTER
===================================================== */


#helpPopup {


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:100%;


    background:

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


    z-index:999;


}




.helpBox {


    position:absolute;


    top:50%;


    left:50%;


    transform:

    translate(
    -50%,
    -50%
    );


    width:90%;


    max-width:420px;


    background:

    linear-gradient(
    135deg,
    #111,
    #3a2600
    );


    border:

    2px solid gold;


    border-radius:20px;


    padding:20px;


    box-shadow:

    0 0 25px gold;


    text-align:center;


    color:white;


}




.helpBox h2 {


    color:#ffd700;


    font-size:26px;


}



.helpBox button {


    width:90%;


    margin:6px;


    padding:12px;


    border-radius:12px;


    border:

    1px solid gold;


    background:#222;


    color:white;


    font-size:16px;


    cursor:pointer;


}



.helpBox button:hover {


    background:#5a4300;


}




#helpContent {


    margin-top:15px;


    padding:15px;


    height:220px;


    overflow-y:auto;


    background:

    rgba(
    0,
    0,
    0,
    .5
    );


    border-radius:12px;


    text-align:left;


    line-height:1.7;


    font-size:15px;


}




#closeHelpBtn {


    background:#800000 !important;


    font-weight:bold;


}




@media(max-width:600px){


.helpBox {


    width:95%;


    padding:15px;


}


.helpBox button {


    font-size:14px;


}


#helpContent {


    height:180px;


}


}

/* =====================================================
   PLAYER EXP BAR
   V5.9 FOUNDATION
===================================================== */


#expBarBox{

    width:80%;

    height:16px;

    background:#222;

    border:1px solid #555;

    border-radius:10px;

    overflow:hidden;

    margin:10px auto;

}



#expBar{

    width:0%;

    height:100%;

    background:linear-gradient(
        to right,
        #d4af37,
        #ffe88a
    );


    border-radius:10px;


    transition:
        width 0.5s ease;

}
/* =========================
REWARD POPUP
V5.9 FOUNDATION
========================= */


#rewardPopup{

    position:fixed;

    top:40%;

    left:50%;

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

    background:#111;

    border:3px solid gold;

    border-radius:15px;

    padding:25px;

    text-align:center;

    color:white;

    font-size:20px;

    z-index:9999;

    display:none;

    box-shadow:0 0 25px gold;

}


#rewardPopupTitle{

    color:gold;

    font-size:28px;

    margin-bottom:15px;

}


#rewardPopupText{

    font-size:22px;

}

/* =========================
ACHIEVEMENT TEST MODE
V5.9 FOUNDATION
========================= */


#achievementTestPanel{

    margin:20px;

    padding:15px;

    border:2px solid gold;

    border-radius:15px;

    background:#111;

    text-align:center;

}


#achievementTestPanel h3{

    color:gold;

}


#achievementTestPanel button{

    margin:5px;

    padding:10px;

    border-radius:10px;

    background:#222;

    color:white;

    border:1px solid gold;

}


#dealerStatusPanel div{

    margin:5px 0;

}
#dealerAnalysisPanel{

    margin-top:10px;

    padding:0;

    border:none;

    border-radius:0;

    background:transparent;

    color:#ffd700;

    text-align:center;

    font-size:14px;

}
/* =========================
   DEALER REACTION EFFECT
   STEP19.0-D
========================= */

.dealerMessage{

    animation:
    dealerFade 0.6s ease;

}


@keyframes dealerFade{

    from{

        opacity:0;
        transform:translateY(10px);

    }


    to{

        opacity:1;
        transform:translateY(0);

    }

}
/* =========================
   DEALER FINAL REACTION
   STEP19.0-F
========================= */

.dealerFinalMessage{

    animation:
    dealerFinalGlow 1s ease;

    font-size:1.15em;

}


@keyframes dealerFinalGlow{


    0%{

        opacity:0.4;

        transform:
        scale(0.95);

    }


    50%{

        opacity:1;

        transform:
        scale(1.05);

    }


    100%{

        opacity:1;

        transform:
        scale(1);

    }

}


   /* =========================
   V6.4 PREMIUM CASINO LOBBY
========================= */

#startScreen{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


    background:

    radial-gradient(
        circle at center,
        rgba(212,175,55,0.15),
        transparent 45%
    ),

    linear-gradient(
        135deg,
        #050505,
        #120b05,
        #000000
    );


    position:relative;

    overflow:hidden;

}


/* GOLD LIGHT EFFECT */

#startScreen::before{


    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,0.18),
        transparent 70%
    );


    top:-250px;

    left:50%;

    transform:translateX(-50%);


    pointer-events:none;

}



/* LOBBY AREA */

.lobbyArea{

    position:relative;

    z-index:2;


    display:flex;

    justify-content:center;

    align-items:center;


    gap:50px;

}

    


.premiumLogo{

    margin-bottom:40px;

}



.premiumLogo h1{

    font-size:38px;

    color:#d4af37;

    letter-spacing:3px;

}



.premiumLogo h3{

    color:#ffffff;

    letter-spacing:8px;

}



.premiumLogo p{

    color:#aaa;

    font-style:italic;

}



.touchStart{

    font-size:28px;

    font-weight:bold;

    color:#ffd700;

    margin-bottom:35px;

    animation:pulseStart 2s infinite;

}

#playerProfileBox{

    width:280px;

    padding:25px;

    background:

    linear-gradient(
        145deg,
        #1b1b1b,
        #050505
    );

    border:

    2px solid #d4af37;

    border-radius:18px;

    box-shadow:

    0 0 25px #d4af37;

}


.profileTitle{

    font-size:20px;

    margin-bottom:20px;

}



#playerNameInput{


    width:90%;

    padding:12px;


    text-align:center;


    background:#111;


    color:white;


    border:

    1px solid #d4af37;


    border-radius:10px;


    font-size:18px;


}



#playerStartBtn{


    margin-top:20px;


    width:100%;


    padding:12px;


    background:#d4af37;


    color:#000;


    border:none;


    border-radius:12px;


    font-weight:bold;


}



@keyframes pulseStart{


    0%{

        opacity:0.5;

    }


    50%{

        opacity:1;

    }


    100%{

        opacity:0.5;

    }

}
/* =================================
 PREMIUM CASINO START SCREEN V6.0
================================= */


#startScreen{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:transparent;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

color:white;

z-index:9999;

}


/* =========================
   V6.4 PREMIUM CASINO LOGO
========================= */


.casinoLogo{

    text-align:center;

    position:relative;

    z-index:2;

}


/* MAIN TITLE */

.casinoLogo h1{


    margin:10px 0;


    font-size:52px;


    font-weight:900;


    letter-spacing:4px;


    color:#d4af37;


    text-shadow:

    0 0 10px rgba(212,175,55,0.8),

    0 0 30px rgba(212,175,55,0.5);


}



/* PREMIUM */

.casinoLogo h2{


    margin:0;


    font-size:34px;


    letter-spacing:12px;


    color:white;


    text-shadow:

    0 0 15px rgba(255,255,255,0.5);


}



/* SUB TITLE */

.casinoLogo p{


    margin-top:15px;


    font-size:20px;


    color:#d4af37;


    font-style:italic;


    letter-spacing:3px;


}


/* =========================
   V6.4 PREMIUM LOBBY
========================= */


.lobbyArea{

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:flex-start;

    gap:10px;

    margin-top:30px;

}
/* =========================
   TOUCH START BUTTON
   V6.3 LOBBY
========================= */

#touchStart{

    width:320px;

    margin:40px auto 0;

    text-align:center;

    display:block;

}

/* =========================
   PLAYER CARD V6.4 PREMIUM
========================= */

.playerCard{

    width:360px;

    min-height:560px;

    padding:30px;

    box-sizing:border-box;

    background:
    rgba(20,15,10,0.85);

    border:

    2px solid #d4af37;

    border-radius:25px;

    box-shadow:

    0 0 40px rgba(212,175,55,0.35);

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/* PLAYER TITLE */

.playerCard h2{

    color:#d4af37;

    font-size:30px;

}


/* PLAYER INPUT */

.playerCard input{

    width:90%;

    padding:15px;

    margin-top:20px;

    background:#111;

    border:

    1px solid #d4af37;

    border-radius:15px;

    color:white;

    font-size:18px;

    text-align:center;

}


/* ENTER BUTTON */

.playerCard button{

    margin-top:25px;

    padding:16px 35px;

    background:

    linear-gradient(
    45deg,
    #d4af37,
    #fff1a8
    );

    border:none;

    border-radius:25px;

    font-weight:bold;

    font-size:18px;

}


/* =========================
   DEALER CARD
========================= */


/* =========================
   DEALER CARD V6.4 ADJUST
========================= */


/* ===========================================
   GAME TOP BAR
=========================================== */

#gameTopBar{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:0px;

    margin-bottom:20px;

}

#returnLobbyBtn{

    padding:10px 22px;

    background:#1b1b1b;

    color:#d4af37;

    border:2px solid #d4af37;

    border-radius:12px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:0.25s;

}

#returnLobbyBtn:hover{

    background:#d4af37;

    color:#111;

}

/* DEALER IMAGE */

#dealerLobbyImage{

    height:270px;

    width:100%;

    object-fit:contain;

    object-position:center top;

    border-radius:20px;

}



/* DEALER NAME */

#dealerName{

    margin-top:20px;

    font-size:38px;

    font-weight:bold;

    color:#ffffff;

}


/* DEALER MESSAGE */

#dealerWelcomePreview{

    color:#d4af37;

    font-size:20px;

    line-height:1.5;

}


/* TOUCH START */

/* =========================
   TOUCH START BUTTON
   V6.3 PREMIUM LOBBY
========================= */

.touchStart{

    display:block;

    width:max-content;

    margin:50px auto 0;

    padding:20px 70px;


    border-radius:50px;


    border:2px solid #d4af37;


    background:

    linear-gradient(

        45deg,

        rgba(212,175,55,0.15),

        rgba(255,255,255,0.05)

    );


    color:#d4af37;


    font-size:30px;


    font-weight:bold;


    letter-spacing:8px;


    cursor:pointer;


    text-align:center;


    box-shadow:

    0 0 25px rgba(212,175,55,0.4);


    animation:pulseStart 2s infinite;

}


@keyframes casinoPulse{


    0%{

        box-shadow:

        0 0 15px rgba(212,175,55,0.3);

    }


    50%{

        box-shadow:

        0 0 45px rgba(212,175,55,0.8);

    }


    100%{

        box-shadow:

        0 0 15px rgba(212,175,55,0.3);

    }


}


@keyframes lobbyGlow{


    0%{

        opacity:0.5;

    }


    50%{

        opacity:1;

    }


    100%{

        opacity:0.5;

    }

}


/* =========================
   DEALER IMAGE SIZE FIX
========================= */

/* =========================
   DEALER IMAGE V6 STYLE
========================= */

/* =========================
   DEALER IMAGE V6.0
   Sophia / Victoria
========================= */


/* =========================
   PLAYER / DEALER CARD SIZE MATCH
========================= */


/* =========================
   DEALER PERSONALITY STYLE
========================= */


.dealerPreview.sophia{

    border-color:#d4af37;

    box-shadow:
    0 0 25px rgba(212,175,55,0.6);

}



.dealerPreview.victoria{

    border-color:#ff6b35;

    box-shadow:
    0 0 25px rgba(255,107,53,0.6);

}
/* =========================
   DEALER CARD V6.0
========================= */


#dealerWelcomePreview{

     margin:0;

    font-size:18px;

    color:white;

    padding:0 0 5px 0;

    line-height:1.2;

    margin-bottom:0;

    box-sizing:border-box;

    display:block;

}
/* =========================
   PLAYER CARD V6.4 FINAL FIX
========================= */

/* =========================
   PLAYER CARD V6.4 ADJUST
========================= */

.playerCard{

    width:100%;

    max-width:340px;

    min-height:480px;

    padding:8px;

    box-sizing:border-box;

    position:relative;

    

    background:
    rgba(20,15,10,0.85);

    border:
    2px solid #d4af37;

    border-radius:25px;

    box-shadow:
    0 0 40px rgba(212,175,55,0.35);

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    gap:4px;

}

#playerStartBtn{

    position:relative;

    top:-15px;

}
.playerCard h2{

    margin-top:0;

    margin-bottom:15px;

}


#playerNameInput{

    margin-top:5px;

}


#playerStartBtn{

    position:relative;

    top:-3px;

}
.playerCard input,
.playerCard button{

    transform:translateY(-12px);

}
.playerCard,

#startScreen{

    background:transparent;

}
body{
    background-image:
    url("../assets/backgrounds/casino.jpg") !important;
    background-size: auto;
    background-position: 48% calc(70% - 330px) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#startScreen{

    position:relative !important;

    width:100% !important;

    min-height:100vh !important;

    height:auto !important;

    background:transparent !important;

    z-index:auto !important;

}
/* =================================
   V6.0 PREMIUM CASINO LOGO
================================= */

      
/* =========================
   DEALER EMOTION EFFECT
========================= */


.dealerPreview.excited{

    box-shadow:
    0 0 30px rgba(255,80,0,0.8);

}



.dealerPreview.happy{

    box-shadow:
    0 0 25px rgba(255,215,0,0.6);

}



.dealerPreview.serious{

    box-shadow:
    0 0 20px rgba(120,120,120,0.6);

}



.dealerPreview.sad{

    box-shadow:
    0 0 20px rgba(80,120,255,0.5);

}
/* =====================================
   DEALER RELATIONSHIP PANEL
===================================== */

#dealerRelationshipPanel{

    margin-top:4px;

    width:100%;

    text-align:center;

 margin-bottom:4px;

}

#dealerRank{

    font-size:18px;

    font-weight:bold;

    color:#FFD700;

    letter-spacing:1px;

    margin-bottom:8px;

}

#dealerRelationshipBar{

    width:90%;

    height:12px;

    margin:0 auto;

    background:rgba(255,255,255,0.15);

    border:1px solid rgba(255,255,255,0.25);

    border-radius:10px;

    overflow:hidden;

}

#dealerRelationshipFill{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #ff5f6d,
        #ffc371
    );

    transition:width .4s ease;

}

#dealerRelationshipValue{

    margin-top:8px;

    font-size:14px;

    color:#ffffff;

    opacity:.9;


}
.popupWindow{

    display:none;

    position:fixed;

    top:5%;

    left:50%;

    transform:translate(-50%);

    width:420px;

    max-width:90%;

    padding:25px;

    background:#1b1b1b;

    border:2px solid #d4af37;

    border-radius:12px;

    color:white;

    z-index:9999;

    text-align:center;

}
.animationOff *,
.animationOff *::before,
.animationOff *::after{

    animation:none !important;

    transition:none !important;

}
/* =========================
   DEALER SELECT TEST
   V6.1
========================= */

#dealerSelectWindow{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.7);

    z-index:9999;


}


.dealerSelectBox{

    width:300px;

    margin:150px auto;

    padding:30px;

    background:#222;

    border:2px solid gold;

    text-align:center;

}
/* =========================
   PLAYER CARD SPACING FIX
========================= */

.playerCard h2{

    margin-bottom:40px;

}


.playerCard input{

    margin-top:10px;

    margin-bottom:35px;

}


.playerCard button{

    margin-top:10px;

}

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

.playerInfo{

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid rgba(212,175,55,0.35);

    color:#dddddd;

    font-size:17px;

    line-height:2.0;

}

.playerWelcome{

    margin-top:18px;

    color:#d4af37;

    font-size:18px;

    font-style:italic;

}

/* =========================
   V6.4 DICE ROLL EFFECT
========================= */


.diceRolling{


    animation:

    diceRollAnimation

    0.5s

    infinite;


}



@keyframes diceRollAnimation{


    0%{


        transform:

        rotateX(0deg)

        rotateY(0deg);


    }


    25%{


        transform:

        rotateX(180deg)

        rotateY(90deg);


    }


    50%{


        transform:

        rotateX(360deg)

        rotateY(180deg);


    }


    75%{


        transform:

        rotateX(540deg)

        rotateY(270deg);


    }


    100%{


        transform:

        rotateX(720deg)

        rotateY(360deg);


    }


}
/* =========================
   V6.4 RESULT EFFECT SYSTEM
========================= */


.resultWin{


    color:#d4af37;


    font-size:32px;


    font-weight:bold;


    animation:

    winGlow 1s infinite;


}



.resultLose{


    color:#888;


    font-size:28px;


}



.resultLegendary{


    color:#fff;


    font-size:38px;


    font-weight:bold;


    animation:

    legendaryGlow 0.8s infinite;


}



@keyframes winGlow{


    0%{

        text-shadow:

        0 0 10px #d4af37;

    }


    50%{

        text-shadow:

        0 0 40px #d4af37;

    }


    100%{

        text-shadow:

        0 0 10px #d4af37;

    }

}



@keyframes legendaryGlow{


    0%{

        text-shadow:

        0 0 20px gold;

    }


    50%{

        text-shadow:

        0 0 60px gold;

    }


    100%{

        text-shadow:

        0 0 20px gold;

    }

}
/* =========================
   V6.4 DICE RESULT EFFECT
========================= */


.diceWin{

    animation:
    diceWinGlow 1s infinite;

}


.diceLegendary{

    background:
    linear-gradient(
        145deg,
        #fff2a8,
        #d4af37
    ) !important;


    animation:
    legendaryDice 0.8s infinite;

}



@keyframes diceWinGlow{


    0%{

        box-shadow:
        0 0 15px gold;

    }


    50%{

        box-shadow:
        0 0 40px gold;

    }


    100%{

        box-shadow:
        0 0 15px gold;

    }

}



@keyframes legendaryDice{


    0%{

        transform:
        scale(1);

    }


    50%{

        transform:
        scale(1.15);

    }


    100%{

        transform:
        scale(1);

    }

}
/* =========================
   V6.4 LEGENDARY DICE EFFECT
========================= */


.diceLegendary{


    background:

    linear-gradient(
        145deg,
        #fff6b0,
        #d4af37,
        #8b6508
    ) !important;


    border:

    3px solid #fff2a8 !important;


    box-shadow:

    0 0 30px gold,

    0 0 60px rgba(255,215,0,0.8);


    animation:

    legendaryDiceGlow

    0.8s infinite;


}



@keyframes legendaryDiceGlow{


    0%{

        transform:
        scale(1);

    }


    50%{

        transform:
        scale(1.15);

    }


    100%{

        transform:
        scale(1);

    }


}
/* =========================
   V6.4 LEGENDARY RESULT PANEL
========================= */


.resultLegendary{


    font-size:38px;


    font-weight:bold;


    color:#ffd700;


    text-align:center;


    animation:

    legendaryResultGlow

    1s infinite;


}

/* =========================
   V8.0 BIG WIN EFFECT
========================= */

.resultBigWin{

    color:#ff8c00;

    font-size:36px;

    font-weight:bold;

    text-align:center;

    animation:
    bigWinGlow
    0.9s infinite;

}


@keyframes bigWinGlow{

    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.08);

    }


    100%{

        transform:scale(1);

    }

}

.resultLose{


    color:#888;


}



@keyframes legendaryResultGlow{


    0%{


        text-shadow:

        0 0 15px gold;


    }


    50%{


        text-shadow:

        0 0 60px gold;


    }


    100%{


        text-shadow:

        0 0 15px gold;


    }

}
/*=====================================
V6.1 DEALER EMOTION EFFECT
=====================================*/



/* Happy */

.dealerPreview.happy{

    box-shadow:
    0 0 25px #66ff99;

}

/* Excited */

.dealerPreview.excited{

    transform:
    scale(1.03);

    box-shadow:
    0 0 30px gold;

}

/* Legendary */

.dealerPreview.legendary{

    animation:
    dealerLegendary
    1.2s infinite;

}

@keyframes dealerLegendary{

0%{

box-shadow:
0 0 10px gold;

}

50%{

box-shadow:
0 0 45px orange;

}

100%{

box-shadow:
0 0 10px gold;

}

}

/* Serious */

.dealerPreview.serious{

    box-shadow:
    0 0 20px #4da6ff;

}

/* Sad */

.dealerPreview.sad{

    filter:
    grayscale(40%);

}
/*=====================================
V6.1 DEALER PORTRAIT ENGINE
=====================================*/

#dealerImage{

    transition:
    all .35s ease;

}

/* HAPPY */

.dealerPreview.happy #dealerImage{

    transform:
    scale(1.03);

}

/* EXCITED */

.dealerPreview.excited #dealerImage{

    transform:
    scale(1.08);

    filter:
    brightness(1.1);

}

/* LEGENDARY */

.dealerPreview.legendary #dealerImage{

    transform:
    scale(1.12);

    filter:
    brightness(1.2);

}

/* SAD */

.dealerPreview.sad #dealerImage{

    filter:
    grayscale(30%)
    brightness(.85);

}

/* SERIOUS */

.dealerPreview.serious #dealerImage{

    filter:
    contrast(1.15);

}
@keyframes dealerFloat{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-4px);

}

100%{

transform:
translateY(0px);

}

}
/* =====================================================
   V6.3 PREMIUM LAYOUT
===================================================== */

#game{

    max-width:1400px;

    margin:0 auto;

    padding:20px;

}

#dealerSection{

    margin-bottom:25px;

}

#playerSection{

    margin-bottom:25px;

}

#rollSection{

    margin-bottom:30px;

}
.betBox{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:20px 0;

    flex-wrap:wrap;

}
.diceBox{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin:20px auto;

    flex-wrap:wrap;

}
/* =====================================================
   V6.3 PREMIUM HUD
===================================================== */

/*
#playerHUD{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin:20px 0;

}
*/

.hudCard{

    width:175px;

    min-height:95px;

    padding:18px;

    box-sizing:border-box;

    border-radius:20px;

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(212,175,55,.35);

    box-shadow:
        0 0 18px rgba(212,175,55,.25);

    transition:.25s;
}



.hudCard:hover{

    transform:

        translateY(-6px);

    box-shadow:

        0 0 30px rgba(255,215,0,.5);

}

.hudLabel{

    font-size:16px;

    color:#d4af37;

    margin-bottom:8px;

}

.hudValue{

    font-size:28px;

    font-weight:bold;

    color:#00ff99;

}
#spinText{

    letter-spacing:2px;

    font-size:30px;

    font-weight:900;

}
/* =====================================================
   DEALER EMOTION
===================================================== */

#dealerEmotion{

    margin-top:12px;

    padding:10px;

    border-radius:12px;

    background:rgba(255,255,255,0.08);

    color:#ffd700;

    font-size:18px;

    font-weight:bold;

    text-align:center;

 display:flex;

    align-items:center;

    line-height:1;

  }
/* =====================================================
   V6.3 FINAL PREMIUM DEALER AREA
===================================================== */

#dealerSection{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:35px;

    margin:25px auto;

    padding:10px 25px;

    background:linear-gradient(
        135deg,
        rgba(20,20,20,.95),
        rgba(40,40,40,.92)
    );

    border:2px solid #d4af37;

    border-radius:22px;

    box-shadow:
    0 0 25px rgba(212,175,55,.35);

}


/* ===========================
   LEFT
=========================== */

#dealerLeft{

   width:auto;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    flex-shrink:0;
}


/* ===========================
   DEALER IMAGE
=========================== */

#dealerFrame{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

transform:translateY(75.00px);

}


/* ===========================
   DEALER PHOTO
=========================== */

#dealerGameImage{

width:100%;

max-width:520px;

height:auto;

object-fit:contain;

transition:

opacity .25s ease,

transform .25s ease,

filter .25s ease;

filter:

drop-shadow(
0 0 18px
rgba(255,215,0,.45)
);

}


/* ===========================
   RIGHT
=========================== */

#dealerRight{

    width:50%;

    display:flex;

    flex-direction:column;

    gap:20px;

    flex-shrink:0;
}


/* ===========================
   HEADER
=========================== */

#dealerHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


#dealerName{

    color:#ffd700;

    font-size:14px;

    font-weight:700;

    letter-spacing:0.5px;

    margin:2px 0;

    line-height:1.1;

}


/* ===========================
   EMOTION
=========================== */

#dealerEmotion{

    font-size:16px;

    padding:2px 5px;

    border-radius:6px;

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

    transform:translateX(-240px);

margin-top:4px;

    margin-bottom:4px;

}


/* ===========================
   SPEECH
=========================== */

#dealerSpeechBubble{

    position:relative;

    padding:3px 3px;

    background:white;

    color:#222;

    border-radius:14px;

    font-size:14px;

    font-weight:bold;

    line-height:1.3;

    transition:

    opacity .25s ease,

    transform .25s ease;

    box-shadow:

    0 6px 12px rgba(0,0,0,.30);

}


/* 말풍선 꼬리 */

#dealerSpeechBubble::before{

    content:"";

    position:absolute;

    right:-10px;

    top:22px;

    border-top:8px solid transparent;

    border-bottom:8px solid transparent;

    border-right:10px solid white;

}


/* ===========================
   ANALYSIS PANEL
=========================== */

#dealerAnalysisPanel{

    padding:24px;

    background:

    rgba(255,255,255,.06);

    border:1px solid #d4af37;

    border-radius:16px;

    color:white;

}


.analysisTitle{

    color:#ffd700;

    font-size:22px;

    font-weight:bold;

    margin-bottom:18px;

transform:translateX(-100px);

}

.analysisRow{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:35px;

    padding:8px 0;

    border-bottom:
    1px solid rgba(255,255,255,.08);

    font-size:18px;

}
.analysisRow span:first-child{

    width:50%;

    text-align:left;

    padding-left:40px;

}


.analysisRow span:last-child{

    width:35%;

    text-align:left;

}
/* =====================================================
   V6.3 GAME LAYOUT
===================================================== */

#game{

    display:flex;

    flex-direction:column;

    width:100%;

    min-height:100vh;

}
/* =================================
   V6.3 SCREEN FLOW CONTROL
================================= */


#game{

    display:flex;

    flex-direction:column;

    width:100%;

    min-height:100vh;

    gap:10px;

}
/* =================================
   V6.3 PREMIUM HUD
================================= */

#playerHUD{

    width:90%;

    margin:10px 0;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

}

#dealerSection{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    min-height:45vh;

}
/* =================================
   V6.3 MAIN DEALER SECTION
================================= */

#dealerSection{

    width:100%;

    max-width:100%;

    margin:8px auto;

    padding:8px;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    overflow:visible;

    background:
    linear-gradient(
        145deg,
        rgba(212,175,Gold,0.18),
        rgba(0,0,0,0.75)
    );

    border:1px solid #d4af37;

    border-radius:24px;

}

/* DEALER IMAGE FRAME */

#dealerFrame{

    width:100%;

    max-width:520px;

    height:42vh;

    min-height:360px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    flex-shrink:0;

    overflow:visible;
}
#dealerGameImage{

    width:100%;

    height:80%;

    object-fit:contain;

    object-position:center center;

    transform:scale(0.975);

    transition:
    transform .35s ease,
    opacity .35s ease;

    animation:
        dealerBreathing 4.2s ease-in-out infinite;

    transform-origin:center center;

    will-change:
    transform;

    margin-top:10px;

translate: 0 10px;

    user-select:none;

    pointer-events:none;
}

/* =====================================
   AI DEALER BREATHING
===================================== */

@keyframes dealerBreathing{

    0%{
        transform:scale(0.800);
    }

    50%{
        transform:scale(0.830);
    }

    100%{
        transform:scale(0.800);
    }
}

/* =====================================
   DEALER ANIMATION CLASSES
===================================== */

.dealerIdle{

    animation:
    dealerBreathing 4.2s ease-in-out infinite;

}

.dealerThinking{

    animation:
    dealerThinkingMove 1.4s ease-in-out infinite;

}

.dealerHappy{

    animation:
    dealerHappyBounce .8s ease;

}

.dealerSad{

    animation:
    dealerSadMove 1.3s ease;

}

.dealerJackpot{

    animation:
    dealerJackpotMove .7s ease infinite;

}

@keyframes dealerThinkingMove{

    0%{

        transform:
        rotate(0deg);

    }

    50%{

        transform:
        rotate(-1deg);

    }

    100%{

        transform:
        rotate(0deg);

    }

}

@keyframes dealerHappyBounce{

    0%{

        transform:
        scale(1);

    }

    50%{

        transform:
        scale(1.03);

    }

    100%{

        transform:
        scale(1);

    }

}

@keyframes dealerSadMove{

    0%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(5px);

    }

    100%{

        transform:
        translateY(0);

    }

}

@keyframes dealerJackpotMove{

    0%{

        transform:
        scale(1);

    }

    25%{

        transform:
        scale(1.03);

    }

    50%{

        transform:
        scale(1);

    }

    75%{

        transform:
        scale(1.03);

    }

    100%{

        transform:
        scale(1);

    }

}



#dealerGameImage{

    animation:
    dealerBreathing 3.8s ease-in-out infinite;

    transform-origin:center center;

}

/* DEALER IMAGE */

#dealerImage{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* DEALER MESSAGE */

#dealerMessage{

    margin-top:8px;

    font-size:15px;

    font-weight:bold;

    color:#d4af37;

    line-height:1.3;

}


/* DEALER STATUS */

#dealerStatusPanel{

    width:100%;

    margin-top:15px;

    padding:0;


    background:none;

    border:none;

}
#dealerStatusPanel{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    gap:4px;

    width:100%;

    margin-top:8px;

}

#dealerStatusPanel > div{

    width:auto;

    padding:4px 0;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:4px;

    background:none;

    border:none;

}


/* =================================
   V6.3 DEALER ANALYSIS PANEL
================================= */


#dealerAnalysisPanel{

    width:100%;

    margin-top:20px;

    padding:0;

    background:transparent;

    border:none;

    border-radius:0;

    text-align:center;

}


/* ANALYSIS TITLE */


/* =================================
   V6.3 PREMIUM DICE STAGE
================================= */

.diceBox{

    width:96%;

    max-width:900px;

    margin:5px auto;

    padding:10px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

    border-radius:28px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.03)
    );

    border:2px solid rgba(212,175,55,.35);

    box-shadow:
        inset 0 2px 15px rgba(255,255,255,.08),
        0 0 35px rgba(212,175,55,.18);

    position:relative;

    overflow:hidden;
}

.diceBox::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    animation:

    stageLight 5s linear infinite;

}

/* DICE ICON */

.diceBox span{

    width:75px;

    height:75px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:52px;


    background:

    rgba(255,255,255,0.15);


    border-radius:18px;


    border:

    1px solid rgba(255,255,255,0.35);


    box-shadow:

    0 0 15px rgba(212,175,55,0.25);

}

/* RESULT AREA */


.diceResult{

    width:90%;

    max-width:450px;


    margin:6px auto;


    padding:4px 15px;


    background:

    rgba(212,175,55,0.12);


    border-radius:15px;


    border:

    1px solid #d4af37;


    text-align:center;


    font-size:18px;

}
/* =================================
   V6.3 PREMIUM SPIN BUTTON
================================= */

#rollBtn{

    width:260px;

    height:60px;


    margin:0 auto;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
        145deg,
        #ffd700,
        #9c7600
    );


    color:white;


    border:

    3px solid #ffe9a6;


    border-radius:30px;


    font-size:36px;


    font-weight:bold;


    letter-spacing:3px;


    cursor:pointer;


    box-shadow:

    0 0 35px rgba(212,175,55,0.7);


    transition:

    0.2s;

}

/* =================================
   V6.3 PREMIUM BET AREA
================================= */


.betBox{

    width:96%;

    max-width:600px;


    margin:8px auto;


    display:flex;

    justify-content:center;

    align-items:center;


    gap:20px;

}


/* BET BUTTON */

.betBox button{

    width:130px;

    height:75px;


    display:flex;

    flex-direction:column;


    align-items:center;

    justify-content:center;


    border-radius:22px;


    border:

    2px solid #d4af37;


    background:

    rgba(255,255,255,0.08);


    color:white;


    font-size:22px;


    font-weight:bold;


    cursor:pointer;


    transition:0.2s;

}



/* SELECT EFFECT */


.betArea button:hover{

    background:

    rgba(212,175,55,0.25);

    transform:

    translateY(-2px);

    transition:

    .2s;

}



.betArea button.active{

    background:

    linear-gradient(
        145deg,
        #d4af37,
        #8a6a12
    );


    box-shadow:

    0 0 20px rgba(212,175,55,0.6);

}
.betBox button span{

    display:block;

    margin-top:6px;

line-height:20px;

    font-size:18px;

    color:#d4af37;

}
.betBox button{

    width:110px;

    height:80px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

    line-height:1.2;

    text-align:center;

}
/* =================================
   V6.3 PREMIUM PAY TABLE
================================= */


#payTable{

    width:82%;

    max-width:520px;

    margin:8px auto 12px;


    padding:12px;


    background:

    linear-gradient(
        145deg,
        rgba(0,0,0,0.75),
        rgba(30,30,30,0.9)
    );


    border:

    2px solid #d4af37;


    border-radius:20px;


    box-shadow:

    0 0 25px rgba(212,175,55,0.35);

    box-sizing:border-box;

}


/* TITLE */


#payTableTitle{

    text-align:center;


    color:#d4af37;


    font-size:20px;


    margin-bottom:10px;

}



/* TABLE */


#payTable table{

    width:100%;

    border-collapse:collapse;

}



/* HEADER */


#payTable th{

    padding:8px;


    background:

    rgba(212,175,55,0.25);


    color:white;


    font-size:16px;


    border-bottom:

    1px solid #d4af37;

}



/* BODY */


#payTable td{

    padding:7px;


    text-align:center;


    color:#eee;


    font-size:16px;


    border-bottom:

    1px solid rgba(255,255,255,0.15);

}



/* MAX 314X HIGHLIGHT */


#payTable tr:nth-child(2) td:nth-child(2){

    color:#ffd700;

    font-weight:bold;

    font-size:20px;

}


/* HOVER */

#payTable tr:hover{

    background:

    rgba(212,175,55,0.12);

}
/* =================================
   V6.3 PREMIUM PAY TABLE
================================= */


#payTable{

    width:96%;

    max-width:520px;


    margin:0px auto;


    padding:8px 20px;

transform:translateY(-15px);

    background:

    linear-gradient(
        145deg,
        rgba(212,175,55,0.12),
        rgba(0,0,0,0.75)
    );


    border:

    2px solid #d4af37;


    border-radius:25px;


    box-shadow:

    0 0 25px rgba(212,175,55,0.35);


    text-align:center;

}



#payTableTitle{

    margin-bottom:20px;

    font-size:24px;

    color:#ffd700;

}

#payTable table{

    width:100%;

    border-collapse:collapse;
}


#payTable th{

    padding:5px 12px;

    color:#ffd700;

    border-bottom:

    1px solid rgba(212,175,55,0.5);
}


#payTable td{

    padding:1px 10px;

    color:white;

    font-size:18px;
}

/* =========================================
   PAY TABLE COLUMN SPACE BALANCE
   V8.0
   ========================================= */


/* NUMBER */

#payTable th:nth-child(1),
#payTable td:nth-child(1){

    padding-left:5px;
    padding-right:5px;

    white-space:nowrap;

}


/* MISSING */

#payTable th:nth-child(2),
#payTable td:nth-child(2){

    padding-left:4px;
    padding-right:4px;

}


/* MULTIPLIER */

#payTable th:nth-child(3),
#payTable td:nth-child(3){

    padding-left:5px;
    padding-right:5px;

    white-space:nowrap;

}


/* BET */

#payTable th:nth-child(4),
#payTable td:nth-child(4){

    padding-left:5px;
    padding-right:5px;

    white-space:nowrap;

}

#payTable tr{

    transition:0.2s;
}


#payTable tr:hover{

    background:

    rgba(212,175,55,0.15);
}

#payTable tr{

    cursor:pointer;

}

/* =================================
   V6.3 PREMIUM ROUND PANEL
================================= */


#roundPanel{

    width:96%;

    max-width:950px;

    margin:10px auto;

    padding:6px 15px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:nowrap;

    white-space:nowrap;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid #d4af37;

    border-radius:20px;

    box-shadow:
    0 0 20px rgba(212,175,55,0.25);

    color:white;

}


#roundText,
#cycleText{

    color:#ffd700;

    font-weight:bold;

}


#roundValue,
#cycleValue{

    font-size:20px;

    font-weight:bold;

}
/* =================================
   V6.3 PREMIUM PLAYER PROFILE
================================= */


#playerProfile,
#profilePanel{

    width:96%;

    max-width:520px;


    margin:20px auto;


    padding:20px;


    background:

    linear-gradient(
        145deg,
        rgba(212,175,55,0.12),
        rgba(0,0,0,0.75)
    );


    border:

    2px solid #d4af37;


    border-radius:25px;


    color:white;


    text-align:center;


    box-shadow:

    0 0 25px rgba(212,175,55,0.35);

}



#playerProfile h3,
#profilePanel h3{

    color:#ffd700;

    font-size:22px;

    margin-bottom:15px;

}



#playerProfile span,
#profilePanel span{

    color:#ffd700;

    font-weight:bold;

}
/* =================================
   V6.3 PREMIUM PLAYER PROFILE CARD
================================= */


#playerProfilePanel{

    width:96%;

    max-width:520px;


    margin:20px auto;


    padding:25px;


    background:

    linear-gradient(
        145deg,
        rgba(212,175,55,0.15),
        rgba(0,0,0,0.8)
    );


    border:

    2px solid #d4af37;


    border-radius:25px;


    text-align:center;


    color:white;


    box-shadow:

    0 0 30px rgba(212,175,55,0.35);

}



#playerProfilePanel h3{

    margin-bottom:20px;

    color:#ffd700;

    font-size:24px;

}



#playerProfilePanel div{

    margin:10px 0;

    font-size:18px;

}



#playerProfilePanel span{

    color:#ffd700;

    font-weight:bold;

}
/* EXP BAR */

#expBarBox{

    width:90%;

    height:14px;


    margin:15px auto;


    background:

    rgba(255,255,255,0.15);


    border-radius:10px;


    overflow:hidden;


    border:

    1px solid rgba(212,175,55,0.5);

}


#expBar{

    width:0%;

    height:100%;


    background:

    linear-gradient(
        90deg,
        #d4af37,
        #ffe9a6
    );


    transition:0.5s;

}
/* =================================
   V6.3 PREMIUM ACHIEVEMENT PANEL
================================= */


#achievementPanel{

    width:96%;

    max-width:520px;


    margin:20px auto;


    padding:25px;


    background:


    linear-gradient(
        145deg,
        rgba(212,175,55,0.12),
        rgba(0,0,0,0.8)
    );


    border:

    2px solid #d4af37;


    border-radius:25px;


    color:white;


    text-align:center;


    box-shadow:

    0 0 25px rgba(212,175,55,0.35);

}



#achievementPanel h3{

    margin-bottom:20px;


    color:#ffd700;


    font-size:24px;

}



#achievementPanel > div{

    margin:12px 0;


    padding:10px;


    background:

    rgba(255,255,255,0.05);


    border-radius:12px;


    font-size:17px;

}



#achievementPanel span{

    color:#ffd700;

    font-weight:bold;

}
/* =================================
   V6.3 PROFILE AREA SPACING
================================= */


#playerProfilePanel,
#achievementPanel{

    margin:15px auto;

}



#playerProfilePanel + #achievementPanel{

    margin-top:10px;

}
/* =================================
   V6.3 PREMIUM UNLOCK PANEL
================================= */


#unlockPanel{

    width:96%;

    max-width:520px;


    margin:15px auto;


    padding:25px;


    background:

    linear-gradient(
        145deg,
        rgba(212,175,55,0.10),
        rgba(0,0,0,0.85)
    );


    border:

    2px solid #d4af37;


    border-radius:25px;


    color:white;


    text-align:center;


    box-shadow:

    0 0 25px rgba(212,175,55,0.30);

}



#unlockPanel h3{

    margin-bottom:20px;

    color:#ffd700;

    font-size:24px;

}



#unlockPanel > div{

    margin:12px 0;


    padding:10px;


    background:

    rgba(255,255,255,0.05);


    border-radius:12px;


    font-size:17px;

}



#unlockPanel span{

    color:#ffd700;

    font-weight:bold;

}
/* =================================
   V6.3 PLAYER INFORMATION ZONE
================================= */


#playerProfilePanel,
#unlockPanel,
#achievementPanel{

    box-sizing:border-box;

    width:96%;

    max-width:520px;


    margin:15px auto;

}
#playerProfilePanel > div,
#unlockPanel > div,
#achievementPanel > div{

    line-height:1.5;

}
@media(max-width:600px){


    #playerProfilePanel,
    #unlockPanel,
    #achievementPanel{

        width:94%;

        padding:18px;

    }


}
#playerProfilePanel,
#unlockPanel,
#achievementPanel,
#payTable{

    flex-shrink:0;

}
/* =================================
   V6.3 DEALER MESSAGE BALANCE
================================= */

#game #dealerMessage{

    margin-top:8px;

    width:85%;

    max-width:350px;

    text-align:center;

    max-height:120px;

    overflow:auto;

}

   
    /* =================================
   V6.3 PREMIUM RESULT PANEL
================================= */

   

#resultPanel{

    width:96%;

    max-width:520px;


    margin:0px auto;


    padding:0px;


    background:

    linear-gradient(
        145deg,
        rgba(212,175,55,0.12),
        rgba(0,0,0,0.8)
    );


    border:

    2px solid #d4af37;


    border-radius:25px;


    text-align:center;


    box-shadow:

    0 0 25px rgba(212,175,55,0.35);

}

#result{

    margin:10px 0 4px 0;

    padding:10px 0;

    font-size:22px;

    font-weight:bold;

    color:#ffd700;

    min-height:0;

    line-height:1.1;

}

.diceResult{

    padding:4px 15px;

    background:

    rgba(255,255,255,0.05);

    border-radius:15px;

    font-size:18px;

    color:white;
}


.diceResult span{

    color:#ffd700;

    font-size:24px;

    font-weight:bold;

}
/* =================================
   V6.3 DEALER REACTION EFFECT
================================= */


#game #dealerMessage{

    transition:0.4s;

}


#game #dealerSpeechText{

    display:block;

    animation:

    dealerReactionFade 0.5s ease;

}



@keyframes dealerReactionFade{


    from{

        opacity:0;

        transform:translateY(10px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}
#game #dealerMood{

    transition:0.3s;

    font-weight:bold;

}
/* =========================
AI DEALER TEST CENTER
========================= */

#dealerTestCenter{

margin:25px auto;

padding:18px;

width:95%;

max-width:600px;

background:#151515;

border:2px solid #d4af37;

border-radius:18px;

text-align:center;

}

#dealerTestCenter h2{

color:#ffd700;

margin-bottom:15px;

font-size:22px;

}

.dealerTestButtons{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:10px;

}

.dealerTestButtons button{

padding:12px;

font-size:16px;

font-weight:bold;

border:none;

border-radius:12px;

cursor:pointer;

background:#333;

color:white;

transition:.25s;

}

.dealerTestButtons button:hover{

background:#d4af37;

color:black;

}
#achievementTestPanel{
    height:auto !important;
    min-height:0 !important;
    max-height:300px !important;
    overflow:hidden !important;
}
/* =========================
   LOBBY SCREEN ALIGNMENT
========================= */

#lobbyScreen{

    width:100%;

    text-align:center;

}
/* ==========================
   GAME MODE
========================== */

#gameModePanel{

    width:320px;

    margin:10px auto 20px;

    padding:10px;

    text-align:center;

    border:1px solid #d4af37;

    border-radius:14px;

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

    color:#fff;

    font-weight:bold;

    letter-spacing:1px;

    box-shadow:0 0 15px rgba(212,175,55,.25);

}
/* ==========================
   PI STAKING PANEL
========================== */

#piStakingPanel{

    width:100%;

    margin-top:20px;

    padding:18px;

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

    border:1px solid #d4af37;

    border-radius:14px;

    color:white;

    box-sizing:border-box;

}

#piStakingPanel h3{

    margin-top:0;

    color:#d4af37;

    text-align:center;

}
/* ==========================
   STAKE BUTTON
========================== */

#stakeBtn{

    width:100%;

    margin-top:18px;

    padding:14px;

    font-size:17px;

    font-weight:bold;

    color:white;

    background:
    linear-gradient(
        90deg,
        #d4af37,
        #b8860b
    );

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

}

#stakeBtn:hover{

    transform:scale(1.02);

    box-shadow:
    0 0 18px rgba(212,175,55,.45);

}

#viewContractBtn{

    width:100%;

    margin-top:10px;

    padding:14px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:17px;

    font-weight:bold;

    color:white;

    background:#3a3a3a;

    transition:.25s;

}

#viewContractBtn:hover{

    background:#555;

}
/* ==========================
   CASINO MODAL
========================== */

#casinoModal{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    display:none;

    justify-content:center;
    align-items:center;

    box-sizing:border-box;

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

    z-index:999999;

}

#casinoModalBox{

    width:300px;

    max-width:80%;

    padding:15px;

    border-radius:20px;

    background:#1d1d1d;

    border:2px solid #d4af37;

}

#casinoModalTitle{

    font-size:20px;

    color:#ffd700;

    text-align:center;

    margin-bottom:10px;

}

#casinoModalBody{

    color:white;

    line-height:1.8;

    text-align:center;

    max-height:60vh;

    overflow-y:auto;

    padding-right:6px;

    box-sizing:border-box;

}

#casinoModalButtons{

    margin-top:25px;

    text-align:center;

}

#casinoModalButtons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:25px;

}

#casinoCancelBtn,
#casinoConfirmBtn{

    width:120px;

    height:40px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:bold;

}

#casinoCancelBtn{

    background:#555;

    color:white;

}

#casinoConfirmBtn{

    background:#d4af37;

    color:black;

}
/* ==========================
   STAKING MODAL
========================== */

.stakeDealer{

font-size:30px;

text-align:center;

margin-bottom:15px;

color:#ffd700;

}

.stakeWelcome{

text-align:center;

font-size:20px;

margin-bottom:20px;

color:white;

}

.stakeRow{

margin-top:12px;

margin-bottom:8px;

font-weight:bold;

color:#ffd700;

}

#stakeAmountInput{

width:100%;

padding:12px;

font-size:18px;

border-radius:10px;

border:none;

margin-top:10px;

margin-bottom:15px;

background:#2b2b2b;

color:white;

box-sizing:border-box;

}
/* =====================================
   CONTRACT CREATED CARD
===================================== */

.contractCreated{

    padding:20px;

    text-align:center;

    background:

    rgba(255,255,255,0.08);


    border:

    1px solid #d4af37;


    border-radius:20px;


    box-shadow:

    0 0 25px rgba(212,175,55,0.35);


}


.contractCreated hr{

    border:

    0;

    border-top:

    1px solid rgba(212,175,55,0.5);

    margin:

    15px 0;

}


.contractCreated strong{

    color:#ffd700;

    font-size:20px;

}


.contractCreated b{

    color:white;

    font-size:18px;

}
/* =====================================================
   V6.3 FINAL
   DEALER ANIMATION ENGINE
===================================================== */

/* =========================
   IDLE (숨쉬기)
========================= */

.dealerIdle{

    animation:
    dealerIdleAnimation 3.5s ease-in-out infinite;

}

@keyframes dealerIdleAnimation{

    0%{

        transform:
        translateY(0px)
        scale(1);

    }

    50%{

        transform:
        translateY(-6px)
        scale(1.015);

    }

    100%{

        transform:
        translateY(0px)
        scale(1);

    }

}

/* =========================
   BLINK
========================= */

.dealerBlink{

    animation:
    dealerBlinkAnimation .18s linear;

}

@keyframes dealerBlinkAnimation{

    0%{

        transform:
        scaleY(1);

    }

    50%{

        transform:
        scaleY(.03);

    }

    100%{

        transform:
        scaleY(1);

    }

}

/* =========================
   THINKING
========================= */

.dealerThinking{

    animation:
    dealerThinkingAnimation .8s ease-in-out infinite alternate;

}

@keyframes dealerThinkingAnimation{

    from{

        transform:
        rotate(-2deg);

    }

    to{

        transform:
        rotate(2deg);

    }

}

/* =========================
   JACKPOT
========================= */

.dealerCelebrate{

    animation:
    dealerCelebrateAnimation .5s ease-in-out infinite;

}

@keyframes dealerCelebrateAnimation{

    0%{

        transform:
        scale(1);

    }

    50%{

        transform:
        scale(1.06);

    }

    100%{

        transform:
        scale(1);

    }

}
/* =================================
   V6.3 FINAL PREMIUM DICE
================================= */

.diceBox span{

    width:100px;

    height:100px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:68px;

    font-weight:bold;

    background:
    linear-gradient(
        145deg,
        #ffffff,
        #e8e8e8
    );

    border:3px solid #d4af37;

    border-radius:20px;

    color:#111;

    box-shadow:
        0 8px 18px rgba(0,0,0,.35),
        inset 0 2px 3px rgba(255,255,255,.7),
        0 0 12px rgba(212,175,55,.25);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


/* Hover */

.diceBox span:hover{

    transform:

        translateY(-5px)

        scale(1.05);

}


/* Roll Animation */

.diceRolling{

    animation:

        diceRolling .12s linear infinite;

}


@keyframes diceRolling{

    0%{

        transform:
        rotate(0deg)
        scale(1);

    }

    25%{

        transform:
        rotate(90deg)
        scale(1.08);

    }

    50%{

        transform:
        rotate(180deg)
        scale(.95);

    }

    75%{

        transform:
        rotate(270deg)
        scale(1.08);

    }

    100%{

        transform:
        rotate(360deg)
        scale(1);

    }

}
/* =========================
   DICE LANDING
========================= */

.diceLanding{

    animation:

        diceBounce .35s ease;

}

@keyframes diceLanding{

    0%{

        transform:
        scale(1.18);

    }

    50%{

        transform:
        scale(.92);

    }

    100%{

        transform:
        scale(1);

    }

}
/* =====================================================
   V6.3 DEALER SPEECH ANIMATION
===================================================== */

#dealerSpeechBubble.show{

    opacity:1;

    transform:translateX(-50%);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

}


#dealerSpeechBubble.hide{

    opacity:0;

    transform:translate(-75px,20px);

}


#dealerSpeechBubble.show{

    opacity:1;

    transform:translate(-75px,0);

}

/* =====================================================
   314X JACKPOT FLASH
===================================================== */

#jackpotFlash{

    position:fixed;

    inset:0;

    background:rgba(255,215,0,0.75);

    opacity:0;

    pointer-events:none;

    z-index:99999;

    transition:opacity .25s;

}

#jackpotFlash.show{

    opacity:1;

}
/* =====================================================
   V6.4 PREMIUM GLASS PANEL
===================================================== */

.glassPanel{

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:22px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.35);

}
@keyframes stageLight{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}
/* =====================================================
   V6.4 PREMIUM DICE
===================================================== */

#d1,
#d2,
#d3,
#d4{

    width:90px;

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:56px;

    border-radius:20px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.95),

        rgba(235,235,235,.82)

    );

    color:#222;

    border:2px solid #d4af37;

    box-shadow:

        0 8px 20px rgba(0,0,0,.35),

        inset 0 2px 4px rgba(255,255,255,.9);

    transition:

        transform .18s,

        box-shadow .18s;

}
#d1:hover,
#d2:hover,
#d3:hover,
#d4:hover{

    transform:

        translateY(-8px)

        scale(1.08);

    box-shadow:

        0 0 25px gold,

        0 12px 24px rgba(0,0,0,.4);

}
@keyframes diceBounce{

    0%{

        transform:

            scale(.8);

    }

    40%{

        transform:

            scale(1.18);

    }

    70%{

        transform:

            scale(.95);

    }

    100%{

        transform:

            scale(1);

    }

}
/* =====================================
   DEALER RELATIONSHIP HUD
===================================== */

#dealerRelationshipBox{

transform:translateX(-100px);

    margin-top:12px;

    color:#ffd700;

    font-size:15px;

    font-weight:bold;

    text-align:center;

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

}
/* =====================================
   DEALER ENTRANCE
===================================== */

@keyframes dealerEntrance{

    0%{

        opacity:0;

        transform:
        translateY(40px)
        scale(.95);

    }

    100%{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

.dealerEntrance{

    animation:
    dealerEntrance
    .8s
    ease-out;

}
/* =====================================
   DEALER LEAN
===================================== */

@keyframes dealerLean{

    0%{

        transform:
        scale(1)
        translateY(0)
        rotate(0deg);

    }


    35%{

        transform:
        scale(1.12)
        translateY(-8px)
        rotate(-2deg);

    }


    65%{

        transform:
        scale(1.08)
        translateY(2px)
        rotate(1deg);

    }


    100%{

        transform:
        scale(1)
        translateY(0)
        rotate(0deg);

    }

}


.dealerLean{

    animation:
    dealerLean
    .65s
    cubic-bezier(.25,.8,.25,1);

    transform-origin:center center;

}

/* =====================================
   V6.7 COIN BURST EFFECT
===================================== */

.rewardCoin{

    position:fixed;

    left:50%;
    top:55%;

    font-size:28px;

    pointer-events:none;

    z-index:9999;

    opacity:1;

    animation:
    rewardCoinBurst
    .9s
    ease-out
    forwards;

}

@keyframes rewardCoinBurst{

    0%{

        opacity:1;

        transform:
        translate(-50%, -50%)
        translate(0, 0)
        scale(.6)
        rotate(0deg);

    }

    70%{

        opacity:1;

        transform:
        translate(-50%, -50%)
        translate(
            var(--coin-x),
            var(--coin-y)
        )
        scale(1.2)
        rotate(240deg);

    }

    100%{

        opacity:0;

        transform:
        translate(-50%, -50%)
        translate(
            var(--coin-x),
            calc(var(--coin-y) + 40px)
        )
        scale(.8)
        rotate(360deg);

    }

}
/* =====================================
   JACKPOT GOLD FLASH
===================================== */

#goldFlash{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:

    radial-gradient(

        circle,

        rgba(255,230,120,.95),

        rgba(255,215,0,.75),

        rgba(255,180,0,0)

    );

    opacity:0;

    pointer-events:none;

    z-index:9998;

}

#goldFlash.show{

    animation:

    goldFlash

    .8s ease;

}

@keyframes goldFlash{

    0%{

        opacity:0;

    }

    20%{

        opacity:1;

    }

    60%{

        opacity:.7;

    }

    100%{

        opacity:0;

    }

}
/* =====================================
   GOLD RAIN
===================================== */

.goldRain{

    position:fixed;

    top:-40px;

    font-size:26px;

    pointer-events:none;

    z-index:9999;

    animation:
    goldRain 2.8s linear forwards;

}

@keyframes goldRain{

    from{

        transform:
        translateY(-50px)
        rotate(0deg);

        opacity:1;

    }

    to{

        transform:
        translateY(110vh)
        rotate(720deg);

        opacity:0;

    }

}
/* =====================================
   SCREEN SHAKE
===================================== */

@keyframes screenShake{

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

    20%{transform:translate(-4px,2px);}

    40%{transform:translate(4px,-2px);}

    60%{transform:translate(-3px,3px);}

    80%{transform:translate(3px,-2px);}

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

}

.screenShake{

    animation:
    screenShake
    .45s;
}
/* =====================================
   WIN BANNER
===================================== */

#winBanner{

    position:absolute;

    left:50%;

    top:45%;

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

    min-width:320px;

    padding:20px;

    border-radius:16px;

    background:rgba(20,20,20,.88);

    border:2px solid gold;

    text-align:center;

    color:#fff;

    opacity:0;

    pointer-events:none;

    transition:all .35s ease;

    z-index:9999;

}

#winBanner.show{

    opacity:1;

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

}

#winBannerTitle{

    font-size:34px;

    font-weight:bold;

    color:#ffd700;

}

#winBannerReward{

    margin-top:10px;

    font-size:22px;

    color:#ffffff;

}
/* =========================
   ACHIEVEMENT MODAL
   V7.0
========================= */


#achievementModal{

    display:none;

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,0.75);

    justify-content:center;

    align-items:center;

    z-index:9999;

    pointer-events:auto;

}


#achievementModal.show{

    display:flex;

}


#achievementBox{

    width:320px;

    padding:30px;

    background:#111;

    border:2px solid #d4af37;

    border-radius:15px;

    text-align:center;

    color:white;

    position:relative;

    pointer-events:auto;

}


#achievementList{

    margin:20px;

    line-height:2;

    font-size:18px;

}
/* =========================
   ACHIEVEMENT MENU GAP FIX
========================= */

#achievementArea{

    margin:0;

    padding:0;

}
#achievementArea{

    margin-top:0;
    margin-bottom:0;
    padding:0;

}
#dealerArea{

    margin-top:0;

}
.achievementCard{

    padding:12px;

    margin:8px 0;

    border:1px solid #d4af37;

    border-radius:10px;

    cursor:pointer;

}
/* =========================
   PAYMENT MODE DISPLAY
   V7.5
========================= */

#gameModeText{

    font-size:22px;

    font-weight:bold;

    letter-spacing:1px;

    padding:8px 18px;

    border-radius:20px;

    display:inline-block;

}
/* =====================================
   V7.5 PAYMENT MODE HUD
===================================== */

#gameModeIcon{

    font-size:22px;

    margin-right:6px;

}


#gameModeText{

    font-size:15px;

    font-weight:700;

    letter-spacing:0.5px;

    padding:5px 10px;

    margin-left:5px;

    margin-right:5px;

    text-align:center;

    border-radius:18px;

    display:inline-block;

    white-space:nowrap;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.25);

}
/* GAME MODE FLEX FIX */

#gameModeIcon,
#gameModeText{

    flex-shrink:0;

}
/* GAME MODE COMPACT */

#gameModePanel{

    flex-shrink:1;

    min-width:0;

}


#gameModeText{

    font-size:14px;

    letter-spacing:0.5px;

}
/* GAME MODE ALIGN FIX */

#gameModePanel{

    box-sizing:border-box;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:2px;

}


#gameModeText{

    white-space:nowrap;

    font-size:15px;

}
/* GAME MODE ICON ALIGN */

#gameModeIcon{

    margin-right:2px;

}


#gameModeText{

    margin-left:-18px;

    white-space:nowrap;

}
/* =================================
   HUD BOX HORIZONTAL ALIGNMENT
================================= */

/* =================================
V6.3 PREMIUM HUD
================================= */

#playerHUD{

    width:96%;

    margin:10px auto;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:5px;

    flex-wrap:nowrap;

}

/* =================================
   POINT CONVERT BOX
   V7.5 UI CLEANUP
================================= */

.convertBox{

    width:96%;

    max-width:407px;

    margin:20px auto;

    padding:22px;

    box-sizing:border-box;

    text-align:center;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(212,175,55,0.35);

    border-radius:18px;

    box-shadow:
        0 0 18px rgba(212,175,55,0.15);

}

.convertBox h3{

    margin:0 0 12px 0;

}

.convertBox hr{

    margin:16px 0;

    border:0;

    border-top:1px solid rgba(212,175,55,0.35);

}

.convertBox .convertValue{

    margin:8px 0 14px 0;

    font-weight:bold;

}

.convertBox input{

    width:90%;

    max-width:280px;

    box-sizing:border-box;

    margin:8px auto 14px auto;

}

.convertBox button{

    margin:10px 4px 0 4px;

}
/* =========================
   PAYMENT BOX
   V7.5 UI
========================= */

.paymentBox{

    width:96%;

    max-width:407px;

    margin:6px auto;

    padding:8px 18px;

    box-sizing:border-box;

    text-align:center;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(212,175,55,0.35);

    border-radius:14px;

}

.paymentTitle{
    margin-bottom:0px;
    padding-bottom:0px;
    font-size:18px;
    font-weight:bold;
}

.paymentBox label{

    display:inline-flex;

    align-items:center;

    margin:4px 10px;

    cursor:pointer;

}
/* TOTAL REWARD 위치 미세 조정 */
#rewardMessage{
    position:relative;
}

#rewardMessage hr{
    margin:0 0 4px 0;
}

#rewardMessage{
    line-height:1.4;
}

/* =========================
   TOTAL REWARD POSITION
   Visual move only
========================= */

.totalRewardMove{

    display:block;

    position:relative;

    top:-15px;

}
/* PI STAKING POINT 한 줄 표시 */
.hudLabel{
    white-space: nowrap;
}
/* =====================================================
   V8.0 DEALER GAME CLOSE-UP
===================================================== */

#dealerGameImage{

    width:100%;

    max-width:520px;

    height:auto;

    transform-origin:center bottom;

    transition:
        opacity .25s ease,
        transform .35s ease,
        filter .25s ease;

    filter:
        drop-shadow(
            0 0 18px
            rgba(255,215,0,.45)
        );
}
/* =====================================================
   V6.3 LOBBY / GAME SCREEN SEPARATION
   ===================================================== */

#gameScreen {
    display: flex;
    flex-direction: column;
}


#startScreen {
    display: flex;
}


body.game-active #startScreen {
    display: none !important;
}


body.game-active #gameScreen {
    display: flex !important;
    flex-direction: column;
}

/* =========================================
   DEALER TALKING ZOOM
========================================= */

.dealerTalking{

    transform:scale(1.03);

    transition:.35s;

}
/* =========================
NUMBER BET ACTIVE
V8.0
========================= */


.numberSelectBtn.activeBet{

    border:2px solid gold;

    box-shadow:
    0 0 10px gold;

}

/* =========================
   V8.0 ROUND STATUS
========================= */

#roundStatusArea{

    font-size:18px;

    font-weight:bold;

    white-space:nowrap;

transform:translateX(10px);

}


/* BETTING OPEN */

#roundStatusArea.betting{

    color:#00ff99;

}


/* DEALER ROLLING */

#roundStatusArea.rolling{

    color:#00aaff;

}

/* =========================================
   V8.0 MISSING ROUND
   강제 세로 2줄 표시
   ========================================= */

#payTable td.missingRoundCell{

    display:table-cell !important;

    vertical-align:middle !important;

    white-space:normal !important;

    padding:6px !important;

}


/* 각각의 미출현 회차를 한 줄씩 */

#payTable td.missingRoundCell
.missingRoundValue{

    display:block !important;

    width:100% !important;

    line-height:1.15 !important;

    white-space:nowrap !important;

    text-align:center !important;

}


/* 혹시 기존 inline 스타일이 있더라도 세로 유지 */

#payTable td.missingRoundCell
span.missingRoundValue{

    float:none !important;

    position:static !important;

}

/* =====================================================
   V8.0 GAME PLAY SCREEN ORDER
   DEALER → DICE → RESULT → PAY TABLE
===================================================== */

/* TOP AREA */

#gameTopBar{
    order:-10;
}

#topHUD{
    order:-9;
}

#roundPanel{
    order:-8;
}


/* GAME PLAY */

#dealerSection{
    order:-7;
}

#rollSection{
    order:-6;
}

#popupLayer{
    order:-5;
}


/* SECONDARY PANELS
   게임 플레이 이후 */

#gameTitle{
    order:10;
}

#playerSection{
    order:11;
}

#unlockPanel{
    order:12;
}

#achievementPanel{
    order:13;
}

#rewardPanel{
    order:14;
}

#developerPanel{
    order:15;
}
/* =====================================================
   V8.0 ROLL SECTION DETAIL ORDER
   DICE → SPIN → BET → PAYMENT → RESULT
===================================================== */

#rollSection{
    display:flex;
    flex-direction:column;
    align-items:center;
}


/* 1. DICE */

#rollSection .diceBox{
    order:1;
}


/* 2. SPIN */

#rollSection #rollBtn{
    order:2;
}


/* 3. LOW / MID / HIGH */

#rollSection .betBox{
    order:3;
}


/* 4. PAYMENT */

#rollSection .paymentBox{
    order:4;
}


/* 5. DICE RESULT */

#rollSection .diceResult{
    order:5;
}


/* 6. RESULT PANEL */

#rollSection #resultPanel{
    order:6;
}


/* 나머지 하단 메뉴 */

#rollSection #claimArea{
    order:7;
}

#rollSection #settingsArea{
    order:8;
}

#rollSection #achievementArea{
    order:9;
}

#rollSection #dealerArea{
    order:10;
}

#rollSection #helpArea{
    order:11;
}

/* ABOUT BUTTON */

#rollSection > button:not(#rollBtn):not(#autoBetBtn){

    order:12;

}

/* =====================================================
   V8.0 PREMIUM 3D DICE
===================================================== */

.diceBox{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:0px;

}


.diceBox span{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
        145deg,
        #ffffff,
        #dddddd
    );


    color:#111;


    font-size:0;


    border-radius:18px;


    border:none;


    box-shadow:

    inset 0 5px 10px rgba(255,255,255,.8),

    0 8px 18px rgba(0,0,0,.5);


    position:relative;


    transform-style:preserve-3d;


}


/* 주사위 점 표현 */

.diceBox span::after{

    content:"";

    width:18px;

    height:18px;

    background:#111;

    border-radius:50%;

    box-shadow:
    0 0 8px rgba(0,0,0,.4);

}

/* =====================================================
   V8.0 DICE DOT SYSTEM
===================================================== */

.diceBox span{
    overflow:hidden;
}


.dotArea{

    width:100%;

    height:100%;

    position:relative;

}


/* 기본 점 */

.dot{

    width:16px;

    height:16px;

    background:#111;

    border-radius:50%;

    position:absolute;

}


/* 위치 */

.dot1{
    top:15%;
    left:15%;
}

.dot2{
    top:15%;
    right:15%;
}

.dot3{
    top:42%;
    left:42%;
}

.dot4{
    bottom:15%;
    left:15%;
}

.dot5{
    bottom:15%;
    right:15%;
}

.dot6{
    top:42%;
    left:15%;
}

.dot7{
    top:42%;
    right:15%;
}


/* 숫자별 표시 */

.dice-1 .dot{
    display:none;
}

.dice-1 .dot3{
    display:block;
}


.dice-2 .dot1,
.dice-2 .dot5{
    display:block;
}


.dice-3 .dot1,
.dice-3 .dot3,
.dice-3 .dot5{
    display:block;
}


.dice-4 .dot1,
.dice-4 .dot2,
.dice-4 .dot4,
.dice-4 .dot5{
    display:block;
}


.dice-5 .dot1,
.dice-5 .dot2,
.dice-5 .dot3,
.dice-5 .dot4,
.dice-5 .dot5{
    display:block;
}


.dice-6 .dot1,
.dice-6 .dot2,
.dice-6 .dot4,
.dice-6 .dot5,
.dice-6 .dot6,
.dice-6 .dot7{
    display:block;
}

/* =====================================================
   V8.0 PREMIUM DICE ROLL ANIMATION
===================================================== */


.diceBox.rolling span{

    animation:none !important;

}


/* 주사위 회전 */

@keyframes diceRoll{

    0%{

        transform:
        scale(.72)
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg)
        translateY(0);

    }


    25%{

        transform:
        scale(.72)
        rotateX(90deg)
        rotateY(90deg)
        rotateZ(45deg)
        translateY(-8px);

    }


    50%{

        transform:
        scale(.72)
        rotateX(180deg)
        rotateY(180deg)
        rotateZ(90deg)
        translateY(0);

    }


    75%{

        transform:
        scale(.72)
        rotateX(270deg)
        rotateY(270deg)
        rotateZ(135deg)
        translateY(-8px);

    }


    100%{

        transform:
        scale(.72)
        rotateX(360deg)
        rotateY(360deg)
        rotateZ(180deg)
        translateY(0);

    }

}


/* 결과 확정 순간 */

.diceBox.resultFlash span{

    animation:

    diceFlash 0.6s ease;

}


@keyframes diceFlash{


    0%{

        box-shadow:
        0 0 0 rgba(212,175,55,0);

    }


    50%{

        box-shadow:

        0 0 35px rgba(212,175,55,.9);

    }


    100%{

        box-shadow:

        0 0 15px rgba(212,175,55,.3);

    }

}

/* =====================================================
   V8.0 PREMIUM DICE ROLL EFFECT
===================================================== */


.diceRolling{

    animation:
    diceSpin 0.25s linear infinite;

}

@keyframes diceSpin{


    0%{

        transform:
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg)
        translateY(0);

    }


    20%{

        transform:
        rotateX(120deg)
        rotateY(80deg)
        rotateZ(90deg)
        translateY(-15px)
        scale(1.12);

    }


    40%{

        transform:
        rotateX(220deg)
        rotateY(180deg)
        rotateZ(180deg)
        translateY(0)
        scale(1.05);

    }


    60%{

        transform:
        rotateX(300deg)
        rotateY(260deg)
        rotateZ(270deg)
        translateY(-15px)
        scale(1.12);

    }


    80%{

        transform:
        rotateX(420deg)
        rotateY(330deg)
        rotateZ(330deg)
        translateY(0);

    }


    100%{

        transform:
        rotateX(540deg)
        rotateY(360deg)
        rotateZ(360deg)
        translateY(0);

    }

}

/* =====================================================
   V8.0 DICE RESULT FLASH
===================================================== */


.diceResultFlash{

    animation:
    diceResultGlow
    0.7s
    ease;


}


@keyframes diceResultGlow{


    0%{

        box-shadow:
        0 0 0 rgba(212,175,55,0);

        transform:
        scale(1);

    }


    40%{

        box-shadow:

        0 0 45px
        rgba(212,175,55,.95);

        transform:
        scale(1.12);

    }


    100%{

        box-shadow:

        0 0 15px
        rgba(212,175,55,.3);

        transform:
        scale(1);

    }

}
/* =====================================================
   V8.0 SPECIAL DICE EFFECT
===================================================== */


/* 고배당 주사위 */

.diceHighWin span{

    animation:

    highDiceGlow
    1s
    infinite alternate;

}


@keyframes highDiceGlow{


    from{

        box-shadow:

        0 0 15px
        rgba(212,175,55,.5);

    }


    to{

        box-shadow:

        0 0 55px
        rgba(255,215,0,1);

    }

}



/* 314X JACKPOT */

.diceJackpot span{


    background:

    linear-gradient(
        145deg,
        #fff8b0,
        #d4af37
    );


    border-color:

    #fff;


    animation:

    jackpotDice
    .6s
    infinite alternate;


}


@keyframes jackpotDice{


    from{

        transform:
        scale(1);

    }


    to{

        transform:
        scale(1.15);

    }

}

/* =====================================
   V8.0 LUXURY CASINO DICE
===================================== */


.diceBox span{


    width:90px;

    height:90px;


    display:flex;

    justify-content:center;

    align-items:center;


    position:relative;


    background:

    linear-gradient(
        145deg,
        #ffffff 0%,
        #eeeeee 45%,
        #cfcfcf 100%
    );


    border-radius:22px;


    border:

    3px solid #d4af37;


    box-shadow:


    inset 8px 8px 15px
    rgba(255,255,255,.9),


    inset -10px -10px 18px
    rgba(0,0,0,.25),


    0 15px 25px
    rgba(0,0,0,.55);


    transform-style:preserve-3d;


}



/* 위쪽 유리 반사 */

.diceBox span::before{


    content:"";


    position:absolute;


    top:6px;

    left:10px;


    width:45px;

    height:18px;


    background:

    rgba(255,255,255,.55);


    border-radius:50%;


    transform:

    rotate(-25deg);


    filter:blur(2px);


}



/* 점 */

.dot{


    width:15px;

    height:15px;


    background:

    radial-gradient(
        circle at 35% 35%,
        #555,
        #000
    );


    box-shadow:


    inset 2px 2px 3px
    rgba(255,255,255,.35),


    0 2px 4px
    rgba(0,0,0,.6);


}

/* =====================================
   V8.0 PREMIUM IMAGE DICE
===================================== */

.premiumDice{

    width:92px;

    height:92px;

    object-fit:cover;

    filter:

    drop-shadow(
        0 12px 15px
        rgba(0,0,0,.6)
    );


    transition:

    transform .3s ease;

}


.diceRolling .premiumDice{

    animation:

    premiumDiceRoll
    .35s
    linear
    infinite;

}



@keyframes premiumDiceRoll{


    0%{

        transform:
        rotate(0deg)
        scale(1);

    }


    50%{

        transform:
        rotate(180deg)
        scale(1.12);

    }


    100%{

        transform:
        rotate(360deg)
        scale(1);

    }

}


/* =================================
   V8.2 REAL CASINO DICE ROLL
   FINAL TEST VERSION
================================= */


/* DICE ANIMATION SPEED */

#d1.diceRolling{

    animation:
    dicePath1
    1.5s
    ease-out
    infinite;

}


#d2.diceRolling{

    animation:
    dicePath2
    1.5s
    ease-out
    infinite;

}


#d3.diceRolling{

    animation:
    dicePath3
    1.5s
    ease-out
    infinite;

}


#d4.diceRolling{

    animation:
    dicePath4
    1.5s
    ease-out
    infinite;

}



/* =========================
   DICE 1 RIGHT ROLL
========================= */

@keyframes dicePath1{


0%{

transform:
translate(0,0)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg);

}


20%{

transform:
translate(25px,8px)
rotateX(120deg)
rotateY(20deg)
rotateZ(10deg);

}


40%{

transform:
translate(55px,0)
rotateX(240deg)
rotateY(40deg)
rotateZ(20deg);

}


60%{

transform:
translate(80px,6px)
rotateX(360deg)
rotateY(60deg)
rotateZ(30deg);

}


80%{

transform:
translate(45px,0)
rotateX(480deg)
rotateY(80deg)
rotateZ(40deg);

}


100%{

transform:
translate(0,0)
rotateX(600deg)
rotateY(100deg)
rotateZ(50deg);

}

}




/* =========================
   DICE 2 LEFT ROLL
========================= */

@keyframes dicePath2{


0%{

transform:
translate(0,0)
rotateX(0deg)
rotateY(0deg);

}


20%{

transform:
translate(-25px,8px)
rotateX(120deg)
rotateY(-20deg);

}


40%{

transform:
translate(-55px,0)
rotateX(240deg)
rotateY(-40deg);

}


60%{

transform:
translate(-80px,6px)
rotateX(360deg)
rotateY(-60deg);

}


80%{

transform:
translate(-45px,0)
rotateX(480deg)
rotateY(-80deg);

}


100%{

transform:
translate(0,0)
rotateX(600deg)
rotateY(-100deg);

}

}




/* =========================
   DICE 3 DIAGONAL ROLL
========================= */

@keyframes dicePath3{


0%{

transform:
translate(0,0)
rotateY(0deg)
rotateZ(0deg);

}


20%{

transform:
translate(25px,10px)
rotateY(120deg)
rotateZ(20deg);

}


40%{

transform:
translate(60px,5px)
rotateY(240deg)
rotateZ(40deg);

}


60%{

transform:
translate(90px,10px)
rotateY(360deg)
rotateZ(60deg);

}


80%{

transform:
translate(45px,5px)
rotateY(480deg)
rotateZ(80deg);

}


100%{

transform:
translate(0,0)
rotateY(600deg)
rotateZ(100deg);

}

}





/* =========================
   DICE 4 FINAL ROLL
========================= */

@keyframes dicePath4{


0%{

transform:
translate(0,0)
rotateX(0deg)
rotateZ(0deg);

}


20%{

transform:
translate(-30px,10px)
rotateX(150deg)
rotateZ(-20deg);

}


40%{

transform:
translate(-70px,0)
rotateX(300deg)
rotateZ(-40deg);

}


60%{

transform:
translate(-100px,10px)
rotateX(500deg)
rotateZ(-60deg);

}


80%{

transform:
translate(-50px,5px)
rotateX(700deg)
rotateZ(-80deg);

}


100%{

transform:
translate(0,0)
rotateX(900deg)
rotateZ(-100deg);

}

}


/* =====================================
   V8.0 REMOVE OLD DOT OVERLAY
===================================== */


.diceBox .dotArea,
.diceBox .dot,
.diceBox .dot1,
.diceBox .dot2,
.diceBox .dot3,
.diceBox .dot4,
.diceBox .dot5,
.diceBox .dot6,
.diceBox .dot7{

    display:none !important;

}

.diceBox span::before,
.diceBox span::after{

    display:none !important;

}



/* =====================================
   DICE LANDING BOUNCE
===================================== */


.diceLanding .premiumDice{


    animation:

    diceLandingBounce
    .22s
    ease-out;


}



@keyframes diceLandingBounce{


    0%{

        transform:
        scale(1.3);

    }


    50%{

        transform:
        scale(.9);

    }


    100%{

        transform:
        scale(1.3);

    }

}

/* =====================================
   V8.0 314X JACKPOT DICE EFFECT
===================================== */


.diceJackpot .premiumDice{


    animation:

    jackpotDiceGlow
    1s
    ease-in-out
    infinite alternate;


    filter:

    drop-shadow(
        0 0 20px
        rgba(255,215,0,1)
    )

    drop-shadow(
        0 0 45px
        rgba(255,180,0,.8)
    );


}



@keyframes jackpotDiceGlow{


    0%{

        transform:

        scale(1.3)
        rotate(0deg);

    }


    100%{

        transform:

        scale(1.45)
        rotate(8deg);

    }

}

.diceJackpot{


    position:relative;


}



.diceJackpot::before{


    content:"";


    position:absolute;


    inset:-25px;


    background:

    radial-gradient(
        circle,
        rgba(255,215,0,.45),
        transparent 70%
    );


    animation:

    jackpotAura
    1.2s
    infinite;


    pointer-events:none;


}



@keyframes jackpotAura{


    0%{

        opacity:.3;

        transform:
        scale(.8);

    }


    50%{

        opacity:1;

        transform:
        scale(1.2);

    }


    100%{

        opacity:.3;

        transform:
        scale(.8);

    }

}

/* =====================================
   V8.0 RESULT PREMIUM EFFECT
===================================== */


.resultJackpot{


    border-color:#ffd700 !important;


    box-shadow:

    0 0 35px
    rgba(255,215,0,1),

    0 0 80px
    rgba(255,180,0,.7);


    animation:

    resultJackpotPulse
    1s
    infinite alternate;


}



@keyframes resultJackpotPulse{


    from{

        transform:
        scale(1);

    }


    to{

        transform:
        scale(1.04);

    }

}



.resultBigWin{


    box-shadow:

    0 0 35px
    rgba(255,215,0,.8);

}

/* =====================================
   V8.0 314X JACKPOT SCREEN FLASH
===================================== */


.jackpotFlash{


    animation:

    jackpotFlash
    .8s
    ease;


}



@keyframes jackpotFlash{


    0%{

        box-shadow:
        inset 0 0 0 rgba(255,215,0,0);


    }


    25%{

        box-shadow:

        inset 0 0 120px
        rgba(255,215,0,.9);


    }


    50%{

        box-shadow:

        inset 0 0 200px
        rgba(255,180,0,.7);


    }


    100%{

        box-shadow:

        inset 0 0 0 rgba(255,215,0,0);


    }

}

/* =====================================
   V8.0 PREMIUM DICE ENTRANCE
===================================== */


.diceEntrance .premiumDice{


    animation:

    diceDropIn
    .45s
    cubic-bezier(.2,1.5,.5,1)
    forwards;


}



@keyframes diceDropIn{


    0%{


        opacity:0;


        transform:

        translateY(-80px)
        rotateX(180deg)
        scale(.5);


    }



    60%{

    opacity:1;


    transform:

    translateY(10px)
    rotateX(20deg)
    scale(.95);

}



    100%{

    opacity:1;


    transform:

    translateY(0)
    rotateX(0deg)
    scale(1.0);


}

}

/* =====================================
   V8.0 PREMIUM DICE LANDING EFFECT
===================================== */


.diceLanding .premiumDice{


    animation:

    premiumDiceLanding
    .28s
    cubic-bezier(.25,1.5,.5,1);


}



@keyframes premiumDiceLanding{


    0%{


        transform:

        translateY(-20px)
        rotate(8deg)
        scale(.9);


    }


    45%{


        transform:

        translateY(8px)
        rotate(-5deg)
        scale(1.08);


    }


    70%{


        transform:

        translateY(-3px)
        rotate(2deg)
        scale(.98);


    }


    100%{


        transform:

        translateY(0)
        rotate(0deg)
        scale(1);


    }

}

/* =====================================
   DICE LANDING GOLD SPARK
===================================== */


.diceLanding{


    filter:

    drop-shadow(
        0 0 15px
        rgba(212,175,55,.8)
    );


}

/* =====================================
   V8.0 LAST DICE TENSION
===================================== */

.lastDiceRoll .premiumDice{

    animation:

    lastDiceSlowRoll
    2.8s
    cubic-bezier(.15,.8,.25,1)
    1
    forwards;

}

@keyframes lastDiceSlowRoll{


    0%{

        transform:
        rotate(0deg)
        scale(1);

    }


    50%{

        transform:
        rotate(180deg)
        scale(1.08);

    }


    100%{

        transform:
        rotate(360deg)
        scale(1);

    }

}

/* =====================================
   LAST DICE IMPACT SHAKE
===================================== */


.screenShake{


    animation:

    screenShake
    .35s
    ease;


}



@keyframes screenShake{


    0%{
        transform:translateX(0);
    }


    25%{
        transform:translateX(-8px);
    }


    50%{
        transform:translateX(8px);
    }


    75%{
        transform:translateX(-4px);
    }


    100%{
        transform:translateX(0);
    }

}

/* =========================
   V8.0 PAY TABLE RESULT HIGHLIGHT
   ========================= */

.payResultHighlight{

    animation:
    payResultFlash
    1s
    ease;

    background:
    rgba(212,175,55,0.35);

}


@keyframes payResultFlash{

    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.05);

    }


    100%{

        transform:scale(1);

    }

}

/* ================================
   MOBILE V8.1 RESOURCE HUD
================================ */

#topHUD .hudBox{

    padding:5px 10px;

    background:
    rgba(0,0,0,0.35);

    border:1px solid rgba(212,175,55,.5);

    border-radius:10px;

    color:white;

    font-size:14px;

    white-space:nowrap;

}

/* =========================================
   MOBILE V8.1 PREMIUM TOP LAYOUT
   HUD LEFT / STATUS RIGHT
========================================= */


/* 게임 화면 기준 위치 */

#gameScreen{

    position:relative;

}


/* =========================
   LEFT RESOURCE HUD
========================= */

#topHUD{

    position:absolute;

    top:10px;

    left:10px;


    width:auto;

    height:auto;

    margin:0;

    padding:3px;


    display:flex;

    flex-direction:column;

    gap:2px;


    z-index:50;

}



/* Credit / Reserve / PI / Point */

#topHUD .hudBox{


    padding:3px 8px;


    background:

    rgba(0,0,0,.35);


    border:

    1px solid rgba(212,175,55,.5);


    border-radius:8px;


    color:white;


    font-size:13px;


    white-space:nowrap;

line-height:1.1;

}



/* =========================
   RIGHT GAME STATUS
========================= */

#roundPanel{

    position:absolute;

    top:50px;

    right:1px;

    width:155px;

    max-width:155px;

    margin:0;

    padding:1px 3px;


    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:1px;


    z-index:50;


    background:transparent !important;


    border:none;


    border-radius:12px;


    color:white;

    font-size:12px;

}

#gameModePanel,
#roundPanel span,
#roundStatusArea{

    white-space:nowrap;

    line-height:1.2;

}

/* =================================
   MOBILE V8.1 STATUS SIZE CONTROL
================================= */


/* CREDIT MODE / BETTING */

#gameModePanel{

    font-size:11px;

    line-height:1.1;

}


#roundStatusArea{

    font-size:13px;

    line-height:1.2;

}



/* ROUND / CYCLE */

#roundText,
#cycleText{

    font-size:14px;

    font-weight:bold;

}


#roundValue,
#cycleValue{

    font-size:18px;

    font-weight:bold;

}



/* NEXT ROUND */

#roundTimerText{

    font-size:14px;

    font-weight:bold;

}


#roundTimer{

    font-size:18px;

    font-weight:bold;

}



/* 전체 높이 압축 */

#roundPanel{

    padding:0px 5px 2px 5px;

    gap:0px;

}

/* CREDIT MODE */

#gameModePanel{

    width:100px;

    margin-left:auto;

    text-align:right;

    color:#00ff88;

    font-weight:bold;

    font-size:10px !important;

    line-height:1;

    padding:1px 0px;

    transform:translate(32px,10px);

}

#gameModePanel{

    position:relative;

    top:0px;

}

#gameModePanel #gameModeText{

    font-size:12px !important;

    line-height:1;

}

/* =====================================
   MOBILE V8.1 DEALER CLEAN UI
===================================== */


/* Dealer Analysis 기본 숨김 */

#dealerAnalysisPanel{

    display:none;

}

#dealerSpeechBubble{

    left:-20px;

    top:-425px;

    width:120px;

    transform:translate(-115px,0);

    z-index:30;

}

#dealerSection{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

}

#dealerHeader{

    position:absolute;

    top:20px;

    right:180px;

    text-align:center;

    z-index:40;

}


#dealerRelationshipBox{

    position:absolute;

    left:20%;

    top:5%;

    transform:translateX(-50%);

    padding:2px 5px;

    font-size:12px;

    white-space:nowrap;

}

#dealerRelationshipBox{

    display:flex;

    align-items:center;

    gap:2px;

    white-space:nowrap;

}

/* =========================================
   MOBILE V8.1 DEALER IMAGE
========================================= */

#dealerGameImage{

    width:auto;

    height:320px;

    max-width:80vw;

    object-fit:contain;

}

/* =====================================
   MOBILE V8.1 DEALER FRAME
===================================== */

#dealerFrame{

    width:100%;

    max-width:520px;

    height:360px;

    min-height:360px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    overflow:visible;

    transform:none;

}

/* =====================================
   MOBILE V8.1 SOPHIA DEALER IMAGE
===================================== */

#dealerGameImage{

    width:auto;

    height:600px;

    max-width:85vw;

    object-fit:contain;

    object-position:center bottom;

}


/* =====================================
   MOBILE V8.1 DEALER CLEAN FRAME
===================================== */

#dealerSection{

    border:none;

    box-shadow:none;

}


#dealerFrame{

    border:none;

    box-shadow:none;

    border-radius:0;

}

/* =========================================
   MOBILE V8.1
   SOPHIA TABLE STAGE - SCALE UP
========================================= */

#dealerFrame{

    width:100%;

    max-width:1200px;

    height:448px;

    min-height:0;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    overflow:visible;

    border:none !important;

    box-shadow:none !important;

}


#dealerGameImage{

display:none;

    width:auto;

    height:620px;

    max-width:1200px;

    object-fit:contain;

    object-position:center bottom;

    transform:translateY(50px) !important;

}

#dealerFrame{

    position:relative;

    top:15px;

}

/* =========================================
   MOBILE V8.1
   DEALER STAGE BACKGROUND
========================================= */

#dealerSection{

    background:
        radial-gradient(
            ellipse at center,
            rgba(45,45,45,0.45) 0%,
            rgba(12,12,12,0.82) 55%,
            rgba(0,0,0,0.96) 100%
        );

    border:none !important;

    box-shadow:none !important;

    border-radius:0;

}

/* =========================================
   MOBILE V8.1
   DICE BOX → TABLE MODE
========================================= */

#rollSection .diceBox{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    border-radius:0;

    padding:0;

    margin:0;

}

#rollSection .diceBox::before{

    display:none !important;

}

/* =========================================
   MOBILE V8.1
   DICE → SOPHIA TABLE POSITION
========================================= */

#rollSection .diceBox{

    position:relative;

    z-index:30;

    height:80px;

    transform:translate(-35px, -80px)scaleX(0.85);

    pointer-events:none;
    
}

/* =========================================
   MOBILE V8.1
   DICE TABLE IDLE SCALE
========================================= */

#rollSection .diceBox span{

    transform:scale(.72);

    transform-origin:center center;

}


/* =========================================
   MOBILE V8.1
   DICE LANDING
========================================= */

#rollSection .diceBox.resultFlash span{

    animation:
        diceLanding .28s ease-out forwards;

}

@keyframes diceLanding{

    0%{

        transform:
            scale(.72)
            translateY(-6px);

    }

    55%{

        transform:
            scale(1.05)
            translateY(2px);

    }

    100%{

        transform:
            scale(1)
            translateY(0);

    }

}

/* =========================================
   MOBILE V8.1
   DICE TABLE CONTACT SHADOW
========================================= */

#rollSection .diceBox span{

    filter:
        drop-shadow(
            0 8px 8px
            rgba(0,0,0,.55)
        );

}

/* =========================================
   MOBILE V8.1
   REMOVE INDIVIDUAL DICE GOLD BORDER
========================================= */

#rollSection .diceBox span{

    border:none !important;

}

/* =========================================
   MOBILE V8.1
   REMOVE DICE WRAPPER BOX
========================================= */

#rollSection .diceBox span{

    background:transparent !important;

    border:none !important;

    box-shadow:none !important;

    border-radius:0;

}

/* MOBILE DEALER GAME NAME */

#dealerGameName{

    color:#ffd700;

    font-size:14px;

    font-weight:700;

    letter-spacing:0.5px;

    margin:0px 0;

    line-height:0.0;

transform:translateX(-90px);

margin-top:12px;

}

@media(max-width:600px){

.dealerPreview{

    width:100%;

    gap:4px;

    padding:8px;

    box-sizing:border-box;

}
.dealerPreview{

    border:2px solid #d4af37;

    border-radius:25px;

    box-shadow:
    0 0 40px rgba(212,175,55,0.35);

}

#returnLobbyBtn{

    position:relative;

    z-index:50;

}

#returnLobbyBtn{

    padding:8px 12px;

    font-size:13px;

}

}

@media (max-width: 600px){

    .casinoLogo h1{
        font-size:32px;
        letter-spacing:2px;
        margin:5px 0;
    }

    .casinoLogo h2{
        font-size:20px;
        letter-spacing:6px;
    }

    .casinoLogo p{
        margin-top:8px;
        font-size:14px;
        letter-spacing:2px;
    }

#dealerDescription{

    margin:0;
    padding:0;
    line-height:1.1;

}

#dealerEmotion{

    transform:translateX(-95px);

}

#touchStart{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

#dealerLobbyImage{

    object-fit:contain;
    object-position:center bottom;

}

.hudCard{

    flex:1;

    min-width:0;

    min-height:55px;

    font-size:12px;

    padding:3px 2px;

    box-sizing:border-box;

}

.hudCard:not(:has(#playerStake)){

    flex:0.8;

}

.hudCard:nth-child(1),
.hudCard:nth-child(2),
.hudCard:nth-child(4){

    flex:0.85;

}

.hudCard:nth-child(3){

    flex:1.15;

}

.hudLabel{

    font-size:12px;

    line-height:1.15;

 white-space:nowrap;
    
}


.hudValue{

    font-size:14px !important;

}


#playerHUD{

    justify-content:center;

    gap:4px;

    flex-wrap:nowrap;

}

#playerStake{

    font-size:13px !important;

}

#game{

    min-height:auto;

}

#roundPanel .roundItem:first-child{

    transform:translateX(30px);

}

#roundPanel .roundItem:nth-child(2){

    transform:translateX(35px);

}

#roundStatusText{

    display:inline-block;

    transform:translateX(20px);

    letter-spacing:-0.5px;

}

#roundText{

    font-size:12px !important;

}

#roundValue{

    font-size:14px !important;

}

#roundPanel .roundItem:nth-child(2) #cycleText{

    font-size:12px !important;

}

#roundPanel .roundItem:nth-child(2) #cycleValue{

    font-size:14px !important;

}

#roundStatusText{

    display:inline-block;

    font-size:12px !important;


}

#roundTimerText{

    font-size:12px !important;

}

#roundTimer{

    font-size:15px !important;

}

#topHUD .hudBox:last-child{

    font-size:13px !important;

    transform:translateX(-8px);

text-indent:-25px;

width:80px;

}

/* NEXT ROUND POSITION */

.nextRoundRow{

    transform:translateX(35px);

}

/* CREDIT CARD ADJUST */

.hudCard:nth-child(1){

    width:120px !important;

    min-height:60px !important;

    padding:5px !important;

}

#b100,
#b200,
#b500{

    font-size:16px !important;

}

#b100,
#b200,
#b500{

    width:95px !important;

    height:58px !important;

}

.diceResult{

    min-height:0 !important;

    height:90px !important;

}

.diceResult{

    min-height:0 !important;

    height:90px !important;

    line-height:1.2 !important;

}

#diceSum,
#diceMultiplier{

    position:relative;

    top:5px;

}

.diceResult{

    padding-bottom:0px !important;

}


}

/* MOBILE CASINO LOGO */

.casinoLogo h1{
    font-size:32px;
    letter-spacing:2px;
    margin:5px 0;
}

.casinoLogo h2{
    font-size:20px;
    letter-spacing:6px;
}

.casinoLogo p{
    margin-top:8px;
    font-size:14px;
    letter-spacing:2px;
}

#claimBtn{

    align-self:flex-end;

}

#claimBtn{

    margin-top:5px;

}

#claimBtn{

    position:relative;

    top:5px;

}

#claimBtn{

    display:block !important;

    position:relative;

    top:-1px;

    z-index:1000;

    opacity:1 !important;

    visibility:visible !important;

}

#claimBtn{

    background:linear-gradient(
        135deg,
        #ffd700,
        #ff9900
    ) !important;

    color:#111 !important;

    border:2px solid #ffe680 !important;

    border-radius:12px;

    font-weight:bold;

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

    animation:claimGlow 1.8s infinite;

}


@keyframes claimGlow{

    0%{

        box-shadow:
        0 0 5px rgba(255,215,0,.6);

    }


    50%{

        box-shadow:
        0 0 22px rgba(255,215,0,1);

    }


    100%{

        box-shadow:
        0 0 5px rgba(255,215,0,.6);

    }

}

#dailyTitle{
    margin:5px 0;
}

#popupLayer #payTable{

    width:96%;

    max-width:520px;

    margin:8px auto 12px;

    padding:8px 10px;

    box-sizing:border-box;

}

#popupLayer #payTable{

    width:calc(100% - 16px) !important;

    max-width:none;

    margin:8px auto 6px;

    padding:8px;

    box-sizing:border-box;

}/* =========================================
   MOBILE V8.1
   DICE ↔ SPIN GAP REDUCE
========================================= */

#rollSection .diceBox{

    margin-top:-25px;

}

#rollSection .diceBox{
    order:1;
    flex-shrink:1;
    margin-bottom:10px !important;
}

/* =========================================
   MOBILE V8.1
   SPIN BUTTON FRONT
========================================= */

#rollSection #rollBtn{

    position:relative;

    z-index:100 !important;

    

}

/* =========================================
   MOBILE V8.1
   CREDIT MODE ICON SIZE
========================================= */

#gameModeIcon{
    font-size:11px !important;
    line-height:1 !important;
    display:inline-block;
    vertical-align:middle;
}

/* =========================================
   MOBILE V8.1
   ROUND PANEL BORDER REMOVAL
========================================= */

#roundPanel{

    box-shadow:none !important;

}

/* =========================================
   MOBILE V8.1
   TOP HUD LABEL SPACING
========================================= */

#topHUD .hudLabel{

    margin-bottom:2px !important;

}

/* =========================================
   MOBILE V8.1
   TOP HUD VERTICAL LAYOUT
========================================= */



#topHUD .hudLabel{

    margin:0 !important;

    font-size:12px;

    line-height:1;

    white-space:nowrap;

}

/* =========================================
   MOBILE V8.1
   TOP HUD 2-LINE LAYOUT
========================================= */

#topHUD .hudBox{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

#topHUD .hudTitle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:3px;

    line-height:1;

    white-space:nowrap;

}

#topHUD .hudLabel{

    font-size:12px;

    font-weight:bold;

    color:#d4af37;

    margin:0 !important;

}

#topHUD #hudCredit,
#topHUD #hudReserve,
#topHUD #hudStake,
#topHUD #hudPoint{

    display:block;

    margin-top:3px;

}

/* =========================================
   MOBILE V8.1
   TOP HUD COMPACT
========================================= */

#topHUD .hudBox{

    width:72px;

    min-width:72px;

    padding:4px 2px;

}

#topHUD .hudLabel{

    font-size:9px !important;

    line-height:1;

}

#topHUD .hudTitle{

    gap:2px;

}

#topHUD .hudTitle span:first-child{

    font-size:12px;

}

#topHUD #hudCredit,
#topHUD #hudReserve,
#topHUD #hudStake,
#topHUD #hudPoint{

    font-size:10px !important;

    line-height:1.1;

    margin-top:2px;

}

/* =========================================
   MOBILE V8.1
   TOP HUD FIRST 3 BOXES LEFT
========================================= */

#topHUD .hudBox:nth-child(-n+3){

    transform:translateX(-11px);

}

/* =========================================
   MOBILE V8.1
   POINT BOX FINAL COMPACT
========================================= */

#topHUD .hudBox:nth-child(4){

    width:48px;

    min-width:48px;

    padding:4px 0;

}

#topHUD .hudBox:nth-child(4) .hudTitle{

    gap:4px;

    padding:0;

}

#topHUD .hudBox:nth-child(4) .hudTitle > span:first-child{

    flex-shrink:0;

}

/* POINT TITLE COMPACT */

#topHUD .hudBox:nth-child(4) .hudTitle{

    gap:0;

    width:100%;

    justify-content:center;

}

#topHUD .hudBox:nth-child(4) .hudTitle > span:first-child{

    font-size:9px;

position:relative;

    left:-20px;

}

#topHUD .hudBox:nth-child(4) .hudTitle{

    position:relative;

    left:15px;

}

#topHUD .hudBox:nth-child(4) .hudLabel{

    font-size:8px !important;

}

#topHUD #hudPoint{

    position:relative;

    left:14px;

}

#dealerRelationshipBox .relationshipLabel,
#dealerRelationshipBox #dealerRelationshipValue{

    position:relative;

    left:15px;

}

/* TOP HUD TEXT SIZE UP */

#topHUD .hudLabel{

    font-size:12px !important;

}


#topHUD #hudCredit,
#topHUD #hudReserve,
#topHUD #hudStake,
#topHUD #hudPoint{

    font-size:12px !important;

}

/* POINT HUD SIZE FIX */

#topHUD .hudBox:nth-child(4) .hudLabel{

    font-size:12px !important;

}


#topHUD #hudPoint{

    font-size:12px !important;

}

/* TOP HUD FIRST 3 BOX WIDTH */

#topHUD .hudBox:nth-child(1),
#topHUD .hudBox:nth-child(2),
#topHUD .hudBox:nth-child(3){

    min-width:80px;

}

/* TOP HUD HEIGHT COMPACT */

#topHUD .hudBox{

    padding-top:2px;
    padding-bottom:2px;

}

/* MOBILE PI STAKING PANEL */

@media(max-width:600px){

    #piStakingPanel{

        width:calc(100% - 20px);

        max-width:none;

        margin-left:auto;

        margin-right:auto;

        box-sizing:border-box;

    }

}

/* MOBILE ACHIEVEMENT TEST PANEL */

@media(max-width:600px){

    #achievementTestPanel{

        width:calc(100% - 20px);

        margin-left:auto;

        margin-right:auto;

        box-sizing:border-box;

    }

}

/* MOBILE AI DEALER TEST CENTER */

@media(max-width:600px){

    #dealerTestCenter{

        width:calc(100% - 20px);

        margin-left:auto;

        margin-right:auto;

        box-sizing:border-box;

    }

}

/* REWARD TOTAL POSITION FIX */

#rewardMessage hr{

    margin-bottom:2px;

}


#rewardMessage{

    line-height:1.2;

}

/* =========================
   GAME BRAND LOGO
========================= */

#gameBrandLogo{

    position:absolute;

    top:5px;

    left:120px;

    font-size:15px;

    font-weight:bold;

    color:#d4af37;

    white-space:nowrap;

    z-index:20;

}

/* V8.1 BOTTOM CONTROL MOVE UP */

#rollSection{

     transform:translateY(-40px);
}


/* V8.1 DICE GAP FINAL TEST */

#rollSection .diceBox{

    margin-top:-45px !important;

}

/* =====================================================
   V8.1 NEW DR314 MODAL
   ===================================================== */

#dr314Modal{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    display:none;

    justify-content:center;
    align-items:center;

    box-sizing:border-box;

    background:rgba(0,0,0,0.75);

    z-index:9999999;

}


#dr314ModalBox{

    width:333px;

    max-width:80vw;

    padding:20px;

    box-sizing:border-box;

    border-radius:20px;

    background:#1d1d1d;

    border:2px solid #d4af37;

    text-align:center;

}


#dr314ModalTitle{

    font-size:22px;

    font-weight:bold;

    margin-bottom:15px;

}


#dr314ModalBody{

    font-size:16px;

    line-height:1.5;

    margin-bottom:20px;

}


#dr314ModalButtons{

    display:flex;

    justify-content:center;

    gap:10px;

}


#dr314ModalButtons button{

    min-width:90px;

    padding:10px 16px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

}

/* =========================
   V8.1 AUTO BET + SPIN AREA
   ========================= */

#rollActionArea{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-top:30px;

}


/* AUTO BET BUTTON */

#autoBetBtn{

    width:100px;

    height:60px;

    border-radius:18px;

    border:2px solid #d4af37;

    background:#222;

    color:#d4af37;

    font-size:18px;

    font-weight:bold;

}


/* SPIN SIZE */

#rollActionArea #rollBtn{

    width:180px;

    height:70px;

}

/* =========================
   V8.1 AUTO BET FLOAT MENU
   ========================= */


.autoBetWrapper{

    position:relative;

}



#autoBetMenu{

    display:none;

    position:absolute;

    bottom:70px;

    left:0;

    width:100px;

    padding:6px;

    background:#111;

    border:2px solid #d4af37;

    border-radius:10px;

    z-index:999999;

}



#autoBetMenu button{

    width:90%;

    margin:3px 0;

    height:35px;

    border-radius:8px;

    background:#222;

    color:#fff;

    border:1px solid #d4af37;

    font-weight:bold;

padding:3px;

}

/* AUTO BET SELECTED */

#autoBetMenu button.selected{

    background:#00aa44;

    color:white;

    box-shadow:
    0 0 15px #00ff66;

}



/* =========================
   V8.1 AUTO BET STATUS TEXT
   ========================= */


#autoBetBtn .autoRemain{

    display:block;

    font-size:11px;

    margin-top:2px;

    line-height:1.1;

}


/* AUTO 선택 표시 */

#autoBetBtn.autoRunning{

    line-height:1.1;

}


#autoBetBtn.autoRunning{

    font-size:13px;

}

/* =========================
   AUTO BET STATUS SIZE
   ========================= */


#autoBetBtn{

    line-height:1.1;

}


#autoBetBtn .autoRemain{

    font-size:14px;

    line-height:1.1;

    margin-top:2px;

}

/* =========================
   V8.1 AUTO BET DISPLAY
   ========================= */


#autoBetBtn{

    width:120px;

    min-height:58px;

    font-size:15px;

    line-height:1.15;

    padding:6px;

}



#autoBetBtn .autoRemain{

    display:block;

    font-size:15px;

    margin-top:3px;

    line-height:1.1;

}

/* =====================================================
   V8.1 DICE + SPIN POSITION RESTORE
   ===================================================== */

/* DICE → DEALER 방향 */
#rollSection .diceBox{
    transform: translate(-40px, -120px) !important;
}

/* SPIN + AUTO SPIN → 반대 방향 */
#rollActionArea{
    transform: translateY(30px) !important;
}

/* =====================================================
   V8.1 DICE SPACING
   ===================================================== */

#rollSection .diceBox span{
    margin-left:-7px !important;
    margin-right:-7px !important;
}

/* =========================
   ADMIN PANEL V8.1 UI
========================= */

#adminPanel{

    display:none;

    position:fixed;

    left:50%;

    top:50%;

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

    width:90%;

    max-width:420px;

    max-height:75vh;

    overflow-y:auto;

    padding:20px;

    box-sizing:border-box;

    background:rgba(0,0,0,0.92);

    border:1px solid gold;

    border-radius:14px;

    z-index:99999;

}

/* =========================
   ADMIN INNER BOX CONTROL
========================= */

#dealerTestCenter,
#achievementTestPanel,
#developerTools{

    display:none;

}

/* =========================
   ADMIN MENU BUTTONS
========================= */

#adminMenuButtons{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}


#adminMenuButtons button{

    width:100%;

    padding:9px 5px;

    font-size:14px;

    line-height:1.2;

    border-radius:10px;

    cursor:pointer;

}

/* =========================
   ADMIN CONTENT BOX
========================= */

#dealerTestCenter,
#achievementTestPanel,
#developerTools{

    margin-top:15px;

    padding:15px;

    border-radius:12px;

}

/* ADMIN CLOSE BUTTON */

#closeAdminBoxBtn{

    width:100%;

    margin-top:15px;

    padding:10px;

    font-size:14px;

    border-radius:10px;

}

/* =========================
   ADMIN INNER BOX STYLE
========================= */

#dealerTestCenter,
#achievementTestPanel,
#developerTools{

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(212,175,55,0.5);

    border-radius:12px;

    padding:15px;

    margin-top:15px;

}


#dealerTestCenter h2,
#achievementTestPanel h3,
#developerTools h3{

    margin-top:0;

    text-align:center;

}

/* ADMIN TEST BUTTONS */

.dealerTestButtons{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.dealerTestButtons button{

    flex:1;

    min-width:100px;

}


#achievementTestPanel button,
#developerTools button{

    width:100%;

    margin-top:8px;

}

/* =========================
   ADMIN STATUS
========================= */

#adminStatus{

    text-align:center;

    margin:10px 0;

    padding:8px;

    border-radius:8px;

    background:rgba(255,255,255,0.08);

    font-size:14px;

}

/* =========================
   ADMIN BACK BUTTON
========================= */

#adminBackBtn{

    width:100%;

    margin-top:10px;

    padding:10px;

    border-radius:10px;

}

/* =========================
   ACHIEVEMENT TEST SIZE
========================= */

#achievementTestPanel{

    width:100%;

    box-sizing:border-box;

    padding:10px;

}

#achievementTestPanel{

    transform:translateX(-10px);

}

/* =========================
   AI DEALER TEST SIZE
========================= */

#dealerTestCenter{

    width:100%;

    box-sizing:border-box;

    padding:10px;

    transform:translateX(-10px);

}

#dealerTestCenter .dealerTestButtons button{

    padding:6px;

    font-size:14px;

}

/* =========================
   DEVELOPER TOOLS SIZE
========================= */

#developerTools{

    width:100%;

    box-sizing:border-box;

    padding:10px;

    transform:translateX(-10px);

}

#developerTools button{

    width:100%;

    padding:6px;

    font-size:14px;

    margin-top:6px;

}

.developerItem{

    padding:8px;

    margin-bottom:8px;

}

/* =========================
   ADMIN PANEL SPACING
========================= */

#adminMenuButtons{

    margin-bottom:10px;

}


#dealerTestCenter,
#achievementTestPanel,
#developerTools{

    margin-top:10px;

}

/* ADMIN INNER TITLE */

#dealerTestCenter h2,
#achievementTestPanel h3,
#developerTools h3{

    font-size:16px;

    margin-bottom:10px;

}

#adminBackBtn,
#closeAdminBoxBtn{

    padding:8px;

    font-size:14px;

    border-radius:10px;

}

/* =========================
   BOTTOM MENU V8.1 FINAL
========================= */

#bottomMenu{

    display:grid !important;

    grid-template-columns:repeat(3,1fr) !important;

    gap:4px;

}


#bottomMenu button{

    width:100%;

    min-width:0;

    padding:5px 2px;

    font-size:12px;

    white-space:nowrap;

}



/* =========================
   SETTINGS POPUP FINAL FIX
========================= */

/* =========================
   SETTINGS POPUP STABLE FIX
========================= */

#settingsPopup{

    position:fixed;

    left:0;

    top:0;

    width:100vw;

    height:100vh;

    z-index:999999;

}


.settingsBox{

    position:absolute;

    left:50%;

    top:50%;

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

    width:90%;

    max-width:420px;

    max-height:70vh;

    overflow-y:auto;

    box-sizing:border-box;

    padding:15px;

    background:rgba(0,0,0,0.95);

    border:1px solid gold;

    border-radius:14px;

}



.settingsBox{

    width:100%;

    max-height:70vh;

    overflow-y:auto;

    box-sizing:border-box;

    padding:15px;

    background:rgba(0,0,0,0.95);

    border:1px solid gold;

    border-radius:14px;

}


.settingsBox{

    width:100%;

    box-sizing:border-box;

    padding:20px;

    background:rgba(0,0,0,0.92);

    border:1px solid gold;

    border-radius:14px;

}

/* =========================
   ABOUT POPUP V8.1
========================= */

#aboutPopup{

    position:fixed;

    left:50%;

    top:50%;

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

    width:90%;

    max-width:420px;

    z-index:999999;

}


.aboutBox{

    background:rgba(0,0,0,0.95);

    border:1px solid gold;

    border-radius:14px;

    padding:20px;

    text-align:center;

}


.aboutBox button{

    width:100%;

    margin-top:15px;

    padding:8px;

}

/* =========================
   SETTINGS BOX FINAL SIZE
========================= */

#settingsPopup .settingsBox{

    position:absolute;

    left:50%;

    top:50%;

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

    width:90% !important;

    max-width:420px !important;

}

/* =========================
   V8.1 COMMON MODAL SYSTEM
========================= */


.modalOverlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

}


.modalBox{

    width:90%;

    max-width:420px;

    max-height:75vh;

    overflow-y:auto;

    box-sizing:border-box;

    padding:15px;

    background:rgba(0,0,0,0.95);

    border:1px solid gold;

    border-radius:14px;

}

/* =========================
   SYSTEM PANEL MENU
========================= */

#systemMenuButtons{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:6px;

    width:100%;

}


#systemMenuButtons button{

    padding:8px 4px;

    font-size:12px;

    border-radius:10px;

    white-space:nowrap;

}

/* 기존 MAIN MENU는 화면에서만 숨김
   기존 ID는 유지 → 하단 메뉴 기능 보호 */

#settingsArea,
#achievementArea,
#dealerArea,
#helpArea{
    display:none !important;
}

/* 기존 ABOUT 버튼 화면에서 숨김 */

#rollSection button[onclick="showAbout()"]{
    display:none !important;
}

/* SYSTEM PANELS — 기본 숨김 */

#rewardPanel,
#achievementPanel,
#unlockPanel,
#piStakingPanel,
#playerProfilePanel,
#pointConvertPanel{
    display:none !important;
}

/* SYSTEM PANEL MODAL */

#systemPanelModal{
    position:fixed !important;
    left:0 !important;
    top:0 !important;

    width:100vw !important;
    height:100vh !important;

    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,0.65);

    padding:20px;
    box-sizing:border-box;
}

#systemPanelModal .systemPanelModalContent{
    position:relative;

    width:min(380px, 100%);
    max-height:80vh;

    overflow-y:auto;

    box-sizing:border-box;

    padding:20px;

    border-radius:14px;
}

.systemPanelModalClose{
    position:absolute;

    top:8px;
    right:8px;

    width:32px;
    height:32px;

    padding:0;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;
    font-weight:bold;
}

/* =====================================
   V8.2 DEALER LIFE MOTION
   STEP 3 - STATE MOTION
===================================== */

#dealerFrame{
    animation: dealerLifeMotion 6s ease-in-out infinite;
    transform-origin: center bottom;
}

/* NORMAL / IDLE */

@keyframes dealerLifeMotion{

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

    25%{
        transform: translate3d(4px, -2px, 0);
    }

    50%{
        transform: translate3d(0, -4px, 0);
    }

    75%{
        transform: translate3d(-4px, -2px, 0);
    }

    100%{
        transform: translate3d(0, 0, 0);
    }

}


/* THINKING */

#dealerFrame.dealerMotionThinking{
    animation:
        dealerThinkingMotion 2.2s ease-in-out infinite;
}

@keyframes dealerThinkingMotion{

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

    50%{
        transform: translate3d(0, -6px, 0);
    }

    100%{
        transform: translate3d(0, 0, 0);
    }

}


/* HAPPY */

#dealerFrame.dealerMotionHappy{
    animation:
        dealerHappyMotion 1.8s ease-in-out infinite;
}

@keyframes dealerHappyMotion{

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

    50%{
        transform: translate3d(3px, -5px, 0);
    }

    100%{
        transform: translate3d(0, 0, 0);
    }

}


/* SAD */

#dealerFrame.dealerMotionSad{
    animation:
        dealerSadMotion 3s ease-in-out infinite;
}

@keyframes dealerSadMotion{

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

    50%{
        transform: translate3d(0, 3px, 0);
    }

    100%{
        transform: translate3d(0, 0, 0);
    }

}


/* JACKPOT */

#dealerFrame.dealerMotionJackpot{
    animation:
        dealerJackpotMotion 1.1s ease-in-out infinite;
}

@keyframes dealerJackpotMotion{

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

    25%{
        transform: translate3d(5px, -5px, 0);
    }

    50%{
        transform: translate3d(0, -8px, 0);
    }

    75%{
        transform: translate3d(-5px, -5px, 0);
    }

    100%{
        transform: translate3d(0, 0, 0);
    }

}

/* =====================================
   V8.2 SOPHIA IDLE VIDEO
   STEP 7-4
===================================== */

#dealerGameVideo{
    display:none;
    width:118%;
    height:115%;
    object-fit:cover;
    object-position:center;
}

/* V8.2 검은 막대 제거 - 1차 */
#dealerSection{
    background:transparent !important;
}

/* V8.2 딜러 영상 기본 */
#dealerGameVideo{ 
    transform:scaleY(1.22) !important; 
}

/* =================================
   V8.2 NON-ROLLING DEALER VIDEO
   THINKING / HAPPY / SAD / JACKPOT
   ================================= */

#dealerGameVideo[src*="thinking"],
#dealerGameVideo[src*="happy"],
#dealerGameVideo[src*="sad"],
#dealerGameVideo[src*="jackpot"]{
    transform:
        scaleX(1.25)
        scaleY(1.22)
        !important;
}

/* V8.2 IDLE ONLY */
/* IDLE 크기를 idleVideo 클래스에 의존하지 않음 */

#dealerGameVideo[src*="sophia_idle.mp4"]{
    width:412px !important;
    height:448px !important;
    transform:
        scaleY(1.22)
        !important;
    object-fit:cover;
    object-position:
        45% 50%;
}

/* =========================================
   V8.2 ROLLING TABLE IMAGE
   주사위 없는 Sophia 테이블 배경
   ========================================= */

#dealerRollingTable{

    display:none;

    position:absolute;

    left:50%;
    top:50%;

    width:125%;
    height:122%;

    object-fit:cover;
    object-position:center center;

    transform:
        translate(-50%, -50%)
        translateX(-10px)
        scaleY(1.22);

}

/* =========================
   PAYMENT CENTER
   DR314 MODAL STYLE
========================= */

.paymentCenterBox{

    width:333px;

    max-width:80vw;

    padding:20px;

    box-sizing:border-box;

    border-radius:20px;

    background:#1d1d1d;

    border:2px solid #d4af37;

    text-align:center;

}

/* =========================
   PAYMENT CENTER
   PAYMENT METHOD BUTTONS
========================= */

.paymentMethodRow{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:20px 0;

}

#krwPaymentBtn,
#piPaymentBtn{

    flex:1;

    min-height:70px;

    padding:12px 8px;

    box-sizing:border-box;

    border-radius:12px;

    border:1px solid #d4af37;

    background:#111;

    color:#fff;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;

}

#krwPaymentBtn:hover,
#piPaymentBtn:hover{

    background:#222;

    box-shadow:
        0 0 12px rgba(212,175,55,0.35);

    transform:translateY(-2px);

}

#krwPaymentBtn:active,
#piPaymentBtn:active{

    transform:scale(0.97);

}

#closePaymentCenterBtn{

    width:100%;

    min-height:44px;

    padding:10px;

    box-sizing:border-box;

    border-radius:10px;

    border:1px solid #777;

    background:#222;

    color:#fff;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

}

#closePaymentCenterBtn:hover{

    background:#333;

}

/* =========================
   KRW PAYMENT PRODUCTS
========================= */

.krwProductGrid{

    display:grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:12px;

    margin:20px 0;

}

.krwProductBtn{

    min-height:75px;

    padding:12px 8px;

    box-sizing:border-box;

    border-radius:12px;

    border:1px solid #d4af37;

    background:#111;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;

}

.krwProductBtn span{

    font-size:12px;

    font-weight:normal;

    color:#d4af37;

}

.krwProductBtn:hover{

    background:#222;

    box-shadow:
        0 0 12px rgba(212,175,55,0.35);

    transform:translateY(-2px);

}

.krwProductBtn:active{

    transform:scale(0.97);

}

#closeKrwPaymentBtn{

    width:100%;

    min-height:44px;

    padding:10px;

    box-sizing:border-box;

    border-radius:10px;

    border:1px solid #777;

    background:#222;

    color:#fff;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

}

#closeKrwPaymentBtn:hover{

    background:#333;

}

/* =========================
   KRW CONFIRM POPUP
========================= */

#krwPayNowBtn,
#closeKrwConfirmBtn{

    width:100%;

    min-height:44px;

    margin-top:10px;

    border-radius:10px;

    border:1px solid #d4af37;

    background:#111;

    color:white;

    font-weight:bold;

    cursor:pointer;

}


#krwPayNowBtn:hover,
#closeKrwConfirmBtn:hover{

    background:#222;

}

/* =========================
   KRW PAYMENT PROCESS
========================= */

#krwCompletePaymentBtn,
#closeKrwProcessBtn{

    width:100%;

    min-height:44px;

    margin-top:10px;

    border-radius:10px;

    border:1px solid #d4af37;

    background:#111;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}


#krwCompletePaymentBtn:hover,
#closeKrwProcessBtn:hover{

    background:#222;

}

/* =========================
   KRW PAYMENT COMPLETE
========================= */

#krwReceiveRewardBtn{

    width:100%;

    min-height:44px;

    margin-top:10px;

    border-radius:10px;

    border:1px solid #d4af37;

    background:#111;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}


#krwReceiveRewardBtn:hover{

    background:#222;

}

/* =========================
   PAYMENT HISTORY
========================= */

#paymentHistoryList{

    max-height:300px;

    overflow-y:auto;

    margin:20px 0;

    padding:10px;

    border-radius:12px;

    background:#111;

    border:1px solid #444;

    text-align:left;

    font-size:14px;

    line-height:1.6;

}


.paymentHistoryItem{

    padding:16px;

    margin-bottom:12px;

    border-radius:14px;

    border:1px solid rgba(212,175,55,0.35);

    background:

    linear-gradient(
        145deg,
        #1d1d1d,
        #101010
    );

    box-shadow:
        0 4px 12px rgba(0,0,0,0.35);

    line-height:1.6;

}


.paymentHistoryItem .historyDate{

    font-size:12px;

    color:#999;

    margin-bottom:8px;

}

.paymentHistoryItem .historyAmount{

    font-size:18px;

    font-weight:bold;

    color:#d4af37;

    margin-bottom:6px;

}

/* =========================
   PI PAYMENT DETAIL
   V8.2
========================= */

.historyDetail{

    font-size:14px;

    color:#ddd;

    margin-top:4px;

}


.historyStatus{

    margin-top:10px;

    font-size:14px;

    font-weight:bold;

}

/* =========================
   PI PAYMENT HISTORY
   V8.2
========================= */

.piHistory{

    color:#ffd700;

}

#paymentHistoryBtn,
#closePaymentHistoryBtn{

    width:100%;

    min-height:44px;

    margin-top:10px;

    border-radius:10px;

    border:1px solid #d4af37;

    background:#111;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}


#paymentHistoryBtn:hover,
#closePaymentHistoryBtn:hover{

    background:#222;

}

/* V8.2 BUTTON / HUD BACKGROUND FIX */

#b100,
#b200,
#b500 {
    background: rgb(51, 51, 51) !important;
}

#topHUD .hudBox {
    background: rgb(20, 20, 20) !important;
}

/* V8.2 PAYMENT BACKGROUND FIX */

.paymentBox {
    background: rgb(20, 20, 20) !important;
}

/* V8.2 DICE RESULT BACKGROUND FIX */

.diceResult {
    background: rgb(20, 20, 20) !important;
}

/* V8.2 DICE RESULT 2 BACKGROUND FIX */

.diceResult2 {
    background: rgb(20, 20, 20) !important;
}

/* V8.2 DICE RESULT 2 BACKGROUND FIX */

#resultPanel {
    background: linear-gradient(
        145deg,
        rgb(60, 50, 20),
        rgb(20, 20, 20)
    ) !important;
}

/* V8.2 MARKET BACKGROUND FIX */

#marketPanel {
    background: rgb(20, 20, 20) !important;
}

/* V8.2 PAY TABLE BACKGROUND FIX */

#payTable {
    background: linear-gradient(
        145deg,
        rgb(60, 50, 20),
        rgb(20, 20, 20)
    ) !important;
}

/* V8.2 LOBBY PLAYER BOX BACKGROUND FIX */

#lobbyScreen .playerCard {
    background: rgb(20, 20, 20) !important;
}

/* V8.2 LOBBY DEALER BOX BACKGROUND FIX */

#lobbyScreen .dealerPreview {
    background: rgb(20, 20, 20) !important;
}

/* V8.2 LOBBY HEADER TEXT VISIBILITY FIX */

#lobbyScreen .casinoLogo h1,
#lobbyScreen .casinoLogo h2,
#lobbyScreen .casinoLogo p {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(0, 0, 0, 0.85);
}

/* V8.2 LOBBY TOUCH TO START FINAL FIX */

#lobbyScreen #touchStart {
    background: linear-gradient(
        45deg,
        rgb(75, 62, 22),
        rgb(30, 30, 30)
    ) !important;

    opacity: 1 !important;

    animation: pulseStartGlow 2s ease-in-out infinite !important;
}

@keyframes pulseStartGlow {
    0% {
        box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
    }

    50% {
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.75);
    }

    100% {
        box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
    }
}

/* V8.2 MARKET TOP SPACE REDUCE */

#rollSection {
    margin-bottom: -5px !important;
}

/* V8.2 PAY TABLE - TOTAL BET SPACE REDUCE */

#payTable {
    margin-bottom: -6px !important;
}

/* V8.2 CLEAR BET - DICE REWARD SPACE REDUCE */

/* V8.2 DICE REWARD - HUD SPACE REDUCE */

#gameTitle {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* V8.2 BOTTOM 6 MENU BUTTONS - MOVE UP */
#bottomSettingsBtn,
#bottomAchievementBtn,
#bottomDealerBtn,
#bottomHelpBtn,
#bottomAboutBtn,
#bottomPaymentBtn {
    transform: translateY(-20px) !important;
}

/* V8.2 BOTTOM MENU - REMOVE LOWER SPACE */
#bottomMenu {
    height: 44px !important;
    overflow: visible !important;
}

/* V8.2 LOBBY TAGLINE VISIBILITY FIX */
#startScreen .casinoLogo p {
    color: #ffffff !important;
}

/* V8.2 LOBBY TAGLINE WHITE FIX */
#lobbyScreen .casinoLogo p {
    color: #ffffff !important;
}