/* Squirrel Wisdom — DARK · FIRE · SQUIRREL (строгий без засечек) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* ---------- Палитра ---------- */
:root{
  --bg-charcoal:#0B0B0C;
  --bg-umber:#1A1410;
  --fire-ember:#FF7A1A;
  --fire-warm:#FFCE73;
  --accent-gold:#D4AF37;
  --text-80:#E9E1D3;
  --text-60:#B8B1A8;
  --squirrel-orange:#F08A24;
  --ring:0 0 0 2px rgba(212,175,55,.45), 0 0 22px rgba(255,122,26,.30);
}

/* ---------- База ---------- */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0; padding:0; height:100vh;
  font:400 16px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text-80);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(255,122,26,.12), transparent 60%),
    linear-gradient(180deg,#070706 0%, #0A0908 35%, #0B0B0C 100%),
    url('../abooks_background.png') repeat;
  background-size:auto, auto, 128px 128px;
  position:relative;
}

/* Виньетка + «искры» */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(255,122,26,.08), transparent 60%),
    radial-gradient(110% 90% at 50% 120%, rgba(0,0,0,.88), transparent 40%);
  mix-blend-mode:screen;
}
body::before{
  content:""; position:fixed; inset:-200px -40px 0 -40px; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,206,115,.75) 0 2px, transparent 2.6px),
    radial-gradient(circle at 50% 50%, rgba(255,122,26,.65) 0 1.6px, transparent 2.2px);
  background-size:140px 220px, 90px 160px;
  opacity:.24; animation:embers-rise 26s linear infinite;
}
@keyframes embers-rise{ to{ background-position:0 -900px, 0 -700px } }

/* ---------- Меню-кнопки (drag-ready) ---------- */
.menu-button{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  padding:10px; min-width:140px;
  font:800 12px "Inter",sans-serif; text-align:center;
  color:#1A120B; text-decoration:none; cursor:grab;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.65);
  box-shadow:
    0 0 0 1px rgba(255,122,26,.18) inset,
    0 8px 20px rgba(0,0,0,.45);
  transition:transform .14s, box-shadow .2s, filter .2s;
}
.menu-button:active{ cursor:grabbing }
.menu-button:hover{ transform:scale(1.05); box-shadow:var(--ring) }

/* Цветовые варианты (сохранены, но чуть «приглажены») */
.btn-school{       background:#FFAAAA; border-color:#7a1f1f }
.btn-achievements{ background:#FFE4B5; border-color:#8a5728 }
.btn-courses{      background:#E6CCFF; border-color:#6f3ea0 }
.btn-events{       background:#FFFFAA; border-color:#9a9a33 }
.btn-payments{     background:#CCFFCC; border-color:#3b7a3b }
.btn-exchange{     background:#FFF68F; border-color:#8a8600 }
.btn-accessories{  background:#ADD8E6; border-color:#2c5e82 }
.btn-help{         background:#DDA0DD; border-color:#6b2c6b }
.btn-tools{        background:#B0E0E6; border-color:#2c5e82 }

/* ---------- Navbar ---------- */
.navbar{
  position:absolute; top:0; left:0; width:100%; z-index:1000;
  display:flex; justify-content:center; align-items:center; gap:20px;
  padding:10px 0;
  background:linear-gradient(180deg,#13100E 0%, #0B0B0C 100%);
  border-bottom:1px solid rgba(212,175,55,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.55);
}
.navbar a{
  color:var(--squirrel-orange); text-decoration:none;
  padding:10px 15px; font:600 12px "Inter",sans-serif;
  border-radius:10px; transition:all .2s ease;
}
.navbar a:hover{ background:rgba(240,138,36,.18); color:var(--accent-gold); box-shadow:var(--ring) }

/* ---------- Кнопка выхода ---------- */
.top-buttons{
  position:absolute; top:10px; right:20px; z-index:1001;
}
.top-buttons button{
  background:linear-gradient(#2A1E1A,#1A110D); color:var(--text-80);
  border:1px solid rgba(212,175,55,.65); border-radius:12px;
  padding:10px 16px; font:800 12px "Inter",sans-serif; cursor:pointer;
  transition:transform .12s, box-shadow .2s, filter .2s;
}
.top-buttons button:hover{ transform:translateY(-1px); box-shadow:var(--ring); filter:brightness(1.04) }

/* ---------- Меню (мобайл) ---------- */
.menu-toggle{
  display:none; margin-left:10px; z-index:1002;
  font:800 16px "Inter",sans-serif; color:var(--squirrel-orange);
  background:transparent; border:1px solid rgba(212,175,55,.65);
  padding:6px 12px; border-radius:10px; cursor:pointer;
}
.menu-items{ display:flex; gap:20px }

/* ---------- Мобильная адаптация ---------- */
@media (max-width:768px){
  .menu-button{
    position:static; display:block; margin:60px auto 10px; width:80%; min-width:unset;
  }
}
@media (max-width:48em), (hover:none) and (pointer:coarse){
  .menu-toggle{ display:block }
  .menu-items{
    display:none; flex-direction:column; background:#111;
    border:1px solid rgba(212,175,55,.65);
    position:absolute; top:56px; left:10px; z-index:1001; padding:10px; border-radius:12px;
  }
  .menu-items.open{ display:flex }
  .navbar{ justify-content:flex-start; padding:10px 12px }
  .navbar a{ font-size:11px; padding:8px 10px; margin:4px 0 }
  .top-buttons{ top:10px; right:16px }
  .top-buttons button{ font-size:12px; padding:8px 12px }
}