
main.main-content {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 16px;
}



.tournament-banner {
  max-width: 500px;
  margin-inline: auto;
  padding: 0 16px;
}

.banner-wrapper {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  image-rendering: auto;
}


.banner-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.7);
}

.banner-content{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#fff;
}

.timer{
font-size:13px;
font-weight:700;
margin-bottom : 4px;
}
.title{
font-size:26px;
font-weight:900;
margin-bottom : 6px;
color: var(--primary-light);
}

.start-btn{
background:#8b4dff;
border:none;
padding:10px 26px;
font-size:15px;
border-radius:10px;
color:#fff;
margin-bottom:10px;
}

.participants{
font-size:14px;
opacity:0.9;
}



.leaderboard-section{
max-width:500px;
margin-inline:auto;
padding:0 16px;
margin-top:25px;
}

.leaderboard-title{
margin-bottom:12px;
font-size:16px;
font-weight:700;
}



/* هدر کاملاً مطابق هدر اصلی پلتفرم */
.game-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 86px;                  /* دقیقا مثل main-header */
  background: #121212;           /* دقیقا مثل main-header */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-bottom: 1px solid #1f1f1f;
}

.game-header .header-content {
  width: 100%;
  max-width: 500px;              /* دقیقا ساختار ریسپانسیو مثل صفحه‌های اصلی */
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* دکمه برگشت */
.back-btn {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
}

.back-btn img {
  width: 26px;                   /* سایز ایکون هدرها */
}

/* عنوان وسط */
.game-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}


.banner-wrapper {
  position: relative;
  overflow: hidden;
  height: 220px; /* ارتفاع ثابت – می‌تونی تغییرش بدی */
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* فیت شدن بدون به هم ریختن */
  display: block;
}



/* سکشن راهنمای تورنمنت */
.tournament-guide {
  max-width: 500px;
  margin: 16px auto 0;
   margin-left: 18px;
  margin-right: 16px;
  padding: 14px 16px;
  background: #1f1f1f;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  transition: 0.2s;
}

.tournament-guide:hover {
  background: #272727;
}

.guide-icon {
  width: 26px;
  height: 26px;
}

.guide-text {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}

.arrow-left {
  width: 22px;
  filter: brightness(0) invert(1);
}

/* شیت */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 200;
}

.guide-sheet {
  position: fixed;
  right: 0;
  left: 0;
  bottom: -100%;
  background: #171717;
  max-width: 500px;
  margin: 0 auto;

  padding: 16px;
    padding-bottom: 100px;
  border-radius: 18px 18px 0 0;
  transition: 0.35s ease-out;
  z-index: 201;
  
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a2a2a;
}

.sheet-header span {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.close-btn {
  background: none;
  border: none;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
}

.sheet-body {
  margin-top: 16px;
}

.sheet-body p {
  color: #d5d5d5;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.main-content {
  padding-bottom: 90px;
}

.tournament-container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}




.no-tournament {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.no-tournament-box {
    text-align: center;
}

.no-tournament-icon {
    width: 80px;
    margin-bottom: 20px;
    opacity: 0.8;
    filter: brightness(0) invert(1);
}

.no-tournament-box h3 {
    font-size: 20px;
    color: white;
}

.no-tournament-box p {
    font-size: 14px;
    color: #777;
    line-height: 1.8;
}
