/* Игры для брендов /igry/<slug>/ (задание 14): цвета заказчика поверх блока «игра» из extra.css, режим вставки ?embed, статистика и комплект.
 * Переменные --gb-* кладёт в страницу сборка (tools/igry_lib.py, brand_css): фон, тени, линии и приглушённый текст — смеси трёх цветов заказчика (bg, ink, accent). */
.igra--brand { background: var(--gb-bg, #17141a); color: var(--gb-ink, #f7f5f2); }
.igra--brand .mo-hero__title, .igra--brand .mo-hero__title em { color: var(--gb-ink); }
.igra--brand .mo-hero__title em { font-style: normal; color: var(--gb-acc); }
.igra--brand .mo-hero__lead { color: var(--gb-soft); }
.igra--brand .mo-tag--night { background: var(--gb-panel); color: var(--gb-soft); box-shadow: inset 0 0 0 1px var(--gb-line); }
.igra__logo { display: block; width: auto; max-width: 220px; height: 40px; margin: 0 0 12px; object-fit: contain; object-position: left center; }
.igra--brand .ig-stage { background: var(--gb-deep); outline-color: var(--gb-line); }
.igra--brand .ig-card { background: var(--gb-deep-a); }
.igra--brand .ig-card__box { background: var(--gb-panel); border-color: var(--gb-line); color: var(--gb-ink); }
.igra--brand .ig-card h2, .igra--brand .ig-row b, .igra--brand .ig-legend b, .igra--brand .ig-keys b, .igra--brand .ig-hud { color: var(--gb-ink); }
.igra--brand .ig-card p, .igra--brand .ig-legend, .igra--brand .ig-score, .igra--brand .ig-ctl, .igra--brand .ig-keys { color: var(--gb-soft); }
.igra--brand .ig-small, .igra--brand .ig-bar, .igra--brand .ig-tile__t, .igra--brand .ig-pad__c { color: var(--gb-muted) !important; }
.igra--brand .ig-k, .igra--brand .ig-h, .igra--brand .ig-big, .igra--brand .ig-hud b, .igra--brand .ig-total b, .igra--brand .ig-tile__n, .igra--brand .ig-mapcount b { color: var(--gb-acc) !important; }
.igra--brand .ig-hint, .igra--brand .ig-goalintro { border-left-color: var(--gb-acc); }
.igra--brand .ig-total, .igra--brand .ig-keys, .igra--brand .ig-nick, .igra--brand .ig-pad button, .igra--brand .ig-keys kbd, .igra--brand .ig-ctl kbd { border-color: var(--gb-line); }
.igra--brand .ig-keys kbd, .igra--brand .ig-ctl kbd { background: var(--gb-panel2); color: var(--gb-ink); }
.igra--brand .ig-nick { background: var(--gb-bg); color: var(--gb-ink); }
.igra--brand .ig-goal, .igra--brand .ig-pad button { background: var(--gb-panel); color: var(--gb-ink); }
.igra--brand .ig-hint { background: var(--gb-deep-a); color: var(--gb-ink); }
.igra--brand .ig-toast { background: var(--gb-deep-a); color: var(--gb-ink); }
.igra--brand .ig-code { background: var(--gb-ink); color: var(--gb-bg); }
.igra--brand .ig-tile { background: var(--gb-bg); border-color: var(--gb-line); box-shadow: 3px 3px 0 var(--gb-deep); color: var(--gb-ink); }
.igra--brand .ig-tile:hover:not(:disabled), .igra--brand .ig-tile:focus-visible { border-color: var(--gb-acc); }
.igra--brand .ig-tile.is-done { border-color: var(--gb-acc); }
.igra--brand .mo-btn--primary, .igry-cta .mo-btn--primary { background: var(--gb-acc); color: var(--gb-acc-ink); box-shadow: none; }
.igra--brand .mo-btn--primary:hover { filter: brightness(1.08); color: var(--gb-acc-ink); }
.igra--brand .mo-btn--secondary { color: var(--gb-ink); box-shadow: inset 0 0 0 1.5px var(--gb-line); background: transparent; }
.igra--brand .mo-btn--secondary:hover { background: var(--gb-panel2); color: var(--gb-ink); }
.igra--brand .ig-pad button.ig-fire { background: var(--gb-acc); border-color: var(--gb-acc); }
.igra--brand .ig-pad button.ig-fire .ig-pad__a, .igra--brand .ig-pad button.ig-fire .ig-pad__c { color: var(--gb-acc-ink) !important; }
.igra--brand .ig-nick:focus-visible, .igra--brand .ig-stage button:focus-visible, .igra--brand .ig-pad button:focus-visible, .igra--brand .ig-bar button:focus-visible { outline-color: var(--gb-acc); }
.ig-goalintro { margin: 0; padding: 4px 0 4px 10px; border-left: 3px solid #f2c14e; }
.ig-lead { display: grid; gap: 8px; }
.ig-lead .ig-nick { width: 100%; }
.ig-lead__pd { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 17px; color: #b4adb6; }
.ig-lead__pd input { flex: none; width: 20px; height: 20px; margin: 0; }
.ig-lead__pd a { color: inherit; text-decoration: underline; }
.igra--brand .ig-lead__pd { color: var(--gb-muted); }

.igry-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.igry-cta__t { margin: 0; max-width: 640px; color: var(--ink-muted); font: 400 14px/21px var(--font-text); }

/* вставка на чужой сайт: только игра и рейтинг */
html.igry-embed .sticky, html.igry-embed .footer-wrap, html.igry-embed .cookie, html.igry-embed .skip-link, html.igry-embed .igra__head, html.igry-embed .igry-cta,
html.igry-embed .sec-head, html.igry-embed .mburger, html.igry-embed .mmenu, html.igry-embed .banner-plate, html.igry-embed .gl-strip { display: none !important; }
html.igry-embed body, html.igry-embed .igry-page { margin: 0; padding: 0; background: var(--gb-bg, #17141a); }
html.igry-embed .hero-wrap, html.igry-embed .wrap, html.igry-embed .section { padding: 0 !important; margin: 0 !important; max-width: none !important; background: transparent !important; }
html.igry-embed .igra { border-radius: 0; padding: 8px; gap: 8px; }
html.igry-embed .section { padding: 8px !important; }
html.igry-embed .igra-board { border-radius: 12px; }

/* статистика и комплект */
.igst { display: grid; gap: 20px; }
.igst__per { margin: 0; color: var(--ink-muted); }
.igst__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.igst__card { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line); }
.igst__card b { font: 700 28px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.igst__card span { color: var(--ink-muted); font-size: 14px; line-height: 19px; }
.igst__fig { margin: 0; padding: 12px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line); }
.igst__fig svg { display: block; width: 100%; height: auto; }
.igst__lg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; color: var(--ink-muted); }
.igst__lg i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.igst__tw { overflow-x: auto; }
.igst__t { width: 100%; border-collapse: collapse; font: 500 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.igst__t th, .igst__t td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.igst__t th:first-child, .igst__t td:first-child { text-align: left; }
.igst__t th { color: var(--ink-muted); font-weight: 500; }
.igst__t tfoot td { font-weight: 700; border-bottom: 0; }
.igkit { display: grid; gap: 24px; }
.igkit__sec { display: grid; gap: 10px; min-width: 0; }
.igkit__sec h2 { margin: 0; }
.igkit__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.igkit__in { flex: 1 1 280px; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong, var(--line)); background: var(--surface, #fff); color: var(--ink); font: 500 14px/20px var(--font-mono); }
.igkit__code { width: 100%; resize: vertical; }
.igkit__qr canvas { display: block; width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 8px; }
.igkit__doc { padding-top: 8px; border-top: 1px solid var(--line); }
.igkit__doc code { font: 500 13px/1 var(--font-mono); }
@media (max-width: 700px) { .igra__logo { height: 32px; } .igst__card b { font-size: 24px; } }