/* Poza Bańką — style. Kolory i typografia z talii „Poza bańką”. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(../fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: light;
  --bg: #DCDDE9; --fg: #17172B; --muted: #54556F; --line: #B5B6CB; --raised: #E9E9F2;
  --paper: #FBFAF5; --ink: #17172B; --ink-soft: #4D4E66; --paper-line: #DAD8CE;
  --wplyw: #C9341A; --fach: #2438C4; --maska: #BE1A60; --paliwo: #EDB11F; --droga: #0B6E50;
  --on-suit: #FFFFFF; --on-tlen: #17172B; --error: #A32812;
  --shadow: 0 2px 3px rgba(23,23,43,.18), 0 22px 44px -18px rgba(23,23,43,.5);
  --display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --pad: max(18px, env(safe-area-inset-left, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.55 var(--body); }
h1, h2, h3, h4, p, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
a { color: inherit; text-underline-offset: .18em; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--fach); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 6px; z-index: 50; }
.skip:focus { top: 12px; }

.s-wplyw { --suit: var(--wplyw); --on: var(--on-suit); }
.s-fach { --suit: var(--fach); --on: var(--on-suit); }
.s-maska { --suit: var(--maska); --on: var(--on-suit); }
.s-paliwo { --suit: var(--paliwo); --on: var(--on-tlen); }
.s-droga { --suit: var(--droga); --on: var(--on-suit); }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 760px; }

/* Pasek górny */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1.5px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; }
.brand { font: 800 1.35rem/1 var(--display); font-stretch: 80%; text-decoration: none; letter-spacing: -.01em; }
.top nav { display: none; gap: 22px; font-size: .95rem; font-weight: 500; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--fg); }
@media (min-width: 860px) { .top nav { display: flex; } }

/* Przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--fg); background: transparent; border-radius: 6px; padding: 11px 16px; font-weight: 600; line-height: 1.2; text-decoration: none; min-height: 44px; }
.btn:hover:not(:disabled) { background: var(--raised); }
.btn.primary { background: var(--fg); color: var(--bg); padding: 13px 22px; font-size: 1.06rem; }
.btn.primary:hover:not(:disabled) { background: var(--fg); opacity: .86; }
.btn.small { padding: 8px 14px; min-height: 40px; font-size: .95rem; }
.btn.quiet { border-color: var(--line); font-weight: 500; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Sekcje */
section { padding-block: clamp(48px, 9vw, 96px); }
.eyebrow { font: 500 .84rem/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
h2 { font-size: clamp(2.3rem, 6.5vw, 3.8rem); line-height: .96; font-weight: 800; font-stretch: 80%; letter-spacing: -.01em; }
h3 { font-size: 1.5rem; line-height: 1.1; font-weight: 700; font-stretch: 86%; }
.head { display: grid; gap: 14px; margin-bottom: clamp(26px, 4vw, 40px); max-width: 44rem; }
.lede { font-size: 1.16rem; line-height: 1.5; }
.muted { color: var(--muted); }
.rule { border-top: 1.5px solid var(--line); }

/* Hero */
.hero { padding-block: clamp(34px, 6vw, 72px) clamp(44px, 7vw, 84px); }
.hero .wrap { display: grid; gap: clamp(30px, 6vw, 70px); align-items: center; }
.hero-text { display: grid; gap: 22px; min-width: 0; }
h1 { font-size: clamp(4rem, 17vw, 8.4rem); line-height: .86; font-weight: 800; font-stretch: 76%; letter-spacing: -.02em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; border-top: 1.5px solid var(--line); }
.facts li { padding: 12px 12px 12px 0; border-bottom: 1.5px solid var(--line); display: grid; gap: 2px; }
.facts b { font: 700 1.3rem/1.1 var(--display); font-stretch: 86%; }
.facts span { font-size: .92rem; color: var(--muted); }
.hero-card { display: none; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .hero-card { display: block; rotate: 4deg; }
  .facts { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.cardback { position: relative; border: 12px solid var(--paper); background: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5 / 7; width: 100%; display: block; padding: 0; }
.pattern { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 15%; padding: 14px; gap: 6px; overflow: hidden; }
.pattern svg { width: 100%; height: 100%; color: var(--suit); }
.plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 74%; background: var(--paper); color: var(--ink); border-radius: 8px; padding: 18px 14px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.plate b { font: 800 clamp(1.8rem, 5vw, 2.5rem)/.95 var(--display); font-stretch: 78%; }
.plate span { font-size: .9rem; color: var(--ink-soft); }

/* Po co: trzy źródła */
.sources { display: grid; gap: 14px; }
.sources li { background: var(--raised); border-radius: 12px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.sources .n { font: 500 .9rem/1 var(--mono); color: var(--muted); }
.sources li.third { background: var(--fg); color: var(--bg); }
.sources li.third .n { color: var(--paliwo); }
.sources p { font-size: 1rem; }
@media (min-width: 760px) { .sources { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pull { font: 700 clamp(1.5rem, 4vw, 2.1rem)/1.1 var(--display); font-stretch: 86%; margin-top: 28px; }

/* Dla kogo */
.two { display: grid; gap: 28px; }
@media (min-width: 820px) { .two { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; } }
.checks { display: grid; gap: 0; border-top: 1.5px solid var(--line); }
.checks li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 14px 0; border-bottom: 1.5px solid var(--line); align-items: start; }
.checks svg { width: 26px; height: 26px; color: var(--droga); margin-top: 1px; }
.checks b { font-weight: 600; }
.note-box { background: var(--raised); border-radius: 12px; padding: 20px; display: grid; gap: 10px; align-content: start; }

/* Format */
.format { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.format li { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 16px; display: grid; gap: 4px; box-shadow: 0 1px 2px rgba(23,23,43,.2); }
.format b { font: 800 clamp(1.7rem, 6vw, 2.4rem)/1 var(--display); font-stretch: 80%; }
.format span { font-size: .95rem; color: var(--ink-soft); }
@media (min-width: 760px) { .format { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.element { margin-top: clamp(44px, 7vw, 76px); display: grid; gap: 24px; }
.element-head { display: grid; gap: 10px; max-width: 44rem; }
.element-head h3 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.step-no { display: inline-flex; align-items: center; gap: 10px; }
.step-no i { font: 500 .9rem/1 var(--mono); font-style: normal; background: var(--fg); color: var(--bg); border-radius: 4px; padding: 5px 8px; }
.demo-tag { display: inline-block; font: 500 .78rem/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; background: var(--paliwo); color: var(--on-tlen); border-radius: 4px; padding: 4px 8px; }

/* Tablica */
.board { background: var(--paper); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(16px, 3vw, 26px); display: grid; gap: 18px; }
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-top h4 { font: 700 1.3rem/1.1 var(--display); font-stretch: 86%; }
.add { display: grid; gap: 8px; }
.add-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
@media (min-width: 620px) { .add-row { grid-template-columns: minmax(0,1fr) auto; } }
.board .btn { border-color: var(--ink); color: var(--ink); }
.board .btn.primary { background: var(--ink); color: var(--paper); padding: 11px 18px; font-size: 1rem; }
.board .btn:hover:not(:disabled):not(.primary) { background: var(--paper-line); }
.topics { display: grid; gap: 0; border-top: 1.5px solid var(--paper-line); }
.topics li { display: grid; grid-template-columns: 2.2em minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1.5px solid var(--paper-line); }
.topics .pos { font: 500 .95rem/1 var(--mono); color: var(--ink-soft); }
.topics .txt { line-height: 1.35; overflow-wrap: anywhere; }
.topics .mine { display: block; font-size: .8rem; color: var(--ink-soft); }
.topics li.top3 .txt { font-weight: 600; }
.vote { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 6px; padding: 8px 12px; min-height: 44px; min-width: 76px; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.vote svg { width: 14px; height: 14px; }
.vote[aria-pressed="true"] { background: var(--fach); border-color: var(--fach); color: #fff; }
.vote:hover:not([aria-pressed="true"]) { background: var(--paper-line); }
.board-foot { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; align-items: center; font-size: .9rem; color: var(--ink-soft); }
.linkbtn { background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: .18em; color: inherit; font-size: inherit; min-height: 32px; }

/* Talia */
.stage { display: grid; gap: clamp(24px, 5vw, 60px); align-items: start; }
@media (min-width: 900px) { .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } }
@media (max-width: 899px) { .stage.is-playing .slot { order: -1; } }
.panel { display: grid; gap: 22px; min-width: 0; }
.panel > div { display: grid; gap: 20px; }
.count { color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.rules { display: grid; gap: 12px; border-top: 1.5px solid var(--line); padding-top: 18px; max-width: 36em; }
.rules li { color: var(--muted); }
.rules strong { font-weight: 600; color: var(--fg); }
.slot { perspective: 1800px; min-width: 0; max-width: 460px; width: 100%; margin-inline: auto; }
.flip { display: grid; transform-style: preserve-3d; transition: transform .62s cubic-bezier(.3,.9,.3,1); }
.flip.is-up { transform: rotateY(180deg); }
.face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; overflow: hidden; min-width: 0; }
.face.front { transform: rotateY(180deg); box-shadow: var(--shadow); }
.face.back { aspect-ratio: auto; min-height: 520px; transition: translate .2s ease; }
.face.back:hover:not(:disabled) { translate: 0 -5px; }
.card { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; height: 100%; }
.card header { position: relative; background: var(--suit); color: var(--on); padding: 20px 22px 22px; overflow: hidden; display: grid; gap: 30px; }
.card header svg { position: absolute; right: -32px; top: -26px; width: 200px; height: 200px; opacity: .24; }
.tag { position: relative; display: flex; justify-content: space-between; gap: 12px; font: 500 .84rem/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.card h4 { position: relative; font: 800 clamp(2.1rem, 7vw, 3rem)/.96 var(--display); font-stretch: 80%; text-wrap: balance; }
.card .inner { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.task { font-size: 1.14rem; line-height: 1.38; font-weight: 500; }
.steps { display: grid; border-top: 1.5px solid var(--paper-line); }
.steps li { display: grid; grid-template-columns: 3.1em minmax(0,1fr); gap: 8px; padding: 9px 8px; border-bottom: 1.5px solid var(--paper-line); line-height: 1.32; }
.steps .min { font: 500 .96rem/1.4 var(--mono); color: var(--ink-soft); }
.steps li.is-now { background: var(--suit); color: var(--on); }
.steps li.is-now .min { color: inherit; }
.exit { margin-top: auto; display: grid; gap: 3px; }
.exit small { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.exit p { font: 700 1.26rem/1.16 var(--display); font-stretch: 88%; }
.clock { font: 500 clamp(4rem, 14vw, 6.6rem)/.95 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.phase { font-size: 1.12rem; line-height: 1.38; min-height: 3.1em; max-width: 30em; }
.bar { display: flex; gap: 4px; height: 12px; }
.bar i { display: block; position: relative; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fg); }
.total, .note { color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.sound { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: .94rem; cursor: pointer; }
.suits { display: grid; gap: 16px; border-top: 1.5px solid var(--line); padding-top: 22px; }
.suits li { display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 14px; row-gap: 3px; align-content: start; }
.suits .dot { grid-row: span 2; width: 44px; height: 44px; border-radius: 6px; background: var(--suit); color: var(--on); display: grid; place-items: center; }
.suits .dot svg { width: 30px; height: 30px; }
.suits h4 { font: 700 1.2rem/1.1 var(--display); font-stretch: 86%; }
.suits p { color: var(--muted); font-size: .94rem; line-height: 1.38; }
@media (min-width: 900px) {
  .suits { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; }
  .suits li { grid-template-columns: minmax(0,1fr); row-gap: 7px; }
  .suits .dot { grid-row: auto; }
}
.credit { font-size: .95rem; color: var(--muted); }

/* Organizatorzy */
.people { display: grid; gap: 16px; }
@media (min-width: 720px) { .people { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.person { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 20px; display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 16px; align-items: start; box-shadow: 0 1px 2px rgba(23,23,43,.2); }
.avatar { width: 84px; height: 84px; border-radius: 10px; background: var(--suit); color: var(--on); display: grid; place-items: center; font: 800 2rem/1 var(--display); font-stretch: 80%; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person h3 { font-size: 1.45rem; }
.person p { color: var(--ink-soft); font-size: .98rem; margin-top: 6px; }
.person a { display: inline-block; margin-top: 10px; font-weight: 600; font-size: .95rem; }

/* FAQ */
.faq { border-top: 1.5px solid var(--line); }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 700 1.25rem/1.2 var(--display); font-stretch: 88%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font: 500 1.5rem/1 var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 20px; max-width: 42rem; display: grid; gap: 10px; color: var(--muted); }

/* Formularz */
.apply { background: var(--fg); color: var(--bg); }
.apply .eyebrow, .apply .muted { color: #A5A6C0; }
.apply :focus-visible { outline-color: var(--paliwo); }
.formbox { background: var(--paper); color: var(--ink); border-radius: 18px; padding: clamp(18px, 4vw, 36px); box-shadow: var(--shadow); }
.formbox :focus-visible { outline-color: var(--fach); }
.progress { display: grid; gap: 8px; margin-bottom: 24px; }
.progress-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .9rem; color: var(--ink-soft); }
.progress-top b { font: 500 .9rem/1.2 var(--mono); color: var(--ink); }
.pbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 8px; }
.pbar i { background: var(--paper-line); border-radius: 2px; }
.pbar i.on { background: var(--ink); }
.fstep { display: grid; gap: 22px; }
.fstep > legend { font: 800 clamp(1.8rem, 5.5vw, 2.5rem)/1 var(--display); font-stretch: 80%; margin-bottom: 22px; }
.fstep-desc { color: var(--ink-soft); }
.js .fstep:not(.is-active) { display: none; }
.field { display: grid; gap: 6px; }
.field > label, .glabel { font-weight: 600; line-height: 1.3; }
.req { color: var(--error); }
.opt { font-weight: 400; color: var(--ink-soft); font-size: .92rem; }
.hint { font-size: .93rem; color: var(--ink-soft); }
input[type="text"], input[type="email"], input[type="number"], input[type="url"], textarea {
  width: 100%; border: 1.5px solid #8E8FA8; background: #fff; color: var(--ink); border-radius: 6px; padding: 12px; font-size: 1rem; line-height: 1.4; min-height: 48px;
}
textarea { resize: vertical; min-height: 124px; }
input:hover, textarea:hover { border-color: var(--ink); }
.short { max-width: 9rem; }
[aria-invalid="true"] { border-color: var(--error) !important; background: #FFF6F3 !important; }
.err { color: var(--error); font-size: .92rem; font-weight: 500; }
.grid-q { display: grid; gap: 4px; }
.grid-q > legend { font: 700 1.3rem/1.15 var(--display); font-stretch: 86%; margin-bottom: 4px; }
.scale-head { display: none; }
.row { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1.5px solid var(--paper-line); }
.row > .q { line-height: 1.35; font-weight: 500; }
.row.bad > .q { color: var(--error); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.opts label { position: relative; display: grid; }
.opts input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opts span { display: grid; place-items: center; text-align: center; border: 1.5px solid #8E8FA8; border-radius: 6px; padding: 9px 6px; min-height: 44px; font-size: .93rem; line-height: 1.15; background: #fff; }
.opts input:hover + span { border-color: var(--ink); }
.opts input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.opts input:focus-visible + span { outline: 3px solid var(--fach); outline-offset: 2px; }
@media (min-width: 760px) {
  .scale-head { display: grid; grid-template-columns: minmax(0,1fr) repeat(4, 92px); gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); text-align: center; padding-bottom: 6px; border-bottom: 1.5px solid var(--paper-line); align-items: end; }
  .row { grid-template-columns: minmax(0,1fr) 386px; align-items: center; gap: 14px; padding: 9px 0; }
  .opts { grid-template-columns: repeat(4, 92px); }
  .opts span { font-size: .84rem; min-height: 40px; padding: 6px 4px; }
}
.checks-form { display: grid; gap: 12px; }
.check { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px; border: 1.5px solid var(--paper-line); border-radius: 8px; background: #fff; cursor: pointer; line-height: 1.4; }
.check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--ink); }
.check.bad { border-color: var(--error); background: #FFF6F3; }
.check:has(input:checked) { border-color: var(--ink); }
.fnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; flex-wrap: wrap-reverse; }
.fnav .btn { border-color: var(--ink); color: var(--ink); }
.fnav .btn.primary { background: var(--ink); color: var(--paper); flex: 1 1 auto; }
.fnav .btn:hover:not(:disabled):not(.primary) { background: var(--paper-line); }
@media (min-width: 620px) { .fnav .btn.primary { flex: 0 0 auto; margin-left: auto; } }
.js .nojs-submit { display: none; }
html:not(.js) .fnav, html:not(.js) .progress { display: none; }
html:not(.js) .fstep { margin-bottom: 36px; }
.form-alert { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: #FFF6F3; border: 1.5px solid var(--error); color: var(--error); font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks { display: grid; gap: 16px; }
.thanks h3 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.thanks .mark { width: 56px; height: 56px; border-radius: 8px; background: var(--droga); color: #fff; display: grid; place-items: center; }
.thanks .mark svg { width: 34px; height: 34px; }

/* Stopka */
footer { padding-block: 34px 44px; font-size: .95rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Strony tekstowe */
.prose { display: grid; gap: 16px; }
.prose h1 { font-size: clamp(2.8rem, 9vw, 4.6rem); line-height: .92; margin-bottom: 8px; }
.prose h2 { font-size: 1.7rem; font-weight: 700; font-stretch: 86%; line-height: 1.1; margin-top: 18px; }
.prose ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flip, .face.back { transition: none; }
}

/* Poprawki v2 */
.edition { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; justify-self: start; background: var(--paliwo); color: var(--on-tlen); border-radius: 6px; padding: 9px 14px; }
.edition span { font: 500 .8rem/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase; }
.edition b { font: 700 1.3rem/1.1 var(--display); font-stretch: 86%; }
.apply .edition span { color: inherit; }
.tools-title { margin-top: clamp(40px, 6vw, 64px); font-size: clamp(1.9rem, 5.5vw, 2.6rem); font-weight: 800; font-stretch: 80%; line-height: 1; }
.element { margin-top: clamp(26px, 4vw, 40px); }
.element + .element { margin-top: clamp(44px, 7vw, 72px); }
.element-head h4 { font: 700 clamp(1.5rem, 4.5vw, 1.9rem)/1.1 var(--display); font-stretch: 86%; display: flex; align-items: center; gap: 12px; }
.element-head h4 i { font: 500 .9rem/1 var(--mono); font-style: normal; background: var(--fg); color: var(--bg); border-radius: 4px; padding: 5px 8px; }
.board-top h5 { font: 700 1.3rem/1.1 var(--display); font-stretch: 86%; margin: 0; }
.deck { display: grid; gap: 18px; align-items: start; }
.deck-side { display: grid; gap: 12px; }
.suit-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.suit-tab { display: grid; grid-template-columns: 36px minmax(0,1fr); column-gap: 10px; align-items: center; text-align: left; background: var(--raised); border: 1.5px solid transparent; border-radius: 10px; padding: 8px; min-height: 52px; }
.suit-tab .dot { grid-row: span 2; width: 36px; height: 36px; border-radius: 6px; background: var(--suit); color: var(--on); display: grid; place-items: center; }
.suit-tab .dot svg { width: 24px; height: 24px; }
.suit-tab b { font: 700 1.1rem/1.1 var(--display); font-stretch: 86%; }
.suit-tab small { display: none; color: var(--muted); font-size: .9rem; line-height: 1.3; }
.suit-tab:hover { border-color: var(--line); }
.suit-tab[aria-selected="true"] { border-color: var(--fg); background: var(--paper); color: var(--ink); }
.deck-card { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); max-width: 460px; width: 100%; }
@media (min-width: 900px) {
  .deck { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 5vw, 60px); }
  .suit-tabs { grid-template-columns: minmax(0,1fr); }
  .suit-tab { grid-template-columns: 44px minmax(0,1fr); column-gap: 14px; padding: 12px; align-items: start; }
  .suit-tab .dot { width: 44px; height: 44px; }
  .suit-tab .dot svg { width: 30px; height: 30px; }
  .suit-tab small { display: block; margin-top: 2px; }
}
.edition { width: fit-content; max-width: 100%; }
@media (max-width: 899px) { .suit-tab b { grid-row: span 2; align-self: center; } }