/* Oś czasu: Droga do Niepodległości — style.
   Podstawa (paleta, przyciski, nagłówek, sekcje pod grą) przeniesiona z Wielkiego Quizu Szkolnego:
   kanon AI Expert Lab — granat #0a1a3a, złoto #dbae4a, Poppins (lokalnie, fonty/). Dodatki: czerwień flagi i karty jak z archiwum. */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonty/poppins-400-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonty/poppins-400-latin.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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonty/poppins-500-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonty/poppins-500-latin.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonty/poppins-600-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonty/poppins-600-latin.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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonty/poppins-700-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonty/poppins-700-latin.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: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonty/poppins-800-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonty/poppins-800-latin.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 {
  --granat: #0a1a3a;
  --granat-2: #13295a;
  --granat-3: #1e3a78;
  --zloto: #dbae4a;
  --zloto-jasne: #f1d48a;
  --zloto-ciemne: #a9822b;
  --papier: #ffffff;
  --kratka: #dbe4f3;
  --margines: #e0645c;
  --tekst: #0a1a3a;
  --tekst-2: #4f5b78;
  --ramka: #cdd6e8;
  --ok: #17865a;
  --ok-tlo: #e3f4ec;
  --zle: #c8372d;
  --zle-tlo: #fbe8e6;
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--granat); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--tekst); background: #f3f5fa; line-height: 1.5; font-size: 17px; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--granat-3); }
:focus-visible { outline: 4px solid var(--zloto); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--zloto); color: var(--granat); padding: 8px 14px; border-radius: 8px; z-index: 50; font-weight: 600; }
.skip:focus { left: 12px; }
body.w-grze { overflow: hidden; }
body.w-grze > :not(.scena):not(script) { visibility: hidden; }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 13px 28px; min-height: 50px;
  font-weight: 700; font-size: 18px; line-height: 1.1; text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s;
}
.btn:active { transform: translateY(3px); }
.btn-zloty { background: var(--zloto); color: var(--granat); box-shadow: 0 5px 0 var(--zloto-ciemne); }
.btn-zloty:hover { background: #e4ba5a; }
.btn-zloty:active { box-shadow: 0 2px 0 var(--zloto-ciemne); }
.btn-granat { background: var(--granat); color: #fff; box-shadow: 0 5px 0 #020816; }
.btn-granat:hover { background: var(--granat-2); }
.btn-granat:active { box-shadow: 0 2px 0 #020816; }
.btn-obrys { background: transparent; color: var(--granat); border: 2px solid var(--granat); box-shadow: none; }
.btn-obrys:hover { background: #eef1f8; }
.btn-obrys-jasny { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
.btn-obrys-jasny:hover { border-color: #fff; }
.btn-duzy { font-size: 21px; padding: 16px 40px; min-height: 58px; }
.btn-maly { font-size: 16px; padding: 9px 20px; min-height: 42px; box-shadow: 0 4px 0 var(--zloto-ciemne); }
.link-btn { background: none; border: 0; padding: 6px 2px; color: var(--granat-3); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--zloto); }
.link-btn:hover { color: var(--granat); }

/* ---------- pasek strony ---------- */
.pasek { background: var(--granat); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 56px); }
.marka { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; }
.marka svg { width: 34px; height: 34px; }
.pasek-nav { display: flex; gap: 22px; }
.pasek-nav a { color: #c9d3ec; text-decoration: none; font-size: 15px; font-weight: 500; }
.pasek-nav a:hover { color: var(--zloto-jasne); }

/* ---------- otwarcie: patrz „PIERWSZY EKRAN” niżej ---------- */

/* ---------- sekcje pod grą ---------- */
.sekcja { padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 56px); }
.sekcja-wnetrze { max-width: 1120px; margin: 0 auto; }
.sekcja h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 18px; font-weight: 700; }
.jak { background: #fff; }
.kroki { list-style: none; counter-reset: k; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 26px; }
.kroki li { counter-increment: k; position: relative; padding-top: 48px; font-size: 16.5px; line-height: 1.5; max-width: 34ch; }
.kroki li::before { content: counter(k); position: absolute; top: 0; left: 0; font-size: 40px; font-weight: 800; line-height: 1; color: var(--zloto); }
.dopisek { margin: 28px 0 0; padding: 12px 16px; border-left: 4px solid var(--zloto); background: #fbf6e6; border-radius: 0 10px 10px 0; max-width: 62ch; }
.opis { background: #fff; border-top: 1px solid #e3e8f2; }
.kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 32px; }
.kolumny h2 { font-size: clamp(20px, 1.8vw, 24px); }
.kolumny p { margin: 0 0 12px; color: #26324f; }
.faq { background: #f3f5fa; }
.faq-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 40px; }
.faq h3 { font-size: 17.5px; margin: 0 0 6px; line-height: 1.3; }
.faq-lista p { margin: 0 0 18px; color: #26324f; max-width: 60ch; }
.zrodla { margin: -8px 0 18px; font-size: 14px; color: #26324f; }
.zrodla summary { cursor: pointer; font-weight: 600; }
.zrodla ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.zapis { background: var(--granat); color: #fff; }
.zapis a { color: var(--zloto-jasne); }
.zapis-wnetrze { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.zapis p { color: #d3dbef; margin: 0; }
.zapis-forma { display: grid; gap: 12px; justify-items: start; }
.zapis .ml-embedded { width: 100%; }
.maly { font-size: 13.5px; color: #aab6d6 !important; }
.inne { background: #fff; }
.inne-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inne-lista a { display: block; text-decoration: none; color: var(--tekst); border: 2px solid var(--ramka); border-radius: 14px; padding: 14px 16px; }
.inne-lista a:hover { border-color: var(--granat); }
.inne-lista strong { display: block; font-size: 17px; }
.inne-lista span { color: var(--tekst-2); font-size: 14.5px; }
.stopka { background: var(--granat); color: #aab6d6; text-align: center; font-size: 14px; padding: 22px 16px 28px; line-height: 1.9; }
.stopka a { color: #dfe6f6; }
kbd { font-family: var(--font); font-size: .85em; font-weight: 600; border: 1.5px solid currentColor; border-bottom-width: 3px; border-radius: 6px; padding: 0 6px; }

/* ---------- strona: uzupełnienia ---------- */
:root { --czerwien: #d4213d; --karta: #fbf6ea; --karta-ink: #1b2440; --przes: #c96a00; --przes-tlo: #fff1dc; }
.znak { width: 16px; height: 16px; flex: none; display: inline-block; }
.znak-0 { background: var(--czerwien); border-radius: 50%; }
.znak-1 { background: #2f7fd8; border-radius: 3px; transform: rotate(45deg) scale(.85); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.okno-dlg { border: 0; border-radius: 20px; padding: 24px; max-width: min(460px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(2,8,22,.5); }
.okno-dlg::backdrop { background: rgba(10,26,58,.6); }
.okno-dlg h2 { margin: 0 0 6px; }
.okno-dlg .maly { color: var(--tekst-2) !important; }
.okno-dlg .link { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 2px solid var(--ramka); border-radius: 10px; margin: 8px 0 12px; }
.okno-dlg canvas { display: block; margin: 0 auto 14px; width: 220px; height: 220px; image-rendering: pixelated; }
.rzad { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .zapis-wnetrze { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pasek-nav { gap: 14px; }
}

/* ============================================================
   PIERWSZY EKRAN — obraz w tle, tytuł na środku, duży „Zagraj”, wachlarz kart, ustawienia w jednym pasku
   tlo-otwarcie.jpg: obraz wygenerowany w Kling (14.10.2026)
   ============================================================ */
.otwarcie {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  min-height: calc(100svh - 62px); display: grid; place-items: center;
  padding: clamp(18px, 4vh, 48px) clamp(16px, 4vw, 56px) clamp(20px, 4vh, 44px);
  background:
    linear-gradient(180deg, rgba(10,26,58,.35) 0%, rgba(10,26,58,.62) 45%, rgba(10,26,58,.92) 100%),
    url(tlo-otwarcie.jpg) center 30% / cover no-repeat, var(--granat);
}
.otwarcie-srodek { width: 100%; max-width: 1240px; display: flex; flex-direction: column; align-items: center; }
.nad { margin: 0 0 10px; color: var(--zloto-jasne); font-weight: 600; font-size: clamp(14px, 1.3vw, 17px); letter-spacing: .03em; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.otwarcie h1 { margin: 0; font-weight: 800; font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 4px 24px rgba(0,0,0,.55); }
.otwarcie h1 span { display: block; color: var(--zloto); font-size: .72em; margin-top: 6px; }
.lead { margin: 16px 0 0; max-width: 36em; color: #e6ebf7; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* wachlarz kart: pokazuje, o co chodzi w grze */
.wachlarz { display: flex; justify-content: center; align-items: flex-end; margin: clamp(18px, 3.5vh, 36px) 0 clamp(18px, 3vh, 30px); position: relative; }
.wachlarz::before { content: ""; position: absolute; left: -6%; right: -6%; top: 58%; height: 4px; background: linear-gradient(90deg, transparent, var(--zloto) 10%, var(--zloto) 90%, transparent); }
.wk { position: relative; width: clamp(92px, 11vw, 150px); margin: 0 clamp(4px, .7vw, 10px); background: var(--karta); color: var(--karta-ink); border-radius: 10px; padding: 0 0 6px; border-top: 7px solid #fff; box-shadow: inset 0 4px 0 var(--czerwien), 0 14px 30px rgba(0,0,0,.45); overflow: hidden; }
.wk img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wk b { display: block; font-size: clamp(15px, 1.6vw, 22px); font-weight: 800; padding-top: 4px; }
.wk:nth-child(1) { transform: rotate(-5deg) translateY(6px); }
.wk:nth-child(2) { transform: rotate(-2deg); }
.wk:nth-child(4) { transform: rotate(2deg); }
.wk:nth-child(5) { transform: rotate(5deg) translateY(6px); }
.wk-pyt { transform: translateY(-22px) scale(1.12); z-index: 1; outline: 4px solid var(--zloto); box-shadow: inset 0 4px 0 var(--czerwien), 0 0 0 8px rgba(219,174,74,.25), 0 18px 40px rgba(0,0,0,.55); }
.wk-pyt b { color: var(--czerwien); }

.btn-graj { font-size: clamp(22px, 2.2vw, 28px); padding: 18px 56px; min-height: 68px; gap: 14px; }
.btn-graj svg { width: 1em; height: 1em; }

/* ustawienia: jeden pasek pod przyciskiem */
.karta-ust {
  margin-top: clamp(18px, 3vh, 28px); width: auto; max-width: 100%;
  background: rgba(6,16,38,.82); border: 1px solid rgba(219,174,74,.45); border-radius: 20px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 44px rgba(0,0,0,.45);
  padding: 14px 22px 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; text-align: left;
}
.pole { min-width: 0; }
.pole-tyt { margin: 0 0 7px; font-size: 16px; font-weight: 700; color: var(--zloto-jasne); letter-spacing: .02em; }
.wybor { display: flex; gap: 5px; background: rgba(255,255,255,.08); padding: 5px; border-radius: 14px; }
.wybor button { text-align: center; border: 0; background: transparent; border-radius: 10px; padding: 8px 14px; font-size: 18px; font-weight: 700; line-height: 1.15; color: #fff; }
.wybor button small { display: block; font-size: 13.5px; font-weight: 500; color: #d3dbef; margin-top: 2px; }
.wybor button:hover { background: rgba(255,255,255,.1); }
.wybor button[aria-checked="true"] { background: var(--zloto); color: var(--granat); }
.wybor button[aria-checked="true"] small { color: #3d2f0c; }
.wybor-liczby { display: flex !important; }
.wybor-liczby button { min-width: 56px; font-size: 20px; }
.wybor-liczby button.wszystkie { font-size: 18px; }
.wybor-liczby button small { font-size: 12px; }
.nazwy { flex-basis: 100%; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.nazwy label { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 3px 10px; }
.nazwy input { border: 0; outline: 0; font: inherit; font-size: 17px; width: 180px; padding: 4px 0; background: transparent; color: var(--tekst); }
.zestaw { margin: 14px 0 0; font-size: 16px; color: #e6ebf7; background: rgba(6,16,38,.7); border-radius: 999px; padding: 6px 18px; }
.zestaw .link-btn { color: #fff; font-size: 16px; }
.zestaw #rekord { margin-left: 8px; color: var(--zloto-jasne); }
.blad { margin: 10px 0 0; color: #ffb4ad; font-size: 14.5px; }
@media (max-height: 820px) and (min-width: 701px) {
  .wk { width: clamp(84px, 8.5vw, 118px); }
  .otwarcie h1 { font-size: clamp(38px, 4.6vw, 66px); }
}
@media (max-width: 700px) {
  .otwarcie { min-height: 0; }
  .wachlarz .wk:nth-child(1), .wachlarz .wk:nth-child(5) { display: none; }
  .wk { width: 27vw; }
  .btn-graj { width: 100%; }
  .karta-ust { flex-direction: column; align-items: stretch; }
  .wybor button { flex: 1; padding: 6px 6px; }
}

/* ============================================================
   TRYB GRY — scena zasłania całą stronę
   --s: skala czcionek i kart; w trybie drużyn rośnie, żeby było czytelnie z końca sali.
   ============================================================ */
body.w-grze { overflow: hidden; }
body.w-grze > :not(.scena):not(script):not(dialog) { visibility: hidden; }
.scena {
  --s: 1; --kw: calc(250px * var(--s)); --kh: calc(270px * var(--s));
  position: fixed; inset: 0; z-index: 40; color: #fff; overflow: hidden;
  background: radial-gradient(1200px 600px at 50% 120%, rgba(219,174,74,.14), transparent 60%), var(--granat);
  display: flex; flex-direction: column;
}
.scena.tryb-druzyny { --s: 1.25; }
@media (min-width: 1600px) { .scena { --s: 1.15; } .scena.tryb-druzyny { --s: 1.6; } }
.ekran-gra, .ekran-koniec { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gora { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(12px, 2vw, 28px); flex-wrap: wrap; }
.gora-btn { display: flex; gap: 8px; }
.btn-cichy { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 7px 16px; font-size: calc(15px * var(--s)); font-weight: 600; }
.btn-cichy:hover { border-color: #fff; }
.licznik { display: flex; align-items: center; gap: calc(10px * var(--s)); flex-wrap: wrap; font-size: calc(17px * var(--s)); font-weight: 600; }
.pigula { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 6px 14px; }
.pigula b { font-size: 1.25em; color: var(--zloto-jasne); }
.serca { display: inline-flex; gap: 4px; }
.serca svg { width: calc(24px * var(--s)); height: calc(24px * var(--s)); }
.serca .pusty { opacity: .28; }
.druzyna { display: inline-flex; align-items: center; gap: 10px; border-radius: 14px; padding: 6px 16px; border: 3px solid transparent; background: rgba(255,255,255,.06); }
.druzyna .znak { width: calc(18px * var(--s)); height: calc(18px * var(--s)); }
.druzyna b { font-size: 1.5em; color: #fff; min-width: 1.2em; text-align: center; }
.druzyna.teraz { border-color: var(--zloto); background: rgba(219,174,74,.16); }
.druzyna.teraz::after { content: "gra teraz"; font-size: .7em; color: var(--zloto-jasne); font-weight: 600; }

/* oś */
.os-wrap { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; padding: 6px clamp(12px, 2vw, 28px); overscroll-behavior: contain; }
.os { position: relative; display: flex; align-items: center; margin: 0 auto; padding: 22px 12px; min-width: max-content; }
.os::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: linear-gradient(90deg, transparent, var(--zloto) 3%, var(--zloto) 97%, transparent); opacity: .75; }
.karta {
  position: relative; width: var(--kw); min-height: var(--kh); flex: none;
  background: var(--karta); color: var(--karta-ink); border-radius: 14px;
  padding: calc(14px * var(--s)) calc(14px * var(--s)) calc(12px * var(--s));
  border-top: calc(10px * var(--s)) solid #fff; box-shadow: inset 0 calc(5px * var(--s)) 0 var(--czerwien), 0 10px 26px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 4px;
}
.k-data { margin: 0; font-weight: 800; font-size: calc(26px * var(--s)); line-height: 1.05; letter-spacing: -.01em; }
.k-tyt { margin: 0; font-size: calc(15.5px * var(--s)); line-height: 1.25; font-weight: 700; }
.k-opis { margin: 0; font-size: calc(14px * var(--s)); line-height: 1.4; color: #3c4560; }
.os .k-opis { display: none; }
.k-img { display: block; width: calc(100% + 28px * var(--s)); max-width: none; aspect-ratio: 16 / 10; object-fit: cover; margin: calc(-6px * var(--s)) calc(-14px * var(--s)) calc(6px * var(--s)); background: #c9cfdc; -webkit-user-drag: none; }
.k-img.kadr-gora { object-position: 50% 12%; }
.st-niezagrana .k-img { filter: grayscale(.6); }
.k-stan { margin: auto 0 0; font-size: calc(12.5px * var(--s)); font-weight: 700; }
.karta .ikona { position: absolute; top: calc(-16px * var(--s)); right: calc(-10px * var(--s)); width: calc(34px * var(--s)); height: calc(34px * var(--s)); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.karta .ikona svg { width: 62%; height: 62%; }
.st-start { outline: calc(3px * var(--s)) solid var(--zloto); }
.st-start .ikona { background: var(--zloto); color: var(--granat); }
.st-dobrze { outline: calc(3px * var(--s)) solid #3fbf7f; }
.st-dobrze .ikona { background: #17865a; color: #fff; }
.st-zle { background: var(--przes-tlo); outline: calc(3px * var(--s)) dashed var(--przes); }
.st-zle .ikona { background: var(--przes); color: #fff; }
.st-zle .k-stan { color: var(--przes); }
.st-niezagrana { opacity: .65; outline: 2px dashed rgba(255,255,255,.5); }
.st-niezagrana .k-stan { color: #6a7390; }
.k-druz { position: absolute; bottom: calc(10px * var(--s)); right: calc(10px * var(--s)); }
.szczelina {
  position: relative; flex: none; width: calc(50px * var(--s)); height: calc(var(--kh) * .9); margin: 0 calc(8px * var(--s));
  border: 3px dashed rgba(255,255,255,.4); border-radius: 12px; background: rgba(10,26,58,.85);
  color: rgba(255,255,255,.8); font-weight: 800; font-size: calc(26px * var(--s)); display: grid; place-items: center;
  transition: background-color .15s, border-color .15s, width .15s;
}
.szczelina:hover, .szczelina.aktywna { border-style: solid; border-color: var(--zloto); background: rgba(219,174,74,.25); color: #fff; }
.szczelina.aktywna { width: calc(78px * var(--s)); }
.szczelina:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
.os.bez-szczelin .karta { margin: 0 calc(10px * var(--s)); }
.karta.nowa { z-index: 2; }
.karta.odwraca { animation: odwroc .5s ease-in-out; }
@keyframes odwroc { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

/* ręka i wynik ruchu */
.dol { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 6px clamp(12px, 2vw, 28px) clamp(14px, 2.4vh, 28px); min-height: calc(200px * var(--s) + 50px); }
.reka { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kolej { margin: 0; color: var(--zloto-jasne); font-weight: 700; font-size: calc(18px * var(--s)); display: flex; align-items: center; gap: 10px; }
.kolej:empty { display: none; }
.karta-reka { width: min(calc(600px * var(--s)), 92vw); min-height: 0; cursor: grab; touch-action: none; user-select: none; outline: calc(3px * var(--s)) solid var(--zloto); display: grid; grid-template-columns: calc(220px * var(--s)) 1fr; grid-auto-rows: min-content; column-gap: calc(16px * var(--s)); }
.karta-reka > :not(.k-img) { grid-column: 2; }
.karta-reka { min-height: calc(176px * var(--s)); }
.karta-reka .k-img { grid-column: 1; grid-row: 1 / span 3; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; margin: 0; border-radius: 8px; contain: size; } /* contain: obrazek nie zmienia wysokości karty po wczytaniu */
.karta-reka .k-img[hidden] { display: none; }
.karta-reka:has(.k-img[hidden]) { grid-template-columns: 1fr; }
.karta-reka:has(.k-img[hidden]) > * { grid-column: 1; }
.karta-reka .k-data { color: var(--czerwien); }
.karta-reka .k-tyt { font-size: calc(21px * var(--s)); }
.karta-reka .k-opis { font-size: calc(16px * var(--s)); }
.podp { margin: 0; color: #aab6d6; font-size: calc(14px * var(--s)); text-align: center; }
.wynik-ruchu { max-width: min(calc(640px * var(--s)), 94vw); display: grid; gap: 10px; justify-items: start; background: rgba(255,255,255,.07); border-radius: 18px; padding: calc(16px * var(--s)) calc(20px * var(--s)); }
.info { margin: 0; font-size: calc(20px * var(--s)); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.info svg { width: 1.3em; height: 1.3em; flex: none; }
.info.dobrze { color: #7be0ac; }
.info.zle { color: #ffc277; }
.dlaczego { margin: 0; font-size: calc(16.5px * var(--s)); color: #dfe6f6; line-height: 1.5; }
.wynik-ruchu .btn { font-size: calc(18px * var(--s)); }
.duch { position: fixed; z-index: 60; pointer-events: none; opacity: .92; transform: rotate(2deg); margin: 0; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.reka.ciagnie .karta-reka { opacity: .3; }

/* ekran końcowy */
.tyt-koniec { text-align: center; padding: clamp(14px, 3vh, 34px) 16px 4px; }
.tyt-koniec .nad { margin-bottom: 4px; }
.tyt-koniec h2 { margin: 0; font-size: calc(clamp(28px, 4vw, 56px) * var(--s)); line-height: 1.05; font-weight: 800; }
.tyt-koniec p { margin: 8px auto 0; color: #d3dbef; font-size: calc(17px * var(--s)); max-width: 44em; }
.k-podp { text-align: center; color: var(--zloto-jasne); margin: 10px 0 0; font-weight: 600; font-size: calc(15px * var(--s)); }
.os-koniec .karta { margin: 0 calc(10px * var(--s)); }
.koniec-btn { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 6px 16px clamp(16px, 3vh, 30px); }
.scena.pokaz { --s: 1.7; }
.scena.pokaz .koniec-btn .btn:not(#btn-nauczyciel) { display: none; }

.okno-tlo { position: fixed; inset: 0; background: rgba(2,8,22,.6); display: grid; place-items: center; z-index: 70; padding: 16px; }
.okno { background: #fff; color: var(--tekst); border-radius: 20px; padding: 24px; max-width: 440px; }
.okno h2 { margin: 0 0 6px; }

/* telefon: oś pionowa, od góry najstarsze */
@media (max-width: 700px) {
  .scena, .scena.tryb-druzyny, .scena.pokaz { --s: .9; --kw: 100%; --kh: auto; }
  .scena.pokaz .tyt-koniec h2 { font-size: 40px; }
  .os-wrap { overflow-x: hidden; overflow-y: auto; align-items: flex-start; }
  .os { flex-direction: column; align-items: stretch; min-width: 0; width: 100%; padding: 8px 4px 8px 22px; }
  .os::before { left: 8px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; margin: 0; background: linear-gradient(180deg, transparent, var(--zloto) 2%, var(--zloto) 98%, transparent); }
  .karta { min-height: 0; display: grid; grid-template-columns: 96px 1fr; grid-auto-rows: min-content; column-gap: 12px; }
  .karta > :not(.k-img) { grid-column: 2; }
  .karta .k-img { grid-column: 1; grid-row: 1 / span 4; width: 96px; height: auto; aspect-ratio: 4 / 3; min-height: 0; margin: 0; border-radius: 6px; }
  .szczelina, .szczelina.aktywna { width: 100%; height: 40px; margin: 6px 0; font-size: 20px; display: flex; justify-content: center; align-items: center; }
  .szczelina.aktywna { height: 56px; }
  .szczelina.aktywna::after { content: "Tutaj"; font-size: 15px; margin-left: 6px; }
  .os.bez-szczelin .karta, .os-koniec .karta { margin: 6px 0; }
  .dol { min-height: 0; padding-top: 4px; flex-direction: column; align-items: stretch; }
  .reka { align-items: stretch; }
  .karta-reka { width: 100%; grid-template-columns: 110px 1fr; }
  .karta-reka .k-img { width: 110px; }
  .karta-reka .k-opis { font-size: 14px; }
  .podp { display: none; }
  .wynik-ruchu { max-width: none; }
  .gora { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .karta.odwraca { animation: none; }
}