/* TASK-0976: our real texts on new — the homepage sections and the ten reviews — in the owner's «Навигатор» look.
Loaded last (after styles.css — the owner's, unchanged —, additions.css and compact.css). Owner's tokens only
(--purple, --purple-soft, --mint, --on-mint, --ink, --muted, --line, --surface, --page-width); sizes follow his
scale (H2 like the ranking title, chips, 13 px captions, 17 px radius cards). */
/* 1) Text column: the page width of compact.css, readable measure */
.prose { max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 0 26px; overflow-wrap: anywhere; }
.ranking .prose { padding: 0; }
.prose > p, .prose > ul, .prose > ol, .prose > h2, .prose > h3, .prose > h4, .prose > h5,
.prose > .byline, .prose > .notice, .prose > .jump, .prose > figure { max-width: 780px; }
.prose h2 { margin: 48px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 30px; line-height: 1.25;
font-weight: 800; letter-spacing: -.035em; color: var(--ink); scroll-margin-top: 18px; }
.prose h3 { margin: 28px 0 8px; font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; scroll-margin-top: 18px; }
.prose h4, .prose h5 { margin: 22px 0 6px; font-size: 17px; line-height: 1.35; font-weight: 800; }
.prose p, .prose li { font-size: 17px; line-height: 1.65; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin: 0 0 6px; }
.prose strong { font-weight: 800; }
/* 2) Byline, notice (disclosure, 18+, legal status), «On this page» */
.byline { margin: 8px 0 18px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
font-size: 14px; line-height: 1.6; color: var(--muted); }
.byline strong { color: var(--ink); }
.notice { margin: 0 0 22px; padding: 16px 20px; background: var(--purple-soft); border-left: 5px solid var(--purple); border-radius: 12px; }
.prose .notice p { font-size: 15px; line-height: 1.6; }
.notice p:last-child { margin-bottom: 0; }
.jump { margin: 0 0 24px; font-size: 14px; line-height: 2; color: var(--muted); }
.jump strong { color: var(--ink); }
.prose-lead { padding-bottom: 8px; }
.prose-body { padding-bottom: 40px; }
/* 3) Tables in a scroll box (wide tables never widen the page), pictures fit the column */
.table-wrap { overflow-x: auto; margin: 14px 0 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.table-wrap th, .table-wrap td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap th { background: var(--purple-soft); color: var(--ink); font-weight: 700; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap caption { padding: 9px 12px; text-align: left; font-size: 13px; color: var(--muted); }
.prose .stock-table { margin: 0; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.prose figure { margin: 18px 0 22px; }
.prose figcaption { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* 4) Review page: breadcrumb, head with the score card, contents + text */
.crumbs { max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 18px 26px 0; font-size: 13px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: '›'; margin-right: 6px; }
.review-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start;
max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 18px 26px 30px; }
.review-head h1 { margin: 0 0 14px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; font-weight: 800; letter-spacing: -.04em; }
.review-intro { margin: 0 0 14px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.review-head .byline { margin: 0; }
.review-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--surface);
border: 1px solid var(--line); border-radius: 17px; }
.review-card .casino-logo.real { height: 72px; width: 100%; max-width: none; }
.review-card .casino-logo.real img { border-radius: 12px; }
.review-card .score { margin: 0; }
.review-card .score-ring { width: 59px; height: 59px; }
.review-card .score-value { font-size: 21px; }
.review-card .action-button { min-height: 45px; font-size: 17px; border-radius: 10px; }
.review-card .partner-label { margin: -4px 0 0; }
.review-adline, .review-legal { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.review-adline .dot { margin: 0 4px; }
/* TASK-1069: one column — «On this page» is the bar above it; the text's 780 px measure is in toc.css */
.review-body { display: block; max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 0 26px; }
.review-body .prose { max-width: none; margin: 0; padding: 0; }
.review-text > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* TASK-1023 (owner 20.10.2026): §1 «The ranking…» sits right under the ranking rows (TASK-1004) — no divider line,
one even 40 px gap (32 px on phones) from the last row to the heading. */
.ranking .prose > h2:first-child { margin-top: 40px; padding-top: 0; border-top: 0; }
/* 5) Player protection and disclosure (the main site's footer block, same words) */
/* TASK-1118 (owner 20.10.2026: «между Player protection и Gambling Help Online слишком большое белое пространство…
тоненькая полосочка, стандартная; и сверху над Player Protection тоже уменьшить»): above the block 24 px — the
rhythm of the boxed figures (.fig 22/26) instead of 40; below it, to the footer's mint help strip, a thin 16 px
white line — the paragraph gap of .prose — instead of 40–124 px (40 margin collapsed with .sf 44/32, plus the
homepage .prose-body padding-bottom 40). Only where the block ends the page: the footer's own margin and the
homepage column's padding drop to 0 then (:has(); without it the old gap stays). */
.protect { max-width: 780px; margin: 24px 0 16px; padding: 22px 24px; background: var(--mint); color: var(--on-mint); border-radius: 17px; }
.prose-body:has(> .protect:last-child) { padding-bottom: 0; }
main:has(> .prose:last-child > .protect:last-child) + .sf { margin-top: 0; }
.prose .protect h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 24px; color: var(--on-mint); }
.prose .protect p, .prose .protect li { font-size: 15px; line-height: 1.6; color: var(--on-mint); }
.protect-tag { font-weight: 800; }
.prose .protect-list { margin: 0 0 14px; padding: 0; list-style: none; }
.prose .protect .protect-disc { margin-bottom: 0; font-size: 14px; }
/* TASK-1096 (owner 20.10.2026: «на страницах обзора контент внизу не растянут по всей ширине сайта»): on review pages
everything under the head — the review text and the block under it (player protection + disclosure) — spans the
site container: the edges of the head with the score card, the breadcrumb and the «On this page» bar (TASK-1089),
as the owner asked for the homepage texts (TASK-0993). This lifts the 780 px measure of the review text (toc.css
`.review-body .prose.review-text`, 0,3,0 — loaded after this file, so 0,4,0 here), of its blocks (section 1 above)
and of .protect. Phones are unchanged: the container is already the screen minus 16 + 16. */
.review-page .review-body .prose.review-text { max-width: none; }
.review-page .review-text > :is(p, ul, ol, h2, h3, h4, h5, .byline, .notice, .jump, figure) { max-width: none; }
.review-page main > .prose > .protect { max-width: none; }
@media (max-width: 959px) {
.review-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.review-card { max-width: 420px; }
/* TASK-1039: every «On this page» link at least 44×44; the « · » text between links is hidden (font-size 0 on the
row) and drawn after each link instead, so a wrapped line never starts with a dot */
.jump { display: flex; flex-wrap: wrap; align-items: center; font-size: 0; line-height: 1.4; }
.jump strong { display: inline-flex; align-items: center; min-height: 44px; margin-right: 10px; font-size: 14px; }
.jump a { position: relative; display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; font-size: 14px; }
.jump a:not(:last-child) { margin-right: 22px; }
.jump a:not(:last-child)::after { content: "·" / ""; position: absolute; left: 100%; width: 22px; text-align: center; color: var(--muted);
pointer-events: none; }
}
@media (max-width: 759px) {
.prose { padding: 0 16px; }
.prose h2 { margin-top: 36px; padding-top: 18px; font-size: 24px; }
.ranking .prose > h2:first-child { margin-top: 32px; }
.prose h3 { font-size: 19px; }
.prose p, .prose li { font-size: 16px; }
.crumbs { padding: 14px 16px 0; }
.review-hero { padding: 12px 16px 22px; }
.review-intro { font-size: 16px; }
.review-body { padding: 0 16px; }
.protect { padding: 18px 18px; }
}
/* TASK-0993 (owner 20.10): homepage body paragraphs justified. Only plain (no class) straight in the homepage
text columns (lead, §1 text, sections) and the FAQ answers (
in details.faq) — headings, the ranking, buttons,
lists, byline, notice, legends and captions (p.acs-lg, figures), tables, the FAQ questions, player protection,
the footer and the review pages keep left alignment. The last line stays left. Phones (320–430 px, ~34 characters a
line) got gaps of 5–10 spaces with word gaps alone (docs/os/work/TASK-0993/probe0993.py): hyphens:auto (html
lang="en-AU") and text-justify:inter-character spread the slack between letters too (Chromium: widest gap ≤ 2.3
spaces at 320 px); browsers without text-justify (Safari) justify by words with their own hyphenation. The e-mail
address may break at any letter, so the line before it is not stretched across the column.
ux* UX-01 (TASK-0993): below 760 px inter-character spread letters inside words up to 4.7 px (360) / 6.3 px (320)
— phones keep left alignment as before; justify from 760 px (≤ 2.4 px, 0–3 words over 2 px). */
@media (min-width: 760px) {
body:not(.review-page) main .prose > p:not([class]),
body:not(.review-page) main .prose > details.faq > p { text-align: justify; text-align-last: left;
text-justify: inter-character; -webkit-hyphens: auto; hyphens: auto; }
}
body:not(.review-page) main .prose > p:not([class]) a[href^="mailto:"] { word-break: break-all; }
/* TASK-0993 (owner 20.10, twice: «Рейтинг шире, а тексты уже» — the text must run the site width): on the homepage
every block of the text columns (lead, §1 under the ranking, sections, FAQ, player protection) spans the full .prose,
which is already the ranking's width (calc(--page-width + 52px), padding 26 px) — so text edges = ranking edges.
This lifts the 780 px measure of section 1 above and of figures.css; review pages keep it. :is() weighs one class,
so the selector (0,3,2) beats .ranking .prose .acs-lg (0,3,0) and .prose-body > figure (0,1,1). */
body:not(.review-page) main .prose > :is(p, ul, ol, h2, h3, h4, h5, .byline, .notice, .jump, figure, .x-call, .acma,
.faq, .help, .protect, .acs-lg, .ra-src) { max-width: none; }
/* TASK-1046 (owner 20.10, INBOX #225: variant B of TASK-1040, «сверху три строчки, а потом See more»): the homepage
lead folds — lead.js adds .lf-folded, without JS nothing below applies. Folded: the first paragraph cut to three
lines at any width (line-clamp), then a row: «See more» (text button, --purple, underlined, 44 px tall) and three
small facts — author · date, the ad line, 18+ with the helpline on --mint (compliance §1/§6). The other blocks are
hidden="until-found": the box must stay rendered (content-visibility: hidden, which Chromium gives it) for Ctrl+F
to find its words and open the lead, so display:block !important beats the owner's [hidden] { display: none
!important } of styles.css (ux* TASK-1046: without it window.find failed); its margin, padding, border and
background are cleared, the boxes are 0 px tall. The 14 px bottom margin of .lf-meta then stays inside the lead
instead of merging with the ranking's top margin: the ranking starts where it did at every width. Owner's tokens
only. */
.prose-lead.lf-folded > [data-lf-clip] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
line-clamp: 3; overflow: hidden; margin-bottom: 6px; }
.prose-lead.lf-folded > [hidden="until-found"] { display: block !important; margin: 0; padding: 0; border: 0;
background: none; min-height: 0; }
.prose-lead [hidden]:not([hidden="until-found"]) { display: none; }
/* TASK-1211: with scripting on, the lead is drawn folded from the first paint, before lead.js has run (it marks the
box .lf-ready): the same three lines, See more row and 0 px parts as .lf-folded. Without it the browser painted the
open lead while lead.js was on its way, then folded it, and the ranking jumped up. No scripting: as before. */
@media (scripting: enabled) {
.prose-lead:not(.lf-ready) > [data-lf-clip] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
line-clamp: 3; overflow: hidden; margin-bottom: 6px; }
.prose-lead:not(.lf-ready) > [data-lf-part] { display: block; height: 0; overflow: hidden; margin: 0; padding: 0;
border: 0; background: none; min-height: 0; }
.prose-lead:not(.lf-ready) > [data-lf-short] { display: flex !important; }
}
.prose-lead .lf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px;
font-size: 14px; line-height: 1.5; color: var(--muted); }
.prose-lead .lf-meta strong { color: var(--ink); }
.prose-lead .lf-chip { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px;
background: var(--surface); }
.prose-lead .lf-chip-18 { background: var(--mint); border-color: var(--mint); color: var(--on-mint); }
.prose-lead .lf-chip-18 strong { color: var(--on-mint); }
.prose-lead .lf-inl { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-right: 6px;
padding: 0 2px; border: 0; background: none; color: var(--purple); font: inherit; font-size: 15px; font-weight: 800;
text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prose-lead .lf-inl:hover { color: var(--purple-deep); }
.prose-lead .lf-inl svg { flex: none; transition: transform .15s; }
.prose-lead .lf-end .lf-inl svg { transform: rotate(180deg); }
.prose-lead .lf-end { margin: -8px 0 8px; }
.prose-lead :is([data-lf-clip], [data-lf-part]):focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .prose-lead .lf-inl svg { transition: none; } }
/* TASK-1083 (qa* TASK-1046, spec B of TASK-1040 «Печать — всё открыто, кнопок и короткой строки нет»): lead.js opens
the lead on beforeprint, which un-hides See less; print hides both control rows. If beforeprint never fires (a
headless PDF), the folded lead still prints whole: no three-line clip, the until-found parts rendered. */
@media print {
.prose-lead .lf-end, .prose-lead .lf-meta, .prose-lead .lf-inl { display: none !important; }
.prose-lead.lf-folded > [data-lf-clip] { display: block; -webkit-line-clamp: none; line-clamp: none;
overflow: visible; }
.prose-lead.lf-folded > [hidden="until-found"] { content-visibility: visible; }
}