/* Skip-Bo — палитра снята с пикселей фирменного баннера стора (лого #f29f27/#ea8929, обводка #2a3182/#242666,
   поле #209046→#85bb41, красная карта #9f1d21, зелёная карта #057b44) */
@layer base, frame, parts, pages;

@layer base {
  :root {
    --sk-navy: #242666; --sk-navy-2: #2a3182; --sk-ink: #1b1c42; --sk-mute: #575b80; --sk-line: #e2e4ef; --sk-mist: #f4f5f9;
    --sk-orange: #f29f27; --sk-orange-2: #ea8929; --sk-sun: #ffc45a; --sk-field: #209046; --sk-lime: #85bb41;
    --sk-red: #9f1d21; --sk-deep-green: #057b44; --sk-coal: #0e0f22; --sk-paper: #fff;
    --sk-shell: 1240px; --sk-r: 14px; --sk-head: "Exo 2", "Trebuchet MS", sans-serif; --sk-body: "Figtree", "Segoe UI", sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; font: 400 17px/1.6 var(--sk-body); color: var(--sk-ink); background: var(--sk-paper); overflow-x: hidden; }
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--sk-navy-2); text-underline-offset: 3px; }
  h1, h2, h3 { font-family: var(--sk-head); color: var(--sk-ink); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
  h1 { font-weight: 900; font-size: clamp(2rem, 4.4vw, 3.4rem); }
  h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.45rem); }
  h3 { font-weight: 800; font-size: 1.22rem; }
  p { margin: 0 0 1em; }
  .wrap { width: min(var(--sk-shell), 100% - 32px); margin-inline: auto; }
  button { font: inherit; }
}

@layer frame {
  /* шапка (skipbo.mattel163.com: тёмно-синяя полоса, лого слева, прописное меню) */
  .tbar { background: var(--sk-navy); position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
  .tbar-in { width: min(var(--sk-shell), 100% - 32px); margin-inline: auto; min-height: 72px; display: flex; align-items: center; gap: 28px; }
  .tbar-logo img { height: 48px; width: auto; }
  .tbar-nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
  .tbar-nav a { color: #fff; text-decoration: none; font: 800 .98rem/1 var(--sk-head); text-transform: uppercase; letter-spacing: .02em; padding: 10px 14px; border-radius: 8px; }
  .tbar-nav a:hover { background: rgba(255,255,255,.12); }
  .tbar-deal { width: 200px; flex: none; }
  @media (max-width: 1040px) {
    .tbar-in { gap: 12px; min-height: 64px; flex-wrap: wrap; }
    .tbar-logo img { height: 40px; }
    .tbar-deal { width: 170px; margin-left: auto; }
    .tbar-nav { order: 3; flex-basis: 100%; gap: 6px; padding: 0 0 10px; margin-top: -4px; }
    .tbar-nav a { padding: 8px 12px; font-size: .84rem; background: rgba(255,255,255,.1); }
  }
  @media (max-width: 400px) { .tbar-logo img { height: 32px; } .tbar-deal { width: 168px; } .tbar-nav a { padding: 8px 10px; font-size: .8rem; } }
  @media (max-width: 720px) { .tbar { position: static; } }

  /* подвал (skipbo.mattel163.com: чёрный; toyboxmichigan.com: колонка адреса) */
  .felt { background: var(--sk-coal); color: #c9cbe0; margin-top: 72px; }
  .felt-in { width: min(var(--sk-shell), 100% - 32px); margin-inline: auto; padding: 56px 0 32px; display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: 32px; }
  .felt-brand img { height: 56px; width: auto; margin-bottom: 14px; }
  .felt-slogan { font: 800 1.3rem/1.2 var(--sk-head); color: var(--sk-orange); }
  .felt-addr { font-size: .95rem; }
  .felt a { color: #fff; text-decoration: none; }
  .felt a:hover { text-decoration: underline; }
  .felt-h { font: 800 .9rem/1 var(--sk-head); text-transform: uppercase; color: #fff; letter-spacing: .04em; margin-bottom: 14px; }
  .felt ul { list-style: none; margin: 0; padding: 0; }
  .felt li { margin: 0 0 6px; }
  .felt li a { display: inline-block; padding: 4px 0; font-size: .96rem; }
  .felt-base { border-top: 1px solid rgba(255,255,255,.14); width: min(var(--sk-shell), 100% - 32px); margin-inline: auto; padding: 18px 0 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .88rem; color: #9496b5; }
  @media (max-width: 900px) { .felt-in { grid-template-columns: 1fr 1fr; } .felt-brand { grid-column: 1 / -1; } }
  @media (max-width: 480px) { .felt-in { grid-template-columns: 1fr; } }

  /* крошки (toyboxmichigan.com) */
  .trail { width: min(var(--sk-shell), 100% - 32px); margin: 18px auto 0; font-size: .85rem; }
  .trail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
  .trail li + li::before { content: "›"; margin: 0 8px; color: var(--sk-mute); }
  .trail a { color: var(--sk-mute); text-decoration: none; display: inline-block; padding: 6px 0; }
  .trail [aria-current] { color: var(--sk-ink); padding: 6px 0; }

  /* нижняя полоса на телефоне */
  .dock { display: none; }
  @media (max-width: 1040px) {
    .dock { display: flex; align-items: center; gap: 12px; position: fixed; inset: auto 0 0 0; z-index: 40; background: var(--sk-navy);
            padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(0,0,0,.25); }
    .dock-txt { flex: 1; min-width: 0; color: #fff; line-height: 1.25; }
    .dock-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 .86rem/1.2 var(--sk-head); }
    .dock-txt span { font-size: .82rem; color: var(--sk-sun); }
    .deal-dock { width: 172px; flex: none; }
    body.has-dock { padding-bottom: 84px; }
    .has-dock .tbar-deal { display: none; }
  }
}

@layer parts {
  /* кнопка-штамп */
  .deal { display: block; border: 0; background: none; padding: 0; line-height: 0; cursor: pointer; width: min(300px, 100%); transition: transform .15s; }
  .deal img { width: 100%; height: auto; }
  .deal:hover { transform: translateY(-2px); }
  .deal:focus-visible { outline: 3px solid var(--sk-orange); outline-offset: 4px; border-radius: 40px; }
  .deal-top { width: 100%; }
  .deal-hero { width: min(360px, 100%); }
  .deal-tile, .deal-main { width: 100%; }

  .pips { display: inline-block; font-size: 1rem; letter-spacing: 1px; line-height: 1;
          background: linear-gradient(90deg, var(--sk-orange) var(--fill), #cfd1de var(--fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .ghost { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sk-navy-2); }
  .inkbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 10px; background: #000; color: #fff; font: 800 1.1rem/1 var(--sk-head); text-decoration: none; }
  .inkbtn svg { width: 22px; height: 22px; }

  .chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--sk-navy); color: var(--sk-navy); font-weight: 700; text-decoration: none; background: #fff; }
  .chip small { background: var(--sk-navy); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .78rem; }
  .chip:hover, .chip-on { background: var(--sk-navy); color: #fff; }

  /* карточка товара в сетке (toyboxmichigan.com) */
  .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
  .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { display: flex; flex-direction: column; min-width: 0; }
  .tile-pic { display: grid; place-items: center; aspect-ratio: 1; background: var(--sk-mist); border-radius: var(--sk-r); padding: 14px; margin-bottom: 12px; }
  .tile-pic { overflow: hidden; position: relative; }
  .tile-pic img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; mix-blend-mode: multiply; }
  .tile-line { margin: 0 0 2px; font-size: .84rem; color: var(--sk-mute); }
  .tile-name { font: 800 1.08rem/1.25 var(--sk-head); margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--sk-line); }
  .tile-name a { color: var(--sk-ink); text-decoration: none; }
  .tile-name a:hover { color: var(--sk-navy-2); text-decoration: underline; }
  .tile-rate { font-size: .85rem; color: var(--sk-mute); margin-bottom: 4px; }
  .tile-cost { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .tile-cost b { font: 800 1.3rem/1 var(--sk-head); }
  .tile .deal { margin-top: auto; }
  .mark { font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
  .mark-ok { background: #e3f3e8; color: var(--sk-deep-green); }
  .mark-few { background: #fdecd6; color: #9a4b07; }
  .mark-wait, .mark-pre { background: #e7e8f6; color: var(--sk-navy-2); }
  .mark-out { background: #f6e1e1; color: var(--sk-red); }
  @media (max-width: 1040px) { .tiles, .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 760px) { .tiles, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .tile-name { font-size: .98rem; } }

  /* игральная карта (skipbo.mattel163.com: белые карты с синими цифрами) */
  .pc { position: relative; width: 120px; aspect-ratio: 5 / 7; background: #fff; border-radius: 12px; border: 3px solid #d7dae8;
        box-shadow: 0 8px 20px rgba(10,20,60,.22); display: grid; place-items: center; overflow: hidden; }
  .pc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--sk-navy-2) 0 26%, transparent 26% 74%, var(--sk-navy-2) 74%); opacity: .95; }
  .pc-big { position: relative; font: 900 3.4rem/1 var(--sk-head); color: var(--sk-navy-2); text-shadow: 0 0 0 #fff; }
  .pc-c { position: absolute; top: 6px; left: 9px; font: 900 1.1rem/1 var(--sk-head); color: #fff; z-index: 1; }
  .pc-c2 { top: auto; left: auto; bottom: 6px; right: 9px; transform: rotate(180deg); }
  .pc-wild { background: var(--sk-orange); border-color: #fff; }
  .pc-wild::before { background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0 6px, transparent 6px 14px); }
  .pc-wild .pc-big { font-size: 1.9rem; text-align: center; color: var(--sk-navy); line-height: .95; }
  .pc-wild .pc-c { color: var(--sk-navy); }

  .wave { display: block; width: 100%; height: 70px; }
  .wave path { fill: #fff; }

  /* отзывы */
  .says { margin-top: 72px; }
  .says-sub { color: var(--sk-mute); margin-top: -6px; }
  .says-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .say { margin: 0; background: var(--sk-mist); border-radius: var(--sk-r); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
  .say-top { display: flex; flex-direction: column; gap: 6px; }
  .say-top b { font: 800 1.05rem/1.25 var(--sk-head); }
  .say blockquote { margin: 0; font-size: .97rem; flex: 1; }
  .say figcaption { font-size: .85rem; color: var(--sk-mute); }
  @media (max-width: 900px) { .says-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .says-grid { grid-template-columns: 1fr; } }

  /* SEO-раздел (wirecutter) */
  .essay { max-width: 820px; margin-top: 72px; }
  .essay h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .essay h3 { margin-top: 1.4em; font-size: 1.35rem; }

  /* FAQ */
  .asks { width: min(820px, 100% - 32px); margin: 56px auto 0; }
  .ask { border-bottom: 1px solid var(--sk-line); }
  .ask summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 800 1.08rem/1.35 var(--sk-head); }
  .ask summary::-webkit-details-marker { display: none; }
  .ask summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 900 1.6rem/1 var(--sk-head); color: var(--sk-orange-2); }
  .ask[open] summary::after { content: "–"; }
  .ask p { margin: 0 0 18px; color: #34365c; }
}

@layer pages {
  .buy > *, .rack > *, .sort > * { min-width: 0; }

  .shelf { margin-top: 72px; }
  .shelf-head { margin-bottom: 26px; }
  .shelf-head p { color: var(--sk-mute); max-width: 52em; }

  /* полоса раздела (quokka.com) */
  .band { background: radial-gradient(circle at 50% 0, var(--sk-navy-2), var(--sk-navy) 70%); color: #fff; text-align: center; padding: 48px 16px 40px; margin-top: 14px; }
  .band h1 { color: #fff; }
  .band-rate { font-weight: 700; }
  .band-lede { max-width: 46em; margin-inline: auto; color: #dfe1f5; }
  .chips-band { justify-content: center; }
  .chips-band .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
  .chips-band .chip-on, .chips-band .chip:hover { background: #fff; color: var(--sk-navy); }

  /* фильтр (toyboxmichigan.com) */
  .sort { display: grid; grid-template-columns: 240px 1fr; gap: 36px; margin-top: 36px; align-items: start; }
  .sift { border-right: 1px solid var(--sk-line); padding-right: 22px; }
  .sift summary { font: 800 1.1rem/1 var(--sk-head); padding: 6px 0 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
  .sift summary::-webkit-details-marker { display: none; }
  .sift-n { font: 600 .85rem/1 var(--sk-body); color: var(--sk-mute); }
  .sift fieldset { border: 0; border-top: 1px solid var(--sk-line); margin: 0; padding: 14px 0; }
  .sift legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
  .sift label { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
  .sift input { width: 18px; height: 18px; accent-color: var(--sk-navy); }
  .tile.is-gone { display: none; }
  @media (max-width: 860px) { .sort { grid-template-columns: 1fr; gap: 16px; } .sift { border: 1px solid var(--sk-line); border-radius: var(--sk-r); padding: 10px 16px; } }

  /* PDP (quokka.com) */
  .buy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin-top: 22px; align-items: start; }
  .rack { display: grid; grid-template-columns: 84px 1fr; gap: 16px; position: sticky; top: 96px; }
  .rack-big { grid-column: 2; grid-row: 1; background: var(--sk-mist); border-radius: 20px; padding: 24px; display: grid; place-items: center; aspect-ratio: 1; }
  .rack-big { overflow: hidden; position: relative; }
  .rack-big img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; mix-blend-mode: multiply; }
  .rack-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
  .rack-th { border: 2px solid var(--sk-line); border-radius: 10px; background: #fff; padding: 4px; cursor: pointer; aspect-ratio: 1; }
  .rack-th img { width: 100%; height: 100%; object-fit: contain; }
  .rack-on { border-color: var(--sk-navy); }
  .buy-line { margin: 0 0 6px; font-weight: 700; font-size: .9rem; }
  .buy-line a { color: var(--sk-orange-2); text-decoration: none; }
  .buy h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
  .buy-rate { display: flex; align-items: center; gap: 8px; color: var(--sk-mute); }
  .buy-rate .pips { font-size: 1.15rem; }
  .buy-cost { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
  .buy-cost b { font: 900 2rem/1 var(--sk-head); }
  .buy-note { font-size: .84rem; color: var(--sk-mute); margin: 10px 0 14px; }
  .buy-facts { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
  .buy-facts li { background: var(--sk-mist); border-radius: 8px; padding: 6px 12px; font-size: .92rem; }
  .fold { border-top: 1px solid var(--sk-line); }
  .fold:last-of-type { border-bottom: 1px solid var(--sk-line); }
  .fold summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 0; font-weight: 700; }
  .fold summary::-webkit-details-marker { display: none; }
  .fold summary svg { width: 22px; height: 22px; flex: none; color: var(--sk-navy); }
  .fold summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--sk-mute); border-bottom: 2px solid var(--sk-mute); transform: rotate(45deg); transition: transform .2s; }
  .fold[open] summary::after { transform: rotate(-135deg); }
  .fold-b { padding: 0 0 14px 34px; color: #34365c; }
  .tale { background: var(--sk-mist); border-radius: 22px; padding: 36px clamp(18px, 4vw, 56px); margin-top: 56px; }
  .tale-lede { font-size: 1.1rem; }
  .tale-list { padding-left: 1.2em; }
  .tale-list li { margin-bottom: 6px; }
  .tale-list li::marker { color: var(--sk-orange-2); }
  @media (max-width: 900px) {
    .buy { grid-template-columns: 1fr; gap: 24px; }
    .rack { position: static; grid-template-columns: 1fr; }
    .rack-big { grid-column: 1; }
    .rack-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
    .rack-th { width: 64px; }
  }

  /* статьи */
  .read { max-width: 820px; margin-top: 18px; }
  .read-lede { font-size: 1.15rem; color: #34365c; }
  .read h2 { margin-top: 1.4em; }
  .pick { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; background: var(--sk-mist); border-radius: var(--sk-r); padding: 18px; margin: 24px 0; border-left: 6px solid var(--sk-orange); }
  .pick-pic img { mix-blend-mode: multiply; }
  .pick-k { margin: 0; font-size: .82rem; color: var(--sk-mute); }
  .pick-n { margin: 0 0 4px; font: 800 1.15rem/1.25 var(--sk-head); }
  .pick-n a { color: var(--sk-ink); text-decoration: none; }
  .pick-m { margin: 0 0 10px; font-weight: 700; }
  .read-end { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
  .read-end .pick { grid-template-columns: 1fr; margin: 0; }
  .read-more { margin-top: 36px; border-top: 1px solid var(--sk-line); padding-top: 18px; }
  .read-more p { font: 800 1.1rem/1 var(--sk-head); }
  .read-more a { display: inline-block; padding: 5px 0; }
  @media (max-width: 640px) {
    .pick { grid-template-columns: 92px 1fr; gap: 14px; }
    .read-end { grid-template-columns: 1fr; }
    .read-end .pick { grid-template-columns: 92px 1fr; }
  }

  /* кабинеты */
  .cab { max-width: 780px; margin-top: 18px; }
  .cab h1 { border-bottom: 6px solid var(--sk-orange); display: inline-block; padding-bottom: 6px; }
  .cab ol { counter-reset: r; list-style: none; padding: 0; }
  .cab-terms ol li, .cab-returns ol li { counter-increment: r; position: relative; padding: 4px 0 12px 54px; }
  .cab-terms ol li::before, .cab-returns ol li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 38px; height: 50px; border-radius: 7px; background: #fff;
       border: 2px solid var(--sk-navy-2); color: var(--sk-navy-2); font: 900 1.3rem/46px var(--sk-head); text-align: center; }
  .terms { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; }
  .terms dt { font-weight: 800; }
  .terms dd { margin: 0; }
  .post { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
  .post p { background: var(--sk-mist); border-radius: var(--sk-r); padding: 18px; margin: 0; overflow-wrap: anywhere; }
  .cab-date { color: var(--sk-mute); font-size: .9rem; margin-top: 28px; }
  @media (max-width: 640px) { .post { grid-template-columns: 1fr; } .terms { grid-template-columns: 1fr; gap: 2px; } .terms dd { margin-bottom: 10px; } }

  .lost { text-align: center; padding: 56px 0 0; }
  .lost-cards { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; }
  .lost-cards .pc { width: 90px; }
  .lost p:last-child { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
}

@layer parts {
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@layer pages {
  /* главная: игровой стол «как играть за 3 хода» (skipbo.mattel163.com: зелёное поле и карты 1→12) */
  .sk-table { color: #fff; padding: 46px 0 56px;
    background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.16), transparent 60%),
                repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
                linear-gradient(180deg, var(--sk-field), #16733a); border-bottom: 10px solid var(--sk-navy); }
  .sk-table-in { width: min(var(--sk-shell), 100% - 32px); margin-inline: auto; text-align: center; }
  .sk-table h1 { color: #fff; max-width: 22em; margin-inline: auto; font-size: clamp(1.9rem, 3.8vw, 3rem); text-shadow: 0 3px 0 var(--sk-navy); }
  .sk-lede { max-width: 40em; margin: 0 auto 30px; font-size: 1.12rem; color: #eef8ea; }
  .sk-steps { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; text-align: left; }
  .sk-step { position: relative; background: rgba(8, 40, 22, .32); border: 2px solid rgba(255,255,255,.28); border-radius: 20px; padding: 22px 22px 18px; }
  .sk-num { position: absolute; top: -18px; left: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--sk-orange); color: var(--sk-navy);
            font: 900 1.3rem/40px var(--sk-head); text-align: center; box-shadow: 0 3px 0 var(--sk-navy); }
  .sk-step-h { color: #fff; font-size: 1.35rem; margin: 14px 0 6px; }
  .sk-step p { margin: 0; color: #eef8ea; font-size: .98rem; }
  .sk-ill { height: 150px; display: flex; align-items: center; justify-content: center; position: relative; }
  .sk-ill .pc { width: 78px; flex: none; }
  .sk-ill .pc-big { font-size: 2.2rem; }
  .sk-ill .pc-c { font-size: .8rem; top: 4px; left: 6px; }
  .sk-ill .pc-c2 { top: auto; left: auto; bottom: 4px; right: 6px; }
  .sk-ill .pc-wild .pc-big { font-size: 1.15rem; }
  .sk-back { position: absolute; width: 78px; aspect-ratio: 5 / 7; border-radius: 12px; border: 3px solid #fff;
             background: repeating-linear-gradient(135deg, var(--sk-navy-2) 0 6px, var(--sk-navy) 6px 12px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
  .sk-ill-deal .sk-back:nth-child(1) { transform: translate(-54px, 8px) rotate(-6deg); }
  .sk-ill-deal .sk-back:nth-child(2) { transform: translate(-36px, 5px) rotate(-3deg); }
  .sk-ill-deal .sk-back:nth-child(3) { transform: translate(-18px, 2px); }
  .sk-ill-deal .sk-back:nth-child(4) { transform: translate(0, 0) rotate(2deg); }
  .sk-ill-deal .pc { transform: translate(40px, -6px) rotate(6deg); }
  .sk-ill-climb .pc { margin-left: -46px; }
  .sk-ill-climb .pc:first-child { margin-left: 0; }
  .sk-ill-climb .pc:nth-child(2) { transform: translateY(-8px); } .sk-ill-climb .pc:nth-child(3) { transform: translateY(-16px); }
  .sk-ill-climb .pc:nth-child(4) { transform: translateY(-24px); } .sk-ill-climb .pc:nth-child(5) { transform: translateY(-32px); }
  .sk-ill-wild .pc { margin: 0 -6px; }
  .sk-ill-wild .pc:nth-child(1) { transform: rotate(-8deg); } .sk-ill-wild .pc:nth-child(2) { transform: translateY(-10px) scale(1.08); z-index: 1; }
  .sk-ill-wild .pc:nth-child(3) { transform: rotate(8deg); }

  .sk-deck { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 22px; align-items: center; text-align: left;
             background: #fff; color: var(--sk-ink); border-radius: 22px; padding: 16px 22px; box-shadow: 0 18px 40px rgba(0,30,10,.35); max-width: 980px; margin: 0 auto; }
  .sk-deck-pic { display: block; background: var(--sk-mist); border-radius: 14px; aspect-ratio: 1; position: relative; overflow: hidden; }
  .sk-deck-pic img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; mix-blend-mode: multiply; }
  .sk-deck-k { margin: 0; font: 800 .8rem/1.2 var(--sk-head); text-transform: uppercase; letter-spacing: .08em; color: var(--sk-orange-2); }
  .sk-deck-n { margin: 2px 0 4px; font: 900 1.4rem/1.2 var(--sk-head); }
  .sk-deck-n a { color: var(--sk-ink); text-decoration: none; }
  .sk-deck-f { margin: 0 0 4px; color: var(--sk-mute); }
  .sk-deck-rate { font-size: .9rem; color: var(--sk-mute); }
  .sk-deck-buy { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 300px; }
  .sk-deck-cost { margin: 0; display: flex; align-items: center; gap: 10px; }
  .sk-deck-cost b { font: 900 1.9rem/1 var(--sk-head); }
  .sk-rules { font-weight: 700; font-size: .95rem; }

  /* издания обложками (quokka.com: полки игр коробками) */
  #editions, #scorepad, #rules { scroll-margin-top: 90px; }
  .sk-shelves { margin-top: 64px; }
  .sk-shelves > h2, .sk-pad-wrap > h2, .sk-hands > h2 { text-align: center; }
  .sk-sub { text-align: center; color: var(--sk-mute); max-width: 44em; margin: 0 auto 30px; }
  .sk-shelf { margin-bottom: 40px; }
  .sk-shelf-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; border-bottom: 4px solid var(--sk-navy); padding-bottom: 8px; margin-bottom: 22px; }
  .sk-shelf-h h3 { margin: 0; font-size: 1.5rem; color: var(--sk-navy); }
  .sk-shelf-h a { font-weight: 700; }
  .sk-covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; }
  .sk-cv { display: flex; flex-direction: column; min-width: 0; }
  .sk-cv-box { display: block; position: relative; aspect-ratio: 1; background: linear-gradient(160deg, #fff, var(--sk-mist)); border-radius: 10px;
               box-shadow: 0 1px 0 #d3d5e6, 8px 10px 0 -2px #e6e8f3, 0 16px 28px rgba(20,24,80,.14); transform: perspective(700px) rotateY(-5deg); transition: transform .2s; }
  .sk-cv-box:hover { transform: perspective(700px) rotateY(0deg) translateY(-3px); }
  .sk-cv-box img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; mix-blend-mode: multiply; }
  .sk-cv-n { margin: 16px 0 2px; font: 800 1.06rem/1.25 var(--sk-head); }
  .sk-cv-n a { color: var(--sk-ink); text-decoration: none; }
  .sk-cv-f { margin: 0 0 2px; font-size: .88rem; color: var(--sk-mute); }
  .sk-cv-rate { font-size: .85rem; color: var(--sk-mute); }
  .sk-cv-cost { margin: 8px 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .sk-cv-cost b { font: 800 1.3rem/1 var(--sk-head); }
  .sk-cv .deal { margin-top: auto; }

  /* таблица на листе блокнота для счёта */
  .sk-pad-wrap { margin-top: 30px; }
  .sk-pad { width: 100%; border-collapse: collapse; font-size: .95rem; background:
            linear-gradient(90deg, transparent 54px, rgba(159,29,33,.45) 54px 56px, transparent 56px), #fffdf4;
            border-radius: 6px; box-shadow: 0 2px 0 #e9e2c6, 0 14px 30px rgba(20,24,80,.12); }
  .sk-pad thead th { text-align: left; padding: 16px 12px 10px; font: 800 .78rem/1.2 var(--sk-head); text-transform: uppercase; letter-spacing: .05em; color: var(--sk-red); border-bottom: 2px solid var(--sk-red); }
  .sk-pad thead th:first-child { padding-left: 70px; }
  .sk-pad tbody th, .sk-pad td { padding: 10px 12px; border-bottom: 1px solid #c9d6ef; text-align: left; vertical-align: middle; font-weight: 400; }
  .sk-pad tbody th[scope=row] { padding-left: 70px; }
  .sk-pad-line th { padding: 18px 12px 6px 70px !important; font: 900 1.05rem/1.2 var(--sk-head); color: var(--sk-navy); border-bottom: 2px solid var(--sk-navy) !important; }
  .sk-pad th a { display: flex; align-items: center; gap: 12px; font: 800 .98rem/1.25 var(--sk-head); color: var(--sk-ink); text-decoration: none; }
  .sk-pad-img { width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; flex: none; }
  .sk-pad small { color: var(--sk-mute); }
  .sk-pad .pips { font-size: .82rem; }
  .sk-pad-cost { font: 800 1.12rem/1.2 var(--sk-head); }
  .sk-pad-deal { width: 190px; }
  .deal-pad { width: 180px; }

  /* правила хода и варианты счёта */
  .sk-rules-block { margin-top: 72px; background: var(--sk-navy); color: #dfe1f5; padding: 56px 0; }
  .sk-rules-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; }
  .sk-rules-block h2 { color: #fff; }
  .sk-rules-block a { color: var(--sk-sun); font-weight: 700; }
  .sk-turn ol { counter-reset: t; list-style: none; margin: 0 0 18px; padding: 0; }
  .sk-turn li { counter-increment: t; position: relative; padding: 4px 0 16px 62px; min-height: 64px; }
  .sk-turn li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 42px; height: 58px; border-radius: 8px; background: #fff; color: var(--sk-navy-2);
                        font: 900 1.5rem/58px var(--sk-head); text-align: center; box-shadow: inset 0 0 0 3px #d7dae8; }
  .sk-score dl { margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .sk-way { background: rgba(255,255,255,.07); border-left: 4px solid var(--sk-orange); border-radius: 0 12px 12px 0; padding: 12px 14px; }
  .sk-way dt { font: 800 1.05rem/1.2 var(--sk-head); color: #fff; margin-bottom: 4px; }
  .sk-way dd { margin: 0; font-size: .93rem; }

  /* отзывы игральными картами */
  .sk-hands { margin-top: 72px; }
  .sk-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .sk-rc { position: relative; margin: 0; background: #fff; border: 3px solid #d7dae8; border-radius: 18px; padding: 28px 30px 26px; box-shadow: 0 10px 24px rgba(20,24,80,.12); display: flex; flex-direction: column; gap: 10px; }
  .sk-rc:nth-child(odd) { transform: rotate(-1deg); } .sk-rc:nth-child(even) { transform: rotate(1deg); }
  .sk-rc-i { position: absolute; top: 8px; left: 12px; font: 900 1.3rem/1 var(--sk-head); color: var(--sk-navy-2); }
  .sk-rc-i2 { top: auto; left: auto; bottom: 8px; right: 12px; transform: rotate(180deg); }
  .sk-rc-top { display: flex; flex-direction: column; gap: 4px; }
  .sk-rc-top b { font: 800 1.08rem/1.25 var(--sk-head); }
  .sk-rc blockquote { margin: 0; flex: 1; font-size: .97rem; }
  .sk-rc figcaption { font-size: .85rem; color: var(--sk-mute); }

  /* текст */
  .sk-essay { max-width: 860px; margin-top: 72px; }
  .sk-essay h2 { text-align: center; }
  .sk-essay h3 { margin-top: 1.3em; font-size: 1.35rem; color: var(--sk-navy-2); }
  .sk-banner { width: 100%; border-radius: 18px; margin-top: 30px; }

  @media (max-width: 1040px) {
    .sk-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sk-deck { grid-template-columns: 120px minmax(0, 1fr); }
    .sk-deck-buy { grid-column: 1 / -1; width: auto; }
    .sk-rules-in { grid-template-columns: 1fr; gap: 30px; }
    .sk-hand { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 860px) {
    .sk-steps { grid-template-columns: 1fr; gap: 30px; }
    .sk-ill { height: 128px; }
    .sk-pad, .sk-pad tbody, .sk-pad tr, .sk-pad tbody th, .sk-pad td { display: block; }
    .sk-pad { background: none; box-shadow: none; }
    .sk-pad thead { display: none; }
    .sk-pad tbody tr { background: #fffdf4; border: 1px solid #e9e2c6; border-left: 4px solid rgba(159,29,33,.6); border-radius: 10px; margin: 0 0 14px; padding: 8px 0; }
    .sk-pad tbody tr.sk-pad-line { background: none; border: 0; padding: 0; margin: 22px 0 8px; }
    .sk-pad-line th { padding: 0 0 6px !important; }
    .sk-pad tbody th[scope=row] { padding: 6px 14px 8px; }
    .sk-pad td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 6px 14px; text-align: right; border-bottom: 1px solid #e6eaf4; }
    .sk-pad td::before { content: attr(data-label); font: 700 .72rem/1.3 var(--sk-body); text-transform: uppercase; letter-spacing: .05em; color: var(--sk-red); text-align: left; flex: none; }
    .sk-pad td.sk-pad-deal { display: block; width: auto; border: 0; padding-top: 10px; }
    .sk-pad td.sk-pad-deal::before { content: none; }
    .deal-pad { width: min(320px, 100%); margin: 0 auto; }
  }
  @media (max-width: 640px) {
    .sk-table { padding-top: 30px; }
    .sk-steps { gap: 26px; }
    .sk-step { padding: 18px 18px 14px; }
    .sk-ill { height: 104px; }
    .sk-ill .pc, .sk-back { width: 60px; }
    .sk-ill .pc-big { font-size: 1.7rem; }
    .sk-ill .pc-wild .pc-big { font-size: .9rem; }
    .sk-ill-climb .pc { margin-left: -36px; }
    .sk-step-h { font-size: 1.2rem; margin-top: 8px; }
    .sk-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
    .sk-deck { grid-template-columns: 1fr; text-align: center; padding: 16px; }
    .sk-deck-pic { width: 150px; margin: 0 auto; }
    .sk-deck-buy { width: 100%; }
    .sk-score dl { grid-template-columns: 1fr; }
    .sk-hand { grid-template-columns: 1fr; }
    .sk-rc { transform: none !important; }
  }
}