#premium-hud {

    position:absolute;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    z-index:200;

    display:flex;
    align-items:center;
    gap:14px;

    padding:12px 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.04)
        );

    backdrop-filter:
        blur(18px);

    border:

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


    border-radius:28px;


    box-shadow:

        0 0 30px
        rgba(212,175,55,.25),

        inset 0 0 20px
        rgba(255,255,255,.08);


    animation:

        hudAppear .8s ease-out;


}


@keyframes hudAppear {

from {

    opacity:0;

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

}


to {

    opacity:1;

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

}

}




.hud-item {


    min-width:70px;


    display:flex;

    flex-direction:row;

    align-items:center;


    color:white;


    font-family:
        Georgia,
        serif;


}


.hud-icon {


    font-size:24px;


    filter:

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

}



.hud-value {


    font-size:18px;

    color:#d4af37;


    text-shadow:

        0 0 10px
        rgba(212,175,55,.7);

}



.hud-button {


    width:42px;

    height:42px;


    border-radius:50%;


    border:

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


    background:

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


    color:white;


    cursor:pointer;


    font-size:20px;


    transition:.3s;


}



.hud-button:hover {


    transform:

        scale(1.15)
        rotate(5deg);


    box-shadow:

        0 0 20px
        gold;

}



.hud-pulse {


animation:

    rewardPulse .5s;

}



@keyframes rewardPulse {


50% {

    transform:

        scale(1.2);


    filter:

        brightness(1.8);

}


}




/* ===============================
   ONE LINE PREMIUM HUD
   =============================== */


#premium-hud {

    flex-direction:row;

    justify-content:center;

    align-items:center;

    white-space:nowrap;

    height:64px;

    padding:
        8px 24px;

    gap:18px;

}


.hud-item {

    flex-direction:row;

    gap:8px;

    min-width:auto;

}


.hud-icon {

    font-size:22px;

}


.hud-value {

    font-size:20px;

    line-height:1;

}



#hud-time {

    min-width:55px;

    text-align:center;

}



.hud-button {

    flex-shrink:0;

}



#premium-hud::before {

    content:"MILLER RINGS";

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    font-size:10px;

    letter-spacing:4px;

    color:#d4af37;

    opacity:.8;

}



/* ===================================
   PREMIUM HUD FULL WIDTH BAR
   =================================== */


#premium-hud {

    width: max-content;

    min-width: 620px;

    height: 72px;

    box-sizing:border-box;

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:28px;

    padding:
        10px 32px;

}


/* DO NOT COMPRESS ITEMS */

.hud-item {

    flex:0 0 auto;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:90px;

}


.hud-icon {

    flex:none;

    font-size:26px;

}


.hud-value {

    flex:none;

    min-width:45px;

    text-align:center;

    font-size:22px;

}



/* buttons */

.hud-button {

    flex:none;

    width:46px;

    height:46px;

}


/* desktop center */

@media (min-width:900px){

    #premium-hud {

        min-width:720px;

    }

}




/* =========================================
   MILLER RINGS AAA HUD EXPANSION
   ========================================= */


#premium-hud {

    min-width:820px;

    height:78px;

    padding:
        12px 38px;

    gap:24px;


    border-radius:40px;


    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.16),
            rgba(0,0,0,.55)
        );


    box-shadow:

        0 12px 40px
        rgba(0,0,0,.65),

        0 0 45px
        rgba(212,175,55,.35),

        inset 0 1px 2px
        rgba(255,255,255,.3);


}



/* золотые края */

#premium-hud::after {

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:42px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.8),
            transparent
        );


    opacity:.5;

    z-index:-1;

}




/* resource blocks */

.hud-item {


    position:relative;


    padding:

        0 22px;


}


.hud-item:not(:last-of-type)::after {


    content:"";


    position:absolute;


    right:0;


    top:8px;


    height:40px;


    width:1px;


    background:


        linear-gradient(
            transparent,
            rgba(212,175,55,.8),
            transparent
        );


}



/* icons */

.hud-icon {


    font-size:30px;


    animation:

        iconFloat 3s ease-in-out infinite;


}



@keyframes iconFloat {


50% {

    transform:

        translateY(-3px);

}


}



/* values */

.hud-value {


    color:#f5d76e;


    font-weight:700;


    font-family:

        "Cinzel",
        Georgia,
        serif;


    text-shadow:

        0 0 8px
        rgba(212,175,55,.8);


}



/* buttons */

.hud-button {


    margin-left:4px;


    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.25),
            rgba(0,0,0,.5)
        );


    border:

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


    box-shadow:

        inset 0 0 12px
        rgba(212,175,55,.25);


}




.hud-button:active {


    transform:

        scale(.9);


}



/* mobile */

@media(max-width:850px){


#premium-hud {


    min-width:auto;

    width:95%;

    gap:8px;

    padding:8px;


}



.hud-item {

    padding:0 8px;

}


.hud-icon {

    font-size:20px;

}


.hud-value {

    font-size:16px;

}


}






/* ==========================================
   HUD HORIZONTAL BLOCK MODE
   ========================================== */


#premium-hud {

    width:auto;

    min-width:900px;

    height:76px;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:

        10px 36px;


}



/*
   EVERY HUD ITEM:
   ICON + VALUE
*/


#premium-hud .hud-item {


    display:flex;

    flex-direction:row;


    align-items:center;


    justify-content:center;


    gap:8px;


    min-width:110px;


    height:48px;


    flex:none;


}



/*
   icon
*/


#premium-hud .hud-icon {


    font-size:28px;


    line-height:1;


    flex:none;


}



/*
   value
*/


#premium-hud .hud-value {


    font-size:24px;


    font-weight:700;


    line-height:1;


    min-width:auto;


    flex:none;


}



/*
   separators
*/


#premium-hud .hud-item:not(:last-of-type)::after {


    right:-8px;


    top:10px;


    height:28px;


}



/*
   buttons stay in row
*/


#premium-hud .hud-button {


    flex:none;


    width:48px;


    height:48px;


    margin-left:6px;


}



/*
   no compression
*/


#premium-hud,
#premium-hud * {

    flex-shrink:0;

}



@media(max-width:950px){


#premium-hud {

    min-width:auto;

    width:96%;

    padding:8px 12px;

    gap:6px;


}


#premium-hud .hud-item {

    min-width:auto;

    padding:0 8px;

}


#premium-hud .hud-icon {

    font-size:20px;

}


#premium-hud .hud-value {

    font-size:18px;

}


}




/* ==========================================
   MILLER RINGS GLASS HUD BLOCK MODE
   ========================================== */


#premium-hud {

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:900px;

    height:82px;

    padding:10px 32px;

    border-radius:42px;

    gap:14px;

    backdrop-filter:blur(18px);

}



#premium-hud .hud-row {


    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    width:100%;

    gap:14px;


}



/*
    ONE BLOCK:
    ICON + VALUE
*/


#premium-hud .hud-block {


    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;


    gap:8px;


    min-width:95px;


    height:50px;


    padding:0 14px;


    border-radius:25px;


    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(0,0,0,.35)
        );


    border:

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


    box-shadow:

        inset 0 0 15px
        rgba(255,255,255,.08),

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


    transition:.25s;


}



#premium-hud .hud-block:hover {


    transform:

        translateY(-3px)
        scale(1.04);


    box-shadow:

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


}



#premium-hud .hud-icon {


    font-size:28px;

    line-height:1;

}



#premium-hud .hud-block b {


    color:#f7e7a8;


    font-family:

        Cinzel,
        Georgia,
        serif;


    font-size:22px;


    text-shadow:

        0 0 8px
        rgba(212,175,55,.8);


}



#premium-hud .hud-divider {


    width:1px;


    height:34px;


    background:

        linear-gradient(
            transparent,
            rgba(212,175,55,.9),
            transparent
        );


}



#premium-hud .hud-actions {


    display:flex;

    flex-direction:row;

    gap:8px;


}



#premium-hud .hud-button {


    width:50px;

    height:50px;


    border-radius:50%;


    border:

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


    background:

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


    font-size:22px;


    cursor:pointer;


    transition:.2s;


}



#premium-hud .hud-button:hover {


    transform:

        scale(1.1);


    box-shadow:

        0 0 20px
        rgba(212,175,55,.6);


}



/*
    VALUE CHANGE ANIMATION
*/


#premium-hud .pulse {


    animation:

        hudPulse .45s;


}



@keyframes hudPulse {


50%{

    transform:

        scale(1.25);


    filter:

        brightness(1.8);


}


}




@media(max-width:950px){


#premium-hud {

    min-width:auto;

    width:96%;

    padding:8px;


}


#premium-hud .hud-block {


    min-width:auto;

    padding:0 8px;


}


#premium-hud .hud-icon {


    font-size:20px;


}


#premium-hud .hud-block b {


    font-size:16px;


}


}




/* =====================================
   HUD ROUND BUTTON ALIGN FIX
   ===================================== */


#premium-hud .hud-button {

    display:flex;

    align-items:center;

    justify-content:center;


    padding:0;

    line-height:1;


    font-family:

        "Apple Color Emoji",
        "Segoe UI Emoji",
        sans-serif;


}



#premium-hud #ui-sound,
#premium-hud #ui-pause {


    text-align:center;


}



#premium-hud .hud-button:hover {

    transform:
        scale(1.12);

}




/* =====================================
   HUD ABOVE MENU OVERLAY
   ===================================== */


#premium-hud {


    position:fixed;


    top:20px;


    left:50%;


    transform:
        translateX(-50%);


    z-index:20000 !important;


}



#game-menu,
.game-screen {


    z-index:10000;

}



#premium-hud.hud-mounted {


    pointer-events:auto;


}






/* ===================================
   PAUSE FULLSCREEN OVERLAY
   =================================== */


#pause-overlay {

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;


    background:

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


    backdrop-filter:

        blur(12px);


    z-index:100000;


    pointer-events:auto;

}



.pause-dialog {


    width:420px;

    padding:50px;


    text-align:center;


    border-radius:32px;


    background:

        linear-gradient(
            145deg,
            rgba(35,25,10,.98),
            rgba(5,5,5,.98)
        );


    border:

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


    box-shadow:

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


    animation:

        pauseAppear .35s ease;


}



.pause-symbol {

    font-size:72px;

}



.pause-dialog h2 {

    color:#d4af37;

    font-size:38px;

}



.pause-dialog p {

    color:white;

    opacity:.85;

    font-size:18px;

}



@keyframes pauseAppear {


from {

    opacity:0;

    transform:
        scale(.85);

}


to {

    opacity:1;

    transform:
        scale(1);

}


}




/* ==================================================
   PREMIUM PAUSE SCREEN
   MILLER RINGS STYLE
   ================================================== */


#game-overlay,
#pause-overlay {


    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;


    background:

        radial-gradient(
            circle at center,
            rgba(212,175,55,.15),
            rgba(0,0,0,.88)
        );


    backdrop-filter:

        blur(14px);


    z-index:100000;


}



/* CARD */


#game-overlay > div,
#pause-overlay > div {


    position:relative;


    width:460px;


    padding:55px 60px;


    text-align:center;


    border-radius:36px;


    background:


        linear-gradient(
            145deg,
            rgba(35,31,25,.96),
            rgba(8,8,8,.98)
        );


    border:


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


    box-shadow:


        0 0 0 1px
        rgba(255,255,255,.05)
        inset,


        0 30px 100px
        rgba(0,0,0,.8),


        0 0 80px
        rgba(212,175,55,.25);


    animation:

        pauseAppear .45s cubic-bezier(.2,.8,.2,1);


    overflow:hidden;


}



/* GOLD LIGHT */

#pause-overlay > div::before,
#game-overlay > div::before {


    content:"";


    position:absolute;


    inset:-2px;


    background:

        linear-gradient(
            120deg,
            transparent,
            rgba(212,175,55,.35),
            transparent
        );


    animation:

        goldSweep 3s infinite;


}



/* ICON */


.pause-icon,
.pause-symbol {


    position:relative;


    margin:auto;


    width:110px;

    height:110px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    font-size:58px;


    background:


        radial-gradient(
            circle,
            rgba(212,175,55,.35),
            rgba(0,0,0,.4)
        );


    border:

        2px solid
        rgba(212,175,55,.8);


    box-shadow:


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


    animation:

        crystalPulse 2s infinite;


}



/* TITLE */


#pause-overlay h2,
#game-overlay h2 {


    margin-top:30px;


    font-family:

        Georgia,
        serif;


    font-size:42px;


    letter-spacing:3px;


    color:

        #d4af37;


    text-shadow:


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


}



/* TEXT */


#pause-overlay p,
#game-overlay p {


    margin-top:18px;


    color:

        rgba(255,255,255,.8);


    font-size:19px;


    letter-spacing:1px;


}



/* DECORATIVE LINE */


#pause-overlay h2::after {


    content:"";


    display:block;


    width:90px;


    height:2px;


    margin:22px auto 0;


    background:


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


}




@keyframes pauseAppear {


from {

    opacity:0;

    transform:

        translateY(30px)
        scale(.92);

}


to {

    opacity:1;

    transform:

        translateY(0)
        scale(1);

}


}



@keyframes crystalPulse {


50% {


    box-shadow:

        0 0 70px
        rgba(212,175,55,.8);


}


}



@keyframes goldSweep {


0% {

    transform:
        translateX(-120%);

}


50% {

    transform:
        translateX(120%);

}


100% {

    transform:
        translateX(120%);

}


}





/* ==========================================
   PREMIUM JEWEL GLASS SHINE
   ========================================== */


#pause-overlay > div,
#game-overlay > div {

    isolation:isolate;

}



/* moving light reflection */

#pause-overlay > div::before,
#game-overlay > div::before {


    content:"";


    position:absolute;


    top:-40%;


    left:-70%;


    width:55%;


    height:180%;


    pointer-events:none;


    z-index:2;



    background:


        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255,255,255,0) 35%,
            rgba(255,240,180,.18) 45%,
            rgba(212,175,55,.65) 50%,
            rgba(255,255,255,.28) 54%,
            rgba(255,255,255,0) 65%,
            transparent 100%
        );



    filter:

        blur(12px);



    transform:

        rotate(15deg);



    animation:

        jewelShine 4.5s
        cubic-bezier(.4,0,.2,1)
        infinite;



}



/* thin second reflection */

#pause-overlay > div::after,
#game-overlay > div::after {


    content:"";


    position:absolute;


    inset:0;


    pointer-events:none;



    background:


        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 25%,
            transparent 70%,
            rgba(212,175,55,.08)
        );



    border-radius:36px;


}



@keyframes jewelShine {


0% {

    transform:

        translateX(-120%)
        rotate(15deg);


    opacity:0;


}



15% {

    opacity:1;

}



45% {

    opacity:1;

}



70% {

    transform:

        translateX(320%)
        rotate(15deg);


    opacity:0;


}



100% {

    transform:

        translateX(320%)
        rotate(15deg);


    opacity:0;


}


}





#pause-overlay > div,
#game-overlay > div {

    overflow:hidden;

}


#pause-overlay > div::before,
#game-overlay > div::before {

    clip-path: inset(0 round 36px);

}




/* ======================================
   PREMIUM RESUME BUTTON
   ====================================== */


#resume-game,
#resume-game-hud {


    position:relative;


    margin-top:32px;


    min-width:220px;


    height:58px;


    padding:0 42px;


    border-radius:30px;


    border:

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



    background:


        linear-gradient(
            135deg,
            #2b2110,
            #080808
        );



    color:#d4af37;


    font-family:

        Georgia,
        serif;


    font-size:20px;


    letter-spacing:1px;


    cursor:pointer;


    overflow:hidden;



    box-shadow:


        0 0 25px
        rgba(212,175,55,.25),


        inset 0 0 20px
        rgba(212,175,55,.12);



    transition:

        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;



}



/* gold shine */

#resume-game::before,
#resume-game-hud::before {


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:70%;


    height:100%;



    background:


        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );



    transform:skewX(-25deg);


    transition:.6s;


}



#resume-game:hover,
#resume-game-hud:hover {


    transform:

        translateY(-3px)
        scale(1.03);



    border-color:#fff0a0;


    box-shadow:


        0 0 45px
        rgba(212,175,55,.7),


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



}



#resume-game:hover::before,
#resume-game-hud:hover::before {


    left:140%;


}



/* click */

#resume-game:active,
#resume-game-hud:active {


    transform:

        scale(.97);


}



/* icon feeling */

#resume-game::after,
#resume-game-hud::after {


    content:"▶";


    margin-left:12px;


    font-size:14px;


}