/* Design tokens — "Kupon" (betting-slip editorial) direction, see DESIGN_BRIEF.md.
   Muted/desaturated paper+graphite surfaces, one signal-orange accent, tabular-nums on
   every number. Kept single-file & lean; block-level markup/variants come in a later batch. */
:root{
  --bg:#F3EFE7; --bg-elev:#EAE4D8; --bg-card:#FBF8F2; --text:#20211F; --muted:rgba(32,33,31,.62);
  --surface-dark:#1C1D22; --text-on-dark:#F3EFE7; --muted-on-dark:rgba(243,239,231,.66);
  --accent:#FF5A2B; --accent-2:#3E5A73; --line:rgba(32,33,31,.14); --line-on-dark:rgba(243,239,231,.16);
  --radius:3px; --wrap:1120px; --header-bg:rgba(28,29,34,.92);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-2)}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{letter-spacing:-.02em}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
/* numerals that matter (odds, amounts, promo code, wagering multipliers) get the kupon
   "ticket" numeral treatment per DESIGN_BRIEF.md */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-on-dark);color:var(--text-on-dark);
  transition:height .2s,padding .2s}
.site-header a{color:var(--text-on-dark)}
.header-inner{display:flex;align-items:center;gap:18px;height:64px}
.site-nav{display:flex;gap:6px;margin-left:auto}
/* underline-grow micro-interaction — nav links + section markers (DESIGN_BRIEF animation #2) */
.site-nav a{position:relative;text-decoration:none;padding:4px 2px}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:12px 22px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-cta{background:var(--accent);color:#fff}
section{padding:56px 0}
.section-alt{background:var(--bg-elev)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}
th{color:var(--accent-2)}
.prose{font-size:1.08rem;line-height:1.75}
.updated{text-align:center;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line);padding-top:20px}
/* hover-lift — kupon offer/verdict/FAQ cards (DESIGN_BRIEF animation #1); block markup for the
   actual perforated-edge/tear-line kupon card comes with html-front, this just reserves the
   transition so it's cheap and consistent everywhere it's used */
.kupon,.card{transition:transform .18s,box-shadow .18s}
.kupon:hover,.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(32,33,31,.12)}
/* scroll-reveal (DESIGN_BRIEF animation #3) — html-front toggles .is-visible via IntersectionObserver */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s}
.reveal.is-visible{opacity:1;transform:none}
.to-top{position:fixed;right:20px;bottom:20px;z-index:120;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--accent);color:#fff;font-size:1.4rem;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--bg-card);border-top:1px solid var(--line);
  padding:16px 20px;display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.cookie.hidden{display:none}
@media (max-width:760px){.nav-toggle{display:block;margin-left:auto}.site-nav{display:none}.site-nav.open{display:flex;flex-direction:column}}
/* sticky-header shrink (DESIGN_BRIEF animation #4) — main.js toggles .is-scrolled on .site-header */
.site-header.is-scrolled .header-inner{height:52px}

/* ===== breadcrumb (topic pages, depth-1) ===== */
.crumbs{font-size:.86rem;color:var(--muted);padding:16px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-2)}

/* ===== footer ===== */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark);padding:48px 0 24px}
.site-footer a{color:var(--text-on-dark);text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line-on-dark)}
.footer-grid h4{margin:0 0 12px;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-on-dark)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.disclaimer{display:flex;gap:14px;align-items:flex-start;padding:24px 0;color:var(--muted-on-dark);font-size:.9rem}
.disclaimer .age{flex:0 0 auto;font-weight:800;border:2px solid var(--accent);color:var(--accent);border-radius:var(--radius);padding:4px 10px;font-size:.85rem}
.footer-bottom{color:var(--muted-on-dark);font-size:.82rem;text-align:center;margin:0}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr}}

/* ===== eyebrow / section labels ===== */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent)}
.section-head{max-width:640px;margin-bottom:32px}

/* ===== disclosure chip (hero badge — NOT a star rating) ===== */
.disclosure-chip{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line-on-dark);
  color:var(--text-on-dark);border-radius:var(--radius);padding:8px 14px;font-size:.86rem;font-weight:700}
.disclosure-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ===== hero — magazine split 7/5 (home only) ===== */
.hero{background:var(--surface-dark);color:var(--text-on-dark);padding:56px 0 64px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,4vw + 1rem,3.1rem);margin:16px 0 14px;color:var(--text-on-dark)}
.hero-lead{color:var(--muted-on-dark);font-size:1.1rem;max-width:46ch;margin:0 0 22px}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.trust-row{display:flex;gap:20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line-on-dark)}
.trust-item{display:flex;flex-direction:column;gap:2px}
.trust-item b{font-size:1.25rem;color:var(--text-on-dark)}
.trust-item span{font-size:.78rem;color:var(--muted-on-dark)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* ===== legal-notice strip — prominent, right after hero, not buried in footer ===== */
.legal-notice{background:var(--bg-elev);border-top:3px solid var(--accent);border-bottom:1px solid var(--line);padding:22px 0}
.legal-notice .container{display:flex;gap:14px;align-items:flex-start}
.legal-notice strong{color:var(--text)}
.legal-notice p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.legal-notice .flag{flex:0 0 auto;font-size:1.4rem;line-height:1}

/* ===== kupon card — signature motif: perforated edge + dashed tear line + notched corners ===== */
.kupon{position:relative;background:var(--bg-card);border:1px solid var(--line);border-left:none;
  border-radius:0 var(--radius) var(--radius) 0;padding:26px 26px 22px 34px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.kupon::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;
  background:repeating-linear-gradient(to bottom,var(--line) 0 6px,transparent 6px 15px);
  border-right:1px dashed var(--line)}
.kupon--dark{background:var(--surface-dark);color:var(--text-on-dark);border-color:var(--line-on-dark)}
.kupon--dark::before{background:repeating-linear-gradient(to bottom,var(--line-on-dark) 0 6px,transparent 6px 15px);border-right-color:var(--line-on-dark)}
.kupon-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kupon-amount{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.kupon-stub{margin-top:18px;padding-top:16px;border-top:2px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kupon--dark .kupon-stub{border-top-color:var(--line-on-dark)}
.kupon-code{font-weight:800;letter-spacing:.04em;background:var(--surface-dark);color:var(--accent);
  padding:8px 12px;border-radius:var(--radius);font-size:.95rem}
.kupon--dark .kupon-code{background:var(--bg-card);color:var(--accent)}
.kupon ul{margin:14px 0 0;padding:0 0 0 1.1em}
.kupon li{margin-bottom:6px}

/* ===== offer section — 2:1 asymmetric (big kupon + slim stat rail), home only ===== */
.offer-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.stat-rail{display:flex;flex-direction:column;gap:16px}
.stat-rail .stat{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.stat-rail .stat b{display:block;font-size:1.5rem;color:var(--accent-2);letter-spacing:-.01em}
.stat-rail .stat span{color:var(--muted);font-size:.85rem}
@media (max-width:760px){.offer-grid{grid-template-columns:1fr}}

/* ===== numbered steps (rejestracja / app) ===== */
.steps{display:grid;gap:16px;counter-reset:step;list-style:none;margin:0;padding:0}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.step-num{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem}
.step h3{margin:0 0 4px;font-size:1.05rem}
.step p{margin:0;color:var(--muted)}

/* ===== filter chips — "Filtr zakładów" signature feature (games page) ===== */
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:9px 16px;
  font-weight:700;font-size:.9rem;cursor:pointer;color:var(--text);transition:background .15s,color .15s,border-color .15s}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.filter-count{color:var(--muted);font-size:.88rem;margin:0 0 20px}
.filter-count b{color:var(--text);font-variant-numeric:tabular-nums}

/* ===== games grid ===== */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
.game{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.game[hidden]{display:none}
.game .thumb{position:relative;aspect-ratio:4/3;background:var(--surface-dark);overflow:hidden}
.game .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(28,29,34,.55);opacity:0;transition:opacity .18s;text-decoration:none}
.game .thumb:hover .game-play,.game .thumb:focus-within .game-play{opacity:1}
.game-play span{background:var(--accent);color:#fff;font-weight:800;padding:10px 22px;border-radius:var(--radius);letter-spacing:.03em}
.game .meta{padding:14px 16px}
.game .meta b{display:block;font-size:.98rem;margin-bottom:2px}
.game .meta small{color:var(--muted);font-size:.8rem}

/* ===== provider rail ===== */
.provider-rail{display:flex;gap:12px;flex-wrap:wrap}
.provider-pill{display:inline-flex;align-items:center;padding:10px 18px;border:1px solid var(--line);
  border-radius:var(--radius);font-weight:800;color:var(--accent-2);background:#fff;font-size:.92rem}
.provider-pill img{display:block;height:26px;width:auto;max-width:110px;object-fit:contain}

/* ===== payment pills (methods row above the table) ===== */
.pay-row{display:flex;gap:12px;flex-wrap:wrap}
.pay-pill{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;font-weight:700;font-size:.92rem}
.pay-pill img{display:block;height:24px;width:auto;max-width:64px;object-fit:contain;flex:0 0 auto}

/* ===== verdict — two-column liked / worth-knowing ===== */
.verdict-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.verdict-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.verdict-card h3{margin-top:0}
.verdict-list{list-style:none;margin:0;padding:0}
.verdict-list li{padding-left:1.6em;position:relative;margin-bottom:10px;color:var(--text)}
.verdict-list.good li::before{content:"+";position:absolute;left:0;color:var(--accent-2);font-weight:800}
.verdict-list.bad li::before{content:"\2013";position:absolute;left:0;color:var(--accent);font-weight:800}
@media (max-width:640px){.verdict-grid{grid-template-columns:1fr}}

/* ===== FAQ — native <details> ===== */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-weight:700;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font-size:1.3rem;color:var(--accent);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:12px 0 0}

/* ===== responsible-gambling callout ===== */
.rg-callout{background:var(--surface-dark);color:var(--text-on-dark);border-radius:var(--radius);padding:32px}
.rg-callout h2,.rg-callout h3{color:var(--text-on-dark)}
.rg-callout p{color:var(--muted-on-dark)}
.rg-callout a{color:var(--accent)}

/* ===== CTA band ===== */
.cta-band{background:var(--accent);text-align:center;padding:48px 0}
.cta-band h2{color:var(--text);margin-bottom:8px}
.cta-band p{color:var(--text);opacity:.85;margin:0 0 22px}
.cta-band .btn-cta{background:var(--surface-dark);color:var(--text-on-dark)}

/* ===== generic collapsing grids (responsive-design skill) ===== */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:16px}

@media (prefers-reduced-motion:reduce){
  .kupon,.card,.reveal,.site-header,.site-nav a::after,.to-top,.game-play,.faq summary::after{transition:none}
  .reveal{opacity:1;transform:none}
}