/* Design tokens — mb-pl-07 "Tablica odlotów" (split-flap departure board), see DESIGN_BRIEF.md.
   Light editorial surface + one crimson accent; the dark amber board palette is reserved for the
   signature bonus-board component only, never the page surface. Tokens only here — block-level
   markup/styling for the board, magazine grid, hero etc. is a later pass (html-front). */
:root{
  --bg:#F7F3E9; --bg-elev:#EFEADA; --bg-card:#FFFFFF; --text:#1C1A15; --muted:rgba(28,26,21,.62);
  --accent:#C81E4B; --line:rgba(28,26,21,.14); --radius:10px; --wrap:1160px;
  --header-bg:rgba(247,243,233,.92);
  /* split-flap board component — dark amber-on-black, confined to the board + FAQ marker */
  --board-bg:#15130F; --board-fg:#F0A93E; --board-line:rgba(240,169,62,.28);
  --font-heading:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:17px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-family:var(--font-heading);font-weight:800;letter-spacing:-0.01em}
/* numbers (offer figures, tables, the flip-board) sit in fixed-width cells so digits line up */
.num,table td,.board{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  /* underline-grow micro-interaction — shared by nav links and inline text links */
  .site-nav a,.prose a{position:relative;text-decoration:none}
  .site-nav a::after,.prose a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
    background:var(--accent);transition:right .2s ease}
  .site-nav a:hover::after,.site-nav a:focus-visible::after,.prose a:hover::after,.prose a:focus-visible::after{right:0}
}
.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)}
.header-inner{display:flex;align-items:center;gap:18px;height:64px}
.site-nav{display:flex;gap:6px;margin-left:auto}
.nav-toggle{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:12px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-cta{background:var(--accent);color:#fff}
section{padding:56px 0}
.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)}
.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}
.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}}

/* ============================================================
   mb-pl-07 block components — "Tablica odlotów" (split-flap board)
   ============================================================ */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
}

/* section heading tick-mark divider — replaces plain <hr> */
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--muted);margin-bottom:var(--space-2)}
.kicker::before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--board-fg);filter:drop-shadow(0 0 0 var(--board-fg))}
.kicker::before{border-left-color:#C81E4B}

/* category chip in hero */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:999px;
  background:var(--bg-elev);border:1px solid var(--line);color:var(--muted)}

/* ---------- magazine grid (home page only) ---------- */
.mag{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-6)}
.mag>*{grid-column:1/-1;min-width:0}
@media (min-width:64em){
  .mag.split-7-5>:first-child{grid-column:1/8}
  .mag.split-7-5>:last-child{grid-column:8/13}
  .mag.split-5-7>:first-child{grid-column:1/6}
  .mag.split-5-7>:last-child{grid-column:6/13}
  .mag.split-8-4>:first-child{grid-column:1/9}
  .mag.split-8-4>:last-child{grid-column:9/13}
}

/* ---------- hero ---------- */
.hero{padding-top:var(--space-12);padding-bottom:var(--space-8)}
.hero h1{font-size:clamp(2rem,4vw + 1rem,2.9rem)}
.hero .lead{font-size:1.15rem;color:var(--muted);max-width:56ch}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);list-style:none;padding:0}
.trust-row li{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--muted)}
.trust-row b{color:var(--text);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* ---------- legality strip ---------- */
.legality{background:var(--bg-elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.legality-inner{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-4);padding-block:var(--space-6)}
.legality-badge{flex:0 0 auto;font-family:var(--font-mono);font-weight:700;font-size:.78rem;letter-spacing:.03em;
  padding:8px 12px;border-radius:8px;background:var(--board-bg);color:var(--board-fg);white-space:nowrap}
.legality p{margin:0;max-width:64ch}
.legality a{white-space:nowrap}

/* ---------- split-flap bonus board (signature) ---------- */
.board-wrap{background:var(--board-bg);border-radius:var(--radius);padding:var(--space-6);color:var(--board-fg)}
.board-wrap h2,.board-wrap h3{color:var(--board-fg)}
.board-note{color:rgba(240,169,62,.7);font-size:.88rem;margin-top:var(--space-2)}
.board{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-4) 0 0}
.board-row{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.board-row .board-label{font-size:.72rem;letter-spacing:.04em;color:rgba(240,169,62,.65);text-transform:uppercase}
.board-cells{display:flex;gap:3px;flex-wrap:wrap}
.board-cell{position:relative;min-width:1.05ch;background:#1F1B14;border:1px solid var(--board-line);border-radius:4px;
  padding:8px 6px;font-size:1.5rem;font-weight:700;line-height:1;text-align:center;overflow:hidden}
.board-cell::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--board-line)}
.board-cell.wide{padding-inline:10px}
@media (prefers-reduced-motion:no-preference){
  .board.js .board-cell .flap{display:inline-block;backface-visibility:hidden}
  .board.js .board-cell{perspective:220px}
  .board-cell[data-flip]{animation:board-flip .15s ease-out both}
  @keyframes board-flip{from{transform:rotateX(70deg);opacity:.15}to{transform:rotateX(0deg);opacity:1}}
}

/* ---------- providers / games ---------- */
.providers{display:flex;flex-wrap:wrap;gap:var(--space-3);list-style:none;padding:0;margin:0}
.providers li{background:var(--bg-card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.9rem}
.providers li.has-logo{padding:8px 16px;display:flex;align-items:center}
.providers li.has-logo img{display:block;height:24px;width:auto;max-width:100px;object-fit:contain}
.games-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.game{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.game .thumb{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--board-bg),#2a2418);color:var(--board-fg);font-family:var(--font-mono);font-weight:700}
.game .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game .meta{padding:12px 14px}
/* payment method logos inside tables */
.pay-icon{display:inline-block;height:22px;width:auto;max-width:44px;object-fit:contain;vertical-align:middle;margin-right:8px;background:#fff;border-radius:4px;padding:2px;border:1px solid var(--line)}
.pay-icons-inline{display:inline-flex;gap:6px;align-items:center;vertical-align:middle;margin-right:8px}
.pay-icons-inline img{height:22px;width:auto;max-width:44px;object-fit:contain;background:#fff;border-radius:4px;padding:2px;border:1px solid var(--line)}
.game .meta b{display:block;font-size:.95rem}
.game .meta span{color:var(--muted);font-size:.82rem}
.game-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(21,19,15,.72);
  opacity:0;transition:opacity .18s ease;text-decoration:none}
.game-play span{color:#fff;font-weight:700;padding:8px 18px;border:1px solid var(--board-fg);border-radius:999px}
@media (prefers-reduced-motion:no-preference){
  .game:hover,.game:focus-within{transform:translateY(-3px);box-shadow:0 10px 24px rgba(28,26,21,.12)}
}
.game:hover .game-play,.game:focus-within .game-play{opacity:1}

/* ---------- pros/cons scorecard ---------- */
.scorecard{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.score-col{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6)}
.score-col h3{display:flex;align-items:center;gap:8px}
.score-col ul{margin:0;padding-left:1.2em}
.score-col li{margin-bottom:8px}

/* ---------- verdict ---------- */
.verdict{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-8)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:var(--space-4) 0}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:0 0 auto;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:8px solid var(--board-fg);background:var(--board-bg);transition:transform .18s ease}
.faq summary::before{margin:-2px 0;padding:6px;border-radius:3px;box-sizing:content-box}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq .faq-a{margin:var(--space-3) 0 0;color:var(--muted);max-width:68ch}

/* ---------- CTA band ---------- */
.cta-band{background:var(--accent);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band .btn-cta{background:#fff;color:var(--accent)}
.cta-band p{color:rgba(255,255,255,.85)}

/* ---------- RG callout ---------- */
.rg-callout{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6);
  display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between}

/* ---------- internal pages: page-hero + narrow prose column ---------- */
.page-hero{background:var(--bg-elev);border-bottom:1px solid var(--line);padding-block:var(--space-8)}
.page-hero h1{margin-bottom:var(--space-2)}
.crumbs{display:block;padding-top:var(--space-4);font-size:.86rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.prose-wrap{max-width:68ch}
.prose-wrap.wide{max-width:none}

/* ---------- scroll-reveal (shared IntersectionObserver) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
  .reveal.in{opacity:1;transform:none}
}

/* section alt band + generic spacing helpers */
.band-alt{background:var(--bg-elev)}
.section-head{margin-bottom:var(--space-6)}
@media (max-width:640px){
  .board-cell{font-size:1.15rem;padding:7px 5px}
  .legality-inner{flex-direction:column}
}

/* table → cards on narrow screens (css-layout §5) — data-label driven, same <table> markup */
@media (max-width:640px){
  .cards-mobile table,.cards-mobile thead,.cards-mobile tbody,.cards-mobile tr,.cards-mobile td{display:block}
  .cards-mobile table{min-width:0}
  .cards-mobile thead{display:none}
  .cards-mobile tr{margin:0;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
  .cards-mobile tr:last-child{border-bottom:none}
  .cards-mobile td{display:flex;justify-content:space-between;gap:var(--space-3);padding:6px 0;border:none;text-align:right}
  .cards-mobile td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left}
}