/* ═══════════════════════════════════════════════════════════════
   Общий стиль страниц сайта «Под Пивас» (кроме главной — у неё свой).
   Шапка, баннер страницы, панели с золотыми уголками, кнопки, подвал.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#07080c;
  --panel:rgba(13,11,10,.93);
  --panel-solid:#0d0b0a;
  --card:rgba(22,17,13,.88);
  --line:rgba(201,150,70,.55);
  --line-soft:rgba(201,150,70,.22);
  --gold:#d9a54a;
  --gold-2:#f4c56a;
  --gold-3:#ffe1a0;
  --beer:#e59a2b;
  --text:#f3e6cf;
  --text2:#c9b797;
  --text3:#8d7c61;
  --mute:#6f6556;
  --discord:#5865F2;
  --green:#3fcf6b;
  --red:#d9423b;
  --serif:'Playfair Display',Georgia,serif;
  --img:url('/guild/assets/bg.webp');
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.55;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
svg.ic{width:1em;height:1em;fill:currentColor;flex-shrink:0}
[hidden]{display:none!important}

/* ── Баннер страницы с картинкой таверны ── */
.hero{
  position:relative;
  padding-bottom:70px;
  background:
    linear-gradient(180deg, rgba(7,8,12,.6) 0%, rgba(7,8,12,.25) 30%, rgba(7,8,12,.55) 70%, var(--bg) 100%),
    radial-gradient(ellipse 50% 60% at 50% 60%, rgba(7,8,12,.6), transparent 70%),
    var(--img) center 30%/cover no-repeat;
}

/* ── Шапка ── */
.topbar{position:relative;z-index:50;padding:16px 28px 0}
.topbar-inner{max-width:1560px;margin:0 auto;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-emblem{font-size:46px;line-height:1;filter:drop-shadow(0 4px 12px rgba(229,154,43,.55))}
.brand-name{
  font-family:var(--serif);font-weight:900;font-size:40px;line-height:1;
  background:linear-gradient(180deg,var(--gold-3) 0%,var(--gold-2) 45%,var(--beer) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(60,30,0,.9)) drop-shadow(0 4px 14px rgba(0,0,0,.7));
}
.brand-sub{font-size:11px;letter-spacing:3.2px;color:var(--text2);font-weight:600;text-transform:uppercase;margin-top:4px;text-shadow:0 1px 4px #000}
.brand-kicker{font-size:10.5px;letter-spacing:4.5px;font-weight:800;text-transform:uppercase;color:var(--gold);margin-bottom:3px;text-shadow:0 1px 4px #000}
.soon-badge{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:4px;vertical-align:1px;
  border:1px solid rgba(244,197,106,.6);background:rgba(229,154,43,.16);
  color:var(--gold-3);font-size:9.5px;letter-spacing:1.4px;font-weight:700;text-transform:uppercase;
}
.mainmenu{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;max-width:1400px;margin:30px auto 0;padding:0 20px;position:relative;z-index:3}
.topbar-inner .join-btn-top{margin-left:auto}
.mainmenu a{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;border-radius:7px;
  background:linear-gradient(180deg,rgba(24,19,15,.92),rgba(12,10,9,.92));
  border:1px solid rgba(201,150,70,.28);
  color:var(--text);font-size:14px;font-weight:500;
  box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,160,.06);
  transition:border-color .15s,background .15s,color .15s;
}
.mainmenu a .mi{font-size:17px;line-height:1}
.mainmenu a:hover{border-color:var(--line);color:var(--gold-3)}
.mainmenu a.active{
  border-color:var(--gold-2);color:var(--gold-3);
  background:linear-gradient(180deg,rgba(80,52,18,.9),rgba(40,26,10,.92));
  box-shadow:0 0 0 1px rgba(244,197,106,.25),0 0 18px rgba(229,154,43,.3),inset 0 1px 0 rgba(255,220,160,.18);
}
.join-btn-top{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  padding:12px 22px;border-radius:8px;
  background:linear-gradient(180deg,var(--gold-2),var(--beer));
  color:#1d1100;font-weight:800;font-size:15px;
  box-shadow:0 6px 22px rgba(229,154,43,.4),inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .15s,transform .1s;
}
.join-btn-top:hover{filter:brightness(1.08);transform:translateY(-1px)}
.join-btn-top .ic{font-size:20px}
.mobile-toggle{
  display:none;margin-left:auto;width:44px;height:44px;border-radius:8px;cursor:pointer;
  background:rgba(12,10,9,.9);border:1px solid var(--line);color:var(--gold-2);font-size:20px;
}

/* ── Заголовок страницы ── */
.page-head{position:relative;z-index:2;text-align:center;padding:70px 20px 0;max-width:900px;margin:0 auto}
.page-title{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--serif);font-weight:900;font-size:clamp(40px,5.4vw,72px);line-height:1.05;
  background:linear-gradient(180deg,#fff0c4 0%,var(--gold-2) 40%,var(--beer) 80%,#b8691a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(70,35,0,.95)) drop-shadow(0 8px 26px rgba(0,0,0,.8));
}
.page-title .pe{-webkit-text-fill-color:initial;color:initial;font-size:.75em;filter:drop-shadow(0 4px 16px rgba(229,154,43,.6))}
.page-sub{
  margin:16px auto 0;max-width:620px;font-size:18px;line-height:1.45;color:#fff4de;font-weight:500;
  text-shadow:0 2px 10px #000,0 0 30px rgba(0,0,0,.8);
}

/* ── Контент ── */
.page-wrap{position:relative;z-index:3;max-width:1100px;margin:0 auto;padding:0 28px 50px;display:flex;flex-direction:column;gap:22px}
.page-wrap.narrow{max-width:780px}

/* ── Панель с золотыми уголками ── */
.panel{
  position:relative;
  background:linear-gradient(180deg,rgba(18,14,11,.94),var(--panel));
  border:1px solid var(--line);border-radius:10px;padding:24px 26px;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.55),0 0 0 4px rgba(201,150,70,.18),
    0 14px 40px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,220,160,.07),inset 0 0 40px rgba(0,0,0,.35);
}
.panel::before{
  content:"";position:absolute;inset:-5px;pointer-events:none;
  --c:var(--gold-2);--l:22px;--w:2px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) top left/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--w) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--w) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--w) var(--l) no-repeat;
  filter:drop-shadow(0 0 4px rgba(244,197,106,.55));
}
.panel-title{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-weight:800;font-size:23px;color:var(--gold-2);
  margin-bottom:16px;text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.panel-title .pt-ico{font-size:28px;line-height:1;filter:drop-shadow(0 2px 8px rgba(229,154,43,.45))}
.pt-more{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--text2);
  padding:7px 14px;border-radius:6px;background:rgba(0,0,0,.45);border:1px solid var(--line-soft);
}
.pt-more:hover{color:var(--gold-3);border-color:var(--line)}

/* ── Кнопки ── */
.btn-primary,.btn-outline,.btn-discord{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:9px;font-size:16px;font-weight:700;font-family:inherit;
  border:none;cursor:pointer;transition:filter .15s,transform .1s;
}
.btn-primary{background:linear-gradient(180deg,var(--gold-2),var(--beer));color:#1d1100;box-shadow:0 8px 28px rgba(229,154,43,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-outline{background:rgba(0,0,0,.45);color:var(--gold-2);border:1px solid var(--line)}
.btn-discord{
  background:linear-gradient(180deg,#1b2270,#121852);border:1px solid rgba(120,132,255,.55);color:#e9ebff;
  box-shadow:0 0 18px rgba(88,101,242,.25),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-discord .ic{font-size:22px}
.btn-primary:hover,.btn-outline:hover,.btn-discord:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ── «Скоро» ── */
.soon{text-align:center;padding:60px 30px}
.soon.with-art{
  background:
    linear-gradient(180deg,rgba(13,11,10,.72),rgba(13,11,10,.93) 70%),
    var(--img) center 60%/cover no-repeat,var(--panel-solid);
}
.soon-icon{font-size:70px;line-height:1;display:block;margin-bottom:18px;filter:drop-shadow(0 6px 18px rgba(229,154,43,.45))}
.soon-title{font-family:var(--serif);font-weight:800;font-size:30px;color:var(--gold-2);margin-bottom:12px}
.soon-text{color:var(--text2);font-size:15.5px;max-width:520px;margin:0 auto 28px;line-height:1.7}
.soon-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

footer{text-align:center;padding:26px 20px 40px;color:var(--text3);font-size:12.5px}
footer .fb{font-family:var(--serif);font-weight:800;font-size:18px;color:var(--gold-2);margin-bottom:4px}

/* ── Адаптив ── */
@media(max-width:1400px){.mainmenu a{padding:10px 12px;font-size:13px}.brand-name{font-size:32px}}
@media(max-width:860px){
  .mainmenu{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:0 16px 6px;margin-top:22px;scrollbar-width:none}
  .mainmenu::-webkit-scrollbar{display:none}
  .mainmenu a{flex-shrink:0}
  .join-btn-top .join-label{display:none}
  .topbar{padding:12px 16px 0}
  .brand-emblem{font-size:34px}
  .brand-name{font-size:26px}
  .brand-sub{font-size:9px;letter-spacing:2px}
  .brand-kicker{font-size:9px;letter-spacing:3px;margin-bottom:1px}
  .page-head{padding-top:44px}
  .page-sub{font-size:15.5px}
  .page-wrap{padding:0 16px 30px}
  .panel{padding:20px 18px}
}