#game-menu{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:
radial-gradient(
circle,
rgba(80,80,80,.4),
#05070b
);

z-index:9999;

font-family:
Georgia,
serif;

}


.menu-box{

text-align:center;

color:white;

animation:
fade .8s;

}



.menu-box h1{

font-size:48px;

color:#d4af37;

text-shadow:
0 0 25px #d4af37;

}



.menu-box button{

margin-top:40px;

padding:18px 60px;

font-size:24px;

border-radius:15px;

border:2px solid #d4af37;

background:
linear-gradient(
135deg,
#6b4b12,
#d4af37
);

color:white;

cursor:pointer;

transition:.3s;

}



.menu-box button:hover{

transform:
scale(1.08);

box-shadow:
0 0 40px #d4af37;

}



@keyframes fade{

from{
opacity:0;
transform:scale(.8);
}

to{
opacity:1;
}

}



/* =====================================
   HERO CRYSTAL PREMIUM
===================================== */


.premium-menu{

position:relative;

overflow:hidden;

}



.hero-crystal{

position:relative;

width:150px;

height:150px;

margin:10px auto 25px;


display:flex;

align-items:center;

justify-content:center;


perspective:1000px;


}



.hero-crystal::before{


content:"";


position:absolute;


width:230px;

height:230px;


background:

radial-gradient(
circle,
rgba(100,240,255,.35),
rgba(0,0,0,0) 65%
);



filter:blur(10px);


animation:

crystalAura 3s ease-in-out infinite;


}



.hero-crystal img{


position:relative;


width:120px;

height:120px;


z-index:2;


filter:

drop-shadow(0 0 20px rgba(80,240,255,.9))

drop-shadow(0 0 50px rgba(50,180,255,.55));


animation:


crystalRotate 6s linear infinite,

crystalFloat 4s ease-in-out infinite;


}



.hero-crystal::after{


content:"";


position:absolute;


inset:20px;


background:

linear-gradient(
120deg,
transparent 35%,
rgba(255,255,255,.9) 50%,
transparent 65%
);


transform:

translateX(-150%);


animation:

crystalShine 5s infinite;


z-index:3;


pointer-events:none;


}



.game-title{


font-size:34px;


letter-spacing:2px;


color:#f5dda0;


text-shadow:

0 0 20px rgba(255,210,100,.35);


}



@keyframes crystalRotate{


0%{

transform:

rotateY(0deg)
rotateZ(0deg);

}


100%{

transform:

rotateY(360deg)
rotateZ(20deg);

}


}



@keyframes crystalFloat{


50%{

translate:

0 -12px;

}


}



@keyframes crystalAura{


50%{

scale:1.15;

opacity:.65;

}


}



@keyframes crystalShine{


0%,35%{

transform:

translateX(-150%);

}


60%,100%{

transform:

translateX(150%);

}


}




/* ==========================================
   HERO DIAMOND - JEWEL DISPLAY ROTATION
========================================== */


.hero-crystal{

position:relative;

width:150px;
height:150px;

margin:5px auto 20px;


display:flex;

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


overflow:hidden;


}



.hero-crystal img{


position:relative;

z-index:2;


width:120px;
height:120px;


object-fit:contain;


filter:

drop-shadow(
0 0 12px rgba(120,240,255,.95)
)

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



/*
  Вращение как ювелирная подвеска.
  Без perspective и Y-оси.
*/

animation:

diamondFloat 4s ease-in-out infinite,

diamondTilt 8s ease-in-out infinite;



}



/* мягкий ореол */


.hero-crystal::before{


content:"";


position:absolute;


width:230px;
height:230px;


border-radius:50%;


background:

radial-gradient(
circle,
rgba(80,230,255,.45),
rgba(0,120,255,.15) 35%,
transparent 70%
);


filter:blur(8px);


animation:

diamondGlow 3s infinite;


}



/* блик по граням */


.hero-crystal::after{


content:"";


position:absolute;


z-index:5;


width:55px;

height:160px;


background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
transparent
);


transform:

translateX(-180%)
rotate(20deg);



animation:

diamondShine 5s infinite;


}



/* плавное парение */


@keyframes diamondFloat{


0%,
100%{

translate:0 0;

}


50%{

translate:0 -10px;

}


}



/*
  только вращение в плоскости
*/


@keyframes diamondTilt{


0%{

rotate:0deg;

}


25%{

rotate:4deg;

}


50%{

rotate:0deg;

}


75%{

rotate:-4deg;

}


100%{

rotate:0deg;

}


}



@keyframes diamondGlow{


50%{

scale:1.18;

opacity:.7;

}


}



@keyframes diamondShine{


0%,
35%{

translate:-180% 0;

}


60%,
100%{

translate:180% 0;

}


}





/* ======================================
   STATIC PREMIUM DIAMOND
   no animation
====================================== */


.hero-crystal{

position:relative;

width:150px;
height:150px;

margin:5px auto 20px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}



.hero-crystal img{

position:relative;

z-index:2;

width:120px;

height:120px;

object-fit:contain;


filter:

drop-shadow(
0 0 15px rgba(120,240,255,.75)
)

drop-shadow(
0 0 35px rgba(40,180,255,.35)
);


animation:none!important;

transform:none!important;

}



.hero-crystal::before{

content:"";

position:absolute;

width:230px;

height:230px;

border-radius:50%;


background:

radial-gradient(
circle,
rgba(100,230,255,.35),
transparent 65%
);


filter:blur(12px);


animation:none!important;

}



.hero-crystal::after{

display:none!important;

}




/* =====================================
   DIAMOND - STATIC LUXURY MODE
===================================== */


.hero-crystal,
.hero-crystal img,
.hero-crystal::before,
.hero-crystal::after{

animation:none!important;

transition:none!important;

}



.hero-crystal{

width:160px;

height:160px;

margin:10px auto 25px;

display:flex;

align-items:center;

justify-content:center;

}



.hero-crystal img{

width:130px;

height:130px;

object-fit:contain;


filter:

drop-shadow(
0 12px 25px rgba(0,0,0,.55)
)

drop-shadow(
0 0 20px rgba(255,220,120,.25)
);


}




/* =========================================
   MILLERRINGS LUXURY JEWEL DISPLAY
========================================= */


.premium-menu{

background:

radial-gradient(
circle at center,
rgba(255,220,130,.08),
transparent 45%
);

}



.hero-crystal{

width:210px;

height:210px;

margin:15px auto 15px;

display:flex;

align-items:center;

justify-content:center;


position:relative;


}



.hero-crystal img{

width:170px;

height:170px;


filter:

drop-shadow(
0 35px 35px rgba(0,0,0,.8)
)

drop-shadow(
0 0 25px rgba(255,210,100,.45)
);


animation:none!important;

}



/* дорогая витринная подсветка */


.hero-crystal:before{

content:"";

position:absolute;

width:280px;

height:280px;


background:

radial-gradient(
circle,
rgba(255,220,130,.18),
transparent 65%
);


}



.brand-title{

letter-spacing:8px;

font-size:18px;

color:#d9b45a;

text-transform:uppercase;

}



.brand-title span{

display:block;

font-size:12px;

letter-spacing:5px;

color:#eee;

margin-top:8px;

}



.game-title{

font-family:
Georgia,
serif;


font-size:42px;


letter-spacing:1px;


color:#f6dc91;


text-shadow:

0 2px 25px rgba(255,215,120,.35);


}



.game-subtitle{

margin-top:15px;


font-size:13px;


letter-spacing:4px;


color:#b8aa82;


}



.premium-button{

margin-top:35px;


height:62px;

padding:0 70px;


border-radius:2px;


background:

linear-gradient(
180deg,
#f0cf63,
#9c6d17
);


border:

1px solid #ffe49a;


color:#fff5cf;


font-size:20px;


font-family:Georgia,serif;


box-shadow:

0 15px 40px rgba(0,0,0,.5);


}



.premium-button:hover{

box-shadow:

0 0 40px rgba(255,210,100,.5);


}





/* ==========================================
   MILLERRINGS PREMIUM MENU FIX
========================================== */


/* -------- DIAMOND -------- */


.hero-crystal{

width:180px;

height:180px;

margin:0 auto 20px;


display:flex;

align-items:center;

justify-content:center;


position:relative;


overflow:visible;


}



.hero-crystal img{


width:140px;

height:140px;


aspect-ratio:1 / 1;


object-fit:contain;


display:block;


filter:

drop-shadow(
0 18px 25px rgba(0,0,0,.65)
)

drop-shadow(
0 0 35px rgba(255,210,90,.45)
);


transform:none!important;

animation:none!important;


}



/*
 мягкая золотая подсветка
*/


.hero-crystal::before{


content:"";


position:absolute;


width:260px;

height:260px;


left:50%;

top:50%;


transform:

translate(-50%,-50%);


background:

radial-gradient(
circle,
rgba(255,210,100,.18),
transparent 65%
);


pointer-events:none;


}



/* -------- TITLE -------- */


.game-title{


margin-top:10px;


font-size:42px;


line-height:1.15;


white-space:nowrap;


color:#f4db91;


text-shadow:

0 0 25px rgba(255,215,120,.3);


}




/* -------- BUTTON FIX -------- */


.premium-button{


position:relative;


overflow:hidden;


margin-top:38px;


height:64px;


padding:0 75px;


border-radius:14px;


transform:none!important;


transition:

box-shadow .3s ease,
background .3s ease;


}



.premium-button:hover{


transform:none!important;


background:

linear-gradient(
180deg,
#f7d875,
#b07b18
);


box-shadow:

0 0 35px rgba(255,210,80,.55),

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


}




.premium-button:active{


transform:translateY(1px)!important;


}



/* убрать обрезание меню */


.premium-menu{


overflow:visible!important;


}