/* =========================================================
   Olymp / Main Stylesheet
   - Темная тема в стиле примера
   - Хедер: логотип слева, меню по центру, кнопки справа
   - Пункт «Казино» — жирная «пилюля» с эмодзи 🎰
   - Контент: заголовки + карточки (скругления) для абзацев/списков
   ========================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --bg:#0b144a;
  --bg-soft:#0e1757;
  --border:rgba(255,255,255,.12);
  --text:#ffffff;
  --muted:#cfd6ff;
  --accent:#00b36b;
  --accent-2:#00c978;
  --link:#4da3ff;
  --card:rgba(255,255,255,.06);
  --card-hover:rgba(255,255,255,.12);
  --shadow:0 6px 18px rgba(0,0,0,.25);
  --radius:14px;
  --radius-pill:999px;
}

/* ---------- Base Reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0}

/* ---------- Layout ---------- */
.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  background:var(--bg);
  border-bottom:2px solid #162060;
  position:relative;
  z-index:10;
  padding:10px 0;
}
.site-header .container{
  display:flex;
  align-items:center;              /* логотип, меню, кнопки по одной линии */
  justify-content:space-between;
  gap:16px;
}

/* logo */
.logo{display:flex;align-items:center;gap:10px}
.logo img{
  height:40px;                     /* выравнивание по высоте с текстом */
  width:auto;
}

/* nav */
.main-nav{flex:1;display:flex;justify-content:center}
.main-nav ul{display:flex;gap:26px;align-items:center}
.main-nav a{
  color:#fff;
  font-weight:600;
  line-height:1;
  padding:10px 0;
  transition:opacity .2s;
}
.main-nav a:hover{opacity:.85}

/* «Казино» — пилюля с эмодзи 🎰 */
.nav-casino{
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, var(--shadow);
}
.nav-casino:hover{background:rgba(255,255,255,.14)}

/* auth buttons */
.auth-buttons{display:flex;align-items:center;gap:10px}
.btn{
  display:inline-block;
  padding:9px 18px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  transition:transform .08s, background .2s, opacity .2s, border-color .2s;
  line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn-outline{
  border:1px solid rgba(255,255,255,.8);
  color:#fff;
  background:transparent;
}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border:none;
}
.btn-primary:hover{background:var(--accent-2)}

/* =========================================================
   MAIN CONTENT
   ========================================================= */
main{
  max-width:1000px;
  margin:40px auto;
  padding:0 16px;
  line-height:1.7;
  color:var(--text);
}

/* Заголовки — как на примере */
main h1{
  font-size:36px;
  line-height:1.2;
  margin:24px 0 18px;
  font-weight:800;
}
main h2{
  font-size:28px;
  line-height:1.25;
  margin:36px 0 14px;
  font-weight:800;
  color:var(--link);
}

/* Карточки (абзацы/списки) */
main p,
main ul,
main ol{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  margin:14px 0;
}
main p:hover,
main ul:hover,
main ol:hover{background:var(--card-hover)}

main ul, main ol{padding-left:26px}
main li{margin:6px 0}

/* Текст без карточки (опционально) */
main .no-card{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}

/* Вставки изображений/фигуры */
figure{
  margin:28px 0;
  border-radius:18px;
  overflow:hidden;
  background:var(--bg-soft);
  border:1px solid var(--border);
}
figure img{width:100%}
figcaption{
  padding:10px 14px;
  font-size:14px;
  color:var(--muted);
}

/* Таблицы (если будут) */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:16px 0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
th,td{padding:12px 14px;text-align:left}
thead th{background:rgba(255,255,255,.08);font-weight:700}
tbody tr+tr td{border-top:1px solid var(--border)}

/* Ссылки внутри контента */
main a{color:var(--link)}
main a:hover{opacity:.9}

/* Доп. утилиты для контента */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  border:1px solid var(--border);
  font-weight:700;
  font-size:12px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--bg);
  border-top:2px solid #162060;
  text-align:center;
  padding:20px;
  font-size:14px;
  color:#ccc;
}
.site-footer a{color:var(--accent-2)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  main{max-width:920px}
}
@media (max-width: 880px){
  .site-header .container{flex-wrap:wrap}
  .logo{order:1}
  .auth-buttons{order:2}
  .main-nav{order:3;width:100%;justify-content:center;margin-top:6px}
}
@media (max-width: 560px){
  .logo img{height:34px}
  .btn{padding:8px 14px}
  main{margin:28px auto}
  main h1{font-size:28px}
  main h2{font-size:22px}
}

/* =========================================================
   MISC
   ========================================================= */
hr{
  border:none;height:1px;background:var(--border);
  margin:26px 0;
}
blockquote{
  margin:16px 0;
  padding:14px 18px;
  border-left:4px solid var(--link);
  background:var(--card);
  border-radius:0 var(--radius) var(--radius) 0;
}
code,kbd,pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{
  background:#0a103e;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  overflow:auto;
}
/* --- header layout (logo + casino left, buttons right) --- */
.header-inner{display:flex;align-items:center;gap:14px}
.head-left{display:flex;align-items:center;gap:12px}

/* легкий сдвиг логотипа вправо, чтобы «выровнять по тексту» */
.logo{display:flex;align-items:center;margin-left:8px}
.logo img{height:40px;width:auto;display:block}

/* «Казино» — остаётся пилюлей сразу после лого */
.nav-casino{
  font-weight:800;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.25);
}
.nav-casino:hover{background:rgba(255,255,255,.14)}

/* растягиваем центр, чтобы кнопки прижимались вправо */
.head-spacer{flex:1}

@media (max-width:880px){
  .header-inner{flex-wrap:wrap}
  .auth-buttons{order:3;width:100%;justify-content:center;margin-top:6px}
  .head-left{order:1;width:100%;justify-content:center}
}
/* одинаковая ширина для хедера и контента */
:root { --content: 1000px; }          /* можно менять 1 числом и всё будет ровно */

.container--narrow { 
  max-width: var(--content); 
}

/* main уже узкий, но на всякий случай унифицируем */
main { 
  max-width: var(--content); 
}

/* убираем лишний сдвиг у логотипа, чтобы край совпал с текстом */
.logo { margin-left: 0 !important; }
/* яркая подсветка активного пункта «Казино» */
.nav-casino {
  position: relative;
  border: 1px solid rgba(255,255,255,.18);
}

.nav-casino.active{
  background: linear-gradient(180deg, rgba(77,163,255,.25), rgba(77,163,255,.15));
  border-color: rgba(77,163,255,.65);
  box-shadow:
    0 0 0 2px rgba(77,163,255,.25),
    0 8px 22px rgba(0,0,0,.35);
  color: #fff;
}

/* маленький индикатор под «пилюлей» */
.nav-casino.active::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:-8px;
  height:3px; border-radius:3px;
  background: rgba(77,163,255,.8);
  box-shadow: 0 2px 8px rgba(77,163,255,.6);
}