@font-face { font-family: "Black Ops One"; src: url("fonty/black-ops-one-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Black Ops One"; src: url("fonty/black-ops-one-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA; font-display: swap; }

:root {
  color-scheme: dark;
  --c1: #c6ff00; --c2: #00ff9c; --tlo: #070907; --pow: #0f130d; --pow2: #171d13;
  --tekst: #eef4e4; --cichy: #a3ad96; --linia: #2c3524;
  --disp: "Black Ops One", Impact, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
[data-pora="dzien"] { --c1: #a8d900; --c2: #00d584; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 17px/1.55 var(--body); overflow-x: hidden; }
body.z-odtw { padding-bottom: 76px; }
a { color: var(--c1); }
h1, h2, h3 { font-family: var(--disp); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: .02em; }
:focus-visible { outline: 3px solid var(--c1); outline-offset: 2px; }
[hidden] { display: none !important; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; color: #0a0a0a; background: var(--c1); font-weight: 700; }
.pomin:focus { top: 8px; }

.nag { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px 18px; align-items: center; flex-wrap: wrap; padding: 10px 20px; background: rgba(7,9,7,.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linia); }
.nag-logo { display: flex; align-items: center; gap: 8px; color: var(--c1); text-decoration: none; font: 22px var(--disp); letter-spacing: .08em; transform: skewX(-10deg); }
.nag-logo svg { width: 30px; height: 30px; }
.nag nav { display: flex; gap: 4px 16px; flex-wrap: wrap; margin-left: auto; }
.nag nav a { color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; }
.nag nav a:hover, .nag nav a[aria-current] { color: var(--c1); border-color: var(--c1); }

.bohater { position: relative; min-height: 74vh; display: flex; align-items: flex-end; overflow: hidden; --lx: 50%; --ly: 42%; touch-action: pan-y; }
.bohater canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bohater::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--lx) var(--ly), rgba(255,255,255,.14), transparent 70%), linear-gradient(transparent 50%, var(--tlo)); }
[data-pora="dzien"] .bohater canvas { filter: saturate(.55) brightness(.62); }
.cma-lot { position: absolute; left: 0; top: 0; width: min(38vw, 250px); z-index: 2; pointer-events: none; will-change: transform; filter: drop-shadow(0 0 22px var(--c1)); }
.cma-lot .sk { transform-origin: 200px 200px; animation: mach 2s infinite cubic-bezier(.3,0,.2,1); }
.cma-lot .sk.p { animation-name: mach2; }
@keyframes mach { 0%, 100% { transform: scaleX(1); } 6% { transform: scaleX(.62); } 30% { transform: scaleX(1); } }
@keyframes mach2 { 0%, 100% { transform: scaleX(1); } 6% { transform: scaleX(.62); } 30% { transform: scaleX(1); } }
.bohater-t { position: relative; z-index: 3; padding: 0 20px 34px; width: min(1120px, 100%); margin: 0 auto; }
.bohater h1 { font-size: clamp(64px, 17vw, 190px); color: var(--c1); transform: skewX(-10deg); transform-origin: left; text-shadow: 0 0 34px color-mix(in srgb, var(--c1) 55%, transparent); background: linear-gradient(var(--c2), var(--c1)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hasla { font-size: clamp(18px, 3vw, 24px); margin: 8px 0 18px; max-width: 34em; }
.nad { font: 14px var(--disp); letter-spacing: .14em; color: var(--c1); text-transform: uppercase; margin: 0 0 8px; }

.przyc { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 20px; font: 600 16px var(--body); color: #0a0a0a; background: var(--c1); border: 0; border-radius: 3px; cursor: pointer; text-decoration: none; transform: skewX(-8deg); }
.przyc:hover { background: var(--c2); }
.przyc.duzy { font: 20px var(--disp); letter-spacing: .05em; padding: 14px 30px; }
.przyc.cichy { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 2px var(--linia); }
.przyc.cichy:hover { box-shadow: inset 0 0 0 2px var(--c1); color: var(--c1); }
.przyc.gra { background: var(--c2); }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }

.tresc { width: min(1120px, 100%); margin: 0 auto; padding: 44px 20px; }
.tresc.waska { width: min(780px, 100%); }
.tresc h2 { font-size: clamp(28px, 5vw, 44px); margin-bottom: 12px; }
.tytul { font-size: clamp(36px, 8vw, 68px); color: var(--c1); transform: skewX(-8deg); transform-origin: left; margin-bottom: 14px; }
.wstep { font-size: 19px; max-width: 38em; margin: 0 0 22px; }
.info { color: var(--cichy); min-height: 1.5em; }

.trojka { display: grid; gap: 14px; grid-template-columns: 1.25fr 1fr; }
.trojka .pole-duze { grid-row: span 3; }
.pole { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 26px; background: var(--pow); border: 1px solid var(--linia); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.pole h2, .pole h3 { font-size: 30px; color: var(--c1); margin: 0; }
.pole p { margin: 0; }
.pole .przyc { margin-top: auto; }
.pole-duze { background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 17%, var(--pow)), var(--pow) 60%); }
.pole-duze h2 { font-size: clamp(40px, 7vw, 72px); }
.seria-box { font-weight: 600; color: var(--c2); }
.zegar { font: 34px var(--disp); color: var(--tekst); }

.rym-form { display: flex; gap: 8px; margin-bottom: 18px; max-width: 620px; }
.rym-form input, .gra-pole input, .karta-pola textarea { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; font: 20px var(--body); color: var(--tekst); background: var(--pow2); border: 2px solid var(--linia); border-radius: 3px; }
.rym-form input:focus, .gra-pole input:focus, .karta-pola textarea:focus { border-color: var(--c1); outline: none; }
.rym-grupa { margin-bottom: 26px; }
.rym-grupa h2 { font-size: 26px; color: var(--c1); margin-bottom: 10px; }
.rym-grupa small { font: 14px var(--body); color: var(--cichy); letter-spacing: 0; margin-left: 6px; }
.chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 5px 11px; min-height: 34px; color: var(--tekst); background: var(--pow2); border: 1px solid var(--linia); border-radius: 2px; text-decoration: none; font-size: 16px; }
a.chip:hover { border-color: var(--c1); color: var(--c1); }
.chip.tak { background: color-mix(in srgb, var(--c1) 24%, var(--pow)); border-color: var(--c1); }
.wers { margin: 0 0 26px; padding: 20px 22px; border-left: 4px solid var(--c1); background: var(--pow); }
.wers-t { font: clamp(20px, 3.4vw, 28px)/1.25 var(--disp); margin: 0 0 6px; }
.wers-p { color: var(--cichy); margin: 0 0 12px; }
.odnosnik { margin-top: 28px; padding: 18px 20px; background: var(--pow); border: 1px solid var(--linia); }

.lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lista li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--pow); border: 1px solid var(--linia); }
.lista button { flex: none; width: 46px; height: 46px; font-size: 16px; color: #0a0a0a; background: var(--c1); border: 0; border-radius: 50%; cursor: pointer; }
.lista button.gra { background: var(--c2); }
.lista b { display: block; font: 21px var(--disp); }
.lista span { color: var(--cichy); font-size: 15px; }
.lista a { margin-left: auto; font-weight: 600; }

/* gra */
.gra-box { width: min(720px, 100%); margin: 0 auto; padding: 34px 20px 50px; min-height: 66vh; }
.gra-start { text-align: center; padding-top: 5vh; }
.gra-slowo { font-size: clamp(56px, 15vw, 118px); color: var(--c1); transform: skewX(-8deg); text-shadow: 0 0 30px color-mix(in srgb, var(--c1) 50%, transparent); overflow-wrap: anywhere; }
.gra-opis { font-size: 19px; margin: 14px auto 24px; max-width: 26em; }
.gra-seria { margin-top: 16px; font-weight: 600; }
.gra-gora { display: flex; align-items: center; gap: 12px; }
.gra-cel { font: clamp(28px, 7vw, 42px) var(--disp); color: var(--c1); margin-right: auto; overflow-wrap: anywhere; }
.gra-czas { font: 34px var(--disp); font-variant-numeric: tabular-nums; }
.gra-pkt { white-space: nowrap; }
.gra-pkt b { font: 26px var(--disp); color: var(--c2); }
.gra-pasek { height: 5px; margin: 10px 0 16px; background: var(--pow2); }
.gra-pasek i { display: block; height: 100%; width: 100%; background: var(--c1); }
.gra-pole form { display: flex; gap: 8px; }
.gra-pole .przyc { transform: none; }
.gra-msg { min-height: 1.6em; margin: 8px 0; color: var(--cichy); }
.gra-pole.zle form { animation: traf .25s; }
@keyframes traf { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.gra-ranga { font-size: clamp(38px, 9vw, 72px); color: var(--c1); transform: skewX(-8deg); transform-origin: left; }
.gra-liczby { font-size: 20px; margin: 10px 0 18px; }
.gra-akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.gra-wynik h2 { font-size: 22px; margin: 22px 0 10px; }
.gra-wynik .wers { margin-top: 18px; }
.gra-nast { margin: 26px 0 12px; font-size: 18px; }
.gra-nast b { font: 24px var(--disp); color: var(--c1); }
.odbl { padding: 10px 14px; color: #0a0a0a; background: var(--c1); }
.odbl a { color: #0a0a0a; font-weight: 700; }

/* generator */
.karta-uklad { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
.karta-pola label { display: block; font-weight: 600; margin: 16px 0 6px; }
.karta-pola textarea { width: 100%; min-height: 96px; resize: vertical; }
.karta-podglad canvas { display: block; width: 100%; height: auto; border: 1px solid var(--linia); }
.segment { display: flex; flex-wrap: wrap; gap: 8px; }
.segment button, .pal { min-height: 44px; padding: 8px 14px; color: var(--tekst); font: 600 15px var(--body); background: var(--pow2); border: 2px solid var(--linia); border-radius: 3px; cursor: pointer; }
.segment button.wyb, .pal.wyb { border-color: var(--c1); }
.pal { display: flex; align-items: center; gap: 8px; }
.pal i { width: 20px; height: 20px; flex: none; background: linear-gradient(var(--b), var(--a)); }
.pal:disabled { opacity: .55; cursor: not-allowed; }

/* nocny kurs */
.nocny { min-height: 74vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px 20px; background: radial-gradient(600px circle at 50% 30%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%); }
.noc-h { font-size: clamp(54px, 13vw, 120px); color: var(--c1); transform: skewX(-8deg); }
.noc-t { margin: 0; max-width: 30em; }
.noc-licz { font: clamp(40px, 10vw, 72px) var(--disp); margin: 0; font-variant-numeric: tabular-nums; }
.noc-wers { font: clamp(22px, 4vw, 34px)/1.25 var(--disp); max-width: 26em; min-height: 3em; margin: 0; }

.odtw { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 14px; background: #0c100a; border-top: 2px solid var(--c1); }
.odtw.widoczny { display: flex; }
.odtw-gp { flex: none; width: 46px; height: 46px; color: #0a0a0a; background: var(--c1); border: 0; border-radius: 50%; cursor: pointer; }
.odtw-opis { flex: 1; min-width: 0; }
.odtw-opis b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.odtw-pos { height: 4px; margin-top: 6px; background: var(--pow2); }
.odtw-pos i { display: block; height: 100%; width: 0; background: var(--c1); }
.odtw-link { font-weight: 600; white-space: nowrap; }
.odtw-x { flex: none; width: 40px; height: 40px; color: var(--tekst); background: none; border: 0; cursor: pointer; font-size: 17px; }

.stopka { margin-top: 30px; padding: 26px 20px 34px; color: var(--cichy); border-top: 1px solid var(--linia); font-size: 15px; }
.stopka-w { width: min(1120px, 100%); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.stopka a { color: var(--tekst); }
.stopka small { width: 100%; }


/* gra: dodatki */
.gra-wyz { margin: 14px auto; padding: 10px 14px; max-width: 30em; border: 2px solid var(--c1); font-size: 18px; }
.gra-wyz b { font: 24px var(--disp); color: var(--c1); }
.gra-wyz.wygrana { color: #0a0a0a; background: var(--c1); }
.gra-wynik .gra-wyz { margin-left: 0; }
.gra-opisowa { width: min(720px, 100%) !important; }
.slowo-dnia { font-size: 16px; }
.slowo-dnia b { display: block; font: clamp(34px, 6vw, 56px)/1.15 var(--disp); color: var(--tekst); overflow-wrap: anywhere; }
.drabina { margin: 6px 0 14px; padding: 0; list-style: none; width: 100%; font-size: 15px; }
.drabina li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--linia); }
.drabina span { color: var(--cichy); }
.z-opcje { margin-bottom: 12px; }
.z-opcje summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; color: var(--cichy); }
.gra-czas.pilne { color: #ff5a5a; }
.gra-zasady { margin: 22px auto 0; max-width: 28em; text-align: left; color: var(--cichy); }
.gra-zasady summary { cursor: pointer; text-align: center; min-height: 32px; }
.gra-zasady ul { padding-left: 20px; margin: 8px 0 0; }
.gra-dalej { margin: 18px 0 0; }
.gra-obser { margin-top: 12px; }
.gra-staty, .gra-kal { margin: 30px 0 18px; }
.gra-staty dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0 0 14px; }
.gra-staty dl div { padding: 10px; background: var(--pow); border: 1px solid var(--linia); }
.gra-staty dt { font-size: 13px; color: var(--cichy); }
.gra-staty dd { margin: 0; font: 28px var(--disp); color: var(--c1); }
.gra-rozklad > div { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.gra-rozklad span { flex: none; width: 140px; font-size: 14px; }
.gra-rozklad i { display: block; height: 14px; background: var(--c1); }
.gra-rozklad b { font-size: 14px; }
.noc-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; max-width: 420px; }
.noc-k { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--cichy); text-decoration: none; background: var(--pow); border: 1px solid var(--linia); font-weight: 600; }
.noc-k:hover { border-color: var(--c1); color: var(--c1); }
.noc-k.zagrana { color: #0a0a0a; background: var(--c1); border-color: var(--c1); }
.noc-k.dzis { color: var(--c1); border: 2px solid var(--c1); }
.g-tr { margin-top: 8px; }
.noc-prz { justify-content: center; }

/* rymy: dodatki */
.okruszki { margin: 0 0 12px; font-size: 14px; color: var(--cichy); }
.okruszki a { color: var(--cichy); }
.rym-narz { margin-bottom: 22px; }
.rym-akcje { margin-top: 10px; }
.rym-narz .info { margin: 8px 0 0; }
.rym-fakt { color: var(--cichy); margin: 0 0 18px; }
button.chip { cursor: pointer; font-family: inherit; }
button.chip:hover { border-color: var(--c1); color: var(--c1); }
.chip[hidden] { display: none; }
.katalog { columns: 3 150px; column-gap: 18px; margin: 0; padding: 0; list-style: none; }
.katalog li { padding: 4px 0; break-inside: avoid; }
.litery { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.litery a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font: 18px var(--disp); text-decoration: none; background: var(--pow); border: 1px solid var(--linia); }
.litery a:hover { border-color: var(--c1); }

/* zeszyt */
.zeszyt { width: min(1240px, 100%); margin: 0 auto; padding: 28px 20px 40px; }
.z-pasek { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.z-pasek select, .z-bit select { min-height: 44px; max-width: 240px; padding: 6px 10px; color: var(--tekst); font: 15px var(--body); background: var(--pow2); border: 2px solid var(--linia); border-radius: 3px; }
.z-m { min-height: 44px; padding: 8px 12px; color: var(--tekst); font: 600 14px var(--body); background: var(--pow2); border: 2px solid var(--linia); border-radius: 3px; cursor: pointer; text-decoration: none; }
.z-m:hover { border-color: var(--c1); color: var(--c1); }
.z-m.gra { color: #0a0a0a; background: var(--c1); border-color: var(--c1); }
.z-bit { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; background: var(--pow); border: 1px solid var(--linia); }
.z-bit label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; }
.z-bit input[type=range] { width: 130px; accent-color: var(--c1); }
.z-bit input[type=checkbox], .z-pasek input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--c1); }
.z-pasek label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; }
.z-takt { font: 18px var(--disp); color: var(--c1); min-width: 90px; }
.z-uklad { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.z-pole { position: relative; background: var(--pow); border: 2px solid var(--linia); }
.z-pole:focus-within { border-color: var(--c1); }
.z-tlo, #z-t { display: block; width: 100%; margin: 0; padding: 14px 14px 14px 66px; font: 19px/1.6 var(--body); white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4; letter-spacing: 0; }
.z-tlo { position: absolute; inset: 0; height: auto; pointer-events: none; color: var(--tekst); }
#z-t { position: relative; min-height: 320px; color: transparent; background: transparent; caret-color: var(--c1); border: 0; outline: 0; resize: none; overflow: hidden; }
#z-t::selection { background: rgba(255,255,255,.28); color: transparent; }
.z-w { position: relative; min-height: 1.6em; }
.z-w.flow { background: rgba(255,255,255,.1); box-shadow: -66px 0 0 rgba(255,255,255,.1); }
.z-syl { position: absolute; left: -58px; top: 0; width: 50px; display: flex; justify-content: flex-end; gap: 6px; font-size: 14px; line-height: 30px; color: var(--cichy); font-variant-numeric: tabular-nums; }
.z-syl.odst { color: #ffb347; font-weight: 700; }
.z-syl b { width: 14px; color: var(--c1); text-align: center; }
.z-tlo mark { color: inherit; border-radius: 2px; }
.z-tlo mark.mocny { box-shadow: inset 0 -3px 0 currentColor; }
mark.r0 { background: rgba(198,255,0,.32); } mark.r1 { background: rgba(0,229,255,.32); } mark.r2 { background: rgba(255,0,212,.32); } mark.r3 { background: rgba(255,138,0,.36); }
mark.r4 { background: rgba(160,100,255,.42); } mark.r5 { background: rgba(0,255,156,.28); } mark.r6 { background: rgba(255,60,80,.38); } mark.r7 { background: rgba(255,230,0,.3); }
.z-bok { position: sticky; top: 70px; padding: 14px; background: var(--pow); border: 1px solid var(--linia); }
.z-bok h2 { font-size: 22px; color: var(--c1); margin: 0 0 8px; overflow-wrap: anywhere; }
.z-rymy { max-height: 46vh; overflow-y: auto; }
.z-staty { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.z-staty dt { font-size: 12px; color: var(--cichy); }
.z-staty dd { margin: 0; font: 22px var(--disp); }
.z-legenda { margin: 12px 0 0; font-size: 13px; color: var(--cichy); }

@media (max-width: 860px) {
  .z-uklad { grid-template-columns: minmax(0, 1fr); }
  .z-bok { order: -1; top: 0; z-index: 5; padding: 8px 10px; }
  .z-bok h2 { font-size: 16px; margin-bottom: 6px; }
  .z-rymy { max-height: 92px; }
  .zeszyt > .wstep { display: none; }
  .z-staty, .z-legenda { display: none; }
}
@media (max-width: 760px) {
  .nag { position: static; }
  .gra-rozklad span { width: 112px; }
}
@media (max-width: 760px) {
  .trojka, .karta-uklad { grid-template-columns: minmax(0, 1fr); }
  .trojka .pole-duze { grid-row: auto; }
  .karta-podglad { order: -1; max-width: 240px; margin: 0 auto; }
  .nag nav { margin-left: 0; width: 100%; }
  .bohater { min-height: 66vh; }
  .lista li { flex-wrap: wrap; }
  .lista li div { flex: 1; min-width: 0; }
  .lista a { margin-left: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .cma-lot .sk { animation: none; }
  .gra-pole.zle form { animation: none; }
}

/* Rymy na okazje i teksty (10.11.2026) */
.wierszyk { margin: 0 0 28px; }
.wierszyk-t { font: clamp(19px, 3vw, 24px)/1.45 var(--disp); color: var(--tekst); }
.okazje { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 0 0 24px; }
.okazja { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--pow); border: 1px solid var(--linia); text-decoration: none; color: var(--tekst); }
.okazja:hover { border-color: var(--c1); }
.okazja b { font: 20px var(--disp); color: var(--c1); }
.okazja span { color: var(--cichy); font-size: 15px; }
.tekst-piosenki { margin: 8px 0 30px; font-size: 18px; line-height: 1.6; }
.tekst-piosenki p { margin: 0 0 20px; }
.lista b a { margin-left: 0; color: inherit; }

/* Zielony kursor (10.11.2026) */
html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M2 2 L2 18 L6.5 13.8 L9.6 20.5 L12.4 19.2 L9.4 12.6 L15.5 12.6 Z' fill='%23c6ff00' stroke='%23070907' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto; }
a, button, summary, label, [data-graj], .chip, .okazja { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='7' fill='%2300ff9c' stroke='%23070907' stroke-width='1.6'/%3E%3C/svg%3E") 11 11, pointer; }
input, textarea { cursor: text; }

/* Wygląd 10.11.2026: numery na pierwszym planie, zielony tylko dla akcji i grającego numeru */
.nad { font: 600 14px var(--body); letter-spacing: 0; text-transform: none; color: var(--cichy); }
.pole h2, .pole h3, .pole-duze h2 { color: var(--tekst); }
.pole-duze { background: var(--pow); border-color: color-mix(in srgb, var(--c1) 35%, var(--linia)); }

.setlista-sek { padding-top: 12px; }
.tresc .setlista-h { font: 600 16px var(--body); letter-spacing: 0; color: var(--cichy); margin: 0 0 6px; }
.setlista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.setlista li { display: flex; align-items: center; border-bottom: 1px solid var(--linia); }
.set { flex: 1; min-width: 0; display: grid; grid-template-columns: 3em 1fr auto; align-items: baseline; gap: 0 18px; padding: 16px 0 14px; background: none; border: 0; color: var(--tekst); text-align: left; font: inherit; }
.set-nr { font: 16px var(--disp); color: var(--cichy); }
.set-tyt { font: clamp(38px, 8.4vw, 100px)/1.02 var(--disp); color: transparent; -webkit-text-stroke: 1.5px var(--tekst); transform: skewX(-8deg); transform-origin: left; transition: color .2s, text-shadow .2s, -webkit-text-stroke-color .2s; overflow-wrap: anywhere; }
.set:hover .set-tyt, .set:focus-visible .set-tyt { color: var(--tekst); }
.set:hover .set-nr, .set:focus-visible .set-nr { color: var(--c1); }
.set.gra .set-tyt { color: var(--c1); -webkit-text-stroke-color: var(--c1); text-shadow: 0 0 30px color-mix(in srgb, var(--c1) 50%, transparent); }
.set.gra .set-nr { color: var(--c1); }
.set-info { color: var(--cichy); font-size: 15px; text-align: right; }
.set-link { flex: none; margin-left: 16px; font-weight: 600; }
.setlista-stopka { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; }
.setlista-stopka a { color: var(--tekst); font-weight: 600; }
.setlista-stopka a:hover { color: var(--c1); }
@media (max-width: 640px) {
  .set { grid-template-columns: 2.2em 1fr; padding: 12px 0 10px; }
  .set-info { grid-column: 2; text-align: left; font-size: 14px; }
  .set-tyt { -webkit-text-stroke-width: 1.2px; }
}
@media (prefers-reduced-motion: reduce) { .set-tyt { transition: none; } }