/* bestbitcoincasinospakistan.com — theme "Chit".
 *
 * The subject of this site is not a lobby, it is a route: rupees leave a
 * mobile wallet, change hands two or three times and arrive somewhere as a
 * coin. So the page is built like the paper you get at each of those
 * counters — a chit. Warm paper, a hard ink, figures in a mono face, and one
 * accent used only where something is counted.
 *
 * The memorable element is the HOP STRIP (.ck-hops): a numbered chain of
 * stops that shows how many hands the money passes through. It appears in
 * the first screen and again in every route, and it is drawn from the data,
 * never decorative.
 *
 * No side rail anywhere. Other sites in this trade put a column of boxes
 * beside the prose; here the page is one column and the figures sit in
 * full-width strips between the sections, the way a receipt reads.
 *
 * Class prefix ck-. Zero JavaScript.
 */

:root {
  --paper: #fbf9f4;
  --paper2: #f3efe6;
  --card: #ffffff;
  --ink: #1b1a17;
  --ink2: #4a463d;
  --ink3: #7c7668;
  --rule: #ddd6c7;
  --rule2: #ebe5d8;
  --rose: #c02a4f;
  --rose-bg: #fbe9ee;
  --teal: #0f6466;
  --teal-bg: #e2f0ef;
  --amber: #a86500;
  --amber-bg: #fbf0dc;
  --round: 4px;
  --wide: 1080px;
  --display: Sora, "Segoe UI", Arial, sans-serif;
  --body: Newsreader, Georgia, "Times New Roman", serif;
  --mono: "Azeret Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18.5px;
  line-height: 1.68;
  font-synthesis-weight: none;
}

a { color: var(--rose); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:hover { color: var(--ink) }
img { max-width: 100%; height: auto }

.ck-mid { max-width: var(--wide); margin: 0 auto; padding: 0 20px }

.ck-skip { position: absolute; left: -9999px }
.ck-skip:focus {
  left: 10px; top: 10px; z-index: 9; background: var(--ink); color: var(--paper);
  padding: 9px 14px; border-radius: var(--round);
}

/* ------------------------------------------------------------ head --- */

.ck-head { background: var(--card); border-bottom: 2px solid var(--ink) }
.ck-head-o {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  justify-content: space-between; padding: 15px 0 13px;
}
.ck-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit }
.ck-stamp {
  flex: none; width: 42px; height: 42px; border: 2px solid var(--ink);
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: -.02em;
  color: var(--rose); transform: rotate(-7deg);
}
.ck-brand b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 19.5px;
  line-height: 1.15; letter-spacing: -.015em;
}
.ck-brand b u { text-decoration: none; color: var(--rose) }
.ck-brand span span {
  display: block; font-family: var(--mono); font-size: 11px; color: var(--ink3);
  letter-spacing: .04em; margin-top: 3px;
}
.ck-head-n { display: flex; gap: 22px; margin: 0; font-family: var(--mono); font-size: 12px }
.ck-head-n span { color: var(--ink3) }
.ck-head-n b { display: block; font-size: 20px; color: var(--ink); font-weight: 700 }

.ck-nav { border-top: 1px solid var(--rule); background: var(--paper2) }
.ck-nav div { display: flex; flex-wrap: wrap; gap: 0 }
.ck-nav a {
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink2);
  text-decoration: none; padding: 11px 15px; border-right: 1px solid var(--rule);
}
.ck-nav a:first-child { border-left: 1px solid var(--rule) }
.ck-nav a:hover { background: var(--card); color: var(--ink) }
.ck-nav a.here { background: var(--ink); color: var(--paper) }

/* ------------------------------------------------------------ hero --- */

.ck-top { background: var(--card); border-bottom: 1px solid var(--rule); padding: 30px 0 34px }
.ck-crumb { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); margin: 0 0 12px }
.ck-crumb a { color: var(--ink3) }
.ck-eyebrow {
  margin: 0 0 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rose);
}
.ck-top h1 {
  margin: 0 0 14px; font-family: var(--display); font-weight: 700; letter-spacing: -.028em;
  font-size: clamp(30px, 5.1vw, 46px); line-height: 1.1; text-wrap: balance; max-width: 19ch;
}
.ck-lead { margin: 0 0 16px; font-size: 20px; color: var(--ink2); max-width: 62ch }
.ck-by {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink3);
}
.ck-by b { color: var(--ink2); font-weight: 400 }
.ck-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0 }
.ck-tags span {
  font-family: var(--mono); font-size: 11.5px; padding: 5px 10px;
  background: var(--paper2); border: 1px solid var(--rule); border-radius: 100px;
}
.ck-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 }

/* Первый экран в две колонки, когда справа стоят барабаны. Текст остаётся
 * первым в разметке, поэтому на узком экране он и остаётся сверху. */
.ck-top-g {
  display: grid; grid-template-columns: minmax(0, 1fr) 302px;
  gap: 30px; align-items: start;
}
.ck-top-g .ck-top-t { min-width: 0 }
.ck-top-g .ck-reels { margin: 4px 0 0 }
.ck-top-g .ck-glass { --cell: 60px }

.ck-b {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  padding: 11px 19px; border-radius: var(--round); border: 1.5px solid var(--ink);
}
.ck-b1 { background: var(--ink); color: var(--paper) }
.ck-b2 { background: transparent; color: var(--ink) }
.ck-b:hover { transform: translateY(-1px) }

/* The outbound button. Drawn as a paid stamp on a chit, because that is what
 * it is — and the arrow points out of the page, not into it. */
.ck-go {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 15.5px; color: #fff;
  background: var(--rose); padding: 12px 20px; border-radius: var(--round);
  box-shadow: 0 2px 0 #8d1d39; transition: transform .14s ease, box-shadow .14s ease;
}
.ck-go i {
  width: 16px; height: 10px; flex: none; background: currentColor;
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
}
.ck-go:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 4px 0 #8d1d39 }
.ck-go:active { transform: translateY(1px); box-shadow: 0 1px 0 #8d1d39 }
.ck-go-s { font-size: 13.5px; padding: 8px 14px; box-shadow: 0 2px 0 #8d1d39 }

/* ------------------------------------------------------- hop strip --- */

.ck-hops { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 18px 0 0 }
.ck-hop {
  flex: 1 1 150px; min-width: 0; background: var(--paper2); border: 1px solid var(--rule);
  border-right: 0; padding: 11px 13px 12px; position: relative;
}
.ck-hop:last-child { border-right: 1px solid var(--rule); background: var(--teal-bg) }
.ck-hop i {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--ink3); margin-bottom: 4px; font-style: normal;
}
.ck-hop b { display: block; font-family: var(--display); font-weight: 600; font-size: 14.5px; line-height: 1.3 }
.ck-hop::after {
  content: ""; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px;
  background: var(--paper2); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule);
  transform: translateY(-50%) rotate(45deg); z-index: 2;
}
.ck-hop:last-child::after { content: none }
.ck-hop:nth-last-child(2)::after { background: var(--teal-bg) }

/* ---------------------------------------------------------- layout --- */

.ck-body { padding: 26px 0 46px }
.ck-text { max-width: 74ch }
.ck-text h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(24px, 3.4vw, 31px); line-height: 1.18; margin: 0 0 6px; text-wrap: balance;
}
.ck-text h3 {
  font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25;
  margin: 30px 0 8px; letter-spacing: -.012em;
}
.ck-text h4 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 22px 0 6px }
.ck-text p { margin: 0 0 17px }
.ck-text ul, .ck-text ol { margin: 0 0 18px; padding-left: 0; list-style: none }
.ck-text ul li, .ck-text ol li { position: relative; padding-left: 26px; margin-bottom: 9px }
.ck-text ul li::before {
  content: ""; position: absolute; left: 4px; top: .66em; width: 9px; height: 9px;
  border: 1.5px solid var(--rose); border-radius: 2px; transform: rotate(45deg);
}
.ck-text ol { counter-reset: ck }
.ck-text ol li { counter-increment: ck; padding-left: 32px }
.ck-text ol li::before {
  content: counter(ck, decimal-leading-zero); position: absolute; left: 0; top: .12em;
  font-family: var(--mono); font-size: 12.5px; color: var(--rose); font-weight: 700;
}

section { margin: 0 0 34px }
.ck-sec { display: flex; gap: 14px; align-items: baseline; margin: 40px 0 14px }
.ck-sec-n {
  flex: none; font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff;
  background: var(--ink); padding: 3px 7px; border-radius: 2px;
}
.ck-sec-u {
  display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink3);
  letter-spacing: .05em; margin-top: 5px;
}

.ck-thin { font-size: 15px; color: var(--ink3); margin: -6px 0 20px; max-width: 74ch }
.ck-note {
  border-left: 4px solid var(--amber); background: var(--amber-bg);
  padding: 15px 18px; margin: 0 0 20px; font-size: 17px; max-width: 74ch;
}
.ck-note b { font-family: var(--display) }

/* ------------------------------------------------------------ toc ---- */

.ck-toc { border: 1px solid var(--rule); background: var(--card); padding: 15px 18px; margin: 0 0 28px }
.ck-toc b {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 9px;
}
.ck-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t;
  columns: 2; column-gap: 26px }
.ck-toc li { counter-increment: t; margin: 0 0 5px; font-size: 15.5px; break-inside: avoid }
.ck-toc li::before { content: counter(t, decimal-leading-zero) " "; font-family: var(--mono);
  font-size: 11.5px; color: var(--ink3) }
.ck-toc a { color: var(--ink2); text-decoration: none }
.ck-toc a:hover { color: var(--rose); text-decoration: underline }

/* --------------------------------------------------------- figures --- */

.ck-fig { margin: 0 0 26px }
.ck-fig svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #fff }
.ck-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 3px }
.ck-fig figcaption {
  font-size: 15px; color: var(--ink3); margin-top: 9px; line-height: 1.55; max-width: 74ch;
}

/* ----------------------------------------------------------- board --- */

.ck-board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border: 1px solid var(--ink); margin: 0 0 22px; background: var(--card);
}
.ck-board div { padding: 13px 14px; border-right: 1px solid var(--rule) }
.ck-board div:last-child { border-right: 0 }
.ck-board b {
  display: block; font-family: var(--mono); font-size: 27px; font-weight: 700;
  line-height: 1; letter-spacing: -.03em;
}
.ck-board span { display: block; font-size: 13.5px; color: var(--ink3); margin-top: 6px; line-height: 1.35 }
.ck-board i { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink3); font-style: normal }

/* ---------------------------------------------------------- entry ---- */

.ck-list { margin: 0 0 24px }
.ck-entry {
  display: grid; grid-template-columns: 54px 120px minmax(0, 1fr) 190px; gap: 16px;
  align-items: center; background: var(--card); border: 1px solid var(--rule);
  border-bottom: 0; padding: 15px 17px;
}
.ck-entry:last-child { border-bottom: 1px solid var(--rule) }
.ck-entry-1 { border-left: 4px solid var(--rose) }
.ck-rank { text-align: center }
.ck-rank b { display: block; font-family: var(--mono); font-size: 25px; font-weight: 700; line-height: 1 }
.ck-rank i { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink3); font-style: normal }
.ck-mark { display: grid; place-items: center; height: 46px; padding: 5px 8px }
.ck-mark img { max-height: 36px; width: auto; object-fit: contain }
.ck-mark.dark { background: #171922; border-radius: 3px }
.ck-mark.none {
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink3);
  border: 1px dashed var(--rule);
}
.ck-entry h3 { margin: 0 0 3px; font-family: var(--display); font-weight: 600; font-size: 19px }
.ck-entry h3 a { color: var(--ink); text-decoration: none }
.ck-entry h3 a:hover { color: var(--rose) }
.ck-entry h3 span {
  display: block; font-family: var(--mono); font-size: 11px; color: var(--ink3);
  font-weight: 400; margin-top: 3px;
}
.ck-line { margin: 5px 0 8px !important; font-size: 15.5px; color: var(--ink2) }
.ck-flags { display: flex; flex-wrap: wrap; gap: 6px }
.ck-flags span {
  font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 2px;
  background: var(--paper2); color: var(--ink2);
}
.ck-flags span.yes { background: var(--teal-bg); color: var(--teal) }
.ck-flags span.no { background: var(--rose-bg); color: var(--rose) }

/* The pair. Two numbers side by side with a slash between them and never a
 * sum — the slash is doing real work here and is drawn, not typed. */
.ck-pair { display: flex; gap: 0; align-items: stretch; margin: 0 0 9px }
.ck-pair div { flex: 1; text-align: center; padding: 6px 4px; background: var(--paper2) }
.ck-pair div + div { border-left: 1px solid var(--rule) }
.ck-pair b { display: block; font-family: var(--mono); font-size: 21px; font-weight: 700; line-height: 1 }
.ck-pair i {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink3); font-style: normal; margin-top: 4px;
}
.ck-pair .rec b { color: var(--teal) }
.ck-pair .rea b { color: var(--rose) }
.ck-pair .none b { color: var(--ink3) }
.ck-small {
  display: block; text-align: center; font-family: var(--mono); font-size: 11px;
  color: var(--ink3); margin-top: 7px; text-decoration: none;
}
.ck-small:hover { color: var(--rose) }

/* ---------------------------------------------------------- table ---- */

.ck-scroll { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--rule); background: var(--card) }
.ck-tab { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px }
.ck-tab th, .ck-tab td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--rule2) }
.ck-tab thead th {
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-weight: 400;
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; border-bottom: 0;
}
.ck-tab tbody th { font-family: var(--display); font-weight: 600; font-size: 16px }
.ck-tab td.v { font-variant-numeric: tabular-nums }
.ck-tab td.good { background: var(--teal-bg); color: var(--teal); font-weight: 600 }
.ck-tab tbody tr:last-child th, .ck-tab tbody tr:last-child td { border-bottom: 0 }

/* ---------------------------------------------------------- steps ---- */

.ck-steps { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: s }
.ck-steps li {
  counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--rule2);
}
.ck-steps li::before { content: none }
.ck-steps li i {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: #fff;
  background: var(--ink); width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 2px; font-style: normal;
}
.ck-steps b { display: block; font-family: var(--display); font-weight: 600; font-size: 17.5px; margin-bottom: 3px }
.ck-steps span { display: block; color: var(--ink2); font-size: 16.5px }

/* ---------------------------------------------------------- coins ---- */

.ck-coins { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px }
.ck-coin {
  font-family: var(--mono); font-size: 12.5px; padding: 5px 10px;
  border: 1px solid var(--rule); background: var(--card); border-radius: 2px;
}
.ck-coin.st { border-color: var(--teal); background: var(--teal-bg); color: var(--teal) }

/* ----------------------------------------------------------- gate ---- */

.ck-gate {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--paper); padding: 20px 22px; margin: 0 0 24px;
  border-radius: var(--round);
}
.ck-gate b { display: block; font-family: var(--display); font-weight: 700; font-size: 21px; margin-bottom: 5px }
.ck-gate span { display: block; color: #cdc6b6; font-size: 16px; max-width: 58ch }

/* --------------------------------------------------------- report ---- */

.ck-rep { border: 1px solid var(--ink); background: var(--card); margin: 0 0 26px }
.ck-rep-h {
  display: grid; grid-template-columns: 40px 110px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 13px 16px; background: var(--paper2);
  border-bottom: 1px solid var(--ink);
}
.ck-no { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--rose) }
.ck-rep-h h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 21px }
.ck-meta { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-top: 3px }
.ck-rep-b { padding: 17px 18px 4px }
.ck-rep-b > *:last-child { margin-bottom: 14px }

.ck-pm { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0;
  border-top: 1px solid var(--rule); margin: 6px -18px -4px }
.ck-pm > div { padding: 14px 18px }
.ck-pm > div + div { border-left: 1px solid var(--rule) }
.ck-pm h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font-size: 15px }
.ck-pm em {
  font-style: normal; width: 19px; height: 19px; border-radius: 2px; display: grid;
  place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.ck-pm .plus em { background: var(--teal-bg); color: var(--teal) }
.ck-pm .minus em { background: var(--rose-bg); color: var(--rose) }
.ck-pm ul { margin: 0 !important }
.ck-pm li { font-size: 15.5px; margin-bottom: 6px !important }

/* --------------------------------------------------------- voices ---- */

.ck-voices { margin: 0 0 22px }
.ck-voice { border: 1px solid var(--rule); background: var(--card); padding: 15px 17px; margin-bottom: 12px }
.ck-voice-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 9px }
.ck-voice-h b { font-family: var(--display); font-weight: 700; font-size: 18.5px }
.ck-voice-h u {
  text-decoration: none; font-family: var(--mono); font-size: 11px; color: var(--ink3);
  letter-spacing: .06em; text-transform: uppercase;
}
.ck-voice-t { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.ck-voice-t span {
  font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 2px;
  background: var(--paper2); color: var(--ink2);
}
.ck-voice-t span.p { background: var(--teal-bg); color: var(--teal) }
.ck-voice-t span.m { background: var(--rose-bg); color: var(--rose) }
.ck-voice p { font-size: 16.5px; margin-bottom: 11px }
.ck-voice p:last-child { margin-bottom: 0 }

/* ----------------------------------------------------------- asks ---- */

.ck-asks { margin: 0 0 24px; border-top: 1px solid var(--rule) }
.ck-asks details { border-bottom: 1px solid var(--rule) }
.ck-asks summary {
  cursor: pointer; padding: 14px 34px 14px 0; font-family: var(--display); font-weight: 600;
  font-size: 17.5px; position: relative; list-style: none;
}
.ck-asks summary::-webkit-details-marker { display: none }
.ck-asks summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px; font-family: var(--mono);
  font-size: 20px; color: var(--rose);
}
.ck-asks details[open] summary::after { content: "–" }
.ck-asks div { padding: 0 0 15px; color: var(--ink2); font-size: 17px }

/* ----------------------------------------------------------- next ---- */

.ck-next { border-top: 2px solid var(--ink); margin-top: 34px; padding-top: 16px }
.ck-next p {
  margin: 0 0 10px !important; font-family: var(--mono); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink3);
}
.ck-next ul { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 8px }
.ck-next li { margin: 0 !important; padding: 0 !important }
.ck-next li::before { content: none !important }
.ck-next a {
  display: block; font-family: var(--display); font-weight: 600; font-size: 14.5px;
  padding: 7px 13px; border: 1px solid var(--rule); background: var(--card);
  text-decoration: none; color: var(--ink2);
}
.ck-next a:hover { border-color: var(--ink); color: var(--ink) }

/* ----------------------------------------------------------- foot ---- */

.ck-foot { background: var(--ink); color: #cdc6b6; padding: 34px 0 30px; margin-top: 40px }
.ck-foot-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px 26px }
.ck-foot h4 {
  margin: 0 0 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: #8d8776; font-weight: 400;
}
.ck-foot ul { list-style: none; margin: 0; padding: 0 }
.ck-foot li { margin-bottom: 6px }
.ck-foot a { color: #e6e0d2; text-decoration: none; font-size: 15.5px }
.ck-foot a:hover { color: #fff; text-decoration: underline }
.ck-foot-d {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid #38352d;
  font-size: 14px; color: #938d7c; line-height: 1.6;
}

/* ----------------------------------------------------------- reels --- */
/* Drawn reels, not a game: no button, no outcome, no win line. They spin
 * once and stop for good — a picture that happens to be a link. */

.ck-reels { background: #171922; border-radius: var(--round); padding: 18px; color: #e6e0d2 }
.ck-reels-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px }
.ck-bar { width: 22px; height: 3px; background: var(--rose); flex: none }
.ck-reels-h span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: #8d8776;
}
.ck-glass {
  --cell: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: #0c0d14; border-radius: 3px; padding: 4px; position: relative;
}
.ck-glass::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px;
  background: var(--rose); opacity: .55; transform: translateY(-1px);
}
.ck-reel { height: calc(var(--cell) * 3); overflow: hidden; background: #07080e; border-radius: 2px }
.ck-belt { display: block; will-change: transform }
.ck-cell { display: flex; align-items: center; justify-content: center; height: var(--cell); color: #e8c46a }
.ck-cell svg { width: 34px; height: 34px }
.ck-c-gem { color: #63c2ff }
.ck-c-star { color: #ffd166 }
.ck-c-seven { color: #ff7686 }
.ck-c-ring { color: #8fe3c0 }

@keyframes ck-spin {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.05,.2,1) }
  50%, 100% { transform: translateY(calc(var(--cell) * -6)) }
}
@media (prefers-reduced-motion: no-preference) {
  .ck-b1t { animation: ck-spin 3.4s infinite }
  .ck-b2t { animation: ck-spin 3.4s infinite .18s }
  .ck-b3t { animation: ck-spin 3.4s infinite .36s }
}
.ck-reels .ck-go { margin-top: 12px; width: 100%; justify-content: center }
.ck-reels p { margin: 10px 0 0; font-size: 13.5px; color: #938d7c; line-height: 1.5 }

/* In-body version: text on one side, reels on the other. */
.ck-reels-w {
  display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 20px; align-items: center;
  background: #171922; border-radius: var(--round); padding: 20px; margin: 0 0 26px;
}
.ck-reels-w .ck-glass { --cell: 56px }
.ck-reels-t h3 { margin: 0 0 8px !important; color: #fff !important; font-size: 22px !important }
.ck-reels-t p { margin: 0 0 14px !important; color: #b3ac9a !important; font-size: 16px !important; max-width: 52ch }
.ck-reels-t .ck-go { display: inline-flex }

/* ----------------------------------------------------------- strip --- */

.ck-strip {
  position: sticky; bottom: 0; z-index: 5; background: var(--rose);
  padding: calc(9px) 20px calc(9px + env(safe-area-inset-bottom, 0px)); text-align: center;
}
.ck-strip a { color: #fff; font-family: var(--display); font-weight: 700; font-size: 15.5px; text-decoration: none }
.ck-strip a:hover { text-decoration: underline }
.ck-strip i { display: none }

/* ------------------------------------------------------------ wide --- */

@media (max-width: 900px) {
  .ck-entry { grid-template-columns: 44px 84px minmax(0, 1fr); row-gap: 12px }
  .ck-entry > div:last-child { grid-column: 1 / -1 }
  .ck-reels-w { grid-template-columns: minmax(0, 1fr) }
  .ck-top-g { grid-template-columns: minmax(0, 1fr); gap: 22px }
  .ck-rep-h { grid-template-columns: 34px 78px minmax(0, 1fr); row-gap: 10px }
  .ck-rep-h > a { grid-column: 1 / -1 }
  .ck-toc ol { columns: 1 }
}

@media (max-width: 560px) {
  body { font-size: 17.5px }
  .ck-mid { padding: 0 16px }
  .ck-entry { grid-template-columns: 38px minmax(0, 1fr); padding: 13px 14px }
  .ck-mark { grid-row: 1; grid-column: 2; justify-self: start; height: 34px }
  .ck-glass { --cell: 52px }
  .ck-hop { flex: 1 1 100%; border-right: 1px solid var(--rule); border-bottom: 0 }
  .ck-hop:last-child { border-bottom: 1px solid var(--rule) }
  .ck-hop::after { display: none }
  .ck-board { grid-template-columns: repeat(2, 1fr) }
  .ck-board div { border-bottom: 1px solid var(--rule) }
}

/* ------------------------------------------------ переключатель языка -- */

.ck-lang {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--ink3);
  border: 1px solid var(--rule); padding: 5px 9px; white-space: nowrap;
  align-self: center;
}
.ck-lang:hover { background: var(--ink); color: var(--paper); border-color: var(--ink) }

/* -------------------------------------------------------------- урду -- */

/* Насталик выше латиницы и требует воздуха между строк: при одинаковом
   line-height буквы соседних строк цепляются хвостами. */
[dir="rtl"] {
  --body: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", Georgia, serif;
  --display: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", sans-serif;
}
[dir="rtl"] body,
[dir="rtl"] .ck-text p,
[dir="rtl"] .ck-text li { line-height: 2.05 }
[dir="rtl"] .ck-text h2 { line-height: 1.75 }
[dir="rtl"] .ck-text h3 { line-height: 1.8 }

/* Всё, что отмерено от левого края, на урду отмеряется от правого. */
[dir="rtl"] .ck-text ul li,
[dir="rtl"] .ck-text ol li { padding-left: 0; padding-right: 26px }
[dir="rtl"] .ck-text ol li { padding-right: 32px }
[dir="rtl"] .ck-text ul li::before,
[dir="rtl"] .ck-text ol li::before { left: auto; right: 4px }
[dir="rtl"] .ck-text ol li::before { right: 0 }
[dir="rtl"] .ck-tab th, [dir="rtl"] .ck-tab td { text-align: right }
[dir="rtl"] .ck-note { border-left: 0; border-right: 4px solid var(--amber) }
[dir="rtl"] .ck-entry-1 { border-left: 0; border-right: 4px solid var(--rose) }
[dir="rtl"] .ck-pair div + div { border-left: 0; border-right: 1px solid var(--rule) }
[dir="rtl"] .ck-pm > div + div { border-left: 0; border-right: 1px solid var(--rule) }
[dir="rtl"] .ck-board div { border-right: 0; border-left: 1px solid var(--rule) }
[dir="rtl"] .ck-board div:last-child { border-left: 0 }
[dir="rtl"] .ck-nav a { border-right: 0; border-left: 1px solid var(--rule) }
[dir="rtl"] .ck-nav a:first-child { border-left: 1px solid var(--rule); border-right: 0 }
/* В RTL начало координат справа, и left:-9999px из базового правила
   растягивает документ на 10 000px влево вместо того, чтобы спрятать ссылку. */
[dir="rtl"] .ck-skip { left: auto; right: -9999px }
[dir="rtl"] .ck-skip:focus { left: auto; right: 10px }

/* Цепочка переводов идёт справа налево, вместе со стрелкой между звеньями. */
[dir="rtl"] .ck-hop { border-right: 0; border-left: 1px solid var(--rule) }
[dir="rtl"] .ck-hop:last-child { border-left: 1px solid var(--rule) }
[dir="rtl"] .ck-hop::after { right: auto; left: -7px; transform: translateY(-50%) rotate(225deg) }

@media (max-width: 720px) {
  [dir="rtl"] .ck-hop { border-left: 1px solid var(--rule); border-bottom: 0 }
}