/* ==========================================================================
   Kovačič igra — тема «Tier list»
   Яскравий зін: папір, чорні контури, жорсткі тіні, наліпки. Рейтинг — яруси S–D.
   1 Токени · 2 База · 3 Атоми · 4 Шапка · 5 Hero · 6 Tier list · 7 Плитка
   9 Секції головної · 10 Футер · 11 Сторінка і проза
   12 Огляд · 13 Список оглядів і 404 · 14 Рух
   ========================================================================== */

/* 0 ─ Шрифти (локальні woff2, без запитів до Google; ліцензія SIL OFL) ───────── */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1 ─ Токени ─────────────────────────────────────────────────────────────── */
:root {
  --paper: #fff8e7;
  --ink: #111;
  --white: #fff;
  --yel: #ffe500;
  --pink: #ff5fa2;
  --lilac: #b9a2ff;
  --sky: #8fd3ff;
  --sand: #d9d0bb;
  --mint: #8ff0c8;
  --rose: #ffc2dc;
  --red: #ff3b30;
  --blue: #3d6bff;
  --grn: #00a86b;

  --b: 3px solid var(--ink);
  --b2: 2px solid var(--ink);
  --sh: 6px 6px 0 var(--ink);
  --sh-s: 4px 4px 0 var(--ink);
  --sh-l: 10px 10px 0 var(--ink);

  --f-d: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --f-b: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-m: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1320px;
  --gutter: 16px;
  --tc: var(--yel);
  --sc: var(--ink);
}
@media (min-width: 760px) {
  :root {
    --gutter: 32px;
  }
}
/* Яруси */
.tc-s {
  --tc: var(--yel);
}
.tc-a {
  --tc: var(--pink);
}
.tc-b {
  --tc: var(--lilac);
}
.tc-c {
  --tc: var(--sky);
}
.tc-d {
  --tc: var(--sand);
}
/* Масті-критерії (чотириколірна колода) */
.su--spade {
  --sc: var(--ink);
}
.su--heart {
  --sc: var(--red);
}
.su--diamond {
  --sc: var(--blue);
}
.su--club {
  --sc: var(--grn);
}

/* 2 ─ База ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 17px/1.5 var(--f-b);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
svg {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
h1,
h2,
.hd2 {
  font: 400 clamp(40px, 6vw, 84px) / 1.12 var(--f-d);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h3,
.hd3 {
  font: 700 19px/1.25 var(--f-b);
}
a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
mark {
  --mk: var(--yel);
  background: linear-gradient(transparent 13%, var(--mk) 13% 93%, transparent 93%);
  color: inherit;
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
}
::selection {
  background: var(--ink);
  color: var(--yel);
}
small {
  font-size: 13px;
}

/* 3 ─ Атоми ──────────────────────────────────────────────────────────────── */
.wrap {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--ink);
  color: var(--yel);
  padding: 12px 16px;
  font-weight: 700;
}
.skip:focus {
  top: 12px;
}
.ic {
  width: 1em;
  height: 1em;
  flex: none;
}
.mono {
  font: 700 12px/1.4 var(--f-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lede {
  font-size: clamp(18px, 1rem + 0.5vw, 22px);
  line-height: 1.45;
  font-weight: 500;
  max-width: 60ch;
}
.fine {
  font-size: 13px;
  opacity: 0.75;
}
.nodata {
  opacity: 0.55;
  font-weight: 500;
}

/* Кнопки */
.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px 8px;
  border: var(--b);
  background: var(--ink);
  color: var(--paper);
  font: 400 20px/1.2 var(--f-d);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}
.go .ic {
  width: 0.9em;
  height: 0.9em;
  transition: transform 0.12s ease;
}
.go:hover {
  background: var(--pink);
  color: var(--ink);
}
.go:hover .ic {
  transform: translateX(4px);
}
.go--lg {
  padding: 14px 26px 12px;
  font-size: 26px;
  box-shadow: var(--sh);
}
.go--lg:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.go--lg:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
}
.go--yel {
  background: var(--yel);
  color: var(--ink);
}
.go--yel:hover {
  background: var(--white);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: var(--b);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-s);
  font: 700 15px/1.2 var(--f-b);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}
.btn:hover {
  background: var(--yel);
  transform: translate(-2px, -2px);
  box-shadow: var(--sh);
}
.code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--yel);
}

/* Наліпка-оцінка */
.burst {
  --bs: 52px;
  display: grid;
  place-items: center;
  width: var(--bs);
  height: var(--bs);
  background: var(--yel);
  color: var(--ink);
  font: 400 calc(var(--bs) * 0.37) / 1 var(--f-d);
  transform: rotate(12deg);
  clip-path: polygon(50% 0, 61% 12%, 75% 6%, 79% 21%, 94% 21%, 90% 36%, 100% 50%, 90% 64%, 94% 79%, 79% 79%, 75% 94%, 61% 88%, 50% 100%, 39% 88%, 25% 94%, 21% 79%, 6% 79%, 10% 64%, 0 50%, 10% 36%, 6% 21%, 21% 21%, 25% 6%, 39% 12%);
  flex: none;
}
.burst--sm {
  --bs: 56px;
}
.burst--xl {
  --bs: 118px;
}
.tchip {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: var(--b);
  background: var(--tc);
  font: 400 24px/1 var(--f-d);
}
.lg {
  display: block;
  aspect-ratio: 384 / 178;
  background: var(--lb, #fff);
  overflow: hidden;
}
.lg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.suits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.su {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 0 4px;
  border: var(--b2);
  background: var(--white);
  font: 700 13px/1 var(--f-m);
}
.su .ic {
  width: 13px;
  height: 13px;
  color: var(--sc);
}
.su.is-on {
  background: var(--sc);
  color: var(--white);
}
.su.is-on .ic {
  color: var(--white);
}
.suits--lg .su {
  padding: 9px 0 8px;
  gap: 5px;
  font-size: 17px;
}
.suits--lg .su .ic {
  width: 18px;
  height: 18px;
}
.ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: var(--b);
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  font: 400 28px/1 var(--f-d);
  transform: rotate(-6deg);
  overflow: hidden;
}
.ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кружечок нахилений на −6°; фото повертаємо назад, щоб обличчя стояло рівно. */
  transform: rotate(6deg) scale(1.14);
}
.ava--lg {
  width: 76px;
  height: 76px;
  font-size: 42px;
}
.ava--xl,
.ava--xxl {
  width: 168px;
  height: 168px;
  font-size: 96px;
  box-shadow: var(--sh);
}
.specs > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 2px dashed var(--ink);
  font-size: 15px;
}
.specs > div:last-child {
  border-bottom: 0;
}
.specs dd {
  font-weight: 700;
  text-align: right;
}
.pc {
  display: grid;
  gap: 8px;
}
.pc li {
  display: flex;
  gap: 10px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
}
.pc .ic {
  width: 20px;
  height: 20px;
  padding: 3px;
  margin-top: 1px;
  background: var(--ink);
  color: var(--mint);
}
.pc--con .ic {
  color: var(--rose);
}
.stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stk {
  padding: 6px 12px 5px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
  font: 700 14px/1.2 var(--f-m);
  text-transform: uppercase;
}
.stk b {
  font: 400 26px/1 var(--f-d);
  margin-right: 2px;
}
.stk:nth-child(odd) {
  transform: rotate(-3deg);
}
.stk:nth-child(even) {
  transform: rotate(2.5deg);
}
.stk--yel {
  background: var(--yel);
}
.stk--pink {
  background: var(--pink);
}
.stk--blue {
  background: var(--sky);
}

/* Репліка автора */
.says__b {
  position: relative;
  padding: 16px 18px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh);
  font-size: 18px;
  line-height: 1.38;
  font-weight: 600;
}
.says__b p + p {
  margin-top: 8px;
  font-weight: 500;
}
.says__b::after {
  content: "";
  position: absolute;
  left: 40px;
  bottom: -14px;
  width: 22px;
  height: 22px;
  background: var(--white);
  border-right: var(--b);
  border-bottom: var(--b);
  transform: rotate(45deg);
}
.says__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-left: 14px;
}
.says__who b {
  display: block;
  font: 400 24px/1.25 var(--f-d);
  text-transform: uppercase;
}

/* 4 ─ Шапка ──────────────────────────────────────────────────────────────── */
.top {
  position: relative;
  z-index: 20;
}
.top__in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.logo b,
.logo i {
  font: 400 30px/1.28 var(--f-d);
  font-style: normal;
  text-transform: uppercase;
}
.logo b {
  padding: 3px 11px 0;
  background: var(--ink);
  color: var(--paper);
  transform: rotate(-3deg);
  transition: transform 0.15s ease;
}
.logo i {
  padding: 0 9px;
  border: var(--b);
  background: var(--yel);
  color: var(--ink);
  transform: rotate(4deg) translate(-4px, 6px);
  transition: transform 0.15s ease;
}
.logo:hover b {
  transform: rotate(2deg);
}
.logo:hover i {
  transform: rotate(-5deg) translate(-4px, 6px);
}
.nav {
  margin-left: auto;
}
.nav ul {
  display: flex;
  gap: 8px;
}
.nav a {
  display: block;
  padding: 9px 13px;
  border: var(--b);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--yel);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.age {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border: var(--b);
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font: 700 15px/1 var(--f-m);
  text-decoration: none;
  transform: rotate(12deg);
}
.burger {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--b);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}
.burger .ic {
  width: 24px;
  height: 24px;
}
.burger .ic-close,
.burger[aria-expanded="true"] .ic-open {
  display: none;
}
.burger[aria-expanded="true"] .ic-close {
  display: block;
}
@media (max-width: 899px) {
  .top__in {
    padding-block: 12px;
  }
  .logo b,
  .logo i {
    font-size: 24px;
  }
  .age {
    margin-left: auto;
    width: 44px;
    height: 44px;
    font-size: 13px;
  }
  .burger {
    display: grid;
  }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    margin: 0;
    padding: 12px var(--gutter) 20px;
    background: var(--ink);
  }
  .nav.is-open {
    display: block;
  }
  .nav ul {
    flex-direction: column;
    gap: 10px;
  }
  .nav a {
    padding: 12px 14px;
    box-shadow: none;
    font: 400 26px/1.25 var(--f-d);
    letter-spacing: 0.02em;
  }
}

/* Бігучий рядок */
.mq {
  margin: 2px -20px 0;
  padding: clamp(5px, 0.7vw, 8px) 0 clamp(4px, 0.6vw, 7px);
  border-block: var(--b);
  background: var(--pink);
  overflow: hidden;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}
.mq > div {
  display: inline-block;
  animation: mq 36s linear infinite;
  font: 400 clamp(15px, 2vw, 26px) / 1.25 var(--f-d);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mq span {
  margin: 0 18px;
}
.mq i {
  font-style: normal;
}

/* 5 ─ Hero ───────────────────────────────────────────────────────────────── */
/* Невисокий: початок tier list має бути видно на першому екрані. */
.hero {
  padding-block: clamp(14px, 2vw, 22px) clamp(18px, 2.6vw, 30px);
}
.hero__in {
  position: relative;
  display: grid;
  gap: 12px;
}
.hero h1 {
  font-size: clamp(36px, 10.4vw, 92px);
  line-height: 1.13;
  text-wrap: wrap;
}
.hero__k {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 2px;
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.5;
}
.hero h1 u {
  text-decoration: none;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--blue);
}
/* Телефон і планшет: репліка автора стискається до одного рядка з аватаром. */
@media (max-width: 999px) {
  .says--hero {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
  }
  .says--hero .says__b {
    flex: 1;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.35;
  }
  .says--hero .says__b::after,
  .says--hero .says__who > span:not(.ava) {
    display: none;
  }
  .says--hero .says__who {
    margin: 0;
    padding: 0;
  }
  .says--hero .ava {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }
}
@media (min-width: 1000px) {
  .hero h1 {
    max-width: calc(100% - 420px);
  }
  .hero h1 u {
    -webkit-text-stroke-width: 3px;
    text-shadow: 6px 6px 0 var(--blue);
  }
  .says--hero {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    width: 380px;
    transform: translateY(-50%);
  }
  .says--hero .says__b {
    padding: 12px 16px;
    font-size: 16px;
  }
  .says--hero .says__who {
    margin-top: 20px;
  }
}

/* 6 ─ Tier list ──────────────────────────────────────────────────────────── */
.tl {
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-l);
}
.tl__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 10px 16px 8px;
  background: var(--ink);
  color: var(--paper);
}
.tl__head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.tl__head h2 span::after {
  content: attr(data-n);
}
.tl__head h2 span {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  background: var(--yel);
  color: var(--ink);
  transform: rotate(-4deg);
}
.tl__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--paper);
}
.seg {
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar {
  display: none;
}
.seg__l {
  margin-right: 10px;
  white-space: nowrap;
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: -3px;
  padding: 8px 12px;
  border: var(--b);
  background: var(--white);
  font: 700 14px/1.2 var(--f-b);
}
.seg button:first-of-type {
  margin-left: 0;
}
.seg button .ic {
  color: var(--sc);
}
.seg button:hover {
  background: var(--yel);
}
.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.seg button[aria-pressed="true"] .ic {
  color: var(--yel);
}
.flt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.flt button,
.tl__compact {
  padding: 7px 11px;
  border: var(--b2);
  background: transparent;
  font: 700 12px/1.3 var(--f-m);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.flt button:hover,
.tl__compact:hover {
  background: var(--white);
}
.flt button[aria-pressed="true"],
.tl__compact[aria-pressed="true"] {
  background: var(--yel);
  box-shadow: 3px 3px 0 var(--ink);
}
.find {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: var(--b2);
  background: var(--white);
}
.find input {
  width: 138px;
  padding: 7px 0;
  border: 0;
  background: none;
  font: 600 14px/1.3 var(--f-b);
  outline: 0;
}
.find:focus-within {
  box-shadow: 3px 3px 0 var(--blue);
}
.tl__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.tl__head .tl__compact {
  border-color: var(--paper);
}
.tl__head .tl__compact:hover {
  background: var(--paper);
  color: var(--ink);
}
.tl__head .tl__compact[aria-pressed="true"] {
  background: var(--yel);
  border-color: var(--yel);
  color: var(--ink);
  box-shadow: none;
}
.tl__fine {
  padding: 12px 16px;
  border-top: var(--b);
  font-size: 13px;
  background: var(--paper);
}

.row {
  border-top: var(--b);
}
.row.is-void .cells::after {
  content: "Še prazno. Igralnica pride sem šele po mojem testu.";
  grid-column: 1 / -1;
  padding: 4px 0;
  font: 700 12px/1.4 var(--f-m);
  text-transform: uppercase;
  opacity: 0.6;
}
.row.is-empty .cells::after {
  content: "V tem tieru po tem merilu ni nobene igralnice.";
  grid-column: 1 / -1;
  font: 700 12px/1.4 var(--f-m);
  text-transform: uppercase;
  opacity: 0.6;
}
.tier {
  background: var(--tc);
  border-bottom: var(--b);
  padding: 6px 14px 4px;
}
.tier > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tier .hd3 {
  font: 400 44px/1.1 var(--f-d);
}
.tier__r {
  margin-left: auto;
  white-space: nowrap;
}
.tier__r [data-count] {
  display: inline-block;
  min-width: 24px;
  padding: 1px 6px;
  background: var(--ink);
  color: var(--tc);
  text-align: center;
}
.cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 12px;
  padding: 22px 14px 16px;
  align-items: start;
  background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(17, 17, 17, 0.035) 10px 11px);
}
@media (min-width: 760px) {
  .row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
  }
  .tier {
    border-bottom: 0;
    border-right: var(--b);
    padding: 20px 8px;
    text-align: center;
  }
  .tier > div {
    position: sticky;
    top: 16px;
    display: grid;
    justify-items: center;
    gap: 8px;
  }
  .tier .hd3 {
    font-size: 96px;
    line-height: 0.95;
  }
  .tier__l {
    max-width: 12ch;
  }
  .tier__r {
    margin: 4px 0 0;
  }
  .cells {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px 16px;
    padding: 26px 22px 20px;
  }
}

/* 7 ─ Плитка казино ──────────────────────────────────────────────────────── */
/* Одна розмітка — три вигляди. За замовчуванням «міні»; вибрані позиції — «картка»; .is-compact — лише лого.
   Вигляд перемикається змінними на .t, тому правила для ярусів задають лише значення. */
.t {
  --d-card: none;
  --d-cr: none;
  --dir: column;
  --n: 15px;
  --lh: 56px;
  --h: 26px;
  --btn: 16px;
  --btn-pad: 6px 8px 5px;
  --pad: 6px 8px 8px;
  --tbs: 40px;
  --bx: -9px;
  --by: -16px;
  position: relative;
  grid-column: span 2;
  min-width: 0;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}
.t:hover {
  z-index: 4;
  transform: translate(-2px, -2px) rotate(-0.6deg);
  box-shadow: 7px 7px 0 var(--ink);
}
.t__logo {
  display: block;
  width: 100%;
  aspect-ratio: 384 / 178;
  max-height: var(--lh);
  border-bottom: var(--b);
  background: var(--lb, #fff);
  overflow: hidden;
}
.t__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.t > .burst {
  position: absolute;
  top: var(--by);
  right: var(--bx);
  z-index: 3;
  --bs: var(--tbs);
}
.t__bd {
  padding: var(--pad);
}
.t__n {
  font: 400 var(--n) / 1.3 var(--f-d);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Бонус — головний акцент картки. */
.t__bonus {
  display: var(--d-card);
  margin-top: 6px;
  padding: 7px 10px 8px;
  border: var(--b2);
  background: var(--yel);
}
.t__bonus .mono {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t__h {
  font: 400 var(--h) / 1.15 var(--f-d);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.t__x {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}
/* Критерії з підписами. */
.cr {
  display: var(--d-cr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin-top: 8px;
}
.cr__i {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 0 3px;
  border-bottom: 2px dashed rgba(17, 17, 17, 0.28);
  font-size: 13px;
  font-weight: 600;
}
.cr__i dt {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.cr__i dt span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr__i .ic {
  width: 12px;
  height: 12px;
  color: var(--sc);
}
.cr__i dd {
  margin-left: auto;
  font: 700 13px/1 var(--f-m);
}
.cr__i.is-on {
  background: var(--yel);
}
.t__act {
  display: flex;
  flex-direction: var(--dir);
  gap: 5px;
  margin-top: 7px;
}
.t__act .go,
.t__rev {
  padding: var(--btn-pad);
  font-size: var(--btn);
}
.t__act .go {
  flex: 1;
}
.t__rev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--b);
  background: var(--white);
  font-family: var(--f-d);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.t__rev:hover {
  background: var(--yel);
}
.t.is-dim {
  opacity: 0.2;
  filter: grayscale(1);
}
.t.is-hit {
  outline: 5px solid var(--blue);
  outline-offset: 3px;
}

/* «Картка»: S повністю, перші позиції A і B (на телефоні й планшеті — по дві). */
.tl:not(.is-compact) :is(.row--s .t, .row--a .t:nth-child(-n + 2), .row--b .t:nth-child(-n + 2)) {
  --d-card: block;
  --d-cr: grid;
  --dir: row;
  --n: 24px;
  --lh: 62px;
  --btn: 20px;
  --btn-pad: 9px 14px 8px;
  --pad: 8px 12px 12px;
  --tbs: 62px;
  --bx: -12px;
  --by: -20px;
  grid-column: 1 / -1;
  box-shadow: var(--sh);
}
/* «Лише лого» — класичний tier list. */
.tl.is-compact .t__bd {
  display: none;
}
.tl.is-compact .t__logo {
  max-height: none;
  border-bottom: 0;
}
.tl.is-compact .t {
  --tbs: 34px;
  --bx: -8px;
  --by: -14px;
}
@media (min-width: 760px) {
  .t,
  .tl.is-compact .t {
    --dir: row;
    --n: 17px;
    --lh: 60px;
    --tbs: 50px;
    --bx: -14px;
    --by: -18px;
    grid-column: span 3;
  }
  .tl:not(.is-compact) :is(.row--s .t, .row--a .t:nth-child(-n + 2), .row--b .t:nth-child(-n + 2)) {
    grid-column: span 6;
  }
}
@media (min-width: 1120px) {
  .t,
  .tl.is-compact .t {
    grid-column: span 2;
  }
  /* S — по три в ряд, у A та B картками стають перші чотири. */
  .tl:not(.is-compact) :is(.row--s .t, .row--a .t:nth-child(-n + 4), .row--b .t:nth-child(-n + 4)) {
    --d-card: block;
    --d-cr: grid;
    --dir: row;
    --n: 24px;
    --lh: 68px;
    --btn: 20px;
    --btn-pad: 9px 14px 8px;
    --pad: 8px 12px 12px;
    --tbs: 70px;
    --bx: -18px;
    --by: -24px;
    grid-column: span 3;
    box-shadow: var(--sh);
  }
  .tl:not(.is-compact) .row--s .t:nth-child(n) {
    --n: 30px;
    --lh: 84px;
    --h: 36px;
    --tbs: 84px;
    grid-column: span 4;
  }
}

/* 9 ─ Секції головної ────────────────────────────────────────────────────── */
.section {
  padding-block: clamp(56px, 8vw, 110px);
}
.section--tight {
  padding-top: 0;
}
.section--line {
  border-top: var(--b);
  padding-block: clamp(40px, 6vw, 72px);
}
.shead {
  margin-bottom: clamp(22px, 3vw, 38px);
}
.shead h2,
.shead .hd2 {
  margin-top: 6px;
}
.shead--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
}
.crit {
  display: grid;
  gap: 18px;
}
.crit__i {
  position: relative;
  padding: 18px 18px 20px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh);
}
.crit__i:nth-child(odd) {
  transform: rotate(-0.8deg);
}
.crit__i:nth-child(even) {
  transform: rotate(0.9deg);
}
.crit__s {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--sc);
}
.crit__s .ic {
  width: 54px;
  height: 54px;
}
.crit__w {
  font: 400 68px/1 var(--f-d);
  color: var(--sc);
}
.crit h3 {
  margin-top: 6px;
  font: 400 30px/1.25 var(--f-d);
  text-transform: uppercase;
}
.crit p:last-child {
  margin-top: 6px;
  font-size: 16px;
}
@media (min-width: 620px) {
  .crit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .crit {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}
.ruler {
  margin-top: 40px;
  padding: 16px;
  border: var(--b);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 10px 10px 0 var(--pink);
}
.ruler ol {
  display: grid;
  gap: 8px;
  margin-block: 12px 16px;
}
.ruler li {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "k r" "k d";
  align-items: center;
  gap: 2px 12px;
  padding: 10px 12px;
  background: var(--tc);
  color: var(--ink);
}
.ruler li b {
  grid-area: k;
  font: 400 56px/1 var(--f-d);
}
.ruler li span {
  grid-area: r;
  font-size: 15px;
}
.ruler li em {
  grid-area: d;
  font-style: normal;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
@media (min-width: 1040px) {
  .ruler ol {
    grid-template-columns: 1.25fr 1fr 1fr 1fr 0.9fr;
    gap: 0;
  }
  .ruler li {
    grid-template-columns: 1fr;
    grid-template-areas: "k" "r" "d";
    align-content: start;
    gap: 4px;
    padding: 14px 14px 16px;
  }
  .ruler li b {
    font-size: 72px;
  }
}

.band {
  border-block: var(--b);
  padding-block: clamp(48px, 7vw, 96px);
}
.band--pink {
  background: var(--pink);
}
.band__in {
  display: grid;
  gap: 36px;
  align-items: center;
}
.band__me {
  display: grid;
  justify-items: start;
  gap: 26px;
}
.band h2 {
  margin-top: 6px;
  font-size: clamp(40px, 5.4vw, 76px);
}
.band .lede {
  margin-top: 14px;
}
.rules {
  display: grid;
  gap: 12px;
  margin-block: 22px 28px;
}
.rules li {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
}
.rules__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: var(--yel);
  font: 400 26px/1 var(--f-d);
}
.rules p {
  margin-top: 3px;
  font-size: 16px;
}
@media (min-width: 960px) {
  .band__in {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 64px;
  }
  .band .ava--xl {
    width: 230px;
    height: 230px;
    font-size: 132px;
  }
}

/* Текстові секції головної: довгі заголовки, проза у дві колонки, яруси словами, дві дороги, теми. */
.shead--long h2 {
  font-size: clamp(34px, 4.4vw, 60px);
}
.shead--sub {
  margin-top: clamp(48px, 6vw, 80px);
}
.hp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.hp .prose {
  max-width: 70ch;
}
.hp__side {
  display: grid;
  gap: 28px;
}
.facts {
  display: grid;
  gap: 12px;
}
.facts li {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
  font-weight: 600;
  line-height: 1.3;
}
.facts b {
  font: 400 52px/1 var(--f-d);
  text-align: center;
}
.facts li:nth-child(1) {
  background: var(--yel);
}
.prose--cols {
  max-width: none;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.crit__note {
  margin-top: 18px;
  opacity: 0.7;
}
.grades {
  display: grid;
  gap: 14px;
}
.grades li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
}
.grades b {
  display: grid;
  place-items: center;
  background: var(--tc);
  border-right: var(--b);
  font: 400 54px/1 var(--f-d);
}
.grades div {
  padding: 14px 16px 16px;
}
.grades h3 {
  font: 400 26px/1.25 var(--f-d);
  text-transform: uppercase;
}
.grades p {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.5;
  max-width: 86ch;
}
.aftergrades {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 28px;
}
.aftergrades p {
  max-width: 60ch;
  font-weight: 600;
}
.band__p {
  margin-top: 14px;
  max-width: 70ch;
  font-size: 18px;
  line-height: 1.55;
}
.band--ink {
  background: var(--ink);
  color: var(--paper);
}
.band--ink mark {
  color: var(--ink);
}
.band--mint {
  background: var(--mint);
}
.band--mint .go {
  margin-top: 26px;
}
.band--mint .prose {
  margin-top: 18px;
}
.paths {
  display: grid;
  gap: 22px;
  color: var(--ink);
}
.paths li {
  padding: 20px 20px 22px;
  border: var(--b);
  background: var(--yel);
  box-shadow: 8px 8px 0 var(--pink);
}
.paths li:nth-child(2) {
  background: var(--white);
  box-shadow: 8px 8px 0 var(--blue);
}
.paths .hd3 {
  margin-top: 4px;
  font: 400 clamp(32px, 3.6vw, 46px) / 1.15 var(--f-d);
  text-transform: uppercase;
}
.paths p:last-child {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.5;
}
.band__fin {
  margin-top: clamp(30px, 4vw, 48px);
  font: 400 clamp(28px, 3.4vw, 44px) / 1.2 var(--f-d);
  text-transform: uppercase;
}
.band__small {
  margin-top: 12px;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.8;
}
.topics {
  display: grid;
  gap: 20px;
}
.topics li {
  position: relative;
  padding: 18px 18px 20px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh);
}
.topics__s {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--sc);
}
.topics__s .ic {
  width: 34px;
  height: 34px;
}
.topics h3 {
  padding-right: 44px;
  font: 400 28px/1.25 var(--f-d);
  text-transform: uppercase;
}
.topics p {
  margin-top: 8px;
  font-size: 16.5px;
  line-height: 1.5;
}
.callout.en {
  margin-top: 48px !important;
  font-weight: 500;
}
.callout.en p + p {
  margin-top: 0.7em;
}
.help {
  display: grid;
  gap: 14px;
}
.help li {
  padding: 14px 16px 16px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
}
.help .hd3 {
  margin-top: 2px;
  font: 400 30px/1.2 var(--f-d);
  text-transform: uppercase;
}
.help p:last-child {
  margin-top: 4px;
  font-size: 15.5px;
  line-height: 1.4;
}
@media (min-width: 760px) {
  .paths,
  .topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prose--cols {
    columns: 2;
    column-gap: 48px;
  }
  .prose--cols > * {
    break-inside: avoid;
  }
  .prose--cols > * + * {
    margin-top: 0;
  }
}
@media (min-width: 960px) {
  .hp {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
  }
  .grades li {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .grades b {
    font-size: 76px;
  }
}

.clips {
  display: grid;
  gap: 26px;
}
.clip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.clip:hover {
  transform: translate(-3px, -3px) rotate(-0.6deg);
  box-shadow: 9px 9px 0 var(--ink);
}
.clip__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.clip__top .lg {
  width: 130px;
  border: var(--b2);
}
.clip__top .burst {
  margin-left: auto;
}
.clip .hd3 {
  font: 400 28px/1.22 var(--f-d);
  text-transform: uppercase;
}
.clip .hd3 a {
  text-decoration: none;
}
.clip .hd3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.clip > p:not([class]) {
  flex: 1;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clip__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 2px dashed var(--ink);
}
.clip__foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 900px) {
  .clips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .clip:nth-child(1) {
    transform: rotate(-1deg);
  }
  .clip:nth-child(3) {
    transform: rotate(1deg);
  }
  .clip:nth-child(n):hover {
    transform: translate(-3px, -3px) rotate(0);
  }
}

.faq {
  display: grid;
  gap: 12px;
}
.faq details {
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  font: 700 19px/1.3 var(--f-b);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .ic {
  width: 34px;
  height: 34px;
  padding: 7px;
  background: var(--ink);
  color: var(--yel);
  transition: transform 0.15s ease;
}
.faq details[open] summary {
  background: var(--yel);
  border-bottom: var(--b);
}
.faq details[open] summary .ic {
  transform: rotate(45deg);
}
.faq__a {
  padding: 14px 16px 16px;
  max-width: 72ch;
}
@media (min-width: 960px) {
  .faqwrap {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

/* 10 ─ Футер ─────────────────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: var(--paper);
  padding-top: 56px;
  overflow: hidden;
}
.foot .logo b {
  background: var(--paper);
  color: var(--ink);
}
.foot__grid {
  display: grid;
  gap: 30px;
}
.foot__about {
  margin-top: 22px;
  max-width: 40ch;
}
.foot nav .mono {
  margin-bottom: 12px;
  color: var(--yel);
}
.foot nav li + li {
  margin-top: 8px;
}
.foot nav a {
  font-weight: 700;
  text-decoration: none;
}
.foot nav a:hover {
  background: var(--yel);
  color: var(--ink);
}
.foot__rg {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 16px 18px;
  border: 3px solid var(--red);
}
.age--static {
  transform: rotate(-8deg);
  border-color: var(--paper);
}
.foot__legal {
  margin-top: 18px;
  font-size: 13px;
  opacity: 0.7;
  max-width: 96ch;
}
.foot__copy {
  margin-top: 22px;
  opacity: 0.7;
}
.foot__big {
  margin-top: 24px;
  margin-bottom: -0.11em;
  font: 400 min(21.5vw, 330px) / 1 var(--f-d);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #232323;
  user-select: none;
}
@media (min-width: 760px) {
  .foot__grid {
    grid-template-columns: minmax(0, 2fr) 1fr 1fr;
    gap: 48px;
  }
}

/* 11 ─ Звичайна сторінка і проза ─────────────────────────────────────────── */
.crumbs {
  margin-bottom: 16px;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
}
.crumbs li + li::before {
  content: "/";
  margin-inline: 8px;
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  background: var(--ink);
  color: var(--white);
}
.phead {
  padding-block: clamp(22px, 3.4vw, 40px) clamp(26px, 4vw, 48px);
  background: var(--yel);
  border-block: var(--b);
}
.phead h1 {
  font-size: clamp(48px, 8vw, 112px);
}
.phead mark {
  --mk: var(--white);
}
.phead__k {
  margin-bottom: 4px;
}
.phead .lede {
  margin-top: 14px;
}
.phead__meta {
  margin-top: 16px;
}
.phead--author .phead__in {
  display: grid;
  gap: 28px;
  align-items: center;
}
.phead__me {
  display: grid;
  justify-items: start;
  gap: 22px;
}
@media (min-width: 960px) {
  .phead--author .phead__in {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
  }
  .phead .ava--xxl {
    width: 230px;
    height: 230px;
    font-size: 132px;
  }
}
.pbody,
.rbody {
  padding-block: clamp(30px, 5vw, 60px) clamp(48px, 7vw, 96px);
}
.pbody__main,
.rbody__main {
  min-width: 0;
  max-width: 780px;
}
.pbody:not(.pbody--toc) .pbody__main {
  margin-inline: auto;
}
.pbody__aside,
.rbody__aside {
  margin-bottom: 30px;
}
@media (min-width: 1040px) {
  .pbody--toc,
  .rbody {
    display: grid;
    grid-template-columns: 260px minmax(0, 780px);
    gap: 64px;
    justify-content: center;
  }
  .toc {
    position: sticky;
    top: 20px;
  }
}
.toc {
  padding: 14px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
}
.toc ol {
  margin-top: 8px;
  counter-reset: toc;
}
.toc li {
  counter-increment: toc;
}
.toc a {
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font: 700 12px/1.7 var(--f-m);
}
.toc a:hover {
  background: var(--paper);
}
.toc a.is-active {
  background: var(--yel);
}

.prose {
  font-size: 18px;
  line-height: 1.62;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  margin-top: 1.5em;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.18;
  scroll-margin-top: 20px;
}
.prose > h2:first-child {
  margin-top: 0;
}
.prose h2.h-suit {
  display: flex;
  align-items: center;
  gap: 14px;
}
.prose h2 .su {
  flex: none;
  width: 58px;
  padding: 8px 0 7px;
  gap: 5px;
  border-width: 3px;
  box-shadow: var(--sh-s);
  font-size: 16px;
  letter-spacing: 0;
  transform: rotate(-4deg);
}
.su[data-v]::after {
  content: attr(data-v);
  font-weight: 700;
}
.prose h2 .su .ic {
  width: 18px;
  height: 18px;
}
.prose h3 {
  margin-top: 1.6em;
  font-size: 23px;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 0.7em;
}
.prose a {
  font-weight: 700;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 3px;
}
.prose a:hover {
  background: var(--yel);
}
.prose strong {
  font-weight: 700;
}
.prose ul:not([class]),
.prose ol:not([class]) {
  display: grid;
  gap: 0.45em;
}
.prose ul:not([class]) > li,
.prose ol:not([class]) > li {
  position: relative;
  padding-left: 1.7em;
}
.prose ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.52em;
  width: 0.6em;
  height: 0.6em;
  background: var(--ink);
}
.prose ol:not([class]) {
  counter-reset: li;
}
.prose ol:not([class]) > li {
  counter-increment: li;
}
.prose ol:not([class]) > li::before {
  content: counter(li) ".";
  position: absolute;
  left: 0;
  font: 700 0.9em/1.8 var(--f-m);
}
.prose blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 20px;
  border-left: 8px solid var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.table-wrap {
  overflow-x: auto;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.35;
}
.prose caption {
  padding: 10px 14px;
  text-align: left;
  font: 700 12px/1.4 var(--f-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--paper);
  border-bottom: var(--b);
}
.prose th,
.prose td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: var(--b2);
  white-space: nowrap;
}
.prose td:last-child {
  white-space: normal;
  min-width: 14em;
}
.prose thead th {
  background: var(--ink);
  color: var(--paper);
  font: 700 12px/1.4 var(--f-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prose tbody tr:last-child > * {
  border-bottom: 0;
}
.prose tbody th {
  font-weight: 700;
}
.prose tbody tr:hover > * {
  background: var(--paper);
}
/* Журнал тесту — «чек». */
.table-wrap--tx {
  box-shadow: 8px 8px 0 var(--grn);
}
.prose .txlog {
  font: 400 14px/1.4 var(--f-m);
}
.prose .txlog caption {
  background: var(--mint);
}
.prose .txlog thead th {
  background: var(--white);
  color: var(--ink);
  border-bottom: var(--b);
}
.prose .txlog th,
.prose .txlog td {
  border-bottom: 2px dashed var(--ink);
}
.prose .txlog td:last-child {
  min-width: 0;
  white-space: nowrap;
  font-weight: 700;
}
.ok {
  color: var(--grn);
}
.ok::before {
  content: "✓ ";
}

/* Блоки уваги — наліпки з ярликом. */
.callout {
  --c: var(--sky);
  position: relative;
  margin-top: 1.9em !important;
  padding: 24px 18px 16px;
  border: var(--b);
  background: var(--c);
  box-shadow: var(--sh);
  font-weight: 600;
  line-height: 1.45;
}
.callout::before {
  content: "Dobro vedeti";
  position: absolute;
  top: -17px;
  left: 14px;
  padding: 4px 11px 2px;
  background: var(--ink);
  color: var(--paper);
  font: 400 18px/1.25 var(--f-d);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-3deg);
}
.callout--tip {
  --c: var(--mint);
}
.callout--tip::before {
  content: "Nasvet";
}
.callout--warn {
  --c: var(--pink);
}
.callout--warn::before {
  content: "Pazi!";
}
.callout--gold {
  --c: var(--yel);
}
.callout--gold::before {
  content: "Iz mojega testa";
}
.callout[data-label]::before {
  content: attr(data-label);
}
.prose .says {
  margin-block: 1.7em;
}
.prose .says__b {
  font-size: 20px;
}
.prose .says__who {
  margin-top: 22px;
}
.prose .says .ava {
  width: 44px;
  height: 44px;
  font-size: 24px;
}
.prose .says__who b {
  font-size: 20px;
}
.prose .steps {
  counter-reset: st;
  display: grid;
  gap: 12px;
}
.prose .steps li {
  counter-increment: st;
  position: relative;
  padding: 13px 16px 13px 68px;
  border: var(--b);
  background: var(--white);
}
.prose .steps li::before {
  content: counter(st);
  position: absolute;
  left: -3px;
  top: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 54px;
  background: var(--ink);
  color: var(--yel);
  font: 400 28px/1 var(--f-d);
}
.prose .timeline {
  display: grid;
  margin-left: 6px;
  border-left: 5px solid var(--ink);
}
.prose .timeline li {
  position: relative;
  padding: 0 0 26px 24px;
}
.prose .timeline li:last-child {
  padding-bottom: 0;
}
.prose .timeline time {
  display: inline-block;
  margin-left: -34px;
  padding: 2px 10px 0;
  border: var(--b);
  background: var(--yel);
  font: 400 22px/1.3 var(--f-d);
  transform: rotate(-3deg);
}
.prose .timeline strong {
  display: block;
  margin-top: 8px;
  font: 400 26px/1.25 var(--f-d);
  text-transform: uppercase;
}
.prose .timeline p {
  margin-top: 2px;
  font-size: 17px;
}
.prose .faq {
  margin-top: 1em;
}
.prose .help .hd3 {
  margin-top: 2px;
  font: 400 30px/1.2 var(--f-d);
  text-transform: uppercase;
}
.prose .help p:last-child {
  font-size: 16px;
  line-height: 1.45;
}
@media (min-width: 760px) {
  .help--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.authorbox {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 48px;
  padding: 20px;
  border: var(--b);
  background: var(--sky);
  box-shadow: var(--sh);
}
.authorbox__n {
  font: 400 30px/1.25 var(--f-d);
  text-transform: uppercase;
}
.authorbox div > p:not([class]) {
  margin-block: 4px 14px;
  font-size: 16px;
}

/* 12 ─ Огляд ─────────────────────────────────────────────────────────────── */
.rhero {
  padding-block: clamp(18px, 3vw, 30px) clamp(26px, 4vw, 44px);
  background: var(--tc);
  border-top: var(--b);
}
.rhero__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 18px;
  align-items: center;
}
.rhero__tier {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  width: 92px;
  padding: 8px 6px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--white);
  transform: rotate(-3deg);
}
.rhero__tier b {
  font: 400 64px/1 var(--f-d);
  color: var(--tc);
}
.rhero__tier .mono {
  font-size: 9px;
}
.rhero__tier .mono:last-child {
  display: none;
}
.rhero__text {
  grid-column: 1 / -1;
}
.rhero h1 {
  margin-top: 6px;
  font-size: clamp(34px, 4.7vw, 68px);
}
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.byline b {
  display: block;
  font-weight: 700;
}
.rhero__logo {
  position: relative;
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  width: min(100%, 210px);
  margin-right: 12px;
}
.rhero__logo .lg {
  border: var(--b);
  box-shadow: var(--sh);
  transform: rotate(3deg);
}
.rhero__logo .burst {
  position: absolute;
  right: -18px;
  bottom: -30px;
  --bs: 78px;
  background: var(--white);
}
@media (min-width: 900px) {
  .rhero__grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 36px;
  }
  .rhero__tier {
    width: 170px;
    padding: 14px 10px 16px;
    gap: 4px;
  }
  .rhero__tier b {
    font-size: 150px;
    line-height: 0.95;
  }
  .rhero__tier .mono {
    font-size: 12px;
  }
  .rhero__tier .mono:last-child {
    display: block;
  }
  .rhero__text {
    grid-column: auto;
  }
  .rhero__logo {
    grid-row: auto;
    grid-column: auto;
    width: 300px;
    margin-right: 26px;
  }
  .rhero__logo .burst {
    --bs: 118px;
    right: -34px;
    bottom: -46px;
  }
}

.offerbar {
  background: var(--ink);
  color: var(--paper);
  border-block: var(--b);
}
.offerbar__in {
  display: grid;
  gap: 16px;
  padding-block: 18px 20px;
}
.offerbar__main .mono {
  color: var(--pink);
}
.offerbar__h {
  font: 400 clamp(36px, 4.8vw, 60px) / 1.15 var(--f-d);
  text-transform: uppercase;
  color: var(--yel);
}
.offerbar__h span {
  display: block;
  font: 700 18px/1.3 var(--f-b);
  text-transform: none;
  color: var(--paper);
}
.offerbar__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.offerbar__terms li {
  padding: 7px 12px 6px;
  border: 2px solid var(--paper);
}
.offerbar__terms span {
  display: block;
  opacity: 0.7;
  font-size: 10px;
}
.offerbar__terms b {
  font-size: 16px;
}
.offerbar__cta {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.offerbar .go--lg {
  box-shadow: 6px 6px 0 var(--pink);
}
.offerbar .go--lg:hover {
  box-shadow: 8px 8px 0 var(--pink);
}
.offerbar small {
  opacity: 0.7;
}
@media (min-width: 900px) {
  .offerbar__in {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 36px;
    align-items: center;
  }
  .offerbar__cta {
    justify-items: center;
  }
}

.rtop {
  display: grid;
  gap: 30px;
  padding-top: clamp(30px, 4.5vw, 56px);
}
.says--verdict .says__b {
  font-size: 20px;
  background: var(--white);
}
.cards4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  scroll-margin-top: 20px;
}
.card4 {
  padding: 12px 14px 14px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
}
.card4__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card4__top .ic {
  width: 22px;
  height: 22px;
  color: var(--sc);
}
.card4__v {
  font: 400 clamp(48px, 6vw, 72px) / 1.05 var(--f-d);
  color: var(--sc);
}
.card4__n {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.card4:nth-child(odd) {
  transform: rotate(-1deg);
}
.card4:nth-child(even) {
  transform: rotate(1deg);
}
.rtop__cols {
  display: grid;
  gap: 20px;
}
.facts {
  padding: 6px 16px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
}
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 2px dashed var(--ink);
  font-size: 16px;
}
.facts > div:last-child {
  border-bottom: 0;
}
.facts dt {
  font: 700 12px/1.9 var(--f-m);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.facts dd {
  font-weight: 700;
  text-align: right;
}
.pcbox {
  padding: 16px 18px 18px;
  border: var(--b);
  box-shadow: var(--sh-s);
}
.pcbox--pro {
  background: var(--mint);
}
.pcbox--con {
  background: var(--rose);
}
.pcbox .hd2 {
  margin-bottom: 12px;
  font-size: 30px;
  line-height: 1.2;
}
@media (min-width: 1000px) {
  .rtop {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 36px 44px;
    align-items: start;
  }
  .cards4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .rtop__cols {
    grid-column: 1 / -1;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 24px;
  }
}

.verdict {
  display: grid;
  margin-top: 52px;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-l);
  scroll-margin-top: 20px;
}
.verdict__tier {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 6px;
  background: var(--tc);
  border-bottom: var(--b);
}
.verdict__tier b {
  font: 400 60px/1.1 var(--f-d);
}
.verdict__body {
  padding: 18px 18px 22px;
}
.verdict h2 {
  margin-block: 4px 10px;
  font-size: clamp(34px, 4.4vw, 52px);
}
.verdict .suits {
  max-width: 340px;
  margin-top: 16px;
}
.verdict__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 22px;
}
.verdict__act small {
  max-width: 34ch;
}
@media (min-width: 700px) {
  .verdict {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .verdict__tier {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0;
    border-bottom: 0;
    border-right: var(--b);
  }
  .verdict__tier b {
    font-size: 150px;
    line-height: 1;
  }
  .verdict__body {
    padding: 22px 24px 26px;
  }
}

.mts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
}
.mt {
  position: relative;
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-s);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mt:hover {
  transform: translate(-2px, -2px) rotate(-0.8deg);
  box-shadow: var(--sh);
}
.mt a {
  display: block;
  text-decoration: none;
}
.mt .lg {
  border-bottom: var(--b);
}
.mt__n {
  display: block;
  padding: 6px 10px;
  font: 400 19px/1.3 var(--f-d);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt .burst {
  position: absolute;
  top: -18px;
  right: -12px;
}
@media (min-width: 700px) {
  .mts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .mts {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }
}

.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-top: 4px solid var(--yel);
  transform: translateY(110%);
  transition: transform 0.22s ease;
}
.stickybar.is-on {
  transform: none;
}
.stickybar__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px calc(10px + env(safe-area-inset-bottom));
}
.stickybar .tchip {
  color: var(--ink);
  border-color: var(--paper);
}
.stickybar .lg {
  width: 78px;
  flex: none;
}
.stickybar p {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stickybar p strong {
  font: 400 22px/1.2 var(--f-d);
  text-transform: uppercase;
  color: var(--yel);
}
.stickybar p span {
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 599px) {
  .stickybar .tchip,
  .stickybar p span {
    display: none;
  }
}

/* 13 ─ Список оглядів і 404 ──────────────────────────────────────────────── */
.rlist {
  border: var(--b);
  background: var(--white);
  box-shadow: var(--sh-l);
}
.rlist__i {
  position: relative;
  display: grid;
  grid-template-columns: auto 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: var(--b2);
}
.rlist__i:last-child {
  border-bottom: 0;
}
.rlist__i:hover {
  background: var(--yel);
}
.rlist__t h2 {
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.25;
  text-wrap: pretty;
}
.rlist__t a {
  text-decoration: none;
}
.rlist__t a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.rlist__t .mono {
  margin-top: 2px;
  font-weight: 400;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rlist__s {
  font: 400 34px/1 var(--f-d);
}
@media (min-width: 760px) {
  .rlist__i {
    grid-template-columns: auto 120px minmax(0, 1fr) auto;
    gap: 20px;
    padding: 12px 20px;
  }
}
.nf {
  padding-block: clamp(48px, 9vw, 110px);
}
.nf .wrap {
  display: grid;
  justify-items: start;
  gap: 20px;
}
.nf__tier {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nf__tier b {
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  background: var(--ink);
  color: var(--red);
  font: 400 110px/1 var(--f-d);
  transform: rotate(-5deg);
}

/* 14 ─ Рух ───────────────────────────────────────────────────────────────── */
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
@keyframes pop {
  from {
    transform: scale(0.94) rotate(-1.5deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .top .nav,
  .burger,
  .mq,
  .tl__bar,
  .stickybar {
    display: none !important;
  }
}