/* Klub Pictures — /zasady-gry-w-bilard/: „Zasady na stole”. Stół w rzucie z góry w języku mapy (cienkie linie, mono, złoto lampy). */

.rules { padding-top: calc(var(--hdr) + clamp(28px, 5vw, 64px)); }
.rules__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.rstep { grid-column: 1 / span 5; padding-block: clamp(48px, 9vh, 96px); transition: opacity .5s var(--ease); }
.js .rules .rstep:not(.rstep--intro):not(.is-on) { opacity: .38; }
.rstep--intro { padding-top: 0; min-height: calc(100vh - var(--hdr) - 120px); display: flex; flex-direction: column; justify-content: center; }
.rstep:last-of-type { padding-bottom: clamp(80px, 20vh, 200px); }
.rstep .lead { margin-top: 18px; }
.rstep .body + .body { margin-top: 12px; }
.rstep__k { margin-bottom: 14px; font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-lamp); }
.rstep__h { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); letter-spacing: -.025em; line-height: 1.15; margin-bottom: 14px; }
.rstep .h2 { margin-bottom: 16px; }
.rstep b { color: var(--c-ink); font-weight: 500; }
.rsrc { margin-top: 16px; font-size: .875rem; color: var(--c-ink-3); }
.rlist { display: grid; gap: 10px; margin-bottom: 14px; color: var(--c-ink-2); }
.rlist li { position: relative; padding-left: 18px; }
.rlist li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-lamp); }
.rlist--steps { counter-reset: k; }
.rlist--steps li { counter-increment: k; padding-left: 26px; }
.rlist--steps li::before { content: counter(k); top: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--c-lamp); font-weight: 600; font-variant-numeric: tabular-nums; }
.rlist--foul { margin: 14px 0; gap: 6px; font-size: .9375rem; }

/* Stół: przyklejony obok tekstu */
.rules__stage { grid-column: 7 / span 6; grid-row: 1 / span 12; align-self: stretch; }
.tablefig { position: sticky; top: calc(50vh - min(19vw, 230px)); margin: 0; }
.tbl { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 22px; background: #17110D; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); } /* przy przybliżeniu rysunek zostaje w ramce */
.tbl__rail { fill: #17110D; stroke: rgba(243, 198, 126, .18); stroke-width: 1.5; }
.tbl__dia circle { fill: var(--c-lamp); opacity: .75; }
.tbl__pk circle { fill: #020303; stroke: rgba(255, 255, 255, .06); }
.tbl__kitchen { fill: rgba(243, 198, 126, .08); }
.tbl__head { stroke: rgba(243, 198, 126, .55); stroke-width: 2; stroke-dasharray: 8 8; }
.tbl__spot { fill: rgba(255, 255, 255, .75); }
.tbl__rack { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-dasharray: 6 6; }
.tlbl { font: 500 22px var(--f-mono); letter-spacing: .1em; fill: #F8E6C4; paint-order: stroke; stroke: rgba(4, 12, 10, .85); stroke-width: 5px; stroke-linejoin: round; }
.tlbl--dim { fill: rgba(255, 255, 255, .62); font-size: 19px; }
.tlbl--z { font-size: 11px; stroke-width: 3px; } /* podpisy w przybliżeniu na trójkąt */
.tlbl--warn { fill: #FF9A85; }
.ring { fill: none; stroke: var(--c-lamp); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(243, 198, 126, .7)); }
.ring--pk { stroke-dasharray: 6 5; }
.cue-path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.ball-path { fill: none; stroke: var(--c-lamp); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.tick circle { fill: none; stroke: var(--c-lamp); stroke-width: 2; stroke-dasharray: 4 5; }
.anywhere { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .5); stroke-width: 2; stroke-dasharray: 10 8; }
.ghost { fill: rgba(255, 255, 255, .1); stroke: #fff; stroke-width: 2; stroke-dasharray: 4 4; }

/* Nakładki scen: widać tylko tę, która pasuje do czytanego fragmentu */
.ov { opacity: 0; transition: opacity .5s var(--ease); }
.tablefig[data-scene="stol"] .ov--stol, .tablefig[data-scene="r8"] .ov--r8, .tablefig[data-scene="break8"] .ov--break8,
.tablefig[data-scene="win8"] .ov--win8, .tablefig[data-scene="r9"] .ov--r9, .tablefig[data-scene="play9"] .ov--play9,
.tablefig[data-scene="r10"] .ov--r10, .tablefig[data-scene="foul"] .ov--foul { opacity: 1; transition-delay: .35s; }

/* Bile */
.ball { transition: transform .9s var(--ease), opacity .5s; }
.ball.is-off { opacity: 0; }
.ball.no-anim { transition: none; }
.ball__n { font: 700 11px var(--f-mono); fill: #141414; }

.tablefig__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font: 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-lamp); }
.tablefig__src { color: var(--c-ink-3); }

/* Słowniczek */
.gloss__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--c-line-2); }
.gloss__list div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--c-line); }
.gloss__list dt { font-weight: 500; }
.gloss__list dd { color: var(--c-ink-2); font-size: .9375rem; }
.gloss .h2 { margin-top: 14px; }

/* Zagraj */
.faq__head .body a { color: var(--c-ink); }

/* ===== Tablet ===== */
@media (max-width: 1079px) {
  .rstep { grid-column: 1 / span 6; }
  .rules__stage { grid-column: 7 / span 6; }
  .gloss__list { grid-template-columns: 1fr; }
}

/* ===== Telefon: stół przyklejony u góry, tekst przewija się pod nim ===== */
@media (max-width: 759px) {
  .rules { padding-top: calc(var(--hdr) + 20px); }
  .rules__grid { display: block; }
  .rstep { padding-block: 32px; }
  .rstep--intro { min-height: 0; padding-bottom: 24px; }
  .rules__stage { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--pad)); padding: 10px var(--pad) 12px; background: linear-gradient(var(--c-bg) 86%, rgba(6, 8, 10, 0)); transition: top .45s var(--ease); }
  body:has(.hdr:not(.is-hidden)) .rules__stage { top: var(--hdr); }
  .tablefig { position: static; }
  .tbl { border-radius: 14px; box-shadow: none; }
  .tlbl { font-size: 34px; stroke-width: 8px; }
  .tlbl--dim { font-size: 30px; }
  .tlbl--z { font-size: 17px; stroke-width: 4px; }
  .ball__n { font-size: 13px; }
  .tablefig__cap { margin-top: 8px; font-size: 10.5px; }
  .js .rules .rstep:not(.rstep--intro):not(.is-on) { opacity: .5; }
  .gloss__list div { grid-template-columns: 1fr; gap: 4px; }
}