/* Logik — stejně jako hra má světlý i tmavý motiv podle nastavení zařízení. */
.logik-body {
  --lg-bg: #F2F4F8;
  --lg-surface: #FFFFFF;
  --lg-text: #1C2230;
  --lg-muted: #5A6273;
  --lg-hero: #161B26;
  --lg-hero-panel: #222939;
  --lg-blue: #1565C0;
  --lg-blue-btn: #2E8BEF;
  background: var(--lg-bg);
  color: var(--lg-text);
}
@media (prefers-color-scheme: dark) {
  .logik-body {
    --lg-bg: #10141C;
    --lg-surface: #1C2230;
    --lg-text: #EEF1F6;
    --lg-muted: #A9B1C1;
    --lg-hero: #0B0E14;
    --lg-hero-panel: #1C2230;
    --lg-blue: #7DB8F7;
  }
}
.logik-body .site-header { background: var(--lg-hero); border-bottom: 0; }
.logik-body .logo { color: #FFFFFF; }
.logik-body .lang-switch a:not([aria-current="page"]) { color: #D5DBE6; }
.logik-body .site-footer { margin-top: 0; background: var(--lg-bg); }

.lg-hero { background: var(--lg-hero); color: #FFFFFF; }
.lg-hero-inner { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 44px; }
.lg-title { font-size: clamp(3rem, 13vw, 5rem); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.lg-stones { display: flex; gap: 8px; margin: 4px 0 0; }
.lg-stones svg { width: 36px; height: 36px; }
.lg-tagline { font-size: 1.2rem; font-weight: 700; color: #D5DBE6; margin: 16px 0 24px; max-width: 30rem; }
.lg-board { justify-self: center; width: min(100%, 22rem); height: auto; }
@media (min-width: 40rem) {
  .lg-hero-inner { grid-template-columns: 1fr auto; }
}

.lg-btn { display: inline-block; font-weight: 800; font-size: 1.1rem; color: #FFFFFF; background: var(--lg-blue-btn); border-radius: 12px; padding: 12px 22px; text-decoration: none; }
.lg-btn.is-soon { background: #1D5FA8; cursor: default; }
a.lg-btn:hover { background: #1D74D6; }

.lg-section { padding-top: 8px; padding-bottom: 8px; }
.lg-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.lg-features li { background: var(--lg-surface); border-radius: 16px; padding: 16px; }
.lg-features h3 { margin: 0 0 6px; }
.lg-features p { margin: 0; color: var(--lg-muted); }
.lg-rules { background: var(--lg-surface); border-radius: 16px; padding: 16px 20px; max-width: 42rem; }
.lg-rules p { margin: .4em 0; }
.lg-peg { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; border: 2px solid var(--lg-text); }
.lg-peg--full { background: var(--lg-text); }

.lg-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 32px; padding-bottom: 32px; }
.lg-legal a { color: var(--lg-blue); font-weight: 700; }
@media (min-width: 40rem) {
  .logik-body .shots { grid-template-columns: repeat(6, 1fr); }
}