/* Стили главного меню (index.html). Самостоятельные: страница обычная, со скроллом, поэтому
   стили игровых страниц (там overflow:hidden и холст на весь экран) сюда не подключаются.
   Новый пункт меню = один <a class="card"> в разметке + строка с акцентным цветом ниже. */

:root { color-scheme: dark; --ink: #e7edfa; --dim: #8b97b4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; color: var(--ink);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, #1b2340 0%, #0b1020 55%, #06080f 100%); }

main { max-width: 1080px; margin: 0 auto; padding: clamp(28px, 7vh, 80px) 20px 40px;
  display: flex; flex-direction: column; min-height: 100dvh; }

header { text-align: center; margin-bottom: clamp(24px, 5vh, 48px); }
header h1 { margin: 0; font-size: clamp(38px, 8vw, 64px); font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(180deg, #ffffff, #93b4ff); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
header p { margin: 10px 0 0; color: var(--dim); font-size: 15px; }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px;
  text-decoration: none; color: inherit; border-radius: 18px; overflow: hidden;
  background: rgba(18,24,42,.72); border: 1px solid rgba(140,175,255,.16);
  transition: transform .16s ease, border-color .16s ease, background .16s ease; }
/* цветное свечение сверху — по нему пункты различаются с одного взгляда */
.card::before { content: ""; position: absolute; inset: -40% 20% auto; height: 120px; border-radius: 50%;
  background: var(--accent); filter: blur(46px); opacity: .34; transition: opacity .16s ease; }
.card:hover { transform: translateY(-3px); background: rgba(24,32,54,.85); border-color: rgba(160,195,255,.34); }
.card:hover::before { opacity: .55; }
.card:active { transform: translateY(0); }

.card svg { width: 44px; height: 44px; color: var(--accent); position: relative; }
.card b { font-size: 21px; font-weight: 650; letter-spacing: -.01em; position: relative; }
.card span { font-size: 13.5px; line-height: 1.5; color: var(--dim); position: relative; }

.empty { color: var(--dim); font-size: 14px; text-align: center; line-height: 1.6;
  border: 1px dashed rgba(140,175,255,.22); border-radius: 18px; padding: 28px 20px; }
.empty code { color: var(--ink); }

/* акцент на пункт меню: .c-<имя> { --accent: <цвет> } */
.c-main { --accent: #7fb2ff; }