.burger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 20px;
cursor: pointer;
}

.burger span {
display: block;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all 0.3s ease;
}

@media (max-width: 768px) {
.nav, .header-buttons {
display: none;
}
.burger {
display: flex;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
}
}

.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #111;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
transition: opacity 0.3s ease;
}

.mobile-menu.active {
display: flex;
opacity: 1;
}

.mobile-menu-logo img {
height: 60px;
margin-bottom: 40px;
}

.mobile-menu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
gap: 25px;
}

.mobile-menu ul li a {
font-size: 24px;
color: #fff;
text-decoration: none;
transition: color 0.3s, transform 0.2s;
}

.mobile-menu ul li a:hover {
color: #3389DD;
transform: translateY(-2px);
}

.mobile-menu ul li a.btn-blue {
background: rgba(51,137,221,1);
color: #fff;
padding: 12px 25px;
border-radius: 8px;
display: inline-block;
font-weight: 700;
}

.mobile-menu ul li a.btn-blue:hover {
background: rgba(51,137,221,0.9);
transform: translateY(-2px);
}

.burger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}


@media (max-width: 1024px) {
.welcome-content h1 {
font-size: 80px;
}

.welcome-content p {
font-size: 28px;
max-width: 800px;
}

.welcome-btn {
width: 220px;
height: 65px;
font-size: 20px;
}

.how-to-play h2 {
font-size: 60px;
}

.step h3 {
font-size: 30px;
}

.step p {
font-size: 15px;
}

.how-btn {
width: 300px;
height: 85px;
font-size: 30px;
}

.steps {
gap: 60px;
}

.footer-container {
width: 95%;
}
}

@media (max-width: 768px) {
.welcome-content h1 {
font-size: 60px;
}

.welcome-content p {
font-size: 24px;
max-width: 600px;
}

.welcome-btn {
width: 200px;
height: 60px;
font-size: 18px;
}

.how-to-play h2 {
font-size: 48px;
}

.step img {
width: 80px;
height: 80px;
}

.step h3 {
font-size: 24px;
}

.step p {
font-size: 14px;
}

.how-btn {
width: 250px;
height: 80px;
font-size: 28px;
}

.steps {
flex-direction: column;
gap: 40px;
}

.footer-container {
flex-direction: column;
height: auto;
gap: 20px;
align-items: center;
text-align: center;
}

.footer-center {
flex-direction: column;
gap: 10px;
}

.footer-right {
justify-content: center;
}
}

@media (max-width: 480px) {
.welcome-content h1 {
font-size: 40px;
}

.welcome-content p {
font-size: 18px;
max-width: 90%;
}

.welcome-btn {
width: 160px;
height: 50px;
font-size: 16px;
}

.how-to-play h2 {
font-size: 36px;
}

.step img {
width: 70px;
height: 70px;
}

.step h3 {
font-size: 20px;
}

.step p {
font-size: 13px;
}

.how-btn {
width: 200px;
height: 70px;
font-size: 22px;
}

.steps {
gap: 30px;
}
}

@media (max-width: 768px) {
.steps {
flex-direction: column;
gap: 40px;
align-items: center;
}

.step {
max-width: 300px;
width: 100%;
margin: 0 auto;
text-align: center;
}
}

@media (max-width: 480px) {
.steps {
flex-direction: column;
gap: 30px;
align-items: center;
}

.step {
max-width: 260px;
width: 100%;
margin: 0 auto;
text-align: center;
}
}

@media (max-width: 1024px) {
.donate-container,
.login-container {
width: 480px;
height: 450px;
padding: 40px;
}

.donate-container h2,
.login-container h2 {
font-size: 40px;
}

.donate-field label,
.login-field label {
font-size: 13px;
}

.donate-field input,
.login-field input {
width: 400px;
height: 45px;
font-size: 13px;
}

.donate-btn,
.login-btn {
width: 300px;
height: 45px;
font-size: 20px;
}

.donate-help,
.login-help {
font-size: 13px;
}
}

@media (max-width: 768px) {
.donate-container,
.login-container {
width: 350px;
height: auto;
padding: 30px;
}

.donate-container h2,
.login-container h2 {
font-size: 32px;
text-align: center;
}

.donate-field label,
.login-field label {
font-size: 12px;
}

.donate-field input,
.login-field input {
width: 100%;
max-width: 300px;
height: 40px;
font-size: 12px;
}

.donate-btn,
.login-btn {
width: 100%;
max-width: 250px;
height: 40px;
font-size: 18px;
}

.donate-help,
.login-help {
font-size: 12px;
}
}

@media (max-width: 480px) {
.donate-container,
.login-container {
width: 350px;
height: auto;
padding: 30px;
}

.donate-container h2,
.login-container h2 {
font-size: 28px;
}

.donate-field label,
.login-field label {
font-size: 11px;
}

.donate-field input,
.login-field input {
width: 100%;
height: 35px;
font-size: 11px;
}

.donate-btn,
.login-btn {
width: 100%;
height: 35px;
font-size: 16px;
}

.donate-help,
.login-help {
font-size: 11px;
}
}

@media (max-width: 1300px) {
.profile-container {
width: 95%;
min-height: auto;
padding: 30px;
gap: 30px;
}

.profile-header h2 {
font-size: 50px;
}

.profile-tabs .tab {
font-size: 20px;
}

.profile-main {
height: 220px;
}

.profile-main-left {
flex: 0 0 200px;
}

.avatar {
width: 120px;
height: 120px;
}

.profile-main-right {
padding: 15px;
}

.nickname {
font-size: 30px;
}

.job {
font-size: 14px;
margin-bottom: 15px;
}

.stats .stat span {
font-size: 12px;
}

.health-bar {
width: 160px;
height: 12px;
}

.hunger-bar {
width: 80px;
height: 12px;
}

.level {
font-size: 14px;
}

.profile-bottom {
gap: 20px;
}

.inventory,
.transport {
height: 240px;
padding: 15px 30px;
}

.inventory h3,
.transport h3 {
font-size: 28px;
}

.item-box {
width: 120px;
height: 120px;
}

.item p {
width: 120px;
font-size: 11px;
}
}

@media (max-width: 1100px) {
.profile-container {
width: 90%;
padding: 20px;
gap: 20px;
}

.profile-header h2 {
font-size: 40px;
text-align: center;
}

.profile-tabs {
flex-direction: column;
gap: 10px;
align-items: center;
}

.profile-tabs .tab {
font-size: 18px;
}

.profile-main {
flex-direction: column;
height: auto;
padding: 15px;
}

.profile-main-left {
flex: none;
margin-bottom: 15px;
}

.avatar {
width: 100px;
height: 100px;
}

.profile-main-right {
padding: 10px;
align-items: center;
text-align: center;
}

.nickname {
font-size: 26px;
}

.job {
font-size: 13px;
}

.stats {
flex-direction: column;
gap: 10px;
align-items: center;
}

.health-bar {
width: 140px;
height: 10px;
}

.hunger-bar {
width: 70px;
height: 10px;
}

.level {
position: static;
margin-top: 10px;
}

.profile-bottom {
flex-direction: column;
gap: 15px;
}

.inventory,
.transport {
width: 100%;
height: auto;
padding: 15px;
}

.inventory h3,
.transport h3 {
font-size: 24px;
text-align: center;
}

.item-box {
width: 100px;
height: 100px;
}

.item p {
width: 100px;
font-size: 10px;
}
}

@media (max-width: 480px) {
.profile-container {
width: 95%;
padding: 15px;
gap: 15px;
}

.profile-header h2 {
font-size: 32px;
}

.profile-tabs .tab {
font-size: 16px;
}

.profile-main-left {
margin-bottom: 10px;
}

.avatar {
width: 80px;
height: 80px;
}

.profile-main-right {
padding: 5px;
}

.nickname {
font-size: 22px;
}

.job {
font-size: 12px;
}

.stats {
gap: 5px;
}

.health-bar {
width: 120px;
height: 8px;
}

.hunger-bar {
width: 60px;
height: 8px;
}

.inventory h3,
.transport h3 {
font-size: 20px;
}

.item-box {
width: 80px;
height: 80px;
}

.item p {
width: 80px;
font-size: 9px;
}
}

.inventory .items,
.transport .items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

/* 1024px */
@media (max-width: 1300px) {
  .profile-container {
    width: 1300px;
    min-height: 750px;
    padding: 30px;
    gap: 30px;
  }

  .profile-header h2 {
    font-size: 32px;
  }

  .rating-board h3 {
    font-size: 28px;
  }

  .rating-row {
    grid-template-columns: 50px 1fr 150px 150px;
    padding: 8px 15px;
    font-size: 14px;
  }

  .rating-row .place {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}

/* 768px */
@media (max-width: 768px) {
  .profile-container {
    padding: 20px;
    gap: 20px;
  }

  .profile-header h2 {
    font-size: 32px;
    text-align: center;
  }

  .rating-board h3 {
    font-size: 24px;
    text-align: center;
  }

  .rating-row {
    grid-template-columns: 40px 1fr 120px 120px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .rating-row .place {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .rating-row .player,
  .rating-row .balance,
  .rating-row .server {
    text-align: center;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .profile-container {
    padding: 15px;
    gap: 15px;
  }

  .profile-header h2 {
    font-size: 32px;
  }

  .rating-board h3 {
    font-size: 20px;
  }

  .rating-row {
    grid-template-columns: 30px 1fr 80px 80px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .rating-row .place {
    width: 25px;
    height: 25px;
    font-size: 10px;
  }

  .rating-row .player,
  .rating-row .balance,
  .rating-row .server {
    text-align: center;
    padding: 0;
  }
}