/* ============================================================
   ТЮРЯГА — тема главного меню
   Подключается глобально, но использует префикс .tyu_ чтобы
   ничего не сломать в обычных страницах игры.
   ============================================================ */

:root{
  --tyu-concrete:#3a3a3a;
  --tyu-concrete-d:#232323;
  --tyu-steel:#5a5f66;
  --tyu-gold:#d9a521;
  --tyu-ink:#0b0b0b;
  --tyu-ok:#7fd13b;
}

.tyu_wrap{
  max-width:560px;
  margin:0 auto;
  padding:6px 6px 18px;
  box-sizing:border-box;
}

/* ---------- ШАПКА ---------- */
.tyu_top{
  position:relative;
  display:block;
  padding:8px 10px 10px 10px;
  margin:0 0 8px 0;
  background:
    linear-gradient(180deg,#4a4a4a 0%,#2f2f2f 48%,#1d1d1d 100%);
  border:1px solid #000;
  border-top:3px solid #6a6a6a;
  box-shadow:inset 0 0 26px rgba(0,0,0,.75);
}

.tyu_top_zone{
  text-align:center;
  margin-bottom:8px;
}
.tyu_zone_num{
  font:bold 22px/1 'Arial Black',Arial,sans-serif;
  letter-spacing:2px;
  color:#e6e6e6;
  text-shadow:0 2px 0 #000, 0 0 12px rgba(0,0,0,.9);
}
.tyu_zone_txt{
  margin-top:3px;
  font:bold 10px/1.2 Arial,sans-serif;
  letter-spacing:3px;
  color:#8d8d8d;
  text-shadow:0 1px 0 #000;
}

.tyu_top_user{
  display:flex;
  align-items:center;
  gap:10px;
}
.tyu_ava{
  width:52px; height:52px;
  flex:0 0 52px;
  border:2px solid #0a0a0a;
  box-shadow:0 0 0 1px #6d6d6d, 0 2px 6px rgba(0,0,0,.7);
  background:#111;
  object-fit:cover;
}
.tyu_user_info{flex:1 1 auto; min-width:0;}
.tyu_rank{
  font:bold 13px/1.2 Arial,sans-serif;
  color:#f0c74a;
  text-shadow:0 1px 2px #000;
  letter-spacing:.5px;
}
.tyu_lvl{
  color:#cfcfcf; font-weight:normal; font-size:11px;
}
.tyu_nick{
  font:bold 14px/1.3 Arial,sans-serif;
  color:#fff;
  text-shadow:0 1px 2px #000;
  word-wrap:break-word;
}
.tyu_exp{margin-top:4px;}
.tyu_exp_bar{
  height:8px;
  background:#101010;
  border:1px solid #000;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
  overflow:hidden;
}
.tyu_exp_fill{
  height:100%;
  background:linear-gradient(180deg,#9fe04a 0%,#6fb32b 55%,#4d8a17 100%);
  box-shadow:0 0 6px rgba(140,220,80,.55);
  transition:width .3s ease;
}
.tyu_exp_txt{
  margin-top:2px;
  font:11px/1 Arial,sans-serif;
  color:#9a9a9a;
}

.tyu_cur{
  display:flex;
  gap:14px;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.06);
  font:bold 13px/1 Arial,sans-serif;
}
.tyu_gold{color:#f2c94c;}
.tyu_silver{color:#cfd6dd;}

/* ---------- ДВОР / ЗОНА ---------- */
.tyu_yard{
  position:relative;
  margin:0 0 10px 0;
  padding:0 0 10px 0;
  overflow:hidden;
  background:
    linear-gradient(180deg,
      #2b3440 0%,      /* ночное небо */
      #4a4034 38%,
      #8a5a2b 62%,     /* закат */
      #3a2c20 88%,
      #1a1410 100%);
  border:1px solid #000;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8);
}

/* бетонная стена */
.tyu_wall{
  position:relative;
  height:104px;
  margin:14px 8px 0 8px;
  background:
    linear-gradient(180deg,#6d6d6d 0%,#4e4e4e 55%,#3a3a3a 100%);
  border-top:2px solid #8a8a8a;
  border-bottom:3px solid #1a1a1a;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
  overflow:hidden;
}
/* колючая проволока сверху */
.tyu_wire{
  position:absolute; top:0; left:0; right:0; height:14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  border-bottom:1px solid rgba(0,0,0,.5);
}
/* вышки по краям */
.tyu_towers{
  position:absolute; top:0; left:0; right:0; height:34px;
  background:
    linear-gradient(90deg,
      rgba(20,20,20,.92) 0 26px, transparent 26px calc(100% - 26px), rgba(20,20,20,.92) calc(100% - 26px) 100%);
}
.tyu_towers:before,
.tyu_towers:after{
  content:"";
  position:absolute; top:2px;
  width:22px; height:26px;
  background:linear-gradient(180deg,#2b2b2b,#171717);
  border:1px solid #000;
}
.tyu_towers:before{left:2px;}
.tyu_towers:after{right:2px;}

/* надпись на стене */
.tyu_slab{
  position:absolute;
  top:34px; left:0; right:0;
  text-align:center;
  font:bold 19px/1 'Arial Black',Arial,sans-serif;
  letter-spacing:3px;
  color:#dcdcdc;
  text-shadow:0 2px 0 #000, 0 0 10px rgba(0,0,0,.85);
}
.tyu_slab_sub{
  position:absolute;
  top:60px; left:0; right:0;
  text-align:center;
  font:bold 9px/1 Arial,sans-serif;
  letter-spacing:2px;
  color:#b3b3b3;
  text-shadow:0 1px 0 #000;
}

/* земля */
.tyu_ground{
  height:16px;
  margin:0 8px;
  background:linear-gradient(180deg,#241c14,#100c08);
  border-top:1px solid rgba(255,255,255,.05);
}

.tyu_hello{
  margin:10px 10px 8px 10px;
  text-align:center;
  font:bold 14px/1.3 Arial,sans-serif;
  color:#f2f2f2;
  text-shadow:0 1px 3px #000;
}
.tyu_hello b{color:#f2c94c;}

/* кнопка В БОЙ */
.tyu_fight{
  display:block;
  margin:0 auto;
  width:190px;
  padding:11px 0 12px 0;
  text-align:center;
  font:bold 20px/1 'Arial Black',Arial,sans-serif;
  letter-spacing:2px;
  color:#2a1a06;
  text-decoration:none;
  background:linear-gradient(180deg,#f7d24a 0%,#e0a51c 50%,#a86f0d 100%);
  border:1px solid #000;
  border-radius:3px;
  box-shadow:0 3px 0 #6d4708, 0 6px 14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.55);
}
.tyu_fight:active{transform:translateY(2px);box-shadow:0 1px 0 #6d4708, 0 3px 8px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.4);}

/* ---------- СЕТКА 3x3 ---------- */
.tyu_grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:0 0 10px 0;
}
.tyu_tile{
  display:block;
  position:relative;
  padding:9px 4px 8px 4px;
  min-height:78px;
  text-align:center;
  text-decoration:none;
  background:linear-gradient(180deg,#3d3d3d 0%,#2a2a2a 60%,#202020 100%);
  border:1px solid #000;
  border-top:2px solid #5e5e5e;
  box-shadow:inset 0 0 14px rgba(0,0,0,.6);
}
.tyu_tile:active{
  background:linear-gradient(180deg,#2a2a2a,#171717);
  border-top-color:#3a3a3a;
}
.tyu_tile img{
  display:block;
  margin:0 auto 5px auto;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
.tyu_tile_t{
  display:block;
  font:bold 12px/1.2 Arial,sans-serif;
  color:#f0f0f0;
  text-shadow:0 1px 2px #000;
}
.tyu_tile_s{
  display:block;
  margin-top:3px;
  font:10px/1.2 Arial,sans-serif;
  color:#8f8f8f;
  word-wrap:break-word;
}
.tyu_plus{color:var(--tyu-ok); font-style:normal; font-weight:bold;}
.tyu_wait{color:#7a7a7a; font-style:normal;}

/* ---------- ОСТАЛЬНЫЕ ФУНКЦИИ ---------- */
.tyu_more{
  padding:8px 8px 10px 8px;
  background:linear-gradient(180deg,#2b2b2b,#1b1b1b);
  border:1px solid #000;
  border-top:2px solid #4a4a4a;
  box-shadow:inset 0 0 16px rgba(0,0,0,.6);
}
.tyu_more_t{
  margin:0 0 7px 0;
  font:bold 11px/1 Arial,sans-serif;
  letter-spacing:2px;
  color:#9a9a9a;
  border-bottom:1px solid #000;
  padding-bottom:6px;
}
.tyu_row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 6px;
  margin-bottom:4px;
  text-decoration:none;
  background:#242424;
  border:1px solid #000;
  border-left:3px solid #6a6a6a;
}
.tyu_row:active{background:#191919;}
.tyu_row img{flex:0 0 26px;}
.tyu_row_t{
  flex:1 1 auto;
  font:bold 12px/1.25 Arial,sans-serif;
  color:#eaeaea;
  text-shadow:0 1px 1px #000;
}
.tyu_row_s{
  flex:0 0 auto;
  max-width:46%;
  text-align:right;
  font:10px/1.25 Arial,sans-serif;
  color:#8b8b8b;
}

/* ---------- НИЗ ---------- */
.tyu_nav{
  margin:10px 0 0 0;
  text-align:center;
  font:12px/1.7 Arial,sans-serif;
  color:#8d8d8d;
}
.tyu_nav a{color:#c9c9c9;}

.tyu_admin{
  margin:8px 0 0 0;
  text-align:center;
  font:bold 12px/1 Arial,sans-serif;
}
.tyu_admin a{
  display:inline-block;
  padding:8px 14px;
  color:#ffd76a;
  text-decoration:none;
  background:#241a08;
  border:1px solid #000;
  border-top:2px solid #6a541c;
}

/* ---------- МОБИЛКА: во весь экран ---------- */
@media (max-width:580px){
  .tyu_wrap{
    max-width:100%;
    padding:5px 5px 16px;
  }
  .tyu_yard{border-left:0; border-right:0;}
  .tyu_top{border-left:0; border-right:0;}
  .tyu_tile{min-height:84px;}
  .tyu_tile_t{font-size:13px;}
  .tyu_fight{width:min(240px, 74%);}
}