/* bebrix.shop — общее для всех страниц (главная, кабинет): цвета донат-меню (MultiB HubKit), шапка с вкладками,
   кнопки, панели, подвал. Свои стили у страниц — в них самих (главная) и в /lk/lk.css (кабинет). */
@font-face { font-family:'AR ZOZH'; font-weight:800; font-display:swap; src:url('/assets/AR_ZOZH.ttf') format('truetype'); unicode-range:U+0400-052F; }
:root {
	color-scheme:dark;
	--lime:#b9ff1f; --lime-2:#84d900; --lime-dim:#3b5a0c; --ink:#071007;
	--page:#071007; --panel:#0f1a10; --head:#142216; --cell:#132015; --field:#0a140b; --line:#253222; --btn:#1a281c; --tab:#111b13;
	--text:#f4f1df; --gray:#9da995; --gray-2:#6b7867; --pale:#c5cdbc; --red:#ff5a4a; --badge:#e5402b; --gold:#ffd23f;
	--t1:#6e8378; --t2:#8b67e8; --t3:#d32ce6; --t4:#ff3b3b;
	--head-font:'AR ZOZH', Inter, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--page); scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--text); font:500 15px/1.45 Inter, 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing:antialiased;
	background:radial-gradient(1100px 500px at 50% -180px, rgba(185,255,31,.11), transparent 70%), var(--page); }
a { color:inherit; }
button { font:inherit; color:inherit; }
.h { margin:0; font-family:var(--head-font); font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
svg.i { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.panel { background:var(--panel); border:1px solid rgba(244,241,223,.04); border-radius:16px; }

/* ── шапка: вкладки как в донат-меню ── */
.top { position:sticky; top:0; z-index:40; background:rgba(7,16,7,.88); backdrop-filter:blur(12px); border-bottom:1px solid rgba(185,255,31,.09); }
.top-in { max-width:1520px; margin:auto; padding:12px 24px; display:flex; align-items:center; gap:14px; }
.logo { display:flex; align-items:center; gap:10px; margin-right:6px; text-decoration:none; }
.logo-mark { width:36px; height:36px; display:block; border-radius:10px; object-fit:cover; }
.logo b { font:800 21px/1 Inter, sans-serif; letter-spacing:.09em; }
.logo small { display:block; margin-top:3px; color:var(--gray); font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; }
.top-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-tab { position:relative; flex:none; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:10px; background:var(--tab); color:var(--gray);
	text-decoration:none; font:800 15px/1 var(--head-font); letter-spacing:.03em; text-transform:uppercase; transition:color .15s, background .15s; }
.nav-tab:hover { color:var(--text); background:var(--btn); }
.nav-tab.on { color:var(--ink); background:var(--lime); }

/* Сервер: «● Russia #1 31/100»; наведи (на телефоне — нажми) — выезжают «Играть» и IP. */
.srv-wrap { position:relative; }
.srv { display:flex; align-items:center; gap:9px; height:44px; padding:0 12px 0 14px; border:0; border-radius:10px; background:var(--tab); color:var(--gray); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background .15s; }
.srv .dot { width:8px; height:8px; border-radius:50%; background:#ffb22e; box-shadow:0 0 10px #ffb22e; }
.srv.online .dot { background:var(--lime); box-shadow:0 0 10px var(--lime); }
.srv.offline .dot { background:var(--red); box-shadow:0 0 10px var(--red); }
.srv b { color:var(--text); font-weight:800; font-variant-numeric:tabular-nums; }
.srv .chev { width:14px; height:14px; opacity:.6; transition:transform .2s; }
.srv-wrap:hover .srv, .srv-wrap.open .srv { background:var(--btn); }
.srv-wrap:hover .chev, .srv-wrap.open .chev { transform:rotate(180deg); }
.srv-drop { position:absolute; right:0; top:calc(100% + 8px); z-index:5; display:flex; flex-direction:column; gap:6px; width:max-content; min-width:100%; padding:8px;
	border:1px solid rgba(185,255,31,.18); border-radius:12px; background:var(--panel); box-shadow:0 18px 40px rgba(0,0,0,.55);
	opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s; }
.srv-drop::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } /* мостик: курсор не теряет меню по пути вниз */
.srv-wrap:hover .srv-drop, .srv-wrap:focus-within .srv-drop, .srv-wrap.open .srv-drop { opacity:1; transform:none; pointer-events:auto; }
.srv-drop .btn-lime { width:100%; }
.copy { height:40px; padding:0 12px; border:0; border-radius:10px; background:var(--btn); color:var(--pale); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; cursor:pointer; white-space:nowrap; }
.copy:hover, .icon-btn:hover { color:var(--text); background:var(--btn); }
.copy.done { color:var(--lime); }
.btn-lime { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 18px; border:0; border-radius:10px; color:var(--ink); background:var(--lime);
	text-decoration:none; font:800 15px/1 var(--head-font); letter-spacing:.03em; text-transform:uppercase; cursor:pointer; transition:filter .15s, transform .15s; }
.btn-lime:hover { filter:brightness(1.07); }
.btn-lime:active { transform:translateY(1px); }
.btn-lime:disabled { opacity:.45; cursor:not-allowed; filter:none; transform:none; }
.icon-btn { width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background:var(--tab); color:var(--gray); text-decoration:none; }
.icon-btn svg { width:20px; height:20px; fill:currentColor; stroke:none; }
.icon-btn svg.i { fill:none; stroke:currentColor; }

/* ── подвал ── */
.foot { max-width:1520px; margin:26px auto 0; padding:22px 24px 34px; border-top:1px solid var(--line); color:var(--gray); font-size:13px; }
.foot-row { display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; }
.foot-row nav { display:flex; gap:6px 18px; flex-wrap:wrap; }
.foot a { color:var(--pale); text-decoration:none; }
.foot a:hover { color:var(--lime); }
.foot p { max-width:820px; margin:12px 0 0; color:var(--gray-2); font-size:12px; line-height:1.55; }
.foot-social { display:flex; gap:8px; margin-left:auto; }
.foot .icon-btn { color:var(--gray); }
.foot .icon-btn:hover { color:var(--lime); }
.pays { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; color:var(--gray-2); font-size:12px; }
.pays img { display:block; opacity:.75; }

@media (max-width:860px) {
	.top-in { padding:10px 14px; gap:10px; }
	.logo small { display:none; }
	.nav-tab { padding:0 13px; font-size:13.5px; }
}
@media (max-width:600px) {
	.top-in { padding:8px 12px; gap:8px; }
	.logo-mark { width:32px; height:32px; }
	.logo b { font-size:18px; }
	.top-right { gap:6px; }
	.srv { height:40px; padding:0 10px; }
	.srv-name { display:none; }
	.nav-tab { width:40px; height:40px; padding:0; justify-content:center; }
	.nav-tab span { display:none; }
}
@media (max-width:400px) { .logo b { display:none; } } /* на узком телефоне — только картинка-логотип */
/* переключатель RU/EN: на телефоне вместо глобуса — подпись */
@media (max-width:600px) { .nav-tab.lang { width:auto; padding:0 10px; } .nav-tab.lang svg { display:none; } .nav-tab.lang span { display:inline; font-weight:800; } }
.logo b { display:block; padding-top:2px; } /* одна строка BEBRIX по центру значка (подпись под ней убрана) */
/* узкий телефон: в шапке RU/EN + «Кабинет» + «Помощь» + сервер — ужимаем, чтобы влезло без прокрутки вбок */
@media (max-width: 420px) {
	.top-right { gap: 4px; }
	.srv { padding: 0 8px; gap: 6px; }
	.nav-tab { width: 36px; height: 36px; }
	.nav-tab.lang { width: auto; padding: 0 8px; }
	.logo-mark { width: 30px; height: 30px; }
}

/* «Играть» в шапке — быстрое подключение (steam://…+connect <код сервера>) */
.nav-tab.play { color:var(--ink); background:var(--lime); font-weight:800; }
.nav-tab.play:hover { color:var(--ink); background:var(--lime); filter:brightness(1.07); }
@media (max-width:440px) { .logo b { display:none; } } /* с кнопкой «Играть» шапке тесно — на телефоне только картинка-логотип */
.nav-tab.play.on { box-shadow:inset 0 0 0 2px rgba(7,16,7,.35); }

/* выпадашка со списком серверов */
.srv-list { min-width:272px; gap:6px; padding:8px; }
.srv-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px; background:var(--cell); }
.srv-item > .dot { width:8px; height:8px; border-radius:50%; background:#ffb22e; box-shadow:0 0 8px #ffb22e; flex:none; }
.srv-item.online > .dot { background:var(--lime); box-shadow:0 0 8px var(--lime); }
.srv-item.offline > .dot { background:var(--red); box-shadow:0 0 8px var(--red); }
.si-info { display:flex; flex-direction:column; flex:1 1 auto; min-width:0; margin-right:auto; }
.si-name { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-players { color:var(--gray); font-size:12px; font-variant-numeric:tabular-nums; }
.srv-item .btn-lime { flex:none; width:auto; height:32px; padding:0 13px; font-size:12px; gap:6px; letter-spacing:.02em; }
.srv-item .btn-lime svg { width:14px; height:14px; }