/* Лендинг NINE на тех же токенах, что лаунчер и панель (packages/ui). Одна страница. */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap");
:root {
  --font-display: "Chakra Petch", sans-serif; --font-body: "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", monospace;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px;
  --radius-m: 8px; --radius-l: 12px;
  --accent: #E8B84A; --accent-strong: #FFD166; --accent-ink: #1A1408; --ok: #6CD98B;
  --bg: #0D0E10; --bg-elev: #141619; --bg-panel: #191C20; --line: #262B32; --line-strong: #363C46;
  --fg: #ECEAE3; --fg-muted: #9AA1AB; --fg-faint: #5F6873;
}
@media (prefers-color-scheme: light) {
  :root { --accent: #B8861B; --accent-strong: #D9A227; --accent-ink: #fff; --ok: #1E9A4A;
    --bg: #F3F0E8; --bg-elev: #FBFAF6; --bg-panel: #fff; --line: #E1DCCE; --line-strong: #CDC5B0;
    --fg: #1C1A14; --fg-muted: #5E5A4E; --fg-faint: #9A9484; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased;
  background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 4%, transparent) 0 2px, transparent 2px 14px); }
a { color: inherit; text-decoration: none; }
h1, h2, b { font-family: var(--font-display); }
.page { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-4) var(--space-16); }
.top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: .06em; display: flex; align-items: center; gap: var(--space-2); }
.logo i { display: inline-block; width: 11px; height: 28px; background: var(--accent); transform: skewX(-12deg); border-radius: 2px; }
.links { display: flex; gap: var(--space-6); color: var(--fg-muted); font-weight: 500; }
.links a:hover { color: var(--fg); }
.hero { padding: var(--space-16) 0 var(--space-10); max-width: 720px; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; margin: 0 0 var(--space-4); }
.hero p { color: var(--fg-muted); font-size: 18px; margin: 0 0 var(--space-8); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-m); font-weight: 600; border: 1px solid var(--line-strong); background: var(--bg-elev); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.btn.primary:hover { background: var(--accent-strong); box-shadow: 0 6px 20px rgba(232,184,74,.25); }
.btn.large { height: 56px; padding: 0 var(--space-10); font-size: 17px; }
.hint { color: var(--fg-faint); font: 400 13px var(--font-mono); margin-top: var(--space-3); }
.games { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.game { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-4); display: grid; gap: 4px; }
.game b { font-size: 18px; } .game span { color: var(--fg-faint); font-size: 13px; }
.game.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .game.on span { color: var(--ok); }
.how { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.how div { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-6); color: var(--fg-muted); }
.how b { display: block; color: var(--fg); font-size: 18px; margin-bottom: var(--space-2); }
.how .off { opacity: .45; border-style: dashed; }
.soon { display: inline-block; vertical-align: middle; font: 600 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line-strong); padding: 4px 7px; border-radius: 99px; margin-left: 8px; }
.soon[hidden] { display: none; }
.legal { margin-top: var(--space-10); color: var(--fg-muted); } .legal h2 { color: var(--fg); font-size: 24px; margin: 0 0 var(--space-2); }
.foot { margin-top: var(--space-16); color: var(--fg-faint); font-size: 13px; border-top: 1px solid var(--line); padding-top: var(--space-4); }
@media (max-width: 720px) { .games, .how { grid-template-columns: 1fr; } .links { display: none; } }