/*
Theme Name: FalconMH iCCup
Theme URI: https://maphack.alexfalcon.site
Author: FalconMH
Description: Тёмная тема в стиле Warcraft III Reforged: уголь, угольная подсветка, золото и латунь. WC3-курсор, кованые рамки блоков.
Version: 2.0
Text Domain: falconmh
*/

:root{
  --bg:        #151515;
  --bg2:       #0d0d0d;
  --panel:     #1f1f1f;
  --panel2:    #202020;
  --line:      #292929;
  --line2:     #3f3f3f;
  --text:      #d9d3c3;
  --dim:       #8a8a8a;
  --gold:      #f8b700;
  --gold-lt:   #ffd823;
  --gold-dk:   #915808;
  --orange:    #f2930d;
  --red:       #8a1a10;
  --red-lt:    #c84448;
  --green:     #3df543;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 340px at 50% -80px, rgba(242,147,13,.16), rgba(0,0,0,0) 70%),
    radial-gradient(600px 260px at 15% 120px, rgba(248,183,0,.07), rgba(0,0,0,0) 70%),
    linear-gradient(180deg,#151515,#0d0d0d 420px,#151515);
  background-color:var(--bg);
  font-family:"Segoe UI",Verdana,Arial,sans-serif; font-size:13.5px; line-height:1.55;
  color:var(--text);
  cursor:url('assets/images/kursor_nightelf.cur'), default;
  min-height:100vh;
}
a{color:var(--gold-lt); text-decoration:none}
a:hover{color:#fff; text-decoration:none}
img{max-width:100%; height:auto; border:0}
h1,h2,h3,h4{color:var(--gold); font-weight:700; margin:0 0 10px; letter-spacing:.3px}
h1{font-size:23px} h2{font-size:18px} h3{font-size:15px}
p{margin:0 0 10px}
.wrap{max-width:1220px; margin:0 auto; padding:0 14px}
.row{display:flex; gap:16px; align-items:flex-start}
.main{flex:1; min-width:0}
.side{width:300px; flex:0 0 300px}

/* ================= шапка ================= */
#head{
  background:linear-gradient(180deg,#1f1f1f,#151515);
  border-bottom:1px solid var(--line2);
  box-shadow:0 8px 26px rgba(0,0,0,.85), inset 0 -1px 0 rgba(248,183,0,.18);
}
.head-in{display:flex; align-items:center; gap:18px; padding:12px 14px}
.logo{display:flex; align-items:center; gap:12px; font-size:21px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px;
  background:linear-gradient(180deg,#ffe98a,#f8b700 55%,#915808);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.6)}
.logo img{height:38px; width:auto; border:1px solid var(--line2); border-radius:3px}
.head-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.lang{font-size:11px; color:var(--dim); border:1px solid var(--line2); padding:4px 9px; border-radius:3px; background:#191919}

/* ================= меню ================= */
#menu{background:linear-gradient(180deg,#1a1a1a,#121212); border-bottom:1px solid var(--line)}
#menu ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap}
#menu a{display:block; padding:11px 15px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text);
  border-right:1px solid #1e1e1e; transition:.15s}
#menu a:hover{background:linear-gradient(180deg,rgba(248,183,0,.18),rgba(248,183,0,.05)); color:var(--gold-lt); text-shadow:0 0 10px rgba(248,183,0,.45)}
#menu .cur > a{color:var(--gold-lt); background:linear-gradient(180deg,rgba(248,183,0,.2),rgba(248,183,0,.06));
  box-shadow:inset 0 -2px 0 var(--gold)}
.submenu{display:none; position:absolute; top:100%; left:0; min-width:240px; z-index:40; background:#1a1a1a;
  border:1px solid var(--line2); box-shadow:0 14px 30px rgba(0,0,0,.85)}
#menu li{position:relative}
#menu li:hover .submenu{display:block}
.submenu a{text-transform:none; font-size:12.5px; letter-spacing:0; padding:9px 13px; border-right:0}

/* ================= кованый блок ================= */
.block{
  position:relative; margin-bottom:16px; background:linear-gradient(180deg,#212121,#1b1b1b);
  border:1px solid var(--line2);
  box-shadow:0 0 0 1px #0a0a0a, 0 10px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
.block:before,.block:after{content:""; position:absolute; width:9px; height:9px; border:2px solid var(--gold-dk); opacity:.85}
.block:before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.block:after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.block-t{
  background:linear-gradient(180deg,#262626,#1a1a1a);
  border-bottom:1px solid var(--line2);
  color:var(--gold-lt); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.1px;
  padding:9px 13px; text-shadow:0 1px 0 #000;
  box-shadow:inset 0 1px 0 rgba(248,183,0,.14);
}
.block-b{padding:14px}
.block-b > :first-child{margin-top:0}
.block-b > :last-child{margin-bottom:0}

/* ================= герой ================= */
.hero{display:flex; gap:20px; align-items:center; padding:22px;
  background:
    radial-gradient(500px 200px at 20% 30%, rgba(242,147,13,.22), rgba(0,0,0,0) 70%),
    radial-gradient(400px 180px at 85% 80%, rgba(138,26,16,.35), rgba(0,0,0,0) 70%),
    linear-gradient(180deg,#232323,#171717);
}
.hero-art{flex:0 0 300px}
.hero-art img{display:block; border:1px solid var(--line2); box-shadow:0 8px 20px rgba(0,0,0,.7)}
.hero h1{font-size:clamp(22px,3.2vw,32px); text-transform:uppercase; letter-spacing:1px; line-height:1.2;
  background:linear-gradient(180deg,#ffe98a,#f8b700 55%,#915808); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.8))}
.hero .lead{color:var(--text); font-size:14.5px; max-width:620px}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.badge{font-size:11.5px; color:var(--text); background:#161616; border:1px solid var(--line2); padding:4px 10px}
.badge b{color:var(--gold-lt)}

/* ================= кнопки (кованые) ================= */
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; color:#221503 !important; cursor:pointer;
  background:linear-gradient(180deg,#ffe07a,#f8b700 45%,#c97a06);
  border:1px solid #6b4200;
  box-shadow:0 0 0 1px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.55), 0 6px 14px rgba(0,0,0,.5);
  transition:.15s; text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px); color:#1b1002 !important}
.btn:active{transform:translateY(1px); box-shadow:0 0 0 1px rgba(0,0,0,.7), inset 0 2px 5px rgba(0,0,0,.35)}
.btn-ghost{background:linear-gradient(180deg,#252525,#191919); color:var(--gold-lt) !important; border-color:var(--line2);
  box-shadow:0 0 0 1px #0a0a0a, inset 0 1px 0 rgba(255,255,255,.06); text-shadow:0 1px 0 #000}
.btn-ghost:hover{color:#fff !important; border-color:var(--gold-dk)}
.btns{display:flex; gap:10px; flex-wrap:wrap}

/* ================= новости ================= */
.news{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #242424}
.news:last-child{border-bottom:0}
.news__thumb{width:132px; flex:0 0 132px}
.news__thumb img{display:block; border:1px solid var(--line2); box-shadow:0 4px 12px rgba(0,0,0,.6)}
.news__title{font-size:14.5px; font-weight:700; margin:0 0 5px}
.news__title a{color:var(--gold-lt)}
.news__title a:hover{color:#fff}
.news__meta{font-size:11px; color:var(--dim); margin-bottom:7px; text-transform:uppercase; letter-spacing:.5px}
.news__text{color:var(--text)}
.more{display:inline-block; margin-top:8px; font-size:12px; color:var(--orange); font-weight:600}
.more:hover{color:var(--gold-lt)}

/* ================= списки ================= */
.dl{list-style:none; margin:0; padding:0}
.dl li{padding:7px 0; border-bottom:1px solid #232323; font-size:13px}
.dl li:last-child{border-bottom:0}
.dl a{color:var(--text)}
.dl a:hover{color:var(--gold-lt)}
.dl li:before{content:"◆"; color:var(--gold-dk); font-size:9px; margin-right:8px; vertical-align:2px}

/* ================= сайдбар ================= */
.socials{display:flex; flex-wrap:wrap; gap:9px}
.socials a{width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#232323,#191919); border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.socials a:hover{border-color:var(--gold-dk); box-shadow:0 0 12px rgba(248,183,0,.25)}
.socials img{width:24px; height:24px; object-fit:contain}
.stat-row{display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid #232323; font-size:13px}
.stat-row:last-child{border-bottom:0}
.stat-row b{color:var(--gold-lt)}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--green); margin-right:8px; box-shadow:0 0 10px var(--green)}
.price{font-size:26px; font-weight:800; color:var(--gold-lt); text-shadow:0 0 16px rgba(248,183,0,.35)}

/* ================= подвал ================= */
#foot{background:linear-gradient(180deg,#181818,#0f0f0f); border-top:1px solid var(--line2); margin-top:26px; padding:22px 0;
  text-align:center; font-size:12px; color:var(--dim)}
#foot .socials{justify-content:center; margin-bottom:14px}
#foot a{color:var(--gold-lt)}

/* ================= адаптив ================= */
@media(max-width:900px){
  .row{flex-direction:column}
  .side{width:auto; flex:1 1 auto}
  .hero{flex-direction:column; align-items:flex-start}
  .hero-art{flex:1 1 auto; width:100%}
  #menu ul{overflow-x:auto; flex-wrap:nowrap}
  #menu a{white-space:nowrap}
}