/* ===== WOW Aurora Mobile Menu (slide from right) ===== */
:root{
  --violet:#8B5CF6; --pink:#EC4899; --teal:#14B8A6;
  --ink:#6D28D9; --glass:rgba(255,255,255,.78); --ring:rgba(255,255,255,.7);
}

/* Container states */
#mobileNav{position:fixed; inset:0; z-index:9999; pointer-events:none}
#mobileNav.hidden .mn-backdrop{opacity:0}
#mobileNav.hidden .mn-panel{transform:translate3d(100%,0,0)}
#mobileNav:not(.hidden){pointer-events:auto}

/* Backdrop */
.mn-backdrop{
  position:absolute; inset:0; background:rgba(2,6,23,.6);
  backdrop-filter: blur(10px);
  transition:opacity .35s ease;
}

/* Panel */
.mn-panel{
  position:absolute; right:0; top:0; height:100dvh; width:100%; max-width:600px;
  background: linear-gradient(135deg,#ede9fe 0%,#fae8ff 50%,#ffffff 100%);
  border-left:1px solid var(--ring);
  box-shadow:-14px 0 48px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:14px;
  padding:16px 16px 18px;
  transform:translate3d(0,0,0);
  transition:transform .48s cubic-bezier(.22,.9,.31,1);
  overflow:hidden;
}

/* Aurora blobs */
.mn-aurora{position:absolute; inset:auto; filter: blur(52px); opacity:.55; pointer-events:none}
.mn-a{width:420px;height:420px;right:-90px;top:-90px;background:radial-gradient(620px 620px at 20% 30%, var(--violet), transparent 60%); animation:drift 9s ease-in-out infinite}
.mn-b{width:360px;height:360px;left:-70px;bottom:12%;background:radial-gradient(560px 560px at 80% 60%, var(--teal), transparent 60%); animation:drift 11s ease-in-out infinite}
.mn-c{width:320px;height:320px;left:24%;top:-30px;background:radial-gradient(520px 520px at 50% 50%, var(--pink), transparent 60%); animation:drift 13s ease-in-out infinite}
@keyframes drift { 0%{transform:translateY(0)} 50%{transform:translateY(-14px)} 100%{transform:translateY(0)} }

/* Head */
.mn-head{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px}
.mn-brand{display:flex; align-items:center; gap:10px; font-weight:800; color:#111827}
.mn-logo{display:grid; place-items:center; width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg, rgba(139,92,246,.2), rgba(236,72,153,.2));
  border:1px solid var(--ring); box-shadow:0 6px 16px rgba(139,92,246,.15);
}

/* Buttons base */
.mn-btn{
  font:600 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, 'Nunito', sans-serif;
  padding:.6rem .8rem; border-radius:.9rem; border:1px solid var(--ring); background:var(--glass);
  color:#1f2937; display:inline-flex; align-items:center; gap:.5rem; transition:.25s;
}
.mn-btn:hover{background:#fff}
.mn-btn-ghost{background:transparent}
.mn-kbd{font:700 11px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background:#fff; border:1px solid var(--ring); padding:.2rem .4rem; border-radius:.5rem;
}

/* Quick links row (замість пошуку) */
.mn-quick{
  display: grid;
  grid-template-columns: 1fr 1fr; /* дві колонки */
  gap: 8px;
  margin-top:8px;
}
.mn-btn.mn-btn-sm{
  font-size:12px; line-height:1.2; 
  padding:.45rem .65rem; border-radius:.7rem;
}

/* Grid */
.mn-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;
}
@media (min-width:480px){ .mn-grid{grid-template-columns:1fr 1fr 1fr} }
.mn-card{
  position:relative; overflow:hidden; border-radius:1.1rem; border:1px solid var(--ring);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));
  padding:14px; min-height:82px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease;
  text-align:center; gap:8px;
}
.mn-card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.10)}
.mn-ico{font-size:24px; line-height:1; display:block}
.mn-title{font-weight:800; color:#111827; display:block}
.mn-chev{position:absolute; right:12px; bottom:10px; opacity:.5}

/* Active */
.mn-card.is-active{ outline:2px solid var(--violet); box-shadow:0 0 0 6px rgba(139,92,246,.20) }

/* CTA */
.mn-cta{
  position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:.6rem;
  margin-top:12px; padding:12px 16px; border-radius:1rem; font-weight:800; color:#fff; text-align:center;
  background:linear-gradient(90deg, var(--violet), var(--pink)); border:1px solid var(--ring);
  box-shadow:0 12px 32px rgba(139,92,246,.35); transition:transform .2s ease, box-shadow .2s ease;
}
.mn-cta:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(139,92,246,.45)}

/* Black CTA (Таємна кімната) — вище за специфічністю заради перекриття градієнта */
.mn-cta.mn-cta-dark{
  background: #000; color:#fff; border-color: rgba(255,255,255,.8);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.mn-cta.mn-cta-dark:hover{ box-shadow:0 18px 40px rgba(0,0,0,.45) }

/* Менший відступ між двома CTA */
.mn-panel .mn-cta + .mn-cta{ margin-top:6px }

/* Foot */
.mn-foot{
  position:relative; z-index:1; margin-top:auto; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--ring); padding-top:12px; color:#374151; font-weight:600;
}
.mn-foot-a{opacity:.9}
.mn-foot-a:hover{text-decoration:underline}

/* Toast — маленький попап внизу панелі */
.mn-toast{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) translateY(8px);
  background: #111;
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, 'Nunito', sans-serif;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
}
.mn-toast.show{ opacity:1; transform: translateX(-50%) translateY(0) }

/* Центруємо контент усередині всіх кнопок */
.mn-btn, .mn-cta, .mn-cta-dark{
  display:flex; align-items:center; justify-content:center; gap:.5rem; text-align:center;
}
.mn-btn img, .mn-btn svg, .mn-cta img, .mn-cta svg{
  display:block; width:1.1em; height:1.1em; flex:0 0 auto;
}

/* Body lock when open */
html.menu-open, body.menu-open { overflow:hidden; touch-action:none }

/* ===== Quick buttons: "Часті питання" & "Про рейтинг" ===== */
/* Чіткі, контрастні «пілли» без приглушення */
.mn-quick .mn-btn{
  background:#fff !important;           /* чистий білий, без скляного ефекту */
  border-color:#e5e7eb !important;      /* light border */
  color:#111827 !important;             /* темний текст */
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(17,24,39,.08);
  backdrop-filter:none;                  /* прибираємо блюр/скло */
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.mn-quick .mn-btn:hover{
  background:#f9fafb;
  border-color:#d1d5db;
  box-shadow:0 10px 24px rgba(17,24,39,.12);
  transform: translateY(-1px);
}
.mn-quick .mn-btn:active{
  transform: translateY(0);
  box-shadow:0 6px 16px rgba(17,24,39,.10);
}
.mn-quick .mn-btn:focus-visible{
  outline:2px solid #8B5CF6;            /* фіолетовий фокус */
  outline-offset:2px;
}

/* Трохи підтягнемо типографіку дрібних кнопок */
.mn-quick .mn-btn.mn-btn-sm{
  font-size:13px; 
  line-height:1.2;
  padding:.5rem .7rem;
  border-radius:.8rem;
}

/* ===== Quick buttons with gradient border (FAQ + Про рейтинг) ===== */
.mn-quick .mn-btn{
  /* gradient border */
  --fd-grad: linear-gradient(90deg, #8B5CF6, #EC4899, #14B8A6);
  background:
    linear-gradient(#fff, #fff) padding-box,    /* fill */
    var(--fd-grad) border-box;                  /* border */
  border: 2px solid transparent;
  border-radius: .9rem;

  /* clean, non-glass look */
  color:#111827; font-weight:800; letter-spacing:.01em;
  backdrop-filter:none;

  /* subtle depth + pleasant motion */
  box-shadow:0 8px 20px rgba(17,24,39,.06);
  transform: translateY(0);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-position .35s ease;

  /* animate gradient on hover */
  background-size: 100% 100%, 180% 100%;
  background-position: 0 0, 0 0;
}
.mn-quick .mn-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(17,24,39,.12);
  background-position: 0 0, 100% 0; /* shift gradient */
}
.mn-quick .mn-btn:active{
  transform: translateY(0);
  box-shadow:0 6px 16px rgba(17,24,39,.10);
}
.mn-quick .mn-btn:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

/* Compact size tweaks */
.mn-quick .mn-btn.mn-btn-sm{
  font-size:13px;
  line-height:1.2;
  padding:.5rem .75rem;
  border-radius:.9rem;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .mn-quick .mn-btn{ transition:none }
}

 /* === Force Nunito on quick buttons + "Закрити" === */
:root{
  --fd-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* FAQ + Про рейтинг */
.mn-quick .mn-btn{
  font-family: var(--fd-font) !important;
  font-weight: 800;                 /* соковитий заголовковий */
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Кнопка "Закрити" у шапці панелі */
#navClose.mn-btn{
  font-family: var(--fd-font) !important;
  font-weight: 700;                 /* трохи легше за пілли */
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}