/* megawin — стили макета. Размеры и цвета сняты с образца (propfirmmatch.com/futures, 02.10.2026), код свой.
   Без фреймворков: переменные, сетки, один файл. Этот же файл — основа стилей будущего генератора.
   Ширины: от 1380 — полная таблица; 1181–1379 — таблица без колонки «Игры»; до 1180 — карточки (две колонки, до 760 — одна);
   до 900 — сжатая шапка; панель фильтров: от 1380 — колонка слева, уже — выезжающая панель. */
:root {
  --bg: #100e0f; --card: #151314; --card-2: #1a1819; --chip: #252223; --line: #2f2c2d; --cell-line: rgba(255, 255, 255, .1);
  --text: #fff; --muted: #c3c1c1; --dim: #8a8587;
  --orange: #ff5a1f; --violet: #9262f9;
  --grad: linear-gradient(315deg, #9262f9 0%, #ff5a1f 100%);
  --grad-solid: linear-gradient(315deg, #7c4ae0 0%, #cc4410 100%);   /* заливка под белый текст: тот же градиент, но темнее — контраст 4,8–5,4 */
  --tint: linear-gradient(315deg, rgba(146, 98, 249, .1) 0%, rgba(255, 90, 31, .1) 100%);
  --bar: #240d45; --green: #31c48d; --green-solid: #014737; --green-bg: rgba(1, 71, 55, .3); --green-line: rgba(49, 196, 141, .1);
  --amber: #faca15; --amber-bg: #633112; --rose-bg: #45152c; --red: #f98080;
  --row-1: #282210; --row-2: #252223; --row-3: #271811;
  --pill: 9999px; --r-lg: 16px; --r-md: 12px; --r-sm: 8px;
  --top-h: 96px; /* шапка 56 + меню 40; полосу анонса убрали по слову Артёма 02.10 */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: Poppins, Inter, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip, а не hidden: hidden на body iOS Safari не мешает тянуть страницу вбок, а clip
   режет без прокрутки и не ломает липкие блоки (sticky). Это страховка поверх исправленной причины
   (ссылка в карточке сравнения, см. .c-act2). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--stick) + 16px); overflow-x: clip; }
body { position: relative; margin: 0; background: var(--bg); color: var(--text); font: 400 16px/24px var(--font); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: #fff; color: #000; font: 600 14px/22px var(--font); }
.skip:focus { top: 8px; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
[hidden] { display: none !important; }
.only-m, .tagc.more.only-m { display: none; }
.none { color: var(--dim); font-weight: 400; }

/* Рамка-градиент одним элементом: градиент лежит под рамкой, тёмный фон и лёгкий оттенок — внутри. */
.gb { border: 1px solid transparent; background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ───── Верх: анонс, шапка, меню ───── */
.top { position: sticky; top: 0; z-index: 60; background: var(--bg); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 56px; padding: 8px 0; }
.nav-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; height: 35px; font: 600 21px/1 var(--font-head); letter-spacing: -.2px; flex: none; }
.logo svg { width: 30px; height: 30px; }
.nav .vline { width: 1px; height: 20px; margin: 0 8px; background: var(--line); flex: none; }
.search { position: relative; width: 240px; min-width: 0; flex: 1 1 auto; }
.search label { display: block; position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }   /* лупа по центру при любой высоте поля: на телефоне поле — круг 44 px, значок стоял на 12/10 от угла и уезжал вверх-влево (кадр Артёма №20, 10.10) */
.search input { display: block; width: 100%; height: 36px; padding: 8px 12px 8px 36px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: 400 14px/20px var(--font); }
.search input::placeholder { color: var(--dim); }
.s-drop { position: absolute; left: 0; right: 0; top: 42px; z-index: 70; min-width: 220px; padding: 6px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.s-drop a, .s-drop span { display: block; padding: 10px 12px; border-radius: 8px; font: 500 14px/22px var(--font); }
.s-drop a:hover, .s-drop a:focus-visible { background: var(--chip); }
.s-drop span { color: var(--dim); }
.switch { display: flex; height: 36px; padding: 1px; border-radius: var(--pill); }
.switch a, .switch > span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: var(--pill); font: 600 14px/22px var(--font); letter-spacing: .5px; white-space: nowrap; }
.switch .on { background: var(--grad-solid); }
.switch .off { color: var(--dim); cursor: default; }
.switch .soon { font-style: normal; font-size: 10px; line-height: 14px; font-weight: 600; padding: 1px 6px; border-radius: var(--pill); background: var(--chip); color: var(--muted); letter-spacing: .3px; }
.nav-r { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex: none; }
.nav-r .fav { display: inline-flex; align-items: center; gap: 6px; height: 36px; font: 500 14px/22px var(--font); white-space: nowrap; }
.nav-r .fav b { font-weight: 600; color: var(--orange); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: var(--pill); font: 500 14px/22px var(--font); white-space: nowrap; }
.btn-grad { background: var(--grad-solid); color: #fff; font-weight: 600; }
.btn-grad:hover { filter: brightness(1.12); }
.btn-line { border: 1px solid transparent; background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; letter-spacing: .5px; }
.btn-line:hover { background: var(--tint) padding-box, linear-gradient(var(--card-2), var(--card-2)) padding-box, var(--grad) border-box; }
.btn-sm { height: 36px; padding: 0 12px; }
.btn-lg { font-size: 16px; line-height: 24px; }
.btn.heart { width: auto; height: 36px; border-radius: var(--pill); font-size: 12px; line-height: 18px; }
.btn.heart[aria-pressed="true"] svg { fill: var(--orange); color: var(--orange); }
.gap { height: 32px; }

.menu { display: flex; height: 40px; }
.menu a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border-bottom: 2px solid transparent; font: 500 14px/22px var(--font); color: var(--dim); white-space: nowrap; }
.menu a:hover { color: var(--text); }
.menu a.on { color: var(--text); border-bottom-color: var(--orange); }

/* 1181–1379: десять пунктов (девять категорий + «Bonukset») влезают в ряд без прокрутки только с отступом 6 px —
   при 12 px ряду не хватало 77–96 px и последний пункт срезался (замер 11.10). */
@media (max-width: 1379px) { .menu a { padding: 8px 6px; } }

/* ───── Бургер: до 900 px все категории — в панели под шапкой, ряд спрятан; шире — ряд как в образце.
   Блок стоит ПОСЛЕ базовых правил .menu: при равной специфичности побеждает позднее правило. ───── */
.burger { display: none; }
.mpanel { display: none; }
@media (max-width: 900px) {
  .menu { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card-2); color: var(--text); cursor: pointer; }
  .burger .i { width: 20px; height: 20px; }
  .burger .i-close, .burger[aria-expanded="true"] .i-open { display: none; }
  .burger[aria-expanded="true"] .i-close { display: block; }
  .burger[aria-expanded="true"] { background: var(--chip); }
  .mpanel { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 65; max-height: calc(100vh - 56px); overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
  .mpanel[hidden] { display: none; }
  .mpanel nav { display: flex; flex-direction: column; padding: 4px 16px 8px; }
  .mpanel a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-bottom: 1px solid var(--line); font: 500 16px/24px var(--font); color: var(--muted); }
  .mpanel a:last-child { border-bottom: 0; }
  .mpanel a:hover { color: var(--text); }
  .mpanel a.on { color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--orange); }
}


/* ───── Заголовок страницы ───── */
.glow { position: absolute; left: 0; right: 0; top: var(--top-h); height: 640px; overflow: hidden; pointer-events: none; z-index: -1; }
.glow::before, .glow::after { content: ""; position: absolute; top: 24px; width: 356px; height: 500px; border-radius: 50%; filter: blur(70px); opacity: .55;
  background: radial-gradient(closest-side, #7c62ef 0%, rgba(146, 98, 249, .7) 45%, rgba(255, 90, 31, .28) 75%, transparent 100%); }
.glow::before { left: -109px; } .glow::after { right: -109px; }
.hero { position: relative; padding: 24px 8px 0; text-align: center; }
.hero h1 { font: 600 34px/44px var(--font-head); }
.hero p.lead { max-width: 672px; margin: 4px auto 0; color: var(--muted); }
.counters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.counter { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 4px 12px; border-radius: var(--pill); background: var(--tint); font: 400 12px/15px var(--font); color: var(--muted); white-space: nowrap; }
.counter .c-lb { white-space: nowrap; }
.counter svg { width: 20px; height: 20px; stroke: url(#rg); stroke-width: 1.8; }
.counter b { font-weight: 700; color: #fff; }
.crumbs { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; font: 400 12px/18px var(--font); color: var(--muted); }
.crumbs a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--text); }

/* ───── Блок «лучшие по одному признаку» ───── */
.picks { padding: 0; }
.deals { margin-top: 24px; padding: 16px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--tint) padding-box, linear-gradient(rgba(16, 14, 15, .9), rgba(16, 14, 15, .9)) padding-box, var(--grad) border-box; }
.deals-head { position: relative; display: flex; align-items: center; justify-content: space-between; height: 30px; }
.deals-head .note { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 4px 10px; border-radius: var(--pill); background: var(--tint), var(--tint); font: 600 14px/22px var(--font); letter-spacing: .5px; white-space: nowrap; }
.deals-head .note em { font-style: normal; color: var(--orange); }
.deals-head .note svg { color: var(--orange); }
.deals-head h2, .deals-head h3 { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font: 600 16px/24px var(--font); letter-spacing: -.4px; white-space: nowrap; }
.deals-head h2 svg, .deals-head h3 svg { color: var(--orange); fill: var(--orange); }
.deals-head .all { display: inline-flex; align-items: center; gap: 4px; height: 30px; font: 500 12px/18px var(--font); color: var(--muted); white-space: nowrap; }
.deals-head .all:hover { color: #fff; }
.deals-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.deal { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 66px; padding: 8px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); min-width: 0; overflow: hidden; }
.deal:hover { border-color: #4a4547; }
.deal-l { display: flex; align-items: center; min-width: 48px; flex: 1 1 auto; overflow: hidden; }
.deal-l .meta { margin-left: 12px; min-width: 0; }
.deal-l .name { display: block; font: 600 14px/22px var(--font); letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-l:hover .name { text-decoration: underline; }
.deal-l .why { display: block; font: 500 12px/18px var(--font); color: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-box { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-sm); border: 1px solid var(--line); background: #000; font: 700 15px/1 var(--font-head); letter-spacing: -.3px; overflow: hidden; }
.rate-s { display: inline-flex; align-items: center; gap: 3px; height: 17px; margin-top: 2px; padding: 0 5px; border-radius: var(--pill); font: 600 10px/15px var(--font); letter-spacing: .5px; }
.rate-s.new { color: var(--muted); padding: 0 8px; }
.stars { position: relative; display: inline-block; width: 70px; height: 14px; background: #3d393a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x; }
.stars > i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #ff5a1f 0%, #e74694 55%, #9262f9 100%); background-size: 70px 100%; }
.stars.s10 { width: 50px; height: 10px; } .stars.s10 > i { background-size: 50px 100%; }
.stars.s12 { width: 60px; height: 12px; } .stars.s12 > i { background-size: 60px 100%; }
.badge-s { display: flex; flex-direction: column; width: 124px; min-width: 96px; height: 44px; flex: 0 1 124px; border-radius: 10px; overflow: hidden; border: 1px solid transparent;
  background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; }
.badge-s .t { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 6px; font: 600 12px/18px var(--font); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-s .b { height: 18px; display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--grad-solid); font: 600 11px/16px var(--font); white-space: nowrap; }
.badge-s .b svg { width: 12px; height: 12px; }
.badge-s:hover .b { filter: brightness(1.15); }

/* ───── Вкладки и ряд фильтров ───── */
.tabs { display: flex; justify-content: center; gap: 16px; margin: 24px 0; }
.tabs.left { justify-content: flex-start; margin: 32px 0 0; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 12px 20px; border-radius: var(--pill); background: var(--chip); font: 600 16px/24px var(--font); white-space: nowrap; }
.tab:hover { background: #2f2c2d; }
.tab.on { background: #fff; color: #000; }
.tab .n { padding: 2px 10px; border-radius: var(--pill); background: var(--amber-bg); color: var(--amber); font: 600 12px/18px var(--font); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 37px; }
.toolbar-l { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--pill); background: var(--line); border: 1px solid var(--line); font: 500 12px/18px var(--font); white-space: nowrap; }
.chip svg { margin-right: 8px; color: var(--muted); }
.chip:hover { border-color: var(--dim); }
.chip.on { background: transparent; border-color: var(--muted); }
.chip.on svg.hot { color: var(--orange); fill: var(--orange); }
.chip[data-fav].on svg { color: var(--orange); fill: var(--orange); }
.chip b { font-weight: 500; }
.chip [data-fcount] { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #cc4410; color: #fff; font: 600 11px/18px var(--font); text-align: center; }
.chip [data-fcount]:empty { display: none; }
.chip.lg { height: 40px; padding: 0 20px; font-weight: 600; }
.vsep { width: 1px; height: 24px; background: var(--line); flex: none; }
.toolbar-r { display: flex; align-items: center; gap: 16px; flex: none; }
.how { display: inline-flex; align-items: center; gap: 6px; height: 37px; padding: 0 12px; border-radius: var(--pill); font: 500 14px/14px var(--font); letter-spacing: .5px; white-space: nowrap; }
.how svg { width: 14px; height: 14px; }
.fresh { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 4px 8px; border-radius: var(--pill); background: var(--green-bg); border: 1px solid var(--green-line); font: 400 12px/18px var(--font); color: var(--muted); white-space: nowrap; }
.fresh .dot { position: relative; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.fresh .dot::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(49, 196, 141, .3); }
.fresh .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; }
.fresh em { font-style: normal; color: var(--green); }
.fresh b { font-weight: 400; color: #fff; }
.fresh.old { background: var(--card-2); border-color: var(--line); padding: 4px 10px; }
.fresh.old em { color: var(--muted); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; min-height: 28px; }
.list-head h2, .list-head h3 { font: 600 16px/24px var(--font); letter-spacing: -.4px; }
.list-head h2 span { margin-left: 4px; color: var(--orange); }
.count { font: 400 12px/18px var(--font); color: var(--muted); white-space: nowrap; }
.count b { color: #fff; font-weight: 600; }
.m-sort { display: none; }
.legend { margin-top: 12px; font: 400 12px/18px var(--font); color: var(--dim); }
.legend b { color: var(--muted); font-weight: 600; }

/* ───── Панель фильтров ───── */
.board { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.side { display: none; }
.side-head, .side-foot, .scrim { display: none; }
.fgroup { border-bottom: 1px solid var(--line); }
.fgroup summary { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 16px 4px; font: 600 16px/24px var(--font); cursor: pointer; list-style: none; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary svg { transition: transform .15s; }
.fgroup[open] summary svg { transform: rotate(180deg); }
.fgroup.has summary { color: var(--orange); }
.fgroup .body { padding: 4px 4px 16px; }
.fgroup .hint { margin-bottom: 12px; font: 400 12px/18px var(--font); color: var(--muted); }
.fopts { display: flex; flex-wrap: wrap; gap: 8px; }
.fopt { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: var(--pill); background: var(--line); border: 1px solid var(--line); font: 500 12px/18px var(--font); color: var(--muted); }
.fopt:hover { border-color: var(--dim); }
.fopt[aria-pressed="true"] { background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; border-color: transparent; color: #fff; }
.fopt i { margin-left: 6px; font-style: normal; color: #a8a4a5; }
.freset { display: flex; justify-content: center; margin-top: 8px; }
.freset button { height: 40px; padding: 8px 20px; border-radius: 6px; font: 500 14px/22px var(--font); color: var(--orange); }
.freset button:hover { background: var(--card-2); }
@media (min-width: 1380px) {
  .f-open .board { grid-template-columns: 320px minmax(0, 1fr); column-gap: 12px; }
  .f-open .side { display: block; padding-right: 20px; align-self: start; position: sticky; top: calc(var(--top-h) + 8px); max-height: calc(100vh - var(--top-h) - 16px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  /* рядом с панелью таблице тесно: убираем «Игры», сжимаем отступы; если всё же не влезла — кнопка перехода закреплена справа */
  .f-open .tbl-wrap { overflow-x: auto; }
  .f-open table.cmp { min-width: 1000px; }
  .f-open .cmp th { position: static; }
  .f-open .cmp th, .f-open .cmp td { padding-left: 8px; padding-right: 8px; }
  .f-open .cmp th[data-c="x"], .f-open .cmp td[data-c="x"], .f-open .cmp th[data-c="x2"], .f-open .cmp td[data-c="x2"] { display: none; }
  .f-open .cmp td:last-child { position: sticky; right: 0; z-index: 5; }
  .f-open .tags .tagc:nth-child(n+4):not(.more) { display: none; }
  .f-open .tagc.more .only-d { display: none; } .f-open .tagc.more .only-m, .f-open .tagc.more.only-m { display: inline-flex; }
  .f-open .promo { width: 136px; }
}
@media (max-width: 1379px) {
  body.f-open { overflow: hidden; }
  .f-open .side { display: flex; flex-direction: column; position: fixed; z-index: 90; left: 0; top: 0; bottom: 0; width: 380px; max-width: 100%; background: var(--bg); border-right: 1px solid var(--line); }
  .f-open .scrim { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, .6); }
  .side-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 18px/26px var(--font); }
  .side-body { flex: 1; overflow-y: auto; padding: 0 16px; }
  .side-foot { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
  .side-foot .btn { height: 48px; }
  .side .freset { display: none; }
  .fopt { min-height: 36px; padding: 6px 12px; }
}

/* ───── Таблица ───── */
.tbl-wrap { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* Раскладка таблицы фиксированная: ширины задаёт colgroup, а не содержимое. До этого ввод
   депозита перекраивал таблицу на каждый символ — колонка бонуса росла на 135 px, максутавы
   сжимались вдвое, чипы вставали столбиком, строки разъезжались по высоте и документ прыгал
   (замер диспетчера 06.10, 1440×900). Сумма процентов по колонкам — 100. */
table.cmp { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 8px; font: 400 14px/22px var(--font); }
.cmp .w-brand { width: 19%; } .cmp .w-rate { width: 7.5%; } .cmp .w-lic { width: 9.5%; }
.cmp .w-wd { width: 6.5%; } .cmp .w-pm { width: 18%; } .cmp .w-dep { width: 8.5%; }
.cmp .w-x { width: 8%; } .cmp .w-bonus { width: 14%; } .cmp .w-act { width: 9%; }
.cmp.c10 .w-brand { width: 17%; } .cmp.c10 .w-rate { width: 6.5%; } .cmp.c10 .w-lic { width: 9%; }
.cmp.c10 .w-wd { width: 6%; } .cmp.c10 .w-pm { width: 15%; } .cmp.c10 .w-dep { width: 7.5%; }
.cmp.c10 .w-x, .cmp.c10 .w-x2 { width: 7.5%; } .cmp.c10 .w-bonus { width: 15.5%; } .cmp.c10 .w-act { width: 8.5%; }
@media (max-width: 1280px) {
  .cmp .w-brand { width: 21%; } .cmp .w-pm { width: 16%; } .cmp .w-bonus { width: 15%; }
  .cmp.c10 .w-brand { width: 19%; } .cmp.c10 .w-pm { width: 13.5%; }
}
/* Содержимое ячеек не растягивает колонку: длинное имя и длинный список режутся по месту */
.cmp td > *, .cmp th > * { max-width: 100%; }
.cmp .nm a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Флаг остаётся на одной линии с первой строкой названия (у -webkit-box он вставал отдельной
   строкой во всех 30 строках — замер диспетчера 06.10), название может перенестись на вторую. */
.cmp .lic { display: inline-flex; align-items: flex-start; gap: 6px; max-height: 44px; overflow: hidden; overflow-wrap: break-word; }
.cmp .lic .flag { flex: none; margin-top: 4px; }
/* Поле способов оплаты — ровно две строки чипов и кнопка «+N»; остальное в попапе */
.cmp td[data-c="pm"] .tags { max-height: 48px; overflow: hidden; align-content: flex-start; }
button.tagc.more { border: 0; cursor: pointer; font: 500 12px/18px var(--font); letter-spacing: .5px; }
button.tagc.more:hover { background: var(--rose-bg); color: #fff; }
button.tagc.more:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Результат депозита — зарезервированный слот: место занято всегда, и до ввода суммы тоже */
/* Третья строка под плашкой: без депозита — подпись базы или «+ N ilmaiskierrosta», с депозитом —
   сам расчёт. Высота постоянная, поэтому ввод суммы не меняет высоту строки ни на пиксель. */
.beur { display: block; height: 16px; overflow: hidden; margin-top: 3px; font: 400 10px/16px var(--font); color: var(--dim); white-space: nowrap; text-overflow: ellipsis; }
.beur.calc { color: var(--muted); }
.beur .l1 { display: block; }
.beur .l2 { display: block; color: var(--dim); font-size: 10px; line-height: 14px; }
/* тот же слот в карточке оффера: высота карточки не зависит от введённой суммы */
.orow .beur { height: 34px; margin: 0; font-size: 12px; line-height: 16px; text-align: left; }
.orow .beur .l2 { font-size: 11px; line-height: 15px; }
/* Попап «все способы оплаты казино» */
.pm-dlg { position: fixed; inset: 0; z-index: 90; display: none; }
.pm-dlg.on { display: block; }
.pm-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.pm-win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; }
.pm-head h3 { margin: 0; font: 600 17px/24px var(--font); }
.pm-x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--chip); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.pm-x:hover { color: #fff; }
.pm-body { overflow: auto; padding: 0 16px; }
.pm-list { margin: 0; padding: 0; list-style: none; }
.pm-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pm-list a { color: #ff8a5c; text-decoration: underline; text-underline-offset: 3px; }
.pm-marks { display: flex; gap: 10px; flex: none; }
.pm-m { font: 500 12px/18px var(--font); color: var(--dim); white-space: nowrap; }
.pm-m.y { color: var(--green, #35c08a); }
.pm-foot { margin: 0; padding: 10px 16px 16px; font: 400 11px/16px var(--font); color: var(--dim); }
body.pm-open { overflow: hidden; }
@media (max-width: 560px) {
  /* на телефоне — нижняя шторка */
  .pm-win { left: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 76vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
.cmp th { position: sticky; top: var(--top-h); z-index: 20; height: 54px; padding: 2px 12px; background: transparent; font: 600 10px/22px var(--font); text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.cmp.stuck th { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.cmp th > span, .cmp th > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 50px; font: inherit; text-transform: inherit; color: inherit; }
.cmp th button:hover, .cmp th button.act { color: var(--text); }
.cmp th svg { width: 8px; height: 14px; stroke-width: 2.4; }
.cmp th button[data-dir="asc"] svg .dn, .cmp th button[data-dir="desc"] svg .up { opacity: .25; }
.cmp th:first-child { text-align: left; }
.cmp th:not(:last-child)::after, .cmp td:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; background: var(--line); }
.cmp th:not(:last-child)::after { height: 27px; margin-top: -13px; }
.cmp td:not(:last-child)::after { height: 52px; margin-top: -26px; }
/* Одна высота строки на весь набор: имя, лицензия и чипы режутся по двум строкам, под бонусом
   стоит слот постоянной высоты. Mrvegas и Netbet раньше были в полтора раза выше соседей. */
.cmp td { position: relative; vertical-align: middle; height: 122px; padding: 14px 12px; text-align: center; background: var(--card-2); border-top: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); overflow: hidden; }
.cmp td:first-child { text-align: left; border-left: 1px solid var(--cell-line); border-radius: var(--r-lg) 0 0 var(--r-lg); }
.cmp td:last-child { border-right: 1px solid var(--cell-line); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.cmp tr.r1 td { background: var(--row-1); } .cmp tr.r2 td { background: var(--row-2); } .cmp tr.r3 td { background: var(--row-3); }
.cmp tbody tr:hover td { border-top-color: rgba(255, 255, 255, .22); border-bottom-color: rgba(255, 255, 255, .22); }
.c-brand { display: flex; align-items: center; gap: 12px; }
.rank { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; font: 600 12px/18px var(--font); }
.rank.num { border: 1px solid transparent; background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; }
.cup { width: 24px; height: 24px; fill: currentColor; }
.cup .h { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rank.g1 { color: #faca15; } .rank.g2 { color: #b9c7d3; } .rank.g3 { color: #e0915f; }
.logo-frame { display: inline-flex; padding: 2px; border-radius: 10px; flex: none; background: var(--grad); }
.r1 .logo-frame { background: #faca15; }
.logo-frame .logo-box { width: 54px; height: 54px; border: 3px solid var(--bg); border-radius: 9px; font-size: 16px; }
.c-brand .meta { min-width: 0; flex: 1; }
.c-brand .nm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; }
.c-brand .nm > a { min-width: 0; }
.c-brand .nm .heart { flex: none; margin-left: auto; }   /* сердечко всегда в строке имени, справа (D58) */
.c-brand .nm > a { min-width: 0; }
.c-brand .nm a { font: 600 14px/22px var(--font); }
.c-brand .nm a:hover { text-decoration: underline; }
.heart { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; flex: none; color: #fff; border-radius: 50%; }
.heart:hover { background: rgba(255, 255, 255, .08); }
td .heart[aria-pressed="true"] { color: var(--orange); }
td .heart[aria-pressed="true"] svg { fill: var(--orange); }
.c-brand .sub { display: flex; align-items: center; gap: 4px; margin-top: 6px; font: 400 12px/18px var(--font); color: var(--orange); white-space: nowrap; }
.c-brand .sub svg { width: 14px; height: 14px; }
.c-brand .sub.plain { color: var(--muted); }
.rate { display: inline-flex; align-items: center; justify-content: center; min-width: 41px; height: 28px; padding: 2px 8px; border-radius: var(--pill); font: 600 14px/22px var(--font); letter-spacing: .5px; }
.rate.new { font-size: 12px; color: var(--muted); letter-spacing: .3px; }
.c-rate .stars { display: block; margin: 6px auto 0; }
.cap { display: block; margin-top: 4px; font: 400 12px/18px var(--font); color: var(--muted); white-space: nowrap; }
.cap b { font-weight: 600; color: var(--orange); }
.lic { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; font: 600 14px/22px var(--font); text-align: left; }
.flag { width: 20px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.pillt { display: inline-flex; align-items: center; height: 22px; padding: 2px 8px; border-radius: var(--pill); font: 500 12px/18px var(--font); letter-spacing: .3px; white-space: nowrap; }
.pillt.ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-line); }
.pillt.warn { background: rgba(99, 49, 18, .45); color: var(--amber); border: 1px solid rgba(250, 202, 21, .12); }
.pillt.dimmed { background: var(--line); color: var(--muted); }
/* Плашки под названием лицензии — своей строкой, без <br>: перенос строки добавлял ячейке
   17 px, и строка «Huikee Kasino» была выше соседей (правка 06.10). */
.c-lic .lic-pills { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: 4px; max-height: 48px; overflow: hidden; }
.c-lic .lic-pills:empty { display: none; }
.c-lic .pillt { margin-top: 0; }
.ring { position: relative; width: 44px; height: 44px; margin: 0 auto; }
.ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .trk { stroke: var(--line); }
.ring .val { stroke: url(#rg); stroke-linecap: round; }
.ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tagc { display: inline-flex; align-items: center; height: 22px; padding: 2px 6px; border-radius: var(--pill); background: var(--line); font: 500 12px/18px var(--font); letter-spacing: .5px; color: var(--muted); white-space: nowrap; }
.tagc.more { background: var(--rose-bg); color: #ff8a5c; }
/* Чипы одного ряда — одной высоты и по одной базовой линии (D33); бейдж не превращается
   в овал из трёх строк в узкой колонке (D37). */
.tags { align-items: center; margin-top: 10px; }   /* ряд чипов не прилипает к абзацу (D28, D33) */
.tagc { min-height: 32px; display: inline-flex; align-items: center; }
.pillt { min-height: 24px; border-radius: 8px; white-space: normal; text-align: left; padding: 3px 8px; line-height: 16px; }   /* прямоугольная плашка с переносом, не овал (D37) */
.val { font: 600 14px/22px var(--font); white-space: nowrap; }
.val.wrap { white-space: normal; }   /* сборка 2: подпись даты запуска на «uudet» переносится в узкой колонке (1440) */
.meter { width: 96px; height: 4px; margin: 4px auto 0; border-radius: var(--pill); background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--p, 0%); border-radius: var(--pill); background: var(--grad); }
/* Высота плашки бонуса постоянная: иначе строка с длинным условием отыгрыша была выше соседей,
   а при вводе депозита росла ещё раз (правка Артёма 06.10). */
.promo { display: inline-flex; flex-direction: column; width: 150px; height: 56px; padding: 2px 2px 1px; border-radius: 10px 10px 8px 8px; background: var(--grad-solid); }
.promo .t { height: 21px; display: flex; align-items: center; justify-content: center; font: 600 12px/18px var(--font); white-space: nowrap; overflow: hidden; }
.promo .b { flex: 1; min-height: 25px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 2px 6px; border-radius: 8px; background: var(--bg); font: 600 11px/14px var(--font); white-space: normal; text-align: center; overflow-wrap: break-word; }
/* круг 2: длинная строка условия в плашке бонуса («Kierrätys 35x talletuksesta ja bonuksesta») не обрезается — плашка растёт по высоте */
.promo { height: auto; min-height: 56px; }
.promo .b { overflow: visible; }
.c-bonus .cap { display: block; height: 15px; overflow: hidden; }
.promo:hover .b { background: var(--card-2); }
.c-act { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.c-act .btn { height: 38px; padding: 0 16px; }
.c-act .more { font: 400 12px/18px var(--font); color: var(--muted); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
.c-act .more.none-link { color: var(--dim); text-decoration: none; cursor: default; }   /* бренд без обзора: ряд не рассыпается (D60) */
.c-act .more:hover { color: var(--text); }
.empty { margin: 16px 0; padding: 28px; border-radius: var(--r-lg); border: 1px dashed var(--line); text-align: center; color: var(--muted); font-size: 14px; }
.empty button { color: #ff8a5c; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1379px) {
  .cmp th[data-c="x"], .cmp td[data-c="x"], .cmp th[data-c="x2"], .cmp td[data-c="x2"] { display: none; }   /* на 1379 и уже дополнительные колонки не помещаются */
}

/* ───── Текстовые блоки, метод, вопросы ───── */
.section { margin-top: 72px; }
.section > h2 { font: 600 30px/40px var(--font); text-align: center; }
/* Заголовок не оставляет одно слово в последней строке: браузер сам выравнивает строки
   (D68). Там, где text-wrap: balance не поддерживается, всё остаётся как было. */
h1, .section > h2, .sec > h2, .faq summary, .nextq h3 { text-wrap: balance; }
.section > .sub, .blk > .sub { max-width: 672px; margin: 8px auto 0; text-align: center; color: var(--muted); }
/* Блок данных, встроенный в раздел автора, остаётся блоком: отступы сверху у него свои. */
.blk + .prose, .prose + .blk { margin-top: 20px; }
.method { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.mcard, .rubric { padding: 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); }
.ic svg { width: 20px; height: 20px; color: var(--orange); }
.mcard h3, .rubric h3 { margin-top: 14px; font: 600 16px/24px var(--font); }
.mcard p, .rubric p { margin-top: 6px; font: 400 14px/22px var(--font); color: var(--muted); }
.states { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rubric { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; margin-top: 12px; scroll-margin-top: calc(var(--top-h) + 16px); }
.rubric ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; align-content: center; }
.rubric li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 40px; align-items: center; gap: 10px; font: 400 14px/22px var(--font); }
.rubric li .meter { width: 72px; margin: 0; }
.rubric li b { font-weight: 600; text-align: right; }
.prose { max-width: 896px; margin: 32px auto 0; }
.prose h3 { margin-top: 28px; font: 600 20px/28px var(--font); }
.prose p { margin-top: 12px; font: 400 16px/28px var(--font); color: #e9e7e7; }
.prose a, .faq .a a { color: #ff8a5c; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.faq { max-width: 896px; margin: 40px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 16px 0; font: 600 18px/26px var(--font); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { transition: transform .15s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .a { padding: 0 0 16px; font: 400 16px/28px var(--font); color: #e9e7e7; }
.sec .faq { max-width: none; margin-top: 12px; }
/* Заголовок над аккордеоном — по левому краю самого аккордеона, одинаково на всех шаблонах
   (D53). Общее правило «.section > h2 по центру» давало разнобой: на обзорах (.sec) заголовок
   стоял слева, на остальных страницах по центру, а блок под ним один и тот же. */
.section:has(> .faq) > h2, .section:has(> .faq) > .sub { max-width: 896px; margin-inline: auto; text-align: left; }

/* ───── Карточка оффера ───── */
.offers { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.offer { padding: 16px 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--chip); }
.offer-main { display: flex; align-items: center; gap: 16px; }
.offer-big { position: relative; display: flex; flex-direction: column; align-items: center; width: 220px; height: 108px; flex: none; padding-bottom: 12px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; }
.offer-big .rib { display: inline-flex; align-items: center; gap: 4px; height: 27px; padding: 6px 18px; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--grad-solid); font: 600 11px/15px var(--font); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.offer-big .rib svg { width: 12px; height: 12px; }
.offer-big .corner { position: absolute; left: -1px; top: -1px; display: flex; align-items: center; justify-content: center; width: 32px; height: 28px; border-radius: var(--r-lg) 0; background: var(--grad-solid); }
.offer-big .corner svg { width: 12px; height: 12px; fill: #fff; stroke: none; }
.offer-big .amt { flex: 1; display: flex; align-items: center; gap: 6px; padding-top: 6px; font: 600 24px/36px var(--font); letter-spacing: .5px; white-space: nowrap; }
.offer-big .amt small { font: 600 13px/18px var(--font); color: var(--muted); letter-spacing: 0; }
.offer-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.offer-mid .who { display: flex; align-items: center; gap: 16px; }
.offer-mid .who a, .offer-mid .who b { font: 600 14px/21px var(--font); }
.offer-mid .who a:hover { text-decoration: underline; }
.offer-mid .who .rate-s { height: 20px; margin-top: 6px; }
.offer-mid hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.offer-mid .desc { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 12px/18px var(--font); }
.offer-mid .desc span { color: var(--muted); }
.offer-mid .desc b { font-weight: 600; color: #fff; }
.code { display: inline-flex; align-items: center; height: 38px; padding: 6px 16px; border-radius: var(--pill); border: 1px dashed var(--orange); background: linear-gradient(0deg, rgba(146, 98, 249, .2) 0%, rgba(255, 90, 31, .2) 100%), var(--bg); font: 600 14px/22px var(--font); white-space: nowrap; flex: none; }
.code small { margin-right: 8px; padding-right: 8px; border-right: 1px solid var(--orange); font: 400 12px/24px var(--font); color: #ff8a5c; }
.offer .vsep { height: 32px; }
.offer-act { display: flex; flex-direction: column; gap: 8px; width: 116px; flex: none; }
.offer-act .btn { width: 100%; padding: 0 12px; }
.offer-act .btn-line { height: 36px; }
.offer-act [aria-expanded="true"] svg { transform: rotate(180deg); }
.offer-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.offer-terms dt { font: 400 12px/18px var(--font); color: var(--muted); }
.offer-terms dd { margin-top: 2px; font: 600 14px/22px var(--font); }
/* задача 6, № 84 (w7): страница всех офферов — сетка карточек 3 × 4 на 1440, столбиком на телефоне; фильтры — лентой с прокруткой */
.ogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ogrid .ocell[hidden] { display: none; }
.ogrid .offer { height: 100%; }
.ogrid .offer-main { flex-direction: column; align-items: stretch; height: 100%; }
.ogrid .offer-big { width: 100%; }
.ogrid .offer-mid { flex: 1; }
.ogrid .offer-act { width: 100%; flex-direction: row; }
.oa-count { margin-top: 12px; font: 500 14px/22px var(--font); color: var(--muted); }
.oa-count b { color: #fff; font-weight: 600; }
@media (max-width: 1100px) { .ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ogrid { grid-template-columns: minmax(0, 1fr); }
  .oa-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .oa-chips .chip { flex: none; }
}

/* ───── Страница бренда ───── */
.b-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 56px; }
.b-actions > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }   /* на 901–920 ряд кнопок был на 7–8 px шире окна — переносится, а не вылезает */
.round { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.round:hover { border-color: var(--dim); }
.picker { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 6px 12px 6px 8px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--line); font: 400 14px/22px var(--font); }
.picker:hover, .picker:focus-within { border-color: var(--dim); }
.picker .logo-box { width: 24px; height: 24px; border-radius: 50%; font-size: 9px; }
.picker select { -webkit-appearance: none; appearance: none; padding-right: 22px; outline: 0; }
.picker select option { background: var(--card-2); color: #fff; }
.picker > svg { position: absolute; right: 12px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.b-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
.b-id { display: flex; align-items: center; min-width: 0; }
.b-id > .logo-box { width: 110px; height: 110px; font-size: 30px; }
.b-id .inf { margin-left: 16px; min-width: 0; }
.b-id h1 { font: 600 30px/36px var(--font); }
.b-id .since { display: flex; align-items: center; gap: 4px; margin-top: 6px; font: 400 12px/18px var(--font); color: #ff8a5c; }
.b-id .lead { margin-top: 10px; max-width: 680px; font: 400 15px/23px var(--font); color: var(--muted); }   /* Т32: lead обзора — первым после H1 */
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; min-width: 0; }
.facts > div { min-width: 0; max-width: 100%; font: 600 14px/22px var(--font); white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.facts > div > span:first-child { display: block; font-weight: 400; color: var(--muted); }
.facts > i { width: 1px; height: 40px; background: var(--line); }
.facts .lic { display: inline-flex; max-width: 100%; }
/* Номер лицензии не рвём: «OGL/2024/1487/0729» читается неверно, если перенести его
   посреди (D14, D45). Переносим целиком. */
.licno, .lic-num, .pillt .num { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.licno.wrap { white-space: normal; }   /* длинный номер с пояснением («… (Videoslots Ltd)») переносится по пробелам, иначе он шире экрана телефона */
/* Чип лицензии: регулятор и номер — две части одной строки, точка не остаётся сиротой,
   номер не прижимается к краю плашки (D77). */
.pc .licno, .kv .v .licno { margin-left: 2px; }   /* круг 2: отступ справа давал пробел перед запятой между номерами */
.pc, .kv .v .pc { align-items: center; row-gap: 2px; }
.b-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.b-score { display: flex; align-items: center; flex: none; }
.b-score .big { display: flex; flex-direction: column; align-items: center; width: 116px; }
.b-score .big p { font: 600 48px/56px var(--font); }
.b-score .big p.new { font: 600 22px/56px var(--font); color: var(--muted); }
.b-score .big .cap { margin-top: 4px; }
.bars { width: 348px; margin-left: 24px; display: flex; flex-direction: column; gap: 4px; }
.bars-cap { margin-bottom: 2px; font: 400 12px/18px var(--font); color: var(--dim); }
.bars > div { display: grid; grid-template-columns: 112px minmax(60px, 1fr) 22px 30px; align-items: center; gap: 8px; font: 400 12px/18px var(--font); }
.bars > div > span { color: var(--muted); }
.bars > div b { font-weight: 600; text-align: right; white-space: nowrap; }
.bars > div small { font: 400 11px/18px var(--font); color: var(--dim); text-align: right; }
.bars .meter { width: 100%; margin: 0; }
/* ── Липкий стек: шапка + (лента разделов) + карточка оффера ───────────────────────────
   Высота всего липкого живёт в одной переменной --stick (её считает site.js по факту).
   От неё отсчитываются боковое оглавление и якоря. Было: карточка оффера и оглавление
   липли независимо, карточка (150 px) ложилась на оглавление, низ оглавления уезжал
   за экран, липкое съедало до 39 % окна (баг Артёма 05.10, /arvostelu/netbet/). */
:root { --stick: var(--top-h); }
.b-offer { position: sticky; top: var(--stick-above, var(--top-h)); z-index: 29; margin-top: 24px; background: var(--bg); padding-top: 8px; transition: padding .12s linear; }
/* Прилипшая карточка — узкая полоса: логотип, имя, главная цифра, код и кнопка. */
.b-offer.stuck { padding-top: 4px; padding-bottom: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.b-offer.stuck .offer { height: 52px; padding: 0 10px; overflow: hidden; display: flex; align-items: center; }
.b-offer.stuck .offer-main { width: 100%; height: 52px; align-items: center; }
/* Блок с цифрой бонуса в полосе: от высокой карточки оставались высота 108 px, лента и уголок —
   цифра прижималась к низу, а рамка обрезалась сверху (доводка Артёма 05.10). В полосе это
   обычная плашка по центру строки. */
.b-offer.stuck .offer-big { width: auto; min-width: 0; height: 36px; padding: 0 12px; flex-direction: row; align-items: center; justify-content: center; }
.b-offer.stuck .offer-big .rib, .b-offer.stuck .offer-big .corner { display: none; }
.b-offer.stuck .offer-big .amt { flex: none; padding-top: 0; font: 600 17px/36px var(--font); }
.b-offer.stuck .offer-big .amt small { font-size: 12px; line-height: 36px; }
.b-offer.stuck .offer-act { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 52px; }
.b-offer.stuck .offer-act > *:not(.btn-grad):not(a[rel]) { display: none; }   /* в полосе остаётся одна кнопка перехода */
.b-offer.stuck .offer-mid > *:not(.who):not(.offer-top) { display: none; }
.b-offer.stuck .who { gap: 10px; }
.b-offer.stuck .who > div > br { display: none; }
.b-offer.stuck .offer { padding: 6px 10px; }
.b-offer.stuck .offer-main { gap: 10px; align-items: center; }
.b-offer.stuck .offer-mid { flex-direction: row; align-items: center; gap: 12px; }
.b-offer.stuck .offer-mid .who .rate-s,
.b-offer.stuck .offer-terms, .b-offer.stuck .offer-note, .b-offer.stuck .o-mat,
.b-offer.stuck .offer-mid .cap, .b-offer.stuck .offer-sub, .b-offer.stuck .dis { display: none; }
.b-offer.stuck .logo-box { width: 32px; height: 32px; font-size: 12px; }
.b-offer.stuck .offer-act .btn { height: 36px; padding: 0 14px; font-size: 13px; }
.b-offer.stuck .offer-main > * { min-width: 0; }
.b-title { margin-top: 28px; font: 600 16px/24px var(--font-head); }
.b-body { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 12px; margin-top: 24px; align-items: start; }
.toc { position: sticky; top: calc(var(--stick) + 12px); display: flex; flex-direction: column;
  max-height: calc(100vh - var(--stick) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.toc a { padding: 6px 0 6px 12px; border-left: 2px solid transparent; font: 400 14px/22px var(--font); color: var(--muted); }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--text); font-weight: 600; border-left-color: var(--orange); }
.sum, .sec { scroll-margin-top: calc(var(--stick) + 12px); }
/* Пустой блок внутри раздела не должен оставлять дыру в 50–80 px (D35). */
.sec > .prose:empty, .sec > div:empty, .section > div:empty, .blk:empty { display: none; }
.sec > .kv + .prose { margin-top: 12px; }       /* к отступу страницы (шапка) добавляется высота прилипшего блока оффера */
.sum { padding: 24px; border-radius: var(--r-lg); border: 1px solid transparent; background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; }
.sum .lbl { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--pill); background: var(--grad-solid); font: 600 12px/18px var(--font); }
.sum .lbl svg { width: 14px; height: 14px; }
.sum h2 { margin-top: 20px; font: 600 24px/32px var(--font); }
.sum p { margin-top: 8px; font: 400 14px/24px var(--font); color: #e9e7e7; letter-spacing: .2px; }
.sec { padding: 28px 0; border-bottom: 1px solid var(--line); }
.sec:last-child { border-bottom: 0; }
.sec > h2 { font: 600 30px/36px var(--font); }
.sec p.note { margin-top: 12px; font: 400 14px/22px var(--font); color: var(--muted); max-width: 820px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.kv .k { font: 400 14px/22px var(--font); color: var(--muted); }
.kv .v { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px;   /* плашка переносится (номера лицензий — отдельные flex-элементы, без переноса вылезали за экран телефона) */ padding: 2px 10px; border-radius: var(--pill); background: var(--chip); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); font: 500 14px/22px var(--font); white-space: nowrap; }
.pc svg { width: 14px; height: 14px; }
.pc.ok svg { color: var(--green); } .pc.no { color: var(--muted); } .pc.no svg { color: var(--red); } .pc.unk { color: var(--muted); border-style: dashed; }
.wide-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; padding: 0 16px; margin-top: 20px; border-radius: var(--pill); font: 600 14px/22px var(--font); letter-spacing: .3px; text-align: center; }
.dt { width: 100%; margin-top: 20px; border-collapse: collapse; font: 400 14px/22px var(--font); }
.dt thead th { padding: 10px 12px; border-bottom: 1px solid var(--line); font: 600 10px/22px var(--font); text-transform: uppercase; color: var(--muted); text-align: center; white-space: nowrap; }
.dt thead th:first-child, .dt tbody th { text-align: left; }
.dt td, .dt tbody th { padding: 12px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.dt tbody th { font-weight: 600; }
.dt-wrap { overflow-x: auto; }
/* Таблица из текста автора: на узком экране листается вбок, а не срезается краем (D36). */
.t-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 16px; }
.t-wrap table { width: 100%; border-collapse: collapse; font: 400 14px/22px var(--font); }
.t-wrap th, .t-wrap td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.t-wrap th { font: 600 11px/18px var(--font); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) { .t-wrap table { min-width: 540px; } }
.st { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 2px 8px; border-radius: var(--pill); font: 600 12px/18px var(--font); }
.st.y { background: var(--green-bg); color: var(--green); } .st.n { background: rgba(240, 82, 82, .12); color: var(--red); } .st.u { background: var(--line); color: var(--muted); }
.st svg { width: 12px; height: 12px; stroke-width: 3; }
.olist { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.orow { display: grid; grid-template-columns: 172px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); }
.orow .ty { display: inline-flex; align-items: center; height: 24px; padding: 2px 10px; border-radius: var(--pill); background: var(--tint); font: 600 12px/18px var(--font); white-space: nowrap; justify-self: start; }
.orow .nm { font: 600 14px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .cnd { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font: 400 12px/18px var(--font); color: var(--muted); }
.orow .cnd b { font-weight: 600; color: #fff; }
.pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.pm > div { padding: 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.pm h3, .pm .pm-t { margin: 0; font: 600 16px/24px var(--font); }
.pm h3, .pm .pm-t b { display: flex; align-items: center; gap: 8px; font-weight: 600; }   /* Т32: подпись списка — жирный текст, не H3 */
.pm h3 svg, .pm .pm-t svg { width: 18px; height: 18px; }
.pm .plus h3 svg, .pm .plus .pm-t svg { color: var(--green); } .pm .minus h3 svg, .pm .minus .pm-t svg { color: var(--red); }
.pm li { position: relative; margin-top: 10px; padding-left: 18px; font: 400 14px/22px var(--font); color: #e9e7e7; }
.pm li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pm .minus li::before { background: var(--red); }

/* ───── Подвал ───── */
.rg { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 72px; padding: 14px 20px; border-radius: var(--r-md); background: var(--card-2); font: 400 14px/22px var(--font); color: var(--muted); }
.rg b { color: #fff; font-weight: 600; } .rg em { font-style: normal; font-weight: 600; color: #ff8a5c; }
.rg a { text-decoration: underline; text-underline-offset: 3px; }
.rg .age { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 12px; border-radius: 50%; border: 2px solid var(--orange); font: 700 12px/1 var(--font); color: #fff; flex: none; }
.rg > div { display: flex; align-items: center; }
.foot { display: grid; grid-template-columns: 240px repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
/* 600–1000 px: четыре колонки ссылок слипались друг с другом, а под логотипом оставалась
   пустота. Логотип — отдельной строкой сверху, ссылки в две колонки (D40). */
@media (max-width: 1000px) and (min-width: 601px) {
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .foot .about { grid-column: 1 / -1; }
  .foot .about p { max-width: 100%; }
}
.foot .about p { margin-top: 12px; font: 400 12px/18px var(--font); color: var(--muted); max-width: 220px; }
.foot h2, .foot .foot-h { margin: 0 0 12px; font: 600 12px/18px var(--font); text-transform: uppercase; letter-spacing: .4px; }
.foot li { margin-top: 10px; font: 400 14px/22px var(--font); color: var(--muted); }
.foot li a:hover { color: #fff; }
.legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 20px 0 24px; border-top: 1px solid var(--line); font: 400 12px/18px var(--font); color: var(--muted); }
.legal nav { display: flex; gap: 24px; }
.legal a:hover { color: #fff; }
.note-mock { margin: 0 auto 24px; max-width: 896px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--line); font: 400 12px/18px var(--font); color: var(--dim); text-align: center; }

.m-switch, .m-deals { display: none; }

/* ───── До 1180: карточки вместо таблицы ───── */
@media (max-width: 1180px) {
  .menu { overflow-x: auto; scrollbar-width: none; } .menu::-webkit-scrollbar { display: none; }
  .menu a { flex: 0 0 auto; }
  .tabs { flex-wrap: wrap; gap: 8px 16px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar-l .vsep { display: none; }
  .method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubric { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deals-head .all { display: none; }
  .b-head { flex-direction: column; align-items: flex-start; }
  .offer-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* та же разметка таблицы, но каждая строка — карточка; шапка скрыта, сортировка — в выпадающем списке */
  table.cmp { display: block; border-spacing: 0; }
  .cmp thead { display: none; }
  .cmp tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cmp tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand brand rate" "lic wd dep" "pm pm pm" "bonus bonus act"; column-gap: 8px; align-content: start; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--cell-line); background: var(--card-2); }
  /* На страницах про игры число игр — главный показатель, поэтому на телефоне
     колонку «Pelit» показываем (на остальных она остаётся только на столе). */
  .cmp.games tr { grid-template-areas: "brand brand rate" "lic wd dep" "games games games" "pm pm pm" "bonus bonus act"; }
  .cmp.games td[data-c="x"] { grid-area: games; display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cell-line); }
  .cmp.games td[data-c="x"]::before { content: "Pelejä"; display: block; margin-bottom: 4px; font: 600 10px/16px var(--font); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
  .cmp tr.r1 { background: var(--row-1); } .cmp tr.r2 { background: var(--row-2); } .cmp tr.r3 { background: var(--row-3); }
  .cmp td, .cmp td:first-child, .cmp td:last-child { display: block; position: static; height: auto; padding: 0; border: 0; border-radius: 0; background: none !important; text-align: left; }
  .cmp td::after { display: none; }
  /* Место ячейки в карточке — по её роли (data-c), а не по номеру: иначе любая
     новая колонка категории ломает мобильную раскладку. */
  .cmp td[data-c="brand"] { grid-area: brand; } .cmp td[data-c="rate"] { grid-area: rate; }
  .cmp td[data-c="lic"] { grid-area: lic; } .cmp td[data-c="wd"] { grid-area: wd; }
  .cmp td[data-c="pm"] { grid-area: pm; } .cmp td[data-c="dep"] { grid-area: dep; }
  .cmp td[data-c="bonus"] { grid-area: bonus; } .cmp td[data-c="act"] { grid-area: act; }
  .cmp td[data-c="x"], .cmp td[data-c="x2"] { display: none; }
  .cmp td[data-th]::before { content: attr(data-th); display: block; margin-bottom: 4px; font: 600 10px/16px var(--font); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
  .cmp td:nth-child(n+3) { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cell-line); }
  .cmp td:nth-child(n+8) { padding-top: 12px; }
  .c-brand { gap: 8px; }
  .logo-frame .logo-box { width: 44px; height: 44px; font-size: 13px; }
  .c-brand .nm { justify-content: flex-start; }
  .heart { width: 44px; height: 44px; margin: -8px 0; }
  .c-rate { display: flex !important; flex-direction: column; align-items: flex-end; }
  .c-rate .stars { margin: 6px 0 0; max-width: 100%; }
  .c-rate, .cmp td { min-width: 0; }
  .cmp td, .cmp th { white-space: normal; overflow-wrap: break-word; }   /* значение не срезается краем (D36), но слово рвётся только если иначе не влезает (R6) */
  .tags { min-width: 0; flex-wrap: wrap; }
  .c-lic br { display: none; }
  .c-lic .lic { display: flex; font-size: 13px; }
  .ring { margin: 0; width: 36px; height: 36px; } .ring svg { width: 36px; height: 36px; } .ring span { font-size: 11px; }
  .tags { justify-content: flex-start; }
  .tags .tagc:nth-child(n+4):not(.more) { display: none; }
  .only-d { display: none; }
  .only-m, .tagc.more.only-m { display: inline-flex; }
  .cmp .cap { white-space: normal; }
  .promo { width: 100%; max-width: 200px; }
  .c-bonus .none { margin-right: 6px; }
  .c-bonus .none + .cap { display: inline; }
  .c-act { align-items: stretch; gap: 2px; }
  .c-act .btn { width: 100%; padding: 0 8px; height: 48px; }
  .c-act .more { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .list-head { margin-top: 12px; }
  .m-sort { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/18px var(--font); color: var(--muted); }
  .m-sort select { height: 44px; padding: 0 30px 0 14px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c1c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; color: #fff; font: 500 13px/18px var(--font); -webkit-appearance: none; appearance: none; }
  .legend { display: block; }
}

/* ───── До 900: сжатая шапка — анонс и переключатель уезжают; ряд категорий спрятан в бургер (слово Артёма 10.10) ───── */
@media (max-width: 900px) {
  :root { --top-h: 56px; }  /* липкая шапка — только строка с логотипом: ряда категорий под ней больше нет */
  .top { top: -44px; }      /* уезжает только полоса переключателя */
  .m-switch { display: grid; grid-template-columns: 1fr 1fr; height: 44px; border-bottom: 1px solid var(--line); }
  .m-switch a, .m-switch span { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 11px/16px var(--font); letter-spacing: .4px; text-transform: uppercase; border-top: 2px solid transparent; }
  .m-switch .on { background: var(--tint); border-image: var(--grad) 1; }
  .m-switch .off { color: var(--muted); }
  .nav { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .nav .switch, .nav .vline { display: none; }
  .search { width: auto; flex: 1; max-width: 320px; }
  .menu { height: 44px; }
  .b-offer { position: static; }
  .toc { top: calc(var(--top-h) + 16px); }
  /* таблица платёжек: строка — способ, под ним подписи и значения. Таблицу сравнения
     (.cmp-tbl) так разворачивать нельзя: у её ячеек нет подписи data-th, и получались
     четыре значения подряд без имён казино (D12). */
  .dt:not(.cmp-tbl) thead { display: none; }
  .dt:not(.cmp-tbl), .dt:not(.cmp-tbl) tbody { display: block; }
  .dt:not(.cmp-tbl) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .dt:not(.cmp-tbl) td, .dt:not(.cmp-tbl) tbody th { padding: 0; border: 0; white-space: nowrap; font-size: 13px; }
  .crit-tbl td, .crit-tbl tbody th { white-space: normal; }   /* текстовая таблица переносится, а не режется (D78) */
  .dt:not(.cmp-tbl) tbody th { flex: 1 0 100%; font-size: 14px; }
  .dt td[data-th]::before { content: attr(data-th) " "; color: var(--muted); font-weight: 400; }
  /* Сравнение: листается вбок, но колонка с названиями полей примёрзла слева, а имя
     казино — сверху (D74). Ширину таблицы не задаём жёстко: двум казино хватает экрана
     и листать не приходится вовсе; четыре листаются, подписи строк при этом видны всегда.
     Угловая ячейка липнет по обеим осям — иначе она уезжала под шапку. */
  .cmp-tbl { min-width: 0; }
  .cmp-tbl thead { display: table-header-group; }
  .cmp-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 10px 8px; }
  .cmp-tbl thead th:not(:first-child), .cmp-tbl td { min-width: 112px; }
  .cmp-tbl thead th:first-child { left: 0; z-index: 4; }
  .cmp-tbl thead th a:first-child { font-size: 13px; }
  .cmp-tbl th[scope=row] { position: sticky; left: 0; z-index: 3; min-width: 124px; max-width: 124px; background: var(--bg); box-shadow: 1px 0 0 var(--line); font-size: 13px; white-space: normal; }
  /* подсказка про боковую прокрутку: видна, пока читатель не пролистал (D74) */
  .swipe { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font: 400 12px/18px var(--font); color: var(--dim); }
  .swipe::after { content: '→'; animation: swipe 1.6s ease-in-out infinite; }
  @keyframes swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  .cmp-tbl td { padding: 10px 8px; font-size: 13px; }
  .dt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sum, .sec { scroll-margin-top: 0; }
}

/* ───── До 760: телефон ───── */
@media (max-width: 380px) {
  /* На 320 две карточки в ряд не помещаются: колонка оценки уже звёзд, строка вылезает
     за экран (D8). Одна карточка в ряд — и страница снова по ширине экрана. */
  .cmp tbody { grid-template-columns: minmax(0, 1fr); }
  .orows { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  /* Плитки офферов: на телефоне в две колонки не влезают логотип (48) + плашка (124) —
     плашка ложилась на логотип (снимок Артёма 05.10). Одна колонка на ряд. */
  .deals-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .deal { height: auto; min-height: 66px; }
  .nav .logo span { display: none; }
  .m-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .m-hide { display: none; }
  .nav-r { gap: 4px; }
  .nav-r .fav { min-width: 44px; height: 44px; justify-content: center; }
  .nav-r .btn { height: 44px; padding: 0 14px; font-size: 13px; }
  /* На 320–360 поле поиска съедало сердечко и кнопку (находка w3 05.10). Строка поиска
     целиком живёт в выпадающем поиске по кнопке-лупе; в шапке оставляем только значок.
     Правило — только для поиска в шапке: на странице оплаты есть свой поиск способов,
     и он тоже свернулся в одинокую лупу (R5). */
  .nav .search { flex: 0 0 44px; width: 44px; }
  .nav .search input { padding-left: 36px; padding-right: 0; color: transparent; }
  .nav .search input::placeholder { color: transparent; }
  .nav .search input:focus { position: absolute; right: 0; z-index: 2; width: calc(100vw - 32px); padding-right: 12px; color: var(--text); background: var(--card-2); }
  .nav .search input:focus::placeholder { color: var(--dim); }
  /* Плавающая кнопка помощника на узких экранах — компактная, без длинной подписи:
     она перекрывала кнопки перехода и текст (находки детектора и w3). */
  .apu-fab { gap: 0; padding: 0; width: 48px; min-width: 48px; min-height: 48px; justify-content: center; overflow: hidden; }
  .apu-fab .apu-fab-t { display: none; }
  .apu-fab .i { width: 22px; height: 22px; }
  /* Якорь раздела не должен уезжать под липкую шапку */
  .section, .sec, .sum { scroll-margin-top: calc(var(--top-h, 56px) + 12px); }
  .menu { margin: 0 -16px; padding: 0 8px; }
  .hero { padding-top: 28px; }
  .glow::before, .glow::after { width: 220px; height: 320px; top: 0; opacity: .6; }
  .glow::before { left: -120px; } .glow::after { right: -120px; }
  .hero h1 { font-size: 24px; line-height: 36px; }
  .hero p.lead { font-size: 13px; line-height: 20px; }
  .counters { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; margin: 16px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .counters::-webkit-scrollbar { display: none; }
  .deals { display: none; }
  .m-deals { display: block; margin-top: 16px; border-radius: var(--r-md); overflow: hidden; border: 1px solid transparent; background: var(--tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; }
  .m-deals h2, .m-deals h3, .m-deals .m-deals-h { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; font: 600 14px/22px var(--font-head); }
  .m-deals h2 svg, .m-deals h3 svg, .m-deals .m-deals-h svg { color: var(--orange); fill: var(--orange); }
  .m-deals li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); }
  .m-deals .who { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; }
  .m-deals .who b { display: block; font: 600 14px/20px var(--font); }
  .m-deals .who small { display: block; font: 400 12px/16px var(--font); color: #ff8a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-deals .who > span { min-width: 0; }
  .m-deals .logo-box { width: 36px; height: 36px; border-radius: 8px; font-size: 12px; }
  .m-deals .btn { height: 44px; padding: 0 16px; flex: none; }
  .tabs { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; margin: 16px -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs.left { margin: 20px -16px 0; }
  .tab { padding: 12px 14px; font-size: 13px; }
  .toolbar { gap: 10px; }
  .toolbar-l { flex-wrap: nowrap; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .toolbar-l::-webkit-scrollbar { display: none; }
  .chips { flex-wrap: nowrap; }
  .chip { height: 44px; padding: 0 14px; }
  .toolbar-r { width: 100%; justify-content: space-between; gap: 8px; }
  .how { height: 44px; padding: 0 10px 0 0; font-size: 12px; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0; }
  .f-open .side { width: 100%; border-right: 0; }
  .cmp tbody { grid-template-columns: minmax(0, 1fr); }
  .section { margin-top: 48px; }
  .section > h2 { font-size: 24px; line-height: 32px; }
  .method { grid-template-columns: 1fr; }
  .rubric ul { grid-template-columns: 1fr; }
  .faq summary { font-size: 16px; line-height: 24px; }
  .offer { padding: 12px; }
  .offer-main { flex-direction: column; align-items: stretch; gap: 12px; }
  .offer-big { width: 100%; height: 92px; }
  .offer .vsep { display: none; }
  .offer-act { width: 100%; flex-direction: row; } .offer-act .btn { flex: 1; height: 48px; }
  .code { align-self: flex-start; }
  .b-actions { margin-top: 20px; }
  .b-actions .btn-all { display: none; }
  .b-actions .btn.heart { width: 44px; height: 44px; padding: 0; }
  .b-actions .round, .picker { height: 44px; } .b-actions .round { width: 44px; }
  .b-actions .btn-lg { height: 44px; }
  .picker { padding: 6px 30px 6px 8px; }
  .picker select { position: absolute; inset: 0; width: 100%; opacity: 0; padding: 0; }
  .b-head { margin-top: 20px; gap: 20px; }
  .b-id { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; width: 100%; }
  .b-id > .logo-box { width: 72px; height: 72px; font-size: 20px; grid-row: 1 / span 2; }
  .b-id .inf { display: contents; }
  .b-id h1 { font-size: 24px; line-height: 30px; align-self: end; grid-column: 2; grid-row: 1; }
  .b-id .since { align-self: start; grid-column: 2; grid-row: 2; margin-top: 2px; }
  .b-id .lead { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; font-size: 14px; line-height: 21px; }
  .b-id .pmeta { grid-column: 1 / -1; justify-content: flex-start; margin-top: 8px; }
  .facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; margin-top: 16px; }
  .facts > i { display: none; }
  .facts > div { white-space: normal; }
  .b-tags { grid-column: 1 / -1; }
  .b-score { width: 100%; }
  .b-score .big { width: 92px; } .b-score .big p { font-size: 40px; line-height: 48px; }
  .bars { flex: 1; width: auto; margin-left: 12px; min-width: 0; }
  .bars > div { grid-template-columns: 96px minmax(36px, 1fr) 20px 26px; gap: 6px; }
  .b-body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }                      /* на телефоне оглавление заменяют вкладки */
  .tabs.left { position: sticky; top: var(--top-h); z-index: 30; background: var(--bg); padding-top: 8px; padding-bottom: 8px; }
  .sum, .sec { scroll-margin-top: 64px; }      /* под прилипшим рядом вкладок */
  .sum { padding: 16px; } .sum h2 { font-size: 20px; line-height: 28px; }
  .sec > h2 { font-size: 24px; line-height: 30px; }
  .kv, .pm { grid-template-columns: 1fr; }
  .orow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .orow .nm { white-space: normal; }
  .orow .btn { justify-self: start; height: 44px; padding: 0 20px; }
  .wide-btn { height: 48px; }
  .offer-terms { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rg { flex-direction: column; align-items: flex-start; margin-top: 48px; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .about { grid-column: 1 / -1; }
  .foot li { margin-top: 0; }
  .foot li a { display: flex; align-items: center; min-height: 44px; }
  .legal { flex-direction: column; align-items: flex-start; }
  .legal nav { flex-wrap: wrap; gap: 0 16px; }
  .legal nav a { display: flex; align-items: center; min-height: 44px; }
}

/* ───── v2: якорная навигация по разделам ───── */
/* Высота липкой ленты разделов: от неё отсчитывается следующее липкое (карточка оффера),
   иначе два липких блока прилипают к одному месту и ложатся друг на друга (D13). */
body:has(.secnav) { --secnav-h: 48px; }
/* Где показывается боковое оглавление (широкий экран), горизонтальная лента разделов —
   дубль навигации и лишние 47 px липкого: прячем её. На узких наоборот: лента есть,
   бокового оглавления нет. */
@media (min-width: 761px) { body:has(.toc) .secnav { display: none; } }
.secnav { position: sticky; top: var(--top-h); z-index: 30; margin: 0 0 20px; background: rgba(16, 14, 15, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.secnav-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.secnav-in::-webkit-scrollbar { display: none; }
.secnav a { position: relative; flex: none; display: flex; align-items: center; min-height: 46px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.secnav a:hover { color: #fff; }
/* Черта активного пункта — сразу под текстом (на 8 px выше низа ленты), а не по нижнему краю ленты:
   там лежит полоска прогресса чтения, и две линии сливались в одну (кадр Артёма №22, 10.10). */
.secnav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 1px; background: var(--orange); opacity: 0; }
.secnav a.on { color: #fff; }
.secnav a.on::after { opacity: 1; }

/* ───── v2: редакционные строки ───── */
.edgrp { border-top: 1px solid var(--line); }
.edrow { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.edrow > h3 { margin: 0; font: 600 17px/1.35 var(--font-head); color: #fff; }
.edrow > div > p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.edrow > div > p:last-child { margin-bottom: 0; }
.edrow .edlinks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.edrow .edlinks a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: #ffb48c; }
.edrow .edlinks a:hover { color: #fff; text-decoration: underline; }

/* ───── v2: пронумерованные шаги ───── */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: st; }
.stages li { counter-increment: st; padding: 16px 20px 16px 0; border-top: 2px solid var(--line); }
.stages li + li { padding-left: 20px; }
.stages li b { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-head); color: #fff; }
.stages li b::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-solid); font-size: 12px; }
.stages li p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ───── v2: примечание из посчитанных ячеек ───── */
.dnote { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--muted); }
.dnote .i { flex: none; width: 18px; height: 18px; margin-top: 2px; stroke: url(#rg); }
.dnote b { color: #fff; }

/* ───── v2: раскрывающийся подблок ───── */
.dis { border-bottom: 1px solid var(--line); }
.dis > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 0; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; list-style: none; }
.dis > summary::-webkit-details-marker { display: none; }
.dis > summary i .i { width: 20px; height: 20px; stroke: var(--dim); transition: transform .18s; }
.dis[open] > summary i .i { transform: rotate(45deg); stroke: var(--orange); }
.dis > div { padding: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.dis > div p { margin: 0 0 10px; }
.dis > div p:last-child { margin-bottom: 0; }

/* ───── v2: «что дальше» ───── */
.nextq { margin-top: 24px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.nextq h3 { margin: 0 0 10px; font: 600 16px/1.3 var(--font-head); }
.nextq p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.nextq a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--pill); background: var(--chip); font-size: 14px; font-weight: 500; color: #fff; }
.nextq a:hover { background: #343031; }
.nextq a .i { width: 15px; height: 15px; stroke: var(--orange); }

/* ───── v2: источники и границы ───── */
.srcs .limits { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.srcs .limits li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; color: var(--dim); }
.srcs .limits li::before { content: ''; position: absolute; left: 6px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.srclist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.srclist a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: #fff; }
.srclist a:hover { border-color: var(--orange); }
.srclist .i { flex: none; width: 15px; height: 15px; stroke: var(--dim); margin-left: auto; }

/* ───── v2: точки входа ───── */
.route-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.route { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.route:hover { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.route .rsym { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: var(--r-md); background: var(--chip); }
.route .rsym .i { width: 20px; height: 20px; stroke: url(#rg); }
.route b { font: 600 16px/1.3 var(--font-head); color: #fff; }
.route .rd { font-size: 14px; line-height: 1.55; color: var(--muted); }
.route .rc { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #ffb48c; }
.route .rc .i { width: 15px; height: 15px; stroke: currentColor; }

/* ───── v2: калькулятор отыгрыша ───── */
.calc-box { border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.calc-in { display: grid; grid-template-columns: auto auto 1fr; gap: 14px 22px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.calc-in .ci { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.eurin { position: relative; display: inline-flex; }
.eurin input { width: 128px; height: 48px; padding: 0 30px 0 14px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); color: #fff; font: 600 18px var(--font); }
.eurin input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.eurin i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--dim); font-style: normal; font-weight: 600; }
.calc-quick { display: flex; gap: 6px; }
.calc-quick button { min-height: 44px; padding: 0 14px; border-radius: var(--pill); background: var(--chip); border: 1px solid transparent; color: var(--muted); font: 500 14px var(--font); cursor: pointer; }
.calc-quick button.on { background: var(--grad-solid); color: #fff; }
/* Под числом — сам расчёт, мелкой строкой: «40 × (100 € + 125 €)» (правка Артёма 06.10).
   Рядом с ним — пометка о противоречивых условиях с цитатой из ehdot. */
.calc-tbl .how { display: block; margin-top: 2px; font: 400 11px/16px var(--font); color: var(--dim); white-space: nowrap; }
.calc-formula { margin: 0 0 10px; font: 400 14px/22px var(--font); color: var(--muted); }
.calc-formula b { color: #fff; font-weight: 600; }
.warn-x { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: var(--pill); background: rgba(255, 138, 92, .14); color: var(--orange); font: 600 11px/18px var(--font); }
.warn-x details { display: inline; }
.warn-x summary { display: inline; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.warn-x blockquote { margin: 6px 0 0; padding-left: 8px; border-left: 2px solid var(--line); color: var(--muted); font: 400 11px/17px var(--font); white-space: normal; }
/* На телефоне строка таблицы — flex, и расчёт лез в ту же строку, что число: «4 000 €»
   переносилось пополам. Отдаём расчёту свою строку под числом. */
@media (max-width: 760px) {
  .calc-tbl .how { white-space: normal; }
  .calc-tbl td.cw { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .calc-tbl td.cw b { white-space: nowrap; }
  .calc-tbl td.cw .how, .calc-tbl td.cw .meter, .calc-tbl td.cw .warn-x { flex: 1 0 100%; margin-top: 2px; }
}
.calc-note { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.6; color: var(--dim); }
.calc-note b { color: var(--muted); }
.calc-tbl { width: 100%; border-collapse: collapse; }
.calc-tbl th[scope=col] { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); }
.calc-tbl tbody tr { border-bottom: 1px solid var(--cell-line); }
.calc-tbl tbody tr.off { opacity: .42; }
.calc-tbl td, .calc-tbl tbody th { padding: 12px 14px; font-size: 14px; vertical-align: middle; }
.calc-tbl tbody th a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: #fff; }
.calc-tbl tbody th a:hover { color: #ffb48c; }
.calc-tbl .ct { display: block; font-weight: 600; }
.calc-tbl small { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }
.calc-tbl .cb b { font-size: 16px; font-weight: 700; }
.calc-tbl .cw b { font-size: 16px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-tbl .cw .meter { margin-top: 6px; }
.calc-tbl .meter { height: 4px; border-radius: 2px; background: var(--bar); overflow: hidden; }
.calc-tbl .meter i { display: block; height: 100%; width: var(--p); background: var(--grad); }

@media (max-width: 1100px) {
  .route-grid { grid-template-columns: repeat(2, 1fr); }
  .srclist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .edrow { grid-template-columns: 1fr; gap: 10px; }
  .stages { grid-template-columns: 1fr; }
  .stages li, .stages li + li { padding: 14px 0 14px 0; }
  .calc-in { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .route-grid { grid-template-columns: 1fr; }
  .srclist { grid-template-columns: 1fr; }
  .calc-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .calc-tbl, .calc-tbl tbody, .calc-tbl tr, .calc-tbl td, .calc-tbl tbody th { display: block; width: auto; }
  .calc-tbl tbody tr { padding: 10px 0; }
  .calc-tbl td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 14px; }
  .calc-tbl td::before { content: attr(data-th); font-size: 13px; color: var(--dim); }
  .calc-tbl .cw .meter { width: 100px; margin: 0; }
}

/* ───── v2: платёжный хаб — каталог способов ───── */
.pm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.pm-search { max-width: 280px; }
.pm-search input { width: 100%; }
.scoped { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 18px 0 0; padding: 8px 14px; border-radius: var(--pill); background: var(--card-2); border: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); }
.scoped .sc-l { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.scoped .i { width: 16px; height: 16px; stroke: url(#rg); }
.scoped b { color: #fff; }
.scoped .sc-h { color: var(--dim); }
/* 6: каталог способов — плотная сетка карточек вместо четырёх чисел на 1400 px (Артём 02.10).
   Мини-полоска показывает, у скольких казино способ годится на вывод. */
.pm-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pm-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "id go" "wd wd" "f1 f2"; align-items: start; gap: 10px 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); }
.pm-row:hover { border-color: transparent; background: linear-gradient(var(--card-2), var(--card-2)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.pm-id { grid-area: id; min-width: 0; }
.pm-id b { display: block; font: 600 16px/1.25 var(--font-head); color: #fff; }
.pm-kind { font-size: 12px; color: var(--dim); }
.pm-wd { grid-area: wd; display: flex; flex-direction: column; gap: 5px; }
.pm-wd-t { font-size: 12px; color: var(--muted); }
.pm-wd-t b { color: #fff; font-weight: 700; }
.pm-wd-t b.warn { color: var(--amber); }
.pm-wd .meter { height: 4px; border-radius: 2px; background: var(--bar); overflow: hidden; }
.pm-wd .meter i { display: block; height: 100%; width: var(--p); background: var(--grad); }
.pm-wd .meter.none i { background: var(--amber); }
.pm-f { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.pm-f:nth-of-type(1) { grid-area: f1; }
.pm-f:nth-of-type(2) { grid-area: f2; justify-content: flex-end; }
.pm-f small { font-size: 12px; color: var(--dim); }
.pm-f b { font-size: 14px; font-weight: 700; color: #fff; }
.pm-go { grid-area: go; justify-self: end; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chip); }   /* к правому краю карточки (D31) */
.pm-go .i { width: 15px; height: 15px; stroke: #fff; }

/* ───── v2: матрица казино × способ ───── */
.mx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.mx-key { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--dim); }
.mx-key .st { margin: 0 2px; }
/* Матрица: шапка отдельной строкой над прокручиваемой областью, липнет к низу липкого стека
   и листается вместе с телом (D49). Настоящая шапка внутри таблицы остаётся для доступности
   и для случая без скриптов. */
.mx-box { position: relative; }
.mx-head { position: sticky; top: var(--stick, var(--top-h)); z-index: 24; overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid var(--line); border-bottom: 0; background: var(--card-2); }
.mx-head table { border-collapse: separate; border-spacing: 0; }
.mx-head thead th { background: var(--card-2); }
.mx-thead-off { visibility: hidden; }
.mx-head + .mx-wrap { border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 0; }
.mx-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
/* Тень у края показывает, что ленту или таблицу можно листать вбок, и исчезает в конце
   (D25, часть D49). Приём на фонах с background-attachment: local. */
.mx-wrap, .dt-wrap, .t-wrap, .menu, .tabs, .secnav-in, .toolbar-l {
  background-image: linear-gradient(to right, var(--bg) 30%, transparent),
    linear-gradient(to left, var(--bg) 30%, transparent),
    linear-gradient(to right, rgba(0, 0, 0, .5), transparent 14px),
    linear-gradient(to left, rgba(0, 0, 0, .5), transparent 14px);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.mx-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.mx { border-collapse: separate; border-spacing: 0; }
.mx th[scope=col] { position: sticky; top: 0; z-index: 2; min-width: 60px; padding: 10px 8px; background: var(--card-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; text-align: center; }
.mx th[scope=col] a { color: var(--muted); }
.mx th[scope=col] a:hover { color: #fff; }
.mx th[scope=col]:first-child { left: 0; z-index: 3; min-width: 176px; text-align: left; }
.mx th[scope=row] { position: sticky; left: 0; z-index: 1; min-width: 176px; padding: 8px 12px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--cell-line); }
.mx th[scope=row] a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; color: #fff; }
.mx th[scope=row] a:hover { color: #ffb48c; }
.mx td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--cell-line); }
.mx td.nil { color: var(--dim); }
.mxc { display: inline-flex; flex-direction: column; gap: 3px; align-items: center; }
.mxc i { display: block; line-height: 0; }
.mx.only-dep .mxc .w, .mx.only-wd .mxc .d { display: none; }

/* ───── v2: строки брендов на странице способа ───── */
.mrows { display: grid; gap: 10px; }
.mrow { display: grid; grid-template-columns: minmax(200px, 1.2fr) repeat(3, minmax(130px, 1fr)) auto; gap: 16px; align-items: start; padding: 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.mrow-id { display: flex; gap: 12px; align-items: flex-start; }
.mrow-id .nm { display: inline-flex; align-items: center; min-height: 28px; font: 600 17px/1.25 var(--font-head); color: #fff; }
.mrow-id .nm:hover { color: #ffb48c; }
.mrow-id { min-width: 0; }
.mrow-id > div { min-width: 0; }
/* Длинная подпись («Ahvenanmaa (maakuntahallitus) · Tili lomakkeella») наезжала
   на соседнюю колонку — обрезаем многоточием, полный текст в title (правка A6). */
.mrow-id .cap { margin: 2px 0 6px; font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .mrow-id .cap { white-space: normal; } }
.mrow-c .k { margin: 0 0 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.mrow-c .v { margin: 0; font: 700 20px/1.1 var(--font-head); color: #fff; }
.mrow-c .v.no { color: var(--red); font-size: 17px; }
.mrow-c .v small { display: block; margin-top: 3px; font: 400 12px var(--font); color: var(--dim); }
.mrow-c .x { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.mrow-c .x.alt { color: #ffb48c; }
.mrow-a { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 132px; }
.mrow-a .more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; font-weight: 500; color: var(--muted); }
.mrow-a .more:hover { color: #fff; text-decoration: underline; }

.disgrp { border-top: 1px solid var(--line); }
.mt { margin: 18px 0 0; }

@media (max-width: 1180px) {
  .pm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrow { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(120px, 1fr)) auto; }
  .mrow .mrow-c:nth-of-type(3) { grid-column: 2 / -1; }
}
/* 760–1180: карточки «казино рядом» идут в две колонки, иначе на планшете одна колонка
   на всю ширину и 70 % пустоты справа (D42). */
@media (min-width: 761px) and (max-width: 1180px) {
  .mrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 860px) {
  .mrow { grid-template-columns: 1fr 1fr; }
  .mrow-id { grid-column: 1 / -1; }
  .mrow .mrow-c:nth-of-type(3) { grid-column: 1 / -1; }
  .mrow-a { grid-column: 1 / -1; flex-direction: row; }
  .mrow-a .btn { flex: 1; }
}
@media (max-width: 760px) {
  .pm-list { grid-template-columns: 1fr; }
  .pm-search { max-width: 100%; }
  .mx-key { margin-left: 0; width: 100%; }
  .mrow { grid-template-columns: 1fr; }
}

/* полоска прогресса чтения под якорной навигацией */
.secnav { position: sticky; }
.secnav-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--grad); transition: width .1s linear; }

/* ───── v2: карточка оффера ───── */
.orows { align-items: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* Свёрнутые карточки в ряду — одной высоты, раскрытая растёт одна (R8). Высоту держит
   список фактов: у карточек от двух до пяти строк, отсюда были 224/262/300/338. */
/* Свёрнутая карточка растягивается содержимым (список условий занимает остаток), поэтому
   в ряду все одной высоты. Раскрытая уходит в свой ряд и растёт одна — так она не тянет
   за собой соседей (R8 и D54 вместе). */
.orow .o-mat { align-content: start; flex: 1; }
/* Раскрытая карточка «Kaikki ehdot» занимает весь ряд: иначе она тянула соседей по высоте,
   а при align-items: stretch растягивала весь ряд на свою высоту (R8 + D54 одним решением).
   Раскрытие — не details, а кнопка data-toggle, которая снимает hidden с .o-full. */
.orow:has(.o-full:not([hidden])) { grid-column: 1 / -1; }
.orow:has(.o-full:not([hidden])) .o-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.orow:has(.o-full:not([hidden])) .o-full .miss { grid-column: 1 / -1; }
.orow { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.orow:target { border-color: var(--orange); }
.o-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.o-head .rate-s { flex: none; }                 /* оценка бренда в строке тарjouksen (спецификация 03.10) */
.o-head .o-b { min-width: 0; }
.o-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: #fff; }
.o-b:hover { color: #ffb48c; }
.o-b .logo-box { width: 30px; height: 30px; font-size: 11px; }
.o-kind { flex: none; padding: 4px 9px; border-radius: var(--pill); background: var(--chip); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.o-kind.prog { background: var(--bar); color: #cbb4ff; }
.o-val { margin: 0; font: 700 13px/1.2 var(--font); color: var(--muted); }
.o-val b { font: 700 30px/1 var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.o-val b.none { background: none; color: var(--dim); -webkit-text-fill-color: var(--dim); }
.o-val span { font-weight: 500; }
.o-mat { display: grid; gap: 1px; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cell-line); }
.o-mat li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cell-line); font-size: 13px; }
.o-mat li span { color: var(--dim); }
.o-mat li b { font-weight: 700; color: #fff; }
.o-mat li b.ok { color: var(--green); }
.o-mat li b.none { color: var(--dim); font-weight: 500; }
.o-mat li em { font-style: normal; font-size: 11px; color: var(--dim); }
.o-act { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.o-act .btn { flex: 1; }
.o-full { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.o-full > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.o-full dt { color: var(--dim); }
.o-full dd { margin: 0; text-align: right; font-weight: 600; }
.o-full .miss dd { font-weight: 400; color: var(--dim); }
@media (max-width: 1180px) { .orows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .orows { grid-template-columns: 1fr; } }

/* ───── v2: обзор бренда ───── */
.src-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--dim); }
.src-note .i { flex: none; width: 15px; height: 15px; margin-top: 3px; stroke: var(--dim); }
.pm .plus li a, .pm .minus li a { color: inherit; }
.pm .plus li a:hover, .pm .minus li a:hover { text-decoration: underline; }
.ogroups { display: grid; gap: 14px; }
.ogrp > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 15px/1.3 var(--font-head); }
.ogrp > h3 .n { padding: 2px 8px; border-radius: var(--pill); background: var(--chip); font-size: 12px; color: var(--muted); }
.orow2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); }
.orow2 + .orow2 { margin-top: 6px; }
.orow2 .nm { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #fff; }
.orow2 .cnd { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; color: var(--dim); }
.orow2 .cnd b { color: var(--muted); }
.more-n { margin: 8px 0 0; font-size: 13px; color: var(--dim); }
/* задача 6, круг 1 (№ 49–50): группа офферов ставок в блоке offers — те же .ogrp / .orow2, раскрытие .dis, таблица .dt */
.sp-grp { margin-top: 14px; }
.sp-grp .dis { margin-top: 6px; border-bottom: 0; }
.sp-grp .dis > div { padding-bottom: 0; }
.sp-grp .dis .olist { margin-top: 0; }
.sp-grp .dt { margin-top: 14px; }
.rgv { display: flex; flex-wrap: wrap; gap: 6px; }
.rgv .pc .i { width: 14px; height: 14px; }
.rg-help { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.rg-help a { color: #ffb48c; }
.sims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sim { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); }
.sim .who { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sim .who b { display: block; font: 600 15px/1.2 var(--font-head); color: #fff; }
.sim p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.sim-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }   /* на 360 две кнопки («<Бренд> – arvostelu» + «Kasinolle») не влезают в ряд и вылезали за карточку на 22 px — вторая переносится вниз */
.sim-a .btn { flex: 1; }

/* лента платёжек: выбор одного способа вместо чтения таблицы из 19 строк */
.rail { border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); overflow: hidden; }
.rail-one { margin: 0; padding: 12px 14px 0; font-weight: 600; font-size: 15px; }
.rail-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rail-pick { position: relative; display: none; }
.rail-pick select { width: 100%; min-height: 48px; padding: 0 38px 0 14px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); color: #fff; font: 600 15px var(--font); appearance: none; }
.rail-pick .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--dim); pointer-events: none; }
.rail-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rail-chips::-webkit-scrollbar { display: none; }
.rchip { flex: none; min-height: 44px; padding: 0 14px; border-radius: var(--pill); background: var(--chip); border: 1px solid transparent; color: var(--muted); font: 500 14px var(--font); cursor: pointer; }
.rchip.on { background: var(--grad-solid); color: #fff; }
.rail-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; }
.rail-g .k { margin: 0 0 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.rail-g .v { margin: 0; font: 700 22px/1.1 var(--font-head); color: #fff; }
.rail-g .v.no { color: var(--red); font-size: 18px; }
.rail-g .v small { display: block; margin-top: 3px; font: 400 12px var(--font); color: var(--dim); }
.rail-g .x { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.rail-g .x a { display: inline-flex; align-items: center; gap: 5px; color: #ffb48c; }
.rail-g .x a .i { width: 14px; height: 14px; stroke: currentColor; }
@media (max-width: 1100px) { .sims { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .rail-g { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 760px) {
  .rail-chips { display: none; }
  .rail-pick { display: block; flex: 1; }
  .orow2 { flex-direction: column; align-items: stretch; }
  .orow2 .btn { width: 100%; }
}
.b-crumbs { margin: 0 0 12px; }

/* ───── v2: правки по замерам ─────
   Абсолютно позиционированные потомки (подписи для скринридера) не обрезаются контейнером с прокруткой,
   если у контейнера нет position: relative. Из-за этого страница получала боковую прокрутку. */
.mx-wrap, .dt-wrap, .tbl-wrap, .rail, .rail-chips, .secnav-in, .calc-box, .board { position: relative; }
/* ряд чипов над списком переносится — горизонтальная лента есть только в панели инструментов таблицы */
.pm-tools .chips { flex-wrap: wrap; }
/* длинное неразрывное значение не раздвигает колонку */
.kv > div, .kv .v, .rail-g > div { min-width: 0; }
.pc, .kv .v, .o-mat li b, .mrow-c .x { overflow-wrap: break-word; }
/* цели для пальца: шапка, меню, поиск и мелкие кнопки — не меньше 44 px */
.top .logo, .top .fav, .top .btn-sm, .menu a, .m-switch a, .m-switch span { min-height: 44px; display: inline-flex; align-items: center; }
.search input, .pm-search input, .rail-pick select, .m-sort select { min-height: 44px; }
.skip { height: 44px; }
.o-kind, .pc, .pillt, .tagc, .counter, .fresh, .legend, .sub, .note { } /* подписи, не цели */
@media (max-width: 760px) {
  .pm-tools .chips { flex-wrap: wrap; }
}
/* длинная плашка не раздвигает колонку: переносим внутри и ограничиваем шириной родителя */
.kv .v, .rgv { flex-wrap: wrap; min-width: 0; }
.pc { max-width: 100%; }

/* ───── сенсорные ширины: все самостоятельные цели не меньше 44 px ───── */
@media (max-width: 900px) {
  .btn, .btn-sm, .chip, .chip.lg, .round, .picker, .rchip, .calc-quick button, .fopt, .heart { min-height: 44px; }
  .round { min-width: 44px; }
  .picker select, .picker > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }
  .logo { min-width: 44px; padding-right: 4px; }
  .o-act .btn, .sim-a .btn, .mrow-a .btn, .offer-act .btn { min-height: 44px; }
  .edlinks a, .nextq a, .srclist a, .toc a, .secnav a { min-height: 44px; }
}
/* плашка переносит длинный текст вместо того, чтобы раздвигать сетку */
.pc { white-space: normal; }
.kv .v > .pc { max-width: 100%; }
/* ───── правки по снимкам (Артём, 02.10 вечер) ─────
   1. «Rajaus» на телефоне: три куска текста вставали колонками внутри пилюли.
   Делаем нормальный блок столбиком — подпись, значение, пояснение мелким. */
@media (max-width: 760px) {
  .scoped { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border-radius: var(--r-md); padding: 10px 14px; }
  .scoped .sc-l { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
  .scoped b { font-size: 15px; line-height: 1.3; }
  .scoped .sc-h { font-size: 12px; line-height: 1.5; }
}
/* 2. Чип «+ N» в ряду платёжек — подпись, а не кнопка: правило 44 px его не касается.
   Виновник был общий селектор `.more` (он же у текстовых ссылок «Arvostelu»/«Maksutavat»). */
.tagc, .tagc.more { min-height: 0; height: 22px; }
/* 3. Хлебные крошки — одна строка: 44 px ломали выравнивание со слэшами. */
.crumbs { align-items: center; flex-wrap: wrap; }
.crumbs a { min-height: 0; display: inline; }

/* оставшиеся самостоятельные ссылки — до 44 px на сенсорных ширинах */
@media (max-width: 900px) {
  .c-brand .nm a, .legal nav a, .foot ul a, .rg a, .foot .logo, .c-act .more, .mrow-a .more, .all, .how { min-height: 44px; display: inline-flex; align-items: center; }
  .wide-btn { min-height: 44px; height: auto; padding: 10px 16px; }   /* остаётся flex: иначе текст ложится на обводку (D24) */
  .picker { padding-top: 0; padding-bottom: 0; }
}
/* на настольных ширинах самостоятельная ссылка не ниже 24 px (WCAG 2.5.8) */
.legal nav a, .foot ul a, .rg a, .c-brand .nm a, .mrow-id .nm, .toc a, .dt th[scope="row"] a, .dt td a { min-height: 24px; display: inline-flex; align-items: center; }
/* Чип-ссылка («Vaihtoehdot Zimplerille», список казино) — тоже цель. */
a.tagc { min-height: 24px; }
@media (max-width: 900px) { a.tagc { min-height: 44px; padding: 0 12px; } }
/* Имя казино в карточке оффера — ссылка, значит цель: 24 px на столе, 44 на телефоне. */
.who a, .sim .who, .deal-l { min-height: 24px; display: inline-flex; align-items: center; }
@media (max-width: 900px) { .who a { min-height: 44px; } }
/* Крошки остаются строчными (иначе разъезжаются со слэшами), но нажимаемая
   область доводится отступом до 24 px по высоте — правило WCAG 2.5.8. */
.crumbs a { padding: 4px 0; }
@media (max-width: 900px) { .mrow-id .nm { min-height: 44px; } }
/* порядок важен: сенсорное правило идёт после настольного */
.c-act .more, .mrow-a .more, .rail-g .x a, .sim p a, .edlinks a, .pm-f a, .nextq a, .srclist a { min-height: 24px; display: inline-flex; align-items: center; }
.picker select { min-height: 40px; }
@media (max-width: 900px) {
  .legal nav a, .foot ul a, .rg a, .c-brand .nm a, .mrow-id .nm, .toc a,
  .c-act .more, .mrow-a .more, .rail-g .x a, .sim p a, .edlinks a, .nextq a, .srclist a, .picker select, .dt th[scope="row"] a, .dt td a { min-height: 44px; }
}
.mx th[scope=col] a { min-height: 24px; }
@media (max-width: 900px) { .mx th[scope=col] a { min-height: 44px; } }
.mx th[scope=col] a { display: inline-flex; align-items: center; justify-content: center; }
/* карточка «нет приветственного бонуса»: длинная подпись не раздвигает блок */
.offer-main, .offer-mid, .offer .who, .offer .who > div { min-width: 0; }
.offer .who .cap { overflow-wrap: break-word; }
.offer .who .cap { white-space: normal; }
/* 4–5: карточка оффера без известных условий и пометка «× N» (Артём 02.10) */
.o-bare { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--cell-line); font-size: 13px; color: var(--dim); }
.orow2 .nm .xn { font-style: normal; font-size: 12px; font-weight: 600; color: var(--dim); }
/* 7: счётчики на телефоне переносятся, а не уезжают обрезанной лентой без подсказки
   (просмотр лент 390, Артём 02.10). На планшете лента остаётся — там влезает. */
@media (max-width: 760px) {
  .counters { flex-wrap: wrap; justify-content: flex-start; overflow-x: visible; margin: 16px 0 0; padding: 0; gap: 8px; }
  .counters .counter { flex: 1 1 calc(50% - 4px); min-width: 0; }
}
/* 7: подпись под оценкой на телефоне вылезала за левый край (135 px в колонке 92 px) */
.b-score .big .cap { max-width: 100%; white-space: normal; text-align: center; }

/* ───── оценка 0–10: разбивка по критериям (Артём 02.10: «критерии обязан указывать») ───── */
.rate small, .rate-s small, .b-score .big small { font-size: .5em; font-weight: 600; color: var(--dim); }
.bars-all { margin: 10px 0 0; }
.bars-all a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #ffb48c; }
.bars-all a .i { width: 14px; height: 14px; stroke: currentColor; }
.crit { display: grid; gap: 2px; margin-top: 16px; border-top: 1px solid var(--line); }
.crit-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 200px); gap: 4px 18px; padding: 12px 0; border-bottom: 1px solid var(--cell-line); }
.crit-row.off { opacity: .62; }
.crit-h { display: flex; align-items: baseline; gap: 10px; }
.crit-h b { font: 600 15px/1.3 var(--font-head); color: #fff; }
.crit-w { font-size: 12px; color: var(--dim); white-space: nowrap; }
.crit-b { display: flex; align-items: center; gap: 10px; }
.crit-s { font: 700 18px/1 var(--font-head); color: #fff; }
.crit-s small { font-size: 11px; font-weight: 600; color: var(--dim); }
.crit-b .meter { flex: 1; height: 6px; border-radius: 3px; background: var(--bar); overflow: hidden; }
.crit-b .meter i { display: block; height: 100%; width: var(--p); background: var(--grad); }
.crit-y { grid-column: 1 / 2; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.crit-tbl th[scope=row] { font-weight: 600; color: #fff; }
.crit-tbl tr.crit-sum { background: var(--card-2); }
.crit-tbl tr.crit-sum th, .crit-tbl tr.crit-sum td { border-top: 2px solid var(--line); }
@media (max-width: 760px) {
  .crit-row { grid-template-columns: 1fr; }
  .crit-y { grid-column: 1; }
}
/* Таблицы методики — текстовые: правило и поля переносятся, а не уезжают за край. */
.crit-tbl td, .crit-tbl tbody th { white-space: normal; text-align: left; vertical-align: top; }
.crit-tbl thead th { text-align: left; }
.crit-tbl td:nth-child(3), .crit-tbl td:nth-child(4) { white-space: normal; }
.crit-tbl td:nth-child(2) { white-space: nowrap; min-width: 56px; }
.crit-tbl td:nth-child(2) b { white-space: nowrap; }
.crit-tbl th[scope=row] { min-width: 150px; }
/* Тонкая или пустая подборка: объясняем честно, чужими брендами не добиваем. */
.empty-block { margin-top: 20px; padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px dashed var(--line); }
.empty-block h2 { margin: 0 0 10px; font: 600 20px/1.3 var(--font-head); }
.empty-block p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.empty-block .mt { margin-top: 12px; }
.empty-block a { color: #ffb48c; }
/* Гайд по лицензиям: карточки по юрисдикциям. */
.lic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.lic-card { padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.lic-card.off { border-style: dashed; }
.lic-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 17px/1.3 var(--font-head); }
.lic-card h3 .flag { width: 20px; height: 14px; }
.lic-card h3 .i { width: 18px; height: 18px; stroke: var(--dim); }
.lic-card h3 .pillt { margin-left: auto; }
.lic-n { margin: 0 0 8px; font-size: 13px; color: var(--dim); }
.lic-b { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.lic-b a { color: #fff; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.lic-b a:hover { color: #ffb48c; }
.lic-t { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.grp-h { margin: 22px 0 2px; font: 600 17px/1.3 var(--font-head); }
.sub.left { text-align: left; margin-bottom: 12px; }
@media (max-width: 1100px) { .lic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lic-grid { grid-template-columns: 1fr; } }

/* Счётчик на телефоне переносится внутри себя — иначе длинная подпись не даёт
   колонке сжаться и страница уезжает вбок (замер 02.10). */
@media (max-width: 760px) {
  /* Телефон: сетка 2 × 2, число сверху, подпись снизу — так плашка читается
     с одного взгляда и подпись не ломается посреди слова. */
  .counters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .counters .counter { width: auto; }
  .counter { display: grid; grid-template-columns: 18px 1fr; grid-template-areas: 'ic num' 'lb lb';
    align-items: center; gap: 2px 8px; height: auto; min-height: 56px; padding: 8px 12px; border-radius: 14px;
    white-space: normal; text-align: left; }
  .counter svg { grid-area: ic; flex: none; width: 18px; height: 18px; }
  .counter b { grid-area: num; font: 700 17px/20px var(--font-head); color: #fff; }
  .counter .c-lb { grid-area: lb; white-space: normal; font-size: 12px; line-height: 16px; color: var(--muted); overflow-wrap: break-word; }
}
/* Цели после правок: крошки добираем отступом (строка не ломается), остальное — высотой. */
.crumbs a { padding: 3px 0; }
.lic-b a { min-height: 24px; display: inline-flex; align-items: center; }
@media (max-width: 900px) {
  .crumbs a { padding: 13px 0; }
  .lic-b a { min-height: 44px; }
}
/* Телефон: длинная крошка («Verovapaat kasinot 2026 – lisenssi ratkaisee…»)
   занимала три строки над тем же заголовком. Теперь путь — одна строка с
   прокруткой, последний пункт (эта же страница) не показываем: он дублирует H1. */
@media (max-width: 560px) {
  .crumbs { flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 32px); margin-left: -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .crumbs::-webkit-scrollbar { display: none; }
  .crumbs > * { white-space: nowrap; }
  .crumbs > span:last-child { display: none; }
  .crumbs > span:nth-last-child(2) { display: none; }
}
/* Длинное имя бренда на телефоне обрезалось сердечком: даём колонке сжиматься. */
.c-brand, .c-brand .meta, .c-brand .nm { min-width: 0; }
/* Имя и сердечко — всегда в одной строке: при переносе сердечко уезжало под имя и шапки
   карточек получались разной высоты (D58). Переносится только плашка «лучший по признаку». */
.c-brand .nm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 2px; }
.c-brand .nm > a { grid-column: 1; grid-row: 1; }
.c-brand .nm > .heart { grid-column: 2; grid-row: 1; }
.c-brand .nm > .best { grid-column: 1 / -1; grid-row: 2; }
/* Строки задаём явно: в разметке плашка «лучший» стоит МЕЖДУ именем и сердечком, и при
   автоматической раскладке сердечко уезжало во второй ряд — у 212 карточек из 242 (D58). */
/* Имя переносится на вторую строку, а не режется многоточием: на 360 в одну строку влезало
   «Mahti Kas» (D22). Сердечко при этом остаётся справа в той же строке (D58). */
.c-brand .nm a { overflow-wrap: break-word; white-space: normal; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Метка «лучшее для…» переносила сердечко на отдельную строку и имя уезжало
   в середину: метку уводим на свою строку, имя и сердечко держим вместе. */
.c-brand .nm > a { order: 1; }
.c-brand .nm > .heart { order: 2; }
.c-brand .nm > .best { order: 3; flex-basis: 100%; margin: 2px 0 0; }
/* Любой контейнер с прокруткой обязан быть position: relative — иначе
   абсолютно позиционированные потомки (подписи для скринридера) из него
   вылезают и дают боковую прокрутку страницы. Та же грабля, что ловилась
   замером 02.10 на платёжном хабе; здесь закрываем её разом для всех. */
.menu, .counters, .tabs, .toolbar-l, .tbl-wrap, .dt-wrap, .mx-wrap, .secnav-in, .rail-chips { position: relative; }
/* Счётчик строк стал длиннее (после схлопывания дублей он поясняет себя) — переносим. */
.count { white-space: normal; }

/* ───── помощник выбора «Anna kun autan» ───── */
/* Под плавающей кнопкой помощника всегда остаётся свободное место: иначе последние строки
   и ссылки подвала лежат под ней и до них не дотянуться (замер 05.10). */
body { padding-bottom: 84px; }
.apu-fab { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--pill); background: var(--grad-solid); color: #fff; font: 600 15px var(--font); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); cursor: pointer; }
.apu-fab:hover { filter: brightness(1.1); }
.apu-fab .i { width: 18px; height: 18px; stroke: #fff; }
.apu-hero { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: var(--pill); background: var(--grad-solid); color: #fff; font: 600 16px var(--font); border: 0; cursor: pointer; }
.apu-hero .i { width: 18px; height: 18px; stroke: #fff; }
.apu { width: min(620px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--text); }
.apu::backdrop { background: rgba(0, 0, 0, .66); }
.apu-x { position: absolute; top: 12px; right: 12px; }
.apu-in { padding: 26px 26px 24px; }
.apu-step { margin: 0 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.apu-step b { color: #ffb48c; }
.apu h2, .apu .apu-h { margin: 0 0 6px; font: 600 23px/1.25 var(--font-head); }
.apu-hint { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.apu-opts { display: grid; gap: 8px; }
.apu-o { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); color: #fff; font: 500 15px var(--font); text-align: left; cursor: pointer; }
.apu-o:hover:not([disabled]) { border-color: transparent; background: linear-gradient(var(--card-2), var(--card-2)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.apu-o[disabled] { opacity: .4; cursor: not-allowed; }
.apu-o i { font-style: normal; font-size: 12px; color: var(--dim); white-space: nowrap; }
.apu-nav { display: flex; gap: 8px; margin-top: 14px; }
.apu-res { display: grid; gap: 10px; }
.apu-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); }
.apu-card.first { border-color: transparent; background: linear-gradient(var(--card-2), var(--card-2)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.apu-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.apu-n { min-height: 24px; display: inline-flex; align-items: center; font: 600 17px/1.2 var(--font-head); color: #fff; }
.apu-n:hover { color: #ffb48c; }
.apu-sc { font: 700 16px/1 var(--font-head); color: #fff; }
.apu-sc small { font-size: 10px; color: var(--dim); }
.apu-sc.new { font-size: 12px; font-weight: 600; color: var(--dim); }
.apu-why { margin: 0; font-size: 13px; line-height: 1.5; color: #ffb48c; }
.apu-a { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.apu-a .more { min-height: 24px; display: inline-flex; align-items: center; font-size: 13px; color: var(--muted); }
.apu-all { margin: 6px 0 0; font-size: 14px; }
.apu-all a { color: #ffb48c; text-decoration: underline; text-underline-offset: 3px; }
.apu-empty { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
/* До 1024 всплывашку не показываем: на планшете она ложилась на правый столбец плиток
   «Vertailun parhaat» и закрывала логотипы и кнопки двух казино (D3). */
@media (max-width: 1023px) { .apu-nudge { display: none !important; } }
.apu-nudge { position: fixed; right: 12px; left: auto; bottom: 72px; z-index: 54; width: min(320px, calc(100vw - 24px)); max-width: calc(100vw - 24px); box-sizing: border-box; padding: 16px 18px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.apu-nudge p { margin: 0 0 6px; font-size: 15px; }
.apu-nudge .apu-nudge-t { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
.apu-nudge-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.apu-nudge-x .i { width: 16px; height: 16px; stroke: var(--dim); }
@media (max-width: 760px) {
  .apu-fab { right: 12px; bottom: 12px; min-height: 48px; padding: 0 16px; font-size: 14px; }
  .apu-nudge { right: 12px; left: 12px; width: auto; bottom: 72px; }
  .apu-in { padding: 22px 18px 20px; }
  .apu h2, .apu .apu-h { font-size: 20px; }
}
.hero-apu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 14px 0 0; }
.hero-apu span { max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--dim); text-align: left; }
/* Одно поле депозита на весь сайт: колонка бонуса показывает евро. */
.dep-in { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; max-width: 100%; min-width: 0; padding: 0 10px; border-radius: var(--pill); background: var(--card-2); border: 1px solid var(--line); }
.dep-in .i { width: 16px; height: 16px; stroke: url(#rg); }
.dep-in input { width: 92px; max-width: 100%; min-width: 0; height: 100%; background: none; border: 0; color: #fff; font: 600 13px var(--font); outline: 0; }
.dep-in input::placeholder { color: var(--dim); font-weight: 400; }
.dep-in:focus-within { border-color: var(--orange); }
.c-bonus .cap.eur { display: block; margin-top: 3px; color: #ffb48c; font-weight: 600; }
@media (max-width: 760px) { .dep-in { height: 44px; } }

/* ───── денежные калькуляторы и срок жизни бонуса ───── */
.mcalc { margin-top: 18px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); }
.mcalc-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.mcalc-h .ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--chip); }
.mcalc-h .ic .i { width: 18px; height: 18px; stroke: url(#rg); }
.mcalc-h b { display: block; font: 600 16px/1.3 var(--font-head); color: #fff; }
.mcalc-h p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.mcalc-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.mcalc-in .ci { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.mcalc-out { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--muted); }
.mcalc-out b { color: #fff; }
.mcalc-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--dim); }
.mcalc-note a { color: #ffb48c; }
.life { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); }
.life-h { margin: 0 0 12px; font: 600 15px/1.3 var(--font-head); color: #fff; }
.life-l { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: lf; }
.life-l li { position: relative; padding: 14px 14px 0 0; border-top: 2px solid var(--line); }
.life-l li::before { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); }
.life-l li.unk::before { background: var(--line); }
.life-l li b { display: block; font: 600 13px/1.3 var(--font-head); color: #fff; }
.life-l li span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.life-n { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--dim); }
@media (max-width: 760px) {
  .life-l { grid-template-columns: 1fr; }
  .life-l li { padding: 12px 0 0; }
  .mcalc-in { flex-direction: column; align-items: stretch; }
}

/* ───── сравнение до четырёх ───── */
.c-act2 { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
/* Ссылка «<Бренд> arvostelu» переносится по словам, но не внутри слова («Arvoste/lu», R6).
   Раньше стоял nowrap: на 390 ссылка «Pelikaani Kasino arvostelu» (148 px) вылезала из ячейки
   97 px и растягивала всю страницу на 37 px вбок — её можно было «дёргать» (слово Артёма 10.10, №20). */
.c-act2 .more { white-space: normal; overflow-wrap: normal; word-break: keep-all; hyphens: manual; text-align: center; max-width: 100%; }
.cmp-add { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--chip); border: 1px solid transparent; cursor: pointer; }
.cmp-add .i { width: 16px; height: 16px; stroke: var(--muted); }
.cmp-add.on { background: var(--grad-solid); } .cmp-add.on .i { stroke: #fff; }
.cmp-add.wide { display: inline-flex; gap: 8px; width: auto; height: 40px; padding: 0 16px; border-radius: var(--pill); border: 1px solid var(--line); background: transparent; color: var(--text); font: 500 14px var(--font); }
.cmp-add.wide.on { background: var(--grad-solid); border-color: transparent; color: #fff; }
.cmp-add.shake { animation: cmpShake .35s; }
@keyframes cmpShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.cmp-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; background: rgba(21, 19, 20, .97); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
.cmp-tray-in { display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.cmp-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cmp-count b { color: #fff; font-size: 15px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.cmp-chip { min-height: 32px; padding: 0 10px; border-radius: var(--pill); background: var(--chip); border: 1px solid transparent; color: #fff; font: 500 13px var(--font); cursor: pointer; }
.cmp-chip i { font-style: normal; color: var(--dim); margin-left: 4px; }
.cmp-chip:hover i { color: var(--red); }
.cmp-act { display: flex; gap: 8px; flex: none; }
.cmp-page { margin-top: 10px; }
.cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cmp-only { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--muted); cursor: pointer; }
.cmp-only input { width: 18px; height: 18px; accent-color: #cc4410; }
.cmp-tbl th[scope=row] { text-align: left; white-space: normal; color: var(--muted); font-weight: 500; min-width: 180px; }
.cmp-tbl td { white-space: normal; }
.cmp-tbl thead th { vertical-align: top; }
.cmp-tbl thead th a:first-child { display: block; margin-bottom: 8px; font: 600 15px/1.2 var(--font-head); color: #fff; }
.cmp-tbl tr.diff td { color: #fff; font-weight: 600; }
.cmp-tbl tr.same td { color: var(--dim); }
.cmp-empty { margin: 0; padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px dashed var(--line); font-size: 15px; line-height: 1.6; color: var(--muted); }
/* лоток не должен закрывать плавающую кнопку помощника */
/* Плавающая кнопка — всегда значок: широкая плашка ложилась на кнопку «Kasinolle»
   в последней видимой строке таблицы и на планшете, и на ноутбуке, и на десктопе (D4, D51). */
.apu-fab { gap: 0; padding: 0; width: 48px; min-width: 48px; min-height: 48px; justify-content: center; overflow: hidden; }
.apu-fab .apu-fab-t { display: none; }
body:has(.cmp-tray:not([hidden])) .apu-fab { bottom: 78px; }
body:has(.cmp-tray:not([hidden])) .apu-nudge { bottom: 142px; }
/* Кнопка квиза — вариант A (Артём 11.10: «A — карточка, три шага»; макет design/quiz-cta-2026-10-11/A.html).
   Карточка «Kasinovalitsin» под мета-строкой главной. Класс apu-pick, а не apu-card из макета:
   apu-card — карточки результатов в диалоге. Цвета и шрифты — только переменные сайта. */
.apu-pick { margin: 16px auto 0; max-width: 560px; text-align: left; padding: 14px 16px 16px; border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }
.apu-pick-top { display: flex; align-items: center; gap: 12px; }
.apu-pick-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: #ffb48c; flex: none; }
.apu-pick-ico .i { width: 20px; height: 20px; stroke: #ffb48c; }
.apu-pick-top b { display: block; font: 600 17px/22px var(--font-head); }
.apu-pick-top small { display: block; font: 400 12px/18px var(--font); color: var(--dim); }
.apu-pick-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.apu-pick-steps li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--pill); background: var(--chip); font: 500 12px/18px var(--font); color: var(--muted); }
.apu-pick-steps li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--grad-solid); color: #fff; font: 600 11px/1 var(--font); font-style: normal; }
.apu-pick .apu-hero { width: 100%; justify-content: center; margin-top: 12px; min-height: 48px; }
.apu-pick-note { display: block; margin-top: 10px; font: 400 12px/18px var(--font); color: var(--dim); }
@media (min-width: 761px) { .apu-pick { max-width: 640px; } }
/* Заголовок шага диалога: «Kasinovalitsin · Kysymys 1 / 3» и точки прогресса. */
.apu-dots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.apu-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.apu-dots i.on { background: var(--orange); }
/* Плавающая кнопка — пилюля «Kasinovalitsin» вместо круглого значка (вариант A). На главной появляется,
   когда карточка ушла за верх экрана (класс past ставит site.js); пока открыт лоток сравнения — прячется. */
.apu-fab.pill { width: auto; min-width: 0; padding: 0 18px 0 14px; gap: 8px; transition: opacity .2s, visibility .2s; }
.apu-fab.pill .apu-fab-t { display: inline; font: 600 14px/20px var(--font); }
.apu-fab.pill .i { width: 18px; height: 18px; }
body:has([data-apu-pick]) .apu-fab:not(.past),
body:has(.cmp-tray:not([hidden])) .apu-fab { visibility: hidden; opacity: 0; pointer-events: none; }
/* Обзор: пилюля не ложится на кнопку перехода и панель предложения — класс off ставит site.js, пока такая
   цель под ней; прячется сразу (без затухания), возвращается плавно (переход .2s от .apu-fab.pill). */
.apu-fab[data-apu-avoid].off { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
@media (max-width: 760px) {
  /* Лоток на телефоне — одна строка: счётчик и две кнопки. Чипы выбранных казино занимали
     ещё два ряда и съедали до 30 % экрана (R3); сами казино видны на странице сравнения. */
  .cmp-tray-in { flex-wrap: nowrap; gap: 8px; padding: 8px 16px; }
  .cmp-chips { display: none; }
  .cmp-act { flex: none; }
  .cmp-act .btn { height: 40px; padding: 0 12px; font-size: 13px; }
  .cmp-count { flex: 1; min-width: 0; }
}

/* ───── метки «лучшее для…», владелец, доверие ───── */
.chip i { margin-left: 5px; font-style: normal; color: var(--dim); }   /* число отлипает от слова (D32) */
.best { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: var(--pill); background: var(--green-bg); border: 1px solid var(--green-line); font: 600 10px/16px var(--font); letter-spacing: .02em; color: var(--green); white-space: nowrap; }
.best .i { width: 12px; height: 12px; stroke: var(--green); }
.warn-l { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.warn-l li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card-2); border-left: 3px solid var(--amber); }
.warn-l li b { font-size: 14px; color: #fff; }
.warn-l li span { font-size: 13px; line-height: 1.55; color: var(--muted); }
.contr { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); }
.contr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 15px/1.3 var(--font-head); color: #fff; }
.contr-h .i { width: 17px; height: 17px; stroke: url(#rg); }
.contr-t { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.contr-l { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.contr-l li { padding: 4px 10px; border-radius: var(--pill); background: var(--chip); font-size: 12px; color: var(--muted); }
.contr-n { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.c-brand .best { margin-left: 2px; }
/* Быстрый поиск одной строкой: бренды, платёжки, разделы — с пометкой вида. */
.s-drop a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-drop a i { font-style: normal; font-size: 11px; color: var(--dim); white-space: nowrap; }

/* ───── удержание: режим обзора, мой список, словарь, лента ───── */
.b-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.b-title-row .b-title { margin: 0; }
.rmode { display: flex; gap: 6px; }
.gl { border-bottom: 1px dotted var(--dim); cursor: help; color: inherit; }
.gl:hover { color: #ffb48c; border-bottom-color: #ffb48c; }
.gl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.gl-item { padding: 18px 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 60px); }
.gl-item:target { border-color: var(--orange); }
.gl-item h2 { margin: 0 0 8px; font: 600 17px/1.3 var(--font-head); }
.gl-item p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.chg { display: grid; gap: 12px; margin-top: 20px; }
.chg-i { padding: 20px 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 60px); }
.chg-d { margin: 0 0 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.chg-i h2 { margin: 0 0 8px; font: 600 19px/1.3 var(--font-head); }
.chg-i p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.chg-t { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; line-height: 1.5; }
.chg-t th, .chg-t td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.chg-t thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.chg-t tbody th { width: 22%; font-weight: 600; white-space: nowrap; }
.chg-t td { color: var(--muted); }
.chg-t .chg-s { width: 28%; font-size: 13px; color: var(--dim); }
@media (max-width: 760px) {
  .chg-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .chg-t, .chg-t tbody, .chg-t tr, .chg-t th, .chg-t td { display: block; width: auto; }
  .chg-t tr { padding: 12px 0; border-top: 1px solid var(--line); }
  .chg-t th, .chg-t td { padding: 0; border: 0; }
  .chg-t tbody th { width: auto; white-space: normal; margin-bottom: 2px; }
  .chg-t .chg-s { width: auto; margin-top: 4px; }
}
/* «Мой список»: карточка казино — тот же набор, что в строке таблицы на телефоне
   (логотип, имя, оценка, главный оффер, «Kasinolle», «Arvostelu», крестик) — D15. */
.my-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 14px; }
.my-c { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 44px 14px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.my-c .nm { font: 600 15px/22px var(--font); overflow-wrap: break-word; }
.my-c .nm a { color: #fff; }
.my-c .nm a:hover { color: #ffb48c; }
.my-c-r { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.my-c-b { margin: 4px 0 0; font: 400 13px/18px var(--font); color: var(--muted); }
.my-c-b b { display: block; font-weight: 600; color: #fff; }
.my-c-b .cap { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }
.my-c-a { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.my-c-a .more { font: 500 13px/20px var(--font); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.my-c-a .more:hover { color: #ffb48c; }
.my-c .my-x { position: absolute; top: 8px; right: 8px; }
.my-empty { margin: 14px 0 0; padding: 28px; border-radius: var(--r-lg); background: var(--card); border: 1px dashed var(--line); font: 400 15px/26px var(--font); color: var(--muted); }
.my-empty p { margin: 0 0 8px; }
.my-empty p:last-child { margin-bottom: 0; }
.my-empty b { color: #fff; }
@media (max-width: 560px) {
  .my-l { grid-template-columns: minmax(0, 1fr); }
  .my-c { grid-template-columns: 40px minmax(0, 1fr); row-gap: 10px; }
  .my-c-a { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .my-c-a .btn { flex: 1; }
}
.my-i-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.my-i { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 16px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--line); }
.my-i a { font: 600 14px var(--font); color: #fff; }
.my-i a:hover { color: #ffb48c; }
.my-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--chip); color: var(--dim); font-size: 16px; line-height: 1; cursor: pointer; }
.my-x:hover { color: var(--red); }
.share { display: flex; gap: 8px; margin-top: 14px; }
.share input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); color: var(--muted); font: 400 13px var(--font); }
@media (max-width: 760px) { .gl-list { grid-template-columns: 1fr; } }
/* Поле депозита добавилось в правую часть ряда инструментов — на телефоне ряд переносится. */
@media (max-width: 760px) {
  .toolbar-r { flex-wrap: wrap; width: 100%; gap: 8px; }
  .dep-in { height: 44px; }
  .dep-in input { width: 86px; }
  .cmp-add { width: 44px; height: 44px; }
  .b-actions { flex-wrap: wrap; }
  .b-actions > div { flex-wrap: wrap; }
  .cmp-add.wide { height: 44px; }
}
.cmp-only input { width: 24px; height: 24px; }
/* Планшет 768 — тоже сенсорная ширина: поле депозита и кнопка сравнения 44 px. */
@media (max-width: 900px) {
  .dep-in, .dep-in input { height: 44px; }
  .cmp-add { width: 44px; height: 44px; }
  .cmp-add.wide { height: 44px; width: auto; }
}

/* ── «Pelaa vastuullisesti»: структурная страница из карты страниц ───────────── */
.rg-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.rg-tool { padding: 18px 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.rg-th { display: flex; align-items: baseline; gap: 8px; }
.rg-th h3 { flex: 1; min-width: 0; margin: 0; font: 600 17px/1.3 var(--font-head); }
.rg-th b { font: 600 20px/1 var(--font); color: #fff; }
.rg-th small { font: 400 12px/1 var(--font); color: var(--dim); }
.rg-tool .meter { width: 100%; max-width: 100%; margin: 10px 0 12px; }
.rg-tool p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.rg-tool .tags { gap: 6px; }
.rg-tbl td .tags { gap: 6px; }
/* имя казино в таблице — ссылка, значит цель для пальца: 24 px на столе, 44 на телефоне */
.rg-tbl td a { display: inline-flex; align-items: center; min-height: 24px; }
.rg-help-box { margin-top: 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); }
.rg-help-box > div { display: flex; align-items: center; gap: 12px; font: 400 14px/22px var(--font); color: var(--muted); }
.rg-help-box > div b { color: #fff; }
.rg-help-box p { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.rg-help-box p a { color: #ffb48c; }
.rg-help-box .note { margin-top: 10px; }
@media (max-width: 900px) {
  .rg-tools { grid-template-columns: 1fr; }
  /* общее правило «на телефоне показываем 3 чипа + N» живёт ради таблицы брендов;
     здесь список казино — это и есть содержимое карточки, прятать его нельзя */
  .rg-tool .tags .tagc:nth-child(n+4):not(.more), .rg-tbl .tags .tagc:nth-child(n+4):not(.more) { display: inline-flex; }
  .rg-tool .tags, .rg-tbl .tags { justify-content: flex-start; }
  /* строка таблицы на телефоне разворачивается в карточку: имя, чипы, счётчик */
  .rg-tbl tr { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rg-tbl td { white-space: normal; width: 100%; text-align: left; }
  .rg-tbl td[data-th="Työkalut"]::before, .rg-tbl td[data-th="Kasino"]::before { content: none; }
  .rg-tbl td[data-th="Kasino"] a { font-weight: 600; color: #fff; }
  .rg-tbl td a { min-height: 44px; }
  .rg-tbl td[data-th="Kpl"] { font-size: 12px; color: var(--dim); }
}

/* ── «Paljonko talletat?» — поле депозита над таблицей ───────────────────────
   Это ключевая фича «деньги»: маленькая плашка в ряду кнопок её прятала.
   Полоса стоит прямо над таблицей, на телефоне — над карточками. */
.depbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 16px 0 0; padding: 12px 16px;
  border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--line); }
.depbar-q { margin: 0; font: 600 15px/22px var(--font-head); color: #fff; }
.depbar-in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.depbar-quick { display: flex; gap: 6px; }
.depbar-quick button { min-height: 36px; padding: 0 14px; border-radius: var(--pill); background: var(--tint);
  border: 1px solid var(--line); color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.depbar-quick button:hover { color: #fff; border-color: var(--orange); }
.depbar-quick button.on { color: #fff; border-color: transparent; background: var(--grad-solid); }  /* тёмный градиент: белый текст даёт контраст 4,8 (приёмка B4) */
.depbar .dep-in { height: 36px; }
.depbar .dep-in input { width: 104px; max-width: 100%; }
.depbar .dep-in i { font-style: normal; color: var(--dim); font-size: 13px; }
.depbar-h { flex: 1; min-width: 180px; margin: 0; font: 400 13px/18px var(--font); color: var(--dim); }
/* пересчитанная строка в карточке и в строке таблицы */
.cap.eur { display: block; margin-top: 4px; font-weight: 600; color: #ffb48c; }
@media (max-width: 900px) {
  .depbar { margin: 12px 0 0; padding: 12px; }
  .depbar-q { width: 100%; }
  .depbar-in { width: 100%; }
  .depbar-quick { flex: 1; }
  .depbar-quick button { flex: 1; min-height: 44px; }
  .depbar .dep-in, .depbar .dep-in input { height: 44px; }
  .depbar .dep-in input { width: 92px; }
  .depbar-h { width: 100%; flex: none; }
}

/* ── первый экран 1440 × 900: таблица начиналась слишком низко (правка A4) ──
   Первый раздел страницы почти повторяет H1, поэтому его заголовок компактный,
   а цифры сравнения стоят с ним в одной строке. */
.section.first { margin-top: 20px; }
.section.first > .sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; }
.section.first > .sec-head > h2 { font: 600 20px/28px var(--font-head); text-align: left; }
.section.first > .sec-head > .counters { margin-top: 0; gap: 8px 12px; }
.section.first > .sec-head + * { margin-top: 14px; }
.deals { padding: 12px; }
@media (max-width: 900px) {
  .section.first > .sec-head { justify-content: flex-start; }
  .section.first > .sec-head > h2 { width: 100%; text-align: center; }
  .section.first > .sec-head > .counters { width: 100%; }
}

/* Логотип картинкой, когда он есть в assets (правка A10): та же коробка, что у
   плашки с буквами, чтобы строка таблицы не прыгала. */
.logo-img { object-fit: contain; background: var(--card-2); padding: 4px; }

/* Шапка обзора на планшете (768–1024): в один ряд она не влезает — заголовок
   стал длиннее («Paf Casino – arvostelu, bonus ja kotiutus»), и строка факты
   выталкивала блок за край окна (замер B1). Собираем ту же сетку, что на
   телефоне, но раньше. */
@media (min-width: 761px) and (max-width: 1024px) {
  .b-id { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; align-items: center; width: 100%; }
  .b-id > .logo-box { width: 88px; height: 88px; font-size: 24px; grid-row: 1 / span 2; }
  .b-id .inf { display: contents; }
  .b-id h1 { font-size: 26px; line-height: 32px; align-self: end; grid-column: 2; grid-row: 1; }
  .b-id .since { align-self: start; grid-column: 2; grid-row: 2; margin-top: 2px; }
  .b-id .lead { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; font-size: 14px; line-height: 21px; }
  .b-id .pmeta { grid-column: 1 / -1; justify-content: flex-start; margin-top: 8px; }
  .facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin-top: 16px; }
  .facts > i { display: none; }
  .facts > div { white-space: normal; }
  .b-tags { grid-column: 1 / -1; }
}

/* ── длинное чтение: гиды и проза авторов ───────────────────────────────────
   Списки, таблицы и внешние ссылки в прозе (вторая очередь, пункт 1). */
.prose ul { margin-top: 12px; padding-left: 22px; list-style: disc; }
.prose ol { margin-top: 12px; padding-left: 22px; list-style: decimal; }
.prose li { margin-top: 6px; font: 400 16px/28px var(--font); color: #e9e7e7; }
.prose li::marker { color: var(--orange); }
.prose blockquote { margin: 16px 0 0; padding: 12px 16px; border-left: 2px solid var(--orange);
  background: var(--card-2); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--muted); }
/* Таблица автора внутри прозы: своя рамка и прокрутка на телефоне. */
.prose table { display: block; overflow-x: auto; width: 100%; margin-top: 16px; border-collapse: collapse;
  font: 400 14px/22px var(--font); position: relative; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: #fff; white-space: nowrap; }
.prose td { color: var(--muted); }
.prose tbody tr:hover td { background: var(--tint); }
/* Внешняя ссылка помечена стрелкой: видно, что уходишь с сайта. */
.prose a[href^="http"]::after, .faq .a a[href^="http"]::after { content: '↗'; margin-left: 3px; font-size: .85em; color: var(--dim); }
@media (max-width: 760px) {
  .prose p, .prose li { font-size: 15px; line-height: 26px; }
  .prose h3 { font-size: 18px; line-height: 26px; }
}


/* Обзор и другие страницы с левыми заголовками: колонка текста держит ширину
   строки (896 px), но прижата влево — иначе авторский абзац стоял с отступом,
   а блоки данных рядом шли во всю ширину, и левый край прыгал. */
.b-body .prose, .sec > .prose, .sec .prose { margin-left: 0; margin-right: 0; }



/* Ссылки на первоисточники: раньше раскладка жила только внутри .edrow, и в
   словаре три ссылки слипались в одну строку без пробелов. */
.edlinks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.edlinks a { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: #ffb48c; }
.edlinks a:hover { color: #fff; text-decoration: underline; }


.logo-img.logo-light { background: #f0eeee; padding: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
/* Светлая плашка под логотипом, который не виден на тёмном фоне. Не чисто белая и с тонкой
   обводкой: у белых логотипов на белом получался пустой квадрат (D23). */




/* Блок издателя (спецификация структур 03.10: автор/издатель виден у 53–59 % топа).
   Подписывает организация — нанятых авторов у нас нет. */
.pub { margin: 48px 0 0; }
.pub-in { padding: 20px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.pub-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 16px/24px var(--font-head); }
.pub-h svg { width: 22px; height: 22px; }
.pub p { margin-top: 8px; font: 400 14px/22px var(--font); color: var(--muted); }
.pub .pub-no { color: var(--dim); }
.pub-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.pub-links a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 500; color: #ffb48c; }
.pub-links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .pub-links a { min-height: 44px; } }


/* Персонажи редакции: аватар-монстрик, имя и роль. Это фигуры редакции, а не
   люди, поэтому никаких фото и профилей — только знак в стиле логотипа. */
.pub-crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; margin-top: 14px; }
.crew { display: flex; align-items: center; gap: 10px; }
.crew-av { flex: none; width: 48px; height: 48px; }
.crew .av { width: 48px; height: 48px; display: block; }
.crew b { display: block; font: 600 14px/20px var(--font); color: #fff; }
.crew small { display: block; font: 400 12px/18px var(--font); color: var(--muted); }
.crew-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.crew-card { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.crew-card .av { width: 64px; height: 64px; flex: none; }
.crew-card b { display: block; font: 600 16px/24px var(--font-head); color: #fff; }
.crew-card .cap { display: block; font: 400 12px/18px var(--font); color: var(--orange); }
.crew-card p { margin-top: 8px; font: 400 14px/22px var(--font); color: var(--muted); }
.pub-fic { margin-top: 12px; font: 400 12px/18px var(--font); color: var(--dim); }
.pmeta .av { display: none; }

/* Кнопка «Näytä kaikki N kasinoa» под укороченным списком. */
.showall { margin-top: 16px; text-align: center; }
.showall button { min-height: 44px; padding: 0 22px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--card); color: #fff; font: 600 14px/22px var(--font); cursor: pointer; }
.showall button:hover { border-color: var(--orange); }
.showall b { color: var(--orange); }

/* Строка «Päivitetty … · Ehdot luettu …» под H1 (спецификация структур 03.10). */
.pmeta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font: 400 12px/18px var(--font); color: var(--dim); }
.pmeta b { font-weight: 600; color: var(--muted); }
.b-head .pmeta, .hero.left .pmeta { justify-content: flex-start; }

/* Лайи бонусов на хабе: блок перенесли из макета, а стили к нему не доехали —
   строки шли сплошным текстом («Urheilubonus107 tarjousta»). Карточки той же
   меры, что и остальные плитки сайта. */
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 16px; }
.type { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card-2); }
.type b { font: 600 15px/22px var(--font); color: #fff; }
.type .tn { font: 700 20px/28px var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.type .cap { font: 400 12px/18px var(--font); color: var(--muted); white-space: normal; }   /* .cap по сайту без переноса — в карточке он нужен */
/* 1fr не ужимается ниже содержимого: длинное слово («Tervetuliaisbonus»)
   раздувало колонку и уводило страницу вбок. minmax(0,1fr) + перенос. */
.type { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 560px) { .types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .type { padding: 10px 12px; } .type .tn { font-size: 17px; line-height: 24px; } }

/* Логотипы способов оплаты: в каталоге хаба и в заголовке страницы способа. */
.pay-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; flex: none; }
.pm-id .pay-logo { margin-right: 10px; vertical-align: -8px; }
/* круг 2: белая надпись Revolut на белой плашке не видна — у неё тёмная подложка */
.pay-logo[src*="/payment-revolut."] { background: #191c1f; }
.pay-logo-h1 { width: 40px; height: 40px; vertical-align: -8px; margin-right: 10px; display: inline-block; }
/* ── задача 6, круг 1 (№ 14): ряд способов оплаты с подтверждённым депозитом в блоке «Maksut ja kotiutus» обзора ── */
.paylogos { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 16px 0 12px; padding: 0; list-style: none; min-width: 0; }
.paylogos li { flex: none; min-height: 34px; white-space: nowrap; }
.paylogos .pl-i { padding: 2px; border-radius: var(--r-sm); }
.paylogos .pl-i .pay-logo { display: block; }
.paylogos .pl-i .pay-logo.pl-dk { background: transparent; }
.paylogos .pl-x, .paylogos .pl-more-m { display: none; }
@media (max-width: 760px) {
  .paylogos .pl-xm, .paylogos .pl-more-d { display: none; }
  .paylogos .pl-more-m { display: inline-flex; }
}

/* Оговорка о сроке налогового правила: тише основного текста, но читается. */
.tax-note { margin-top: 8px; font: 400 12px/18px var(--font); color: var(--dim); white-space: normal; }
.tax-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.tax-note a:hover { color: var(--text); }
.counters + .tax-note { text-align: center; }

/* Первое отображение: разделы ниже сгиба браузер раскладывает по мере
   прокрутки. Содержимое то же, в поиске по странице и по якорям всё на месте;
   высота запоминается после первой раскладки, поэтому прокрутка не прыгает.
   Первый экран (шапка, карточки «выбор», таблица) из правила исключён. */
@supports (content-visibility: auto) {
  .section, .sec, .foot { content-visibility: auto; contain-intrinsic-size: auto 600px; }
  .section.first, .picks, .hero, .b-head, .b-offer, .board, .deals { content-visibility: visible; }
}

/* снимок главной в обзоре */
.shot { margin: 0 }
.shot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); background: #15131a }
.shot figcaption { margin: 8px 0 0; font-size: 13px; color: var(--dim) }
.xshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.xshots > .shot:only-child { grid-column: 1 / -1; }   /* один кадр — на всю ширину, без пустой половины */
@media (max-width: 760px) { .xshots { grid-template-columns: minmax(0, 1fr); } }
/* ── задача 6, круг 1 (№ 31): «мобильная версия и приложение» — строка о приложении и мобильный снимок главной ── */
.mob-h { margin-top: 28px; font: 600 20px/28px var(--font); }
.mob { display: grid; grid-template-columns: max-content 260px; gap: 24px; align-items: start; margin-top: 16px; }
.mob.mob-shot { grid-template-columns: minmax(0, 260px); }
.mob.mob-line { grid-template-columns: minmax(0, 1fr); }
.mob-app { margin: 0; }
.mshot { margin: 0; }
.mshot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); background: #15131a; }
.mshot figcaption { margin: 8px 0 0; font-size: 13px; color: var(--dim); }
@media (max-width: 760px) {
  .mob-h { font-size: 18px; line-height: 26px; }
  .mob, .mob.mob-shot { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mshot { width: 240px; max-width: 100%; margin: 0 auto; }
}

/* длинные списки: остальные казино ссылками — их видит поисковик и читатель без скриптов */
.rest-links { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #141216 }
.rest-links p { margin: 0 0 8px; font-size: 13px; color: var(--dim) }
.rest-links ul { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none }
.rest-links li { font-size: 14px }
.rest-links a { color: var(--muted) }

/* «лицензия не названа» — факт из источника: заметно, но без красного алярма */
.pc.nolic { border-color: #6b5a2a; background: #241f14; color: #e4c877;
  /* В узкой колонке подпись переносится: прямоугольная плашка, а не овал в три строки (D37). */
  border-radius: 8px; white-space: normal; text-align: left; height: auto; min-height: 24px; line-height: 16px; align-items: flex-start; padding: 4px 8px }
.pc.nolic::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px;
  border-radius: 50%; background: #6b5a2a; color: #120f0c; font-size: 10px; font-weight: 700 }
.c-lic .pc.nolic { font-size: 12px; padding: 2px 8px }
/* Нейтральная пометка «номер лицензии не публикуется»: регулятор назван, проверить номер нельзя.
   Без восклицательного знака и без жёлтого предупреждения — это не претензия к казино, а факт о данных. */
.pc.licsoft { border-color: #3a4250; background: #1b2027; color: #b9c2cf }
.c-lic .pc.licsoft { font-size: 12px; padding: 2px 8px }
.pc.nolic.sm { margin-left: 6px; font-size: 11px; padding: 1px 7px }
.rest-links .pc.nolic.sm { margin-left: 4px }

/* ── 06.10, диспетчер: противоречивая база отыгрыша (base = x) и плашки лицензии в строке ──
   1. Третья строка под плашкой и подпись в колонке «Kierrätys» у таких казино — оранжевым:
      это не справка, а предупреждение.
   2. В строке таблицы (122 px) под лицензией помещается ОДИН ряд плашек. Когда их две,
      предупреждение «Lähteet ristiriidassa» сжимается до значка «!» — полный текст в подсказке
      и в обзоре. Раньше вторая плашка срезалась краем строки (Huikee, кадр 06.10). */
.cmp tr[data-bbase="x"] .beur { color: #ffb48c; }
.cmp .cap.warn { color: #ffb48c; }
@media (min-width: 1181px) {
  .c-lic .lic-pills { flex-wrap: nowrap; }
  .c-lic .lic-pills .pillt.warn:not(:only-child) { flex: none; width: 24px; min-width: 24px; padding: 0; justify-content: center; font-size: 0; letter-spacing: 0; cursor: help; }
  .c-lic .lic-pills .pillt.warn:not(:only-child)::before { content: '!'; font: 700 13px/1 var(--font); }
}
/* 3. Дособранные скриптом строки (места ниже 30-го): под оффером две строки постоянной высоты —
      ответ и расчёт. Высота занята всегда, чтобы ввод депозита ничего не сдвигал. */
.cmp .beur.two { height: 31px; white-space: normal; }
.cmp .beur.two .l1 { height: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 11px/17px var(--font); color: var(--text, #fff); }
.cmp .beur.two .l2 { height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cmp tr[data-bbase="x"] .beur .l2 { color: #ffb48c; }
/* 4. В карточках (узкие экраны) высота не фиксирована: плашки под лицензией показываем целиком,
      без среза по 48 px — иначе «Lähteet ristiriidassa» резалась пополам (кадр 390 px, 06.10). */
@media (max-width: 1180px) {
  .c-lic .lic-pills { max-height: none; overflow: visible; justify-content: flex-start; }
  .c-lic .lic-pills .pillt { height: auto; }   /* текст в две строки — плашка растёт, а не вылезает за край */
}
/* 5. Скрытые колонки x/x2 и фиксированная раскладка (06.10, диспетчер). На 1181–1379 px и при
      открытых фильтрах ячейки x/x2 скрыты, но их <col> оставались в colgroup. При
      table-layout: fixed остальные ячейки съезжали влево в чужие слоты: бонус жил в колонке
      93 px (плашка 150 px резалась), а справа зияли 300 px пустоты (кадр 1280 px, /pikakasino/).
      Теперь скрыт и сам <col>, а проценты оставшихся восьми колонок дают в сумме 100. */
@media (max-width: 1379px) {
  .cmp col.w-x, .cmp col.w-x2 { display: none; }
  .cmp .w-brand, .cmp.c10 .w-brand { width: 21%; } .cmp .w-rate, .cmp.c10 .w-rate { width: 8%; }
  .cmp .w-lic, .cmp.c10 .w-lic { width: 10.5%; } .cmp .w-wd, .cmp.c10 .w-wd { width: 7%; }
  .cmp .w-pm, .cmp.c10 .w-pm { width: 17.5%; } .cmp .w-dep, .cmp.c10 .w-dep { width: 9.5%; }
  .cmp .w-bonus, .cmp.c10 .w-bonus { width: 16%; } .cmp .w-act, .cmp.c10 .w-act { width: 10.5%; }
}
@media (min-width: 1380px) {
  .f-open .cmp col.w-x, .f-open .cmp col.w-x2 { display: none; }
  .f-open .cmp .w-brand, .f-open .cmp.c10 .w-brand { width: 21%; } .f-open .cmp .w-rate, .f-open .cmp.c10 .w-rate { width: 8%; }
  .f-open .cmp .w-lic, .f-open .cmp.c10 .w-lic { width: 11.5%; } .f-open .cmp .w-wd, .f-open .cmp.c10 .w-wd { width: 6.5%; }
  .f-open .cmp .w-pm, .f-open .cmp.c10 .w-pm { width: 14.5%; } .f-open .cmp .w-dep, .f-open .cmp.c10 .w-dep { width: 10.5%; }
  .f-open .cmp .w-bonus, .f-open .cmp.c10 .w-bonus { width: 17%; } .f-open .cmp .w-act, .f-open .cmp.c10 .w-act { width: 11%; }
  /* рядом с панелью фильтров таблице тесно (1000–1130 px): подписи под значением переносятся, а не режутся */
  .f-open .cmp .cap { white-space: normal; }
  .f-open .c-bonus .cap { height: auto; }
}
/* 6. Самая узкая таблица (1181–1279 px): поля ячеек 8 px и чуть больше места лицензии, депозиту и
      бонусу — иначе «min. kotiutus 20 €» и плашки под лицензией срезались краем на 3–9 px (кадр 1190 px). */
@media (min-width: 1181px) and (max-width: 1279px) {
  .cmp th, .cmp td { padding-left: 8px; padding-right: 8px; }
  .cmp .w-brand, .cmp.c10 .w-brand { width: 20%; } .cmp .w-rate, .cmp.c10 .w-rate { width: 8%; }
  .cmp .w-lic, .cmp.c10 .w-lic { width: 11%; } .cmp .w-wd, .cmp.c10 .w-wd { width: 6.5%; }
  .cmp .w-pm, .cmp.c10 .w-pm { width: 16.5%; } .cmp .w-dep, .cmp.c10 .w-dep { width: 10.5%; }
  .cmp .w-bonus, .cmp.c10 .w-bonus { width: 17%; } .cmp .w-act, .cmp.c10 .w-act { width: 10.5%; }
}
/* 6а. Задача 6, круг 1 (w2): в таблице из 10 колонок (c10) колонка депозита на 1380 px и шире — 7,5 % (около 105 px),
      а подпись «min. kotiutus 20 €» шире на 20 px и срезалась краем: читатель видел «min. kotiutus 20» без «€»
      (на живом — /mga-kasinot/, /verovapaat-kasinot/, /uudet-nettikasinot/; с № 62 и № 64 таблиц c10 ещё четыре).
      Подпись переносится на вторую строку; высота строк таблицы та же (замер 1380, 1440, 1600, 1920 px). */
.cmp.c10 td[data-c="dep"] .cap { white-space: normal; }
/* 7. Пометка «ehdot ristiriitaiset» в калькуляторе: ссылка «Mistä tiedämme» стояла вплотную к тексту */
.warn-x details { margin-left: 6px; }
.warn-x details[open] { display: block; margin: 4px 0 2px; }
/* 8. Самые узкие телефоны (до 359 px). В шапке карточки на имя оставалось около 45 px: место
      съедали номер места, логотип, сердечко 44 px и оценка — рвалось даже «Unibet» (замер 320 px:
      180 имён из 242). Номер места здесь скрыт (порядок карточек его и так показывает, кубки
      первых трёх остаются), сердечко уже по ширине, высота нажатия прежняя. */
@media (max-width: 359px) {
  .cmp .c-brand .rank.num { display: none; }
  .cmp .c-brand .nm > .heart { width: 36px; }
  /* кнопка сравнения сжималась в узкий овал рядом со ссылкой «Arvostelu» */
  /* колонка действий здесь 76 px: «Arvostelu» и кнопка сравнения в ряд не помещаются (кнопку
     срезало краем карточки) — ставим их друг под другом. Сетку карточки не трогаем: расширение
     третьей колонки отнимало место у имени бренда (замер 320 px). */
  .cmp .c-act2 { flex-direction: column; gap: 0; }
  .cmp .c-act2 .cmp-add { flex: none; width: 44px; }
  /* значок «Pienin kierrätys» у первых трёх срезался справа: без пиктограммы и с переносом влезает */
  .cmp .c-brand .best { padding: 2px 6px; letter-spacing: 0; white-space: normal; border-radius: 8px; line-height: 13px; }
  .cmp .c-brand .best .i { display: none; }
}
/* 9. Телефоны 360–379 px (самая частая ширина у Android): сердечко уже и логотип чуть меньше —
      имени достаётся ещё 16 px, длинные имена переносятся по границе частей, а не рвутся. */
@media (min-width: 360px) and (max-width: 379px) {
  .cmp .c-brand { gap: 6px; }
  .cmp .c-brand .nm > .heart { width: 36px; }
  .cmp .logo-frame .logo-box { width: 40px; height: 40px; }
  /* кнопка сравнения рядом с «Arvostelu» сжималась в овал: колонка действий здесь 88 px */
  .cmp .c-act2 { gap: 0; }
  .cmp .c-act2 .cmp-add { flex: none; width: 32px; }
}

/* Красная метка лицензии (Артём 11.10, мост № 42): регулятор отозвал лицензию или её сегодня нет в реестре.
   Слово обязательно, цвет — красный токен темы. В таблицах метка всегда под названием лицензии,
   в шапке обзора и в basics — рядом, на телефоне — под названием. Вёрстку не сдвигает: высота строки
   таблицы растёт только у брендов с меткой, как у прежней пометки «Lisenssiä ei voitu vahvistaa». */
.pc.licred { background: var(--rose-bg); color: var(--red); border-color: rgba(249, 128, 128, .35); font-weight: 600; }
.c-lic .pc.licred, .cmp .pc.licred, .cap + .pc.licred { display: flex; width: max-content; max-width: 100%; margin: 4px auto 0; }
.cap + .pc.licred { margin-left: 0; }
.facts .pc.licred { margin-left: 6px; vertical-align: middle; }
/* сборка 3 (капитан 12.10, до 11:52): красная метка в строке стены офферов и в карточке оффера — та же плашка, что в таблицах.
   В шапке строки — своей строкой на всю ширину: на 390 не толкает имя, оценку и вид бонуса; в липкой карточке оффера скрыта (метка уже в шапке обзора) */
.o-head .o-lr { flex: 0 0 100%; display: flex; margin-bottom: 6px; }
.o-head .o-lr .pc.licred { margin: 0; }
.offer-mid .who .pc.licred { margin-left: 6px; vertical-align: middle; }
.b-offer.stuck .who .pc.licred { display: none; }
@media (max-width: 760px) {
  .facts .pc.licred { display: flex; width: max-content; max-width: 100%; margin: 4px 0 0; }
}

/* Задача 6, № 54 (w2, 12.10): строка лицензии в карточке и строке стены (способы оплаты, типы бонуса, хаб бонусов).
   Та же метка, что в шапке обзора; длинное название переносится, пометка состояния не режется. */
.licl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font: 400 13px/20px var(--font); color: var(--dim); }
.licl .k { color: var(--dim); }
.licl .lic { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 600 13px/20px var(--font); color: var(--muted); overflow-wrap: anywhere; }
.licl .pc { min-height: 0; }
.o-lic { flex-basis: 100%; margin: 8px 0 0; }
.mrow-id .licl { margin: 2px 0 2px; }

/* Задача 6, № 39 (w2, 12.10): «снимки брендов стены» — ряд 2–4 снимков главных сразу после стены; на узком экране — лента с прокруткой */
.wshots { margin: 24px 0 0; }
.wshots > .note { margin: 0 0 12px; font: 400 14px/22px var(--font); color: var(--muted); }
.wshots-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.wshot { margin: 0; min-width: 0; }
.wshot img { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid var(--line); background: #15131a; }
.wshot figcaption { margin: 8px 0 0; font: 400 13px/18px var(--font); color: var(--dim); }
.wshot figcaption a { color: var(--muted); font-weight: 600; }
@media (max-width: 900px) {
  .wshots-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; overscroll-behavior-x: contain; }
  .wshot { flex: 0 0 280px; scroll-snap-align: start; }
}

/* ───── задача 6, круг 1, № 64 — год открытия «Perustettu» на new и directory (w2): на карточке (1180 и уже) — строкой под «Lisenssi / Kotiutus / Min. talletus» ───── */
.val.yrv { white-space: normal; }   /* «Arkistossa vuodesta 2026» переносится в узкой колонке; класс «wrap» занят контейнером страницы */
@media (max-width: 1180px) {
  .cmp.yr tr { grid-template-areas: "brand brand rate" "lic wd dep" "yr yr yr" "pm pm pm" "bonus bonus act"; }
  .cmp.yr td[data-th="Perustettu"] { grid-area: yr; display: block; }
}

/* ───── задача 6, круг 1, № 62 — «Lisenssi · ETA · Verotus nyt» на foreign, curacao, mga, emta, taxfree (w2) ─────
   Налог — один раз на любой ширине: где видна колонка «Verotus nyt» (1380 и шире без панели фильтров; карточка 1180 и уже),
   плашка налога в ячейке «Lisenssi» (волна 4) скрыта; на 1181–1379 колонок нет — плашка видна, как раньше. */
@media (min-width: 1380px) {
  body:not(.f-open) .cmp.eea .lic-pills > .pillt:first-child { display: none; }
}
@media (max-width: 1180px) {
  .cmp.eea tr { grid-template-areas: "brand brand rate" "lic wd dep" "eta tx tx" "pm pm pm" "bonus bonus act"; }
  .cmp.eea td[data-c="x"] { grid-area: eta; display: block; }
  .cmp.eea td[data-c="x2"] { grid-area: tx; display: block; padding-top: 10px; }   /* как у «ETA» слева (n+8 даёт 12 px) — подписи в одну линию */
  .cmp.eea .lic-pills > .pillt:first-child { display: none; }
}

/* круг 2: год запуска виден и в мобильной карточке — отдельной строкой под лицензией (у брендов без года строки нет) */
@media (max-width: 1180px) {
  .cmp.yr:not(.eea) tr { grid-template-areas: "brand brand rate" "lic wd dep" "year year year" "pm pm pm" "bonus bonus act"; }
  .cmp.yr:not(.eea) td[data-th="Perustettu"] { grid-area: year; display: block; margin-top: 10px; }
  .cmp.yr:not(.eea) td[data-th="Perustettu"]:has(> .none) { display: none; }
  .cmp.yr:not(.eea) td[data-th="Perustettu"]::before { content: "Perustettu"; display: block; margin-bottom: 4px; font: 600 10px/16px var(--font); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
}
/* ───── задача 6, круг 1, № 60 — стена страницы способа: «Talletus alkaen» · «Kotiutus» · «Tili» · «Kasinon omat rajat» (w2) ───── */
.mrow { grid-template-columns: minmax(200px, 1.2fr) repeat(4, minmax(110px, 1fr)) auto; }
.mrow-c .v.tl { font-size: 17px; overflow-wrap: anywhere; }
.mrow-c .v.unk { color: var(--muted); }
@media (max-width: 1180px) {
  .mrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrow-id, .mrow-a { grid-column: 1 / -1; }
  .mrow .mrow-c:nth-of-type(3) { grid-column: auto; }
}
@media (max-width: 760px) {
  .mrow { grid-template-columns: 1fr; }
}

/* ───── задача 6, круг 1, № 53 — шаги автора {{block:steps}} (w7): столбиком, ширина абзаца; номер в кружке слева, как у .stages ───── */
.prose ol.stages.steps { display: block; max-width: 100%; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: st; }
.prose ol.stages.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.prose ol.stages.steps li + li { padding-left: 0; }
.prose ol.stages.steps li::marker { content: none; }
.prose ol.stages.steps li::before { content: counter(st); grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-solid); font: 600 13px/1 var(--font-head); color: #fff; }
.prose ol.stages.steps li b { grid-column: 2; display: block; font: 600 16px/28px var(--font-head); color: #fff; }
.prose ol.stages.steps li b::before { content: none; display: none; }
.prose ol.stages.steps li p { grid-column: 2; margin: 2px 0 0; font: 400 16px/28px var(--font); color: #e9e7e7; }
@media (max-width: 760px) {
  .prose ol.stages.steps li b, .prose ol.stages.steps li p { font-size: 15px; line-height: 26px; }
}

/* задача 6, № 78 sisters — w7 */
/* Таблица операторов (/sisarkasinot/): классы таблиц .dt и раскрытия .dis сайта; здесь только то, чего им не хватает.
   1440 — таблица: ячейки переносятся (у .dt по умолчанию nowrap), список казино раскрывается в строке (<details>, без скрипта).
   ≤ 900 — карточка оператора: имя и «N kasinoa» в первой строке, страна, лицензия и налог ниже; открытый список — на всю ширину. */
.dt.op-tbl td, .dt.op-tbl tbody th { white-space: normal; vertical-align: top; }
.dt.op-tbl td[data-th="Lisenssi"] .pc { margin: 0 2px 4px; }
.dt.op-tbl td[data-th="Lisenssi"] .op-lic { display: inline-flex; align-items: center; gap: 4px; margin: 0 2px 4px; white-space: nowrap; }   /* лицензия и метка красного бренда — одной парой (капитан 12.10, вариант а) */
.dt.op-tbl td[data-th="Lisenssi"] .op-lic .pc { margin: 0; }
.dt.op-tbl td[data-th="Lisenssi"] .op-lic .pc.licred { min-height: 0; padding: 1px 7px; font-size: 11px; line-height: 16px; }
.dt.op-tbl thead th:nth-child(1) { width: 21%; } .dt.op-tbl thead th:nth-child(2) { width: 11%; }
.dt.op-tbl thead th:nth-child(4) { width: 13%; } .dt.op-tbl thead th:nth-child(5) { width: 22%; }
.dt.op-tbl .op-tax { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.dt.op-tbl .op-tax .pillt { flex: none; white-space: nowrap; }
.dt.op-tbl .op-tax small { font-size: 12px; color: var(--dim); white-space: nowrap; }
.dt.op-tbl .dis { border-bottom: 0; text-align: left; }
.dt.op-tbl .dis > summary { min-height: 30px; padding: 0; font-size: 14px; white-space: nowrap; }
.dt.op-tbl .dis > div { padding: 6px 0 2px; font-size: 14px; }
.dt.op-tbl .dis > div a { color: #ff8a5c; text-decoration: underline; text-underline-offset: 3px; }   /* как ссылки .prose */
.dt.op-tbl .op-bl { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.dt.op-tbl .op-bl li { display: inline-flex; align-items: center; gap: 6px; }
.dt.op-tbl .op-bl .pc.licred { min-height: 0; padding: 1px 7px; font-size: 11px; line-height: 16px; }   /* мелкая метка, как .pc.nolic.sm */
.dt.op-tbl .op-rest td { text-align: left; }
@media (max-width: 900px) {
  .dt.op-tbl tr::before { content: ''; order: 1; flex: 0 0 100%; height: 0; }   /* разрыв строки после «имя · N kasinoa» */
  .dt.op-tbl tbody th { flex: 1 1 0; min-width: 0; order: 0; }
  .dt.op-tbl tbody th, .dt.op-tbl td { text-align: left; }
  .dt.op-tbl td { order: 2; }
  .dt.op-tbl td.op-k { order: 0; flex: 0 0 auto; }
  .dt.op-tbl td.op-k::before { content: none; }
  .dt.op-tbl td.op-k:has(> details[open]) { order: 1; flex: 0 0 100%; }   /* открытый список — под именем, на всю ширину */
  .dt.op-tbl .op-tax { justify-content: flex-start; }
  .dt.op-tbl .dis > summary { min-height: 44px; gap: 8px; }
  .dt.op-tbl .op-rest td { flex: 0 0 100%; }
  .dt.op-tbl .op-rest::before { content: none; }
}

/* задача 6, № 61 providers — w7 */
/* Каталог студий /pelivalmistajat/ (templates/listing.mjs, studioCatalog). Таблица — общая .dt, поиск — .pm-tools / .pm-search
   каталога способов оплаты. Своё — колонка примеров (переносится, по левому краю) и строка-карточка на телефоне:
   название и число в первой строке, примеры во второй. Тот же вид — у короткого списка студий на new и noreg (.pv-page). */
.dt.pv tbody th, .dt.pv thead th:last-child, .dt.pv td:last-child { text-align: left; }   /* название — по левому краю, как подпись столбца */
.dt.pv td:last-child { white-space: normal; }
.dt.pv td a { text-decoration: underline; text-underline-offset: 3px; }   /* примеры — ссылки на обзоры */
@media (max-width: 900px) {
  .dt.pv tbody th { flex: 1 1 auto; white-space: normal; }
  .dt.pv td:nth-of-type(1)::after { content: " kasinoa vertailussa"; color: var(--muted); font-weight: 400; }
  .dt.pv-page td:nth-of-type(1)::after { content: " kasinoa tällä sivulla"; }   /* короткий вид на new / noreg */
  .dt.pv td:last-child { flex: 1 0 100%; }
  .pv-tools .pm-search { flex: 1 0 100%; max-width: 100%; }   /* поиск над списком на всю ширину, порядок — строкой ниже */
}

/* задача 6, круг 1 (капитан 12.10, приёмка w2): плитка «kierrätys bonuksesta, mediaani» — база словами последней строкой ряда плиток,
   тише текста, как оговорка .tax-note. В шапке первого раздела (заголовок слева, плитки справа) — по правому краю ряда, под плиткой
   медианы (84б, замечание w2); на хабе и на телефоне — по центру. contain: строка не раздвигает ряд плиток в шапке,
   −12px — колонный зазор плиток шапки, иначе ряд выходит шире самих плиток. */
.counters-note { flex: 1 0 100%; margin: 0; font: 400 12px/18px var(--font); color: var(--dim); text-align: center; white-space: normal; contain: inline-size; }
.section.first > .sec-head > .counters > .counters-note { margin-left: -12px; text-align: right; }
@media (max-width: 900px) { .section.first > .sec-head > .counters > .counters-note { margin-left: 0; text-align: center; } }
@media (max-width: 760px) { .counters > .counters-note { grid-column: 1 / -1; } }
/* со строкой медианы блок плиток в шапке выше одного ряда: заголовок держим по центру ряда плиток (32px), а не всего блока —
   там же, где он стоял при align-items: center без строки */
@media (min-width: 901px) {
  .section.first > .sec-head:has(.counters-note) { align-items: flex-start; }
  .section.first > .sec-head:has(.counters-note) > h2 { margin-top: 2px; }
}
/* 84б: «… · ensin yksi tarjous kasinoa kohden» — на телефоне вторая часть своей строкой под счётчиком, без точки-разделителя;
   пока фильтр по виду догружает всю ленту, прежние карточки приглушены */
@media (max-width: 760px) { .oa-count .oa-round { display: block; } .oa-count .oa-dot { display: none; } }
.ogrid[aria-busy="true"] { opacity: .5; transition: opacity .15s; }