@font-face {
    font-family: 'PixelOperatorSC-Bold';
    src: url('media/PixelOperatorSC-Bold.ttf') format('truetype');

}

#upParticles {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* не блокирует клики */
    z-index: 1;           /* при необходимости увеличь/уменьши */
    mix-blend-mode: normal; /* по желанию — светлее эффект */
  }

body {	
  background: url('media/mmbg1.jpg') no-repeat center center fixed;
  background-position: 65% center;
  background-size: 98% auto;
  image-rendering: pixelated;
  background-color: #000;
  margin: 0;
  font-family: 'PixelOperatorSC-Bold', sans-serif;
  color: white;
}

* {
    font-family: 'PixelOperatorSC-Bold', sans-serif !important;
}

#toplogo{
	height: 55px;	
	display: flex;
    height: 55px;
    align-items: center;
    flex-direction: row;
	font-size: 23px;
}

#xlogo{
	height: 100%;
	margin-left: 10px;
}

#mainMenu{
	position: absolute;
    left: 12%;
	top: 25%;
	display: flex;
    flex-direction: column; /* <-- элементы идут в столбик */
    gap: 30px;
	z-index: 2;
}

#containerGifRight {
    position: fixed;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
	z-index: 1;
}

.gif-inside {
    width: 55vh;     /* Это 20% ширины окна */
    max-width: 500px; /* необязательно, просто ограничение */
    height: auto;
}

.btnMain {
	display: flex;
    justify-content: center;   /* по горизонтали */
    align-items: center;        /* по вертикали */
	height: 10vh;
    width: 32vw;
    background: #000;              /* чёрный фон */
    color: #fff;                   /* белый текст */
    font-family: 'PixelOperatorSC-Bold', monospace;
    font-size: 3vw;
    padding: 10px 14px;
    border: 4px solid #fff;        /* толстая пиксельная рамка */
    border-radius: 0;              /* никаких скруглений */
    cursor: pointer;
    image-rendering: pixelated;    /* важное свойство для пиксельности */
    transition: background 0.15s, transform 0.05s;
    letter-spacing: 1px;	
	box-shadow: 8px 8px 0 #000;  
}


/* Hover — кнопка сереет как старый интерфейс */
.btnMain:hover {
    background: #666;
}

/* Нажатие — лёгкий "пиксельный нажим" вниз */
.btnMain:active {
    background: #444;
    transform: translateY(2px);
	box-shadow: 8px 8px 0 #000;
}

.btnMain:focus {
    outline: none;
    border-color: #b6b6b6;
    box-shadow: 8px 8px 0 #000;
}

#connectWalletBtn {
    font-size: 2vw;
}

#musicBtn {
    position: fixed;
    bottom: 20px;
    left: 20px;

    width: 27px;
    height: 27px;

    background-color: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;

    border: 2px solid #fff;
    image-rendering: pixelated;
    cursor: pointer;

    z-index: 999;
}

#musicBtn:hover {
    background-color: #666;
}

#musicBtn:active {
    background-color: #444;
}


#storeBtn{
    background: #1e1e1e;
    color: #747474;
    border-color: #666;
    cursor: default;
    box-shadow: 8px 8px 0 #000;
}

/* убираем hover и active */
#storeBtn:hover,
#connectWalletBtn:hover,
#storeBtn:active,
#connectWalletBtn:active {
    background: #1e1e1e;
    transform: none;
}

/* убираем focus */
#storeBtn:focus,
#storeBtn:focus-visible,
#connectWalletBtn:focus-visible {
    outline: none;
    border-color: #1e1e1e;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    background-color: #000;
    margin: 15% auto;
    padding: 20px;
    border: 4px solid #fff;
    width: 65%;
    max-width: 800px;
    text-align: center;
    box-shadow: 8px 8px 0 #000;
    image-rendering: pixelated;
}

.close {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #666;
    text-decoration: none;
}

.authBtn {
    display: block;
    width: 80%;
    margin: 20px auto;
    padding: 15px;
    background: #000;
    color: #fff;
    border: 4px solid #fff;
    font-size: 2vw;
    cursor: pointer;
    image-rendering: pixelated;
    transition: background 0.15s, transform 0.05s;
    box-shadow: 8px 8px 0 #000;
}

.authBtn:hover {
    background: #666;
}

.authBtn:active {
    background: #444;
    transform: translateY(2px);
    box-shadow: 8px 8px 0 #000;
}

.authBtn:focus {
    outline: none;
    border-color: #b6b6b6;
}

/* Leaderboard styles */
#leaderboardTabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tabBtn {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 1.5vw;
    image-rendering: pixelated;
    transition: background 0.15s;
    box-shadow: 4px 4px 0 #000;
}

.tabBtn:hover {
    background: #666;
}

.tabBtn.active {
    background: #666;
    border-color: #b6b6b6;
}

.leaderboard-list {
    text-align: left;
    max-height: 500px;
    overflow-y: auto;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #666;
    font-size: 1.2vw;
}

.leaderboard-item.rank-1 {
    color: #ffd700;
}

.leaderboard-item.rank-2 {
    color: #c0c0c0;
}

.leaderboard-item.rank-3 {
    color: #cd7f32;
}