) -------------------------------- To samo co .o-grze w system.css, w barwach „Naukowca”: czego gra uczy, dla której klasy, do których lekcji pasuje. Czytają go też wyszukiwarki, bo samą grę rysują skrypty. Szeroki ekran: opis leży tuż pod oknem gry (trzeba przewinąć); telefon i wąski tablet: zwykłym ciągiem pod grą. */ .o-grze { padding: 32px 20px 44px; border-top: 1px solid var(--n-linia); background: linear-gradient(var(--n-siatka) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--n-siatka) 1px, transparent 1px) 0 0 / 32px 32px, var(--n-tlo); } .o-grze-kartka { margin: 0; padding: 22px 26px 24px; /* do lewej krawędzi gry, jak biurko i polecenie (Piotr, 22.10.2026) */ background: var(--n-panel); border: 1px solid var(--n-linia); border-radius: var(--n-r); box-shadow: var(--n-cien); container: o-grze / inline-size; /* kolumny i linijka klas zależą od szerokości kartki (@container o-grze niżej) */ } .o-grze h2 { margin: 0 0 10px; font: 700 22px/1.25 var(--n-font); text-wrap: balance; } .o-grze h3 { margin: 20px 0 6px; font: 700 12.5px/1.25 var(--n-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--n-akcent); } .o-grze p, .o-grze li { margin: 0; font: 400 17px/1.55 var(--n-font); } .o-grze ul { margin: 0; padding-left: 20px; } .o-grze li + li { margin-top: 4px; } /* linki do części gry (np. Paliwo: odżywianie / oddychanie): wciśnięty zmienia kolor, jak każdy przycisk */ .o-grze .o-grze-czesci { margin-top: 12px; } .o-grze a { color: var(--n-akcent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; } .o-grze a:hover { text-decoration-thickness: 2.5px; } .o-grze a:active { color: var(--n-tekst); } .o-grze-stopka p { font-size: 14px; line-height: 1.45; color: var(--n-tekst-2); } /* treść: jedna kolumna (linia do ok. 75 znaków); na szerokiej kartce dwie — gra po lewej, dorośli po prawej */ .o-grze-tresc { max-width: 760px; } @container o-grze (min-width: 1000px) { .o-grze-tresc { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; } .o-grze-dla > h3:first-child { margin-top: 4px; } } /* --- stopka opisu „Linijka klas” (Figma DS, sekcja 409:6983; Piotr wybrał ją 30.10.2026) ------------------------- Logo stoi na „podłodze”, która jest linijką klas 0–8; na podłodze stoją klocki z „Pasuje do” tej gry. Klocek w HTML: style="--od: 4; --do: 6; --rzad: 0; --rzad-w: 1" (pierwsza i ostatnia klasa, rząd na szerokiej kartce, rząd na wąskiej; rzędy liczone od podłogi). Liczba rzędów na .o-grze-klocki: --rzedy i --rzedy-w. Rysunek logo wstawia wspolne/stopka.js. Wąsko (telefon, tablet, mały laptop): sam znak, podpis obok klocka — z lewej, a z data-podpis="prawo" z prawej (dla klocków blisko początku linijki), każdy klocek w swoim rzędzie. Szeroko: całe logo, podpisy w klockach. */ .o-grze-stopka { margin-top: 28px; } .o-grze-linijka { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; } .o-grze-logo { grid-area: 1 / 1; display: block; width: 48px; height: 44px; margin-right: 10px; overflow: hidden; line-height: 0; color: var(--n-tekst); } .o-grze-logo svg { display: block; width: 317px; height: 44px; fill: currentColor; } .o-grze-logo .logo-akcent { fill: var(--n-akcent); } .o-grze-klocki { grid-area: 1 / 2; position: relative; height: calc(var(--rzedy-w, 1) * 22px); } .o-grze-klocek { position: absolute; bottom: calc(var(--rzad-w, 0) * 22px); height: 22px; left: calc(var(--od) * 100% / 9 + 2px); width: calc((var(--do) - var(--od) + 1) * 100% / 9 - 4px); display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--n-akcent-tlo); border: 1px solid var(--n-akcent); border-bottom: 0; border-radius: 5px 5px 0 0; font: 600 12.5px/1 var(--n-mono); letter-spacing: .03em; color: var(--n-akcent); white-space: nowrap; } .o-grze-klocek > span { position: absolute; right: calc(100% + 6px); } .o-grze-klocek[data-podpis="prawo"] > span { right: auto; left: calc(100% + 6px); } .o-grze-os, .o-grze-klasy { align-self: stretch; border-top: 2px solid var(--n-linia-mocna); padding-top: 20px; font: 600 12.5px/1.35 var(--n-mono); color: var(--n-tekst-2); } .o-grze-os { grid-area: 2 / 1; padding-right: 8px; text-align: right; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .o-grze-klasy { grid-area: 2 / 2; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0; padding-left: 0; list-style: none; text-align: center; --kreska: var(--n-linia-mocna); --kreska-2: var(--n-linia); --gestosc: 36; /* 4 drobne kreski na klasę, środkowa wpada na połówkę */ background: linear-gradient(var(--kreska), var(--kreska)) right top / 2px 14px no-repeat, linear-gradient(90deg, var(--kreska) 2px, transparent 0) 0 0 / calc(100% / 9) 14px repeat-x, linear-gradient(90deg, var(--kreska-2) 1px, transparent 0) 0 0 / calc(100% / 18) 9px repeat-x, linear-gradient(90deg, var(--kreska-2) 1px, transparent 0) 0 0 / calc(100% / var(--gestosc)) 5px repeat-x; } .o-grze .o-grze-klasy li { margin: 0; font: inherit; } .o-grze .o-grze-klasy .tak { color: var(--n-akcent); font-weight: 700; } /* pod linijką: drobny druk („Pasuje do…”, autorskie) i powrót do wszystkich ćwiczeń — najpierw jeden pod drugim (telefon, też przeglądarki bez @container, np. Safari na iOS 15), obok siebie od 600 px kartki */ .o-grze-podpis { display: flex; flex-direction: column; align-items: stretch; gap: 16px 40px; margin-top: 24px; } .o-grze-druk { min-width: 0; } .o-grze .o-grze-wroc { flex: none; justify-content: center; gap: 6px; padding: 11px 14px 11px 10px; font-size: 14.5px; } .o-grze a.o-grze-wroc { color: var(--n-tekst); text-decoration: none; } @container o-grze (min-width: 600px) { .o-grze-podpis { flex-direction: row; align-items: center; } .o-grze-druk { flex: 1; } .o-grze .o-grze-wroc { padding-block: 10px; } } /* bardzo wąsko (320 px, powiększenie 400 %): podpisy klocków zachodziłyby na znak — znak znika, linijka zostaje */ @container o-grze (max-width: 260px) { .o-grze-logo { display: none; } } @container o-grze (min-width: 1180px) { .o-grze-logo { width: 317px; margin-right: 44px; } .o-grze-os { padding-right: 16px; } .o-grze-klocki { height: calc(var(--rzedy, 1) * 26px); } .o-grze-klocek { bottom: calc(var(--rzad, 0) * 26px); height: 26px; border-radius: 6px 6px 0 0; left: calc(var(--od) * 100% / 9 + 3px); width: calc((var(--do) - var(--od) + 1) * 100% / 9 - 6px); } .o-grze-klocek > span { position: static; } .o-grze-klasy { --gestosc: 90; } } @media print { .o-grze { display: none !important; } } /* --- ekran szeroki: gra mieści się w oknie (przewija się tylko panel zadania), pod oknem leży opis gry ---------- */ @media (min-width: 901px) { body { height: 100vh; height: 100dvh; overflow: hidden auto; } /* w bok nic nie wystaje; w dół strona przewija się tylko do opisu */ .o-grze { position: absolute; top: 100%; left: 0; right: 0; } .side { overscroll-behavior: contain; } /* panel przewinięty do końca nie przesuwa strony z grą */ } /* --- telefon i wąski tablet ------------------------------------------------------------------ */ @media (max-width: 900px) { body { display: block; } .top { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px 10px; } .brand h1 { font-size: 21px; } .narzedzia { gap: 6px; } /* przyciski z ikoną zostają w rozmiarze z Figmy (N/Przycisk z ikoną: 38 px, 14,5 px) — jak w Do zamku (Piotr 07.11.2026; wcześniej telefon zmniejszał je do 36 px) */ /* polecenie jak na szerokim ekranie (karta z obrysem i cieniem, te same rozmiary tekstu), ale o stałej wysokości (Piotr 06.11.2026, Figma 477:9068 — wariant B): treść przewija się w środku karty, „jak” zawsze w całości, obok własny pasek przewijania (rynna 14 px, suwak 4 px), gdy tekst się nie mieści. 196 px = wysokość z Figmy dla Wirusów (480:10542). */ .polecenie { --pol-x: 12px; --pol-wys: 196px; height: var(--pol-wys); min-height: 0; margin: 0 12px 12px; } .pol-tresc { padding: 0 12px 0 0; overscroll-behavior: contain; } .pol-tresc::after { height: 12px; } .pol-rozwin { display: none !important; } .pol-pasek:not([hidden]) { display: block; flex: none; width: 14px; padding: 7px 5px; overflow: hidden; background: var(--n-panel); } /* suwak nigdy poza rynną (Figma 483:10490) */ .pol-pasek > span { display: block; width: 4px; height: 24px; border-radius: 10px; background: var(--n-akcent); will-change: transform; } .desk { grid-template-columns: 1fr; padding: 0 12px 16px; gap: 12px; } .side { padding: 16px 14px 18px; overflow: visible; } } /* --- telefon: polecenie nie jest przypięte u góry — przewija się razem ze stroną (przypięte zabierało ekran); tak samo telefon poziomo (szerszy niż 620 px, ale niski: przypięte zasłaniało pół ekranu — przegląd iPhone, 27.10.2026) --- */ @media (max-width: 620px), (max-height: 500px) { .polecenie { position: relative; } } /* --- „Pełny widok” na telefonie i tablecie: strona zablokowana, polecenie przypięte u góry, plansza na resztę ekranu, każdy ruch palca obraca model (Piotr, 27.10.2026). Klasę n-blokada na zakłada wspolne/naukowiec.js (blokada()), gdy gra włączy pełny widok (lab-pelny na ); --n-pol-h = wysokość paska polecenia. Karty jak w Do zamku (Piotr 07.11.2026): polecenie i plansza zostają kartami z zaokrągleniami, 10 px od brzegów ekranu (albo więcej, gdy wymaga tego wcięcie ekranu) i 10 px od siebie. --- */ html.n-blokada { overflow: hidden; overscroll-behavior: none; --n-blok-g: max(10px, env(safe-area-inset-top, 0px)); --n-blok-d: max(10px, env(safe-area-inset-bottom, 0px)); --n-blok-l: max(10px, env(safe-area-inset-left, 0px)); --n-blok-p: max(10px, env(safe-area-inset-right, 0px)); } html.n-blokada body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; overscroll-behavior: none; } /* pod kartami pełne tło strony (siatka i poświata): nagłówek, panel i opis gry nie prześwitują przez odstępy między kartami — jak w Do zamku, gdzie cała gra leży na własnym tle (Piotr 07.11.2026) */ html.n-blokada body::before { content: ""; position: fixed; inset: 0; z-index: 58; background: inherit; } html.n-blokada .polecenie { position: fixed; top: var(--n-blok-g); left: var(--n-blok-l); right: var(--n-blok-p); z-index: 60; margin: 0; touch-action: none; } html.n-blokada .pol-tresc { touch-action: pan-y; } /* treść polecenia nadal przewija się palcem */ html.n-blokada #stage { position: fixed; top: calc(var(--n-blok-g) + var(--n-pol-h, 0px) + 10px); left: var(--n-blok-l); right: var(--n-blok-p); bottom: var(--n-blok-d); z-index: 59; height: auto; min-height: 0; max-height: none; margin: 0; touch-action: none; } html.n-blokada #stage .lab-3d { touch-action: none; } /* bez „pan-y”: ruch w pionie obraca model, a nie przewija stronę */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }