/* Light, frosted-glass theme: warm cream, copper / rose-gold accents. */
:root {
  color-scheme: light;
  --bg: #f3ede6;
  --bg-2: #ece4da;
  --ink: #2a221d;
  --text: #3a302a;
  --muted: #7c6f66;
  --line: rgba(120, 92, 70, .14);
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-edge: rgba(255, 255, 255, .85);
  --copper: #b8724a;
  --copper-hi: #e7b48d;
  --copper-deep: #8f5434;
  --peach: #f2c9a8;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 24px 50px -28px rgba(92, 60, 36, .45);
  --shadow-sm: 0 10px 26px -18px rgba(92, 60, 36, .5);
  --wrap: 1280px;
  --gutter: 16px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 768px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-2); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; min-width: 320px; overflow-x: hidden;
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(242, 201, 168, .55), transparent 70%),
    radial-gradient(50% 35% at 0% 10%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #f6f1eb, var(--bg) 40%, var(--bg-2));
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 6px; }
.ico { width: 22px; height: 22px; flex: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 880px; }

/* Frosted glass surface */
.glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; line-height: 1.1; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn .ico { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.btn-lg { min-height: 52px; padding: 14px 26px; font-size: 1.02rem; }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--copper-hi), var(--copper) 55%, var(--copper-deep));
  box-shadow: 0 10px 24px -10px rgba(184, 114, 74, .9), 0 0 0 4px rgba(242, 201, 168, .35);
}
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(184, 114, 74, 1), 0 0 0 6px rgba(242, 201, 168, .45); }
.btn-glass { background: var(--glass-strong); border-color: var(--glass-edge); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-glass:hover { border-color: var(--copper-hi); color: var(--copper-deep); }
.btn-ghost { background: rgba(255, 255, 255, .45); border-color: rgba(120, 92, 70, .22); color: var(--ink); }
.btn-ghost:hover { border-color: var(--copper); color: var(--copper-deep); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: 10px; transition: padding .2s ease; }
.header-inner {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px;
  border-radius: 20px; padding-left: 18px; padding-right: 10px;
}
/* Glass lives on a pseudo-element: backdrop-filter on the bar itself would trap the fixed mobile nav. */
.header-inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge);
  box-shadow: 0 14px 34px -24px rgba(92, 60, 36, .55), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.site-header .wrap.header-inner { width: calc(100% - 2 * var(--gutter)); padding-left: 18px; padding-right: 10px; }
.site-header.scrolled .header-inner::before { background: rgba(255, 255, 255, .8); }

.logo { display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 44px; } /* 44px tall tap area; the mark stays centred */
.logo-mark { width: 34px; height: 34px; filter: drop-shadow(0 4px 8px rgba(184, 114, 74, .35)); }
.logo-word { display: grid; line-height: 1; color: var(--ink); }
.logo-word span:first-child { font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.logo-word span:last-child { font-size: 1.32rem; font-weight: 900; letter-spacing: -.01em; background: linear-gradient(135deg, var(--copper-hi), var(--copper) 45%, var(--copper-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 1px; }

.main-nav { flex: 1 1 auto; min-width: 0; }
.nav-list { display: flex; align-items: center; justify-content: center; gap: 2px; }
.nav-item { position: relative; }
/* Category = plain label that only opens its dropdown (no page, no URL). */
.nav-cat {
  display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 10px; border-radius: 8px;
  font-weight: 650; font-size: .88rem; line-height: 1.2; color: var(--text); text-align: center; transition: color .15s ease;
}
.nav-cat > span { max-width: 10.5em; }
.nav-cat .chev { flex: none; color: var(--muted); }
/* Category with its own page: label is a link, the chevron is a separate toggle. */
.nav-top { display: flex; align-items: center; }
.nav-cat-link { padding-right: 2px; }
.dd-toggle { display: grid; place-items: center; width: 28px; height: 36px; border-radius: 8px; color: var(--muted); }
.dd-toggle .chev { width: 12px; height: 12px; }
.nav-item:hover .dd-toggle .chev, .nav-item.open .dd-toggle .chev { color: var(--copper); }
.chev { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-item:hover .nav-cat, .nav-item:focus-within .nav-cat, .nav-item.open .nav-cat { color: var(--copper-deep); }
.nav-item:hover .chev, .nav-item.open .chev { transform: rotate(180deg); color: var(--copper); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; min-width: 270px;
  padding: 8px; border-radius: 16px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px; font-size: .92rem; font-weight: 550; color: var(--text);
}
.dropdown a .ico { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; color: var(--copper); }
.dropdown a:hover, .dropdown a:focus-visible { background: rgba(242, 201, 168, .3); color: var(--ink); }
.dropdown a:hover .ico, .dropdown a:focus-visible .ico { opacity: 1; transform: none; }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .5); place-items: center; flex: none; color: var(--ink); }
.burger svg path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
.burger[aria-expanded="true"] .b1 { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .b2 { opacity: 0; }
.burger[aria-expanded="true"] .b3 { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 1181px) {
  .nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown, .nav-item.open > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav-item:first-child .dropdown { left: 0; transform: translate(0, 6px); }
  .nav-item:first-child:hover > .dropdown, .nav-item:first-child:focus-within > .dropdown, .nav-item:first-child.open > .dropdown { transform: none; }
  .nav-item:last-child .dropdown { left: auto; right: 0; transform: translate(0, 6px); }
  .nav-item:last-child:hover > .dropdown, .nav-item:last-child:focus-within > .dropdown, .nav-item:last-child.open > .dropdown { transform: none; }
}

@media (max-width: 1180px) {
  .burger { display: grid; }
  .header-actions { order: 2; }
  .burger { order: 3; }
  .main-nav {
    position: fixed; inset: 84px 0 0 0; z-index: 49;
    background: rgba(246, 241, 235, .97);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 12px var(--gutter) 40px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-open .main-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; max-width: 640px; margin: 0 auto; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-cat { width: 100%; justify-content: space-between; text-align: left; font-size: 1.05rem; padding: 16px 4px; min-height: 56px; }
  .nav-cat > span { max-width: none; }
  .nav-top { justify-content: space-between; }
  .nav-top .nav-cat-link { flex: 1; width: auto; }
  .dd-toggle { width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
  .chev { width: 14px; height: 14px; }
  .nav-item:hover .chev { transform: none; color: var(--muted); }
  .nav-item.open .chev { transform: rotate(180deg); color: var(--copper); }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; display: none; min-width: 0; margin: 0 0 14px; box-shadow: none; background: rgba(255, 255, 255, .7); }
  .dropdown::before { display: none; }
  .nav-item.open > .dropdown { display: block; }
  .dropdown a .ico { opacity: .7; transform: none; }
}
@media (max-width: 480px) {
  .site-header { padding-top: 8px; }
  .header-inner { gap: 6px; min-height: 58px; }
  .site-header .wrap.header-inner { width: calc(100% - 16px); padding-left: 10px; padding-right: 8px; }
  .main-nav { inset: 74px 0 0 0; }
  .logo { gap: 6px; }
  .logo-mark { width: 28px; height: 28px; }
  .logo-word span:first-child { font-size: .75rem; letter-spacing: .06em; } /* 12px minimum on phones */
  .logo-word span:last-child { font-size: 1.08rem; }
  .header-actions { gap: 6px; }
  .header-actions .btn { min-height: 38px; padding: 7px 11px; font-size: .8rem; box-shadow: none; }
  .burger { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  .site-header .wrap.header-inner { width: calc(100% - 12px); padding-left: 8px; padding-right: 6px; }
  .header-inner { gap: 4px; }
  .header-actions { gap: 4px; }
  .header-actions .btn { padding: 7px 9px; font-size: .78rem; }
}
@media (max-width: 359px) {
  .site-header .logo-word { display: none; }
  .site-header .logo { min-width: 36px; } /* tap area wider than the 28px mark */
}

/* ---------- block 1: hero ---------- */
.hero { position: relative; padding: 18px 0 24px; }
@media (min-width: 900px) { .hero { padding: 26px 0 32px; } }
.hero-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff4ea, var(--peach) 45%, #cf9471 100%); box-shadow: 0 30px 60px -20px rgba(143, 84, 52, .45); }
.orb-1 { width: 120px; height: 120px; top: 90px; right: 6%; }
.orb-2 { width: 54px; height: 54px; top: 46%; left: 3%; opacity: .85; }
.orb-3 { width: 220px; height: 220px; bottom: -60px; right: -60px; opacity: .6; }
.hero-deco::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(120, 92, 70, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 92, 70, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
}

.crumbs { margin: 14px 0 18px; font-size: .86rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--copper); }
.crumbs a:hover { color: var(--copper-deep); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.hero-grid { display: grid; gap: 20px; }
@media (min-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: stretch; gap: 24px; } }
.hero-main { border-radius: var(--radius); padding: 26px 22px; }
@media (min-width: 640px) { .hero-main { padding: 36px; } }
.hero-mascot { float: right; width: 120px; margin: -6px -6px 6px 12px; shape-outside: margin-box; }
.hero-mascot img { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(60, 36, 20, .3)); }
@media (min-width: 640px) { .hero-mascot { width: 210px; margin: -10px -8px 8px 20px; } }
@media (min-width: 1100px) { .hero-mascot { width: 230px; } }
.hero-score-bonus, .hero-cta, .fineprint { clear: both; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.badge-new, .badge-soft { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.badge-new { background: linear-gradient(135deg, #fff1df, #ffe0c2); color: #a2501f; border: 1px solid #f6c79d; }
.badge-new img { width: 28px; height: 28px; }
.badge-img { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; font-weight: 700; font-size: .85rem; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); color: var(--text); }
.badge-img img { width: 28px; height: 28px; }
.badge-soft { padding-left: 12px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); color: var(--text); }
.updated-plaque { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 6px 14px 6px 10px; border-radius: 10px; font-size: .88rem; font-weight: 600; color: var(--text); background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 236, 218, .8)); border: 1px solid #f0caa8; border-left: 3px solid var(--copper); box-shadow: var(--shadow-sm); }
.updated-plaque svg { width: 18px; height: 18px; color: var(--copper); flex: none; }
.updated-plaque time { font-weight: 800; color: var(--copper-deep); }
.badge-soft .ico { width: 16px; height: 16px; color: var(--copper); }
@media (max-width: 480px) {
  .hero-badges { gap: 6px; }
  .badge-new, .badge-soft, .badge-img { font-size: .76rem; padding: 4px 10px 4px 5px; gap: 6px; }
  .badge-soft { padding-left: 9px; }
  .badge-new img, .badge-img img { width: 22px; height: 22px; }
}
.hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 850; text-wrap: balance; }
.lead-2 { margin-top: 12px; }
.lead { margin-top: 16px; font-size: clamp(1rem, .96rem + .25vw, 1.1rem); color: var(--text); max-width: 62ch; }

.hero-score-bonus { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 560px) { .hero-score-bonus { grid-template-columns: auto 1fr; } }
.score-card, .bonus-card { border-radius: var(--radius-sm); padding: 16px 20px; }
.score-card { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .78); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.score-card img { width: 56px; height: 56px; }
.score { display: flex; align-items: baseline; gap: 2px; line-height: 1; }
.score strong { font-size: 2.3rem; font-weight: 900; color: var(--ink); }
.score span { font-weight: 700; color: var(--muted); }
.score-label { margin-top: 4px; font-size: .85rem; color: var(--muted); font-weight: 600; }
.bonus-card {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #d39a74, var(--copper) 50%, #94573a);
  box-shadow: 0 18px 34px -20px rgba(143, 84, 52, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.bonus-card::after { content: ""; position: absolute; right: -40px; top: -50px; width: 160px; height: 160px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); }
.bonus-tag { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.bonus-value { font-size: 1.75rem; font-weight: 900; line-height: 1.15; margin-top: 2px; }
.bonus-value span { font-size: .72em; opacity: .95; }
.bonus-terms { font-size: .86rem; opacity: .9; margin-top: 2px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 480px) { .hero-cta .btn { width: 100%; } }
.fineprint { margin-top: 14px; font-size: .78rem; color: var(--muted); }
.read-time { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--copper-deep); }
.read-time .ico { width: 14px; height: 14px; }

.hero-shot { margin: 0; border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; justify-content: center; }
.hero-shot picture { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5); }
.hero-shot img { width: 100%; height: auto; }
.hero-shot figcaption { padding: 10px 6px 2px; font-size: .82rem; color: var(--muted); text-align: center; }

.facts { display: grid; gap: 12px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fact { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-sm); }
.fact-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: linear-gradient(135deg, #fff, #f7e3d2); color: var(--copper); box-shadow: inset 0 0 0 1px rgba(184, 114, 74, .18); }
.fact-text { display: grid; line-height: 1.3; min-width: 0; }
.fact-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.fact strong { color: var(--ink); font-size: 1rem; }
@media (max-width: 639px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fact { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .fact-ico { width: 38px; height: 38px; }
  .fact strong { font-size: .94rem; }
  .orb-2 { display: none; }
}

/* ---------- sections ---------- */
.section { padding: 20px 0; }
@media (min-width: 900px) { .section { padding: 28px 0; } }
.section-head { margin: 0 0 20px; }
.kicker { color: var(--copper); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; margin-bottom: 8px; }
.section h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem); font-weight: 850; text-wrap: balance; }

/* ---------- intro ---------- */
.intro-grid { display: grid; gap: 22px; }
@media (min-width: 1000px) { .intro-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; } }
.intro-text h2 { margin-bottom: 16px; }
.intro-text p:not(.kicker) { max-width: 72ch; }
.intro-text p:not(.kicker) + p { margin-top: 14px; }
.intro-aside { border-radius: var(--radius); padding: 22px; }
.intro-aside h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 12px; }
.tick-list { display: grid; gap: 10px; }
.tick-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.tick-list .ico { width: 22px; height: 22px; padding: 3px; flex: none; border-radius: 50%; background: rgba(184, 114, 74, .14); color: var(--copper); margin-top: 1px; }
.shot { margin: 28px 0 0; border-radius: var(--radius); padding: 12px; }
.shot picture { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5); }
.shot img { width: 100%; height: auto; }
.shot figcaption { padding: 10px 6px 2px; font-size: .84rem; color: var(--muted); text-align: center; }

/* ---------- pros / could be better ---------- */
.pros-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .pros-grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.pros, .better { border-radius: var(--radius); padding: 24px 22px; }
@media (min-width: 640px) { .pros, .better { padding: 28px 30px; } }
.pros h3, .better h3 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 850; margin-bottom: 16px; }
.pc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; }
.pc-pro { background: #e3f3e8; color: #2f8a55; }
.pc-better { background: #fdf0dc; color: #b9791f; }
.pros ul, .better ul { display: grid; gap: 12px; }
.pros li, .better li { display: flex; gap: 12px; align-items: flex-start; }
.pros li .ico, .better li .ico { width: 24px; height: 24px; padding: 4px; flex: none; border-radius: 50%; margin-top: 1px; }
.pros li .ico { background: #e3f3e8; color: #2f8a55; }
.better li .ico { background: #fdf0dc; color: #b9791f; }
.better li { color: var(--text); }

/* ---------- bonuses ---------- */
.section-lead { margin-top: 10px; color: var(--text); max-width: 78ch; }
.promo-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.promo { display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius); padding: 20px; }
.promo-tag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(184, 114, 74, .12); color: var(--copper-deep); }
.promo-value { margin-top: 6px; font-size: 1.35rem; font-weight: 900; color: var(--ink); line-height: 1.2; }
.promo-desc { color: var(--muted); font-size: .92rem; }
.promo-details { display: grid; gap: 6px; margin-top: 8px; font-size: .86rem; line-height: 1.45; }
.promo-details li { padding-left: 14px; position: relative; }
.promo-details li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--copper-hi); }
.promo-details strong { color: var(--ink); }
.promo-featured .promo-details strong { color: #fff; }
.promo-featured .promo-details li::before { background: #fff; }
.promo-featured .promo-details { color: rgba(255, 255, 255, .92); }
.promo-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 12px; }
.promo-terms div { padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.promo-terms dt { font-size: .75rem; color: var(--muted); font-weight: 700; }
.promo-terms dd { margin: 0; font-weight: 800; color: var(--ink); font-size: .92rem; }
.promo-featured { background: linear-gradient(140deg, #d39a74, var(--copper) 55%, #94573a); border-color: rgba(255, 255, 255, .5); color: #fff; }
.promo-featured .promo-tag { background: rgba(255, 255, 255, .22); color: #fff; }
.promo-featured .promo-value { color: #fff; }
.promo-featured .promo-desc { color: rgba(255, 255, 255, .88); }
.promo-featured .promo-terms div { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.promo-featured .promo-terms dt { color: rgba(255, 255, 255, .8); }
.promo-featured .promo-terms dd { color: #fff; }
.promo-featured .btn { margin-top: 14px; align-self: flex-start; background: #fff; color: var(--copper-deep); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); }
.bonus-split { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 1000px) { .bonus-split { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; } }
.bonus-split .shot { margin: 0; }
.terms-box { border-radius: var(--radius); padding: 24px 22px; }
.terms-box h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 850; margin-bottom: 14px; }
.terms-box h3 .ico { color: var(--copper); }
.terms-box dl { display: grid; gap: 10px; margin: 0; }
.terms-box dl > div { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .65); border-left: 3px solid var(--copper); }
.terms-box dt { font-weight: 800; color: var(--ink); }
.terms-box dd { margin: 2px 0 0; font-size: .93rem; }

/* ---------- table of contents ---------- */
.toc-section { padding-top: 0; }
.toc { border-radius: var(--radius); padding: 0; }
.toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; cursor: pointer; list-style: none; font-weight: 850; color: var(--ink); font-size: 1.05rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .chev { width: 14px; height: 14px; color: var(--copper); }
.toc[open] summary .chev { transform: rotate(180deg); }
.toc ol { display: grid; gap: 4px 24px; padding: 0 22px 18px 44px; margin: 0; list-style: decimal; color: var(--copper); font-weight: 800; }
@media (min-width: 700px) { .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.toc li { padding: 0; }
.toc a { display: inline-block; padding: 7px 0; color: var(--ink); font-weight: 650; }
.toc a:hover { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- VIP ---------- */
.sub-title { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 850; margin-bottom: 14px; }
.vip { margin-top: 28px; scroll-margin-top: 96px; }
.vip-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .vip-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.vip-body > p + p { margin-top: 12px; }
.vip-body p { max-width: 75ch; }
.vip-table-wrap { margin-top: 18px; overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .6); box-shadow: var(--shadow-sm); }
.vip-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .92rem; }
.vip-table caption { text-align: left; padding: 12px 14px 4px; font-weight: 800; color: var(--ink); }
.vip-table th, .vip-table td { padding: 10px 12px; text-align: center; border-top: 1px solid var(--line); }
.vip-table thead th { border-top: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.vip-table th[scope="row"], .vip-table thead th:first-child { text-align: left; font-weight: 700; color: var(--ink); }
.vip-table td { font-weight: 800; color: #2f8a55; }
.vip-table td.no { color: var(--muted); font-weight: 500; }
.lvl-bronze { color: #a8653a; } .lvl-silver { color: #7d8794; } .lvl-gold { color: #c08a12; } .lvl-platinum { color: #5b6f86; }
.vip-body h4 { margin: 20px 0 10px; font-size: 1.05rem; color: var(--ink); }
.vip-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .vip-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vip-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-edge); font-size: .92rem; }
.vip-steps strong { display: block; color: var(--ink); }
.step-num { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: #fff; font-weight: 900; background: linear-gradient(135deg, var(--copper-hi), var(--copper-deep)); }
.vip-shot { margin: 0; max-width: 340px; justify-self: center; width: 100%; }
.vip-shot img { width: 100%; height: auto; border-radius: 14px; }
section[id], [id="klub-vip"] { scroll-margin-top: 96px; }

/* ---------- games ---------- */
.cat-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.cat-stats li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); }
.cat-stats strong { font-size: 1.3rem; font-weight: 900; color: var(--copper-deep); line-height: 1.1; }
.cat-stats span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.game-group { margin-top: 22px; }

.game-group h3 { font-size: 1.1rem; font-weight: 850; margin-bottom: 12px; }
.game-row { display: grid; gap: 12px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1099px) {
  .game-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding-left: var(--gutter); }
  .game-row li { scroll-snap-align: start; }
}
.game { display: block; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.game:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.game { position: relative; }
.rtp-note { margin-top: 10px; font-size: .82rem; color: var(--muted); max-width: 90ch; }
.rtp { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: rgba(20, 14, 10, .72); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.game img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.game-meta { display: grid; padding: 8px 10px 10px; line-height: 1.25; }
.game-title { font-weight: 750; font-size: .86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-prov { font-size: .76rem; color: var(--muted); }
.lobby-split { display: grid; gap: 18px; margin-top: 26px; }
@media (min-width: 1000px) { .lobby-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; } }
.lobby-split .shot { margin: 0; }
.lobby-box { border-radius: var(--radius); padding: 22px; }
.lobby-box h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 850; margin-bottom: 14px; }
.lobby-box h3 .ico { color: var(--copper); }
.providers { margin-top: 26px; }
.providers h3 { font-size: 1.1rem; font-weight: 850; margin-bottom: 12px; }
.provider-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.provider-grid li { display: grid; place-items: center; height: 72px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--glass-edge); box-shadow: 0 6px 16px -12px rgba(92, 60, 36, .5); }
.provider-grid img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }

/* ---------- payments ---------- */
.pay-logos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.pay-logos li { display: flex; align-items: center; justify-content: center; gap: 8px; height: 64px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--glass-edge); box-shadow: 0 6px 16px -12px rgba(92, 60, 36, .5); }
.pay-logos img { max-height: 34px; max-width: 100%; width: auto; height: auto; object-fit: contain; min-width: 0; }
.pay-logos li:has(img + img) img { max-width: 46%; }
.pay-split { display: grid; gap: 22px; margin-top: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .pay-split { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.pay-main .sub-title { margin-top: 22px; font-size: 1.2rem; }
.pay-main .sub-title:first-child { margin-top: 0; }
.pay-main > p { max-width: 75ch; }
.pay-table-wrap { border-radius: var(--radius-sm); overflow-x: auto; padding: 0; margin-top: 18px; }
.pay-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: .92rem; }
.pay-table caption { text-align: left; padding: 14px 14px 6px; font-weight: 800; color: var(--ink); }
.pay-table th, .pay-table td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--line); }
.pay-table thead th { border-top: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--copper-deep); }
.pay-table th[scope="row"] { color: var(--ink); font-weight: 800; white-space: nowrap; }
.pay-table td:last-child { color: #2f8a55; font-weight: 800; }
.pay-table td { white-space: nowrap; }
.pay-table td.check { color: var(--copper-deep); font-style: italic; }
.pay-note { margin: 10px 0 0; font-size: .84rem; color: var(--muted); max-width: 80ch; }
.pay-shot { margin: 0; max-width: 320px; width: 100%; justify-self: center; }
.pay-shot img { width: 100%; height: auto; border-radius: 14px; }

/* ---------- score breakdown ---------- */
.score-box { display: grid; gap: 22px; border-radius: var(--radius); padding: 24px 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .score-box { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; padding: 32px 36px; align-items: center; } }
.score-total, .verdict-score { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 20px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .78); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.score-total img, .verdict-score img { width: 56px; height: 56px; }
.score-total .score strong, .verdict-score .score strong { font-size: 3rem; }
.score-list h2 { margin-bottom: 14px; }
.score-list ul { display: grid; gap: 14px 28px; }
@media (min-width: 1000px) { .score-list ul { grid-template-columns: 1fr 1fr; } }
.score-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; color: var(--ink); }
.score-val { color: var(--copper-deep); font-size: 1.05rem; }
.bar { height: 8px; border-radius: 8px; background: rgba(120, 92, 70, .14); overflow: hidden; margin: 6px 0; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--copper-hi), var(--copper)); }
.score-list li p { font-size: .88rem; color: var(--muted); }

/* ---------- registration ---------- */
.reg-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.reg-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius-sm); }
.reg-steps h3 { font-size: 1.05rem; font-weight: 850; margin-bottom: 4px; }
.reg-steps p { font-size: .94rem; }
.kyc { margin-top: 16px; padding: 22px; border-radius: var(--radius); }
.kyc h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 850; margin-bottom: 8px; }
.kyc h3 .ico { color: var(--copper); }
.kyc > p { margin-bottom: 12px; }
.center-cta { margin-top: 18px; }

/* ---------- mobile ---------- */
.mobile-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .mobile-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; } }
.phone-shot { margin: 0; justify-self: center; width: min(70vw, 300px); text-align: center; }
.phone-shot img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(60, 36, 20, .35)); }
.phone-shot figcaption { margin-top: 8px; font-size: .84rem; color: var(--muted); }
.mobile-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.mobile-card { padding: 22px; border-radius: var(--radius); }
.mobile-card h3, .support-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 850; margin-bottom: 14px; }
.mobile-card h3 .ico, .support-card h3 .ico { color: var(--copper); }
.pwa-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pwa-steps li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .65); border-left: 3px solid var(--copper); font-size: .94rem; }
.pwa-steps strong { color: var(--ink); }

/* ---------- support & safety ---------- */
.support-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .support-grid { grid-template-columns: .8fr 1.3fr .9fr; align-items: start; } }
.support-card { padding: 22px; border-radius: var(--radius); }
.support-card p { font-size: .94rem; }
.support-chat { background: linear-gradient(140deg, #d39a74, var(--copper) 55%, #94573a); color: #fff; border-color: rgba(255, 255, 255, .5); }
.support-chat h3, .support-chat h3 .ico { color: #fff; }
.support-card .support-big { font-size: 1.8rem; font-weight: 900; line-height: 1.1; margin-bottom: 8px; }
.bot-flow { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bot-flow li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; }
.bot-flow strong { display: block; color: var(--ink); }
.safety-title { margin-top: 26px; }
.safety-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.safety-grid li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-sm); }
.safety-grid strong { color: var(--ink); }
.safety-grid p { font-size: .88rem; margin-top: 2px; }

/* ---------- verdict ---------- */
.verdict { display: grid; gap: 22px; padding: 26px 22px; border-radius: var(--radius); grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(247, 227, 210, .75)); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
@media (min-width: 800px) { .verdict { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; padding: 34px 36px; align-items: center; } }
.verdict-body h2 { margin-bottom: 12px; }
.verdict-body > p:not(.kicker):not(.fineprint) { max-width: 80ch; }

/* ---------- FAQ ---------- */
.narrow-left .faq { max-width: 900px; }
.faq { display: grid; gap: 10px; }
.faq-item { border-radius: var(--radius-sm); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.02rem; font-weight: 750; }
.faq-item summary .chev { width: 14px; height: 14px; flex: none; color: var(--copper); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-a { padding: 0 20px 18px; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta { display: none; }
@media (max-width: 899px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .25s ease; }
  .sticky-cta.show { transform: none; }
  .sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 18px; background: rgba(255, 255, 255, .9); border: 1px solid var(--glass-edge); box-shadow: 0 -10px 30px -14px rgba(92, 60, 36, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .sticky-cta-inner span { display: grid; line-height: 1.2; }
  .sticky-cta-inner strong { color: var(--ink); }
  .sticky-cta-inner small { color: var(--muted); font-size: .74rem; }
  .sticky-cta .btn { min-height: 42px; padding: 8px 16px; }
  .has-sticky .site-footer { padding-bottom: 96px; }
}

/* ---------- bonus pop-up shown at the verdict ---------- */
.promo-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(2, 14, 10, .6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s ease; }
.promo-pop[hidden] { display: none; }
.promo-pop.show { opacity: 1; }
.promo-pop-card { position: relative; width: min(88vw, 420px); max-height: calc(100vh - 32px); overflow: auto; border-radius: 24px; background: #062317; border: 1px solid rgba(46, 229, 157, .4); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); transform: translateY(14px) scale(.97); transition: transform .3s ease; }
.promo-pop.show .promo-pop-card { transform: none; }
.promo-pop-img { display: block; }
.promo-pop-img img { width: 100%; height: auto; display: block; }
.promo-pop-body { display: grid; gap: 10px; justify-items: center; padding: 6px 18px 18px; text-align: center; }
.promo-pop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 22px; border-radius: 999px; font-weight: 900; font-size: 1.1rem; letter-spacing: .02em; color: #2b1a00;
  background: linear-gradient(180deg, #ffe27a, #f5b91d 55%, #d99a0b); box-shadow: 0 10px 26px -10px rgba(245, 185, 29, .9), inset 0 1px 0 rgba(255, 255, 255, .6); border: 1px solid #ffd860; transition: transform .15s ease, box-shadow .15s ease; }
.promo-pop-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(245, 185, 29, 1); }
.promo-pop-btn span { font-size: 1.4em; line-height: 1; }
.promo-pop-body small { color: #7fa391; font-size: .74rem; }
.promo-pop-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .3); }
.promo-pop-close:hover { background: rgba(0, 0, 0, .75); }

/* ---------- loading window before a casino link (Bober Casino style) ---------- */
.go-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(2, 14, 10, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.go-overlay[hidden] { display: none; }
.go-overlay.show { opacity: 1; }
.go-open { overflow: hidden; }
.go-card { width: min(100%, 400px); padding: 26px 24px 22px; border-radius: 24px; text-align: center; color: #eaf7ef;
  background: radial-gradient(80% 60% at 50% 20%, rgba(46, 229, 157, .14), transparent 70%), linear-gradient(180deg, #0b2e21, #06231a);
  border: 1px solid rgba(46, 229, 157, .38); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); transform: translateY(10px) scale(.98); transition: transform .25s ease; }
.go-overlay.show .go-card { transform: none; }
.go-logo { width: 190px; height: auto; margin: 0 auto 16px; padding: 8px 14px; border-radius: 16px; background: #011413; box-shadow: 0 0 0 1px rgba(46, 229, 157, .25); }
.go-mascot { position: relative; width: 120px; height: 120px; margin: 0 auto 16px; }
.go-mascot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #0b2e21; }
.go-ring { position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(#2ee59d 0 25%, #ffc94a 25% 45%, transparent 45% 100%); animation: go-spin 1s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
@keyframes go-spin { to { transform: rotate(360deg); } }
.go-tag { display: inline-block; padding: 4px 14px; border-radius: 999px; background: #2ee59d; color: #04150f; font-weight: 900; font-size: .78rem; letter-spacing: .04em; margin-bottom: 10px; }
.go-title { margin: 0; font-size: 1.35rem; line-height: 1.25; font-weight: 900; color: #fff; }
.go-title span { color: #ffc94a; }
.go-bar { height: 8px; margin: 18px 0 4px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.go-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2ee59d, #ffc94a); box-shadow: 0 0 14px rgba(46, 229, 157, .7); }
.go-overlay.show .go-bar i { animation: go-fill 1.5s ease-out forwards; }
@keyframes go-fill { to { width: 100%; } }
.go-perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: .78rem; color: #cfe6da; }
.go-perks b { color: #2ee59d; }
.go-card small { display: block; margin-top: 14px; color: #7fa391; font-size: .74rem; }
@media (prefers-reduced-motion: reduce) { .go-ring { animation: none; } .go-overlay.show .go-bar i { animation: none; width: 100%; } }

/* ---------- author ---------- */
.author { display: grid; gap: 22px; align-items: center; border-radius: var(--radius); padding: 26px 22px; }
@media (min-width: 640px) { .author { grid-template-columns: auto 1fr; padding: 32px 36px; gap: 32px; } }
.author-avatar { width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(184, 114, 74, .35), var(--shadow-sm); }
.author h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); }
.author-role { margin: 4px 0 12px; color: var(--copper-deep); font-weight: 700; font-size: .92rem; }
.author-body > p:not(.kicker):not(.author-role) { max-width: 70ch; }
.author-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.author-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); font-size: .85rem; font-weight: 700; }
.author-tags .ico { width: 16px; height: 16px; color: var(--copper); }

/* ---------- guides ---------- */
.guides { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; padding: 10px; transition: transform .18s ease, box-shadow .18s ease; }
.guide:hover { transform: translateY(-3px); }
.guide-img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }
.guide-body { display: flex; flex-direction: column; gap: 18px; flex: 1; padding: 16px 10px 10px; }
.guide h3 { font-size: 1.12rem; font-weight: 800; }
.guide .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 899px) {
  .guides { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-left: var(--gutter); }
  .guide { scroll-snap-align: start; }
}

/* ---------- quick navigation (hero side) ---------- */
.quick-nav { border-radius: var(--radius); padding: 22px 18px 14px; align-self: start; }
@media (min-width: 1100px) { .quick-nav { position: sticky; top: 96px; } }
.quick-nav .kicker { padding: 0 6px; margin-bottom: 10px; }
.quick-nav li + li { border-top: 1px solid var(--line); }
.quick-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-radius: 12px; font-weight: 650; font-size: .92rem; line-height: 1.3; color: var(--ink); transition: background-color .15s, color .15s; }
.quick-nav a:hover { background: rgba(242, 201, 168, .28); color: var(--copper-deep); }
.qn-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, #fff, #f7e3d2); color: var(--copper); box-shadow: inset 0 0 0 1px rgba(184, 114, 74, .18); }
.qn-ico .ico { width: 18px; height: 18px; }
.qn-label { flex: 1; }
.quick-nav a > .ico { width: 16px; height: 16px; color: var(--copper); opacity: .6; transition: transform .15s, opacity .15s; }
.quick-nav a:hover > .ico { opacity: 1; transform: translateX(3px); }

/* ---------- error pages ---------- */
.error-page { padding: 96px 0 110px; text-align: center; }

/* ---------- "coming soon" placeholder pages ---------- */
.soon { padding: 6px 0 48px; }
.soon-card { position: relative; max-width: 760px; margin: 8px auto 0; padding: 40px 24px 32px; border-radius: var(--radius); text-align: center; }
@media (min-width: 640px) { .soon-card { padding: 52px 48px 40px; } }
.soon-ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: rgba(242, 201, 168, .45); color: var(--copper-deep); }
.soon-ico .ico { width: 32px; height: 32px; }
.soon-tag { display: inline-block; padding: 4px 14px; border-radius: 999px; background: linear-gradient(135deg, #fff1df, #ffe0c2); border: 1px solid #f6c79d; color: #a2501f; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.soon-card h1 { margin-top: 14px; font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem); font-weight: 850; text-wrap: balance; }
.soon-card .lead { margin: 14px auto 0; max-width: 56ch; font-size: 1.05rem; line-height: 1.7; }
.soon-read { margin: 26px auto 26px; max-width: 520px; padding: 18px 20px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .6); border: 1px solid var(--line); text-align: left; }
.soon-read > p { font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.soon-read a { display: flex; gap: 10px; align-items: center; padding: 8px 0; color: var(--copper-deep); font-weight: 700; }
.soon-read a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.soon-read .ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .soon-card .btn { width: 100%; } }
.error-code { font-size: clamp(4.5rem, 3rem + 8vw, 8rem); font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--copper-hi), var(--copper-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; }
.error-page h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 850; }
.error-page .lead { margin-left: auto; margin-right: auto; }
.hero-cta.center { justify-content: center; }
.btn-gold { color: #fff; background: linear-gradient(135deg, var(--copper-hi), var(--copper) 55%, var(--copper-deep)); }
.btn-outline { background: var(--glass-strong); border-color: var(--glass-edge); color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { margin-top: 28px; padding: 56px 0 28px; font-size: .94rem; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .55)); border-top: 1px solid var(--glass-edge); }
.footer-top { display: grid; gap: 32px; }
@media (min-width: 1000px) { .footer-top { grid-template-columns: 300px 1fr; gap: 48px; } }
.footer-about-title { margin-top: 18px; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--copper-deep); font-weight: 800; }
.footer-brand p { margin-top: 8px; color: var(--muted); max-width: 44ch; font-size: .9rem; }
.footer-nav { display: grid; gap: 24px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
@media (min-width: 1200px) { .footer-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer-cat { margin-bottom: 10px; font-weight: 850; color: var(--ink); }
.footer-cat a { display: inline-block; padding: 4px 0; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(184, 114, 74, .45); text-underline-offset: 4px; }
.footer-cat a:hover { color: var(--copper-deep); }
.footer-col li { font-size: .88rem; }
.footer-info { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-info span { color: var(--muted); }
.footer-col h2, .footer-rg h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--copper-deep); margin-bottom: 14px; font-weight: 800; }
.footer-col li + li { margin-top: 2px; }
.footer-col a { display: inline-block; padding: 6px 0; color: var(--text); transition: color .15s; }
.footer-col a:hover { color: var(--copper-deep); }
.footer-rg { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.rg-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rg-logos a, .rg-age { display: grid; place-items: center; height: 60px; padding: 10px 18px; border-radius: 14px; background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-edge); transition: border-color .15s, background-color .15s; }
.rg-logos img { height: 34px; width: auto; filter: brightness(0); opacity: .62; transition: opacity .15s; }
.rg-age img { height: 30px; filter: none; opacity: 1; }
.rg-logos a:has(.rg-name) { display: flex; align-items: center; gap: 10px; }
.rg-name { font-weight: 800; font-size: .9rem; line-height: 1.15; color: rgba(0, 0, 0, .62); max-width: 7.5em; }
.rg-logos a:hover .rg-name { color: rgba(0, 0, 0, .9); }
.rg-logos a:hover { border-color: var(--copper-hi); background: #fff; }
.rg-logos a:hover img { opacity: .9; }
.disclaimer { margin-top: 32px; padding: 24px; border-radius: var(--radius); color: var(--muted); font-size: .88rem; line-height: 1.65; background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-edge); }
.disclaimer p + p { margin-top: 10px; }
.disclaimer strong { color: var(--ink); }
.disc-title { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.age-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #d9473c; font-size: .8rem; font-weight: 900; color: #c23a30; flex: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.top-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.to-top { display: inline-block; padding: 10px 0; color: var(--copper-deep); font-weight: 700; }

/* ---------- very small phones (≤374px): hero fit ---------- */
@media (max-width: 374px) {
  .hero-main { padding: 22px 16px; }
  .hero-mascot { width: 96px; margin: -4px -4px 6px 8px; }
  .badge-new, .badge-soft, .badge-img { font-size: .8rem; gap: 6px; padding-right: 11px; }
  .badge-new img, .badge-img img { width: 24px; height: 24px; }
}

/* ---------- review: CTA plaques (Bober Casino colours, like the pop-up and loading window) ---------- */
.cta-band-wrap, .read-tip-wrap { padding: 8px 0; }
.cta-band {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; overflow: hidden;
  padding: 22px 20px; border-radius: var(--radius); color: #d8eee2; text-align: center;
  background:
    radial-gradient(70% 90% at 0% 50%, rgba(46, 229, 157, .16), transparent 70%),
    radial-gradient(50% 80% at 100% 0%, rgba(255, 201, 74, .16), transparent 70%),
    linear-gradient(135deg, #0b2e21, #04150f);
  border: 1px solid rgba(46, 229, 157, .35);
  box-shadow: 0 26px 50px -30px rgba(4, 21, 15, .9);
}
.cta-band-mascot { width: 104px; height: auto; justify-self: center; border-radius: 22px; box-shadow: 0 0 0 2px rgba(46, 229, 157, .35), 0 14px 26px -12px rgba(0, 0, 0, .6); }
.cta-band-kicker { color: #2ee59d; font-weight: 900; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.cta-band-title { margin-top: 4px; color: #fff; font-weight: 900; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); line-height: 1.2; }
.cta-band-text > p:last-child { margin-top: 6px; font-size: .97rem; line-height: 1.55; max-width: 60ch; }
.cta-band-action { display: grid; gap: 8px; justify-items: center; }
.cta-band-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 28px; border-radius: 999px;
  background: linear-gradient(180deg, #ffd96b, #ffc94a 55%, #e9a92a); color: #2a1a00; font-weight: 900; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(255, 201, 74, .8), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .15s ease, box-shadow .15s ease;
}
.cta-band-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(255, 201, 74, 1), 0 0 0 5px rgba(255, 201, 74, .2); }
.cta-band-btn:focus-visible { outline: 3px solid #2ee59d; outline-offset: 3px; }
.cta-band-action small { color: #8fb3a1; font-size: .75rem; }
@media (min-width: 720px) {
  .cta-band { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; padding: 22px 32px 22px 22px; text-align: left; }
  .cta-band-mascot { width: 112px; }
}
@media (max-width: 480px) { .cta-band-btn { width: 100%; } .cta-band-action { justify-items: stretch; } }

/* ---------- review: "Warto przeczytać" (guide interlink) ---------- */
.read-tip { display: grid; gap: 18px; align-items: center; padding: 18px; border-radius: var(--radius); }
@media (min-width: 760px) { .read-tip { grid-template-columns: 240px minmax(0, 1fr); gap: 26px; padding: 20px 28px 20px 20px; } }
.read-tip-img { width: 100%; height: auto; aspect-ratio: 640 / 520; object-fit: cover; border-radius: 16px; background: #1d2636; }
@media (max-width: 759px) { .read-tip-img { max-height: 200px; } }
.read-tip .kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.read-tip .kicker .ico { width: 18px; height: 18px; }
.read-tip-title { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); font-weight: 850; color: var(--ink); line-height: 1.25; }
.read-tip-body > p:not(.kicker):not(.read-tip-title) { margin-top: 8px; font-size: .97rem; line-height: 1.65; max-width: 78ch; }
.read-tip .btn { margin-top: 14px; }

/* ---------- header: speech bubble under the logo → the review (hidden once the page scrolls) ---------- */
.logo-wrap { position: relative; flex: none; }
.logo-bubble {
  position: absolute; top: calc(100% + 10px); left: -4px; z-index: 5; width: max-content; max-width: calc(100vw - 32px); white-space: nowrap;
  padding: 7px 12px; border-radius: 12px; background: #fff; border: 1px solid #f0caa8; box-shadow: var(--shadow-sm);
  font-size: .8rem; font-weight: 750; line-height: 1.3; color: var(--copper-deep);
  transition: opacity .2s ease, transform .2s ease; animation: bubble-in .35s ease .4s both;
}
.logo-bubble::before { content: ""; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #f0caa8; border-top: 1px solid #f0caa8; transform: rotate(45deg); }
.logo-bubble:hover { color: var(--ink); border-color: var(--copper); }
.logo-bubble:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.site-header.scrolled .logo-bubble, .nav-open .logo-bubble { opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden; }
/* Room for the one-line bubble so it never covers the breadcrumbs or the H1. */
.site-header.with-bubble ~ main { padding-top: 40px; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-bubble { animation: none; } }

/* ---------- review: provider-logo image for the providers-guide tip ---------- */
.read-tip-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; aspect-ratio: auto; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.read-tip-logos img { width: 100%; height: 56px; object-fit: contain; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
@media (max-width: 759px) { .read-tip-logos { max-height: none; } }

/* ---------- Poradniki: post listing (2 per row, 1 on phones) ---------- */
.posts-index { padding: 6px 0 40px; }
.posts-index h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 850; margin: 6px 0 22px; }
.pi-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .pi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.pi-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; padding: 10px; }
.pi-media { display: block; border-radius: 16px; overflow: hidden; background: #1d2636; }
.pi-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease; }
.pi-card:hover .pi-media img { transform: scale(1.03); }
.pi-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 12px 12px; }
.pi-body .kicker { margin: 0; }
.pi-body h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.25; }
.pi-body h2 a:hover { color: var(--copper-deep); }
/* "More coming soon" tile after the post cards */
.pi-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; padding: 28px 24px; border-radius: var(--radius); border: 2px dashed rgba(184, 114, 74, .4); background: rgba(255, 255, 255, .45); text-align: center; }
.pi-soon-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(184, 114, 74, .12); color: var(--copper-deep); }
.pi-soon-ico .ico { width: 26px; height: 26px; }
.pi-soon .kicker { margin: 0; }
.pi-soon h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.25; }
.pi-soon p:last-child { margin: 0; max-width: 34ch; color: var(--muted); }
.pi-body > p:not(.kicker) { font-size: .96rem; line-height: 1.6; color: var(--text); }
.pi-body .btn { margin-top: auto; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .pi-media img { transition: none; } }

/* ---------- Strona główna (/glowna/) ---------- */
.gl-hero { padding: 18px 0 10px; }
.gl-hero-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 22px; border-radius: var(--radius); }
.gl-hero-cta .btn { white-space: normal; text-align: center; }
@media (min-width: 960px) { .gl-hero-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; padding: 44px 44px; } }
.gl-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 850; text-wrap: balance; }
.gl-lead { margin: 14px 0 0; font-size: 1.05rem; max-width: 62ch; }
.gl-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gl-hero-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gl-compass { display: none; }
.gl-orbit { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.25; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 800; font-size: .9rem; color: var(--ink); }
.gl-orbit .ico { width: 20px; height: 20px; flex: none; color: var(--copper); }
@media (min-width: 960px) {
  .gl-hero-art { position: relative; display: block; aspect-ratio: 1; max-width: 400px; justify-self: center; width: 100%; }
  .gl-hero-art::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 2px dashed rgba(184, 114, 74, .35); }
  .gl-compass { position: absolute; inset: 28%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f6ece2); box-shadow: var(--shadow), inset 0 0 0 1px var(--glass-edge); }
  .gl-compass .logo-mark { width: 62%; height: auto; }
  .gl-orbit { position: absolute; white-space: nowrap; }
  .gl-orbit-1 { top: 4%; left: 50%; transform: translateX(-50%); }
  .gl-orbit-2 { top: 46%; right: -4%; }
  .gl-orbit-3 { bottom: 4%; left: 50%; transform: translateX(-50%); }
  .gl-orbit-4 { top: 46%; left: -8%; }
}
.gl-features { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .gl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gl-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gl-feature { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius-sm); }
.gl-feature h3 { font-size: 1.15rem; }
.gl-feature p { margin: 0; flex: 1; }
.gl-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(184, 114, 74, .12); color: var(--copper-deep); }
.gl-ico .ico { width: 24px; height: 24px; }
.gl-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--copper-deep); }
.gl-more .ico { width: 18px; height: 18px; transition: transform .2s; }
.gl-more:hover .ico { transform: translateX(3px); }
.gl-benefits { display: grid; gap: 18px; }
@media (min-width: 960px) { .gl-benefits { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 40px; align-items: start; } .gl-benefits .gl-note { grid-column: 2; } }
.gl-benefit-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .gl-benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gl-benefit-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-edge); }
.gl-benefit-list strong { color: var(--ink); }
.gl-benefit-list p { margin: 4px 0 0; font-size: .94rem; line-height: 1.5; }
.gl-check { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--copper-hi), var(--copper)); color: #fff; }
.gl-check .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.gl-note, .gl-start { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(242, 201, 168, .25); border: 1px solid rgba(184, 114, 74, .25); font-size: .95rem; line-height: 1.55; }
.gl-note .ico, .gl-start .ico { width: 20px; height: 20px; flex: none; color: var(--copper-deep); margin-top: 2px; }
.gl-start { margin-top: 18px; }
.gl-start a { color: var(--copper-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.gl-review { display: grid; gap: 20px; padding: 14px; border-radius: var(--radius); }
@media (min-width: 860px) { .gl-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 18px 32px 18px 18px; } }
.gl-review-media { display: block; border-radius: 18px; overflow: hidden; background: #1d2636; }
.gl-review-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease; }
.gl-review:hover .gl-review-media img { transform: scale(1.03); }
.gl-review-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 8px 8px; }
.gl-review-meta { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(184, 114, 74, .35); border-left: 3px solid var(--copper); background: rgba(255, 255, 255, .6); font-size: .86rem; font-weight: 700; color: var(--ink); }
.gl-review-meta .ico { width: 16px; height: 16px; color: var(--copper); }
.gl-review-body h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.gl-review-body h3 a { display: inline-block; padding: 8px 0; }
.gl-review-body h3 a:hover { color: var(--copper-deep); }
.gl-review-body > p { margin: 0; }
.gl-review-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 4px 0; }
.gl-review-facts div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); }
.gl-review-facts dt { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.gl-review-facts dd { margin: 2px 0 0; font-weight: 800; color: var(--ink); }
.gl-review .fineprint { margin: 0; }
.gl-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
@media (min-width: 1100px) { .gl-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl-howto { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: gl; }
@media (min-width: 700px) { .gl-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gl-howto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl-howto li { counter-increment: gl; position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius-sm); }
.gl-howto li::after { content: counter(gl); position: absolute; top: 12px; right: 16px; font-size: 1.6rem; font-weight: 900; color: rgba(184, 114, 74, .22); }
.gl-howto h3 { font-size: 1.05rem; padding-right: 24px; }
.gl-howto p { margin: 4px 0 0; font-size: .94rem; line-height: 1.55; }
.gl-rg { display: flex; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(135deg, #2a221d, #3b2d24); color: #f3e9df; }
.gl-rg h2 { color: #fff; font-size: 1.3rem; }
.gl-rg p { margin: 6px 0 0; line-height: 1.6; }
.gl-rg a { color: #f2c9a8; text-decoration: underline; text-underline-offset: 3px; }
.gl-rg-age { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; border: 3px solid #f2c9a8; font-weight: 900; font-size: 1.2rem; color: #f2c9a8; }
@media (max-width: 479px) { .gl-rg { flex-direction: column; align-items: flex-start; padding: 20px; } .gl-hero-panel { padding: 24px 18px; } }

/* Shared editorial framework for every blog post (Poradniki).
   Hero, TOC, reading progress, sections, author, FAQ, related, a11y, responsive and print rules.
   Posts must not override these; post widgets go in src/blog/posts/<slug>.css (bundled after this file).
   Look: site cream/copper base + deep charcoal-navy panels with muted gold, serif headings. */
:root {
  --ed-bg: #151b27;
  --ed-bg-2: #1d2636;
  --ed-bg-3: #0f141e;
  --ed-line: rgba(255, 255, 255, .11);
  --ed-text: #d7dce5;
  --ed-head: #f7efe2;
  --ed-muted: #a5afbf;
  --gold: #d9b36c;
  --gold-hi: #f0d39a;
  --gold-deep: #8a6428;
  --ok: #2f7d55;
  --ok-dark: #7fd1a5;
  --bad: #b2452f;
  --bad-dark: #ff9a85;
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/* Components set display:flex/grid; the hidden attribute must still win. */
.ar-body [hidden], .ar-hero [hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- reading progress ---------- */
.ar-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.ar-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--copper-hi), var(--gold), var(--copper)); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- dark panel ---------- */
.ed-dark {
  position: relative; color: var(--ed-text);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(217, 179, 108, .14), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(184, 114, 74, .14), transparent 60%),
    linear-gradient(160deg, var(--ed-bg-2), var(--ed-bg));
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 30px 60px -34px rgba(15, 20, 30, .7);
}
.ed-dark h2, .ed-dark h3 { color: var(--ed-head); }
.ed-dark :focus-visible { outline-color: var(--gold); }
.ed-dark a:not(.btn) { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hero ---------- */
.ar-hero { padding: 4px 0 8px; }
.ar-hero-panel { display: grid; gap: 22px; border-radius: 28px; padding: 28px 20px 22px; overflow: hidden; }
@media (min-width: 640px) { .ar-hero-panel { padding: 40px 36px 30px; } }
@media (min-width: 960px) { .ar-hero-panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 32px; padding: 52px 52px 34px; } }
.ar-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; margin-bottom: 14px; }
.ar-kicker::before { content: ""; width: 28px; height: 2px; background: var(--gold); }
.ar-hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 1.35rem + 2.8vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em; color: var(--ed-head); text-wrap: balance; }
.ar-lead { margin-top: 18px; font-size: 1.08rem; line-height: 1.7; color: var(--ed-text); max-width: 62ch; }
.ar-learn { margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ed-line); border-left: 3px solid var(--gold); }
.ar-learn > p { color: var(--ed-head); font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
.ar-learn li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; line-height: 1.55; }
.ar-learn li + li { margin-top: 6px; }
.ar-learn .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--gold); }
.ar-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ar-meta li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--ed-line); font-size: .86rem; color: var(--ed-text); }
.ar-meta .ico { width: 16px; height: 16px; color: var(--gold); }
.ar-meta time { color: var(--ed-head); font-weight: 700; }
.ar-hero-art { margin: 0; justify-self: center; width: min(100%, 520px); }
.ar-hero-art img { width: 100%; height: auto; }
.ar-hero-note { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--ed-line); color: var(--ed-muted); font-size: .88rem; }
.ar-hero-note .ico { width: 18px; height: 18px; color: var(--gold); margin-top: 1px; }
@media (max-width: 959px) { .ar-hero-art { order: -1; width: min(100%, 360px); } }

/* ---------- layout + table of contents ---------- */
.ar-layout { display: grid; gap: 8px; margin-top: 18px; }
@media (min-width: 1100px) { .ar-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; margin-top: 28px; } }
.ar-aside { min-width: 0; }
@media (min-width: 1100px) { .ar-aside { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; } }
.ar-toc { border-radius: var(--radius-sm); background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.ar-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 850; color: var(--ink); }
.ar-toc summary::-webkit-details-marker { display: none; }
.ar-toc summary > span { display: inline-flex; align-items: center; gap: 8px; }
.ar-toc summary .ico { width: 18px; height: 18px; color: var(--copper); }
.ar-toc summary .chev { width: 14px; height: 14px; color: var(--copper); transition: transform .2s; }
.ar-toc[open] summary .chev { transform: rotate(180deg); }
.ar-toc ol { counter-reset: toc; padding: 0 10px 12px; }
.ar-toc li { counter-increment: toc; }
.ar-toc a { position: relative; display: flex; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--text); font-size: .93rem; line-height: 1.35; transition: background-color .15s, color .15s; }
.ar-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: .75rem; font-weight: 800; color: var(--copper); padding-top: 2px; font-variant-numeric: tabular-nums; }
.ar-toc a:hover { background: rgba(242, 201, 168, .3); color: var(--ink); }
.ar-toc a.is-active { background: rgba(242, 201, 168, .42); color: var(--copper-deep); font-weight: 750; }
.ar-toc a.is-active::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--copper); }

/* ---------- article body ---------- */
.ar-body { min-width: 0; }
.ar-section { padding: 30px 0; scroll-margin-top: 90px; }
.ar-section + .ar-section:not(.ed-dark) { border-top: 1px solid var(--line); }
.ed-dark + .ar-section { border-top: 0 !important; }
.ar-section.ed-dark { margin: 18px 0; padding: 28px 18px; border-radius: 26px; }
@media (min-width: 640px) { .ar-section.ed-dark { padding: 40px 36px; } }
@media (min-width: 900px) { .ar-section { padding: 40px 0; } }
.ar-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--copper); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; margin-bottom: 10px; }
.ar-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.ed-dark .ar-eyebrow { color: var(--gold); }
.ar-section h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); line-height: 1.15; text-wrap: balance; max-width: 26ch; }
.ar-section-lead { margin-top: 12px; font-size: 1.06rem; line-height: 1.7; max-width: 68ch; }
/* Content that follows a section heading directly (no lead), e.g. the FAQ list, never touches the heading. */
.ar-section > h2 + :not(.ar-section-lead) { margin-top: 20px; }
.ed-dark .ar-section-lead { color: var(--ed-text); }
.ar-prose { margin-top: 16px; }
.ar-prose p { font-size: 1.06rem; line-height: 1.75; max-width: 68ch; }
.ar-prose p + p, .ar-prose ul + p, .ar-prose p + ul { margin-top: 14px; }
.ar-prose a { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 3px; }
.ar-points li { position: relative; padding-left: 20px; font-size: 1.04rem; line-height: 1.65; max-width: 66ch; }
.ar-points li + li { margin-top: 8px; }
.ar-points li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--copper); transform: rotate(45deg); }
.ar-small { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: .86rem; color: var(--muted); max-width: 80ch; }
.ar-small .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--copper); }
.ed-dark .ar-small { color: var(--ed-muted); }
.ex-tag { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 10px; border-radius: 999px; border: 1px dashed rgba(143, 84, 52, .55); color: var(--copper-deep); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .6); }
/* Scoped to posts (the CSS is bundled site-wide); :where() keeps the original specificity. */
:where(.ar-body) figure { margin: 0; }
:where(.ar-body) figcaption { margin-top: 12px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
:where(.ar-body) figcaption a { display: inline-block; padding: 6px 0; color: var(--copper-deep); text-decoration: underline; text-underline-offset: 3px; }


/* ---------- related ---------- */
.ar-related { margin-top: 10px; }

.ar-author .author-avatar { background: #ece6f3; }

/* ---------- small phones ---------- */
@media (max-width: 400px) {
  .ar-hero-panel { border-radius: 22px; }
}

/* ---------- print ---------- */
#print-sheet { display: none; }
@media print {
  @page { margin: 16mm; }
  html, body { background: #fff !important; }
  .site-header, .site-footer, .ar-progress, .ar-aside, .go-overlay, .ar-related, .skip, .ar-hero-art, .crumbs, [data-print] { display: none !important; }
  .ed-dark { background: #fff !important; color: #000 !important; border: 1px solid #ccc !important; box-shadow: none !important; }
  .ed-dark h1, .ed-dark h2, .ed-dark h3, .ed-dark p, .ed-dark li { color: #000 !important; }
  .glass { box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  a { color: #000 !important; }

  /* Print button [data-print="<id>"]: only that sheet is printed. */
  html.print-sheet body > *:not(#print-sheet) { display: none !important; }
  html.print-sheet #print-sheet { display: block !important; page: sheet; padding: 14mm 16mm; font: 12pt/1.45 var(--font); color: #000; }
  /* Zero page margins = the browser prints no header/footer (date, URL, page title). */
  @page sheet { margin: 0; }
}

/* ================= shared components (same look on every post) ================= */
/* ---------- C: calculator ---------- */
.wc { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 860px) { .wc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } }
.wc-inputs { display: grid; gap: 14px; }
.wc-basis { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wc-basis legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; font-weight: 800; color: var(--ed-head); font-size: .95rem; }
.wc-basis label { position: relative; display: block; cursor: pointer; }
.wc-basis input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wc-basis label > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .04); transition: border-color .15s, background-color .15s; }
.wc-basis strong { color: var(--ed-head); font-size: .95rem; }
.wc-basis small { color: var(--ed-muted); font-size: .8rem; }
.wc-basis input:checked + span { border-color: var(--gold); background: rgba(217, 179, 108, .14); box-shadow: inset 0 0 0 1px var(--gold); }
.wc-basis input:checked + span strong::before { content: "● "; color: var(--gold); }
.wc-basis input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.wc-field { display: grid; gap: 6px; transition: opacity .15s; }
.wc-field > label { font-weight: 700; color: var(--ed-head); font-size: .93rem; }
.wc-field > label small { color: var(--ed-muted); font-weight: 600; }
.wc-field.is-inactive { opacity: .55; }
.wc-input { display: flex; align-items: center; border-radius: 12px; background: var(--ed-bg-3); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .15s, box-shadow .15s; }
.wc-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 179, 108, .25); }
.wc-input input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent; color: #fff; font: 600 1rem/1 var(--font); font-variant-numeric: tabular-nums; }
.wc-input input:focus { outline: none; }
.wc-input span { padding: 0 14px; color: var(--ed-muted); font-weight: 700; }
.wc-input:has(input[aria-invalid="true"]) { border-color: var(--bad-dark); }
.wc-hint { font-size: .8rem; color: var(--ed-muted); }
.wc-err { display: flex; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--bad-dark); }
.wc-err::before { content: "⚠"; }
.wc-reset { justify-self: start; background: rgba(255, 255, 255, .06); border-color: var(--ed-line); color: var(--ed-head); }
.wc-reset:hover { border-color: var(--gold); color: var(--gold-hi); }
.wc-results { display: grid; gap: 16px; padding: 20px; border-radius: 20px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
@media (min-width: 860px) { .wc-results { position: sticky; top: 100px; } }
.wc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.wc-stat { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ed-line); }
.wc-stat-main { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(217, 179, 108, .2), rgba(217, 179, 108, .06)); border-color: rgba(217, 179, 108, .45); }
.wc-stat dt { font-size: .8rem; color: var(--ed-muted); font-weight: 700; }
.wc-stat dd { margin: 4px 0 0; color: var(--ed-head); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wc-stat-main dd { font-family: var(--serif); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); color: var(--gold-hi); }
.wc-meter, .det-meter { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.wc-meter i, .det-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--copper-hi), var(--gold)); transition: width .3s ease; }
.wc-note { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--ok-dark); }
.wc-note .ico { width: 18px; height: 18px; }
.wc-formula { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--ed-bg-3); border: 1px dashed rgba(217, 179, 108, .4); }
.wc-formula span { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--gold); }
.wc-formula output { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92rem; color: var(--ed-head); overflow-wrap: anywhere; }

/* ---------- E: rules ---------- */
.rule { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.rule:first-of-type { margin-top: 26px; }
.rule-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 4px; }
.rule-num { font-family: var(--serif); font-weight: 700; font-size: clamp(2.8rem, 2rem + 3vw, 4.2rem); line-height: .85; background: linear-gradient(160deg, var(--gold-hi), var(--copper) 60%, var(--copper-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rule-kicker { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
.rule h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); line-height: 1.2; margin-top: 2px; }
.rule-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1000px) {
  .rule-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: start; }
  .rule:nth-of-type(even) .rule-visual { order: -1; }
}
.rule-lead { font-weight: 650; color: var(--ink); }
.rule-visual { margin-top: 16px; }
.rule-visual > figure, .rule-visual > ul { padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.rule-visual > figure { display: flex; flex-direction: column; gap: 12px; }

.formula { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.formula-alt { background: var(--ed-bg); border-color: var(--ed-bg); color: var(--ed-text); }
.formula-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--copper); }
.formula-alt .formula-label { color: var(--gold); }
.formula-math { margin-top: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1rem; }
.formula-res { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.formula-alt .formula-res { color: var(--gold-hi); }

.contrib-q { font-size: .98rem; }
.contrib ul { display: grid; gap: 12px; }
.contrib li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.contrib-name { font-weight: 750; color: var(--ink); }
.contrib-pct { font-size: .82rem; font-weight: 800; color: var(--copper-deep); text-align: right; }
.contrib-bar { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: rgba(42, 34, 29, .08); overflow: hidden; }
.contrib-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--copper-hi), var(--copper)); }
.contrib-need { grid-column: 1 / -1; font-size: .88rem; color: var(--text); }

.expiry-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.expiry-dates li { padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .8rem; line-height: 1.35; color: var(--muted); }
.expiry-dates span { display: block; font-weight: 800; color: var(--ink); font-size: .92rem; }
.expiry-dates .is-today { background: var(--ed-bg); border-color: var(--ed-bg); color: var(--ed-muted); }
.expiry-dates .is-today span { color: var(--gold-hi); }
.expiry-track { position: relative; height: 12px; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(42, 34, 29, .08) 0 calc(100% / 30 - 2px), transparent calc(100% / 30 - 2px) calc(100% / 30)); }
.expiry-track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--copper-hi), var(--copper)); }
.expiry-track b { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ed-bg); border: 3px solid var(--gold); }
.expiry-left { font-size: .95rem; }
.expiry-left strong { color: var(--copper-deep); }

.maxbet-limit { font-size: .98rem; }
.maxbet-rows { display: grid; gap: 10px; }
.maxbet-rows li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.mb-val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mb-bar { position: relative; height: 14px; border-radius: 999px; background: rgba(42, 34, 29, .08); }
.mb-bar::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--limit); width: 2px; margin-left: -1px; background: var(--ink); }
.mb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--copper-hi), var(--copper)); }
.is-over .mb-bar i { background: repeating-linear-gradient(45deg, var(--bad) 0 6px, #d9785f 6px 12px); }
.mb-status { grid-column: 2; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .84rem; font-weight: 750; color: var(--ok); }
.mb-status .ico { width: 16px; height: 16px; }
.mb-status small { font-size: .75rem; font-weight: 600; color: var(--muted); }
.is-over .mb-status { color: var(--bad); }

.paths { gap: 10px; }
.path { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.path-early { border: 1.5px dashed rgba(178, 69, 47, .55); }
.path-done { border: 1.5px solid rgba(47, 125, 85, .45); }
.path-when { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; color: var(--ink); }
.path-when .ico { width: 20px; height: 20px; }
.path-early .path-when .ico { color: var(--bad); }
.path-done .path-when .ico { color: var(--ok); }
.path-then { margin-top: 6px; font-size: .93rem; line-height: 1.55; }

.tiles { display: grid; gap: 10px; }
@media (min-width: 480px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tiles li { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.tiles .ico { width: 22px; height: 22px; color: var(--copper); margin-bottom: 2px; }
.tiles strong { color: var(--ink); font-size: .96rem; }
.tiles span { font-size: .88rem; line-height: 1.5; color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--ink); }
.chips .ico { width: 18px; height: 18px; color: var(--copper); }

/* ---------- 5: trap detector ---------- */
.detector { margin-top: 22px; padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); transition: box-shadow .2s; }
@media (min-width: 640px) { .detector { padding: 26px 28px; } }
.detector.is-done { box-shadow: 0 0 0 2px var(--gold), var(--shadow); }
.det-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.det-pct { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--copper-deep); min-width: 3.2ch; font-variant-numeric: tabular-nums; }
.det-left { font-weight: 750; color: var(--ink); margin-bottom: 8px; }
.det-meter { background: rgba(42, 34, 29, .08); }
.det-list { margin: 14px 0 0; padding: 0; border: 0; display: grid; gap: 6px; }
@media (min-width: 860px) { .det-list { grid-template-columns: 1fr 1fr; column-gap: 12px; } }
.det-item { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); cursor: pointer; line-height: 1.45; transition: border-color .15s, background-color .15s; }
.det-item:hover { border-color: var(--copper-hi); }
.det-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.det-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(143, 84, 52, .45); background: #fff; color: transparent; }
.det-box .ico { width: 16px; height: 16px; stroke-width: 3; }
.det-item:has(input:checked) { background: rgba(242, 201, 168, .3); border-color: var(--copper-hi); }
.det-item input:checked + .det-box { background: var(--copper); border-color: var(--copper); color: #fff; }
.det-item:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.det-done { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--ed-bg); color: var(--ed-text); }
.det-done .ico { width: 24px; height: 24px; color: var(--gold); }
.det-done strong { color: var(--ed-head); }
.detector > .btn { margin-top: 14px; }

/* ---------- 8: quiz ---------- */
.quiz { margin-top: 22px; max-width: 760px; }
.qz-count { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.qz-track { height: 4px; margin: 10px 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.qz-track i { display: block; height: 100%; background: var(--gold); transition: width .3s; }
.qz-q { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.3; }
.qz-q:focus { outline: none; }
.qz-options { display: grid; gap: 10px; margin-top: 18px; }
.qz-opt { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; text-align: left; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); color: var(--ed-head); font-weight: 650; line-height: 1.35; transition: border-color .15s, background-color .15s; }
.qz-opt:not(:disabled):hover { border-color: var(--gold); background: rgba(217, 179, 108, .1); }
.qz-opt:disabled { cursor: default; }
.qz-letter { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-weight: 800; color: var(--gold-hi); }
.qz-mark { font-size: .8rem; font-weight: 800; white-space: nowrap; }
.qz-opt.is-correct { border-color: var(--ok-dark); background: rgba(127, 209, 165, .12); }
.qz-opt.is-correct .qz-mark { color: var(--ok-dark); }
.qz-opt.is-wrong { border-color: var(--bad-dark); border-style: dashed; background: rgba(255, 154, 133, .1); }
.qz-opt.is-wrong .qz-mark { color: var(--bad-dark); }
.qz-opt:disabled:not(.is-correct):not(.is-wrong) { opacity: .6; }
.qz-feedback { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ed-line); }
.qz-feedback.is-ok { border-left: 4px solid var(--ok-dark); }
.qz-feedback.is-bad { border-left: 4px dashed var(--bad-dark); }
.qz-verdict { font-weight: 800; color: var(--ed-head); }
.qz-expl { margin-top: 6px; line-height: 1.6; }
.qz-next { margin-top: 14px; }
.qz-result { text-align: left; }
.qz-result-title { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
.qz-result-title:focus { outline: none; }
.qz-score { display: flex; gap: 8px; margin: 14px 0; }
.qz-score span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; }
.qz-score .is-ok { background: rgba(127, 209, 165, .18); color: var(--ok-dark); border: 2px solid var(--ok-dark); }
.qz-score .is-bad { background: rgba(255, 154, 133, .12); color: var(--bad-dark); border: 2px dashed var(--bad-dark); }
.qz-msg { font-size: 1.05rem; }
.qz-review-title { margin-top: 14px; font-weight: 800; color: var(--ed-head); }
.qz-review { margin-top: 6px; display: grid; gap: 4px; }
.qz-review li::before { content: "→ "; color: var(--gold); }
.qz-review a { display: inline-block; padding: 4px 0; }
.qz-restart { margin-top: 18px; background: rgba(255, 255, 255, .06); border-color: var(--ed-line); color: var(--ed-head); }
.qz-restart:hover { border-color: var(--gold); color: var(--gold-hi); }

/* ---------- 9: printable checklist ---------- */
.sheet { margin-top: 22px; padding: 22px 20px; border-radius: 8px; background: #fff; border: 1px solid #e7ddd0; box-shadow: 0 1px 0 #efe6da, 0 24px 44px -28px rgba(92, 60, 36, .5); background-image: linear-gradient(90deg, transparent 38px, rgba(184, 114, 74, .18) 38px, rgba(184, 114, 74, .18) 39px, transparent 39px); }
@media (min-width: 640px) { .sheet { padding: 30px 34px 26px 56px; background-image: linear-gradient(90deg, transparent 40px, rgba(184, 114, 74, .18) 40px, rgba(184, 114, 74, .18) 41px, transparent 41px); } }
.sheet-list { margin: 0; }
.sheet-list li:first-child { padding-top: 0; }
.sheet-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee5d9; }
.sheet-box { width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--ink); border-radius: 4px; }
.sheet-list strong { display: block; color: var(--ink); }
.sheet-list span:not(.sheet-box):not(.sheet-line) { display: block; font-size: .92rem; color: var(--text); }
.sheet-line { display: block; height: 22px; border-bottom: 1px dotted #b9a995; }
.sheet-print { margin-top: 18px; }

/* ---------- shared: comparison table (desktop) / cards (below 1100px) ---------- */
.pt-wrap { margin-top: 22px; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, .7); }
.pt { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pt th, .pt td { padding: 12px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; }
.pt thead th { background: var(--ed-bg); color: var(--ed-head); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 0; }
.pt tbody th { color: var(--ink); font-weight: 800; white-space: nowrap; }
.pt tbody th .ico { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-right: 6px; color: var(--copper); }
.pt tr:last-child > * { border-bottom: 0; }
.pt-cards { display: none; gap: 10px; margin-top: 22px; }
@media (max-width: 1099px) { .pt-wrap { display: none; } .pt-cards { display: grid; } }
.pt-card { border-radius: 16px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.pt-card summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 800; color: var(--ink); }
.pt-card summary::-webkit-details-marker { display: none; }
.pt-card summary .ico { width: 20px; height: 20px; color: var(--copper); }
.pt-card summary span { flex: 1; }
.pt-card summary .chev { width: 13px; height: 13px; }
.pt-card[open] summary .chev { transform: rotate(180deg); }
.pt-card dl { display: grid; gap: 10px; margin: 0; padding: 0 16px 16px; }
.pt-card dt { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.pt-card dd { margin: 2px 0 0; font-size: .95rem; }

/* ---------- shared: myth → fact cards ---------- */
.myths { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 760px) { .myths { grid-template-columns: 1fr 1fr; } }
.myth { height: 100%; border-radius: 18px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.myth summary { display: grid; gap: 8px; padding: 16px 18px; cursor: pointer; list-style: none; }
.myth summary::-webkit-details-marker { display: none; }
.myth-tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(178, 69, 47, .1); color: var(--bad); border: 1px dashed rgba(178, 69, 47, .5); }
.myth-tag-fact { background: rgba(47, 125, 85, .1); color: var(--ok); border: 1px solid rgba(47, 125, 85, .4); }
.myth-tag-fact .ico { width: 14px; height: 14px; }
.myth-text { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.35; text-decoration: line-through; text-decoration-color: rgba(178, 69, 47, .45); text-decoration-thickness: 1.5px; }
.myth-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; font-weight: 800; font-size: .9rem; color: var(--copper-deep); }
.myth-cta .chev { width: 12px; height: 12px; }
.myth[open] .myth-cta { display: none; }
.myth-fact { display: grid; gap: 8px; padding: 0 18px 18px; font-size: .98rem; line-height: 1.6; }

/* ---------- shared: glossary ---------- */
.gloss { display: grid; gap: 8px; margin-top: 22px; }
@media (min-width: 760px) { .gloss { grid-template-columns: 1fr 1fr; } }
.gloss details { border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); }
.gloss summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 10px 16px; cursor: pointer; list-style: none; font-weight: 800; color: var(--ink); }
.gloss summary::-webkit-details-marker { display: none; }
.gloss summary .chev { width: 13px; height: 13px; color: var(--copper); }
.gloss details[open] summary .chev { transform: rotate(180deg); }
.gloss p { padding: 0 16px 14px; font-size: .95rem; line-height: 1.55; }

@media print {
  .pf, .cc, .pj-tabs, .pt-cards { display: none !important; }
  .pt-wrap { display: block !important; box-shadow: none; }
  .pj-panel[hidden] { display: block !important; }
  .pm-card, .myth, .steps-col, .flow { box-shadow: none !important; break-inside: avoid; }
}
.myth-why { padding: 0 18px 18px; margin-top: -8px; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.myth-why strong { color: var(--ink); }

/* ---------- shared: pill tabs, numbered steps, select field, checklist actions ---------- */
.pj-tabs { position: relative; display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--ed-bg); }
.pj-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 20px; border-radius: 999px; color: var(--ed-text); font-weight: 800; }
.pj-tab .ico { width: 16px; height: 16px; color: var(--gold); }
.pj-tab[aria-selected="true"] { background: var(--gold); color: #2a1d06; }
.pj-tab[aria-selected="true"] .ico { color: #2a1d06; }
.pj-tab:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
[data-tabs]:not(.is-enhanced) .pj-tabs { display: none; }
.steps { counter-reset: st; display: grid; gap: 10px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; }
.steps li::before { content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--copper-hi), var(--copper)); color: #fff; font-weight: 800; font-size: .9rem; }
.steps strong { color: var(--ink); }
.steps span { font-size: .93rem; line-height: 1.5; }
.cc-field { display: grid; gap: 6px; }
.cc-field label { font-weight: 800; color: var(--ed-head); font-size: .95rem; }
.cc-field select { height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: var(--ed-bg-3); color: #fff; font: 600 1rem var(--font); }
.cc-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.det-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- shared components: small phones, motion, print ---------- */
@media (max-width: 400px) {
  .wc-basis { grid-template-columns: 1fr; }
  .qz-opt { grid-template-columns: 30px minmax(0, 1fr); }
  .qz-letter { width: 30px; height: 30px; }
  .qz-mark { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-meter i, .det-meter i, .qz-track i { transition: none; }
}
@media print {
  .wc, .detector button, .quiz { display: none !important; }
  .rule-visual > *, .detector, .sheet { box-shadow: none !important; }
  .rule, .sheet-list li { break-inside: avoid; }
  #print-sheet .sheet-list li { border-bottom: 1px solid #bbb; padding: 9px 0; }
  #print-sheet .sheet-box { border-color: #000; }
  #print-sheet .sheet-line { border-bottom: 1px dotted #777; height: 20px; }
}

/* Post widgets: "Zasady bonusu powitalnego" (funds, calculator extras, timeline, rule visuals,
   comparison, fine-print translator). Calculator, rule chapters, checklist, quiz and sheet: blog.css. Framework styles: src/blog/blog.css. */

/* ---------- C: calculator extras (side-by-side bases, explain boxes) ---------- */
.wc-compare > p { font-size: .82rem; font-weight: 800; color: var(--ed-muted); margin-bottom: 8px; }
.wc-cmp-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .86rem; }
.wc-cmp-row + .wc-cmp-row { margin-top: 8px; }
.wc-cmp-row strong { color: var(--ed-head); font-variant-numeric: tabular-nums; }
.wc-cmp-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.wc-cmp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--copper-hi); transition: width .3s ease; }
.wc-cmp-both .wc-cmp-bar i { background: repeating-linear-gradient(45deg, var(--gold) 0 6px, var(--gold-deep) 6px 12px); }
.wc-explain { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 700px) { .wc-explain { grid-template-columns: 1fr 1fr; } }
.wc-explain > div { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ed-line); }
.wc-explain h3 { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 6px; }
.wc-explain p { font-size: .95rem; line-height: 1.6; }
.wc-explain strong { color: var(--gold-hi); }

/* ---------- B: funds ---------- */
.funds { margin-top: 26px; }
.funds-flow { display: grid; gap: 14px; counter-reset: fund; }
@media (min-width: 640px) { .funds-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .funds-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fund { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 18px 18px; border-radius: 18px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); overflow: hidden; }
.fund::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; }
.fund-deposit::before { background: var(--copper); }
.fund-bonus::before { background: repeating-linear-gradient(45deg, var(--copper) 0 6px, var(--copper-hi) 6px 12px); }
.fund-wins::before { background: radial-gradient(circle, var(--copper) 2px, transparent 2.5px) 0 0 / 8px 6px, var(--peach); }
.fund-free::before { background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.fund-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(242, 201, 168, .4); color: var(--copper-deep); }
.fund-ico .ico { width: 22px; height: 22px; }
.fund-step { position: absolute; right: 16px; top: 18px; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: rgba(143, 84, 52, .3); }
.fund h3 { font-size: 1.06rem; margin-top: 4px; }
.fund-tag { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: rgba(42, 34, 29, .06); color: var(--ink); }
.fund-free .fund-tag { background: rgba(217, 179, 108, .3); color: #5e4417; }
.fund p { font-size: .93rem; line-height: 1.55; }

.balance { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); }
.balance-title { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.balance-bar { display: flex; height: 44px; border-radius: 12px; overflow: hidden; font-size: .88rem; font-weight: 800; }
.balance-bar span { flex: 1; display: grid; place-items: center; padding: 0 6px; text-align: center; line-height: 1.15; }
.bb-dep { background: var(--copper); color: #fff; }
.bb-bon { background: repeating-linear-gradient(45deg, #f6dcc5 0 8px, #efc9a8 8px 16px); color: var(--copper-deep); }
.balance-note { font-size: .95rem; line-height: 1.6; max-width: 72ch; }

/* ---------- D: timeline ---------- */
.timeline { position: relative; margin-top: 24px; display: grid; gap: 12px; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--copper-hi), var(--copper), var(--gold)); }
.timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.tl-num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ed-bg); color: var(--gold-hi); font-family: var(--serif); font-weight: 700; font-size: 1rem; box-shadow: 0 0 0 4px var(--bg); }
.timeline li > div { padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1px solid var(--glass-edge); }
.timeline h3 { font-size: 1.02rem; }
.timeline p { margin-top: 4px; font-size: .95rem; line-height: 1.55; }
@media (min-width: 900px) {
  .timeline { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .timeline::before { display: none; }
  .timeline li > div { min-height: 100%; }
}

/* ---------- 6: comparison ---------- */
.compare { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 900px) { .compare { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; } }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); font-size: .95rem; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { background: var(--ed-bg); color: var(--ed-head); font-weight: 800; border-bottom: 0; }
.compare-table thead th:nth-child(3) { color: var(--gold-hi); }
.compare-table tbody th { color: var(--muted); font-weight: 700; font-size: .88rem; }
.compare-table tr:last-child > * { border-bottom: 0; }
.compare-total th, .compare-total td { background: rgba(242, 201, 168, .3); }
.compare-total strong { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.compare-bars { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--ed-bg); }
.compare-bars div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.compare-bars span { font-family: var(--serif); font-weight: 700; color: var(--ed-head); font-size: 1.1rem; }
.compare-bars i { display: block; height: 18px; border-radius: 6px; background: var(--copper-hi); }
.compare-bars .is-b i { background: repeating-linear-gradient(45deg, var(--gold) 0 7px, var(--gold-deep) 7px 14px); }
.compare-bars b { grid-column: 2; color: var(--ed-text); font-size: .9rem; }

/* ---------- 7: fine-print translator ---------- */
.fp { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 860px) { .fp.is-enhanced { grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; } }
.fp:not(.is-enhanced) .fp-tabs { display: none; }
.fp:not(.is-enhanced) .fp-panels { display: grid; gap: 12px; }
.fp-tabs { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
@media (min-width: 860px) { .fp-tabs { flex-direction: column; overflow: visible; padding: 0; } }
.fp-tab { flex: none; scroll-snap-align: start; min-height: 42px; padding: 9px 14px; border-radius: 12px; text-align: left; font-weight: 700; font-size: .92rem; color: var(--text); background: rgba(255, 255, 255, .6); border: 1px solid var(--line); transition: background-color .15s, border-color .15s, color .15s; }
.fp-tab:hover { border-color: var(--copper-hi); color: var(--ink); }
.fp-tab[aria-selected="true"] { background: var(--ed-bg); border-color: var(--ed-bg); color: var(--gold-hi); }
.fp-tab[aria-selected="true"]::before { content: "▸ "; }
.fp-panel { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
@media (min-width: 640px) { .fp-panel { padding: 26px 28px; } }
.fp-name { font-family: var(--serif); font-size: 1.4rem; }
.fp-clause { margin: 14px 0 0; padding: 16px 18px; border-radius: 12px; background: #fbf7f1; border: 1px solid #eadfce; border-left: 4px solid var(--gold); }
.fp-clause p { font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.fp-clause footer { margin-top: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fp-dl { display: grid; gap: 12px; margin: 16px 0 0; }
.fp-dl div { display: grid; gap: 2px; }
.fp-dl dt { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.fp-dl dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.fp-ex dd { padding: 10px 12px; border-radius: 10px; background: rgba(242, 201, 168, .25); font-weight: 600; }

/* ---------- small phones ---------- */
@media (max-width: 400px) {
  .wc-cmp-row { grid-template-columns: 96px minmax(0, 1fr) auto; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-cmp-bar i { transition: none; }
}

@media print {
  .wc-explain, .fp-tabs { display: none !important; }
  .fund, .fp-panel { box-shadow: none !important; }
  .fp-panel[hidden] { display: block !important; }
  .fund, .fp-panel, .timeline li { break-inside: avoid; }
}

/* Post widgets: "Którą metodę płatności wybrać i jak?" (flows, explorer, finder, rule visuals, cost-calculator
   extras, compatibility checker, journey, step guide). Shared: table→cards, myths, glossary in blog.css.
   Calculator base, rule chapters, checklist, quiz and sheet come from src/blog/blog.css. */

/* ---------- reality check: flows ---------- */
.flows { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 900px) { .flows { grid-template-columns: 1fr 1.25fr; } }
.flow { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .66); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.flow-out { background: var(--ed-bg); border-color: var(--ed-bg); color: var(--ed-text); }
.flow-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; color: var(--ink); margin-bottom: 14px; }
.flow-title .ico { width: 18px; height: 18px; color: var(--copper); }
.flow-out .flow-title { color: var(--gold-hi); }
.flow-out .flow-title .ico { color: var(--gold); transform: scaleX(-1); }
.flow ol { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; counter-reset: fl; }
.flow li { position: relative; flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-align: center; font-size: .86rem; font-weight: 700; color: var(--ink); }
.flow-out li { background: rgba(255, 255, 255, .06); border-color: var(--ed-line); color: var(--ed-head); }
.flow li .ico { width: 22px; height: 22px; color: var(--copper); }
.flow-out li .ico { color: var(--gold); }
.flow li + li::before { content: "→"; position: absolute; left: -9px; top: 50%; transform: translate(-50%, -50%); font-weight: 900; color: var(--copper); font-size: .9rem; }
.flow-out li + li::before { color: var(--gold); }
@media (max-width: 560px) {
  .flow ol { flex-direction: column; gap: 14px; }
  .flow li { flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 14px; text-align: left; }
  .flow li + li::before { content: "↓"; left: 50%; top: -8px; transform: translate(-50%, -50%); }
}
.flows figcaption { grid-column: 1 / -1; margin-top: 0; }
.reasons { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 760px) { .reasons { grid-template-columns: 1fr 1fr; } }
.reasons li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); font-size: .96rem; line-height: 1.55; }
.reasons .ico { width: 22px; height: 22px; color: var(--copper); margin-top: 1px; }
.reasons strong { color: var(--ink); }

/* ---------- explorer ---------- */
.pm-grid { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 640px) { .pm-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pm-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.pm-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--ed-bg); color: var(--gold); }
.pm-ico .ico { width: 22px; height: 22px; }
.pm-card h3 { font-size: 1.08rem; margin-top: 4px; }
.pm-card > p { font-size: .95rem; line-height: 1.55; }
.pm-card details { margin-top: auto; border-top: 1px solid var(--line); padding-top: 4px; }
.pm-card summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; cursor: pointer; list-style: none; font-weight: 800; color: var(--copper-deep); }
.pm-card summary::-webkit-details-marker { display: none; }
.pm-card summary .chev { width: 13px; height: 13px; color: var(--copper); }
.pm-card details[open] summary .chev { transform: rotate(180deg); }
.pm-card dl { display: grid; gap: 10px; margin: 6px 0 4px; }
.pm-card dt { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.pm-card dd { margin: 2px 0 0; font-size: .93rem; line-height: 1.55; }
.pm-card dd li { position: relative; padding-left: 14px; }
.pm-card dd li::before { content: "•"; position: absolute; left: 2px; color: var(--copper); }

/* ---------- finder ---------- */
.pf { display: grid; gap: 20px; margin-top: 24px; }
.pf-controls { display: grid; gap: 16px; }
/* Desktop: controls on top in two columns, results spread across the full width below. */
@media (min-width: 1000px) {
  .pf-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
  .pf-controls .pf-checks-group { grid-column: 1 / -1; }
  .pf-out { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .pf-out .pf-results, .pf-out .pf-empty { grid-column: 1 / -1; }
}
.pf-group { margin: 0; padding: 0; border: 0; }
.pf-group legend { padding: 0; margin-bottom: 8px; font-weight: 800; color: var(--ed-head); font-size: .95rem; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chips label { position: relative; cursor: pointer; }
.pf-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pf-chips span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--ed-text); font-weight: 700; font-size: .9rem; transition: border-color .15s, background-color .15s; }
.pf-chips span .ico { width: 16px; height: 16px; color: var(--gold); }
.pf-chips input:checked + span { border-color: var(--gold); background: rgba(217, 179, 108, .16); color: var(--ed-head); box-shadow: inset 0 0 0 1px var(--gold); }
.pf-chips input[type="radio"]:checked + span::before { content: "●"; color: var(--gold); font-size: .7rem; }
.pf-checks input:checked + span::after { content: "✓"; color: var(--gold); font-weight: 900; }
.pf-chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pf .wc-reset { justify-self: start; }
.pf-out { display: grid; gap: 14px; min-width: 0; }
.pf-op-note { padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(217, 179, 108, .45); color: var(--ed-text); font-size: .93rem; }
.pf-questions { padding: 14px 16px; border-radius: 14px; background: rgba(217, 179, 108, .1); border: 1px solid rgba(217, 179, 108, .35); }
.pf-q-title { font-weight: 800; color: var(--gold-hi); margin-bottom: 6px; }
.pf-questions li { position: relative; padding-left: 16px; font-size: .93rem; line-height: 1.55; }
.pf-questions li + li { margin-top: 4px; }
.pf-questions li::before { content: "?"; position: absolute; left: 0; font-weight: 900; color: var(--gold); }
.pf-empty { color: var(--ed-muted); }
.pf-results { display: grid; gap: 12px; }
@media (min-width: 640px) { .pf-results { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pf-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-card { padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
.pf-card h3 { font-size: 1.02rem; margin-bottom: 10px; }
.pf-card dl { display: grid; gap: 8px; margin: 0; }
.pf-row { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.pf-row.is-focus { background: rgba(217, 179, 108, .14); box-shadow: inset 3px 0 0 var(--gold); }
.pf-row dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ed-muted); }
.pf-focus { padding: 1px 8px; border-radius: 999px; background: var(--gold); color: #2a1d06; letter-spacing: 0; text-transform: none; font-size: .75rem; }
.pf-row dd { margin: 0; display: grid; gap: 2px; }
.pf-label { font-weight: 800; color: var(--ed-head); font-size: .92rem; }
.pf-note { font-size: .88rem; line-height: 1.5; color: var(--ed-text); }

/* ---------- rules: scenario / check / red flag + visuals ---------- */
.rule-scenario { display: grid; gap: 8px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); }
.rule-scenario p { font-size: .97rem; line-height: 1.6; }
.rule-check { margin-top: 14px; }
.rule-check > p { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink); }
.rule-check > p .ico { width: 18px; height: 18px; color: var(--ok); }
.rule-check li { position: relative; padding-left: 18px; font-size: .97rem; line-height: 1.55; }
.rule-check li + li { margin-top: 4px; }
.rule-check li::before { content: "☐"; position: absolute; left: 0; color: var(--copper); }
.rule-flag { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px !important; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed rgba(178, 69, 47, .5); background: rgba(178, 69, 47, .05); font-size: .95rem !important; }
.rule-flag .ico { width: 20px; height: 20px; flex: none; color: var(--bad); }

.mini-flows { gap: 10px; }
.mini-flow { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.mf-out { background: var(--ed-bg); border-color: var(--ed-bg); color: var(--ed-text); }
.mf-label { font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); }
.mf-out .mf-label { color: var(--gold); }
.mini-flow ol { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-flow li { padding: 4px 10px; border-radius: 999px; background: rgba(242, 201, 168, .35); font-size: .85rem; font-weight: 700; color: var(--ink); }
.mf-out li { background: rgba(255, 255, 255, .08); color: var(--ed-head); }
.mini-flow li + li::before { content: "→ "; color: var(--copper); }
.mf-out li + li::before { color: var(--gold); }
.mf-count { font-size: .82rem; color: var(--muted); }
.mf-out .mf-count { color: var(--ed-muted); }

.fee-split-title { font-weight: 800; color: var(--ink); }
.fee-bar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; font-weight: 800; font-size: .88rem; }
.fee-bar span { display: grid; place-items: center; color: #fff; }
.fs-provider { background: var(--copper); }
.fs-fx { background: repeating-linear-gradient(45deg, #8f5434 0 7px, #b8724a 7px 14px); }
.fs-op { background: transparent; border: 2px dashed var(--copper); }
.fee-legend { display: grid; gap: 6px; font-size: .9rem; }
.fee-legend li { display: flex; align-items: center; gap: 8px; }
.fee-legend i { flex: none; width: 16px; height: 16px; border-radius: 4px; }
.fee-total { font-size: .97rem; }
.fee-total strong { color: var(--copper-deep); }

.stages ol { display: grid; gap: 8px; }
.stages li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.stages li span { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ed-bg); color: var(--gold-hi); font-family: var(--serif); font-weight: 700; }
.stages li strong { color: var(--ink); }
.stages li small { color: var(--muted); font-size: .85rem; }
.stages .is-optional { border-style: dashed; background: rgba(255, 255, 255, .5); }
.stages .is-optional span { background: transparent; border: 2px dashed var(--copper); color: var(--copper-deep); }

.fx-chain ol { display: grid; gap: 6px; }
.fx-chain li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.fx-chain li strong { font-variant-numeric: tabular-nums; color: var(--ink); }
.fx-chain li small { color: var(--muted); font-size: .85rem; text-align: right; }
.fx-chain .fx-end { background: var(--ed-bg); border-color: var(--ed-bg); }
.fx-chain .fx-end strong { color: var(--gold-hi); font-family: var(--serif); font-size: 1.2rem; }
.fx-chain .fx-end small { color: var(--ed-muted); }

.verify-list { display: grid; gap: 10px; }
@media (min-width: 480px) { .verify-list { grid-template-columns: 1fr 1fr; } }
.verify-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.verify-list .ico { width: 22px; height: 22px; color: var(--copper); }
.verify-list strong { color: var(--ink); font-size: .96rem; }
.verify-list span { font-size: .88rem; color: var(--text); }

.sec-diagram { gap: 10px; }
.sec-col { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.sec-col .ico { grid-row: span 2; width: 24px; height: 24px; color: var(--copper); }
.sec-col strong { color: var(--ink); }
.sec-col span { font-size: .9rem; line-height: 1.5; }
.sec-no { border-style: dashed; border-color: rgba(178, 69, 47, .5); }
.sec-no .ico { color: var(--bad); }

.limit-split p { font-size: .97rem; }
.limit-split ol { display: grid; gap: 8px; }
.limit-split li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .9rem; }
.limit-split li span { color: var(--muted); font-weight: 700; }
.limit-split li i { display: block; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--copper-hi), var(--copper)); }
.limit-split li b { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- cost calculator extras ---------- */
.cc-stats .wc-stat-main { order: 10; }
.cc-fees { grid-column: 1 / -1; }
.cc-warn { color: var(--bad-dark) !important; }

/* ---------- compatibility checker ---------- */
.cc { display: grid; gap: 18px; margin-top: 22px; padding: 20px; border-radius: 22px; background: var(--ed-bg); color: var(--ed-text); box-shadow: var(--shadow); }
@media (min-width: 900px) { .cc { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; padding: 26px 28px; } }
.cc-controls { display: grid; gap: 16px; align-content: start; }
.cc-policy { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .04); cursor: pointer; line-height: 1.45; color: var(--ed-head); font-weight: 650; }
.cc-policy input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cc-policy .det-box { border-color: rgba(217, 179, 108, .6); background: transparent; }
.cc-policy input:checked + .det-box { background: var(--gold); border-color: var(--gold); color: #2a1d06; }
.cc-policy:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-out { padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
.cc-out-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--ed-head); margin-bottom: 10px; }
.cc-list { display: grid; gap: 8px; }
.cc-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ed-muted); font-weight: 900; font-size: .8rem; }
.cc-ok .cc-mark { background: rgba(127, 209, 165, .2); color: var(--ok-dark); }
.cc-warn .cc-mark { background: rgba(255, 154, 133, .18); color: var(--bad-dark); }
.cc-warn strong { color: var(--bad-dark); }
.cc-ok strong { color: var(--ok-dark); }
.cc-list li { position: relative; padding-left: 32px; font-size: .95rem; line-height: 1.55; }
.cc-list .cc-mark { position: absolute; left: 0; top: 1px; }


/* ---------- payment journey ---------- */
.pj { margin-top: 22px; }
.pj-tab#pj-tab-wyplata .ico { transform: scaleX(-1); }
.pj-panel { margin-top: 16px; }
.pj-panel:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; border-radius: 12px; }
.pj-steps { position: relative; display: grid; gap: 10px; }
.pj-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--copper-hi), var(--gold)); }
.pj-steps details { position: relative; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.pj-steps summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px 6px 0; cursor: pointer; list-style: none; font-weight: 800; color: var(--ink); }
.pj-steps summary::-webkit-details-marker { display: none; }
.pj-num { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -1px; border-radius: 50%; background: var(--ed-bg); color: var(--gold-hi); font-family: var(--serif); font-weight: 700; box-shadow: 0 0 0 4px var(--bg); }
.pj-steps summary > span:nth-child(2) { flex: 1; }
.pj-steps summary .chev { width: 13px; height: 13px; color: var(--copper); }
.pj-steps details[open] summary .chev { transform: rotate(180deg); }
.pj-steps details p { padding: 0 16px 14px 56px; font-size: .97rem; line-height: 1.6; }

/* ---------- step-by-step guide ---------- */
.steps-2 { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 900px) { .steps-2 { grid-template-columns: 1fr 1fr; } }
.steps-col { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.steps-col:last-child { background: var(--ed-bg); border-color: var(--ed-bg); color: var(--ed-text); }
.steps-col h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 12px; }
.steps-col:last-child h3 { color: var(--ed-head); }
.steps-col:last-child .steps li::before { background: var(--gold); color: #2a1d06; }
.steps-col:last-child .steps strong { color: var(--ed-head); }


/* Post widgets: "Kasyna krypto czy tylko fiat" (basics, comparison tool, flows, difference visuals, simulator
   extras, wallets, fee explainer, network checker, ease accordion, scenarios).
   Two identities inside the site palette: .is-fiat = cream + copper (banking), .is-crypto = navy + gold (network).
   Calculator base, rule chapters, checklist, quiz, tabs, steps, table→cards, myths, glossary: blog.css. */

/* Defined on :root so every crypto-styled block (not only .is-crypto) can use it. */
:root { --cr-grid: linear-gradient(rgba(217, 179, 108, .06) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(217, 179, 108, .06) 1px, transparent 1px) 0 0 / 18px 18px; }
.sub-h { font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-top: 30px; }
.note-strong { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(217, 179, 108, .14); border: 1px solid rgba(143, 84, 52, .3); border-left: 4px solid var(--gold); font-size: .98rem; line-height: 1.6; }
.note-strong .ico { width: 22px; height: 22px; flex: none; color: var(--copper-deep); margin-top: 1px; }

/* ---------- basics ---------- */
.basics { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 860px) { .basics { grid-template-columns: 1fr 1fr; } }
.basic { padding: 22px; border-radius: 20px; }
.basic.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; box-shadow: var(--shadow-sm); }
.basic.is-crypto { background: var(--cr-grid), var(--ed-bg); color: var(--ed-text); box-shadow: var(--shadow-sm); }
.basic-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 12px; }
.basic.is-fiat .basic-ico { background: rgba(184, 114, 74, .14); color: var(--copper-deep); }
.basic.is-crypto .basic-ico { background: rgba(217, 179, 108, .16); color: var(--gold); }
.basic-ico .ico { width: 24px; height: 24px; }
.basic h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
.basic.is-crypto h3 { color: var(--ed-head); }
.basic.is-crypto strong { color: var(--gold-hi); }
.basic p { line-height: 1.7; }
.asset-net { display: grid; gap: 10px; align-items: center; margin-top: 16px; }
@media (min-width: 760px) { .asset-net { grid-template-columns: 1fr auto 1fr auto 1.3fr; } }
.an-box { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); text-align: center; }
.an-box strong { color: var(--ink); }
.an-box span { font-size: .88rem; color: var(--text); }
.an-result { background: var(--ed-bg); border-color: var(--ed-bg); }
.an-result strong { color: var(--gold-hi); }
.an-result span { color: var(--ed-text); }
.an-plus { justify-self: center; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--copper); }
.asset-net figcaption { grid-column: 1 / -1; }

/* ---------- comparison tool ---------- */
.cx { margin-top: 24px; }
.cx-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-filter { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--ed-text); font-weight: 700; font-size: .9rem; }
.cx-filter[aria-pressed="true"] { border-color: var(--gold); background: rgba(217, 179, 108, .16); color: var(--ed-head); box-shadow: inset 0 0 0 1px var(--gold); }
.cx-filter[aria-pressed="true"]::before { content: "● "; color: var(--gold); font-size: .7rem; }
.cx-filter:focus-visible, .cx-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cx-body { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 900px) { .cx-body { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; } }
.cx-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
@media (min-width: 900px) { .cx-list { display: grid; overflow: visible; padding: 0; } }
.cx-list li[hidden] { display: none; }
.cx-item { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; text-align: left; color: var(--ed-text); font-weight: 700; font-size: .92rem; border: 1px solid transparent; scroll-snap-align: start; white-space: nowrap; }
@media (min-width: 900px) { .cx-item { white-space: normal; } }
.cx-item span { font-size: .75rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.cx-item:hover { background: rgba(255, 255, 255, .05); }
.cx-item[aria-pressed="true"] { background: rgba(217, 179, 108, .14); border-color: rgba(217, 179, 108, .5); color: var(--ed-head); }
.cx-card { padding: 18px; border-radius: 18px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
.cx-card h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 12px; }
.cx-cols { display: grid; gap: 10px; }
@media (min-width: 640px) { .cx-cols { grid-template-columns: 1fr 1fr; } }
.cx-col { padding: 14px; border-radius: 14px; line-height: 1.6; font-size: .96rem; }
.cx-col.is-fiat { background: #fffaf3; color: var(--text); }
.cx-col.is-crypto { background: var(--cr-grid), #0f141e; border: 1px solid rgba(217, 179, 108, .35); }
.cx-label { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.cx-col.is-fiat .cx-label { color: var(--copper-deep); }
.cx-col.is-crypto .cx-label { color: var(--gold); }
.cx-label .ico { width: 16px; height: 16px; }
.cx-diff { margin-top: 12px; line-height: 1.6; }
.cx-diff strong { color: var(--gold-hi); }
.cx-consider { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(217, 179, 108, .45); line-height: 1.55; }
.cx-consider .ico { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }
.cx-consider strong { color: var(--ed-head); }

/* ---------- flows with selectable steps ---------- */
.flows2 { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 1000px) { .flows2 { grid-template-columns: 1fr 1fr; } }
.fl2 { padding: 18px; border-radius: 20px; }
.fl2.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; box-shadow: var(--shadow-sm); }
.fl2.is-crypto { background: var(--cr-grid), var(--ed-bg); color: var(--ed-text); box-shadow: var(--shadow-sm); }
.fl2-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 850; margin-bottom: 12px; }
.fl2-title .ico { width: 20px; height: 20px; }
.fl2.is-fiat .fl2-title { color: var(--ink); } .fl2.is-fiat .fl2-title .ico { color: var(--copper); }
.fl2.is-crypto .fl2-title { color: var(--gold-hi); } .fl2.is-crypto .fl2-title .ico { color: var(--gold); }
.fl2-steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .fl2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fl2-step { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 76px; padding: 10px; border-radius: 12px; text-align: left; font-size: .84rem; font-weight: 700; line-height: 1.3; }
.fl2.is-fiat .fl2-step { background: #fff; border: 1px solid #ecd9c3; color: var(--ink); }
.fl2.is-crypto .fl2-step { background: rgba(255, 255, 255, .05); border: 1px solid var(--ed-line); color: var(--ed-head); }
.fl2-step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .78rem; font-weight: 800; }
.fl2.is-fiat .fl2-step span { background: rgba(184, 114, 74, .15); color: var(--copper-deep); }
.fl2.is-crypto .fl2-step span { background: rgba(217, 179, 108, .18); color: var(--gold-hi); }
.fl2.is-fiat .fl2-step[aria-selected="true"] { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.fl2.is-crypto .fl2-step[aria-selected="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.fl2-step[aria-selected="true"] span { background: currentColor; }
.fl2.is-fiat .fl2-step[aria-selected="true"] span { background: var(--copper); color: #fff; }
.fl2.is-crypto .fl2-step[aria-selected="true"] span { background: var(--gold); color: #2a1d06; }
.fl2-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fl2-panel { margin-top: 12px; padding: 14px 16px; border-radius: 14px; line-height: 1.6; }
.fl2.is-fiat .fl2-panel { background: rgba(242, 201, 168, .25); }
.fl2.is-crypto .fl2-panel { background: rgba(0, 0, 0, .25); border: 1px solid var(--ed-line); }
.fl2.is-crypto .fl2-panel strong { color: var(--gold-hi); }
.fl2-panel strong { display: block; margin-bottom: 4px; }
.fl2-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-tabs]:not(.is-enhanced) .fl2-steps { display: none; }

/* ---------- difference chapters: fiat / crypto lists ---------- */
.fc-lists { display: grid; gap: 10px; margin: 14px 0; }
@media (min-width: 560px) { .fc-lists { grid-template-columns: 1fr 1fr; } }
.fc { padding: 14px 16px; border-radius: 14px; }
.fc.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; }
.fc.is-crypto { background: var(--cr-grid), var(--ed-bg); color: var(--ed-text); }
.fc > p { display: inline-flex; align-items: center; gap: 6px; font-weight: 850 !important; font-size: .82rem !important; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.fc.is-fiat > p { color: var(--copper-deep); }
.fc.is-crypto > p { color: var(--gold); }
.fc > p .ico { width: 16px; height: 16px; }
.fc li { position: relative; padding-left: 14px; font-size: .94rem; line-height: 1.5; }
.fc li + li { margin-top: 4px; }
.fc li::before { content: "•"; position: absolute; left: 1px; }
.fc.is-fiat li::before { color: var(--copper); }
.fc.is-crypto li::before { color: var(--gold); }
.fc-wide { margin-top: 18px; }

.infra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); display: grid !important; gap: 10px; }
.infra-col { padding: 12px; border-radius: 14px; }
.infra-col.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; }
.infra-col.is-crypto { background: var(--ed-bg); }
.infra-col p { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; margin-bottom: 6px; }
.infra-col.is-fiat p { color: var(--copper-deep); } .infra-col.is-crypto p { color: var(--gold); }
.infra-col p .ico { width: 16px; height: 16px; }
.infra-col svg { width: 100%; height: auto; }
.infra figcaption { grid-column: 1 / -1; }
@media (max-width: 379px) { .infra { grid-template-columns: minmax(0, 1fr); } } /* one column: "scentralizowane" doesn't fit half a phone */

.fee-cmp-row { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; font-size: .92rem; }
.fee-cmp-row span { display: flex; align-items: center; gap: 8px; }
.fee-cmp-row .ico { width: 18px; height: 18px; flex: none; }
.fee-cmp-row.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; color: var(--ink); }
.fee-cmp-row.is-fiat .ico { color: var(--copper); }
.fee-cmp-row.is-crypto { background: var(--ed-bg); color: var(--ed-text); }
.fee-cmp-row.is-crypto .ico { color: var(--gold); }
.fee-cmp-row.is-crypto b { color: var(--gold-hi); }

.tracks { gap: 10px; }
.track { padding: 12px 14px; border-radius: 14px; }
.track.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; }
.track.is-crypto { background: var(--ed-bg); color: var(--ed-text); }
.track > p { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .85rem; margin-bottom: 8px; }
.track.is-fiat > p { color: var(--copper-deep); } .track.is-crypto > p { color: var(--gold); }
.track > p .ico { width: 16px; height: 16px; }
.track ol { display: flex; flex-wrap: wrap; gap: 6px; }
.track li { padding: 5px 10px; border-radius: 999px; font-size: .84rem; font-weight: 700; }
.track.is-fiat li { background: rgba(242, 201, 168, .35); color: var(--ink); }
.track.is-crypto li { background: rgba(255, 255, 255, .08); color: var(--ed-head); }
.track li + li::before { content: "→ "; }
.track .is-separate { border: 1.5px dashed var(--gold); background: transparent !important; }
.track .is-separate small { display: block; font-size: .75rem; color: var(--gold); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.vol-mini table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.vol-mini th, .vol-mini td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.vol-mini thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vol-mini tbody th { color: var(--ink); }
.vol-mini strong { color: var(--copper-deep); }
.vol-mini p { font-size: .93rem; }
.vol-mini a { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 3px; }

.ledger { background: var(--cr-grid), var(--ed-bg) !important; border-color: var(--ed-bg) !important; color: var(--ed-text); }
.ledger-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; color: var(--gold-hi); }
.ledger-title .ico { width: 18px; height: 18px; color: var(--gold); }
.ledger dl { display: grid; gap: 4px; margin: 0; }
.ledger dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); font-size: .9rem; }
.ledger dt { color: var(--ed-muted); }
.ledger dd { margin: 0; color: var(--ed-head); font-weight: 700; text-align: right; }
.ledger code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--gold-hi); }
.ledger .ledger-no { border: 1px dashed rgba(255, 154, 133, .5); background: transparent; }
.ledger .ledger-no dd { color: var(--bad-dark); }

.custody { gap: 8px; }
.cus-col { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; font-size: .9rem; }
.cus-col strong { font-size: .98rem; }
.cus-col.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; color: var(--text); }
.cus-col.is-fiat strong { color: var(--ink); }
.cus-col.is-crypto { background: var(--ed-bg); color: var(--ed-text); }
.cus-col.is-crypto strong { color: var(--gold-hi); }
.cus-col.is-self { box-shadow: inset 0 0 0 2px var(--gold); }
.cus-col b { font-weight: 800; }
.cus-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(178, 69, 47, .5); font-size: .9rem; }
.cus-warn .ico { width: 18px; height: 18px; flex: none; color: var(--bad); }

.revers { gap: 10px; }
.rv { display: grid; gap: 4px; padding: 14px; border-radius: 14px; font-size: .92rem; }
.rv p { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.rv .ico { width: 18px; height: 18px; }
.rv.is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; }
.rv.is-fiat p { color: var(--ink); } .rv.is-fiat .ico { color: var(--copper); } .rv.is-fiat b { color: var(--copper-deep); }
.rv.is-crypto { background: var(--ed-bg); color: var(--ed-text); }
.rv.is-crypto p { color: var(--ed-head); } .rv.is-crypto .ico { color: var(--gold); } .rv.is-crypto b { color: var(--gold-hi); }

/* ---------- simulator extras ---------- */
.vs-dir { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 400px) { .vs-dir { grid-template-columns: 1fr !important; } }
.vs-toggle { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .04); cursor: pointer; line-height: 1.45; color: var(--ed-head); font-weight: 650; }
.vs-toggle small { display: block; color: var(--ed-muted); font-weight: 500; }
.vs-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vs-toggle .det-box { border-color: rgba(217, 179, 108, .6); background: transparent; }
.vs-toggle input:checked + .det-box { background: var(--gold); border-color: var(--gold); color: #2a1d06; }
.vs-toggle:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.vs-stats .wc-stat-main { order: 10; }
.vs-chart { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ed-line); }
.vs-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .86rem; }
.vs-bar span { color: var(--ed-muted); font-weight: 700; }
.vs-bar i { display: block; height: 16px; width: 0; border-radius: 6px; background: var(--copper-hi); transition: width .3s ease; }
.vs-bar-new i { background: repeating-linear-gradient(45deg, var(--gold) 0 7px, var(--gold-deep) 7px 14px); }
.vs-bar b { color: var(--ed-head); font-variant-numeric: tabular-nums; }
.vs-qty-note { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--ed-text); }
.vs-qty-note .ico { width: 18px; height: 18px; flex: none; color: var(--ok-dark); }
.vs-qty-note strong { color: var(--gold-hi); }
.vs-compare { display: grid; gap: 6px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(217, 179, 108, .45); }
.vs-compare-title { font-weight: 800; color: var(--gold-hi); }
.vs-cmp-row { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.vs-cmp-row strong { color: var(--ed-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-cmp-diff { padding-top: 6px; border-top: 1px solid var(--ed-line); }
.vs-cmp-diff strong { color: var(--gold-hi); }
@media (prefers-reduced-motion: reduce) { .vs-bar i { transition: none; } }

/* ---------- wallets ---------- */
.wl-grid { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 640px) { .wl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .wl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wl-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--cr-grid), var(--ed-bg); color: var(--ed-text); box-shadow: var(--shadow-sm); }
.wl-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(217, 179, 108, .16); color: var(--gold); }
.wl-ico .ico { width: 22px; height: 22px; }
.wl-card h3 { color: var(--ed-head); font-size: 1.05rem; }
.wl-card > p { font-size: .94rem; line-height: 1.55; }
.wl-card details { margin-top: auto; border-top: 1px solid var(--ed-line); }
.wl-card summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; cursor: pointer; list-style: none; font-weight: 800; color: var(--gold-hi); }
.wl-card summary::-webkit-details-marker { display: none; }
.wl-card summary .chev { width: 13px; height: 13px; color: var(--gold); }
.wl-card details[open] summary .chev { transform: rotate(180deg); }
.wl-card summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wl-card details li { position: relative; padding-left: 14px; font-size: .92rem; line-height: 1.5; }
.wl-card details li + li { margin-top: 4px; }
.wl-card details li::before { content: "•"; position: absolute; left: 1px; color: var(--gold); }
.wl-grid + .pt-wrap, .wl-grid ~ .pt-cards { margin-top: 18px; }

/* ---------- network fees ---------- */
.nf { margin-top: 20px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.nf-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.nf-list { display: grid; gap: 8px; margin-top: 12px; }
.nf-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.nf-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nf-item input:checked + .det-box { background: var(--copper); border-color: var(--copper); color: #fff; }
.nf-item:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.nf-item:has(input:not(:checked)) { opacity: .65; }
.nf-item:has(input:not(:checked)) b { text-decoration: line-through; }
.nf-text { display: grid; gap: 2px; }
.nf-text strong { color: var(--ink); }
.nf-text small { font-size: .86rem; color: var(--text); line-height: 1.45; }
.nf-item b { font-variant-numeric: tabular-nums; color: var(--copper-deep); white-space: nowrap; }
.nf-total { margin-top: 12px; font-size: 1.05rem; }
.nf-total strong { font-family: var(--serif); font-size: 1.3rem; color: var(--copper-deep); }
.nf-total span { color: var(--muted); font-size: .9rem; }

/* ---------- network compatibility checker ---------- */
.nc { display: grid; gap: 18px; margin-top: 20px; padding: 20px; border-radius: 22px; background: var(--cr-grid), var(--ed-bg); color: var(--ed-text); box-shadow: var(--shadow); }
@media (min-width: 900px) { .nc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 26px 28px; } }
.nc-controls { display: grid; gap: 14px; align-content: start; }
.nc-out { padding: 18px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--ed-line); line-height: 1.6; }
.nc-state { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--ed-head); margin-bottom: 6px; }
.nc-out.is-match { border-color: var(--ok-dark); } .nc-out.is-match .nc-state { color: var(--ok-dark); }
.nc-out.is-mismatch { border: 1.5px dashed var(--bad-dark); } .nc-out.is-mismatch .nc-state { color: var(--bad-dark); }
.nc-out.is-verify, .nc-out.is-insufficient { border-color: var(--gold); } .nc-out.is-verify .nc-state, .nc-out.is-insufficient .nc-state { color: var(--gold-hi); }
.nc-why { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ed-line); font-size: .9rem; color: var(--ed-muted); }
.nc-why .ico { width: 16px; height: 16px; flex: none; color: var(--gold); margin-top: 3px; }

/* ---------- ease accordion ---------- */
.ez { display: grid; gap: 8px; margin-top: 20px; }
.ez details { border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); }
.ez summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 16px; cursor: pointer; list-style: none; font-weight: 800; color: var(--ink); }
.ez summary::-webkit-details-marker { display: none; }
.ez summary .chev { width: 13px; height: 13px; color: var(--copper); }
.ez details[open] summary .chev { transform: rotate(180deg); }
.ez-body { display: grid; gap: 8px; padding: 0 16px 16px; }
@media (min-width: 760px) { .ez-body { grid-template-columns: 1fr 1fr; } .ez-dep { grid-column: 1 / -1; } }
.ez-body p { padding: 12px 14px; border-radius: 12px; font-size: .94rem; line-height: 1.55; }
.ez-body p strong { display: flex; align-items: center; gap: 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.ez-body p .ico { width: 15px; height: 15px; }
.ez-body .is-fiat { background: #fffaf3; border: 1px solid #ecd9c3; }
.ez-body .is-fiat strong { color: var(--copper-deep); }
.ez-body .is-crypto { background: var(--ed-bg); color: var(--ed-text); }
.ez-body .is-crypto strong { color: var(--gold); }
.ez-dep { background: rgba(217, 179, 108, .14); }
.ez-dep strong { display: inline !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .94rem !important; color: var(--ink); }

/* ---------- scenarios ---------- */
.sc { margin-top: 20px; }
.sc-tabs { flex-wrap: wrap; border-radius: 20px; }
.sc-panel { margin-top: 14px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .66); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.sc-panel:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.sc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }

@media print {
  .cx-filters, .cx-list, .vs, .nf input, .nc, .fl2-steps, .sc-tabs { display: none !important; }
  .cx-card[hidden], .fl2-panel[hidden], .sc-panel[hidden] { display: block !important; }
  .basic, .fl2, .wl-card, .cx-card { box-shadow: none !important; break-inside: avoid; }
}

/* Post widgets: "Sloty Bonus Buy i Megaways: jak wybrać?" (distinction cards, matrix, classifier, Bonus Buy
   steps and paths, reel illustration, ways calculator, comparison table, layers, statistics visuals, slot
   comparison, purchase considerations). Every class is prefixed sb- because the CSS is bundled site-wide.
   Two identities inside the site palette: .is-buy = cream + copper (access to a bonus),
   .is-ways = navy + gold grid (reel mechanics).
   Calculator base, rule chapters, myths, quiz, glossary, checkbox box (.det-box), selects (.cc-field): blog.css. */

:root { --sb-grid: linear-gradient(rgba(217, 179, 108, .07) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(217, 179, 108, .07) 1px, transparent 1px) 0 0 / 16px 16px; }

/* ---------- 1. the distinction ---------- */
.sb-split { display: grid; gap: 14px; margin-top: 22px; align-items: stretch; }
@media (min-width: 860px) { .sb-split { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; } }
.sb-split-vs { align-self: center; justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--copper-deep); }
.sb-side { padding: 22px; border-radius: 22px; box-shadow: var(--shadow-sm); }
.sb-side.is-buy { background: #fffaf3; border: 1px solid #ecd9c3; }
.sb-side.is-ways { background: var(--sb-grid), var(--ed-bg); color: var(--ed-text); }
.sb-side-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sb-side-tag span { padding: 4px 12px; border-radius: 999px; letter-spacing: .04em; font-size: .85rem; text-transform: none; }
.sb-side.is-buy .sb-side-tag { color: var(--copper-deep); }
.sb-side.is-buy .sb-side-tag span { background: var(--copper); color: #fff; }
.sb-side.is-ways .sb-side-tag { color: var(--gold); }
.sb-side.is-ways .sb-side-tag span { background: var(--gold); color: #2a1d06; }
.sb-side h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.2; margin-bottom: 10px; }
.sb-side.is-ways h3 { color: var(--ed-head); }
.sb-side ul { margin: 14px 0 0; padding-left: 1.1em; display: grid; gap: 6px; }
.sb-side.is-ways ul { color: var(--ed-text); }

.sb-matrix { margin: 22px 0 0; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.sb-matrix figcaption { margin: 0 0 12px; font-weight: 800; color: var(--ink); font-size: .98rem; }
.sb-matrix table { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.sb-matrix th { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--copper-deep); text-align: left; padding: 4px 6px; vertical-align: bottom; }
.sb-matrix tbody th { vertical-align: middle; width: 22%; }
.sb-matrix td { padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: .9rem; line-height: 1.45; vertical-align: top; }
.sb-matrix thead td { background: none; border: 0; padding: 0; }
.sb-matrix td.is-buy { background: #fff3e6; border-color: #ecd0b4; }
.sb-matrix td.is-ways { background: var(--sb-grid), var(--ed-bg-2); color: var(--ed-text); border-color: transparent; }
.sb-matrix td.is-both { background: linear-gradient(120deg, rgba(255, 243, 230, .96), rgba(240, 211, 154, .9)); border-color: #d9b36c; }
@media (max-width: 559px) {
  .sb-matrix { padding: 12px; }
  .sb-matrix table, .sb-matrix tbody, .sb-matrix tr { display: block; }
  .sb-matrix thead { display: none; }
  .sb-matrix tr { display: grid; gap: 6px; margin-top: 10px; }
  .sb-matrix tbody th { width: auto; padding: 0; }
  .sb-matrix td { display: block; }
  .sb-matrix td::before { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
  .sb-matrix td:nth-of-type(1)::before { content: "Bez Bonus Buy"; }
  .sb-matrix td:nth-of-type(2)::before { content: "Z Bonus Buy"; }
}

.sb-key { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(217, 179, 108, .14); border: 1px solid rgba(143, 84, 52, .3); border-left: 4px solid var(--gold); font-size: .98rem; line-height: 1.6; }
.sb-key .ico { width: 22px; height: 22px; flex: none; color: var(--copper-deep); margin-top: 1px; }

/* ---------- shared toggle (checkbox row) ---------- */
.sb-toggle { position: relative; display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .04); cursor: pointer; line-height: 1.4; color: var(--ed-head); font-weight: 650; transition: border-color .15s, background-color .15s; }
.sb-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-toggle .det-box { border-color: rgba(217, 179, 108, .6); background: transparent; }
.sb-toggle:has(input:checked) { border-color: var(--gold); background: rgba(217, 179, 108, .12); }
.sb-toggle input:checked + .det-box { background: var(--gold); border-color: var(--gold); color: #2a1d06; }
.sb-toggle:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- 2. classifier ---------- */
.sb-cls { display: grid; gap: 18px; margin-top: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .sb-cls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sb-cls-traits { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.sb-cls-traits legend { padding: 0; margin-bottom: 10px; font-weight: 800; color: var(--ed-head); }
.sb-cls-out { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
.sb-cls-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-flag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .25); color: var(--ed-muted); font-weight: 800; font-size: .88rem; }
.sb-flag b { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.sb-flag.is-on { border-style: solid; border-color: var(--gold); color: var(--ed-head); background: rgba(217, 179, 108, .12); }
.sb-flag.is-on b { background: var(--gold); color: #2a1d06; }
.sb-cls-title { margin: 0; font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); font-weight: 700; color: var(--gold-hi); line-height: 1.2; }
.sb-cls-text { margin: 6px 0 0; color: var(--ed-text); }
.sb-cls-why { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sb-cls-why li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border-left: 3px solid var(--ed-muted); font-size: .92rem; line-height: 1.5; }
.sb-cls-why li.is-buy { border-left-color: var(--copper-hi); }
.sb-cls-why li.is-ways { border-left-color: var(--gold); }
.sb-cls-why strong { color: var(--ed-head); }

/* ---------- 3. Bonus Buy steps, paths, facts ---------- */
.sb-steps { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: none; }
.sb-steps details { border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.sb-steps summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none; font-weight: 800; color: var(--ink); }
.sb-steps summary::-webkit-details-marker { display: none; }
.sb-steps summary > .ico { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--copper); transition: transform .2s; }
.sb-steps details[open] summary > .ico { transform: rotate(180deg); }
.sb-step-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ed-bg); color: var(--gold-hi); font-family: var(--serif); font-weight: 700; }
.sb-step-title { flex: 1; min-width: 0; }
.sb-steps details p { margin: 0; padding: 0 16px 16px 62px; color: var(--text); line-height: 1.6; }
@media (max-width: 479px) { .sb-steps details p { padding-left: 16px; } }

.sb-paths { display: grid; gap: 12px; margin: 22px 0 0; }
@media (min-width: 700px) { .sb-paths { grid-template-columns: 1fr 1fr; } }
.sb-path { padding: 16px; border-radius: 18px; }
.sb-path.is-random { background: #fff; border: 1px solid var(--line); }
.sb-path.is-buy { background: #fffaf3; border: 1px solid #ecd9c3; }
.sb-path > p { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; color: var(--copper-deep); }
.sb-path > p .ico { width: 20px; height: 20px; }
.sb-path ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sb-path li { position: relative; padding: 8px 12px; border-radius: 10px; background: rgba(184, 114, 74, .08); font-size: .92rem; }
.sb-path li + li::before { content: "↓"; position: absolute; top: -13px; left: 18px; font-size: .8rem; color: var(--copper); }
.sb-path.is-random li:nth-child(2) { border: 1px dashed rgba(143, 84, 52, .45); background: transparent; }
.sb-path li:last-child { font-weight: 800; color: var(--ink); }
.sb-paths-out { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--ed-bg); color: var(--ed-text); font-size: .95rem; }
.sb-paths-out .ico { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 2px; }

.sb-facts { display: grid; gap: 10px; margin: 22px 0 0; }
@media (min-width: 700px) { .sb-facts { grid-template-columns: 1fr 1fr; } }
.sb-facts > div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); }
.sb-facts dt { font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.sb-facts dd { margin: 0; line-height: 1.55; }

/* ---------- 4. Bonus Buy calculator extras ---------- */
.sb-buy .ex-tag { justify-self: start; background: rgba(255, 255, 255, .08); color: var(--gold-hi); border-color: rgba(217, 179, 108, .5); }
.sb-buy-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(217, 179, 108, .12); border: 1px solid rgba(217, 179, 108, .35); color: var(--ed-head); font-size: .95rem; line-height: 1.5; }
.sb-buy-note .ico { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 2px; }
@media (min-width: 860px) { .sb-buy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } }

/* ---------- 5/6. reels ---------- */
.sb-demo { display: grid; gap: 12px; margin: 22px 0 0; padding: 18px; border-radius: 22px; background: var(--sb-grid), var(--ed-bg); color: var(--ed-text); box-shadow: var(--shadow-sm); }
.sb-demo .ex-tag { background: rgba(255, 255, 255, .08); color: var(--gold-hi); border-color: rgba(217, 179, 108, .5); }
.sb-demo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.sb-demo-count { font-size: .85rem; font-weight: 800; color: var(--ed-muted); }
.sb-reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: 230px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(217, 179, 108, .25); }
.sb-reel { display: flex; flex-direction: column; gap: 5px; padding: 5px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.sb-sym { position: relative; flex: 1 1 0; min-height: 0; border-radius: 8px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(217, 179, 108, .22); animation: sb-in .25s ease; }
.sb-sym::before { content: ""; position: absolute; inset: 0; margin: auto; width: min(46%, 22px); aspect-ratio: 1; max-height: 70%; }
.sb-sym-a::before { border-radius: 50%; background: var(--gold); }
.sb-sym-b::before { transform: rotate(45deg); background: var(--copper-hi); max-height: 56%; width: min(36%, 17px); }
.sb-sym-c::before { border-radius: 4px; background: #9fb4d6; }
.sb-sym-d::before { border-radius: 50%; border: 3px solid var(--gold-hi); background: none; }
.sb-sym-e::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #c99a74; }
@keyframes sb-in { from { opacity: 0; transform: scaleY(.6); } }
@media (prefers-reduced-motion: reduce) { .sb-sym { animation: none; } }
.sb-demo-heights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 10px; text-align: center; font-weight: 800; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.sb-demo-formula { margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); color: var(--ed-head); text-align: center; font-variant-numeric: tabular-nums; }
.sb-demo-formula strong { color: var(--gold-hi); }
.sb-demo .btn { justify-self: center; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.sb-demo figcaption { font-size: .86rem; color: var(--ed-muted); line-height: 1.5; }
@media (max-width: 400px) { .sb-reels { height: 190px; gap: 5px; padding: 6px; } .sb-reel { padding: 3px; gap: 3px; } .sb-demo { padding: 14px; } }

/* minmax(0, …) so the range inputs' built-in width can't push the form wider than a phone */
.sb-ways, .sb-ways .wc-inputs { grid-template-columns: minmax(0, 1fr); }
.sb-ways .wc-reset, .sb-buy .wc-reset, .sb-cls .wc-reset { white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; }
@media (min-width: 860px) { .sb-ways { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; } }
.sb-ranges { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; } /* fieldsets default to min-content */
.sb-ranges legend { padding: 0; margin-bottom: 8px; font-weight: 800; color: var(--ed-head); }
.sb-range { display: grid; grid-template-columns: 78px minmax(0, 1fr) 36px; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ed-line); }
.sb-range label { font-weight: 700; color: var(--ed-head); font-size: .93rem; }
.sb-range input { width: 100%; height: 36px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.sb-range output { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--gold-hi); text-align: right; font-variant-numeric: tabular-nums; }
.sb-reels-calc { height: 200px; }

/* ---------- 7. comparison table + layers ---------- */
.sb-cmp { width: 100%; margin-top: 22px; border-collapse: separate; border-spacing: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.sb-cmp th, .sb-cmp td { padding: 14px 16px; text-align: left; vertical-align: top; line-height: 1.5; border-top: 1px solid var(--line); }
.sb-cmp thead th { border-top: 0; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sb-cmp thead th:first-child { background: #fff; color: var(--muted); }
.sb-cmp th.is-buy, .sb-cmp td.is-buy { background: #fffaf3; }
.sb-cmp thead th.is-buy { color: var(--copper-deep); }
.sb-cmp th.is-ways, .sb-cmp td.is-ways { background: var(--sb-grid), var(--ed-bg); color: var(--ed-text); border-top-color: rgba(255, 255, 255, .08); }
.sb-cmp thead th.is-ways { color: var(--gold); }
.sb-cmp tbody th { width: 28%; background: #fff; font-weight: 800; color: var(--ink); }
@media (max-width: 639px) {
  .sb-cmp, .sb-cmp tbody, .sb-cmp tr, .sb-cmp th, .sb-cmp td { display: block; width: auto; }
  .sb-cmp { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .sb-cmp thead { display: none; }
  .sb-cmp tr { margin-top: 12px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  .sb-cmp tbody th { width: auto; border-top: 0; }
  .sb-cmp td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .sb-cmp td.is-buy::before { color: var(--copper-deep); }
  .sb-cmp td.is-ways::before { color: var(--gold); }
}
.sb-layers { display: grid; gap: 12px; margin: 22px 0 0; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.sb-layers-title { margin: 0; font-weight: 800; color: var(--ink); }
.sb-layers ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sb-layers li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.sb-layers li span { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sb-layers li.is-buy { background: #fffaf3; border-color: #ecd9c3; }
.sb-layers li.is-buy span { color: var(--copper-deep); }
.sb-layers li.is-ways { background: var(--sb-grid), var(--ed-bg); border-color: transparent; color: var(--ed-head); }
.sb-layers li.is-ways span { color: var(--gold); }
.sb-layers figcaption { font-size: .86rem; color: var(--muted); }

/* ---------- 8. statistics visuals ---------- */
.sb-points { display: grid; gap: 6px; padding-left: 1.1em; margin: 10px 0 0; }
.sb-rtp svg, .sb-vol svg { display: block; width: 100%; height: auto; }
.sb-rtp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: .8rem; color: var(--muted); }
.sb-rtp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sb-rtp-legend i { display: inline-block; width: 18px; border-top: 2.5px dashed var(--copper); }
.sb-rtp-legend i.is-dot { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--ed-bg); }
.sb-vol-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: end; gap: 10px; }
.sb-vol-row span { font-weight: 800; font-size: .88rem; color: var(--ink); padding-bottom: 2px; }
.sb-vol-row rect { fill: var(--copper); }
.sb-vol-row:nth-of-type(2) rect { fill: #a87b3e; }
.sb-vol-row:nth-of-type(3) rect { fill: var(--ed-bg); }
.sb-vol svg { border-bottom: 1px solid var(--line); }
.sb-hit-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sb-hit { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 32px; border-radius: 9px; background: #fff; border: 1px solid var(--line); font-style: normal; }
.sb-hit b { font-weight: 900; font-size: 1.05rem; }
.sb-hit.is-low { background: rgba(184, 114, 74, .14); border: 1px dashed var(--copper); color: var(--copper-deep); }
.sb-hit.is-high { background: var(--ed-bg); border-color: var(--ed-bg); color: var(--gold-hi); }
.sb-hit-legend { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .86rem; }
.sb-hit-legend li { display: flex; align-items: center; gap: 8px; }
.sb-hit-legend .sb-hit { width: 26px; min-height: 26px; flex: none; }
.sb-max-scale { position: relative; height: 22px; border-radius: 999px; background: linear-gradient(90deg, rgba(184, 114, 74, .25), rgba(184, 114, 74, .06)); border: 1px solid var(--line); }
.sb-max-typical { position: absolute; left: 1%; top: 3px; bottom: 3px; width: 9%; border-radius: 999px; background: var(--copper); }
.sb-max-cap { position: absolute; right: 4px; top: -6px; bottom: -6px; width: 4px; border-radius: 4px; background: var(--ed-bg); }
.sb-max-labels { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; font-weight: 800; color: var(--copper-deep); }
.sb-max-labels span:last-child { color: var(--ink); text-align: right; }
.sb-info-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: var(--ink); }
.sb-info-title .ico { width: 20px; height: 20px; color: var(--copper); }
.sb-info ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sb-info li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: .9rem; }
.sb-info li .ico { width: 16px; height: 16px; flex: none; color: var(--ok); }
.sb-info li span { flex: 1; min-width: 0; }
.sb-info li small { color: var(--muted); font-size: .76rem; white-space: nowrap; }

/* ---------- 9. slot comparison ---------- */
.sb-sc { display: grid; gap: 18px; margin-top: 22px; grid-template-columns: minmax(0, 1fr); }
.sb-games { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .sb-games { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sb-game { margin: 0; padding: 16px; border-radius: 18px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .03); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.sb-game legend { padding: 0 6px; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--gold-hi); }
.sb-game .cc-field, .sb-game .wc-field { grid-template-columns: minmax(0, 1fr); }
.sb-game .cc-field select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.sb-sc-out { display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
.sb-sc-table { width: 100%; border-collapse: collapse; }
.sb-sc-table th, .sb-sc-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--ed-line); vertical-align: top; }
.sb-sc-table thead th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ed-muted); }
.sb-sc-table tbody th { color: var(--ed-head); font-weight: 700; }
.sb-sc-table tbody th small { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: rgba(217, 179, 108, .18); color: var(--gold-hi); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.sb-sc-table tr.is-diff td, .sb-sc-table tr.is-diff th { background: rgba(217, 179, 108, .06); }
.sb-yes { color: var(--ok-dark); font-weight: 800; white-space: nowrap; }
.sb-no { color: var(--ed-muted); font-weight: 700; white-space: nowrap; }
.sb-sc-notes { display: grid; gap: 12px; }
@media (min-width: 700px) { .sb-sc-notes { grid-template-columns: 1fr 1fr; } }
.sb-sc-h { margin: 0 0 6px; font-weight: 800; color: var(--ed-head); }
.sb-sc-notes ul, .sb-sc-need ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: .92rem; line-height: 1.5; }
.sb-sc-indep { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .95rem; color: var(--ed-text); }
.sb-sc-indep .ico { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 2px; }

/* ---------- 10. before buying ---------- */
.sb-consider { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .sb-consider { grid-template-columns: 1fr 1fr; } }
.sb-consider li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.sb-consider-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(184, 114, 74, .12); color: var(--copper-deep); }
.sb-consider-ico .ico { width: 22px; height: 22px; }
.sb-consider h3 { font-size: 1.02rem; margin-bottom: 4px; }
.sb-consider p { margin: 0; line-height: 1.55; }
.sb-spend { display: grid; gap: 12px; margin: 22px 0 0; padding: 18px; border-radius: 20px; background: var(--ed-bg); color: var(--ed-text); }
.sb-spend .ex-tag { margin-right: 8px; background: rgba(255, 255, 255, .08); color: var(--gold-hi); border-color: rgba(217, 179, 108, .5); }
.sb-spend-title { margin: 0; font-weight: 800; color: var(--ed-head); line-height: 1.5; }
.sb-spend ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sb-spend li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 70px; align-items: center; gap: 10px; font-size: .9rem; }
.sb-spend li i { display: block; height: 12px; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--copper-hi), var(--gold)); }
.sb-spend li b { text-align: right; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.sb-spend figcaption { font-size: .9rem; color: var(--ed-muted); line-height: 1.5; }
@media (max-width: 400px) { .sb-spend li { grid-template-columns: 88px minmax(0, 1fr) 62px; gap: 6px; } }
@media (max-width: 400px) {
  .sb-sc-out { padding: 14px 12px; }
  .sb-sc-table { font-size: .88rem; }
  .sb-sc-table th, .sb-sc-table td { padding: 8px 4px; }
  .sb-sc-table .sb-no { white-space: normal; }
  .sb-sc-table tbody th small { margin-left: 0; }
}

/* Post widgets: "Przewodnik po dostawcach gier kasynowych" (roles diagram, dimension visuals, preference finder,
   evaluation guide + scorecard, fictional portfolio explorer, game checks, measures).
   Every class is prefixed pg- because the CSS is bundled site-wide.
   Rule chapters, tabs logic, checklist (.detector), myths, quiz and .steps: blog.css / components.js. */

.pg-sub { font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-top: 30px; }
.pg-key { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(217, 179, 108, .14); border: 1px solid rgba(143, 84, 52, .3); border-left: 4px solid var(--gold); line-height: 1.6; }
.pg-key .ico { width: 22px; height: 22px; flex: none; color: var(--copper-deep); margin-top: 1px; }
.pg-points { display: grid; gap: 6px; padding-left: 1.1em; margin: 10px 0 0; }

/* ---------- 1. who does what ---------- */
.pg-roles { margin-top: 16px; padding: 18px; border-radius: 22px; background: var(--ed-bg); color: var(--ed-text); box-shadow: var(--shadow-sm); }
.pg-role-tabs { display: grid; gap: 10px; }
@media (min-width: 700px) { .pg-role-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.pg-role-tab { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .04); color: var(--ed-head); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pg-role-tab strong { font-size: 1.02rem; }
.pg-role-tab small { grid-column: 2; color: var(--ed-muted); font-size: .84rem; }
.pg-role-ico { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(217, 179, 108, .14); color: var(--gold); }
.pg-role-ico .ico { width: 22px; height: 22px; }
.pg-role-tab[aria-selected="true"] { border-color: var(--gold); background: rgba(217, 179, 108, .14); box-shadow: inset 0 0 0 1px var(--gold); }
.pg-role-tab[aria-selected="true"] .pg-role-ico { background: var(--gold); color: #2a1d06; }
.pg-role-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 700px) { .pg-role-tab + .pg-role-tab::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--gold); font-weight: 800; } }
@media (max-width: 699px) { .pg-role-tab + .pg-role-tab::before { content: "↓"; position: absolute; left: 32px; top: -15px; font-size: .8rem; color: var(--gold); } }
.pg-role-panel { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 700px) { .pg-role-panel { grid-template-columns: 1fr 1fr; } }
.pg-role-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.pg-role-col { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ed-line); }
.pg-role-col.is-not { border-style: dashed; }
.pg-role-col p { margin: 0; line-height: 1.6; }
.pg-role-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px !important; font-weight: 800; color: var(--ed-head); }
.pg-role-h .ico { width: 18px; height: 18px; color: var(--ok-dark); }
.pg-role-col.is-not .pg-role-h .ico { color: var(--gold); }
.pg-roles + .ar-small { margin-top: 12px; }

/* ---------- 2. dimension visuals ---------- */
.pg-styles { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
.pg-styles figcaption { grid-column: 1 / -1; font-size: .86rem; color: var(--muted); }
.pg-style { display: grid; gap: 6px; }
.pg-style b { font-size: .86rem; color: var(--ink); }
.pg-art { position: relative; display: block; height: 86px; border-radius: 14px; overflow: hidden; }
.pg-art i { position: absolute; display: block; }
.pg-style-min .pg-art { background: #fbf8f4; border: 1px solid var(--line); }
.pg-style-min .pg-art i:nth-child(1) { left: 16%; top: 30%; width: 22%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; }
.pg-style-min .pg-art i:nth-child(2) { left: 46%; top: 40%; width: 34%; height: 2px; background: var(--ink); }
.pg-style-min .pg-art i:nth-child(3) { left: 46%; top: 56%; width: 20%; height: 2px; background: var(--copper); }
.pg-style-color .pg-art { background: linear-gradient(135deg, #f6c37a, #e58a6b 50%, #a77fd0); }
.pg-style-color .pg-art i:nth-child(1) { left: 10%; top: 18%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #fff3; box-shadow: 0 0 0 6px #fff2; }
.pg-style-color .pg-art i:nth-child(2) { right: 12%; top: 22%; width: 20%; aspect-ratio: 1; transform: rotate(45deg); background: #ffe58a; }
.pg-style-color .pg-art i:nth-child(3) { left: 38%; bottom: 10%; width: 26%; height: 22%; border-radius: 999px; background: #7fd1c6; }
.pg-style-mood .pg-art { background: radial-gradient(60% 70% at 70% 20%, rgba(240, 211, 154, .35), transparent 60%), linear-gradient(180deg, #1d2636, #0f141e); }
.pg-style-mood .pg-art i:nth-child(1) { right: 16%; top: 14%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #f0d39a; box-shadow: 0 0 18px #f0d39a88; }
.pg-style-mood .pg-art i:nth-child(2) { left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(159, 180, 214, .35)); }
.pg-style-mood .pg-art i:nth-child(3) { left: 14%; bottom: 18%; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 30px solid #2e3a50; }
.pg-style-classic .pg-art { background: #7d3b24; border: 3px solid #d9b36c; }
.pg-style-classic .pg-art i { top: 14%; bottom: 14%; width: 24%; border-radius: 6px; background: #fbf6ef; }
.pg-style-classic .pg-art i:nth-child(1) { left: 6%; } .pg-style-classic .pg-art i:nth-child(2) { left: 38%; } .pg-style-classic .pg-art i:nth-child(3) { left: 70%; }
.pg-style-classic .pg-art i::after { content: ""; position: absolute; left: 20%; right: 20%; top: 44%; height: 12%; background: #b2452f; border-radius: 2px; }

.pg-mech { display: grid; gap: 8px; margin: 0; }
.pg-mech > div { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.pg-mech dt { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); }
.pg-mech dd { margin: 4px 0 0 34px; font-size: .9rem; line-height: 1.5; }
.pg-mech-ico { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--ed-bg); position: relative; }
.pg-mech-ico::before { content: ""; position: absolute; inset: 5px; border: 2px solid var(--gold); border-radius: 2px; }
.pg-mech-2::before { inset: 3px 7px; }
.pg-mech-3::before { border: 0; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.pg-mech-4::before { background: var(--gold); border-radius: 50%; inset: 7px; }
.pg-mech-5::before { border-radius: 50%; }
.pg-mech-6::before { transform: rotate(45deg); inset: 6px; }

.pg-pace { display: grid !important; gap: 12px !important; }
.pg-pace-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.pg-pace-row span { font-size: .86rem; font-weight: 800; color: var(--ink); }
.pg-pace-row ol { display: flex; gap: 4px; margin: 0; padding: 6px; list-style: none; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.pg-pace-row li { flex: 1; height: 22px; border-radius: 4px; background: var(--copper-hi); }
.pg-pace-row.is-slow li { flex: 3; background: var(--ed-bg); }
.pg-pace figcaption, .pg-spread figcaption { font-size: .86rem; color: var(--muted); }
.pg-spread { display: grid !important; gap: 12px !important; }
.pg-spread > div { display: grid; gap: 6px; }
.pg-spread b { font-size: .88rem; color: var(--ink); }
.pg-dots { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.pg-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--copper); }
.pg-dots.is-wide i:nth-child(3n + 2) { background: var(--ed-bg); border-radius: 4px; }
.pg-dots.is-wide i:nth-child(3n) { background: var(--gold); transform: rotate(45deg); border-radius: 3px; }
.pg-dots.is-narrow i:nth-child(5n) { background: var(--copper-hi); }
.pg-info-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: var(--ink); }
.pg-info-title .ico { width: 20px; height: 20px; color: var(--copper); }
.pg-info ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pg-info li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: .92rem; }
.pg-info li .ico { width: 16px; height: 16px; color: var(--ok); }

/* ---------- 3. preference finder ---------- */
.pg-finder { margin-top: 22px; padding: 20px; border-radius: 22px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
.pg-finder-top { display: grid; gap: 8px; margin-bottom: 16px; }
.pg-finder-step { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pg-finder-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pg-finder-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--copper-hi), var(--gold)); transition: width .3s ease; }
.pg-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.pg-q-title { padding: 0; margin-bottom: 14px; font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); font-weight: 700; color: var(--ed-head); line-height: 1.25; }
.pg-q-opts { display: grid; gap: 8px; }
@media (min-width: 700px) { .pg-q-opts { grid-template-columns: 1fr 1fr; } }
.pg-q-opt { position: relative; display: block; cursor: pointer; }
.pg-q-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pg-q-opt > span { display: flex; align-items: center; gap: 12px; min-height: 56px; height: 100%; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .04); color: var(--ed-head); font-weight: 650; line-height: 1.35; transition: border-color .15s, background-color .15s; }
.pg-q-opt b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--gold-hi); font-size: .85rem; }
.pg-q-opt input:checked + span { border-color: var(--gold); background: rgba(217, 179, 108, .14); box-shadow: inset 0 0 0 1px var(--gold); }
.pg-q-opt input:checked + span b { background: var(--gold); color: #2a1d06; }
.pg-q-opt input:checked + span::after { content: "✓ wybrane"; margin-left: auto; font-size: .78rem; font-weight: 800; color: var(--gold-hi); white-space: nowrap; }
.pg-q-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pg-q-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pg-q-nav .btn-ghost { background: rgba(255, 255, 255, .06); border-color: var(--ed-line); color: var(--ed-head); }
.pg-q-nav .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pg-result { display: grid; gap: 10px; }
.pg-result-kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pg-result-title { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); color: var(--gold-hi) !important; }
.pg-result-title:focus { outline: none; }
.pg-result-text { margin: 0; font-size: 1.05rem; color: var(--ed-text); }
.pg-result-cols { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 860px) { .pg-result-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-result-block { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ed-line); }
.pg-result-block.is-ask { border-color: rgba(217, 179, 108, .45); }
.pg-result-h { margin: 0 0 8px; font-weight: 800; color: var(--ed-head); }
.pg-result-block ul, .pg-result-block ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .93rem; line-height: 1.5; }
.pg-result-note { margin: 0; font-size: .88rem; color: var(--ed-muted); }

/* ---------- 4. evaluation guide + scorecard ---------- */
.pg-eval-guide { counter-reset: ev; display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .pg-eval-guide { grid-template-columns: 1fr 1fr; } }
.pg-eval-guide li { counter-increment: ev; position: relative; display: grid; gap: 2px; padding: 12px 14px 12px 52px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); }
.pg-eval-guide li::before { content: counter(ev); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ed-bg); color: var(--gold-hi); font-family: var(--serif); font-weight: 700; }
.pg-eval-guide strong { color: var(--ink); }
.pg-eval-guide span { font-size: .92rem; line-height: 1.5; }
.pg-score { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border-radius: 24px; }
.pg-score-title { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); font-weight: 700; color: var(--ed-head); }
.pg-score-note { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; font-size: .92rem; color: var(--ed-text); line-height: 1.5; }
.pg-score-note .ico { width: 20px; height: 20px; flex: none; color: var(--gold); margin-top: 1px; }
.pg-score-rows { display: grid; gap: 10px; }
.pg-score-row { margin: 0; padding: 12px; min-width: 0; border-radius: 16px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .03); }
.pg-score-row legend { padding: 0 6px; font-weight: 800; color: var(--ed-head); }
.pg-score-opts { display: grid; gap: 6px; }
@media (min-width: 640px) { .pg-score-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-opt { position: relative; display: block; cursor: pointer; }
.pg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pg-opt > span { display: flex; align-items: center; gap: 8px; min-height: 44px; height: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--ed-line); background: rgba(255, 255, 255, .04); color: var(--ed-text); font-size: .9rem; font-weight: 650; line-height: 1.3; }
.pg-opt b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--gold-hi); font-size: .78rem; }
.pg-opt input:checked + span { border-color: var(--gold); background: rgba(217, 179, 108, .14); color: var(--ed-head); box-shadow: inset 0 0 0 1px var(--gold); }
.pg-opt input:checked + span b { background: var(--gold); color: #2a1d06; }
.pg-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pg-score-sum { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: rgba(0, 0, 0, .22); border: 1px solid var(--ed-line); }
.pg-score-sum-title { margin: 0; font-weight: 800; color: var(--ed-head); }
.pg-score-bars { display: grid; gap: 8px; }
.pg-sbar { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: .88rem; }
.pg-sbar i { display: block; height: 12px; width: 0; border-radius: 999px; transition: width .3s ease; }
.pg-sbar.is-explore i { background: repeating-linear-gradient(135deg, var(--ed-muted) 0 4px, rgba(165, 175, 191, .35) 4px 8px); }
.pg-sbar.is-meets i { background: var(--copper-hi); }
.pg-sbar.is-strong i { background: var(--gold); }
.pg-sbar b { text-align: right; color: var(--ed-head); font-variant-numeric: tabular-nums; }
.pg-score-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-score-map li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: .8rem; color: var(--ed-muted); }
.pg-score-map li i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .25); }
.pg-score-map li.is-explore i { border: 2px solid var(--ed-muted); background: repeating-linear-gradient(135deg, var(--ed-muted) 0 2px, transparent 2px 4px); }
.pg-score-map li.is-meets i { border: 0; background: var(--copper-hi); }
.pg-score-map li.is-strong i { border: 0; background: var(--gold); border-radius: 3px; transform: rotate(45deg); }
.pg-score-text { margin: 0; color: var(--ed-text); line-height: 1.5; }
.pg-score .wc-reset { white-space: normal; text-align: left; }
@media (max-width: 400px) { .pg-score { padding: 14px; } .pg-sbar { grid-template-columns: minmax(0, 1fr) 70px 24px; } }

/* ---------- 5. fictional portfolio ---------- */
.pg-port { margin-top: 20px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-sm); }
.pg-port-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 800; color: var(--ink); }
.pg-port-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 860px) { .pg-port-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-port-tab { display: grid; gap: 4px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.pg-port-tab strong { font-size: .98rem; }
.pg-port-tab small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.pg-port-tab[aria-selected="true"] { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper), var(--shadow-sm); }
.pg-port-tab[aria-selected="true"] strong::after { content: " ✓"; color: var(--copper); }
.pg-port-tab:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.pg-art-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; height: 64px; padding: 6px; border-radius: 10px; background: var(--ed-bg); }
.pg-art-grid i { border-radius: 3px; background: rgba(255, 255, 255, .12); }
.pg-art-classic i:nth-child(5n + 3) { background: var(--gold); }
.pg-art-cascade i { background: #e58a6b; } .pg-art-cascade i:nth-child(3n) { background: #7fd1c6; } .pg-art-cascade i:nth-child(4n) { background: #ffe58a; border-radius: 50%; }
/* Reels of different heights: the faded cells are the "missing" symbols. */
.pg-art-expand i { background: #9fb4d6; }
.pg-art-expand i:nth-child(1), .pg-art-expand i:nth-child(5), .pg-art-expand i:nth-child(6), .pg-art-expand i:nth-child(10), .pg-art-expand i:nth-child(3) { opacity: .15; }
.pg-art-feature { grid-template-columns: repeat(3, 1fr); }
.pg-art-feature i { background: rgba(217, 179, 108, .35); border: 1px solid var(--gold); }
.pg-art-feature i:nth-child(5) { background: var(--gold); border-radius: 50%; }
.pg-port-panel { margin-top: 14px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.pg-port-panel:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.pg-port-panel h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 10px; }
.pg-port-panel h3 small { font-family: var(--font); font-size: .82rem; color: var(--muted); font-weight: 600; }
.pg-port-panel dl { display: grid; gap: 10px; margin: 0; }
@media (min-width: 700px) { .pg-port-panel dl { grid-template-columns: 1fr 1fr; } }
.pg-port-panel dt { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-deep); }
.pg-port-panel dd { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; line-height: 1.5; }
.pg-cx { display: inline-flex; gap: 4px; }
.pg-cx i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--copper); }
.pg-cx i.on { background: var(--copper); }

/* ---------- 6. before trying a game ---------- */
.pg-checks { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .pg-checks { grid-template-columns: 1fr 1fr; } }
.pg-checks li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); }
.pg-checks-ico { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(184, 114, 74, .12); color: var(--copper-deep); }
.pg-checks-ico .ico { width: 20px; height: 20px; }
.pg-checks strong { color: var(--ink); }
.pg-checks li > span:last-child { font-size: .9rem; line-height: 1.45; }
.pg-measures { display: grid; gap: 10px; margin: 14px 0 0; }
@media (min-width: 760px) { .pg-measures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-measures > div { padding: 14px 16px; border-radius: 16px; background: var(--ed-bg); color: var(--ed-text); }
.pg-measures dt { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--gold-hi); margin-bottom: 4px; }
.pg-measures dd { margin: 0; line-height: 1.55; font-size: .94rem; }
.pg-process { margin-top: 20px; }