@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

.gamemode-rating-desktop {
position: fixed;
top: 96px;
right: 24px;
z-index: 50;
display: none;
}

@media (min-width: 768px) {
.gamemode-rating-desktop {
display: block;
}
}

.gamemode-rating-mobile {
position: fixed;
top: 80px;
right: 16px;
z-index: 50;
display: block;
}

@media (min-width: 768px) {
.gamemode-rating-mobile {
display: none;
}
}

.gamemode-rating-btn {
display: flex;
align-items: center;
gap: 8px;
background: rgba(25, 28, 38, 0.97);
color: #fff;
border: 2px solid transparent;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
transition: transform 0.2s;
background-image: linear-gradient(rgba(25, 28, 38, 0.97), rgba(25, 28, 38, 0.97)), conic-gradient(from var(--angle), #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
background-origin: border-box;
background-clip: padding-box, border-box;
animation: rotate-gradient 2s linear infinite;
}

.gamemode-rating-btn:hover {
transform: scale(1.05);
animation: rotate-gradient 1s linear infinite;
}

.gamemode-rating-btn-mobile {
display: flex;
align-items: center;
justify-content: center;
background: rgba(25, 28, 38, 0.97);
color: #fff;
border: 2px solid transparent;
border-radius: 50%;
padding: 10px;
cursor: pointer;
transition: transform 0.2s;
background-image: linear-gradient(rgba(25, 28, 38, 0.97), rgba(25, 28, 38, 0.97)), conic-gradient(from var(--angle), #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
background-origin: border-box;
background-clip: padding-box, border-box;
animation: rotate-gradient 2s linear infinite;
}

.gamemode-rating-btn-mobile:hover {
transform: scale(1.05);
animation: rotate-gradient 1s linear infinite;
}

@keyframes rotate-gradient {
0% { --angle: 0deg; }
100% { --angle: 360deg; }
}

.gamemode-emoji {
font-size: 14px;
}

.gamemode-text {
font-size: 12px;
font-weight: 500;
}

.gamemode-cursor {
position: absolute;
bottom: -20px;
left: -10px;
width: 24px;
height: auto;
pointer-events: none;
transform: scaleX(-1);
animation: cursor-click 1.2s ease-in-out infinite;
}

.gamemode-cursor-mobile {
position: absolute;
bottom: -16px;
left: -8px;
width: 20px;
height: auto;
pointer-events: none;
transform: scaleX(-1);
animation: cursor-click 1.2s ease-in-out infinite;
}

@keyframes cursor-click {
0%, 100% {
transform: scaleX(-1) translate(0, 0);
}
40% {
transform: scaleX(-1) translate(-6px, -6px);
}
50% {
transform: scaleX(-1) translate(-4px, -4px);
}
60% {
transform: scaleX(-1) translate(-6px, -6px);
}
}