/* =====================================================================
   ИНТЕРАКТИВ ШАБЛОНА 3 (с 05.10.2026). Цвета берутся из переменных theme.css
   (--btn-bg, --btn-color, --toc-bg, --table-bg-2, --cat-border, --copy) — отдельно менять не нужно.
   ===================================================================== */
.ix{margin:28px 0;padding:22px 20px;background:var(--toc-bg);border:1px solid var(--cat-border);border-radius:18px;color:var(--body-color)}
.ix p{margin:0}
.ix__title{font-size:20px;font-weight:800;color:var(--body-heading);margin-bottom:14px !important;text-align:center}
.ix__note{font-size:12px;color:var(--copy);margin-top:14px !important;text-align:center}

/* 1. сетка игр */
.ix-games__bar{display:flex;flex-direction:column;gap:10px;align-items:center}
.ix .ix-games__search{width:100%;max-width:420px;height:46px;padding:0 16px 0 42px;border-radius:12px;border:1px solid var(--cat-border) !important;background:#03100d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2390a8a1' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50% !important;color:#fff !important;-webkit-text-fill-color:#fff;caret-color:var(--btn-bg);font:inherit;font-size:16px;box-shadow:none !important;appearance:none;-webkit-appearance:none}
.ix .ix-games__search::placeholder{color:#90a8a1;-webkit-text-fill-color:#90a8a1;opacity:1}
.ix .ix-games__search::-webkit-search-cancel-button{filter:invert(1)}
.ix-games__search:focus{outline:2px solid var(--btn-bg);outline-offset:1px}
.ix-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ix-chips button{border:1px solid var(--cat-border);background:transparent;color:var(--body-color);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;line-height:1.2}
.ix-chips button:hover{border-color:var(--btn-bg)}
.ix-chips button.is-on{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-color);font-weight:700}
.ix-chips button:focus-visible,.ix-games__toggle input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ix-games__toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.ix-games__toggle input{width:18px;height:18px;accent-color:var(--btn-bg)}
.ix-games__count{font-size:13px;color:var(--copy);text-align:center;margin:12px 0 8px !important}
.ix .ix-games__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.ix .ix-games__grid li::before{display:none !important;content:none !important}
.ix-game{display:flex;flex-direction:column;background:var(--table-bg-2);border:1px solid var(--cat-border);border-radius:14px;overflow:hidden;margin:0 !important;padding:0 !important}
.ix-game[hidden]{display:none}
.ix-game__art{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 25% 20%,hsl(calc(var(--h) + 80) 85% 55% / .55),transparent 55%),radial-gradient(circle at 80% 90%,hsl(var(--h) 80% 45% / .6),transparent 60%),linear-gradient(135deg,hsl(var(--h) 45% 16%),hsl(calc(var(--h) + 40) 50% 10%))}
.ix-game__art--img{background:#000}
.ix-game__art--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.ix-game:hover .ix-game__art--img img{transform:scale(1.05)}
.ix-game__art em{z-index:1}
.ix-game__art span{font-size:52px;font-weight:900;color:rgba(255,255,255,.9);text-shadow:0 4px 18px rgba(0,0,0,.45);line-height:1}
.ix-game__art em{position:absolute;left:10px;top:10px;font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff}
.ix-game__body{padding:12px 12px 4px;flex:1}
.ix-game__name{font-weight:800;color:var(--body-heading);font-size:15px;line-height:1.25}
.ix-game__prov{font-size:12px;color:var(--copy);margin-top:2px !important}
.ix-game__text{font-size:13px;line-height:1.4;margin-top:8px !important}
.ix-game__badge{display:inline-block;margin-top:8px !important;font-size:12px;line-height:1.3;font-weight:700;color:var(--btn-color);background:var(--btn-bg);border-radius:10px;padding:4px 9px}
.ix-game__meta{font-size:12px;color:var(--copy);margin-top:6px !important}
.ix .ix-game__btn{display:flex !important;align-items:center;justify-content:center;margin:10px 12px 12px !important;height:auto !important;min-height:0 !important;line-height:1.2 !important;padding:10px 12px !important;font-size:14px !important;width:auto !important;color:var(--btn-color);text-decoration:none}
.ix-games__none{text-align:center;padding:16px 0}
@media (max-width:480px){.ix .ix-games__grid{grid-template-columns:repeat(2,1fr);gap:10px}.ix-game__art:not(.ix-game__art--img){align-items:flex-end;padding-bottom:8px}.ix-game__art span{font-size:38px}.ix-game__art em{font-size:10px;left:8px;top:8px}}

/* 2. шаги карточками (шапка и кнопки вставляются соседями списка, сам <ol> не оборачивается) */
.main .container ol.ix-steps.is-paged > li{display:none}
.main .container ol.ix-steps.is-paged > li.is-cur{display:block;animation:ixIn .25s ease}
.main .container ol.ix-steps.is-paged{padding:22px 20px 18px;background:var(--toc-bg);border:1px solid var(--cat-border);border-radius:16px;min-height:110px}
.ix-steps__head{margin:18px 0 10px}
.ix-steps__bar{height:6px;border-radius:6px;background:var(--cat-border);overflow:hidden;margin-bottom:10px}
.ix-steps__bar i{display:block;height:100%;width:0;background:var(--btn-bg);transition:width .3s ease}
.ix-steps__row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.ix-steps__count{font-weight:700;color:var(--body-heading)}
.ix-steps__mode{border:0;background:none;color:var(--btn-bg);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px;margin-left:auto}
.ix-steps__nav{display:flex;justify-content:center;gap:10px;margin:12px 0 20px}
.ix-steps__nav button{min-width:120px;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;border:1px solid var(--btn-bg)}
.ix-steps__prev{background:transparent;color:var(--body-color)}
.ix-steps__next{background:var(--btn-bg);color:var(--btn-color)}
.ix-steps__nav button:disabled{opacity:.35;cursor:default}
.ix-steps__head:not(.is-paged) .ix-steps__bar,.ix-steps__head:not(.is-paged) .ix-steps__count,.ix-steps__nav:not(.is-paged){display:none}

/* 3. FAQ-аккордеон */
.main .container h3.ix-faq-q{position:relative;cursor:pointer;padding:14px 44px 14px 16px;margin:10px 0 0;background:var(--toc-bg);border:1px solid var(--cat-border);border-radius:12px;transition:border-color .2s}
.main .container h3.ix-faq-q:hover{border-color:var(--btn-bg)}
.main .container h3.ix-faq-q:focus-visible{outline:2px solid var(--btn-bg);outline-offset:2px}
.main .container h3.ix-faq-q::after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;border-right:2px solid var(--btn-bg);border-bottom:2px solid var(--btn-bg);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.main .container h3.ix-faq-q[aria-expanded="true"]{border-color:var(--btn-bg);border-bottom-left-radius:0;border-bottom-right-radius:0}
.main .container h3.ix-faq-q[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.main .container .ix-faq-a{margin:0 0 6px;padding:12px 16px 14px;border:1px solid var(--btn-bg);border-top:0;border-radius:0 0 12px 12px;background:var(--table-bg-2)}
.main .container .ix-faq-a[hidden]{display:none}
.ix-faq-after{margin-top:22px !important}

/* 4. сортировка таблиц */
.main .container table.ix-sortable th{cursor:pointer;user-select:none;position:relative;padding-right:22px !important}
.main .container table.ix-sortable th::after{content:"↕";position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.55}
.main .container table.ix-sortable th[aria-sort="ascending"]::after{content:"↑";opacity:1}
.main .container table.ix-sortable th[aria-sort="descending"]::after{content:"↓";opacity:1}
.main .container table.ix-sortable th:focus-visible{outline:2px solid var(--btn-bg);outline-offset:-2px}
.ix-sort-hint{font-size:12px;color:var(--copy);margin:-6px 0 14px !important}

@keyframes ixIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.main .container ol.ix-steps.is-paged > li.is-cur{animation:none}.ix-steps__bar i{transition:none}}